:root{
  --primary:#2563eb;
  --primary-dark:#1d4ed8;

  --bg:#f8fafc;
  --surface:#ffffff;
  --surface-2:#f1f5f9;

  --text:#0f172a;
  --text-2:#64748b;
  --muted:#94a3b8;

  --border:#e2e8f0;

  --success:#16a34a;
  --danger:#ef4444;

  --radius:18px;
  --radius-sm:12px;

  --shadow-sm:0 1px 2px rgba(15,23,42,.04);
  --shadow:0 10px 30px rgba(15,23,42,.08);

  --transition:.2s ease;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:"Inter",system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}

a{
  text-decoration:none;
  color:inherit;
}

button{
  font-family:inherit;
  cursor:pointer;
  border:none;
}

/* ---------- Layout ---------- */

.container{
  width:min(1400px,92%);
  margin:auto;
}

header{
  border-bottom:1px solid var(--border);
  background:#fff;
  position:sticky;
  top:0;
  z-index:50;
}

.header-inner{
  width:min(1800px,96%);
  margin:auto;
  height:84px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.logo{
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  line-height:1;
}

.logo-mark{
  font-size:30px;
  font-weight:800;
  letter-spacing:-1.5px;
  color:var(--text);
}

/* The R closes the wordmark on the accent colour so the mark reads as a logo
   rather than as a heading. */
.logo-mark::after{
  content:"";
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--primary);
  margin-left:4px;
  vertical-align:6px;
}

.logo-tag{
  font-size:9px;
  font-weight:600;
  letter-spacing:2.6px;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:5px;
}

nav{
  display:flex;
  gap:34px;
}

nav a{
  color:var(--text-2);
  font-weight:500;
  position:relative;
}

nav a.active{
  color:var(--text);
}

nav a.active::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-30px;
  width:100%;
  height:2px;
  background:var(--primary);
}

.signin{
  background:#0f172a;
  color:#fff;
  padding:12px 18px;
  border-radius:12px;
  font-weight:600;
}

/* ---------- Grid ---------- */

.main{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:30px;
  padding:36px 0;
}

/* ---------- Hero ---------- */

.hero h2{
  font-size:clamp(32px,3.4vw,54px);
  line-height:1.05;
  letter-spacing:-2px;
  margin-bottom:14px;
  text-wrap:balance;
}

.hero p{
  color:var(--text-2);
  font-size:18px;
  margin-bottom:26px;
}

/* ---------- Search ---------- */

.search{
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px 18px;
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:18px;
}

.search input{
  width:100%;
  border:none;
  outline:none;
  font-size:15px;
}

.filters{
  display:flex;
  gap:10px;
  margin-bottom:22px;
}

.pill{
  background:#fff;
  border:1px solid var(--border);
  padding:10px 16px;
  border-radius:999px;
  font-size:14px;
  color:var(--text-2);
  font-weight:500;
}

.pill.active{
  background:#111827;
  color:#fff;
  border-color:#111827;
}

/* ---------- Ranking Cards ---------- */

.rank-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  padding:18px;
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:14px;
  transition:var(--transition);
}

.rank-card:hover{
  transform:translateY(-2px);
  border-color:#bfdbfe;
  box-shadow:var(--shadow);
}

.rank-card.top{
  border:1.5px solid #93c5fd;
}

.rank{
  width:34px;
  text-align:center;
}

.rank h3{
  font-size:30px;
  font-weight:800;
}

.crown{
  color:#f59e0b;
  font-size:16px;
}

.model-logo{
  width:54px;
  height:54px;
  border-radius:16px;
  background:#f8fafc;
  display:grid;
  place-items:center;
  border:1px solid var(--border);
}

.model-logo img{
  width:34px;
}

.model-info{
  flex:1;
}

.model-info h4{
  font-size:20px;
  margin-bottom:4px;
}

.model-info span{
  color:var(--text-2);
  font-size:14px;
}

.score{
  text-align:right;
}

.score h2{
  color:var(--primary);
  font-size:34px;
  font-weight:800;
}

.score p{
  color:var(--text-2);
  font-size:13px;
}

.trend{
  font-size:13px;
  font-weight:700;
}

.up{color:var(--success);}
.down{color:var(--danger);}

/* ---------- Right Panel ---------- */

.panel{
  background:#fff;
  border:1px solid var(--border);
  border-radius:22px;
  padding:28px;
  box-shadow:var(--shadow-sm);
}

.panel-top{
  display:flex;
  justify-content:space-between;
  margin-bottom:22px;
}

.back{
  color:var(--primary);
  font-weight:600;
  font-size:14px;
}

.share{
  color:var(--text-2);
}

.model-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:24px;
}

.identity{
  display:flex;
  gap:16px;
  align-items:center;
  min-width:0;
  flex:1;
}

.identity .icon{
  width:86px;
  height:86px;
  border-radius:22px;
  background:#fff;
  border:1px solid var(--border);
  display:grid;
  place-items:center;
}

.identity .icon img{
  width:58px;
}

.identity h1{
  font-size:clamp(26px,2.1vw,40px);
  letter-spacing:-1px;
  line-height:1.1;
}

.identity p{
  color:var(--text-2);
}

.aimr{
  text-align:right;
}

.aimr h1{
  color:var(--primary);
  font-size:clamp(36px,3vw,56px);
  font-weight:800;
  line-height:1;
}

.aimr span{
  color:var(--text-2);
  font-size:13px;
  display:block;
  margin-top:4px;
}

.notice{
  background:#f8fafc;
  border-radius:14px;
  padding:16px;
  color:var(--text-2);
  font-size:14px;
  margin-bottom:20px;
}

/* ---------- Rating ---------- */

.rating{
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
}

.rating-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 20px;
  border-bottom:1px solid var(--border);
}

.rating-row:last-child{
  border-bottom:none;
}

.left{
  display:flex;
  gap:14px;
  align-items:flex-start;
}

.left i{
  font-size:22px;
  color:var(--primary);
}

.left h4{
  margin-bottom:3px;
}

.left span{
  color:var(--text-2);
  font-size:13px;
}

.stars{
  display:flex;
  gap:8px;
}

.star{
  color:#2563eb;
  font-size:22px;
}

.star.empty{
  color:#cbd5e1;
}

/* ---------- CTA ---------- */

.submit{
  width:100%;
  margin-top:24px;
  background:linear-gradient(135deg,#2563eb,#1d4ed8);
  color:#fff;
  padding:18px;
  border-radius:16px;
  font-size:17px;
  font-weight:700;
  transition:var(--transition);
}

.submit:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 24px rgba(37,99,235,.25);
}

.footer-note{
  margin-top:12px;
  text-align:center;
  color:var(--muted);
  font-size:13px;
}

/* ---------- Responsive ---------- */

@media (max-width:1100px){

  .main{
    grid-template-columns:1fr;
  }

  nav{
    display:none;
  }

}

@media (max-width:640px){

  .hero h2{
    font-size:38px;
  }

  .model-head{
    flex-direction:column;
    align-items:flex-start;
    gap:20px;
  }

  .rating-row{
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
  }

  .score h2{
    font-size:28px;
  }

}
/* ---------- Page shell + ad rails ---------- */

.layout{
  width:min(1800px,96%);
  margin:auto;
  display:grid;
  /* auto, not a fixed 300px. A grid column declared at a fixed width keeps
     reserving that space even when its only item is display:none, which pushes
     the content off-centre and squeezes it. With auto, a hidden rail collapses
     to zero and the middle column takes the room back. */
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:28px;
  /* Not align-items:start. A start-aligned grid item is only as tall as its
     own content, which caps how far a sticky child inside it can travel: the
     ad rails would unstick and scroll away after the first screen. Stretching
     the rails to the full row height lets them follow the whole page. */
  align-items:stretch;
}

.ad-banner{
  display:flex;
  justify-content:center;
  padding:22px 16px 0;
}

.ad-space{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  /* Without these the 728px banner sizes this flex item to its own content,
     so its max-width:100% resolves against 728px and overflows small screens. */
  min-width:0;
  max-width:100%;
}

.ad-rail{
  height:100%;
}

.ad-sticky{
  position:sticky;
  top:110px;
  padding-top:36px;
}

.ad-label{
  font-size:10px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--muted);
}

/* Unsold slots sell themselves: each one is a mailto link. */
.ad-placeholder{
  display:grid;
  place-items:center;
  align-content:center;
  gap:6px;
  background:
    repeating-linear-gradient(-45deg,#f1f5f9 0 10px,#f8fafc 10px 20px);
  border:1px dashed var(--border);
  border-radius:var(--radius-sm);
  color:var(--muted);
  font-size:13px;
  font-weight:600;
  text-align:center;
  transition:var(--transition);
}

a.ad-placeholder:hover{
  border-color:var(--primary);
  color:var(--primary);
  background:
    repeating-linear-gradient(-45deg,#eff6ff 0 10px,#f8fafc 10px 20px);
}

.ad-placeholder span{
  font-size:11px;
  font-weight:500;
  letter-spacing:.4px;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* The 90px banner has no room for a second line. */
.ad-728 span{
  display:none;
}

.contact{
  color:var(--primary);
  font-weight:600;
}

.contact:hover{
  text-decoration:underline;
}

/* The rail slot is one element that changes size with the viewport, rather
   than two elements taking turns: a hidden twin would still be filled by the
   rotation script and would stack a second creative into the column. */
.ad-rail-mount{ width:300px; height:600px; }
.ad-728{ width:728px; max-width:100%; height:90px; }

/* ---------- Main grid ---------- */

.main{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:30px;
  padding:36px 0 60px;
  align-items:start;
}

.column-panel{
  position:sticky;
  top:110px;
}

@media (min-width:1101px){

  /* Both panes are capped to the viewport, so the page barely scrolls and a
     sticky panel would have nothing to travel against. */
  .column-panel{
    position:static;
  }

}

/* The panel is taller than the viewport once a type has seven criteria, so
   pinning it whole put the submit button below the fold with no way to reach
   it.
   Scrolling only the criteria list was worse: the header, the notice and the
   captcha ate the height and left the list about 100px tall. So the whole
   panel scrolls, and the submit button is pinned to its bottom edge so it is
   reachable at any scroll position. */
@media (min-width:1101px){

  /* Both columns are capped to the same measured height and scroll on their
     own, so the ranking and the rating form can be read at the same time
     without either one pushing the other off screen. */
  .column-list,
  .column-panel .panel{
    max-height:var(--pane-max, calc(100vh - 280px));
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color:var(--border) transparent;
  }

  .column-list{
    /* Room so the last card is not flush against the scrollbar's end. */
    padding-right:6px;
  }

  .column-list::-webkit-scrollbar,
  .column-panel .panel::-webkit-scrollbar{
    width:10px;
  }

  .column-list::-webkit-scrollbar-thumb,
  .column-panel .panel::-webkit-scrollbar-thumb{
    background:var(--border);
    border-radius:999px;
    border:3px solid var(--bg);
  }

  .column-panel .panel::-webkit-scrollbar-thumb{
    border-color:var(--surface);
  }

  .column-list::-webkit-scrollbar-thumb:hover,
  .column-panel .panel::-webkit-scrollbar-thumb:hover{
    background:var(--muted);
  }

  .column-panel .submit,
  .column-panel .captcha-section{
    position:sticky;
    z-index:2;
    background:var(--surface);
  }

  .column-panel .submit{
    bottom:0;
  }

  /* Offset by the button's height so the two stack rather than overlap. */
  .column-panel .captcha-section{
    bottom:73px;
    padding-top:10px;
  }

  /* No ::before backing plate here. The button is position:sticky with a
     z-index, so it forms a stacking context: a pseudo-element at z-index:-1
     paints above the button's own background and below its text, which turned
     the button white-on-white and invisible. Its gradient background is
     already opaque; a ring in the surface colour covers the few pixels of
     content that would otherwise show around it. */
  .column-panel .submit{
    box-shadow:0 0 0 12px var(--surface), 0 -10px 18px -8px rgba(15,23,42,.12);
  }

  .column-panel .submit:hover{
    box-shadow:0 0 0 12px var(--surface), 0 12px 24px rgba(37,99,235,.25);
  }

  /* The note is not sticky: two sticky siblings both asking for bottom:0 fight
     over the same edge and the button loses. It scrolls with the content. */

}

/* ---------- Weekly pick ---------- */

.weekly-pick{
  background:linear-gradient(135deg,#eff6ff,#ffffff);
  border:1.5px solid #bfdbfe;
  border-radius:var(--radius);
  padding:20px;
  margin-bottom:22px;
}

.weekly-tag{
  font-size:12px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--primary-dark);
  margin-bottom:14px;
}

.weekly-tag span{
  color:var(--muted);
  font-weight:600;
  letter-spacing:1px;
}

.weekly-body{
  display:flex;
  align-items:center;
  gap:16px;
}

.weekly-info{
  flex:1;
  min-width:0;
}

.weekly-info h3{
  font-size:22px;
  letter-spacing:-.5px;
}

.weekly-info p{
  color:var(--text-2);
  font-size:14px;
}

.weekly-score{
  text-align:right;
}

.weekly-score strong{
  display:block;
  font-size:32px;
  font-weight:800;
  color:var(--primary);
  line-height:1.1;
}

.weekly-score span{
  font-size:11px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--muted);
}

/* ---------- Ranking list ---------- */

.rank-card{
  width:100%;
  text-align:left;
  cursor:pointer;
  font-family:inherit;
  color:inherit;
}

.rank-card:focus-visible,
.pill:focus-visible,
.submit:focus-visible,
.back:focus-visible,
.star:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:3px;
}

.rank-card.selected{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}

.model-logo img{
  width:34px;
  height:34px;
  object-fit:contain;
}

.identity .icon img{
  width:58px;
  height:58px;
  object-fit:contain;
}

.pill{
  cursor:pointer;
}

.filters{
  flex-wrap:wrap;
}

/* An em dash at the score's size and colour reads as a stray blue rule. */
.score h2.unrated{
  color:var(--border);
  font-size:24px;
}

.empty-state{
  text-align:center;
  color:var(--text-2);
  padding:40px 0;
}

.hidden{
  display:none !important;
}

/* ---------- Rating rows ---------- */

.star{
  cursor:pointer;
  background:none;
  padding:0;
  line-height:1;
  transition:transform .12s ease;
}

.star:hover{
  transform:scale(1.15);
}

.stars.locked .star{
  cursor:default;
}

.stars.locked .star:hover{
  transform:none;
}

.community-avg{
  display:block;
  color:var(--muted);
  font-size:12px;
  margin-top:2px;
}

/* ---------- Vote status ---------- */

.notice.error{
  background:#fef2f2;
  color:#b91c1c;
}

.notice.success{
  background:#f0fdf4;
  color:#15803d;
}

.captcha-section{
  /* Sits between the criteria and the submit button now, so it needs breathing
     room above rather than below. */
  margin:20px 0 4px;
}

.captcha-label{
  font-size:13px;
  color:var(--text-2);
  margin-bottom:10px;
}

/* Turnstile in Managed mode often resolves without showing anything, leaving
   the label above an empty box. Collapse the container until it has painted a
   real widget. */
#turnstileContainer:empty{
  display:none;
}

#turnstileContainer{
  min-height:0;
}

.submit[disabled]{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

/* ---------- Billboard ad ---------- */

.ad-billboard{
  border-top:1px solid var(--border);
  background:#fff;
  padding:40px 16px;
  display:flex;
  justify-content:center;
}

.ad-970{
  width:970px;
  max-width:100%;
  height:250px;
}

/* ---------- Footer ---------- */

footer{
  border-top:1px solid var(--border);
  background:var(--surface-2);
  padding:26px 0;
}

.footer-inner{
  width:min(1400px,92%);
  margin:auto;
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  font-size:13px;
  color:var(--text-2);
}

.footer-inner .muted{
  color:var(--muted);
}

/* ---------- Responsive ---------- */

@media (max-width:1700px) and (min-width:1280px){

  .layout{
    gap:20px;
  }

  /* Two 300px rails leave the content columns too narrow here, so the rail
     steps down to a skyscraper instead of disappearing. */
  .ad-rail-mount{ width:160px; }

}

@media (max-width:1279px){

  .layout{
    width:min(1400px,92%);
  }

  .ad-rail{
    display:none;
  }

}

/* Phones and small tablets keep the top banner only. */
@media (max-width:1100px){

  .ad-billboard{
    display:none;
  }

}

@media (max-width:1100px){

  /* Re-declared here: the appended .main rule above outranks the earlier
     breakpoint by source order. */
  .main{
    grid-template-columns:minmax(0,1fr);
  }

  .column-panel{
    position:static;
  }

  /* On narrow screens the panel replaces the list instead of sitting beside it. */
  body:not(.detail-open) .column-panel{
    display:none;
  }

  body.detail-open .column-list{
    display:none;
  }

  .back{
    display:inline-block;
  }

}

@media (min-width:1101px){

  .back{
    visibility:hidden;
  }

}

@media (max-width:640px){

  .header-inner{
    height:auto;
    padding:14px 0;
    flex-wrap:wrap;
    gap:12px;
  }

  .logo-mark{
    font-size:24px;
  }

  .logo-tag{
    font-size:8px;
    letter-spacing:2px;
  }

  .ad-banner{
    padding-top:14px;
  }

  .panel{
    padding:20px;
  }

  .identity .icon{
    width:64px;
    height:64px;
  }

  .identity .icon img{
    width:42px;
    height:42px;
  }

  .identity h1{
    font-size:30px;
  }

  .aimr h1{
    font-size:42px;
  }

}

/* ---------- Type tabs ---------- */

.type-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:18px;
  padding-bottom:16px;
  border-bottom:1px solid var(--border);
}

.type-tab{
  background:none;
  padding:8px 14px;
  border-radius:10px;
  font-size:15px;
  font-weight:600;
  color:var(--text-2);
  display:flex;
  align-items:center;
  gap:7px;
  transition:var(--transition);
}

.type-tab:hover{
  background:var(--surface-2);
  color:var(--text);
}

.type-tab.active{
  background:#0f172a;
  color:#fff;
}

.type-count{
  font-size:11px;
  font-weight:700;
  padding:2px 6px;
  border-radius:999px;
  background:rgba(15,23,42,.08);
  color:var(--text-2);
}

.type-tab.active .type-count{
  background:rgba(255,255,255,.18);
  color:#fff;
}

/* ---------- Ad mounts ---------- */

.ad-mount{
  display:grid;
  place-items:stretch;
  overflow:hidden;
}

.ad-mount > *{
  width:100%;
  height:100%;
}

.ad-creative{
  display:block;
  line-height:0;
}

.ad-creative img{
  display:block;
  max-width:100%;
  height:auto;
}

/* ---------- Document pages ---------- */

.doc{
  width:min(1000px,92%);
  margin:auto;
  padding:48px 0 72px;
}

.doc-hero h1{
  font-size:clamp(34px,4vw,52px);
  letter-spacing:-1.5px;
  margin-bottom:14px;
}

.doc-hero p{
  color:var(--text-2);
  font-size:18px;
  max-width:62ch;
}

.doc-section{
  margin-top:48px;
}

.doc-section h2{
  font-size:24px;
  letter-spacing:-.5px;
  margin-bottom:14px;
}

.doc-section p{
  color:var(--text-2);
  line-height:1.65;
  max-width:70ch;
  margin-bottom:12px;
}

.doc-note{
  font-size:14px;
  color:var(--muted);
}

.doc-list{
  list-style:none;
  max-width:70ch;
}

.doc-list li{
  color:var(--text-2);
  line-height:1.6;
  padding-left:20px;
  margin-bottom:9px;
  position:relative;
}

.doc-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:10px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--primary);
}

.doc code{
  background:var(--surface-2);
  padding:2px 6px;
  border-radius:6px;
  font-size:13px;
}

.doc-cta{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:30px;
}

.submit.inline{
  width:auto;
  display:inline-block;
  padding:14px 26px;
  margin-top:8px;
}

/* ---------- Slot cards ---------- */

.slot-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:20px;
}

.slot-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px;
}

.slot-card h3{
  font-size:17px;
  margin-bottom:6px;
}

.slot-card p{
  font-size:14px;
  margin:0;
}

.slot-visual{
  height:60px;
  margin-bottom:16px;
  display:grid;
  place-items:center;
  border:1px dashed var(--border);
  border-radius:var(--radius-sm);
  background:repeating-linear-gradient(-45deg,#f1f5f9 0 10px,#f8fafc 10px 20px);
  color:var(--muted);
  font-size:12px;
  font-weight:600;
}

.slot-visual.tall{ height:120px; width:60px; margin-inline:auto; }
.slot-visual.wide{ height:44px; }

/* ---------- Tables ---------- */

.table-scroll{
  overflow-x:auto;
}

.price-table{
  width:100%;
  min-width:600px;
  border-collapse:collapse;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
}

.price-table th,
.price-table td{
  padding:14px 16px;
  text-align:left;
  border-bottom:1px solid var(--border);
  font-size:14px;
  vertical-align:top;
}

.price-table thead th{
  background:var(--surface-2);
  font-size:13px;
  font-weight:700;
}

.price-table tbody tr:last-child td{
  border-bottom:none;
}

.price-table small{
  color:var(--muted);
  font-weight:500;
}

.price-table tr.highlight{
  background:#eff6ff;
}

/* ---------- Admin ---------- */

.admin-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.admin-form{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;
  margin-bottom:20px;
}

.admin-form label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:13px;
  font-weight:600;
  color:var(--text-2);
}

.admin-form label.wide{
  grid-column:1 / -1;
}

.admin-form input,
.admin-form select,
.admin-row input{
  font-family:inherit;
  font-size:14px;
  padding:11px 13px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:#fff;
  color:var(--text);
  min-width:220px;
}

.admin-form input:focus,
.admin-form select:focus,
.admin-row input:focus{
  outline:2px solid var(--primary);
  outline-offset:1px;
}

.admin-actions{
  display:flex;
  gap:6px;
  white-space:nowrap;
}

.pill.danger{
  color:var(--danger);
  border-color:#fecaca;
}

.pill.danger:hover{
  background:#fef2f2;
}

.badge-live,
.badge-off{
  font-size:11px;
  font-weight:700;
  padding:3px 9px;
  border-radius:999px;
  text-transform:uppercase;
  letter-spacing:.5px;
}

.badge-live{ background:#dcfce7; color:#15803d; }
.badge-off{ background:var(--surface-2); color:var(--muted); }

/* Once Turnstile has passed, its box has no further purpose on screen. The
   widget is kept in the DOM (removing it would forfeit the token) and only
   hidden, then shown again if the token expires or is spent. */
.captcha-section.verified #turnstileContainer{
  display:none;
}

.captcha-section.verified .captcha-label{
  color:var(--success);
  font-weight:600;
}

.captcha-section.verified .captcha-label::before{
  content:"✓ ";
  font-weight:700;
}

.rate-sub{
  font-size:18px;
  letter-spacing:-.3px;
  margin:32px 0 10px;
}