:root{--bg:#0b0d10;--panel:#10151b;--text:#e8eef5;--muted:#98a2b3;--border:#263041;--accent:#4da3ff;--good:#34d399;--bad:#fb7185;--warn:#fbbf24;}
@media (prefers-color-scheme: light){:root{--bg:#f6f7fb;--panel:#ffffff;--text:#101828;--muted:#667085;--border:#e4e7ec;--accent:#2563eb;}}
*{box-sizing:border-box}
body{margin:0;font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; background:var(--bg); color:var(--text);}
a{color:inherit; text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:980px; padding:16px; margin:0 auto;}
.topbar{position:sticky; top:0; z-index:5; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--border); background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px);}
.brand{font-weight:700; letter-spacing:.2px; font-size:16px;}
.actions{display:flex; gap:8px; align-items:center}
.btn{border:1px solid var(--border); background:transparent; color:var(--text); padding:8px 10px; border-radius:10px; cursor:pointer}
.btn:hover{border-color:color-mix(in srgb, var(--border) 50%, var(--accent))}
.btn--primary{background:var(--accent); border-color:var(--accent); color:white}
.grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:12px 0 18px;}
@media (min-width:720px){.grid{grid-template-columns:repeat(5,1fr);}}
.card{border:1px solid var(--border); background:var(--panel); border-radius:14px; padding:12px;}
.card__kpi{font-size:22px; font-weight:800; margin-top:6px}
.muted{color:var(--muted)}
.panel{border:1px solid var(--border); background:var(--panel); border-radius:14px; margin:14px 0; overflow:hidden}
.panel__head{padding:12px 12px 10px; border-bottom:1px solid var(--border); display:flex; flex-direction:column; gap:8px}
.panel__head h2{margin:0; font-size:15px}
.filters{display:flex; gap:8px; flex-wrap:wrap}
select,input[type=search],input[type=password]{border:1px solid var(--border); background:transparent; color:var(--text); padding:8px 10px; border-radius:10px; outline:none}
input[type=search]{flex:1; min-width:200px}
.list{display:flex; flex-direction:column}
.item{padding:12px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:6px}
.item:first-child{border-top:none}
.item__top{display:flex; justify-content:space-between; gap:10px; align-items:flex-start}
.item__title{font-weight:650}
.tag{display:inline-block; padding:2px 8px; border:1px solid var(--border); border-radius:999px; font-size:12px; color:var(--muted)}
.row{display:flex; gap:8px; align-items:center}
.kpis{display:flex; gap:10px; flex-wrap:wrap}
.kpi{font-size:12px; color:var(--muted)}
.kpi strong{color:var(--text)}
.delta--down{color:var(--good); font-weight:700}
.delta--up{color:var(--bad); font-weight:700}
.error{margin-top:10px; color:var(--bad)}
.footer{padding:18px 0 30px}

/* locked curtain */
.pin-locked body{overflow:hidden}
.pin-locked .topbar,
.pin-locked main{visibility:hidden}

/* modal */
.modal{position:fixed; inset:0; background:color-mix(in srgb, black 65%, transparent); display:none; align-items:center; justify-content:center; padding:18px; z-index:50}
.modal[aria-hidden=false]{display:flex}
/* Show the modal immediately when locked, even before JS runs */
.pin-locked #pinModal{display:flex}
.modal__card{width:min(440px, 100%); border:1px solid var(--border); background:var(--panel); border-radius:16px; padding:16px}
.modal__card h1{margin:0 0 8px 0; font-size:18px}