:root {
  --accent: #155eef;
  --bg: #f5f7fb;
  --card: #ffffff;
  --border: #e5e9f2;
  --text: #0f172a;
  --muted: #64748b;
  --green: #166534;
  --amber: #92400e;
  --red: #991b1b;
}

body {
  margin: 0;
  padding: 40px 16px;
  background: var(--bg);
  font-family: Inter, system-ui, sans-serif;
  color: var(--text);
}

.container { max-width: 900px; margin: 0 auto; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
}

h1 { font-size: 22px; margin-bottom: 20px; }

.field { margin-bottom: 18px; }

label {
  display: block;
  font-size: 13px;
  margin-bottom: 6px;
  color: var(--muted);
}

input {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
}

button {
  margin-top:14px;
  padding:14px 18px;
  font-weight:700;
  border-radius:10px;
  border:none;
  background:#111827;
  color:white;
  cursor:pointer;
  font-size:14px;
  letter-spacing:0.02em;
}
button:hover { opacity:0.92; }

.results-section { margin-bottom: 20px; }
.results-section h3 {
  font-size: 14px;
  margin-bottom: 8px;
  color: var(--muted);
}
.stat { font-size: 18px; font-weight: 600; }

.badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.badge.stable { background: #dcfce7; color: var(--green); }
.badge.exposed { background: #fef3c7; color: var(--amber); }
.badge.fragile { background: #fee2e2; color: var(--red); }

/* Alarm */
.alarm {
  padding: 22px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
}
.alarm-fail { background: #fee2e2; color: #991b1b; }
.alarm-pass { background: #dcfce7; color: #166534; }

.alarm-subtext {
  margin-top: 14px;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}
.alarm-subtext-fail { color: #991b1b; }

.liquidity-block { margin-top: 6px; line-height: 1.6; }
.shortfall { color: #991b1b; font-weight: 800; }

.badge img {
  width: 14px;
  margin-right: 6px;
  vertical-align: middle;
}

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.alarm { animation: fadeSlideIn 0.22s cubic-bezier(.4,0,.2,1); }
.alarm-subtext { animation: fadeSlideIn 0.32s ease-out; }

/* HERO */
.hero { max-width:900px; margin:0 auto 24px auto; text-align:center; }
.hero-title { font-size:32px; font-weight:700; letter-spacing:-0.02em; margin-bottom:6px; }
.hero-sub { font-size:12px; text-transform:uppercase; letter-spacing:1.5px; color:#64748b; margin-bottom:10px; }
.hero-desc { font-size:14px; color:#475569; max-width:540px; margin:0 auto; line-height:1.5; }
.hero-note { margin-top:10px; font-size:12px; color:#64748b; }
.hero-example{
  margin-top:14px;
  font-size:13px;
  color:#334155;
  background:#f1f5f9;
  padding:10px 14px;
  border-radius:8px;
  display:inline-block;
}

.divider{ border:none; border-top:1px solid #e5e7eb; margin:28px 0; }

/* WORKFLOW */
.workflow { max-width:900px; margin:0 auto 24px auto; display:flex; align-items:center; justify-content:center; gap:12px; }
.workflow-step { display:flex; flex-direction:column; align-items:center; font-size:11px; color:#64748b; }
.step-number {
  width:28px; height:28px; border-radius:50%;
  border:1px solid #d1d5db;
  display:flex; align-items:center; justify-content:center;
  font-weight:600; margin-bottom:6px; background:white;
}
.workflow-step.active .step-number { background:#111827; color:white; border:none; }
.workflow-step.active .step-label { color:#111827; font-weight:600; }
.workflow-divider { width:60px; height:1px; background:#e5e7eb; }

/* Engine status */
.engine-status{
  max-width:900px;
  margin:0 auto 14px auto;
  padding:14px 18px;
  background:#0f172a;
  color:white;
  border-radius:10px;
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:13px;
  position:relative;
}
.engine-dot{
  width:8px; height:8px;
  background:#22c55e;
  border-radius:50%;
  box-shadow:0 0 8px #22c55e;
  position:absolute;
  left:18px;
  top:18px;
}
.engine-text{ font-weight:600; letter-spacing:.3px; padding-left:14px; }
.engine-sub{ opacity:.7; font-size:12px; padding-left:14px; }

/* access banner */
#accessBanner{
  max-width:900px;
  margin:0 auto 22px auto;
  background:#0f172a;
  color:#fff;
  text-align:center;
  padding:10px 12px;
  font-size:13px;
  border-radius:10px;
}

/* misc */
.credibility-strip{ max-width:900px; margin:8px auto 22px auto; text-align:center; font-size:12px; color:#64748b; }
.risk-warning{ margin-top:6px; font-size:12px; color:#475569; text-align:center; }

.lock-note{
  margin-top:10px;
  font-size:12px;
  color:#64748b;
  text-align:center;
}
.lock-note a{ color:#155eef; text-decoration:none; font-weight:700; }
.lock-note a:hover{ text-decoration:underline; }