*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
--bg:#fdf6ed;--bg2:#F7F3F0;--surface:#fff;--surface2:#fef5ec;--surface-float:#fff;
--card:#fff;--card-hover:#fff8f2;--border:#E6E0DA;
--text:#2D2926;--text1:#2D2926;--text2:#6E6763;--muted:#6E6763;
--primary:#BC5D4C;--primary-hover:#A34B3C;--primary-light:#F2C6BD;--primary-dark:#BC5D4C;--primary-glow:rgba(163,75,60,.16);
--color-success:#3CA973;--color-danger:#E56B55;
--success:#2E7D32;--warn:#f0a030;--danger:var(--color-danger);--info:#5b8fc9;--info-text:#3d6fa8;
--success-pill-bg:#E8F5E9;
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;
--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--row-h:64px;--accent-text:var(--primary-dark);
--dash-bg:#FAF4EE;
--shadow-ambient:0 2px 4px rgba(0,0,0,.04);--shadow-directional:0 8px 16px rgba(0,0,0,.08);--shadow-elevated:0 2px 4px rgba(0,0,0,.04),0 8px 16px rgba(0,0,0,.08);--shadow-hover:0 4px 8px rgba(0,0,0,.06),0 12px 24px rgba(0,0,0,.1);
--header-bg:rgba(255,248,240,.9);
--nav-bg:rgba(255,248,240,.95);
--chip-border:#d6c9bb;
--hero-bg:radial-gradient(120% 160% at 50% 0%,#FFF4EE 0%,#FFF8F2 45%,#FFFDFB 75%,#FFFFFF 100%);
--alert-warn-text:#8a5a17;--alert-ok-text:#2E7D32;
--chart-grid:#e5dfd6;--chart-axis:#8a7565;--chart-value:#5c4a3a;
--surface-tint:rgba(120,70,40,.06);
--font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
--font-ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
--font-mono:'SF Mono','Cascadia Code','Fira Code',monospace;
--fs-xs:.7rem;--fs-sm:.82rem;--fs-base:.92rem;--fs-lg:1.05rem;--fs-xl:1.5rem;--fs-2xl:2rem;--fs-3xl:2.5rem;
--fw-medium:500;--fw-semibold:600;--fw-bold:700;
--transition-spring:all .2s cubic-bezier(.4,0,.2,1);--transition:.15s ease;--transition-med:.3s cubic-bezier(.4,0,.2,1);--transition-tactile:var(--transition-spring);
--nav-h:56px;--bottom-nav-h:64px;--header-h:52px;--app-vh:100dvh;
}
@property --grad-top{syntax:"<color>";inherits:true;initial-value:#fdf6ed}
@property --grad-bottom{syntax:"<color>";inherits:true;initial-value:#fdf6ed}
@property --bg{syntax:"<color>";inherits:true;initial-value:#fdf6ed}
@property --bg2{syntax:"<color>";inherits:true;initial-value:#F7F3F0}
@property --surface{syntax:"<color>";inherits:true;initial-value:#fff}
@property --surface2{syntax:"<color>";inherits:true;initial-value:#fef5ec}
@property --surface-float{syntax:"<color>";inherits:true;initial-value:#fff}
@property --card{syntax:"<color>";inherits:true;initial-value:#fff}
@property --card-hover{syntax:"<color>";inherits:true;initial-value:#fff8f2}
@property --text{syntax:"<color>";inherits:true;initial-value:#2D2926}
@property --text2{syntax:"<color>";inherits:true;initial-value:#6E6763}
@property --muted{syntax:"<color>";inherits:true;initial-value:#6E6763}
@property --border{syntax:"<color>";inherits:true;initial-value:#E6E0DA}
@property --chip-border{syntax:"<color>";inherits:true;initial-value:#d6c9bb}
@property --header-bg{syntax:"<color>";inherits:true;initial-value:rgba(255,248,240,.9)}
@property --nav-bg{syntax:"<color>";inherits:true;initial-value:rgba(255,248,240,.95)}
@property --primary-glow{syntax:"<color>";inherits:true;initial-value:rgba(163,75,60,.16)}
@property --surface-tint{syntax:"<color>";inherits:true;initial-value:rgba(120,70,40,.06)}
@property --alert-warn-text{syntax:"<color>";inherits:true;initial-value:#8a5a17}
@property --alert-ok-text{syntax:"<color>";inherits:true;initial-value:#2E7D32}
@property --chart-grid{syntax:"<color>";inherits:true;initial-value:#e5dfd6}
@property --chart-axis{syntax:"<color>";inherits:true;initial-value:#8a7565}
@property --chart-value{syntax:"<color>";inherits:true;initial-value:#5c4a3a}
@property --accent-text{syntax:"<color>";inherits:true;initial-value:#BC5D4C}
[data-font="s"]{--fs-xs:.65rem;--fs-sm:.75rem;--fs-base:.85rem;--fs-lg:.95rem;--fs-xl:1.3rem;--fs-2xl:1.7rem;--fs-3xl:2rem}
[data-font="l"]{--fs-xs:.8rem;--fs-sm:.92rem;--fs-base:1.02rem;--fs-lg:1.15rem;--fs-xl:1.7rem;--fs-2xl:2.3rem;--fs-3xl:2.8rem}
[data-font="xl"]{--fs-xs:.9rem;--fs-sm:1.02rem;--fs-base:1.15rem;--fs-lg:1.3rem;--fs-xl:1.9rem;--fs-2xl:2.6rem;--fs-3xl:3.2rem}
body{font-family:var(--font-sans);color:var(--text);min-height:100dvh;-webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.5;--grad-top:var(--bg);--grad-bottom:var(--bg);background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJmIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC45IiBudW1PY3RhdmVzPSIzIiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsdGVyPSJ1cmwoI2YpIiBvcGFjaXR5PSIuMTUiLz48L3N2Zz4=") repeat,linear-gradient(180deg,var(--grad-top,var(--bg)),var(--grad-bottom,var(--bg))),var(--bg);background-size:300px 300px,auto;transition:--grad-top 1.5s ease,--grad-bottom 1.5s ease}
@media (prefers-reduced-motion:reduce){body{transition:none!important}}
body[data-hour="0"]{--grad-top:#1a1a2e;--grad-bottom:#0f0f1a}
body[data-hour="1"]{--grad-top:#1d1d33;--grad-bottom:#12121f}
body[data-hour="2"]{--grad-top:#202038;--grad-bottom:#151524}
body[data-hour="3"]{--grad-top:#23233d;--grad-bottom:#181829}
body[data-hour="4"]{--grad-top:#2c2c4a;--grad-bottom:#2a2a44}
body[data-hour="5"]{--grad-top:#4a4a6a;--grad-bottom:#6b5b73}
body[data-hour="6"]{--grad-top:#e8c5a0;--grad-bottom:#d4a574}
body[data-hour="7"]{--grad-top:#f5d8a8;--grad-bottom:#e8c58c}
body[data-hour="8"]{--grad-top:#f7e4b8;--grad-bottom:#f0d8a0}
body[data-hour="9"]{--grad-top:#f9edc8;--grad-bottom:#f4e8b8}
body[data-hour="10"]{--grad-top:#fbf6d8;--grad-bottom:#f8f0c8}
body[data-hour="11"]{--grad-top:#fdf6ed;--grad-bottom:#f5eadb}
body[data-hour="12"]{--grad-top:#fef8f0;--grad-bottom:#faece0}
body[data-hour="13"]{--grad-top:#fffaf3;--grad-bottom:#fcf0e3}
body[data-hour="14"]{--grad-top:#fffdf5;--grad-bottom:#fdf8e8}
body[data-hour="15"]{--grad-top:#fdf8e8;--grad-bottom:#f5e8d0}
body[data-hour="16"]{--grad-top:#fcf4dc;--grad-bottom:#f0dbc8}
body[data-hour="17"]{--grad-top:#fdf4ea;--grad-bottom:#efd9cc}
body[data-hour="18"]{--grad-top:#f8e8d8;--grad-bottom:#e8d0b8}
body[data-hour="19"]{--grad-top:#f0d8c0;--grad-bottom:#dcc0a0}
body[data-hour="20"]{--grad-top:#b58278;--grad-bottom:#8c5e68}
body[data-hour="21"]{--grad-top:#684a6e;--grad-bottom:#483250}
body[data-hour="22"]{--grad-top:#382d50;--grad-bottom:#241d3a}
body[data-hour="23"]{--grad-top:#201f36;--grad-bottom:#141324}

/* ===== CIRCADIAN TOKEN SETS (paired with hourly gradients) ===== */
/* DAY — warm daylight gradients are light; dark text + near-white surfaces */
body[data-hour="6"],body[data-hour="7"],body[data-hour="8"],body[data-hour="9"],body[data-hour="10"],
body[data-hour="11"],body[data-hour="12"],body[data-hour="13"],body[data-hour="14"],body[data-hour="15"],
body[data-hour="16"],body[data-hour="17"],body[data-hour="18"],body[data-hour="19"]{
--bg:#fdf6ed;--bg2:#F7F3F0;--surface:#fff;--surface2:#fef5ec;--surface-float:#fff;
--info-text:#3d6fa8;
--card:#fff;--card-hover:#fff8f2;--border:#E6E0DA;
--text:#2D2926;--text1:#2D2926;--text2:#6E6763;--muted:#6E6763;
--header-bg:rgba(255,248,240,.9);
--nav-bg:rgba(255,248,240,.95);
--chip-border:#d6c9bb;
--hero-bg:radial-gradient(120% 160% at 50% 0%,#FFF4EE 0%,#FFF8F2 45%,#FFFDFB 75%,#FFFFFF 100%);
--alert-warn-text:#8a5a17;--alert-ok-text:#2E7D32;
--chart-grid:#e5dfd6;--chart-axis:#8a7565;--chart-value:#5c4a3a;
--surface-tint:rgba(120,70,40,.06);
--primary-glow:rgba(163,75,60,.16);
--accent-text:var(--primary-dark);
--shadow-ambient:0 2px 4px rgba(0,0,0,.04);--shadow-directional:0 8px 16px rgba(0,0,0,.08);--shadow-elevated:0 2px 4px rgba(0,0,0,.04),0 8px 16px rgba(0,0,0,.08);--shadow-hover:0 4px 8px rgba(0,0,0,.06),0 12px 24px rgba(0,0,0,.1);
color-scheme:light;
}
/* DUSK — hours 5 & 20 are mid-dark gradients; warm plum surfaces keep light text AA */
body[data-hour="5"],body[data-hour="20"]{
--bg:#4a3540;--bg2:#3d2b35;--surface:#543a44;--surface2:#66474f;--surface-float:#66474f;
--card:#543a44;--card-hover:#66474f;
--text:#F6F0E8;--text1:#F6F0E8;--text2:#E6DCD0;--muted:#CFC4B2;
--dash-bg:var(--bg);
--primary:#e36c59;--primary-hover:#cc5a4a;--primary-light:#f5a99d;--primary-dark:#b84d3a;--success:#3CA973;--success-pill-bg:rgba(60,169,115,.12);--info-text:#9cc3e8;
--border:rgba(255,250,244,.16);
--header-bg:rgba(40,26,34,.85);--nav-bg:rgba(40,26,34,.9);
--chip-border:rgba(255,250,244,.22);
--hero-bg:radial-gradient(120% 160% at 50% 0%,rgba(255,250,244,.10) 0%,rgba(255,250,244,.06) 45%,rgba(255,250,244,.03) 75%,rgba(255,250,244,0) 100%);
--alert-warn-text:#f0a030;--alert-ok-text:#3CA973;
--chart-grid:rgba(255,250,244,.16);--chart-axis:#E6DCD0;--chart-value:#F6F0E8;
--surface-tint:rgba(255,250,244,.06);
--primary-glow:rgba(227,108,89,.22);
--accent-text:var(--primary);
--shadow-ambient:0 2px 4px rgba(0,0,0,.3);--shadow-directional:0 8px 16px rgba(0,0,0,.35);--shadow-elevated:0 2px 4px rgba(0,0,0,.3),0 8px 16px rgba(0,0,0,.35);--shadow-hover:0 4px 8px rgba(0,0,0,.35),0 12px 24px rgba(0,0,0,.4);
color-scheme:dark;
}
/* NIGHT — hours 0-4 & 21-23 are deep navy; solid surfaces + light text */
body[data-hour="0"],body[data-hour="1"],body[data-hour="2"],body[data-hour="3"],body[data-hour="4"],
body[data-hour="21"],body[data-hour="22"],body[data-hour="23"]{
--bg:#1a1a2e;--bg2:#23233c;--surface:#20203a;--surface2:#2a2a48;--surface-float:#20203a;
--card:#20203a;--card-hover:#2a2a48;
--text:#F2F2F8;--text1:#F2F2F8;--text2:#D8D8E6;--muted:#E0E0E0;
--dash-bg:var(--bg);
--primary:#e36c59;--primary-hover:#cc5a4a;--primary-light:#f5a99d;--primary-dark:#b84d3a;--success:#3CA973;--success-pill-bg:rgba(60,169,115,.12);--info-text:#9cc3e8;
--border:rgba(255,255,255,.14);
--header-bg:rgba(24,22,40,.85);--nav-bg:rgba(24,22,40,.92);
--chip-border:rgba(255,255,255,.22);
--hero-bg:radial-gradient(120% 160% at 50% 0%,rgba(255,255,255,.08) 0%,rgba(255,255,255,.05) 45%,rgba(255,255,255,.02) 75%,transparent 100%);
--alert-warn-text:#f0a030;--alert-ok-text:#3CA973;
--chart-grid:rgba(255,255,255,.14);--chart-axis:#E0E0E0;--chart-value:#D8D8E6;
--surface-tint:rgba(255,255,255,.06);
--primary-glow:rgba(227,108,89,.25);
--accent-text:var(--primary);
--shadow-ambient:0 2px 4px rgba(0,0,0,.3);--shadow-directional:0 8px 16px rgba(0,0,0,.35);--shadow-elevated:0 2px 4px rgba(0,0,0,.3),0 8px 16px rgba(0,0,0,.35);--shadow-hover:0 4px 8px rgba(0,0,0,.35),0 12px 24px rgba(0,0,0,.4);
color-scheme:dark;
}

/* ===== LOCKED MODES (override data-hour by source order) ===== */
body[data-theme="light"]{
--grad-top:#fffdf5;--grad-bottom:#fdf8e8;
--bg:#fdf6ed;--bg2:#F7F3F0;--surface:#fff;--surface2:#fef5ec;--surface-float:#fff;
--info-text:#3d6fa8;
--card:#fff;--card-hover:#fff8f2;--border:#E6E0DA;
--text:#2D2926;--text1:#2D2926;--text2:#6E6763;--muted:#6E6763;
--header-bg:rgba(255,248,240,.9);
--nav-bg:rgba(255,248,240,.95);
--chip-border:#d6c9bb;
--hero-bg:radial-gradient(120% 160% at 50% 0%,#FFF4EE 0%,#FFF8F2 45%,#FFFDFB 75%,#FFFFFF 100%);
--alert-warn-text:#8a5a17;--alert-ok-text:#2E7D32;
--chart-grid:#e5dfd6;--chart-axis:#8a7565;--chart-value:#5c4a3a;
--surface-tint:rgba(120,70,40,.06);
--primary-glow:rgba(163,75,60,.16);
--accent-text:var(--primary-dark);
--shadow-ambient:0 2px 4px rgba(0,0,0,.04);--shadow-directional:0 8px 16px rgba(0,0,0,.08);--shadow-elevated:0 2px 4px rgba(0,0,0,.04),0 8px 16px rgba(0,0,0,.08);--shadow-hover:0 4px 8px rgba(0,0,0,.06),0 12px 24px rgba(0,0,0,.1);
color-scheme:light;
}
body[data-theme="dark"]{
--grad-top:#1a1a2e;--grad-bottom:#0f0f1a;
--bg:#1a1a2e;--bg2:#23233c;--surface:#20203a;--surface2:#2a2a48;--surface-float:#20203a;
--card:#20203a;--card-hover:#2a2a48;
--text:#F2F2F8;--text1:#F2F2F8;--text2:#D8D8E6;--muted:#E0E0E0;
--dash-bg:var(--bg);
--primary:#e36c59;--primary-hover:#cc5a4a;--primary-light:#f5a99d;--primary-dark:#b84d3a;--success:#3CA973;--success-pill-bg:rgba(60,169,115,.12);--info-text:#9cc3e8;
--border:rgba(255,255,255,.14);
--header-bg:rgba(24,22,40,.85);--nav-bg:rgba(24,22,40,.92);
--chip-border:rgba(255,255,255,.22);
--hero-bg:radial-gradient(120% 160% at 50% 0%,rgba(255,255,255,.08) 0%,rgba(255,255,255,.05) 45%,rgba(255,255,255,.02) 75%,transparent 100%);
--alert-warn-text:#f0a030;--alert-ok-text:#3CA973;
--chart-grid:rgba(255,255,255,.14);--chart-axis:#E0E0E0;--chart-value:#D8D8E6;
--surface-tint:rgba(255,255,255,.06);
--primary-glow:rgba(227,108,89,.25);
--accent-text:var(--primary);
--shadow-ambient:0 2px 4px rgba(0,0,0,.3);--shadow-directional:0 8px 16px rgba(0,0,0,.35);--shadow-elevated:0 2px 4px rgba(0,0,0,.3),0 8px 16px rgba(0,0,0,.35);--shadow-hover:0 4px 8px rgba(0,0,0,.35),0 12px 24px rgba(0,0,0,.4);
color-scheme:dark;
}

/* ===== LOGIN ===== */
.login-wrap{display:flex;align-items:center;justify-content:center;min-height:100dvh;padding:var(--space-md);background:radial-gradient(ellipse at 50% 0%,var(--primary-glow) 0%,transparent 70%)}
#authLoading{display:flex;align-items:center;justify-content:center;padding:var(--space-lg)}
.spinner{width:36px;height:36px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.login-box{background:var(--surface);border-radius:var(--radius-xl);padding:var(--space-lg);width:100%;max-width:380px;box-shadow:var(--shadow-elevated);border:1px solid var(--border)}
.login-box h1{font-size:var(--fs-2xl);margin-bottom:var(--space-xs);background:linear-gradient(135deg,var(--primary),var(--warn));-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:var(--fw-bold);letter-spacing:-.5px}
.login-box p{color:var(--text2);margin-bottom:var(--space-lg);font-size:var(--fs-sm)}
.tabs{display:flex;margin-bottom:var(--space-lg);background:var(--bg2);border-radius:var(--radius-md);padding:3px}
.tab{flex:1;padding:.55rem;text-align:center;cursor:pointer;color:var(--muted);border-radius:var(--radius-sm);font-size:var(--fs-sm);transition:var(--transition-tactile);user-select:none;border:none;background:none;font-family:var(--font-sans)}
.tab:hover{color:var(--text);transform:scale(1.02)}
.tab.active{background:var(--primary-dark);color:#fff;box-shadow:0 2px 8px var(--primary-glow)}
button,[role="button"],select,input:not([type="checkbox"]):not([type="radio"]),textarea{min-height:44px!important;min-width:44px!important}
/* Deliberately compact controls — exempt from the 44px global floor (they were designed small) */
button.row-kebab,button.notif-btn,button.loc-chip-remove,button.msg-copy-btn,button.copy-btn,button.menu-item,button.rel-select,button.rel-opt,.header-period,span.user-badge{min-height:0!important;min-width:0!important}
input:not([type="checkbox"]):not([type="radio"]),select,textarea{width:100%;padding:var(--space-sm) var(--space-md);background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text);font-size:var(--fs-base);margin-bottom:var(--space-sm);outline:none;transition:var(--transition-tactile);font-family:var(--font-sans)}
input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow)}
input::placeholder{color:var(--muted)}
.pass-wrap{position:relative;margin-bottom:var(--space-sm)}
.pass-wrap input{margin-bottom:0;padding-right:42px}
.pass-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--muted);padding:6px;display:flex;align-items:center;justify-content:center;line-height:0}
.pass-toggle:hover{color:var(--text)}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);padding:.7rem 1.2rem;background:var(--primary-dark);border:none;border-radius:var(--radius-md);color:#fff;font-size:var(--fs-base);cursor:pointer;font-weight:var(--fw-semibold);transition:var(--transition-tactile);overflow:hidden}
.btn:active{transform:scale(.97)}
.btn:hover,.btn:focus-visible{background:var(--primary-dark);box-shadow:0 4px 16px var(--primary-glow);transform:scale(1.02)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--primary-glow),0 4px 16px var(--primary-glow)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn-sm{padding:.4rem .8rem;font-size:var(--fs-xs);border-radius:var(--radius-sm)}
.btn-xs{padding:.25rem .5rem;font-size:.65rem;border-radius:4px}
.btn-outline{background:transparent;border:1px solid var(--border);color:var(--text2);transition:var(--transition-tactile)}
.btn-outline:hover,.btn-outline:focus-visible{background:var(--surface2);border-color:var(--primary);color:var(--primary);box-shadow:none;transform:scale(1.02)}
.btn-outline:focus-visible{outline:none;box-shadow:0 0 0 3px var(--primary-glow)}
.btn-secondary{background:transparent;border:1px solid var(--border);color:var(--text2);transition:var(--transition-tactile)}
.btn-secondary.outline{background:transparent;border:1px solid var(--border);color:var(--muted)}
.btn-secondary.outline:hover,.btn-secondary.outline:focus-visible{background:var(--surface2);border-color:var(--primary);color:var(--primary);box-shadow:none;transform:scale(1.02)}
.btn-secondary.outline:focus-visible{outline:none;box-shadow:0 0 0 3px var(--primary-glow)}
.btn-success{background:var(--success);color:#000;transition:var(--transition-tactile)}
.btn-success:hover,.btn-success:focus-visible{box-shadow:0 4px 16px rgba(60,169,115,.3);transform:scale(1.02)}
.btn-success:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(60,169,115,.3),0 4px 16px rgba(60,169,115,.3)}
.btn-warn{background:var(--warn);color:#000;transition:var(--transition-tactile)}
.btn-warn:hover,.btn-warn:focus-visible{box-shadow:0 4px 16px rgba(240,160,48,.3);transform:scale(1.02)}
.btn-warn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(240,160,48,.3),0 4px 16px rgba(240,160,48,.3)}
.btn-danger{background:var(--danger);color:#fff;transition:var(--transition-tactile)}
.btn-danger:hover,.btn-danger:focus-visible{box-shadow:0 4px 16px rgba(229,107,85,.3);transform:scale(1.02)}
.btn-danger:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(229,107,85,.3),0 4px 16px rgba(229,107,85,.3)}
.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--muted);transition:var(--transition-tactile)}
.btn-ghost:hover,.btn-ghost:focus-visible{border-color:var(--primary);color:var(--primary);background:var(--surface2);transform:scale(1.02)}
.btn-ghost:focus-visible{outline:none;box-shadow:0 0 0 3px var(--primary-glow)}
.btn-icon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-md);border:1px solid var(--border);background:transparent;color:var(--text2);cursor:pointer;transition:var(--transition-tactile);font-size:1.1rem}
.btn-icon:hover,.btn-icon:focus-visible{background:var(--surface2);border-color:var(--primary);color:var(--primary);transform:scale(1.05)}
.btn-icon:focus-visible{outline:none;box-shadow:0 0 0 3px var(--primary-glow)}

/* ===== APP LAYOUT ===== */
.app-wrap{display:none;flex-direction:column;height:var(--app-vh,100dvh)}
.app-header{background:var(--header-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:12px 16px;display:flex;align-items:center;height:var(--header-h);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50}
.app-header h1{font-size:1rem;font-weight:var(--fw-bold);background:linear-gradient(135deg,var(--primary),var(--warn));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.header-right{margin-left:auto;display:flex;align-items:center;gap:var(--space-xs)}
.header-log-btn{display:none;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 14px;background:var(--primary-dark);color:#fff;border:none;border-radius:var(--radius-md);font-size:var(--fs-sm);font-weight:var(--fw-semibold);cursor:pointer;font-family:var(--font-sans);flex-shrink:0;transition:var(--transition-tactile)}
.header-log-btn svg{width:16px;height:16px}
.header-log-btn:hover{background:var(--primary-dark);box-shadow:0 4px 16px var(--primary-glow);transform:scale(1.03)}
.header-log-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--primary-glow)}
.header-period{padding:.3rem .7rem;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text2);font-size:var(--fs-xs);cursor:pointer;margin:0;width:auto;flex-shrink:0;font-family:var(--font-sans);height:28px;box-sizing:border-box}
.user-badge{display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:transparent;border-radius:50%;border:none;cursor:pointer;transition:box-shadow .2s ease-in-out,background-color .2s ease-in-out,transform .2s ease-in-out;flex-shrink:0}.user-badge:hover,.user-badge:focus-visible{box-shadow:inset 0 0 0 2px var(--primary),0 0 12px 2px rgba(232,104,90,.5);outline:none}.user-badge:hover{transform:scale(1.05)}
.user-badge .avatar{display:flex;align-items:center;justify-content:center}
.user-sync{padding:var(--space-xs) var(--space-md);font-size:.68rem;color:var(--muted);border-bottom:1px solid var(--border);margin-bottom:var(--space-xs);display:flex;align-items:center;gap:6px}
.user-dropdown{position:relative;cursor:pointer;display:flex;align-items:center}
.user-dropdown-menu{display:none;position:absolute;top:calc(100% + 8px);right:0;min-width:180px;background:var(--surface-float);border-radius:var(--radius-lg);box-shadow:var(--shadow-elevated);border:1px solid var(--border);z-index:99;padding:var(--space-xs);overflow:hidden}
.user-dropdown-menu.show{display:block;animation:panelIn .2s ease}
.user-dropdown-menu a{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);color:var(--text);text-decoration:none;font-size:var(--fs-sm);border-radius:var(--radius-sm);transition:var(--transition-tactile)}
.user-dropdown-menu a:hover,.user-dropdown-menu a:focus-visible{background:var(--surface2);transform:translateX(4px)}
.user-dropdown-menu a:focus-visible{outline:none;box-shadow:0 0 0 3px var(--primary-glow)}
.user-dropdown-menu .divider{height:1px;background:var(--border);margin:var(--space-xs) 0}
.notif-btn{position:relative;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:transparent;color:var(--text2);cursor:pointer;border-radius:50%;transition:var(--transition-tactile)}
.notif-btn:hover{background:var(--surface2);color:var(--text)}
.notif-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--primary-glow)}
.notif-badge{display:none;position:absolute;top:0;right:0;width:14px;height:14px;background:var(--danger);color:#fff;font-size:.5rem;border-radius:50%;align-items:center;justify-content:center;font-weight:var(--fw-bold);box-shadow:0 2px 6px rgba(229,107,85,.4)}
/* Scan-a-receipt affordance inside the Log Expense modal */
.scan-slot{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;background:var(--surface-tint);border:1.5px dashed var(--primary);border-radius:var(--radius-lg);color:var(--text);cursor:pointer;font-family:var(--font-sans);text-align:left;transition:var(--transition-tactile);min-height:0!important;min-width:0!important;margin-bottom:var(--space-xs)}
.scan-slot:hover{background:var(--primary-glow);transform:scale(1.01)}
.scan-slot:focus-visible{outline:none;box-shadow:0 0 0 3px var(--primary-glow)}
.scan-slot>svg:first-child{color:var(--primary);flex-shrink:0}
.scan-slot-text{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.scan-slot-text strong{font-size:var(--fs-sm);font-weight:var(--fw-semibold)}
.scan-slot-text span:last-child{font-size:var(--fs-xs);color:var(--muted)}
.scan-slot>svg:last-child{color:var(--muted);flex-shrink:0}

/* ===== NAV ===== */
.desktop-nav{display:none;background:var(--surface);padding:4px var(--space-md);border-bottom:1px solid var(--border);gap:2px;overflow-x:auto}
.desktop-nav::-webkit-scrollbar{display:none}
.desktop-nav button{padding:.5rem .9rem;background:none;border:none;color:var(--text2);cursor:pointer;font-size:var(--fs-sm);white-space:nowrap;border-radius:var(--radius-sm);transition:var(--transition-tactile)}
.desktop-nav button:hover{color:var(--text);background:var(--surface2);transform:scale(1.02)}
.desktop-nav button:focus-visible{outline:none;box-shadow:0 0 0 3px var(--primary-glow)}
.desktop-nav button.active{color:var(--accent-text);background:var(--primary-glow);border-bottom:2px solid var(--primary)}

/* ===== MAIN ===== */
main{flex:1;overflow-y:auto;padding:var(--space-md);padding-bottom:calc(var(--space-md) + var(--bottom-nav-h));scroll-behavior:smooth}
.panel{display:none;animation:panelIn .25s cubic-bezier(.4,0,.2,1)}
.panel.active{display:block}
@keyframes panelIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ===== BOTTOM NAV ===== */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:var(--bottom-nav-h);background:var(--nav-bg);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-top:1px solid var(--border);display:flex;align-items:center;gap:var(--space-xs);padding:0 var(--space-xs);z-index:100;padding-bottom:env(safe-area-inset-bottom);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain}
.bottom-nav::-webkit-scrollbar{display:none}
.bottom-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px 10px;margin:0 auto;background:none;border:none;color:var(--muted);cursor:pointer;font-size:.6rem;border-radius:999px;transition:var(--transition-tactile);min-width:56px;min-height:48px;flex-shrink:0;position:relative}
.bottom-nav button .nav-icon{font-size:1.3rem;line-height:1;transition:var(--transition-tactile)}
.bottom-nav button:hover{color:var(--text2);transform:scale(1.05)}
.bottom-nav button:focus-visible{outline:none;box-shadow:0 0 0 3px var(--primary-glow)}
.bottom-nav button.active{color:var(--accent-text);background:var(--primary-glow);border-radius:999px}
.bottom-nav .nav-add{display:flex;align-items:center;justify-content:center;width:52px;height:52px;min-width:52px;min-height:48px;padding:0;border-radius:50%;background:var(--color-accent,#E56B55);color:#fff;border:none;cursor:pointer;margin:0 auto;flex-shrink:0;box-shadow:0 4px 16px rgba(229,107,85,.35);transition:var(--transition-tactile)}
.bottom-nav .nav-add svg{width:26px;height:26px;stroke-width:2.4}
.bottom-nav .nav-add:hover{background:var(--color-accent,#E56B55);color:#fff;transform:scale(1.06);box-shadow:0 6px 20px rgba(229,107,85,.45)}
.bottom-nav .nav-add:focus-visible{outline:none;box-shadow:0 0 0 3px var(--primary-glow)}
.bottom-nav .nav-add:active{transform:scale(.94)}

/* ===== CARDS ===== */
.card{background:var(--surface);border-radius:var(--radius-lg);padding:var(--space-md);margin-bottom:var(--space-sm);box-shadow:var(--shadow-elevated);transition:var(--transition-tactile)}
.card:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px)}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-sm);padding-bottom:var(--space-sm);border-bottom:1px solid var(--border)}
.card-header h3{font-size:12px;color:var(--text2);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.5px}
.export-card{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);padding:var(--space-xs) var(--space-sm)}
.export-card .card-header{margin:0;padding:0;border:none}
.export-card .card-header h3{font-size:var(--fs-xs);text-transform:uppercase}
.export-wrap{position:relative}
.export-menu{display:none;position:absolute;top:calc(100% + 6px);left:0;min-width:180px;background:var(--surface-float);border-radius:var(--radius-md);box-shadow:var(--shadow-elevated);border:1px solid var(--border);z-index:60;overflow:hidden}
.export-menu.show{display:block;animation:panelIn .2s ease}
.export-menu a{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);color:var(--text);font-size:var(--fs-sm);cursor:pointer;white-space:nowrap;transition:var(--transition-tactile);border-radius:var(--radius-sm)}
.export-menu a:hover,.export-menu a:focus-visible{background:var(--surface2);color:var(--primary);transform:translateX(4px)}
.export-menu a:focus-visible{outline:none;box-shadow:0 0 0 3px var(--primary-glow)}
.export-menu a svg{width:14px;height:14px;flex-shrink:0;color:var(--muted)}
.card-item{padding:var(--space-xs) 0;font-size:var(--fs-sm);color:var(--text2);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:var(--space-sm)}
.card-item:last-child{border-bottom:none}
.card-empty{color:var(--muted);font-size:var(--fs-sm);padding:var(--space-sm) 0;text-align:center;font-style:italic}
.empty-nudge{display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);padding:var(--space-md) var(--space-sm);text-align:center;color:var(--muted)}
.empty-nudge .empty-nudge-icon{opacity:.4;display:flex;align-items:center;justify-content:center}
.empty-nudge .empty-nudge-text{font-size:var(--fs-sm)}
.attention-row{padding:var(--space-xs) 0;font-size:var(--fs-sm);color:var(--text2);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);transition:var(--transition-tactile)}
.attention-row:last-child{border-bottom:none}
.attention-row:hover{background:var(--surface2);padding-left:var(--space-xs);padding-right:var(--space-xs);border-radius:var(--radius-sm)}
.attention-info{flex:1;min-width:0;display:flex;align-items:center;gap:var(--space-sm);overflow:hidden}
.attention-info .item-loc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.attention-actions{display:flex;gap:6px;opacity:0;flex-shrink:0;transition:var(--transition-tactile)}
.attention-row:hover .attention-actions,.attention-row:focus-within .attention-actions{opacity:1}
@media (hover:none), (pointer:coarse){.attention-actions{opacity:1}}
.attention-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);color:var(--text2);cursor:pointer;transition:var(--transition-tactile)}
.attention-btn:hover{background:var(--primary);border-color:var(--primary);color:#fff;transform:scale(1.1)}
.attention-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--primary-glow)}

/* ===== TOOLS ===== */
.tools-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);margin-bottom:var(--space-md)}
.tools-header .btn{white-space:nowrap}
.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--space-sm)}
.tool-card{background:var(--surface);border-radius:var(--radius-lg);padding:var(--space-md);box-shadow:var(--shadow-elevated);border:1px solid var(--border);display:flex;flex-direction:column;gap:var(--space-sm);transition:var(--transition-tactile)}
.tool-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px)}
.tool-card-icon{width:52px;height:52px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;background:var(--surface2);color:var(--color-accent,var(--primary));flex-shrink:0}
.tool-card-body{flex:1;min-width:0}
.tool-card-name{font-size:var(--fs-base);font-weight:var(--fw-semibold);color:var(--text)}
.tool-card-desc{font-size:var(--fs-xs);color:var(--muted);margin-top:2px;line-height:1.4}
.tool-card-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tool-card-actions a,.tool-card-actions button{text-decoration:none}

/* ===== ALERT WIDGET ===== */
.dash-head{display:flex;justify-content:flex-start;align-items:center;margin-bottom:var(--space-md)}
#panelDashboard{background:var(--dash-bg)}
.dashboard-container{max-width:768px;margin:0 auto;padding:32px 24px;background:var(--surface);border-radius:20px;box-shadow:0 10px 30px -5px rgba(83,77,74,.05),0 4px 12px -2px rgba(83,77,74,.03)}
@media(max-width:767px){.dashboard-container{padding:20px 16px}}
.dash-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.dash-header h1{font-size:22px;font-weight:700;color:var(--text);letter-spacing:-0.02em}
.cloud-pill{display:flex;align-items:center;gap:6px;padding:4px 10px;border-radius:9999px;background:var(--success-pill-bg);color:var(--success);font-size:12px;font-weight:600}
.cloud-pill svg{width:12px;height:12px}
.cloud-pill.offline{background:rgba(240,160,48,.12);color:var(--warn)}
.hero-summary{background:var(--bg2);border-radius:16px;padding:20px;margin-bottom:28px}
.hero-metric{display:flex;justify-content:space-between;align-items:baseline;font-size:15px;font-weight:600;color:var(--text);margin-bottom:12px}
.hero-metric .hero-amount{font-size:22px;font-weight:700;letter-spacing:-0.02em}
.hero-progress{height:10px;width:100%;background:var(--border);border-radius:9999px;overflow:hidden}
.hero-progress-fill{height:100%;width:0;background:var(--primary);border-radius:9999px;transition:width .3s cubic-bezier(.4,0,.2,1)}
.hero-progress-fill.over{background:var(--danger)}
.hero-meta{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:12px;color:var(--text2)}
.hero-meta .over{color:var(--danger);font-weight:600}
.alert-widget{display:inline-flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);font-size:var(--fs-sm);line-height:1.4;box-shadow:var(--shadow-ambient)}
.alert-widget svg{width:16px;height:16px;flex-shrink:0}
.alert-widget.warn{background:rgba(240,160,48,.10);border:1px solid rgba(240,160,48,.35);color:var(--alert-warn-text)}
.alert-widget.ok{background:var(--success-pill-bg);border:1px solid rgba(46,125,50,.30);color:var(--alert-ok-text)}

/* ===== CHAT ===== */
.chat-area{display:flex;flex-direction:column;height:calc(var(--app-vh,100dvh) - var(--header-h) - var(--bottom-nav-h) - var(--space-md)*2)}
@media(min-width:768px){.chat-area{height:calc(var(--app-vh,100dvh) - var(--header-h) - 48px - var(--space-md)*2)}}
.chat-welcome{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;padding:clamp(48px,14vh,140px) var(--space-lg) var(--space-lg);animation:fadeIn .4s ease}
.chat-welcome .welcome-greeting{font-size:var(--fs-2xl);color:var(--text);margin-bottom:var(--space-sm);max-width:500px;line-height:1.4}
.chat-welcome .welcome-sub{font-size:var(--fs-sm);color:var(--text2);max-width:360px;line-height:1.5}
.suggestion-chips{display:flex;flex-wrap:wrap;gap:var(--space-sm);justify-content:center;align-items:center;margin-top:var(--space-lg);max-width:440px;min-height:34px}
.suggestion-chip{display:inline-flex;align-items:center;padding:.5rem .95rem;background:var(--surface2);border:1px solid var(--chip-border);border-radius:999px;color:var(--text2);font-size:var(--fs-sm);font-family:var(--font-sans);cursor:pointer;transition:var(--transition-tactile);box-shadow:var(--shadow-ambient);line-height:1.4}
.suggestion-chip:hover,.suggestion-chip:focus-visible{background:var(--surface);border-color:var(--primary);color:var(--primary);box-shadow:var(--shadow-hover);transform:translateY(-1px) scale(1.02)}
.suggestion-chip:focus-visible{outline:none;box-shadow:0 0 0 3px var(--primary-glow),var(--shadow-hover)}
.suggestion-chip:active{transform:scale(.97)}
.suggestion-skeleton{width:120px;height:34px;border-radius:999px;background:linear-gradient(90deg,var(--surface2) 25%,var(--surface-tint) 50%,var(--surface2) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite ease-in-out}
.messages{flex:1;overflow-y:auto;padding:var(--space-xs) 0;scroll-behavior:smooth;display:none}
.messages.has-msgs{display:block}
.msg{margin-bottom:var(--space-sm);max-width:88%;animation:msgIn .25s ease}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.msg-user{margin-left:auto}
.msg-bubble{padding:.65rem .9rem;border-radius:var(--radius-lg);font-size:var(--fs-sm);line-height:1.55;word-break:break-word}
.msg-user .msg-bubble{background:var(--primary-dark);color:#fff;border-bottom-right-radius:var(--radius-sm)}
.msg-bot .msg-bubble{background:var(--surface2);border-bottom-left-radius:var(--radius-sm);border-left:3px solid var(--info)}
.msg-bubble a{color:var(--info);text-decoration:underline;text-underline-offset:2px;word-break:break-word}
.msg-bubble a:hover{color:var(--primary-dark)}
.action-chip{display:inline-flex;align-items:center;gap:4px;font-size:.6rem;font-weight:600;padding:2px 8px;border-radius:999px;margin-bottom:5px;letter-spacing:.02em}
.chip-write{background:var(--success-pill-bg);color:var(--success)}
.chip-read{background:rgba(91,143,201,.14);color:var(--info)}
.chip-pending{background:rgba(240,160,48,.14);color:var(--warn)}
.chip-web{background:rgba(123,90,224,.14);color:#7b5ae0}
.msg-bot .msg-bubble code{background:var(--surface-tint);padding:1px 4px;border-radius:3px;font-family:var(--font-mono);font-size:.8em}
.msg-bot .msg-bubble pre{background:var(--surface-tint);border-radius:var(--radius-sm);padding:var(--space-sm);margin:var(--space-xs) 0;overflow-x:auto;position:relative}
.msg-bot .msg-bubble pre code{background:none;padding:0;font-size:.8em}
.chat-confirm{display:flex;gap:var(--space-xs);margin-top:var(--space-sm);flex-wrap:wrap}
.chat-confirm .btn{min-height:32px}
.copy-btn{position:absolute;top:4px;right:4px;padding:2px 6px;background:var(--surface-tint);border:none;border-radius:3px;color:var(--text2);cursor:pointer;font-size:.65rem;opacity:0;transition:var(--transition-tactile)}
pre:hover .copy-btn{opacity:1}
.copy-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--primary-glow)}
.msg-bot .msg-bubble pre.code-block{background:var(--surface-tint);border-radius:var(--radius-sm);padding:0;margin:var(--space-xs) 0;overflow-x:auto;position:relative}
.msg-bot .msg-bubble pre.code-block .code-lang{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:3px 8px;background:rgba(0,0,0,.18);border-bottom:1px solid rgba(255,255,255,.06);font-size:.62rem;color:var(--text2);text-transform:uppercase;letter-spacing:.06em}
.msg-bot .msg-bubble pre.code-block .code-lang .copy-btn{position:static;opacity:1;background:none;padding:2px 6px}
.msg-bot .msg-bubble pre.code-block code{display:block;padding:var(--space-sm);font-size:.8em}
.msg-bot .msg-bubble h1,.msg-bot .msg-bubble h2,.msg-bot .msg-bubble h3{margin:.6rem 0 .3rem;line-height:1.3;color:var(--text)}
.msg-bot .msg-bubble h1{font-size:1.15em}.msg-bot .msg-bubble h2{font-size:1.05em}.msg-bot .msg-bubble h3{font-size:1em}
.msg-bot .msg-bubble blockquote{margin:var(--space-xs) 0;padding:2px 0 2px 10px;border-left:3px solid var(--muted);color:var(--text2);font-size:.9em}
/* Borderless, high-scannability tables for all-ages reading */
.msg-bot .msg-bubble .table-wrap{overflow-x:auto;margin:var(--space-xs) 0}
.msg-bot .msg-bubble table{border-collapse:collapse;width:100%;font-size:.8em}
.msg-bot .msg-bubble th,.msg-bot .msg-bubble td{border:none;padding:5px 12px 5px 0;text-align:left;vertical-align:top}
.msg-bot .msg-bubble thead th{background:none;color:var(--muted);font-weight:var(--fw-semibold);text-transform:uppercase;font-size:.62rem;letter-spacing:.04em;border-bottom:2px solid var(--chip-border)}
.msg-bot .msg-bubble tr:nth-child(even) td{background:var(--surface-tint);border-radius:3px}
.msg-bot .msg-bubble .task-line{display:block;margin:2px 0}
.msg-bot .msg-bubble .task-check{margin-right:6px;color:var(--primary)}
.msg-bot .msg-bubble .task-check.done{color:#3ca573}
.msg-bot .msg-bubble .msg-copy-btn{display:inline-flex;align-items:center;margin-top:6px;padding:2px 8px;background:none;border:1px solid var(--chip-border);border-radius:6px;color:var(--text2);font-size:.62rem;cursor:pointer;opacity:.55;transition:var(--transition-tactile)}
.msg-bot .msg-bubble .msg-copy-btn:hover,.msg-bot .msg-bubble .msg-copy-btn:focus-visible{opacity:1;color:var(--primary);border-color:var(--primary)}
.msg-bot .msg-bubble .msg-copy-btn.copied{color:#3ca573;border-color:rgba(60,169,115,.4);opacity:1}
.msg-bot .msg-bubble .msg-copy-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--primary-glow)}
.chat-input-bar{display:flex;gap:var(--space-xs);padding:var(--space-sm) 0;align-items:flex-end;max-width:800px;width:100%;margin:0 auto;position:relative}
.chat-plus-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--border);background:var(--surface2);color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--transition-tactile);margin-bottom:2px}
.chat-plus-btn:hover{border-color:var(--primary);color:var(--primary);transform:scale(1.05)}
.chat-plus-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--primary-glow)}
.chat-plus-btn svg{width:20px;height:20px}
.chat-plus-menu{position:absolute;bottom:calc(100% + 8px);left:0;min-width:208px;background:var(--surface-float);border:1px solid var(--border);border-radius:14px;padding:6px;box-shadow:var(--shadow-elevated);z-index:70;display:none;transform-origin:bottom left}
.chat-plus-menu.open{display:block;animation:rrMenuIn .16s ease}
.chat-plus-menu button{display:flex;align-items:center;gap:10px;width:100%;min-height:42px;padding:0 12px;border:none;background:transparent;color:var(--text);font-size:var(--fs-sm);font-weight:var(--fw-medium);font-family:var(--font-sans);border-radius:9px;cursor:pointer;text-align:left;transition:background .12s ease}
.chat-plus-menu button:hover{background:var(--surface2);color:var(--primary)}
.chat-plus-menu button svg{width:16px;height:16px;color:var(--text2)}
/* Mic morphs into send — one button, two stacked icons, slow smooth glide */
.chat-input-bar .voice-btn{margin-bottom:2px;overflow:visible;transition:transform .24s cubic-bezier(.34,1.56,.64,1),background .42s cubic-bezier(.25,1,.4,1),border-color .42s cubic-bezier(.25,1,.4,1),color .32s ease}
.chat-action-ic{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:transform .42s cubic-bezier(.25,1,.4,1),opacity .28s ease}
.chat-action-ic svg{width:18px;height:18px}
.chat-ic-send{opacity:0;transform:scale(.3) rotate(-40deg)}
.chat-input-bar.typing .voice-btn{background:var(--primary-dark);border-color:var(--primary-dark);color:#fff}
.chat-input-bar.typing .voice-btn:hover{box-shadow:0 4px 12px var(--primary-glow);transform:scale(1.06)}
.chat-input-bar.typing .chat-ic-mic{opacity:0;transform:scale(.3) rotate(40deg)}
.chat-input-bar.typing .chat-ic-send{opacity:1;transform:scale(1) rotate(0deg)}
@media(prefers-reduced-motion:reduce){.chat-action-ic{transition:opacity .2s ease;transform:none!important}}
.voice-btn.recording{display:flex!important}
.chat-input-bar textarea{flex:1;margin:0;padding:.7rem .9rem;background:var(--surface2);border:1px solid var(--chip-border);border-radius:var(--radius-xl);resize:none;min-height:44px;max-height:150px;overflow-y:auto;line-height:1.4;display:block}
.chat-input-bar textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow)}
.chat-input-bar textarea::placeholder{color:var(--text2);opacity:.8}
.chat-hint{max-width:800px;width:100%;margin:-4px auto 0;padding:0 4px;text-align:center;font-size:.7rem;color:var(--text2);opacity:.75;display:none}
@media(min-width:768px){.chat-hint{display:block}}
.new-chat-btn{display:inline-flex;align-items:center;gap:3px;padding:0 12px;height:40px;border-radius:999px;border:1px solid var(--border);background:var(--surface2);color:var(--text2);cursor:pointer;font-size:var(--fs-xs);font-weight:var(--fw-semibold);font-family:var(--font-sans);transition:var(--transition-tactile);flex-shrink:0}
.new-chat-btn:hover{border-color:var(--primary);color:var(--primary);transform:scale(1.03)}
.new-chat-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--primary-glow)}
.new-chat-btn svg{width:14px;height:14px}
.hist-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--border);background:var(--surface2);color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--transition-tactile)}
.hist-btn:hover{border-color:var(--primary);color:var(--primary)}
.hist-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--primary-glow)}
.hist-btn svg{width:18px;height:18px}
.conv-item{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-lg);cursor:pointer;transition:var(--transition-tactile)}
.conv-item:hover{background:var(--surface2)}
.conv-item.active{background:var(--primary-glow)}
.conv-item .conv-main{flex:1;min-width:0}
.conv-item .conv-title{font-size:var(--fs-sm);font-weight:var(--fw-semibold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv-item .conv-preview{font-size:var(--fs-xs);color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.conv-item .conv-time{font-size:var(--fs-xs);color:var(--muted);flex-shrink:0}
.conv-del{width:30px;height:30px;border:none;background:transparent;color:var(--muted);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--transition-tactile)}
.conv-del:hover{color:var(--danger);background:var(--bg2)}
.conv-del svg{width:16px;height:16px}
@media (pointer:coarse){.chat-input-bar textarea{font-size:max(16px,var(--fs-base))}}
.chat-input-bar .send-btn{width:40px;height:40px;border-radius:50%;padding:0;display:flex;align-items:center;justify-content:center;background:var(--primary-dark);border:none;color:#fff;cursor:pointer;font-size:1.1rem;transition:var(--transition-tactile);flex-shrink:0}
.chat-input-bar .send-btn:hover{box-shadow:0 4px 12px var(--primary-glow);transform:scale(1.1)}
.chat-input-bar .send-btn:active{transform:scale(.95)}
.chat-input-bar .send-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--primary-glow)}
.voice-btn{width:40px;height:40px;border-radius:50%;border:2px solid var(--border);background:var(--surface2);color:var(--text2);cursor:pointer;font-size:1.1rem;transition:var(--transition-tactile);display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative}
.voice-btn::before,.voice-btn::after{content:'';position:absolute;top:50%;left:50%;width:100%;height:100%;border-radius:50%;border:2px solid var(--danger);transform:translate(-50%,-50%);opacity:0;pointer-events:none}
.voice-btn:hover{border-color:var(--primary);color:var(--primary)}
.voice-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--primary-glow)}
.voice-btn.recording{background:var(--danger);border-color:var(--danger);color:#fff;animation:voicePulse 1.2s infinite}
.voice-btn.recording::before,.voice-btn.recording::after{animation:voiceRing 1.8s ease-out infinite}
.voice-btn.recording::after{animation-delay:.9s}
@keyframes voicePulse{0%,100%{box-shadow:0 0 0 0 rgba(229,107,85,.4)}50%{box-shadow:0 0 0 12px rgba(229,107,85,0)}}
@keyframes voiceRing{0%{transform:translate(-50%,-50%) scale(1);opacity:.7}100%{transform:translate(-50%,-50%) scale(2.4);opacity:0}}
.typing-indicator{display:inline-flex;gap:4px;padding:6px 8px}
.typing-indicator span{width:7px;height:7px;background:var(--muted);border-radius:50%;animation:typingBounce .8s infinite alternate}
.typing-indicator span:nth-child(2){animation-delay:.2s}
.typing-indicator span:nth-child(3){animation-delay:.4s}
@keyframes typingBounce{from{opacity:.3;transform:translateY(0)}to{opacity:1;transform:translateY(-4px)}}

/* ===== LIST ===== */
.list-item{background:var(--surface);border-radius:var(--radius-md);padding:var(--space-sm) var(--space-md);min-height:var(--row-h);margin-bottom:var(--space-xs);display:flex;align-items:center;gap:var(--space-md);font-size:var(--fs-sm);transition:var(--transition-tactile);border:1px solid var(--border)}
.list-item:hover{transform:translateX(4px);box-shadow:var(--shadow-elevated)}
.list-item:active{transform:scale(.99)}
.list-item:focus-visible{outline:none;box-shadow:0 0 0 3px var(--primary-glow);border-color:var(--primary)}
.list-item .item-info{flex:1;min-width:0}
.list-item .item-info .item-name{font-weight:var(--fw-semibold);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-ui)}
.list-item .item-loc{color:var(--text2);font-size:var(--fs-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list-item .item-actions{display:flex;gap:6px;align-items:center;flex-shrink:0}
.item-action-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);color:var(--text2);cursor:pointer;transition:var(--transition-tactile);flex-shrink:0}
.item-action-btn:hover,.item-action-btn:focus-visible{border-color:var(--primary);color:var(--primary);background:var(--surface2);transform:scale(1.1)}
.item-action-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--primary-glow)}
.item-action-btn.danger{color:var(--text2)}
.item-action-btn.danger:hover{border-color:var(--danger);color:var(--danger);background:rgba(229,107,85,.06);box-shadow:0 0 0 3px rgba(229,107,85,.12);transform:scale(1.1)}
.item-action-btn.danger:focus-visible{box-shadow:0 0 0 3px rgba(229,107,85,.3)}
#inventoryContent{max-width:720px}
@media(min-width:640px){#inventoryContent{max-width:none}}
/* ===== PLACES (inventory) ===== */
.view-toggle{display:inline-flex;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-md);padding:3px;gap:2px}
.view-toggle button{padding:.35rem .9rem;border:none;background:none;border-radius:var(--radius-sm);color:var(--muted);font-size:var(--fs-sm);cursor:pointer;font-family:var(--font-sans);transition:var(--transition-tactile)}
.view-toggle button.active{background:var(--surface);color:var(--text);font-weight:var(--fw-semibold);box-shadow:var(--shadow-ambient)}
.view-toggle button:focus-visible{outline:none;box-shadow:0 0 0 3px var(--primary-glow)}

/* ===== INVENTORY — Gestalt hierarchy on the ambient background.
   The panel itself is transparent: a solid navy slab read as a "patch"
   stuck over the app gradient. Only the cards carry surface color. */
#panelInventory{--inv-card:#23253b;--inv-border:rgba(255,255,255,.08);--inv-text:#ffffff;--inv-text2:#9ca3af}
#panelInventory>div,#panelInventory .empty-state,#panelInventory .place-card,#panelInventory .card{background:transparent}
body[data-theme="light"] #panelInventory{--inv-card:#ffffff;--inv-border:#E6E0DA;--inv-text:#2D2926;--inv-text2:#6E6763}
#panelInventory .inv-search-wrap{position:relative;display:flex;align-items:center;margin-bottom:10px}
#panelInventory .inv-search-ic{position:absolute;left:14px;width:16px;height:16px;color:var(--inv-text2);pointer-events:none}
#panelInventory #invSearchBox{background:var(--inv-card);border:1px solid var(--inv-border);border-radius:12px;color:var(--inv-text);padding-left:40px;padding-right:44px;margin-bottom:0}
#panelInventory #invSearchBox::placeholder{color:var(--inv-text2)}
#panelInventory .inv-sort-btn{position:absolute;right:6px;width:34px;height:34px;border-radius:9px;border:none;background:transparent;color:var(--inv-text2);cursor:pointer;display:none;align-items:center;justify-content:center;transition:var(--transition-tactile)}
#panelInventory .inv-sort-btn:hover{color:var(--inv-text);background:rgba(255,255,255,.06)}
body[data-theme="light"] #panelInventory .inv-sort-btn:hover{background:rgba(45,41,38,.05)}
#panelInventory .inv-sort-btn svg{width:15px;height:15px}
.inv-sort-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:150px;background:var(--inv-card);border:1px solid var(--inv-border);border-radius:12px;padding:5px;box-shadow:0 12px 32px rgba(0,0,0,.4);z-index:40;display:none}
.inv-sort-menu.open{display:block;animation:rrMenuIn .15s ease}
.inv-sort-menu button{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:38px;padding:0 12px;border:none;background:transparent;color:var(--inv-text);font-size:var(--fs-sm);font-family:var(--font-sans);border-radius:8px;cursor:pointer}
.inv-sort-menu button:hover{background:rgba(255,255,255,.06)}
body[data-theme="light"] .inv-sort-menu button:hover{background:rgba(45,41,38,.05)}
.inv-sort-menu button.active{color:#10b981;font-weight:600}
/* Master toggle: full-width segmented control, visually distinct from chips.
   #invFilters prefix (ID specificity) so the global .filter-row button rules
   (later in this file) cannot re-paint these as terracotta slabs. */
.inv-seg{display:flex;width:100%;background:var(--inv-card);border:1px solid var(--inv-border);border-radius:12px;padding:4px;gap:4px;margin-bottom:10px}
#invFilters .inv-seg button{flex:1;min-height:40px;display:flex;align-items:center;justify-content:center;gap:7px;border:none;background:transparent;color:var(--inv-text2);font-size:var(--fs-sm);font-weight:600;font-family:var(--font-sans);border-radius:9px;cursor:pointer;transition:color .15s ease,background .15s ease;transform:none}
#invFilters .inv-seg button:hover{background:rgba(255,255,255,.05);color:var(--inv-text);transform:none;box-shadow:none;border-color:transparent}
#invFilters .inv-seg button svg{width:15px;height:15px}
#invFilters .inv-seg button.active{background:rgba(255,255,255,.07);border-color:transparent;color:var(--inv-text);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);transform:none}
#invFilters .inv-seg button.active:hover{background:rgba(255,255,255,.09)}
body[data-theme="light"] #invFilters .inv-seg button.active{background:#fff;box-shadow:0 1px 3px rgba(45,41,38,.12)}
#invFilters .inv-seg button:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(16,185,129,.22)}
/* Category chips: single horizontally scrollable row */
.inv-chips-row{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 2px 6px;margin-bottom:6px}
.inv-chips-row::-webkit-scrollbar{display:none}
#invFilters .inv-chip{flex:0 0 auto;min-height:34px;min-width:0;padding:0 16px;border-radius:999px;border:1px solid var(--inv-border);background:var(--inv-card);color:var(--inv-text2);font-size:var(--fs-xs);font-weight:600;font-family:var(--font-sans);cursor:pointer;transition:border-color .15s ease,color .15s ease,background .15s ease;white-space:nowrap;transform:none}
#invFilters .inv-chip:hover{color:var(--inv-text);background:var(--inv-card);border-color:var(--inv-border-strong,rgba(255,255,255,.16));transform:none;box-shadow:none}
#invFilters .inv-chip.active{background:rgba(16,185,129,.14);border-color:rgba(16,185,129,.45);color:#10b981;transform:none;box-shadow:none}
body[data-theme="light"] #invFilters .inv-chip.active{background:rgba(16,185,129,.1)}
#invFilters .inv-chip:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(16,185,129,.22)}
/* Rows: swipe-left reveals actions; nothing persistent, nothing green */
.item-swipe{position:relative;overflow:hidden;border-radius:var(--radius-md);margin-bottom:var(--space-xs)}
.item-swipe-actions{position:absolute;inset:0 0 0 auto;display:flex;gap:6px;align-items:stretch;justify-content:flex-end;padding-left:8px}
.swipe-btn{width:48px;border:none;border-radius:var(--radius-md);cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;transition:filter .15s ease}
.swipe-btn.edit{background:#3d6fa8}
.swipe-btn.danger{background:rgba(229,107,85,.9)}
.swipe-btn:hover{filter:brightness(1.1)}
.swipe-btn svg{width:16px;height:16px}
.item-swipe .swipe-content{position:relative;z-index:1;background:var(--inv-card);border:1px solid var(--inv-border);transition:transform .22s ease}
.item-swipe.swiping .swipe-content{transition:none}
.item-swipe.swipe-open .swipe-content{transform:translateX(-104px)}
.item-swipe .list-item{margin-bottom:0;border-radius:var(--radius-md);min-height:56px}
#panelInventory .list-item .item-name{color:var(--inv-text)}
#panelInventory .list-item .item-loc{color:var(--inv-text2)}
#panelInventory .list-item:hover{transform:none;box-shadow:none;border-color:rgba(255,255,255,.14)}
body[data-theme="light"] #panelInventory .list-item:hover{border-color:#d6c9bb}
.item-status{flex-shrink:0}
/* Single whisper-quiet affordance per row: Edit/Delete live in its popover.
   The swipe actions underneath stay hidden until a deliberate swipe. */
.inv-kebab{width:30px;height:30px;min-width:0!important;min-height:0!important;flex-shrink:0;border:none;background:transparent;color:rgba(156,163,175,.45);border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .15s ease,background .15s ease;margin-left:2px}
.inv-kebab:hover{color:var(--inv-text);background:rgba(255,255,255,.07)}
body[data-theme="light"] .inv-kebab{color:rgba(110,103,99,.5)}
body[data-theme="light"] .inv-kebab:hover{color:var(--text);background:rgba(45,41,38,.06)}
.inv-kebab:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(16,185,129,.22)}
.inv-kebab svg{width:15px;height:15px}
.inv-row-menu{position:fixed;min-width:156px;background:var(--inv-card);border:1px solid var(--inv-border);border-radius:12px;padding:5px;box-shadow:0 12px 32px rgba(0,0,0,.4);z-index:80;display:none}
.inv-row-menu.open{display:block;animation:rrMenuIn .15s ease}
.inv-row-menu button{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:0 12px;border:none;background:transparent;color:var(--inv-text);font-size:var(--fs-sm);font-family:var(--font-sans);border-radius:8px;cursor:pointer;text-align:left;transition:background .12s ease}
.inv-row-menu button:hover{background:rgba(255,255,255,.06)}
body[data-theme="light"] .inv-row-menu button:hover{background:rgba(45,41,38,.05)}
.inv-row-menu button svg{width:15px;height:15px;color:var(--inv-text2)}
.inv-row-menu button.danger{color:#f87171}
.inv-row-menu button.danger svg{color:#f87171}
/* Places: minimal cards + whisper-quiet drag handle */
#panelInventory .place-card{position:relative;background:var(--inv-card);border:1px solid var(--inv-border)}
#panelInventory .place-card .place-name{color:var(--inv-text)}
#panelInventory .place-card .place-meta{color:var(--inv-text2)}
.place-grip{position:absolute;top:8px;right:8px;color:var(--inv-text2);opacity:.4;pointer-events:none}
#panelInventory .empty-state{background:transparent;color:var(--inv-text2)}
#panelInventory .empty-state .empty-title{color:var(--inv-text)}
/* ===== SHOPPING — quiet checklist. Everything on the list is implicitly
   pending (no badges) and completion is a single circular checkbox, not a
   green pill. Completions collect in a collapsed drawer; restock suggestions
   hide in an accordion with one Add all action. */
#panelShopping{--shop-card:#23253b;--shop-border:rgba(255,255,255,.08);--shop-ring:rgba(255,255,255,.28);--shop-text:#ffffff;--shop-text2:#9ca3af;--shop-dim:#6b7280;--shop-accent:#10b981}
body[data-theme="light"] #panelShopping{--shop-card:#ffffff;--shop-border:#E6E0DA;--shop-ring:#b8ada2;--shop-text:#2D2926;--shop-text2:#6E6763;--shop-dim:#9a918b;--shop-accent:#059669}
.shop-search-wrap{position:relative;display:flex;align-items:center;margin-bottom:10px}
.shop-search-ic{position:absolute;left:14px;width:16px;height:16px;color:var(--shop-text2);pointer-events:none}
#shopSearchBox{background:var(--shop-card);border:1px solid var(--shop-border);border-radius:12px;color:var(--shop-text);padding-left:40px;margin-bottom:0}
#shopSearchBox::placeholder{color:var(--shop-dim)}
#panelShopping .card{background:var(--shop-card);border:1px solid var(--shop-border)}
.shop-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);margin:2px 2px var(--space-xs)}
.shop-head-count{font-size:var(--fs-sm);color:var(--shop-text2)}
.shop-markall{background:none;border:none;color:var(--shop-text2);font-size:var(--fs-sm);font-weight:600;font-family:var(--font-sans);cursor:pointer;padding:4px 8px;border-radius:8px;transition:color .15s ease,background .15s ease}
.shop-markall:hover{color:var(--shop-text);background:rgba(255,255,255,.06)}
body[data-theme="light"] .shop-markall:hover{background:rgba(45,41,38,.05)}
.shop-list{padding:2px 0;overflow:hidden}
/* Swipe left→right reveals Delete underneath (mirrors Stock's swipe-left) */
.shop-swipe{position:relative;overflow:hidden}
.shop-swipe-actions{position:absolute;top:0;bottom:0;left:0;width:76px;display:flex;align-items:center;justify-content:center}
.shop-swipe .swipe-content{transition:transform .22s ease;background:var(--shop-card)}
.shop-swipe.swiping .swipe-content{transition:none}
.shop-swipe.swipe-open .swipe-content{transform:translateX(76px)}
.shop-row{position:relative;display:flex;align-items:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-md);min-height:56px}
.shop-swipe:not(:last-child) .shop-row{border-bottom:1px solid var(--shop-border)}
.shop-info{flex:1;min-width:0}
.shop-name{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative;font-weight:var(--fw-semibold);font-size:var(--fs-base);color:var(--shop-text);transition:color .3s ease}
.shop-name::after{content:"";position:absolute;left:0;top:50%;height:1.5px;width:100%;background:var(--shop-text2);transform:scaleX(0);transform-origin:left center;transition:transform .32s ease}
.shop-sub{color:var(--shop-text2);font-size:var(--fs-xs);margin-top:1px}
/* The one affordance per row: a circular checkbox (44px tap target, 24px ring) */
.shop-check{width:44px;height:44px;border:none;background:transparent;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;flex-shrink:0;margin-right:-8px}
.shop-ring{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--shop-ring);color:transparent;display:flex;align-items:center;justify-content:center;transition:background .2s ease,border-color .2s ease,color .2s ease,transform .15s ease}
.shop-ring svg{width:13px;height:13px}
.shop-check:active .shop-ring{transform:scale(.88)}
.shop-check:focus-visible{outline:none}
.shop-check:focus-visible .shop-ring{box-shadow:0 0 0 3px rgba(16,185,129,.25)}
.shop-swipe.done .shop-ring{background:var(--shop-accent);border-color:var(--shop-accent);color:#fff}
.shop-swipe.done .shop-ring svg{stroke-width:3}
.shop-swipe.done .shop-name{color:var(--shop-text2)}
.shop-swipe.done .shop-name::after{transform:scaleX(1)}
.shop-swipe.done .shop-sub{opacity:.5}
/* Desktop path for "no longer needed": quiet danger action inside the buy sheet */
.shop-notneeded{display:block;width:100%;margin-top:var(--space-sm);background:none;border:none;color:#e56b55;font-size:var(--fs-sm);font-weight:600;font-family:var(--font-sans);cursor:pointer;padding:10px;border-radius:8px;transition:background .15s ease}
.shop-notneeded:hover{background:rgba(229,107,85,.08)}
/* Completed drawer: collapsed session receipt of what was bought */
.shop-done{padding:0;overflow:hidden}
.shop-done-head{display:flex;align-items:center;gap:9px;width:100%;min-height:48px;padding:0 var(--space-md);background:transparent;border:none;cursor:pointer;font-family:var(--font-sans);color:var(--shop-text2);font-size:var(--fs-sm);font-weight:600;text-align:left}
.shop-done-ic{width:20px;height:20px;border-radius:50%;background:rgba(16,185,129,.16);color:var(--shop-accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.shop-done-ic svg{width:11px;height:11px;stroke-width:3}
.shop-done-count{min-width:20px;height:20px;border-radius:10px;background:rgba(255,255,255,.07);color:var(--shop-text2);font-size:var(--fs-xs);font-weight:600;display:flex;align-items:center;justify-content:center;padding:0 7px}
body[data-theme="light"] .shop-done-count,body[data-theme="light"] .shop-sugg-count{background:rgba(45,41,38,.06)}
.shop-done-chev{margin-left:auto;display:flex;color:var(--shop-dim);transition:transform .2s ease}
.shop-done-chev svg,.shop-sugg-chev svg{width:15px;height:15px}
.shop-done.open .shop-done-chev{transform:rotate(180deg)}
.shop-done-list{padding:0 var(--space-md) var(--space-sm)}
.shop-done-row{display:flex;align-items:baseline;gap:8px;padding:7px 0;border-top:1px solid var(--shop-border)}
.shop-done-name{color:var(--shop-text2);text-decoration:line-through;text-decoration-color:var(--shop-dim);font-size:var(--fs-sm)}
.shop-done-sub{color:var(--shop-dim);font-size:var(--fs-xs);margin-left:auto;text-align:right;flex-shrink:0}
/* Restock suggestions: collapsed accordion, Add all as the single batch action */
.shop-sugg{padding:0;overflow:hidden}
.shop-sugg-head{display:flex;align-items:center;padding-right:6px}
.shop-sugg-toggle{flex:1;min-width:0;display:flex;align-items:center;gap:9px;min-height:48px;padding-left:var(--space-md);background:transparent;border:none;cursor:pointer;font-family:var(--font-sans);color:var(--shop-text2);font-size:var(--fs-sm);font-weight:600;text-align:left}
.shop-sugg-chev{display:flex;color:var(--shop-dim);transition:transform .2s ease}
.shop-sugg.open .shop-sugg-chev{transform:rotate(180deg)}
.shop-sugg-count{min-width:20px;height:20px;border-radius:10px;background:rgba(255,255,255,.07);color:var(--shop-text2);font-size:var(--fs-xs);font-weight:600;display:flex;align-items:center;justify-content:center;padding:0 7px}
.shop-sugg-addall{background:none;border:none;color:var(--shop-accent);font-size:var(--fs-sm);font-weight:600;font-family:var(--font-sans);cursor:pointer;padding:6px 10px;border-radius:8px;transition:background .15s ease,opacity .15s ease}
.shop-sugg-addall:hover{background:rgba(16,185,129,.1)}
.shop-sugg-addall:disabled{opacity:.45;cursor:default}
.shop-sugg-list{padding:0 var(--space-md) var(--space-xs)}
.shop-sugg-row{display:flex;align-items:center;gap:var(--space-sm);padding:5px 0;min-height:48px}
.shop-sugg-row:not(:last-child){border-bottom:1px solid var(--shop-border)}
.shop-sugg-info{flex:1;min-width:0}
.shop-sugg-name{color:var(--shop-text2);font-size:var(--fs-sm);font-weight:var(--fw-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shop-sugg-sub{color:var(--shop-dim);font-size:var(--fs-xs)}
.shop-sugg-add{width:34px;height:34px;min-width:34px!important;min-height:34px!important;border-radius:50%;border:1px solid var(--shop-ring);background:transparent;color:var(--shop-text2);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;padding:0;transition:border-color .15s ease,color .15s ease,background .15s ease,transform .15s ease}
.shop-sugg-add svg{width:14px;height:14px}
.shop-sugg-add:hover{border-color:var(--shop-accent);color:var(--shop-accent);background:rgba(16,185,129,.1)}
.shop-sugg-add:active{transform:scale(.92)}
.shop-sugg-add:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(16,185,129,.22)}
/* Creation bottom sheet (central + FAB) */
.create-sheet-overlay{position:fixed;inset:0;z-index:220;display:none;align-items:flex-end;justify-content:center;background:rgba(10,11,20,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .15s ease}
.create-sheet-overlay.show{display:flex}
.create-sheet{width:100%;max-width:430px;margin:0 12px calc(14px + env(safe-area-inset-bottom));background:#23253b;border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:10px 14px calc(10px + env(safe-area-inset-bottom)*0);box-shadow:0 18px 48px rgba(0,0,0,.5);animation:rrSheetIn .2s ease}
body[data-theme="light"] .create-sheet{background:#fff;border-color:#E6E0DA}
@media(prefers-reduced-motion:reduce){.create-sheet{animation:none}}
.create-sheet-title{font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);padding:6px 6px 8px}
.create-opt{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:8px 10px;border:none;background:transparent;color:var(--text);font-family:var(--font-sans);border-radius:12px;cursor:pointer;text-align:left;transition:background .12s ease}
.create-opt:hover{background:var(--surface2)}
.create-opt:focus-visible{outline:none;box-shadow:0 0 0 3px var(--primary-glow)}
.create-opt-ic{width:38px;height:38px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:11px;background:var(--surface-tint,rgba(120,70,40,.06));color:var(--primary)}
.create-opt-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.create-opt-text strong{font-size:var(--fs-sm);font-weight:var(--fw-semibold)}
.create-opt-text span:last-child{font-size:var(--fs-xs);color:var(--muted)}
.place-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-sm)}
@media(min-width:640px){.place-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.place-grid{grid-template-columns:repeat(4,1fr)}}
.place-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-md);display:flex;flex-direction:column;gap:3px;cursor:grab;transition:var(--transition-tactile);box-shadow:var(--shadow-ambient);min-height:106px;text-align:left;font-family:var(--font-sans);touch-action:manipulation;-webkit-user-drag:element}
.place-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover);border-color:var(--primary)}
.place-card:focus-visible{outline:none;box-shadow:0 0 0 3px var(--primary-glow)}
.place-card.empty{opacity:.55}
.place-card.dragging{opacity:.4}
.place-card.drag-over{outline:2px dashed var(--primary);outline-offset:3px;border-color:var(--primary)!important;transform:scale(1.03)}
.place-card.drag-over-forbidden{opacity:.35}
.place-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);margin-bottom:var(--space-sm);flex-wrap:wrap}
.view-hint{font-size:var(--fs-xs);color:var(--muted);display:inline-flex;align-items:center;gap:5px}
.view-hint svg{width:14px;height:14px}
.crumb-seg{background:none;border:none;color:var(--text2);font-weight:var(--fw-semibold);cursor:pointer;padding:2px 4px;border-radius:var(--radius-sm);font-family:var(--font-sans)}
.crumb-seg:hover{color:var(--primary);background:var(--bg2)}
.crumb-sep{color:var(--muted)}
.place-icon{width:40px;height:40px;border-radius:var(--radius-md);background:var(--surface-tint);color:var(--accent-text);display:flex;align-items:center;justify-content:center;margin-bottom:2px}
.place-icon svg{width:20px;height:20px}
.place-name{font-weight:var(--fw-semibold);color:var(--text);font-size:var(--fs-base)}
.place-meta{font-size:var(--fs-xs);color:var(--muted)}
.place-low{color:var(--warn);font-weight:var(--fw-semibold)}
.crumb-bar{display:flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-sm)}
.crumb-path{display:inline-flex;align-items:center;gap:6px;font-weight:var(--fw-semibold);color:var(--text)}
.crumb-path svg{width:18px;height:18px;color:var(--accent-text)}
/* ===== EDIT MODAL (inventory) ===== */
.mctx{font-size:var(--fs-xs);color:var(--muted);margin:-4px 0 var(--space-md)}
.detail-row{display:flex;justify-content:space-between;align-items:center;gap:var(--space-md);padding:8px 0;border-bottom:1px solid var(--border,#eee);font-size:var(--fs-sm);flex-wrap:wrap;row-gap:4px}
.detail-row>span:first-child{flex:1 1 auto;min-width:0}
.detail-val{text-align:right;font-weight:500;flex-shrink:0;white-space:nowrap}
.detail-sec-title{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-top:var(--space-md);padding-bottom:4px;border-bottom:1px solid var(--border,#eee)}
.detail-notes{margin-top:var(--space-sm);font-size:var(--fs-sm);color:var(--muted);background:var(--bg2,#f6f6f6);padding:8px var(--space-sm);border-radius:var(--radius-sm)}
.qty-stepper{display:flex;align-items:center;gap:var(--space-sm);margin:0 0 var(--space-sm)}
.qty-stepper button.step{width:44px;height:44px;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--bg2);font-size:1.25rem;cursor:pointer;color:var(--text);display:flex;align-items:center;justify-content:center;transition:var(--transition-tactile)}
.qty-stepper button.step:hover{border-color:var(--primary);color:var(--primary)}
.qty-stepper input{flex:1;text-align:center;font-size:var(--fs-lg);font-weight:var(--fw-bold);margin:0}
.status-seg{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-xs);margin:0 0 var(--space-sm)}
.status-seg button{padding:.5rem .2rem;border:1px solid var(--border);background:var(--bg2);border-radius:var(--radius-sm);font-size:var(--fs-xs);font-weight:600;color:var(--muted);cursor:pointer;font-family:var(--font-sans);transition:var(--transition-tactile)}
.status-seg button.active[data-status="good"]{background:var(--success-pill-bg);color:var(--success);border-color:var(--success)}
.status-seg button.active[data-status="low"]{background:rgba(240,160,48,.12);color:var(--warn);border-color:var(--warn)}
.status-seg button.active[data-status="empty"]{background:rgba(229,107,85,.12);color:var(--danger);border-color:var(--danger)}
.status-seg button.active[data-status="needs_replacement"]{background:rgba(232,104,90,.12);color:var(--accent-text);border-color:var(--accent-text)}
.chip-row{display:flex;flex-wrap:wrap;gap:var(--space-xs);margin:0 0 var(--space-sm)}
.chip-row button{padding:.35rem .75rem;border:1px solid var(--chip-border);background:var(--surface2);border-radius:999px;font-size:var(--fs-xs);color:var(--text2);cursor:pointer;font-family:var(--font-sans);transition:var(--transition-tactile)}
.chip-row button.active{background:var(--primary-dark);border-color:var(--primary-dark);color:#fff}
.photo-slot{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm);border:1px dashed var(--border);border-radius:var(--radius-md);color:var(--muted);font-size:var(--fs-xs);cursor:not-allowed;margin:var(--space-sm) 0}
.photo-slot svg{width:16px;height:16px;flex-shrink:0}
/* Truly centered empties (inventory + shopping) */
#inventoryContent .empty-state,#shoppingContent .empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:38vh;text-align:center}
#inventoryContent .empty-icon,#shoppingContent .empty-icon{width:64px;height:64px;border-radius:50%;background:var(--surface-tint);display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-sm);font-size:1.4rem;color:var(--text2)}

/* ===== BADGES ===== */
.badge{display:inline-flex;align-items:center;padding:2px var(--space-sm);border-radius:var(--radius-sm);font-size:var(--fs-xs);font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:.5px}
.badge-empty,.badge-needs_replacement{background:rgba(229,107,85,.12);color:var(--danger)}
.badge-low{background:rgba(240,160,48,.12);color:var(--warn)}
.badge-good{background:var(--success-pill-bg);color:var(--success)}
.badge-pending{background:rgba(240,160,48,.12);color:var(--warn)}
.badge-active{background:var(--success-pill-bg);color:var(--success)}
.badge-suspended{background:rgba(176,144,128,.12);color:var(--muted)}
.badge-private{background:rgba(232,104,90,.12);color:var(--accent-text)}
.badge-recurring{background:rgba(91,143,201,.12);color:var(--info)}

.loc-chip-container{display:flex;flex-wrap:wrap;gap:var(--space-sm);padding:var(--space-xs) 0 var(--space-sm)}
.loc-chip{display:inline-flex;align-items:center;gap:4px;max-width:200px;padding:4px 6px 4px 10px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-lg);font-size:var(--fs-sm);color:var(--text);transition:var(--transition-tactile)}
.loc-chip-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.loc-chip-remove{display:flex;align-items:center;justify-content:center;width:18px;height:18px;border:none;background:var(--bg2);border-radius:50%;cursor:pointer;color:var(--muted);font-size:12px;line-height:1;padding:0;flex-shrink:0;transition:var(--transition-tactile)}
.loc-chip-remove:hover{background:var(--danger);color:#fff;box-shadow:0 0 0 3px rgba(229,107,85,.2);transform:scale(1.15)}
.loc-chip-remove:focus-visible{outline:none;box-shadow:0 0 0 3px var(--primary-glow)}
.loc-empty{font-size:var(--fs-sm);color:var(--muted);font-style:italic;padding:var(--space-sm) 0}
.loc-add-row{display:flex;gap:var(--space-sm);margin-top:var(--space-sm)}
.loc-input{flex:1;margin:0;padding:.7rem .85rem;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text);font-size:var(--fs-base);outline:none;transition:var(--transition-tactile);font-family:var(--font-sans)}
.loc-input:hover{border-color:var(--text2)}
.loc-input:focus-visible{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow)}

/* ===== BRIEF ===== */
.brief-spend{background:var(--hero-bg);border-radius:var(--radius-xl);padding:var(--space-lg);margin-bottom:var(--space-md);text-align:center;box-shadow:var(--shadow-elevated);position:relative;overflow:hidden}
.brief-spend::after{content:'';position:absolute;top:-50%;right:-50%;width:140%;height:140%;background:radial-gradient(circle at 70% 20%,var(--primary-glow) 0%,transparent 75%);pointer-events:none}
.brief-spend .spend-amount{font-size:48px;line-height:1.1;font-weight:var(--fw-bold);background:linear-gradient(135deg,var(--primary),var(--warn));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.brief-spend .spend-label{font-size:var(--fs-xs);color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-top:4px}
.brief-spend .spend-sub{font-size:20px;font-weight:500;color:var(--text2);margin-top:var(--space-xs)}
.brief-spend .spend-progress{margin-top:var(--space-md)}
.brief-spend .spend-progress-track{height:8px;border-radius:8px;background:var(--bg2);border:1px solid var(--border);overflow:hidden}
.brief-spend .spend-progress-fill{height:100%;border-radius:8px;background:linear-gradient(90deg,var(--primary),var(--primary-light));transition:width .6s cubic-bezier(.4,0,.2,1)}
.brief-spend .spend-progress-meta{display:flex;justify-content:space-between;align-items:center;font-size:var(--fs-xs);color:var(--muted);margin-top:6px}

/* ===== BRIEF V2 ===== */
.spend-progress-meta{display:flex;justify-content:space-between;align-items:center;gap:var(--space-sm)}
/* Action-feed buttons must never be hover-gated — they ARE the point of the feed */
#panelBrief .attention-actions{opacity:1}
.brief-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-sm);margin-bottom:var(--space-sm)}
.brief-greeting{font-size:var(--fs-lg);font-weight:var(--fw-bold);color:var(--text)}
.brief-datesub{font-size:var(--fs-xs);color:var(--muted);flex-shrink:0}
.brief-hero2{margin-bottom:var(--space-sm)}
.bh-amtrow{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-sm);margin-bottom:var(--space-sm)}
.bh-amount{font-size:var(--fs-2xl);font-weight:var(--fw-bold);background:linear-gradient(135deg,var(--primary),var(--warn));-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1.1}
.bh-sub{font-size:var(--fs-xs);color:var(--muted);margin-top:2px}
.bh-mine{font-size:var(--fs-xs);color:var(--muted);text-align:right;flex-shrink:0}
.brief-delta{font-size:var(--fs-xs);color:var(--muted)}
.brief-delta.over{color:var(--danger);font-weight:var(--fw-semibold)}
.brief-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:var(--space-sm);margin-bottom:var(--space-md)}
.brief-tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-sm) var(--space-md);display:flex;flex-direction:column;gap:2px;align-items:flex-start;cursor:pointer;transition:var(--transition-tactile);font-family:var(--font-sans);text-align:left}
.brief-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover);border-color:var(--primary)}
.brief-tile:focus-visible{outline:none;box-shadow:0 0 0 3px var(--primary-glow)}
.tile-num{font-size:var(--fs-lg);font-weight:var(--fw-bold);color:var(--text)}
.tile-label{font-size:var(--fs-xs);color:var(--muted)}
.brief-grid-2col{display:grid;gap:var(--space-sm);grid-template-columns:1fr}
@media(min-width:640px){.brief-grid-2col{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){#panelBrief>div{max-width:960px;margin:0 auto}}
.item-name2{font-weight:var(--fw-semibold);font-size:var(--fs-sm);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.act-row{display:flex;align-items:center;gap:var(--space-sm);padding:7px 0;border-bottom:1px solid var(--border)}
.act-row:last-child{border-bottom:none}
.act-av{width:26px;height:26px;border-radius:50%;flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--bg2);color:var(--text2);font-size:.7rem;font-weight:var(--fw-bold)}
.act-av img{width:100%;height:100%;object-fit:cover;display:block}
.act-text{flex:1;min-width:0;font-size:var(--fs-sm);color:var(--text2);line-height:1.4;overflow:hidden}
.act-when{flex-shrink:0;font-size:var(--fs-xs);color:var(--muted);white-space:nowrap}
.act-toolbar{display:flex;gap:var(--space-sm);margin-bottom:var(--space-xs)}
.act-toolbar input{flex:1;margin:0;min-width:0}
.act-toolbar select{width:auto;flex-shrink:0;margin:0;max-width:130px}

/* ===== EXPENSE TOTAL ===== */
.expense-summary{background:var(--hero-bg);border-radius:var(--radius-xl);padding:var(--space-lg);margin-bottom:var(--space-md);text-align:center;box-shadow:var(--shadow-elevated)}
.expense-summary .exp-amount{font-size:var(--fs-3xl);font-weight:var(--fw-bold);color:var(--success)}
.expense-summary .exp-label{font-size:var(--fs-xs);color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.expense-row{position:relative;overflow:hidden;background:var(--surface);border-radius:var(--radius-sm);padding:var(--space-sm) var(--space-md);min-height:var(--row-h);margin-bottom:var(--space-xs);display:flex;justify-content:space-between;align-items:center;gap:var(--space-sm);font-size:var(--fs-sm);touch-action:pan-y}
.expense-row:nth-child(even){background:var(--surface-tint)}
.expense-row .cat{color:var(--muted);font-size:var(--fs-xs)}
.expense-row .row-right{display:flex;align-items:center;gap:6px;flex-shrink:0}
.expense-row .row-amount{font-weight:var(--fw-medium);white-space:nowrap}
.exp-cat-icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-md);background:var(--surface-tint);color:var(--text2);flex-shrink:0}
.row-kebab{display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:transparent;border:none;border-radius:50%;color:var(--muted);cursor:pointer;opacity:.6;transition:var(--transition-tactile);flex-shrink:0}
.row-kebab:hover,.row-kebab:focus-visible{opacity:1;color:var(--primary);background:var(--surface-tint)}
.row-actions{position:absolute;top:0;right:0;bottom:0;display:flex;align-items:center;gap:6px;padding:0 10px;background:var(--surface2);border-left:1px solid var(--border);box-shadow:var(--shadow-elevated);transform:translateX(100%);transition:transform .22s ease;z-index:5}
.expense-row.row-open .row-actions{transform:translateX(0)}
.expense-row.row-open .row-kebab{opacity:1;color:var(--primary)}
.owner-tag{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:var(--primary-glow);color:var(--accent-text);font-size:.55rem;font-weight:var(--fw-bold);margin-left:4px;flex-shrink:0;line-height:1;text-transform:uppercase;user-select:none}
.owner-tag img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.expense-row.delete-armed{background-color:rgba(229,107,85,.15)!important}
.expense-row.delete-armed .row-actions .btn-danger{background:var(--danger);border-color:var(--danger)}
.snackbar{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);z-index:200;display:flex;align-items:center;gap:12px;background:var(--surface-float);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-elevated);padding:12px 18px;font-size:var(--fs-sm);animation:snackbarIn .25s ease;max-width:calc(100vw - 32px)}
.snackbar-hide{opacity:0;transform:translateX(-50%) translateY(8px);transition:opacity .25s ease,transform .25s ease}
.snack-undo{background:none;border:none;color:var(--accent-text);font-weight:var(--fw-bold);cursor:pointer;font-size:var(--fs-sm);padding:0}
.snack-undo:focus-visible{outline:none;box-shadow:0 0 0 3px var(--primary-glow);border-radius:4px}
@keyframes snackbarIn{from{opacity:0;transform:translateX(-50%) translateY(8px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
@keyframes pulse-subtle{0%,100%{opacity:1}50%{opacity:.45}}
.expense-summary .exp-amount.pulse-subtle{animation:pulse-subtle 1s ease}

/* ===== FILTERS ===== */
.filter-row{display:flex;gap:var(--space-xs);margin:0 0 var(--space-md);flex-wrap:wrap;align-items:center}
/* Inventory header rows stack: full-width toggle, then the chip scroller */
#invFilters{flex-direction:column;align-items:stretch;flex-wrap:nowrap}
#invFilters .inv-chip{min-height:34px;padding:0 16px}
.filter-row button,.filter-row select{min-height:44px;min-width:44px;padding:0 var(--space-md);background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text2);font-size:var(--fs-sm);cursor:pointer;transition:var(--transition-tactile);white-space:nowrap;font-family:var(--font-sans)}
.seg-control{display:flex;padding:var(--space-xs);border-radius:8px;width:100%;background:var(--bg2);border:1px solid var(--border);gap:var(--space-xs)}
.seg{flex:1;min-height:44px;padding:0 var(--space-md);border:1px solid transparent;border-radius:6px;background:transparent;color:var(--text1);opacity:.72;font-size:var(--fs-sm);font-weight:500;cursor:pointer;transition:var(--transition-tactile);font-family:var(--font-sans)}
.seg:hover{color:var(--text)}
.seg.active{background:var(--surface-float);color:var(--text);opacity:1;font-weight:600;box-shadow:0 2px 4px rgba(0,0,0,.1)}
/* Unified static toolbar for Expenses — scrolls with content, never floats over it */
.exp-toolbar{display:flex;gap:var(--space-sm);align-items:center;flex-wrap:wrap;margin:0 0 var(--space-md)}
.exp-toolbar .seg-control{width:auto;flex:1 1 200px}
.exp-toolbar .filters-btn{flex-shrink:0}
@media(max-width:480px){.exp-toolbar .seg-control{flex-basis:100%}}
.filters-btn{position:relative;display:inline-flex;align-items:center;gap:var(--space-xs);min-height:44px;padding:0 var(--space-md);background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text2);font-weight:600;cursor:pointer;transition:var(--transition-tactile);font-family:var(--font-sans);white-space:nowrap}
.filters-btn:hover,.filters-btn:focus-visible{border-color:var(--primary);color:var(--primary);transform:scale(1.02)}
.filters-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--primary-glow)}
.filter-badge{position:absolute;top:-4px;right:-4px;width:20px;height:20px;border-radius:50%;font-size:12px;align-items:center;justify-content:center;background:var(--primary);color:#fff;font-weight:700;line-height:1;box-shadow:0 2px 6px var(--primary-glow);display:none}
.filter-badge.on{display:flex}
.filter-section-title{font-size:var(--fs-xs);font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:var(--space-md) 0 var(--space-sm)}
.sheet-overlay{position:fixed;inset:0;background:rgba(0,0,0,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:999;display:flex;align-items:flex-end;justify-content:center;animation:fadeIn .2s ease}
.bottom-sheet{position:fixed;bottom:0;left:0;width:100%;max-height:75vh;border-top-left-radius:24px;border-top-right-radius:24px;padding:var(--space-lg);overflow-y:auto;z-index:999;background:var(--surface-float);box-shadow:var(--shadow-elevated);border:1px solid var(--border);border-bottom:none;animation:sheetUp .3s cubic-bezier(.4,0,.2,1)}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.sheet-handle{width:40px;height:4px;border-radius:2px;margin:0 auto var(--space-md);background:var(--border);flex-shrink:0}
.sheet-header{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:var(--space-xs);padding-bottom:var(--space-md);background:var(--surface-float);z-index:2}
.sheet-header h3{margin:0;font-size:1.05rem;font-weight:700;letter-spacing:-.01em}
.sheet-clear{background:none;border:none;color:var(--text2);font-size:var(--fs-sm);font-weight:600;cursor:pointer;padding:0;min-height:44px;display:inline-flex;align-items:center;font-family:var(--font-sans);flex-shrink:0}
.sheet-clear:hover{color:var(--danger)}
.sheet-apply{min-height:44px;font-weight:var(--fw-bold);flex-shrink:0;box-shadow:0 4px 16px var(--primary-glow)}
.members-scroll{display:flex;gap:var(--space-md);overflow-x:auto;padding:var(--space-xs) 4px var(--space-sm);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.members-scroll::-webkit-scrollbar{display:none}
.member-item{display:flex;flex-direction:column;align-items:center;gap:var(--space-xs);flex-shrink:0;background:none;border:none;cursor:pointer;padding:0;font-family:var(--font-sans);color:var(--text2);font-size:var(--fs-xs);max-width:64px;transition:var(--transition-spring)}
.member-item .member-name{max-width:64px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.member-item:hover{color:var(--text)}
.member-item:not(.active):hover .member-avatar{transform:scale(1.08);opacity:.75}
.member-item:focus-visible{outline:none;box-shadow:0 0 0 3px var(--primary-glow);border-radius:var(--radius-md)}
.member-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;transition:var(--transition-spring);opacity:.4;filter:grayscale(100%);border:2px solid transparent;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.05rem;background:var(--bg2);color:var(--text2);flex-shrink:0}
.member-item.active .member-avatar{opacity:1;filter:none;transform:scale(1.05);border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow)}
.member-item.active{color:var(--text);font-weight:600}
.cat-search{width:100%;min-height:44px;padding:var(--space-sm) var(--space-md);background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text);font-size:var(--fs-sm);font-family:var(--font-sans)}
.cat-search::placeholder{color:var(--muted)}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:var(--space-sm);margin-top:var(--space-md)}
.cat-item{padding:var(--space-sm) var(--space-md);border-radius:16px;text-align:center;font-size:14px;word-break:break-word;background:var(--surface2);border:1px solid var(--chip-border);color:var(--text2);cursor:pointer;font-family:var(--font-sans);transition:var(--transition-tactile);min-height:44px;display:flex;align-items:center;justify-content:center;line-height:1.3}
.cat-item:hover,.cat-item:focus-visible{border-color:var(--primary);color:var(--primary)}
.cat-item:focus-visible{outline:none;box-shadow:0 0 0 3px var(--primary-glow)}
.cat-item.active{background:var(--primary-dark);border-color:var(--primary-dark);color:#fff;box-shadow:0 2px 8px var(--primary-glow)}
.filter-row button:hover,.filter-row button:focus-visible{border-color:var(--primary);color:var(--primary);transform:scale(1.02)}
.filter-row button:focus-visible{outline:none;box-shadow:0 0 0 3px var(--primary-glow)}
.filter-row button.active{background:var(--primary-dark);color:#fff;border-color:var(--primary-dark);box-shadow:0 2px 8px var(--primary-glow)}

/* ===== SETTINGS ===== */
.settings-section{background:var(--surface);border-radius:var(--radius-lg);padding:var(--space-md);margin-bottom:var(--space-lg);box-shadow:var(--shadow-elevated)}
.settings-section h3{font-size:var(--fs-xs);color:var(--accent-text);margin-bottom:var(--space-sm);font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:.5px}
.settings-section .sec-head{font-size:var(--fs-xs);color:var(--accent-text);font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:.5px;margin-bottom:0}
.members-sub{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);flex-wrap:wrap;margin-bottom:var(--space-sm)}
.members-meta{font-size:12px;color:var(--muted);margin-top:4px}
.members-search{display:flex;align-items:center;gap:6px;width:280px;max-width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-md);padding:0 var(--space-sm)}
.members-search:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow)}
.members-search>svg{width:14px;height:14px;color:var(--muted);flex-shrink:0}
.members-search-input{flex:1;min-width:0}
.members-search input.members-search-input{margin:0;padding:0;background:transparent;border:none;color:var(--text);font-size:var(--fs-sm);font-family:var(--font-sans)}
.members-search .members-search-input:focus{outline:none;box-shadow:none;border-color:transparent;background:transparent}
.members-search-input::placeholder{color:var(--muted)}
.settings-row{padding:var(--space-sm) 0;border-bottom:1px solid var(--border);font-size:var(--fs-sm)}
.settings-row:last-child{border-bottom:none}
.settings-row label{display:block;color:var(--text2);margin-bottom:3px;font-size:var(--fs-xs)}
.settings-row input,.settings-row select{width:100%;max-width:448px;margin:0}
.size-picker{display:flex;gap:6px}
.size-picker button{width:44px;height:44px;border:2px solid var(--border);border-radius:var(--radius-md);background:var(--surface);color:var(--text2);cursor:pointer;font-size:var(--fs-sm);font-weight:var(--fw-semibold);transition:var(--transition-tactile);display:flex;align-items:center;justify-content:center}
.size-picker button:hover{border-color:var(--primary);color:var(--primary);transform:scale(1.05)}
.size-picker button:focus-visible{outline:none;box-shadow:0 0 0 3px var(--primary-glow)}
.size-picker button.active{background:var(--primary-dark);color:#fff;border-color:var(--primary-dark);box-shadow:0 2px 8px var(--primary-glow)}
.theme-picker button{width:auto;padding:0 var(--space-md);font-size:var(--fs-xs)}
.theme-picker .theme-hint{margin-left:auto;font-size:var(--fs-xs);color:var(--muted);display:flex;align-items:center}
.size-preview{margin-top:var(--space-sm);padding:var(--space-sm) var(--space-md);background:linear-gradient(135deg,var(--bg2),var(--surface));border-radius:var(--radius-md);border:1px dashed var(--border);text-align:center;min-height:48px;display:flex;align-items:center;justify-content:center}
.size-preview #sizePreviewText{font-size:var(--fs-base);color:var(--text2);transition:var(--transition-tactile);line-height:1.4}
.settings-info{padding:.6rem .85rem;background:var(--surface2);border:1px dashed var(--border);border-radius:var(--radius-md);color:var(--text2);font-size:var(--fs-sm);margin-top:var(--space-xs);line-height:1.5}
.settings-layout{display:flex;gap:var(--space-md)}
.settings-nav{width:140px;flex-shrink:0;display:flex;flex-direction:column;gap:2px;position:sticky;top:0;background:var(--surface-float);z-index:5}
.settings-nav button{text-align:left;padding:.5rem .8rem;background:none;border:none;color:var(--text2);cursor:pointer;border-radius:var(--radius-sm);font-size:var(--fs-sm);transition:var(--transition-tactile)}
.settings-nav button:hover{background:var(--surface2);color:var(--text);transform:translateX(4px)}
.settings-nav button:focus-visible{outline:none;box-shadow:0 0 0 3px var(--primary-glow)}
.settings-nav button.active{background:rgba(232,104,90,.08);color:var(--accent-text);font-weight:var(--fw-semibold)}
.settings-content{flex:1;min-width:0}
.settings-section{display:none}
.settings-section.active{display:block}
.profile-header{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-xs) 0 var(--space-md)}
.profile-header .avatar-preview{width:72px;height:72px;margin:0;font-size:2.2rem}
.profile-header .profile-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.profile-header .profile-username{font-size:var(--fs-sm);color:var(--text2)}
.settings-divider{border:none;border-top:1px solid var(--border);margin:var(--space-sm) 0}
.avatar-wrap{position:relative;display:inline-block;flex-shrink:0;border-radius:50%;cursor:pointer}
.avatar-wrap .avatar-preview{margin:0}
.avatar-edit-overlay{position:absolute;inset:0;background:rgba(0,0,0,.45);border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:0;transition:var(--transition-tactile);color:#fff;cursor:pointer}
.avatar-wrap:hover .avatar-edit-overlay{opacity:1}
.profile-name-input{font-size:var(--fs-lg);font-weight:var(--fw-bold);color:var(--text);background:transparent;border:none;padding:0;margin:0;width:100%;outline:none;font-family:var(--font-sans);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-name-input:focus{background:var(--bg2);border-radius:var(--radius-sm);padding:2px 4px;margin:-2px -4px}
.avatar-options{display:flex;flex-direction:column;gap:2px;margin-bottom:var(--space-xs);background:var(--surface2);border-radius:var(--radius-md);padding:var(--space-xs);border:1px solid var(--border)}
.avatar-options button{display:flex;align-items:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-md);background:none;border:none;color:var(--text);font-size:var(--fs-sm);cursor:pointer;border-radius:var(--radius-sm);transition:var(--transition-tactile);width:100%;text-align:left}
.avatar-options button:hover{background:var(--surface);transform:translateX(4px)}
.avatar-options button:focus-visible{outline:none;box-shadow:0 0 0 3px var(--primary-glow)}
.avatar-popup-modal{max-width:320px;padding:var(--space-lg)}
.avatar-popup-btn{display:flex;align-items:center;gap:var(--space-sm);width:100%;padding:.75rem 1rem;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text);font-size:var(--fs-sm);cursor:pointer;transition:var(--transition-tactile);margin-bottom:var(--space-xs);text-align:left;font-family:var(--font-sans)}
.avatar-popup-btn:hover{background:var(--surface);border-color:var(--primary);color:var(--primary);transform:translateX(4px)}
.avatar-popup-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--primary-glow)}
.avatar-popup-btn:last-child{margin-bottom:0}
@media(max-width:767px){.settings-layout{flex-direction:column}.settings-nav{width:100%;flex-direction:row;overflow-x:auto;padding:var(--space-xs) 0 var(--space-sm);border-bottom:1px solid var(--border);margin-bottom:var(--space-md)}.settings-nav button{white-space:nowrap;flex-shrink:0}}
.avatar-picker{display:flex;gap:var(--space-xs);flex-wrap:wrap}
.avatar-option{width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:var(--bg2);border-radius:50%;cursor:pointer;font-size:1.2rem;border:2px solid var(--border);transition:var(--transition-tactile)}
.avatar-option:hover,.avatar-option.selected{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow);transform:scale(1.1)}
.avatar-img{width:32px;height:32px;border-radius:50%;object-fit:cover;display:block}
.avatar-sm{width:38px;height:38px;border-radius:50%;object-fit:cover;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:700;background:var(--bg2);color:var(--text2);font-size:1rem}
.badge-admin{background-color:#E6FFFA;color:#006D5B;border:1px solid #B2F5EA;font-weight:600;padding:2px 8px;border-radius:var(--radius-sm)}
.admin-member{position:relative;z-index:0;display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);padding:16px 24px;border-bottom:1px solid var(--border);transition:var(--transition-spring)}
.admin-member:hover{background-color:var(--surface2);transform:scale(1.005);z-index:2}
.admin-member.menu-active{z-index:5}
.admin-member.rel-open-row{z-index:6}
.admin-member:last-child{border-bottom:none}
.admin-member-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.admin-member-name{font-weight:var(--fw-medium);font-size:var(--fs-sm);display:flex;align-items:center;gap:6px;flex-wrap:wrap;transition:var(--transition-spring)}
.admin-member:hover .admin-member-name{color:var(--text)}
.admin-member-meta{font-size:var(--fs-xs);color:var(--muted)}
.admin-member-self{font-size:var(--fs-xs);color:var(--muted)}
.self-badge{display:inline-flex;align-items:center;background:var(--surface2);color:var(--text);border:1px solid var(--border);opacity:.85;padding:4px 12px;font-size:12px;font-weight:600;border-radius:var(--radius-sm);white-space:nowrap;flex-shrink:0}
.admin-member-rel{display:flex;align-items:baseline;gap:0.15rem;margin-top:var(--space-xs)}
.rel-prefix{font-size:var(--fs-xs);color:var(--text2);white-space:nowrap;line-height:1.4}
.rel-wrap{position:relative;display:inline-flex;align-items:baseline}
.admin-member-rel button.rel-select{position:relative;width:auto;padding:0;border:1px solid transparent;border-bottom:1px dashed var(--border);border-radius:var(--radius-md);background:transparent;color:var(--text2);font-size:var(--fs-xs);font-family:var(--font-sans);line-height:1;text-align:left;cursor:pointer;outline:none;transition:var(--transition-spring);display:inline-flex;align-items:baseline}
.admin-member-rel button.rel-select .rel-value{white-space:nowrap}
.rel-wrap:hover .rel-select,.rel-wrap:focus-within .rel-select,.rel-wrap.rel-open .rel-select,.rel-select:focus,.rel-select:active{border:1px solid var(--border);border-bottom-color:var(--primary);background:var(--surface2);color:var(--text);box-shadow:0 2px 6px var(--primary-glow)}
.rel-picker{display:none;position:absolute;top:calc(100% + 8px);left:0;min-width:200px;max-width:240px;background:var(--surface-float);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-elevated);padding:var(--space-xs);z-index:30}
.rel-picker.open{display:block;animation:panelIn .2s ease}
.rel-search{display:flex;align-items:center;gap:6px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-md);padding:4px 8px;margin-bottom:var(--space-xs)}
.rel-search svg{width:12px;height:12px;color:var(--muted);flex-shrink:0}
.rel-search input.rel-search-input{flex:1;min-width:0;width:auto;margin:0;padding:0;background:transparent;border:none;color:var(--text);font-size:var(--fs-sm);font-family:var(--font-sans);outline:none;box-shadow:none}
.rel-search input.rel-search-input::placeholder{color:var(--muted)}
.rel-options{max-height:220px;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.rel-opt{display:flex;align-items:center;gap:6px;width:100%;text-align:left;padding:6px 10px;background:none;border:none;border-radius:var(--radius-sm);font-size:var(--fs-sm);color:var(--text2);cursor:pointer;font-family:var(--font-sans);transition:var(--transition-spring)}
.rel-opt:hover{background:var(--surface2);color:var(--text)}
.rel-opt.active{color:var(--text);font-weight:var(--fw-medium)}
.rel-opt.empty{color:var(--muted);cursor:default;font-style:italic}
.rel-check{width:14px;flex-shrink:0;display:inline-flex;color:var(--primary)}
.rel-check svg{width:12px;height:12px}
.row-menu{flex-shrink:0}
.row-menu-pop{display:none;position:absolute;right:24px;top:calc(100% + 8px);width:200px;background:var(--surface-float);box-shadow:var(--shadow-elevated);border-radius:var(--radius-lg);padding:8px;border:1px solid var(--border);z-index:10}
.row-menu-pop.show{display:block;animation:panelIn .2s ease}
.menu-item{display:block;width:100%;text-align:left;padding:8px 12px;background:none;border:none;border-radius:var(--radius-sm);font-size:var(--fs-sm);color:var(--text2);cursor:pointer;font-family:var(--font-sans);transition:var(--transition-spring);white-space:nowrap}
.menu-item:hover{background-color:var(--surface2);color:var(--text)}
.menu-confirm{margin-top:4px;padding:8px 12px;border-top:1px solid var(--border);background:var(--surface2);border-radius:var(--radius-sm)}
.menu-confirm-text{display:block;font-size:12px;color:var(--danger);line-height:1.45}
.menu-confirm-link{display:inline-block;margin-top:6px;padding:0;background:none;border:none;color:var(--danger);font-weight:600;font-size:12px;text-decoration:none;cursor:pointer;font-family:var(--font-sans)}
.menu-confirm-link:hover{text-decoration:underline}
.avatar-lg{width:80px;height:80px;border-radius:50%;object-fit:cover;box-shadow:var(--shadow-elevated)}
.avatar-preview{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--bg2);font-size:2.5rem;overflow:hidden;margin-bottom:var(--space-sm);box-shadow:var(--shadow-elevated)}
.signup-avatar-row{display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-sm);text-align:left}
.signup-avatar-row .avatar-preview{width:64px;height:64px;font-size:2rem;margin-bottom:0;flex-shrink:0}
.signup-avatar-row .avatar-preview img{width:100%;height:100%;object-fit:cover}
.signup-size-row{margin-bottom:var(--space-sm)}
.signup-label{display:block;color:var(--text2);margin-bottom:4px;font-size:var(--fs-xs)}

/* ===== EMPTY STATE ===== */
.empty-state{text-align:center;padding:var(--space-lg);color:var(--muted);font-size:var(--fs-sm)}
.empty-state .empty-icon{font-size:3rem;margin-bottom:var(--space-sm);opacity:.4;display:block}
.empty-state .empty-title{font-size:var(--fs-base);color:var(--text2);margin-bottom:4px}
.empty-state .empty-sub{font-size:var(--fs-xs);color:var(--muted)}

/* ===== SKELETON ===== */
.skeleton{background:linear-gradient(90deg,var(--surface) 25%,var(--surface-tint) 50%,var(--surface) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite ease-in-out;border-radius:var(--radius-md);height:16px;margin-bottom:var(--space-xs)}
.skeleton-card{height:80px;border-radius:var(--radius-lg);margin-bottom:var(--space-sm)}
.skeleton-circle{width:40px;height:40px;border-radius:50%}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ===== DIVIDER ===== */
.divider{height:1px;background:var(--border);margin:var(--space-md) 0}

/* ===== ACTIVITY ===== */
.activity-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);color:var(--text2)}
.activity-table th{font-size:var(--fs-xs);color:var(--muted);font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:.5px;text-align:left;padding:var(--space-xs) 0;border-bottom:1px solid var(--border)}
.activity-table td{padding:var(--space-xs) 0;border-bottom:1px solid var(--border);vertical-align:top;line-height:1.45}
.activity-table tr:last-child td{border-bottom:none}
.activity-table .tbl-date{white-space:nowrap;color:var(--muted);font-size:var(--fs-xs);padding-right:var(--space-sm)}
.activity-table .tbl-desc{min-width:0;overflow-wrap:break-word}
.activity-table .tbl-amt{text-align:right;white-space:nowrap;padding-left:var(--space-sm);font-variant-numeric:tabular-nums}

/* ===== CHART CONTAINER ===== */
.chart-bar-bg{background:rgba(91,143,201,.14);border-radius:4px;height:20px;overflow:hidden}
.chart-bar-fill{height:100%;border-radius:4px;transition:width .6s cubic-bezier(.4,0,.2,1);min-width:4px}
.chart-col-group{display:flex;align-items:flex-end;gap:6px;height:120px;padding-top:var(--space-md)}
.chart-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px}
.chart-col .bar{width:100%;border-radius:4px 4px 0 0;min-height:4px;transition:height .6s cubic-bezier(.4,0,.2,1);cursor:pointer}
.chart-col .bar:hover{opacity:.8}
.chart-col .col-label{font-size:var(--fs-xs);color:var(--muted);white-space:nowrap}
.chart-col .col-value{font-size:var(--fs-xs);color:var(--text2)}

/* ===== NOTIF DROPDOWN ===== */
.notif-dropdown{display:none;position:absolute;top:calc(100% + 8px);right:0;width:340px;max-height:420px;overflow-y:auto;background:var(--surface-float);border-radius:var(--radius-lg);box-shadow:var(--shadow-elevated);border:1px solid var(--border);z-index:99;padding:var(--space-sm)}
.notif-dropdown.show{display:block;animation:panelIn .2s ease}
.notif-dropdown h4{padding:0 var(--space-sm);margin-bottom:var(--space-xs);padding-bottom:var(--space-xs);border-bottom:1px solid var(--border);font-size:var(--fs-sm);color:var(--text2)}
.notif-empty{color:var(--muted);font-size:var(--fs-sm);padding:var(--space-md) var(--space-sm);text-align:center;font-style:italic}
.notif-item{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm);border-radius:var(--radius-md);font-size:var(--fs-sm);color:var(--text2);line-height:1.4;cursor:default;transition:var(--transition-tactile)}
.notif-item.actionable{cursor:pointer}
.notif-item:hover,.notif-item:focus-visible{background:var(--surface2);color:var(--text);transform:translateX(2px)}
.notif-item:focus-visible{outline:none;box-shadow:0 0 0 3px var(--primary-glow)}
.notif-item.unread{color:var(--text);font-weight:var(--fw-medium)}
.notif-item.unread::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--primary);flex-shrink:0}

/* ===== BUDGET ===== */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
input[type="number"]{-moz-appearance:textfield}
.budget-row{display:grid;grid-template-columns:110px 1fr 100px 70px;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid #F0ECE8}
.budget-row .budget-label{font-size:14px;font-weight:600;color:#2D2926;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.budget-row .budget-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;background:#E6E0DA;border-radius:9999px;outline:none;margin:0;padding:0;cursor:pointer}
.budget-row .budget-slider::-webkit-slider-runnable-track{height:6px;border-radius:9999px;background:#E6E0DA}
.budget-row .budget-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;margin-top:-7px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.15);cursor:pointer;transition:transform .1s ease}
.budget-row .budget-slider::-moz-range-track{height:6px;border-radius:9999px;background:#E6E0DA}
.budget-row .budget-slider::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.15);cursor:pointer;transition:transform .1s ease}
.budget-row .budget-slider:active::-webkit-slider-thumb{transform:scale(1.2);box-shadow:0 4px 10px rgba(188,93,76,.3)}
.budget-row .budget-slider:active::-moz-range-thumb{transform:scale(1.2);box-shadow:0 4px 10px rgba(188,93,76,.3)}
.budget-row .budget-num{height:38px;width:100%;background:#F7F3F0;border:1px solid #E6E0DA;border-radius:8px;padding:0 10px;text-align:right;font-weight:600;font-size:14px;color:#2D2926;margin:0}
.budget-row .budget-pct-wrap{height:38px;display:flex;align-items:center;justify-content:flex-end;background:#F7F3F0;border:1px solid #E6E0DA;border-radius:8px;padding-right:8px}
.budget-row .budget-pct-wrap input{width:100%;min-width:0;height:100%;border:none;background:transparent;padding:0 2px;text-align:right;font-weight:600;font-size:14px;color:#2D2926;margin:0}
.budget-row .budget-pct-wrap span{font-size:14px;font-weight:600;color:#2D2926}
.budget-row.over .budget-num,.budget-row.over .budget-pct-wrap{border-color:var(--danger)}
.budget-row.over .budget-num,.budget-row.over .budget-pct-wrap input,.budget-row.over .budget-pct-wrap span{color:var(--danger)}
.budget-row.over .budget-slider::-webkit-slider-runnable-track,.budget-row.over .budget-slider::-moz-range-track{background:rgba(217,93,80,.35)}
@media(max-width:640px){.budget-row{grid-template-columns:1fr 70px;row-gap:10px}.budget-row .budget-label,.budget-row .budget-slider{grid-column:1/-1}}
.budget-presets{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.budget-preset{padding:6px 12px;background:#F7F3F0;border:1px solid #E6E0DA;border-radius:9999px;font-size:12px;font-weight:500;color:#534D4A;cursor:pointer;transition:background-color .2s ease,border-color .2s ease;min-height:0;height:auto;font-family:var(--font-sans)}
.budget-preset:hover{background:#fff;border-color:#BC5D4C;color:#BC5D4C}
.budget-add{display:flex;gap:12px;margin-top:20px;align-items:center}
.budget-add-input{flex-grow:1;height:42px!important;min-height:42px!important;background:#fff;border:1px solid #E6E0DA;border-radius:10px;padding:0 14px;font-size:14px;color:#2D2926;margin:0;font-family:var(--font-sans);outline:none;transition:border-color .2s ease,box-shadow .2s ease}
.budget-add-input::placeholder{color:#9E9690}
.budget-add-input:focus-visible{border-color:#BC5D4C;box-shadow:0 0 0 3px rgba(163,75,60,.16)}
.budget-add-btn{height:42px!important;min-height:42px!important;padding:0 20px;background-color:#BC5D4C;color:#fff;font-size:14px;font-weight:600;border:none;border-radius:10px;cursor:pointer;font-family:var(--font-sans);transition:background-color .2s ease,transform .1s ease}
.budget-add-btn:hover{background-color:#A34E3F}
.budget-add-btn:active{transform:scale(.98)}
.budget-summary{font-size:var(--fs-sm);color:var(--text2);margin:var(--space-sm) 0}
.budget-summary.muted{color:var(--muted);font-style:italic}
.budget-summary.over{color:var(--danger)}
.budget-summary .budget-neg{color:var(--danger)}

/* ===== MODAL ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:260;animation:fadeIn .2s ease;padding:var(--space-md)}
.modal{position:relative;background:var(--surface-float);border-radius:var(--radius-xl);padding:var(--space-lg) var(--space-md);width:100%;max-width:400px;box-shadow:var(--shadow-elevated);border:1px solid var(--border);max-height:90vh;overflow:hidden;display:flex;flex-direction:column;animation:scaleIn .25s cubic-bezier(.4,0,.2,1)}
@supports (height:100dvh){.modal{max-height:min(90vh,100dvh - 32px)}}
@keyframes scaleIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
.modal h2{font-size:1.25rem;font-weight:700;letter-spacing:-.01em;margin-bottom:var(--space-md);color:var(--text);padding-right:var(--space-lg);flex-shrink:0}
.modal .modal-body{font-size:var(--fs-xs);color:var(--muted);font-weight:400;line-height:1.5;overflow-y:auto;flex:1 1 auto;min-height:0;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(127,127,127,.4) transparent;scrollbar-gutter:stable}
.modal .modal-body::-webkit-scrollbar{width:6px}
.modal .modal-body::-webkit-scrollbar-track{background:transparent}
.modal .modal-body::-webkit-scrollbar-thumb{background:rgba(127,127,127,.4);border-radius:3px}
.modal .modal-body::-webkit-scrollbar-thumb:hover{background:rgba(127,127,127,.65)}
.modal .modal-body strong{color:var(--text);font-weight:var(--fw-bold)}
.modal .modal-actions{display:flex;gap:var(--space-md);margin-top:var(--space-lg);flex-shrink:0}
.modal label{display:block;font-weight:var(--fw-medium);font-size:var(--fs-xs);color:var(--text2);margin-bottom:var(--space-sm)}
.btn-modal-cta{flex:1.3;min-height:44px;font-weight:var(--fw-bold);box-shadow:0 4px 16px var(--primary-glow)}
.modal .modal-actions .btn{min-height:44px}
.modal-close{position:absolute;top:var(--space-sm);right:var(--space-sm);width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--surface2);border:1px solid var(--border);border-radius:50%;color:var(--text2);cursor:pointer;transition:var(--transition-tactile);flex-shrink:0;z-index:1}
.modal-close:hover{background:var(--bg2);color:var(--text)}
.modal-close:focus-visible{outline:none;box-shadow:0 0 0 3px var(--primary-glow)}
.modal .modal-hint{margin:var(--space-sm) 0 0;text-align:center;font-size:var(--fs-xs);color:var(--muted)}
@media(max-width:480px){.modal-overlay{padding:var(--space-lg) var(--space-md)}.modal{padding:var(--space-lg) var(--space-md)}.modal h2{font-size:1.1rem}}
@media(max-height:500px){.modal{max-height:calc(100dvh - 12px)}.modal .modal-actions{margin-top:var(--space-sm)}}
.field-hint{font-size:var(--fs-xs);color:var(--muted);margin:-4px 0 var(--space-sm)}
.field-error{display:flex;align-items:center;gap:4px;color:var(--danger);font-size:var(--fs-xs);font-weight:400;margin:-4px 0 var(--space-sm)}
.input-error{border-color:var(--danger)!important;box-shadow:0 0 0 3px rgba(229,107,85,.15)!important}

/* ===== TOAST ===== */
.toast{position:fixed;bottom:calc(var(--bottom-nav-h) + 16px);left:50%;transform:translateX(-50%);background:var(--surface-float);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--text);padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-lg);font-size:var(--fs-sm);box-shadow:var(--shadow-elevated);z-index:300;display:flex;align-items:center;gap:var(--space-sm);border:1px solid var(--border);animation:toastIn .3s ease;max-width:90vw}
.toast .toast-action{padding:4px 8px;border-radius:var(--radius-sm);background:var(--primary-dark);color:#fff;border:none;cursor:pointer;font-weight:var(--fw-semibold);font-size:var(--fs-xs);white-space:nowrap}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.toast.removing{animation:toastOut .25s ease forwards}
@keyframes toastOut{from{opacity:1;transform:translateX(-50%) translateY(0)}to{opacity:0;transform:translateX(-50%) translateY(12px)}}

/* ===== NOTIF PANEL (mobile slide-up) ===== */
.slide-panel{position:fixed;inset:0;background:transparent;z-index:150;display:none;align-items:flex-end;animation:fadeIn .2s ease}
.slide-panel.show{display:flex}
.slide-panel .panel-content{background:var(--surface-float);border-radius:var(--radius-xl) var(--radius-xl) 0 0;width:100%;max-height:75vh;overflow-y:auto;animation:slideUp .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column}
.slide-panel .panel-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--border);flex-shrink:0}
.slide-panel .panel-header h4{margin:0;font-size:var(--fs-base)}
.slide-panel .panel-close{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--surface2);border:none;border-radius:50%;color:var(--text2);cursor:pointer;transition:var(--transition-tactile)}
.slide-panel .panel-close:hover{background:var(--bg2);color:var(--text)}
.slide-panel .panel-close:focus-visible{outline:none;box-shadow:0 0 0 3px var(--primary-glow)}
.slide-panel .panel-close i{width:20px;height:20px}
.slide-panel .panel-body{padding:var(--space-md) var(--space-lg);overflow-y:auto;flex:1}
.slide-panel .panel-handle{position:relative;width:40px;height:4px;background:var(--muted);border-radius:2px;margin:0 auto var(--space-md);flex-shrink:0}
.slide-panel .panel-handle::after{content:"";position:absolute;inset:-14px -32px}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.slide-panel .panel-body .card-item{min-height:48px;padding:var(--space-sm) var(--space-md);font-size:var(--fs-base);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:var(--space-sm)}
.slide-panel .panel-body .card-item:last-child{border-bottom:none}
.slide-panel .panel-body .card-empty{padding:var(--space-lg);text-align:center;color:var(--muted);font-size:var(--fs-base)}

/* ===== KBD ===== */
kbd{padding:2px 6px;background:var(--bg2);border:1px solid var(--border);border-radius:4px;font-family:var(--font-mono);font-size:.7rem;color:var(--text2)}

/* ===== CHECKBOX TOGGLE ===== */
.toggle-wrap{display:flex;align-items:center;gap:var(--space-sm)}
.toggle{cursor:pointer;position:relative;width:44px;height:24px;flex-shrink:0}
.toggle input{position:absolute;opacity:0;width:0;height:0}
.toggle .slider{position:absolute;inset:0;background:var(--bg2);border-radius:12px;transition:var(--transition-med);border:1px solid var(--border)}
.toggle .slider::before{content:'';position:absolute;width:18px;height:18px;border-radius:50%;background:var(--muted);top:3px;left:3px;transition:var(--transition-med)}
.toggle input:checked+.slider{background:var(--primary-dark);border-color:var(--primary-dark)}
.toggle input:checked+.slider::before{background:#fff;transform:translateX(20px)}
.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:var(--space-sm) 0;border-bottom:1px solid var(--border);gap:var(--space-md)}
.toggle-row:last-child{border-bottom:none;padding-bottom:0}
.toggle-row-info{flex:1;min-width:0}
.toggle-row-label{font-size:var(--fs-sm);color:var(--text)}
.toggle-row-desc{font-size:var(--fs-xs);color:var(--text2);margin-top:1px}


/* ===== RESPONSIVE ===== */
@media(min-width:768px){
 .app-wrap{flex-direction:column}
 .app-header{width:100%;z-index:60}
 .desktop-nav{display:flex;width:100%}
 .desktop-nav button{padding:.55rem 1rem}
 main{padding:var(--space-lg);padding-bottom:var(--space-lg);width:100%}
 .bottom-nav{display:none}
 .header-log-btn{display:inline-flex}
 .chat-area{height:calc(100dvh - var(--header-h) - 48px - var(--space-lg)*2)}
 .msg{max-width:75%}
 .bottom-sheet{left:50%;width:480px;margin-left:-240px}
}

@media(min-width:1024px){
.app-wrap{flex-direction:column}
.desktop-nav{justify-content:center;gap:var(--space-sm)}
.card{padding:var(--space-lg)}
}
/* ===== ICONS ===== */
button svg,a svg,.empty-icon svg,h1 svg,h2 svg,h3 svg,.user-badge svg{vertical-align:middle}
.header-right svg{width:18px;height:18px;vertical-align:middle}
.nav-icon{display:inline-flex;align-items:center;justify-content:center;width:1.2rem;height:1.2rem}
.nav-icon svg{width:100%;height:100%}
.send-btn svg{width:18px;height:18px}
.voice-btn svg{width:18px;height:18px}
.user-dropdown-menu a svg{width:16px;height:16px;flex-shrink:0}

/* ===== RECEIPT UPLOAD CLIP ===== */
.clip-btn{width:40px;height:40px;border-radius:50%;border:2px solid var(--border);background:var(--surface2);color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--transition-tactile);position:relative}
.clip-btn:hover{border-color:var(--primary);color:var(--primary)}
.clip-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--primary-glow)}
.clip-btn svg{width:18px;height:18px}

/* ===== RECEIPT BADGE ON TOOLBAR BTN ===== */

/* ===== RECEIPT QUEUE CARDS ===== */
.receipt-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-md);margin-bottom:var(--space-sm);display:flex;gap:var(--space-md);align-items:center;cursor:pointer;transition:var(--transition-tactile);box-shadow:var(--shadow-ambient)}
.receipt-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px);border-color:var(--primary)}
.receipt-card:focus-visible{outline:none;box-shadow:0 0 0 3px var(--primary-glow)}
.receipt-thumb{width:56px;height:72px;border-radius:var(--radius-sm);object-fit:cover;background:var(--bg2);flex-shrink:0;border:1px solid var(--border)}
.receipt-card-info{flex:1;min-width:0}
.receipt-card-info .rc-store{font-weight:var(--fw-semibold);color:var(--text);font-size:var(--fs-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.receipt-card-info .rc-meta{font-size:var(--fs-xs);color:var(--text2);margin-top:2px}
.receipt-card-info .rc-uploader{font-size:var(--fs-xs);color:var(--muted);margin-top:2px}
.rstatus{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:var(--fs-xs);font-weight:var(--fw-semibold);flex-shrink:0}
.rstatus.processing{background:rgba(240,160,48,.12);color:var(--warn)}
.rstatus.done{background:var(--success-pill-bg);color:var(--success)}
.rstatus.error{background:rgba(229,107,85,.12);color:var(--danger)}
.rstatus svg{width:12px;height:12px}

/* =====================================================================
   RECEIPT REVIEW — focused dark task screen ("Review Receipt")
   Self-contained token set so the task screen keeps a deliberate identity.
   Contrast (WCAG AA): #9ca3af on #23253b = 5.9:1, on #161726 = 6.7:1,
   #052e22 ink on #10b981 CTA = 5.8:1. All pass.
   ===================================================================== */
.receipt-overlay{
--rr-bg:#161726;--rr-surface:#202236;--rr-field:#23253b;--rr-field-raised:#2c2f4a;
--rr-border:rgba(255,255,255,.1);--rr-border-soft:rgba(255,255,255,.07);--rr-border-strong:rgba(255,255,255,.16);
--rr-text:#ffffff;--rr-text2:#9ca3af;--rr-text-dim:rgba(156,163,175,.55);
--rr-green:#10b981;--rr-green-deep:#0ea371;--rr-cta-ink:#052e22;
--rr-warn:#fbbf24;--rr-danger:#f87171;--rr-info:#93c5fd;
--rr-focus-ring:0 0 0 3px rgba(16,185,129,.22);
--rr-radius:14px;
position:fixed;inset:0;background:var(--rr-bg);z-index:200;display:none;flex-direction:column;overflow:hidden;
color:var(--rr-text);color-scheme:dark;font-family:var(--font-sans);animation:rrIn .22s ease}
.receipt-overlay.show{display:flex}
@keyframes rrIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.receipt-overlay{animation:none}}
/* Light-theme mirror: same geometry, warm surfaces. */
body[data-theme="light"] .receipt-overlay{
--rr-bg:#fdf6ed;--rr-surface:#ffffff;--rr-field:#ffffff;--rr-field-raised:#fef5ec;
--rr-border:#E6E0DA;--rr-border-soft:#EFE9E2;--rr-border-strong:#d6c9bb;
--rr-text:#2D2926;--rr-text2:#6E6763;--rr-text-dim:rgba(110,103,99,.55);
--rr-green:#10b981;--rr-green-deep:#0ea371;--rr-cta-ink:#052e22;
--rr-warn:#b45309;--rr-danger:#dc2626;--rr-info:#3d6fa8;
--rr-focus-ring:0 0 0 3px rgba(16,185,129,.28);
color-scheme:light}

/* --- Header: back · title · overflow -------------------------------- */
.receipt-overlay-header{flex-shrink:0;display:flex;align-items:center;gap:6px;padding:10px 12px;padding-top:calc(10px + env(safe-area-inset-top));background:var(--rr-bg);border-bottom:1px solid var(--rr-border-soft);min-height:56px}
.receipt-overlay-header h3{margin:0;flex:1;min-width:0;font-size:1.05rem;font-weight:700;letter-spacing:-.01em;color:var(--rr-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;padding-left:2px}
.rr-back,.rr-kebab{width:40px;height:40px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--rr-text);border-radius:12px;cursor:pointer;transition:background .15s ease}
.rr-back:hover,.rr-kebab:hover{background:rgba(255,255,255,.07)}
body[data-theme="light"] .rr-back:hover,body[data-theme="light"] .rr-kebab:hover{background:rgba(45,41,38,.06)}
.rr-back:focus-visible,.rr-kebab:focus-visible{outline:none;box-shadow:var(--rr-focus-ring)}
.rr-back svg{width:22px;height:22px}
.rr-kebab svg{width:20px;height:20px}

/* Overflow menu (Rescan / View original) */
.rr-menu-wrap{position:relative;flex-shrink:0}
.rr-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:218px;background:var(--rr-field);border:1px solid var(--rr-border-strong);border-radius:14px;padding:6px;box-shadow:0 16px 40px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.3);z-index:30;display:none;transform-origin:top right}
.rr-menu.open{display:block;animation:rrMenuIn .16s ease}
@keyframes rrMenuIn{from{opacity:0;transform:scale(.94) translateY(-4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.rr-menu.open{animation:none}}
.rr-menu button{display:flex;align-items:center;gap:10px;width:100%;min-height:42px;padding:0 12px;border:none;background:transparent;color:var(--rr-text);font-size:.9rem;font-weight:500;font-family:inherit;border-radius:9px;cursor:pointer;text-align:left;transition:background .12s ease}
.rr-menu button:hover{background:rgba(255,255,255,.06)}
body[data-theme="light"] .rr-menu button:hover{background:rgba(45,41,38,.05)}
.rr-menu button:disabled{opacity:.45;cursor:default;background:transparent}
.rr-menu button svg{width:16px;height:16px;color:var(--rr-text2);flex-shrink:0}

/* --- Body: the single scroll container ------------------------------
   Explicit 120px bottom padding ~= footer rendered height, so the last
   card always clears the action buttons when scrolled to the very end. */
.receipt-overlay-body{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:16px 16px 120px}

/* --- Segmented tabs: Summary | Line Items --------------------------- */
.rr-tabs{display:flex;gap:4px;background:var(--rr-surface);border:1px solid var(--rr-border-soft);border-radius:12px;padding:4px;margin-bottom:16px}
.rr-tab{flex:1;min-height:40px;padding:0 12px;border:none;background:transparent;color:var(--rr-text2);font-size:.88rem;font-weight:600;font-family:inherit;border-radius:9px;cursor:pointer;transition:color .15s ease,background .15s ease}
.rr-tab:not(.active):hover{color:var(--rr-text)}
.rr-tab.active{background:var(--rr-field-raised);color:var(--rr-text);box-shadow:0 1px 4px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.05)}
body[data-theme="light"] .rr-tab.active{box-shadow:0 1px 3px rgba(45,41,38,.12)}
.rr-tab:focus-visible{outline:none;box-shadow:var(--rr-focus-ring)}
.rr-tab:disabled{opacity:.5;cursor:default}

/* --- Status banners (processing / error / info) --------------------- */
.receipt-status{display:flex;align-items:flex-start;gap:10px;padding:12px 16px;border-radius:12px;font-size:.84rem;font-weight:500;line-height:1.45;margin-bottom:16px}
.receipt-status svg{width:16px;height:16px;flex-shrink:0;margin-top:2px}
.receipt-status.processing{background:rgba(251,191,36,.09);color:var(--rr-warn);border:1px solid rgba(251,191,36,.25)}
.receipt-status.error{background:rgba(248,113,113,.09);color:var(--rr-danger);border:1px solid rgba(248,113,113,.25)}
.receipt-status.info{background:rgba(96,165,250,.09);color:var(--rr-info);border:1px solid rgba(96,165,250,.25)}

/* --- Field cards: micro-label + input on #23253b --------------------
   12px grid gap; 16px lateral padding inside cards. */
.rr-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.rr-field{display:flex;flex-direction:column;gap:6px;background:var(--rr-field);border:1px solid var(--rr-border);border-radius:12px;padding:10px 16px;min-width:0;cursor:text;transition:border-color .15s ease,box-shadow .15s ease}
.rr-field:focus-within{border-color:rgba(16,185,129,.55);box-shadow:var(--rr-focus-ring)}
.rr-field.full,.rr-toggle-card{grid-column:1/-1}
.rr-microlabel{font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--rr-text2);line-height:1;user-select:none;white-space:nowrap}
.receipt-overlay .rr-field input,.receipt-overlay .rr-field select{background:transparent;border:none;border-radius:0;padding:0;margin:0;min-height:28px!important;min-width:0!important;width:100%;box-shadow:none;color:var(--rr-text);font-size:.95rem;font-weight:500;font-family:inherit;outline:none;transition:none}
.receipt-overlay .rr-field input::placeholder{color:var(--rr-text-dim);font-weight:400}
.receipt-overlay .rr-field select{cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right center;padding-right:20px}
body[data-theme="light"] .receipt-overlay .rr-field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236E6763' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
/* Money hero field: big tabular digits — zero width jitter while typing */
.rr-money-wrap{display:flex;align-items:baseline;gap:6px}
.rr-cur{font-size:.95rem;font-weight:700;color:var(--rr-text2)}
.receipt-overlay .rr-field input.rr-money{font-size:1.45rem;font-weight:800;text-align:right;font-variant-numeric:tabular-nums;letter-spacing:-.01em;min-height:34px!important}
.receipt-overlay .rr-field input.ri-amt{text-align:right;font-variant-numeric:tabular-nums}
.rr-field-static{cursor:default}
.rr-field-static:focus-within{border-color:var(--rr-border);box-shadow:none}
.rr-static-val{display:flex;align-items:center;min-height:28px;font-size:1.05rem;font-weight:700;color:var(--rr-green);font-variant-numeric:tabular-nums}
/* Read-only tax style hint? Tax stays editable; static used for Live Total */

/* --- Expense-only master toggle ------------------------------------- */
.rr-toggle-card{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--rr-surface);border:1px solid var(--rr-border-soft);border-radius:12px;padding:12px 16px;margin-bottom:16px;cursor:pointer;transition:border-color .15s ease}
.rr-toggle-card:hover{border-color:var(--rr-border-strong)}
.rr-toggle-title{font-size:.9rem;font-weight:600;color:var(--rr-text)}
.rr-toggle-desc{font-size:.76rem;color:var(--rr-text2);margin-top:2px;line-height:1.4}

/* --- Line items: grouped compact cards ------------------------------ */
.rr-items-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 12px}
.rr-items-title{font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--rr-text2)}
.rr-add-item{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border-radius:999px;border:1px dashed var(--rr-border-strong);background:transparent;color:var(--rr-green);font-size:.84rem;font-weight:600;font-family:inherit;cursor:pointer;transition:border-color .15s ease,background .15s ease}
.rr-add-item:hover{border-color:var(--rr-green);background:rgba(16,185,129,.08)}
.rr-add-item:focus-visible{outline:none;box-shadow:var(--rr-focus-ring)}
.rr-add-item:disabled{opacity:.5;cursor:default}
.rr-add-item svg{width:14px;height:14px}
.rr-item{background:var(--rr-surface);border:1px solid var(--rr-border-soft);border-radius:var(--rr-radius);padding:12px 14px;margin-bottom:10px;transition:border-color .15s ease}
.rr-item:focus-within{border-color:var(--rr-border-strong)}
.rr-item-top{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.receipt-overlay input.ri-name{flex:1;min-width:0!important;background:transparent;border:none;border-radius:0;padding:4px 0;margin:0;min-height:36px!important;box-shadow:none;color:var(--rr-text);font-size:1rem;font-weight:600;font-family:inherit;outline:none}
.receipt-overlay input.ri-name::placeholder{color:var(--rr-text-dim);font-weight:500}
.ri-remove{width:36px;height:36px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--rr-text-dim);border-radius:10px;cursor:pointer;transition:color .15s ease,background .15s ease}
.ri-remove:hover{color:var(--rr-danger);background:rgba(248,113,113,.1)}
.ri-remove:focus-visible{outline:none;box-shadow:var(--rr-focus-ring)}
.ri-remove svg{width:16px;height:16px}
/* Inline restock pill in the name row: tiny label + compact switch */
.rr-restock-inline{display:inline-flex;align-items:center;gap:7px;flex-shrink:0;padding:4px 2px;cursor:pointer;border-radius:8px}
.rr-restock-text{font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rr-text2);white-space:nowrap;user-select:none}
.rr-restock-inline:hover .rr-restock-text{color:var(--rr-text)}
.receipt-overlay .toggle.toggle-sm{width:38px;height:20px;flex-shrink:0}
.receipt-overlay .toggle.toggle-sm .slider{border-radius:10px}
.receipt-overlay .toggle.toggle-sm .slider::before{width:14px;height:14px;top:2px;left:2px}
.receipt-overlay .toggle.toggle-sm input:checked+.slider::before{transform:translateX(18px)}
/* Row 2: one proportional 3-cell grid — [qty+unit][price][category] — scales
   from 320px up; ~120px per card keeps 3–4 items in view. */
.rr-item-grid{display:grid;grid-template-columns:1.05fr .9fr 1.25fr;gap:8px}
.rr-item-grid .rr-field{padding:8px 12px;border-radius:10px}
.receipt-overlay .rr-item-grid .rr-field input,.receipt-overlay .rr-item-grid .rr-field select{min-height:24px!important;font-size:.9rem}
/* QTY reads as one inline string: number right-aligned + unit suffix left */
.ri-qty-wrap{display:flex;align-items:baseline;gap:3px;min-width:0}
.receipt-overlay input.ri-qty{flex:1 1 36px;width:100%;min-width:0!important;text-align:right;font-weight:600;padding:0}
.receipt-overlay input.ri-unit{flex:0 1 56px;width:56px;min-width:34px!important;text-align:left;font-size:.8rem!important;color:var(--rr-text2);padding:0}
.ri-amt-wrap{display:flex;align-items:baseline;gap:4px;min-width:0}
.ri-amt-wrap .rr-cur{font-size:.85rem}
.receipt-overlay input.ri-amt{flex:1;width:100%;min-width:0!important;text-align:right;font-variant-numeric:tabular-nums;padding:0}
.receipt-overlay select.ri-cat{padding-right:18px}
/* No spinner chrome in tight numeric cells */
.receipt-overlay input[type=number]{appearance:textfield;-moz-appearance:textfield}
.receipt-overlay input[type=number]::-webkit-outer-spin-button,.receipt-overlay input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* Toggle switch: green when armed for inventory sync */
.receipt-overlay .toggle .slider{background:rgba(255,255,255,.1);border-color:var(--rr-border)}
.receipt-overlay .toggle .slider::before{background:var(--rr-text2)}
.receipt-overlay .toggle input:checked+.slider{background:var(--rr-green);border-color:var(--rr-green)}
.receipt-overlay .toggle input:checked+.slider::before{background:#fff}
body[data-theme="light"] .receipt-overlay .toggle .slider{background:var(--bg2);border-color:var(--border)}
body[data-theme="light"] .receipt-overlay .toggle .slider::before{background:var(--muted)}

/* --- Discrepancy banner (tappable auto-fix) ------------------------- */
.receipt-discrep{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;font-size:.84rem;font-weight:500;line-height:1.45;cursor:pointer;background:rgba(251,191,36,.09);color:var(--rr-warn);border:1px solid rgba(251,191,36,.25);margin-bottom:16px;transition:border-color .15s ease}
.receipt-discrep:hover{border-color:rgba(251,191,36,.5)}
.receipt-discrep:focus-visible{outline:none;box-shadow:var(--rr-focus-ring)}
.receipt-discrep svg{width:16px;height:16px;flex-shrink:0}

/* --- Action footer: sticky, blurred, never resizes ------------------
   Both rows always render (disabled ≠ hidden) so the CTA never jumps. */
.receipt-overlay-footer{flex-shrink:0;display:flex;flex-direction:column;gap:10px;padding:10px 16px;padding-bottom:calc(12px + env(safe-area-inset-bottom));background:rgba(22,23,38,.88);-webkit-backdrop-filter:blur(12px) saturate(150%);backdrop-filter:blur(12px) saturate(150%);border-top:1px solid var(--rr-border)}
.receipt-overlay-footer:empty{display:none}
body[data-theme="light"] .receipt-overlay-footer{background:rgba(253,246,237,.88)}
.rr-foot-secondary{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px}
.rr-foot-btn{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 10px;border:none;background:transparent;color:var(--rr-text2);font-size:.86rem;font-weight:600;font-family:inherit;cursor:pointer;border-radius:10px;transition:color .15s ease,background .15s ease}
.rr-foot-btn:hover{color:var(--rr-text);background:rgba(255,255,255,.06)}
body[data-theme="light"] .rr-foot-btn:hover{background:rgba(45,41,38,.05)}
.rr-foot-btn:focus-visible{outline:none;box-shadow:var(--rr-focus-ring)}
.rr-foot-btn:disabled{opacity:.45;cursor:default}
.rr-foot-btn svg{width:15px;height:15px}
.rr-foot-btn.rr-discard{color:var(--rr-danger)}
.rr-foot-btn.rr-discard:hover{color:var(--rr-danger);background:rgba(248,113,113,.09)}
/* Primary CTA: 48px touch target, green #10b981 with dark ink (5.8:1) */
.rr-cta{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px!important;border:none;border-radius:14px;background:var(--rr-green);color:var(--rr-cta-ink);font-size:.95rem;font-weight:700;font-family:inherit;letter-spacing:.01em;cursor:pointer;transition:background .15s ease,transform .1s ease,box-shadow .15s ease;box-shadow:0 4px 14px rgba(16,185,129,.25)}
.rr-cta:hover{background:var(--rr-green-deep)}
.rr-cta:active{transform:translateY(1px) scale(.99)}
.rr-cta:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(16,185,129,.35),0 4px 14px rgba(16,185,129,.25)}
.rr-cta:disabled{opacity:.45;cursor:default;box-shadow:none;transform:none;background:var(--rr-green)}
.rr-cta svg{width:17px;height:17px}

/* --- Peek system: FAB (tap=viewer, hold=translucent overlay) ---------
   The FAB is absolutely positioned against the footer zone so it floats
   just above the action bar at any footer height. Mobile only — the
   desktop two-pane already shows the receipt side-by-side. */
.rr-footer-zone{flex-shrink:0;position:relative}
.rr-peek-fab{position:absolute;right:16px;bottom:calc(100% + 12px);display:none;align-items:center;gap:7px;min-height:42px;padding:0 16px;border-radius:999px;border:1px solid var(--rr-border-strong);background:rgba(35,37,59,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--rr-text);font-size:.84rem;font-weight:600;font-family:inherit;cursor:pointer;z-index:50;box-shadow:0 8px 24px rgba(0,0,0,.35);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;transition:transform .12s ease,background .15s ease}
.rr-peek-fab:hover{background:rgba(44,47,74,.95)}
.rr-peek-fab:active{transform:scale(.96)}
.rr-peek-fab:focus-visible{outline:none;box-shadow:var(--rr-focus-ring)}
.rr-peek-fab svg{width:15px;height:15px;color:var(--rr-green)}
body[data-theme="light"] .rr-peek-fab{background:rgba(255,255,255,.92)}
body[data-theme="light"] .rr-peek-fab:hover{background:#fff}
@media(min-width:768px){.rr-peek-fab{display:none!important}}
/* Hold-to-peek: receipt floats over the form at 80% opacity, release drops it */
.rr-hold-peek{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(22,23,38,.45);opacity:0;pointer-events:none;transition:opacity .12s ease}
.rr-hold-peek.show{opacity:1}
.rr-hold-peek img{max-width:92%;max-height:76%;object-fit:contain;border-radius:12px;opacity:.8;box-shadow:0 24px 64px rgba(0,0,0,.5)}
/* Item snippet: bottom-sheet with the line's band of the receipt */
.rr-snippet-overlay{position:fixed;inset:0;z-index:60;display:none;align-items:flex-end;justify-content:center;background:rgba(10,11,20,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .15s ease}
.rr-snippet-overlay.show{display:flex}
.rr-snippet-card{width:100%;max-width:430px;margin:0 12px calc(16px + env(safe-area-inset-bottom));background:var(--rr-field);border:1px solid var(--rr-border-strong);border-radius:16px;padding:12px;box-shadow:0 16px 48px rgba(0,0,0,.5);animation:rrSheetIn .18s ease}
@keyframes rrSheetIn{from{transform:translateY(28px);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.rr-snippet-card{animation:none}}
.rr-snippet-img{width:100%;min-height:96px;border-radius:10px;background-color:rgba(255,255,255,.04);background-repeat:no-repeat;background-position:center center}
.rr-snippet-img.rr-snippet-fallback{height:220px!important;background-size:contain!important}
body[data-theme="light"] .rr-snippet-img{background-color:rgba(45,41,38,.04)}
.rr-snippet-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;min-width:0}
.rr-snippet-name{font-size:.9rem;font-weight:600;color:var(--rr-text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Per-line eye affordance in the item name row */
.ri-peek{width:36px;height:36px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--rr-text-dim);border-radius:9px;cursor:pointer;transition:color .15s ease,background .15s ease}
.ri-peek:hover{color:var(--rr-green);background:rgba(16,185,129,.1)}
.ri-peek:focus-visible{outline:none;box-shadow:var(--rr-focus-ring)}
.ri-peek svg{width:15px;height:15px}
@media(max-width:359px){.rr-restock-text{display:none}}

/* --- Unit combobox popover (replaces unstyleable datalist chrome) ---- */
.rr-combo{position:fixed;z-index:70;display:none;flex-direction:column;padding:4px;background:var(--rr-field);border:1px solid var(--rr-border-strong);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.45);max-height:220px;overflow-y:auto}
.rr-combo.open{display:flex;animation:rrMenuIn .14s ease}
.rr-combo-item{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:38px;padding:0 12px;border:none;background:transparent;color:var(--rr-text);font-size:.88rem;font-weight:500;font-family:inherit;border-radius:8px;cursor:pointer;text-align:left;transition:background .12s ease}
.rr-combo-item:hover{background:rgba(255,255,255,.07)}
body[data-theme="light"] .rr-combo-item:hover{background:rgba(45,41,38,.05)}
.rr-combo-item.active{background:rgba(16,185,129,.14);color:var(--rr-green)}
.rr-combo-item .rr-combo-check{width:14px;height:14px;color:var(--rr-green);opacity:0;flex-shrink:0}
.rr-combo-item.selected .rr-combo-check{opacity:1}
/* Native selects (category, paid-by): force legible popup options — Chromium
   and Firefox honor option colors; iOS/Safari use their native picker. */
.receipt-overlay select option,.receipt-overlay select optgroup{background:#202236;color:#ffffff;padding:8px 12px}
body[data-theme="light"] .receipt-overlay select option,body[data-theme="light"] .receipt-overlay select optgroup{background:#ffffff;color:#2D2926}

/* --- Desktop: two-pane (image | form), same components -------------- */
@media(min-width:768px){
.receipt-overlay-body{padding:24px 28px 80px}
.review-pane{display:flex;gap:24px;align-items:flex-start}
.review-pane .review-img-col{flex:0 0 42%;position:sticky;top:0}
.review-pane .review-img-col img{width:100%;display:block;border-radius:var(--rr-radius);border:1px solid var(--rr-border);cursor:pointer;transition:box-shadow .2s ease}
.review-pane .review-img-col img:hover{box-shadow:0 8px 32px rgba(0,0,0,.4)}
.review-pane .review-items-col{flex:1;min-width:0;max-width:620px}
.receipt-overlay-footer{flex-direction:row;align-items:center;gap:20px;padding:16px 28px;padding-bottom:calc(16px + env(safe-area-inset-bottom))}
.rr-foot-secondary{flex:1;min-height:0;justify-content:flex-start;gap:10px}
/* !important required: the global button reset (min-width:44px!important)
   otherwise collapses the CTA to content width on desktop. */
.rr-cta{width:auto;min-width:300px;min-height:50px!important;border-radius:15px;flex-shrink:0}
}

/* --- Fullscreen receipt image peek ----------------------------------- */
.receipt-img-overlay{position:fixed;inset:0;background:rgba(10,11,20,.92);z-index:210;display:none;align-items:center;justify-content:center;animation:fadeIn .15s ease;padding:var(--space-md);cursor:pointer}
.receipt-img-overlay.show{display:flex}
.receipt-img-overlay img{max-width:100%;max-height:88vh;border-radius:var(--radius-md);object-fit:contain;box-shadow:0 4px 24px rgba(0,0,0,.5);transform-origin:0 0;touch-action:none;will-change:transform}
.receipt-img-overlay .rimg-close{position:absolute;top:calc(var(--space-md) + env(safe-area-inset-top));right:var(--space-md);width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.14);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s ease}
.receipt-img-overlay .rimg-close:hover{background:rgba(255,255,255,.28)}
.receipt-img-overlay .rimg-close:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(16,185,129,.35)}

/* Header icon button in the receipts queue panel (shared component) */
.panel-header-btn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);background:var(--surface);color:var(--text2);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-tactile);margin-left:var(--space-xs)}
.panel-header-btn:hover{color:var(--primary);border-color:var(--primary)}
.panel-header-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--primary-glow)}
.panel-header-btn svg{width:20px;height:20px}

/* Confirm modal "will create" recap rows */
.wc-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);padding:7px 0;font-size:var(--fs-sm);border-bottom:1px solid var(--border)}
.wc-row:last-child{border-bottom:none;padding-bottom:2px}
.wc-note{display:flex;align-items:flex-start;gap:8px;margin-top:var(--space-md);padding:0 var(--space-sm);font-size:var(--fs-xs);color:var(--muted);text-align:left;line-height:1.45}
.wc-note svg{width:13px;height:13px;flex-shrink:0;margin-top:1px}
/* Expandable ordered-items breakdown on summary receipt expenses */
.exp-items-detail{margin:-10px 0 var(--space-sm) 46px;padding:8px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:10px;font-size:var(--fs-xs)}
.exp-items-title{font-weight:600;color:var(--muted);letter-spacing:.05em;text-transform:uppercase;font-size:.6rem;margin-bottom:4px}
.exp-items-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:3px 0;color:var(--text)}
.exp-items-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wc-lab{color:var(--text2)}
.wc-val{font-weight:600;color:var(--text1)}