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

/* ============================================================= */
/* PAHIRAM — adaptive UI (mobile-first base + desktop ≥1024px)   */
/* ============================================================= */
:root {
    --bg: #0b1220;
    --panel: #0f1b2d;
    --panel-muted: #0c1627;
    --ink: #e6eefc;
    --muted: #91a4bf;
    --line: #223650;
    --brand: #1f71c1;
    --brand-dark: #164f90;
    --brand-soft: #132840;
    --ok: #27c996;
    --warn: #f6b73c;
    --danger: #f26173;
    --radius-xl: 20px;
    --radius-lg: 14px;
    --radius-md: 10px;
    --shadow: 0 18px 50px rgba(0, 0, 0, .45);
    --page-x: clamp(.85rem, 2vw, 1.1rem);
    --page-y: clamp(.85rem, 1.6vw, 1.1rem);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    min-height: 100%;
    font-family: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
    color: var(--ink);
    background:
        radial-gradient(900px 420px at 110% -10%, rgba(31, 113, 193, .22), transparent 60%),
        linear-gradient(180deg, #08101d 0%, #0b1220 100%);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
    margin: 0;
    font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
    letter-spacing: -.02em;
}

a { color: inherit; }

/* ---------- visibility helpers ---------- */
.only-desk { display: none; }
.only-mob { display: block; }

/* ---------- shared atoms ---------- */
.ico { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; }

.chip { display: inline-block; border-radius: 999px; padding: .24rem .66rem; font-size: .74rem; font-weight: 700; color: #fff; }
.chip.active { background: #1a6fbf; }
.chip.overdue { background: var(--warn); color: #3a2a06; }
.chip.indefault, .chip.default { background: var(--danger); }
.chip.completed { background: var(--ok); }

.btn { border: 0; border-radius: 11px; font: inherit; font-weight: 700; cursor: pointer; padding: .6rem .95rem; }
.btn-primary { background: #ffbf45; color: #23252b; box-shadow: 0 6px 16px rgba(0, 0, 0, .25); }
.btn-block { width: 100%; padding: .8rem; border-radius: 12px; border: 0; font-weight: 700; cursor: pointer; font: inherit; }
.btn-green { background: linear-gradient(145deg, #22bf8f, #19a97c); color: #fff; }
.btn-green:disabled { opacity: .6; cursor: not-allowed; }
.btn-blue { background: linear-gradient(145deg, #2d81d7, #1f6fbd); color: #fff; }
.btn-outline { background: transparent; border: 1px solid #4a648a; color: #dce8f7; }
.btn-danger { background: #241019; border: 1px solid #5a2733; color: #ff9da8; }

.section-label { color: #7fc0ff; text-transform: uppercase; letter-spacing: .06em; font-size: .76rem; font-weight: 700; margin: 0 0 .55rem; }
.card { background: #101d31; border: 1px solid #203854; border-radius: var(--radius-lg); padding: .95rem; }
.money { font-variant-numeric: tabular-nums; font-weight: 600; }
.money.bal { color: var(--warn); }
.b-sub { font-size: .76rem; color: #7f97b8; margin-top: .1rem; }
.hidden { display: none; }

.lbl { display: block; font-size: .74rem; color: #9fb6d6; font-weight: 600; margin: .7rem 0 .3rem; text-transform: uppercase; letter-spacing: .04em; }
.field { display: flex; align-items: center; gap: .5rem; border: 1px solid #28425f; border-radius: 10px; background: #0d1a2c; padding: .55rem .75rem; }
.field input, .field input[type=date] { border: 0; background: transparent; color: #e8f0ff; font: inherit; outline: none; width: 100%; }
.field input::placeholder { color: #6f89a8; }
.field input[type=date]::-webkit-calendar-picker-indicator { filter: invert(.7); }
.field .peso { color: #3f9be0; font-weight: 700; }
.field.disabled { opacity: .6; }
.eye { cursor: pointer; color: #7f97b8; background: 0; border: 0; display: grid; place-items: center; padding: 0; font-size: 1rem; }
.select { width: 100%; background: #0d1a2c; border: 1px solid #28425f; border-radius: 10px; color: #e8f0ff; font: inherit; padding: .6rem .7rem; }
.select option { background: #0d1a2c; color: #e8f0ff; }

.switch { position: relative; width: 42px; height: 23px; flex: 0 0 auto; }
.switch input { opacity: 0; width: 0; height: 0; }
.track { position: absolute; inset: 0; background: #2a3c52; border-radius: 999px; transition: .2s; cursor: pointer; }
.track::before { content: ''; position: absolute; left: 3px; top: 3px; width: 17px; height: 17px; border-radius: 50%; background: #7f97b8; transition: .2s; }
.switch input:checked + .track { background: #2b7ed4; }
.switch input:checked + .track::before { transform: translateX(19px); background: #fff; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid #233b56; }
.toggle-row .t-sub { font-size: .76rem; color: #7f97b8; margin-top: .1rem; }

.link { display: block; text-align: center; color: #8fa6c5; text-decoration: none; margin-top: 1rem; font-size: .9rem; }
.alert { border-radius: 10px; padding: .6rem .8rem; font-size: .86rem; margin-top: .8rem; }
.alert-success { background: #0f2e23; border: 1px solid #1e6a4f; color: #79e3bd; }
.alert-danger { background: #2a1117; border: 1px solid #5a2733; color: #ff9da8; }

.pill { border: 1px solid #28425f; border-radius: 999px; background: #13253a; color: #d3e3f7; padding: .45rem .9rem; font-size: .86rem; font-weight: 600; cursor: pointer; }
.pill.selected { background: var(--brand); border-color: var(--brand); color: #fff; }
.search { display: flex; align-items: center; gap: .5rem; background: #101d31; border: 1px solid #28425f; border-radius: 10px; padding: .5rem .7rem; color: #8fa6c5; }
.search input { border: 0; background: transparent; color: #e8f0ff; font: inherit; outline: none; width: 100%; }

/* ---------- app shell ---------- */
.app-shell { min-height: 100vh; }
.app-main { padding-bottom: 5rem; } /* room for fixed mobile tab bar */

/* desktop top nav (hidden on mobile) */
.topbar { display: none; }
.topbar-inner {
    width: min(1320px, 100%); margin: 0 auto;
    display: flex; align-items: center; gap: 1.2rem; padding: .8rem var(--page-x);
}
.brand { display: flex; align-items: center; gap: .55rem; font-family: 'Outfit'; font-weight: 700; font-size: 1.15rem; }
.brand .logo { width: 30px; height: 30px; border-radius: 9px; background: #ffbf45; color: #13294a; display: grid; place-items: center; font-weight: 800; }
.topbar nav { display: flex; gap: .3rem; margin-left: .6rem; }
.topbar nav a { display: flex; align-items: center; gap: .45rem; color: #cfe0f5; text-decoration: none; font-weight: 600; font-size: .92rem; padding: .5rem .8rem; border-radius: 10px; }
.topbar nav a.active { background: rgba(255, 255, 255, .14); color: #fff; }
.topbar nav a:hover { background: rgba(255, 255, 255, .07); }
.topbar .right { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
.usermenu { position: relative; }
.usermenu > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .5rem; color: #dce8f7; font-size: .88rem; font-weight: 600; background: rgba(7, 28, 54, .4); border: 1px solid rgba(255, 255, 255, .14); padding: .4rem .7rem .4rem .5rem; border-radius: 999px; }
.usermenu > summary::-webkit-details-marker { display: none; }
.avatar { width: 26px; height: 26px; border-radius: 999px; background: #2c82d7; display: grid; place-items: center; font-size: .78rem; font-weight: 800; color: #fff; }
.avatar.bor { background: #22bf8f; }
.usermenu-pop { position: absolute; right: 0; top: 110%; background: #10213a; border: 1px solid #2b4768; border-radius: 12px; box-shadow: var(--shadow); padding: .35rem; min-width: 180px; z-index: 30; display: grid; gap: .15rem; }
.usermenu-pop a, .usermenu-pop button { text-align: left; background: 0; border: 0; color: #dce8f7; font: inherit; font-weight: 600; text-decoration: none; padding: .55rem .7rem; border-radius: 8px; cursor: pointer; display: block; width: 100%; }
.usermenu-pop a:hover, .usermenu-pop button:hover { background: #18335a; }

/* mobile bottom tab bar (hidden on desktop) */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; background: #0a1424; border-top: 1px solid #1b2c44; padding: .45rem .4rem calc(.45rem + env(safe-area-inset-bottom)); }
.tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .2rem; color: #8ba4c6; text-decoration: none; font-size: .7rem; font-weight: 600; padding: .4rem; border-radius: 12px; }
.tabbar a.active { color: #fff; background: rgba(255, 255, 255, .08); }
.tabbar a.active .ico { color: #ffbf45; }

/* ---------- page surface ---------- */
.screen { width: 100%; background: var(--panel-muted); }

/* mobile page hero (blue app bar) */
.app-hero { background: linear-gradient(145deg, #184a84 0%, #1f71c1 100%); padding: var(--page-y) var(--page-x); color: #fff; }
.app-hero .hero-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.app-hero h1 { font-size: 1.35rem; }
.app-hero .sub { opacity: .85; font-size: .85rem; margin-top: .15rem; }
.back { display: inline-flex; align-items: center; gap: .35rem; color: #eaf2fd; text-decoration: none; font-weight: 600; font-size: .9rem; margin-bottom: .4rem; }

/* desktop slim page head */
.page-head { display: flex; align-items: center; justify-content: space-between; padding: 1.3rem var(--page-x) .2rem; }
.page-head h1 { font-size: 1.5rem; }
.page-head p { color: var(--muted); margin-top: .2rem; font-size: .92rem; }

/* stat summary card (mobile hero + desktop kpi) */
.summary-card { background: linear-gradient(155deg, rgba(12, 36, 64, .92), rgba(15, 50, 89, .9)); border: 1px solid rgba(143, 189, 241, .22); border-radius: var(--radius-lg); padding: .85rem; margin-top: 1rem; }
.summary-card .label { font-size: .78rem; color: #bcd6f6; }
.summary-card .value { font-size: 1.5rem; font-weight: 700; margin-top: .2rem; font-family: 'Outfit'; }
.summary-card .value.capital { color: #63e2d1; }
.summary-card .value.capital.negative { color: #ff8e9b; }
.counts { display: flex; gap: .6rem; margin-top: .7rem; }
.counts div { flex: 1; text-align: center; }
.counts strong { display: block; font-size: 1.2rem; }
.counts span { font-size: .72rem; color: #c7ddf5; }
.counts .c-active { color: #8ad0ff; }
.counts .c-overdue { color: #ffd05a; }
.counts .c-default { color: #ff8e9b; }
.counts .c-done { color: #9fe9cf; }

/* desktop KPI row */
.kpis { display: grid; gap: .85rem; padding: 1.1rem var(--page-x) .4rem; }
.kpi { background: linear-gradient(155deg, rgba(12, 36, 64, .92), rgba(15, 50, 89, .9)); border: 1px solid rgba(143, 189, 241, .22); border-radius: var(--radius-lg); padding: .85rem .95rem; }
.kpi .label { font-size: .78rem; color: #bcd6f6; display: flex; align-items: center; gap: .4rem; }
.kpi .value { font-size: 1.5rem; font-weight: 700; margin-top: .35rem; font-family: 'Outfit'; }
.kpi .value.capital { color: #63e2d1; }
.kpi .value.capital.negative { color: #ff8e9b; }
.kpi .sub { font-size: .72rem; color: #7f97b8; margin-top: .15rem; }
.kpi.tinted-active .value { color: #8ad0ff; }
.kpi.tinted-overdue .value { color: #ffd05a; }
.kpi.tinted-default .value { color: #ff8e9b; }
.kpi.tinted-done .value { color: #9fe9cf; }

/* toolbar (filters + search) */
.toolbar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: 1rem var(--page-x) .6rem; }
.pills { display: flex; gap: .45rem; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.pills::-webkit-scrollbar { display: none; }
.pills .pill { white-space: nowrap; flex: 0 0 auto; }
.toolbar .search { margin-left: 0; min-width: 0; width: 100%; }

.records-head { padding: .35rem var(--page-x) .6rem; color: #7fc0ff; font-size: 1rem; font-weight: 700; display: flex; justify-content: space-between; align-items: center; }

/* loan cards (mobile) */
.loan-cards { padding-bottom: .5rem; }
.loan-card { margin: 0 var(--page-x) .7rem; background: #101d31; border: 1px solid #203854; border-radius: 14px; padding: .9rem; display: flex; justify-content: space-between; gap: .8rem; cursor: pointer; transition: transform .14s, box-shadow .14s; }
.loan-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(18, 47, 78, .25); }
.loan-card.empty { display: block; cursor: default; color: #8fa6c5; text-align: center; padding: 1.4rem; }
.loan-main h3 { font-size: 1.05rem; }
.loan-main p { color: #8fa6c5; font-size: .88rem; margin-top: .25rem; }
.loan-main .principal { color: var(--ok); font-weight: 600; }
.loan-main .balance { color: var(--warn); font-weight: 700; }
.loan-side { display: flex; flex-direction: column; align-items: flex-end; gap: .45rem; text-align: right; }
.loan-side small { color: #8fa6c5; font-size: .78rem; }
.partial-remaining { color: var(--danger); font-size: .76rem; font-weight: 700; }
.last-updated { color: #8a9199; font-size: .74rem; }

/* loan table (desktop) */
.table-wrap { padding: .4rem var(--page-x) 1.4rem; }
table.loans { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .92rem; }
table.loans thead th { text-align: left; color: #86a3c6; font-weight: 600; font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; padding: .55rem .8rem; border-bottom: 1px solid #213650; }
table.loans th.num, table.loans td.num { text-align: right; }
table.loans tbody tr { cursor: pointer; transition: background .12s; }
table.loans tbody tr:hover { background: #13243a; }
table.loans td { padding: .8rem .8rem; border-bottom: 1px solid #18293f; vertical-align: middle; }
.b-name { font-weight: 700; color: #eaf2fd; }
.row-actions { display: flex; gap: .4rem; justify-content: flex-end; }
.icon-btn { border: 1px solid #2a4663; background: #16263c; color: #cfe0f5; border-radius: 8px; padding: .34rem .55rem; cursor: pointer; font-size: .78rem; }
.icon-btn.danger { color: #ff9da8; border-color: #5a2733; background: #241019; }

/* ---------- master / detail ---------- */
.md-grid { display: block; }
.md-list { display: none; }
.md-list .dl-head { padding: .9rem 1rem; font-weight: 700; color: #7fc0ff; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; }
.dl-item { padding: .8rem 1rem; border-bottom: 1px solid #16263c; cursor: pointer; }
.dl-item:hover { background: #11203455; }
.dl-item.sel { background: #13294a; box-shadow: inset 3px 0 0 var(--brand); }
.dl-item .nm { font-weight: 700; }
.dl-item .mt { display: flex; justify-content: space-between; margin-top: .3rem; font-size: .8rem; color: #8fa6c5; }

.detail-hero { background: linear-gradient(145deg, #184a84 0%, #1f71c1 100%); padding: var(--page-y) var(--page-x); color: #fff; }
.detail-hero .row1 { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.detail-hero h2 { font-size: 1.35rem; }
.metrics { display: grid; grid-template-columns: 1fr; gap: .55rem; margin-top: 1rem; }
.metric { background: rgba(9, 52, 100, .6); border: 1px solid rgba(255, 255, 255, .18); border-radius: 10px; padding: .55rem .72rem; }
.metric span { font-size: .72rem; color: #c5dcf6; display: block; }
.metric strong { font-size: 1.05rem; }
.metric.bal strong { color: #ffcb5a; }
.detail-meta { margin-top: .6rem; color: #d0e4fa; display: flex; gap: .95rem; font-size: .82rem; flex-wrap: wrap; }

.detail-body { padding: var(--page-y) var(--page-x); }
.detail-inner { display: grid; grid-template-columns: 1fr; gap: 1.2rem; }
.parties-card { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.parties-card small { display: block; color: #868d95; text-transform: uppercase; letter-spacing: .04em; font-size: .68rem; }
.parties-card p { margin: .15rem 0 0; font-weight: 600; }

.schedule-list { display: grid; gap: .45rem; }
.schedule-row { background: #101d31; border: 1px solid #203854; border-radius: 12px; padding: .6rem .72rem; display: grid; grid-template-columns: auto 1fr auto; gap: .65rem; align-items: center; }
.period-badge { width: 30px; height: 30px; border-radius: 9px; background: #2372c2; color: #fff; display: inline-grid; place-items: center; font-weight: 700; font-size: .82rem; }
.schedule-main { font-size: .88rem; color: #c5d4e9; }
.schedule-main .sub { color: #8fa6c5; font-size: .76rem; margin-top: .15rem; }
.schedule-amt { font-weight: 700; color: #2ad89f; }
.schedule-amt.muted { color: #8fa6c5; }
.schedule-side { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: .12rem; }
.schedule-side small { font-size: .74rem; }
.pen { color: var(--danger); font-weight: 700; }

.payment-row { display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: center; padding: .6rem .2rem; border-bottom: 1px solid #18293f; }
.payment-row:last-child { border-bottom: 0; }
.payment-row strong { display: block; font-size: .95rem; }
.payment-row small { color: #8a9199; font-size: .78rem; }
.payment-row .note { color: #8fa6c5; font-size: .82rem; text-align: right; }
.read-note { font-size: .82rem; color: #8fa6c5; background: #11203a; border: 1px dashed #2a4663; border-radius: 10px; padding: .7rem .8rem; }

/* ---------- forms (new loan / capital) ---------- */
.content-pad { padding: var(--page-y) var(--page-x) 1.6rem; }
.form-narrow { width: 100%; }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 1.2rem; align-items: start; }
.preview { background: #13243a; border: 1px solid #25415e; border-radius: 10px; padding: .85rem; color: #d7e7fb; font-size: .9rem; white-space: pre-line; margin-top: 1rem; }
.form-actions { display: flex; gap: .7rem; margin-top: 1.1rem; }
.form-actions .btn-block { flex: 1; }

.cap-balance { background: rgba(13, 37, 64, .82); border: 1px solid rgba(174, 212, 248, .24); border-radius: 14px; padding: .95rem 1rem; }
.cap-balance span { color: #c2dbf7; font-size: .86rem; }
.cap-balance strong { display: block; margin-top: .2rem; font-size: 2rem; color: #63e2d1; font-family: 'Outfit'; }
.cap-add { display: grid; grid-template-columns: 1fr; gap: .7rem; align-items: center; }
.tx { display: grid; grid-template-columns: auto 1fr auto; gap: .8rem; align-items: center; background: #101d31; border: 1px solid #203854; border-radius: 14px; padding: .8rem; margin-bottom: .7rem; }
.tx-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-weight: 700; color: #fff; }
.tx-ico.credit { background: #1db789; }
.tx-ico.debit { background: #ec4c58; }
.tx-main h4 { font-size: 1rem; }
.tx-main p { color: #a2b4cb; font-size: .84rem; margin-top: .1rem; }
.tx-main small { color: #7f95b1; font-size: .76rem; }
.tx-amt { font-size: 1.15rem; font-weight: 700; }
.tx-amt.credit { color: #2ad89f; }
.tx-amt.debit { color: #ff7f8a; }

/* ---------- auth ---------- */
.auth-wrap { width: min(440px, calc(100% - 2rem)); margin: 2.5rem auto; }
.auth-card { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); padding: 1.5rem; }
.auth-card h1 { font-size: 1.5rem; }
.auth-card .sub { color: var(--muted); margin: .3rem 0 .6rem; }

/* borrowers management (master/detail) */
.borrowers-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; padding: var(--page-y) var(--page-x); }
.borrowers-panel { background: var(--panel-muted); border: 1px solid #1d2f46; border-radius: var(--radius-lg); min-width: 0; padding-bottom: .6rem; }
.borrowers-panel .records-head { padding: .8rem 1rem .5rem; }
.borrowers-panel .search { margin: .8rem 1rem; }
.borrower-card { margin: 0 1rem .6rem; }
.borrower-card.selected { border-color: #4c94de; box-shadow: 0 0 0 2px rgba(76, 148, 222, .2); }
.borrowers-editor { padding: .2rem 1rem 1rem; }
.borrowers-actions { display: grid; gap: .6rem; margin-top: .9rem; }
.borrowers-actions.create { grid-template-columns: 1fr 1fr; }
.borrowers-actions.edit { grid-template-columns: 1fr 1fr 1fr; }
.borrowers-actions .btn-block { margin: 0; }
.entry-label { font-size: .74rem; color: #9fb6d6; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; min-width: 84px; flex: 0 0 84px; }
.entry-line { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; border-bottom: 1px solid #233b56; }
.entry-line:last-child { border-bottom: 0; }
.entry-line input { border: 0; background: transparent; color: #e8f0ff; font: inherit; outline: none; width: 100%; padding: .35rem 0; }
.entry-line input:disabled { color: #7f97b8; }

/* borrowers editor delete modal */
.app-modal-backdrop { position: fixed; inset: 0; background: rgba(3, 10, 20, .62); backdrop-filter: blur(2px); z-index: 990; }
.app-modal-shell { position: fixed; z-index: 991; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(420px, calc(100vw - 2rem)); background: #10213a; border: 1px solid #2b4768; border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 1rem; }
.app-modal-shell h3 { color: #e8f0ff; font-size: 1.15rem; }
.app-modal-shell p { margin: .8rem 0 0; color: #c8d8ed; line-height: 1.4; }
.app-modal-shell .modal-note { color: #9fb5d2; font-size: .9rem; }
.app-modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: 1rem; }

/* error UI */
#blazor-error-ui { color-scheme: dark; background: #2a1117; color: #ffd5da; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, .2); box-sizing: border-box; display: none; left: 0; padding: .6rem 1.25rem .7rem; position: fixed; width: 100%; z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }
.blazor-error-boundary { background: #b32121; padding: 1rem; color: #fff; }

.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid var(--danger); }
.validation-message { color: var(--danger); }

/* ============================================================= */
/* DESKTOP (≥ 1024px)                                            */
/* ============================================================= */
@media (min-width: 1024px) {
    .only-desk { display: block; }
    .only-mob { display: none; }

    .app-main { padding-bottom: 0; }
    .topbar { display: block; position: sticky; top: 0; z-index: 40; background: linear-gradient(145deg, #102742 0%, #143a63 100%); border-bottom: 1px solid #20364f; }
    .tabbar { display: none; }

    .screen { width: min(1320px, calc(100% - 2rem)); margin: 1.25rem auto; border-radius: var(--radius-xl); border: 1px solid #1d2f46; background: var(--panel); overflow: hidden; box-shadow: var(--shadow); }

    .kpis.cols-5 { grid-template-columns: repeat(5, 1fr); }
    .kpis.cols-4 { grid-template-columns: repeat(4, 1fr); }

    .toolbar .search { margin-left: auto; width: auto; min-width: 240px; }

    .md-grid { grid-template-columns: 340px 1fr; min-height: 560px; }
    .md-grid { display: grid; }
    .md-grid.single { grid-template-columns: 1fr; }
    .md-grid.single .md-body { max-width: 980px; margin: 0 auto; width: 100%; }
    .md-list { display: block; border-right: 1px solid #1d2f46; background: #0c1627; overflow: auto; }

    .metrics { grid-template-columns: repeat(3, 1fr); }
    .detail-inner { grid-template-columns: 1fr 1fr; gap: 1.4rem; }

    .form-grid { grid-template-columns: 1fr 1fr; }
    .form-narrow { width: min(960px, 100%); margin: 0 auto; }
    .cap-add { grid-template-columns: 1fr 1.3fr auto; }

    .auth-wrap { margin: 3.5rem auto; }
}