/* ============================================================================
   Admin CMS - sidebar console, cyber-themed, mobile/touch friendly.
   Layered on top of style.css (shares the design tokens).
   ============================================================================ */

.admin-body { min-height: 100vh; }

/* ── Auth gate (login / setup) ── */
.auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.auth__card { position: relative; width: min(420px, 100%); padding: 40px 34px 34px; border-radius: 22px;
    background: rgba(18, 18, 32, 0.86); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--border-lit); box-shadow: var(--shadow), 0 0 70px rgba(108, 99, 255, 0.16);
    text-align: center; overflow: hidden; animation: auth-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
.auth__card::before { content: ''; position: absolute; inset-inline: 0; top: 0; height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), transparent); }
@keyframes auth-in { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: none; } }
.auth__brand { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.3px; color: var(--faint); margin-bottom: 20px; }
.auth__brand img { border-radius: 6px; }
.auth__logo { font-size: 44px; margin-bottom: 14px; filter: drop-shadow(0 0 22px rgba(108, 99, 255, 0.55)); }
.auth__title { font-size: 24px; font-weight: 900; margin-bottom: 8px; font-family: var(--font-head); }
.auth__sub { font-size: 14px; color: var(--muted); margin-bottom: 24px; }
.auth__form { display: flex; flex-direction: column; gap: 16px; text-align: start; }
.auth__form label { display: flex; flex-direction: column; gap: 7px; font-size: 13px; font-weight: 600; color: var(--muted); }
.auth__form input { padding: 13px 14px; border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, 0.3); border: 1px solid var(--border); color: var(--text); font-size: 16px; font-family: inherit; }
.auth__form input:focus { outline: none; border-color: var(--border-lit); box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.15); }
.auth__form label.auth__remember { flex-direction: row; align-items: center; gap: 9px; cursor: pointer;
    font-size: 13.5px; font-weight: 600; color: var(--muted); user-select: none; margin-top: -4px; }
.auth__form .auth__remember input { width: 17px; height: 17px; padding: 0; margin: 0; flex: 0 0 auto;
    accent-color: var(--accent); cursor: pointer; }
.auth__form .btn { margin-top: 6px; }
.auth__err { padding: 11px 14px; border-radius: var(--radius-sm); margin-bottom: 18px;
    background: rgba(248, 113, 113, 0.12); border: 1px solid rgba(248, 113, 113, 0.35);
    color: var(--danger); font-size: 13.5px; font-weight: 600; }
/* Same shape as the error, in the accent colour: the reset flow answers with a
   deliberately vague "if an address is configured, a link was sent", and that
   reads as reassurance rather than as a failure. */
.auth__ok { padding: 11px 14px; border-radius: var(--radius-sm); margin-bottom: 18px;
    background: rgba(74, 222, 128, 0.10); border: 1px solid rgba(74, 222, 128, 0.32);
    color: #4ade80; font-size: 13.5px; font-weight: 600; line-height: 1.6; }
/* "Forgot password" is a plain link under the form - it is a rescue path, not a
   second call to action competing with the sign-in button. */
.auth__forgot { margin-top: 14px; text-align: center; }
.auth__forgot-btn { background: none; border: 0; padding: 0; cursor: pointer;
    font-family: inherit; font-size: 13px; color: var(--faint); text-decoration: underline;
    text-underline-offset: 3px; }
.auth__forgot-btn:hover { color: var(--accent-3); }
.auth__forgot-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.auth__back { display: inline-flex; align-items: center; gap: 7px; margin-top: 22px;
    color: var(--faint); font-size: 13px; }
.auth__back .btn__arw { font-size: 1.05em; line-height: 1; opacity: .8; }
.auth__back:hover { color: var(--muted); }

/* ============================================================================
   CMS shell
   ============================================================================ */
.cms { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }

/* ── Top bar ── */
.cms__top { flex-shrink: 0; display: flex; align-items: center; gap: 14px; padding: 12px clamp(14px, 2.5vw, 22px);
    background: rgba(10, 10, 20, 0.92); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--border); z-index: 60; }
.cms__hamburger { display: none; width: 42px; height: 42px; flex-shrink: 0; border-radius: 11px; cursor: pointer;
    background: var(--surface-2); border: 1px solid var(--border); color: var(--text); font-size: 19px; }
.cms__brand { display: flex; align-items: center; gap: 12px; }
.cms__brand-logo { width: 42px; height: 42px; object-fit: contain; filter: drop-shadow(0 2px 8px rgba(108, 99, 255, 0.4)); }
.cms__title { font-family: var(--font-head); font-size: 18px; font-weight: 800; line-height: 1.1; }
.cms__subtitle { font-size: 11.5px; color: var(--faint); letter-spacing: 0.2px; }
.cms__actions { margin-inline-start: auto; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; justify-content: flex-end; }
.cms__save { box-shadow: 0 6px 18px rgba(108, 99, 255, 0.4); }

/* language pill (admin UI language) */
.cms__langpill { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); }
.cms__langpill-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
    font-size: 12.5px; font-weight: 700; color: var(--muted); }
.cms__langpill-btn img { border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15); }
.cms__langpill-btn.is-active { background: linear-gradient(135deg, var(--accent), #5b53e8); color: #fff; }

/* Interface-language switch, pinned to the bottom of the sidebar/drawer. */
.cms__sidefoot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border);
    display: flex; flex-direction: column; gap: 8px; }
.cms__sidefoot-label { font-size: 11.5px; font-weight: 700; color: var(--faint); letter-spacing: 0.2px; }
.cms__sidefoot .cms__langpill { width: 100%; }
.cms__sidefoot .cms__langpill-btn { flex: 1; justify-content: center; }
.cms__sideact { width: 100%; justify-content: center; }
.cms__logout { width: 100%; justify-content: center; }

/* ── Body: sidebar + main ── */
.cms__body { flex: 1; display: flex; min-height: 0; position: relative; }

/* Sidebar */
.cms__sidebar { flex-shrink: 0; width: 264px; display: flex; flex-direction: column; gap: 6px;
    padding: 16px 14px; overflow-y: auto; border-inline-end: 1px solid var(--border); background: rgba(8, 8, 16, 0.5); }
.cms__search { position: relative; margin-bottom: 8px; }
.cms__search-icon { position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); font-size: 13px; opacity: 0.7; pointer-events: none; }
.cms__search input { width: 100%; padding: 11px 12px; padding-inline-start: 34px; border-radius: 11px;
    background: rgba(0, 0, 0, 0.3); border: 1px solid var(--border); color: var(--text); font-size: 14px; font-family: inherit; }
.cms__search input:focus { outline: none; border-color: var(--border-lit); box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.13); }
.cms__nav { display: flex; flex-direction: column; gap: 3px; }
.cms__navitem { display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 13px; border-radius: 11px; cursor: pointer;
    background: transparent; border: 1px solid transparent; color: var(--muted); font-family: inherit; font-size: 14px; font-weight: 600;
    text-align: start; transition: background 0.14s, color 0.14s, border-color 0.14s; }
.cms__navitem:hover { background: var(--surface-2); color: var(--text); }
.cms__navitem.is-active { background: rgba(34, 211, 238, 0.1); border-color: rgba(34, 211, 238, 0.4); color: #fff;
    box-shadow: 0 0 20px rgba(34, 211, 238, 0.1) inset; }
.cms__navicon { font-size: 18px; flex-shrink: 0; width: 22px; text-align: center; }
.cms__navlabel { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cms__navbadge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.cms__navsep { height: 1px; background: var(--border); margin: 8px 6px; }
/* Section heading that separates content-editing from settings/management. */
.cms__navhead { display: flex; align-items: center; gap: 8px; padding: 4px 10px 6px;
    font-size: 11px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase;
    color: var(--faint); }
.cms__navhead::after { content: ''; flex: 1; height: 1px; background: var(--border); }
/* The settings section is separated by a single full-width divider above it -
   drop the heading's trailing rule here so it isn't a cluttered double line. */
.cms__navhead--gap { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
.cms__navhead--gap::after { display: none; }

.cms__scrim { display: none; position: fixed; inset: 0; z-index: 45; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(2px); }

/* Main */
.cms__main { flex: 1; min-width: 0; overflow-y: auto; padding: 20px clamp(16px, 3vw, 34px) 60px; }

.adm__flash { padding: 14px 18px; border-radius: var(--radius-sm); margin-bottom: 16px; font-weight: 600; font-size: 14.5px;
    cursor: pointer; transition: opacity 0.3s ease, transform 0.3s ease, margin 0.3s ease, padding 0.3s ease; overflow: hidden; }
.adm__flash.is-leaving { opacity: 0; transform: translateY(-8px); margin-bottom: 0; padding-top: 0; padding-bottom: 0; max-height: 0; }
.adm__flash--ok { background: rgba(74, 222, 128, 0.12); border: 1px solid rgba(74, 222, 128, 0.35); color: #4ade80; }
.adm__flash--err { background: rgba(248, 113, 113, 0.12); border: 1px solid rgba(248, 113, 113, 0.35); color: var(--danger); }

/* content-language toggle */
.cms__clang { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; }
.cms__clang-hint { font-size: 12.5px; color: var(--faint); font-weight: 600; margin-inline-end: 4px; }
.cms__clang-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 999px; cursor: pointer;
    background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); font-family: inherit; font-size: 13.5px; font-weight: 700; }
.cms__clang-btn img { border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15); }
.cms__clang-btn.is-active { background: rgba(108, 99, 255, 0.18); border-color: var(--border-lit); color: #fff; }

/* ── Panels ── */
.panel { display: none; animation: panel-in 0.25s ease; }
.panel.is-active { display: block; }
@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.panel__title { font-family: var(--font-head); font-size: 22px; font-weight: 800; margin-bottom: 20px;
    padding-bottom: 14px; border-bottom: 1px solid var(--border); }
/* Content-group header: title on one side, a "shown on site" toggle on the other. */
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.panel__head .panel__title { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.panel__toggle { flex: 0 0 auto; }
.panel__body { display: flex; flex-direction: column; gap: 22px; max-width: 820px; }
/* Group-level explainer (e.g. the list of {{tokens}} the legal documents accept).
   Reads as a calm hint card, not an error - hence the accent tint, not a colour. */
.panel__note { display: flex; align-items: flex-start; gap: 11px; margin: 0; padding: 14px 16px;
    border-radius: 13px; background: linear-gradient(180deg, rgba(108, 99, 255, 0.11), rgba(108, 99, 255, 0.05));
    border: 1px solid rgba(108, 99, 255, 0.28); color: var(--muted);
    font-size: 13px; line-height: 1.75; }
.panel__note-icon { flex: 0 0 auto; font-size: 15px; line-height: 1.5; }
/* Translation panels host two-column language cards, so give them extra room. */
.cms__content .panel__body { max-width: 960px; gap: 18px; }

/* Search mode: show every panel, hide non-matching fields */
.cms__main.is-searching .panel { display: block; }
.cms__main.is-searching .panel:not(.has-match) { display: none; }
.cms__main.is-searching .cms__clang { display: none; }
.fld[hidden] { display: none; }
.cms__noresults { display: none; color: var(--muted); font-size: 15px; padding: 30px 4px; text-align: center; }
.cms__main.is-searching .cms__noresults.is-shown { display: block; }

/* ── Collapsible field blocks (one per document, e.g. the legal pages) ── */
.fldgrp { border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); overflow: hidden; }
.fldgrp + .fldgrp { margin-top: -4px; }
.fldgrp__head { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none;
    padding: 14px 18px; font-weight: 800; color: var(--text); user-select: none;
    transition: background 0.15s; }
.fldgrp__head::-webkit-details-marker { display: none; }
.fldgrp__head:hover { background: var(--surface); }
.fldgrp__icon { font-size: 17px; line-height: 1; }
.fldgrp__label { font-size: 15.5px; }
.fldgrp__count { font-size: 11px; font-weight: 700; color: var(--faint); background: var(--surface);
    border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; }
/* Chevron sits at the far end and flips when the block opens. */
.fldgrp__chev { margin-inline-start: auto; font-size: 13px; color: var(--faint);
    transition: transform 0.18s ease; }
.fldgrp[open] .fldgrp__chev { transform: rotate(180deg); }
.fldgrp[open] .fldgrp__head { border-bottom: 1px solid var(--border); }
.fldgrp__body { display: flex; flex-direction: column; gap: 18px; padding: 18px; }

/* While searching, the blocks get out of the way - matches show as a flat list. */
.cms__main.is-searching .fldgrp { border: none; background: none; }
.cms__main.is-searching .fldgrp__head { display: none; }
.cms__main.is-searching .fldgrp__body { padding: 0; }

/* ── Fields (translation cards) ── */
.fld { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px 18px; border-radius: 14px;
    background: var(--surface); border: 1px solid var(--border); transition: border-color 0.15s, box-shadow 0.15s; }
.fld:focus-within { border-color: var(--border-lit); box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.1); }
.fld[hidden] { display: none; }
.fld__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding-bottom: 12px; border-bottom: 1px dashed var(--border); }
.fld__title { font-size: 15.5px; font-weight: 800; color: var(--text); }
/* Explains what a field feeds into - which document, which {{token}}. Sits
   between the title and the inputs so it is read before anything is typed. */
.fld__help { font-size: 12.5px; line-height: 1.65; color: var(--muted); margin: -4px 0 0; }
.fld__help code, .panel__note code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.94em; background: var(--surface-2); border: 1px solid var(--border);
    border-radius: 5px; padding: 1px 5px; }
.fld__type { font-size: 10.5px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: 0.03em;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; }

/* Both languages shown side by side so translation is obvious */
.fld__langs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fld__lang { display: flex; flex-direction: column; gap: 7px; transition: opacity 0.18s; }
.fld__langtag { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.fld__langtag img { border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15); }
/* The "editing language" toggle now *emphasises* the focused language and dims the
   other (still readable as a reference) instead of hiding it. */
.cms__main[data-clang="he"] .fld__lang[data-lang="en"],
.cms__main[data-clang="en"] .fld__lang[data-lang="he"] { opacity: 0.5; }
.cms__main[data-clang="he"] .fld__lang[data-lang="en"]:hover,
.cms__main[data-clang="he"] .fld__lang[data-lang="en"]:focus-within,
.cms__main[data-clang="en"] .fld__lang[data-lang="he"]:hover,
.cms__main[data-clang="en"] .fld__lang[data-lang="he"]:focus-within { opacity: 1; }

.fld input, .fld textarea { width: 100%; padding: 12px 13px; border-radius: 10px;
    background: rgba(0, 0, 0, 0.28); border: 1px solid var(--border); color: var(--text); font-size: 15px; font-family: inherit; resize: vertical; line-height: 1.6; }
.fld textarea { min-height: 110px; }
.fld input:focus, .fld textarea:focus { outline: none; border-color: var(--border-lit); box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.13); }

.fld__pick { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; cursor: pointer;
    background: rgba(34, 211, 238, 0.12); border: 1px solid rgba(34, 211, 238, 0.35); color: var(--accent-2);
    font-family: inherit; font-size: 12px; font-weight: 700; transition: background 0.15s; }
.fld__pick:hover { background: rgba(34, 211, 238, 0.2); }
.fld__preview { margin-top: 2px; }
.fld__preview img { max-height: 130px; width: auto; border-radius: 10px; border: 1px solid var(--border); }

/* ── Media manager ── */
.media-up { display: flex; gap: 14px; align-items: stretch; flex-wrap: wrap; margin-bottom: 6px; }
.media-up__drop { flex: 1; min-width: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 5px; padding: 22px; border-radius: 14px; cursor: pointer; text-align: center;
    background: rgba(0, 0, 0, 0.22); border: 2px dashed var(--border); transition: border-color 0.15s, background 0.15s; }
.media-up__drop:hover { border-color: var(--border-lit); background: rgba(108, 99, 255, 0.06); }
.media-up__drop.is-drag { border-color: var(--accent-2); background: rgba(34, 211, 238, 0.08); }
.media-up__drop.has-file { border-style: solid; border-color: rgba(74, 222, 128, 0.5); }
.media-up__icon { font-size: 26px; }
.media-up__text { font-size: 14.5px; font-weight: 700; color: var(--text); word-break: break-all; }
.media-up__hint { font-size: 12px; color: var(--faint); }
.media-up__btn { align-self: center; padding-inline: 30px; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-top: 8px; }
.media-item { display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: rgba(0, 0, 0, 0.24); border: 1px solid var(--border); }
.media-item__thumb { aspect-ratio: 16 / 10; background: #0a0a16; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.media-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.media-item__meta { display: flex; align-items: center; gap: 8px; padding: 10px 10px 6px; }
.media-item__path { flex: 1; min-width: 0; padding: 7px 9px; border-radius: 8px; font-size: 11.5px; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--border); color: var(--muted); }
.media-item__size { font-size: 11px; color: var(--faint); white-space: nowrap; }
.media-item__actions { display: flex; gap: 8px; padding: 0 10px 12px; }
.media-item__actions .btn { flex: 1; padding: 9px 8px; }
.media-copy.is-ok { color: #4ade80; border-color: rgba(74, 222, 128, 0.4); }
.media-empty { color: var(--muted); font-size: 14px; padding: 8px 2px; }

/* ── Settings (accessibility) form ── */
.set-form { display: flex; flex-direction: column; gap: 18px; max-width: 520px; }
.set-toggle { display: flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; }
.set-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.set-toggle__track { position: relative; flex-shrink: 0; width: 46px; height: 26px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); border: 1px solid var(--border); transition: background 0.18s; }
.set-toggle__dot { position: absolute; top: 2px; inset-inline-start: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform 0.18s; }
.set-toggle input:checked + .set-toggle__track { background: linear-gradient(135deg, var(--accent), #5b53e8); border-color: transparent; }
.set-toggle input:checked + .set-toggle__track .set-toggle__dot { transform: translateX(20px); }
html[dir="rtl"] .set-toggle input:checked + .set-toggle__track .set-toggle__dot { transform: translateX(-20px); }
.set-toggle input:focus-visible + .set-toggle__track { box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.3); }
.set-toggle__label { font-size: 14.5px; font-weight: 600; color: var(--text); }
.set-row { display: flex; gap: 16px; flex-wrap: wrap; }
.set-field { display: flex; flex-direction: column; gap: 7px; font-size: 13px; font-weight: 600; color: var(--muted); min-width: 180px; flex: 1; }
.set-field select { appearance: none; -webkit-appearance: none; color-scheme: dark;
    padding: 11px 14px; padding-inline-end: 40px; border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.28); border: 1px solid var(--border); color: var(--text); font-size: 15px; font-family: inherit; font-weight: 600; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239aa0b4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 13px center; background-size: 14px;
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s; }
html[dir="rtl"] .set-field select { background-position: left 13px center; }
.set-field select:hover { border-color: var(--border-lit); background-color: rgba(0, 0, 0, 0.36); }
.set-field select:focus { outline: none; border-color: var(--border-lit); box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.13); }
.set-field option { background-color: #15161f; color: var(--text); font-weight: 600; }
/* ── Number fields ────────────────────────────────────────────────────────────
   The browser's own stepper is a pair of grey nubs that ignore the theme and
   sit wherever the platform decides - visible and wrong on a dark panel. It is
   removed and replaced by our own, matching the stepper in the app's terminal
   screen so the two read as the same control.

   admin.js wraps every input[type=number] in .numfld and injects the buttons,
   so this applies to fields that do not exist yet. */
/* The wrapper and the field are both forced dir=ltr by admin.js, so "end" means
   the same edge for the padding below and for the buttons - the number and the
   stepper can never land on top of each other. */
.numfld { position: relative; display: block; direction: ltr; }
.numfld input[type="number"] {
    padding-inline-end: 34px;      /* the stepper's lane, plus breathing room */
    text-align: left;
    -moz-appearance: textfield;
    appearance: textfield;
}
.numfld input[type="number"]::-webkit-outer-spin-button,
.numfld input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Flashed when a field fills itself in (the SMTP port following the encryption
   choice), so the change is noticed rather than discovered later. */
.numfld input.is-autoset,
.set-field input.is-autoset { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.22); }

/* Its own lane at the end of the field, separated by a hairline so it reads as a
   control rather than as digits that ran into an icon. */
.numfld__spin {
    position: absolute; inset-block: 5px; right: 5px;
    display: flex; flex-direction: column; gap: 3px; width: 22px;
    border-inline-start: 1px solid var(--border); padding-inline-start: 4px;
}
.numfld__btn {
    flex: 1; min-height: 13px;
    display: flex; align-items: center; justify-content: center;
    padding: 0; border: none; border-radius: 4px; cursor: pointer;
    background: rgba(255, 255, 255, 0.05); color: var(--muted);
    transition: background 0.12s, color 0.12s;
}
.numfld__btn svg { width: 12px; height: 12px; display: block; }
.numfld__btn:hover { color: var(--text); background: rgba(108, 99, 255, 0.28); }
.numfld__btn:active { background: var(--accent); color: #fff; }
.numfld__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.numfld input[type="number"]:disabled + .numfld__spin .numfld__btn { opacity: 0.4; cursor: default; }

/* Text inputs inside a settings field, matching the select above them. */
.set-field input { width: 100%; padding: 11px 14px; border-radius: 10px;
    background: rgba(0, 0, 0, 0.28); border: 1px solid var(--border);
    color: var(--text); font-size: 15px; font-family: inherit; font-weight: 600;
    transition: border-color 0.15s, box-shadow 0.15s; }
.set-field input:focus { outline: none; border-color: var(--border-lit); box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.13); }
.set-field input::placeholder { color: var(--faint); font-weight: 500; }
/* A one-line form: a field and the button that acts on it, side by side. */
.set-form--inline { flex-direction: row; align-items: flex-end; flex-wrap: wrap; gap: 12px; max-width: 620px; }
.set-form--inline .btn { flex: 0 0 auto; }
.set-divider { height: 1px; background: var(--border); margin: 6px 0; }

/* ── Email test result ── */
/* The SMTP conversation, verbatim. Left-to-right and monospaced because it is
   protocol text, and scrollable because a full DATA block is long. */
.mailtest { margin-top: 18px; padding: 14px 16px; border-radius: 14px; max-width: 820px;
    border: 1px solid var(--border); background: var(--surface); }
.mailtest--ok   { border-color: rgba(74, 222, 128, 0.38); background: rgba(74, 222, 128, 0.07); }
.mailtest--fail { border-color: rgba(248, 113, 113, 0.38); background: rgba(248, 113, 113, 0.07); }
.mailtest__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; font-size: 14.5px; color: var(--text); }
.mailtest__meta { font-size: 12.5px; color: var(--muted); }
.mailtest__why { margin-top: 10px; padding: 10px 12px; border-radius: 9px; font-size: 13px; line-height: 1.6;
    background: rgba(248, 113, 113, 0.10); border: 1px solid rgba(248, 113, 113, 0.28); color: var(--text); }
.mailtest__log { margin-top: 12px; max-height: 340px; overflow: auto; padding: 12px 14px; border-radius: 10px;
    background: rgba(0, 0, 0, 0.34); border: 1px solid var(--border);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11.5px; line-height: 1.65;
    color: var(--muted); white-space: pre-wrap; word-break: break-word; }
.mailtest__log:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* Sidebar badge for a subsystem that is switched off. */
.cms__navbadge--off { background: rgba(248, 113, 113, 0.14); color: #fca5a5; }
.set-subtitle { font-size: 15px; font-weight: 800; font-family: var(--font-head); margin-bottom: 2px; }

/* ── Spacing modifiers ──
   These carry the handful of one-off margins the markup used to set inline. A
   style attribute cannot be nonced, and a hash does not cover it either, so the
   site's strict Content-Security-Policy blocks every one of them and says so in
   the console. A class costs nothing and is allowed. */
.set-subtitle--spaced { margin-top: 26px; }
.set-after { margin-top: 20px; }
.rel-note--flush { margin: 0 0 12px; }
.u-dim { opacity: 0.55; }

/* ── Password form ── */
.pw-form__help { font-size: 13.5px; color: var(--muted); line-height: 1.7; margin-bottom: 18px; max-width: 620px; }
.pw-form__help--tight { margin: 8px 0 12px; }
.pw-form { display: flex; flex-direction: column; gap: 14px; max-width: 360px; }
.pw-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.pw-form input { padding: 12px 13px; border-radius: 10px; background: rgba(0, 0, 0, 0.28); border: 1px solid var(--border); color: var(--text); font-size: 15px; font-family: inherit; }
.pw-form input:focus { outline: none; border-color: var(--border-lit); }

/* ── Releases (downloads) manager ── */
/* ── Release cards (version manager) ── */
.rel-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-top: 6px; }
.rel-card { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; border-radius: 16px;
    background: var(--surface); border: 1px solid var(--border); transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; }
.rel-card:hover { border-color: var(--border-lit); transform: translateY(-2px); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28); }
.rel-card--hidden { opacity: 0.62; }
.rel-card__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rel-card__ver { font-family: var(--font-head); font-size: 20px; font-weight: 900; color: var(--text); }
.rel-card__latest { font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px;
    background: linear-gradient(135deg, var(--accent), #5b53e8); color: #fff; }
.rel-card__vis { margin-inline-start: auto; font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.rel-card__vis--on { color: #4ade80; background: rgba(74, 222, 128, 0.12); }
.rel-card__vis--off { color: var(--faint); background: var(--surface-2); }
.rel-card__meta { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 12.5px; font-weight: 600; color: var(--faint); }
.rel-card__notes { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.55;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rel-card__sha { display: flex; align-items: center; gap: 6px; background: var(--surface-2);
    border: 1px solid var(--border); border-radius: 7px; padding: 3px 4px 3px 8px; }
.rel-card__sha code { flex: 1; min-width: 0; font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 10.5px; color: var(--faint); word-break: break-all; }
.rel-card__actions { display: flex; gap: 8px; margin-top: 4px; }
.rel-card__actions .btn { flex: 1; }
.rel-empty { color: var(--muted); font-size: 14px; padding: 10px 2px; }
.rel-note { padding: 14px 16px; border-radius: 12px; margin-bottom: 16px; font-size: 13.5px; line-height: 1.6;
    color: #fcd34d; background: rgba(250, 204, 21, 0.08); border: 1px solid rgba(250, 204, 21, 0.3); }

/* ── Release: multi-select + bulk delete ── */
.rel-bulkbar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin: 0 0 16px; padding: 11px 13px; border-radius: 14px;
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.16), rgba(239, 68, 68, 0.05));
    border: 1px solid rgba(248, 113, 113, 0.34);
    box-shadow: 0 12px 34px rgba(239, 68, 68, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.04); }
.rel-bulkbar__count { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 700; color: #fca5a5; }
.rel-bulkbar__count::before { content: '🗑'; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
    background: rgba(248, 113, 113, 0.16); border: 1px solid rgba(248, 113, 113, 0.3); font-size: 16px; }
.rel-bulkbar__count span { font-family: var(--font-head); font-size: 19px; font-weight: 900; color: #fecaca; }
.rel-bulkbar__clear { margin-inline-start: auto; background: none; border: none; cursor: pointer;
    font-size: 12.5px; font-weight: 700; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; padding: 6px 8px; border-radius: 8px; transition: color 0.15s, background 0.15s; }
.rel-bulkbar__clear:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.rel-bulkbar .btn { margin-inline-start: 0; box-shadow: 0 6px 18px rgba(239, 68, 68, 0.28); }

/* Custom-styled selection checkbox */
.rel-card__pick { position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; cursor: pointer; }
.rel-card__pick input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.rel-card__pickbox { width: 20px; height: 20px; border-radius: 7px; background: var(--surface-2);
    border: 1.5px solid var(--border); display: grid; place-items: center;
    transition: background 0.15s, border-color 0.15s, transform 0.1s; }
.rel-card__pickbox::after { content: '✓'; font-size: 13px; font-weight: 900; color: #fff; opacity: 0; transform: scale(0.5); transition: opacity 0.12s, transform 0.12s; }
.rel-card__pick:hover .rel-card__pickbox { border-color: var(--border-lit); }
.rel-card__pick input:focus-visible + .rel-card__pickbox { box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.3); }
.rel-card__pick input:checked + .rel-card__pickbox { background: #ef4444; border-color: #ef4444; }
.rel-card__pick input:checked + .rel-card__pickbox::after { opacity: 1; transform: scale(1); }
.rel-card:has(.rel-pick:checked) { border-color: rgba(248, 113, 113, 0.6);
    box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.4), 0 10px 30px rgba(248, 113, 113, 0.12); }

/* Copy buttons (SHA / changelog) */
.rel-copy { flex: 0 0 auto; width: 28px; height: 26px; border-radius: 7px; cursor: pointer; font-size: 13px; line-height: 1;
    background: var(--surface); border: 1px solid var(--border); color: var(--muted);
    display: grid; place-items: center; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.rel-copy:hover { background: rgba(108, 99, 255, 0.14); border-color: var(--border-lit); color: var(--text); }
.rel-copy.is-copied { background: rgba(74, 222, 128, 0.16); border-color: rgba(74, 222, 128, 0.5); color: #4ade80; }
.rel-card__log-wrap { position: relative; }
.rel-card__log-wrap .rel-copy--log { position: absolute; top: 8px; inset-inline-end: 8px; z-index: 1; }

/* Bulk-delete modal version list */
.rel-bulk-list { list-style: none; margin: 4px 0 0; padding: 10px 12px; max-height: 200px; overflow: auto;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px;
    display: flex; flex-wrap: wrap; gap: 6px; }
.rel-bulk-list li { font-family: var(--font-head); font-size: 12.5px; font-weight: 800; color: #fca5a5;
    background: rgba(248, 113, 113, 0.1); border: 1px solid rgba(248, 113, 113, 0.28); border-radius: 999px; padding: 3px 11px; }
.rel-card__log { margin: 0; }
.rel-card__log > summary { cursor: pointer; list-style: none; font-size: 12.5px; font-weight: 700; color: var(--muted);
    padding: 6px 10px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--border);
    display: inline-flex; align-items: center; gap: 6px; user-select: none; transition: color 0.15s, border-color 0.15s; }
.rel-card__log > summary::-webkit-details-marker { display: none; }
.rel-card__log > summary::before { content: '▸'; font-size: 11px; transition: transform 0.15s; }
.rel-card__log[open] > summary { color: var(--text); border-color: var(--border-lit); }
.rel-card__log[open] > summary::before { transform: rotate(90deg); }
.rel-card__log-body { margin: 10px 0 0; padding: 12px 14px; border-radius: 11px; background: rgba(0, 0, 0, 0.26);
    border: 1px solid var(--border); text-align: left; direction: ltr; white-space: pre-wrap; word-break: break-word;
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.65;
    color: var(--muted); max-height: 320px; overflow: auto; }

/* ── Registered users: card grid ── */
.user-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-top: 8px; }
.user-card { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; border-radius: 16px;
    background: var(--surface); border: 1px solid var(--border); transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; }
.user-card:hover { border-color: var(--border-lit); transform: translateY(-2px); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28); }
.user-card__top { display: flex; align-items: center; gap: 12px; }
.user-card__avatar { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
    font-family: var(--font-head); font-size: 18px; font-weight: 900; color: #fff;
    background: linear-gradient(135deg, var(--accent), #5b53e8); box-shadow: 0 6px 18px rgba(108, 99, 255, 0.35); }
.user-card__id { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; text-align: right; }
.user-card__name { font-size: 15.5px; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-card__name em { color: var(--faint); font-weight: 600; }
.user-card__email { display: block; text-align: right; font-size: 12.5px; color: var(--muted); text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; transition: color 0.15s; }
.user-card__email:hover { color: var(--accent); text-decoration: underline; }
.user-card__del { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; cursor: pointer; font-size: 15px;
    background: var(--surface-2); border: 1px solid var(--border); color: var(--faint);
    display: grid; place-items: center; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.user-card__del:hover { background: rgba(248, 113, 113, 0.14); border-color: rgba(248, 113, 113, 0.5); color: #f87171; }
.user-card__delform { flex: 0 0 auto; margin: 0; }
.user-card__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin: 0;
    padding-top: 12px; border-top: 1px solid var(--border); }
.user-card__fact { display: flex; flex-direction: column; gap: 4px; min-width: 0; text-align: right; }
.user-card__fact dt { font-size: 11px; font-weight: 700; color: var(--faint); }
.user-card__fact dd { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* LTR values (date / phone / employees) stay left-to-right but flush to the right edge for RTL layout. */
.user-card__fact dd[dir="ltr"] { text-align: right; }
.user-card__fact dd a { color: inherit; text-decoration: none; }
.user-card__fact dd a:hover { color: var(--accent); text-decoration: underline; }
.user-card__time { color: var(--muted); font-weight: 600; }
.user-card__time::before { content: '·'; margin: 0 5px; color: var(--faint); }

/* ── Release edit form (inside the modal) ── */
.rel-edit-form { display: flex; flex-direction: column; gap: 16px; text-align: start; }
.rel-edit-field { display: flex; flex-direction: column; gap: 7px; font-size: 13px; font-weight: 600; color: var(--muted); }
.rel-edit-field textarea { padding: 11px 13px; border-radius: 11px; background: rgba(0, 0, 0, 0.28);
    border: 1px solid var(--border); color: var(--text); font-size: 14px; font-family: inherit; line-height: 1.6; resize: vertical; }
.rel-edit-field textarea:focus { outline: none; border-color: var(--border-lit); box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.14); }
.rel-edit-field input { padding: 11px 13px; border-radius: 11px; background: rgba(0, 0, 0, 0.28);
    border: 1px solid var(--border); color: var(--text); font-size: 15px; font-weight: 700; font-family: var(--font-head); letter-spacing: 0.02em; }
.rel-edit-field input:focus { outline: none; border-color: var(--border-lit); box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.14); }
.rel-edit-hint { font-size: 11.5px; font-weight: 600; color: var(--faint); line-height: 1.5; }
.rel-edit-check { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; }
.rel-edit-check input { width: 18px; height: 18px; accent-color: var(--accent); }
#relEditVerLabel { color: var(--accent-3); font-family: var(--font-head); }

/* ── Delete + picker modals ── */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(4, 4, 10, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fade 0.2s ease; }
.modal__card { position: relative; width: min(440px, 100%); padding: 30px 28px; border-radius: 20px; text-align: center;
    background: rgba(20, 20, 36, 0.96); border: 1px solid rgba(248, 113, 113, 0.3); box-shadow: var(--shadow), 0 0 60px rgba(248, 113, 113, 0.14); animation: modal-in 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(16px) scale(0.96); } to { opacity: 1; transform: none; } }
.modal__icon { font-size: 40px; margin-bottom: 12px; }
.modal__title { font-size: 21px; font-weight: 800; margin-bottom: 10px; font-family: var(--font-head); }
.modal__text { font-size: 14px; color: var(--muted); line-height: 1.6; margin-bottom: 16px; }
.modal__preview { margin-bottom: 22px; }
.modal__preview img { max-height: 120px; width: auto; border-radius: 10px; border: 1px solid var(--border); margin-inline: auto; }
.modal__actions { display: flex; gap: 12px; justify-content: center; }
.modal__actions .btn { flex: 1; max-width: 180px; }
.modal__card--wide { width: min(720px, 100%); text-align: start; }
.modal__card--wide .modal__title { text-align: start; }
.picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; max-height: 52vh; overflow-y: auto; padding: 4px; margin-bottom: 20px; }
.picker__item { display: flex; flex-direction: column; gap: 8px; padding: 8px; border-radius: 12px; cursor: pointer; background: rgba(0, 0, 0, 0.24); border: 1px solid var(--border); font-family: inherit; text-align: start; transition: transform 0.12s, border-color 0.15s, background 0.15s; }
.picker__item:hover { transform: translateY(-3px); border-color: var(--border-lit); background: rgba(108, 99, 255, 0.08); }
.picker__thumb { display: block; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; background: #0a0a16; }
.picker__thumb img, .picker__thumb .illus, .picker__thumb svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.picker__label { font-size: 12px; font-weight: 600; color: var(--muted); word-break: break-all; }
.picker__tag { color: var(--accent-2); font-weight: 700; }

/* ── Mobile ── */
@media (max-width: 860px) {
    /* On phones the console becomes a normal document-scroll page with a
       STICKY top bar, so the bar stays pinned to the top through all
       scrolling (and browser/reflow zoom) instead of drifting away. */
    .cms { height: auto; min-height: 100dvh; overflow: visible; }
    .cms__top { position: sticky; top: 0; }
    .cms__body { display: block; }
    .cms__main { overflow: visible; }

    .cms__hamburger { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; }
    .cms__subtitle { display: none; }
    /* Drawer is fixed and pinned just below the sticky top bar - its height is
       measured into --cms-topbar-h by admin.js, so the drawer's top items are
       never clipped regardless of how tall the bar gets. */
    .cms__sidebar { position: fixed; top: var(--cms-topbar-h, 64px); bottom: 0; inset-inline-start: 0; z-index: 55;
        width: 280px; max-width: 82vw; padding-top: 16px;
        transform: translateX(-102%); transition: transform 0.25s ease; box-shadow: 20px 0 60px rgba(0, 0, 0, 0.5); }
    html[dir="rtl"] .cms__sidebar { transform: translateX(102%); }
    /* The open state must beat the RTL closed rule above (which has higher
       specificity than a lone .is-open), or the drawer never opens in Hebrew. */
    .cms__sidebar.is-open,
    html[dir="rtl"] .cms__sidebar.is-open { transform: translateX(0); }
    /* Dim only below the bar so the bar stays visible/tappable while open. */
    .cms__scrim { top: var(--cms-topbar-h, 64px); }
    .cms__scrim.is-open { display: block; }
    /* Sticky in-page bars must clear the sticky top bar, not hide behind it. */
    .rel-bulkbar { top: var(--cms-topbar-h, 64px); }
    /* Roomier tap targets on touch. */
    .cms__navitem { padding: 13px 14px; font-size: 15px; }
    /* Stack the two languages once there isn't room for a comfortable side-by-side. */
    .fld__langs { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 620px) {
    /* Two-row top bar: hamburger + brand on top, a compact action strip below. */
    .cms__top { flex-wrap: wrap; gap: 10px; row-gap: 12px; padding: 10px 14px; }
    .cms__brand-logo { width: 36px; height: 36px; }
    .cms__title { font-size: 16px; }
    /* Compact horizontal toolbar - one row that scrolls, so the top bar stays
       short. "Save" is first, hence always visible without scrolling. */
    .cms__actions {
        order: 3; width: 100%; margin-inline-start: 0;
        display: flex; flex-wrap: nowrap; gap: 8px;
        justify-content: flex-start; /* RTL: start = right edge */
        overflow-x: auto; overscroll-behavior-x: contain;
        padding-bottom: 3px; scrollbar-width: none;
    }
    .cms__actions::-webkit-scrollbar { display: none; }
    .cms__actions .btn { flex: 0 0 auto; white-space: nowrap; padding-block: 9px; }
    .cms__save span, .cms__save { font-size: 13px; }
    .media-up__btn { width: 100%; }
    .rel-cards { grid-template-columns: 1fr; }
    .rel-card__actions .btn { padding-block: 13px; }
    .user-cards { grid-template-columns: 1fr; }
    .modal { padding: 14px; align-items: flex-end; }
    .modal__card, .modal__card--wide { width: 100%; padding: 24px 20px; }
    .modal__actions { flex-direction: column-reverse; }
    .modal__actions .btn { max-width: none; }
    .btn { padding-block: 12px; }
}
/* Keep any modal usable on short/landscape phones - scroll instead of clipping. */
.modal__card, .modal__card--wide { max-height: 92vh; overflow-y: auto; }
.modal__text--em { font-weight: 700; color: var(--text); }

/* ============================================================================
   Push messages: composer + lightweight rich-text editor + saved list
   ============================================================================ */
.msg-form__langs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.msg-form__lang { display: flex; flex-direction: column; gap: 10px; }
.msg-form__title { padding: 11px 13px; border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, 0.28); border: 1px solid var(--border); color: var(--text); font-size: 15px; font-family: inherit; }
.msg-form__title:focus { outline: none; border-color: var(--border-lit); box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.15); }

.rte { border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(0, 0, 0, 0.28); overflow: hidden; }
.rte__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 7px 8px;
    background: var(--surface-2); border-bottom: 1px solid var(--border); }
.rte__btn { min-width: 30px; height: 30px; padding: 0 8px; border-radius: 8px; cursor: pointer;
    background: transparent; border: 1px solid transparent; color: var(--muted); font-size: 14px; font-weight: 800; }
.rte__btn:hover { background: var(--surface); color: var(--text); border-color: var(--border); }
.rte__btn.is-active { background: rgba(108, 99, 255, 0.22); color: #fff; border-color: var(--border-lit); }
.rte__btn[data-cmd="italic"] { font-style: italic; }
.rte__btn[data-cmd="underline"] { text-decoration: underline; }
.rte__color { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font-size: 14px;
    padding: 0 6px; height: 30px; border-radius: 8px; border: 1px solid transparent; color: var(--muted); }
.rte__color:hover { background: var(--surface); border-color: var(--border); }
.rte__colorinput { width: 22px; height: 22px; padding: 0; border: none; background: none; cursor: pointer; }
.rte__area { min-height: 130px; max-height: 340px; overflow-y: auto; padding: 12px 14px;
    color: var(--text); font-size: 15px; line-height: 1.6; font-family: inherit; }
.rte__area:focus { outline: none; }
.rte__area:empty::before { content: attr(data-ph); color: var(--faint); }
.rte__area a { color: var(--accent-3, #22d3ee); text-decoration: underline; }
.rte__area ul, .rte__area ol { padding-inline-start: 22px; margin: 6px 0; }

.msg-form__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.msg-form__spacer { flex: 1; }
.msg-form__editing { font-size: 13px; color: var(--muted); }
.msg-form__clear { background: none; border: none; color: var(--accent-3, #22d3ee); font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; }

.msg-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.msg-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); }
.msg-card__main { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.msg-card__title { font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-card__date { font-size: 12px; color: var(--faint); }
.msg-card__status { flex: 0 0 auto; font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px; letter-spacing: 0.3px; }
.msg-card__status.is-sent { background: rgba(34, 211, 238, 0.14); color: var(--accent-3, #22d3ee); }
.msg-card__status.is-draft { background: var(--surface-2); color: var(--muted); }
.msg-card__actions { display: flex; gap: 6px; flex: 0 0 auto; }

/* Styled "insert link" modal fields */
.msg-link__fields { display: flex; flex-direction: column; gap: 12px; text-align: start; margin: 4px 0 20px; }
.msg-link__field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.msg-link__field input { padding: 11px 13px; border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, 0.28); border: 1px solid var(--border); color: var(--text); font-size: 15px; font-family: inherit; }
.msg-link__field input:focus { outline: none; border-color: var(--border-lit); box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.15); }

@media (max-width: 720px) {
    .msg-form__langs { grid-template-columns: 1fr; }
    .msg-card { align-items: flex-start; }
    .msg-card__actions { width: 100%; }
    .msg-card__actions .btn { flex: 1; }
}

/* The mandatory-update switch. Tinted because it is the one control on this page
   that can stop every user from working, and it should not read like the
   visibility toggles sitting next to it. */
.set-form--danger {
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(251, 146, 60, .06);
    border: 1px solid rgba(251, 146, 60, .28);
}

/* Version picker for the mandatory-version switch. */
.fu-pick { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fu-pick__label { font-size: .86rem; font-weight: 600; color: var(--txt-2, #9aa4b2); }
.fu-pick__select {
    color-scheme: dark;
    min-width: 260px;
    padding: 9px 12px;
    border-radius: 10px;
    background: rgba(0, 0, 0, .25);
    border: 1px solid rgba(255, 255, 255, .14);
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    /* Tabular figures line the version numbers up without dragging the Hebrew
       into a monospace face that has no Hebrew glyphs to offer it. */
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}
.fu-pick__select option { background-color: #15161f; color: var(--text); font-weight: 600; }
.fu-pick__select:focus { outline: 2px solid rgba(251, 146, 60, .5); outline-offset: 1px; }

/* A note that needs to be read, not skimmed - used for the rollback warning. */
.rel-note--warn {
    background: rgba(251, 146, 60, .1);
    border-color: rgba(251, 146, 60, .35);
    color: #fcd9b0;
}

/* ── Sub-sections inside a panel ──
   The downloads panel carries three unrelated concerns - the public page, the
   in-app updater, and the version lock - and they were three bare forms stacked
   in a column, each ending in a full-width save button. Read as one wall. Each
   now sits in its own titled block, so the eye can find the switch it came for. */
.cms__sub {
    padding: 16px 18px 18px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .02);
    border: 1px solid var(--border);
}
.cms__sub + .cms__sub { margin-top: 14px; }
.cms__sub-title {
    margin: 0 0 4px;
    font-family: var(--font-head);
    font-size: 15px; font-weight: 800; color: var(--text);
}
.cms__sub-desc { margin: 0 0 14px; font-size: 12.5px; line-height: 1.6; color: var(--faint); }
/* The form fills the block, but its button is a button - not a banner. */
.cms__sub .set-form { max-width: none; gap: 14px; }
.cms__sub .set-form .btn { align-self: flex-start; }
/* The danger block keeps its tint, now as the section rather than the form. */
.cms__sub:has(.set-form--danger) {
    background: rgba(251, 146, 60, .06);
    border-color: rgba(251, 146, 60, .28);
}
.set-form--danger { padding: 0; border: none; background: none; }

/* ── Release retention picker ── */
.keep-pick { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.keep-pick__label { font-size: 13px; font-weight: 700; color: var(--muted); }
.keep-pick__select {
    appearance: none; -webkit-appearance: none; color-scheme: dark;
    min-width: 220px; padding: 9px 14px; padding-inline-end: 34px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background-color: var(--surface-2);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%239aa0b8' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat; background-position: left 12px center;
    color: var(--text); font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.keep-pick__select option { background-color: #15161f; color: var(--text); font-weight: 600; }
.keep-pick__select:hover { border-color: var(--accent); }
.keep-pick__select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99, 102, 241, .22); }
.keep-pick__now {
    padding: 5px 12px; border-radius: 999px;
    border: 1px solid var(--border); background: rgba(255, 255, 255, .03);
    font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap;
}
/* The consequence of the current choice, stated where the choice is made. */
.keep-note {
    margin: 0 0 4px; padding: 10px 13px; border-radius: 10px;
    font-size: 12.5px; line-height: 1.7;
}
.keep-note--warn { color: #fbbf24; background: rgba(251, 191, 36, .08); border: 1px solid rgba(251, 191, 36, .3); }
.keep-note--ok { color: #4ade80; background: rgba(74, 222, 128, .07); border: 1px solid rgba(74, 222, 128, .26); }