/* SkillsCoin — shared surface for the account screens.
 *
 * Same tokens as the landing page and the dashboard, defined once here so the
 * four account screens cannot drift away from the two that already exist.
 * Light is the base palette; dark is applied by preference and by the stamp,
 * and every colour comes out of a token so neither theme can end up painting
 * one theme's text on the other's ground. */

:root{
  --ground:#F4F6FA; --panel:#FFFFFF; --panel-2:#F7F9FC; --raise:#EDF1F7;
  --rule:#DCE2EC; --rule-2:#E8EDF4;
  --ink:#0D1421; --ink-2:#4B586F; --ink-3:#7B889E;
  --gold:#8A6524; --gold-dim:#9F753B; --gold-bg:rgba(138,101,36,.09); --gold-pale:#7A5C1F;
  --pos:#12805A; --pos-bg:rgba(18,128,90,.10);
  --warn:#8A6410; --warn-bg:rgba(138,100,16,.10);
  --neg:#B03A33;  --neg-bg:rgba(176,58,51,.10);
  --info:#2C6CA8; --info-bg:rgba(44,108,168,.10);
  --focus:#2C6CA8;
  --fd:'Archivo',-apple-system,BlinkMacSystemFont,sans-serif;
  --fb:'Public Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --fm:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#080B12; --panel:#0F1421; --panel-2:#151C2C; --raise:#1B2436;
    --rule:#212B3E; --rule-2:#18202F;
    --ink:#EAEEF6; --ink-2:#96A2B9; --ink-3:#5F6C85;
    --gold:#CBA457; --gold-dim:#9F753B; --gold-bg:rgba(203,164,87,.10); --gold-pale:#FAF3AF;
    --pos:#3FB68B; --pos-bg:rgba(63,182,139,.12);
    --warn:#D9A441; --warn-bg:rgba(217,164,65,.12);
    --neg:#E0645C;  --neg-bg:rgba(224,100,92,.12);
    --info:#5B9BD5; --info-bg:rgba(91,155,213,.12);
    --focus:#7FB6E8;
  }
}
:root[data-theme="dark"]{
  --ground:#080B12; --panel:#0F1421; --panel-2:#151C2C; --raise:#1B2436;
  --rule:#212B3E; --rule-2:#18202F;
  --ink:#EAEEF6; --ink-2:#96A2B9; --ink-3:#5F6C85;
  --gold:#CBA457; --gold-dim:#9F753B; --gold-bg:rgba(203,164,87,.10); --gold-pale:#FAF3AF;
  --pos:#3FB68B; --pos-bg:rgba(63,182,139,.12);
  --warn:#D9A441; --warn-bg:rgba(217,164,65,.12);
  --neg:#E0645C;  --neg-bg:rgba(224,100,92,.12);
  --info:#5B9BD5; --info-bg:rgba(91,155,213,.12);
  --focus:#7FB6E8;
}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--ground);color:var(--ink);font-family:var(--fb);font-size:15px;
  line-height:1.55;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;
  min-height:100vh}
h1,h2,h3{font-family:var(--fd);margin:0;letter-spacing:-.024em;line-height:1.14}
p{margin:0}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}

/* ------------------------------------------------------------- the plate --- */

.stage{min-height:100vh;display:grid;place-items:center;padding:32px 20px 56px}
.plate{width:100%;max-width:452px}

.brand{display:flex;align-items:center;gap:12px;justify-content:center;margin-bottom:26px}
.brand img{width:38px;height:38px;object-fit:contain;display:block}
.brand .nm{font-family:var(--fd);font-size:19px;font-weight:700;letter-spacing:-.035em}
.brand .nm span{color:var(--gold)}

.card{background:var(--panel);border:1px solid var(--rule);border-radius:15px;
  padding:30px 28px 26px}
.card>.hd{margin-bottom:22px}
.card .lbl{font-family:var(--fm);font-size:9.5px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:9px}
.card h1{font-size:25px;margin-bottom:8px}
.card .sub{font-size:13.5px;color:var(--ink-2);line-height:1.55}

/* --------------------------------------------------------------- fields --- */

.form{display:flex;flex-direction:column;gap:15px}
.f{display:flex;flex-direction:column;gap:6px}
.f>label{font-size:12.5px;font-weight:600;color:var(--ink-2);display:flex;
  justify-content:space-between;align-items:baseline;gap:10px}
.f>label .opt{font-weight:400;color:var(--ink-3);font-size:11.5px}
/* 16px is not a style choice — anything smaller makes iOS zoom the whole page
   the moment the field takes focus, and the layout never comes back. */
.f input,.f select,.f textarea{background:var(--panel-2);border:1px solid var(--rule);
  border-radius:9px;padding:11px 13px;font-size:16px;min-height:46px;width:100%;
  transition:border-color .12s}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--focus);outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 18%,transparent)}
.f input[aria-invalid="true"]{border-color:var(--neg)}
.f .hint{font-size:11.5px;color:var(--ink-3);line-height:1.45}
.f .err{font-size:11.5px;color:var(--neg);line-height:1.45;font-weight:500}
.f input:disabled,.f select:disabled{opacity:.55;cursor:not-allowed}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:15px}
@media(max-width:440px){ .row2{grid-template-columns:1fr} }

/* Strength is advice, not a gate. The only hard rule is the length, and the
   meter says which of the four things would move it rather than scoring the
   password out of five and leaving the holder to guess. */
.meter{display:flex;gap:4px;margin-top:2px}
.meter i{height:3px;flex:1;border-radius:2px;background:var(--rule);transition:background .18s}
.meter.s1 i:nth-child(-n+1){background:var(--neg)}
.meter.s2 i:nth-child(-n+2){background:var(--warn)}
.meter.s3 i:nth-child(-n+3){background:var(--warn)}
.meter.s4 i{background:var(--pos)}

/* -------------------------------------------------------------- buttons --- */

.btn{font-family:var(--fb);font-size:14px;font-weight:600;border-radius:9px;
  min-height:46px;padding:0 18px;display:inline-flex;align-items:center;
  justify-content:center;gap:8px;border:1px solid transparent;width:100%;
  transition:filter .12s,opacity .12s}
.btn.pri{background:var(--gold);color:#10131A;border-color:var(--gold)}
.btn.pri:hover:not(:disabled){filter:brightness(1.07)}
.btn.go{background:var(--gold);color:#fff;border-color:var(--gold)}
.btn.go:hover:not(:disabled){filter:brightness(1.07)}
.btn.ghost{background:transparent;border-color:var(--rule);color:var(--ink-2)}
.btn.ghost:hover:not(:disabled){background:var(--panel-2);color:var(--ink)}
.btn.neg{background:transparent;border-color:color-mix(in srgb,var(--neg) 45%,transparent);
  color:var(--neg)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn .sp{width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;
  border-radius:50%;animation:spin .6s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){ .btn .sp{animation-duration:2.4s} }

/* --------------------------------------------------------------- notes --- */

.note{border-radius:10px;padding:12px 14px;font-size:13px;line-height:1.5;
  border:1px solid transparent;display:flex;gap:10px;align-items:flex-start}
.note:before{content:'';width:7px;height:7px;border-radius:50%;flex:none;margin-top:6px;
  background:currentColor}
.note.ok{background:var(--pos-bg);border-color:color-mix(in srgb,var(--pos) 34%,transparent);color:var(--pos)}
.note.no{background:var(--neg-bg);border-color:color-mix(in srgb,var(--neg) 34%,transparent);color:var(--neg)}
.note.wa{background:var(--warn-bg);border-color:color-mix(in srgb,var(--warn) 34%,transparent);color:var(--warn)}
.note.in{background:var(--info-bg);border-color:color-mix(in srgb,var(--info) 34%,transparent);color:var(--info)}
.note b{color:inherit}
.note .tx{color:var(--ink-2);font-weight:400}
.note .tx b{color:var(--ink)}

.foot{margin-top:20px;padding-top:18px;border-top:1px solid var(--rule-2);
  font-size:13px;color:var(--ink-3);text-align:center;line-height:1.6}
.foot a{color:var(--gold);font-weight:600}
.foot a:hover{text-decoration:underline}

.legal{margin-top:20px;font-family:var(--fm);font-size:10.5px;color:var(--ink-3);
  line-height:1.75;text-align:center}
.legal a{text-decoration:underline}

.tabs{display:flex;gap:2px;background:var(--panel-2);border:1px solid var(--rule);
  border-radius:10px;padding:3px;margin-bottom:22px}
.tabs button{flex:1;min-height:38px;border-radius:7px;font-size:13.5px;font-weight:600;
  color:var(--ink-3)}
.tabs button[aria-selected="true"]{background:var(--panel);color:var(--ink);
  box-shadow:0 1px 3px rgba(0,0,0,.10)}

.hidden{display:none!important}
/* An author `display` on a class beats the user agent's [hidden] rule, so a
   .note or a .boot with the attribute set stayed on screen as an empty box.
   Setting the attribute should hide the thing; here it does. */
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}