: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;
  animation: fadeSlideIn 0.22s cubic-bezier(.4,0,.2,1);
}

.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;
  animation: fadeSlideIn 0.32s ease-out;
}

.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); }
}

/* 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 */

.engine-status{
  max-width:900px;
  margin:0 auto 20px 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; }

.credibility-strip{
  max-width:900px;
  margin:6px auto 26px auto;
  text-align:center;
  font-size:12px;
  color:#64748b;
}

.risk-warning{
  margin-top:6px;
  font-size:12px;
  color:#475569;
  text-align:center;
}