/* ============================================================================
   FIGGY — PREMIUM PAPER DESIGN SYSTEM
   Light source: top-left. Canvas: warm sketching paper.
   Depth: Neumorphism (raised / recessed dual-shadow).
   ============================================================================ */

:root {
    --kl-canvas:  #edecea;
    --kl-surface: #f2f1ef;
    --kl-sage:    #a6bda3;
    --kl-slate:   #4a565c;
    --kl-text:    #2b2d2f;
    --kl-muted:   #6e7378;
    --kl-light:         rgba(255,255,255,0.82);
    --kl-light-muted:   rgba(255,255,255,0.5);
    --kl-green:   #3d6b50;
    --kl-amber:   #b07d2e;
    --kl-blue:    #3b6080;
    --kl-red:     #b83232;
    --kl-pending: #c0692a;

    --shadow-raise:
        -5px -5px 12px rgba(255,255,255,0.85),
         5px  5px 14px rgba(0,0,0,0.09);
    --shadow-raise-sm:
        -3px -3px 7px  rgba(255,255,255,0.82),
         3px  3px 8px  rgba(0,0,0,0.08);
    --shadow-press:
        inset  2px  2px 6px rgba(0,0,0,0.09),
        inset -2px -2px 6px rgba(255,255,255,0.75);
    --shadow-press-sm:
        inset  1px  1px 4px rgba(0,0,0,0.08),
        inset -1px -1px 4px rgba(255,255,255,0.72);
    --shadow-raise-sage:
        -4px -4px 10px rgba(180,210,176,0.7),
         4px  4px 12px rgba(0,0,0,0.18);

    --radius-card: 24px;
    --radius-pill: 100px;
    --radius-sm:   10px;
    --transition:  0.2s cubic-bezier(0.25,1,0.5,1);
}

[data-theme="dark"] {
    --kl-canvas:  #1a1c1e;
    --kl-surface: #22262a;
    --kl-sage:    #3d5c42;
    --kl-slate:   #2a3840;
    --kl-text:    #e8e6df;
    --kl-muted:   #8a9098;
    --kl-light:        rgba(232,230,223,0.85);
    --kl-light-muted:  rgba(232,230,223,0.5);
    --kl-green:   #5aad78;
    --kl-amber:   #d4a44e;
    --kl-blue:    #5a90bb;
    --kl-red:     #e05a5a;
    --kl-pending: #e07a3a;
    --shadow-raise:    -4px -4px 10px rgba(0,0,0,0.5),  4px  4px 12px rgba(0,0,0,0.7);
    --shadow-raise-sm: -2px -2px  6px rgba(0,0,0,0.45), 2px  2px  7px rgba(0,0,0,0.65);
    --shadow-press:    inset 2px 2px 6px rgba(0,0,0,0.5), inset -2px -2px 6px rgba(255,255,255,0.04);
    --shadow-press-sm: inset 1px 1px 4px rgba(0,0,0,0.45),inset -1px -1px 4px rgba(255,255,255,0.03);
    --shadow-raise-sage:  var(--shadow-raise);
}

/* ============================================================================
   RESET
   ============================================================================ */

*, *::before, *::after {
    box-sizing: border-box; margin: 0; padding: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-tap-highlight-color: transparent;
}
html { height: 100%; }

body {
    background-color: var(--kl-canvas);
    color: var(--kl-text);
    min-height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    transition: background-color var(--transition);
}

/* Paper grain overlay */
body::before {
    content: '';
    position: fixed; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.68' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 160px 160px;
    opacity: 0.025;
    pointer-events: none;
    z-index: 9999;
}

/* ============================================================================
   APP ROOT & VIEWS
   ============================================================================ */

#ledger-app-root {
    width: 100%;
    max-width: 440px;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    position: relative;
    padding-bottom: 0;
}

.app-view {
    display: none;
    flex-direction: column;
    gap: 14px;
    padding: 20px 16px 100px;
    animation: fadeIn 0.22s ease both;
}
.app-view.active-view { display: flex; }

/* Dashboard fills the viewport exactly — no scroll, no overlap */
#view-dashboard {
    height: 100svh;
    overflow: hidden;
    padding-bottom: 100px;
}
/* Transactions: view is a capped 100svh box; only the list itself scrolls.
   .app-view padding-bottom:100px = the physical gap between list bottom and dock. */
#view-transactions {
    height: 100svh;
    overflow: hidden;
}
/* Carousel + dots as one unit so dots hug the cards */
.card-carousel-section {
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    min-height: 0;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================================
   HEADER
   ============================================================================ */

#kl-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
}

.kl-brand { display: flex; align-items: center; gap: 9px; }
.brand-sprout-icon { width: 28px; height: 28px; flex-shrink: 0; object-fit: contain; }
.brand-title { font-size: 1.35rem; font-weight: 900; color: var(--kl-green); letter-spacing: -0.5px; }

.profile-avatar-badge {
    display: flex; align-items: center; gap: 5px;
    background: var(--kl-canvas); border: none; border-radius: var(--radius-pill);
    padding: 7px 11px 7px 9px; cursor: pointer;
    box-shadow: var(--shadow-raise-sm);
    transition: box-shadow var(--transition), transform var(--transition);
}
.profile-avatar-badge:active { box-shadow: var(--shadow-press-sm); transform: scale(0.97); }

#profile-avatar-letter {
    width: 30px; height: 30px;
    background: var(--kl-canvas);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; flex-shrink: 0;
    box-shadow: var(--shadow-raise-sm);
}
.avatar-chevron { width: 10px; height: 6px; color: var(--kl-muted); flex-shrink: 0; }

/* ============================================================================
   PROFILE PILLS ROW
   ============================================================================ */

.profile-switcher-row { display: flex; gap: 8px; flex-wrap: wrap; padding: 2px 0; }

.profile-pill {
    background: transparent;
    border: 1.5px solid rgba(0,0,0,0.12);
    color: var(--kl-muted);
    font-size: 0.82rem; font-weight: 700;
    padding: 7px 18px; border-radius: var(--radius-pill);
    cursor: pointer; transition: all var(--transition);
}
.profile-pill.active-profile-pill {
    background: var(--kl-green); border-color: transparent;
    color: #fff; box-shadow: var(--shadow-raise-sage);
}

/* ============================================================================
   DUAL CARDS
   ============================================================================ */

.dual-card-row { display: flex; gap: 12px; align-items: stretch; }

.kl-card { border-radius: var(--radius-card); padding: 16px; display: flex; flex-direction: column; width: 100%; }
.cash-card      { background: var(--kl-canvas); }
.time-card      { background: var(--kl-canvas); }
.volunteer-card { background: var(--kl-canvas); }
.cash-card.card-front      { border-left: 10px solid #3d6b50; padding-left: 20px; }
.time-card.card-front      { border-left: 10px solid #3b6080; padding-left: 20px; }
.volunteer-card.card-front { border-left: 10px solid #7a3d58; padding-left: 20px; }

.card-eyebrow {
    font-size: 0.65rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.6px; color: rgba(0,0,0,0.42); margin-bottom: 2px;
}
.card-eyebrow--light { color: rgba(40,70,100,0.6); }
.card-profile-name { font-size: 0.75rem; font-weight: 700; color: rgba(0,0,0,0.48); margin-bottom: 2px; }
.card-balance { font-size: 1.9rem; font-weight: 800; color: var(--kl-text); letter-spacing: -1px; line-height: 1.1; }
.card-sublabel { font-size: 0.7rem; font-weight: 600; color: rgba(40,70,100,0.6); margin-bottom: 4px; }
.time-balance { font-size: 2.4rem; font-weight: 800; color: #2b4a62; letter-spacing: -1px; line-height: 1; }
.time-unit { font-size: 1.1rem; font-weight: 700; opacity: 0.7; }
.card-section-divider { height: 1px; background: rgba(0,0,0,0.1); margin: 10px 0; }
.card-section-divider--light { background: rgba(40,70,100,0.12); }
.card-section-divider--vol  { background: rgba(0,0,0,0.09); }

/* --- Cash breakdown stacked rows --- */
.cash-breakdown-row { display: flex; flex-direction: column; gap: 5px; }
.breakdown-chip { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 0.9rem; font-weight: 700; color: rgba(0,0,0,0.55); }
.breakdown-chip-label { display: flex; align-items: center; gap: 5px; }
.breakdown-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.breakdown-chip-value { font-weight: 800; color: rgba(0,0,0,0.7); }

/* --- Goal rings --- */
.goals-rings-row { display: flex; gap: 6px; justify-content: space-around; }
.goal-ring-item { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 1; }
.goal-ring-name { font-size: 0.6rem; font-weight: 700; color: rgba(0,0,0,0.5); text-align: center; max-width: 62px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- Time progress --- */
.time-progress-track { height: 5px; border-radius: var(--radius-pill); background: rgba(40,70,100,0.12); box-shadow: inset 1px 1px 3px rgba(40,70,100,0.15); overflow: hidden; margin-bottom: 5px; }
.time-progress-fill { height: 100%; border-radius: var(--radius-pill); background: #3b6080; transition: width 0.5s ease; }
.time-usage-label { font-size: 0.58rem; font-weight: 600; color: rgba(40,70,100,0.6); }

/* ============================================================================
   RECENT ACTIVITY
   ============================================================================ */

.recent-activity-section { background: var(--kl-canvas); border-radius: 16px; padding: 13px 14px 16px; box-shadow: var(--shadow-raise-sm); margin-top: 4px; }
.recent-activity-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.recent-activity-label { font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; color: var(--kl-muted); }
.see-all-link { font-size: 0.68rem; font-weight: 700; color: var(--kl-slate); background: none; border: none; cursor: pointer; padding: 0; opacity: 0.8; transition: opacity var(--transition); }
.see-all-link:hover { opacity: 1; }

.mini-activity-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid rgba(0,0,0,0.05); }
.mini-activity-row:last-child { border-bottom: none; padding-bottom: 2px; }
.mini-icon { width: 28px; height: 28px; border-radius: 50%; background: var(--kl-surface); box-shadow: var(--shadow-raise-sm); display: flex; align-items: center; justify-content: center; font-size: 0.78rem; flex-shrink: 0; }
.mini-desc { flex: 1; font-size: 0.75rem; font-weight: 600; color: var(--kl-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-val { font-size: 0.78rem; font-weight: 800; flex-shrink: 0; letter-spacing: -0.2px; }
.mini-val--credit  { color: var(--kl-green); }
.mini-val--debit   { color: var(--kl-red); }
.mini-val--time    { color: var(--kl-blue); }
.mini-val--vol     { color: #7a4a5a; }
.vol-pending-badge  { font-size: 0.62rem; font-weight: 800; color: #c8985e; background: rgba(200,152,94,0.12); padding: 2px 6px; border-radius: 20px; }
.vol-approved-badge { font-size: 0.62rem; font-weight: 800; color: #3d6b50; background: rgba(61,107,80,0.1); padding: 2px 6px; border-radius: 20px; }
.vol-see-all-link   { color: #7a3d58; font-size: 0.68rem; }
.mini-val--pending { color: var(--kl-pending); font-style: italic; }
.recent-empty { font-size: 0.78rem; color: var(--kl-muted); font-style: italic; text-align: center; padding: 10px 0 4px; }

/* ============================================================================
   TRANSACTIONS VIEW
   ============================================================================ */

#tx-view-header { padding: 0; display: flex; flex-direction: column; gap: 12px; }
.tx-header-top { display: flex; align-items: center; gap: 10px; }
.tx-title { font-size: 1.15rem; font-weight: 800; color: var(--kl-text); letter-spacing: -0.3px; }
.tx-filter-pills { display: flex; gap: 6px; }
.tx-filter-pills .filter-pill { font-size: 0.75rem; padding: 5px 14px; }

.filter-pill { background: var(--kl-canvas); border: 1.5px solid rgba(0,0,0,0.1); color: var(--kl-muted); font-size: 0.8rem; font-weight: 700; padding: 6px 14px; border-radius: var(--radius-pill); cursor: pointer; transition: all var(--transition); }
.filter-pill.active-pill { background: linear-gradient(155deg, #c8985e 0%, #a87038 100%); color: #fff; border-color: transparent; box-shadow: -1px -1px 4px rgba(220,170,100,0.35), 2px 2px 6px rgba(0,0,0,0.18); }

#tx-bento-list { display: flex; flex-direction: column; gap: 10px; padding: 0; flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.tx-empty-notice { text-align: center; color: var(--kl-muted); font-size: 0.85rem; font-weight: 600; font-style: italic; padding: 32px 0; }

.bento-row { background: var(--kl-canvas); border-radius: 16px; padding: 12px 14px; box-shadow: var(--shadow-raise-sm); display: flex; align-items: center; gap: 12px; transition: transform var(--transition), box-shadow var(--transition); }
.bento-row:active { transform: scale(0.99); box-shadow: var(--shadow-press-sm); }
.bento-icon-badge { width: 36px; height: 36px; border-radius: 50%; background: var(--kl-surface); box-shadow: var(--shadow-raise-sm); display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
.bento-meta { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.bento-desc { font-size: 0.82rem; font-weight: 700; color: var(--kl-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bento-date { font-size: 0.68rem; font-weight: 600; color: var(--kl-muted); }
.bento-value { font-size: 0.95rem; font-weight: 800; flex-shrink: 0; letter-spacing: -0.3px; }
.bento-value--credit { color: var(--kl-green); }
.bento-value--debit  { color: var(--kl-red); }
.bento-value--time   { color: var(--kl-blue); }
.bento-value--pending { color: var(--kl-pending); font-style: italic; }

.bento-split-bar-wrap { padding: 4px 14px 10px calc(14px + 36px + 12px); margin-top: -4px; }
.bento-split-bar { display: flex; height: 4px; border-radius: var(--radius-pill); overflow: hidden; box-shadow: var(--shadow-press-sm); gap: 2px; }
.split-seg { height: 100%; border-radius: var(--radius-pill); }
.split-seg--vault  { background: var(--kl-green); }
.split-seg--wallet { background: var(--kl-amber); }
.split-seg--jar    { background: var(--kl-blue); }

/* ============================================================================
   BOTTOM DOCK — 4 keys
   ============================================================================ */

#bottom-dock {
    position: fixed; bottom: 0; left: 0; right: 0;
    display: flex; justify-content: center;
    padding: 10px 16px max(14px, env(safe-area-inset-bottom));
    pointer-events: none; z-index: 50;
}
.dock-capsule {
    display: flex; align-items: center; gap: 4px;
    background: var(--kl-canvas); border-radius: var(--radius-pill);
    padding: 8px 10px; box-shadow: var(--shadow-raise);
    pointer-events: auto;
}
.dock-key {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    background: var(--kl-canvas); border: none; border-radius: 50%;
    width: 50px; height: 50px;
    cursor: pointer; box-shadow: var(--shadow-raise-sm);
    transition: box-shadow var(--transition), transform var(--transition);
    color: var(--kl-text); flex-shrink: 0;
}
.dock-key:active { box-shadow: var(--shadow-press-sm); transform: scale(0.95); }
.dock-key-icon { font-size: 1.2rem; font-weight: 300; line-height: 1; display: flex; align-items: center; justify-content: center; }
.dock-key-label { font-size: 0.48rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--kl-muted); }
.redeem-key { width: 58px; height: 58px; }
.tx-key.view-active .dock-key-icon svg rect { fill: var(--kl-slate); }
.parent-key.parent-unlocked { color: var(--kl-green); }
.dock-pending-badge {
    position: absolute; top: 0; right: 0;
    background: var(--kl-pending); color: #fff;
    font-size: 0.58rem; font-weight: 800;
    min-width: 15px; height: 15px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 3px; border: 1.5px solid var(--kl-canvas);
    pointer-events: none; z-index: 2;
}

/* ============================================================================
   PARENT BOTTOM SHEET
   ============================================================================ */

.parent-overlay {
    position: fixed; inset: 0;
    background: rgba(20,24,28,0.4);
    backdrop-filter: blur(8px);
    z-index: 150;
    display: flex; align-items: flex-end; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity 0.28s ease;
}
.parent-overlay.sheet-open { opacity: 1; pointer-events: auto; }

.parent-sheet {
    width: 100%; max-width: 440px;
    background: var(--kl-canvas);
    border-radius: 24px 24px 0 0;
    height: 78vh; max-height: 86vh;
    display: flex; flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.25,1,0.5,1);
    box-shadow: 0 -8px 40px rgba(0,0,0,0.18);
    overflow: hidden;
}
.parent-overlay.sheet-open .parent-sheet { transform: translateY(0); }

.parent-sheet-handle-row { display: flex; justify-content: center; padding: 10px 0 4px; flex-shrink: 0; }
.parent-sheet-handle { width: 36px; height: 4px; border-radius: 2px; background: rgba(0,0,0,0.12); }

.parent-sheet-header { display: flex; justify-content: space-between; align-items: center; padding: 4px 18px 10px; flex-shrink: 0; }
.parent-mode-badge { font-size: 0.8rem; font-weight: 800; color: var(--kl-text); }
.parent-close-btn { background: var(--kl-canvas); border: none; border-radius: 50%; width: 30px; height: 30px; font-size: 0.85rem; color: var(--kl-muted); cursor: pointer; box-shadow: var(--shadow-raise-sm); display: flex; align-items: center; justify-content: center; transition: box-shadow var(--transition); }
.parent-close-btn:active { box-shadow: var(--shadow-press-sm); }

.parent-tab-bar { display: flex; gap: 4px; padding: 0 14px 12px; flex-shrink: 0; border-bottom: 1px solid rgba(0,0,0,0.07); }
.parent-tab {
    flex: 1; background: transparent; border: none; border-radius: var(--radius-pill);
    padding: 8px 4px; font-size: 0.72rem; font-weight: 700; color: var(--kl-muted);
    cursor: pointer; transition: all var(--transition); position: relative;
    display: flex; align-items: center; justify-content: center; gap: 4px;
}
.parent-tab.active-parent-tab { background: linear-gradient(155deg, #c8985e 0%, #a87038 100%); color: #fff; box-shadow: -2px -2px 5px rgba(220,170,100,0.4), 2px 2px 7px rgba(0,0,0,0.18); }

.tab-badge { background: var(--kl-red); color: #fff; font-size: 0.55rem; font-weight: 900; border-radius: 100px; padding: 1px 5px; min-width: 16px; text-align: center; }

.parent-panels-container { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.parent-panel { display: none; flex-direction: column; gap: 0; padding: 16px; }
.parent-panel.active-panel { display: flex; }

.panel-section { border-bottom: 1px solid rgba(0,0,0,0.06); padding-bottom: 18px; margin-bottom: 18px; }
.panel-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.panel-label { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; color: var(--kl-muted); display: block; margin-bottom: 10px; }
.panel-empty-text { font-size: 0.85rem; color: var(--kl-muted); font-style: italic; text-align: center; padding: 20px 0; }

.members-profile-switcher { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.members-profile-switcher .profile-pill { font-size: 0.75rem; padding: 5px 14px; }

/* ============================================================================
   FORM ELEMENTS (shared)
   ============================================================================ */

.kl-input {
    width: 100%; background: var(--kl-canvas); color: var(--kl-text);
    border: none; padding: 9px 12px; border-radius: var(--radius-sm);
    font-size: 0.85rem; font-weight: 600; outline: none;
    box-shadow: var(--shadow-press-sm); margin-bottom: 0;
    transition: box-shadow var(--transition);
}
.kl-input:focus { box-shadow: var(--shadow-press); }

.kl-select {
    width: 100%; background: var(--kl-canvas); color: var(--kl-text);
    border: none; padding: 9px 32px 9px 12px; border-radius: var(--radius-sm);
    font-size: 0.82rem; font-weight: 600; outline: none;
    box-shadow: var(--shadow-press-sm); height: 38px; cursor: pointer;
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.kl-btn {
    width: 100%; background: var(--kl-canvas); color: var(--kl-text);
    border: none; padding: 10px 16px; border-radius: var(--radius-pill);
    font-weight: 700; font-size: 0.85rem; cursor: pointer;
    box-shadow: var(--shadow-raise-sm);
    transition: box-shadow var(--transition), transform var(--transition);
}
.kl-btn:active { box-shadow: var(--shadow-press-sm); transform: scale(0.98); }
.kl-btn--primary { background: linear-gradient(155deg, #c8985e 0%, #a87038 100%); color: #fff; box-shadow: -2px -2px 6px rgba(220,170,100,0.45), 2px 2px 8px rgba(0,0,0,0.18); }
.kl-btn--danger { background: var(--kl-red); color: #fff; }
.kl-reset-btn { background: none; border: none; color: var(--kl-red); font-weight: 700; font-size: 0.82rem; cursor: pointer; text-align: left; padding: 0; }
.edit-recalc-note { font-size: 0.65rem; color: var(--kl-muted); font-style: italic; margin: 0; }

/* ============================================================================
   MODALS
   ============================================================================ */

#bank-custom-modal-overlay,
#bank-edit-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(20,24,28,0.4); backdrop-filter: blur(10px);
    display: flex; align-items: center; justify-content: center;
    z-index: 200; opacity: 0; pointer-events: none;
    transition: opacity var(--transition); padding: 20px;
}
#bank-custom-modal-overlay.modal-active,
#bank-edit-modal-overlay.modal-active { opacity: 1; pointer-events: auto; }

.kl-modal-window {
    width: 100%; max-width: 400px; max-height: 85vh;
    background: var(--kl-canvas); border-radius: var(--radius-card); padding: 22px;
    display: flex; flex-direction: column;
    box-shadow: -8px -8px 20px rgba(255,255,255,0.6), 8px 8px 24px rgba(0,0,0,0.2);
}
.modal-header-row h3 { font-size: 0.9rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px; color: var(--kl-text); border-bottom: 1px solid rgba(0,0,0,0.08); padding-bottom: 12px; }
.modal-body-content { overflow-y: auto; margin: 16px 0; max-height: 55vh; font-size: 0.9rem; font-weight: 600; line-height: 1.5; color: var(--kl-text); }
.modal-footer-row { margin-top: auto; }
.edit-field-label { display: block; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--kl-muted); margin-bottom: 6px; }

.modal-selection-grid { display: flex; flex-direction: column; gap: 8px; }
.modal-selection-tile {
    display: flex; justify-content: space-between; align-items: center;
    background: var(--kl-surface); border: none; padding: 13px 16px; border-radius: 14px;
    cursor: pointer; text-align: left; box-shadow: var(--shadow-raise-sm); width: 100%;
    transition: box-shadow var(--transition), transform var(--transition);
}
.modal-selection-tile:active { box-shadow: var(--shadow-press-sm); transform: scale(0.98); }
.modal-selection-tile span:first-child { font-size: 0.9rem; font-weight: 700; color: var(--kl-text); }
.tile-payout { font-size: 0.85rem; font-weight: 800; color: var(--kl-green); }

.admin-card-well { background: var(--kl-canvas); border-radius: 12px; padding: 12px; box-shadow: var(--shadow-press-sm); margin-bottom: 10px; }

[data-theme="light"] #theme-toggle-btn::after { content: " 🌙"; }
[data-theme="dark"]  #theme-toggle-btn::after { content: " ☀️"; }

/* ============================================================================
   ONBOARDING
   ============================================================================ */

.onboarding-overlay {
    position: fixed; inset: 0; z-index: 500;
    background: rgba(20,24,28,0.35);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ob-card {
    width: 100%; max-width: 440px; height: 100%;
    max-height: 100svh;
    background: var(--kl-canvas);
    display: flex; flex-direction: column;
    overflow: hidden;
}

@media (min-width: 520px) {
    .ob-card {
        max-height: 90svh;
        border-radius: 28px;
        box-shadow: -8px -8px 24px rgba(255,255,255,0.5), 8px 8px 32px rgba(0,0,0,0.2);
    }
}

.ob-step {
    display: none; flex-direction: column; flex: 1;
    padding: 48px 24px 24px; overflow-y: auto;
    animation: fadeIn 0.25s ease both;
}
.ob-step.active-ob-step { display: flex; }

.ob-brand { font-size: 1.4rem; font-weight: 900; color: var(--kl-text); margin-bottom: 20px; letter-spacing: -0.3px; }
.ob-brand span { color: var(--kl-green); }
.ob-step-indicator { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; color: var(--kl-muted); margin-bottom: 10px; }
.ob-title { font-size: 1.7rem; font-weight: 900; color: var(--kl-text); letter-spacing: -0.5px; line-height: 1.15; margin-bottom: 8px; }
.ob-subtitle { font-size: 0.9rem; font-weight: 500; color: var(--kl-muted); line-height: 1.5; margin-bottom: 24px; }
.ob-hint { font-size: 0.78rem; font-weight: 700; color: #c0392b; text-align: center; margin-top: 10px; }

.ob-members-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.ob-member-card {
    display: flex; align-items: center; gap: 12px;
    background: var(--kl-canvas); border-radius: 14px;
    padding: 12px 14px; box-shadow: var(--shadow-raise-sm);
}
.ob-avatar-btn { font-size: 1.6rem; background: none; border: none; cursor: pointer; line-height: 1; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; box-shadow: var(--shadow-raise-sm); flex-shrink: 0; transition: transform var(--transition); }
.ob-avatar-btn:active { transform: scale(0.92); box-shadow: var(--shadow-press-sm); }
.ob-name-input { flex: 1; background: var(--kl-canvas); border: none; border-radius: var(--radius-sm); padding: 8px 10px; font-size: 0.95rem; font-weight: 700; color: var(--kl-text); box-shadow: var(--shadow-press-sm); outline: none; }
.ob-remove-btn { background: none; border: none; color: var(--kl-muted); font-size: 1.1rem; cursor: pointer; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0; transition: color var(--transition); }
.ob-remove-btn:hover { color: var(--kl-red); }

.ob-ghost-btn { background: none; border: none; color: var(--kl-muted); font-size: 0.85rem; font-weight: 700; cursor: pointer; padding: 8px 0; text-align: left; margin-bottom: 8px; }

.ob-chores-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.ob-chore-tile {
    background: var(--kl-canvas); border-radius: 14px; padding: 12px;
    box-shadow: var(--shadow-raise-sm); cursor: pointer;
    border: 2px solid transparent; transition: all var(--transition);
    display: flex; flex-direction: column; gap: 8px;
}
.ob-chore-tile.selected { border-color: var(--kl-green); background: rgba(61,107,80,0.06); }
.ob-chore-name { font-size: 0.82rem; font-weight: 700; color: var(--kl-text); }
.ob-chore-val-row { display: flex; align-items: center; gap: 4px; }
.ob-chore-val-row span { font-size: 0.75rem; font-weight: 600; color: var(--kl-muted); }
.ob-chore-val { width: 52px; background: var(--kl-canvas); border: none; border-radius: 6px; padding: 3px 6px; font-size: 0.82rem; font-weight: 700; color: var(--kl-text); box-shadow: var(--shadow-press-sm); outline: none; text-align: right; }

.ob-goals-container { display: flex; flex-direction: column; gap: 14px; margin-bottom: 12px; }
.ob-member-goal-group { background: var(--kl-canvas); border-radius: 14px; padding: 14px; box-shadow: var(--shadow-raise-sm); display: flex; flex-direction: column; gap: 8px; }
.ob-member-goal-header { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.ob-member-goal-avatar { font-size: 1.2rem; }
.ob-member-goal-name { font-size: 0.88rem; font-weight: 800; color: var(--kl-text); }
.ob-goal-row { display: flex; gap: 8px; align-items: center; }
.ob-goal-row input:first-child { flex: 1.4; }
.ob-goal-row input:nth-child(2) { width: 72px; }

/* Add / remove goal buttons — shared by onboarding and member inline edit */
.ob-add-goal-btn {
    display: inline-flex; align-items: center; gap: 5px;
    background: none; border: none; cursor: pointer;
    font-size: 0.75rem; font-weight: 700; color: var(--kl-green);
    padding: 4px 2px; margin-bottom: 4px;
    transition: opacity var(--transition);
}
.ob-add-goal-btn:active { opacity: 0.6; }
.ob-goal-remove-btn {
    background: none; border: none; cursor: pointer;
    font-size: 0.8rem; color: var(--kl-muted); padding: 2px 4px;
    flex-shrink: 0; line-height: 1;
    transition: color var(--transition);
}
.ob-goal-remove-btn:hover { color: #c0392b; }

.ob-top { flex-shrink: 0; }
.ob-bottom { margin-top: auto; padding-top: 16px; display: flex; gap: 10px; align-items: center; }
.ob-cta-btn { flex: 1; padding: 14px; font-size: 0.95rem; }

/* ============================================================================
   GOAL RINGS
   ============================================================================ */

.ring-bg  { fill: none; stroke: rgba(0,0,0,0.09); stroke-width: 6; }
.ring-fill { fill: none; stroke: var(--kl-green); stroke-width: 6; stroke-linecap: round; transition: stroke-dasharray 0.6s ease; }
.ring-name { font-size: 0.65rem; font-weight: 600; color: var(--kl-text); text-align: center; line-height: 1.2; }
.ring-pct  { font-size: 0.6rem; font-weight: 700; color: var(--kl-green); text-align: center; }
.no-goals-msg { font-size: 0.8rem; color: var(--kl-muted); font-style: italic; padding: 8px 0; }

/* ============================================================================
   TRANSACTIONS LIST
   ============================================================================ */

.tx-edit-btn { background: none; border: none; cursor: pointer; color: var(--kl-muted); font-size: 0.9rem; padding: 4px; }

/* ============================================================================
   PARENT APPROVALS
   ============================================================================ */

.approval-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,0.06); gap: 8px; }
.approval-row:last-child { border-bottom: none; }
.approval-info { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.approval-child { font-size: 0.75rem; color: var(--kl-muted); }
.approval-chore { font-size: 0.88rem; font-weight: 600; color: var(--kl-text); }
.approval-val   { font-size: 0.78rem; font-weight: 700; color: var(--kl-green); }
.approval-actions { display: flex; gap: 6px; flex-shrink: 0; }
.btn-approve { background: var(--kl-green); color: #fff; border: none; border-radius: 10px; padding: 6px 12px; font-size: 0.78rem; font-weight: 600; cursor: pointer; }
.btn-deny    { background: var(--kl-red);   color: #fff; border: none; border-radius: 10px; padding: 6px 12px; font-size: 0.78rem; font-weight: 600; cursor: pointer; }

/* ============================================================================
   PARENT CHORES ADMIN
   ============================================================================ */

.chore-admin-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid rgba(0,0,0,0.06); }
.chore-admin-row:last-child { border-bottom: none; }
.car-name { flex: 1; font-size: 0.84rem; font-weight: 500; color: var(--kl-text); }
.car-val  { font-size: 0.78rem; font-weight: 700; color: var(--kl-green); }
.car-delete-btn { background: none; border: none; cursor: pointer; color: var(--kl-red); font-size: 1rem; padding: 2px 6px; }

/* ============================================================================
   CHORE LOG MODAL
   ============================================================================ */

.chore-modal-list { display: flex; flex-direction: column; gap: 0; }
.chore-list-item { display: flex; flex-direction: column; gap: 5px; padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,0.06); }
.chore-list-item:last-child { border-bottom: none; padding-bottom: 0; }
.chore-item-bottom-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chore-item-name { flex: 1; min-width: 0; font-size: 0.86rem; font-weight: 600; color: var(--kl-text); line-height: 1.3; word-break: break-word; }
.chore-item-val  { font-size: 0.8rem; font-weight: 800; color: var(--kl-green); white-space: nowrap; flex-shrink: 0; }
.chore-item-time { font-size: 0.8rem; font-weight: 800; color: var(--kl-blue); white-space: nowrap; flex-shrink: 0; }
.chore-log-btn   { width: auto !important; padding: 7px 16px; font-size: 0.8rem; flex-shrink: 0; }
.modal-empty     { font-size: 0.84rem; color: var(--kl-muted); font-style: italic; padding: 16px 0; }

/* ============================================================================
   REDEEM FORM
   ============================================================================ */

.redeem-form { display: flex; flex-direction: column; gap: 6px; }
.redeem-form .kl-select, .redeem-form .kl-input { margin-bottom: 0; }
.form-label  { font-size: 0.72rem; font-weight: 600; color: var(--kl-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 8px; }

/* ============================================================================
   ONBOARDING GOALS STEP
   ============================================================================ */

.ob-goals-member-label { font-size: 1.1rem; font-weight: 700; color: var(--kl-text); margin-bottom: 2px; }
.ob-goals-counter { font-size: 0.75rem; color: var(--kl-muted); margin-bottom: 12px; }
.ob-goals-nav { display: flex; gap: 10px; margin-top: 16px; }
.ob-goals-nav .kl-btn { flex: 1; }

/* ============================================================================
   MEMBER LIST (Members tab)
   ============================================================================ */

.member-list-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,0.06);
}
.member-list-item:last-child { border-bottom: none; }
.member-list-avatar { font-size: 1.3rem; flex-shrink: 0; }
.member-list-name { flex: 1; font-size: 0.88rem; font-weight: 700; color: var(--kl-text); }
.member-list-actions { display: flex; gap: 6px; }
.member-edit-btn { background: var(--kl-canvas); border: none; border-radius: 10px; padding: 5px 12px; font-size: 0.75rem; font-weight: 700; color: var(--kl-slate); cursor: pointer; box-shadow: var(--shadow-raise-sm); transition: box-shadow var(--transition); }
.member-edit-btn:active { box-shadow: var(--shadow-press-sm); }
.member-delete-btn { background: none; border: none; color: var(--kl-red); font-size: 0.85rem; cursor: pointer; padding: 4px 8px; opacity: 0.7; }
.member-delete-btn:hover { opacity: 1; }

.member-inline-edit {
    background: var(--kl-canvas); border-radius: 16px; padding: 14px;
    box-shadow: var(--shadow-press-sm); margin: 6px 0 10px;
    display: flex; flex-direction: column; gap: 10px;
}
.member-inline-edit .inline-edit-title { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--kl-green); }
.inline-goal-row { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.inline-goal-row input:first-child { flex: 1; }
.inline-goal-row input:nth-child(2) { width: 80px; }
.ie-goal-move-btn { background: none; border: none; cursor: pointer; font-size: 0.65rem; color: var(--kl-muted); padding: 2px 4px; line-height: 1; border-radius: 3px; }
.ie-goal-move-btn:active { background: rgba(0,0,0,0.06); }
.inline-balance-row { display: flex; gap: 8px; align-items: center; }
.inline-balance-row select { flex: 1.4; }
.inline-balance-row input { flex: 0.8; }
.inline-edit-actions { display: flex; gap: 8px; }
.inline-edit-actions .kl-btn { flex: 1; font-size: 0.8rem; padding: 8px; }

.add-member-row { display: flex; gap: 10px; align-items: center; }
.add-member-row .kl-input { flex: 1; }

/* ============================================================================
   ONBOARDING CHORE BUILDER
   ============================================================================ */

.ob-chore-builder { display: flex; flex-direction: column; gap: 14px; flex: 1; overflow-y: auto; }

.ob-chore-section-label { font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; color: var(--kl-muted); margin-bottom: 4px; }

.ob-selected-chores { display: flex; flex-direction: column; gap: 6px; min-height: 10px; }

.ob-selected-row {
    display: flex; align-items: center; gap: 8px;
    background: var(--kl-canvas); border-radius: 12px; padding: 8px 12px;
    box-shadow: var(--shadow-raise-sm);
}
.ob-selected-name { flex: 1; font-size: 0.84rem; font-weight: 600; color: var(--kl-text); }
.ob-value-type { font-size: 0.72rem; font-weight: 700; color: var(--kl-muted); white-space: nowrap; }
.ob-value-input { width: 64px; background: var(--kl-canvas); border: none; border-radius: 8px; padding: 5px 8px; font-size: 0.82rem; font-weight: 700; color: var(--kl-text); box-shadow: var(--shadow-press-sm); outline: none; text-align: right; }
.ob-remove-chore-btn { background: none; border: none; color: var(--kl-muted); font-size: 1rem; cursor: pointer; padding: 0 2px; transition: color var(--transition); }
.ob-remove-chore-btn:hover { color: var(--kl-red); }

.ob-custom-chore-row { display: flex; gap: 8px; align-items: center; margin-top: 2px; }
.ob-custom-chore-row .ob-name-input { flex: 1; }
.ob-custom-chore-row .ob-value-input { width: 70px; }
.ob-add-custom-btn { background: var(--kl-green); color: #fff; border: none; border-radius: 10px; padding: 7px 14px; font-size: 0.8rem; font-weight: 700; cursor: pointer; white-space: nowrap; }

.ob-suggestions-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.ob-suggestion-pill {
    background: var(--kl-canvas); border: 1.5px solid rgba(0,0,0,0.1);
    border-radius: 100px; padding: 6px 14px;
    font-size: 0.78rem; font-weight: 700; color: var(--kl-muted);
    cursor: pointer; transition: all var(--transition);
}
.ob-suggestion-pill:hover { border-color: var(--kl-green); color: var(--kl-green); }
.ob-suggestion-pill.used { opacity: 0.35; pointer-events: none; }

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (min-width: 480px) {
    body { padding: 24px 0; }
    #ledger-app-root {
        border-radius: 32px; overflow: hidden; min-height: 820px;
        box-shadow: -12px -12px 30px rgba(255,255,255,0.6), 12px 12px 40px rgba(0,0,0,0.18);
    }
    #bottom-dock { border-radius: 0 0 32px 32px; }
    .parent-sheet { border-radius: 24px 24px 0 0; }
}

/* ============================================================================
   CARD FLIP ANIMATION
   ============================================================================ */

.kl-card-flipper {
    flex: 1;
    perspective: 900px;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    flex-direction: column;
}

.kl-card-flipper-inner {
    flex: 1;
    position: relative;
    width: 100%;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

.kl-card-flipper.is-flipped .kl-card-flipper-inner {
    transform: rotateY(180deg);
}

.card-face {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.card-face.card-front { flex: 1; position: relative; }

.card-back {
    position: absolute;
    inset: 0;
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    overflow: hidden;
}

.card-flip-hint {
    font-size: 0.56rem; font-weight: 700; opacity: 0.35;
    text-align: center; margin-top: auto; padding-top: 8px;
    letter-spacing: 0.3px;
}

/* ============================================================================
   CARD BACK CONTENT
   ============================================================================ */

.card-back-eyebrow {
    font-size: 0.58rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.6px; color: rgba(0,0,0,0.4); margin-bottom: 2px;
}
.card-back-big {
    font-size: 1.5rem; font-weight: 800; color: var(--kl-text);
    letter-spacing: -0.5px; line-height: 1.2; margin-bottom: 2px;
}
.card-back-sub { font-size: 0.72rem; font-weight: 600; opacity: 0.6; }

.card-back-goals { display: flex; flex-direction: column; gap: 8px; }
.card-back-goal { display: flex; flex-direction: column; gap: 3px; }
.cbg-top { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; }
.cbg-name { font-size: 0.72rem; font-weight: 700; color: rgba(0,0,0,0.65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.cbg-pct { font-size: 0.68rem; font-weight: 800; color: var(--kl-green); flex-shrink: 0; }
.cbg-bar { height: 4px; border-radius: var(--radius-pill); background: rgba(0,0,0,0.1); overflow: hidden; }
.cbg-fill { height: 100%; border-radius: var(--radius-pill); background: var(--kl-green); transition: width 0.5s ease; }
.cbg-pace { font-size: 0.6rem; font-weight: 600; color: rgba(0,0,0,0.42); }
.card-back-empty { font-size: 0.75rem; color: rgba(0,0,0,0.38); font-style: italic; text-align: center; padding: 10px 0; }
.card-back-hint { font-size: 0.56rem; font-weight: 700; opacity: 0.35; text-align: center; margin-top: auto; padding-top: 8px; letter-spacing: 0.3px; }

/* Time front stats */
.time-front-stats { display: flex; flex-direction: column; gap: 7px; }
.tfs-row { display: flex; justify-content: space-between; align-items: center; }
.tfs-label { font-size: 0.9rem; font-weight: 700; color: rgba(40,70,100,0.55); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tfs-value { font-size: 0.9rem; font-weight: 800; color: #2b4a62; }

/* Time back stats */
.time-back-stats { display: flex; gap: 8px; margin-top: 4px; }
.tbs-item { flex: 1; background: rgba(0,0,0,0.04); border-radius: 12px; padding: 10px 8px; display: flex; flex-direction: column; gap: 3px; align-items: center; }
.tbs-val { font-size: 1.1rem; font-weight: 800; color: #2b4a62; letter-spacing: -0.3px; line-height: 1.2; }
.tbs-label { font-size: 0.58rem; font-weight: 700; color: rgba(40,70,100,0.55); text-transform: uppercase; letter-spacing: 0.4px; text-align: center; line-height: 1.3; }

/* Dual-earn choice buttons */
.chore-earn-choice { display: flex; gap: 6px; flex-shrink: 0; }
.chore-earn-btn { width: auto !important; min-width: 72px; padding: 7px 11px; font-size: 0.75rem; flex-shrink: 0; white-space: nowrap; text-align: center; }
.chore-earn-placeholder { min-width: 72px; visibility: hidden; }

/* ============================================================================
   TRANSACTIONS — BACK NAV
   ============================================================================ */

.tx-back-btn {
    display: flex; align-items: center; justify-content: center;
    background: var(--kl-canvas); border: none; border-radius: 50%;
    width: 34px; height: 34px; flex-shrink: 0;
    cursor: pointer; box-shadow: var(--shadow-raise-sm); color: var(--kl-muted);
    transition: box-shadow var(--transition), color var(--transition);
}
.tx-back-btn:active { box-shadow: var(--shadow-press-sm); }
.tx-back-btn:hover { color: var(--kl-text); }

/* ============================================================================
   GOAL DISPLAY — ADAPTIVE
   ============================================================================ */

/* Single goal — full-width progress bar */
.goal-single-bar { display: flex; flex-direction: column; gap: 5px; }
.gsb-header { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.gsb-name { font-size: 0.78rem; font-weight: 700; color: rgba(0,0,0,0.6); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gsb-pct  { font-size: 0.75rem; font-weight: 800; color: var(--kl-green); flex-shrink: 0; }
.gsb-track { height: 6px; border-radius: var(--radius-pill); background: rgba(0,0,0,0.1); overflow: hidden; box-shadow: var(--shadow-press-sm); }
.gsb-fill  { height: 100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, #5a9e74, #3d6b50); transition: width 0.6s ease; }
.gsb-amounts { font-size: 0.65rem; font-weight: 600; color: rgba(0,0,0,0.42); }

/* Three-or-four goal rings — smaller size */
.goals-rings-row--sm .goal-ring-item svg { width: 52px; height: 52px; }
.goals-rings-row--sm .goal-ring-name { font-size: 0.55rem; max-width: 48px; }
.goals-rings-row--sm .ring-pct { font-size: 0.55rem; }
.goals-more-badge {
    display: flex; align-items: center; justify-content: center;
    font-size: 0.65rem; font-weight: 800; color: var(--kl-green);
    background: rgba(61,107,80,0.1); border-radius: var(--radius-pill);
    padding: 4px 8px; align-self: center; white-space: nowrap;
}

/* ============================================================================
   ONBOARDING — PIN STEP
   ============================================================================ */

.ob-pin-setup { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.ob-pin-input { font-size: 1.4rem; letter-spacing: 0.4em; text-align: center; padding: 14px; margin-bottom: 0; }

/* ============================================================================
   PARENT MODE — CHORE INLINE EDIT
   ============================================================================ */

.car-edit-btn { background: none; border: none; cursor: pointer; color: var(--kl-muted); font-size: 0.85rem; padding: 2px 6px; transition: color var(--transition); }
.car-edit-btn:hover { color: var(--kl-green); }

.chore-inline-edit {
    background: var(--kl-canvas); border-radius: 12px; padding: 10px 12px;
    box-shadow: var(--shadow-press-sm); margin: 4px 0 8px;
    display: flex; flex-direction: column; gap: 8px;
}
.chore-edit-row { display: flex; gap: 8px; align-items: center; }
.chore-edit-row .kl-input { flex: 1; margin: 0; font-size: 0.82rem; }
.chore-edit-actions { display: flex; gap: 6px; }
.chore-edit-actions .kl-btn { flex: 1; font-size: 0.78rem; padding: 7px; }

/* ============================================================================
   PARENT MODE — MEMBER INLINE EDIT (avatar + name)
   ============================================================================ */

.ie-identity-row { display: flex; align-items: center; gap: 10px; }
.ie-avatar-cycle { font-size: 1.4rem; background: none; border: none; cursor: pointer; border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-raise-sm); flex-shrink: 0; transition: transform var(--transition); }
.ie-avatar-cycle:active { transform: scale(0.92); }
.ie-name-input { flex: 1; margin: 0; }

/* ============================================================================
   GUIDE / HELP TAB
   ============================================================================ */

.guide-block { margin-bottom: 10px; }
.guide-heading { font-size: 0.78rem; font-weight: 800; color: var(--kl-text); margin-bottom: 3px; }
.guide-body { font-size: 0.78rem; font-weight: 500; color: var(--kl-muted); line-height: 1.55; }
.guide-body strong { color: var(--kl-text); font-weight: 700; }
.guide-body em { color: var(--kl-green); font-style: normal; font-weight: 700; }

/* ============================================================================
   BADGE SYSTEM
   ============================================================================ */

/* Badge hint on cash card front */
.dash-badge-hint {
    display: flex; justify-content: flex-end; margin-top: 6px;
}
.bdg-hint-text {
    font-size: 0.68rem; font-weight: 700; color: var(--kl-green);
    background: rgba(61,107,80,0.1); border-radius: var(--radius-pill);
    padding: 3px 10px; cursor: pointer; transition: opacity var(--transition);
}
.bdg-hint-text:active { opacity: 0.7; }

/* Badge approval rows */
.approval-row-badge { background: rgba(61,107,80,0.04); }
.badge-pill {
    font-size: 0.6rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.4px; background: rgba(61,107,80,0.15);
    color: var(--kl-green); border-radius: var(--radius-pill); padding: 2px 6px;
    vertical-align: middle; margin-left: 4px;
}

/* Badge collection modal */
#badge-collection-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(20,24,28,0.4); backdrop-filter: blur(10px);
    display: flex; align-items: center; justify-content: center;
    z-index: 300; opacity: 0; pointer-events: none;
    transition: opacity var(--transition); padding: 20px;
}
#badge-collection-modal.modal-active { opacity: 1; pointer-events: auto; }
#badge-modal-content { -ms-overflow-style: none; scrollbar-width: none; }
#badge-modal-content::-webkit-scrollbar { display: none; }
.modal-close-x {
    background: none; border: none; cursor: pointer;
    font-size: 1rem; color: var(--kl-muted); padding: 4px;
}
.modal-header-row { display: flex; justify-content: space-between; align-items: center; }

.bdg-collection-row {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,0.06);
}
.bdg-collection-row:last-child { border-bottom: none; }
.bdg-locked { opacity: 0.38; }
.bdg-col-emoji { font-size: 1.6rem; flex-shrink: 0; margin-top: 2px; }
.bdg-col-info { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.bdg-col-name { font-size: 0.82rem; font-weight: 800; color: var(--kl-text); }
.bdg-col-desc { font-size: 0.72rem; color: var(--kl-muted); }
.bdg-col-earned { font-size: 0.85rem; color: var(--kl-green); font-weight: 800; align-self: center; }
.bdg-thr-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.bdg-thr-chip {
    font-size: 0.65rem; font-weight: 700; border-radius: var(--radius-pill);
    padding: 3px 8px; background: rgba(0,0,0,0.06); color: var(--kl-muted);
}
.bdg-thr-done {
    background: rgba(61,107,80,0.12); color: var(--kl-green);
}

/* ============================================================================
   ACHIEVEMENTS MODAL
   ============================================================================ */

/* Expanded active profile pill on dashboard */
.profile-pill--expanded { white-space: nowrap; }
.profile-pill-level {
    font-size: 0.6rem; font-weight: 600;
    opacity: 0.82; margin-left: 10px;
    letter-spacing: 0;
}

/* Profile switcher inside achievements modal */
.ach-modal-profile-row {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin-bottom: 2px;
}
.ach-profile-chip {
    display: inline-flex; align-items: center;
    font-size: 0.78rem; font-weight: 700;
    padding: 5px 14px; border-radius: var(--radius-pill);
    border: 1.5px solid rgba(0,0,0,0.12);
    background: transparent; color: var(--kl-muted);
    cursor: pointer;
}
.ach-profile-chip--active {
    background: var(--kl-green); border-color: transparent;
    color: #fff;
}

/* Level section header row */
.ach-level-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 4px;
}
.ach-level-label {
    font-size: 0.68rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.4px; color: var(--kl-muted);
}
.ach-info-btn {
    width: 18px; height: 18px; border-radius: 50%;
    border: 1.5px solid rgba(0,0,0,0.2); background: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.55rem; font-weight: 900; color: var(--kl-muted);
    cursor: pointer; flex-shrink: 0;
}

/* Collapsible points info panel */
.ach-info-panel {
    display: none; background: var(--kl-canvas);
    border-radius: 10px;
    box-shadow: inset 3px 3px 7px rgba(0,0,0,0.11), inset -2px -2px 5px rgba(255,255,255,0.72);
    padding: 9px 12px; margin-top: 9px;
}
.ach-info-panel--open { display: block; }
.ach-info-panel-title {
    font-size: 0.6rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--kl-muted); margin-bottom: 6px;
}
.ach-info-row {
    display: flex; align-items: center; gap: 6px;
    padding: 2.5px 0; font-size: 0.72rem; color: var(--kl-text);
}
.ach-info-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.ach-info-pts { margin-left: auto; font-weight: 700; font-size: 0.72rem; }

/* Level progression track */
.ach-level-pts-label {
    font-size: 0.68rem; font-weight: 700; color: var(--kl-muted);
    text-align: center; margin: 0 0 10px;
}
.ach-level-track {
    display: flex; align-items: flex-start;
    justify-content: center; padding: 0 4px;
}
.ach-pip {
    display: flex; flex-direction: column;
    align-items: center; gap: 5px; flex: 0 0 auto;
}
.ach-pip-circle {
    width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; color: #fff; font-size: 0.6rem;
}
.ach-pip-circle--current {
    width: 28px; height: 28px; font-size: 0.72rem; margin-top: -3px;
}
.ach-pip-name {
    font-size: 0.54rem; font-weight: 700;
    text-align: center; white-space: nowrap;
    color: var(--kl-body);
}
.ach-pip-connector {
    width: 22px; height: 3px; border-radius: 2px;
    background: rgba(0,0,0,0.1);
    margin-top: 9px; flex-shrink: 0;
}
.ach-pip-connector--earned { background: rgba(90,154,106,0.4); }

/* Section divider with label */
.ach-section-div {
    display: flex; align-items: center; gap: 7px;
    margin: 13px 0 9px;
}
.ach-section-line { flex: 1; height: 1px; background: rgba(0,0,0,0.09); }
.ach-section-label {
    font-size: 0.6rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.6px; color: var(--kl-muted); white-space: nowrap;
}

/* Trophy shelf — one-time badges */
.ach-shelf {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
}
.ach-shelf-slot {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 7px 4px;
    background: rgba(255,255,255,0.5);
    border-radius: 10px; border: 0.5px solid rgba(0,0,0,0.08);
}
.ach-shelf-slot--locked { opacity: 0.28; }
.ach-shelf-emoji { font-size: 1.2rem; line-height: 1; }
.ach-shelf-name {
    font-size: 0.47rem; font-weight: 700; text-align: center;
    color: var(--kl-body); line-height: 1.2;
}

/* Badge bonus settings rows */
.bbs-row {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 0; border-bottom: 1px solid rgba(0,0,0,0.05);
}
.bbs-row:last-child { border-bottom: none; }
.bbs-emoji { font-size: 1.1rem; flex-shrink: 0; }
.bbs-name { flex: 1; font-size: 0.75rem; font-weight: 700; color: var(--kl-text); }
.bbs-label { font-size: 0.65rem; font-weight: 700; color: var(--kl-muted); flex-shrink: 0; }
.bbs-input {
    width: 54px; font-size: 0.78rem; text-align: center;
    padding: 4px 6px; border-radius: 8px; border: none;
    background: var(--kl-canvas); box-shadow: var(--shadow-press-sm);
    color: var(--kl-text);
}

/* ============================================================================
   CARD CAROUSEL
   ============================================================================ */

.card-carousel {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    scrollbar-width: none;
    gap: 0;
    /* vertical padding lets card shadows breathe without clipping */
    padding: 6px 0 10px;
    margin: 0;
}
.card-carousel::-webkit-scrollbar { display: none; }
.card-carousel-item {
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;   /* one card per flick — no flying past */
    display: flex;
    flex-direction: column;
}
/* Subtle lift shadow — consistent with other raised cards in the app */
.card-carousel-item .kl-card {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 7px;
    margin-bottom: 0;
}
.carousel-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: rgba(0,0,0,0.15);
    cursor: pointer;
    transition: background 0.3s, transform 0.3s;
}
.carousel-dot.active-dot {
    transform: scale(1.3);
}

/* ============================================================================
   CARD FLIP BUTTON
   ============================================================================ */

.card-flip-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0,0,0,0.06);
    border: none;
    border-radius: var(--radius-pill);
    padding: 5px 12px;
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(0,0,0,0.42);
    cursor: pointer;
    transition: background var(--transition);
    z-index: 1;
}
.card-flip-btn:active { background: rgba(0,0,0,0.1); }
.card-flip-btn--back { color: rgba(0,0,0,0.42); }

/* ============================================================================
   BADGES CARD
   ============================================================================ */

/* ============================================================================
   CHORE MODAL NAME
   ============================================================================ */

.chore-modal-name {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--kl-text);
    line-height: 1.3;
    word-break: break-word;
}

/* ============================================================================
   REDEEM BALANCE TIP
   ============================================================================ */

.redeem-balance-tip { font-size: 0.72rem; font-weight: 700; color: var(--kl-green); margin-top: 4px; margin-bottom: 8px; }

/* ============================================================================
   SUCCESS FLASH
   ============================================================================ */

.success-flash {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--kl-green);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 10px 20px;
    border-radius: var(--radius-pill);
    z-index: 500;
    opacity: 0;
    transition: opacity 0.25s, transform 0.25s;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.success-flash--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.error-flash {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--kl-red);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 10px 20px;
    border-radius: var(--radius-pill);
    z-index: 500;
    opacity: 0;
    transition: opacity 0.25s, transform 0.25s;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.error-flash--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ============================================================================
   HARVEST BELL
   ============================================================================ */

.harvest-bell {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: var(--radius-sm);
    line-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition);
}
.harvest-bell:active { transform: scale(0.9); }
.harvest-bell--active {
    animation: harvest-pulse 2s ease-in-out infinite;
    filter: drop-shadow(0 0 6px rgba(176, 125, 46, 0.7));
}
@keyframes harvest-pulse {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(176, 125, 46, 0.5)); }
    50%       { filter: drop-shadow(0 0 10px rgba(176, 125, 46, 0.9)); }
}
.harvest-bell-dot {
    position: absolute;
    top: 0px;
    right: 0px;
    background: #b83232;
    color: #fff;
    font-size: 0.55rem;
    font-weight: 800;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
    pointer-events: none;
}

/* ============================================================================
   HARVEST PANEL
   ============================================================================ */

.harvest-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}
.harvest-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--kl-canvas);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    box-shadow: var(--shadow-raise-sm);
}
.harvest-row-icon { font-size: 1.4rem; flex-shrink: 0; }
.harvest-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.harvest-row-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--kl-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.harvest-row-earned {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--kl-green);
}
.harvest-row--volunteer .harvest-row-earned { color: #9a6878; }
.harvest-row--badge .harvest-row-label      { color: var(--kl-amber); }
.harvest-row--goal .harvest-row-label       { color: var(--kl-green); }

.harvest-collect-btn {
    width: 100%;
    font-size: 1rem;
    font-weight: 800;
    padding: 14px;
    letter-spacing: 0.02em;
}
.harvest-empty {
    padding: 24px 0 16px;
    text-align: center;
}
.harvest-empty-text {
    font-size: 0.9rem;
    color: var(--kl-muted);
    line-height: 1.6;
}

/* ============================================================================
   CONFETTI
   ============================================================================ */

.confetti-piece {
    position: fixed;
    top: -10px;
    z-index: 999;
    animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
    to { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}
.confetti-emoji-pop {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-size: 5rem;
    z-index: 1000;
    animation: emoji-pop 0.85s ease forwards;
    pointer-events: none;
}
@keyframes emoji-pop {
    0%   { transform: translate(-50%, -50%) scale(0); opacity: 1; }
    40%  { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
    70%  { transform: translate(-50%, -50%) scale(1.0); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1.1); opacity: 0; }
}

/* Fig drops — harvest celebration */
@keyframes fig-fall {
    to { transform: translateY(115vh) rotate(540deg); }
}
.harvest-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 600;
    pointer-events: none;
}
.fig-drop {
    position: fixed;
    top: -20px;
    z-index: 999;
    border-radius: 50% 50% 55% 55% / 40% 40% 60% 60%;
    animation: fig-fall linear forwards;
    pointer-events: none;
}
.fig-drop::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 6px;
    background: #4a7c40;
    border-radius: 2px 2px 0 0;
}

/* ============================================================================
   CELEBRATION BANNER
   Fixed overlay — never affects document flow.
   ============================================================================ */

.celebration-banner {
    position: fixed;
    top: 64px;
    left: 16px;
    right: 16px;
    z-index: 1001;
    border-radius: var(--radius-card);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    color: #fff;
    box-shadow: 0 6px 24px rgba(0,0,0,0.22);
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    cursor: pointer;
}
.celebration-banner--visible {
    opacity: 1;
    transform: translateY(0);
}
.celebration-emoji { font-size: 2rem; flex-shrink: 0; line-height: 1; }
.celebration-text  { display: flex; flex-direction: column; gap: 1px; }
.celebration-title { font-size: 1.05rem; font-weight: 900; line-height: 1.15; }
.celebration-sub   { font-size: 0.72rem; font-weight: 600; opacity: 0.88; }

/* ============================================================================
   ONBOARDING COMPLETION SCREEN
   ============================================================================ */

.ob-whats-next { display: flex; flex-direction: column; gap: 10px; margin: 20px 0; }
.ob-next-item { font-size: 0.85rem; font-weight: 600; color: var(--kl-text); background: var(--kl-surface); border-radius: 10px; padding: 10px 14px; }
.ob-next-item strong { color: var(--kl-green); }

/* ============================================================================
   PIN PAD
   ============================================================================ */

.pin-pad-overlay {
    position: fixed; inset: 0;
    background: rgba(20,24,28,0.55);
    backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    z-index: 400;
}
.pin-pad-card {
    background: var(--kl-canvas);
    border-radius: var(--radius-card);
    padding: 26px 20px 20px;
    width: min(300px, 88vw);
    display: flex; flex-direction: column; align-items: center; gap: 18px;
    box-shadow: -6px -6px 18px rgba(255,255,255,0.55), 8px 8px 28px rgba(0,0,0,0.22);
}
.pin-pad-label {
    font-size: 0.7rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.6px; color: var(--kl-muted); text-align: center;
}
.pin-pad-dots { display: flex; gap: 14px; }
.pin-pad-dot {
    width: 15px; height: 15px; border-radius: 50%;
    background: rgba(0,0,0,0.13);
    transition: background 0.12s, transform 0.12s;
    box-shadow: var(--shadow-press-sm);
}
.pin-pad-dot.filled { background: var(--kl-green); transform: scale(1.1); }
.pin-pad-error {
    font-size: 0.76rem; font-weight: 700; color: #c0392b;
    min-height: 18px; text-align: center;
}
.pin-pad-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 10px; width: 100%;
}
.pin-key {
    aspect-ratio: 1; border: none;
    border-radius: 14px;
    background: var(--kl-surface);
    box-shadow: var(--shadow-raise);
    font-size: 1.35rem; font-weight: 700;
    color: var(--kl-text); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: box-shadow 0.1s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
}
.pin-key:active { box-shadow: var(--shadow-press); transform: scale(0.93); }
.pin-key--action { font-size: 1.1rem; color: var(--kl-muted); }
.pin-key--cancel {
    font-size: 0.82rem; font-weight: 700; color: var(--kl-muted);
    background: transparent; box-shadow: none; aspect-ratio: auto;
    padding: 6px 20px; border-radius: var(--radius-pill);
    margin-top: -8px;
}
.pin-key--cancel:active { transform: scale(0.96); }
.pin-key--forgot {
    font-size: 0.72rem; font-weight: 600; color: var(--kl-muted);
    background: transparent; box-shadow: none; aspect-ratio: auto;
    padding: 2px 20px; border-radius: var(--radius-pill);
    margin-top: -12px; opacity: 0.65; border: none; cursor: pointer;
}
.pin-key--forgot:active { transform: scale(0.96); opacity: 1; }
.forgot-pin-hint {
    font-size: 0.78rem; color: var(--kl-muted); text-align: center;
    line-height: 1.5; margin: 4px 0 10px;
}
.forgot-pin-input { margin-top: 12px; }
@keyframes pin-pad-shake {
    0%,100% { transform: translateX(0); }
    20%,60%  { transform: translateX(-6px); }
    40%,80%  { transform: translateX(6px); }
}
.pin-pad-shake { animation: pin-pad-shake 0.35s ease; }

/* ============================================================================
   RECURRING CHORE BADGES
   ============================================================================ */

.chore-modal-name-col {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 3px;
}
.chore-recurring-badge {
    font-size: 0.58rem; font-weight: 800; letter-spacing: 0.2px;
    padding: 2px 7px; border-radius: var(--radius-pill);
    background: #e4f0ea; color: #3d6b50;
    display: inline-block; width: fit-content;
}
.chore-due-badge { background: #fff3cd; color: #856404; }
.chore-item--due { background: rgba(255,243,205,0.4); border-radius: 10px; padding: 2px 4px; }

/* Recurring segmented control in chore forms */
.chore-recurring-row { display: flex; align-items: center; gap: 10px; }
.chore-recurring-label { font-size: 0.72rem; font-weight: 700; color: var(--kl-muted); white-space: nowrap; }
.seg-control { display: flex; border-radius: var(--radius-pill); background: var(--kl-surface); box-shadow: var(--shadow-press-sm); padding: 3px; gap: 2px; }
.seg-btn { flex: 1; border: none; background: transparent; font-size: 0.73rem; font-weight: 700; color: var(--kl-muted); padding: 7px 4px; cursor: pointer; transition: all 0.15s; border-radius: calc(var(--radius-pill) - 2px); line-height: 1; }
.seg-btn.active-seg { background: linear-gradient(155deg, #c8985e 0%, #a87038 100%); color: #fff; box-shadow: 0 2px 6px rgba(168,112,56,0.35); }

/* ============================================================================
   SPENDING PIN TOGGLE
   ============================================================================ */

.spending-pin-toggle-row {
    display: flex; align-items: center;
    justify-content: space-between; gap: 12px;
    padding: 8px 0;
}
.spending-pin-toggle-label { font-size: 0.82rem; font-weight: 700; color: var(--kl-text); }
.spending-pin-toggle-sub   { font-size: 0.65rem; color: var(--kl-muted); margin-top: 2px; }
/* Toggle switch */
.kl-toggle { position: relative; width: 46px; height: 26px; flex-shrink: 0; display: inline-block; }
.kl-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.kl-toggle-slider {
    position: absolute; inset: 0; border-radius: 13px;
    background: rgba(0,0,0,0.16); cursor: pointer;
    transition: background 0.2s;
    box-shadow: var(--shadow-press-sm);
}
.kl-toggle-slider::before {
    content: ''; position: absolute;
    width: 20px; height: 20px; border-radius: 50%;
    background: #fff; top: 3px; left: 3px;
    transition: transform 0.2s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.kl-toggle input:checked + .kl-toggle-slider { background: var(--kl-green); }
.kl-toggle input:checked + .kl-toggle-slider::before { transform: translateX(20px); }

/* ============================================================================
   EARN SPLIT SETTINGS
   ============================================================================ */

.split-pct-row {
    display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.split-pct-label { font-size: 0.82rem; font-weight: 700; color: var(--kl-text); width: 70px; flex-shrink: 0; }
.split-pct-input { width: 60px !important; text-align: center; padding: 7px 6px; }
.split-pct-unit  { font-size: 0.82rem; font-weight: 700; color: var(--kl-muted); }

/* ============================================================================
   TRANSACTION FILTER ROWS
   ============================================================================ */

/* Filter toggle button (🎛️) */
.tx-filter-toggle { background: var(--kl-canvas); border: 1.5px solid rgba(0,0,0,0.1); border-radius: var(--radius-pill); padding: 5px 12px; font-size: 0.8rem; font-weight: 700; color: var(--kl-muted); cursor: pointer; transition: all var(--transition); white-space: nowrap; flex-shrink: 0; box-shadow: var(--shadow-raise-sm); }
.tx-filter-toggle--active { background: linear-gradient(155deg, #c8985e 0%, #a87038 100%); color: #fff; border-color: transparent; box-shadow: -1px -1px 4px rgba(220,170,100,0.35), 2px 2px 6px rgba(0,0,0,0.18); }

/* Advanced filter panel */
.tx-advanced-panel { background: var(--kl-surface); border-radius: var(--radius-card); padding: 12px 14px; box-shadow: var(--shadow-press-sm); display: flex; flex-direction: column; gap: 10px; }
.tx-adv-row { display: flex; flex-direction: column; gap: 6px; }
.tx-adv-label { font-size: 0.68rem; font-weight: 700; color: var(--kl-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.tx-adv-row .tx-filter-pills { flex-wrap: wrap; }

/* ============================================================================
   VOLUNTEER CARD + MODAL
   ============================================================================ */



/* Give Time modal */
.vol-back-btn { background: none; border: none; font-size: 0.75rem; font-weight: 700; color: var(--kl-muted); cursor: pointer; padding: 0 0 10px; text-align: left; }
.vol-back-btn:hover { color: var(--kl-text); }
.vol-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.vol-chip { background: var(--kl-canvas); border: 1.5px solid rgba(0,0,0,0.1); color: var(--kl-muted); font-size: 0.78rem; font-weight: 700; padding: 5px 12px; border-radius: var(--radius-pill); cursor: pointer; transition: all var(--transition); }
.vol-chip--active { background: linear-gradient(135deg, #7a4a5a, #4e2838); color: #fff; border-color: transparent; }
.vol-time-presets { display: flex; gap: 6px; }
.vol-preset-btn { flex: 1; background: var(--kl-canvas); border: 1.5px solid rgba(0,0,0,0.1); color: var(--kl-muted); font-size: 0.78rem; font-weight: 700; padding: 7px 4px; border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition); }
.vol-preset--active { background: linear-gradient(135deg, #7a4a5a, #4e2838); color: #fff; border-color: transparent; }
.vol-give-time-link { text-align: right; margin-bottom: 8px; }
.vol-give-time-btn { background: none; border: none; font-size: 0.75rem; font-weight: 700; color: #9b6b7b; cursor: pointer; padding: 0; }

/* Cash card — accent green on eyebrow + balance; neutral for secondary text */
.cash-card .card-eyebrow      { color: #3d6b50; }
.cash-card .card-profile-name { color: rgba(0,0,0,0.4); }
.cash-card .card-balance      { color: #2d5040; }
.cash-card .breakdown-chip    { color: rgba(61,107,80,0.7); }
.cash-card .breakdown-chip-value { color: #2d5040; background: rgba(61,107,80,0.13); border-radius: 20px; padding: 2px 10px; }
.cash-card .card-section-divider { background: rgba(61,107,80,0.2); }
.cash-card .card-back-big { color: #2d5040; }

/* Time card — accent blue on eyebrow; balance color comes from global .time-balance */
.time-card .card-eyebrow { color: #3b6080; }

/* Volunteer card — accent plum on eyebrow + balance; neutral for secondary text */
.volunteer-card .card-eyebrow--vol  { color: #7a3d58; }
.volunteer-card .card-sublabel      { color: rgba(0,0,0,0.45); }
.volunteer-card .time-balance       { color: #3d1828; }
.volunteer-card .time-unit          { opacity: 1; color: rgba(0,0,0,0.45); }
.volunteer-card .tfs-label          { color: rgba(122,61,88,0.7); }
.time-card .tfs-value               { background: rgba(59,96,128,0.13); border-radius: 20px; padding: 2px 10px; }
.volunteer-card .tfs-value          { color: #3d1828; background: rgba(122,61,88,0.13); border-radius: 20px; padding: 2px 10px; }
.volunteer-card.card-back .card-back-eyebrow { color: rgba(0,0,0,0.5); }
.volunteer-card .card-back-big      { color: #3d1828; }
.volunteer-card .tbs-val            { color: #3d1828; }
.volunteer-card .tbs-label          { color: rgba(0,0,0,0.5); }