/* cad2step FX layer — innovative animated theme, layered over the base styles.
   Light/dark aware, offline (no external assets), respects reduced-motion. */

/* ---- Poppins (vendored locally) + larger type ---- */
body, button, input, select, textarea{
  font-family:'Poppins', -apple-system, 'Segoe UI', Roboto, sans-serif !important;
}
body{ font-size:15.5px !important; letter-spacing:.1px; }
.agent .nm, .srow .nm{ font-size:14.5px !important; }
.agent .ds, .agent .msg, .kv, .fcard p, .lead, .sub{ font-size:14px !important; }
.hd, .card > .hd, .sec-title, .kicker{ font-size:12px !important; }
.btn, .hbtn, .tool, .chip{ font-size:13.5px !important; }
.h2{ font-size:clamp(24px,3.4vw,34px) !important; }
.hero h1{ font-size:clamp(38px,5.4vw,62px) !important; line-height:1.04 !important; }
.brand{ font-size:17px !important; }
.stat .n{ font-size:28px !important; }

:root{
  --fx1: rgba(76,141,255,.22);   /* electric blue  */
  --fx2: rgba(139,92,246,.20);   /* violet         */
  --fx3: rgba(34,211,238,.16);   /* cyan           */
  --glass: rgba(255,255,255,.72);
  --glass-brd: rgba(255,255,255,.6);
  --grid: rgba(30,60,120,.045);
}
:root[data-theme="dark"]{
  --fx1: rgba(76,141,255,.24);
  --fx2: rgba(139,92,246,.20);
  --fx3: rgba(34,211,238,.14);
  --glass: rgba(22,27,34,.62);
  --glass-brd: rgba(255,255,255,.08);
  --grid: rgba(120,160,255,.05);
}

/* ---- animated aurora + blueprint grid background ---- */
body{ position:relative; }
body::before{                     /* drifting colour blobs */
  content:""; position:fixed; inset:-20vmax; z-index:-2; pointer-events:none;
  background:
    radial-gradient(38vmax 38vmax at 18% 12%, var(--fx1), transparent 60%),
    radial-gradient(42vmax 42vmax at 85% 18%, var(--fx2), transparent 62%),
    radial-gradient(46vmax 46vmax at 60% 95%, var(--fx3), transparent 60%);
  filter:saturate(1.05);
  animation: fx-drift 26s ease-in-out infinite alternate;
}
body::after{                      /* faint engineering grid */
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px, transparent 1px),
                   linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:44px 44px; mask-image:radial-gradient(circle at 50% 40%, #000 55%, transparent 100%);
}
@keyframes fx-drift{
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(2.5vmax,-2vmax,0) scale(1.06); }
  100% { transform: translate3d(-2vmax,2.5vmax,0) scale(1.02); }
}

/* ---- glassmorphism panels ---- */
.card, nav, header, .toolbar, .stat, .fcard, .step, .gcard, .chip{
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
}
.card, .fcard, .gcard, .stat, .step{
  background: var(--glass) !important;
  border:1px solid var(--glass-brd) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 10px 30px rgba(20,35,80,.10) !important;
  transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s, border-color .22s;
}
:root[data-theme="dark"] .card, :root[data-theme="dark"] .fcard,
:root[data-theme="dark"] .gcard, :root[data-theme="dark"] .stat, :root[data-theme="dark"] .step{
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 12px 34px rgba(0,0,0,.45) !important;
}
.card:hover, .fcard:hover, .gcard:hover, .stat:hover{
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent) !important;
  box-shadow: 0 14px 40px color-mix(in srgb, var(--accent) 22%, transparent) !important;
}

/* ---- section headings ---- */
.kicker{ letter-spacing:.14em !important; }

/* ---- buttons: gradient + hover shine ---- */
.btn.primary, .hbtn.primary, .dl a.primary{
  background:linear-gradient(120deg,#4c8dff,#8b5cf6 55%,#22d3ee) !important;
  border:0 !important; color:#fff !important; position:relative; overflow:hidden;
  box-shadow:0 6px 22px rgba(76,141,255,.35);
}
.btn.primary::after, .hbtn.primary::after, .dl a.primary::after{
  content:""; position:absolute; inset:0; transform:translateX(-120%);
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);
}
.btn.primary:hover::after, .hbtn.primary:hover::after, .dl a.primary:hover::after{
  animation: fx-shine .8s ease;
}
@keyframes fx-shine{ to{ transform:translateX(120%);} }
.btn.primary:hover, .hbtn.primary:hover{ transform:translateY(-1px); }

/* ---- SBL brand logo ---- */
.brand-logo{ height:34px; width:auto; display:inline-block; vertical-align:middle;
  margin-right:8px; filter:drop-shadow(0 2px 6px rgba(20,40,90,.12)); }
.brand{ display:inline-flex; align-items:center; gap:2px; }
:root[data-theme="dark"] .brand-logo{ filter:drop-shadow(0 2px 6px rgba(0,0,0,.4)) brightness(1.05); }

/* ---- animated brand mark (legacy, unused when logo present) ---- */
.brand .mark{
  background:linear-gradient(135deg,#4c8dff,#8b5cf6 60%,#22d3ee) !important;
  box-shadow:0 4px 14px rgba(76,141,255,.45);
  animation: fx-pulse 3.2s ease-in-out infinite;
}
@keyframes fx-pulse{ 0%,100%{ box-shadow:0 4px 14px rgba(76,141,255,.35);} 50%{ box-shadow:0 6px 22px rgba(139,92,246,.55);} }

/* ---- progress bars: gradient + moving shimmer ---- */
.bar > i{
  background:linear-gradient(90deg,#4c8dff,#8b5cf6,#22d3ee) !important;
  background-size:200% 100%; position:relative; animation: fx-flow 2.2s linear infinite;
}
@keyframes fx-flow{ to{ background-position:200% 0; } }

/* ---- active agent glow ---- */
.agent.processing .ic{ box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent);
  animation: spin 1s linear infinite, fx-ring 1.6s ease-out infinite !important; }
@keyframes fx-ring{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent);}
  100%{ box-shadow:0 0 0 10px transparent; } }
.agent.complete .ic{ animation: fx-pop .35s ease; }
@keyframes fx-pop{ 0%{ transform:scale(.6);} 60%{ transform:scale(1.18);} 100%{ transform:scale(1);} }

/* ---- panel entrance (studio) ---- */
.wrap > *, .grid > *{ animation: fx-rise .5s cubic-bezier(.2,.7,.2,1) both; }
.grid > *:nth-child(2){ animation-delay:.08s; }
@keyframes fx-rise{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none;} }

/* ---- stage sheen ---- */
.stage, .heroview{ position:relative; }
.stage::after, .heroview::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.14), transparent 60%);
}

/* ---- chips shimmer on hover ---- */
.chip{ transition:transform .15s, border-color .15s, color .15s; }
.chip:hover{ transform:translateY(-1px); }

/* ---- COLOURFUL light theme ---- */
/* gradient headings & key labels — use background-IMAGE (the `background`
   shorthand would reset background-clip to border-box and fill the whole box) */
.h2, .stat .n{
  background-image:linear-gradient(110deg,#2f6bff,#8b5cf6 50%,#12b5c9) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important;
}
.sec-title, .kicker{ color:#6d5cff !important; }   /* solid colour, robust */
/* colourful top accent bar on every card */
.card{ position:relative; }
.card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px; z-index:1;
  background:linear-gradient(90deg,#4c8dff,#8b5cf6 40%,#22d3ee 70%,#f59e0b);
  opacity:.95; border-radius:10px 10px 0 0;
}
/* vivid category tags + sample-row class chips */
.cl, .srow .cl{
  background:linear-gradient(120deg,rgba(76,141,255,.16),rgba(139,92,246,.16)) !important;
  border-color:transparent !important; color:#5b3fd6 !important; font-weight:600;
}
/* rotate colourful accents across the sample rows */
.srow:nth-child(1) .nm{ color:#2f6bff; }
.srow:nth-child(2) .nm{ color:#8b5cf6; }
.srow:nth-child(3) .nm{ color:#0ea5a3; }
.srow:hover{ background:linear-gradient(120deg,rgba(76,141,255,.10),rgba(34,211,238,.10)) !important; }
/* colourful feature/provenance chips */
.chip.ext{ background:linear-gradient(120deg,rgba(76,141,255,.18),rgba(34,211,238,.18)) !important; color:#1f5fd6 !important; }
/* brighten aurora a touch in light for a colourful feel */
:root:not([data-theme="dark"]){ --fx1:rgba(76,141,255,.28); --fx2:rgba(139,92,246,.24); --fx3:rgba(34,211,238,.20); }
/* per-row delete button in the drawings list — always visible */
.srow{ position:relative; }
.srow-main{ flex:1; min-width:0; }
.row-del{ cursor:pointer; font-size:14px; line-height:1; width:30px; height:30px;
  display:inline-grid; place-items:center; border-radius:8px; margin-left:8px; flex:0 0 auto;
  border:1px solid rgba(214,58,49,.35); background:rgba(214,58,49,.08); color:#d63a31;
  opacity:1; transition:.15s; }
.row-del:hover{ background:#d63a31; color:#fff; border-color:#d63a31; transform:scale(1.08); }

/* AI reconstruction badge */
.badge.ai{ background:linear-gradient(120deg,rgba(76,141,255,.16),rgba(139,92,246,.16)) !important;
  color:#5b3fd6 !important; }

/* live AI-status pill */
#aiPill .dot{ transition:background .2s, box-shadow .2s; }
#aiPill.ai-on .dot{ background:#0f8a3c; box-shadow:0 0 0 3px rgba(15,138,60,.16); }
#aiPill.ai-on{ color:#0f8a3c; border-color:rgba(15,138,60,.35) !important; }
#aiPill.ai-off .dot{ background:#b7791f; }
#aiPill.ai-off{ color:#8a6d1a; }

/* delete buttons — danger tint */
#deleteBtn:not(:disabled){ color:#d63a31; border-color:rgba(214,58,49,.4); }
#deleteBtn:not(:disabled):hover{ background:rgba(214,58,49,.10); border-color:#d63a31; }
.btn-del{ display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 14px;
  border-radius:8px; font-size:12.5px; font-weight:700; cursor:pointer;
  border:1px solid rgba(214,58,49,.45); background:rgba(214,58,49,.06); color:#d63a31;
  font-family:'Poppins',sans-serif; transition:.15s; }
.btn-del:hover{ background:#d63a31; color:#fff; border-color:#d63a31; }

@media (prefers-reduced-motion: reduce){
  body::before, .bar > i, .brand .mark, .agent .ic{ animation:none !important; }
  .card, .fcard, .gcard, .stat{ transition:none !important; }
}