/* TOGETHER — neon blue lightning theme (shared by members, profile, login, account, admin) */
:root{
  color-scheme:dark;
  --bg:#040714; --panel:#0a1230; --panel-2:#0b1636; --line:#1d357f; --line-2:#2a3560;
  --fg:#eef4ff; --muted:#9fb0d8; --cyan:#3fd8ff; --cyan-hi:#7fe3ff; --blue:#2f6bff;
  --green:#5dffa0; --warn:#ffd2ad; --danger:#ff5e7a; --purple:#b06bff;
  --f-brand:"Russo One","Kanit",system-ui,sans-serif; --f-display:"Kanit","Sarabun",system-ui,sans-serif;
  --f-body:"Sarabun",system-ui,sans-serif; --f-mono:"JetBrains Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font:15px/1.55 var(--f-body);min-height:100vh;position:relative;overflow-x:hidden}
a{color:var(--cyan-hi)} a:hover{color:#c8f4ff}
img{max-width:100%}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.bolt{position:absolute;top:0;left:0;width:100%;height:520px;pointer-events:none;z-index:0;animation:tgtFlicker 6s infinite}
@keyframes tgtFlicker{0%,100%{opacity:.95}48%{opacity:.95}50%{opacity:.55}52%{opacity:.95}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* top bar */
.topbar{position:relative;z-index:3;max-width:1200px;margin:0 auto;padding:14px 16px 0;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.topbar .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--fg);font:400 18px var(--f-brand);letter-spacing:4px;text-shadow:0 0 10px rgba(63,216,255,.8)}
.topbar .brand img{width:34px;height:34px;border-radius:9px;border:1px solid var(--cyan)}
.topbar .sp{flex:1}
.topbar nav{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--cyan);background:var(--panel-2);color:#bdf2ff;font:600 14px var(--f-body);text-decoration:none;cursor:pointer;box-shadow:0 0 8px rgba(63,216,255,.45),inset 0 0 10px rgba(63,216,255,.18);transition:box-shadow .2s,background .2s,color .2s}
.btn:hover{background:var(--cyan);color:#04102c;box-shadow:0 0 10px var(--cyan),0 0 26px rgba(63,216,255,.7)}
.btn.solid{background:var(--cyan);color:#04102c}
.btn.ghost{border-color:var(--line-2);box-shadow:none;color:var(--muted);background:transparent}
.btn.ghost:hover{color:#04102c}
.btn.sm{min-height:36px;padding:0 12px;font-size:13px}
.btn.danger{border-color:var(--danger);color:#ffc2cd;box-shadow:0 0 8px rgba(255,94,122,.35)}
.btn.danger:hover{background:var(--danger);color:#1a0208}
.btn.purple{border-color:var(--purple);color:#e6d2ff;box-shadow:0 0 8px rgba(176,107,255,.35)}
.btn.purple:hover{background:var(--purple);color:#140624}
.btn.discord{background:#5865f2;border-color:#7d87ff;color:#fff}
.btn.google{background:#f4f7ff;border-color:#f4f7ff;color:#0b1636}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* pop-up */
.pop-back{position:fixed;inset:0;z-index:100;background:rgba(2,4,12,.78);display:flex;align-items:center;justify-content:center;padding:16px}
.pop{width:100%;max-width:400px;background:#0b1636;border:1px solid var(--danger);border-radius:18px;padding:22px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;box-shadow:0 0 24px rgba(255,94,122,.35)}
.pop-ic{width:48px;height:48px;border-radius:999px;border:2px solid var(--danger);color:#ff8fa3;font:700 26px/44px var(--f-display);box-shadow:0 0 12px rgba(255,94,122,.5)}
.pop h2{margin:0;font:500 19px var(--f-display);color:#ffd6dd}
.pop p{margin:0;color:var(--fg);line-height:1.6}
.pop .btn{min-width:140px}
/* inputs */
.req{color:#ff8fa3;font-size:12px;font-weight:600;margin-left:6px}
.optl{color:var(--muted);font-size:12px;font-weight:400;margin-left:6px}
.steps{margin:0;padding-left:20px;color:var(--muted);font-size:13px;line-height:1.7}
.field{display:flex;flex-direction:column;gap:6px}
.field>label,.lab{font-weight:600;font-size:14px}
.hint{font-size:12px;color:var(--muted)}
.inp{color:var(--fg);background:rgba(4,7,20,.75);border:1px solid var(--line-2);border-radius:10px;padding:10px 12px;min-height:44px;width:100%}
textarea.inp{min-height:120px;resize:vertical;line-height:1.6}
.inp::placeholder{color:#7b86a8}
.inp:focus{border-color:var(--cyan)}

/* panels */
.panel{position:relative;background:rgba(10,18,48,.85);border:1px solid var(--line);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:14px}
.wrap{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:16px 16px 72px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.muted{color:var(--muted)}
.h-neon{margin:0;font:400 24px var(--f-brand);letter-spacing:6px;color:#dff7ff;text-shadow:0 0 10px rgba(63,216,255,.8)}
.sec-title{display:flex;align-items:center;gap:14px}
.sec-title span{height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--cyan))}
.sec-title span:last-child{background:linear-gradient(90deg,var(--cyan),transparent)}

.seg{display:inline-flex;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.seg button{border:0;background:rgba(4,7,20,.6);color:var(--muted);font:600 14px var(--f-body);min-height:40px;padding:0 14px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--cyan);color:#04102c;box-shadow:0 0 14px rgba(63,216,255,.6)}

.badge-in{font:400 11px var(--f-brand);letter-spacing:1.5px;color:var(--green);text-shadow:0 0 6px rgba(57,255,136,.85),0 0 14px rgba(57,255,136,.45)}
.badge-out{font:400 11px var(--f-brand);letter-spacing:1.5px;color:var(--cyan-hi);text-shadow:0 0 6px rgba(63,216,255,.85),0 0 14px rgba(63,216,255,.45)}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0px));background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:10px;font-size:14px;z-index:90;max-width:calc(100% - 32px);box-shadow:0 0 20px rgba(63,216,255,.4)}
.toast.err{background:#ffd6dd;color:#3a0010}
.alert{border-radius:12px;padding:10px 14px;font-size:14px;background:rgba(255,94,122,.12);border:1px solid rgba(255,94,122,.5);color:#ffd6dd}
.alert.ok{background:rgba(93,255,160,.1);border-color:rgba(93,255,160,.45);color:#d4ffe6}
.alert.info{background:rgba(63,216,255,.1);border-color:rgba(63,216,255,.45);color:#d8f6ff}

table.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
.tbl th,.tbl td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.tbl th{font-size:12px;color:var(--muted);background:rgba(4,7,20,.7);white-space:nowrap}
.tbl tr:last-child td{border-bottom:0}

@media (max-width:640px){
  .topbar .brand span{display:none}
  .btn{padding:0 12px}
}