/* ============================================================
   HOTIMG.COM — Design System
   Warm "hot" coral palette on the Sudoku.by structural system:
   white cards, 1px warm borders, 10px radius, soft shadows.
   ============================================================ */

:root {
  --hot: #f43a52;
  --hot-dark: #d92440;
  --hot-light: #fff0f1;
  --hot-border: #ffd2d8;
  --accent: #ff6b35;
  --accent-dark: #e2531f;
  --accent-light: #fff3ec;
  --amber: #ffa502;
  --text: #27201d;
  --text-muted: #6f625c;
  --text-light: #a2968f;
  --surface: #ffffff;
  --surface-2: #faf6f3;
  --surface-3: #f4ebe5;
  --border: #ecdfd7;
  --border-focus: #ffb0ba;
  --green: #16a34a;
  --green-50: #f0fdf4;
  --shadow-sm: 0 1px 3px rgba(80, 30, 20, .08);
  --shadow: 0 4px 12px rgba(80, 30, 20, .10);
  --shadow-lg: 0 8px 24px rgba(80, 30, 20, .12);
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 16px;
  --nav-height: 62px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --grad-hot: linear-gradient(135deg, #d92440 0%, #f43a52 55%, #ff6b35 100%);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; overflow-x: hidden; }
body { overflow-x: hidden; font-family: var(--font); color: var(--text);
  background: var(--surface-2); line-height: 1.6; -webkit-font-smoothing: antialiased; }

a { color: var(--hot); text-decoration: none; }
a:hover { color: var(--hot-dark); }
img, video, iframe, embed, object { max-width: 100%; display: block; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.2; color: var(--text); }
h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.25rem; } h4 { font-size: 1.1rem; }
p { margin-bottom: 1rem; color: var(--text-muted); }
p:last-child { margin-bottom: 0; }
strong { color: var(--text); }
code { background: var(--surface-3); border-radius: 4px; padding: .1rem .35rem;
  font-size: .85em; color: var(--hot-dark); }
pre { background: #241a17; color: #ffe8de; border-radius: var(--radius);
  padding: 1rem 1.25rem; overflow-x: auto; font-size: .85rem; line-height: 1.6; margin: 1rem 0; }
pre code { background: none; color: inherit; padding: 0; }

/* ---------- Layout ---------- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.container-sm { max-width: 760px; margin: 0 auto; padding: 0 1.5rem; }
.container-lg { max-width: 1400px; margin: 0 auto; padding: 0 1.5rem; }
.page-wrap { padding: 2.5rem 0; }
.section { padding: 3rem 0; }
.section-title { font-size: 1.75rem; font-weight: 800; margin-bottom: .5rem; }
.section-subtitle { color: var(--text-muted); margin-bottom: 2rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.section-head { display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 1.5rem; flex-wrap: wrap; gap: .5rem; }
.section-head h2 { margin: 0; }
.section-head .more-link { font-size: .875rem; font-weight: 500; }

/* ---------- Buttons (flat, IMGNOW-style: height-based, 1px, press feedback) ---------- */
.btn { --bh: 42px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: var(--bh); padding: 0 20px; border-radius: 8px; font-size: .92rem; font-weight: 600;
  letter-spacing: -.01em; cursor: pointer; border: 1px solid transparent;
  background: var(--surface); color: var(--text);
  transition: background .15s, color .15s, border-color .15s; white-space: nowrap;
  text-decoration: none; font-family: var(--font); }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--hot); color: #fff; }
.btn-primary:hover { background: var(--hot-dark); color: #fff; }
.btn-outline { background: var(--surface); color: var(--hot); border-color: var(--hot-border); }
.btn-outline:hover { background: var(--hot-light); color: var(--hot-dark); border-color: var(--hot-border); }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-dark); color: #fff; }
.btn-ghost { background: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--surface-3); color: var(--text); }
.btn-danger { background: #ef4444; color: #fff; }
.btn-danger:hover { background: #dc2626; color: #fff; }
.btn-dark { background: #27201d; color: #fff; }
.btn-dark:hover { background: #3d322d; color: #fff; }
.btn-sm { --bh: 34px; padding: 0 14px; font-size: .82rem; }
.btn-lg { --bh: 50px; padding: 0 26px; font-size: 1rem; }
.btn-xl { --bh: 56px; padding: 0 32px; font-size: 1.05rem; border-radius: 10px; }
.btn-full { width: 100%; }
.btn[disabled] { opacity: .55; pointer-events: none; }

/* ---------- Cards ---------- */
.card { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.card-body { padding: 1.5rem; }
.card-header { padding: 1rem 1.5rem; border-bottom: 1px solid var(--border);
  font-weight: 600; font-size: inherit; }
/* Section labels promoted to real headings keep the card-header look. */
.card-header h2, .card-header h3 { margin: 0; font-size: 1rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: .4rem; letter-spacing: 0; }
.card-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--border);
  background: var(--surface-2); border-radius: 0 0 var(--radius) var(--radius); }
.card-hover { transition: all .2s; }
.card-hover:hover { border-color: var(--hot); transform: translateY(-2px); }

.eyebrow { font-size: .68rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted); }

/* ---------- Nav ---------- */
.site-nav { background: var(--surface); border-bottom: 1px solid var(--border);
  height: var(--nav-height); position: sticky; top: 0; z-index: 100; box-shadow: var(--shadow-sm); }
.nav-inner { display: flex; align-items: center; height: 100%; gap: 0; }
.nav-logo { display: flex; align-items: center; gap: .5rem; font-size: 1.3rem; font-weight: 800;
  color: var(--text); letter-spacing: -.03em; margin-right: 1.5rem; white-space: nowrap; flex-shrink: 0; }
.brand-logo { width: 34px; height: 34px; flex: none; object-fit: contain; display: block; }
.nav-logo .logo-hot { color: var(--hot); }
.nav-links { display: flex; align-items: center; gap: .25rem; flex: 1; list-style: none; }
.nav-links > li > a, .nav-dropdown-trigger { display: flex; align-items: center; gap: .3rem;
  padding: .4rem .75rem; border-radius: var(--radius-sm); font-size: .9rem; font-weight: 500;
  color: var(--text); white-space: nowrap; transition: background .15s, color .15s; cursor: pointer; }
.nav-links > li > a:hover, .nav-links > li > a.active,
.nav-has-dropdown:hover .nav-dropdown-trigger { background: var(--hot-light); color: var(--hot); }
.nav-actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.nav-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--border); }
.nav-avatar-fallback { width: 34px; height: 34px; border-radius: 50%; background: var(--grad-hot);
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .9rem; }
.nav-bell { position: relative; display: inline-flex; padding: .45rem; border-radius: var(--radius-sm);
  color: var(--text-muted); }
.nav-bell:hover { background: var(--surface-3); color: var(--text); }
.nav-bell .bell-dot { position: absolute; top: 4px; right: 4px; min-width: 15px; height: 15px;
  border-radius: 8px; background: var(--hot); color: #fff; font-size: .58rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; padding: 0 3px; }

.nav-has-dropdown { position: relative; }
.nav-has-dropdown:hover .nav-dropdown-trigger svg { transform: rotate(180deg); }
.nav-dropdown-trigger svg { flex-shrink: 0; transition: transform .15s; }
.nav-mega { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(80,30,20,.14); width: 620px; max-width: calc(100vw - 2rem);
  padding: .75rem 0 .5rem; z-index: 300; visibility: hidden; opacity: 0;
  transition: opacity .12s ease, visibility 0s linear .25s; }
/* invisible bridge so the pointer never falls into the gap below the trigger */
.nav-mega::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav-has-dropdown:hover .nav-mega,
.nav-has-dropdown:focus-within .nav-mega { visibility: visible; opacity: 1; transition-delay: 0s; }
.nav-mega-cols { display: grid; grid-template-columns: 1fr 1fr; }
.nav-mega-heading { font-size: .68rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted); padding: .6rem 1rem .2rem; }
.nav-mega a { display: flex; align-items: center; gap: .5rem; padding: .34rem 1rem;
  font-size: .84rem; color: var(--text); border-radius: 4px; }
.nav-mega a:hover { background: var(--hot-light); color: var(--hot); }
.nav-mega a svg { color: var(--text-light); flex-shrink: 0; }
.nav-mega a:hover svg { color: var(--hot); }
.nav-mega-footer { border-top: 1px solid var(--border); margin-top: .5rem;
  padding: .5rem 1rem 0; display: flex; justify-content: flex-end; }

/* user dropdown (click) */
.nav-user { position: relative; }
.nav-user-menu { position: absolute; right: 0; top: calc(100% + 8px); width: 220px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: .4rem; display: none; z-index: 300; }
.nav-user-menu.open { display: block; }
.nav-user-menu a, .nav-user-menu button { display: flex; align-items: center; gap: .6rem;
  width: 100%; padding: .5rem .75rem; border-radius: var(--radius-sm); font-size: .875rem;
  color: var(--text); background: none; border: none; cursor: pointer; text-align: left;
  font-family: var(--font); }
.nav-user-menu a:hover, .nav-user-menu button:hover { background: var(--hot-light); color: var(--hot); }
.nav-user-menu .menu-sep { border-top: 1px solid var(--border); margin: .35rem 0; }
.nav-user-menu .menu-head { padding: .5rem .75rem .25rem; font-size: .75rem; color: var(--text-light); }

/* hamburger */
.nav-hamburger { display: none; flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; width: 38px; height: 38px; border: none; background: none; cursor: pointer;
  border-radius: var(--radius-sm); padding: 6px; }
.nav-hamburger span { display: block; width: 22px; height: 2px; background: var(--text);
  border-radius: 2px; transition: transform .22s, opacity .22s, width .22s; transform-origin: center; }
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; width: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile-panel { display: none; position: fixed; top: var(--nav-height); left: 0; right: 0;
  bottom: 0; z-index: 99; overflow-y: auto; background: var(--surface);
  border-top: 1px solid var(--border); box-shadow: 0 8px 30px rgba(80,30,20,.12);
  padding: 0 0 2rem; transform: translateY(-6px); opacity: 0; transition: opacity .2s, transform .2s; }
.nav-mobile-panel.open { opacity: 1; transform: translateY(0); }
.mob-link { display: flex; align-items: center; gap: .6rem; padding: .85rem 1.5rem;
  font-size: .95rem; font-weight: 500; color: var(--text); border-bottom: 1px solid var(--surface-3); }
.mob-link:hover { background: var(--hot-light); color: var(--hot); }
.nav-mobile-heading { font-size: .68rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted); padding: 1rem 1.5rem .3rem; }
.nav-mobile-actions { display: flex; flex-direction: column; gap: .6rem; padding: 1.25rem 1.5rem; }

/* ---------- Forms ---------- */
.form-group { margin-bottom: 1.25rem; }
.form-label { display: block; font-weight: 600; font-size: .875rem; margin-bottom: .4rem;
  color: var(--text); }
.form-control { width: 100%; padding: .6rem .875rem; border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); font-size: .9rem; color: var(--text);
  background: var(--surface); transition: border-color .15s, box-shadow .15s;
  font-family: var(--font); }
.form-control:focus { outline: none; border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(244, 58, 82, .14); }
textarea.form-control { resize: vertical; min-height: 90px; }
select.form-control { appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236f625c' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8rem center; padding-right: 2.2rem; }
.form-hint { font-size: .78rem; color: var(--text-light); margin-top: .35rem; }
.form-check { display: flex; align-items: flex-start; gap: .55rem; font-size: .875rem;
  color: var(--text-muted); cursor: pointer; }
.form-check input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--hot);
  flex-shrink: 0; cursor: pointer; }
.input-group { display: flex; }
.input-group .form-control { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.input-group .btn { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

/* ---------- Alerts / badges ---------- */
.alert { padding: .85rem 1.25rem; border-radius: var(--radius-sm); margin-bottom: 1rem;
  font-size: .9rem; display: flex; align-items: flex-start; gap: .6rem; }
.alert-success { background: #f0fdf4; border: 1px solid #86efac; color: #166534; }
.alert-danger { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; }
.alert-warning { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
/* Secondary opt-in under the upload confirmation - deliberately quieter than the
   confirmation itself, which must stay the prominent one. */
.upload-remember { margin-top: .6rem; padding: 0 .25rem; align-items: flex-start; }
.upload-remember span { font-size: .78rem; color: var(--text-light); line-height: 1.5; }

/* Google-only sign-up: the terms notice replaces the old agree checkbox, and
   password sign-in collapses into a disclosure so it stops competing with the
   one button that actually creates accounts. */
.auth-terms { font-size: .78rem; line-height: 1.6; color: var(--text-light);
  margin: 1rem 0 0; text-align: center; }
.auth-benefits { list-style: none; padding: 0; margin: 1.75rem 0 0;
  display: flex; flex-direction: column; gap: .6rem; }
.auth-benefits li { display: flex; align-items: center; gap: .5rem;
  font-size: .87rem; color: var(--text-muted); }
.auth-benefits svg { color: var(--hot); flex-shrink: 0; }
.auth-legacy { margin-top: 1.75rem; border-top: 1px solid var(--border); padding-top: 1rem; }
.auth-legacy summary { cursor: pointer; font-size: .84rem; color: var(--text-muted);
  list-style: none; text-align: center; }
.auth-legacy summary::-webkit-details-marker { display: none; }
.auth-legacy summary:hover { color: var(--hot); }

.alert-info { background: var(--hot-light); border: 1px solid var(--hot-border); color: var(--hot-dark); }
/* Guest invitation above the gallery grid: the middle span takes the slack so
   the button stays pinned right, and it wraps to stacked on narrow screens. */
.gallery-join { align-items: center; margin: 0 0 1.5rem; }
.gallery-join > span:nth-child(2) { flex: 1; min-width: 12rem; }
.gallery-join .btn { flex-shrink: 0; }
@media (max-width: 560px) { .gallery-join { flex-wrap: wrap; } }

.badge { display: inline-block; padding: .2rem .6rem; border-radius: 999px;
  font-size: .75rem; font-weight: 600; }
.badge-hot { background: var(--hot-light); color: var(--hot-dark); }
.badge-green { background: #f0fdf4; color: #166534; }
.badge-yellow { background: #fffbeb; color: #92400e; }
.badge-red { background: #fef2f2; color: #991b1b; }
.badge-gray { background: var(--surface-3); color: var(--text-muted); }
.badge-purple { background: #f5f3ff; color: #6d28d9; }
.badge-dark { background: #27201d; color: #fff; }

.chip { display: inline-flex; align-items: center; gap: .3rem; background: #dcfce7;
  color: #166534; font-size: .7rem; font-weight: 700; padding: .2rem .5rem; border-radius: 999px; }

/* ---------- Breadcrumb ---------- */
.breadcrumb { display: flex; align-items: center; gap: .4rem; font-size: .85rem;
  color: var(--text-muted); margin-bottom: 1.5rem; flex-wrap: wrap; }
.breadcrumb a { color: var(--hot); }
.breadcrumb .sep { color: var(--text-light); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--surface); }
.data-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.data-table thead tr { background: var(--surface-2); }
.data-table th { padding: .65rem 1rem; font-weight: 700; color: var(--text); text-align: left;
  border-bottom: 2px solid var(--border); white-space: nowrap; }
.data-table td { padding: .6rem 1rem; border-bottom: 1px solid var(--border); color: var(--text-muted);
  vertical-align: top; line-height: 1.55; }
/* .text-center alone loses to the `.data-table th` selector above, so a header
   cell asking to be centred needs the matching specificity. */
.data-table th.text-center { text-align: center; }
.data-table th small { display: block; font-weight: 500; font-size: .74rem;
  color: var(--text-muted); letter-spacing: 0; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:nth-child(even) { background: var(--surface-2); }
.data-table tbody tr:hover td { background: var(--hot-light); }

/* ---------- FAQ ---------- */
.faq-list { display: flex; flex-direction: column; gap: 1rem; }
details.faq-item { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); }
details.faq-item summary { padding: 1.15rem 1.25rem; font-weight: 600; list-style: none;
  display: flex; justify-content: space-between; align-items: center; cursor: pointer;
  color: var(--text); font-size: .95rem; gap: .75rem; }
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary svg { flex-shrink: 0; transition: transform .2s; color: var(--text-light); }
details.faq-item[open] summary svg { transform: rotate(180deg); color: var(--hot); }
details.faq-item .faq-body { padding: 0 1.25rem 1.25rem; color: var(--text-muted);
  font-size: .93rem; line-height: 1.8; }

/* ---------- Modal ---------- */
.modal-overlay { position: fixed; inset: 0; background: rgba(39, 32, 29, .55);
  display: flex; align-items: center; justify-content: center; z-index: 1000;
  opacity: 0; pointer-events: none; transition: opacity .2s; padding: 1rem; }
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal { background: var(--surface); border-radius: var(--radius-lg); padding: 2rem;
  max-width: 500px; width: 100%; max-height: 90vh; overflow-y: auto;
  box-shadow: var(--shadow-lg); transform: translateY(16px); transition: transform .2s; }
.modal-overlay.open .modal { transform: translateY(0); }
.modal h3 { margin-bottom: 1rem; }

/* ---------- Pagination ---------- */
.pagination { display: flex; align-items: center; gap: .5rem; justify-content: center;
  margin-top: 2rem; flex-wrap: wrap; }
.page-link { display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 .5rem; border-radius: var(--radius-sm);
  border: 1.5px solid var(--border); font-size: .875rem; font-weight: 500; color: var(--text);
  background: var(--surface); }
.page-link:hover { border-color: var(--hot); color: var(--hot); background: var(--hot-light); }
.page-link.active { background: var(--hot); border-color: var(--hot); color: #fff; }
.page-link.disabled { opacity: .4; pointer-events: none; }

/* ---------- Hero ---------- */
.hero-band { background: var(--grad-hot); color: #fff; padding: 3.5rem 0 3rem; text-align: center; }
.hero-band h1 { color: #fff; font-size: 2.6rem; margin-bottom: .75rem; letter-spacing: -.5px; }
.hero-band p { color: rgba(255,255,255,.88); font-size: 1.1rem; max-width: 640px; margin: 0 auto 1.5rem; }

/* ---------- Hero upload band with mascot watermark ---------- */
.hero-upload { background: linear-gradient(180deg, var(--hot-light) 0%, var(--surface-2) 100%);
  border-bottom: 1px solid var(--border); position: relative; overflow: hidden; }
.hero-upload::before, .hero-upload::after { content: ""; position: absolute;
  width: 300px; height: 300px; background: url("../img/logo-mark.png") center / contain no-repeat;
  opacity: .06; pointer-events: none; }
.hero-upload::before { top: -48px; right: -36px; transform: rotate(12deg); }
.hero-upload::after { bottom: -64px; left: -48px; transform: rotate(-10deg); }
.hero-upload .container { position: relative; z-index: 1; }
@media (max-width: 768px) {
  .hero-upload::before, .hero-upload::after { width: 190px; height: 190px; opacity: .05; }
}

/* ---------- Upload dropzone ---------- */
.dropzone { border: 2.5px dashed var(--hot-border); border-radius: var(--radius-lg);
  background: var(--surface); padding: 3rem 2rem; text-align: center; cursor: pointer;
  transition: border-color .2s, background .2s, transform .15s; position: relative;
  overflow: hidden; }
.dropzone:hover, .dropzone.dragover { border-color: var(--hot); background: var(--hot-light); }
.dropzone.dragover { transform: scale(1.01); }
/* mascot fades in on the left, tilted, behind the dropzone content on hover / drag-over */
.dropzone::after { content: ""; position: absolute; left: 3%; top: 50%;
  width: 190px; height: 190px; margin-top: -95px;
  background: url("../img/logo-mark.png") center / contain no-repeat;
  transform: rotate(-12deg); opacity: 0; transition: opacity .3s ease;
  pointer-events: none; }
.dropzone:hover::after, .dropzone.dragover::after { opacity: .09; }
@media (max-width: 640px) { .dropzone::after { width: 130px; height: 130px; margin-top: -65px; left: -8px; } }
.dropzone > * { position: relative; z-index: 1; }
.dropzone .dz-icon { width: 72px; height: 72px; margin: 0 auto 1rem; border-radius: 20px;
  background: var(--grad-hot); color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(244, 58, 82, .35); }
.dropzone h2 { font-size: 1.35rem; margin-bottom: .35rem; }
.dropzone .dz-sub { color: var(--text-muted); font-size: .9rem; margin-bottom: 0; }
.dropzone .dz-formats { margin-top: 1rem; font-size: .75rem; color: var(--text-light); }
.upload-options { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end;
  margin-top: 1.25rem; }
.upload-options .form-group { margin-bottom: 0; flex: 1; min-width: 160px; }

/* upload results */
.upload-result { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  margin-bottom: .85rem; }
.upload-result img { width: 74px; height: 74px; object-fit: cover; border-radius: var(--radius-sm);
  flex-shrink: 0; }
.upload-result .ur-body { flex: 1; min-width: 0; }
.upload-result .ur-name { font-weight: 600; font-size: .9rem; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.copy-row { display: flex; margin-top: .45rem; }
.copy-row input { flex: 1; min-width: 0; font-size: .78rem; padding: .4rem .6rem;
  border: 1.5px solid var(--border); border-right: none; border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background: var(--surface-2); color: var(--text-muted); font-family: monospace; }
.copy-row button { border: 1.5px solid var(--hot); background: var(--hot); color: #fff;
  padding: 0 .8rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; cursor: pointer;
  font-size: .78rem; font-weight: 600; }
.copy-row button:hover { background: var(--hot-dark); }
.copy-row button.copied { background: var(--green); border-color: var(--green); }

.progress-track { height: 8px; background: var(--surface-3); border-radius: 99px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--grad-hot); border-radius: 99px;
  transition: width .25s; }

/* ---------- Image grids ---------- */
.img-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; }
.img-grid-sm { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem; }
.img-card { position: relative; border-radius: var(--radius); overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); transition: all .2s; display: block; }
.img-card:hover { border-color: var(--hot); transform: translateY(-2px); }
.img-card img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.img-card .img-card-meta { padding: .55rem .7rem; }
.img-card .img-card-title { font-size: .8rem; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.img-card .img-card-sub { font-size: .7rem; color: var(--text-light); display: flex;
  gap: .6rem; margin-top: .15rem; }
.img-card .img-card-badge { position: absolute; top: 8px; left: 8px; z-index: 2; }
.img-card .img-card-check { position: absolute; top: 8px; right: 8px; z-index: 3; }
.img-card .img-card-check input { width: 19px; height: 19px; accent-color: var(--hot); cursor: pointer; }
.img-card.selected { outline: 3px solid var(--hot); outline-offset: -3px; }

/* ---------- Countdown ---------- */
.countdown-pill { display: inline-flex; align-items: center; gap: .4rem; background: #fff7ed;
  border: 1px solid #fed7aa; color: #9a3412; font-size: .8rem; font-weight: 600;
  /* Rounded rectangle, matching the .action-btn controls it sits beside in the
     viewer action bar - the full 999px pill was the odd shape out. */
  border-radius: var(--radius-sm); padding: .35rem .7rem;
  font-variant-numeric: tabular-nums; }
.countdown-pill.forever { background: var(--green-50); border-color: #bbf7d0; color: #166534; }
.countdown-pill svg { flex-shrink: 0; }

/* ---------- Viewer page ---------- */
.viewer-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.5rem;
  align-items: start; }
.viewer-stage { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; }
.viewer-stage .stage-inner { background:
  repeating-conic-gradient(var(--surface-3) 0% 25%, var(--surface) 0% 50%) 50% / 24px 24px;
  display: flex; align-items: center; justify-content: center; min-height: 320px; }
.viewer-stage img { max-height: 76vh; width: auto; max-width: 100%; object-fit: contain; }
.viewer-actionbar { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem;
  border-top: 1px solid var(--border); flex-wrap: wrap; }
.action-btn { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .8rem;
  border-radius: var(--radius-sm); font-size: .82rem; font-weight: 600; color: var(--text-muted);
  background: var(--surface-2); border: 1px solid var(--border); cursor: pointer;
  font-family: var(--font); text-decoration: none; }
.action-btn:hover { border-color: var(--hot); color: var(--hot); background: var(--hot-light); }
.action-btn.liked { background: var(--hot); border-color: var(--hot); color: #fff; }
.viewer-meta-row { display: flex; gap: 1.25rem; font-size: .82rem; color: var(--text-light);
  flex-wrap: wrap; align-items: center; }
.viewer-meta-row span { display: inline-flex; align-items: center; gap: .3rem; }

.uploader-card { display: flex; align-items: center; gap: .8rem; }
.uploader-card .up-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.uploader-card .up-avatar-fallback { width: 48px; height: 48px; border-radius: 50%;
  background: var(--grad-hot); color: #fff; display: flex; align-items: center;
  justify-content: center; font-weight: 800; font-size: 1.15rem; }
.uploader-card .up-name { font-weight: 700; font-size: .95rem; color: var(--text); }
.uploader-card .up-sub { font-size: .78rem; color: var(--text-light); }

.embed-block { margin-bottom: .7rem; }
.embed-block label { font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-muted); display: block; margin-bottom: .3rem; }

/* ---------- Ribbon hero card (gallery teaser) ---------- */
.teaser-card { position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 4.6rem 2rem 2.25rem;
  text-align: center; }
.ribbon { position: absolute; top: 26px; left: -14px; right: -14px; height: 46px;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  background: linear-gradient(90deg, #15803d 0%, #22c55e 55%, #16a34a 100%);
  color: #fff; font-weight: 800; font-size: .92rem; letter-spacing: .07em;
  text-transform: uppercase; border-radius: 6px; }
.ribbon::before, .ribbon::after { content: ""; position: absolute; top: 100%; width: 0; height: 0; }
.ribbon::before { left: 0; border-top: 9px solid #0d5c2b; border-left: 14px solid transparent; }
.ribbon::after { right: 0; border-top: 9px solid #0d5c2b; border-right: 14px solid transparent; }
@media (max-width: 640px) {
  .ribbon { left: -8px; right: -8px; font-size: .78rem; height: 42px; }
  .ribbon::before { border-left-width: 8px; }
  .ribbon::after { border-right-width: 8px; }
  .teaser-card { padding: 4.2rem 1.1rem 1.75rem; }
}
.teaser-stats { display: flex; justify-content: center; gap: 2.25rem; flex-wrap: wrap;
  margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px dashed var(--border); }
.teaser-stats .ts { text-align: center; }
.teaser-stats .ts b { display: block; font-size: 1.35rem; font-weight: 800; color: var(--text); }
.teaser-stats .ts span { font-size: .75rem; color: var(--text-light); text-transform: uppercase;
  letter-spacing: .05em; font-weight: 600; }

/* ---------- Ad slots ---------- */
.ad-slot { display: flex; align-items: center; justify-content: center; background: var(--surface);
  border: 1.5px dashed var(--border); border-radius: var(--radius); color: var(--text-light);
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; position: relative;
  overflow: hidden; }
.ad-slot::before { content: "Advertisement"; }
.ad-slot-leaderboard { min-height: 100px; margin: 1.25rem 0; }
.ad-slot-box { min-height: 250px; }
.ad-slot-wide { min-height: 90px; margin: 1.25rem 0; }

/* ---------- Profile ---------- */
.profile-cover { height: 180px; border-radius: var(--radius-lg); background: var(--grad-hot);
  position: relative; overflow: hidden; }
.profile-cover img { width: 100%; height: 100%; object-fit: cover; }
.profile-head { display: flex; align-items: flex-end; gap: 1.25rem; margin-top: -44px;
  padding: 0 1.5rem; position: relative; z-index: 2; flex-wrap: wrap; }
.profile-avatar { width: 108px; height: 108px; border-radius: 50%; border: 4px solid var(--surface);
  object-fit: cover; background: var(--surface); box-shadow: var(--shadow); }
.profile-avatar-fallback { width: 108px; height: 108px; border-radius: 50%;
  border: 4px solid var(--surface); background: var(--grad-hot); color: #fff; display: flex;
  align-items: center; justify-content: center; font-weight: 800; font-size: 2.4rem;
  box-shadow: var(--shadow); }
.profile-info { flex: 1; padding-bottom: .35rem; min-width: 200px; }
.profile-name { font-size: 1.5rem; font-weight: 800; margin: 0; letter-spacing: -.02em; }
.profile-handle { color: var(--text-light); font-size: .9rem; }
.profile-bio { margin-top: .5rem; font-size: .92rem; color: var(--text-muted); max-width: 640px; }
.profile-stats { display: flex; gap: 1.5rem; margin-top: .8rem; flex-wrap: wrap; }
.profile-stats a, .profile-stats span { font-size: .875rem; color: var(--text-muted); }
.profile-stats b { color: var(--text); font-weight: 800; }
.profile-summary { margin: 0 0 1.75rem; }
.profile-summary h2 { font-size: 1.05rem; margin-bottom: .4rem; }
/* No max-width: this is a single short paragraph, and capping it at 780px broke
   it onto a second line well before the container ran out of room. */
.profile-summary p { font-size: .9rem; line-height: 1.7; margin: 0; }
.profile-tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--border);
  margin: 1.5rem 0; }
.profile-tab { padding: .6rem 1.1rem; font-size: .9rem; font-weight: 600; color: var(--text-muted);
  border-bottom: 2.5px solid transparent; margin-bottom: -1px; }
.profile-tab:hover { color: var(--hot); }
.profile-tab.active { color: var(--hot); border-bottom-color: var(--hot); }

/* ---------- Dashboard ---------- */
.dash-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 1.5rem;
  align-items: start; padding: 2rem 0; }
.dash-sidebar { position: sticky; top: calc(var(--nav-height) + 1.5rem); }
.dash-nav-link { display: flex; align-items: center; gap: .6rem; padding: .7rem 1.1rem;
  font-size: .88rem; color: var(--text); border-bottom: 1px solid var(--surface-3); }
.dash-nav-link:last-child { border-bottom: none; }
.dash-nav-link:hover { background: var(--hot-light); color: var(--hot); }
.dash-nav-link.active { background: var(--hot-light); color: var(--hot); font-weight: 600; }
.dash-nav-link svg { flex-shrink: 0; color: var(--text-light); }
.dash-nav-link:hover svg, .dash-nav-link.active svg { color: var(--hot); }

.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; }
.stat-tile { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.1rem 1.25rem; }
.stat-tile .st-label { font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-light); }
.stat-tile .st-value { font-size: 1.6rem; font-weight: 800; color: var(--text); margin-top: .2rem; }
.stat-tile .st-sub { font-size: .75rem; color: var(--text-light); }

.storage-bar { height: 10px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.storage-bar .sb-fill { height: 100%; border-radius: 99px; background: var(--grad-hot); }

/* ---------- Admin ---------- */
.mod-card { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 1rem;
  padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); margin-bottom: 1rem; }
.mod-card img { width: 150px; height: 150px; object-fit: cover; border-radius: var(--radius-sm); }
.verdict-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .7rem;
  border-radius: 999px; font-size: .75rem; font-weight: 700; }
.verdict-safe { background: #f0fdf4; color: #166534; }
.verdict-adult, .verdict-violence { background: #fef2f2; color: #991b1b; }
.verdict-racy { background: #fffbeb; color: #92400e; }
.verdict-advertisement { background: #f5f3ff; color: #6d28d9; }
.verdict-error, .verdict-none { background: var(--surface-3); color: var(--text-muted); }

/* ---------- Articles: magazine layout ---------- */
.article-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr) 280px; gap: 2rem;
  align-items: start; }
.article-toc-sidebar, .article-related-sidebar { position: sticky; top: 5rem; }
.article-toc-nav a { display: block; padding: .4rem .75rem; font-size: .8rem;
  color: var(--text-muted); border-left: 2px solid transparent; line-height: 1.4;
  transition: color .15s, border-color .15s, background .15s; }
.article-toc-nav a:hover, .article-toc-nav a.active { color: var(--hot);
  border-left-color: var(--hot); background: var(--hot-light); }
.article-toc-nav a.toc-h3 { padding-left: 1.5rem; font-size: .77rem; }

.article-hero-img { width: 100%; border-radius: var(--radius-lg); margin-bottom: 1.5rem;
  border: 1px solid var(--border); }
.article-meta-row { display: flex; align-items: center; gap: 1rem; font-size: .85rem;
  color: var(--text-muted); padding-bottom: 1.25rem; border-bottom: 1px solid var(--border);
  margin-bottom: 1.5rem; flex-wrap: wrap; }

.key-points { background: var(--hot-light); border: 1px solid var(--hot-border);
  border-radius: var(--radius); padding: 1.25rem 1.5rem; margin-bottom: 2rem; }
.key-points .kp-title { font-size: .68rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--hot-dark); margin-bottom: .6rem; }
.key-points ul { margin: 0; padding-left: 1.2rem; }
.key-points ul li { font-size: .88rem; color: var(--text); margin-bottom: .3rem; line-height: 1.55; }

.article-body h2 { font-size: 1.3rem; font-weight: 700; color: var(--text); margin-top: 2.5rem;
  margin-bottom: .75rem; scroll-margin-top: 5.5rem; }
.article-body h2:first-child { margin-top: 0; }
.article-body h3 { font-size: 1.05rem; font-weight: 700; color: var(--text); margin-top: 1.5rem;
  margin-bottom: .5rem; scroll-margin-top: 5.5rem; }
.article-body p { font-size: .97rem; line-height: 1.85; color: var(--text-muted);
  margin-bottom: 1rem; }
.article-body ul, .article-body ol { padding-left: 1.4rem; margin-bottom: 1.25rem;
  color: var(--text-muted); font-size: .94rem; line-height: 1.75; }
.article-body li { margin-bottom: .35rem; }
.article-body strong { color: var(--text); }
.article-body table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.article-body .table-wrap { margin: 1.25rem 0 1.75rem; }
.article-body blockquote { border-left: 4px solid var(--hot); background: var(--hot-light);
  margin: 1.25rem 0; padding: 1rem 1.25rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--text); font-size: .95rem; }
.article-body .callout { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: var(--radius);
  padding: .9rem 1.2rem; margin: 1.25rem 0; font-size: .88rem; color: #166534; line-height: 1.6; }
.article-body .callout-warn { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.article-body img { border-radius: var(--radius); margin: 1rem 0; }
.article-body pre { margin: 1.25rem 0; }

.stat-bar { display: flex; align-items: center; gap: .75rem; margin-bottom: .6rem; }
.stat-bar-label { font-size: .82rem; color: var(--text-muted); min-width: 110px; }
.stat-bar-track { flex: 1; height: 10px; background: var(--surface-3); border-radius: 99px;
  overflow: hidden; }
.stat-bar-fill { height: 100%; border-radius: 99px; background: var(--grad-hot);
  transition: width .3s; }
.stat-bar-val { font-size: .8rem; color: var(--text); font-weight: 600; min-width: 52px;
  text-align: right; }

/* article cards on hub */
.article-card { display: flex; flex-direction: column; overflow: hidden; height: 100%; }
.article-card img { width: 100%; height: 150px; object-fit: cover; }
.article-card .ac-body { padding: 1.1rem 1.25rem 1.25rem; display: flex;
  flex-direction: column; flex: 1; }
.article-card .ac-title { font-size: .98rem; font-weight: 700; line-height: 1.35;
  margin-bottom: .4rem; }
.article-card .ac-title a { color: var(--text); }
.article-card .ac-title a:hover { color: var(--hot); }
.article-card .ac-sum { font-size: .82rem; color: var(--text-muted); line-height: 1.6; flex: 1; }
.article-card .ac-meta { font-size: .72rem; color: var(--text-light); margin-top: .7rem; }

/* ---------- Tool pages ---------- */
/* top padding reserves the corner-ribbon zone so it never covers the upload box */
.tool-panel { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 4.6rem 1.75rem 1.75rem; box-shadow: var(--shadow-sm);
  position: relative; }
.tool-panel form, .tool-panel > .form-group { position: relative; z-index: 1; }

/* Corner ribbon - The tools' own ribbon, small and angled across the top-right corner */
.ribbon-corner { position: absolute; top: 0; right: 0; width: 88px; height: 88px;
  overflow: hidden; pointer-events: none; z-index: 2; border-top-right-radius: var(--radius-lg); }
.ribbon-corner span { position: absolute; top: 20px; right: -56px; transform: rotate(45deg);
  width: 200px; text-align: center; background: var(--grad-hot); color: #fff;
  font-weight: 800; font-size: .56rem; letter-spacing: .09em; text-transform: uppercase;
  padding: .32rem 0; }
@media (max-width: 640px) {
  .tool-panel { padding: 4rem 1.1rem 1.25rem; }
  .ribbon-corner { width: 76px; height: 76px; }
  .ribbon-corner span { top: 17px; right: -59px; font-size: .5rem; }
}

/* Spec table - "at a glance" rows with icon chips (distinct from .data-table) */
.spec-table { border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm); }
.spec-table .sr { display: flex; align-items: center; gap: .85rem; padding: .8rem 1.2rem;
  font-size: .9rem; }
.spec-table .sr + .sr { border-top: 1px solid var(--surface-3); }
.spec-table .sr:nth-child(odd) { background: var(--surface-2); }
.spec-table .si { width: 30px; height: 30px; border-radius: 8px; background: var(--hot-light);
  color: var(--hot); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.spec-table .sl { min-width: 132px; font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--text-light); }
.spec-table .sv { color: var(--text); font-weight: 500; flex: 1; }
@media (max-width: 520px) {
  .spec-table .sr { flex-wrap: wrap; }
  .spec-table .sl { min-width: 0; }
  .spec-table .sv { flex-basis: 100%; padding-left: 2.7rem; margin-top: -.3rem; }
}
.tool-result { margin-top: 1.5rem; }
.tool-result img { max-width: 100%; max-height: 480px; border-radius: var(--radius);
  border: 1px solid var(--border); margin: 0 auto; }
.tool-card-img { height: 140px; width: 100%; object-fit: cover; }
.steps-list { counter-reset: step; list-style: none; padding: 0; margin: 1rem 0; }
.steps-list li { position: relative; padding: 0 0 1.25rem 3rem; counter-increment: step; }
.steps-list li::before { content: counter(step); position: absolute; left: 0; top: 0;
  width: 32px; height: 32px; border-radius: 50%; background: var(--grad-hot); color: #fff;
  font-weight: 800; font-size: .9rem; display: flex; align-items: center; justify-content: center; }
.steps-list li:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 36px;
  bottom: 2px; width: 2px; background: var(--hot-border); }
.steps-list b { display: block; margin-bottom: .15rem; color: var(--text); }
.steps-list span { font-size: .9rem; color: var(--text-muted); }

.file-drop { border: 2px dashed var(--border); border-radius: var(--radius); padding: 1.25rem;
  text-align: center; cursor: pointer; transition: all .15s; background: var(--surface-2); }
.file-drop:hover, .file-drop.dragover { border-color: var(--hot); background: var(--hot-light); }
.file-drop.has-file { border-style: solid; border-color: var(--hot-border); background: var(--surface); }
.file-drop .file-drop-label { font-size: .85rem; color: var(--text-muted); font-weight: 600;
  display: block; margin-top: .4rem; word-break: break-all; }
.file-drop .file-preview { max-height: 140px; margin: .6rem auto 0; border-radius: var(--radius-sm); }
.file-drop input[type="file"] { display: none; }
.file-drop svg { color: var(--text-light); }

/* ---------- Feature cards ---------- */
.feature-card { padding: 1.35rem 1.4rem; border-radius: var(--radius); background: var(--surface);
  border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.feature-card .fc-icon { width: 32px; height: 32px; border-radius: 8px;
  background: var(--hot-light); color: var(--hot); display: flex; align-items: center;
  justify-content: center; margin-bottom: .65rem; }
.feature-card h3 { margin-bottom: .35rem; font-size: 1rem; }
.fc-head { display: flex; align-items: center; gap: .65rem; margin-bottom: .5rem; }
.fc-head .fc-icon { margin-bottom: 0 !important; flex-shrink: 0; }
.fc-head h3 { margin-bottom: 0 !important; }
.feature-card p { font-size: .875rem; margin-bottom: 0; }

/* ---------- Homepage story ---------- */
.home-kicker { display: block; margin-bottom: .8rem; color: var(--hot); font-size: .68rem;
  font-weight: 800; letter-spacing: .12em; line-height: 1; text-transform: uppercase; }
.home-kicker-light { color: #ff9e8c; }
.home-section-heading { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  gap: 5rem; align-items: end; margin-bottom: 2.5rem; }
.home-section-heading h2 { max-width: 680px; margin: 0; font-size: clamp(2rem, 4vw, 3.45rem);
  line-height: 1.02; letter-spacing: -.055em; }
.home-section-heading > p, .home-heading-aside p { max-width: 520px; margin: 0;
  font-size: 1rem; line-height: 1.75; }
.home-heading-aside a { display: inline-flex; align-items: center; gap: .4rem;
  margin-top: 1.25rem; padding: .65rem 1.25rem; border-radius: var(--radius);
  background: var(--hot); color: #fff; font-size: .9rem; font-weight: 700;
  transition: background .15s, transform .15s; }
.home-heading-aside a:hover { background: var(--hot-dark); color: #fff; transform: translateY(-1px); }

.home-proof { background: var(--surface); border-bottom: 1px solid var(--border); }
.home-proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); padding-top: 0;
  padding-bottom: 0; }
.home-proof-grid > div { display: grid; grid-template-columns: 36px auto; grid-template-rows: auto auto;
  column-gap: .75rem; align-items: center; min-height: 94px; padding: 1.1rem 1.5rem;
  border-right: 1px solid var(--border); }
.home-proof-grid > div:first-child { border-left: 1px solid var(--border); }
.home-proof-icon { grid-row: 1 / 3; display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 10px; background: var(--hot-light); color: var(--hot); }
.home-proof-grid strong { align-self: end; font-size: .95rem; line-height: 1.2; }
.home-proof-grid small { align-self: start; color: var(--text-light); font-size: .7rem; }

.home-value { padding: 6.5rem 0 7rem; }
.home-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
.home-bento > article { position: relative; overflow: hidden; border: 1px solid var(--border);
  border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-sm); }
.home-bento h3 { font-size: 1.28rem; letter-spacing: -.025em; }
.home-bento p { font-size: .87rem; line-height: 1.7; }
.home-card-icon { display: grid; place-items: center; width: 43px; height: 43px; margin-bottom: 1.2rem;
  border-radius: 12px; background: var(--hot-light); color: var(--hot); }
.home-bento-links { grid-column: span 8; grid-row: span 2; display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(320px, 1.14fr); gap: 2rem; min-height: 594px;
  padding: 2.4rem; align-items: center; background: linear-gradient(145deg, #fff 0%, #fff8f6 100%) !important; }
.home-bento-copy h3 { max-width: 390px; margin: 0 0 .9rem; font-size: clamp(1.7rem, 3vw, 2.45rem); }
.home-bento-copy p { max-width: 380px; }
.home-link-demo { padding: .9rem; border: 1px solid var(--border); border-radius: 17px;
  background: #fff; box-shadow: 0 24px 55px rgba(80,30,20,.13); transform: rotate(1.5deg); }
.home-demo-file { display: flex; align-items: center; gap: .75rem; padding: .75rem .7rem 1rem;
  border-bottom: 1px solid var(--border); }
.home-demo-file > span { display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 10px; background: var(--accent-light); color: var(--accent); }
.home-demo-file > div { min-width: 0; flex: 1; }
.home-demo-file b, .home-demo-file small { display: block; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.home-demo-file b { font-size: .78rem; }
.home-demo-file small { color: var(--text-light); font-size: .65rem; }
.home-demo-file > i { color: var(--green); }
.home-link-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) 28px; gap: .55rem;
  align-items: center; padding: .72rem .55rem; border-bottom: 1px solid var(--surface-3); }
.home-link-row:last-child { border-bottom: 0; }
.home-link-row > span { color: var(--text-light); font-size: .62rem; font-weight: 700;
  text-transform: uppercase; }
.home-link-row code { min-width: 0; overflow: hidden; color: var(--text-muted); font-size: .67rem;
  text-overflow: ellipsis; white-space: nowrap; }
.home-link-row > i { display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: 8px; background: var(--hot-light); color: var(--hot); }
.home-bento-storage, .home-bento-community { grid-column: span 4; min-height: 289px; padding: 1.7rem; }
.home-storage-number { margin: -.15rem 0 .5rem; color: var(--hot); font-size: 3.6rem; font-weight: 800;
  letter-spacing: -.08em; line-height: 1; }
.home-storage-number small { font-size: 1rem; letter-spacing: 0; }
.home-bento-storage h3, .home-bento-community h3 { margin-bottom: .55rem; }
.home-bento-storage a, .home-bento-community a, .home-bento-api a { font-size: .78rem;
  font-weight: 700; }
.home-bento-community { background: linear-gradient(145deg, #fff0f1, #fff7ed) !important; }
.home-community-orbit { position: absolute; top: 1.25rem; right: 1.25rem; width: 90px; height: 54px; }
.home-community-orbit i { position: absolute; display: grid; place-items: center; width: 34px; height: 34px;
  border: 3px solid #fff; border-radius: 50%; background: var(--surface); color: var(--hot);
  box-shadow: var(--shadow-sm); }
.home-community-orbit i:nth-child(1) { left: 0; top: 12px; }
.home-community-orbit i:nth-child(2) { left: 27px; top: 0; color: var(--accent); }
.home-community-orbit i:nth-child(3) { left: 54px; top: 14px; color: #7c3aed; }
.home-bento-api { grid-column: 1 / -1; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 1.2rem; align-items: center; min-height: 124px; padding: 1.4rem 1.7rem; }
.home-bento-api .home-card-icon { margin: 0; }
.home-bento-api h3 { margin: 0 0 .25rem; }
.home-bento-api p { margin: 0; }

.home-statement { padding: 6rem 0; background: #241a17; color: #fff; }
.home-statement-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6rem; align-items: end; }
.home-statement h2 { margin: 0; color: #fff; font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.03; letter-spacing: -.055em; }
.home-statement p { margin: 0; color: #d6c9c2; font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.3rem; line-height: 1.65; }
.home-statement-points { display: flex; gap: 1rem 1.5rem; flex-wrap: wrap; margin-top: 1.6rem;
  color: #b9aaa2; font-size: .7rem; font-weight: 600; }
.home-statement-points span { display: inline-flex; align-items: center; gap: .35rem; }
.home-statement-points svg { color: #ff8a76; }

.home-tools-showcase { padding: 7rem 0; background: var(--surface); }
.home-tool-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
.home-tool-card { grid-column: span 5; display: grid; grid-template-columns: 170px minmax(0, 1fr);
  min-height: 188px; overflow: hidden; border: 1px solid var(--border); border-radius: 18px;
  background: var(--surface-2); color: var(--text); transition: transform .2s, border-color .2s; }
.home-tool-card:hover { border-color: var(--hot); color: var(--text); transform: translateY(-3px); }
.home-tool-card img { width: 100%; height: 100%; object-fit: cover; }
.home-tool-copy { display: flex; min-width: 0; flex-direction: column; padding: 1.35rem; }
.home-tool-copy small { color: var(--hot); font-size: .62rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; }
.home-tool-copy strong { margin-top: .55rem; font-size: 1.05rem; }
.home-tool-copy p { margin: .4rem 0 .8rem; font-size: .75rem; line-height: 1.55; }
.home-tool-copy i { margin-top: auto; color: var(--hot); font-size: .7rem; font-style: normal; font-weight: 700; }
.home-tool-featured { grid-column: span 7; grid-row: span 3; display: flex; min-height: 596px;
  flex-direction: column; background: var(--hot-light); }
.home-tool-featured img { height: 370px; }
.home-tool-featured .home-tool-copy { flex: 1; padding: 1.75rem 2rem; }
.home-tool-featured .home-tool-copy strong { font-size: 1.55rem; }
.home-tool-featured .home-tool-copy p { max-width: 470px; font-size: .85rem; }

.home-gallery-preview { padding-top: 6rem; padding-bottom: 6rem; }
.home-gallery-preview .section-head { align-items: end; }
.home-gallery-preview .section-head h2 { margin-top: .6rem; font-size: 2rem; }

.home-workflow { padding: 7rem 0; background: var(--surface-3); }
.home-workflow-head { max-width: 700px; margin-bottom: 3.5rem; }
.home-workflow-head h2 { margin: 0 0 1rem; font-size: clamp(2rem, 4vw, 3.3rem);
  line-height: 1.03; letter-spacing: -.05em; }
.home-workflow-head p { max-width: 620px; }
.home-step-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0;
  list-style: none; counter-reset: none; }
.home-step-grid li { position: relative; min-height: 280px; padding: 1.5rem 1.5rem 1rem;
  border-top: 2px solid var(--text); border-right: 1px solid rgba(39,32,29,.15); }
.home-step-grid li:first-child { padding-left: 0; }
.home-step-grid li:last-child { padding-right: 0; border-right: 0; }
.home-step-grid li > span { color: var(--hot); font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.4rem; }
.home-step-icon { display: grid; place-items: center; width: 46px; height: 46px; margin: 2.5rem 0 1.2rem;
  border-radius: 13px; background: var(--surface); color: var(--hot); box-shadow: var(--shadow-sm); }
.home-step-grid h3 { margin-bottom: .55rem; font-size: 1.02rem; }
.home-step-grid p { font-size: .78rem; line-height: 1.65; }

.home-guides { padding: 7rem 0; }
.home-guide-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
.home-guide-card { grid-column: span 5; display: grid; grid-template-columns: 190px minmax(0, 1fr);
  min-height: 210px; overflow: hidden; border-top: 1px solid var(--text); color: var(--text); }
.home-guide-card:hover { color: var(--hot); }
.home-guide-card img { width: 100%; height: 100%; object-fit: cover; }
.home-guide-card > span { display: flex; min-width: 0; flex-direction: column; padding: 1.25rem; }
.home-guide-card small { color: var(--hot); font-size: .62rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; }
.home-guide-card strong { margin-top: .8rem; font-size: 1rem; line-height: 1.35; }
.home-guide-card i { margin-top: auto; color: var(--text-muted); font-size: .68rem;
  font-style: normal; font-weight: 700; }
.home-guide-featured { grid-column: span 7; grid-row: span 2; display: block; min-height: 436px; }
.home-guide-featured img { height: 310px; }
.home-guide-featured > span { display: grid; grid-template-columns: 100px minmax(0, 1fr) auto;
  gap: 1rem; align-items: center; padding: 1.3rem 0; }
.home-guide-featured strong { margin: 0; font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.45rem; font-weight: 700; }

.home-faq { padding: 7rem 0; border-top: 1px solid var(--border); background: var(--surface); }
.home-faq-grid { display: grid; grid-template-columns: minmax(250px, .65fr) minmax(0, 1.35fr);
  gap: 6rem; align-items: start; }
.home-faq-intro { position: sticky; top: calc(var(--nav-height) + 2rem); }
.home-faq-intro h2 { margin: 0 0 1rem; font-size: clamp(2rem, 4vw, 3.25rem); letter-spacing: -.05em; }
.home-faq-intro p { max-width: 320px; }
.home-faq-intro a { font-size: .8rem; font-weight: 700; }
.home-faq .faq-list { gap: 0; border-top: 1px solid var(--border); }
.home-faq details.faq-item { border: 0; border-bottom: 1px solid var(--border); border-radius: 0;
  box-shadow: none; }
.home-faq details.faq-item summary { padding: 1.4rem 0; }
.home-faq details.faq-item .faq-body { padding: 0 2rem 1.4rem 0; }

.home-final-cta { padding: 6rem 0; overflow: hidden; background: var(--grad-hot); color: #fff; }
.home-cta-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
  gap: 4rem; align-items: center; }
.home-cta-grid::after { content: ""; position: absolute; right: -170px; width: 380px; height: 380px;
  border: 1px solid rgba(255,255,255,.2); border-radius: 50%; box-shadow: 0 0 0 75px rgba(255,255,255,.04); }
.home-final-cta h2 { margin: 0 0 1rem; color: #fff; font-size: clamp(2.4rem, 5vw, 4.2rem);
  line-height: 1; letter-spacing: -.055em; }
.home-final-cta p { max-width: 620px; color: rgba(255,255,255,.82); font-size: 1rem; }
.home-cta-actions { position: relative; z-index: 1; display: flex; align-items: center; flex-direction: column;
  gap: .8rem; }
.home-cta-primary { width: 100%; max-width: 340px; border-color: #fff; background: #fff; color: var(--hot); }
.home-cta-primary:hover { border-color: #fff; background: #fff7f5; color: var(--hot-dark); }
.home-cta-actions > span { color: rgba(255,255,255,.7); font-size: .68rem; }

/* ---------- Interior public pages ---------- */
.interior-hero { position: relative; overflow: hidden; padding: 1.5rem 0 4.5rem;
  background:
  radial-gradient(circle at 82% 20%, rgba(244,58,82,.12), transparent 30%),
  linear-gradient(180deg, #fff 0%, var(--surface-2) 100%); }
.interior-hero::before { content: ""; position: absolute; top: -170px; right: -120px;
  width: 430px; height: 430px; border: 1px solid var(--hot-border); border-radius: 50%;
  box-shadow: 0 0 0 70px rgba(244,58,82,.025); pointer-events: none; }
.interior-hero .hero-crumbs { position: relative; z-index: 1; margin-bottom: .9rem; }
.interior-hero-grid { position: relative; z-index: 1; display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(330px, .95fr); gap: 5rem; align-items: center; }
.interior-hero-copy { max-width: 670px; }
.interior-hero h1 { margin: 0; font-size: clamp(2.8rem, 6vw, 5.25rem); line-height: .98;
  letter-spacing: -.065em; }
.interior-hero h1 em { color: var(--hot); font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400; }
.interior-deck { max-width: 630px; margin: 1.35rem 0 0; color: var(--text-muted);
  font-size: 1.06rem; line-height: 1.75; }
.interior-hero-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.7rem; }
.interior-proof { display: flex; gap: .8rem 1.3rem; flex-wrap: wrap; margin-top: 1.5rem;
  color: var(--text-light); font-size: .7rem; font-weight: 600; }
.interior-proof span { display: inline-flex; align-items: center; gap: .35rem; }
.interior-proof svg { color: var(--hot); }
.interior-visual { position: relative; }
.interior-visual img { width: 100%; max-height: 430px; object-fit: cover; border: 9px solid #fff;
  border-radius: 30px; box-shadow: 0 28px 65px rgba(80,30,20,.17); transform: rotate(1.5deg); }
.interior-visual-badge { position: absolute; right: -12px; bottom: 24px; display: flex; align-items: center;
  gap: .7rem; padding: .75rem 1rem; border: 1px solid var(--border); border-radius: 12px;
  background: rgba(255,255,255,.94); box-shadow: var(--shadow); color: var(--text); font-size: .75rem;
  font-weight: 700; backdrop-filter: blur(8px); }
.interior-visual-badge svg { color: var(--hot); }
.interior-body { padding: 6rem 0; }
.interior-body-tight { padding: 4.5rem 0 6rem; }
.reading-shell { width: min(780px, calc(100% - 3rem)); margin: 0 auto; }
.interior-section { padding: 5.5rem 0; }
.interior-section-head { display: grid; grid-template-columns: minmax(0, .8fr) minmax(300px, 1.2fr);
  gap: 4rem; align-items: end; margin-bottom: 2.5rem; }
.interior-section-head h2 { margin: 0; font-size: clamp(2rem, 4vw, 3.15rem); line-height: 1.04;
  letter-spacing: -.05em; }
.interior-section-head p { max-width: 600px; margin: 0; line-height: 1.75; }
.surface-band { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: var(--surface); }

.editorial-lead { display: grid; grid-template-columns: minmax(240px, .65fr) minmax(0, 1.35fr);
  gap: 5rem; align-items: start; }
.editorial-lead-aside { position: sticky; top: calc(var(--nav-height) + 2rem); }
.editorial-lead-aside h2 { margin-bottom: 1rem; font-size: 1.45rem; letter-spacing: -.03em; }
.editorial-lead-aside p { font-size: .83rem; line-height: 1.7; }
.editorial-lead-aside a { font-size: .78rem; font-weight: 700; }
/* Supporting reference content under the contact form: same prose measure as the
   legal pages so the two read as one system. */
.contact-guide { max-width: 760px; margin: 3.5rem auto 0; padding-top: 2.5rem;
  border-top: 1px solid var(--border); }
.contact-guide .table-wrap { margin: 1.25rem 0 .5rem; }
.contact-guide ul { padding-left: 1.15rem; display: flex; flex-direction: column; gap: .55rem; }

.editorial-prose h2 { margin-top: 2.8rem; font-size: 1.55rem; letter-spacing: -.025em; }
.editorial-prose h2:first-child { margin-top: 0; }
.editorial-prose p, .editorial-prose li { color: var(--text-muted); font-size: .96rem; line-height: 1.85; }
.editorial-prose ul, .editorial-prose ol { padding-left: 1.35rem; }
.editorial-prose li { margin-bottom: .55rem; }
.editorial-prose strong { color: var(--text); }

.page-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 2.5rem;
  border-top: 1px solid var(--text); border-bottom: 1px solid var(--border); }
.page-stat-grid > div { padding: 1.6rem; border-right: 1px solid var(--border); }
.page-stat-grid > div:first-child { padding-left: 0; }
.page-stat-grid > div:last-child { border-right: 0; }
.page-stat-grid strong, .page-stat-grid span { display: block; }
.page-stat-grid strong { color: var(--hot); font-size: 2rem; letter-spacing: -.05em; }
.page-stat-grid span { color: var(--text-light); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .08em; }

.form-feature-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 2rem;
  align-items: start; }
.form-feature-card { overflow: hidden; border: 1px solid var(--border); border-radius: 20px;
  background: var(--surface); box-shadow: var(--shadow-sm); }
.form-feature-card > header { padding: 1.5rem 1.75rem; border-bottom: 1px solid var(--border);
  background: var(--surface-2); }
.form-feature-card > header h2 { margin: 0; font-size: 1.15rem; }
.form-feature-card > header p { margin: .35rem 0 0; font-size: .75rem; }
.form-feature-card > form, .form-feature-card > .form-inner { padding: 1.75rem; }
.support-stack { display: flex; flex-direction: column; gap: 1rem; }
.support-note { padding: 1.35rem; border: 1px solid var(--border); border-radius: 16px;
  background: var(--surface); }
.support-note > span { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 1rem;
  border-radius: 11px; background: var(--hot-light); color: var(--hot); }
.support-note h3 { margin-bottom: .4rem; font-size: .95rem; }
.support-note p { font-size: .75rem; line-height: 1.6; }
.support-note a { font-size: .72rem; font-weight: 700; }

.directory-section { padding: 3.75rem 0; border-top: 1px solid var(--border); }
.directory-section:first-child { padding-top: 0; border-top: 0; }
.directory-title { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin-bottom: 1.5rem; }
.directory-title h2 { margin: 0; font-size: 1.65rem; letter-spacing: -.035em; }
.directory-title span { color: var(--text-light); font-size: .7rem; text-transform: uppercase;
  letter-spacing: .08em; }
.directory-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.directory-card { display: flex; min-height: 330px; overflow: hidden; flex-direction: column;
  border: 1px solid var(--border); border-radius: 18px; background: var(--surface); color: var(--text);
  transition: transform .2s, border-color .2s; }
.directory-card:hover { border-color: var(--hot); color: var(--text); transform: translateY(-4px); }
.directory-card img { width: 100%; height: 165px; object-fit: cover; }
.directory-card-copy { display: flex; flex: 1; flex-direction: column; padding: 1.25rem; }
.directory-card-copy > small { color: var(--hot); font-size: .62rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; }
.directory-card-copy > strong { margin: .65rem 0 .45rem; font-size: 1.05rem; line-height: 1.3; }
.directory-card-copy > p { font-size: .76rem; line-height: 1.6; }
.directory-card-copy > i { margin-top: auto; color: var(--hot); font-size: .7rem; font-style: normal;
  font-weight: 700; }

.page-cta { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3rem;
  align-items: center; margin-top: 5rem; padding: 2.5rem 3rem; overflow: hidden; border-radius: 22px;
  background: var(--grad-hot); color: #fff; }
.page-cta::after { content: ""; position: absolute; right: -110px; width: 260px; height: 260px;
  border: 1px solid rgba(255,255,255,.22); border-radius: 50%; }
.page-cta h2 { margin: 0 0 .45rem; color: #fff; font-size: 1.65rem; }
.page-cta p { max-width: 620px; margin: 0; color: rgba(255,255,255,.82); font-size: .85rem; }
.page-cta .btn { position: relative; z-index: 1; border-color: #fff; background: #fff; color: var(--hot); }

.collection-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem;
  align-items: end; margin-bottom: 2.5rem; padding-bottom: 2rem; border-bottom: 1px solid var(--border); }
.collection-head h1 { margin: 0 0 .6rem; font-size: clamp(2.2rem, 4vw, 3.65rem); letter-spacing: -.055em; }
.collection-head p { max-width: 680px; margin: 0; }
.collection-actions { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }

.state-page { min-height: 650px; padding: 5rem 0 7rem; text-align: center; }
.state-page-inner { width: min(620px, calc(100% - 2rem)); margin: 0 auto; padding: 2.5rem;
  border: 1px solid var(--border); border-radius: 24px; background: var(--surface); box-shadow: var(--shadow-sm); }
.state-page img { max-width: 330px; max-height: 270px; margin: 0 auto 1.5rem; border-radius: 18px; object-fit: cover; }
.state-icon { display: grid; place-items: center; width: 78px; height: 78px; margin: 0 auto 1.4rem;
  border-radius: 22px; background: var(--hot-light); color: var(--hot); transform: rotate(-3deg); }
.state-page h1 { font-size: 2rem; letter-spacing: -.04em; }

.tool-page.page-wrap { padding-top: 1rem; }
.tool-page-title { margin-bottom: 1.75rem; padding: 0 0 1.5rem; }
.tool-page-title h1 { margin: 0 0 .65rem; font-size: clamp(2.1rem, 4vw, 3.25rem); letter-spacing: -.05em; }
.tool-page-title > div { max-width: 760px; }
.tool-page .tool-panel { box-shadow: 0 22px 55px rgba(80,30,20,.1); }
.gate-modal { max-width: 420px; text-align: center; }
.gate-modal h3 { margin-bottom: .5rem; }
.gate-modal-icon { width: 56px; height: 56px; border-radius: 14px; background: var(--hot);
  color: #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; }
.gate-perks { display: flex; flex-direction: column; gap: .55rem; margin: 1.2rem 0 1.4rem; text-align: left; }
.gate-perk { display: flex; align-items: center; gap: .6rem; font-size: .85rem; color: var(--text); }
.gate-perk svg { color: var(--hot); flex-shrink: 0; }
.tool-page .spec-table { box-shadow: none; }
.tool-content-section { margin-top: 3rem; }

.article-page-head { margin-bottom: 2rem; padding: 2.5rem 0 2rem; border-bottom: 1px solid var(--border); }
.article-page-head h1 { max-width: 850px; margin: .75rem 0 1rem; font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2.3rem, 5vw, 4.4rem); font-weight: 700; line-height: 1.03; letter-spacing: -.045em; }
.article-page .article-hero-img { border-radius: 22px; box-shadow: var(--shadow-sm); }
.article-page .key-points { margin-top: 2rem; border-radius: 16px; }

.auth-form-wrap { background: radial-gradient(circle at 20% 20%, var(--hot-light), transparent 35%); }
.auth-form { padding: 2rem; border: 1px solid var(--border); border-radius: 20px;
  background: rgba(255,255,255,.9); box-shadow: var(--shadow-sm); }
.auth-form h1 { font-size: 2rem !important; letter-spacing: -.04em; }
.auth-side-inner h2 { font-size: 2.35rem; letter-spacing: -.04em; }
.auth-side-inner img { border: 8px solid rgba(255,255,255,.85); transform: rotate(1.5deg); }

.faq-hero-art { position: relative; min-height: 330px; }
.faq-hero-art::before, .faq-hero-art::after { content: ""; position: absolute; inset: 25px 55px;
  border: 1px solid var(--hot-border); border-radius: 50%; }
.faq-hero-art::after { inset: 70px 100px; }
.faq-hero-art > span { position: absolute; inset: 50% auto auto 50%; display: grid; place-items: center;
  width: 118px; height: 118px; border-radius: 30px; background: var(--grad-hot); color: #fff;
  font-family: Georgia, 'Times New Roman', serif; font-size: 5rem; box-shadow: var(--shadow-lg);
  transform: translate(-50%, -50%) rotate(-5deg); }
.faq-hero-art i { position: absolute; display: grid; place-items: center; width: 52px; height: 52px;
  border: 1px solid var(--border); border-radius: 15px; background: #fff; color: var(--hot);
  box-shadow: var(--shadow); }
.faq-hero-art i:nth-of-type(1) { top: 18px; left: 25%; }
.faq-hero-art i:nth-of-type(2) { top: 36%; right: 8%; color: var(--accent); }
.faq-hero-art i:nth-of-type(3) { bottom: 16px; left: 24%; color: var(--green); }
.faq-hero-art i:nth-of-type(4) { top: 40%; left: 4%; color: #7c3aed; }
.faq-group-block { padding: 0 0 3rem; }
.faq-group-block + .faq-group-block { padding-top: 2.5rem; border-top: 1px solid var(--border); }
.faq-group-block > h2 { margin-bottom: 1.25rem; font-size: 1.35rem; letter-spacing: -.02em; }
.faq-group-block .faq-list { gap: .7rem; }

.legal-hero { padding: 4.75rem 0 4rem; border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, #241a17 0%, #3a211b 65%, #5e2928 100%); color: #fff; }
.legal-hero h1 { max-width: 850px; margin: 0 0 1rem; color: #fff;
  font-family: Georgia, 'Times New Roman', serif; font-size: clamp(2.75rem, 6vw, 5rem);
  line-height: 1; letter-spacing: -.05em; }
.legal-hero p { max-width: 650px; margin: 0 0 1.5rem; color: #d7c8c1; font-size: 1.05rem; }
.legal-hero small { color: #a9958b; font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; }
.legal-layout { display: grid; grid-template-columns: 210px minmax(0, 760px); gap: 5rem; align-items: start;
  justify-content: center; }
.legal-nav { position: sticky; top: calc(var(--nav-height) + 2rem); border-top: 2px solid var(--text); }
.legal-nav > span { display: block; padding: 1rem 0; color: var(--text-light); font-size: .65rem;
  font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.legal-nav a { display: block; padding: .65rem 0; border-top: 1px solid var(--border); color: var(--text-muted);
  font-size: .78rem; }
.legal-nav a:hover, .legal-nav a.active { color: var(--hot); font-weight: 700; }
.legal-prose { min-width: 0; }
.legal-prose > p:first-child { color: var(--text); font-size: 1.08rem; }
.legal-form-card { margin-top: 2rem !important; border-radius: 18px; box-shadow: var(--shadow-sm); }
.api-docs .card { border-radius: 16px; box-shadow: none; }
.api-docs .card-header { padding: 1.1rem 1.35rem; background: var(--surface-2); }
.api-docs pre { border-radius: 12px; }
.guide-hero-feature { display: block; overflow: hidden; border: 8px solid #fff; border-radius: 26px;
  background: #fff; box-shadow: 0 28px 65px rgba(80,30,20,.17); color: var(--text); transform: rotate(1deg); }
.guide-hero-feature:hover { color: var(--hot); }
.guide-hero-feature img { width: 100%; height: 255px; object-fit: cover; border-radius: 17px; }
.guide-hero-feature > span { display: flex; flex-direction: column; padding: 1.15rem 1.25rem; }
.guide-hero-feature small { color: var(--hot); font-size: .62rem; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; }
.guide-hero-feature strong { margin: .55rem 0 .7rem; font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.25rem; line-height: 1.25; }
.guide-hero-feature i { color: var(--text-muted); font-size: .68rem; font-style: normal; font-weight: 700; }
.guide-directory-grid .directory-card { min-height: 380px; }
.guide-directory-grid .directory-card img { height: 190px; }
.gallery-info-section { padding: 3rem 0; }
.gallery-info-section:first-child { padding-top: 0; }
.gallery-info-section > h2 { margin-bottom: .75rem; font-size: 2rem !important; letter-spacing: -.04em; }
.gallery-narrow { max-width: 760px; margin-right: auto; margin-left: auto; }
.gallery-teaser-page .feature-card { min-height: 180px; border-radius: 16px; box-shadow: none; }
.gallery-teaser-page .table-wrap { border-radius: 16px; box-shadow: var(--shadow-sm); }
.collection-page { padding-top: 4rem; padding-bottom: 6rem; }
.empty-collection { padding: 4rem 2rem !important; border-style: dashed; border-radius: 18px; }
.confirm-preview { padding: 1.5rem; border: 1px solid var(--border); border-radius: 16px;
  background: var(--surface-2); }
/* The profile page also carries .collection-page, which adds 4rem of top
   padding for grid pages. Here that stacked on top of the breadcrumb's own
   margin and left a large empty band above the cover. */
.profile-page { padding-top: .35rem; }
.profile-page .profile-cover { height: 230px; border-radius: 24px; background:
  radial-gradient(circle at 75% 20%, rgba(255,255,255,.3), transparent 25%), var(--grad-hot); }
.profile-page .profile-head { margin: -52px 1.5rem 0; padding: 0 1.5rem 1.5rem; border: 1px solid var(--border);
  border-radius: 20px; background: rgba(255,255,255,.96); box-shadow: var(--shadow-sm); }
.profile-page .profile-tabs { margin-top: 2rem; }
.profile-page .grid-3 > .card { overflow: hidden; border-radius: 18px; }
.profile-page .img-grid { margin-top: 1.5rem; }
.follow-page { padding-top: 4rem; padding-bottom: 6rem; }
.viewer-stage { border-radius: 18px; box-shadow: var(--shadow-sm); }
.viewer-layout > div > .card, .viewer-layout > aside > .card { border-radius: 16px; box-shadow: none; }
.viewer-page { padding-top: 2rem; padding-bottom: 5rem; }
.dash-layout { padding-top: 3rem; padding-bottom: 5rem; }
.dash-layout .card { border-radius: 14px; box-shadow: none; }
.dash-sidebar > .card { overflow: hidden; }

/* ---------- Notifications ---------- */
.note-row { display: flex; gap: .9rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--surface-3);
  align-items: flex-start; font-size: .9rem; }
.note-row:last-child { border-bottom: none; }
.note-row.unread { background: var(--hot-light); }
.note-row .note-icon { width: 34px; height: 34px; border-radius: 50%; background: var(--surface-3);
  color: var(--text-muted); display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; }
.note-row .note-time { font-size: .75rem; color: var(--text-light); }

/* ---------- Toast ---------- */
.toast-wrap { position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 1200; display: flex;
  flex-direction: column; gap: .5rem; }
.toast { background: #27201d; color: #fff; border-radius: var(--radius-sm);
  padding: .7rem 1.1rem; font-size: .85rem; box-shadow: var(--shadow-lg);
  animation: toast-in .25s ease; max-width: 320px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; } }

/* ---------- Footer ---------- */
/* Page content must never butt straight into the dark footer. There was no
   rule for <main> at all, so on any page whose last element had no bottom
   margin - a profile CTA card, an image grid - the footer started on the very
   next pixel. */
main { padding-bottom: clamp(2.5rem, 6vw, 4rem); }

.site-footer { background: #221510; color: #c9b8ae;
  padding: 3rem 0 1.5rem; font-size: .875rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 2rem;
  margin-bottom: 2.5rem; }
.footer-brand { font-size: 1.3rem; font-weight: 800; color: #fff; margin-bottom: .6rem;
  display: flex; align-items: center; gap: .45rem; }
.footer-brand .logo-mark { width: 26px; height: 26px; border-radius: 7px; background: var(--grad-hot);
  display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.footer-desc { color: #a08d82; line-height: 1.7; max-width: 280px; }
.footer-heading { font-weight: 700; color: #fff; margin-bottom: .9rem; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .07em; }
.footer-links { list-style: none; }
.footer-links li { margin-bottom: .5rem; }
.footer-links a { color: #c9b8ae; font-size: .85rem; }
.footer-links a:hover { color: #ff8a76; }
.footer-bottom { border-top: 1px solid #3a2a22; padding-top: 1.5rem; display: flex;
  justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .75rem;
  color: #a08d82; font-size: .8rem; }

/* ---------- Auth pages ---------- */
.auth-layout { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - var(--nav-height));
  align-items: stretch; }
.auth-side { background: var(--grad-hot); display: flex; align-items: center;
  justify-content: center; padding: 3rem; }
.auth-side-inner { max-width: 400px; color: #fff; }
.auth-side-inner h2 { color: #fff; font-size: 1.8rem; margin-bottom: .75rem; }
.auth-side-inner p { color: rgba(255,255,255,.85); }
.auth-side-inner img { border-radius: var(--radius-lg); margin-top: 1.5rem;
  box-shadow: 0 16px 40px rgba(0,0,0,.25); }
.auth-form-wrap { display: flex; align-items: center; justify-content: center; padding: 3rem 1.5rem; }
.auth-form { width: 100%; max-width: 400px; }
.btn-google { display: flex; align-items: center; justify-content: center; gap: .6rem;
  width: 100%; min-height: 42px; padding: 0 1rem; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); font-size: .9rem; font-weight: 600; color: var(--text);
  cursor: pointer; font-family: var(--font); }
.btn-google:active { transform: scale(.97); }
.btn-google:hover { background: var(--surface-2); border-color: var(--text-light); }
.auth-divider { display: flex; align-items: center; gap: 1rem; margin: 1.25rem 0;
  color: var(--text-light); font-size: .78rem; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px;
  background: var(--border); }

/* ---------- Utilities ---------- */
.text-center { text-align: center; } .text-right { text-align: right; }
.text-muted { color: var(--text-muted); } .text-light { color: var(--text-light); }
.text-hot { color: var(--hot); } .text-green { color: var(--green); }
.text-sm { font-size: .875rem; } .text-xs { font-size: .78rem; } .text-lg { font-size: 1.1rem; }
.font-bold { font-weight: 700; } .font-medium { font-weight: 500; }
.mt-1 { margin-top: .25rem; } .mt-2 { margin-top: .5rem; } .mt-3 { margin-top: .75rem; }
.mt-4 { margin-top: 1rem; } .mt-6 { margin-top: 1.5rem; } .mt-8 { margin-top: 2rem; }
.mb-1 { margin-bottom: .25rem; } .mb-2 { margin-bottom: .5rem; } .mb-3 { margin-bottom: .75rem; }
.mb-4 { margin-bottom: 1rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-8 { margin-bottom: 2rem; }
.flex { display: flex; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; } .justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-2 { gap: .5rem; } .gap-3 { gap: .75rem; } .gap-4 { gap: 1rem; } .gap-6 { gap: 1.5rem; }
.w-full { width: 100%; } .hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.avatar-sm { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.avatar-sm-fallback { width: 34px; height: 34px; border-radius: 50%; background: var(--grad-hot);
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .85rem; flex-shrink: 0; }

.hub-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 2.5rem;
  align-items: start; }
.hub-sidebar { position: sticky; top: calc(var(--nav-height) + 1.5rem); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .home-section-heading { gap: 2.5rem; }
  .home-bento-links { grid-column: 1 / -1; grid-row: auto; }
  .home-bento-storage, .home-bento-community { grid-column: span 6; }
  .home-statement-grid { gap: 3rem; }
  .home-tool-featured { grid-column: 1 / -1; grid-row: auto; min-height: 540px; }
  .home-tool-card:not(.home-tool-featured) { grid-column: span 6; grid-template-columns: 145px minmax(0, 1fr); }
  .home-step-grid { grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
  .home-step-grid li:nth-child(2) { border-right: 0; }
  .home-step-grid li:nth-child(3) { padding-left: 0; }
  .home-guide-featured { grid-column: 1 / -1; grid-row: auto; }
  .home-guide-card:not(.home-guide-featured) { grid-column: span 6; }
  .home-faq-grid { gap: 3rem; }
  .home-cta-grid { gap: 2rem; }
  .interior-hero-grid { gap: 2.5rem; }
  .editorial-lead { gap: 3rem; }
  .directory-card-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1100px) {
  .article-layout { grid-template-columns: minmax(0, 1fr) 260px; }
  .article-toc-sidebar { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .viewer-layout { grid-template-columns: minmax(0, 1fr) 300px; }
}
@media (max-width: 900px) {
  .auth-layout { grid-template-columns: 1fr; }
  .auth-side { display: none; }
  .viewer-layout { grid-template-columns: 1fr; }
  .dash-layout { grid-template-columns: 1fr; }
  .dash-sidebar { position: static; }
  .dash-sidebar .card { display: flex; overflow-x: auto; }
  .dash-nav-link { border-bottom: none; white-space: nowrap; }
}
@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-actions .btn { display: none; }
  .nav-hamburger { display: flex; }
  .nav-mobile-panel { display: block; pointer-events: none; }
  .nav-mobile-panel.open { pointer-events: auto; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }
  .article-layout { grid-template-columns: 1fr; }
  .article-related-sidebar { position: static; }
  .hub-layout { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
  .hub-layout > * { min-width: 0; max-width: 100%; }
  .hub-sidebar { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero-band h1 { font-size: 1.9rem; }
  .mod-card { grid-template-columns: 100px 1fr; }
  .mod-card img { width: 100px; height: 100px; }
  .profile-head { padding: 0 .75rem; }
  .home-proof-grid { grid-template-columns: 1fr 1fr; }
  .home-proof-grid > div:nth-child(2) { border-right: 1px solid var(--border); }
  .home-proof-grid > div:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .home-section-heading, .home-statement-grid, .home-faq-grid, .home-cta-grid {
    grid-template-columns: 1fr; }
  .home-section-heading { gap: 1.25rem; }
  .home-value, .home-tools-showcase, .home-workflow, .home-guides, .home-faq {
    padding-top: 5rem; padding-bottom: 5rem; }
  .home-statement { padding: 5rem 0; }
  .home-bento-links { grid-template-columns: 1fr; min-height: auto; }
  .home-link-demo { transform: none; }
  .home-tool-card:not(.home-tool-featured) { grid-column: 1 / -1; }
  .home-guide-card:not(.home-guide-featured) { grid-column: 1 / -1; }
  .home-faq-intro { position: static; }
  .home-cta-actions { align-items: flex-start; }
  .interior-hero { padding: 1.25rem 0 3.5rem; }
  .interior-hero-grid, .interior-section-head, .editorial-lead, .form-feature-layout,
  .collection-head, .page-cta { grid-template-columns: 1fr; }
  .interior-hero-grid { gap: 2.5rem; }
  .interior-visual { max-width: 520px; }
  .interior-body, .interior-section { padding-top: 4.5rem; padding-bottom: 4.5rem; }
  .editorial-lead-aside { position: static; }
  .page-cta { gap: 1.5rem; padding: 2.25rem; }
  .page-cta .btn { justify-self: start; }
  .collection-actions { justify-content: flex-start; }
}
@media (max-width: 520px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .img-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .container, .container-sm, .container-lg { padding: 0 1rem; }
  .dropzone { padding: 2rem 1rem; }
  .upload-options { flex-direction: column; align-items: stretch; }
  .stat-tiles { grid-template-columns: 1fr 1fr; }
  .home-proof-grid > div { grid-template-columns: 30px auto; column-gap: .55rem; min-height: 82px;
    padding: .85rem .55rem; }
  .home-proof-grid > div:first-child { border-left: 0; }
  .home-proof-icon { width: 30px; height: 30px; }
  .home-proof-grid strong { font-size: .8rem; }
  .home-proof-grid small { font-size: .62rem; }
  .home-value, .home-tools-showcase, .home-workflow, .home-guides, .home-faq {
    padding-top: 4rem; padding-bottom: 4rem; }
  .home-section-heading { margin-bottom: 2rem; }
  .home-section-heading h2 { font-size: 2.15rem; }
  .home-bento { grid-template-columns: 1fr; }
  .home-bento-links, .home-bento-storage, .home-bento-community, .home-bento-api {
    grid-column: 1; }
  .home-bento-links { gap: 1.5rem; padding: 1.35rem; }
  .home-bento-storage, .home-bento-community { min-height: 0; padding: 1.35rem; }
  .home-bento-api { grid-template-columns: 42px minmax(0, 1fr); padding: 1.25rem; }
  .home-bento-api > a { grid-column: 2; }
  .home-link-row { grid-template-columns: 62px minmax(0, 1fr) 28px; }
  .home-link-row > span { font-size: .55rem; }
  .home-statement { padding: 4rem 0; }
  .home-statement p { font-size: 1.1rem; }
  .home-tool-featured { min-height: 0; }
  .home-tool-featured img { height: 250px; }
  .home-tool-featured .home-tool-copy { padding: 1.4rem; }
  .home-tool-card:not(.home-tool-featured) { grid-template-columns: 120px minmax(0, 1fr); min-height: 175px; }
  .home-tool-copy { padding: 1rem; }
  .home-tool-copy p { display: none; }
  .home-step-grid { grid-template-columns: 1fr; }
  .home-step-grid li, .home-step-grid li:first-child, .home-step-grid li:nth-child(3),
  .home-step-grid li:last-child { min-height: 0; padding: 1.25rem 0 1.75rem; border-right: 0; }
  .home-step-icon { margin: 1.4rem 0 1rem; }
  .home-guide-featured, .home-guide-card:not(.home-guide-featured) { display: grid;
    grid-template-columns: 120px minmax(0, 1fr); min-height: 180px; }
  .home-guide-featured img, .home-guide-card img { height: 100%; }
  .home-guide-featured > span, .home-guide-card > span { display: flex; padding: 1rem; }
  .home-guide-featured strong { margin-top: .75rem; font-family: var(--font); font-size: .95rem; }
  .home-guide-featured i { margin-top: auto; }
  .home-final-cta { padding: 4.5rem 0; }
  .home-cta-primary { font-size: .92rem; }
  .interior-hero { padding: 1rem 0 3rem; }
  .interior-hero h1 { font-size: 2.75rem; }
  .interior-deck { font-size: .94rem; }
  .interior-visual img { max-height: 300px; border-width: 6px; border-radius: 22px; transform: none; }
  .interior-visual-badge { right: 8px; bottom: 14px; }
  .interior-body, .interior-body-tight, .interior-section { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .reading-shell { width: min(100% - 2rem, 780px); }
  .page-stat-grid { grid-template-columns: 1fr; }
  .page-stat-grid > div, .page-stat-grid > div:first-child { padding: 1rem 0; border-right: 0;
    border-bottom: 1px solid var(--border); }
  .page-stat-grid > div:last-child { border-bottom: 0; }
  .form-feature-card > form, .form-feature-card > .form-inner { padding: 1.25rem; }
  .directory-card-grid { grid-template-columns: 1fr; }
  .directory-card { min-height: 0; }
  .page-cta { margin-top: 3.5rem; padding: 1.75rem; }
  .page-cta h2 { font-size: 1.4rem; }
  .state-page { min-height: 0; padding: 3rem 0 4rem; }
  .state-page-inner { padding: 1.5rem; }
  .article-page-head h1 { font-size: 2.4rem; }
  .auth-form { padding: 1.35rem; }
  .faq-hero-art { min-height: 280px; }
  .legal-layout { grid-template-columns: 1fr; gap: 2.5rem; }
  .legal-nav { position: static; display: flex; gap: .5rem; overflow-x: auto; padding-top: 1rem; }
  .legal-nav > span { display: none; }
  .legal-nav a { flex: 0 0 auto; padding: .55rem .8rem; border: 1px solid var(--border);
    border-radius: 8px; background: var(--surface); }
}

/* Labels that were headings for styling reasons only */
.dropzone-title { font-size: 1.15rem; font-weight: 700; color: var(--text); margin: 0 0 .3rem; }
.modal-title { font-size: 1.15rem; font-weight: 700; color: var(--text); margin: 0 0 1rem;
  display: inline-flex; align-items: center; gap: .45rem; }

/* Admin bulk-selection toolbar */
.bulk-bar { display: flex; align-items: center; gap: .85rem; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: .75rem 1rem; margin-bottom: 1rem; position: sticky; top: calc(var(--nav-height) + .5rem);
  z-index: 20; box-shadow: var(--shadow-sm); }
.mod-card-check { display: flex; align-items: flex-start; padding-top: .2rem; }
.mod-card-check input { width: 18px; height: 18px; cursor: pointer; }

/* Affiliate / earn page hero card */
.earn-hero-card { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.5rem 1.75rem; box-shadow: var(--shadow-lg); max-width: 380px; }
.earn-hero-row { display: flex; justify-content: space-between; align-items: center;
  padding: .8rem 0; border-bottom: 1px solid var(--surface-3); font-size: .92rem; }
.earn-hero-row span { color: var(--text-muted); }
.earn-hero-row b { font-size: 1.05rem; }
.earn-hero-total { border-bottom: none; }
.earn-hero-total b { color: var(--hot); font-size: 1.5rem; }
.earn-hero-note { display: flex; gap: .4rem; font-size: .74rem; color: var(--text-light);
  line-height: 1.5; margin-top: .5rem; }

/* FAQ: question headings inside the accordion + jump nav */
.faq-item summary h3 { display: inline; margin: 0; font-size: .98rem; font-weight: 600;
  color: var(--text); letter-spacing: 0; }
.faq-jump { display: flex; flex-direction: column; gap: .5rem; margin-top: 1rem; }
.faq-jump a { font-size: .85rem; font-weight: 600; color: var(--hot);
  padding: .3rem 0; border-bottom: 1px solid var(--border); }
.faq-jump a:hover { color: var(--hot-dark); }
.faq-body a { color: var(--hot); border-bottom: 1px solid var(--hot-border); }

/* Guide TL;DR / quick-answer callout for AI-search answer extraction.
   The accent (left) corners are square so the thick colored border meets a
   straight edge instead of a rounded one; the right side stays rounded. */
.article-body .key-callout { background: var(--hot-light); border: 1px solid var(--hot-border);
  border-left: 4px solid var(--hot); border-radius: 0 var(--radius) var(--radius) 0; padding: 1rem 1.25rem;
  margin: 0 0 1.75rem; font-size: .96rem; line-height: 1.7; color: var(--text); }

/* Guide TL;DR direct-answer block (AI-search answer extraction) */
.article-tldr { background: var(--surface); border: 1px solid var(--border);
  border-left: 4px solid var(--hot); border-radius: 0 var(--radius) var(--radius) 0; padding: 1rem 1.25rem;
  margin: 0 0 1.5rem; font-size: 1.02rem; line-height: 1.7; color: var(--text); }
.article-tldr .tldr-label { display: block; font-size: .68rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--hot-dark); margin-bottom: .35rem; }

/* 404 page: useful destinations */
.error-404 { position: relative; }
.error-404-art { max-width: 300px; }
.error-404-code { display: block; font-size: 1rem; font-weight: 800; letter-spacing: .3em;
  color: var(--hot); margin: .5rem 0 -.25rem; }
.error-404-links { display: grid; grid-template-columns: repeat(2, minmax(0, 220px));
  gap: 1.5rem 3rem; justify-content: center; margin-top: 2.5rem; text-align: left; }
.error-404-col { display: flex; flex-direction: column; gap: .5rem; }
.error-404-heading { font-size: .7rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-light); margin-bottom: .25rem; }
.error-404-col a { font-size: .9rem; font-weight: 600; color: var(--text); }
.error-404-col a:hover { color: var(--hot); }
@media (max-width: 520px) { .error-404-links { grid-template-columns: 1fr; } }

/* Converter chips on the /tools index */
.convert-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: .65rem; }
.convert-chip { display: flex; align-items: center; gap: .5rem; padding: .7rem .9rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  font-size: .9rem; font-weight: 600; color: var(--text); transition: border-color .15s, transform .15s; }
.convert-chip:hover { border-color: var(--hot); color: var(--hot); transform: translateY(-1px); }
.convert-chip i { font-style: normal; color: var(--text-light); font-weight: 500; }
.convert-chip:hover i { color: var(--hot); }

/* ===== /earn affiliate page ===== */
.earn-hero { background:
  radial-gradient(circle at 85% 15%, rgba(244,58,82,.14), transparent 34%),
  linear-gradient(180deg, #fff 0%, var(--surface-2) 100%); }

/* Hero earnings slide */
.earn-slide { position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.6rem 1.75rem; box-shadow: 0 22px 55px rgba(80,30,20,.14);
  max-width: 400px; overflow: hidden; }
.earn-slide-glow { position: absolute; top: -60px; right: -60px; width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(244,58,82,.18), transparent 70%); pointer-events: none; }
.earn-slide-head { display: inline-flex; align-items: center; gap: .45rem; font-size: .78rem;
  font-weight: 600; color: var(--text-muted); }
.earn-slide-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 3px rgba(22,163,74,.16); }
.earn-slide-amount { font-size: 2.8rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1;
  margin: .3rem 0 .9rem; color: var(--text); }
.earn-slide-amount span { color: var(--hot); font-size: 1.7rem; }
.earn-slide-bars { display: flex; align-items: flex-end; gap: .4rem; height: 76px; margin-bottom: 1rem; }
.earn-slide-bars span { flex: 1; background: linear-gradient(180deg, var(--hot), var(--accent));
  border-radius: 4px 4px 0 0; opacity: .85; animation: earnbar .9s ease both; }
.earn-slide-bars span:nth-child(odd) { animation-delay: .08s; }
@keyframes earnbar { from { transform: scaleY(.2); transform-origin: bottom; opacity: 0; } }
.earn-slide-rows { display: flex; gap: 1.5rem; border-top: 1px solid var(--surface-3); padding-top: .8rem; }
.earn-slide-rows div { display: flex; flex-direction: column; }
.earn-slide-rows span { font-size: .74rem; color: var(--text-light); }
.earn-slide-rows b { font-size: 1.1rem; }
.earn-slide-note { font-size: .7rem; color: var(--text-light); margin-top: .7rem; line-height: 1.5; }

.earn-section { padding: 3.5rem 0; }
.earn-h2 { text-align: center; font-size: clamp(1.6rem, 3.2vw, 2.3rem); letter-spacing: -.03em; margin-bottom: .5rem; }
.earn-sub { text-align: center; color: var(--text-muted); max-width: 560px; margin: 0 auto 2.25rem; line-height: 1.7; }
.earn-h3 { text-align: center; font-size: clamp(1.15rem, 2.2vw, 1.5rem); letter-spacing: -.02em;
  margin: 3rem 0 .5rem; }
.earn-h3 + .earn-sub { margin-bottom: 0; }

/* 3-step visual */
.earn-steps { display: flex; align-items: stretch; justify-content: center; gap: .5rem; flex-wrap: wrap; }
.earn-step { flex: 1; min-width: 210px; max-width: 280px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.75rem 1.4rem 1.5rem;
  text-align: center; position: relative; }
.earn-step-num { position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  width: 30px; height: 30px; border-radius: 50%; background: var(--hot); color: #fff;
  font-weight: 800; font-size: .92rem; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(244,58,82,.35); }
.earn-step-icon { width: 60px; height: 60px; margin: .6rem auto 1rem; border-radius: 16px;
  background: var(--hot-light); color: var(--hot); display: flex; align-items: center; justify-content: center; }
.earn-step h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.earn-step p { font-size: .88rem; color: var(--text-muted); line-height: 1.6; margin: 0; }
.earn-step-arrow { display: flex; align-items: center; color: var(--text-light); }
@media (max-width: 720px) { .earn-step-arrow { transform: rotate(90deg); } }

/* Math formula band */
.earn-math-band { background: var(--surface); border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border); }
.earn-formula { display: flex; align-items: stretch; justify-content: center; gap: 1rem;
  flex-wrap: wrap; max-width: 860px; margin: 0 auto; }
.earn-formula-part { flex: 1; min-width: 180px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.5rem 1rem; text-align: center; display: flex;
  flex-direction: column; gap: .35rem; }
.earn-formula-result { background: var(--hot-light); border-color: var(--hot-border); }
.earn-formula-big { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.earn-formula-result .earn-formula-big { color: var(--hot); }
.earn-formula-lbl { font-size: .82rem; color: var(--text-muted); line-height: 1.4; }
.earn-formula-op { display: flex; align-items: center; font-size: 1.6rem; font-weight: 700; color: var(--text-light); }
.earn-fineprint { text-align: center; font-size: .85rem; color: var(--text-light); margin: 1.75rem auto 0; }

/* Dashboard opt-in card */
.earn-optin-card { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  flex-wrap: wrap; background: var(--hot-light); border: 1px solid var(--hot-border);
  border-radius: var(--radius); padding: 1.15rem 1.4rem; }
/* No cap: the card is already a bounded column, and 520px wrapped this onto
   three lines with empty space beside it. */
.earn-optin-card p { margin: 0; }

/* /earn earnings calculator */
.earn-calc { max-width: 620px; margin: 0 auto; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.75rem 2rem; }
.earn-calc-out { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap;
  gap: .5rem; margin-bottom: 1.25rem; }
.earn-calc-views { font-size: .95rem; color: var(--text-muted); }
.earn-calc-views span { font-weight: 800; color: var(--text); }
.earn-calc-amount { font-size: 2.4rem; font-weight: 800; letter-spacing: -.03em; color: var(--hot); }
.earn-calc-amount small { font-size: 1rem; color: var(--text-light); font-weight: 600; }
.earn-calc input[type=range] { width: 100%; height: 8px; border-radius: 999px; appearance: none;
  -webkit-appearance: none; background: var(--surface-3); outline: none; cursor: pointer; }
.earn-calc input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px;
  border-radius: 50%; background: var(--hot); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(244,58,82,.5); cursor: pointer; }
.earn-calc input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%;
  background: var(--hot); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(244,58,82,.5); cursor: pointer; }
.earn-calc-scale { display: flex; justify-content: space-between; margin-top: .6rem;
  font-size: .72rem; color: var(--text-light); }

/* ============================================================
   Dashboard file explorer (/dashboard/images)
   A details-list first design: the table is the primary view because size,
   dimensions and upload date are what people actually sort and scan by.
   ============================================================ */
.fx { display: flex; flex-direction: column; gap: .85rem; }

.fx-titlebar { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.fx-titlebar h1 { font-size: 1.5rem; margin: 0; letter-spacing: -.02em; }
.fx-count { font-size: .8rem; color: var(--text-light); font-variant-numeric: tabular-nums; }
.fx-spacer { flex: 1; }

/* --- toolbar --- */
.fx-toolbar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: .55rem .65rem; }
.fx-search { position: relative; flex: 1; min-width: 190px; display: flex; align-items: center; }
.fx-search svg { position: absolute; left: .6rem; color: var(--text-light); pointer-events: none; }
.fx-search input { width: 100%; padding: .45rem .6rem .45rem 2rem; font-size: .86rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text); }
.fx-toolbar select { padding: .45rem .6rem; font-size: .82rem; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface); color: var(--text); max-width: 12rem; }
.fx-search input:focus, .fx-toolbar select:focus { outline: 2px solid var(--border-focus); outline-offset: 1px; }

.fx-viewswitch { display: flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.fx-viewswitch button { border: 0; background: var(--surface); padding: .45rem .6rem;
  cursor: pointer; color: var(--text-muted); display: flex; align-items: center; }
.fx-viewswitch button.on { background: var(--hot-light); color: var(--hot-dark); }
.fx-viewswitch button:hover { background: var(--surface-3); }

/* --- visibility tabs --- */
.fx-tabs { display: flex; gap: .25rem; align-items: center; flex-wrap: wrap;
  border-bottom: 1px solid var(--border); padding-bottom: .1rem; }
.fx-tabs a { padding: .45rem .8rem; font-size: .85rem; font-weight: 600; color: var(--text-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none; }
.fx-tabs a span { font-size: .74rem; color: var(--text-light); font-variant-numeric: tabular-nums; }
.fx-tabs a:hover { color: var(--hot-dark); }
.fx-tabs a.on { color: var(--hot-dark); border-bottom-color: var(--hot); }
.fx-hint { font-size: .74rem; color: var(--text-light); display: inline-flex;
  align-items: center; gap: .35rem; padding-bottom: .3rem; }
.fx-hint svg { flex-shrink: 0; }

/* --- command bar --- */
.fx-commandbar { position: sticky; top: calc(var(--nav-height) + .5rem); z-index: 40;
  display: flex; gap: .4rem; align-items: center; flex-wrap: wrap;
  background: var(--hot-light); border: 1px solid var(--hot-border);
  border-radius: var(--radius-sm); padding: .5rem .7rem; box-shadow: var(--shadow-sm); }
.fx-selcount { font-size: .82rem; color: var(--hot-dark); }
.fx-sep { width: 1px; height: 1.1rem; background: var(--hot-border); }
.fx-cmd { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem;
  font-weight: 600; padding: .35rem .65rem; border-radius: var(--radius-sm);
  border: 1px solid transparent; background: transparent; color: var(--hot-dark); cursor: pointer; }
.fx-cmd:hover { background: #fff; border-color: var(--hot-border); }
.fx-cmd.danger { color: #991b1b; }
.fx-cmd.danger:hover { background: #fef2f2; border-color: #fca5a5; }
.fx-commandbar select { padding: .35rem .5rem; font-size: .8rem; border: 1px solid var(--hot-border);
  border-radius: var(--radius-sm); background: #fff; max-width: 10rem; }

/* --- details table --- */
.fx-table-wrap { overflow-x: auto; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  overscroll-behavior-x: contain; scrollbar-width: thin; }
/* A visible, always-there scrollbar: an overflowing table that looks like a
   plain block is a table whose extra columns nobody finds. */
.fx-table-wrap::-webkit-scrollbar { height: 10px; }
.fx-table-wrap::-webkit-scrollbar-track { background: var(--surface-2);
  border-top: 1px solid var(--border); }
.fx-table-wrap::-webkit-scrollbar-thumb { background: var(--rule-thumb, #d9c9c2);
  border-radius: 999px; border: 2px solid var(--surface-2); }
.fx-table-wrap::-webkit-scrollbar-thumb:hover { background: var(--hot-border); }

/* width:100% sized the table to the CONTAINER while nowrap cells forced it
   wider, so row and header backgrounds painted only to the container edge and
   left bare white past the last column. max-content sizes it to its actual
   content, min-width keeps it filling a wide viewport. */
.fx-table { width: max-content; min-width: 100%; border-collapse: collapse; font-size: .85rem; }
.fx-table thead th { text-align: left; font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-light); padding: .6rem .7rem;
  border-bottom: 1px solid var(--border); white-space: nowrap; background: var(--surface-2); }
.fx-table td { padding: .5rem .7rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.fx-table tbody tr:last-child td { border-bottom: 0; }
.fx-row { cursor: default; }
.fx-table tbody tr:hover td { background: var(--surface-2); }
.fx-table tbody tr.selected td { background: var(--hot-light); }
/* The checkbox and name stay put while the numeric columns scroll under them -
   scrolling right used to leave rows of figures with nothing identifying them.
   Sticky cells need their own background or the moving content shows through,
   and the row states have to be repeated here for the same reason. */
.fx-c-check { width: 2.2rem; position: sticky; left: 0; z-index: 3;
  background: var(--surface); }
.fx-c-name { position: sticky; left: 2.2rem; z-index: 3; background: var(--surface); }
.fx-table thead .fx-c-check, .fx-table thead .fx-c-name { z-index: 4; background: var(--surface-2); }
.fx-table tbody tr:hover .fx-c-check, .fx-table tbody tr:hover .fx-c-name { background: var(--surface-2); }
.fx-table tbody tr.selected .fx-c-check, .fx-table tbody tr.selected .fx-c-name { background: var(--hot-light); }
/* Hairline that reads as an edge only once the table is actually scrolled. */
.fx-c-name::after { content: ""; position: absolute; top: 0; right: 0; bottom: -1px;
  width: 1px; background: var(--border); }
.fx-c-num, .fx-c-dim { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums;
  color: var(--text-muted); }
.fx-c-date { white-space: nowrap; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.fx-c-act { white-space: nowrap; text-align: right; }
.fx-name { display: flex; align-items: center; gap: .6rem; min-width: 14rem; text-decoration: none; }
.fx-name img { border-radius: 4px; object-fit: cover; flex-shrink: 0; background: var(--surface-3); }
.fx-name b { display: block; font-weight: 600; color: var(--text); font-size: .86rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22rem; }
.fx-name small { display: block; color: var(--text-light); font-size: .72rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22rem; }
.fx-name:hover b { color: var(--hot-dark); }

.fx-pill { display: inline-block; padding: .12rem .5rem; border-radius: 999px;
  font-size: .7rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.fx-public   { background: #e6f2ec; color: #1c6a50; }
.fx-unlisted { background: var(--surface-3); color: var(--text-muted); }
.fx-private  { background: #efeaf7; color: #5b3f96; }
.fx-ok   { background: #e6f2ec; color: #1c6a50; }
.fx-wait { background: #fdf3dc; color: #8a5a08; }
.fx-no   { background: #fdeaea; color: #a12626; }
.fx-dash { color: var(--text-light); }

.fx-icon { display: inline-flex; align-items: center; justify-content: center;
  width: 1.85rem; height: 1.85rem; border-radius: var(--radius-sm); border: 0;
  background: transparent; color: var(--text-muted); cursor: pointer; }
.fx-icon:hover { background: var(--surface-3); color: var(--hot-dark); }
.fx-icon.disabled { opacity: .3; cursor: not-allowed; }
.fx-icon.disabled:hover { background: transparent; color: var(--text-muted); }

/* --- tile view --- */
.fx-grid { display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); }
.fx-tile { position: relative; display: block; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden;
  cursor: pointer; }
.fx-tile.selected { border-color: var(--hot); box-shadow: 0 0 0 2px var(--hot-light); }
.fx-tile img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: var(--surface-3); }
.fx-tile input[type=checkbox] { position: absolute; top: .45rem; left: .45rem; z-index: 2;
  width: 1.05rem; height: 1.05rem; accent-color: var(--hot); }
.fx-tile-meta { display: block; padding: .5rem .6rem; }
.fx-tile-meta b { display: block; font-size: .8rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-tile-meta small { display: block; font-size: .71rem; color: var(--text-light); }
.fx-tile-pill { position: absolute; top: .45rem; right: .45rem; }

/* --- status bar --- */
.fx-statusbar { display: flex; align-items: center; gap: .7rem; font-size: .76rem;
  color: var(--text-muted); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: .4rem .75rem; font-variant-numeric: tabular-nums; }
.fx-statusbar .fx-sep { background: var(--border); }

.fx-empty { text-align: center; padding: 3.5rem 1.5rem; background: var(--surface);
  border: 1px dashed var(--border); border-radius: var(--radius); }
.fx-empty svg { color: var(--text-light); }
.fx-empty h2 { font-size: 1.1rem; margin: .75rem 0 .3rem; }
.fx-empty p { color: var(--text-muted); font-size: .88rem; margin-bottom: 1.1rem; }

@media (max-width: 720px) {
  .fx-c-dim, .fx-c-gal { display: none; }
  .fx-name b, .fx-name small { max-width: 11rem; }
  .fx-commandbar { position: static; }
}

/* Creator row with a follow control: the link and the button are siblings so the
   button is never nested inside an anchor. */
.creator-card { transition: border-color .15s ease; }
.creator-card:hover { border-color: var(--hot-border); }
.creator-link { display: flex; align-items: center; gap: .75rem; flex: 1; min-width: 0;
  text-decoration: none; color: inherit; }
.creator-link span { min-width: 0; }
.creator-link b { display: block; font-weight: 700; font-size: .92rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.creator-link small { display: block; font-size: .76rem; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.creator-link:hover b { color: var(--hot-dark); }
.follow-btn { min-width: 6.1rem; justify-content: center; flex-shrink: 0; }

/* Following feed */
.feed-h2 { display: flex; align-items: center; gap: .45rem; font-size: 1.02rem;
  margin: 0 0 .8rem; letter-spacing: -.01em; }
.feed-h2 svg { color: var(--hot); }
.creator-strip { display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.creator-latest { flex-shrink: 0; line-height: 0; }
.creator-latest img { border-radius: 6px; object-fit: cover; border: 1px solid var(--border); }

/* Bulk metadata editor */
.be-tools { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: .5rem .6rem; margin-bottom: .85rem; }
.be-tools .fx-cmd { color: var(--text-muted); }
.be-tools .fx-cmd:hover { background: var(--surface-3); color: var(--hot-dark); border-color: var(--border); }
.be-progress { font-size: .78rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.be-rows { display: flex; flex-direction: column; gap: .6rem; }
.be-row { display: flex; gap: .85rem; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .75rem .85rem; }
.be-thumb { flex-shrink: 0; line-height: 0; }
.be-thumb img { border-radius: 6px; object-fit: cover; border: 1px solid var(--border);
  background: var(--surface-3); }
.be-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .4rem; }
.be-filename { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  font-size: .74rem; color: var(--text-light); }
.be-block, .be-ok { display: inline-flex; align-items: center; gap: .25rem; font-size: .72rem; }
.be-block { color: #8a5a08; }
.be-ok { color: #1c6a50; }
.be-title { font-weight: 600; }
.be-desc { resize: vertical; min-height: 3.1rem; }
.be-counts { font-size: .7rem; color: var(--text-light); text-align: right;
  font-variant-numeric: tabular-nums; }

.be-actions { position: sticky; bottom: 0; display: flex; gap: .5rem; flex-wrap: wrap;
  align-items: center; margin-top: 1rem; padding: .8rem 0;
  background: linear-gradient(180deg, transparent, var(--surface-2) 35%); }

@media (max-width: 620px) {
  .be-row { flex-direction: column; }
  .be-thumb img { width: 56px; height: 56px; }
}

/* Owner-only visibility banner on the image page */
.vis-banner { display: flex; align-items: center; gap: .85rem; flex-wrap: wrap;
  border: 1px solid var(--border); border-left: 3px solid var(--vis-accent, var(--border));
  background: var(--vis-bg, var(--surface)); border-radius: var(--radius-sm);
  padding: .8rem 1rem; margin-bottom: 1rem; }
.vis-private  { --vis-accent: #5b3f96; --vis-bg: #f4f1fb; }
.vis-unlisted { --vis-accent: #8a6d3b; --vis-bg: #fbf6ec; }
.vis-public   { --vis-accent: #1c6a50; --vis-bg: #edf7f2; }
/* Held by the safety scan. Slate rather than a warning colour: the image is
   not suspected of anything, it is waiting. */
.vis-pending  { --vis-accent: #47536b; --vis-bg: #f1f3f7; }
.vis-icon { color: var(--vis-accent); display: flex; flex-shrink: 0; }
.vis-copy { flex: 1; min-width: 14rem; }
.vis-copy b { display: block; font-size: .9rem; color: var(--text); }
.vis-copy span { display: block; font-size: .8rem; color: var(--text-muted); line-height: 1.55; }
.vis-actions { display: flex; gap: .25rem; background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: .2rem; flex-shrink: 0; }
.vis-btn { border: 0; background: transparent; cursor: pointer; font-size: .78rem;
  font-weight: 600; color: var(--text-muted); padding: .32rem .6rem; border-radius: 4px; }
.vis-btn:hover { background: var(--surface-3); color: var(--text); }
.vis-btn.on { background: var(--vis-accent); color: #fff; }

/* ---- instant tooltips ----------------------------------------------------
   The native title= attribute waits about a second and cannot be styled, which
   is no help on a toolbar of icon buttons. data-tip renders immediately, and
   pointer-events:none keeps it from ever swallowing the click it describes. */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute; top: calc(100% + 7px); left: 50%; transform: translateX(-50%) translateY(-3px);
  z-index: 200; width: max-content; max-width: 17rem;
  background: #2b2226; color: #fff; font-family: inherit; font-size: .74rem;
  font-weight: 500; line-height: 1.45; letter-spacing: 0; text-transform: none;
  text-align: left; padding: .42rem .6rem; border-radius: 6px;
  box-shadow: 0 6px 20px -8px rgba(0,0,0,.55);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
}
[data-tip]::before {
  content: ""; position: absolute; top: calc(100% + 2px); left: 50%;
  transform: translateX(-50%); z-index: 201;
  border: 5px solid transparent; border-bottom-color: #2b2226;
  opacity: 0; visibility: hidden; transition: opacity .12s ease;
  pointer-events: none;
}
[data-tip]:hover::after, [data-tip]:focus-visible::after,
[data-tip]:hover::before, [data-tip]:focus-visible::before {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
[data-tip]:focus-visible::before, [data-tip]:hover::before { transform: translateX(-50%); }
/* Near the right edge the bubble would overflow the viewport, so anchor it to
   the button's right instead of centring it. */
[data-tip].tip-left::after { left: auto; right: 0; transform: translateY(-3px); }
[data-tip].tip-left:hover::after, [data-tip].tip-left:focus-visible::after { transform: translateY(0); }
[data-tip].tip-left::before { left: auto; right: .6rem; transform: none; }
.fx-commandbar, .fx-toolbar, .fx-c-act { overflow: visible; }
/* Inside a horizontally scrolling table a centred tooltip overhangs the last
   column and its width is counted into scrollWidth - which is what produced ~90px
   of bare white to the right of the final cell. Anchoring the bubble's right edge
   to the button makes it grow leftwards, where overflow adds no scroll area. */
.fx-c-act [data-tip]::after { left: auto; right: 0; transform: translateY(-3px); }
.fx-c-act [data-tip]:hover::after, .fx-c-act [data-tip]:focus-visible::after { transform: translateY(0); }
.fx-c-act [data-tip]::before { left: auto; right: .55rem; transform: none; }
@media (hover: none) { [data-tip]::after, [data-tip]::before { display: none; } }

/* Explorer layout with an album rail on the left */
.fx-body { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: .9rem;
  align-items: start; }
.fx-main { min-width: 0; }
.fx-rail { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: .5rem; position: sticky;
  top: calc(var(--nav-height) + .5rem); display: flex; flex-direction: column; gap: .1rem; }
.fx-rail-head { display: flex; align-items: center; justify-content: space-between;
  padding: .3rem .45rem .5rem; font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-light); }
.fx-rail-new { border: 1px solid var(--border); background: var(--surface-2);
  border-radius: 5px; padding: .2rem .35rem; cursor: pointer; color: var(--text-muted);
  display: flex; }
.fx-rail-new:hover { background: var(--hot-light); color: var(--hot-dark); border-color: var(--hot-border); }
.fx-rail-item { display: flex; align-items: center; gap: .45rem; padding: .42rem .5rem;
  border-radius: 5px; font-size: .82rem; color: var(--text-muted); text-decoration: none;
  border: 1px solid transparent; }
.fx-rail-item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.fx-rail-item b { font-size: .72rem; color: var(--text-light); font-variant-numeric: tabular-nums; }
.fx-rail-item svg { flex-shrink: 0; }
.fx-rail-item:hover { background: var(--surface-2); color: var(--text); }
.fx-rail-item.on { background: var(--hot-light); color: var(--hot-dark); font-weight: 600; }
.fx-rail-item.on b { color: var(--hot-dark); }
/* Drop affordance while dragging images over the rail */
.fx-dragging .fx-rail-item { border-style: dashed; border-color: var(--border); }
.fx-rail-item.drop { background: var(--hot-light); border-color: var(--hot);
  border-style: solid; color: var(--hot-dark); }
.fx-rail-empty { font-size: .74rem; color: var(--text-light); padding: .4rem .5rem;
  line-height: 1.5; margin: 0; }
.fx-rail-manage { display: flex; align-items: center; gap: .35rem; margin-top: .35rem;
  padding: .42rem .5rem; border-top: 1px solid var(--border); font-size: .76rem;
  color: var(--text-light); text-decoration: none; }
.fx-rail-manage:hover { color: var(--hot-dark); }
.fx-dragging .fx-row { cursor: grabbing; }
.fx-newalbum { padding: .35rem .5rem; font-size: .8rem; border: 1px solid var(--hot-border);
  border-radius: var(--radius-sm); background: #fff; width: 9.5rem; }

@media (max-width: 880px) {
  .fx-body { grid-template-columns: 1fr; }
  .fx-rail { position: static; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .fx-rail-head { width: 100%; }
  .fx-rail-item { flex: 0 1 auto; }
  .fx-rail-empty, .fx-rail-manage { width: 100%; border-top: 0; }
}

/* Daily allowance notice on the metered AI tools */
.tool-meter { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: .55rem .8rem; margin-bottom: 1rem;
  font-size: .82rem; color: var(--text-muted); }
.tool-meter svg { color: var(--hot); flex-shrink: 0; }
.tool-meter b { color: var(--text); }
.tool-meter a { margin-left: auto; font-weight: 600; font-size: .8rem; }
.tool-meter.out { background: #fdf3dc; border-color: #f0dcae; color: #8a5a08; }
.tool-meter.out svg, .tool-meter.out b { color: #8a5a08; }

/* ---- download interstitial ---- */
.dlw { max-width: 720px; padding-top: 1.25rem; padding-bottom: 3rem; }
.dlw-card { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.5rem; margin-top: .75rem; }
.dlw-preview { display: flex; align-items: center; gap: .9rem; padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--border); }
.dlw-preview img { border-radius: 8px; object-fit: cover; background: var(--surface-3);
  flex-shrink: 0; }
.dlw-preview b { display: block; font-size: .95rem; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.dlw-preview small { display: block; font-size: .78rem; color: var(--text-muted); }
.dlw-status { text-align: center; padding: 1.75rem 0 1.25rem; }
.dlw-title { font-size: 1.25rem; margin: 0 0 .3rem; letter-spacing: -.02em; }
.dlw-sub { font-size: .88rem; color: var(--text-muted); margin: 0 0 1.25rem; min-height: 1.3em; }
.dlw-spinner { width: 30px; height: 30px; margin: 0 auto 1rem;
  border: 3px solid var(--surface-3); border-top-color: var(--hot);
  border-radius: 50%; animation: dlwspin .8s linear infinite; }
@keyframes dlwspin { to { transform: rotate(360deg); } }
.dlw-ring { display: inline-flex; align-items: baseline; gap: .3rem; margin-bottom: .9rem; }
.dlw-ring span { font-size: 2.4rem; font-weight: 800; letter-spacing: -.04em;
  color: var(--hot); font-variant-numeric: tabular-nums; line-height: 1; }
.dlw-ring small { font-size: .8rem; color: var(--text-muted); }
.dlw-track { height: 5px; background: var(--surface-3); border-radius: 999px;
  overflow: hidden; max-width: 340px; margin: 0 auto 1.25rem; }
.dlw-fill { height: 100%; width: 0; background: var(--hot); border-radius: 999px;
  transition: width .25s linear; }
.dlw-note { font-size: .76rem; color: var(--text-light); margin-top: .7rem; }
.dlw-alt { display: flex; justify-content: center; gap: .5rem; flex-wrap: wrap;
  font-size: .82rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.dlw-alt span { color: var(--text-light); }
@media (prefers-reduced-motion: reduce) {
  .dlw-spinner { animation: none; border-top-color: var(--surface-3); }
  .dlw-fill { transition: none; }
}

/* Payout method chooser */
.payout-methods { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-bottom: 1.25rem; }
.payout-method { display: flex; align-items: flex-start; gap: .6rem; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .8rem .9rem;
  background: var(--surface); }
.payout-method:hover { border-color: var(--hot-border); }
.payout-method.on { border-color: var(--hot); background: var(--hot-light); }
.payout-method input { margin-top: .2rem; accent-color: var(--hot); flex-shrink: 0; }
.payout-method b { display: block; font-size: .92rem; }
.payout-method small { display: block; font-size: .76rem; color: var(--text-muted); line-height: 1.5; }
.payout-fields { border-top: 1px solid var(--border); padding-top: 1.1rem; }

/* ============================================================
   Admin panel shell
   Denser than the member dashboard on purpose: these are working screens
   scanned in bulk, not pages read once.
   ============================================================ */
.adm-layout { display: grid; grid-template-columns: 218px minmax(0, 1fr);
  gap: 1.25rem; padding-top: 1rem; padding-bottom: 4rem; align-items: start; }
.adm-main { min-width: 0; }

.adm-nav { position: sticky; top: calc(var(--nav-height) + .75rem);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.adm-nav-head { display: flex; align-items: center; gap: .5rem; background: #27201d;
  color: #fff; font-weight: 700; font-size: .88rem; padding: .7rem .9rem; }
.adm-group { font-size: .64rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-light);
  padding: .8rem .9rem .3rem; }
.adm-link { display: flex; align-items: center; gap: .55rem; padding: .48rem .9rem;
  font-size: .85rem; color: var(--text-muted); text-decoration: none;
  border-left: 2px solid transparent; }
.adm-link span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.adm-link svg { flex-shrink: 0; }
.adm-link:hover { background: var(--surface-2); color: var(--text); }
.adm-link.on { background: var(--hot-light); color: var(--hot-dark); font-weight: 600;
  border-left-color: var(--hot); }
/* A count only appears when there is something waiting, so any badge on screen
   means work to do. */
.adm-badge { background: var(--hot); color: #fff; font-size: .68rem; font-weight: 700;
  min-width: 1.15rem; text-align: center; padding: .05rem .35rem; border-radius: 999px;
  font-variant-numeric: tabular-nums; }
.adm-link.on .adm-badge { background: var(--hot-dark); }
.adm-back { border-top: 1px solid var(--border); margin-top: .5rem; color: var(--text-light); }

/* Page header shared by every admin screen */
.adm-head { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
  margin-bottom: .9rem; }
.adm-head h1 { font-size: 1.35rem; margin: 0; letter-spacing: -.02em; }
.adm-head .count { font-size: .8rem; color: var(--text-light);
  font-variant-numeric: tabular-nums; }
.adm-head .spacer { flex: 1; }

/* Filter tabs, consistent across the queues */
.adm-tabs { display: flex; gap: .25rem; flex-wrap: wrap; border-bottom: 1px solid var(--border);
  margin-bottom: 1rem; }
.adm-tabs a { padding: .45rem .8rem; font-size: .84rem; font-weight: 600;
  color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px;
  text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; }
.adm-tabs a:hover { color: var(--hot-dark); }
.adm-tabs a.on { color: var(--hot-dark); border-bottom-color: var(--hot); }
.adm-tabs a b { font-size: .72rem; color: var(--text-light); font-variant-numeric: tabular-nums; }
.adm-tabs a.on b { color: var(--hot-dark); }

/* Dense admin tables.
   NOT a sticky header: .table-wrap is overflow-x:auto, which makes it the
   nearest scroll container, so `top: var(--nav-height)` resolved against the
   wrap rather than the viewport and parked the header 62px down - permanently
   covering the first rows. A viewport-sticky header would need the wrap to be
   the vertical scroller too, which is a bigger change than it is worth here. */
.adm-main .data-table { font-size: .82rem; }
.adm-main .data-table thead th { background: var(--surface-2);
  font-size: .68rem; padding: .55rem .8rem; }
.adm-main .data-table td { padding: .5rem .8rem; }
.adm-main .table-wrap { overflow-x: auto; }

/* Overview stat grid */
.adm-stats { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-bottom: 1.5rem; }
.adm-stat { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: .85rem 1rem; }
.adm-stat .l { display: block; font-size: .66rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-light); }
.adm-stat .n { display: block; font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em;
  margin-top: .3rem; font-variant-numeric: tabular-nums; }
.adm-stat .s { display: block; font-size: .72rem; color: var(--text-muted); margin-top: .1rem; }
.adm-stat.alert .n { color: var(--hot); }

@media (max-width: 900px) {
  .adm-layout { grid-template-columns: 1fr; }
  .adm-nav { position: static; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .adm-nav-head, .adm-group { width: 100%; }
  .adm-link { border-left: 0; border-bottom: 2px solid transparent; }
  .adm-link.on { border-left: 0; border-bottom-color: var(--hot); }
}

/* Moderation queue rows */
.adm-lede { font-size: .84rem; color: var(--text-muted); margin: -.4rem 0 1rem; }
.adm-tabs a b.danger { color: #fff; background: var(--hot); padding: .05rem .35rem;
  border-radius: 999px; font-size: .68rem; }

.mq-bulk { position: sticky; top: calc(var(--nav-height) + .5rem); z-index: 30;
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  background: var(--hot-light); border: 1px solid var(--hot-border);
  border-radius: var(--radius-sm); padding: .5rem .7rem; margin-bottom: .8rem;
  box-shadow: var(--shadow-sm); }
.mq-selcount { font-size: .82rem; color: var(--hot-dark); }

.mq { display: flex; flex-direction: column; gap: .5rem; }
.mq-row { display: grid; grid-template-columns: 1.6rem 72px minmax(0, 1fr) auto;
  gap: .8rem; align-items: start; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: .7rem .8rem; cursor: default; }
.mq-row:hover { border-color: var(--hot-border); }
.mq-row.selected { border-color: var(--hot); background: var(--hot-light); }
.mq-check { display: flex; align-items: center; justify-content: center; padding-top: .2rem; }
.mq-check input { accent-color: var(--hot); width: 1rem; height: 1rem; }
.mq-thumb { line-height: 0; flex-shrink: 0; }
.mq-thumb img { border-radius: 6px; object-fit: cover; border: 1px solid var(--border);
  background: var(--surface-3); }
.mq-body { min-width: 0; }
.mq-title { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.mq-title b { font-size: .9rem; }
.mq-desc { font-size: .8rem; color: var(--text-muted); margin: .3rem 0 0; line-height: 1.5; }
.mq-missing { color: #8a5a08; display: inline-flex; align-items: center; gap: .25rem; }
.mq-ai { font-size: .76rem; color: var(--text-light); font-style: italic; margin: .25rem 0 0; }
.mq-meta { display: flex; flex-wrap: wrap; gap: .1rem .7rem; margin-top: .35rem;
  font-size: .73rem; color: var(--text-light); }
.mq-meta a { font-weight: 600; }
.mq-ip { font-family: var(--mono, ui-monospace, Menlo, monospace); }
.mq-banned { color: #dc2626; font-weight: 700; }
.mq-note { font-size: .76rem; margin-top: .3rem; }
.mq-actions { display: flex; flex-direction: column; gap: .35rem; align-items: stretch;
  min-width: 13rem; }
.mq-note-input { font-size: .78rem; padding: .32rem .55rem; }
.mq-btns { display: flex; gap: .3rem; flex-wrap: wrap; }
.mq-ban { color: #991b1b; }
.mq-ban:hover { background: #fef2f2; }
.form-control-sm { padding: .35rem .6rem; font-size: .82rem; }

@media (max-width: 820px) {
  .mq-row { grid-template-columns: 1.6rem 56px minmax(0, 1fr); }
  .mq-actions { grid-column: 1 / -1; min-width: 0; }
  .mq-bulk { position: static; }
}
.mq-all { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  font-size: .82rem; color: var(--hot-dark); font-weight: 600; margin: 0; }
.mq-all input { accent-color: var(--hot); width: 1rem; height: 1rem; }
.mq-bulk .fx-cmd[disabled] { opacity: .4; cursor: not-allowed; }
.mq-bulk .fx-cmd[disabled]:hover { background: transparent; border-color: transparent; }

/* Adult quarantine previews.

   The queue cannot be worked without seeing the pictures - a public_id tells
   nobody whether an upload is legal - so the tiles render inline. They start
   blurred because an admin screen full of quarantined porn is not something to
   render unasked, and the reveal choice is remembered per browser so it costs
   one click, once. Clicking a tile opens the larger copy over the page rather
   than navigating away, which is what makes a 120-image pass survivable. */
/* Blocked queue rows carry a bigger preview than the other moderation lists.
   Deciding whether a takedown was right means actually looking at the picture,
   and a 72px square is not looking - it is guessing. Nothing here is blurred:
   this screen exists to be read. */
.mq.blk .mq-row { grid-template-columns: 1.6rem 140px minmax(0, 1fr) auto; }
.mq.blk .mq-thumb img { width: 140px; height: 140px; }
@media (max-width: 720px) {
  .mq.blk .mq-row { grid-template-columns: 1.6rem 96px minmax(0, 1fr); }
  .mq.blk .mq-thumb img { width: 96px; height: 96px; }
}

.adq-bar { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  margin: .9rem 0 0; }
.adq-toggle { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer;
  margin: 0; font-size: .85rem; font-weight: 600; color: var(--hot-dark); }
.adq-toggle input { accent-color: var(--hot); width: 1rem; height: 1rem; }

.adq-shot { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1;
  padding: 0; overflow: hidden; line-height: 0; cursor: pointer;
  margin-bottom: .7rem; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface-3); }
.adq-shot:hover { border-color: var(--hot-border); }
.adq-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adq-grid:not(.on) .adq-card:not(.on) .adq-shot img { filter: blur(24px) saturate(.55); }
.adq-veil { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .1rem; color: #fff;
  background: rgba(20, 16, 14, .42); font-size: .74rem; line-height: 1.35;
  letter-spacing: .01em; text-shadow: 0 1px 2px rgba(0, 0, 0, .55); }
.adq-veil b { font-size: .8rem; }
.adq-grid.on .adq-veil, .adq-card.on .adq-veil { display: none; }

.adq-box { position: fixed; inset: 0; z-index: 1000; display: none;
  flex-direction: column; gap: .7rem; padding: 1rem;
  background: rgba(16, 13, 12, .93); }
.adq-box.on { display: flex; }
.adq-box-head { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  color: #f4f1ef; font-size: .88rem; }
.adq-box-head .adq-toggle { color: #f4f1ef; }
.adq-dim { color: rgba(244, 241, 239, .6); font-size: .78rem; }
.adq-box-open { color: #fff; text-decoration: underline; font-size: .8rem; }
.adq-close { margin-left: auto; font-size: 1.5rem; line-height: 1; }
.adq-box-body { flex: 1; min-height: 0; display: flex; align-items: center;
  justify-content: center; gap: .6rem; }
.adq-box-body img { max-width: 100%; max-height: 100%; object-fit: contain;
  border-radius: var(--radius-sm); }
.adq-nav { flex: none; width: 2.6rem; height: 2.6rem; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .12); color: #fff; font-size: 1.4rem;
  cursor: pointer; }
.adq-nav:hover { background: rgba(255, 255, 255, .26); }

@media (max-width: 640px) {
  .adq-box-body { gap: .2rem; }
  .adq-nav { width: 2.1rem; height: 2.1rem; font-size: 1.15rem; }
}

/* Post-upload content attestation. Shown with the results, because asking
   somebody to confirm an image before they have chosen one is friction that
   buys nothing. */
.upload-terms { font-size: .8rem; color: var(--text-muted); margin: 1rem 0 0;
  line-height: 1.55; }
.consent-strip { background: var(--hot-light); border: 2px solid var(--hot);
  border-radius: var(--radius-sm); padding: .9rem 1rem; margin-bottom: 1rem; }
.consent-strip .form-check { margin: 0; font-size: .88rem; align-items: flex-start; }
.consent-strip input { accent-color: var(--hot); width: 1.15rem; height: 1.15rem;
  flex-shrink: 0; }
.consent-head { margin: 0 0 .5rem; font-weight: 800; font-size: .95rem;
  color: var(--hot-dark); letter-spacing: -.01em; }
.consent-state { display: inline-block; margin-top: .5rem; font-size: .82rem;
  font-weight: 700; color: var(--hot-dark); }
.consent-strip.done { border-color: #16a34a; background: #f0fdf4; }
.consent-strip.done .consent-head, .consent-strip.done .consent-state { color: #15803d; }

/* Flashes until confirmed. This is the only thing between the uploader and
   their links, so it has to be impossible to miss - it stops the moment the
   box is ticked. */
@keyframes consent-flash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(244, 63, 94, .55); border-color: var(--hot); }
  50%      { box-shadow: 0 0 0 .5rem rgba(244, 63, 94, 0); border-color: var(--hot-dark); }
}
.consent-strip.flashing { animation: consent-flash 1.15s ease-in-out infinite; }

/* Anime / hentai / manga upload -> free generator recommendation. Sits at the
   top of the results panel, next to the links the uploader came for, and only
   appears when services/animestyle.py says the batch is that kind of art. */
.promo-strip { display: flex; gap: .9rem; align-items: flex-start;
  background: linear-gradient(135deg, #fff0f1 0%, #fff3ec 100%);
  border: 2px solid var(--hot-border); border-radius: var(--radius);
  padding: 1rem 1.1rem; margin-bottom: 1rem; box-shadow: var(--shadow-sm); }
.promo-strip .ap-icon { font-size: 1.5rem; line-height: 1.2; flex-shrink: 0; }
.promo-strip .ap-body { flex: 1; min-width: 0; }
.promo-strip .ap-head { margin: 0 0 .35rem; font-weight: 800; font-size: .98rem;
  color: var(--hot-dark); letter-spacing: -.01em; }
.promo-strip .ap-text { margin: 0 0 .8rem; font-size: .86rem; line-height: 1.55;
  color: var(--text); }
.promo-strip .ap-cta { width: auto; }
.promo-strip .ap-note { margin: .5rem 0 0; font-size: .72rem; color: var(--text-light); }
@media (max-width: 560px) {
  .promo-strip { gap: .7rem; padding: .9rem; }
  .promo-strip .ap-cta { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  /* Still unmissable without the pulsing, for anyone who asked for less motion. */
  .consent-strip.flashing { animation: none; box-shadow: 0 0 0 .25rem rgba(244, 63, 94, .35); }
}
/* The gallery ask sits in the same strip, in the site's cooler half so two
   promos in one results panel do not read as the same message twice. */
.promo-strip.promo-gallery { background: linear-gradient(135deg, #eef4ff 0%, #f3f0ff 100%);
  border-color: #c7d7fe; }
.promo-strip.promo-gallery .ap-head { color: #3730a3; }
.promo-strip.promo-done { background: #f0fdf4; border-color: #86efac; }
.promo-strip.promo-done .ap-head { color: #166534; }

/* Placeholder while the vision captioner names an upload. Deliberately quiet:
   the alternative was printing IMG_4821.jpg and rewriting it seconds later. */
.ur-naming { color: var(--text-light); font-style: italic; font-weight: 500; }

/* ---- Admin users table: one line per user -------------------------------
   The page is read by scanning down a column, and that only works when every
   row is the same height. Previously three things broke that: the name sat
   above the handle above a badge row, a second IP was printed after a <br>,
   and four labelled action buttons wrapped onto their own lines - so a single
   user could occupy four. Everything below keeps a row to exactly one line:
   nothing wraps, the two elastic cells truncate, and the actions are icons. */
.au-table { table-layout: auto; }
.au-table th, .au-table td { white-space: nowrap; vertical-align: middle; }
.adm-main .au-table td { padding: .4rem .8rem; height: 42px; }
.adm-main .au-table th.num, .au-table td.num { text-align: right;
  font-variant-numeric: tabular-nums; }
.adm-main .au-table th.acts, .au-table td.acts { text-align: right; }
.au-table td.num a { font-weight: 700; }

/* Identity: avatar, name and handle on one line, capped so a long display name
   truncates instead of widening the column past everything else. */
.au-cell { max-width: 300px; }
.au-user { display: inline-flex; align-items: center; gap: .45rem; max-width: 252px;
  text-decoration: none; color: inherit; vertical-align: middle; }
.au-user .avatar-sm, .au-user .avatar-sm-fallback { flex-shrink: 0; }
.au-name { min-width: 0; font-size: .84rem; font-weight: 700; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; }
.au-user small { flex-shrink: 0; font-size: .74rem; color: var(--text-light); }
.au-user:hover .au-name, .au-user:hover small { color: var(--hot-dark); }

/* Admin / Google markers, inline with the name rather than on their own row. */
.au-tag { display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 .25rem; margin-left: .25rem;
  border-radius: 4px; background: var(--surface-3); color: var(--text-muted);
  font-size: .62rem; font-weight: 800; vertical-align: middle; }
.au-tag.admin { background: #fef3c7; color: #b45309; }

.au-email { max-width: 220px; overflow: hidden; text-overflow: ellipsis;
  font-size: .76rem; }
.au-date { font-size: .76rem; color: var(--text-muted);
  font-variant-numeric: tabular-nums; }
.au-size { font-size: .76rem; }

/* Origin column */
.au-geo { font-size: .8rem; }
.au-flag { font-size: 1.05rem; line-height: 1; margin-right: .15rem; }
.au-cc { font-variant: small-caps; letter-spacing: .03em; }
.au-moved { display: inline-block; margin-left: .3rem; padding: .05rem .3rem;
  border-radius: 4px; background: #fef3c7; color: #92400e; font-size: .68rem;
  font-weight: 700; }

.au-ip { font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: .72rem; }
/* A sign-in IP that differs from the signup IP. Worth knowing, not worth a
   second line - the address itself is in the tooltip. */
.au-ipdiff { display: inline-block; margin-left: .25rem; padding: 0 .28rem;
  border-radius: 4px; background: #fef3c7; color: #92400e;
  font-weight: 800; text-decoration: none; }
.au-ipdiff:hover { background: var(--amber); color: #fff; }

/* Status as a dot plus a word: reads faster down a column than a filled badge,
   and takes a third of the width. */
.au-status { display: inline-flex; align-items: center; gap: .35rem;
  font-size: .75rem; font-weight: 700; }
.au-status i { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.au-status.active { color: var(--text-muted); }
.au-status.active i { background: var(--green); }
.au-status.banned { color: var(--hot-dark); }
.au-status.banned i { background: var(--hot); }

/* Actions: four icon buttons on one line. Labels are in the tooltips, and
   every destructive one confirms before it fires. */
.au-acts { display: inline-flex; align-items: center; gap: .22rem; }
.au-acts form { display: inline-flex; margin: 0; }
.au-act { display: inline-flex; align-items: center; justify-content: center;
  width: 27px; height: 27px; padding: 0; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-muted); cursor: pointer; transition: background .12s, color .12s,
  border-color .12s; }
.au-act:hover { border-color: var(--hot-border); background: var(--hot-light);
  color: var(--hot-dark); }
.au-act.danger:hover { border-color: var(--hot); background: var(--hot); color: #fff; }
.au-act.ok:hover { border-color: var(--green); background: var(--green); color: #fff; }
/* Placeholder where an action does not apply - keeps the four buttons in the
   same x position on every row, so the column stays clickable by muscle memory. */
.au-act.ghost { opacity: .3; cursor: default; background: transparent; }
.au-act.ghost:hover { border-color: var(--border); background: transparent;
  color: var(--text-muted); }

/* Row accents. The stripe is an inset shadow rather than a border because a
   border on a collapsed table cell shifts the whole column by its width. */
.adm-main .au-table tbody tr.is-banned td { background: #fff6f6; }
.adm-main .au-table tbody tr.is-banned td:first-child { box-shadow: inset 3px 0 0 var(--hot); }
.adm-main .au-table tbody tr.is-admin td:first-child { box-shadow: inset 3px 0 0 var(--amber); }
.adm-main .au-table tbody tr:hover td { background: var(--hot-light); }

.au-empty { text-align: center; color: var(--text-light); padding: 2rem 1rem !important;
  font-size: .85rem; }

/* ============================================================
   PHOTO → ART STUDIO  (/tools/photo-to-anime)
   Only the parts the design system does not already have: the
   before/after comparison, the style picker, the intensity
   control, the drop zone and the waiting state. Everything else
   on that page is interior-hero, tool-panel, spec-table,
   feature-card, steps-list and faq-list, unchanged.
   ============================================================ */

/* ---- before/after comparison ---- */
.ba { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 1;
  background: var(--surface-3); border: 1px solid var(--border); touch-action: none;
  cursor: ew-resize; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ba-before { /* Clipped in place rather than put inside a narrowing wrapper: an
     image inside a wrapper sizes itself to the WRAPPER, so the two frames slide
     out of registration as the handle moves and the comparison becomes a lie. */
  clip-path: inset(0 calc(100% - var(--start, 50%)) 0 0);
  border-right: 2px solid rgba(255, 255, 255, .9); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--start, 50%); width: 0;
  display: grid; place-items: center; pointer-events: none; }
.ba-handle span { width: 34px; height: 34px; border-radius: 999px; background: #fff;
  box-shadow: var(--shadow); display: block; position: relative; }
.ba-handle span::before, .ba-handle span::after { content: ''; position: absolute; top: 50%;
  width: 0; height: 0; border: 5px solid transparent; }
.ba-handle span::before { left: 5px; border-right-color: var(--hot); transform: translateY(-50%); }
.ba-handle span::after { right: 5px; border-left-color: var(--hot); transform: translateY(-50%); }
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize;
  -webkit-appearance: none; appearance: none; background: transparent; margin: 0; }
.ba-range:focus-visible { opacity: 1; outline: 3px solid var(--hot); outline-offset: -3px; }
.ba-tag { position: absolute; bottom: .6rem; font-size: .62rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; padding: .22rem .55rem; border-radius: 999px; color: #fff;
  background: rgba(39, 32, 29, .62); pointer-events: none; }
.ba-tag-l { left: .6rem; } .ba-tag-r { right: .6rem; }

/* The hero comparison wears the house photo frame - but NOT its 1.5deg tilt:
   the drag maps the pointer through getBoundingClientRect(), which on a rotated
   element returns the enclosing box, so a tilted slider follows the cursor at a
   slight offset. A frame that lies about where you are pointing is not worth
   the flourish. */
.art-hero-visual .ba { border: 9px solid #fff; border-radius: 30px;
  box-shadow: 0 28px 65px rgba(80, 30, 20, .17); }
/* The house badge sits bottom-right, which is exactly where this visual keeps
   its "ART" label. Move it to the top on this page rather than stack the two. */
.art-hero-visual .interior-visual-badge { top: 18px; bottom: auto; }

/* ---- studio steps ---- */
.art-step { padding: 1.35rem 0; border-top: 1px dashed var(--border); }
.art-step:first-of-type { border-top: none; padding-top: .25rem; }
.art-step-label { display: flex; align-items: center; gap: .55rem; font-weight: 700; font-size: .95rem;
  margin-bottom: .85rem; }
.art-num { width: 24px; height: 24px; border-radius: 999px; background: var(--grad-hot); color: #fff;
  display: grid; place-items: center; font-size: .78rem; flex-shrink: 0; }

.art-drop { display: grid; place-items: center; min-height: 190px; border: 2px dashed var(--border-focus);
  border-radius: var(--radius); background: var(--surface-2); cursor: pointer; padding: 1.2rem;
  text-align: center; transition: background .15s, border-color .15s; position: relative; overflow: hidden; }
.art-drop:hover, .art-drop.over, .art-drop:focus-visible { background: var(--hot-light);
  border-color: var(--hot); outline: none; }
.art-drop-empty { display: grid; gap: .4rem; justify-items: center; }
.art-drop-icon { color: var(--hot); }
.art-preview { max-height: 340px; max-width: 100%; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
#art-clear { margin-top: .6rem; }

.art-styles { display: grid; gap: 1rem; }
.art-family-name { font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-light); margin-bottom: .45rem; }
.art-family-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.art-style { text-align: left; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .75rem .85rem; cursor: pointer; display: grid;
  grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .6rem; row-gap: .2rem;
  transition: border-color .15s, box-shadow .15s; font: inherit; color: inherit; }
.art-style:hover { border-color: var(--border-focus); box-shadow: var(--shadow-sm); }
.art-style.on { border-color: var(--hot); box-shadow: 0 0 0 3px var(--hot-light); }
.art-style-emoji { font-size: 1.3rem; grid-row: 1 / span 2; align-self: center; }
.art-style-label { font-weight: 700; font-size: .9rem; }
.art-style-blurb { font-size: .74rem; color: var(--text-muted); line-height: 1.45; }

.art-intensity { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.art-int { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: .6rem .7rem; cursor: pointer; display: grid; gap: .15rem; text-align: center;
  font: inherit; color: inherit; transition: border-color .15s; }
.art-int span { font-size: .7rem; color: var(--text-muted); line-height: 1.35; }
.art-int.on { border-color: var(--hot); background: var(--hot-light); }

.art-go { border-top: 1px dashed var(--border); padding-top: 1.35rem; display: grid; gap: .7rem;
  justify-items: center; text-align: center; }
.art-consent { max-width: 46ch; text-align: left; }

/* ---- waiting ---- */
.art-working { text-align: center; padding: 1.6rem 0 .4rem; }
.art-spin { display: flex; gap: .4rem; justify-content: center; margin-bottom: .9rem; }
.art-spin span { width: 12px; height: 12px; border-radius: 3px; background: var(--hot);
  animation: artbounce 1s ease-in-out infinite; }
.art-spin span:nth-child(2) { background: var(--accent); animation-delay: .15s; }
.art-spin span:nth-child(3) { background: var(--amber); animation-delay: .3s; }
@keyframes artbounce { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-9px) rotate(45deg); } }
.art-working-msg { font-weight: 700; font-size: 1rem; }
.art-working-bar { max-width: 380px; margin: .8rem auto .5rem; }
.art-working-bar .progress-fill { width: 4%; transition: width .9s linear; }

/* ---- result ---- */
.art-result { padding-top: 1.35rem; border-top: 1px dashed var(--border); margin-top: 1.35rem; }
.art-result-head h3 { font-size: 1.1rem; display: flex; align-items: center; gap: .4rem; color: var(--green); }
.art-result-compare { margin: 1rem 0; max-width: 520px; }
.art-single { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); }
.art-locked { position: relative; border-radius: var(--radius); overflow: hidden; max-width: 520px; }
.art-locked img { width: 100%; display: block; filter: blur(18px) saturate(.6); transform: scale(1.08); }
.art-locked-veil { position: absolute; inset: 0; display: grid; place-items: center; gap: .3rem;
  align-content: center; background: rgba(39, 32, 29, .5); color: #fff; text-align: center; }
.art-locked-veil span { font-size: 1.8rem; }
.art-result-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.art-result-links { display: grid; gap: .5rem; max-width: 560px; }
.art-again { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px dashed var(--border); }
.art-again-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.art-chip { border: 1px solid var(--border); background: var(--surface); border-radius: 999px;
  padding: .35rem .75rem; font-size: .78rem; font-weight: 600; cursor: pointer;
  font-family: inherit; color: inherit; }
.art-chip:hover { border-color: var(--hot); color: var(--hot-dark); }
.art-chip.on { background: var(--hot-light); border-color: var(--hot); color: var(--hot-dark); }

/* ---- content sections ---- */
.art-examples { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.4rem; }
.art-example figcaption { padding-top: .7rem; }
.art-example-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  margin-bottom: .4rem; flex-wrap: wrap; }
/* The badge collapses the space between the emoji and the label without this. */
.art-example-head .badge { display: inline-flex; align-items: center; gap: .35rem; }
.art-example p { font-size: .8rem; color: var(--text-muted); line-height: 1.6; }
.art-try { background: none; border: none; color: var(--hot-dark); font-weight: 700; font-size: .78rem;
  cursor: pointer; font-family: inherit; padding: 0; }
.art-try:hover { text-decoration: underline; }
.art-guide .feature-card .fc-icon { font-size: 1.05rem; display: grid; place-items: center; }

.art-subjects { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .9rem; }
.art-subject { background: var(--surface); border: 1px solid var(--border); border-left-width: 4px;
  border-radius: var(--radius); padding: .85rem 1rem; }
.art-subject b { display: block; margin: .3rem 0 .25rem; font-size: .92rem; }
.art-subject p { font-size: .8rem; color: var(--text-muted); line-height: 1.55; }
.art-verdict { font-size: .62rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  padding: .18rem .5rem; border-radius: 999px; }
.art-best { border-left-color: var(--green); }
.art-best .art-verdict { background: var(--green-50); color: #166534; }
.art-good { border-left-color: #2563eb; }
.art-good .art-verdict { background: #eff6ff; color: #1d4ed8; }
.art-mixed { border-left-color: var(--amber); }
.art-mixed .art-verdict { background: #fffbeb; color: #92400e; }
.art-avoid { border-left-color: var(--hot); }
.art-avoid .art-verdict { background: var(--hot-light); color: var(--hot-dark); }

.art-uses { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.art-use { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1rem; }
.art-use span { font-size: 1.4rem; display: block; margin-bottom: .4rem; }
.art-use b { display: block; font-size: .92rem; margin-bottom: .25rem; }
.art-use p { font-size: .8rem; color: var(--text-muted); line-height: 1.55; }

@media (max-width: 560px) {
  .art-family-cards { grid-template-columns: 1fr; }
  .art-intensity { grid-template-columns: 1fr; }
  .art-hero-visual .ba { border-width: 6px; border-radius: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .art-spin span { animation: none; }
  .art-working-bar .progress-fill { transition: none; }
}