@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,500&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --bg:#eef1f4;
  --surface:#ffffff;
  --surface2:#f5f7fa;
  --border:#d7dee6;
  --ink:#0f2a3d;
  --ink-dim:#5c6675;
  --accent:#0f6e6e;
  --accent-soft:#e0f2f0;
  --navy:#0d2b4e;
  --correct:#2c8657;
  --correct-soft:#e0f3e7;
  --incorrect:#b8402f;
  --incorrect-soft:#fae3de;
  --shadow: 0 1px 2px rgba(20,26,36,.06), 0 8px 24px rgba(20,26,36,.08);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0b1520;
    --surface:#122234;
    --surface2:#17283b;
    --border:#26384c;
    --ink:#e7ecf1;
    --ink-dim:#93a5b8;
    --accent:#5fd3c4;
    --accent-soft:rgba(95,211,196,.14);
    --navy:#9fc2e8;
    --correct:#5fcb8d;
    --correct-soft:rgba(95,203,141,.14);
    --incorrect:#e37a6a;
    --incorrect-soft:rgba(227,122,106,.14);
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 28px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --bg:#0b1520; --surface:#122234; --surface2:#17283b; --border:#26384c;
  --ink:#e7ecf1; --ink-dim:#93a5b8; --accent:#5fd3c4; --accent-soft:rgba(95,211,196,.14);
  --navy:#9fc2e8; --correct:#5fcb8d; --correct-soft:rgba(95,203,141,.14);
  --incorrect:#e37a6a; --incorrect-soft:rgba(227,122,106,.14);
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 28px rgba(0,0,0,.4);
}

*{box-sizing:border-box;}
body.varc-shell{
  background:var(--bg); color:var(--ink); font-family:'IBM Plex Sans', system-ui, sans-serif;
  margin:0; min-height:100vh; line-height:1.5;
  display:flex; align-items:center; justify-content:center; padding:24px 16px;
}
h1,h2,h3{font-family:'Fraunces', Georgia, serif; text-wrap:balance; margin:0;}
.mono{font-family:'IBM Plex Mono', ui-monospace, monospace;}

.varc-card{
  width:100%; max-width:420px; background:var(--surface); border:1px solid var(--border);
  border-radius:18px; padding:32px 28px; box-shadow:var(--shadow);
}
.varc-brand{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.varc-brand img{ width:34px; height:34px; }
.varc-brand span{ font-family:'Fraunces'; font-size:21px; font-weight:600; color:var(--navy); }
.varc-tagline{ color:var(--ink-dim); font-size:13.5px; margin-bottom:24px; }

.varc-field{ margin-bottom:16px; }
.varc-field label{ display:block; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-dim); margin-bottom:6px; }
.varc-field input, .varc-field select{
  width:100%; padding:11px 12px; border-radius:10px; border:1px solid var(--border);
  background:var(--surface2); color:var(--ink); font-family:inherit; font-size:14.5px;
}
.varc-field input:focus, .varc-field select:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.varc-hint{ font-size:11.5px; color:var(--ink-dim); margin-top:5px; }

button.varc-primary{
  width:100%; background:var(--accent); color:#fff; border:none; padding:13px 20px;
  border-radius:10px; font-weight:600; font-size:14.5px; cursor:pointer; font-family:inherit;
  margin-top:6px;
}
button.varc-primary:disabled{ opacity:.55; cursor:not-allowed; }
button.varc-primary:not(:disabled):hover{ filter:brightness(1.06); }

.varc-msg{ padding:11px 13px; border-radius:10px; font-size:13.5px; margin-bottom:16px; display:none; }
.varc-msg.show{ display:block; }
.varc-msg.err{ background:var(--incorrect-soft); border:1px solid var(--incorrect); color:var(--ink); }
.varc-msg.ok{ background:var(--correct-soft); border:1px solid var(--correct); color:var(--ink); }

.varc-switch{ margin-top:20px; font-size:13px; color:var(--ink-dim); text-align:center; }
.varc-switch a{ color:var(--accent); font-weight:600; text-decoration:none; }
.varc-switch a:hover{ text-decoration:underline; }

.varc-acct-bar{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--ink-dim);}
.varc-acct-bar .varc-acct-name{font-weight:600;}
.varc-acct-bar a{color:inherit;text-decoration:underline;cursor:pointer;}