:root{
  --cc-bg:#05070a;
  --cc-panel:#0e121a;
  --cc-panel-2:#111827;
  --cc-panel-3:#0a0f16;
  --cc-border:#1a2333;
  --cc-border-strong:#2a3850;
  --cc-text:#f4f8ff;
  --cc-muted:#8f9bad;
  --cc-purple:#7b2cbf;
  --cc-purple-soft:#281137;
  --cc-cyan:#00f5d4;
  --cc-cyan-soft:#062925;
  --cc-yellow:#ffee32;
  --cc-yellow-soft:#2b2805;
  --cc-red:#ff0054;
  --cc-red-soft:#2b0715;
  --cc-gray:#64748b;
  --cc-shadow:0 18px 48px rgba(0,0,0,.42);
  --cc-radius:16px;
  --cc-font:'Rajdhani','Segoe UI',Arial,sans-serif;
  --cc-mono:'Roboto Mono','Cascadia Code','SFMono-Regular',Consolas,monospace;
}

html,body{background:var(--cc-bg)!important;color:var(--cc-text)!important}
body{font-family:var(--cc-font)!important;background:
  radial-gradient(circle at 15% 0%,rgba(123,44,191,.11),transparent 32%),
  radial-gradient(circle at 85% 10%,rgba(0,245,212,.06),transparent 28%),
  var(--cc-bg)!important}

.cc-panel{background:linear-gradient(180deg,rgba(14,18,26,.98),rgba(8,12,18,.98));border:1px solid var(--cc-border);border-radius:var(--cc-radius);box-shadow:var(--cc-shadow)}
.cc-kicker{font:800 11px/1 var(--cc-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--cc-purple)}
.cc-muted{color:var(--cc-muted)}
.cc-mono{font-family:var(--cc-mono)}
.cc-glow-purple{box-shadow:0 0 0 1px rgba(123,44,191,.55),0 0 24px rgba(123,44,191,.18)}
.cc-glow-cyan{box-shadow:0 0 0 1px rgba(0,245,212,.4),0 0 28px rgba(0,245,212,.14)}
.cc-glow-yellow{box-shadow:0 0 0 1px rgba(255,238,50,.4),0 0 24px rgba(255,238,50,.12)}
.cc-glow-red{box-shadow:0 0 0 1px rgba(255,0,84,.5),0 0 26px rgba(255,0,84,.16)}

.cc-status{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--cc-border-strong);border-radius:999px;padding:6px 10px;background:#0a0f16;font:800 11px/1 var(--cc-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--cc-muted)}
.cc-status::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--cc-gray);box-shadow:0 0 0 3px rgba(100,116,139,.08)}
.cc-status.good{border-color:rgba(0,245,212,.38);color:var(--cc-cyan);background:rgba(0,245,212,.05)}
.cc-status.good::before{background:var(--cc-cyan);box-shadow:0 0 12px rgba(0,245,212,.75)}
.cc-status.warn{border-color:rgba(255,238,50,.35);color:var(--cc-yellow);background:rgba(255,238,50,.05)}
.cc-status.warn::before{background:var(--cc-yellow);box-shadow:0 0 12px rgba(255,238,50,.55)}
.cc-status.bad{border-color:rgba(255,0,84,.42);color:var(--cc-red);background:rgba(255,0,84,.05)}
.cc-status.bad::before{background:var(--cc-red);box-shadow:0 0 12px rgba(255,0,84,.7)}
.cc-status.neutral::before{background:#657089}

.cc-btn{appearance:none;border:1px solid var(--cc-border-strong);background:#111722;color:var(--cc-text);border-radius:12px;padding:11px 15px;font:800 13px/1.1 var(--cc-font);letter-spacing:.035em;cursor:pointer;transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease,background .12s ease}
.cc-btn:hover:not(:disabled){border-color:#4c6080;transform:translateY(-1px)}
.cc-btn:disabled{opacity:.46;cursor:not-allowed;transform:none}
.cc-btn.primary{background:linear-gradient(180deg,#8a35cf,#69249f);border-color:#a34ce2;box-shadow:0 0 20px rgba(123,44,191,.25)}
.cc-btn.primary:hover:not(:disabled){box-shadow:0 0 28px rgba(123,44,191,.4)}
.cc-btn.good{background:linear-gradient(180deg,#087a6a,#05584f);border-color:rgba(0,245,212,.65);color:#e8fffb;box-shadow:0 0 22px rgba(0,245,212,.13)}
.cc-btn.warn{background:#2c2907;border-color:rgba(255,238,50,.56);color:var(--cc-yellow)}
.cc-btn.danger{background:#300918;border-color:rgba(255,0,84,.62);color:#ff7ba7}
.cc-btn.ghost{background:transparent}
.cc-btn.block{width:100%}

.cc-card{background:linear-gradient(180deg,#0e121a,#0a0e15);border:1px solid var(--cc-border);border-radius:16px;padding:18px;position:relative;overflow:hidden}
.cc-card::after{content:'';position:absolute;inset:auto 0 0 0;height:1px;background:linear-gradient(90deg,transparent,rgba(123,44,191,.42),transparent);pointer-events:none}

.cc-field{display:grid;gap:7px}
.cc-field label{font:800 10px/1 var(--cc-mono);letter-spacing:.11em;text-transform:uppercase;color:var(--cc-muted)}
.cc-field input,.cc-field select,.cc-field textarea{width:100%;background:#070b11;border:1px solid var(--cc-border-strong);color:var(--cc-text);border-radius:11px;padding:11px 12px;outline:none}
.cc-field input:focus,.cc-field select:focus,.cc-field textarea:focus{border-color:var(--cc-purple);box-shadow:0 0 0 3px rgba(123,44,191,.13)}

.cc-divider{height:1px;background:linear-gradient(90deg,transparent,var(--cc-border-strong),transparent);margin:16px 0}

/* Root app shell: cyber theme without changing the legacy advanced layout contract. */
#appRoot .sidebar{background:#070a10!important;border-right-color:var(--cc-border)!important}
#appRoot .brand{font-family:var(--cc-mono);letter-spacing:.07em;text-transform:uppercase}
#appRoot .version{color:var(--cc-purple)}
#appRoot .topbar{border-bottom:1px solid var(--cc-border);padding-bottom:16px}
#appRoot .page-title{letter-spacing:.015em}
#appRoot .nav button{border-radius:10px;color:var(--cc-muted)}
#appRoot .nav button.active{background:rgba(123,44,191,.13);border-color:rgba(123,44,191,.45);color:#fff}
#appRoot .nav-vault{margin-top:10px;border:1px solid var(--cc-border);border-radius:12px;background:#080c12;overflow:hidden}
#appRoot .nav-vault summary{cursor:pointer;padding:10px 12px;color:var(--cc-muted);font-weight:800;list-style:none}
#appRoot .nav-vault summary::-webkit-details-marker{display:none}
#appRoot .nav-vault .vault-nav{display:grid;gap:4px;padding:0 7px 7px}
#appRoot .nav-vault .vault-nav button{font-size:12px;padding:8px 9px}

/* HOME / Event dispatcher */
.cyber-home{display:grid;gap:18px}
.cyber-home .home-hero{padding:24px;background:
  linear-gradient(135deg,rgba(123,44,191,.12),transparent 45%),
  linear-gradient(180deg,#0e121a,#090d14);border:1px solid var(--cc-border);border-radius:20px;box-shadow:var(--cc-shadow)}
.cyber-home .home-hero h1{margin:6px 0 7px;font-size:clamp(28px,4vw,46px);letter-spacing:.01em}
.cyber-home .home-hero p{max-width:780px;color:var(--cc-muted);margin:0}
.cyber-home .home-primary-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:14px;margin-top:22px}
.cyber-home .flow-action{display:flex;min-height:160px;flex-direction:column;justify-content:space-between;gap:22px;padding:21px;border:1px solid var(--cc-border-strong);border-radius:17px;background:#0a0f16;transition:.15s ease}
.cyber-home .flow-action:hover{transform:translateY(-2px);border-color:var(--cc-purple);box-shadow:0 0 28px rgba(123,44,191,.18)}
.cyber-home .flow-action.primary{background:linear-gradient(145deg,rgba(123,44,191,.2),rgba(10,15,22,.96));border-color:rgba(123,44,191,.58)}
.cyber-home .flow-action.quick{background:linear-gradient(145deg,rgba(0,245,212,.08),rgba(10,15,22,.96));border-color:rgba(0,245,212,.28)}
.cyber-home .flow-icon{font-size:30px}
.cyber-home .flow-action strong{display:block;font-size:20px;letter-spacing:.04em}
.cyber-home .flow-action span{color:var(--cc-muted);font-size:13px;line-height:1.5}
.cyber-home .home-section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:11px}
.cyber-home .home-section-title h2{margin:0;font-size:17px;text-transform:uppercase;letter-spacing:.08em}
.cyber-home .active-production-list{display:grid;gap:10px}
.cyber-home .active-production{display:grid;grid-template-columns:minmax(180px,1.2fr) auto auto;align-items:center;gap:14px;padding:16px;border:1px solid rgba(0,245,212,.28);border-radius:14px;background:linear-gradient(90deg,rgba(0,245,212,.08),rgba(14,18,26,.96));box-shadow:0 0 24px rgba(0,245,212,.08)}
.cyber-home .active-production .title{font-size:17px;font-weight:900}
.cyber-home .active-production .meta{font:700 11px/1.4 var(--cc-mono);color:var(--cc-muted);margin-top:4px}
.cyber-home .empty-production{padding:18px;border:1px dashed var(--cc-border-strong);border-radius:14px;color:var(--cc-muted);text-align:center}
.cyber-home .vault{border:1px solid var(--cc-border);border-radius:16px;background:#090d14;overflow:hidden}
.cyber-home .vault summary{cursor:pointer;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:900;list-style:none}
.cyber-home .vault summary::-webkit-details-marker{display:none}
.cyber-home .vault summary::after{content:'ABRIR';font:800 10px/1 var(--cc-mono);color:var(--cc-purple);letter-spacing:.1em}
.cyber-home .vault[open] summary::after{content:'CERRAR'}
.cyber-home .vault-body{padding:0 18px 18px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.cyber-home .vault-tool{padding:14px;border:1px solid var(--cc-border);border-radius:12px;background:#0d121a}
.cyber-home .vault-tool strong{display:block;margin-bottom:5px}
.cyber-home .vault-tool span{font-size:12px;color:var(--cc-muted)}
.cyber-home .home-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:10px}
.cyber-home .home-kpi{padding:12px;border:1px solid var(--cc-border);border-radius:11px;background:#090d14}
.cyber-home .home-kpi strong{font:800 20px/1 var(--cc-mono);display:block;color:#fff}
.cyber-home .home-kpi span{font-size:10px;color:var(--cc-muted);text-transform:uppercase;letter-spacing:.08em}

@media(max-width:900px){
  .cyber-home .home-primary-grid{grid-template-columns:1fr}
  .cyber-home .active-production{grid-template-columns:1fr}
  .cyber-home .vault-body{grid-template-columns:1fr 1fr}
  .cyber-home .home-kpis{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){.cyber-home .vault-body,.cyber-home .home-kpis{grid-template-columns:1fr}}