/* =================================================================
   MoneyTime · styles.css — Warm Journal redesign
   Drop-in replacement. Preserves all existing class names + JS hooks.

   Type system:
   - "Frank Ruhl Libre" — Hebrew display serif, for headlines & numbers
   - "Heebo"            — Hebrew sans, for UI/body
   - "JetBrains Mono"   — tabular numbers in some contexts

   Color system:
   - No data-color   → warm/terracotta (the new default)
   - data-color=blue  → warm (alias of default, kept for JS compatibility)
   - data-color=green → olive (sage green)
   - data-color=teal  → sea (cool indigo-blue)
   - data-color=purple→ evening (burgundy)
   - data-color=orange→ amber
   - data-color=pink  → wine
   - data-color=black → coffee dark (works with data-theme=dark too)

   data-theme=dark    → dark mode (works with any color)
   ================================================================= */

/* ---- TOKENS ---- */
:root{
  /* Brand accent — warm terracotta */
  --b8:#8E4622;   /* deepest brand */
  --b7:#A85531;
  --b6:#C46A3B;   /* primary accent */
  --b5:#D88656;
  --b4:#E5A37D;
  --b1:#F4DDC6;   /* soft tint */
  --b0:#FAEAD6;   /* lightest tint background */

  /* Money / success — warm sage */
  --g:#6B8A57;
  --gl:#D6E2C1;

  /* Danger / warning */
  --r:#B23B3B;
  --rl:#F1D6D6;
  --am:#B97B2C;     /* amber accent */
  --aml:#F2E2C4;

  /* Backgrounds & surfaces — warm cream paper */
  --bg:#F8F2E8;
  --s:#FFFCF7;
  --s2:#F1E9DA;
  --bd:#E7DBC4;

  /* Ink (text) */
  --t:#2B2218;
  --t2:#6B5E50;
  --t3:#9D8F7D;

  /* Shadows — soft warm */
  --sh:0 1px 2px rgba(74,49,31,.04), 0 4px 12px rgba(146,87,42,.06);
  --shm:0 2px 4px rgba(74,49,31,.05), 0 10px 24px rgba(146,87,42,.09);
  --shl:0 4px 8px rgba(74,49,31,.07), 0 20px 40px rgba(196,106,59,.14);

  /* Radii */
  --r1:16px;
  --r2:12px;
  --r3:9px;

  /* Layout */
  --nh:72px;
  --hh:64px;
}

/* ---- DARK MODE (works with any data-color) ---- */
[data-theme=dark]{
  --bg:#1A1612;
  --s:#221C16;
  --s2:#2B231B;
  --bd:#3A3026;
  --t:#F2E8D8;
  --t2:#C9BCA6;
  --t3:#8A7E6B;
  --b1:rgba(196,106,59,.18);
  --b0:rgba(196,106,59,.12);
  --gl:rgba(107,138,87,.22);
  --rl:rgba(178,59,59,.20);
  --aml:rgba(185,123,44,.20);
  --sh:0 1px 4px rgba(0,0,0,.4);
  --shm:0 4px 20px rgba(0,0,0,.5);
  --shl:0 10px 40px rgba(0,0,0,.6);
}

/* ---- COLOR SCHEMES ---- */
/* blue = warm default (kept for back-compat) */
[data-color=blue]{
  --b8:#8E4622;--b7:#A85531;--b6:#C46A3B;--b5:#D88656;--b4:#E5A37D;
  --b1:#F4DDC6;--b0:#FAEAD6;--bg:#F8F2E8;
}

/* green → olive (sage) */
[data-color=green]{
  --b8:#455B33;--b7:#586E45;--b6:#6B8A57;--b5:#8AA572;--b4:#A7BD92;
  --b1:#D6E2C1;--b0:#E4ECD1;--bg:#F4F1E4;
  --s:#FCFAF1;--s2:#EEEADB;--bd:#DEDAC1;
  --t:#232A1F;--t2:#5C6552;--t3:#919A85;
  --g:#B97B2C;--gl:#F2E2C4;
}

/* teal → sea (cool indigo-blue, but on warm paper) */
[data-color=teal]{
  --b8:#1F3E72;--b7:#2E4E85;--b6:#3D5E92;--b5:#5C7AAD;--b4:#7E9ABF;
  --b1:#CCD6E8;--b0:#DCE4F1;--bg:#EEF0F4;
  --s:#FBFCFD;--s2:#E2E6EE;--bd:#D4DAE5;
  --t:#15203A;--t2:#4A5772;--t3:#8390A8;
  --g:#5B8A6B;--gl:#D6E4D8;
}

/* purple → evening (burgundy wine on warm cream) */
[data-color=purple]{
  --b8:#5E1828;--b7:#73213A;--b6:#8C2A3E;--b5:#A24658;--b4:#BE7080;
  --b1:#ECC9D1;--b0:#F2D6DC;--bg:#F4ECE7;
  --s:#FBF6F1;--s2:#ECE0D8;--bd:#E2D2C8;
  --t:#2A1A1A;--t2:#6B524F;--t3:#9F8783;
}

/* black → coffee dark — deep neutral */
[data-color=black]{
  --b8:#231B12;--b7:#332720;--b6:#C46A3B;--b5:#D88656;--b4:#E5A37D;
  --b1:#3A2D20;--b0:#2B221A;--bg:#1A1410;
  --s:#231B12;--s2:#2B221A;--bd:#3A2D20;
  --t:#F2E8D8;--t2:#C9BCA6;--t3:#8A7E6B;
  --g:#A8C68A;--gl:rgba(168,198,138,.18);
}

/* orange → amber/honey */
[data-color=orange]{
  --b8:#8C5B1C;--b7:#A06A23;--b6:#B97B2C;--b5:#D49742;--b4:#E5B373;
  --b1:#F2E2C4;--b0:#F8EED4;--bg:#F8F1E0;
}

/* pink → rose-wine */
[data-color=pink]{
  --b8:#6B1F32;--b7:#82293F;--b6:#A23B53;--b5:#BC5872;--b4:#D2829A;
  --b1:#F0D2DC;--b0:#F6DFE6;--bg:#F5EBED;
}

/* ====================================================
   BASE
   ==================================================== */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:'Heebo','Inter',-apple-system,system-ui,sans-serif;
  background:var(--bg);
  color:var(--t);
  min-height:100vh;
  padding-top:var(--hh);
  padding-bottom:calc(var(--nh) + 12px);
  transition:background .3s, color .3s;
  overflow-x:hidden;
  font-weight:400;
  letter-spacing:-.003em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Warm paper grain */
body::before{
  content:"";
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(rgba(140,90,40,.035) 1px, transparent 1px),
    radial-gradient(rgba(140,90,40,.025) 1px, transparent 1px);
  background-size:3px 3px, 7px 7px;
  background-position:0 0, 1px 2px;
}
[data-theme=dark] body::before{
  background-image:
    radial-gradient(rgba(255,220,160,.025) 1px, transparent 1px),
    radial-gradient(rgba(255,220,160,.02) 1px, transparent 1px);
}

/* Tabular numbers everywhere by default for numeric content */
input[type=number], .clk-time, .sval, .ct-val, .pair-val, .cc-h, .cc-num, .arc-h, .arc-p,
.dv-metric-val, .uc-money{ font-variant-numeric:tabular-nums; }

/* ====================================================
   HEADER
   ==================================================== */
.hdr{
  position:fixed;top:0;left:0;right:0;height:var(--hh);
  background:var(--bg);
  border-bottom:1px solid var(--bd);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 18px;
  z-index:100;
}
.hdr-l{display:flex;align-items:center;gap:11px}
.hdr-logo{
  width:36px;height:36px;
  background:var(--b6);
  border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Frank Ruhl Libre',serif;
  font-size:17px;font-weight:500;
  color:#FFF6EB;
  flex-shrink:0;
}
.hdr-title{
  font-family:'Frank Ruhl Libre',serif;
  font-weight:500;
  color:var(--t);
  font-size:16px;
  letter-spacing:-.01em;
  line-height:1.1;
}
.hdr-sub{color:var(--t3);font-size:10px;line-height:1.2;font-weight:400;letter-spacing:.02em;margin-top:2px}
.hdr-r{display:flex;gap:8px}
.ibtn{
  width:38px;height:38px;border-radius:50%;
  border:1px solid var(--bd);
  background:var(--s);
  color:var(--t2);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;
  position:relative;
}
.ibtn:hover{background:var(--s2);color:var(--t)}
.ibtn:active{background:var(--s2)}
.sdot{
  width:7px;height:7px;border-radius:50%;
  background:var(--g);
  position:absolute;top:6px;left:6px;
  border:1.5px solid var(--s);
}
.sdot.off{background:var(--r)}
.sdot.idle{background:var(--t3)}

/* ====================================================
   BOTTOM NAVIGATION
   ==================================================== */
.bnav{
  position:fixed;bottom:0;left:0;right:0;height:var(--nh);
  background:rgba(248,242,232,.88);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  border-top:1px solid var(--bd);
  display:flex;z-index:100;
  padding-bottom:env(safe-area-inset-bottom);
}
[data-theme=dark] .bnav{background:rgba(26,22,18,.88)}
[data-color=green] .bnav{background:rgba(244,241,228,.88)}
[data-color=teal] .bnav{background:rgba(238,240,244,.88)}
[data-color=purple] .bnav{background:rgba(244,236,231,.88)}
[data-color=black] .bnav{background:rgba(26,20,16,.88)}

.ni{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:4px;
  border:none;background:none;cursor:pointer;
  color:var(--t3);
  font-family:'Heebo',sans-serif;
  transition:color .2s;
  position:relative;padding:9px 4px;
}
.ni .nic{font-size:21px;transition:transform .2s;display:flex;align-items:center;justify-content:center}
.ni .nil{font-size:10px;font-weight:500;letter-spacing:0}
.ni.active{color:var(--b8)}
.ni.active .nil{font-weight:700}
.ni.active .nic{transform:translateY(-1px)}
.ni::before{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:0;height:3px;background:var(--b6);border-radius:0 0 4px 4px;
  transition:width .3s;
}
.ni.active::before{width:24px}

/* ====================================================
   PAGES
   ==================================================== */
.page{
  display:none;padding:14px 16px calc(var(--nh) + 24px);
  max-width:580px;margin:0 auto;animation:pgIn .25s ease;
  position:relative;z-index:1;
}
.page.active{display:block}
@keyframes pgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* ====================================================
   CARDS
   ==================================================== */
.card{
  background:var(--s);
  border-radius:var(--r1);
  padding:16px;
  border:1px solid var(--bd);
  margin-bottom:12px;
}

/* ====================================================
   CLOCK CARD — relegated, no longer the hero
   ==================================================== */
.clk-card{
  background:var(--s);
  border:1px solid var(--bd);
  border-radius:var(--r1);
  padding:12px 14px;
  margin-bottom:12px;
  color:var(--t);
  display:flex;align-items:center;gap:12px;
  min-height:74px;
}
.clk-left{flex:1}
.clk-label{
  font-size:9px;font-weight:500;
  color:var(--t3);
  letter-spacing:.15em;text-transform:uppercase;
}
.clk-time{
  font-family:'Frank Ruhl Libre',serif;
  font-size:30px;font-weight:500;
  color:var(--t);
  letter-spacing:-.01em;
  line-height:1.1;margin-top:2px;
}
.clk-time.on{color:var(--b6)}

.clk-ring-wrap{
  position:relative;width:56px;height:56px;flex-shrink:0;
  background:var(--b6);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.clk-ring-svg{
  width:56px;height:56px;
  transform:rotate(-90deg);
  position:absolute;inset:0;
}
.clk-ring-bg{fill:none;stroke:rgba(255,246,235,.25);stroke-width:3}
.clk-ring-fill{fill:none;stroke:rgba(255,246,235,.9);stroke-width:3;stroke-linecap:round;transition:stroke-dashoffset .5s linear}
.clk-ring-inner{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  color:#FFF6EB;
}
.clk-ring-icon{display:flex;align-items:center;justify-content:center;line-height:1}

.btn-clk{
  padding:10px 16px;border-radius:999px;border:none;
  font-family:'Heebo',sans-serif;
  font-size:12px;font-weight:600;
  cursor:pointer;
  background:var(--t);color:var(--bg);
  white-space:nowrap;flex-shrink:0;
  transition:all .15s;
}
.btn-clk.on{background:transparent;color:var(--b7);border:1px solid var(--b6)}
.btn-clk:active{transform:scale(.98)}

/* ====================================================
   QUICK ACTIONS
   ==================================================== */
.qa{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.qab{
  padding:11px 12px;
  border-radius:var(--r2);
  border:1px solid var(--bd);
  background:var(--s);
  color:var(--t);
  font-family:'Heebo',sans-serif;
  font-size:12px;font-weight:500;
  cursor:pointer;
  display:flex;align-items:center;gap:8px;
  transition:all .15s;
}
.qab-main{padding:14px 12px;flex-direction:column;align-items:flex-start;gap:6px;min-height:64px}
.qab-main svg{color:var(--b7)}
.qab-main span{font-size:12px;font-weight:600}
.qab-sub{padding:9px 12px;font-size:11px;color:var(--t2);background:var(--s2);justify-content:center;gap:6px}
.qab:hover{background:var(--s2);border-color:var(--b4)}
.qab:active{transform:scale(.98)}

/* ====================================================
   CALENDAR
   ==================================================== */
.cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.cal-title{
  font-family:'Frank Ruhl Libre',serif;
  font-size:36px;font-weight:500;
  color:var(--t);
  letter-spacing:-.02em;
  line-height:1;
}
.btn-nav{
  width:36px;height:36px;border-radius:50%;
  border:1px solid var(--bd);
  background:transparent;
  color:var(--t2);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;
}
.btn-nav:hover{background:var(--s);color:var(--t)}
.btn-today{
  padding:8px 14px;border-radius:999px;border:none;
  background:var(--t);color:var(--bg);
  font-family:'Heebo',sans-serif;
  font-size:11px;font-weight:600;
  cursor:pointer;
  transition:opacity .15s;
}
.btn-today:hover{opacity:.85}

.cal-seg-row{display:flex;gap:8px;margin-bottom:14px;align-items:center}
.cv-pills{
  display:flex;
  background:var(--s2);border-radius:999px;padding:4px;
  flex:1;border:1px solid var(--bd);
}
.cv-pill{
  flex:1;padding:7px 4px;border-radius:999px;border:none;
  font-family:'Heebo',sans-serif;
  font-size:11px;font-weight:500;
  cursor:pointer;background:transparent;
  color:var(--t2);
  transition:all .2s;text-align:center;white-space:nowrap;
}
.cv-pill.active{background:var(--s);color:var(--t);font-weight:700;box-shadow:0 1px 2px rgba(74,49,31,.06)}

.cal-date-inp{
  padding:7px 10px;border-radius:9px;
  border:1px solid var(--bd);
  background:var(--s2);
  font-size:11px;
  font-family:'Heebo',sans-serif;
  color:var(--t);
}
.cal-jump-btn{
  padding:7px 12px;border-radius:9px;
  background:var(--b0);color:var(--b8);
  border:1px solid var(--b1);
  font-size:11px;
  font-family:'Heebo',sans-serif;
  cursor:pointer;white-space:nowrap;
}

/* Day grid */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.chc{
  text-align:center;font-size:10px;font-weight:500;
  color:var(--t3);padding:6px 0;letter-spacing:.06em;
}
.cc{
  aspect-ratio:1;border-radius:10px;padding:5px 6px 9px;
  cursor:pointer;
  display:flex;flex-direction:column;justify-content:space-between;
  background:transparent;
  border:1px solid transparent;
  transition:all .12s;
  position:relative;overflow:hidden;
  font-family:'Frank Ruhl Libre',serif;
}
.cc:active{transform:scale(.95)}
.cc:hover{background:var(--s2)}
.cc.today{background:var(--b6);border-color:var(--b6)}
.cc.today .cc-num,.cc.today .cc-heb{color:#FFF6EB}
.cc.has-data{background:var(--s);border-color:var(--bd)}

.cc.missing{background:transparent;border:1px dashed var(--am)}
.cc.missing::before{
  content:'';position:absolute;top:6px;left:6px;
  width:5px;height:5px;border-radius:50%;background:var(--am);
}

.cc-top{display:flex;justify-content:space-between;align-items:flex-start}
.cc-num{
  font-size:16px;font-weight:500;line-height:1;
  color:var(--t);letter-spacing:-.01em;
}
.cc.today .cc-num{color:#FFF6EB}
.cc-heb{font-size:9px;color:var(--t3);font-family:'Heebo',sans-serif;font-weight:500;margin-top:2px}
.cc-miss{display:none}

/* Job color stripes — side-by-side, my job + partner */
.cc-stripes{
  position:absolute;
  bottom:3px;left:5px;right:5px;
  display:flex;flex-direction:row;gap:2px;
  pointer-events:none;
}
.cc-stripe{
  flex:1;height:3px;border-radius:2px;
  background:var(--b6);opacity:.95;
}
.cc-stripe.partner{opacity:.7}
.cc.today .cc-stripe{background:rgba(255,246,235,.85)}
.cc.today .cc-stripe.partner{background:rgba(255,246,235,.55)}

/* Optional: hours/amount inside cell */
.cc-h, .cc-amt{
  font-family:'Heebo',sans-serif;font-size:9px;font-weight:500;
  color:var(--g);
  text-align:right;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}
.cc.today .cc-h, .cc.today .cc-amt{color:rgba(255,246,235,.85)}
.cc-bars{display:flex;gap:2px;width:100%;justify-content:center}
.cc-bar{height:5px;border-radius:3px;flex:1;max-width:14px;background:var(--b6)}
.cc-dot{position:absolute;top:6px;right:6px;width:5px;height:5px;border-radius:50%}

#calLegend{
  display:flex;gap:10px;margin-top:12px;padding-top:12px;
  border-top:1px dashed var(--bd);
  flex-wrap:wrap;
}
#calLegend > span{
  font-size:10px;color:var(--t2);
  display:flex;align-items:center;gap:5px;font-weight:500;
}

/* Heatmap legacy classes — repurposed as warm scale */
.cc.hm-1{background:var(--b0);border-color:var(--b1)}
.cc.hm-2{background:var(--b1);border-color:var(--b4)}
.cc.hm-3{background:var(--b4);border-color:var(--b5)}
.cc.hm-3 .cc-num,.cc.hm-4 .cc-num,.cc.hm-5 .cc-num{color:#FFF6EB}
.cc.hm-4{background:var(--b5);border-color:var(--b6)}
.cc.hm-5{background:var(--b6);border-color:var(--b8)}

/* ====================================================
   BANNERS — streak, miss, pair, install, update
   ==================================================== */
.miss-banner{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;
  background:var(--aml);
  border:1px solid var(--am);
  border-radius:12px;margin-bottom:12px;
}
.miss-banner-txt{flex:1;font-size:12px;font-weight:400;color:var(--t)}
.miss-banner-txt strong{display:block;font-size:13px;font-weight:600;color:var(--t)}
.conflict-banner{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;
  background:var(--rl);
  border:1px solid var(--r);
  border-radius:12px;margin-bottom:12px;
  cursor:pointer;color:var(--r);
}
.conflict-banner-txt{flex:1;font-size:12px;font-weight:400;color:var(--t)}
.conflict-banner-txt strong{color:var(--r);font-weight:600}

/* ====================================================
   SYNC CONFLICT SHEET (#mConflict) — ui-calendar.js renderConflictSheet()
   ==================================================== */
.mconf-all-row{display:flex;gap:8px;margin-bottom:16px}
.mconf-all-row .btn{flex:1}
.mconf-card{background:var(--s);border:1px solid var(--bd);border-radius:14px;padding:14px;margin-bottom:14px}
.mconf-date{font-family:'Frank Ruhl Libre',serif;font-size:15px;color:var(--t);margin-bottom:10px}
.mconf-side{margin-bottom:10px}
.mconf-side-lbl{font-size:10px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.mconf-side .bd-card{margin-bottom:0}

.streak-banner{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;
  background:linear-gradient(135deg,var(--b0),var(--s));
  border:1px solid var(--b1);
  border-radius:12px;margin-bottom:12px;
}
.streak-icon{font-size:20px;flex-shrink:0}
.streak-txt{flex:1;font-size:12px;font-weight:500;color:var(--b8)}
.streak-txt strong{font-size:14px;font-weight:700}

.ibanner{
  display:none;
  background:linear-gradient(135deg,var(--b8),var(--b6));
  border-radius:var(--r1);
  padding:16px;
  margin-bottom:12px;
  color:#FFF6EB;
}
.ibanner.show{display:block}

.upd-banner{
  position:fixed;top:calc(var(--hh) + 8px);left:50%;
  transform:translateX(-50%);
  width:auto;max-width:320px;
  background:var(--t);
  border:1px solid var(--t2);
  border-radius:12px;padding:10px 12px;
  display:flex;align-items:center;gap:10px;
  z-index:9999;box-shadow:var(--shl);
  animation:slideDownBnr .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes slideDownBnr{from{transform:translate(-50%,-120%);opacity:0}to{transform:translate(-50%,0);opacity:1}}
.upd-ico{font-size:22px;flex-shrink:0;color:var(--b4)}
.upd-txt{flex:1;min-width:0}
.upd-ttl{font-size:13px;font-weight:600;color:#FFF6EB;margin-bottom:1px}
.upd-sub{font-size:10px;color:rgba(255,246,235,.65);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.upd-btn{
  background:var(--b6);border:none;color:#FFF6EB;
  padding:8px 14px;border-radius:9px;
  font-family:'Heebo',sans-serif;
  font-size:11px;font-weight:600;cursor:pointer;white-space:nowrap;flex-shrink:0;
}
.upd-btn:disabled{opacity:.6}
.upd-x{background:none;border:none;color:rgba(255,246,235,.5);font-size:20px;cursor:pointer;padding:0 0 0 4px;line-height:1;flex-shrink:0}

/* Pair banner (CTA on calendar page) */
#pairBanner{
  background:linear-gradient(135deg,var(--b8),var(--b6))!important;
  border-radius:var(--r1);
  padding:14px 16px;margin-bottom:12px;
  color:#FFF6EB;
}

/* ====================================================
   STATS / INSIGHT CARDS
   ==================================================== */
.stats-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.scard{
  background:var(--s);border-radius:var(--r1);
  padding:14px 16px;border:1px solid var(--bd);
}
.slbl{font-size:10px;font-weight:500;color:var(--t3);text-transform:uppercase;letter-spacing:.1em}
.sval{
  font-family:'Frank Ruhl Libre',serif;
  font-size:24px;font-weight:500;
  margin-top:6px;letter-spacing:-.015em;
  color:var(--t);
  line-height:1.05;
}
.sval.g{color:var(--g)}
.sval.b{color:var(--b7)}

.csummary{
  background:var(--b0);border-radius:12px;
  padding:11px 14px;margin-bottom:10px;
  font-size:11px;font-weight:500;color:var(--b8);
  display:flex;gap:14px;flex-wrap:wrap;align-items:center;
  border:1px solid var(--b1);
}
.csummary strong{
  font-family:'Frank Ruhl Libre',serif;
  font-size:15px;font-weight:500;
}

.cwrap{position:relative;height:180px;width:100%}

.insight-row{display:flex;gap:8px;margin-bottom:12px}
.insight-chip{
  flex:1;background:var(--s);border:1px solid var(--bd);
  border-radius:var(--r2);padding:11px 10px;text-align:center;
}
.insight-chip .insight-val{
  font-family:'Frank Ruhl Libre',serif;
  font-size:18px;font-weight:500;color:var(--b7);
  margin-bottom:2px;letter-spacing:-.01em;
}
.insight-chip .insight-lbl{
  font-size:9px;color:var(--t3);letter-spacing:.06em;text-transform:uppercase;font-weight:500;
}

/* ====================================================
   REPORTS — tabs, pills
   ==================================================== */
.rtabs{
  display:flex;gap:4px;
  background:var(--s2);border-radius:999px;padding:4px;
  margin-bottom:12px;
}
.rtab{
  flex:1;padding:8px 4px;border-radius:999px;border:none;
  background:transparent;
  font-family:'Heebo',sans-serif;
  font-size:11px;font-weight:500;color:var(--t3);
  cursor:pointer;transition:all .2s;white-space:nowrap;
  display:flex;align-items:center;justify-content:center;gap:4px;
}
.rtab.active{background:var(--s);color:var(--t);box-shadow:0 1px 2px rgba(74,49,31,.06);font-weight:700}

.pills{
  display:flex;gap:6px;overflow-x:auto;
  padding-bottom:4px;margin-bottom:12px;
  scrollbar-width:none;
}
.pills::-webkit-scrollbar{display:none}
.pill{
  padding:7px 14px;border-radius:999px;
  border:1px solid var(--bd);background:transparent;
  color:var(--t2);
  font-family:'Heebo',sans-serif;
  font-size:11px;font-weight:500;cursor:pointer;white-space:nowrap;
  transition:all .2s;
}
.pill.active{background:var(--t);border-color:var(--t);color:var(--bg);font-weight:600}

/* Archive list */
.arc-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--bd)}
.arc-row:last-child{border-bottom:none}
.arc-m{font-size:13px;font-weight:500}
.arc-h{font-size:11px;color:var(--t3)}
.arc-p{
  font-family:'Frank Ruhl Libre',serif;
  font-size:16px;font-weight:500;color:var(--g);
}

/* ====================================================
   COUPLE
   ==================================================== */
.couple-total{
  background:linear-gradient(155deg,var(--b0),var(--s));
  border:1px solid var(--b1);
  border-radius:var(--r1);
  padding:22px;text-align:center;margin-bottom:12px;
  color:var(--t);position:relative;overflow:hidden;
}
.ct-lbl{
  font-size:10px;font-weight:500;color:var(--t3);
  text-transform:uppercase;letter-spacing:.14em;
}
.ct-val{
  font-family:'Frank Ruhl Libre',serif;
  font-size:48px;font-weight:500;
  color:var(--t);letter-spacing:-.025em;
  margin:8px 0 4px;line-height:1;
}
.ct-sub{font-size:12px;color:var(--t2)}

.ucard{
  border-radius:var(--r1);padding:16px;margin-bottom:10px;
  border:1px solid var(--bd);background:var(--s);
}
.uc-top{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.uc-av{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Frank Ruhl Libre',serif;
  font-size:14px;font-weight:600;color:#FFF6EB;flex-shrink:0;
}
.uc-name{font-size:14px;font-weight:600}
.uc-h{font-size:11px;color:var(--t2)}
.uc-money{
  font-family:'Frank Ruhl Libre',serif;
  font-size:28px;font-weight:500;
  color:var(--t);letter-spacing:-.015em;line-height:1;
}
.uc-sparkline{width:100%;height:30px;margin-top:8px}

.pbar{height:6px;border-radius:3px;background:var(--bd);overflow:hidden;margin-top:6px}
.pfill{height:100%;border-radius:3px;transition:width .5s ease}

.pair-box{
  background:var(--b8);border-radius:var(--r1);
  padding:22px;text-align:center;margin-bottom:14px;
  color:#FFF6EB;
}
.pair-lbl{font-size:10px;color:rgba(255,246,235,.65);letter-spacing:.18em;text-transform:uppercase;font-weight:500}
.pair-val{
  font-family:'Frank Ruhl Libre',serif;
  font-size:32px;font-weight:500;
  letter-spacing:8px;margin:8px 0;
}
.pair-acts{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.pair-btn{
  background:rgba(255,246,235,.18);border:none;color:#FFF6EB;
  padding:8px 16px;border-radius:9px;
  font-family:'Heebo',sans-serif;
  font-size:11px;font-weight:600;cursor:pointer;
}
.pair-btn:active{background:rgba(255,246,235,.3)}

.cmp-chip{
  display:inline-flex;align-items:center;gap:4px;
  padding:5px 11px;border-radius:999px;
  background:var(--b0);border:1px solid var(--b1);
  font-size:11px;color:var(--b8);margin-bottom:10px;
  font-weight:500;
}

/* ====================================================
   SETTINGS
   ==================================================== */
.set-sec-ttl{
  font-family:'Frank Ruhl Libre',serif;
  font-size:14px;font-weight:500;
  color:var(--t2);
  margin:18px 2px 8px;letter-spacing:0;
}

/* ---- category drill-down (plan §9) ---- */
.set-cat-row{
  display:flex;align-items:center;gap:14px;
  padding:14px;background:var(--s);border:1px solid var(--bd);border-radius:12px;
  margin-bottom:10px;cursor:pointer;
}
.set-cat-icon{
  width:40px;height:40px;flex-shrink:0;border-radius:11px;
  background:var(--b0);color:var(--b7);
  display:flex;align-items:center;justify-content:center;
}
.set-cat-txt{flex:1;min-width:0}
.set-cat-ttl{font-size:14px;font-weight:500;color:var(--t)}
.set-cat-sub{font-size:11px;color:var(--t3);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.set-cat-back{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--s2);border:none;color:var(--t2);
  font-family:'Heebo',sans-serif;font-size:12px;font-weight:500;
  padding:8px 14px;border-radius:9px;cursor:pointer;margin-bottom:14px;
}

.trow{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--bd)}
.trow:last-child{border-bottom:none}
.trow-lbl{font-size:13px;font-weight:500}
.trow-sub{font-size:11px;color:var(--t3);margin-top:2px;font-weight:400}

.toggle{position:relative;width:44px;height:26px;flex-shrink:0}
.toggle input{opacity:0;width:0;height:0}
.tsl{position:absolute;inset:0;background:var(--bd);border-radius:26px;transition:.3s;cursor:pointer}
.tsl:before{
  content:'';position:absolute;width:20px;height:20px;left:3px;bottom:3px;
  background:#fff;border-radius:50%;transition:.3s;
  box-shadow:0 1px 3px rgba(0,0,0,.15);
}
.toggle input:checked+.tsl{background:var(--b6)}
.toggle input:checked+.tsl:before{transform:translateX(18px)}

/* Excluded days buttons */
.day-excl-btn{padding:5px 10px;border-radius:20px;border:1.5px solid var(--bd);background:transparent;color:var(--t2);cursor:pointer;font-size:12px;font-family:inherit;transition:background .2s,color .2s,border-color .2s}
.day-excl-btn.active{background:var(--b6);color:#fff;border-color:var(--b6)}

/* Job card */
.jcard{
  border-radius:var(--r2);padding:14px;margin-bottom:10px;
  background:var(--s);border:1px solid var(--bd);
  position:relative;
}
.jcard-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.jcbadge{width:14px;height:14px;border-radius:50%;flex-shrink:0}
.jname{
  flex:1;font-size:13px;font-weight:500;
  background:transparent;border:none;color:var(--t);
  font-family:'Heebo',sans-serif;padding:0;
  border-bottom:1px solid transparent;
}
.jname:focus{outline:none;border-bottom-color:var(--b6)}
.jnums{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}

.crow{display:flex;gap:8px;flex-wrap:wrap}
.cdot{
  width:18px;height:18px;border-radius:50%;cursor:pointer;
  border:2px solid transparent;transition:all .15s;flex-shrink:0;
}
.cdot.sel{border-color:var(--t);transform:scale(1.15)}

.btn-del-j{position:absolute;top:10px;left:10px;background:none;border:none;color:var(--t3);font-size:16px;cursor:pointer}

/* Fixed bonuses */
.fbon-row{display:flex;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--bd)}
.fbon-row:last-child{border-bottom:none}
.fbon-name{
  flex:1;font-size:13px;font-weight:500;
  background:transparent;border:none;color:var(--t);
  font-family:'Heebo',sans-serif;padding:4px 0;
  border-bottom:1px solid transparent;
}
.fbon-name:focus{outline:none;border-bottom-color:var(--b6)}
.fbon-amt{
  width:90px;padding:7px 8px;border-radius:8px;
  border:1px solid var(--bd);background:var(--s2);color:var(--t);
  font-family:'Heebo',sans-serif;font-size:13px;text-align:center;
  font-variant-numeric:tabular-nums;
}
.fbon-amt:focus{outline:none;border-color:var(--b6)}
.fbon-del{background:none;border:none;color:var(--t3);font-size:18px;cursor:pointer;padding:0;line-height:1;flex-shrink:0}
.fbon-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.fbon-chip{
  padding:6px 12px;border-radius:999px;
  border:1px solid var(--bd);background:var(--s2);color:var(--t2);
  font-family:'Heebo',sans-serif;font-size:11px;cursor:pointer;
  transition:all .15s;white-space:nowrap;font-weight:500;
}
.fbon-chip:active{opacity:.75;background:var(--b0);border-color:var(--b6)}

/* Theme pickers — round swatches */
.theme-picker{display:flex;gap:10px;flex-wrap:wrap;padding:8px 0}
.tpick{
  width:48px;height:48px;border-radius:50%;cursor:pointer;
  border:3px solid transparent;transition:all .2s;
  position:relative;flex-shrink:0;min-width:44px;min-height:44px;
}
.tpick.sel{
  border-color:var(--t);
  transform:scale(1.08);
  box-shadow:0 0 0 3px var(--s),0 0 0 5px var(--b6);
}

/* Style picker (legacy) */
.spick{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  flex:1;padding:8px;background:var(--s2);
  border:1px solid var(--bd);border-radius:12px;
  cursor:pointer;color:var(--t2);
  font-family:'Heebo',sans-serif;font-size:11px;font-weight:500;
  transition:all .15s;
}
.spick.sel{border-color:var(--b6);background:var(--b0);color:var(--b8)}
.wpick{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:12px 8px;background:var(--s2);
  border:1px solid var(--bd);border-radius:12px;
  cursor:pointer;color:var(--t2);
  font-family:'Heebo',sans-serif;
  transition:all .15s;
}
.wpick.sel{border-color:var(--b6);background:var(--b0);color:var(--b8)}
.wpick-ttl{font-size:12px;font-weight:600;line-height:1.2}
.wpick-sub{font-size:10px;opacity:.7}
.spick-preview{
  width:100%;height:38px;border-radius:8px;
  background:var(--s);border:1px solid var(--bd);
}
.spick-preview.default-prev{background:linear-gradient(135deg,var(--b6),var(--b8))}
.spick-preview.glass-prev{background:linear-gradient(135deg,rgba(196,106,59,.3),rgba(196,106,59,.05));backdrop-filter:blur(6px)}
.spick-preview.minimal-prev{background:var(--s2);border:2px solid var(--bd)}
.spick-preview.gradient-prev{background:linear-gradient(135deg,var(--b4),var(--b6),var(--b8))}

/* Privacy/security card */
.tpick-row{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--bd)}
.tpick-row:last-child{border-bottom:none}
.tpick-swatch{width:36px;height:36px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:16px}
.tpick-info{flex:1}
.tpick-name{font-size:13px;font-weight:500}
.tpick-sub{font-size:11px;color:var(--t3);margin-top:2px}
.premium-badge{
  background:var(--b6);color:#FFF6EB;
  font-size:9px;font-weight:600;
  padding:2px 8px;border-radius:999px;letter-spacing:.5px;
  display:inline-block;margin-right:4px;
}

/* ====================================================
   FORMS
   ==================================================== */
.fg{margin-bottom:14px}
.fl{
  font-size:10px;font-weight:500;
  color:var(--t2);
  margin-bottom:6px;display:block;letter-spacing:.04em;
}
.fi{
  width:100%;padding:11px 14px;border-radius:10px;
  border:1px solid var(--bd);background:var(--s);
  color:var(--t);
  font-family:'Heebo',sans-serif;
  font-size:14px;font-weight:400;
  transition:border-color .2s,box-shadow .2s;
  -webkit-appearance:none;
}
.fi:focus{outline:none;border-color:var(--b6);box-shadow:0 0 0 3px var(--b1)}
input[type=time].fi,input[type=number].fi{text-align:center;font-variant-numeric:tabular-nums}

.t2row{display:flex;gap:10px}
.t2row>div{flex:1}

/* ====================================================
   BUTTONS
   ==================================================== */
.btn{
  width:100%;padding:13px;border-radius:var(--r2);border:none;
  font-family:'Heebo',sans-serif;
  font-size:13px;font-weight:600;cursor:pointer;
  transition:all .2s;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.btn:hover{opacity:.9}
.btn:active{transform:scale(.98)}
.btn+.btn{margin-top:8px}
.btn-p{background:var(--t);color:var(--bg)}
.btn-s{background:var(--g);color:#fff}
.btn-d{background:var(--r);color:#fff}
.btn-o{background:transparent;border:1px solid var(--bd);color:var(--t)}
.btn-g{background:var(--b0);color:var(--b8);border:1px solid var(--b1)}
.btn-sm{padding:8px 12px;font-size:11px;font-weight:600;width:auto;border-radius:9px}
.btn-row{display:flex;gap:10px;margin-top:16px}
.btn-row .btn{flex:1}

/* ====================================================
   MODALS
   ==================================================== */
.modal{
  display:none;position:fixed;inset:0;
  background:rgba(43,34,24,.55);z-index:200;
  align-items:flex-end;justify-content:center;
  /* no backdrop-filter here: a composited ancestor over text fields breaks
     IME caret sync on Android WebView (typing lands at the end) */
}
.modal.active{display:flex}
.msh{
  background:var(--s);
  border-radius:22px 22px 0 0;
  width:100%;max-width:580px;max-height:93vh;
  overflow-y:auto;
  padding:0 18px calc(20px + env(safe-area-inset-bottom));
  animation:shUp .3s cubic-bezier(.34,1.56,.64,1);
  border-top:1px solid var(--bd);
}
@keyframes shUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.mhdl{width:40px;height:4px;background:var(--bd);border-radius:2px;margin:12px auto 18px}
.mttl{
  font-family:'Frank Ruhl Libre',serif;
  font-size:20px;font-weight:500;
  margin-bottom:16px;letter-spacing:-.01em;
}
.msub{font-size:11px;font-weight:400;color:var(--t2);margin-top:-10px;margin-bottom:14px}
.mclose{
  float:left;background:none;border:none;color:var(--t3);
  font-size:22px;cursor:pointer;line-height:1;
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.mclose:hover{background:var(--s2);color:var(--t)}

.mnav{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--b0);
  padding:10px 12px;border-radius:10px;margin-bottom:16px;
  border:1px solid var(--b1);
}
.mnav-btn{background:none;border:none;font-size:20px;color:var(--b8);cursor:pointer;padding:0 8px}
.mnav-c{text-align:center}
.mnav-ttl{
  font-family:'Frank Ruhl Libre',serif;
  font-size:16px;font-weight:500;color:var(--b8);
}
.mnav-sub{font-size:10px;color:var(--t3);margin-top:2px}

.brow{display:flex;gap:6px;align-items:center;margin-top:8px}
.brow .fi{margin:0}
.bdesc{flex:2}
.bamt{flex:1}
.bdel{background:none;border:none;color:var(--r);font-size:18px;cursor:pointer;padding:4px;flex-shrink:0}

.pdfopt{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--bd);cursor:pointer}
.pdfopt:last-child{border-bottom:none}
.pdfchk{
  width:22px;height:22px;border-radius:6px;
  border:2px solid var(--bd);background:var(--s);
  display:flex;align-items:center;justify-content:center;font-size:13px;
  flex-shrink:0;transition:all .15s;color:transparent;
}
.pdfchk.on{background:var(--b6);border-color:var(--b6);color:#FFF6EB}
.pdfopt-lbl{font-size:13px;font-weight:500}

/* ====================================================

/* ====================================================
   DAY/WEEK VIEW (calendar sub-views)
   ==================================================== */
.wv-list{display:flex;flex-direction:column;gap:4px}
.wv-row{
  display:flex;align-items:center;gap:8px;
  padding:9px 12px;border-radius:10px;
  background:var(--s);border:1px solid var(--bd);cursor:pointer;
  transition:all .15s;
}
.wv-row:active{transform:scale(.98)}
.wv-row.wv-has{background:var(--b0);border-color:var(--b1)}
.wv-row.wv-today{border-color:var(--b6);box-shadow:0 0 0 2px var(--b1)}
.wv-row.wv-miss{border-color:var(--am);border-style:dashed}
.wv-name{font-size:12px;font-weight:600;color:var(--t2);width:36px;flex-shrink:0;font-family:'Frank Ruhl Libre',serif}
.wv-date{font-size:11px;color:var(--t3);width:24px;flex-shrink:0;font-family:'Frank Ruhl Libre',serif}
.wv-bar-wrap{flex:1;height:5px;background:var(--bd);border-radius:3px;overflow:hidden}
.wv-bar-fill{height:100%;border-radius:3px;background:var(--b6);transition:width .3s}
.wv-hrs{font-size:10px;color:var(--b7);width:30px;text-align:left;flex-shrink:0;font-weight:600;font-variant-numeric:tabular-nums}
.wv-pay{font-size:10px;color:var(--g);width:54px;text-align:left;flex-shrink:0;font-weight:600;font-variant-numeric:tabular-nums}

.dv-card{
  background:var(--s);border-radius:var(--r1);
  padding:16px;border:1px solid var(--bd);margin-bottom:8px;
}
.dv-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.dv-title{
  font-family:'Frank Ruhl Libre',serif;
  font-size:22px;font-weight:500;color:var(--t);letter-spacing:-.015em;
}
.dv-sub{font-size:11px;color:var(--t3);margin-top:2px}
.dv-nav{display:flex;gap:4px}
.dv-nav-btn{
  width:30px;height:30px;border-radius:50%;
  border:1px solid var(--bd);
  background:var(--s2);color:var(--t2);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:12px;transition:all .15s;
}
.dv-nav-btn:active{background:var(--b0)}
.dv-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:12px}
.dv-metric{
  background:var(--s2);border-radius:10px;padding:11px 8px;
  text-align:center;border:1px solid var(--bd);
}
.dv-metric-val{
  font-family:'Frank Ruhl Libre',serif;
  font-size:20px;font-weight:500;color:var(--b8);
  letter-spacing:-.01em;line-height:1;
  font-variant-numeric:tabular-nums;
}
.dv-metric-lbl{font-size:9px;color:var(--t3);margin-top:4px;letter-spacing:.04em}
.dv-detail{display:flex;align-items:center;gap:6px;padding:8px 0;border-bottom:1px solid var(--bd);font-size:12px;color:var(--t2)}
.dv-detail:last-child{border-bottom:none}
.dv-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.dv-val{margin-right:auto;font-weight:600;color:var(--t)}
.dv-empty{text-align:center;padding:26px 0;color:var(--t3);font-size:12px}

/* Partner Daily Summary */
.partner-day-summary{
  margin-top:20px;padding:14px;
  background:var(--b0);border:1px solid var(--b1);
  border-radius:12px;border-top:3px solid var(--b6);
}
.pds-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--bd);
}
.pds-title{
  display:flex;align-items:center;gap:6px;
  font-size:12px;font-weight:600;color:var(--t2);
}
.pds-title svg{color:var(--b6)}
.pds-total{
  font-family:'Frank Ruhl Libre',serif;
  font-size:20px;font-weight:500;color:var(--b7);
  letter-spacing:-.01em;
}
.pds-breakdown{display:flex;flex-direction:column;gap:8px}
.pds-row{
  display:flex;justify-content:space-between;align-items:center;
  font-size:11px;padding:7px 9px;background:var(--s);border-radius:8px;border:1px solid var(--bd);
}
.pds-label{display:flex;align-items:center;gap:5px;color:var(--t3);font-weight:500}
.pds-label svg{flex-shrink:0}
.pds-value{color:var(--t);font-variant-numeric:tabular-nums;text-align:left}
.pds-value strong{font-weight:700;color:var(--b7);font-family:'Frank Ruhl Libre',serif;font-size:14px}
.pds-bonus{color:var(--g);font-weight:700;font-family:'Frank Ruhl Libre',serif;font-size:14px}
.pds-note{
  margin-top:10px;padding:9px 11px;
  background:var(--s);border-radius:8px;border-right:3px solid var(--b6);
  font-size:11px;color:var(--t2);line-height:1.5;
}

/* ====================================================
   SUCCESS FLASH
   ==================================================== */
.sf{
  position:fixed;top:50%;left:50%;
  transform:translate(-50%,-50%) scale(0);
  background:var(--g);color:#fff;border-radius:50%;
  width:76px;height:76px;
  display:flex;align-items:center;justify-content:center;
  font-size:32px;z-index:999;pointer-events:none;
  transition:all .3s cubic-bezier(.34,1.56,.64,1);
}
.sf.show{transform:translate(-50%,-50%) scale(1)}
.sf.bye{transform:translate(-50%,-50%) scale(0);opacity:0}

/* ====================================================
   EMPTY STATE
   ==================================================== */
.empty{text-align:center;padding:40px 20px;color:var(--t3)}
.empty-ico{font-size:0;margin-bottom:14px;display:flex;justify-content:center;color:var(--t3)}
.empty-ttl{
  font-family:'Frank Ruhl Libre',serif;
  font-size:18px;font-weight:500;color:var(--t2);margin-bottom:6px;
  letter-spacing:-.01em;
}
.empty-sub{font-size:12px;font-weight:400;line-height:1.6}

.div{height:1px;background:var(--bd);margin:14px 0}

.pbar-wrap{
  height:8px;background:var(--bd);border-radius:6px;
  overflow:hidden;margin-top:8px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.04);
}
.pbar-fill{height:100%;border-radius:6px;transition:width .7s cubic-bezier(.34,1.56,.64,1)}

.page-footer{
  text-align:center;padding:18px 0 4px;
  font-size:10px;font-weight:500;color:var(--t3);letter-spacing:.05em;
  font-family:'Frank Ruhl Libre',serif;
}

/* ============================================================
   ============================================================
   V2 OVERLAY — APPEND AT END
     · Refined partner/me bars on the calendar (5px → 3px)
     · User-controlled color intensity (data-intensity / --ci)
     · Page corner gradient (top-left rich → bottom-right bright)
     · Real differentiation: default / gradient / minimal / glass
     · Glass theme — glowing aurora
   ============================================================
   ============================================================ */

:root {
  --ci: 0.65;                                       /* 0..1 — set by JS from settings.colorIntensity */
  --ci-strong: calc(0.18 + 0.55 * var(--ci));
  --ci-soft:   calc(0.05 + 0.18 * var(--ci));
  --ci-grad:   calc(0.10 + 0.40 * var(--ci));
  --ci-glow:   calc(0.10 + 0.45 * var(--ci));
}

/* ── Refined bars on calendar cells ───────────────────────── */
.cc-bars {
  gap: 3px;
}
.cc-bar {
  height: 3px;
  border-radius: 2px;
  max-width: 16px;
}
/* The second bar in a couple's cell (partner) gets reduced opacity
   so the two are visibly hierarchical without changing color. */
.cc-bars .cc-bar:nth-child(2) { opacity: 0.55; }
.cc-stripe { height: 1.5px; border-radius: 1.5px; }
.cc-stripe.partner { opacity: 0.55; }

/* ── Body corner-gradient (DEFAULT / "classic" mode) ──────── */
body {
  background:
    radial-gradient(
      ellipse 100% 70% at 0% 0%,
      color-mix(in srgb, var(--b6) calc(var(--ci-strong) * 100%), transparent) 0%,
      color-mix(in srgb, var(--b6) calc(var(--ci-soft)   * 100%), transparent) 30%,
      transparent 62%
    ),
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--b1) calc(var(--ci-grad) * 200%), var(--bg)) 0%,
      var(--bg) 45%,
      var(--s) 100%
    ),
    var(--bg);
  background-attachment: fixed, fixed, fixed;
}
/* Soften the paper-grain so it doesn't fight the bright corner */
body::before { opacity: calc(0.5 + 0.4 * var(--ci)); }

/* ============================================================
   STYLE VARIANTS — html[data-style] differentiation
   ============================================================ */

/* === GRADIENT — saturated color, frosted cards ============== */
html[data-style="gradient"] body {
  background:
    radial-gradient(ellipse 110% 75% at 0% 0%,
      color-mix(in srgb, var(--b6) calc(70% * var(--ci) + 25%), transparent) 0%,
      color-mix(in srgb, var(--b6) calc(35% * var(--ci)), transparent) 28%,
      transparent 65%),
    radial-gradient(ellipse 80% 70% at 100% 100%,
      color-mix(in srgb, var(--g) calc(45% * var(--ci) + 8%), transparent) 0%,
      transparent 55%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--b6) 32%, var(--b1)) 0%,
      var(--b1) 30%,
      var(--bg) 65%,
      var(--s) 100%);
  background-attachment: fixed, fixed, fixed;
}
html[data-style="gradient"] body::before { opacity: 0.25; }
html[data-style="gradient"] .card,
html[data-style="gradient"] .clk-card,
html[data-style="gradient"] .scard,
html[data-style="gradient"] .insight-chip,
html[data-style="gradient"] .qab,
html[data-style="gradient"] .jcard,
html[data-style="gradient"] .ucard,
html[data-style="gradient"] .wv-row,
html[data-style="gradient"] .dv-card {
  background: rgba(255, 252, 247, 0.62) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-color: rgba(255, 246, 235, 0.7) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 10px 28px -12px rgba(142, 70, 34, calc(0.18 + 0.18 * var(--ci))) !important;
}
html[data-style="gradient"] .bnav {
  background: rgba(255, 250, 242, 0.78);
}

/* === MINIMAL — black ink on white, hairline, sharp ========== */
html[data-style="minimal"],
html[data-style="minimal"] body {
  --b8:#000000; --b7:#1A1A1A; --b6:#1A1A1A; --b5:#4A4A4A; --b4:#8A8A8A;
  --b1:#F0F0F0; --b0:#F5F5F5;
  --bg:#FFFFFF;
  --s:#FFFFFF; --s2:#FAFAFA; --bd:#E8E8E8;
  --t:#0A0A0A; --t2:#4A4A4A; --t3:#8A8A8A;
  --g:#1A1A1A; --gl:#F0F0F0;
  --am:#6A6A6A; --aml:#F2F2F2;
  --r1:4px; --r2:2px; --r3:2px;
}
html[data-style="minimal"] body {
  background:
    radial-gradient(ellipse 100% 70% at 0% 0%,
      rgba(0,0,0, calc(0.04 + 0.06 * var(--ci))) 0%,
      transparent 60%),
    #FFFFFF !important;
}
html[data-style="minimal"] body::before { opacity: 0 !important; }
html[data-style="minimal"] *,
html[data-style="minimal"] *::before,
html[data-style="minimal"] *::after {
  font-family: 'Heebo', 'Inter', system-ui, sans-serif !important;
  letter-spacing: 0 !important;
}
html[data-style="minimal"] .card,
html[data-style="minimal"] .clk-card,
html[data-style="minimal"] .scard,
html[data-style="minimal"] .insight-chip,
html[data-style="minimal"] .qab,
html[data-style="minimal"] .jcard,
html[data-style="minimal"] .ucard,
html[data-style="minimal"] .dv-card,
html[data-style="minimal"] .wv-row {
  background: transparent !important;
  border: 1px solid #E8E8E8 !important;
  box-shadow: none !important;
}
html[data-style="minimal"] .cc {
  background: transparent !important;
  border: 1px solid #E8E8E8 !important;
}
html[data-style="minimal"] .cc.has-data {
  background: transparent !important;
  border-color: #2A2A2A !important;
}
html[data-style="minimal"] .cc.today {
  background: #0A0A0A !important;
  border-color: #0A0A0A !important;
}
html[data-style="minimal"] .cc-num,
html[data-style="minimal"] .cal-title,
html[data-style="minimal"] .clk-time,
html[data-style="minimal"] .ct-val,
html[data-style="minimal"] .uc-money,
html[data-style="minimal"] .sval,
html[data-style="minimal"] .dv-metric-val {
  font-weight: 300 !important;
}
html[data-style="minimal"] .ni.active::before {
  background: #0A0A0A;
  border-radius: 0;
}
html[data-style="minimal"] .bnav {
  background: rgba(255,255,255,0.92);
  border-top: 1px solid #E8E8E8;
}

/* === GLASS — light frosted cream, warm aurora ============== */
html[data-style="glass"],
html[data-style="glass"] body {
  --bg: #F6EBD8;
  --s: rgba(255, 252, 247, 0.65);
  --s2: rgba(241, 233, 218, 0.72);
  --bd: rgba(231, 219, 196, 0.78);
  --t: #2B2218;
  --t2: #6B5E50;
  --t3: #9D8F7D;
  --b6: #C46A3B;
  --b7: #A85531;
  --b8: #8E4622;
  --b1: rgba(196, 106, 59, 0.22);
  --b0: rgba(196, 106, 59, 0.10);
  --g: #6B8A57;
  --gl: rgba(107, 138, 87, 0.20);
}
html[data-style="glass"] body {
  background:
    radial-gradient(ellipse 90% 65% at 0% 0%,
      rgba(196, 106, 59, calc(0.44 + 0.28 * var(--ci))) 0%,
      rgba(196, 106, 59, calc(0.12 + 0.08 * var(--ci))) 35%,
      transparent 65%),
    radial-gradient(ellipse 70% 55% at 100% 100%,
      rgba(107, 138, 87, calc(0.24 + 0.16 * var(--ci))) 0%,
      transparent 55%),
    radial-gradient(ellipse 50% 40% at 50% 50%,
      rgba(196, 106, 59, calc(0.08 + 0.06 * var(--ci))) 0%,
      transparent 70%),
    linear-gradient(160deg, #FBF3E8 0%, #F6EBD8 45%, #F0E2C8 100%) !important;
  background-attachment: fixed, fixed, fixed, fixed;
  color: var(--t);
}
html[data-style="glass"] body::before { opacity: calc(0.3 + 0.3 * var(--ci)); }
html[data-style="glass"] .hdr {
  background: rgba(251, 243, 232, 0.80);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border-bottom-color: rgba(231, 219, 196, 0.6);
}
html[data-style="glass"] .bnav {
  background: rgba(251, 243, 232, 0.84);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-top-color: rgba(231, 219, 196, 0.6);
}
html[data-style="glass"] .card,
html[data-style="glass"] .clk-card,
html[data-style="glass"] .scard,
html[data-style="glass"] .insight-chip,
html[data-style="glass"] .qab,
html[data-style="glass"] .jcard,
html[data-style="glass"] .ucard,
html[data-style="glass"] .dv-card,
html[data-style="glass"] .wv-row,
html[data-style="glass"] .miss-banner,
html[data-style="glass"] .streak-banner,
html[data-style="glass"] .csummary,
html[data-style="glass"] .ibanner,
html[data-style="glass"] .partner-day-summary,
html[data-style="glass"] .pds-row,
html[data-style="glass"] .pds-note,
html[data-style="glass"] .pair-box,
html[data-style="glass"] .cmp-chip,
html[data-style="glass"] .ibtn,
html[data-style="glass"] .cal-date-inp,
html[data-style="glass"] .cal-jump-btn,
html[data-style="glass"] .fi {
  background: rgba(255, 252, 247, 0.62) !important;
  border-color: rgba(255, 248, 240, 0.82) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 8px 24px -8px rgba(196, 106, 59, calc(0.12 + 0.10 * var(--ci))) !important;
  color: var(--t) !important;
}
/* typed fields must not carry backdrop-filter — it breaks IME caret sync on
   Android WebView; the translucent background above keeps the glass look */
html[data-style="glass"] input.fi,
html[data-style="glass"] textarea.fi {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-style="glass"] .cv-pills,
html[data-style="glass"] .rtabs {
  background: rgba(241, 233, 218, 0.55);
  border-color: rgba(231, 219, 196, 0.6);
}
html[data-style="glass"] .cv-pill.active,
html[data-style="glass"] .rtab.active {
  background: rgba(255, 252, 247, 0.88);
  color: var(--t);
  box-shadow: 0 1px 2px rgba(74, 49, 31, 0.07);
}
/* Clean numbers — no glow on light background */
html[data-style="glass"] .ct-val,
html[data-style="glass"] .sval.b,
html[data-style="glass"] .uc-money,
html[data-style="glass"] .clk-time.on,
html[data-style="glass"] .dv-metric-val,
html[data-style="glass"] .pds-total,
html[data-style="glass"] .pair-val {
  color: var(--b8) !important;
  -webkit-text-fill-color: var(--b8) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  text-shadow: none;
  filter: none;
}
html[data-style="glass"] .sval.g { color: var(--g) !important; text-shadow: none; }
/* Calendar cells */
html[data-style="glass"] .cc {
  background: rgba(255, 252, 247, 0.45);
  border: 1px solid rgba(231, 219, 196, 0.6);
}
html[data-style="glass"] .cc.has-data {
  background: rgba(255, 252, 247, 0.75);
  border-color: rgba(196, 106, 59, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
html[data-style="glass"] .cc.today {
  background: var(--b6);
  border-color: var(--b5);
  box-shadow: 0 0 16px rgba(196, 106, 59, calc(0.28 + 0.28 * var(--ci)));
}
html[data-style="glass"] .cc.missing { border: 1px dashed rgba(185, 123, 44, 0.5); }
html[data-style="glass"] .clk-ring-wrap {
  background: var(--b6);
  box-shadow: 0 0 14px rgba(196, 106, 59, 0.35);
}
html[data-style="glass"] .ni { color: var(--t3); }
html[data-style="glass"] .ni.active { color: var(--b8); }
html[data-style="glass"] .ni.active::before { background: var(--b6); }
html[data-style="glass"] .toggle input:checked + .tsl { background: var(--b6); }

/* ============================================================
   INTENSITY SLIDER — settings UI
   ============================================================ */
.intensity-card {
  background: var(--s);
  border: 1px solid var(--bd);
  border-radius: var(--r1);
  padding: 14px 16px 16px;
  margin-bottom: 12px;
  position: relative;
}
.intensity-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 4px;
}
.intensity-ttl {
  font-family: 'Frank Ruhl Libre', serif;
  font-weight: 500; font-size: 14px; color: var(--t);
}
.intensity-val {
  font-family: 'Frank Ruhl Libre', serif;
  font-weight: 500; font-size: 18px;
  color: var(--b7);
  font-variant-numeric: tabular-nums;
}
.intensity-sub {
  font-size: 11px; color: var(--t3);
  margin-bottom: 12px;
}
.intensity-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 99px;
  background: linear-gradient(
    to left,
    var(--b6) 0%,
    var(--b6) var(--ci-pct, 65%),
    var(--bd) var(--ci-pct, 65%),
    var(--bd) 100%
  );
  outline: none;
  cursor: pointer;
  margin: 8px 0 6px;
  direction: rtl;
}
.intensity-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--s);
  border: 2px solid var(--b6);
  cursor: grab;
  box-shadow: 0 2px 6px rgba(142, 70, 34, .25);
}
.intensity-slider::-moz-range-thumb {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--s);
  border: 2px solid var(--b6);
  cursor: grab;
  box-shadow: 0 2px 6px rgba(142, 70, 34, .25);
}
.intensity-marks {
  display: flex; justify-content: space-between;
  font-size: 9px; color: var(--t3);
  margin-top: 6px;
  font-weight: 500; letter-spacing: .02em;
}
html[data-style="glass"] .intensity-slider::-webkit-slider-thumb {
  background: #FFD8A0;
  border-color: #FFC080;
  box-shadow: 0 0 12px rgba(232, 151, 87, 0.6);
}
html[data-style="glass"] .intensity-slider::-moz-range-thumb {
  background: #FFD8A0;
  border-color: #FFC080;
  box-shadow: 0 0 12px rgba(232, 151, 87, 0.6);
}

/* ============================================================
   BACKGROUND PATTERN LAYER
   ============================================================ */
#bgPL {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  transition: opacity 0.4s ease;
}
#bgPL > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Pattern intensity card — reuses .intensity-card styles */
.bp-intensity-card {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--bd);
}

/* Background pattern pill buttons */
.bp-btn {
  padding: 6px 12px;
  border-radius: 999px;
  min-height: 34px;
  cursor: pointer;
  border: 1.5px solid var(--bd);
  background: transparent;
  color: var(--t2);
  font-family: Heebo, sans-serif;
  font-size: 11px;
  font-weight: 500;
  transition: all .15s;
  white-space: nowrap;
}
.bp-btn.active {
  border-color: var(--b6);
  background: var(--b0);
  color: var(--b8);
  font-weight: 700;
}

/* ============================================================
   IMPROVED STYLE PICKER PREVIEWS — visible difference per option
   ============================================================ */
.spick-preview.default-prev {
  background: linear-gradient(155deg, var(--b0) 0%, var(--s) 75%);
  border-color: var(--b1);
}
.spick-preview.default-prev::after {
  content: "₪";
  display: flex; align-items: center; justify-content: center;
  height: 100%;
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--t);
}
.spick-preview.gradient-prev {
  background:
    radial-gradient(ellipse at 20% 20%, var(--b6) 0%, transparent 60%),
    linear-gradient(135deg, var(--b6) 0%, var(--b4) 45%, var(--s) 100%);
  position: relative;
}
.spick-preview.gradient-prev::after {
  content: "₪";
  display: flex; align-items: center; justify-content: center;
  height: 100%;
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 15px;
  color: #FFF6EB;
  text-shadow: 0 1px 2px rgba(142, 70, 34, .35);
}
.spick-preview.minimal-prev {
  background: #FFFFFF;
  border: 1px solid #1A1A1A;
  border-radius: 0;
  position: relative;
}
.spick-preview.minimal-prev::after {
  content: "₪";
  display: flex; align-items: center; justify-content: center;
  height: 100%;
  font-family: 'Heebo', sans-serif;
  font-size: 15px;
  font-weight: 300;
  color: #0A0A0A;
}
.spick-preview.glass-prev {
  background:
    radial-gradient(ellipse at 20% 20%, rgba(196, 106, 59, 0.42) 0%, transparent 60%),
    linear-gradient(160deg, #FBF3E8 0%, #F0E2C8 100%);
  border-color: rgba(196, 106, 59, 0.28);
  position: relative;
}
.spick-preview.glass-prev::after {
  content: "₪";
  display: flex; align-items: center; justify-content: center;
  height: 100%;
  font-family: 'Frank Ruhl Libre', serif;
  font-size: 15px;
  font-weight: 500;
  color: #8E4622;
}

/* ============================================================
   BOT — AI assistant FAB + panel
   ============================================================ */
.bot-fab {
  position: fixed;
  bottom: calc(var(--nh) + 16px);
  left: 16px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--b6), var(--b8));
  color: #FFF6EB;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  box-shadow: 0 4px 14px rgba(142,70,34,.45), 0 1px 3px rgba(0,0,0,.15);
  z-index: 120;
  transition: box-shadow .18s, transform .15s;
}
.bot-fab-lbl {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .5px;
  opacity: .85;
  line-height: 1;
}
.bot-fab:active { transform: scale(.91); box-shadow: 0 2px 8px rgba(142,70,34,.4); }
.bot-fab.active {
  background: linear-gradient(145deg, var(--b7), var(--b8));
  box-shadow: 0 2px 10px rgba(142,70,34,.5);
}
.bot-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.25);
  z-index: 390;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}
.bot-overlay.on { opacity: 1; pointer-events: all; }
.bot-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 72vh;
  background: var(--s);
  border-radius: 20px 20px 0 0;
  box-shadow: var(--shl);
  z-index: 400;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
}
/* transform:none (not translateY(0)) — a persistent transform on this panel keeps a
   compositing layer over the chat textarea and breaks IME caret sync on Android */
.bot-panel.open { transform: none; }
.bot-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--bd);
  flex-shrink: 0;
}
.bot-hdr-l { display: flex; align-items: center; gap: 10px; }
.bot-avatar {
  width: 36px;
  height: 36px;
  background: var(--b0);
  border: 1px solid var(--b1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--b7);
  flex-shrink: 0;
}
.bot-hdr-title { font-size: 14px; font-weight: 700; color: var(--t); font-family: 'Heebo', sans-serif; }
.bot-hdr-sub { font-size: 11px; color: var(--t3); }
.bot-hdr-close, .bot-hdr-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--s2);
  border: 1px solid var(--bd);
  color: var(--t2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
.bot-hdr-close:hover, .bot-hdr-icon:hover { background: var(--b0); color: var(--b7); }
.bot-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 14px 14px 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overscroll-behavior: contain;
}
.bot-msg {
  max-width: 88%;
  padding: 10px 13px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.6;
  font-family: 'Heebo', sans-serif;
  word-break: break-word;
}
.bot-msg-user {
  align-self: flex-start;
  background: var(--b6);
  color: #FFF6EB;
  border-bottom-right-radius: 4px;
}
.bot-msg-ai {
  align-self: flex-end;
  background: var(--s2);
  color: var(--t);
  border: 1px solid var(--bd);
  border-bottom-left-radius: 4px;
}
.bot-loading {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 12px 16px;
}
.bot-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--t3);
  animation: botBounce 1.2s infinite ease-in-out;
}
.bot-dot:nth-child(2) { animation-delay: .2s; }
.bot-dot:nth-child(3) { animation-delay: .4s; }
@keyframes botBounce {
  0%, 80%, 100% { transform: translateY(0); opacity: .5; }
  40% { transform: translateY(-6px); opacity: 1; }
}
.bot-foot {
  border-top: 1px solid var(--bd);
  padding: 10px 12px;
  flex-shrink: 0;
  background: var(--s);
}
.bot-inp-row { display: flex; gap: 8px; align-items: flex-end; }
.bot-in {
  flex: 1;
  border: 1.5px solid var(--bd);
  border-radius: 12px;
  padding: 9px 12px;
  font-size: 13.5px;
  font-family: 'Heebo', sans-serif;
  background: var(--bg);
  color: var(--t);
  outline: none;
  resize: none;
  max-height: 110px;
  line-height: 1.5;
  transition: border-color .15s;
}
.bot-in:focus { border-color: var(--b6); }
.bot-send-btn {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--b6);
  border: none;
  color: #FFF6EB;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s, transform .1s;
}
.bot-send-btn:active { transform: scale(.9); }
.bot-send-btn:hover { background: var(--b7); }
.bot-mic-btn {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--s2);
  border: 1.5px solid var(--bd);
  color: var(--t2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.bot-mic-btn:hover { background: var(--b0); color: var(--b7); border-color: var(--b4); }
.bot-mic-btn:active { transform: scale(.9); }
.bot-mic-btn.recording {
  background: var(--rl);
  border-color: var(--r);
  color: var(--r);
  animation: micPulse 1s infinite ease-in-out;
}
@keyframes micPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(178,59,59,.4); }
  50% { box-shadow: 0 0 0 7px rgba(178,59,59,.0); }
}
.bot-stop-btn {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--r);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s, transform .1s;
}
.bot-stop-btn:active { transform: scale(.9); }

/* loading bubble's tool-in-progress label ("בודק את החודש...") — swapped per tool via
   bot.js _toolLabel(), keeps the wait from reading as "stuck" during the multi-round loop */
.bot-loading-lbl {
  font-size: 11px;
  color: var(--t3);
  margin-inline-start: 4px;
}

/* follow-up suggestion chips — shown after the welcome message and after most answers */
.bot-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 2px 2px 8px;
  align-self: flex-end;
  max-width: 92%;
}
.bot-chip {
  background: var(--s2);
  border: 1px solid var(--bd);
  color: var(--t2);
  border-radius: 20px;
  padding: 6px 12px;
  font-size: 12px;
  font-family: 'Heebo', sans-serif;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.bot-chip:hover { background: var(--b0); color: var(--b7); border-color: var(--b4); }

/* confirm/cancel row (destructive tools) and undo row (every write tool) */
.bot-action-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  align-self: flex-end;
  max-width: 88%;
  padding: 2px 4px;
}
.bot-confirm-lbl {
  font-size: 12.5px;
  color: var(--t2);
  font-family: 'Heebo', sans-serif;
}
.bot-confirm-btn, .bot-undo-btn {
  background: var(--b6);
  color: #FFF6EB;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Heebo', sans-serif;
  transition: background .15s;
}
.bot-confirm-btn:hover, .bot-undo-btn:hover { background: var(--b7); }
.bot-cancel-btn {
  background: var(--s2);
  color: var(--t2);
  border: 1px solid var(--bd);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  font-family: 'Heebo', sans-serif;
  transition: background .15s;
}
.bot-cancel-btn:hover { background: var(--bg); }
.bot-action-done {
  font-size: 12px;
  color: var(--t3);
  font-family: 'Heebo', sans-serif;
  padding: 2px 4px;
}

/* a bubble whose action was undone — struck through so the chat history doesn't lie */
.bot-msg-undone { opacity: .55; text-decoration: line-through; }

/* ====================================================
   MT SNACKBAR (mutations.js) — "✓ <label>" + optional undo
   ==================================================== */
.mt-snack{
  position:fixed;
  inset-inline:16px;
  bottom:calc(var(--nh) + 14px + env(safe-area-inset-bottom));
  max-width:520px;margin-inline:auto;
  background:var(--t);color:var(--bg);
  border-radius:14px;
  padding:12px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  box-shadow:var(--shl);
  z-index:998;
  transform:translateY(140%);opacity:0;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), opacity .3s;
  pointer-events:none;
}
.mt-snack.show{transform:translateY(0);opacity:1;pointer-events:auto}
.mt-snack-txt{font-size:13px;font-weight:400;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mt-snack-undo{
  flex-shrink:0;background:none;border:none;
  color:var(--b4);font-weight:700;font-size:13px;
  cursor:pointer;padding:2px 4px;
}
.mt-snack-undo:hover{color:var(--b1)}

/* ====================================================
   HISTORY SHEET (#mHist)
   ==================================================== */
.mhist-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 0;border-bottom:1px solid var(--bd);
}
.mhist-row:last-child{border-bottom:none}
.mhist-main{flex:1;min-width:0}
.mhist-lbl{font-size:13px;color:var(--t);line-height:1.4}
.mhist-lbl.undone{opacity:.55;text-decoration:line-through}
.mhist-ts{font-size:10.5px;color:var(--t3);margin-top:2px}
.mhist-undo-btn{
  flex-shrink:0;background:var(--b6);color:#FFF6EB;border:none;border-radius:8px;
  padding:6px 12px;font-size:12px;font-weight:600;cursor:pointer;
}
.mhist-undo-btn:hover{background:var(--b7)}
.mhist-badge{
  flex-shrink:0;font-size:10.5px;color:var(--t3);
  background:var(--s2);border-radius:8px;padding:5px 10px;white-space:nowrap;
}
.mhist-safe-row{
  background:var(--rl);border:1px solid var(--r);border-radius:12px;
  padding:12px 14px;margin-bottom:12px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.mhist-safe-txt{font-size:12px;color:var(--t);line-height:1.5}
.mhist-safe-btn{
  flex-shrink:0;background:var(--r);color:#fff;border:none;border-radius:8px;
  padding:7px 12px;font-size:12px;font-weight:600;cursor:pointer;
}

/* ====================================================
   DAY BREAKDOWN — shared renderer (ui-day-modal.js renderDayBreakdown())
   Used by: day modal banner, calendar day view, #mConflict sheet.
   ==================================================== */
.bd-card{background:var(--b0);border:1px solid var(--b1);border-radius:12px;margin-bottom:14px;overflow:hidden}
.bd-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;cursor:pointer}
.bd-head-lbl{font-size:9px;font-weight:600;color:var(--b7);text-transform:uppercase;letter-spacing:1px;margin-bottom:2px}
.bd-head-date{font-size:10px;color:var(--t3)}
.bd-head-r{display:flex;align-items:center;gap:8px}
.bd-toggle{display:flex;color:var(--b7);flex-shrink:0}
.bd-compact{font-family:'Frank Ruhl Libre',serif;font-size:15px;font-weight:500;color:var(--b8);white-space:nowrap;font-variant-numeric:tabular-nums}
.bd-expanded{border-top:1px solid var(--b1);padding:4px 14px 10px}
.bd-row{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:12px}
.bd-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.bd-dot-bonus{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--g)}
.bd-job .bd-lbl{font-weight:500;color:var(--t)}
.bd-ot{padding-inline-start:16px;color:var(--t2)}
.bd-ot .bd-lbl{color:var(--t2);font-size:11px}
.bd-lbl{flex:1;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bd-mid{color:var(--t3);font-size:11px;white-space:nowrap;font-variant-numeric:tabular-nums}
.bd-val{color:var(--t);font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums;min-width:56px;text-align:end}
.bd-bonus .bd-lbl{color:var(--t)}
.bd-bonus .bd-val{color:var(--g)}
.bd-more{color:var(--t3);font-size:11px;padding-inline-start:16px}
.bd-total{display:flex;justify-content:space-between;align-items:center;padding-top:8px;margin-top:4px;border-top:1px solid var(--bd);font-weight:700;font-size:14px;color:var(--b8)}
.bd-note{padding:8px 14px 12px;font-size:11px;color:var(--t2);border-top:1px solid var(--b1);line-height:1.5}
.bd-empty{padding:12px 14px;font-size:12px;color:var(--t3);text-align:center}

/* ---- day-nav dirty guard (ui-day-modal.js navDay()) ---- */
.day-dirty-guard{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:var(--aml);border:1px solid var(--am);border-radius:10px;
  padding:9px 12px;margin-bottom:12px;font-size:12px;
}
.ddg-txt{color:var(--t);flex:1}
.ddg-save,.ddg-discard{border:none;border-radius:7px;padding:6px 11px;font-size:11px;font-weight:600;cursor:pointer;flex-shrink:0}
.ddg-save{background:var(--b6);color:#FFF6EB}
.ddg-discard{background:var(--s2);color:var(--t2)}

/* ====================================================
   QUICK FILL CHIPS (מילוי מהיר) — ui-day-modal.js renderQuickFillChips()
   ==================================================== */
.qf-lbl-row{font-size:10px;color:var(--t3);margin-bottom:6px}
.qf-row{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.qf-chip{
  display:flex;align-items:center;gap:5px;
  background:var(--s2);border:1px solid var(--bd);border-radius:20px;
  padding:6px 12px 6px 10px;font-size:12px;color:var(--t);
  font-family:'Heebo',sans-serif;cursor:pointer;
}
.qf-chip:hover{background:var(--b0);border-color:var(--b4)}
.qf-star{color:var(--t3);font-size:13px;line-height:1;cursor:pointer}
.qf-star-on{color:var(--am)}