:root{
  color-scheme:light;
  --bg:#e9ecf4; --bg2:#f6f8fd;
  --bg-grad:radial-gradient(1200px circle at 8% -14%,rgba(86,198,214,.34),transparent 58%),radial-gradient(1000px circle at 108% 2%,rgba(181,138,216,.32),transparent 54%),radial-gradient(900px circle at 46% 120%,rgba(85,99,201,.26),transparent 58%),linear-gradient(180deg,#f0f3fa 0%,#e3e7f2 100%);
  /* layered glass: 1 = inset/subtle, 2 = card, 3 = modal (top layer) */
  --glass-1:rgba(255,255,255,0.50); --glass-2:rgba(255,255,255,0.64); --glass-3:rgba(255,255,255,0.82);
  --glass-hover:rgba(255,255,255,0.48); --glass-sunk:rgba(20,24,40,0.055);
  --glass-bd:rgba(255,255,255,0.72); --glass-edge:rgba(255,255,255,0.92);
  --blur-1:14px; --blur-2:24px; --blur-3:38px; --sat:180%;
  --ease:cubic-bezier(.32,.72,0,1);--ease-spring:cubic-bezier(.2,1.1,.3,1);
  /* soft 3D depth */
  --sh-1:0 1px 2px rgba(24,28,50,.05),0 3px 10px rgba(24,28,50,.06);
  --sh-2:0 2px 6px rgba(24,28,50,.06),0 14px 32px rgba(24,28,50,.11);
  --sh-3:0 10px 26px rgba(24,28,50,.14),0 36px 80px rgba(24,28,50,.22);
  --sh-edge:inset 0 1px 0 var(--glass-edge),inset 0 -1px 0 rgba(24,28,50,.05);
  --sh-sunk:inset 0 2px 5px rgba(24,28,50,.10),inset 0 -1px 0 var(--glass-edge);
  --sh-raise:inset 0 1px 0 rgba(255,255,255,.42),0 6px 16px var(--accent-glow);
  /* legacy aliases so every existing rule inherits the new system */
  --glass:var(--glass-2); --glass2:var(--glass-hover);
  --moc-bg:var(--glass-sunk); --moc-bd:rgba(20,24,40,0.10);
  --border:rgba(20,24,40,0.09); --border2:rgba(20,24,40,0.16);
  --accent:#3d48ab; --accent2:#56C6D6; --accent3:#B58AD8;
  --pastel0:#8CA0F0; --pastel1:#6FD3D9; --pastel2:#C6A5E6; --pastel3:#8AD9B0; --pastel4:#F5C77E; --pastel5:#F2A5B8; --pastel6:#B7C0D8;
  --accent-soft:rgba(85,99,201,0.14); --accent-glow:rgba(85,99,201,0.32);
  --accent-ink:#2f3994;   /* qa44 (M28): accent-coloured text on an accent-tinted surface */
  --grad:linear-gradient(135deg,#3FA9C4,#5563C9 50%,#8B57C7);
  --glow1:rgba(86,198,214,0.26); --glow2:rgba(181,138,216,0.24);
  --green:#086a2d; --red:#9c1717; --yellow:#7d4e0a;
  --red-text:#9c1a1a; --amber-text:#7d4e0a; --amber-soft:rgba(217,119,6,0.12); --green-text:#086a2d; --neutral-soft:rgba(20,24,40,0.06); --green-soft:rgba(18,138,62,0.12);
  --text:#171a22; --text2:#363d4e; --text3:#4a5165;
  --scroll-thumb:rgba(85,99,201,0.28); --scroll-thumb-hover:rgba(85,99,201,0.48);
  --r:16px; --r2:22px;
  --sh:var(--sh-2);
  --font:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --nav-bg:rgba(255,255,255,0.60); --nav-fg:#171a22; --nav-muted:rgba(23,26,34,0.56);
  --nav-hover:rgba(255,255,255,0.60); --nav-cta-bg:#0b0d14; --nav-cta-fg:#ffffff;
  --nav-bd:var(--glass-bd); --nav-sh:var(--sh-2);
  /* ---- Liquid Glass (qa28) ---- */
  --lg-blur:26px; --lg-blur-strong:40px; --lg-sat:190%;
  --lg-fill-top:rgba(255,255,255,.52); --lg-fill-bot:rgba(255,255,255,.20);
  --lg-sheen:rgba(255,255,255,.60);
  --lg-fill-strong-top:rgba(255,255,255,.80); --lg-fill-strong-bot:rgba(255,255,255,.58);
  --lg-rim-a:#ffffff; --lg-rim-b:rgba(255,255,255,.22); --lg-rim-c:rgba(255,255,255,.80);
  --lg-spec:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.22);
  --lg-shadow:0 1px 2px rgba(22,26,48,.05),0 12px 32px rgba(22,26,48,.09);
  --lg-shadow-strong:0 2px 6px rgba(22,26,48,.06),0 28px 70px rgba(22,26,48,.18);
  --lg-accent-top:rgba(78,89,182,.96); --lg-accent-bot:rgba(66,78,176,.90);
  --lg-accent-rim:rgba(255,255,255,.55);
  --lg-accent-glow:0 8px 24px rgba(85,99,201,.30);
  --lg-sunk:rgba(20,24,40,.05); --lg-sunk-rim:rgba(255,255,255,.75);
  --on-accent:#ffffff;
  --lg-scrim:rgba(18,22,40,.18);
  /* qa44 (L19): every colour a rule uses is a token, with its own dark-mode value */
  --av-ink:#0c0907; --av0:#7fd6e0; --av1:#8fd6b0; --av2:#93a8f0; --av3:#c9a3e6; --av4:#e6a3c8;
  --on-red:#ffffff; --on-photo:#ffffff;
  --green-tint:rgba(34,197,94,.12); --red-tint:rgba(239,68,68,.12);
  --danger-bg:rgba(220,38,38,.10); --danger-bd:rgba(220,38,38,.26);
  --badge-red:rgba(239,68,68,.7); --amber-tint:rgba(217,119,6,.14);
  --toast-ok-bd:rgba(34,197,94,.4); --toast-warn-bd:rgba(245,158,11,.4);
  --err-bd:rgba(239,68,68,.4); --err-bg:rgba(239,68,68,.1);
  --lg-toast-top:rgba(255,255,255,.96); --lg-toast-bot:rgba(250,251,255,.92);
  /* qa37: dropdown/calendar glass, and the near-solid fill used by anything that floats over
     content when the device asks for Reduce Transparency (97%, never fully solid) */
  --gp-top:rgba(255,255,255,.975); --gp-bot:rgba(249,250,255,.955);
  --rt-float:rgba(250,251,255,.97);
}
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#080a12; --bg2:#141826;
  --bg-grad:radial-gradient(1100px circle at 6% -14%,rgba(86,198,214,.20),transparent 58%),radial-gradient(950px circle at 108% 2%,rgba(181,138,216,.20),transparent 54%),radial-gradient(900px circle at 46% 120%,rgba(85,99,201,.20),transparent 58%),linear-gradient(180deg,#0b0e18 0%,#06080f 100%);
  --glass-1:rgba(255,255,255,0.045); --glass-2:rgba(255,255,255,0.075); --glass-3:rgba(255,255,255,0.11);
  --glass-hover:rgba(255,255,255,0.09); --glass-sunk:rgba(0,0,0,0.26);
  --glass-bd:rgba(255,255,255,0.14); --glass-edge:rgba(255,255,255,0.16);
  --sh-1:0 1px 2px rgba(0,0,0,.30),0 3px 10px rgba(0,0,0,.34);
  --sh-2:0 2px 8px rgba(0,0,0,.38),0 16px 36px rgba(0,0,0,.52);
  --sh-3:0 12px 30px rgba(0,0,0,.55),0 44px 88px rgba(0,0,0,.66);
  --sh-edge:inset 0 1px 0 var(--glass-edge),inset 0 -1px 0 rgba(0,0,0,.35);
  --sh-sunk:inset 0 2px 6px rgba(0,0,0,.50),inset 0 -1px 0 rgba(255,255,255,.05);
  --sh-raise:inset 0 1px 0 rgba(255,255,255,.20),0 6px 18px var(--accent-glow);
  --glass:var(--glass-2); --glass2:var(--glass-hover);
  --moc-bg:var(--glass-sunk); --moc-bd:rgba(255,255,255,0.14);
  --border:rgba(255,255,255,0.10); --border2:rgba(255,255,255,0.20);
  --accent:#b0b9f8; --accent2:#56C6D6; --accent3:#C6A2E8;
  --pastel0:#8CA0F0; --pastel1:#6FD3D9; --pastel2:#C6A5E6; --pastel3:#8AD9B0; --pastel4:#F5C77E; --pastel5:#F2A5B8; --pastel6:#B7C0D8;
  --accent-soft:rgba(139,152,240,0.20); --accent-glow:rgba(85,99,201,0.40);
  --accent-ink:#dadeff;
  --glow1:rgba(86,198,214,0.14); --glow2:rgba(181,138,216,0.14);
  --green:#3ddc84; --red:#ff9b9b; --yellow:#f4c04a;
  --red-text:#ff9b9b; --amber-text:#f4c04a; --amber-soft:rgba(240,180,41,0.14); --green-text:#3ddc84;
  --neutral-soft:rgba(255,255,255,0.07); --green-soft:rgba(61,220,132,0.16);
  --text:#f2f4fa; --text2:#cfd4e1; --text3:#c2c8d6;
  --scroll-thumb:rgba(255,255,255,0.22); --scroll-thumb-hover:rgba(139,152,240,0.55);
  --sh:var(--sh-2);
  --nav-bg:rgba(18,22,36,0.62); --nav-fg:#ffffff; --nav-muted:rgba(255,255,255,0.60);
  --nav-hover:rgba(255,255,255,0.12); --nav-cta-bg:#ffffff; --nav-cta-fg:#0b0d14;
  --nav-bd:var(--glass-bd); --nav-sh:var(--sh-2);
  /* ---- Liquid Glass (qa28) ---- */
  --lg-fill-top:rgba(255,255,255,.10); --lg-fill-bot:rgba(255,255,255,.025);
  --lg-sheen:rgba(255,255,255,.13);
  --lg-fill-strong-top:rgba(40,46,70,.78); --lg-fill-strong-bot:rgba(24,28,44,.70);
  --lg-rim-a:rgba(255,255,255,.42); --lg-rim-b:rgba(255,255,255,.04); --lg-rim-c:rgba(255,255,255,.20);
  --lg-spec:inset 0 1px 0 rgba(255,255,255,.20),inset 0 -1px 0 rgba(255,255,255,.03);
  --lg-shadow:0 1px 2px rgba(0,0,0,.30),0 14px 36px rgba(0,0,0,.34);
  --lg-shadow-strong:0 2px 8px rgba(0,0,0,.40),0 30px 80px rgba(0,0,0,.55);
  --lg-accent-top:rgba(106,118,207,.92); --lg-accent-bot:rgba(94,108,220,.84);
  --lg-accent-rim:rgba(255,255,255,.30);
  --lg-accent-glow:0 8px 26px rgba(85,99,201,.40);
  --lg-sunk:rgba(0,0,0,.24); --lg-sunk-rim:rgba(255,255,255,.08);
  --on-accent:#ffffff;
  --lg-scrim:rgba(0,0,0,.34);
  --av-ink:#0c0907; --av0:#5fbecb; --av1:#6fc297; --av2:#8197e6; --av3:#b58fd6; --av4:#d690b6;
  --on-red:#2b0a0a; --on-photo:#ffffff;
  --green-tint:rgba(61,220,132,.16); --red-tint:rgba(255,120,120,.16);
  --danger-bg:rgba(255,120,120,.12); --danger-bd:rgba(255,140,140,.32);
  --badge-red:rgba(239,68,68,.75); --amber-tint:rgba(240,180,41,.16);
  --toast-ok-bd:rgba(61,220,132,.45); --toast-warn-bd:rgba(244,192,74,.45);
  --err-bd:rgba(255,140,140,.45); --err-bg:rgba(255,120,120,.12);
  --lg-toast-top:rgba(40,45,66,.96); --lg-toast-bot:rgba(28,32,48,.93);
  --gp-top:rgba(40,45,66,.975); --gp-bot:rgba(28,32,48,.955);
  --rt-float:rgba(30,34,52,.97);
}
/* loading overlay */
.loading{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:var(--bg);background-image:var(--bg-grad);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s var(--ease),visibility 0s linear .35s}
.loading.show{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .2s var(--ease),visibility 0s}
.ld-mark{position:relative;width:76px;height:76px;display:grid;place-items:center}
.ld-logo{width:46px;height:46px;object-fit:contain;animation:ldBreath 2.2s var(--ease) infinite}
.ld-ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--border);border-top-color:var(--accent);animation:spin .9s linear infinite}
.ld-name{font-size:17px;font-weight:800;letter-spacing:-.01em;color:var(--text)}
@keyframes ldBreath{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.93);opacity:.82}}
.loading-txt{font-size:13px;color:var(--text3);font-weight:600}
/* group filters */
.gfilter{display:flex;gap:7px;overflow-x:auto;padding:2px 0 10px;-webkit-overflow-scrolling:touch}
.gfilter button{flex:none;padding:7px 13px;border-radius:999px;border:1px solid var(--glass-bd);background:var(--glass-1);-webkit-backdrop-filter:blur(var(--blur-1)) saturate(var(--sat));backdrop-filter:blur(var(--blur-1)) saturate(var(--sat));color:var(--text2);font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;box-shadow:var(--sh-edge),var(--sh-1)}
.gfilter button.on{background:var(--accent-soft);color:var(--accent-ink);border-color:transparent}
/* qa44 (L20): the group list is part of the page (it was a scroll box of its own that clipped its shadow) */
.glist{min-width:0}
/* settings profile */


.prof-row{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 16px 14px}
.av-wrap{position:relative;width:84px;height:84px}
.avatar-xl{width:84px;height:84px;border-radius:50%;object-fit:cover;display:block;border:2px solid var(--border2)}
.avatar-xl-ph{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;font-size:30px;font-weight:800;color:var(--on-photo);background:var(--grad)}
.av-edit{position:absolute;right:-2px;bottom:-2px;width:30px;height:30px;border-radius:50%;border:2px solid var(--bg2);background:var(--accent);color:var(--on-accent);font-size:13px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0;box-shadow:var(--sh-raise)}
.av-remove{position:absolute;right:-2px;top:-2px;width:24px;height:24px;border-radius:50%;border:2px solid var(--bg2);background:var(--red);color:var(--on-red);font-size:11px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0;box-shadow:var(--sh-1)}

.pad-x{padding:0 16px 14px}
.av-img{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none;display:block}
.av-img.sm{width:26px;height:26px}
.search-row{margin-bottom:10px;display:flex;gap:8px;align-items:center}
.search-row>.inp{flex:1 1 auto;min-width:0}
.search-row>.btn{flex:none;margin:0;min-height:40px}
/* qa44 (R5): a long list scrolls inside its own box, which never drags the page with it and
   stops short of the screen, so the page can still be scrolled around it */
.pg-box{max-height:calc(100dvh - 200px);overflow-y:auto;overscroll-behavior:contain;border-radius:var(--r2);padding:2px 3px 10px;margin:0 -3px}
.pg-box>.card{margin-bottom:0}
.pg-bar{display:flex;align-items:center;justify-content:center;gap:6px;margin:12px 0 2px;flex-wrap:wrap}
.pg-nums{display:flex;align-items:center;gap:4px;min-width:0;flex-wrap:wrap;justify-content:center}
.pg-step,.pg-num{border:1px solid var(--glass-bd);background:var(--glass-1);color:var(--text2);font-family:inherit;font-size:13px;font-weight:600;min-height:36px;min-width:36px;padding:0 12px;border-radius:999px;cursor:pointer;box-shadow:var(--sh-edge)}
.pg-num{padding:0 8px}
.pg-num.on{background:var(--accent-soft);color:var(--accent-ink);border-color:var(--accent);font-weight:700}
.pg-step:disabled{opacity:.45;cursor:default}
.pg-step:focus-visible,.pg-num:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-soft),0 0 0 1px var(--accent)}
.pg-gap{color:var(--text2);padding:0 2px}
.pg-range{text-align:center;font-size:12px;color:var(--text2);margin:6px 0 0}
.pg-bar{flex-wrap:nowrap}
.pg-nums{flex-wrap:nowrap}
@media (max-width:420px){.pg-word{display:none}.pg-step{padding:0;min-width:36px;font-size:17px}.pg-bar{gap:3px}.pg-nums{gap:2px}.pg-num{min-width:32px;padding:0 4px}.pg-gap{padding:0}}
.simplify-card .srow{gap:10px}
.simp-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.cmt{display:flex;gap:8px;padding:8px 0;align-items:flex-start}
.cmt-body{flex:1;min-width:0}
.cmt-name{font-size:12px;font-weight:700;color:var(--text2)}
.cmt-text{font-size:13px;color:var(--text);word-break:break-word;white-space:pre-wrap}
.cmt-time{font-size:10.5px;color:var(--text3)}
.cmt-del{flex:none;align-self:center;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--glass-bd);border-radius:9px;background:var(--glass-1);color:var(--red);cursor:pointer;font-size:12px;line-height:1;padding:0;box-shadow:var(--sh-edge),var(--sh-1)}
.cmt-del:hover{border-color:var(--red)}
.cmt-del .ico-trash{width:16px;height:16px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pay-toggle{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--glass-bd);background:var(--glass-1);color:var(--text2);border-radius:999px;padding:5px 10px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;box-shadow:var(--sh-edge),var(--sh-1)}
.pay-toggle.on{background:var(--accent-soft);color:var(--accent-ink);border-color:transparent}
.pw-wrap{position:relative;display:flex;align-items:center}
.pw-wrap .inp{padding-right:44px;width:100%}
.pw-eye{position:absolute;right:6px;width:32px;height:32px;border:none;background:none;color:var(--text3);cursor:pointer;font-size:15px;padding:0;line-height:1}
.auth-links{display:flex;justify-content:flex-end;margin:-4px 0 8px}
.link-sm{border:none;background:none;color:var(--accent);font-size:12.5px;font-weight:600;cursor:pointer;padding:2px;font-family:inherit}
.nav-out{flex:none;display:flex;align-items:center;justify-content:center;width:36px;height:36px;margin-left:2px;border-radius:12px;border:1px solid var(--glass-bd);cursor:pointer;background:var(--glass-1);color:var(--nav-fg);font-size:15px;line-height:1;box-shadow:var(--sh-edge),var(--sh-1)}



.remember-row{display:flex;align-items:center;gap:8px;margin:2px 0 10px;font-size:13px;color:var(--text2)}
.remember-row input{width:16px;height:16px;accent-color:var(--accent)}
.det-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-size:13px;border-bottom:1px solid var(--border)}
.det-row:last-child{border-bottom:none}
.det-k{color:var(--text3);flex:none}
.det-v{color:var(--text);text-align:right;word-break:break-word}
.det-row.det-money .det-k{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.det-row.det-money .det-v{flex:none;white-space:nowrap;font-variant-numeric:tabular-nums}

.bud-head{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:2px}
.payer-row{display:flex;align-items:center;gap:8px;padding:5px 0}
.payer-row .inp{width:110px;flex:none}
.payer-name{flex:1;min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.simp-arrow{color:var(--text3);font-size:13px;flex:none}
.save-hint{font-size:11.5px;color:var(--text3);min-height:14px}
/* fab with label */


*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:hidden}
body{font-family:var(--font);color:var(--text);background:var(--bg);background-image:var(--bg-grad);background-attachment:fixed;min-height:100dvh;line-height:1.4;-webkit-font-smoothing:antialiased}
.glow{position:fixed;inset:0;pointer-events:none;z-index:0}
.glow-a{background:radial-gradient(1100px circle at 15% -12%,var(--glow1),transparent 62%)}
.glow-b{background:radial-gradient(900px circle at 100% 8%,var(--glow2),transparent 55%),radial-gradient(1000px circle at 50% 120%,var(--glow1),transparent 60%)}

.app{position:relative;z-index:1;max-width:520px;margin:0 auto;padding:84px 18px 48px;min-height:100dvh}
.view{display:none;animation:fade .28s ease}
.view.is-active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* topbar */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:22px}
/* F4/U6: a long group name used to push the header buttons out of reach. A flex item
   defaults to min-width:auto, so .brand refused to shrink below its text width no
   matter that .ghead-text already had min-width:0 and an ellipsis. Pin the two button
   groups, let the title be the only thing that shrinks. */
.topbar>.icon-btn,.topbar>.hstack{flex:0 0 auto}
.topbar>.brand{flex:1 1 auto;min-width:0}
.topbar>.brand>.gemoji{flex:none}
.brand{display:flex;align-items:center;gap:10px}
.ghead-text{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.ghead-dates{font-size:11px;color:var(--text2);font-weight:500}

.brand-name{font-weight:700;letter-spacing:-.3px}
.icon-btn{width:38px;height:38px;border-radius:12px;border:1px solid var(--glass-bd);background:var(--glass-1);-webkit-backdrop-filter:blur(var(--blur-1)) saturate(var(--sat));backdrop-filter:blur(var(--blur-1)) saturate(var(--sat));color:var(--text2);font-size:16px;cursor:pointer;display:grid;place-items:center;box-shadow:var(--sh-edge),var(--sh-1)}
.icon-btn:hover{border-color:var(--border2)}


.page-title{font-size:18px;font-weight:700;letter-spacing:-.5px;margin-bottom:4px}
.page-sub{font-size:13px;color:var(--text2);margin-bottom:18px}
.section-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--text3);margin:20px 4px 10px}

/* cards */
.card{position:relative;background:var(--glass-2);-webkit-backdrop-filter:blur(var(--blur-2)) saturate(var(--sat));backdrop-filter:blur(var(--blur-2)) saturate(var(--sat));border:1px solid var(--glass-bd);border-radius:var(--r);box-shadow:var(--sh-edge),var(--sh-2);padding:8px;margin-bottom:14px}
.card-pad{padding:16px}

/* group card */
.gcard{display:flex;align-items:center;gap:14px;padding:16px;cursor:pointer;border-radius:14px}
.gcard:hover{background:var(--glass2)}
.gemoji{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;font-size:20px;font-weight:800;color:var(--text);flex:none;box-shadow:var(--sh-edge),var(--sh-1)}
.gmeta{flex:1;min-width:0}
.gname{font-weight:600;font-size:15px}
.gsub{font-size:12px;color:var(--text3);margin-top:2px}
.gbal{text-align:right;flex:none}
.gbal .amt{font-weight:700;font-size:14px}
.gbal .lbl{font-size:10.5px;color:var(--text3);text-transform:uppercase;letter-spacing:.05em}
.pos{color:var(--green)} .neg{color:var(--red)} .zero{color:var(--text3)}

/* avatars */

.av{width:24px;height:24px;border-radius:999px;display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--av-ink);border:2px solid var(--bg2);margin-left:-6px}
.av:first-child{margin-left:0}
.av0{background:var(--av0)}.av1{background:var(--av1)}.av2{background:var(--av2)}.av3{background:var(--av3)}.av4{background:var(--av4)}

/* segmented control */
.seg{display:flex;gap:2px;padding:4px;background:var(--glass-sunk);border:1px solid var(--border);border-radius:14px;margin-bottom:16px;box-shadow:var(--sh-sunk)}
.seg button{flex:1;border:none;background:none;color:var(--text2);font-family:inherit;font-size:12.5px;font-weight:600;padding:8px 6px;border-radius:9px;cursor:pointer;transition:.15s}
.seg button.on{background:var(--accent);color:var(--on-accent);box-shadow:var(--sh-raise)}
.seg.sm button{font-size:11.5px;padding:7px 4px}

/* list rows */
.row{display:flex;align-items:center;gap:12px;padding:13px 12px;border-radius:12px}
.row+.row{border-top:1px solid var(--border)}
.row:hover{background:var(--glass2)}
.ricon{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:17px;flex:none}
.ricon.g{background:var(--green-tint)} .ricon.r{background:var(--red-tint)} .ricon.n{background:var(--moc-bg)}
.rbody{flex:1;min-width:0}
.rtitle{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rmeta{font-size:11.5px;color:var(--text3);margin-top:2px}
.ramt{text-align:right;flex:none;font-weight:700;font-size:14px}
.ramt .sub{display:block;font-size:10.5px;font-weight:500;color:var(--text3);margin-top:1px}
.rdate{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:30px;flex:none;line-height:1.05}
.rmon{font-size:9.5px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.03em}
.rday{font-size:16px;font-weight:700;color:var(--text)}

/* buttons */
.btn{width:100%;border:none;cursor:pointer;font-family:inherit;font-size:14px;font-weight:600;padding:12px 16px;border-radius:12px;transition:.15s;display:flex;align-items:center;justify-content:center;gap:8px}
.btn:active{transform:scale(.985)}
.btn-primary{color:var(--on-accent);background:var(--grad);box-shadow:var(--sh-raise)}
.btn-primary:hover{filter:brightness(1.06)}
.btn-ghost{background:var(--glass-1);-webkit-backdrop-filter:blur(var(--blur-1)) saturate(var(--sat));backdrop-filter:blur(var(--blur-1)) saturate(var(--sat));border:1px solid var(--glass-bd);color:var(--text2);box-shadow:var(--sh-edge),var(--sh-1)}
.btn-ghost:hover{border-color:var(--text3)}
.btn-danger{background:var(--danger-bg);color:var(--red-text);border:1px solid var(--danger-bd)}
.btn-sm{padding:8px 12px;font-size:12.5px;width:auto;border-radius:10px}
.btn-row{display:flex;gap:10px}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.cat-emoji{font-size:18px}
.cat-del{margin-left:auto;width:30px;height:30px;flex:none;border:1px solid var(--glass-bd);border-radius:9px;background:var(--glass-1);color:var(--text3);cursor:pointer;font-size:12px;box-shadow:var(--sh-edge),var(--sh-1)}
.emoji-pick{flex:0 0 46px;width:46px;height:42px;border:1px solid var(--border);border-radius:11px;background:var(--moc-bg);font-size:20px;cursor:pointer;padding:0}
.emoji-grid{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px;max-height:150px;overflow-y:auto}
.emoji-opt{width:34px;height:34px;border:none;background:var(--glass2);border-radius:8px;font-size:18px;cursor:pointer}
.emoji-opt:hover{background:var(--accent-soft)}
.chip{padding:8px 13px;border-radius:999px;border:1px solid var(--glass-bd);background:var(--glass-1);-webkit-backdrop-filter:blur(var(--blur-1)) saturate(var(--sat));backdrop-filter:blur(var(--blur-1)) saturate(var(--sat));color:var(--text2);font-size:13px;cursor:pointer;transition:.15s;box-shadow:var(--sh-edge),var(--sh-1)}
/* ---- stats ---- */
.stat-title{font-weight:700;font-size:13px;margin-bottom:10px}
.pie-wrap{display:flex;justify-content:center;padding:4px 0 10px}
/* Flat thin ring. No extrusion, no gloss, no drop shadow — one stroked circle per
   category, so what you see is exactly the proportion. */
.pie{width:100%;max-width:236px;height:auto;display:block;overflow:visible}
.pie-track{fill:none;stroke:var(--glass-sunk);stroke-width:13}
.pie-seg{fill:none;stroke-width:13;stroke-linecap:butt}
.pie-c-top{fill:var(--text3);font-size:9.5px;font-weight:700;text-anchor:middle;letter-spacing:.14em;text-transform:uppercase}
.pie-c-bot{fill:var(--text);font-weight:800;text-anchor:middle}
.legend-row{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:12.5px}
.swatch{width:12px;height:12px;border-radius:3px;flex:none}
.legend-lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.legend-amt{color:var(--text3);white-space:nowrap}
.bar-row{margin:11px 0}
.bar-head{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:5px}
.bar-amt{color:var(--text3)}
.statbar{width:100%;height:8px;display:block;background:var(--glass-sunk);border-radius:4px;overflow:hidden;box-shadow:var(--sh-sunk)}
/* ISSUE 2: this used to be one grid PER ROW with fr columns. fr tracks cannot hold a
   140px figure, and per-row grids cannot share track widths, so the columns collided and
   the names collapsed. It is now a SINGLE grid for the whole table: the tracks size to the
   widest figure, every row aligns to them, and the table scrolls sideways inside the card
   rather than truncating money. */
.sum-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin:0 -2px;padding:0 2px}
/* The header rule and the Total rule are drawn on the CELLS. With a column-gap the
   gaps carried no border, so both lines came out dashed. Spacing is padding now, so
   neighbouring cells touch and each rule is one continuous line. */
/* qa45.1 (re-audit M10): the name column is capped, so long names shorten with "…" instead of pushing the money off screen */
.sum-table{display:grid;grid-template-columns:minmax(76px,min(40vw,14em)) repeat(3,auto);
  column-gap:0;width:max-content;min-width:100%;font-size:12px;align-items:center}
.sum-table>span{padding:7px 0 7px 14px;text-align:right;white-space:nowrap}
.sum-table>span.sum-name{padding-left:0}
.sum-table>.sum-rule{grid-column:1/-1;height:1px;padding:0;background:var(--border)}
.sum-table>span.sum-name{text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.sum-table>.r-head{color:var(--text3);font-weight:600}
.sum-table>.r-total{font-weight:700}
.scroll-hint{margin-top:8px;font-size:11px;text-align:center;opacity:.85}
/* fill:none must be restated here: .chN sets a fill at equal specificity further
   down the file, which turned every ring into a filled circle. */
.pie-seg.ch0{stroke:var(--pastel0);fill:none}
.pie-seg.ch1{stroke:var(--pastel1);fill:none}
.pie-seg.ch2{stroke:var(--pastel2);fill:none}
.pie-seg.ch3{stroke:var(--pastel3);fill:none}
.pie-seg.ch4{stroke:var(--pastel4);fill:none}
.pie-seg.ch5{stroke:var(--pastel5);fill:none}
.pie-seg.ch6{stroke:var(--pastel6);fill:none}
.ch0{fill:var(--pastel0);background:var(--pastel0)}
.ch1{fill:var(--pastel1);background:var(--pastel1)}
.ch2{fill:var(--pastel2);background:var(--pastel2)}
.ch3{fill:var(--pastel3);background:var(--pastel3)}
.ch4{fill:var(--pastel4);background:var(--pastel4)}
.ch5{fill:var(--pastel5);background:var(--pastel5)}
.ch6{fill:var(--pastel6);background:var(--pastel6)}
.chip.on{background:var(--accent-soft);border-color:var(--accent-ink);color:var(--accent-ink)}

/* inputs */
.field{margin-bottom:14px}
.field label{display:block;font-size:11px;color:var(--text3);margin:0 0 6px 2px;text-transform:uppercase;letter-spacing:.05em}
.inp{width:100%;background:var(--glass-sunk);border:1px solid var(--border);border-radius:12px;padding:11px 12px;color:var(--text);font-family:inherit;font-size:14px;box-shadow:var(--sh-sunk);transition:box-shadow .18s,border-color .18s}
.inp:focus{outline:none;border-color:var(--accent)}
.inp::placeholder{color:var(--text3)}
select.inp{appearance:none;cursor:pointer;background-color:var(--moc-bg);color:var(--text)}
select.inp option,select.inp optgroup{background-color:var(--bg2);color:var(--text)}
.amt-row{display:flex;gap:10px}
.amt-row .grow{flex:1;min-width:0}

.cur-sel{flex:0 0 auto;width:auto;min-width:96px}

/* member split rows */
.split-row{display:flex;align-items:center;gap:10px;padding:9px 2px;min-width:0}
.split-row+.split-row{border-top:1px solid var(--border)}
.split-name{flex:1 1 auto;min-width:0;font-size:13.5px;display:flex;align-items:center;gap:9px}
.split-name .sname{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* qa41 (H8): the "removed" marker beside a name in the expense sheet: compact, never shrinks */
.split-name .tag,.payer-row .tag{flex:none;white-space:nowrap;text-transform:none;letter-spacing:0;padding:1px 6px}
.split-inp{flex:0 0 auto;width:118px;text-align:right;padding:8px 10px;font-size:13px}
.split-fixed{flex:0 0 auto;width:auto;min-width:92px;text-align:right;white-space:nowrap;font-size:13px;color:var(--text2);font-weight:600}
.sum-line{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:12px;padding:10px 2px 2px;color:var(--text3)}
/* qa45.1 (re-audit M9): the label may wrap; the amount never shrinks or wraps (money is never cut off) */
.sum-line>#sumLabel{flex:0 1 auto;min-width:0}
.sum-line>#sumVal{flex:none;white-space:nowrap;text-align:right}
.sum-ok{color:var(--green)} .sum-bad{color:var(--red)}

/* balances */
.cur-ledger{margin-bottom:16px}
.cur-ledger h4{font-size:12px;color:var(--text3);text-transform:uppercase;letter-spacing:.07em;margin:0 2px 8px}
.bal-row{display:flex;align-items:center;gap:12px;padding:12px}
.bal-row+.bal-row{border-top:1px solid var(--border)}
.bal-body{flex:1}
.bal-name{font-size:14px;font-weight:600}
.bal-desc{font-size:11.5px;color:var(--text3);margin-top:1px}

/* members */
.mem-row{display:flex;align-items:center;gap:12px;padding:12px}
.mem-row+.mem-row{border-top:1px solid var(--border)}
.mem-body{flex:1;min-width:0}
.mem-name{font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px;min-width:0}
.mem-nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mem-name .tag{flex:none;white-space:nowrap}
.mem-row>.icon-btn,.mem-row>.av,.mem-row>.av-img{flex:none}
.tag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 7px;border-radius:999px}
.tag-admin{background:var(--accent-soft);color:var(--accent-ink)}
.tag-pending{background:var(--amber-tint);color:var(--amber-text)}
.tag-you{background:var(--neutral-soft);color:var(--text2)}

/* toggle */










/* activity feed */











/* convert-to-base */






/* settings rows */
.srow{display:flex;align-items:center;gap:12px;padding:14px 12px;font-size:13.5px;cursor:pointer;border-radius:12px}
.srow+.srow{border-top:1px solid var(--border)}
.srow:hover{background:var(--glass2)}
.badge{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;color:var(--on-accent);font-weight:700;font-size:13px;flex:none;box-shadow:var(--sh-edge),var(--sh-1)}
.srow-val{margin-left:auto;color:var(--text3);font-size:12.5px;display:flex;align-items:center;gap:6px}

/* empty */
.empty{padding:44px 20px;text-align:center}
.empty-emoji{font-size:42px;margin-bottom:12px}
.empty-msg{font-size:13px;color:var(--text3);max-width:32ch;margin:0 auto 16px}

/* auth */
.auth-wrap{min-height:100dvh;display:grid;place-items:center;padding:24px;position:relative;z-index:1}
.auth-card{width:100%;max-width:380px}
/* qa43 (R6): the auth fields sit in a <form> for the password manager; the form itself adds
   no box, so the layout is exactly as before. */
.auth-form{display:contents}
/* qa44 (M35): language before signing in, and in the Terms pop-up (the 403 page's bar) */
.langbar{display:flex;width:fit-content;max-width:100%;margin:16px auto 0;padding:4px;border-radius:999px;background:var(--glass-1);border:1px solid var(--glass-bd);box-shadow:var(--sh-edge)}
.lang-btn{position:relative;flex:0 1 auto;min-width:0;border:0;background:none;color:var(--text2);font-family:inherit;font-size:13px;font-weight:500;padding:9px 14px;border-radius:999px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lang-btn+.lang-btn::before{content:"";position:absolute;left:0;top:30%;bottom:30%;width:1px;background:var(--border2)}
.lang-btn.on::before,.lang-btn.on+.lang-btn::before{display:none}
.lang-btn:hover{color:var(--text)}
.lang-btn.on{background:var(--accent-soft);color:var(--accent-ink);font-weight:700}
.lang-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-soft),0 0 0 1px var(--accent)}
.gate-langbar{margin-top:10px}


a.srow:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-soft),0 0 0 1px var(--accent)}
a.srow{color:inherit;text-decoration:none}
/* qa43: Cloudflare Turnstile. Empty (and taking no room) unless the check needs a tap. */
.captcha-box{display:flex;justify-content:center;min-width:0;max-width:100%;overflow:hidden}
.captcha-box:empty{display:none}
.auth-logo{width:64px;height:64px;object-fit:contain;display:block;margin:0 auto 16px}
.auth-h{text-align:center;font-size:20px;font-weight:700;letter-spacing:-.4px}
.auth-sub{text-align:center;font-size:13px;color:var(--text3);margin:6px 0 22px}
.divider{display:flex;align-items:center;gap:12px;color:var(--text3);font-size:11px;margin:16px 0}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--border)}


.auth-alt{text-align:center;font-size:13px;color:var(--text3);margin-top:18px}
.auth-toggle{background:none;border:0;padding:0 4px;font:inherit;color:var(--accent);cursor:pointer;font-weight:600;border-radius:8px}
.auth-toggle:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-soft),0 0 0 1px var(--accent)}

/* floating pill nav */
.pillnav{position:fixed;left:50%;transform:translateX(-50%);top:10px;z-index:30;display:flex;align-items:center;justify-content:center;gap:10px;overflow:hidden;
  width:min(212px,calc(100% - 24px));height:46px;padding:0;
  background:var(--nav-bg);-webkit-backdrop-filter:blur(var(--blur-2)) saturate(var(--sat));backdrop-filter:blur(var(--blur-2)) saturate(var(--sat));border:1px solid var(--nav-bd);border-radius:999px;box-shadow:var(--sh-edge),var(--nav-sh);
  transition:width .44s var(--ease),height .44s var(--ease),border-radius .44s var(--ease),padding .44s var(--ease);will-change:width,height}
.pillnav.open{width:min(680px,calc(100% - 24px));height:60px;border-radius:var(--r2);padding:0 8px 0 14px;justify-content:flex-start}
/* collapsed island face */
.tn-compact{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;height:100%;padding:0 14px;background:none;border:none;cursor:pointer;font-family:inherit;color:var(--nav-fg)}
.pillnav.open .tn-compact{display:none}
.tn-page{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tn-dot{width:8px;height:8px;border-radius:50%;background:var(--red);flex:none;box-shadow:var(--sh-1)}
/* expanded contents only exist when open */
.pillnav .tn-brand,.pillnav .tn-links,.pillnav .pillnav-add,.pillnav .nav-out{display:none}
.pillnav.open .tn-brand,.pillnav.open .tn-links,.pillnav.open .pillnav-add,.pillnav.open .nav-out{display:flex;animation:navIn .34s .08s both var(--ease)}
@keyframes navIn{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
/* concave corners tucking the bar into the page edges */
@media (max-width:600px){.pillnav.open{width:calc(100% - 16px)}
  /* (3) phones: give the amount and the currency a full-width line each */
  .amt-cur{flex-wrap:wrap}
  .amt-cur .grow{flex:1 1 100%;min-width:0}
  .amt-cur .cur-sel{flex:1 1 100%;max-width:100%;width:100%}

  /* ===== 1.32.7 mobile pass (≤600px). PC layout is unchanged. ===== */

  /* (2) top bar: stacked emoji + small label, even spacing (fixes zh gaps + id clipping).
     Scoped under .pillnav so these beat the base `.nav-ico{display:none}` regardless of order. */
  .pillnav.open{height:64px;padding:0 6px;gap:0}
  .pillnav.open .tn-brand{display:none}
  .pillnav.open .tn-links{flex:1 1 auto;min-width:0;justify-content:space-around;gap:0}
  .pillnav .pillnav-btn{flex:1 1 0;flex-direction:column;gap:2px;min-width:0;padding:6px 2px;font-size:10.5px;font-weight:600}
  .pillnav .pillnav-btn .nav-txt{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pillnav .nav-ico{display:block;font-size:20px;line-height:1}
  .pillnav .nav-badge{position:absolute;top:2px;right:calc(50% - 16px)}
  .pillnav .pillnav-add{flex:none;width:42px;height:42px;padding:0;border-radius:50%;justify-content:center}
  .pillnav .pillnav-add .cta-label{display:none}
  .pillnav .pillnav-add .cta-plus{font-size:20px}
  .pillnav .nav-out{width:38px;height:38px;position:relative;z-index:2}
  /* Chinese characters need more size than Latin at the same point — give zh larger labels */
  html[lang="zh-Hant"] .pillnav .pillnav-btn{font-size:12px}

  /* (3) activity feed: show full text — let title + meta wrap instead of truncating */
  #activityBody .rtitle{white-space:normal;overflow:visible;line-height:1.35}
  #activityBody .rmeta{white-space:normal;overflow:visible}
  #activityBody .row{align-items:flex-start}

  /* (4) expense/settlement rows: vertical layout so amount + owe/lent are never squeezed */
  #expensesList .row{flex-wrap:wrap;align-items:flex-start;row-gap:2px}
  #expensesList .rbody{flex:1 1 0;min-width:0}
  #expensesList .rtitle{white-space:normal;overflow:visible;line-height:1.3}
  #expensesList .rmeta{white-space:normal;overflow:visible}
  #expensesList .ramt{flex:1 0 100%;text-align:right;font-size:14px;max-width:100%;margin-top:1px}
  #expensesList .ramt .sub{display:inline;margin-left:8px}

}
.pillnav.hidden{display:none}
.pillnav-btn{position:relative;z-index:1;flex:none;background:none;border:none;cursor:pointer;color:var(--nav-muted);font-family:inherit;font-size:14px;font-weight:600;display:flex;align-items:center;gap:5px;padding:8px 11px;border-radius:11px;white-space:nowrap;transition:color .18s,background .18s}
.pillnav-btn:hover{color:var(--nav-fg);background:var(--nav-hover)}

.nav-ico{display:none}
.pillnav-btn.on{color:var(--nav-fg)}
/* top-nav pieces */
.tn-brand{display:flex;align-items:center;gap:8px;flex:none}
.tn-mark{width:26px;height:26px;object-fit:contain;display:block}
.tn-name{color:var(--nav-fg);font-size:17px;font-weight:800;letter-spacing:-.01em}
.tn-links{display:flex;align-items:center;gap:2px;flex:1;min-width:0;justify-content:center;overflow-x:auto;scrollbar-width:none}
.tn-links::-webkit-scrollbar{display:none}
.pillnav-add{flex:none;display:flex;align-items:center;gap:6px;height:40px;padding:0 16px;border-radius:14px;border:none;cursor:pointer;background:var(--nav-cta-bg);color:var(--nav-cta-fg);font-family:inherit;font-size:14px;font-weight:700;white-space:nowrap;box-shadow:var(--sh-1)}
.pillnav-add .cta-plus{font-size:16px;line-height:1}
@media (max-width:560px){
  .tn-name{display:none}
  .pillnav{padding-left:10px;gap:6px}
  .pillnav-btn{font-size:13px;padding:8px 8px}
  .pillnav-add{padding:0 12px}
  .pillnav-add .cta-label{display:none}
}
.fx-row{margin-bottom:8px}
.bal-row.pointer{cursor:pointer;border-radius:12px}
.bal-row.pointer:hover{background:var(--glass2)}
.chev{color:var(--text3);font-size:16px;margin-left:8px;flex:none}
.fx-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.fx-undo{border:none;background:none;color:var(--accent);font-size:12px;font-weight:600;cursor:pointer;padding:2px 4px;font-family:inherit}


.nav-badge{position:absolute;top:1px;right:1px;min-width:15px;height:15px;padding:0 3px;border-radius:8px;background:var(--red);color:var(--on-red);font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1}

/* FAB */



/* modal */
.scrim{position:fixed;inset:0;z-index:50;background:var(--lg-scrim);-webkit-backdrop-filter:blur(5px) saturate(125%);backdrop-filter:blur(5px) saturate(125%);display:flex;align-items:center;justify-content:center;padding:20px 16px;
  /* display:none cannot animate, so a closed overlay stays laid out but invisible.
     visibility:hidden also takes it out of hit-testing and the tab order, exactly as
     display:none did; it switches only AFTER the fade-out finishes. */
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s var(--ease),visibility 0s linear .22s}
.scrim.open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .22s var(--ease),visibility 0s}
.scrim>*{opacity:0;transform:translateY(12px) scale(.965);
  transition:transform .34s var(--ease-spring),opacity .2s var(--ease)}
.scrim.open>*{opacity:1;transform:none}
@media (max-width:560px){.scrim>*{transform:translateY(40px)}}
.sheet{width:100%;max-width:520px;max-height:86dvh;overflow:hidden;display:flex;flex-direction:column;background:var(--glass-3);-webkit-backdrop-filter:blur(var(--blur-3)) saturate(var(--sat));backdrop-filter:blur(var(--blur-3)) saturate(var(--sat));border:1px solid var(--glass-bd);border-radius:var(--r2);box-shadow:var(--sh-edge),var(--sh-3);padding:0}
/* qa31: the frame never scrolls, so its glass rim (drawn by .sheet::after, absolutely
   positioned) stays on the frame. It used to be the scroller itself, and an absolute
   ::after inside a scroller moves with the content: the rim slid up the pop-up as you
   scrolled, leaving a stray outline across the category list and the expense form. */
.sheet-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:18px;border-radius:inherit}

.sheet-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.sheet-title{font-size:16px;font-weight:700}
.sheet-x{width:32px;height:32px;border-radius:9px;border:1px solid var(--border);background:var(--glass2);color:var(--text2);cursor:pointer;font-size:15px}

/* centered confirm */
.scrim.center{align-items:center;padding:24px}
.confirm{width:100%;max-width:340px;background:var(--bg2);border:1px solid var(--border2);border-radius:18px;box-shadow:var(--sh);padding:22px;text-align:center}
.confirm h3{font-size:16px;font-weight:700;margin-bottom:8px}
.confirm p{font-size:13px;color:var(--text3);margin-bottom:18px}

/* currency picker */






/* toast */
.toast-wrap{position:fixed;left:0;right:0;bottom:calc(88px + env(safe-area-inset-bottom));z-index:60;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;padding:0 16px}
.toast{width:fit-content;max-width:420px;font-size:13px;font-weight:500;padding:11px 15px;border-radius:14px;border:1px solid var(--glass-bd);background:var(--glass-3);-webkit-backdrop-filter:blur(var(--blur-3)) saturate(var(--sat));backdrop-filter:blur(var(--blur-3)) saturate(var(--sat));box-shadow:var(--sh-edge),var(--sh-3);animation:tin .25s ease}
.toast.success{border-color:var(--toast-ok-bd)} .toast.warn{border-color:var(--toast-warn-bd)}
@keyframes tin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}


.auth-wrap{padding-top:38px}

/* ---- v1 additions ---- */
.badge-accent{background:var(--accent)}  .badge-red{background:var(--badge-red)} 
.gemoji.sm{width:30px;height:30px;font-size:15px;border-radius:9px}
.boot-error{position:relative;z-index:5;max-width:520px;margin:40px auto;padding:20px;border-radius:14px;border:1px solid var(--err-bd);background:var(--err-bg);color:var(--red-text);font-size:13px;line-height:1.5}
.auth-msg{font-size:12.5px;margin-top:10px;text-align:center;min-height:16px}
.auth-msg.err{color:var(--red-text)} .auth-msg.ok{color:var(--green-text)}
.auth-help{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:8px;flex-wrap:wrap}
.version-line{text-align:center;font-size:11px;color:var(--text3);margin-top:14px}
.version-line span{color:var(--text2)}
@keyframes spin{to{transform:rotate(360deg)}}
.muted-note{font-size:11.5px;color:var(--text3);padding:8px 2px}
.settled-banner{display:flex;align-items:center;gap:10px;padding:12px 14px;margin-bottom:16px;border-radius:14px;background:var(--green-soft);color:var(--green-text);font-size:13px;font-weight:600}
.settled-banner .sb-ico{font-size:15px}
/* qa42 (H10): the last reload failed or the device is offline; the data shown is the last good one */
.sync-banner{display:flex;align-items:center;gap:10px;padding:10px 12px 10px 14px;margin:0 0 14px;border-radius:14px;background:var(--amber-soft);color:var(--text);box-shadow:inset 3px 0 0 var(--amber-text);font-size:13px;font-weight:600}
.sync-banner[hidden]{display:none}
.sync-banner .sync-text{flex:1 1 auto;min-width:0}
.sync-banner .btn{flex:none}
/* qa42 (H9): someone else changed or deleted the expense that is open */
.sheet-stale{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:10px 12px;margin:0 0 12px;border-radius:12px;background:var(--amber-soft);color:var(--text);box-shadow:inset 3px 0 0 var(--amber-text);font-size:13px;font-weight:600}
.sheet-stale[hidden]{display:none}
.sheet-stale span{flex:1 1 12em;min-width:0}
.conflict-side{margin-bottom:12px}
.conflict-side .is-diff,.conflict-side .is-diff .det-v{color:var(--accent);font-weight:700}
.conflict .btn-row .btn{flex:1 1 0;min-width:0}
/* qa42 (M23): the page behind an open pop-up does not scroll */
html.ovl-lock,html.ovl-lock body{overflow:hidden}
/* qa42 (M18): a chip or row whose save is on its way ignores further taps */
.is-locked{pointer-events:none;opacity:.6}
#modal,#confirm,#policyGate,#modalSheet{overscroll-behavior:contain}
.btn[disabled]{opacity:.5;pointer-events:none}
/* A button that is busy is working, not unavailable: keep it at full strength and add
   a spinner in the text colour so it suits every button style. */
.btn[disabled].is-busy,.is-busy{opacity:1;cursor:progress}
.is-busy::before{content:"";display:inline-block;width:13px;height:13px;margin-right:8px;vertical-align:-2px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite}
.netbar{position:fixed;top:0;left:0;right:0;height:2px;z-index:80;overflow:hidden;opacity:0;transition:opacity .25s var(--ease);pointer-events:none}
.netbar.show{opacity:1}
.netbar::after{content:"";position:absolute;top:0;bottom:0;width:38%;background:var(--accent);border-radius:2px;animation:netSlide 1.1s var(--ease) infinite}
@keyframes netSlide{from{left:-38%}to{left:100%}}
.inline-load{display:flex;align-items:center;justify-content:center;gap:9px;padding:14px 0;font-size:12.5px;color:var(--text3)}
.inline-spin{width:14px;height:14px;border-radius:50%;border:2px solid var(--border2);border-top-color:var(--accent);animation:spin .7s linear infinite}
.chip.on{background:var(--accent-soft);border-color:var(--accent-ink);color:var(--accent-ink)}
/* CSP-safe utilities (no inline styles) */
[hidden]{display:none!important}
.hstack{display:flex;align-items:center;gap:10px}

.split-box{margin:0;padding:8px 12px}
.pointer{cursor:pointer}
.spacer{width:38px}
.mt6{margin-top:6px}.mt10{margin-top:10px}
.gap8{gap:8px}
.danger-text{color:var(--red-text)}
.w-auto{width:auto}

/* ---- Glassmorphism 2.0: interaction depth ---- */
.inp:focus{outline:none;border-color:var(--accent);box-shadow:var(--sh-sunk),0 0 0 3px var(--accent-soft)}
.btn:active,.chip:active,.gfilter button:active,.icon-btn:active{transform:translateY(1px)}
.btn-primary:hover{filter:brightness(1.05)}
.card:hover{box-shadow:var(--sh-edge),var(--sh-2)}
.chip.on,.gfilter button.on{box-shadow:var(--sh-edge),0 4px 14px var(--accent-glow)}
.avatar-xl,.av-img{box-shadow:var(--sh-1)}
.pillnav-btn.on{background:var(--nav-hover);box-shadow:var(--sh-edge),var(--sh-1)}

@media (prefers-reduced-motion:reduce){
  .scrim>*,.scrim.open>*{transform:none;transition:opacity .15s linear}
  .ld-logo,.ld-ring,.netbar::after,.is-busy::before,.inline-spin{animation-duration:2.4s}
  .ld-logo{animation:none}
  .pillnav{transition:none}
  .pillnav.open .tn-brand,.pillnav.open .tn-links,.pillnav.open .pillnav-add,.pillnav.open .nav-out{animation:none}
}

/* ---- rules referenced by JS but never defined ---- */
.toast.hiding{opacity:0;transform:translateY(6px);transition:opacity .24s var(--ease),transform .24s var(--ease)}
.bar-name,.sum-name{font-size:13px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- 1.32.4: policy consent gate ---- */
.gate-card{width:100%;max-width:560px;max-height:90dvh;display:flex;flex-direction:column;background:var(--glass-3);-webkit-backdrop-filter:blur(var(--blur-3)) saturate(var(--sat));backdrop-filter:blur(var(--blur-3)) saturate(var(--sat));border:1px solid var(--glass-bd);border-radius:var(--r2);box-shadow:var(--sh-edge),var(--sh-3);padding:18px}
.gate-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.gate-title{font-size:18px;font-weight:800;color:var(--text)}
.gate-sub{font-size:13px;color:var(--text2);margin:0 0 12px}
.gate-scroll{flex:1;min-height:200px;overflow-y:auto;background:var(--glass-sunk);border:1px solid var(--border);border-radius:14px;box-shadow:var(--sh-sunk);padding:14px 16px}
.gate-scroll:focus{outline:none;border-color:var(--accent);box-shadow:var(--sh-sunk),0 0 0 3px var(--accent-soft)}
.gate-end{margin-top:14px;padding:10px;text-align:center;font-size:12px;font-weight:700;color:var(--accent);border-top:1px dashed var(--border2)}
.gate-end:focus{outline:none}
/* qa45.1 (re-audit L30): the keyboard stop shows where focus is */
.gate-end:focus-visible{border-radius:10px;box-shadow:0 0 0 3px var(--accent-soft),0 0 0 1px var(--accent)}
.gate-scrollhint{font-size:12px;color:var(--text3);margin:10px 2px 4px;transition:color .2s}
.gate-scrollhint.done{color:var(--green)}
.gate-ack{display:flex;align-items:flex-start;gap:9px;margin:8px 0 12px;font-size:13px;color:var(--text2);cursor:pointer}
.gate-ack input{width:18px;height:18px;flex:none;margin-top:1px;accent-color:var(--accent)}
.gate-ack input:disabled{cursor:not-allowed}
.gate-note{font-size:11px;color:var(--text3);margin:10px 0 0;text-align:center}
/* qa45.1 (re-audit M7): a way out of the required Terms gate and the password-setup screen */
.gate-out{font-size:12.5px;color:var(--text2);margin:10px 0 0;text-align:center}
.su-out{text-align:center;font-size:13px;color:var(--text2);margin:14px 0 0}
#gateAgree:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;filter:grayscale(.3)}

/* injected legal document styling (no inline styles allowed under CSP) */
.legal-doc{color:var(--text);font-size:13.5px;line-height:1.62}
.legal-doc h1{font-size:19px;font-weight:800;margin:0 0 4px}
.legal-doc h2{font-size:15px;font-weight:700;margin:20px 0 6px;color:var(--text)}
.legal-doc p{margin:0 0 10px;color:var(--text2)}
.legal-doc p.note{font-size:12px;color:var(--text3);font-style:italic}
.legal-doc strong{color:var(--text);font-weight:700}
.legal-doc ul{margin:0 0 10px;padding-left:20px}
.legal-doc li{margin:0 0 5px;color:var(--text2)}
.legal-doc blockquote{margin:0 0 14px;padding:11px 13px;border-radius:10px;background:var(--accent-soft);border:1px solid var(--glass-bd);color:var(--text)}
.legal-doc hr{border:none;border-top:1px solid var(--border);margin:16px 0}
.legal-doc table{width:100%;border-collapse:collapse;margin:0 0 12px;font-size:12.5px}
.legal-doc th,.legal-doc td{border:1px solid var(--border);padding:7px 9px;text-align:left;vertical-align:top;color:var(--text2)}
.legal-doc th{background:var(--glass-sunk);color:var(--text);font-weight:700}

/* ---- 1.0.0-qa17: slim glass scrollbar, applied everywhere ---- */
/* Firefox/Gecko: both properties inherit, so the root covers every scroller. */
html{scrollbar-width:thin;scrollbar-color:var(--scroll-thumb) transparent}
/* WebKit/Blink: unscoped pseudo-elements cover the page and every nested scroller. */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:8px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--scroll-thumb-hover)}
::-webkit-scrollbar-thumb:active{background:var(--accent)}

/* ---- 1.32.5: consent row on the auth page (Option 1) ---- */
.consent-row{margin:2px 0 12px}
.consent-line{font-size:12.5px;color:var(--text3);line-height:1.5;margin:0}
.link-in{background:none;border:none;padding:0;font:inherit;color:var(--accent);font-weight:700;text-decoration:underline;cursor:pointer}

.consent-row.accepted .consent-line{opacity:1}

/* ---- 1.32.5: labelled Stats currency filter, separated from the budget box (issue 6) ---- */
.stat-filter{display:flex;align-items:center;gap:9px;margin:2px 0 12px}
.stat-filter-lbl{font-size:12px;font-weight:700;color:var(--text2);flex:none}
.cur-field{flex:1;min-width:0}

/* ---- 1.32.5: keep horizontal table/legend scroll inside its card (issue 5) ---- */
.card{max-width:100%;overflow:hidden}
.legend-row{max-width:100%}
.legend-lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

/* ---- 1.32.5: narrow-phone pass (issue 4, ~360px Z-Flip) ---- */
@media (max-width:380px){
  .auth-card{padding:14px}
  .card-pad{padding:13px}
  .gate-card{padding:14px}
  .gate-title{font-size:16px}
  .legend-row{font-size:12px;gap:6px}
  .legend-amt{font-size:11px;white-space:nowrap}
  .seg.sm button{padding:5px 8px;font-size:12px}
  .stat-filter{flex-wrap:wrap}
  .bar-head,.sum-table{font-size:11.5px}
  .btn{font-size:14px}
  .field label{font-size:12px}
  .legal-doc{font-size:13px}
  .legal-doc table{font-size:11.5px}
  .legal-doc th,.legal-doc td{padding:5px 6px}

  /* ---- 1.32.7: ≤380px only keeps what the ≤600 block doesn't already own ---- */
  /* amount + currency: let both shrink inside the card on the smallest phones */
  .amt-row{gap:7px}
  /* (superseded by the .amt-cur stacking rules above) */
  select.inp{padding-right:24px}
  /* native date fields: don't let the picker clip the mm/dd/yyyy text */
  .inp[type="date"]{padding:10px 8px;font-size:13px;min-width:0}
  .amt-row .inp[type="date"]{flex:1 1 0}
  /* nudge stacked nav labels a touch smaller on the tiniest widths (scoped to beat base rules) */
  .pillnav .pillnav-btn{font-size:9.5px;padding:6px 1px}
  .pillnav .nav-ico{font-size:18px}
  html[lang="zh-Hant"] .pillnav .pillnav-btn{font-size:11px}
}

/* internal build reference — hidden when build == public version */
.build-tag{color:var(--text3);font-size:11px}

/* ================= 1.0.0-qa2 fixes ================= */

/* (1) Owe/lent amount must show its colour. `.ramt .sub` (2 classes) was overriding
   `.pos`/`.neg` (1 class), so the figure always rendered grey. */
.ramt .sub.pos{color:var(--green)}
.ramt .sub.neg{color:var(--red)}

/* (2) Sign-out icon: drawn as SVG so it never falls back to a missing-glyph box. */
.nav-out-ico{width:18px;height:18px;display:block;pointer-events:none}
.nav-out{flex:none}

/* (3) Amount + currency. `.cur-sel` was `flex:0 0 auto` with wide option text
   ("JPY (Y) - Japanese Yen"), so it refused to shrink and squeezed the amount input
   down to nothing. Give the amount a floor, and stack the pair on phones. */
.amt-cur .grow{flex:1 1 auto;min-width:120px}
.amt-cur .cur-sel{flex:0 1 auto;min-width:0}

/* (4) Split rows sit inside a .field, so `.field label` (0,1,1) was beating
   `.split-name` (0,1,0) — forcing display:block (checkbox above the avatar) and
   uppercasing every member name. Restore the intended inline row. */
.field label.split-name{display:flex;align-items:center;gap:9px;min-width:0;
  margin:0;font-size:13.5px;color:var(--text);text-transform:none;letter-spacing:normal}
.field label.split-name .av,.field label.split-name .av-img{flex:none}

/* changelog popup rows */


/* 1.0.0-qa11: owner-only invite link panel */
.invite-box{display:flex;flex-direction:column;gap:9px;margin-top:4px}
.invite-meta{font-size:12.5px;color:var(--text2);margin:0}

/* 1.0.0-qa12: your own row in Balances */
.bal-me{background:var(--glass-sunk);border-radius:12px}

/* ---- 1.0.0-qa14: long unbroken names must not overlap or spill ---- */
/* Home group rows: let the text column shrink so it can never sit on top of the amount. */
.gmeta{min-width:0;flex:1 1 auto}
.gname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gsub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gcard{gap:10px}
/* Group header title. */
.ghead-text>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Anywhere text is allowed to wrap, a single long word must break rather than overflow. */
.rtitle,.rmeta,.bal-name,.empty-msg,.sheet-title,.legend-lbl{overflow-wrap:anywhere}
#activityBody .rtitle,#activityBody .rmeta,#expensesList .rtitle,#expensesList .rmeta{overflow-wrap:anywhere;word-break:normal}
.bal-body{min-width:0}
/* qa45.1 (re-audit M8): on one line, so a long name shortens with "…" (it used to wrap letter by letter) */
.bal-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* =========================================================================
   Liquid Glass pickers (qa32): our own dropdown and calendar.
   The native <select>/<input type=date> stay only as hidden value holders. They are
   hidden here as well as by JS, so the browser control never flashes or opens.
   ========================================================================= */
select.inp,input.inp[type="date"],.gp-native{display:none!important}
.gp-trigger{display:flex;align-items:center;gap:8px;text-align:left;cursor:pointer;min-width:0;line-height:1.25}
.gp-trigger .gp-val{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gp-trigger.gp-blank .gp-val{color:var(--text3)}
.gp-ico{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.gp-trigger .gp-ico{color:var(--text3);transition:transform .2s var(--ease)}
.gp-sel[aria-expanded="true"] .gp-ico{transform:rotate(180deg)}
.gp-trigger[aria-expanded="true"]{box-shadow:inset 0 1px 2px var(--lg-sunk),0 0 0 3px var(--accent-soft)}
.gp-trigger:disabled{cursor:default;opacity:.6}
.gp-trigger:focus-visible{outline:none;box-shadow:inset 0 1px 2px var(--lg-sunk),0 0 0 3px var(--accent-soft)}
@media (max-width:560px){
  .gp-date{padding:10px 10px;font-size:13px;min-width:0}
  .amt-row .gp-date{flex:1 1 0}
}

/* the layer: invisible and untouchable while closed */
.gp-layer{position:fixed;inset:0;z-index:55;visibility:hidden;pointer-events:none;transition:visibility 0s .2s}
.gp-layer.open{visibility:visible;pointer-events:auto;transition:visibility 0s}
.gp-backdrop{position:absolute;inset:0;background:transparent}
.gp-layer.gp-bottom .gp-backdrop{background:var(--lg-scrim);opacity:0;transition:opacity .2s var(--ease)}
.gp-layer.gp-bottom.open .gp-backdrop{opacity:1}

/* the panel: the glass frame. It never scrolls (the rim lives on it); the list inside does.
   Like a toast it floats over arbitrary content, so it uses the near-opaque toast fill:
   with the ordinary glass fill, buttons behind the calendar showed through the dates. */
.gp-panel{position:fixed;display:flex;flex-direction:column;overflow:hidden;border-radius:22px;outline:none;
  background:radial-gradient(130% 60% at 50% -18%,var(--lg-sheen),transparent 60%),linear-gradient(180deg,var(--gp-top),var(--gp-bot));
  -webkit-backdrop-filter:blur(var(--lg-blur-strong)) saturate(var(--lg-sat));backdrop-filter:blur(var(--lg-blur-strong)) saturate(var(--lg-sat));
  box-shadow:var(--lg-spec),var(--lg-shadow-strong);color:var(--text);
  opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top center;transition:opacity .18s var(--ease),transform .2s var(--ease-spring)}
.gp-panel.up{transform:translateY(6px) scale(.98);transform-origin:bottom center}
.gp-layer.open .gp-panel{opacity:1;transform:none}
.gp-panel::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(155deg,var(--lg-rim-a) 0%,var(--lg-rim-b) 38%,var(--lg-rim-b) 62%,var(--lg-rim-c) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.gp-layer.gp-bottom .gp-panel{left:0;right:0;bottom:0;top:auto;width:auto;max-height:78dvh;border-radius:28px 28px 0 0;
  padding-bottom:env(safe-area-inset-bottom);transform:translateY(100%);opacity:1;transition:transform .28s var(--ease-spring)}
.gp-layer.gp-bottom.open .gp-panel{transform:none}
.gp-grab{flex:none;width:38px;height:5px;border-radius:999px;background:var(--text3);opacity:.4;margin:8px auto 2px}

/* list */
.gp-search{flex:none;position:relative;padding:10px 10px 4px}
.gp-search .gp-ico{position:absolute;left:24px;top:50%;margin-top:3px;transform:translateY(-50%);color:var(--text3);pointer-events:none}
.gp-search .inp{padding-left:40px;border-radius:999px}
.gp-search .inp::-webkit-search-cancel-button{-webkit-appearance:none}
.gp-list{position:relative;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:6px;scroll-padding:8px}
.gp-sec{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text3);padding:10px 12px 4px}
.gp-opt{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;border:0;background:none;color:var(--text);font:inherit;font-size:14px;
  text-align:left;padding:10px 12px;border-radius:14px;cursor:pointer}
.gp-opt[hidden],.gp-sec[hidden],.gp-empty[hidden]{display:none}
.gp-opt:hover{background:var(--lg-sunk)}
.gp-opt:focus-visible{outline:none;background:var(--lg-sunk);box-shadow:inset 0 0 0 2px var(--accent-soft)}
.gp-opt[aria-selected="true"]{color:var(--accent);font-weight:700}
.gp-opt .gp-txt,.gp-opt .gp-sub{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gp-opt .gp-main{flex:none;font-weight:700;min-width:40px;letter-spacing:.02em}
.gp-opt .gp-sym{flex:none;min-width:30px;color:var(--text2)}
.gp-opt .gp-sub{color:var(--text2);font-weight:400}
.gp-opt .gp-ico{margin-left:auto;color:var(--accent)}
.gp-empty{padding:18px 12px;text-align:center;color:var(--text3);font-size:13px}

/* calendar */
.gp-cal{padding:12px 12px 12px;width:100%;max-width:420px;margin:0 auto}
.gp-cal-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.gp-navb{flex:none;width:38px;height:38px;border:0;border-radius:999px;background:var(--lg-sunk);color:var(--text);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.gp-navb:hover{color:var(--accent)}
.gp-navb:focus-visible,.gp-title:focus-visible,.gp-day:focus-visible,.gp-mon:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.gp-title{flex:1 1 auto;min-width:0;border:0;background:none;color:var(--text);font:inherit;font-size:16px;font-weight:700;cursor:pointer;padding:8px;border-radius:999px}
.gp-title:hover{background:var(--lg-sunk)}
.gp-wk,.gp-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.gp-wk span{text-align:center;font-size:11px;font-weight:700;color:var(--text3);padding:4px 0;text-transform:uppercase}
.gp-day{height:40px;min-width:0;border:0;border-radius:999px;background:none;color:var(--text);font:inherit;font-size:14px;cursor:pointer;font-variant-numeric:tabular-nums}
.gp-day:hover:not(:disabled){background:var(--lg-sunk)}
.gp-day.today{color:var(--accent);font-weight:700;box-shadow:inset 0 0 0 1.5px var(--accent)}
.gp-day[aria-selected="true"],.gp-mon[aria-selected="true"]{color:var(--on-accent);font-weight:700;
  background:linear-gradient(180deg,var(--lg-accent-top),var(--lg-accent-bot));box-shadow:inset 0 1px 0 var(--lg-accent-rim)}
.gp-day:disabled{opacity:.28;cursor:default}
.gp-months{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:6px 0}
.gp-mon{height:44px;border:0;border-radius:999px;background:var(--lg-sunk);color:var(--text);font:inherit;font-size:14px;cursor:pointer}
.gp-mon.today{box-shadow:inset 0 0 0 1.5px var(--accent)}
.gp-foot{display:flex;justify-content:space-between;gap:8px;margin-top:10px}
.gp-foot .btn:disabled{opacity:.45}

@media (prefers-reduced-motion:reduce){
  .gp-panel,.gp-layer.gp-bottom .gp-panel,.gp-backdrop,.gp-trigger .gp-ico{transition:opacity .12s linear!important;transform:none!important}
}
/* Reduce Transparency (e.g. Windows "Transparency effects" off): with no blur behind it, a
   see-through fill shows sharp text through the menu (reported 29 Sep). Near-solid instead. */
@media (prefers-reduced-transparency:reduce){
  .gp-panel{background:var(--rt-float);-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ---------- qa44 (Phase 5): keyboard, screen readers, narrow screens ---------- */
/* Add expense (+) and Export, round icon buttons beside the search, on every screen size
   (your preview note, 15 Oct). The floating Add expense button is gone, so nothing covers
   the end of a page any more (L18). */
.search-row>.inp{min-height:40px}
.tool-btn{flex:none;width:40px;height:40px;padding:0;border-radius:999px;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--glass-bd);background:var(--glass-1);color:var(--text2);box-shadow:var(--sh-edge),var(--sh-1);font:inherit}
.tool-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tool-btn:hover{color:var(--text)}
.tool-add{border-color:transparent;color:var(--on-accent);background:linear-gradient(180deg,var(--lg-accent-top),var(--lg-accent-bot));box-shadow:inset 0 1px 0 var(--lg-accent-rim),var(--lg-accent-glow)}
.tool-add:hover{color:var(--on-accent)}
.tool-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-soft),0 0 0 1px var(--accent)}
/* H13: rows, cards and chips that act as buttons show where the keyboard is */
[role="button"]:not(button):focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
[role="button"]:not(button){-webkit-tap-highlight-color:transparent}
[data-view-h]:focus,#modalFrame:focus{outline:none}
/* M31: an Activity line wraps at every width; the amount is part of it, so nothing is cut */
#activityBody .rtitle,#activityBody .rmeta{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35}
#activityBody .row{align-items:flex-start}
/* M34: the group tabs share the width and can shrink (flex items refuse to without min-width:0) */
.seg button{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}   /* each as wide as its word; shrinks only when there is no room */
@media (max-width:340px){.seg.sm button{padding-left:2px;padding-right:2px;font-size:11px}}
/* M34: below 300 px, a balance's amount gets its own line */
@media (max-width:300px){
  .bal-row{flex-wrap:wrap;row-gap:2px}
  .bal-row .bal-body{flex:1 1 0}
  .bal-row .ramt{flex:1 0 100%;order:5;text-align:right}
}
/* L21: tap targets of at least 36 px on phones */
@media (max-width:560px){
  .seg.sm button{min-height:36px}
  .link-sm,.auth-toggle{min-height:36px;display:inline-flex;align-items:center;padding:0 6px}
  .remember-row{min-height:36px;margin:0 0 6px}
}
/* L22: iPhone Safari zooms into any field under 16 px; touch screens get 16 px */
@media (pointer:coarse){.inp,textarea.inp,.gp-trigger{font-size:16px}}
/* L24: on phones the names in "fewest payments" get their own line */
@media (max-width:560px){
  .simplify-card .srow{flex-wrap:wrap;row-gap:4px}
  .simplify-card .srow .rbody{order:5;flex:1 0 100%}
  .simplify-card .srow .ramt{margin-left:auto}
}
/* L24: a group whose balance would squeeze its name shows the balance under the name (fitGroupCards) */
.gcard.gc-stack{flex-wrap:wrap;row-gap:6px}
.gcard.gc-stack .gmeta{flex:1 1 calc(100% - 60px)}
.gcard.gc-stack .gbal{margin-left:auto}
/* qa44: these used to transition "all", which also animated the visibility they inherit from a
   pop-up that is opening: for a moment they counted as hidden and could not take focus (Tab skipped
   Today in the calendar, focus missed the confirm box). Same look, visibility no longer animated. */
.seg button,.btn,.chip{transition-property:color,background-color,background,border-color,box-shadow,opacity,transform,filter}
/* qa44.1: a round save icon beside a field (Group settings name); while saving, the spinner replaces the icon */
.amt-row>.tool-save{align-self:center}
.tool-btn.is-busy svg{display:none}
.tool-btn.is-busy::before{margin:0}
/* review: a chip became a real button (H13), so it takes the app font and keeps its height */
.chip{font-family:inherit;line-height:1.4}
@media (max-width:560px){.chip{min-height:36px}}
/* review: the language bar in the Terms pop-up fits a 320 px phone */
@media (max-width:380px){.gate-langbar .lang-btn{padding-left:9px;padding-right:9px}}
/* L28: two dates side by side wrap onto two lines when they would not fit (zh-Hant at 360) */
.amt-row:has(> .gp-date){flex-wrap:wrap}
.amt-row>.gp-date{flex:1 1 9.5em;min-width:0}
html[lang="zh-Hant"] .amt-row>.gp-date{flex-basis:12em}
/* L28: the documents' tables fit the Terms pop-up */
.legal-doc table{table-layout:fixed}
.legal-doc th,.legal-doc td{overflow-wrap:anywhere}
/* M33: Windows High Contrast replaces background colours, so "selected" is also an outline */
@media (forced-colors:active){
  .seg button.on,.chip.on,.gfilter button.on,.pg-num.on,.lang-btn.on,.pillnav-btn.on,[aria-current="page"]{outline:2px solid Highlight;outline-offset:-2px;text-decoration:underline}
  [role="button"]:not(button):focus-visible,.tool-btn:focus-visible{outline:2px solid Highlight}
}


/* ============================================================================
   Liquid Glass, flat (1.0.0-qa28). Kept LAST in the file on purpose: it restyles
   components defined above and has to win the cascade. No depth effects — no tilt,
   parallax, extrusion or bevel. The "liquid" read comes from:
     1. a heavily blurred, colour-boosted translucent fill with light pooled at the top;
     2. a hairline rim whose brightness sweeps round the edge (the lensing cue);
     3. a crisp specular line along the top inner edge;
     4. soft, low, diffuse shadow instead of a heavy drop.
   ========================================================================= */
/* ---- the material, shared ---- */
.card,.sheet,.pillnav,.btn-ghost,.chip,.icon-btn,.toast,.sheet-x,.cmt-del{
  background:radial-gradient(130% 70% at 50% -22%,var(--lg-sheen),transparent 62%),
             linear-gradient(180deg,var(--lg-fill-top),var(--lg-fill-bot));
  -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat));
  backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat));
  border-color:transparent;
  box-shadow:var(--lg-spec),var(--lg-shadow);
}
.sheet,.pillnav,.toast{
  background:radial-gradient(130% 60% at 50% -18%,var(--lg-sheen),transparent 60%),
             linear-gradient(180deg,var(--lg-fill-strong-top),var(--lg-fill-strong-bot));
  -webkit-backdrop-filter:blur(var(--lg-blur-strong)) saturate(var(--lg-sat));
  backdrop-filter:blur(var(--lg-blur-strong)) saturate(var(--lg-sat));
  box-shadow:var(--lg-spec),var(--lg-shadow-strong);
}
/* A toast floats over arbitrary content and has to be read in a glance, so it is
   near-opaque: list text was showing through it (already true before the glass,
   slightly worse with the more transparent glass fill). */
.toast{background:radial-gradient(130% 60% at 50% -18%,var(--lg-sheen),transparent 60%),
  linear-gradient(180deg,var(--lg-toast-top),var(--lg-toast-bot))}

/* ---- the rim: a 1px gradient ring cut out with a mask ---- */
/* .fab and .pillnav are already position:fixed, which also anchors ::after. */
.sheet,.btn-ghost,.chip,.icon-btn,.toast,.seg,.sheet-x,.cmt-del,.btn{position:relative}
.card::after,.sheet::after,.pillnav::after,.btn-ghost::after,.chip::after,.icon-btn::after,.toast::after,.sheet-x::after,.cmt-del::after,.btn-primary::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(155deg,var(--lg-rim-a) 0%,var(--lg-rim-b) 38%,var(--lg-rim-b) 62%,var(--lg-rim-c) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}

/* ---- shapes: capsules for controls, softer radii for surfaces ---- */
.card{border-radius:22px}
.sheet{border-radius:28px}
.btn,.chip,.inp,.seg{border-radius:999px}
.seg button{border-radius:999px}
.icon-btn,.sheet-x,.cmt-del{border-radius:999px}
textarea.inp{border-radius:18px}

/* ---- primary action: tinted glass, not a flat gradient ---- */
.btn-primary{
  color:var(--on-accent);
  background:linear-gradient(180deg,var(--lg-accent-top),var(--lg-accent-bot));
  -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat));
  backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat));
  box-shadow:inset 0 1px 0 var(--lg-accent-rim),var(--lg-accent-glow);
}
.btn-primary::after{
  background:linear-gradient(155deg,var(--lg-accent-rim),transparent 45%,transparent 70%,var(--lg-accent-rim));
}

/* ---- segmented control: glass track, glass thumb ---- */
.seg{background:var(--lg-sunk);border-color:transparent;box-shadow:inset 0 1px 2px var(--lg-sunk),inset 0 -1px 0 var(--lg-sunk-rim)}
.seg button.on{
  color:var(--on-accent);
  background:linear-gradient(180deg,var(--lg-accent-top),var(--lg-accent-bot));
  box-shadow:inset 0 1px 0 var(--lg-accent-rim),0 4px 12px var(--lg-sunk);
}

/* ---- inputs: recessed glass ---- */
.inp{background:var(--lg-sunk);border-color:transparent;box-shadow:inset 0 1px 2px var(--lg-sunk),inset 0 -1px 0 var(--lg-sunk-rim)}

/* ---- the scrim behind sheets: lighter veil, more blur ---- */
.scrim{background:var(--lg-scrim);-webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%)}

/* ---- phones: keep the look, spend less GPU on the many small pieces ---- */
@media (max-width:560px){
  .card,.chip,.icon-btn{-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%)}
}
@media (prefers-reduced-transparency:reduce){
  .card,.sheet,.pillnav,.btn-ghost,.chip,.icon-btn,.toast{background:var(--lg-fill-strong-top);-webkit-backdrop-filter:none;backdrop-filter:none}
  /* things that float over scrolling or arbitrary content must not show it through (qa37) */
  .pillnav,.toast{background:var(--rt-float)}
  /* qa45.1 (re-audit L34): the Terms pop-up card, the glass buttons and the backdrop too */
  .gate-card{background:var(--rt-float);-webkit-backdrop-filter:none;backdrop-filter:none}
  .btn-primary,.sheet-x,.scrim{-webkit-backdrop-filter:none;backdrop-filter:none}
}