/* Shared design system for every Atoll page: tokens, reset, header, login gate,
   footer. Page-specific styles (editor controls, landing sections, etc.) stay
   inline in each page. Keep this file the single source of truth for anything
   that appears on more than one page — the header and login-gate CSS drifting
   out of sync between pages has already caused real bugs twice. */

:root{
  --abyss:#05141F;
  --deep:#0A2635;
  --current:#14495C;
  --kelp:#2E8C7E;
  --bloom:#FF9EB5;
  --glass:#A8E6D6;
  --foam:#EFF6F2;

  --ink:var(--foam);
  --ink-dim:#9FB6BE;
  --line:rgba(168,230,214,.18);
  --line-strong:rgba(168,230,214,.34);

  --display:"Fraunces",Georgia,serif;
  --body:"Karla",system-ui,-apple-system,sans-serif;

  --pad:clamp(16px,4vw,34px);
  --r-sm:12px;
  --r-md:18px;
  --r-lg:26px;
  --r-pill:999px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}

body{
  min-height:100vh;
  min-height:100dvh;
  background:
    radial-gradient(120% 80% at 50% -10%, #0E3446 0%, transparent 60%),
    var(--abyss);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.55;
}

a{color:inherit;text-decoration:none}
button,input{font-family:inherit}

/* ---------- header (identical on every page) ---------- */
header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px var(--pad);
  border-bottom:1px solid var(--line);
  flex-wrap:wrap;
  gap:10px;
}
.wordmark{
  font-family:var(--display);
  font-weight:600;
  font-size:22px;
  letter-spacing:.02em;
  color:var(--foam);
}
.wordmark span{color:var(--glass)}

/* Explicit "go home" link for every subpage — the wordmark already links home,
   but that reads as a logo, not a control, so it wasn't discoverable enough. */
.back-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  color:var(--ink-dim);
  margin-bottom:10px;
}
.back-link:hover{color:var(--foam)}

.header-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.face-icon{
  width:40px;height:40px;
  border-radius:4px;
  image-rendering:pixelated;
  border:1px solid var(--line-strong);
  vertical-align:middle;
  flex:none;
}
.admin-btn{
  font-size:14px;
  color:var(--bloom);
  border:1px solid var(--bloom);
  border-radius:var(--r-pill);
  padding:7px 14px;
  white-space:nowrap;
}
.admin-btn:hover{background:rgba(255,158,181,.12)}
.balance{
  font-family:"Space Mono",ui-monospace,monospace;
  font-size:14px;
  color:var(--foam);
  background:rgba(168,230,214,.1);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  padding:7px 14px;
  white-space:nowrap;
}
.balance b{color:var(--glass);font-weight:400}
.user-pill{
  font-size:14px;
  color:var(--ink-dim);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  padding:7px 14px;
  white-space:nowrap;
}
.logout-btn{
  font-size:14px;
  color:var(--ink-dim);
  background:none;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  padding:7px 14px;
  cursor:pointer;
  white-space:nowrap;
}
.logout-btn:hover{border-color:var(--bloom);color:var(--bloom)}
.logout-btn:disabled{opacity:.6;cursor:default}

footer{
  padding:24px var(--pad) 40px;
  text-align:center;
  color:var(--ink-dim);
  font-size:13px;
}

/* ---------- login gate (identical on every page) ---------- */
#login-gate{
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--pad);
}
#login-gate[hidden]{display:none}
.login-card{
  width:100%;
  max-width:380px;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:rgba(10,38,53,.6);
  padding:32px 28px;
  text-align:center;
}
.login-card h2{
  font-family:var(--display);
  font-weight:600;
  font-size:24px;
  margin:0 0 8px;
  color:var(--foam);
}
.login-card p{margin:0 0 20px;color:var(--ink-dim);font-size:14px}
.login-face{
  width:64px;height:64px;
  border-radius:var(--r-md);
  image-rendering:pixelated;
  border:2px solid var(--line-strong);
  margin:0 auto 16px;
  display:block;
}
.login-card input{
  width:100%;
  padding:12px 16px;
  border:1px solid var(--line-strong);
  border-radius:var(--r-md);
  background:rgba(255,255,255,.04);
  color:var(--foam);
  font-size:16px;
  text-align:center;
  margin-bottom:12px;
  outline:none;
}
.login-card input:focus{border-color:var(--glass)}
.login-card button{
  width:100%;
  padding:12px;
  border:none;
  border-radius:var(--r-md);
  background:var(--kelp);
  color:var(--foam);
  font-weight:600;
  font-size:15px;
  cursor:pointer;
}
.login-card button:hover{filter:brightness(1.1)}
.login-card button:disabled{opacity:.6;cursor:default}
.login-note{margin-top:12px;font-size:13px;color:var(--bloom);min-height:1.2em}

/* ---------- confirm modal (shared: purchase confirm, admin refund confirm, etc) ---------- */
.modal-overlay{
  position:fixed;inset:0;
  background:rgba(5,20,31,.72);
  backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;
  padding:var(--pad);
  z-index:50;
}
.modal-overlay[hidden]{display:none}
.modal-card{
  width:100%;
  max-width:360px;
  border:1px solid var(--line-strong);
  border-radius:var(--r-lg);
  background:var(--deep);
  padding:26px 24px;
  text-align:center;
}
.modal-card h3{
  font-family:var(--display);
  font-weight:600;
  font-size:20px;
  margin:0 0 10px;
  color:var(--foam);
}
.modal-card p,.modal-card>div{margin:0 0 20px;color:var(--ink-dim);font-size:14px;line-height:1.5}
.modal-actions{display:flex;gap:10px}
.modal-btn{
  flex:1;
  padding:12px;
  border-radius:var(--r-md);
  font-weight:600;
  font-size:14px;
  cursor:pointer;
  border:1px solid var(--line-strong);
}
.modal-btn.secondary{background:none;color:var(--ink-dim)}
.modal-btn.secondary:hover{border-color:var(--ink-dim)}
.modal-btn.primary{background:var(--bloom);color:var(--abyss);border-color:var(--bloom)}
.modal-btn.primary:hover{filter:brightness(1.08)}