:root{
  --bg:#0b1020;--panel:#131c31;--panel2:#18243b;--line:#34415b;
  --text:#edf1fa;--muted:#aab6cc;--gold:#d9b66d;--blue:#77b9ef;
  --purple:#b59be9;--green:#72d2a3;--red:#e58b91;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(ellipse at 50% -10%,#27365a 0,#0b1020 55%);color:var(--text);
  font:16px/1.65 Inter,"Segoe UI",Arial,sans-serif;min-height:100vh}
a{color:var(--blue)}
.container{width:min(820px,calc(100% - 32px));margin:0 auto;padding:24px 0 48px}

.hero{position:relative;text-align:center;padding:48px 16px 56px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(11,16,32,.45),rgba(11,16,32,.92)),url("/static/banner.jpg") center/cover no-repeat}
.hero-inner{max-width:760px;margin:0 auto}
.logo{width:120px;height:120px;border-radius:50%;box-shadow:0 0 32px #7d6db488}
.eyebrow{margin:12px 0 0;color:var(--gold);letter-spacing:.2em;text-transform:uppercase;font-size:.78rem;font-weight:700}
h1{margin:6px 0;font-size:clamp(2.4rem,8vw,4.2rem);line-height:1.02;letter-spacing:.06em;color:#fff;text-shadow:0 0 28px #7d6db477}
h1 span{display:block;color:var(--gold);font-size:.38em;letter-spacing:.28em;margin-top:10px}
.tagline{font-family:Georgia,serif;font-style:italic;color:#d8def0;font-size:1.15rem;margin:10px 0 0}

.topbar{display:flex;align-items:center;gap:10px;justify-content:flex-end;margin-bottom:12px;color:var(--muted)}
.topbar img{border-radius:50%}
.link{color:var(--blue);font-size:.9rem}

.card{background:linear-gradient(145deg,#17233a,#111a2c);border:1px solid var(--line);border-radius:16px;
  padding:24px;margin:16px 0}
h2{margin:0 0 12px;font-size:1.35rem;color:var(--gold)}
p{margin:8px 0}
.muted{color:var(--muted)}
[hidden]{display:none!important}

.field{margin:18px 0}
.field.narrow{max-width:200px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label,.label{display:block;margin-bottom:6px;font-weight:600}
label b,.label b{color:var(--gold)}
input[type=text],input[type=number],textarea{width:100%;background:#0d1527;color:var(--text);
  border:1px solid var(--line);border-radius:10px;padding:11px 13px;font:inherit}
textarea{resize:vertical;min-height:90px}
input:focus,textarea:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.field.invalid input,.field.invalid textarea{border-color:var(--red)}
.meta{display:flex;justify-content:space-between;gap:12px;margin-top:4px;font-size:.85rem;color:var(--muted)}
.counter.ok{color:var(--green)}
.counter.over{color:var(--red)}
.error{color:var(--red);font-size:.9rem;margin-top:4px;min-height:0}
.error:empty{display:none}
#global-error{margin:8px 0 0;padding:10px 14px;border:1px solid var(--red);border-radius:10px;background:#e58b9112}

.factions{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.faction{position:relative}
.faction input{position:absolute;opacity:0;inset:0;cursor:pointer}
.faction span{display:block;padding:16px;border:1px solid var(--line);border-radius:12px;text-align:center;
  background:#0d1527;font-weight:700;transition:border-color .15s,background .15s}
.faction input:checked+span{border-color:var(--gold);background:#d9b66d18;color:var(--gold)}
.faction input:focus-visible+span{outline:2px solid var(--blue);outline-offset:2px}

.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.btn{cursor:pointer;border:0;border-radius:10px;padding:12px 22px;font:inherit;font-weight:700;
  background:linear-gradient(135deg,#e7c982,#c9a24f);color:#1a1405}
.btn:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.55;cursor:wait}
.btn.ghost{background:transparent;color:var(--muted);border:1px solid var(--line)}
.btn.discord{background:#5865f2;color:#fff;display:inline-block;text-decoration:none}

.mine-list{list-style:none;margin:0;padding:0}
.mine-list li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.mine-list li:last-child{border-bottom:0}
.badge{font-size:.8rem;font-weight:700;border-radius:99px;padding:2px 10px;border:1px solid var(--line);white-space:nowrap}
.badge.accepted{color:var(--green);border-color:var(--green)}
.badge.pending{color:var(--blue);border-color:var(--blue)}
.badge.refused{color:var(--red);border-color:var(--red)}
.reason{display:block;font-size:.85rem;color:var(--muted)}

#done.success{border-color:var(--green)}
#done.waiting{border-color:var(--blue)}

.footer{border-top:1px solid var(--line);padding:22px 16px 40px;text-align:center;color:var(--muted);font-size:.88rem}

@media(max-width:640px){
  .row,.factions{grid-template-columns:1fr}
  .card{padding:18px}
}