/* Kundalik — asosiy uslublar. Layout: desktop = chap menyu + kontent; telefon = kontent + pastki tab bar + FAB */
:root {
  --bg: #f3f2ee; --paper: #ffffff; --paper-2: #f7f6f2; --fg: #1c2328; --muted: #68737a; --line: #e2e0d8;
  --accent: #0f6e72; --accent-soft: #d9ecec; --accent-deep: #0b4f52;
  --income: #2e8b57; --income-soft: #dff1e6; --expense: #d2553c; --expense-soft: #f9e3dd;
  --warn: #c98a12; --warn-soft: #f8ecd2; --bad: #c0392b; --bad-soft: #f8dcd8;
  --high: #d2553c; --mid: #c98a12; --low: #4b8bd4;
  --shadow: 0 10px 30px rgba(28,35,40,.10);
  --display: "Manrope", "Segoe UI", system-ui, sans-serif;
  --body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --tabbar-h: 64px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg:#141a1d; --paper:#1d2429; --paper-2:#222b31; --fg:#e8ebe9; --muted:#97a3a9; --line:#2f3a41;
  --accent:#4fb3b6; --accent-soft:#1a3538; --accent-deep:#0f5457; --income:#5ec98a; --income-soft:#1b3326; --expense:#f08a72; --expense-soft:#3d241f;
  --warn:#e0a63a; --warn-soft:#3a2f17; --bad:#f07a6e; --bad-soft:#3d1f1c; --high:#f08a72; --mid:#e0a63a; --low:#7fb1ea; --shadow:0 10px 30px rgba(0,0,0,.4); color-scheme: dark } }
:root[data-theme="dark"] {
  --bg:#141a1d; --paper:#1d2429; --paper-2:#222b31; --fg:#e8ebe9; --muted:#97a3a9; --line:#2f3a41;
  --accent:#4fb3b6; --accent-soft:#1a3538; --accent-deep:#0f5457; --income:#5ec98a; --income-soft:#1b3326; --expense:#f08a72; --expense-soft:#3d241f;
  --warn:#e0a63a; --warn-soft:#3a2f17; --bad:#f07a6e; --bad-soft:#3d1f1c; --high:#f08a72; --mid:#e0a63a; --low:#7fb1ea; --shadow:0 10px 30px rgba(0,0,0,.4); color-scheme: dark }

* { box-sizing: border-box }
html, body { margin: 0; height: 100% }
body { background: var(--bg); color: var(--fg); font-family: var(--body); font-size: 15px; line-height: 1.45; -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none }
h1,h2,h3,h4 { font-family: var(--display); margin: 0; line-height: 1.2; text-wrap: balance }
button, input, select, textarea { font: inherit; color: inherit }
button { cursor: pointer; background: none; border: 0; padding: 0 }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.num { font-variant-numeric: tabular-nums }
[hidden] { display: none !important }

/* ===== Karkas ===== */
#app { display: grid; grid-template-columns: 230px minmax(0,1fr); height: 100% }
.sidebar { background: var(--paper); border-right: 1px solid var(--line); padding: 18px 12px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto }
.brand { font-family: var(--display); font-weight: 800; font-size: 20px; padding: 6px 10px 18px; display: flex; align-items: center; gap: 9px }
.brand i { width: 26px; height: 26px; border-radius: 8px; background: var(--accent); display: inline-block }
.sidebar .nav { text-align: left; padding: 9px 12px; border-radius: 10px; font-weight: 600; color: var(--muted); display: flex; gap: 10px; align-items: center; width: 100% }
.sidebar .nav[aria-current="page"] { background: var(--accent-soft); color: var(--accent) }
.sidebar .nav svg { width: 18px; height: 18px; flex: none }
.sidebar .nav .cnt { margin-left: auto; font-size: 11px; background: var(--expense-soft); color: var(--expense); padding: 1px 7px; border-radius: 999px; font-weight: 700 }
.sidebar .spacer { flex: 1 }
.sidebar .foot { font-size: 12px; color: var(--muted); padding: 12px 12px 0; border-top: 1px solid var(--line); line-height: 1.5 }
.main { display: flex; flex-direction: column; min-width: 0; height: 100% }
.topbar { display: flex; align-items: center; gap: 10px; padding: 12px 24px; border-bottom: 1px solid var(--line); background: var(--paper); padding-top: max(12px, env(safe-area-inset-top, 0px)) }
.topbar h1 { font-size: 18px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.icon-btn { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: var(--muted) }
.icon-btn:hover { background: var(--paper-2) } .icon-btn svg { width: 20px; height: 20px }
.content { flex: 1; overflow-y: auto; padding: 20px 24px 40px; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)) }
.tabbar, .fab { display: none }

@media (max-width: 760px) {
  #app { grid-template-columns: 1fr }
  .sidebar { display: none }
  .topbar { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }
  .topbar .btn-add { display: none }
  .content { padding: 14px 16px calc(var(--tabbar-h) + 40px); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }
  .tabbar { display: grid; position: fixed; left: 0; right: 0; bottom: 0; grid-template-columns: repeat(5, 1fr); background: var(--paper); border-top: 1px solid var(--line); padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px)); z-index: 20 }
  .tabbar button { display: grid; justify-items: center; gap: 3px; font-size: 11px; color: var(--muted); font-weight: 600; position: relative }
  .tabbar button[aria-current="page"] { color: var(--accent) }
  .tabbar svg { width: 22px; height: 22px }
  .tabbar .cnt { position: absolute; top: -4px; right: 14%; font-size: 10px; background: var(--expense); color: #fff; padding: 0 5px; border-radius: 999px; font-weight: 700 }
  .fab { display: grid; place-items: center; position: fixed; right: max(18px, env(safe-area-inset-right, 0px)); bottom: calc(var(--tabbar-h) + 18px + env(safe-area-inset-bottom, 0px)); width: 56px; height: 56px; border-radius: 18px; background: var(--accent); color: #fff; font-size: 30px; line-height: 1; box-shadow: 0 8px 20px rgba(15,110,114,.4); z-index: 21 }
}

/* ===== Komponentlar ===== */
.stack { display: grid; gap: 14px }
.grid2 { display: grid; gap: 14px; grid-template-columns: 1fr }
.grid4 { display: grid; gap: 10px; grid-template-columns: 1fr 1fr }
@media (min-width: 761px) { .grid2 { grid-template-columns: 1fr 1fr } .grid4 { grid-template-columns: repeat(4, 1fr) } .stack > .wide { grid-column: 1 / -1 } }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; min-width: 0 }
.card > h3 { font-size: 14px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px }
.card > h3 .link { font-size: 12px; color: var(--accent); font-weight: 600 }
.card > h3 .sub { font-size: 12px; color: var(--muted); font-weight: 600 }
.greet { display: flex; justify-content: space-between; align-items: end; padding: 4px 2px }
.greet h2 { font-size: 22px; font-weight: 800 }
.greet p { margin: 2px 0 0; color: var(--muted); font-size: 13px }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-weight: 800; font-family: var(--display) }

.stat { display: grid; gap: 2px; align-content: start }
.stat .lbl { font-size: 12px; color: var(--muted); font-weight: 600 }
.stat .val { font-family: var(--display); font-size: 20px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap }
.stat .sub { font-size: 12px; color: var(--muted) }
.stat.in .val { color: var(--income) } .stat.out .val { color: var(--expense) }
.delta { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 6px; white-space: nowrap }
.delta.up { color: var(--income); background: var(--income-soft) } .delta.down { color: var(--expense); background: var(--expense-soft) } .delta.neutral { color: var(--muted); background: var(--paper-2) }
.ring-row { display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: center }
.ring-row .big { font-family: var(--display); font-size: 24px; font-weight: 800 }
.ring-row .big small { font-size: 13px; color: var(--muted); font-weight: 600 }
.ring-row .sub { font-size: 12px; color: var(--muted) }

.btn { background: var(--accent); color: #fff; padding: 9px 16px; border-radius: 10px; font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; justify-content: center }
.btn.ghost { background: var(--paper-2); color: var(--fg); border: 1px solid var(--line) }
.btn.danger { background: var(--bad-soft); color: var(--bad) }
.btn.in { background: var(--income-soft); color: var(--income) } .btn.out { background: var(--expense-soft); color: var(--expense) }
.btn.block { width: 100% }
.btn:disabled { opacity: .5; cursor: default }
.chips { display: flex; gap: 6px; flex-wrap: wrap }
.chip { font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--muted) }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff }
.chip .cnt { opacity: .8 }
.addbar { display: flex; gap: 8px; align-items: center; background: var(--paper); border: 1px dashed var(--line); border-radius: 12px; padding: 4px 6px 4px 14px }
.addbar b { color: var(--accent); font-size: 20px }
.addbar input { flex: 1; min-width: 0; border: 0; background: none; padding: 8px 0; font-size: 14px }
.addbar input::placeholder { color: var(--muted) }
.addbar .btn { padding: 7px 12px }
.hint { font-size: 12px; color: var(--muted) }

/* Vazifa qatori */
.task { display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line) }
.task:first-child { border-top: 0 }
.task .box { width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--muted); position: relative; flex: none }
.task .box.p3 { border-color: var(--high) } .task .box.p2 { border-color: var(--mid) } .task .box.p1 { border-color: var(--low) }
.task.done .box { background: var(--accent); border-color: var(--accent) }
.task.done .box::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) }
.task.done .t { text-decoration: line-through; color: var(--muted) }
.task .body { min-width: 0; text-align: left; display: grid }
.task .t { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.task .m { font-size: 12px; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap }
.task .m .late { color: var(--bad); font-weight: 600 }
.task .time { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap }
.pri { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle }
.pri.p3 { background: var(--high) } .pri.p2 { background: var(--mid) } .pri.p1 { background: var(--low) }

/* Amal qatori */
.tx { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); width: 100%; text-align: left }
.tx:first-child { border-top: 0 }
.tx .ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: 16px; background: var(--paper-2); font-weight: 800; font-family: var(--display); color: var(--muted) }
.tx .ic.in { background: var(--income-soft); color: var(--income) } .tx .ic.out { background: var(--expense-soft); color: var(--expense) }
.tx .body { min-width: 0 } .tx .t { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .tx .m { font-size: 12px; color: var(--muted) }
.tx .amt { font-family: var(--display); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap }
.tx .amt.in { color: var(--income) } .tx .amt.out { color: var(--expense) }
.day-h { font-size: 12px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 12px 0 4px; display: flex; justify-content: space-between }
.day-h:first-child { padding-top: 0 }

.balance { background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color: #fff; border-radius: 18px; padding: 18px }
.balance .lbl { font-size: 12px; opacity: .85; font-weight: 600; display: flex; justify-content: space-between; align-items: center }
.balance .lbl button { color: #fff; opacity: .9; font-weight: 700; font-size: 14px; padding: 0 6px }
.balance .val { font-family: var(--display); font-size: 28px; font-weight: 800; letter-spacing: -.01em }
.balance .row { display: flex; gap: 18px; margin-top: 12px; font-size: 13px; flex-wrap: wrap }
.balance .row b { display: block; font-family: var(--display); font-size: 15px }
.two-btn { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.two-btn .btn { padding: 12px; border-radius: 12px; font-weight: 700 }

.bars { display: grid; gap: 8px; font-size: 13px }
.bars > div { display: grid; grid-template-columns: minmax(80px, 110px) 1fr auto; gap: 8px; align-items: center }
.bars .bar { height: 8px; border-radius: 4px; background: var(--paper-2); overflow: hidden }
.bars .bar i { display: block; height: 100%; background: var(--expense); border-radius: 4px }
.bars .num { text-align: right; color: var(--muted); white-space: nowrap }
.legend { display: grid; gap: 6px; font-size: 13px; flex: 1; min-width: 150px }
.legend div { display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; align-items: center }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: block }
.donut-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap }

.insight { display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px }
.insight:first-child { border-top: 0 }
.insight .ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 15px; background: var(--paper-2) }
.insight.good .ic { background: var(--income-soft) } .insight.warn .ic { background: var(--warn-soft) } .insight.bad .ic { background: var(--bad-soft) } .insight.info .ic { background: var(--accent-soft) }
.insight .m { color: var(--muted); font-size: 12px }
.chart { width: 100%; max-width: 460px; height: auto; display: block; margin: 0 auto }
.chart text { font-family: var(--body); font-size: 11px; fill: var(--muted) }
.empty { text-align: center; color: var(--muted); padding: 28px 10px; font-size: 14px }
.empty.small { padding: 14px }
.empty b { display: block; color: var(--fg); font-family: var(--display); margin-bottom: 4px }

/* Qarz kartasi */
.debt { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); width: 100%; text-align: left }
.debt:first-child { border-top: 0 }
.debt .av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-family: var(--display) }
.debt .av.lent { background: var(--income-soft); color: var(--income) } .debt .av.borrowed { background: var(--expense-soft); color: var(--expense) }
.debt .body { min-width: 0 } .debt .t { font-weight: 600 } .debt .m { font-size: 12px; color: var(--muted) }
.debt .m .late { color: var(--bad); font-weight: 600 }
.debt .amt { text-align: right } .debt .amt b { display: block; font-family: var(--display); font-variant-numeric: tabular-nums; white-space: nowrap }
.debt .amt small { font-size: 11px; color: var(--muted) }
.debt .prog { height: 4px; background: var(--paper-2); border-radius: 2px; margin-top: 6px; overflow: hidden } .debt .prog i { display: block; height: 100%; background: var(--accent) }
.debt.closed { opacity: .55 }

/* Sozlamalar */
.setting { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line) }
.setting:first-child { border-top: 0 }
.setting .lbl { font-weight: 500 } .setting .desc { font-size: 12px; color: var(--muted) }
.setting select, .setting input { border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; background: var(--bg); max-width: 180px }
.taglist { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0 }
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; padding: 4px 6px 4px 10px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--line) }
.tag button { color: var(--muted); font-size: 16px; line-height: 1; padding: 0 4px } .tag button:hover { color: var(--bad) }

/* ===== Dialog / forma ===== */
dialog { border: 0; padding: 0; background: var(--paper); color: var(--fg); border-radius: 20px; width: min(520px, calc(100% - 32px)); box-shadow: var(--shadow); max-height: calc(100% - 40px) }
dialog::backdrop { background: rgba(10,14,16,.45) }
dialog .dlg { padding: 18px 20px 20px; display: grid; gap: 14px; max-height: calc(100vh - 60px); overflow-y: auto }
dialog h2 { font-size: 18px; display: flex; justify-content: space-between; align-items: center }
dialog h2 .icon-btn { margin: -6px -8px -6px 0 }
@media (max-width: 760px) {
  dialog { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 22px 22px 0 0; max-height: 92% }
  dialog .dlg { padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)) }
}
.field { display: grid; gap: 5px }
.field label { font-size: 12px; font-weight: 600; color: var(--muted) }
.field input, .field select, .field textarea { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--bg); width: 100%; font-size: 15px }
.field textarea { resize: vertical; min-height: 60px }
.field input.big { font-size: 24px; font-weight: 800; font-family: var(--display); text-align: center; padding: 12px }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--paper-2); border-radius: 10px; padding: 3px; gap: 3px }
.seg button { padding: 8px; border-radius: 8px; font-weight: 600; color: var(--muted); font-size: 13px }
.seg button[aria-pressed="true"] { background: var(--paper); color: var(--fg); box-shadow: 0 1px 3px rgba(0,0,0,.12) }
.seg button.in[aria-pressed="true"] { color: var(--income) } .seg button.out[aria-pressed="true"] { color: var(--expense) }
.actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap }
.actions .btn.danger { margin-right: auto }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px } .check input { width: 18px; height: 18px; accent-color: var(--accent) }
.menu { display: grid; gap: 4px }
.menu button { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; font-weight: 600; text-align: left; font-size: 15px }
.menu button:hover { background: var(--paper-2) }
.menu button .ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--paper-2); font-size: 17px }
.menu button.danger { color: var(--bad) }
.pay-row { display: flex; justify-content: space-between; font-size: 13px; padding: 6px 0; border-top: 1px solid var(--line); align-items: center; gap: 8px }
.pay-row .del { color: var(--muted); font-size: 16px; padding: 0 4px }

/* Kirish / sozlash ekrani */
#app.auth .sidebar, #app.auth .tabbar, #app.auth .fab, #app.auth .btn-add, #app.auth #btn-settings { display: none !important }
#app.auth { grid-template-columns: 1fr }
.auth-box { max-width: 400px; margin: 8vh auto 0; padding: 22px 22px 18px }
.auth-err { color: var(--bad); font-size: 13px; font-weight: 600; min-height: 18px; margin-top: 8px }
#toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); background: var(--fg); color: var(--bg); padding: 10px 16px; border-radius: 10px; font-size: 14px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 50; max-width: calc(100% - 32px) }
@media (max-width: 760px) { #toast { bottom: calc(var(--tabbar-h) + 84px + env(safe-area-inset-bottom, 0px)) } }
#toast.show { opacity: 1 }
.period { display: flex; align-items: center; gap: 6px; justify-content: space-between }
.period b { font-family: var(--display); font-size: 15px }
.period .icon-btn { width: 32px; height: 32px }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important } }