:root{
  /* triple-dark palette */
  --bg0:#05060a;    /* void */
  --bg1:#070913;    /* ink */
  --bg2:#0b0f1c;    /* deep slate */
  --panel:#0e1424;  /* charcoal */
  --panel2:#0b1020; /* deeper */
  --line:#182042;   /* subtle border */
  --text:#d7dbe7;
  --muted:#8e97b2;
  --faint:#5f6780;
  --accent:#7c5cff; /* neon violet */
  --accent2:#22d3ee;/* cyan hint */
  --good:#2ee59d;
  --warn:#f59e0b;
  --bad:#fb7185;
  --shadow: 0 10px 30px rgba(0,0,0,.55);
  --radius: 18px;

  /* Scrollbar styling */
  --scroll-track: rgba(5,6,10,.55);
  --scroll-thumb-a: rgba(124,92,255,.28);
  --scroll-thumb-b: rgba(34,211,238,.16);
  --scroll-thumb-hover: rgba(124,92,255,.45);
  --scroll-thumb-active: rgba(124,92,255,.60);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background: radial-gradient(1200px 900px at 20% 0%, rgba(124,92,255,.08), transparent 60%),
              radial-gradient(1000px 800px at 90% 20%, rgba(34,211,238,.06), transparent 55%),
              linear-gradient(180deg,var(--bg1),var(--bg0));
  color:var(--text);
  /* The page itself should not scroll — main + menu are independent scroll panes */
  overflow:hidden;
}

/* Triple-dark scrollbars (WebKit + Firefox) */
.sidebar-mid,
.main,
.scope-list,
.table-wrap,
.modal-dialog{
  scrollbar-width: thin;
  scrollbar-color: rgba(124,92,255,.35) var(--scroll-track);
  scrollbar-gutter: stable;
}

.sidebar-mid::-webkit-scrollbar,
.main::-webkit-scrollbar,
.scope-list::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar,
.modal-dialog::-webkit-scrollbar{
  width:10px;
  height:10px;
}

.sidebar-mid::-webkit-scrollbar-track,
.main::-webkit-scrollbar-track,
.scope-list::-webkit-scrollbar-track,
.table-wrap::-webkit-scrollbar-track,
.modal-dialog::-webkit-scrollbar-track{
  background: var(--scroll-track);
  border-radius: 999px;
  border:1px solid rgba(24,32,66,.55);
}

.sidebar-mid::-webkit-scrollbar-thumb,
.main::-webkit-scrollbar-thumb,
.scope-list::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb,
.modal-dialog::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, var(--scroll-thumb-a), var(--scroll-thumb-b));
  border-radius: 999px;
  border: 2px solid rgba(5,6,10,.70);
}

.sidebar-mid::-webkit-scrollbar-thumb:hover,
.main::-webkit-scrollbar-thumb:hover,
.scope-list::-webkit-scrollbar-thumb:hover,
.table-wrap::-webkit-scrollbar-thumb:hover,
.modal-dialog::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, var(--scroll-thumb-hover), rgba(34,211,238,.20));
}

.sidebar-mid::-webkit-scrollbar-thumb:active,
.main::-webkit-scrollbar-thumb:active,
.scope-list::-webkit-scrollbar-thumb:active,
.table-wrap::-webkit-scrollbar-thumb:active,
.modal-dialog::-webkit-scrollbar-thumb:active{
  background: linear-gradient(180deg, var(--scroll-thumb-active), rgba(34,211,238,.24));
}

.sidebar-mid::-webkit-scrollbar-corner,
.main::-webkit-scrollbar-corner,
.scope-list::-webkit-scrollbar-corner,
.table-wrap::-webkit-scrollbar-corner,
.modal-dialog::-webkit-scrollbar-corner{
  background: transparent;
}

.app{
  display:flex;
  height:100vh;
  height:100dvh;
  overflow:hidden;
}

.sidebar{
  width:300px;
  background: linear-gradient(180deg, rgba(14,20,36,.92), rgba(7,9,19,.92));
  border-right:1px solid var(--line);
  padding:16px 14px;
  position:relative;
  top:0;
  height:100%;
  display:flex;
  flex-direction:column;
  gap:14px;
  backdrop-filter: blur(8px);
  overflow:hidden;
}

.brand{display:flex; gap:12px; align-items:center; padding:10px 10px; border:1px solid rgba(24,32,66,.6); border-radius:16px; background: rgba(11,16,32,.6); box-shadow: var(--shadow);}
.brand-mark{width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg, rgba(124,92,255,.35), rgba(34,211,238,.18)); display:flex;align-items:center;justify-content:center; border:1px solid rgba(124,92,255,.25);} 
.brand-title{font-weight:700; letter-spacing:.2px;}
.brand-subtitle{font-size:12px; color:var(--muted); margin-top:2px;}

.sidebar-mid{
  flex:1;
  min-height:0;
  overflow:auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-right:4px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.nav{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:8px;
  border-radius: 16px;
  border:1px solid rgba(24,32,66,.55);
  background: rgba(11,16,32,.32);
}
.nav-item{
  display:flex; align-items:center; gap:10px;
  border:1px solid transparent;
  background: transparent;
  color:var(--text);
  padding:9px 10px;
  border-radius:14px;
  cursor:pointer;
  text-align:left;
  font-weight:600;
}
.nav-item:hover{background: rgba(11,16,32,.55); border-color: rgba(24,32,66,.55);} 
.nav-item.active{background: rgba(124,92,255,.14); border-color: rgba(124,92,255,.28);} 
.nav-dot{width:8px;height:8px;border-radius:999px;background: rgba(124,92,255,.55); box-shadow: 0 0 0 4px rgba(124,92,255,.08);} 
.nav-item:not(.active) .nav-dot{background: rgba(142,151,178,.35); box-shadow:none;}

.sidebar-footer{margin-top:auto; display:flex; flex-direction:column; gap:10px;}
.pill{font-size:12px;color:var(--muted); padding:10px 12px; border:1px solid rgba(24,32,66,.55); border-radius:999px; background: rgba(11,16,32,.45);} 
.hint{font-size:12px;color:var(--faint); line-height:1.4; padding:0 4px;}

.main{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  height:100%;
  overflow:auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* When the mobile menu is open, prevent the main pane from scrolling behind it */
body.menu-open .main{overflow:hidden;}

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 18px;
  position:sticky;
  top:0;
  z-index:10;
  background: linear-gradient(180deg, rgba(5,6,10,.85), rgba(5,6,10,.55));
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(24,32,66,.55);
}
.topbar-left{display:flex; gap:12px; align-items:center;}
.page-title{font-size:18px; font-weight:800;}
.page-sub{font-size:12px; color:var(--muted); margin-top:2px;}
.topbar-right{display:flex; gap:10px; align-items:center;}

.icon-btn{
  width:42px; height:42px;
  border-radius:14px;
  border:1px solid rgba(24,32,66,.65);
  background: rgba(11,16,32,.55);
  color:var(--text);
  cursor:pointer;
  display:none;
}
.icon{font-size:18px; line-height:0;}

.btn{
  border-radius:14px;
  padding:10px 12px;
  background: linear-gradient(135deg, rgba(124,92,255,.95), rgba(124,92,255,.75));
  border:1px solid rgba(124,92,255,.35);
  color:white;
  font-weight:800;
  cursor:pointer;
  box-shadow: 0 8px 18px rgba(124,92,255,.15);
}
.btn:hover{filter:brightness(1.05);} 
.btn:active{transform:translateY(1px);} 
.btn-ghost{
  background: rgba(11,16,32,.55);
  border:1px solid rgba(24,32,66,.65);
  color:var(--text);
  box-shadow:none;
}

.file-btn{position:relative; overflow:hidden;}
.file-btn input{position:absolute; inset:0; opacity:0; cursor:pointer;}

.mini-status{font-size:12px; color:var(--muted); padding-right:6px;}

.view{display:none; padding:18px;}
.view.active{display:block;}

.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:14px;
}

.profile-grid{margin-bottom:14px;}

.card{
  background: linear-gradient(180deg, rgba(14,20,36,.82), rgba(11,16,32,.72));
  border:1px solid rgba(24,32,66,.65);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.card-head{
  padding:14px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-bottom:1px solid rgba(24,32,66,.55);
}
.card-head h2{margin:0; font-size:14px; letter-spacing:.2px;}
.tag{
  font-size:11px;
  color:rgba(255,255,255,.9);
  background: rgba(124,92,255,.18);
  border:1px solid rgba(124,92,255,.28);
  padding:6px 10px;
  border-radius:999px;
}

.card-body{padding:14px 14px;}

.span-12{grid-column: span 12;}
.span-7{grid-column: span 7;}
.span-6{grid-column: span 6;}
.span-5{grid-column: span 5;}

.kpi-row{display:grid; grid-template-columns: repeat(3, 1fr); gap:10px;}
.kpi{background: rgba(5,6,10,.35); border:1px solid rgba(24,32,66,.55); border-radius: 16px; padding:12px;}
.kpi-label{font-size:12px; color:var(--muted);}
.kpi-value{font-size:20px; font-weight:900; margin-top:6px; letter-spacing:.2px;}

.divider{height:1px; background: rgba(24,32,66,.55); margin:14px 0;}

.form .row{display:flex; gap:10px; margin-bottom:10px;}
.form .row.end{justify-content:flex-end; margin-top:12px;}
.field{flex:1; min-width:0;}
label{display:block; font-size:12px; color:var(--muted); font-weight:700; margin:0 0 6px 2px;}
input, select, textarea{
  width:100%;
  background: rgba(5,6,10,.45);
  border:1px solid rgba(24,32,66,.75);
  color:var(--text);
  border-radius: 14px;
  padding:10px 12px;
  outline:none;
}
input:focus, select:focus, textarea:focus{border-color: rgba(124,92,255,.55); box-shadow: 0 0 0 4px rgba(124,92,255,.12);} 

.textarea{resize:vertical; min-height: 140px; line-height:1.35;}

.fit-lines{white-space:pre-wrap; word-break:break-word; font-size:12px; color:var(--muted); margin-top:8px;}
.fit-head{display:flex; justify-content:space-between; align-items:center; gap:10px;}
.fit-head .badge{white-space:nowrap;}
.help{font-size:11px; color:var(--faint); margin:6px 2px 0 2px; line-height:1.35;}

.list{display:flex; flex-direction:column; gap:10px;}
.empty{color:var(--faint); font-size:13px; padding:8px 2px;}

.item{
  border:1px solid rgba(24,32,66,.6);
  border-radius: 16px;
  background: rgba(5,6,10,.32);
  padding:12px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}
.item-title{font-weight:900;}
.item-meta{color:var(--muted); font-size:12px; margin-top:4px; line-height:1.4;}
.item-actions{display:flex; gap:8px; align-items:center;}

.icon-pill{
  font-size:12px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(24,32,66,.7);
  background: rgba(11,16,32,.55);
  cursor:pointer;
  color:var(--text);
}
.icon-pill:hover{border-color: rgba(124,92,255,.45);} 

.table-wrap{overflow:auto; border-radius: 16px; border:1px solid rgba(24,32,66,.55); background: rgba(5,6,10,.25);} 
.table{width:100%; border-collapse:separate; border-spacing:0; min-width:880px;}
.table th, .table td{padding:10px 12px; border-bottom:1px solid rgba(24,32,66,.45); font-size:12px; text-align:left; vertical-align:top;}
.table th{color:var(--muted); font-weight:800; background: rgba(11,16,32,.45); position:sticky; top:0;}
.table tr:hover td{background: rgba(124,92,255,.06);} 
.empty-cell{text-align:center; color:var(--faint);}

.badge{display:inline-flex; align-items:center; gap:6px; font-weight:800; font-size:11px; padding:6px 10px; border-radius:999px; border:1px solid rgba(24,32,66,.7); background: rgba(11,16,32,.55);}
.badge.good{border-color: rgba(46,229,157,.3); background: rgba(46,229,157,.08);}
.badge.warn{border-color: rgba(245,158,11,.3); background: rgba(245,158,11,.08);}
.badge.bad{border-color: rgba(251,113,133,.32); background: rgba(251,113,133,.08);} 

.toolbar{display:flex; gap:10px; margin-bottom:12px;}
.search{flex:1;}
.select{width:180px;}

.two-col{display:grid; grid-template-columns: 1fr 1fr; gap:14px;}
.subhead{font-size:12px; font-weight:900; color:rgba(255,255,255,.92); margin-bottom:8px;}

.bullets{margin:0; padding-left:18px; color:var(--muted); font-size:12px; line-height:1.45;}
.bullets li{margin:6px 0;}
.bullets.faint{color:var(--faint);} 

.modules{display:grid; grid-template-columns: repeat(2, 1fr); gap:12px;}
.module{border:1px solid rgba(24,32,66,.6); border-radius: 18px; background: rgba(5,6,10,.28); padding:12px;}
.module-title{font-weight:900;}
.module-desc{color:var(--muted); font-size:12px; margin-top:6px; line-height:1.4;}

.notice{border:1px solid rgba(34,211,238,.2); background: rgba(34,211,238,.06); border-radius: 18px; padding:12px;}
.notice-title{font-weight:900;}
.notice-text{color:var(--muted); font-size:12px; margin-top:6px; line-height:1.45;}

.theme-preview{display:grid; grid-template-columns: repeat(4, 1fr); gap:10px;}
.swatch{height:48px; border-radius: 16px; border:1px solid rgba(24,32,66,.65);} 
.swatch.s1{background: var(--bg0);} 
.swatch.s2{background: var(--bg2);} 
.swatch.s3{background: var(--panel);} 
.swatch.s4{background: linear-gradient(135deg, rgba(124,92,255,.9), rgba(34,211,238,.55)); border-color: rgba(124,92,255,.25);} 

.footer{padding:12px 18px 72px; color:var(--faint); font-size:12px;}

.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;}

/* Mobile bottom nav */
.mobile-nav{
  position:fixed;
  left:12px;
  right:12px;
  bottom:12px;
  display:none;
  gap:10px;
  padding:10px;
  border-radius: 22px;
  border:1px solid rgba(24,32,66,.65);
  background: rgba(11,16,32,.75);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  z-index: 50;
}
.mnav{
  flex:1;
  height:42px;
  border-radius: 16px;
  border:1px solid rgba(24,32,66,.65);
  background: rgba(5,6,10,.35);
  color: var(--text);
  cursor:pointer;
  font-weight:900;
}
.mnav.active{border-color: rgba(124,92,255,.45); background: rgba(124,92,255,.12);} 

.scrim{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.55);
  z-index: 40;
}

/* Responsive */
@media (max-width: 980px){
  .sidebar{position:fixed; left:-320px; transition:left .18s ease; z-index: 60; height:100vh; height:100dvh;}
  .sidebar.open{left:0;}
  .icon-btn{display:inline-flex; align-items:center; justify-content:center;}
  .view{padding:14px;}
  .kpi-row{grid-template-columns:1fr;}
  .two-col{grid-template-columns:1fr;}
  .modules{grid-template-columns:1fr;}
  .toolbar{flex-direction:column;}
  .select{width:100%;}
  .mobile-nav{display:flex;}
}

@media (max-width: 720px){
  .grid{grid-template-columns: repeat(6, 1fr);} 
  .span-12{grid-column: span 6;}
  .span-7{grid-column: span 6;}
  .span-6{grid-column: span 6;}
  .span-5{grid-column: span 6;}
  .topbar-right .mini-status{display:none;}
  .topbar-right{gap:8px;}
  .form .row{flex-direction:column;}
}

/* Scope panel */
.scope{
  border:1px solid rgba(24,32,66,.55);
  border-radius:16px;
  background: rgba(11,16,32,.35);
  padding:12px;
}
.scope-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px;}
.scope-title{font-weight:800; letter-spacing:.2px;}
.scope-sub{font-size:12px; color:var(--muted);} 
.scope-list{display:flex; flex-direction:column; gap:6px; max-height:240px; overflow:auto; padding-right:2px;}
.scope-item{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 10px;
  border-radius:14px;
  border:1px solid rgba(24,32,66,.45);
  background: rgba(7,9,19,.25);
  cursor:pointer;
  color:var(--text);
}
.scope-item:hover{background: rgba(11,16,32,.55);} 
.scope-item.active{border-color: rgba(124,92,255,.35); background: rgba(124,92,255,.12);} 
.scope-item .left{display:flex; align-items:center; gap:10px; min-width:0;}
.scope-item .label{font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.scope-item .meta{font-size:11px; color:var(--muted);} 

/* Fit status dot */
.status-dot{width:10px;height:10px;border-radius:999px; background: rgba(142,151,178,.35);} 
.status-dot.good{background: var(--good); box-shadow: 0 0 0 4px rgba(46,229,157,.12);} 
.status-dot.warn{background: var(--warn); box-shadow: 0 0 0 4px rgba(245,158,11,.12);} 
.status-dot.bad{background: var(--bad); box-shadow: 0 0 0 4px rgba(251,113,133,.12);} 
.status-dot.ready{background: rgba(124,92,255,.7); box-shadow: 0 0 0 4px rgba(124,92,255,.10);} 

.card-head-actions{display:flex; gap:8px; align-items:center;}

.notice.compact{padding:10px 12px; border-radius:16px; margin-bottom:0;}

/* Modal */
.modal{position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; padding:18px;}
.modal[hidden]{display:none;}
.modal-scrim{position:absolute; inset:0; background: rgba(0,0,0,.65); backdrop-filter: blur(4px);} 
.modal-dialog{
  position:relative;
  width:min(980px, 100%);
  max-height: calc(100vh - 36px);
  overflow:auto;
  border-radius: 22px;
  border:1px solid rgba(24,32,66,.8);
  background: linear-gradient(180deg, rgba(14,20,36,.98), rgba(7,9,19,.96));
  box-shadow: var(--shadow);
}
.modal-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 16px;
  border-bottom:1px solid rgba(24,32,66,.55);
}
.modal-title{font-weight:900; font-size:16px;}
.modal-sub{font-size:12px; color:var(--muted); margin-top:2px;}
.modal-body{padding:16px;}

.icon-btn.small{display:flex; width:40px; height:40px; align-items:center; justify-content:center; border-radius:14px;}

.item.clickable{cursor:pointer;}
.item.clickable:hover{border-color: rgba(124,92,255,.18);}