:root{--navy:#032a58;--navy2:#001b3c;--blue:#075cb9;--yellow:#ffd600;--green:#18b26b;--red:#f14f58;--orange:#ff8a22;--purple:#8c68ee;--bg:#eef3f8;--card:#fff;--text:#10233e;--muted:#6b7c91;--line:#dce5ef;--shadow:0 16px 40px rgba(8,40,75,.09);--radius:20px}
*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.45}button,input,select{font:inherit}.app-shell{min-height:100vh;display:grid;grid-template-columns:248px 1fr}.sidebar{background:linear-gradient(180deg,#073b77,#001e42);color:#fff;padding:24px 16px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;z-index:20}.sidebar-brand{display:flex;align-items:center;gap:12px;padding:4px 0 28px;font-size:24px;font-weight:900;letter-spacing:-1.2px}.sidebar-brand .logo{width:48px;height:48px;flex-shrink:0}.sidebar-brand div{flex:1}.sidebar-brand span{display:block}.sidebar-brand strong{color:var(--yellow)}.sidebar-brand small{display:block;font-size:12px;letter-spacing:.2px;color:#a9c5e3;margin-top:2px}.sidebar nav{display:flex;flex-direction:column;gap:5px}.nav-item{border:0;background:transparent;color:#bcd0e7;border-radius:12px;padding:12px 13px;display:flex;align-items:center;gap:12px;text-align:left;font-weight:750;cursor:pointer}.nav-item span{width:22px;text-align:center;font-size:18px}.nav-item:hover{background:rgba(255,255,255,.07);color:#fff}.nav-item.active{background:var(--yellow);color:#062b58}.sidebar-footer{margin-top:auto;border-top:1px solid rgba(255,255,255,.12);padding:18px 10px 0}.account-mini{display:flex;gap:10px;align-items:center}.account-mini div{display:flex;flex-direction:column}.account-mini small{color:#9cb7d5}.sidebar-footer>a{display:block;color:#9eb9d7;font-size:12px;margin-top:18px}.avatar{width:34px;height:34px;border-radius:50%;background:var(--yellow);color:#062b58;font-size:12px;font-weight:900;display:inline-flex;align-items:center;justify-content:center}.avatar.large{width:46px;height:46px}.main-panel{min-width:0}.topbar{height:84px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 30px;gap:20px;position:sticky;top:0;z-index:12}.topbar-title{margin-right:auto}.topbar-title small{color:var(--blue);font-weight:900;letter-spacing:1.7px;font-size:9px}.topbar-title h1{font-size:25px;margin:1px 0 0}.topbar-actions{display:flex;align-items:center;gap:10px}.mode-pill{border:1px solid #ffd76a;background:#fff9dd;color:#7b5a00;border-radius:99px;padding:8px 12px;font-size:11px;font-weight:850}.mode-pill span{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--yellow);margin-right:6px}.icon-button,.profile-button,.mobile-menu{border:1px solid var(--line);background:#fff;border-radius:12px;height:42px;cursor:pointer}.icon-button{width:42px}.profile-button{display:flex;align-items:center;gap:8px;padding:4px 12px 4px 5px;font-weight:800}.mobile-menu{display:none;width:42px}.notice{margin:22px 30px 0;padding:15px 18px;border:1px solid #f1cc4f;background:#fff9db;border-radius:14px;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:13px}.notice button{border:0;background:transparent;color:#0758ae;font-weight:900;cursor:pointer}.view{display:none;padding:28px 30px 50px}.view.active{display:block}.welcome-row,.page-actions{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:26px}.welcome-row h2{font-size:34px;letter-spacing:-1px;margin:0}.welcome-row p:not(.eyebrow),.page-actions p{color:var(--muted);margin:8px 0 0}.welcome-actions{display:flex;gap:10px}.eyebrow{color:var(--blue);letter-spacing:1.6px;font-size:10px;font-weight:900;margin:0 0 7px}.button{border:0;background:var(--yellow);color:#062b58;border-radius:12px;min-height:44px;padding:0 18px;font-weight:900;cursor:pointer}.button:hover{filter:brightness(.98);transform:translateY(-1px)}.button.secondary{background:#fff;border:1px solid #bfcfe0;box-shadow:none}.button.compact{min-height:38px;padding:0 13px;font-size:12px}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px}.metric-card,.panel,.media-card,.plan-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 3px 15px rgba(9,40,72,.025)}.metric-card{padding:20px}.metric-label{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:850;color:#53667d}.metric-icon{width:26px;height:26px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-size:10px}.metric-icon.green{background:#daf7e9;color:var(--green)}.metric-icon.yellow{background:#fff5bf;color:#a17c00}.metric-icon.blue{background:#ddebff;color:var(--blue)}.metric-icon.purple{background:#eee7ff;color:var(--purple)}.metric-card>strong{font-size:28px;display:block;margin-top:18px}.metric-card p{color:var(--muted);font-size:12px;margin:3px 0 0}.dashboard-grid{display:grid;grid-template-columns:1.4fr .8fr;gap:18px}.panel{padding:22px}.wide-panel{grid-column:1/2}.setup-panel{grid-column:2/3;grid-row:1/3}.activity-panel{grid-column:1/2}.panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:20px}.panel-heading h3{font-size:20px;margin:0}.text-button{border:0;background:none;color:var(--blue);font-weight:850;cursor:pointer}.display-row{display:grid;grid-template-columns:155px 1fr auto;gap:20px;align-items:center}.display-thumbnail{height:92px;border-radius:13px;background:linear-gradient(#134c8c,#002b5c);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}.display-thumbnail>span{font-weight:900;font-size:12px}.display-thumbnail strong{color:var(--yellow)}.display-thumbnail b{font-size:22px;color:#ff5e65}.display-thumbnail small{font-size:8px}.display-info h4{font-size:17px;margin:0 0 4px}.display-info p{color:var(--muted);font-size:12px;margin:0}.status-line{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:11px;color:var(--muted)}.status{display:inline-flex;border-radius:99px;padding:5px 9px;font-size:10px;font-weight:900}.status.online,.status.active{background:#d9f8e8;color:#098b50}.status.offline{background:#ffe1e3;color:#b6242c}.display-actions{display:flex;gap:8px}.progress-ring{width:46px;height:46px;border:5px solid #e5edf5;border-top-color:var(--yellow);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900}.setup-list{list-style:none;padding:0;margin:0}.setup-list li{display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}.setup-list li>span{width:26px;height:26px;border-radius:8px;background:#edf2f7;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900}.setup-list li.done>span{background:#dff8eb;color:var(--green)}.setup-list li div{display:flex;flex-direction:column}.setup-list li strong{font-size:12px}.setup-list li small{color:var(--muted)}.setup-list li button{border:0;background:none;color:var(--blue);font-weight:900;font-size:11px;cursor:pointer}.timeline>div{display:flex;gap:13px;align-items:flex-start;padding:10px 0}.timeline p{display:flex;flex-direction:column;margin:0;font-size:12px}.timeline small{color:var(--muted);margin-top:2px}.dot{width:10px;height:10px;border-radius:50%;margin-top:5px}.dot.yellow{background:var(--yellow)}.dot.blue{background:var(--blue)}.dot.green{background:var(--green)}.table-panel{padding:0;overflow:hidden}.table-toolbar{padding:17px;border-bottom:1px solid var(--line);display:flex;gap:10px}.table-toolbar input,.table-toolbar select{border:1px solid var(--line);background:#f8fafc;border-radius:10px;padding:10px 12px}.table-toolbar input{min-width:250px}.data-table{width:100%}.table-head,.table-row{display:grid;grid-template-columns:1.6fr .75fr .8fr 90px;gap:12px;align-items:center;padding:14px 18px}.table-head{background:#f8fafc;color:#6b7e93;font-size:10px;font-weight:900;letter-spacing:1px}.table-row{border-top:1px solid var(--line);font-size:13px}.table-row strong{display:block}.table-row small{color:var(--muted)}.table-actions{display:flex;justify-content:flex-end}.kebab{border:0;background:transparent;cursor:pointer}.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.plan-card{padding:22px}.plan-top{display:flex;justify-content:space-between}.plan-icon{width:48px;height:48px;border-radius:14px;background:#e3efff;color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:22px}.plan-card h3{margin:18px 0 4px}.plan-card p{color:var(--muted);font-size:13px}.plan-stats{display:flex;gap:16px;border-top:1px solid var(--line);padding-top:16px;margin-top:18px}.plan-stats span{display:flex;flex-direction:column;font-size:11px;color:var(--muted)}.plan-stats strong{font-size:16px;color:var(--text)}.two-column{display:grid;grid-template-columns:1.15fr .85fr;gap:18px}.hours-editor{display:flex;flex-direction:column}.hours-row{display:grid;grid-template-columns:105px 60px 1fr 20px 1fr;gap:10px;align-items:center;padding:11px 0;border-top:1px solid var(--line)}.hours-row strong{font-size:13px}.hours-row input[type=time]{border:1px solid var(--line);padding:9px;border-radius:9px;min-width:0}.hours-row .dash{text-align:center;color:var(--muted)}.toggle{appearance:none;width:42px;height:23px;background:#d6e0ea;border-radius:99px;position:relative;cursor:pointer}.toggle:after{content:"";position:absolute;width:17px;height:17px;border-radius:50%;background:#fff;left:3px;top:3px;box-shadow:0 1px 4px #788}.toggle:checked{background:var(--green)}.toggle:checked:after{left:22px}.hours-row.disabled input[type=time]{opacity:.35}.automation-list label{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 0;border-top:1px solid var(--line)}.automation-list label span{display:flex;flex-direction:column}.automation-list label strong{font-size:13px}.automation-list label small{color:var(--muted);margin-top:3px}.automation-list input{width:20px;height:20px}.media-tabs{display:flex;gap:8px;margin-bottom:16px}.media-tabs button{border:1px solid var(--line);background:#fff;border-radius:99px;padding:9px 14px;font-weight:800;font-size:12px}.media-tabs button.active{background:var(--navy);color:#fff}.media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.media-card{padding:14px}.media-card h3{margin:14px 4px 4px;font-size:15px}.media-card>p{margin:0 4px 7px;color:var(--muted);font-size:12px}.media-preview{height:185px;border-radius:14px;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}.open-preview{background:linear-gradient(145deg,#12a760,#087442)}.away-preview{background:linear-gradient(145deg,#9a7722,#4d3a08)}.media-preview span{font-size:20px;font-weight:900}.media-preview b{font-size:44px;color:var(--yellow)}.add-card{border:2px dashed #b8c8d8;box-shadow:none;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:255px;cursor:pointer}.add-card>span{font-size:35px;color:var(--blue)}.user-row{display:grid;grid-template-columns:auto 1fr auto auto;gap:16px;align-items:center;padding:20px}.user-row h3{margin:0}.user-row p{margin:2px 0;color:var(--muted);font-size:12px}.empty-row{text-align:center;padding:60px 20px;border-top:1px solid var(--line)}.empty-row h3{margin:13px 0 5px}.empty-row p{color:var(--muted)}.empty-icon{font-size:34px}.billing-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}.current-plan{background:linear-gradient(145deg,#073d7e,#002556);color:#fff}.current-plan .eyebrow{color:var(--yellow)}.current-plan h2{font-size:34px;margin:0}.current-plan>p:not(.eyebrow){color:#b9cee6}.plan-usage{display:flex;gap:22px;margin:28px 0}.plan-usage span{display:flex;flex-direction:column;color:#afc7e2;font-size:12px}.plan-usage strong{font-size:25px;color:#fff}.secure-note{margin-top:25px;padding:15px;border-radius:12px;background:#eff8f4;color:#16764d;font-size:12px;font-weight:800}.settings-grid .panel{min-height:430px}.form-grid{display:grid;gap:15px}.form-grid label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:800}.form-grid input,.form-grid select{border:1px solid var(--line);border-radius:10px;padding:11px;background:#fbfcfd}.form-grid .button{justify-self:start}.details-list{margin:0}.details-list>div{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-top:1px solid var(--line)}.details-list dt{color:var(--muted)}.details-list dd{margin:0;font-weight:800;text-align:right}.modal-backdrop{position:fixed;inset:0;background:rgba(0,18,40,.62);z-index:50;display:flex;align-items:center;justify-content:center;padding:20px}.modal{background:#fff;border-radius:22px;width:min(560px,100%);max-height:88vh;overflow:auto;position:relative;padding:30px;box-shadow:0 28px 80px rgba(0,0,0,.3)}.modal-close{position:absolute;right:17px;top:14px;border:0;background:none;font-size:28px;cursor:pointer}.modal h2{margin:0 0 8px}.modal p{color:var(--muted)}.modal .form-grid{margin-top:20px}.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}.code-box{background:#071f3e;color:#d6e7fb;padding:15px;border-radius:12px;overflow:auto;font-size:12px}.toast{position:fixed;right:25px;bottom:25px;background:#082c58;color:#fff;padding:14px 18px;border-radius:12px;box-shadow:var(--shadow);opacity:0;transform:translateY(15px);pointer-events:none;transition:.2s;z-index:60;font-weight:800;font-size:13px}.toast.show{opacity:1;transform:none}
.auth-gate{min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(145deg,#001d40,#075db8)}
.auth-card{width:min(440px,100%);background:#fff;border-radius:24px;padding:36px;box-shadow:0 28px 80px rgba(0,0,0,.25)}
.auth-logo{display:block;width:82px;height:82px;object-fit:contain;margin:0 auto 18px}.auth-card h1{margin:0;text-align:center}.auth-card>.eyebrow,.auth-copy{text-align:center}.auth-copy{color:var(--muted);margin:8px 0 24px}.auth-card .button{width:100%}.auth-divider{display:flex;align-items:center;gap:12px;color:var(--muted);margin:18px 0}.auth-divider:before,.auth-divider:after{content:"";height:1px;background:var(--line);flex:1}.form-error{margin:0;color:#a61f2a;background:#ffe8ea;border-radius:10px;padding:10px;font-size:12px}.error-notice{border-color:#ef8991;background:#fff0f1;color:#8a1720}.mode-pill.offline{border-color:#ef8991;background:#fff0f1;color:#8a1720}.mode-pill.offline span{background:var(--red)}
@media(max-width:1100px){.metric-grid{grid-template-columns:repeat(2,1fr)}.dashboard-grid{grid-template-columns:1fr}.wide-panel,.setup-panel,.activity-panel{grid-column:auto;grid-row:auto}.two-column,.billing-grid{grid-template-columns:1fr}.media-grid,.card-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:780px){.app-shell{grid-template-columns:1fr}.sidebar{position:fixed;left:-270px;transition:.25s;width:248px}.sidebar.open{left:0;box-shadow:15px 0 50px rgba(0,0,0,.3)}.mobile-menu{display:block}.topbar{padding:0 16px}.mode-pill,.profile-button>span:last-child{display:none}.notice,.view{margin-left:0;margin-right:0}.notice{margin:14px 14px 0}.view{padding:22px 14px 40px}.welcome-row,.page-actions{align-items:flex-start;flex-direction:column}.metric-grid{grid-template-columns:1fr 1fr}.display-row{grid-template-columns:110px 1fr}.display-actions{grid-column:1/-1}.media-grid,.card-grid{grid-template-columns:1fr}.table-head{display:none}.table-row{grid-template-columns:1fr 1fr}.table-actions{justify-content:flex-start}.hours-row{grid-template-columns:85px 48px 1fr 12px 1fr}.topbar-title h1{font-size:20px}}
@media(max-width:500px){.metric-grid{grid-template-columns:1fr}.welcome-actions{width:100%;flex-direction:column}.welcome-actions .button{width:100%}.display-row{grid-template-columns:1fr}.display-thumbnail{height:140px}.hours-row{grid-template-columns:1fr 50px 1fr 12px 1fr}.hours-row strong{grid-column:1/-1}.table-row{grid-template-columns:1fr}.media-tabs{overflow:auto}.topbar-actions .icon-button{display:none}}
.modal-backdrop[hidden]{display:none}
.sidebar-brand{justify-content:center;padding:4px 0 28px}
.sidebar-brand .logo{display:block;width:76px;height:76px;object-fit:contain}