/* ==========================================================================
   My Wallet — design system
   --------------------------------------------------------------------------
   Layers (lowest → highest priority):
     reset · tokens · base · layout · components · motion · desktop · utilities
   Every colour, radius, space, type size, shadow, z-index and timing used by
   the app comes from the tokens below, so the whole UI changes in one place.
   ========================================================================== */
@layer reset, tokens, base, layout, components, motion, desktop, utilities;

/* ------------------------------------------------------------------ reset */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  html, body { margin: 0; height: 100%; }
  h1, h2, p { margin: 0; }
  button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
  input, select { font: inherit; color: var(--text); }
  table { border-collapse: collapse; }
}

/* ----------------------------------------------------------------- tokens */
@layer tokens {
  :root {
    /* brand + semantic colours */
    --brand: #6c5ce7;  --brand-2: #8e7dff;  --brand-3: #a78bfa;
    --primary: var(--brand);  --primary2: var(--brand-2);      /* legacy names used by JS */
    --inc: #10b981;    --exp: #ef4444;
    --inc-strong: #059669;  --exp-strong: #dc2626;

    /* theme surfaces (light) */
    --bg: #f3f4fa;  --card: #fff;  --chip: #f1f2f9;  --line: #e8eaf3;
    --text: #111827;  --muted: #6b7280;
    --shadow: 0 6px 24px rgb(40 40 90 / .08);
    --shadow-hover: 0 10px 28px rgb(40 40 90 / .14);
    --ink-inverse: #111827;               /* tooltip / toast background */

    /* tints derived from the palette */
    --tint-brand:       color-mix(in srgb, var(--brand) 12%, transparent);
    --tint-brand-hover: color-mix(in srgb, var(--brand) 18%, transparent);
    --tint-inc:         color-mix(in srgb, var(--inc) 15%, transparent);
    --tint-exp:         color-mix(in srgb, var(--exp) 12%, transparent);
    --ring:             0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent);

    /* gradients + brand shadows */
    --grad-brand: linear-gradient(135deg, var(--brand), var(--brand-2));
    --grad-hero:  linear-gradient(135deg, var(--brand), var(--brand-2) 60%, var(--brand-3));
    --grad-inc:   linear-gradient(135deg, var(--inc-strong), var(--inc));
    --grad-exp:   linear-gradient(135deg, var(--exp-strong), var(--exp));
    --shadow-brand: 0 10px 24px color-mix(in srgb, var(--brand) 45%, transparent);
    --shadow-hero:  0 12px 30px color-mix(in srgb, var(--brand) 35%, transparent);

    /* space scale (4px base) */
    --sp-0: 2px;  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;
    --sp-5: 20px; --sp-6: 24px; --sp-7: 32px;

    /* radius scale */
    --r-1: 8px;  --r-2: 10px; --r-3: 12px; --r-4: 14px; --r-5: 16px;
    --r-6: 20px; --r-7: 24px; --r-8: 28px; --r-pill: 999px;

    /* type scale */
    --fs-1: 10px; --fs-2: 11px; --fs-3: 12px; --fs-4: 13px; --fs-5: 14px; --fs-6: 15px;
    --fs-7: 17px; --fs-8: 20px; --fs-9: 22px; --fs-10: 34px; --fs-11: 50px;
    --fw-medium: 600; --fw-bold: 700; --fw-black: 800;
    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Bengali", sans-serif;

    /* stacking */
    --z-nav: 5; --z-fab: 6; --z-scrim: 20; --z-sheet: 21; --z-dialog: 40; --z-toast: 50;

    /* motion */
    --ease: cubic-bezier(.2, .8, .2, 1);
    --t-fast: .15s;  --t-base: .25s;  --t-slow: .35s;

    /* layout */
    --app-w: 520px;  --side-w: 230px;
  }

  /* theme surfaces (dark) — applied by choice or by the device setting */
  :root[data-theme=dark] {
    --bg: #0f1117;  --card: #1a1d27;  --chip: #242836;  --line: #272b38;
    --text: #f3f4f6;  --muted: #9ca3af;
    --shadow: 0 6px 24px rgb(0 0 0 / .35);
    --shadow-hover: 0 10px 28px rgb(0 0 0 / .5);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme=light]) {
      --bg: #0f1117;  --card: #1a1d27;  --chip: #242836;  --line: #272b38;
      --text: #f3f4f6;  --muted: #9ca3af;
      --shadow: 0 6px 24px rgb(0 0 0 / .35);
      --shadow-hover: 0 10px 28px rgb(0 0 0 / .5);
    }
  }
}

/* ------------------------------------------------------------------- base */
@layer base {
  html, body { background: var(--bg); color: var(--text); font-family: var(--font); }
  body { overscroll-behavior: none; }
  body.framed { background: var(--line); }
  h1 { font-size: var(--fs-9); margin-bottom: var(--sp-4); }
  h2 { font-size: var(--fs-4); margin: var(--sp-6) 0 var(--sp-3); color: var(--muted); font-weight: var(--fw-bold); letter-spacing: .6px; }
  :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
  input:focus-visible, select:focus-visible { outline: 0; }
  button { transition: transform var(--t-fast), background var(--t-base), color var(--t-base), opacity var(--t-base); }
  button:active { transform: scale(.96); }
  .brand, .fl { display: none; }
}

/* ----------------------------------------------------------------- layout */
@layer layout {
  #app { max-width: var(--app-w); margin: 0 auto; height: 100%; display: flex; flex-direction: column; position: relative; background: var(--bg); }
  body.framed #app { box-shadow: 0 0 0 1px var(--line), 0 24px 70px rgb(0 0 0 / .18); }
  main { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
         padding: calc(env(safe-area-inset-top) + var(--sp-4)) var(--sp-4) 150px; }

  .topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); }
  .tbtns { display: flex; gap: var(--sp-2); align-items: center; margin-left: auto; }
  .logo { font-weight: var(--fw-black); font-size: 18px; letter-spacing: -.3px; }

  nav { position: fixed; bottom: 0; left: 50%; translate: -50% 0; width: 100%; max-width: var(--app-w); display: flex;
        background: var(--card); border-top: 1px solid var(--line);
        padding: var(--sp-2) var(--sp-2) calc(env(safe-area-inset-bottom) + var(--sp-2)); z-index: var(--z-nav); }

  .hgrid, .rgrid { display: block; }
  .monthbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); }
  .sum3 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: var(--sp-4); }
  .sum3 .wide { grid-column: span 2; }
  .kpis { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: var(--sp-3); }
  .row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) 0; border-bottom: 1px solid var(--line); }
  .row:last-child { border: 0; }
  .row small { display: block; color: var(--muted); font-size: var(--fs-3); margin-top: var(--sp-0); }
}

/* ------------------------------------------------------------- components */
@layer components {

  /* surfaces */
  .card { background: var(--card); border-radius: var(--r-6); padding: var(--sp-4); box-shadow: var(--shadow); }
  .card.tight { padding: var(--sp-2) var(--sp-3); }
  .card.tight-y { padding-block: var(--sp-2); }
  .sum3 .card, .kpis .card { padding: var(--sp-4) var(--sp-4); }
  .sum3 small, .kpis small { color: var(--muted); font-size: var(--fs-3); }
  .sum3 b { display: block; font-size: var(--fs-8); margin-top: var(--sp-1); }
  .sum3 .sub { font-size: var(--fs-3); color: var(--muted); margin-top: var(--sp-2); line-height: 1.7; }
  .sum3 .card > div:last-child:not(.sub) { margin-top: var(--sp-2); }
  .kpis b { display: block; font-size: 19px; margin: var(--sp-1) 0 var(--sp-0); }
  .kpis .k2 { font-size: var(--fs-3); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rangenote { color: var(--muted); font-size: var(--fs-3); margin: var(--sp-3) var(--sp-0) 0; }
  .vsnote { font-size: var(--fs-3); color: var(--muted); margin: var(--sp-2) var(--sp-1) 0; }
  .foot { color: var(--muted); font-size: var(--fs-3); line-height: 1.6; margin: var(--sp-4) var(--sp-2); }
  .ins .in { padding: var(--sp-2) 0; font-size: var(--fs-5); line-height: 1.5; border-bottom: 1px solid var(--line); }
  .ins .in:last-child { border: 0; }

  /* top bar buttons */
  .vbtn { display: flex; gap: var(--sp-2); align-items: center; background: var(--card); box-shadow: var(--shadow);
          padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill); font-size: var(--fs-4); font-weight: var(--fw-bold); margin-left: auto; }
  .thbtn, .round { width: 38px; height: 38px; border-radius: 50%; background: var(--card); box-shadow: var(--shadow); font-size: 17px; }
  .round { font-size: 18px; }
  .round:hover { background: var(--chip); }

  /* bottom navigation + FAB */
  nav button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--sp-0); font-size: var(--fs-2);
               color: var(--muted); padding: var(--sp-2) 0; border-radius: var(--r-3); }
  nav button .i { font-size: 22px; filter: grayscale(1); opacity: .7; transition: transform var(--t-base), filter var(--t-base), opacity var(--t-base); }
  nav button.on { color: var(--brand); font-weight: var(--fw-bold); }
  nav button.on .i { filter: none; opacity: 1; transform: translateY(-2px) scale(1.12); }
  #fab { position: fixed; right: max(var(--sp-5), calc(50% - 240px)); bottom: calc(env(safe-area-inset-bottom) + 84px);
         width: 62px; height: 62px; border-radius: 50%; background: var(--grad-brand); color: #fff; line-height: 1;
         box-shadow: var(--shadow-brand); z-index: var(--z-fab); display: flex; align-items: center; justify-content: center; gap: var(--sp-2); }
  #fab b { font-size: var(--fs-10); font-weight: 400; transition: transform var(--t-base); }
  #fab:hover b { transform: rotate(90deg); }

  /* hero balance card */
  .hero { background: var(--grad-hero); color: #fff; border-radius: var(--r-7); padding: var(--sp-5); box-shadow: var(--shadow-hero); }
  .hero small { opacity: .85; font-size: var(--fs-4); }
  .hero .big { font-size: var(--fs-10); font-weight: var(--fw-black); margin: var(--sp-1) 0 var(--sp-4); letter-spacing: -.5px; }
  .hero .two { display: flex; gap: var(--sp-3); }
  .hero .pill { flex: 1; background: rgb(255 255 255 / .16); border-radius: var(--r-5); padding: var(--sp-3); }
  .hero .pill b { display: block; font-size: var(--fs-7); margin-top: var(--sp-0); }
  .monthbar .t { font-size: var(--fs-8); font-weight: var(--fw-black); }

  /* entry list */
  .day { display: flex; justify-content: space-between; font-size: var(--fs-4); color: var(--muted); margin: var(--sp-5) var(--sp-1) var(--sp-2); font-weight: var(--fw-medium); }
  .item { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-3); background: var(--card);
          padding: var(--sp-3) var(--sp-2) var(--sp-3) var(--sp-3); border-radius: var(--r-5); margin-bottom: var(--sp-2);
          box-shadow: var(--shadow); width: 100%; cursor: pointer;
          transition: transform .2s, box-shadow .2s, opacity .3s, max-height .3s, margin .3s, padding .3s; }
  .item:active { transform: scale(.99); }
  .item.out { max-height: 0 !important; margin-bottom: 0; padding-block: 0; opacity: 0; transform: translateX(70px); overflow: hidden; }
  .ico { width: 44px; height: 44px; border-radius: var(--r-4); display: flex; align-items: center; justify-content: center; font-size: 22px; flex: none;
         background: color-mix(in srgb, var(--c, var(--muted)) 15%, transparent); }
  .meta { flex: 1; min-width: 0; }
  .meta b { display: block; font-size: var(--fs-6); }
  .meta small { color: var(--muted); font-size: var(--fs-3); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .amt { font-weight: var(--fw-black); font-size: var(--fs-6); white-space: nowrap; }
  .acts { display: flex; gap: var(--sp-0); flex: none; }
  .ib { width: 32px; height: 32px; border-radius: var(--r-2); font-size: var(--fs-6); display: flex; align-items: center; justify-content: center; background: var(--chip); }
  .ib:hover { background: var(--tint-brand-hover); }
  .ib[data-act=del]:hover { background: var(--tint-exp); }
  .rank { width: 22px; text-align: center; font-weight: var(--fw-black); color: var(--muted); font-size: var(--fs-4); flex: none; }
  .empty { text-align: center; color: var(--muted); padding: 50px var(--sp-5); }
  .empty.compact { padding: var(--sp-5); }
  .empty .e { font-size: 54px; margin-bottom: var(--sp-2); display: inline-block; }

  /* expandable details */
  .tg { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: var(--sp-2);
        border-radius: 50%; background: var(--chip); color: var(--muted); font-size: var(--fs-4); vertical-align: middle; position: relative;
        transition: transform .3s, background var(--t-base), color var(--t-base); }
  .tg::before { content: ''; width: 7px; height: 7px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor;
                transform: rotate(45deg) translate(-1px, -1px); border-radius: 1px; }
  .tg:hover { background: var(--tint-brand-hover); color: var(--brand); }
  .tg.has { color: var(--brand); background: var(--tint-brand); }
  .tg.has::after { content: ''; position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%;
                   background: var(--exp); border: 2px solid var(--card); }
  .item.open .tg { transform: rotate(180deg); background: var(--brand); color: #fff; }
  .item.open .tg.has::after { display: none; }
  .dtl-wrap { flex: 0 0 100%; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s ease; cursor: default; }
  .item.open .dtl-wrap { grid-template-rows: 1fr; }
  .dtl { overflow: hidden; min-height: 0; }
  .dtlc { margin: var(--sp-2) var(--sp-1) var(--sp-1) 54px; padding: var(--sp-3); border-radius: var(--r-3); background: var(--chip); border-left: 3px solid var(--brand); }
  .dl { font-size: var(--fs-2); font-weight: var(--fw-black); color: var(--muted); letter-spacing: .4px; }
  .dv { font-size: var(--fs-5); line-height: 1.5; margin-top: var(--sp-1); word-break: break-word; white-space: pre-wrap; }
  .dv.none { color: var(--muted); font-style: italic; white-space: normal; }
  .dm { font-size: var(--fs-2); color: var(--muted); margin-top: var(--sp-2); }

  /* scrollable chip rows (period pickers) */
  .chipbar { position: relative; margin-inline: calc(var(--sp-4) * -1); }
  .chips { display: flex; gap: var(--sp-2); overflow-x: auto; padding: var(--sp-1) var(--sp-4) var(--sp-2); scrollbar-width: none;
           scroll-behavior: smooth; overscroll-behavior-x: contain; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; cursor: grab; }
  .chips::-webkit-scrollbar { display: none; }
  .chips.drag { cursor: grabbing; scroll-behavior: auto; user-select: none; }
  .chipbar::before, .chipbar::after { content: ''; position: absolute; top: 0; bottom: 0; width: 44px; z-index: 1; pointer-events: none; opacity: 0; transition: opacity var(--t-base); }
  .chipbar::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
  .chipbar::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
  .chipbar.fade-l::before, .chipbar.fade-r::after { opacity: 1; }
  .cs { position: absolute; top: var(--sp-1); width: 34px; height: 34px; border-radius: 50%; background: var(--card); box-shadow: var(--shadow);
        color: var(--brand); font-size: 22px; line-height: 1; z-index: 2; display: none; align-items: center; justify-content: center; }
  .cs.l { left: var(--sp-2); } .cs.r { right: var(--sp-2); }
  .cs.show { display: flex; }
  .chip { flex: none; background: var(--card); padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill); font-size: var(--fs-4);
          font-weight: var(--fw-medium); box-shadow: var(--shadow); color: var(--muted); cursor: pointer; }
  .chip:hover { color: var(--text); }
  .chip.on { background: var(--brand); color: #fff; transform: translateY(-1px); }

  /* form controls */
  .daterow { display: flex; gap: var(--sp-3); margin-top: var(--sp-3); }
  .daterow label { flex: 1; font-size: var(--fs-3); color: var(--muted); }
  .daterow input { width: 100%; margin-top: var(--sp-1); }
  .daterow input, .full, .row2 input, .nc-row input, select {
    padding: var(--sp-3); border-radius: var(--r-3); border: 1px solid var(--line); background: var(--card);
    transition: border-color var(--t-base), box-shadow var(--t-base); }
  .full, .row2 input, .nc-row input { border-radius: var(--r-4); padding: var(--sp-3) var(--sp-4); }
  .full { width: 100%; margin-bottom: var(--sp-3); }
  .daterow input:focus, .full:focus, .row2 input:focus, .nc-row input:focus, select:focus { outline: 0; border-color: var(--brand); box-shadow: var(--ring); }
  .btn { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-3); background: var(--chip); font-weight: var(--fw-bold); font-size: var(--fs-5); }
  .btn:hover { background: var(--tint-brand-hover); }
  .btn.danger { background: var(--tint-exp); color: var(--exp); }
  .qd { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-3); background: var(--chip); font-weight: var(--fw-bold); font-size: var(--fs-4); flex: none; }
  .qd:hover { background: var(--tint-brand-hover); }
  .primary { flex: 1; padding: var(--sp-4); border-radius: var(--r-5); background: var(--grad-brand); color: #fff; font-weight: var(--fw-black); font-size: var(--fs-7); }
  .primary.income { background: var(--grad-inc); }
  .primary.expense { background: var(--grad-exp); }
  .ghost.danger { padding: var(--sp-4) 18px; border-radius: var(--r-5); background: var(--tint-exp); color: var(--exp); font-weight: var(--fw-bold); }

  /* charts + data */
  .scroll-x { overflow-x: auto; position: relative; }
  .hit { fill: transparent; cursor: pointer; transition: fill var(--t-base); }
  .hit:hover, .hit.sel { fill: var(--tint-brand); }
  .bar-r { pointer-events: none; }
  .tip { position: absolute; top: var(--sp-0); left: 0; display: none; background: var(--ink-inverse); color: #fff; border-radius: var(--r-3);
         padding: var(--sp-2) var(--sp-3); font-size: var(--fs-3); line-height: 1.55; white-space: nowrap; z-index: 3;
         box-shadow: 0 8px 20px rgb(0 0 0 / .25); pointer-events: none; }
  .tip b { display: block; color: #c4b5fd; margin-bottom: var(--sp-0); }
  .tip .i { color: #34d399; } .tip .e { color: #f87171; }
  .tip .n { color: #e5e7eb; border-top: 1px solid #374151; margin-top: var(--sp-1); padding-top: var(--sp-1); }
  .legend { display: flex; gap: var(--sp-4); font-size: var(--fs-3); color: var(--muted); margin-bottom: var(--sp-2); }
  .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: var(--sp-1); vertical-align: -1px; }
  .donutwrap { display: flex; align-items: center; gap: var(--sp-4); }
  .donutwrap svg { width: 140px; height: 140px; flex: none; }
  .cl { flex: 1; min-width: 0; }
  .cl div { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-4); padding: var(--sp-1) 0; }
  .cl i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
  .cl span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cl em, .cbh em { font-style: normal; color: var(--muted); }
  .cb { margin: var(--sp-3) 0; }
  .cbh { display: flex; justify-content: space-between; font-size: var(--fs-4); margin-bottom: var(--sp-2); gap: var(--sp-2); }
  .cbh em { font-size: var(--fs-3); }
  .cbt { height: 8px; border-radius: var(--r-pill); background: var(--chip); overflow: hidden; }
  .cbf { height: 100%; border-radius: var(--r-pill); transform-origin: left; }
  .cardsub { font-size: var(--fs-3); color: var(--muted); font-weight: var(--fw-bold); margin: var(--sp-4) 0 0; letter-spacing: .5px; }
  .wk { display: flex; gap: var(--sp-2); height: 150px; align-items: flex-end; }
  .wc { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: var(--sp-1); height: 100%; }
  .wb { width: 100%; max-width: 34px; border-radius: var(--r-1) var(--r-1) var(--sp-1) var(--sp-1); background: var(--chip); transform-origin: bottom; }
  .wc.top .wb { background: linear-gradient(180deg, var(--brand-2), var(--brand)); }
  .wv { font-size: var(--fs-1); color: var(--muted); height: 14px; }
  .wl { font-size: var(--fs-2); color: var(--muted); }
  .wc.top .wl { color: var(--brand); font-weight: var(--fw-black); }
  .wnote { font-size: var(--fs-4); color: var(--muted); margin-top: var(--sp-3); text-align: center; }
  .dchip { display: inline-block; font-size: var(--fs-2); font-weight: var(--fw-black); padding: var(--sp-0) var(--sp-2); border-radius: var(--r-pill); white-space: nowrap; }
  .dchip.g { background: var(--tint-inc); color: var(--inc); }
  .dchip.b { background: var(--tint-exp); color: var(--exp); }
  .dchip.n { background: var(--chip); color: var(--muted); }

  /* tables */
  table.dt { width: 100%; font-size: var(--fs-4); }
  table.dt th { text-align: right; color: var(--muted); font-weight: var(--fw-medium); font-size: var(--fs-3); padding: var(--sp-3) var(--sp-2); border-bottom: 1px solid var(--line); }
  table.dt td { text-align: right; padding: var(--sp-3) var(--sp-2); border-bottom: 1px solid var(--line); white-space: nowrap; }
  table.dt th:first-child, table.dt td:first-child { text-align: left; }
  table.dt tbody tr { transition: background var(--t-fast); }
  table.dt tbody tr:hover { background: var(--chip); }
  table.dt tfoot td { font-weight: var(--fw-black); border-top: 2px solid var(--line); border-bottom: 0; }
  table.sticky th:first-child, table.sticky td:first-child { position: sticky; left: 0; background: var(--card); z-index: 1; }

  /* loading skeleton */
  .skel { min-height: 620px; padding-top: var(--sp-4); }
  .skel .bar { border-radius: var(--r-6); margin-bottom: var(--sp-3);
               background: linear-gradient(90deg, var(--card) 25%, var(--chip) 50%, var(--card) 75%); background-size: 200% 100%; }
  .skel .bar:nth-child(2) { height: 90px; } .skel .bar:nth-child(3) { height: 180px; } .skel .bar:nth-child(4) { height: 160px; }
  .spin { width: 26px; height: 26px; border: 3px solid var(--line); border-top-color: var(--brand); border-radius: 50%; margin: var(--sp-2) auto var(--sp-4); }

  /* add / edit sheet */
  #scrim { position: fixed; inset: 0; background: rgb(0 0 0 / .45); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity var(--t-base); z-index: var(--z-scrim); }
  #scrim.open { opacity: 1; pointer-events: auto; }
  #sheet { position: fixed; left: 50%; bottom: 0; width: 100%; max-width: var(--app-w); translate: -50% 105%; background: var(--card);
           border-radius: var(--r-8) var(--r-8) 0 0; padding: var(--sp-3) 18px calc(env(safe-area-inset-bottom) + 18px);
           z-index: var(--z-sheet); transition: translate var(--t-slow) var(--ease), opacity var(--t-base); max-height: 92%; overflow-y: auto; }
  #sheet.open { translate: -50% 0; }
  .grab { width: 42px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto var(--sp-3); }
  #sheetTitle { text-align: center; font-weight: var(--fw-black); font-size: var(--fs-6); color: var(--muted); margin-bottom: var(--sp-3); }
  .seg { display: flex; background: var(--chip); border-radius: var(--r-5); padding: var(--sp-1); }
  .seg button { flex: 1; padding: var(--sp-3); border-radius: var(--r-3); font-weight: var(--fw-bold); color: var(--muted); }
  .seg button.on.expense { background: var(--exp); color: #fff; box-shadow: 0 4px 12px color-mix(in srgb, var(--exp) 35%, transparent); }
  .seg button.on.income { background: var(--inc); color: #fff; box-shadow: 0 4px 12px color-mix(in srgb, var(--inc) 35%, transparent); }
  .amtwrap { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); margin: var(--sp-5) 0 var(--sp-3); }
  .amtwrap span { font-size: var(--fs-10); font-weight: var(--fw-bold); color: var(--muted); }
  #amt { width: 60%; font-size: var(--fs-11); font-weight: var(--fw-black); border: 0; outline: 0; background: none; text-align: center; min-width: 0; }
  #amt::placeholder { color: var(--line); }
  .cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); margin: var(--sp-2) 0 var(--sp-4); }
  .cat { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); padding: var(--sp-3) var(--sp-0); border-radius: var(--r-4);
         background: var(--chip); font-size: var(--fs-2); border: 2px solid transparent; min-width: 0; }
  .cat span.n { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 3px; }
  .cat .e { font-size: 22px; }
  .cat:hover { background: var(--tint-brand); }
  .cat.on { border-color: var(--brand); background: var(--tint-brand); font-weight: var(--fw-bold); }
  .cat.add { border: 2px dashed var(--line); background: none; color: var(--brand); font-weight: var(--fw-bold); }
  #newCat { display: none; margin: var(--sp-2) 0 var(--sp-4); }
  .nc-row { display: flex; gap: var(--sp-2); }
  .nc-row input { flex: 1; min-width: 0; }
  .emrow { display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--sp-2); margin-top: var(--sp-3); }
  .em { font-size: var(--fs-8); padding: var(--sp-2) 0; border-radius: var(--r-3); background: var(--chip); border: 2px solid transparent; }
  .em.on { border-color: var(--brand); background: var(--tint-brand); }
  .row2 { display: flex; gap: var(--sp-3); }
  .row2 input { min-width: 0; }
  .row2 #dt { flex: 1; min-width: 120px; }
  .btns { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); }

  /* dialog + toast */
  #dlg { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgb(0 0 0 / .5); z-index: var(--z-dialog); padding: var(--sp-6); }
  #dlg.open { display: flex; }
  #dlg .box { background: var(--card); border-radius: 22px; padding: 22px; max-width: 340px; width: 100%; }
  #dlg p { margin: 0 0 18px; line-height: 1.5; }
  #dlg .btns { margin: 0; }
  #dlg .btns button { flex: 1; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-4); font-weight: var(--fw-bold); background: var(--chip); }
  #dlg .btns button.ok { background: var(--exp); color: #fff; }
  #toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 100px); translate: -50% 20px; background: var(--ink-inverse); color: #fff;
           padding: var(--sp-3) 18px; border-radius: var(--r-pill); font-size: var(--fs-5); opacity: 0; pointer-events: none;
           transition: var(--t-base); z-index: var(--z-toast); max-width: 90%; white-space: nowrap; }
  #toast.show { opacity: 1; translate: -50% 0; }
  #toast.act { pointer-events: auto; }
  .tact { margin-left: var(--sp-4); color: var(--brand-3); font-weight: var(--fw-black); }
}

/* ----------------------------------------------------------------- motion */
@layer motion {
  @keyframes pageIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  @keyframes up     { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
  @keyframes fd     { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  @keyframes grow   { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  @keyframes growx  { from { transform: scaleX(0); } }
  @keyframes dr     { from { stroke-dasharray: 0 100; } }
  @keyframes pop    { 0% { transform: scale(.85); } 60% { transform: scale(1.07); } 100% { transform: scale(1); } }
  @keyframes sh     { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
  @keyframes rot    { to { transform: rotate(360deg); } }
  @keyframes float  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

  .anim .page { animation: pageIn .38s var(--ease); }
  .anim .item { animation: up .45s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 40ms); }
  .anim .hero { animation: up .5s var(--ease) backwards; }
  .fade { animation: fd .35s ease; }
  .empty .e { animation: float 2.6s ease-in-out infinite; }
  .bar-r { transform-box: fill-box; transform-origin: bottom; animation: grow .7s var(--ease) backwards; }
  .arc { animation: dr 1s var(--ease) backwards; }
  .cbf { animation: growx .8s var(--ease) backwards; }
  .wb { animation: grow .7s var(--ease) backwards; }
  .skel .bar { animation: sh 1.1s infinite linear; }
  .spin { animation: rot .7s linear infinite; }
  .cat.on { animation: pop .28s; }
  .tip { animation: pop .2s; }
  #newCat { animation: up .3s; }
  #dlg.open { animation: fd .2s; }
  #dlg .box { animation: pop .28s; }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
}

/* ---------------------------------------------------------------- desktop */
@layer desktop {
  body.desk #app { max-width: none; margin: 0; box-shadow: none; }
  body.desk nav { left: 0; top: 0; bottom: 0; translate: none; width: var(--side-w); max-width: none; flex-direction: column; justify-content: flex-start;
                  gap: var(--sp-2); border-top: 0; border-right: 1px solid var(--line); padding: var(--sp-6) var(--sp-4); }
  body.desk .brand { display: block; font-weight: var(--fw-black); font-size: var(--fs-8); padding: var(--sp-2) var(--sp-3) var(--sp-5); }
  body.desk nav button { flex: none; flex-direction: row; gap: var(--sp-3); font-size: var(--fs-6); padding: var(--sp-3) var(--sp-4); justify-content: flex-start; }
  body.desk nav button.on { background: var(--tint-brand); }
  body.desk nav button:hover { background: var(--chip); }
  body.desk nav button .i { font-size: var(--fs-8); }
  body.desk main { margin-left: var(--side-w); padding: var(--sp-7) clamp(24px, 4vw, 64px) 60px; }
  body.desk .page { max-width: 1040px; margin: 0 auto; }
  body.desk .logo { display: none; }
  body.desk #fab { left: var(--sp-5); right: auto; bottom: var(--sp-6); width: 190px; height: 50px; border-radius: var(--r-5); font-size: 16px; font-weight: var(--fw-bold); }
  body.desk #fab b { font-size: 26px; }
  body.desk .fl { display: inline; }
  body.desk .hgrid { display: grid; grid-template-columns: 340px 1fr; gap: var(--sp-7); align-items: start; }
  body.desk .hl { position: sticky; top: 0; }
  body.desk .hr .day:first-child { margin-top: 0; }
  body.desk .rgrid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-5); }
  body.desk .sum3 { grid-template-columns: repeat(3, 1fr); }
  body.desk .sum3 .wide { grid-column: auto; }
  body.desk .kpis, body.desk .sum3.sum4 { grid-template-columns: repeat(4, 1fr); }
  body.desk .chipbar { margin-inline: 0; }
  body.desk .chips { padding-inline: 0; }
  body.desk .daterow { max-width: 460px; }
  body.desk .item:hover { transform: translateX(3px); box-shadow: var(--shadow-hover); }
  body.desk .acts { opacity: 0; }
  body.desk .item:hover .acts, body.desk .item:focus-within .acts { opacity: 1; }
  body.desk #sheet { bottom: auto; top: 50%; border-radius: var(--r-8); max-width: 480px; opacity: 0; pointer-events: none; translate: -50% -44%; scale: .96; }
  body.desk #sheet.open { opacity: 1; pointer-events: auto; translate: -50% -50%; scale: 1; }
  body.desk #toast { bottom: var(--sp-7); }

  @media (max-width: 700px) {
    body.desk nav { width: 72px; padding: 18px var(--sp-2); }
    body.desk .brand, body.desk .lb, body.desk .fl { display: none; }
    body.desk nav button { justify-content: center; padding: var(--sp-3) 0; }
    body.desk main { margin-left: 72px; padding: 18px var(--sp-3) 90px; }
    body.desk #fab { width: 54px; height: 54px; left: 9px; border-radius: 50%; }
    body.desk .hgrid, body.desk .rgrid { display: block; }
    body.desk .sum3 { grid-template-columns: 1fr 1fr; }
    body.desk .sum3 .wide { grid-column: span 2; }
    body.desk .kpis, body.desk .sum3.sum4 { grid-template-columns: 1fr 1fr; }
    body.desk .acts { opacity: 1; }
    body.desk .logo { display: block; }
  }
}

/* -------------------------------------------------------------- utilities */
@layer utilities {
  .inc { color: var(--inc); }       .exp { color: var(--exp); }
  .muted { color: var(--muted); }   .strong { font-weight: var(--fw-bold); }
  .bg-inc { background: var(--inc); }  .bg-exp { background: var(--exp); }
  .hidden { display: none !important; }
}