:root{
    --dark:#021616;
    --panel:#0B3B3D;
    --panel-2:#0F4749;
    --teal:#028090;
    --seafoam:#00A896; --mint:#02C39A;
    --light:#F4FBFA; --ink:#16302F; --muted:#7FA6A2; --muted-dark:#5C7A78;
    --danger:#E0776B; --danger-bg:#3A1F1C; --ok-bg:#123A34;
    --serif: Cambria, Georgia, "Times New Roman", serif;
    --sans: -apple-system, "Segoe UI", Calibri, Roboto, sans-serif;
    --mono: "Courier New", Consolas, monospace;
  }
*{ box-sizing:border-box; }
  body{
    margin:0; background: radial-gradient(circle at 85% -10%, #042B2C 0%, var(--dark) 20%), var(--dark);
    color: var(--light); font-family: var(--sans); padding: 32px 16px 64px; min-height:100vh;
  }
  .wrap{ max-width: 980px; margin: 0 auto; }
  header{ margin-bottom: 28px; }
  .eyebrow{ font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--mint); font-weight: 700; margin-bottom: 8px; }
  h1{ font-family: var(--serif); font-size: clamp(28px, 4vw, 40px); margin: 0 0 8px; font-weight: 700; color: var(--light); }
  .lead{ color: var(--muted); font-size: 15px; max-width: 620px; line-height: 1.5; }

  .tabs{ display:flex; gap: 4px; margin: 28px 0 20px; border-bottom: 1px solid rgba(255,255,255,0.08); flex-wrap: wrap; }
  .tab{ background: none; border: none; color: var(--muted); font-family: var(--sans); font-size: 14.5px; font-weight: 600;
    padding: 10px 18px; cursor: pointer; position: relative; border-radius: 8px 8px 0 0; transition: color .2s ease; }
  .tab:hover{ color: var(--light); }
  .tab.active{ color: var(--mint); }
  .tab.active::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background: var(--mint); border-radius: 2px; }

  .panel{ display:none; }
  .panel.active{ display:block; animation: fadeIn .25s ease; }
  @keyframes fadeIn{ from{opacity:0; transform: translateY(4px);} to{opacity:1; transform:none;} }

  .card{ background: var(--panel); border: 1px solid rgba(255,255,255,0.06); border-radius: 14px; padding: 24px; margin-bottom: 18px; }
  .card h2{ font-family: var(--serif); font-size: 18px; margin: 0 0 16px; color: var(--light); display:flex; align-items:center; gap:10px; }
  .card h2 .dot{ width:8px; height:8px; border-radius:50%; background: var(--mint); display:inline-block; }

  /* Ladder / stepper */
  .ladder{ display:flex; flex-direction:column; gap: 8px; margin-bottom: 6px; }
  .rung{ display:flex; align-items:center; gap: 12px; padding: 10px 14px; border-radius: 10px; background: var(--panel-2);
    border: 1px solid rgba(255,255,255,0.05); opacity: 0.4; transition: all .25s ease; }
  .rung.current{ opacity: 1; border-color: var(--mint); box-shadow: 0 0 0 1px var(--mint) inset; }
  .rung.done-ok{ opacity: 1; background: var(--ok-bg); }
  .rung.done-fail{ opacity: 1; background: var(--danger-bg); }
  .rung .num{ font-family: var(--serif); font-weight:700; font-size: 18px; color: var(--mint); width: 22px; text-align:center; flex-shrink:0; }
  .rung .info{ flex:1; }
  .rung .name{ font-weight:700; font-size: 14px; color: var(--light); }
  .rung .desc{ font-size: 12.5px; color: var(--muted); margin-top:2px; }
  .rung .status{ font-size: 18px; flex-shrink:0; }

  .question-box{ margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.08); }
  .question-box .q{ font-family: var(--serif); font-size: 19px; margin-bottom: 14px; color: var(--light); }
  .btn-row{ display:flex; gap: 12px; flex-wrap: wrap; }
  .btn{ font-family: var(--sans); font-weight: 700; font-size: 14px; border: none; border-radius: 9px;
    padding: 12px 22px; cursor: pointer; transition: transform .12s ease, box-shadow .2s ease; }
  .btn:active{ transform: scale(0.98); }
  .btn-yes{ background: var(--mint); color: var(--dark); }
  .btn-yes:hover{ box-shadow: 0 4px 18px rgba(2,195,154,0.35); }
  .btn-no{ background: transparent; color: var(--danger); border: 1px solid rgba(224,119,107,0.5); }
  .btn-no:hover{ background: rgba(224,119,107,0.1); }
  .btn-ghost{ background: transparent; color: var(--muted); border: 1px dashed rgba(255,255,255,0.2); }
  .btn-ghost:hover{ color: var(--light); border-color: var(--light); }

  .result{ padding: 18px; border-radius: 12px; background: var(--danger-bg); border: 1px solid rgba(224,119,107,0.4); }
  .result.success{ background: var(--ok-bg); border-color: rgba(2,195,154,0.4); }
  .result h3{ font-family: var(--serif); font-size: 17px; margin: 0 0 10px; color: var(--light); }
  .result p{ font-size: 14px; line-height: 1.6; color: var(--light); margin: 0 0 10px; }
  .result .label{ font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); margin: 12px 0 6px; font-weight:700; }
  .code{ font-family: var(--mono); font-size: 13.5px; background: var(--dark); color: var(--mint); padding: 8px 12px;
    border-radius: 6px; display:block; margin-bottom: 6px; }

  /* Error translator */
  .err-list{ display:flex; flex-direction:column; gap: 10px; }
  .err-item{ background: var(--panel-2); border: 1px solid rgba(255,255,255,0.05); border-radius: 10px;
    padding: 14px 16px; cursor: pointer; transition: border-color .2s ease; }
  .err-item:hover{ border-color: var(--mint); }
  .err-item.open{ border-color: var(--mint); }
  .err-item .msg{ font-family: var(--mono); font-size: 13.5px; color: var(--mint); font-weight:700; }
  .err-item .body{ display:none; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.08); font-size: 13.5px; color: var(--light); line-height: 1.6; }
  .err-item.open .body{ display:block; }
  .err-item .tag{ display:inline-block; font-size: 10.5px; text-transform:uppercase; letter-spacing:.6px; color: var(--muted); margin-top: 6px; }

  .foot-note{ font-size: 12.5px; color: var(--muted-dark); margin-top: 22px; line-height:1.6; }

  @media (max-width: 560px){ .card{ padding: 18px; } }