:root{--navy:#1e293b;--navy-hover:#334155;--blue:#2563eb;--teal:#0d9488;--bg:#f5f7fa;--surface:#fff;--surface-2:#f8fafc;--text:#172033;--muted:#667085;--border:#e4e9f0;--active:#16a34a;--idle:#f59e0b;--meeting:#6d5bd0;--offline:#667085;--logged:#c65d5d;--shadow:0 8px 24px rgba(15,23,42,.06);--radius:12px}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:var(--bg)}
body{margin:0;min-width:320px;font-size:14px;line-height:1.45}
button,input,select{font:inherit}
button,a,input,select{outline-offset:3px}
:focus-visible{outline:3px solid rgba(37,99,235,.24)}
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
.rail{position:fixed;z-index:30;inset:0 auto 0 0;width:252px;background:var(--navy);padding:23px 16px;color:#fff;display:flex;flex-direction:column}
.brand{display:flex;gap:13px;align-items:center;padding:2px 8px 24px}
.brand .mark{width:42px;height:42px;flex:0 0 42px;border-radius:11px;background:var(--blue);display:grid;place-items:center;font-size:18px;font-weight:750;box-shadow:inset 0 0 0 1px #ffffff24}
.brand .mark img{width:100%;height:100%;display:block;object-fit:contain;border-radius:11px}
.brand strong{display:block;color:#f8fafc;font-size:15px;letter-spacing:.01em}
.brand small{display:block;color:#cbd5e1;font-size:10px;line-height:1.35;margin-top:3px}
.rail nav{display:grid;gap:4px}
.rail nav button{display:flex;align-items:center;gap:11px;width:100%;border:0;background:transparent;color:#cbd5e1;padding:10px 11px;text-align:left;border-radius:8px;cursor:pointer;font-size:13px;font-weight:540}
.rail nav button svg{width:18px;height:18px;flex:0 0 18px;color:#94a3b8;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rail nav button:hover{background:var(--navy-hover);color:#f8fafc}
.rail nav button:hover svg{color:#e2e8f0}
.rail nav button.active{background:#334155;color:#f8fafc;box-shadow:inset 3px 0 var(--blue)}
.rail nav button.active svg{color:#93c5fd}
.rail-foot{margin-top:auto;padding:15px 9px 3px;border-top:1px solid #ffffff12;color:#cbd5e1;font-size:10px;display:flex;align-items:center;gap:7px}
.secure-dot{width:7px;height:7px;border-radius:50%;background:#42c888}
main{margin-left:252px;min-height:100vh;padding:24px 28px 40px}
.app-header{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-bottom:22px}
.eyebrow{font-size:10px;font-weight:760;letter-spacing:.13em;color:var(--blue);margin:0 0 3px}
.app-header h1{font-size:25px;line-height:1.2;margin:0;font-weight:690;letter-spacing:-.025em}
.header-actions{display:flex;align-items:center;gap:9px}
.date-control{display:grid;gap:2px}
.date-control label{font-size:10px;color:var(--muted);font-weight:650}
.date-control input,.toolbar input,.toolbar select,.screenshot-controls select{height:38px;border:1px solid #d7dee8;background:#fff;border-radius:8px;padding:0 11px;color:var(--text)}
.mode-badge{border-radius:999px;padding:5px 9px;font-size:10px;font-weight:750;letter-spacing:.04em;background:#e9f7f4;color:#08736f}
.mode-badge.historical{background:#eef1f5;color:#596579}
.icon-button,.quiet-button{height:38px;border:1px solid #d7dee8;background:#fff;border-radius:8px;color:var(--text);cursor:pointer}
.icon-button{width:38px;font-size:18px}
.quiet-button{padding:0 12px}
.account{padding-left:10px;border-left:1px solid var(--border);line-height:1.2}
.account span,.account small{display:block}
.account span{font-size:12px;font-weight:650;max-width:150px;overflow:hidden;text-overflow:ellipsis}
.account small{font-size:9px;color:var(--muted);margin-top:3px;font-weight:750}
.toolbar{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.search-box{position:relative}
.search-box span{position:absolute;left:11px;top:8px;color:var(--muted)}
.toolbar .search-box input{padding-left:31px;width:300px}
.panel,.metric,.analytics-card,.empty-state{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.panel{overflow:hidden}
.panel-title{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:17px 18px;border-bottom:1px solid var(--border)}
.panel-title h2,.section-title{font-size:15px;margin:0;font-weight:680}
.panel-title p,.section-subtitle{font-size:11px;color:var(--muted);margin:3px 0 0}
.table-wrap{overflow:auto}
table{border-collapse:separate;border-spacing:0;width:100%}
th,td{text-align:left;padding:11px 13px;border-bottom:1px solid var(--border);white-space:nowrap}
th{position:sticky;top:0;z-index:1;background:#f8fafc;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.055em;font-weight:720}
tbody tr:last-child td{border-bottom:0}
tbody tr.clickable{cursor:pointer}
tbody tr.clickable:hover{background:#f5f9fd}
.person strong,.person small{display:block}
.person strong{font-size:13px;font-weight:650}
.person small{color:var(--muted);font-size:10px;margin-top:2px}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;font-size:10px;font-weight:760;letter-spacing:.02em}
.badge:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge.ACTIVE{color:var(--active);background:#eaf7ee}
.badge.IDLE{color:#b76c05;background:#fff5df}
.badge.MEETING{color:var(--meeting);background:#f0edfc}
.badge.OFFLINE{color:var(--offline);background:#eff1f4}
.badge.LOGGED{color:var(--logged);background:#faeded}
.progress{height:6px;border-radius:999px;background:#edf1f5;overflow:hidden}
.progress i{display:block;height:100%;border-radius:inherit;background:var(--blue)}
.error-state{display:grid;justify-items:start;gap:6px;padding:20px;border:1px solid #efcaca;background:#fff8f8;border-radius:var(--radius);color:#882f2f}
.error-state span{font-size:12px}
.error-state button{border:0;border-radius:7px;background:#9f3434;color:white;padding:8px 12px}
.context-skeleton{display:grid;gap:16px}
.skeleton-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:11px}
.skeleton-kpis i,.skeleton-table i{display:block;border-radius:9px;background:linear-gradient(90deg,#e7ebf1 25%,#f7f9fb 45%,#e7ebf1 65%);background-size:300% 100%;animation:pulse 1.3s infinite}
.skeleton-kpis i{height:82px}
.skeleton-table{padding:16px;background:#fff;border:1px solid var(--border);border-radius:var(--radius);display:grid;gap:10px}
.skeleton-table i{height:35px}
@keyframes pulse{to{background-position:-100% 0}
}
@media(max-width:1040px){.rail{width:218px}
.brand small{display:none}
main{margin-left:218px;padding:20px}
.account{display:none}
.header-actions{gap:6px}
}
@media(max-width:780px){.rail{position:static;width:100%;height:auto;padding:12px}
.brand{padding:0 4px 10px}
.rail nav{display:flex;overflow:auto}
.rail nav button{white-space:nowrap;width:auto}
.rail-foot{display:none}
main{margin-left:0;padding:16px}
.app-header{align-items:flex-start;flex-direction:column}
.header-actions{width:100%;flex-wrap:wrap}
.date-control{flex:1}
.date-control input{width:100%}
.toolbar{align-items:stretch;flex-direction:column}
.toolbar .search-box input{width:100%}
.search-box{width:100%}
.skeleton-kpis{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){main{padding:12px}
.app-header h1{font-size:21px}
.mode-badge{display:none}
.quiet-button{margin-left:auto}
.skeleton-kpis{grid-template-columns:1fr 1fr}
th,td{padding:10px}
}