/* ═══════════════════════════════════════════════════════════════
   Nova SDLC Architect – Rich Premium UI
   Color system: vibrant indigo-purple with clear visual hierarchy
═══════════════════════════════════════════════════════════════ */

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

/* ── Design tokens ───────────────────────────────────────────── */
:root {
  /* Backgrounds – rich indigo-slate (NOT flat black) */
  --bg-0:    #0f1117;   /* deepest — only for code/log backgrounds */
  --bg-1:    #13151f;   /* base page background */
  --bg-2:    #1a1d2e;   /* sidebar, header */
  --bg-3:    #20243a;   /* cards */
  --bg-4:    #272c47;   /* card hover, inputs */
  --bg-5:    #2f3554;   /* highlighted elements */
  --bg-6:    #384065;   /* strong highlight */

  /* Borders – noticeably visible */
  --border:       rgba(130,150,220,0.16);
  --border-md:    rgba(130,150,220,0.28);
  --border-hi:    rgba(99,160,255,0.55);

  /* Text – high contrast */
  --tx-1: #f0f4ff;
  --tx-2: #c2ccec;
  --tx-3: #8d9dc8;
  --tx-4: #566091;

  /* Accents – vivid */
  --blue:    #5b9dff;
  --blue-d:  #2563eb;
  --blue-x:  rgba(91,157,255,0.15);
  --green:   #2ee8a5;
  --green-d: #059669;
  --green-x: rgba(46,232,165,0.12);
  --yellow:  #ffd166;
  --yellow-x:rgba(255,209,102,0.12);
  --red:     #ff6b81;
  --red-x:   rgba(255,107,129,0.12);
  --purple:  #b590ff;
  --purple-d:#7c3aed;
  --purple-x:rgba(181,144,255,0.13);
  --cyan:    #38e8ff;
  --cyan-x:  rgba(56,232,255,0.11);
  --orange:  #ff9f45;
  --pink:    #f472b6;

  /* Gradient presets */
  --grad-blue:   linear-gradient(135deg,#2563eb,#5b9dff);
  --grad-green:  linear-gradient(135deg,#047857,#2ee8a5);
  --grad-purple: linear-gradient(135deg,#7c3aed,#b590ff);
  --grad-yellow: linear-gradient(135deg,#b45309,#ffd166);
  --grad-red:    linear-gradient(135deg,#9f1239,#ff6b81);
  --grad-cyan:   linear-gradient(135deg,#0e7490,#38e8ff);
  --grad-orange: linear-gradient(135deg,#c2410c,#ff9f45);
  /* Card fill – noticeably different from page background */
  --grad-card:   linear-gradient(160deg,#22273e 0%,#1d2135 100%);
  --grad-sidebar:linear-gradient(180deg,#1c2040 0%,#161928 60%,#131726 100%);
  /* Page aurora glow */
  --grad-page:   
    radial-gradient(ellipse 90% 50% at 20% 0%,rgba(91,157,255,0.12) 0%,transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 10%,rgba(181,144,255,0.10) 0%,transparent 55%),
    radial-gradient(ellipse 100% 80% at 50% 100%,rgba(46,232,165,0.04) 0%,transparent 70%);

  /* Shadows */
  --sh-sm: 0 1px 4px rgba(0,0,0,.6),0 1px 2px rgba(0,0,0,.5);
  --sh-md: 0 4px 16px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.4),
           inset 0 1px 0 rgba(255,255,255,.05);
  --sh-lg: 0 10px 40px rgba(0,0,0,.65),0 4px 10px rgba(0,0,0,.45),
           inset 0 1px 0 rgba(255,255,255,.06);
  --sh-blue: 0 0 0 1px rgba(91,157,255,.35),0 4px 20px rgba(91,157,255,.20);
  --sh-green:0 0 0 1px rgba(46,232,165,.30),0 4px 20px rgba(46,232,165,.15);
  --sh-purple:0 0 0 1px rgba(181,144,255,.30),0 4px 20px rgba(181,144,255,.15);
  --sh-glow: 0 0 32px rgba(91,157,255,.30);

  --radius: 12px;
  --radius-lg: 16px;
  --radius-sm: 8px;
}

/* ── Reset / Base ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{
  height:100%;font-family:'Inter',system-ui,sans-serif;
  background:var(--bg-1);color:var(--tx-1);font-size:14px;line-height:1.55;
  background-image:var(--grad-page);
  background-attachment:fixed;
}
a{text-decoration:none;color:inherit}
button{cursor:pointer;font-family:inherit;outline:none}
select,input,textarea{font-family:inherit}
::selection{background:rgba(91,157,255,.30);color:var(--tx-1)}

/* ── Scrollbar ────────────────────────────────────────────────── */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--bg-5);border-radius:100px}
::-webkit-scrollbar-thumb:hover{background:var(--bg-6)}

/* ── Layout ───────────────────────────────────────────────────── */
.app-layout{display:flex;height:100vh;overflow:hidden}
.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg-1)}

/* ── Sidebar ──────────────────────────────────────────────────── */
.sidebar{
  width:252px;min-width:252px;
  background:var(--grad-sidebar);
  border-right:1px solid var(--border-md);
  display:flex;flex-direction:column;overflow:hidden;
  position:relative;
  box-shadow:4px 0 24px rgba(0,0,0,.4);
}
/* Top aurora line */
.sidebar::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--purple),var(--blue),var(--cyan));
  opacity:.7;z-index:10;
}
.sidebar-logo{
  display:flex;align-items:center;gap:12px;padding:20px 16px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(135deg,rgba(91,157,255,.06),rgba(181,144,255,.04));
}
.logo-icon{
  width:40px;height:40px;border-radius:12px;flex-shrink:0;
  background:var(--grad-purple);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:18px;
  box-shadow:0 4px 16px rgba(181,144,255,.40),inset 0 1px 0 rgba(255,255,255,.2);
}
.logo-title{font-size:.9rem;font-weight:700;color:var(--tx-1);letter-spacing:-.02em}
.logo-sub{
  font-size:.63rem;color:var(--purple);margin-top:2px;font-weight:500;
  letter-spacing:.04em;text-transform:uppercase;
}

.sidebar-section{padding:10px 14px 4px}
.sidebar-label{
  display:block;font-size:.62rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;color:var(--tx-4);margin-bottom:5px;
}
.sidebar-status{
  padding:7px 16px;border-bottom:1px solid var(--border);
  background:rgba(91,157,255,.04);
}

.sidebar-nav{flex:0 0 auto;padding:8px 10px;display:flex;flex-direction:column;gap:1px}
.nav-link{
  display:flex;align-items:center;gap:10px;
  padding:9px 10px;border-radius:var(--radius-sm);
  font-size:.8rem;color:var(--tx-3);
  transition:all .15s;position:relative;
}
.nav-link:hover{background:rgba(255,255,255,.05);color:var(--tx-2)}
.nav-link.active{
  background:linear-gradient(90deg,rgba(91,157,255,.18),rgba(91,157,255,.06));
  color:var(--blue);font-weight:600;
  border:1px solid rgba(91,157,255,.18);
}
.nav-link.active::before{
  content:'';position:absolute;left:-1px;top:18%;bottom:18%;
  width:3px;background:var(--grad-blue);border-radius:0 3px 3px 0;
}
.nav-link i{width:16px;font-size:.8rem;text-align:center}

.sidebar-log-section{
  flex:1;display:flex;flex-direction:column;
  padding:8px 10px;overflow:hidden;min-height:0;
}
.pipeline-log-pane{
  flex:1;overflow-y:auto;
  background:var(--bg-0);
  border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:6px;font-family:'JetBrains Mono',monospace;
  font-size:.62rem;line-height:1.65;min-height:0;
}
.log-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:1px 0}
.log-line.info    {color:var(--tx-4)}
.log-line.success {color:var(--green)}
.log-line.warn    {color:var(--yellow)}
.log-line.error   {color:var(--red)}
.log-line.progress{color:var(--cyan)}

.sidebar-footer{padding:12px;border-top:1px solid var(--border)}

/* ── Header ───────────────────────────────────────────────────── */
.app-header{
  height:56px;display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;
  border-bottom:1px solid var(--border-md);
  background:linear-gradient(90deg,var(--bg-2) 0%,var(--bg-3) 60%,var(--bg-2) 100%);
  flex-shrink:0;
  box-shadow:0 2px 12px rgba(0,0,0,.35);
}

/* ── Views ────────────────────────────────────────────────────── */
.view-panel{flex:1;overflow-y:auto;background:var(--bg-1)}
.hidden{display:none!important}

/* ── Empty state ─────────────────────────────────────────────── */
.empty-state{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;height:100%;min-height:400px;
  gap:14px;padding:32px;text-align:center;
}

/* ── Hero card ────────────────────────────────────────────────── */
.hero-card{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:18px;padding:72px 32px;
  text-align:center;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%,rgba(91,157,255,.10),transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 80%,rgba(181,144,255,.07),transparent 60%);
}
.hero-icon{
  width:96px;height:96px;border-radius:24px;
  background:linear-gradient(135deg,rgba(91,157,255,.25),rgba(181,144,255,.18));
  border:1px solid rgba(91,157,255,.35);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--sh-blue),0 0 80px rgba(91,157,255,.12);
}

/* ── Cards ────────────────────────────────────────────────────── */
.card{
  background:var(--grad-card);
  border:1px solid var(--border-md);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--sh-md);
  transition:box-shadow .2s,border-color .2s;
  position:relative;
}
/* Top accent line on cards */
.card::before{
  content:'';position:absolute;top:0;left:16px;right:16px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(91,157,255,.4),transparent);
}
.card:hover{box-shadow:var(--sh-lg);border-color:var(--border-hi)}
.card-header{
  display:flex;align-items:center;gap:9px;
  padding:13px 16px;border-bottom:1px solid var(--border);
  font-size:.8rem;font-weight:600;color:var(--tx-1);
  background:rgba(255,255,255,.025);
}

/* Stat cards */
.stat-card{
  background:linear-gradient(135deg,var(--bg-4),var(--bg-3));
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;display:flex;flex-direction:column;gap:6px;
  box-shadow:var(--sh-sm);position:relative;overflow:hidden;
  transition:transform .15s,box-shadow .15s;
}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
.stat-card::after{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--grad-blue);opacity:.6;
}
.stat-label{font-size:.68rem;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--tx-3)}
.stat-value{font-size:1.65rem;font-weight:700;color:var(--tx-1);line-height:1.1;letter-spacing:-.02em}

/* KPI cards (dashboard) */
.kpi-card{
  background:var(--grad-card);border:1px solid var(--border);
  border-radius:var(--radius);padding:14px 16px;
  display:flex;align-items:center;gap:14px;
  box-shadow:var(--sh-sm);transition:all .15s;position:relative;overflow:hidden;
}
.kpi-card:hover{box-shadow:var(--sh-md);border-color:var(--border-md)}
.kpi-icon{
  width:44px;height:44px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;
}
.kpi-icon.blue  {background:var(--blue-x);color:var(--blue);border:1px solid rgba(79,142,247,.2)}
.kpi-icon.green {background:var(--green-x);color:var(--green);border:1px solid rgba(52,211,153,.2)}
.kpi-icon.purple{background:var(--purple-x);color:var(--purple);border:1px solid rgba(167,139,250,.2)}
.kpi-icon.yellow{background:var(--yellow-x);color:var(--yellow);border:1px solid rgba(251,191,36,.2)}
.kpi-icon.cyan  {background:var(--cyan-x);color:var(--cyan);border:1px solid rgba(34,211,238,.2)}
.kpi-icon.red   {background:var(--red-x);color:var(--red);border:1px solid rgba(248,113,113,.2)}
.kpi-info{flex:1;min-width:0}
.kpi-value{font-size:1.5rem;font-weight:700;color:var(--tx-1);line-height:1;letter-spacing:-.02em}
.kpi-label{font-size:.7rem;color:var(--tx-3);margin-top:3px}
.kpi-trend{font-size:.68rem;font-weight:500;display:flex;align-items:center;gap:3px;margin-top:4px}
.kpi-trend.up   {color:var(--green)}
.kpi-trend.flat {color:var(--tx-4)}

/* ── Buttons ──────────────────────────────────────────────────── */
.btn-primary{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 18px;border-radius:var(--radius-sm);border:none;
  background:var(--grad-blue);
  color:#fff;font-size:.8rem;font-weight:600;
  box-shadow:0 3px 14px rgba(91,157,255,.45),inset 0 1px 0 rgba(255,255,255,.20);
  transition:all .18s;letter-spacing:.01em;
}
.btn-primary:hover{
  box-shadow:0 6px 28px rgba(91,157,255,.60),inset 0 1px 0 rgba(255,255,255,.25);
  transform:translateY(-2px);filter:brightness(1.1);
}
.btn-primary:active{transform:translateY(0);box-shadow:0 2px 8px rgba(91,157,255,.35)}
.btn-primary:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}

.btn-secondary{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 16px;border-radius:var(--radius-sm);
  border:1px solid var(--border-md);
  background:linear-gradient(135deg,var(--bg-5),var(--bg-4));
  color:var(--tx-2);font-size:.8rem;font-weight:500;
  transition:all .15s;box-shadow:var(--sh-sm);
}
.btn-secondary:hover{background:var(--bg-6);color:var(--tx-1);border-color:rgba(91,157,255,.4)}
.btn-secondary.active{border-color:var(--border-hi);color:var(--blue);background:var(--blue-x)}

.btn-danger{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 18px;border-radius:var(--radius-sm);border:none;
  background:var(--grad-red);color:#fff;font-size:.8rem;font-weight:600;
  box-shadow:0 3px 12px rgba(255,107,129,.30);transition:all .15s;
}
.btn-danger:hover{box-shadow:0 6px 20px rgba(255,107,129,.45);transform:translateY(-2px)}

.btn-success{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 18px;border-radius:var(--radius-sm);border:none;
  background:var(--grad-green);color:#fff;font-size:.8rem;font-weight:600;
  box-shadow:0 3px 12px rgba(46,232,165,.30);transition:all .15s;
}
.btn-success:hover{box-shadow:0 6px 20px rgba(46,232,165,.45);transform:translateY(-2px)}

.btn-icon-sm{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:var(--radius-sm);
  border:1px solid var(--border-md);background:var(--bg-5);
  color:var(--tx-3);font-size:.7rem;transition:all .15s;
}
.btn-icon-sm:hover{background:var(--bg-6);color:var(--tx-1);border-color:rgba(91,157,255,.4)}

/* ── Form controls ────────────────────────────────────────────── */
.form-label{
  display:block;font-size:.73rem;font-weight:500;
  color:var(--tx-2);margin-bottom:5px;
}
.form-input,.form-select,.form-textarea{
  width:100%;padding:9px 12px;border-radius:var(--radius-sm);
  border:1px solid var(--border-md);
  background:linear-gradient(135deg,var(--bg-4),var(--bg-3));
  color:var(--tx-1);font-size:.8rem;outline:none;
  transition:border-color .15s,box-shadow .15s;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.4);
}
.form-input:focus,.form-select:focus,.form-textarea:focus{
  border-color:var(--border-hi);
  box-shadow:0 0 0 3px rgba(91,157,255,.15),inset 0 2px 5px rgba(0,0,0,.3);
}
.form-textarea{resize:vertical}
.toggle-row{display:flex;align-items:center}
.toggle-label{font-size:.8rem;color:var(--tx-1);width:150px}
.toggle-input{accent-color:var(--blue);width:16px;height:16px;cursor:pointer}

/* ── Badges ───────────────────────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;
  font-size:.65rem;font-weight:600;padding:3px 8px;border-radius:100px;
  letter-spacing:.02em;
}
.badge-blue  {background:rgba(91,157,255,.20);color:#93c5fd;border:1px solid rgba(91,157,255,.40)}
.badge-green {background:rgba(46,232,165,.18);color:#6ee7b7;border:1px solid rgba(46,232,165,.38)}
.badge-red   {background:rgba(255,107,129,.18);color:#fca5a5;border:1px solid rgba(255,107,129,.38)}
.badge-yellow{background:rgba(255,209,102,.18);color:#fde68a;border:1px solid rgba(255,209,102,.38)}
.badge-purple{background:rgba(181,144,255,.20);color:#d8b4fe;border:1px solid rgba(181,144,255,.40)}
.badge-gray  {background:rgba(140,150,180,.16);color:#c4cde0;border:1px solid rgba(140,150,180,.32)}
.badge-cyan  {background:rgba(56,232,255,.18);color:#67e8f9;border:1px solid rgba(56,232,255,.36)}
.badge-orange{background:rgba(255,159,69,.18);color:#fdba74;border:1px solid rgba(255,159,69,.36)}

/* ── Progress bars ────────────────────────────────────────────── */
.progress-bar-bg{background:var(--bg-4);border-radius:100px;overflow:hidden;position:relative}
.progress-bar-fill{
  height:100%;
  background:linear-gradient(90deg,var(--blue-d),var(--blue));
  border-radius:100px;transition:width .5s cubic-bezier(.4,0,.2,1);
  position:relative;
}
.progress-bar-fill::after{
  content:'';position:absolute;top:0;right:0;bottom:0;width:20px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.2));
}

/* ── Pipeline stage flow ─────────────────────────────────────── */
.pipeline-stage-flow-wrapper{
  overflow-x:auto;padding:22px 22px 4px;
  background:linear-gradient(180deg,var(--bg-3),var(--bg-2));
  border-bottom:1px solid var(--border-md);
}
.pipeline-stage-flow{
  display:flex;align-items:center;gap:3px;
  min-width:max-content;padding-bottom:18px;
}
.pipeline-stage-node{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:14px 14px;border-radius:var(--radius);
  border:1px solid var(--border-md);
  background:linear-gradient(160deg,var(--bg-4) 0%,var(--bg-3) 100%);
  min-width:98px;transition:all .2s;cursor:pointer;
  box-shadow:var(--sh-sm);
}
.pipeline-stage-node:hover{
  background:linear-gradient(160deg,var(--bg-5),var(--bg-4));
  border-color:rgba(91,157,255,.35);
  box-shadow:var(--sh-md);transform:translateY(-3px);
}
.pipeline-stage-node.selected{
  border-color:var(--border-hi);
  background:linear-gradient(135deg,rgba(91,157,255,.18),rgba(91,157,255,.08));
  box-shadow:var(--sh-blue);
}
.stage-icon-wrapper{position:relative;z-index:1}
.stage-icon{
  width:42px;height:42px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:.9rem;transition:all .2s;
}
.stage-icon.pending {
  background:rgba(255,255,255,.06);color:var(--tx-4);
  border:1px solid var(--border-md);
}
.stage-icon.running {
  background:linear-gradient(135deg,rgba(91,157,255,.28),rgba(91,157,255,.12));
  color:var(--blue);border:1px solid rgba(91,157,255,.45);
  box-shadow:0 0 20px rgba(91,157,255,.30);
  animation:iconPulse 2s infinite;
}
.stage-icon.completed{
  background:linear-gradient(135deg,rgba(46,232,165,.25),rgba(46,232,165,.10));
  color:var(--green);border:1px solid rgba(46,232,165,.45);
  box-shadow:0 0 16px rgba(46,232,165,.18);
}
.stage-icon.failed  {
  background:rgba(255,107,129,.18);color:var(--red);
  border:1px solid rgba(255,107,129,.40);
}
.stage-icon.disabled{
  background:rgba(255,255,255,.02);color:var(--tx-4);
  border:1px dashed var(--border);opacity:.45;
}
@keyframes iconPulse{0%,100%{box-shadow:0 0 12px rgba(91,157,255,.25)}50%{box-shadow:0 0 28px rgba(91,157,255,.55)}}

.stage-progress-ring{position:absolute;top:-7px;left:-7px;width:56px;height:56px}
.stage-progress-ring circle{
  fill:none;stroke:var(--blue);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:163;transition:stroke-dashoffset .4s ease;
  transform:rotate(-90deg);transform-origin:center;
  filter:drop-shadow(0 0 4px rgba(79,142,247,.5));
}
.stage-name{font-size:.67rem;font-weight:600;text-align:center;color:var(--tx-3);max-width:88px;line-height:1.3}
.stage-name.completed{color:var(--green)}
.stage-name.running{color:var(--blue)}
.stage-name.failed{color:var(--red)}
.stage-status-text{font-size:.62rem;color:var(--tx-4)}
.pipeline-arrow{
  display:flex;align-items:center;padding:0 1px;
  color:var(--tx-4);font-size:.65rem;
}
.pipeline-arrow.active{color:rgba(79,142,247,.6)}

/* ── Pipeline detail pane ────────────────────────────────────── */
.pipeline-detail-pane{
  background:linear-gradient(180deg,var(--bg-2),var(--bg-1));
  border-top:1px solid var(--border);
}
.pipeline-detail-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 18px;border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.015);
}

/* ── Progress ring (running state) – SMALLER ─────────────────── */
.stage-running-ring{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:32px 0;
}
.stage-running-ring .ring-wrap{
  position:relative;width:56px;height:56px;margin-bottom:14px;
}
.stage-running-ring .ring-wrap svg{width:56px;height:56px}
.stage-running-ring .ring-pct{
  position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:.9rem;color:var(--blue);
}

/* ── Nova Streaming Display ─────────────────────────────────── */
.nova-stream-header{
  display:flex;align-items:center;gap:14px;
  padding:14px 18px 12px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(135deg,var(--blue)06,var(--bg-2));
}
.ring-wrap-sm{
  position:relative;width:44px;height:44px;flex-shrink:0;
}
.ring-wrap-sm svg{width:44px;height:44px}
.ring-pct-sm{
  position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:.75rem;color:var(--blue);
}
.nova-stream-box{
  font-family:'JetBrains Mono','Fira Code','Courier New',monospace;
  font-size:.7rem;line-height:1.6;color:var(--green);
  background:var(--bg-1);
  padding:14px 18px;
  max-height:420px;overflow-y:auto;
  white-space:pre-wrap;word-break:break-all;
  border-bottom-left-radius:12px;border-bottom-right-radius:12px;
  animation:fadeIn .2s ease;
}
.nova-stream-box::-webkit-scrollbar{width:4px}
.nova-stream-box::-webkit-scrollbar-thumb{background:var(--green)40;border-radius:2px}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.stream-cursor{
  display:inline-block;width:7px;height:13px;
  background:var(--green);margin-left:2px;vertical-align:text-bottom;
  animation:blink .7s step-end infinite;
}

/* ── Artifact Tabs ───────────────────────────────────────────── */
.artifact-tab{
  padding:9px 15px;font-size:.78rem;color:var(--tx-3);
  border-bottom:2px solid transparent;cursor:pointer;
  transition:all .15s;background:none;
  border-top:none;border-left:none;border-right:none;margin-bottom:-1px;
}
.artifact-tab:hover{color:var(--tx-1)}
.artifact-tab.active{color:var(--blue);border-bottom-color:var(--blue);font-weight:500}

/* ── Artifact layouts ────────────────────────────────────────── */
.artifacts-layout{display:flex;height:100%;overflow:hidden}
.artifact-sidebar{
  width:208px;min-width:208px;
  border-right:1px solid var(--border);display:flex;flex-direction:column;
  background:var(--bg-2);
}
.artifact-sidebar-header{
  display:flex;align-items:center;gap:8px;
  padding:13px 15px;border-bottom:1px solid var(--border);
  font-size:.8rem;font-weight:600;
}
.artifact-tree{flex:1;overflow-y:auto;padding:6px}
.artifact-tree-item{
  display:flex;align-items:center;gap:9px;
  padding:7px 10px;border-radius:var(--radius-sm);
  cursor:pointer;transition:all .15s;
  font-size:.78rem;color:var(--tx-3);
}
.artifact-tree-item:hover:not(.disabled){background:var(--bg-4);color:var(--tx-1)}
.artifact-tree-item.selected{
  background:var(--blue-x);color:var(--blue);
  border-left:2px solid var(--blue);
}
.artifact-tree-item.disabled{cursor:default}
.artifact-main{flex:1;overflow-y:auto;display:flex;flex-direction:column}
.artifact-viewer-header{
  min-height:50px;display:flex;align-items:center;
  gap:9px;flex-wrap:wrap;padding:10px 16px;
  border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.015);
}

/* ── Chat ─────────────────────────────────────────────────────── */
.chat-layout{display:flex;flex-direction:column;height:100%}
.chat-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 18px;border-bottom:1px solid var(--border);
  background:var(--bg-2);flex-shrink:0;
}
.chat-messages{
  flex:1;overflow-y:auto;padding:18px;
  display:flex;flex-direction:column;gap:16px;background:var(--bg-1);
}
.chat-bubble{
  max-width:72%;padding:11px 15px;border-radius:12px;
  font-size:.82rem;line-height:1.65;
  white-space:pre-wrap;word-break:break-word;
}
.chat-bubble.user{
  background:linear-gradient(135deg,rgba(29,78,216,.8),rgba(79,142,247,.7));
  color:#fff;border:1px solid rgba(79,142,247,.3);
  box-shadow:0 2px 8px rgba(79,142,247,.15);
}
.chat-bubble.assistant{
  background:var(--bg-3);color:var(--tx-1);
  border:1px solid var(--border);
  box-shadow:var(--sh-sm);
}
.chat-meta{font-size:.64rem;color:var(--tx-4);margin-top:4px;padding:0 4px}
.chat-input-bar{
  display:flex;gap:9px;padding:13px;
  border-top:1px solid var(--border);background:var(--bg-2);flex-shrink:0;
}
.chat-textarea{
  flex:1;resize:none;padding:9px 13px;border-radius:var(--radius-sm);
  border:1px solid var(--border-md);
  background:var(--bg-3);color:var(--tx-1);font-size:.82rem;
  transition:border-color .15s,box-shadow .15s;
}
.chat-textarea:focus{
  outline:none;border-color:var(--border-hi);
  box-shadow:0 0 0 3px rgba(79,142,247,.1);
}

/* ── Tables ───────────────────────────────────────────────────── */
.table-th{
  padding:9px 15px;font-size:.68rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;
  color:var(--tx-4);text-align:left;
  background:rgba(255,255,255,.02);
  border-bottom:1px solid var(--border);
}
.table-td{
  padding:9px 15px;font-size:.79rem;color:var(--tx-1);vertical-align:top;
  border-bottom:1px solid var(--border);
}
.table-row{transition:background .12s;cursor:pointer}
.table-row:hover td{background:rgba(79,142,247,.04)}

/* ── JSON Syntax highlight ───────────────────────────────────── */
.artifact-json{
  font-family:'JetBrains Mono',monospace;font-size:.7rem;
  color:var(--tx-3);white-space:pre;overflow-x:auto;
  line-height:1.75;background:var(--bg-0);
  border-radius:var(--radius-sm);padding:14px;
  border:1px solid var(--border);
}
.json-key   {color:#79c0ff}
.json-string{color:#a5d6ff}
.json-number{color:#ffa657}
.json-bool  {color:#ff7b72}
.json-null  {color:var(--tx-4)}

/* ── Modals ───────────────────────────────────────────────────── */
.modal-backdrop{
  position:fixed;inset:0;
  background:rgba(8,10,22,.85);
  backdrop-filter:blur(8px);z-index:50;
  display:flex;align-items:center;justify-content:center;padding:16px;
}
.modal-dialog{
  background:linear-gradient(160deg,var(--bg-4) 0%,var(--bg-3) 50%,var(--bg-2) 100%);
  border:1px solid var(--border-hi);border-radius:var(--radius-lg);
  width:100%;max-width:700px;max-height:90vh;
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 30px 90px rgba(0,0,0,.85),0 0 0 1px rgba(91,157,255,.08),
             var(--sh-blue);
  position:relative;
}
/* Modal top glow */
.modal-dialog::before{
  content:'';position:absolute;top:0;left:20%;right:20%;height:1px;
  background:linear-gradient(90deg,transparent,var(--blue),var(--purple),transparent);
}
.modal-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 22px;border-bottom:1px solid var(--border);flex-shrink:0;
  background:rgba(255,255,255,.02);
}
.modal-title{font-size:.95rem;font-weight:600;color:var(--tx-1)}
.modal-close{
  display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:var(--radius-sm);
  border:none;background:transparent;color:var(--tx-3);font-size:.85rem;
  transition:all .15s;
}
.modal-close:hover{background:var(--bg-5);color:var(--tx-1)}
.modal-body{overflow-y:auto;padding:22px;display:flex;flex-direction:column;gap:18px}
.modal-footer{
  display:flex;align-items:center;justify-content:flex-end;
  gap:9px;padding:14px 22px;border-top:1px solid var(--border);flex-shrink:0;
  background:rgba(255,255,255,.015);
}

/* ── Mode cards ───────────────────────────────────────────────── */
.mode-card{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:16px;border-radius:var(--radius);
  border:2px solid var(--border);background:var(--bg-3);
  cursor:pointer;text-align:center;transition:all .15s;
}
.mode-card:hover{border-color:var(--border-md);background:var(--bg-4)}
.mode-card.selected{
  border-color:var(--blue);
  background:linear-gradient(135deg,rgba(79,142,247,.12),rgba(79,142,247,.05));
  box-shadow:var(--sh-blue);
}
.example-btn{
  padding:8px 12px;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:var(--bg-3);
  color:var(--tx-3);font-size:.75rem;text-align:left;
  transition:all .15s;
}
.example-btn:hover{background:var(--bg-5);color:var(--tx-1);border-color:var(--border-md)}

/* ── Toast ────────────────────────────────────────────────────── */
.toast-container{
  position:fixed;bottom:26px;right:26px;z-index:100;
  display:flex;flex-direction:column;gap:9px;
}
.toast{
  display:flex;align-items:center;gap:10px;
  padding:11px 16px;border-radius:var(--radius);
  font-size:.8rem;background:var(--bg-3);
  border:1px solid var(--border-md);color:var(--tx-1);
  animation:slideIn .3s cubic-bezier(.4,0,.2,1);
  min-width:230px;max-width:380px;
  box-shadow:var(--sh-lg);
}
.toast.success{border-left:3px solid var(--green)}
.toast.error  {border-left:3px solid var(--red)}
.toast.warn   {border-left:3px solid var(--yellow)}
.toast.info   {border-left:3px solid var(--blue)}

/* ── Dashboard ────────────────────────────────────────────────── */
.dash-kpi-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:16px;
}
.dash-main-grid{
  display:grid;grid-template-columns:3fr 2fr;gap:14px;margin-bottom:14px;
}
.dash-bottom-grid{
  display:grid;grid-template-columns:2fr 3fr;gap:14px;
}
.activity-item{
  display:flex;gap:10px;align-items:flex-start;
  padding:8px 0;border-bottom:1px solid var(--border);
}
.activity-item:last-child{border-bottom:none}
.activity-dot{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:4px;
}
.stage-bar-row{display:flex;align-items:center;gap:10px;padding:4px 0}
.stage-bar-label{width:130px;font-size:.73rem;color:var(--tx-3);flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage-bar-fill{flex:1;height:8px;background:var(--bg-4);border-radius:100px;overflow:hidden;position:relative}
.stage-bar-value{width:48px;text-align:right;font-size:.72rem;color:var(--tx-3);flex-shrink:0}

/* ── Screen mockup previews ──────────────────────────────────── */
.screen-mockup-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:16px;padding:16px;
}
.screen-card{
  background:var(--bg-3);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--sh-sm);transition:all .2s;
}
.screen-card:hover{box-shadow:var(--sh-md);border-color:var(--border-md)}
.screen-preview{
  width:100%;height:180px;overflow:hidden;position:relative;
  background:var(--bg-4);
  border-bottom:1px solid var(--border);
}
.screen-info{padding:12px}
.screen-title{font-size:.82rem;font-weight:600;color:var(--tx-1)}
.screen-url{font-family:'JetBrains Mono',monospace;font-size:.68rem;color:var(--tx-4);margin-top:2px}
.screen-desc{font-size:.73rem;color:var(--tx-3);margin-top:5px;line-height:1.5}
.screen-components{margin-top:7px;display:flex;flex-wrap:wrap;gap:4px}
.comp-tag{
  font-size:.62rem;padding:2px 7px;border-radius:100px;
  background:var(--bg-5);color:var(--tx-4);border:1px solid var(--border);
}

/* Mockup browser chrome */
.mock-browser{
  width:100%;height:100%;background:#070e1c;
  display:flex;flex-direction:column;
  font-size:0;/* reset font for inline children */
}
.mock-chrome{
  height:22px;background:#0c1525;
  display:flex;align-items:center;gap:6px;padding:0 8px;flex-shrink:0;
  border-bottom:1px solid var(--border);
}
.mock-dot{
  width:7px;height:7px;border-radius:50%;
}
.mock-dot.red{background:#ff5f57}
.mock-dot.yellow{background:#febc2e}
.mock-dot.green{background:#28c840}
.mock-url{
  flex:1;height:12px;background:rgba(255,255,255,.06);
  border-radius:100px;margin:0 8px;
}
.mock-body{flex:1;display:flex;overflow:hidden;font-size:14px}

/* Login mockup */
.mock-login{
  display:flex;align-items:center;justify-content:center;
  width:100%;background:var(--bg-1);
}
.mock-login-card{
  background:var(--bg-3);border:1px solid var(--border);
  border-radius:8px;padding:16px;width:80%;
}
.mock-field{
  height:10px;background:var(--bg-4);border-radius:3px;margin:6px 0;
}
.mock-btn{
  height:16px;border-radius:4px;margin-top:10px;
  background:linear-gradient(90deg,#1d4ed8,#3b82f6);
}
.mock-divider{
  display:flex;align-items:center;gap:6px;margin:8px 0;
}
.mock-divider-line{flex:1;height:1px;background:var(--border)}
.mock-divider-text{font-size:.55rem;color:var(--tx-4)}
.mock-oauth-row{display:flex;gap:4px;margin-top:6px}
.mock-oauth-btn{
  flex:1;height:12px;background:var(--bg-4);
  border:1px solid var(--border);border-radius:3px;
}

/* Dashboard mockup */
.mock-dashboard-nav{
  height:20px;background:#0c1525;
  display:flex;align-items:center;gap:8px;padding:0 8px;
  border-bottom:1px solid var(--border);flex-shrink:0;
}
.mock-logo-sq{width:12px;height:12px;border-radius:3px;background:var(--blue)}
.mock-nav-links{display:flex;gap:4px;margin-left:auto}
.mock-nav-link{width:20px;height:5px;background:var(--bg-5);border-radius:2px}
.mock-dashboard-body{flex:1;display:flex;overflow:hidden}
.mock-sidebar{
  width:50px;background:#0a1220;padding:8px 5px;
  border-right:1px solid var(--border);flex-shrink:0;
  display:flex;flex-direction:column;gap:3px;
}
.mock-sidebar-item{
  height:6px;background:var(--bg-4);border-radius:2px;
}
.mock-sidebar-item.active{background:rgba(79,142,247,.3)}
.mock-main-content{flex:1;padding:8px;display:flex;flex-direction:column;gap:6px}
.mock-kpi-row{display:flex;gap:5px}
.mock-kpi{
  flex:1;height:22px;border-radius:4px;
  border:1px solid var(--border);
  background:linear-gradient(135deg,var(--bg-4),var(--bg-3));
}
.mock-chart{
  flex:1;border-radius:4px;border:1px solid var(--border);
  background:var(--bg-3);position:relative;overflow:hidden;
}
.mock-chart-bars{
  position:absolute;bottom:0;left:0;right:0;
  display:flex;align-items:flex-end;gap:3px;padding:4px;height:100%;
}
.mock-bar{
  flex:1;border-radius:2px 2px 0 0;
  background:linear-gradient(180deg,rgba(79,142,247,.5),rgba(79,142,247,.2));
}
.mock-table-area{height:40px;border-radius:4px;border:1px solid var(--border);background:var(--bg-3);overflow:hidden}
.mock-table-row{height:9px;border-bottom:1px solid var(--border)}
.mock-table-row:nth-child(odd){background:rgba(255,255,255,.01)}

/* API docs mockup */
.mock-api-header{
  height:28px;background:linear-gradient(90deg,#1d4ed8,#6d28d9);
  display:flex;align-items:center;padding:0 10px;gap:6px;flex-shrink:0;
}
.mock-api-title{font-size:.6rem;color:#fff;font-weight:600}
.mock-api-version{font-size:.55rem;background:rgba(255,255,255,.2);padding:1px 5px;border-radius:100px;color:#fff}
.mock-api-body{flex:1;display:flex;overflow:hidden}
.mock-api-sidebar{width:80px;background:#0a1220;padding:6px;border-right:1px solid var(--border)}
.mock-api-group{margin-bottom:6px}
.mock-api-group-title{font-size:.5rem;text-transform:uppercase;color:var(--tx-4);margin-bottom:3px}
.mock-api-ep{height:7px;background:var(--bg-4);border-radius:2px;margin-bottom:2px}
.mock-api-main{flex:1;padding:8px;display:flex;flex-direction:column;gap:6px}
.mock-api-endpoint{
  border:1px solid var(--border);border-radius:4px;overflow:hidden;
  background:var(--bg-3);
}
.mock-api-ep-header{
  height:16px;display:flex;align-items:center;gap:4px;padding:0 6px;
  background:rgba(255,255,255,.02);
}
.mock-method{
  height:10px;width:24px;border-radius:2px;
  font-size:.45rem;display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;
}
.mock-method.get   {background:#16a34a}
.mock-method.post  {background:#1d4ed8}
.mock-method.put   {background:#b45309}
.mock-method.delete{background:#b91c1c}
.mock-ep-path{height:6px;background:var(--bg-4);border-radius:2px;flex:1}

/* Lighthouse scores */
.lighthouse-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:10px;
}
.lh-score{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:10px;border-radius:var(--radius-sm);
  background:var(--bg-3);border:1px solid var(--border);
}
.lh-circle{
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;font-weight:700;
  border:3px solid;
}
.lh-circle.green {color:var(--green);border-color:var(--green)}
.lh-circle.orange{color:var(--orange);border-color:var(--orange)}
.lh-label{font-size:.62rem;color:var(--tx-4);text-align:center;line-height:1.3}

/* ── Rich content helpers ────────────────────────────────────── */
.section-header{
  font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--tx-3);
  padding:10px 0 6px;margin-bottom:6px;
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:7px;
}
.section-header i{color:var(--blue)}
.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.info-row{
  display:flex;gap:8px;padding:4px 0;font-size:.78rem;
  border-bottom:1px solid var(--border);
}
.info-row:last-child{border-bottom:none}
.info-key{color:var(--tx-3);width:140px;flex-shrink:0;font-weight:500}
.info-val{color:var(--tx-1)}
.dor-dod-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.dor-card{
  background:var(--bg-3);border:1px solid var(--border);
  border-radius:var(--radius);padding:14px;
}
.dor-card.dor{border-top:3px solid var(--blue)}
.dor-card.dod{border-top:3px solid var(--green)}
.dor-title{
  font-size:.75rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;margin-bottom:10px;
}
.dor-title.dor{color:var(--blue)}
.dor-title.dod{color:var(--green)}
.check-item{
  display:flex;gap:8px;align-items:flex-start;
  font-size:.76rem;padding:4px 0;
  border-bottom:1px solid var(--border);
}
.check-item:last-child{border-bottom:none}
.check-icon.ok  {color:var(--green)}
.check-icon.must{color:var(--yellow)}
.risk-row{
  display:grid;grid-template-columns:auto 1fr auto auto;
  gap:8px;align-items:start;
  padding:8px 0;border-bottom:1px solid var(--border);font-size:.76rem;
}
.risk-row:last-child{border-bottom:none}
.adr-card{
  background:var(--bg-3);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:12px;margin-bottom:8px;
}
.adr-title{font-size:.78rem;font-weight:600;color:var(--tx-1);margin-bottom:4px}
.adr-decision{font-size:.74rem;color:var(--green);margin-bottom:4px}
.adr-reason{font-size:.72rem;color:var(--tx-3);line-height:1.5}
.sequence-block{
  background:var(--bg-0);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:12px;
  font-family:'JetBrains Mono',monospace;
  font-size:.7rem;color:var(--cyan);line-height:1.8;
  overflow-x:auto;white-space:pre;
}
.score-ring-wrap{position:relative;display:inline-flex}
.score-ring-wrap svg{transform:rotate(-90deg)}
.score-ring-label{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
}
.endpoint-table-row{
  display:grid;
  grid-template-columns:80px 240px 60px 1fr;
  gap:8px;align-items:start;
  padding:7px 0;border-bottom:1px solid var(--border);font-size:.77rem;
}
.endpoint-table-row:last-child{border-bottom:none}

/* ── Animations ───────────────────────────────────────────────── */
@keyframes pulse  {0%,100%{opacity:1}50%{opacity:.5}}
@keyframes slideIn{from{transform:translateX(110%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes fadeIn {from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin   {to{transform:rotate(360deg)}}
.animate-fade-in{animation:fadeIn .25s ease}
.animate-pulse  {animation:pulse 2s infinite}
.animate-spin   {animation:spin 1s linear infinite}