/* DistroViz Enterprise - Core Styles */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700;800;900&display=swap');

*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',sans-serif;background:#0a0e1a;color:#e2e8f0;overflow:hidden}
.mono{font-family:'JetBrains Mono',monospace}

/* Theme: Light */
html.light body{background:#f8fafc;color:#1e293b}
html.light .grid-bg{background-image:linear-gradient(rgba(99,102,241,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(99,102,241,.04) 1px,transparent 1px)}
html.light header,html.light #playback-bar{background:rgba(255,255,255,.95)!important;border-color:rgba(99,102,241,.1)!important}
html.light #left-sidebar,html.light #detail-panel{background:rgba(255,255,255,.9)!important;border-color:rgba(99,102,241,.1)!important}
html.light .stat-card{background:rgba(248,250,252,.8);border-color:rgba(99,102,241,.12)}
html.light .scenario-card{border-color:rgba(99,102,241,.1);background:rgba(255,255,255,.6)}
html.light .scenario-card:hover{background:rgba(99,102,241,.04)}

/* Scrollbar */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:rgba(15,23,42,0.3)}
::-webkit-scrollbar-thumb{background:rgba(99,102,241,0.3);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(99,102,241,0.5)}

/* Animations */
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInScale{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@keyframes slideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes raceFlash{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes pulse-ring{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.5);opacity:0}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

.fade-in{animation:fadeIn .25s ease-out forwards}
.fade-in-scale{animation:fadeInScale .2s ease-out forwards}
.slide-up{animation:slideUp .3s ease-out forwards}
.race-flash{animation:raceFlash .5s ease-in-out 3}
.pulse-ring{animation:pulse-ring 1.5s ease-out infinite}
.shimmer{background:linear-gradient(90deg,transparent 0%,rgba(99,102,241,.1) 50%,transparent 100%);background-size:200% 100%;animation:shimmer 1.5s infinite}
.spin{animation:spin 1s linear infinite}

/* Tab buttons */
.tab-btn{transition:all .2s;white-space:nowrap}
.tab-btn.active{color:#818cf8;border-color:#6366f1;background:rgba(99,102,241,.08)}
.tab-btn:hover:not(.active){color:#94a3b8;background:rgba(99,102,241,.04)}

/* Control buttons */
.ctrl-btn{transition:all .12s}
.ctrl-btn:hover{background:rgba(99,102,241,.15);transform:scale(1.03)}
.ctrl-btn:active{transform:scale(.95)}

/* Speed buttons */
.speed-btn{transition:all .12s}
.speed-btn.active-speed{background:#6366f1;color:#fff;box-shadow:0 2px 8px rgba(99,102,241,.3)}

/* Canvas */
#topology-canvas{cursor:grab}
#topology-canvas:active{cursor:grabbing}

/* Grid background */
.grid-bg{background-image:linear-gradient(rgba(99,102,241,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(99,102,241,.03) 1px,transparent 1px);background-size:30px 30px}

/* Scenario cards */
.scenario-card{transition:all .2s;border:1px solid rgba(99,102,241,.1)}
.scenario-card:hover{border-color:rgba(99,102,241,.3);background:rgba(99,102,241,.03);transform:translateY(-2px);box-shadow:0 4px 16px rgba(99,102,241,.1)}

/* Range input */
input[type="range"]{-webkit-appearance:none;background:transparent}
input[type="range"]::-webkit-slider-runnable-track{height:4px;background:rgba(99,102,241,.15);border-radius:2px}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#6366f1;margin-top:-5px;cursor:pointer;box-shadow:0 2px 6px rgba(99,102,241,.4)}
input[type="range"]::-webkit-slider-thumb:hover{background:#818cf8;transform:scale(1.2)}

/* Detail panel */
.detail-row{border-bottom:1px solid rgba(99,102,241,.06)}.detail-row:last-child{border-bottom:none}

/* Status badges */
.status-badge{font-size:.6rem;padding:2px 6px;border-radius:9999px;font-weight:600;letter-spacing:.5px}

/* Waterfall */
.waterfall-item{border-left:2px solid rgba(99,102,241,.15);transition:background .15s}
.waterfall-item:hover{background:rgba(99,102,241,.04)}

/* Diff colors */
.diff-add{color:#22c55e;background:rgba(34,197,94,.1)}.diff-remove{color:#ef4444;background:rgba(239,68,68,.1)}.diff-change{color:#f59e0b;background:rgba(245,158,11,.1)}

/* Span bar */
.span-bar{transition:width .3s,opacity .3s}.span-bar:hover{filter:brightness(1.2);z-index:10}

/* Toast */
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:9999;pointer-events:none}
.toast-inner{background:#1e293b;border:1px solid rgba(99,102,241,.25);color:#e2e8f0;padding:10px 18px;border-radius:10px;font-size:13px;box-shadow:0 8px 32px rgba(0,0,0,.4);animation:slideUp .25s ease-out;display:flex;align-items:center;gap:8px}

/* Drop zone */
.drop-zone{border:2px dashed rgba(99,102,241,.2);transition:all .2s;border-radius:12px}
.drop-zone.drag-over{border-color:#6366f1;background:rgba(99,102,241,.06);transform:scale(1.01)}
.drop-zone:hover{border-color:rgba(99,102,241,.35)}

/* Event log */
.log-entry{font-size:11px;border-left:3px solid transparent;transition:background .15s}
.log-entry:hover{background:rgba(99,102,241,.04)}
.log-entry.log-error{border-left-color:#ef4444}
.log-entry.log-timeout{border-left-color:#f59e0b}
.log-entry.log-race{border-left-color:#f59e0b;background:rgba(245,158,11,.04)}
.log-entry.log-request{border-left-color:#6366f1}
.log-entry.log-response{border-left-color:#22c55e}
.log-entry.log-retry{border-left-color:#a855f7}
.log-entry.log-state_change{border-left-color:#06b6d4}

/* Keyboard shortcuts */
kbd{background:rgba(99,102,241,.12);border:1px solid rgba(99,102,241,.18);border-radius:4px;padding:1px 5px;font-size:10px;font-family:'JetBrains Mono',monospace;color:#94a3b8}

/* Sidebar */
.sidebar-section summary{cursor:pointer;list-style:none}
.sidebar-section summary::-webkit-details-marker{display:none}

/* Stats card */
.stat-card{background:rgba(15,23,42,.6);border:1px solid rgba(99,102,241,.08);border-radius:10px;padding:12px 14px;transition:all .2s}
.stat-card:hover{border-color:rgba(99,102,241,.2)}

/* Overlay */
.overlay-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);z-index:50;display:flex;align-items:center;justify-content:center}
.overlay-panel{background:#0f172a;border:1px solid rgba(99,102,241,.2);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.5);animation:fadeInScale .2s ease-out;max-height:85vh;overflow:hidden}
html.light .overlay-panel{background:#ffffff;border-color:rgba(99,102,241,.15);box-shadow:0 24px 64px rgba(0,0,0,.15)}

/* Flame graph */
.flame-bar{transition:all .15s;cursor:pointer;border-radius:2px}
.flame-bar:hover{filter:brightness(1.2);outline:1px solid rgba(255,255,255,.3)}

/* Dependency graph */
.dep-node{transition:all .2s;cursor:pointer}
.dep-node:hover{filter:brightness(1.15)}

/* Annotations */
.annotation-marker{position:absolute;z-index:30;cursor:pointer;transition:all .2s}
.annotation-marker:hover{transform:scale(1.2)}

/* Loading spinner */
.loading-spinner{width:24px;height:24px;border:2px solid rgba(99,102,241,.2);border-top-color:#6366f1;border-radius:50%;animation:spin .6s linear infinite}

/* Format badge */
.format-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:6px;font-size:10px;font-weight:600;letter-spacing:.3px}

/* Responsive improvements */
@media(max-width:768px){
  #left-sidebar{width:100%;position:absolute;z-index:40;height:100%}
  #detail-panel{width:100%;position:absolute;z-index:40;height:100%}
  .tab-btn span{display:none}
  .speed-btn:nth-child(1),.speed-btn:nth-child(6){display:none}
}

/* Focus styles */
input:focus,textarea:focus,select:focus{outline:none;border-color:rgba(99,102,241,.4);box-shadow:0 0 0 3px rgba(99,102,241,.1)}

/* Enterprise feature badges */
.feature-badge{display:inline-flex;align-items:center;gap:3px;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.feature-badge.pro{background:rgba(168,85,247,.15);color:#a855f7;border:1px solid rgba(168,85,247,.2)}
.feature-badge.new{background:rgba(34,197,94,.15);color:#22c55e;border:1px solid rgba(34,197,94,.2)}

/* Connect panel cards */
.connect-card{border:1px solid rgba(99,102,241,.1);border-radius:12px;padding:16px;transition:all .2s;cursor:pointer}
.connect-card:hover{border-color:rgba(99,102,241,.3);background:rgba(99,102,241,.03);transform:translateY(-1px)}
.connect-card.connected{border-color:rgba(34,197,94,.3);background:rgba(34,197,94,.03)}

/* Team avatars */
.avatar{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:white}
.avatar-stack .avatar{margin-left:-8px;border:2px solid #0f172a}
.avatar-stack .avatar:first-child{margin-left:0}