/* Visual layer: soft grey canvas, white rounded cards, pill controls, big bold numerals, blue + lime accents, dark tooltips.
   Colors are tokens under [data-theme="light"]; a [data-theme="dark"] block can be added later with the same names. */
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#eceef2; --surface:#ffffff; --sunk:#f3f4f6; --sunk-2:#e9ebef; --line:#eceef1; --line-2:#dfe2e7;
  --ink:#141414; --ink-2:#4b5059; --ink-3:#8b9099;
  --dark:#1f1f1f; --on-dark:#ffffff; --on-dark-2:#b9bcc2;
  --accent:#1463ff; --accent-ink:#ffffff; --accent-soft:#e6eeff;
  --lime:#c4f12f; --lime-soft:#f1fbcf;
  --inc:#1463ff; --exp:#c4f12f; --inv:#1f1f1f;
  --inc-h:#1463ff; --exp-h:#a9d81a; --inv-h:#1f1f1f;
  --good:#12a150; --bad:#ec3a2e; --good-soft:#e3f6ea; --bad-soft:#fde8e6;
  --up:#12a150; --down:#ec3a2e; --up-soft:#e3f6ea; --down-soft:#fde8e6;
  --shadow:0 1px 2px rgba(20,20,20,.04);
  --r-lg:28px; --r:24px; --r-sm:14px;
}
body{background:var(--bg);font-weight:500}
.app{max-width:1280px;gap:14px;padding-block:18px 120px}
h2{font-size:1.08rem;font-weight:700}

/* top bar */
.brand .mark{width:42px;height:42px;border-radius:12px;background:none;box-shadow:none}
.brand .mark svg{width:42px;height:42px}
.brand h1{font-size:1.5rem;font-weight:800;letter-spacing:-.02em}
.seg{background:var(--surface);padding:4px;gap:2px;box-shadow:var(--shadow)}
.seg button{min-height:38px;padding:6px 18px;color:var(--ink-2);font-weight:600}
.seg button[aria-pressed="true"]{background:var(--dark);color:var(--on-dark);box-shadow:none}
.panel .seg,.ledger-tools .seg{background:var(--sunk)}
.btn{border:0;background:var(--sunk);padding:10px 20px;font-weight:600;min-height:42px}
.btn:hover{background:var(--sunk-2)}
.btn.primary{background:var(--accent);color:var(--accent-ink)}
.btn.dark{background:var(--dark);color:var(--on-dark)}
.btn.ghost{background:transparent}
.btn.danger{background:var(--bad-soft);color:var(--bad)}
.top-actions>.btn{background:var(--surface)}

/* icon badges */
.badge{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--sunk);color:var(--accent)}
.badge svg{width:20px;height:20px}
.badge.green{background:var(--good);color:#fff}.badge.red{background:var(--bad);color:#fff}
.ph{display:flex;align-items:center;gap:12px;min-width:0}

/* rate ribbon */
.rate{border:0;border-radius:var(--r);padding:12px 20px;gap:16px}
.rate .val{font-size:1.4rem;font-weight:800;letter-spacing:-.01em}
.delta{padding:4px 11px;font-size:.8rem}

/* periods */
.periods button{border:0;background:var(--surface);min-height:40px;padding:6px 18px;font-weight:600}
.periods button[aria-pressed="true"]{background:var(--dark);color:var(--on-dark)}

.grid{gap:14px}.col{gap:14px}

/* balance card */
.card{background:var(--surface);color:var(--ink);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow);gap:18px}
.card::before{display:none}
.card .eyebrow{color:var(--ink-3);font-size:.82rem}
.card .net{font-size:clamp(2.5rem,9vw,3.6rem);font-weight:800;letter-spacing:-.035em;line-height:1.05}
.card .sub{color:var(--ink-2);display:inline-flex;align-self:flex-start;background:var(--sunk);border-radius:999px;padding:5px 12px;font-size:.84rem;max-width:100%}
.chip{background:var(--sunk);color:var(--ink);padding:6px 12px;font-size:.8rem}
.trio{gap:10px}
.trio>div{background:var(--sunk);border-radius:var(--r-sm);padding:12px 12px 10px;border-inline-start:0}
.trio .k{color:var(--ink-2)} .trio .k i{border-radius:50%;width:9px;height:9px}
.trio .v{font-size:1.12rem;font-weight:800}
.trio .u{color:var(--ink-3)}
.card .btn{background:var(--sunk);color:var(--ink)}
.card .btn.primary{background:var(--accent);color:#fff}

/* insights: three cards */
.insights{background:none;border:0;gap:14px}
.insights>div{background:var(--surface);border-radius:var(--r);padding:18px 18px 16px;gap:6px}
.insights>div+div{border:0!important}
.insights .eyebrow{display:inline-flex;align-self:flex-start;background:var(--sunk);border-radius:999px;padding:4px 11px;color:var(--ink-2);font-size:.76rem}
.insights .v{font-size:1.55rem;letter-spacing:-.02em}

/* panels */
.panel{border:0;border-radius:var(--r);padding:18px 20px;gap:14px}
.panel>header{align-items:center}
.cat .bar{height:10px;border-radius:999px}
.cat .bar span{background:var(--accent);border-radius:999px}
.cat:nth-child(even) .bar span{background:var(--lime)}
.emptybox{background:var(--sunk);border-radius:var(--r-sm)}
.dayview dl div{background:var(--sunk)}

/* ledger */
input,select,textarea{background:var(--sunk);border:1px solid transparent;border-radius:999px;padding:10px 16px}
textarea{border-radius:var(--r-sm)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);background:var(--surface)}
.day>.dh{border-bottom:0;padding:14px 4px 6px}
.row{border-bottom:1px solid var(--line);padding:12px 4px;border-radius:0}
.row:hover{background:var(--sunk)}
.row .ic{width:40px;height:40px;border-radius:50%;font-size:.9rem}
.row .ic.expense{background:var(--lime-soft)}
.row .ic.income{background:var(--accent-soft);color:var(--accent)}
.row .ic.invest{background:var(--dark);color:var(--on-dark)}
.row .a b{font-size:1rem}
.editor{border-bottom:1px solid var(--line)}

details.fold{border:0;border-radius:var(--r);padding:16px 20px}

/* sheets */
dialog.sheet{border-radius:var(--r-lg)}
.kinds{border-radius:999px;padding:4px}
.kinds span{border-radius:999px;padding:9px 4px}
.kinds input:checked+span{background:var(--dark);color:var(--on-dark)}
.amount-in{border-radius:var(--r-sm)!important;font-size:2rem!important}
.prev{border:0;background:var(--sunk);border-radius:var(--r-sm)}
.prev th{background:var(--sunk-2)}

.fab{background:var(--accent);padding:14px 22px;box-shadow:0 12px 28px -10px rgba(20,99,255,.55)}
.toast{background:var(--dark);color:var(--on-dark);padding:10px 20px}
.banner{border-radius:var(--r-sm)}

/* login */
.login .card .sub{background:none;padding:0}
.seg button{white-space:nowrap}
@media (max-width:620px){
  .panel .seg button{padding-inline:10px;min-height:36px}
  .trio{gap:6px}.trio>div{padding:10px 8px}.trio .v{font-size:.95rem}
}

/* ---- refinements: alignment and type ---- */
/* Tight tracking only on digits; Persian words keep normal spacing so letters stay joined. */
.brand h1,h1,h2,.insights .v{letter-spacing:0}

/* top bar: brand and unit toggle share one row */
.top{flex-wrap:nowrap}
.top-actions{flex:none}
.brand{flex:1 1 auto}

/* dollar ribbon: value on the start side, change badge on the end side */
.rate{justify-content:space-between}

/* panel headers: title row, controls row; controls span the full width on phones */
.panel>header{display:flex;flex-wrap:wrap;gap:12px}
.rate-sum{gap:8px}
@media (max-width:620px){
  .brand h1{font-size:1.3rem}
  .top-actions{width:auto}
  .panel>header{flex-direction:column;align-items:stretch}
  .panel>header>.faint{align-self:flex-start}
  .panel>header .seg,.ledger-tools .seg{display:flex;width:100%}
  .panel>header .seg button,.ledger-tools .seg button{flex:1 1 0;padding-inline:6px}
  .ledger-tools{flex-direction:column;align-items:stretch}
  .ledger-tools input{flex:none;width:100%}
  .periods{justify-content:flex-start}
  .rate{padding:14px 16px}
  .rate .val{font-size:1.25rem}
}
.rate-sum b{font-size:1.6rem;letter-spacing:-.02em}
.insights .v{white-space:nowrap;font-size:clamp(1.15rem,1.9vw,1.5rem)}

/* ---- big numerals: digits tight, unit words at normal tracking so Persian letters stay joined ---- */
.card .net,.trio .v,.insights .v{letter-spacing:0;font-variant-numeric:normal;display:flex;align-items:baseline;flex-wrap:wrap;column-gap:0}
.card .net{font-size:clamp(2.6rem,8vw,3.5rem);line-height:1.25}
.d{font-weight:800;letter-spacing:-.045em;font-variant-numeric:normal;white-space:nowrap}
.w{display:inline-block;letter-spacing:0;font-weight:600;color:var(--ink-2);white-space:nowrap;line-height:1.6;margin-inline-start:.32em}
.card .net .w{font-size:.36em}
.trio .v{font-size:1.2rem;line-height:1.4}
.trio .v .w{font-size:.62em;margin-inline-start:.28em}
.insights .v{font-size:clamp(1.3rem,2vw,1.6rem);line-height:1.4}
.insights .v .w{font-size:.58em}
.insights .v.num,.rate .val,.rate-sum b{font-variant-numeric:normal;letter-spacing:-.03em}
.rate .val .faint{letter-spacing:0;font-size:.62em;font-weight:600;margin-inline-start:.2em}

/* spending meter */
.meter{display:flex;flex-direction:column;gap:10px}
.meter-top{display:flex;justify-content:space-between;align-items:baseline;color:var(--ink-2);font-size:.86rem;font-weight:600}
.meter-top b{color:var(--ink);font-size:1.05rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:normal}
.track{display:flex;gap:3px;height:10px;background:var(--sunk);border-radius:999px;overflow:hidden}
.track span{height:100%;border-radius:999px;flex:none}
@media (max-width:620px){.trio .v{font-size:1rem}}
.track span{background:var(--accent)}
.track.over{background:var(--bad-soft)}

/* proportional Persian digits everywhere: tabular figures in Vazirmatn leave wide gaps between digits */
.num{font-variant-numeric:normal}
.cat .num,.row .a b,.rate-sum b{letter-spacing:-.02em}

/* ---- balance meter: in hand / spending / assets ---- */
.track{gap:2px;height:12px}
.track span{border-radius:0;height:100%;flex-shrink:1}
.track span:first-child{border-start-start-radius:999px;border-end-start-radius:999px}
.track span:last-child{border-start-end-radius:999px;border-end-end-radius:999px}
.track:has(span:only-child) span{border-radius:999px}
.track.over span:first-child{background:var(--accent)}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.8rem;color:var(--ink-2)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:8px;height:8px;border-radius:50%;flex:none}
.legend b{color:var(--ink);font-weight:700}

/* ---- categories: own icon and color each ---- */
.cat{grid-template-columns:32px minmax(0,9em) minmax(0,1fr) 8.6em;gap:10px;min-height:40px}
.cat .ci,.row .ic{display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--c,#64748b) 14%,var(--surface));font-size:1rem;line-height:1}
.cat .ci{width:32px;height:32px}
.cat .bar{height:10px;border-radius:999px;background:var(--sunk)}
.cat .bar span,.cat:nth-child(even) .bar span{background:var(--c,var(--accent));border-radius:999px}
.cat .amt{text-align:end}
.row .ic.expense,.row .ic.income,.row .ic.invest{background:color-mix(in srgb,var(--c,#64748b) 14%,var(--surface));color:inherit;font-size:1.05rem}
@media (max-width:620px){.cat{grid-template-columns:30px minmax(0,6.6em) minmax(0,1fr) 7.6em;gap:8px}.cat .ci{width:30px;height:30px;font-size:.9rem}}

/* ---- dollar refresh ---- */
.ph .iconbtn{margin-inline-start:auto}
.iconbtn{width:40px;height:40px;flex:none;border:0;border-radius:50%;display:grid;place-items:center;background:var(--sunk);color:var(--ink);cursor:pointer}
.iconbtn:hover{background:var(--sunk-2)}
.iconbtn svg{width:18px;height:18px}
.iconbtn.spin svg{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.panel>header>.ph{flex:1 1 auto}

/* ---- Face ID offer and settings ---- */
.offer{display:flex;align-items:center;gap:12px;background:var(--surface);border-radius:var(--r);padding:14px 16px}
.offer[hidden]{display:none}
.offer .badge{background:var(--accent-soft);color:var(--accent)}
.offer .t{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.offer .t span{color:var(--ink-2);font-size:.85rem}
.offer .a{display:flex;gap:6px;flex:none}
@media (max-width:620px){.offer{flex-wrap:wrap}.offer .a{width:100%}.offer .a .btn{flex:1}}
.pk-set{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.pk-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;width:100%}
.pk-list:empty{display:none}
.pk-list li{display:flex;justify-content:space-between;align-items:center;background:var(--sunk);border-radius:var(--r-sm);padding:8px 12px}
.pk-list li span{display:flex;flex-direction:column}
.pk-list small{color:var(--ink-3);font-size:.76rem}
.btn[hidden]{display:none}

/* ---- Jalali date picker ---- */
input.jdate{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b9099' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 14px center;background-size:18px;padding-inline-end:42px}
.jcal{width:100%;flex-basis:100%;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);padding:12px;display:flex;flex-direction:column;gap:8px;box-shadow:0 12px 32px -18px rgba(20,20,20,.35)}
.jcal[hidden]{display:none}
.jh{display:flex;align-items:center;justify-content:space-between;gap:8px}
.jt{display:flex;flex-direction:column;align-items:center;gap:1px}
.jt b{font-size:1rem;font-weight:800}
.jt small{color:var(--ink-3);font-size:.74rem}
.jcal .nav{width:38px;height:38px;border:0;border-radius:50%;background:var(--sunk);color:var(--ink);font-size:1.4rem;line-height:1;cursor:pointer}
.jw,.jg{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.jw span{color:var(--ink-3);font-size:.76rem;font-weight:700;padding:2px 0}
.jg .d{border:0;background:none;border-radius:12px;min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;cursor:pointer;color:var(--ink);font-family:inherit}
.jg .d b{font-size:.98rem;font-weight:700}
.jg .d small{font-size:.62rem;color:var(--ink-3)}
.jg .d:hover{background:var(--sunk)}
.jg .d.fri b{color:var(--bad)}
.jg .d.today{box-shadow:inset 0 0 0 1.5px var(--accent)}
.jg .d.sel{background:var(--dark)}
.jg .d.sel b,.jg .d.sel small{color:var(--on-dark)}
.jg .d:disabled{opacity:.3;cursor:default;background:none}
.jf{display:flex;justify-content:space-between}
.jf .btn{min-height:36px;padding:6px 14px}

/* ---- app lock ---- */
html.veiled .app,html.veiled .fab{visibility:hidden}
.top-actions{display:flex;align-items:center;gap:8px}
.lockbtn{background:var(--surface);box-shadow:var(--shadow);width:46px;height:46px}