:root{
  --bg:#f4f7fb;--panel:#ffffff;--panel2:#f8fafc;--text:#152033;--muted:#667085;--line:#e5eaf1;
  --nav:#0b1733;--nav2:#101f43;--brand:#315dfb;--brand2:#15b8a6;--gold:#d6a84a;--danger:#e5484d;
  --success:#12a66a;--warning:#d98b13;--shadow:0 16px 40px rgba(17,35,73,.09);--radius:20px;
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--text);background:var(--bg)}button,input,select{font:inherit}button{cursor:pointer}.hidden{display:none!important}
.login-shell{min-height:100vh;display:grid;grid-template-columns:minmax(340px,1.15fr) minmax(420px,.85fr);background:linear-gradient(135deg,#07122b 0%,#0d1d40 46%,#eef3fb 46%,#f7f9fc 100%)}
.login-brand{padding:8vw;display:flex;flex-direction:column;justify-content:center;color:white;position:relative;overflow:hidden}.login-brand:before,.login-brand:after{content:"";position:absolute;border-radius:50%;filter:blur(1px);opacity:.16}.login-brand:before{width:420px;height:420px;border:1px solid #fff;right:-150px;top:-120px}.login-brand:after{width:260px;height:260px;background:radial-gradient(circle,#315dfb,transparent 68%);left:8%;bottom:-70px}.logo-row{display:flex;align-items:center;gap:13px;font-weight:800;letter-spacing:.2px}.logo-mark{width:42px;height:42px;border-radius:13px;background:linear-gradient(145deg,#315dfb,#20c7b7);display:grid;place-items:center;box-shadow:0 10px 26px rgba(49,93,251,.35);position:relative}.logo-mark:before{content:"";width:19px;height:13px;border:3px solid white;border-radius:5px}.logo-mark:after{content:"";position:absolute;width:8px;height:3px;background:white;border-radius:4px;bottom:9px}.logo-row strong{font-size:20px}.login-brand h1{font-size:clamp(38px,5vw,68px);line-height:1.02;max-width:760px;margin:62px 0 20px;letter-spacing:-2.2px}.login-brand p{font-size:18px;line-height:1.7;color:#c9d4ea;max-width:650px}.trust-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:38px;max-width:650px}.trust{padding:16px;border:1px solid rgba(255,255,255,.13);border-radius:16px;background:rgba(255,255,255,.055);backdrop-filter:blur(10px);font-size:14px;color:#dce5f6}.trust b{display:block;color:white;margin-bottom:5px}
.login-side{display:grid;place-items:center;padding:42px}.login-card{width:min(470px,100%);background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.9);box-shadow:0 30px 90px rgba(8,26,61,.15);border-radius:28px;padding:38px}.eyebrow{text-transform:uppercase;letter-spacing:1.5px;color:var(--brand);font-weight:800;font-size:11px}.login-card h2{font-size:31px;letter-spacing:-.8px;margin:10px 0 9px}.login-card .intro{color:var(--muted);line-height:1.6;margin:0 0 28px}.field{margin:16px 0}.field label{display:block;font-size:13px;font-weight:700;margin:0 0 8px}.input{width:100%;height:48px;border:1px solid #dce3ec;border-radius:13px;background:white;padding:0 14px;outline:none;transition:.2s}.input:focus{border-color:#7894ff;box-shadow:0 0 0 4px rgba(49,93,251,.09)}.primary{border:0;border-radius:13px;background:linear-gradient(135deg,#315dfb,#244cd8);color:white;font-weight:800;padding:13px 18px;box-shadow:0 10px 22px rgba(49,93,251,.22)}.primary:disabled{opacity:.6;cursor:not-allowed}.login-card .primary{width:100%;height:50px;margin-top:8px}.error{min-height:22px;color:var(--danger);font-size:13px;margin-top:12px}.privacy-note{font-size:12px;line-height:1.55;color:#7d8799;border-top:1px solid var(--line);padding-top:18px;margin-top:20px}
.app-shell{display:grid;grid-template-columns:248px 1fr;min-height:100vh}.sidebar{background:linear-gradient(180deg,var(--nav),#071226 100%);color:white;padding:22px 18px;position:fixed;inset:0 auto 0 0;width:248px;z-index:40;display:flex;flex-direction:column}.sidebar .logo-row{padding:4px 8px 24px}.sidebar .logo-mark{width:36px;height:36px;border-radius:11px}.sidebar .logo-row strong{font-size:17px}.nav-label{color:#7180a3;font-size:10px;text-transform:uppercase;letter-spacing:1.3px;font-weight:800;padding:16px 11px 8px}.nav-button{width:100%;border:0;background:transparent;color:#aebbd4;border-radius:12px;padding:11px 12px;text-align:left;display:flex;align-items:center;gap:11px;margin:3px 0;font-size:13px;font-weight:700}.nav-button:hover,.nav-button.active{background:rgba(255,255,255,.075);color:white}.nav-icon{width:18px;text-align:center;opacity:.9}.sidebar-bottom{margin-top:auto;border-top:1px solid rgba(255,255,255,.08);padding-top:15px}.policy-badge{font-size:11px;line-height:1.5;color:#8fa1c3;padding:10px}.policy-badge b{color:#cbd6eb}.content{grid-column:2;min-width:0}.topbar{height:76px;background:rgba(255,255,255,.88);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 30px;position:sticky;top:0;z-index:30}.page-title h1{font-size:21px;margin:0;letter-spacing:-.45px}.page-title span{font-size:12px;color:var(--muted)}.toolbar{display:flex;align-items:center;gap:10px}.select,.toolbar-btn{height:40px;border:1px solid var(--line);background:white;border-radius:11px;padding:0 12px;color:#344054;font-size:12px;font-weight:700}.toolbar-btn{display:flex;align-items:center;gap:7px}.toolbar-btn:hover{border-color:#c9d3e2;background:#fafcff}.dashboard{padding:28px 30px 46px;max-width:1580px;margin:auto}.notice-strip{display:flex;align-items:center;gap:12px;background:#fff9e9;border:1px solid #f0dda8;border-radius:14px;padding:11px 14px;color:#76581d;font-size:12px;margin-bottom:20px}.notice-dot{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 5px rgba(214,168,74,.13)}
.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.kpi{background:var(--panel);border:1px solid var(--line);border-radius:17px;padding:18px;box-shadow:0 5px 15px rgba(21,32,51,.025)}.kpi-head{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.7px}.kpi-icon{width:32px;height:32px;border-radius:10px;background:#eef2ff;color:var(--brand);display:grid;place-items:center;font-size:15px}.kpi-value{font-size:28px;font-weight:850;letter-spacing:-1px;margin:12px 0 3px}.kpi-sub{font-size:11px;color:var(--muted)}.section-head{display:flex;align-items:flex-end;justify-content:space-between;margin:28px 0 12px}.section-head h2{font-size:17px;letter-spacing:-.3px;margin:0}.section-head p{font-size:12px;color:var(--muted);margin:4px 0 0}.device-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:15px}.device-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:17px;position:relative;transition:.2s;cursor:pointer}.device-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:#d4ddea}.device-card.selected{border-color:#9bb0ff;box-shadow:0 0 0 3px rgba(49,93,251,.08)}.device-top{display:flex;align-items:center;gap:12px}.device-avatar{width:45px;height:45px;border-radius:14px;background:linear-gradient(145deg,#eef2ff,#e9fbf8);display:grid;place-items:center;font-weight:900;color:#2e52d6}.device-name{font-weight:850;font-size:14px}.device-meta{font-size:11px;color:var(--muted);margin-top:3px}.status{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800}.status:before{content:"";width:7px;height:7px;border-radius:50%;background:#a8b0bd}.status.online{color:var(--success)}.status.online:before{background:var(--success);box-shadow:0 0 0 4px rgba(18,166,106,.1)}.device-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}.mini-stat{background:var(--panel2);border-radius:11px;padding:10px}.mini-stat span{display:block;font-size:10px;color:var(--muted);margin-bottom:3px}.mini-stat b{font-size:13px}.progress{height:6px;background:#edf1f6;border-radius:999px;overflow:hidden;margin-top:13px}.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--brand2));border-radius:999px}
.detail{margin-top:20px;background:var(--panel);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 8px 26px rgba(17,35,73,.04)}.detail-head{padding:21px 22px 0}.detail-title{display:flex;align-items:center;justify-content:space-between;gap:16px}.detail-title h2{font-size:19px;margin:0}.detail-title p{color:var(--muted);font-size:12px;margin:4px 0 0}.detail-actions{display:flex;gap:8px}.tabs{display:flex;gap:5px;margin-top:19px;border-bottom:1px solid var(--line);overflow-x:auto}.tab{border:0;background:transparent;padding:12px 13px;color:#7b8798;font-size:12px;font-weight:800;border-bottom:2px solid transparent;white-space:nowrap}.tab.active{color:var(--brand);border-bottom-color:var(--brand)}.tab-panel{padding:20px 22px 24px}.detail-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.detail-kpi{background:var(--panel2);border:1px solid #edf0f5;border-radius:14px;padding:14px}.detail-kpi span{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;font-weight:800;letter-spacing:.6px}.detail-kpi b{display:block;font-size:20px;margin-top:6px}.two-col{display:grid;grid-template-columns:1.25fr .75fr;gap:15px;margin-top:16px}.panel{border:1px solid var(--line);border-radius:16px;padding:16px;background:white}.panel-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.panel-title h3{margin:0;font-size:13px}.panel-title span{font-size:10px;color:var(--muted)}.daily-chart{height:210px;display:flex;align-items:flex-end;gap:9px;border-bottom:1px solid var(--line);padding:14px 5px 24px;position:relative}.bar-group{height:100%;flex:1;display:flex;align-items:flex-end;justify-content:center;gap:3px;position:relative}.bar{width:min(13px,42%);min-height:2px;border-radius:6px 6px 2px 2px;background:#315dfb}.bar.idle{background:#dce3ee}.bar-label{position:absolute;bottom:-21px;font-size:9px;color:#8a95a7;white-space:nowrap}.rank-list{display:grid;gap:10px}.rank-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}.rank-name{font-size:12px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rank-time{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}.rank-track{grid-column:1/-1;height:5px;background:#f0f3f7;border-radius:99px;overflow:hidden}.rank-track i{display:block;height:100%;background:linear-gradient(90deg,#315dfb,#718eff);border-radius:99px}.heat{display:grid;grid-template-columns:repeat(12,1fr);gap:6px}.heat-cell{height:42px;border-radius:8px;background:#eff2f7;display:grid;place-items:center;font-size:9px;color:#758196;position:relative}.heat-cell i{position:absolute;inset:auto 0 0;height:var(--h);background:#315dfb;border-radius:0 0 8px 8px;opacity:calc(.18 + var(--o))}.heat-cell span{z-index:2}.empty{padding:36px;text-align:center;color:var(--muted);font-size:13px;border:1px dashed #d9e0e9;border-radius:14px;background:#fbfcfe}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:14px}.activity-table{width:100%;border-collapse:collapse;min-width:820px}.activity-table th{background:#f8fafc;color:#778297;text-transform:uppercase;font-size:9px;letter-spacing:.6px;text-align:left;padding:11px;border-bottom:1px solid var(--line)}.activity-table td{padding:11px;border-bottom:1px solid #eef1f5;font-size:11px;vertical-align:top}.activity-table tr:last-child td{border-bottom:0}.pill{display:inline-flex;border-radius:999px;padding:4px 7px;background:#eef2ff;color:#3659d6;font-size:9px;font-weight:850;text-transform:uppercase}.pill.idle{background:#fff4dd;color:#9a6713}.pill.web{background:#e9f9f5;color:#157b70}.muted{color:var(--muted)}.timeline-title{max-width:360px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.filters .input,.filters .select{height:36px;font-size:11px}.filters .input{max-width:270px}.shot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:13px}.shot{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#f7f9fc;cursor:zoom-in}.shot img{width:100%;height:145px;object-fit:cover;display:block;background:#e9edf4}.shot figcaption{padding:10px;background:white;font-size:10px;color:var(--muted);display:flex;justify-content:space-between}.lightbox{position:fixed;inset:0;background:rgba(4,11,26,.88);z-index:100;display:grid;place-items:center;padding:30px}.lightbox img{max-width:96vw;max-height:88vh;border-radius:12px;box-shadow:0 30px 100px rgba(0,0,0,.5)}.lightbox button{position:absolute;right:25px;top:20px;border:0;background:rgba(255,255,255,.12);color:white;width:42px;height:42px;border-radius:50%;font-size:21px}.loading{opacity:.55;pointer-events:none}.skeleton{height:120px;border-radius:15px;background:linear-gradient(90deg,#f0f2f5 25%,#f7f8fa 50%,#f0f2f5 75%);background-size:200% 100%;animation:shimmer 1.3s infinite}@keyframes shimmer{to{background-position:-200% 0}}.toast{position:fixed;right:24px;bottom:24px;background:#101828;color:white;padding:12px 15px;border-radius:12px;box-shadow:var(--shadow);font-size:12px;z-index:120;opacity:0;transform:translateY(8px);pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:none}
@media(max-width:1100px){.kpi-grid,.detail-kpis{grid-template-columns:repeat(2,1fr)}.two-col{grid-template-columns:1fr}.login-shell{grid-template-columns:1fr}.login-brand{display:none}.login-side{min-height:100vh}.heat{grid-template-columns:repeat(8,1fr)}}
@media(max-width:780px){.app-shell{display:block}.sidebar{transform:translateX(-100%)}.content{grid-column:auto}.topbar{padding:0 16px;height:auto;min-height:70px;gap:10px;flex-wrap:wrap}.dashboard{padding:18px 14px 35px}.kpi-grid{grid-template-columns:1fr 1fr}.toolbar .toolbar-btn span{display:none}.device-grid{grid-template-columns:1fr}.detail-kpis{grid-template-columns:1fr 1fr}.tab-panel{padding:16px}.detail-head{padding:16px 16px 0}.heat{grid-template-columns:repeat(6,1fr)}}
@media(max-width:480px){.kpi-grid,.detail-kpis{grid-template-columns:1fr}.login-side{padding:18px}.login-card{padding:27px 22px;border-radius:22px}.trust-list{grid-template-columns:1fr}.toolbar{width:100%;padding-bottom:10px}.select{flex:1}.page-title{padding-top:12px}}

/* OfficePulse V3 Premium additions */
.version-tag{display:block;font-size:8px;letter-spacing:1.4px;color:#92a3c2;margin-top:2px}.nav-count{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;display:inline-grid;place-items:center;background:#e04f5f;color:#fff;font-size:9px;font-weight:900}.nav-count.hidden{display:none}.v3-kpis{grid-template-columns:repeat(5,minmax(0,1fr))}.kpi-alert .kpi-icon{background:#fff0f2;color:#d84557}.health-mini{display:flex;gap:10px;justify-content:space-between;color:var(--muted);font-size:9px;margin-top:11px}.score-text.good{color:#13875f}.score-text.neutral{color:#8c6d24}.score-text.low{color:#c74755}.empty.compact{padding:20px}.page-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding:8px 2px 22px}.page-hero h2{font-size:24px;letter-spacing:-.7px;margin:5px 0}.page-hero p{max-width:750px;color:var(--muted);font-size:12px;line-height:1.65;margin:0}.eyebrow{font-size:9px;font-weight:900;letter-spacing:1.4px;color:var(--brand)}.hero-actions{display:flex;gap:8px;align-items:center}.toolbar-btn.primary,.mini-btn.primary{background:var(--brand);color:#fff;border-color:var(--brand)}.toolbar-btn:disabled{opacity:.45;cursor:not-allowed}.mix-list{display:grid;gap:14px}.mix-list>div{display:grid;grid-template-columns:1fr auto;gap:7px;font-size:11px}.mix-list span{font-weight:800}.mix-list b{color:var(--muted);font-size:10px}.mix-list i{grid-column:1/-1;height:7px;background:#eef2f7;border-radius:999px;overflow:hidden}.mix-list em{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--brand2));border-radius:999px}.info-list{display:grid}.info-list>div{display:flex;justify-content:space-between;gap:20px;padding:11px 0;border-bottom:1px solid #edf1f5;font-size:11px}.info-list>div:last-child{border-bottom:0}.info-list span{color:var(--muted)}.info-list b{text-align:right;max-width:65%;overflow-wrap:anywhere}.live-banner{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;border:1px solid #cfe4df;background:#f2fbf8;border-radius:16px;padding:17px;margin-bottom:16px}.live-banner b{font-size:13px}.live-banner p{font-size:11px;line-height:1.6;color:#57726d;margin:6px 0 0;max-width:850px}.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#16a36f;margin-right:8px;box-shadow:0 0 0 5px rgba(22,163,111,.1)}.live-actions{display:flex;gap:8px;flex-shrink:0}.live-status-row{display:flex;justify-content:space-between;align-items:center;margin:4px 0 14px;font-size:11px}.pill.live-pill{background:#e5fbf3;color:#117b56}.alert-list{display:grid;gap:12px}.alert-card{display:grid;grid-template-columns:auto 1fr auto;gap:13px;align-items:start;background:#fff;border:1px solid var(--line);border-left:4px solid #e0ad42;border-radius:15px;padding:15px}.alert-card.critical{border-left-color:#d84959}.alert-card.info{border-left-color:#4675e8}.alert-symbol{width:32px;height:32px;border-radius:10px;background:#fff5dc;color:#9a6713;display:grid;place-items:center;font-weight:950}.alert-card.critical .alert-symbol{background:#fff0f2;color:#c44251}.alert-card.info .alert-symbol{background:#eef3ff;color:#365fd2}.alert-title{display:flex;gap:10px;align-items:center}.alert-title b{font-size:13px}.alert-title span{font-size:8px;text-transform:uppercase;font-weight:900;color:var(--muted);letter-spacing:.7px}.alert-body p{font-size:11px;color:#596579;margin:6px 0}.alert-meta{font-size:9px;color:#8a95a7}.alert-actions{display:flex;gap:6px}.mini-btn,.icon-btn{border:1px solid var(--line);background:#fff;border-radius:9px;padding:7px 9px;font-size:10px;font-weight:800;color:#4b5870}.mini-btn:hover,.icon-btn:hover{background:#f8fafc}.rules-layout{grid-template-columns:.72fr 1.28fr}.rule-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}.rule-form label{font-size:10px;color:var(--muted);font-weight:800}.rule-form .select,.rule-form .input{display:block;width:100%;margin-top:5px;height:39px}.rule-form .toolbar-btn{grid-column:1/-1;justify-content:center}.rule-note{margin-top:15px;border-radius:11px;background:#f7f9fc;padding:11px;color:#6f7a8d;font-size:10px;line-height:1.6}.rule-list{display:grid}.rule-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid #edf1f5}.rule-row:last-child{border-bottom:0}.rule-row b{display:block;font-size:11px}.rule-row>div span{display:block;font-size:9px;color:var(--muted);margin-top:3px}.category{font-size:8px;font-weight:900;text-transform:uppercase;padding:5px 7px;border-radius:999px}.category.productive{background:#e8f9f2;color:#157655}.category.neutral{background:#f2f4f7;color:#667085}.category.unproductive{background:#fff0f2;color:#be4553}.icon-btn{width:28px;height:28px;padding:0;font-size:16px}.input{border:1px solid var(--line);background:white;border-radius:10px;padding:0 11px;color:#344054;outline:none}.input:focus,.select:focus{border-color:#9db1ff;box-shadow:0 0 0 3px rgba(49,93,251,.08)}
@media(max-width:1280px){.v3-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:900px){.v3-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.rules-layout{grid-template-columns:1fr}.page-hero,.live-banner{align-items:stretch;flex-direction:column}.hero-actions,.live-actions{flex-wrap:wrap}}@media(max-width:520px){.v3-kpis{grid-template-columns:1fr}.rule-form{grid-template-columns:1fr}.alert-card{grid-template-columns:auto 1fr}.alert-actions{grid-column:2}.live-actions .toolbar-btn{flex:1}}
.tiny-category{display:inline-flex;vertical-align:middle;margin-left:5px;font-size:7px;text-transform:uppercase;letter-spacing:.3px;border-radius:999px;padding:2px 5px;background:#f0f2f5;color:#667085}.tiny-category.productive{background:#e8f9f2;color:#157655}.tiny-category.unproductive{background:#fff0f2;color:#be4553}