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

/* ── Tokens ────────────────────────────────────────────────────────────────── */
:root, [data-theme="dark"] {
    --bg:          #141414;
    --bg2:         #1c1c1c;
    --bg3:         #242424;
    --card:        #1c1c1c;
    --border:      rgba(255,255,255,0.08);
    --border2:     rgba(255,255,255,0.15);
    --accent-soft: rgba(255,255,255,0.06);
    --text:        #e8e8e8;
    --text2:       #888;
    --muted2:      #555;
    --danger:      #f87171;
    --success:     #4ade80;
    --star:        #f59e0b;
    --radius:      10px;
    --radius-sm:   7px;
}

[data-theme="light"] {
    --bg:          #f5f5f5;
    --bg2:         #ebebeb;
    --bg3:         #e0e0e0;
    --card:        #ffffff;
    --border:      rgba(0,0,0,0.08);
    --border2:     rgba(0,0,0,0.15);
    --accent-soft: rgba(0,0,0,0.04);
    --text:        #111;
    --text2:       #666;
    --muted2:      #999;
    --danger:      #dc2626;
    --success:     #16a34a;
    --star:        #d97706;
}

html { scroll-behavior: smooth; }
body {
    font-family: 'DM Sans', sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    font-size: 14px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    transition: background .2s, color .2s;
}

/* ── Typography ────────────────────────────────────────────────────────────── */
.section-title { font-size: 1.1rem; font-weight: 500; margin-bottom: .2rem; letter-spacing: -.01em; }
.section-sub   { color: var(--text2); font-size: .82rem; margin-bottom: 1.5rem; }

/* ── Login ─────────────────────────────────────────────────────────────────── */
.login-body { background: var(--bg); }
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.login-card { width: 100%; max-width: 320px; }
.login-logo { font-size: 1rem; font-weight: 500; color: var(--text); margin-bottom: .2rem; }
.login-sub  { color: var(--text2); font-size: .8rem; margin-bottom: 2rem; }

/* ── Form elements ─────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: .85rem; }
.field label, .form-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text2); font-weight: 500; }
.form-label-hint { text-transform: none; letter-spacing: 0; font-size: .7rem; color: var(--muted2); font-weight: 400; margin-left: 4px; }

.field input, textarea {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .6rem .85rem;
    color: var(--text);
    font-family: 'DM Sans', sans-serif;
    font-size: .88rem;
    outline: none;
    transition: border-color .15s;
    width: 100%;
}
.field input:focus, textarea:focus { border-color: var(--border2); }
textarea { resize: vertical; min-height: 70px; }

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn-primary {
    width: 100%; padding: .65rem; background: var(--text); color: var(--bg);
    border: none; border-radius: var(--radius-sm); font-weight: 500; font-size: .88rem;
    cursor: pointer; font-family: 'DM Sans', sans-serif; transition: opacity .15s;
}
.btn-primary:hover { opacity: .85; }

.btn-generate {
    display: block; width: 100%; padding: .65rem; background: var(--text); color: var(--bg);
    border: none; border-radius: var(--radius); font-family: 'DM Sans', sans-serif;
    font-size: .88rem; font-weight: 500; cursor: pointer; transition: opacity .15s; margin-bottom: 1.25rem;
}
.btn-generate:hover { opacity: .85; }
.btn-generate:disabled { opacity: .25; cursor: not-allowed; }

.btn-logout {
    background: none; border: 1px solid var(--border); color: var(--text2);
    border-radius: var(--radius-sm); padding: .3rem .7rem; font-size: .76rem;
    cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all .15s;
}
.btn-logout:hover { border-color: var(--border2); color: var(--text); }

.btn-theme {
    background: none; border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: .3rem .55rem; font-size: .9rem; cursor: pointer; transition: all .15s;
}
.btn-theme:hover { border-color: var(--border2); }

.btn-inspire {
    display: block; width: 100%; padding: .65rem; background: transparent; color: var(--text2);
    border: 1px solid var(--border); border-radius: var(--radius); font-family: 'DM Sans', sans-serif;
    font-size: .88rem; cursor: pointer; transition: all .15s; margin-bottom: .85rem;
}
.btn-inspire:hover { border-color: var(--border2); color: var(--text); background: var(--accent-soft); }
.btn-inspire:disabled { opacity: .25; cursor: not-allowed; }

.btn-random {
    padding: .65rem 1rem; background: transparent; color: var(--text2); border: 1px solid var(--border);
    border-radius: var(--radius); font-family: 'DM Sans', sans-serif; font-size: .88rem;
    cursor: pointer; transition: all .15s; white-space: nowrap;
}
.btn-random:hover { border-color: var(--border2); color: var(--text); background: var(--accent-soft); }
.btn-random:disabled { opacity: .25; cursor: not-allowed; }

/* ── Alert ─────────────────────────────────────────────────────────────────── */
.alert { border-radius: var(--radius-sm); padding: .6rem .85rem; font-size: .82rem; margin-bottom: .85rem; }
.alert-error { background: rgba(220,38,38,.06); color: var(--danger); border: 1px solid rgba(220,38,38,.15); }

/* ── Header ────────────────────────────────────────────────────────────────── */
.app-header {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    padding: .7rem 1.5rem;
    background: rgba(20,20,20,.85);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    flex-wrap: wrap;
}
[data-theme="light"] .app-header { background: rgba(245,245,245,.88); }
.header-logo { font-size: .88rem; font-weight: 500; color: var(--text); white-space: nowrap; }
.header-actions { display: flex; align-items: center; gap: 6px; }

/* ── Tabs ──────────────────────────────────────────────────────────────────── */
.app-tabs { display: flex; padding: 3px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg2); flex-wrap: wrap; }
.tab { padding: .32rem .8rem; border-radius: 5px; border: none; background: transparent; color: var(--text2); cursor: pointer; font-family: 'DM Sans', sans-serif; font-size: .78rem; transition: all .15s; white-space: nowrap; }
.tab.active { background: var(--bg3); color: var(--text); }
.tab:hover:not(.active) { color: var(--text); }

.sub-tab-bar { display: flex; padding: 3px; margin-bottom: 1.5rem; width: fit-content; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg2); }
.sub-tab { padding: .3rem .85rem; border-radius: 5px; border: none; background: transparent; color: var(--text2); cursor: pointer; font-family: 'DM Sans', sans-serif; font-size: .8rem; transition: all .15s; display: flex; align-items: center; gap: 5px; }
.sub-tab.active { background: var(--bg3); color: var(--text); }

/* ── Layout ────────────────────────────────────────────────────────────────── */
.app-main { max-width: 860px; margin: 0 auto; padding: 2rem 1.5rem 4rem; width: 100%; }
.tab-content { display: none; }
.tab-content.active { display: block; }
.sub-tab-content { display: none; }
.sub-tab-content.active { display: block; }

/* ── Misc elements ─────────────────────────────────────────────────────────── */
.divider { display: flex; align-items: center; gap: 10px; margin: .85rem 0; color: var(--muted2); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.form-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.1rem; margin-bottom: .6rem; }
.form-card .form-label { display: block; margin-bottom: .5rem; }

.pill-group { display: flex; flex-wrap: wrap; gap: 5px; }
.pill { padding: 4px 12px; border-radius: 5px; border: 1px solid var(--border); background: transparent; color: var(--text2); cursor: pointer; font-size: .8rem; font-family: 'DM Sans', sans-serif; transition: all .15s; }
.pill.active { background: var(--accent-soft); color: var(--text); border-color: var(--border2); }
.pill:hover:not(.active) { border-color: var(--border2); color: var(--text); }

.provider-grid { display: flex; flex-wrap: wrap; gap: 5px; margin-top: .4rem; }
.provider-btn { padding: 5px 12px; border-radius: 5px; border: 1px solid var(--border); background: transparent; color: var(--text2); cursor: pointer; font-size: .8rem; font-family: 'DM Sans', sans-serif; transition: all .15s; }
.provider-btn:hover  { border-color: var(--border2); color: var(--text); }
.provider-btn.active { background: var(--accent-soft); color: var(--text); border-color: var(--border2); }

.film-action-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-bottom: 1.25rem; }
.film-action-row .btn-generate { margin-bottom: 0; }

.loader { text-align: center; padding: 2rem 1rem; color: var(--text2); font-size: .82rem; }
.spinner { width: 20px; height: 20px; border: 1px solid var(--border2); border-top-color: var(--text2); border-radius: 50%; animation: spin .7s linear infinite; margin: 0 auto .75rem; }
@keyframes spin { to { transform: rotate(360deg); } }

.hidden { display: none !important; }
.empty-msg { color: var(--text2); text-align: center; padding: 3rem 1rem; font-size: .85rem; }
.badge-counter { display: inline-flex; align-items: center; justify-content: center; background: var(--bg3); color: var(--text2); border: 1px solid var(--border); border-radius: 4px; font-size: .66rem; min-width: 16px; height: 16px; padding: 0 4px; }

.toast { position: fixed; bottom: 1.5rem; right: 1.5rem; background: var(--card); border: 1px solid var(--border2); border-radius: var(--radius-sm); padding: .6rem 1rem; font-size: .82rem; color: var(--text2); z-index: 200; animation: slideUp .2s ease; pointer-events: none; }
@keyframes slideUp { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ── Badge ─────────────────────────────────────────────────────────────────── */
.badge { padding: 2px 8px; border-radius: 4px; font-size: .7rem; color: var(--text2); background: var(--bg3); border: 1px solid var(--border); }

/* ── Dish cards ────────────────────────────────────────────────────────────── */
.results-grid { display: grid; gap: .6rem; }

.dish-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.2rem; transition: border-color .15s; }
.dish-card:hover { border-color: var(--border2); }
.dish-name { font-size: .95rem; font-weight: 500; margin-bottom: .3rem; }
.dish-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: .75rem; }
.dish-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted2); margin: .75rem 0 .3rem; }
.dish-text { font-size: .85rem; color: var(--text2); line-height: 1.7; }

.missing-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: .3rem; }
.missing-item { color: var(--text2); border: 1px solid var(--border); border-radius: 4px; padding: 2px 8px; font-size: .76rem; background: var(--bg3); }

.shopping-list { display: flex; flex-direction: column; gap: 3px; margin-top: .35rem; }
.shopping-item { display: flex; align-items: center; gap: 8px; padding: 5px 9px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; font-size: .83rem; color: var(--text2); }
.shopping-item input[type="checkbox"] { width: 13px; height: 13px; flex-shrink: 0; accent-color: var(--text); cursor: pointer; }
.shopping-item.checked { opacity: .3; text-decoration: line-through; }

.dish-actions { display: flex; gap: 6px; margin-top: .9rem; }
.btn-like, .btn-dislike { flex: 1; padding: .42rem; border-radius: var(--radius-sm); cursor: pointer; font-family: 'DM Sans', sans-serif; font-size: .78rem; transition: all .15s; border: 1px solid var(--border); background: transparent; color: var(--text2); }
.btn-like:hover, .btn-dislike:hover { border-color: var(--border2); color: var(--text); }

/* ── Rezept struktur ───────────────────────────────────────────────────────── */
.ingredient-list { list-style: none; display: flex; flex-direction: column; gap: 4px; margin-top: .3rem; }
.ingredient-list li { font-size: .85rem; color: var(--text2); padding: 4px 0; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 7px; }
.ingredient-list li::before { content: '·'; color: var(--muted2); font-size: 1rem; flex-shrink: 0; }
.steps-list { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-top: .3rem; }
.steps-list li { font-size: .85rem; color: var(--text2); line-height: 1.6; display: flex; gap: 10px; align-items: flex-start; }
.step-num { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--bg3); border: 1px solid var(--border); font-size: .7rem; font-weight: 600; color: var(--text2); flex-shrink: 0; margin-top: 2px; }

/* ── Liked cards ───────────────────────────────────────────────────────────── */
.liked-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: border-color .15s; }
.liked-card:hover { border-color: var(--border2); }
.liked-card-header { display: flex; align-items: center; gap: .9rem; padding: .85rem 1rem; cursor: pointer; user-select: none; }
.liked-card-title { flex: 1; min-width: 0; }
.liked-card-title .dish-name { font-size: .9rem; font-weight: 500; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.liked-score { font-size: .75rem; color: var(--muted2); margin-top: 3px; display: block; }
.liked-chevron { color: var(--muted2); font-size: 1rem; transition: transform .2s; flex-shrink: 0; }
.liked-card-body { padding: 0 1rem 1rem; border-top: 1px solid var(--border); }
.liked-card-body .dish-label { margin-top: .85rem; }
.liked-actions { margin-top: .85rem; }
.liked-remove-btn { background: transparent; border: 1px solid var(--border); color: var(--muted2); border-radius: var(--radius-sm); padding: 4px 12px; font-size: .75rem; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all .15s; }
.liked-remove-btn:hover { border-color: var(--danger); color: var(--danger); }
.unsplash-credit { display: none; }

.liked-thumb { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: var(--bg2); border: 1px solid var(--border); }
.liked-thumb-placeholder { width: 56px; height: 56px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0; }
.liked-thumb-spinner { width: 56px; height: 56px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.liked-thumb-spinner .spinner { width: 16px; height: 16px; margin: 0; }

/* ── Movie cards ───────────────────────────────────────────────────────────── */
.movie-results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: 1rem; }
.movie-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: border-color .2s, transform .2s; }
.movie-card:hover { border-color: var(--border2); transform: translateY(-2px); }
.movie-watched { opacity: .55; }
.movie-poster { width: 100%; aspect-ratio: 2/3; object-fit: cover; display: block; background: var(--bg3); }
.movie-poster-placeholder { width: 100%; aspect-ratio: 2/3; background: var(--bg3); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: var(--muted2); }
.movie-info { padding: .8rem .85rem; flex: 1; display: flex; flex-direction: column; }
.movie-title { font-size: .88rem; font-weight: 500; margin-bottom: .3rem; line-height: 1.35; }
.movie-meta { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: .45rem; }
.movie-overview { font-size: .77rem; color: var(--text2); line-height: 1.6; flex: 1; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: .6rem; }
.movie-providers { margin-bottom: .5rem; min-height: 20px; }
.provider-logos { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.provider-logo { width: 22px; height: 22px; border-radius: 5px; object-fit: cover; opacity: .85; transition: opacity .15s; }
.provider-logo:hover { opacity: 1; }
.provider-name { font-size: .7rem; color: var(--text2); background: var(--bg3); border: 1px solid var(--border); border-radius: 4px; padding: 2px 6px; }
.no-provider { font-size: .7rem; color: var(--muted2); }
.movie-actions { display: flex; gap: 5px; flex-wrap: wrap; margin-top: auto; }

.btn-wl-add, .btn-wl-remove { flex: 1; padding: .38rem .5rem; border-radius: var(--radius-sm); cursor: pointer; font-family: 'DM Sans', sans-serif; font-size: .74rem; transition: all .15s; border: 1px solid var(--border); background: transparent; color: var(--text2); text-align: center; }
.btn-wl-add:hover, .btn-wl-remove:hover { border-color: var(--border2); color: var(--text); }
.btn-wl-saved { border-color: var(--border2) !important; color: var(--text) !important; }
.btn-watched { flex: 1; padding: .38rem .5rem; border-radius: var(--radius-sm); cursor: pointer; font-family: 'DM Sans', sans-serif; font-size: .74rem; transition: all .15s; border: 1px solid var(--border); background: transparent; color: var(--text2); }
.btn-watched:hover { border-color: var(--border2); color: var(--text); }
.btn-watched-on { border-color: var(--success) !important; color: var(--success) !important; }
.trailer-link { font-size: .74rem; color: var(--text2); cursor: pointer; padding: .38rem .4rem; border-radius: var(--radius-sm); border: 1px solid var(--border); text-align: center; transition: all .15s; }
.trailer-link:hover { border-color: var(--border2); color: var(--text); }

/* ── Watchlist extras ──────────────────────────────────────────────────────── */
.wl-filter-bar { display: flex; gap: 5px; margin-bottom: 1rem; flex-wrap: wrap; }
.wl-note-row { display: flex; align-items: center; gap: 6px; margin-bottom: .3rem; flex-wrap: wrap; }
.btn-note { background: none; border: none; color: var(--text2); font-size: .74rem; cursor: pointer; font-family: 'DM Sans', sans-serif; padding: 0; transition: color .15s; }
.btn-note:hover { color: var(--text); }
.note-preview { font-size: .72rem; color: var(--muted2); font-style: italic; }
.star-rating { display: flex; gap: 2px; margin-bottom: .4rem; }
.star { font-size: 1rem; color: var(--border2); cursor: pointer; transition: color .15s; line-height: 1; }
.star-on { color: var(--star); }
.star:hover { color: var(--star); }

/* ── Modal ─────────────────────────────────────────────────────────────────── */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.modal-box { background: var(--card); border: 1px solid var(--border2); border-radius: var(--radius); padding: 1.5rem; width: 100%; max-width: 380px; }
.modal-title { font-size: .95rem; font-weight: 500; margin-bottom: 1rem; }
.modal-box textarea { width: 100%; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .65rem .85rem; color: var(--text); font-family: 'DM Sans', sans-serif; font-size: .88rem; outline: none; resize: vertical; }
.modal-box textarea:focus { border-color: var(--border2); }
.modal-actions { display: flex; gap: 8px; margin-top: 1rem; }
.btn-modal-save { flex: 1; padding: .6rem; background: var(--text); color: var(--bg); border: none; border-radius: var(--radius-sm); font-family: 'DM Sans', sans-serif; font-size: .88rem; font-weight: 500; cursor: pointer; transition: opacity .15s; }
.btn-modal-save:hover { opacity: .85; }
.btn-modal-cancel { flex: 1; padding: .6rem; background: transparent; color: var(--text2); border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: 'DM Sans', sans-serif; font-size: .88rem; cursor: pointer; transition: all .15s; }
.btn-modal-cancel:hover { border-color: var(--border2); color: var(--text); }

/* ── Dashboard ─────────────────────────────────────────────────────────────── */
.dash-clock { text-align: center; margin-bottom: 1.75rem; padding-top: .5rem; }
.dash-time { font-size: 3.5rem; font-weight: 300; letter-spacing: -.02em; color: var(--text); line-height: 1; }
.dash-date { font-size: .85rem; color: var(--text2); margin-top: .3rem; text-transform: capitalize; }

.dash-top-row, .dash-bottom-row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin-bottom: .9rem; }

.dash-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.2rem; }
.dash-weather { min-height: 120px; }
.dash-card-loader { display: flex; align-items: center; justify-content: center; min-height: 100px; }

.dash-card-title { display: flex; align-items: center; justify-content: space-between; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted2); margin-bottom: .9rem; }

.dash-add-btn { background: transparent; border: 1px solid var(--border); color: var(--text2); border-radius: 6px; width: 22px; height: 22px; cursor: pointer; font-size: .9rem; line-height: 1; transition: all .15s; display: flex; align-items: center; justify-content: center; }
.dash-add-btn:hover { border-color: var(--border2); color: var(--text); }

.dash-nav-btn { background: transparent; border: none; color: var(--muted2); font-size: .75rem; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: color .15s; padding: 0; }
.dash-nav-btn:hover { color: var(--text); }

.dash-empty { font-size: .8rem; color: var(--muted2); text-align: center; padding: .75rem 0; }

/* Weather */
.weather-main { display: flex; align-items: center; gap: .6rem; margin-bottom: .3rem; }
.weather-icon { font-size: 2.2rem; line-height: 1; }
.weather-temp { font-size: 2.2rem; font-weight: 300; letter-spacing: -.02em; }
.weather-desc { font-size: .85rem; color: var(--text2); margin-bottom: .5rem; }
.weather-meta { display: flex; gap: .75rem; font-size: .78rem; color: var(--muted2); margin-bottom: .4rem; flex-wrap: wrap; }
.weather-city { font-size: .72rem; color: var(--muted2); text-transform: uppercase; letter-spacing: .07em; }
.weather-error { color: var(--muted2); font-size: .82rem; text-align: center; padding: 1rem 0; }

/* Forecast */
.forecast-row { display: flex; gap: 4px; margin-top: .75rem; padding-top: .65rem; border-top: 1px solid var(--border); }
.forecast-day { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 2px; border-radius: 8px; background: var(--bg2); border: 1px solid var(--border); }
.forecast-label { font-size: .68rem; color: var(--muted2); text-transform: uppercase; letter-spacing: .04em; }
.forecast-icon { font-size: 1.1rem; line-height: 1; }
.forecast-temps { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.forecast-max { font-size: .8rem; font-weight: 500; color: var(--text); }
.forecast-min { font-size: .72rem; color: var(--text2); }

/* Countdowns */
.countdown-list { display: flex; flex-direction: column; gap: 6px; }
.countdown-item { display: flex; align-items: center; gap: .7rem; padding: .5rem .6rem; background: var(--bg2); border-radius: var(--radius-sm); border: 1px solid var(--border); }
.countdown-past { opacity: .45; }
.countdown-emoji { font-size: 1.1rem; flex-shrink: 0; }
.countdown-info { flex: 1; min-width: 0; }
.countdown-title { display: block; font-size: .85rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.countdown-label { display: block; font-size: .75rem; color: var(--text2); margin-top: 1px; }
.countdown-del { background: none; border: none; color: var(--muted2); cursor: pointer; font-size: .75rem; padding: 2px 5px; border-radius: 4px; transition: all .15s; flex-shrink: 0; }
.countdown-del:hover { color: var(--danger); }

/* Watchlist & liked preview */
.dash-poster-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.dash-poster-item { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 60px; }
.dash-poster-item img { width: 60px; height: 90px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); }
.dash-poster-placeholder { width: 60px; height: 90px; background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; }
.dash-poster-title { font-size: .65rem; color: var(--text2); text-align: center; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; width: 100%; }
.dash-liked-row { display: flex; flex-direction: column; gap: 5px; }
.dash-dish-item { display: flex; align-items: center; justify-content: space-between; padding: 5px 7px; background: var(--bg2); border-radius: 6px; border: 1px solid var(--border); }
.dash-dish-name { font-size: .83rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.dash-dish-score { font-size: .7rem; flex-shrink: 0; margin-left: .5rem; }

.dash-clickable { cursor: pointer; transition: opacity .15s, transform .15s; }
.dash-clickable:hover { opacity: .75; transform: translateY(-1px); }

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .app-header { padding: .65rem 1rem; gap: .5rem; }
    .app-main   { padding: 1.25rem 1rem 3rem; }
    .movie-results-grid { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
    .dash-top-row, .dash-bottom-row { grid-template-columns: 1fr; }
    .dash-time  { font-size: 2.5rem; }
    .tab        { padding: .3rem .6rem; font-size: .75rem; }
}

/* ── Life Tab ──────────────────────────────────────────────────────────────── */
.life-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.btn-life-add { background: var(--text); color: var(--bg); border: none; border-radius: var(--radius-sm); padding: .45rem .9rem; font-size: .82rem; font-weight: 500; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: opacity .15s; white-space: nowrap; flex-shrink: 0; }
.btn-life-add:hover { opacity: .85; }

/* Birthdays */
.bday-list { display: grid; gap: .6rem; }
.bday-item { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem 1.1rem; display: flex; align-items: center; gap: 1rem; transition: border-color .15s; }
.bday-item:hover { border-color: var(--border2); }
.bday-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--bg3); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.bday-info { flex: 1; min-width: 0; }
.bday-name { font-size: .92rem; font-weight: 500; }
.bday-date { font-size: .78rem; color: var(--text2); margin-top: 2px; }
.bday-countdown { text-align: right; flex-shrink: 0; }
.bday-days { font-size: 1.1rem; font-weight: 500; }
.bday-days.soon { color: #f59e0b; }
.bday-days.today { color: var(--success); }
.bday-label { font-size: .72rem; color: var(--muted2); }
.bday-del { background: none; border: none; color: var(--muted2); cursor: pointer; font-size: .8rem; padding: 4px 6px; border-radius: 4px; transition: all .15s; }
.bday-del:hover { color: var(--danger); }

/* Dashboard birthday row */
.dash-birthday-row { display: flex; flex-direction: column; gap: 5px; }
.dash-bday-item { display: flex; align-items: center; gap: .6rem; padding: 5px 7px; background: var(--bg2); border-radius: 6px; border: 1px solid var(--border); }
.dash-bday-name { flex: 1; font-size: .83rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-bday-days { font-size: .75rem; color: var(--text2); flex-shrink: 0; }

/* Shopping */
.shopping-lists-wrap { display: grid; gap: 1rem; }
.shopping-list-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.shopping-list-header { display: flex; align-items: center; justify-content: space-between; padding: .85rem 1rem; border-bottom: 1px solid var(--border); }
.shopping-list-name { font-size: .92rem; font-weight: 500; }
.shopping-list-actions { display: flex; gap: 6px; align-items: center; }
.shopping-list-body { padding: .75rem 1rem; }
.shopping-list-input-row { display: flex; gap: 6px; margin-bottom: .75rem; }
.shopping-list-input-row input { flex: 1; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .45rem .75rem; color: var(--text); font-family: 'DM Sans', sans-serif; font-size: .85rem; outline: none; }
.shopping-list-input-row input:focus { border-color: var(--border2); }
.btn-add-item { background: var(--text); color: var(--bg); border: none; border-radius: var(--radius-sm); padding: .45rem .8rem; font-size: .82rem; cursor: pointer; white-space: nowrap; }
.shopping-item-row { display: flex; align-items: center; gap: .6rem; padding: 5px 0; border-bottom: 1px solid var(--border); }
.shopping-item-row:last-child { border-bottom: none; }
.shopping-item-row input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--text); cursor: pointer; flex-shrink: 0; }
.shopping-item-name { flex: 1; font-size: .85rem; color: var(--text2); }
.shopping-item-name.done { text-decoration: line-through; opacity: .45; }
.btn-del-item { background: none; border: none; color: var(--muted2); cursor: pointer; font-size: .75rem; padding: 2px 5px; border-radius: 4px; transition: all .15s; }
.btn-del-item:hover { color: var(--danger); }
.btn-clear-checked { background: transparent; border: 1px solid var(--border); color: var(--muted2); border-radius: var(--radius-sm); padding: 3px 9px; font-size: .75rem; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all .15s; }
.btn-clear-checked:hover { border-color: var(--border2); color: var(--text); }
.btn-del-list { background: transparent; border: 1px solid var(--border); color: var(--muted2); border-radius: var(--radius-sm); padding: 3px 9px; font-size: .75rem; cursor: pointer; transition: all .15s; }
.btn-del-list:hover { border-color: var(--danger); color: var(--danger); }

/* Budget */
.budget-nav { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.budget-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-bottom: 1rem; }
.budget-stat { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: .85rem 1rem; text-align: center; }
.budget-stat-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted2); margin-bottom: .3rem; }
.budget-stat-value { font-size: 1.2rem; font-weight: 500; }
.budget-stat-value.income { color: var(--success); }
.budget-stat-value.expense { color: var(--danger); }
.budget-list { display: grid; gap: .5rem; }
.budget-item { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .75rem 1rem; display: flex; align-items: center; gap: .75rem; transition: border-color .15s; }
.budget-item:hover { border-color: var(--border2); }
.budget-item-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.budget-item-info { flex: 1; min-width: 0; }
.budget-item-desc { font-size: .88rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.budget-item-cat { font-size: .74rem; color: var(--text2); }
.budget-item-amount { font-size: .95rem; font-weight: 500; flex-shrink: 0; }
.budget-item-amount.income { color: var(--success); }
.budget-item-amount.expense { color: var(--danger); }
.budget-item-date { font-size: .72rem; color: var(--muted2); flex-shrink: 0; }
.btn-del-budget { background: none; border: none; color: var(--muted2); cursor: pointer; font-size: .75rem; padding: 2px 5px; border-radius: 4px; transition: all .15s; }
.btn-del-budget:hover { color: var(--danger); }

/* Subscriptions */
.sub-summary { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: 1rem; }
.sub-list { display: grid; gap: .6rem; }
.sub-item { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem 1.1rem; display: flex; align-items: center; gap: .9rem; transition: border-color .15s; }
.sub-item:hover { border-color: var(--border2); }
.sub-color-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.sub-info { flex: 1; min-width: 0; }
.sub-name { font-size: .92rem; font-weight: 500; }
.sub-next { font-size: .74rem; color: var(--text2); margin-top: 2px; }
.sub-amount { text-align: right; flex-shrink: 0; }
.sub-price { font-size: .95rem; font-weight: 500; }
.sub-interval { font-size: .72rem; color: var(--muted2); }
.btn-del-sub { background: none; border: none; color: var(--muted2); cursor: pointer; font-size: .8rem; padding: 4px 6px; border-radius: 4px; transition: all .15s; }
.btn-del-sub:hover { color: var(--danger); }

/* ── Life Tab ──────────────────────────────────────────────────────────────── */
.life-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.btn-life-add { background: var(--text); color: var(--bg); border: none; border-radius: var(--radius-sm); padding: .45rem .9rem; font-size: .82rem; font-weight: 500; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: opacity .15s; white-space: nowrap; flex-shrink: 0; }
.btn-life-add:hover { opacity: .85; }

/* Birthdays */
.bday-list { display: grid; gap: .6rem; }
.bday-item { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem 1.1rem; display: flex; align-items: center; gap: 1rem; transition: border-color .15s; }
.bday-item:hover { border-color: var(--border2); }
.bday-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--bg3); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.bday-info { flex: 1; min-width: 0; }
.bday-name { font-size: .92rem; font-weight: 500; }
.bday-date { font-size: .78rem; color: var(--text2); margin-top: 2px; }
.bday-countdown { text-align: right; flex-shrink: 0; }
.bday-days { font-size: 1.1rem; font-weight: 500; }
.bday-days.soon { color: #f59e0b; }
.bday-days.today { color: var(--success); }
.bday-label { font-size: .72rem; color: var(--muted2); }
.bday-del { background: none; border: none; color: var(--muted2); cursor: pointer; font-size: .8rem; padding: 4px 6px; border-radius: 4px; transition: all .15s; }
.bday-del:hover { color: var(--danger); }

/* Dashboard birthday row */
.dash-birthday-row { display: flex; flex-direction: column; gap: 5px; }
.dash-bday-item { display: flex; align-items: center; gap: .6rem; padding: 5px 7px; background: var(--bg2); border-radius: 6px; border: 1px solid var(--border); }
.dash-bday-name { flex: 1; font-size: .83rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-bday-days { font-size: .75rem; color: var(--text2); flex-shrink: 0; }

/* Shopping */
.shopping-lists-wrap { display: grid; gap: 1rem; }
.shopping-list-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.shopping-list-header { display: flex; align-items: center; justify-content: space-between; padding: .85rem 1rem; border-bottom: 1px solid var(--border); }
.shopping-list-name { font-size: .92rem; font-weight: 500; }
.shopping-list-actions { display: flex; gap: 6px; align-items: center; }
.shopping-list-body { padding: .75rem 1rem; }
.shopping-list-input-row { display: flex; gap: 6px; margin-bottom: .75rem; }
.shopping-list-input-row input { flex: 1; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .45rem .75rem; color: var(--text); font-family: 'DM Sans', sans-serif; font-size: .85rem; outline: none; }
.shopping-list-input-row input:focus { border-color: var(--border2); }
.btn-add-item { background: var(--text); color: var(--bg); border: none; border-radius: var(--radius-sm); padding: .45rem .8rem; font-size: .82rem; cursor: pointer; white-space: nowrap; }
.shopping-item-row { display: flex; align-items: center; gap: .6rem; padding: 5px 0; border-bottom: 1px solid var(--border); }
.shopping-item-row:last-child { border-bottom: none; }
.shopping-item-row input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--text); cursor: pointer; flex-shrink: 0; }
.shopping-item-name { flex: 1; font-size: .85rem; color: var(--text2); }
.shopping-item-name.done { text-decoration: line-through; opacity: .45; }
.btn-del-item { background: none; border: none; color: var(--muted2); cursor: pointer; font-size: .75rem; padding: 2px 5px; border-radius: 4px; transition: all .15s; }
.btn-del-item:hover { color: var(--danger); }
.btn-clear-checked { background: transparent; border: 1px solid var(--border); color: var(--muted2); border-radius: var(--radius-sm); padding: 3px 9px; font-size: .75rem; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all .15s; }
.btn-clear-checked:hover { border-color: var(--border2); color: var(--text); }
.btn-del-list { background: transparent; border: 1px solid var(--border); color: var(--muted2); border-radius: var(--radius-sm); padding: 3px 9px; font-size: .75rem; cursor: pointer; transition: all .15s; }
.btn-del-list:hover { border-color: var(--danger); color: var(--danger); }

/* Budget */
.budget-nav { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.budget-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-bottom: 1rem; }
.budget-stat { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: .85rem 1rem; text-align: center; }
.budget-stat-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted2); margin-bottom: .3rem; }
.budget-stat-value { font-size: 1.2rem; font-weight: 500; }
.budget-stat-value.income { color: var(--success); }
.budget-stat-value.expense { color: var(--danger); }
.budget-list { display: grid; gap: .5rem; }
.budget-item { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .75rem 1rem; display: flex; align-items: center; gap: .75rem; transition: border-color .15s; }
.budget-item:hover { border-color: var(--border2); }
.budget-item-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.budget-item-info { flex: 1; min-width: 0; }
.budget-item-desc { font-size: .88rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.budget-item-cat { font-size: .74rem; color: var(--text2); }
.budget-item-amount { font-size: .95rem; font-weight: 500; flex-shrink: 0; }
.budget-item-amount.income { color: var(--success); }
.budget-item-amount.expense { color: var(--danger); }
.budget-item-date { font-size: .72rem; color: var(--muted2); flex-shrink: 0; }
.btn-del-budget { background: none; border: none; color: var(--muted2); cursor: pointer; font-size: .75rem; padding: 2px 5px; border-radius: 4px; transition: all .15s; }
.btn-del-budget:hover { color: var(--danger); }

/* Subscriptions */
.sub-summary { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: 1rem; }
.sub-list { display: grid; gap: .6rem; }
.sub-item { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem 1.1rem; display: flex; align-items: center; gap: .9rem; transition: border-color .15s; }
.sub-item:hover { border-color: var(--border2); }
.sub-color-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.sub-info { flex: 1; min-width: 0; }
.sub-name { font-size: .92rem; font-weight: 500; }
.sub-next { font-size: .74rem; color: var(--text2); margin-top: 2px; }
.sub-amount { text-align: right; flex-shrink: 0; }
.sub-price { font-size: .95rem; font-weight: 500; }
.sub-interval { font-size: .72rem; color: var(--muted2); }
.btn-del-sub { background: none; border: none; color: var(--muted2); cursor: pointer; font-size: .8rem; padding: 4px 6px; border-radius: 4px; transition: all .15s; }
.btn-del-sub:hover { color: var(--danger); }

/* ── Book Tracker ──────────────────────────────────────────────────────────── */
.book-search-row { display: flex; gap: 8px; }
.book-search-row input { flex: 1; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .55rem .85rem; color: var(--text); font-family: 'DM Sans', sans-serif; font-size: .88rem; outline: none; transition: border-color .15s; }
.book-search-row input:focus { border-color: var(--border2); }

.book-filter-bar { display: flex; gap: 5px; flex-wrap: wrap; margin: 1rem 0; }

.book-search-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.book-search-item { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; cursor: pointer; transition: border-color .2s, transform .15s; }
.book-search-item:hover { border-color: var(--border2); transform: translateY(-2px); }
.book-search-item img { width: 100%; aspect-ratio: 2/3; object-fit: cover; display: block; background: var(--bg3); }
.book-search-cover-placeholder { width: 100%; aspect-ratio: 2/3; background: var(--bg3); display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--muted2); }
.book-search-info { padding: .6rem .7rem; }
.book-search-title { font-size: .8rem; font-weight: 500; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.book-search-author { font-size: .72rem; color: var(--text2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.book-search-add { width: 100%; padding: .35rem; background: var(--text); color: var(--bg); border: none; font-family: 'DM Sans', sans-serif; font-size: .75rem; font-weight: 500; cursor: pointer; transition: opacity .15s; }
.book-search-add:hover { opacity: .85; }

.book-list { display: grid; gap: .6rem; }
.book-item { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem 1rem; display: flex; gap: .9rem; align-items: flex-start; transition: border-color .15s; }
.book-item:hover { border-color: var(--border2); }
.book-cover { width: 52px; height: 78px; object-fit: cover; border-radius: 5px; flex-shrink: 0; background: var(--bg3); border: 1px solid var(--border); }
.book-cover-placeholder { width: 52px; height: 78px; background: var(--bg3); border: 1px solid var(--border); border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0; }
.book-info { flex: 1; min-width: 0; }
.book-title { font-size: .92rem; font-weight: 500; line-height: 1.35; }
.book-author { font-size: .78rem; color: var(--text2); margin-top: 2px; }
.book-meta { display: flex; gap: 5px; flex-wrap: wrap; margin-top: .4rem; }
.book-status-select { background: var(--bg2); border: 1px solid var(--border); border-radius: 5px; color: var(--text2); font-size: .74rem; font-family: 'DM Sans', sans-serif; padding: 3px 7px; cursor: pointer; outline: none; }
.book-stars { display: flex; gap: 2px; margin-top: .4rem; }
.book-star { font-size: .9rem; color: var(--border2); cursor: pointer; transition: color .15s; }
.book-star.on { color: var(--star); }
.book-del { background: none; border: none; color: var(--muted2); cursor: pointer; font-size: .8rem; padding: 4px 6px; border-radius: 4px; transition: all .15s; margin-left: auto; flex-shrink: 0; }
.book-del:hover { color: var(--danger); }

/* ── Import URL input ──────────────────────────────────────────────────────── */
.form-card input[type="url"] { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .6rem .85rem; color: var(--text); font-family: 'DM Sans', sans-serif; font-size: .88rem; outline: none; transition: border-color .15s; width: 100%; }
.form-card input[type="url"]:focus { border-color: var(--border2); }
/* ── Multi-select pill group ── */
.pill-group-multi { flex-wrap: wrap; }
.form-hint-inline { font-size: .72rem; color: var(--muted2); font-weight: 400; margin-left: .4rem; }

/* ── Deals CSS ── */
.deals-input-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.deals-input-row input[type="text"] { flex: 1; min-width: 200px; }
.deals-input-row input[type="date"] { width: 150px; }
.form-hint { font-size: .75rem; color: var(--muted2); margin-top: .3rem; }
.deals-hint { display: flex; align-items: center; gap: .6rem; background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.3); border-radius: 10px; padding: .5rem .85rem; margin-bottom: .75rem; font-size: .83rem; color: var(--text); flex-wrap: wrap; }
.deals-hint-icon { font-size: 1rem; flex-shrink: 0; }
.deals-toggle-label { display: flex; align-items: center; gap: .35rem; font-size: .8rem; cursor: pointer; margin-left: auto; color: var(--muted2); }
.deals-toggle-label input { cursor: pointer; }
.deals-group { margin-bottom: 1rem; }
.deals-group-label { font-size: .75rem; font-weight: 600; color: var(--muted2); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .4rem; padding-bottom: .3rem; border-bottom: 1px solid var(--border); }
.deals-expired { opacity: .5; }
.deals-items { display: flex; flex-direction: column; gap: .3rem; }
.deal-item { display: flex; align-items: center; gap: .6rem; background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: .45rem .7rem; transition: border-color .15s; }
.deal-item:hover { border-color: #f59e0b; }
.deal-icon { font-size: .9rem; flex-shrink: 0; }
.deal-text { flex: 1; font-size: .875rem; color: var(--text); }
.deal-del-btn { background: none; border: none; color: var(--muted2); cursor: pointer; font-size: .85rem; padding: 2px 5px; border-radius: 4px; transition: color .15s; flex-shrink: 0; }
.deal-del-btn:hover { color: #ef4444; }
.badge-deal { background: rgba(245,158,11,.15) !important; color: #d97706 !important; border: 1px solid rgba(245,158,11,.3); }
.deals-scan-card { border: 2px dashed var(--border); }
.deals-upload-zone { border: 2px dashed var(--border); border-radius: 12px; padding: 2rem 1rem; text-align: center; cursor: pointer; transition: border-color .2s, background .2s; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.deals-upload-zone:hover, .deals-upload-zone.dragover { border-color: var(--border2); background: var(--accent-soft); }
.deals-upload-icon { font-size: 2rem; }
.deals-upload-text { font-size: .875rem; color: var(--muted2); line-height: 1.5; }
.deals-upload-text span { font-size: .78rem; color: var(--text2); }
.deals-scan-preview { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .75rem; }
.deals-preview-img { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.deals-preview-pdf { background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: .5rem .75rem; font-size: .8rem; color: var(--muted2); }
.scan-results-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; flex-wrap: wrap; gap: .5rem; font-size: .9rem; color: var(--text); }
.scan-results-actions { display: flex; gap: .5rem; }
.scan-category { margin-bottom: .85rem; }
.scan-cat-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted2); margin-bottom: .35rem; padding-bottom: .25rem; border-bottom: 1px solid var(--border); }
.scan-item-check { display: flex; align-items: center; gap: .6rem; padding: .35rem .5rem; border-radius: 6px; cursor: pointer; font-size: .85rem; color: var(--text); transition: background .15s; }
.scan-item-check:hover { background: var(--border); }
.scan-item-check input { cursor: pointer; flex-shrink: 0; accent-color: var(--text2); }

/* ════ GOOGLE KALENDER ════ */
.cal-header-actions { display:flex; align-items:center; gap:.5rem; }
.btn-gcal-connect { font-size:12px; padding:4px 12px; border-radius:8px; background:#4285f4; color:#fff; border:none; cursor:pointer; text-decoration:none; font-family:inherit; font-weight:500; transition:background .15s; }
.btn-gcal-connect:hover { background:#3367d6; }
.btn-gcal-disconnect { font-size:11px; padding:3px 10px; border-radius:8px; background:none; color:var(--muted2); border:1px solid var(--border); cursor:pointer; transition:color .15s; }
.btn-gcal-disconnect:hover { color:#ef4444; border-color:#ef4444; }
.cal-empty-state { display:flex; flex-direction:column; align-items:center; padding:2rem 1rem; color:var(--muted2); text-align:center; gap:.4rem; }
.cal-empty-icon { font-size:2rem; }
.cal-nav { display:flex; align-items:center; justify-content:space-between; padding:.35rem 0 .6rem; font-weight:500; font-size:.95rem; color:var(--text); }
.cal-nav-btn { background:none; border:1px solid var(--border); color:var(--text); border-radius:6px; width:28px; height:28px; cursor:pointer; font-size:1.1rem; display:flex; align-items:center; justify-content:center; transition:background .15s; }
.cal-nav-btn:hover { background:var(--border); }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.cal-day-header { text-align:center; font-size:.72rem; font-weight:600; color:var(--muted2); padding:3px 0 6px; }
.cal-weekend-header { color:#f59e0b; }
.cal-cell { display:flex; flex-direction:column; align-items:stretch; padding:4px 3px 3px; border-radius:8px; cursor:pointer; transition:background .15s; min-height:56px; overflow:hidden; }
.cal-cell:hover { background:var(--border); }
.cal-cell.cal-empty { cursor:default; min-height:56px; }
.cal-cell.cal-empty:hover { background:none; }
.cal-cell.cal-weekend { background:rgba(245,158,11,.05); }
.cal-cell.cal-weekend:hover { background:rgba(245,158,11,.12); }
.cal-cell.cal-weekend .cal-day-num { color:#f59e0b; }
.cal-cell.cal-today { background:rgba(99,102,241,.12); border:1px solid rgba(99,102,241,.35); }
.cal-cell.cal-today .cal-day-num { background:var(--accent,#6366f1); color:#fff; border-radius:50%; width:22px; height:22px; display:flex; align-items:center; justify-content:center; font-weight:700; margin:0 auto; }
.cal-day-num { font-size:.8rem; color:var(--text); line-height:1; text-align:center; margin-bottom:3px; font-weight:500; }
.cal-pills { display:flex; flex-direction:column; gap:2px; margin-top:1px; }
.cal-event-pill { display:flex; align-items:center; gap:2px; background:rgba(255,255,255,.06); border-radius:3px; border-left:2px solid #6366f1; padding:1px 3px; overflow:hidden; }
.cal-pill-icon { font-size:.65rem; flex-shrink:0; line-height:1; }
.cal-pill-label { font-size:.62rem; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.3; opacity:.9; }
.cal-overflow { font-size:.6rem; color:var(--muted2); text-align:right; padding-right:2px; }
.cal-day-events { margin-top:.75rem; border-top:1px solid var(--border); padding-top:.75rem; display:flex; flex-direction:column; gap:.45rem; }
.cal-day-title { font-size:.85rem; font-weight:600; color:var(--muted2); margin-bottom:.25rem; }
.cal-event-item { display:flex; align-items:flex-start; gap:.6rem; background:var(--bg2); border-radius:8px; padding:.5rem .65rem; border-left:3px solid #6366f1; }
.cal-event-icon { font-size:1rem; flex-shrink:0; margin-top:1px; }
.cal-event-info { flex:1; min-width:0; }
.cal-event-name { font-size:.875rem; font-weight:500; color:var(--text); }
.cal-event-time { font-size:.78rem; color:var(--muted2); margin-left:.4rem; }
.cal-event-meta { font-size:.78rem; color:var(--muted2); margin-top:1px; }
.cal-event-actions { display:flex; align-items:center; gap:.3rem; flex-shrink:0; }
.cal-open-btn { color:var(--muted2); font-size:.85rem; text-decoration:none; padding:2px 5px; border-radius:4px; transition:color .15s; }
.cal-open-btn:hover { color:var(--accent,#6366f1); }
.cal-del-btn { background:none; border:none; color:var(--muted2); cursor:pointer; font-size:.85rem; padding:2px 4px; border-radius:4px; transition:color .15s; }
.cal-del-btn:hover { color:#ef4444; }

.badge-counter:empty { display: none; }

/* Deal-related — theme-aware */
:root, [data-theme="dark"] {
    --deal-bg:       rgba(146, 64, 14, 0.13);
    --deal-bg-hover: rgba(146, 64, 14, 0.22);
    --deal-border:   rgba(245, 158, 11, 0.35);
    --deal-color:    #f59e0b;
}
[data-theme="light"] {
    --deal-bg:       rgba(217, 119, 6, 0.10);
    --deal-bg-hover: rgba(217, 119, 6, 0.18);
    --deal-border:   rgba(180, 83, 9, 0.30);
    --deal-color:    #b45309;
}

.btn-deal-scan { padding: .4rem .9rem; border-radius: 20px; font-size: .8rem; cursor: pointer; transition: all .15s; border: 1px solid var(--deal-border); background: var(--deal-bg); color: var(--deal-color); white-space: nowrap; }
.btn-deal-scan:hover { background: var(--deal-bg-hover); }
.btn-deal-scan:disabled { opacity: .5; cursor: default; }

.btn-deal-check { margin: .6rem 0 .4rem; padding: .35rem .85rem; border-radius: 20px; font-size: .78rem; cursor: pointer; transition: all .15s; border: 1px solid var(--deal-border); background: var(--deal-bg); color: var(--deal-color); }
.btn-deal-check:hover { background: var(--deal-bg-hover); }
.btn-deal-check:disabled { opacity: .5; cursor: default; }
.deal-check-result { margin-bottom: .25rem; }

.deal-matches { display: flex; flex-direction: column; gap: .4rem; margin: .4rem 0 .75rem; }
.deal-match-tag { display: flex; align-items: baseline; gap: .5rem; background: var(--deal-bg); border: 1px solid var(--deal-border); border-radius: 8px; padding: .35rem .7rem; }
.deal-match-tag::before { content: '🏷️'; flex-shrink: 0; }
.deal-match-ing { font-size: .75rem; color: var(--deal-color); font-weight: 500; white-space: nowrap; flex-shrink: 0; }
.deal-match-name { font-size: .72rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liked-deal-badge { font-size: .7rem; background: var(--deal-bg); border: 1px solid var(--deal-border); border-radius: 10px; padding: .15rem .5rem; color: var(--deal-color); }

/* Filter groups */
.filter-group-label { font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted2); margin: .75rem 0 .3rem; }
.filter-group { margin-bottom: .25rem; }

/* Liked cards */
.liked-cat-badge { font-size: .7rem; background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: .15rem .5rem; color: var(--muted); }
.liked-cat-row { margin-top: .85rem; margin-bottom: .5rem; }
.liked-cat-pills { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .35rem; }
.pill-sm { padding: .25rem .6rem; font-size: .75rem; }

/* Liked filter bar */
.liked-filter-bar { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem; }
.liked-filter-btn { padding: .35rem .75rem; border-radius: 20px; border: 1px solid var(--border); background: var(--bg2); color: var(--muted); font-size: .78rem; cursor: pointer; transition: all .15s; }
.liked-filter-btn.active, .liked-filter-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Shopping list */
.shopping-ing-list { list-style: none; padding: 0; }
.shopping-ing-list li { display: flex; align-items: center; justify-content: space-between; padding: .3rem 0; border-bottom: 1px solid var(--border); gap: .5rem; }
.shopping-ing-list li:last-child { border-bottom: none; }
.ing-name { flex: 1; font-size: .85rem; }
.btn-add-shopping { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border2); background: var(--bg3); color: var(--text2); font-size: .85rem; line-height: 1; cursor: pointer; transition: all .15s; display: flex; align-items: center; justify-content: center; }
.btn-add-shopping:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-add-shopping:disabled { opacity: .5; cursor: default; }

.shopping-group { margin-bottom: 1rem; }
.shopping-group-label { font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted2); margin-bottom: .4rem; }
.shopping-item { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border-radius: 8px; cursor: pointer; transition: background .1s; }
.shopping-item:hover { background: var(--bg2); }
.shopping-item.done .shopping-item-name { text-decoration: line-through; color: var(--muted2); }
.shopping-item input[type=checkbox] { flex-shrink: 0; width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent); }
.shopping-item-name { flex: 1; font-size: .88rem; }
.shopping-del-btn { opacity: 0; flex-shrink: 0; background: none; border: none; color: var(--muted2); cursor: pointer; font-size: .8rem; padding: .1rem .3rem; border-radius: 4px; transition: all .15s; }
.shopping-item:hover .shopping-del-btn { opacity: 1; }
.shopping-del-btn:hover { color: #ef4444; }

/* ══════════════════════════════════════════════════════════════════════════
   MEET TAB – Admin
   ══════════════════════════════════════════════════════════════════════════ */

/* Header */
.meet-admin-header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1.25rem; }

/* Status badge */
.meet-status-badge { font-size:.75rem; font-weight:600; padding:.3rem .75rem; border-radius:20px; letter-spacing:.03em; }
.meet-status-on  { background:rgba(52,211,153,.15); color:#10b981; border:1px solid rgba(52,211,153,.3); }
.meet-status-off { background:rgba(107,114,128,.1); color:var(--muted2); border:1px solid var(--border); }

/* Toggle switch */
.meet-toggle-wrap { position:relative; display:inline-block; width:42px; height:24px; flex-shrink:0; }
.meet-toggle-wrap input { opacity:0; width:0; height:0; }
.meet-toggle-slider { position:absolute; inset:0; background:var(--bg3); border-radius:24px; cursor:pointer; transition:.25s; border:1px solid var(--border2); }
.meet-toggle-slider::before { content:''; position:absolute; width:18px; height:18px; left:2px; top:2px; border-radius:50%; background:#fff; transition:.25s; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.meet-toggle-wrap input:checked + .meet-toggle-slider { background:#f472b6; border-color:#f472b6; }
.meet-toggle-wrap input:checked + .meet-toggle-slider::before { transform:translateX(18px); }

/* Stats row */
.meet-stats-row { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; margin-bottom:1.25rem; }
@media(min-width:900px) { .meet-stats-row { grid-template-columns:repeat(6,1fr); } }
.meet-stat-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:.75rem 1rem; text-align:center; }
.meet-stat-label { font-size:.7rem; color:var(--muted2); text-transform:uppercase; letter-spacing:.06em; margin-bottom:.25rem; }
.meet-stat-val { font-size:.95rem; font-weight:500; }

/* Two-column form grid */
.meet-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
@media(max-width:680px) { .meet-form-grid { grid-template-columns:1fr; } }
.meet-form-col { display:flex; flex-direction:column; gap:.65rem; }
.meet-section-label { font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--muted2); padding-bottom:.3rem; border-bottom:1px solid var(--border); margin-top:.25rem; }

/* Response card */
.meet-response-card { display:flex; flex-direction:column; gap:.45rem; }
.meet-response-row { display:flex; align-items:center; gap:.6rem; }
.meet-response-label { font-size:.75rem; color:var(--muted2); width:60px; flex-shrink:0; }
.meet-response-val { font-size:.88rem; font-weight:500; }
.meet-response-time { font-size:.72rem; color:var(--muted2); margin-top:.25rem; }
.btn-meet-clear { background:none; border:1px solid var(--border); border-radius:6px; padding:.35rem .75rem; font-size:.78rem; color:var(--muted2); cursor:pointer; margin-top:.5rem; transition:all .15s; }
.btn-meet-clear:hover { border-color:#ef4444; color:#ef4444; }

/* ── Activity Picker ─────────────────────────────────────────────────── */
.meet-activity-picker { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:1rem; display:flex; flex-direction:column; gap:.75rem; }
.meet-activity-hint { font-size:.75rem; color:var(--muted2); line-height:1.4; }

/* Grid of preset buttons */
.meet-activity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
    gap: .45rem;
}
.meet-act-btn {
    display: flex; flex-direction: column; align-items: center; gap: .3rem;
    background: var(--card); border: 2px solid var(--border);
    border-radius: 10px; padding: .55rem .3rem .45rem;
    cursor: pointer; transition: all .15s; text-align:center;
    font-family: 'DM Sans', sans-serif;
}
.meet-act-btn:hover { border-color: var(--border2); background: var(--bg3); }
.meet-act-btn.selected { border-color: #f472b6; background: rgba(244,114,182,.08); }
.meet-act-emoji { font-size: 1.5rem; line-height: 1; }
.meet-act-label { font-size: .64rem; color: var(--muted2); line-height:1.2; font-weight:500; }
.meet-act-btn.selected .meet-act-label { color: #be185d; }

/* Custom row */
.meet-custom-row { display:flex; gap:.5rem; align-items:center; }
.meet-custom-row input { flex:1; }

/* Selected chips */
.meet-activity-selected-label { font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--muted2); }
.meet-activity-selected-row { display:flex; flex-wrap:wrap; gap:.4rem; min-height:28px; }
.meet-act-chip {
    display:inline-flex; align-items:center; gap:.3rem;
    background: rgba(244,114,182,.12); border:1px solid rgba(244,114,182,.35);
    border-radius:20px; padding:.25rem .55rem .25rem .35rem;
    font-size:.75rem; color:#be185d; font-weight:500;
}
[data-theme="light"] .meet-act-chip { color:#9d174d; }
.meet-chip-order { background:#f472b6; color:#fff; border-radius:50%; width:16px; height:16px; font-size:.6rem; display:inline-flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0; }
.meet-chip-del { background:none; border:none; color:rgba(244,114,182,.7); cursor:pointer; font-size:.65rem; padding:0 2px; line-height:1; transition:color .1s; }
.meet-chip-del:hover { color:#be185d; }

/* -- Background theme multi-picker -- */
.meet-bg-picker { display:flex; flex-wrap:wrap; gap:.4rem; }
.meet-bg-opt {
    display:flex; align-items:center; gap:.35rem;
    background:var(--card); border:1.5px solid var(--border);
    border-radius:20px; padding:.3rem .7rem;
    font-size:.8rem; cursor:pointer; transition:all .15s;
    user-select:none;
}
.meet-bg-opt input { display:none; }
.meet-bg-opt:has(input:checked) {
    border-color:#f472b6; background:rgba(244,114,182,.1); color:#be185d; font-weight:500;
}

/* Meet response detail card */
.meet-response-rows { display:flex; flex-direction:column; gap:.5rem; }
.meet-response-row  { display:flex; align-items:center; gap:.75rem; }
.meet-response-label { font-size:.75rem; color:var(--muted2); width:80px; flex-shrink:0; }
.meet-response-val   { font-size:.95rem; font-weight:600; color:var(--text); }
.meet-response-time  { font-size:.72rem; color:var(--muted2); margin-top:.25rem; }
/* ── Kcal & Makro Tracker ───────────────────────────────────────────────── */

/* Goals bar */
.kcal-goals-bar { margin-bottom: 1rem; }
.kcal-goals-toggle { background: var(--card2); border: 1px solid var(--border); color: var(--muted2); border-radius: 8px; padding: .4rem .85rem; font-size: .82rem; cursor: pointer; transition: all .15s; }
.kcal-goals-toggle:hover { border-color: #f97316; color: #f97316; }
.kcal-goals-panel { margin-top: .6rem; background: var(--card2); border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.1rem; }
.kcal-goals-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; }
.kcal-goals-grid label { display: flex; flex-direction: column; gap: .25rem; font-size: .78rem; color: var(--muted2); }
.kcal-goals-grid input { background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: .3rem .5rem; font-size: .88rem; width: 100%; }

/* Rings row */
.kcal-rings-row { display: flex; gap: .8rem; justify-content: space-around; margin-bottom: 1.2rem; flex-wrap: wrap; }
.kcal-ring-wrap { display: flex; flex-direction: column; align-items: center; gap: .35rem; position: relative; }
.kcal-ring { width: 80px; height: 80px; transform: rotate(-90deg); }
.kcal-ring-bg   { fill: none; stroke: var(--border); stroke-width: 7; }
.kcal-ring-fill { fill: none; stroke: #f97316; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 201; stroke-dashoffset: 201; transition: stroke-dashoffset .6s ease, stroke .3s; }
.kcal-ring-prot  { stroke: #818cf8; }
.kcal-ring-carbs { stroke: #f59e0b; }
.kcal-ring-fat   { stroke: #fb923c; }
.kcal-ring-fiber { stroke: #34d399; }
.kcal-ring-over .kcal-ring-fill { stroke: #ef4444; }
.kcal-ring-label { display: flex; flex-direction: column; align-items: center; font-size: .78rem; color: var(--muted2); text-align: center; line-height: 1.2; }
.kcal-ring-label span { font-size: .72rem; font-weight: 600; color: var(--text); }
.kcal-ring-label small { font-size: .65rem; }

/* Entry cards */
.kcal-entry-card { background: var(--card2); border: 1px solid var(--border); border-radius: 12px; padding: .85rem 1rem; margin-bottom: .6rem; }
.kcal-entry-header { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; flex-wrap: wrap; }
.kcal-entry-desc { flex: 1; font-size: .9rem; color: var(--text); min-width: 0; }
.kcal-entry-total { font-size: .95rem; font-weight: 700; color: #f97316; white-space: nowrap; }
.kcal-entry-actions { display: flex; gap: .3rem; }
.kcal-btn-edit, .kcal-btn-del { background: none; border: none; cursor: pointer; font-size: .85rem; padding: .2rem .35rem; border-radius: 6px; transition: background .15s; color: var(--muted2); }
.kcal-btn-edit:hover { background: var(--border); color: var(--text); }
.kcal-btn-del:hover  { background: rgba(239,68,68,.12); color: #ef4444; }

/* Kcal item bars */
.kcal-item { display: flex; align-items: center; gap: .6rem; font-size: .82rem; margin-bottom: .3rem; }
.kcal-item-name { flex: 1; color: var(--muted2); }
.kcal-item-kcal { color: #f97316; font-weight: 600; white-space: nowrap; font-size: .8rem; }
.kcal-item-bar-wrap { width: 55px; height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; flex-shrink: 0; }
.kcal-item-bar { height: 100%; background: #f97316; border-radius: 2px; }

/* Macro bars per entry */
.macro-bars-grid { display: flex; flex-direction: column; gap: .3rem; margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--border); }
.macro-bar-row { display: flex; align-items: center; gap: .5rem; font-size: .78rem; }
.macro-bar-label { width: 80px; flex-shrink: 0; color: var(--muted2); font-size: .75rem; }
.macro-bar-track { flex: 1; height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; }
.macro-bar-fill { height: 100%; border-radius: 3px; transition: width .4s ease; }
.macro-bar-val { width: 36px; text-align: right; color: var(--muted2); font-size: .75rem; flex-shrink: 0; }
.macro-prot  { background: #818cf8; }
.macro-carbs { background: #f59e0b; }
.macro-fat   { background: #fb923c; }
.macro-fiber { background: #34d399; }
.macro-prot-txt  { color: #818cf8; }
.macro-carbs-txt { color: #f59e0b; }
.macro-fat-txt   { color: #fb923c; }
.macro-fiber-txt { color: #34d399; }

/* Edit row */
.kcal-edit-row { margin-top: .6rem; }
.kcal-edit-input { width: 100%; resize: vertical; }
.kcal-edit-btns { display: flex; gap: .5rem; margin-top: .4rem; flex-wrap: wrap; }

/* History */
.kcal-history-section { margin-top: 1.5rem; }
.kcal-history-title { font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted2); margin-bottom: .75rem; }
.kcal-hist-row { display: flex; align-items: center; gap: .6rem; padding: .4rem 0; border-bottom: 1px solid var(--border); font-size: .82rem; flex-wrap: wrap; }
.kcal-hist-date { width: 78px; flex-shrink: 0; color: var(--muted2); font-size: .75rem; }
.kcal-hist-bar-wrap { flex: 1; height: 8px; background: var(--border); border-radius: 4px; overflow: visible; position: relative; min-width: 60px; }
.kcal-hist-bar { height: 100%; background: #f97316; border-radius: 4px; transition: width .4s; }
.kcal-hist-over { background: #ef4444; }
.kcal-hist-goal-line { position: absolute; top: -3px; bottom: -3px; width: 2px; background: rgba(255,255,255,.25); border-radius: 1px; transform: translateX(-50%); }
.kcal-hist-kcal { width: 50px; text-align: right; font-weight: 600; color: #f97316; flex-shrink: 0; font-size: .8rem; }
.kcal-hist-over-txt { color: #ef4444; }
.kcal-hist-macros { display: flex; gap: .3rem; flex-wrap: wrap; }
.macro-pill { font-size: .68rem; font-weight: 600; opacity: .85; }


/* ── Kcal Tracker v2 — neue Farben & Mikro-Styles ──────────────────────── */
.kcal-rings-label { font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted2); margin:.75rem 0 .4rem; }
.kcal-rings-micro .kcal-ring { width:62px; height:62px; }
.kcal-rings-micro .kcal-ring-bg  { stroke-width:6; }
.kcal-rings-micro .kcal-ring-fill { stroke-width:6; stroke-dasharray:157; stroke-dashoffset:157; }
.kcal-rings-micro .kcal-ring-label span { font-size:.65rem; }

/* Makro ring colors */
.kcal-ring-sugar   { stroke:#f43f5e; }
.kcal-ring-sat-fat { stroke:#dc2626; }
/* Mikro ring colors */
.kcal-ring-sodium    { stroke:#64748b; }
.kcal-ring-potassium { stroke:#0ea5e9; }
.kcal-ring-calcium   { stroke:#e2e8f0; }
.kcal-ring-iron      { stroke:#b45309; }
.kcal-ring-magnesium { stroke:#10b981; }
.kcal-ring-vitc      { stroke:#f97316; }
.kcal-ring-vitd      { stroke:#fbbf24; }
.kcal-ring-vitb12    { stroke:#c084fc; }

/* Goals panel */
.kcal-goals-section-label { font-size:.72rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--muted2); margin:.1rem 0 .4rem; }

/* Macro bar extras */
.macro-sugar    { background: #f43f5e; }
.macro-sat-fat  { background: #dc2626; }
.macro-sodium    { background: #64748b; }
.macro-potassium { background: #0ea5e9; }
.macro-calcium   { background: #e2e8f0; }
.macro-iron      { background: #b45309; }
.macro-magnesium { background: #10b981; }
.macro-vitc      { background: #f97316; }
.macro-vitd      { background: #fbbf24; }
.macro-vitb12    { background: #c084fc; }
.macro-sugar-txt    { color: #f43f5e; }
.macro-sat-fat-txt  { color: #dc2626; }
.macro-sodium-txt    { color: #64748b; }
.macro-potassium-txt { color: #0ea5e9; }
.macro-calcium-txt   { color: #cbd5e1; }
.macro-iron-txt      { color: #b45309; }
.macro-magnesium-txt { color: #10b981; }
.macro-vitc-txt      { color: #f97316; }
.macro-vitd-txt      { color: #fbbf24; }
.macro-vitb12-txt    { color: #c084fc; }

/* Micro details */
.kcal-micro-details { margin-top:.6rem; }
.kcal-micro-details summary { font-size:.8rem; color:var(--muted2); cursor:pointer; padding:.3rem 0; user-select:none; }
.kcal-micro-details summary:hover { color:var(--text); }
.micro-grid { margin-top:.4rem; }

/* Indented sub-macros */
.macro-bar-label[class*="macro-sugar"],
.macro-bar-label[class*="macro-sat-fat"] { padding-left:.5rem; }

.kcal-note { margin-top:.5rem; font-size:.78rem; color:var(--muted2); font-style:italic; }

/* ── Kcal Entry Time ──────────────────────────────────────────────────────── */
.kcal-entry-time {
    font-size: .75rem;
    color: var(--muted2);
    cursor: pointer;
    padding: .15rem .35rem;
    border-radius: 5px;
    white-space: nowrap;
    transition: background .15s, color .15s;
}
.kcal-entry-time:hover { background: var(--border); color: var(--text); }

.kcal-time-edit {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .5rem;
}
.kcal-time-input {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 7px;
    padding: .25rem .5rem;
    font-size: .85rem;
    width: 110px;
}
.kcal-time-input:focus { border-color: #f97316; outline: none; }
.kcal-btn-time-save, .kcal-btn-time-cancel {
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    font-size: .8rem;
    padding: .2rem .45rem;
    transition: all .15s;
    color: var(--muted2);
}
.kcal-btn-time-save:hover  { background: rgba(249,115,22,.15); border-color: #f97316; color: #f97316; }
.kcal-btn-time-cancel:hover { background: rgba(239,68,68,.1); border-color: #ef4444; color: #ef4444; }

/* ── Barcode Scanner ─────────────────────────────────────────────────────── */
.kcal-input-tabs { display: flex; gap: .4rem; margin-bottom: .75rem; }
.kcal-input-tab {
    background: var(--card2);
    border: 1px solid var(--border);
    color: var(--muted2);
    border-radius: 8px;
    padding: .35rem .85rem;
    font-size: .82rem;
    cursor: pointer;
    transition: all .15s;
}
.kcal-input-tab.active,
.kcal-input-tab:hover { border-color: #f97316; color: #f97316; background: rgba(249,115,22,.08); }

.kcal-scanner-wrap {
    position: relative;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    aspect-ratio: 4/3;
}
#kcal-scanner-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.kcal-scanner-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.kcal-scanner-frame {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -55%);
    width: 70%; height: 35%;
    border: 2px solid rgba(249,115,22,.8);
    border-radius: 8px;
    box-shadow: 0 0 0 2000px rgba(0,0,0,.35);
}
.kcal-scanner-line {
    position: absolute;
    top: 50%; left: 15%;
    width: 70%; height: 2px;
    background: linear-gradient(90deg, transparent, #f97316, transparent);
    animation: kcal-scan-line 1.8s ease-in-out infinite;
    transform: translateY(-55%);
}
@keyframes kcal-scan-line {
    0%,100% { transform: translateY(calc(-55% - 30px)); opacity:.4; }
    50%      { transform: translateY(calc(-55% + 30px)); opacity:1; }
}
.kcal-scanner-hint {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    text-align: center;
    font-size: .78rem;
    color: #fff;
    background: rgba(0,0,0,.55);
    padding: .4rem;
    margin: 0;
}

/* Product preview */
.kcal-product-card {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: .75rem;
    margin-top: .75rem;
}
.kcal-product-img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: 6px;
    flex-shrink: 0;
    background: #fff;
}
.kcal-product-info { flex: 1; min-width: 0; }
.kcal-product-name  { font-weight: 600; font-size: .9rem; color: var(--text); margin: 0 0 .15rem; }
.kcal-product-brand { font-size: .78rem; color: var(--muted2); margin: 0 0 .5rem; }
.kcal-portion-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .82rem;
    color: var(--muted2);
    flex-wrap: wrap;
}
.kcal-portion-row input {
    width: 70px;
    background: var(--card2);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 6px;
    padding: .25rem .4rem;
    font-size: .85rem;
}
.kcal-portion-ref { font-size: .72rem; color: var(--muted2); }