/* ════════════════════════════════════════════════════════════════════════════
   RecVard — theme layer (loaded after styles.css on every page, and after the
   admin panel's own styles). Softer depth, glass nav, palettes the visitor can
   pick (html[data-palette], set by /js/theme.js from the account menu), and the
   panel's look. Only tokens and looks live here; layouts stay in their pages.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  --radius: 14px;
  --radius-sm: 10px;
  /* Soft layered depth instead of the old hard offset shadow. */
  --lift: 0 1px 0 rgba(255,255,255,.04) inset, 0 6px 18px rgba(0,0,0,.32);
  --lift-lg: 0 1px 0 rgba(255,255,255,.05) inset, 0 14px 38px rgba(0,0,0,.45);
  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
  --ease: cubic-bezier(.2,.8,.2,1);
}

/* ── Palettes: chosen in the account menu. "auto" (no attribute) keeps the season colours. ──
   Each is two-toned: --accent and --accent2 are neighbouring hues (buttons and headings run a gradient across
   them), --season2 is the backdrop's second glow. Ids are stored per account, so they never get renamed. */
html[data-palette][data-palette] { --glow-a: var(--accent); --glow-b: var(--season2); }
html[data-palette="crimson"][data-palette] {
  --bg: #0d0708; --surface: #170c0e; --surface2: #211114; --border: #33181c; --border2: #4c2228;
  --accent: #ef3b2d; --accent2: #ff6a3d; --accent3: #ffae8f; --accent-ink: #fff; --accent-glow: rgba(239,59,45,.22);
  --season2: #ff2d6f; --text: #f8ecea; --muted: #b39a97; --muted2: #7c6461;
}
html[data-palette="midnight"][data-palette] {
  --bg: #060914; --surface: #0d1222; --surface2: #141b31; --border: #1f2945; --border2: #2e3c63;
  --accent: #5b8cff; --accent2: #8a6bff; --accent3: #c2b3ff; --accent-ink: #fff; --accent-glow: rgba(91,140,255,.22);
  --season2: #3dd6ff; --text: #e9eefb; --muted: #97a3c2; --muted2: #5f6b8b;
}
html[data-palette="emerald"][data-palette] {
  --bg: #04100b; --surface: #0a1913; --surface2: #10241b; --border: #183528; --border2: #234c3a;
  --accent: #1fd18a; --accent2: #8be36b; --accent3: #c8f5b4; --accent-ink: #03140c; --accent-glow: rgba(31,209,138,.2);
  --season2: #22c3c9; --text: #e7f6ee; --muted: #92b1a2; --muted2: #5d7b6d;
}
html[data-palette="violet"][data-palette] {
  --bg: #0b0714; --surface: #140e21; --surface2: #1c142e; --border: #2a1f43; --border2: #3d2d60;
  --accent: #a066ff; --accent2: #e15bff; --accent3: #f0b3ff; --accent-ink: #fff; --accent-glow: rgba(160,102,255,.22);
  --season2: #5b7bff; --text: #f1eafb; --muted: #a89bc2; --muted2: #6f638c;
}
html[data-palette="sunset"][data-palette] {
  --bg: #120907; --surface: #1d110c; --surface2: #281812; --border: #3a2219; --border2: #563325;
  --accent: #ff7a1a; --accent2: #ff4f8b; --accent3: #ffb3c9; --accent-ink: #1a0c00; --accent-glow: rgba(255,122,26,.22);
  --season2: #ffb020; --text: #f9ede5; --muted: #b89e8f; --muted2: #80685a;
}
html[data-palette="ocean"][data-palette] {
  --bg: #041014; --surface: #09191f; --surface2: #0f242c; --border: #163640; --border2: #214d5a;
  --accent: #19c3d6; --accent2: #3d8bff; --accent3: #a8d4ff; --accent-ink: #021216; --accent-glow: rgba(25,195,214,.2);
  --season2: #19d6a0; --text: #e6f5f7; --muted: #91afb5; --muted2: #5a7a80;
}
html[data-palette="rose"][data-palette] {
  --bg: #12080d; --surface: #1c0e15; --surface2: #27131d; --border: #3a1c2b; --border2: #55283f;
  --accent: #ff5c9a; --accent2: #ff8a6b; --accent3: #ffc2b0; --accent-ink: #fff; --accent-glow: rgba(255,92,154,.22);
  --season2: #c86bff; --text: #fbecf2; --muted: #bc9dab; --muted2: #846574;
}
html[data-palette="gold"][data-palette] {
  --bg: #0f0c06; --surface: #19140b; --surface2: #231c10; --border: #352a17; --border2: #4e3e22;
  --accent: #f5b631; --accent2: #ffd66b; --accent3: #fff0bf; --accent-ink: #1c1300; --accent-glow: rgba(245,182,49,.2);
  --season2: #ff7a3d; --text: #f8f2e6; --muted: #b5a68b; --muted2: #7d6f56;
}
html[data-palette="mono"][data-palette] {
  --bg: #09090a; --surface: #121214; --surface2: #1a1a1d; --border: #26262a; --border2: #3a3a40;
  --accent: #f1f1f3; --accent2: #c9c9d1; --accent3: #ffffff; --accent-ink: #0a0a0b; --accent-glow: rgba(255,255,255,.1);
  --season2: #8a8a94; --text: #f2f2f3; --muted: #a2a2aa; --muted2: #6b6b73;
}
/* A picked palette hides the season stripe under the nav (the badge and banner stay). */
html[data-palette][data-season] nav::after { display: none; }

/* ── Page base ── */
body {
  background:
    radial-gradient(1100px 560px at 10% -10%, color-mix(in srgb, var(--glow-a, var(--accent)) 16%, transparent), transparent 62%),
    radial-gradient(900px 520px at 100% -4%, color-mix(in srgb, var(--glow-b, var(--season2)) 11%, transparent), transparent 58%),
    radial-gradient(1200px 600px at 50% 120%, color-mix(in srgb, var(--glow-a, var(--accent)) 7%, transparent), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}
::selection { background: color-mix(in srgb, var(--accent) 70%, transparent); color: var(--accent-ink); }
:focus-visible { outline: none; box-shadow: var(--ring); }
* { scrollbar-width: thin; scrollbar-color: var(--border2) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 99px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--muted2); }
::-webkit-scrollbar-track { background: transparent; }

/* ── Nav: glass bar, pill links ── */
nav {
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: saturate(1.4) blur(16px);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  border-bottom: 1px solid color-mix(in srgb, var(--border2) 70%, transparent);
}
.nav-logo img { border-radius: 10px; box-shadow: 0 0 0 1px var(--border2), 0 4px 14px var(--accent-glow); }
.nav-links a { border-radius: 99px; transition: color .15s var(--ease), background .15s var(--ease); }
.nav-links a.active-link { box-shadow: none; border-radius: 99px; background: var(--accent-glow); color: var(--text); }
.nav-dc, .nav-link-btn, .nav-actions .nav-link-btn { border-radius: 99px; }
.nav-cta, .nav-actions .nav-cta {
  border-radius: 99px; border: 0; box-shadow: 0 6px 18px var(--accent-glow);
  background: linear-gradient(135deg, var(--accent), var(--accent2));
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 26px var(--accent-glow); }
.season-banner { background: color-mix(in srgb, var(--surface) 85%, transparent); backdrop-filter: blur(10px); }
.mobile-menu { background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(18px); }
.mobile-menu a { border-radius: 12px; }

/* ── Buttons ── */
.btn-primary, .btn-secondary, .btn-discord {
  border-radius: 99px; border: 0; padding: 12px 24px;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s, filter .18s;
}
.btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow: 0 8px 22px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.18); }
.btn-secondary { background: color-mix(in srgb, var(--surface2) 80%, transparent); border: 1px solid var(--border2); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.btn-discord { box-shadow: 0 8px 22px rgba(88,101,242,.28); }
.btn-primary:hover, .btn-secondary:hover, .btn-discord:hover { transform: translateY(-2px); }
.btn-primary:hover { box-shadow: 0 12px 30px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.2); filter: brightness(1.06); }
.btn-secondary:hover { border-color: var(--muted2); box-shadow: var(--lift); }
.btn-primary:active, .btn-secondary:active, .btn-discord:active { transform: translateY(0) scale(.98); box-shadow: none; }
.text-link { border-bottom-color: color-mix(in srgb, var(--accent) 45%, transparent); }

/* ── Surfaces: cards, panels, tiles get the same soft depth and a hover lift ── */
.card-flat, .live-panel, .steps, .motd-card, .photo-tile, .post, .room, .rcard, .froom, .featured,
.auth-card, .wrap > .card, .tile, .pic, .room-row, .types button {
  border-color: color-mix(in srgb, var(--border2) 80%, transparent) !important;
  box-shadow: var(--lift);
}
.live-panel, .featured, .auth-card { background: linear-gradient(180deg, color-mix(in srgb, var(--surface2) 55%, var(--surface)), var(--surface)); }
.photo-tile, .post, a.room, .rcard, .froom, .lift-hover {
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.photo-tile:hover, a.room:hover, .rcard:hover, .froom:hover, .lift-hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--lift-lg), 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent) !important;
}
.home-hero h1 em, .section-title em { background: linear-gradient(120deg, var(--accent2), color-mix(in srgb, var(--accent2) 45%, var(--season2)) 60%, var(--accent3)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.home-hero { border-bottom-color: transparent; }
.home-section { border-bottom: 0; position: relative; }
.home-section + .home-section::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(1100px, 90%); height: 1px;
  background: linear-gradient(90deg, transparent, var(--border2), transparent);
}
.section-label::before { border-radius: 3px; background: linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow: 0 0 10px var(--accent-glow); }
.steps li { transition: background .2s var(--ease); }
.steps li:hover { background: color-mix(in srgb, var(--surface2) 60%, transparent); }
.status-dot.up::before { animation: rv-pulse 2s infinite; }
@keyframes rv-pulse { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 45%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } }
footer { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--surface) 70%, transparent)); }

/* Forms on the small pages */
.auth-card input, .wrap input, .wrap textarea, .wrap select, .bar input, .bar select {
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.auth-card input:focus, .wrap input:focus, .wrap textarea:focus, .wrap select:focus, .bar input:focus, .bar select:focus {
  outline: none; border-color: var(--accent); box-shadow: var(--ring);
}
.auth-card button[type=submit], .wrap form button[type=submit] {
  border-radius: 99px; border: 0; background: linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow: 0 8px 22px var(--accent-glow);
}

/* Smooth page changes: the browser cross-fades from one page to the next and keeps the menu bar still
   (cross-document view transitions; browsers without them just load the page as before). */
@view-transition { navigation: auto; }
nav { view-transition-name: site-nav; }
.season-banner { view-transition-name: site-banner; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; animation-timing-function: var(--ease); }
::view-transition-group(site-nav), ::view-transition-group(site-banner) { animation-duration: 0s; }
/* The account corner keeps its place while it loads, so the links next to it don't jump. */
.nav-actions { min-width: 120px; justify-content: flex-end; }
.nav-actions:not(.ready) { visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .rp-pane:not([hidden]), .admin-wrap .panel.active { animation: rv-in .22s var(--ease) both; }
  @keyframes rv-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ── Account menu: theme swatches ── */
.acct-theme { padding: 8px 10px 4px; }
.acct-theme .lbl { font-size: .72rem; font-weight: 800; color: var(--muted2); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.acct-theme .sw { display: flex; flex-wrap: wrap; gap: 8px; }
.acct-theme button {
  width: 26px !important; height: 26px; padding: 0 !important; border-radius: 50% !important; border: 2px solid var(--border2) !important;
  cursor: pointer; flex: none; transition: transform .15s var(--ease), border-color .15s;
}
.acct-theme button:hover { transform: scale(1.12); }
.acct-theme button[aria-pressed="true"] { border-color: var(--text) !important; box-shadow: var(--ring); }
.mm-theme { padding: 10px 14px; }

/* ════════════════════════════════════════════════════════════════════════════
   Admin panel
   ════════════════════════════════════════════════════════════════════════════ */
.admin-wrap { max-width: 1360px; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; }
.admin-wrap .side {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface2) 60%, var(--surface)), var(--surface));
  border: 1px solid color-mix(in srgb, var(--border2) 80%, transparent); border-radius: 18px; padding: 14px 10px;
  box-shadow: var(--lift); max-height: calc(100vh - var(--nav-h) - 48px); overflow-y: auto;
}
.admin-wrap .side .who { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 6px 8px 14px; }
.admin-wrap .side .who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-wrap .side .who::before {
  content: ''; grid-row: span 2; width: 38px; height: 38px; border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent2)) center/cover; box-shadow: 0 6px 16px var(--accent-glow);
}
.admin-wrap .side .who.has-av::before { background-image: var(--who-av); }
.admin-wrap .tabcat { padding: 14px 12px 6px; font-size: .64rem; letter-spacing: .12em; }
.admin-wrap .tab { position: relative; gap: 11px; padding: 9px 12px; border-radius: 12px; font-size: .9rem; transition: background .15s var(--ease), color .15s var(--ease); }
.admin-wrap .tab .ico { width: 18px; height: 18px; flex: none; opacity: .75; }
.admin-wrap .tab:hover .ico, .admin-wrap .tab.active .ico { opacity: 1; }
.admin-wrap .tab.active { background: linear-gradient(90deg, var(--accent-glow), transparent); box-shadow: none; color: var(--text); }
.admin-wrap .tab.active::before { content: ''; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.admin-wrap .tab .count { background: linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow: 0 2px 8px var(--accent-glow); font-weight: 800; }
.admin-wrap .autoup, .admin-wrap .qs input { background: color-mix(in srgb, var(--bg) 70%, transparent); border-radius: 12px; }
.admin-wrap .cmdk-hint { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; margin: 0 0 10px; padding: 8px 10px; border-radius: 12px;
  border: 1px dashed var(--border2); color: var(--muted); font-size: .8rem; font-weight: 700; background: transparent; cursor: pointer; }
.admin-wrap .cmdk-hint:hover { border-color: var(--accent); color: var(--text); }

.admin-wrap section h1 { font-size: 1.9rem; letter-spacing: -.03em; }
.admin-wrap section .sub { max-width: 820px; }
.admin-wrap .card, .admin-wrap .stat, .admin-wrap .sys, .admin-wrap .rep, .admin-wrap .room, .admin-wrap .app, .admin-wrap .photo {
  border: 1px solid color-mix(in srgb, var(--border2) 75%, transparent); border-radius: 16px; box-shadow: var(--lift);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface2) 35%, var(--surface)), var(--surface));
}
.admin-wrap .app, .admin-wrap .photo, .admin-wrap .note { background: color-mix(in srgb, var(--surface2) 70%, var(--surface)); }
.admin-wrap .stat { position: relative; overflow: hidden; transition: transform .18s var(--ease), border-color .18s; }
.admin-wrap .stat::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--accent), transparent); opacity: .8; }
.admin-wrap .stat.good::after { background: linear-gradient(90deg, var(--ok), transparent); }
.admin-wrap .stat.hot::after, .admin-wrap .stat.bad::after { background: linear-gradient(90deg, var(--bad), transparent); }
.admin-wrap .stat.warn::after { background: linear-gradient(90deg, var(--warn), transparent); }
.admin-wrap .stat:hover { transform: translateY(-2px); border-color: var(--border2); }
.admin-wrap .stat .v { font-variant-numeric: tabular-nums; }

/* Old hard-coded near-black boxes follow the palette. */
.admin-wrap input, .admin-wrap select, .admin-wrap textarea, .admin-wrap .kv div, .admin-wrap .group, .admin-wrap .pick,
.admin-wrap .meter, .admin-wrap .autoup, .admin-wrap .wk-sum, .admin-wrap .backups .b, .admin-wrap .log, #acctTable tr.more td {
  background: color-mix(in srgb, var(--bg) 75%, var(--surface)) !important;
}
.admin-wrap input, .admin-wrap select, .admin-wrap textarea { border-radius: 12px; border-color: color-mix(in srgb, var(--border2) 85%, transparent); transition: border-color .15s, box-shadow .15s; }
.admin-wrap input:focus, .admin-wrap select:focus, .admin-wrap textarea:focus { border-color: var(--accent); box-shadow: var(--ring); outline: none; }
.admin-wrap .group { border-radius: 14px; }
.admin-wrap .kv div { border-radius: 12px; }

.admin-wrap .btn { border-radius: 12px; background: linear-gradient(135deg, var(--accent), var(--accent2)); color: var(--accent-ink); box-shadow: 0 6px 16px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.15);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), filter .15s; }
.admin-wrap .btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.08); }
.admin-wrap .btn:active:not(:disabled) { transform: scale(.97); }
.admin-wrap .btn.ghost { background: color-mix(in srgb, var(--surface2) 85%, transparent); color: var(--text); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.admin-wrap .btn.ok { background: linear-gradient(135deg, #1b8a4a, #23a95b); color: #fff; box-shadow: 0 6px 16px rgba(35,169,91,.25); }
.admin-wrap .btn.warn { background: linear-gradient(135deg, #b9740f, #d98e1f); color: #fff; box-shadow: 0 6px 16px rgba(217,142,31,.22); }
.admin-wrap .btn.danger { background: linear-gradient(135deg, #b3261e, #dc3b31); color: #fff; box-shadow: 0 6px 16px rgba(220,59,49,.25); }
.admin-wrap .btn.small { border-radius: 10px; }
.admin-wrap .subtabs button { transition: background .15s, color .15s, border-color .15s; }
.admin-wrap .subtabs button:hover { color: var(--text); border-color: var(--muted2); }
.admin-wrap .subtabs button.active { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: var(--accent-ink); box-shadow: 0 4px 12px var(--accent-glow); }

.admin-wrap table { border-collapse: separate; border-spacing: 0; }
.admin-wrap th { position: sticky; top: 0; z-index: 1; background: var(--surface); }
.admin-wrap tbody tr { transition: background .12s; }
.admin-wrap tbody tr:hover td { background: color-mix(in srgb, var(--surface2) 70%, transparent); }
.admin-wrap .chip { border-radius: 99px; }
.admin-wrap .avatar { border-radius: 24px; box-shadow: var(--lift); }
.admin-wrap .modal-back { backdrop-filter: blur(6px); }
.modal { border-radius: 18px !important; }
#toasts .toast { border-radius: 14px; backdrop-filter: blur(10px); background: color-mix(in srgb, var(--surface) 92%, transparent); }

/* Command palette (Ctrl+K) */
.cmdk-back { position: fixed; inset: 0; z-index: 450; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; }
.cmdk-back[hidden] { display: none; }
.cmdk { width: 100%; max-width: 560px; background: var(--surface); border: 1px solid var(--border2); border-radius: 18px; box-shadow: 0 30px 80px rgba(0,0,0,.6); overflow: hidden; animation: mpop .16s ease-out; }
.cmdk input { width: 100%; border: 0 !important; border-bottom: 1px solid var(--border) !important; border-radius: 0 !important; background: transparent !important; padding: 16px 18px !important; font-size: 1rem !important; box-shadow: none !important; }
.cmdk ul { list-style: none; margin: 0; padding: 6px; max-height: 52vh; overflow-y: auto; }
.cmdk li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; cursor: pointer; color: var(--muted); font-weight: 600; }
.cmdk li .ico { width: 18px; height: 18px; flex: none; }
.cmdk li small { margin-left: auto; color: var(--muted2); font-size: .74rem; }
.cmdk li[aria-selected="true"] { background: var(--accent-glow); color: var(--text); }
.cmdk .foot { display: flex; gap: 14px; padding: 8px 14px; border-top: 1px solid var(--border); font-size: .74rem; color: var(--muted2); }

/* Panel on phones: a drawer instead of a scrolling strip. */
.side-toggle { display: none; }
@media (max-width: 860px) {
  .admin-wrap { grid-template-columns: 1fr; }
  .side-toggle { display: inline-flex; align-items: center; gap: 8px; position: sticky; top: calc(var(--nav-h) + 8px); z-index: 20; margin-bottom: 10px; padding: 9px 14px; border-radius: 99px;
    border: 1px solid var(--border2); background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(10px); color: var(--text); font-weight: 800; font-size: .88rem; box-shadow: var(--lift); }
  .admin-wrap .side { position: fixed !important; top: 0; bottom: 0; left: 0; width: min(300px, 85vw); max-height: none; z-index: 420; display: block !important; overflow-y: auto;
    border-radius: 0 18px 18px 0; padding: 18px 12px; transform: translateX(-105%); transition: transform .25s var(--ease); }
  .admin-wrap .side .who { display: grid !important; }
  body.side-open .admin-wrap .side { transform: none; }
  .side-scrim { position: fixed; inset: 0; z-index: 410; background: rgba(0,0,0,.5); backdrop-filter: blur(3px); }
  .side-scrim[hidden] { display: none; }
  .admin-wrap .qs { display: block !important; }
}

/* Pages with a global button style (Settings, Apply, Appeal) shouldn't restyle the banner's close button. */
.season-banner .x { background: transparent !important; box-shadow: none !important; border: 0 !important; color: var(--muted) !important; margin: 0 0 0 8px !important; padding: 2px 8px !important; width: auto !important; font-size: 1rem !important; border-radius: 6px !important; }
.season-banner .x:hover { color: var(--text) !important; background: var(--surface2) !important; }


/* ── Dialogs (rvn-ui.js): the site's own confirm / prompt boxes ── */
.rvn-dlg-back { position: fixed; inset: 0; z-index: 600; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 16px; animation: rv-fadein .15s ease-out; }
.rvn-dlg-back[hidden] { display: none; }
.rvn-dlg { width: 100%; max-width: 440px; background: var(--surface); border: 1px solid var(--border2); border-top: 3px solid var(--accent); border-radius: 18px; padding: 22px; box-shadow: 0 30px 80px rgba(0,0,0,.6); animation: rv-pop .18s var(--ease); }
.rvn-dlg.warn { border-top-color: #e3a32b; } .rvn-dlg.danger { border-top-color: #e5483e; }
.rvn-dlg h3 { margin: 0 0 6px; font-size: 1.15rem; }
.rvn-dlg-text { margin: 0; color: var(--muted); font-size: .93rem; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.rvn-dlg-field { margin-top: 14px; position: relative; }
.rvn-dlg-field:empty { display: none; }
.rvn-input { width: 100%; box-sizing: border-box; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--border2); background: color-mix(in srgb, var(--bg) 75%, var(--surface)); color: var(--text); font: inherit; font-size: .95rem; }
textarea.rvn-input { min-height: 96px; resize: vertical; }
.rvn-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.rvn-input.bad { border-color: #e5483e; }
.rvn-count { text-align: right; font-size: .72rem; color: var(--muted2); margin-top: 4px; }
.rvn-dlg-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.rvn-btn { padding: 10px 18px; border-radius: 12px; border: 0; font: inherit; font-weight: 800; font-size: .9rem; cursor: pointer; color: var(--accent-ink); background: linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow: 0 6px 16px var(--accent-glow); }
.rvn-btn.ghost { background: var(--surface2); color: var(--text); border: 1px solid var(--border2); box-shadow: none; }
.rvn-btn.warn { background: linear-gradient(135deg, #b9740f, #d98e1f); color: #fff; }
.rvn-btn.danger { background: linear-gradient(135deg, #b3261e, #dc3b31); color: #fff; }
.rvn-btn[hidden] { display: none; }
@keyframes rv-fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes rv-pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

/* ── Reason picker (rvn-ui.js): premade + your saved reasons ── */
.rvn-rwrap { position: relative; display: block; flex: 1 1 auto; min-width: 0; }
.row > .rvn-rwrap { flex: 1 1 180px; }
.rvn-rwrap > input, .rvn-rwrap > textarea { padding-right: 38px !important; width: 100%; }
.rvn-rbtn { position: absolute; right: 6px; top: 8px; width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); background: transparent; border: 0; cursor: pointer; }
.rvn-rwrap > input + .rvn-rbtn { top: 50%; transform: translateY(-50%); }
.rvn-rbtn:hover { color: var(--text); background: var(--surface2); }
.rvn-reasons { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 650; max-height: 300px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border2); border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.55); padding: 6px; text-transform: none; letter-spacing: 0; }
.rvn-reasons.open { display: block; animation: rv-pop .14s var(--ease); }
.rvn-rh { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted2); padding: 8px 10px 4px; }
.rvn-ri { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; cursor: pointer; font-size: .88rem; font-weight: 600; color: var(--text); }
.rvn-ri:hover { background: var(--accent-glow); }
.rvn-ri span { flex: 1; min-width: 0; }
.rvn-rx { width: 22px; height: 22px; border-radius: 6px; border: 0; background: transparent; color: var(--muted2); cursor: pointer; font-size: 1rem; line-height: 1; }
.rvn-rx:hover { color: #ff8a80; background: var(--surface2); }
.rvn-rsave { margin-top: 4px; padding: 9px 10px; border-radius: 10px; border-top: 1px solid var(--border); color: var(--accent3); font-weight: 700; font-size: .84rem; cursor: pointer; }
.rvn-rsave:hover { background: var(--accent-glow); }