/* 1Zombie Auto DJ — shared styles for the landing, account and admin pages */
:root{
  --bg:#17191c; --panel:#24272c; --panel2:#2e3238; --line:#3a3f47; --text:#ece9e1; --muted:#9aa0aa;
  --accent:#a5c25a; --accent-deep:#8faa45; --cyan:#58d0ff; --warn:#ffd25e; --hot:#ff6b6b; --good:#7cf08f;
  --cond:"Barlow Condensed","Arial Narrow",sans-serif; --mono:"Share Tech Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;color:var(--text);font:16px/1.55 "Barlow",system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  background:radial-gradient(120% 70% at 50% -10%,#262a2f 0%,var(--bg) 60%) fixed,var(--bg)}
a{color:var(--accent)}
img{display:block;max-width:100%}
h1,h2,h3{font-family:var(--cond);font-weight:700;line-height:1.02;margin:0}
.muted{color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:9px;cursor:pointer;text-decoration:none;
  font:600 17px var(--cond);letter-spacing:.01em;color:var(--text);border:1px solid #474c55;
  background:linear-gradient(180deg,#363a41,#2b2e34);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 2px 0 #121316;touch-action:manipulation}
.btn:hover{background:linear-gradient(180deg,#3e434b,#30343a)}
.btn.primary{background:linear-gradient(180deg,#b5d06a,#8faa45);color:#14180a;border:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 0 #4c5c22}
.btn.primary:hover{filter:brightness(1.06)}
.btn.ghost{background:transparent;box-shadow:none}
.btn.sm{padding:7px 11px;font-size:15px;border-radius:8px}
.btn.danger{color:#ffb4b4;border-color:#6a3b3b}
.btn:disabled{opacity:.5;cursor:default}
.btn:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
input,textarea,select{width:100%;font:16px "Barlow",sans-serif;color:var(--text);background:#1b1d21;border:1px solid #3a3f47;border-radius:10px;padding:12px 14px;outline:none}
input:focus,textarea:focus,select:focus{border-color:var(--accent)}
label{display:flex;flex-direction:column;gap:6px;font-size:14px;color:#cfd3d8}
.stack{display:flex;flex-direction:column;gap:14px}
.form-error{color:var(--warn);margin:0;font-size:15px}
.form-ok{color:var(--good);margin:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- account pages ---------- */
.auth-page{display:grid;place-items:center;padding:24px 16px}
.auth-card{width:min(440px,100%);background:linear-gradient(180deg,#2a2d33,#212328);border:1px solid #3a3e46;border-radius:16px;padding:26px 24px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 24px 50px rgba(0,0,0,.45)}
.auth-logo img{height:70px;margin:0 auto 14px}
.auth-card h1{font-size:34px;text-align:center;margin-bottom:6px}
.auth-card > p{text-align:center;margin:0 0 18px}
.switch{text-align:center;margin-top:18px;font-size:15px;color:var(--muted)}
.switch button{background:none;border:0;color:var(--accent);font:inherit;cursor:pointer;padding:0;text-decoration:underline}

/* ---------- toast ---------- */
#toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translate(-50%,20px);background:#2d3137;border:1px solid #444951;color:var(--text);
  padding:11px 16px;border-radius:10px;font-size:15px;opacity:0;pointer-events:none;transition:.25s;z-index:99;max-width:calc(100vw - 32px)}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- vinyl (landing hero) ---------- */
@keyframes spin{to{transform:rotate(360deg)}}
.tt{position:relative;width:min(100%,460px);aspect-ratio:1}
.tt-platter{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,#43474e 0 60%,#33363c 61% 100%);
  box-shadow:0 26px 50px rgba(0,0,0,.6),inset 0 0 0 2px #50545c,inset 0 3px 0 rgba(255,255,255,.08)}
.tt-strobe{position:absolute;inset:1.6%;border-radius:50%;background:repeating-conic-gradient(var(--accent) 0 1.4deg,transparent 1.4deg 5deg);opacity:.5;
  -webkit-mask:radial-gradient(circle,transparent 0 46.5%,#000 47% 49.4%,transparent 49.8%);mask:radial-gradient(circle,transparent 0 46.5%,#000 47% 49.4%,transparent 49.8%)}
.tt-vinyl{position:absolute;inset:6.5%;border-radius:50%;animation:spin 1.8s linear infinite;
  background:radial-gradient(circle,transparent 0 33%,#050505 33.4% 35%,transparent 35.4%),repeating-radial-gradient(circle,#101010 0 1.1px,#1c1c1e 1.3px 2.4px);
  box-shadow:inset 0 0 0 3px #080808}
.tt-label{position:absolute;inset:31%;border-radius:50%;background:url("label.png") center/cover}
.tt-sheen{position:absolute;inset:6.5%;border-radius:50%;pointer-events:none;background:conic-gradient(from 200deg,transparent 0 6%,rgba(255,255,255,.11) 11%,transparent 17% 52%,rgba(255,255,255,.07) 58%,transparent 64%)}
.tt-arm{position:absolute;top:-4%;right:-9%;width:30%;transform-origin:75% 13.3%;transform:rotate(14deg);filter:drop-shadow(0 10px 8px rgba(0,0,0,.55))}
@media (prefers-reduced-motion:reduce){ .tt-vinyl{animation:none} }