:root {
  --ink: #e9ecf1;
  --panel: #ffffff;
  --field: #f4f6f9;
  --edge: #c3c9d3;
  --text: #0c0e12;
  --soft: #3b424d;
  --muted: #5b6370;
  --dark: #0c0e12;
  --on-dark: #ffffff;
  --danger: #c4262e;
  --ok: #138a4f;
  --ok-bg: #e2f4ea;
  --lock-bg: #f9e4e5;
  --warn: #f2c230;
  --warn-bg: #fff8dc;
  --font: "Be Vietnam Pro", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cut: 16px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { background: var(--ink); }
body {
  background: var(--ink);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  padding-inline: 16px;
  padding-block: 20px 56px;
  min-height: 100%;
  position: relative;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 45% at 50% 0%, #ffffff, transparent 72%),
    repeating-linear-gradient(-22deg, rgba(12,14,18,.04) 0 2px, transparent 2px 46px);
}
.wrap { position: relative; z-index: 1; max-width: 580px; margin-inline: auto; display: flex; flex-direction: column; gap: 22px; }

.topbar { display: flex; justify-content: space-between; align-items: center; gap: 10px 12px; flex-wrap: wrap; }
.kicker { font-weight: 700; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--soft); }
.status {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; line-height: 1.4;
  color: var(--text); border: 1px solid var(--edge); background: var(--panel); padding: 6px 14px; border-radius: 999px;
}
.status i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(19,138,79,.18); animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .4; } }

.hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.hero img { width: min(220px, 58vw); height: auto; filter: drop-shadow(0 14px 22px rgba(12,14,18,.3)); }
h1 {
  margin: 6px 0 0; font-weight: 800; text-transform: uppercase; color: var(--text);
  font-size: clamp(26px, 7.4vw, 36px); line-height: 1.3; letter-spacing: .03em; text-wrap: balance;
}
.sub { margin: 0; color: var(--muted); font-size: 15px; }

.bevel {
  background: linear-gradient(135deg, #0c0e12 0%, #8f96a2 42%, #dfe3e9 58%, #1b1f26 100%);
  padding: 1.5px;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  filter: drop-shadow(0 12px 24px rgba(12,14,18,.12));
}
.bevel > .in {
  background: var(--panel);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  padding: 24px 18px 26px;
  display: flex; flex-direction: column; gap: 24px;
}
.bevel[hidden] { display: none; }

.warn { border: 1px solid #e3c24a; background: var(--warn-bg); }
.warn::before { content: ""; display: block; height: 8px; background: repeating-linear-gradient(-45deg, var(--dark) 0 10px, var(--warn) 10px 20px); }
.warn h2 { margin: 0; padding: 10px 14px 0; font-weight: 800; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: #7a1d22; line-height: 1.45; }
.warn p { margin: 0; padding: 4px 14px 12px; font-size: 14.5px; color: var(--soft); }
.warn b { color: var(--text); }

.stack { display: flex; flex-direction: column; gap: 24px; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; border: 0; padding: 0; margin: 0; }
.label { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; font-weight: 700; font-size: 14.5px; letter-spacing: .05em; text-transform: uppercase; line-height: 1.5; padding: 0; margin: 0; color: var(--text); }
.label .n { color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.label .req { color: var(--danger); }
.hint { margin: 0; font-size: 13.5px; color: var(--muted); }
.err { margin: 0; font-size: 13.5px; font-weight: 500; color: var(--danger); }
.err:empty { display: none; }

input[type="text"], input[type="tel"] {
  width: 100%; min-width: 0; background: var(--field); color: var(--text);
  border: 1px solid var(--edge); border-radius: 0; padding: 13px 14px; font: 500 16px var(--font);
}
input::placeholder { color: #8b929d; }
input:focus-visible { outline: 2px solid var(--dark); outline-offset: 1px; border-color: var(--dark); background: #fff; }
input:disabled { background: #eceff3; color: var(--muted); cursor: not-allowed; }
[aria-invalid="true"] { border-color: var(--danger) !important; }


.upload { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.preview {
  width: 104px; height: 104px; flex: none; display: grid; place-items: center; overflow: hidden;
  background: var(--field); border: 1.5px dashed #9aa1ac; color: #7b838f;
}
.preview img { width: 100%; height: 100%; object-fit: contain; display: block; }
.preview img[hidden] { display: none; }
.upload-side { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; min-width: 0; flex: 1 1 180px; }
.btn-ghost {
  display: inline-block; text-decoration: none; text-align: center;
  font: 700 14px var(--font); letter-spacing: .06em; text-transform: uppercase; line-height: 1.4; color: var(--text);
  background: #fff; border: 1.5px solid var(--dark); padding: 9px 18px; cursor: pointer; border-radius: 0;
}
.btn-ghost:hover { background: var(--dark); color: var(--on-dark); }
.btn-ghost:focus-visible, .btn-main:focus-visible { outline: 2px solid var(--dark); outline-offset: 3px; }
.btn-ghost:disabled { opacity: .45; cursor: not-allowed; background: #fff; color: var(--text); }
.btn-danger { border-color: var(--danger); color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: #fff; }
.btn-danger:disabled:hover { color: var(--danger); }
.filename { font-size: 13.5px; color: var(--muted); overflow-wrap: anywhere; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }


.chips { display: grid; gap: 8px; }
.chips.slots { grid-template-columns: repeat(3, 1fr); }
.chips.groups { grid-template-columns: repeat(4, 1fr); }
.chip { position: relative; display: block; min-width: 0; }
.chip span {
  display: block; text-align: center; padding: 11px 6px; cursor: pointer;
  background: var(--field); border: 1px solid var(--edge); color: var(--soft);
  font-weight: 600; font-size: 16px; line-height: 1.35; font-variant-numeric: tabular-nums;
}
.chip small:empty { display: none; }
.chip small { display: block; font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--muted); line-height: 1.3; }
.chip:hover span { border-color: var(--dark); color: var(--text); }
.chip input:checked + span { background: var(--dark); color: var(--on-dark); border-color: var(--dark); }
.chip input:focus-visible + span { outline: 2px solid var(--dark); outline-offset: 2px; }
.chip input:disabled + span { background: #eceff3; color: #98a0ab; border-style: dashed; cursor: not-allowed; }
.chip input:disabled + span small { color: #98a0ab; }
.chip:hover input:disabled + span { border-color: var(--edge); color: #98a0ab; }


.pay { border: 1px solid var(--edge); background: var(--field); padding: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; align-items: center; }
.pay img { width: 100%; max-width: 260px; height: auto; display: block; margin-inline: auto; background: #fff; border: 1px solid var(--edge); }
.pay dl { margin: 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pay dt { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); line-height: 1.5; }
.pay dd { margin: 2px 0 0; font-size: 18px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; line-height: 1.4; }
.pay dd.bank { font-size: 15.5px; font-weight: 600; }
.pay .copy-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pay .btn-ghost { padding: 6px 12px; font-size: 12px; }
.paynote { margin: 0; font-size: 13.5px; color: var(--muted); }


.players { display: flex; flex-direction: column; gap: 10px; }
.prow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pnum { width: 24px; flex: none; font-weight: 700; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.prow input { padding: 11px 12px; }
.prow .pid { flex: 1 1 130px; }
.prow .pname { flex: 1.5 1 170px; }
.prem { flex: none; width: 36px; height: 40px; border: 1px solid var(--edge); background: #fff; color: var(--muted); font: 700 20px/1 var(--font); cursor: pointer; }
.prem:hover { border-color: var(--danger); color: var(--danger); }
.prem:disabled { opacity: .4; cursor: not-allowed; }
.proster-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.proster-actions .btn-ghost { padding: 8px 14px; font-size: 13px; }


.rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.rule { border: 1px solid var(--edge); background: var(--field); padding: 14px; display: flex; flex-direction: column; gap: 2px; }
.rk { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.rv { font-size: 20px; font-weight: 800; line-height: 1.35; }
.rd { font-size: 13px; color: var(--muted); }

.agree { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: 14.5px; color: var(--soft); }
.agree input { appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; margin: 1px 0 0; background: #fff; border: 1.5px solid var(--dark); display: grid; place-content: center; cursor: pointer; border-radius: 0; }
.agree input::after { content: ""; width: 12px; height: 12px; background: var(--dark); clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 22%, 86% 8%, 38% 72%); transform: scale(0); }
.agree input:checked::after { transform: scale(1); }
.agree input:focus-visible { outline: 2px solid var(--dark); outline-offset: 2px; }

.btn-main {
  display: block; width: 100%; border: 0; cursor: pointer; padding: 15px 20px; text-align: center; text-decoration: none;
  font: 800 16px var(--font); letter-spacing: .1em; text-transform: uppercase; line-height: 1.4; color: var(--on-dark);
  background: linear-gradient(180deg, #2a2f38, #0c0e12);
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
}
.btn-main:hover { background: linear-gradient(180deg, #3b424e, #151920); }
.btn-main:active { transform: translateY(1px); }
.btn-main[hidden] { display: none; }


.done { display: flex; flex-direction: column; gap: 18px; align-items: stretch; }
.done h2 { margin: 0; font-weight: 800; font-size: 24px; line-height: 1.35; letter-spacing: .02em; text-transform: uppercase; display: flex; align-items: center; gap: 12px; text-wrap: balance; }
.done h2 svg { flex: none; }
.done p { margin: 0; color: var(--soft); font-size: 15px; }
.done h3 .opt { font-weight: 600; letter-spacing: .02em; text-transform: none; color: var(--muted); }
.done h3, .sect { margin: 0; font-weight: 800; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; line-height: 1.5; }
.ticket { margin: 0; padding: 14px; background: var(--field); border: 1px solid var(--edge); font: 500 14.5px/1.8 var(--font); font-variant-numeric: tabular-nums; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.boxcard { border: 1.5px solid var(--dark); padding: 16px; display: flex; flex-direction: column; gap: 12px; background: #fff; }
.boxcard[hidden], .block[hidden] { display: none; }
.boxcard .pick { font-size: 15px; }
.boxcard .pick b { color: var(--text); }
.boxcard .url { font-size: 13.5px; color: var(--muted); overflow-wrap: anywhere; margin: 0; }
.boxcard .missing { color: var(--danger); font-size: 14.5px; font-weight: 500; }
.block { display: flex; flex-direction: column; gap: 12px; }
.dl { display: flex; flex-direction: column; gap: 8px; }
.dl-row { display: flex; justify-content: space-between; align-items: center; gap: 6px 12px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--edge); background: var(--field); }
.dl-row .t { display: flex; flex-direction: column; min-width: 0; }
.dl-row .k { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dl-row .v { font-size: 15.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dl-row .s { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; color: var(--muted); }
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.5; }
.pill.open { background: var(--ok-bg); color: #0d6b3b; }
.pill.locked { background: var(--lock-bg); color: #a11f27; }
.pill.opt { background: var(--field); color: var(--muted); border: 1px solid var(--edge); margin-left: 6px; vertical-align: middle; letter-spacing: .02em; text-transform: none; font-weight: 600; }
.notice { padding: 12px 14px; border: 1px solid #e3c24a; background: var(--warn-bg); font-size: 14.5px; color: var(--soft); }
.notice[hidden] { display: none; }
.confirm { border: 1.5px solid var(--danger); padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.confirm[hidden] { display: none; }
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.row .btn-ghost { flex: 1 1 150px; }
.toast { min-height: 20px; font-size: 13.5px; font-weight: 500; color: var(--ok); margin: 0; }
.toast:empty { display: none; }


.contacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.ccard { border: 1px solid var(--edge); background: var(--field); padding: 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ccard h3 { margin: 0; font-weight: 800; font-size: 16px; letter-spacing: .06em; text-transform: uppercase; }
.ccard .zl { margin: 0; font-size: 14px; color: var(--muted); }
.ccard .zl b { color: var(--text); font-size: 17px; font-variant-numeric: tabular-nums; letter-spacing: .02em; user-select: all; }
.ccard .row .btn-ghost { flex: 1 1 100px; padding: 8px 12px; font-size: 13px; }

.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.cn-step { border: 1px solid var(--edge); background: var(--field); padding: 14px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cn-k { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text); }
.cn-custom { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 10px 12px; background: var(--dark); color: var(--on-dark); }
.cn-custom b { letter-spacing: .08em; }
.cn-custom span { font-size: 14px; font-variant-numeric: tabular-nums; color: #d6dae0; }
.cn-team { margin: 0; font-size: 15px; }
.cn-team b { color: var(--text); }
details.guide { border: 1px solid var(--edge); padding: 10px 14px; background: #fff; }
details.guide summary { cursor: pointer; font-weight: 700; font-size: 14px; letter-spacing: .03em; }
details.guide ol { margin: 10px 0 2px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; color: var(--soft); }
.pstat { flex: none; font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px; white-space: nowrap; line-height: 1.6; }
.pstat.empty { background: #fff; color: var(--muted); border: 1px solid var(--edge); }
.pstat.ok { background: var(--ok-bg); color: #0d6b3b; }
.pstat.bad { background: var(--lock-bg); color: #a11f27; }
.cn-contact { margin: 0; font-size: 13.5px; color: var(--muted); }
.cn-contact a { color: var(--text); font-weight: 700; }

footer { text-align: center; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #7b838f; }

@media (max-width: 380px) {
  .chips.groups { grid-template-columns: repeat(2, 1fr); }
  .bevel > .in { padding-inline: 14px; }
}
@media (prefers-reduced-motion: reduce) { .status i { animation: none; } .btn-main:active { transform: none; } }


:root{--cut:16px}
button,input,select,textarea{font-family:var(--font)}
button{touch-action:manipulation}
a{color:inherit}
.wrap{gap:20px}
.topbar .kicker{letter-spacing:.14em}
.topnav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:-7px}
.topnav a{border:1px solid var(--edge);padding:8px 12px;background:#fff;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.topnav a:hover,.topnav a:focus-visible{border-color:var(--dark);background:var(--dark);color:#fff}
.hero .site-logo{display:block;width:min(248px,62vw);height:auto;object-fit:contain;filter:drop-shadow(0 12px 16px rgba(12,14,18,.20));aspect-ratio:1}
.hero h1{font-size:clamp(27px,7.4vw,36px);margin-top:0}
.hero .sub{max-width:43ch}
.section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;font-size:15px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.section-sub{margin:2px 0 0;color:var(--muted);font-size:13.5px}
.section-head{display:flex;flex-direction:column;gap:4px}
.field select,.field textarea,.reference-form input{width:100%;border:1px solid var(--edge);background:var(--field);padding:13px 14px;color:var(--text);border-radius:0;font:500 15px var(--font)}
.field select:focus-visible,.field textarea:focus-visible,.reference-form input:focus-visible{outline:2px solid var(--dark);outline-offset:1px}
.chips.slots{grid-template-columns:repeat(3,minmax(0,1fr))}
.chips.groups{grid-template-columns:repeat(3,minmax(0,1fr))}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{min-height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.chip small{font-size:10px}
.chip input:disabled+span{pointer-events:none}
.slot-caption{font-size:12px;color:var(--muted)}
.schedule-details{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.schedule-stat{padding:10px 9px;border:1px solid var(--edge);background:var(--field);text-align:center}
.schedule-stat span{display:block;color:var(--muted);font-size:11px;font-weight:600}
.schedule-stat b{font-weight:800;font-size:20px;font-variant-numeric:tabular-nums}
.group-note{background:var(--warn-bg);border:1px solid #e3c24a;padding:10px 12px;font-size:13px;color:var(--soft)}
.roster{display:flex;flex-direction:column;gap:8px}
.roster-row{display:flex;align-items:center;gap:10px;background:var(--field);border:1px solid var(--edge);padding:10px;min-width:0}
.roster-num{font-weight:800;font-size:12px;color:var(--muted);width:24px;flex:none}
.roster-logo{width:42px;height:42px;flex:none;display:grid;place-items:center;background:#fff;border:1px solid var(--edge);overflow:hidden;font-size:17px;font-weight:800}
.roster-logo img{width:100%;height:100%;object-fit:contain}
.roster-name{flex:1;min-width:0;font-size:13px;font-weight:800;overflow-wrap:anywhere}
.roster-name small{display:block;font-size:11px;color:var(--muted);font-weight:500}
.roster-tags{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.roster-tags .pill{white-space:nowrap;font-size:10px}
.roster-empty{background:var(--field);border:1px dashed var(--edge);padding:20px 12px;text-align:center;font-size:14px;color:var(--muted)}
.member-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.member-item{display:flex;flex-direction:column;gap:5px;min-width:0}
.member-item span{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.member-item input{padding:12px!important}
.reg-message{padding:10px 12px;background:var(--lock-bg);border:1px solid #e5b0b5;color:var(--danger);font-size:13px;font-weight:600}
.reg-message[hidden]{display:none}
.btn-main:disabled{opacity:.5;cursor:not-allowed}
.account-list{display:flex;flex-direction:column;gap:14px}
.account-empty{background:var(--field);border:1px solid var(--edge);padding:18px;font-size:14px;color:var(--muted)}
.account-card{display:flex;flex-direction:column;gap:16px;border:1px solid var(--edge);background:var(--field);padding:16px}
.account-card .card-top{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:8px}
.account-card h3{margin:0;font-size:18px;font-weight:800;overflow-wrap:anywhere}
.account-card .meta{color:var(--muted);font-size:13px;margin:2px 0 0}
.account-card .states{display:flex;flex-wrap:wrap;gap:5px}
.account-card .status-label{font-size:12px;color:var(--muted);margin-bottom:3px}
.account-card .payment{display:flex;flex-direction:column;gap:14px;background:#fff;border:1px solid var(--edge);padding:14px}
.account-card .payment h4{margin:0;font-size:15px;text-transform:uppercase;letter-spacing:.04em}
.account-card .payment p{margin:0;font-size:13px;color:var(--muted)}
.account-card .bank-details{display:grid;grid-template-columns:1fr;gap:8px}
.account-card .bank-detail{padding:8px 10px;border:1px solid var(--edge);background:var(--field);overflow-wrap:anywhere}
.account-card .bank-detail small{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.account-card .bank-detail strong{font-size:15px;user-select:all}
.reference-form{display:flex;flex-direction:column;gap:10px}
.reference-form label{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:700}
.reference-form .btn-main{font-size:14px}
.receipt-preview{display:block;width:100%;height:110px;object-fit:contain;border:1px dashed var(--edge);background:var(--field)}
.payment-help{padding:10px 12px;background:var(--warn-bg);border:1px solid #e3c24a;font-size:12px;color:var(--soft)}
.user-badge{display:inline-flex;padding:4px 9px;border:1px solid var(--edge);border-radius:20px;font-size:11px;font-weight:700;color:var(--soft)}
.btn-main.compact{font-size:13px;letter-spacing:.04em;padding:12px 14px}
.copy-btn{padding:6px 10px;font-size:11px}
.alert-success{background:var(--ok-bg);padding:11px 13px;border:1px solid #b3dbc5;font-size:13px;color:#0d6b3b}
.helper-card{border:1px solid var(--edge);background:var(--field);padding:12px 14px;font-size:13px;color:var(--soft)}
#account,#teams,#register{scroll-margin-top:18px}
[hidden]{display:none!important}
@media(max-width:380px){.chips.groups{grid-template-columns:repeat(2,minmax(0,1fr))}.schedule-details{gap:5px}.schedule-stat{padding:9px 5px}.member-list{grid-template-columns:1fr}}


body > .toast{position:fixed;z-index:99;right:16px;bottom:18px;max-width:min(410px,calc(100vw - 32px));padding:12px 16px;background:#173b2a;color:#fff;border:1px solid #52a976;box-shadow:0 12px 35px #0c0e1240;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .2s,transform .2s}
body > .toast.visible{opacity:1;transform:none}
body > .toast.bad{background:#8b202a;border-color:#c26b74}


.hero.hero-immersive{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:440px; padding:28px 18px 32px;
  background:radial-gradient(ellipse 80% 58% at 50% 32%,#303b4b 0%,#131b26 48%,#080a0e 100%);
  border:1px solid #5e6876;
  clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 18px,100% calc(100% - 18px),calc(100% - 18px) 100%,18px 100%,0 calc(100% - 18px),0 18px);
  box-shadow:inset 0 0 42px #04080d80,0 16px 36px #13192420;
}
.hero.hero-immersive::before{
  content:"";position:absolute;z-index:0;inset:0;pointer-events:none;
  background:linear-gradient(117deg,transparent 12%,#ffffff10 32%,transparent 46%),
   repeating-linear-gradient(145deg,transparent 0 34px,#ffffff07 34px 35px);
}
.hero.hero-immersive::after{content:"";position:absolute;inset:10px;z-index:0;pointer-events:none;border:1px solid #e7efff22;clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px)}
.hero-canvas{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity 900ms ease;overflow:hidden}
.hero-canvas.is-ready{opacity:.86}
.hero-canvas canvas{display:block;width:100%;height:100%;pointer-events:none}
.hero-content{position:relative;z-index:1;display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center;width:100%;pointer-events:none}
.hero-eyebrow{display:inline-flex;align-items:center;gap:13px;color:#bec8d7;font-weight:700;font-size:10px;letter-spacing:.26em;text-transform:uppercase}
.hero-diamond{color:#f4f6fa;font-size:15px}
.hero.hero-immersive .site-logo{width:min(246px,55vw);max-width:100%;filter:drop-shadow(0 9px 16px #030507a0) drop-shadow(0 0 22px #dfe8f130)}
.hero.hero-immersive h1{margin:0;font-size:clamp(24px,6.5vw,33px);color:#f4f6fa;line-height:1.3;letter-spacing:.04em;text-shadow:0 2px 14px #0008}
.hero.hero-immersive .sub{max-width:41ch;margin:5px 0 14px;color:#d5dce6;font-weight:500;font-size:13px}
.hero-cta{pointer-events:auto;background:linear-gradient(115deg,#f8fafc,#b8c2d1 60%,#fff);border:1px solid #fff;color:#0a0e16;text-decoration:none;padding:10px 24px;min-height:42px;display:inline-flex;align-items:center;gap:17px;font-size:12px;letter-spacing:.12em;font-weight:800;text-transform:uppercase;transition:transform .2s,box-shadow .2s}
.hero-cta:hover{transform:translateY(-2px);box-shadow:0 8px 22px #ffffff35}
.hero-cta:focus-visible{outline:2px solid #fff;outline-offset:4px}
.hero-cta span{font-size:18px;line-height:1}
@media(max-width:480px){.hero.hero-immersive{min-height:408px;padding:25px 11px 30px}.hero.hero-immersive .site-logo{width:min(220px,58vw)}.hero-eyebrow{font-size:9px;letter-spacing:.16em}.hero.hero-immersive .sub{font-size:12.5px}}
@media(prefers-reduced-motion:reduce){.hero-canvas{transition:none!important;display:none}.hero-cta{transition:none!important}.hero-cta:hover{transform:none}}


.vietqr-card{margin:16px 0;padding:18px;border:1px solid #b9bec8;background:#f5f6f9;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.vietqr-card img{display:block;width:min(100%,330px);height:auto;aspect-ratio:540/640;object-fit:contain;background:white;border:1px solid #d9dde4}
.vietqr-card p{margin:0}
.bank-details .bank-detail{min-width:0;overflow-wrap:anywhere}


.hero-orbits{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden;opacity:.9}
.hero-orbit{position:absolute;left:50%;top:45%;width:min(390px,92%);height:min(390px,92%);border:1px solid rgba(226,235,249,.24);border-radius:50%;box-shadow:0 0 22px #9eb8d320,inset 0 0 24px #b8cde512;transform:translate(-50%,-50%);will-change:transform}
.orbit-a{border-width:2px;border-top-color:#eef6ffb0;border-bottom-color:#eef6ff50;animation:atOrbitA 18s linear infinite}
.orbit-b{width:min(510px,122%);height:min(310px,80%);border:1px solid #a6c7e666;transform:translate(-50%,-50%) rotate(-30deg);animation:atOrbitB 21s linear infinite reverse}
.orbit-c{width:min(480px,115%);height:min(350px,90%);border:1px dashed #afc8e64d;transform:translate(-50%,-50%) rotate(45deg);animation:atOrbitC 26s linear infinite}
.hero-spark{position:absolute;color:#f2f7ff;font-size:20px;text-shadow:0 0 18px #fff;animation:atSpark 4s ease-in-out infinite}
.spark-a{top:18%;left:12%}.spark-b{top:27%;right:13%;animation-delay:-1.5s}.spark-c{bottom:25%;left:17%;animation-delay:-2.5s}
@keyframes atOrbitA{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes atOrbitB{from{transform:translate(-50%,-50%) rotate(-30deg)}to{transform:translate(-50%,-50%) rotate(330deg)}}
@keyframes atOrbitC{from{transform:translate(-50%,-50%) rotate(45deg)}to{transform:translate(-50%,-50%) rotate(405deg)}}
@keyframes atSpark{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:.95;transform:scale(1.15)}}
.qr-open{display:inline-block;max-width:100%;overflow-wrap:anywhere}
@media(prefers-reduced-motion:reduce){.hero-orbit,.hero-spark{animation:none!important;will-change:auto}.hero-orbits{opacity:.38}}

.topnav{position:relative;z-index:5;gap:6px;margin-top:0;justify-content:space-between}
.topnav a{flex:1 1 auto;text-align:center;border-radius:4px;white-space:nowrap}
.page-heading{display:flex;align-items:center;gap:18px;padding:18px 20px;background:linear-gradient(125deg,#121722,#323b49 56%,#080b11);color:#fff;clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px)}
.page-heading img{flex:none;width:90px;height:90px;object-fit:contain}
.page-heading h1{font-size:clamp(22px,6vw,30px);margin:3px 0;font-weight:800;text-transform:uppercase;color:#fff}
.page-heading .sub,.page-heading .eyebrow{color:#cad3df}
.home-events{display:grid;gap:10px}.home-event{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;color:#151a22;text-decoration:none;border:1px solid var(--edge);background:var(--field);transition:transform .15s ease,border-color .15s ease}
.home-event:hover{border-color:#303a48;transform:translateY(-2px)}.home-event strong{font-size:15px}.home-event span{color:var(--muted);font-size:13px}
.home-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.home-actions>.btn-main{width:auto;flex:1 1 230px}.home-actions>.btn-ghost{flex:1 1 160px}

.preview{border-radius:50%;border:4px solid #c5ccd6;box-shadow:0 0 0 2px #202730,0 5px 15px #14192230;background:#10151d}
.preview img{object-fit:contain;border-radius:50%}
.roster-logo,.my-team-logo,.admin-team-logo{border-radius:50%;border:3px solid #c1cbd6;box-shadow:0 0 0 2px #303b4b;overflow:hidden;background:#10151d;color:#f4f6fa}
.roster-logo img,.my-team-logo img,.admin-team-logo{object-fit:contain;border-radius:50%}

.account-card{padding:0;display:block;overflow:hidden;background:#fff;border:1px solid #b6c0ce}
.account-card .my-summary{display:flex;align-items:center;gap:14px;list-style:none;padding:15px;cursor:pointer;min-height:86px}
.account-card .my-summary::-webkit-details-marker{display:none}
.account-card .my-summary:hover,.account-card .my-summary:focus-visible{background:#f1f3f7}
.my-team-logo{flex:none;width:57px;height:57px;display:grid;place-items:center;font-size:24px;font-weight:800}
.my-team-logo img{width:100%;height:100%}
.my-team-title{flex:1;min-width:0}.my-team-title h3{font-size:16px;line-height:1.3}.my-team-title .meta{font-size:12px}
.my-team-state{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right}
.my-expand{font-size:12px;color:#667181;font-weight:700}.account-card[open] .my-expand{color:#161b23}.account-card[open] .my-expand::first-letter{color:#161b23}
.account-panel{display:flex;flex-direction:column;gap:16px;padding:16px;border-top:1px solid var(--edge);background:var(--field)}
.my-members{display:flex;flex-wrap:wrap;gap:7px}.my-members h4{width:100%;margin:0 0 2px;font-size:14px}
.member-badge{background:#fff;padding:7px 10px;border:1px solid #cbd2da;font-size:12px;font-variant-numeric:tabular-nums;font-weight:700}
.vietqr-card{width:100%;margin:0;background:#fff;border:2px solid #252c38;padding:18px}
.vietqr-card img{width:min(100%,400px);height:auto;aspect-ratio:1;object-fit:contain;border:0;background:#fff;padding:10px}
.vietqr-card strong{font-size:16px;color:#0c1119}.vietqr-card .qr-open{margin-top:4px}
@media(max-width:520px){.page-heading{padding:12px;gap:10px}.page-heading img{width:68px;height:68px}.topnav a{font-size:11px;padding:8px 6px}.my-summary{gap:8px!important}.my-team-state .pill{font-size:10px}.my-team-logo{width:47px;height:47px}.my-team-title h3{font-size:14px}}
@media(prefers-reduced-motion:reduce){.home-event{transition:none}}


.account-panel .btn-danger-outline{display:inline-flex;align-items:center;justify-content:center;max-width:100%;border:2px solid #ac203a;background:#fff0f1;color:#962039;padding:12px 18px;min-height:46px;font-size:14px;font-weight:800;cursor:pointer;margin:14px 0 8px;border-radius:5px}
.account-panel .btn-danger-outline:hover,.account-panel .btn-danger-outline:focus-visible{background:#ac203a;color:#fff}
.account-panel .btn-danger-outline:disabled{opacity:.6;cursor:not-allowed}