/* ============================================================
   Family Brain – App CSS (standalone, kein design-system.css)
   ============================================================ */

/* --- Reset ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* --- CSS Custom Properties / Themes ------------------------ */
:root,
[data-theme="alltag"] {
    --page-bg:           #1a3fbf;
    --page-bg-rgb:       26, 63, 191;
    --nav-btn-bg:        #1a3fbf;
    --nav-btn-text:      #ffffff;
    --nav-pill-bg:       rgba(255,255,255,.92);
    --nav-active-text:   #ffffff;
    --card-bg:           rgba(255,255,255,.40);
    --card-border:       rgba(255,255,255,.40);
    --card-bg-list:      rgba(255,255,255,.10);
    --amount-color:      #ff6b35;
    --amount-neg:        #c62828;
    --amount-pos:        #4caf50;
    --text-primary:      #ffffff;
    --text-secondary:    rgba(255,255,255,.65);
    --text-heading:      #ffffff;
    --heading-accent:    #ff6b35;
    --filter-active-bg:  #ff6b35;
    --filter-active-text:#ffffff;
    --filter-inactive-bg:#2196f3;
    --filter-inactive-text:#ffffff;
    --event-trophy-bg:   rgba(160,100,60,.75);
    --event-poop-bg:     rgba(255,255,255,.08);
    --event-money-bg:    rgba(255,255,255,.08);
    --score-trophy-bg:   rgba(255,255,255,.40);
    --score-poop-bg:     rgba(255,255,255,.40);
    --border-radius-pill:999px;
    --border-radius-card:20px;
    --border-radius-btn: 999px;
    --divider:           rgba(255,255,255,.08);
    --input-border:      rgba(255,255,255,.4);
}

/* --- Base -------------------------------------------------- */
body {
    font-family: 'Nunito', sans-serif;
    color: var(--text-primary, #fff);
    min-height: 100dvh;
}

/* --- Layout ------------------------------------------------ */
html, body {
    background: var(--page-bg, #1a3fbf);
    transition: background .3s;
}

html {
    scrollbar-gutter: stable; /* verhindert Layout-Shift wenn Scrollbar erscheint/verschwindet */
}

/* --- Große Schrift (LRS-Modus) ----------------------------- */
html.font-large { font-size: 20px; }

/* --- Toggle-Switch ----------------------------------------- */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
    flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: rgba(255,255,255,.15);
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,.40);
    transition: background .2s, border-color .2s;
}
.toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px; height: 18px;
    left: 3px; top: 3px;
    background: white;
    border-radius: 50%;
    transition: transform .2s;
}
.toggle-switch input:checked + .toggle-slider { background: #4caf50; border-color: #4caf50; }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(24px); }

#app {
    min-height: 100dvh;
}

#main-app {
    max-width: 520px;
    margin: 0 auto;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    position: relative;
}

.view-container {
    flex: 1;
    overflow-y: auto;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
}

.page {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

/* Mehr Luft zwischen Karten, konsistente Seitenabstände */
.page-content {
    display: flex;
    flex-direction: column;
    padding: 16px 20px 40px;
    gap: 16px;
}

/* Karten ---------------------------------------------------- */
.card {
    background: var(--card-bg);
    border: 2px solid var(--card-border);
    border-radius: 20px;
    padding: 18px 20px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.card-list {
    border-radius: 20px;
}
.card-summary {
    border-radius: 20px;
}

/* --- Top Navigation ---------------------------------------- */
.top-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    padding-top: env(safe-area-inset-top);
}

.nav-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
}

.nav-items {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.nav-btn {
    padding: 8px 12px;
    border-radius: 999px;
    border: none;
    font-family: inherit;
    font-size: .83rem;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    transition: opacity .15s, transform .1s;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 34px;
    text-align: center;
}
.nav-btn:active { opacity: .75; transform: scale(.95); }

/* Aktiver Tab: kein Hintergrund → gleiche Farbe wie Seiten-BG → "verschwindet" */
.nav-btn--active {
    background: transparent !important;
    cursor: default;
    opacity: 1;
    font-size: .9rem;
}

.nav-logout {
    background: none;
    border: none;
    color: var(--text-secondary, rgba(255,255,255,.7));
    cursor: pointer;
    padding: 7px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .15s, background .15s;
    flex-shrink: 0;
    margin-left: auto;
}
.nav-logout:hover { color: var(--text-primary, #fff); background: var(--card-bg, rgba(255,255,255,.40)); }
.nav-logout:active { transform: scale(.92); }

/* --- FAB --------------------------------------------------- */
.fab {
    position: fixed;
    bottom: calc(20px + env(safe-area-inset-bottom));
    /* Innerhalb des 520px-Containers bleiben */
    right: max(18px, calc(50vw - 242px));
    width: 56px; height: 56px;
    border-radius: 50%;
    background: rgba(255,255,255,.22);
    border: 2px solid rgba(255,255,255,.35);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 1.4rem;
    box-shadow: 0 4px 20px rgba(0,0,0,.25);
    z-index: 90;
    cursor: pointer;
    transition: transform .15s;
    display: flex; align-items: center; justify-content: center;
}
.fab:active { transform: scale(.92); }

/* --- Dropdown (Mehr-Menü) ---------------------------------- */
.dropdown {
    position: fixed;
    top: calc(56px + env(safe-area-inset-top));
    right: calc(50% - 260px);  /* aligned to right edge of 520px container */
    background: rgba(30,30,40,.96);
    border-radius: 18px;
    box-shadow: 0 8px 32px rgba(0,0,0,.3);
    overflow: hidden;
    z-index: 200;
    min-width: 220px;
    backdrop-filter: blur(16px);
    border: 2px solid rgba(255,255,255,.40);
}

@media (max-width: 540px) {
    .dropdown {
        left: 10px;
        right: 10px;
        min-width: unset;
    }
}

.dropdown-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 16px 20px;
    font-size: .95rem;
    font-weight: 700;
    font-family: inherit;
    color: #fff;
    border-bottom: 1px solid var(--divider, rgba(255,255,255,.08));
    cursor: pointer;
    background: none;
    border-left: none; border-right: none; border-top: none;
    transition: background .1s;
}
.dropdown-item:last-child { border-bottom: none; }
.dropdown-item:hover { background: rgba(255,255,255,.08); }
.dropdown-item--danger { color: #ff6b6b; }
.dropdown-divider { height: 1px; background: rgba(255,255,255,.08); }

.overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 150;
    backdrop-filter: blur(2px);
}

/* --- Toast ------------------------------------------------- */
.toast {
    position: fixed;
    bottom: calc(24px + env(safe-area-inset-bottom));
    left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,.82);
    color: #fff;
    padding: 10px 22px;
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 700;
    z-index: 600;
    white-space: nowrap;
    box-shadow: 0 4px 20px rgba(0,0,0,.25);
    backdrop-filter: blur(8px);
}
.toast--error   { background: rgba(229,57,53,.9); }
.toast--success { background: rgba(56,142,60,.9); }

/* --- Login ------------------------------------------------- */
.screen--login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    padding: 24px;
    background: var(--page-bg);
}

.login-card {
    background: var(--card-bg);
    border: 2px solid var(--card-border);
    border-radius: var(--border-radius-card);
    padding: 32px 24px;
    width: 100%;
    max-width: 380px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.login-title {
    font-size: 1.8rem;
    font-weight: 900;
    text-align: center;
    color: var(--text-primary);
    margin-bottom: 28px;
    letter-spacing: -0.5px;
}

.error-msg {
    background: rgba(229,57,53,.15);
    border: 1px solid rgba(229,57,53,.4);
    color: #ffcdd2;
    padding: 10px 14px;
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 600;
}

/* --- Forms on dark bg -------------------------------------- */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.form-group label {
    font-size: .8rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.form-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
select,
textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--input-border, rgba(255,255,255,.25));
    border-radius: 999px;
    background: var(--input-bg, rgba(255,255,255,.40));
    color: var(--text-primary);
    font-size: .95rem;
    font-family: inherit;
    font-weight: 600;
    transition: border-color .15s, background .15s;
}
input::placeholder,
textarea::placeholder { color: var(--text-secondary); }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--input-focus-border, rgba(255,255,255,.6));
    background: var(--input-focus-bg, rgba(255,255,255,.40));
}
select option { background: #1a1a2e; color: #fff; }
textarea { resize: vertical; border-radius: 14px; }

input[type="color"] {
    width: 44px; height: 36px;
    padding: 2px 3px;
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,.3);
    background: transparent;
    cursor: pointer;
}

.checkbox-group { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.checkbox-label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; color: var(--text-primary); }

/* --- Generic Buttons --------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 22px;
    border-radius: 999px;
    font-weight: 800;
    font-size: .9rem;
    font-family: inherit;
    cursor: pointer;
    border: none;
    transition: opacity .15s, transform .1s;
}
.btn:active { opacity: .75; transform: scale(.97); }
.btn--primary   { background: rgba(255,255,255,.22); color: #fff; border: 2px solid rgba(255,255,255,.35); }
.btn--secondary { background: rgba(255,255,255,.40); color: #fff; border: 2px solid rgba(255,255,255,.2); }
.btn--danger    { background: rgba(229,57,53,.85); color: #fff; }
.btn--full      { width: 100%; }
.btn--sm        { padding: 7px 14px; font-size: .8rem; }
.btn--icon      { padding: 6px; font-size: 1.1rem; background: none; border: none; }
.btn--icon.btn--danger { color: #ff6b6b; }
.btn--record    { background: rgba(229,57,53,.85); color: #fff; padding: 14px 28px; font-size: 1rem; }
.btn--recording { animation: pulse 1s infinite; }

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .55; }
}

/* --- Appointment-Banner ------------------------------------ */
.appointment-banner {
    background: rgba(255,255,255,.40);
    border-bottom: 1px solid rgba(255,255,255,.40);
    color: #fff;
    padding: 10px 20px;
    font-size: .9rem;
    font-weight: 700;
    text-align: center;
    backdrop-filter: blur(6px);
}

/* --- Badges ------------------------------------------------ */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 800;
}
.badge--red   { background: rgba(229,57,53,.85); color: #fff; }
.badge--green { background: rgba(56,142,60,.85); color: #fff; }

/* --- Filter-Bar (horizontales Chip-Scroll) ----------------- */
.filter-bar {
    display: flex;
    gap: 8px;
    padding: 12px 20px;
    overflow-x: auto;
    scrollbar-width: none;
}
.filter-bar::-webkit-scrollbar { display: none; }

/* --- Event-Liste ------------------------------------------- */
.event-list { padding: 0; }

/* KT-Badge (Kreis um Trophäen/Kacki-Zahl) */
.kt-badge {
    display: flex;
    align-items: center;
    gap: 3px;
}
.kt-emoji {
    font-size: 1.1rem;
}
.kt-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: .82rem;
    flex-shrink: 0;
}
.kt-circle--trophi { border-color: #4caf50; color: #4caf50; }
.kt-circle--kacki  { border-color: #e53935; color: #e53935; }

/* Sentiment-Toggle (Confirm-List) */
.sentiment-btn {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 2px solid;
    font-size: 1rem;
    font-weight: 900;
    font-family: inherit;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background .15s, border-color .15s;
}
.sentiment-btn--neutral  { border-color: rgba(255,255,255,.3); color: rgba(255,255,255,.4); background: transparent; }
.sentiment-btn--positive { border-color: #4caf50; color: #4caf50; background: rgba(76,175,80,.15); }
.sentiment-btn--negative { border-color: #e53935; color: #e53935; background: rgba(229,57,53,.15); }

/* Sentiment-Badge (Event-Cards in Alltag) */
.sentiment-dot {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 2.5px solid;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
    flex-shrink: 0;
}
.sentiment-dot--positive { border-color: #4caf50; color: #4caf50; }
.sentiment-dot--negative { border-color: #e53935; color: #e53935; }

.event-card__meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.event-card__body { display: flex; align-items: center; gap: 8px; justify-content: space-between; margin-top: 2px; }
.event-card__actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.event-text { font-size: .98rem; font-weight: 700; color: var(--text-primary); flex: 1; }
.event-date { font-size: .78rem; color: var(--text-secondary); }
.event-amount { font-weight: 900; color: var(--amount-color); }
.event-person { font-size: .75rem; font-weight: 600; color: var(--text-secondary); }
.event-person strong { font-weight: 900; color: var(--text-primary); }
.kt-inline { font-size: .88rem; font-weight: 900; white-space: nowrap; }
.kt-inline--trophi { color: #4caf50; }
.kt-inline--kacki  { color: #e53935; }

.star-btn {
    background: none;
    border: 2px solid var(--input-border, rgba(255,255,255,.4));
    border-radius: 50%;
    width: 38px; height: 38px;
    font-size: 1rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.5);
    flex-shrink: 0;
    transition: all .2s;
}
.star-btn.active, .star-btn:hover {
    background: rgba(255,255,255,.40);
    border-color: rgba(255,255,255,.7);
    color: #fff;
}
.delete-btn {
    background: none;
    border: 2px solid rgba(229,57,53,.5);
    border-radius: 50%;
    width: 34px; height: 34px;
    font-size: .85rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: rgba(229,57,53,.8);
    flex-shrink: 0;
    transition: all .2s;
}
.delete-btn:hover { background: rgba(229,57,53,.15); border-color: #e53935; color: #e53935; }

.category-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    color: #fff;
}

/* --- KT-Score Pills ---------------------------------------- */
.kt-row { display: flex; gap: 12px; }

/* --- Taschengeld ------------------------------------------- */
.pocket-overview { display: flex; justify-content: space-around; gap: 12px; }
.pocket-stat { text-align: center; }
.pocket-stat__label { font-size: .78rem; color: var(--text-secondary); font-weight: 700; display: block; margin-bottom: 4px; }
.pocket-stat__value { font-size: 1.8rem; font-weight: 900; color: var(--amount-color); display: block; }

.transaction-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--divider, rgba(255,255,255,.08));
}
.transaction-row:last-child { border-bottom: none; }
.transaction-row__main { display: flex; flex-direction: column; gap: 2px; }
.transaction-type { font-weight: 700; font-size: .9rem; color: var(--text-primary); }
.transaction-desc { font-size: .8rem; color: var(--text-secondary); }
.transaction-row__meta { display: flex; align-items: center; gap: 10px; }
.transaction-amount { font-weight: 900; font-size: 1rem; color: var(--amount-pos); }
.transaction-amount.negative { color: var(--amount-neg); }
.transaction-date { font-size: .75rem; color: var(--text-secondary); }

/* --- Shop -------------------------------------------------- */
.offer-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.offer-title  { font-weight: 800; font-size: 1rem; color: var(--text-primary); }
.offer-desc   { font-size: .85rem; color: var(--text-secondary); margin-bottom: 8px; }
.progress-bar { background: rgba(255,255,255,.40); border-radius: 999px; height: 10px; overflow: hidden; }
.progress-bar__fill { background: var(--amount-color); height: 100%; border-radius: 999px; transition: width .4s; }
.progress-label { font-size: .78rem; color: var(--text-secondary); font-weight: 600; margin-top: 4px; display: block; }
.offer-contribs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.contrib-badge {
    background: rgba(255,255,255,.40);
    border: 1px solid rgba(255,255,255,.2);
    padding: 3px 12px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    color: var(--text-primary);
}
.contribute-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.contribute-row input { max-width: 80px; }

/* --- Termine ----------------------------------------------- */
.appointment-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--divider, rgba(255,255,255,.08));
}
.appointment-row:last-child { border-bottom: none; }
.appointment-row--today .appointment-row__title { font-weight: 900; }
.appointment-row__main { display: flex; align-items: center; gap: 8px; }
.appointment-row__meta { display: flex; align-items: center; gap: 8px; }
.appointment-row__title { font-weight: 700; color: var(--text-primary); }
.appointment-row__date { font-size: .78rem; color: var(--text-secondary); }

.appointment-item { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.appointment-title { font-weight: 700; color: var(--text-primary); }
.appointment-date  { font-size: .8rem; color: var(--text-secondary); }

/* --- User-Liste -------------------------------------------- */
.user-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--divider, rgba(255,255,255,.08));
}
.user-row:last-child { border-bottom: none; }
.user-icon { font-size: 1.5rem; }
.user-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.user-name { font-weight: 700; color: var(--text-primary); }
.user-meta { font-size: .8rem; color: var(--text-secondary); }

/* --- Kategorien -------------------------------------------- */
.cat-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cat-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.cat-name { flex: 1; font-weight: 800; color: var(--text-primary); }
.template-list { display: flex; flex-direction: column; }
.template-row {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.template-row:last-child { border-bottom: none; }
.template-row span:first-child { flex: 1; font-size: .9rem; color: var(--text-primary); }

/* --- Section-Title (settings) ------------------------------ */
.section-title {
    font-size: .8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-secondary);
    padding: 14px 20px 4px;
}

/* --- Color Picker Component -------------------------------- */
.color-picker-section { display: flex; flex-direction: column; gap: 14px; }

.color-picker-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.color-picker-label {
    font-size: .8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-secondary);
}
.color-swatches {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
}
.color-swatch {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 3px solid transparent;
    cursor: pointer;
    transition: transform .15s, border-color .15s;
}
.color-swatch:hover   { transform: scale(1.15); }
.color-swatch--active { border-color: #fff; transform: scale(1.12); }

.color-custom-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
}
.color-custom-row label {
    font-size: .8rem;
    font-weight: 700;
    color: var(--text-secondary);
}
.color-preview {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,.5);
    flex-shrink: 0;
    transition: background .2s;
}

/* --- Modal ------------------------------------------------- */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 1000;
    display: flex;
    align-items: flex-end;
    backdrop-filter: blur(4px);
}
.modal {
    background: var(--page-bg);
    border-radius: var(--border-radius-card) var(--border-radius-card) 0 0;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    max-height: 92dvh;
    overflow-y: auto;
    border-top: 2px solid rgba(255,255,255,.40);
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 14px;
    border-bottom: 1px solid rgba(255,255,255,.1);
}
.modal-header h2 { font-size: 1.1rem; font-weight: 900; color: var(--text-primary); }
.modal-close { font-size: 1.2rem; color: var(--text-secondary); background: none; border: none; cursor: pointer; }
.modal-body { padding: 16px 20px 32px; display: flex; flex-direction: column; gap: 16px; }

/* --- Input Capture ----------------------------------------- */
.ic-tabs { display: flex; gap: 8px; }
.ic-tab {
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(255,255,255,.40);
    border: 1px solid rgba(255,255,255,.2);
    font-size: .85rem;
    font-weight: 700;
    font-family: inherit;
    color: var(--text-primary);
    cursor: pointer;
}
.ic-tab--active { background: rgba(255,255,255,.25); border-color: rgba(255,255,255,.4); }
.ic-tab-content { display: flex; flex-direction: column; gap: 10px; }
.ic-record-area { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px 0; }
.ic-textarea { width: 100%; }

/* --- Confirm-List ------------------------------------------ */
.confirm-list { display: flex; flex-direction: column; gap: 12px; }
.confirm-list h3 { font-size: 1rem; font-weight: 800; color: var(--text-primary); }
.confirm-items { display: flex; flex-direction: column; gap: 8px; }
.confirm-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--card-bg-list);
    border-radius: var(--border-radius-card);
    border: 2px solid var(--card-border, rgba(255,255,255,.40));
    cursor: pointer;
    transition: opacity .15s;
}
.confirm-item--inactive { opacity: .35; }
.confirm-item__left { display: flex; flex-direction: column; gap: 3px; }
.confirm-item__right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.confirm-person { font-weight: 800; font-size: .85rem; color: var(--text-primary); }
.confirm-person--missing { color: #ff6b6b; }
.confirm-desc   { font-size: .9rem; font-weight: 600; color: var(--text-primary); }
.confirm-cat    { font-size: .75rem; color: var(--text-secondary); }
.confirm-toggle { font-size: 1.3rem; color: var(--amount-color); }
.confirm-amount { font-size: .95rem; font-weight: 800; color: #4caf50; }
.confirm-item--pm .confirm-amount { color: #4caf50; }
.confirm-item--pm[data-pm-type="loan_to_parent"] .confirm-amount { color: #e53935; }
.confirm-actions { padding-top: 8px; }

/* --- Loading + Empty --------------------------------------- */
.loading { text-align: center; color: var(--text-secondary); padding: 24px; font-weight: 700; }
.empty-hint { color: var(--text-secondary); text-align: center; padding: 24px; font-size: .9rem; font-weight: 600; }

/* --- Utility ----------------------------------------------- */
.hidden     { display: none !important; }
.text-muted { color: var(--text-secondary); }
.negative   { color: var(--amount-neg) !important; }

/* --- KT-Account (Eltern-View) ------------------------------ */
.kt-account { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.kt-account:last-child { border-bottom: none; }
.kt-account__name  { font-weight: 800; color: var(--text-primary); margin-bottom: 8px; }
.kt-account__stats { display: flex; gap: 12px; }
.kt-stat           { display: flex; flex-direction: column; }
.kt-stat__label    { font-size: .75rem; color: var(--text-secondary); font-weight: 700; }
.kt-stat__value    { font-size: 1.5rem; font-weight: 900; color: var(--text-primary); }
.kt-stat__sub      { font-size: .72rem; color: var(--text-secondary); }

/* --- Shop Card --------------------------------------------- */
.shop-rate { font-size: .85rem; color: var(--text-secondary); font-weight: 700; }
.shop-active .shop-offer-title { font-weight: 800; color: var(--text-primary); display: block; margin-bottom: 6px; }

/* --- Taschengeld Kid-Summary-Card -------------------------- */
.card--kid-summary {
    padding: 12px 18px;
}
.kid-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.kid-summary-name {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-primary);
}
.kid-summary-open {
    font-size: 1.4rem;
    font-weight: 900;
    white-space: nowrap;
}
.kid-summary-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-secondary);
}

/* --- Button-Select (single-select row) --------------------- */
.btn-select-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.btn-select {
    padding: 9px 16px;
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,.25);
    background: rgba(255,255,255,.10);
    color: var(--text-primary);
    font-size: .85rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.btn-select--active {
    background: rgba(255,255,255,.28);
    border-color: rgba(255,255,255,.6);
}

/* --- Überschriften ----------------------------------------- */
.heading-section {
    font-size: 1.2rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--text-heading, #fff);
    margin: 16px 0 8px;
}
.heading-accent {
    color: var(--heading-accent, #ff6b35);
    font-size: 1rem;
    font-weight: 900;
}

/* --- Filter-Chips ------------------------------------------ */
.filter-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 12px 0;
}
.chip {
    border: none;
    border-radius: var(--border-radius-pill);
    padding: 7px 16px;
    font-size: .82rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: opacity .2s, transform .15s;
}
.chip:hover { opacity: .85; transform: scale(1.04); }
.chip--active   { background: var(--filter-active-bg, #ff6b35); color: var(--filter-active-text, #fff); }
.chip--inactive { background: var(--filter-inactive-bg, #2196f3); color: var(--filter-inactive-text, #fff); }
.chip--emoji    { padding: 7px 10px; font-size: 1rem; }

/* --- Score Pills ------------------------------------------- */
.score-container {
    display: flex;
    gap: 14px;
    margin: 16px 0;
}
.score-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--score-trophy-bg, rgba(255,255,255,.40));
    border: 2px solid var(--card-border, rgba(255,255,255,.2));
    border-radius: var(--border-radius-pill);
    padding: 12px 24px;
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--text-primary, #fff);
    backdrop-filter: blur(6px);
}

/* --- Child Event Rows (Alltag Kind-View) ------------------- */
.cev {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 2px solid rgba(255,255,255,.40);
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(6px);
    margin-bottom: 8px;
}
.cev--trophi  { border: 2px solid #4caf50; background: rgba(76,175,80,.10); }
.cev--kacki   { border: 2px solid #e53935; background: rgba(229,57,53,.10); }
.cev--positive { border: 2px solid #4caf50; background: rgba(76,175,80,.07); }
.cev--negative { border: 2px solid #e53935; background: rgba(229,57,53,.07); }
.cev--neutral  { border: 2px solid rgba(255,255,255,.40); }

.cev__main  { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.cev__title-row { display: flex; align-items: center; gap: 7px; }
.cev__title { font-weight: 700; font-size: .95rem; color: var(--text-primary); }
.cev__sub   { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cev__date  { font-size: .75rem; color: var(--text-secondary); }

.cev__meta  { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.cev__kt    { display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 1.3rem; line-height: 1; }
.cev__kt strong { font-size: .9rem; font-weight: 900; }

/* --- Event Cards ------------------------------------------- */
.event-card {
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    padding: 10px 14px;
    border: 2px solid rgba(255,255,255,.40);
    backdrop-filter: blur(6px);
    margin-bottom: 8px;
}

/* --- Abgeschlossene Shop-Angebote (grün gesperrt) ---------- */
.card--offer-done {
    border-color: #4caf50 !important;
    background: rgba(76,175,80,.10) !important;
}
.card--offer-done .progress-bar__fill { background: #4caf50; }

/* --- Qty-Row (KT-Sheet Anzahl-Stepper) --------------------- */
.qty-row { display: flex; align-items: center; gap: 8px; }
.qty-row input { flex: 1; text-align: center; }
.qty-btn {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.3);
    background: rgba(255,255,255,.1);
    color: var(--text-primary);
    font-size: 1.2rem; font-weight: 900;
    font-family: inherit;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.qty-btn:active { background: rgba(255,255,255,.22); }
.event-card--trophy { background: var(--event-trophy-bg, rgba(160,100,60,.75)); }
.event-card--poop   { background: var(--event-poop-bg,   rgba(255,255,255,.08)); }
.event-card--money  { background: var(--event-money-bg,  rgba(255,255,255,.08)); }

/* --- Card Summary (Taschengeld-Übersicht) ------------------ */
.card-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.card-summary .month-label { color: var(--text-secondary); font-size: .88rem; }
.card-summary .amount      { font-size: 2.4rem; font-weight: 900; color: var(--amount-pos); line-height: 1; }

/* --- Auto-Trophi Fortschrittsbalken ----------------------- */
.card--at-progress {
    padding: 12px 16px;
}
.at-progress-header {
    display: flex;
    justify-content: space-between;
    font-size: .85rem;
    font-weight: 700;
    margin-bottom: 6px;
    opacity: .9;
}
.at-progress-bar {
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
    overflow: hidden;
}
.at-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #f9c846, #f97316);
    transition: width .4s ease;
}
.at-progress-hint {
    font-size: .75rem;
    opacity: .6;
    margin-top: 5px;
    text-align: right;
}

/* Eltern-Dashboard: kompakte einzeilige Reihe */
.at-parent-list  { display: flex; flex-direction: column; gap: 7px; }
.at-parent-row   { display: flex; align-items: center; gap: 10px; }
.at-parent-name  { font-size: .85rem; font-weight: 700; min-width: 70px; white-space: nowrap; }
.at-parent-bar-wrap { flex: 1; }
.at-progress-bar--sm { height: 7px; }
.at-parent-count { font-size: .75rem; opacity: .65; white-space: nowrap; }

/* --- Wallet Card ------------------------------------------- */
.card--wallet {
    background: rgba(0,0,0,.25);
    border: 2px solid rgba(212,175,55,.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 14px 18px;
}

/* child: single wallet row */
.wallet-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.wallet-symbol  { font-size: .75rem; font-weight: 700; opacity: .7; text-transform: uppercase; letter-spacing: .06em; }
.wallet-balance { font-size: 1.6rem; font-weight: 900; color: #f0c040; line-height: 1.1; margin: 2px 0; }
.wallet-addr    { font-size: .72rem; opacity: .55; font-family: monospace; }

/* parent: wallet overview */
.wallet-overview-title {
    font-size: .85rem;
    font-weight: 700;
    opacity: .75;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 10px;
}
.wallet-overview-list { display: flex; flex-direction: column; gap: 8px; }
.wallet-overview-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.wallet-overview-name    { font-weight: 700; font-size: .95rem; }
.wallet-overview-right   { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.wallet-overview-balance { font-weight: 800; color: #f0c040; font-size: 1rem; }
.wallet-overview-addr    { font-size: .68rem; opacity: .5; font-family: monospace; }

/* --- Card List --------------------------------------------- */
/* min-height bewusst NICHT gesetzt (war der Bug in design-system.css) */
.card-list {
    background: var(--card-bg-list, rgba(255,255,255,.10));
    border-radius: var(--border-radius-card);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* --- Zweiter FAB (KT vergeben in Alltag) ------------------- */
.fab--secondary {
    bottom: calc(88px + env(safe-area-inset-bottom));
}

/* --- Collapsible ------------------------------------------- */
.collapsible-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    color: var(--text-primary);
    text-align: left;
}
.collapsible-toggle__label {
    font-size: .9rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.collapsible-arrow {
    font-size: 1.1rem;
    transition: transform .2s;
    color: var(--text-secondary);
}
.collapsible-arrow--open { transform: rotate(180deg); }
.collapsible-body {
    margin-top: 14px;
}

/* --- KT-Summary (Grid: feste Spalten unabhängig von Namenslänge) --- */
.kt-summary-table {
    display: grid;
    grid-template-columns: 1fr 64px 64px;
    gap: 0;
}
.kt-summary-row {
    display: contents; /* Kinder direkt ins Grid einsetzen */
}
.kt-summary-row > * {
    padding: 9px 0;
    border-bottom: 1px solid var(--divider);
    display: flex;
    align-items: center;
}
/* letzte Zeile: kein border */
.kt-summary-row:last-child > * { border-bottom: none; }

.kt-summary-name {
    font-weight: 700;
    color: var(--text-primary);
    grid-column: 1;
    padding-right: 8px;
}
.kt-summary-score {
    justify-content: center;
    gap: 5px;
    font-size: 1.05rem;
    font-weight: 900;
    color: var(--text-primary);
}