:root{
  --ink:#08080B;
  --panel:#101015;
  --gold:#FFC61A;
  --paper:#F0EDE6;
  --mute:#77736B;
  --line:rgba(240,237,230,.12);
  --err:#FF6A5E;
  --ok:#3DDC84;
  --pad:clamp(16px,3.4vw,52px);
  --display:"Chakra Petch",ui-sans-serif,system-ui,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}

/* ── language switcher, fixed to the screen corner ─────────────────── */
.lang-switcher{
  position:fixed;
  top:14px;
  right:16px;
  z-index:50;
  display:flex;
  gap:6px;
}
.lang-flag{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  width:26px;
  padding:0;
  background:none;
  border:0;
  cursor:pointer;
  opacity:.5;
  transition:opacity .2s ease;
}
.lang-flag img{display:block;width:26px;height:26px}
.lang-flag:hover{opacity:.8}
.lang-flag.active{opacity:1}
.lang-flag .lang-label{
  font-family:var(--mono);
  font-size:8px;
  letter-spacing:.08em;
  color:var(--gold);
  visibility:hidden;
  line-height:1;
}
.lang-flag.active .lang-label{visibility:visible}

body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--display);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  position:relative;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(45deg,rgba(240,237,230,.022) 0 1px,transparent 1px 52px),
    radial-gradient(70vw 55vh at 50% 0%, rgba(255,198,26,.08), transparent 70%);
  z-index:0;
}

header, main{position:relative;z-index:1}

/* ── topbar ─────────────────────────────────────────────────────── */
.topbar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  padding:var(--pad) var(--pad) clamp(14px,2.4vh,24px);
}

.brand{display:flex;flex-direction:column;gap:6px}
.brand-mark{
  font-weight:700;
  font-size:clamp(20px,3vw,32px);
  letter-spacing:-.02em;
  text-transform:uppercase;
}
.brand-mark em{
  font-style:normal;
  color:#0A0A0C;
  background:var(--gold);
  padding:.02em .22em .08em;
  margin-left:.12em;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
}
.brand-sub{
  font-family:var(--mono);
  font-size:clamp(9px,1vw,11px);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--mute);
}

main{
  max-width:920px;
  margin:0 auto;
  padding:0 var(--pad) 60px;
}

main.centered{
  min-height:80vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-top:0;
  padding-bottom:0;
}

/* ── panels ─────────────────────────────────────────────────────── */
.panel{
  --c:12px;
  background:var(--panel);
  box-shadow:inset 0 0 0 1px var(--line);
  clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c));
  padding:clamp(16px,2.4vw,24px);
}

.panel-label{
  display:block;
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--mute);
  margin-bottom:14px;
}

/* ── auth card ──────────────────────────────────────────────────── */
.auth-card{
  width:min(380px, 100%);
  display:flex;
  flex-direction:column;
  gap:16px;
}
.auth-card h1{
  font-size:1.4rem;
  letter-spacing:-.01em;
  margin-bottom:4px;
}
.auth-card .sub{
  font-family:var(--mono);
  font-size:11px;
  color:var(--mute);
  margin-bottom:10px;
}
.field{display:flex;flex-direction:column;gap:6px}
.field label{
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--mute);
}
.field .hint{
  font-family:var(--mono);
  font-size:9.5px;
  color:var(--mute);
}
.forgot-link{
  align-self:flex-end;
  font-family:var(--mono);
  font-size:10px;
  color:var(--mute);
  text-decoration:none;
}
.forgot-link:hover{color:var(--gold)}
.remember-device-label{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--mono);
  font-size:11px;
  color:var(--mute);
  cursor:pointer;
  margin-top:-6px;
}
.remember-device-label input{width:14px;height:14px;accent-color:var(--gold);cursor:pointer}
.success{
  color:var(--ok);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.04em;
  min-height:1em;
}
.auth-switch{
  font-family:var(--mono);
  font-size:11px;
  color:var(--mute);
  text-align:center;
}
.auth-switch a{color:var(--gold);text-decoration:none}
.auth-switch a:hover{text-decoration:underline}
.divider{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mute);
}
.divider::before, .divider::after{content:"";flex:1;height:1px;background:var(--line)}

[hidden]{ display:none !important; }

input{
  --c:7px;
  width:100%;
  display:block;
  font-family:var(--display);
  font-size:14px;
  color:var(--paper);
  background:rgba(240,237,230,.04);
  border:0;
  padding:.85em 1em;
  box-shadow:inset 0 0 0 1px rgba(240,237,230,.16);
  clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c));
  transition:box-shadow .2s ease;
}
input::placeholder{color:#57534C}
input:focus{outline:none;box-shadow:inset 0 0 0 1px var(--gold)}

/* ── buttons ────────────────────────────────────────────────────── */
.cta{
  --c:9px;
  width:100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.7em;
  font-family:var(--mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink);
  background:var(--paper);
  border:0;
  text-decoration:none;
  padding:.9em 1.4em;
  cursor:pointer;
  clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c));
  transition:background .2s ease,color .2s ease;
}
.cta:hover,.cta:focus-visible{background:var(--gold);color:#0A0A0C}
.cta.google{background:none;color:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.cta.google:hover{box-shadow:inset 0 0 0 1px var(--gold);color:var(--gold);background:none}

.back-link{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.1em;
  color:var(--mute);
  text-decoration:none;
}
.back-link:hover{color:var(--gold)}

.account-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding:8px 0;
}
.account-row + .account-row{border-top:1px solid var(--line)}
.account-main{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.account-label{font-weight:600;font-size:.92rem}
.account-status{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.08em;
  color:var(--mute);
}
.account-status.is-loggedin{color:var(--ok)}
.account-status.is-progress{color:var(--gold)}
.account-actions{display:flex;gap:8px}

.account-btn{
  --c:6px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  background:none;
  color:var(--gold);
  box-shadow:inset 0 0 0 1px rgba(255,198,26,.4);
  padding:.55em 1em;
  cursor:pointer;
  clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c));
  transition:box-shadow .2s ease;
}
.account-btn:hover{box-shadow:inset 0 0 0 1px var(--gold)}
.account-btn:disabled{opacity:.5;cursor:default}
.account-btn.cancel{color:var(--err);box-shadow:inset 0 0 0 1px rgba(255,106,94,.35)}
.account-btn.cancel:hover{box-shadow:inset 0 0 0 1px var(--err)}

.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  flex:none;
  color:var(--mute);
  box-shadow:inset 0 0 0 1px var(--line);
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);
  transition:color .2s ease,box-shadow .2s ease;
}
.icon-btn svg{width:15px;height:15px}
.icon-btn:hover{color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}

.error{
  color:var(--err);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.04em;
  min-height:1em;
}

a:focus-visible, button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

@media (max-width:640px){
  .topbar{flex-direction:column;align-items:flex-start}
}