/* Bootstrap is now linked from each page's <head> (includes/layout.php,
   cp_head_assets) instead of @import-ed here, and Poppins is self-hosted in
   assets/fonts - both used to be fetched one after another before the page
   could render, and the late font swap re-flowed every page ("jumping"). */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: optional; src: url('fonts/poppins-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: optional; src: url('fonts/poppins-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: optional; src: url('fonts/poppins-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: optional; src: url('fonts/poppins-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: optional; src: url('fonts/poppins-latin-800-normal.woff2') format('woff2'); }
/* Arial resized to Poppins' metrics: if the web font is still loading, the
   fallback text takes (almost) the same space, so nothing moves on swap. */
@font-face { font-family: 'Poppins Fallback'; src: local('Arial'), local('Helvetica'), local('Liberation Sans'); ascent-override: 92.33%; descent-override: 30.78%; line-gap-override: 8.79%; size-adjust: 113.73%; }

/* Chess Puzzle sits its own light, "game-like" visual layer on top of
   Bootstrap's reset/grid/utilities - Bootstrap supplies the responsive
   plumbing (container/row/col, .ratio, utility classes used on individual
   pages), everything below is the app's own theme and component styling.
   Every token name below already existed before this pass and is used
   directly via var(...) throughout the PHP templates - keep the names
   stable even when tuning a value. */
:root {
  --bg: #f4f1fc;
  --surface: #ffffff;
  --border: #e6e0f7;
  --text: #241b3d;
  --text-muted: #756f92;
  --primary: #7c3aed;
  --primary-dark: #5b21b6;
  --primary-light: #f1e9ff;
  --accent: #f59e0b;
  --accent-dark: #d97706;
  --danger: #f43f5e;
  --danger-dark: #e11d48;
  --success-bg: #d7f9e9;
  --success-text: #059669;
  --error-bg: #ffe4e6;
  --error-text: #e11d48;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 10px 26px rgba(124, 58, 237, 0.16), 0 3px 8px rgba(124, 58, 237, 0.10);
  --shadow-sm: 0 4px 14px rgba(124, 58, 237, 0.12);
  --gradient-primary: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
  --gradient-header: linear-gradient(120deg, #7c3aed 0%, #5b21b6 55%, #4338ca 100%);
  --gradient-accent: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  --topbar-muted: rgba(255, 255, 255, 0.78);
  /* New tokens for the refreshed look - board wood-tones (reserved for
     future board theming), reused by any card that wants the warm accent. */
  --board-light: #f3e6d0;
  --board-dark: #b98a5a;
}
* { box-sizing: border-box; }
/* Always reserve the scrollbar's space: short and long pages then have the
   same content width, so the layout no longer shifts sideways when moving
   between pages. */
html { scrollbar-gutter: stable; }
@supports not (scrollbar-gutter: stable) { html { overflow-y: scroll; } }
body {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  font-family: 'Poppins', 'Poppins Fallback', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background:
    radial-gradient(900px 500px at 92% -10%, rgba(245, 158, 11, 0.10) 0%, rgba(245, 158, 11, 0) 60%),
    radial-gradient(700px 500px at -5% 10%, rgba(124, 58, 237, 0.10) 0%, rgba(124, 58, 237, 0) 60%),
    linear-gradient(180deg, #f7f4fd 0%, #eef0fb 55%, #f3f0fb 100%);
  background-attachment: fixed;
  color: var(--text);
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid rgba(124, 58, 237, 0.45); outline-offset: 2px; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 20px 20px 60px; }
.wrap.narrow { max-width: 640px; }

/* ===================== Typography (same on every page) ===================== */
.wrap h2 { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.01em; color: var(--text); line-height: 1.25; margin-top: 0; margin-bottom: 4px; }
.wrap h3 { font-size: 1.1rem; font-weight: 700; color: var(--text); line-height: 1.3; }
.wrap > h2 + p, .wrap > h2 + .page-sub { color: var(--text-muted); font-size: 0.9rem; margin-top: 0; margin-bottom: 18px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.page-head h2 { margin-bottom: 2px; }
.page-sub { color: var(--text-muted); font-size: 0.9rem; margin: 0; }

/* ===================== Topbar / navigation ===================== */
/* One topbar for every page (includes/layout.php - cp_topbar). Fixed height
   and an "active" style that doesn't change the text width, so the menu
   stays perfectly still when moving between pages. */
.topbar {
  display: flex; align-items: center; gap: 14px;
  min-height: 62px;
  background: var(--gradient-header);
  color: #fff;
  padding: 10px 14px 10px 20px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 22px;
  position: relative;
}
.topbar::after {
  content: '';
  position: absolute; top: 0; right: 0; width: 220px; height: 100%;
  background: radial-gradient(circle at 80% 0%, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 70%);
  border-radius: var(--radius); pointer-events: none;
}
.brand { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 800; font-size: 1.2rem; letter-spacing: -0.01em; white-space: nowrap; position: relative; z-index: 1; }
.brand:hover { text-decoration: none; color: #fff; }
.brand-ico { font-size: 1.35rem; line-height: 1; }
.brand-sub { font-size: 0.72rem; font-weight: 700; background: rgba(255,255,255,0.18); padding: 3px 9px; border-radius: 999px; letter-spacing: 0.02em; }
/* old markup (pages not yet converted): <h1><a>Chess Puzzle</a></h1> */
.topbar h1 { font-size: 1.2rem; margin: 0; font-weight: 800; letter-spacing: -0.01em; position: relative; z-index: 1; }
.topbar h1 a { color: #fff; text-decoration: none; }

.nav-toggle {
  display: none;
  flex-direction: column; justify-content: center; align-items: center; gap: 4px;
  width: 42px; height: 42px; padding: 0; margin-left: auto;
  border: none; border-radius: 10px; background: rgba(255, 255, 255, 0.16);
  cursor: pointer; position: relative; z-index: 2; flex: 0 0 auto;
}
.nav-toggle span { display: block; width: 18px; height: 2px; background: #fff; border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav-links { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; font-size: 0.86rem; position: relative; z-index: 3; }
.nav-main { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; }
.nav-user { display: flex; align-items: center; gap: 6px; flex: none; }
.nav-links a { display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, 0.86); text-decoration: none; font-weight: 600; padding: 7px 11px; border-radius: 999px; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; }
.nav-links a:hover { color: #fff; background: rgba(255, 255, 255, 0.14); }
.nav-links a.active { color: #4c1d95; background: #fff; }
.nav-links a strong { font-weight: inherit; }
.nav-ico { font-size: 0.95em; line-height: 1; opacity: 0.9; }
.nav-cta { background: rgba(255,255,255,0.18); }
.user-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 0.85rem; font-weight: 600; color: #fff; background: rgba(255, 255, 255, 0.16); padding: 7px 13px; border-radius: 999px; position: relative; z-index: 1; white-space: nowrap; }
.user-chip.active { background: rgba(255,255,255,0.28); }
.chip-note { opacity: 0.7; font-size: 0.82em; }
.user-menu { position: relative; }
.user-menu > summary { list-style: none; cursor: pointer; }
.user-menu > summary::-webkit-details-marker { display: none; }
.user-menu > summary:hover { background: rgba(255,255,255,0.24); }
.caret { width: 7px; height: 7px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-2px) rotate(45deg); opacity: 0.8; }
.user-menu-panel {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; z-index: 50;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 6px;
  display: flex; flex-direction: column;
}
.user-menu-panel a { color: var(--text); padding: 9px 12px; border-radius: 8px; font-weight: 600; }
.user-menu-panel a:hover { background: var(--primary-light); color: var(--primary-dark); }
.user-menu-panel a.danger { color: var(--danger-dark); }

@media (max-width: 1000px) {
  .nav-ico { display: none; }
  .nav-links a { padding: 7px 9px; }
}
@media (max-width: 860px) {
  .topbar { padding: 8px 10px 8px 16px; min-height: 56px; }
  .nav-toggle { display: flex; }
  .nav-links {
    display: none;
    flex-direction: column; align-items: stretch; gap: 6px;
    position: absolute; top: 100%; left: 0; right: 0; margin-top: 8px;
    background: var(--primary-dark);
    border-radius: var(--radius-sm);
    padding: 10px;
    box-shadow: var(--shadow);
  }
  .nav-links.nav-open { display: flex; }
  .nav-main, .nav-user { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav-links a { padding: 11px 12px; border-radius: 10px; }
  .nav-ico { display: inline; }
  .user-menu > summary { justify-content: center; }
  .user-menu-panel { position: static; box-shadow: none; border: 0; background: rgba(255,255,255,0.08); margin-top: 4px; }
  .user-menu-panel a { color: #fff; }
  .user-menu-panel a:hover { background: rgba(255,255,255,0.14); color: #fff; }
  .user-menu-panel a.danger { color: #fecdd3; }
}

/* ===================== Buttons ===================== */
.btn {
  display: inline-flex; align-items: center; gap: 6px; border: none; border-radius: 999px;
  padding: 10px 20px; font-size: 0.9rem; font-weight: 700; cursor: pointer; text-decoration: none;
  background: var(--gradient-primary); color: #fff;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.32);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}
.btn:hover { color: #fff; text-decoration: none; box-shadow: 0 6px 16px rgba(124, 58, 237, 0.4); filter: brightness(1.06); }
.btn:active { box-shadow: 0 2px 6px rgba(124, 58, 237, 0.32); filter: brightness(0.97); }
.btn.btn-secondary { background: #fff; color: var(--primary-dark); border: 2px solid var(--border); box-shadow: none; }
.btn.btn-secondary:hover { background: var(--primary-light); color: var(--primary-dark); border-color: var(--primary); box-shadow: none; filter: none; }
.btn.btn-danger { background: linear-gradient(135deg, #fb7185 0%, #e11d48 100%); box-shadow: 0 4px 12px rgba(225, 29, 72, 0.32); }
.btn.btn-danger:hover { box-shadow: 0 7px 18px rgba(225, 29, 72, 0.42); }
.btn.btn-sm { padding: 7px 14px; font-size: 0.8rem; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; filter: none; }
.btn { line-height: 1.25; white-space: nowrap; justify-content: center; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.pad { padding: 22px; }
.card > :last-child { margin-bottom: 0; }
.subnav { margin-bottom: 18px; }

.flash { padding: 13px 18px; border-radius: var(--radius-sm); margin-bottom: 18px; font-size: 0.9rem; font-weight: 600; border-left: 4px solid transparent; }
.flash.success { background: var(--success-bg); color: var(--success-text); border-left-color: var(--success-text); }
.flash.error { background: var(--error-bg); color: var(--error-text); border-left-color: var(--error-text); }

.field { margin-bottom: 16px; }
.field label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; }
.field input[type="text"], .field input[type="password"], .field input[type="email"], .field textarea, .field select {
  width: 100%; padding: 11px 14px; border: 2px solid var(--border); border-radius: var(--radius-sm); font-size: 0.95rem; font-family: inherit;
  background: var(--surface); color: var(--text); transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}
.field textarea { resize: vertical; min-height: 72px; line-height: 1.45; }

.login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-card { width: 100%; max-width: 380px; padding: 32px 28px; position: relative; overflow: hidden; }
.login-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: var(--gradient-primary); }
.login-card h1 { font-size: 1.3rem; margin: 4px 0 20px; text-align: center; font-weight: 800; color: var(--primary-dark); }
.login-card .btn { width: 100%; justify-content: center; margin-top: 6px; }
.login-card .switch { text-align: center; margin-top: 16px; font-size: 0.85rem; color: var(--text-muted); }
.login-card .switch a { color: var(--primary); font-weight: 600; text-decoration: none; }
.login-card .switch a:hover { text-decoration: underline; }

.chip { display: inline-block; border: 2px solid var(--border); background: var(--surface); border-radius: 999px; padding: 6px 14px; font-size: 0.78rem; font-weight: 600; color: var(--text-muted); text-decoration: none; transition: all 0.15s ease; }
.chip:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }
.chip.active { background: var(--gradient-primary); border-color: transparent; color: #fff; box-shadow: 0 4px 12px rgba(124, 58, 237, 0.32); }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }

/* ===================== Filter dropdown (puzzle type) ===================== */
.filter-row { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.filter-label { font-size: 0.8rem; font-weight: 700; color: var(--text-muted); }
.select-wrap { position: relative; display: inline-block; }
.select-wrap::after {
  content: ''; position: absolute; right: 17px; top: 50%; width: 8px; height: 8px;
  border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted);
  transform: translateY(-65%) rotate(45deg); pointer-events: none;
}
.filter-select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  min-width: 220px; padding: 10px 42px 10px 18px;
  border: 2px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text);
  font-family: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.filter-select:hover { border-color: var(--primary); }
.filter-select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15); }

/* ===================== Puzzle grid ===================== */
.puzzle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.puzzle-card { padding: 16px; display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
.puzzle-card:hover { box-shadow: 0 12px 26px rgba(124, 58, 237, 0.2); border-color: var(--primary); text-decoration: none; }
.puzzle-card .title { font-weight: 700; font-size: 0.95rem; }
.puzzle-card .meta { font-size: 0.78rem; color: var(--text-muted); }
.puzzle-card .status { font-size: 0.78rem; font-weight: 700; }
.puzzle-card .status.done { color: var(--success-text); }
.puzzle-card .status.todo { color: var(--accent-dark); }
.mini-board-preview { width: 100%; aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); pointer-events: none; }

/* Mode/visibility badges on a puzzle card - Bootstrap's .badge.rounded-pill
   for shape/sizing, our own colors per mode. */
.badge-engine { background: #fff3d6; color: #8a6d1f; }
.badge-unlimited { background: #e6e0ff; color: #4a2fa8; }
.badge-private { background: #f0f0f0; color: #555; }

/* ===================== Pagination ===================== */
.pagination { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 26px; flex-wrap: wrap; }
.pagination-info { font-size: 0.85rem; font-weight: 700; color: var(--text-muted); }
.pagination-disabled { opacity: 0.4; pointer-events: none; }

/* ===================== Solve / editor layouts ===================== */
.solve-layout { display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-start; }
.board-col { flex: 0 0 auto; }
.board-wrap { width: 400px; max-width: 90vw; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-sm); }
/* Reserve the board's square before chessboard.js draws it, so the panels
   below/next to it don't jump down once it appears. */
.board-wrap:empty { aspect-ratio: 1 / 1; background: var(--board-light); }
.info-col { flex: 1 1 260px; min-width: 240px; }
#status-banner { padding: 13px 18px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: 0.9rem; font-weight: 700; border-left: 4px solid transparent; }
#status-banner.playing { background: var(--primary-light); color: var(--primary-dark); border-left-color: var(--primary); }
#status-banner.correct { background: var(--success-bg); color: var(--success-text); border-left-color: var(--success-text); }
#status-banner.wrong { background: var(--error-bg); color: var(--error-text); border-left-color: var(--error-text); }
#status-banner.solved { background: var(--success-bg); color: var(--success-text); border-left-color: var(--success-text); }

.editor-layout { display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-start; }
.spare-row { display: flex; justify-content: center; margin: 8px 0; }

table.admin-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
table.admin-table th, table.admin-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); }
table.admin-table th { color: var(--text-muted); font-weight: 700; background: var(--primary-light); }
table.admin-table th:first-child { border-top-left-radius: var(--radius-sm); }
table.admin-table th:last-child { border-top-right-radius: var(--radius-sm); }
table.admin-table tbody tr:hover { background: var(--bg); }

.empty-state { color: var(--text-muted); padding: 40px 0; text-align: center; }
.hint-box { background: #fff8e6; border: 2px solid #fbbf24; border-radius: var(--radius-sm); padding: 13px 16px; font-size: 0.88rem; margin-top: 10px; }

.modal-overlay { position: fixed; inset: 0; background: rgba(36, 27, 61, 0.6); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
.modal-box { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 32px 28px; text-align: center; max-width: 360px; width: 100%; }

/* Tap-to-move: highlight the currently-selected square (used as an alternative
   to drag-and-drop, which is unreliable on mobile browsers - dragging a piece
   there often just scrolls the page instead). */
.cp-selected-square { box-shadow: inset 0 0 3px 3px var(--primary) !important; }

/* ===================== Mobile refinements ===================== */
@media (max-width: 640px) {
  .wrap { padding: 16px 14px 44px; }
  .topbar { padding: 12px 16px; border-radius: var(--radius-sm); }
  .topbar h1 { font-size: 1.15rem; }
  .solve-layout, .editor-layout { gap: 18px; }
  /* .board-col has `flex: 0 0 auto` (desktop: size to its fixed-width board),
     which has no intrinsic width of its own - it normally gets one from the
     400px on .board-wrap. Naively setting the board full-width on mobile by
     changing .board-wrap alone creates a circular reference (a 0 0 auto flex
     item asking its only child for 100% of a width the item itself doesn't
     have yet), and the board collapses to ~0px. Giving the flex item itself
     a definite width first breaks that circularity. */
  .board-col { flex: 1 1 100%; width: 100%; }
  .board-wrap { width: 100%; max-width: 100%; }
  /* .board-stage (analysis.php/pgn_view.php's arrow-overlay wrapper around
     .board-wrap) hits the exact same circular-reference trap described
     above one level deeper: it's `display: inline-block` with no width of
     its own, so it shrink-wraps to fit .board-wrap - but .board-wrap is
     asking for 100% of a container whose width is "whatever fits my
     content", which resolves to 0. Giving .board-stage the same definite
     100% width as .board-col breaks the cycle, same fix as above. */
  .board-stage { width: 100%; }
  .modal-box { padding: 22px 18px; }
  table.admin-table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  .chip-row { gap: 6px; }
  .puzzle-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .filter-row { flex-direction: column; align-items: stretch; gap: 6px; }
  .filter-select { min-width: 0; width: 100%; }
}

/* ===================== Engine panels (analysis / pgn_view / pgn_upload) ===================== */
/* Space for the 3 engine lines and the engine picker is reserved up front,
   so the controls below don't move down once Stockfish starts reporting. */
.pv-list { min-height: 123px; }
#enginePickerBox { min-height: 38px; }

/* Eval bar next to the board (analysis.php / pgn_view.php): exactly as tall
   as the board, and it stays beside the board on phones instead of sitting
   on a row of its own above it. */
.analysis-layout > .eval-bar-wrap, .review-layout > .eval-bar-wrap { align-self: flex-start; }
.analysis-layout > .eval-bar-wrap .eval-bar, .review-layout > .eval-bar-wrap .eval-bar { height: 400px; min-height: 0; }
@media (max-width: 640px) {
  .wrap .analysis-layout, .wrap .review-layout { column-gap: 8px; row-gap: 16px; }
  .analysis-layout > .eval-bar-wrap, .review-layout > .eval-bar-wrap { flex: 0 0 14px; }
  .analysis-layout > .eval-bar-wrap .eval-bar, .review-layout > .eval-bar-wrap .eval-bar { width: 14px; height: calc(100vw - 50px); }
  .analysis-layout > .board-col, .review-layout > .board-col { flex: 1 1 calc(100% - 28px); width: calc(100% - 28px); min-width: 0; }
  .analysis-layout > .info-col, .review-layout > .info-col { flex: 1 1 100%; min-width: 0; }
}

/* ===================== Motion ===================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ===================== Premium, AI quota & ads ===================== */
.ai-quota { font-size: 0.78rem; color: var(--text-muted); margin: 6px 0 0; }
.ai-quota.empty { color: var(--error-text); font-weight: 600; }
.ai-quota a { font-weight: 700; }
.badge-premium { display: inline-block; background: var(--gradient-accent); color: #3b2300; font-weight: 800; font-size: 0.72rem; letter-spacing: 0.04em; padding: 3px 9px; border-radius: 999px; }
.badge-premium.sm { font-size: 0.62rem; padding: 2px 7px; }
.user-menu-panel a.premium-link { color: var(--accent-dark); }
@media (max-width: 860px) { .user-menu-panel a.premium-link { color: #fde68a; } }

/* fixed height so the page doesn't move when the ad arrives */
.ad-slot { position: relative; min-height: 120px; margin: 22px 0 0; padding: 14px 0 0; border-top: 1px dashed var(--border); text-align: center; overflow: hidden; }
.ad-label { position: absolute; top: 0; left: 0; font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.house-ad { display: flex; align-items: center; gap: 14px; margin: 22px 0 0; padding: 14px 18px; border-radius: var(--radius); background: linear-gradient(120deg, #fff7e6 0%, #fdf2ff 100%); border: 1px solid #f5d38b; color: var(--text); }
.house-ad:hover { text-decoration: none; border-color: var(--accent); box-shadow: var(--shadow-sm); }
.house-ad-ico { font-size: 1.6rem; }
.house-ad > span:nth-child(2) { flex: 1; min-width: 0; }
.house-ad-sub { display: block; font-size: 0.8rem; color: var(--text-muted); }
.house-ad-cta { font-weight: 700; color: var(--primary); white-space: nowrap; }

/* premium.php */
.premium-status { display: flex; gap: 24px; flex-wrap: wrap; justify-content: space-between; margin-bottom: 18px; }
.ps-label { font-size: 0.75rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.ps-plan { font-size: 1.4rem; font-weight: 800; }
.ps-sub { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; }
.ps-usage { font-size: 0.9rem; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-bottom: 18px; }
.plan-card .plan-name { font-weight: 800; font-size: 1.05rem; }
.plan-card .plan-price { font-size: 2rem; font-weight: 800; margin: 4px 0 8px; }
.plan-card .plan-price span { font-size: 0.9rem; font-weight: 600; color: var(--text-muted); }
.plan-card.featured { border: 2px solid var(--accent); background: linear-gradient(180deg, #fffaf0 0%, #fff 60%); }
.plan-list { margin: 0; padding-left: 18px; font-size: 0.9rem; line-height: 1.8; }
.month-options { display: flex; gap: 10px; flex-wrap: wrap; }
.month-opt { display: flex; align-items: center; gap: 8px; border: 2px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px; cursor: pointer; font-size: 0.85rem; line-height: 1.35; }
.month-opt:has(input:checked) { border-color: var(--primary); background: var(--primary-light); }
.manual-pay { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.pay-details td { padding: 3px 14px 3px 0; font-size: 0.9rem; }
.pay-qr { border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; }
.terms { font-size: 0.76rem; color: var(--text-muted); margin: 16px 0 0; }
.pay-status { font-size: 0.75rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: #eee; color: #555; }
.pay-status.paid { background: var(--success-bg); color: var(--success-text); }
.pay-status.pending { background: #fff3d6; color: #8a6d1f; }
.pay-status.failed, .pay-status.rejected { background: var(--error-bg); color: var(--error-text); }