:root{
  --bg:#070A10;
  --bg2:#0A0F1B;
  --panel: rgba(14, 18, 30, .78);
  --panel2: rgba(10, 14, 24, .72);

  --text:#EAF0FF;
  --muted:#9AA6C7;

  --border: rgba(110, 130, 190, .14);
  --border2: rgba(110, 130, 190, .22);

  --accent:#45D2FF;
  --accent2:#7C6CFF;
  --good:#2ECC71;
  --bad:#FF4D4D;
  --warn:#FFB020;

  --shadow: 0 18px 60px rgba(0,0,0,.42);
  --shadow2: 0 10px 30px rgba(0,0,0,.35);
  --r:18px;
  --r2:22px;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:
    radial-gradient(900px 700px at 10% 10%, rgba(69,210,255,.14) 0%, transparent 55%),
    radial-gradient(800px 600px at 85% 30%, rgba(124,108,255,.16) 0%, transparent 58%),
    radial-gradient(700px 500px at 40% 95%, rgba(46,204,113,.08) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}

.muted{color:var(--muted);font-size:13px}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;}

.app{
  display:grid;
  grid-template-columns: 300px 1fr;
  min-height:100vh;
}

@media (max-width: 980px){
  .app{grid-template-columns: 1fr;}
}

.sideCollapse{position:absolute; opacity:0; pointer-events:none}

.side{
  position:sticky;
  top:0;
  height:100vh;
  border-right:1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(10,14,24,.78), rgba(8,10,16,.72));
  backdrop-filter: blur(14px);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:14px;
  overflow:hidden;
}

@media (max-width: 980px){
  .side{position:relative; height:auto;}
}

.sideTop{display:flex; flex-direction:column; gap:12px}
.brand{
  display:flex; align-items:center; gap:12px;
  padding:12px;
  border:1px solid var(--border);
  border-radius: var(--r2);
  background:
    linear-gradient(180deg, rgba(18,24,42,.78), rgba(10,14,24,.62));
  box-shadow: var(--shadow2);
  position:relative;
}
.brandMark{
  width:44px; height:44px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  font-weight:950;
  letter-spacing:.5px;
  color: rgba(234,240,255,.95);
  background: radial-gradient(80% 80% at 30% 20%, rgba(69,210,255,.25), rgba(124,108,255,.18));
  border:1px solid rgba(69,210,255,.22);
}
.brandMarkSm{width:40px;height:40px;border-radius:16px}
.brandTitle{font-weight:950; letter-spacing:.2px}
.brandSub{color:var(--muted); font-size:12px}

.iconBtn{
  border-radius:14px;
  border:1px solid var(--border);
  background: rgba(8,10,16,.35);
  color: var(--text);
  padding:10px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.iconBtn svg{width:18px;height:18px; fill: none; stroke: currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.iconBtn:hover{filter:brightness(1.08)}
.sideToggle{
  margin-left:auto;
}

.sidePills{padding:0 4px}

.sideSearch{
  position:relative;
}
.searchIcon{
  position:absolute;
  left:12px;
  top:50%;
  transform: translateY(-50%);
  opacity:.7;
}
.searchIcon svg{width:16px;height:16px; fill: rgba(154,166,199,.9);}
.inputSearch{
  padding-left:38px !important;
  opacity:.9;
}

.navWrap{
  overflow:auto;
  padding-right:6px;
}
.navWrap::-webkit-scrollbar{width:10px}
.navWrap::-webkit-scrollbar-thumb{
  background: rgba(110,130,190,.16);
  border: 2px solid rgba(0,0,0,0);
  background-clip: padding-box;
  border-radius: 999px;
}
.navWrap::-webkit-scrollbar-track{background: transparent}

.navGroup{margin-top:6px}
.navGroupTitle{
  padding:10px 10px 8px;
  font-size:11px;
  letter-spacing:.18em;
  text-transform: uppercase;
  color: rgba(154,166,199,.7);
}

.nav{display:flex;flex-direction:column;gap:8px;padding:0 4px}

.navItem{
  display:flex; align-items:center; gap:10px;
  width:100%;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid transparent;
  background: rgba(8,10,16,.20);
  color: var(--text);
  cursor:pointer;
  text-align:left;
  transition: .15s ease;
}

.navItem:hover{
  background: rgba(69,210,255,.07);
  border-color: rgba(69,210,255,.16);
}

.navItem.active{
  background:
    linear-gradient(90deg, rgba(69,210,255,.14), rgba(124,108,255,.08));
  border-color: rgba(69,210,255,.22);
  box-shadow: 0 0 0 4px rgba(69,210,255,.07);
}

.navIco{
  width:18px;height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  opacity:.9;
}
.navIco svg{
  width:18px;height:18px;
  fill: rgba(234,240,255,.86);
}

.navText{flex:1; font-weight:650; letter-spacing:.1px}
.navDot{
  width:9px; height:9px; border-radius:999px;
  background: rgba(69,210,255,.55);
  box-shadow: 0 0 0 4px rgba(69,210,255,.10);
  opacity:.65;
}

.sideFooter{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding: 10px 4px 0;
  border-top: 1px solid var(--border);
}
.miniHint{color:rgba(154,166,199,.75); font-size:12px; line-height:1.35}

.main{
  padding:18px;
}

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  padding:16px 16px;
  border:1px solid var(--border);
  border-radius: var(--r2);
  background:
    linear-gradient(180deg, rgba(18,24,42,.62), rgba(10,14,24,.50));
  box-shadow: var(--shadow2);
}

.pageTitle{
  font-size:22px;
  font-weight:950;
  letter-spacing:.2px;
}
.pageHint{color:var(--muted); font-size:13px; margin-top:6px}

.topRight{min-width: 420px; max-width: 560px;}
@media (max-width: 980px){
  .topRight{min-width:auto; max-width:none; width:100%;}
}

.tab{display:none; margin-top:16px;}
.tab.active{display:block}

.hero{
  border:1px solid var(--border);
  border-radius: var(--r2);
  background:
    radial-gradient(900px 350px at 15% 15%, rgba(69,210,255,.16), transparent 55%),
    radial-gradient(800px 320px at 85% 25%, rgba(124,108,255,.14), transparent 58%),
    linear-gradient(180deg, rgba(18,24,42,.52), rgba(10,14,24,.44));
  box-shadow: var(--shadow2);
  padding:16px;
  display:flex;
  gap:16px;
  align-items:stretch;
  justify-content:space-between;
  margin-bottom:16px;
}
@media (max-width: 980px){
  .hero{flex-direction:column;}
}
.heroTitle{font-size:18px;font-weight:950;letter-spacing:.2px}
.heroSub{margin-top:6px;color:rgba(154,166,199,.85)}
.heroBadges{margin-top:12px; display:flex; gap:10px; flex-wrap:wrap}
.chip{
  border:1px solid rgba(69,210,255,.18);
  background: rgba(8,10,16,.30);
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  color: rgba(234,240,255,.88);
}

.heroRight{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  min-width: 420px;
}
@media (max-width: 980px){
  .heroRight{min-width:auto; grid-template-columns:1fr;}
}
.miniCard{
  border:1px solid var(--border);
  background: rgba(8,10,16,.30);
  border-radius: 18px;
  padding:12px;
}
.miniCard.wide{grid-column: 1/-1}
.miniKpiLabel{font-size:12px; color: rgba(154,166,199,.78); letter-spacing:.06em; text-transform:uppercase}
.miniKpiValue{margin-top:6px; font-size:16px; font-weight:900}
.miniKpiHint{margin-top:4px}

.grid2{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:16px;
}
@media (max-width: 980px){ .grid2{grid-template-columns:1fr;} }

.card{
  border:1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(18,24,42,.58), rgba(10,14,24,.48));
  border-radius: var(--r2);
  padding:14px;
  box-shadow: var(--shadow2);
}

.cardHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.cardTitle{font-weight:950}
.hr{height:1px; background: var(--border); margin:12px 0}

.actionsGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
}
.actionCard{
  border:1px solid var(--border);
  background: rgba(8,10,16,.28);
  border-radius: 18px;
  padding:12px;
}
.actionTitle{font-weight:900}
.actionSub{margin-top:4px}

.row{display:flex; gap:10px; align-items:center}
.wrap{flex-wrap:wrap}
.grow{flex:1}
.w100{width:100%}

.field{display:flex; flex-direction:column; gap:6px}
.field.compact{gap:6px}
.fieldLabel{font-size:12px; color: rgba(154,166,199,.82)}
.formGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
@media (max-width: 980px){ .formGrid{grid-template-columns:1fr;} }

.toggleRow{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:16px;
  background: rgba(8,10,16,.28);
}

.input, select, textarea{
  width:100%;
  border-radius:16px;
  border:1px solid var(--border);
  background: rgba(8,10,16,.40);
  color: var(--text);
  padding:10px 12px;
  outline:none;
}
.input:focus, select:focus, textarea:focus{
  border-color: rgba(69,210,255,.35);
  box-shadow: 0 0 0 4px rgba(69,210,255,.10);
}
textarea.input{
  min-height: 110px;
  resize: vertical;
}

.pre{
  border-radius:16px;
  border:1px solid var(--border);
  background: rgba(8,10,16,.42);
  padding:10px 12px;
  overflow:auto;
  max-height: 360px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size:12.5px;
  line-height:1.45;
}
.preLog{max-height: 560px;}

.btn{
  border-radius:16px;
  border:1px solid var(--border);
  background: rgba(22,28,46,.62);
  color: var(--text);
  padding:10px 12px;
  cursor:pointer;
  transition: .12s ease;
}
.btn:hover{filter:brightness(1.07)}
.btn:active{transform: translateY(1px)}
.btnPrimary{
  border-color: rgba(69,210,255,.35);
  background:
    linear-gradient(180deg, rgba(69,210,255,.16), rgba(124,108,255,.12));
}
.btnGhost{background: transparent}

.pill{
  border:1px solid var(--border);
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  color:var(--muted);
  display:inline-flex;
  align-items:center;
  gap:8px;
  background: rgba(8,10,16,.28);
}
.pill.ok{border-color:rgba(46,204,113,.35); color:#bff1d0}
.pill.bad{border-color:rgba(255,77,77,.30); color:#ffd0d0}

.badge{
  border:1px solid var(--border);
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  color:var(--muted);
  background: rgba(8,10,16,.28);
}
.badge.ok{border-color:rgba(46,204,113,.35); color:#bff1d0}
.badge.bad{border-color:rgba(255,77,77,.30); color:#ffd0d0}
.badge.warn{border-color:rgba(255,176,32,.30); color:#ffe6b8}

/* switch */
.switch{position:relative;display:inline-block;width:56px;height:30px}
.switch input{opacity:0;width:0;height:0}
.slider{
  position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;
  background:#27304b;transition:.18s;border-radius:999px;border:1px solid var(--border)
}
.slider:before{
  position:absolute;content:"";height:24px;width:24px;left:3px;bottom:2px;
  background:#cbd5ff;transition:.18s;border-radius:50%
}
.switch input:checked + .slider{
  background:rgba(46,204,113,.20);
  border-color:rgba(46,204,113,.35)
}
.switch input:checked + .slider:before{transform:translateX(26px)}

/* RR list */
#rrList{display:flex; flex-direction:column; gap:10px; margin-top:10px}
.rrRow{
  border:1px solid var(--border);
  border-radius:18px;
  background: rgba(8,10,16,.28);
  padding:10px;
}
.rrGrid{
  display:grid;
  grid-template-columns: 1.2fr .8fr .7fr .8fr auto;
  gap:10px;
  align-items:center;
}
@media (max-width: 980px){
  .rrGrid{grid-template-columns:1fr;}
}
.rrMini{font-size:12px; color: rgba(154,166,199,.85); margin-top:8px}

/* toast */
.toast{
  position:fixed;
  right:18px;
  bottom:18px;
  max-width: 420px;
  display:none;
  padding:12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(69,210,255,.22);
  background: rgba(12,16,28,.86);
  box-shadow: var(--shadow);
  color: var(--text);
}
.toast.show{display:block}
.toast.good{border-color:rgba(46,204,113,.35)}
.toast.bad{border-color:rgba(255,77,77,.30)}
.toast.warn{border-color:rgba(255,176,32,.30)}

/* AUTH pages */
.authBg{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.authWrap{
  width: min(980px, 100%);
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:16px;
  align-items:stretch;
}

@media (max-width: 980px){
  .authWrap{grid-template-columns: 1fr;}
}

.authSide{
  border:1px solid var(--border);
  border-radius: var(--r2);
  background:
    radial-gradient(900px 350px at 15% 15%, rgba(69,210,255,.16), transparent 58%),
    radial-gradient(800px 320px at 85% 25%, rgba(124,108,255,.15), transparent 58%),
    linear-gradient(180deg, rgba(18,24,42,.58), rgba(10,14,24,.48));
  box-shadow: var(--shadow2);
  padding:18px;
}

.authBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;height:48px;
  border-radius:18px;
  font-weight:950;
  background: rgba(69,210,255,.16);
  border: 1px solid rgba(69,210,255,.22);
}

.authTitle{
  margin-top:12px;
  font-size:22px;
  font-weight:950;
}
.authSub{margin-top:6px}

.authList{
  margin-top:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.authItem{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid var(--border);
  background: rgba(8,10,16,.24);
}
.authDot{
  width:10px;height:10px;border-radius:999px;
  background: rgba(69,210,255,.55);
  box-shadow: 0 0 0 4px rgba(69,210,255,.10);
}

.authCard{
  border:1px solid var(--border);
  border-radius: var(--r2);
  background:
    linear-gradient(180deg, rgba(18,24,42,.62), rgba(10,14,24,.50));
  box-shadow: var(--shadow2);
  padding:16px;
}

.authHead{
  display:flex;
  align-items:center;
  gap:12px;
}
.loginTitle{
  font-weight:950;
  letter-spacing:.2px;
}

/* Collapsed sidebar (CSS-only) */
@media (min-width: 981px){
  #sideCollapse:checked ~ .app{
    grid-template-columns: 86px 1fr;
  }
  #sideCollapse:checked ~ .app .brandText,
  #sideCollapse:checked ~ .app .navText,
  #sideCollapse:checked ~ .app .navGroupTitle,
  #sideCollapse:checked ~ .app .miniHint,
  #sideCollapse:checked ~ .app .sideSearch{
    display:none !important;
  }
  #sideCollapse:checked ~ .app .side{
    padding:14px 10px;
  }
  #sideCollapse:checked ~ .app .navItem{
    justify-content:center;
  }
  #sideCollapse:checked ~ .app .navDot{
    display:none;
  }
}