/**
 * Raiju Admin — Backend Styles
 * Imports shared tokens and components, then adds admin-specific styles.
 */

@import url('../css/raiju-admin-tokens.css');
@import url('../css/raiju-admin-components.css');


/* ============================================================
   BASE
   ============================================================ */

* {
    box-sizing: border-box;
}

/* Fluid root size: 14px below ~1100px, 16px around 1900px, 18px from ~2650px.
   Everything below is in rem, so type, spacing, controls, sidebar and the
   content width all scale together. Not shared with the public site. */
html {
    font-size: clamp(14px, 11.1px + 0.26vw, 18px);
    --rj-d: 1;
}

/* Density: "auto" follows the viewport, the user setting overrides it. */
@media (max-width: 1100px) {
    html:not([data-density]),
    html[data-density="auto"] { --rj-d: 0.85; }
}
@media (min-width: 1900px) {
    html:not([data-density]),
    html[data-density="auto"] { --rj-d: 1.08; }
}
html[data-density="compact"] { --rj-d: 0.8; }
html[data-density="comfortable"] { --rj-d: 1.12; }

body {
    font-family: var(--rj-font-sans);
    background: var(--rj-sidebar-bg);
    color: var(--rj-text);
    margin: 0;
    padding: 0;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--rj-primary);
    text-decoration: none;
}

a:hover {
    color: var(--rj-primary-hover);
}


/* ============================================================
   LOGIN / SETUP PAGE
   ============================================================ */

.login-page {
    display: grid;
    place-items: center;
    min-height: 100vh;
    background:
        radial-gradient(ellipse at 50% 0%, var(--rj-primary-subtle) 0%, transparent 70%),
        var(--rj-bg);
}

.login-page--background {
    background:
        linear-gradient(var(--login-overlay-color, color-mix(in srgb, var(--rj-bg) 86%, transparent)), var(--login-overlay-color, color-mix(in srgb, var(--rj-bg) 86%, transparent))),
        var(--login-image),
        var(--rj-bg);
    background-position: center;
    background-size: cover;
}

.login-page--split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    place-items: stretch;
    background: var(--rj-bg);
}

.login-media {
    display: none;
}

.login-page--split .login-media {
    display: block;
    min-height: 100vh;
    background-image: var(--login-image);
    background-position: center;
    background-size: cover;
}

.login-page--image-right .login-media {
    grid-column: 2;
}

.login-page--image-right .login-container {
    grid-column: 1;
    grid-row: 1;
}

.login-container {
    align-self: center;
    justify-self: center;
    background: var(--login-box-bg, var(--rj-bg-elevated));
    color: var(--login-box-text, var(--rj-text));
    padding: var(--rj-space-10) var(--rj-space-8);
    border-radius: var(--rj-radius-xl);
    box-shadow: var(--rj-shadow-lg);
    border: 1px solid var(--rj-border);
    width: 100%;
    max-width: 420px;
}

.login-container--plain {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.login-page--split .login-container {
    max-width: 420px;
}

.login-logo {
    display: flex;
    justify-content: center;
    margin-bottom: var(--rj-space-8);
}

.login-logo img {
    width: auto;
    max-width: 202px;
    height: auto;
    max-height: 77px;
    object-fit: contain;
}

/* Inline-SVG variant of the favicon — follows the admin primary color. */
.login-logo svg {
    width: 60px;
    height: 60px;
    color: var(--rj-primary);
}

.login-container h1 {
    margin: 0 0 var(--rj-space-1) 0;
    font-family: var(--rj-font-sans);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--login-box-text, var(--rj-text));
    text-align: center;
}

.site-name {
    color: var(--login-box-text, var(--rj-text-muted));
    margin: 0 0 var(--rj-space-6) 0;
    font-size: 0.875rem;
    text-align: center;
}

.login-container .form-group label {
    color: var(--login-box-text, var(--rj-text));
}

.login-container .btn-block {
    margin-top: var(--rj-space-8);
}

.back-link {
    margin-top: var(--rj-space-3);
    text-align: center;
}

.back-link a {
    color: var(--login-box-text, var(--rj-text-muted));
    font-size: 0.875rem;
    transition: color var(--rj-duration-fast) var(--rj-ease);
}

.back-link a:hover {
    color: var(--rj-primary);
}

.login-version {
    margin-top: var(--rj-space-3);
    text-align: center;
    font-size: 0.75rem;
    color: var(--login-box-text, var(--rj-text-muted));
    opacity: 0.8;
}

/* Password field with toggle */
.password-input-wrap {
    position: relative;
}

.password-input-wrap input {
    padding-right: 42px;
}

.password-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: var(--rj-space-1);
    cursor: pointer;
    color: var(--rj-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--rj-duration-fast) var(--rj-ease);
}

.password-toggle:hover {
    color: var(--rj-text);
}

.password-toggle .icon-eye-off {
    display: none;
}

.password-toggle.visible .icon-eye {
    display: none;
}

.password-toggle.visible .icon-eye-off {
    display: block;
}


/* ============================================================
   FORMS (legacy .form-group — used in login/setup/dashboard)
   ============================================================ */

.form-group {
    margin-bottom: var(--rj-space-5);
}

.form-group label {
    display: block;
    margin-bottom: var(--rj-space-2);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--rj-text);
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: var(--rj-space-2-5) var(--rj-space-3-5);
    border: 1px solid var(--rj-border);
    border-radius: var(--rj-radius-md);
    font-family: var(--rj-font-sans);
    font-size: var(--rj-text-md);
    color: var(--rj-text);
    background: var(--rj-bg-elevated);
    color-scheme: light;
    transition: border-color var(--rj-duration-fast) var(--rj-ease),
                box-shadow var(--rj-duration-fast) var(--rj-ease);
}

[data-site-theme="dark"] .form-group input,
[data-site-theme="dark"] .form-group textarea,
[data-site-theme="dark"] .form-group select {
    color-scheme: dark;
}

/* One control height for every single-line field (textareas keep their padding) */
.form-group input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]),
.form-group select {
    height: var(--rj-control-h);
    padding-block: 0;
}

.form-group input[type="date"]::-webkit-calendar-picker-indicator,
.form-group input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.form-group input[type="month"]::-webkit-calendar-picker-indicator,
.form-group input[type="time"]::-webkit-calendar-picker-indicator,
.form-group input[type="week"]::-webkit-calendar-picker-indicator {
    opacity: 0.72;
}

[data-site-theme="dark"] .form-group input[type="date"]::-webkit-calendar-picker-indicator,
[data-site-theme="dark"] .form-group input[type="datetime-local"]::-webkit-calendar-picker-indicator,
[data-site-theme="dark"] .form-group input[type="month"]::-webkit-calendar-picker-indicator,
[data-site-theme="dark"] .form-group input[type="time"]::-webkit-calendar-picker-indicator,
[data-site-theme="dark"] .form-group input[type="week"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.78;
}

.ce-input[type="date"],
.ce-input[type="time"],
.editor-input[type="date"],
.editor-input[type="time"] {
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 15px 15px;
    padding-right: 36px;
}

.ce-input[type="date"],
.editor-input[type="date"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}

.ce-input[type="time"],
.editor-input[type="time"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}

[data-site-theme="dark"] .ce-input[type="date"],
[data-site-theme="dark"] .editor-input[type="date"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23c7d2e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}

[data-site-theme="dark"] .ce-input[type="time"],
[data-site-theme="dark"] .editor-input[type="time"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23c7d2e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}

.ce-input[type="date"]::-webkit-calendar-picker-indicator,
.ce-input[type="time"]::-webkit-calendar-picker-indicator,
.editor-input[type="date"]::-webkit-calendar-picker-indicator,
.editor-input[type="time"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    cursor: pointer;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--login-box-text, var(--rj-text-muted));
}

/* Override browser autofill background */
.form-group input:-webkit-autofill,
.form-group input:-webkit-autofill:hover,
.form-group input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--rj-bg-elevated) inset;
    -webkit-text-fill-color: var(--rj-text);
    transition: background-color 5000s ease-in-out 0s;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--rj-border-focus, var(--rj-primary));
    box-shadow: 0 0 0 3px var(--rj-focus-ring, var(--rj-primary-muted));
}

.form-group textarea {
    min-height: 150px;
    font-family: inherit;
    resize: vertical;
}

.form-group.html-editor textarea {
    font-family: var(--rj-font-mono);
    font-size: 0.875rem;
    min-height: 300px;
}

.form-group select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23525252' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: var(--rj-space-10);
}

select:not([multiple]) {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23525252' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 8px;
    padding-right: var(--rj-space-10);
}

[data-site-theme="dark"] select:not([multiple]) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23c7d2e0' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: calc(var(--rj-z-toast) + 1);
    transform: translateY(calc(-100% - 24px)); /* fully off screen, shadow included */
    padding: var(--rj-space-2-5) var(--rj-space-3-5);
    border-radius: var(--editor-btn-radius, var(--rj-radius-md));
    background: var(--rj-primary);
    color: var(--rj-primary-contrast, #fff);
    font-weight: 700;
    text-decoration: none;
    box-shadow: none;
    transition: transform var(--rj-duration-fast) var(--rj-ease);
}

.skip-link:focus,
.skip-link:focus-visible {
    transform: translateY(0);
    box-shadow: var(--rj-shadow-lg);
    outline: 3px solid var(--rj-primary-muted);
    outline-offset: 2px;
}


/* ============================================================
   BUTTONS (legacy .btn — used throughout dashboard JS)
   ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--rj-space-2);
    height: var(--rj-control-h);
    padding: 0 var(--rj-space-5);
    border: 1px solid transparent;
    border-radius: var(--editor-btn-radius, var(--rj-radius-md));
    font-family: var(--rj-font-sans);
    font-size: var(--rj-text-md);
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--rj-duration-fast) var(--rj-ease),
                color var(--rj-duration-fast) var(--rj-ease),
                border-color var(--rj-duration-fast) var(--rj-ease),
                transform var(--rj-duration-fast) var(--rj-ease);
}

.btn:active {
    transform: scale(0.98);
}

.btn:focus-visible {
    outline: 2px solid var(--rj-primary);
    outline-offset: 2px;
}

.btn:disabled {
    opacity: 0.5;
    pointer-events: none;
}

.btn-spinner {
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: backup-spin 0.7s linear infinite;
}

.btn.is-loading {
    cursor: wait;
}

/* Primary: the fill colour carries the hover (brief lift, then a calm settle,
   see @keyframes rj-hover-fill); the glow is a sheen plus a soft shadow on
   top and disappears entirely under .rj-flat-buttons. */
.btn-primary {
    --rj-hover-from: var(--rj-primary);
    --rj-hover-peak: var(--rj-hover-lift);
    --rj-hover-to: var(--rj-hover-settle);
    background-color: var(--rj-primary);
    background-image: var(--rj-primary-sheen);
    color: var(--rj-text-on-primary);
    text-shadow: 0 1px 1px rgba(255,255,255,0.25), 0 -1px 1px rgba(0,0,0,0.15);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--rj-primary) 15%, transparent);
    transition: background-color var(--rj-duration-hover-out) ease-out,
                box-shadow var(--rj-duration-hover-out) ease-out,
                transform var(--rj-duration-fast) var(--rj-ease);
}

.btn-primary:hover {
    background-color: var(--rj-hover-settle);
    box-shadow: 0 4px 20px color-mix(in srgb, var(--rj-primary) 35%, transparent);
    animation: rj-hover-fill var(--rj-duration-hover-in) linear both;
    transition: box-shadow calc(var(--rj-duration-hover-in) * 0.4) var(--rj-ease),
                transform var(--rj-duration-fast) var(--rj-ease);
}

.btn-primary:active {
    background-color: var(--rj-primary-active);
    animation: none;
    transition-duration: var(--rj-duration-press);
}

/* Hover fill for every control: from the rest colour over a brighter peak to the
   settled hover colour. Each control sets the three custom properties. */
@keyframes rj-hover-fill {
    0% { background-color: var(--rj-hover-from); }
    36% { background-color: var(--rj-hover-peak); }
    62% { background-color: var(--rj-hover-peak); }
    100% { background-color: var(--rj-hover-to); }
}

/* Glow off: no sheen, no shadow, no text shadow, in every state. The focus ring
   is an outline and stays. */
.rj-flat-buttons .btn-primary,
.rj-flat-buttons .btn-primary:hover,
.rj-flat-buttons .btn-primary:active {
    background-image: none;
    box-shadow: none;
    text-shadow: none;
}

/* Disabled and loading buttons keep their rest colour */
.btn:disabled,
.btn.is-loading,
.btn.is-loading:hover {
    animation: none;
    pointer-events: none;
}

.btn-secondary {
    --rj-hover-from: var(--rj-bg-elevated);
    --rj-hover-peak: var(--rj-hover-tint);
    --rj-hover-to: var(--rj-hover-tint-settle);
    background-color: var(--rj-bg-elevated);
    color: var(--rj-text);
    border-color: var(--rj-border-strong);
    transition: background-color var(--rj-duration-hover-out) ease-out,
                border-color var(--rj-duration-hover-out) ease-out,
                color var(--rj-duration-fast) var(--rj-ease),
                transform var(--rj-duration-fast) var(--rj-ease);
}

.btn-secondary:hover {
    background-color: var(--rj-hover-tint-settle);
    border-color: var(--rj-text-muted);
    animation: rj-hover-fill var(--rj-duration-hover-in) linear both;
}

.btn-secondary:active {
    background-color: var(--rj-hover-tint);
    animation: none;
    transition-duration: var(--rj-duration-press);
}

.btn-success {
    background: var(--rj-success);
    color: var(--rj-text-on-primary);
}

.btn-success:hover {
    background: #15803d;
}

.btn-danger {
    background: var(--rj-danger-btn);
    color: #ffffff;
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.15);
    position: relative;
    overflow: hidden;
    z-index: 0;
    transition: box-shadow 800ms var(--rj-ease) 250ms,
                transform var(--rj-duration-fast) var(--rj-ease);
}

.btn-danger::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--rj-danger-btn-hover);
    opacity: 0;
    transition: opacity 800ms var(--rj-ease) 250ms;
    z-index: -1;
}

.btn-danger:hover {
    box-shadow: 0 4px 20px rgba(220, 38, 38, 0.4);
    transition: box-shadow 800ms var(--rj-ease),
                transform var(--rj-duration-fast) var(--rj-ease);
}

.btn-danger:hover::after {
    opacity: 1;
    transition: opacity 800ms var(--rj-ease);
}

/* Flat danger buttons (glow disabled) */
.rj-flat-buttons .btn-danger {
    background: var(--rj-danger);
    box-shadow: none;
}

.rj-flat-buttons .btn-danger::after {
    display: none;
}

.rj-flat-buttons .btn-danger:hover {
    background: var(--rj-danger-hover);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.btn-sm {
    height: var(--rj-control-h-sm);
    padding: 0 var(--rj-space-3);
    font-size: var(--rj-text-sm);
}

.btn-block {
    display: flex;
    width: 100%;
    justify-content: center;
}


/* ============================================================
   ALERTS
   ============================================================ */

.error-message {
    background: var(--rj-danger-subtle);
    color: var(--rj-danger);
    padding: var(--rj-space-3) var(--rj-space-4);
    border-radius: var(--rj-radius-md);
    border: 1px solid rgba(220, 38, 38, 0.15);
    margin-bottom: var(--rj-space-5);
    font-size: 0.875rem;
    line-height: 1.5;
}

.success-message {
    background: var(--rj-success-subtle);
    color: var(--rj-success);
    padding: var(--rj-space-3) var(--rj-space-4);
    border-radius: var(--rj-radius-md);
    border: 1px solid rgba(22, 163, 74, 0.15);
    margin-bottom: var(--rj-space-5);
    font-size: 0.875rem;
    line-height: 1.5;
}

.info-message {
    background: var(--rj-warning-subtle);
    color: var(--rj-warning-text, #92400e);
    padding: var(--rj-space-3) var(--rj-space-4);
    border-radius: var(--rj-radius-md);
    border: 1px solid rgba(245, 158, 11, 0.2);
    margin-bottom: var(--rj-space-5);
    font-size: 0.875rem;
    line-height: 1.5;
}

.lockout-countdown {
    margin-top: var(--rj-space-2);
    font-size: 1.0625rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}


/* ============================================================
   PASSWORD WARNING BANNER
   ============================================================ */

/* Notice banner — used for inline editing hints and warnings. Top-level
   banners live at the top of .admin-main; contained banners sit inside cards. */
.info-banner {
    background: var(--rj-primary-medium);
    border-bottom: 2px solid var(--rj-primary);
    padding: var(--rj-space-3) var(--rj-space-5);
    /* Match .admin-main's top-left radius so the banner doesn't bleed past it. */
    border-top-left-radius: var(--rj-radius-xl);
}

.info-banner[hidden] {
    display: none;
}

.info-banner--warning {
    background: var(--rj-warning-subtle, #fffbeb);
    border-bottom-color: var(--rj-warning);
}

.info-banner--contained {
    margin: 0 0 var(--rj-space-4);
    border: 1px solid var(--rj-primary);
    border-radius: var(--rj-radius-xl);
}

.info-banner--contained.info-banner--warning {
    border-color: var(--rj-warning);
}

.info-banner--contained .info-banner__inner {
    max-width: none;
    margin: 0;
}

.info-banner__inner {
    max-width: 900px;
    margin: 0 auto;
    color: var(--rj-text);
    font-size: 0.9375rem;
    line-height: 1.5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rj-space-3);
    position: relative;
    padding-right: var(--rj-space-8);
}

.info-banner__title {
    color: var(--rj-text);
    display: inline-flex;
    align-items: center;
    gap: var(--rj-space-1-5);
    font-weight: 600;
}

.info-banner--warning .info-banner__inner,
.info-banner--warning .info-banner__title {
    color: var(--rj-warning-text-strong, #78350f);
}

.info-banner--warning .info-banner__body {
    color: var(--rj-warning-text, #92400e);
}

/* Text + CTA live inside a single inline wrapper, so the CTA reads as the
   end of the sentence rather than a button next to the close (×) icon. */
.info-banner__body {
    flex: 1 1 auto;
}

.info-banner__cta {
    color: var(--rj-primary, #3858e9);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    margin-left: 0.35em;
}

.info-banner--warning .info-banner__cta {
    color: var(--rj-warning-text-strong, #78350f);
    font-weight: 700;
}

.mail-config-banner {
    margin: 0 0 var(--rj-space-5);
    border: 1px solid color-mix(in srgb, var(--rj-warning) 38%, var(--rj-border));
    border-radius: var(--rj-radius-lg);
    padding: var(--rj-space-3) var(--rj-space-3-5);
}

.security-warning-banner {
    max-width: calc(var(--rj-content-max) - (var(--rj-space-6) * 2));
    margin: 0 auto var(--rj-space-6);
    padding-inline: 0;
    width: calc(100% - var(--rj-space-6) * 2);
}

.mail-config-banner .info-banner__inner {
    max-width: none;
    margin: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--rj-space-2-5);
    flex-wrap: nowrap;
    align-items: center;
    padding-right: 0;
}

.mail-config-banner .info-banner__icon {
    display: inline-flex;
    color: var(--rj-warning-text-strong, #78350f);
}

.mail-config-banner .info-banner__content {
    display: grid;
    gap: var(--rj-space-0-5);
    min-width: 0;
}

.mail-config-banner .info-banner__title {
    display: block;
    white-space: nowrap;
}

.mail-config-banner .info-banner__body {
    display: block;
    min-width: 0;
    color: var(--rj-warning-text, #92400e);
    overflow-wrap: anywhere;
}

.mail-config-banner .info-banner__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    border: 1px solid color-mix(in srgb, var(--rj-warning) 40%, transparent);
    border-radius: var(--rj-radius-md);
    padding: var(--rj-space-1) var(--rj-space-2-5);
    margin-left: 0;
    white-space: nowrap;
}

.mail-config-banner .info-banner__cta:hover {
    background: color-mix(in srgb, var(--rj-warning) 14%, transparent);
    text-decoration: none;
}

.info-banner__cta-button {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.info-banner__cta:hover {
    text-decoration: underline;
}

.info-banner__close {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    padding: var(--rj-space-1) var(--rj-space-2);
    font-size: 1.25rem;
    line-height: 1;
    color: var(--rj-text-muted, #6b7280);
    cursor: pointer;
    border-radius: var(--rj-radius-sm);
}

.info-banner__close:hover {
    background: rgba(0, 0, 0, 0.08);
    color: var(--rj-text);
}

/* Radio-group — used in settings forms for mutually exclusive options.
   Spec: needs to override .form-group label { display: block; margin-bottom: ... }. */
.form-group .form-group-label {
    display: block;
    margin-bottom: var(--rj-space-2);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--rj-text);
}

.radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--rj-space-2);
    margin-top: var(--rj-space-1);
}

.form-group label.radio-option {
    display: flex;
    align-items: center;
    gap: var(--rj-space-2-5);
    cursor: pointer;
    font-size: 0.9375rem;
    font-weight: 400;
    margin-bottom: 0;
    color: var(--rj-text);
}

.form-group label.radio-option input[type="radio"] {
    width: auto;
    margin: 0;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
}


/* ============================================================
   SIDEBAR LAYOUT
   ============================================================ */

.admin-body {
    display: flex;
    min-height: calc(100vh - var(--rj-topbar-h));
}

.admin-sidebar {
    width: var(--rj-sidebar-w);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    transition: transform var(--rj-duration-normal) var(--rj-ease);
    position: sticky;
    top: var(--rj-topbar-h);
    align-self: flex-start;
    height: calc(100vh - var(--rj-topbar-h));
}

.sidebar-top {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.sidebar-nav {
    padding: var(--rj-space-4) var(--rj-space-3);
    display: flex;
    flex-direction: column;
    gap: var(--rj-space-1);
}

.sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: var(--rj-space-3);
    padding: var(--rj-space-3) var(--rj-space-4);
    border: none;
    border-radius: var(--rj-radius-md);
    background: transparent;
    color: var(--rj-sidebar-text);
    font-family: var(--rj-font-sans);
    font-size: var(--rj-text-md);
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--rj-duration-fast) var(--rj-ease),
                color var(--rj-duration-fast) var(--rj-ease);
    text-decoration: none;
    width: 100%;
    text-align: left;
}

.sidebar-nav-item svg {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    opacity: 0.7;
    transition: opacity var(--rj-duration-fast) var(--rj-ease);
}

/* Menus brighten monochrome (a little of the text colour over the hover surface), not in the accent */
.sidebar-nav-item:not(.active):hover {
    --rj-hover-from: transparent;
    --rj-hover-peak: color-mix(in srgb, var(--rj-sidebar-text) 9%, var(--rj-sidebar-hover-bg));
    --rj-hover-to: var(--rj-sidebar-hover-bg);
    background: var(--rj-sidebar-hover-bg);
    color: var(--rj-sidebar-text-hover, var(--rj-sidebar-text-active));
    animation: rj-hover-fill var(--rj-duration-hover-in) linear both;
}

.sidebar-nav-item {
    transition: background-color var(--rj-duration-hover-out) ease-out,
                color var(--rj-duration-fast) var(--rj-ease);
}

.sidebar-nav-item:hover svg {
    opacity: 1;
}

.sidebar-nav-item:focus-visible {
    outline: 2px solid var(--rj-primary);
    outline-offset: 2px;
}

.sidebar-nav-item.active {
    background: var(--rj-sidebar-active-bg);
    color: var(--rj-sidebar-text-active);
}

.sidebar-nav-item.active svg {
    opacity: 1;
    color: var(--rj-sidebar-text-active);
}

.sidebar-nav-item.active:hover {
    background: var(--rj-sidebar-active-bg);
    filter: brightness(1.05);
}

/* Paper: no filled pill, a bar at the left edge marks the active item */
[data-theme-preset="paper"] .sidebar-nav-item.active {
    border-radius: 0;
    box-shadow: inset 3px 0 0 var(--rj-primary);
    font-weight: 600;
}

.sidebar-bottom {
    padding: var(--rj-space-3);
    border-top: 1px var(--rj-divider-style, solid) var(--rj-sidebar-border);
    display: flex;
    flex-direction: column;
    gap: var(--rj-space-1);
}

.sidebar-logout {
    color: var(--rj-sidebar-text);
    opacity: 0.8;
}

.sidebar-logout:hover {
    color: var(--rj-danger);
}

.sidebar-version {
    display: block;
    padding: var(--rj-space-3) var(--rj-space-4);
    font-size: calc(0.6875rem * var(--rj-font-scale));
    color: var(--rj-sidebar-text);
    opacity: 0.55;
    text-decoration: none;
    transition: opacity var(--rj-duration-fast) var(--rj-ease),
                color var(--rj-duration-fast) var(--rj-ease);
}

.sidebar-version:hover,
.sidebar-version:focus-visible {
    color: var(--rj-sidebar-text-hover, var(--rj-sidebar-text-active));
    opacity: 0.9;
}

.sidebar-version:focus-visible {
    outline: 2px solid var(--rj-primary);
    outline-offset: 2px;
    border-radius: var(--rj-radius-sm);
}


/* ============================================================
   MAIN CONTENT AREA
   ============================================================ */

.admin-main {
    flex: 1;
    min-width: 0;
    background: var(--rj-bg);
    border-radius: var(--rj-radius-xl) 0 0 0;
    box-shadow: -2px 0 12px rgba(0, 0, 0, 0.04);
}

.admin-main.has-security-warning {
    padding-top: var(--rj-space-6);
}

.admin-topbar {
    display: flex;
    align-items: center;
    gap: var(--rj-space-4);
    min-height: var(--rj-topbar-h);
    padding-block: var(--rj-space-2);
    padding-inline-start: var(--rj-space-6);
    /* Align .topbar-actions with the right edge of .admin-container's content.
       The container is centred inside .admin-main (viewport minus sidebar) and
       capped at --rj-content-max, so the free space right of it is half of
       (main width - container width); add the container's own side padding. */
    padding-inline-end: calc(
        (100% - var(--rj-sidebar-w) - min(100% - var(--rj-sidebar-w), var(--rj-content-max))) / 2
        + var(--rj-space-6)
    );
    background: var(--rj-topbar-bg);
    color: var(--rj-topbar-text);
    border-bottom: 1px solid var(--rj-topbar-border, transparent);
    position: sticky;
    top: 0;
    z-index: calc(var(--rj-z-sticky) - 1);
}

.topbar-brand {
    display: flex;
    align-items: center;
    gap: var(--rj-space-2);
    flex-shrink: 0;
}

.topbar-logo {
    width: 24px;
    height: 24px;
}

/* Frontend-logos sub-section inside the Branding settings. Visually
   separated from the Favicon block by a top border, but shares the
   surrounding card so the hierarchy stays flat (no card-in-card). */
.frontend-logos-block {
    margin-top: var(--rj-space-6);
    padding-top: var(--rj-space-5);
    border-top: 1px solid var(--rj-border);
}
.frontend-logos-block__title {
    margin: 0 0 var(--rj-space-1) 0;
    font-size: 0.9375rem;
    font-weight: 600;
}
.frontend-logos-block__hint {
    display: block;
    margin-bottom: var(--rj-space-5);
}
.frontend-logos-block .form-group:last-child {
    margin-bottom: 0;
}

/* Inline-SVG variant follows the admin primary color so it picks up
   the user's branding accent in both light and dark themes. */
svg.topbar-logo {
    color: var(--rj-primary);
}

.topbar-dashboard {
    font-family: var(--rj-font-display);
    font-size: var(--rj-text-lg);
    font-weight: 600;
    color: var(--rj-topbar-text);
    letter-spacing: -0.02em;
}

.topbar-title {
    margin: 0;
    font-family: var(--rj-font-sans);
    font-size: calc(0.9375rem * var(--rj-font-scale));
    font-weight: 500;
    color: var(--rj-topbar-text-muted);
    padding-left: var(--rj-space-4);
    border-left: 1px solid var(--rj-topbar-divider, var(--rj-border));
}

.topbar-selectors {
    display: flex;
    align-items: center;
    gap: var(--rj-space-2);
    margin-left: auto;
}

.topbar-select {
    height: var(--rj-control-h-sm);
    padding: 0 30px 0 var(--rj-space-2-5);
    border: 1px solid var(--rj-border);
    border-radius: var(--rj-radius-full);
    font-family: var(--rj-font-sans);
    font-size: var(--rj-text-sm);
    color: var(--rj-text);
    background: var(--rj-bg-elevated);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23525252' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    transition: border-color var(--rj-duration-fast) var(--rj-ease),
                box-shadow var(--rj-duration-fast) var(--rj-ease);
}

.topbar-select:focus {
    outline: none;
    border-color: var(--rj-primary);
    box-shadow: 0 0 0 3px var(--rj-primary-muted);
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: var(--rj-space-3);
    margin-left: auto;
    padding-left: var(--rj-space-4);
    border-left: 1px solid var(--rj-topbar-divider, var(--rj-border));
    flex-shrink: 0;
}

.topbar-viewsite {
    display: flex;
    align-items: center;
    gap: var(--rj-space-2);
    color: var(--rj-topbar-text-muted);
    font-size: var(--rj-text-sm);
    font-weight: 500;
    text-decoration: none;
    transition: color var(--rj-duration-fast) var(--rj-ease);
    white-space: nowrap;
}

.topbar-viewsite:hover {
    color: var(--rj-primary);
}

.sidebar-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: var(--rj-control-h-sm);
    height: var(--rj-control-h-sm);
    border: none;
    border-radius: var(--rj-radius-md);
    background: transparent;
    color: var(--rj-topbar-text-muted);
    cursor: pointer;
    padding: 0;
    transition: background-color var(--rj-duration-fast) var(--rj-ease);
}

.sidebar-toggle:hover {
    background: var(--rj-bg-hover);
}

.sidebar-toggle svg {
    width: 20px;
    height: 20px;
}


/* ============================================================
   MAIL BADGE
   ============================================================ */

.mail-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--rj-radius-full);
    background: var(--rj-brand);
    color: var(--rj-text-on-primary);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    margin-left: auto;
    box-shadow: 0 0 0 2px var(--rj-brand-subtle);
}

.media-library-page {
    min-height: calc(100vh - 88px);
    display: flex;
    flex-direction: column;
}

.media-library-mount {
    min-height: calc(100vh - 168px);
    flex: 1;
    display: flex;
}

.mail-badge--hidden {
    display: none;
}


/* ============================================================
   ADMIN CONTAINER
   ============================================================ */

.admin-container {
    max-width: var(--rj-content-max);
    margin-inline: auto;
    padding: var(--rj-space-6);
}


/* Mobile page selectors (shown only on mobile) */
.mobile-selectors {
    display: none;
    gap: var(--rj-space-2);
    flex-wrap: wrap;
    margin-bottom: var(--rj-space-4);
}

@media (max-width: 768px) {
    .mobile-selectors {
        display: flex;
    }
}


/* ============================================================
   PAGE LIST
   ============================================================ */

.page-list-container {
    margin-bottom: var(--rj-space-5);
}

.page-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--rj-space-4);
}

.page-list-header-left {
    display: flex;
    align-items: center;
    gap: var(--rj-space-3);
    --page-list-control-height: var(--rj-control-h-sm);
}

.page-list-header-left > .btn-sm {
    height: var(--page-list-control-height);
    padding-top: 0;
    padding-bottom: 0;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.page-list-search {
    display: inline-flex;
    align-items: center;
}

.page-list-search-input {
    width: min(18rem, 28vw);
    min-width: 13rem;
    height: var(--page-list-control-height);
    padding: 0 var(--rj-space-3);
    border: 1px solid var(--rj-border);
    border-radius: var(--rj-radius-md);
    color: var(--rj-text);
    background: var(--rj-bg-elevated);
    font: inherit;
    font-size: 0.8125rem;
    line-height: 1;
    transition: border-color var(--rj-duration-fast) var(--rj-ease),
                box-shadow var(--rj-duration-fast) var(--rj-ease),
                background var(--rj-duration-fast) var(--rj-ease);
}

.page-list-search-input::placeholder {
    color: var(--rj-text-muted);
}

.page-list-search-input:focus {
    outline: none;
    border-color: var(--rj-primary);
    box-shadow: 0 0 0 3px var(--rj-primary-subtle);
}

.page-list-header-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--rj-space-2);
}

.page-list-header h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.page-list-title-stack {
    display: grid;
    gap: 3px;
}

.page-list-title-stack p {
    max-width: 620px;
    margin: 0;
    color: var(--rj-text-muted);
    font-size: 0.8125rem;
    line-height: 1.4;
}

.page-list-header--mails {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--rj-space-4);
}

.page-list-header--mails .page-list-header-left {
    align-items: flex-start;
    min-width: 0;
}

.page-list-header--mails .page-list-header-actions {
    padding-top: var(--rj-space-0-5);
}

.mail-form-filter {
    min-width: 180px;
}

.mail-cell-form {
    color: var(--rj-text-muted);
    font-size: 0.8125rem;
}

.page-list-table-wrap {
    background: var(--rj-surface-panel, var(--rj-bg-elevated));
    border-radius: var(--rj-radius-lg);
    border: 1px solid var(--rj-border);
    box-shadow: none;
    overflow: hidden;
}

.admin-list-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rj-space-3);
    margin-top: var(--rj-space-3);
    color: var(--rj-text-muted);
    font-size: 0.75rem;
    line-height: 1.3;
}

.admin-list-footer--top {
    margin-top: 0;
    margin-bottom: var(--rj-space-2);
}

.admin-list-footer--grid {
    margin-top: var(--rj-space-4);
}

.admin-list-summary {
    min-width: 0;
}

.admin-pagination {
    display: inline-flex;
    align-items: center;
    gap: var(--rj-space-1);
    flex-wrap: wrap;
    justify-content: flex-end;
}

.admin-pagination__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    border: 1px solid var(--rj-border);
    border-radius: var(--rj-radius-md);
    background: var(--rj-bg-elevated);
    color: var(--rj-text);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    line-height: 1;
    padding: 0 var(--rj-space-2);
    transition: background var(--rj-duration-fast) var(--rj-ease),
                border-color var(--rj-duration-fast) var(--rj-ease),
                color var(--rj-duration-fast) var(--rj-ease),
                box-shadow var(--rj-duration-fast) var(--rj-ease);
}

.admin-pagination__btn--arrow {
    width: 28px;
    padding: 0;
}

.admin-pagination__btn svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.admin-pagination__btn:hover:not(:disabled),
.admin-pagination__btn:focus-visible {
    border-color: var(--rj-primary);
    color: var(--rj-primary);
    background: var(--rj-primary-subtle);
    box-shadow: 0 0 0 3px var(--rj-primary-subtle);
    outline: none;
}

.admin-pagination__btn.is-current {
    background: var(--rj-primary);
    border-color: var(--rj-primary);
    color: var(--rj-primary-contrast, #fff);
}

.admin-pagination__btn:disabled {
    cursor: default;
    opacity: .45;
}

.admin-pagination__ellipsis {
    color: var(--rj-text-muted);
    padding: 0 var(--rj-space-0-5);
}

.page-list-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.page-list-table thead th {
    text-align: left;
    padding: var(--rj-space-3) var(--rj-space-4);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rj-text-muted);
    background: var(--rj-bg-hover);
    border-bottom: 1px solid var(--rj-border);
}

.page-list-table tbody tr {
    border-bottom: 1px solid var(--rj-border);
    transition: background var(--rj-duration-fast) var(--rj-ease);
}

.page-list-table tbody tr:last-child {
    border-bottom: none;
}

.page-list-table tbody tr:hover {
    background: var(--rj-bg-hover);
}

.page-list-table td {
    padding: var(--rj-space-3) var(--rj-space-4);
    vertical-align: middle;
}

.page-list-empty {
    padding: var(--rj-space-8) var(--rj-space-4) !important;
    color: var(--rj-text-muted);
    text-align: center;
}

.page-list-col-title {
    min-width: 200px;
}

.page-list-col-date {
    min-width: 120px;
    white-space: nowrap;
}

.page-list-col-lang {
    width: 100px;
    text-align: center !important;
}

.page-list-cell-lang {
    text-align: center;
}

.page-list-cell-title {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.page-list-title-row {
    display: flex;
    align-items: center;
    gap: var(--rj-space-2);
    min-width: 0;
}

.page-list-title-link {
    font-weight: 600;
    color: var(--rj-text);
    text-decoration: none;
    transition: color var(--rj-duration-fast) var(--rj-ease);
}

.page-list-title-link:hover {
    color: var(--rj-primary);
}

.page-list-slug {
    font-size: 0.7rem;
    color: var(--rj-text-muted);
    font-family: var(--rj-font-mono);
    line-height: 1.3;
}

.page-list-cell-date {
    color: var(--rj-text-muted);
    white-space: nowrap;
}

/* WordPress-style hover action row */
.page-list-row-actions {
    display: flex;
    align-items: center;
    gap: var(--rj-space-0-5);
    margin-top: var(--rj-space-0-5);
    height: 20px;
    opacity: 0;
    transition: opacity var(--rj-duration-fast) var(--rj-ease);
}

.page-list-row:hover .page-list-row-actions {
    opacity: 1;
}

.page-list-row-action {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.75rem;
    color: var(--rj-text-muted);
    text-decoration: none;
    cursor: pointer;
    transition: color var(--rj-duration-fast) var(--rj-ease);
    white-space: nowrap;
}

.page-list-row-action:hover {
    color: var(--rj-primary);
}

.page-list-row-action--danger:hover {
    color: var(--rj-danger);
}

.page-list-row-action.disabled {
    opacity: 0.4;
    pointer-events: none;
}

.page-list-row-action svg {
    flex-shrink: 0;
}

.page-list-row-action-sep {
    color: var(--rj-border);
    font-size: 0.7rem;
    user-select: none;
    margin: 0 var(--rj-space-0-5);
}

/* Event status pills */
.events-status {
    display: inline-block;
    padding: var(--rj-space-0-5) var(--rj-space-2);
    border-radius: var(--rj-radius-full);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}

.events-status--upcoming {
    background: var(--rj-primary-subtle);
    color: var(--rj-primary);
}

.events-status--today {
    background: rgba(217, 119, 6, 0.12);
    color: var(--rj-warning, #d97706);
}

.events-status--past {
    background: var(--rj-bg-hover);
    color: var(--rj-text-muted);
}

.events-status--draft {
    background: var(--rj-bg-hover);
    color: var(--rj-text-muted);
    font-style: italic;
}

/* Unread mail row — emphasised typography */
.mail-row-unread .page-list-title-link,
.mail-row-unread td:nth-child(4) {
    font-weight: 700;
    color: var(--rj-text);
}

.mail-col-flag,
.mail-cell-flag {
    width: 34px;
    min-width: 34px;
    padding-left: var(--rj-space-2) !important;
    padding-right: var(--rj-space-2) !important;
    text-align: center !important;
}

.mail-header-sort,
.mail-flag-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: var(--rj-text-muted);
    cursor: pointer;
    font: inherit;
    line-height: 1;
    padding: 0;
}

.mail-header-sort {
    width: 100%;
    min-height: 18px;
    gap: var(--rj-space-0-5);
}

.mail-flag-btn {
    width: 24px;
    height: 24px;
    border-radius: var(--rj-radius-full);
    transition: color var(--rj-duration-fast) var(--rj-ease),
                background var(--rj-duration-fast) var(--rj-ease);
}

.mail-flag-btn:hover,
.mail-flag-btn:focus-visible {
    color: var(--rj-text);
    background: var(--rj-bg-hover);
    outline: none;
}

.mail-read-dot {
    width: 9px;
    height: 9px;
    border: 1.5px solid currentColor;
    border-radius: var(--rj-radius-full);
}

.mail-read-toggle.is-active {
    color: var(--rj-primary);
}

.mail-read-toggle.is-active .mail-read-dot {
    background: currentColor;
}

.mail-star-toggle {
    font-size: 1rem;
}

.mail-star-toggle.is-active {
    color: var(--rj-warning, #d97706);
}

/* Sortable column headers */
.page-list-sortable {
    cursor: pointer;
    user-select: none;
    transition: color var(--rj-duration-hover-out) ease-out,
                background-color var(--rj-duration-hover-out) ease-out;
}

.page-list-sortable:hover {
    color: var(--rj-text);
}

.page-list-sort-icon {
    font-size: 0.65rem;
    margin-left: var(--rj-space-0-5);
    opacity: 0.6;
}

.page-list-sortable.sorted .page-list-sort-icon {
    opacity: 1;
}

/* Edit button in language columns — small secondary button with icon */
.page-list-lang-btn {
    display: inline-flex !important;
    align-items: center;
    gap: var(--rj-space-1);
    padding: var(--rj-space-1) var(--rj-space-3) !important;
    font-size: 0.75rem !important;
}

.page-list-lang-btn svg {
    flex-shrink: 0;
}

/* Create link in language columns — plain text link */
.page-list-create-link {
    font-size: 0.75rem;
    color: var(--rj-text-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--rj-duration-fast) var(--rj-ease);
}

.page-list-create-link:hover {
    color: var(--rj-text-secondary);
}

.page-list-create-link.disabled {
    opacity: 0.4;
    pointer-events: none;
}

.page-list-cell-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--rj-space-2);
    white-space: nowrap;
}

.page-list-trash-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--rj-space-1);
}

.page-list-cell-slug {
    color: var(--rj-text-muted);
    font-size: var(--rj-text-xs);
    font-family: var(--rj-font-mono);
}

.trash-empty-msg {
    text-align: center;
    padding: var(--rj-space-6);
    color: var(--rj-text-muted);
}

/* Back to pages link */
.editor-back {
    margin-bottom: var(--rj-space-4);
}

.editor-back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--rj-space-2);
    font-size: 0.8125rem;
    color: var(--rj-text-muted);
    text-decoration: none;
    transition: color var(--rj-duration-fast) var(--rj-ease);
}

.editor-back-link:hover {
    color: var(--rj-primary);
}


/* ============================================================
   EDITOR CONTAINER
   ============================================================ */

.editor-container {
    background: var(--rj-surface-panel, var(--rj-bg-elevated));
    padding: var(--rj-space-5) var(--rj-space-6);
    border-radius: var(--rj-radius-lg);
    border: 1px solid var(--rj-border);
    box-shadow: none;
    margin-bottom: var(--rj-space-5);
}

.editor-header {
    position: sticky;
    top: calc(var(--rj-topbar-h) + 4px);
    z-index: calc(var(--rj-z-sticky) - 2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: calc(var(--rj-space-3) * -1);
    margin-bottom: var(--rj-space-5);
    padding-top: var(--rj-space-3);
    padding-bottom: var(--rj-space-4);
    border-bottom: 1px solid var(--rj-border);
    background: var(--rj-bg-elevated);
    backdrop-filter: blur(12px);
}

.editor-header::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -2px;
    height: calc(var(--rj-space-3) + 3px);
    background: var(--rj-bg-elevated);
    pointer-events: none;
    z-index: -1;
}

.editor-header h2 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
}

.editor-header-left {
    display: flex;
    align-items: center;
    gap: var(--rj-space-3);
    min-width: 0;
    overflow: hidden;
}

.editor-header-left h2 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.editor-header-right {
    display: flex;
    align-items: center;
    gap: var(--rj-space-4);
    flex-shrink: 0;
}

.editor-trash-btn {
    display: inline-flex !important;
    align-items: center;
    gap: var(--rj-space-1);
    color: var(--rj-text-muted) !important;
}

.editor-trash-btn:hover {
    color: var(--rj-danger) !important;
    border-color: var(--rj-danger) !important;
}

.last-modified {
    color: var(--rj-text-muted);
    font-size: 0.8125rem;
}

.editor-seo-health {
    display: inline-flex;
    align-items: center;
}

.seo-health-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--rj-space-1-5);
    max-width: 100%;
    padding: 3px var(--rj-space-2);
    border: 1px solid var(--rj-border);
    border-radius: 999px;
    background: var(--rj-bg-elevated);
    color: var(--rj-text);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.25;
    white-space: nowrap;
    outline: none;
}

.seo-health-badge--page-list {
    padding: var(--rj-space-0-5) 7px;
    font-size: 0.6875rem;
}

.seo-health-badge__dot {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--rj-warning);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.14);
}

.seo-health-badge--green .seo-health-badge__dot {
    background: var(--rj-success);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.14);
}

.seo-health-badge--yellow .seo-health-badge__dot {
    background: var(--rj-warning);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.16);
}

.seo-health-badge--red .seo-health-badge__dot {
    background: var(--rj-danger);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.14);
}

.seo-health-badge__score {
    color: var(--rj-text-muted);
}

.seo-health-badge__popover {
    position: absolute;
    z-index: 50;
    top: calc(100% + 8px);
    left: 0;
    width: min(320px, calc(100vw - 40px));
    padding: var(--rj-space-3) var(--rj-space-3-5);
    border-radius: var(--rj-radius-md);
    background: var(--rj-bg-elevated);
    color: var(--rj-text);
    border: 1px solid var(--rj-border);
    box-shadow: var(--rj-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-3px);
    transition: opacity var(--rj-duration-fast) var(--rj-ease), transform var(--rj-duration-fast) var(--rj-ease), visibility var(--rj-duration-fast) var(--rj-ease);
    pointer-events: none;
    white-space: normal;
}

.seo-health-badge__popover strong {
    display: block;
    margin-bottom: var(--rj-space-1-5);
}

.seo-health-badge__popover ul {
    margin: 0;
    padding-left: 18px;
}

.seo-health-badge__popover li + li {
    margin-top: var(--rj-space-1);
}

.seo-health-badge:hover .seo-health-badge__popover,
.seo-health-badge:focus-visible .seo-health-badge__popover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* ============================================================
   CONTENT EDITOR — GENERIC JSON RENDERER
   ============================================================ */

.ce-meta {
    display: flex;
    gap: var(--rj-space-5);
    padding: var(--rj-space-2) var(--rj-space-3);
    background: var(--rj-bg-sunken);
    border-radius: var(--rj-radius-md);
    margin-bottom: var(--rj-space-4);
    font-size: 0.8125rem;
    color: var(--rj-text-muted);
}

.ce-meta-item strong {
    color: var(--rj-text);
}

.ce-editor-shell {
    border: 1px solid var(--rj-border);
    border-radius: var(--rj-radius-lg);
    background: var(--rj-bg-elevated);
    overflow: visible;
}

.ce-editor-tabs {
    display: flex;
    align-items: center;
    gap: var(--rj-space-1);
    padding: var(--rj-space-2) var(--rj-space-3) 0;
    border-bottom: 1px solid var(--rj-border);
    border-radius: var(--rj-radius-lg) var(--rj-radius-lg) 0 0;
    background: var(--rj-bg);
}

.ce-editor-tab {
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--rj-text-muted);
    padding: var(--rj-space-2-5) var(--rj-space-3);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

.ce-editor-tab:hover {
    color: var(--rj-text);
}

.ce-editor-tab.active {
    color: var(--rj-primary);
    border-bottom-color: var(--rj-primary);
}

.ce-editor-panels {
    padding: var(--rj-space-4);
}

.ce-editor-panel {
    display: none;
}

.ce-editor-panel.active {
    display: block;
}

.ce-editor-panel[data-editor-panel="settings"] {
    display: none;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--rj-space-3);
}

.ce-editor-panel[data-editor-panel="settings"].active {
    display: grid;
}

.ce-editor-panel[data-editor-panel="seo"].active,
.ce-editor-panel[data-editor-panel="access"].active {
    display: grid;
    grid-template-columns: minmax(0, 720px);
}

.ce-content-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: var(--rj-space-4);
    align-items: start;
    margin-bottom: var(--rj-space-4);
}

.ce-section-nav {
    position: sticky;
    top: 76px;
    max-height: calc(100vh - 110px);
    overflow: auto;
    border: 1px solid var(--rj-border);
    border-radius: var(--rj-radius-md);
    background: var(--rj-bg);
}

.ce-section-nav__title {
    padding: var(--rj-space-2-5) var(--rj-space-3);
    border-bottom: 1px solid var(--rj-border);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rj-text-muted);
}

.ce-section-nav__tools {
    display: grid;
    gap: var(--rj-space-1-5);
    padding: var(--rj-space-2);
    border-bottom: 1px solid var(--rj-border);
}

.ce-section-nav__search,
.ce-section-nav__select {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--rj-border);
    border-radius: var(--rj-radius-sm);
    background: var(--rj-bg-elevated);
    color: var(--rj-text);
    font: inherit;
    font-size: 0.8125rem;
    padding: 7px var(--rj-space-2);
}

.ce-section-nav__search:focus,
.ce-section-nav__select:focus {
    outline: none;
    border-color: var(--rj-primary);
    box-shadow: 0 0 0 3px var(--rj-primary-muted);
}

.ce-section-nav__list {
    display: grid;
    gap: 1px;
    padding: var(--rj-space-1-5);
}

.ce-section-nav__empty {
    margin: 0;
    padding: var(--rj-space-2) 9px;
    color: var(--rj-text-muted);
    font-size: 0.8125rem;
}

.ce-section-nav__item {
    position: relative;
    display: block;
    padding: var(--rj-space-2) 9px;
    border-radius: var(--rj-radius-sm);
    color: var(--rj-text);
    text-decoration: none;
    font-size: 0.8125rem;
    line-height: 1.25;
}

.ce-section-nav__item:hover {
    background: var(--rj-bg-hover);
}

.ce-section-nav__item.is-active {
    background: color-mix(in srgb, var(--rj-primary) 16%, transparent);
    box-shadow: inset 3px 0 0 var(--rj-primary);
}

.ce-section-nav__item.is-filtered-out {
    opacity: 0.38;
    cursor: not-allowed;
    filter: grayscale(0.55);
}

.ce-section-nav__item.is-filtered-out:hover {
    background: transparent;
}

.ce-section-nav__item.is-filtered-out.is-active {
    background: transparent;
    box-shadow: none;
}

.ce-section-nav__item.is-dragging {
    opacity: 0.45;
}

.ce-section-nav__item.is-drop-target {
    outline: 1px solid var(--rj-primary);
    background: var(--rj-primary-muted);
}

.ce-section-nav__item[data-type="divider"] {
    color: var(--rj-text-muted);
}

.ce-section-nav__item[data-type="divider"] span {
    font-size: 0.75rem;
    font-weight: 500;
}

.ce-section-nav__item em {
    position: absolute;
    top: 7px;
    right: 7px;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    background: var(--rj-warning-subtle, rgba(245, 158, 11, 0.12));
    color: var(--rj-warning, #d97706);
    font-size: 0.6875rem;
    font-style: normal;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.ce-section-nav__item span {
    display: block;
    font-weight: 600;
    overflow-wrap: anywhere;
    word-break: normal;
}

.ce-section-nav__item small {
    display: -webkit-box;
    margin-top: var(--rj-space-0-5);
    color: var(--rj-text-muted);
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
}

.ce-section-editor__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--rj-space-3);
}

.ce-section-editor__header h3 {
    margin: 0;
    font-size: 1rem;
}

.ce-section-editor__header span {
    color: var(--rj-text-muted);
    font-size: 0.8125rem;
}

.ce-section-editor__tools {
    display: flex;
    align-items: center;
    gap: var(--rj-space-2);
}

.ce-section-editor__tools .btn.active {
    color: var(--rj-primary);
    border-color: var(--rj-primary);
    background: var(--rj-primary-muted);
}

.ce-empty-state {
    margin: 0;
    padding: var(--rj-space-4);
    border: 1px dashed var(--rj-border);
    border-radius: var(--rj-radius-md);
    color: var(--rj-text-muted);
}

/* Collapsible groups */
.ce-group {
    border: 1px solid var(--rj-border);
    border-radius: var(--rj-radius-md);
    margin-bottom: var(--rj-space-2);
    background: var(--rj-bg-elevated);
    overflow: hidden;
}

.ce-group--nested {
    border-color: var(--rj-border);
    margin-bottom: var(--rj-space-1);
}

.ce-group-header {
    display: flex;
    align-items: center;
    gap: var(--rj-space-2);
    padding: var(--rj-space-2) var(--rj-space-3);
    cursor: pointer;
    user-select: none;
    background: var(--rj-bg-hover);
    border-radius: var(--rj-radius-md) var(--rj-radius-md) 0 0;
    transition: background-color var(--rj-duration-fast) var(--rj-ease);
}

.ce-group-header:hover {
    background: var(--rj-bg-sunken);
}

.ce-group--nested .ce-group-header {
    padding: var(--rj-space-1-5) var(--rj-space-2-5);
    background: var(--rj-bg);
}

.ce-chevron {
    font-size: 0.7em;
    color: var(--rj-text-muted);
    width: 12px;
    text-align: center;
    flex-shrink: 0;
    transition: transform var(--rj-duration-fast) var(--rj-ease);
}

.ce-group-title {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--rj-text);
}

.ce-group--nested .ce-group-title {
    font-weight: 500;
    font-size: 0.8125rem;
}

.ce-group-count {
    font-size: 0.75rem;
    color: var(--rj-text-muted);
    margin-left: auto;
}

.ce-group-body {
    padding: var(--rj-space-2) var(--rj-space-3) var(--rj-space-3);
}

.ce-group--nested .ce-group-body {
    padding: var(--rj-space-1-5) var(--rj-space-2-5) var(--rj-space-2-5);
}

/* Fields */
.ce-field {
    display: flex;
    align-items: flex-start;
    gap: var(--rj-space-2-5);
    margin-bottom: var(--rj-space-1-5);
}

.ce-field-label {
    flex: 0 0 140px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--rj-text-muted);
    padding-top: 7px;
    text-align: right;
    word-break: break-word;
}

.ce-input {
    flex: 1;
    min-height: var(--rj-control-h-sm);
    padding: 0 var(--rj-space-2-5);
    border: 1px solid var(--rj-border);
    border-radius: var(--rj-radius-sm);
    font-size: 0.875rem;
    font-family: var(--rj-font-sans);
    color: var(--rj-text);
    background: var(--rj-bg-elevated);
    transition: border-color var(--rj-duration-fast) var(--rj-ease),
                box-shadow var(--rj-duration-fast) var(--rj-ease);
    min-width: 0;
}

.ce-input:focus {
    outline: none;
    border-color: var(--rj-primary);
    box-shadow: 0 0 0 3px var(--rj-primary-muted);
}

.ce-textarea {
    flex: 1;
    padding: var(--rj-space-1-5) var(--rj-space-2-5);
    border: 1px solid var(--rj-border);
    border-radius: var(--rj-radius-sm);
    font-size: 0.875rem;
    font-family: var(--rj-font-sans);
    color: var(--rj-text);
    background: var(--rj-bg-elevated);
    resize: vertical;
    min-height: 60px;
    line-height: 1.5;
    transition: border-color var(--rj-duration-fast) var(--rj-ease),
                box-shadow var(--rj-duration-fast) var(--rj-ease);
    min-width: 0;
}

.ce-textarea--manual-resize {
    flex: 0 0 auto;
    height: auto;
    min-height: 72px;
    overflow: auto;
    resize: none;
}

.ce-textarea-resize-handle {
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 18px;
    height: 18px;
    border-radius: var(--rj-radius-sm);
    cursor: ns-resize;
    opacity: 0.72;
}

.ce-textarea-resize-handle::before {
    content: "";
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 9px;
    height: 9px;
    background:
        linear-gradient(135deg, transparent 0 46%, var(--rj-text-muted) 47% 53%, transparent 54%),
        linear-gradient(135deg, transparent 0 68%, var(--rj-text-muted) 69% 75%, transparent 76%);
}

.ce-textarea-resize-handle:hover,
.ce-form-tile--resizable:focus-within .ce-textarea-resize-handle,
.ce-resizing-textarea .ce-textarea-resize-handle {
    opacity: 1;
}

.ce-resizing-textarea {
    user-select: none;
    cursor: ns-resize;
}

.ce-textarea:focus {
    outline: none;
    border-color: var(--rj-primary);
    box-shadow: 0 0 0 3px var(--rj-primary-muted);
}

.ce-checkbox {
    margin-top: 9px;
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--rj-primary);
}

/* Page Settings panel */
.ce-group--settings {
    margin-bottom: var(--rj-space-lg, var(--rj-space-6));
}

.ce-group--settings .ce-group-body {
    padding: var(--rj-space-3);
}

.ce-page-settings-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
    gap: var(--rj-space-3);
}

.ce-settings-card {
    border: 1px solid var(--rj-border);
    border-radius: var(--rj-radius-md);
    background: var(--rj-bg);
    overflow: hidden;
}

.ce-settings-card--seo {
    grid-row: span 2;
}

.ce-settings-card__header {
    padding: var(--rj-space-2-5) var(--rj-space-3);
    border-bottom: 1px solid var(--rj-border);
    background: var(--rj-bg-muted);
}

.ce-settings-card__header h4 {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 650;
    color: var(--rj-text);
}

.ce-settings-card__header p {
    margin: 3px 0 0;
    font-size: 0.75rem;
    color: var(--rj-text-muted);
    line-height: 1.35;
}

.ce-settings-card__body {
    padding: var(--rj-space-3);
}

.ce-settings-card__body .ce-field:last-child {
    margin-bottom: 0;
}

.ce-field--stacked {
    display: block;
}

.ce-form-tile {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.ce-form-tile--resizable {
    position: relative;
}

.ce-form-tile > span {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--rj-text-muted);
}

.ce-label-with-action {
    display: inline-flex;
    align-items: center;
    gap: var(--rj-space-1-5);
}

.ce-card-field-label {
    display: block;
    margin-bottom: 7px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--rj-text-muted);
}

.ce-card-field-hint {
    display: block;
    margin: -2px 0 8px;
}

.ce-form-tile--wide {
    grid-column: 1 / -1;
}

.ce-seo-grid,
.ce-visibility-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--rj-space-2-5);
}

.ce-seo-grid .ce-textarea,
.ce-visibility-grid .ce-textarea {
    min-height: 54px;
}

.ce-seo-grid .ce-textarea--manual-resize {
    min-height: 72px;
}

.ce-ai-seo-actions {
    display: flex;
    align-items: center;
    gap: var(--rj-space-2-5);
    margin-bottom: var(--rj-space-0-5);
}

.ce-ai-fill-all {
    display: inline-flex;
    align-items: center;
    gap: var(--rj-space-1-5);
}

.ce-ai-status {
    color: var(--rj-text-muted);
    font-size: 0.75rem;
}

.ce-ai-field-btn {
    display: inline-grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border: 1px solid var(--rj-border);
    border-radius: var(--rj-radius-sm);
    background: var(--rj-bg-elevated);
    color: var(--rj-primary);
    cursor: pointer;
    padding: 0;
    transition: border-color var(--rj-duration-fast) var(--rj-ease), background var(--rj-duration-fast) var(--rj-ease), color var(--rj-duration-fast) var(--rj-ease);
}

.ce-ai-field-btn:hover:not(:disabled) {
    border-color: var(--rj-primary);
    background: var(--rj-primary-subtle);
}

.ce-ai-field-btn:disabled,
.ce-ai-fill-all:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.ce-nav-check--standalone {
    grid-column: 1 / -1;
    padding-top: var(--rj-space-0-5);
}

.ce-input--sm {
    padding: var(--rj-space-1) var(--rj-space-2);
    font-size: 0.8125rem;
}

/* Nav location checkboxes */
.ce-nav-checkboxes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rj-space-2) var(--rj-space-3-5);
    min-height: 32px;
}

.ce-nav-check {
    display: flex;
    align-items: center;
    gap: var(--rj-space-1);
    font-size: 0.8125rem;
    cursor: pointer;
    white-space: nowrap;
}

.ce-nav-check input[type="checkbox"] {
    width: 15px;
    height: 15px;
    cursor: pointer;
    accent-color: var(--rj-primary);
}

.ce-nav-custom {
    flex: 1;
    min-width: 150px;
}

.ce-nav-custom-editor {
    margin-top: var(--rj-space-2);
}

.ce-nav-custom-editor > .btn,
#breadcrumbEditor > .btn {
    align-self: flex-start;
}

/* Breadcrumb editor */
.ce-breadcrumb-editor {
    display: flex;
    flex-direction: column;
    gap: var(--rj-space-1-5);
}

.ce-breadcrumb-row {
    display: flex;
    gap: var(--rj-space-1-5);
    align-items: center;
}

.ce-breadcrumb-row .ce-input--sm {
    flex: 1;
}

.ce-breadcrumb-row .ce-input--sm:first-child {
    flex: 1.2;
}

.ce-breadcrumb-remove {
    flex-shrink: 0;
    padding: 3px var(--rj-space-2);
    font-size: 1rem;
    line-height: 1;
}

/* Image preview */
.ce-image-preview {
    flex: 0 0 auto;
}

.editor-form-row--cover .ce-image-preview {
    margin-top: var(--rj-space-2-5);
}

.ce-image-preview img {
    max-height: 100px;
    max-width: 160px;
    border-radius: var(--rj-radius-sm);
    border: 1px solid var(--rj-border);
    object-fit: cover;
}

.editor-form-row--cover .ce-image-preview img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 190px;
    object-fit: contain;
    background: var(--rj-bg-sunken, #f5f5f5);
}

.ce-image-input-row {
    display: flex;
    gap: var(--rj-space-2);
    align-items: center;
    flex: 1;
}

.ce-image-input-row .ce-input {
    flex: 1;
}

.ce-image-input-row .btn {
    flex-shrink: 0;
    white-space: nowrap;
}

/* The path field sits beside a small button and takes its height */
.ce-image-input-row .editor-input,
.ce-image-input-row .ce-input {
    height: var(--rj-control-h-sm);
    min-height: var(--rj-control-h-sm);
    padding-block: 0;
}

/* Array items */
.ce-array-list {
    margin-bottom: var(--rj-space-2);
}

.ce-array-item {
    border: 1px solid var(--rj-border);
    border-radius: var(--rj-radius-sm);
    margin-bottom: var(--rj-space-1);
    background: var(--rj-bg-elevated);
}

.ce-array-item-header {
    display: flex;
    align-items: center;
    gap: var(--rj-space-2);
    padding: 5px var(--rj-space-2-5);
    background: var(--rj-bg-hover);
    border-radius: var(--rj-radius-sm) var(--rj-radius-sm) 0 0;
    font-size: 0.8125rem;
}

.ce-array-item-label {
    flex: 1;
    cursor: pointer;
    user-select: none;
    color: var(--rj-text);
    font-weight: 500;
}

.ce-preview-text {
    font-weight: 400;
    color: var(--rj-text-muted);
    font-size: 0.875rem;
}

.ce-array-item-actions {
    display: flex;
    gap: 3px;
    margin-left: auto;
}

.ce-array-item-actions .btn {
    padding: var(--rj-space-0-5) var(--rj-space-1-5);
    font-size: 0.75em;
    line-height: 1;
}

.ce-array-item-body {
    padding: var(--rj-space-2) var(--rj-space-2-5);
}

.ce-array-add {
    margin-top: var(--rj-space-1-5);
}

/* Inline array items (primitives) */
.ce-array-item > .ce-input {
    border: none;
    border-top: 1px solid var(--rj-border);
    border-radius: 0 0 var(--rj-radius-sm) var(--rj-radius-sm);
    padding: var(--rj-space-1-5) var(--rj-space-2-5);
}


/* ============================================================
   SECTIONS (legacy, if used)
   ============================================================ */

.section-item {
    scroll-margin-top: 150px;
    border: 1px solid var(--rj-border);
    border-radius: var(--rj-radius-md);
    padding: var(--rj-space-4);
    margin-bottom: var(--rj-space-4);
    background: var(--rj-bg);
    transition: border-color var(--rj-duration-fast) var(--rj-ease),
                box-shadow var(--rj-duration-fast) var(--rj-ease),
                opacity var(--rj-duration-fast) var(--rj-ease);
}

.section-item.is-active {
    border-color: color-mix(in srgb, var(--rj-primary) 58%, var(--rj-border));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--rj-primary) 26%, transparent);
}

.section-item.is-dragging {
    opacity: 0.45;
}

.section-item.is-drop-target {
    border-color: var(--rj-primary);
    box-shadow: 0 0 0 3px var(--rj-primary-muted);
}

.section-item[data-type="divider"] {
    padding-block: var(--rj-space-3);
    background: color-mix(in srgb, var(--rj-bg) 72%, var(--rj-bg-elevated));
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--rj-space-2-5);
    gap: var(--rj-space-3);
}

.section-heading {
    display: flex;
    align-items: center;
    gap: var(--rj-space-2);
    min-width: 0;
}

.section-drag-handle,
.section-toggle-btn {
    width: 24px;
    height: 24px;
    display: inline-grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: var(--rj-radius-sm);
    background: transparent;
    color: var(--rj-text-muted);
    cursor: pointer;
    flex: 0 0 auto;
}

.section-drag-handle {
    cursor: grab;
    font-size: 0.875rem;
    letter-spacing: -0.15em;
}

.section-drag-handle:active {
    cursor: grabbing;
}

.section-drag-handle:hover,
.section-toggle-btn:hover {
    color: var(--rj-text);
    border-color: var(--rj-border);
    background: var(--rj-bg-hover);
}

.section-index-label {
    width: 24px;
    height: 24px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: var(--rj-bg-elevated);
    color: var(--rj-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    flex: 0 0 auto;
}

.section-type {
    border: 1px solid color-mix(in srgb, var(--rj-primary) 48%, transparent);
    background: color-mix(in srgb, var(--rj-primary) 14%, transparent);
    color: color-mix(in srgb, var(--rj-primary) 84%, var(--rj-text));
    padding: var(--rj-space-0-5) 7px;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.35;
    flex: 0 0 auto;
}

.section-type.text {
    border-color: color-mix(in srgb, #08aab2 42%, transparent);
    background: color-mix(in srgb, #08aab2 14%, transparent);
    color: color-mix(in srgb, #08aab2 82%, var(--rj-text));
}

.section-type.soundcloud {
    border-color: color-mix(in srgb, #ff5500 38%, transparent);
    background: color-mix(in srgb, #ff5500 12%, transparent);
    color: color-mix(in srgb, #ff5500 78%, var(--rj-text));
}

.section-type.youtube {
    border-color: color-mix(in srgb, #ff3b30 38%, transparent);
    background: color-mix(in srgb, #ff3b30 12%, transparent);
    color: color-mix(in srgb, #ff3b30 78%, var(--rj-text));
}

.section-title-preview {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--rj-text-muted);
    font-size: 0.8125rem;
}

.section-issue-badge {
    flex: 0 0 auto;
    border: 1px solid color-mix(in srgb, var(--rj-warning, #d97706) 40%, transparent);
    border-radius: 999px;
    background: var(--rj-warning-subtle, rgba(245, 158, 11, 0.12));
    color: var(--rj-warning, #d97706);
    padding: var(--rj-space-0-5) 7px;
    font-size: 0.6875rem;
    font-weight: 700;
}

.section-actions {
    display: flex;
    gap: 5px;
}

.section-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rj-space-3) var(--rj-space-4);
}

.ce-content-layout--compact .section-item:not(.is-open) {
    padding-block: var(--rj-space-3);
}

.ce-content-layout--compact .section-item:not(.is-open) .section-header {
    margin-bottom: 0;
}

.ce-content-layout--compact .section-item:not(.is-open) .section-fields {
    display: none;
}

.ce-content-layout--compact .section-item:not(.is-open) .section-toggle-btn {
    transform: rotate(-90deg);
}

.section-fields .form-group {
    margin-bottom: 0;
}

.section-field-group--content,
.section-field-group--text,
.section-field-group--style {
    grid-column: 1 / -1;
}

.section-item[data-type="text"] .section-fields {
    grid-template-columns: minmax(0, 3fr) minmax(180px, 1fr);
}

.section-item[data-type="image"] .section-fields {
    grid-template-columns: minmax(280px, 0.52fr) minmax(0, 1fr);
    column-gap: calc(var(--rj-space-4) * 2);
    align-items: start;
}

.section-item[data-type="image"] .section-field-group--image,
.section-item[data-type="image"] .section-field-group--src {
    grid-row: span 3;
}

.section-item[data-type="image"] .section-field-group--caption,
.section-item[data-type="image"] .section-field-group--width {
    grid-column: 2;
}

.section-item[data-type="image"] .ce-image-preview {
    margin-bottom: var(--rj-space-2);
}

.section-item[data-type="image"] .ce-image-preview img {
    width: 100%;
    max-width: none;
    max-height: 150px;
}

.section-item[data-type="image"] .ce-image-input-row {
    align-items: flex-start;
    flex-direction: column;
}

.section-item[data-type="image"] .ce-image-input-row .ce-input {
    width: 100%;
}

.section-item[data-type="image"] .ce-image-input-row .btn {
    align-self: flex-start;
}


/* ============================================================
   BACKUPS
   ============================================================ */

.backup-container {
    background: var(--rj-surface-panel, var(--rj-bg-elevated));
    padding: var(--rj-space-5) var(--rj-space-6);
    border-radius: var(--rj-radius-lg);
    border: 1px solid var(--rj-border);
    box-shadow: none;
}

.backup-container h3 {
    margin: 0 0 var(--rj-space-4) 0;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rj-text-muted);
}

.backup-list {
    max-height: 300px;
    overflow-y: auto;
}

.backup-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--rj-space-3);
    border-bottom: 1px solid var(--rj-border);
}

.backup-item:last-child {
    border-bottom: none;
}

.backup-info {
    font-size: 0.875rem;
}

.backup-date {
    font-weight: 500;
}

.backup-time {
    color: var(--rj-text-muted);
    margin-left: var(--rj-space-2-5);
}

.backup-actions {
    display: flex;
    gap: 5px;
}


/* ============================================================
   MEDIA FIELDS
   ============================================================ */

.media-field {
    display: flex;
    gap: var(--rj-space-2-5);
    align-items: center;
}

.media-field input {
    flex: 1;
}

.media-field .id-input {
    max-width: 200px;
}

/* Add Section */
.add-section-container {
    margin-top: var(--rj-space-3);
    padding: var(--rj-space-4);
    border: 1px dashed var(--rj-border);
    border-radius: var(--rj-radius-md);
    background: var(--rj-bg);
}

.add-section-container p {
    margin: 0 0 var(--rj-space-3);
    color: var(--rj-text-muted);
    font-size: 0.875rem;
}

.ce-section-list:empty + .add-section-container {
    margin-top: 0;
}

.ce-section-list:not(:empty) + .add-section-container {
    border-top: 1px dashed var(--rj-border);
}

.ce-section-list[hidden] + .add-section-container {
    margin-top: 0;
}

.add-section-buttons {
    display: flex;
    gap: var(--rj-space-2-5);
    flex-wrap: wrap;
}

.ce-section-insert {
    position: relative;
    display: flex;
    justify-content: center;
    min-height: 14px;
    margin: -8px 0 2px;
}

.ce-section-insert[hidden] {
    display: none;
}

.ce-section-insert__trigger {
    opacity: 0;
    transform: translateY(-2px);
    border: 1px dashed var(--rj-border);
    border-radius: 999px;
    background: var(--rj-bg);
    color: var(--rj-text-muted);
    font: inherit;
    font-size: 0.75rem;
    padding: var(--rj-space-1) var(--rj-space-2-5);
    cursor: pointer;
    transition: opacity var(--rj-duration-fast) var(--rj-ease),
                transform var(--rj-duration-fast) var(--rj-ease),
                border-color var(--rj-duration-fast) var(--rj-ease),
                color var(--rj-duration-fast) var(--rj-ease),
                background-color var(--rj-duration-fast) var(--rj-ease);
}

.ce-section-insert:hover .ce-section-insert__trigger,
.ce-section-insert:focus-within .ce-section-insert__trigger,
.ce-section-insert:has(.ce-section-insert__menu:not([hidden])) .ce-section-insert__trigger {
    opacity: 1;
    transform: translateY(0);
}

.ce-section-insert__trigger:hover {
    border-color: var(--rj-primary);
    color: var(--rj-primary);
    background: var(--rj-primary-muted);
}

.ce-section-insert__menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--rj-z-dropdown, 1000);
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: var(--rj-space-1-5);
    width: min(360px, calc(100vw - 48px));
    padding: var(--rj-space-2);
    border: 1px solid var(--rj-border);
    border-radius: var(--rj-radius-md);
    background: var(--rj-bg-elevated);
    box-shadow: var(--rj-shadow-lg);
}

.ce-section-insert__menu[hidden] {
    display: none;
}

.ce-section-insert__menu button {
    border: 1px solid var(--rj-border);
    border-radius: var(--rj-radius-sm);
    background: var(--rj-bg);
    color: var(--rj-text);
    font: inherit;
    font-size: 0.8125rem;
    padding: 7px 9px;
    text-align: left;
    cursor: pointer;
}

.ce-section-insert__menu button:hover {
    border-color: var(--rj-primary);
    color: var(--rj-primary);
    background: var(--rj-primary-muted);
}


/* ============================================================
   NEWS / BLOG
   ============================================================ */

.news-item {
    padding: var(--rj-space-4) var(--rj-space-5);
    border-bottom: 1px solid var(--rj-border);
}

.news-item:last-child {
    border-bottom: none;
}

.news-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--rj-space-1-5);
}

.news-item-meta {
    display: flex;
    align-items: center;
    gap: var(--rj-space-3);
}

.news-item-date {
    font-size: 0.8125rem;
    color: var(--rj-text-muted);
}

.news-status {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--rj-space-0-5) var(--rj-space-2);
    border-radius: var(--rj-radius-full);
}

.news-published {
    background: var(--rj-success-subtle, rgba(16, 185, 129, 0.1));
    color: var(--rj-success, #10b981);
}

.news-draft {
    background: var(--rj-warning-subtle, rgba(245, 158, 11, 0.1));
    color: var(--rj-warning, #f59e0b);
}

.news-item-actions {
    display: flex;
    gap: var(--rj-space-2);
}

.news-item-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 var(--rj-space-1);
    color: var(--rj-text);
}

.news-item-excerpt {
    font-size: 0.875rem;
    color: var(--rj-text-muted);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-editor {
    padding: var(--rj-space-5);
}

.editor-form-grid {
    display: flex;
    flex-direction: column;
    gap: var(--rj-space-4);
}

.editor-form-grid--news {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(240px, 0.75fr);
    align-items: start;
}

.editor-form-row--span-2 {
    grid-column: span 2;
}

.editor-form-row--cover {
    grid-column: 3;
    grid-row: 1 / span 3;
}

.editor-form-row--full {
    grid-column: 1 / -1;
}

.editor-form-row label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--rj-text-muted);
    margin-bottom: var(--rj-space-1);
}

.editor-form-row-half {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--rj-space-4);
}

@media (max-width: 980px) {
    .editor-form-grid--news {
        grid-template-columns: 1fr;
    }

    .editor-form-row--span-2,
    .editor-form-row--cover,
    .editor-form-row--full {
        grid-column: 1;
        grid-row: auto;
    }
}

.editor-input,
.editor-textarea {
    width: 100%;
    padding: var(--rj-space-2) var(--rj-space-3);
    border: 1px solid var(--rj-border);
    border-radius: var(--rj-radius);
    background: var(--rj-bg);
    color: var(--rj-text);
    font-size: 0.875rem;
    font-family: inherit;
}

.editor-input:focus,
.editor-textarea:focus {
    outline: none;
    border-color: var(--rj-primary);
    box-shadow: 0 0 0 2px var(--rj-primary-subtle);
}

.editor-textarea-large {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 0.8125rem;
    line-height: 1.6;
}

/* News WYSIWYG Toolbar */
.news-wysiwyg-toolbar {
    display: flex;
    align-items: center;
    gap: var(--rj-space-0-5);
    padding: var(--rj-space-1) var(--rj-space-2);
    border: 1px solid var(--rj-border);
    border-bottom: none;
    border-radius: var(--rj-radius) var(--rj-radius) 0 0;
    background: var(--rj-surface);
}

.news-wysiwyg-toolbar button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 28px;
    border: none;
    border-radius: var(--rj-radius-sm);
    background: transparent;
    color: var(--rj-text);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background 0.15s;
}

.news-wysiwyg-toolbar button:hover {
    background: var(--rj-hover);
}

.news-wysiwyg-toolbar button:active {
    background: var(--rj-active);
}

.news-toolbar-sep {
    width: 1px;
    height: 20px;
    background: var(--rj-border);
    margin: 0 var(--rj-space-1);
}

.news-html-toggle {
    display: flex;
    align-items: center;
    gap: var(--rj-space-1);
    height: 28px;
    padding: 0 var(--rj-space-0-5);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    color: var(--rj-text-muted);
    cursor: pointer;
    user-select: none;
}

.news-html-toggle input {
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    margin: 0;
}

.news-html-toggle input:checked + span {
    color: var(--rj-primary);
}

.news-wysiwyg-editor {
    width: 100%;
    min-height: 300px;
    max-height: 600px;
    overflow-y: auto;
    padding: var(--rj-space-3) var(--rj-space-4);
    border: 1px solid var(--rj-border);
    border-radius: 0 0 var(--rj-radius) var(--rj-radius);
    background: var(--rj-bg);
    color: var(--rj-text);
    font-size: 0.875rem;
    font-family: inherit;
    line-height: 1.7;
}

.news-wysiwyg-editor:focus {
    outline: none;
    border-color: var(--rj-primary);
    box-shadow: 0 0 0 2px var(--rj-primary-subtle);
}

.news-wysiwyg-editor h3 { font-size: 1.1rem; margin: 1em 0 0.5em; }
.news-wysiwyg-editor p { margin: 0 0 0.75em; }
.news-wysiwyg-editor ul, .news-wysiwyg-editor ol { margin: 0 0 0.75em; padding-left: 1.5em; }
.news-wysiwyg-editor a { color: var(--rj-primary); }

/* News status badge inline in title cell */
.page-list-cell-title .news-status {
    display: inline-block;
    vertical-align: middle;
    margin-left: var(--rj-space-2);
    font-size: 0.625rem;
}

.editor-checkbox-label {
    display: flex !important;
    align-items: center;
    gap: var(--rj-space-2);
    cursor: pointer;
}

.editor-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--rj-space-3);
    margin-top: var(--rj-space-5);
    padding-top: var(--rj-space-4);
    border-top: 1px solid var(--rj-border);
}

.btn-xs {
    font-size: 0.75rem;
    padding: 3px var(--rj-space-2-5);
}

/* ============================================================
   MAIL DETAIL MODAL
   ============================================================ */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--rj-z-modal);
    animation: rj-fade-in var(--rj-duration-normal) var(--rj-ease);
}

.modal {
    background: var(--rj-bg-elevated);
    padding: var(--rj-space-6);
    border: 1px solid var(--rj-border);
    border-radius: var(--rj-radius-lg);
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: var(--rj-shadow-xl);
    animation: rj-slide-in var(--rj-duration-normal) var(--rj-ease);
}

.modal-large {
    max-width: 700px;
}

.modal-backup-preview {
    display: flex;
    width: 80vw;
    max-width: 80vw;
    height: calc(100vh - 64px);
    max-height: calc(100vh - 64px);
    flex-direction: column;
    overflow: hidden;
}

.modal-backup-preview .modal-text {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.modal-backup-preview .modal-actions {
    flex: 0 0 auto;
}

.modal h3 {
    margin: 0 0 var(--rj-space-4) 0;
    font-size: 1.125rem;
    font-weight: 600;
}

.modal-text {
    color: var(--rj-text);
    line-height: 1.5;
}

.backup-preview-modal {
    display: grid;
    height: 100%;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    align-content: start;
    gap: var(--rj-space-2);
    overflow: auto;
    padding: var(--rj-space-0-5) var(--rj-space-0-5) var(--rj-space-2-5);
    text-align: left;
}

.backup-preview-field {
    min-width: 0;
}

.backup-preview-field__name {
    margin: 0 0 3px;
    color: var(--rj-text-muted, #737373);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.backup-preview-field__value {
    min-height: 34px;
    max-height: 132px;
    overflow: auto;
    border: 1px solid var(--rj-border, #d9e5e5);
    border-radius: var(--rj-radius-sm, 6px);
    background: var(--rj-bg, #f8fafc);
    color: var(--rj-text, #1f2937);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 0.78rem;
    line-height: 1.35;
    padding: 7px var(--rj-space-2);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.backup-preview-empty {
    margin: 0;
    color: var(--rj-text-muted, #737373);
}

.modal-field-label {
    color: var(--rj-text, #374151);
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: var(--rj-space-2, 0.45rem);
    text-align: left;
}

.modal-choice-list {
    display: grid;
    gap: var(--rj-space-3, 0.75rem);
    text-align: left;
}

.modal-choice {
    align-items: flex-start;
    border: 1px solid var(--rj-border, #d9e5e5);
    border-radius: var(--rj-radius-sm, 8px);
    cursor: pointer;
    display: flex;
    gap: var(--rj-space-3, 0.75rem);
    padding: var(--rj-space-3, 0.85rem);
}

.modal-choice input {
    margin-top: 0.15rem;
}

.modal-choice strong {
    display: block;
    font-weight: 700;
    margin-bottom: 0.2rem;
}

.modal-choice small {
    color: var(--rj-text-muted, #6b7280);
    display: block;
    font-size: 0.82rem;
    line-height: 1.35;
}

.modal-actions {
    display: flex;
    gap: var(--rj-space-2);
    justify-content: flex-end;
    margin-top: var(--rj-space-5);
}

.modal-form {
    display: flex;
    flex-direction: column;
    gap: var(--rj-space-4);
}

.modal-label {
    display: flex;
    flex-direction: column;
    gap: var(--rj-space-1);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--rj-text);
}

.modal-input {
    padding: var(--rj-space-2) var(--rj-space-3);
    border: 1px solid var(--rj-border);
    border-radius: var(--rj-radius-md);
    font-family: var(--rj-font-sans);
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--rj-text);
    background: var(--rj-bg-elevated);
    transition: border-color var(--rj-duration-fast) var(--rj-ease),
                box-shadow var(--rj-duration-fast) var(--rj-ease);
}

select.modal-input {
    appearance: none;
    padding-right: var(--rj-space-10);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23525252' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 8px;
}

.modal-input:focus {
    outline: none;
    border-color: var(--rj-primary);
    box-shadow: 0 0 0 3px var(--rj-primary-muted);
}

.modal-hint {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--rj-text-muted);
}

.mail-detail-row {
    margin-bottom: var(--rj-space-4);
}

.mail-detail-row label {
    font-weight: 600;
    color: var(--rj-text-muted);
    display: block;
    margin-bottom: 3px;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.mail-detail-row span,
.mail-detail-row a {
    color: var(--rj-text);
}

.mail-detail-row a {
    color: var(--rj-primary);
}

.mail-detail-row a:hover {
    text-decoration: underline;
}

.mail-detail-message {
    margin-top: var(--rj-space-5);
    padding-top: var(--rj-space-5);
    border-top: 1px solid var(--rj-border);
}

.mail-message-text {
    background: var(--rj-bg-sunken);
    padding: var(--rj-space-4);
    border-radius: var(--rj-radius-md);
    line-height: 1.7;
    white-space: pre-wrap;
}

.mail-fields-list {
    display: grid;
    gap: var(--rj-space-2);
}

.mail-field-item {
    display: grid;
    grid-template-columns: minmax(120px, 0.28fr) minmax(0, 1fr);
    gap: var(--rj-space-3);
    padding: var(--rj-space-3);
    border: 1px solid var(--rj-border);
    border-radius: var(--rj-radius-md);
    background: var(--rj-bg-sunken);
}

.mail-field-item span {
    color: var(--rj-text-muted);
    font-size: 0.8125rem;
}

.mail-field-item strong {
    color: var(--rj-text);
    font-weight: 500;
    line-height: 1.5;
}


/* ============================================================
   SETTINGS
   ============================================================ */

.settings-layout {
    display: grid;
    grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
    gap: var(--rj-space-5);
    align-items: start;
}

.settings-tabs {
    position: sticky;
    top: var(--rj-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--rj-space-5);
    border: 1px solid var(--rj-border);
    border-radius: var(--rj-radius-lg);
    background: color-mix(in srgb, var(--rj-bg-elevated) 88%, var(--rj-bg));
    padding: var(--rj-space-4);
    box-shadow: none;
}

.settings-nav-group {
    display: flex;
    flex-direction: column;
    gap: var(--rj-space-0-5);
}

.settings-nav-group h3 {
    margin: 0 0 var(--rj-space-2);
    color: var(--rj-text-muted);
    font-size: calc(0.72rem * var(--rj-font-scale));
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.2;
    text-transform: uppercase;
}

.settings-tab-btn {
    width: 100%;
    padding: 7px var(--rj-space-2-5);
    font-size: var(--rj-text-md);
    font-weight: 500;
    line-height: 1.3;
    text-align: left;
    color: var(--rj-text-muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--rj-radius-md);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.settings-tab-btn:not(.active):hover {
    --rj-hover-from: transparent;
    --rj-hover-peak: color-mix(in srgb, var(--rj-text) 7%, var(--rj-bg-hover));
    --rj-hover-to: var(--rj-bg-hover);
    color: var(--rj-text);
    background: var(--rj-bg-hover);
    animation: rj-hover-fill var(--rj-duration-hover-in) linear both;
}

.settings-tab-btn {
    transition: background-color var(--rj-duration-hover-out) ease-out,
                color var(--rj-duration-fast) var(--rj-ease),
                border-color var(--rj-duration-fast) var(--rj-ease);
}

.settings-tab-btn.active {
    color: var(--rj-primary);
    border-color: var(--rj-primary-muted);
    background: var(--rj-primary-subtle);
}

.settings-panel {
    display: none;
    background: var(--rj-surface-panel, var(--rj-bg-elevated));
    padding: var(--rj-space-6);
    border-radius: var(--rj-radius-lg);
    border: 1px solid var(--rj-border);
    box-shadow: none;
}

.settings-panel.active {
    display: block;
}

.settings-panel h2 {
    margin: 0 0 var(--rj-space-1) 0;
    font-size: 1.25rem;
    line-height: 1.1;
    font-weight: 600;
}

@media (max-width: 980px) {
    .settings-layout {
        grid-template-columns: 1fr;
        gap: var(--rj-space-4);
    }

    .settings-tabs {
        position: static;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: var(--rj-space-4);
    }
}

@media (max-width: 560px) {
    .settings-tabs {
        grid-template-columns: 1fr;
    }
}

.settings-description {
    margin: 0 0 var(--rj-space-5) 0;
    color: var(--rj-text-muted);
    font-size: 0.8125rem;
    line-height: 1.5;
    padding-bottom: var(--rj-space-4);
    border-bottom: 1px var(--rj-divider-style, solid) var(--rj-border);
}

.settings-form .form-group {
    margin-bottom: var(--rj-space-5);
}

.settings-form--embedded {
    margin-top: var(--rj-space-6);
}

.settings-section {
    border: 1px solid var(--rj-border);
    border-radius: var(--rj-radius-lg);
    padding: var(--rj-space-5) var(--rj-space-6) var(--rj-space-3);
    margin: 0 0 var(--rj-space-6) 0;
    background: transparent;
}

/* Float legend inside the box, not breaking the border line */
.settings-section > legend {
    float: left;
    width: 100%;
    padding: 0;
    margin-bottom: var(--rj-space-4);
    font-size: 1rem;
    font-weight: 700;
    color: var(--rj-text);
}

.settings-section > legend + * {
    clear: left;
}

.settings-section .form-group:last-child {
    margin-bottom: var(--rj-space-2);
}

.settings-section--compact {
    padding: var(--rj-space-4) var(--rj-space-5);
    margin-bottom: var(--rj-space-4);
}

.settings-section--compact > legend {
    margin-bottom: var(--rj-space-3);
}

.settings-section--compact .form-group {
    margin-bottom: var(--rj-space-3);
}

.forms-admin-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--rj-space-4);
    align-items: start;
}

.forms-admin-editor {
    min-width: 0;
}

.forms-admin-list {
    border: 1px solid var(--rj-border);
    border-radius: var(--rj-radius-lg);
    background: var(--rj-surface-group, color-mix(in srgb, var(--rj-bg-elevated) 88%, var(--rj-bg)));
    padding: var(--rj-space-4);
}

.forms-admin-list__head {
    display: grid;
    grid-template-columns: minmax(260px, 420px) max-content;
    align-items: end;
    gap: var(--rj-space-3);
}

#newFormBtn {
    justify-self: start;
    width: auto;
    min-width: 5.5rem;
}

.forms-admin-select-group {
    margin: 0;
}

.forms-admin-select-group label {
    margin-bottom: 5px;
}

.forms-admin-select-group select {
    width: 100%;
    max-width: none;
}

.forms-admin-meta {
    margin: var(--rj-space-2) 0 0;
    color: var(--rj-text-muted);
    font-size: 0.8125rem;
}

.forms-admin-switches {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rj-space-3);
    margin-bottom: var(--rj-space-4);
}

.forms-fields-toolbar {
    margin-bottom: var(--rj-space-3);
}

.forms-fields-table-wrap {
    width: 100%;
    overflow: visible;
}

.forms-fields-table {
    width: 100%;
    min-width: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.forms-fields-table thead {
    display: none;
}

.forms-fields-table tbody {
    display: grid;
    gap: var(--rj-space-3);
}

.forms-fields-table tr.forms-field-row {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--rj-space-3);
    align-items: end;
    /* Room on the right for the delete button, which sits in the corner of the card, level with the first input. */
    padding: var(--rj-space-3) calc(var(--rj-control-h) + var(--rj-space-3) * 2) var(--rj-space-3) var(--rj-space-3);
    border: 1px solid var(--rj-border);
    border-radius: var(--rj-radius-md);
    background: var(--rj-surface-item, var(--rj-bg));
}

.forms-fields-table tr.forms-field-row td.forms-field-options {
    grid-column: 1 / -1;
}

.forms-fields-table tr.forms-field-row td.users-table__actions {
    position: absolute;
    /* card padding + the label line (16px box + its gap) puts the button level with the inputs */
    top: calc(var(--rj-space-3) + 16px + var(--rj-space-1-5));
    right: var(--rj-space-3);
    width: var(--rj-control-h);
}

.forms-fields-table td,
.forms-fields-table th {
    padding: 0;
    border-bottom: 0;
    min-width: 0;
}

.forms-fields-table tr.forms-field-row > td {
    border: 0 !important;
    box-shadow: none;
    /* The row card already spaces its cells with a gap; the .users-table cell
       padding would only steal width from the inputs. */
    padding: 0;
}

.forms-fields-table td {
    display: grid;
    grid-template-rows: 22px minmax(38px, auto);
    align-items: start;
}

/* Inputs fill their grid cell at every width; the browser default (size=20)
   drops below 120px once the fluid root size is under 16px. */
.forms-fields-table td input,
.forms-fields-table td select,
.forms-fields-table td textarea {
    width: 100%;
    min-width: 0;
}

.forms-fields-table td::before {
    content: attr(data-label);
    display: block;
    min-height: 16px;
    margin-bottom: var(--rj-space-1-5);
    color: var(--rj-text-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.2;
    text-transform: none;
}

.forms-fields-table input,
.forms-fields-table select,
.forms-fields-table textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 38px;
    padding: var(--rj-space-2) var(--rj-space-2-5);
    border: 1px solid var(--rj-border);
    border-radius: var(--rj-radius-sm);
    background: var(--rj-bg-elevated);
    color: var(--rj-text);
    font: inherit;
}

.forms-fields-table select {
    appearance: none;
    min-width: 100%;
    padding-right: var(--rj-space-10);
    background-color: var(--rj-bg-elevated);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23525252' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 8px;
}

.forms-fields-table textarea {
    min-height: 54px;
    resize: vertical;
}

.forms-field-check {
    justify-items: start;
}

.forms-fields-table td.forms-field-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-height: 0;
    margin: 0;
    align-self: center;
    justify-self: start;
}

.forms-fields-table .users-table__actions {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding-bottom: 0;
}

.forms-fields-table .users-table__actions::before {
    display: none;
}

.forms-fields-table .users-table__actions .btn-icon {
    width: 36px;
    min-width: 36px;
    flex-basis: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--rj-border);
    background: var(--rj-bg-elevated);
}

.access-maintenance-grid {
    clear: left;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--rj-space-4) var(--rj-space-5);
    align-items: start;
}

.access-maintenance-grid > .form-group {
    margin: 0;
    min-width: 0;
}

.access-maintenance-grid > .form-group > label:not(.toggle-label) {
    display: block;
    line-height: 1.45;
}

/* Toggles share a row with labelled fields: start one label height down */
.access-maintenance-grid > .access-toggle-row {
    display: flex;
    align-items: center;
    min-height: var(--rj-control-h);
    margin-top: var(--rj-label-offset);
}

.access-maintenance-grid > .access-toggle-row .toggle-label {
    white-space: nowrap;
}

/* The enable switch has the longer label and takes two columns */
.access-maintenance-grid > .access-toggle-row:first-child {
    grid-column: span 2;
}

/* Full-width rows stretch their field across the whole grid (the :not()
   chain matches the specificity of the 40rem cap in the settings form) */
.settings-panel .settings-form .access-maintenance-grid > .access-wide input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
.settings-panel .settings-form .access-maintenance-grid > .access-wide textarea,
.settings-panel .settings-form .access-maintenance-grid > .access-wide .logo-path-input,
.settings-panel .settings-form .access-maintenance-grid > .access-wide .logo-path-input .input-with-clear {
    max-width: none;
}

.access-maintenance-grid #maintenanceUntil {
    width: 100%;
}

.access-wide {
    grid-column: 1 / -1;
}

.settings-visual-grid {
    display: grid;
    grid-template-columns: minmax(220px, 0.42fr) minmax(260px, 0.5fr) minmax(0, 1fr);
    gap: var(--rj-space-3) var(--rj-space-4);
}

.settings-visual-grid .form-group {
    margin-bottom: 0;
}

.visual-overlay-color-group input[type="color"] {
    width: 54px;
    min-height: 38px;
    padding: 3px;
}

.visual-color-opacity-row {
    display: flex;
    align-items: center;
    gap: var(--rj-space-3);
}

.visual-opacity-control {
    flex: 1;
    min-width: 0;
    max-width: 260px;
}

/* Overlay colour (shown for some layouts) takes two columns */
.access-maintenance-grid > .visual-overlay-color-group {
    grid-column: span 2;
}

#maintenanceUntil {
    width: min(100%, 22rem);
    padding-right: var(--rj-space-10);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23525252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

[data-site-theme="dark"] #maintenanceUntil {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23cfcfcf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}

#maintenanceUntil::-webkit-calendar-picker-indicator {
    opacity: 0;
    cursor: pointer;
    background: transparent;
}

#maintenanceUntil::-webkit-inner-spin-button,
#maintenanceUntil::-webkit-clear-button {
    display: none;
    -webkit-appearance: none;
}

.access-select {
    width: 100%;
    min-width: 0;
}

.settings-section--maintenance textarea {
    min-height: 92px;
}

.settings-toggle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--rj-space-3) var(--rj-space-4);
}

.settings-toggle-grid--modules {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    align-items: stretch;
}

.settings-toggle-grid .form-group {
    margin-bottom: 0;
}

.access-toggle-row .toggle-label {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
}

.access-toggle-row .toggle-label > .toggle-switch {
    margin-top: var(--rj-space-2);
}

.access-toggle-row--module .toggle-label {
    min-height: 64px;
    padding: var(--rj-space-3);
    border: 1px solid var(--rj-border);
    border-radius: var(--rj-radius-md);
    background: color-mix(in srgb, var(--rj-bg-elevated) 68%, var(--rj-bg));
}

.access-toggle-row--inline {
    align-self: start;
    padding-bottom: 0;
}

.ai-feature-toggle-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--rj-space-4);
}

.ai-feature-toggle-grid .toggle-label {
    min-height: 66px;
}

.branding-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rj-space-8);
}

.branding-main-column {
    min-width: 0;
}

.settings-section--branding-main .frontend-logos-block {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.settings-section--branding-main .form-group-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rj-space-5);
}

.settings-section--branding-main #logoDisplayGroup {
    margin-top: var(--rj-space-6);
}

.settings-section--branding-main #logoSizeGroup {
    margin-top: var(--rj-space-5);
}

.settings-section--branding-main #logoDisplayGroup .radio-group {
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: var(--rj-space-6);
    row-gap: var(--rj-space-2);
}

.settings-section--branding-main .radio-group--segmented {
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: var(--rj-space-6);
    row-gap: var(--rj-space-2);
}

.branding-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rj-space-3);
}

.branding-identity-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rj-space-5);
}

.branding-identity-grid .form-group {
    min-width: 0;
}

.branding-favicon-hint {
    display: block;
    margin-bottom: var(--rj-space-3);
}

.branding-site-name-hint {
    display: block;
    margin-bottom: var(--rj-space-3);
}

@media (min-width: 1100px) {
    .branding-main-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }
}

.form-group-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--rj-space-8);
}

@media (min-width: 1200px) {
    .form-group-row {
        grid-template-columns: 1fr 1fr;
    }
}

.form-group-row .form-group {
    margin-bottom: var(--rj-space-5);
    min-width: 0;
}

.form-group-row--pagination {
    gap: var(--rj-space-5);
}

.form-group-row--pagination input {
    width: 100%;
}

@media (min-width: 980px) {
    .form-group-row--pagination {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.change-password-form {
    max-width: 500px;
}

/* Logo Preview */
.logo-preview-group {
    display: flex;
    align-items: flex-start;
    gap: var(--rj-space-4);
}

.logo-preview-group--with-hint {
    margin-top: var(--rj-space-2);
}

@media (max-width: 479px) {
    .logo-preview-group {
        flex-direction: column;
    }
}

.logo-preview {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8fafc;
    background-image:
        linear-gradient(45deg, rgba(15, 23, 42, 0.12) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(15, 23, 42, 0.12) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(15, 23, 42, 0.12) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(15, 23, 42, 0.12) 75%);
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    background-size: 16px 16px;
    border: 1px solid color-mix(in srgb, var(--rj-border) 70%, #ffffff);
    border-radius: 0;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.78),
        0 0 0 1px color-mix(in srgb, var(--rj-bg) 70%, transparent);
    overflow: hidden;
}

.logo-preview::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, transparent calc(50% - 1px), color-mix(in srgb, var(--rj-border) 86%, #ffffff) 50%, transparent calc(50% + 1px));
    opacity: 0.72;
    pointer-events: none;
}

.logo-preview:has(img[src]:not([src=""]))::after {
    display: none;
}

.logo-preview img {
    position: relative;
    z-index: 1;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.logo-preview--wide {
    width: 9rem;
    aspect-ratio: 1.91 / 1;
}

.logo-controls {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--rj-space-2);
}

.logo-path-input {
    display: flex;
    gap: var(--rj-space-2);
    /* The field sits next to a small button, so it takes the small control
       height too (the input rule reads --rj-control-h) */
    --rj-control-h: var(--rj-control-h-sm);
}

.logo-path-input .input-with-clear {
    position: relative;
    flex: 1;
    min-width: 0;
}

.logo-path-input .input-with-clear input {
    width: 100%;
    padding-right: 2rem;
}

.logo-path-input .btn {
    flex-shrink: 0;
}

.input-clear-btn {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--rj-text-muted);
    cursor: pointer;
    padding: 0;
    border-radius: var(--rj-radius-sm);
    transition: background-color var(--rj-duration-fast) var(--rj-ease),
                color var(--rj-duration-fast) var(--rj-ease);
}

.input-clear-btn:hover {
    background: var(--rj-bg-hover);
    color: var(--rj-text);
}

.input-clear-btn:focus-visible {
    outline: 2px solid var(--rj-primary);
    outline-offset: 2px;
}

.input-clear-btn[hidden] {
    display: none;
}

.input-clear-btn svg {
    width: 0.875rem;
    height: 0.875rem;
}

/* Toggle Switch */
.toggle-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rj-space-3);
    cursor: pointer;
}

.toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--rj-border-strong);
    border-radius: var(--rj-radius-full);
    transition: background-color var(--rj-duration-fast) var(--rj-ease);
    cursor: pointer;
}

.toggle-slider::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: transform var(--rj-duration-fast) var(--rj-ease);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.toggle-switch input:checked + .toggle-slider {
    background: var(--rj-primary);
}

.toggle-switch input:disabled + .toggle-slider,
.toggle-switch input:disabled:checked + .toggle-slider {
    background: var(--rj-border-strong);
    cursor: not-allowed;
    opacity: 0.65;
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(20px);
}

.toggle-switch input:focus-visible + .toggle-slider {
    outline: 2px solid var(--rj-border-focus);
    outline-offset: 2px;
}

/* Range Input */
.range-input-group {
    display: flex;
    align-items: center;
    gap: var(--rj-space-3);
}

.range-input {
    flex: 1;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--rj-border-strong);
    border-radius: var(--rj-radius-full);
    outline: none;
    cursor: pointer;
}

.range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: var(--rj-primary);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    transition: transform var(--rj-duration-fast) var(--rj-ease);
}

.range-input::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.range-input::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--rj-primary);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.range-input:focus-visible {
    outline: 2px solid var(--rj-border-focus);
    outline-offset: 2px;
}

.range-value {
    min-width: 40px;
    text-align: right;
    font-size: var(--rj-text-sm);
    font-weight: 500;
    color: var(--rj-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* Fill slider: the field area fills with the accent colour up to the value;
   the percentage label sits inside the field and flips sides below 40%. */
.fill-slider {
    position: relative;
    height: 40px;
    border: 1px solid var(--rj-border);
    border-radius: var(--rj-radius-md);
    background: var(--rj-bg-elevated);
    overflow: visible;
    cursor: pointer;
}

.fill-slider__fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 70%;
    background: var(--rj-primary);
    pointer-events: none;
    transition: width var(--rj-duration-fast) var(--rj-ease);
}

.fill-slider__value {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    z-index: 1;
    font-size: var(--rj-text-md);
    font-weight: 700;
    color: var(--rj-text-on-primary, #fff);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

.fill-slider__value--right {
    left: auto;
    right: 14px;
    color: var(--rj-text-secondary);
}

/* Native range on top provides the interaction. The track stays transparent
   (the fill layer shows the value) but the thumb is a visible drag handle.
   The extra specificity overrides the .form-group input surface background. */
.fill-slider .fill-slider__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
}

.fill-slider__input:disabled {
    cursor: not-allowed;
}

.fill-slider__input::-webkit-slider-runnable-track {
    background: transparent;
    height: 100%;
}

.fill-slider__input::-moz-range-track {
    background: transparent;
    height: 100%;
}

.fill-slider__input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 46px;
    border-radius: var(--rj-radius-md);
    background: #fff;
    border: 1px solid var(--rj-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    cursor: grab;
    top:-3px;
    position:relative
}

.fill-slider__input::-webkit-slider-thumb:active {
    cursor: grabbing;
}

.fill-slider__input::-moz-range-thumb {
    width: 10px;
    height: 46px;
    border-radius: var(--rj-radius-md);
    background: #fff;
    border: 1px solid var(--rj-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    cursor: grab;
    top:-3px;
    position:relative
}

.fill-slider:has(.fill-slider__input:focus-visible) {
    outline: none;
    border-color: var(--rj-primary);
    box-shadow: 0 0 0 3px var(--rj-primary-muted);
}

/* Editor Button Settings Row */
.editor-btn-settings-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--rj-space-4);
    align-items: start;
}

.editor-btn-settings-row .toggle-label {
    padding-top: var(--rj-space-1);
}

.range-field label {
    display: block;
    font-size: var(--rj-text-sm);
    font-weight: 500;
    color: var(--rj-text-secondary);
    margin-bottom: var(--rj-space-1);
}

/* Button Style Row — controls + live preview side by side */
.btn-style-row {
    display: grid;
    grid-template-columns: 1fr minmax(220px, auto);
    gap: var(--rj-space-4);
    align-items: stretch;
    margin-top: var(--rj-space-2);
}

.settings-section--button-style .btn-style-row {
    margin-top: 0;
}

.btn-style-controls {
    display: flex;
    flex-direction: column;
    gap: var(--rj-space-3);
    min-width: 0;
}

.btn-style-radius-field {
    width: min(100%, 460px);
}

.btn-style-glow-field {
    display: grid;
    gap: var(--rj-space-1);
    max-width: 460px;
}

.btn-style-controls .form-hint {
    margin-top: var(--rj-space-1-5);
}

.btn-style-preview {
    display: flex;
    flex-direction: column;
    gap: var(--rj-space-2);
    align-items: stretch;
    justify-content: center;
    padding: var(--rj-space-4);
    background: color-mix(in srgb, var(--rj-bg-elevated) 82%, var(--rj-bg));
    border: 1px solid var(--rj-border);
    border-radius: var(--rj-radius-lg);
}

@media (max-width: 640px) {
    .btn-style-row {
        grid-template-columns: 1fr;
    }
}

.btn-preview-primary {
    --rj-hover-from: var(--rj-primary);
    --rj-hover-peak: var(--rj-hover-lift);
    --rj-hover-to: var(--rj-hover-settle);
    padding: var(--rj-space-2-5) var(--rj-space-6);
    border: none;
    font-size: 0.875rem;
    font-family: inherit;
    font-weight: 500;
    cursor: default;
    color: var(--rj-text-on-primary, #fff);
    background-color: var(--rj-primary);
    background-image: var(--rj-primary-sheen);
    transition: box-shadow 0.3s, border-radius 0.3s, background-color var(--rj-duration-hover-out) ease-out;
}

.btn-preview-primary:hover {
    background-color: var(--rj-hover-settle);
    animation: rj-hover-fill var(--rj-duration-hover-in) linear both;
}

.btn-preview-secondary {
    --rj-hover-from: transparent;
    --rj-hover-peak: var(--rj-hover-tint);
    --rj-hover-to: var(--rj-hover-tint-settle);
    transition: background-color var(--rj-duration-hover-out) ease-out, border-radius 0.3s;
}

.btn-preview-secondary:hover {
    background-color: var(--rj-hover-tint-settle);
    animation: rj-hover-fill var(--rj-duration-hover-in) linear both;
}

/* With the glow the real button has a faint text shadow; flat buttons do not */
html:not(.rj-flat-buttons) .btn-preview-primary {
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.25), 0 -1px 1px rgba(0, 0, 0, 0.15);
}

.btn-preview-secondary {
    padding: var(--rj-space-2-5) var(--rj-space-6);
    background: transparent;
    border: 2px solid var(--rj-border-strong);
    font-size: 0.875rem;
    font-family: inherit;
    font-weight: 500;
    cursor: default;
    color: var(--rj-text-secondary);
    transition: border-radius 0.3s;
}

/* Theme Selector */
.theme-selector {
    display: flex;
    gap: var(--rj-space-5);
}

.theme-option {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--rj-space-2);
    padding: var(--rj-space-3);
    background: var(--rj-bg);
    border: 2px solid var(--rj-border);
    border-radius: var(--rj-radius-md);
    cursor: pointer;
    font-size: 0.8125rem;
    font-family: inherit;
    color: var(--rj-text-secondary);
    transition: border-color var(--rj-duration-fast) var(--rj-ease),
                color var(--rj-duration-fast) var(--rj-ease);
}

.theme-option:hover {
    border-color: var(--rj-border-strong);
    color: var(--rj-text);
}

.theme-option.selected {
    border-color: var(--rj-primary);
    color: var(--rj-text);
}

.theme-swatch {
    display: block;
    width: 40px;
    height: 28px;
    border-radius: var(--rj-radius-sm);
    border: 1px solid var(--rj-border);
}

.theme-swatch--light {
    background: linear-gradient(135deg, #ffffff 50%, #f0f0f0 50%);
}

.theme-swatch--dark {
    background: linear-gradient(135deg, #1a1a1a 50%, #0f0f0f 50%);
}

.theme-swatch--system {
    background: linear-gradient(135deg, #ffffff 50%, #1a1a1a 50%);
}

/* Color Input — round swatch (acts as picker trigger) + slim hex field */
.color-input-group {
    display: flex;
    gap: var(--rj-space-2);
    align-items: center;
}

/* Round picker — selector deliberately raised to input.color-picker so it
   beats .form-group input (which sets width: 100% and padding). */
input.color-picker,
.color-picker {
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    border: 1px solid var(--rj-border);
    border-radius: 50%;
    background: var(--rj-bg);
    cursor: pointer;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    transition: transform var(--rj-duration-fast) var(--rj-ease),
                border-color var(--rj-duration-fast) var(--rj-ease);
}

input.color-picker:hover,
.color-picker:hover {
    transform: scale(1.05);
    border-color: var(--rj-primary);
}

input.color-picker:focus-visible,
.color-picker:focus-visible {
    outline: 2px solid var(--rj-border-focus);
    outline-offset: 2px;
}

/* Browser swatch wrappers — fill the round button edge-to-edge */
input.color-picker::-webkit-color-swatch-wrapper,
.color-picker::-webkit-color-swatch-wrapper {
    padding: 0;
    border-radius: 50%;
}

input.color-picker::-webkit-color-swatch,
.color-picker::-webkit-color-swatch {
    border: none;
    border-radius: 50%;
}

input.color-picker::-moz-color-swatch,
.color-picker::-moz-color-swatch {
    border: none;
    border-radius: 50%;
}

input.color-hex-input,
.color-hex-input {
    width: 110px;
    font-family: var(--rj-font-mono);
    font-size: 0.875rem;
}

/* Auto-badge — shown when an optional color field is in "auto" mode */
.auto-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--rj-space-0-5) var(--rj-space-2);
    background: var(--rj-primary-subtle);
    color: var(--rj-primary);
    border-radius: var(--rj-radius-full);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    user-select: none;
}

.auto-badge[hidden] {
    display: none;
}

/* Reset-to-auto button per color field */
.auto-reset-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    margin-left: auto;
    background: transparent;
    border: 1px solid var(--rj-border);
    border-radius: var(--rj-radius-sm);
    color: var(--rj-text-muted);
    font-size: 0.875rem;
    cursor: pointer;
    transition: color var(--rj-duration-fast) var(--rj-ease),
                border-color var(--rj-duration-fast) var(--rj-ease),
                background var(--rj-duration-fast) var(--rj-ease);
}

.auto-reset-btn:hover {
    color: var(--rj-primary);
    border-color: var(--rj-primary);
    background: var(--rj-primary-subtle);
}

.auto-reset-btn:focus-visible {
    outline: 2px solid var(--rj-border-focus);
    outline-offset: 2px;
}

/* Theme color sections — Light / Dark blocks side-by-side on desktop */
.theme-color-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin: 0 0 var(--rj-space-5);
}

@media (max-width: 900px) {
    .theme-color-grid {
        grid-template-columns: 1fr;
        gap: var(--rj-space-4);
    }
}

.theme-color-preview {
    --rj-bg: #f8fafc;
    --rj-bg-elevated: #ffffff;
    --rj-bg-sunken: #eef4ff;
    --rj-bg-hover: #f1f5f9;
    --rj-text: #1a1a1a;
    --rj-text-secondary: #454545;
    --rj-text-muted: #595959;
    --rj-border: #ccd9ed;
    --rj-border-strong: #adbfd9;
    background: var(--rj-bg);
    border: 1px solid var(--rj-border);
    padding: var(--rj-space-4);
}

.theme-color-section {
    border: 1px solid var(--rj-border);
    border-radius: var(--rj-radius-lg);
    padding: var(--rj-space-5) var(--rj-space-5) var(--rj-space-5);
    margin: 0;
    background: var(--rj-bg-elevated);
    color: var(--rj-text);
}

.theme-color-section legend {
    padding: 0 var(--rj-space-2);
    background: var(--rj-bg-elevated);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--rj-text);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.theme-color-preview[data-mode="dark"] {
    --rj-bg: #151c28;
    --rj-bg-elevated: #1e2632;
    --rj-bg-sunken: #0c121e;
    --rj-bg-hover: #253040;
    --rj-text: #e5e5e5;
    --rj-text-secondary: #b8b8b8;
    --rj-text-muted: #b8b8b8;
    --rj-border: #344255;
    --rj-border-strong: #46566d;
    background: var(--rj-bg);
}

.theme-color-preview[data-mode="dark"] .theme-color-section {
    background: var(--rj-bg-elevated);
}

.theme-color-preview[data-mode="dark"] .theme-color-section legend {
    background: var(--rj-bg-elevated);
}

.theme-color-preview[data-mode="light"] input,
.theme-color-preview[data-mode="light"] textarea,
.theme-color-preview[data-mode="light"] select {
    color-scheme: light;
}

.theme-color-preview[data-mode="dark"] input,
.theme-color-preview[data-mode="dark"] textarea,
.theme-color-preview[data-mode="dark"] select {
    color-scheme: dark;
}

.theme-color-section .form-group:last-child {
    margin-bottom: 0;
}

/* Action row at the bottom of the theme form */
.theme-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rj-space-3);
    align-items: center;
    margin-top: var(--rj-space-4);
}


/* Logo Browser Modal */
.logo-browser-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: var(--rj-space-3);
    max-height: 400px;
    overflow-y: auto;
    padding: var(--rj-space-2);
}

.logo-browser-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--rj-bg-sunken);
    border: 2px solid var(--rj-border);
    border-radius: var(--rj-radius-md);
    cursor: pointer;
    overflow: hidden;
    padding: var(--rj-space-2);
    transition: border-color var(--rj-duration-fast) var(--rj-ease);
}

.logo-browser-item:hover {
    border-color: var(--rj-primary);
}

.logo-browser-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.logo-browser-item-name,
.logo-browser-name {
    font-size: 0.6875rem;
    color: var(--rj-text-muted);
    text-align: center;
    margin-top: var(--rj-space-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* Danger Zone Tab & Panel */
.settings-tab-btn--danger {
    color: var(--rj-danger);
}

.settings-tab-btn--danger:hover {
    color: var(--rj-danger);
    background: var(--rj-danger-subtle);
}

.settings-tab-btn--danger.active {
    color: var(--rj-danger);
    border-color: color-mix(in srgb, var(--rj-danger) 35%, var(--rj-border));
    background: var(--rj-danger-subtle);
}

/* Email Settings */
.settings-hint-box {
    padding: var(--rj-space-3) var(--rj-space-4);
    margin-bottom: var(--rj-space-5);
    background: var(--rj-warning-subtle);
    border: 1px solid var(--rj-warning);
    border-radius: var(--rj-radius-md);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--rj-text);
}

.settings-hint-box p {
    margin: 0;
}

.settings-divider {
    border: none;
    border-top: 1px var(--rj-divider-style, solid) var(--rj-border);
    margin: var(--rj-space-5) 0;
}

.settings-subheading {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0 0 var(--rj-space-4) 0;
    color: var(--rj-text);
}

.form-row-inline {
    display: flex;
    gap: var(--rj-space-4);
    align-items: flex-start;
}

.form-row-inline .form-group {
    flex: 1;
}

.settings-actions-row {
    display: flex;
    gap: var(--rj-space-3);
    align-items: center;
    margin-top: var(--rj-space-4);
}

.settings-test-result {
    margin-top: var(--rj-space-3);
    padding: var(--rj-space-3) var(--rj-space-4);
    border-radius: var(--rj-radius-md);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.settings-test-result--success {
    background: var(--rj-success-subtle);
    color: var(--rj-success);
    border: 1px solid var(--rj-success);
}

.settings-test-result--error {
    background: var(--rj-danger-subtle);
    color: var(--rj-danger);
    border: 1px solid var(--rj-danger);
}

/* Users Table */
.users-toolbar {
    margin-bottom: var(--rj-space-4);
}

.users-table-wrap {
    margin-top: var(--rj-space-3);
}

.users-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.users-table--admin {
    font-size: 0.875rem;
}

.users-table th,
.users-table td {
    padding: var(--rj-space-2) var(--rj-space-3);
    text-align: left;
    border-bottom: 1px solid var(--rj-border);
    font-size: inherit;
    line-height: 1.4;
}

.users-table--admin th,
.users-table--admin td {
    border-bottom: 0;
}

.users-table th {
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--rj-text-muted);
}

.users-table__current {
    background: transparent;
}

.users-table__current td:first-child {
    font-weight: 600;
}

.users-table__current em {
    color: var(--rj-text-muted);
    font-style: normal;
    font-weight: 500;
}

.users-table__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--rj-space-1);
    white-space: nowrap;
}

.users-table__actions .btn {
    margin-right: 0;
}

.role-badge {
    display: inline-block;
    font-size: inherit;
    font-weight: 500;
    letter-spacing: 0;
}

.role-badge--admin {
    color: var(--rj-primary);
}

.role-badge--editor {
    color: var(--rj-text-secondary);
}

.users-table__actions .btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--rj-border);
    border-radius: var(--rj-radius-sm);
    background: var(--rj-bg-elevated);
    color: var(--rj-text-secondary);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.users-table__actions .btn-icon:hover {
    background: var(--rj-bg-sunken);
    color: var(--rj-text);
}

.users-table__actions .btn-icon--danger:hover {
    background: var(--rj-danger-subtle);
    color: var(--rj-danger);
}

.users-table__actions .btn-icon svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Forgot Password */
.forgot-password {
    margin-top: var(--rj-space-1);
    text-align: right;
}

.forgot-password a {
    font-size: var(--rj-text-sm);
    color: var(--rj-text-secondary);
}

.forgot-password a:hover {
    color: var(--rj-primary);
}

.reset-desc {
    color: var(--rj-text-secondary);
    margin-bottom: var(--rj-space-4);
}

/* Danger Zone */
.danger-zone-title {
    color: var(--rj-danger);
}

.danger-zone-card {
    border: 1px solid var(--rj-danger);
    border-radius: var(--rj-radius-lg);
    overflow: hidden;
}

.danger-zone-card__header {
    padding: var(--rj-space-4) var(--rj-space-5);
}

.danger-zone-card__header h3 {
    margin: 0 0 var(--rj-space-2) 0;
    font-size: 1rem;
    font-weight: 600;
}

.danger-zone-card__header p {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--rj-text-muted);
    line-height: 1.5;
}

.danger-zone-card__warning {
    padding: var(--rj-space-3) var(--rj-space-5);
    background: rgba(220, 38, 38, 0.06);
    border-top: 1px solid var(--rj-border);
    border-bottom: 1px solid var(--rj-border);
    font-size: 0.8125rem;
    color: var(--rj-danger);
    line-height: 1.5;
}

.danger-zone-card__action {
    padding: var(--rj-space-4) var(--rj-space-5);
    display: flex;
    align-items: center;
    gap: var(--rj-space-3);
}

.danger-zone-card__action label {
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
}

.danger-zone-card__action input {
    width: 120px;
    padding: var(--rj-space-2) var(--rj-space-3);
    font-size: 0.875rem;
    font-family: var(--rj-font-mono, monospace);
    letter-spacing: 0.05em;
    border: 1px solid var(--rj-border);
    border-radius: var(--rj-radius-md);
    background: var(--rj-bg);
    color: var(--rj-text);
}

.danger-zone-card__action input:focus {
    outline: none;
    border-color: var(--rj-danger);
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15);
}

.danger-zone-card__action .btn {
    flex-shrink: 0;
}

/* Backup card */
.backup-manual-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--rj-space-5);
    margin-top: var(--rj-space-5);
}

.backup-manual-grid .backup-site-card {
    display: flex;
    flex-direction: column;
}

.backup-manual-grid .backup-site-card__info {
    flex: 1;
}

.backup-site-card {
    border: 1px solid var(--rj-border);
    border-radius: var(--rj-radius-lg);
    overflow: hidden;
    background: var(--rj-bg);
}

.backup-site-card__info {
    padding: var(--rj-space-4) var(--rj-space-5);
}

.backup-site-card__info h3 {
    margin: 0 0 var(--rj-space-2) 0;
    font-size: 1rem;
    font-weight: 600;
}

.backup-site-card__info p {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--rj-text-muted);
}

.backup-site-card__action {
    padding: var(--rj-space-4) var(--rj-space-5);
    border-top: 1px var(--rj-divider-style, solid) var(--rj-border);
    min-height: 72px;
    display: flex;
    align-items: center;
}

.backup-site-card__action .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--rj-space-2);
}

.backup-progress {
    display: flex;
    align-items: center;
    gap: var(--rj-space-3);
    font-size: 0.875rem;
    color: var(--rj-text-muted);
}

.backup-progress__spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--rj-border);
    border-top-color: var(--rj-primary);
    border-radius: 50%;
    animation: backup-spin 0.7s linear infinite;
}

@keyframes backup-spin {
    to { transform: rotate(360deg); }
}

/* Restore from Backup */
.restore-upload-area {
    display: flex;
    align-items: center;
    gap: var(--rj-space-3);
    flex-wrap: wrap;
}

.restore-upload-area .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--rj-space-2);
}

.restore-filename {
    font-size: 0.8125rem;
    color: var(--rj-text-muted);
}

.restore-mode-block {
    margin-top: var(--rj-space-4);
}

.restore-mode-heading {
    margin: 0 0 var(--rj-space-2);
    color: var(--rj-text);
    font-size: 0.8125rem;
    font-weight: 600;
}

.restore-mode-selector {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--rj-space-3);
}

.restore-mode-option {
    cursor: pointer;
}

.restore-mode-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.restore-mode-card {
    display: flex;
    flex-direction: column;
    gap: var(--rj-space-1);
    height: 100%;
    padding: var(--rj-space-3) var(--rj-space-4);
    border: 2px solid var(--rj-border);
    border-radius: var(--rj-radius-lg);
    transition: border-color var(--rj-duration-fast) var(--rj-ease),
                background-color var(--rj-duration-fast) var(--rj-ease);
}

.restore-mode-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--rj-space-3);
}

.restore-mode-card strong {
    font-size: 0.875rem;
    font-weight: 600;
}

.restore-mode-card span {
    font-size: 0.75rem;
    color: var(--rj-text-muted);
    line-height: 1.4;
}

.restore-mode-indicator {
    position: relative;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border: 2px solid var(--rj-border-strong, var(--rj-text-muted));
    border-radius: 50%;
    background: var(--rj-bg);
    transition: border-color var(--rj-duration-fast) var(--rj-ease),
                background-color var(--rj-duration-fast) var(--rj-ease);
}

.restore-mode-indicator::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    opacity: 0;
    transform: rotate(45deg) scale(0.7);
    transition: opacity var(--rj-duration-fast) var(--rj-ease),
                transform var(--rj-duration-fast) var(--rj-ease);
}

.restore-mode-option input[type="radio"]:checked + .restore-mode-card {
    border-color: var(--rj-primary);
    background: var(--rj-primary-muted);
    box-shadow: 0 0 0 1px var(--rj-primary);
}

.restore-mode-option input[type="radio"]:checked + .restore-mode-card .restore-mode-indicator {
    border-color: var(--rj-primary);
    background: var(--rj-primary);
}

.restore-mode-option input[type="radio"]:checked + .restore-mode-card .restore-mode-indicator::after {
    opacity: 1;
    transform: rotate(45deg) scale(1);
}

.restore-mode-option:hover input[type="radio"]:not(:checked) + .restore-mode-card {
    border-color: var(--rj-text-muted);
}

.restore-mode-option input[type="radio"]:focus-visible + .restore-mode-card {
    outline: 2px solid var(--rj-primary);
    outline-offset: 2px;
}

.restore-actions {
    margin-top: var(--rj-space-4);
}

.restore-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--rj-space-2);
}

/* ============================================================
   AUTOMATED / SCHEDULED BACKUPS
   ============================================================ */

.backup-scheduled {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--rj-space-4);
    margin-top: var(--rj-space-5);
    padding: var(--rj-space-5);
}

.backup-scheduled .backup-site-card__info {
    padding: 0;
    max-width: 76rem;
}

/* Status banner — ok/warning/error/idle states */
.scheduled-status {
    padding: var(--rj-space-3) var(--rj-space-4);
    border-radius: var(--rj-radius-lg);
    border: 1px solid var(--rj-border);
    display: flex;
    flex-direction: column;
    gap: var(--rj-space-1);
    align-items: baseline;
    font-size: 0.875rem;
    width: 100%;
    max-width: 100%;
    min-width: 16rem;
    grid-column: 1;
}
.scheduled-status[data-state="ok"] {
    border-color: rgba(46, 160, 67, 0.4);
    background: rgba(46, 160, 67, 0.06);
}
.scheduled-status[data-state="warning"] {
    border-color: rgba(204, 145, 0, 0.45);
    background: rgba(204, 145, 0, 0.08);
}
.scheduled-status[data-state="error"] {
    border-color: rgba(220, 53, 69, 0.45);
    background: rgba(220, 53, 69, 0.06);
}
.scheduled-status__row {
    display: flex;
    gap: var(--rj-space-2);
    align-items: baseline;
    min-width: 0;
}
.scheduled-status__message {
    font-size: 0.8125rem;
    color: var(--rj-text-muted);
    min-width: 0;
}
.scheduled-status[data-state="warning"] .scheduled-status__message,
.scheduled-status[data-state="error"] .scheduled-status__message {
    color: inherit;
}

.scheduled-storage {
    font-size: 0.875rem;
    color: var(--rj-text-muted);
    min-width: 0;
    display: flex;
    gap: var(--rj-space-1);
    flex-wrap: wrap;
}
.scheduled-storage strong {
    color: var(--rj-text);
}
.scheduled-storage__dates {
    color: inherit;
}

/* Settings form */
.scheduled-form {
    display: grid;
    grid-template-columns: minmax(24rem, 40rem) minmax(18rem, 22rem);
    gap: var(--rj-space-5) var(--rj-space-8);
    align-items: start;
    padding: var(--rj-space-4);
    border: 1px solid var(--rj-border);
    border-radius: var(--rj-radius-lg);
    background: var(--rj-bg);
}
.scheduled-form__toggle {
    display: flex;
    align-items: center;
    gap: var(--rj-space-2);
    font-size: 0.9375rem;
    color: var(--rj-text);
    grid-column: 1 / -1;
}
.scheduled-form__toggle.toggle-label {
    justify-content: space-between;
    padding: 0;
}
.scheduled-form__hint {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--rj-text-muted);
    line-height: 1.4;
}
.scheduled-form__toggle + .scheduled-form__hint {
    grid-column: 1 / -1;
    margin-top: 0;
    margin-bottom: var(--rj-space-2);
}
.scheduled-form__mode {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: var(--rj-space-2);
    max-width: 40rem;
}
.scheduled-form__mode > label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--rj-text);
}
.scheduled-form__fieldset {
    border: 1px solid var(--rj-border);
    border-radius: var(--rj-radius-lg);
    padding: var(--rj-space-3);
    margin: 0;
    min-width: 0;
}
.scheduled-form__fieldset legend {
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0 var(--rj-space-2);
}
.scheduled-form__grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rj-space-2);
    margin-top: var(--rj-space-2);
}
.scheduled-form__grid label {
    display: flex;
    flex-direction: column;
    gap: var(--rj-space-1);
    font-size: 0.8125rem;
    color: var(--rj-text);
    width: 5.75rem;
}
.scheduled-form__grid input,
.scheduled-form__limit input {
    padding: var(--rj-space-2);
    border: 1px solid var(--rj-border);
    border-radius: var(--rj-radius-md);
    font-size: 0.875rem;
    box-sizing: border-box;
    background: var(--rj-bg-elevated);
    color: var(--rj-text);
}
.scheduled-form__grid input {
    width: 100%;
}
.scheduled-form__limit {
    display: flex;
    flex-direction: column;
    gap: var(--rj-space-1);
    min-width: 0;
}
.scheduled-form__limit input {
    width: 9rem;
}
.scheduled-form__side {
    display: flex;
    flex-direction: column;
    gap: var(--rj-space-3);
    grid-column: 2;
    grid-row: 4 / span 2;
    width: 100%;
    max-width: 100%;
}
.scheduled-form__actions {
    display: flex;
    justify-content: flex-end;
    align-self: center;
    grid-column: 2;
    grid-row: 5;
}

/* Remote backup targets */
.backup-remote {
    padding: var(--rj-space-4);
    border: 1px solid var(--rj-border);
    border-radius: var(--rj-radius-lg);
    background: var(--rj-bg);
}
.backup-remote__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--rj-space-4);
    margin-bottom: var(--rj-space-4);
}
.backup-remote__header h4 {
    margin: 0 0 var(--rj-space-2) 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--rj-text);
}
.backup-remote__header p,
.backup-remote__empty {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--rj-text-muted);
    line-height: 1.4;
}
.backup-remote__beta-note {
    margin-top: var(--rj-space-2) !important;
    color: var(--rj-warning, #b7791f) !important;
}
.backup-remote__add {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) auto;
    gap: var(--rj-space-2);
    align-items: center;
    justify-content: end;
    min-width: 22rem;
    margin-top: 1.7rem;
}
.backup-remote__add select,
.backup-remote-target input[type="text"],
.backup-remote-target input[type="password"],
.backup-remote-target__secret {
    padding: var(--rj-space-2);
    border: 1px solid var(--rj-border);
    border-radius: var(--rj-radius-md);
    font-size: 0.875rem;
    background-color: var(--rj-bg);
    color: var(--rj-text);
}
.backup-remote__add select {
    background-color: var(--rj-bg-elevated);
    min-width: 0;
    width: 100%;
}
.backup-remote-target input::placeholder {
    color: var(--rj-text-muted);
    opacity: 0.75;
}
.backup-remote__list {
    display: flex;
    flex-direction: column;
    gap: var(--rj-space-3);
}
.backup-remote-target {
    border: 1px solid var(--rj-border);
    border-radius: var(--rj-radius-lg);
    padding: var(--rj-space-3);
    background: var(--rj-bg-elevated);
}
.backup-remote-target__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--rj-space-3);
    margin-bottom: var(--rj-space-3);
}
.backup-remote-target__title {
    display: flex;
    align-items: center;
    gap: var(--rj-space-2);
    min-width: 0;
}
.backup-remote-target__title input[type="text"] {
    min-width: 12rem;
    font-weight: 600;
}
.backup-remote-target__title span {
    display: inline-block;
    flex-shrink: 0;
    padding: var(--rj-space-0-5) var(--rj-space-2);
    border-radius: var(--rj-radius-pill, 9999px);
    background: var(--rj-bg);
    border: 1px solid var(--rj-border);
    color: var(--rj-text-muted);
    font-size: 0.75rem;
    white-space: nowrap;
}
.backup-remote-target__actions {
    display: flex;
    gap: var(--rj-space-2);
    flex-wrap: wrap;
    justify-content: flex-end;
}
.backup-remote-target__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--rj-space-3);
}
.backup-remote-target__grid label {
    display: flex;
    flex-direction: column;
    gap: var(--rj-space-1);
    min-width: 0;
    font-size: 0.8125rem;
    color: var(--rj-text-secondary);
}
.backup-remote-target__grid input[type="text"],
.backup-remote-target__grid input[type="password"],
.backup-remote-target__grid .backup-remote-target__secret {
    width: 100%;
    box-sizing: border-box;
}
.backup-remote-target__check {
    flex-direction: row !important;
    align-items: center;
}
.backup-remote-target__status {
    margin-top: var(--rj-space-3);
    font-size: 0.8125rem;
    color: var(--rj-text-muted);
}
.backup-remote-target__status[data-state="success"] {
    color: #166534;
}
.backup-remote-target__status[data-state="error"] {
    color: #b42318;
}

.backup-remote-files {
    margin-top: var(--rj-space-3);
    border-top: 1px solid var(--rj-border);
    padding-top: var(--rj-space-3);
    color: var(--rj-text-muted);
    font-size: 0.8125rem;
}

.backup-remote-file {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--rj-space-3);
    padding: var(--rj-space-2) 0;
    border-bottom: 1px solid var(--rj-border);
}

.backup-remote-file:last-child {
    border-bottom: 0;
}

.backup-remote-file__meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.backup-remote-file__meta strong {
    color: var(--rj-text);
    font-size: 0.8125rem;
    overflow-wrap: anywhere;
}

.backup-remote-file__actions {
    display: flex;
    gap: var(--rj-space-2);
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Cron setup card */
.scheduled-cron {
    margin-top: var(--rj-space-2);
    margin-bottom: var(--rj-space-2);
    border: 1px solid var(--rj-border);
    border-radius: var(--rj-radius-lg);
    background: var(--rj-bg);
}
.scheduled-cron summary {
    cursor: pointer;
    list-style: none;
    padding: var(--rj-space-3) var(--rj-space-4);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--rj-text);
}
.scheduled-cron summary::-webkit-details-marker {
    display: none;
}
.scheduled-cron summary::after {
    content: "+";
    float: right;
    color: var(--rj-text-muted);
}
.scheduled-cron[open] summary {
    border-bottom: 1px solid var(--rj-border);
}
.scheduled-cron[open] summary::after {
    content: "-";
}
.scheduled-cron p {
    margin: 0;
    padding: var(--rj-space-3) var(--rj-space-4) var(--rj-space-3);
    font-size: 0.8125rem;
    color: var(--rj-text-muted);
    line-height: 1.45;
}
.scheduled-cron .scheduled-cron__hint {
    padding-top: var(--rj-space-2);
    padding-bottom: var(--rj-space-4);
}
.scheduled-cron__line {
    display: grid;
    grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--rj-space-2);
    margin: 0 var(--rj-space-4) var(--rj-space-2-5);
}
.scheduled-cron__line:last-child {
    margin-bottom: var(--rj-space-4);
}
.scheduled-cron__line > span {
    color: var(--rj-text-muted);
    font-size: 0.8125rem;
}
.scheduled-cron__line code {
    padding: var(--rj-space-2) var(--rj-space-3);
    background: var(--rj-bg-elevated);
    color: var(--rj-text);
    border: 1px solid var(--rj-border);
    border-radius: var(--rj-radius-md);
    font-family: var(--font-mono, ui-monospace, SF Mono, Menlo, Consolas, monospace);
    font-size: 0.8125rem;
    overflow-x: auto;
    white-space: nowrap;
}
.scheduled-cron__line--fallback {
    grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr);
    margin-top: var(--rj-space-3);
}

@media (max-width: 700px) {
    .scheduled-cron__line,
    .scheduled-cron__line--fallback {
        grid-template-columns: 1fr;
    }
}

/* Backup list */
.scheduled-list {
    margin-top: var(--rj-space-5);
    padding: var(--rj-space-4);
    border: 1px solid var(--rj-border);
    border-radius: var(--rj-radius-lg);
    background: var(--rj-surface-group, var(--rj-bg));
}

.scheduled-list__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--rj-space-4);
    flex-wrap: wrap;
    margin-bottom: var(--rj-space-3);
}

.scheduled-list h4 {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
}
.scheduled-list__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.scheduled-list__table th,
.scheduled-list__table td {
    text-align: left;
    padding: var(--rj-space-2) var(--rj-space-3);
    border-bottom: 1px solid var(--rj-border);
}
.scheduled-list__table th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rj-text-muted);
    font-weight: 600;
}
.scheduled-list__empty {
    text-align: center !important;
    color: var(--rj-text-muted);
    padding: var(--rj-space-5) !important;
}
.scheduled-list__actions {
    display: flex;
    gap: var(--rj-space-2);
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Tier badges */
.scheduled-tier {
    display: inline-block;
    padding: var(--rj-space-0-5) var(--rj-space-2);
    border-radius: var(--rj-radius-pill, 9999px);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--rj-bg-subtle, #f5f5f4);
    color: var(--rj-text-muted);
}
.scheduled-tier--daily   { background: rgba(96, 165, 250, 0.15); color: #1d4ed8; }
.scheduled-tier--weekly  { background: rgba(96, 165, 250, 0.25); color: #1e40af; }
.scheduled-tier--monthly { background: rgba(167, 139, 250, 0.2); color: #6d28d9; }
.scheduled-tier--yearly  { background: rgba(251, 191, 36, 0.25); color: #92400e; }
.scheduled-tier--manual  { background: rgba(34, 197, 94, 0.18);  color: #166534; }

@media (max-width: 768px) {
    .backup-manual-grid {
        grid-template-columns: 1fr;
        gap: var(--rj-space-4);
    }

    .restore-mode-selector {
        grid-template-columns: 1fr;
    }

    .scheduled-status {
        width: 100%;
    }

    .scheduled-form {
        grid-template-columns: 1fr;
        gap: var(--rj-space-4);
    }

    .scheduled-form__side {
        grid-column: 1;
        grid-row: auto;
    }

    .scheduled-form__actions {
        grid-column: 1;
        grid-row: auto;
        justify-content: flex-start;
    }

    .logo-preview-group {
        flex-direction: column;
    }

    .theme-selector {
        flex-direction: column;
    }

    .danger-zone-card__action {
        flex-direction: column;
        align-items: stretch;
    }

    .danger-zone-card__action input {
        width: 100%;
    }

    .backup-remote__header,
    .backup-remote-target__header {
        flex-direction: column;
        align-items: stretch;
    }
    .backup-remote__add,
    .backup-remote-target__actions {
        justify-content: flex-start;
    }
    .backup-remote__add {
        grid-template-columns: 1fr;
        min-width: 0;
        width: 100%;
        margin-top: 0;
    }
    .backup-remote-target__grid {
        grid-template-columns: 1fr;
    }
    .scheduled-list__table th:nth-child(3),
    .scheduled-list__table td:nth-child(3) {
        display: none; /* hide size column on narrow screens */
    }
}


/* ============================================================
   SETUP WIZARD
   ============================================================ */

.setup-container {
    max-width: 520px;
}

.setup-lang-row {
    display: flex;
    gap: var(--rj-space-4);
}

.setup-lang-row .form-group {
    flex: 1;
    min-width: 0;
}

.setup-lang-row .form-group select {
    width: 100%;
}

.form-hint {
    display: block;
    margin-top: var(--rj-space-2);
    color: var(--rj-text-muted);
    font-size: 0.8125rem;
    line-height: 1.4;
}

.form-hint code {
    background: var(--rj-bg-sunken);
    padding: 1px 5px;
    border-radius: var(--rj-radius-sm);
    font-family: var(--rj-font-mono);
    font-size: 0.85em;
}

.theme-contrast-feedback {
    display: block;
    margin-top: var(--rj-space-1);
    color: var(--rj-text-muted);
    font-size: 0.75rem;
    line-height: 1.35;
}

.theme-contrast-feedback::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: var(--rj-space-1-5);
    border-radius: 50%;
    background: var(--rj-text-muted);
    vertical-align: 1px;
}

.theme-contrast-feedback[data-state="ok"] {
    color: var(--rj-text-muted);
}

.theme-contrast-feedback[data-state="ok"]::before {
    background: #16a34a;
}

.theme-contrast-feedback[data-state="error"] {
    color: var(--rj-danger);
}

.theme-contrast-feedback[data-state="error"]::before {
    background: #dc2626;
}

.password-field-row {
    display: flex;
    gap: var(--rj-space-2);
}

.password-field-row input {
    flex: 1;
}

.password-field-row .btn-sm {
    white-space: nowrap;
    align-self: stretch;
}

.generated-password {
    display: flex;
    align-items: center;
    gap: var(--rj-space-2);
    margin-top: var(--rj-space-2);
    padding: var(--rj-space-2) var(--rj-space-3);
    background: var(--rj-success-subtle);
    border: 1px solid rgba(22, 163, 74, 0.2);
    border-radius: var(--rj-radius-md);
    font-size: 0.875rem;
}

.generated-password code {
    flex: 1;
    font-family: var(--rj-font-mono);
    font-size: 0.9em;
    word-break: break-all;
    color: var(--rj-text);
}

.btn-copy {
    background: none;
    border: 1px solid var(--rj-border);
    border-radius: var(--rj-radius-sm);
    padding: 3px var(--rj-space-2-5);
    font-family: var(--rj-font-sans);
    font-size: 0.8125rem;
    cursor: pointer;
    white-space: nowrap;
    color: var(--rj-text-muted);
    transition: background-color var(--rj-duration-fast) var(--rj-ease),
                color var(--rj-duration-fast) var(--rj-ease);
}

.btn-copy:hover {
    background: var(--rj-bg-hover);
    color: var(--rj-text);
}


/* ============================================================
   PASSWORD REQUIREMENTS
   ============================================================ */

.password-requirements {
    margin-bottom: var(--rj-space-5);
}

.password-requirements small {
    color: var(--rj-text-muted);
    font-weight: 500;
}

.password-requirements ul {
    list-style: none;
    padding: 0;
    margin: var(--rj-space-2) 0 0 0;
}

.password-requirements .requirement {
    padding: var(--rj-space-0-5) 0;
    font-size: 0.8125rem;
    color: var(--rj-text-muted);
    transition: color var(--rj-duration-fast) var(--rj-ease);
}

.password-requirements .requirement::before {
    content: '\2022';
    margin-right: var(--rj-space-2);
}

.password-requirements .requirement.met {
    color: var(--rj-success);
}

.password-requirements .requirement.met::before {
    content: '\2713';
}

.password-requirements .requirement.unmet {
    color: var(--rj-danger);
}

.password-requirements .requirement.unmet::before {
    content: '\2717';
}

.password-requirements--compact .requirement-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rj-space-1) var(--rj-space-2);
    margin-top: var(--rj-space-2);
}

.password-requirements--compact .requirement {
    padding: var(--rj-space-0-5) var(--rj-space-2);
    font-size: 0.75rem;
    border-radius: var(--rj-radius-sm);
    background: var(--rj-bg-sunken);
    white-space: nowrap;
}

.password-requirements--compact .requirement::before {
    content: none;
    margin-right: 0;
}

.password-requirements--compact .requirement.met {
    background: var(--rj-success-subtle);
}

.password-requirements--compact .requirement.unmet {
    background: rgba(239, 68, 68, 0.08);
}


/* ============================================================
   TOAST NOTIFICATIONS
   ============================================================ */

.toast {
    position: fixed;
    top: calc(56px + var(--rj-space-4));
    right: var(--rj-space-5);
    display: flex;
    align-items: center;
    gap: var(--rj-space-3);
    padding: var(--rj-space-3) var(--rj-space-5);
    background: var(--rj-bg-elevated);
    border: 1px solid var(--rj-border);
    border-radius: var(--rj-radius-sm);
    box-shadow: var(--rj-shadow-lg);
    color: var(--rj-text);
    font-size: 0.8125rem;
    z-index: var(--rj-z-toast);
    animation: rj-slide-in-right var(--rj-duration-normal) var(--rj-ease);
    max-width: 380px;
}

.toast::before {
    content: '';
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--rj-text-muted);
}

.toast.success {
    border-color: color-mix(in srgb, var(--rj-brand) 70%, var(--rj-border));
    background: var(--rj-brand-subtle);
}

.toast.success::before {
    background: var(--rj-brand);
    /* Checkmark via mask */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
    -webkit-mask-size: 12px;
    mask-size: 12px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.toast.error {
    border-color: var(--rj-danger);
}

.toast.warning {
    border-color: var(--rj-warning);
    background: var(--rj-warning-subtle);
    color: var(--rj-warning-text-strong);
}

.toast.warning::before {
    background: var(--rj-warning);
}

.toast.error::before {
    background: var(--rj-danger);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");
    -webkit-mask-size: 12px;
    mask-size: 12px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.toast-fade-out {
    animation: rj-fade-out 0.3s var(--rj-ease) forwards;
}

.editor-undo-redo {
    display: flex;
    gap: var(--rj-space-0-5);
}

.editor-undo-redo .btn {
    padding: var(--rj-space-1) var(--rj-space-2);
    min-width: 0;
}

.editor-undo-redo .btn:disabled {
    opacity: 0.35;
    cursor: default;
}

@keyframes rj-fade-out {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(20px); }
}


/* ============================================================
   LOADING
   ============================================================ */

.loading {
    opacity: 0.6;
    pointer-events: none;
}


/* ============================================================
   ANIMATIONS (referenced by modal/toast)
   ============================================================ */

@keyframes rj-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes rj-slide-in {
    from { opacity: 0; transform: scale(0.96) translateY(-8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes rj-slide-in-right {
    from { opacity: 0; transform: translateX(100%); }
    to { opacity: 1; transform: translateX(0); }
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
    .admin-list-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-pagination {
        justify-content: flex-start;
    }

    .admin-sidebar {
        position: fixed;
        top: var(--rj-topbar-h);
        left: 0;
        bottom: 0;
        width: 200px;
        z-index: var(--rj-z-sticky);
        background: var(--rj-sidebar-bg);
        transform: translateX(-100%);
    }

    .admin-sidebar.open {
        transform: translateX(0);
        box-shadow: var(--rj-shadow-xl);
    }

    .admin-main {
        border-radius: 0;
        box-shadow: none;
    }

    .sidebar-toggle {
        display: flex;
    }

    .topbar-selectors {
        display: none !important;
    }

    .topbar-actions {
        display: none;
    }

    .admin-container {
        padding: var(--rj-space-4);
    }

    .editor-header {
        top: calc(var(--rj-topbar-h) + 4px);
        flex-direction: column;
        align-items: flex-start;
        gap: var(--rj-space-3);
    }

    .editor-header-left,
    .editor-header-right,
    .ce-section-editor__tools {
        flex-wrap: wrap;
    }

    .section-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .section-heading {
        width: 100%;
        flex-wrap: wrap;
    }

    .section-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .backup-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--rj-space-3);
    }

    .ce-field {
        flex-direction: column;
        gap: var(--rj-space-0-5);
    }

    .ce-page-settings-grid,
    .ce-seo-grid,
    .ce-visibility-grid,
    .access-maintenance-grid,
    .settings-visual-grid {
        grid-template-columns: 1fr;
    }

    .ce-editor-tabs {
        overflow-x: auto;
    }

    .ce-editor-panels {
        padding: var(--rj-space-3);
    }

    .ce-editor-panel[data-editor-panel="settings"].active,
    .ce-editor-panel[data-editor-panel="seo"].active,
    .ce-editor-panel[data-editor-panel="access"].active,
    .ce-content-layout,
    .section-item[data-type="text"] .section-fields,
    .section-item[data-type="image"] .section-fields {
        display: block;
    }

    .ce-content-layout--compact .section-item:not(.is-open) .section-fields {
        display: none;
    }

    .section-fields .form-group {
        margin-bottom: var(--rj-space-3);
    }

    .section-item[data-type="image"] .section-field-group--width {
        grid-column: auto;
    }

    .ce-section-nav {
        position: static;
        max-height: 180px;
        margin-bottom: var(--rj-space-4);
    }

    .ce-section-insert__menu {
        grid-template-columns: 1fr;
    }

    .ce-field-label {
        flex: none;
        text-align: left;
        padding-top: 0;
    }

    .ce-meta {
        flex-direction: column;
        gap: var(--rj-space-1);
    }

    .login-page--split {
        grid-template-columns: 1fr;
    }

    .login-page--split .login-media {
        min-height: 34vh;
    }

    .login-container {
        margin: var(--rj-space-4);
        padding: var(--rj-space-6);
    }
}

/* ============================================================
   EVENTS EDITOR (Dashboard)
   ============================================================ */

/* (selector-divider removed — selectors in topbar now) */

.ce-group-actions {
    margin-left: auto;
    display: flex;
    gap: var(--rj-space-1);
}

.ce-field-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--rj-space-3);
}

/* Several fields in one row: the label sits above its field, so a date
   or time input keeps its full width instead of hiding behind a 140px label */
.ce-field-row > .ce-field {
    flex-direction: column;
    align-items: stretch;
    gap: var(--rj-space-1);
}

.ce-field-row > .ce-field > .ce-field-label {
    flex: 0 0 auto;
    padding-top: 0;
    text-align: left;
}

.ce-field-row > .ce-field > .ce-input {
    width: 100%;
}

.ce-input[type="date"],
.ce-input[type="datetime-local"] {
    min-width: 9rem;
}

.ce-input[type="time"] {
    min-width: 6.5rem;
}

.ce-lang-section {
    margin-top: var(--rj-space-3);
    border: 1px solid var(--rj-border, #e0e0e0);
    border-radius: var(--rj-radius-md, 6px);
    overflow: hidden;
}

.ce-lang-header {
    display: flex;
    align-items: stretch;
    gap: var(--rj-space-2);
    background: var(--rj-bg-sunken, #f5f5f5);
    border-bottom: 1px solid var(--rj-border, #e0e0e0);
}

.ce-lang-tabs {
    display: flex;
    gap: 0;
}

.ce-lang-tab {
    padding: var(--rj-space-1-5) var(--rj-space-3-5);
    border: none;
    background: transparent;
    color: var(--rj-text-muted, #888);
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}

.ce-lang-tab:hover {
    color: var(--rj-text, #333);
}

.ce-lang-tab.active {
    color: var(--rj-primary, #3858e9);
    border-bottom-color: var(--rj-primary, #3858e9);
}

.ce-lang-translate {
    margin: var(--rj-space-1-5) var(--rj-space-2) var(--rj-space-1-5) auto;
    white-space: nowrap;
}

.ce-lang-panel {
    padding: var(--rj-space-3);
}

.ce-lang-panel .ce-field + .ce-field {
    margin-top: var(--rj-space-2);
}

/* ============================================
   MENU ORDER
   ============================================ */

.menu-order-list {
    border: 1px solid var(--rj-border, #e5e5e5);
    border-radius: var(--rj-radius-lg);
    overflow: hidden;
}

.menu-order-item {
    display: flex;
    align-items: center;
    padding: var(--rj-space-2-5) var(--rj-space-3-5);
    gap: var(--rj-space-3);
    border-bottom: 1px solid var(--rj-border, #e5e5e5);
    background: var(--rj-bg, #fff);
    transition: background 0.15s ease;
}

.menu-order-item:last-child {
    border-bottom: none;
}

.menu-order-item:hover {
    background: var(--rj-bg-hover, #f5f5f5);
}

.menu-order-item.dragging {
    opacity: 0.5;
}

.menu-order-item.drag-over-top {
    box-shadow: inset 0 3px 0 var(--rj-primary, #3858e9);
}

.menu-order-item.drag-over-bottom {
    box-shadow: inset 0 -3px 0 var(--rj-primary, #3858e9);
}

.menu-order-item__drag-handle {
    cursor: grab;
    color: var(--rj-text-muted, #a3a3a3);
    display: flex;
    align-items: center;
    padding: var(--rj-space-0-5);
    flex-shrink: 0;
}

.menu-order-item__drag-handle:active {
    cursor: grabbing;
}

.menu-order-item__drag-handle svg {
    width: 18px;
    height: 18px;
}

.menu-order-item__drag-handle:hover {
    color: var(--rj-text, #171717);
}

.menu-order-item__label {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
    font-weight: 500;
    color: var(--rj-text, #171717);
}

.menu-order-item__slug {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 0.8rem;
    color: var(--rj-text-muted, #737373);
    font-family: 'Geist Mono', ui-monospace, monospace;
}

.menu-order-item__actions {
    display: flex;
    flex-shrink: 0;
    gap: var(--rj-space-1);
}

.menu-order-item__actions .btn-icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--rj-border, #e5e5e5);
    border-radius: var(--rj-radius-md);
    background: var(--rj-bg, #fff);
    color: var(--rj-text-muted, #737373);
    cursor: pointer;
    transition: all 0.15s ease;
}

.menu-order-item__actions .btn-icon:hover:not(:disabled) {
    background: var(--rj-bg-hover, #f5f5f5);
    color: var(--rj-text, #171717);
    border-color: var(--rj-text-muted, #a3a3a3);
}

.menu-order-item__actions .btn-icon:disabled {
    opacity: 0.3;
    cursor: default;
}

.menu-order-empty {
    padding: var(--rj-space-6);
    text-align: center;
    color: var(--rj-text-muted, #737373);
}

/* ============================================
   ICON MANAGER
   ============================================ */

.icon-manager-path {
    margin: 0 0 var(--rj-space-4);
    color: var(--rj-text-muted, #737373);
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 0.82rem;
}

.icon-manager-toolbar {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(180px, 240px);
    gap: var(--rj-space-3);
    align-items: end;
    margin: 0 0 var(--rj-space-3-5);
}

.icon-manager-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--rj-space-3-5);
}

.icon-manager-card {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: var(--rj-space-3);
    align-items: center;
    padding: var(--rj-space-3-5) var(--rj-space-3) var(--rj-space-3-5) var(--rj-space-3-5);
    border: 1px solid var(--rj-border, #e5e5e5);
    border-radius: var(--rj-radius-md);
    background: var(--rj-surface-item, var(--rj-bg));
    box-shadow: none;
}

.icon-manager-card--highlight {
    border-color: var(--rj-primary, #10b3a3);
    background: color-mix(in srgb, var(--rj-primary) 8%, var(--rj-surface-item, var(--rj-bg)));
}

.icon-manager-card__preview {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--rj-radius-lg);
    background: var(--rj-primary-subtle, rgba(37, 99, 235, 0.08));
    color: var(--rj-primary, #3858e9);
}

.icon-manager-card__preview svg,
.icon-manager-preview-box svg {
    width: 28px;
    height: 28px;
}

.icon-manager-card__body {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.icon-manager-card__body strong,
.icon-manager-card__body span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.icon-manager-card__body strong {
    color: var(--rj-text, #171717);
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.875rem;
    line-height: 1.35;
}

.icon-manager-card__body span {
    color: var(--rj-text-muted, #737373);
    font-size: 0.875rem;
    line-height: 1.35;
}

.icon-manager-card__actions {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--rj-space-1);
    align-self: stretch;
}

.icon-manager-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--rj-border, #e5e5e5);
    border-radius: var(--rj-radius-md);
    background: var(--rj-bg-elevated);
    color: var(--rj-text-muted, #737373);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.icon-manager-action-btn:hover:not(:disabled),
.icon-manager-action-btn:focus-visible {
    background: var(--rj-bg-hover, #f5f5f5);
    border-color: var(--rj-text-muted, #a3a3a3);
    color: var(--rj-text, #171717);
}

.icon-manager-action-btn--danger:hover:not(:disabled),
.icon-manager-action-btn--danger:focus-visible {
    background: var(--rj-danger-subtle, rgba(220, 38, 38, 0.08));
    border-color: var(--rj-danger, #dc2626);
    color: var(--rj-danger, #dc2626);
}

.icon-manager-action-btn svg {
    width: 16px;
    height: 16px;
    stroke-width: 1.5;
    flex-shrink: 0;
}

.icon-manager-action-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.icon-manager-svg-field {
    display: grid;
    gap: var(--rj-space-1);
}

.icon-manager-svg-field .form-hint {
    margin-top: 0;
}

.icon-manager-svg-tools {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rj-space-2);
    margin-top: var(--rj-space-0-5);
}

.icon-manager-svg-input {
    min-height: 180px;
    font-family: 'Geist Mono', ui-monospace, monospace;
    resize: vertical;
}

.icon-manager-preview-box {
    display: flex;
    align-items: center;
    gap: var(--rj-space-3-5);
    min-height: 56px;
    padding: var(--rj-space-3);
    border: 1px solid var(--rj-border, #e5e5e5);
    border-radius: var(--rj-radius-lg);
    background: var(--rj-bg-sunken, #f5f5f5);
    color: var(--rj-text, #171717);
}

.icon-manager-preview-box span {
    color: var(--rj-text-muted, #737373);
}

.icon-manager-rename-warning {
    margin-top: var(--rj-space-3);
    padding: var(--rj-space-3) var(--rj-space-3-5);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-bottom: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: var(--rj-radius-lg);
    background: rgba(245, 158, 11, 0.12);
}

.icon-manager-rename-warning .info-banner__inner {
    display: block;
    max-width: none;
    margin: 0;
    padding-right: 0;
}

.icon-manager-rename-warning .info-banner__title {
    color: #fbbf24;
}

.icon-manager-rename-warning .info-banner__body {
    display: block;
    margin-top: var(--rj-space-2);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--rj-text, #e5e7eb);
}

.iconify-import-controls {
    display: grid;
    grid-template-columns: minmax(160px, 0.8fr) minmax(220px, 1.4fr) auto;
    gap: var(--rj-space-3);
    align-items: end;
}

.icon-set-picker {
    position: relative;
}

.icon-set-picker__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rj-space-2);
    width: 100%;
    text-align: left;
    cursor: pointer;
    background: var(--rj-bg-elevated);
    border: 1px solid var(--rj-border);
    border-radius: var(--rj-radius-md);
    padding: var(--rj-space-2) var(--rj-space-3);
    font-size: var(--rj-text-md);
    color: var(--rj-text);
    transition: border-color var(--rj-duration-fast);
}

.icon-set-picker__btn:focus-visible {
    outline: 2px solid var(--rj-primary);
    outline-offset: 1px;
}

.icon-set-picker__btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--rj-text-muted);
    transition: transform var(--rj-duration-fast);
}

.icon-set-picker__btn[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.icon-set-picker__list {
    position: fixed;
    z-index: calc(var(--rj-z-modal) + 10);
    background: var(--rj-bg-elevated);
    border: 1px solid var(--rj-border);
    border-radius: var(--rj-radius-md);
    box-shadow: var(--rj-shadow-lg);
    padding: var(--rj-space-1);
    margin: 0;
    list-style: none;
    max-height: 260px;
    overflow-y: auto;
}

.icon-set-picker__list [role="option"] {
    padding: 7px var(--rj-space-2-5);
    border-radius: var(--rj-radius-sm);
    cursor: pointer;
    font-size: var(--rj-text-md);
    color: var(--rj-text);
}

.icon-set-picker__list [role="option"]:hover,
.icon-set-picker__list [role="option"][aria-selected="true"] {
    background: var(--rj-primary-muted);
    color: var(--rj-primary);
}

.iconify-import-results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--rj-space-2-5);
    max-height: 420px;
    overflow: auto;
    padding-right: var(--rj-space-1);
}

.iconify-import-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: var(--rj-space-2-5);
    align-items: center;
    padding: var(--rj-space-2-5);
    border: 1px solid var(--rj-border, #2f2f2f);
    border-radius: var(--rj-radius-lg);
    background: var(--rj-bg-sunken, #111);
}

.iconify-import-card--imported {
    border-color: color-mix(in srgb, var(--rj-primary, #10b3a3) 42%, var(--rj-border, #2f2f2f));
    background: color-mix(in srgb, var(--rj-primary, #10b3a3) 9%, var(--rj-bg-sunken, #111));
}

.iconify-import-card__preview {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--rj-radius-lg);
    color: var(--rj-primary, #10b3a3);
    background: color-mix(in srgb, var(--rj-primary, #10b3a3) 14%, transparent);
}

.iconify-import-card__preview svg {
    width: 24px;
    height: 24px;
}

.iconify-import-card__body {
    min-width: 0;
}

.iconify-import-card__body strong,
.iconify-import-card__body span,
.iconify-import-card__body code {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.iconify-import-card__body strong {
    color: var(--rj-text, #fff);
    font-size: 0.9rem;
    font-weight: 600;
}

.iconify-import-card__body span,
.iconify-import-card__body code {
    margin-top: var(--rj-space-0-5);
    color: var(--rj-text-muted, #737373);
    font-family: var(--rj-font, inherit);
    font-size: 0.78rem;
}

#iconifyImportQuery::-webkit-search-cancel-button,
#iconManagerSearch::-webkit-search-cancel-button {
    filter: grayscale(1) brightness(1.7);
    opacity: 0.72;
}

.dashboard-home {
    display: flex;
    flex-direction: column;
    gap: var(--rj-space-4);
}

.dashboard-section {
    border: 1px solid var(--rj-border, #e5e5e5);
    border-radius: var(--rj-radius-lg);
    background: var(--rj-surface-panel, var(--rj-bg-elevated));
    color: var(--rj-text, #111);
    padding: var(--rj-space-4);
    box-shadow: none;
}

.dashboard-status-strip {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--rj-border, #e5e5e5);
    border-radius: var(--rj-radius-md);
    background: var(--rj-border, #e5e5e5);
}

.dashboard-status-chip {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    min-height: 58px;
    border: 0;
    border-radius: 0;
    background: var(--rj-bg-elevated, #fff);
    color: var(--rj-text, #111);
    cursor: pointer;
    padding: 9px var(--rj-space-3) var(--rj-space-2-5);
    text-align: left;
    font: inherit;
    transition: background var(--rj-duration-fast) var(--rj-ease), box-shadow var(--rj-duration-fast) var(--rj-ease);
}

.dashboard-status-chip:hover,
.dashboard-status-chip:focus-visible {
    background: var(--rj-brand-subtle, rgba(96, 165, 250, 0.12));
    box-shadow: inset 0 -2px 0 var(--rj-brand, #60a5fa);
    outline: 2px solid var(--rj-brand, #60a5fa);
    outline-offset: -2px;
}

.dashboard-status-chip--accent {
    background: var(--rj-brand-subtle, rgba(96, 165, 250, 0.12));
}

.dashboard-status-chip__label {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: var(--rj-text-muted, #737373);
    font-size: 0.72rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-status-chip__value {
    display: block;
    max-width: 100%;
    color: var(--rj-text, #111);
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.25;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-status-chip--wide {
    grid-column: span 2;
}

.dashboard-section--ai {
    display: flex;
    flex-direction: column;
    gap: var(--rj-space-3-5);
}

.dashboard-section[hidden] {
    display: none !important;
}

.dashboard-section--analytics {
    display: flex;
    flex-direction: column;
    gap: var(--rj-space-3);
}

.dashboard-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--rj-space-4);
}

.dashboard-section-header h3 {
    margin: 0 0 var(--rj-space-1);
    color: var(--rj-text, #111);
    font-size: 1rem;
}

.dashboard-section-actions {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: var(--rj-space-2);
}

.ai-usage-summary {
    color: var(--rj-text-muted);
    font-size: 0.8125rem;
    white-space: nowrap;
}

.ai-image-jobs-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rj-space-3);
    border: 1px solid var(--rj-border, #e5e5e5);
    border-radius: var(--rj-radius-lg);
    background: var(--rj-bg-elevated, #fff);
    padding: var(--rj-space-3) var(--rj-space-3-5);
}

.ai-image-jobs-panel[hidden] {
    display: none !important;
}

.ai-image-jobs-panel__copy {
    flex: 1 1 auto;
    min-width: 0;
}

.ai-image-jobs-panel__copy h4 {
    margin: 0;
    color: var(--rj-text, #111);
    font-size: 0.92rem;
}

.ai-image-jobs-panel__copy p,
.ai-image-jobs-panel__meta {
    margin: 3px 0 0;
    color: var(--rj-text-muted, #737373);
    font-size: 0.82rem;
    line-height: 1.35;
}

.ai-image-jobs-panel__actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 1 48%;
    gap: var(--rj-space-2-5);
    min-width: 0;
}

.ai-image-jobs-panel__meta {
    display: block;
    min-width: 0;
    max-width: 100%;
    max-height: 5.4em;
    overflow: hidden;
    overflow-wrap: anywhere;
    white-space: normal;
}

.ai-image-jobs-panel__actions .btn {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 7px;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .ai-image-jobs-panel {
        align-items: stretch;
        flex-direction: column;
    }

    .ai-image-jobs-panel__actions {
        justify-content: space-between;
        flex-basis: auto;
        width: 100%;
    }
}

.dashboard-section-actions--stacked {
    align-items: flex-end;
    flex-direction: column;
}

.dashboard-range-tabs {
    display: inline-flex;
    gap: var(--rj-space-1);
    border: 1px solid var(--rj-border, #e5e5e5);
    border-radius: 999px;
    padding: 3px;
    background: var(--rj-bg, #f8fafc);
}

.dashboard-range-tab {
    min-height: 28px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--rj-text-muted, #737373);
    cursor: pointer;
    padding: var(--rj-space-1) var(--rj-space-2-5);
    font: inherit;
    font-size: 0.8rem;
}

.dashboard-range-tab.active {
    background: var(--rj-primary, #3858e9);
    color: var(--rj-text-on-primary, #fff);
}

.dashboard-content-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--rj-space-2);
}

.dashboard-content-pills span {
    display: inline-flex;
    align-items: center;
    gap: var(--rj-space-1-5);
    min-height: 30px;
    border: 1px solid var(--rj-border, #e5e5e5);
    border-radius: 999px;
    padding: var(--rj-space-1) var(--rj-space-2-5);
    color: var(--rj-text-muted, #737373);
    font-size: 0.8rem;
}

.dashboard-content-pills strong {
    color: var(--rj-text, #111);
    font-weight: 700;
}

.dashboard-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: var(--rj-space-2-5);
}

.dashboard-stat-grid--analytics {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.dashboard-stat-card,
.dashboard-panel {
    border: 1px solid var(--rj-border, #e5e5e5);
    border-radius: var(--rj-radius-md);
    background: var(--rj-surface-item, var(--rj-bg));
    color: var(--rj-text, #111);
    padding: var(--rj-space-3);
    box-shadow: none;
}

.dashboard-stat-card {
    display: flex;
    min-height: 74px;
    flex-direction: column;
}

.dashboard-stat-card span {
    display: block;
    color: var(--rj-text-muted, #737373);
    font-size: 0.78rem;
    line-height: 1.25;
}

.dashboard-stat-card strong {
    display: block;
    margin-top: auto;
    color: var(--rj-text, #111);
    font-size: 1.45rem;
    line-height: 1;
}

.dashboard-home-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--rj-space-2-5);
}

.dashboard-home-grid--analytics,
.dashboard-home-grid--details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-home-grid--analytics .dashboard-panel,
.dashboard-home-grid--details .dashboard-panel {
    grid-column: auto;
}

.dashboard-home-grid .dashboard-panel:nth-child(1),
.dashboard-home-grid .dashboard-panel:nth-child(2),
.dashboard-home-grid .dashboard-panel:nth-child(5) {
    grid-column: span 2;
}

.dashboard-home-grid--analytics .dashboard-panel:nth-child(1),
.dashboard-home-grid--analytics .dashboard-panel:nth-child(2),
.dashboard-home-grid--details .dashboard-panel:nth-child(1),
.dashboard-home-grid--details .dashboard-panel:nth-child(2) {
    grid-column: auto;
}

.dashboard-panel h3,
.dashboard-section-title {
    margin: 0 0 var(--rj-space-2-5);
    color: var(--rj-text, #111);
    font-size: 0.92rem;
}

.dashboard-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rj-space-3);
    margin-bottom: var(--rj-space-2-5);
}

.dashboard-panel-header h3 {
    margin: 0;
}

.dashboard-panel-header span {
    color: var(--rj-text-muted, #737373);
    font-size: 0.78rem;
}

.dashboard-section-title {
    margin-top: var(--rj-space-1);
}

.dashboard-chart-panel {
    padding-bottom: var(--rj-space-2-5);
}

.dashboard-chart {
    min-height: 220px;
}

.dashboard-traffic-svg {
    display: block;
    width: 100%;
    height: auto;
    min-height: 220px;
    overflow: visible;
}

.dashboard-chart-grid line {
    stroke: var(--rj-border, #e5e5e5);
    stroke-width: 1;
    opacity: 0.85;
}

.dashboard-chart-grid text,
.dashboard-chart-xlabels text {
    fill: var(--rj-text-muted, #737373);
    font-size: 0.6875rem;
}

.dashboard-chart-area {
    fill: color-mix(in srgb, var(--rj-primary, #3858e9) 20%, transparent);
}

.dashboard-chart-line {
    fill: none;
    stroke: var(--rj-primary, #3858e9);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3;
}

.dashboard-chart-points circle {
    fill: var(--rj-bg-elevated, #fff);
    stroke: var(--rj-primary, #3858e9);
    stroke-width: 2;
}

.dashboard-hour-panel {
    padding-bottom: var(--rj-space-3);
}

.dashboard-hour-chart {
    display: grid;
    grid-template-columns: repeat(24, minmax(0, 1fr));
    align-items: end;
    gap: 5px;
    min-height: 150px;
}

.dashboard-hour-bar {
    display: grid;
    min-width: 0;
    gap: 5px;
}

.dashboard-hour-bar__track {
    position: relative;
    display: flex;
    align-items: end;
    height: 118px;
    border-radius: var(--rj-radius-md);
    background: var(--rj-bg, #f8fafc);
    overflow: hidden;
}

.dashboard-hour-bar__fill {
    display: block;
    width: 100%;
    min-height: 3px;
    border-radius: var(--rj-radius-md) var(--rj-radius-md) 0 0;
    background: linear-gradient(180deg, var(--rj-primary, #3858e9), color-mix(in srgb, var(--rj-primary, #3858e9) 52%, transparent));
}

.dashboard-hour-bar__label {
    min-height: 16px;
    color: var(--rj-text-muted, #737373);
    font-size: 0.68rem;
    line-height: 1;
    text-align: center;
}

.dashboard-top-pages {
    display: flex;
    flex-direction: column;
    gap: var(--rj-space-1-5);
}

.dashboard-top-page {
    display: flex;
    justify-content: space-between;
    gap: var(--rj-space-3);
    border-bottom: 1px solid var(--rj-border, #e5e5e5);
    padding-bottom: var(--rj-space-1-5);
    color: var(--rj-text-secondary, #525252);
}

.dashboard-top-page > span {
    min-width: 0;
}

.dashboard-top-page > span > strong {
    display: block;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.dashboard-top-page small {
    display: block;
    margin-top: 3px;
    color: var(--rj-text-muted, #737373);
    font-size: 0.78rem;
}

.dashboard-top-page:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.dashboard-breakdown-row {
    display: flex;
    justify-content: space-between;
    gap: var(--rj-space-3);
    border-bottom: 1px solid var(--rj-border, #e5e5e5);
    padding-bottom: var(--rj-space-1-5);
    color: var(--rj-text-secondary, #525252);
}

.dashboard-breakdown-row + .dashboard-breakdown-row {
    margin-top: var(--rj-space-1-5);
}

.dashboard-breakdown-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.dashboard-breakdown-row span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.dashboard-split-lists {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--rj-space-3-5);
}

.dashboard-status-text,
.dashboard-empty {
    margin: 0;
    color: var(--rj-text-muted, #737373);
}

.dashboard-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rj-space-2);
    margin-top: var(--rj-space-3);
}

.dashboard-details {
    border-top: 1px solid var(--rj-border, #e5e5e5);
    padding-top: var(--rj-space-2-5);
}

.dashboard-details summary {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    border: 1px solid var(--rj-border, #e5e5e5);
    border-radius: 999px;
    padding: var(--rj-space-1) var(--rj-space-2-5);
    color: var(--rj-text-muted, #737373);
    cursor: pointer;
    font-size: 0.82rem;
    user-select: none;
}

.dashboard-details summary:hover {
    border-color: var(--rj-primary, #3858e9);
    color: var(--rj-text, #111);
}

.dashboard-details[open] summary {
    margin-bottom: var(--rj-space-2-5);
}

.ai-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--rj-space-4);
    align-items: stretch;
    min-width: 0;
}

.ai-card--tools {
    grid-column: 1 / -1;
    grid-row: 1;
}

.ai-card--assistant {
    grid-column: 1 / -1;
    grid-row: 2;
}

.ai-card {
    min-width: 0;
    border: 1px solid var(--rj-border, #e5e5e5);
    border-radius: var(--rj-radius-md);
    background: var(--rj-surface-item, var(--rj-bg));
    color: var(--rj-text, #111);
    padding: var(--rj-space-4);
    box-shadow: none;
}

.ai-card--assistant,
.ai-card--tools {
    display: flex;
    min-height: 0;
    flex-direction: column;
}

.ai-card h3 {
    margin: 0 0 var(--rj-space-2-5);
    color: var(--rj-text, #111);
    font-size: 0.92rem;
}

.ai-tool-tabs {
    display: inline-flex;
    align-self: flex-start;
    gap: var(--rj-space-1);
    margin-bottom: var(--rj-space-3);
    border: 1px solid var(--rj-border, #e5e5e5);
    border-radius: 999px;
    padding: 3px;
    background: var(--rj-bg, #f8fafc);
}

.ai-tool-tab {
    min-height: 30px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--rj-text-muted, #737373);
    cursor: pointer;
    padding: var(--rj-space-1) var(--rj-space-3);
    font: inherit;
    font-size: 0.84rem;
}

.ai-tool-tab.active {
    background: var(--rj-primary, #3858e9);
    color: var(--rj-text-on-primary, #fff);
}

.ai-tool-panel {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
    gap: var(--rj-space-3);
}

#aiImageForm {
    display: grid;
    grid-template-columns: minmax(320px, 1.2fr) minmax(320px, 1fr);
    gap: var(--rj-space-1-5) 18px;
    align-items: start;
}

.ai-image-column {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--rj-space-1-5);
}

#aiImageForm .form-group {
    margin-bottom: 0;
}

#aiAuditRun {
    align-self: flex-start;
    width: auto;
}

.ai-image-options-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--rj-space-2) var(--rj-space-3);
    align-items: end;
}

.ai-image-model-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rj-space-3);
}

.ai-image-filename-row {
    display: flex;
    align-items: center;
    gap: var(--rj-space-2);
}

.ai-image-filename-row input {
    flex: 1 1 auto;
    min-width: 0;
}

.ai-image-filename-row button {
    flex: 0 0 auto;
    white-space: nowrap;
}

.ai-image-options-grid .form-group {
    min-width: 0;
}

.ai-image-options-grid label {
    min-height: 2.45em;
    display: flex;
    align-items: flex-end;
    line-height: 1.2;
}

.ai-image-options-grid select,
.ai-image-options-grid input {
    width: 100%;
    height: 38px;
    min-height: 38px;
    min-width: 0;
    box-sizing: border-box;
}

.ai-image-command-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rj-space-3);
    flex-wrap: wrap;
    padding: 0;
}

.ai-reference-control {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: var(--rj-space-2);
    flex-wrap: wrap;
    flex: 1 1 280px;
}

.ai-reference-name {
    max-width: 220px;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    color: var(--rj-text-muted, #737373);
    font-size: 0.78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-reference-clear {
    min-height: 28px;
    padding: 3px var(--rj-space-2);
}

.ai-reference-clear[hidden] {
    display: none !important;
}

.ai-reference-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rj-space-1-5);
    margin-top: -4px;
}

.ai-reference-list[hidden] {
    display: none !important;
}

.ai-reference-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--rj-space-1-5);
    max-width: 190px;
    min-height: 28px;
    padding: 3px 5px 3px var(--rj-space-1);
    border: 1px solid var(--rj-border, #e5e5e5);
    border-radius: var(--rj-radius-md);
    background: var(--rj-bg-sunken, #f5f5f5);
    color: var(--rj-text, #111);
    font-size: 0.76rem;
}

.ai-reference-chip__thumb {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    border-radius: var(--rj-radius-sm);
    background-position: center;
    background-size: cover;
    border: 1px solid var(--rj-border, #e5e5e5);
}

.ai-reference-chip__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-reference-chip__remove {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    border: 0;
    border-radius: var(--rj-radius-sm);
    background: transparent;
    color: var(--rj-text-muted, #737373);
    cursor: pointer;
    line-height: 1;
}

.ai-reference-chip__remove:hover {
    background: var(--rj-bg-hover, #eee);
    color: var(--rj-text, #111);
}

.ai-ratio-select {
    position: relative;
}

.ai-size-native {
    display: none;
}

.ai-size-trigger {
    position: relative;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    column-gap: var(--rj-space-2);
    width: 100%;
    height: 40px;
    min-height: 40px;
    box-sizing: border-box;
    border: 1px solid var(--rj-border, #e5e5e5);
    border-radius: var(--rj-radius-md, 8px);
    background: var(--rj-bg-elevated, #fff);
    color: var(--rj-text, #111);
    cursor: pointer;
    font: inherit;
    font-size: 0.9375rem;
    line-height: 1.3;
    padding: 0 34px 0 var(--rj-space-3-5);
    text-align: left;
}

.ai-size-trigger:focus,
.ai-size-trigger[aria-expanded="true"] {
    outline: none;
    border-color: var(--rj-primary);
    box-shadow: 0 0 0 3px var(--rj-primary-muted);
}

.ai-size-trigger-label {
    display: flex;
    align-items: center;
    gap: var(--rj-space-1-5);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-size-trigger-label span {
    min-width: 0;
}

.ai-size-trigger-label span:first-child {
    flex: 0 0 auto;
}

.ai-size-trigger-label span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-size-trigger::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    opacity: 0.7;
    transform: translateY(-65%) rotate(45deg);
}

.ai-size-trigger:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.ai-size-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 30;
    max-height: 310px;
    overflow: auto;
    border: 1px solid var(--rj-border, #e5e5e5);
    border-radius: var(--rj-radius-md, 10px);
    background: var(--rj-bg-elevated, #fff);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    padding: var(--rj-space-1);
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ai-size-menu[hidden] {
    display: none;
}

.ai-size-group,
.ai-size-option {
    flex: 0 0 auto;
}

.ai-size-group {
    padding: var(--rj-space-2) var(--rj-space-2-5) var(--rj-space-0-5);
    color: var(--rj-text-muted, #737373);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.ai-size-option {
    display: grid;
    grid-template-columns: 20px 42px minmax(0, 1fr);
    align-items: center;
    width: 100%;
    min-height: 34px;
    border: 0;
    border-radius: var(--rj-radius-sm, 6px);
    background: transparent;
    color: var(--rj-text, #111);
    cursor: pointer;
    gap: var(--rj-space-1-5);
    padding: 7px var(--rj-space-2-5);
    text-align: left;
    font: inherit;
    font-size: 0.875rem;
    line-height: 1.2;
}

.ai-size-option-ratio {
    font-weight: 650;
}

.ai-size-option-name {
    min-width: 0;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-size-option:hover,
.ai-size-option[aria-selected="true"] {
    background: var(--rj-bg-hover, #f3f4f6);
}

.ai-size-option-icon {
    --ratio-w: 1;
    --ratio-h: 1;
    justify-self: center;
    width: calc(10px * var(--ratio-w));
    height: calc(10px * var(--ratio-h));
    max-width: 24px;
    max-height: 24px;
    min-width: 8px;
    min-height: 8px;
    border: 1.5px solid var(--rj-primary, #3858e9);
    border-radius: 1px;
}

.ai-size-option-icon[data-ratio="auto"] {
    position: relative;
    width: 18px;
    height: 18px;
    max-width: 18px;
    max-height: 18px;
    min-width: 18px;
    min-height: 18px;
    border: 0;
}

.ai-size-option-icon[data-ratio="auto"]::after,
.ai-size-option-icon[data-ratio="auto"]::before,
.ai-ratio-icon--auto::after,
.ai-ratio-icon--auto::before {
    content: "";
    position: absolute;
    border: 1.5px solid var(--rj-primary, #3858e9);
    border-radius: 1px;
    background: transparent;
}

.ai-size-option-icon[data-ratio="auto"]::before {
    width: 16px;
    height: 9px;
    left: 0;
    top: 7px;
}

.ai-size-option-icon[data-ratio="auto"]::after {
    width: 9px;
    height: 16px;
    left: 0;
    top: 0;
}

.ai-ratio-icon {
    --ratio-w: 1;
    --ratio-h: 1;
    position: relative;
    justify-self: center;
    z-index: 1;
    width: calc(18px * var(--ratio-w));
    height: calc(18px * var(--ratio-h));
    max-width: 25px;
    max-height: 25px;
    min-width: 12px;
    min-height: 12px;
    border: 1.5px solid var(--rj-primary, #3858e9);
    border-radius: var(--rj-radius-sm);
    pointer-events: none;
}

.ai-image-size-note {
    margin: var(--rj-space-0-5) 0 var(--rj-space-0-5);
    color: var(--rj-text-muted, #737373);
    font-size: 0.78rem;
    line-height: 1.35;
}

.ai-ratio-icon--auto {
    width: 25px;
    height: 22px;
    border: 0;
    max-width: 25px;
    max-height: 22px;
    min-width: 25px;
    min-height: 22px;
}

.ai-ratio-icon--auto::before {
    width: 16px;
    height: 9px;
    left: 0;
    top: 7px;
}

.ai-ratio-icon--auto::after {
    width: 9px;
    height: 16px;
    left: 0;
    top: 0;
}

.ai-form-actions {
    display: flex;
    justify-content: flex-end;
}

.ai-image-generate-row {
    align-items: flex-end;
    gap: var(--rj-space-3);
}

.ai-image-count-control {
    display: grid;
    gap: var(--rj-space-1-5);
    margin-right: auto;
}

.ai-image-count-control label {
    color: var(--rj-text, #111);
    font-size: 0.78rem;
    line-height: 1.2;
}

.ai-count-stepper {
    display: grid;
    grid-template-columns: 56px 24px;
    width: 80px;
    border: 1px solid var(--rj-border, #e5e5e5);
    border-radius: var(--rj-radius-sm, 6px);
    overflow: hidden;
    background: var(--rj-bg-input, var(--rj-bg-elevated, #fff));
}

.ai-count-stepper input {
    width: 100%;
    border: 0;
    border-radius: 0;
    background: transparent;
    text-align: center;
    -moz-appearance: textfield;
}

.ai-count-stepper input::-webkit-outer-spin-button,
.ai-count-stepper input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.ai-count-stepper-buttons {
    display: grid;
    border-left: 1px solid var(--rj-border, #e5e5e5);
}

.ai-count-step {
    min-height: 18px;
    border: 0;
    border-bottom: 1px solid var(--rj-border, #e5e5e5);
    background: var(--rj-bg-elevated, #fff);
    color: var(--rj-text, #111);
    cursor: pointer;
    font: inherit;
    font-size: 0.72rem;
    line-height: 1;
    padding: 0;
}

.ai-count-step:last-child {
    border-bottom: 0;
}

.ai-count-step:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.ai-form-actions--between {
    align-items: center;
    justify-content: space-between;
    gap: var(--rj-space-2-5);
    flex-wrap: wrap;
}

.ai-form-actions .btn {
    max-width: 100%;
    white-space: normal;
}

.ai-image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--rj-space-3);
    width: 100%;
}

.ai-image-figure {
    margin: 0;
    min-width: 0;
}

.ai-image-preview-btn {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border: 0;
    border-radius: var(--rj-radius-lg);
    background: var(--rj-bg-sunken, #f5f5f5);
    padding: 0;
    cursor: zoom-in;
}

.ai-image-figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: var(--rj-radius-lg);
}

.ai-image-figure figcaption {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--rj-space-2);
    margin-top: var(--rj-space-2);
}

.ai-image-history {
    border-top: 1px solid var(--rj-border, #e5e5e5);
    margin-top: var(--rj-space-4);
    padding-top: var(--rj-space-4);
}

.ai-image-history__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--rj-space-3);
    margin-bottom: var(--rj-space-3);
}

.ai-image-history__header h4 {
    margin: 0;
    font-size: 0.95rem;
}

.ai-image-history__header p,
.ai-image-history-empty,
.ai-image-history-meta {
    color: var(--rj-text-muted, #666);
    font-size: 0.82rem;
    margin: var(--rj-space-1) 0 0;
}

.ai-image-history-list {
    display: grid;
    gap: var(--rj-space-2-5);
}

.ai-image-history-card {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: var(--rj-space-3);
    border: 1px solid var(--rj-border, #e5e5e5);
    border-radius: var(--rj-radius-lg);
    background: var(--rj-bg-elevated, #fff);
    padding: var(--rj-space-2-5);
}

.ai-image-history-card--multi {
    grid-template-columns: minmax(0, 1fr);
}

.ai-image-history-card--error {
    border-color: color-mix(in srgb, #ef4444 30%, var(--rj-border, #e5e5e5));
}

.ai-image-history-card__thumbs {
    display: flex;
    gap: var(--rj-space-1-5);
    overflow-x: auto;
    scrollbar-width: thin;
}

.ai-image-history-card__thumb {
    display: block;
    width: 88px;
    height: 88px;
    flex: 0 0 88px;
    overflow: hidden;
    border: 0;
    border-radius: var(--rj-radius-md);
    background: var(--rj-bg-soft, #f5f5f5);
    color: var(--rj-text-muted, #666);
    cursor: zoom-in;
    padding: 0;
}

.ai-image-history-card__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ai-image-history-card__thumb--empty {
    display: grid;
    place-items: center;
    cursor: default;
    font-size: 0.75rem;
    text-align: center;
}

.ai-image-history-card__body {
    min-width: 0;
}

.ai-image-history-card__top,
.ai-image-history-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rj-space-2);
}

.ai-image-history-card__top time {
    color: var(--rj-text-muted, #666);
    font-size: 0.75rem;
}

.ai-image-history-status {
    border: 1px solid var(--rj-border, #e5e5e5);
    border-radius: 999px;
    color: var(--rj-text-muted, #666);
    font-size: 0.72rem;
    padding: var(--rj-space-0-5) 7px;
}

.ai-image-history-prompt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    margin: var(--rj-space-2) 0 0;
    overflow: hidden;
    color: var(--rj-text, #111);
    font-size: 0.84rem;
    line-height: 1.35;
}

.ai-image-history-actions {
    justify-content: flex-start;
    margin-top: var(--rj-space-2-5);
}

.ai-image-history-more {
    margin-top: var(--rj-space-3);
}

.ai-image-model-note,
.ai-field-hint {
    color: var(--rj-text-muted, #666);
    font-size: 0.82rem;
    margin: var(--rj-space-2) 0 0;
}

.ai-field-hint {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--rj-space-2);
}

.ai-tool-panel[hidden] {
    display: none;
}

.ai-audit-results {
    margin-top: var(--rj-space-3-5);
    overflow-x: auto;
}

.ai-audit-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.ai-audit-table th,
.ai-audit-table td {
    text-align: left;
    padding: var(--rj-space-2) var(--rj-space-2-5);
    border-bottom: 1px solid var(--rj-border, #e5e5e5);
    vertical-align: top;
}

.ai-audit-badge {
    display: inline-block;
    padding: var(--rj-space-0-5) var(--rj-space-2);
    border-radius: 999px;
    font-size: 0.8rem;
    white-space: nowrap;
}

.ai-audit-badge--ok {
    background: var(--rj-success-bg, #e7f6ec);
    color: var(--rj-success-text, #1b7a3d);
}

.ai-audit-badge--warn {
    background: var(--rj-warning-bg, #fdf3e1);
    color: var(--rj-warning-text, #9a6b00);
}

/* Custom combobox: replaces native datalist popups so suggestion lists
   render UI-conform and identical in all browsers and embedded webviews. */
.rj-combobox {
    position: relative;
    display: block;
}

.rj-combobox input {
    width: 100%;
    min-width: 0;
    padding-right: 58px;
}

.rj-combobox .rj-combobox__clear {
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
}

.rj-combobox__toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: var(--rj-radius-sm, 6px);
    background: transparent;
    color: var(--rj-text-muted, #888);
    cursor: pointer;
}

.rj-combobox__toggle:hover {
    background: var(--rj-bg-hover, rgba(127, 127, 127, 0.12));
    color: var(--rj-text, inherit);
}

.rj-combobox__toggle svg {
    width: 14px;
    height: 14px;
}

.rj-combobox__list {
    position: absolute;
    z-index: var(--rj-z-dropdown, 1000);
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    background: var(--rj-bg-elevated, #fff);
    border: 1px solid var(--rj-border, #e5e5e5);
    border-radius: var(--rj-radius-md, 10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    padding: var(--rj-space-1);
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.rj-combobox__list[hidden] {
    display: none;
}

.rj-combobox__option {
    padding: 7px var(--rj-space-2-5);
    border-radius: var(--rj-radius-sm, 6px);
    font-size: 0.88rem;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
}

.rj-combobox__option:hover,
.rj-combobox__option.is-active {
    background: var(--rj-bg-hover, rgba(127, 127, 127, 0.12));
    color: var(--rj-text, inherit);
}

.ai-usage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--rj-space-3);
}

.ai-usage-stat {
    display: flex;
    flex-direction: column;
    gap: var(--rj-space-0-5);
    padding: var(--rj-space-3) var(--rj-space-3-5);
    border: 1px solid var(--rj-border, #e5e5e5);
    border-radius: var(--rj-radius-lg);
    background: var(--rj-surface, rgba(127, 127, 127, 0.06));
}

.ai-usage-stat__value {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.ai-usage-stat__label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.65;
}

.ai-usage-stat__sub {
    font-size: 0.82rem;
    opacity: 0.75;
    font-variant-numeric: tabular-nums;
}

.ai-usage-budget {
    margin-top: var(--rj-space-3-5);
}

.ai-usage-budget__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--rj-space-3);
    font-size: 0.85rem;
    margin-bottom: var(--rj-space-1-5);
}

.ai-usage-budget__label {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.78rem;
    opacity: 0.65;
}

.ai-usage-budget__value {
    font-variant-numeric: tabular-nums;
}

.ai-usage-budget__bar {
    height: 8px;
    border-radius: 999px;
    background: var(--rj-border, rgba(127, 127, 127, 0.25));
    overflow: hidden;
}

.ai-usage-budget__fill {
    height: 100%;
    border-radius: 999px;
    background: var(--rj-success-text, #1b7a3d);
    transition: width 0.4s ease;
}

.ai-usage-budget__fill--warn {
    background: var(--rj-warning-text, #b8860b);
}

.ai-usage-budget__fill--over {
    background: var(--rj-danger, #c0392b);
}

.ai-status-box {
    border: 1px solid var(--rj-border, #e5e5e5);
    border-radius: var(--rj-radius-lg);
    margin-bottom: var(--rj-space-3-5);
    padding: var(--rj-space-3) var(--rj-space-3-5);
    font-size: 0.92rem;
}

.ai-status-box--ok {
    border-color: color-mix(in srgb, #16a34a 35%, var(--rj-border, #e5e5e5));
    background: color-mix(in srgb, #16a34a 8%, transparent);
    color: var(--rj-text, #111);
}

.ai-status-box--warning {
    border-color: color-mix(in srgb, #f59e0b 45%, var(--rj-border, #e5e5e5));
    background: color-mix(in srgb, #f59e0b 10%, transparent);
    color: var(--rj-text, #111);
}

.ai-settings-compact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--rj-space-3-5) 18px;
    align-items: start;
}

.ai-settings-compact .form-group input,
.ai-settings-compact .form-group select {
    width: 100%;
    min-width: 0;
}

/* The toggle at the row start sits level with the controls beside it: the
   neighbours stack label + control, so it starts one label height lower */
.ai-settings-compact .form-group > label:not(.toggle-label) {
    display: block;
    line-height: 1.45;
}

/* Height of a field label plus its gap: a toggle that shares a row with
   labelled fields starts this far down to sit level with their controls */
.settings-panel,
.ai-settings-compact {
    --rj-label-offset: calc(0.875rem * 1.45 + var(--rj-space-2));
}

[data-theme-preset="console"] .settings-panel,
[data-theme-preset="console"] .ai-settings-compact {
    --rj-label-offset: calc(var(--rj-text-xs) * 1.45 + var(--rj-space-2));
}

.ai-enable-row {
    align-self: start;
    display: flex;
    align-items: center;
    min-height: var(--rj-control-h);
    margin-top: var(--rj-label-offset);
}

.ai-local-toggle,
.ai-section-hint {
    margin-top: var(--rj-space-3);
}

.form-group label.checkbox-label,
.checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--rj-space-2);
    margin-top: var(--rj-space-2);
    margin-bottom: 0;
    color: var(--rj-text-muted, #737373);
    font-size: 0.875rem;
    line-height: 1.25;
    width: max-content;
    max-width: 100%; /* a long label wraps on a phone instead of widening the page */
}

.checkbox-label input[type="checkbox"] {
    flex: 0 0 auto;
    width: auto;
    height: auto;
    margin: 0;
}

.ai-form {
    display: flex;
    flex-direction: column;
    gap: var(--rj-space-3);
}

.ai-form textarea:disabled,
.ai-form input:disabled,
.ai-form select:disabled,
.ai-form button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.ai-form textarea,
.ai-result {
    width: 100%;
    min-height: 96px;
    border: 1px solid var(--rj-border, #e5e5e5);
    border-radius: var(--rj-radius-md);
    background: var(--rj-bg, #f8fafc);
    color: var(--rj-text, #111);
    padding: var(--rj-space-3);
    resize: vertical;
}

.ai-form textarea::placeholder {
    color: var(--rj-text-muted, #737373);
    opacity: 0.85;
}

.ai-form textarea:focus,
.ai-form input:focus,
.ai-result:focus {
    border-color: var(--rj-border-focus, var(--rj-primary, #3858e9));
    outline: none;
}

.ai-card input,
.ai-card select {
    width: 100%;
    min-width: 0;
    background: var(--rj-bg, #f8fafc);
    color: var(--rj-text, #111);
    border-color: var(--rj-border, #e5e5e5);
}

.ai-card:nth-child(1) .ai-form textarea {
    min-height: 110px;
}

.ai-form-action {
    align-self: end;
}

.ai-chat-log {
    display: flex;
    min-height: 260px;
    max-height: 430px;
    flex-direction: column;
    gap: var(--rj-space-2-5);
    overflow: auto;
    margin-bottom: var(--rj-space-2-5);
    padding: var(--rj-space-3);
    border: 1px solid var(--rj-border, #e5e5e5);
    border-radius: var(--rj-radius-lg);
    background: var(--rj-bg, #f8fafc);
}

.ai-chat-message {
    max-width: 86%;
    padding: var(--rj-space-2-5) var(--rj-space-3);
    border-radius: var(--rj-radius-lg);
    white-space: pre-wrap;
    line-height: 1.55;
}

.ai-chat-message strong {
    font-weight: 700;
    color: var(--rj-text, #111);
}

.ai-chat-message em {
    color: var(--rj-text-secondary, #525252);
}

.ai-chat-message a {
    color: var(--rj-primary, #3858e9);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ai-chat-message a:hover {
    color: var(--rj-primary-hover, #1d4ed8);
}

.ai-chat-message--user {
    align-self: flex-end;
    background: var(--rj-primary-subtle, #dbeafe);
    color: var(--rj-text, #111);
}

.ai-chat-message--assistant {
    align-self: flex-start;
    background: var(--rj-bg-elevated, #fff);
    color: var(--rj-text, #111);
    border: 1px solid var(--rj-border, #e5e5e5);
}

.ai-chat-message--error {
    align-self: stretch;
    background: var(--rj-danger-subtle, #fee2e2);
    color: var(--rj-danger, #991b1b);
}

.ai-chat-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--rj-space-3);
}

.ai-chat-shortcut-hint {
    flex: 1 1 auto;
    color: var(--rj-text-muted, #737373);
    font-size: 0.78rem;
    line-height: 1.35;
}

.ai-chat-actions .btn {
    flex: 0 0 auto;
    min-width: 112px;
}

.ai-running-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--rj-space-2);
    color: var(--rj-text-muted, #737373);
    font-size: 0.84rem;
}

.ai-running-indicator[hidden] {
    display: none;
}

.ai-running-indicator::before {
    content: "";
    width: 1em;
    height: 1em;
    border: 2px solid color-mix(in srgb, var(--rj-primary, #3858e9) 25%, transparent);
    border-top-color: var(--rj-primary, #3858e9);
    border-radius: 50%;
    animation: backup-spin 0.8s linear infinite;
}

/* Ring spinner for work in progress (image jobs, thinking bubble). Motion stops for prefers-reduced-motion. */
.rj-spinner {
    display: inline-block;
    flex: 0 0 auto;
    width: 1.05em;
    height: 1.05em;
    border: 2px solid color-mix(in srgb, var(--rj-primary, #3858e9) 25%, transparent);
    border-top-color: var(--rj-primary, #3858e9);
    border-radius: 50%;
    vertical-align: -0.15em;
    animation: backup-spin 0.8s linear infinite;
}

.rj-spinner[hidden] {
    display: none;
}

.ai-image-jobs-panel__copy p {
    display: flex;
    align-items: center;
    gap: var(--rj-space-2);
}

/* The assistant is working on an answer: a bubble in the chat with the ring and three dots. */
.ai-chat-message--thinking {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: var(--rj-space-2-5);
    background: var(--rj-bg-elevated, #fff);
    color: var(--rj-text-muted, #737373);
    border: 1px solid var(--rj-border, #e5e5e5);
}

.ai-chat-message--thinking .rj-thinking-dots {
    display: inline-flex;
    gap: 3px;
}

.ai-chat-message--thinking .rj-thinking-dots i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    animation: aiPulse 1.1s ease-in-out infinite;
}

.ai-chat-message--thinking .rj-thinking-dots i:nth-child(2) { animation-delay: 0.18s; }
.ai-chat-message--thinking .rj-thinking-dots i:nth-child(3) { animation-delay: 0.36s; }

@keyframes aiPulse {
    0%, 100% {
        opacity: 0.35;
        transform: scale(0.8);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
}

.ai-image-result {
    display: grid;
    min-height: 180px;
    place-items: center;
    margin-top: var(--rj-space-3);
    border: 1px dashed var(--rj-border, #e5e5e5);
    border-radius: var(--rj-radius-lg);
    padding: var(--rj-space-3);
    color: var(--rj-text-muted, #737373);
}

.ai-image-message {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: var(--rj-space-2);
    border-radius: var(--rj-radius-lg);
    padding: var(--rj-space-3) var(--rj-space-3-5);
    line-height: 1.45;
    text-align: left;
}

.ai-image-message strong {
    color: var(--rj-text, #111);
    font-size: 0.86rem;
    line-height: 1.3;
}

.ai-image-message__prompt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    overflow: hidden;
    border: 1px solid var(--rj-border, #e5e5e5);
    border-radius: var(--rj-radius-md);
    background: color-mix(in srgb, var(--rj-bg-elevated, #fff) 70%, transparent);
    color: var(--rj-text-muted, #737373);
    font-size: 0.82rem;
    line-height: 1.45;
    padding: 9px var(--rj-space-2-5);
}

.ai-image-message--error {
    border: 1px solid color-mix(in srgb, var(--rj-danger, #dc2626) 42%, transparent);
    background: color-mix(in srgb, var(--rj-danger, #dc2626) 11%, var(--rj-bg-elevated, #fff));
    color: var(--rj-text, #111);
}

.ai-image-message--error strong {
    color: var(--rj-danger, #dc2626);
}

.ai-image-result img {
    display: block;
    max-width: 100%;
    max-height: 420px;
    border-radius: var(--rj-radius-md);
}


/* ============================================================
   ADMIN UI SYSTEM MAPPING
   Maps older admin-specific classes to the shared Panel / Group / Item
   hierarchy without changing markup.
   ============================================================ */

.page-list-table-wrap,
.editor-container,
.backup-container,
.settings-panel,
.dashboard-section {
    background: var(--rj-surface-panel, var(--rj-bg-elevated));
    border: 1px solid var(--rj-border);
    border-radius: var(--rj-radius-lg);
    box-shadow: none;
}

.settings-tabs,
.settings-section,
.ce-settings-card,
.forms-admin-list,
.backup-site-card,
.scheduled-form,
.scheduled-form__fieldset,
.backup-remote {
    border: 1px solid var(--rj-border);
    border-radius: var(--rj-radius-lg);
    box-shadow: none;
}

.settings-section {
    background: transparent;
}

.ce-settings-card,
.forms-admin-list,
.backup-site-card,
.scheduled-form,
.backup-remote {
    background: var(--rj-surface-group, color-mix(in srgb, var(--rj-bg-elevated) 88%, var(--rj-bg)));
}

.dashboard-panel,
.dashboard-stat-card,
.ai-card,
.icon-manager-card,
.forms-fields-table tr.forms-field-row,
.restore-mode-card,
.scheduled-status,
.backup-remote-target,
.backup-remote-file {
    background: var(--rj-surface-item, var(--rj-bg));
    border: 1px solid var(--rj-border);
    border-radius: var(--rj-radius-md);
    box-shadow: none;
}

.topbar-select,
.modal-input,
.ce-section-nav__select,
.access-select,
.forms-fields-table select,
.backup-remote__add select,
.ai-card select {
    padding-right: var(--rj-space-10);
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 8px;
}

.icon-manager-action-btn,
.btn-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--rj-radius-md);
}

.icon-manager-action-btn svg,
.btn-icon svg {
    width: 16px;
    height: 16px;
    stroke-width: 1.5;
}

@media (max-width: 1120px) {
    .dashboard-home-grid,
    .dashboard-stat-grid--analytics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-status-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .dashboard-section-header,
    .dashboard-content-pills {
        align-items: flex-start;
        justify-content: flex-start;
    }

    .dashboard-section-header {
        flex-direction: column;
    }

    .dashboard-status-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-list-header--mails {
        grid-template-columns: 1fr;
    }

    .page-list-header--mails .page-list-header-actions {
        justify-content: flex-start;
        padding-top: 0;
    }

    .forms-admin-layout {
        grid-template-columns: 1fr;
    }

    .mail-form-filter {
        width: 100%;
    }

    .dashboard-stat-grid,
    .dashboard-home-grid,
    .dashboard-split-lists {
        grid-template-columns: 1fr;
    }

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

    .ai-image-options-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ai-settings-compact {
        grid-template-columns: 1fr;
    }

    .dashboard-home-grid .dashboard-panel:nth-child(1),
    .dashboard-home-grid .dashboard-panel:nth-child(2),
    .dashboard-home-grid .dashboard-panel:nth-child(5) {
        grid-column: span 1;
    }

    .ai-grid .ai-card:nth-child(1),
    .ai-grid .ai-card:nth-child(3) {
        grid-column: auto;
        grid-row: auto;
    }

    .icon-manager-toolbar,
    .iconify-import-controls {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .modal-backup-preview {
        width: 94vw;
        max-width: 94vw;
        height: calc(100vh - 32px);
        max-height: calc(100vh - 32px);
    }

    .backup-preview-modal {
        grid-template-columns: 1fr;
    }

    #aiImageForm {
        grid-template-columns: 1fr;
    }

    .ai-image-options-grid {
        grid-template-columns: 1fr;
    }
}

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

/* Form layout follows available panel width, including the desktop sidebar. */
.admin-main { min-width: 0; }
.admin-container { container-type: inline-size; container-name: dashboard; }
.admin-main fieldset, .admin-main .form-group { min-width: 0; }
.admin-main input, .admin-main textarea, .admin-main .rj-select { max-width: 100%; }
.form-row-inline { flex-wrap: wrap; }
.form-row-inline .form-group { flex: 1 1 15rem; }
.page-list-header-left { flex-wrap: wrap; min-width: 0; }
.page-list-search { flex: 1 1 15rem; min-width: 0; }
.page-list-search-input { width: 100%; min-width: 0; }
.scheduled-form { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.scheduled-status { min-width: 0; }
.scheduled-status__row { flex-wrap: wrap; }
.scheduled-form__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.scheduled-form__grid label { width: auto; min-width: 0; }
.backup-remote__header { flex-wrap: wrap; }
.backup-remote__header > div:first-child { flex: 1 1 20rem; }
.backup-remote__add { flex: 1 1 22rem; min-width: 0; margin-top: 0; }
.backup-remote-target__header { flex-wrap: wrap; }
.backup-remote-target__title { flex: 1 1 22rem; flex-wrap: wrap; }
.backup-remote-target__title input[type="text"] { flex: 1 1 14rem; min-width: 0; width: 100%; }
.backup-remote-target__actions { justify-content: flex-start; }
.backup-remote-target__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.backup-remote-target { min-width: 0; }
@container dashboard (max-width: 50rem) {
    .scheduled-form { grid-template-columns: minmax(0, 1fr); }
    .scheduled-form__side, .scheduled-form__actions { grid-column: 1; grid-row: auto; }
    .scheduled-form__actions { justify-content: flex-start; }
}
@container dashboard (max-width: 30rem) {
    .scheduled-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .backup-scheduled { padding: var(--rj-space-3); }
    .backup-remote-target__title { display: grid; grid-template-columns: auto minmax(0, 1fr); }
    .backup-remote-target__title span { grid-column: 2; justify-self: start; }
    .backup-remote-target__title input[type="text"] { width: 100%; }
    .backup-remote-target__actions .btn { flex: 1 1 auto; }
    .page-list-header, .page-list-header-left { align-items: stretch; }
    .page-list-header { flex-direction: column; }
    .mobile-selectors { flex-wrap: wrap; }
    .mobile-selectors .rj-select { flex: 1 1 9rem; min-width: 0; }
    .section-header { flex-wrap: wrap; gap: var(--rj-space-3); }
    .section-header > div { min-width: 0; max-width: 100%; flex-wrap: wrap; }
}
.icon-manager-path { overflow-wrap: anywhere; }
.system-status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 20px; }
.system-status-grid .dashboard-panel { min-width: 0; padding: 20px; }
.system-status-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; padding: 8px 0; border-bottom: 1px solid var(--rj-border); }
.system-status-grid p, .system-status-row { overflow-wrap: anywhere; }
.system-request { padding: 16px 0; }
.system-request-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
/* Security check: full-width first panel with one row per finding. */
.system-status-grid .system-security { grid-column: 1 / -1; }
.system-security .dashboard-panel-header { flex-wrap: wrap; }
.system-security__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.system-check__state::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--rj-border-strong); vertical-align: 1px; }
.system-check--critical .system-check__state { color: var(--rj-danger); font-weight: 600; }
[data-site-theme="dark"] .system-check--critical .system-check__state { color: color-mix(in srgb, var(--rj-danger) 60%, #fff); }
.system-check--warning .system-check__state { color: var(--rj-warning-text, #92400e); font-weight: 600; }
.system-check--critical .system-check__state::before { background: var(--rj-danger); }
.system-check--warning .system-check__state::before { background: var(--rj-warning); }
.system-check--ok .system-check__state::before { background: var(--rj-success); }
.system-check--note .system-check__state::before { background: var(--rj-primary); }
.system-check--skipped .system-check__state, .system-check--pending .system-check__state, .system-check--unknown .system-check__state { color: var(--rj-text-muted); }
.system-check__details { padding: 8px 0 12px; font-size: 0.875rem; line-height: 1.5; }
.system-check__details summary { cursor: pointer; font-weight: 600; }
.system-check__details p { margin: 8px 0 0; }
.system-check--critical .system-check__details { padding-left: 12px; border-left: 3px solid var(--rj-danger); }
.system-check__probes { margin: 8px 0 0; padding-left: 1.25em; }
.system-check__rules { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-top: 8px; }
.system-check__rules pre { flex: 1 1 26rem; min-width: 0; margin: 0; padding: 10px 12px; overflow-x: auto; background: var(--rj-bg-elevated); color: var(--rj-text); border: 1px solid var(--rj-border); border-radius: var(--rj-radius-md); font-family: var(--font-mono, ui-monospace, SF Mono, Menlo, Consolas, monospace); font-size: 0.8125rem; line-height: 1.5; }
.system-badge { background: var(--rj-danger); box-shadow: 0 0 0 2px var(--rj-danger-subtle); }
.admin-main:has(> .security-exposure-banner:not([hidden])) { padding-top: var(--rj-space-6); }
@media (max-width: 768px) {
    /* Security banners: wrap the title and place the call to action below the text. */
    .security-warning-banner { margin-inline: var(--rj-space-4); }
    .security-warning-banner .info-banner__inner { grid-template-columns: auto minmax(0, 1fr); }
    .security-warning-banner .info-banner__title { white-space: normal; }
    .security-warning-banner .info-banner__cta { grid-column: 2; justify-self: start; }
}

.settings-panels, .settings-panel, .settings-tabs, .settings-layout { min-width: 0; }
.settings-panel { container-type: inline-size; container-name: settings; }
.settings-actions-row, .color-input-group { flex-wrap: wrap; }
.settings-mobile-navigation { display: none; }
.forms-admin-list__head { grid-template-columns: minmax(0, 1fr) auto; }
.forms-fields-table { display: block; }
.forms-fields-table td { grid-template-rows: auto minmax(38px, auto); }
.forms-fields-table td input, .forms-fields-table td textarea { width: 100%; min-width: 0; }
.settings-visual-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.access-maintenance-grid > .access-wide { grid-column: 1 / -1; }
@container settings (max-width: 52rem) {
    .access-maintenance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container settings (max-width: 28rem) {
    .access-maintenance-grid { grid-template-columns: minmax(0, 1fr); }
    .access-maintenance-grid > .access-toggle-row:first-child { grid-column: auto; }
    .access-maintenance-grid > .access-toggle-row .toggle-label { white-space: normal; }
    .access-maintenance-grid > .visual-overlay-color-group { grid-column: auto; }
    .access-maintenance-grid > .access-toggle-row { margin-top: 0; min-height: 0; }
}
@container dashboard (max-width: 65rem) {
    .settings-layout { grid-template-columns: minmax(0, 1fr); }
    .settings-tabs { position: static; display: none; }
    .settings-mobile-navigation { display: grid; gap: 8px; }
    .settings-mobile-navigation .rj-select { width: 100%; }
}
@container settings (max-width: 28rem) {
    .menu-order-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 8px; padding: 10px; }
    .menu-order-item__drag-handle { grid-column: 1; grid-row: 1 / 3; }
    .menu-order-item__label { grid-column: 2; grid-row: 1; }
    .menu-order-item__slug { grid-column: 2; grid-row: 2; }
    .menu-order-item__actions { grid-column: 3; grid-row: 1 / 3; }
    .settings-section, .settings-section--compact { padding: 12px; }
    .forms-fields-table tr.forms-field-row { grid-template-columns: minmax(0, 1fr); }
    .forms-admin-list__head { grid-template-columns: minmax(0, 1fr); }
    .forms-admin-list { padding: 12px; }
    .branding-main-grid, .branding-main-column, .theme-settings-grid { grid-template-columns: minmax(0, 1fr); }
    .settings-actions-row .btn { flex: 1 1 12rem; }
    .users-table-wrap { overflow-x: auto; }
}
@container settings (min-width: 60rem) {
    /* Wide: type, key, label, placeholder, width and required in one line, the options below. */
    /* Columns stay at least 120px wide at the fluid 14–15px root size (responsive-check) */
    .forms-fields-table tr.forms-field-row { grid-template-columns: 8.5rem minmax(8.5rem, 0.8fr) minmax(8.5rem, 1.1fr) minmax(8.5rem, 1.1fr) 7.5rem 5rem; }
}
.ai-image-filename-row { flex-wrap: wrap; }
.ai-image-filename-row input { flex: 1 1 12rem; }
@container dashboard (max-width: 30rem) {
    .ai-image-filename-row button { flex: 1 1 auto; }
}
@container dashboard (max-width: 50rem) {
    .backup-remote__header, .backup-remote-target__header { flex-direction: column; align-items: stretch; }
    .backup-remote__header > div:first-child, .backup-remote__add, .backup-remote-target__title { flex: 0 1 auto; }
    .backup-remote__add { width: 100%; }
}
.access-maintenance-grid > .form-group.access-wide { grid-column: 1 / -1; }


/* AI settings: the long form keeps its save bar in reach, rarely used agent groups fold away. */
.settings-actions-row--sticky {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin-left: calc(var(--rj-space-4) * -1);
    margin-right: calc(var(--rj-space-4) * -1);
    padding: var(--rj-space-3) var(--rj-space-4);
    border-top: 1px var(--rj-divider-style, solid) var(--rj-border);
    background: var(--rj-surface, var(--rj-bg, #fff));
}

/* Collapsible groups in the agent section: same look as the other cards (see .scheduled-cron). */
.ai-agent-details {
    margin: var(--rj-space-2) 0;
    border: 1px solid var(--rj-border);
    border-radius: var(--rj-radius-lg);
    background: var(--rj-bg);
    /* The summary's hover surface follows the rounded frame */
    overflow: hidden;
}

.ai-agent-details[open] {
    padding-bottom: var(--rj-space-3);
}

.ai-agent-details > summary {
    cursor: pointer;
    list-style: none;
    padding: var(--rj-space-3) var(--rj-space-4);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--rj-text);
    /* The hover surface fades in and out instead of snapping */
    transition: background-color var(--rj-duration-hover-out) ease-out;
}

.ai-agent-details > summary::-webkit-details-marker {
    display: none;
}

.ai-agent-details > summary::after {
    content: "+";
    float: right;
    color: var(--rj-text-muted);
}

.ai-agent-details > summary:hover {
    background: var(--rj-bg-hover);
}

.ai-agent-details[open] > summary {
    border-bottom: 1px solid var(--rj-border);
}

.ai-agent-details[open] > summary::after {
    content: "-";
}

.ai-agent-details > :not(summary) {
    margin-left: var(--rj-space-4);
    margin-right: var(--rj-space-4);
}

.ai-agent-details > summary + * {
    margin-top: var(--rj-space-3);
}

.ai-agent-details > :last-child {
    margin-bottom: 0;
}

/* A stored key is never shown: the field stays empty (placeholder as a mask) and a small x removes the key. */
.secret-field {
    position: relative;
}

.secret-field input {
    width: 100%;
    padding-right: 2rem;
}

.secret-field input::placeholder {
    letter-spacing: 0.15em;
}

/* Models: one column per purpose */
.ai-model-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--rj-space-4);
}

.ai-model-col__title {
    margin: 0 0 var(--rj-space-1);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--rj-text);
}

.ai-model-col__hint {
    margin: 0 0 var(--rj-space-3);
}

.ai-price-row {
    margin-bottom: var(--rj-space-4);
}

.ai-price-row[hidden],
.ai-price-row .btn[hidden],
.ai-model-col [hidden],
#aiOrganizationGroup[hidden] {
    display: none !important;
}

.ai-price-status {
    margin: 0 0 var(--rj-space-2);
}

.ai-price-status--unknown {
    color: var(--rj-warning-text, #92400e);
    font-weight: 600;
}

@media (max-width: 700px) {
    .ai-model-columns {
        grid-template-columns: minmax(0, 1fr);
    }
}

.ai-limit-banner .ai-limit-banner__line { margin: 0 0 var(--rj-space-2); }
.ai-limit-banner .ai-limit-banner__line--reached { font-weight: 700; }
.ai-limit-banner .ai-limit-banner__actions { margin-top: var(--rj-space-2); }

/* Assistant card on the dashboard home: the chat (Agent | Classic) is embedded; the classic form carries a label. */
.ai-assistant-embed[hidden],
.ai-card--assistant .ai-chat-log[hidden],
.ai-card--assistant .ai-form[hidden] {
    display: none;
}

.ai-assistant-embed .rj-copilot-panel {
    background: var(--rj-bg-elevated, #fff);
}

.ai-card__badge {
    display: inline-block;
    margin-left: var(--rj-space-1-5);
    padding: 1px var(--rj-space-2);
    border: 1px solid var(--rj-border, #d4d4d4);
    border-radius: 999px;
    color: var(--rj-text-muted, #737373);
    font-size: 0.72rem;
    font-weight: 500;
    vertical-align: middle;
}

.ai-card__badge[hidden] {
    display: none;
}


/* ============================================================
   PHASE 2 PATTERNS (Dashboard-Redesign, Okt 2026)
   Five patterns every tab shares: page header, card with at most two
   levels, form row (label left), list row, sticky action bar.
   Appended last so it wins over the older per-tab rules above.
   ============================================================ */

/* --- Page header: title (+ one-line description) left, actions right --- */
.page-list-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--rj-space-3) var(--rj-space-4);
    margin-bottom: var(--rj-space-5);
    --page-list-control-height: var(--rj-control-h-sm);
}

.page-list-header-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--rj-space-1);
    min-width: 0;
}

.page-list-header h2,
.settings-panel h2,
.editor-header h2 {
    margin: 0;
    font-size: var(--rj-text-xl);
    font-weight: 650;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.page-list-header p,
.page-description,
.settings-description {
    margin: 0;
    max-width: 64ch;
    color: var(--rj-text-muted);
    font-size: var(--rj-text-sm);
    line-height: 1.45;
}

.settings-description {
    max-width: none;
    margin: var(--rj-space-1) 0 var(--rj-space-5);
    padding-bottom: var(--rj-space-4);
    border-bottom: 1px var(--rj-divider-style, solid) var(--rj-border);
}

.settings-description:not(.settings-description--compact) {
    padding-right: 20%;
}

.page-list-header .last-modified {
    font-size: var(--rj-text-xs);
}

.page-list-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--rj-space-2);
    margin-left: auto;
    padding-top: 0;
}

.page-list-header-actions .btn,
.page-list-header-actions .topbar-select,
.page-list-header-actions .page-list-search-input {
    height: var(--rj-control-h-sm);
}

.page-list-header-actions .page-list-search-input {
    width: min(15rem, 24vw);
    min-width: 10rem;
}

.page-list-header-actions .topbar-select {
    border-radius: var(--rj-radius-md);
}

/* The one primary action sits at the far right */
.page-list-header-actions .btn-primary {
    order: 10;
}

.page-list-header--mails {
    display: flex;
}

/* --- Cards: two levels only. Fieldsets inside a settings card become groups
       (top divider + small caps label) instead of a second framed box. --- */
.settings-panel .settings-section,
.settings-panel .settings-section--compact {
    border: 0;
    border-top: 1px var(--rj-divider-style, solid) var(--rj-border);
    border-radius: 0;
    background: transparent;
    padding: var(--rj-space-5) 0 0;
    margin: var(--rj-space-5) 0 0;
    min-width: 0;
}

.settings-panel .settings-description + form > .settings-section:first-child,
.settings-panel .settings-description + .settings-section,
.settings-panel .settings-description + form > .form-group:first-child + .settings-section {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
}

.settings-panel .settings-section > legend {
    float: none;
    display: block;
    width: auto;
    /* The fieldset line resumes right after the legend box; keep it off the letters */
    padding: 0 var(--rj-space-3) 0 0;
    margin: 0 0 var(--rj-space-3);
    font-size: var(--rj-text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rj-text-muted);
}

.settings-panel .settings-section > legend + * {
    clear: none;
}

.settings-panel .settings-section .form-group:last-child {
    margin-bottom: 0;
}

/* Dashboard home: AI tools card no longer wraps further cards */
.dashboard-section--ai .ai-grid {
    gap: 0;
}

.dashboard-section--ai .ai-image-jobs-panel {
    border: 0;
    border-top: 1px var(--rj-divider-style, solid) var(--rj-border);
    border-radius: 0;
    background: transparent;
    padding: var(--rj-space-4) 0 0;
}

.settings-panel .forms-admin-list {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0 0 var(--rj-space-4);
    border-bottom: 1px var(--rj-divider-style, solid) var(--rj-border);
}

.dashboard-section--ai .ai-grid > .ai-card {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
}

/* The tools card is placed first by the grid although the assistant comes
   first in the DOM, so the divider follows the visual order: the assistant
   gets a top line whenever the tools card is shown above it. */
.dashboard-section--ai .ai-grid:has(> .ai-card--tools:not([hidden])) > .ai-card--assistant {
    border-top: 1px var(--rj-divider-style, solid) var(--rj-border);
    padding-top: var(--rj-space-5);
    margin-top: var(--rj-space-2);
}

.ai-card h3 {
    font-size: var(--rj-text-lg);
    font-weight: 600;
}

/* Backup: scheduled form is a group inside the card, not a card in a card */
.backup-scheduled .scheduled-form {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
}

/* Card titles: one size */
.dashboard-section-header h3,
.dashboard-panel h3,
.backup-site-card__info h3,
.settings-panel h3:not(.settings-nav-group h3):not(.ai-model-col__title) {
    font-size: var(--rj-text-lg);
    font-weight: 600;
}

/* --- Form rows: label left, field right (WordPress form-table), from 1100px --- */
.settings-panel .settings-form input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
.settings-panel .settings-form select,
.settings-panel .settings-form textarea {
    max-width: 40rem;
}

.settings-panel .settings-form input[type="number"] {
    max-width: 10rem;
}

@media (min-width: 1100px) {
    .settings-panel .form-group-row {
        display: block;
    }

    .settings-panel :is(.settings-form, .settings-form--embedded, .settings-section, .form-group-row) > .form-group:not(.branding-main-grid .form-group):not(.access-toggle-row):not(.ai-feature-toggle-grid):not(:has(> label.toggle-label)):not(:has(> label:first-child input)) {
        display: grid;
        grid-template-columns: minmax(10rem, 15rem) minmax(0, 1fr);
        column-gap: var(--rj-space-6);
        row-gap: var(--rj-space-1);
        align-items: start;
        margin: 0;
        padding: var(--rj-space-3) 0;
        border-bottom: 1px solid var(--rj-border-subtle);
    }

    .settings-panel :is(.settings-form, .settings-form--embedded, .settings-section, .form-group-row) > .form-group:not(.branding-main-grid .form-group):not(.access-toggle-row):not(.ai-feature-toggle-grid):not(:has(> label.toggle-label)):not(:has(> label:first-child input)):last-child,
    .settings-panel :is(.settings-form, .settings-form--embedded, .settings-section, .form-group-row) > .form-group:not(.branding-main-grid .form-group):not(.access-toggle-row):not(.ai-feature-toggle-grid):not(:has(> label.toggle-label)):not(:has(> label:first-child input)):has(+ .settings-actions),
    .settings-panel :is(.settings-form, .settings-form--embedded, .settings-section, .form-group-row) > .form-group:not(.branding-main-grid .form-group):not(.access-toggle-row):not(.ai-feature-toggle-grid):not(:has(> label.toggle-label)):not(:has(> label:first-child input)):has(+ .settings-section) {
        border-bottom: 0;
    }

    .settings-panel :is(.settings-form, .settings-form--embedded, .settings-section, .form-group-row) > .form-group:not(.branding-main-grid .form-group):not(.access-toggle-row):not(.ai-feature-toggle-grid):not(:has(> label.toggle-label)):not(:has(> label:first-child input)) > label:first-child:not(:has(input)) {
        grid-column: 1;
        margin: 0;
        padding-top: calc((var(--rj-control-h) - 1.45em) / 2);
        font-weight: 500;
        line-height: 1.45;
    }

    .settings-panel :is(.settings-form, .settings-form--embedded, .settings-section, .form-group-row) > .form-group:not(.branding-main-grid .form-group):not(.access-toggle-row):not(.ai-feature-toggle-grid):not(:has(> label.toggle-label)):not(:has(> label:first-child input)) > :not(label:first-child) {
        grid-column: 2;
        min-width: 0;
    }

    /* A label that wraps its own control (checkbox, toggle) spans both columns */
    .settings-panel :is(.settings-form, .settings-form--embedded, .settings-section, .form-group-row) > .form-group:not(.branding-main-grid .form-group):not(.access-toggle-row):not(.ai-feature-toggle-grid):not(:has(> label.toggle-label)):not(:has(> label:first-child input)) > label:first-child:has(input) {
        grid-column: 1 / -1;
        margin: 0;
    }

    .settings-panel :is(.settings-form, .settings-form--embedded, .settings-section, .form-group-row) > .form-group:not(.branding-main-grid .form-group):not(.access-toggle-row):not(.ai-feature-toggle-grid):not(:has(> label.toggle-label)):not(:has(> label:first-child input)) > label.toggle-label:first-child {
        justify-content: flex-start;
        gap: var(--rj-space-4);
        max-width: 55rem;
    }

    .settings-panel :is(.settings-form, .settings-form--embedded, .settings-section, .form-group-row) > .form-group:not(.branding-main-grid .form-group):not(.access-toggle-row):not(.ai-feature-toggle-grid):not(:has(> label.toggle-label)):not(:has(> label:first-child input)) > .form-hint {
        /* row-gap already adds one step; together with this the hint sits 8px below its control */
        margin-top: var(--rj-space-1);
    }
}

/* --- Sticky action bar at the bottom of every settings form --- */
.settings-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--rj-space-2);
    margin: var(--rj-space-5) calc(var(--rj-space-6) * -1) calc(var(--rj-space-6) * -1);
    padding: var(--rj-space-3) var(--rj-space-6);
    border-top: 1px var(--rj-divider-style, solid) var(--rj-border);
    border-radius: 0 0 var(--rj-radius-lg) var(--rj-radius-lg);
    background: var(--rj-surface-panel, var(--rj-bg-elevated));
}

.settings-actions .btn-primary {
    order: 10;
}

.settings-actions > :not(.btn) {
    margin-right: auto;
}

.settings-actions .settings-test-result {
    margin-top: 0;
}

/* --- List rows: one height, everything centred, actions on hover and focus --- */
.page-list-table thead th {
    background: transparent;
    font-size: var(--rj-text-xs);
    padding-block: var(--rj-space-2-5);
}

.page-list-table td {
    padding-block: var(--rj-space-2-5);
}

.page-list-cell-title {
    justify-content: center;
}

.page-list-row-actions {
    height: auto;
    min-height: 1.1rem;
    margin-top: var(--rj-space-0-5);
}

.page-list-row:focus-within .page-list-row-actions {
    opacity: 1;
}

.page-list-empty {
    padding: var(--rj-space-10) var(--rj-space-4) !important;
    text-align: center;
    color: var(--rj-text-muted);
}

.page-list-empty__text {
    margin: 0;
    font-size: var(--rj-text-md);
}

.page-list-empty__cta {
    margin-top: var(--rj-space-3);
}

/* --- Topbar: site name left, breadcrumb to the current place --- */
.topbar-title {
    display: inline-flex;
    align-items: center;
    gap: var(--rj-space-2);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Breadcrumb in the topbar colour, not the stage colour: the topbar is dark in Classic and Pop */
.topbar-title .topbar-crumb {
    color: var(--rj-topbar-text-muted);
}

.topbar-title .topbar-crumb-sep {
    color: var(--rj-topbar-text-muted);
    opacity: 0.6;
}

@media (max-width: 768px) {
    .page-list-header-actions {
        width: 100%;
        justify-content: flex-start;
        margin-left: 0;
    }

    .settings-actions {
        margin-inline: calc(var(--rj-space-4) * -1);
        padding-inline: var(--rj-space-4);
    }
}

.dashboard-section--ai .ai-image-jobs-panel[hidden],
.dashboard-section--ai .ai-grid[hidden],
.dashboard-section--ai .ai-card[hidden] {
    display: none !important;
}

.settings-panel .users-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--rj-space-3);
}


/* ============================================================
   PHASE 3: DESIGN PAGE (theme presets, base colour, font, density)
   ============================================================ */

.preset-grid {
    justify-self: stretch;
    display: grid;
    /* Six cards: three per row where the panel allows it, two below ~34rem */
    grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
    gap: var(--rj-space-5);
    max-width: 48rem;
}

.preset-card {
    display: flex;
    flex-direction: column;
    gap: var(--rj-space-2);
    padding: var(--rj-space-2);
    border: 2px solid var(--rj-border);
    border-radius: var(--rj-radius-lg);
    background: var(--rj-bg-elevated);
    color: var(--rj-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--rj-duration-fast) var(--rj-ease), box-shadow var(--rj-duration-fast) var(--rj-ease);
}

.preset-card:hover {
    border-color: var(--rj-border-strong);
}

.preset-card:focus-visible {
    outline: 2px solid var(--rj-primary);
    outline-offset: 2px;
}

.preset-card.selected {
    border-color: var(--rj-primary);
    box-shadow: 0 0 0 3px var(--rj-primary-muted);
}

/* Miniature of the shell: sidebar strip, topbar strip, two blocks on the stage */
.preset-card__preview {
    --pv-sidebar: oklch(from var(--rj-base) 0.965 min(c, 0.012) h);
    --pv-topbar: var(--pv-sidebar);
    --pv-bg: oklch(from var(--rj-base) 0.985 min(c, 0.006) h);
    --pv-card: #ffffff;
    --pv-border: oklch(from var(--rj-base) 0.92 min(c, 0.008) h);
    --pv-accent: var(--rj-primary);
    --pv-radius: 3px;
    position: relative;
    display: grid;
    grid-template-columns: 22% 1fr;
    grid-template-rows: 14% 1fr;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--rj-radius-md);
    border: 1px solid var(--rj-border);
    background: var(--pv-bg);
}

.preset-card__preview::before {
    content: "";
    grid-row: 1 / -1;
    background: var(--pv-sidebar);
}

.preset-card__preview::after {
    content: "";
    grid-column: 2;
    grid-row: 1;
    background: var(--pv-topbar);
    border-bottom: 1px solid var(--pv-border);
}

.preset-card__stage {
    grid-column: 2;
    grid-row: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6%;
    padding: 8%;
}

.preset-card__stage span {
    display: block;
    background: var(--pv-card);
    border: 1px solid var(--pv-border);
    border-radius: var(--pv-radius);
}

.preset-card__stage span:first-child {
    grid-column: 1 / -1;
    height: 38%;
    border-top: 3px solid var(--pv-accent);
}

.preset-card__name {
    font-size: var(--rj-text-md);
    font-weight: 600;
    line-height: 1.2;
}

.preset-card__desc {
    font-size: var(--rj-text-xs);
    color: var(--rj-text-muted);
    line-height: 1.35;
}

.preset-card[data-preset="classic"] .preset-card__preview { --pv-sidebar: #1d2327; --pv-topbar: #1d2327; --pv-bg: #f0f0f1; --pv-border: #c3c4c7; --pv-radius: 1px; }
.preset-card[data-preset="paper"] .preset-card__preview { --pv-sidebar: #fafaf8; --pv-topbar: #ffffff; --pv-bg: #ffffff; --pv-border: #e3e3df; --pv-radius: 2px; }
.preset-card[data-preset="console"] .preset-card__preview { --pv-sidebar: #f1f1f1; --pv-topbar: #fafafa; --pv-bg: #f1f1f1; --pv-card: #fafafa; --pv-border: #c4c4c4; --pv-radius: 0; }
.preset-card[data-preset="console"] .preset-card__preview::after { border-bottom-style: dashed; }
.preset-card[data-preset="pop"] .preset-card__preview { --pv-sidebar: #2c3b53; --pv-topbar: #2c3b53; --pv-bg: #eef2f8; --pv-card: #ffffff; --pv-border: #dbe2ec; --pv-radius: 4px; }
.preset-card[data-preset="pop"] .preset-card__preview::before { background: linear-gradient(180deg, #2c3b53, #3f5474); }
.preset-card[data-preset="pop"] .preset-card__stage span:first-child { border-top-width: 0; box-shadow: inset 0 3px 0 var(--pv-accent); border-radius: 4px; }
.preset-card[data-preset="studio"] .preset-card__preview { --pv-sidebar: #fafafa; --pv-topbar: #ffffff; --pv-bg: #fafafa; --pv-border: #eaeaea; --pv-accent: #171717; --pv-radius: 2px; }
[data-site-theme="dark"] .preset-card__preview { --pv-sidebar: oklch(from var(--rj-base) 0.20 min(c, 0.012) h); --pv-topbar: var(--pv-sidebar); --pv-bg: oklch(from var(--rj-base) 0.17 min(c, 0.008) h); --pv-card: oklch(from var(--rj-base) 0.215 min(c, 0.01) h); --pv-border: oklch(from var(--rj-base) 0.30 min(c, 0.012) h); }
[data-site-theme="dark"] .preset-card[data-preset="classic"] .preset-card__preview { --pv-sidebar: #0e1113; --pv-topbar: #0e1113; --pv-bg: #15181b; --pv-card: #1e2327; --pv-border: #3a4248; }
[data-site-theme="dark"] .preset-card[data-preset="paper"] .preset-card__preview { --pv-sidebar: #0d0d0d; --pv-topbar: #0d0d0d; --pv-bg: #121212; --pv-card: #181818; --pv-border: #2c2c2c; }
[data-site-theme="dark"] .preset-card[data-preset="console"] .preset-card__preview { --pv-sidebar: #0a0a0a; --pv-topbar: #0a0a0a; --pv-bg: #0a0a0a; --pv-card: #121212; --pv-border: #2a2a2a; }
[data-site-theme="dark"] .preset-card[data-preset="pop"] .preset-card__preview { --pv-sidebar: #151d2a; --pv-topbar: #151d2a; --pv-bg: #1c2533; --pv-card: #26303f; --pv-border: #35415a; }
[data-site-theme="dark"] .preset-card[data-preset="pop"] .preset-card__preview::before { background: linear-gradient(180deg, #151d2a, #23304a); }
[data-site-theme="dark"] .preset-card[data-preset="studio"] .preset-card__preview { --pv-sidebar: #000000; --pv-topbar: #000000; --pv-bg: #000000; --pv-card: #0a0a0a; --pv-border: #262626; --pv-accent: #ededed; }

/* Segmented control (density, mode) built from radio inputs */
.segmented {
    display: inline-flex;
    justify-self: start;
    width: max-content;
    max-width: 100%;
    padding: 2px;
    border: 1px solid var(--rj-border);
    border-radius: var(--rj-radius-md);
    background: var(--rj-bg-sunken);
}

.segmented label {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--rj-space-2);
    height: calc(var(--rj-control-h) - 6px);
    padding: 0 var(--rj-space-3);
    border-radius: calc(var(--rj-radius-md) - 2px);
    color: var(--rj-text-secondary);
    font-size: var(--rj-text-md);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

/* Unchosen options brighten monochrome on hover, like the menus */
.segmented label:not(:has(input:checked)):hover {
    --rj-hover-from: transparent;
    --rj-hover-peak: color-mix(in srgb, var(--rj-text) 9%, var(--rj-bg-elevated));
    --rj-hover-to: color-mix(in srgb, var(--rj-bg-elevated) 55%, var(--rj-bg-sunken));
    background-color: color-mix(in srgb, var(--rj-bg-elevated) 55%, var(--rj-bg-sunken));
    color: var(--rj-text);
    animation: rj-hover-fill var(--rj-duration-hover-in) linear both;
}

.segmented label {
    transition: background-color var(--rj-duration-hover-out) ease-out,
                color var(--rj-duration-fast) var(--rj-ease);
}

.segmented label:has(input:checked) {
    background: var(--rj-bg-elevated);
    color: var(--rj-text);
    box-shadow: var(--rj-shadow-sm);
}

.segmented label:has(input:focus-visible) {
    outline: 2px solid var(--rj-primary);
    outline-offset: 1px;
}

.segmented input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.theme-contrast-feedback {
    display: block;
    margin-top: var(--rj-space-1);
    font-size: var(--rj-text-xs);
    color: var(--rj-text-muted);
}

.theme-contrast-feedback[data-state="error"] {
    color: var(--rj-danger);
}

.theme-contrast-feedback::before {
    content: "";
    display: inline-block;
    width: 0.45rem;
    height: 0.45rem;
    margin-right: 0.35rem;
    border-radius: 50%;
    background: var(--rj-success, #16a34a);
    vertical-align: middle;
}

.theme-contrast-feedback[data-state="error"]::before {
    background: var(--rj-danger);
}

.theme-contrast-feedback:empty {
    display: none;
}

/* "Erweitert" lives in a details element so the common case stays short */
.settings-advanced {
    margin-top: var(--rj-space-5);
    border-top: 1px var(--rj-divider-style, solid) var(--rj-border);
    padding-top: var(--rj-space-3);
}

.settings-advanced > summary {
    display: inline-flex;
    align-items: center;
    gap: var(--rj-space-2);
    cursor: pointer;
    list-style: none;
    font-size: var(--rj-text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rj-text-muted);
    padding: var(--rj-space-1) 0;
}

.settings-advanced > summary::-webkit-details-marker {
    display: none;
}

.settings-advanced > summary::before {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    transition: transform var(--rj-duration-fast) var(--rj-ease);
}

.settings-advanced[open] > summary::before {
    transform: rotate(45deg);
}

.settings-advanced[open] > summary {
    margin-bottom: var(--rj-space-2);
}

.theme-option--swatch-preview {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 1px solid var(--rj-border);
    background: var(--rj-primary);
}

/* --- Design page follow-ups (review) --- */

/* Radio labels inside the segmented control are not form labels: no block margin */
.segmented label {
    margin: 0;
    line-height: 1;
}

/* The auto-reset button belongs next to the badge, not at the far right */
.color-input-group .auto-reset-btn {
    margin-left: 0;
}

/* Button preview: one row, as wide as its content, not a stretched block */
.settings-panel .btn-style-preview {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-self: start;
    width: max-content;
    max-width: 100%;
    gap: var(--rj-space-3);
    padding: var(--rj-space-3) var(--rj-space-4);
}

.settings-panel .range-input-group {
    max-width: 22rem;
}

/* Headings keep a little air below them even in the compact density */
.settings-description {
    margin-top: max(var(--rj-space-1), 0.3rem);
}

.settings-panel .settings-section > legend {
    margin-bottom: max(var(--rj-space-3), 0.65rem);
}

.page-list-header-left {
    gap: max(var(--rj-space-1), 0.25rem);
}

.page-list-header {
    margin-bottom: max(var(--rj-space-5), 1rem);
}

.dashboard-section-header h3,
.backup-site-card__info h3 {
    margin-bottom: max(var(--rj-space-1), 0.25rem);
}

/* Compact density: tighter sidebar items */
html[data-density="compact"] .sidebar-nav-item {
    padding-block: var(--rj-space-2);
}

html[data-density="compact"] .sidebar-nav,
html[data-density="compact"] .sidebar-bottom {
    gap: 1px;
}

/* "Erweitert": colours left, button style right, side by side when there is room */
.settings-advanced__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rj-space-6) 0;
}

/* Colours: six across, three across in a narrower panel, then two, then one.
   The button settings follow below in a row of three. */
.settings-advanced__colors {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--rj-space-4) var(--rj-space-4);
    align-items: start;
}

.settings-advanced__buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--rj-space-4) var(--rj-space-6);
    align-items: start;
    padding-top: var(--rj-space-5);
    border-top: 1px var(--rj-divider-style, solid) var(--rj-border);
}

.settings-advanced__colors > .form-group,
.settings-advanced__buttons > .form-group {
    margin: 0;
    min-width: 0;
}

/* The hex field never shrinks below seven mono characters; badge and reset
   wrap to a second line in a tight column instead */
.settings-advanced__colors .color-input-group {
    flex-wrap: wrap;
    gap: var(--rj-space-1);
}

.settings-advanced__colors input.color-hex-input {
    flex: 1 1 4.5rem;
    min-width: 4.5rem;
    width: auto;
    padding-inline: var(--rj-space-1-5);
}

.settings-advanced__colors .auto-reset-btn {
    margin-left: 0;
}

.settings-advanced__buttons .range-input-group {
    max-width: none;
}

@container settings (max-width: 64rem) {
    .settings-advanced__colors {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@container settings (max-width: 48rem) {
    .settings-advanced__buttons {
        grid-template-columns: minmax(0, 1fr);
    }
}

@container settings (max-width: 40rem) {
    .settings-advanced__colors {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container settings (max-width: 26rem) {
    .settings-advanced__colors {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Compact density: tighter settings sub-navigation */
html[data-density="compact"] .settings-tab-btn {
    padding-block: var(--rj-space-1);
}

html[data-density="compact"] .settings-tabs {
    gap: var(--rj-space-3);
}

html[data-density="compact"] .settings-nav-group h3 {
    margin-bottom: var(--rj-space-1);
}


/* ============================================================
   PHASE 4: DARK MODE PASS
   ============================================================ */

/* Dark text on the lifted primary: no light text-shadow */
[data-site-theme="dark"] .btn-primary,
[data-site-theme="dark"] .rj-btn--primary {
    text-shadow: none;
}

/* Native checkboxes and radios pick up the base colour and stay visible on dark surfaces */
.admin-main input[type="checkbox"],
.admin-main input[type="radio"] {
    accent-color: var(--rj-primary);
}

[data-site-theme="dark"] .admin-main input[type="radio"],
[data-site-theme="dark"] .admin-main input[type="checkbox"] {
    color-scheme: dark;
}

/* Accent status chip: label on the tinted chip uses the full text colour */
.dashboard-status-chip--accent .dashboard-status-chip__label {
    color: var(--rj-text);
    opacity: 0.78;
}


/* ============================================================
   POLISH PASS (review of the merged redesign)
   ============================================================ */

/* Paper is the one preset that needs a line under the white topbar; the stage
   then starts square so the corner does not sit on the line. */
[data-theme-preset="paper"] .admin-topbar {
    border-bottom-color: var(--rj-border);
}

[data-theme-preset="paper"] .admin-main {
    border-radius: 0;
}

/* Toggle rows: switch first, text right next to it. Reads as one unit and the
   state is obvious; nothing floats to the far end of a wide row. */
label.toggle-label,
.form-group label.toggle-label,
.scheduled-form__toggle.toggle-label,
.access-toggle-row .toggle-label,
.ai-feature-toggle-grid .toggle-label {
    display: inline-flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: var(--rj-space-3);
    width: auto;
    max-width: 100%;
    margin-bottom: 0;
}

label.toggle-label > .toggle-switch,
.access-toggle-row .toggle-label > .toggle-switch {
    order: -1;
    margin: 0;
}

.ai-feature-toggle-grid .toggle-label {
    min-height: 0;
}

/* The switch is sometimes a <span>: it needs a box to get its 44x24 size */
.toggle-switch {
    display: inline-block;
}

.form-group:has(> label.toggle-label):not(.ai-feature-toggle-grid):not(.access-toggle-row) {
    display: block;
}

.form-group:has(> label.toggle-label) > .form-hint {
    margin-top: var(--rj-space-2);
}

.form-group-label {
    display: block;
    margin-bottom: var(--rj-space-2);
    font-size: var(--rj-text-md);
    font-weight: 500;
}

/* Path fields with a browse button: the field is capped like every other
   input, the button stays right next to it instead of at the row's end */
.settings-panel .settings-form .logo-path-input {
    max-width: 46rem;
}

.settings-panel .settings-form .logo-path-input .input-with-clear {
    max-width: 40rem;
}

/* A heading directly followed by its form gets the same gap as a description would leave */
.settings-panel > h2 + form,
.settings-panel > h2 + .settings-form {
    margin-top: var(--rj-space-4);
}

/* The password form was capped at 500px and cut the card's action bar short */
.change-password-form {
    max-width: none;
}

.change-password-form input {
    max-width: 30rem;
}

/* Backup: retention fieldset is a group inside the card, not a boxed box */
.scheduled-form__fieldset {
    border: 0;
    border-radius: 0;
    padding: 0;
}

.scheduled-form__fieldset legend {
    padding: 0;
    margin-bottom: var(--rj-space-2);
    font-size: var(--rj-text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rj-text-muted);
}

.scheduled-form__limit > label,
.scheduled-form__side > label {
    font-size: var(--rj-text-md);
    font-weight: 500;
}

/* System status: in wide panels the value sits next to its label instead of
   at the far right edge */
.system-status-grid .dashboard-panel {
    container-type: inline-size;
}

@container (min-width: 44rem) {
    .system-status-row {
        display: grid;
        grid-template-columns: minmax(14rem, 22rem) minmax(0, 1fr);
        justify-content: start;
        column-gap: var(--rj-space-6);
    }

    .system-status-row > :last-child {
        text-align: left;
    }
}

/* Module tiles and the three-column feature grid fill their cells */
.access-toggle-row label.toggle-label,
.ai-feature-toggle-grid label.toggle-label,
.form-group.access-toggle-row label.toggle-label,
.form-group.ai-feature-toggle-grid label.toggle-label {
    display: flex;
    width: 100%;
}


/* ============================================================
   PRESET REFINEMENTS
   ------------------------------------------------------------
   Soft follows the shadcn/ui dashboard blocks, Studio follows the Vercel
   dashboard / Geist. The tokens carry the colours, radii and control
   heights; the rules here cover what tokens cannot express: table heads,
   button surfaces, the sidebar item geometry and the topbar line.
   ============================================================ */

/* --- Soft: shadcn/ui ------------------------------------------------------ */

/* Buttons px-4, small ones px-3 */
[data-theme-preset="soft"] .btn {
    padding-inline: var(--rj-space-4);
}

[data-theme-preset="soft"] .btn-sm {
    padding-inline: var(--rj-space-3);
}

/* Inputs px-3 */
[data-theme-preset="soft"] .form-group input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]),
[data-theme-preset="soft"] .form-group select,
[data-theme-preset="soft"] .form-group textarea {
    padding-inline: var(--rj-space-3);
}

/* Sidebar menu buttons: h-8, px-2, 16px icons, gap-2 */
[data-theme-preset="soft"] .sidebar-nav {
    padding: var(--rj-space-3) var(--rj-space-2);
    gap: var(--rj-space-0-5);
}

[data-theme-preset="soft"] .sidebar-nav-item {
    min-height: 2rem;
    padding: var(--rj-space-1-5) var(--rj-space-2);
    gap: var(--rj-space-2);
    font-weight: 500;
}

[data-theme-preset="soft"] .sidebar-nav-item svg {
    width: 1rem;
    height: 1rem;
    opacity: 0.85;
}

[data-theme-preset="soft"] .sidebar-nav-item.active {
    font-weight: 600;
}

/* Table heads h-10, medium weight, muted, no caps; cells p-2; rows hover muted/50 */
[data-theme-preset="soft"] .page-list-table thead th,
[data-theme-preset="soft"] .users-table th,
[data-theme-preset="soft"] .scheduled-list__table th,
[data-theme-preset="soft"] .ai-audit-table th {
    height: 2.5rem;
    padding-block: 0;
    vertical-align: middle;
    font-size: var(--rj-text-sm);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--rj-text-muted);
    background: transparent;
}

[data-theme-preset="soft"] .page-list-table td,
[data-theme-preset="soft"] .users-table td,
[data-theme-preset="soft"] .scheduled-list__table td,
[data-theme-preset="soft"] .ai-audit-table td {
    padding-block: var(--rj-space-2);
}

[data-theme-preset="soft"] .page-list-table tbody tr:hover,
[data-theme-preset="soft"] .users-table tbody tr:hover,
[data-theme-preset="soft"] .scheduled-list__table tbody tr:hover {
    background: var(--rj-bg-hover);
}

/* --- Studio: Vercel / Geist ----------------------------------------------- */

/* Topbar and sidebar end in a hairline; the stage starts square under it */
[data-theme-preset="studio"] .admin-topbar {
    border-bottom-color: var(--rj-border);
}

[data-theme-preset="studio"] .admin-sidebar {
    border-right: 1px solid var(--rj-sidebar-border);
}

[data-theme-preset="studio"] .admin-main {
    border-radius: 0;
    box-shadow: none;
}

/* Sidebar items: 32px, quiet text, dark when active */
[data-theme-preset="studio"] .sidebar-nav {
    padding: var(--rj-space-3) var(--rj-space-2);
    gap: var(--rj-space-0-5);
}

[data-theme-preset="studio"] .sidebar-nav-item {
    min-height: 2rem;
    padding: var(--rj-space-1-5) var(--rj-space-2-5);
    gap: var(--rj-space-2);
    font-weight: 500;
}

[data-theme-preset="studio"] .sidebar-nav-item svg {
    width: 1rem;
    height: 1rem;
    opacity: 0.8;
}

[data-theme-preset="studio"] .sidebar-nav-item.active {
    font-weight: 600;
}

/* Buttons: solid, no gradient, no glow, no text shadow. Secondary buttons
   are white with a hairline that darkens on hover. */
[data-theme-preset="studio"] .btn {
    font-weight: 500;
}

[data-theme-preset="studio"] .btn-primary,
[data-theme-preset="studio"] .btn-danger {
    text-shadow: none;
    box-shadow: none;
    transition: background-color var(--rj-duration-fast) var(--rj-ease),
                transform var(--rj-duration-fast) var(--rj-ease);
}

[data-theme-preset="studio"] .btn-primary,
[data-theme-preset="studio"] .btn-primary:hover,
[data-theme-preset="studio"] .btn-primary:active {
    background-image: none;
    box-shadow: none;
}

[data-theme-preset="studio"] .btn-danger {
    background: var(--rj-danger);
}

[data-theme-preset="studio"] .btn-danger:hover {
    background: var(--rj-danger-hover);
    box-shadow: none;
}

[data-theme-preset="studio"] .btn-danger::after {
    display: none;
}

[data-theme-preset="studio"] .btn-secondary {
    --rj-hover-from: var(--rj-bg-elevated);
    border-color: var(--rj-border);
    box-shadow: none;
}

[data-theme-preset="studio"] .btn-secondary:hover {
    background: var(--rj-bg);
    border-color: var(--rj-border-strong);
}

/* Tables: grey head band, 13px muted labels, hairline rows, hover #fafafa */
[data-theme-preset="studio"] .page-list-table thead th,
[data-theme-preset="studio"] .users-table th,
[data-theme-preset="studio"] .scheduled-list__table th,
[data-theme-preset="studio"] .ai-audit-table th {
    padding-block: var(--rj-space-2-5);
    font-size: var(--rj-text-sm);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--rj-text-muted);
    background: var(--rj-bg);
    border-bottom: 1px solid var(--rj-border);
}

[data-theme-preset="studio"] .page-list-table td,
[data-theme-preset="studio"] .users-table td,
[data-theme-preset="studio"] .scheduled-list__table td,
[data-theme-preset="studio"] .ai-audit-table td {
    padding-block: var(--rj-space-3);
}

[data-theme-preset="studio"] .page-list-table tbody tr:hover,
[data-theme-preset="studio"] .users-table tbody tr:hover,
[data-theme-preset="studio"] .scheduled-list__table tbody tr:hover {
    background: var(--rj-bg);
}

/* Focus rings use the base colour so the accent still shows up somewhere */
[data-theme-preset="studio"] .btn:focus-visible,
[data-theme-preset="studio"] .sidebar-nav-item:focus-visible,
[data-theme-preset="studio"] .preset-card:focus-visible {
    outline-color: var(--rj-border-focus);
}


/* --- Console: ops-console look -------------------------------------------- */

/* Chrome: hairline under the topbar and beside the sidebar, square stage */
[data-theme-preset="console"] .admin-topbar {
    border-bottom-color: var(--rj-border);
}

[data-theme-preset="console"] .admin-sidebar {
    border-right: 1px solid var(--rj-sidebar-border);
}

[data-theme-preset="console"] .admin-main {
    border-radius: 0;
    box-shadow: none;
}

/* Group dividers are dashed through --rj-divider-style (see tokens); the
   choice cards drop their 2px frame to a hairline like every other box. */
[data-theme-preset="console"] .preset-card,
[data-theme-preset="console"] .theme-option {
    border-width: 1px;
}

/* Typography: labels, heads and navigation in caps with tracking; the mono
   face makes the smaller scale from the tokens read like instrument text */
[data-theme-preset="console"] .form-group label:not(.toggle-label),
[data-theme-preset="console"] .form-group .form-group-label,
[data-theme-preset="console"] .settings-nav-group h3,
[data-theme-preset="console"] .dashboard-status-chip__label,
[data-theme-preset="console"] .dashboard-stat-card span,
[data-theme-preset="console"] .page-list-table thead th,
[data-theme-preset="console"] .users-table th,
[data-theme-preset="console"] .scheduled-list__table th,
[data-theme-preset="console"] .ai-audit-table th,
[data-theme-preset="console"] .preset-card__name,
[data-theme-preset="console"] .theme-option,
[data-theme-preset="console"] .segmented label {
    font-size: var(--rj-text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

[data-theme-preset="console"] .form-group label:not(.toggle-label),
[data-theme-preset="console"] .form-group .form-group-label {
    color: var(--rj-text-secondary);
}

[data-theme-preset="console"] .page-list-table thead th,
[data-theme-preset="console"] .users-table th,
[data-theme-preset="console"] .scheduled-list__table th,
[data-theme-preset="console"] .ai-audit-table th {
    color: var(--rj-text-muted);
    background: transparent;
    border-bottom: 1px solid var(--rj-border-strong);
}

[data-theme-preset="console"] .sidebar-nav {
    padding: var(--rj-space-3) var(--rj-space-2);
    gap: var(--rj-space-0-5);
}

[data-theme-preset="console"] .sidebar-nav-item,
[data-theme-preset="console"] .settings-tab-btn {
    font-size: var(--rj-text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Three steps of hierarchy in caps: main menu, sub-navigation, group headings */
[data-theme-preset="console"] .sidebar-nav-item {
    font-size: var(--rj-text-sm);
}

[data-theme-preset="console"] .settings-nav-group h3 {
    font-size: calc(0.6875rem * var(--rj-font-scale));
    font-weight: 600;
    letter-spacing: 0.1em;
}

[data-theme-preset="console"] .sidebar-nav-item {
    min-height: 2rem;
    padding: var(--rj-space-1-5) var(--rj-space-2-5);
    gap: var(--rj-space-2);
}

[data-theme-preset="console"] .sidebar-nav-item svg {
    width: 1rem;
    height: 1rem;
    opacity: 0.75;
}

[data-theme-preset="console"] .topbar-title,
[data-theme-preset="console"] .topbar-brand {
    letter-spacing: 0.02em;
}

/* Buttons: flat, caps, tracked; secondary ones are outlined */
[data-theme-preset="console"] .btn,
[data-theme-preset="console"] .rj-imgmgr-upload-btn,
[data-theme-preset="console"] .rj-imgmgr-ai-generator-btn {
    font-size: var(--rj-text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

[data-theme-preset="console"] .rj-imgmgr-upload-btn {
    background-image: none;
}

/* Console's option trays carry 6px padding for the crosshair; in the media
   toolbar the options shrink so the tray stays on the search field's height */
[data-theme-preset="console"] .rj-imgmgr-type-btn,
[data-theme-preset="console"] .rj-imgmgr-mode-btn,
[data-theme-preset="console"] .rj-imgmgr-view-btn {
    height: calc(var(--rj-control-h) - 14px);
}

[data-theme-preset="console"] .rj-imgmgr-ai-generator-btn {
    background: transparent;
    border-color: var(--rj-border-strong);
}

[data-theme-preset="console"] .btn-primary,
[data-theme-preset="console"] .btn-danger {
    text-shadow: none;
    box-shadow: none;
    transition: background-color var(--rj-duration-fast) var(--rj-ease),
                transform var(--rj-duration-fast) var(--rj-ease);
}

[data-theme-preset="console"] .btn-primary,
[data-theme-preset="console"] .btn-primary:hover,
[data-theme-preset="console"] .btn-primary:active {
    background-image: none;
    box-shadow: none;
}

[data-theme-preset="console"] .btn-danger {
    background: var(--rj-danger);
}

[data-theme-preset="console"] .btn-danger:hover {
    background: var(--rj-danger-hover);
    box-shadow: none;
}

[data-theme-preset="console"] .btn-danger::after {
    display: none;
}

[data-theme-preset="console"] .btn-secondary {
    --rj-hover-from: transparent;
    background: transparent;
    border-color: var(--rj-border-strong);
}

[data-theme-preset="console"] .btn-secondary:hover {
    background: var(--rj-bg-hover);
    border-color: var(--rj-text);
}

/* Selected elements wear a crosshair: four corner brackets just outside
   the box, drawn as eight gradient strokes on one pseudo-element. The box
   itself keeps a thin accent border and no glow. */
[data-theme-preset="console"] .preset-card.selected,
[data-theme-preset="console"] .theme-option.selected,
[data-theme-preset="console"] .segmented label:has(input:checked),
[data-theme-preset="console"] .settings-tab-btn.active,
[data-theme-preset="console"] .sidebar-nav-item.active,
[data-theme-preset="console"] .ai-tool-tab.active,
[data-theme-preset="console"] .dashboard-range-tab.active,
[data-theme-preset="console"] .rj-imgmgr-type-btn--active,
[data-theme-preset="console"] .rj-imgmgr-mode-btn--active,
[data-theme-preset="console"] .rj-imgmgr-view-btn--active {
    position: relative;
    box-shadow: none;
}

[data-theme-preset="console"] .preset-card.selected,
[data-theme-preset="console"] .theme-option.selected {
    border-color: var(--rj-primary);
    --rj-xh-off: 8px;
    --rj-xh-len: 12px;
}

[data-theme-preset="console"] .settings-tab-btn.active {
    color: var(--rj-text);
    background: var(--rj-sidebar-active-bg);
    border-color: transparent;
}

[data-theme-preset="console"] .segmented label:has(input:checked),
[data-theme-preset="console"] .settings-tab-btn.active,
[data-theme-preset="console"] .sidebar-nav-item.active,
[data-theme-preset="console"] .ai-tool-tab.active,
[data-theme-preset="console"] .dashboard-range-tab.active,
[data-theme-preset="console"] .rj-imgmgr-type-btn--active,
[data-theme-preset="console"] .rj-imgmgr-mode-btn--active,
[data-theme-preset="console"] .rj-imgmgr-view-btn--active {
    --rj-xh-off: 3px;
    --rj-xh-len: 7px;
}

[data-theme-preset="console"] .preset-card.selected::after,
[data-theme-preset="console"] .theme-option.selected::after,
[data-theme-preset="console"] .segmented label:has(input:checked)::after,
[data-theme-preset="console"] .settings-tab-btn.active::after,
[data-theme-preset="console"] .sidebar-nav-item.active::after,
[data-theme-preset="console"] .ai-tool-tab.active::after,
[data-theme-preset="console"] .dashboard-range-tab.active::after,
[data-theme-preset="console"] .rj-imgmgr-type-btn--active::after,
[data-theme-preset="console"] .rj-imgmgr-mode-btn--active::after,
[data-theme-preset="console"] .rj-imgmgr-view-btn--active::after {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--rj-xh-off, 6px));
    pointer-events: none;
    --rj-xh-w: 2px;
    --rj-xh-c: var(--rj-text-muted);
    background:
        linear-gradient(var(--rj-xh-c), var(--rj-xh-c)) top left / var(--rj-xh-len) var(--rj-xh-w) no-repeat,
        linear-gradient(var(--rj-xh-c), var(--rj-xh-c)) top left / var(--rj-xh-w) var(--rj-xh-len) no-repeat,
        linear-gradient(var(--rj-xh-c), var(--rj-xh-c)) top right / var(--rj-xh-len) var(--rj-xh-w) no-repeat,
        linear-gradient(var(--rj-xh-c), var(--rj-xh-c)) top right / var(--rj-xh-w) var(--rj-xh-len) no-repeat,
        linear-gradient(var(--rj-xh-c), var(--rj-xh-c)) bottom left / var(--rj-xh-len) var(--rj-xh-w) no-repeat,
        linear-gradient(var(--rj-xh-c), var(--rj-xh-c)) bottom left / var(--rj-xh-w) var(--rj-xh-len) no-repeat,
        linear-gradient(var(--rj-xh-c), var(--rj-xh-c)) bottom right / var(--rj-xh-len) var(--rj-xh-w) no-repeat,
        linear-gradient(var(--rj-xh-c), var(--rj-xh-c)) bottom right / var(--rj-xh-w) var(--rj-xh-len) no-repeat;
}

/* Square swatch and badge, no shadows: Console has no round parts */
/* Vendor pseudo-elements stay in separate rules: an unknown one would
   invalidate the whole selector list in the other engine */
[data-theme-preset="console"] input.color-picker,
[data-theme-preset="console"] .color-picker {
    border-radius: var(--rj-radius-sm);
}

[data-theme-preset="console"] input.color-picker::-webkit-color-swatch-wrapper,
[data-theme-preset="console"] input.color-picker::-webkit-color-swatch {
    border-radius: var(--rj-radius-sm);
}

[data-theme-preset="console"] input.color-picker::-moz-color-swatch {
    border-radius: var(--rj-radius-sm);
}

[data-theme-preset="console"] .color-picker {
    box-shadow: none;
}

[data-theme-preset="console"] .color-picker:hover {
    transform: none;
}

[data-theme-preset="console"] .mail-badge {
    border-radius: var(--rj-radius-sm);
    box-shadow: none;
}

[data-theme-preset="console"] .toggle-slider {
    border-radius: var(--rj-radius-sm);
}

[data-theme-preset="console"] .toggle-slider::before {
    border-radius: 0;
    box-shadow: none;
}

/* Option groups (density, mode, AI tool tabs, chart range tabs): square
   tray, options spaced so the crosshair around the chosen one has room,
   the chosen option is a raised box instead of a filled pill */
[data-theme-preset="console"] .segmented,
[data-theme-preset="console"] .ai-tool-tabs,
[data-theme-preset="console"] .dashboard-range-tabs,
[data-theme-preset="console"] .rj-imgmgr-type-toggle,
[data-theme-preset="console"] .rj-imgmgr-mode-toggle,
[data-theme-preset="console"] .rj-imgmgr-view-toggle {
    gap: var(--rj-space-2-5);
    padding: var(--rj-space-1-5);
    border-radius: var(--rj-radius-md);
    background: var(--rj-bg-sunken);
    border: 1px solid var(--rj-border);
}

[data-theme-preset="console"] .segmented label,
[data-theme-preset="console"] .ai-tool-tab,
[data-theme-preset="console"] .dashboard-range-tab,
[data-theme-preset="console"] .rj-imgmgr-type-btn,
[data-theme-preset="console"] .rj-imgmgr-mode-btn,
[data-theme-preset="console"] .rj-imgmgr-view-btn {
    border-radius: var(--rj-radius-sm);
    font-size: var(--rj-text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rj-text-secondary);
}

[data-theme-preset="console"] .segmented label:has(input:checked),
[data-theme-preset="console"] .ai-tool-tab.active,
[data-theme-preset="console"] .dashboard-range-tab.active,
[data-theme-preset="console"] .rj-imgmgr-type-btn--active,
[data-theme-preset="console"] .rj-imgmgr-mode-btn--active,
[data-theme-preset="console"] .rj-imgmgr-view-btn--active {
    background: var(--rj-bg-elevated);
    color: var(--rj-text);
    box-shadow: none;
}

/* Content counters on the dashboard: no pills in Console. Square readouts
   like the status tiles: caps label, tabular number, hairline box. */
[data-theme-preset="console"] .dashboard-content-pills {
    gap: var(--rj-space-2-5);
}

[data-theme-preset="console"] .dashboard-content-pills span {
    min-height: var(--rj-control-h-sm);
    gap: var(--rj-space-2);
    padding: 0 var(--rj-space-3);
    border-radius: var(--rj-radius-sm);
    background: var(--rj-bg-sunken);
    font-size: var(--rj-text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rj-text-muted);
}

[data-theme-preset="console"] .dashboard-content-pills strong {
    font-size: var(--rj-text-md);
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

/* No pills anywhere in Console: badges, chips, tags, status labels,
   collapsible summaries, the topbar select and the chat chips all take the
   small square radius. Dots, spinners and slider thumbs stay round. */
[data-theme-preset="console"] :is(
    .topbar-select, .events-status, .news-status, .seo-health-badge,
    .section-index-label, .section-type, .section-issue-badge,
    .ce-section-nav__item em, .auto-badge, .restore-mode-indicator,
    .dashboard-details summary, .settings-advanced[open] > summary,
    .ai-image-history-card__top time, .ai-image-history-status, .ai-audit-badge,
    .ai-usage-budget__value, .ai-usage-budget__bar, .ai-usage-budget__fill,
    .ai-card__badge, .mail-flag-btn,
    .rj-copilot-toggle, .rj-copilot-image-modes, .rj-copilot-image-mode,
    .rj-copilot-bool, .rj-agent-chip, .rj-agent-tag, .rj-imgmgr-ai-badge, .rj-imgmgr-check
) {
    border-radius: var(--rj-radius-sm);
}

/* The button preview shows Console's real buttons: caps, tracked, flat,
   secondary as a hairline outline */
[data-theme-preset="console"] .btn-preview-primary,
[data-theme-preset="console"] .btn-preview-secondary {
    font-size: var(--rj-text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-shadow: none;
}

[data-theme-preset="console"] .btn-preview-secondary {
    border-width: 1px;
    color: var(--rj-text);
}

/* A dashed hairline between neighbouring options, centred in the gap */
[data-theme-preset="console"] .segmented label,
[data-theme-preset="console"] .ai-tool-tab,
[data-theme-preset="console"] .dashboard-range-tab {
    position: relative;
}

[data-theme-preset="console"] .segmented label + label::before,
[data-theme-preset="console"] .ai-tool-tab + .ai-tool-tab::before,
[data-theme-preset="console"] .dashboard-range-tab + .dashboard-range-tab::before,
[data-theme-preset="console"] .rj-imgmgr-type-btn + .rj-imgmgr-type-btn::before,
[data-theme-preset="console"] .rj-imgmgr-mode-btn + .rj-imgmgr-mode-btn::before,
[data-theme-preset="console"] .rj-imgmgr-view-btn + .rj-imgmgr-view-btn::before {
    content: "";
    position: absolute;
    left: calc(var(--rj-space-2-5) / -2);
    top: 18%;
    bottom: 18%;
    border-left: 1px dashed var(--rj-border-strong);
    pointer-events: none;
}

/* The preset grid needs room for the brackets around the chosen card */
[data-theme-preset="console"] .preset-grid,
[data-theme-preset="console"] .theme-selector {
    padding: var(--rj-space-2);
    margin: calc(-1 * var(--rj-space-2));
}

/* Focus rings: accent, square */
[data-theme-preset="console"] .btn:focus-visible,
[data-theme-preset="console"] .sidebar-nav-item:focus-visible,
[data-theme-preset="console"] .preset-card:focus-visible {
    outline-color: var(--rj-primary);
    outline-offset: 2px;
}

/* --- Pop: playful dashboard --------------------------------------------------
   Dark gradient chrome, a light sheet for the stage with a dog-eared corner,
   labels and titles in coloured pills, round navigation. Colours and radii
   come from the tokens; the rules here draw the gradient, the ear and the
   pills and round off what the tokens cannot reach. */

/* Chrome: the sidebar runs the gradient, the topbar keeps its top colour so
   both read as one board; a hairline of light separates sidebar and stage */
[data-theme-preset="pop"] .admin-sidebar {
    background: var(--rj-sidebar-gradient, var(--rj-sidebar-bg));
}

[data-theme-preset="pop"] .admin-topbar {
    border-bottom: 0;
}

/* Cards: white sheets with a soft shadow instead of a hard frame */
[data-theme-preset="pop"] .dashboard-stat-card,
[data-theme-preset="pop"] .dashboard-panel,
[data-theme-preset="pop"] .settings-panel {
    border-color: var(--rj-border-subtle);
    box-shadow: var(--rj-shadow-sm);
}

/* Pills: legends, panel titles, stat labels and status labels sit in a
   coloured chip. --rj-pop-pill carries the colour, --rj-pop-pill-text the
   text on it (white on the saturated light-mode colours, dark on the lifted
   dark-mode ones, see below). */
[data-theme-preset="pop"] .settings-section > legend,
[data-theme-preset="pop"] .dashboard-panel h3,
[data-theme-preset="pop"] .dashboard-section-title,
[data-theme-preset="pop"] .dashboard-section-header h3,
[data-theme-preset="pop"] .ai-card > h3,
[data-theme-preset="pop"] .backup-site-card__info h3,
[data-theme-preset="pop"] .scheduled-list__header h4,
[data-theme-preset="pop"] .backup-remote__header h4,
[data-theme-preset="pop"] .dashboard-stat-card span,
[data-theme-preset="pop"] .dashboard-status-chip__label,
html[data-theme-preset="pop"] .settings-panel h3.settings-subheading,
[data-theme-preset="pop"] .frontend-logos-block__title,
[data-theme-preset="pop"] .scheduled-form__fieldset legend,
[data-theme-preset="pop"] .ai-image-jobs-panel__copy h4,
[data-theme-preset="pop"] .ai-image-history__header h4 {
    display: inline-block;
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0 var(--rj-space-3);
    border-radius: var(--rj-radius-full, 999px);
    background: var(--rj-pop-pill, var(--rj-primary));
    color: var(--rj-pop-pill-text, var(--rj-text-on-primary));
    font-size: var(--rj-text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    /* Centred by line height so a long label can still truncate */
    line-height: calc(1.5rem * var(--rj-font-scale));
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

/* Stat and status labels may run long: they wrap inside a rounded box
   instead of truncating */
[data-theme-preset="pop"] .dashboard-stat-card span,
[data-theme-preset="pop"] .dashboard-status-chip__label {
    white-space: normal;
    line-height: 1.3;
    padding-block: calc(0.1rem * var(--rj-font-scale) + 2px);
    border-radius: 12px;
}

[data-theme-preset="pop"] .dashboard-stat-card span {
    align-self: flex-start;
    margin-bottom: var(--rj-space-2);
}

/* Second level inside a card (sub-blocks, retention, image jobs): the same
   pill, tinted instead of filled */
html[data-theme-preset="pop"] .settings-panel h3.settings-subheading,
[data-theme-preset="pop"] .frontend-logos-block__title,
[data-theme-preset="pop"] .scheduled-form__fieldset legend,
[data-theme-preset="pop"] .ai-image-jobs-panel__copy h4,
[data-theme-preset="pop"] .ai-image-history__header h4 {
    --rj-pop-pill: var(--rj-primary-subtle);
    --rj-pop-pill-text: var(--rj-primary);
    margin-bottom: var(--rj-space-2);
}

[data-theme-preset="pop"] .dashboard-section-header h3,
[data-theme-preset="pop"] .backup-site-card__info h3,
[data-theme-preset="pop"] .scheduled-list__header h4,
[data-theme-preset="pop"] .backup-remote__header h4 {
    margin-bottom: var(--rj-space-2);
}

/* The assistant card is a flex column: the title keeps its own width, and
   the mode badge inside it turns into a white outline */
[data-theme-preset="pop"] .ai-card > h3 {
    align-self: flex-start;
}

[data-theme-preset="pop"] .ai-card > h3 .ai-card__badge {
    border-color: color-mix(in srgb, currentColor 55%, transparent);
    color: inherit;
    font-size: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    line-height: 1;
    padding: 3px var(--rj-space-2) 2px;
    vertical-align: 0px;
}

[data-theme-preset="pop"] .dashboard-panel h3,
[data-theme-preset="pop"] .dashboard-section-title {
    margin-bottom: var(--rj-space-3);
}

[data-theme-preset="pop"] .dashboard-panel-header h3 {
    margin-bottom: 0;
}

/* Stat tiles take turns through the palette: base, danger, warning, success,
   accent; the number wears the tile colour */
[data-theme-preset="pop"] .dashboard-stat-card:nth-child(5n + 2) { --rj-pop-pill: var(--rj-danger); }
[data-theme-preset="pop"] .dashboard-stat-card:nth-child(5n + 3) { --rj-pop-pill: var(--rj-warning); }
[data-theme-preset="pop"] .dashboard-stat-card:nth-child(5n + 4) { --rj-pop-pill: var(--rj-success); }
[data-theme-preset="pop"] .dashboard-stat-card:nth-child(5n + 5) { --rj-pop-pill: var(--rj-brand); }

[data-theme-preset="pop"] .dashboard-stat-card strong {
    color: var(--rj-pop-pill, var(--rj-primary));
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Status strip: the label pill keeps the base colour, the value stays text */
[data-theme-preset="pop"] .dashboard-status-chip {
    min-width: 0;
    border-radius: var(--rj-radius-md);
}

[data-theme-preset="pop"] .dashboard-status-chip__label {
    margin-bottom: var(--rj-space-1-5);
}

/* Light-mode pills are saturated, so white text; in dark mode the colours are
   lifted (tokens) and the text turns dark like on the primary button */
[data-theme-preset="pop"] .dashboard-stat-card,
[data-theme-preset="pop"] .dashboard-status-chip {
    --rj-pop-pill-text: #ffffff;
}

[data-theme-preset="pop"][data-site-theme="dark"] .dashboard-stat-card,
[data-theme-preset="pop"][data-site-theme="dark"] .dashboard-status-chip {
    --rj-pop-pill-text: #11141b;
}

/* Settings sub-navigation: group heads as tinted pills, one step quieter */
[data-theme-preset="pop"] .settings-nav-group h3 {
    display: inline-block;
    line-height: calc(1.375rem * var(--rj-font-scale));
    padding: 0 var(--rj-space-2-5);
    margin: 0 0 var(--rj-space-2) var(--rj-space-1);
    border-radius: var(--rj-radius-full, 999px);
    background: var(--rj-primary-subtle);
    color: var(--rj-primary);
    font-size: calc(0.6875rem * var(--rj-font-scale));
    letter-spacing: 0.08em;
}

[data-theme-preset="pop"] .settings-tab-btn {
    border-radius: var(--rj-radius-full, 999px);
}

/* Navigation: round items, the active one a filled pill with a coloured glow */
[data-theme-preset="pop"] .sidebar-nav {
    padding-inline: var(--rj-space-3);
}

[data-theme-preset="pop"] .sidebar-nav-item {
    border-radius: var(--rj-radius-full, 999px);
    padding-inline: var(--rj-space-4);
}

[data-theme-preset="pop"] .sidebar-nav-item.active {
    box-shadow: 0 6px 16px -4px oklch(from var(--rj-primary) l c h / 0.6);
}

[data-theme-preset="pop"] .sidebar-nav-item.active:hover {
    filter: none;
}

/* Collapsed sidebar: the active pill shrinks to a circle around the icon */
html[data-sidebar="collapsed"][data-theme-preset="pop"] .sidebar-nav-item {
    padding-inline: 0;
}

/* Option groups and chips: round tray, round options */
[data-theme-preset="pop"] .segmented,
[data-theme-preset="pop"] .rj-imgmgr-type-toggle,
[data-theme-preset="pop"] .rj-imgmgr-mode-toggle,
[data-theme-preset="pop"] .rj-imgmgr-view-toggle {
    border-radius: var(--rj-radius-full, 999px);
    padding: 3px;
}

[data-theme-preset="pop"] .segmented label,
[data-theme-preset="pop"] .rj-imgmgr-type-btn,
[data-theme-preset="pop"] .rj-imgmgr-mode-btn,
[data-theme-preset="pop"] .rj-imgmgr-view-btn {
    border-radius: var(--rj-radius-full, 999px);
}

[data-theme-preset="pop"] .segmented label:has(input:checked),
[data-theme-preset="pop"] .rj-imgmgr-type-btn--active,
[data-theme-preset="pop"] .rj-imgmgr-mode-btn--active,
[data-theme-preset="pop"] .rj-imgmgr-view-btn--active {
    box-shadow: var(--rj-shadow-sm);
}

[data-theme-preset="pop"] .rj-imgmgr-type-btn,
[data-theme-preset="pop"] .rj-imgmgr-mode-btn,
[data-theme-preset="pop"] .rj-imgmgr-view-btn {
    height: calc(var(--rj-control-h) - 8px);
}

/* Colour swatches are round */
[data-theme-preset="pop"] input.color-picker,
[data-theme-preset="pop"] .color-picker {
    border-radius: 50%;
}

[data-theme-preset="pop"] input.color-picker::-webkit-color-swatch-wrapper,
[data-theme-preset="pop"] input.color-picker::-webkit-color-swatch {
    border-radius: 50%;
}

[data-theme-preset="pop"] input.color-picker::-moz-color-swatch {
    border-radius: 50%;
}

/* Table heads: tinted, rounded ends on the first and last column */
[data-theme-preset="pop"] .page-list-table thead th,
[data-theme-preset="pop"] .users-table th,
[data-theme-preset="pop"] .scheduled-list__table th,
[data-theme-preset="pop"] .ai-audit-table th {
    background: color-mix(in srgb, var(--rj-primary) 15%, var(--rj-bg-elevated));
    color: var(--rj-primary);
    border-bottom-color: transparent;
    font-weight: 700;
    letter-spacing: 0.06em;
}

[data-theme-preset="pop"] .page-list-table thead th:first-child,
[data-theme-preset="pop"] .users-table th:first-child,
[data-theme-preset="pop"] .scheduled-list__table th:first-child,
[data-theme-preset="pop"] .ai-audit-table th:first-child {
    border-top-left-radius: var(--rj-radius-full, 999px);
    border-bottom-left-radius: var(--rj-radius-full, 999px);
}

[data-theme-preset="pop"] .page-list-table thead th:last-child,
[data-theme-preset="pop"] .users-table th:last-child,
[data-theme-preset="pop"] .scheduled-list__table th:last-child,
[data-theme-preset="pop"] .ai-audit-table th:last-child {
    border-top-right-radius: var(--rj-radius-full, 999px);
    border-bottom-right-radius: var(--rj-radius-full, 999px);
}

/* Status strip: a tray with room around the five tiles, so its background
   reads as a surface; the label pills sit on one baseline at the bottom */
[data-theme-preset="pop"] .dashboard-status-strip {
    gap: var(--rj-space-2);
    padding: var(--rj-space-2);
    border-color: var(--rj-border-subtle);
    background: var(--rj-bg-sunken);
    border-radius: var(--rj-radius-lg);
}

[data-theme-preset="pop"] .dashboard-status-chip {
    justify-content: flex-end;
    border-radius: var(--rj-radius-md);
    box-shadow: var(--rj-shadow-sm);
}

[data-theme-preset="pop"] .dashboard-status-chip__label {
    margin-top: auto;
}

/* Table wrappers: a little air so the tinted head stands off the card edge */
[data-theme-preset="pop"] .page-list-table-wrap {
    padding: var(--rj-space-2);
}

/* A little white between the head and the first row: a spacer row, so the
   head pill keeps its full rounding (a transparent border would flatten it) */
[data-theme-preset="pop"] .page-list-table thead th {
    border-bottom: 0;
}

[data-theme-preset="pop"] .page-list-table tbody::before {
    content: "";
    display: table-row;
    height: 6px;
}

/* Row hover: a rounded surface inset from the separator lines, drawn by a
   pseudo-element per cell (so the corners can round) and faded in */
[data-theme-preset="pop"] .page-list-table tbody tr:hover {
    background: transparent;
}

[data-theme-preset="pop"] .page-list-table tbody td {
    position: relative;
    z-index: 0;
    /* A pixel more above and below, so the hover surface clears the separator lines */
    padding-top: calc(var(--rj-space-2-5) + 1px);
    padding-bottom: calc(var(--rj-space-2-5) + 1px);
}

[data-theme-preset="pop"] .page-list-table tbody td::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 3px;
    bottom: 4px;
    z-index: -1;
    background: var(--rj-bg-hover);
    opacity: 0;
    transition: opacity var(--rj-duration-hover-out) ease-out;
    pointer-events: none;
}

[data-theme-preset="pop"] .page-list-table tbody tr:hover td::before,
[data-theme-preset="pop"] .page-list-table tbody tr:focus-within td::before {
    opacity: 1;
}

/* First and last row: the hover keeps the same 8px to the card edge as at the sides */
[data-theme-preset="pop"] .page-list-table tbody tr:first-child td::before {
    top: 2px;
}

[data-theme-preset="pop"] .page-list-table tbody tr:last-child td::before {
    bottom: 0;
}

[data-theme-preset="pop"] .page-list-table tbody td:first-child::before {
    border-radius: var(--rj-radius-md) 0 0 var(--rj-radius-md);
}

[data-theme-preset="pop"] .page-list-table tbody td:last-child::before {
    border-radius: 0 var(--rj-radius-md) var(--rj-radius-md) 0;
}

/* Media library: grid items keep the normal card rounding, not the 30px */
[data-theme-preset="pop"] .rj-imgmgr-item {
    border-radius: var(--rj-radius-md);
}

/* Media library list view: a light card like the page list, the pill head
   inside it, rows with the inset hover */
[data-theme-preset="pop"] .rj-imgmgr-list.active {
    padding: var(--rj-space-2);
    border: 1px solid var(--rj-border-subtle);
    border-radius: var(--rj-radius-lg);
    background: var(--rj-bg-elevated);
    box-shadow: var(--rj-shadow-sm);
}

[data-theme-preset="pop"] .rj-imgmgr-list-header {
    margin-bottom: 6px;
    border: 0;
    border-radius: var(--rj-radius-full, 999px);
    background: color-mix(in srgb, var(--rj-primary) 15%, var(--rj-bg-elevated));
    color: var(--rj-primary);
    font-size: var(--rj-text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
}

[data-theme-preset="pop"] .rj-imgmgr-list-header-col:hover {
    color: var(--rj-primary-hover);
}

[data-theme-preset="pop"] .rj-imgmgr-list-body {
    border: 0;
    border-radius: 0;
    background: transparent;
}

[data-theme-preset="pop"] .rj-imgmgr-row {
    position: relative;
    z-index: 0;
}

[data-theme-preset="pop"] .rj-imgmgr-row:hover {
    background: transparent;
}

[data-theme-preset="pop"] .rj-imgmgr-row::before {
    content: "";
    position: absolute;
    inset: 3px var(--rj-space-1) 4px;
    z-index: -1;
    border-radius: var(--rj-radius-md);
    background: var(--rj-bg-hover);
    opacity: 0;
    transition: opacity var(--rj-duration-hover-out) ease-out;
    pointer-events: none;
}

[data-theme-preset="pop"] .rj-imgmgr-row:hover::before {
    opacity: 1;
}

[data-theme-preset="pop"] .rj-imgmgr-row:last-child::before {
    bottom: 0;
}

/* Sortable heads answer the pointer: deeper text, a shade more tint */
[data-theme-preset="pop"] .page-list-table thead th.page-list-sortable:hover {
    color: var(--rj-primary-hover);
    background-color: color-mix(in srgb, var(--rj-primary) 24%, var(--rj-bg-elevated));
}

/* Focus rings follow the round shapes */
[data-theme-preset="pop"] .sidebar-nav-item:focus-visible,
[data-theme-preset="pop"] .settings-tab-btn:focus-visible {
    outline-offset: 3px;
    border-radius: var(--rj-radius-full, 999px);
}



/* ============================================================
   COLLAPSIBLE SIDEBAR (all presets)
   ------------------------------------------------------------
   <html data-sidebar="collapsed"> shrinks the sidebar to its icons. The
   state is a per-browser preference (localStorage, set before first paint
   by a tiny head script) and toggled by the button at the sidebar's foot.
   The mobile drawer below 769px ignores it and always shows labels.
   ============================================================ */

/* The collapse button sits apart from the navigation under its own line */
.sidebar-collapse {
    position: relative;
    margin-top: var(--rj-space-3);
}

.sidebar-collapse::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(-1 * var(--rj-space-2));
    border-top: 1px var(--rj-divider-style, solid) var(--rj-sidebar-border);
    pointer-events: none;
}

@media (min-width: 769px) {
    html[data-sidebar="collapsed"] {
        --rj-sidebar-w: 3.5rem;
    }

    html[data-sidebar="collapsed"] .sidebar-nav,
    html[data-sidebar="collapsed"] .sidebar-bottom {
        padding-inline: var(--rj-space-2);
    }

    html[data-sidebar="collapsed"] .sidebar-nav-item {
        position: relative;
        justify-content: center;
        padding-inline: 0;
        gap: 0;
    }

    html[data-sidebar="collapsed"] .sidebar-nav-item > span:not(.mail-badge) {
        display: none;
    }

    /* Icons carry the whole meaning now, so no preset may shrink them */
    html[data-sidebar="collapsed"] .sidebar-nav-item svg {
        width: 1.25rem;
        height: 1.25rem;
        min-width: 1.25rem;
        min-height: 1.25rem;
        opacity: 0.85;
    }

    html[data-sidebar="collapsed"] .sidebar-nav-item.active svg,
    html[data-sidebar="collapsed"] .sidebar-nav-item:hover svg {
        opacity: 1;
    }

    html[data-sidebar="collapsed"] .sidebar-nav-item > .mail-badge {
        position: absolute;
        top: 2px;
        right: 2px;
        margin: 0;
        min-width: 0.875rem;
        height: 0.875rem;
        padding: 0 0.1875rem;
        font-size: calc(0.5625rem * var(--rj-font-scale));
        box-shadow: none;
    }

    html[data-sidebar="collapsed"] .sidebar-version {
        display: none;
    }

    /* Paper marks the active item with a bar at the edge; keep that readable */
    html[data-sidebar="collapsed"][data-theme-preset="paper"] .sidebar-nav-item.active {
        box-shadow: inset 2px 0 0 var(--rj-primary);
    }
}

@media (max-width: 768px) {
    .sidebar-collapse {
        display: none;
    }
}

/* Bypass link line under the explanation: label plus the assembled address */
.access-bypass-link {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rj-space-2);
    margin: 0 0 var(--rj-space-5);
    font-size: var(--rj-text-sm);
    color: var(--rj-text-secondary);
}

.access-bypass-link code {
    padding: var(--rj-space-1) var(--rj-space-2);
    border: 1px solid var(--rj-border);
    border-radius: var(--rj-radius-sm);
    background: var(--rj-bg-sunken);
    color: var(--rj-text);
    font-family: var(--rj-font-mono);
    font-size: var(--rj-text-sm);
    word-break: break-all;
}

/* SMTP block of the e-mail settings: two columns on a wide panel. Left:
   host, then port beside encryption; right: username, password. */
.smtp-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--rj-space-4) var(--rj-space-6);
    align-items: start;
}

.smtp-grid > .settings-divider,
.smtp-grid > .settings-subheading {
    grid-column: 1 / -1;
}

.smtp-grid > .settings-divider {
    margin-bottom: 0;
}

.smtp-grid > .settings-subheading {
    margin-bottom: 0;
}

.smtp-grid > .form-group,
.smtp-grid > .form-row-inline {
    margin: 0;
    min-width: 0;
}

.smtp-grid__host { grid-column: 1; grid-row: 3; }
.smtp-grid__port-row { grid-column: 1; grid-row: 4; }
.smtp-grid__user { grid-column: 2; grid-row: 3; }
.smtp-grid__pass { grid-column: 2; grid-row: 4; }

/* Port stays short, encryption takes the rest so its right edge lines up */
.smtp-grid__port-row > .form-group:first-child {
    flex: 0 0 auto;
}

.smtp-grid__port-row > .form-group:last-child {
    flex: 1 1 auto;
    min-width: 0;
}

/* Fields fill their column; the grid already bounds them (the :not() chain
   matches the 40rem cap of the settings form) */
.settings-panel .settings-form .smtp-grid input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
.settings-panel .settings-form .smtp-grid select {
    max-width: none;
}

.settings-panel .settings-form .smtp-grid #settingsSmtpPort {
    width: 7rem;
    max-width: 7rem;
}

@container settings (max-width: 52rem) {
    .smtp-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .smtp-grid__host,
    .smtp-grid__port-row,
    .smtp-grid__user,
    .smtp-grid__pass {
        grid-column: auto;
        grid-row: auto;
    }
}

/* Bypass links: one row per parameter / key pair, labels on the first row
   only, the bin at the row's end, the assembled address underneath */
.bypass-links {
    display: flex;
    flex-direction: column;
    gap: var(--rj-space-4);
    margin-bottom: var(--rj-space-3);
}

.bypass-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
    gap: var(--rj-space-2) var(--rj-space-4);
    align-items: end;
}

.bypass-row > .form-group {
    margin: 0;
    min-width: 0;
}

.bypass-row + .bypass-row > .form-group > label {
    display: none;
}

.bypass-row__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--rj-control-h);
    width: var(--rj-control-h);
    padding: 0;
    border: 1px solid var(--rj-border);
    border-radius: var(--rj-radius-md);
    background: var(--rj-bg-elevated);
    color: var(--rj-text-muted);
    cursor: pointer;
    transition: background-color var(--rj-duration-fast) var(--rj-ease),
                color var(--rj-duration-fast) var(--rj-ease),
                border-color var(--rj-duration-fast) var(--rj-ease);
}

.bypass-row__remove:hover {
    background: var(--rj-danger-subtle);
    color: var(--rj-danger);
    border-color: var(--rj-danger);
}

.bypass-row__remove:focus-visible {
    outline: 2px solid var(--rj-border-focus);
    outline-offset: 2px;
}

.bypass-row__remove svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.bypass-row__link {
    grid-column: 1 / -1;
    margin: 0;
}

.settings-panel .settings-form .bypass-row input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]) {
    max-width: none;
}

.bypass-links__actions {
    margin-top: var(--rj-space-3);
}

@container settings (max-width: 40rem) {
    .bypass-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .bypass-row > .bypass-row__param {
        grid-column: 1 / -1;
    }

    .bypass-row + .bypass-row > .form-group > label {
        display: block;
    }
}

/* Forms admin: the "new" button matches the select beside it; field rows
   give inputs, selects and the delete button one control height */
.forms-admin-list__head .btn {
    height: var(--rj-control-h);
    padding-inline: var(--rj-space-4);
}

.forms-fields-table td {
    grid-template-rows: auto minmax(var(--rj-control-h), auto);
}

.forms-fields-table td input:not([type="checkbox"]):not([type="radio"]),
.forms-fields-table td select {
    height: var(--rj-control-h);
    min-height: var(--rj-control-h);
    padding-block: 0;
}

.forms-fields-table .users-table__actions .btn-icon {
    width: var(--rj-control-h);
    min-width: var(--rj-control-h);
    flex-basis: var(--rj-control-h);
    height: var(--rj-control-h);
}

/* AI settings: the budget bar and the image service select take half the
   width, like one column of a two-column split; the fourth limit field
   takes one third like its three neighbours instead of the whole row */
.ai-usage-budget {
    max-width: calc(50% - var(--rj-space-3) / 2);
}

#aiImageServiceSection .ai-settings-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-row-inline:has(> .form-group > #aiDailyImageRequests) > .form-group {
    flex: 0 1 calc((100% - 2 * var(--rj-space-4)) / 3);
}

@container settings (max-width: 40rem) {
    .ai-usage-budget {
        max-width: none;
    }

    #aiImageServiceSection .ai-settings-compact {
        grid-template-columns: minmax(0, 1fr);
    }

    .form-row-inline:has(> .form-group > #aiDailyImageRequests) > .form-group {
        flex: 1 1 15rem;
    }
}

/* System status: its panels sit directly on the stage, not inside a card,
   so they take the card surface like the settings panels */
#systemTab .dashboard-panel,
#iconsTab .icon-manager-card {
    background: var(--rj-surface-panel, var(--rj-bg-elevated));
}