@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --ink-950:#0B1410; --ink-900:#12201A; --ink-850:#182C23; --ink-800:#1F372B;
  --line: rgba(237,231,214,0.12); --line-strong: rgba(237,231,214,0.22);
  --gold:#C9A24B; --gold-soft:rgba(201,162,75,0.16); --gold-strong:#E4C173;
  --moss:#7FB398; --moss-soft:rgba(127,179,152,0.16);
  --rust:#C9765A; --rust-soft:rgba(201,118,90,0.16);
  --paper:#EDE7D6; --paper-dim:rgba(237,231,214,0.64); --paper-faint:rgba(237,231,214,0.4);
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:'Inter',sans-serif; background:var(--ink-950); color:var(--paper);
  min-height:100vh; -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
.fd{ font-family:'Fraunces',serif; }
.fm{ font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums; }
.wrap{ max-width:960px; margin:0 auto; padding:0 20px; }
.center-screen{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }

.panel{ background:var(--ink-900); border:1px solid var(--line); border-radius:14px; }
.panel-raised{ background:var(--ink-850); border:1px solid var(--line); border-radius:14px; }
.p-4{ padding:16px; } .p-5{ padding:20px; } .p-6{ padding:24px; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:10px; padding:11px 18px; font-size:14px; font-weight:600; cursor:pointer; border:none; font-family:inherit; }
.btn-gold{ background:var(--gold); color:#1A1305; transition:filter .15s ease, transform .1s ease; }
.btn-gold:hover{ filter:brightness(1.08); }
.btn-gold:active{ transform:scale(0.98); }
.btn-gold:disabled{ opacity:.35; filter:none; cursor:not-allowed; }
.btn-ghost{ background:transparent; border:1px solid var(--line-strong); color:var(--paper); transition:background .15s ease; }
.btn-ghost:hover{ background:var(--ink-800); }
.btn-ghost:disabled{ opacity:.35; cursor:not-allowed; }
.btn-block{ width:100%; }
.btn-sm{ padding:7px 12px; font-size:12px; border-radius:8px; }

label.field-label{ font-size:12px; color:var(--paper-dim); display:block; margin-bottom:4px; }
input, select, textarea{
  background:var(--ink-850); border:1px solid var(--line-strong); color:var(--paper);
  border-radius:9px; padding:10px 12px; font-size:14px; outline:none; width:100%; font-family:inherit;
}
input::placeholder{ color:var(--paper-faint); }
input:focus, select:focus, textarea:focus{ border-color:var(--gold); }
.field{ margin-bottom:14px; }

.tabbar{ display:flex; gap:24px; border-bottom:1px solid var(--line); margin-top:8px; overflow-x:auto; }
.tab{ padding:10px 2px; color:var(--paper-dim); border-bottom:2px solid transparent; font-size:14px; font-weight:500; white-space:nowrap; }
.tab:hover{ color:var(--paper); }
.tab.active{ color:var(--gold-strong); border-bottom-color:var(--gold); }

.passbook{ position:relative; background:linear-gradient(175deg, var(--ink-850), var(--ink-900) 65%); border:1px solid var(--line); border-radius:18px; overflow:hidden; }
.passbook::before{ content:''; position:absolute; top:0; left:0; right:0; height:4px; background:repeating-linear-gradient(90deg, var(--gold) 0 12px, transparent 12px 22px); opacity:.55; }

.ticket{ border:1px dashed var(--line-strong); border-radius:10px; position:relative; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ticket::before, .ticket::after{ content:''; position:absolute; width:14px; height:14px; background:var(--ink-900); border-radius:50%; top:50%; transform:translateY(-50%); }
.ticket::before{ left:-8px; } .ticket::after{ right:-8px; }

.badge{ font-size:11px; font-weight:600; padding:3px 9px; border-radius:999px; letter-spacing:.02em; display:inline-flex; align-items:center; gap:4px; }
.badge-pending{ background:var(--gold-soft); color:var(--gold-strong); }
.badge-paid{ background:var(--moss-soft); color:var(--moss); }
.badge-rejected{ background:var(--rust-soft); color:var(--rust); }
.badge-on{ background:var(--moss-soft); color:var(--moss); }
.badge-off{ background:var(--rust-soft); color:var(--rust); }
.badge-admin{ background:var(--moss-soft); color:var(--moss); }

.rank{ min-width:28px; height:24px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600; }
.rank-1{ background:var(--gold); color:#1A1305; }
.rank-2{ background:#B9BAC0; color:#1A1305; }
.rank-3{ background:#C08A5C; color:#1A1305; }
.rank-n{ background:var(--ink-800); color:var(--paper-dim); border:1px solid var(--line); }

.row-between{ display:flex; align-items:center; justify-content:space-between; }
.row-gap{ display:flex; align-items:center; gap:10px; }
.hairline{ border-color:var(--line); }
.border-t{ border-top:1px solid var(--line); }
.border-b{ border-bottom:1px solid var(--line); }
.muted{ color:var(--paper-dim); }
.faint{ color:var(--paper-faint); }
.gold{ color:var(--gold-strong); }
.moss{ color:var(--moss); }
.rust{ color:var(--rust); }
.mt-1{margin-top:4px;} .mt-2{margin-top:8px;} .mt-3{margin-top:12px;} .mt-4{margin-top:16px;} .mt-5{margin-top:20px;} .mt-6{margin-top:24px;}
.mb-1{margin-bottom:4px;} .mb-2{margin-bottom:8px;} .mb-3{margin-bottom:12px;} .mb-4{margin-bottom:16px;} .mb-5{margin-bottom:20px;}
.text-xs{font-size:12px;} .text-sm{font-size:14px;} .text-lg{font-size:18px;} .text-xl{font-size:22px;} .text-2xl{font-size:28px;} .text-4xl{font-size:38px;}

.grid{ display:grid; gap:16px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-5{ grid-template-columns:repeat(5,1fr); }
@media (max-width:760px){
  .grid-2,.grid-3,.grid-4,.grid-5{ grid-template-columns:1fr; }
}
@media (min-width:761px) and (max-width:1100px){
  .grid-5{ grid-template-columns:repeat(3,1fr); }
}

table{ width:100%; border-collapse:collapse; font-size:14px; }
th{ text-align:left; font-weight:400; color:var(--paper-faint); padding-bottom:8px; font-size:12px; }
td{ padding:10px 0; border-top:1px solid var(--line); }
td.num{ text-align:right; }

.empty-row{ padding:28px 0; text-align:center; font-size:14px; color:var(--paper-faint); }

.avatar{ width:34px; height:34px; border-radius:999px; background:var(--ink-800); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; }
.icon-tile{ width:36px; height:36px; border-radius:10px; background:var(--ink-800); display:flex; align-items:center; justify-content:center; flex-shrink:0; }

header.topbar{ padding:22px 0 0; }
.logo{ display:flex; align-items:center; gap:8px; }
.logo .mark{ width:32px; height:32px; border-radius:999px; background:var(--gold-soft); display:flex; align-items:center; justify-content:center; }

.notice{ padding:12px 14px; border-radius:10px; font-size:13px; display:flex; align-items:center; gap:8px; }
.notice-error{ background:var(--rust-soft); color:var(--rust); }
.notice-ok{ background:var(--moss-soft); color:var(--moss); }

.skeleton-text{ color:var(--paper-dim); font-family:'Fraunces',serif; font-size:15px; text-align:center; padding:60px 0; }

.link-muted{ font-size:13px; color:var(--paper-dim); }
.link-gold{ font-size:13px; color:var(--gold-strong); font-weight:600; }

::-webkit-scrollbar{ height:8px; width:8px; }
::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:8px; }

@media (prefers-reduced-motion: no-preference){
  .fade-in{ animation:fadeIn .4s ease both; }
  @keyframes fadeIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }
}