:root {
    color-scheme: light;
    --ink: #202d39;
    --muted: #84909c;
    --teal: #159d92;
    --teal-dark: #087c73;
    --line: #edf0f2;
    --paper: #f7f9fa;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); font-family: "DM Sans", sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
.material-symbols-rounded { font-size: 21px; font-weight: normal; line-height: 1; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font: 800 22px/1 "Manrope", sans-serif; letter-spacing: -1.1px; text-decoration: none; }
.brand-logo { display: block; width: 112px; height: 88px; border-radius: 12px; object-fit: contain; }
.brand-mark { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; color: white; background: var(--teal); }
.brand-mark .material-symbols-rounded { font-size: 20px; }
.brand-period { color: #41c3ad; }
.eyebrow { display: block; color: #99a4ac; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; }
.text-teal { color: var(--teal); }
.primary-button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 9px; padding: 0 16px; background: var(--teal); color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer; transition: background .2s, transform .2s; }
.primary-button:hover { background: var(--teal-dark); transform: translateY(-1px); }
.primary-button .material-symbols-rounded { font-size: 19px; }

/* Sign in */
.login-page { min-height: 100vh; background: radial-gradient(ellipse at 78% 18%, #e4f4ef 0, transparent 38%), radial-gradient(ellipse at 42% 93%, #eef3ff 0, transparent 45%), #f7f9fc; }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(380px, .92fr) 1.08fr; }
.login-story { position: relative; display: flex; min-height: 100vh; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 44px clamp(35px, 6vw, 88px); background: #123b3c; color: #fff; }
.login-story > .brand-light { align-self: center; }
.brand-light { z-index: 1; color: #fff; }
.brand-light .brand-mark { background: #31b9a6; }
.login-story .brand-logo { width: 132px; height: 132px; }
.story-copy { position: relative; z-index: 1; max-width: 470px; margin: auto 0; padding: 85px 0 100px; }
.story-copy .eyebrow { color: #80d7c7; }
.story-copy h1 { margin: 22px 0 18px; font: 700 clamp(38px, 4vw, 57px)/1.13 "Manrope", sans-serif; letter-spacing: -2.8px; }
.story-copy h1 span { color: #75d7c4; }
.story-copy p { max-width: 395px; margin: 0; color: #c0d2d0; font-size: 15px; line-height: 1.8; }
.story-note { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; color: #c0d2d0; font-size: 12px; }
.story-note .material-symbols-rounded { color: #75d7c4; font-size: 18px; }
.story-orb { position: absolute; width: 370px; height: 370px; border: 1px solid rgba(135, 220, 202, .1); border-radius: 50%; pointer-events: none; }
.story-orb-one { right: -170px; top: 20%; box-shadow: 0 0 0 42px rgba(135, 220, 202, .025), 0 0 0 84px rgba(135, 220, 202, .02); }
.story-orb-two { left: -260px; bottom: -240px; width: 500px; height: 500px; box-shadow: 0 0 0 45px rgba(135, 220, 202, .025); }
.login-panel { position: relative; display: flex; min-height: 100vh; flex-direction: column; justify-content: center; padding: 72px clamp(36px, 8vw, 128px); }
.login-form-wrap { width: 100%; max-width: 435px; margin: 0 auto; border: 1px solid rgba(255, 255, 255, .82); border-radius: 22px; padding: 38px; background: rgba(255, 255, 255, .66); box-shadow: 0 24px 80px rgba(35, 57, 70, .10), inset 0 1px 0 rgba(255, 255, 255, .9); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }
.login-form-wrap h2 { margin: 13px 0 7px; font: 700 27px/1.3 "Manrope", sans-serif; letter-spacing: -.9px; }
.form-intro { margin: 0 0 30px; color: var(--muted); font-size: 13px; }
.login-form { display: flex; flex-direction: column; gap: 10px; }
.login-form label, .field-group label { margin-top: 5px; color: #475562; font-size: 12px; font-weight: 700; }
.input-wrap { display: flex; height: 48px; align-items: center; gap: 10px; border: 1px solid #e3e8eb; border-radius: 8px; padding: 0 12px; color: #a4aeb5; transition: border .2s, box-shadow .2s; }
.input-wrap:focus-within, .field-group input:focus, .field-group select:focus, .field-group textarea:focus { border-color: #56bdb0; outline: 0; box-shadow: 0 0 0 3px rgba(21, 157, 146, .1); }
.input-wrap > .material-symbols-rounded { font-size: 19px; }
.input-wrap input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--ink); font-size: 13px; }
.input-wrap input::placeholder { color: #b6bec4; }
.password-toggle { display: grid; flex: 0 0 28px; place-items: center; border: 0; padding: 4px; background: transparent; color: #8e9aa3; cursor: pointer; }
.password-toggle .material-symbols-rounded { font-size: 19px; }
.login-submit { justify-content: space-between; min-height: 48px; margin-top: 14px; padding: 0 15px; }
.forgot-password-link { align-self: flex-end; margin: 0 1px 1px; color: #168f84; font-size: 11px; font-weight: 600; text-decoration: none; }
.forgot-password-link:hover { color: #087c73; text-decoration: underline; }
.auth-back-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 18px; color: #168f84; font-size: 11px; font-weight: 600; text-decoration: none; }
.auth-back-link .material-symbols-rounded { font-size: 16px; }
.form-success { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 18px; border: 1px solid #d6eee8; border-radius: 8px; padding: 11px 12px; background: #f2fbf8; color: #247a67; font-size: 12px; line-height: 1.55; }
.form-success .material-symbols-rounded { flex: 0 0 auto; font-size: 18px; }
.login-help { margin: 25px 0 0; color: #939da5; font-size: 11px; text-align: center; }
.login-footer { position: absolute; bottom: 22px; right: 30px; color: #a0aab0; font-size: 10px; }
.form-alert { display: flex; align-items: center; gap: 8px; margin: 0 0 18px; border: 1px solid #ffd7d2; border-radius: 8px; padding: 11px 12px; background: #fff7f6; color: #a6453d; font-size: 12px; }
.form-alert .material-symbols-rounded { font-size: 18px; }
.totp-secret-box { display: grid; gap: 10px; margin: 0 0 16px; border: 1px solid #dcebe7; border-radius: 10px; padding: 15px; background: #f5fbf9; }
.totp-secret-box code, .totp-details code { overflow-wrap: anywhere; color: #087c73; font: 700 15px/1.6 "DM Sans", sans-serif; letter-spacing: 1.5px; }
.totp-details { margin: 0 0 16px; color: #74818a; font-size: 11px; }
.totp-details summary { margin-bottom: 8px; cursor: pointer; }
.totp-details code { display: block; font-size: 10px; letter-spacing: 0; }
.mobile-brand { display: none; }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; border: 1px solid rgba(126, 145, 157, .2); border-radius: 10px; padding: 0 11px; background: rgba(255, 255, 255, .65); color: #566671; font-size: 11px; font-weight: 600; cursor: pointer; transition: background .2s, border .2s, color .2s; }
.theme-toggle:hover { border-color: rgba(21, 157, 146, .45); background: #fff; color: var(--teal-dark); }
.theme-toggle .material-symbols-rounded { font-size: 18px; }
.login-theme-toggle { position: absolute; top: 24px; right: 30px; }

html[data-theme="dark"] { color-scheme: dark; --ink: #e5edf0; --muted: #a2b0b7; --line: #283941; --paper: #111c21; }
html[data-theme="dark"] body.login-page { background: radial-gradient(ellipse at 78% 18%, #17332f 0, transparent 38%), radial-gradient(ellipse at 42% 93%, #1d2639 0, transparent 45%), #11191e; }
html[data-theme="dark"] .login-form-wrap { border-color: rgba(173, 202, 202, .15); background: rgba(26, 39, 44, .76); box-shadow: 0 24px 80px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .06); }
html[data-theme="dark"] .login-form-wrap h2, html[data-theme="dark"] .login-form label { color: #e5edf0; }
html[data-theme="dark"] .form-intro, html[data-theme="dark"] .login-help { color: #a2b0b7; }
html[data-theme="dark"] .forgot-password-link, html[data-theme="dark"] .auth-back-link { color: #70d0c2; }
html[data-theme="dark"] .form-success { border-color: #31544f; background: #1c3733; color: #a4dfd4; }
html[data-theme="dark"] .totp-secret-box { border-color: #31544f; background: #1c3733; }
html[data-theme="dark"] .totp-secret-box code, html[data-theme="dark"] .totp-details code { color: #8cdbcf; }
html[data-theme="dark"] .totp-details { color: #a2b0b7; }
html[data-theme="dark"] .input-wrap { border-color: #3a4a51; background: rgba(14, 24, 29, .52); }
html[data-theme="dark"] .input-wrap input { background: transparent; color: #edf4f5; }
html[data-theme="dark"] .input-wrap input::placeholder { color: #82929a; }
html[data-theme="dark"] .theme-toggle { border-color: #3b4d53; background: rgba(30, 44, 49, .8); color: #cbd7da; }
html[data-theme="dark"] .theme-toggle:hover { border-color: #54b8ad; background: #263b3e; color: #9be0d5; }
html[data-theme="dark"] .login-footer { color: #92a1a7; }
html[data-theme="dark"] body.dashboard-page { background: var(--paper); color: var(--ink); }
html[data-theme="dark"] .sidebar, html[data-theme="dark"] .panel, html[data-theme="dark"] .stat-card, html[data-theme="dark"] .topbar { border-color: var(--line); background: #19262c; }
html[data-theme="dark"] .sidebar-tip, html[data-theme="dark"] .insight-note { background: #202e34; color: #a4b2b8; }
html[data-theme="dark"] .admin-submenu { border-color: #3a514d; }
html[data-theme="dark"] .admin-nav-toggle { background: transparent; }
html[data-theme="dark"] .submenu-chevron { color: #9caaaf; }
html[data-theme="dark"] .admin-submenu-link { color: #a4b2b8; }
html[data-theme="dark"] .admin-submenu-link:hover, html[data-theme="dark"] .admin-submenu-link.active { color: #70d0c2; }
html[data-theme="dark"] .role-admin { background: #203b3a; color: #70d0c2; }
html[data-theme="dark"] .role-user { background: #302b43; color: #c3b3fa; }
html[data-theme="dark"] .user-email-cell { color: #dce7e9; }
html[data-theme="dark"] .icon-action { background: #233238; color: #c0d0d3; }
html[data-theme="dark"] .icon-action:hover { background: #29443f; color: #83d8cb; }
html[data-theme="dark"] .delete-action { background: #402b2b; color: #efa49c; }
html[data-theme="dark"] .delete-action:hover { background: #51312f; color: #ffb8ae; }
html[data-theme="dark"] .disabled-action { background: #263238; color: #77878d; }
html[data-theme="dark"] .secondary-button { border-color: #3b4d53; color: #cbd7da; }
html[data-theme="dark"] .secondary-button:hover { background: #26383e; }
html[data-theme="dark"] .permission-fieldset { border-color: #33454a; }
html[data-theme="dark"] .permission-fieldset legend { color: #dce7e9; }
html[data-theme="dark"] .permission-fieldset > p { color: #a2b0b7; }
html[data-theme="dark"] .permission-option { border-color: #33454a; }
html[data-theme="dark"] .permission-option:has(input:checked) { border-color: #386c65; background: #203b3a; }
html[data-theme="dark"] .permission-option strong { color: #dce7e9; }
html[data-theme="dark"] .permission-option small { color: #a2b0b7; }
html[data-theme="dark"] .nav-link { color: #a4b2b8; }
html[data-theme="dark"] .nav-link:hover { background: #233238; color: #d8e5e7; }
html[data-theme="dark"] .nav-link.active { background: #203b3a; color: #6dd1c2; }
html[data-theme="dark"] .user-details strong, html[data-theme="dark"] .breadcrumb strong, html[data-theme="dark"] .panel-heading h2, html[data-theme="dark"] .stat-value, html[data-theme="dark"] td, html[data-theme="dark"] .donut-center strong { color: #dce7e9; }
html[data-theme="dark"] .user-card, html[data-theme="dark"] td, html[data-theme="dark"] th { border-color: #283941; }
html[data-theme="dark"] .stat-primary { border-color: #31544f; background: linear-gradient(130deg, #1b3735, #19262c 80%); }
html[data-theme="dark"] .stat-top, html[data-theme="dark"] .page-heading p, html[data-theme="dark"] .panel-heading p, html[data-theme="dark"] .breadcrumb, html[data-theme="dark"] .period-chip { color: #a3b1b7; }
html[data-theme="dark"] .period-chip { border-color: #33444b; }
html[data-theme="dark"] .chart-wrap canvas, html[data-theme="dark"] .donut-wrap canvas { filter: brightness(.92); }
html[data-theme="dark"] .field-group label { color: #c0cdd1; }
html[data-theme="dark"] .field-group input, html[data-theme="dark"] .field-group select, html[data-theme="dark"] .field-group textarea { border-color: #3a4a51; background: #142127; color: #e1eaec; }
html[data-theme="dark"] .sidebar-toggle { border-color: #3a4a51; background: #19262c; color: #c1ced2; }
html[data-theme="dark"] .top-avatar, html[data-theme="dark"] .avatar { background: #234440; color: #8bdacd; }
html[data-theme="dark"] .page-footer { color: #87959c; }

/* Dashboard */
.dashboard-page { min-height: 100vh; background: var(--paper); }
.app-shell { min-height: 100vh; }
.sidebar { position: fixed; z-index: 5; inset: 0 auto 0 0; display: flex; width: 248px; flex-direction: column; border-right: 1px solid var(--line); padding: 27px 18px 18px; background: #e6f0ee; transition: width .22s ease, transform .22s ease; }
.sidebar-brand { align-self: stretch; justify-content: center; padding: 0; }
.sidebar-brand .brand-logo { width: 76px; height: 62px; }
.sidebar-caption { margin: 49px 10px 12px; color: #a7b0b7; font-size: 9px; font-weight: 700; letter-spacing: 1.45px; }
.side-nav { display: grid; gap: 5px; }
.admin-nav-caption { margin-top: 25px; }
.admin-nav-group { min-width: 0; }
.admin-nav-toggle { width: 100%; border: 0; background: transparent; text-align: left; cursor: pointer; }
.submenu-chevron { margin-left: auto; color: #9aa7a8; font-size: 17px; transition: transform .18s ease; }
.admin-nav-group.is-expanded .submenu-chevron { transform: rotate(180deg); }
.admin-submenu { display: grid; gap: 2px; margin: 3px 0 7px 43px; padding-left: 12px; border-left: 1px solid #cfdfdb; }
.admin-submenu[hidden] { display: none; }
.admin-submenu-link { overflow: hidden; padding: 7px 0; color: #74857f; font-size: 10px; font-weight: 600; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.admin-submenu-link:hover, .admin-submenu-link.active { color: #168d82; }
.nav-link { display: flex; min-height: 44px; align-items: center; gap: 13px; border-radius: 8px; padding: 0 12px; color: #76838d; font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background .18s, color .18s; }
.nav-link:hover { background: #f5f8f8; color: #3c5555; }
.nav-link.active { background: #e9f6f4; color: #168d82; }
.nav-link .material-symbols-rounded { font-size: 20px; }
.sidebar-bottom { margin-top: auto; }
.sidebar-tip { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 17px; border-radius: 9px; padding: 12px 10px; background: #f5f8f7; color: #7d8a91; font-size: 10px; line-height: 1.55; }
.sidebar-tip .material-symbols-rounded { flex: 0 0 auto; color: #e1a84a; font-size: 17px; }
.user-card { display: flex; min-width: 0; align-items: center; gap: 9px; border-top: 1px solid var(--line); padding: 15px 2px 2px; }
.avatar, .top-avatar { display: grid; flex: 0 0 32px; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: #e3f2ef; color: #168e83; font-size: 12px; font-weight: 700; }
.user-details { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
.user-details strong { overflow: hidden; color: #3e4d58; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.user-details small { color: #9aa4aa; font-size: 9px; }
.logout-icon { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; border-radius: 6px; color: #8b969e; }
.logout-icon:hover { background: #f5f7f8; color: #c2564b; }
.logout-icon .material-symbols-rounded { font-size: 18px; }
.sidebar-toggle { position: absolute; top: 31px; right: -14px; display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid #e7ecee; border-radius: 50%; background: #fff; color: #72818a; cursor: pointer; box-shadow: 0 2px 6px #182f3810; }
.sidebar-toggle .material-symbols-rounded { font-size: 16px; }
.main-content { min-height: 100vh; margin-left: 248px; transition: margin-left .22s ease; }
.topbar { position: sticky; z-index: 3; top: 0; display: flex; height: 70px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 0 39px; background: rgba(255,255,255,.94); backdrop-filter: blur(10px); }
.breadcrumb { color: #99a3aa; font-size: 11px; }
.breadcrumb span { margin: 0 8px; color: #c8cfd3; }
.breadcrumb strong { color: #465560; font-weight: 600; }
.topbar-right { display: flex; align-items: center; gap: 15px; }
.period-chip { display: flex; align-items: center; gap: 7px; border: 1px solid #ebeff1; border-radius: 7px; padding: 8px 10px; color: #64727d; font-size: 10px; font-weight: 600; }
.period-chip .material-symbols-rounded { color: #83929a; font-size: 16px; }
.top-avatar { width: 30px; height: 30px; flex-basis: 30px; font-size: 11px; }
.mobile-menu { display: none; border: 0; background: transparent; color: var(--ink); }
.content-wrap { width: min(100%, 1450px); margin: 0 auto; padding: 34px 39px 20px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 25px; }
.page-heading h1 { margin: 8px 0 4px; font: 700 25px/1.3 "Manrope", sans-serif; letter-spacing: -.9px; }
.page-heading p, .panel-heading p { margin: 0; color: #8c98a0; font-size: 11px; }
.wave { color: #e3b35c; font-size: 20px; }
.add-record-link { min-height: 38px; padding: 0 13px; font-size: 11px; }
.add-record-link .material-symbols-rounded { font-size: 17px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.stat-card { min-width: 0; border: 1px solid #edf0f2; border-radius: 10px; padding: 17px 17px 14px; background: #fff; box-shadow: 0 3px 12px rgba(26, 55, 68, .025); }
.stat-primary { border-color: #d8eeeb; background: linear-gradient(130deg, #f1faf8, #fff 80%); }
.stat-top { display: flex; align-items: center; justify-content: space-between; color: #687680; font-size: 11px; font-weight: 600; }
.stat-icon { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 8px; background: #e1f4f0; color: #14998d; }
.stat-icon .material-symbols-rounded { font-size: 18px; }
.icon-mint { background: #e8f5ef; color: #40a877; }
.icon-lilac { background: #f0edfc; color: #8871d0; }
.icon-amber { background: #fff4e3; color: #d89534; }
.stat-value { overflow: hidden; margin-top: 12px; color: #293944; font: 700 clamp(17px, 1.5vw, 22px)/1.2 "Manrope", sans-serif; letter-spacing: -.7px; text-overflow: ellipsis; white-space: nowrap; }
.stat-foot { display: flex; min-height: 15px; align-items: center; gap: 4px; margin-top: 9px; color: #9aa4aa; font-size: 9px; }
.stat-foot .material-symbols-rounded { font-size: 13px; }
.charts-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(265px, 1fr); gap: 14px; margin-top: 16px; }
.panel { min-width: 0; border: 1px solid #edf0f2; border-radius: 10px; background: #fff; box-shadow: 0 3px 12px rgba(26, 55, 68, .025); }
.chart-panel, .insight-panel { padding: 19px 19px 15px; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel-heading h2 { margin: 0 0 4px; color: #34434e; font: 700 13px/1.4 "Manrope", sans-serif; letter-spacing: -.15px; }
.panel-heading p { font-size: 10px; }
.panel-more { color: #a6b0b6; }
.chart-wrap { position: relative; height: 218px; margin-top: 11px; }
.insight-heading-icon { color: #1da295; }
.vat-position { display: flex; min-height: 204px; align-items: center; justify-content: space-around; gap: 12px; }
.donut-wrap { position: relative; width: 145px; height: 145px; flex: 0 0 145px; }
.donut-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; pointer-events: none; }
.donut-center span { color: #a0aab0; font-size: 8px; font-weight: 700; letter-spacing: .8px; }
.donut-center strong { max-width: 125px; overflow: hidden; margin-top: 5px; color: #34434e; font: 700 14px "Manrope", sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.legend-list { display: grid; gap: 14px; min-width: 120px; }
.legend-list > div { display: grid; grid-template-columns: 9px 1fr; align-items: center; gap: 5px 7px; color: #7c8992; font-size: 9px; }
.legend-list strong { grid-column: 2; color: #3e4c56; font-size: 10px; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; }
.dot-teal { background: #16a69a; }
.dot-purple { background: #c6b8fa; }
.insight-note { display: flex; align-items: center; gap: 6px; border-radius: 7px; padding: 9px; background: #f7f9fa; color: #929da4; font-size: 9px; }
.insight-note .material-symbols-rounded { color: #d9a44c; font-size: 15px; }
.transactions-panel { margin-top: 16px; padding: 18px 19px 4px; }
.transaction-heading { margin-bottom: 13px; }
.text-link { display: inline-flex; align-items: center; gap: 3px; color: #168f84; font-size: 10px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.text-link .material-symbols-rounded { font-size: 15px; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; white-space: nowrap; }
th { border-bottom: 1px solid #eff1f3; padding: 10px 8px; color: #a2abb1; font-size: 8px; font-weight: 700; letter-spacing: .7px; }
td { border-bottom: 1px solid #f1f3f4; padding: 12px 8px; color: #687680; font-size: 10px; }
tbody tr:last-child td { border-bottom: 0; }
.reference-cell { color: #3c4c57; font-weight: 700; }
.type-pill { display: inline-flex; border-radius: 20px; padding: 4px 8px; font-size: 9px; font-weight: 600; }
.type-sale { background: #e8f6f2; color: #269679; }
.type-purchase { background: #f0edfb; color: #826cc2; }
.empty-state { padding: 28px 8px; color: #929da4; text-align: center; white-space: normal; }
.add-record-panel { margin-top: 16px; padding: 18px 19px 20px; }
.record-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; gap: 12px; margin-top: 14px; }
.product-rate-form { grid-template-columns: minmax(180px, 2fr) minmax(150px, 1fr) auto; }
.company-editor-form { grid-template-columns: minmax(200px, 1fr) auto; }
.product-rate-cancel { display: inline-block; margin-top: 12px; }
.product-delete-form { display: inline; }
.product-delete-button { margin-left: 10px; border: 0; background: transparent; cursor: pointer; }
.field-group { display: grid; gap: 7px; min-width: 0; }
.field-group label { margin: 0; font-size: 10px; }
.field-group input, .field-group select { width: 100%; height: 38px; min-width: 0; border: 1px solid #e6eaec; border-radius: 7px; padding: 0 10px; background: #fff; color: #4f5e68; font-size: 11px; }
.field-group textarea { width: 100%; min-width: 0; border: 1px solid #e6eaec; border-radius: 7px; padding: 9px 10px; background: #fff; color: #4f5e68; font: inherit; font-size: 11px; resize: vertical; }
.field-group input::placeholder { color: #b5bec4; }
.field-group textarea::placeholder { color: #b5bec4; }
.vat-preview-field output { display: flex; height: 38px; align-items: center; color: #168f84; font-size: 13px; font-weight: 700; }
.save-record { min-height: 38px; font-size: 11px; }
.page-footer { padding: 19px 0 4px; color: #a5afb5; font-size: 9px; text-align: center; }
.page-footer span { padding: 0 4px; color: #d3d9dc; }
.notice { display: flex; align-items: center; gap: 8px; margin: -9px 0 16px; border: 1px solid #d6eee8; border-radius: 8px; padding: 10px 12px; background: #f2fbf8; color: #247a67; font-size: 11px; }
.notice .material-symbols-rounded { font-size: 17px; }
.notice-error { border-color: #f4d7d2; background: #fff7f6; color: #a6453d; }
.users-table-panel, .user-editor-panel { margin-top: 16px; padding: 19px; }
.users-list-heading { margin-bottom: 13px; }
.user-email-cell { color: #3c4c57; font-weight: 700; }
.role-pill { display: inline-flex; border-radius: 20px; padding: 5px 9px; font-size: 9px; font-weight: 700; }
.role-admin { background: #e7f4f1; color: #168d82; }
.role-user { background: #f0edfb; color: #826cc2; }
.user-actions { display: flex; align-items: center; gap: 7px; }
.user-actions form { margin: 0; }
.icon-action { display: inline-grid; width: 30px; height: 30px; place-items: center; border: 0; border-radius: 7px; background: #f2f7f6; color: #5f7772; cursor: pointer; text-decoration: none; }
.icon-action:hover { background: #e5f2ef; color: #168d82; }
.icon-action .material-symbols-rounded { font-size: 17px; }
.delete-action { background: #fff3f1; color: #bd5c51; }
.delete-action:hover { background: #ffe6e2; color: #a63f35; }
.disabled-action { background: #f1f3f4; color: #b0b8bd; cursor: not-allowed; }
.user-editor-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.permission-fieldset { display: grid; grid-column: 1 / -1; gap: 12px; min-width: 0; margin: 2px 0 0; border: 1px solid #e5ecea; border-radius: 9px; padding: 15px; }
.permission-fieldset[hidden] { display: none; }
.permission-fieldset legend { padding: 0 5px; color: #34434e; font: 700 12px "Manrope", sans-serif; }
.permission-fieldset > p { margin: -5px 0 0; color: #8c98a0; font-size: 10px; }
.permission-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.permission-option { display: flex; min-width: 0; align-items: flex-start; gap: 8px; border: 1px solid #e8eeee; border-radius: 8px; padding: 10px; cursor: pointer; }
.permission-option:has(input:checked) { border-color: #9bd3cb; background: #f1faf8; }
.permission-option input { width: 15px; height: 15px; flex: 0 0 auto; margin: 2px 0 0; accent-color: #159d92; }
.permission-option > span { display: grid; min-width: 0; gap: 3px; }
.permission-option strong { color: #46555f; font-size: 10px; }
.permission-option small { color: #87949b; font-size: 9px; line-height: 1.45; }
.user-editor-actions { display: flex; grid-column: 1 / -1; align-items: center; gap: 10px; }
.secondary-button { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; border: 1px solid #e1e8e8; border-radius: 8px; padding: 0 15px; background: transparent; color: #66757c; font-size: 11px; font-weight: 700; text-decoration: none; }
.secondary-button:hover { background: #f5f8f8; }
.sidebar-collapsed .sidebar { width: 76px; padding-right: 13px; padding-left: 13px; }
.sidebar-collapsed .sidebar-brand { justify-content: center; padding: 0; }
.sidebar-collapsed .sidebar-brand .brand-logo { width: 48px; height: 48px; }
.sidebar-collapsed .sidebar-caption, .sidebar-collapsed .nav-label, .sidebar-collapsed .tip-copy, .sidebar-collapsed .user-details, .sidebar-collapsed .logout-icon { display: none; }
.sidebar-collapsed .admin-submenu { display: none; }
.sidebar-collapsed .side-nav { margin-top: 49px; }
.sidebar-collapsed .nav-link { justify-content: center; padding: 0; }
.sidebar-collapsed .sidebar-tip { justify-content: center; padding: 10px 0; }
.sidebar-collapsed .user-card { justify-content: center; }
.sidebar-collapsed .main-content { margin-left: 76px; }

@media (max-width: 900px) {
    .login-shell { grid-template-columns: 1fr; }
    .login-story { display: none; }
    .login-panel { min-height: 100vh; min-height: 100svh; padding: 72px 24px 60px; }
    .mobile-brand { display: inline-flex; margin-bottom: 28px; }
    .mobile-brand .brand-logo { width: 112px; height: 88px; }
    .login-form-wrap { max-width: min(100%, 435px); }
}

@media (max-width: 1100px) {
    .sidebar { width: 220px; }
    .main-content { margin-left: 220px; }
    .content-wrap { padding-right: 25px; padding-left: 25px; }
    .topbar { padding-right: 25px; padding-left: 25px; }
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .charts-grid { grid-template-columns: minmax(0, 1fr); }
    .record-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .user-editor-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .permission-options { grid-template-columns: 1fr; }
    .sidebar-collapsed .main-content { margin-left: 76px; }
}
@media (max-width: 760px) {
    .login-shell { grid-template-columns: 1fr; }
    .login-panel { min-height: 100vh; min-height: 100svh; padding: 35px 20px 60px; }
    .mobile-brand { display: inline-flex; margin-bottom: 35px; }
    .mobile-brand .brand-logo { width: 125px; height: 94px; }
    .login-form-wrap { padding: 30px 25px; }
    .login-footer { right: 0; left: 0; text-align: center; }
    .sidebar { width: 248px; transform: translateX(-100%); box-shadow: 8px 0 30px rgba(19, 46, 52, .09); }
    .mobile-sidebar-open .sidebar { transform: translateX(0); }
    .main-content, .sidebar-collapsed .main-content { margin-left: 0; }
    .sidebar-toggle { display: none; }
    .sidebar-collapsed .sidebar { width: 248px; padding-right: 18px; padding-left: 18px; }
    .sidebar-collapsed .sidebar-brand { justify-content: center; padding: 0; }
    .sidebar-collapsed .sidebar-caption, .sidebar-collapsed .nav-label, .sidebar-collapsed .tip-copy, .sidebar-collapsed .user-details, .sidebar-collapsed .logout-icon { display: initial; }
    .sidebar-collapsed .sidebar-brand .brand-logo { width: 76px; height: 62px; }
    .sidebar-collapsed .side-nav { margin-top: 0; }
    .sidebar-collapsed .nav-link { justify-content: flex-start; padding: 0 12px; }
    .sidebar-collapsed .sidebar-tip { justify-content: flex-start; padding: 12px 10px; }
    .sidebar-collapsed .user-card { justify-content: flex-start; }
    .topbar { height: 60px; padding: 0 17px; }
    .mobile-menu { display: grid; place-items: center; padding: 5px; }
    .mobile-menu .material-symbols-rounded { font-size: 22px; }
    .breadcrumb { flex: 1; margin-left: 9px; }
    .period-chip { padding: 7px; font-size: 9px; }
    .period-chip .material-symbols-rounded { display: none; }
    .topbar-right .theme-toggle { min-height: 30px; padding: 0 7px; }
    .topbar-right .theme-toggle-label { display: none; }
    .topbar-right { gap: 9px; }
    .content-wrap { padding: 25px 16px 15px; }
    .page-heading { align-items: flex-start; }
    .page-heading h1 { font-size: 22px; }
    .page-heading p { max-width: 240px; line-height: 1.5; }
    .add-record-link { min-height: 34px; padding: 0 9px; font-size: 10px; white-space: nowrap; }
    .stats-grid { gap: 9px; }
    .stat-card { padding: 13px 12px 11px; }
    .stat-top { font-size: 10px; }
    .stat-icon { width: 26px; height: 26px; }
    .stat-icon .material-symbols-rounded { font-size: 16px; }
    .stat-value { font-size: 17px; }
    .stat-foot { font-size: 8px; }
    .charts-grid { grid-template-columns: 1fr; gap: 10px; margin-top: 10px; }
    .chart-panel, .insight-panel { padding: 15px; }
    .chart-wrap { height: 205px; }
    .vat-position { min-height: 185px; }
    .transactions-panel, .add-record-panel { margin-top: 10px; padding-right: 13px; padding-left: 13px; }
    .record-form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .product-rate-form { grid-template-columns: minmax(0, 1fr); }
    .company-editor-form { grid-template-columns: minmax(0, 1fr); }
    .user-editor-form { grid-template-columns: minmax(0, 1fr); }
    .save-record { grid-column: 1 / -1; }
}
@media (max-width: 390px) {
    .period-chip { display: none; }
    .page-heading { gap: 8px; }
    .page-heading h1 { font-size: 20px; }
    .add-record-link { font-size: 0; }
    .add-record-link .material-symbols-rounded { font-size: 18px; }
    .vat-position { flex-direction: column; gap: 14px; padding: 14px 0; }
    .legend-list { width: min(100%, 240px); min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}