*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#07090f;--bg2:#0b1120;--bg3:#101828;--bg4:#141e30;
  --border:rgba(255,255,255,0.07);--border-s:rgba(255,255,255,0.12);
  --cyan:#38bdf8;--cyan-d:rgba(56,189,248,0.12);
  --green:#34d399;--green-d:rgba(52,211,153,0.12);
  --amber:#fbbf24;--amber-d:rgba(251,191,36,0.12);
  --red:#f87171;--red-d:rgba(248,113,113,0.12);
  --purple:#a78bfa;--purple-d:rgba(167,139,250,0.12);
  --text:#e2e8f0;--text2:#94a3b8;--text3:#475569;
  --mono:'IBM Plex Mono',monospace;--sans:'IBM Plex Sans',sans-serif;
  --r:10px;--rs:6px
}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:14px;line-height:1.5;min-height:100vh}
#config-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background-image:radial-gradient(ellipse at 25% 25%,rgba(56,189,248,0.07) 0%,transparent 55%),
                   radial-gradient(ellipse at 75% 75%,rgba(167,139,250,0.05) 0%,transparent 55%)}
.cfg-box{width:500px;background:var(--bg2);border:1px solid var(--border-s);border-radius:16px;padding:48px 40px;position:relative;overflow:hidden}
.cfg-box::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--cyan) 40%,var(--purple) 60%,transparent)}
.cfg-logo{display:flex;align-items:center;gap:12px;margin-bottom:32px}
.cfg-icon{width:44px;height:44px;background:var(--cyan-d);border:1px solid rgba(56,189,248,0.25);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px}
.cfg-brand{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--cyan);letter-spacing:.06em}
.cfg-sub{font-size:11px;color:var(--text3);margin-top:3px}
.cfg-title{font-size:22px;font-weight:600;margin-bottom:6px}
.cfg-desc{font-size:13px;color:var(--text2);margin-bottom:32px;line-height:1.65}
.field{margin-bottom:18px}
.field label{display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text3);margin-bottom:8px}
.field input{width:100%;background:var(--bg3);border:1px solid var(--border-s);border-radius:var(--rs);padding:11px 14px;color:var(--text);font-family:var(--mono);font-size:13px;outline:none;transition:border-color .2s,box-shadow .2s}
.field input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(56,189,248,.1)}
.field input::placeholder{color:var(--text3)}
.btn-primary{width:100%;background:var(--cyan);color:#000;border:none;border-radius:var(--rs);padding:13px;font-family:var(--sans);font-size:14px;font-weight:600;cursor:pointer;margin-top:6px;transition:opacity .2s,transform .1s}
.btn-primary:hover{opacity:.88;transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0)}
.btn-primary:disabled{opacity:.45;cursor:not-allowed;transform:none}
.perms-note{margin-top:24px;padding:16px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--rs);font-size:12px;color:var(--text3);line-height:1.8}
.perms-note strong{display:block;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text2);margin-bottom:8px}
.ptag{display:inline-block;background:var(--bg4);border:1px solid var(--border-s);border-radius:4px;padding:1px 7px;font-family:var(--mono);font-size:10px;color:var(--cyan);margin:2px}
.cfg-warn{margin-top:12px;padding:12px 14px;background:var(--amber-d);border:1px solid rgba(251,191,36,.25);border-radius:var(--rs);color:var(--amber);font-size:12px;line-height:1.65}
#app{display:none;height:100vh;overflow:hidden}
.sidebar{position:fixed;top:0;left:0;width:224px;height:100vh;background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;z-index:10}
.sb-header{padding:20px 18px 16px;border-bottom:1px solid var(--border)}
.sb-brand{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--cyan);letter-spacing:.07em;text-transform:uppercase}
.sb-tenant{font-size:11px;color:var(--text3);margin-top:4px;font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-nav{flex:1;padding:10px;overflow-y:auto}
.nav-sec{font-size:9px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--text3);padding:10px 8px 5px}
.nav-item{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:var(--rs);cursor:pointer;color:var(--text2);font-size:13px;transition:all .14s;user-select:none}
.nav-item:hover{background:var(--bg3);color:var(--text)}
.nav-item.active{background:var(--cyan-d);color:var(--cyan);font-weight:500}
.nav-item .ni{font-size:15px;width:20px;text-align:center;flex-shrink:0}
.nbadge{margin-left:auto;font-size:9px;font-weight:700;padding:2px 6px;border-radius:10px;font-family:var(--mono);min-width:20px;text-align:center}
.nbadge.red{background:var(--red);color:#fff}
.nbadge.warn{background:var(--amber);color:#000}
.nbadge.ok{background:var(--green);color:#000}
.nbadge.neu{background:var(--bg4);color:var(--text3)}
.sb-footer{padding:14px;border-top:1px solid var(--border)}
.user-chip{display:flex;align-items:center;gap:9px}
.u-av{width:32px;height:32px;background:var(--purple-d);border:1px solid rgba(167,139,250,.3);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--purple);flex-shrink:0}
.u-info{flex:1;overflow:hidden}
.u-name{font-size:12px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u-role{font-size:10px;color:var(--text3)}
.btn-so{background:none;border:none;color:var(--text3);cursor:pointer;font-size:15px;padding:4px;border-radius:4px;transition:color .14s}
.btn-so:hover{color:var(--red)}
/* #app is display:flex, so .main needs flex:1 — without it the area shrinks to its content width and sections look narrow. */
.main{flex:1;min-width:0;margin-left:224px;height:100vh;overflow-y:auto}
.topbar{position:sticky;top:0;background:rgba(7,9,15,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:13px 26px;display:flex;align-items:center;gap:14px;z-index:5}
.topbar-title{font-size:15px;font-weight:600;flex:1}
.topbar-meta{font-size:11px;color:var(--text3);display:flex;align-items:center;gap:10px}
.btn-rf{background:var(--bg3);border:1px solid var(--border-s);border-radius:var(--rs);padding:7px 13px;color:var(--text2);font-size:12px;cursor:pointer;font-family:var(--sans);transition:all .14s}
.btn-rf:hover{background:var(--bg4);color:var(--text)}
.content{padding:26px}
.section{display:none}
.section.active{display:block}
/* Sub-section navigation (sidebar children + sub-views) */
.nav-sub{display:none;margin:1px 0 3px}
.nav-sub.open{display:block}
.nav-subitem{display:flex;align-items:center;gap:8px;padding:6px 10px 6px 28px;border-radius:var(--rs);cursor:pointer;color:var(--text3);font-size:12px;transition:all .14s;user-select:none}
.nav-subitem:hover{background:var(--bg3);color:var(--text2)}
.nav-subitem.active{background:var(--cyan-d);color:var(--cyan);font-weight:500}
.nav-subitem .nsi{font-size:11px;width:15px;text-align:center;flex-shrink:0}
.nav-item.has-sub .chev{margin-left:6px;font-size:9px;color:var(--text3);transition:transform .15s;flex-shrink:0}
.nav-item.has-sub.expanded .chev{transform:rotate(90deg)}
.subview{display:none}
.subview.active{display:block}
.mc.clickable{cursor:pointer}
.mc.clickable:hover{border-color:var(--cyan)}
.mgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:22px}
.mc{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:20px;position:relative;overflow:hidden;transition:border-color .2s}
.mc.c{border-color:rgba(248,113,113,.3);background:linear-gradient(135deg,var(--bg2),rgba(248,113,113,.04))}
.mc.w{border-color:rgba(251,191,36,.3);background:linear-gradient(135deg,var(--bg2),rgba(251,191,36,.04))}
.mc.g{border-color:rgba(52,211,153,.3);background:linear-gradient(135deg,var(--bg2),rgba(52,211,153,.04))}
.mc.i{border-color:rgba(56,189,248,.3);background:linear-gradient(135deg,var(--bg2),rgba(56,189,248,.04))}
.mc-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--text3);margin-bottom:12px}
.mc-val{font-family:var(--mono);font-size:32px;font-weight:600;line-height:1;margin-bottom:7px}
.mc-val.c{color:var(--red)}.mc-val.w{color:var(--amber)}.mc-val.g{color:var(--green)}.mc-val.i{color:var(--cyan)}
.mc-sub{font-size:11px;color:var(--text3);line-height:1.4}
.mc-ico{position:absolute;top:16px;right:14px;font-size:20px;opacity:.25}
.panel{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);margin-bottom:18px;overflow:hidden}
.ph{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.ph-title{font-size:13px;font-weight:600;flex:1}
.ph-sub{font-size:11px;color:var(--text3)}
.dt{width:100%;border-collapse:collapse}
.dt th{padding:9px 14px;text-align:left;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);border-bottom:1px solid var(--border);background:var(--bg3)}
.dt td{padding:11px 14px;font-size:12px;color:var(--text2);border-bottom:1px solid var(--border);vertical-align:middle}
.dt tr:last-child td{border-bottom:none}
.dt tr:hover td{background:rgba(255,255,255,.02)}
.dt td.p{color:var(--text);font-weight:500}
.dt td code{font-family:var(--mono);font-size:10px;color:var(--cyan)}
.b{display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:600;font-family:var(--mono);white-space:nowrap}
.br{background:var(--red-d);color:var(--red);border:1px solid rgba(248,113,113,.2)}
.bw{background:var(--amber-d);color:var(--amber);border:1px solid rgba(251,191,36,.2)}
.bg{background:var(--green-d);color:var(--green);border:1px solid rgba(52,211,153,.2)}
.bc{background:var(--cyan-d);color:var(--cyan);border:1px solid rgba(56,189,248,.2)}
.bgr{background:rgba(255,255,255,.04);color:var(--text3);border:1px solid var(--border)}
.bp{background:var(--purple-d);color:var(--purple);border:1px solid rgba(167,139,250,.2)}
.rem{margin:0 16px 16px;padding:16px;background:rgba(56,189,248,.05);border:1px solid rgba(56,189,248,.14);border-radius:var(--rs);font-size:12px;color:var(--text2);line-height:1.75}
.rem-title{font-size:10px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--cyan);margin-bottom:10px}
.rem ol{padding-left:18px;margin-top:6px}.rem li{margin-bottom:5px}
.rem code{font-family:var(--mono);font-size:10px;background:var(--bg3);padding:1px 5px;border-radius:3px;color:var(--cyan)}
.rem strong{color:var(--text);font-weight:600}
.score-wrap{display:grid;grid-template-columns:240px 1fr;gap:22px;padding:22px}
.score-donut-c{position:relative;width:180px;height:180px;margin:0 auto 12px}
.score-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none}
.score-n{font-family:var(--mono);font-size:36px;font-weight:600;line-height:1}
.score-m{font-size:12px;color:var(--text3);font-family:var(--mono)}
.score-lbl{font-size:11px;color:var(--text3);text-align:center}
.scat{background:var(--bg3);border:1px solid var(--border);border-radius:var(--rs);padding:11px 14px;margin-bottom:8px}
.scat-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}
.scat-n{font-size:12px;font-weight:500;color:var(--text)}
.scat-v{font-family:var(--mono);font-size:11px;color:var(--text2)}
.pbar{height:3px;background:var(--bg4);border-radius:2px;overflow:hidden}
.pfill{height:100%;border-radius:2px;transition:width .8s ease}
.act{padding:13px 18px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;gap:12px;cursor:pointer;transition:background .14s}
.act:last-child{border-bottom:none}
.act:hover{background:var(--bg3)}
.act-n{font-family:var(--mono);font-size:10px;color:var(--text3);width:22px;flex-shrink:0;padding-top:2px}
.act-t{font-size:12px;font-weight:500;color:var(--text);margin-bottom:3px}
.act-d{font-size:11px;color:var(--text3)}
.act-s{font-family:var(--mono);font-size:11px;color:var(--green);flex-shrink:0;padding-top:2px}
.ld{display:flex;align-items:center;justify-content:center;padding:55px;color:var(--text3);font-size:13px;gap:12px;flex-direction:column}
.sp{width:30px;height:30px;border:2px solid var(--border-s);border-top-color:var(--cyan);border-radius:50%;animation:spin .75s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.es{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:55px;color:var(--text3);font-size:13px;gap:10px}
.esi{font-size:32px;opacity:.4}
.errbox{padding:14px 18px;background:var(--red-d);border:1px solid rgba(248,113,113,.2);border-radius:var(--rs);color:var(--red);font-size:13px;margin:14px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:3px}

/* ── MULTI-TENANT ────────────────────────────────────────────────────────── */
.tenant-card{background:var(--bg3);border:1px solid var(--border-s);border-radius:var(--r);padding:14px 16px;display:flex;align-items:center;gap:14px;margin-bottom:10px;transition:border-color .2s,background .2s;cursor:default}
.tenant-card:hover{border-color:var(--border-s);background:var(--bg4)}
.tenant-av{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0;color:#000}
.tenant-info{flex:1;overflow:hidden}
.tenant-name{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tenant-id{font-size:10px;color:var(--text3);font-family:var(--mono);margin-top:2px}
.tenant-actions{display:flex;gap:8px;align-items:center;flex-shrink:0}
.btn-tenant-connect{background:var(--cyan);color:#000;border:none;border-radius:var(--rs);padding:7px 14px;font-size:12px;font-weight:600;cursor:pointer;transition:opacity .15s}
.btn-tenant-connect:hover{opacity:.85}
.btn-tenant-connect:disabled{opacity:.45;cursor:not-allowed}
.btn-tenant-del{background:none;border:none;color:var(--text3);cursor:pointer;font-size:14px;padding:4px;border-radius:4px;transition:color .15s;line-height:1}
.btn-tenant-del:hover{color:var(--red)}
.add-tenant-toggle{text-align:center;margin:14px 0 4px;font-size:13px;color:var(--cyan);cursor:pointer;user-select:none}
.add-tenant-toggle:hover{opacity:.8}
.cfg-section-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:16px}

/* Sidebar switcher */
.sb-header{padding:16px 18px 14px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s;user-select:none}
.sb-header:hover{background:var(--bg3)}
.sb-header-row{display:flex;align-items:center;justify-content:space-between}
.sb-switcher{overflow:hidden;border-bottom:1px solid var(--border);background:var(--bg3)}
.sb-sw-item{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;transition:background .14s}
.sb-sw-item:hover{background:var(--bg4)}
.sb-sw-item.active-t{background:var(--cyan-d)}
.sb-sw-av{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;color:#000}
.sb-sw-info{flex:1;overflow:hidden}
.sb-sw-name{font-size:12px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-sw-tid{font-size:10px;color:var(--text3);font-family:var(--mono)}
.sb-sw-del{background:none;border:none;color:var(--text3);cursor:pointer;font-size:12px;padding:3px;border-radius:3px;opacity:0;transition:opacity .14s,color .14s}
.sb-sw-item:hover .sb-sw-del{opacity:1}
.sb-sw-del:hover{color:var(--red)}
.sb-sw-add{padding:10px 14px;font-size:12px;color:var(--cyan);cursor:pointer;border-top:1px solid var(--border);text-align:center}
.sb-sw-add:hover{background:var(--bg4)}

/* ── CUSTOM PRICING MATRIX ────────────────────────────────────────────────── */
.price-input{width:90px;background:var(--bg4);border:1px solid var(--border-s);border-radius:4px;padding:5px 8px;color:var(--text);font-family:var(--mono);font-size:12px;outline:none;text-align:right;transition:border-color .2s,box-shadow .2s}
.price-input:focus{border-color:var(--cyan);box-shadow:0 0 0 2px rgba(56,189,248,.12)}
.price-input.custom-set{border-color:rgba(52,211,153,.5);background:rgba(52,211,153,.05)}
.price-input::placeholder{color:var(--text3)}
.pricing-savings{font-size:11px;color:var(--green);font-family:var(--mono);white-space:nowrap}
.pricing-msrp-strike{text-decoration:line-through;color:var(--text3);font-size:10px;font-family:var(--mono)}

/* ── LICENCE FILTER CHIPS ─────────────────────────────────────────────────── */
.lic-chips{display:flex;flex-wrap:wrap;gap:6px;padding:12px 16px;border-bottom:1px solid var(--border);align-items:center}
.lic-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border:1px solid var(--border-s);border-radius:20px;font-size:11px;color:var(--text2);cursor:pointer;background:var(--bg3);transition:all .14s;user-select:none;white-space:nowrap}
.lic-chip:hover{border-color:rgba(56,189,248,.5);color:var(--cyan)}
.lic-chip.active{background:var(--cyan-d);border-color:rgba(56,189,248,.4);color:var(--cyan);font-weight:600}
.lic-chip-clear{color:var(--text3);border-style:dashed}
.lic-chip-clear:hover{color:var(--red);border-color:rgba(248,113,113,.5)}

/* ── USAGE & ACTIVITY SECTION ─────────────────────────────────────────────── */
.usage-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:18px}
.usage-donut-row{display:flex;gap:14px;flex-wrap:wrap}
.usage-donut-card{text-align:center;background:var(--bg3);border:1px solid var(--border);border-radius:var(--rs);padding:14px 18px;min-width:150px;flex:1}
.usage-donut-card canvas{max-width:130px;max-height:130px}
.usage-donut-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text3);margin-bottom:10px}
.usage-legend{display:flex;flex-direction:column;gap:5px;margin-top:10px;text-align:left}
.usage-legend-row{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--text2)}
.usage-legend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.usage-stat-val{font-size:18px;font-weight:700;font-family:var(--mono);color:var(--text)}
.usage-stat-sub{font-size:10px;color:var(--text3);margin-top:2px}
.usage-panel-body{padding:0 0 0 0}
.usage-split{display:flex;gap:18px;padding:16px 18px}
.usage-split-left{display:flex;flex-direction:column;gap:14px;flex-shrink:0;width:160px}
.usage-split-right{flex:1;overflow:auto}
.section-recap{display:flex;gap:11px;align-items:flex-start;background:var(--bg3);border-left:3px solid var(--cyan);border-radius:var(--rs);padding:13px 15px;margin:0 0 16px 0;font-size:12.5px;line-height:1.55;color:var(--text2)}
.section-recap .recap-i{font-size:14px;flex-shrink:0;padding-top:1px}
.section-recap p{margin:0}