:root{--bg:#f4f4f1;--paper:#fff;--ink:#111;--muted:#6b6b6b;--line:#ddddda;--dark:#0b0b0b;--soft:#f8f8f5}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,Arial,Helvetica,sans-serif}button,input{font:inherit}a{text-decoration:none;color:inherit}img{display:block;max-width:100%}
.demo-loader{position:fixed;inset:0;display:grid;place-items:center;background:#0b0b0b;z-index:200;transition:.45s ease}.demo-loader.hidden{opacity:0;visibility:hidden}.demo-loader div{display:grid;justify-items:center;gap:12px;color:#fff}.demo-loader img{width:76px;filter:invert(1)}.demo-loader span{letter-spacing:.35em;font-size:14px;font-weight:700}.demo-loader small{letter-spacing:.18em;color:#b9b9b9}
.demo-app{display:grid;grid-template-columns:248px 1fr;min-height:100vh}.demo-side{background:#0b0b0b;color:#fff;display:flex;flex-direction:column;border-right:1px solid #222}.demo-brand{display:flex;gap:12px;align-items:center;padding:24px 20px;border-bottom:1px solid #242424}.demo-brand img{width:34px;filter:invert(1)}.demo-brand b{font-size:11px;letter-spacing:.18em}.demo-brand small{font-size:9px;color:#7f7f7f;letter-spacing:.14em}.demo-side nav{display:grid;gap:4px;padding:16px 10px}.demo-side nav button{border:0;background:transparent;color:#9b9b9b;padding:11px 12px;text-align:left;font-size:12px;cursor:pointer}.demo-side nav button.active,.demo-side nav button:hover{background:#171717;color:#fff}.side-bottom{margin-top:auto;padding:16px;border-top:1px solid #242424;display:grid;gap:12px}.mode-chip{border:1px solid #333;padding:10px 12px;font-size:10px;letter-spacing:.14em;color:#c7c7c7}.side-bottom a{font-size:12px;color:#9b9b9b}
.demo-head{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:26px 30px;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(244,244,241,.92);backdrop-filter:blur(12px);z-index:10}.demo-head small{display:block;font-size:10px;letter-spacing:.18em;color:#8a8a8a;font-weight:700}.demo-head h1{margin:6px 0 0;font-size:30px;letter-spacing:-.05em}.demo-head-actions{display:flex;gap:10px;align-items:center}.search-box{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);padding:10px 12px;min-width:280px}.search-box input{border:0;outline:0;background:transparent;width:100%}.demo-head-actions button{border:1px solid var(--line);background:#fff;padding:10px 12px}.demo-head-actions .primary{background:#111;color:#fff;border-color:#111}
.demo-content{padding:24px 30px 42px}.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:12px}.kpi{background:#fff;border:1px solid var(--line);padding:18px;border-radius:10px;cursor:pointer;transition:.2s ease}.kpi:hover{transform:translateY(-2px)}.kpi small{display:block;font-size:10px;color:#7a7a7a}.kpi b{display:block;font-size:28px;letter-spacing:-.04em;margin:8px 0}.kpi span{font-size:11px;color:#377f53}.grid-2{display:grid;grid-template-columns:1.15fr .85fr;gap:12px}.panel{background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px}.panel header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.panel header b{font-size:16px;letter-spacing:-.03em}.panel header button{border:0;background:none;color:#666;font-size:11px;cursor:pointer}.bars{display:flex;align-items:end;gap:10px;height:220px;padding:10px 2px}.barwrap{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1}.barstack{display:flex;align-items:end;gap:4px;height:170px}.bar{width:12px;border-radius:999px;background:#111;animation:grow .65s ease}.bar.alt{background:#888}.bar.soft{background:#cfcfc9}.barwrap small{font-size:10px;color:#888}@keyframes grow{from{transform:scaleY(.15);transform-origin:bottom;opacity:.3}to{transform:scaleY(1);opacity:1}}
.list{display:grid;gap:8px}.row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid #ecece7}.row:last-child{border-bottom:0}.dot{width:10px;height:10px;border-radius:50%;background:#111}.row b{display:block;font-size:12px}.row span{display:block;font-size:10px;color:#7e7e7e}.row button{border:1px solid var(--line);background:#fff;padding:7px 9px;font-size:10px}
.detail-shell{display:grid;grid-template-columns:1fr 330px;gap:12px;margin-top:12px}.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.tabs button{border:1px solid var(--line);background:#fff;padding:8px 10px;font-size:11px}.tabs button.active{background:#111;color:#fff;border-color:#111}.detail-body,.timeline{background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px}.specs{display:grid;grid-template-columns:1fr 1fr;gap:12px}.specs div{background:#fafaf7;border:1px solid #ecece7;border-radius:8px;padding:12px}.specs small,.timeline li small{display:block;font-size:10px;color:#7b7b7b;margin-bottom:6px}.specs b{font-size:13px}.timeline ol{list-style:none;padding:0;margin:0;display:grid;gap:10px}.timeline li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start}.timeline i{width:11px;height:11px;border-radius:50%;background:#111;margin-top:4px}.timeline li.off i{background:#d0d0ca}.timeline li b{display:block;font-size:12px;margin-bottom:4px}.quick-actions{display:grid;gap:8px;margin-top:16px}.quick-actions button,.table button,.doc-grid button{border:1px solid var(--line);background:#fff;padding:9px 10px;font-size:11px;text-align:left}.quick-actions button:first-child{background:#111;color:#fff;border-color:#111}
.table{display:grid}.table .trow{display:grid;grid-template-columns:1fr auto auto auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid #ecece7}.table .trow:last-child{border-bottom:0}.table b{font-size:12px}.table span{font-size:10px;color:#7d7d7d}.table strong{font-size:11px;font-weight:600}.doc-grid{display:grid;gap:8px}.doc-grid button{padding:12px}.history{display:grid;gap:8px}.history article{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:10px 0;border-bottom:1px solid #ecece7}.history article:last-child{border-bottom:0}.history i{width:9px;height:9px;border-radius:50%;background:#111;margin-top:4px}.history span{font-size:10px;color:#7d7d7d}
.simple-table{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}.simple-table .head,.simple-table .line{display:grid;grid-template-columns:1.2fr .9fr .8fr .8fr auto;gap:10px;padding:13px 14px;align-items:center}.simple-table .head{background:#fafaf7;font-size:10px;letter-spacing:.12em;color:#7e7e7e;font-weight:700}.simple-table .line{border-top:1px solid #ecece7}.simple-table .line b{font-size:12px}.simple-table .line span{font-size:10px;color:#777}.simple-table .line button{border:1px solid var(--line);background:#fff;padding:7px 9px;font-size:10px}
.ui-toast{position:fixed;right:20px;bottom:20px;background:#111;color:#fff;padding:11px 14px;border-radius:8px;font-size:11px;opacity:0;transform:translateY(8px);transition:.25s ease;pointer-events:none}.ui-toast.show{opacity:1;transform:none}.ui-modal{position:fixed;inset:0;background:rgba(0,0,0,.35);display:none;align-items:center;justify-content:center;padding:20px}.ui-modal.open{display:flex}.ui-card{width:min(720px,95%);max-height:86vh;overflow:auto;background:#fff;border-radius:10px;border:1px solid #d8d8d3}.ui-card header{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid #ecece7}.ui-card header button{border:0;background:none;font-size:24px;cursor:pointer}.ui-card #uiModalBody{padding:16px}.modal-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.modal-kpis article{border:1px solid #e4e4df;padding:12px;border-radius:8px}.modal-kpis small{display:block;font-size:10px;color:#888}.modal-kpis b{display:block;font-size:22px;margin-top:6px}.preview-doc{border:1px solid #e7e7e3;background:#fafaf8;padding:22px;min-height:260px}.preview-doc .logo{letter-spacing:.22em;font-weight:700}.security-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.security-grid article{background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px}
@media(max-width:980px){.demo-app{grid-template-columns:1fr}.demo-side{height:auto}.demo-head,.detail-shell,.grid-2,.security-grid,.kpis{grid-template-columns:1fr}.demo-head{display:grid}.demo-head-actions{flex-wrap:wrap}.search-box{min-width:0}.specs{grid-template-columns:1fr}}

/* --- v1.8 premium dark demo overrides --- */
body{background:#0a121a;color:#eaf1f7}.demo-app{grid-template-columns:250px 1fr;background:#081018}.demo-side{background:linear-gradient(180deg,#071019,#0b141d);border-right:1px solid rgba(255,255,255,.06)}.demo-brand{border-bottom-color:rgba(255,255,255,.06)}.demo-brand small{color:#7e90a4}.demo-side nav button{color:#95a8bc;border-radius:10px}.demo-side nav button.active,.demo-side nav button:hover{background:rgba(255,255,255,.06)}.mode-chip{border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.03)}.side-bottom a{color:#a6bbd0}.demo-main{background:linear-gradient(180deg,#0a121a,#101a24)}.demo-head{background:rgba(10,18,26,.84);border-bottom:1px solid rgba(255,255,255,.06)}.demo-head small{color:#8ea1b5}.demo-head h1{color:#fff}.search-box{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}.search-box input{color:#f2f6fb}.search-box input::placeholder{color:#8295aa}.demo-head-actions button{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08);color:#dce7f2}.demo-head-actions .primary{background:#fff;color:#111;border-color:#fff}.demo-content{padding:26px 30px 42px}.kpi,.panel,.detail-body,.timeline,.simple-table,.security-grid article{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.03));border-color:rgba(122,147,175,.24);box-shadow:none}.kpi small,.panel header button,.timeline li small,.simple-table .head,.simple-table .line span,.row span{color:#8ea1b5}.kpi b,.panel header b,.row b,.simple-table .line b{color:#fff}.kpi span{color:#6be3bf}.bar{background:#74c0ff}.bar.alt{background:#4f78a4}.bar.soft{background:#243b57}.barwrap small{color:#89a0b6}.row{border-bottom-color:rgba(255,255,255,.07)}.row button,.table button,.doc-grid button,.quick-actions button,.simple-table .line button{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08);color:#eaf1f7}.dot,.timeline i,.history i{background:#74c0ff}.tabs button{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.08);color:#9db1c5}.tabs button.active,.quick-actions button:first-child{background:#fff;color:#111;border-color:#fff}.specs div{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.06)}.specs small{color:#91a4b8}.specs b{color:#fff}.timeline li.off i{background:#4c6177}.table .trow,.history article,.simple-table .line{border-top-color:rgba(255,255,255,.06);border-bottom-color:rgba(255,255,255,.06)}.simple-table .head{background:rgba(255,255,255,.03)}.ui-card{background:#0f1822;border-color:rgba(255,255,255,.08);color:#eaf1f7}.ui-card header{border-bottom-color:rgba(255,255,255,.06)}.ui-card header button{color:#fff}.preview-doc{background:#121d28;border-color:rgba(255,255,255,.08);color:#eaf1f7}.preview-doc .logo{color:#fff}.modal-kpis article{border-color:rgba(255,255,255,.08);background:rgba(255,255,255,.03)}.modal-kpis small{color:#8ea1b5}.modal-kpis b{color:#fff}.ui-toast{background:#fff;color:#111}
@media(max-width:980px){.demo-app{grid-template-columns:1fr}}