:root{
  --paper:#FBF6EA;
  --paper-card:#FFFFFF;
  --ink:#1F2E44;
  --ink-soft:#5B6B84;
  --accent:#2E4C74;
  --accent-strong:#16283F;
  --gold:#A9791F;
  --gold-soft:#EEDFB8;
  --line:#E4D9BE;
  --available:#4F7A57;
  --available-bg:#E7F0E3;
  --claimed:#8C4A52;
  --claimed-bg:#F3E3E2;
  --shadow:0 1px 2px rgba(31,46,68,.07), 0 10px 26px rgba(31,46,68,.07);
  --focus:#2E4C74;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#111A27;
    --paper-card:#1A2536;
    --ink:#EEE7D8;
    --ink-soft:#A9B7CB;
    --accent:#9DC0EF;
    --accent-strong:#D6E6FA;
    --gold:#DEB65F;
    --gold-soft:#3E331C;
    --line:#31425A;
    --available:#93CB9C;
    --available-bg:#1E3227;
    --claimed:#DE99A6;
    --claimed-bg:#3A252B;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 26px rgba(0,0,0,.4);
    --focus:#9DC0EF;
  }
}
:root[data-theme="dark"]{
  --paper:#111A27;
  --paper-card:#1A2536;
  --ink:#EEE7D8;
  --ink-soft:#A9B7CB;
  --accent:#9DC0EF;
  --accent-strong:#D6E6FA;
  --gold:#DEB65F;
  --gold-soft:#3E331C;
  --line:#31425A;
  --available:#93CB9C;
  --available-bg:#1E3227;
  --claimed:#DE99A6;
  --claimed-bg:#3A252B;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 26px rgba(0,0,0,.4);
  --focus:#9DC0EF;
}
*,*::before,*::after{box-sizing:border-box;}
[hidden]{display:none !important;}
html{color-scheme:light dark;}
body{
  margin:0;
  padding-top:58px;
  background:var(--paper);
  color:var(--ink);
  font-family:'Work Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px;}
h1,h2,p,ul{margin:0;}
button,input,select{font-family:inherit;}
a{color:inherit;}
img{max-width:100%;}
.loading{text-align:center; padding:80px 20px; color:var(--ink-soft);}

.hero{
  max-width:760px;
  margin:0 auto;
  padding:clamp(28px,6vw,56px) 20px 30px;
  text-align:center;
}
.eyebrow{
  font-size:.82rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-soft);
  font-weight:600;
}
.hero-title{
  font-family:'Playfair Display',Georgia,serif;
  font-weight:700;
  font-size:clamp(2.1rem,6vw,3.1rem);
  color:var(--accent-strong);
  margin-top:10px;
  text-wrap:balance;
}
.hero-names{
  font-family:'Alex Brush',cursive;
  font-size:clamp(2.2rem,7vw,3.2rem);
  color:var(--gold);
  margin-top:2px;
}
.hero-details{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px 22px;
  margin-top:22px;
  font-size:.92rem;
  color:var(--ink);
}
.detail{display:inline-flex; align-items:center; gap:7px;}
.detail svg{color:var(--gold); flex-shrink:0;}
.hero-note{
  max-width:52ch;
  margin:22px auto 0;
  color:var(--ink-soft);
  font-size:.95rem;
}
.readonly-note{
  max-width:52ch;
  margin:14px auto 0;
  color:var(--claimed);
  background:var(--claimed-bg);
  border-radius:10px;
  padding:8px 14px;
  font-size:.85rem;
}
.hero-stat{
  display:inline-block;
  margin-top:16px;
  font-size:.82rem;
  letter-spacing:.04em;
  color:var(--gold);
  font-weight:600;
}

.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:20;
  background:var(--paper);
  border-bottom:1px solid var(--line);
  box-shadow:0 6px 16px rgba(16,24,38,.06);
}
.chips{
  display:flex;
  align-items:center;
  gap:8px;
  overflow-x:auto;
  padding:12px 20px;
  max-width:1040px;
  margin:0 auto;
  scrollbar-width:thin;
}
.chip{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--paper-card);
  color:var(--ink);
  font-size:.82rem;
  text-decoration:none;
  white-space:nowrap;
}
.chip:hover{border-color:var(--gold); color:var(--gold);}
.chip svg{color:var(--gold);}

.sections{
  max-width:1040px;
  margin:0 auto;
  padding:8px 20px 20px;
}
.cat-section{margin-top:38px; scroll-margin-top:72px;}
.cat-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:'Playfair Display',Georgia,serif;
  font-weight:700;
  font-size:1.35rem;
  color:var(--accent-strong);
  padding-bottom:10px;
  border-bottom:1px solid var(--gold-soft);
}
.cat-title svg{color:var(--gold);}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:14px;
  margin-top:18px;
}
.card{
  background:var(--paper-card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  gap:12px;
}
.card.is-claimed{opacity:.72;}
.card-name{font-weight:600; font-size:.98rem;}
.card-foot{display:flex; flex-direction:column; gap:8px; align-items:flex-start;}
.pill{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:.78rem;
  padding:4px 10px;
  border-radius:999px;
  font-weight:600;
}
.pill-available{background:var(--available-bg); color:var(--available);}
.pill-claimed{background:var(--claimed-bg); color:var(--claimed);}
.btn{
  border:none;
  border-radius:9px;
  padding:9px 14px;
  font-size:.86rem;
  font-weight:600;
  cursor:pointer;
  transition:transform .1s ease, opacity .15s ease;
}
.btn:disabled{opacity:.6; cursor:default;}
.btn-primary{background:var(--accent); color:#fff;}
.btn-primary:hover:not(:disabled){opacity:.92;}
.btn-outline{background:transparent; color:var(--accent); border:1px solid var(--accent);}
.btn-outline:hover:not(:disabled){background:var(--accent); color:#fff;}
.btn-ghost{background:transparent; color:var(--ink-soft); border:1px solid var(--line);}
.btn-sm{padding:7px 12px; font-size:.82rem;}
.link-btn{
  background:none;
  border:none;
  padding:0;
  color:var(--ink-soft);
  font-size:.8rem;
  text-decoration:underline;
  cursor:pointer;
}
.link-btn:hover{color:var(--claimed);}
.claim-form{display:flex; flex-direction:column; gap:8px; width:100%;}
.claim-form input{
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--paper);
  color:var(--ink);
  font-size:.88rem;
  width:100%;
}
.claim-actions{display:flex; gap:8px;}
.form-error{font-size:.78rem; color:var(--claimed); margin:0;}

.site-footer{
  max-width:600px;
  margin:30px auto 0;
  padding:26px 20px 44px;
  text-align:center;
  border-top:1px solid var(--line);
  color:var(--ink-soft);
  font-size:.88rem;
}
.site-footer p{margin-bottom:14px;}
.admin-link{
  background:none;
  border:none;
  color:var(--ink-soft);
  font-size:.78rem;
  text-decoration:underline;
  cursor:pointer;
  opacity:.7;
}
.admin-link:hover{opacity:1;}

.toast{
  position:fixed;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  background:var(--accent-strong);
  color:#fff;
  padding:10px 18px;
  border-radius:10px;
  font-size:.85rem;
  box-shadow:var(--shadow);
  z-index:100;
  max-width:88vw;
  text-align:center;
}

.admin-overlay{
  position:fixed;
  inset:0;
  background:rgba(20,26,36,.55);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:5vh 16px;
  z-index:200;
  overflow-y:auto;
}
.admin-overlay[hidden]{display:none;}
.admin-panel{
  background:var(--paper-card);
  border-radius:16px;
  width:100%;
  max-width:760px;
  padding:22px;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  gap:18px;
}
.admin-head{display:flex; align-items:center; justify-content:space-between;}
.admin-head h2{font-family:'Playfair Display',Georgia,serif; font-size:1.3rem; color:var(--accent-strong);}
.admin-hint{font-size:.82rem; color:var(--ink-soft);}
.icon-btn{
  background:none;
  border:1px solid var(--line);
  border-radius:8px;
  width:32px;
  height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color:var(--ink-soft);
}
.icon-btn:hover{border-color:var(--gold); color:var(--gold);}
.icon-btn.danger:hover{border-color:var(--claimed); color:var(--claimed);}
.admin-add{display:flex; flex-wrap:wrap; gap:8px;}
.admin-add input[type="text"]{
  flex:1 1 200px;
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--paper);
  color:var(--ink);
}
.admin-add select{
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--paper);
  color:var(--ink);
}
.admin-list{display:flex; flex-direction:column; gap:4px; max-height:52vh; overflow-y:auto; padding-right:4px;}
.admin-cat{margin-top:14px;}
.admin-cat-label{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--gold);
  font-weight:600;
  padding-bottom:6px;
  border-bottom:1px solid var(--gold-soft);
}
.admin-empty{font-size:.82rem; color:var(--ink-soft); padding:10px 0;}
.admin-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
.admin-row.is-inactive .admin-row-name{color:var(--ink-soft); text-decoration:line-through;}
.admin-row-main{min-width:160px;}
.admin-row-name{font-weight:600; font-size:.92rem;}
.admin-row-meta{font-size:.78rem; color:var(--ink-soft); margin-top:2px;}
.admin-row-actions{display:flex; align-items:center; gap:10px;}
.switch{display:inline-flex; align-items:center; gap:8px; cursor:pointer; position:relative;}
.switch input{position:absolute; opacity:0; width:1px; height:1px;}
.switch-track{
  width:34px; height:20px; border-radius:999px; background:var(--line);
  position:relative; transition:background .15s ease; flex-shrink:0;
}
.switch-thumb{
  position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%;
  background:#fff; transition:transform .15s ease;
}
.switch input:checked + .switch-track{background:var(--available);}
.switch input:checked + .switch-track .switch-thumb{transform:translateX(14px);}
.switch input:focus-visible + .switch-track{outline:2px solid var(--focus); outline-offset:2px;}
.switch-label{font-size:.78rem; color:var(--ink-soft); min-width:40px;}
.admin-actions{display:flex; justify-content:flex-end; gap:10px; border-top:1px solid var(--line); padding-top:14px;}

@media (max-width:640px){
  .hero-details{flex-direction:column; gap:8px;}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));}
  .admin-row{flex-direction:column; align-items:flex-start;}
  .admin-actions{flex-direction:column-reverse;}
  .admin-actions .btn{width:100%;}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.001ms !important;}
}