/*
 * GYM Planner CSS v2 — общий структурный слой.
 *
 * ЭТАП 3: глобальный shell сайта.
 * Внутренние компоненты страниц пока намеренно не перенесены.
 */

* {
    box-sizing: border-box;
}

/* ===== PRELOAD ===== */
body.preload #header-bar,
body.preload #tabs-bar,
body.preload .gym-tabs-bar,
body.preload #topbar,
body.preload #auth-panel,
body.preload #app,
body.preload #footer {
    display: none !important;
}

#loading-panel {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--preload-overlay-bg);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 200ms ease, visibility 0ms linear 200ms;
}

body.preload #loading-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 200ms ease;
}

#loading-panel.fade-out {
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
}

#loading-panel .preload-logo {
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 200ms ease, transform 200ms ease;
}

body.preload #loading-panel .preload-logo {
    opacity: 1;
    transform: scale(1);
    filter: var(--preload-logo-filter);
}

/* ===== PAGE ===== */
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--page-bg);
    color: var(--page-text);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: var(--page-backdrop);
    pointer-events: none;
    z-index: 0;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    background: var(--page-overlay);
    pointer-events: none;
    z-index: 0;
}

body > * {
    position: relative;
    z-index: 1;
}

.page {
    max-width: 900px;
    margin: 0 auto;
    padding: 8px 8px 40px;
}

body.preview-page .page {
    max-width: 1280px;
}

body.preview-page #header-inner,
body.preview-page #tabs-inner {
    max-width: 1280px;
}

/* ===== HEADER ===== */
#header-bar {
    height: 50px;
    background: var(--shell-bg);
    border-bottom: 1px solid var(--shell-border);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 100;
    overflow: visible;
}

#header-inner {
    max-width: 900px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 0 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}

#header-inner img {
    height: 32px;
    width: 32px;
    object-fit: contain;
}

#header-title-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px 10px;
    min-width: 0;
    flex: 1 1 auto;
}

#header-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-main);
    min-width: 0;
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
    flex: 0 1 auto;
    flex-wrap: wrap;
}

#header-actions .header-link-noml {
    margin-left: 0;
}

.header-link {
    font-size: 13px;
    color: var(--header-link-text);
    text-decoration: none;
    padding: 4px 10px;
    border: 1px solid var(--header-link-border);
    border-radius: 999px;
    background: var(--header-link-bg);
    white-space: nowrap;
}

.header-link:hover {
    color: var(--header-link-text-hover);
    border-color: var(--header-link-border-hover);
}

/* ===== THEME TOGGLE ===== */
#theme-toggle-btn {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--control-border);
    border-radius: 999px;
    background: var(--control-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 0 0 auto;
}

#theme-toggle-btn:hover {
    border-color: var(--control-border-hover);
    background: var(--control-bg-hover);
}

#theme-toggle-btn:active {
    transform: scale(0.96);
}

#theme-toggle-btn:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

#theme-toggle-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    display: block;
}

.theme-controls {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.theme-customizer-controls {
    display: none;
    align-items: center;
    gap: 6px;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 130;
    width: min(250px, calc(100vw - 24px));
    box-sizing: border-box;
    padding: 9px;
    border: 1px solid var(--border-card);
    border-radius: 10px;
    background: var(--surface-bg-raised);
    box-shadow: var(--shadow-popover);
}

#theme-customize-btn {
    display: inline-flex;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--control-border);
    border-radius: 50%;
    background: var(--control-bg);
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.theme-controls.theme-customizer-open .theme-customizer-controls {
    display: flex;
}

#theme-customize-btn span {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: conic-gradient(#ef4444, #f59e0b, #22c55e, #06b6d4, #3b82f6, #8b5cf6, #ef4444);
    box-shadow: 0 0 0 1px var(--border-main);
}

#theme-customize-btn:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.theme-color-enabled {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.theme-color-enabled input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.theme-color-enabled span {
    width: 24px;
    height: 14px;
    box-sizing: border-box;
    border: 1px solid var(--control-border);
    border-radius: 999px;
    background: var(--control-bg);
    position: relative;
    transition: background .15s ease, border-color .15s ease;
}

.theme-color-enabled span::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
    transition: transform .15s ease, background .15s ease;
}

.theme-color-enabled input:checked + span { background: var(--accent-soft); border-color: var(--border-accent); }
.theme-color-enabled input:checked + span::after { transform: translateX(10px); background: var(--accent); }
.theme-color-enabled input:focus-visible + span { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

#theme-hue,
#theme-brightness {
    width: 74px;
    height: 18px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #ef4444, #f59e0b, #22c55e, #06b6d4, #3b82f6, #8b5cf6, #ef4444);
    cursor: pointer;
    appearance: none;
    transition: filter .15s ease, opacity .15s ease;
}

.theme-color-enabled:has(input:not(:checked)) + #theme-hue {
    filter: grayscale(1);
    opacity: 0.48;
}

#theme-brightness {
    width: 118px;
    background: linear-gradient(90deg, #111827, #94a3b8, #ffffff);
}

.theme-color-enabled:has(input:not(:checked)) ~ #theme-brightness {
    filter: grayscale(1);
    opacity: 0.48;
}

#theme-hue::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: transparent; }
#theme-hue::-moz-range-track { height: 8px; border-radius: 999px; background: transparent; }
#theme-hue::-webkit-slider-thumb {
    width: 14px; height: 14px; margin-top: -3px; border: 2px solid var(--surface-bg-raised);
    border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px var(--border-strong); appearance: none;
}
#theme-hue::-moz-range-thumb {
    width: 12px; height: 12px; border: 2px solid var(--surface-bg-raised);
    border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px var(--border-strong);
}

#theme-brightness::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: transparent; }
#theme-brightness::-moz-range-track { height: 8px; border-radius: 999px; background: transparent; }
#theme-brightness::-webkit-slider-thumb {
    width: 14px; height: 14px; margin-top: -3px; border: 2px solid var(--surface-bg-raised);
    border-radius: 50%; background: var(--text-soft); box-shadow: 0 0 0 1px var(--border-strong); appearance: none;
}
#theme-brightness::-moz-range-thumb {
    width: 12px; height: 12px; border: 2px solid var(--surface-bg-raised);
    border-radius: 50%; background: var(--text-soft); box-shadow: 0 0 0 1px var(--border-strong);
}

#theme-hue:focus-visible,
#theme-brightness:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

@media (max-width: 520px) {
    #theme-hue { width: 54px; }
    #theme-brightness { width: 82px; }
}

/* ===== LANGUAGE SELECTOR ===== */
.language-selector-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.language-selector-button {
    height: 28px;
    min-width: 0;
    padding: 0 7px;
    border: 1px solid var(--control-border);
    border-radius: 999px;
    background: var(--control-bg);
    color: var(--text-main);
    font: inherit;
    font-size: 12px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    white-space: nowrap;
}

.language-selector-button:hover {
    border-color: var(--control-border-hover);
    background: var(--control-bg-hover);
}

.language-selector-button:focus-visible,
.language-selector-option:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* Specificity intentionally beats legacy #header-inner img. */
#header-inner .language-selector-flag {
    width: 22px;
    height: 15px;
    object-fit: cover;
    display: block;
    flex: 0 0 22px;
    border-radius: 2px;
}

.language-selector-current {
    min-width: 0;
    white-space: nowrap;
}

.language-selector-arrow {
    font-size: 9px;
    line-height: 1;
    opacity: 0.8;
}

.language-selector-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 10;
    width: max-content;
    min-width: 118px;
    padding: 3px;
    border: 1px solid var(--control-border);
    border-radius: 8px;
    background: var(--control-bg);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
}

.language-selector-option {
    text-decoration: none;
    width: 100%;
    min-height: 28px;
    padding: 4px 7px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-main);
    font: inherit;
    font-size: 12px;
    line-height: 1.2;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    white-space: nowrap;
}

.language-selector-option:hover {
    background: var(--control-bg-hover);
}

.language-selector-option[aria-selected="true"] {
    font-weight: 600;
}

@media (max-width: 700px) {
    #header-bar {
        height: auto;
        min-height: 50px;
    }

    #header-inner {
        align-items: flex-start;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    #header-inner > img {
        margin-top: 3px;
    }

    #header-title-wrap {
        flex-wrap: wrap;
        justify-content: flex-end;
        row-gap: 4px;
    }

    #header-title {
        order: 1;
        line-height: 28px;
    }

    #header-title-wrap > .language-selector-wrap {
        order: 2;
    }

    #header-title-wrap > .theme-controls {
        order: 2;
        flex: 0 0 auto;
    }

    #header-title-wrap > .language-selector-wrap {
        order: 3;
    }

    #header-actions {
        order: 10;
        flex: 1 1 100%;
        justify-content: flex-end;
        flex-wrap: nowrap;
    }

    .theme-customizer-controls {
        z-index: 130;
    }

    .language-selector-current {
        display: none;
    }

    .language-selector-button {
        padding: 0 6px;
    }

    .language-selector-menu {
        min-width: 118px;
    }
}

/* ===== TABS ===== */
#tabs-bar {
    background: var(--tabs-bg);
    border-bottom: 1px solid var(--tabs-level-separator, var(--shell-border));
}

.guest-tabs-bar {
    background: var(--tabs-bg);
    border-bottom: 1px solid var(--shell-border);
}

#tabs-inner {
    width: max-content;
    max-width: calc(100% - 16px);
    box-sizing: border-box;
    margin: 0 auto;
    padding: 0 4px;
    display: flex;
    align-items: stretch;
    gap: 2px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
}

.guest-tabs-inner {
    width: max-content;
    max-width: calc(100% - 16px);
    box-sizing: border-box;
    margin: 0 auto;
    padding: 0 4px;
    display: flex;
    align-items: stretch;
    gap: 2px;
    flex-wrap: wrap;
    justify-content: center;
}

.tab-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    padding: 0 9px;
    color: var(--tab-text);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.tab-link-icon-only {
    width: 42px;
    padding: 0;
    flex: 0 0 42px;
}

.tab-unread-dot {
    position: absolute;
    top: 7px;
    right: 5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f97316;
    box-shadow: 0 0 0 2px var(--tabs-bg);
}

.tab-link-icon,
.gym-subtab-icon {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    object-fit: contain;
}

.tab-link-label {
    min-width: 0;
}

.gym-tabs-bar {
    background: var(--tabs-level-2-bg, var(--tabs-bg));
    border-bottom: 1px solid var(--tabs-level-separator, var(--shell-border));
    box-shadow: inset 0 1px 0 var(--tabs-level-inset, transparent);
}

.gym-tabs-inner {
    width: max-content;
    max-width: calc(100% - 16px);
    box-sizing: border-box;
    margin: 0 auto;
    padding: 0 4px;
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 2px;
    flex-wrap: wrap;
}

.gym-subtab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 10px;
    color: var(--tab-text);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.gym-subtab:hover {
    color: var(--tab-text-hover);
    background: var(--tab-bg-hover);
}

.gym-subtab.active {
    color: var(--accent-text);
    border-bottom-color: var(--border-accent);
    background: var(--accent-soft);
    font-weight: 600;
}

.tab-link:hover {
    color: var(--tab-text-hover);
    background: var(--tab-bg-hover);
}

.tab-link.active {
    color: var(--accent-text);
    border-bottom-color: var(--border-accent);
    background: var(--accent-soft);
    font-weight: 600;
}

.tab-link.tab-link-alert {
    color: var(--tab-alert-text);
    border-bottom-color: var(--success-strong);
    background: var(--tab-alert-bg);
    font-weight: 600;
    box-shadow: inset 0 -1px 0 rgba(34, 197, 94, 0.35);
}

.tab-link.tab-link-alert:hover {
    color: var(--tab-alert-text-hover);
    background: rgba(34, 197, 94, 0.18);
}

.tab-link.tab-link-alert::after {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 8px;
    border-radius: 999px;
    background: var(--success-strong);
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.65);
    vertical-align: middle;
}


/* ===== SHARED SECOND/THIRD-LEVEL NAVIGATION =====
   Flat full-width navigation bars aligned with the primary tab language. */
.section-tabs-bar {
    width: 100%;
    background: var(--tabs-level-2-bg, var(--tabs-bg));
    border-bottom: 1px solid var(--tabs-level-separator, var(--shell-border));
    box-shadow: inset 0 1px 0 var(--tabs-level-inset, transparent);
}

.section-tabs-level-3 {
    background: var(--tabs-level-3-bg, var(--tabs-level-2-bg, var(--tabs-bg)));
}
.section-tabs-level-4 {
    background: var(--surface-bg-soft);
}

/* Each nested navigation level becomes slightly more compact. */
.gym-tabs-bar .gym-subtab,
.section-tabs-level-2 .section-tab-item {
    min-height: 39px;
}

.section-tabs-level-3 .section-tab-item {
    min-height: 36px;
}
.section-tabs-level-4 .section-tab-item {
    min-height: 33px;
    padding:0 8px;
    font-size:.92em;
}

.gym-tabs-bar .gym-subtab.active,
.section-tabs-level-2 .section-tab-item.active {
    box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--accent-border) 35%, transparent);
}

.section-tabs-level-3 .section-tab-item.active {
    box-shadow: inset 0 -2px 0 var(--border-accent);
}
.section-tabs-level-4 .section-tab-item.active {
    box-shadow: inset 0 -2px 0 var(--border-accent);
}

/* Adjacent navigation levels must form one continuous stack. */
.gym-tabs-bar + .section-tabs-bar {
    margin-top: 0;
}

.section-tabs-inner {
    width: max-content;
    max-width: calc(100% - 16px);
    box-sizing: border-box;
    margin: 0 auto;
    padding: 0 4px;
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 2px;
    flex-wrap: wrap;
}

.section-tab-item {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 10px;
    color: var(--tab-text);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    font: inherit;
    line-height: 1.2;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.section-tabs-level-3 .section-tab-item {
    min-height: 36px;
    padding: 0 9px;
}

.section-tab-item:hover {
    color: var(--tab-text-hover);
    background: var(--tab-bg-hover);
}

.section-tab-item.active {
    color: var(--accent-text);
    border-bottom-color: var(--border-accent);
    background: var(--accent-soft);
    font-weight: 600;
}

.section-tab-item:focus-visible {
    outline: 2px solid var(--border-accent);
    outline-offset: -2px;
}

.section-tab-item.disabled,
.section-tab-item:disabled {
    opacity: 0.55;
    cursor: default;
    pointer-events: none;
}

.section-tab-icon {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    object-fit: contain;
}

.section-tabs-level-3 .section-tab-icon {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
}

.section-tab-label {
    min-width: 0;
}

/* ===== FOOTER ===== */
#footer {
    margin-top: 16px;
    height: 20px;
    text-align: center;
    font-size: 11px;
    color: var(--footer-text);
    border-top: 1px solid var(--footer-border);
    padding-top: 2px;
}

/* ===== RESPONSIVE SHELL ===== */
@media (max-width: 700px) {
    #header-title-wrap {
        min-width: 0;
        max-width: 100%;
        align-items: flex-start;
    }

    #header-title {
        font-size: 17px;
    }

    #theme-toggle-btn {
        width: 28px;
        height: 28px;
    }

    #theme-toggle-icon {
        width: 16px;
        height: 16px;
    }

    .header-logout-btn {
        width: 28px;
        height: 28px;
    }

    .header-logout-btn img {
        width: 16px;
        height: 16px;
    }

    #header-inner {
        align-items: flex-start;
    }

    #header-actions {
        flex: 0 1 100%;
        justify-content: flex-end;
    }

    #header-actions .header-link,
    #header-actions #theme-toggle-btn {
        flex: 0 0 auto;
    }

    #tabs-inner {
        width: 100%;
        max-width: 900px;
        gap: 4px;
        flex-wrap: wrap;
        overflow-x: visible;
        scrollbar-width: auto;
    }

    .tab-link {
        min-height: 38px;
        padding: 0 10px;
        font-size: 12.5px;
        gap: 5px;
        flex: 1 1 auto;
    }

    .tab-link-icon,
    .gym-subtab-icon {
        width: 21px;
        height: 21px;
        flex-basis: 21px;
    }

    .gym-tabs-inner {
        width: 100%;
        max-width: 900px;
        gap: 6px;
    }

    .gym-subtab {
        flex: 1 1 auto;
        min-height: 38px;
        padding: 0 8px;
        font-size: 12.5px;
    }

    .section-tabs-inner {
        width: 100%;
        max-width: 900px;
        gap: 4px;
    }

    .section-tab-item {
        flex: 1 1 auto;
        min-height: 38px;
        padding: 0 8px;
        font-size: 12.5px;
        gap: 5px;
    }

    .section-tabs-level-3 .section-tab-item {
        min-height: 34px;
        padding: 0 7px;
    }

    .section-tab-icon,
    .section-tabs-level-3 .section-tab-icon {
        width: 21px;
        height: 21px;
        flex-basis: 21px;
    }

    .section-tabs-inner {
        width: 100%;
        max-width: 900px;
        gap: 4px;
        padding: 5px 8px;
    }

    .section-tab-item {
        flex: 1 1 auto;
        min-height: 36px;
        padding: 3px 9px;
        gap: 5px;
        font-size: 12.5px;
        white-space: normal;
    }

    .section-tab-icon,
    .section-tabs-level-3 .section-tab-icon {
        width: 21px;
        height: 21px;
        flex-basis: 21px;
    }
}

/* ========================================================================== 
   STAGE 4 — BASE UI PRIMITIVES
   Shared structure only. Page-specific plans/exercise/graph layouts remain
   intentionally outside this layer.
   ========================================================================== */

/* ===== TEXT HELPERS ===== */
.hint {
    margin: 6px 0 10px;
    font-size: 12px;
    color: var(--text-muted);
}

.muted {
    color: var(--text-muted);
}

.error-text {
    margin: 8px 0 10px;
    font-size: 12px;
    color: var(--danger-text);
}

body.gym-maintenance-active {
    overflow: hidden !important;
}

#gym-maintenance-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    display: grid;
    place-items: center;
    padding: 20px;
    background:
        radial-gradient(circle at 50% 20%, var(--accent-soft), transparent 42%),
        var(--page-bg);
    color: var(--text-main);
}

.gym-maintenance-card {
    width: min(440px, 100%);
    padding: 28px 24px;
    border: 1px solid var(--border-card);
    border-radius: 18px;
    background: var(--surface-bg-raised);
    box-shadow: 0 18px 50px rgba(15, 23, 42, .18);
    text-align: center;
}

.gym-maintenance-card img {
    display: block;
    width: 112px;
    height: 112px;
    object-fit: contain;
    margin: 0 auto 18px;
}

.gym-maintenance-card h1 {
    margin: 0 0 12px;
    font-size: clamp(23px, 5vw, 30px);
}

.gym-maintenance-card p {
    margin: 7px 0;
    line-height: 1.45;
}

.gym-maintenance-note {
    color: var(--text-muted);
    font-size: 13px;
}

.login-me {
    color: var(--success-strong);
    font-weight: 700;
}

/* ===== GENERIC FORM CONTROLS ===== */
input,
select,
textarea,
button {
    font: inherit;
}

input,
select,
textarea {
    color: var(--input-text);
    background: var(--input-bg);
    border-color: var(--input-border);
}

input::placeholder,
textarea::placeholder {
    color: var(--input-placeholder);
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 1px;
}

input:disabled,
select:disabled,
textarea:disabled,
button:disabled {
    opacity: 0.45;
    cursor: default;
}

/* ===== ICON BUTTON PRIMITIVE ===== */
.icon-btn {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 1px solid var(--control-border);
    background: var(--control-bg);
    color: var(--control-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.icon-btn:hover:not(:disabled) {
    background: var(--control-bg-hover);
    border-color: var(--control-border-hover);
}

.icon-btn img {
    width: 16px;
    height: 16px;
}

.icon-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.icon-btn.icon-btn-lbl {
    width: auto;
    padding: 0 10px;
    gap: 8px;
}

.icon-btn.icon-btn-lbl span {
    font-size: 13px;
    color: var(--control-text);
    white-space: nowrap;
}

/* ===== TABLE PRIMITIVE ===== */
.table-wrap {
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 640px;
}

.data-table th,
.data-table td {
    border-bottom: 1px solid var(--border-main);
    padding: 8px;
    text-align: left;
}

.data-table thead th {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 12px;
}

.data-table tbody tr:nth-child(even) {
    background: var(--surface-overlay-subtle);
}

.data-table tbody tr:hover {
    background: var(--surface-bg-hover);
}

.data-table th:not(:nth-child(2)),
.data-table td:not(:nth-child(2)) {
    text-align: center;
}

.data-table td.manage-cell {
    white-space: nowrap;
}

/* ===== MODAL PRIMITIVE ===== */
.modal {
    position: fixed;
    inset: 0;
    background: var(--modal-backdrop-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.modal-content {
    width: min(520px, 94vw);
    background: var(--surface-bg);
    color: var(--text-main);
    border: 1px solid var(--border-main);
    border-radius: 12px;
    padding: 12px;
    box-shadow: var(--modal-shadow);
}

.modal-title {
    font-weight: 700;
    margin-bottom: 8px;
}

.modal-input {
    width: 100%;
    margin-bottom: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--input-text);
}

.iters-select {
    width: 56px;
    padding: 4px 6px;
    border-radius: 8px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--input-text);
}

.modal-select {
    width: 100%;
    padding: 8px;
    border-radius: 10px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--input-text);
}

/* ===== GENERIC SELECT/LIST SURFACES USED BY MODALS ===== */
.ex-select-wrap {
    border-radius: 12px;
    padding: 6px;
    border: 1px solid var(--control-border);
}

.ex-select-wrap.r1 { box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.35) inset; }
.ex-select-wrap.r2 { box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.35) inset; }
.ex-select-wrap.r3 { box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.30) inset; }
.ex-select-wrap.r4 { box-shadow: 0 0 0 2px rgba(156, 163, 175, 0.22) inset; }

.ex-list {
    height: 360px;
    overflow: auto;
    border-radius: 10px;
    border: 1px solid var(--control-border);
    background: var(--surface-bg-soft);
    padding: 6px;
}

/* ===== GENERIC MANAGEMENT FLEX PRIMITIVE ===== */
.manage-icons {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
}

/* ========================================================================== */
/* STAGE 5 — plans.php domain layer (current / smart / ready / mine)          */
/*                                                                            */
/* Structural rules are shared. Theme-dependent values come from theme files. */
/* Chart series colors remain data-visualization colors, not UI theme tokens.  */
/* ========================================================================== */
.plans-actions-row {
display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
}

#plans-actions-bottom {
    display: none;
}

.plans-actions-left {
display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.plans-actions-left-full {
    justify-content: flex-end;
    width: 100%;
}

.plans-status-inline {
    min-height: 18px;
    margin: 2px 0 8px;
}

.plans-status-dirty {
    color: var(--residual-dirty-text);
    font-weight: 600;
}

.plans-status-ok {
    color: var(--success-strong);
    font-weight: 600;
}

.plans-status-error,
.plans-status-conflict {
    color: var(--danger-text, #b42318);
    font-weight: 700;
}
.user-hot-save-error { outline: 2px solid #dc3545 !important; outline-offset: 2px; }
.user-hot-save-pending { opacity: .62; pointer-events: none; }

.plans-status-action {
    margin-left: 10px;
    padding: 4px 10px;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.plans-status-action:hover,
.plans-status-action:focus-visible {
    background: color-mix(in srgb, currentColor 12%, transparent);
}

#plans-select.plans-select-active-plan {
    border-color: var(--success-strong);
    box-shadow: 0 0 0 1px var(--success-strong) inset;
}

#plans-select option.plans-current-plan-option {
    background: var(--warning-bg);
    color: var(--warning-text);
    font-weight: 700;
}

#plans-table tbody tr.plan-row-changed > td {
    background: var(--warning-bg);
    border-color: var(--warning-border);
}

#plans-table tbody tr.plan-row-changed .lesson-header-cell {
    color: var(--warning-text);
}

#plans-table .plan-field-changed {
    border-color: var(--warning-border);
    box-shadow: 0 0 0 1px var(--warning-border) inset;
}

.plans-leave-modal-text {
    margin-top: 8px;
    color: var(--text-main);
    line-height: 1.45;
}

.plans-actions-right {
display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.plans-buffer-block {
margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-soft);
}

.plans-buffer-row {
display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

@media (max-width: 700px) {
    .load-top-actions .plans-buffer-row {
justify-content: stretch;
    }
}

.plans-top-row {
display:flex;
    align-items:center;
    gap:12px;
    justify-content:space-between;
    flex-wrap:wrap;
    margin-top:6px;
    margin-bottom:10px;
}

.plans-view-options {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-soft);
}

.plans-reps-range {
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin-top: 5px;
    color: #587077;
    font-size: 12px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background: var(--input-bg);
    overflow: hidden;
}

.plans-reps-range input {
    width: 46px;
    min-height: 30px;
    padding: 3px 5px;
    text-align: center;
    color: var(--input-text);
    background: transparent;
    border: 0;
    border-radius: 0;
}

.plans-reps-range > span {
    color: var(--text-muted);
}

.plans-reps-range input:focus {
    outline: none;
    background: var(--accent-soft);
}

.plans-reps-range.plan-range-changed {
    border-color: var(--warning-border);
    background: var(--warning-bg);
}

.plans-reps-range.plan-range-changed input {
    color: var(--warning-text);
    font-weight: 600;
}

#plans-table .plans-range-cell {
    width: 120px;
    min-width: 120px;
    text-align: center;
}

.plans-top-left {
display:flex;
    align-items:center;
    gap:10px;
    flex:1 1 320px;
    min-width:260px;
}

.plans-top-left select {
min-width:240px;
    max-width:100%;
    flex:1 1 260px;
}

.plans-top-right {
display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    flex:1 1 420px;
    flex-wrap:wrap;
}

.plans-graphs-block {
display:grid;
    grid-template-columns:1fr;
    gap:14px;
    margin-top:14px;
}

.plans-graph-card {
background:var(--surface-bg);
    border:1px solid var(--border-card);
    border-radius:10px;
    padding:10px 12px 12px 12px;
    overflow:hidden;
}

.plans-graph-title {
font-weight:600;
    color:var(--text-main);
    margin-bottom:8px;
}

.plans-graph-legend {
display:flex;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
    margin-bottom:10px;
    color:var(--control-text-soft);
    font-size:13px;
    line-height:1.3;
}

.plans-graph-legend-item {
display:inline-flex;
    align-items:center;
    gap:8px;
}

.plans-graph-legend-box {
width:12px;
    height:12px;
    border-radius:2px;
    flex:0 0 12px;
}

.plans-graph-legend-box.eff {
background:#6aa84f;
    box-shadow:0 0 0 1px var(--surface-overlay-hover) inset;
}

.plans-graph-legend-box.tail {
background:#e69138;
    box-shadow:0 0 0 1px var(--surface-overlay-hover) inset;
}

.plans-graph-meta {
display:flex;
    flex-wrap:wrap;
    gap:10px 22px;
    margin-top:10px;
    color:var(--control-text-soft);
    font-size:13px;
    line-height:1.35;
}

.plans-graph-meta-item {
white-space:nowrap;
}

.plans-graph-meta-item strong {
color:var(--text-main);
    font-weight:700;
}

#plans-group-chart,
#plans-musc-chart,
.plans-musc-chart-mobile-part {
display:block;
    width:100%;
    height:auto;
}

.plans-musc-chart-mobile-part {
    margin-top: 12px;
}

@media (max-width: 900px) {
    .plans-top-right {
justify-content:flex-start;
    }
}


.plans-inner-pane {
display:none;
}

.plans-inner-pane.active {
display:block;
}

.plans-smart-grid,
.plans-ready-grid {
display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.plans-ready-grid {
grid-template-columns:1fr 1fr 1fr;
}

.plans-smart-card {
border:1px solid var(--border-card);
    border-radius:12px;
    background:var(--surface-bg);
    padding:12px;
    box-shadow:0 1px 4px var(--shadow-card);
    min-width:0;
}

.plans-smart-title {
color:var(--text-main);
    font-size:16px;
    font-weight:700;
    margin-bottom:10px;
}

.plans-smart-title-row {
display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:10px;
}

.plans-smart-title-row .plans-smart-title {
margin-bottom:0;
}

.plans-smart-preview-repeat {
flex:0 0 auto;
}

.plans-form-section {
border:1px solid var(--plans-inset-highlight);
    border-radius:10px;
    background:var(--surface-overlay-subtle);
    padding:10px;
    margin-bottom:12px;
}

.plans-form-caption {
color:var(--text-soft);
    font-size:13px;
    font-weight:700;
    margin-bottom:8px;
}

.plans-radio-row {
display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    color:var(--text-main);
    margin-bottom:8px;
    min-height:34px;
}

.plans-inline-label {
color:var(--text-muted);
    font-size:12px;
}

.plans-inline-num {
width:64px;
    padding:6px 8px;
    border-radius:8px;
    border:1px solid var(--border-strong);
    background:var(--surface-bg-soft);
    color:var(--text-main);
}

.plans-form-grid {
display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.plans-toggle-row {
align-items:flex-start;
}

.plans-check-inline {
display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--text-main);
    cursor:pointer;
    min-height:34px;
}

.plans-check-inline input {
width:auto;
    margin:0;
}

.plans-smart-groups-wrap {
margin-top:10px;
    padding-top:10px;
    border-top:1px solid var(--surface-overlay-hover);
}

.plans-smart-groups-grid {
display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:10px;
}

.plans-smart-group-field {
min-width:0;
}

@media (max-width: 700px) {
    .plans-smart-groups-grid {
grid-template-columns:1fr;
    }
}

.plans-field {
display:flex;
    flex-direction:column;
    gap:4px;
}

.plans-field span {
color:var(--text-soft);
    font-size:12px;
}

.plans-field input,
.plans-field select {
width:100%;
    padding:8px 10px;
    border-radius:8px;
    border:1px solid var(--border-strong);
    background:var(--surface-bg-soft);
    color:var(--text-main);
    outline:none;
}

.plans-field input:focus,
.plans-field select:focus {
border-color:var(--accent);
    box-shadow:0 0 0 1px var(--plans-accent-soft-border);
}

.plans-field-wide {
grid-column:1 / -1;
}

.plans-form-actions {
display:flex;
    justify-content:flex-end;
    gap:8px;
    margin-top:10px;
    flex-wrap:wrap;
}

.plans-smart-preview-empty {
min-height:220px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:var(--text-muted);
    border:1px dashed var(--border-strong);
    border-radius:10px;
    background:var(--surface-overlay-subtle);
    padding:16px;
}

.plans-preview-wrap {
display:flex;
    flex-direction:column;
    gap:12px;
}

.plans-preview-day {
padding:0;
    border:none;
    border-radius:0;
    background:transparent;
}

.plans-preview-day-title {
color:var(--text-main);
    font-weight:600;
    margin:0 0 8px;
    font-size:14px;
}

.plans-preview-list {
margin:0;
    padding-left:18px;
    color:var(--text-main);
}

.plans-preview-list li {
margin:0 0 6px;
}

.plans-preview-sub {
color:var(--text-muted);
    font-size:12px;
}

.plans-ready-preview-card {
min-width:0;
}

@media (max-width: 980px) {
    .plans-smart-grid,
    .plans-ready-grid {
grid-template-columns:1fr;
    }
}

@media (max-width: 700px) {
    .plans-form-grid {
grid-template-columns:1fr;
    }

    .plans-field-wide {
grid-column:auto;
    }

}

.plans-smart-stack {
display:flex;
    flex-direction:column;
    gap:12px;
}

.plans-pane-actions {
display:flex;
    gap:8px;
    margin-bottom:12px;
    flex-wrap:wrap;
}

.plans-graphs-block-vert {
display:flex;
    flex-direction:column;
    gap:12px;
}

.plans-preview-wrap {
display:flex;
    flex-direction:column;
    gap:12px;
}

.plans-preview-day {
border:1px solid var(--surface-overlay-hover);
    border-radius:10px;
    background:var(--surface-overlay-soft);
    padding:10px;
}

.plans-preview-day-title {
color:var(--accent);
    font-weight:700;
    margin-bottom:8px;
}

.plans-preview-table {
width:100%;
    min-width:640px;
}

.plans-preview-table-wrap {
overflow-x:auto;
}

.plans-preview-table th,
.plans-preview-table td {
border:1px solid var(--surface-overlay-hover);
    padding:8px 10px;
    text-align:left;
    vertical-align:middle;
}

.plans-preview-table th {
background:var(--surface-overlay-soft);
    color:var(--text-soft);
}

.plans-preview-table td {
color:var(--text-main);
}

.plans-preview-table .col-num {
width:52px;
    text-align:center;
}

.plans-preview-table .col-sets {
width:90px;
    text-align:center;
}

.plans-preview-table .col-swap {
width:90px;
    text-align:center;
}

.plans-preview-table th:not(:nth-child(2)),
.plans-preview-table td:not(:nth-child(2)) {
text-align: center;
}

.plans-preview-table td:nth-child(2),
.plans-preview-table th:nth-child(2) {
text-align: left;
}

.plans-preview-swap-btn {
width:32px;
    height:32px;
    padding:0;
    border:1px solid var(--border-strong);
    border-radius:999px;
    background:var(--surface-bg);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}

.plans-preview-swap-btn img {
width:18px;
    height:18px;
    display:block;
    margin:auto;
}

.plans-preview-empty {
min-height:120px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:var(--text-muted);
    border:1px dashed var(--border-strong);
    border-radius:10px;
    background:var(--surface-overlay-subtle);
    padding:16px;
}

@media (max-width: 820px) {
    #plans-table-wrap {
overflow-x:visible;
    }

    #plans-table {
min-width:0;
        table-layout:auto;
    }

    #plans-table thead {
display:none;
    }

    #plans-table tbody {
display:block;
    }

    #plans-table tbody tr {
display:block;
    }

    #plans-table tbody tr.plans-mobile-lesson-row {
margin-top:10px;
    }

    #plans-table tbody tr.plans-mobile-lesson-row td {
display:block;
        width:100%;
        box-sizing:border-box;
    }

    #plans-table tbody tr.plans-mobile-data-row,
    #plans-table tbody tr.plans-mobile-add-row {
display:grid;
        grid-template-columns:42px minmax(0, 1.35fr) minmax(90px, 0.8fr) minmax(0, 1fr);
        grid-template-areas:
            "num capt capt cur"
            "sets sets manage manage";
        gap:8px 8px;
        margin:10px 0;
        padding:10px;
        border:1px solid var(--border-strong);
        border-radius:12px;
        background:var(--surface-bg);
    }

    #plans-table tbody tr.plans-mobile-data-row > td,
    #plans-table tbody tr.plans-mobile-add-row > td {
display:flex;
        flex-direction:column;
        justify-content:center;
        min-width:0;
        padding:0;
        border:none;
        text-align:left !important;
        white-space:normal !important;
        overflow:visible !important;
        text-overflow:clip !important;
    }

    #plans-table tbody tr.plans-mobile-data-row > td::before,
    #plans-table tbody tr.plans-mobile-add-row > td::before {
content:attr(data-label);
        display:block;
        margin-bottom:4px;
        font-size:11px;
        line-height:1.15;
        font-weight:700;
        color:var(--text-muted);
    }

    #plans-table tbody tr.plans-mobile-data-row > td:nth-child(1),
    #plans-table tbody tr.plans-mobile-add-row > td:nth-child(1) {
grid-area:num;
    }

    #plans-table tbody tr.plans-mobile-data-row > td:nth-child(2),
    #plans-table tbody tr.plans-mobile-add-row > td:nth-child(2) {
grid-area:capt;
    }

    #plans-table tbody tr.plans-mobile-data-row > td:nth-child(3),
    #plans-table tbody tr.plans-mobile-add-row > td:nth-child(3) {
grid-area:sets;
    }

    #plans-table tbody tr.plans-mobile-data-row > td:nth-child(4),
    #plans-table tbody tr.plans-mobile-add-row > td:nth-child(4) {
grid-area:cur;
    }

    #plans-table tbody tr.plans-mobile-data-row > td:nth-child(5),
    #plans-table tbody tr.plans-mobile-add-row > td:nth-child(5) {
grid-area:manage;
    }

    #plans-table tbody tr.plans-mobile-data-row > td:nth-child(1),
    #plans-table tbody tr.plans-mobile-data-row > td:nth-child(3),
    #plans-table tbody tr.plans-mobile-data-row > td:nth-child(4),
    #plans-table tbody tr.plans-mobile-add-row > td:nth-child(1),
    #plans-table tbody tr.plans-mobile-add-row > td:nth-child(3),
    #plans-table tbody tr.plans-mobile-add-row > td:nth-child(4) {
align-items:center;
        text-align:center !important;
    }

    #plans-table tbody tr.plans-mobile-data-row > td:nth-child(1)::before,
    #plans-table tbody tr.plans-mobile-data-row > td:nth-child(3)::before,
    #plans-table tbody tr.plans-mobile-data-row > td:nth-child(4)::before,
    #plans-table tbody tr.plans-mobile-add-row > td:nth-child(1)::before,
    #plans-table tbody tr.plans-mobile-add-row > td:nth-child(3)::before,
    #plans-table tbody tr.plans-mobile-add-row > td:nth-child(4)::before {
text-align:center;
    }

    #plans-table tbody tr.plans-mobile-data-row > td:nth-child(2) {
font-weight:600;
    }

    #plans-table tbody tr.plans-mobile-data-row .iters-select {
width:100%;
        min-width:0;
    }

    #plans-table tbody tr.plans-mobile-data-row .manage-icons,
    #plans-table tbody tr.plans-mobile-add-row .manage-icons {
justify-content:flex-start;
        flex-wrap:wrap;
    }

    #plans-table tbody tr.plans-mobile-add-lesson-row td {
display:block;
        width:100%;
        box-sizing:border-box;
        padding-top:6px;
        border:none;
    }

    .plans-preview-table-wrap {
overflow-x:visible;
    }

    .plans-preview-table {
min-width:0;
        table-layout:auto;
    }

    .plans-preview-table thead {
display:none;
    }

    .plans-preview-table tbody {
display:block;
    }

    .plans-preview-table tbody tr {
display:grid;
        grid-template-columns:42px minmax(0, 1.35fr) minmax(90px, 0.85fr) minmax(72px, 0.8fr);
        grid-template-areas:
            "num ex ex ex"
            "sets sets swap swap";
        gap:8px 8px;
        margin:10px 0;
        padding:10px;
        border:1px solid var(--border-strong);
        border-radius:12px;
        background:var(--surface-bg);
    }

    .plans-preview-table tbody td {
display:flex;
        flex-direction:column;
        justify-content:center;
        min-width:0;
        padding:0;
        border:none;
        text-align:left !important;
        white-space:normal !important;
        overflow:visible !important;
        text-overflow:clip !important;
    }

    .plans-preview-table tbody td::before {
display:block;
        margin-bottom:4px;
        font-size:11px;
        line-height:1.15;
        font-weight:700;
        color:var(--text-muted);
    }

    .plans-preview-table tbody td:nth-child(1) {
grid-area:num; align-items:center; text-align:center !important;
    }

    .plans-preview-table tbody td:nth-child(2) {
grid-area:ex; font-weight:600;
    }

    .plans-preview-table tbody td:nth-child(3) {
grid-area:sets; align-items:center; text-align:center !important;
    }

    .plans-preview-table tbody td:nth-child(4) {
grid-area:swap; align-items:center; text-align:center !important;
    }

    .plans-preview-table tbody td:nth-child(1)::before {
content:"#"; text-align:center;
    }

    .plans-preview-table tbody td:nth-child(2)::before {
content:attr(data-label);
    }

    .plans-preview-table tbody td:nth-child(3)::before {
content:attr(data-label); text-align:center;
    }

    .plans-preview-table tbody td:nth-child(4)::before {
content:attr(data-label); text-align:center;
    }

    .plans-preview-swap-btn {
margin:0 auto;
    }
}

@media (max-width: 560px) {
    #plans-table tbody tr.plans-mobile-data-row,
    #plans-table tbody tr.plans-mobile-add-row {
grid-template-columns:38px minmax(0, 1fr);
        grid-template-areas:
            "num capt"
            "cur cur"
            "sets sets"
            "manage manage";
    }

    .plans-preview-table tbody tr {
grid-template-columns:38px minmax(0, 1fr);
        grid-template-areas:
            "num ex"
            "sets sets"
            "swap swap";
    }
}

.plans-steps-dd {
position:relative;
}

.plans-steps-btn {
width:100%;
    min-height:38px;
    border:1px solid var(--plans-step-border);
    border-radius:10px;
    background:var(--plans-step-bg);
    color:var(--text-main);
    padding:8px 12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    cursor:pointer;
    text-align:left;
}

.plans-steps-caret {
opacity:.8;
    flex:0 0 auto;
}

.plans-steps-menu {
position:absolute;
    left:0;
    right:0;
    top:100%;
    margin-top:6px;
    padding:8px;
    border:1px solid var(--plans-step-menu-border);
    border-radius:12px;
    background:var(--plans-step-menu-bg);
    box-shadow:0 8px 24px var(--shadow-popover);
    z-index:30;
    max-height:260px;
    overflow:auto;
}

.plans-steps-item {
display:flex;
    align-items:center;
    gap:8px;
    padding:6px 4px;
    color:var(--text-main);
    cursor:pointer;
}

.plans-steps-item input {
width:auto;
    margin:0;
}

#plans-pane-smart .plans-smart-card:first-child {
padding: 12px 14px;
}

#plans-pane-smart .plans-form-section {
margin-bottom: 10px;
}

#plans-pane-smart .plans-form-caption {
margin-bottom: 6px;
    font-size: 13px;
    line-height: 1.2;
}

#plans-pane-smart .plans-radio-row {
display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 4px 0;
    padding: 4px 0;
}

#plans-pane-smart .plans-inline-label {
margin-left: 4px;
    font-size: 12px;
    opacity: .9;
}

#plans-pane-smart .plans-inline-num {
width: 56px;
    min-width: 56px;
    padding: 4px 6px;
    height: 30px;
}

#plans-pane-smart .plans-form-grid {
display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px 8px;
    align-items: end;
}

#plans-pane-smart .plans-field > span {
display: block;
    margin-bottom: 4px;
    font-size: 12px;
    line-height: 1.2;
}

#plans-pane-smart .plans-field input,
#plans-pane-smart .plans-field select,
#plans-pane-smart .plans-steps-btn {
height: 34px;
    padding: 6px 10px;
}

#plans-pane-smart .plans-toggle-row {
display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 34px;
}

#plans-pane-smart .plans-toggle-row-smart {
margin-top: 2px;
    padding-top: 2px;
}

#plans-pane-smart .plans-check-inline {
display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-main);
    cursor: pointer;
    min-height: 34px;
}

#plans-pane-smart .plans-check-inline-switch {
user-select: none;
}

#plans-pane-smart .plans-check-inline-switch input {
position: absolute;
    opacity: 0;
    pointer-events: none;
}

#plans-pane-smart .plans-check-switch-ui {
position: relative;
    width: 42px;
    height: 24px;
    border-radius: 999px;
    background: var(--border-soft);
    border: 1px solid var(--border-strong);
    box-shadow: inset 0 1px 2px var(--shadow-popover);
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
    flex: 0 0 42px;
}

#plans-pane-smart .plans-check-switch-ui::after {
content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: var(--text-main);
    box-shadow: 0 1px 3px var(--shadow-popover);
    transition: transform .18s ease, background .18s ease;
}

#plans-pane-smart .plans-check-inline-switch input:checked + .plans-check-switch-ui {
background: var(--success-bg);
    border-color: var(--success-border);
    box-shadow:
        inset 0 0 0 1px var(--success-bg),
        0 0 0 1px var(--success-bg);
}

#plans-pane-smart .plans-check-inline-switch input:checked + .plans-check-switch-ui::after {
transform: translateX(18px);
    background: var(--success-strong);
}

#plans-pane-smart .plans-check-inline-switch input:focus + .plans-check-switch-ui {
box-shadow:
        0 0 0 2px var(--info-bg),
        inset 0 1px 2px var(--shadow-popover);
}

#plans-pane-smart .plans-check-inline-text {
font-size: 13px;
    line-height: 1.2;
}

#plans-pane-smart .plans-smart-common-wrap {
max-width: 340px;
}

#plans-pane-smart .plans-smart-groups-wrap {
margin-top: 8px;
    padding-top: 8px;
}

#plans-pane-smart .plans-smart-groups-grid {
display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px 8px;
}

#plans-pane-smart .plans-smart-group-field > span {
margin-bottom: 3px;
    font-size: 12px;
}

#plans-pane-smart .plans-smart-group-field input {
height: 30px;
    padding: 4px 6px;
}

@media (max-width: 1100px) {
    #plans-pane-smart .plans-form-grid,
    #plans-pane-smart .plans-smart-groups-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    #plans-pane-smart .plans-form-grid,
    #plans-pane-smart .plans-smart-groups-grid {
grid-template-columns: 1fr;
    }

    #plans-pane-smart .plans-toggle-row {
align-items: flex-start;
        flex-direction: column;
    }
}

/* ========================================================================== 
   Plans corrective pass: shared rules missed during the first domain migration
   ========================================================================== */

.block {
    background: var(--surface-bg-strong);
    border-radius: 8px;
    box-shadow: 0 1px 4px var(--shadow-popover);
    padding: 12px 12px 14px;
    margin-top: 8px;
    border: 1px solid var(--border-soft);
}

.block h2 {
    margin: 0 0 8px;
    font-size: 16px;
    color: var(--text-main);
}

.week-title {
    font-size: 14px;
    color: var(--text-main);
    font-weight: 600;
    margin-bottom: 4px;
}

/* Save/action button used by current/ready/smart/my-plan panes and modals. */
.btn-save-demo {
    padding: 6px 12px;
    font-size: 14px;
    border-radius: 999px;
    border: none;
    background: var(--save-action-bg);
    color: var(--save-action-text);
    cursor: pointer;
    display: inline-block;
}

.btn-save-demo:hover {
    background: var(--save-action-bg-hover);
}

.btn-save-demo.disabled,
.btn-save-demo[disabled] {
    background: var(--save-action-bg-disabled);
    cursor: default;
    opacity: 0.7;
}



/* Text navigation buttons: theme background with a visible neutral outline. */
.btn-nav-transparent {
    border: 1px solid var(--border-card);
    background: transparent;
    color: var(--text-main);
    box-shadow: none;
    text-decoration: none;
}

.btn-nav-transparent:hover {
    border-color: var(--border-accent);
    background: var(--surface-overlay-hover);
    color: var(--text-main);
}

.load-primary-action-row {
    justify-content: space-between;
    align-items: center;
}

/* Current-plan copy button. */
.btn-copy-plan {
    width: 28px;
    height: 28px;
    margin-left: 6px;
    padding: 0;
    border: none;
    background: transparent url("images/btn_copy.png") center center no-repeat;
    background-size: 20px 20px;
    cursor: pointer;
    vertical-align: middle;
}

.btn-copy-plan:hover {
    opacity: 0.85;
}

.btn-copy-plan:active {
    opacity: 0.65;
}

/* Orientation warning is hidden by default; JS only toggles the visible class. */
.screen-orient-hint {
    display: none;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    padding: 12px 14px;
    border: 1px solid var(--orientation-hint-border);
    border-radius: 12px;
    background: var(--orientation-hint-bg);
    color: var(--orientation-hint-text);
    line-height: 1.25;
    box-shadow: var(--orientation-hint-shadow);
    text-align: center;
}

.screen-orient-hint.screen-orient-hint-visible {
    display: flex;
}

.screen-orient-hint-main {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
}

.screen-orient-hint img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex: 0 0 24px;
    filter: drop-shadow(0 0 6px var(--orientation-hint-icon-shadow));
}

.screen-orient-hint-text {
    min-width: 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--orientation-hint-text);
}

.screen-orient-hint-icon-reverse {
    opacity: 0.78;
}

@media (max-width: 520px) {
    .screen-orient-hint {
        padding: 11px 12px;
    }

    .screen-orient-hint-main {
        gap: 10px;
    }

    .screen-orient-hint-text {
        font-size: 13px;
    }
}

@media (min-width: 901px) {
    .screen-orient-hint {
        display: none !important;
    }
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 10px;
    flex: 0 0 auto;
    padding-top: 2px;
}

@media (max-width: 700px) {
    .modal-actions {
        flex-wrap: wrap;
        position: sticky;
        bottom: 0;
        z-index: 2;
        background: var(--surface-bg);
        border-top: 1px solid var(--border-overlay);
        padding-top: 8px;
        padding-bottom: 2px;
    }

    .modal-actions > button {
        flex: 1 1 140px;
    }
}


/* Stage 6: index.php domain — auth, week shell, exercise cards and set editor */
body.preload #header-bar,
body.preload #tabs-bar,
body.preload #topbar,
body.preload #auth-panel,
body.preload #app,
body.preload #footer { display: none !important; }

#topbar {
    background: var(--header-link-bg);
        color: var(--text-main);
        padding: 6px 12px;
        font-size: 13px;
        display: none;
        align-items: center;
        justify-content: space-between;
        border-radius: 0 0 8px 8px;
        margin-bottom: 8px;
        border-bottom: 1px solid var(--shell-border);
}

#topbar span.user { font-weight: 600; }

/* ===== GLOBAL LOGOUT ===== */
.header-logout-btn {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--control-border);
    border-radius: 999px;
    background: var(--control-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 0 0 auto;
}

.header-logout-btn[hidden] {
    display: none !important;
}

.header-logout-btn img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    opacity: 0.68;
    filter: grayscale(1);
    transition: opacity 0.15s ease, filter 0.15s ease;
}

.header-logout-btn:hover {
    border-color: var(--danger-border);
    background: var(--danger-bg);
}

.header-logout-btn:hover img {
    opacity: 1;
    filter: none;
}

.header-logout-btn:active {
    transform: scale(0.96);
}

.header-logout-btn:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

#topbar-buttons {
    display: flex;
    	gap: 6px;
}

@media (max-width: 700px) {
    #topbar {
        align-items: stretch;
                gap: 8px;
    }

    #topbar-buttons {
        display: flex;
                flex-wrap: wrap;
                align-items: center;
                gap: 6px;
                width: 100%;
    }

    #trainer-switch-wrap {
        width: 100%;
                order: 1;
                display: flex;
                align-items: center;
                gap: 6px;
                flex-wrap: wrap;
                min-width: 0;
    }

    #trainer-switch-wrap label {
        flex: 0 0 auto;
                font-size: 11px;
    }

    #trainer-target-select {
        min-width: 0;
                flex: 1 1 140px;
                max-width: 180px;
                padding: 3px 8px;
                font-size: 12px;
    }

    #trainer-mode-badge {
        order: 2;
                flex: 0 0 auto;
                align-self: flex-start;
                max-width: 100%;
                padding: 4px 10px;
                font-size: 11px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
    }

}

#info-block .info-section {
    font-size: 12px;
    line-height: 1.28;
}

#info-block .info-section p {
    margin: 3px 0;
}

#info-block .info-section ul {
    margin: 3px 0 4px 18px;
    padding: 0;
}

#info-block .info-section li {
    margin: 1px 0;
}

#info-block .info-guide-heading {
    margin-top: 7px;
}

.info-status-table-wrap {
    margin: 4px 0 6px;
    overflow-x: auto;
}

.info-status-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 11px;
    line-height: 1.18;
}

.info-status-table th,
.info-status-table td {
    padding: 3px 5px;
    border-bottom: 1px solid var(--border-soft);
    vertical-align: top;
}

.info-status-table thead th {
    background: var(--surface-bg-soft);
    color: var(--text-muted);
    font-weight: 700;
    text-align: left;
}

.info-status-table th:nth-child(1),
.info-status-table td:nth-child(1) {
    width: 24px;
    text-align: center;
}

.info-status-table th:nth-child(2),
.info-status-table td:nth-child(2) {
    width: 30px;
    text-align: center;
}

.info-status-icon {
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
}

.info-status-na {
    color: var(--text-muted);
    text-align: center;
}

.info-guide-actions {
    display: grid;
    gap: 4px;
    margin-top: 3px;
}

.info-guide-action-row {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    margin: 3px 0;
}

.info-guide-action-row > span:last-child {
    min-width: 0;
}

.info-guide-button {
    flex: 0 0 auto;
    pointer-events: none;
    user-select: none;
    cursor: default;
}

.info-guide-button-save {
    padding: 3px 8px;
    border: 0;
    border-radius: 999px;
    background: var(--save-action-bg);
    color: var(--save-action-text);
    font-size: 11px;
    line-height: 1.25;
}

#info-block .btn-save-demo.info-guide-button {
    padding: 3px 8px;
    font-size: 11px;
    line-height: 1.25;
}

@media (max-width: 640px) {
    .info-guide-action-row {
        align-items: flex-start;
    }
}

#auth-panel {
    background: var(--shell-bg);
        padding: 16px 16px 20px;
        border-radius: 8px;
        box-shadow: 0 1px 4px var(--index-auth-shadow);
        margin-top: 12px;
        border: 1px solid var(--shell-border);
}

#auth-panel h1 {
    margin: 0 0 12px;
        font-size: 18px;
        color: var(--text-main);
}

.auth-row { margin-bottom: 10px; }

.auth-row label {
    display: block;
        font-size: 13px;
        margin-bottom: 4px;
        color: var(--text-muted);
}

.auth-row input[type="text"],
.auth-row input[type="password"] {
    width: 100%;
        padding: 6px 8px;
        font-size: 14px;
        border-radius: 4px;
        border: 1px solid var(--shell-border);
        background: var(--shell-bg);
        color: var(--text-main);
}

.auth-row.auth-row-captcha { align-items: flex-start; }

.auth-captcha-box {
    min-width: 0;
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        gap: 6px;
}

.auth-captcha-text {
    font-size: 13px;
        color: var(--text-soft);
        line-height: 1.25;
}

.auth-hidden { display: none !important; }

@media (max-width: 560px) {
    .auth-row {
        flex-direction: column;
                align-items: stretch;
                gap: 4px;
    }

    .auth-row label { flex: none; }
}

.auth-row input::placeholder { color: var(--text-disabled); }

.auth-row input:focus {
    outline: none;
        border-color: var(--action-primary-bg);
        box-shadow: 0 0 0 1px var(--index-focus-shadow);
}

.auth-actions {
    display: flex;
        gap: 8px;
        margin-top: 8px;
}

.auth-actions button {
    flex: 1;
        padding: 6px 10px;
        font-size: 14px;
        border-radius: 999px;
        border: none;
        cursor: pointer;
        transition: flex-basis 0.18s ease, flex-grow 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.auth-actions #btn-register {
    display: none;
}

.auth-actions.auth-actions-register-active #btn-login {
    display: none;
}

.auth-actions.auth-actions-register-active #btn-register {
    display: block;
}

.auth-actions button {
    width: 100%;
}

.auth-secondary-toggle {
    display: block;
    margin: 10px auto 0;
    padding: 4px 8px;
    border: 0;
    background: transparent;
    color: var(--action-primary-bg);
    text-decoration: underline;
    cursor: pointer;
}

.password-change-panel {
    margin-top: 12px;
    padding: 14px;
    border: 1px solid var(--shell-border);
    border-radius: 10px;
    background: var(--surface-bg-raised);
}

.password-change-back {
    margin: 0 0 12px;
}

.password-requirements {
    margin: -2px 0 12px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.4;
}

.password-validation-message {
    min-height: 17px;
    margin-top: 4px;
    color: transparent;
    font-size: 12px;
    opacity: 0;
    transition: opacity .15s ease;
}

.password-validation-message:not(:empty) {
    color: var(--success-strong);
    opacity: .78;
}

.auth-row input.password-field-valid {
    border-color: var(--success-strong);
    background: color-mix(in srgb, var(--success-strong) 9%, var(--shell-bg));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--success-strong) 35%, transparent);
}

#btn-change-password {
    width: 100%;
    min-height: 40px;
    border-radius: 999px;
}

@media (min-width: 521px) {
    .auth-actions.auth-actions-login-active #btn-login,
    .auth-actions.auth-actions-register-active #btn-register {
        flex: 2 1 0;
        box-shadow: 0 0 0 2px var(--index-focus-shadow), 0 0 14px var(--index-focus-shadow);
        filter: brightness(1.04);
    }

    .auth-actions.auth-actions-login-active #btn-register,
    .auth-actions.auth-actions-register-active #btn-login {
        flex: 1 1 0;
    }
}

.auth-recovery-hint {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--text-muted);
}

body.auth-landing .auth-recovery-hint {
    margin-top: 10px;
    text-align: center;
}

#btn-login {
    background: var(--action-primary-bg);
        color: var(--action-primary-text);
}

#btn-login:hover { background: var(--action-primary-bg-hover); }

#btn-register {
    background: var(--border-strong);
        color: var(--text-main);
}

#btn-register:hover { background: var(--action-secondary-bg-hover); }

.auth-hidden { display: none !important; }

.auth-captcha-row {
    margin-top: 12px;
        margin-bottom: 10px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 9px;
        border: 1px solid var(--border-main);
        border-radius: 10px;
        background: var(--index-captcha-bg);
}

.auth-captcha-row.auth-captcha-attention {
    border-color: var(--warning-strong);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning-strong) 24%, transparent);
    animation: auth-captcha-nudge .48s ease-in-out 2;
}

@keyframes auth-captcha-nudge {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-7px); }
    75% { transform: translateX(7px); }
}

@media (prefers-reduced-motion: reduce) {
    .auth-captcha-row.auth-captcha-attention {
        animation: none;
    }
}

.auth-captcha-title {
    margin-bottom: 7px;
        font-size: 16px;
        font-weight: 700;
        color: var(--text-main);
        line-height: 1.15;
}

.auth-captcha-formula {
    color: var(--tab-text-hover);
}

.auth-captcha-target {
    display: flex;
    justify-content: center;
    margin-bottom: 7px;
}

.auth-captcha-target-image {
    width: 84px;
    height: 68px;
    object-fit: contain;
    border-radius: 10px;
}

.auth-captcha-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(58px, 1fr));
    gap: 5px;
}

.auth-captcha-choice {
    min-height: 48px;
    padding: 3px;
    border: 1px solid var(--border-main);
    border-radius: 9px;
    background: var(--shell-bg);
    color: var(--text-main);
    font-size: 22px;
    font-weight: 700;
    cursor: pointer;
}

.auth-captcha-choice img {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.auth-captcha-choice:hover {
    border-color: var(--action-primary-bg);
}

.auth-captcha-choice:disabled {
    cursor: wait;
    opacity: .65;
}

.auth-captcha-math-prompt {
    padding: 14px 22px;
    border-radius: 10px;
    background: var(--shell-bg);
    font-size: 27px;
    font-weight: 700;
}

.auth-captcha-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 7px;
}

.auth-captcha-link {
    padding: 3px 0;
    border: 0;
    background: transparent;
    color: var(--link-color, var(--tab-text-hover));
    text-decoration: underline;
    cursor: pointer;
}

.auth-captcha-loading {
    padding: 12px 0;
    font-size: 14px;
}

.auth-captcha-verified {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid var(--success-strong);
    border-radius: 9px;
    background: color-mix(in srgb, var(--success-strong) 10%, var(--shell-bg));
    color: var(--success-strong);
    font-size: 15px;
    font-weight: 700;
}

.auth-captcha-verified span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--success-strong);
    color: var(--shell-bg);
    font-size: 18px;
}

.auth-register-status {
    min-height: 0;
    margin: 7px 0;
    color: var(--warning-strong);
    font-size: 15px;
    font-weight: 700;
}

.auth-register-status:empty {
    display: none;
}

.auth-login-status {
    display: block;
    width: 100%;
    min-height: 0;
    margin: 9px 0;
    color: var(--warning-strong);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    text-align: left;
}

.auth-login-status:empty {
    display: none;
}

@media (min-width: 761px) {
    #auth-default-fields.auth-registration-mode {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
        grid-template-rows: auto auto auto auto auto auto;
        column-gap: 18px;
        align-items: start;
    }

    #auth-default-fields.auth-registration-mode #auth-login-row,
    #auth-default-fields.auth-registration-mode #auth-pass-row,
    #auth-default-fields.auth-registration-mode #auth-register-confirm-row,
    #auth-default-fields.auth-registration-mode .auth-recovery-hint {
        grid-column: 1;
    }

    #auth-default-fields.auth-registration-mode .auth-actions {
        grid-column: 1 / -1;
        grid-row: 7;
        width: min(100%, 520px);
        justify-self: center;
    }

    #auth-default-fields.auth-registration-mode .auth-login-links {
        grid-column: 1 / -1;
        grid-row: 8;
        justify-self: center;
    }

    #auth-default-fields.auth-registration-mode #auth-captcha-row {
        grid-column: 2;
        grid-row: 1 / span 5;
        margin: 0;
    }

    #auth-default-fields.auth-registration-mode #auth-register-status {
        grid-column: 1 / -1;
        grid-row: 6;
        width: min(100%, 520px);
        justify-self: center;
        text-align: center;
    }

    #auth-default-fields.auth-registration-mode #auth-login-status {
        display: none;
    }

    #auth-default-fields.auth-registration-mode .oauth-divider,
    #auth-default-fields.auth-registration-mode .oauth-login-buttons {
        grid-column: 1 / -1;
    }
}

.auth-captcha-answer {
    width: 70px;
        height: 42px;
        padding: 4px 8px;
        text-align: center;
        font-size: 24px;
        font-weight: 700;
        border-radius: 8px;
        border: 1px solid var(--index-soft-strong-text);
        background: var(--shell-bg);
        color: var(--tab-text-hover);
        outline: none;
        appearance: textfield;
        -moz-appearance: textfield;
}

.auth-captcha-answer::-webkit-outer-spin-button,
.auth-captcha-answer::-webkit-inner-spin-button {
    -webkit-appearance: none;
        margin: 0;
}

.auth-captcha-answer:focus {
    border-color: var(--action-primary-bg);
        box-shadow: 0 0 0 1px var(--index-focus-shadow);
}

.auth-captcha-piece {
    display: inline-flex;
        align-items: center;
        justify-content: center;
}

.auth-captcha-refresh-btn {
    width: 34px;
        height: 34px;
        padding: 0;
        margin-left: 6px;
        border: 0;
        background: transparent;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex: 0 0 auto;
        box-shadow: none;
}

.auth-captcha-refresh-btn img {
    width: 28px;
        height: 28px;
        object-fit: contain;
        display: block;
}

.auth-captcha-refresh-btn:hover { filter: brightness(1.15); }

.auth-captcha-refresh-btn:active { transform: scale(0.96); }

.auth-captcha-refresh-btn:focus {
    outline: none;
        box-shadow: none;
}

@media (max-width: 560px) {
    .auth-captcha-title { font-size: 18px; }

    .auth-captcha-formula {
        font-size: 24px;
                gap: 6px;
    }

    .auth-captcha-answer {
        width: 62px;
                height: 38px;
                font-size: 22px;
    }

    .auth-captcha-refresh-btn {
        width: 30px;
                height: 30px;
    }

    .auth-captcha-refresh-btn img {
        width: 24px;
                height: 24px;
    }
}

.week-title {
    font-size: 14px;
        color: var(--text-main);
        font-weight: 600;
        margin-bottom: 4px;
}

.week-info-row {
    display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 5px;
}

.week-info-row #week-info { margin-bottom: 0; }

.week-start-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    flex: 0 1 auto;
}

.week-finish-hint {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.35;
    text-align: left;
    margin-bottom: 8px;
}

.week-apply-plan-modal-content p {
    margin: 8px 0;
    line-height: 1.45;
}

.week-apply-plan-preserve {
    font-weight: 600;
}

@media (max-width: 700px) {
    .week-info-row {
        align-items: stretch;
        flex-direction: column;
    }
    .week-start-actions {
        width: 100%;
        align-items: stretch;
        justify-content: flex-start;
    }
    .week-start-actions > * {
        flex: 1 1 180px;
        text-align: center;
    }
    .week-finish-hint {
        text-align: left;
    }
}

.trainings-row {
    display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
}

.trainings-row label {
    font-size: 14px;
        color: var(--text-main);
}

#training-select {
    flex: 1;
        min-width: 160px;
        padding: 6px 8px;
        border-radius: 4px;
        border: 1px solid var(--shell-border);
        font-size: 14px;
        background: var(--shell-bg);
        color: var(--text-main);
}

.exercise-card {
    border: 1px solid var(--shell-border);
    	border-radius: 8px;
    	padding: 6px;          /* было 8px */
    	margin-bottom: 6px;    /* было 8px */
    	background: var(--shell-bg);
}

.exercise-header {
    display: flex;
    	align-items: center;
    	justify-content: flex-start;  /* вместо space-between */
    	column-gap: 8px;
    	margin-bottom: 4px;
}

.ex-status {
    font-size: 14px;
        margin-right: 6px;
}

.exercise-header-left {
    display: flex;
    	align-items: flex-start;
    	gap: 4px;
    	flex: 1 1 auto;
    	min-width: 0;
}

.exercise-ok-btn {
    background: var(--index-success-hover);
        color: var(--index-action-text);
        border: none;
        border-radius: 999px;
        padding: 2px 8px;
        font-size: 11px;
        cursor: pointer;
        white-space: nowrap;
}

.exercise-ok-btn:hover { background: var(--index-success-deep); }

.exercise-clear-btn {
    background: var(--index-warning-deep);   /* тёмно-жёлтый (amber-700) */
        color: var(--index-action-text);
        border: none;
        border-radius: 999px;
        padding: 2px 8px;
        font-size: 11px;
        cursor: pointer;
        white-space: nowrap;
}

.exercise-clear-btn:hover { background: var(--warning-text);   /* темнее (amber-800) */ }

.exercise-actions {
    display: flex;
        align-items: center;
        gap: 6px;
        flex: 0 0 auto;
        white-space: nowrap;
}

.exercise-ok-hint {
    margin: 8px 10px 0;
    padding: 7px 10px;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background: var(--surface-bg-soft);
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.35;
}

.exercise-title {
    flex: 1 1 auto;
    	min-width: 0;
    	line-height: 1.2;
    	color: var(--text-main);
}

.exercise-title-name {
    white-space: normal;
    	overflow-wrap: anywhere;
    	word-break: break-word;
}

.exercise-title-rir { white-space: nowrap; }

.exercise-meta {
    margin-left: auto;            /* всё что справа от заголовка уезжает к правому краю */
    	display: flex;
    	align-items: center;
    	gap: 8px;
    	white-space: nowrap;          /* не переносим "Текущий/План" на новую строку */
    	font-size: 12px;
}

.exercise-header .btn-ok { flex-shrink: 0; }

.exercise-meta div { white-space: nowrap; }

.rw-current { color: var(--index-blue-mid); /* голубой 9ca3af*/ }

.rw-current-row {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.diary-target-edit-btn {
    width: 24px;
    height: 24px;
    padding: 2px;
    border: 1px solid var(--control-border);
    border-radius: 6px;
    background: var(--control-bg);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.diary-target-edit-btn img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.diary-target-edit-btn:disabled {
    opacity: .38;
    cursor: not-allowed;
}

.rw-plan {
    color: var(--success-strong); /* яркий зелёный */
        font-weight: 600;
}

.public-profile-qr {
    --public-profile-qr-color: var(--text-main);
    display: flex;
    justify-content: center;
    margin: 18px 0 4px;
    text-align: center;
}

html[data-theme="light"] .public-profile-qr {
    --public-profile-qr-color: #0f172a;
}

html[data-theme="dark"] .public-profile-qr {
    --public-profile-qr-color: #e5e7eb;
}

.public-profile-qr[hidden] {
    display: none !important;
}

.public-profile-qr-link {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--text-main);
    text-decoration: none;
}

.public-profile-qr-canvas {
    width: 164px;
    height: 164px;
    display: block;
    image-rendering: auto;
}

.public-profile-qr-title {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
}

.sets-container { margin-top: 4px; }

.set-row {
    display: flex;
    	align-items: center;
    	margin-bottom: 2px;   /* было 4px – карточка становится визуально плотнее */
}

.set-label {
    white-space: nowrap;
        font-size: 12px;
        color: var(--text-disabled);
        margin-right: 4px;
        flex: 0 0 30px; /* компактный статус подхода */
        text-align: center;
}

.set-row-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    min-height: 26px;
    font-size: 17px;
    line-height: 1;
}

.set-inputs {
    display: flex;
        flex: 1 1 auto;
        gap: 4px;
}

.set-inputs > input,
.set-inputs > select { min-width: 0; }

.set-inputs > :nth-child(1) { flex: 0.8 1 0; }

.set-inputs > :nth-child(2) { flex: 1.1 1 0; }

.set-inputs > :nth-child(3) { flex: 0.5 1 0; }

.set-inputs > :nth-child(4) { flex: 0.5 1 0; }

.set-inputs > :nth-child(5) { flex: 0.6 1 0; }

.set-inputs > :nth-child(6) { flex: 1.2 1 0; }

.set-row.set-header .set-inputs .set-col-title { min-width: 0; }

.set-row.set-header .set-inputs .set-col-title:nth-child(1) { flex: 0.8 1 0; }

.set-row.set-header .set-inputs .set-col-title:nth-child(2) { flex: 1.1 1 0; }

.set-row.set-header .set-inputs .set-col-title:nth-child(3) { flex: 0.5 1 0; }

.set-row.set-header .set-inputs .set-col-title:nth-child(4) { flex: 0.5 1 0; }

.set-row.set-header .set-inputs .set-col-title:nth-child(5) { flex: 0.6 1 0; }

.set-row.set-header .set-inputs .set-col-title:nth-child(6) { flex: 1.2 1 0; }

.set-inputs input {
    width: 100%;
    	padding: 4px 6px;
    	font-size: 13px;
    	border-radius: 4px;
    	border: 1px solid var(--shell-border);
    	background: var(--shell-bg);
    	color: var(--text-main);
    	text-align: center;   /* выравнивание по центру */
    	font-family: "Lucida Console", "Consolas", "Courier New", monospace;
}

.set-inputs select.set-rir {
    height: 28px;
        border-radius: 6px;
        border: 1px solid var(--index-overlay-border);
        background: var(--index-soft-shadow);
        color: var(--text-main);
        padding: 0 6px;
        outline: none;
}

.set-inputs input.readonly-metric {
    background: var(--shell-bg);                 /* тот же фон, без "инпутности" */
    	border-color: var(--surface-bg-raised);               /* тише, чем у editable */
    	color: var(--text-muted);                      /* серый как у secondary-текста */
    	cursor: default;
}

.set-inputs input.readonly-metric:focus {
    outline: none;
    	box-shadow: none;
    	border-color: var(--surface-bg-raised);
}

.set-inputs input.readonly-metric {
    padding-top: 3px;
    	padding-bottom: 3px;
    	font-size: 12.5px;
}

.set-inputs input::placeholder { color: var(--text-disabled); }

.set-inputs input:focus {
    outline: none;
        border-color: var(--action-primary-bg);
        box-shadow: 0 0 0 1px var(--index-focus-shadow);
}

.set-inputs input.lead-set-input {
    background: var(--index-success-surface);    /* тёмно-зелёный фон */
        border-color: var(--save-action-bg);  /* зелёная рамка */
        color: var(--index-success-soft-text);         /* светло-зелёный текст */
}

.set-inputs input::-webkit-outer-spin-button,
.set-inputs input::-webkit-inner-spin-button {
    -webkit-appearance: none;
        margin: 0;
}

.set-inputs input[type=number] { -moz-appearance: textfield; }

.set-row.set-header { margin-bottom: 2px; }

.set-row.set-header .set-label { visibility: hidden; /* занимаем место, но не показываем текст */ }

.set-row.set-header .set-inputs {
    font-size: 11px;
        color: var(--text-muted);
}

.set-col-title {
    flex: 1 1 0;
        text-align: center;
}

.diary-info-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    min-width: 17px;
    padding: 0;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    font: 700 11px/1 sans-serif;
    vertical-align: middle;
    cursor: pointer;
}

.diary-info-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.diary-info-modal {
    position: fixed;
    inset: 0;
    z-index: 10020;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, .45);
}

.diary-info-dialog {
    width: min(360px, 100%);
    padding: 18px;
    border-radius: 14px;
    background: var(--surface, #fff);
    color: var(--text, #222);
    box-shadow: 0 12px 36px var(--shadow-popover);
    text-align: center;
}

.diary-info-dialog p { margin: 0 0 16px; line-height: 1.45; }
.diary-info-close { min-width: 80px; }

#save-block {
    display: flex;
    	align-items: center;
    	justify-content: flex-end;
    	gap: 10px;
    	margin-top: 4px;
}

#btn-save {
    padding: 6px 12px;
    	font-size: 14px;
    	border-radius: 999px;
    	border: none;
    	background: var(--save-action-bg);
    	color: var(--save-action-text);
    	cursor: pointer;
}

#btn-save:hover { background: var(--save-action-bg-hover); }

#btn-save:disabled {
    background: var(--action-secondary-bg-hover);   /* серо-зелёный */
    	cursor: default;
    	opacity: 0.7;
}

@media (max-width: 600px) {
    .exercise-header {
        flex-direction: column;
                align-items: stretch;
                gap: 6px;
    }

    .exercise-header-left {
        width: 100%;
                min-width: 0;
    }

    .exercise-title { width: 100%; }

    .exercise-meta {
        margin-left: 0;
                width: 100%;
                justify-content: flex-start;
                flex-wrap: wrap;
                white-space: normal;
                text-align: left;
    }

    .exercise-meta div { white-space: normal; }

    .exercise-ok-btn,
    .exercise-clear-btn {
        align-self: flex-start;
                width: auto;
                flex: 0 0 auto;
    }
}

.exercise-web-card {
    border: 1px solid var(--border-card);
        border-radius: 12px;
        background: var(--surface-bg);
        padding: 10px;
        box-shadow: 0 1px 4px var(--index-shadow-color);
}

.exercise-web-card.used {
    border-color: var(--index-success-ring);
        background: linear-gradient(180deg, var(--index-success-soft-bg), var(--index-welcome-overlay));
}

.exercise-web-card.free {
    border-color: var(--index-info-ring);
        background: linear-gradient(180deg, var(--index-info-soft-bg), var(--index-welcome-overlay));
}

.exercise-web-top {
    display: grid;
        grid-template-columns: 38px 34px 1fr auto;
        gap: 10px;
        align-items: start;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--index-inner-highlight);
}

.exercise-web-group {
    width: 34px;
        height: 34px;
        border-radius: 8px;
        background: var(--index-bright-overlay);
        border: 1px solid var(--index-soft-overlay);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        box-shadow: inset 0 0 0 1px var(--index-light-shadow);
}

.exercise-web-group img {
    max-width: 30px;
        max-height: 30px;
        display: block;
}

.exercise-web-title-wrap { min-width: 0; }

.exercise-web-title {
    color: var(--text-main);
        font-size: 18px;
        font-weight: 700;
        line-height: 1.15;
        word-break: break-word;
}

.exercise-web-subtitle {
    margin-top: 3px;
        color: var(--text-muted);
        font-size: 12px;
}

.exercise-web-badges {
    display: flex;
        align-items: center;
        gap: 4px;
        flex-wrap: wrap;
        justify-content: flex-end;
}

.exercise-web-badge {
    width: 24px;
        height: 24px;
        position: relative;
        flex: 0 0 24px;
}

.exercise-web-badge img.badge-bg {
    width: 24px;
        height: 24px;
        display: block;
}

.exercise-web-badge img.badge-icon {
    width: 18px;
        height: 18px;
        position: absolute;
        left: 3px;
        top: 3px;
}

.exercise-web-controls {
    display: grid;
        grid-template-columns: 220px 140px 120px 50px;
        gap: 10px;
        align-items: end;
        margin-top: 10px;
}

.exercise-web-control label {
    display: block;
        margin-bottom: 4px;
        color: var(--text-soft);
        font-size: 12px;
}

.exercise-web-control .modal-select,
.exercise-web-control .user-input {
    max-width: none;
        width: 100%;
}

.exercise-web-reps {
    display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
}

.exercise-web-star {
    width: 38px;
        height: 38px;
        border-radius: 999px;
        border: 1px solid var(--border-strong);
        background: var(--surface-bg);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        margin-left: 0;
        margin-top: 0;
        align-self: start;
}

.exercise-web-star img {
    width: 20px;
        height: 20px;
}

.exercise-web-empty {
    border: 1px dashed var(--border-strong);
        border-radius: 12px;
        text-align: center;
        color: var(--text-muted);
        padding: 18px;
}

@media (max-width: 900px) {
    .exercise-web-controls { grid-template-columns: 1fr 1fr; }

    .exercise-web-star { margin-left: 0; }
}

@media (max-width: 720px) {
    .exercise-web-top { grid-template-columns: 38px 34px 1fr; }

    .exercise-web-badges {
        grid-column: 1 / -1;
                justify-content: flex-start;
    }

    .exercise-web-controls { grid-template-columns: 1fr; }
}

#welcome-block .welcome-content {
    font-size: 13px;
        line-height: 1.55;
        color: var(--index-text-alt);
}

.welcome-lead {
    margin: 0 0 12px;
        color: var(--text-main);
}

.welcome-list {
    margin: 0;
        padding-left: 18px;
}

.welcome-list li { margin: 0 0 10px; }

.welcome-list li.is-done { color: var(--text-disabled); }

.welcome-done {
    display: inline-block;
        margin-left: 8px;
        padding: 1px 8px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 700;
        color: var(--index-muted-badge-text);
        background: var(--text-muted);
        vertical-align: middle;
}

.welcome-tail {
    margin-top: 12px;
        color: var(--text-soft);
}

.welcome-joke {
    margin-top: 10px;
        color: var(--page-text);
        font-weight: 600;
}

.start-link-btn {
    display: inline-flex;
        align-items: center;
        margin-left: 6px;
        text-decoration: none;
}

.welcome-link-btn {
    display: inline-flex;
    	align-items: center;
    	justify-content: center;
    	min-height: 28px;
    	padding: 0 10px;
    	border: 1px solid var(--index-accent-border-soft);
    	border-bottom: 2px solid var(--page-text);
    	border-radius: 4px;
    	background: var(--accent-soft);
    	color: var(--page-text);
    	font-size: 13px;
    	font-weight: 600;
    	line-height: 1;
    	text-decoration: none;
    	white-space: nowrap;
    	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.welcome-link-btn:hover {
    background: var(--index-accent-bg-strong);
    	color: var(--index-accent-soft-text);
    	border-color: var(--plans-active-border);
}

.start-link-btn.welcome-link-btn { margin-left: 6px; }

.welcome-download-btn {
    border-color: var(--orientation-hint-border);
    	border-bottom: 2px solid var(--focus-ring);
    	background: var(--index-info-bg-medium);
    	color: var(--header-link-text);
}

.welcome-download-btn:hover {
    background: var(--index-info-border-medium);
    	color: var(--info-text);
    	border-color: var(--index-info-text-muted);
}

.auth-welcome {
    margin-top: 12px;
        padding: 16px 18px;
        border: 1px solid var(--border-card);
        border-radius: 12px;
        background:
            linear-gradient(180deg, var(--index-card-overlay-top), var(--index-card-overlay-bottom));
        box-shadow: 0 1px 6px var(--index-shadow-color);
}

.auth-welcome-badge {
    display: inline-flex;
        align-items: center;
        min-height: 24px;
        padding: 3px 10px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 700;
        color: var(--info-text);
        background: var(--index-info-bg-alt);
        border: 1px solid var(--index-info-border-alt);
        margin-bottom: 10px;
}

.auth-welcome-title {
    color: var(--text-main);
        font-size: 18px;
        font-weight: 700;
        line-height: 1.3;
        margin-bottom: 8px;
}

.auth-welcome-text {
    color: var(--text-soft);
        font-size: 14px;
        line-height: 1.5;
        margin-bottom: 10px;
}

.auth-welcome-points {
    display: flex;
        flex-direction: column;
        gap: 6px;
}

.auth-welcome-point {
    color: var(--index-meta-text);
        font-size: 13px;
        line-height: 1.4;
}

@media (max-width: 700px) {
    .auth-welcome { padding: 14px; }

    .auth-welcome-title { font-size: 16px; }

    .auth-welcome-text,
    .auth-welcome-point { font-size: 13px; }
}


/* ============================================================
   Stage 7: exercises.php + weights.php domain migration
   ============================================================ */

#btn-ex-groups img {
padding: 2px;
    border-radius: 6px;
    background: var(--catalog-icon-bright);
    box-shadow: inset 0 0 0 1px var(--catalog-light-shadow);
}

.ex-status {
font-size: 14px;
    margin-right: 6px;
}

.weights-toolbar {
display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.weights-toolbar-right {
display: flex;
    align-items: center;
    gap: 8px;
}

.weights-toolbar {
display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.weights-toolbar-right {
display: flex;
    align-items: center;
    gap: 8px;
}

.weights-grid {
display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
}

.weight-card {
background: var(--surface-bg);
    border: 1px solid var(--border-card);
    border-radius: 12px;
    padding: 10px 10px 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 1px 4px var(--shadow-card);
}

.weight-card.used {
border-color: var(--catalog-used-ring);
    background: linear-gradient(180deg, var(--catalog-used-bg), var(--catalog-popover-bg));
}

.weight-card.free {
border-color: var(--catalog-free-ring);
    background: linear-gradient(180deg, var(--catalog-free-bg), var(--catalog-popover-bg));
}

.weight-card-title {
display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--catalog-inner-highlight);
}

.weight-card-title-main {
min-width: 0;
    flex: 1 1 auto;
}

.weight-card-alias {
color: var(--text-main);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.15;
    word-break: break-word;
}

.weight-card-key {
color: var(--text-disabled);
    font-size: 11px;
    margin-top: 3px;
    word-break: break-all;
}

.weight-card-usage {
flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 12px;
    white-space: nowrap;
    padding-top: 2px;
}

.weight-card-values {
color: var(--catalog-values-text);
    font-size: 13px;
    line-height: 1.45;
    min-height: 68px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--catalog-divider);
    background: var(--catalog-values-bg);
    white-space: normal;
    word-break: break-word;
}

.weight-card-actions {
display: flex;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
    padding-top: 2px;
}

.weights-empty {
border: 1px dashed var(--control-border);
    border-radius: 10px;
    padding: 18px;
    text-align: center;
    color: var(--text-muted);
}

.weights-form-label {
display: block;
    margin: 0 0 4px;
    color: var(--text-soft);
    font-size: 13px;
}

.weights-modal-content {
width: min(760px, 96vw);
}

.weights-values-text {
width: 100%;
    min-height: 220px;
    resize: vertical;
    margin-bottom: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--control-border);
    background: var(--surface-bg-soft);
    color: var(--text-main);
    font-size: 14px;
    line-height: 1.45;
    box-sizing: border-box;
}

.weights-values-text:focus {
outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--catalog-focus-shadow);
}

.weights-range-box {
margin-top: 10px;
    padding: 12px;
    border: 1px solid var(--catalog-range-border);
    border-radius: 10px;
    background: var(--surface-overlay-subtle);
}

.weights-range-title {
color: var(--text-main);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}

.weights-range-grid {
display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.weights-links-list {
max-height: 360px;
    overflow: auto;
    border: 1px solid var(--control-border);
    border-radius: 10px;
    background: var(--surface-bg-soft);
    padding: 6px;
}

.weights-link-item {
padding: 7px 8px;
    border-bottom: 1px solid var(--catalog-divider);
    color: var(--text-main);
    font-size: 13px;
}

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

@media (max-width: 820px) {
    .weights-grid {
grid-template-columns: 1fr;
    }

    .weights-range-grid {
grid-template-columns: 1fr;
    }

    .weight-card-title {
flex-direction: column;
        align-items: flex-start;
    }

    .weight-card-usage {
white-space: normal;
        padding-top: 0;
    }
}

.ex-topbar {
display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}

.ex-buffer-top {
margin-top: 2px;
    padding-top: 8px;
}

.ex-filters-row {
display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ex-search {
max-width: 280px;
    min-width: 220px;
}

.ex-active-filters {
display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
}

.ex-filter-chip {
display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    padding: 4px 8px 4px 10px;
    border-radius: 8px;
    border: 1px solid var(--control-border);
    background: var(--surface-bg);
    color: var(--text-main);
    box-shadow: 0 1px 3px var(--catalog-chip-shadow);
}

.ex-filter-chip-label {
color: var(--catalog-chip-label);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.ex-filter-chip-text {
color: var(--text-main);
    font-size: 12px;
    white-space: nowrap;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ex-filter-chip-close {
width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: var(--surface-overlay-hover);
    color: var(--text-soft);
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    cursor: pointer;
    flex: 0 0 18px;
}

.ex-filter-chip-close:hover {
background: var(--catalog-danger-soft);
    color: var(--danger-text);
}

.exercises-list {
display: flex;
    flex-direction: column;
    gap: 10px;
}

.ex-compact-toggle {
    margin-top: 8px;
}

.ui-switch {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--text-main);
    cursor: pointer;
    user-select: none;
}

.ui-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ui-switch-track {
    position: relative;
    width: 42px;
    height: 24px;
    flex: 0 0 42px;
    border-radius: 999px;
    background: var(--surface-overlay-hover);
    border: 1px solid var(--border-strong);
    transition: background-color .16s ease, border-color .16s ease;
}

.ui-switch-track::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--surface-bg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .24);
    transition: transform .16s ease;
}

.ui-switch input:checked + .ui-switch-track {
    background: var(--accent);
    border-color: var(--accent);
}

.ui-switch input:checked + .ui-switch-track::after {
    transform: translateX(18px);
}

.ui-switch input:focus-visible + .ui-switch-track {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.exercises-list.compact {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.exercise-web-card.compact {
    padding: 5px 7px;
    border-radius: 8px;
    box-shadow: none;
}

.exercise-web-card.compact .exercise-web-top {
    grid-template-columns: 30px minmax(0, 1fr) 30px;
    gap: 6px;
    align-items: center;
    padding: 0;
    border: 0;
}

.exercise-web-card.compact .exercise-web-group,
.exercise-web-card.compact .exercise-web-subtitle,
.exercise-web-card.compact .exercise-web-badges {
    display: none;
}

.exercise-web-card.compact .exercise-web-controls {
    grid-template-columns: minmax(120px, 1fr) minmax(110px, 140px);
    gap: 7px;
    margin-top: 6px;
}

.exercise-web-card.compact .exercise-web-control label {
    margin-bottom: 2px;
}

.exercise-web-card.compact .exercise-web-control .modal-select,
.exercise-web-card.compact .exercise-web-control .user-input {
    min-height: 32px;
    padding-top: 4px;
    padding-bottom: 4px;
}

.ex-progress-content {
    width: min(860px, calc(100vw - 20px));
    max-height: 92vh;
    overflow: auto;
}

.ex-progress-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.ex-progress-charts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.ex-progress-chart-card {
    min-width: 0;
    padding: 8px;
    border: 1px solid var(--graph-border-soft);
    border-radius: 10px;
    background: var(--graph-surface-faint);
}

.ex-progress-chart-title {
    margin-bottom: 4px;
    color: var(--text-main);
    font-size: 12px;
    font-weight: 700;
}

.ex-progress-chart-card canvas {
    display: block;
    width: 100%;
    height: 190px;
}

.ex-progress-card {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--border-card);
    border-radius: 10px;
    background: var(--surface-bg-soft);
}

.ex-progress-card-main {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
    color: var(--text-soft);
    font-size: 12px;
}

.ex-progress-card-main strong {
    color: var(--text-main);
}

.ex-progress-card-actions {
    display: flex;
    align-items: center;
    gap: 5px;
}

.ex-progress-icon-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--border-main);
    border-radius: 999px;
    background: var(--surface-bg);
    cursor: pointer;
}

.ex-progress-icon-btn:hover {
    background: var(--surface-bg-hover);
}

.ex-progress-icon-btn.danger {
    border-color: var(--danger-border);
}

.ex-progress-icon-btn img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.ex-progress-editor {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid var(--border-main);
    border-radius: 10px;
    background: var(--surface-bg-soft);
}

.ex-progress-editor-title {
    margin-bottom: 10px;
    color: var(--text-main);
    font-weight: 700;
}

.ex-progress-correct {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 10px 0;
}

.ex-progress-set-head,
.ex-progress-set-row {
    display: grid;
    grid-template-columns: minmax(70px, 1fr) minmax(80px, 1fr) minmax(90px, 1fr) 32px;
    gap: 7px;
    align-items: center;
}

.ex-progress-set-head {
    margin-bottom: 4px;
    color: var(--text-muted);
    font-size: 12px;
}

.ex-progress-sets {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}

.ex-progress-set-row .user-input {
    width: 100%;
    max-width: none;
}

.ex-progress-set-delete {
    width: 30px;
    height: 30px;
    border: 1px solid var(--danger-border);
    border-radius: 999px;
    color: var(--danger-text);
    background: var(--danger-bg);
    cursor: pointer;
}

@media (max-width: 680px) {
    .ex-progress-list {
        grid-template-columns: 1fr;
    }

    .ex-progress-charts {
        grid-template-columns: 1fr;
    }

    .ex-progress-card {
        align-items: flex-start;
    }

    .ex-progress-card-actions {
        flex-direction: column;
    }
}

.exercise-web-card.compact .exercise-web-star,
.exercise-web-card.compact .exercise-web-menu {
    width: 30px;
    height: 30px;
}

.exercise-web-menu.progress-changed {
    position: relative;
    border-color: var(--warning-border);
    color: var(--warning-text);
    background: var(--warning-bg);
}

.exercise-web-menu.progress-changed::after {
    content: "";
    position: absolute;
    right: -2px;
    top: -2px;
    width: 8px;
    height: 8px;
    border: 2px solid var(--surface-bg);
    border-radius: 50%;
    background: var(--warning-strong);
}

.exercise-web-card.compact .exercise-web-star img {
    width: 17px;
    height: 17px;
}

.exercise-web-card.compact .exercise-web-title {
    font-size: 14px;
    line-height: 1.15;
}

.exercise-web-card {
border: 1px solid var(--border-card);
    border-radius: 12px;
    background: var(--surface-bg);
    padding: 10px;
    box-shadow: 0 1px 4px var(--shadow-card);
}

.exercise-web-card.used {
border-color: var(--catalog-used-ring);
    background: linear-gradient(180deg, var(--catalog-used-bg), var(--catalog-popover-bg));
}

.exercise-web-card.free {
border-color: var(--catalog-free-ring-strong);
    background: linear-gradient(180deg, var(--catalog-free-bg), var(--catalog-popover-bg));
}

.exercise-web-top {
display: grid;
    grid-template-columns: 38px 34px 1fr auto 38px;
    gap: 10px;
    align-items: start;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--catalog-inner-highlight);
}

.exercise-web-menu {
    width: 38px;
    height: 38px;
    border: 1px solid var(--control-border);
    border-radius: 9px;
    background: var(--surface-bg);
    color: var(--text-main);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.ex-card-menu {
    position: fixed;
    z-index: 1200;
    width: min(250px, calc(100vw - 16px));
    padding: 6px;
    border: 1px solid var(--control-border);
    border-radius: 10px;
    background: var(--surface-bg);
    box-shadow: 0 8px 24px var(--shadow-card);
}

.ex-card-menu-item {
    width: 100%;
    border: 0;
    border-radius: 7px;
    padding: 10px 12px;
    background: transparent;
    color: var(--text-main);
    text-align: left;
    cursor: pointer;
}

.ex-card-menu-item:hover {
    background: var(--surface-overlay-hover);
}

.ex-card-menu-item:disabled {
    cursor: default;
    opacity: .55;
}

.ex-card-menu-separator {
    height: 1px;
    margin: 5px 3px;
    background: var(--control-border);
}

.ex-card-menu-pro {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ex-pro-mark {
    border-radius: 999px;
    padding: 2px 6px;
    background: linear-gradient(135deg, #0ea5e9, #2563eb);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
}

.ex-biomechanics-warning {
    margin: 10px 0;
    padding: 10px 12px;
    border: 1px solid var(--warning-border);
    border-radius: 9px;
    background: var(--warning-bg);
    color: var(--text-main);
}

.ex-biomechanics-license-note {
    margin: 10px 0;
    padding: 9px 11px;
    border-radius: 9px;
}

.ex-biomechanics-license-note.readonly {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ex-biomechanics-buy-link {
    flex: 0 0 auto;
    text-decoration: none;
}

.ex-biomechanics-preview-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 12px 0 8px;
    padding: 10px 12px;
    border: 1px solid var(--control-border);
    border-radius: 10px;
    background: var(--surface-bg-soft);
}

.ex-biomechanics-preview-label {
    color: var(--text-muted);
    font-size: 12px;
}

.ex-biomechanics-preview {
    min-height: 44px;
    justify-content: flex-start;
}

.ex-biomechanics-preview .exercise-web-badge {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
}

.ex-biomechanics-preview .exercise-web-badge img.badge-bg {
    width: 44px;
    height: 44px;
}

.ex-biomechanics-preview .exercise-web-badge img.badge-icon {
    width: 32px;
    height: 32px;
    left: 6px;
    top: 6px;
}

.ex-biomechanics-license-note.allowed {
    background: var(--success-bg);
    color: var(--success-text);
}

.ex-biomechanics-license-note.readonly {
    background: var(--surface-bg-soft);
    color: var(--text-muted);
}

.ex-biomechanics-filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 2px 0 8px;
    color: var(--text-main);
    cursor: pointer;
    user-select: none;
}

.ex-biomechanics-list {
    display: grid;
    gap: 8px;
    max-height: 54vh;
    overflow: auto;
    margin-top: 10px;
}

.ex-biomechanics-row {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(150px, 2fr) 82px minmax(150px, 1fr) 92px;
    gap: 10px;
    align-items: center;
    padding: 8px;
    border: 1px solid var(--control-border);
    border-radius: 9px;
    background: var(--surface-bg-soft);
}

.ex-biomechanics-row.changed {
    border-color: var(--warning-border);
    background: var(--warning-bg);
}

.ex-biomechanics-row-reset {
    margin: 0;
    white-space: nowrap;
}

.ex-biomechanics-name {
    color: var(--text-main);
    font-weight: 600;
}

.ex-biomechanics-number {
    width: 82px;
}

.ex-biomechanics-level {
    color: var(--text-muted);
    font-size: 12px;
}

.ex-biomechanics-muscle-section {
    display: grid;
    gap: 7px;
}

.ex-biomechanics-muscle-section + .ex-biomechanics-muscle-section {
    margin-top: 8px;
}

.ex-biomechanics-muscle-section-title {
    position: sticky;
    top: -1px;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border: 1px solid var(--control-border);
    border-radius: 9px;
    background: var(--surface-bg);
    color: var(--text-main);
    font-weight: 700;
}

.ex-biomechanics-muscle-section-title img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.ex-plan-lessons {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.ex-plan-lesson {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--control-border);
    border-radius: 9px;
    color: var(--text-main);
    background: var(--surface-bg-soft);
    cursor: pointer;
}

.ex-plan-sets {
    color: var(--text-muted);
    font-size: 12px;
}

.exercise-web-group {
width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--catalog-icon-bright);
    border: 1px solid var(--catalog-icon-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px var(--catalog-light-shadow);
}

.exercise-web-group img {
max-width: 30px;
    max-height: 30px;
    display: block;
}

.exercise-web-title-wrap {
min-width: 0;
}

.exercise-web-title {
color: var(--text-main);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.15;
    word-break: break-word;
}

.exercise-web-subtitle {
margin-top: 3px;
    color: var(--text-muted);
    font-size: 12px;
}

.exercise-web-badges {
display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.exercise-web-badge {
width: 24px;
    height: 24px;
    position: relative;
    flex: 0 0 24px;
}

.exercise-web-badge img.badge-bg {
width: 24px;
    height: 24px;
    display: block;
}

.exercise-web-badge img.badge-icon {
width: 18px;
    height: 18px;
    position: absolute;
    left: 3px;
    top: 3px;
}

.exercise-web-controls {
display: grid;
    grid-template-columns: 220px 140px 120px 50px;
    gap: 10px;
    align-items: end;
    margin-top: 10px;
}

.exercise-web-control label {
display: block;
    margin-bottom: 4px;
    color: var(--text-soft);
    font-size: 12px;
}

.exercise-web-control .modal-select,
.exercise-web-control .user-input {
max-width: none;
    width: 100%;
}

.exercise-web-reps {
display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.exercise-web-star {
width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid var(--control-border);
    background: var(--surface-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-left: 0;
    margin-top: 0;
    align-self: start;
}

.exercise-web-star img {
width: 20px;
    height: 20px;
}

.exercise-web-empty {
border: 1px dashed var(--control-border);
    border-radius: 12px;
    text-align: center;
    color: var(--text-muted);
    padding: 18px;
}

.ex-modal-content {
width: min(760px, 96vw);
}

.ex-check-grid {
display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 14px;
}

.ex-check-item {
display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-main);
}

.ex-group-check-item {
gap: 10px;
}

.ex-group-check-icon-wrap {
width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--catalog-icon-bright);
    border: 1px solid var(--catalog-icon-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px var(--catalog-light-shadow);
    flex: 0 0 28px;
}

.ex-group-check-icon {
width: 22px;
    height: 22px;
    object-fit: contain;
    display: block;
}

.ex-muscle-group-title {
display: flex;
    align-items: center;
    gap: 8px;
}

.ex-muscle-group-icon {
width: 18px;
    height: 18px;
    object-fit: contain;
    display: inline-block;
    flex: 0 0 18px;
}

.ex-muscles-tools {
display: flex;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.ex-muscles-wrap {
max-height: 360px;
    overflow: auto;
    border: 1px solid var(--control-border);
    border-radius: 10px;
    background: var(--surface-bg-soft);
    padding: 8px;
}

.ex-muscle-group-title {
color: var(--text-main);
    font-weight: 700;
    margin: 8px 0 6px;
    padding-top: 6px;
    border-top: 1px solid var(--surface-overlay-hover);
}

.ex-muscle-grid {
display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 12px;
}

@media (max-width: 900px) {
    .exercise-web-controls {
grid-template-columns: 1fr 1fr;
    }

    .exercise-web-star {
margin-left: 0;
    }
}

@media (max-width: 720px) {
    .exercise-web-top {
grid-template-columns: 38px 34px 1fr 38px;
    }

    .exercise-web-badges {
grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .exercise-web-controls {
grid-template-columns: 1fr;
    }

    .exercises-list.compact {
        grid-template-columns: 1fr;
    }

    .ex-check-grid,
    .ex-muscle-grid {
grid-template-columns: 1fr;
    }

    .ex-biomechanics-row {
        grid-template-columns: 1fr 76px;
    }

    .ex-biomechanics-preview-wrap {
        align-items: flex-start;
        flex-direction: column;
    }

    .ex-biomechanics-license-note.readonly {
        align-items: flex-start;
        flex-direction: column;
    }

    .ex-biomechanics-range,
    .ex-biomechanics-level {
        grid-column: 1 / -1;
    }
}

/* ====== Stage 8: Graph UI chrome ====== */
/* ====== Graphs hub / graph pages ====== */

.graphs-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.graphs-strength-section {
    border: 1px solid var(--border-card);
    border-radius: 12px;
    background: var(--surface-bg);
    overflow: hidden;
}

.graphs-strength-section > summary {
    padding: 14px 16px;
    color: var(--text-main);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.graphs-strength-section[open] > summary {
    border-bottom: 1px solid var(--border-card);
}

.graphs-strength-grid {
    padding: 14px;
}

.graph-card {
    border: 1px solid var(--border-card);
    border-radius: 12px;
    background: var(--surface-bg);
    padding: 12px;
    box-shadow: 0 1px 4px var(--graph-shadow);
}

.graph-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.graph-card-title {
    color: var(--text-main);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.15;
}

.graph-card-desc {
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.45;
    margin-top: 6px;
}

.graph-card-controls {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.graph-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.graph-field span {
    color: var(--text-soft);
    font-size: 12px;
}

.graph-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-main);
    font-size: 13px;
    min-height: 38px;
    margin-top: 18px;
}

.graph-card-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.graphs-empty-box {
    min-height: 220px;
    border: 1px dashed var(--control-border);
    border-radius: 12px;
    background: var(--graph-surface-faint);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    text-align: center;
}

@media (max-width: 980px) {
    .graph-card-controls {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .graph-card-controls {
        grid-template-columns: 1fr;
    }
}

/*1pm*/
.g1pm-controls-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:10px;
    margin-top:10px;
}

.g1pm-check-row{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin-top:10px;
    color:var(--text-main);
    font-size:13px;
}

.g1pm-legend{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.g1pm-legend-row{
    display:flex;
    flex-wrap:wrap;
    gap:10px 16px;
    align-items:center;
}

.g1pm-legend-row-fatigue{
    padding-top:4px;
    border-top:1px solid var(--graph-border-soft);
}

.g1pm-legend-item{
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.g1pm-legend-box{
    width:12px;
    height:12px;
    border-radius:3px;
    display:inline-block;
    flex:0 0 auto;
}

.g1pm-legend-box.main{ background:#d1d5db; }
.g1pm-legend-box.trend{ background:#9ca3af; }
.g1pm-legend-box.cycle{ background:#2e7d32; }

.g1pm-grid{
    display:grid;
    grid-template-columns:repeat(var(--g1pm-cols, 2), minmax(0, 1fr));
    gap:12px;
    align-items:stretch;
    width:100%;
}

.g1pm-card{
    position:relative;
    width:100%;
    min-width:0;
    border:1px solid var(--border-card);
    border-radius:12px;
    background:var(--surface-bg);
    padding:10px;
    box-shadow:0 1px 4px var(--graph-shadow);
    min-height:280px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

.g1pm-progress-edit {
    position: absolute;
    right: 9px;
    top: 9px;
    z-index: 2;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--border-main);
    border-radius: 999px;
    background: var(--surface-bg);
    cursor: pointer;
}

.g1pm-progress-edit:hover {
    background: var(--surface-bg-hover);
}

.g1pm-progress-edit img {
    width: 20px;
    height: 20px;
}

.g1pm-progress-edit.progress-changed {
    border-color: var(--warning-border);
    background: var(--warning-bg);
}

.g1pm-card.single{
    min-height:420px;
}

.g1pm-card-title{
    color:var(--text-main);
    font-size:15px;
    font-weight:700;
    line-height:1.2;
    margin-bottom:4px;
}

.g1pm-card.editable .g1pm-card-title,
.g1pm-card.editable .g1pm-card-sub {
    padding-right: 42px;
}

.g1pm-card-sub{
    color:var(--text-muted);
    font-size:12px;
    margin-bottom:8px;
}

.g1pm-canvas-wrap{
    position:relative;
    flex:1 1 auto;
    min-height:0;
    width:100%;
    min-width:0;
}

.g1pm-canvas{
    display:block;
    width:100% !important;
    height:100%;
    min-height:210px;
}

.g1pm-card.single .g1pm-canvas{
    min-height:340px;
}

.g1pm-tip{
    position:absolute;
    display:none;
    pointer-events:none;
    z-index:5;
    padding:6px 8px;
    border-radius:8px;
    background:var(--graph-popover-bg);
    border:1px solid var(--graph-gridline);
    color:var(--text-main);
    font-size:12px;
    line-height:1.25;
    white-space:nowrap;
    box-shadow:0 8px 20px var(--graph-shadow);
}

.g1pm-empty{
    border:1px dashed var(--control-border);
    border-radius:12px;
    background:var(--graph-surface-faint);
    color:var(--text-muted);
    text-align:center;
    padding:28px 16px;
}

@media (max-width: 1100px){
    .g1pm-controls-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px){
    .g1pm-controls-grid{
        grid-template-columns:1fr;
    }

    .g1pm-grid{
        grid-template-columns:1fr !important;
    }
}

/*gpower*/
.gpower-legend{
    display:flex;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
    margin-top:8px;
    color:var(--graph-text-soft);
    font-size:13px;
    line-height:1.3;
}

.gpower-legend-item{
    display:inline-flex;
    align-items:center;
    gap:8px;
}

.gpower-legend-box{
    width:12px;
    height:12px;
    border-radius:2px;
    flex:0 0 12px;
}

.gpower-legend-box.idx{ background:#60a5fa; }
.gpower-legend-box.growth{ background:#9ca3af; }
.gpower-legend-box.iqr{ background:#f59e0b; }

.gpower-card{
    position:relative;
    border:1px solid var(--border-card);
    border-radius:12px;
    background:var(--surface-bg);
    padding:10px;
    box-shadow:0 1px 4px var(--graph-shadow);
    overflow:hidden;
}

.gpower-canvas{
    display:block;
    width:100%;
    min-height:420px;
}

.gpower-tip{
    position:absolute;
    display:none;
    pointer-events:none;
    z-index:8;
    padding:8px 10px;
    border-radius:8px;
    background:var(--graph-popover-bg);
    border:1px solid var(--graph-gridline);
    color:var(--text-main);
    font-size:12px;
    line-height:1.25;
    white-space:pre-line;
    box-shadow:0 8px 20px var(--graph-shadow);
    max-width:min(420px, 70vw);
}

.gpower-meta{
    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:10px;
    margin-top:12px;
}

.gpower-meta-card{
    border:1px solid var(--graph-border-soft);
    border-radius:10px;
    background:var(--graph-surface-soft);
    padding:10px;
}

.gpower-meta-title{
    color:var(--text-muted);
    font-size:12px;
    margin-bottom:4px;
}

.gpower-meta-value{
    color:var(--text-main);
    font-size:18px;
    font-weight:700;
    line-height:1.15;
}

.gpower-tech{
    margin-top:12px;
    padding:10px 12px;
    border:1px solid var(--graph-border-soft);
    border-radius:10px;
    background:var(--graph-surface-faint);
    color:var(--text-muted);
    font-size:12px;
    line-height:1.45;
    white-space:pre-line;
}

.gpower-empty{
    min-height:220px;
    border:1px dashed var(--control-border);
    border-radius:12px;
    background:var(--graph-surface-faint);
    color:var(--text-muted);
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:18px;
}

@media (max-width: 980px){
    .gpower-meta{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px){
    .gpower-meta{
        grid-template-columns:1fr;
    }

    .gpower-canvas{
        min-height:340px;
    }
}

/*gwave*/
.gwave-controls-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:10px;
    margin-top:10px;
}

.gwave-check-row{
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
    margin-top:10px;
    color:var(--text-main);
    font-size:13px;
}

.gwave-legend{
    display:flex;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
    margin-top:8px;
    color:var(--graph-text-soft);
    font-size:13px;
    line-height:1.3;
}

.gwave-legend-item{
    display:inline-flex;
    align-items:center;
    gap:8px;
}

.gwave-legend-box{
    width:12px;
    height:12px;
    border-radius:2px;
    flex:0 0 12px;
}

.gwave-legend-box.main{ background:#60a5fa; }
.gwave-legend-box.min{ background:#f59e0b; }
.gwave-legend-box.max{ background:#f59e0b; }
.gwave-legend-box.mid{ background:#9ca3af; }
.gwave-legend-box.cycle{ background:#2e7d32; }
.gwave-legend-box.total{ background:#a855f7; }

.gwave-grid{
    display:grid;
    grid-template-columns:repeat(var(--gwave-cols, 3), minmax(0, 1fr));
    gap:12px;
    align-items:stretch;
    width:100%;
}

.gwave-card{
    position:relative;
    width:100%;
    min-width:0;
    border:1px solid var(--border-card);
    border-radius:12px;
    background:var(--surface-bg);
    padding:10px;
    box-shadow:0 1px 4px var(--graph-shadow);
    min-height:280px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

.gwave-card.single{
    min-height:420px;
}

.gwave-card-title{
    color:var(--text-main);
    font-size:15px;
    font-weight:700;
    line-height:1.2;
    margin-bottom:4px;
}

.gwave-card-sub{
    color:var(--text-muted);
    font-size:12px;
    margin-bottom:8px;
}

.gwave-canvas-wrap{
    position:relative;
    flex:1 1 auto;
    min-height:0;
    width:100%;
    min-width:0;
}

.gwave-canvas{
    display:block;
    width:100% !important;
    height:100%;
    min-height:210px;
}

.gwave-card.single .gwave-canvas{
    min-height:340px;
}

.gwave-tip{
    position:absolute;
    display:none;
    pointer-events:none;
    z-index:5;
    padding:6px 8px;
    border-radius:8px;
    background:var(--graph-popover-bg);
    border:1px solid var(--graph-gridline);
    color:var(--text-main);
    font-size:12px;
    line-height:1.25;
    white-space:nowrap;
    box-shadow:0 8px 20px var(--graph-shadow);
}

.gwave-empty{
    border:1px dashed var(--control-border);
    border-radius:12px;
    background:var(--graph-surface-faint);
    color:var(--text-muted);
    text-align:center;
    padding:28px 16px;
}

@media (max-width: 1100px){
    .gwave-controls-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px){
    .gwave-controls-grid{
        grid-template-columns:1fr;
    }

    .gwave-grid{
        grid-template-columns:1fr !important;
    }
}

/*gwnd*/
.gwnd-root{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.gwnd-main-card,
.gwnd-cluster-card,
.gwnd-mini-card,
.gwnd-rec-card{
    position:relative;
    border:1px solid var(--border-card);
    border-radius:12px;
    background:var(--surface-bg);
    padding:10px;
    box-shadow:0 1px 4px var(--graph-shadow);
    overflow:hidden;
}

.gwnd-main-card{
    min-height:360px;
}

.gwnd-main-title{
    color:var(--text-main);
    font-size:16px;
    font-weight:700;
    line-height:1.2;
    margin-bottom:4px;
}

.gwnd-main-sub{
    color:var(--text-muted);
    font-size:12px;
    margin-bottom:8px;
}

.gwnd-main-wrap{
    position:relative;
    width:100%;
    min-width:0;
}

.gwnd-main-canvas{
    display:block;
    width:100% !important;
    min-height:280px;
}

.gwnd-columns{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:14px;
    align-items:start;
}

.gwnd-column{
    display:flex;
    flex-direction:column;
    gap:10px;
    min-width:0;
}

.gwnd-column-head{
    color:var(--text-main);
    font-size:16px;
    font-weight:700;
    line-height:1.2;
    margin:0 0 2px;
}

.gwnd-column-sub{
    color:var(--text-muted);
    font-size:12px;
    margin:0 0 6px;
}

.gwnd-mini-title{
    color:var(--text-main);
    font-size:14px;
    font-weight:700;
    line-height:1.2;
    margin-bottom:4px;
}

.gwnd-mini-sub{
    color:var(--text-muted);
    font-size:12px;
    margin-bottom:8px;
    white-space:pre-line;
}

.gwnd-canvas-wrap{
    position:relative;
    width:100%;
    min-width:0;
}

.gwnd-canvas{
    display:block;
    width:100% !important;
    min-height:220px;
}

.gwnd-main-card .gwnd-canvas{
    min-height:280px;
}

.gwnd-tip{
    position:absolute;
    display:none;
    pointer-events:none;
    z-index:7;
    padding:6px 8px;
    border-radius:8px;
    background:var(--graph-popover-bg);
    border:1px solid var(--graph-gridline);
    color:var(--text-main);
    font-size:12px;
    line-height:1.25;
    white-space:pre-line;
    box-shadow:0 8px 20px var(--graph-shadow);
    max-width:min(420px, 70vw);
}

.gwnd-rec-card{
    background:var(--graph-surface-faint);
}

.gwnd-rec-title{
    color:var(--text-main);
    font-size:14px;
    font-weight:700;
    margin-bottom:6px;
}

.gwnd-rec-text{
    color:var(--text-soft);
    font-size:13px;
    line-height:1.45;
    white-space:pre-line;
}

.gwnd-rec-actions{
    display:flex;
    justify-content:flex-end;
    gap:8px;
    margin-top:10px;
    flex-wrap:wrap;
}

.gwnd-empty{
    border:1px dashed var(--control-border);
    border-radius:12px;
    background:var(--graph-surface-faint);
    color:var(--text-muted);
    text-align:center;
    padding:24px 16px;
}

.gwnd-legend{
    display:flex;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
    margin-top:8px;
    color:var(--graph-text-soft);
    font-size:13px;
    line-height:1.3;
}

.gwnd-legend-item{
    display:inline-flex;
    align-items:center;
    gap:8px;
}

.gwnd-legend-box{
    width:12px;
    height:12px;
    border-radius:2px;
    flex:0 0 12px;
}

.gwnd-legend-box.raw{ background:#60a5fa; }
.gwnd-legend-box.sma{ background:#9ca3af; }
.gwnd-legend-box.min{ background:#ef4444; }
.gwnd-legend-box.max{ background:#22c55e; }
.gwnd-legend-box.band{ background:#a855f7; }

@media (max-width: 1100px){
    .gwnd-columns{
        grid-template-columns:1fr;
    }
}

/* ====== Graphs hub cards (simple links) ====== */

.graph-link-card{
    display:flex;
    align-items:center;
    gap:14px;
    border:1px solid var(--border-card);
    border-radius:12px;
    background:var(--surface-bg);
    padding:12px;
    box-shadow:0 1px 4px var(--graph-shadow);
}

.graph-link-pic{
    flex:0 0 64px;
    width:64px;
    height:64px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.graph-link-pic img{
    display:block;
    width:64px;
    height:64px;
    object-fit:contain;
}

.graph-link-body{
    min-width:0;
    flex:1 1 auto;
}

.graph-link-title{
    color:var(--text-main);
    font-size:18px;
    font-weight:700;
    line-height:1.15;
}

.graph-link-desc{
    color:var(--text-muted);
    font-size:13px;
    line-height:1.45;
    margin-top:6px;
}

.graph-link-actions{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:flex-end;
}

@media (max-width: 720px){
    .graph-link-card{
        align-items:flex-start;
        flex-wrap:wrap;
    }

    .graph-link-actions{
        width:100%;
        justify-content:flex-start;
        margin-left:78px;
    }
}

@media (max-width: 520px){
    .graph-link-card{
        gap:10px;
    }

    .graph-link-pic,
    .graph-link-pic img{
        width:56px;
        height:56px;
        flex-basis:56px;
    }

    .graph-link-actions{
        margin-left:66px;
    }
}

/* Stage 9: residual-safe shared / load / ranks / legacy tails */

/* Shared application state */
#app {
    display: none;
}

#auth-status {
    margin-top: 8px;
    min-height: 18px;
    font-size: 13px;
    color: var(--warning-strong);
}

#week-info {
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--text-muted);
}

#save-status {
    min-height: 0;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    font-size: 13px;
    line-height: 1.2;
    color: var(--text-muted);
}

#save-status.success { color: var(--success-strong); }
#save-status.error   { color: var(--danger-strong); }
#save-status.clean   { color: var(--info-strong); }
#save-status.dirty   { color: var(--residual-dirty-text); }
#save-status.pending { color: var(--residual-pending-text); }

#save-status.data-revision-conflict {
    white-space: normal;
    font-weight: 700;
}

#save-status .data-revision-conflict-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: 8px;
}

#save-status .data-revision-conflict-actions .plans-status-action {
    margin-left: 0;
}

.header-link-noml {
    margin-left: 8px;
}

.tab-link-disabled,
.header-link-disabled,
.btn-link-disabled {
    opacity: 0.55;
    filter: grayscale(0.15);
}

.td-center {
    text-align: center;
}

.lesson-header-cell {
    padding: 6px 0;
    text-align: center;
    font-weight: 600;
    color: var(--text-main);
    background: var(--surface-bg-raised);
}

.placeholder-block {
    min-height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.placeholder-title {
    margin-bottom: 8px;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-main);
}

.placeholder-text {
    font-size: 13px;
    color: var(--text-muted);
}

.flash-ok,
.flash-error {
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-weight: 700;
}

.flash-ok {
    background: var(--success-bg);
    color: var(--success-text);
    border-color: var(--success-border);
}

.flash-error {
    background: var(--danger-bg);
    color: var(--danger-text);
    border-color: var(--danger-border);
}

/* Rank / qualification palette: data semantics, not theme chrome */
.rk-badge {
    font-weight: 700;
}

.rk-lt3 {
    color: var(--rank-lt3);
    font-weight: 800;
}
.rk-3    { color: var(--rank-3); }
.rk-2    { color: var(--rank-2); }
.rk-1    { color: var(--rank-1); }
.rk-kms  { color: var(--rank-kms); }
.rk-ms   { color: var(--rank-ms); }
.rk-msmk { color: var(--rank-msmk); }
.rk-no   { color: var(--rank-no); }

/* Legacy exercise-picker tail still used by plans.js */
.ex-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
}

.ex-item:hover {
    filter: brightness(1.08);
}

.ex-item.sel {
    outline: 2px solid var(--exercise-tail-selected-outline);
    background: var(--exercise-tail-selected-bg);
}

.ex-badge {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border: 1px solid var(--exercise-tail-badge-border);
    border-radius: 999px;
}

.ex-cap {
    flex: 1;
}

.ex-name {
    opacity: 0.55;
    font-size: 12px;
}

.ex-item.r1 { background: var(--exercise-tail-r1-bg); }
.ex-item.r2 { background: var(--exercise-tail-r2-bg); }
.ex-item.r3 { background: var(--exercise-tail-r3-bg); }
.ex-item.r4 { background: var(--exercise-tail-r4-bg); }

.ex-item.r1 .ex-badge { background: var(--exercise-tail-r1-badge); }
.ex-item.r2 .ex-badge { background: var(--exercise-tail-r2-badge); }
.ex-item.r3 .ex-badge { background: var(--exercise-tail-r3-badge); }
.ex-item.r4 .ex-badge { background: var(--exercise-tail-r4-badge); }

/* Load / synchronize workflow */
.load-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 12px;
}

.load-setting-panel {
    min-width: 0;
}

.load-alternative-range-panel {
    grid-column: 1 / -1;
    padding-top: 10px;
    border-top: 1px solid var(--border-main);
}

.load-alternative-range-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 6px;
}

.load-alternative-range-controls label {
    display: grid;
    gap: 4px;
}

.load-mode-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.load-mode-field {
    grid-column: 1 / -1;
}

.load-setting-hint {
    margin-top: 6px;
    color: var(--load-setting-hint-text);
    font-size: 12px;
    line-height: 1.3;
}

.load-setting-hint strong,
.load-setting-hint b {
    color: inherit;
}

.load-top-actions {
    margin-top: 10px;
}

.load-update-disclosure {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    margin-top: 8px;
}

.load-update-toggle img {
    width: 16px;
    height: 16px;
    display: block;
    flex: 0 0 16px;
    object-fit: contain;
}

.load-update-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    max-width: 420px;
}

.load-update-panel[hidden] {
    display: none;
}

.load-update-hint {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.35;
    text-align: right;
}

.load-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 14px;
    font-weight: 600;
    line-height: 1.1;
    transition:
        background 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.08s ease;
}

.load-action-btn img {
    width: 16px;
    height: 16px;
    display: block;
    flex: 0 0 16px;
    object-fit: contain;
}

.load-action-btn span {
    white-space: nowrap;
}

.load-action-btn:active {
    transform: translateY(1px);
}

.load-action-btn-create {
    background: var(--save-action-bg);
    color: var(--save-action-text);
    box-shadow: var(--load-create-ring) inset;
}

.load-action-btn-create:hover {
    background: var(--save-action-bg-hover);
}

.load-action-btn-update {
    background: var(--load-update-bg);
    color: var(--load-update-text);
    box-shadow: var(--load-update-ring) inset;
}

.load-action-btn-update:hover {
    background: var(--load-update-bg-hover);
    color: var(--load-update-text-hover);
}

.load-summary-wrap {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.load-group {
    padding: 10px;
    border: 1px solid var(--load-group-border);
    border-radius: 10px;
    background: var(--load-group-bg);
    color: var(--text-main);
    box-shadow: var(--load-group-shadow);
}

.load-group-title {
    margin-bottom: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main);
}

.load-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
    padding: 6px 8px;
    border-radius: 8px;
    background: var(--load-item-bg);
}

.load-item:last-child {
    margin-bottom: 0;
}

.load-item-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}

.load-item-text {
    font-size: 13px;
    line-height: 1.3;
    color: var(--text-main);
}

.load-item-sub {
    font-size: 12px;
    color: var(--text-muted);
}

.load-vol {
    margin-left: 6px;
    color: var(--text-muted);
}

.load-item.new-data {
    border: 1px solid var(--success-border);
    background: var(--success-bg);
}

.load-item.old-data {
    border: 1px solid var(--load-old-border);
    background: var(--load-old-bg);
}

.load-empty {
    padding: 4px 2px;
    font-size: 13px;
    color: var(--text-muted);
}

/* Remaining graph controls */
.graphs-user-row {
    display: flex;
    align-items: center;
    gap: 10px 12px;
    flex-wrap: wrap;
}

.graphs-user-label {
    margin: 0;
    flex: 0 0 auto;
    white-space: nowrap;
}

.graphs-user-select {
    width: auto;
    min-width: 180px;
    max-width: 320px;
    flex: 0 1 320px;
    padding: 6px 10px;
    font-size: 13px;
}

.graphs-user-hint {
    min-width: 0;
    margin: 0;
    flex: 1 1 240px;
    white-space: normal;
    overflow-wrap: anywhere;
}

.gwnd-btn-disabled {
    background: var(--graph-disabled-bg) !important;
    border-color: var(--graph-disabled-border) !important;
    color: var(--graph-disabled-text) !important;
    cursor: not-allowed;
    opacity: 0.8;
}

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

    .load-mode-controls {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .load-update-disclosure,
    .load-update-panel {
        align-items: stretch;
        max-width: none;
    }

    .load-update-hint {
        text-align: left;
    }

    .load-top-actions .load-action-btn {
        width: 100%;
    }

    .load-action-btn span {
        white-space: normal;
        text-align: center;
    }

    .graphs-user-row {
        align-items: stretch;
        gap: 8px;
    }

    .graphs-user-label {
        width: 100%;
    }

    .graphs-user-select {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        flex: 1 1 100%;
    }

    .graphs-user-hint {
        width: 100%;
        flex: 1 1 100%;
    }
}


/* Corrective utility: JS-controlled hidden state used by user/media UI */
.user-hidden {
    display: none !important;
}

/* =========================================================
   Stage 10: Preview workflow domain
   ========================================================= */
body.preview-page {
    overflow-x: hidden;
}

body.preview-page .page,
body.preview-page .block,
body.preview-page #app {
    min-width: 0;
}

body.preview-page .page {
    width: 100%;
    box-sizing: border-box;
}

.preview-table-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.preview-table,
.preview-table th,
.preview-table td {
    min-width: 0;
}

/* ===== preview.php ===== */

.preview-page #preview-orient-hint {
    margin-bottom: 10px;
}

.preview-table-wrap {
    overflow-x: auto;
}

.preview-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
}

.preview-col-num {
    width: 38px;
}

.preview-col-exercise {
    width: 210px;
}

.preview-col-current {
    width: 170px;
}

.preview-col-decision {
    width: 128px;
}

.preview-col-variant {
    width: 160px;
}

.preview-lesson-row td {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 700;
}

.preview-actions-row {
    justify-content: space-between;
}

.preview-row-settings {
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 11px;
}

.preview-row-settings > summary {
    width: fit-content;
    cursor: pointer;
    user-select: none;
}

.preview-row-settings-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-top: 7px;
    padding: 7px;
    border: 1px solid var(--control-border);
    border-radius: 8px;
    background: var(--preview-overlay-subtle);
}

.preview-row-settings-fields > label {
    display: grid;
    gap: 3px;
}

.preview-row-settings-fields > label > .preview-inline-select {
    width: 100%;
}

.preview-row-settings-fields > .preview-exact-settings {
    grid-column: 1 / -1;
}

.preview-exact-settings {
    width: 100%;
    font-size: 11px;
    color: var(--text-muted);
}

.preview-exact-settings summary {
    cursor: pointer;
    user-select: none;
    text-align: center;
}

.preview-exact-settings-fields {
    display: grid;
    gap: 4px;
    margin-top: 5px;
}

.preview-exact-settings-fields label {
    display: grid;
    gap: 2px;
}

.preview-exact-settings-fields .preview-inline-select {
    width: 100%;
}

.preview-inline-select {
    min-width: 52px;
    width: 52px;
    padding: 3px 4px;
    font-size: 12px;
    line-height: 1.1;
}

.preview-variant-select {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    padding: 5px 8px;
    font-size: 12px;
    line-height: 1.15;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.preview-variant-select-hidden {
    position: absolute !important;
    inset: auto auto auto auto;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

.preview-variant-trigger {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 32px;
    padding: 5px 28px 5px 8px;
    border-radius: 10px;
    border: 1px solid var(--control-border);
    background: var(--surface-bg);
    font-size: 12px;
    line-height: 1.15;
    text-align: left;
    position: relative;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.preview-variant-trigger-text {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.preview-variant-trigger-caret {
    position: absolute;
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    line-height: 1;
    opacity: 0.8;
    pointer-events: none;
}

.preview-variant-trigger:focus-visible {
    outline: 2px solid var(--preview-sync-accent);
    outline-offset: 1px;
}

.preview-var-neutral {
    color: var(--text-main);
    border-color: var(--border-card);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--border-color) 45%, transparent) inset;
    background: var(--surface-bg);
}

.preview-var-green {
    color: var(--preview-state-green-soft);
    border-color: var(--preview-green-border-strong);
    box-shadow: 0 0 0 1px var(--preview-green-ring) inset;
    background: var(--preview-green-soft);
}

.preview-var-frozen {
    color: #075985;
    border-color: #38bdf8;
    box-shadow: 0 0 0 1px color-mix(in srgb, #38bdf8 45%, transparent) inset;
    background: #e0f2fe;
}

.preview-var-violet {
    color: var(--preview-state-violet-soft);
    border-color: var(--preview-violet-border-strong);
    box-shadow: 0 0 0 1px var(--preview-violet-ring) inset;
    background: var(--preview-violet-soft);
}

.preview-var-red {
    color: var(--preview-state-red-soft);
    border-color: var(--preview-red-border-strong);
    box-shadow: 0 0 0 1px var(--preview-red-ring) inset;
    background: var(--preview-red-soft);
}

.preview-variant-select option {
    color: var(--text-main);
    background: var(--surface-bg);
}

.preview-opt-neutral {
    color: var(--text-main);
}

.preview-opt-green {
    color: var(--preview-state-green-soft);
    background: var(--preview-state-green-bg);
}

.preview-opt-violet {
    color: var(--preview-state-violet-soft);
    background: var(--preview-state-violet-bg);
}

.preview-opt-red {
    color: var(--preview-state-red-soft);
    background: var(--preview-state-red-bg);
}

.preview-decision {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 104px;
    min-width: 104px;
    min-height: 44px;
    padding: 0;
    border-radius: 0;
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    box-shadow: none;
    cursor: default;
    user-select: none;
}

.preview-decision-icon {
    font-size: 24px;
    line-height: 1;
}

.preview-decision-text {
    margin-top: 3px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.15;
    white-space: normal;
}


.preview-decision-first-target {
    width: auto;
    min-width: 0;
    height: auto;
    padding: 0 4px;
    color: #16834f;
    font-size: 14px;
    font-weight: 600;
    font-style: italic;
    line-height: 1.2;
    white-space: normal;
}

html[data-theme="dark"] .preview-decision-first-target {
    color: #73d7a5;
}


.preview-decision-carried {
    width: 104px;
    min-width: 104px;
    min-height: 44px;
    padding: 0;
}

.preview-decision-carried-icon {
    display: block;
    width: 30px;
    height: 30px;
    object-fit: contain;
    opacity: 0.78;
}

html[data-theme="dark"] .preview-decision-carried-icon {
    opacity: 0.9;
}

.preview-decision-progress {
    color: var(--success-strong);
    border-color: var(--preview-green-border);
}

.preview-decision-frozen {
    color: #0284c7;
    border-color: #38bdf8;
}

.preview-decision-frozen-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.diary-freeze-status-icon {
    display: inline-block;
    width: 22px;
    height: 22px;
    object-fit: contain;
    vertical-align: middle;
}

.set-row-status .diary-freeze-status-icon {
    width: 18px;
    height: 18px;
}

.preview-decision-repeat {
    color: var(--preview-orange);
    border-color: var(--preview-orange-border);
}

.preview-decision-hold {
    color: var(--preview-yellow);
    border-color: var(--preview-yellow-border);
}

.preview-table th,
.preview-table td {
    padding: 6px 6px;
    vertical-align: middle;
}

.preview-table th.preview-col-num,
.preview-table td:nth-child(1),
.preview-table th.preview-col-exercise,
.preview-table td:nth-child(2),
.preview-table th.preview-col-current,
.preview-table td:nth-child(3) {
    font-size: 13px;
}
.preview-col-exercise {
    font-weight: 500;
}

.preview-col-current {
    white-space: nowrap;
}
.preview-table td:nth-child(1),
.preview-table td:nth-child(3),
.preview-table td:nth-child(4),
.preview-table td:nth-child(5),
.preview-table th.preview-col-num,
.preview-table th.preview-col-current,
.preview-table th.preview-col-decision,
.preview-table th.preview-col-variant {
    text-align: center;
}

.preview-table th.preview-col-exercise,
.preview-table td:nth-child(3),
.preview-table th.preview-col-current,
.preview-table td:nth-child(5),
.preview-table th.preview-col-variant {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preview-exercise-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preview-success-modal-content {
    max-width: 420px;
}

.preview-success-text {
    margin: 12px 0 18px;
    color: var(--text-soft);
    line-height: 1.45;
}

@media (max-width: 1100px) {
    body.preview-page .page,
    body.preview-page #header-inner,
    body.preview-page #tabs-inner {
        max-width: 100%;
    }

    .preview-col-exercise {
        width: 170px;
    }

    .preview-col-current {
        width: 150px;
    }

    .preview-col-variant {
        width: 150px;
    }
}

@media (max-width: 820px) {
    .preview-table-wrap {
        overflow-x: visible;
    }

    .preview-table {
        table-layout: auto;
    }

    .preview-table thead {
        display: none;
    }

    .preview-table tbody {
        display: block;
    }

    .preview-table tbody tr {
        display: block;
    }

    .preview-table tbody tr.preview-lesson-row {
        margin-top: 10px;
    }

    .preview-table tbody tr.preview-lesson-row td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .preview-table tbody tr.preview-data-row {
        display: grid;
        grid-template-columns: 42px minmax(0, 1.35fr) minmax(0, 1fr) minmax(100px, 0.9fr) minmax(0, 1.2fr);
        grid-template-areas:
            "num capt capt cur cur"
            "dec dec var var var";
        gap: 8px 8px;
        margin: 10px 0;
        padding: 10px;
        border: 1px solid var(--control-border);
        border-radius: 12px;
        background: var(--surface-bg);
    }

    .preview-table tbody tr.preview-data-row > td {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-width: 0;
        padding: 0;
        border: none;
        text-align: left !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    .preview-table tbody tr.preview-data-row > td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 4px;
        font-size: 11px;
        line-height: 1.15;
        font-weight: 700;
        color: var(--text-muted);
    }

    .preview-table tbody tr.preview-data-row > td:nth-child(1) { grid-area: num; }
    .preview-table tbody tr.preview-data-row > td:nth-child(2) { grid-area: capt; }
    .preview-table tbody tr.preview-data-row > td:nth-child(3) { grid-area: cur; }
    .preview-table tbody tr.preview-data-row > td:nth-child(4) { grid-area: dec; }
    .preview-table tbody tr.preview-data-row > td:nth-child(5) { grid-area: var; }

    .preview-table tbody tr.preview-data-row .preview-decision {
        width: 100%;
        min-width: 0;
    }

    .preview-table tbody tr.preview-data-row > td:nth-child(1),
    .preview-table tbody tr.preview-data-row > td:nth-child(4) {
        align-items: center;
        text-align: center !important;
    }

    .preview-table tbody tr.preview-data-row > td:nth-child(1)::before,
    .preview-table tbody tr.preview-data-row > td:nth-child(4)::before {
        text-align: center;
    }

    .preview-table tbody tr.preview-data-row > td:nth-child(2) {
        font-weight: 600;
    }

    .preview-table tbody tr.preview-data-row > td:nth-child(5) .preview-variant-trigger {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .preview-table tbody tr.preview-data-row > td:nth-child(5) .preview-variant-select {
        white-space: normal;
    }
}

@media (max-width: 560px) {
    .preview-table tbody tr.preview-data-row {
        grid-template-columns: 38px minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "num capt capt"
            "cur cur cur"
            "dec dec dec"
            "var var var";
    }
}

/* ===== preview custom ===== */

.preview-custom-modal-content {
    width: min(760px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    max-height: min(92vh, 820px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
    min-height: 0;
    box-sizing: border-box;
}

.preview-custom-filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.preview-custom-filter-col {
    border: 1px solid var(--preview-border-muted);
    border-radius: 10px;
    background: var(--preview-overlay-subtle);
    padding: 8px;
}

.preview-custom-filter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    color: var(--text-main);
    font-size: 13px;
    font-weight: 600;
}

.preview-custom-filter-btns {
    display: flex;
    gap: 6px;
}

.preview-custom-check-grid {
    max-height: 140px;
    overflow: auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px 10px;
}

.preview-custom-check-grid label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-main);
    font-size: 12px;
    white-space: nowrap;
}

.preview-custom-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow: auto;
    border: 1px solid var(--control-border);
    border-radius: 10px;
    background: var(--preview-deep-bg);
    padding: 6px;
}

.preview-custom-item {
    padding: 7px 10px;
    border-radius: 8px;
    margin-bottom: 4px;
    cursor: pointer;
    border: 1px solid var(--preview-overlay-faint);
    color: var(--text-main);
    font-size: 13px;
    line-height: 1.3;
    user-select: none;
}

.preview-custom-item:last-child {
    margin-bottom: 0;
}

.preview-custom-item:hover {
    filter: brightness(1.06);
}

.preview-custom-item.selected {
    outline: 2px solid var(--preview-overlay-strong);
}

.preview-custom-item-neutral {
    color: var(--text-main);
    background: var(--surface-bg);
}

.preview-custom-item-green {
    color: var(--preview-state-green-soft);
    background: var(--preview-state-green-bg);
}

.preview-custom-item-frozen,
.preview-variant-item-frozen {
    color: #075985;
    background: #e0f2fe;
    border-color: #7dd3fc;
}

html[data-theme="dark"] .preview-var-frozen,
html[data-theme="dark"] .preview-custom-item-frozen,
html[data-theme="dark"] .preview-variant-item-frozen {
    color: #dbeafe;
    background: #12345b;
    border-color: #38bdf8;
}

.preview-variant-item-frozen.selected {
    color: #0c4a6e;
    background: #bae6fd;
}

html[data-theme="dark"] .preview-variant-item-frozen.selected {
    color: #f0f9ff;
    background: #164e7a;
}

.preview-custom-item-violet {
    color: var(--preview-state-violet-soft);
    background: var(--preview-state-violet-bg);
}

.preview-custom-item-red {
    color: var(--preview-state-red-soft);
    background: var(--preview-state-red-bg);
}

.preview-variant-modal-content {
    width: min(760px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    max-height: min(80vh, 80dvh, 820px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
    min-height: 0;
    box-sizing: border-box;
}

#preview-success-modal,
#preview-custom-modal,
#preview-variant-modal,
#diary-variant-modal {
    padding: 8px;
    box-sizing: border-box;
    overflow-x: hidden;
}

.diary-variant-limit {
    padding: 9px 11px;
    border: 1px solid var(--control-border);
    border-radius: 8px;
    background: var(--preview-overlay-faint);
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.4;
}

.preview-variant-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    border: 1px solid var(--control-border);
    border-radius: 10px;
    background: var(--preview-deep-bg);
    padding: 6px;
}

.preview-variant-item {
    position: relative;
    padding: 8px 10px;
    border-radius: 8px;
    margin-bottom: 4px;
    cursor: pointer;
    border: 1px solid var(--preview-overlay-faint);
    color: var(--text-main);
    font-size: 13px;
    line-height: 1.3;
    user-select: none;
}

.preview-other-variants-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    cursor: pointer;
}

.preview-variant-item-alternative {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    border-color: var(--preview-yellow-border-strong);
    box-shadow: 0 0 0 1px var(--preview-yellow-ring) inset;
}

.preview-variant-source {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 11px;
    text-align: right;
}

.preview-alternative-note {
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 12px;
    font-style: italic;
}

.preview-variant-item:last-child {
    margin-bottom: 0;
}

.preview-variant-item:hover {
    filter: brightness(1.06);
}

.preview-variant-item.selected {
    padding-left: 34px;
    outline: 2px solid var(--accent, #22c55e);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #22c55e) 20%, transparent);
}

.preview-variant-item.selected::before {
    content: '✓';
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--accent, #22c55e);
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
}

.preview-variant-item-green {
    color: var(--preview-state-green-soft);
    background: var(--preview-state-green-bg);
}

.preview-variant-item-violet {
    color: var(--preview-state-violet-soft);
    background: var(--preview-state-violet-bg);
}

.preview-variant-item-red {
    color: var(--preview-state-red-soft);
    background: var(--preview-state-red-bg);
}

.preview-variant-select {
    cursor: pointer;
}

@media (max-width: 860px) {
    .preview-custom-filters {
        grid-template-columns: 1fr;
    }

    .preview-custom-check-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    #preview-custom-modal,
    #preview-variant-modal,
    #diary-variant-modal {
        align-items: center;
        justify-content: center;
        padding: 8px;
        overflow-y: auto;
    }

    .preview-custom-modal-content,
    .preview-variant-modal-content {
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
        max-height: min(80vh, 80dvh);
        min-height: 0;
        margin: 0;
        box-sizing: border-box;
    }

    .preview-custom-check-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: 160px;
    }

    .preview-custom-filter-head {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .preview-custom-filter-btns {
        flex-wrap: wrap;
    }

    .preview-custom-list,
    .preview-variant-list {
        min-height: 0;
        max-height: none;
    }

    .modal-actions {
        flex-wrap: wrap;
        position: sticky;
        bottom: 0;
        z-index: 2;
        background: var(--surface-bg);
        border-top: 1px solid var(--preview-overlay-soft);
        padding-top: 8px;
        padding-bottom: 2px;
    }

    .modal-actions > button {
        flex: 1 1 140px;
    }

    .preview-variant-item-alternative {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .preview-variant-source {
        text-align: left;
    }
}

.preview-auto-custom-cell {
    background: var(--preview-yellow-soft);
}

.preview-auto-custom-fallback {
    border-color: var(--preview-yellow-border-strong) !important;
    box-shadow: 0 0 0 1px var(--preview-yellow-ring) inset !important;
}

.preview-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 6px 0 10px;
}

.preview-status-row .hint {
    margin: 0;
    flex: 1 1 auto;
}

.preview-sync-btn {
    appearance: none;
    -webkit-appearance: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    flex: 0 0 auto;
    min-width: 170px;
    height: 34px;
    padding: 0 14px;

    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: linear-gradient(180deg, var(--preview-surface-mid) 0%, var(--surface-bg) 100%);
    color: var(--preview-text-emphasis);

    cursor: pointer;
    white-space: nowrap;
    box-shadow: inset 0 1px 0 var(--preview-overlay-faint);
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

.preview-sync-btn:hover {
    border-color: var(--preview-caret);
    background: linear-gradient(180deg, var(--preview-surface-strong) 0%, var(--preview-surface-soft) 100%);
    box-shadow:
        inset 0 1px 0 var(--preview-overlay-medium),
        0 0 0 1px var(--preview-sync-soft);
}

.preview-sync-btn:active {
    transform: translateY(1px);
}

.preview-sync-btn:disabled {
    opacity: 0.55;
    cursor: default;
}

.preview-sync-btn img {
    width: 16px;
    height: 16px;
    display: block;
    flex: 0 0 16px;
    opacity: 0.95;
}

.preview-sync-btn span {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    color: var(--preview-text-emphasis);
    white-space: nowrap;
}

@media (max-width: 720px) {
    .preview-status-row {
        flex-wrap: wrap;
    }

    .preview-status-row .hint {
        width: 100%;
    }
}

/* ========================================================================== */
/* Stage 11: user / social / chat / media domain                              */
/* ========================================================================== */
/* ====== User page ====== */

.user-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.user-grid {
    display: grid;
    grid-template-columns: 180px minmax(220px, 360px);
    gap: 10px 12px;
    align-items: center;
}

.user-grid label {
    color: var(--text-main);
    font-size: 14px;
}

.user-input,
.user-select {
    width: 100%;
    max-width: 360px;
    box-sizing: border-box;
    background: var(--surface-bg-raised);
    color: var(--tab-text-hover);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 14px;
    outline: none;
}

.user-input:focus,
.user-select:focus {
    border-color: var(--page-text);
    box-shadow: 0 0 0 1px var(--accent-soft);
}

.user-radio-row {
    display: flex;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
    color: var(--text-main);
}

.user-radio-row label,
.user-check-row label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    cursor: pointer;
}

.user-progress-box {
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    padding: 12px;
    background: var(--user-panel-bg);
}

.user-progress-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--tab-text-hover);
    margin-bottom: 10px;
}

.user-check-row {
    margin-bottom: 12px;
    color: var(--text-main);
}

.user-progress-common,
.user-progress-split {
    display: grid;
    gap: 10px;
}

.user-progress-row {
    display: grid;
    grid-template-columns: 140px 120px 120px;
    gap: 10px;
    align-items: center;
}

.user-progress-row > div:first-child {
    color: var(--text-soft);
    font-size: 14px;
}

.user-progress-freeze-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.user-progress-freeze {
    width: 30px;
    height: 30px;
    padding: 2px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.user-progress-freeze img {
    display: block;
    width: 100%;
    height: 100%;
}

.user-progress-row input[readonly] {
    opacity: .8;
    cursor: default;
    background: var(--control-bg-disabled, var(--surface-bg));
}

.user-progress-row-head {
    color: var(--text-muted);
    font-size: 12px;
}

.user-hint {
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.4;
}

.user-hidden {
    display: none !important;
}

@media (max-width: 820px) {
    .user-grid {
        grid-template-columns: 1fr;
    }
    .user-progress-row {
        grid-template-columns: 1fr 1fr;
    }
    .user-progress-row > div:first-child {
        grid-column: 1 / -1;
    }
}

/* ====== User social ====== */

.user-perms-box,
.user-friends-box,
.user-log-box,
.feedback-admin-list {
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    padding: 12px;
    background: var(--user-panel-bg);
}

.user-data-consent-box {
    margin-top: 14px;
    padding: 12px;
    border: 1px solid var(--border-main);
    border-radius: 10px;
    background: var(--surface-bg-soft);
}

.user-data-consent-title {
    font-weight: 700;
    margin-bottom: 6px;
}

.user-data-consent-text,
.user-data-consent-note {
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.35;
}

.user-data-consent-text {
    margin-bottom: 10px;
}

.user-data-consent-note {
    margin-top: 8px;
}

.user-scroll-5 {
    max-height: 240px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
}

.friends-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 44px;
}

.friend-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
    padding: 9px 10px;
    border-radius: 10px;
    border: 1px solid var(--border-main);
    background: var(--surface-bg-soft);
    cursor: pointer;
    user-select: none;
}

.friend-item:hover {
    border-color: var(--action-secondary-bg-hover);
    background: var(--surface-bg);
}

.friend-item.sel {
    border-color: var(--page-text);
    box-shadow: 0 0 0 1px var(--accent-soft) inset;
}

.friend-login {
    color: var(--text-main);
    font-size: 14px;
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.friend-role {
    font-size: 12px;
    color: var(--text-soft);
    border: 1px solid var(--border-main);
    background: var(--surface-overlay-soft);
    border-radius: 999px;
    padding: 2px 8px;
    white-space: nowrap;
}

.friend-unread {
    min-width: 28px;
    text-align: center;
    font-size: 12px;
    color: var(--surface-bg-raised);
    background: var(--page-text);
    border-radius: 999px;
    padding: 2px 8px;
    font-weight: 700;
    flex: 0 0 auto;
}

.friend-unread.zero {
    color: var(--text-muted);
    background: var(--tab-bg-hover);
    font-weight: 500;
}

.user-log-list {
    max-height: 420px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.user-log-item {
    border: 1px solid var(--border-main);
    background: var(--surface-bg-soft);
    border-radius: 10px;
    padding: 9px 10px;
}

.user-log-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.user-log-type {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 600;
}

.user-log-date {
    color: var(--text-muted);
    font-size: 12px;
    white-space: nowrap;
}

.user-log-text {
    color: var(--text-soft);
    font-size: 13px;
    line-height: 1.4;
    word-break: break-word;
}

.user-chat-modal-content {
    width: min(760px, 96vw);
    max-width: 760px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.user-chat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.user-chat-messages {
    min-height: 320px;
    max-height: 56vh;
    overflow: auto;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: var(--surface-bg-soft);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.user-chat-msg {
    max-width: 78%;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--border-main);
    background: var(--surface-overlay-soft);
}

.user-chat-msg.me {
    align-self: flex-end;
    background: var(--accent-soft);
    border-color: var(--accent-soft);
}

.user-chat-msg.other {
    align-self: flex-start;
    background: var(--info-bg);
    border-color: var(--info-border);
}

.user-chat-msg-text {
    color: var(--text-main);
    font-size: 13px;
    white-space: pre-wrap;
    word-break: break-word;
}

.user-chat-msg-meta {
    color: var(--text-muted);
    font-size: 11px;
    margin-top: 4px;
}

.user-chat-input {
    resize: vertical;
    min-height: 90px;
    margin-bottom: 0;
}

.support-chat .user-chat-modal-content {
    border-color: var(--info-border);
    box-shadow: 0 18px 44px var(--shadow-card);
}

.support-chat .user-chat-messages {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--info-bg) 28%, transparent), transparent 180px),
        var(--input-bg);
}

.user-chat-topic {
    align-self: stretch;
    margin-bottom: 8px;
    border: 1px solid var(--info-border);
    border-radius: 10px;
    background: var(--info-bg);
    padding: 10px 12px;
}

.user-chat-topic-title {
    color: var(--text-main);
    font-weight: 800;
    margin-bottom: 5px;
}

.user-chat-topic-text {
    color: var(--text-main);
    font-size: 13px;
    line-height: 1.35;
    white-space: pre-wrap;
    word-break: break-word;
}

.user-chat-topic-meta {
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 12px;
}

.chat-emoji-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.chat-emoji-btn {
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    min-width: 0;
    min-height: 0;
    width: auto;
    height: auto;
    border-radius: 0;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.12s ease, filter 0.12s ease;
}

.chat-emoji-btn:hover {
    transform: scale(1.14);
    filter: brightness(1.08);
}

.chat-emoji-btn:active {
    transform: scale(1.04);
}

.chat-emoji-btn:focus {
    outline: none;
}

.chat-emoji-btn:focus-visible {
    outline: 1px solid var(--info-border);
    outline-offset: 4px;
    border-radius: 6px;
}

.user-empty {
    color: var(--text-muted);
    font-size: 13px;
    padding: 8px 2px;
}

.user-chat-msg-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.user-chat-msg-body {
    min-width: 0;
    flex: 1 1 auto;
}

.user-chat-msg-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    opacity: 0.95;
}

.user-chat-action {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--action-secondary-bg-hover);
    border-radius: 8px;
    background: var(--surface-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.user-chat-action:hover {
    filter: brightness(1.12);
}

.user-chat-action img {
    width: 15px;
    height: 15px;
    object-fit: contain;
    display: block;
}

.user-chat-action.delete {
    border-color: var(--danger-border);
    background: var(--danger-bg);
}

.user-chat-action.edit {
    border-color: var(--success-border);
    background: var(--success-bg);
}

.user-chat-input.editing {
    background: var(--tab-alert-bg);
    border-color: var(--success-strong);
    box-shadow: 0 0 0 1px var(--tab-alert-bg) inset;
}

.user-chat-edit-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px 10px;
    border: 1px solid var(--success-border);
    border-radius: 10px;
    background: var(--success-bg);
}

.user-chat-edit-label {
    color: var(--success-text);
    font-size: 13px;
    font-weight: 600;
}

.friend-tags {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    min-width: 0;
    overflow: hidden;
}

.friend-role,
.friend-tag {
    flex: 0 0 auto;
    white-space: nowrap;
}

.friend-tag {
    font-size: 11px;
    color: var(--info-text);
    border: 1px solid var(--info-border);
    background: var(--info-bg);
    border-radius: 999px;
    padding: 2px 7px;
    white-space: nowrap;
}

.friend-tag.trainer {
    color: var(--success-text);
    border-color: var(--success-border);
    background: var(--success-bg);
}

.friend-tag.athlete {
    color: var(--danger-text);
    border-color: var(--warning-border);
    background: var(--warning-bg);
}

@media (max-width: 700px) {
    .friend-item {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        padding: 10px;
    }

    .friend-main {
        min-width: 0;
        flex-wrap: nowrap;
        gap: 10px;
    }

    .friend-head {
        min-width: 0;
        width: 100%;
    }

    .friend-login {
        font-size: 15px;
    }

    .friend-badges-row {
        gap: 5px;
    }

    .friend-badge {
        width: 20px;
        height: 20px;
    }

    .friend-actions {
        justify-content: flex-end;
        gap: 6px;
        flex: 0 0 auto;
    }

    .friend-chat-icon-btn {
        width: 34px;
        height: 34px;
    }
    .friend-avatar-wrap {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }
    .friend-icon-btn {
        width: 32px;
        height: 32px;
    }

    .friend-unread {
        min-width: 24px;
        padding: 2px 6px;
        font-size: 11px;
    }

    .user-trainer-box {
        gap: 8px;
    }

    .user-chat-msg {
        max-width: 92%;
    }
}

.user-social-toolbar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}

.user-social-login {
    max-width: 360px;
}

.user-social-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.user-trainer-box {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border-main);
    border-radius: 10px;
    background: var(--surface-bg-soft);
    flex-wrap: wrap;
}

.user-trainer-label {
    color: var(--text-soft);
    font-size: 13px;
    flex: 0 0 auto;
}

.user-trainer-value {
    color: var(--text-main);
    font-size: 14px;
    font-weight: 700;
    min-width: 0;
    flex: 0 1 auto;
    word-break: break-word;
}

.user-trainer-icon-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 10px;
    border: 1px solid var(--info-border);
    background: var(--info-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 0 0 auto;
}

.user-trainer-icon-btn:hover {
    filter: brightness(1.08);
}

.user-trainer-icon-btn img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    display: block;
}

.user-trainer-icon-btn-remove {
    border-color: var(--success-border);
    background: var(--success-bg);
}

.user-trainer-icon-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.user-log-status-row {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.user-log-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--action-secondary-bg-hover);
    background: var(--tab-bg-hover);
    color: var(--text-main);
    font-size: 12px;
    font-weight: 700;
}

.user-log-action {
    min-width: 34px;
    height: 30px;
    border: 1px solid var(--action-secondary-bg-hover);
    border-radius: 8px;
    background: var(--surface-bg);
    color: var(--text-main);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}

.user-log-action:hover {
    filter: brightness(1.12);
}

.user-log-action.yes {
    border-color: var(--success-border);
    background: var(--tab-alert-bg);
}

.user-log-action.no {
    border-color: var(--danger-border);
    background: var(--danger-bg);
}

.graphs-user-row {
    display: flex;
    align-items: center;
    gap: 10px 12px;
    flex-wrap: wrap;
}

.graphs-user-label {
    margin: 0;
    white-space: nowrap;
    flex: 0 0 auto;
}

.graphs-user-select {
    flex: 0 1 320px;
    min-width: 180px;
    max-width: 320px;
    width: auto;
    padding: 6px 10px;
    font-size: 13px;
}

.graphs-user-hint {
    margin: 0;
    min-width: 0;
    flex: 1 1 240px;
    white-space: normal;
    overflow-wrap: anywhere;
}

@media (max-width: 700px) {
    .graphs-user-row {
        align-items: stretch;
        gap: 8px;
    }

    .graphs-user-label {
        width: 100%;
    }

    .graphs-user-select {
        flex: 1 1 100%;
        max-width: 100%;
        min-width: 0;
        width: 100%;
    }

    .graphs-user-hint {
        flex: 1 1 100%;
        width: 100%;
    }
}

.gwnd-btn-disabled {
    background: var(--border-strong) !important;
    border-color: var(--border-strong) !important;
    color: var(--text-muted) !important;
    cursor: not-allowed;
    opacity: 0.8;
}

body.trainer-mode {
    color: var(--info-text);
}

body.trainer-mode::before {
    opacity: 0.22;
    filter: saturate(0.9) brightness(1.08);
}

body.trainer-mode::after {
    background:
        repeating-linear-gradient(
            45deg,
            var(--header-link-bg) 0px,
            var(--header-link-bg) 40px,
            var(--surface-bg-raised) 40px,
            var(--surface-bg-raised) 80px
        );
}

body.trainer-mode #header-bar {
    background: var(--surface-bg-raised);
    border-bottom-color: var(--action-secondary-bg-hover);
}

body.trainer-mode #tabs-bar {
    background: var(--surface-bg-raised);
    border-bottom-color: var(--action-secondary-bg-hover);
}

body.trainer-mode .gym-tabs-bar {
    background: var(--surface-bg-raised);
    border-bottom-color: var(--action-secondary-bg-hover);
}

body.trainer-mode #topbar {
    background: var(--border-soft);
    border-bottom-color: var(--action-secondary-bg-hover);
}

body.trainer-mode .block {
    background: linear-gradient(180deg, var(--surface-bg-raised) 0%, var(--surface-bg-raised) 100%);
    border-color: var(--action-secondary-bg-hover);
    box-shadow: 0 1px 6px var(--modal-backdrop-bg);
}

body.trainer-mode #auth-panel {
    background: linear-gradient(180deg, var(--surface-bg-raised) 0%, var(--surface-bg-raised) 100%);
    border-color: var(--action-secondary-bg-hover);
}

body.trainer-mode .week-title,
body.trainer-mode .block h2,
body.trainer-mode #header-title {
    color: var(--info-text);
}

body.trainer-mode .hint,
body.trainer-mode .muted,
body.trainer-mode #week-info,
body.trainer-mode #save-status,
body.trainer-mode .graph-card-desc,
body.trainer-mode .graph-field span {
    color: var(--header-link-text);
}

body.trainer-mode .tab-link {
    color: var(--header-link-text-hover);
}

body.trainer-mode .tab-link:hover {
    color: var(--tab-text-hover);
    background: var(--info-bg);
}

body.trainer-mode .tab-link.active {
    color: var(--header-link-text-hover);
    border-bottom-color: var(--header-link-text);
    background: var(--info-bg);
}

body.trainer-mode .header-link {
    background: var(--border-soft);
    border-color: var(--action-secondary-bg-hover);
    color: var(--header-link-text-hover);
}

body.trainer-mode .header-link:hover {
    color: var(--info-text);
    border-color: var(--text-disabled);
}

body.trainer-mode .modal-content {
    background: var(--border-soft);
    border-color: var(--action-secondary-bg-hover);
}

body.trainer-mode .modal-select,
body.trainer-mode .modal-input,
body.trainer-mode .user-input,
body.trainer-mode .user-select,
body.trainer-mode #training-select,
body.trainer-mode .set-inputs input,
body.trainer-mode .set-inputs select.set-rir,
body.trainer-mode .user-log-range,
body.trainer-mode .trainer-switch-wrap select {
    background: var(--border-soft);
    border-color: var(--text-disabled);
    color: var(--tab-text-hover);
}

body.trainer-mode .data-table tbody tr:nth-child(even) {
    background: var(--tab-bg-hover);
}

body.trainer-mode .data-table tbody tr:hover {
    background: var(--info-bg);
}

.trainer-switch-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.trainer-switch-wrap label {
    color: var(--text-muted);
    font-size: 12px;
}

.trainer-switch-wrap select {
    min-width: 220px;
    background: var(--surface-bg-strong);
    color: var(--text-main);
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 13px;
}

.trainer-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    color: var(--info-text);
    background: var(--info-bg);
    border: 1px solid var(--info-border);
}

.tab-link-disabled,
.header-link-disabled,
.btn-link-disabled {
    opacity: 0.55;
    filter: grayscale(0.15);
}

.user-social-actions .btn-save-demo {
    border-radius: 10px;
}

.btn-social-friend {
    background: var(--info-bg);
    border-color: var(--info-border);
    color: var(--info-text);
}

.btn-social-athlete {
    background: var(--warning-bg);
    border-color: var(--warning-border);
    color: var(--danger-text);
}

.btn-social-trainer {
    background: var(--tab-alert-bg);
    border-color: var(--success-border);
    color: var(--success-text);
}

.user-friends-box,
.user-log-box {
    background: linear-gradient(180deg, var(--tabs-bg), var(--tabs-bg));
}

.friend-item {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    padding: 10px 12px;
    background: linear-gradient(180deg, var(--surface-bg), var(--header-link-bg));
    border-color: var(--border-main);
}

.friend-item.relation-athlete {
    border-left: 4px solid var(--success-strong);
}

.friend-item.relation-trainer {
    border-left: 4px solid var(--warning-strong);
}

.friend-item.relation-friend {
    border-left: 4px solid var(--action-primary-bg);
}

.friend-head {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    overflow: hidden;
}

.friend-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    justify-content: flex-end;
    flex: 0 0 auto;
}

.friend-chat-icon-btn {
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 10px;
    border: 1px solid var(--info-border);
    background: var(--info-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 0 0 auto;
}

.friend-chat-icon-btn:hover {
    filter: brightness(1.08);
}

.friend-chat-icon-btn img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    display: block;
}

.friend-icon-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 10px;
    border: 1px solid var(--action-secondary-bg-hover);
    background: var(--surface-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 0 0 auto;
}

.friend-icon-btn:hover {
    filter: brightness(1.08);
}

.friend-icon-btn img {
    width: 17px;
    height: 17px;
    object-fit: contain;
    display: block;
}

.friend-icon-btn.remove-friend {
    border-color: var(--info-border);
    background: var(--info-bg);
}

.friend-icon-btn.remove-athlete {
    border-color: var(--success-border);
    background: var(--success-bg);
}

.friend-icon-btn.remove-trainer {
    border-color: var(--success-border);
    background: var(--success-bg);
}

.user-log-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.user-log-range {
    min-width: 150px;
    background: var(--header-link-bg);
    color: var(--text-main);
    border: 1px solid var(--border-main);
    border-radius: 10px;
    padding: 6px 10px;
    font-size: 13px;
}

.feedback-admin-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.feedback-admin-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.feedback-admin-tab {
    border: 1px solid var(--border-main);
    border-radius: 999px;
    background: var(--header-link-bg);
    color: var(--text-main);
    padding: 7px 12px;
    font-weight: 700;
    cursor: pointer;
}

.feedback-admin-tab.active {
    border-color: var(--action-primary-bg);
    color: var(--action-primary-bg);
    background: var(--surface-bg);
}

.feedback-admin-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
    max-height: 420px;
    overflow: auto;
}

.feedback-admin-item {
    border: 1px solid var(--border-main);
    border-radius: 8px;
    background: var(--surface-bg-soft);
    padding: 8px 10px;
}

.feedback-admin-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 5px;
}

.feedback-admin-user {
    color: var(--text-main);
    font-weight: 800;
}

.feedback-admin-date,
.feedback-admin-context {
    color: var(--text-muted);
    font-size: 12px;
}

.feedback-admin-message {
    color: var(--text-main);
    line-height: 1.25;
    white-space: pre-wrap;
    word-break: break-word;
}

.feedback-admin-context {
    margin-top: 5px;
}

.feedback-admin-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 7px;
    flex-wrap: wrap;
}

.feedback-admin-btn {
    min-height: 28px;
    padding: 5px 10px;
}

.user-log-item {
    background: linear-gradient(180deg, var(--surface-bg), var(--header-link-bg));
    border-color: var(--border-main);
    box-shadow: inset 0 1px 0 var(--surface-overlay-subtle);
}

.user-log-item:nth-child(odd) {
    background: linear-gradient(180deg, var(--surface-bg), var(--surface-bg));
}

.friend-login {
    min-width: 0;
    max-width: 100%;
    font-size: 16.8px;
    font-weight: 700;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 0 1 auto;
}

.friend-login-row {
    width: 100%;
    min-width: 0;
}

.friend-badges-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
}

.friend-badge {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.friend-badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.friend-login.role-admin {
    color: var(--danger-text);
}

.friend-login.role-trainer {
    color: var(--warning-strong);
}

.friend-login.role-athlete {
    color: var(--success-strong);
}

.friend-role,
.friend-tag {
    flex: 0 0 auto;
}

.friend-chat-icon-btn,
.friend-unread,
.friend-icon-btn {
    align-self: center;
}

.friend-main {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    overflow: hidden;
}
.friend-profile-link {
    color: inherit;
    text-decoration: none;
}

.friend-profile-link:hover {
    filter: brightness(1.08);
}

.friend-avatar-link {
    display: inline-flex;
    flex: 0 0 auto;
}

.friend-login.friend-profile-link {
    display: inline-block;
    max-width: 100%;
}
.friend-avatar-wrap {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid var(--surface-overlay-hover);
    background: var(--surface-bg-raised);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.friend-avatar {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.user-pl-panel {
    margin-bottom: 6px;
    padding: 10px 12px 12px;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    background: var(--user-panel-bg);
}

.user-pl-panel-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 10px;
}

.user-pl-status {
    margin-top: 8px;
}

.user-pl-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
}

.user-pl-badge {
    position: relative;
    width: 86px;
    height: 86px;
    padding: 8px;
    border: 1px solid var(--surface-overlay-hover);
    border-radius: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.12s ease, border-color 0.12s ease, filter 0.12s ease;
    box-shadow: inset 0 0 0 1px var(--modal-backdrop-bg);
}

.user-pl-badge:hover {
    transform: translateY(-1px);
    border-color: var(--surface-overlay-hover);
    filter: brightness(1.06);
}

html[data-theme="light"] .user-pl-badge-no-progress {
    background: #2b3037 !important;
    border-color: #555d67;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.nutrition-achievement-badge{cursor:pointer}
.nutrition-achievement-badge .user-pl-badge-pic{filter:drop-shadow(0 2px 2px rgba(0,0,0,.38))}
.user-pl-modal.is-nutrition-achievement .user-pl-modal-dialog{width:min(700px,96vw);padding:12px 14px}
.user-pl-modal.is-nutrition-achievement .user-pl-modal-body{gap:10px}
.user-pl-modal-section.nutrition-achievement-modal-hero{display:grid;grid-template-columns:124px 1fr 1fr;gap:12px;align-items:center}
.nutrition-achievement-modal-hero>img{width:116px;height:116px;padding:14px;box-sizing:border-box;object-fit:contain;border:1px solid var(--border-soft);border-radius:20px;background:var(--achievement-grade-color,var(--user-panel-bg));box-shadow:inset 0 0 0 1px var(--modal-backdrop-bg),0 5px 16px rgba(0,0,0,.16)}
.nutrition-achievement-modal-hero>div{text-align:center;padding-left:8px}
.nutrition-achievement-modal-hero strong{font-size:22px}
.nutrition-history-value{display:flex;align-items:center;justify-content:center;gap:9px;min-height:34px}
.nutrition-history-check{width:30px;height:30px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 2px 7px rgba(0,0,0,.24);flex:0 0 auto}
.nutrition-history-check img{width:24px;height:24px;object-fit:contain;display:block}
.nutrition-achievement-levels{margin:8px 0}
.nutrition-achievement-levels table{width:100%;font-size:13px}
.nutrition-achievement-levels th,.nutrition-achievement-levels td{padding:6px 8px}
.nutrition-achievement-levels tr.is-current{outline:2px solid var(--accent,#3b82f6);outline-offset:-2px;background:rgba(59,130,246,.12)}
.nutrition-achievement-levels tr.is-result:not(.is-current){outline:2px dashed rgba(245,158,11,.9);outline-offset:-2px;background:rgba(245,158,11,.10)}
.nutrition-achievement-levels tr.is-best td:last-child{font-weight:700}
.users-public-owner-context{margin:10px 0;padding:9px 11px;border:1px solid rgba(80,120,170,.24);border-radius:10px;background:rgba(80,120,170,.06)}
.users-nutrition-achievements-panel{margin-top:12px}
.users-nutrition-permission-link{display:inline-flex;margin-top:8px;text-decoration:none}
.nutrition-level-dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:7px;vertical-align:-1px;border:1px solid rgba(0,0,0,.28)}
.nutrition-level-dot.level-1{background:#646464}.nutrition-level-dot.level-2{background:#b4b4b4}.nutrition-level-dot.level-3{background:#50be6e}.nutrition-level-dot.level-4{background:#4682b4}.nutrition-level-dot.level-5{background:#965ad2}.nutrition-level-dot.level-6{background:#ff8c00}
.nutrition-position-current,.nutrition-position-best{display:inline-block;border-radius:999px;padding:2px 6px;margin:1px 3px;font-size:11px;background:rgba(59,130,246,.18)}
.nutrition-position-best{background:rgba(255,140,0,.18)}
.nutrition-position-result,.nutrition-position-timeout{display:inline-block;border-radius:999px;padding:2px 6px;margin:1px 3px;font-size:11px;background:rgba(245,158,11,.18)}
.nutrition-position-timeout{background:rgba(220,38,38,.16);color:#b91c1c;font-weight:700}
html[data-theme="dark"] .nutrition-position-timeout{color:#fca5a5}
.nutrition-achievement-period{font-size:12px;opacity:.75;margin:-2px 2px 8px}
.nutrition-achievement-rules{font-size:13px;line-height:1.45}
.nutrition-achievement-rules p{margin:6px 0}

@media (max-width: 640px){
    .user-pl-modal.is-nutrition-achievement{padding:8px}
    .user-pl-modal.is-nutrition-achievement .user-pl-modal-dialog{width:98vw;padding:10px}
    .user-pl-modal-section.nutrition-achievement-modal-hero{grid-template-columns:92px 1fr;gap:10px}
    .nutrition-achievement-modal-hero>img{width:88px;height:88px;padding:10px;border-radius:16px;grid-row:1 / span 2}
    .nutrition-achievement-modal-hero>div{padding-left:0;text-align:left}
    .nutrition-history-value{justify-content:flex-start}
}

.user-pl-badge-pic-wrap {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-pl-badge-pic {
    max-width: 58px;
    max-height: 58px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 1px 1px var(--modal-backdrop-bg));
}

.user-pl-badge-check {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px var(--modal-backdrop-bg);
    overflow: hidden;
}

.user-pl-badge-check img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    display: block;
}

.user-pl-modal {
    position: fixed;
    inset: 0;
    z-index: 10020;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.user-pl-modal-backdrop {
    position: absolute;
    inset: 0;
    background: var(--modal-backdrop-bg);
}

.user-pl-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(980px, 96vw);
    max-height: 92vh;
    overflow: auto;
    background: var(--surface-bg);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    box-shadow: 0 20px 60px var(--modal-backdrop-bg);
    padding: 12px;
}

.user-pl-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.user-pl-modal-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-main);
}

.user-pl-modal-close {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: var(--surface-bg-raised);
    color: var(--text-main);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.user-pl-modal-close:hover {
    background: var(--border-soft);
}

.user-pl-modal-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.user-pl-modal-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.user-pl-modal-subtitle {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
}

.user-pl-achievement-note {
    margin-top: 2px;
    padding: 9px 11px;
    border: 1px solid var(--border-soft);
    border-radius: 9px;
    background: var(--user-panel-bg);
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.user-pl-calculator-link {
    display: table;
    margin-top: 6px;
    color: var(--link-color);
    font-weight: 700;
    text-decoration: none;
}

.user-pl-calculator-link:hover {
    text-decoration: underline;
}

.user-pl-table-wrap {
    overflow-x: auto;
}

.user-pl-table {
    min-width: 700px;
}

.user-pl-norms-table {
    border-collapse: separate;
    border-spacing: 0;
    min-width: 760px;
}

.user-pl-norms-table thead th {
    color: var(--user-rank-head-text);
    font-size: 12px;
    font-weight: 700;
    background: var(--user-rank-head-bg);
}

.user-pl-norms-table .user-pl-rank-col {
    text-align: left !important;
    padding-left: 12px;
}

.user-pl-norms-table .user-pl-weight-col {
    text-align: center !important;
}

.user-pl-norms-table .user-pl-weight-col-current {
    background: var(--user-rank-current-col-bg);
    box-shadow: inset 0 0 0 1px var(--user-rank-current-col-ring);
}

.user-pl-norms-table .user-pl-rank-name {
    text-align: left !important;
    padding-left: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.user-pl-norms-table .user-pl-norm-cell {
    text-align: center !important;
    font-weight: 700;
    color: var(--user-rank-norm-text);
}

.user-pl-rank-row-r3 td {
    background: var(--user-rank-r3-bg);
}

.user-pl-rank-row-r2 td {
    background: var(--user-rank-r2-bg);
}

.user-pl-rank-row-r1 td {
    background: var(--user-rank-r1-bg);
}

.user-pl-rank-row-rkms td {
    background: var(--user-rank-kms-bg);
}

.user-pl-rank-row-rms td {
    background: var(--user-rank-ms-bg);
}

.user-pl-rank-row-rmsmk td {
    background: var(--user-rank-msmk-bg);
}

.user-pl-rank-row-rno td {
    background: var(--user-rank-none-bg);
}

.user-pl-rank-row td {
    transition: background 0.12s ease, box-shadow 0.12s ease;
}

.user-pl-rank-row td:first-child {
    border-left: 1px solid var(--user-rank-row-border);
}

.user-pl-rank-row td:last-child {
    border-right: 1px solid var(--user-rank-row-border);
}

.user-pl-rank-row:first-child td {
    border-top: 1px solid var(--user-rank-row-border);
}

.user-pl-rank-row:last-child td {
    border-bottom: 1px solid var(--user-rank-row-border);
}

.user-pl-norm-cell-current,
.user-pl-weight-col-current {
    position: relative;
}

.user-pl-rank-row td.user-pl-norm-cell-current {
    box-shadow: inset 0 0 0 9999px var(--user-rank-current-overlay);
}

.user-pl-rank-row td.user-pl-hit-left {
    color: var(--user-rank-hit-left-text);
    background:
        linear-gradient(0deg, var(--user-rank-hit-left-bg), var(--user-rank-hit-left-bg)),
        inherit;
    box-shadow: inset 0 0 0 1px var(--user-rank-hit-left-border);
}

.user-pl-rank-row td.user-pl-hit-current {
    color: var(--user-rank-hit-current-text);
    background:
        linear-gradient(0deg, var(--user-rank-hit-current-bg), var(--user-rank-hit-current-bg)),
        inherit;
    box-shadow: inset 0 0 0 1px var(--user-rank-hit-current-border);
}

.user-pl-rank-row td.user-pl-hit-right {
    color: var(--user-rank-hit-right-text);
    background:
        linear-gradient(0deg, var(--user-rank-hit-right-bg), var(--user-rank-hit-right-bg)),
        inherit;
    box-shadow: inset 0 0 0 1px var(--user-rank-hit-right-border);
}

.user-pl-inline-check {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-right: 4px;
}

.user-pl-inline-check img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    display: block;
}

/* ====== User media tabs ====== */


.user-profile-layout {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    min-width: 0;
}

.user-profile-sidebar {
    position: sticky;
    top: 76px;
    min-width: 0;
}

.user-profile-content {
    min-width: 0;
}

.user-profile-sidebar .user-media-avatar-actions {
    width: 150px;
}

.user-profile-sidebar .user-media-avatar-actions .plans-buffer-row {
    display: block;
}

.user-profile-sidebar .user-media-avatar-actions .btn-save-demo {
    width: 100%;
}

.user-media-subtabs-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-main);
}

.user-media-subtab-btn {
    min-height: 32px;
    padding: 0 13px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--surface-bg);
    color: var(--text-soft);
    cursor: pointer;
    font-size: 13px;
}

.user-media-subtab-btn:hover {
    filter: brightness(1.08);
}

.user-media-subtab-btn.active {
    color: var(--page-text);
    border-color: var(--warning-border);
    background: var(--accent-soft);
}

.user-media-subtab-pane {
    min-width: 0;
}

.user-media-tabs-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.user-media-tab-btn {
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--surface-bg);
    color: var(--text-soft);
    cursor: pointer;
    font-size: 13px;
}

.user-media-tab-btn:hover {
    filter: brightness(1.08);
}

.user-media-tab-btn.active {
    color: var(--page-text);
    border-color: var(--warning-border);
    background: var(--accent-soft);
}

.user-media-tab-pane {
    min-width: 0;
}

.user-main-top {
    display: flex;
    align-items: stretch;
    gap: 14px;
    min-width: 0;
}

.user-main-avatar {
    width: 150px;
    min-width: 150px;
    height: 150px;
    padding: 0;
    border: 1px solid var(--border-main);
    border-radius: 16px;
    background: var(--surface-bg);
    overflow: hidden;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px var(--surface-overlay-soft);
}

.user-main-avatar:hover {
    filter: brightness(1.06);
    border-color: var(--action-secondary-bg-hover);
}

.user-main-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: var(--surface-overlay-soft);
}

.user-main-side {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.user-media-avatar-actions {
    margin-top: 0;
}

.user-media-images-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
}

.user-media-videos-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}
.user-media-pane-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0 0 10px;
}

.user-media-add-btn {
    min-height: 36px;
    padding: 0 14px 0 10px;
    border: 1px solid var(--action-secondary-bg);
    border-radius: 7px;
    background: var(--action-secondary-bg);
    color: var(--action-secondary-text);
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 1px 2px var(--shadow-color-soft);
}

.user-media-add-btn img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    display: block;
}

.user-media-add-btn:hover {
    filter: brightness(1.08);
    background: var(--action-secondary-bg-hover);
    border-color: var(--action-secondary-bg-hover);
}
.user-media-add-tile {
    display: none !important;
}

.user-media-image-card {
    position: relative;
    border: 1px solid var(--border-main);
    border-radius: 12px;
    background: var(--surface-bg);
    padding: 8px;
    cursor: pointer;
    overflow: hidden;
    display: inline-flex;
    flex-direction: column;
    gap: 8px;
}

.user-media-image-card:hover {
    filter: brightness(1.05);
}

.user-media-image-preview {
    height: 152px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 10px;
    background: var(--header-link-bg);
}

.user-media-image-preview-img {
    display: block;
    height: 152px;
    width: auto;
    max-width: none;
    object-fit: contain;
}

.user-media-image-meta {
    font-size: 11px;
    line-height: 1.35;
    color: var(--text-muted);
}

.user-media-image-meta-line {
    white-space: nowrap;
}

.user-media-delete-btn {
    position: absolute;
    right: 6px;
    top: 6px;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    background: var(--modal-backdrop-bg);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
}

.user-media-delete-btn:hover {
    background: var(--danger-bg);
}

.user-media-delete-btn img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    display: block;
}

.user-media-video-card {
    position: relative;
    border: 1px solid var(--border-main);
    border-radius: 12px;
    background: var(--surface-bg);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.user-media-video-frame-wrap {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    border-radius: 10px;
    overflow: hidden;
    background: var(--header-link-bg);
}

.user-media-video-frame,
.user-media-video-fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.user-media-video-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 13px;
}

.user-media-video-meta {
    min-width: 0;
}

.user-media-video-title {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    word-break: break-word;
}

.user-media-video-date {
    color: var(--text-muted);
    font-size: 11px;
    margin-top: 4px;
}

.user-avatar-modal-content {
    width: min(520px, 96vw);
}

.user-avatar-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.user-avatar-editor-wrap {
    display: flex;
    justify-content: center;
    margin: 10px 0 8px;
}

.user-avatar-editor-canvas {
    width: min(320px, 78vw);
    height: auto;
    max-width: 320px;
    border-radius: 18px;
    background:
        linear-gradient(45deg, var(--surface-overlay-hover) 25%, transparent 25%, transparent 75%, var(--surface-overlay-hover) 75%, var(--surface-overlay-hover)),
        linear-gradient(45deg, var(--surface-overlay-hover) 25%, transparent 25%, transparent 75%, var(--surface-overlay-hover) 75%, var(--surface-overlay-hover));
    background-size: 18px 18px;
    background-position: 0 0, 9px 9px;
    border: 1px solid var(--border-main);
    touch-action: none;
}

.user-avatar-zoom-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-avatar-zoom-row .btn-save-demo {
    min-width: 42px;
    padding-left: 0;
    padding-right: 0;
}

.user-avatar-zoom {
    flex: 1 1 auto;
}

.user-media-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10040;
    background: var(--tabs-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.user-media-lightbox-inner {
    position: relative;
    max-width: min(96vw, 1200px);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.user-media-lightbox-img {
    display: block;
    max-width: 100%;
    max-height: calc(92vh - 48px);
    border-radius: 10px;
    object-fit: contain;
    background: var(--surface-bg);
}

.user-media-lightbox-title {
    color: var(--text-soft);
    font-size: 13px;
    text-align: center;
}

.user-media-lightbox-close {
    position: absolute;
    right: -6px;
    top: -6px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 999px;
    background: var(--modal-backdrop-bg);
    color: var(--text-inverse);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.user-media-link-modal-content {
    width: min(520px, 94vw);
}

@media (max-width: 820px) {
    .user-profile-layout {
        grid-template-columns: 1fr;
    }

    .user-profile-sidebar {
        position: static;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 12px;
    }

    .user-profile-sidebar .user-main-left-col {
        width: 100%;
        align-items: center;
    }

    .user-profile-sidebar .user-media-avatar-actions {
        width: 132px;
        margin: 0 auto;
    }

    .user-main-top {
        flex-direction: column;
    }

    .user-main-avatar {
        width: 132px;
        min-width: 132px;
        height: 132px;
        align-self: center;
    }

    .user-media-videos-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .user-media-images-grid {
        gap: 10px;
    }

    .user-media-image-preview {
        height: 132px;
    }

    .user-media-image-preview-img {
        height: 132px;
    }

    .user-media-add-tile {
        width: 120px;
        min-height: 132px;
    }
}

/* ====== users.php public page ====== */

.users-public-avatar {
    cursor: default;
}

.users-public-avatar:hover {
    filter: none;
    border-color: var(--border-main);
}

.users-public-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 2px;
}

.users-public-login {
    font-size: 28px;
    line-height: 1.1;
    font-weight: 800;
    color: var(--tab-text-hover);
    word-break: break-word;
}

.users-public-name {
    font-size: 15px;
    line-height: 1.25;
    color: var(--text-soft);
    word-break: break-word;
}

.users-public-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 8px;
}

.users-public-meta-item {
    border: 1px solid var(--surface-overlay-hover);
    border-radius: 9px;
    background: var(--surface-overlay-soft);
    padding: 7px 9px;
    min-width: 0;
}

.users-public-meta-label {
    display: block;
    color: var(--text-muted);
    font-size: 11px;
    margin-bottom: 2px;
    line-height: 1.1;
}

.users-public-meta-item strong {
    color: var(--tab-text-hover);
    font-size: 14px;
    line-height: 1.1;
    word-break: break-word;
}

.users-public-rank-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: stretch;
}

.users-public-rank-badge {
    min-width: 120px;
    max-width: 180px;
    border: 1px solid var(--surface-overlay-hover);
    border-radius: 12px;
    padding: 10px 12px;
    background: var(--surface-overlay-soft);
    box-shadow: inset 0 0 0 1px var(--modal-backdrop-bg);
}

.users-public-rank-badge.rk-3 {
    background: var(--tab-alert-bg);
}

.users-public-rank-badge.rk-2 {
    background: var(--surface-overlay-hover);
}

.users-public-rank-badge.rk-1 {
    background: var(--success-border);
}

.users-public-rank-badge.rk-kms {
    background: var(--modal-backdrop-bg);
}

.users-public-rank-badge.rk-ms {
    background: var(--modal-backdrop-bg);
}

.users-public-rank-badge.rk-msmk {
    background: var(--danger-border);
}

.users-public-rank-name {
    color: var(--text-main);
    font-size: 12px;
    line-height: 1.3;
    min-height: 30px;
    word-break: break-word;
}

.users-public-rank-val {
    margin-top: 6px;
    font-size: 20px;
    line-height: 1;
    font-weight: 800;
}

.users-public-rank-badge.rk-3 .users-public-rank-val { color: var(--text-disabled); }
.users-public-rank-badge.rk-2 .users-public-rank-val { color: var(--text-muted); }
.users-public-rank-badge.rk-1 .users-public-rank-val { color: var(--success-strong); }
.users-public-rank-badge.rk-kms .users-public-rank-val { color: var(--text-disabled); }
.users-public-rank-badge.rk-ms .users-public-rank-val { color: var(--text-muted); }
.users-public-rank-badge.rk-msmk .users-public-rank-val { color: var(--warning-strong); }

.users-public-empty {
    border: 1px dashed var(--border-strong);
    border-radius: 12px;
    background: var(--surface-overlay-subtle);
    color: var(--text-muted);
    text-align: center;
    padding: 18px;
}

.users-public-lightboxable {
    cursor: zoom-in;
}

.users-public-video-link {
    margin-left: 0;
}

@media (max-width: 900px) {
    .users-public-meta {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .users-public-login {
        font-size: 22px;
    }

    .users-public-meta {
        grid-template-columns: 1fr;
    }

    .users-public-rank-badge {
        min-width: 0;
        width: 100%;
        max-width: none;
    }
}

.user-main-left-col{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    flex:0 0 auto;
}

.user-public-actions{
    display:flex;
    gap:10px;
    padding-left:2px;
    padding:6px;
    border:1px solid var(--border-main);
    border-radius:10px;
    background:var(--surface-bg-soft);
}

.user-public-actions-admin{
    margin-top:-6px;
}

.user-public-icon-btn{
    width:36px;
    height:36px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0;
    border:1px solid var(--info-border);
    border-radius:8px;
    background:var(--control-bg);
    box-shadow:0 1px 3px rgba(15,23,42,.08);
    cursor:pointer;
    transition:background .15s ease, border-color .15s ease, transform .15s ease;
}

.user-public-icon-btn:hover{
    background:var(--border-soft);
    border-color:var(--focus-ring);
    transform:translateY(-1px);
}

.user-public-icon-btn img{
    width:22px;
    height:22px;
    display:block;
    object-fit:contain;
    pointer-events:none;
}

#welcome-block .welcome-content {
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-soft);
}

.welcome-lead {
    margin: 0 0 12px;
    color: var(--text-main);
}

.welcome-list {
    margin: 0;
    padding-left: 18px;
}

.welcome-list li {
    margin: 0 0 10px;
}

.welcome-list li.is-done {
    color: var(--text-disabled);
}

.welcome-done {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    color: var(--surface-bg-raised);
    background: var(--text-muted);
    vertical-align: middle;
}

.welcome-tail {
    margin-top: 12px;
    color: var(--text-soft);
}

.welcome-joke {
    margin-top: 10px;
    color: var(--page-text);
    font-weight: 600;
}

.start-link-btn {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    text-decoration: none;
}

.welcome-link-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 28px;
	padding: 0 10px;
	border: 1px solid var(--accent-soft);
	border-bottom: 2px solid var(--page-text);
	border-radius: 4px;
	background: var(--accent-soft);
	color: var(--page-text);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.welcome-link-btn:hover {
	background: var(--accent-soft);
	color: var(--warning-text);
	border-color: var(--warning-border);
}

.start-link-btn.welcome-link-btn {
	margin-left: 6px;
}

.welcome-download-btn {
	border-color: var(--info-border);
	border-bottom: 2px solid var(--focus-ring);
	background: var(--info-bg);
	color: var(--header-link-text);
}

.welcome-download-btn:hover {
	background: var(--info-bg);
	color: var(--info-text);
	border-color: var(--info-border);
}



/* ==========================================================================
   Stage 12 — Billing domain
   Effective legacy structure consolidated into one shared implementation.
   Theme-dependent differences are exposed through billing role tokens.
   ========================================================================== */

.billing-page {
    max-width: 1120px;
    margin: 0 auto;
    padding: 4px 0 14px;
}

.billing-grid {
    display: block;
}

.billing-card {
    background: var(--billing-card-bg);
    border: var(--billing-card-border);
    border-radius: 14px;
    padding: 10px 12px;
    box-shadow: var(--billing-card-shadow);
    min-width: 0;
    margin-bottom: 10px;
}

.analytics-page {
    max-width: 1260px;
}

.analytics-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.analytics-period {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    white-space: nowrap;
}

.analytics-period select {
    min-width: 96px;
}

.analytics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}

.analytics-card {
    background: var(--billing-card-bg);
    border: var(--billing-card-border);
    border-radius: 12px;
    padding: 10px 12px;
    box-shadow: var(--billing-card-shadow);
    min-height: 76px;
}

.analytics-card-label {
    color: var(--text-muted);
    font-size: 12px;
    margin-bottom: 5px;
}

.analytics-card-value {
    color: var(--text-main);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.05;
}

.analytics-card-trend {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-top: 6px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.25;
}

.analytics-card-trend-up {
    color: #37d67a;
    background: rgba(55, 214, 122, 0.12);
}

.analytics-card-trend-down {
    color: #ff5f6b;
    background: rgba(255, 95, 107, 0.12);
}

.analytics-card-trend-flat {
    color: var(--text-muted);
    background: rgba(128, 148, 174, 0.14);
}

.analytics-card-note {
    color: var(--text-muted);
    font-size: 11px;
    margin-top: 6px;
}

.analytics-title {
    margin: 0 0 10px;
    font-size: 16px;
}

.analytics-subtitle {
    margin: -4px 0 10px;
}

.analytics-two-col {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

.analytics-section-head {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: space-between;
}

.analytics-section-head .analytics-title {
    margin: 0;
}

.analytics-section-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 6px;
}

.analytics-section-btn {
    background: var(--btn-secondary-bg, rgba(88, 166, 255, 0.1));
    border: 1px solid var(--border, #38506b);
    border-radius: 999px;
    color: inherit;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    padding: 5px 10px;
}

.analytics-section-btn:hover {
    border-color: #58a6ff;
}

.analytics-section-body {
    margin-top: 10px;
}

.analytics-section-card.is-collapsed .analytics-section-body,
.analytics-section-card.is-collapsed .analytics-list-mode-btn {
    display: none;
}

.analytics-section-card.is-scroll-mode .analytics-table-scroll-target {
    max-height: var(--analytics-ten-rows-height, 440px);
    overflow-y: auto;
}

.analytics-section-card.is-scroll-mode .analytics-table-scroll-target thead th {
    background: var(--surface-bg);
    position: sticky;
    top: 0;
    z-index: 2;
}

.analytics-section-card.is-scroll-mode .analytics-events.analytics-table-scroll-target {
    padding-right: 4px;
}

.analytics-table td,
.analytics-table th {
    font-size: 12px;
}

.analytics-ratio-table td:first-child {
    min-width: 260px;
}

.analytics-ratio-table td:first-child span {
    display: block;
    color: var(--text-muted);
    font-size: 11px;
    margin-top: 3px;
}

.analytics-ua-table {
    table-layout: fixed;
    width: 100%;
}

.analytics-ua-filter {
    align-items: center;
    display: inline-flex;
    gap: 6px;
    margin: 0 0 10px;
    cursor: pointer;
    font-size: 12px;
}

.analytics-ua-sort {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: inherit;
    gap: 4px;
    justify-content: center;
    padding: 0;
}

.analytics-ua-sort span {
    color: var(--accent-text);
    font-size: 14px;
}

.analytics-ua-table th:first-child,
.analytics-ua-table td:first-child {
    width: 46%;
}

.analytics-ua-details summary {
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.analytics-ua-details code {
    display: block;
    margin-top: 6px;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.system-sql-table {
    table-layout: fixed;
    width: 100%;
}

.system-sql-table th:first-child,
.system-sql-table td:first-child {
    width: 48%;
}

.system-sql-row {
    cursor: pointer;
}

.system-sql-row:focus-visible {
    outline: 2px solid #58a6ff;
    outline-offset: -2px;
}

.system-sql-text {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.system-sql-row.is-expanded .system-sql-text {
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: pre-wrap;
}

.system-sql-sort {
    align-items: center;
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: inherit;
    gap: 4px;
    padding: 0;
    text-align: inherit;
}

.system-sql-sort span {
    color: #58a6ff;
    font-size: 14px;
}

.system-sql-legend {
    line-height: 1.5;
    margin-top: 10px;
}

.system-page {
    max-width: 1260px;
}

.system-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 8px;
}

.system-info-grid div,
.system-daemon-status div {
    border: 1px solid var(--border-main);
    border-radius: 10px;
    background: var(--surface-bg);
    padding: 9px 10px;
    min-width: 0;
}

.system-info-grid span,
.system-daemon-status span {
    display: block;
    color: var(--text-muted);
    font-size: 11px;
    margin-bottom: 4px;
}

.system-info-grid b,
.system-daemon-status b {
    display: block;
    color: var(--text-main);
    font-size: 13px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.system-gauge-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}

.system-gauge {
    background: var(--billing-card-bg);
    border: var(--billing-card-border);
    border-radius: 14px;
    padding: 14px 12px;
    box-shadow: var(--billing-card-shadow);
    text-align: center;
}

.system-gauge-ring {
    width: min(170px, 50vw);
    aspect-ratio: 1;
    margin: 0 auto;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        conic-gradient(var(--gauge-color) 0 var(--gauge-deg), rgba(128, 148, 174, 0.18) var(--gauge-deg) 360deg);
}

.system-gauge-inner {
    width: 72%;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-content: center;
    background: var(--billing-card-bg);
    border: 1px solid var(--border-main);
}

.system-gauge-value {
    color: var(--text-main);
    font-size: 26px;
    font-weight: 900;
    line-height: 1;
}

.system-gauge-label {
    color: var(--text-muted);
    font-size: 12px;
    margin-top: 6px;
}

.system-gauge-note {
    color: var(--text-muted);
    font-size: 12px;
    margin-top: 10px;
}

.system-net-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 198px;
}

.system-net-title {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 12px;
}

.system-net-values {
    display: grid;
    gap: 8px;
}

.system-net-values div {
    border: 1px solid var(--border-main);
    border-radius: 10px;
    padding: 8px 10px;
    background: var(--surface-bg);
}

.system-net-values span {
    display: block;
    color: var(--text-muted);
    font-size: 11px;
    margin-bottom: 4px;
}

.system-net-values b {
    display: block;
    color: var(--text-main);
    font-size: 19px;
    line-height: 1.1;
}

.system-daemon-status {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 8px;
}

.system-command {
    margin-top: 8px;
    overflow-wrap: anywhere;
}

.system-command code {
    color: var(--text-main);
}

.system-refresh-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    font-size: 12px;
    white-space: nowrap;
}

.system-chart-card {
    position: relative;
}

.system-page {
    --system-chart-axis-label: #60758f;
}

html[data-theme="dark"] .system-page {
    --system-chart-axis-label: rgba(190, 202, 220, 0.85);
}

.system-period-card {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.system-period-card .analytics-title {
    margin-bottom: 0;
    white-space: nowrap;
}

.system-chart-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}

.system-range-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    color: var(--text-muted);
    font-size: 12px;
}

.system-range-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 5px;
}

.system-range-custom {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 6px;
    border: 1px solid transparent;
    border-radius: 10px;
}

.system-range-custom.active {
    border-color: var(--accent-text);
    background: rgba(37, 99, 235, 0.08);
}

html[data-theme="dark"] .system-range-custom.active {
    background: rgba(214, 255, 0, 0.06);
}

.system-range-buttons a {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 3px 9px;
    border: 1px solid var(--border-main);
    border-radius: 999px;
    color: var(--header-link-text);
    background: var(--header-link-bg);
    text-decoration: none;
    font-weight: 700;
}

.system-range-buttons a.active {
    color: var(--accent-text);
    border-color: var(--accent-text);
}

.system-range-form input[type="datetime-local"] {
    max-width: 165px;
    min-height: 30px;
    font-size: 12px;
}

.system-chart-wrap {
    position: relative;
    border: 1px solid var(--border-main);
    border-radius: 12px;
    background: var(--surface-bg);
    padding: 8px;
    min-height: 450px;
}

#system-chart {
    display: block;
    width: 100%;
    height: 430px;
    cursor: crosshair;
    user-select: none;
}

#db-chart {
    display: block;
    width: 100%;
    height: 360px;
    cursor: crosshair;
    user-select: none;
}

.system-chart-tooltip {
    position: absolute;
    z-index: 2;
    min-width: 210px;
    max-width: 260px;
    padding: 8px 10px;
    border: 1px solid var(--border-main);
    border-radius: 10px;
    color: var(--text-main);
    background: var(--billing-card-bg);
    box-shadow: var(--billing-card-shadow);
    font-size: 12px;
    line-height: 1.45;
    pointer-events: none;
}

.system-chart-empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--text-muted);
    font-weight: 700;
}

.system-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.system-chart-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 5px 9px;
    border: 1px solid var(--border-main);
    border-radius: 999px;
    color: var(--text-main);
    background: var(--surface-bg);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
}

.system-chart-legend-item span {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.system-chart-legend-item b {
    font-size: 12px;
    line-height: 1.15;
}

.system-chart-legend-item small {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.15;
}

.system-chart-meta {
    margin-top: 8px;
}

.analytics-events {
    display: grid;
    gap: 6px;
    max-height: none;
    overflow: visible;
}

.analytics-event {
    border: 1px solid var(--border-main);
    border-radius: 8px;
    padding: 7px 9px;
    background: var(--surface-bg);
}

.analytics-event-main {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
}

.analytics-event-main span,
.analytics-event-meta {
    color: var(--text-muted);
}

.analytics-event-meta {
    margin-top: 4px;
    font-size: 11px;
}

@media (max-width: 900px) {
    .analytics-head {
        flex-direction: column;
    }

    .analytics-two-col {
        grid-template-columns: 1fr;
    }

    .system-gauge-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .system-chart-head {
        flex-direction: column;
    }

    .system-period-card {
        flex-direction: column;
    }

    .system-range-form {
        align-items: flex-start;
        justify-content: flex-start;
    }

    .system-range-buttons,
    .system-range-custom {
        justify-content: flex-start;
    }
}

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

.billing-card-compact {
    padding-top: 12px;
    padding-bottom: 12px;
}

.billing-title {
    margin: 0 0 8px;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--billing-text-main);
}

.billing-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.billing-row-compact {
    gap: 8px;
}

.billing-row-lookup {
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
}

.billing-row input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    padding: 8px 11px;
    border: var(--billing-input-border);
    border-radius: 12px;
    background: var(--billing-input-bg);
    color: var(--billing-text-main);
    font-size: 14px;
    outline: none;
}

.billing-row input[type="text"]:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 1px rgba(96,165,250,0.28);
}

.billing-status {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: stretch;
}

.billing-status-compact {
    gap: 8px;
}

.billing-status-item {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    background: var(--billing-status-bg);
    border: var(--billing-status-border);
    border-radius: 11px;
    padding: 8px 10px;
    transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
}

.billing-status-label {
    font-size: 11px;
    line-height: 1.1;
    color: var(--billing-text-muted);
    margin-bottom: 4px;
    white-space: nowrap;
}

.billing-status-value {
    font-size: 12px;
    line-height: 1.18;
    font-weight: 700;
    color: var(--billing-text-main);
    word-break: break-word;
    white-space: nowrap;
}

.billing-status-item-neutral {
    background: var(--billing-status-bg);
    border-color: var(--billing-neutral-border);
}

.billing-status-item-muted {
    background: var(--billing-muted-bg);
    border-color: var(--billing-muted-border);
}

.billing-status-item-muted .billing-status-label {
    color: var(--billing-muted-label);
}

.billing-status-item-muted .billing-status-value {
    color: var(--billing-muted-value);
}

.billing-status-item-ok {
    background: var(--billing-ok-bg);
    border-color: var(--billing-ok-border);
    box-shadow: inset 0 0 0 1px rgba(34,197,94,0.10);
}

.billing-status-item-ok .billing-status-label {
    color: var(--billing-ok-label);
}

.billing-status-item-ok .billing-status-value {
    color: var(--billing-ok-value);
}

.billing-status-item-info {
    background: var(--billing-info-bg);
    border-color: var(--billing-info-border);
    box-shadow: inset 0 0 0 1px rgba(59,130,246,0.10);
}

.billing-status-item-info .billing-status-label {
    color: var(--billing-info-label);
}

.billing-status-item-info .billing-status-value {
    color: var(--billing-info-value);
}

.billing-status-item-warn {
    background: var(--billing-warn-bg);
    border-color: var(--billing-warn-border);
    box-shadow: inset 0 0 0 1px rgba(245,158,11,0.10);
}

.billing-status-item-warn .billing-status-label {
    color: var(--billing-warn-label);
}

.billing-status-item-warn .billing-status-value {
    color: var(--billing-warn-value);
}

.billing-status-item-bad {
    background: var(--billing-bad-bg);
    border-color: var(--billing-bad-border);
    box-shadow: inset 0 0 0 1px rgba(239,68,68,0.10);
}

.billing-status-item-bad .billing-status-label {
    color: var(--billing-bad-label);
}

.billing-status-item-bad .billing-status-value {
    color: var(--billing-bad-value);
}

.billing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.billing-actions-compact {
    gap: 8px;
}

.billing-actions form {
    margin: 0;
    flex: 0 0 auto;
}

.billing-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 36px;
    padding: 7px 14px;
    border: var(--billing-button-border);
    border-radius: 12px;
    background: linear-gradient(180deg, #1f4d86 0%, #163b66 100%);
    color: var(--billing-button-text);
    font-weight: 700;
    font-size: 13px;
    line-height: 1.15;
    text-align: center;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
    transition: filter .14s ease, transform .05s ease, border-color .14s ease;
    white-space: nowrap;
}

.billing-btn:hover {
    filter: brightness(1.08);
    border-color: var(--billing-button-border-hover);
}

.billing-btn:active {
    transform: translateY(1px);
}

.billing-btn.blue {
    background: linear-gradient(180deg, rgba(70,130,180,0.95) 0%, rgba(45,92,133,0.95) 100%);
    border-color: rgba(70,130,180,0.95);
}

.billing-btn.green {
    background: linear-gradient(180deg, rgba(80,190,110,0.95) 0%, rgba(45,130,70,0.95) 100%);
    border-color: rgba(80,190,110,0.95);
}

.billing-btn.purple {
    background: linear-gradient(180deg, rgba(150,90,210,0.96) 0%, rgba(105,58,158,0.96) 100%);
    border-color: rgba(150,90,210,0.96);
}

.billing-btn.orange {
    background: linear-gradient(180deg, rgba(255,140,0,0.97) 0%, rgba(184,96,0,0.97) 100%);
    border-color: rgba(255,140,0,0.97);
    color: var(--billing-button-orange-text);
}

.billing-btn.red {
    background: var(--billing-button-red-bg);
    border-color: #d26666;
}

.billing-btn.gray {
    background: var(--billing-button-gray-bg);
    border-color: var(--billing-button-gray-border);
}

.billing-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
    filter: grayscale(.08);
}

.billing-btn-ok {
    min-width: 74px;
    justify-content: center;
}

.billing-btn-auto {
    min-width: 190px;
}

.billing-pill {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(99,102,241,0.15);
    border: 1px solid rgba(129,140,248,0.28);
    color: #c7d2fe;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.billing-note {
    font-size: 13px;
    line-height: 1.45;
    color: #f87171;
    font-weight: 700;
}

.billing-note-compact {
    margin-top: 10px;
}

.billing-note-neutral {
    color: var(--billing-text-muted);
}

.billing-bot-link-btn {
    margin-top: 6px;
    text-decoration: none;
}

.billing-form-compact {
    margin-top: 12px;
}

.billing-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    background: rgba(255,255,255,0.03);
}

.billing-switch-compact {
    padding: 9px 11px;
}

.billing-switch input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #60a5fa;
    cursor: pointer;
    flex: 0 0 auto;
}

.billing-form-actions {
    margin-top: 8px;
}

.billing-history {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.billing-chip {
    border: var(--billing-chip-border);
    background: var(--billing-chip-bg);
    color: var(--billing-info-value);
    border-radius: 999px;
    padding: 6px 11px;
    cursor: pointer;
    font-weight: 700;
    font-size: 13px;
}

.billing-chip:hover {
    filter: brightness(1.08);
}

.billing-muted {
    color: var(--billing-text-muted);
    font-size: 12px;
    line-height: 1.42;
}

@media (max-width: 700px) {
    .billing-row-lookup {
        flex-wrap: wrap;
    }
}

@media (max-width: 700px) {
    .billing-btn-ok {
        min-width: 0;
        width: 100%;
    }
}

@media (max-width: 700px) {
    .billing-btn-auto {
        min-width: 0;
        width: 100%;
    }
}

@media (max-width: 700px) {
    .billing-actions form {
        width: 100%;
    }
}

@media (max-width: 700px) {
    .billing-actions .billing-btn {
        width: 100%;
    }
}

@media (max-width: 700px) {
    .billing-status-item {
        min-width: 0;
        width: 100%;
    }
}

@media (max-width: 640px) {
    .billing-page {
        padding-top: 2px;
    }
}

@media (max-width: 640px) {
    .billing-card {
        padding: 11px 12px;
        border-radius: 12px;
    }
}

@media (max-width: 640px) {
    .billing-title {
        font-size: 15px;
    }
}

@media (max-width: 640px) {
    .billing-switch {
        align-items: flex-start;
    }
}

.billing-reason-wrap {
    margin: 0 0 10px;
    max-width: 520px;
}

.billing-reason-label {
    display: block;
    margin: 0 0 6px;
    font-size: 12px;
    line-height: 1.2;
    color: #94a3b8;
    font-weight: 600;
}

.billing-admin-reason {
    display: block;
    width: 100%;
    min-height: 58px;
    resize: vertical;
    padding: 8px 10px;
    border: var(--billing-input-border);
    border-radius: 12px;
    background: var(--billing-input-bg);
    color: var(--billing-text-main);
    font-size: 13px;
    line-height: 1.35;
    outline: none;
    box-sizing: border-box;
}

.billing-admin-reason:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 1px rgba(96,165,250,0.28);
}

.billing-admin-reason::placeholder {
    color: var(--billing-placeholder);
}

.billing-btn-pick {
    white-space: nowrap;
}

.billing-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 16px;
}

.billing-modal-backdrop.open {
    display: flex;
}

.billing-modal {
    width: min(980px, 100%);
    max-height: min(88vh, 900px);
    background: var(--billing-modal-bg);
    color: var(--billing-modal-text);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    box-shadow: var(--billing-modal-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.billing-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.billing-modal-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
}

.billing-modal-close {
    border: 0;
    background: transparent;
    color: var(--billing-modal-close-text);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    opacity: .8;
}

.billing-modal-close:hover {
    opacity: 1;
}

.billing-modal-body {
    padding: 14px 16px;
    overflow: auto;
}

.billing-picker-table-wrap {
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    overflow: hidden;
}

.billing-picker-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 620px;
}

.billing-picker-table th {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    text-align: left;
    vertical-align: middle;
    background: var(--billing-picker-head-bg);
    font-weight: 700;
}

.billing-picker-table td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    text-align: left;
    vertical-align: middle;
}

.billing-picker-row {
    cursor: pointer;
    transition: background .15s ease;
}

.billing-picker-row:hover {
    background: rgba(255,255,255,.05);
}

.billing-picker-row.active {
    background: rgba(47,111,237,.22);
}

.billing-picker-status {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.billing-picker-status.on {
    background: rgba(46, 204, 113, .18);
    color: #7dffb0;
}

.billing-picker-status.off {
    background: rgba(255,255,255,.12);
    color: #d6d6d6;
}

.billing-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 16px;
    border-top: 1px solid rgba(255,255,255,.08);
}

@media (max-width: 720px) {
    .billing-row-lookup {
        flex-wrap: wrap;
    }
}

@media (max-width: 720px) {
    .billing-row-lookup input[name="lookup_login"] {
        min-width: 0;
        width: 100%;
    }
}

@media (max-width: 720px) {
    .billing-row-lookup .billing-btn {
        flex: 1 1 auto;
    }
}


/* ========================================================================== 
   Stage 13 — final residual pass / trainer-mode normalization
   ========================================================================== */

/* Public users navigation tail. */
.users-public-home-link {
    margin-left: auto;
    font-size: 13px;
    opacity: 0.9;
}

.users-public-home-link:hover {
    opacity: 1;
}

/* Billing tail intentionally left outside the billing domain batch. */
.billing-history,
.billing-history * {
    color: inherit;
}

.billing-row input[type="text"]::placeholder {
    color: var(--input-placeholder);
}

/* Trainer selector states are a shared JS/UI contract. */
.trainer-switch-wrap select:hover,
#trainer-target-select:hover {
    border-color: var(--trainer-switch-hover-border);
}

.trainer-switch-wrap select:focus,
#trainer-target-select:focus {
    outline: none;
    border-color: var(--trainer-switch-focus-border);
    box-shadow: var(--trainer-switch-focus-shadow);
}

.trainer-switch-wrap select option,
#trainer-target-select option {
    background: var(--trainer-switch-option-bg);
    color: var(--trainer-switch-option-text);
}

/*
 * Normalize the final effective trainer-mode cascade.  Legacy light carried
 * several late override waves; v2 keeps one structural source and themes only
 * the values below.
 */
body.trainer-mode {
    color: var(--trainer-mode-text);
}

body.trainer-mode::before {
    opacity: var(--trainer-page-image-opacity);
    filter: var(--trainer-page-image-filter);
}

body.trainer-mode::after {
    background: repeating-linear-gradient(
        45deg,
        var(--trainer-pattern-a) 0,
        var(--trainer-pattern-a) var(--trainer-pattern-step-a),
        var(--trainer-pattern-b) var(--trainer-pattern-step-a),
        var(--trainer-pattern-b) var(--trainer-pattern-step-b)
    );
}

body.trainer-mode #header-bar {
    background: var(--trainer-header-bg);
    border-bottom-color: var(--trainer-border);
    box-shadow: var(--trainer-header-shadow);
}

body.trainer-mode #tabs-bar {
    background: var(--trainer-tabs-bg);
    border-bottom-color: var(--trainer-border);
}

body.trainer-mode .gym-tabs-bar {
    background: var(--trainer-tabs-bg);
    border-bottom-color: var(--trainer-border);
}

body.trainer-mode #topbar {
    background: var(--trainer-topbar-bg);
    border-color: var(--trainer-border);
    box-shadow: var(--trainer-topbar-shadow);
}

body.trainer-mode .block,
body.trainer-mode #auth-panel {
    background: var(--trainer-block-bg);
    border-color: var(--trainer-block-border);
    box-shadow: var(--trainer-block-shadow);
}

body.trainer-mode .modal-content {
    background: var(--trainer-modal-bg);
    border-color: var(--trainer-block-border);
}

body.trainer-mode .week-title,
body.trainer-mode .block h2,
body.trainer-mode #header-title,
body.trainer-mode .graph-card-title,
body.trainer-mode .plans-smart-title,
body.trainer-mode .plans-preview-day-title,
body.trainer-mode .users-public-login {
    color: var(--trainer-heading-text);
}

body.trainer-mode .hint,
body.trainer-mode .muted,
body.trainer-mode #week-info,
body.trainer-mode #save-status,
body.trainer-mode .graph-card-desc,
body.trainer-mode .graph-field span {
    color: var(--trainer-muted-text);
}

body.trainer-mode .tab-link {
    color: var(--trainer-tab-text);
}

body.trainer-mode .tab-link:hover {
    color: var(--trainer-tab-hover-text);
    background: var(--trainer-tab-hover-bg);
}

body.trainer-mode .tab-link.active {
    color: var(--trainer-tab-active-text);
    border-bottom-color: var(--trainer-tab-active-border);
    background: var(--trainer-tab-active-bg);
}

body.trainer-mode .header-link {
    background: var(--trainer-link-bg);
    border-color: var(--trainer-link-border);
    color: var(--trainer-link-text);
}

body.trainer-mode .header-link:hover {
    color: var(--trainer-link-hover-text);
    border-color: var(--trainer-link-hover-border);
}

body.trainer-mode .modal-select,
body.trainer-mode .modal-input,
body.trainer-mode .user-input,
body.trainer-mode .user-select,
body.trainer-mode #training-select,
body.trainer-mode .set-inputs input,
body.trainer-mode .set-inputs select.set-rir,
body.trainer-mode .user-log-range,
body.trainer-mode .trainer-switch-wrap select,
body.trainer-mode #trainer-target-select {
    background: var(--trainer-input-bg);
    border-color: var(--trainer-input-border);
    color: var(--trainer-input-text);
}

body.trainer-mode .data-table tbody tr:nth-child(even) {
    background: var(--trainer-table-even-bg);
}

body.trainer-mode .data-table tbody tr:hover {
    background: var(--trainer-table-hover-bg);
}

.trainer-switch-wrap label,
#trainer-switch-wrap label,
body.trainer-mode .trainer-switch-wrap label,
body.trainer-mode #trainer-switch-wrap label {
    color: var(--trainer-switch-label-text);
}

.trainer-switch-wrap select,
#trainer-target-select {
    min-width: 220px;
    background: var(--trainer-switch-bg);
    color: var(--trainer-switch-text);
    border: 1px solid var(--trainer-switch-border);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 13px;
    box-shadow: var(--trainer-switch-shadow);
}

.trainer-badge,
#trainer-mode-badge {
    color: var(--trainer-badge-text);
    background: var(--trainer-badge-bg);
    border-color: var(--trainer-badge-border);
    box-shadow: var(--trainer-badge-shadow);
}

body.trainer-mode .trainer-badge,
body.trainer-mode #trainer-mode-badge {
    color: var(--trainer-mode-badge-text);
    background: var(--trainer-mode-badge-bg);
    border-color: var(--trainer-mode-badge-border);
    box-shadow: var(--trainer-mode-badge-shadow);
}


/* === Diary column visibility controls (v2) === */
.diary-view-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 8px;
}

.diary-view-head > h2 {
    margin: 0;
}

.diary-view-options {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--text-muted);
    font-size: 12px;
}

.diary-view-options-title {
    white-space: nowrap;
}

.diary-view-option {
    display: inline-grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    column-gap: 6px;
    align-items: center;
    padding: 5px 8px;
    border: 1px solid var(--shell-border);
    border-radius: 9px;
    background: var(--shell-bg);
    color: var(--text-main);
    cursor: pointer;
    user-select: none;
}

.diary-view-option input {
    grid-row: 1 / span 2;
    margin: 0;
}

.diary-view-option > span {
    font-weight: 600;
    line-height: 1.15;
}

.diary-view-option > small {
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.15;
}

/* Скрываем только визуально. Элементы остаются в DOM и участвуют в текущей JS-логике. */
body.diary-hide-advanced .set-col-cheat,
body.diary-hide-advanced .set-col-drop,
body.diary-hide-advanced .set-col-rir,
body.diary-hide-progress .set-col-progress {
    display: none !important;
}

body.diary-hide-progress .info-progress-only,
body.diary-hide-advanced .info-advanced-only {
    display: none !important;
}

@media (max-width: 760px) {
    .diary-view-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .diary-view-options {
        width: 100%;
        justify-content: flex-start;
    }

    .diary-view-options-title {
        width: 100%;
    }
}

/* ========================================================================== */
/* Disclosure controls: compact expand/collapse buttons                      */
/* ========================================================================== */
.load-advanced-toggle,
.preview-toggle-sets-btn {
    appearance: none;
    -webkit-appearance: none;

    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;

    min-width: 0;
    min-height: 28px;
    padding: 4px 9px;

    border: 1px solid var(--control-border);
    border-radius: 8px;
    background: var(--control-bg);
    color: var(--control-text);

    cursor: pointer;
    white-space: nowrap;
    line-height: 1.2;
    box-shadow: none;
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}

.load-advanced-toggle:hover,
.preview-toggle-sets-btn:hover {
    border-color: var(--control-border-hover);
    background: var(--control-bg-hover);
    color: var(--control-text);
}

.load-advanced-toggle-arrow,
.preview-toggle-sets-icon {
    display: inline-block;
    flex: 0 0 auto;
    width: 0.9em;
    color: var(--control-text-soft);
    text-align: center;
    line-height: 1;
    transform-origin: 50% 50%;
    transition: transform 0.15s ease, color 0.15s ease;
}

.load-advanced-toggle:hover .load-advanced-toggle-arrow,
.preview-toggle-sets-btn:hover .preview-toggle-sets-icon {
    color: var(--control-text);
}

.load-advanced-toggle[aria-expanded="true"] .load-advanced-toggle-arrow,
.preview-toggle-sets-btn[aria-expanded="true"] .preview-toggle-sets-icon {
    transform: rotate(90deg);
}

@media (max-width: 720px) {
    .load-advanced-toggle,
    .preview-toggle-sets-btn {
        max-width: 100%;
    }
}


/* Startup flow: keep the first-use screen focused on one next action. */
.startup-card {
    max-width: 760px;
}

body.training-system-guest #welcome-block .startup-card {
    width: 100%;
    max-width: none;
}

.startup-text,
.startup-note {
    margin: 10px 0 0;
    line-height: 1.55;
}

.startup-note {
    opacity: 0.78;
    font-size: 0.94em;
}

.startup-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.startup-actions .welcome-link-btn {
    margin: 0;
    min-height: 42px;
    padding: 10px 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.startup-primary {
    font-weight: 700;
}

.startup-secondary {
    opacity: 0.9;
}

@media (max-width: 640px) {
    .startup-actions {
        flex-direction: column;
    }

    .startup-actions .welcome-link-btn {
        width: 100%;
        box-sizing: border-box;
    }
}


/* ============================================================
   Auth landing — SaaS-first first impression
   ============================================================ */

body.auth-landing .page {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

body.auth-landing #auth-welcome {
    order: 1;
    display: block;
    position: relative;
    overflow: hidden;
    margin-top: 16px;
    padding: clamp(28px, 5vw, 58px);
    min-height: 290px;
    border-radius: 20px;
    border: 1px solid var(--border-card);
    background:
        radial-gradient(circle at 88% 12%, var(--index-info-bg-alt), transparent 34%),
        linear-gradient(145deg, var(--index-card-overlay-top), var(--index-card-overlay-bottom));
    box-shadow: 0 12px 36px var(--index-shadow-color);
}

body.auth-landing #auth-welcome::after {
    content: "";
    position: absolute;
    right: -80px;
    bottom: -120px;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    border: 54px solid var(--index-info-border-alt);
    opacity: .22;
    pointer-events: none;
}

body.auth-landing .auth-welcome-badge {
    position: relative;
    z-index: 1;
    margin-bottom: 18px;
    padding: 6px 13px;
    font-size: 13px;
}

body.auth-landing .auth-welcome-title {
    position: relative;
    z-index: 1;
    max-width: 820px;
    margin-bottom: 16px;
    font-size: clamp(28px, 4vw, 46px);
    line-height: 1.08;
    letter-spacing: -0.025em;
}

body.auth-landing .auth-welcome-text {
    position: relative;
    z-index: 1;
    max-width: 790px;
    margin-bottom: 26px;
    font-size: clamp(15px, 1.7vw, 19px);
    line-height: 1.55;
}

body.auth-landing .auth-welcome-points {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

body.auth-landing .auth-welcome-point {
    min-height: 76px;
    padding: 14px 16px;
    border: 1px solid var(--border-card);
    border-radius: 12px;
    background: var(--shell-bg);
    font-size: 14px;
    line-height: 1.45;
    box-shadow: 0 4px 14px var(--index-shadow-color);
}

body.auth-landing #auth-panel {
    order: 2;
    width: min(100%, 640px);
    align-self: center;
    margin: 0 0 8px;
    padding: 24px 26px 26px;
    border-radius: 16px;
    box-shadow: 0 10px 30px var(--index-auth-shadow);
}

body.auth-landing #auth-panel h1 {
    margin-bottom: 18px;
    font-size: 22px;
    text-align: center;
}

body.auth-landing .auth-row {
    margin-bottom: 13px;
}

body.auth-landing .auth-row input[type="text"],
body.auth-landing .auth-row input[type="password"] {
    min-height: 44px;
    padding: 9px 12px;
    font-size: 15px;
    border-radius: 9px;
}

body.auth-landing .auth-actions {
    margin-top: 14px;
    gap: 10px;
}

body.auth-landing .auth-actions button {
    min-height: 44px;
    padding: 10px 16px;
    font-size: 15px;
    font-weight: 600;
}

body.auth-landing #btn-register,
body.auth-landing #btn-login {
    background: var(--action-secondary-bg);
    color: var(--action-secondary-text);
    border: 1px solid var(--border-main);
}

body.auth-landing #btn-register:hover,
body.auth-landing #btn-login:hover {
    background: var(--action-secondary-bg-hover);
}

body.auth-landing #auth-status {
    margin-top: 10px;
    text-align: center;
}

@media (max-width: 760px) {
    body.auth-landing #auth-welcome {
        min-height: 0;
        padding: 24px 20px;
        border-radius: 15px;
    }

    body.auth-landing .auth-welcome-title {
        font-size: 28px;
    }

    body.auth-landing .auth-welcome-points {
        grid-template-columns: 1fr;
    }

    body.auth-landing .auth-welcome-point {
        min-height: 0;
    }

    body.auth-landing #auth-panel {
        padding: 20px 16px 22px;
        border-radius: 14px;
    }
}

@media (max-width: 520px) {
    body.auth-landing .auth-actions {
        flex-direction: column-reverse;
    }

    body.auth-landing .auth-actions button {
        width: 100%;
    }
}


/* Auth landing: role-based product cards and transparent pricing */
body.auth-landing .auth-welcome-point h3 {
    margin: 0 0 12px;
    font-size: 18px;
    line-height: 1.2;
}

body.auth-landing .auth-welcome-point ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

body.auth-landing .auth-welcome-point li {
    position: relative;
    margin: 7px 0;
    padding-left: 17px;
    line-height: 1.35;
}

body.auth-landing .auth-welcome-point li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 700;
}

body.auth-landing .auth-welcome-pricing {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 8px 12px;
    align-items: baseline;
    flex-wrap: wrap;
    margin-top: 18px;
    padding: 13px 16px;
    border: 1px solid var(--border-card);
    border-radius: 12px;
    background: var(--shell-bg);
    line-height: 1.45;
}

body.auth-landing .auth-welcome-pricing strong {
    font-size: 16px;
}

@media (max-width: 760px) {
    body.auth-landing .auth-welcome-pricing {
        display: block;
    }

    body.auth-landing .auth-welcome-pricing strong,
    body.auth-landing .auth-welcome-pricing span {
        display: block;
    }

    body.auth-landing .auth-welcome-pricing strong {
        margin-bottom: 4px;
    }
}


/* Auth landing: collapsed full-width join form and stable footer order */
body.auth-landing #auth-welcome {
    order: 1;
}

body.auth-landing #auth-join-toggle {
    order: 2;
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 13px 20px;
    border-radius: 14px;
    font-size: 17px;
    font-weight: 700;
}

body.auth-landing #auth-panel {
    order: 3;
    width: 100%;
    max-width: none;
    align-self: stretch;
    margin: 0;
}

body.auth-landing #footer {
    order: 100;
    width: 100%;
    margin-top: auto;
}

@media (max-width: 520px) {
    body.auth-landing #auth-join-toggle {
        min-height: 48px;
        font-size: 16px;
    }
}


/* ============================================================
   Auth landing experiment: quiet gym background
   ============================================================ */

/* The marketing card is strong enough without the pill label. */
body.auth-landing .auth-welcome-title {
    margin-top: 0;
}


/* The free-use promise should read like product information, not an alert. */
body.auth-landing .auth-welcome-pricing,
body.auth-landing .auth-welcome-pricing strong,
body.auth-landing .auth-welcome-pricing span {
    color: var(--text-main);
}

body.auth-landing .auth-welcome-pricing {
    background: color-mix(in srgb, var(--shell-bg) 92%, transparent);
}

/* A restrained primary CTA that still belongs to the existing UI. */
body.auth-landing #auth-join-toggle {
    border: 1px solid var(--action-primary-bg);
    background: var(--action-primary-bg);
    color: var(--action-primary-text);
    box-shadow: 0 8px 22px var(--index-shadow-color);
}

body.auth-landing #auth-join-toggle:hover {
    background: var(--action-primary-bg-hover);
}

/* Lightweight feedback widget for pilot traffic. Keep this and the SEO tail in the deployed base stylesheet. */
.feedback-widget {
    position: fixed !important;
    right: calc(18px + env(safe-area-inset-right, 0px));
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    left: auto !important;
    top: auto !important;
    width: 48px;
    height: 48px;
    margin: 0 !important;
    z-index: 1200;
    font-size: 14px;
}

.feedback-widget-hidden {
    display: none;
}

.feedback-fab {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    background: var(--action-primary-bg);
    color: var(--action-primary-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    box-shadow: 0 10px 26px var(--shadow-card);
}

.feedback-fab img {
    width: 30px;
    height: 30px;
    display: block;
    object-fit: contain;
}

.feedback-fab:hover {
    background: var(--action-primary-bg-hover);
}

.feedback-panel {
    position: fixed;
    right: calc(18px + env(safe-area-inset-right, 0px));
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    left: auto;
    width: min(360px, calc(100vw - 36px));
    width: min(360px, calc(100dvw - 36px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
    max-width: calc(100vw - 36px);
    max-width: calc(100dvw - 36px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
    box-sizing: border-box;
    padding: 12px;
    border: 1px solid var(--border-card);
    border-radius: 12px;
    background: var(--surface-bg);
    color: var(--text-main);
    box-shadow: 0 14px 36px var(--shadow-card);
}

.feedback-widget-admin .feedback-panel {
    width: min(560px, calc(100vw - 36px));
    width: min(560px, calc(100dvw - 36px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
}

.feedback-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.feedback-title {
    font-weight: 800;
}

.feedback-close {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--border-main);
    background: var(--surface-bg-soft);
    color: var(--text-main);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}

.feedback-hint {
    margin-bottom: 10px;
    color: var(--text-muted);
    line-height: 1.35;
}

.feedback-message {
    width: 100%;
    min-height: 112px;
    resize: vertical;
    box-sizing: border-box;
    border: 1px solid var(--border-main);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--text-main);
    padding: 9px 10px;
    font: inherit;
}

.feedback-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
}

.feedback-status {
    min-width: 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.3;
}

.feedback-my-list {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    max-height: min(220px, calc(100vh - 360px));
    overflow: auto;
    padding-right: 2px;
}

.feedback-my-title {
    color: var(--text-main);
    font-weight: 800;
    font-size: 13px;
}

.feedback-my-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: stretch;
    text-align: left;
    border: 1px solid var(--border-main);
    border-radius: 8px;
    background: var(--surface-bg-soft);
    color: var(--text-main);
    padding: 7px 9px;
    cursor: pointer;
}

.feedback-my-item:hover {
    border-color: var(--action-primary-bg);
}

.feedback-my-item.has-unread,
.feedback-admin-item.has-unread {
    border-color: var(--action-primary-bg);
    box-shadow: inset 3px 0 0 var(--action-primary-bg);
}

.feedback-my-item span {
    font-weight: 700;
}

.feedback-my-item b,
.feedback-admin-user b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    margin-left: 6px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--action-primary-bg);
    color: var(--action-primary-text);
    font-size: 11px;
    line-height: 1;
}

.feedback-my-item small {
    color: var(--text-muted);
}

.feedback-widget-list {
    max-height: min(420px, calc(100vh - 180px));
    margin-top: 10px;
}

@media (max-width: 520px) {
    .feedback-widget {
        right: calc(12px + env(safe-area-inset-right, 0px));
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }

    .feedback-panel {
        right: calc(12px + env(safe-area-inset-right, 0px));
        bottom: calc(70px + env(safe-area-inset-bottom, 0px));
        width: calc(100vw - 24px);
        width: calc(100dvw - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
        max-width: calc(100vw - 24px);
        max-width: calc(100dvw - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
    }
}
/* ===== PUBLIC SEO PAGES ===== */
body.seo-page .page {
    max-width: 980px;
}

.seo-page-inner {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.seo-section-tabs {
    margin: 2px 0 2px;
}

/* Public article/rating navigation follows the content column and wraps naturally. */
.seo-section-tabs .section-tabs-inner {
    width: calc(100% - 32px);
    max-width: 980px;
}

.seo-section-tab {
    text-decoration: none;
}

.seo-hero,
.seo-tool-panel,
.seo-text-card,
.seo-join-block,
.seo-tool-card {
    border: 1px solid var(--border-card);
    border-radius: 8px;
    background: var(--surface-bg);
    box-shadow: var(--shadow-card);
}

.seo-hero {
    display: block;
    padding: 18px 20px;
}

.seo-kicker {
    color: var(--text-muted);
    font-size: 13px;
    margin-bottom: 6px;
}

.seo-hero h1,
.seo-tool-panel h2,
.seo-text-card h2,
.seo-join-block h2,
.seo-tool-card h2 {
    margin: 0;
    color: var(--text-main);
    letter-spacing: 0;
}

.seo-hero h1 {
    font-size: 28px;
    line-height: 1.16;
}

.seo-hero p,
.seo-text-card p,
.seo-join-block p,
.seo-tool-card p,
.seo-muted {
    color: var(--text-soft);
    line-height: 1.45;
}

.seo-hero p {
    margin: 8px 0 0;
}

.seo-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--save-action-bg);
    color: var(--save-action-text);
    text-decoration: none;
    font-weight: 700;
    white-space: nowrap;
    border: 0;
}

.seo-cta:hover {
    background: var(--save-action-bg-hover);
}

.seo-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.seo-tool-card {
    display: block;
    padding: 16px;
    text-decoration: none;
    color: inherit;
}

.seo-tool-card:hover {
    border-color: var(--border-accent);
}

.seo-tool-card span {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--accent-text);
    font-size: 12px;
    font-weight: 700;
}

.seo-tool-card h2 {
    font-size: 18px;
}

.seo-tool-card p {
    margin: 8px 0 0;
    font-size: 14px;
}

.seo-tool-card-muted {
    opacity: .76;
}

.seo-layout {
    display: grid;
    grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.seo-tool-panel,
.seo-text-card {
    padding: 16px;
}

.seo-calc-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.seo-calc-grid-1rm {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.seo-layout-1rm {
    grid-template-columns: minmax(0, 1fr);
}

.seo-layout-1rm .seo-tool-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(190px, 230px);
    gap: 10px 12px;
    align-items: end;
}

.seo-layout-1rm .seo-tool-panel > h2,
.seo-layout-1rm .seo-profile-note,
.seo-layout-1rm .seo-projection-block,
.seo-layout-1rm .seo-tool-panel > .seo-muted:last-child {
    grid-column: 1 / -1;
}

.seo-layout-1rm .seo-calc-grid-1rm {
    grid-template-columns: minmax(90px, .7fr) minmax(90px, .7fr) minmax(150px, 1fr) minmax(180px, 1.15fr);
    margin-top: 4px;
}

.seo-layout-1rm .seo-result-box {
    min-height: 38px;
    margin-top: 4px;
    padding: 7px 12px;
}

.seo-calc-grid label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: var(--text-muted);
    font-size: 12px;
}

.seo-calc-grid input,
.seo-calc-grid select {
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--input-border);
    border-radius: 7px;
    background: var(--input-bg);
    color: var(--input-text);
    padding: 7px 9px;
    font-size: 16px;
}

.seo-result-box {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid var(--success-border);
    border-radius: 8px;
    background: var(--success-bg);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.seo-result-box span {
    color: var(--text-soft);
}

.seo-result-box strong {
    color: var(--success-text);
    font-size: 26px;
}

.seo-muted {
    margin: 12px 0 0;
    font-size: 13px;
}

.seo-profile-note {
    margin-top: 8px;
}

.seo-projection-block {
    margin-top: 16px;
}

.seo-projection-block h3 {
    color: var(--text-main);
    font-size: 16px;
    margin: 0 0 8px;
}

.seo-projection-table {
    width: 100%;
    min-width: 0;
}

.seo-projection-table th,
.seo-projection-table td {
    font-size: 12px;
    padding: 6px 8px;
    text-align: right;
}

.seo-projection-table th:first-child,
.seo-projection-table td:first-child {
    text-align: left;
}

.seo-text-card p {
    margin: 10px 0 0;
}

.seo-article-grid {
    display: grid;
    gap: 12px;
}

.seo-standards-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.seo-discipline-form {
    padding: 14px 16px;
    border: 1px solid var(--border-card);
    border-radius: 8px;
    background: var(--surface-bg);
    box-shadow: var(--shadow-card);
}

.seo-discipline-form label {
    display: block;
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
}

.seo-discipline-form select {
    width: 100%;
    min-height: 40px;
    padding: 7px 10px;
    border: 1px solid var(--input-border);
    border-radius: 7px;
    background: var(--input-bg);
    color: var(--input-text);
    font-size: 15px;
}

.seo-values-fieldset {
    margin: 14px 0 0;
    padding: 12px;
    border: 1px solid var(--border-card);
    border-radius: 7px;
}

.seo-values-fieldset legend {
    padding: 0 6px;
    color: var(--text-main);
    font-weight: 700;
}

.seo-values-grid {
    display: grid;
    grid-template-columns: auto minmax(130px, 1fr) minmax(130px, 1fr);
    gap: 12px;
    align-items: end;
}

.seo-values-grid > label,
.seo-sex-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--text-muted);
    font-size: 13px;
}

.seo-values-grid input[type="number"] {
    width: 100%;
    min-height: 38px;
    padding: 7px 9px;
    border: 1px solid var(--input-border);
    border-radius: 7px;
    background: var(--input-bg);
    color: var(--input-text);
    font-size: 15px;
}

.seo-sex-field {
    display: grid;
    grid-template-columns: repeat(2, auto);
    align-items: center;
    min-height: 38px;
}

.seo-sex-field > span {
    grid-column: 1 / -1;
}

.seo-sex-field label {
    color: var(--text-main);
    white-space: nowrap;
}

.seo-values-submit {
    min-height: 38px;
    padding: 7px 14px;
    border: 0;
    border-radius: 7px;
    background: var(--save-action-bg);
    color: var(--save-action-text);
    font-weight: 700;
    cursor: pointer;
}

.seo-standard-selected-row > th {
    background: var(--accent-soft);
    color: var(--accent-text);
}

.seo-standards-table td.seo-standard-selected-cell {
    background: var(--success-bg);
    color: var(--success-text);
    box-shadow: inset 0 0 0 2px var(--success-border);
    font-weight: 800;
}

.seo-standards-card {
    min-width: 0;
}

.seo-table-scroll {
    margin-top: 12px;
    overflow-x: auto;
}

.seo-standards-table {
    width: 100%;
    min-width: 510px;
    border-collapse: collapse;
    color: var(--text-main);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.seo-standards-table th,
.seo-standards-table td {
    padding: 7px 8px;
    border: 1px solid var(--border-card);
    text-align: right;
    white-space: nowrap;
}

.seo-standards-table thead th {
    background: var(--accent-soft);
    color: var(--accent-text);
    font-weight: 700;
}

.seo-standards-table th:first-child {
    text-align: left;
}

.seo-standards-table tbody tr:nth-child(even) {
    background: var(--surface-soft, var(--input-bg));
}

.seo-standards-note {
    margin: 0;
    padding: 0 4px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.seo-list {
    margin: 12px 0 0;
    padding-left: 20px;
    color: var(--text-soft);
    line-height: 1.45;
}

.seo-join-block {
    padding: 18px 20px;
    border-color: var(--success-border);
    background: linear-gradient(135deg, var(--success-bg), var(--surface-bg));
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: start;
}

.seo-join-lead {
    margin: 8px 0 0;
}

.seo-join-list {
    margin: 12px 0 0;
    padding-left: 20px;
    color: var(--text-main);
    line-height: 1.5;
}

.seo-join-list li + li {
    margin-top: 7px;
}

.seo-join-cta {
    justify-self: end;
    align-self: auto;
}

@media (max-width: 760px) {
    .seo-card-grid,
    .seo-layout,
    .seo-standards-grid {
        grid-template-columns: 1fr;
    }

    .seo-calc-grid {
        grid-template-columns: 1fr;
    }

    .seo-layout-1rm .seo-tool-panel {
        grid-template-columns: 1fr;
    }

    .seo-layout-1rm .seo-tool-panel > * {
        grid-column: 1;
    }

    .seo-layout-1rm .seo-calc-grid-1rm {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .seo-values-grid {
        grid-template-columns: 1fr;
    }

    .seo-join-cta {
        justify-self: stretch;
    }
}

@media (max-width: 480px) {
    .seo-layout-1rm .seo-calc-grid-1rm {
        grid-template-columns: 1fr;
    }
}

/* What is new */
.whatsnew-hero {
    position: relative;
}

.whatsnew-admin-link {
    position: absolute;
    top: 18px;
    right: 18px;
    text-decoration: none;
}

.whatsnew-current-version {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    margin-top: 12px;
    padding: 7px 12px;
    border: 1px solid var(--success-border);
    border-radius: 999px;
    background: var(--success-bg);
}

.whatsnew-timeline {
    position: relative;
    display: grid;
    gap: 18px;
    margin-top: 20px;
    padding-left: 28px;
}

.whatsnew-timeline::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 8px;
    width: 2px;
    background: var(--border-card);
}

.whatsnew-entry {
    position: relative;
}

.whatsnew-entry-marker {
    position: absolute;
    top: 23px;
    left: -26px;
    width: 14px;
    height: 14px;
    border: 3px solid var(--surface-bg);
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 1px var(--border-card);
}

.whatsnew-entry-card,
.adminchangelog-list,
.adminchangelog-editor {
    border: 1px solid var(--border-card);
    border-radius: 14px;
    background: var(--surface-bg);
    box-shadow: var(--shadow-card);
}

.whatsnew-entry-card {
    padding: 18px 20px;
}

.whatsnew-entry-header,
.adminchangelog-editor-head,
.adminchangelog-list-head,
.adminchangelog-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
}

.whatsnew-entry-header > div {
    display: flex;
    gap: 10px;
    align-items: center;
}

.whatsnew-version {
    padding: 4px 9px;
    border-radius: 999px;
    color: var(--text-inverse);
    background: var(--accent);
    font-weight: 700;
}

.whatsnew-entry time,
.whatsnew-retro {
    color: var(--text-muted);
    font-size: 12px;
}

.whatsnew-retro {
    padding: 4px 8px;
    border: 1px solid var(--border-card);
    border-radius: 999px;
}

.whatsnew-entry h2 {
    margin: 14px 0 8px;
}

.whatsnew-body p {
    margin: 8px 0;
    line-height: 1.55;
}

.whatsnew-list {
    margin: 10px 0 0;
    padding-left: 21px;
    line-height: 1.55;
}

.whatsnew-list li + li {
    margin-top: 6px;
}

.whatsnew-body a {
    color: var(--accent-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.whatsnew-entry-footer {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border-soft);
}

.whatsnew-stats {
    display: flex;
    gap: 8px;
    align-items: center;
    color: var(--text-muted);
    font-size: 13px;
}

.whatsnew-stats > span,
.whatsnew-stats button,
.whatsnew-edit-link {
    min-height: 32px;
    padding: 5px 9px;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    color: var(--text-soft);
    background: var(--surface-bg-soft);
}

.whatsnew-stats > span,
.whatsnew-stats button {
    display: inline-flex;
    gap: 5px;
    align-items: center;
}

.whatsnew-stats button {
    cursor: pointer;
}

.whatsnew-stats button:hover,
.whatsnew-stats button.active {
    border-color: var(--border-accent);
    color: var(--accent-text);
    background: var(--accent-soft);
}

.whatsnew-stats button:disabled {
    cursor: wait;
    opacity: .65;
}

.whatsnew-edit-link {
    display: inline-flex;
    align-items: center;
    color: var(--accent-text);
    text-decoration: none;
}

.whatsnew-archive {
    margin-top: 20px;
    border: 1px solid var(--border-card);
    border-radius: 14px;
    background: var(--surface-bg);
    box-shadow: var(--shadow-card);
}

.whatsnew-archive > summary {
    padding: 16px 18px;
    color: var(--text-main);
    cursor: pointer;
}

.whatsnew-archive > summary > span {
    display: inline-flex;
    gap: 10px;
    align-items: baseline;
    margin-left: 7px;
}

.whatsnew-archive > summary small {
    color: var(--text-muted);
    font-weight: 400;
}

.whatsnew-archive-unread-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    box-sizing: border-box;
    background: #f97316;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.whatsnew-archive[open] > summary {
    border-bottom: 1px solid var(--border-soft);
}

.whatsnew-archive-list {
    display: grid;
    gap: 7px;
    padding: 10px;
}

.whatsnew-archive-item {
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    background: var(--surface-bg-soft);
}

.whatsnew-archive-item > summary {
    display: grid;
    grid-template-columns: auto 82px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 9px 11px;
    cursor: pointer;
}

.whatsnew-archive-item.unread > summary {
    grid-template-columns: auto 8px 82px minmax(0, 1fr);
}

.whatsnew-release-unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f97316;
}

.whatsnew-archive-item > summary::marker {
    color: var(--accent);
}

.whatsnew-archive-item > summary time {
    color: var(--text-muted);
    font-size: 12px;
}

.whatsnew-archive-item > summary strong {
    min-width: 0;
}

.whatsnew-archive-item[open] {
    border-color: var(--border-accent);
    background: var(--surface-bg);
}

.whatsnew-archive-item[open] > summary {
    border-bottom: 1px solid var(--border-soft);
}

.whatsnew-archive-body {
    padding: 6px 14px 12px;
}

/* Changelog administration */
.adminchangelog-page {
    max-width: 1180px;
}

.adminchangelog-flash {
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid var(--success-border);
    border-radius: 10px;
    color: var(--success-text);
    background: var(--success-bg);
}

.adminchangelog-flash.error {
    border-color: var(--danger-border);
    color: var(--danger-text);
    background: var(--danger-bg);
}

.adminchangelog-layout {
    display: grid;
    grid-template-columns: minmax(230px, 270px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.adminchangelog-list,
.adminchangelog-editor {
    padding: 16px;
}

.adminchangelog-list {
    display: grid;
    gap: 8px;
}

.adminchangelog-list h2,
.adminchangelog-editor h1,
.adminchangelog-editor h2 {
    margin: 0;
}

.adminchangelog-list-item {
    display: grid;
    gap: 4px;
    padding: 10px 11px;
    border: 1px solid var(--border-card);
    border-radius: 9px;
    color: var(--text-main);
    text-decoration: none;
}

.adminchangelog-list-item:hover,
.adminchangelog-list-item.active {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.adminchangelog-list-item small {
    color: var(--text-muted);
}

.adminchangelog-state {
    padding: 5px 9px;
    border-radius: 999px;
    color: var(--text-muted);
    background: var(--surface-bg-strong);
}

.adminchangelog-state.published {
    color: var(--success-text);
    background: var(--success-bg);
}

.adminchangelog-form {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

.adminchangelog-form label {
    display: grid;
    gap: 6px;
}

.adminchangelog-check {
    grid-template-columns: auto 1fr;
    justify-content: start;
}

.adminchangelog-languages {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.adminchangelog-languages > div {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border-card);
    border-radius: 12px;
    background: var(--surface-bg-soft);
}

.adminchangelog-form textarea {
    width: 100%;
    min-height: 210px;
    resize: vertical;
}

.adminchangelog-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 2px;
}

.adminchangelog-toolbar button {
    min-width: 34px;
    min-height: 30px;
    padding: 4px 9px;
    border: 1px solid var(--control-border);
    border-radius: 8px;
    color: var(--control-text);
    background: var(--control-bg);
    cursor: pointer;
}

.adminchangelog-toolbar button:hover {
    border-color: var(--border-accent);
    background: var(--accent-soft);
}

.adminchangelog-publish-actions {
    justify-content: flex-start;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border-card);
}

@media (max-width: 850px) {
    .adminchangelog-layout,
    .adminchangelog-languages {
        grid-template-columns: 1fr;
    }

    .whatsnew-entry-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .whatsnew-entry-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .whatsnew-admin-link {
        position: static;
        float: right;
        margin: 0 0 10px 12px;
    }

    .whatsnew-archive-item > summary {
        grid-template-columns: auto 1fr;
    }

    .whatsnew-archive-item.unread > summary {
        grid-template-columns: auto 8px 1fr;
    }

    .whatsnew-archive-item > summary strong {
        grid-column: 1 / -1;
    }
}
.oauth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 0;
    color: var(--muted, #777);
}
.auth-login-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 12px;
}
.auth-login-links .auth-secondary-toggle {
    margin: 0;
}
.auth-register-entry {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    text-align: center;
}
.auth-register-entry strong {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
}
.auth-register-cta {
    min-height: 32px;
    padding: 6px 14px;
    border: 1px solid color-mix(in srgb, var(--success-strong) 62%, var(--border-main));
    border-radius: 10px;
    background: color-mix(in srgb, var(--success-strong) 44%, var(--action-secondary-bg));
    color: var(--success-text);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.auth-register-cta:hover {
    border-color: color-mix(in srgb, var(--success-strong) 78%, var(--border-main));
    background: color-mix(in srgb, var(--success-strong) 56%, var(--action-secondary-bg));
}
.auth-register-cta:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--success-strong) 72%, transparent);
    outline-offset: 2px;
}
html[data-theme="light"] .auth-register-cta {
    background: color-mix(in srgb, var(--success-strong) 54%, var(--action-secondary-bg));
    border-color: color-mix(in srgb, var(--success-strong) 68%, var(--border-main));
    color: #0f5132;
}
html[data-theme="light"] .auth-register-cta:hover {
    background: color-mix(in srgb, var(--success-strong) 64%, var(--action-secondary-bg));
}
html[data-theme="dark"] .auth-register-cta {
    background: color-mix(in srgb, var(--success-strong) 34%, var(--action-secondary-bg));
    border-color: color-mix(in srgb, var(--success-strong) 54%, var(--border-main));
    color: var(--success-text);
}
html[data-theme="dark"] .auth-register-cta:hover {
    background: color-mix(in srgb, var(--success-strong) 44%, var(--action-secondary-bg));
}
.oauth-divider::before,
.oauth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(127, 127, 127, .3);
}
.oauth-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 42px;
    padding: 10px 16px;
    border: 0;
    border-radius: 10px;
    background: #ffcc00;
    color: #111;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
.oauth-yandex-button {
    width: 100%;
}
.oauth-button-secondary {
    background: #2f3340;
    color: #fff;
}
.oauth-card {
    max-width: 820px;
    margin: 30px auto;
}
body.oauth-interstitial-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.oauth-interstitial-main {
    width: 100%;
    flex: 1 0 auto;
    box-sizing: border-box;
}
body.oauth-interstitial-page #footer {
    flex: 0 0 auto;
}
.oauth-complete-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.oauth-form {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid rgba(127, 127, 127, .3);
    border-radius: 12px;
}
.oauth-form label {
    display: grid;
    gap: 6px;
}
.oauth-form input {
    box-sizing: border-box;
    width: 100%;
    padding: 10px 12px;
}
.oauth-password-form input.password-field-valid {
    border-color: var(--success-strong);
    background: color-mix(in srgb, var(--success-strong) 9%, var(--shell-bg));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--success-strong) 35%, transparent);
}
.oauth-form .password-recovery-option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 8px 12px;
    border: 1px solid rgba(127, 127, 127, .3);
    border-radius: 10px;
    cursor: pointer;
}
.oauth-form .password-recovery-option input[type="radio"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
}
.oauth-error {
    margin: 12px 0;
    padding: 12px;
    border-radius: 8px;
    background: rgba(190, 30, 45, .14);
    color: #b00020;
}
.oauth-identity-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.oauth-identity-row + .oauth-identity-row {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(127, 127, 127, .25);
}
.oauth-provider-head,
.oauth-unlink-form {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.oauth-provider-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
}
.oauth-current-badge {
    display: inline-flex;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(127, 127, 127, .16);
    font-size: .88em;
}
.oauth-keep-email {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .9em;
}
.oauth-button:disabled {
    opacity: .55;
    cursor: not-allowed;
}
.oauth-explainer,
.oauth-merge-box {
    margin-bottom: 14px;
    padding: 10px 12px;
    border: 1px solid rgba(127, 127, 127, .25);
    border-radius: 10px;
}
.oauth-explainer summary,
.oauth-merge-box summary {
    cursor: pointer;
    font-weight: 700;
}
.oauth-explainer[open] summary,
.oauth-merge-box[open] summary {
    margin-bottom: 10px;
}
.oauth-explainer-content {
    color: var(--text-main);
    font-size: 15px;
    line-height: 1.55;
}
.oauth-explainer-content p {
    margin: 0 0 12px;
}
.oauth-explainer-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding-left: 22px;
}
.oauth-explainer-list li {
    padding-left: 3px;
}
.oauth-explainer-list strong {
    display: block;
    margin-bottom: 2px;
    color: var(--text-main);
}
.oauth-merge-box .oauth-form {
    margin-top: 10px;
}
.oauth-recovery-panel {
    display: grid;
    gap: 9px;
    margin-top: 14px;
}
.oauth-recovery-warning {
    padding: 9px 11px;
    border-radius: 9px;
    background: rgba(190, 90, 20, .14);
    color: var(--warning-text);
}
.oauth-recovery-list {
    display: grid;
    gap: 7px;
}
.oauth-recovery-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    border: 1px solid rgba(127, 127, 127, .22);
    border-radius: 9px;
}
.oauth-recovery-actions,
.oauth-recovery-add {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}
.oauth-recovery-actions form {
    margin: 0;
}
.oauth-recovery-add .user-input {
    width: min(360px, 100%);
    min-width: min(280px, 100%);
    max-width: 100%;
    min-height: 42px;
    border-radius: 10px;
    padding: 10px 12px;
    background: var(--surface-bg-raised);
}
.oauth-status-success {
    color: var(--success-strong);
    font-weight: 700;
}
.oauth-status-warning {
    color: var(--warning-strong);
    font-weight: 700;
}
@media (max-width: 700px) {
    .oauth-complete-grid {
        grid-template-columns: 1fr;
    }
}

/* OAuth provider buttons */
.oauth-login-buttons {
    display: grid;
    gap: 10px;
}
.oauth-login-buttons .oauth-button {
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid var(--border-main);
    border-radius: 999px;
    background: var(--action-secondary-bg);
    color: var(--action-secondary-text);
    font-size: 15px;
    font-weight: 600;
    box-shadow: none;
    transition: background-color .18s ease;
}
.oauth-login-buttons .oauth-button:hover {
    background: var(--action-secondary-bg-hover);
}
.oauth-login-buttons .oauth-button:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}
.oauth-login-buttons .oauth-button:active {
    filter: brightness(.97);
}
.oauth-provider-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}
.oauth-provider-action > img,
.oauth-provider-logo,
.oauth-inline-provider-logo {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex: 0 0 auto;
}
.oauth-inline-provider-logo {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-left: 5px;
}
.oauth-provider-head .oauth-provider-logo {
    border-radius: 4px;
}
.oauth-login-value,
.oauth-confirmed-account strong {
    font-weight: 800;
    color: var(--text-main, inherit);
}
.oauth-create-account-form {
    justify-content: space-between;
}
.oauth-create-account-form .oauth-button {
    margin-top: auto;
}
.oauth-credentials-form {
    margin-top: 12px;
    max-width: 540px;
}
.oauth-provider-email-lock {
    white-space: nowrap;
}
.oauth-recovery-address {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px;
}

/* OAuth-only account: optional local authorization actions */
.oauth-local-auth-row {
    align-items: stretch;
}
.oauth-password-section {
    width: 100%;
}
.oauth-local-auth-empty {
    margin-top: 8px;
    padding: 11px 13px;
    border: 1px solid rgba(127, 127, 127, .24);
    border-radius: 10px;
}
.oauth-local-auth-empty-label {
    display: block;
    font-weight: 800;
    margin-bottom: 4px;
}
.oauth-local-auth-empty p,
.oauth-action-card-body > p {
    margin: 0;
    line-height: 1.5;
}
.oauth-local-auth-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}
.oauth-action-card {
    padding: 0;
    border: 1px solid rgba(127, 127, 127, .25);
    border-radius: 10px;
    overflow: hidden;
}
.oauth-action-card summary {
    cursor: pointer;
    padding: 12px 14px;
    font-weight: 800;
    list-style-position: inside;
}
.oauth-action-card[open] summary {
    border-bottom: 1px solid rgba(127, 127, 127, .2);
}
.oauth-action-card-body {
    padding: 13px 14px 14px;
}
.oauth-action-card .oauth-form {
    margin-top: 12px;
}
@media (max-width: 760px) {
    .oauth-local-auth-actions {
        grid-template-columns: 1fr;
    }
}

/* ====== User profile tabs: media separator and avatar edit overlay ====== */
.user-media-section-splitter {
    height: 1px;
    margin: 4px 0 8px;
    background: var(--border-main);
}

.user-media-tab-pane[data-tab="media"] .user-media-subtabs-head {
    margin-top: 0;
}

.user-main-avatar {
    position: relative;
    cursor: default;
}

.user-main-avatar:hover {
    filter: none;
    border-color: var(--border-main);
}

.user-avatar-edit-btn {
    position: absolute;
    top: 7px;
    right: 7px;
    z-index: 2;
    width: 32px;
    height: 32px;
    padding: 6px;
    border: 1px solid var(--border-strong);
    border-radius: 9px;
    background: var(--surface-bg);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .22);
}

.user-avatar-edit-btn:hover {
    filter: brightness(1.08);
}

.user-avatar-edit-btn > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: transparent;
}

/* ===== Authorization tab: compact method cards ===== */
.oauth-auth-method-card {
    display: grid;
    gap: 0;
    margin-top: 10px;
    border: 1px solid var(--border-main);
    border-radius: 12px;
    background: var(--surface-bg-raised);
    overflow: hidden;
}
.oauth-auth-method-card + .oauth-auth-method-card {
    margin-top: 10px;
}
.oauth-auth-method-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 58px;
    padding: 9px 11px;
}
.oauth-auth-method-title {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.oauth-auth-method-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    border: 1px solid var(--border-main);
    background: var(--surface-bg);
    font-size: 21px;
}
.oauth-auth-method-name {
    display: flex;
    align-items: center;
    gap: 7px;
}

.oauth-local-method-logo {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    font-size: 18px;
    line-height: 1;
}
.oauth-auth-method-status {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.oauth-auth-method-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}
.oauth-auth-method-body,
.oauth-auth-method-footer {
    padding: 9px 11px 11px;
    border-top: 1px solid var(--border-main);
}
.oauth-auth-method-description {
    margin: 0 0 8px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.4;
}
.oauth-auth-method-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 42px;
}
.oauth-auth-method-footer .oauth-unlink-form {
    width: 100%;
    justify-content: space-between;
    gap: 10px;
}
.oauth-auth-method-footer .oauth-unlink-form > .oauth-button:last-child {
    margin-left: auto;
}
.oauth-auth-method-card .oauth-button {
    min-height: 36px;
    padding: 7px 14px;
}
.oauth-provider-avatar-wrap {
    position: relative;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
}
.oauth-provider-avatar-wrap .oauth-provider-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid var(--border-main);
}
.oauth-provider-avatar-empty {
    display: grid;
    place-items: center;
    box-sizing: border-box;
    background: var(--surface-bg);
}
.oauth-provider-avatar-empty img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}
.oauth-avatar-switch-form {
    margin: 0;
}
.oauth-avatar-switch-overlay {
    position: absolute;
    top: -5px;
    left: -5px;
    z-index: 2;
}
.oauth-switch {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    line-height: 1;
}
.oauth-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.oauth-switch-track {
    position: relative;
    display: block;
    width: 30px;
    height: 18px;
    box-sizing: border-box;
    border: 1px solid var(--border-main);
    border-radius: 999px;
    background: var(--surface-bg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
    transition: background .15s ease, border-color .15s ease;
}
.oauth-switch-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--text-muted);
    transition: transform .15s ease, background .15s ease;
}
.oauth-switch input:checked + .oauth-switch-track {
    border-color: var(--success-strong);
    background: color-mix(in srgb, var(--success-strong) 28%, var(--surface-bg));
}
.oauth-switch input:checked + .oauth-switch-track .oauth-switch-thumb {
    transform: translateX(12px);
    background: var(--success-strong);
}
.oauth-switch input:focus-visible + .oauth-switch-track {
    outline: 2px solid var(--accent-color, #4b7bec);
    outline-offset: 2px;
}
.oauth-auth-method-local .oauth-recovery-panel {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-main);
}
.oauth-auth-method-card .oauth-recovery-item {
    padding: 7px 9px;
}
.oauth-auth-method-card .oauth-local-auth-actions {
    margin-top: 8px;
}
.oauth-auth-method-card .oauth-action-card summary {
    padding: 9px 11px;
}
.oauth-auth-method-card .oauth-action-card-body {
    padding: 10px 11px 11px;
}
.oauth-auth-method-card .oauth-form {
    gap: 9px;
    padding: 11px;
}
@media (max-width: 700px) {
    .oauth-auth-method-header {
        align-items: flex-start;
    }
    .oauth-auth-method-footer .oauth-unlink-form {
        align-items: flex-start;
        flex-direction: column;
    }
    .oauth-auth-method-footer .oauth-button,
    .oauth-auth-method-footer .oauth-provider-action {
        width: 100%;
    }
}


/* OAuth merge risk states and embedded statistics */
.oauth-merge-notice,.oauth-merge-blocked{padding:10px 12px;border:1px solid var(--border-color,#ccd6e3);border-radius:10px;margin-bottom:10px;line-height:1.35}
.oauth-merge-notice-clean{background:rgba(31,180,100,.08)}
.oauth-merge-notice-danger,.oauth-merge-blocked{background:rgba(210,80,45,.09)}
.oauth-merge-notice ul{margin:6px 0 0 20px;padding:0}
.oauth-destructive-confirm{padding:8px 10px;border-radius:8px;background:rgba(210,80,45,.08)}
.oauth-password-rules{font-size:.9em;opacity:.78;margin:0 0 8px}
.user-statistics-fragment{min-height:80px}

/* Compact destructive-merge confirmation: do not let global input styles stretch the checkbox. */
.oauth-destructive-confirm{
    display:flex;
    align-items:flex-start;
    gap:9px;
    cursor:pointer;
    line-height:1.35;
}
.oauth-destructive-confirm input[type="checkbox"]{
    flex:0 0 auto;
    width:16px !important;
    height:16px !important;
    min-width:16px;
    margin:2px 0 0;
    padding:0 !important;
    border-radius:3px;
}

.feedback-fab {
    position: relative;
}

.feedback-fab-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border: 2px solid var(--page-bg);
    border-radius: 999px;
    background: #f59e0b;
    color: #111827;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    box-sizing: border-box;
}

.feedback-fab-badge[hidden] {
    display: none !important;
}

/* Feedback: конкретная заявка, которая держит общий индикатор внимания. */
.feedback-admin-item.needs-attention {
    box-shadow: inset 3px 0 0 #ff9800;
}

.feedback-attention-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 7px;
    border-radius: 50%;
    background: #ff9800;
    vertical-align: 1px;
}

.feedback-admin-tab.has-attention::after {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 6px;
    border-radius: 50%;
    background: #ff9800;
    vertical-align: 1px;
}

/* ===== C16.1: user-facing device and session manager ===== */
.session-manager-header {
    align-items: flex-start;
}
.session-revoke-all {
    max-width: 250px;
    white-space: normal;
    line-height: 1.2;
}
.session-manager-body {
    display: grid;
    gap: 12px;
}
.session-safety-hint {
    display: grid;
    gap: 3px;
    padding: 11px 13px;
    border: 1px solid var(--border-main);
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface-bg) 78%, var(--accent-bg, transparent));
    font-size: 13px;
    line-height: 1.4;
}
.session-safety-hint span,
.session-card-summary,
.session-auth-method,
.session-technical-details {
    color: var(--text-muted);
}
.session-group-title {
    margin-top: 2px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.session-list {
    display: grid;
    gap: 8px;
}
.session-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 12px;
    border: 1px solid var(--border-main);
    border-radius: 11px;
    background: var(--surface-bg);
}
.session-card-current {
    border-color: color-mix(in srgb, var(--border-main) 55%, var(--success-strong));
    background: color-mix(in srgb, var(--surface-bg) 94%, var(--success-strong));
}
.session-card-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border-main);
    border-radius: 50%;
    font-size: 16px;
    color: var(--text-muted);
    background: var(--surface-bg-raised);
}
.session-card-current .session-card-icon {
    color: var(--success-strong);
}
.session-card-main {
    min-width: 0;
}
.session-card-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.session-card-title {
    overflow-wrap: anywhere;
}
.session-card-summary,
.session-auth-method {
    margin-top: 3px;
    font-size: 13px;
    line-height: 1.35;
}
.session-technical-details {
    margin-top: 7px;
    font-size: 12px;
}
.session-technical-details summary {
    cursor: pointer;
    width: fit-content;
}
.session-technical-details > div {
    display: grid;
    gap: 3px;
    margin-top: 6px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--surface-bg-raised);
}
.session-user-agent {
    overflow-wrap: anywhere;
}
.session-empty-state {
    padding: 12px;
    border: 1px dashed var(--border-main);
    border-radius: 10px;
    color: var(--text-muted);
    text-align: center;
}
@media (max-width: 720px) {
    .session-manager-header {
        align-items: stretch;
        flex-direction: column;
    }
    .session-manager-header form,
    .session-revoke-all {
        width: 100%;
        max-width: none;
    }
    .session-card {
        grid-template-columns: auto minmax(0, 1fr);
    }
    .session-card > form {
        grid-column: 1 / -1;
    }
    .session-card > form .oauth-button {
        width: 100%;
    }
}

/* Auth login/register modes: one consistent vertical action layout. */
body.auth-landing .auth-actions,
body.auth-landing #auth-default-fields.auth-registration-mode .auth-actions {
    width: 100%;
    max-width: none;
    margin-top: 14px;
    justify-self: stretch;
}

body.auth-landing .auth-login-links,
body.auth-landing #auth-default-fields.auth-registration-mode .auth-login-links {
    width: 100%;
    margin-top: 12px;
    justify-self: stretch;
}

body.auth-landing .auth-recovery-hint {
    width: 100%;
    margin: 10px 0 0;
    text-align: center;
}

@media (min-width: 761px) {
    body.auth-landing #auth-default-fields.auth-registration-mode {
        grid-template-rows: auto auto auto auto auto auto auto auto auto;
    }

    body.auth-landing #auth-default-fields.auth-registration-mode #auth-login-row {
        grid-column: 1;
        grid-row: 1;
    }

    body.auth-landing #auth-default-fields.auth-registration-mode #auth-pass-row {
        grid-column: 1;
        grid-row: 2;
    }

    body.auth-landing #auth-default-fields.auth-registration-mode #auth-register-confirm-row {
        grid-column: 1;
        grid-row: 3;
    }

    body.auth-landing #auth-default-fields.auth-registration-mode #auth-captcha-row {
        grid-column: 2;
        grid-row: 1 / span 3;
    }

    body.auth-landing #auth-default-fields.auth-registration-mode .auth-recovery-hint {
        grid-column: 1 / -1;
        grid-row: 4;
    }

    body.auth-landing #auth-default-fields.auth-registration-mode #auth-login-status,
    body.auth-landing #auth-default-fields.auth-registration-mode #auth-register-status {
        grid-column: 1 / -1;
        grid-row: 5;
        width: 100%;
        justify-self: stretch;
        text-align: center;
    }

    body.auth-landing #auth-default-fields.auth-registration-mode .auth-actions {
        grid-column: 1 / -1;
        grid-row: 6;
    }

    body.auth-landing #auth-default-fields.auth-registration-mode .auth-login-links {
        grid-column: 1 / -1;
        grid-row: 7;
    }

    body.auth-landing #auth-default-fields.auth-registration-mode .oauth-divider {
        grid-column: 1 / -1;
        grid-row: 8;
    }

    body.auth-landing #auth-default-fields.auth-registration-mode .oauth-login-buttons {
        grid-column: 1 / -1;
        grid-row: 9;
    }
}


/* Embedded password recovery uses the same card geometry as password change. */
.password-forgot-help {
    margin: 0 0 12px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.password-forgot-panel #password-forgot-captcha {
    margin-bottom: 10px;
}

#btn-password-forgot-submit {
    width: 100%;
    min-height: 40px;
    border-radius: 999px;
}

.password-forgot-success {
    padding: 10px 0 2px;
    line-height: 1.5;
}

/* Unified secondary auth forms: registration, recovery and password change. */
body.auth-landing .auth-form-back,
body.auth-landing .password-change-back {
    width: fit-content;
    margin: 0 0 14px;
    padding: 0;
    text-align: left;
}

body.auth-landing #btn-register,
body.auth-landing #btn-password-forgot-submit,
body.auth-landing #btn-change-password {
    width: 100%;
    min-height: 40px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--border-main);
    background: var(--control-bg);
    color: var(--text-main);
    box-shadow: 0 0 0 2px var(--index-focus-shadow), 0 0 14px var(--index-focus-shadow);
    filter: brightness(1.04);
    cursor: pointer;
}

body.auth-landing #btn-register:hover:not(:disabled),
body.auth-landing #btn-password-forgot-submit:hover:not(:disabled),
body.auth-landing #btn-change-password:hover:not(:disabled) {
    filter: brightness(1.08);
}

body.auth-landing #btn-register:disabled,
body.auth-landing #btn-password-forgot-submit:disabled,
body.auth-landing #btn-change-password:disabled {
    opacity: .52;
    box-shadow: none;
    filter: none;
    cursor: not-allowed;
}

/* Auxiliary navigation and OAuth belong only to the login phase. */
body.auth-landing #auth-default-fields.auth-registration-mode .auth-login-links,
body.auth-landing #auth-default-fields.auth-registration-mode .auth-register-entry,
body.auth-landing #auth-default-fields.auth-registration-mode .oauth-divider,
body.auth-landing #auth-default-fields.auth-registration-mode .oauth-login-buttons,
body.auth-landing #auth-default-fields.auth-registration-mode #mailru-login-status {
    display: none !important;
}

@media (min-width: 761px) {
    body.auth-landing #auth-default-fields.auth-registration-mode {
        grid-template-rows: auto auto auto auto auto auto auto;
    }

    body.auth-landing #auth-default-fields.auth-registration-mode #btn-auth-register-back {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    body.auth-landing #auth-default-fields.auth-registration-mode #auth-login-row {
        grid-row: 2;
    }

    body.auth-landing #auth-default-fields.auth-registration-mode #auth-pass-row {
        grid-row: 3;
    }

    body.auth-landing #auth-default-fields.auth-registration-mode #auth-register-confirm-row {
        grid-row: 4;
    }

    body.auth-landing #auth-default-fields.auth-registration-mode #auth-captcha-row {
        grid-row: 2 / span 3;
    }

    body.auth-landing #auth-default-fields.auth-registration-mode .auth-recovery-hint {
        grid-row: 5;
    }

    body.auth-landing #auth-default-fields.auth-registration-mode #auth-login-status,
    body.auth-landing #auth-default-fields.auth-registration-mode #auth-register-status {
        grid-row: 6;
    }

    body.auth-landing #auth-default-fields.auth-registration-mode .auth-actions {
        grid-row: 7;
    }
}


/* Public members directory */
.members-table .member-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    text-decoration: none;
}
.members-table .member-avatar {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: 50%;
    object-fit: cover;
}
.members-table .member-login {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.members-table td,
.members-table th {
    vertical-align: middle;
}


/* WRPF live calculator */
.seo-values-grid.is-loading { opacity: 0.72; }
.seo-values-grid input:focus,
.seo-values-grid select:focus { outline: 2px solid var(--border-accent); outline-offset: 1px; }

/* Stage 4: plan tabs use the shared full-width third-level navigation. */
.section-tabs-bar.plans-inner-tabs {
    margin: 0;
}

.section-tab-item.plans-inner-tab {
    width: auto;
    min-height: 38px;
    padding: 0 9px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--tab-text);
    font-size: inherit;
}

.section-tab-item.plans-inner-tab:hover {
    filter: none;
    color: var(--tab-text-hover);
    background: var(--tab-bg-hover);
}

.section-tab-item.plans-inner-tab.active {
    color: var(--accent-text);
    border-color: transparent;
    border-bottom-color: var(--border-accent);
    background: var(--accent-soft);
}

.section-tab-item.plans-inner-tab-trainer {
    border-color: transparent;
    background: transparent;
}

.section-tab-item.plans-inner-tab-trainer:hover {
    background: var(--tab-bg-hover);
}

.section-tab-item.plans-inner-tab-trainer.active {
    border-bottom-color: var(--border-accent);
    background: var(--accent-soft);
}

body.trainer-mode .section-tabs-bar {
    background: var(--surface-bg-raised);
    border-bottom-color: var(--action-secondary-bg-hover);
}

@media (max-width: 700px) {
    .section-tab-item.plans-inner-tab {
        width: auto;
        justify-content: center;
    }
}


/* User navigation correction (stage 5.1). */
.section-tabs-bar.user-profile-tabs-bar .section-tabs-inner,
.section-tabs-bar.user-media-subtabs-bar .section-tabs-inner {
    align-items: stretch;
}

.section-tabs-bar.user-profile-tabs-bar .section-tab-item,
.section-tabs-bar.user-media-subtabs-bar .section-tab-item {
    min-height: 40px;
    padding: 0 10px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--tab-text);
    font: inherit;
    line-height: 1.2;
    filter: none;
}

.section-tabs-bar.user-media-subtabs-bar .section-tab-item {
    min-height: 38px;
    padding: 0 9px;
}

.section-tabs-bar.user-profile-tabs-bar .section-tab-item:hover,
.section-tabs-bar.user-media-subtabs-bar .section-tab-item:hover {
    color: var(--tab-text-hover);
    background: var(--tab-bg-hover);
    filter: none;
}

.section-tabs-bar.user-profile-tabs-bar .section-tab-item.active,
.section-tabs-bar.user-media-subtabs-bar .section-tab-item.active {
    color: var(--accent-text);
    border-bottom-color: var(--border-accent);
    background: var(--accent-soft);
    font-weight: 600;
}

.section-tabs-bar.user-profile-tabs-bar .section-tab-icon {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
}

.section-tabs-bar.user-media-subtabs-bar .section-tab-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
}

.section-tabs-bar.user-media-subtabs-bar.user-hidden {
    display: none !important;
}


/* First target: deliberately simple two-select dialog for exercises without history. */
.preview-first-target-modal-content {
    width: min(520px, calc(100vw - 28px));
}

.preview-first-target-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    margin-top: 18px;
}

.preview-first-target-field {
    display: grid;
    gap: 7px;
    font-weight: 600;
}

.preview-first-target-field select {
    width: 100%;
    min-height: 42px;
    padding: 8px 34px 8px 12px;
    border: 1px solid var(--border-color, #b8c6d8);
    border-radius: 10px;
    background: var(--input-bg, #fff);
    color: var(--text-color, #172033);
    font: inherit;
}

@media (max-width: 520px) {
    .preview-first-target-fields {
        grid-template-columns: 1fr;
    }
}

.preview-exercise-cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.preview-exercise-info {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.preview-exercise-name {
    min-width: 0;
}

.preview-weight-range-warning {
    max-width: 440px;
    color: var(--warning-text);
    font-size: 0.78rem;
    line-height: 1.25;
}

.preview-row-undo {
    appearance: none;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    background: var(--surface-bg);
    color: var(--preview-text-emphasis);
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
}

.preview-row-undo:hover:not(:disabled) {
    border-color: var(--preview-caret);
    box-shadow: 0 0 0 1px var(--preview-sync-soft);
}

.preview-row-undo:disabled {
    opacity: 0.32;
    cursor: default;
}


/* Context navigation moved out of the global header. */
.graph-title-block { position: relative; padding-bottom: 58px; }
.graph-title-actions { position: absolute; right: 16px; bottom: 14px; display: flex; justify-content: flex-end; }
.legacy-nav-button { display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:6px 16px;border:2px solid currentColor;border-radius:999px;background:transparent;color:inherit;font:inherit;font-weight:700;line-height:1.1;text-decoration:none;cursor:pointer; }
.legacy-nav-button:hover,.legacy-nav-button:focus-visible { border-color:var(--action-primary-bg,#2f6fed);color:var(--action-primary-bg,#2f6fed); }
.users-public-bottom-nav { max-width:1100px;margin:14px auto 0;display:flex;justify-content:flex-end; }
@media (max-width:640px){.graph-title-block{padding-bottom:54px}.graph-title-actions{right:12px;bottom:12px}.users-public-bottom-nav{padding:0 12px}}

/* Live week reconciliation with the active plan. */
.exercise-card.exercise-card-plan-added {
    background: color-mix(in srgb, var(--success, #22c55e) 10%, var(--card-bg, transparent));
    border-color: color-mix(in srgb, var(--success, #22c55e) 45%, var(--border-color, #94a3b8));
}
.exercise-card.exercise-card-plan-removed {
    background: color-mix(in srgb, var(--danger, #ef4444) 10%, var(--card-bg, transparent));
    border-color: color-mix(in srgb, var(--danger, #ef4444) 45%, var(--border-color, #94a3b8));
}
.exercise-plan-status-note {
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
    font-size: 12px;
    font-style: italic;
    text-align: right;
    opacity: .82;
}

/* Set-level reconciliation for active exercises. */
.exercise-card:not(.exercise-card-plan-added):not(.exercise-card-plan-removed) .set-row.set-row-plan-added {
    background: color-mix(in srgb, var(--success, #22c55e) 12%, transparent);
    border-radius: 8px;
}
.exercise-card:not(.exercise-card-plan-added):not(.exercise-card-plan-removed) .set-row.set-row-plan-removed {
    background: color-mix(in srgb, var(--danger, #ef4444) 12%, transparent);
    border-radius: 8px;
}
.exercise-plan-sets-note {
    text-align: left;
}

/* Strong visible tint for reconciled set rows; inputs cover most of the row. */
.exercise-card:not(.exercise-card-plan-added):not(.exercise-card-plan-removed) .set-row.set-row-plan-added {
    padding: 2px;
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--success, #22c55e) 72%, transparent);
}
.exercise-card:not(.exercise-card-plan-added):not(.exercise-card-plan-removed) .set-row.set-row-plan-removed {
    padding: 2px;
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--danger, #ef4444) 72%, transparent);
}
.exercise-card:not(.exercise-card-plan-added):not(.exercise-card-plan-removed) .set-row.set-row-plan-added .set-inputs > input,
.exercise-card:not(.exercise-card-plan-added):not(.exercise-card-plan-removed) .set-row.set-row-plan-added .set-inputs > select {
    background: color-mix(in srgb, var(--success, #22c55e) 12%, var(--input-bg, var(--surface, #fff)));
}
.exercise-card:not(.exercise-card-plan-added):not(.exercise-card-plan-removed) .set-row.set-row-plan-removed .set-inputs > input,
.exercise-card:not(.exercise-card-plan-added):not(.exercise-card-plan-removed) .set-row.set-row-plan-removed .set-inputs > select {
    background: color-mix(in srgb, var(--danger, #ef4444) 12%, var(--input-bg, var(--surface, #fff)));
}

/* Mobile plan editor and preview density. */
@media (max-width: 560px) {
    #plans-table tbody tr.plans-mobile-data-row,
    #plans-table tbody tr.plans-mobile-add-row {
        grid-template-columns: 30px minmax(0, 1fr) minmax(72px, .48fr);
        grid-template-areas:
            "num capt cur"
            "sets sets manage";
        gap: 5px 7px;
        margin: 7px 0;
        padding: 8px;
    }

    #plans-table tbody tr.plans-mobile-data-row > td::before,
    #plans-table tbody tr.plans-mobile-add-row > td::before {
        margin-bottom: 2px;
        font-size: 10px;
    }

    #plans-table tbody tr.plans-mobile-data-row .manage-icons,
    #plans-table tbody tr.plans-mobile-add-row .manage-icons {
        gap: 4px;
        flex-wrap: nowrap;
    }

    #plans-table tbody tr.plans-mobile-data-row .manage-icons button,
    #plans-table tbody tr.plans-mobile-add-row .manage-icons button {
        width: 30px;
        height: 30px;
    }

    /* With repetition ranges enabled, keep controls inside the card:
       sets occupy their own row; repetitions and management share the last row. */
    #plans-table tbody tr.plans-mobile-data-row.plans-row-with-range {
        grid-template-columns: 30px repeat(5, minmax(0, 1fr));
        grid-template-areas:
            "num capt capt capt cur cur"
            "sets sets sets sets sets sets"
            "range range manage manage manage manage";
    }

    #plans-table tbody tr.plans-mobile-data-row.plans-row-with-range > td.plans-range-cell {
        grid-area: range;
        align-items: flex-start;
        min-width: 0;
    }

    #plans-table tbody tr.plans-mobile-data-row.plans-row-with-range > td.manage-cell {
        grid-area: manage;
        align-items: flex-start;
        justify-self: end;
        min-width: 0;
        width: auto;
    }

    #plans-table tbody tr.plans-mobile-data-row.plans-row-with-range .plans-reps-range {
        width: 100%;
        min-width: 0;
    }

    #plans-table tbody tr.plans-mobile-data-row.plans-row-with-range .manage-icons {
        width: auto;
        margin-left: auto;
        justify-content: flex-end;
        gap: 4px;
        flex-wrap: nowrap;
    }

    .plans-preview-day {
        padding: 8px;
    }

    .plans-preview-table tbody tr {
        grid-template-columns: 24px minmax(0, 1fr) 52px 48px;
        grid-template-areas: "num ex sets swap";
        align-items: start;
        gap: 5px 6px;
        margin: 7px 0;
        padding: 8px 10px 8px 8px;
    }

    .plans-preview-table tbody td {
        justify-content: flex-start;
        line-height: 1.2;
    }

    .plans-preview-table tbody td::before {
        margin-bottom: 2px;
        font-size: 10px;
    }

    .plans-preview-table tbody td:nth-child(1),
    .plans-preview-table tbody td:nth-child(3),
    .plans-preview-table tbody td:nth-child(4) {
        align-items: center;
        justify-self: center;
        width: 100%;
        min-width: 0;
    }

    .plans-preview-table tbody td:nth-child(3)::before,
    .plans-preview-table tbody td:nth-child(4)::before {
        width: 100%;
        white-space: nowrap;
        text-align: center;
    }

    .plans-preview-swap-btn {
        width: 30px;
        height: 30px;
        margin-inline: auto;
    }
}

.ratings-orient-hint {
    margin: 10px 0 8px;
}

/* Public landing: universal nutrition card above role-specific training cards. */
body.auth-landing .auth-welcome-point-all {
    position: relative;
    z-index: 1;
    margin-bottom: 12px;
    padding: 18px 20px;
    border: 1px solid var(--index-info-border-alt);
    border-radius: 14px;
    background: var(--index-info-bg-alt);
    box-shadow: 0 4px 14px var(--index-shadow-color);
}

body.auth-landing .auth-welcome-point-all h3 {
    margin: 0 0 12px;
    font-size: 20px;
    line-height: 1.2;
}

body.auth-landing .auth-welcome-point-all ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.auth-landing .auth-welcome-point-all li {
    position: relative;
    margin: 0;
    padding-left: 17px;
    line-height: 1.4;
}

body.auth-landing .auth-welcome-point-all li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 700;
}

@media (max-width: 760px) {
    body.auth-landing .auth-welcome-point-all {
        padding: 15px 16px;
    }

    body.auth-landing .auth-welcome-point-all ul {
        grid-template-columns: 1fr;
    }
}


/* P3: public nutrition article link and ordered article steps. */
body.auth-landing .auth-welcome-more {
    display: inline-flex;
    align-items: center;
    margin-top: 13px;
    font-weight: 700;
    text-decoration: none;
    color: var(--link-color, #1769aa);
}
body.auth-landing .auth-welcome-more:hover {
    text-decoration: underline;
}
.seo-list-ordered {
    list-style: decimal;
}


/* P5: primary section onboarding */
.primary-section-modal {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.primary-section-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(7, 12, 20, .72);
    backdrop-filter: blur(2px);
}

.primary-section-modal-card {
    position: relative;
    z-index: 1;
    width: min(860px, 100%);
    max-height: calc(100vh - 48px);
    overflow: auto;
    padding: 28px;
    border: 1px solid #c7d0db;
    border-radius: 14px;
    background: #ffffff;
    color: #17202b;
    box-shadow: 0 18px 60px rgba(0, 0, 0, .35);
}

.primary-section-modal-card h1 {
    margin: 0;
    color: #17202b;
    text-align: center;
}

.primary-section-intro,
.primary-section-note {
    color: #4e5b69;
    text-align: center;
}

.primary-section-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 24px 0;
}

.primary-section-option {
    min-height: 150px;
    padding: 20px 16px;
    border: 1px solid #b9c4d0;
    border-radius: 12px;
    background: #f7f9fb;
    color: #17202b;
    cursor: pointer;
    text-align: left;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.primary-section-option:hover,
.primary-section-option:focus-visible {
    transform: translateY(-1px);
    border-color: #318553;
    background: #f1f8f4;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
    outline: none;
}

.primary-section-option strong {
    display: block;
    margin-bottom: 10px;
    color: #146b39;
    font-size: 1.1rem;
}

.primary-section-option span {
    display: block;
    color: #42505e;
    line-height: 1.45;
}

.primary-section-error {
    margin: 16px 0;
    color: #a01919;
    text-align: center;
}

html[data-theme="dark"] .primary-section-modal-card,
body.dark-theme .primary-section-modal-card {
    border-color: #33445a;
    background: #101827;
    color: #edf3fb;
    box-shadow: 0 18px 60px rgba(0, 0, 0, .62);
}

html[data-theme="dark"] .primary-section-modal-card h1,
body.dark-theme .primary-section-modal-card h1 {
    color: #f2f6fb;
}

html[data-theme="dark"] .primary-section-intro,
html[data-theme="dark"] .primary-section-note,
body.dark-theme .primary-section-intro,
body.dark-theme .primary-section-note {
    color: #b9c5d3;
}

html[data-theme="dark"] .primary-section-option,
body.dark-theme .primary-section-option {
    border-color: #3b4c63;
    background: #192435;
    color: #edf3fb;
}

html[data-theme="dark"] .primary-section-option:hover,
html[data-theme="dark"] .primary-section-option:focus-visible,
body.dark-theme .primary-section-option:hover,
body.dark-theme .primary-section-option:focus-visible {
    border-color: #59ad78;
    background: #203149;
    box-shadow: 0 5px 16px rgba(0, 0, 0, .38);
}

html[data-theme="dark"] .primary-section-option strong,
body.dark-theme .primary-section-option strong {
    color: #78d596;
}

html[data-theme="dark"] .primary-section-option span,
body.dark-theme .primary-section-option span {
    color: #d0dae6;
}

html[data-theme="dark"] .primary-section-error,
body.dark-theme .primary-section-error {
    color: #ff9d9d;
}

@media (max-width: 720px) {
    .primary-section-modal { padding: 12px; }
    .primary-section-modal-card { max-height: calc(100vh - 24px); padding: 20px 16px; }
    .primary-section-options { grid-template-columns: 1fr; }
    .primary-section-option { min-height: 0; }
}

.user-home-settings {
  margin: 0 0 18px;
  padding: 16px;
  border: 1px solid var(--border-color, #41536b);
  border-radius: 12px;
  background: rgba(127, 127, 127, 0.06);
}
.user-home-settings-form {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  align-items: center;
  margin-top: 12px;
}
.user-home-settings-form label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.user-home-settings-form .btn-save-demo { margin-left: auto; }
@media (max-width: 640px) {
  .user-home-settings-form { align-items: stretch; flex-direction: column; }
  .user-home-settings-form .btn-save-demo { margin-left: 0; }
}


/* P9: related public guides */
.seo-related-block {
    margin-top: 18px;
}
.seo-related-block > h2 {
    margin: 0 0 10px;
    font-size: 1.25rem;
}
.seo-related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.seo-related-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px;
    border: 1px solid var(--border-card);
    border-radius: 12px;
    background: var(--surface-bg);
    color: var(--text-main);
    text-decoration: none;
}
.seo-related-card:hover {
    border-color: var(--border-accent);
}
.seo-related-card span {
    color: var(--text-soft);
    line-height: 1.45;
}
@media (max-width: 760px) {
    .seo-related-grid {
        grid-template-columns: 1fr;
    }
}

/* Auth landing: explicit Nutrition / Training product structure. */
body.auth-landing .auth-welcome-title {
    max-width: none;
    font-size: clamp(30px, 4.15vw, 44px);
    line-height: 1.08;
    text-wrap: balance;
}

body.auth-landing .auth-welcome-text {
    max-width: 860px;
    margin-bottom: 22px;
}

body.auth-landing .auth-welcome-section {
    position: relative;
    z-index: 1;
}

body.auth-landing .auth-welcome-section + .auth-welcome-section {
    margin-top: 18px;
}

body.auth-landing .auth-welcome-section-title {
    margin: 0 0 9px;
    font-size: 17px;
    line-height: 1.2;
    font-weight: 750;
    letter-spacing: .01em;
    color: var(--text-main);
}

body.auth-landing .auth-welcome-section-nutrition .auth-welcome-point-all {
    margin-bottom: 0;
}

body.auth-landing .auth-welcome-section-training .auth-welcome-points {
    margin-top: 0;
}

@media (min-width: 900px) {
    body.auth-landing .auth-welcome-title {
        white-space: nowrap;
        text-wrap: nowrap;
    }
}

@media (max-width: 760px) {
    body.auth-landing .auth-welcome-title {
        font-size: clamp(27px, 8vw, 34px);
        white-space: normal;
        text-wrap: balance;
    }

    body.auth-landing .auth-welcome-section + .auth-welcome-section {
        margin-top: 16px;
    }

    body.auth-landing .auth-welcome-section-title {
        font-size: 16px;
    }
}


/* Auth landing: sectioned Nutrition / Training pass 2. */
body.auth-landing .auth-welcome-title {
    max-width: 100%;
    font-size: clamp(29px, 3.55vw, 42px);
    line-height: 1.08;
    white-space: normal;
    text-wrap: balance;
    overflow-wrap: normal;
}

body.auth-landing .auth-welcome-section {
    position: relative;
    z-index: 1;
    margin-top: 22px;
    padding: 22px 12px 12px;
    border: 1px solid var(--border-card);
    border-radius: 14px;
}

body.auth-landing .auth-welcome-section + .auth-welcome-section {
    margin-top: 20px;
}

body.auth-landing .auth-welcome-section-title {
    position: absolute;
    top: 0;
    left: 14px;
    transform: translateY(-50%);
    z-index: 2;
    margin: 0;
    padding: 4px 12px;
    border: 1px solid var(--border-card);
    border-radius: 999px;
    background: var(--surface-bg);
    color: var(--text-main);
    font-size: 14px;
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: 0;
    box-shadow: 0 1px 4px var(--index-shadow-color);
}

body.auth-landing .auth-welcome-section-nutrition {
    background: color-mix(in srgb, var(--index-info-bg-alt) 42%, transparent);
    border-color: var(--index-info-border-alt);
}

body.auth-landing .auth-welcome-section-nutrition .auth-welcome-section-title {
    border-color: var(--index-info-border-alt);
}

body.auth-landing .auth-welcome-section-nutrition .auth-welcome-point-all {
    margin: 0;
    padding: 10px 8px 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body.auth-landing .auth-welcome-section-training {
    background: color-mix(in srgb, var(--success-bg, #dff4e5) 28%, transparent);
    border-color: color-mix(in srgb, var(--success-border, #66a978) 56%, var(--border-card));
}

body.auth-landing .auth-welcome-section-training .auth-welcome-section-title {
    border-color: color-mix(in srgb, var(--success-border, #66a978) 60%, var(--border-card));
}

body.auth-landing .auth-welcome-section-training .auth-welcome-points {
    margin: 0;
}

@media (max-width: 760px) {
    body.auth-landing .auth-welcome-title {
        font-size: clamp(26px, 8vw, 34px);
        white-space: normal;
        text-wrap: balance;
    }

    body.auth-landing .auth-welcome-section {
        margin-top: 20px;
        padding: 20px 10px 10px;
    }

    body.auth-landing .auth-welcome-section-title {
        left: 12px;
        padding: 4px 10px;
        font-size: 13px;
    }
}

/* Auth landing: compact hero pass 3 + measured one-line title. */
body.auth-landing #auth-welcome {
    padding: clamp(20px, 2.8vw, 30px);
}

body.auth-landing .auth-welcome-title {
    width: max-content;
    max-width: none;
    margin: 0 auto 18px;
    font-size: 42px; /* JS recalculates the final value from available width. */
    line-height: 1.04;
    white-space: nowrap;
    text-wrap: nowrap;
    text-align: center;
    letter-spacing: -0.025em;
    font-weight: 700;
}

body.auth-landing .auth-welcome-section {
    margin-top: 16px;
    padding: 18px 10px 10px;
    border-radius: 13px;
}

body.auth-landing .auth-welcome-section + .auth-welcome-section {
    margin-top: 16px;
}

body.auth-landing .auth-welcome-section-title {
    left: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px 4px 8px;
    font-size: 14px;
}

body.auth-landing .auth-welcome-section-title img {
    display: block;
    width: 18px;
    height: 18px;
    object-fit: contain;
}

body.auth-landing .auth-welcome-section-nutrition .auth-welcome-point-all {
    padding: 9px 8px 7px;
    font-size: 15px;
}

body.auth-landing .auth-welcome-points {
    gap: 12px;
}

body.auth-landing .auth-welcome-point {
    padding: 15px 17px;
    font-size: 15px;
    line-height: 1.42;
}

body.auth-landing .auth-welcome-point h3 {
    margin-bottom: 10px;
    font-size: 19px;
}

body.auth-landing .auth-welcome-point li {
    margin: 6px 0;
}

@media (max-width: 760px) {
    body.auth-landing #auth-welcome {
        padding: 18px 12px;
    }

    body.auth-landing .auth-welcome-title {
        margin-bottom: 16px;
        white-space: nowrap;
        text-wrap: nowrap;
    }

    body.auth-landing .auth-welcome-section {
        margin-top: 15px;
        padding: 18px 8px 8px;
    }

    body.auth-landing .auth-welcome-section + .auth-welcome-section {
        margin-top: 15px;
    }
}

/* Auth landing: density/rhythm pass 4. */
body.auth-landing .auth-welcome-title {
    margin-bottom: 24px;
}

body.auth-landing .auth-welcome-section {
    margin-top: 0;
}

body.auth-landing .auth-welcome-section + .auth-welcome-section {
    margin-top: 20px;
}

body.auth-landing .auth-welcome-section-nutrition .auth-welcome-point-all {
    padding-top: 12px;
    padding-bottom: 10px;
}

body.auth-landing .auth-welcome-section-nutrition .auth-welcome-point-all ul {
    gap: 6px 22px;
}

body.auth-landing .auth-welcome-section-nutrition .auth-welcome-point-all li {
    margin: 0;
    line-height: 1.42;
}

@media (max-width: 760px) {
    body.auth-landing .auth-welcome-title {
        margin-bottom: 22px;
    }

    body.auth-landing .auth-welcome-section + .auth-welcome-section {
        margin-top: 18px;
    }

    /* Training cards: two cards on the first row, trainer card across the second row. */
    body.auth-landing .auth-welcome-section-training .auth-welcome-points {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    body.auth-landing .auth-welcome-section-training .auth-welcome-point:nth-child(3) {
        grid-column: 1 / -1;
    }

    /* Keep nutrition compact on tablet-sized mobile layouts. */
    body.auth-landing .auth-welcome-section-nutrition .auth-welcome-point-all ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px 16px;
    }
}

@media (max-width: 430px) {
    body.auth-landing .auth-welcome-section-training .auth-welcome-points,
    body.auth-landing .auth-welcome-section-nutrition .auth-welcome-point-all ul {
        grid-template-columns: 1fr;
    }

    body.auth-landing .auth-welcome-section-training .auth-welcome-point:nth-child(3) {
        grid-column: auto;
    }
}

/* Auth landing: responsive column contract pass 5. */
@media (max-width: 760px) {
    /* Narrow layout: training cards stack, but each card keeps its short items in two columns. */
    body.auth-landing .auth-welcome-section-training .auth-welcome-points {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    body.auth-landing .auth-welcome-section-training .auth-welcome-point:nth-child(3) {
        grid-column: auto;
    }

    body.auth-landing .auth-welcome-section-training .auth-welcome-point ul {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 18px;
        row-gap: 6px;
    }

    body.auth-landing .auth-welcome-section-training .auth-welcome-point li {
        margin: 0;
    }

    /* Nutrition remains two-column until JS detects an actual wrapped item. */
    body.auth-landing .auth-welcome-section-nutrition .auth-welcome-point-all ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.auth-landing .auth-welcome-section-nutrition.nutrition-single-column .auth-welcome-point-all ul {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 430px) {
    /* Training still stays as stacked cards with two short item columns. */
    body.auth-landing .auth-welcome-section-training .auth-welcome-point ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 12px;
    }

    /* Override the older pass-4 forced single-column rule for nutrition. */
    body.auth-landing .auth-welcome-section-nutrition .auth-welcome-point-all ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.auth-landing .auth-welcome-section-nutrition.nutrition-single-column .auth-welcome-point-all ul {
        grid-template-columns: 1fr;
    }
}

/* Auth landing: dynamic scroll range for anchoring the expanded auth form. */
body.auth-landing #auth-scroll-spacer {
    order: 101;
    width: 100%;
    height: 0;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    pointer-events: none;
    overflow-anchor: none;
}

/* Guest Nutrition public entry points (T8.2). */
body.auth-landing .auth-welcome-nutrition-guest-link {
    margin-top: 10px;
    text-align: center;
}
body.auth-landing .auth-welcome-nutrition-guest-link a {
    display: inline-block;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.auth-landing .auth-training-demo-entry{display:grid;gap:4px;margin:14px 4px 2px;padding:11px 14px;border:1px dashed color-mix(in srgb,var(--success-border,#66a978) 70%,var(--border-card));border-radius:11px;background:color-mix(in srgb,var(--success-bg,#dff4e5) 42%,transparent)}
body.auth-landing .auth-training-demo-entry>span{color:var(--text-muted);font-size:12px;line-height:1.3}
.auth-training-demo-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%;margin-top:5px}.auth-training-demo-actions button{display:inline-flex;align-items:center;justify-content:center;gap:7px;width:100%;min-width:0;padding:8px 12px;border:1px solid var(--success-border,#66a978);border-radius:9px;background:var(--surface-bg);color:var(--text-main);font-weight:700;cursor:pointer}.auth-training-demo-actions button:hover{background:var(--success-bg,#dff4e5)}
body.auth-landing .auth-training-demo-entry img{width:20px;height:20px;object-fit:contain}
.startup-demo-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;margin-top:12px;padding:11px 12px;border:1px solid var(--success-border,#66a978);border-radius:10px;background:var(--success-bg,#dff4e5)}.startup-demo-card img,.diary-demo-link img{width:22px;height:22px;object-fit:contain}.startup-demo-card span{color:var(--text-muted);font-size:13px}.startup-demo-card button,.diary-demo-link{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 12px;border:1px solid var(--success-border,#66a978);border-radius:9px;background:var(--surface-bg);color:var(--text-main);font-weight:700;cursor:pointer}.startup-demo-card button:hover,.diary-demo-link:hover{background:var(--success-bg,#dff4e5)}.info-header-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.info-header-row #info-header{flex:1;margin:0}.diary-demo-link{flex:0 0 auto;font-size:13px}
.startup-demo-card[hidden]{display:none!important}
.startup-demo-card{grid-column:1/-1;width:100%;box-sizing:border-box}
.auth-training-demo-modal[hidden]{display:none}.auth-training-demo-modal{position:fixed;inset:0;z-index:10050;display:grid;place-items:center;padding:18px}.auth-training-demo-backdrop{position:absolute;inset:0;background:rgba(5,12,25,.68);backdrop-filter:blur(3px)}.auth-training-demo-dialog{position:relative;display:grid;grid-template-rows:auto 1fr;width:min(1120px,96vw);height:min(820px,94vh);overflow:hidden;border:1px solid var(--border-card);border-radius:16px;background:var(--page-bg);box-shadow:0 24px 70px rgba(0,0,0,.38)}.auth-training-demo-dialog>header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--border-card);background:var(--surface-bg)}.auth-training-demo-dialog>header div{display:grid;gap:2px}.auth-training-demo-dialog>header span{color:var(--text-muted);font-size:12px}.auth-training-demo-close{width:36px;height:36px;border:1px solid var(--border-card);border-radius:50%;background:var(--surface-bg);color:var(--text-main);font-size:25px;line-height:1;cursor:pointer}.auth-training-demo-dialog iframe{width:100%;height:100%;border:0;background:var(--page-bg)}body.training-demo-open{overflow:hidden}
@media(max-width:680px){.auth-training-demo-actions{grid-template-columns:1fr}.auth-training-demo-modal{padding:0}.auth-training-demo-dialog{width:100vw;height:100dvh;border:0;border-radius:0}.auth-training-demo-dialog>header span{display:none}}
@media(max-width:680px){.startup-demo-card{grid-template-columns:auto 1fr}.startup-demo-card button{grid-column:1/-1}.info-header-row{align-items:stretch;flex-direction:column}.diary-demo-link{align-self:flex-start}}
.seo-nutrition-guest-entry .seo-join-subtitle {
    margin: 14px 0 6px;
}
.seo-nutrition-guest-entry .seo-nutrition-register-title {
    margin-top: 18px;
}
.seo-nutrition-guest-entry .seo-nutrition-register-text {
    margin: 0 0 8px;
    line-height: 1.55;
}
.seo-nutrition-guest-entry .seo-nutrition-guest-cta {
    display: inline-flex;
    margin-top: 10px;
}

/* T9 guest -> participant claim note */
.auth-guest-claim-note {
    margin: 4px 0 10px;
    padding: 8px 10px;
    border: 1px solid rgba(55, 138, 82, .35);
    border-radius: 8px;
    background: rgba(99, 190, 120, .10);
    font-size: .9rem;
    line-height: 1.35;
}


/* T9.1 guest claim UX: full-width claim notices and explicit browser-risk warning. */
.auth-guest-claim-note,
.auth-guest-claim-oauth-note {
    width: 100%;
    box-sizing: border-box;
}
.auth-guest-claim-oauth-note {
    margin: 0 0 10px;
    padding: 8px 10px;
    border: 1px solid rgba(74, 118, 166, .32);
    border-radius: 8px;
    background: rgba(96, 145, 196, .09);
    font-size: .88rem;
    line-height: 1.35;
}
body.auth-landing #auth-default-fields.auth-registration-mode #auth-guest-claim-note,
body.auth-landing #auth-default-fields.auth-registration-mode #auth-guest-claim-oauth-note {
    grid-column: 1 / -1;
    justify-self: stretch;
}
@media (min-width: 761px) {
    body.auth-landing #auth-default-fields.auth-registration-mode {
        grid-template-rows: auto auto auto auto auto auto auto auto auto;
    }
    body.auth-landing #auth-default-fields.auth-registration-mode #auth-guest-claim-note { grid-row: 5; }
    body.auth-landing #auth-default-fields.auth-registration-mode #auth-guest-claim-oauth-note { grid-row: 6; }
    body.auth-landing #auth-default-fields.auth-registration-mode .auth-recovery-hint { grid-row: 7; }
    body.auth-landing #auth-default-fields.auth-registration-mode #auth-login-status,
    body.auth-landing #auth-default-fields.auth-registration-mode #auth-register-status { grid-row: 8; }
    body.auth-landing #auth-default-fields.auth-registration-mode .auth-actions { grid-row: 9; }
}
.nutrition-benefits-risk {
    margin: 12px 0 0;
    padding: 8px 10px;
    border-left: 3px solid rgba(190, 48, 48, .72);
    border-radius: 4px;
    background: rgba(190, 48, 48, .08);
    color: var(--danger-text, #a52a2a);
    font-size: .9rem;
    line-height: 1.4;
    font-weight: 600;
}
.graph-hub-tabs { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:8px; margin:0 0 12px; }
.graph-hub-tab { display:grid; grid-template-rows:auto 1fr; min-width:0; padding:0; overflow:hidden; border:1px solid var(--border-main,#b9c9df); border-radius:12px; background:var(--surface-bg-raised,#fff); color:var(--text-main,#172033); text-decoration:none; }
.graph-hub-tab:hover { border-color:#4a83e6; }
.graph-hub-tab.is-active { border-color:#2973ed; box-shadow:inset 0 -3px 0 #2973ed; background:var(--surface-bg-active,#eaf2ff); }
.graph-hub-tab-head { min-width:0; display:flex; align-items:center; justify-content:center; gap:9px; padding:8px 10px; border-bottom:1px solid var(--border-main,#b9c9df); }
.graph-hub-tab img { width:34px; height:34px; object-fit:contain; flex:0 0 auto; }
.graph-hub-tab strong { font-size:.92rem; line-height:1.15; }
.graph-hub-tab small { display:block; padding:8px 11px 10px; color:var(--text-muted,#667085); font-size:.72rem; line-height:1.2; }
.theme-dark .graph-hub-tab.is-active,
body.dark .graph-hub-tab.is-active,
[data-theme="dark"] .graph-hub-tab.is-active { background:#17304f; border-color:#4d95ff; color:#f4f7ff; }
.theme-dark .graph-hub-tab.is-active small,
body.dark .graph-hub-tab.is-active small,
[data-theme="dark"] .graph-hub-tab.is-active small { color:#c6d4e8; }
.theme-dark .graph-hub-tab.is-active .graph-hub-tab-head,
body.dark .graph-hub-tab.is-active .graph-hub-tab-head,
[data-theme="dark"] .graph-hub-tab.is-active .graph-hub-tab-head { border-color:#4d95ff; }
.graph-hub-strength { grid-column:1/-1; }
.graph-hub-strength-tabs { margin:8px 0 0; }
@media(max-width:640px){ .graph-hub-tabs{grid-template-columns:1fr}.graph-hub-tab img{width:30px;height:30px} }
/* Nutrition energy model 2 / formula 4 settings. */
.nutrition-strength-settings{margin-top:14px;padding:14px;border:1px solid var(--border-color,#c8d3e3);border-radius:12px}
.nutrition-strength-toggle{display:flex;align-items:center;gap:10px;font-weight:700}
.nutrition-strength-fields{margin-top:12px}.nutrition-strength-fields[hidden],.nutrition-training-week[hidden]{display:none!important}
.nutrition-strength-distribution{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}.nutrition-strength-distribution label{display:flex;align-items:center;gap:7px}
.nutrition-training-week{display:grid;grid-template-columns:repeat(7,minmax(58px,1fr));gap:8px}.nutrition-training-week p,.nutrition-training-week [role=alert]{grid-column:1/-1;margin:0}
.nutrition-training-week label{display:grid;gap:4px;text-align:center}.nutrition-training-week input{text-align:center;min-width:0}
.nutrition-training-week [role=alert]{color:var(--danger-color,#b3261e);min-height:1.3em}
.nutrition-energy-breakdown{width:100%;margin-top:14px;border-collapse:collapse}.nutrition-energy-breakdown th,.nutrition-energy-breakdown td{padding:8px 10px;border-bottom:1px solid var(--border-color,#c8d3e3)}
.nutrition-energy-breakdown th{text-align:left;font-weight:500}.nutrition-energy-breakdown td{text-align:right;font-variant-numeric:tabular-nums}.nutrition-energy-breakdown tr:nth-last-child(-n+2){font-weight:700}
@media(max-width:700px){.nutrition-training-week{grid-template-columns:repeat(4,minmax(58px,1fr))}}

/* ====== users.php public profile compact layout ====== */
/* Public profile navigation reuses the site's native section and gym tab bars.
   Profile-specific rules only align them with the available page width. */
.users-public-tabs-bar,
.users-public-media-subtabs {
    width: 100%;
}

.users-public-media-subtabs.user-hidden {
    display: none !important;
}

.users-public-main-pane .user-main-top {
    display: flex;
    width: 100%;
    align-items: flex-start;
    gap: 12px;
}

.users-public-main-pane .user-main-side {
    gap: 7px;
    min-width: 0;
    flex: 1 1 auto;
}

.users-public-main-pane .users-public-meta {
    gap: 6px;
}

.users-public-main-pane .users-public-meta-item {
    padding: 6px 8px;
}

/* Achievement/result sections share one right edge instead of sizing to content. */
.users-public-main-pane .user-pl-panel {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-bottom: 2px;
    padding: 8px 10px 9px;
}

.users-public-main-pane .user-pl-panel-title {
    margin-bottom: 7px;
}

.users-public-main-pane .user-pl-status,
.users-public-main-pane .user-pl-panel .hint {
    margin-top: 5px;
}

.users-public-main-pane .users-nutrition-achievements-panel {
    margin-top: 3px;
}

.users-significant-results {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: stretch;
}

.users-significant-card {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 250px;
    max-width: 360px;
    padding: 5px 8px 5px 5px;
    box-sizing: border-box;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    background: var(--surface-overlay-soft);
}

.users-significant-icon-wrap {
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-radius: 9px;
    background: var(--significant-grade-color, var(--user-panel-bg));
    box-shadow: inset 0 0 0 1px var(--modal-backdrop-bg);
    overflow: hidden;
}

.users-significant-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.users-significant-copy {
    min-width: 0;
    font-size: 12px;
    line-height: 1.3;
}

.users-significant-time {
    color: var(--text-muted);
    font-size: 11px;
    margin-bottom: 2px;
}

.users-significant-result {
    color: var(--text-main);
    overflow-wrap: anywhere;
}

@media (max-width: 620px) {
    .users-public-tabs-bar,
    .users-public-media-subtabs {
        margin-left: -8px;
        margin-right: -8px;
        width: calc(100% + 16px);
    }

    .users-significant-card {
        min-width: min(100%, 250px);
        max-width: 100%;
        flex: 1 1 250px;
    }
}

/* Public profile achievement groups: collapsed by default, title acts as the disclosure control. */
.users-public-main-pane .users-achievements-collapsible > .users-achievements-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 180px;
    margin-bottom: 0;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.users-public-main-pane .users-achievements-collapsible > .users-achievements-summary::-webkit-details-marker {
    display: none;
}

.users-public-main-pane .users-achievements-collapsible > .users-achievements-summary::after {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform .16s ease;
    opacity: .65;
}

.users-public-main-pane .users-achievements-collapsible[open] > .users-achievements-summary {
    margin-bottom: 7px;
}

.users-public-main-pane .users-achievements-collapsible[open] > .users-achievements-summary::after {
    transform: rotate(45deg);
}

.users-achievements-collapse-body {
    min-width: 0;
}
.achievement-compact {
    margin-top: 12px;
    padding: 0;
}
.achievement-compact > summary {
    cursor: pointer;
    font-weight: 700;
    padding: 14px 16px;
}
.achievement-compact > .user-pl-badges,
.achievement-compact > .user-pl-status,
.achievement-compact > .hint {
    margin-left: 16px;
    margin-right: 16px;
}
.achievement-compact > :last-child {
    margin-bottom: 14px;
}

.landing-hero {
    position: relative;
    min-height: 250px;
    margin: 0 0 14px;
    border: 1px solid #8eb9ef;
    border-radius: 15px;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.landing-hero-copy {
    position: relative;
    z-index: 1;
}
.landing-hero-training {
    background: #f4f9ff url('images/training_start_hero.webp') right center / cover no-repeat;
}
.landing-hero-nutrition {
    background: #f4f9ff url('images/nutrition_hero_v2.webp') right center / cover no-repeat;
}
.landing-hero-copy {
    width: 66%;
    padding: 22px 24px;
}
.landing-hero h1,
.landing-hero h2 {
    margin: 0 0 10px;
    font-size: clamp(26px, 3vw, 34px);
    line-height: 1.08;
    color: #0b1730;
}
html[data-theme="dark"] .landing-hero,
body.dark-theme .landing-hero {
    border-color: #405572;
    box-shadow: 0 10px 28px rgba(0,0,0,.2);
}
html[data-theme="dark"] .landing-hero::before,
body.dark-theme .landing-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(7,17,31,.98) 0%, rgba(7,17,31,.92) 42%, rgba(7,17,31,.54) 61%, rgba(7,17,31,.08) 82%);
    pointer-events: none;
}
html[data-theme="dark"] .landing-hero h1,
html[data-theme="dark"] .landing-hero h2,
html[data-theme="dark"] .landing-hero-feature,
body.dark-theme .landing-hero h1,
body.dark-theme .landing-hero h2,
body.dark-theme .landing-hero-feature {
    color: #f3f6fb;
}
html[data-theme="dark"] .landing-hero p,
body.dark-theme .landing-hero p {
    color: #bac5d5;
    opacity: 1;
}
html[data-theme="dark"] .landing-hero-feature img,
body.dark-theme .landing-hero-feature img {
    box-shadow: 0 0 0 1px rgba(178,202,232,.34), 0 4px 12px rgba(0,0,0,.34);
}
.landing-hero p {
    max-width: 580px;
    margin: 0 0 14px;
    color: var(--text-muted);
    line-height: 1.45;
}
.landing-hero-features {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
}
.landing-hero-feature {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 13px;
}
.landing-hero-feature img {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 3px 10px rgba(42,78,122,.16);
}
body[data-startup-phase="no-week"] .training-stage-benefits {
    display: none;
}
@media (max-width: 700px) {
    .landing-hero {
        min-height: 390px;
        align-items: flex-start;
        background-position: 62% bottom;
        background-size: auto 62%;
    }
    .landing-hero-copy {
        width: 100%;
        padding: 20px 18px;
        background: linear-gradient(180deg, rgba(244,249,255,.98) 0%, rgba(244,249,255,.9) 70%, rgba(244,249,255,0) 100%);
    }
    html[data-theme="dark"] .landing-hero::before,
    body.dark-theme .landing-hero::before {
        background: linear-gradient(180deg, rgba(7,17,31,.98) 0%, rgba(7,17,31,.92) 47%, rgba(7,17,31,.42) 68%, rgba(7,17,31,.08) 100%);
    }
    html[data-theme="dark"] .landing-hero-copy,
    body.dark-theme .landing-hero-copy {
        background: none;
    }
    .landing-hero h1, .landing-hero h2 { font-size: 27px; }
    .landing-hero-features { gap: 8px 12px; }
    .landing-hero-feature { font-size: 12px; }
    .landing-hero-feature img { width: 38px; height: 38px; flex-basis: 38px; }
}