:root {
    --bg-primary: #071520;
    --bg-secondary: #0B1C29;
    --bg-tertiary: #102432;
    --card-bg: rgba(15, 34, 47, .82);
    --card-bg-hover: rgba(20, 44, 58, .92);

    --primary: #8CFF4D;
    --primary-hover: #75EB38;
    --primary-soft: rgba(140, 255, 77, .14);
    --primary-glow: rgba(140, 255, 77, .22);

    --blue: #2E91FF;
    --blue-soft: rgba(46, 145, 255, .15);
    --orange: #FF8A2A;
    --orange-soft: rgba(255, 138, 42, .15);
    --purple: #A35BFF;
    --purple-soft: rgba(163, 91, 255, .15);

    --success: #37E66A;
    --warning: #FFB020;
    --danger: #FF4D5E;
    --info: #2E91FF;
    --neutral: #788A9A;

    --text-primary: #F7FAFC;
    --text-secondary: #AEBCC7;
    --text-muted: #718493;
    --text-disabled: #50616F;

    --border: rgba(255, 255, 255, .08);
    --border-hover: rgba(255, 255, 255, .13);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-pill: 999px;

    --sidebar-width: 248px;
    --sidebar-collapsed: 76px;
    --topbar-height: 82px;

    --shadow-card: 0 10px 30px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255,255,255,.025);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    color-scheme: dark;
    background: var(--bg-primary);
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--text-primary);
    font-family: "Inter", "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.5;
    background:
        radial-gradient(circle at top right, rgba(28, 82, 96, .18), transparent 35%),
        linear-gradient(180deg, #071520 0%, #081823 100%);
}

button,
input {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

a {
    color: inherit;
    text-decoration: none;
}

.fitmax-icon {
    display: inline-block;
    flex: 0 0 auto;
}

.skip-link {
    position: fixed;
    z-index: 9999;
    top: 8px;
    left: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    color: var(--bg-primary);
    background: var(--primary);
    transform: translateY(-150%);
    transition: transform 150ms ease;
}

.skip-link:focus {
    transform: translateY(0);
}

/* ===== App Shell ===== */
.app-shell {
    min-height: 100vh;
}

.sidebar {
    position: fixed;
    z-index: 30;
    inset: 0 auto 0 0;
    display: flex;
    width: var(--sidebar-width);
    flex-direction: column;
    border-right: 1px solid var(--border);
    background: rgba(7, 21, 32, .93);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transition: width 180ms ease, transform 200ms ease;
}

.sidebar-brand {
    display: flex;
    min-height: var(--topbar-height);
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 16px 18px 20px;
    border-bottom: 1px solid rgba(255,255,255,.045);
}

.brand-logo {
    width: 142px;
    height: auto;
    transition: opacity 150ms ease, width 180ms ease;
}

.icon-button {
    display: inline-grid;
    width: 44px;
    height: 44px;
    padding: 0;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text-secondary);
    background: rgba(255,255,255,.035);
    cursor: pointer;
    transition: 150ms ease;
}

.icon-button:hover:not(:disabled) {
    color: var(--text-primary);
    border-color: var(--border-hover);
    background: rgba(255,255,255,.06);
}

.icon-button:disabled {
    opacity: .48;
    cursor: not-allowed;
}

.sidebar-toggle {
    width: 40px;
    height: 40px;
    border-color: transparent;
}

.sidebar-nav {
    overflow-y: auto;
    padding: 14px 12px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.12) transparent;
}

.nav-section-label {
    margin: 8px 10px 9px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .13em;
}

.nav-section-bottom {
    margin-top: 22px;
}

.nav-item {
    position: relative;
    display: flex;
    min-height: 45px;
    align-items: center;
    gap: 12px;
    margin: 3px 0;
    padding: 10px 11px;
    border-radius: 12px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    transition: 150ms ease;
}

.nav-item:hover {
    color: var(--text-primary);
    background: rgba(255,255,255,.045);
}

.nav-item.active {
    color: var(--bg-primary);
    background: linear-gradient(135deg, #96FF59, #53E693);
    box-shadow: 0 0 24px rgba(140,255,77,.12);
}

.nav-icon {
    display: grid;
    width: 22px;
    place-items: center;
}

.nav-label {
    flex: 1;
    white-space: nowrap;
}

.stage-chip {
    padding: 2px 6px;
    border-radius: var(--radius-pill);
    color: var(--text-muted);
    background: rgba(255,255,255,.05);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .03em;
}

.nav-item.active .stage-chip {
    color: rgba(7,21,32,.72);
    background: rgba(7,21,32,.10);
}

.nav-item.is-disabled {
    color: var(--text-disabled);
    cursor: not-allowed;
}

.sidebar-version {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: auto 12px 16px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(255,255,255,.025);
}

.sidebar-version strong,
.sidebar-version small {
    display: block;
}

.sidebar-version strong {
    font-size: 12px;
}

.sidebar-version small {
    color: var(--text-muted);
    font-size: 10px;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 4px rgba(55,230,106,.10);
}

.app-main {
    min-height: 100vh;
    margin-left: var(--sidebar-width);
    transition: margin-left 180ms ease;
}

.topbar {
    position: sticky;
    z-index: 20;
    top: 0;
    display: flex;
    min-height: var(--topbar-height);
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 13px 24px;
    border-bottom: 1px solid var(--border);
    background: rgba(7,21,32,.82);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.topbar-left,
.topbar-right,
.user-summary {
    display: flex;
    align-items: center;
}

.topbar-left {
    gap: 12px;
}

.topbar h1 {
    margin: 1px 0 0;
    font-size: 20px;
    line-height: 1.2;
}

.eyebrow {
    margin: 0;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .13em;
}

.topbar-right {
    gap: 12px;
}

.global-search {
    display: flex;
    width: min(410px, 34vw);
    height: 44px;
    align-items: center;
    gap: 9px;
    padding: 0 10px 0 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text-muted);
    background: rgba(5,17,25,.55);
}

.global-search input {
    min-width: 0;
    flex: 1;
    border: 0;
    outline: 0;
    color: var(--text-secondary);
    background: transparent;
    font-size: 12px;
}

.global-search input::placeholder {
    color: #637887;
}

.kbd {
    padding: 3px 6px;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-muted);
    background: rgba(255,255,255,.03);
    font-size: 9px;
    white-space: nowrap;
}

.user-summary {
    gap: 10px;
    padding-left: 5px;
}

.avatar {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid rgba(140,255,77,.18);
    border-radius: 50%;
    color: var(--primary);
    background: var(--primary-soft);
    font-size: 12px;
    font-weight: 700;
}

.user-copy strong,
.user-copy small {
    display: block;
}

.user-copy strong {
    max-width: 150px;
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-copy small {
    margin-top: 1px;
    color: var(--text-muted);
    font-size: 10px;
}

.mobile-menu-button {
    display: none;
}

.page-content {
    width: min(100%, 1800px);
    min-height: calc(100vh - var(--topbar-height) - 58px);
    margin: 0 auto;
    padding: 24px;
}

.page-intro {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.page-intro h2 {
    margin: 5px 0 5px;
    font-size: clamp(23px, 2vw, 30px);
}

.page-intro > div > p:last-child {
    margin: 0;
    color: var(--text-secondary);
}

.stage-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 6px 9px;
    border: 1px solid rgba(140,255,77,.24);
    border-radius: var(--radius-pill);
    color: var(--primary);
    background: var(--primary-soft);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
}

.stage-badge-large {
    flex: 0 0 auto;
    padding: 8px 12px;
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.stat-card,
.card {
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--card-bg);
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.stat-card {
    display: flex;
    min-height: 128px;
    align-items: flex-start;
    gap: 15px;
    padding: 19px;
    transition: transform 150ms ease, border-color 150ms ease;
}

.stat-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-1px);
}

.stat-icon,
.quick-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 13px;
}

.stat-icon {
    width: 46px;
    height: 46px;
}

.icon-green {
    color: var(--primary);
    background: var(--primary-soft);
}

.icon-blue {
    color: var(--blue);
    background: var(--blue-soft);
}

.icon-orange {
    color: var(--orange);
    background: var(--orange-soft);
}

.icon-purple {
    color: var(--purple);
    background: var(--purple-soft);
}

.stat-title,
.stat-card strong,
.stat-card small {
    display: block;
}

.stat-title {
    margin-bottom: 5px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
}

.stat-card strong {
    font-size: 26px;
    line-height: 1.2;
}

.stat-card small {
    margin-top: 7px;
    color: var(--text-muted);
    font-size: 10px;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0,1fr));
    gap: 18px;
}

.card {
    padding: 20px;
}

.card-span-8 { grid-column: span 8; }
.card-span-4 { grid-column: span 4; }
.card-span-12 { grid-column: span 12; }

.card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 17px;
}

.card-header h3 {
    margin: 3px 0 0;
    font-size: 16px;
}

.status-badge {
    display: inline-flex;
    min-height: 25px;
    align-items: center;
    padding: 4px 8px;
    border-radius: var(--radius-pill);
    font-size: 9px;
    font-weight: 700;
}

.status-success {
    color: var(--success);
    background: rgba(55,230,106,.12);
}

.status-warning {
    color: var(--warning);
    background: rgba(255,176,32,.12);
}

.foundation-list {
    display: grid;
}

.foundation-item {
    display: grid;
    grid-template-columns: 32px minmax(0,1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(255,255,255,.05);
}

.foundation-item:last-child {
    border-bottom: 0;
}

.foundation-item strong,
.foundation-item small {
    display: block;
}

.foundation-item strong {
    font-size: 12px;
}

.foundation-item small {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 10px;
}

.check-circle {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 50%;
    color: var(--success);
    background: rgba(55,230,106,.11);
}

.health-list {
    margin: 0;
}

.health-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(255,255,255,.05);
}

.health-list dt {
    color: var(--text-secondary);
    font-size: 11px;
}

.health-list dd {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    text-align: right;
}

.health-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--neutral);
}

.health-dot.ok { background: var(--success); }
.health-dot.error { background: var(--danger); }

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 16px;
    color: var(--primary);
    font-size: 11px;
    font-weight: 600;
}

.muted-copy {
    color: var(--text-muted);
    font-size: 10px;
}

.quick-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.quick-action {
    display: flex;
    min-height: 82px;
    align-items: center;
    gap: 12px;
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: 15px;
    color: var(--text-primary);
    background: rgba(255,255,255,.025);
    text-align: left;
}

.quick-action.is-disabled {
    cursor: not-allowed;
    opacity: .75;
}

.quick-icon {
    width: 46px;
    height: 46px;
}

.quick-action strong,
.quick-action small {
    display: block;
}

.quick-action strong {
    font-size: 11px;
}

.quick-action small {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 9px;
}

.alert {
    display: flex;
    min-height: 44px;
    align-items: center;
    gap: 9px;
    margin-bottom: 16px;
    padding: 10px 12px;
    border: 1px solid;
    border-radius: 12px;
    font-size: 11px;
}

.alert-success {
    color: #82F3A1;
    border-color: rgba(55,230,106,.22);
    background: rgba(55,230,106,.09);
}

.alert-danger {
    color: #FF8994;
    border-color: rgba(255,77,94,.24);
    background: rgba(255,77,94,.09);
}

.alert-warning {
    color: #FFD078;
    border-color: rgba(255,176,32,.24);
    background: rgba(255,176,32,.09);
}

.app-footer {
    display: flex;
    min-height: 58px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 24px;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 10px;
}

.mobile-nav {
    display: none;
}

.mobile-scrim {
    display: none;
}

/* ===== Collapsed Sidebar ===== */
.sidebar-collapsed .sidebar {
    width: var(--sidebar-collapsed);
}

.sidebar-collapsed .app-main {
    margin-left: var(--sidebar-collapsed);
}

.sidebar-collapsed .brand-logo {
    width: 0;
    opacity: 0;
    pointer-events: none;
}

.sidebar-collapsed .sidebar-brand {
    justify-content: center;
    padding-inline: 10px;
}

.sidebar-collapsed .nav-label,
.sidebar-collapsed .stage-chip,
.sidebar-collapsed .nav-section-label,
.sidebar-collapsed .sidebar-version > div {
    display: none;
}

.sidebar-collapsed .nav-item {
    justify-content: center;
    padding-inline: 10px;
}

.sidebar-collapsed .sidebar-version {
    justify-content: center;
}

/* ===== Login ===== */
.login-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 13% 18%, rgba(140,255,77,.09), transparent 26%),
        radial-gradient(circle at 88% 80%, rgba(46,145,255,.08), transparent 28%),
        linear-gradient(145deg, #06121c, #0a1c28 54%, #071520);
}

.login-layout {
    display: grid;
    min-height: 100vh;
    grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr);
}

.login-visual,
.login-panel {
    display: grid;
    place-items: center;
    padding: 52px;
}

.login-visual {
    position: relative;
    overflow: hidden;
}

.login-visual::before,
.login-visual::after {
    position: absolute;
    content: "";
    border-radius: 50%;
    filter: blur(2px);
    pointer-events: none;
}

.login-visual::before {
    top: 8%;
    left: -12%;
    width: 420px;
    height: 420px;
    border: 1px solid rgba(140,255,77,.08);
    box-shadow: 0 0 90px rgba(140,255,77,.04);
}

.login-visual::after {
    right: 6%;
    bottom: 8%;
    width: 240px;
    height: 240px;
    border: 1px solid rgba(46,145,255,.07);
}

.login-visual-content {
    position: relative;
    z-index: 1;
    width: min(100%, 650px);
}

.login-logo {
    width: 176px;
    margin-bottom: 36px;
}

.login-visual h1 {
    margin: 20px 0 14px;
    font-size: clamp(44px, 5vw, 76px);
    line-height: .98;
    letter-spacing: -.045em;
}

.login-visual h1 span {
    color: var(--primary);
}

.login-visual-content > p {
    max-width: 580px;
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.7;
}

.login-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 34px;
}

.mini-feature {
    display: flex;
    min-height: 78px;
    align-items: center;
    gap: 13px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 16px;
    color: var(--primary);
    background: rgba(255,255,255,.025);
}

.mini-feature strong,
.mini-feature small {
    display: block;
}

.mini-feature strong {
    color: var(--text-primary);
    font-size: 12px;
}

.mini-feature small {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 9px;
}

.login-panel {
    border-left: 1px solid var(--border);
    background: rgba(4,14,21,.25);
}

.login-card {
    width: min(100%, 450px);
    padding: 34px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: rgba(15,34,47,.75);
    box-shadow: 0 24px 60px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.025);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.login-card h2 {
    margin: 5px 0 7px;
    font-size: 27px;
}

.login-subtitle {
    margin: 0 0 23px;
    color: var(--text-secondary);
    font-size: 11px;
}

.mobile-login-brand {
    display: none;
}

.login-form {
    display: grid;
    gap: 16px;
}

.form-field {
    display: grid;
    gap: 7px;
}

.form-field > span:first-child {
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
}

.form-field input {
    width: 100%;
    height: 46px;
    padding: 0 13px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 12px;
    outline: 0;
    color: var(--text-primary);
    background: rgba(5,17,25,.60);
    transition: 150ms ease;
}

.form-field input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(140,255,77,.10);
}

.form-field input:disabled {
    color: var(--text-disabled);
    cursor: not-allowed;
}

.password-wrap {
    position: relative;
    display: block;
}

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

.password-toggle {
    position: absolute;
    top: 1px;
    right: 1px;
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 0;
    color: var(--text-muted);
    background: transparent;
    cursor: pointer;
}

.field-error {
    color: #FF8994;
    font-size: 10px;
}

.button {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 16px;
    border: 0;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: 150ms ease;
}

.button-primary {
    color: #071520;
    background: var(--primary);
    box-shadow: 0 0 24px rgba(140,255,77,.13);
}

.button-primary:hover:not(:disabled) {
    background: var(--primary-hover);
}

.button:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.button-block {
    width: 100%;
}

.preview-credential {
    display: grid;
    gap: 3px;
    margin-top: 20px;
    padding: 12px;
    border: 1px dashed rgba(140,255,77,.18);
    border-radius: 12px;
    background: rgba(140,255,77,.04);
}

.preview-credential span,
.preview-credential small {
    color: var(--text-muted);
    font-size: 9px;
}

.preview-credential strong {
    font-size: 11px;
}

.security-note {
    margin: 18px 0 0;
    color: var(--text-muted);
    font-size: 9px;
    line-height: 1.6;
}

/* ===== Tablet ===== */
@media (max-width: 1199px) {
    .kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .card-span-8,
    .card-span-4 {
        grid-column: span 12;
    }

    .global-search {
        width: 300px;
    }

    .login-visual,
    .login-panel {
        padding: 36px;
    }
}

@media (max-width: 991px) {
    :root {
        --topbar-height: 72px;
    }

    .sidebar,
    .sidebar-collapsed .sidebar {
        width: min(300px, 86vw);
        transform: translateX(-102%);
        box-shadow: 20px 0 50px rgba(0,0,0,.34);
    }

    .mobile-menu-open .sidebar {
        transform: translateX(0);
    }

    .app-main,
    .sidebar-collapsed .app-main {
        margin-left: 0;
    }

    .sidebar-collapsed .brand-logo {
        width: 142px;
        opacity: 1;
    }

    .sidebar-collapsed .sidebar-brand {
        justify-content: space-between;
        padding-inline: 20px 16px;
    }

    .sidebar-collapsed .nav-label,
    .sidebar-collapsed .stage-chip,
    .sidebar-collapsed .nav-section-label,
    .sidebar-collapsed .sidebar-version > div {
        display: initial;
    }

    .sidebar-collapsed .nav-item {
        justify-content: flex-start;
        padding-inline: 11px;
    }

    .sidebar-collapsed .sidebar-version {
        justify-content: flex-start;
    }

    .mobile-menu-button {
        display: inline-grid;
    }

    .sidebar-toggle {
        display: none;
    }

    .global-search {
        display: none;
    }

    .mobile-scrim {
        position: fixed;
        z-index: 25;
        inset: 0;
        background: rgba(0,0,0,.54);
        opacity: 0;
        pointer-events: none;
        transition: opacity 180ms ease;
    }

    .mobile-menu-open .mobile-scrim {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }

    .page-content {
        padding: 20px;
        padding-bottom: 92px;
    }

    .app-footer {
        padding-bottom: 70px;
    }

    .mobile-nav {
        position: fixed;
        z-index: 22;
        right: 12px;
        bottom: 10px;
        left: 12px;
        display: grid;
        grid-template-columns: repeat(6, minmax(0,1fr));
        min-height: 64px;
        padding: 6px;
        border: 1px solid var(--border);
        border-radius: 18px;
        background: rgba(9,25,36,.94);
        box-shadow: 0 12px 34px rgba(0,0,0,.30);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }

    .mobile-nav-item {
        display: grid;
        min-width: 0;
        place-items: center;
        align-content: center;
        gap: 3px;
        border-radius: 12px;
        color: var(--text-muted);
        font-size: 8px;
        font-weight: 600;
    }

    .mobile-nav-item.active {
        color: var(--bg-primary);
        background: var(--primary);
    }

    .mobile-nav-item.is-disabled {
        opacity: .45;
    }

    .login-layout {
        grid-template-columns: 1fr;
    }

    .login-visual {
        display: none;
    }

    .login-panel {
        min-height: 100vh;
        padding: 24px;
        border-left: 0;
    }

    .mobile-login-brand {
        display: block;
        margin-bottom: 26px;
    }

    .mobile-login-brand img {
        width: 148px;
    }
}

/* ===== Mobile ===== */
@media (max-width: 575px) {
    body {
        font-size: 14px;
    }

    .topbar {
        padding: 12px 14px;
    }

    .topbar h1 {
        font-size: 17px;
    }

    .notification-button,
    .user-copy {
        display: none;
    }

    .avatar {
        width: 38px;
        height: 38px;
    }

    .page-content {
        padding: 16px 14px 94px;
    }

    .page-intro {
        display: block;
        margin-bottom: 16px;
    }

    .page-intro h2 {
        font-size: 23px;
    }

    .page-intro > div > p:last-child {
        font-size: 12px;
    }

    .stage-badge-large {
        margin-top: 13px;
    }

    .kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .stat-card {
        min-height: 132px;
        flex-direction: column;
        gap: 9px;
        padding: 14px;
    }

    .stat-icon {
        width: 39px;
        height: 39px;
    }

    .stat-card strong {
        font-size: 22px;
    }

    .dashboard-grid {
        gap: 12px;
    }

    .card {
        padding: 15px;
        border-radius: 16px;
    }

    .card-header {
        align-items: flex-start;
        margin-bottom: 13px;
    }

    .card-header .muted-copy {
        display: none;
    }

    .foundation-item {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 10px;
    }

    .foundation-item > .status-badge {
        grid-column: 2;
        width: fit-content;
    }

    .quick-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .quick-action {
        min-height: 88px;
        align-items: flex-start;
        flex-direction: column;
    }

    .quick-icon {
        width: 39px;
        height: 39px;
    }

    .app-footer {
        display: none;
    }

    .mobile-nav {
        right: 8px;
        bottom: 8px;
        left: 8px;
    }

    .login-panel {
        padding: 16px;
    }

    .login-card {
        padding: 24px 18px;
        border-radius: 18px;
    }

    .login-card h2 {
        font-size: 24px;
    }
}

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

    .stat-card {
        min-height: 100px;
        flex-direction: row;
    }

    .quick-actions {
        grid-template-columns: 1fr;
    }

    .quick-action {
        min-height: 72px;
        flex-direction: row;
        align-items: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ============================================================
   Stage 1 — User, RBAC & Administration
   ============================================================ */

.nav-form { margin: 0; }
.nav-button {
    width: 100%;
    border: 0;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}
.status-neutral {
    color: var(--text-secondary);
    background: rgba(120,138,154,.13);
}
.compact-intro { align-items: center; }
.button-secondary {
    color: var(--text-primary);
    border: 1px solid var(--border);
    background: rgba(255,255,255,.045);
}
.button-secondary:hover {
    border-color: var(--border-hover);
    background: rgba(255,255,255,.07);
}
.button-small {
    min-height: 34px;
    padding: 0 10px;
    border-radius: 9px;
    font-size: 10px;
}
.form-card-narrow { max-width: 680px; }
.admin-form { display: grid; gap: 22px; }
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.field-help {
    color: var(--text-muted);
    font-size: 9px;
}
.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 2px;
}
.role-fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
.role-fieldset legend {
    margin-bottom: 10px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
}
.role-option-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.check-card,
.permission-row {
    display: flex;
    min-height: 62px;
    align-items: flex-start;
    gap: 11px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: rgba(255,255,255,.02);
    cursor: pointer;
}
.check-card:hover,
.permission-row:hover { border-color: var(--border-hover); }
.check-card input,
.permission-row input {
    width: 17px;
    height: 17px;
    margin: 2px 0 0;
    accent-color: var(--primary);
}
.check-card strong,
.check-card small,
.permission-row strong,
.permission-row small {
    display: block;
}
.check-card strong,
.permission-row strong { font-size: 11px; }
.check-card small,
.permission-row small {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 9px;
}
.table-wrap {
    width: 100%;
    overflow-x: auto;
}
.data-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}
.data-table th {
    padding: 11px 12px;
    color: #8295A4;
    border-bottom: 1px solid var(--border);
    font-size: 10px;
    font-weight: 600;
    text-align: left;
}
.data-table td {
    min-height: 56px;
    padding: 13px 12px;
    border-bottom: 1px solid rgba(255,255,255,.05);
    color: var(--text-secondary);
    font-size: 11px;
    vertical-align: middle;
}
.data-table tbody tr:hover { background: rgba(255,255,255,.022); }
.data-table td strong,
.data-table td small { display: block; }
.data-table td strong { color: var(--text-primary); font-size: 11px; }
.data-table td small { margin-top: 3px; color: var(--text-muted); font-size: 9px; }
.inline-note { margin-top: 6px !important; color: var(--warning) !important; }
.row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.row-actions form { margin: 0; }
.empty-state {
    display: grid;
    min-height: 160px;
    place-items: center;
    align-content: center;
    gap: 5px;
    color: var(--text-muted);
    text-align: center;
}
.empty-state strong { color: var(--text-primary) !important; font-size: 14px !important; }
.role-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.role-card > p {
    min-height: 44px;
    color: var(--text-secondary);
    font-size: 10px;
}
.role-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin: 16px 0;
}
.role-stats span {
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255,255,255,.025);
}
.role-stats strong,
.role-stats small { display: block; }
.role-stats strong { font-size: 18px; }
.role-stats small { color: var(--text-muted); font-size: 9px; }
.permission-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 14px;
    padding-bottom: 86px;
}
.permission-card { align-self: start; }
.permission-list { display: grid; gap: 8px; }
.permission-row { min-height: 56px; }
.sticky-save {
    position: fixed;
    z-index: 18;
    right: 24px;
    bottom: 18px;
    left: calc(var(--sidebar-width) + 24px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: rgba(9,25,36,.95);
    box-shadow: 0 14px 38px rgba(0,0,0,.28);
    backdrop-filter: blur(18px);
}
.sticky-save span { color: var(--text-muted); font-size: 9px; }
.sidebar-collapsed .sticky-save { left: calc(var(--sidebar-collapsed) + 24px); }
.code-pill {
    display: inline-flex;
    padding: 3px 7px;
    border-radius: 7px;
    color: var(--blue);
    background: var(--blue-soft);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 9px;
}
.role-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.profile-meta { margin-top: 12px; }
.security-note-box {
    display: grid;
    gap: 4px;
    margin-top: 20px;
    padding: 12px;
    border: 1px solid rgba(46,145,255,.18);
    border-radius: 12px;
    background: rgba(46,145,255,.055);
}
.security-note-box strong { color: var(--blue); font-size: 10px; }
.security-note-box span { color: var(--text-muted); font-size: 9px; line-height: 1.55; }
.error-state-card {
    display: grid;
    min-height: 440px;
    place-items: center;
    align-content: center;
    gap: 11px;
    text-align: center;
}
.error-state-card h2,
.error-state-card p { margin: 0; }
.error-state-card p { color: var(--text-secondary); }
.error-code {
    color: var(--primary);
    font-size: 54px;
    font-weight: 800;
    line-height: 1;
}
.error-state-card code {
    padding: 3px 6px;
    border-radius: 6px;
    color: var(--blue);
    background: var(--blue-soft);
}

@media (max-width: 1199px) {
    .role-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
    .permission-groups { grid-template-columns: 1fr; }
    .sticky-save {
        right: 14px;
        bottom: 86px;
        left: 14px !important;
    }
}
@media (max-width: 767px) {
    .form-grid,
    .role-option-grid,
    .role-grid { grid-template-columns: 1fr; }

    .data-table,
    .data-table thead,
    .data-table tbody,
    .data-table th,
    .data-table td,
    .data-table tr { display: block; }

    .data-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .data-table tbody { display: grid; gap: 10px; }
    .data-table tr {
        padding: 12px;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: rgba(255,255,255,.02);
    }
    .data-table td {
        display: grid;
        grid-template-columns: minmax(86px,.7fr) minmax(0,1.3fr);
        min-height: 0;
        gap: 10px;
        padding: 8px 0;
        border-bottom: 1px solid rgba(255,255,255,.045);
    }
    .data-table td:last-child { border-bottom: 0; }
    .data-table td::before {
        content: attr(data-label);
        color: var(--text-muted);
        font-size: 9px;
        font-weight: 700;
    }
    .row-actions { justify-content: flex-start; }
    .form-actions { flex-direction: column-reverse; }
    .form-actions .button { width: 100%; }
}

/* ============================================================
   Stage 2 — Member Management
   ============================================================ */
.status-danger{color:#FF7A87;background:rgba(255,77,94,.12)}
.button-danger{color:#FF7A87;border:1px solid rgba(255,77,94,.22);background:rgba(255,77,94,.10)}
.button-danger:hover{background:rgba(255,77,94,.16)}
.select-control,.form-field textarea{width:100%;min-height:46px;padding:0 13px;border:1px solid rgba(255,255,255,.10);border-radius:12px;outline:0;color:var(--text-primary);background:rgba(5,17,25,.60);transition:150ms ease}
.form-field textarea{min-height:92px;padding:12px 13px;resize:vertical}
.select-control:focus,.form-field textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(140,255,77,.10)}
.member-filter-card{margin-bottom:14px}.member-filter-form{display:grid;grid-template-columns:minmax(260px,1fr) 160px 150px auto auto auto;gap:9px;align-items:center}
.search-field{display:flex;min-height:44px;align-items:center;gap:9px;padding:0 12px;border:1px solid var(--border);border-radius:12px;color:var(--text-muted);background:rgba(5,17,25,.55)}
.search-field input{width:100%;border:0;outline:0;color:var(--text-primary);background:transparent}.member-export{margin-left:auto}
.member-cell{display:flex;align-items:center;gap:10px}.member-avatar-small{width:38px;height:38px;flex:0 0 38px;border:1px solid var(--border);border-radius:12px;object-fit:cover;background:var(--bg-tertiary)}
.member-pagination{margin-top:16px}.member-pagination ul{display:flex;flex-wrap:wrap;gap:5px;margin:0;padding:0;list-style:none}.member-pagination a{display:grid;min-width:36px;height:36px;place-items:center;padding:0 8px;border:1px solid var(--border);border-radius:9px;color:var(--text-secondary);background:rgba(255,255,255,.025)}.member-pagination .active a,.member-pagination li.active a{color:var(--bg-primary);border-color:var(--primary);background:var(--primary)}
.member-form-card{max-width:1040px;margin:0 auto}.member-form-section{display:grid;gap:16px;padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.055)}.member-form-section:last-of-type{border-bottom:0}
.form-section-title{display:flex;align-items:center;gap:11px}.form-section-title>span{display:grid;width:34px;height:34px;place-items:center;border-radius:10px;color:var(--primary);background:var(--primary-soft);font-size:10px;font-weight:800}.form-section-title strong,.form-section-title small{display:block}.form-section-title strong{font-size:12px}.form-section-title small{margin-top:2px;color:var(--text-muted);font-size:9px}
.sensitive-field{padding:14px;border:1px solid rgba(255,176,32,.18);border-radius:14px;background:rgba(255,176,32,.035)}.sensitive-field em{margin-left:5px;color:var(--warning);font-size:9px;font-style:normal}
.member-profile-header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:16px}.member-profile-main{display:flex;min-width:0;align-items:center;gap:16px}.member-profile-avatar{width:86px;height:86px;flex:0 0 86px;border:1px solid var(--border);border-radius:22px;object-fit:cover;background:var(--bg-tertiary)}.member-profile-copy h2{margin:4px 0 7px;font-size:25px}.member-profile-copy>small{color:var(--text-muted);font-size:9px}.member-profile-meta-row{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-bottom:6px}.member-number{color:var(--text-secondary);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px}.member-header-actions{display:flex;flex-wrap:wrap;gap:8px}
.member-profile-grid{display:grid;grid-template-columns:minmax(290px,.7fr) minmax(0,1.3fr);gap:16px;margin-bottom:16px}.member-qr-card{text-align:center}.member-qr-card .card-header{text-align:left}.qr-frame{display:grid;width:min(100%,300px);aspect-ratio:1;margin:8px auto 14px;place-items:center;padding:12px;border-radius:18px;background:#F7FAFC}.qr-frame img{display:block;width:100%;height:100%;object-fit:contain}.qr-member-name,.qr-member-number,.qr-token{display:block}.qr-member-name{font-size:15px}.qr-member-number{margin-top:3px;color:var(--primary);font-size:11px;font-weight:700}.qr-token{margin-top:8px;overflow-wrap:anywhere;color:var(--text-muted);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:8px}.qr-dependency-warning{margin:14px 0 0;text-align:left}
.profile-info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:0}.profile-info-grid>div{min-width:0;padding:11px;border:1px solid rgba(255,255,255,.05);border-radius:12px;background:rgba(255,255,255,.018)}.profile-info-grid dt{margin-bottom:4px;color:var(--text-muted);font-size:9px;font-weight:600}.profile-info-grid dd{margin:0;overflow-wrap:anywhere;color:var(--text-secondary);font-size:11px}.profile-info-wide{grid-column:span 2}.sensitive-info{border-color:rgba(255,176,32,.16)!important;background:rgba(255,176,32,.03)!important}
.member-tabs-card{margin-bottom:16px}.member-tab-strip{display:flex;gap:5px;overflow-x:auto;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.055)}.member-tab{min-height:38px;flex:0 0 auto;padding:0 12px;border:1px solid transparent;border-radius:10px;color:var(--text-muted);background:transparent;font-size:10px}.member-tab.active{color:var(--bg-primary);background:var(--primary)}.member-tab:disabled{opacity:.5}
.identifier-section{padding-top:18px}.identifier-list{display:grid;gap:8px}.identifier-row{display:grid;grid-template-columns:100px minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:11px;border:1px solid rgba(255,255,255,.05);border-radius:12px}.identifier-row code{overflow-wrap:anywhere;color:var(--text-secondary);font-size:9px}.identifier-type{color:var(--primary);font-size:10px;font-weight:700}.compact-empty{min-height:240px}
.danger-zone{display:flex;align-items:center;justify-content:space-between;gap:20px;border-color:rgba(255,77,94,.12)}.danger-zone h3{margin:4px 0}.danger-zone p:last-child{margin:0;color:var(--text-muted);font-size:10px}
@media(max-width:1199px){.member-filter-form{grid-template-columns:minmax(220px,1fr) 150px 140px auto auto}.member-export{grid-column:1/-1;width:fit-content;margin-left:0}}
@media(max-width:991px){.member-profile-grid{grid-template-columns:1fr}}
@media(max-width:767px){.member-filter-form{grid-template-columns:1fr 1fr}.search-field{grid-column:span 2}.member-filter-form .button{width:100%}.member-export{grid-column:span 2;width:100%}.member-profile-header{align-items:flex-start;flex-direction:column}.member-header-actions{width:100%}.member-header-actions .button{flex:1}.profile-info-grid{grid-template-columns:1fr}.profile-info-wide{grid-column:span 1}.identifier-row{grid-template-columns:1fr auto}.identifier-row code{grid-column:1/-1}.danger-zone{align-items:stretch;flex-direction:column}.danger-zone .button{width:100%}}
@media(max-width:575px){.member-profile-main{align-items:flex-start}.member-profile-avatar{width:70px;height:70px;flex-basis:70px;border-radius:18px}.member-profile-copy h2{font-size:20px}.member-filter-form{grid-template-columns:1fr}.search-field,.member-export{grid-column:span 1}}

/* ============================================================
   Stage 3 — Package & Membership Engine
   ============================================================ */
.module-tabs {
    display:flex;
    gap:6px;
    margin:0 0 16px;
    padding:6px;
    overflow-x:auto;
    border:1px solid var(--border);
    border-radius:14px;
    background:rgba(255,255,255,.02);
}
.module-tabs a {
    min-height:38px;
    display:inline-flex;
    align-items:center;
    padding:0 13px;
    flex:0 0 auto;
    border-radius:10px;
    color:var(--text-secondary);
    font-size:10px;
    font-weight:600;
}
.module-tabs a.active { color:var(--bg-primary); background:var(--primary); }
.category-grid,.package-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
}
.category-card>p,.package-description {
    min-height:42px;
    color:var(--text-secondary);
    font-size:10px;
    line-height:1.6;
}
.category-card>small { color:var(--text-muted); font-size:9px; }
.category-actions { display:flex; gap:7px; margin-top:16px; }
.category-actions form { margin:0; }
.category-empty,.package-empty { grid-column:1/-1; }
.package-card { position:relative; overflow:hidden; }
.package-card::before {
    content:""; position:absolute; top:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg,var(--primary),rgba(46,145,255,.7));
}
.package-card-top { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:14px; }
.package-category {
    display:inline-flex; padding:4px 8px; border-radius:999px;
    color:var(--primary); background:var(--primary-soft); font-size:9px; font-weight:700;
}
.package-card h3 { margin:4px 0 7px; font-size:17px; }
.package-metrics { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin:14px 0; }
.package-metrics>div {
    padding:10px; border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,.02);
}
.package-metrics strong,.package-metrics small { display:block; }
.package-metrics strong { font-size:18px; }
.package-metrics small { color:var(--text-muted); font-size:9px; }
.package-price { display:block; color:var(--primary); font-size:18px; }
.package-form-card,.membership-activation-card { max-width:1040px; margin:0 auto; }
.technical-note {
    display:grid; gap:4px; padding:12px 14px;
    border:1px solid rgba(46,145,255,.17); border-radius:13px; background:rgba(46,145,255,.045);
}
.technical-note strong { color:var(--blue); font-size:10px; }
.technical-note span { color:var(--text-secondary); font-size:10px; line-height:1.55; }
.membership-filter-form {
    display:grid; grid-template-columns:minmax(260px,1fr) 190px auto auto; gap:9px; align-items:center;
}
.membership-status {
    display:inline-flex; min-height:26px; align-items:center; justify-content:center;
    padding:4px 9px; border-radius:999px; font-size:9px; font-weight:800; letter-spacing:.025em;
}
.status-active { color:var(--success); background:rgba(55,230,106,.12); }
.status-pending { color:var(--blue); background:var(--blue-soft); }
.status-exhausted { color:var(--warning); background:rgba(255,176,32,.12); }
.status-expired { color:var(--text-secondary); background:rgba(120,138,154,.14); }
.status-suspended { color:#D9A7FF; background:rgba(163,91,255,.13); }
.status-cancelled { color:#FF7A87; background:rgba(255,77,94,.12); }
.activation-steps {
    display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
}
.activation-step {
    display:flex; min-height:55px; align-items:center; gap:9px;
    padding:10px; border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,.02);
}
.activation-step>span {
    display:grid; width:28px; height:28px; flex:0 0 28px; place-items:center;
    border-radius:9px; color:var(--bg-primary); background:var(--primary); font-size:10px; font-weight:800;
}
.activation-step strong { font-size:10px; }
.extend-panel { display:grid; gap:12px; padding:14px; border:1px solid rgba(140,255,77,.14); border-radius:14px; background:rgba(140,255,77,.025); }
.is-hidden { display:none!important; }
.activation-warning {
    display:flex; gap:11px; align-items:flex-start; padding:13px;
    border:1px solid rgba(255,176,32,.15); border-radius:13px; color:var(--warning); background:rgba(255,176,32,.035);
}
.activation-warning strong,.activation-warning span { display:block; }
.activation-warning strong { color:var(--text-primary); font-size:10px; }
.activation-warning span { margin-top:3px; color:var(--text-muted); font-size:9px; line-height:1.5; }
.membership-summary-grid {
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-bottom:18px;
}
.membership-summary-grid>div {
    padding:11px; border:1px solid rgba(255,255,255,.05); border-radius:12px; background:rgba(255,255,255,.018);
}
.membership-summary-grid span,.membership-summary-grid strong { display:block; }
.membership-summary-grid span { color:var(--text-muted); font-size:9px; }
.membership-summary-grid strong { margin-top:3px; font-size:11px; overflow-wrap:anywhere; }
.quota-panel { padding:14px; border:1px solid var(--border); border-radius:14px; background:rgba(255,255,255,.02); }
.quota-copy { display:flex; align-items:end; justify-content:space-between; gap:12px; margin-bottom:10px; }
.quota-copy strong { font-size:20px; }
.quota-copy>span { color:var(--text-muted); font-size:9px; }
.quota-progress { height:8px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.06); }
.quota-progress span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--primary),#53E693); }
.membership-lifecycle-card {
    display:grid; grid-template-columns:minmax(260px,1fr) minmax(300px,.8fr); gap:14px; margin-top:16px; align-items:start;
    border-color:rgba(255,176,32,.13);
}
.membership-lifecycle-card h3 { margin:4px 0; }
.membership-lifecycle-card p:last-child { margin:0; color:var(--text-muted); font-size:10px; line-height:1.55; }
.lifecycle-form { display:grid; grid-template-columns:1fr auto; gap:8px; }
.lifecycle-form input {
    min-width:0; min-height:44px; padding:0 12px; border:1px solid var(--border); border-radius:11px;
    outline:0; color:var(--text-primary); background:rgba(5,17,25,.55);
}
.lifecycle-form input:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(140,255,77,.08); }
.vertical-actions { display:grid; gap:9px; }
.vertical-actions .quick-action { min-height:70px; }
.member-tab-ready { color:var(--primary)!important; border:1px solid rgba(140,255,77,.16); background:rgba(140,255,77,.05); }
.member-membership-section { padding:18px 0; border-bottom:1px solid rgba(255,255,255,.055); }
.member-membership-list { display:grid; gap:8px; }
.member-membership-row {
    display:grid; grid-template-columns:minmax(0,1fr) 90px auto; align-items:center; gap:12px;
    padding:11px; border:1px solid rgba(255,255,255,.055); border-radius:12px; background:rgba(255,255,255,.018);
    transition:150ms ease;
}
.member-membership-row:hover { border-color:var(--border-hover); transform:translateY(-1px); }
.member-membership-row strong,.member-membership-row small { display:block; }
.member-membership-row strong { font-size:11px; }
.member-membership-row small { margin-top:3px; color:var(--text-muted); font-size:9px; }
.member-membership-quota { text-align:center; }
.member-membership-quota strong { color:var(--primary); font-size:15px; }
.compact-membership-empty { min-height:120px; }

@media(max-width:1199px) {
    .category-grid,.package-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:767px) {
    .category-grid,.package-grid { grid-template-columns:1fr; }
    .membership-filter-form { grid-template-columns:1fr 1fr; }
    .membership-filter-form .search-field { grid-column:span 2; }
    .activation-steps { grid-template-columns:1fr; }
    .membership-summary-grid { grid-template-columns:1fr; }
    .membership-lifecycle-card { grid-template-columns:1fr; }
    .member-membership-row { grid-template-columns:1fr auto; }
    .member-membership-quota { grid-row:2; text-align:left; }
}
@media(max-width:575px) {
    .membership-filter-form { grid-template-columns:1fr; }
    .membership-filter-form .search-field { grid-column:span 1; }
    .lifecycle-form { grid-template-columns:1fr; }
    .module-tabs { margin-inline:-2px; }
}

/* ============================================================
   Stage 4 — Attendance & QR Check-in
   ============================================================ */
.attendance-filter-form { display:grid; grid-template-columns:minmax(260px,1fr) 130px 130px 160px auto auto; gap:8px; align-items:center; }
.attendance-status { display:inline-flex; min-height:25px; align-items:center; padding:4px 8px; border-radius:999px; font-size:9px; font-weight:800; }
.status-att-success { color:var(--success); background:rgba(55,230,106,.12); }
.status-att-void { color:#FF7A87; background:rgba(255,77,94,.12); }
.void-control { position:relative; }
.void-control summary { display:inline-flex; cursor:pointer; color:#FF7A87; font-size:10px; font-weight:700; list-style:none; }
.void-control summary::-webkit-details-marker { display:none; }
.void-control form { display:grid; gap:6px; min-width:210px; margin-top:8px; }
.void-control input { min-height:38px; padding:0 9px; border:1px solid var(--border); border-radius:9px; outline:0; color:var(--text-primary); background:var(--bg-primary); font-size:10px; }
.scanner-layout { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr); gap:16px; }
.camera-frame { position:relative; display:grid; width:100%; aspect-ratio:16/10; place-items:center; overflow:hidden; border:1px solid var(--border); border-radius:18px; background:#030a0f; }
.camera-frame video { width:100%; height:100%; object-fit:cover; }
.camera-placeholder { position:absolute; inset:0; display:grid; place-items:center; align-content:center; gap:7px; color:var(--primary); background:radial-gradient(circle at center,rgba(140,255,77,.05),transparent 45%),#07131c; }
.camera-placeholder strong { color:var(--text-primary); font-size:13px; }
.camera-placeholder span { color:var(--text-muted); font-size:9px; }
.camera-guide { position:absolute; z-index:2; width:min(56%,260px); aspect-ratio:1; border:1px solid rgba(140,255,77,.22); border-radius:22px; box-shadow:0 0 0 999px rgba(0,0,0,.12); pointer-events:none; }
.camera-guide::before,.camera-guide::after,.camera-guide span::before,.camera-guide span::after { content:""; position:absolute; width:28px; height:28px; border-color:var(--primary); }
.camera-guide::before { top:-2px; left:-2px; border-top:3px solid; border-left:3px solid; border-radius:8px 0 0 0; }
.camera-guide::after { top:-2px; right:-2px; border-top:3px solid; border-right:3px solid; border-radius:0 8px 0 0; }
.camera-guide span::before { bottom:-2px; left:-2px; border-bottom:3px solid; border-left:3px solid; border-radius:0 0 0 8px; }
.camera-guide span::after { bottom:-2px; right:-2px; border-bottom:3px solid; border-right:3px solid; border-radius:0 0 8px 0; }
.scanner-actions { display:flex; gap:8px; margin-top:12px; }
.scanner-browser-note { margin-top:10px; color:var(--text-muted); font-size:9px; line-height:1.55; }
.scanner-manual-code { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:end; margin-top:16px; padding-top:16px; border-top:1px solid var(--border); }
.scanner-result-card { min-height:430px; }
.scan-pulse { width:10px; height:10px; border-radius:50%; background:var(--neutral); box-shadow:0 0 0 6px rgba(120,138,154,.08); }
.pulse-success { background:var(--success); box-shadow:0 0 0 6px rgba(55,230,106,.09); }
.pulse-error { background:var(--danger); box-shadow:0 0 0 6px rgba(255,77,94,.09); }
.pulse-select { background:var(--blue); box-shadow:0 0 0 6px rgba(46,145,255,.09); }
.scan-state { display:grid; min-height:250px; place-items:center; align-content:center; gap:7px; padding:22px; text-align:center; }
.scan-state-icon { display:grid; width:64px; height:64px; place-items:center; margin-bottom:6px; border-radius:50%; color:var(--text-muted); background:rgba(255,255,255,.035); font-size:26px; font-weight:800; }
.scan-state strong { font-size:17px; }
.scan-state>span { max-width:460px; color:var(--text-muted); font-size:10px; line-height:1.55; }
.scan-success .scan-state-icon { color:var(--success); background:rgba(55,230,106,.10); }
.scan-error .scan-state-icon { color:var(--danger); background:rgba(255,77,94,.10); }
.scan-select .scan-state-icon { color:var(--blue); background:var(--blue-soft); }
.scan-success-detail { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; width:min(100%,440px); margin-top:13px; text-align:left; }
.scan-success-detail>div { padding:9px; border:1px solid var(--border); border-radius:10px; background:rgba(255,255,255,.02); }
.scan-success-detail span,.scan-success-detail strong { display:block; }
.scan-success-detail span { color:var(--text-muted); font-size:8px; }
.scan-success-detail strong { margin-top:2px; font-size:10px; }
.scan-reference { margin-top:6px; color:var(--primary)!important; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:8px!important; }
.membership-choice { display:grid; gap:8px; margin-top:-10px; padding-bottom:14px; }
.membership-choice-button { display:flex; min-height:66px; align-items:center; justify-content:space-between; gap:12px; width:100%; padding:12px; border:1px solid var(--border); border-radius:13px; color:var(--text-primary); background:rgba(255,255,255,.025); text-align:left; cursor:pointer; }
.membership-choice-button:hover { border-color:rgba(140,255,77,.25); background:rgba(140,255,77,.04); }
.membership-choice-button strong,.membership-choice-button small { display:block; }
.membership-choice-button strong { font-size:10px; }
.membership-choice-button small { margin-top:3px; color:var(--text-muted); font-size:9px; }
.membership-choice-button>span:last-child { color:var(--primary); font-size:10px; font-weight:800; }
.scanner-rule-card { margin-top:16px; }
.scanner-rule-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.scanner-rule-grid>div { display:grid; grid-template-columns:30px 1fr; column-gap:8px; align-items:center; padding:10px; border:1px solid rgba(255,255,255,.05); border-radius:12px; }
.scanner-rule-grid>div>span { grid-row:span 2; display:grid; width:30px; height:30px; place-items:center; border-radius:9px; color:var(--primary); background:var(--primary-soft); font-size:9px; font-weight:800; }
.scanner-rule-grid strong { font-size:9px; }
.scanner-rule-grid small { color:var(--text-muted); font-size:8px; line-height:1.4; }
.manual-empty { min-height:230px; }
.eligible-choice-list { display:grid; gap:8px; }
.eligible-choice { display:grid; grid-template-columns:20px minmax(0,1fr) auto; gap:10px; align-items:center; padding:12px; border:1px solid var(--border); border-radius:13px; background:rgba(255,255,255,.02); cursor:pointer; }
.eligible-choice input { width:17px; height:17px; accent-color:var(--primary); }
.eligible-choice strong,.eligible-choice small { display:block; }
.eligible-choice strong { font-size:10px; }
.eligible-choice small { margin-top:3px; color:var(--text-muted); font-size:9px; }
.member-attendance-section { padding:18px 0; border-bottom:1px solid rgba(255,255,255,.055); }
.member-attendance-list { display:grid; gap:8px; }
.member-attendance-row { display:grid; grid-template-columns:minmax(0,1fr) 90px auto; gap:12px; align-items:center; padding:11px; border:1px solid rgba(255,255,255,.055); border-radius:12px; background:rgba(255,255,255,.018); }
.member-attendance-row strong,.member-attendance-row small { display:block; }
.member-attendance-row strong { font-size:10px; }
.member-attendance-row small { margin-top:3px; color:var(--text-muted); font-size:8px; }
.member-attendance-quota { text-align:center; }
.member-attendance-quota strong { color:var(--primary); font-size:12px; }
@media(max-width:1199px){.attendance-filter-form{grid-template-columns:minmax(220px,1fr) 130px 130px 150px}.attendance-filter-form .button{width:100%}.scanner-rule-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:991px){.scanner-layout{grid-template-columns:1fr}.scanner-result-card{min-height:auto}.camera-frame{aspect-ratio:4/3}}
@media(max-width:767px){.attendance-filter-form{grid-template-columns:1fr 1fr}.attendance-filter-form .search-field{grid-column:span 2}.scanner-rule-grid{grid-template-columns:1fr 1fr}.member-attendance-row{grid-template-columns:1fr auto}.member-attendance-quota{grid-row:2;text-align:left}}
@media(max-width:575px){.attendance-filter-form{grid-template-columns:1fr}.attendance-filter-form .search-field{grid-column:span 1}.scanner-manual-code{grid-template-columns:1fr}.scanner-rule-grid{grid-template-columns:1fr}.scan-success-detail{grid-template-columns:1fr}.eligible-choice{grid-template-columns:20px 1fr}.eligible-choice>.membership-status{grid-column:2}.camera-frame{aspect-ratio:1}.camera-guide{width:68%}}

/* ============================================================
   Stage 5 — Payment & Promo
   ============================================================ */
.date-control {
    min-height:44px;padding:0 11px;border:1px solid var(--border);border-radius:11px;
    color:var(--text-primary);background:rgba(5,17,25,.55);outline:0;
}
.payment-filter-form {
    display:grid;grid-template-columns:minmax(230px,1fr) 140px 170px 145px 145px auto auto;gap:8px;align-items:center;
}
.payment-status {
    display:inline-flex;min-height:26px;align-items:center;justify-content:center;padding:4px 9px;
    border-radius:999px;font-size:9px;font-weight:800;letter-spacing:.025em;
}
.status-pay-paid {color:var(--success);background:rgba(55,230,106,.12)}
.status-pay-pending {color:var(--warning);background:rgba(255,176,32,.12)}
.status-pay-void {color:#FF7A87;background:rgba(255,77,94,.12)}
.status-pay-cancelled {color:var(--text-secondary);background:rgba(120,138,154,.14)}
.payment-compose-grid {display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
.payment-summary-card {position:sticky;top:88px}
.payment-summary-card h3 {margin:5px 0 18px}
.payment-summary-list {margin:0 0 16px}
.payment-summary-list>div {display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.055)}
.payment-summary-list dt,.payment-summary-list dd {margin:0}
.payment-summary-list dt {color:var(--text-muted);font-size:10px}
.payment-summary-list dd {font-size:11px;font-weight:700}
.payment-summary-total {padding-top:14px!important;border-bottom:0!important}
.payment-summary-total dt,.payment-summary-total dd {color:var(--primary);font-size:17px!important}
.promo-apply-box {
    display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;align-items:end;padding:14px;
    border:1px solid rgba(140,255,77,.13);border-radius:14px;background:rgba(140,255,77,.025)
}
.promo-message {grid-column:1/-1;min-height:18px}
.payment-detail-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-bottom:16px}
.payment-detail-grid>div {padding:11px;border:1px solid rgba(255,255,255,.05);border-radius:12px;background:rgba(255,255,255,.018)}
.payment-detail-grid span,.payment-detail-grid strong,.payment-detail-grid small {display:block}
.payment-detail-grid span {color:var(--text-muted);font-size:9px}
.payment-detail-grid strong {margin-top:3px;font-size:11px}
.payment-detail-grid small {margin-top:3px;color:var(--text-muted);font-size:9px}
.payment-item-list {display:grid;gap:8px;margin:16px 0}
.payment-item-row {display:grid;grid-template-columns:minmax(0,1fr) 120px 120px 120px;gap:10px;align-items:center;padding:12px;border:1px solid var(--border);border-radius:12px}
.payment-item-row span,.payment-item-row strong,.payment-item-row small {display:block}
.payment-item-row span,.payment-item-row small {color:var(--text-muted);font-size:9px}
.payment-item-row strong {font-size:10px}
.payment-total-panel {max-width:440px;margin-left:auto;padding:14px;border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.02)}
.payment-total-panel>div {display:flex;justify-content:space-between;padding:7px 0;color:var(--text-secondary);font-size:10px}
.payment-total-panel .grand-total {margin-top:5px;padding-top:12px;border-top:1px solid var(--border);color:var(--primary);font-size:16px}
.payment-next-step,.payment-lifecycle-card,.payment-void-zone {
    display:grid;grid-template-columns:minmax(260px,1fr) minmax(280px,.7fr);gap:14px;align-items:center;margin-top:16px
}
.payment-next-step p,.payment-lifecycle-card p,.payment-void-zone p {margin:4px 0 0;color:var(--text-muted);font-size:10px;line-height:1.55}
.payment-lifecycle-card {align-items:start}
.payment-void-zone {border-color:rgba(255,77,94,.13)}
.promo-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.promo-card {position:relative;overflow:hidden}
.promo-card::before {content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--primary),rgba(163,91,255,.75))}
.promo-card-head {display:flex;justify-content:space-between;gap:8px;margin-bottom:13px}
.promo-kind {display:inline-flex;padding:4px 8px;border-radius:999px;color:#D9A7FF;background:rgba(163,91,255,.13);font-size:9px;font-weight:700}
.promo-card h3 {margin:4px 0 10px}
.promo-card>p:last-of-type {min-height:42px;color:var(--text-secondary);font-size:10px;line-height:1.55}
.promo-value {display:flex;align-items:end;gap:8px;margin:10px 0}
.promo-value strong {color:var(--primary);font-size:24px}
.promo-value small {padding-bottom:3px;color:var(--text-muted);font-size:8px}
.promo-period {display:flex;gap:6px;align-items:center;flex-wrap:wrap;color:var(--text-muted);font-size:8px}
.promo-usage-line {display:flex;justify-content:space-between;margin-top:12px;padding:9px 0;border-top:1px solid rgba(255,255,255,.05);font-size:9px}
.promo-form-card {max-width:1100px;margin:0 auto}
.promo-restriction-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.restriction-scroll {display:grid;gap:7px;max-height:310px;overflow:auto;padding-right:4px}
.promo-empty {grid-column:1/-1}
.membership-payment-section,.member-payment-section {padding:18px 0;border-top:1px solid rgba(255,255,255,.055)}
.member-payment-list {display:grid;gap:8px}
.member-payment-row {
    display:grid;grid-template-columns:minmax(0,1fr) 140px auto;gap:12px;align-items:center;
    padding:11px;border:1px solid rgba(255,255,255,.055);border-radius:12px;background:rgba(255,255,255,.018)
}
.member-payment-row:hover {border-color:var(--border-hover);transform:translateY(-1px)}
.member-payment-row strong,.member-payment-row small {display:block}
.member-payment-row>div>strong {font-size:11px}
.member-payment-row small {margin-top:3px;color:var(--text-muted);font-size:9px}
.member-payment-amount {text-align:right}
.member-payment-amount>strong {color:var(--primary)}
@media(max-width:1199px){
    .payment-filter-form{grid-template-columns:minmax(220px,1fr) 140px 160px 140px 140px}
    .payment-filter-form .button{width:100%}
    .promo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:991px){
    .payment-compose-grid{grid-template-columns:1fr}
    .payment-summary-card{position:static}
}
@media(max-width:767px){
    .payment-filter-form{grid-template-columns:1fr 1fr}
    .payment-filter-form .search-field{grid-column:span 2}
    .payment-detail-grid,.promo-restriction-grid{grid-template-columns:1fr}
    .payment-item-row{grid-template-columns:1fr 1fr}
    .payment-next-step,.payment-lifecycle-card,.payment-void-zone{grid-template-columns:1fr;align-items:stretch}
    .promo-grid{grid-template-columns:1fr}
    .member-payment-row{grid-template-columns:1fr auto}
    .member-payment-amount{grid-row:2;text-align:left}
}
@media(max-width:575px){
    .payment-filter-form{grid-template-columns:1fr}
    .payment-filter-form .search-field{grid-column:span 1}
    .promo-apply-box{grid-template-columns:1fr}
    .promo-message{grid-column:1}
    .payment-item-row{grid-template-columns:1fr}
}

/* ============================================================
   Stage 6 — Personal Trainer
   ============================================================ */
.trainer-filter-form{display:grid;grid-template-columns:minmax(260px,1fr) 170px 150px auto auto;gap:9px;align-items:center}
.trainer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.trainer-empty{grid-column:1/-1}
.trainer-card{display:flex;flex-direction:column;min-height:270px}
.trainer-card-top{display:grid;grid-template-columns:58px minmax(0,1fr) auto;gap:11px;align-items:start}
.trainer-card-avatar{width:58px;height:58px;border-radius:16px;object-fit:cover;border:1px solid var(--border);background:var(--bg-tertiary)}
.trainer-card-name{min-width:0}
.trainer-card-name h3{margin:4px 0 3px;font-size:15px}
.trainer-card-name small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-muted);font-size:9px}
.trainer-contact-line{display:grid;gap:4px;margin:14px 0;color:var(--text-secondary);font-size:9px}
.trainer-contact-line span{overflow-wrap:anywhere}
.trainer-today{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding:10px;border:1px solid rgba(255,255,255,.05);border-radius:12px;background:rgba(255,255,255,.018)}
.trainer-today span,.trainer-today strong{display:block}
.trainer-today>div>span{color:var(--text-muted);font-size:8px}
.trainer-today>div>strong{margin-top:2px;font-size:11px}
.trainer-form-card{max-width:1060px;margin:0 auto}
.trainer-profile-header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:16px}
.trainer-profile-main{display:flex;align-items:center;gap:16px;min-width:0}
.trainer-profile-avatar{width:92px;height:92px;flex:0 0 92px;border-radius:24px;object-fit:cover;border:1px solid var(--border);background:var(--bg-tertiary)}
.trainer-profile-main h2{margin:4px 0 7px;font-size:25px}
.trainer-profile-main small{color:var(--text-muted);font-size:10px}
.trainer-profile-meta{display:flex;align-items:center;gap:7px;margin-bottom:5px}
.trainer-employment{display:inline-flex;padding:4px 8px;border-radius:999px;color:var(--blue);background:var(--blue-soft);font-size:9px;font-weight:700}
.trainer-today-list{display:grid;gap:8px}
.trainer-today-row{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid rgba(255,255,255,.055);border-radius:12px;background:rgba(255,255,255,.018)}
.trainer-today-row strong,.trainer-today-row small{display:block}
.trainer-today-row strong{font-size:11px}.trainer-today-row small{margin-top:3px;color:var(--text-muted);font-size:9px}
.trainer-schedule-section,.trainer-cert-section{margin-top:16px}
.schedule-week-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.schedule-slot{position:relative;display:grid;gap:9px;min-height:100px;padding:11px;border:1px solid rgba(255,255,255,.055);border-radius:12px;background:rgba(255,255,255,.018)}
.schedule-slot strong,.schedule-slot small{display:block}.schedule-slot strong{font-size:11px}.schedule-slot small{margin-top:3px;color:var(--text-muted);font-size:9px}
.schedule-actions{display:flex;gap:9px;margin-top:auto;font-size:9px}.schedule-actions a,.schedule-actions button{border:0;padding:0;color:var(--text-muted);background:none;cursor:pointer}.schedule-actions a:hover,.schedule-actions button:hover{color:var(--primary)}
.schedule-empty{grid-column:1/-1;min-height:110px}
.trainer-subheader{margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.055)}
.trainer-exception-list{display:grid;gap:8px}
.trainer-exception-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:11px;border:1px solid rgba(255,255,255,.055);border-radius:12px}
.trainer-exception-row strong,.trainer-exception-row small{display:block}.trainer-exception-row strong{font-size:11px}.trainer-exception-row small{margin-top:3px;color:var(--text-muted);font-size:9px}
.trainer-inline-form{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.055)}
.schedule-create-form{display:grid;grid-template-columns:140px 140px 140px 120px 120px 145px minmax(140px,1fr) auto;gap:8px;align-items:center}
.schedule-create-form input:not([type=hidden]){min-height:44px;padding:0 11px;border:1px solid var(--border);border-radius:11px;color:var(--text-primary);background:rgba(5,17,25,.55);outline:0}
.certification-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.certification-card{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:10px;align-items:start;padding:12px;border:1px solid rgba(255,255,255,.055);border-radius:12px;background:rgba(255,255,255,.018)}
.certification-icon{display:grid;width:34px;height:34px;place-items:center;border-radius:10px;color:var(--primary);background:var(--primary-soft)}
.certification-card strong,.certification-card small,.certification-card span{display:block}.certification-card strong{font-size:11px}.certification-card small,.certification-card span{margin-top:3px;color:var(--text-muted);font-size:9px}
.cert-empty{grid-column:1/-1;min-height:110px}
.certification-create-form{display:grid;grid-template-columns:minmax(170px,1fr) minmax(150px,1fr) 150px 140px 140px minmax(140px,1fr) auto;gap:8px;align-items:center}
.certification-create-form input:not([type=hidden]){min-height:44px;padding:0 11px;border:1px solid var(--border);border-radius:11px;color:var(--text-primary);background:rgba(5,17,25,.55);outline:0}
.trainer-class-placeholder{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:16px}
.trainer-class-placeholder h3{margin:4px 0}.trainer-class-placeholder p:last-child{margin:0;color:var(--text-muted);font-size:10px}
.trainer-unlinked-card{max-width:660px;margin:80px auto;text-align:center;padding:38px}
.trainer-unlinked-icon{display:grid;width:72px;height:72px;margin:0 auto 15px;place-items:center;border-radius:22px;color:var(--primary);background:var(--primary-soft)}
.trainer-unlinked-card h2{margin:6px 0 10px}.trainer-unlinked-card p{color:var(--text-secondary);font-size:11px;line-height:1.7}
@media(max-width:1199px){
 .trainer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .schedule-week-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .schedule-create-form{grid-template-columns:repeat(4,minmax(0,1fr))}
 .certification-create-form{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:767px){
 .trainer-filter-form{grid-template-columns:1fr 1fr}.trainer-filter-form .search-field{grid-column:span 2}
 .trainer-grid{grid-template-columns:1fr}
 .trainer-profile-header{align-items:flex-start;flex-direction:column}.trainer-profile-main{align-items:flex-start}.trainer-profile-avatar{width:74px;height:74px;flex-basis:74px;border-radius:19px}
 .schedule-week-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .trainer-exception-row{grid-template-columns:1fr auto}.trainer-exception-row .row-actions{grid-column:1/-1}
 .schedule-create-form,.certification-create-form{grid-template-columns:1fr 1fr}
 .certification-grid{grid-template-columns:1fr}.certification-card{grid-template-columns:36px minmax(0,1fr)}
 .certification-card .row-actions{grid-column:1/-1}
 .trainer-class-placeholder{align-items:flex-start;flex-direction:column}
}
@media(max-width:575px){
 .trainer-filter-form{grid-template-columns:1fr}.trainer-filter-form .search-field{grid-column:span 1}
 .trainer-card-top{grid-template-columns:52px minmax(0,1fr)}.trainer-card-top>.status-badge{grid-column:2}
 .schedule-week-grid{grid-template-columns:1fr}
 .schedule-create-form,.certification-create-form{grid-template-columns:1fr}
}

/* ============================================================
   Stage 7 — Classes
   ============================================================ */
.class-type-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.class-type-empty{grid-column:1/-1}.class-type-card{position:relative;overflow:hidden}.class-type-card:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--primary),rgba(46,145,255,.7))}
.class-type-top,.class-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.class-category{display:inline-flex;padding:4px 8px;border-radius:999px;color:var(--blue);background:var(--blue-soft);font-size:9px;font-weight:700}
.class-type-card h3{margin:7px 0}.class-type-card>p:last-of-type{min-height:40px;color:var(--text-secondary);font-size:10px;line-height:1.55}
.class-type-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:13px}.class-type-metrics>div{padding:9px;border:1px solid rgba(255,255,255,.055);border-radius:11px;text-align:center;background:rgba(255,255,255,.018)}.class-type-metrics strong,.class-type-metrics small{display:block}.class-type-metrics strong{font-size:14px}.class-type-metrics small{color:var(--text-muted);font-size:8px}
.class-form-card{max-width:1060px;margin:0 auto}
.class-filter-form{display:grid;grid-template-columns:145px 145px minmax(160px,1fr) minmax(160px,1fr) 145px auto auto;gap:8px;align-items:center}
.class-schedule-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.class-list-empty{grid-column:1/-1}
.class-schedule-card{display:grid;grid-template-columns:76px minmax(0,1fr);padding:0;overflow:hidden}
.class-schedule-date{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:220px;padding:14px;border-right:1px solid var(--border);background:rgba(140,255,77,.035)}
.class-schedule-date strong{font-size:32px;line-height:1}.class-schedule-date span{margin-top:5px;color:var(--primary);font-size:10px;font-weight:800}.class-schedule-date small{margin-top:3px;color:var(--text-muted);font-size:9px}
.class-schedule-body{padding:17px}.class-schedule-body h3{margin:8px 0 4px;font-size:17px}.class-schedule-body>p{margin:0;color:var(--text-secondary);font-size:10px}
.class-status{display:inline-flex;min-height:25px;align-items:center;padding:4px 8px;border-radius:999px;font-size:8px;font-weight:800}.class-status-scheduled{color:var(--success);background:rgba(55,230,106,.12)}.class-status-draft{color:var(--warning);background:rgba(255,176,32,.12)}.class-status-completed{color:var(--blue);background:var(--blue-soft)}.class-status-cancelled{color:#FF7A87;background:rgba(255,77,94,.12)}
.class-trainer-line{display:flex;align-items:center;gap:6px;margin:12px 0;color:var(--text-secondary);font-size:9px}
.capacity-line{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px}.capacity-line>div{padding:8px;border:1px solid rgba(255,255,255,.05);border-radius:10px}.capacity-line span,.capacity-line strong{display:block}.capacity-line span{color:var(--text-muted);font-size:8px}.capacity-line strong{margin-top:2px;font-size:12px}
.class-capacity-progress{height:6px;margin-top:9px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.055)}.class-capacity-progress span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--primary),#53E693)}
.class-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:16px}.class-summary-card span,.class-summary-card strong,.class-summary-card small{display:block}.class-summary-card span{color:var(--text-muted);font-size:9px}.class-summary-card strong{margin-top:4px;font-size:16px}.class-summary-card small{margin-top:3px;color:var(--text-secondary);font-size:9px}
.class-booking-panel{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(400px,1.2fr);gap:16px;align-items:center;margin-bottom:16px}.class-booking-panel h3{margin:4px 0}.class-booking-panel p:last-child{margin:0;color:var(--text-muted);font-size:10px;line-height:1.55}
.class-booking-form{display:grid;grid-template-columns:minmax(170px,1fr) minmax(220px,1fr) auto;gap:8px;align-items:center}.class-booking-panel>.muted-copy{grid-column:2}
.class-booking-card small{display:block;margin-top:3px;color:var(--text-muted);font-size:8px}.class-row-actions{flex-wrap:wrap}.class-row-actions form{margin:0}
.class-policy-note{margin-top:16px}
.trainer-class-section{margin-top:16px}.trainer-class-list{display:grid;gap:8px}.trainer-class-row{display:grid;grid-template-columns:minmax(0,1fr) 150px auto;gap:12px;align-items:center;padding:11px;border:1px solid rgba(255,255,255,.055);border-radius:12px;background:rgba(255,255,255,.018)}.trainer-class-row:hover{border-color:var(--border-hover);transform:translateY(-1px)}.trainer-class-row strong,.trainer-class-row small{display:block}.trainer-class-row strong{font-size:10px}.trainer-class-row small{margin-top:3px;color:var(--text-muted);font-size:8px}
.status-danger{color:#FF7A87;background:rgba(255,77,94,.12)}
@media(max-width:1199px){.class-type-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.class-filter-form{grid-template-columns:repeat(4,minmax(0,1fr))}.class-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:991px){.class-schedule-grid{grid-template-columns:1fr}.class-booking-panel{grid-template-columns:1fr}.class-booking-panel>.muted-copy{grid-column:1}}
@media(max-width:767px){.class-type-grid{grid-template-columns:1fr}.class-filter-form{grid-template-columns:1fr 1fr}.class-booking-form{grid-template-columns:1fr}.class-summary-grid{grid-template-columns:1fr 1fr}.trainer-class-row{grid-template-columns:1fr auto}.trainer-class-row>div:nth-child(2){grid-row:2}}
@media(max-width:575px){.class-filter-form{grid-template-columns:1fr}.class-schedule-card{grid-template-columns:60px minmax(0,1fr)}.class-schedule-date{min-height:240px;padding:8px}.class-schedule-date strong{font-size:25px}.class-summary-grid{grid-template-columns:1fr}.class-type-metrics{grid-template-columns:1fr 1fr}}

/* ============================================================
   Stage 8 — Fonnte & Notifications
   ============================================================ */
.notification-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.notification-filter-form{display:grid;grid-template-columns:minmax(230px,1fr) 130px minmax(170px,1fr) 145px 145px auto auto;gap:8px;align-items:center}
.notification-status{display:inline-flex;min-height:25px;align-items:center;padding:4px 8px;border-radius:999px;font-size:8px;font-weight:800}
.notification-status-sent{color:var(--success);background:rgba(55,230,106,.12)}
.notification-status-failed{color:#FF7A87;background:rgba(255,77,94,.12)}
.notification-status-skipped{color:var(--text-secondary);background:rgba(120,138,154,.14)}
.notification-response{display:block;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-secondary);font-size:9px}
.notification-message-preview{margin-top:16px;padding:15px;border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.02);white-space:normal;font-size:11px;line-height:1.65}
.notification-code-block{margin:12px 0}.notification-code-block>strong{display:block;margin-bottom:6px;font-size:10px}.notification-code-block pre{max-height:260px;overflow:auto;margin:0;padding:11px;border:1px solid var(--border);border-radius:11px;background:rgba(0,0,0,.16);color:var(--text-secondary);font:9px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}
.notification-attempt-history{margin-top:16px}.notification-timeline{display:grid;gap:8px}.notification-attempt-row{display:grid;grid-template-columns:auto 170px minmax(0,1fr);gap:12px;align-items:center;padding:10px;border:1px solid rgba(255,255,255,.05);border-radius:11px;background:rgba(255,255,255,.015)}.notification-attempt-row strong,.notification-attempt-row small{display:block}.notification-attempt-row strong{font-size:10px}.notification-attempt-row small,.notification-attempt-row>span:last-child{color:var(--text-muted);font-size:9px}
.notification-template-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.notification-template-card{display:flex;flex-direction:column}.notification-template-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.notification-template-card h3{margin:6px 0}.notification-template-preview{flex:1;min-height:120px;margin:9px 0 14px;padding:11px;border:1px solid rgba(255,255,255,.055);border-radius:11px;background:rgba(255,255,255,.018);color:var(--text-secondary);font-size:9px;line-height:1.6}
.notification-editor-grid,.notification-settings-grid,.notification-test-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}.notification-variable-list{display:flex;flex-wrap:wrap;gap:7px;margin:13px 0}.notification-variable-list code{padding:6px 8px;border-radius:8px;color:var(--primary);background:var(--primary-soft);font-size:9px}.button-block{width:100%;justify-content:center}.break-anywhere{overflow-wrap:anywhere}
.consent-check{display:flex;gap:9px;align-items:flex-start;min-height:44px;padding:10px;border:1px solid var(--border);border-radius:11px;background:rgba(5,17,25,.55);font-size:9px;line-height:1.5}.consent-check input[type=checkbox]{margin-top:2px;accent-color:var(--primary)}
@media(max-width:1199px){.notification-filter-form{grid-template-columns:repeat(4,minmax(0,1fr))}.notification-template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:991px){.notification-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.notification-editor-grid,.notification-settings-grid,.notification-test-grid{grid-template-columns:1fr}}
@media(max-width:767px){.notification-filter-form{grid-template-columns:1fr 1fr}.notification-filter-form .search-field{grid-column:span 2}.notification-template-grid{grid-template-columns:1fr}.notification-attempt-row{grid-template-columns:auto 1fr}.notification-attempt-row>span:last-child{grid-column:1/-1}}
@media(max-width:575px){.notification-kpis{grid-template-columns:1fr}.notification-filter-form{grid-template-columns:1fr}.notification-filter-form .search-field{grid-column:span 1}}

/* ============================================================
   Stage 10 — Management Dashboard & Reports
   ============================================================ */
.dashboard-metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.metric-card{min-height:126px;padding:15px;border:1px solid rgba(255,255,255,.07);border-radius:17px;background:rgba(15,34,47,.82);box-shadow:0 12px 30px rgba(0,0,0,.16)}
.metric-card-wide{grid-column:span 1}.metric-head{display:flex;align-items:center;gap:8px;color:var(--text-secondary);font-size:9px;font-weight:700}.metric-icon{display:grid;width:34px;height:34px;place-items:center;border-radius:11px}.metric-card>strong{display:block;margin:13px 0 4px;font-size:23px;letter-spacing:-.03em}.metric-card>small{display:block;color:var(--text-muted);font-size:8px;line-height:1.5}
.dashboard-chart-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:14px}.dashboard-chart-card-wide{grid-column:span 2}.dashboard-chart-card{min-width:0}.dashboard-card-link{color:var(--primary);font-size:9px;font-weight:700}
.fitmax-chart{min-height:260px;overflow:hidden}.fitmax-chart-svg{display:block;width:100%;height:auto;min-height:240px}.chart-grid-line{stroke:rgba(255,255,255,.065);stroke-width:1}.chart-axis-label{fill:#718493;font:8px Inter,Arial,sans-serif}.chart-line{fill:none;stroke:var(--primary);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}.chart-area{fill:rgba(140,255,77,.07)}.chart-dot{fill:var(--primary);stroke:#071520;stroke-width:2}.chart-bar{fill:var(--primary);opacity:.85}.chart-empty{display:grid;min-height:240px;place-items:center;color:var(--text-muted);font-size:10px}
.dashboard-insight-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:14px}.dashboard-ranking-card{min-width:0}.dashboard-ranking-list{display:grid;gap:9px}.ranking-row{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:8px;align-items:center}.ranking-no{display:grid;width:23px;height:23px;place-items:center;border-radius:8px;background:rgba(140,255,77,.07);color:var(--primary);font-size:8px;font-weight:800}.ranking-row strong,.ranking-row small{display:block}.ranking-row strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px}.ranking-row small{margin-top:2px;color:var(--text-muted);font-size:7px}.ranking-row>b{font-size:9px}.ranking-track{height:5px;margin-top:5px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.055)}.ranking-track span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--primary),#53E693)}
.dashboard-hour-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.dashboard-hour-grid>div{padding:10px;border:1px solid rgba(255,255,255,.055);border-radius:11px;background:rgba(255,255,255,.018)}.dashboard-hour-grid strong,.dashboard-hour-grid span{display:block}.dashboard-hour-grid strong{font-size:13px;color:var(--primary)}.dashboard-hour-grid span{margin-top:3px;color:var(--text-muted);font-size:8px}
.dashboard-alert-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px}.dashboard-alert-card{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px}.dashboard-alert-icon{display:grid;width:38px;height:38px;place-items:center;border-radius:12px;color:var(--warning);background:rgba(255,176,32,.09)}.dashboard-alert-card strong,.dashboard-alert-card small{display:block}.dashboard-alert-card strong{font-size:10px}.dashboard-alert-card small{margin-top:3px;color:var(--text-muted);font-size:8px}.dashboard-alert-card>b{color:var(--text-muted)}
.dashboard-report-cta{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:14px}.dashboard-report-cta h3{margin:4px 0}.dashboard-report-cta p:last-child{margin:0;color:var(--text-secondary);font-size:9px}.dashboard-next-stage{margin-bottom:10px}
.report-group{margin:0 0 21px}.report-group-head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin:0 2px 10px}.report-group-head h3{margin:3px 0 0}.report-group-head>span{color:var(--text-muted);font-size:8px}
.report-catalog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.report-catalog-card{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:10px;align-items:start;padding:14px;min-height:128px;transition:transform .15s ease,border-color .15s ease}.report-catalog-card:hover{transform:translateY(-2px);border-color:rgba(140,255,77,.22)}.report-catalog-icon{display:grid;width:40px;height:40px;place-items:center;border-radius:12px;color:var(--primary);background:var(--primary-soft)}.report-catalog-card strong{font-size:11px}.report-catalog-card p{margin:5px 0;color:var(--text-secondary);font-size:8px;line-height:1.5}.report-catalog-card small{color:var(--primary);font-size:7px;font-weight:700}.report-open-arrow{color:var(--text-muted);font-size:16px}
.report-actions{display:flex;flex-wrap:wrap;gap:7px;justify-content:flex-end}.report-filter-card{margin-bottom:12px}.report-filter-grid{display:grid;grid-template-columns:145px 145px minmax(150px,.7fr) minmax(220px,1fr) auto;gap:9px;align-items:end}.report-filter-search{min-width:0}.report-filter-buttons{display:flex;gap:7px;align-items:center;padding-bottom:1px}
.report-summary-grid{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}.report-summary-card{min-width:130px;padding:10px 12px;border:1px solid rgba(255,255,255,.065);border-radius:12px;background:rgba(15,34,47,.74)}.report-summary-card small,.report-summary-card strong{display:block}.report-summary-card small{color:var(--text-muted);font-size:7px;text-transform:uppercase;letter-spacing:.05em}.report-summary-card strong{margin-top:4px;font-size:15px}
.report-table-card{min-width:0}.report-table-wrap{max-height:640px;overflow:auto}.report-data-table{font-size:8px}.report-data-table th{position:sticky;top:0;z-index:2;background:#102432;white-space:nowrap}.report-data-table td{max-width:260px;overflow-wrap:anywhere}.report-data-table tbody tr:hover{background:rgba(140,255,77,.025)}
@media(max-width:1399px){.dashboard-insight-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.report-catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.report-filter-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.report-filter-buttons{grid-column:1/-1}}
@media(max-width:991px){.dashboard-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-chart-grid{grid-template-columns:1fr}.dashboard-chart-card-wide{grid-column:span 1}.dashboard-alert-grid{grid-template-columns:1fr}.dashboard-report-cta{align-items:flex-start;flex-direction:column}.report-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.report-filter-buttons{grid-column:1/-1}.report-catalog-grid{grid-template-columns:1fr 1fr}}
@media(max-width:767px){.dashboard-insight-grid,.report-catalog-grid{grid-template-columns:1fr}.report-actions{justify-content:flex-start}.report-table-wrap{max-height:none}.report-data-table thead{display:none}.report-data-table,.report-data-table tbody,.report-data-table tr,.report-data-table td{display:block;width:100%}.report-data-table tr{padding:9px 0;border-bottom:1px solid rgba(255,255,255,.065)}.report-data-table td{display:grid;grid-template-columns:120px minmax(0,1fr);gap:10px;max-width:none;padding:5px 8px;border:0}.report-data-table td:before{content:attr(data-label);color:var(--text-muted);font-size:7px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}.report-data-table tr:has(.empty-state) td{display:block}.report-data-table tr:has(.empty-state) td:before{display:none}}
@media(max-width:575px){.dashboard-metric-grid{grid-template-columns:1fr 1fr;gap:8px}.metric-card{min-height:116px;padding:12px}.metric-card>strong{font-size:18px}.dashboard-insight-grid{grid-template-columns:1fr}.report-filter-grid{grid-template-columns:1fr}.report-filter-buttons{display:grid;grid-template-columns:1fr 1fr}.report-summary-card{flex:1 1 130px}.fitmax-chart{min-height:220px}.fitmax-chart-svg{min-height:210px}}

/* ============================================================
   Stage 11 — Settings & Hardening
   ============================================================ */
.settings-tabs{display:flex;gap:7px;margin:0 0 14px;padding:6px;overflow:auto;border:1px solid var(--border);border-radius:14px;background:rgba(15,34,47,.68);scrollbar-width:thin}.settings-tabs a{flex:0 0 auto;padding:8px 11px;border-radius:10px;color:var(--text-muted);font-size:8px;font-weight:700;white-space:nowrap}.settings-tabs a.active{color:var(--bg-primary);background:var(--primary);box-shadow:0 0 18px var(--primary-glow)}
.settings-panel{margin-bottom:14px}.settings-brand-preview{display:flex;align-items:center;gap:12px;margin:0 0 16px;padding:12px;border:1px solid var(--border);border-radius:13px;background:rgba(255,255,255,.018)}.settings-logo-box{display:grid;width:94px;height:60px;place-items:center;padding:8px;border-radius:11px;background:#071520}.settings-logo-box img{max-width:100%;max-height:100%;object-fit:contain}.settings-brand-preview strong,.settings-brand-preview small{display:block}.settings-brand-preview strong{font-size:12px}.settings-brand-preview small{margin-top:4px;color:var(--text-muted);font-size:8px}.form-field-span-2{grid-column:1/-1}.settings-field-narrow{max-width:420px}.settings-inline-danger{margin-top:10px}
.color-setting{display:grid;grid-template-columns:54px minmax(0,1fr);gap:8px}.color-setting input[type=color]{width:54px;height:44px;padding:4px;border:1px solid var(--border);border-radius:11px;background:var(--bg-tertiary)}
.settings-link-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:12px}.settings-link-card{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:10px;align-items:center;padding:13px;border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.018)}.settings-link-card>span{display:grid;width:40px;height:40px;place-items:center;border-radius:11px;color:var(--primary);background:var(--primary-soft)}.settings-link-card strong,.settings-link-card small{display:block}.settings-link-card strong{font-size:10px}.settings-link-card small{margin-top:3px;color:var(--text-muted);font-size:8px;line-height:1.5}.settings-link-card>b{color:var(--text-muted)}
.hardening-list{display:grid;gap:8px}.hardening-row{display:grid;grid-template-columns:58px minmax(0,1fr);gap:10px;align-items:start;padding:10px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.015)}.hardening-state{display:inline-grid;min-height:25px;place-items:center;border-radius:8px;font-size:7px;font-weight:800;letter-spacing:.05em}.hardening-state.ok{color:var(--success);background:rgba(55,230,106,.09)}.hardening-state.warn{color:var(--warning);background:rgba(255,176,32,.09)}.hardening-row strong,.hardening-row small,.hardening-row p{display:block}.hardening-row strong{font-size:9px}.hardening-row small{margin-top:2px;color:var(--text-secondary);font-size:8px}.hardening-row p{margin:4px 0 0;color:var(--text-muted);font-size:8px}
.table-subtext{display:block;margin-top:3px;color:var(--text-muted);font-size:7px}.table-actions{display:flex;flex-wrap:wrap;gap:5px}.table-actions form{margin:0}.compact-tables .data-table th,.compact-tables .data-table td{padding-top:7px;padding-bottom:7px}
code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.9em;color:#BFEF9D}
@media(max-width:767px){.settings-link-grid{grid-template-columns:1fr}.form-field-span-2{grid-column:auto}.hardening-row{grid-template-columns:52px minmax(0,1fr)}}

.dashboard-hardening-cta{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:14px}.dashboard-hardening-cta h3{margin:4px 0}.dashboard-hardening-cta p:last-child{margin:0;color:var(--text-secondary);font-size:9px}@media(max-width:767px){.dashboard-hardening-cta{align-items:flex-start;flex-direction:column}}

/* ============================================================
   Stage 12 — QA / UAT
   ============================================================ */
.qa-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}
.qa-check-list{display:grid;gap:7px}.qa-check-row{display:grid;grid-template-columns:58px minmax(0,1fr) auto;gap:10px;align-items:start;padding:9px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.015)}.qa-check-status{display:grid;min-height:25px;place-items:center;border-radius:8px;font-size:7px;font-weight:800}.qa-check-status.pass{color:var(--success);background:rgba(55,230,106,.09)}.qa-check-status.warn{color:var(--warning);background:rgba(255,176,32,.09)}.qa-check-status.fail{color:var(--danger);background:rgba(255,77,94,.09)}.qa-check-row strong,.qa-check-row small,.qa-check-row p{display:block}.qa-check-row strong{font-size:9px}.qa-check-row small{margin-top:3px;color:var(--text-muted);font-size:8px;line-height:1.5}.qa-check-row p{margin:4px 0 0;color:var(--danger);font-size:8px}.qa-check-row>b{font-size:11px}
.qa-defect-link{margin-top:10px}.uat-progress{margin-bottom:12px}.uat-progress-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:12px}.uat-progress-grid>div{padding:9px;border:1px solid var(--border);border-radius:11px;background:rgba(255,255,255,.018)}.uat-progress-grid small,.uat-progress-grid strong{display:block}.uat-progress-grid small{color:var(--text-muted);font-size:7px}.uat-progress-grid strong{margin-top:3px;font-size:18px}
.uat-case-list{display:grid;gap:10px}.uat-case{scroll-margin-top:90px}.uat-case-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.uat-case-head h3{margin:7px 0 0;font-size:13px}.uat-case-code{display:inline-flex;padding:4px 7px;border-radius:7px;color:var(--primary);background:var(--primary-soft);font-size:8px;font-weight:800;letter-spacing:.04em}.uat-expected{margin:12px 0;padding:11px;border-left:3px solid var(--primary);border-radius:0 10px 10px 0;background:rgba(140,255,77,.035)}.uat-expected small{color:var(--primary);font-size:7px;font-weight:800}.uat-expected p{margin:4px 0 0;color:var(--text-secondary);font-size:9px;line-height:1.55}.uat-case-form{padding-top:3px}.uat-result-readonly{padding:10px;border:1px solid var(--border);border-radius:11px;background:rgba(255,255,255,.015)}.uat-result-readonly strong{font-size:8px}.uat-result-readonly p{margin:5px 0;color:var(--text-secondary);font-size:9px}.uat-result-readonly small{color:var(--text-muted);font-size:8px}.uat-signoff-card{margin-top:14px}
.qa-defect-list{display:grid;gap:10px}.qa-defect-card{padding:14px;border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.015)}.qa-defect-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.qa-defect-head h3{margin:7px 0 0;font-size:12px}.qa-severity{display:inline-flex;margin-left:5px;padding:4px 7px;border-radius:7px;font-size:7px;font-weight:800}.qa-severity.sev1{color:#fff;background:rgba(255,77,94,.75)}.qa-severity.sev2{color:var(--danger);background:rgba(255,77,94,.12)}.qa-severity.sev3{color:var(--warning);background:rgba(255,176,32,.12)}.qa-severity.sev4{color:var(--info);background:rgba(46,145,255,.12)}.qa-defect-meta{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}.qa-defect-meta span{padding:3px 6px;border-radius:999px;color:var(--text-muted);background:rgba(255,255,255,.04);font-size:7px}.qa-defect-card>p{color:var(--text-secondary);font-size:9px;line-height:1.55}.qa-resolution{margin:8px 0;padding:9px;border-radius:10px;background:rgba(55,230,106,.045)}.qa-resolution strong{font-size:8px}.qa-resolution p{margin:4px 0 0;color:var(--text-secondary);font-size:8px}.qa-defect-update{display:grid;grid-template-columns:180px minmax(0,1fr) auto;gap:8px;align-items:end;margin-top:10px}.qa-defect-resolution{min-width:0}
@media(max-width:991px){.qa-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.qa-defect-update{grid-template-columns:1fr 2fr}.qa-defect-update .button{grid-column:1/-1}}
@media(max-width:575px){.qa-summary-grid{grid-template-columns:1fr 1fr;gap:8px}.uat-progress-grid{grid-template-columns:repeat(2,1fr)}.uat-progress-grid>div:last-child{grid-column:1/-1}.qa-check-row{grid-template-columns:50px minmax(0,1fr)}.qa-check-row>b{grid-column:2}.qa-defect-update{grid-template-columns:1fr}}

/* ============================================================
   Stage 13 — Operations / Go-Live
   ============================================================ */
.ops-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}
.ops-code{overflow:auto;margin:10px 0;padding:12px;border:1px solid var(--border);border-radius:12px;background:#071520;color:#CDE7BE;font:8px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace}
.ops-release-form{margin-bottom:16px}.ops-release-table{padding-top:4px}
@media(max-width:991px){.ops-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:575px){.ops-summary-grid{grid-template-columns:1fr 1fr;gap:8px}}


/* ============================================================
   Patch 13B — QR rendering, stronger action contrast, Light Theme
   ============================================================ */
.button{border:1px solid transparent}
.button-primary{color:#071520!important;border-color:rgba(140,255,77,.72);background:var(--primary)!important;box-shadow:0 7px 22px rgba(0,0,0,.18),0 0 0 1px rgba(140,255,77,.06)}
.button-primary:hover:not(:disabled){border-color:var(--primary-hover);background:var(--primary-hover)!important;transform:translateY(-1px)}
.button-secondary{color:#F7FAFC!important;border-color:rgba(174,188,199,.34)!important;background:#173044!important;box-shadow:0 4px 14px rgba(0,0,0,.12)}
.button-secondary:hover:not(:disabled){color:#FFF!important;border-color:rgba(174,188,199,.58)!important;background:#204158!important;transform:translateY(-1px)}
.button-danger{color:#FFF!important;border-color:rgba(255,77,94,.70)!important;background:#B92F40!important}
.button-danger:hover:not(:disabled){background:#D33A4C!important}
.row-actions button:not(.button),.schedule-actions button:not(.button){min-height:32px;padding:0 9px;border:1px solid rgba(174,188,199,.34);border-radius:8px;color:var(--text-primary);background:#173044;cursor:pointer}
.icon-button:not(:disabled),.member-icon-button,.member-avatar-link{border-color:rgba(174,188,199,.22);background:rgba(31,63,84,.72)}
.theme-toggle-button{flex:0 0 44px}.theme-symbol{font-size:19px;line-height:1}

.fitmax-qr-canvas{display:grid;width:100%;height:100%;place-items:center}
.fitmax-qr-canvas svg{display:block;width:100%;height:100%;max-width:100%;max-height:100%}
.fitmax-qr-error{display:grid;min-height:120px;place-items:center;padding:12px;color:#B92F40;font-weight:700;text-align:center}
.qr-download-button{margin-top:12px}
.qr-local-note{margin-top:8px;color:var(--text-muted);font-size:8px;line-height:1.5}
.trainer-qr-identity{display:grid;grid-template-columns:minmax(0,1fr) minmax(190px,260px);gap:20px;align-items:center;margin-bottom:16px}
.trainer-qr-copy h3{margin:4px 0 7px;font-size:17px}
.trainer-qr-copy>p:last-of-type{max-width:720px;color:var(--text-secondary);font-size:10px}
.trainer-qr-meta{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:12px 0}
.trainer-qr-meta span{padding:5px 8px;border-radius:999px;color:var(--primary);background:var(--primary-soft);font-size:8px;font-weight:800}
.trainer-qr-meta code{overflow-wrap:anywhere}
.trainer-qr-frame{width:100%;max-width:260px;margin:0 auto}
.member-qr-actions{display:grid;gap:7px;justify-items:center;margin:-8px auto 15px}
.member-qr-actions small{max-width:100%;overflow-wrap:anywhere;color:var(--text-muted);font:8px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace}

html[data-theme="light"]{color-scheme:light;--bg-primary:#F3F7F3;--bg-secondary:#FFF;--bg-tertiary:#EAF1EB;--card-bg:rgba(255,255,255,.96);--card-bg-hover:#FFF;--text-primary:#14251B;--text-secondary:#42584A;--text-muted:#687D6F;--text-disabled:#9AA9A0;--border:rgba(21,53,34,.14);--border-hover:rgba(21,53,34,.27);--shadow-card:0 10px 30px rgba(37,68,48,.09),inset 0 1px 0 rgba(255,255,255,.8)}
html[data-theme="light"] body{color:var(--text-primary);background:radial-gradient(circle at top right,rgba(140,255,77,.11),transparent 34%),linear-gradient(180deg,#F8FBF8 0%,#EEF4EF 100%)}
html[data-theme="light"] .sidebar{background:rgba(255,255,255,.94);box-shadow:8px 0 30px rgba(41,69,49,.05)}
html[data-theme="light"] .sidebar-brand,html[data-theme="light"] .topbar{border-color:var(--border)}
html[data-theme="light"] .topbar{background:rgba(248,251,248,.92)}
html[data-theme="light"] .global-search,html[data-theme="light"] .search-field,html[data-theme="light"] .select-control,html[data-theme="light"] .form-field textarea,html[data-theme="light"] .form-field input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),html[data-theme="light"] .date-control,html[data-theme="light"] .consent-check{color:var(--text-primary)!important;border-color:var(--border)!important;background:#FFF!important}
html[data-theme="light"] .global-search input{color:var(--text-primary)}
html[data-theme="light"] .global-search input::placeholder,html[data-theme="light"] input::placeholder,html[data-theme="light"] textarea::placeholder{color:#829288}
html[data-theme="light"] .card,html[data-theme="light"] .sidebar-version,html[data-theme="light"] .settings-brand-preview,html[data-theme="light"] .settings-link-card,html[data-theme="light"] .hardening-row,html[data-theme="light"] .profile-info-grid>div,html[data-theme="light"] .identifier-row,html[data-theme="light"] .qa-check-row,html[data-theme="light"] .qa-defect-card,html[data-theme="light"] .uat-result-readonly,html[data-theme="light"] .uat-progress-grid>div,html[data-theme="light"] .dashboard-hour-grid>div,html[data-theme="light"] .class-type-metrics>div,html[data-theme="light"] .trainer-class-row{background:rgba(255,255,255,.88);border-color:var(--border)}
html[data-theme="light"] .settings-tabs{background:rgba(232,240,234,.88)}
html[data-theme="light"] .icon-button:not(:disabled),html[data-theme="light"] .member-icon-button,html[data-theme="light"] .member-avatar-link{color:#355043;border-color:rgba(31,72,45,.18);background:#EDF3EE}
html[data-theme="light"] .icon-button:hover:not(:disabled),html[data-theme="light"] .member-icon-button:hover{color:#152A1D;border-color:rgba(31,72,45,.32);background:#E2ECE4}
html[data-theme="light"] .button-secondary,html[data-theme="light"] .row-actions button:not(.button),html[data-theme="light"] .schedule-actions button:not(.button){color:#173127!important;border-color:#B5C8B9!important;background:#E2ECE4!important}
html[data-theme="light"] .button-secondary:hover:not(:disabled),html[data-theme="light"] .row-actions button:not(.button):hover,html[data-theme="light"] .schedule-actions button:not(.button):hover{color:#0E2317!important;border-color:#90AA97!important;background:#D5E4D8!important}
html[data-theme="light"] .button-danger{color:#FFF!important}
html[data-theme="light"] .nav-item:hover{background:rgba(37,83,50,.07)}
html[data-theme="light"] .stage-chip,html[data-theme="light"] .kbd{background:rgba(32,70,44,.07)}
html[data-theme="light"] .data-table tbody tr:hover{background:rgba(37,83,50,.035)}
html[data-theme="light"] .login-page{background:radial-gradient(circle at 18% 10%,rgba(140,255,77,.14),transparent 34rem),linear-gradient(145deg,#F7FAF7,#EAF2EB)}
html[data-theme="light"] .login-panel{background:rgba(246,250,247,.82)}
html[data-theme="light"] .login-card{border-color:var(--border);background:rgba(255,255,255,.94);box-shadow:0 24px 70px rgba(42,74,50,.11)}
html[data-theme="light"] .login-visual-content>p,html[data-theme="light"] .login-subtitle{color:var(--text-secondary)}
html[data-theme="light"] .ops-code{border-color:#CAD8CD;color:#244630;background:#EDF4EF}
html[data-theme="light"] code{color:#315E3D}
html[data-theme="light"] .settings-logo-box{background:#10241A}
html[data-theme="light"] .qr-frame,html[data-theme="light"] .member-qr-box{background:#FFF;box-shadow:0 8px 26px rgba(35,67,44,.10)}
@media(max-width:767px){.trainer-qr-identity{grid-template-columns:1fr}.trainer-qr-frame{max-width:230px}}


/* ============================================================
   Patch 13F — Sidebar Submenus, Green Actions & Flash Dismiss
   ============================================================ */
.nav-group{margin:3px 0}
.nav-group-toggle{width:100%;border:0;text-align:left;font:inherit;cursor:pointer}
.nav-group-toggle{background:transparent}
.nav-caret{display:grid;place-items:center;transition:transform .18s ease}
.nav-group.is-open .nav-caret{transform:rotate(90deg)}
.nav-submenu{display:none;margin:3px 0 7px 19px;padding:3px 0 3px 12px;border-left:1px solid rgba(140,255,77,.18)}
.nav-group.is-open .nav-submenu{display:grid;gap:2px}
.nav-subitem{display:flex;min-height:36px;align-items:center;gap:9px;padding:7px 9px;border-radius:9px;color:var(--text-muted);font-size:10px;font-weight:600;transition:150ms ease}
.nav-subitem:hover{color:var(--text-primary);background:rgba(140,255,77,.07)}
.nav-subitem.active{color:#071520;background:linear-gradient(135deg,#96FF59,#53E693);box-shadow:0 0 18px rgba(140,255,77,.10)}
.nav-subicon{display:grid;width:18px;flex:0 0 18px;place-items:center}
.nav-sublabel{min-width:0;white-space:nowrap}
.sidebar-collapsed .nav-caret,.sidebar-collapsed .nav-submenu{display:none!important}
.sidebar-collapsed .nav-group-toggle{justify-content:center;padding-inline:10px}

.alert[data-auto-dismiss]{transition:opacity .2s ease,transform .2s ease,max-height .2s ease,margin .2s ease,padding .2s ease}
.alert.alert-dismissing{max-height:0!important;margin-top:0!important;margin-bottom:0!important;padding-top:0!important;padding-bottom:0!important;opacity:0;transform:translateY(-6px);overflow:hidden}

/* Action buttons must be visually obvious: no dark button surfaces. */
.button-primary{
    color:#071520!important;
    border-color:#8CFF4D!important;
    background:#8CFF4D!important;
    box-shadow:0 8px 22px rgba(82,207,96,.18)!important
}
.button-primary:hover:not(:disabled){
    color:#071520!important;
    border-color:#A5FF72!important;
    background:#A5FF72!important
}
.button-secondary{
    color:#F7FFF8!important;
    border-color:#3E9D5D!important;
    background:#2F7D4A!important;
    box-shadow:0 5px 16px rgba(29,105,57,.16)!important
}
.button-secondary:hover:not(:disabled){
    color:#FFFFFF!important;
    border-color:#55B873!important;
    background:#3E9D5D!important
}
.row-actions button:not(.button),.schedule-actions button:not(.button){
    color:#F7FFF8!important;
    border-color:#3E9D5D!important;
    background:#2F7D4A!important
}
.row-actions button:not(.button):hover,.schedule-actions button:not(.button):hover{
    border-color:#55B873!important;
    background:#3E9D5D!important
}
.icon-button:not(:disabled),.member-icon-button,.member-avatar-link{
    border-color:rgba(85,184,115,.34);
    background:rgba(47,125,74,.30)
}
.icon-button:hover:not(:disabled),.member-icon-button:hover{
    border-color:rgba(85,184,115,.58);
    background:rgba(62,157,93,.42)
}
html[data-theme="light"] .button-primary{
    color:#0D2716!important;
    border-color:#77E942!important;
    background:#8CFF4D!important
}
html[data-theme="light"] .button-secondary,
html[data-theme="light"] .row-actions button:not(.button),
html[data-theme="light"] .schedule-actions button:not(.button){
    color:#FFFFFF!important;
    border-color:#2F7D4A!important;
    background:#2F7D4A!important
}
html[data-theme="light"] .button-secondary:hover:not(:disabled),
html[data-theme="light"] .row-actions button:not(.button):hover,
html[data-theme="light"] .schedule-actions button:not(.button):hover{
    color:#FFFFFF!important;
    border-color:#3E9D5D!important;
    background:#3E9D5D!important
}
html[data-theme="light"] .icon-button:not(:disabled),
html[data-theme="light"] .member-icon-button,
html[data-theme="light"] .member-avatar-link{
    color:#214D31;
    border-color:rgba(47,125,74,.22);
    background:#E1F3E6
}
html[data-theme="light"] .nav-group-toggle{background:transparent}
html[data-theme="light"] .nav-submenu{border-left-color:rgba(47,125,74,.22)}
html[data-theme="light"] .nav-subitem:hover{color:#173127;background:#E7F5EA}

@media(max-width:767px){
    .nav-submenu{margin-left:18px}
}


/* Additional control buttons: keep them green rather than dark/transparent. */
.password-toggle{
    color:#BFFFA0!important;
    border-left:1px solid rgba(85,184,115,.28)!important;
    background:rgba(47,125,74,.24)!important
}
.password-toggle:hover{
    color:#FFFFFF!important;
    background:rgba(62,157,93,.46)!important
}
.membership-choice-button{
    border-color:rgba(85,184,115,.38)!important;
    background:rgba(47,125,74,.18)!important
}
.membership-choice-button:hover{
    border-color:#55B873!important;
    background:rgba(62,157,93,.30)!important
}
html[data-theme="light"] .password-toggle{
    color:#245D36!important;
    border-left-color:rgba(47,125,74,.22)!important;
    background:#E1F3E6!important
}
html[data-theme="light"] .membership-choice-button{
    color:#173127!important;
    border-color:#B0D2B9!important;
    background:#EDF8F0!important
}


/* ============================================================
   Patch 13G — Sidebar Accordion Behavior
   ============================================================ */
.nav-group.is-open > .nav-group-toggle,
.nav-group.is-open > .nav-group-toggle:hover,
.nav-group > .nav-group-toggle:focus-visible {
    background: transparent !important;
}
.nav-group.is-open > .nav-group-toggle {
    color: var(--text-primary);
}
html[data-theme="light"] .nav-group.is-open > .nav-group-toggle,
html[data-theme="light"] .nav-group.is-open > .nav-group-toggle:hover,
html[data-theme="light"] .nav-group > .nav-group-toggle:focus-visible {
    background: transparent !important;
}
html[data-theme="light"] .nav-group.is-open > .nav-group-toggle {
    color: var(--text-primary);
}

/* Only the currently active submenu gets a highlighted background. */
.nav-subitem.active {
    color: #071520;
    background: linear-gradient(135deg,#96FF59,#53E693);
}