/* ── Google Font ────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/* ── Variables ─────────────────────────────────────────── */
:root {
    --primary:        #5b5df4;
    --primary-hover:  #4748d8;
    --primary-light:  #eef2ff;
    --secondary:      #7476f5;
    --cta:            #10b981;
    --cta-hover:      #059669;
    --bg:             #f7f5fb;
    --surface:        #ffffff;
    --surface-muted:  #fbfbfe;
    --surface-soft:   #f6f7fb;
    --surface-subtle: #fafafe;
    --border:         #e4e6ef;
    --border-focus:   #5b5df4;
    --text:           #201d4d;
    --text-body:      #3f4654;
    --text-muted:     #6b7280;
    --header-bg:      #201d4d;
    --header-text:    #ffffff;
    --success:        #059669;
    --success-bg:     #ecfdf5;
    --success-border: #a7f3d0;
    --danger:         #dc2626;
    --danger-bg:      #fef2f2;
    --danger-border:  #fecaca;
    --radius-sm:      6px;
    --radius:         10px;
    --radius-lg:      14px;
    --control-h-sm:   34px;
    --control-h:      40px;
    --control-h-lg:   46px;
    --space-1:        4px;
    --space-2:        8px;
    --space-3:        12px;
    --space-4:        16px;
    --space-5:        20px;
    --space-6:        24px;
    --space-7:        32px;
    --shadow-sm:      0 1px 2px rgba(31, 36, 66, 0.05);
    --shadow:         0 1px 4px rgba(31, 36, 66, 0.08), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md:      0 10px 30px rgba(31, 36, 66, 0.11), 0 2px 6px rgba(0,0,0,0.05);
    --shadow-focus:   0 0 0 4px rgba(91,93,244,0.13);
    --focus-ring:     0 0 0 3px rgba(91,93,244,0.16);
    --transition:     180ms cubic-bezier(.22,1,.36,1);
    --space-8:        48px;
    --space-9:        64px;
    --content-reading: 72ch;
    --shadow-card:    0 1px 2px rgba(31, 36, 66, 0.04), 0 8px 24px rgba(31, 36, 66, 0.05);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --bg:             #111827;
    --surface:        #1f2937;
    --surface-muted:  #273449;
    --surface-soft:   #182334;
    --surface-subtle: #202c3d;
    --border:         #3c4a60;
    --text:           #f3f4f6;
    --text-body:      #d1d5db;
    --text-muted:     #a7b0bf;
    --header-bg:      #0b1220;
    --header-text:    #f8fafc;
    --primary-light:  #29347b;
    --success-bg:     #123b31;
    --success-border: #1f876b;
    --danger-bg:      #451f27;
    --danger-border:  #9f3d4d;
    --shadow:         0 1px 4px rgba(0,0,0,0.28), 0 8px 24px rgba(0,0,0,0.16);
    --shadow-md:      0 14px 34px rgba(0,0,0,0.32), 0 2px 8px rgba(0,0,0,0.14);
}

@media (prefers-color-scheme: dark) {
    html[data-theme-mode="auto"] {
        color-scheme: dark;
        --bg: #111827;
        --surface: #1f2937;
        --surface-muted: #273449;
        --surface-soft: #182334;
        --surface-subtle: #202c3d;
        --border: #3c4a60;
        --text: #f3f4f6;
        --text-body: #d1d5db;
        --text-muted: #a7b0bf;
        --header-bg: #0b1220;
        --header-text: #f8fafc;
        --primary-light: #29347b;
        --success-bg: #123b31;
        --success-border: #1f876b;
        --danger-bg: #451f27;
        --danger-border: #9f3d4d;
        --shadow: 0 1px 4px rgba(0,0,0,0.28), 0 8px 24px rgba(0,0,0,0.16);
        --shadow-md: 0 14px 34px rgba(0,0,0,0.32), 0 2px 8px rgba(0,0,0,0.14);
    }
}

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-body);
    background: var(--bg);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: color var(--transition);
}
a:hover { color: var(--primary-hover); text-decoration: underline; }
a:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ── Layout ────────────────────────────────────────────── */
.page-wrap {
    max-width: 1080px;
    margin: 0 auto;
    padding: var(--space-8) var(--space-6) 72px;
    animation: page-in 220ms cubic-bezier(.22,1,.36,1) both;
}

/* ── Header / Nav ──────────────────────────────────────── */
.site-header {
    background: var(--header-bg);
    color: var(--header-text);
    min-height: 58px;
    padding: 0 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 0 rgba(255,255,255,0.06), 0 4px 14px rgba(0,0,0,0.14);
}

.admin-preview-bar {
    min-height: 38px;
    padding: 7px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    color: #422006;
    background: #fef3c7;
    border-bottom: 1px solid #fcd34d;
    font-size: 12px;
    font-weight: 500;
}
.admin-preview-bar form { margin: 0; }
.admin-preview-exit {
    border: 1px solid #d97706;
    border-radius: 6px;
    padding: 5px 10px;
    color: #92400e;
    background: rgba(255,255,255,0.55);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.admin-preview-exit:hover { background: #fff; }

.site-header .brand {
    font-size: 15px;
    font-weight: 700;
    color: var(--header-text);
    letter-spacing: -0.02em;
}

.site-logo {
    height: 28px;
    max-width: 140px;
    object-fit: contain;
}

.brand-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.brand-edit {
    width: 26px;
    height: 26px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: var(--radius-sm);
    color: rgba(255,255,255,0.55);
}

.brand-edit:hover,
.brand-edit-active {
    color: #fff;
    background: rgba(255,255,255,0.12);
    text-decoration: none;
}

.site-header nav {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Keep appearance controls at the far right, immediately before logout. */
.site-header nav .theme-picker { order: 98; }
.site-header nav a:last-child { order: 99; }

.site-header nav a {
    color: rgba(255,255,255,0.65);
    font-size: 13.5px;
    font-weight: 500;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    padding: 6px 11px;
    border-radius: var(--radius-sm);
    transition: background var(--transition), color var(--transition);
}
.site-header nav a:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
    text-decoration: none;
}
.site-header nav span {
    color: rgba(255,255,255,0.4);
    font-size: 13px;
    padding: 6px 8px;
}
.admin-language-picker { margin: 0; }
.admin-language-picker select {
    width: auto;
    min-height: 30px;
    padding: 4px 24px 4px 8px;
    border-color: rgba(255,255,255,0.22);
    border-radius: var(--radius-sm);
    color: #fff;
    background: rgba(255,255,255,0.08);
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}
.admin-language-picker select:focus { border-color: rgba(255,255,255,0.75); box-shadow: 0 0 0 3px rgba(255,255,255,0.12); }
.theme-picker { display: inline-flex; gap: 2px; margin: 0 2px; padding: 2px; border: 1px solid rgba(255,255,255,0.18); border-radius: 8px; background: rgba(255,255,255,0.06); }
.theme-picker button {
    width: 28px;
    height: 28px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 6px;
    color: rgba(255,255,255,0.62);
    background: transparent;
    cursor: pointer;
    transition: color var(--transition), background var(--transition), transform var(--transition);
}
.theme-picker button:hover { color: #fff; background: rgba(255,255,255,0.12); transform: translateY(-1px); }
.theme-picker button[aria-pressed="true"] { color: #fff; background: rgba(255,255,255,0.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); }
.theme-picker svg { width: 15px; height: 15px; }
.theme-picker button:focus-visible { outline: 2px solid rgba(255,255,255,0.9); outline-offset: 1px; }
.totp-qr { width: 264px; padding: 12px; margin: 16px 0; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.totp-qr img { display: block; width: 240px; height: 240px; }
.totp-secret { display: inline-block; letter-spacing: .12em; padding: 8px 10px; background: var(--surface-muted); border-radius: var(--radius-sm); }
.header-tour-link { border: 0; padding: 0; color: inherit; background: transparent; font: inherit; cursor: pointer; }
.header-tour-link:hover { color: inherit; text-decoration: underline; }
.onboarding-modal[hidden] { display: none; }
.onboarding-modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; }
.onboarding-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .58); backdrop-filter: blur(4px); }
.onboarding-card { position: relative; width: min(480px, 100%); padding: 32px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 24px 70px rgba(15, 23, 42, .24); animation: modal-enter .22s ease-out both; }
.onboarding-card h2 { margin: 10px 0 8px; color: var(--text); font-size: 24px; }
.onboarding-card p:not(.modal-kicker) { color: var(--text-muted); line-height: 1.65; }
.onboarding-step-count { color: var(--text-muted); font-size: 12px; font-weight: 700; }
.onboarding-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-top: 20px; border-radius: 50%; color: #fff; background: var(--primary); font-weight: 800; }
.onboarding-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; }
@keyframes modal-enter { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

.site-header .version-pill {
    padding: 4px 9px;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    opacity: 0.86;
}

.site-header .version-pill:hover,
.site-header .version-pill-active {
    opacity: 1;
    background: rgba(255,255,255,0.14);
}

/* ── Login page ────────────────────────────────────────── */
.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--bg);
}

.login-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 44px 40px;
    width: 100%;
    max-width: 420px;
    border: 1px solid var(--border);
}

.login-brand-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border-radius: 9px;
    background: var(--primary);
    color: #fff;
    box-shadow: 0 8px 20px rgba(91, 93, 244, 0.20);
}

.login-brand-icon-admin {
    background: var(--text);
    box-shadow: 0 8px 20px rgba(31, 29, 77, 0.18);
}

.login-footer-link {
    margin-top: 20px;
    text-align: center;
    font-size: 13px;
}

.login-footer-link a {
    color: var(--text-muted);
}

.login-forgot-link {
    display: block;
    width: 100%;
    margin-top: 16px;
    border: 0;
    padding: 0;
    color: var(--primary);
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
}
.login-forgot-link:hover { color: var(--primary-hover); text-decoration: underline; }
.login-modal[hidden] { display: none; }
.login-modal {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: grid;
    place-items: center;
    padding: 24px;
}
.login-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(24, 24, 48, 0.38);
    backdrop-filter: blur(4px);
}
.login-modal-card {
    position: relative;
    width: min(100%, 420px);
    padding: 32px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-md);
    animation: modal-in 180ms ease-out both;
}
.login-modal-card h2 { margin: 0 0 8px; color: var(--text); font-size: 21px; }
.login-modal-card > p:not(.modal-kicker) { margin-bottom: 22px; color: var(--text-muted); font-size: 14px; line-height: 1.55; }
.modal-kicker { margin: 0 0 7px; color: var(--primary); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.login-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    color: var(--text-muted);
    background: var(--surface-soft);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.login-modal-close:hover { color: var(--text); background: var(--border); }

.login-card h1 {
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
    letter-spacing: -0.03em;
}

.login-card .subtitle {
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 28px;
}

/* ── Forms ─────────────────────────────────────────────── */
.form-group { margin-bottom: 18px; }

.portal-picker-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.portal-picker-label label { margin-bottom: 6px; }
.portal-picker-label span {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
#client_id {
    min-height: 48px;
    border-width: 1.5px;
    color: var(--text);
    font-weight: 600;
    background-color: var(--surface-subtle);
    cursor: pointer;
}
#client_id:hover { background-color: var(--surface); }

label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
    letter-spacing: 0.01em;
}

input[type="text"],
input:not([type]),
input[type="password"],
input[type="number"],
input[type="email"],
select,
textarea {
    width: 100%;
    min-height: var(--control-h);
    padding: 9px 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: inherit;
    color: var(--text-body);
    background: var(--surface);
    box-shadow: inset 0 1px 0 rgba(31,36,66,0.02);
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
    appearance: none;
}

input[type="text"]:hover,
input:not([type]):hover,
input[type="password"]:hover,
input[type="number"]:hover,
input[type="email"]:hover,
select:hover,
textarea:hover {
    border-color: #d4d8e5;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: var(--shadow-focus);
}

::placeholder {
    color: #8c93a3;
    opacity: 1;
}

input[type="file"] {
    font-size: 14px;
    color: var(--text-muted);
    padding: 8px 0;
    border: none;
    background: none;
    box-shadow: none;
    cursor: pointer;
}

input[type="checkbox"] {
    width: 17px;
    height: 17px;
    cursor: pointer;
    accent-color: var(--primary);
    flex: 0 0 auto;
}

/* ── Buttons ───────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--control-h);
    padding: 9px 18px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    border: 1.5px solid transparent;
    line-height: 1;
    transition: background var(--transition), color var(--transition),
                border-color var(--transition), box-shadow var(--transition),
                opacity var(--transition), transform var(--transition);
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
}

.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.btn:active { opacity: 0.9; transform: translateY(0); }
.btn[disabled],
.btn.is-loading {
    opacity: 0.72;
    cursor: wait;
    pointer-events: none;
}

.btn-spinner {
    width: 13px;
    height: 13px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 999px;
    animation: spin 650ms linear infinite;
}

.btn-primary {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.btn-primary:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    color: #fff;
    box-shadow: 0 10px 20px rgba(91,93,244,0.22);
}

.btn-cta {
    background: var(--cta);
    color: #fff;
    border-color: var(--cta);
}
.btn-cta:hover {
    background: var(--cta-hover);
    border-color: var(--cta-hover);
    color: #fff;
}

.btn-danger {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
}
.btn-danger:hover {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #fff;
}

.btn-ghost {
    background: var(--surface);
    color: var(--text-body);
    border-color: var(--border);
}
.btn-ghost:hover {
    background: var(--surface-subtle);
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
}

.btn-danger-soft {
    color: var(--danger);
    border-color: var(--danger-border);
    background: var(--danger-bg);
}

.btn-danger-soft:hover {
    color: var(--danger);
    border-color: var(--danger);
    background: #fff1f2;
}

.btn-sm  { min-height: var(--control-h-sm); padding: 6px 13px; font-size: 13px; }
.btn-full { width: 100%; justify-content: center; }

/* ── Alerts ────────────────────────────────────────────── */
.alert {
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    margin-bottom: 20px;
    border: 1.5px solid transparent;
    font-weight: 500;
    animation: alert-in 180ms ease-out both;
}

.alert-error   { background: var(--danger-bg);  color: var(--danger);  border-color: var(--danger-border); }
.alert-success { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }

/* ── Cards ─────────────────────────────────────────────── */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.card-header {
    padding: 18px 22px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--surface-muted);
}

.card-header h2 {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.card-body { padding: 24px 22px; }

.panel-subtitle {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}

/* ── Tables ────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

thead th {
    text-align: left;
    padding: 10px 18px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    border-bottom: 1.5px solid var(--border);
    background: var(--surface-muted);
    white-space: nowrap;
}

tbody td {
    padding: 13px 18px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    color: var(--text-body);
}

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-muted); cursor: default; }

/* ── Badges ────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.badge-success { background: var(--success-bg); color: var(--success); }
.badge-danger  { background: var(--danger-bg);  color: var(--danger);  }
.badge-muted   { background: #f3f4f6;            color: var(--text-muted); }

/* ── Stats row ─────────────────────────────────────────── */
.stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}

.stat-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 22px;
    box-shadow: var(--shadow);
}

.stat-card .stat-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
    letter-spacing: -0.03em;
}

.stat-card .stat-label {
    font-size: 12.5px;
    color: var(--text-muted);
    font-weight: 500;
    margin-top: 5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.metric-link {
    display: inline-flex;
    min-width: 32px;
    min-height: 30px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    color: var(--primary);
    font-weight: 700;
    text-decoration: none;
    transition: background var(--transition), color var(--transition), transform var(--transition);
}
.metric-link:hover {
    background: color-mix(in srgb, var(--primary) 10%, white);
    color: var(--primary-hover);
    transform: translateY(-1px);
}

/* ── Page header ───────────────────────────────────────── */
.page-header {
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.page-header h1 {
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.03em;
}

/* ── Client dashboard hero ─────────────────────────────── */
.client-hero {
    margin-bottom: 18px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: end;
    padding: 22px 24px;
    background: rgba(255, 255, 255, 0.74);
    border: 1.5px solid rgba(255, 255, 255, 0.78);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(14px) saturate(1.25);
    -webkit-backdrop-filter: blur(14px) saturate(1.25);
}

.client-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 22px;
    padding: 4px;
    width: fit-content;
    max-width: 100%;
    background: rgba(255,255,255,0.76);
    border: 1.5px solid rgba(255,255,255,0.82);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(12px) saturate(1.2);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
}

.client-tab {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 13px;
    border-radius: var(--radius-sm);
    color: #5c6474;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.client-tab:hover {
    color: var(--text);
    text-decoration: none;
    background: rgba(255,255,255,0.7);
}

.client-tab-active {
    color: #fff;
    background: var(--primary);
    box-shadow: 0 6px 14px rgba(91,93,244,0.18);
}

.client-tab-active:hover {
    color: #fff;
    background: var(--primary);
}

.client-tab strong {
    min-width: 22px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(0,0,0,0.08);
    font-size: 11px;
}

.client-tab-active strong {
    background: rgba(255,255,255,0.2);
}

.client-hero h1 {
    font-size: 28px;
    line-height: 1.15;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.03em;
}

.client-hero p {
    color: var(--text-muted);
    font-size: 14px;
    max-width: var(--content-reading);
    margin-top: 8px;
    line-height: 1.5;
}

.client-summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.82);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
}

.client-workspace {
    display: grid;
    gap: 18px;
}

.client-workspace-mine {
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    align-items: start;
}

.client-send-panel {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.send-panel-head {
    display: grid;
    gap: 10px;
    padding: 18px 20px 16px;
    border-bottom: 1.5px solid var(--border);
}

.send-panel-head h2 {
    color: var(--text);
    font-size: 15px;
    line-height: 1.25;
    margin: 0;
}

.send-panel-head p {
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.45;
    margin-top: 4px;
}

.send-panel-head > span {
    width: fit-content;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--surface-soft);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
}

.client-upload-form {
    display: grid;
    gap: 14px;
    padding: 18px 20px 20px;
}

.client-upload-form .upload-message {
    grid-column: auto;
}

.client-upload-form .upload-submit {
    width: 100%;
    justify-content: center;
}

.file-input-note {
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.35;
}

.file-picker {
    min-height: 82px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1.5px dashed var(--border);
    border-radius: var(--radius);
    background: var(--surface-muted);
    color: var(--text-muted);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition), color var(--transition), box-shadow var(--transition);
}

.file-picker:hover,
.file-picker:focus-within {
    border-color: var(--primary);
    background: var(--primary-light);
    color: var(--text);
    box-shadow: var(--focus-ring);
}

.file-picker.is-dragging,
.file-picker.has-file {
    border-color: var(--primary);
    background: var(--primary-light);
    color: var(--text);
}

.file-picker.has-file .file-picker-icon {
    background: var(--primary);
    color: #fff;
}

.file-picker input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.file-picker-icon {
    width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--primary);
    box-shadow: var(--shadow-sm);
}

.file-picker span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 700;
}

.client-files-panel {
    min-width: 0;
}

.folder-groups {
    display: grid;
    gap: 18px;
}

.folder-group {
    padding: 16px;
    border: 1.5px solid color-mix(in srgb, var(--primary) 14%, var(--border));
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--surface) 86%, var(--primary-light));
    box-shadow: var(--shadow-sm);
}

.folder-group-heading,
.folder-manager-heading,
.folder-chip,
.folder-group-title {
    display: flex;
    align-items: center;
}

.folder-group-heading {
    justify-content: space-between;
    gap: 12px;
    padding: 2px 4px 14px;
}

.folder-group-title {
    min-width: 0;
    gap: 9px;
}

.folder-group-title h2 {
    overflow: hidden;
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.folder-icon,
.folder-chip-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    color: var(--primary);
    background: var(--primary-light);
    font-size: 18px;
    font-weight: 700;
}

.folder-count,
.folder-chip small {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
}

.folder-group .file-item:last-child { margin-bottom: 0; }

.folder-empty {
    padding: 12px 4px 2px;
    color: var(--text-muted);
    font-size: 13px;
}

.folder-manager {
    padding: 16px 22px;
    border-bottom: 1.5px solid var(--border);
    background: var(--surface-subtle);
}

.folder-manager-heading {
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.folder-manager-heading strong,
.folder-manager-heading .text-muted {
    display: block;
}

.folder-manager-heading strong { color: var(--text); font-size: 13px; }
.folder-manager-heading .text-muted { margin-top: 2px; font-size: 12px; }

.folder-create-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.folder-create-form input { width: min(220px, 48vw); }

.folder-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.folder-chip {
    min-width: 150px;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.folder-chip > span:nth-child(2) { min-width: 0; }
.folder-chip strong,
.folder-chip small { display: block; }
.folder-chip strong { overflow: hidden; color: var(--text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.folder-chip small { margin-top: 1px; font-size: 10px; }
.folder-chip-general .folder-chip-icon { color: var(--text-muted); background: var(--surface-soft); }
.folder-delete-form { margin-left: auto; }
.folder-delete-button { border: 0; color: var(--text-muted); background: transparent; font-size: 18px; line-height: 1; cursor: pointer; }
.folder-delete-button:hover { color: var(--danger); }
.file-folder-form select { min-width: 128px; min-height: 32px; padding-block: 5px; font-size: 12px; }

/* ── Client file list ──────────────────────────────────── */
.file-list { list-style: none; }

.file-thumb {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    flex-shrink: 0;
    overflow: hidden;
}

.file-thumb-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: inherit;
}

.file-thumb-image { background: #f1f5f9; }

.file-thumb-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
}

.file-thumb-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1;
}

.file-thumb-pdf { background: #fef2f2; color: #dc2626; }
.file-thumb-archive { background: #fff7ed; color: #ea580c; }
.file-thumb-word { background: #eff6ff; color: #2563eb; }
.file-thumb-excel { background: #f0fdf4; color: #16a34a; }
.file-thumb-text { background: #f8fafc; color: #64748b; }
.file-thumb-media { background: #faf5ff; color: #7c3aed; }
.file-thumb-other { background: #eef2ff; color: #6366f1; }

.file-item {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 20px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: var(--shadow-card);
    opacity: 0.94;
    transition: border-color var(--transition), box-shadow var(--transition), opacity var(--transition), transform var(--transition);
}

.file-item:hover {
    border-color: var(--primary);
    box-shadow: 0 10px 24px rgba(31,36,66,0.10);
    opacity: 1;
    transform: translateY(-1px);
}

.file-info { flex: 1; min-width: 0; }

.file-name {
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14.5px;
}

.file-meta {
    font-size: 12.5px;
    color: var(--text-muted);
    margin-top: 3px;
}

.file-actions {
    flex-shrink: 0;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}

.file-empty {
    text-align: center;
    padding: 76px 24px;
    color: var(--text-muted);
}

.file-empty svg {
    color: var(--primary);
    opacity: 0.78;
}

.file-empty h2 {
    margin-top: 16px;
    color: var(--text);
    font-size: 17px;
    line-height: 1.3;
}

.file-empty p {
    margin: 8px auto 0;
    font-size: 14px;
    max-width: 360px;
}

/* ── Changelog ─────────────────────────────────────────── */
.version-current {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    box-shadow: var(--shadow-sm);
}

.changelog-list {
    display: grid;
    gap: 14px;
}

.changelog-release .card-header {
    align-items: flex-start;
}

.changelog-release .card-header h2 {
    margin-top: 4px;
}

.changelog-meta {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.changelog-items {
    display: grid;
    gap: 10px;
    margin-left: 18px;
    color: var(--text);
    font-size: 14px;
    line-height: 1.55;
}

/* ── Client share modal ────────────────────────────────── */
.share-modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    padding: 20px;
}

.share-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.52);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: fade-in 150ms ease-out both;
}

.share-modal-card {
    position: relative;
    z-index: 1;
    width: min(520px, 100%);
    padding: 24px;
    background: var(--surface);
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    border-radius: var(--radius);
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28);
    animation: modal-in 180ms ease-out both;
}

.share-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-muted);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.share-modal-close:hover {
    color: var(--text);
    border-color: var(--primary);
}

.share-modal-kicker {
    margin: 0 42px 6px 0;
    color: var(--primary);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.share-modal-card h2 {
    margin: 0;
    color: var(--text);
    font-size: 22px;
    line-height: 1.2;
}

.share-modal-filename {
    margin: 8px 0 18px;
    color: var(--text-muted);
    font-size: 14px;
    word-break: break-word;
}

.share-modal-copy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.share-modal-copy input {
    width: 100%;
    min-width: 0;
    padding: 11px 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    background: var(--surface-soft);
    font: 12.5px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    outline: none;
}

.share-modal-copy input:focus {
    border-color: var(--border-focus);
    box-shadow: var(--focus-ring);
}

.share-modal-hint {
    margin: 12px 0 0;
    color: var(--text-muted);
    font-size: 12.5px;
}

/* ── Admin refinements ─────────────────────────────────── */
.danger-zone {
    border-color: var(--danger-border);
    background: var(--surface);
}

.danger-zone .card-header {
    background: var(--danger-bg);
    border-bottom-color: var(--danger-border);
}

.danger-zone .card-header h2 {
    color: var(--danger);
}

.danger-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.share-panel {
    padding: 18px 20px;
    background: var(--surface-muted);
    border-top: 1.5px solid var(--border);
}

.share-grid {
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
}

.share-link-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 12px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
}

.share-link-url {
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.share-link-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 7px;
}

.btn-link-danger {
    background: transparent;
    color: var(--danger);
    border: none;
    padding: 0;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.btn-link-danger:hover { text-decoration: underline; }

.branding-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.85fr) minmax(360px, 1.15fr);
    gap: 32px;
}

.permissions-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.42fr);
    gap: 18px;
    align-items: start;
}

.permission-card .card-body {
    padding-top: 8px;
}

.permission-toggle,
.permission-retention,
.permission-field {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
}

.permission-toggle {
    cursor: pointer;
}

.permission-toggle input {
    margin-top: 4px;
    flex-shrink: 0;
}

.permission-title {
    display: block;
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
}

.permission-copy {
    display: block;
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 12.5px;
    line-height: 1.45;
}

.permission-retention {
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.permission-field {
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
}

.permission-field input {
    max-width: 420px;
}

.retention-control {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
}

.retention-control input {
    width: 82px;
}

.permission-summary .card-body {
    display: grid;
    gap: 12px;
}

.permission-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--text-body);
    font-size: 13px;
}

.permission-note {
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 12.5px;
    line-height: 1.45;
}

.portal-preview {
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.portal-preview-body {
    min-height: 320px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.preview-file-row {
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(4px);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.preview-file-row-muted {
    opacity: 0.55;
}

.preview-file-main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.preview-file-icon {
    width: 36px;
    height: 36px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.preview-file-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}

.preview-file-meta {
    font-size: 11px;
    color: var(--text-muted);
}

/* ── Upload area highlight ─────────────────────────────── */
.upload-area {
    border: 1.5px dashed var(--border);
    border-radius: var(--radius);
    padding: 20px;
    background: var(--surface-muted);
    transition: border-color var(--transition), background var(--transition);
}
.upload-area:hover { border-color: var(--primary); background: var(--primary-light); }

/* ── Actions / Utilities ───────────────────────────────── */
.actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inline-form { display: inline; }
.text-muted  { color: var(--text-muted); font-size: 13px; }
.text-right  { text-align: right; }
.mt-4 { margin-top: 16px; }

/* ── Reduced motion ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0ms !important;
        transition-duration: 0ms !important;
    }
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modal-in {
    from { opacity: 0; transform: translateY(8px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes alert-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes page-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

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

/* ── User access management ────────────────────────────── */
.admin-user-create { margin-bottom: 24px; }
.admin-user-create .card-header p,
.card-header p {
    margin: 4px 0 0;
}
.user-create-form {
    display: grid;
    gap: 20px;
}
.form-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}
.user-create-fields {
    margin-bottom: 0;
}
.user-create-fields input {
    width: 100%;
    min-height: 48px;
}
.user-access-intro {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-subtle);
}
.user-access-intro span {
    color: var(--text-muted);
    font-size: 13px;
}
.user-permission-table {
    display: grid;
    gap: 8px;
    margin: 0;
}
.user-permission-row {
    display: grid;
    grid-template-columns: minmax(190px, 1.55fr) repeat(4, minmax(0, 1fr));
    gap: 10px;
    align-items: center;
    min-width: 0;
    min-height: 60px;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-subtle);
    transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.user-permission-row:hover {
    background: var(--surface);
    border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
    transform: translateY(-1px);
}
.user-preview-btn { grid-column: 1 / -1; justify-self: start; }
.user-permission-row label,
.checkbox-row {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: 13px;
}
.user-permission-row > label:not(.permission-client) {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
}
.user-permission-row > label:not(.permission-client) span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.user-permission-row > label:not(.permission-client) input {
    flex: 0 0 auto;
}
.permission-client { color: var(--text); }
.permission-client span {
    display: inline-flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}
.permission-client small {
    display: block;
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: 12px;
    font-weight: 500;
}
.permission-disabled {
    color: var(--text-muted);
    opacity: 0.68;
}
.permission-disabled input {
    cursor: not-allowed;
}
.portal-users-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.75fr);
    gap: 18px;
}
.portal-users-main {
    grid-row: span 2;
}
.portal-users-form,
.compact-form {
    display: grid;
    gap: 16px;
}
.portal-user-action-card .card-body {
    display: grid;
}
.user-create-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 2px;
}
.checkbox-row {
    min-height: 44px;
}
.user-list { display: grid; }
.user-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid var(--border);
    transition: background var(--transition), transform var(--transition);
}
.user-row:hover {
    background: var(--surface-subtle);
    transform: translateX(2px);
}
.user-row:last-child { border-bottom: 0; }
.empty-note {
    padding: 8px 0;
}
.empty-note p {
    margin: 8px 0 0;
    max-width: 720px;
}
.invite-link-card {
    display: grid;
    grid-template-columns: minmax(180px, 0.7fr) minmax(260px, 1.3fr);
    gap: 18px;
    align-items: center;
    padding: 18px;
    margin-bottom: 20px;
}
.invite-link-card p { margin: 4px 0 0; }
.settings-form {
    max-width: 860px;
}
.settings-section-title {
    margin: 28px 0 16px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
}
.settings-section-title h3,
.settings-mail-test-intro h3 {
    margin: 0 0 4px;
    color: var(--text);
    font-size: 18px;
}
.settings-section-title p,
.settings-mail-test-intro p {
    margin: 0;
}
.settings-mail-test-card {
    margin-top: 22px;
}
.settings-mail-test-card .card-body {
    background: var(--surface);
}
.settings-mail-test-intro {
    display: grid;
    grid-template-columns: minmax(220px, .8fr) minmax(320px, 1.2fr);
    gap: 24px;
    align-items: center;
    max-width: 920px;
}
.settings-test-mail {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    gap: 14px;
    align-items: end;
    max-width: 680px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: rgba(255,255,255,0.76);
    box-shadow: var(--shadow-sm);
}
.settings-test-mail .form-group { margin: 0; }
.system-check-list {
    display: grid;
    gap: 10px;
}
.system-check-row {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 12px;
    align-items: start;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-subtle);
}
.system-check-row p { margin: 3px 0 0; }
.system-check-icon {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .02em;
}
.system-check-row.is-ok .system-check-icon {
    color: var(--success);
    background: var(--success-bg);
}
.system-check-row.is-warning .system-check-icon {
    color: var(--danger);
    background: var(--danger-bg);
}
.status-ok {
    border-color: var(--success-border);
    color: var(--success);
    background: var(--success-bg);
}
.status-warning {
    border-color: var(--danger-border);
    color: var(--danger);
    background: var(--danger-bg);
}
.system-overview {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}
.system-overview-card {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 88px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}
.system-overview-card.is-ok { border-color: var(--success-border); }
.system-overview-card.is-warning { border-color: var(--danger-border); }
.system-overview-icon,
.system-attention-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    color: var(--primary);
    background: var(--surface-muted);
    font-size: 12px;
    font-weight: 800;
}
.system-overview-card.is-ok .system-overview-icon { color: var(--success); background: var(--success-bg); }
.system-overview-card.is-warning .system-overview-icon { color: var(--danger); background: var(--danger-bg); }
.system-overview-label {
    display: block;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.system-overview-card strong { display: block; margin-top: 2px; color: var(--text); font-size: 15px; }
.system-overview-card p { margin: 3px 0 0; color: var(--text-muted); font-size: 12px; }
.system-attention { margin-bottom: 18px; border-color: var(--danger-border); }
.system-attention-heading { display: flex; align-items: center; gap: 12px; padding: 18px 22px 12px; }
.system-attention-mark { color: var(--danger); background: var(--danger-bg); }
.system-attention h2 { color: var(--text); font-size: 16px; }
.system-attention p { margin: 3px 0 0; color: var(--text-muted); font-size: 13px; }
.system-attention ul { margin: 0; padding: 0 22px 18px 68px; color: var(--text); }
.system-attention li { padding: 5px 0; font-size: 13px; }
.system-attention li span { color: var(--text-muted); }
.system-backup-note {
    display: flex;
    gap: 8px;
    align-items: baseline;
    margin-bottom: 18px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: var(--surface-muted);
    color: var(--text-muted);
    font-size: 12px;
}
.system-backup-note strong { color: var(--text); }
.system-backup-list { display: grid; gap: 8px; }
.system-backup-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-subtle); }
.system-backup-row strong { display: block; color: var(--text); font-size: 13px; }
.system-backup-row small { display: block; margin-top: 3px; font-size: 11px; }
.system-backup-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.nav-active {
    color: #fff;
}
.delete-user-form {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.delete-user-form input {
    width: 150px;
}

/* ── Product polish pass ───────────────────────────────── */
.form-hint {
    margin-top: 7px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
    max-width: 52ch;
}

.admin-portal-list .card-header {
    padding-block: 20px;
}

.admin-portal-list tbody tr {
    transition: background var(--transition);
}

.admin-portal-list tbody tr:hover {
    background: color-mix(in srgb, var(--primary) 3%, var(--surface));
}

.page-header > div > p {
    max-width: var(--content-reading);
    margin-top: 6px;
    line-height: 1.5;
}

.site-header nav a:focus-visible,
.header-tour-link:focus-visible,
.brand-edit:focus-visible {
    outline: 2px solid rgba(255,255,255,0.9);
    outline-offset: 2px;
}

.client-tabs a:focus-visible,
.file-picker:focus-within,
.metric-link:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.file-item {
    animation: list-in 220ms cubic-bezier(.22,1,.36,1) both;
}

.file-item:nth-child(2) { animation-delay: 35ms; }
.file-item:nth-child(3) { animation-delay: 70ms; }
.file-item:nth-child(4) { animation-delay: 105ms; }

html[data-theme="dark"] .card,
html[data-theme="dark"] .file-item,
html[data-theme="dark"] .login-card,
html[data-theme="dark"] .portal-picker,
html[data-theme="dark"] .client-hero {
    border-color: var(--border);
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    color: var(--text);
    background-color: var(--surface-muted);
    border-color: var(--border);
}

html[data-theme="dark"] .file-item,
html[data-theme="dark"] .card,
html[data-theme="dark"] .login-card,
html[data-theme="dark"] .client-hero {
    background: var(--surface);
    box-shadow: var(--shadow-card);
}

html[data-theme="dark"] .btn-ghost,
html[data-theme="dark"] .btn-secondary {
    color: var(--text);
    background: var(--surface-muted);
    border-color: var(--border);
}

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .subtitle,
html[data-theme="dark"] .login-footer-link {
    color: var(--text-muted);
}

@keyframes list-in {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 0.94; transform: translateY(0); }
}

@media (max-width: 760px) {
    .site-header {
        flex-wrap: wrap;
        gap: 6px 12px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .site-header nav {
        width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 1px;
    }

    .site-header nav::-webkit-scrollbar { display: none; }
    .site-header nav a,
    .header-tour-link { min-height: 40px; }

    .page-wrap { padding-top: 28px; }
    .client-hero { grid-template-columns: 1fr; align-items: start; }
    .client-hero .actions { justify-content: flex-start; }
    .client-summary { min-height: 40px; }
    .branding-layout,
    .permissions-grid,
    .portal-users-grid { gap: 14px; }

    #create-form form { grid-template-columns: 1fr; align-items: stretch; }
    #create-form form > div:last-child { justify-content: flex-start; }
    .user-permission-row {
        grid-template-columns: minmax(165px, 1.35fr) repeat(4, minmax(0, 1fr));
        gap: 8px;
        padding-inline: 12px;
    }
    .user-permission-row > label:not(.permission-client) { font-size: 12px; }
}

@media (max-width: 460px) {
    body { font-size: 14px; }
    .page-wrap { padding-inline: 12px; padding-bottom: 44px; }
    .client-hero { padding: 18px; }
    .client-hero h1 { font-size: 24px; }
    .client-tabs { width: 100%; overflow-x: auto; }
    .client-tab { flex: 1 0 auto; justify-content: center; }
    .file-item { padding: 14px; gap: 12px; }
    .file-name { white-space: normal; overflow-wrap: anywhere; }
    .file-actions { gap: 6px; }
    .file-actions .btn { min-height: 42px; }
    .stats-row { gap: 10px; }
    .stat-card { padding: 16px; }
    .stat-card .stat-value { font-size: 26px; }
    .card-header, .card-body { padding-inline: 16px; }
    .user-permission-row { gap: 10px; padding-inline: 12px; }
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 640px) {
    .page-wrap      { padding: 20px 16px 48px; }
    .site-header    { padding: 0 16px; }
    .admin-preview-bar { align-items: flex-start; flex-direction: column; padding: 9px 16px; }
    .login-card     { padding: 32px 22px; }
    .client-hero    { grid-template-columns: 1fr; align-items: start; }
    .client-tabs    { width: 100%; }
    .client-tab     { flex: 1; justify-content: center; }
    .client-workspace-mine { grid-template-columns: 1fr; }
    .client-upload-form { grid-template-columns: 1fr; }
    .client-upload-form .upload-message { grid-column: auto; }
    .client-upload-form .upload-submit { width: 100%; justify-content: center; }
    .folder-create-form { width: 100%; align-items: stretch; }
    .folder-create-form input { flex: 1; width: auto; }
    .folder-create-form .btn { flex: 0 0 auto; }
    .file-item      { flex-direction: column; align-items: flex-start; }
    .file-actions   { width: 100%; justify-content: stretch; }
    .file-actions .btn,
    .file-actions form,
    .file-actions form .btn { width: 100%; justify-content: center; }
    .page-header    { flex-direction: column; align-items: flex-start; }
    .stats-row      { grid-template-columns: repeat(2, 1fr); }
    .actions        { flex-wrap: wrap; }
    .branding-layout { grid-template-columns: 1fr; }
    .permissions-grid { grid-template-columns: 1fr; }
    .portal-users-grid { grid-template-columns: 1fr; }
    .portal-users-main { grid-row: auto; }
    .form-grid-2 { grid-template-columns: 1fr; }
    .user-permission-row { grid-template-columns: 1fr 1fr; }
    .user-permission-row > label:not(.permission-client) { white-space: normal; }
    .permission-client { grid-column: 1 / -1; }
    .user-access-intro { align-items: flex-start; flex-direction: column; }
    .user-create-actions { align-items: stretch; flex-direction: column; }
    .user-create-actions .btn { width: 100%; justify-content: center; }
    .invite-link-card { grid-template-columns: 1fr; }
    .settings-mail-test-intro { grid-template-columns: 1fr; }
    .settings-test-mail { grid-template-columns: 1fr; }
    .settings-test-mail .btn { justify-content: center; }
    .system-overview { grid-template-columns: 1fr; }
    .system-overview-card { min-height: 72px; }
    .system-attention-heading { padding-inline: 16px; }
    .system-attention ul { padding-inline: 42px 16px; }
    .system-backup-note { display: block; }
    .system-backup-note span { display: block; margin-top: 4px; }
    .system-backup-row { align-items: flex-start; flex-direction: column; }
    .system-backup-actions { width: 100%; justify-content: flex-start; }
    .system-backup-actions .btn,
    .system-backup-actions form { flex: 1 1 auto; }
    .system-backup-actions .btn { width: 100%; justify-content: center; }
    .delete-user-form { justify-content: stretch; }
    .delete-user-form input,
    .delete-user-form .btn { width: 100%; justify-content: center; }
    .permission-retention { align-items: flex-start; flex-direction: column; }
    .share-modal-card { padding: 22px 18px; }
    .share-modal-copy { grid-template-columns: 1fr; }
    .share-modal-copy .btn { width: 100%; justify-content: center; }
    .share-link-card { grid-template-columns: 1fr; }
    table.responsive-table,
    table.responsive-table thead,
    table.responsive-table tbody,
    table.responsive-table th,
    table.responsive-table td,
    table.responsive-table tr {
        display: block;
    }
    table.responsive-table thead { display: none; }
    table.responsive-table tr {
        padding: 12px 0;
        border-bottom: 1px solid var(--border);
    }
    table.responsive-table tbody td {
        border-bottom: none;
        padding: 7px 18px;
        display: flex;
        justify-content: space-between;
        gap: 16px;
        text-align: right;
    }
    table.responsive-table td::before {
        content: attr(data-label);
        color: var(--text-muted);
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        text-align: left;
    }
    table.responsive-table td.share-panel-cell {
        display: block;
        padding: 0;
        text-align: left;
    }
    table.responsive-table td.share-panel-cell::before { display: none; }
}