:root {
  --bg: #f3f5f4;
  --panel: #ffffff;
  --ink: #15211d;
  --muted: #77827e;
  --line: #e8ece9;
  --green: #145b45;
  --green-2: #1d7358;
  --mint: #dff4e9;
  --coral: #fff0e9;
  --blue: #e9f1ff;
  --shadow: 0 16px 45px rgba(23, 50, 41, .07);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: "Segoe UI", Arial, sans-serif; font-size: 14px; }
button, input, select, textarea { font: inherit; color: inherit; }
button, select { cursor: pointer; }
.mobile-nav, .mobile-fab { display: none; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 10; width: 230px; padding: 28px 20px 20px; display: flex; flex-direction: column; justify-content: space-between; background: #10291f; color: white; }
.brand { display: flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; font-size: 19px; font-weight: 800; letter-spacing: -.6px; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: #e8f7ef; color: var(--green); font-size: 17px; }
.nav-label { margin: 38px 10px 11px; color: #6e9383; font-size: 10px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; }
.sidebar nav { display: grid; gap: 5px; }
.nav-item { width: 100%; padding: 11px 12px; border: 0; border-radius: 10px; display: flex; align-items: center; gap: 12px; background: transparent; color: #9cb4aa; text-align: left; text-decoration: none; font-size: 13px; font-weight: 600; transition: .2s ease; }
.nav-item:hover, .nav-item.active { background: rgba(255,255,255,.09); color: white; }
.nav-icon { width: 23px; height: 23px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.13); border-radius: 7px; font-size: 12px; }
.user-card { padding: 13px 10px; display: flex; align-items: center; gap: 10px; border-top: 1px solid rgba(255,255,255,.1); }
.avatar { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: #dff4e9; color: var(--green); font-weight: 800; }
.user-card div { display: grid; gap: 2px; }.user-card strong { font-size: 12px; }.user-card small { color: #81a093; font-size: 9px; }
.logout { width: 100%; padding: 9px 10px; border: 0; display: flex; justify-content: space-between; background: transparent; color: #78998b; font-size: 11px; }
.main { margin-left: 230px; padding: 30px clamp(22px, 3.5vw, 56px) 60px; }
.topbar { margin-bottom: 26px; display: flex; justify-content: space-between; align-items: center; }
.eyebrow, .kicker { margin: 0 0 5px; color: #83908b; font-size: 9px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }.topbar h1 { margin: 0; font-size: 25px; letter-spacing: -1px; }.panel-heading h2, .calculator h2, .modal h2 { margin: 4px 0 0; font-size: 20px; letter-spacing: -.7px; }
.button { padding: 11px 17px; border: 0; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-size: 12px; font-weight: 700; transition: .2s ease; }
.button:hover { transform: translateY(-1px); }.button--primary { background: var(--green); color: white; box-shadow: 0 8px 20px rgba(20,91,69,.18); }.button--primary:hover { background: var(--green-2); }
.button--ghost { border: 1px solid var(--line); background: white; }.button--wide { width: 100%; justify-content: space-between; padding: 14px 17px; }.danger { color: #bf4c40; }
.menu-button { display: none; }
.stats-grid { margin-bottom: 22px; display: grid; grid-template-columns: 1.55fr repeat(3, 1fr) .8fr; gap: 12px; }
.stat-card { min-height: 143px; padding: 18px; border: 1px solid #edf0ee; border-radius: 16px; background: var(--panel); box-shadow: 0 7px 25px rgba(31,58,49,.04); }
.stat-card--hero { background: linear-gradient(135deg, #174d3c, #0e3428); color: white; border: 0; }
.stat-top { min-height: 29px; display: flex; justify-content: space-between; align-items: flex-start; }.stat-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: rgba(255,255,255,.12); font-size: 12px; font-weight: 800; }.stat-icon.mint { background: var(--mint); color: #287258; }.stat-icon.coral { background: var(--coral); color: #b46143; }.stat-icon.blue { background: var(--blue); color: #5076a8; }
.trend { padding: 4px 7px; border-radius: 20px; background: rgba(255,255,255,.09); color: #abd2c2; font-size: 8px; font-weight: 700; }
.stat-card p { margin: 12px 0 4px; color: #84918c; font-size: 10px; font-weight: 600; }.stat-card--hero p { color: #a9c0b7; }.stat-card strong { display: block; font-size: clamp(15px, 1.35vw, 20px); letter-spacing: -.8px; white-space: nowrap; }.stat-card small { display: block; margin-top: 8px; color: #a1aba7; font-size: 8px; }
.hero-line { height: 3px; margin-top: 15px; border-radius: 5px; background: rgba(255,255,255,.1); overflow: hidden; }.hero-line span { height: 100%; display: block; background: #7fc3a5; }
.status-card { display: flex; align-items: center; justify-content: space-around; text-align: center; }.status-card strong { font-size: 26px; }.status-divider { width: 1px; height: 45px; background: var(--line); }
.panel { border: 1px solid #e9eeeb; border-radius: 17px; background: white; box-shadow: var(--shadow); }
.credits-panel { margin-bottom: 22px; overflow: hidden; }.panel-heading { padding: 20px 22px 17px; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.table-actions { display: flex; gap: 7px; }.search { min-width: 175px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; display: flex; align-items: center; gap: 7px; color: #98a19d; }.search input { width: 100%; border: 0; outline: 0; background: transparent; font-size: 10px; }
select, .field input, .field textarea { width: 100%; border: 1px solid var(--line); border-radius: 9px; background: white; outline: none; transition: .2s; }.table-actions select { width: auto; padding: 9px 25px 9px 10px; color: #66736e; font-size: 9px; }
select:focus, .field input:focus, .field textarea:focus { border-color: #75a997; box-shadow: 0 0 0 3px rgba(73,140,115,.09); }
.table-wrap { overflow-x: auto; }table { width: 100%; border-collapse: collapse; min-width: 980px; }th { padding: 10px 15px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fafbfa; color: #9aa49f; font-size: 8px; font-weight: 800; letter-spacing: .5px; text-align: left; text-transform: uppercase; }td { padding: 14px 15px; border-bottom: 1px solid #f0f2f1; font-size: 10px; }tbody tr { transition: .2s; }tbody tr:hover { background: #fbfcfb; }tbody tr:last-child td { border-bottom: 0; }td strong { display: block; font-size: 10px; }td small { display: block; margin-top: 4px; color: #a1aaa6; font-size: 8px; }.remaining { color: #a86d56; }
.credit-name { display: flex; align-items: center; gap: 10px; min-width: 145px; }.credit-logo { width: 31px; height: 31px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px; background: #edf4f0; color: var(--green); font-weight: 800; }.credit-name strong { font-size: 11px; }
.progress-copy { margin-bottom: 7px; display: flex; justify-content: space-between; color: #89938f; font-size: 8px; }.progress-copy strong { color: var(--green); font-size: 8px; }.progress { width: 100px; height: 4px; border-radius: 5px; background: #edf1ef; overflow: hidden; }.progress span { height: 100%; display: block; border-radius: inherit; background: #429473; }
.badge { width: fit-content; padding: 5px 8px; border-radius: 20px; display: flex; align-items: center; gap: 5px; font-size: 8px; font-weight: 700; }.badge span { width: 4px; height: 4px; border-radius: 50%; }.badge.active { background: #e8f5ef; color: #34775d; }.badge.active span { background: #45a27d; }.badge.closed { background: #f0f2f1; color: #8a9490; }.badge.closed span { background: #9ca5a1; }
.icon-button, .close-button { border: 0; background: transparent; color: #8d9893; }.icon-button { padding: 8px; border-radius: 8px; font-weight: 800; letter-spacing: 1px; }.icon-button:hover { background: #edf3f0; color: var(--green); }.empty-state { padding: 35px; text-align: center; color: var(--muted); }
.calculator { display: grid; grid-template-columns: 1fr 2.3fr; overflow: hidden; }.calculator-copy { position: relative; min-height: 280px; padding: 29px; background: linear-gradient(145deg, #164b3a, #0d3327); color: white; overflow: hidden; }.kicker--light { color: #82b39f; }.calculator-copy h2 { max-width: 260px; margin: 8px 0 13px; font-size: 24px; line-height: 1.2; }.calculator-copy p { max-width: 260px; color: #a8c0b6; font-size: 10px; line-height: 1.7; }.calculator-orb { position: absolute; right: -35px; bottom: -52px; width: 155px; height: 155px; border: 28px solid rgba(255,255,255,.035); border-radius: 50%; display: grid; place-items: center; color: rgba(255,255,255,.18); font-size: 30px; }
.calculator-form { padding: 27px; }.calc-inputs { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 12px; }.field { display: grid; gap: 7px; color: #75817c; font-size: 9px; font-weight: 700; }.field input, .field select, .field textarea { padding: 11px 12px; font-size: 11px; font-weight: 500; resize: vertical; }.input-suffix { position: relative; }.input-suffix span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #9ca6a2; font-size: 10px; }.input-suffix input { padding-right: 28px; }
.calc-result { margin-top: 22px; padding: 18px 20px; border-radius: 13px; display: grid; grid-template-columns: 1fr 1px 2.2fr; align-items: center; gap: 22px; background: #f4f7f5; }.calc-result span { color: #84908b; font-size: 8px; }.calc-result strong { display: block; margin-top: 5px; font-size: 17px; }.calc-result small { color: #93a09a; font-size: 8px; }.result-line { width: 1px; height: 50px; background: #e0e7e3; }.plan-pills { margin-top: 8px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }.plan-pills span { padding: 8px 9px; border: 1px solid #e3e9e6; border-radius: 9px; background: white; }.plan-pills b { display: block; color: #7b8983; font-size: 7px; }.plan-pills strong { margin-top: 3px; color: var(--ink); font-size: 10px; }
dialog { width: min(650px, calc(100% - 30px)); padding: 0; border: 0; border-radius: 18px; box-shadow: 0 30px 80px rgba(17,42,33,.25); }dialog::backdrop { background: rgba(7,25,18,.55); backdrop-filter: blur(3px); }.modal { padding: 25px; }.modal-head, .modal-actions { display: flex; align-items: center; justify-content: space-between; }.close-button { font-size: 25px; }.form-grid { margin: 22px 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }.field--wide { grid-column: 1 / -1; }.modal-actions, .danger-actions, .save-actions { display: flex; gap: 8px; }.modal-actions { padding-top: 17px; border-top: 1px solid var(--line); }
.login-page { min-height: 100vh; background: #f1f4f2; }.login-shell { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }.login-brand { position: relative; padding: 45px 9vw; display: flex; flex-direction: column; justify-content: space-between; background: radial-gradient(circle at 70% 60%, #256a51, transparent 35%), linear-gradient(145deg, #133e30, #0b2d22); color: white; overflow: hidden; }.brand--large { font-size: 22px; }.brand--large .brand-mark { width: 39px; height: 39px; }.login-brand h1 { margin: 15px 0 20px; font-size: clamp(38px, 4vw, 62px); line-height: 1.08; letter-spacing: -3px; }.login-brand h1 span { color: #8fc8b0; }.login-copy { max-width: 450px; color: #a6c0b5; line-height: 1.8; }.login-metric { display: flex; align-items: center; gap: 12px; }.metric-orb { width: 34px; height: 34px; border: 7px solid #80bea4; border-radius: 50%; }.login-metric div { display: grid; gap: 3px; }.login-metric strong { font-size: 11px; }.login-metric small { color: #86a99a; font-size: 8px; }.login-panel { display: grid; place-items: center; padding: 30px; }.login-card { width: min(370px, 100%); padding: 35px; border-radius: 18px; background: white; box-shadow: var(--shadow); }.login-card__head { margin-bottom: 25px; }.login-card h2 { margin: 7px 0; font-size: 26px; letter-spacing: -1px; }.login-card__head p, .login-hint { color: #929c97; font-size: 9px; }.login-card .field { margin-bottom: 14px; }.login-hint { margin: 17px 0 0; text-align: center; }.login-hint code { color: var(--green); }.alert { margin-bottom: 15px; padding: 10px 12px; border-radius: 8px; background: #fff0ed; color: #ad4e42; font-size: 10px; }
.month-picker { display: flex; align-items: center; gap: 9px; }.month-picker label { color: var(--muted); font-size: 9px; font-weight: 700; }.month-picker input { padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; background: white; font-size: 11px; }
.budget-hero { margin-bottom: 14px; padding: 25px 28px; border-radius: 18px; display: grid; grid-template-columns: .85fr 2fr; align-items: center; gap: 30px; background: linear-gradient(135deg, #174d3c, #0e3428); color: white; box-shadow: var(--shadow); }.budget-hero__copy h2 { margin: 8px 0 3px; font-size: 17px; }.budget-hero__copy > strong { display: block; font-size: 34px; letter-spacing: -2px; }.budget-hero__copy p { max-width: 370px; margin: 10px 0 0; color: #a8c0b6; font-size: 9px; line-height: 1.6; }.money-flow { display: grid; grid-template-columns: repeat(7, auto); align-items: center; gap: 9px; }.flow-item { min-height: 82px; padding: 13px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(255,255,255,.05); }.flow-item span, .flow-item small { display: block; color: #9db9ad; font-size: 8px; }.flow-item strong { display: block; margin: 8px 0 4px; font-size: 14px; white-space: nowrap; }.flow-item.income { background: rgba(255,255,255,.09); }.flow-item.result { border-color: rgba(128,207,173,.35); background: rgba(86,174,137,.16); }.flow-arrow { color: #719589; font-weight: 800; }
.budget-stats { margin-bottom: 14px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }.mini-stat { padding: 16px 18px; border: 1px solid #e9eeeb; border-radius: 14px; background: white; box-shadow: 0 7px 25px rgba(31,58,49,.04); }.mini-stat span, .mini-stat small { display: block; color: #8b9691; font-size: 8px; }.mini-stat strong { display: block; margin: 7px 0 5px; font-size: 17px; letter-spacing: -.7px; }.positive { color: #24805f !important; }
.budget-columns { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(260px, .8fr); align-items: start; gap: 14px; }.budget-main { display: grid; gap: 14px; }.strategy-label { padding: 6px 9px; border-radius: 20px; background: #edf5f1; color: #4b806c; font-size: 8px; font-weight: 700; }.allocation-list { padding: 0 20px 20px; display: grid; gap: 8px; }.allocation-card { padding: 13px; border: 1px solid var(--line); border-radius: 12px; display: flex; align-items: center; gap: 12px; }.allocation-rank { width: 27px; height: 27px; flex: 0 0 auto; border-radius: 9px; display: grid; place-items: center; background: #edf5f1; color: var(--green); font-size: 10px; font-weight: 800; }.allocation-info { min-width: 0; flex: 1; }.allocation-title { display: flex; justify-content: space-between; gap: 15px; }.allocation-title div strong, .allocation-total { font-size: 10px; }.allocation-title small { display: block; margin-top: 3px; color: #929d98; font-size: 8px; }.allocation-total { text-align: right; }.allocation-bar { height: 4px; margin: 10px 0 7px; border-radius: 5px; background: #edf1ef; overflow: hidden; }.allocation-bar span { height: 100%; display: block; background: #43a17a; }.allocation-parts { display: flex; gap: 18px; color: #929c98; font-size: 7px; }.allocation-parts span:last-child { margin-left: auto; }.allocation-parts b { color: #596861; }
.settings-panel { position: sticky; top: 20px; }.settings-form { padding: 0 20px 20px; display: grid; gap: 14px; }.budget-note { margin: 0 20px 20px; padding: 13px; border-radius: 11px; background: #f4f7f5; }.budget-note strong { font-size: 9px; }.budget-note p { margin: 6px 0 0; color: #7e8d86; font-size: 8px; line-height: 1.6; }.income-panel { overflow: hidden; }.income-form { padding: 0 20px 18px; display: grid; grid-template-columns: 1.2fr .8fr .8fr 1.2fr auto; align-items: end; gap: 8px; }.income-list { border-top: 1px solid var(--line); }.income-row { padding: 11px 20px; border-bottom: 1px solid #f0f2f1; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; }.income-row:last-child { border-bottom: 0; }.income-icon { width: 25px; height: 25px; border-radius: 8px; display: grid; place-items: center; background: #e8f5ef; color: #318263; font-weight: 800; }.income-row strong { font-size: 9px; }.income-row small { display: block; margin-top: 3px; color: #9aa49f; font-size: 7px; }
.salary-days { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.timeline { padding: 0 20px 20px; }.timeline-row { position: relative; min-height: 54px; padding: 10px 10px 10px 40px; border-left: 1px solid #dbe7e1; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; }.timeline-row strong { font-size: 10px; }.timeline-row small { display: block; margin-top: 4px; color: #929d98; font-size: 8px; }.timeline-dot { position: absolute; left: -6px; width: 11px; height: 11px; border: 3px solid white; border-radius: 50%; background: #67aa8d; box-shadow: 0 0 0 1px #b9d7ca; }.timeline-row.now .timeline-dot { background: #e3a66f; }.timeline-row.total { margin-top: 5px; border-left-color: transparent; border-radius: 10px; background: #f1f6f3; }.timeline-row.total .timeline-dot { background: var(--green); }
.salary-periods { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }.period-card { padding: 18px; border: 1px solid #dfeae5; border-radius: 15px; background: white; box-shadow: 0 8px 25px rgba(31,58,49,.04); }.period-card.current { background: #f4f8f6; }.period-card h3 { margin: 5px 0 14px; font-size: 13px; }.period-equation, .period-result { padding: 8px 0; display: flex; justify-content: space-between; gap: 12px; color: #7d8984; font-size: 8px; }.period-equation { border-bottom: 1px solid #edf1ef; }.period-equation strong { color: #52625b; }.period-result { margin-top: 5px; color: var(--green); font-weight: 800; }.period-result strong { font-size: 15px; }
.regular-plan { margin-bottom: 14px; padding: 16px 20px; border: 1px solid #dce9e3; border-radius: 15px; display: grid; grid-template-columns: 1.4fr 1fr 1fr; align-items: center; gap: 16px; background: #edf5f1; }.regular-plan h2 { margin: 4px 0 0; font-size: 14px; }.regular-period { padding-left: 15px; border-left: 1px solid #cddfd6; }.regular-period span, .regular-period small { display: block; color: #75877f; font-size: 8px; }.regular-period strong { display: block; margin: 5px 0 3px; color: var(--green); font-size: 15px; }
.offline-page { min-height: 100vh; padding: 20px; display: grid; place-items: center; background: #10291f; }.offline-card { width: min(420px, 100%); padding: 30px; border-radius: 20px; background: white; text-align: center; }.offline-card .brand-mark { margin: 0 auto 18px; }.offline-card h1 { font-size: 24px; }.offline-card p:not(.eyebrow) { color: var(--muted); font-size: 12px; line-height: 1.7; }
@media (max-width: 1200px) { .stats-grid { grid-template-columns: repeat(3, 1fr); }.stat-card--hero { grid-column: span 2; }.calculator { grid-template-columns: 1fr; }.calculator-copy { min-height: 190px; }.calculator-orb { bottom: -80px; }.calc-inputs { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1200px) { .budget-hero { grid-template-columns: 1fr; }.budget-columns { grid-template-columns: 1fr; }.settings-panel { position: static; }.income-form { grid-template-columns: repeat(2, 1fr); }.income-form .button { align-self: stretch; } }
@media (max-width: 800px) {
  body { font-size: 16px; }
  .sidebar, .menu-button { display: none; }
  .main { margin-left: 0; padding: calc(16px + env(safe-area-inset-top)) 12px calc(92px + env(safe-area-inset-bottom)); }
  .topbar { position: sticky; top: 0; z-index: 5; margin: -16px -12px 14px; padding: calc(13px + env(safe-area-inset-top)) 14px 12px; justify-content: flex-start; background: rgba(243,245,244,.94); backdrop-filter: blur(14px); }
  .topbar .eyebrow { display: none; }
  .topbar h1 { font-size: 22px; }
  .topbar > .button { display: none; }
  .month-picker { margin-left: auto; }
  .month-picker label { display: none; }
  .month-picker input { min-height: 42px; }
  .mobile-nav { position: fixed; z-index: 20; right: 10px; bottom: calc(8px + env(safe-area-inset-bottom)); left: 10px; min-height: 64px; padding: 6px; border: 1px solid rgba(255,255,255,.13); border-radius: 18px; display: grid; grid-template-columns: repeat(4, 1fr); background: rgba(16,41,31,.96); box-shadow: 0 15px 35px rgba(10,35,25,.3); backdrop-filter: blur(15px); }
  .mobile-nav a, .mobile-nav button { min-width: 0; min-height: 50px; border: 0; border-radius: 13px; display: grid; place-items: center; align-content: center; gap: 3px; background: transparent; color: #8faf9f; text-decoration: none; }
  .mobile-nav a.active, .mobile-nav button:active { background: rgba(255,255,255,.1); color: white; }
  .mobile-nav span { font-size: 17px; font-weight: 700; line-height: 1; }
  .mobile-nav small { font-size: 9px; font-weight: 600; }
  .mobile-fab { position: fixed; z-index: 21; right: 18px; bottom: calc(82px + env(safe-area-inset-bottom)); width: 54px; height: 54px; border: 0; border-radius: 18px; display: grid; place-items: center; background: var(--green); color: white; box-shadow: 0 12px 28px rgba(20,91,69,.35); font-size: 26px; }
  .stats-grid { margin-bottom: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .stat-card { min-height: 120px; padding: 14px; border-radius: 14px; }
  .stat-card--hero { grid-column: 1 / -1; }
  .stat-card strong { font-size: 15px; white-space: normal; }
  .status-card { grid-column: 1 / -1; min-height: 85px; }
  .panel { border-radius: 15px; }
  .panel-heading { padding: 17px 15px 13px; align-items: stretch; flex-direction: column; }
  .panel-heading h2 { font-size: 18px; }
  .table-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
  .search { grid-column: 1 / -1; min-height: 44px; }
  .search input { font-size: 13px; }
  .table-actions select { width: 100%; min-height: 42px; padding: 8px; font-size: 11px; }
  .table-wrap { padding: 0 10px 10px; overflow: visible; }
  table, tbody { min-width: 0; display: block; }
  thead { display: none; }
  tbody { display: grid; gap: 9px; }
  tbody tr { position: relative; padding: 13px; border: 1px solid var(--line); border-radius: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; background: white; box-shadow: 0 5px 18px rgba(31,58,49,.04); }
  tbody tr[hidden] { display: none; }
  tbody td { min-width: 0; padding: 0; border: 0; display: block; }
  tbody td::before { margin-bottom: 4px; display: block; color: #99a39f; content: attr(data-label); font-size: 8px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
  tbody td:first-child { grid-column: 1 / -1; padding-right: 94px; }
  tbody td:first-child::before, tbody td:last-child::before { display: none; }
  tbody td:nth-child(2) { grid-column: 1 / -1; }
  tbody td:nth-child(6) { position: absolute; top: 14px; right: 13px; }
  tbody td:last-child { grid-column: 1 / -1; }
  tbody td:last-child .icon-button { width: 100%; min-height: 40px; border: 1px solid var(--line); background: #f7f9f8; color: var(--green); font-size: 10px; }
  .credit-name strong { font-size: 13px; }
  .credit-logo { width: 38px; height: 38px; }
  .progress { width: 100%; height: 6px; }
  .progress-copy { font-size: 10px; }
  .progress-copy strong { font-size: 10px; }
  td strong { font-size: 11px; }
  td small { font-size: 9px; }
  .calculator { grid-template-columns: 1fr; }
  .calculator-copy { min-height: 170px; padding: 22px; }
  .calculator-copy h2 { font-size: 22px; }
  .calculator-form { padding: 16px; }
  .calc-inputs, .calc-result { grid-template-columns: 1fr; }
  .result-line { width: 100%; height: 1px; }
  .field { font-size: 10px; }
  .field input, .field select, .field textarea { min-height: 44px; font-size: 14px; }
  .money-flow, .salary-periods, .regular-plan { grid-template-columns: 1fr; }
  .flow-arrow { display: none; }
  .budget-hero { padding: 20px; gap: 18px; }
  .budget-hero__copy > strong { font-size: 30px; }
  .budget-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mini-stat { padding: 13px; }
  .mini-stat strong { font-size: 14px; }
  .budget-columns { grid-template-columns: 1fr; }
  .regular-period { padding: 10px 0 0; border-left: 0; border-top: 1px solid #cddfd6; }
  .income-form { padding: 0 14px 15px; grid-template-columns: 1fr; }
  .income-row { padding: 12px 14px; }
  .allocation-list { padding: 0 12px 13px; }
  .allocation-card { align-items: flex-start; }
  .allocation-parts { flex-wrap: wrap; gap: 7px 12px; }
  .allocation-parts span:last-child { width: 100%; margin-left: 0; }
  .settings-form { padding: 0 14px 16px; }
  dialog { width: 100%; max-width: none; max-height: 92dvh; margin: auto 0 0; border-radius: 22px 22px 0 0; overflow-y: auto; }
  dialog[open] { animation: sheet-up .2s ease-out; }
  .modal { padding: 20px 15px calc(18px + env(safe-area-inset-bottom)); }
  .form-grid { grid-template-columns: 1fr; gap: 12px; }
  .field--wide { grid-column: auto; }
  .modal-actions { position: sticky; bottom: calc(-18px - env(safe-area-inset-bottom)); padding: 12px 0 calc(18px + env(safe-area-inset-bottom)); align-items: stretch; flex-direction: column-reverse; background: white; }
  .danger-actions, .save-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .button { min-height: 44px; }
  .login-shell { grid-template-columns: 1fr; }
  .login-brand { min-height: 235px; padding: calc(24px + env(safe-area-inset-top)) 22px 36px; }
  .login-brand h1 { margin-top: 34px; font-size: 34px; letter-spacing: -2px; }
  .login-copy, .login-metric { display: none; }
  .login-panel { margin-top: -25px; padding: 12px; z-index: 2; }
  .login-card { padding: 24px 18px; border-radius: 18px; }
}
@keyframes sheet-up { from { transform: translateY(40px); opacity: .7; } to { transform: translateY(0); opacity: 1; } }