/* MyLine — shared styles for the account pages (join / lobby / review)
   Tokens lifted from the live index.html so everything reads as one site. */
:root{
  --bg:#120C20; --bg2:#1A1230; --card:#201640; --chip:#2A1D4A; --tile:#281C48;
  --line:#3A2C60; --ink:#F7F2FA; --mut:#B6A8CE; --soft:#CBB9FF;
  --flare:#FF5A7A; --glow:#FFB84D; --ok:#3FBF77; --vio:#7A5CFF; --mag:#8F7AFF;
  --grad:linear-gradient(135deg,#8F7AFF,#FFB84D);
  --shadow:0 12px 34px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Sora",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.6;
  background-image:
    radial-gradient(900px 480px at 85% -10%, rgba(122,92,255,.22), transparent 60%),
    radial-gradient(700px 420px at -10% 30%, rgba(255,184,77,.10), transparent 60%);
  background-repeat:no-repeat;
}
::selection{background:var(--vio); color:#fff}
a{color:var(--soft)}
.wrap{max-width:1040px; margin:0 auto; padding:0 20px}

/* top bar */
.top{position:sticky; top:0; z-index:40; background:rgba(18,12,32,.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.top .wrap{display:flex; align-items:center; gap:12px; padding:14px 20px}
.logo{font-weight:800; font-size:22px; letter-spacing:-.5px; text-decoration:none;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.badge18{font-size:12px; font-weight:700; color:var(--ink); border:1px solid var(--line); border-radius:999px; padding:3px 9px; background:var(--chip)}
.top .spacer{flex:1}
.toplink{font-size:14px; color:var(--mut); text-decoration:none}
.toplink:hover{color:var(--ink)}

/* type */
h1,h2{font-weight:800; letter-spacing:-.025em; line-height:1.15; margin:0 0 10px}
h1{font-size:30px}
h2{font-size:22px}
.grad-text{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.sub{color:var(--mut); margin:0 0 18px}
.fine{font-size:13px; color:var(--mut)}
.goldnote{font-size:13.5px; font-weight:700; color:var(--glow)}
.goldnote .zap{margin-right:4px}

/* cards */
.card{
  background:var(--card); border-radius:22px; padding:26px;
  border:1px solid transparent;
  background-image:linear-gradient(var(--card),var(--card)),linear-gradient(135deg,rgba(143,122,255,.75),rgba(255,184,77,.75));
  background-origin:border-box; background-clip:padding-box,border-box;
  box-shadow:var(--shadow);
}
.card.plain{background-image:none; border:1px solid var(--line)}
.stack{display:grid; gap:18px; max-width:560px; margin:40px auto 60px; padding:0 20px}
.stack.wide{max-width:980px}

/* forms */
label{display:block; font-size:13.5px; font-weight:700; color:var(--soft); margin:14px 0 6px}
input[type=email],input[type=password],input[type=text],input[type=date],input[type=number]{
  width:100%; padding:12px 14px; border-radius:12px; font:inherit; color:var(--ink);
  background:var(--bg2); border:1px solid var(--line); outline:none;
}
input:focus{border-color:var(--mag)}
input::placeholder{color:#8E7FAB}
.check{display:flex; gap:10px; align-items:flex-start; margin:16px 0 6px; font-size:14.5px; color:var(--mut)}
.check input{width:18px; height:18px; margin-top:3px; accent-color:var(--vio)}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:560px){.row2{grid-template-columns:1fr}}

/* buttons */
.btn{
  display:inline-block; border:0; cursor:pointer; text-decoration:none; text-align:center;
  font:inherit; font-weight:700; font-size:16px; color:#1C1430;
  padding:13px 22px; border-radius:999px; background:var(--grad);
  box-shadow:0 8px 24px rgba(143,122,255,.35);
}
.btn.full{width:100%}
.btn.ghost{background:var(--chip); color:var(--ink); border:1px solid var(--line); box-shadow:none}
.btn.danger{background:none; border:1px solid rgba(255,90,122,.5); color:var(--flare); box-shadow:none}
.btn.small{padding:9px 16px; font-size:14px}
.btn[disabled]{opacity:.55; cursor:not-allowed}
.btn:hover{filter:brightness(1.05)}

/* tabs */
.tabs{display:flex; gap:8px; background:var(--chip); border:1px solid var(--line); border-radius:999px; padding:4px; margin-bottom:18px}
.tabs button{flex:1; border:0; background:none; color:var(--mut); font:inherit; font-weight:700; font-size:14.5px; padding:9px 0; border-radius:999px; cursor:pointer}
.tabs button.on{background:var(--tile); color:var(--ink); border:1px solid var(--line)}

/* status + chips */
.chip{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; border-radius:999px; padding:4px 11px; border:1px solid var(--line); background:var(--chip); color:var(--mut)}
.chip.ok{color:var(--ok); border-color:rgba(63,191,119,.4)}
.chip.warn{color:var(--glow); border-color:rgba(255,184,77,.4)}
.chip.bad{color:var(--flare); border-color:rgba(255,90,122,.4)}
.chip.vio{color:var(--soft); border-color:rgba(143,122,255,.5)}

/* counter */
.counter-num{font-size:46px; font-weight:800; letter-spacing:-.03em; line-height:1}
.counter-num .of{font-size:20px; color:var(--mut); font-weight:700}
.bar{height:12px; border-radius:999px; background:var(--bg2); border:1px solid var(--line); overflow:hidden; margin:16px 0 8px}
.bar > i{display:block; height:100%; background:var(--grad); border-radius:999px; transition:width .6s ease; min-width:0}

/* photo grid */
.pgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px}
@media (max-width:460px){.pgrid{grid-template-columns:repeat(2,1fr)}}
.pcell{position:relative; aspect-ratio:3/4; border-radius:14px; overflow:hidden; background:var(--bg2); border:1px solid var(--line)}
.pcell img{width:100%; height:100%; object-fit:cover; display:block}
.pcell .lead{position:absolute; left:8px; top:8px}
.pcell .del{position:absolute; right:8px; top:8px; width:28px; height:28px; border-radius:999px; border:0; cursor:pointer; background:rgba(18,12,32,.78); color:var(--ink); font-size:15px; line-height:1}
.padd{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:var(--mut); font-size:13.5px; font-weight:700; cursor:pointer; border-style:dashed; border-color:var(--line)}
.padd:hover{border-color:var(--mag); color:var(--soft)}
.padd .plus{font-size:26px; line-height:1; color:var(--soft)}

/* admin queue */
.qcard{display:grid; gap:14px}
.qhead{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.qhead .who{font-weight:800; font-size:18px}
.qmeta{font-size:13px; color:var(--mut)}
.qphotos{display:flex; gap:8px; overflow-x:auto; padding-bottom:4px}
.qphotos img{height:170px; border-radius:12px; border:1px solid var(--line); flex:0 0 auto}
.qbtns{display:flex; gap:10px; flex-wrap:wrap}

/* notices */
.note{border-radius:14px; border:1px solid var(--line); background:var(--bg2); padding:12px 16px; font-size:14px; color:var(--mut)}
.note.err{border-color:rgba(255,90,122,.5); color:#FFB3C2}
.note.ok{border-color:rgba(63,191,119,.45); color:#9ADFB9}
.hidden{display:none !important}
.center{text-align:center}
.mt0{margin-top:0}.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}

/* doors-open moment */
.open-glow{animation:openpulse 2.4s ease-in-out infinite}
@keyframes openpulse{0%,100%{box-shadow:0 0 0 rgba(255,184,77,0)}50%{box-shadow:0 0 44px rgba(255,184,77,.35)}}

footer{padding:34px 0 44px; text-align:center; color:var(--mut); font-size:13px}