@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,300&family=JetBrains+Mono:wght@300;400;500&display=swap');
:root{
--bg:#0a0a0a;--surface:#111111;--surface2:#151515;--surface3:#1a1a1a;
--border:rgba(255,255,255,0.06);--border-bright:rgba(255,255,255,0.12);
--cyan:#06b6d4;--blue:#3b82f6;--violet:#8b5cf6;--emerald:#10b981;
--amber:#f59e0b;--rose:#f43f5e;--white:#f8fafc;--muted:#94a3b8;
--glass:rgba(17,17,17,0.75);--glow-cyan:0 0 20px rgba(6,182,212,0.15);
--glow-blue:0 0 20px rgba(59,130,246,0.15);
}
*{margin:0;padding:0;box-sizing:border-box;}
body{background:var(--bg);color:var(--white);font-family:'DM Sans',sans-serif;overflow-x:hidden;min-height:100vh;}
body::before{content:'';position:fixed;inset:0;background:
  radial-gradient(ellipse at 20% 20%,rgba(6,182,212,0.03) 0%,transparent 50%),
  radial-gradient(ellipse at 80% 80%,rgba(139,92,246,0.03) 0%,transparent 50%),
  linear-gradient(rgba(255,255,255,0.01) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,0.01) 1px,transparent 1px);
  background-size:100% 100%,100% 100%,60px 60px,60px 60px;pointer-events:none;z-index:0;}
.mono{font-family:'JetBrains Mono',monospace;}
.glass{background:var(--glass);backdrop-filter:blur(16px);border:1px solid var(--border);}
.glass2{background:rgba(21,21,21,0.8);backdrop-filter:blur(12px);border:1px solid var(--border);}
.glass-bright{background:rgba(21,21,21,0.9);backdrop-filter:blur(20px);border:1px solid var(--border-bright);}
.glow-cyan{box-shadow:var(--glow-cyan);}
.glow-blue{box-shadow:var(--glow-blue);}
.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px;transition:all 0.3s;}
.card:hover{border-color:var(--border-bright);transform:translateY(-1px);}
.btn{padding:8px 16px;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;transition:all 0.2s;border:1px solid var(--border);background:var(--surface2);color:var(--white);}
.btn:hover{border-color:var(--cyan);box-shadow:var(--glow-cyan);}
.btn-primary{background:linear-gradient(135deg,var(--cyan),var(--blue));border:none;color:#fff;}
.btn-primary:hover{opacity:0.9;box-shadow:0 0 24px rgba(6,182,212,0.3);}
.btn-violet{background:linear-gradient(135deg,var(--violet),#a855f7);border:none;color:#fff;}
.btn-amber{background:var(--amber);border:none;color:#000;}
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:500;}
.chip{display:inline-flex;align-items:center;padding:4px 12px;border-radius:16px;font-size:12px;cursor:pointer;border:1px solid var(--border);background:var(--surface2);color:var(--muted);transition:all 0.2s;}
.chip:hover,.chip.active{border-color:var(--cyan);color:var(--cyan);background:rgba(6,182,212,0.1);}
.input{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:8px 14px;color:var(--white);font-size:13px;outline:none;transition:border-color 0.2s;}
.input:focus{border-color:var(--cyan);}
.ticker-wrap{overflow:hidden;white-space:nowrap;}
.ticker-content{display:inline-block;animation:tickerScroll 60s linear infinite;}
@keyframes tickerScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes countUp{from{opacity:0}to{opacity:1}}
@keyframes glow{0%,100%{box-shadow:0 0 8px rgba(6,182,212,0.2)}50%{box-shadow:0 0 20px rgba(6,182,212,0.4)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes thinking{0%,80%,100%{opacity:0.3}40%{opacity:1}}
.animate-in{animation:fadeIn 0.4s ease-out both;}
.pulse-dot{width:8px;height:8px;border-radius:50%;animation:pulse 2s ease-in-out infinite;}
.shimmer{background:linear-gradient(90deg,var(--surface) 25%,var(--surface2) 50%,var(--surface) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;}
.section{display:none;position:relative;z-index:1;}
.section.active{display:block;}
.nav-link{position:relative;padding:8px 12px;font-size:12.5px;font-weight:500;color:var(--muted);cursor:pointer;transition:color 0.2s;white-space:nowrap;}
.nav-link:hover{color:var(--white);}
.nav-link.active{color:var(--cyan);}
.nav-link.active::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:60%;height:2px;background:var(--cyan);border-radius:2px;}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(8px);z-index:100;display:none;align-items:center;justify-content:center;}
.modal-overlay.show{display:flex;}
.modal{background:var(--surface);border:1px solid var(--border-bright);border-radius:16px;max-width:900px;width:95%;max-height:85vh;overflow-y:auto;padding:28px;animation:fadeIn 0.3s ease-out;}
.drawer{position:fixed;top:0;right:0;width:420px;height:100vh;background:var(--surface);border-left:1px solid var(--border);z-index:90;transform:translateX(100%);transition:transform 0.3s ease;overflow-y:auto;padding:24px;}
.drawer.open{transform:translateX(0);}
.gauge{position:relative;width:120px;height:120px;}
.table-container{overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:12.5px;}
th{text-align:left;padding:10px 12px;color:var(--muted);font-weight:500;border-bottom:1px solid var(--border);font-size:11px;text-transform:uppercase;letter-spacing:0.5px;}
td{padding:10px 12px;border-bottom:1px solid var(--border);color:var(--white);}
tr:hover td{background:rgba(6,182,212,0.03);}
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--surface3);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:#333;}
.tag-stage1{background:rgba(16,185,129,0.15);color:#10b981;padding:2px 8px;border-radius:10px;font-size:11px;}
.tag-stage2{background:rgba(245,158,11,0.15);color:#f59e0b;padding:2px 8px;border-radius:10px;font-size:11px;}
.tag-stage3{background:rgba(244,63,94,0.15);color:#f43f5e;padding:2px 8px;border-radius:10px;font-size:11px;}
.tag-htm{background:rgba(59,130,246,0.15);color:#3b82f6;padding:2px 8px;border-radius:10px;font-size:11px;}
.tag-afs{background:rgba(139,92,246,0.15);color:#8b5cf6;padding:2px 8px;border-radius:10px;font-size:11px;}
.tag-fvtpl{background:rgba(6,182,212,0.15);color:#06b6d4;padding:2px 8px;border-radius:10px;font-size:11px;}
canvas{max-width:100%;}

html{scroll-behavior:smooth;}
.chart-shell{position:relative;width:100%;height:220px;min-height:220px;max-height:220px;overflow:hidden;}
.chart-shell-lg{height:280px;min-height:280px;max-height:280px;}
.chart-shell-sm{height:170px;min-height:170px;max-height:170px;}
.chart-shell canvas,.chart-canvas{display:block !important;width:100% !important;height:100% !important;max-height:100% !important;}
#ontologyCanvas{display:block;width:100%;height:100%;max-width:none !important;max-height:none !important;}
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after{animation:none !important;transition:none !important;scroll-behavior:auto !important;}
.table-sticky thead th{position:sticky;top:0;background:var(--surface);z-index:2;}
@media (max-width: 1024px){
  .drawer{width:min(92vw,420px);} 
}
@media (max-width: 768px){
  .chart-shell-lg{height:240px;min-height:240px;max-height:240px;}
  .chart-shell{height:200px;min-height:200px;max-height:200px;}
  .chart-shell-sm{height:150px;min-height:150px;max-height:150px;}
}


.metric-card{cursor:pointer;position:relative;overflow:hidden;}
.metric-card::after{content:'';position:absolute;inset:auto -20% -60% auto;width:120px;height:120px;background:radial-gradient(circle, rgba(6,182,212,0.15), transparent 65%);pointer-events:none;}
.subtle-panel{background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:10px;}
.section-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;margin-bottom:12px;}
.control-label{font-size:11px;color:var(--muted);margin-bottom:4px;display:block;}
.tiny-btn{padding:4px 8px;border-radius:8px;border:1px solid var(--border);background:var(--surface2);font-size:10px;cursor:pointer;transition:all .2s;}
.tiny-btn:hover{border-color:var(--cyan);color:var(--cyan);}
.watch-pill{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;background:rgba(245,158,11,0.12);color:var(--amber);font-size:10px;}
.entity-row{display:flex;justify-content:space-between;gap:12px;padding:8px 10px;border-radius:8px;border:1px solid var(--border);background:rgba(255,255,255,0.015);margin-bottom:6px;}
.scenario-save-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:12px;}
.audit-clickable tbody tr{cursor:pointer;}
.legend-dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:6px;}


.brand-lockup{min-width:280px;}
.brand-logo-frame{width:38px;height:38px;border-radius:10px;padding:5px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0.02));border:1px solid rgba(255,255,255,0.08);box-shadow:0 0 0 1px rgba(255,255,255,0.03) inset,0 8px 24px rgba(0,0,0,0.35),0 0 24px rgba(59,130,246,0.08);}
.brand-logo-img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 0 8px rgba(244,63,94,0.14));}
.hero-powered-by{border-color:rgba(6,182,212,0.12);box-shadow:0 0 0 1px rgba(6,182,212,0.05) inset, 0 8px 30px rgba(0,0,0,0.28);}
.footer-brand-mark{width:34px;height:34px;border-radius:9px;}
@media (max-width: 960px){
  .brand-lockup{min-width:auto;max-width:230px;}
  .brand-lockup .text-[10px]{letter-spacing:0.12em !important;line-height:1.2;}
}
@media (max-width: 640px){
  .brand-lockup{margin-right:8px;}
  .brand-lockup > div:last-child{max-width:135px;}
  .brand-lockup .text-[10px]{font-size:9px !important;}
}


.logic-template-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;}
.logic-template-card{padding:14px;border-radius:12px;border:1px solid var(--border);background:linear-gradient(180deg,rgba(255,255,255,0.025),rgba(255,255,255,0.015));cursor:pointer;transition:all .2s;min-height:148px;}
.logic-template-card:hover,.logic-template-card.active{border-color:rgba(6,182,212,0.45);box-shadow:0 0 0 1px rgba(6,182,212,0.08) inset, 0 10px 28px rgba(0,0,0,0.25);transform:translateY(-1px);}
.logic-mini-chip{font-size:10px;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,0.05);color:#cbd5e1;border:1px solid rgba(255,255,255,0.06);}
.logic-rule-card{padding:12px;border-radius:10px;border:1px solid var(--border);background:rgba(255,255,255,0.02);margin-bottom:10px;cursor:pointer;transition:all .2s;}
.logic-rule-card:hover,.logic-rule-card.active{border-color:rgba(6,182,212,0.42);box-shadow:0 0 0 1px rgba(6,182,212,0.08) inset;}
.logic-anomaly-row{cursor:pointer;transition:all .2s;}
.logic-anomaly-row:hover{border-color:rgba(6,182,212,0.28);background:rgba(6,182,212,0.05);}
.logic-block-btn{padding:8px 12px;border-radius:10px;border:1px dashed rgba(255,255,255,0.12);background:rgba(255,255,255,0.02);font-size:11px;cursor:pointer;transition:all .2s;}
.logic-block-btn:hover{border-color:rgba(6,182,212,0.45);color:var(--cyan);background:rgba(6,182,212,0.06);}
.logic-lane{border:1px solid rgba(255,255,255,0.06);background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));border-radius:14px;padding:14px;min-height:260px;}
.logic-node-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.logic-node{min-width:122px;padding:10px 12px;border-radius:12px;border:1px solid rgba(6,182,212,0.16);background:rgba(6,182,212,0.07);font-size:11px;font-weight:600;box-shadow:0 0 0 1px rgba(255,255,255,0.03) inset;}
.logic-arrow{color:var(--muted);font-size:16px;line-height:1;}
.logic-stat-card{padding:10px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:11px;}
.logic-eval-card{padding:14px;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.015));border:1px solid rgba(255,255,255,0.06);}
.logic-eval-value{font-size:28px;line-height:1.1;font-weight:700;margin-top:6px;font-family:'JetBrains Mono',monospace;}
@media (max-width: 900px){
  .logic-node{min-width:unset;flex:1 1 auto;}
}