@import"https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@300;400;500;600&family=Sora:wght@200;300;400;500;600;700&display=swap";:root{--bg: #0a0a0c;--surface: #111114;--surface2: #18181c;--border: #222228;--text: #e8e6e3;--text2: #8a8892;--accent-h: 165;--accent: hsl(var(--accent-h), 80%, 55%);--accent-glow: hsl(var(--accent-h), 90%, 45%);--accent2: hsl(280, 70%, 60%);--accent3: hsl(35, 90%, 60%);--danger: hsl(0, 70%, 55%);--done: hsl(145, 60%, 45%);--font-display: "Instrument Serif", serif;--font-body: "Sora", sans-serif;--font-mono: "JetBrains Mono", monospace}*{margin:0;padding:0;box-sizing:border-box}body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:14px;line-height:1.6;overflow-x:hidden}body:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");opacity:.3}a{color:var(--accent);text-decoration:none}button{cursor:pointer;font-family:var(--font-body);border:none;outline:none}.layout{display:flex;min-height:100vh;position:relative;z-index:1}.sidebar{width:240px;background:var(--surface);border-right:1px solid var(--border);padding:24px 0;position:fixed;top:0;left:0;height:100vh;display:flex;flex-direction:column;z-index:10;transition:border-color .3s}.sidebar:hover{border-color:hsla(var(--accent-h),80%,55%,.15)}.sidebar-logo{padding:0 24px 24px;border-bottom:1px solid var(--border);font-family:var(--font-display);font-size:24px;font-weight:400;letter-spacing:-.02em;display:flex;align-items:center;gap:12px}.sidebar-logo .logo-icon{width:36px;height:36px;background:linear-gradient(135deg,#30e8ba1f,#b152e01f);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:#000;font-family:var(--font-body);box-shadow:0 0 20px hsla(var(--accent-h),80%,55%,.15),inset 0 0 20px hsla(var(--accent-h),80%,55%,.05);animation:logoPulse 4s ease-in-out infinite;border:1px solid hsla(var(--accent-h),80%,55%,.2);transition:all .4s cubic-bezier(.16,1,.3,1)}.sidebar-logo:hover .logo-icon{box-shadow:0 0 30px hsla(var(--accent-h),80%,55%,.3),0 0 60px #b152e026;border-color:hsla(var(--accent-h),80%,55%,.4);transform:scale(1.1) rotate(-5deg)}@keyframes logoPulse{0%,to{box-shadow:0 0 20px hsla(var(--accent-h),80%,55%,.2)}50%{box-shadow:0 0 30px hsla(var(--accent-h),80%,55%,.4)}}.sidebar-nav{flex:1;padding:16px 12px;display:flex;flex-direction:column;gap:2px}.nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;color:var(--text2);font-size:13px;font-weight:400;transition:all .3s cubic-bezier(.16,1,.3,1);cursor:pointer;background:none;border:none;width:100%;text-align:left;position:relative;overflow:hidden}.nav-item:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(100px circle at var(--mx, 50%) var(--my, 50%),hsla(var(--accent-h),80%,55%,.08),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}.nav-item:hover:before{opacity:1}.nav-item:hover{background:var(--surface2);color:var(--text);transform:translate(4px)}.nav-item.active{background:hsla(var(--accent-h),60%,50%,.1);color:var(--accent);border-left:2px solid var(--accent);padding-left:10px}.nav-badge{margin-left:auto;background:var(--danger);color:#fff;font-size:10px;font-weight:600;padding:2px 7px;border-radius:100px;font-family:var(--font-mono);animation:badgePulse 2s ease-in-out infinite}@keyframes badgePulse{0%,to{transform:scale(1)}50%{transform:scale(1.15)}}.main-content{flex:1;margin-left:240px;padding:32px;position:relative}.page-header{margin-bottom:32px;animation:fadeIn .6s cubic-bezier(.16,1,.3,1)}.page-header h1{font-family:var(--font-display);font-size:32px;font-weight:400;margin-bottom:4px;background:linear-gradient(135deg,var(--text) 40%,var(--accent) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.page-header p{color:var(--text2);font-size:13px;font-weight:300;letter-spacing:.02em}@keyframes fadeIn{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes glowLine{0%{transform:scaleX(0);opacity:0}50%{opacity:1}to{transform:scaleX(1);opacity:1}}@keyframes countUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.spin{animation:spin 1s linear infinite}.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px;margin-bottom:16px;transition:all .4s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden;animation:slideUp .5s cubic-bezier(.16,1,.3,1) both}.card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%),hsla(var(--accent-h),80%,55%,.04),transparent 40%);opacity:0;transition:opacity .4s;pointer-events:none}.card:hover:before{opacity:1}.card:hover{border-color:hsla(var(--accent-h),80%,55%,.3);transform:translateY(-2px);box-shadow:0 12px 40px -12px hsla(var(--accent-h),80%,55%,.1)}.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.card-title{font-size:12px;font-weight:500;color:var(--text2);text-transform:uppercase;letter-spacing:.1em;font-family:var(--font-mono)}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:24px}.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:24px;transition:all .4s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden;animation:slideUp .5s cubic-bezier(.16,1,.3,1) both}.stat-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%),hsla(var(--accent-h),80%,55%,.06),transparent 50%);opacity:0;transition:opacity .4s;pointer-events:none}.stat-card:hover:before{opacity:1}.stat-card:after{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent2));transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.16,1,.3,1)}.stat-card:hover:after{transform:scaleX(1)}.stat-card:hover{border-color:hsla(var(--accent-h),80%,55%,.25);transform:translateY(-4px) scale(1.02);box-shadow:0 16px 48px -16px hsla(var(--accent-h),80%,55%,.12)}.stat-clickable{cursor:pointer}.stat-clickable:hover .click-hint{opacity:1!important}.stat-card:nth-child(1){animation-delay:.1s}.stat-card:nth-child(2){animation-delay:.2s}.stat-card:nth-child(3){animation-delay:.3s}.stat-card:nth-child(4){animation-delay:.4s}.stat-value{font-size:32px;font-weight:700;font-family:var(--font-mono);transition:all .4s cubic-bezier(.16,1,.3,1);animation:countUp .8s cubic-bezier(.16,1,.3,1) both}.stat-card:hover .stat-value{transform:scale(1.3);transform-origin:left center;text-shadow:0 0 20px currentColor}.stat-label{font-size:12px;color:var(--text2);margin-top:6px;font-weight:300;transition:color .3s}.stat-card:hover .stat-label{color:var(--text)}.risk-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:100px;font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.05em;transition:all .3s}.risk-low{background:#2eb8671f;color:var(--done)}.risk-medium{background:#f2930d1f;color:var(--accent3)}.risk-high{background:#d926261f;color:var(--danger)}.risk-badge:hover{transform:scale(1.1);box-shadow:0 0 12px currentColor}.status-badge{padding:3px 10px;border-radius:100px;font-family:var(--font-mono);font-size:11px;font-weight:500;transition:all .3s}.status-pending{background:#f2930d1f;color:var(--accent3)}.status-approved{background:#2eb8671f;color:var(--done)}.status-denied{background:#d926261f;color:var(--danger)}.status-auto{background:hsla(var(--accent-h),60%,50%,.12);color:var(--accent)}.status-badge:hover{transform:scale(1.08)}.btn{padding:8px 16px;border-radius:8px;font-size:13px;font-weight:500;transition:all .3s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden}.btn:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,transparent,hsla(0,0%,100%,.1));opacity:0;transition:opacity .3s}.btn:hover:after{opacity:1}.btn-approve{background:var(--done);color:#000}.btn-approve:hover{transform:translateY(-2px);box-shadow:0 8px 24px -8px var(--done)}.btn-deny{background:var(--danger);color:#fff}.btn-deny:hover{transform:translateY(-2px);box-shadow:0 8px 24px -8px var(--danger)}.btn-outline{background:none;border:1px solid var(--border);color:var(--text2)}.btn-outline:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse}th{text-align:left;padding:10px 16px;font-size:11px;color:var(--text2);text-transform:uppercase;letter-spacing:.1em;font-family:var(--font-mono);border-bottom:1px solid var(--border)}td{padding:12px 16px;border-bottom:1px solid var(--border);font-size:13px;transition:all .3s}tr{transition:all .3s}tr:hover td{background:hsla(var(--accent-h),80%,55%,.04);border-bottom-color:hsla(var(--accent-h),80%,55%,.15)}tr:hover{transform:scale(1.005)}.approval-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:24px;margin-bottom:12px;transition:all .4s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden;animation:slideUp .5s cubic-bezier(.16,1,.3,1) both}.approval-card:before{content:"";position:absolute;top:0;left:0;width:3px;height:100%}.approval-card:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%),hsla(var(--accent-h),80%,55%,.04),transparent 40%);opacity:0;transition:opacity .4s;pointer-events:none}.approval-card:hover:after{opacity:1}.approval-card:hover{border-color:hsla(var(--accent-h),80%,55%,.2);transform:translateY(-2px);box-shadow:0 12px 40px -12px #0000004d}.approval-card.risk-border-low:before{background:var(--done)}.approval-card.risk-border-medium:before{background:var(--accent3)}.approval-card.risk-border-high:before{background:var(--danger);box-shadow:0 0 12px var(--danger)}.approval-actions{display:flex;gap:8px;margin-top:16px}.approval-meta{display:flex;gap:16px;margin-top:12px;flex-wrap:wrap}.meta-item{font-size:12px;color:var(--text2);font-family:var(--font-mono);transition:color .3s}.meta-item span,.approval-card:hover .meta-item{color:var(--text)}.approval-card:hover .meta-item span{color:var(--accent)}.scope-item{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border:1px solid var(--border);border-radius:10px;margin-bottom:8px;transition:all .3s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden}.scope-item:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(300px circle at var(--mx, 0) var(--my, 0),hsla(280,70%,60%,.06),transparent 50%);opacity:0;transition:opacity .4s;pointer-events:none}.scope-item:hover:before{opacity:1}.scope-item:hover{border-color:var(--accent2);transform:translate(4px);box-shadow:-4px 0 0 var(--accent2)}.scope-raw{font-family:var(--font-mono);font-size:11px;color:var(--text2);margin-top:4px}.chain-status{display:flex;align-items:center;gap:8px;padding:14px 18px;border-radius:10px;margin-bottom:16px;font-family:var(--font-mono);font-size:13px;transition:all .3s;animation:slideUp .4s cubic-bezier(.16,1,.3,1) both}.chain-valid{background:#2eb86714;color:var(--done);border:1px solid hsla(145,60%,45%,.2)}.chain-invalid{background:#d9262614;color:var(--danger);border:1px solid hsla(0,70%,50%,.2)}.chain-status:hover{transform:scale(1.01);box-shadow:0 0 20px currentColor}.ws-dot{width:8px;height:8px;border-radius:50%;display:inline-block}.ws-connected{background:var(--done);box-shadow:0 0 8px var(--done);animation:wsPulse 2s ease-in-out infinite}@keyframes wsPulse{0%,to{box-shadow:0 0 8px var(--done)}50%{box-shadow:0 0 16px var(--done),0 0 32px #2eb8674d}}.ws-disconnected{background:var(--danger)}.countdown{font-family:var(--font-mono);font-size:20px;font-weight:600;color:var(--accent3);transition:all .3s}.countdown.urgent{color:var(--danger);animation:urgentPulse 1s ease-in-out infinite}@keyframes urgentPulse{0%,to{opacity:1;text-shadow:none}50%{opacity:.6;text-shadow:0 0 12px var(--danger)}}.trust-bar{width:100%;height:6px;background:var(--surface2);border-radius:3px;overflow:hidden;margin-top:8px}.trust-fill{height:100%;border-radius:3px;transition:width .5s ease}.scenario-card{cursor:pointer;transition:all .4s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden}.scenario-card:after{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent2),var(--accent3));transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.16,1,.3,1)}.scenario-card:hover:after{transform:scaleX(1)}.scenario-card:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 16px 48px -16px #0006}.result-item{padding:12px 0;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;transition:all .3s;animation:slideUp .3s cubic-bezier(.16,1,.3,1) both}.result-item:hover{background:hsla(var(--accent-h),80%,55%,.03);padding-left:8px}.audit-entry{transition:all .3s cubic-bezier(.16,1,.3,1)}.audit-entry:hover{transform:translate(4px);border-color:hsla(var(--accent-h),80%,55%,.3)}.mobile-topbar{display:none}@media (max-width: 768px){.mobile-topbar{display:flex;align-items:center;gap:12px;position:fixed;top:0;left:0;right:0;height:56px;background:var(--surface);border-bottom:1px solid var(--border);padding:0 16px;z-index:20}.hamburger{background:none;border:none;cursor:pointer;padding:6px;display:flex;flex-direction:column;gap:5px;flex-shrink:0}.hamburger span{display:block;width:20px;height:2px;background:var(--text);border-radius:2px;transition:all .3s cubic-bezier(.16,1,.3,1)}.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}.mobile-logo-text{font-family:var(--font-display);font-size:20px;flex:1}.sidebar{transform:translate(-100%);transition:transform .3s cubic-bezier(.16,1,.3,1);z-index:20;top:0}.sidebar.sidebar-open{transform:translate(0)}.sidebar-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;z-index:15;animation:fadeIn .2s both}.main-content{margin-left:0;padding:72px 16px 16px}.page-header h1{font-size:24px}.stats-grid{grid-template-columns:repeat(2,1fr);gap:10px}.stat-value{font-size:24px}.scenario-card{width:100%}.approval-card-header{flex-direction:column!important;align-items:flex-start!important;gap:8px!important}.countdown{font-size:16px!important;align-self:flex-end}.approval-meta{gap:8px}.approval-actions{flex-wrap:wrap}.approval-actions .btn{flex:1;justify-content:center}.audit-detail-grid{grid-template-columns:1fr!important}.audit-entry .card{padding:12px}.chain-status{font-size:11px}.result-item{flex-wrap:wrap;gap:8px}.scope-item{flex-direction:column;align-items:flex-start;gap:8px}.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}.card{padding:14px}.approval-card{padding:16px}}.page-header:after{content:"";display:block;height:1px;background:linear-gradient(90deg,var(--accent),var(--accent2),transparent 65%);margin-top:14px;opacity:.55;transform-origin:left;animation:headerLine 1s cubic-bezier(.16,1,.3,1) both}@keyframes headerLine{0%{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:.55}}.main-content:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0%,var(--accent) 35%,var(--accent2) 65%,transparent 100%);animation:mainTopGlow 5s ease-in-out infinite;pointer-events:none}@keyframes mainTopGlow{0%,to{opacity:.15}50%{opacity:.55;box-shadow:0 0 12px var(--accent)}}.sidebar:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent2));opacity:.6;animation:sidebarTopGlow 4s ease-in-out infinite}@keyframes sidebarTopGlow{0%,to{opacity:.4}50%{opacity:.85;box-shadow:0 0 16px var(--accent)}}.card:hover{border-color:hsla(var(--accent-h),80%,55%,.4)!important;box-shadow:0 12px 40px -12px hsla(var(--accent-h),80%,55%,.18),0 0 0 1px hsla(var(--accent-h),80%,55%,.06)!important}.stat-card:before{content:"";position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,hsla(var(--accent-h),80%,55%,.04),transparent);animation:shimmer 5s ease-in-out infinite;pointer-events:none}@keyframes shimmer{0%{left:-100%}50%{left:150%}to{left:150%}}.mobile-topbar:after{content:"";position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent),var(--accent2),transparent);opacity:.5}
