:root{
  --cc-bg:#081a28;
  --cc-bg-deep:#06131e;
  --cc-sidebar:#0d2435;
  --cc-panel:#112b3e;
  --cc-panel-soft:#17364c;
  --cc-line:rgba(255,255,255,.09);
  --cc-text:#eef6fb;
  --cc-muted:#91a8b8;
  --cc-accent:#2dd4a8;
  --cc-accent-strong:#18b98e;
  --cc-blue:#55a8ff;
  --cc-danger:#fb7185;
  --cc-warning:#fbbf24;
  --cc-radius:16px;
  --cc-shadow:0 16px 44px rgba(0,0,0,.24);
}

body.app-bg{
  background:
    radial-gradient(900px 580px at 80% -10%,rgba(51,137,188,.16),transparent 64%),
    linear-gradient(180deg,var(--cc-bg-deep),var(--cc-bg));
  color:var(--cc-text);
}

.command-shell{min-height:100vh}
.command-sidebar{
  position:fixed;
  inset:0 auto 0 0;
  z-index:1035;
  display:flex;
  width:252px;
  flex-direction:column;
  overflow-y:auto;
  background:linear-gradient(180deg,#0e283b 0%,#0a2030 100%);
  border-right:1px solid var(--cc-line);
  box-shadow:16px 0 42px rgba(0,0,0,.13);
  transition:transform .22s ease;
}
.command-brand{
  display:flex;
  align-items:center;
  gap:.75rem;
  min-height:76px;
  padding:1rem 1.15rem;
  color:#fff;
  text-decoration:none;
  border-bottom:1px solid var(--cc-line);
}
.command-brand:hover{color:#fff}
.command-brand .brand-mark{
  width:40px;height:40px;flex:0 0 40px;border-radius:13px;
  background:linear-gradient(145deg,var(--cc-accent),var(--cc-blue));
  color:#082133;font-size:1.1rem;font-weight:900;
}
.command-brand-name{font-weight:900;letter-spacing:.045em;line-height:1}
.command-brand-sub{margin-top:.25rem;color:var(--cc-muted);font-size:.68rem;letter-spacing:.09em}
.command-nav{display:grid;gap:.25rem;padding:1rem .75rem}
.command-nav-label{
  padding:.55rem .7rem .3rem;
  color:#668397;
  font-size:.67rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
}
.command-nav-link{
  position:relative;
  display:flex;
  align-items:center;
  gap:.7rem;
  min-height:43px;
  padding:.65rem .75rem;
  border-radius:11px;
  color:var(--cc-muted);
  text-decoration:none;
  font-size:.91rem;
  font-weight:650;
  transition:background .16s ease,color .16s ease,transform .16s ease;
}
.command-nav-link:hover{color:#fff;background:rgba(255,255,255,.055);transform:translateX(2px)}
.command-nav-link.active{color:#fff;background:rgba(45,212,168,.11)}
.command-nav-link.active::before{
  content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:9px;background:var(--cc-accent)
}
.command-nav-icon{
  display:grid;place-items:center;
  width:27px;height:27px;flex:0 0 27px;
  border-radius:9px;
  background:rgba(255,255,255,.045);
  color:#b7c9d4;
  font-size:.86rem;
}
.command-nav-link.active .command-nav-icon{background:rgba(45,212,168,.16);color:var(--cc-accent)}
.command-sidebar-user{
  margin:auto .75rem .85rem;
  padding:.85rem;
  border-top:1px solid var(--cc-line);
}
.command-user-row{display:flex;align-items:center;gap:.65rem}
.command-avatar{
  display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;
  border-radius:12px;background:#244a64;color:#e6f6ff;font-size:.78rem;font-weight:850
}
.command-user-copy{min-width:0;flex:1}
.command-user-name{overflow:hidden;color:#fff;font-size:.86rem;font-weight:750;text-overflow:ellipsis;white-space:nowrap}
.command-user-role{margin-top:.12rem;color:var(--cc-muted);font-size:.72rem;text-transform:capitalize}
.command-user-actions{display:flex;gap:.35rem;margin-top:.75rem}
.command-user-actions a,.command-user-actions button{
  flex:1;border:1px solid var(--cc-line);border-radius:9px;background:rgba(255,255,255,.035);
  color:#c5d4dd;padding:.42rem .5rem;font-size:.72rem;text-align:center;text-decoration:none
}
.command-user-actions a:hover,.command-user-actions button:hover{background:rgba(255,255,255,.08);color:#fff}

.command-stage{min-height:100vh;margin-left:252px}
.command-topbar{
  position:sticky;top:0;z-index:1025;
  display:flex;align-items:center;gap:.8rem;
  min-height:76px;padding:.8rem 1.6rem;
  background:rgba(8,26,40,.88);
  border-bottom:1px solid var(--cc-line);
  backdrop-filter:blur(14px);
}
.command-menu-toggle{display:none}
.command-back,.command-menu-toggle{
  width:40px;height:40px;border:1px solid var(--cc-line);border-radius:11px;
  background:rgba(255,255,255,.045);color:#d9e8f0
}
.command-back:hover,.command-menu-toggle:hover{background:rgba(255,255,255,.09);color:#fff}
.command-topbar-copy{min-width:0}
.command-topbar-title{color:#fff;font-size:1rem;font-weight:800;line-height:1.15}
.command-topbar-context{margin-top:.2rem;color:var(--cc-muted);font-size:.75rem}
.command-topbar-actions{display:flex;align-items:center;gap:.55rem;margin-left:auto}
.command-quick-add{
  display:inline-flex;align-items:center;gap:.45rem;
  min-height:40px;padding:.55rem .85rem;border-radius:11px;
  background:var(--cc-accent);color:#06291f;text-decoration:none;font-size:.82rem;font-weight:850
}
.command-quick-add:hover{background:#4ae0b8;color:#05251c}
.command-top-user{display:none;color:var(--cc-muted);font-size:.78rem}

.command-content{
  width:100%;
  max-width:1680px;
  margin:0 auto;
  padding:1.35rem 1.55rem 3rem;
}
.command-content.container{max-width:1680px}
.command-content.content-pad{padding-bottom:3rem}

.command-content .app-card{
  border:1px solid var(--cc-line);
  border-radius:var(--cc-radius);
  background:linear-gradient(145deg,rgba(23,54,76,.96),rgba(15,42,60,.96));
  box-shadow:var(--cc-shadow);
}
.command-content .app-alert{border-color:var(--cc-line);background:rgba(17,43,62,.92)}
.command-content .kv{border-color:var(--cc-line);background:rgba(255,255,255,.035)}
.command-content .btn{border-radius:10px}
.command-content .btn-primary,.command-content .btn-primary-soft{
  border-color:rgba(45,212,168,.42)!important;
  background:rgba(45,212,168,.16)!important;
  color:#dffff5!important;
}
.command-content .btn-primary:hover,.command-content .btn-primary-soft:hover{background:rgba(45,212,168,.26)!important}
.command-content .form-control,.command-content .form-select{
  min-height:42px;border-radius:11px!important;background:#18354a!important;border-color:rgba(255,255,255,.12)!important
}
.command-content .form-select option{color:#17212b;background:#fff}
.command-content .table>:not(caption)>*>*{background-color:transparent;border-color:var(--cc-line)}
.command-content .table-hover>tbody>tr:hover>*{background:rgba(255,255,255,.035)}
.command-content .badge{border-radius:999px}
.command-content h1,.command-content h2,.command-content h3,.command-content h4,.command-content h5{letter-spacing:-.015em}
.command-content code{color:#80e6ca}

.cc-dashboard{display:grid;gap:1rem}
.cc-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem}
.cc-page-head h1{margin:0;color:#fff;font-size:clamp(1.45rem,2.4vw,2rem);font-weight:850;letter-spacing:-.035em}
.cc-page-head p{margin:.3rem 0 0;color:var(--cc-muted);font-size:.88rem}
.cc-page-actions{display:flex;gap:.55rem}
.cc-page-actions a{
  display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:.55rem .85rem;
  border:1px solid var(--cc-line);border-radius:11px;background:rgba(255,255,255,.045);color:#e8f2f7;text-decoration:none;font-size:.82rem;font-weight:750
}
.cc-page-actions a.primary{border-color:transparent;background:var(--cc-accent);color:#05271e}
.cc-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem}
.cc-kpi{
  position:relative;overflow:hidden;min-height:132px;padding:1rem 1.05rem;
  border:1px solid var(--cc-line);border-radius:var(--cc-radius);
  background:linear-gradient(145deg,var(--cc-panel-soft),var(--cc-panel));
  box-shadow:0 12px 28px rgba(0,0,0,.18)
}
.cc-kpi::after{content:"";position:absolute;width:90px;height:90px;right:-28px;top:-28px;border-radius:50%;background:rgba(85,168,255,.08)}
.cc-kpi.accent::after{background:rgba(45,212,168,.11)}
.cc-kpi-label{color:var(--cc-muted);font-size:.78rem;font-weight:650}
.cc-kpi-value{margin-top:.45rem;color:#fff;font-size:clamp(1.7rem,3vw,2.35rem);font-weight:900;letter-spacing:-.055em}
.cc-kpi-meta{margin-top:.25rem;color:#bdd0da;font-size:.72rem}
.cc-kpi-icon{position:absolute;right:1rem;bottom:1rem;color:#7795a8;font-size:1.05rem}

.cc-dashboard-grid{display:grid;grid-template-columns:minmax(420px,1.55fr) minmax(300px,.85fr);gap:1rem}
.cc-dashboard-card{border:1px solid var(--cc-line);border-radius:var(--cc-radius);background:var(--cc-panel);box-shadow:var(--cc-shadow)}
.cc-dashboard-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1rem 1.05rem .55rem}
.cc-dashboard-card h2{margin:0;color:#fff;font-size:.96rem;font-weight:800}
.cc-dashboard-card .cc-sub{margin:.25rem 0 0;color:var(--cc-muted);font-size:.76rem}
.cc-map-card{grid-row:span 2;overflow:hidden}
.cc-map{height:405px;min-height:350px;background:#102a3b}
.cc-map-empty{display:grid;place-items:center;height:405px;padding:2rem;text-align:center;color:var(--cc-muted)}
.cc-map-empty strong{display:block;color:#fff;margin-bottom:.35rem}
.cc-chart-wrap{height:220px;padding:.5rem .85rem 1rem}
.cc-quick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem;padding:.55rem 1rem 1rem}
.cc-quick-link{
  display:flex;align-items:center;gap:.65rem;min-height:68px;padding:.75rem;
  border:1px solid var(--cc-line);border-radius:12px;background:rgba(255,255,255,.03);
  color:#eef7fb;text-decoration:none
}
.cc-quick-link:hover{color:#fff;border-color:rgba(45,212,168,.34);background:rgba(45,212,168,.07)}
.cc-quick-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(85,168,255,.12);color:var(--cc-blue)}
.cc-quick-copy strong{display:block;font-size:.78rem}.cc-quick-copy span{display:block;margin-top:.15rem;color:var(--cc-muted);font-size:.68rem}

.auth-topbar{padding:1rem 0;border-bottom:1px solid var(--cc-line);background:rgba(13,36,53,.85)}
.auth-content{max-width:760px}
.sidebar-scrim{display:none}

.command-mobile-nav{display:none}

@media(max-width:1180px){
  .command-sidebar{width:224px}
  .command-stage{margin-left:224px}
  .cc-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:991.98px){
  body.sidebar-open{overflow:hidden}
  .command-sidebar{width:min(290px,86vw);transform:translateX(-102%)}
  body.sidebar-open .command-sidebar{transform:translateX(0)}
  .command-stage{margin-left:0}
  .command-menu-toggle{display:inline-grid;place-items:center}
  .command-back{display:none}
  .sidebar-scrim{position:fixed;inset:0;z-index:1030;background:rgba(0,0,0,.55);backdrop-filter:blur(2px)}
  body.sidebar-open .sidebar-scrim{display:block}
  .command-top-user{display:block}
  .cc-dashboard-grid{grid-template-columns:1fr}
  .cc-map-card{grid-row:auto}
}
@media(max-width:767.98px){
  .command-topbar{min-height:64px;padding:.65rem .8rem}
  .command-topbar-context{display:none}
  .command-topbar-actions .command-quick-add{width:40px;padding:0;justify-content:center;font-size:0}
  .command-topbar-actions .command-quick-add::before{content:"+";font-size:1.2rem}
  .command-content,.command-content.container{padding:1rem .75rem 6.2rem}
  .cc-page-head{align-items:flex-start;flex-direction:column}
  .cc-page-actions{width:100%;overflow-x:auto}
  .cc-page-actions a{flex:1;white-space:nowrap}
  .cc-kpis{display:flex;overflow-x:auto;padding-bottom:.25rem;scroll-snap-type:x mandatory}
  .cc-kpi{min-width:215px;scroll-snap-align:start}
  .cc-map{height:360px;min-height:320px}
  .cc-map-empty{height:360px}
  .cc-quick-grid{grid-template-columns:1fr 1fr}
  .command-mobile-nav{
    position:fixed;left:.7rem;right:.7rem;bottom:.65rem;z-index:1020;
    display:grid;grid-template-columns:repeat(5,1fr);gap:.2rem;
    padding:.4rem;border:1px solid var(--cc-line);border-radius:16px;
    background:rgba(13,36,53,.94);box-shadow:0 16px 38px rgba(0,0,0,.42);backdrop-filter:blur(14px)
  }
  .command-mobile-nav a{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.18rem;
    min-height:50px;border-radius:11px;color:#91a8b8;text-decoration:none;font-size:.64rem
  }
  .command-mobile-nav a.active{background:rgba(45,212,168,.11);color:#fff}
  .command-mobile-nav b{font-size:.95rem}
  .mobile-nav{display:none!important}
}
@media(max-width:470px){
  .cc-quick-grid{grid-template-columns:1fr}
  .cc-page-actions a:not(.primary){display:none}
}
