:root{
    --bg:#FBF3E4;
    --surface:#FFFFFF;
    --surface-2:#F4EBDA;
    --text:#1A1A1A;
    --text-soft:#5C5A54;
    --text-faint:#9A968A;
    --line:#EDE2CC;
    --expense:#FF3B5C;
    --expense-soft:#FFE4E9;
    --income:#00B383;
    --income-soft:#DEF7EE;
    --accent:#1F1F1F;
    --accent-2:#3D3D3D;
    --accent-soft:#EDEAE3;
    --on-accent:#FFFFFF;
    --hero-a:#FFFFFF;
    --hero-b:#F4EBDA;
    --hero-fg-rgb:26,26,26;
    --shadow:0 2px 10px rgba(30,25,10,0.08);
    --shadow-card:0 10px 26px rgba(20,17,10,0.16);
    --glass-surface:rgba(255,255,255,0.66);
    --glass-blur:blur(20px) saturate(160%);
    --glass-rim-top:rgba(255,255,255,0.65);
    --glass-rim-bottom:rgba(15,15,20,0.06);
    --glass-sheen:rgba(255,255,255,0.5);
    --glass-sheen-2:rgba(255,255,255,0);
    --blob-a:#3A3A3A;
    --blob-b:#5C5850;
    --highlight:#F2C230;
    --on-highlight:#1A1A1A;
    --radius-lg:24px;
    --radius-md:18px;
    --radius-sm:12px;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#171512;
      --surface:#211E19;
      --surface-2:#2A2620;
      --text:#F5F0E6;
      --text-soft:#B0A99A;
      --text-faint:#6E6858;
      --line:#3A362C;
      --expense:#FF3B5C;
      --expense-soft:#33161F;
      --income:#3CE0A8;
      --income-soft:#0E2A22;
      --accent:#F5F0E6;
      --accent-2:#D8D0BE;
      --accent-soft:#33302A;
      --on-accent:#1A1A1A;
      --hero-a:#0E0D0B;
      --hero-b:#26221B;
      --hero-fg-rgb:255,255,255;
      --shadow:0 2px 10px rgba(0,0,0,0.35);
      --shadow-card:0 10px 28px rgba(0,0,0,0.5);
      --glass-surface:rgba(255,255,255,0.055);
      --glass-blur:blur(26px) saturate(180%) brightness(1.15);
      --glass-rim-top:rgba(255,255,255,0.18);
      --glass-rim-bottom:rgba(0,0,0,0.3);
      --glass-sheen:rgba(255,255,255,0.14);
      --glass-sheen-2:rgba(255,255,255,0);
      --blob-a:#4A4130;
      --blob-b:#5A3A32;
      --highlight:#E0B24A;
      --on-highlight:#1A1A1A;
    }
  }
  :root[data-theme="dark"]{
    --bg:#171512;
    --surface:#211E19;
    --surface-2:#2A2620;
    --text:#F5F0E6;
    --text-soft:#B0A99A;
    --text-faint:#6E6858;
    --line:#3A362C;
    --expense:#FF3B5C;
    --expense-soft:#33161F;
    --income:#3CE0A8;
    --income-soft:#0E2A22;
    --accent:#F5F0E6;
    --accent-2:#D8D0BE;
    --accent-soft:#33302A;
    --on-accent:#1A1A1A;
    --hero-a:#0E0D0B;
    --hero-b:#26221B;
    --hero-fg-rgb:255,255,255;
    --shadow:0 2px 10px rgba(0,0,0,0.35);
    --shadow-card:0 10px 28px rgba(0,0,0,0.5);
    --glass-surface:rgba(255,255,255,0.055);
    --glass-blur:blur(26px) saturate(180%) brightness(1.15);
    --glass-rim-top:rgba(255,255,255,0.18);
    --glass-rim-bottom:rgba(0,0,0,0.3);
    --glass-sheen:rgba(255,255,255,0.14);
    --glass-sheen-2:rgba(255,255,255,0);
    --blob-a:#4A4130;
    --blob-b:#5A3A32;
    --highlight:#E0B24A;
    --on-highlight:#1A1A1A;
  }

  *{box-sizing:border-box;}
  html{scrollbar-gutter:stable;height:100%;}
  html,body{margin:0;padding:0;}
  html,body{
    /* iOS: allow normal one-finger scrolling everywhere, but disable
       pinch-to-zoom and double-tap-to-zoom gestures at the document level. */
    touch-action:pan-x pan-y;
    -ms-touch-action:pan-x pan-y;
  }
  body{
    background:var(--bg);
    color:var(--text);
    font-family:'Inter', sans-serif;
    -webkit-font-smoothing:antialiased;
    min-height:100vh;
    min-height:100dvh;
    position:relative;
    overflow-x:hidden;
    overscroll-behavior-y:none;
  }
  body::before, body::after{
    content:"";
    position:fixed;
    width:48vmax;height:48vmax;
    border-radius:50%;
    filter:blur(90px);
    opacity:0.1;
    z-index:-1;
    pointer-events:none;
  }
  body::before{ background:var(--blob-a); top:-20vmax; right:-16vmax; }
  body::after{ background:var(--blob-b); bottom:-22vmax; left:-18vmax; }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) body::before,
    :root:not([data-theme="light"]) body::after{ display:none; }
  }
  :root[data-theme="dark"] body::before,
  :root[data-theme="dark"] body::after{ display:none; }
  .num{font-variant-numeric:tabular-nums;}
  h1,h2,.display{font-family:'Inter', sans-serif;}

  .wrap{max-width:600px;margin:0 auto;padding:calc(22px + env(safe-area-inset-top, 0px)) calc(18px + env(safe-area-inset-right, 0px)) 70px calc(18px + env(safe-area-inset-left, 0px));}
  .greeting{
    display:flex;align-items:baseline;justify-content:space-between;gap:10px;
    font-family:'Inter', sans-serif;font-size:13px;font-weight:600;color:var(--text-soft);
    margin-bottom:12px;
  }
  .backup-reminder{
    display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
    background:var(--surface-2);border:1px solid var(--line);
    border-radius:12px;padding:9px 12px;margin-bottom:14px;
    font-family:'Inter', sans-serif;font-size:12px;color:var(--text);
  }
  .backup-reminder-actions{display:flex;align-items:center;gap:6px;flex-shrink:0;}
  .backup-reminder-actions button{
    font-family:'Inter', sans-serif;font-weight:700;font-size:11.5px;
    border-radius:999px;cursor:pointer;
  }
  #backupReminderExport{
    background:var(--accent);border:none;color:var(--on-accent);padding:6px 12px;
  }
  #backupReminderDismiss{
    background:none;border:none;color:var(--text-faint);padding:4px;
  }
  #backupReminderDismiss:hover{color:var(--expense);}
  .greeting #greetingDate{
    color:var(--text-soft);
    white-space:nowrap;
  }

  /* ---- Top bar ---- */
  .topbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;row-gap:8px;margin-bottom:18px;}
  .topbar .brand{display:flex;align-items:center;gap:8px;min-width:0;}
  .brand-logo{height:24px;width:auto;flex-shrink:0;display:block;pointer-events:none;user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none;}
  .month-nav{flex-shrink:0;}
  .dot-wrap{
    position:relative;display:inline-flex;align-items:center;justify-content:center;
    background:none;border:none;padding:6px;margin:-6px;cursor:pointer;
    border-radius:50%;
  }
  .dot-wrap:hover{background:var(--surface-2);}
  .dot-wrap:active .dot{transform:scale(0.85);}
  .topbar .dot{width:10px;height:10px;border-radius:3px;background:var(--accent);transition:background .25s ease;position:relative;}
  .topbar .dot.pulsing{animation:dotPulse 1s ease-in-out infinite;}
  .dot-ring{
    position:absolute;inset:-1px;
    border-radius:50%;
    border:2px solid var(--accent);
    opacity:0;
    pointer-events:none;
    transform:scale(1);
  }
  .dot-ring.burst{animation:dotRingOut .9s ease-out;}
  @keyframes dotPulse{
    0%,100%{opacity:1;transform:scale(1);}
    50%{opacity:0.4;transform:scale(0.75);}
  }
  @keyframes dotRingOut{
    0%{opacity:1;transform:scale(1);}
    30%{opacity:0.9;transform:scale(2);}
    100%{opacity:0;transform:scale(4.5);}
  }
  .topbar h1{font-size:14.5px;font-weight:800;margin:0;letter-spacing:-0.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:38vw;}
  .topbar .when{
    font-size:11px;color:var(--text-soft);font-weight:700;
    min-width:78px;text-align:center;text-align-last:center;
    font-family:'Inter', sans-serif;
    background:transparent;border:none;
    cursor:pointer;padding:2px 3px;border-radius:6px;
    appearance:none;-webkit-appearance:none;
  }
  .topbar .when:hover{background:var(--surface-2);}
  .topbar .when:focus{outline:1.5px solid var(--accent);}
  .when-wrap{position:relative;display:inline-flex;align-items:center;}
  .when-wrap::after{
    content:"";
    position:absolute;right:7px;top:50%;
    width:5px;height:5px;
    border-right:1.5px solid var(--text-faint);
    border-bottom:1.5px solid var(--text-faint);
    transform:translateY(-65%) rotate(45deg);
    pointer-events:none;
  }
  .when-wrap .when{padding-right:16px;}
  .theme-toggle{
    width:32px;height:32px;
    border:1px solid var(--line);
    background:var(--glass-surface);
    backdrop-filter:var(--glass-blur);
    -webkit-backdrop-filter:var(--glass-blur);
    color:var(--text-soft);
    border-radius:11px;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    padding:0;
    box-shadow:var(--shadow), inset 0 1px 0 var(--glass-rim-top);
    transition:color .15s ease, border-color .15s ease;
  }
  .theme-toggle:hover{color:var(--accent);border-color:var(--accent);}
  .theme-toggle svg{width:15px;height:15px;display:block;}
  .theme-toggle.spin{animation:themeSpin .5s cubic-bezier(.34,1.56,.64,1);}
  body.amounts-hidden .num,
  body.amounts-hidden .amount,
  body.amounts-hidden .euro-badge,
  body.amounts-hidden .cat-total,
  body.amounts-hidden .cat-budget{
    filter:blur(7px);user-select:none;transition:filter .15s ease;
  }
  @keyframes themeSpin{
    0%{transform:rotate(0deg) scale(1);}
    50%{transform:rotate(180deg) scale(1.15);}
    100%{transform:rotate(360deg) scale(1);}
  }
  .month-nav{
    display:flex;align-items:center;gap:1px;flex-shrink:0;
    background:var(--glass-surface);
    backdrop-filter:var(--glass-blur);
    -webkit-backdrop-filter:var(--glass-blur);
    border:1px solid var(--line);
    border-radius:11px;
    padding:2px;
    box-shadow:var(--shadow), inset 0 1px 0 var(--glass-rim-top);
  }
  .month-nav button{
    width:20px;height:20px;
    border:none;background:transparent;
    color:var(--text-soft);
    border-radius:7px;
    font-size:12px;line-height:1;
    cursor:pointer;
    display:flex;align-items:center;justify-content:center;
  }
  .month-nav button:hover{background:var(--accent-soft);color:var(--accent);}

  /* ---- Hero: styled like a physical bank card ---- */
  .hero{
    background:linear-gradient(135deg, var(--hero-a) 0%, var(--hero-b) 100%);
    border-radius:var(--radius-lg);
    padding:18px 20px 16px;
    box-shadow:var(--shadow-card), inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(0,0,0,0.15);
    border:none;
    position:relative;
    overflow:hidden;
    color:rgb(var(--hero-fg-rgb));
    margin-bottom:16px;
  }
  body.read-only-mode #expenseCats,
  body.read-only-mode #incomeCats,
  body.read-only-mode .add-cat,
  body.read-only-mode #resetBtn,
  body.read-only-mode #importJsonBtn,
  body.read-only-mode #importJsonInput{
    pointer-events:none;opacity:0.75;
  }
  body.read-only-mode .read-only-badge{display:inline-flex;}
  .read-only-badge{
    display:none;align-items:center;gap:4px;
    background:var(--surface-2);color:var(--text-faint);
    font-family:'Inter', sans-serif;font-size:10px;font-weight:700;
    padding:3px 8px;border-radius:999px;margin-left:6px;
  }
  .hero::before{
    content:"";
    position:absolute;inset:0;
    background:linear-gradient(120deg, rgba(var(--hero-fg-rgb),0.10) 0%, rgba(var(--hero-fg-rgb),0) 38%);
    pointer-events:none;
  }
  .hero-eye-btn{
    position:absolute;top:14px;right:14px;z-index:2;
    width:30px;height:30px;border-radius:50%;
    background:rgba(var(--hero-fg-rgb),0.12);border:1px solid rgba(var(--hero-fg-rgb),0.22);
    color:rgb(var(--hero-fg-rgb));cursor:pointer;
    display:flex;align-items:center;justify-content:center;
  }
  .hero-eye-btn:hover{background:rgba(var(--hero-fg-rgb),0.2);}
  .hero-eye-btn svg{width:15px;height:15px;}
  .hero-eye-btn.blink svg{animation:eyeBlink .35s ease;}
  @keyframes eyeBlink{
    0%,100%{transform:scaleY(1);}
    45%{transform:scaleY(0.1);}
  }
  .hero .glow{
    position:absolute;
    width:240px;height:240px;
    bottom:-140px;left:-70px;
    background:radial-gradient(circle, rgba(var(--hero-fg-rgb),0.10) 0%, transparent 70%);
    pointer-events:none;
  }
  .hero .kicker{font-size:12px;color:rgba(var(--hero-fg-rgb),0.65);margin-bottom:3px;font-weight:600;}
  .hero .amount{
    font-size:clamp(30px,9vw,40px);
    font-weight:800;
    letter-spacing:-0.02em;
    line-height:1;
    display:flex;
    align-items:baseline;
    gap:2px;
    color:rgb(var(--hero-fg-rgb));
  }
  .hero .amount.negative{color:var(--expense);}
  .hero .amount .cents{font-size:0.42em;color:rgba(var(--hero-fg-rgb),0.6);font-weight:600;}

  .split-pcts{
    display:flex;justify-content:space-between;align-items:baseline;
    margin-top:12px;
    font-size:11px;
  }
  .split-pcts .pct-label{color:rgba(var(--hero-fg-rgb),0.6);font-weight:600;}
  .split-pcts .pct-exp{color:var(--expense);font-weight:800;}

  .hero .split{
    display:flex;
    height:8px;
    border-radius:999px;
    overflow:hidden;
    background:rgba(var(--hero-fg-rgb),0.12);
    margin:5px 0 12px;
  }
  .hero .split .seg{height:100%;}
  .hero .split .seg.exp{background:var(--expense);}

  .hero .legend{display:flex;gap:16px;flex-wrap:wrap;}
  .hero .legend .item{display:flex;align-items:center;gap:6px;font-size:11.5px;color:rgba(var(--hero-fg-rgb),0.75);}
  .hero .legend .swatch{width:8px;height:8px;border-radius:2px;background:rgb(var(--hero-fg-rgb));}
  .hero .legend .swatch.inc{background:var(--income);}
  .hero .legend .swatch.exp{background:var(--expense);}
  .hero .legend b{color:rgb(var(--hero-fg-rgb));font-weight:800;}

  .site-logo{
    display:block;
    margin:12px auto 0;
    width:40px;height:auto;
    opacity:1;
    pointer-events:none;
    user-select:none;
    -webkit-user-drag:none;
    -webkit-touch-callout:none;
  }

  /* ---- Tabs ---- */
  .floating-tabbar-spacer{height:86px;}
  .floating-tabbar{
    position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom, 0px));transform:translateX(-50%);
    display:flex;align-items:center;gap:2px;
    background:var(--glass-surface);
    backdrop-filter:var(--glass-blur);
    -webkit-backdrop-filter:var(--glass-blur);
    border:1px solid var(--line);
    box-shadow:0 10px 30px rgba(0,0,0,0.18), inset 0 1px 0 var(--glass-rim-top);
    border-radius:999px;
    padding:6px 10px;
    z-index:500;
    max-width:calc(100vw - 24px);
  }
  .ftab{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    border:none;background:transparent;
    padding:8px 14px;
    border-radius:999px;
    font-family:'Inter', sans-serif;
    font-size:9.5px;font-weight:700;
    color:var(--text-faint);
    cursor:pointer;
    transition:background .15s ease, color .15s ease;
  }
  .ftab svg{width:19px;height:19px;}
  .ftab.active{background:var(--accent);color:var(--on-accent);}
  .ftab.spin svg{animation:themeSpin .4s ease;}


  .panel{display:none;}
  .panel.active{display:block;}

  /* ---- Category cards ---- */
  .category{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    margin-bottom:10px;
    overflow:hidden;
    box-shadow:var(--shadow);
    position:relative;
  }
  .category > *{ position:relative; z-index:1; }
  .cat-head{
    display:flex;
    align-items:center;
    gap:10px;
    padding:14px 16px;
    cursor:pointer;
  }
  .cat-grip{
    cursor:grab;color:var(--text-faint);font-size:18px;
    letter-spacing:-1px;user-select:none;flex-shrink:0;
    padding:4px 6px;
  }
  .cat-grip:active{cursor:grabbing;}
  .category.dragging{opacity:0.4;}
  .category.drag-over{outline:2px dashed var(--accent);outline-offset:-2px;}
  .cat-head .swatch{
    width:12px;height:12px;
    border-radius:4px;
    flex-shrink:0;
    border:none;padding:0;cursor:pointer;
    position:relative;
    transition:transform .12s ease;
  }
  .cat-head .swatch:hover{transform:scale(1.15);}
  .color-menu{
    z-index:1000;
    background:var(--glass-surface);
    backdrop-filter:var(--glass-blur);
    -webkit-backdrop-filter:var(--glass-blur);
    border:1px solid var(--line);border-radius:14px;
    box-shadow:0 8px 24px rgba(15,15,20,0.16), inset 0 1px 0 var(--glass-rim-top);
    padding:10px;
    display:grid;grid-template-columns:repeat(4, 22px);gap:10px;
    width:max-content;
    cursor:default;
  }
  .color-dot{
    width:22px;height:22px;border-radius:50%;
    border:1.5px solid rgba(0,0,0,0.08);
    cursor:pointer;padding:0;flex-shrink:0;
    box-sizing:border-box;
    transition:transform .1s ease;
  }
  .color-dot:hover{transform:scale(1.15);}
  .color-dot.selected{border:2px solid var(--text);box-shadow:0 0 0 2px var(--surface);}
  .color-reset{
    grid-column:1 / -1;
    background:var(--surface-2);border:none;border-radius:8px;
    font-family:'Inter', sans-serif;font-size:10px;font-weight:600;color:var(--text-soft);
    padding:5px;cursor:pointer;margin-top:2px;
  }
  .color-reset:hover{color:var(--accent);}
  .cat-name{
    flex:1;
    background:transparent;
    border:none;
    color:var(--text);
    font-family:'Inter', sans-serif;
    font-weight:700;
    font-size:14.5px;
    min-width:0;
    padding:2px 0;
  }
  .cat-name:focus{outline:none;border-bottom:1px solid var(--accent);font-size:16px;}
  .cat-right{display:flex;align-items:center;gap:8px;}
  .cat-total{font-size:14.5px;font-weight:800;white-space:nowrap;}
  .cat-pct{font-size:11px;color:var(--text-faint);font-weight:800;white-space:nowrap;}
  .chev{
    font-size:9px;
    color:var(--text-faint);
    transition:transform .15s ease;
    width:9px;
  }
  .category.collapsed .chev{transform:rotate(-90deg);}
  .cat-del{background:none;border:none;color:var(--text-faint);font-size:14px;cursor:pointer;padding:2px 4px;}
  .cat-del:hover{color:var(--expense);}

  .bar-track{height:5px;background:var(--surface-2);margin:0 16px 12px;border-radius:999px;overflow:hidden;}
  .bar-fill{height:100%;border-radius:999px;}

  .cat-body{overflow:hidden;}
  .category.collapsed .cat-body{display:none;}

  .row{
    display:grid;
    grid-template-columns:auto 1fr auto;
    grid-template-areas:"grip name amount" "grip meta meta";
    gap:3px 8px;
    align-items:center;
    padding:11px 16px 11px 6px;
    border-top:1px solid var(--line);
    border-left:3px solid transparent;
  }
  .row-grip{
    grid-area:grip;
    cursor:grab;color:var(--text-faint);font-size:17px;
    letter-spacing:-1px;user-select:none;
    padding:4px 7px;align-self:stretch;display:flex;align-items:center;
  }
  .row-grip:active{cursor:grabbing;}
  .row.row-dragging{opacity:0.4;}
  .row.row-drag-over{outline:2px dashed var(--accent);outline-offset:-2px;}
  .row .name-wrap{
    grid-area:name;
    display:flex;align-items:center;gap:10px;min-width:0;
  }
  .logo-wrap{position:relative;flex-shrink:0;}
  .logo-badge{
    width:32px;height:32px;border-radius:50%;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    font-family:'Inter', sans-serif;font-weight:800;
    font-size:11px;color:#fff;letter-spacing:0.01em;
    cursor:pointer;overflow:hidden;border:none;padding:0;
    transition:transform .12s ease;
  }
  .logo-badge:hover{transform:scale(1.08);}
  .logo-badge.empty{
    border:1.75px dashed var(--text-faint);
    background:var(--surface-2) !important;
    color:var(--text-faint);
    font-size:16px;font-weight:400;
  }
  .logo-badge.empty:hover{border-color:var(--accent);color:var(--accent);background:var(--surface-2) !important;}
  .logo-badge img{width:100%;height:100%;object-fit:cover;display:block;}
  .logo-file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
  .logo-remove{
    position:absolute;top:-3px;right:-3px;width:13px;height:13px;
    border-radius:50%;background:var(--surface);border:1px solid var(--line);
    font-size:8px;line-height:1;display:none;align-items:center;justify-content:center;
    cursor:pointer;color:var(--text-faint);padding:0;
  }
  .logo-wrap:hover .logo-remove{display:flex;}
  .logo-remove:hover{color:var(--expense);border-color:var(--expense);}
  .logo-menu{
    z-index:1000;
    background:var(--glass-surface);
    backdrop-filter:var(--glass-blur);
    -webkit-backdrop-filter:var(--glass-blur);
    border:1px solid var(--line);border-radius:12px;
    box-shadow:0 8px 24px rgba(15,15,20,0.14), inset 0 1px 0 var(--glass-rim-top);
    padding:4px;display:flex;gap:3px;
  }
  .logo-menu button{
    background:var(--surface-2);border:none;border-radius:8px;
    padding:6px 8px;font-size:11px;white-space:nowrap;
    font-family:'Inter', sans-serif;color:var(--text-soft);cursor:pointer;
  }
  .logo-menu button:hover{color:var(--accent);background:var(--accent-soft);}
  .row .name{
    background:transparent;border:none;color:var(--text);
    font-family:'Inter', sans-serif;font-weight:600;font-size:13.5px;
    padding:2px 0;min-width:0;width:100%;flex:1;
  }
  .row .name::placeholder{color:var(--text-faint);}
  .row .name:focus{outline:none;font-size:16px;}
  .amount-wrap{
    grid-area:amount;
    display:flex;align-items:center;justify-content:flex-end;gap:5px;
  }
  .row .amount{
    background:transparent;border:none;text-align:right;
    font-family:'Inter', sans-serif;
    font-size:14px;font-weight:800;width:68px;padding:2px 0;color:var(--text);
  }
  .row .amount:focus{outline:none;font-size:16px;}
  .row .amount.amount-invalid{
    animation:amountShake .3s ease;
    text-decoration:underline wavy var(--expense);
  }
  @keyframes amountShake{
    0%,100%{transform:translateX(0);}
    25%{transform:translateX(-3px);}
    75%{transform:translateX(3px);}
  }
  .euro-badge{
    display:inline-flex;align-items:center;justify-content:center;
    width:15px;height:15px;border-radius:50%;
    background:var(--surface-2);
    font-size:8.5px;font-weight:800;color:var(--text-faint);
    flex-shrink:0;
  }
  .row .meta{grid-area:meta;display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding-left:42px;}
  .row .company{
    background:var(--surface-2);
    border:1px solid transparent;border-radius:10px;
    color:var(--text-soft);
    font-family:'Inter', sans-serif;font-size:10.5px;font-weight:600;
    padding:4px 9px;max-width:110px;
  }
  .row .company::placeholder{color:var(--text-faint);}
  .row .company:focus{outline:1px solid var(--accent);font-size:16px;}

  .chip{
    display:inline-flex;align-items:center;gap:5px;
    background:var(--surface-2);
    border:1px solid var(--line);
    border-radius:10px;
    padding:3px 8px 3px 6px;
    transition:background .2s ease, border-color .2s ease;
  }
  .chip-icon{display:flex;flex-shrink:0;color:var(--text-faint);transition:color .2s ease;}
  .chip-icon svg{width:11px;height:11px;display:block;}
  .chip select{
    background:transparent;
    border:none;border-radius:0;
    color:var(--text-soft);
    font-family:'Inter', sans-serif;font-size:10.5px;font-weight:700;
    padding:0;margin:0;max-width:94px;
    appearance:none;-webkit-appearance:none;
    transition:color .2s ease;
  }
  .chip select:focus{outline:none;}
  .chip:focus-within{border-color:var(--accent);}
  .chip-date::after, .chip-mode::after{
    content:"";
    width:5px;height:5px;
    border-right:1.5px solid var(--text-faint);
    border-bottom:1.5px solid var(--text-faint);
    transform:rotate(45deg);
    margin-left:1px;
    flex-shrink:0;
  }
  .paid-wrap{position:relative;display:inline-flex;margin-left:auto;}
  .row .paid{
    width:19px;height:19px;border-radius:7px;
    border:1.5px solid var(--line);
    appearance:none;-webkit-appearance:none;
    cursor:pointer;position:relative;flex-shrink:0;
    background:var(--surface);
    outline:none;
    transition:background .15s ease, border-color .15s ease;
  }
  .row .paid:focus{outline:none;box-shadow:none;}
  .row .paid:checked{background:linear-gradient(135deg, var(--income), #4FE6A8);border-color:transparent;animation:paidPop .42s cubic-bezier(.34,1.56,.64,1);}
  .row .paid:checked::after{
    content:"";
    position:absolute;inset:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12 10 18 20 6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:center;background-size:60%;
    animation:checkIn .3s cubic-bezier(.34,1.56,.64,1) .08s backwards;
  }
  .row .paid.ring::before{
    content:"";
    position:absolute;inset:-7px;
    border-radius:50%;
    background:radial-gradient(circle, var(--income) 0%, transparent 68%);
    animation:burstOut .55s ease-out forwards;
  }
  .paid-wrap.ring::after{
    content:"";
    position:absolute;inset:-3px;
    border-radius:9px;
    border:1.5px solid var(--income);
    animation:ringOut .5s ease-out .05s backwards forwards;
    pointer-events:none;
  }
  @keyframes paidPop{
    0%{transform:scale(0.5);}
    55%{transform:scale(1.22);}
    75%{transform:scale(0.94);}
    100%{transform:scale(1);}
  }
  @keyframes checkIn{
    0%{opacity:0;transform:scale(0.35) rotate(-20deg);}
    100%{opacity:1;transform:scale(1) rotate(0);}
  }
  @keyframes burstOut{
    0%{opacity:0.6;transform:scale(0.4);}
    100%{opacity:0;transform:scale(2.1);}
  }
  @keyframes ringOut{
    0%{opacity:0.8;transform:scale(0.85);}
    100%{opacity:0;transform:scale(1.6);}
  }
  .paid-toast{
    position:absolute;bottom:100%;left:50%;
    transform:translateX(-50%) translateY(6px) scale(0.8);
    background:linear-gradient(135deg, var(--income), #4FE6A8);color:#fff;
    font-family:'Inter', sans-serif;font-size:10px;font-weight:800;
    display:flex;align-items:center;gap:4px;
    padding:4px 9px 4px 6px;border-radius:999px;white-space:nowrap;
    box-shadow:0 6px 16px rgba(0,0,0,0.18);
    opacity:0;pointer-events:none;
    animation:toastPop 1.3s cubic-bezier(.22,1,.36,1) forwards;
  }
  .paid-toast .toast-check{
    width:13px;height:13px;border-radius:50%;
    background:rgba(255,255,255,0.3);
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
  }
  .paid-toast .toast-check svg{width:8px;height:8px;display:block;}
  @keyframes toastPop{
    0%{opacity:0;transform:translateX(-50%) translateY(6px) scale(0.75);}
    16%{opacity:1;transform:translateX(-50%) translateY(-8px) scale(1.04);}
    26%{transform:translateX(-50%) translateY(-7px) scale(1);}
    78%{opacity:1;transform:translateX(-50%) translateY(-7px) scale(1);}
    100%{opacity:0;transform:translateX(-50%) translateY(-16px) scale(0.92);}
  }

  .row.is-paid{transition:opacity .2s ease, background .2s ease;}
  .row.is-paid .name,
  .row.is-paid .amount{
    text-decoration:line-through;
    text-decoration-color:var(--text-faint);
    color:var(--text-faint) !important;
    opacity:0.65;
  }
  .row.is-paid .chip{opacity:0.65;}
  .category.side-income .row.is-paid{background:rgba(0,179,131,0.1);}
  .row .dup{background:none;border:none;color:var(--text-faint);font-size:13px;cursor:pointer;padding:0 2px;}
  .row .dup:hover{color:var(--accent);}
  .row .del{background:none;border:none;color:var(--text-faint);font-size:13px;cursor:pointer;padding:0 2px;}
  .row .del:hover{color:var(--expense);}

  .cat-empty{padding:14px 16px;font-size:12px;color:var(--text-faint);font-style:italic;}
  .add-row{padding:11px 16px 11px 55px;border-top:1px solid var(--line);}
  .add-row button{
    background:none;border:none;color:var(--accent);
    font-family:'Inter', sans-serif;font-weight:700;font-size:12.5px;cursor:pointer;padding:0;
  }

  .add-cat{
    width:100%;
    background:var(--glass-surface);
    backdrop-filter:var(--glass-blur);
    -webkit-backdrop-filter:var(--glass-blur);
    border:1.5px dashed var(--line);
    color:var(--text-soft);
    font-family:'Inter', sans-serif;font-weight:700;font-size:13px;
    padding:13px;border-radius:var(--radius-md);cursor:pointer;
  }
  .add-cat:hover{border-color:var(--accent);color:var(--accent);}

  .mode-legend{
    display:flex;flex-wrap:wrap;gap:12px;
    padding:2px 4px 14px;
  }
  .mode-legend .item{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text-soft);font-weight:600;}
  .mode-legend .dot{width:7px;height:7px;border-radius:2px;flex-shrink:0;}

  .search-input{
    width:100%;box-sizing:border-box;
    background:var(--glass-surface);
    backdrop-filter:var(--glass-blur);
    -webkit-backdrop-filter:var(--glass-blur);
    border:1px solid var(--line);
    box-shadow:inset 0 1px 0 var(--glass-rim-top);
    border-radius:999px;
    padding:10px 14px;
    font-family:'Inter', sans-serif;font-size:13px;color:var(--text);
    margin-bottom:12px;
  }
  .search-input::placeholder{color:var(--text-faint);}
  .search-input:focus{outline:1.5px solid var(--accent);font-size:16px;}

  .cross-month-results{
    background:var(--surface-2);border-radius:12px;
    padding:8px 10px;margin:-4px 0 12px;
  }
  .cross-month-results .cmr-title{
    font-family:'Inter', sans-serif;font-size:10.5px;font-weight:700;color:var(--text-faint);
    text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px;
  }
  .search-highlight{
    background:var(--highlight, #F2C230);color:#1A1A1A;
    border-radius:3px;padding:0 2px;font-weight:700;
  }
  input.search-match{
    background:var(--accent-soft) !important;
    border-radius:6px;
    box-shadow:0 0 0 1.5px var(--accent) inset;
  }
  .cmr-item{
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    padding:6px 4px;border-radius:8px;cursor:pointer;
    font-family:'Inter', sans-serif;font-size:12.5px;color:var(--text);
  }
  .cmr-item:hover{background:var(--surface);}
  .cmr-item .cmr-month{color:var(--text-faint);font-size:11px;flex-shrink:0;}
  .cmr-item .cmr-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .cmr-item .cmr-amount{font-weight:700;flex-shrink:0;}

  .compare{
    font-size:11.5px;font-weight:700;
    margin-top:6px;
    color:rgba(var(--hero-fg-rgb),0.65);
    display:inline-flex;align-items:center;gap:4px;
  }
  .compare.up{color:var(--expense);}
  .compare.down{color:var(--income);}

  .cat-budget{
    background:none;border:1px dashed var(--line);color:var(--text-faint);
    font-family:'Inter', sans-serif;font-size:10.5px;font-weight:700;
    padding:2px 7px;border-radius:8px;cursor:pointer;white-space:nowrap;
  }
  .cat-budget:hover{border-color:var(--accent);color:var(--accent);}
  .cat-exclude{
    background:none;border:none;color:var(--text-faint);cursor:pointer;
    padding:2px;border-radius:6px;opacity:0.5;
    display:flex;align-items:center;justify-content:center;
    transition:opacity .15s ease, color .15s ease;
  }
  .cat-exclude svg{width:14px;height:14px;}
  .cat-exclude:hover{opacity:0.85;}
  .cat-exclude.active{opacity:1;color:var(--accent);}
  .cat-excluded-badge{
    font-family:'Inter', sans-serif;font-size:9.5px;font-weight:800;
    text-transform:uppercase;letter-spacing:0.02em;
    color:var(--text-faint);background:var(--surface-2);
    padding:2px 6px;border-radius:999px;flex-shrink:0;margin-left:-4px;
  }

  .chip-recur{cursor:pointer;}
  .chip-recur .chip-icon{color:var(--income);}
  .chip-recur.is-off{opacity:0.5;border-style:dashed;}
  .chip-recur.is-off .chip-icon{color:var(--text-faint);}

  .row.upcoming{background:rgba(255,165,61,0.03);}

  .undo-toast{
    position:fixed;left:50%;bottom:20px;transform:translateX(-50%);
    background:var(--surface);border:1px solid var(--line);
    box-shadow:0 10px 30px rgba(0,0,0,0.2);
    border-radius:999px;padding:10px 8px 10px 16px;
    display:flex;align-items:center;gap:12px;
    font-family:'Inter', sans-serif;font-size:13px;color:var(--text);
    z-index:900;
    animation:toastSlideUp .2s ease;
  }
  @keyframes toastSlideUp{ from{opacity:0;transform:translateX(-50%) translateY(10px);} to{opacity:1;transform:translateX(-50%) translateY(0);} }
  .undo-toast button{
    background:var(--accent);color:var(--on-accent);border:none;border-radius:999px;
    padding:6px 14px;font-weight:700;font-size:12px;cursor:pointer;
  }
  .undo-toast.plain-toast{padding:8px 18px 8px 8px;gap:10px;}
  .toast-icon{
    width:22px;height:22px;border-radius:50%;flex-shrink:0;
    background:var(--income);color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-size:12px;font-weight:800;
  }
  .toast-msg{font-weight:600;}

  .undo-popup-box{
    max-width:300px;text-align:center;
  }
  .undo-popup-icon{font-size:30px;margin-bottom:8px;}
  .undo-popup-msg{
    font-family:'Inter', sans-serif;font-size:14px;font-weight:600;color:var(--text);
    margin:0 0 16px;
  }
  .undo-popup-box .modal-actions{justify-content:center;gap:10px;}
  .undo-popup-btn{font-weight:800;}

  .tour-modal-title{
    font-family:'Inter', sans-serif;font-weight:800;font-size:15px;color:var(--text);
    margin-bottom:10px;
  }
  .name-modal-error{
    font-family:'Inter', sans-serif;font-size:12px;font-weight:600;color:var(--expense);
    margin:-8px 0 14px;
  }
  @keyframes modalShake{
    0%,100%{transform:translateX(0);}
    20%{transform:translateX(-6px);}
    40%{transform:translateX(6px);}
    60%{transform:translateX(-4px);}
    80%{transform:translateX(4px);}
  }
  .modal-box.shake{animation:modalShake .35s ease;}

  .settings-header-right{display:flex;align-items:center;}
  .settings-theme-btn{
    width:26px;height:26px;border:none;background:var(--surface-2);color:var(--text-faint);
    border-radius:50%;display:flex;align-items:center;justify-content:center;
    cursor:pointer;padding:0;margin-right:8px;flex-shrink:0;
  }
  .settings-theme-btn svg{width:14px;height:14px;}
  .settings-theme-btn.spin svg{animation:themeSpin .5s cubic-bezier(.34,1.56,.64,1);}
  .settings-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
  .settings-header .tour-modal-title{margin-bottom:0;}
  .settings-back{
    background:none;border:none;color:var(--accent);font-family:'Inter', sans-serif;
    font-size:13px;font-weight:700;cursor:pointer;padding:4px 0;
  }
  .settings-cat-title{margin:2px 0 10px;font-size:15px;}
  .settings-cat-list{
    display:flex;flex-direction:column;
    border:1px solid var(--line);border-radius:14px;
    overflow:hidden;margin-bottom:4px;
  }
  .settings-cat-row{
    display:flex;align-items:center;justify-content:space-between;
    background:var(--surface);border:none;border-top:1px solid var(--line);
    padding:13px 14px;cursor:pointer;width:100%;text-align:left;
    font-family:'Inter', sans-serif;color:var(--text);
  }
  .settings-cat-row:first-child{border-top:none;}
  .settings-cat-row:hover{background:var(--surface-2);}
  .settings-cat-left{display:flex;align-items:center;gap:10px;}
  .settings-cat-icon{font-size:16px;}
  .settings-cat-label{font-size:13.5px;font-weight:700;}
  .settings-cat-chev{color:var(--text-faint);font-size:16px;}
  .settings-x{
    background:var(--surface-2);border:none;color:var(--text-faint);
    width:26px;height:26px;border-radius:50%;cursor:pointer;font-size:12px;
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
  }
  .settings-x:hover{color:var(--expense);}
  .settings-intro{
    font-family:'Inter', sans-serif;font-size:12.5px;color:var(--text-faint);
    margin:0 0 14px;
  }
  .settings-features{display:flex;flex-direction:column;margin-bottom:4px;}
  .settings-section-label{
    font-family:'Inter', sans-serif;font-size:11px;font-weight:700;color:var(--text-faint);
    text-transform:uppercase;letter-spacing:.03em;
    margin:16px 0 4px;
  }
  .settings-section-label:first-of-type{margin-top:4px;}
  .settings-name-row{display:flex;align-items:stretch;gap:8px;margin-bottom:4px;}
  .settings-name-row input{
    flex:1;min-width:0;height:36px;box-sizing:border-box;
    background:var(--surface-2);border:1px solid var(--line);border-radius:10px;
    padding:0 12px;font-family:'Inter', sans-serif;font-size:13px;color:var(--text);
  }
  .settings-name-row input:focus{outline:1.5px solid var(--accent);font-size:16px;}
  .settings-name-row button{
    background:var(--accent);border:none;color:var(--on-accent);border-radius:10px;
    width:36px;height:36px;padding:0;flex-shrink:0;box-sizing:border-box;
    font-family:'Inter', sans-serif;font-weight:700;font-size:13px;
    cursor:pointer;display:flex;align-items:center;justify-content:center;
  }
  .settings-name-row button:hover{filter:brightness(1.1);}
  .modal-box.settings-modal-scroll{
    max-height:80vh;overflow-y:auto;
  }
  .open-log-list{display:flex;flex-direction:column;gap:4px;}
  .open-log-row{
    font-family:'Inter', sans-serif;font-size:11.5px;color:var(--text-soft);
    background:var(--surface-2);border-radius:8px;padding:5px 10px;
  }
  .settings-pin-sub{
    padding:2px 0 12px;
  }
  .settings-inline-btn{
    background:var(--surface);border:1px solid var(--line);color:var(--text-soft);
    font-family:'Inter', sans-serif;font-size:11.5px;font-weight:700;
    padding:6px 12px;border-radius:8px;cursor:pointer;margin-bottom:10px;
  }
  .settings-inline-btn:hover{color:var(--accent);border-color:var(--accent);}
  .settings-sub-label{
    font-family:'Inter', sans-serif;font-size:11px;color:var(--text-faint);
    margin-bottom:6px;
  }
  .settings-choices{
    display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;
  }
  .settings-choice{
    background:var(--surface);border:1.5px solid var(--line);color:var(--text-soft);
    font-family:'Inter', sans-serif;font-weight:700;font-size:12px;
    padding:8px 16px;border-radius:10px;cursor:pointer;
    transition:background .15s ease, border-color .15s ease, color .15s ease;
  }
  .settings-choice:hover{border-color:var(--accent);color:var(--accent);}
  .settings-choice.active{
    background:var(--accent);border-color:var(--accent);color:var(--on-accent);
  }
  .settings-toggle-row{
    display:flex;align-items:center;justify-content:space-between;
    padding:11px 0;border-top:1px solid var(--line);
    font-family:'Inter', sans-serif;font-size:13.5px;color:var(--text);
  }
  .settings-toggle-row:first-child{border-top:none;}
  .ios-switch{position:relative;display:inline-block;width:46px;height:27px;flex-shrink:0;}
  .ios-switch input{opacity:0;width:0;height:0;position:absolute;}
  .ios-switch-slider{
    position:absolute;inset:0;cursor:pointer;
    background:var(--line);border-radius:27px;
    transition:background .2s ease;
  }
  .ios-switch-slider::before{
    content:"";position:absolute;left:2px;top:2px;
    width:23px;height:23px;border-radius:50%;background:var(--surface);
    box-shadow:0 1px 3px rgba(0,0,0,0.3);
    transition:transform .2s cubic-bezier(.4,0,.2,1), background .2s ease;
  }
  .ios-switch input:checked + .ios-switch-slider{background:var(--accent);}
  .ios-switch input:checked + .ios-switch-slider::before{transform:translateX(19px);background:var(--on-accent);}

  .print-preview-box{
    max-width:400px;max-height:80vh;display:flex;flex-direction:column;
  }
  .print-preview-sheet{
    background:#fff;color:#111;border-radius:10px;padding:16px;
    max-height:50vh;overflow-y:auto;margin-bottom:14px;
    font-family:'Inter', sans-serif;font-size:12.5px;
  }
  .pp-month{font-size:15px;font-weight:800;margin-bottom:10px;}
  .pp-side-title{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:0.03em;margin:12px 0 4px;color:#555;}
  .pp-cat-row{display:flex;justify-content:space-between;font-weight:700;margin-top:6px;}
  .pp-item-row{display:flex;justify-content:space-between;padding-left:10px;color:#444;font-size:11.5px;}
  .pp-total-row, .pp-rest-row{display:flex;justify-content:space-between;font-weight:800;margin-top:10px;padding-top:8px;border-top:1px solid #ddd;}
  .settings-page{
    padding-top:4px;
  }
  .settings-page .settings-header{margin-bottom:14px;}
  .settings-page .tour-modal-title{font-size:19px;}
  .modal-box.tour-modal, .modal-box.name-modal{
    max-width:360px;
    background:var(--surface);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    box-shadow:0 20px 50px rgba(0,0,0,0.25);
  }
  .modal-box.tour-modal::before, .modal-box.name-modal::before, .modal-box.settings-modal::before{ display:none; }
  .tour-close-btn{width:100%;text-align:center;padding:10px 14px;}
  .tour-modal-text{
    font-family:'Inter', sans-serif;font-size:12px;color:var(--text-soft);
    margin:0 0 14px;
    max-height:46vh;overflow-y:auto;
    padding-right:2px;
  }
  .tour-section-title{
    font-weight:800;color:var(--text);font-size:12.5px;
    margin-top:12px;
  }
  .tour-section-title:first-child{margin-top:0;}
  .tour-section-body{line-height:1.65;margin-top:2px;}
  .tour-modal-text .tour-grip{font-weight:800;letter-spacing:-2px;color:var(--text);}
  .tour-check-wrap{
    display:flex;align-items:center;gap:8px;
    font-family:'Inter', sans-serif;font-size:12px;color:var(--text-soft);
    margin-bottom:16px;cursor:pointer;
  }
  .tour-check-wrap input{width:15px;height:15px;cursor:pointer;accent-color:var(--accent);}

  .budget-status{
    display:flex;align-items:center;justify-content:center;gap:8px;
    background:var(--income-soft);border:1px solid var(--income);color:var(--income);
    border-radius:999px;padding:8px 14px;margin-bottom:12px;
    font-family:'Inter', sans-serif;font-size:12px;font-weight:700;text-align:center;
  }
  .budget-status.budget-status-warning{
    background:var(--expense-soft);border-color:var(--expense);color:var(--expense);
  }
  .budget-status-close{
    background:none;border:none;color:inherit;opacity:0.6;
    font-size:11px;cursor:pointer;padding:0;line-height:1;flex-shrink:0;
  }
  .budget-status-close:hover{opacity:1;}

  .history-card{
    background:var(--glass-surface);
    backdrop-filter:var(--glass-blur);
    -webkit-backdrop-filter:var(--glass-blur);
    border:1px solid var(--line);border-radius:var(--radius-md);
    padding:18px 16px;box-shadow:var(--shadow), inset 0 1px 0 var(--glass-rim-top);
  }
  .history-card + .history-card{margin-top:14px;}
  .history-title{font-size:13px;font-weight:700;color:var(--text-soft);}
  .history-nav{
    display:flex;align-items:center;justify-content:center;gap:14px;
    margin-bottom:14px;
  }
  .history-nav button{
    background:var(--surface-2);border:1px solid var(--line);color:var(--text-soft);
    width:26px;height:26px;border-radius:50%;cursor:pointer;
    font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
  }
  .history-nav button:hover{color:var(--accent);border-color:var(--accent);}
  .breakdown-empty{
    font-family:'Inter', sans-serif;font-size:12.5px;color:var(--text-faint);
    text-align:center;padding:20px 0;
  }
  .breakdown-wrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
  .breakdown-svg{flex-shrink:0;}
  .breakdown-legend{flex:1;min-width:140px;display:flex;flex-direction:column;gap:7px;}
  .breakdown-legend-item{
    display:flex;align-items:center;gap:7px;
    font-family:'Inter', sans-serif;font-size:12px;color:var(--text);
  }
  .breakdown-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
  .breakdown-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .breakdown-pct{font-weight:700;color:var(--text-soft);flex-shrink:0;}
  #historyChart{display:flex;align-items:flex-end;gap:6px;height:100px;margin-bottom:14px;}
  .hist-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;border-radius:6px;transition:background .15s ease;}
  .hist-col:hover{background:var(--surface-2);}
  .hist-bars{display:flex;align-items:flex-end;gap:2px;height:72px;}
  .hist-bar{width:6px;border-radius:3px 3px 0 0;}
  .hist-bar.inc{background:var(--income);}
  .hist-bar.exp{background:var(--expense);}
  .hist-label{font-size:9px;color:var(--text-faint);}
  .history-totals{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);padding-top:14px;}
  .hist-total{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-soft);}
  .hist-total b{color:var(--text);margin-left:auto;}
  .hist-total .dot{width:8px;height:8px;border-radius:2px;flex-shrink:0;}
  .hist-total .dot.inc{background:var(--income);}
  .hist-total .dot.exp{background:var(--expense);}
  .hist-total .dot.rest{background:var(--accent);}

  footer{
    margin-top:24px;
    display:flex;flex-direction:column;gap:10px;
  }
  footer .note{font-size:11px;color:var(--text-faint);text-align:center;}
  .footer-group{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;}
  .footer-divider{
    height:1px;background:var(--line);margin:2px 0;
  }
  .copyright{
    width:100%;text-align:center;
    font-family:'Inter', sans-serif;font-size:10.5px;color:var(--text-faint);
    margin-top:8px;
  }
  .live-clock{
    width:100%;text-align:center;
    font-family:'Inter', sans-serif;font-size:10.5px;color:var(--text-faint);
    margin-top:3px;font-variant-numeric:tabular-nums;
  }
  .live-clock-label{opacity:0.75;}
  footer button{
    display:inline-flex;align-items:center;gap:6px;
    background:var(--glass-surface);
    backdrop-filter:var(--glass-blur);
    -webkit-backdrop-filter:var(--glass-blur);
    border:1px solid var(--line);color:var(--text-faint);
    font-family:'Inter', sans-serif;font-weight:600;font-size:11px;padding:7px 12px;
    cursor:pointer;border-radius:999px;
  }
  footer button svg{width:13px;height:13px;flex-shrink:0;}
  footer button:hover{color:var(--accent);border-color:var(--accent);}
  footer button.footer-danger:hover{color:var(--expense);border-color:var(--expense);}

  @media print{
    .topbar, .floating-tabbar, .floating-tabbar-spacer, .search-input, .add-cat, .add-row, footer, .logo-remove, .del, .cat-del, .cat-budget, .cat-exclude{ display:none !important; }
    .panel{ display:block !important; }
    #panel-settings{ display:none !important; }
    body{ background:#fff !important; }
    .hero{ box-shadow:none; }
  }

  .modal-overlay{
    position:fixed;inset:0;z-index:1000;
    background:rgba(10,10,15,0.4);
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
    display:flex;align-items:center;justify-content:center;
    padding:20px;
    animation:overlayIn .15s ease;
  }
  .modal-overlay.pin-lock-overlay{
    background:rgba(10,10,15,0.6);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
  }
  @keyframes overlayIn{ from{opacity:0;} to{opacity:1;} }
  .modal-box{
    background:var(--glass-surface);
    backdrop-filter:var(--glass-blur);
    -webkit-backdrop-filter:var(--glass-blur);
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    padding:20px;
    max-width:320px;width:100%;
    box-shadow:0 20px 50px rgba(0,0,0,0.25), inset 0 1px 0 var(--glass-rim-top);
    animation:modalIn .18s cubic-bezier(.2,.9,.3,1.2);
    position:relative;
    overflow:hidden;
  }
  .modal-box::before{
    content:"";
    position:absolute;inset:0;
    background:linear-gradient(120deg, var(--glass-sheen) 0%, var(--glass-sheen-2) 40%);
    pointer-events:none;
  }
  .modal-box > *{ position:relative; }
  @keyframes modalIn{ from{opacity:0;transform:translateY(8px) scale(0.97);} to{opacity:1;transform:none;} }
  .modal-box p{margin:0 0 14px;font-size:14px;color:var(--text);font-family:'Inter', sans-serif;line-height:1.45;}
  .modal-box input{
    width:100%;box-sizing:border-box;
    padding:10px 11px;border-radius:10px;
    border:1px solid var(--line);background:var(--surface-2);color:var(--text);
    font-family:'Inter', sans-serif;font-size:15px;margin-bottom:14px;
  }
  .modal-box input:focus{outline:1.5px solid var(--accent);font-size:16px;}
  .modal-checkbox-row{
    display:flex;align-items:center;gap:8px;margin:-4px 0 14px;
    font-family:'Inter', sans-serif;font-size:12.5px;color:var(--text-soft);
  }
  .modal-checkbox-row input{width:16px;height:16px;flex-shrink:0;accent-color:var(--accent);}
  .modal-checkbox-row label{cursor:pointer;}
  .modal-actions{display:flex;justify-content:flex-end;gap:8px;}
  .modal-actions button{
    padding:8px 14px;border-radius:10px;border:none;
    font-family:'Inter', sans-serif;font-weight:700;font-size:13px;cursor:pointer;
  }
  .modal-actions .btn-cancel{background:var(--surface-2);color:var(--text-soft);}
  .modal-actions .btn-cancel:hover{color:var(--text);}
  .modal-actions .btn-ok{background:var(--accent);color:var(--on-accent);}
  .modal-actions .btn-danger{background:var(--expense);color:#fff;}