@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');

:root { --ink:#182033; --ink-soft:#58657a; --nav:#11192b; --line:#e7ebf1; --canvas:#f6f7fb; --surface:#fff; --teal:#087e8b; --gold:#eba33f; --green:#10846f; --red:#cf5c59; font-family:'DM Sans',ui-sans-serif,system-ui,sans-serif; color:var(--ink); background:var(--canvas); }
* { box-sizing:border-box; }
body { min-width:320px; margin:0; background:var(--canvas); }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }

/* Authentication */
.login { min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at 10% 15%,rgba(30,150,158,.23),transparent 28%),radial-gradient(circle at 92% 85%,rgba(235,163,63,.17),transparent 25%),#10192b; }
.panel { width:min(100%,440px); padding:42px; border:1px solid rgba(255,255,255,.13); border-radius:24px; color:white; background:rgba(22,35,58,.82); box-shadow:0 32px 90px rgba(0,0,0,.34); backdrop-filter:blur(18px); }
.logo { display:flex; align-items:center; gap:11px; font:800 24px/1 'Manrope',sans-serif; letter-spacing:-.05em; }
.logo::before { content:'L'; display:grid; place-items:center; width:28px; height:28px; border-radius:9px; color:#192037; background:linear-gradient(135deg,#f4c263,#dc8e26); font-size:15px; }
.panel h1 { margin:34px 0 9px; color:#fff; font:700 29px/1.16 'Manrope',sans-serif; letter-spacing:-.05em; }
.panel p { color:#afbed2; line-height:1.55; }
.panel input { color:#f8fafc !important; -webkit-text-fill-color:#f8fafc; caret-color:#f4c263; background:#0d1728; border-color:rgba(255,255,255,.26); font-weight:600; }
.panel input::placeholder { color:#b8c5d5; -webkit-text-fill-color:#b8c5d5; opacity:1; }
.panel input:focus { color:#f8fafc !important; -webkit-text-fill-color:#f8fafc; background:#0d1728; border-color:#63c5cc; box-shadow:0 0 0 3px rgba(99,197,204,.18); }
.panel .btn { width:100%; }

/* Application shell */
.shell { min-height:100vh; display:grid; grid-template-columns:272px minmax(0,1fr); }
.side { position:sticky; top:0; display:flex; flex-direction:column; height:100vh; padding:24px 14px 16px; overflow-y:auto; color:#dfe8f5; background:linear-gradient(180deg,#10182b 0%,#121d32 100%); }
.brand { display:flex; align-items:center; gap:10px; padding:5px 12px 22px; color:white; }
.brand-emblem { display:grid; place-items:center; width:29px; height:29px; border-radius:9px; color:#1a2338; background:linear-gradient(135deg,#f5c46a,#da8c27); font:800 16px/1 'Manrope',sans-serif; box-shadow:0 6px 15px rgba(235,163,63,.2); }
.brand strong { display:block; font:800 18px/1 'Manrope',sans-serif; letter-spacing:-.055em; }
.brand small { display:block; margin-top:6px; color:#8291aa; font-size:8.5px; font-weight:800; letter-spacing:.13em; }
.unit-select { display:flex; align-items:center; gap:9px; margin:0 6px 20px; padding:10px; border:1px solid rgba(220,232,247,.09); border-radius:12px; background:rgba(255,255,255,.04); }
.unit-badge { display:grid; place-items:center; flex:0 0 auto; width:29px; height:29px; border-radius:9px; color:#9ee5e7; background:#174352; font-size:9px; font-weight:800; }
.unit-select div { min-width:0; flex:1; }.unit-select small { display:block; margin-bottom:3px; color:#7e8da5; font-size:8px; font-weight:800; letter-spacing:.1em; }.unit-select strong { display:block; overflow:hidden; color:#e7eef9; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }.chevron { color:#7f91a9; font-size:16px; }
.menu { display:grid; gap:3px; }.nav-group { border-radius:10px; }.nav-group summary { display:flex; align-items:center; gap:9px; min-height:36px; padding:7px 10px; list-style:none; cursor:pointer; border-radius:9px; color:#aab8cd; font-size:11.5px; font-weight:700; transition:background .16s ease,color .16s ease; }.nav-group summary::-webkit-details-marker { display:none; }.nav-group summary::after { content:'›'; margin-left:auto; color:#71819a; font-size:19px; font-weight:400; transition:transform .18s ease; }.nav-group[open] summary { color:#edf4fd; background:rgba(255,255,255,.045); }.nav-group[open] summary::after { color:#88c7ce; transform:rotate(90deg); }.group-symbol { display:grid; place-items:center; width:17px; color:#89d3d7; font-size:11px; font-weight:800; }.nav-group-items { display:grid; gap:1px; padding:3px 0 7px 36px; }
.side a { position:relative; display:flex; align-items:center; min-height:32px; padding:7px 11px; border-radius:8px; color:#8392a9; font-size:11.5px; font-weight:600; text-decoration:none; transition:color .16s ease,background .16s ease; }.side a:hover { color:#f1f5fb; background:rgba(255,255,255,.055); }.side a.active { color:#fff; background:linear-gradient(90deg,rgba(28,136,152,.28),rgba(31,117,152,.11)); }.side a.active::before { position:absolute; left:-36px; width:3px; height:18px; border-radius:3px; content:''; background:var(--gold); }
.sidebar-footer { margin-top:auto; padding:18px 6px 0; }.support-card { display:flex; align-items:center; gap:9px; padding:11px; border-radius:11px; background:rgba(34,63,93,.55); }.support-card>span { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; color:#0f1b30; background:#91d4d8; font-size:13px; font-weight:800; }.support-card strong,.support-card small { display:block; }.support-card strong { color:#e9f1fb; font-size:10px; }.support-card small { margin-top:3px; color:#8496af; font-size:9px; }.logout { width:100%; margin-top:11px; padding:9px 10px; border:0; border-radius:8px; color:#94a4bb; background:transparent; text-align:left; font-size:11px; font-weight:700; }.logout:hover { color:white; background:rgba(255,255,255,.05); }.logout span { margin-right:7px; font-size:14px; }

/* Topbar and main content */
.main-area { min-width:0; }.topbar { position:sticky; z-index:5; top:0; display:flex; align-items:center; justify-content:space-between; min-height:70px; padding:0 clamp(24px,4vw,56px); border-bottom:1px solid var(--line); background:rgba(255,255,255,.88); backdrop-filter:blur(14px); }.topbar-context,.topbar-actions { display:flex; align-items:center; }.topbar-context { gap:9px; color:#718096; font-size:11px; font-weight:600; }.topbar-context strong { color:#2e3a4f; }.topbar-context i { color:#bdc6d2; font-style:normal; }.context-dot { width:7px; height:7px; border-radius:50%; background:#22a893; box-shadow:0 0 0 3px #dff5f0; }.topbar-actions { gap:10px; }.today { color:#8895a7; font-size:10.5px; font-weight:600; }.circle-action { display:grid; place-items:center; width:34px; height:34px; padding:0; border:1px solid #e3e9ef; border-radius:9px; color:#536277; background:white; font-size:18px; }.primary-action,.secondary-action,.outline-action { border:0; border-radius:9px; font-weight:700; }.primary-action { min-height:35px; padding:0 13px; color:white; background:linear-gradient(135deg,#0d8a97,#087683); box-shadow:0 7px 14px rgba(8,126,139,.18); font-size:11px; }.primary-action span { margin-right:3px; font-size:14px; }
.content { width:min(1470px,100%); margin:0 auto; padding:38px clamp(24px,4vw,56px) 64px; }.message { display:none; margin:0 0 20px; padding:12px 14px; border:1px solid #b9e6dd; border-radius:10px; color:#166554; background:#ecfaf6; font-size:12px; font-weight:600; }.message:not(:empty) { display:block; }

/* Dashboard */
.page-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:27px; }.eyebrow { display:block; margin-bottom:8px; color:#8591a5; font-size:9px; font-weight:800; letter-spacing:.12em; }h1,h2 { font-family:'Manrope',sans-serif; letter-spacing:-.045em; }h1 { margin:0; color:#1a2437; font-size:clamp(27px,3vw,36px); line-height:1.15; }h2 { margin:0; color:#253148; font-size:15px; }.page-heading p { margin:9px 0 0; color:var(--ink-soft); font-size:13px; }.secondary-action { display:inline-flex; align-items:center; gap:10px; min-height:36px; padding:0 12px; border:1px solid #dce4ed; color:#536277; background:white; font-size:11px; }.secondary-action span { color:var(--teal); font-size:15px; }
.balance-banner { display:flex; align-items:center; justify-content:space-between; min-height:166px; margin-bottom:18px; padding:26px 32px; overflow:hidden; border-radius:17px; color:white; background:linear-gradient(112deg,#172e4c 0%,#105b6d 100%); box-shadow:0 18px 38px rgba(17,59,83,.16); }.balance-banner .eyebrow { color:#9fd8dd; }.balance-banner strong { display:block; font:700 clamp(28px,3vw,39px)/1.2 'Manrope',sans-serif; letter-spacing:-.06em; }.balance-banner p { margin:8px 0 0; color:#bed6df; font-size:11.5px; }.balance-orbit { position:relative; display:grid; place-items:center; width:110px; height:110px; border:1px solid rgba(191,232,234,.3); border-radius:50%; }.balance-orbit::before,.balance-orbit span { position:absolute; border-radius:50%; content:''; }.balance-orbit::before { width:75px; height:75px; border:1px solid rgba(244,194,99,.68); }.balance-orbit span { width:9px; height:9px; top:5px; right:20px; background:#f1b55a; box-shadow:0 0 0 5px rgba(241,181,90,.13); }.balance-orbit b { display:grid; place-items:center; width:48px; height:48px; border-radius:50%; color:#173d59; background:#dff1ed; font:800 14px 'Manrope',sans-serif; }
.metric-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:20px; }.metric-card { display:flex; align-items:flex-start; gap:14px; min-height:130px; padding:19px; border:1px solid var(--line); border-radius:14px; background:white; box-shadow:0 5px 16px rgba(31,45,67,.035); }.metric-icon { display:grid; place-items:center; flex:0 0 auto; width:35px; height:35px; border-radius:10px; font-size:17px; font-weight:700; }.income .metric-icon { color:#087462; background:#e1f6f0; }.expense .metric-icon { color:#c05252; background:#fff0ef; }.neutral .metric-icon { color:#3278a2; background:#e9f4fb; }.metric-card small,.metric-card strong,.metric-card span { display:block; }.metric-card small { color:#8290a4; font-size:10px; font-weight:700; }.metric-card strong { margin:8px 0 5px; color:#273348; font:800 21px/1.1 'Manrope',sans-serif; letter-spacing:-.045em; }.metric-card span { color:#a0adbe; font-size:10px; }
.service-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:0 0 18px; }.service-summary article { padding:17px 19px; border:1px solid var(--line); border-radius:13px; background:white; box-shadow:0 5px 16px rgba(31,45,67,.035); }.service-summary small,.service-summary strong { display:block; }.service-summary small { color:#8190a3; font-size:10px; font-weight:700; }.service-summary strong { margin-top:8px; color:#2b384e; font:800 22px/1 'Manrope',sans-serif; letter-spacing:-.05em; }.profit.positive strong { color:var(--green); }.profit.negative strong { color:var(--red); }.service-form { grid-template-columns:repeat(4,minmax(155px,1fr)); }.service-form textarea { grid-column:span 2; }.service-list { display:grid; gap:16px; }.service-card { padding:22px; border:1px solid var(--line); border-radius:15px; background:white; box-shadow:0 5px 16px rgba(31,45,67,.035); }.service-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }.service-card-head .eyebrow { margin-bottom:6px; }.service-card-head h2 { font-size:17px; }.service-card-head p { margin:5px 0 0; color:#8490a2; font-size:11px; }.service-delete { flex:0 0 auto; }.service-numbers { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; margin:20px 0; }.service-numbers>div { padding:13px; border-radius:10px; background:#f7f9fc; }.service-numbers small,.service-numbers strong,.service-numbers span { display:block; }.service-numbers small { color:#8793a5; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }.service-numbers strong { margin:7px 0 5px; color:#2b384e; font:800 17px/1 'Manrope',sans-serif; letter-spacing:-.045em; }.service-numbers span { color:#99a5b5; font-size:9.5px; line-height:1.4; }.expense-section { padding-top:16px; border-top:1px solid #edf0f4; }.expense-title { display:flex; align-items:center; justify-content:space-between; }.expense-title h3 { margin:0; color:#4a586d; font-size:11px; }.expense-title span { color:#69778b; font-size:11px; font-weight:800; }.expense-list { margin:10px 0; }.expense-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:11px; padding:9px 0; border-bottom:1px solid #f0f2f5; }.expense-row strong,.expense-row small { display:block; }.expense-row strong { color:#526074; font-size:10.5px; }.expense-row small { margin-top:3px; color:#9da8b7; font-size:9px; }.expense-row>span { color:#59687d; font-size:10.5px; font-weight:800; }.expense-row .delete { padding:5px 7px; }.empty-expenses { margin:12px 0; color:#94a0b0; font-size:10.5px; }.expense-form { display:grid; grid-template-columns:2fr 1.3fr 1fr 1fr auto; gap:9px; margin-top:13px; }.expense-form input,.expense-form select,.expense-form button { min-height:34px; }.empty-service { padding:22px; color:#8490a2; font-size:11.5px; }
.ledger-forms { display:grid; grid-template-columns:1fr; gap:0; }.ledger-forms .form { margin-bottom:0; border-radius:15px 15px 0 0; }.ledger-forms .transaction-form { margin-top:-1px; border-radius:0 0 15px 15px; }.ledger-help { margin:18px 0; padding:13px 15px; border:1px solid #cae9e6; border-radius:10px; color:#477077; background:#effaf8; font-size:11px; line-height:1.55; }.ledger-help strong { color:#137b81; }.ledger-card .service-numbers { grid-template-columns:repeat(4,minmax(0,1fr)); }.entry-income { color:#0d8a70 !important; }.entry-expense { color:#c05252 !important; }
.sheet-action,.back-to-services { border:0; font:800 11px 'DM Sans',sans-serif; cursor:pointer; }.sheet-action { width:100%; min-height:39px; border-radius:9px; color:#087e8b; background:#ebf8f7; }.sheet-action:hover { background:#dff4f2; }.service-sheet { margin:20px 0 26px; padding:23px; border:1px solid #b9dfdc; border-radius:16px; background:linear-gradient(180deg,#fbfefd,#f3fbfa); }.sheet-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }.back-to-services { display:block; margin:0 0 13px; padding:0; color:#087e8b; background:transparent; }.sheet-heading h2 { font-size:21px; }.sheet-heading p { margin:6px 0 0; color:#748397; font-size:11px; }.sheet-profit { min-width:155px; padding:13px; border-radius:10px; text-align:right; background:white; }.sheet-profit small,.sheet-profit strong { display:block; }.sheet-profit small { color:#8290a4; font-size:9px; font-weight:800; text-transform:uppercase; }.sheet-profit strong { margin-top:6px; font:800 20px 'Manrope',sans-serif; }.sheet-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:20px 0; }.sheet-metrics>div { padding:13px; border:1px solid #dfedec; border-radius:10px; background:white; }.sheet-metrics small,.sheet-metrics strong,.sheet-metrics span { display:block; }.sheet-metrics small { color:#8391a4; font-size:9px; font-weight:800; text-transform:uppercase; }.sheet-metrics strong { margin:7px 0 4px; color:#2b384e; font:800 18px 'Manrope',sans-serif; }.sheet-metrics span { color:#92a0b0; font-size:9px; }.service-sheet-form { margin:0 0 20px; }.sheet-table { overflow-x:auto; padding:18px; border:1px solid #dfedec; border-radius:12px; background:white; }.sheet-table>header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }.sheet-table h3 { margin:0; color:#34445a; font-size:14px; }.sheet-table>header>span { color:#76879c; font-size:10px; font-weight:700; }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(290px,.8fr); gap:18px; }.data-panel { min-width:0; padding:21px; border:1px solid var(--line); border-radius:15px; background:white; box-shadow:0 5px 16px rgba(31,45,67,.035); }.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; }.panel-heading .eyebrow { margin-bottom:6px; }.text-action { border:0; padding:4px; color:var(--teal); background:transparent; font-size:10.5px; font-weight:800; }.table { width:100%; border-collapse:collapse; }.table th { padding:10px 8px; border-bottom:1px solid #edf0f4; color:#9ba6b5; font-size:8.5px; font-weight:800; letter-spacing:.08em; text-align:left; text-transform:uppercase; }.table td { padding:12px 8px; border-bottom:1px solid #f0f2f5; color:#536074; font-size:11px; font-weight:600; }.table tr:last-child td { border:0; }.table button { border:0; border-radius:6px; color:#c45b59; background:#fff2f1; font-size:9px; font-weight:700; padding:6px 8px; }.data-panel>.card { margin:0; padding:18px 0 5px; min-height:72px; color:#8490a2; border:0; box-shadow:none; font-size:11.5px; }.pulse-panel { display:flex; flex-direction:column; }.pulse-item { display:flex; gap:10px; padding:11px 0; border-top:1px solid #eef1f4; }.pulse-icon { display:grid; place-items:center; width:25px; height:25px; border-radius:8px; color:#087d80; background:#e5f7f5; font-size:12px; font-weight:800; }.pulse-item strong { display:block; color:#46546a; font-size:11px; }.pulse-item p { margin:4px 0 0; color:#98a4b4; font-size:10px; line-height:1.4; }.outline-action { width:100%; margin-top:auto; min-height:34px; border:1px solid #dce5ed; color:#536277; background:white; font-size:10px; }

/* Functional screens */
.row { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:25px; }.row p,.content>p { color:var(--ink-soft); font-size:13px; }.tag { padding:5px 8px; border-radius:99px; color:#087d6b; background:#e5f7f1; font-size:10px; font-weight:800; }.form { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; padding:19px; margin:18px 0 24px; border:1px solid var(--line); border-radius:15px; background:white; box-shadow:0 5px 16px rgba(31,45,67,.035); }.form h2 { grid-column:1/-1; font-size:15px; }input,select,textarea { width:100%; min-height:39px; padding:9px 10px; border:1px solid #dfe5ed; border-radius:8px; outline:0; color:#2d394e; background:#fbfcfe; font-size:11px; transition:.16s ease; }input:focus,select:focus,textarea:focus { border-color:#55a8af; background:white; box-shadow:0 0 0 3px rgba(8,126,139,.1); }textarea { min-height:88px; resize:vertical; }.btn,.form button { min-height:39px; padding:9px 13px; border:0; border-radius:8px; color:white; background:linear-gradient(135deg,#0d8a97,#087683); box-shadow:0 6px 13px rgba(8,126,139,.16); font-size:11px; font-weight:800; }.row+.card,.content>.card { padding:20px; border:1px solid var(--line); border-radius:15px; background:white; }.cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:20px 0; }.card { border:1px solid var(--line); border-radius:14px; background:white; box-shadow:0 5px 16px rgba(31,45,67,.035); }.cards .card { min-height:110px; padding:18px; }.cards small { display:block; color:#8290a4; font-size:10px; font-weight:700; }.value { margin-top:12px; color:#273348; font:800 20px 'Manrope',sans-serif; letter-spacing:-.045em; }

@media (max-width:1050px) { .shell { grid-template-columns:236px minmax(0,1fr); }.side { padding-left:10px; padding-right:10px; }.metric-grid { grid-template-columns:1fr; }.dashboard-grid { grid-template-columns:1fr; }.service-form { grid-template-columns:repeat(2,minmax(0,1fr)); }.expense-form { grid-template-columns:repeat(2,minmax(0,1fr)); }.ledger-card .service-numbers { grid-template-columns:repeat(2,minmax(0,1fr)); }.today { display:none; } }
@media (max-width:760px) { .shell { display:block; }.side { position:static; height:auto; padding:17px 15px; }.brand { padding-bottom:15px; }.unit-select { margin-bottom:12px; }.menu { display:block; }.nav-group { border-bottom:1px solid rgba(255,255,255,.075); }.nav-group summary { min-height:34px; }.nav-group-items { display:flex; flex-wrap:wrap; padding:0 0 9px 14px; }.side a { min-height:30px; padding:6px 9px; }.side a.active::before { left:-14px; }.sidebar-footer { display:none; }.topbar { min-height:57px; padding:0 17px; }.topbar-context { display:none; }.topbar-actions { width:100%; justify-content:flex-end; }.content { padding:25px 17px 42px; }.page-heading { align-items:flex-start; flex-direction:column; margin-bottom:20px; }.balance-banner { min-height:145px; padding:22px; }.balance-orbit { width:78px; height:78px; }.balance-orbit::before { width:54px; height:54px; }.balance-orbit b { width:37px; height:37px; font-size:11px; }.metric-grid { gap:10px; }.metric-card { min-height:94px; }.data-panel { padding:16px; overflow-x:auto; }.form,.service-form,.expense-form { grid-template-columns:1fr; }.service-form textarea { grid-column:auto; }.service-summary,.service-numbers,.ledger-card .service-numbers { grid-template-columns:1fr; }.service-card { padding:17px; }.expense-row { grid-template-columns:minmax(0,1fr) auto; }.expense-row .delete { grid-column:2; }.cards { grid-template-columns:1fr; }.panel { padding:31px 24px; } }