@charset "UTF-8";

:root {
    --accent: #6777ef;
    --accent-dark: #4e5ed1;
    --accent-soft: #eef0ff;
    --ink: #263148;
    --muted: #68758b;
    --line: #e9edf4;
    --surface: #fff;
    --background: #f5f7fb;
    --success: #24876e;
    --danger: #c44356;
    --radius: 12px;
    --shadow: 0 3px 18px rgb(34 47 78 / 3%);
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 14px; scroll-behavior: smooth; }
body { margin: 0; background: var(--background); color: var(--ink); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; line-height: 1.55; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled, [aria-disabled="true"] { cursor: default; }
a { color: var(--accent-dark); text-decoration: none; }
a:hover { color: #3544ad; }
svg { vertical-align: middle; flex-shrink: 0; }
button svg { pointer-events: none; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: -.025em; }
h1 { font-size: 1.8rem; line-height: 1.25; font-weight: 700; margin-bottom: 8px; }
h2 { font-size: 1.12rem; line-height: 1.4; font-weight: 650; margin-bottom: 0; }
h3 { font-size: 1rem; font-weight: 600; margin-bottom: 4px; }
p { margin-bottom: 16px; }
small { font-size: .83rem; }
strong { font-weight: 600; }
form { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #99a5ff; outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; transform: translateY(-160%); padding: 12px 18px; border-radius: 8px; background: var(--ink); color: white; }
.skip-link:focus { transform: translateY(0); }
.eyebrow { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: #98a1b2; margin-bottom: 9px; }
.muted, .text-muted { color: var(--muted); }
.text-danger { color: var(--danger); }
.text-right { text-align: right; }
.help-text { color: var(--muted); font-size: .84rem; line-height: 1.6; margin: 7px 0 0; }
.help-text code { font-size: .9em; }
.error-text { color: var(--danger); font-size: .85rem; margin: 6px 0 0; }
.stack { display: flex; flex-direction: column; gap: 18px; }
.inline-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.spacer-top { margin-top: 24px; }

/* Navigation keeps the familiar compact LOVIO workspace. */
.sidebar { position: fixed; z-index: 30; inset: 0 auto 0 0; width: 248px; background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.brand, .auth-brand { display: flex; gap: 12px; align-items: center; color: #27314a; font-size: 1.55rem; font-weight: 750; letter-spacing: .11em; }
.brand { margin: 27px 27px 32px; }
.brand:hover { color: var(--ink); }
.brand-mark { width: 39px; height: 39px; display: grid; place-items: center; color: white; background: var(--accent); border-radius: 11px; box-shadow: 0 5px 13px #6777ef26; font-size: 1.8rem; font-weight: 800; line-height: 1; letter-spacing: -.08em; padding-right: 3px; }
.brand-caption { display: block; color: #9aa2b3; font-size: .63rem; line-height: 1.1; text-transform: uppercase; letter-spacing: .17em; font-weight: 550; margin-top: 2px; }
.sidebar-navigation { padding: 0 15px 25px; overflow-y: auto; }
.nav-label { padding: 0 14px; margin-bottom: 10px; font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #a0a8b8; display: flex; align-items: center; justify-content: space-between; }
.nav-label-spaced { margin-top: 27px; }
.nav-label-note { text-transform: none; letter-spacing: 0; font-size: .65rem; color: #a7aebc; font-weight: 500; }
.nav-item { display: flex; gap: 13px; align-items: center; min-height: 44px; border-radius: 8px; padding: 10px 14px; margin-bottom: 4px; color: #68758d; font-weight: 550; font-size: .88rem; }
a.nav-item:hover { color: var(--accent-dark); background: #f7f8ff; }
.nav-item.is-active { background: var(--accent-soft); color: var(--accent-dark); }
.nav-item.is-active svg { stroke-width: 2; }
.nav-item.is-disabled { color: #a6aebe; }
.nav-item.is-disabled svg { color: #b6bdcb; }
.nav-soon { margin-left: auto; font-weight: 400; color: #bec4d0; }
.sidebar-foot { margin-top: auto; border-top: 1px solid var(--line); padding: 21px 26px; display: flex; gap: 12px; align-items: center; color: #647088; font-size: .79rem; font-weight: 600; }
.sidebar-foot span:not(.status-dot) { display: block; font-size: .71rem; font-weight: 400; color: #99a3b3; margin-top: 2px; }
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #4bb597; flex-shrink: 0; }
.status-dot-warning { background: #d49a3a; }
.admin-workspace { margin-left: 248px; min-height: 100vh; }
.topbar { height: 83px; display: flex; justify-content: space-between; align-items: center; padding: 0 40px; background: var(--surface); border-bottom: 1px solid var(--line); gap: 20px; }
.topbar-left { display: flex; align-items: center; gap: 15px; }
.workspace-label { font-size: .8rem; color: #99a3b3; }
.workspace-label strong { color: #6f7b91; margin-left: 6px; font-weight: 650; }
.account-menu { display: flex; align-items: center; gap: 10px; }
.account-avatar { width: 35px; height: 35px; border-radius: 50%; background: #f0edff; color: #7b6db5; display: grid; place-items: center; font-weight: 650; font-size: .95rem; }
.account-summary { display: flex; flex-direction: column; max-width: 220px; line-height: 1.4; }
.account-summary strong { font-size: .8rem; }
.account-summary span { font-size: .71rem; color: #98a1b1; overflow: hidden; text-overflow: ellipsis; }
.icon-button { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; color: #929caf; border-radius: 7px; }
.icon-button:hover { background: var(--accent-soft); color: var(--accent-dark); }
.logout-button { margin-left: 14px; }
.sidebar-toggle, .sidebar-close { display: none; }
.sidebar-backdrop { position: fixed; inset: 0; background: #18203d66; z-index: 25; }
.sidebar-open { overflow: hidden; }
.main-content { padding: 34px 40px 18px; max-width: 1600px; margin: 0 auto; }
.main-content:focus { outline: 0; }
.page-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 28px; }
.page-heading p { margin: 0; color: var(--muted); font-size: .91rem; }
.page-actions { display: flex; gap: 9px; flex-shrink: 0; }
.workspace-footer { display: flex; justify-content: space-between; color: #a1a9b9; font-size: .72rem; border-top: 1px solid #e8ecf4; padding: 19px 0 0; margin-top: 34px; gap: 10px; }

/* Shared controls for forms, modal editors, and compact tables. */
.button, a.button { min-height: 39px; display: inline-flex; gap: 8px; align-items: center; justify-content: center; padding: 9px 15px; font-size: .84rem; font-weight: 600; border: 1px solid transparent; border-radius: 7px; line-height: 1.4; text-decoration: none; transition: background-color .12s, border-color .12s; }
.button-primary { background: var(--accent); color: white; box-shadow: 0 3px 8px #6777ef1a; }
.button-primary:hover, a.button-primary:hover { background: var(--accent-dark); color: white; }
.button-secondary { background: white; color: #65718b; border-color: #dfe5ef; }
.button-secondary:hover { color: var(--accent-dark); border-color: #c2cafa; background: #fafaff; }
.button-danger { background: #fff0f2; color: #c04458; border-color: #f8d6dc; }
.button-danger:hover { background: #ffe2e8; color: #ab2c41; }
.button-quiet { background: transparent; color: var(--accent-dark); }
.button-sm { font-size: .76rem; min-height: 30px; padding: 5px 10px; }
.button-full { width: 100%; }
.button:disabled { opacity: .55; }
.form-field { margin-bottom: 19px; min-width: 0; }
.form-field > label, .form-label { display: block; font-size: .82rem; color: #546079; font-weight: 600; margin-bottom: 7px; }
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea { width: 100%; min-height: 40px; padding: 9px 12px; border: 1px solid #dde3ee; background: white; border-radius: 7px; color: var(--ink); outline: none; transition: border-color .12s, box-shadow .12s; }
input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus { border-color: #8d9bf3; box-shadow: 0 0 0 3px #6777ef17; }
input::placeholder, textarea::placeholder { color: #a6aebe; }
input[readonly] { background: #f7f9fc; }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: #d66e7d; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); width: 15px; height: 15px; vertical-align: middle; }
textarea { resize: vertical; min-height: 100px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.form-grid .full-width { grid-column: 1 / -1; }
.checkbox-field { display: flex; gap: 9px; align-items: flex-start; font-size: .85rem; }
.checkbox-field input { flex-shrink: 0; margin-top: 4px; }
.form-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 24px; }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 5px; font-size: .69rem; font-weight: 600; line-height: 1.4; white-space: nowrap; }
.badge-success { color: #26826c; background: #eaf7f1; }
.badge-warning { color: #a47629; background: #fff5df; }
.badge-muted { color: #8791a4; background: #f0f2f7; }
.badge-danger { color: #bb4357; background: #feebef; }
.badge-info { color: var(--accent-dark); background: var(--accent-soft); }
.badge-on-accent { color: #e5e9ff; background: #ffffff20; }
.alert { display: flex; align-items: flex-start; gap: 11px; border: 1px solid transparent; border-radius: 8px; padding: 13px 16px; margin: 0 0 20px; font-size: .85rem; line-height: 1.65; overflow-wrap: anywhere; }
.alert svg { margin-top: 2px; }
.alert p:last-child { margin-bottom: 0; }
.alert-info { color: #5b6a97; background: #eef2ff; border-color: #e0e7ff; }
.alert-error, .alert-danger { color: #b64352; background: #fff1f3; border-color: #f7d9de; }
.alert-success { color: #267b65; background: #eef9f3; border-color: #d6eddf; }
.alert-warning { color: #936c2d; background: #fff9e9; border-color: #f4e9c9; }
.card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; margin-bottom: 23px; min-width: 0; }
.card-header { padding: 22px 24px 19px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.card-header > svg { color: #b7bfd0; }
.card-header p { font-size: .82rem; color: #919bad; margin: 5px 0 0; }
.card-body { padding: 23px 24px; }
.card-note { border-top: 1px solid var(--line); padding: 15px 24px; background: #fcfdff; color: #8f9ab0; display: flex; gap: 10px; align-items: flex-start; }
.card-note p { font-size: .77rem; margin: 0; line-height: 1.6; }
.card-note svg { margin-top: 1px; }
.toolbar { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; gap: 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.toolbar-group { display: flex; align-items: center; gap: 10px; }
.table-search { position: relative; max-width: 320px; width: 100%; }
.table-search svg { position: absolute; top: 12px; left: 11px; color: #99a4b8; pointer-events: none; }
.table-search input { padding-left: 36px !important; min-height: 38px !important; font-size: .82rem; }
.table-container { overflow: auto; }
.data-table { width: 100%; border-collapse: collapse; text-align: left; font-size: .82rem; }
.data-table th { font-size: .7rem; font-weight: 650; color: #8b95a7; background: #fafbfe; white-space: nowrap; }
.data-table th, .data-table td { padding: 12px 18px; border-bottom: 1px solid #eef1f7; vertical-align: middle; }
.data-table th:first-child, .data-table td:first-child { padding-left: 24px; }
.data-table th:last-child, .data-table td:last-child { padding-right: 24px; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: #fafbff; }
.data-table td strong { display: block; font-weight: 600; }
.data-table td small { color: #98a2b5; font-size: .73rem; }
.data-table .checkbox-cell { width: 36px; }
.data-table tr.is-selected { background: #eef1ff; }
.data-table tr.is-selected:hover { background: #e9edff; }
.data-table tr:focus { outline: 2px solid #9ba8f3; outline-offset: -2px; }
.data-table tr[data-row-open], .data-table tr[data-row-dialog] { cursor: pointer; }
.table-footer { border-top: 1px solid var(--line); padding: 12px 24px; display: flex; justify-content: space-between; align-items: center; gap: 12px; color: #95a0b2; font-size: .74rem; }
.access-summary { display: flex; align-items: center; gap: 24px; padding: 0 0 24px; color: #8d98ac; font-size: .79rem; flex-wrap: wrap; }
.access-summary > span { display: inline-flex; align-items: center; gap: 8px; }
.access-summary strong { color: #65718b; }
.access-summary-security { margin-left: auto; color: #8794ac; font-size: .75rem; }
.table-person { display: flex; align-items: center; gap: 11px; min-width: 180px; }
.table-avatar { width: 34px; height: 34px; border-radius: 9px; background: #f0f2fc; color: #8a98bf; display: grid; place-items: center; font-weight: 600; }
.self-label { font-size: .64rem; color: #9aa5bb; font-weight: 400; margin-left: 6px; }
.mfa-label { display: inline-flex; align-items: center; gap: 4px; color: #81948d; font-size: .73rem; white-space: nowrap; }
.date-cell { color: #8d98ac; font-size: .76rem; white-space: nowrap; }
.users-table td { padding-top: 14px; padding-bottom: 14px; }
.empty-state-compact { padding: 27px 20px; }
.empty-state-compact > svg { margin-bottom: 11px; }
.invite-info { margin-bottom: 0; font-size: .8rem; }
.deactivate-form { border-top: 1px solid var(--line); }
.keyboard-hint kbd { display: inline-block; border: 1px solid #e0e5ef; border-bottom-width: 2px; border-radius: 4px; padding: 0 4px; font-family: inherit; font-size: .67rem; color: #7a879c; background: white; }
.empty-state { text-align: center; padding: 34px 20px; color: #8e9ab0; }
.empty-state > svg { margin-bottom: 15px; color: #aeb8d4; }
.empty-state h3 { color: #68748d; font-weight: 550; }
.empty-state p { font-size: .84rem; max-width: 330px; margin: 7px auto 0; }
.detail-list { margin: 0; padding: 8px 24px; }
.detail-list > div { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 0; border-bottom: 1px solid #f0f2f7; font-size: .85rem; }
.detail-list > div:last-child { border: 0; }
.detail-list dt { color: #919bad; }
.detail-list dd { margin: 0; font-weight: 550; text-align: right; overflow-wrap: anywhere; }
dialog { padding: 0; max-width: 520px; width: calc(100% - 32px); border: 1px solid var(--line); border-radius: 13px; box-shadow: 0 22px 90px #1d2c5940; color: var(--ink); max-height: calc(100vh - 48px); overflow: auto; }
dialog::backdrop { background: #24314a66; backdrop-filter: blur(2px); }
.dialog-header { padding: 23px 24px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.dialog-header h2 { font-size: 1.2rem; }
.dialog-header p { font-size: .84rem; color: var(--muted); margin: 6px 0 0; }
.dialog-body { padding: 24px; }
.dialog-footer { padding: 17px 24px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 9px; background: #fafbfe; }

/* Dashboard shows readiness, never simulated shop data. */
.welcome-panel { display: flex; justify-content: space-between; align-items: center; gap: 30px; background: #6777e9; border: 1px solid #6574df; border-radius: var(--radius); padding: 28px 32px; margin-bottom: 23px; min-height: 207px; overflow: hidden; }
.welcome-copy { max-width: 590px; }
.welcome-copy h2 { color: white; font-size: 1.65rem; margin: 12px 0 9px; font-weight: 650; letter-spacing: -.03em; }
.welcome-copy p { color: #e1e6ff; font-size: .9rem; line-height: 1.8; max-width: 520px; margin-bottom: 16px; }
.welcome-links a { display: inline-flex; align-items: center; gap: 11px; color: white; font-size: .82rem; font-weight: 600; }
.welcome-links a:hover { color: #e6eaff; }
.welcome-illustration { width: 210px; min-width: 170px; align-self: center; padding-right: 16px; }
.illustration-window { position: relative; width: 175px; height: 125px; background: #ffffff16; border: 1px solid #ffffff48; border-radius: 10px; transform: rotate(-6deg); padding: 10px 13px; box-shadow: 12px 14px 0 #ffffff0c; }
.illustration-window > span { display: inline-block; width: 4px; height: 4px; background: #ffffff80; border-radius: 50%; margin-right: 3px; vertical-align: top; }
.illustration-row { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.illustration-row i { width: 10px; height: 10px; border: 1px solid #ffffff77; border-radius: 2px; }
.illustration-row b { width: 72px; height: 5px; background: #ffffff55; border-radius: 3px; }
.illustration-row em { width: 24px; height: 9px; background: #ffffff26; border-radius: 3px; margin-left: auto; }
.illustration-check { position: absolute; bottom: -12px; right: -13px; display: grid; place-items: center; width: 49px; height: 49px; border-radius: 15px; color: #6675e1; background: #eef1ff; transform: rotate(6deg); box-shadow: 0 5px 12px #3443af25; }
.summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 23px; }
.summary-card { display: flex; align-items: center; gap: 17px; background: white; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 21px 22px; min-width: 0; }
.summary-icon { display: inline-flex; align-items: center; justify-content: center; width: 47px; height: 47px; border-radius: 11px; background: #eef0ff; color: #7181e4; flex-shrink: 0; }
.summary-icon-teal { background: #edf8f5; color: #52a18d; }
.summary-icon-amber { background: #fff6e5; color: #c6a052; }
.summary-label { font-size: .73rem; color: #949eb0; display: block; margin-bottom: 4px; }
.summary-card strong { display: block; font-size: 1.1rem; font-weight: 650; letter-spacing: -.015em; }
.summary-description { color: #a1aabd; display: block; font-size: .69rem; margin-top: 4px; }
.summary-card > .status-dot { margin-left: auto; align-self: flex-start; margin-top: 5px; }
.dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 23px; align-items: start; }
.dashboard-grid > .card { margin-bottom: 0; }
.onboarding-list { margin: 0 0 25px; padding: 0; list-style: none; }
.onboarding-list li { display: flex; align-items: flex-start; gap: 14px; padding-bottom: 23px; }
.onboarding-list li:last-child { padding-bottom: 0; }
.step-number { display: inline-flex; align-items: center; justify-content: center; background: #f1f3ff; border: 1px solid #e9edff; color: #7c8ae1; border-radius: 50%; width: 28px; height: 28px; font-size: .76rem; font-weight: 650; flex-shrink: 0; }
.onboarding-list h3 { font-size: .86rem; margin: 1px 0 5px; }
.onboarding-list p { font-size: .79rem; color: #939eb0; margin: 0; line-height: 1.65; }
.module-list { padding: 1px 24px; }
.module-row { display: flex; gap: 13px; align-items: center; padding: 23px 0; border-bottom: 1px solid #eff2f7; }
.module-row:last-child { border-bottom: 0; }
.module-icon { width: 41px; height: 41px; border: 1px solid #e9edf6; border-radius: 10px; display: grid; place-items: center; color: #9ba6c3; background: #fafbfe; }
.module-row h3 { font-size: .86rem; font-weight: 550; margin: 0 0 3px; }
.module-row p { color: #9ba5b6; font-size: .76rem; margin: 0; }
.module-row > svg { margin-left: auto; color: #b2bdcf; }
.link-card-list { display: flex; flex-direction: column; gap: 20px; }
.settings-link { display: flex; gap: 13px; align-items: center; color: var(--ink); }
.settings-link:hover strong { color: var(--accent-dark); }
.settings-link strong { display: block; font-size: .88rem; }
.settings-link small { display: block; margin-top: 4px; color: #98a2b5; font-size: .76rem; }
.settings-link > svg { margin-left: auto; color: #a6afc1; }
.dashboard-grid + .alert { margin-top: 23px; }

/* Authentication and first-time installation share one calm, focused shell. */
.auth-page { background: #f4f6fc; }
.auth-layout { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 20px; }
.auth-brand { margin-bottom: 29px; }
.auth-card { background: white; border: 1px solid #e7ebf4; border-top: 3px solid var(--accent); border-radius: 12px; box-shadow: 0 10px 45px #2d3b6b09; width: 100%; max-width: 460px; padding: 32px 35px; }
.auth-card.auth-wide, .auth-card.auth-width-wide, .auth-card.auth-card-wide, .auth-card.wide { max-width: 680px; }
.auth-heading { margin-bottom: 25px; }
.auth-heading h1 { font-size: 1.65rem; margin-bottom: 9px; }
.auth-heading > p { color: #8b97ab; font-size: .87rem; line-height: 1.7; margin-bottom: 0; }
.auth-heading .eyebrow { margin-bottom: 11px; font-size: .63rem; }
.auth-footer { display: flex; align-items: center; gap: 7px; margin: 24px 0 0; color: #a0abbd; font-size: .72rem; }
.auth-steps { display: flex; gap: 10px; padding: 0; margin: 0 0 25px; list-style: none; font-size: .76rem; color: #a0aabd; }
.auth-steps li { flex: 1; border-top: 3px solid #e9edf5; padding-top: 8px; }
.auth-steps .is-active, .auth-steps .is-complete { color: var(--accent-dark); border-color: var(--accent); }
.auth-links { text-align: center; margin-top: 20px; font-size: .81rem; }
.auth-card .data-table th, .auth-card .data-table td { padding: 9px 12px; }
.auth-card form > .help-text { margin: 0 0 20px; }
.auth-card > .help-text { margin: 17px 0; }
.auth-card details { padding: 12px 15px; background: #f8f9fd; border: 1px solid var(--line); border-radius: 7px; margin: 18px 0; }
.auth-card summary { cursor: pointer; font-size: .83rem; color: var(--accent-dark); }
.auth-card details p { margin-top: 13px; margin-bottom: 0; }
.auth-card code { overflow-wrap: anywhere; }
.auth-card [aria-label="QR kód pro nastavení autentizační aplikace"] { max-width: 210px; margin: 0 auto; }
.auth-card [aria-label="QR kód pro nastavení autentizační aplikace"] svg { width: 100%; height: auto; }
.installation-checks { list-style: none; padding: 0; margin: 0 0 18px; border: 1px solid var(--line); border-radius: 8px; }
.installation-checks li { padding: 11px 14px; border-bottom: 1px solid var(--line); font-size: .83rem; }
.installation-checks li:last-child { border-bottom: 0; }
.installation-checks .help-text { display: block; margin-top: 3px; font-size: .76rem; }
.recovery-codes { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 18px; background: #f5f7fc; border: 1px solid var(--line); border-radius: 8px; margin: 18px 0; list-style: none; font-family: ui-monospace, Consolas, monospace; font-size: .86rem; }
.otp-input { text-align: center; font-size: 1.5rem; letter-spacing: .3em; font-variant-numeric: tabular-nums; }
.secret-code { display: block; padding: 12px; font-family: ui-monospace, Consolas, monospace; font-size: .84rem; background: #f6f7fc; border: 1px solid var(--line); border-radius: 7px; overflow-wrap: anywhere; user-select: all; }
.qr-code { display: block; max-width: 220px; height: auto; margin: 16px auto; }

/* Keep small explanatory text legible; inactive navigation remains intentionally subdued. */
.eyebrow, .brand-caption, .nav-label, .nav-label-note, .workspace-label,
.account-summary span, .page-heading p, .summary-label, .summary-description,
.card-header p, .card-note, .onboarding-list p, .module-row p,
.workspace-footer, .sidebar-foot span:not(.status-dot), .settings-link small,
.detail-list dt, .table-footer, .data-table th, .data-table td small,
.access-summary, .access-summary-security, .self-label, .date-cell,
.auth-heading > p, .auth-footer, .auth-steps, .mfa-label { color: #69768c; }
.welcome-copy .badge-on-accent { color: white; }

@media (min-width: 1600px) { .main-content { padding-top: 42px; } .welcome-panel { min-height: 220px; } }
@media (max-width: 1200px) {
    .sidebar { width: 222px; }
    .admin-workspace { margin-left: 222px; }
    .topbar { padding: 0 27px; }
    .main-content { padding: 29px 27px 18px; }
    .summary-grid { gap: 14px; }
    .summary-card { padding: 18px 16px; gap: 12px; }
    .summary-icon { width: 39px; height: 39px; }
    .summary-description { font-size: .66rem; }
    .welcome-illustration { min-width: 145px; width: 145px; }
    .illustration-window { width: 140px; }
    .illustration-row b { width: 54px; }
    .topbar-left > .badge { display: none; }
}
@media (max-width: 1000px) {
    .summary-grid { grid-template-columns: 1fr; gap: 12px; }
    .summary-card { padding: 16px 20px; }
    .summary-card > div { flex: 1; display: grid; grid-template-columns: 1fr auto; column-gap: 20px; }
    .summary-description { font-size: .7rem; grid-column: 1 / -1; }
    .summary-label { margin: 0; align-self: center; }
    .summary-card > .status-dot { align-self: center; }
    .dashboard-grid { grid-template-columns: 1fr; }
    .welcome-illustration { display: none; }
    .welcome-panel { padding: 26px; }
    .page-heading { align-items: flex-start; }
    .page-actions { padding-top: 22px; }
    .page-heading h1 { font-size: 1.65rem; }
    .page-actions .button { font-size: .77rem; padding: 8px 11px; }
}
@media (max-width: 760px) {
    .sidebar { transform: translateX(-100%); width: 248px; transition: transform .18s; }
    .sidebar.is-open { transform: translateX(0); }
    .sidebar-close { display: inline-flex; position: absolute; top: 28px; right: 13px; }
    .sidebar-toggle { display: inline-flex; }
    .admin-workspace { margin-left: 0; }
    .topbar { height: 70px; padding: 0 20px; }
    .topbar-left { gap: 9px; }
    .account-summary { max-width: 150px; }
    .account-summary strong { font-size: .76rem; }
    .account-summary span { font-size: .64rem; }
    .logout-button { margin-left: 3px; }
    .main-content { padding: 25px 20px 17px; }
    .page-heading { flex-direction: column; gap: 14px; margin-bottom: 22px; }
    .page-actions { padding: 0; }
    .welcome-copy h2 { font-size: 1.5rem; }
    .welcome-panel { padding: 24px; }
    .card-header, .card-body { padding-left: 20px; padding-right: 20px; }
    .workspace-footer { font-size: .67rem; }
    .table-footer { align-items: flex-start; flex-direction: column; }
    .toolbar { padding: 16px 20px; }
}
@media (max-width: 430px) {
    .workspace-label { display: none; }
    .account-summary { max-width: 180px; }
    .main-content { padding-left: 15px; padding-right: 15px; }
    .auth-card { padding: 27px 22px; }
    .form-grid { grid-template-columns: 1fr; }
    .summary-card > div { display: block; }
    .summary-card strong { margin-top: 4px; }
    .summary-description { font-size: .7rem; }
    .module-row { gap: 10px; }
    .module-row p { font-size: .71rem; }
    .recovery-codes { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
@media print { .sidebar, .topbar, .page-actions, .workspace-footer { display: none; } .admin-workspace { margin: 0; } .main-content { padding: 0; } .card { box-shadow: none; break-inside: avoid; } body { background: white; } }