:root{
    --ink:#0E1621;
    --panel:#141F2E;
    --panel-2:#101A27;
    --line:#24374A;
    --text:#EAF1F7;
    --muted:#8CA0B3;
    --ok:#2FD9A4;
    --warn:#F2B84B;
    --danger:#FF6B5E;
    --neutral:#5B6B7A;
    --neutral-dim:#1B2732;
  }

  *{ box-sizing:border-box; }

  html,body{
    margin:0;
    min-height:100vh;
    background:
      radial-gradient(1200px 600px at 50% -10%, #16233350, transparent),
      var(--ink);
    color:var(--text);
    font-family:'Inter', system-ui, sans-serif;
    -webkit-font-smoothing:antialiased;
  }

  body{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:32px 18px;
  }

  .wrap{ width:100%; max-width:440px; }

  .lang-toggle{
    display:flex;
    justify-content:center;
    gap:6px;
    margin-bottom:14px;
  }
  .lang-btn{
    font-family:'JetBrains Mono', monospace;
    font-size:11px;
    letter-spacing:.08em;
    padding:5px 12px;
    border-radius:999px;
    border:1px solid var(--line);
    background:transparent;
    color:var(--muted);
    cursor:pointer;
    transition:background .15s ease, color .15s ease, border-color .15s ease;
  }
  .lang-btn:hover{ color:var(--text); }
  .lang-btn.active{ background:var(--panel); color:var(--text); border-color:var(--muted); }

  .eyebrow{
    text-align:center;
    font-family:'JetBrains Mono', monospace;
    font-size:11px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:18px;
  }
  .eyebrow strong{ color:var(--text); font-weight:500; }

  .card{
    background:linear-gradient(180deg, var(--panel), var(--panel-2));
    border:1px solid var(--line);
    border-radius:20px;
    padding:36px 28px 26px;
    box-shadow:0 20px 60px -20px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.03);
    position:relative;
    overflow:hidden;
  }

  .seal{
    width:104px; height:104px; margin:0 auto 20px;
    position:relative; display:flex; align-items:center; justify-content:center;
  }
  .seal svg{ width:100%; height:100%; display:block; }
  .seal-ring{ fill:none; stroke:var(--line); stroke-width:2.5; }
  .seal-sweep{
    fill:none; stroke:var(--muted); stroke-width:2.5; stroke-linecap:round;
    stroke-dasharray:70 400; transform-origin:52px 52px;
    animation:sweep 1.1s linear infinite; opacity:.9;
  }
  @keyframes sweep{ to{ transform:rotate(360deg); } }

  .seal-icon{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    opacity:0; transform:scale(.6);
    transition:opacity .35s ease, transform .4s cubic-bezier(.2,1.4,.4,1);
  }
  .seal-icon.show{ opacity:1; transform:scale(1); }
  .seal-icon svg{ width:46px; height:46px; }

  .status-ok   .seal-ring{ stroke:var(--ok); }
  .status-warn .seal-ring{ stroke:var(--warn); }
  .status-danger .seal-ring{ stroke:var(--danger); }
  .status-neutral .seal-ring{ stroke:var(--neutral); }

  .status-line{ text-align:center; margin-bottom:26px; }
  .status-title{
    font-family:'Space Grotesk', sans-serif; font-size:20px; font-weight:600;
    letter-spacing:-0.01em; margin:0 0 4px;
  }
  .status-title.ok{ color:var(--ok); }
  .status-title.warn{ color:var(--warn); }
  .status-title.danger{ color:var(--danger); }
  .status-title.neutral{ color:var(--muted); }
  .status-sub{ font-size:13px; color:var(--muted); margin:0; }

  .person{
    display:flex; align-items:center; gap:14px; padding:16px;
    background:rgba(255,255,255,.02); border:1px solid var(--line);
    border-radius:14px; margin-bottom:18px;
  }
  .avatar{
    width:52px; height:52px; border-radius:12px; object-fit:cover;
    background:var(--neutral-dim); flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:18px; color:var(--muted);
  }
  .person-info{ min-width:0; }
  .person-name{
    font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:17px;
    line-height:1.25; margin:0 0 2px; overflow-wrap:anywhere;
  }
  .person-role{ font-size:13px; color:var(--muted); margin:0; overflow-wrap:anywhere; }

  .manifest{
    border-top:1px dashed var(--line); padding-top:16px;
    display:grid; grid-template-columns:1fr 1fr; gap:12px 16px;
  }
  .manifest-item{ min-width:0; }
  .manifest-item-wide{ grid-column:1 / -1; }
  .manifest-label{
    font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:.08em;
    text-transform:uppercase; color:var(--muted); margin:0 0 3px;
  }
  .manifest-value{
    font-family:'JetBrains Mono', monospace; font-size:12.5px; color:var(--text);
    margin:0; overflow-wrap:anywhere;
  }
  .manifest-value.id{ letter-spacing:.02em; }

  .footer{ text-align:center; margin-top:20px; font-size:11px; color:var(--neutral); }
  .footer .dot{ color:var(--line); margin:0 6px; }

  .hidden{ display:none !important; }

  @media (prefers-reduced-motion: reduce){
    .seal-sweep{ animation:none; opacity:.4; }
    .seal-icon{ transition:none; }
  }