:root{
  --ss-bg-0:#070A13;
  --ss-bg-1:#0B1024;
  --ss-text:#EAF0FF;
  --ss-muted:#A7B2D6;
  --ss-border:rgba(234,240,255,.12);
  --ss-brand:#7C5CFF;
  --ss-brand-2:#2EE7FF;
}

body{
  background:
    radial-gradient(1200px 600px at 15% 10%, rgba(124,92,255,.25), transparent 60%),
    radial-gradient(900px 600px at 85% 20%, rgba(46,231,255,.18), transparent 55%),
    linear-gradient(180deg, var(--ss-bg-1), var(--ss-bg-0));
  color:var(--ss-text);
}

/* Brand gradient text */
.brand-gradient{
  background:linear-gradient(90deg, var(--ss-brand), var(--ss-brand-2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.text-muted-ss{ color: var(--ss-muted) !important; }
.border-ss{ border-color: var(--ss-border) !important; }

/* Glass panel */
.glass{
  background:rgba(255,255,255,.03);
  border:1px solid var(--ss-border);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
}

/* Dark form controls */
.form-control, .form-select, .input-group-text{
  background-color: rgba(255,255,255,.04);
  border-color: var(--ss-border);
  color: var(--ss-text);
}
.form-control::placeholder{ color: rgba(234,240,255,.55); }

/* Primary button gradient */
.btn-primary{
  background: linear-gradient(90deg, var(--ss-brand), var(--ss-brand-2));
  border: 0;
}
.btn-primary:hover{ filter: brightness(1.05); }

/* Navbar link tuning */
.navbar .nav-link{
  color: rgba(234,240,255,.72);
}
.navbar .nav-link:hover{
  color: rgba(234,240,255,.92);
}
.navbar .nav-link.active{
  color: rgba(234,240,255,.95);
}

/* Dark scrollbars */
.overflow-auto{ scrollbar-color: rgba(234,240,255,.25) transparent; }

/* Reusable helpers */
.bg-panel{ background: rgba(0,0,0,.14) !important; }
.bg-panel-10{ background: rgba(0,0,0,.10) !important; }
.bg-panel-12{ background: rgba(0,0,0,.12) !important; }
.bg-panel-18{ background: rgba(0,0,0,.18) !important; }
.ls-14{ letter-spacing:.14em; }
.ls-12{ letter-spacing:.12em; }

.step-num{
  display:inline-grid;
  place-items:center;
  width:22px;
  height:22px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
}

.ui-dot{
  width:8px;
  height:8px;
  display:inline-block;
  background: rgba(234,240,255,.18);
}

.delivery-item{
  border-color: var(--ss-border) !important;
  background: rgba(0,0,0,.12) !important;
}

/* Accordion dark theme */
.accordion-item{
  background: rgba(0,0,0,.14);
  border: 1px solid var(--ss-border);
}
.accordion-button{
  background: rgba(0,0,0,.14);
  color: rgba(234,240,255,.92);
}
.accordion-button:focus{
  box-shadow: 0 0 0 .25rem rgba(124,92,255,.20);
}
.accordion-button:not(.collapsed){
  background: rgba(0,0,0,.18);
  color: rgba(234,240,255,.98);
}
.accordion-body{
  color: rgba(234,240,255,.80);
}
.accordion-button::after{
  filter: invert(1) opacity(.7);
}

/* List group items */
.list-group-item{ color: var(--ss-text); }

/* Hero simulation bits (homepage) */
.ss-sim-badge{
  background: rgba(234,240,255,.06);
  color: rgba(234,240,255,.85);
  border: 1px solid var(--ss-border);
}

.ss-dot{ width: 10px; height: 10px; border-radius: 999px; display:inline-block; }
.ss-dot-idle{ background: rgba(234,240,255,.25); }
.ss-dot-run{ background: rgba(46,231,255,.95); box-shadow: 0 0 0 4px rgba(46,231,255,.14); }
.ss-dot-done{ background: rgba(34,197,94,.95); box-shadow: 0 0 0 4px rgba(34,197,94,.14); }

.ss-feed{
  display:flex;
  flex-direction:column;
  gap:.5rem;
  padding:.25rem;
  max-height: 170px;
  overflow-y: auto;
}

.ss-feed-item{
  display:flex;
  gap:.6rem;
  align-items:flex-start;
  padding:.65rem .7rem;
  border: 1px solid var(--ss-border);
  border-radius: 1rem;
  background: rgba(0,0,0,.16);
}

.ss-feed-item.is-old{ opacity:.55; }

.ss-icon{
  width: 28px; height: 28px;
  border-radius: .7rem;
  background: rgba(124,92,255,.14);
  border: 1px solid rgba(124,92,255,.22);
  display:grid;
  place-items:center;
  flex: 0 0 28px;
  color: rgba(234,240,255,.92);
  font-weight: 800;
  font-size: .9rem;
}

.ss-feed-item .meta{ color: rgba(234,240,255,.60); font-size:.82rem; }

.ss-outcome{
  margin-top:.65rem;
  border: 1px solid rgba(34,197,94,.25);
  background: rgba(34,197,94,.08);
  border-radius: 1rem;
  padding: .75rem;
}

.ss-outcome pre{
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 120px;
  overflow: auto;
  color: rgba(234,240,255,.90);
  margin: 0;
}

.ss-outcome-box{
  border-color: var(--ss-border) !important;
  background: rgba(0,0,0,.18) !important;
}

.ss-skeleton{
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(234,240,255,.06), rgba(234,240,255,.12), rgba(234,240,255,.06));
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
}

@keyframes shimmer{
  0%{ background-position: 0% 0%; }
  100%{ background-position: 200% 0%; }
}

.ss-fade-in{ animation: fadeIn .25s ease-out; }
@keyframes fadeIn{ from{ opacity:0; transform: translateY(4px);} to{opacity:1; transform:none;} }

/* Dark tabs (homepage) */
.nav-tabs .nav-link{ color: rgba(234,240,255,.75); }
.nav-tabs .nav-link:hover{ color: rgba(234,240,255,.9); border-color: transparent; }
.nav-tabs .nav-link.active{
  color: rgba(234,240,255,.95);
  background: rgba(255,255,255,.04);
  border-color: var(--ss-border) var(--ss-border) transparent;
}

/* Fit checklist contrast (homepage) */
.fit-box{
  border: 1px solid var(--ss-border);
  background: rgba(0,0,0,.14);
  border-radius: 1rem;
  padding: 1rem;
}
.fit-good{
  border-color: rgba(34,197,94,.28);
  background: rgba(34,197,94,.06);
}
.fit-not{
  border-color: rgba(239,68,68,.28);
  background: rgba(239,68,68,.06);
}
.fit-pill{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.25rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--ss-border);
  background: rgba(255,255,255,.04);
  color: rgba(234,240,255,.9);
  font-size: .85rem;
  font-weight: 600;
}
.fit-pill .dot{ width:8px; height:8px; border-radius:999px; display:inline-block; }
.fit-pill.good{ border-color: rgba(34,197,94,.28); }
.fit-pill.good .dot{ background: rgba(34,197,94,.9); box-shadow: 0 0 0 4px rgba(34,197,94,.14); }
.fit-pill.not{ border-color: rgba(239,68,68,.28); }
.fit-pill.not .dot{ background: rgba(239,68,68,.9); box-shadow: 0 0 0 4px rgba(239,68,68,.14); }