/* francesca — styles transcribed 1:1 from the design handoff prototype */

html, body { margin: 0; padding: 0; background: #F2F5F9; }
*, *:before, *:after { box-sizing: border-box; }
::selection { background: #CFDDF7; }
button, input, select { font-family: inherit; }
input::placeholder { color: #9AA7B9; }
select { appearance: none; -webkit-appearance: none; }
[hidden] { display: none !important; }
@keyframes fcFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fcUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fcToast { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
@page { size: A4; margin: 14mm; }

/* ---------- layout ---------- */
.app { display: flex; height: 100vh; overflow: hidden; background: #F2F5F9; font-family: 'IBM Plex Sans', system-ui, sans-serif; color: #101E33; font-size: 14px; -webkit-font-smoothing: antialiased; }
.spacer { flex: 1; }
.min0 { min-width: 0; }

/* ---------- sidebar ---------- */
.sidebar { width: 230px; flex: none; background: #FFFFFF; border-right: 1px solid #E5EAF1; display: flex; flex-direction: column; min-height: 0; }
.sb-logo { display: flex; align-items: center; gap: 9px; padding: 18px 20px 12px; }
.sb-wordmark { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: #101E33; }
.sb-nav { padding: 6px 12px 2px; display: flex; flex-direction: column; gap: 2px; }
.sb-group-label { padding: 16px 22px 6px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #93A1B5; }
.sb-docs { padding: 0 12px; display: flex; flex-direction: column; gap: 2px; overflow: auto; }
.nav-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 7px; border: none; text-align: left; cursor: pointer; font-size: 13.5px; background: transparent; color: #3D4C63; font-weight: 500; text-decoration: none; font-family: inherit; }
.nav-btn:hover { background: #F3F6FB; }
.nav-btn.active { background: #E9F0FC; color: #17418F; font-weight: 600; }
.nav-btn.active:hover { background: #E9F0FC; }
.nav-btn svg { flex: none; color: #7C8BA1; }
.nav-btn.active svg { color: #1F55C4; }
.nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-count { font-size: 11px; color: #9AA7B9; font-weight: 500; font-variant-numeric: tabular-nums; }
.sb-footer { margin-top: auto; padding: 14px 20px; border-top: 1px solid #EEF1F6; }
.sb-co-name { font-size: 13px; font-weight: 600; }
.sb-co-meta { font-size: 11.5px; color: #8B98AB; margin-top: 2px; }

/* ---------- main / topbar ---------- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.topbar { height: 54px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 26px; background: #FFFFFF; border-bottom: 1px solid #E5EAF1; }
.tb-co { font-size: 13px; color: #8B98AB; }
.tb-sep { font-size: 12px; color: #C3CCD9; }
.tb-page { font-size: 13.5px; font-weight: 600; }
.ro-badge { padding: 4px 10px; border-radius: 6px; background: #FAF0DA; color: #8A5E10; font-size: 12px; font-weight: 500; }
.user-wrap { position: relative; }
.user-chip { display: flex; align-items: center; gap: 8px; border: none; background: transparent; padding: 5px 8px; border-radius: 7px; cursor: pointer; font-family: inherit; color: #101E33; }
.user-chip:hover { background: #F1F5FB; }
.user-avatar { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; }
.user-name { font-size: 13px; font-weight: 500; }
.user-chip .chev { color: #9AA7B9; }
.menu-overlay { position: fixed; inset: 0; z-index: 69; }
.user-menu { position: absolute; right: 0; top: 44px; z-index: 70; width: 224px; background: #FFFFFF; border: 1px solid #E5EAF1; border-radius: 10px; box-shadow: 0 16px 40px rgba(13, 23, 41, 0.16); padding: 6px; animation: fcUp 0.15s ease; }
.um-head { padding: 8px 10px 10px; border-bottom: 1px solid #F0F3F8; margin-bottom: 6px; }
.um-name { font-size: 13px; font-weight: 600; }
.um-email { font-size: 11.5px; color: #8B98AB; margin-top: 1px; }
.um-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border: none; border-radius: 6px; background: none; text-align: left; font-size: 13px; color: #33415C; cursor: pointer; font-family: inherit; text-decoration: none; }
.um-item:hover { background: #F4F7FB; }
.um-item svg { color: #7C8BA1; }
.um-item.logout { color: #A63A2C; }
.um-item.logout svg { color: #A63A2C; }
.um-item.logout:hover { background: #FBF1EF; }

/* ---------- page shells ---------- */
.content { flex: 1; overflow: auto; min-height: 0; }
.page-dash { max-width: 1128px; margin: 0 auto; padding: 28px 30px 48px; animation: fcFade 0.25s ease; }
.page-sec { max-width: 1240px; margin: 0 auto; padding: 28px 30px 56px; animation: fcFade 0.2s ease; }
.page-settings { max-width: 860px; margin: 0 auto; padding: 28px 30px 56px; animation: fcFade 0.2s ease; }
.page-reports { max-width: 980px; margin: 0 auto; padding: 28px 30px 56px; animation: fcFade 0.2s ease; }
.page-h1 { margin: 0; font-size: 21px; font-weight: 650; letter-spacing: -0.01em; }
.page-sub { font-size: 13px; color: #5C6B81; margin-top: 4px; }

/* ---------- dashboard ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); background: #FFFFFF; border: 1px solid #E5EAF1; border-radius: 10px; margin-top: 20px; overflow: hidden; }
.stat { padding: 16px 20px 15px; }
.stat + .stat { border-left: 1px solid #EEF1F6; }
.stat-label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #74839B; }
.stat-value { font-size: 20px; font-weight: 650; margin-top: 7px; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.stat-note { font-size: 12px; color: #8B98AB; margin-top: 3px; }
.sec-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 12px; margin-top: 14px; }
.sec-card { text-align: left; background: #FFFFFF; border: 1px solid #E5EAF1; border-radius: 10px; padding: 16px; cursor: pointer; display: block; text-decoration: none; color: #101E33; }
.sec-card:hover { border-color: #9FB9E8; box-shadow: 0 4px 14px rgba(31, 85, 196, 0.08); }
.sec-card-head { display: flex; align-items: center; gap: 10px; }
.sec-card-icon { width: 30px; height: 30px; flex: none; border-radius: 7px; background: #E9F0FB; color: #1F55C4; display: flex; align-items: center; justify-content: center; }
.sec-card-name { font-size: 13.5px; font-weight: 600; color: #101E33; }
.sec-card-count { font-size: 12.5px; color: #5C6B81; margin-top: 12px; }
.sec-card-updated { font-size: 11.5px; color: #9AA7B9; margin-top: 2px; }
.recent-card { background: #FFFFFF; border: 1px solid #E5EAF1; border-radius: 10px; margin-top: 22px; overflow: hidden; }
.recent-head { display: flex; align-items: baseline; padding: 14px 20px 12px; }
.recent-title { font-size: 13.5px; font-weight: 600; }
.recent-note { font-size: 11.5px; color: #9AA7B9; }
.recent-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 130px 90px; gap: 12px; align-items: center; width: 100%; background: none; border: none; border-top: 1px solid #F3F6FA; padding: 10px 20px; cursor: pointer; text-align: left; font-family: inherit; color: #101E33; text-decoration: none; }
.recent-row:hover { background: #F7F9FC; }
.recent-icon { width: 26px; height: 26px; border-radius: 6px; background: #EDF2FA; color: #4A6BB0; display: flex; align-items: center; justify-content: center; }
.recent-main { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-sub { font-size: 11.5px; color: #8B98AB; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-amount { font-size: 12.5px; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.recent-date { font-size: 12px; color: #8B98AB; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- buttons ---------- */
.btn-primary { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 15px; border: none; border-radius: 7px; background: #1F55C4; color: #FFFFFF; font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; }
.btn-primary:hover { background: #1A49AC; }
.btn-secondary { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border: 1px solid #D7DEE9; border-radius: 7px; background: #FFFFFF; color: #33415C; font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; }
.btn-secondary:hover { background: #F6F8FB; border-color: #B9C6D8; }
.btn-save { padding: 0 16px; }
.btn-cancel:hover { background: #F6F8FB; border-color: #D7DEE9; }

/* ---------- section page ---------- */
.sec-head { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.sec-head-text { flex: 1; min-width: 260px; }
.filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.search-wrap { position: relative; }
.search-icon { position: absolute; left: 11px; top: 10px; color: #9AA7B9; }
.search-input { width: 238px; height: 34px; padding: 0 12px 0 32px; border: 1px solid #D7DEE9; border-radius: 7px; background: #FFFFFF; font-size: 13px; color: #101E33; outline: none; }
.search-input:focus { border-color: #1F55C4; box-shadow: 0 0 0 3px rgba(31, 85, 196, 0.14); }
.select-wrap { position: relative; }
.filter-select { height: 34px; padding: 0 30px 0 11px; border: 1px solid #D7DEE9; border-radius: 7px; background: #FFFFFF; font-size: 13px; color: #33415C; cursor: pointer; outline: none; }
.filter-select:focus { border-color: #1F55C4; box-shadow: 0 0 0 3px rgba(31, 85, 196, 0.14); }
.select-arrow { position: absolute; right: 10px; top: 11px; color: #9AA7B9; pointer-events: none; }
.clear-btn { border: none; background: none; color: #1F55C4; font-size: 12.5px; font-weight: 500; cursor: pointer; padding: 4px 2px; font-family: inherit; }
.count-text { font-size: 12.5px; color: #8B98AB; }
.table-card { background: #FFFFFF; border: 1px solid #E5EAF1; border-radius: 10px; overflow: hidden; margin-top: 14px; }
.table-scroll { overflow-x: auto; }
.thead { display: grid; padding: 0 14px; background: #FAFBFD; border-bottom: 1px solid #E5EAF1; }
.th { display: flex; align-items: center; justify-content: flex-start; gap: 4px; background: none; border: none; padding: 10px 8px; cursor: pointer; font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #74839B; min-width: 0; white-space: nowrap; font-family: inherit; }
.th:hover { color: #1F55C4; }
.th.j-end { justify-content: flex-end; }
.th-arrow { font-size: 10px; color: #1F55C4; }
.trow { display: grid; padding: 11px 14px; align-items: center; border-top: 1px solid #F3F6FA; cursor: pointer; font-size: 13px; }
.trow:hover { background: #F7F9FC; }
.cell { display: flex; align-items: center; justify-content: flex-start; min-width: 0; padding: 0 8px; }
.cell.j-end { justify-content: flex-end; }
.main-line { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub-line { font-size: 11.5px; color: #8B98AB; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-ref { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; font-weight: 500; color: #33415C; white-space: nowrap; }
.chip { font-size: 11.5px; font-weight: 500; padding: 3px 8px; border-radius: 5px; white-space: nowrap; }
.person-cell { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.avatar-22 { width: 22px; height: 22px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 600; }
.person-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-amount { font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
.cell-text { color: #33415C; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.clip-btn { width: 28px; height: 28px; flex: none; border-radius: 6px; border: 1px solid #E1E7F0; background: #FFFFFF; color: #5C6B81; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.clip-btn:hover { border-color: #1F55C4; color: #1F55C4; }
.x-btn { width: 28px; height: 28px; flex: none; border-radius: 6px; border: 1px solid #E1E7F0; background: #FFFFFF; color: #8B98AB; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.x-btn:hover { border-color: #A63A2C; color: #A63A2C; }
.no-file { color: #C3CCD9; }
.empty-state { padding: 52px 20px; text-align: center; }
.empty-state svg { color: #B9C6D8; }
.empty-text { font-size: 13px; color: #5C6B81; margin-top: 10px; }
.total-row { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 12px 22px; border-top: 1px solid #E5EAF1; background: #FAFBFD; }
.total-label { font-size: 12px; color: #74839B; }
.total-value { font-size: 13.5px; font-weight: 650; font-variant-numeric: tabular-nums; }

/* ---------- reports page ---------- */
.rep-table-head { display: grid; grid-template-columns: minmax(240px, 1.8fr) 160px 110px 120px 52px; padding: 0 14px; background: #FAFBFD; border-bottom: 1px solid #E5EAF1; }
.rep-th { padding: 10px 8px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #74839B; }
.rep-th.j-end { text-align: right; }
.rep-row { display: grid; grid-template-columns: minmax(240px, 1.8fr) 160px 110px 120px 52px; padding: 11px 14px; align-items: center; border-top: 1px solid #F3F6FA; cursor: pointer; font-size: 13px; }
.rep-row:hover { background: #F7F9FC; }
.rep-cell { padding: 0 8px; }
.rep-range { font-weight: 500; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rep-sub { font-size: 11.5px; color: #8B98AB; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rep-scope { padding: 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #33415C; }
.rep-count { padding: 0 8px; color: #33415C; font-variant-numeric: tabular-nums; }
.rep-total { padding: 0 8px; text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
.rep-del { display: flex; justify-content: flex-end; padding: 0 8px; }

/* ---------- settings ---------- */
.set-card { background: #FFFFFF; border: 1px solid #E5EAF1; border-radius: 10px; margin-top: 20px; padding: 18px 20px 20px; }
.set-card2 { background: #FFFFFF; border: 1px solid #E5EAF1; border-radius: 10px; margin-top: 14px; overflow: hidden; }
.card-title { font-size: 13.5px; font-weight: 600; }
.card-desc { font-size: 12px; color: #8B98AB; margin-top: 2px; }
.set-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 16px; }
.field-label { display: block; font-size: 12px; font-weight: 600; color: #44536B; margin-bottom: 6px; }
.text-input { width: 100%; height: 36px; padding: 0 12px; border: 1px solid #D7DEE9; border-radius: 7px; background: #FFFFFF; font-size: 13.5px; color: #101E33; outline: none; }
.text-input:focus { border-color: #1F55C4; box-shadow: 0 0 0 3px rgba(31, 85, 196, 0.14); }
.people-head { padding: 16px 20px 12px; }
.person-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; padding: 12px 20px; border-top: 1px solid #F3F6FA; }
.avatar-30 { width: 30px; height: 30px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; }
.person-info { flex: 1 1 170px; min-width: 0; }
.person-nm { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-sub { font-size: 11.5px; color: #8B98AB; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-docs { font-size: 12px; color: #74839B; font-variant-numeric: tabular-nums; }
.add-row { display: flex; gap: 8px; padding: 14px 20px; border-top: 1px solid #E5EAF1; background: #FAFBFD; flex-wrap: wrap; }
.add-input { height: 34px; padding: 0 12px; border: 1px solid #D7DEE9; border-radius: 7px; background: #FFFFFF; font-size: 13px; color: #101E33; outline: none; }
.add-input:focus { border-color: #1F55C4; box-shadow: 0 0 0 3px rgba(31, 85, 196, 0.14); }
.grow-name { flex: 1 1 150px; }
.grow-role { flex: 1 1 140px; }
.grow-email { flex: 1 1 170px; }
.add-btn { height: 34px; padding: 0 15px; border: none; border-radius: 7px; background: #1F55C4; color: #FFFFFF; font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; }
.add-btn:hover { background: #1A49AC; }

/* ---------- modals ---------- */
.overlay { position: fixed; inset: 0; background: rgba(13, 23, 41, 0.45); z-index: 60; display: flex; align-items: center; justify-content: center; padding: 20px; animation: fcFade 0.15s ease; font-family: 'IBM Plex Sans', system-ui, sans-serif; color: #101E33; font-size: 14px; -webkit-font-smoothing: antialiased; }
.modal { max-width: 100%; max-height: 88vh; overflow: auto; background: #FFFFFF; border-radius: 12px; box-shadow: 0 24px 64px rgba(13, 23, 41, 0.28); animation: fcUp 0.18s ease; }
.modal-form { width: 560px; }
.modal-preview { width: 460px; }
.modal-report { width: 780px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; }
.modal-head { display: flex; align-items: flex-start; gap: 12px; padding: 20px 24px 4px; }
.modal-title { font-size: 16px; font-weight: 600; }
.modal-sub { font-size: 12.5px; color: #5C6B81; margin-top: 3px; }
.close-btn { width: 30px; height: 30px; border: none; border-radius: 7px; background: none; color: #8B98AB; cursor: pointer; display: flex; align-items: center; justify-content: center; flex: none; }
.close-btn:hover { background: #F1F5FB; color: #33415C; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 18px 24px 6px; }
.f-full { grid-column: 1 / -1; }
.f-half { grid-column: span 1; }
.f-num { font-variant-numeric: tabular-nums; }
.f-select { width: 100%; height: 36px; padding: 0 30px 0 11px; border: 1px solid #D7DEE9; border-radius: 7px; background: #FFFFFF; font-size: 13.5px; color: #101E33; cursor: pointer; outline: none; }
.f-select:focus { border-color: #1F55C4; box-shadow: 0 0 0 3px rgba(31, 85, 196, 0.14); }
.f-select-arrow { position: absolute; right: 10px; top: 12px; color: #9AA7B9; pointer-events: none; }
.file-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.file-btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border: 1px solid #D7DEE9; border-radius: 7px; background: #FFFFFF; color: #33415C; font-size: 12.5px; font-weight: 500; cursor: pointer; flex: none; }
.file-btn:hover { background: #F6F8FB; border-color: #B9C6D8; }
.file-name { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: #5C6B81; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal-foot { display: flex; align-items: center; gap: 10px; padding: 18px 24px 22px; }
.del-btn { border: none; background: none; color: #A63A2C; font-size: 13px; font-weight: 500; cursor: pointer; padding: 8px 0; font-family: inherit; }

/* ---------- attachment preview modal ---------- */
.pv-head { display: flex; align-items: center; gap: 10px; padding: 16px 20px; }
.pv-head svg { color: #5C6B81; flex: none; }
.pv-name { flex: 1; font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-stage { background: #EDF1F6; padding: 26px; }
.pv-page { width: 280px; height: 372px; margin: 0 auto; background: #FFFFFF; border: 1px solid #E1E7F0; border-radius: 4px; box-shadow: 0 6px 18px rgba(13, 23, 41, 0.08); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.pv-page-live { overflow: hidden; }
/* real-file preview: a bigger modal with a properly sized viewer */
.modal-preview-lg { width: 680px; }
.modal-preview-lg .pv-page { width: 100%; height: 64vh; }
.mono { font-family: 'IBM Plex Mono', monospace; }
.pv-page svg { color: #B9C6D8; }
.pv-file { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #5C6B81; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-kind { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #9AA7B9; }
.pv-meta { padding: 14px 22px 4px; }
.pv-meta-row { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid #F3F6FA; }
.pv-k { font-size: 12px; color: #5C6B81; }
.pv-v { font-size: 12.5px; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.pv-note { padding: 10px 22px 18px; font-size: 11.5px; color: #8B98AB; }

/* ---------- expense report modal ---------- */
.rm-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 24px 10px; }
.rm-controls { display: flex; align-items: center; gap: 8px; padding: 0 24px 14px; flex-wrap: wrap; }
.rm-lbl { font-size: 12px; color: #74839B; }
.date-input { height: 34px; padding: 0 10px; border: 1px solid #D7DEE9; border-radius: 7px; background: #FFFFFF; font-size: 13px; color: #33415C; outline: none; font-variant-numeric: tabular-nums; }
.date-input:focus { border-color: #1F55C4; box-shadow: 0 0 0 3px rgba(31, 85, 196, 0.14); }
.rm-stage { flex: 1; overflow: auto; background: #E9EDF3; padding: 26px; }
.sheet { width: 660px; max-width: 100%; margin: 0 auto; background: #FFFFFF; border: 1px solid #E1E7F0; box-shadow: 0 12px 32px rgba(13, 23, 41, 0.10); padding: 44px 48px 40px; }
.sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.sheet-logo { display: flex; align-items: center; gap: 9px; }
.sheet-co { font-size: 13.5px; font-weight: 650; }
.sheet-co-line { font-size: 10.5px; color: #8B98AB; margin-top: 1px; }
.sheet-gen { font-size: 10.5px; color: #8B98AB; }
.sheet-gen + .sheet-gen { margin-top: 1px; }
.sheet-title-wrap { margin-top: 30px; padding-bottom: 14px; border-bottom: 2px solid #101E33; }
.sheet-title { font-size: 19px; font-weight: 650; letter-spacing: -0.01em; }
.sheet-sub { font-size: 12px; color: #5C6B81; margin-top: 4px; }
.grp { margin-top: 22px; }
.grp-head { display: flex; align-items: center; gap: 8px; }
.avatar-20 { width: 20px; height: 20px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 8.5px; font-weight: 600; }
.grp-name { font-size: 12.5px; font-weight: 650; }
.grp-line { flex: 1; height: 1px; background: #EEF1F6; }
.grp-sub { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.grp-cols { display: grid; grid-template-columns: 72px 1fr 140px 84px; gap: 10px; margin-top: 10px; padding-bottom: 6px; border-bottom: 1px solid #E5EAF1; font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #93A1B5; }
.grp-cols .j-end { text-align: right; }
.grp-row { display: grid; grid-template-columns: 72px 1fr 140px 84px; gap: 10px; padding: 8px 0; border-bottom: 1px solid #F3F6FA; align-items: start; }
.gr-date { font-size: 11.5px; color: #5C6B81; font-variant-numeric: tabular-nums; }
.gr-main { font-size: 12px; font-weight: 500; }
.gr-sub { font-size: 11px; color: #8B98AB; margin-top: 1px; }
.gr-card { font-size: 11.5px; color: #5C6B81; }
.gr-amt { font-size: 12px; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.sheet-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 26px; padding-top: 12px; border-top: 2px solid #101E33; }
.sheet-total-l { font-size: 13px; font-weight: 650; }
.sheet-total-v { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sig-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; margin-top: 52px; }
.sig-line { height: 1px; background: #C6D0DF; }
.sig-lbl { font-size: 11px; color: #8B98AB; margin-top: 6px; }
.sheet-empty { padding: 44px 0; text-align: center; font-size: 12.5px; color: #8B98AB; }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: #101E33; color: #FFFFFF; font-size: 13px; font-weight: 500; padding: 10px 18px; border-radius: 8px; box-shadow: 0 10px 28px rgba(13, 23, 41, 0.35); z-index: 80; animation: fcToast 0.2s ease; }

/* ---------- signed out ---------- */
.so-wrap { height: 100vh; display: flex; align-items: center; justify-content: center; background: #F2F5F9; font-family: 'IBM Plex Sans', system-ui, sans-serif; color: #101E33; }
.so-card { width: 380px; max-width: calc(100vw - 40px); background: #FFFFFF; border: 1px solid #E5EAF1; border-radius: 14px; padding: 40px 36px; text-align: center; box-shadow: 0 18px 48px rgba(13, 23, 41, 0.10); }
.so-logo { margin: 0 auto; display: block; }
.so-name { font-size: 19px; font-weight: 600; margin-top: 12px; letter-spacing: -0.01em; }
.so-msg { font-size: 13px; color: #5C6B81; margin-top: 8px; }
.so-form { margin: 22px 0 0; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.so-error { font-size: 12.5px; color: #A63A2C; }
.so-btn { margin-top: 12px; height: 38px; width: 100%; border: none; border-radius: 8px; background: #1F55C4; color: #FFFFFF; font-size: 13.5px; font-weight: 500; cursor: pointer; font-family: inherit; }
.so-form .so-btn { margin-top: 6px; }
.so-btn:hover { background: #1A49AC; }
.so-note { font-size: 11.5px; color: #8B98AB; margin-top: 14px; }

/* ---------- invoice generator ---------- */
.gen-layout { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 18px; margin-top: 20px; align-items: start; }
@media (max-width: 1100px) { .gen-layout { grid-template-columns: 1fr; } }
.gen-form .set-card, .gen-form .set-card2 { margin-top: 14px; }
.gen-form .set-card:first-child { margin-top: 0; }
.gen-textarea { height: auto; padding: 8px 12px; resize: vertical; font-family: inherit; }
.gen-item-row { display: flex; gap: 8px; align-items: center; padding: 10px 20px; border-top: 1px solid #F3F6FA; }
.gen-item-row:first-child { border-top: none; }
.gen-item-desc { flex: 1; }
.gen-item-amount { width: 110px; text-align: right; font-variant-numeric: tabular-nums; }
.gen-toolbar { display: flex; gap: 8px; align-items: center; }
.gen-delete { color: #A63A2C; border-color: #E8C4BE; }
.gen-delete:hover { background: #FBF1EF; border-color: #A63A2C; }
.gen-chat-typing { padding: 0 20px 10px; font-size: 11.5px; color: #8B98AB; font-style: italic; }
.gen-settings { padding: 4px 20px 16px; display: flex; flex-direction: column; gap: 14px; }
.gen-settings-group { display: flex; flex-direction: column; gap: 6px; }
.gen-settings-row { display: flex; gap: 8px; }
.gen-settings-status { font-size: 11.5px; color: #8B98AB; min-height: 14px; }
.gen-chat-msg.system { align-self: flex-start; background: transparent; color: #8B98AB; padding: 0 2px; font-size: 11.5px; }
.gen-chat-messages { padding: 6px 20px 10px; max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.gen-chat-msg { font-size: 12.5px; line-height: 1.5; padding: 8px 12px; border-radius: 8px; max-width: 92%; white-space: pre-wrap; }
.gen-chat-msg.user { align-self: flex-end; background: #E9F0FC; color: #17418F; }
.gen-chat-msg.assistant { align-self: flex-start; background: #F1F4F9; color: #101E33; }
.gen-chat-msg.error { align-self: flex-start; background: #FBE8E5; color: #A63A2C; }
.gen-preview-wrap { background: #E9EDF3; border: 1px solid #E1E7F0; border-radius: 10px; padding: 22px; overflow: auto; }
.gen-preview-scale { transform-origin: top left; }

/* ---------- floating AI assistant (bottom-left, sticky) ---------- */
.fc-fab { position: fixed; left: 252px; bottom: 22px; width: 48px; height: 48px; border-radius: 50%; border: none; background: #1F55C4; color: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 10px 28px rgba(13, 23, 41, 0.28); z-index: 55; }
.fc-fab:hover { background: #1A49AC; }
.fc-chat-panel { position: fixed; left: 252px; bottom: 82px; width: 370px; max-width: calc(100vw - 44px); background: #FFFFFF; border: 1px solid #E5EAF1; border-radius: 12px; box-shadow: 0 24px 64px rgba(13, 23, 41, 0.28); z-index: 56; animation: fcUp 0.18s ease; display: flex; flex-direction: column; overflow: hidden; }
.fc-chat-panel[hidden] { display: none; }
.fc-chat-head { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px 10px; border-bottom: 1px solid #F3F6FA; }
.fc-chat-panel .gen-chat-messages { min-height: 90px; max-height: 300px; padding: 12px 16px; }
.fc-chat-panel .gen-chat-typing { padding: 0 16px 8px; }
.fc-chat-inputrow { display: flex; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid #F3F6FA; background: #FAFBFD; }
@media (max-width: 900px) { .fc-fab, .fc-chat-panel { left: 22px; } }

/* ---------- invoice document (ported from the mont3 generator, tpl-v3) ---------- */
.inv-doc { width: 210mm; height: 297mm; background: #fff; color: #141414; font-family: 'Inter', sans-serif; font-size: 10pt; line-height: 1.45; box-shadow: 0 12px 32px rgba(13, 23, 41, 0.10); }
.inv-pg { padding: 14mm 14mm 10mm; display: flex; flex-direction: column; height: 100%; gap: 6mm; box-sizing: border-box; }
.inv-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6mm; }
.inv-brand { display: flex; align-items: center; gap: 3mm; }
.inv-word-stack { display: flex; flex-direction: column; gap: 1mm; line-height: 1; }
.inv-word { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 19pt; letter-spacing: -0.04em; color: #141414; line-height: 1; }
.inv-word-tag { font-family: 'IBM Plex Mono', monospace; font-weight: 500; font-size: 6pt; letter-spacing: 0.32em; text-transform: uppercase; color: #4A4842; }
.inv-title { font-family: 'IBM Plex Mono', monospace; font-size: 9pt; letter-spacing: 0.32em; text-transform: uppercase; text-align: center; color: #141414; font-weight: 500; }
.inv-ref { text-align: right; font-family: 'IBM Plex Mono', monospace; font-size: 9pt; font-weight: 700; letter-spacing: 0.06em; color: #CB2828; line-height: 1.45; }
.inv-rule { height: 1px; background: #141414; }
.inv-meta-row { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid rgba(20,20,20,0.12); }
.inv-meta-cell { padding: 4mm 5mm; border-right: 1px solid rgba(20,20,20,0.12); display: flex; flex-direction: column; gap: 1.5mm; }
.inv-meta-cell:last-child { border-right: none; }
.inv-meta-k { font-family: 'IBM Plex Mono', monospace; font-size: 6.5pt; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: #7E7A72; }
.inv-meta-v { font-weight: 700; font-size: 11pt; letter-spacing: -0.005em; color: #141414; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-parties { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid rgba(20,20,20,0.12); }
.inv-party { padding: 5mm; display: flex; flex-direction: column; gap: 3mm; min-width: 0; }
.inv-party + .inv-party { border-left: 1px solid rgba(20,20,20,0.12); }
.inv-party-k { font-family: 'IBM Plex Mono', monospace; font-size: 7pt; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #CB2828; padding-bottom: 2mm; border-bottom: 1px dashed rgba(20,20,20,0.22); }
.inv-party-block { display: flex; flex-direction: column; gap: 0.6mm; font-size: 10pt; color: #141414; }
.inv-party-block strong { font-size: 13pt; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 1mm; }
.inv-party-vat { font-family: 'IBM Plex Mono', monospace; font-size: 8.5pt; color: #4A4842; padding-top: 2.5mm; border-top: 1px dashed rgba(20,20,20,0.22); }
.inv-items { width: 100%; border-collapse: collapse; margin-top: 1mm; }
.inv-items thead th { text-align: left; font-family: 'IBM Plex Mono', monospace; font-size: 7pt; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: #7E7A72; padding: 3mm 0 2.5mm; border-bottom: 1px solid rgba(20,20,20,0.18); }
.inv-items thead th:last-child { text-align: right; }
.inv-items tbody td { padding: 3.5mm 0; vertical-align: top; border-bottom: 1px solid rgba(20,20,20,0.10); }
.inv-items tbody td strong { display: block; font-size: 11pt; font-weight: 700; letter-spacing: -0.005em; }
.inv-item-amt { text-align: right; font-weight: 700; font-size: 11pt; font-variant-numeric: tabular-nums; }
.inv-totals { display: flex; justify-content: flex-end; margin-top: 3mm; }
.inv-totals-table { border-collapse: collapse; min-width: 86mm; }
.inv-totals-table td { padding: 1.6mm 4mm; font-size: 10pt; }
.inv-totals-table tr td:first-child { font-family: 'IBM Plex Mono', monospace; font-size: 8pt; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #7E7A72; }
.inv-totals-table tr td:last-child { text-align: right; font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 10.5pt; color: #141414; font-variant-numeric: tabular-nums; }
.inv-totals-table .inv-total-row td { background: #141414; color: #fff; padding: 4mm 6mm; }
.inv-totals-table .inv-total-row td:first-child { font-family: 'IBM Plex Mono', monospace; font-size: 9pt; font-weight: 500; letter-spacing: 0.22em; color: #fff; }
.inv-totals-table .inv-total-row td:last-child { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 19pt; letter-spacing: -0.02em; color: #fff; }
.inv-foot { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 6mm; padding-top: 4mm; border-top: 1px dashed rgba(20,20,20,0.22); }
.inv-foot-col { display: flex; flex-direction: column; gap: 1mm; min-width: 0; }
.inv-foot-k { font-family: 'IBM Plex Mono', monospace; font-size: 7pt; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #CB2828; margin-bottom: 1mm; }
.inv-foot-v { font-size: 10pt; color: #141414; }
.inv-foot-iban { font-family: 'IBM Plex Mono', monospace; letter-spacing: 0.04em; word-spacing: 0.04em; }
.inv-foot-meta { font-family: 'IBM Plex Mono', monospace; font-size: 8.5pt; color: #4A4842; word-break: break-all; }
.inv-tag { display: flex; justify-content: space-between; align-items: center; font-family: 'IBM Plex Mono', monospace; font-size: 7pt; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: #CB2828; padding-top: 3mm; border-top: 1px dashed rgba(20,20,20,0.22); }

/* ---------- print ---------- */
#print-root { display: none; }
@media print {
  .app, .overlay, .toast { display: none !important; }
  #print-root { display: block; font-family: 'IBM Plex Sans', system-ui, sans-serif; color: #101E33; background: #FFFFFF; padding: 0; }
  #print-root .sig-grid { margin-top: 56px; }
}

/* ---------- view toggle + document grid ---------- */
.view-seg { display: flex; align-items: center; flex: none; border: 1px solid #D7DEE9; border-radius: 7px; background: #FFFFFF; overflow: hidden; }
.seg-btn { display: flex; align-items: center; justify-content: center; height: 32px; min-width: 32px; padding: 0 9px; border: none; background: transparent; color: #7C8BA1; cursor: pointer; font-family: inherit; font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em; }
.seg-btn + .seg-btn { border-left: 1px solid #E5EAF1; }
.seg-btn:hover { color: #33415C; background: #F7F9FC; }
.seg-btn.on { background: #E9F0FC; color: #17418F; }
.doc-grid { display: grid; gap: 12px; padding: 14px; }
.doc-grid.g-l { grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); }
.doc-grid.g-m { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; padding: 12px; }
.doc-grid.g-s { grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 8px; padding: 10px; }
.gcard { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 12px; border: 1px solid #E5EAF1; border-radius: 9px; background: #FFFFFF; cursor: pointer; transition: border-color 0.12s ease, box-shadow 0.12s ease; }
.gcard:hover { border-color: #C9D6EA; box-shadow: 0 4px 14px rgba(16, 30, 51, 0.06); }
.g-s .gcard { padding: 9px; gap: 4px; }
.gcard-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
.gcard-icon { position: relative; width: 38px; height: 38px; flex: none; border-radius: 9px; background: #F3F6FB; color: #3D4C63; display: flex; align-items: center; justify-content: center; }
.gcard-icon.nofile { background: transparent; border: 1px dashed #D7DEE9; color: #9AA7B9; }
.gcard-tag { position: absolute; right: -6px; bottom: -4px; padding: 2px 4px; border-radius: 4px; background: #101E33; color: #FFFFFF; font-family: 'IBM Plex Mono', monospace; font-size: 7.5px; font-weight: 600; letter-spacing: 0.06em; }
.g-s .gcard-icon { width: 30px; height: 30px; border-radius: 7px; }
.gcard-eye { flex: none; }
.gcard-ref { font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 500; color: #8B98AB; }
.gcard-title { font-size: 12.5px; font-weight: 600; color: #101E33; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.g-s .gcard-title { font-size: 11.5px; }
.gcard-sub { font-size: 11px; color: #8B98AB; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gcard-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: auto; }
.gcard-date { font-size: 10.5px; color: #8B98AB; white-space: nowrap; }
.gcard-amt { font-size: 12px; font-weight: 600; color: #101E33; font-variant-numeric: tabular-nums; white-space: nowrap; }
.g-s .gcard-amt { font-size: 11px; }
.gcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.g-s .gcard-sub, .g-s .gcard-foot, .g-s .gcard-date { display: none; }

/* ---------- destructive-action confirm ---------- */
.btn-danger { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 15px; border: none; border-radius: 7px; background: #A63A2C; color: #FFFFFF; font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; }
.btn-danger:hover { background: #8F3123; }
.del-btn[data-armed] { font-weight: 600; text-decoration: underline; }

/* ---------- statistics page ---------- */
.stat-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }
.schip { background: #FFFFFF; border: 1px solid #E5EAF1; border-radius: 10px; padding: 14px 16px; }
.schip-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: #93A1B5; }
.schip-value { font-size: 19px; font-weight: 700; margin-top: 5px; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.stat-wide { grid-column: 1 / -1; }
.stat-card .card-desc { margin-bottom: 14px; }
.stat-empty { padding: 28px 0 18px; text-align: center; font-size: 12.5px; color: #8B98AB; }
.stat-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 11.5px; color: #5C6B81; }
.stat-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; }
.donut-wrap { display: flex; align-items: center; gap: 18px; }
.donut-wrap svg { width: 180px; flex: none; }
.donut-legend { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.dl-row { display: flex; align-items: baseline; gap: 8px; font-size: 12px; }
.dl-row i { width: 9px; height: 9px; border-radius: 3px; flex: none; align-self: center; }
.dl-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #101E33; }
.dl-val { font-variant-numeric: tabular-nums; font-weight: 600; color: #101E33; }
.dl-pct { width: 34px; text-align: right; font-size: 11px; color: #8B98AB; font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) { .stat-grid { grid-template-columns: 1fr; } }

/* ---------- email intake ---------- */
.mail-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #D7DEE9; margin-left: 6px; vertical-align: 1.5px; }
.mail-dot.on { background: #2E9E63; }

/* ---------- settings subtabs ---------- */
.page-settings { max-width: 1100px; }
.settings-layout { display: flex; gap: 24px; align-items: flex-start; margin-top: 20px; }
.settings-tabs { flex: none; width: 152px; position: sticky; top: 0; display: flex; flex-direction: column; gap: 2px; }
.settings-tab { text-align: left; padding: 9px 14px; border: none; border-left: 2px solid transparent; border-radius: 0 7px 7px 0; background: none; font-family: inherit; font-size: 13.5px; font-weight: 500; color: #5C6B81; cursor: pointer; }
.settings-tab:hover { color: #101E33; background: #F3F6FB; }
.settings-tab.active { color: #17418F; border-left-color: #1F55C4; background: #E9F0FC; font-weight: 600; }
.settings-pages { flex: 1; min-width: 0; }
.settings-page { display: none; }
.settings-page.active { display: block; animation: fcFade 0.15s ease; }
.settings-page .set-card:first-child, .settings-page .set-card2:first-child { margin-top: 0; }

/* ---------- mobile / responsive ---------- */
.menu-btn { display: none; }

@media (max-width: 900px) {
  .menu-btn { display: flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border: 1px solid #D7DEE9; border-radius: 7px; background: #FFFFFF; color: #33415C; cursor: pointer; }
  .sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: 256px; max-width: 82vw; z-index: 90; transform: translateX(-102%); transition: transform 0.2s ease; box-shadow: 0 18px 48px rgba(13, 23, 41, 0.24); }
  .sidebar.open { transform: none; }
  .sb-overlay { position: fixed; inset: 0; background: rgba(13, 23, 41, 0.38); z-index: 89; animation: fcFade 0.15s ease; }
  .topbar { padding: 0 12px; gap: 8px; }
  .tb-co, .tb-sep { display: none; }
  .tb-page { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ro-badge { display: none; }
  .user-name { display: none; }

  .page-dash, .page-sec, .page-settings, .page-reports { padding: 18px 14px 44px; }
  .page-h1 { font-size: 19px; }

  /* dashboard */
  .stats { grid-template-columns: 1fr 1fr; }
  .stat + .stat { border-left: none; }
  .stat:nth-child(2n) { border-left: 1px solid #EEF1F6; }
  .stat:nth-child(n+3) { border-top: 1px solid #EEF1F6; }
  .recent-row { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; padding: 10px 14px; }
  .recent-date { display: none; }

  /* section pages */
  .filters { margin-top: 14px; }
  .search-wrap { width: 100%; }
  .count-text { display: none; }

  /* settings: rail becomes a horizontal scroller */
  .settings-layout { flex-direction: column; gap: 14px; }
  .settings-tabs { position: static; width: 100%; flex-direction: row; overflow-x: auto; gap: 4px; border-bottom: 1px solid #E5EAF1; padding-bottom: 0; }
  .settings-tab { flex: none; border-left: none; border-bottom: 2px solid transparent; border-radius: 7px 7px 0 0; white-space: nowrap; padding: 9px 12px; }
  .settings-tab.active { border-left-color: transparent; border-bottom-color: #1F55C4; }
  .set-grid { grid-template-columns: 1fr; }

  /* forms & modals */
  .form-grid { grid-template-columns: 1fr; }
  .overlay { padding: 10px; }
  .modal { max-height: 94vh; }

  /* statistics */
  .donut-wrap { flex-wrap: wrap; }
  .schip-value { font-size: 16.5px; }

  /* generator + chat */
  .gen-preview-wrap { padding: 12px; }
  .fc-chat-panel { width: calc(100vw - 30px); left: 15px; bottom: 80px; }
  .fc-fab { left: 15px; bottom: 15px; }
}

@media (max-width: 560px) {
  .sec-head .btn-primary, .sec-head .btn-secondary { flex: 1 1 auto; justify-content: center; }
  .rep-row { grid-template-columns: minmax(0, 1.6fr) 90px 52px; }
  .rep-row > :nth-child(2), .rep-row > :nth-child(3) { display: none; }
}
.gen-settings-status { overflow-wrap: anywhere; }