/**
 * wunderly – UI Components
 * Based on wunderly. Design Guide v2.0
 */

/* ── Buttons ─────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 13px 24px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn:active:not(:disabled) {
    transform: scale(0.97);
}

.btn--primary {
    background: var(--color-coral);
    color: white;
    box-shadow: 0 4px 16px rgba(255,107,64,0.25);
}

.btn--primary:hover:not(:disabled) {
    background: var(--color-coral-dark);
    transform: translateY(-2px);
}

.btn--danger {
    background: var(--color-error);
    color: white;
}

.btn--danger:hover:not(:disabled) {
    background: #c9472a;
}

.btn--ghost {
    background: transparent;
    border: 1.5px solid var(--border);
    color: var(--text-primary);
}

.btn--ghost:hover:not(:disabled) {
    border-color: var(--color-coral);
    color: var(--color-coral);
}

.btn--outline {
    background: transparent;
    border: 1.5px solid var(--border);
    color: var(--text-primary);
}

.btn--outline:hover:not(:disabled) {
    border-color: var(--color-coral);
    color: var(--color-coral);
}

.btn--sm {
    padding: 8px 14px;
    font-size: 13px;
}

.btn--lg {
    padding: 16px 28px;
    font-size: 15px;
}

.btn--block {
    width: 100%;
}

.btn--icon {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-secondary);
    font-size: 16px;
}

.btn--icon:hover:not(:disabled) {
    border-color: var(--border-hover);
    background: var(--bg-elevated);
}

/* ── Form Elements ───────────────────────────────── */
.form-group {
    margin-bottom: var(--space-lg);
}

.form-label {
    display: block;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
    margin-bottom: var(--space-xs);
}

.form-input {
    display: block;
    width: 100%;
    padding: 12px 16px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    background: var(--bg-input);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    outline: none;
    transition: border-color var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
}

.form-input:focus {
    border-color: var(--color-coral);
    box-shadow: 0 0 0 3px rgba(255,107,64,0.12);
}

.form-input::placeholder {
    color: var(--text-muted);
}

.form-input--error {
    border-color: var(--color-error);
}

.form-error {
    font-size: 11px;
    color: var(--color-error);
    margin-top: var(--space-xs);
}

.form-hint {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: var(--space-xs);
}

select.form-input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B6560' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

/* ── Cards ───────────────────────────────────────── */
.card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin: 0 20px;
    transition: border-color var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
}

.card--interactive {
    cursor: pointer;
}

.card--interactive:hover {
    border-color: var(--border-hover);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.card--interactive:active {
    transform: scale(0.98);
}

/* ── List Cards (Einkaufslisten) ─────────────────── */
.list-card {
    margin: 0 16px 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--dur-normal) var(--ease), color var(--dur-normal) var(--ease), border-color var(--dur-normal) var(--ease), box-shadow var(--dur-normal) var(--ease), transform var(--dur-normal) var(--ease), opacity var(--dur-normal) var(--ease);
    animation: fadeUp 0.3s var(--ease) both;
    box-shadow: var(--card-shadow);
    text-decoration: none;
    color: inherit;
    display: block;
}

.list-card:hover {
    border-color: var(--border-hover);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.list-card:active {
    transform: scale(0.98);
}

/* Accent stripe */
/* Starred / Hauptliste hervorheben */
.list-card--starred {
    border-color: rgba(255, 107, 64, 0.3);
    background: var(--starred-card-bg, rgba(255, 107, 64, 0.04));
}
.list-card--starred:hover {
    border-color: var(--color-coral);
}

.list-card-inner {
    padding: 16px 16px 14px 20px;
}

.list-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.list-card-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 6px;
}

.list-card-name .star {
    font-size: 13px;
}

.list-card-badge {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    color: var(--text-secondary);
    background: var(--bg-surface);
    padding: 3px 8px;
    border-radius: var(--radius-full);
}

.list-card-progress {
    height: 3px;
    background: var(--bg-hover);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: 10px;
}

.list-card-progress-fill {
    height: 100%;
    border-radius: var(--radius-full);
    background: var(--color-success);
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.list-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.list-card-meta {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
}

.list-card-meta strong {
    color: var(--text-secondary);
    font-weight: 600;
}

.list-card-shared {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: 600;
    background: rgba(167, 139, 250, 0.08);
    color: var(--color-shared);
}

.list-card-private {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: 600;
    background: rgba(120, 113, 108, 0.08);
    color: var(--text-mid);
}

.list-card-arrow {
    color: var(--text-muted);
    font-size: 14px;
    margin-left: auto;
    padding-left: 8px;
}

/* Shared pill (Homescreen starred-meta-row) */
.shared-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: rgba(167, 139, 250, 0.1);
    color: var(--color-shared);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    border-radius: var(--radius-full);
}

/* List section headers */
.list-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 24px 10px;
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    font-weight: 700;
}

.list-section-count {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
}

.shared-section-divider {
    height: 1px;
    background: var(--border);
    margin: 8px 24px 0;
}

/* ── Tile Grid (List Detail Items) ───────────────── */
.tile-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 0 12px;
}

.tile-category {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: var(--space-md) 0 var(--space-xs);
}

.tile-category:first-child {
    padding-top: var(--space-sm);
}

.tile {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 10px 8px 10px;
    text-align: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    position: relative;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
    animation: tileIn 0.35s var(--ease) both;
    box-shadow: var(--tile-shadow);
}

.tile:hover {
    border-color: var(--border-hover);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.tile:active {
    transform: scale(0.95);
}

.tile__icon-wrap {
    width: 56px;
    height: 56px;
    margin: 0 auto 6px;
    background: var(--bg-surface);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    position: relative;
}

/* Produkt-Bild als Icon-Fallback (wenn kein Emoji) */
.item-icon-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.tile__qty {
    position: absolute;
    top: -5px;
    right: -8px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    color: white;
    background: var(--color-coral);
    padding: 2px 7px;
    border-radius: var(--radius-full);
    box-shadow: 0 2px 6px rgba(255,107,64,0.3);
}

.tile__name {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.tile__meta {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
}

.tile__meta .by-self {
    color: var(--color-coral);
    font-weight: 600;
}

.tile__meta .by-other {
    color: var(--color-shared);
    font-weight: 600;
}

/* Tile check-off animation (phase 1: visual feedback) */
.tile--checking {
    pointer-events: none;
    animation: tileCheckPulse 0.45s var(--ease) forwards;
}
.tile--checking .tile__icon-wrap::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: white;
    background: var(--color-success);
    border-radius: var(--radius-md);
    animation: checkOverlay 0.35s var(--ease);
}
@keyframes tileCheckPulse {
    0%   { transform: scale(1); opacity: 1; }
    40%  { transform: scale(1.06); opacity: 1; }
    100% { transform: scale(0.92); opacity: 0.3; }
}
@keyframes checkOverlay {
    0%   { transform: scale(0); opacity: 0; }
    50%  { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* Tile collapse (phase 2: smooth removal from grid) */
.tile--collapsing {
    pointer-events: none;
    overflow: hidden;
    transition: max-height 0.3s var(--ease),
                padding 0.3s var(--ease),
                margin 0.3s var(--ease),
                opacity 0.2s var(--ease),
                border-width 0.3s var(--ease);
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    border-width: 0 !important;
}

/* Tile uncheck animation */
.tile--unchecking {
    pointer-events: none;
    animation: tileUncheck 0.35s var(--ease) forwards;
}
@keyframes tileUncheck {
    0%   { transform: scale(1); opacity: 1; }
    50%  { transform: scale(1.04); opacity: 0.5; }
    100% { transform: scale(0.9); opacity: 0; }
}

/* Checked tile */
.tile--checked {
    background: var(--check-bg);
    border-color: var(--check-border);
}

.tile--checked .tile__icon-wrap {
    filter: grayscale(0.5);
    opacity: 0.6;
    transform: scale(0.9);
}

.tile--checked .tile__qty {
    background: var(--color-success);
    box-shadow: 0 2px 6px rgba(88,204,108,0.3);
}

.tile--checked .tile__name {
    text-decoration: line-through;
    color: var(--text-muted);
}

/* Done divider */
.done-divider {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    cursor: pointer;
    padding: var(--space-lg) 0 var(--space-sm);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.done-divider::before,
.done-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.done-divider__label {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--color-success);
    white-space: nowrap;
}

/* ── List View (Listenansicht als Alternative zu Tile-Grid) ── */
.list-view {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 12px;
}

/* Kategorie-Header in Listenansicht: volle Breite */
.list-view .tile-category {
    grid-column: unset;
}

.list-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    position: relative;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
    animation: rowIn 0.3s var(--ease) both;
    box-shadow: var(--tile-shadow);
}

@keyframes rowIn {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}

.list-row:active {
    transform: scale(0.98);
}

/* Icon */
.list-row__icon {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    background: var(--bg-surface);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    position: relative;
}

/* Qty-Badge auf dem Icon */
.list-row__qty {
    position: absolute;
    top: -4px;
    right: -6px;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    color: white;
    background: var(--color-coral);
    padding: 1px 5px;
    border-radius: var(--radius-full);
    box-shadow: 0 1px 4px rgba(255,107,64,0.3);
}

/* Info (Mitte) */
.list-row__info {
    flex: 1;
    min-width: 0;
}

.list-row__name {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}

.list-row__new-tag {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--color-coral);
    background: rgba(255, 107, 64, 0.1);
    padding: 2px 6px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
    animation: newPulse 2s ease-in-out infinite;
}

.list-row__meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.list-row__meta .by-self {
    color: var(--color-coral);
    font-weight: 600;
}

.list-row__meta .by-other {
    color: var(--color-shared);
    font-weight: 600;
}

/* Username (rechts neben Checkbox) */
.list-row__user {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    max-width: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.list-row__user.by-self {
    color: var(--color-coral);
}

.list-row__user.by-other {
    color: var(--color-shared);
}

/* Check-Button (rechts) – visuell 28px, Touch-Target 44px via ::after */
.list-row__check {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid var(--border-hover);
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: transparent;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
    position: relative;
}
.list-row__check::after {
    content: '';
    position: absolute;
    inset: -8px;
}

.list-row__check:active {
    transform: scale(0.9);
}

.list-row__check--done {
    background: var(--color-success);
    border-color: var(--color-success);
    color: white;
    font-size: 16px;
    font-weight: 700;
}

/* Checked row */
.list-row--checked {
    background: var(--check-bg);
    border-color: var(--check-border);
}

.list-row--checked .list-row__icon {
    filter: grayscale(0.5);
    opacity: 0.6;
}

.list-row--checked .list-row__qty {
    background: var(--color-success);
    box-shadow: 0 1px 4px rgba(88,204,108,0.3);
}

.list-row--checked .list-row__name {
    text-decoration: line-through;
    color: var(--text-muted);
}

/* NEW-Badge auf Row */
.list-row.is-new {
    border-color: rgba(255, 107, 64, 0.3);
    background: var(--new-badge-bg);
}

/* Row check animation (phase 1) */
.list-row--checking {
    pointer-events: none;
    animation: rowCheckPulse 0.45s var(--ease) forwards;
}
.list-row--checking .list-row__check {
    background: var(--color-success);
    border-color: var(--color-success);
    color: white;
    animation: checkOverlay 0.35s var(--ease);
}
.list-row--checking .list-row__check::after {
    content: '✓';
}
@keyframes rowCheckPulse {
    0%   { transform: scale(1); opacity: 1; }
    40%  { transform: scale(1.02); opacity: 1; }
    100% { transform: scale(0.97); opacity: 0.3; }
}

/* Row collapse (phase 2) */
.list-row--collapsing {
    pointer-events: none;
    overflow: hidden;
    transition: max-height 0.3s var(--ease),
                padding 0.3s var(--ease),
                margin 0.3s var(--ease),
                opacity 0.2s var(--ease),
                border-width 0.3s var(--ease);
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    border-width: 0 !important;
}

/* Row uncheck animation */
.list-row--unchecking {
    pointer-events: none;
    animation: rowUncheck 0.35s var(--ease) forwards;
}
@keyframes rowUncheck {
    0%   { transform: scale(1); opacity: 1; }
    50%  { transform: scale(1.02); opacity: 0.5; }
    100% { transform: scale(0.97); opacity: 0; }
}

/* Done-readd cursor */
.list-row--done-readd {
    cursor: pointer;
}

/* Done-grids in list-mode (gleich wie .list-view) */
.done-since-grid.list-mode,
.done-old-grid.list-mode {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 12px;
}
.done-since-section.collapsed .done-since-grid.list-mode,
.done-old-section.collapsed .done-old-grid.list-mode {
    display: none;
}

/* ── Add Item Bar ────────────────────────────────── */
.add-bar {
    position: fixed;
    /* Bottom-Nav: ~56px items + safe-area padding */
    bottom: calc(56px + env(safe-area-inset-bottom, 16px));
    left: 0;
    right: 0;
    max-width: var(--max-width);
    margin: 0 auto;
    z-index: 20;
    transition: bottom 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Wenn Nav versteckt (Keyboard aktiv): Bar ganz runter, kein Safe-Area-Abstand nötig */
.add-bar.nav-hidden {
    bottom: 0;
}

.add-bar__inner {
    padding: 8px 10px;
    background: var(--nav-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
}

/* Input-Wrapper mit Clear-Button */
.add-bar__input-wrap {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.add-bar__input {
    flex: 1;
    width: 100%;
    padding: 10px 18px;
    padding-right: 38px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--bg-input);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
    outline: none;
    transition: border-color var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
}

.add-bar__input {
    -webkit-appearance: none;  /* iOS: Standard-Search-Styling entfernen */
    appearance: none;
}

.add-bar__input:focus {
    border-color: var(--color-coral);
    box-shadow: 0 0 0 3px rgba(255, 107, 64, 0.12);
}

/* iOS: Standardmäßiges Safari-Clear-Icon bei type="search" ausblenden */
.add-bar__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    display: none;
}

.add-bar__input::placeholder {
    color: var(--text-muted);
}

/* Clear-Button im Input */
.add-bar__clear {
    position: absolute;
    right: 8px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: var(--bg-hover);
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.add-bar__clear:hover {
    background: var(--bg-elevated);
    color: var(--text-secondary);
}
.add-bar__clear:active {
    transform: scale(0.9);
}
.add-bar__input-wrap.has-value .add-bar__clear {
    display: flex;
}

/* Trigger-Variante: sieht aus wie Input, navigiert bei Tap zur Add-Page */
.add-bar__input--trigger {
    cursor: pointer;
    color: var(--text-muted);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.add-bar__input--trigger:active {
    background: var(--bg-hover);
    transform: scale(0.98);
}

/* Unsichtbares Proxy-Input: haelt iOS-Keyboard offen waehrend der Navigation */
.keyboard-proxy {
    position: fixed;
    left: -9999px;
    top: 50%;
    width: 1px;
    height: 1px;
    border: none;
    padding: 0;
    opacity: 0.01;
    font-size: 16px; /* Verhindert iOS-Zoom */
    z-index: -1;
}

/* ── Badges / Pills ──────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    border-radius: var(--radius-full);
}

.badge--pending {
    background: rgba(255,170,64,0.1);
    color: var(--color-warning);
}

.badge--accepted, .badge--active {
    background: rgba(88,204,108,0.1);
    color: var(--color-success);
}

.badge--rejected {
    background: rgba(232,90,48,0.1);
    color: var(--color-error);
}

.badge--owner {
    background: rgba(255,107,64,0.1);
    color: var(--color-coral);
}

/* ── Avatars ─────────────────────────────────────── */
.avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 14px;
    color: white;
    flex-shrink: 0;
}

.avatar--you {
    background: var(--avatar-you-bg);
}

.avatar--partner {
    background: var(--avatar-partner-bg);
}

.avatar--sm {
    width: 26px;
    height: 26px;
    font-size: 10px;
}

.avatar--header {
    width: 34px;
    height: 34px;
    font-size: 13px;
}

/* ── Modal / Dialog ──────────────────────────────── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 40;
    padding: var(--space-lg);
    animation: fade-in 0.2s var(--ease);
}

.modal {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 400px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    animation: slide-up 0.25s var(--ease);
    margin-bottom: env(safe-area-inset-bottom, 0);
}

/* Top-positioned modal (avoids keyboard on mobile) */
.modal-overlay--top {
    align-items: flex-start;
    padding-top: calc(env(safe-area-inset-top, 20px) + 72px);
}
.modal-overlay--top .modal {
    animation: slide-down 0.25s var(--ease);
    margin-bottom: 0;
    overflow: visible;
}

.modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-lg) var(--space-xl);
    border-bottom: 1px solid var(--border);
}

.modal__title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.modal__close {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--text-muted);
    cursor: pointer;
    padding: var(--space-xs);
}

.modal__body {
    padding: var(--space-xl);
}

.modal__footer {
    display: flex;
    gap: var(--space-md);
    justify-content: flex-end;
    padding: var(--space-lg) var(--space-xl);
    border-top: 1px solid var(--border);
}

@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes slide-up {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes slide-down {
    from { opacity: 0; transform: translateY(-30px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Invite Cards ────────────────────────────────── */
.invite-card {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    border-bottom: 1px solid var(--border);
}

.invite-card:last-child {
    border-bottom: none;
}

.invite-card__info {
    flex: 1;
    min-width: 0;
}

.invite-card__name {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.invite-card__detail {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.invite-card__actions {
    display: flex;
    gap: var(--space-sm);
}

/* ── FAB (Floating Action Button) ────────────────── */
.fab {
    position: fixed;
    bottom: calc(72px + env(safe-area-inset-bottom, 16px));
    right: 20px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--color-coral);
    color: white;
    border: none;
    font-size: 26px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(255, 107, 64, 0.35), var(--shadow-md);
    z-index: 20;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}

.fab:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 28px rgba(255, 107, 64, 0.4);
}

.fab:active {
    transform: scale(0.95);
}

/* ── Inline Create List Bar ────────────────────────── */
.create-list-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: var(--space-lg) 16px var(--space-md);
    padding: 8px;
    background: var(--bg-surface);
    border: 1.5px dashed var(--border-hover);
    border-radius: var(--radius-lg);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.create-list-bar:hover {
    border-color: var(--color-coral);
    background: var(--suggest-highlight);
}
.create-list-bar:active {
    transform: scale(0.98);
}
.create-list-bar__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: rgba(255, 107, 64, 0.1);
    color: var(--color-coral);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.create-list-bar__text {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-coral);
}

/* Inline create input mode */
.create-list-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: var(--space-lg) 16px var(--space-md);
    padding: 8px 8px 8px 8px;
    background: var(--bg-surface);
    border: 1.5px solid var(--color-coral);
    border-radius: var(--radius-lg);
    box-shadow: 0 0 0 3px rgba(255, 107, 64, 0.12);
    animation: fadeUp 0.2s var(--ease);
}

/* ── Emoji Picker (Create List) ───────────────────── */
.emoji-picker-wrap {
    position: relative;
    flex-shrink: 0;
}

.create-list-inline__emoji {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    border: 1.5px solid var(--border);
    background: var(--bg-elevated);
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.create-list-inline__emoji:hover {
    border-color: var(--color-coral);
    background: var(--suggest-highlight);
}
.create-list-inline__emoji:active {
    transform: scale(0.93);
}

.emoji-picker {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    display: none;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    padding: 8px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 50;
    min-width: 180px;
    animation: emojiPickerIn 0.15s var(--ease);
}
.emoji-picker.visible {
    display: grid;
}

.emoji-picker__item {
    width: 40px;
    height: 40px;
    border: none;
    background: none;
    border-radius: var(--radius-md);
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.emoji-picker__item:hover {
    background: var(--suggest-highlight);
    transform: scale(1.15);
}
.emoji-picker__item:active {
    transform: scale(0.9);
}

@keyframes emojiPickerIn {
    from { opacity: 0; transform: translateY(6px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Rename-Row (Emoji + Name inside modal) */
.rename-row {
    display: flex;
    align-items: flex-end;
    gap: var(--space-md);
}

/* In modals: picker opens downward to avoid clipping */
.modal .emoji-picker {
    bottom: auto;
    top: calc(100% + 8px);
}

/* List-Card Emoji */
.list-card-emoji {
    font-size: 16px;
    flex-shrink: 0;
}
.create-list-inline__input {
    flex: 1;
    border: none;
    background: transparent;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    outline: none;
}
.create-list-inline__input::placeholder {
    color: var(--text-muted);
}
.create-list-inline__btn {
    padding: 8px 16px;
    border-radius: var(--radius-md);
    border: none;
    background: var(--color-coral);
    color: white;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.create-list-inline__btn:hover {
    background: var(--color-coral-dark);
}
.create-list-inline__btn:active {
    transform: scale(0.95);
}
.create-list-inline__btn:disabled {
    opacity: 0.5;
    pointer-events: none;
}
.create-list-inline__cancel {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    flex-shrink: 0;
}
.create-list-inline__cancel:hover {
    border-color: var(--color-error);
    color: var(--color-error);
}

/* ── Stats Grid (Admin) ──────────────────────────── */
.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 0 20px var(--space-xl);
}

.stat-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    text-align: center;
}

.stat-card__value {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    color: var(--color-coral);
}

.stat-card__label {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

.stats-grid--3 {
    grid-template-columns: 1fr 1fr 1fr;
}

/* ── Admin Tabs ────────────────────────────────────── */
.admin-tabs {
    display: flex;
    gap: 0;
    margin: 0 20px var(--space-md);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 3px;
}

.admin-tab {
    flex: 1;
    padding: 10px 8px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease);
}

.admin-tab--active {
    background: var(--color-coral);
    color: white;
}

.admin-tab-content {
    padding-top: var(--space-md);
}

/* ── Admin Table ────────────────────────────────────── */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 var(--space-xl);
    padding: 0 20px;
    font-size: 13px;
}

.admin-table thead th {
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 8px 20px;
    border-bottom: 1px solid var(--border);
}

.admin-table tbody td {
    padding: 10px 20px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-light, var(--border));
}

.admin-table__email {
    font-family: var(--font-mono, monospace);
    font-size: 12px;
    color: var(--text-secondary);
}

.admin-table__meta {
    color: var(--text-muted);
    font-size: 12px;
    white-space: nowrap;
}

.admin-table__icon {
    width: 32px;
    font-size: 18px;
    text-align: center;
}

.admin-section {
    margin-bottom: var(--space-lg);
}

.admin-section__title {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    padding: 0 20px;
    margin: 0 0 var(--space-sm);
}

/* ── Admin User List (compact card rows) ──────────── */
.admin-user-list {
    padding: 0 20px;
}

.admin-user-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-light, var(--border));
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.admin-user-row__emoji {
    font-size: 18px;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}

.admin-user-row__info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.admin-user-row__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-user-row__email {
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    color: var(--text-muted);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s var(--ease), margin 0.2s var(--ease);
    margin-top: 0;
}

.admin-user-row--expanded .admin-user-row__email {
    max-height: 20px;
    margin-top: 2px;
}

.admin-user-row__stats {
    display: flex;
    gap: 8px;
    font-size: 12px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.admin-user-row__time {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 50px;
    text-align: right;
    font-weight: 600;
}

.activity--green { color: #22c55e; }
.activity--orange { color: #f59e0b; }
.activity--red { color: #ef4444; }
.activity--inactive { color: var(--text-muted); }

.admin-legend-wrap {
    padding: 0 20px;
    margin-top: var(--space-sm);
}

.admin-legend__label {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.admin-legend {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: var(--text-secondary);
}

/* ── Homescreen Header ──────────────────────────────── */
.header-greeting {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.header-greeting .dot {
    color: var(--color-coral);
}

.header-sub {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    margin-top: 3px;
}

/* ── Section Divider ──────────────────────────────── */
.section-divider {
    height: 1px;
    background: var(--border);
    margin: 14px 0 0;
}

/* ── Invitation Feed ────────────────────────────────── */
.feed {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: 0 20px;
    margin-bottom: var(--space-xl);
}

.invite-notification {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    animation: feedIn 0.35s var(--ease) both;
    transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}

.invite-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(167, 139, 250, 0.1);
    color: var(--color-shared);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.invite-body {
    flex: 1;
    min-width: 0;
}

.invite-text {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.4;
}

.invite-text strong {
    font-weight: 700;
}

.invite-time {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.invite-actions {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.inv-btn {
    padding: 6px 14px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}

.inv-btn:active {
    transform: scale(0.95);
}

.inv-accept {
    background: var(--color-coral);
    color: white;
}

.inv-accept:hover {
    background: var(--color-coral-dark);
}

.inv-decline {
    background: var(--bg-hover);
    color: var(--text-secondary);
}

.inv-decline:hover {
    background: var(--bg-input);
}

.invite-notification.accepted {
    opacity: 0.65;
}

.invite-accepted-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-success);
    margin-top: var(--space-sm);
}

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

/* ── Starred Section ────────────────────────────────── */
.starred-section {
    padding-top: var(--space-sm);
}

/* ── List Header (Home + Detail) ─────── */
.list-header {
    padding: 0 20px;
}

.list-header__title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.list-header__title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.list-header__title-emoji {
    font-size: 22px;
    flex-shrink: 0;
}

.list-header__title-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.list-header__link {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-coral);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.list-header__progress {
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
    margin: 10px 0 6px;
}

.list-header__progress-fill {
    height: 100%;
    background: #4AADA1;
    border-radius: 2px;
    transition: width var(--dur-normal) var(--ease);
}

.list-header__meta {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 14px;
    padding: 0 8px;
}

.section-action {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--color-coral);
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

.section-action:hover {
    text-decoration: underline;
}

/* ── Tile "NEW" Badge ───────────────────────────────── */
.tile.is-new {
    border-color: rgba(255, 107, 64, 0.3);
    background: var(--new-badge-bg);
    overflow: visible;
}

.tile.is-new::before {
    content: 'NEU';
    position: absolute;
    top: -8px;
    right: -4px;
    font-family: var(--font-mono);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #fff;
    background: var(--color-coral);
    padding: 2px 6px;
    border-radius: var(--radius-full);
    z-index: 2;
    box-shadow: 0 2px 6px rgba(255, 107, 64, 0.35);
    animation: newPulse 2s ease-in-out infinite;
}

@keyframes newPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.tile.is-new .tile__icon-wrap {
    box-shadow: 0 0 0 2px rgba(255, 107, 64, 0.15);
}

/* ── Done-Since Section ─────────────────────────────── */
.done-since-section {
    margin-top: var(--space-xl);
}

.done-since-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    padding: 0 0 var(--space-md);
}

.done-since-line {
    flex: 1;
    height: 1px;
    background: var(--check-border);
}

.done-since-label {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--color-success);
    white-space: nowrap;
}

.done-since-count {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    color: var(--color-success);
    background: rgba(88, 204, 108, 0.1);
    padding: 2px 7px;
    border-radius: var(--radius-full);
}

.done-since-arrow {
    font-size: 10px;
    color: var(--color-success);
    transition: transform var(--dur-fast) var(--ease);
}

/* D1: Done-Since als Tile-Grid (3 Spalten, wie offene Items) */
.done-since-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 0 12px;
    transition: background-color var(--dur-normal) var(--ease), color var(--dur-normal) var(--ease), border-color var(--dur-normal) var(--ease), box-shadow var(--dur-normal) var(--ease), transform var(--dur-normal) var(--ease), opacity var(--dur-normal) var(--ease);
}

.done-since-section.collapsed .done-since-grid {
    display: none;
}

.done-since-section.collapsed .done-since-arrow {
    transform: rotate(-90deg);
}

/* ── Done Tile (compact, clickable to re-add) ─────────── */
.done-tile {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--done-since-bg);
    border: 1px solid var(--check-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.done-tile:active {
    transform: scale(0.97);
    opacity: 0.7;
}
.done-tile--readding {
    animation: doneTileReadd 0.35s var(--ease) forwards;
    pointer-events: none;
}
@keyframes doneTileReadd {
    0%   { transform: scale(1); opacity: 1; }
    50%  { transform: scale(1.02); opacity: 0.5; }
    100% { transform: translateX(30px); opacity: 0; }
}

.done-tile-emoji {
    font-size: 20px;
    flex-shrink: 0;
}

.done-tile-info {
    flex: 1;
    min-width: 0;
}

.done-tile-name {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: line-through;
}

.done-tile-by {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 1px;
}

/* ── Done-Old Section ───────────────────────────────── */
.done-old-section {
    margin-top: var(--space-lg);
}

.done-old-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    padding: 0 0 var(--space-md);
}

.done-old-line {
    flex: 1;
    height: 1px;
    background: var(--border);
}

.done-old-label {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    white-space: nowrap;
}

.done-old-arrow {
    font-size: 10px;
    color: var(--text-muted);
    transition: transform var(--dur-fast) var(--ease);
}

/* D1: Done-Old als Tile-Grid (3 Spalten) */
.done-old-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 0 12px;
    transition: background-color var(--dur-normal) var(--ease), color var(--dur-normal) var(--ease), border-color var(--dur-normal) var(--ease), box-shadow var(--dur-normal) var(--ease), transform var(--dur-normal) var(--ease), opacity var(--dur-normal) var(--ease);
}

.done-old-section.collapsed .done-old-grid {
    display: none;
}

.done-old-section.collapsed .done-old-arrow {
    transform: rotate(-90deg);
}

/* ── Onboarding Card ──────────────────────────────── */
.onboarding-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
}

.onboarding-card {
    background: var(--bg-surface);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl) var(--space-xl);
    width: 100%;
    box-shadow: var(--shadow-md);
    animation: fadeUp 0.5s var(--ease) both;
}

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

.onboarding-icon {
    font-size: 40px;
    text-align: center;
    margin-bottom: var(--space-md);
}

.onboarding-title {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
    margin-bottom: var(--space-xs);
}

.onboarding-sub {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: var(--space-xl);
    line-height: 1.5;
}

.onboarding-steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.onboarding-step {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    animation: fadeUp 0.5s var(--ease) both;
}

.onboarding-step-num {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.onboarding-step-text {
    padding-top: 2px;
}

.onboarding-step-text strong {
    display: block;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.onboarding-step-text span {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

.onboarding-cta {
    width: 100%;
    padding: 16px;
    background: var(--color-coral);
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.1px;
    transition: transform var(--dur-fast), background var(--dur-fast);
}

.onboarding-cta:active {
    transform: scale(0.97);
    background: var(--color-coral-dark);
}
/* ── Empty Onboard (List Detail – Owner) ──────────── */

@keyframes celebPop {
    0%   { transform: scale(0) rotate(-20deg); }
    60%  { transform: scale(1.15) rotate(5deg); }
    100% { transform: scale(1) rotate(0); }
}
@keyframes slideUp {
    0%   { opacity: 0; transform: translateY(16px); }
    100% { opacity: 1; transform: translateY(0); }
}

.empty-onboard {
    padding: 8px 24px 30px;
}

/* Celebration Header */
.empty-onboard__celeb {
    text-align: center;
    margin-bottom: 20px;
}
.empty-onboard__icon {
    font-size: 42px;
    margin-bottom: 4px;
    display: block;
    animation: celebPop .6s cubic-bezier(.175, .885, .32, 1.275) both;
}
.empty-onboard__title {
    font-family: var(--font-serif);
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.empty-onboard__sub {
    font-size: 14px;
    color: var(--text-mid);
}

/* Quick-Share Card */
.empty-onboard__card {
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    margin-bottom: 10px;
    animation: slideUp .5s .35s ease both;
}
.empty-onboard__card-title {
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.empty-onboard__card-desc {
    font-size: 13px;
    color: var(--text-mid);
    text-align: center;
    margin-bottom: 16px;
}

/* Share Options */
.empty-onboard__options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.empty-onboard__action {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    border: none;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .04);
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    width: 100%;
    transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast), opacity var(--dur-fast);
}
.empty-onboard__action:active {
    transform: scale(.98);
    background: var(--bg-hover);
}
.empty-onboard__action--loading {
    opacity: 0.5;
    pointer-events: none;
}
.empty-onboard__action-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.empty-onboard__action--wa .empty-onboard__action-icon   { background: #E8F5E9; }
.empty-onboard__action--link .empty-onboard__action-icon { background: #FFF0E8; }
.empty-onboard__action--qr .empty-onboard__action-icon   { background: #F3E5F5; }
.empty-onboard__action-text {
    flex: 1;
    min-width: 0;
}
.empty-onboard__action-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1px;
}
.empty-onboard__action-desc {
    font-size: 12px;
    color: var(--text-mid);
}
.empty-onboard__action-chevron {
    color: var(--text-light-alt);
    font-size: 16px;
    font-weight: 700;
    flex-shrink: 0;
}

/* Privacy Note */
.empty-onboard__note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    background: var(--bg-base);
    border-radius: 14px;
    margin-bottom: 24px;
    animation: slideUp .5s .5s ease both;
}
.empty-onboard__note-emoji {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 1px;
}
.empty-onboard__note-text {
    font-size: 12px;
    color: var(--text-mid);
    line-height: 1.5;
}
.empty-onboard__note-text strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* Hint */
.empty-onboard__hint {
    text-align: center;
    font-size: 13px;
    color: var(--text-light-alt);
    line-height: 1.5;
    padding: 8px 12px;
    animation: slideUp .5s .6s ease both;
}
.empty-onboard__hint strong {
    color: var(--text-mid);
    font-weight: 600;
}

/* Dark-Mode Overrides */
[data-theme="dark"] .empty-onboard__card {
    background: transparent;
    box-shadow: none;
}
[data-theme="dark"] .empty-onboard__action {
    background: var(--bg-surface);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .2);
}
[data-theme="dark"] .empty-onboard__action--wa .empty-onboard__action-icon   { background: rgba(76, 175, 80, .15); }
[data-theme="dark"] .empty-onboard__action--link .empty-onboard__action-icon { background: rgba(255, 107, 64, .15); }
[data-theme="dark"] .empty-onboard__action--qr .empty-onboard__action-icon   { background: rgba(186, 104, 200, .15); }

/* ── Starred Empty State ────────────────────────────── */
.starred-empty {
    text-align: center;
    padding: var(--space-2xl) var(--space-xl);
    background: var(--bg-surface);
    border: 1.5px dashed var(--border);
    border-radius: var(--radius-xl);
}

.starred-empty-icon {
    font-size: 40px;
    margin-bottom: var(--space-md);
}

.starred-empty-text {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: var(--space-lg);
}

.starred-empty-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 10px 20px;
    background: var(--color-coral);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}

.starred-empty-btn:hover {
    background: var(--color-coral-dark);
}

.starred-empty-btn:active {
    transform: scale(0.95);
}

/* ── Suggestions Panel (Chip-Grid, per ADD_ITEM.md) ── */
.suggestions {
    background: var(--bg-surface);
    border: 1px solid var(--border-hover);
    border-bottom: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    margin: 0 8px;
    max-height: min(240px, 35vh);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    display: none;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.2);
}
.suggestions::-webkit-scrollbar { display: none; }
.suggestions.visible {
    display: block;
    animation: suggestIn 0.2s var(--ease);
}
@keyframes suggestIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Sektions-Label ── */
.suggest-source {
    padding: 10px 14px 4px;
    font-family: var(--font-mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    font-weight: 700;
}
.suggest-source.history {
    color: var(--color-peach);
}

/* ── Chip-Grid ── */
.suggest-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 12px 10px;
}

/* ── Einzelner Chip ── */
.suggest-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast), opacity var(--dur-fast);
    animation: chipIn 0.15s var(--ease) backwards;
}
.suggest-chip:hover {
    border-color: var(--color-coral);
    background: var(--suggest-highlight);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}
.suggest-chip:active {
    transform: scale(0.95);
}
@keyframes chipIn {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1); }
}

/* ── Chip-Inhalt ── */
.chip-emoji {
    font-size: 20px;
    line-height: 1;
}
.chip-name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-primary);
}
.chip-cat {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-muted);
}
.chip-history-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-peach);
    flex-shrink: 0;
}

/* ── Match-Highlight ── */
.match {
    color: var(--color-coral);
    font-weight: 700;
}

/* ── Freitext-Fallback ── */
.suggest-custom {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--border);
    cursor: pointer;
    transition: background var(--dur-fast);
}
.suggest-custom:hover {
    background: var(--suggest-highlight);
}
.suggest-custom-icon {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    background: rgba(255, 107, 64, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--color-coral);
}
.suggest-custom-text {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-primary);
}
.suggest-custom-text span {
    color: var(--color-coral);
}

/* ── Qty-Controls im Suggestions-Panel ───────────── */
.suggest-qty-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
}
.suggest-qty-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}
.qty-minus, .qty-plus {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    font-size: 18px;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.qty-minus:hover, .qty-plus:hover {
    border-color: var(--color-coral);
    color: var(--color-coral);
}
.qty-minus:active, .qty-plus:active {
    transform: scale(0.9);
}
.qty-value {
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-coral);
    min-width: 28px;
    text-align: center;
}
.qty-unit {
    padding: 10px 14px;
    min-height: 44px;
    box-sizing: border-box;
    border-radius: var(--radius-full);
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.qty-unit:hover {
    border-color: var(--color-coral);
    color: var(--color-coral);
}
.qty-unit:active {
    transform: scale(0.93);
}

/* ── Chip add-animation ── */
.suggest-chip--adding {
    pointer-events: none;
    position: relative;
    animation: chipAdd 0.3s ease forwards;
}
.suggest-chip--adding::after {
    content: '\2713';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(88, 204, 108, 0.9);
    color: white;
    font-size: 16px;
    font-weight: 700;
    border-radius: var(--radius-md);
}
@keyframes chipAdd {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.05); }
    100% { transform: scale(0.95); opacity: 0.5; }
}

/* ── D1: Done-Tile als Tile im Grid (re-add Cursor) ──────── */
.tile--done-readd {
    cursor: pointer;
}

/* ══════════════════════════════════════════════════════════════
   SHARING VIEW (.sh-*)
   Zwei-Tab-Layout: Listen / Freunde
   ══════════════════════════════════════════════════════════════ */

/* ── Tab Bar ── */
.sh-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    margin: 0 16px var(--space-lg);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
}
.sh-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    border: none;
    background: transparent;
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
    -webkit-tap-highlight-color: transparent;
}
.sh-tab:active {
    transform: scale(0.97);
}
.sh-tab.active {
    background: var(--bg-elevated);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}
.sh-tab__count {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: var(--radius-full);
    background: rgba(167, 139, 250, 0.1);
    color: var(--color-shared);
}
.sh-tab__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-coral);
    flex-shrink: 0;
    animation: newPulse 2s ease-in-out infinite;
}

/* ── Content Area ── */
.sh-content {
    padding: 0;
}

/* ── Section Header ── */
.sh-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-lg) 20px var(--space-sm);
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    font-weight: 700;
}
.sh-section-count {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: var(--radius-full);
    background: var(--bg-surface);
    color: var(--text-muted);
}
.sh-section-count--pending {
    background: rgba(255, 107, 64, 0.1);
    color: var(--color-coral);
}

/* ── Invitation Feed ── */
.sh-invite-feed {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: 0 16px;
    margin-bottom: var(--space-lg);
}
.sh-invite {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    animation: fadeUp 0.3s var(--ease) both;
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.sh-invite__info {
    flex: 1;
    min-width: 0;
}
.sh-invite__text {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.3;
}
.sh-invite__text strong {
    font-weight: 700;
}
.sh-invite__perm {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    margin-top: 2px;
}
.sh-invite__actions {
    display: flex;
    gap: var(--space-sm);
    flex-shrink: 0;
}
.sh-invite__btn {
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.sh-invite__btn:active {
    transform: scale(0.93);
}
.sh-invite__btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.sh-invite__btn--decline {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-hover);
    color: var(--text-muted);
    padding: 0;
    font-size: 14px;
    border-radius: 50%;
}
.sh-invite__btn--decline:hover {
    color: var(--color-error);
    background: rgba(232, 90, 48, 0.08);
}
.sh-invite__btn--accept {
    padding: 7px 16px;
    background: var(--color-coral);
    color: white;
    box-shadow: 0 2px 8px rgba(255, 107, 64, 0.2);
}
.sh-invite__btn--accept:hover {
    background: var(--color-coral-dark);
}

/* ── Compact List Rows ── */
.sh-list-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 16px;
    margin-bottom: var(--space-lg);
}
.sh-lrow {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
    -webkit-tap-highlight-color: transparent;
}
.sh-lrow:hover {
    border-color: var(--border-hover);
    box-shadow: var(--shadow-sm);
}
.sh-lrow:active {
    transform: scale(0.98);
}
.sh-lrow__icon {
    font-size: 22px;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-surface);
    border-radius: var(--radius-md);
}
.sh-lrow__info {
    flex: 1;
    min-width: 0;
}
.sh-lrow__name {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sh-lrow__meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sh-lrow__action {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-muted);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast), opacity var(--dur-fast);
    -webkit-tap-highlight-color: transparent;
}
.sh-lrow__action:hover {
    border-color: var(--border-hover);
    color: var(--text-secondary);
}
.sh-lrow__action:active {
    transform: scale(0.9);
}
.sh-lrow__action--leave:hover {
    border-color: var(--color-error);
    color: var(--color-error);
    background: rgba(232, 90, 48, 0.06);
}

/* ── Friends Tab ── */
.sh-friend-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 16px;
}
.sh-friend {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    animation: fadeUp 0.3s var(--ease) both;
    transition: border-color var(--dur-fast) var(--ease);
}
.sh-friend.expanded {
    border-color: var(--border-hover);
}
.sh-friend__main {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    -webkit-tap-highlight-color: transparent;
}
.sh-friend__info {
    flex: 1;
    min-width: 0;
}
.sh-friend__name {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}
.sh-friend__meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 1px;
}
.sh-friend__remove {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast), opacity var(--dur-fast);
    -webkit-tap-highlight-color: transparent;
}
.sh-friend__remove:hover {
    border-color: var(--color-error);
    color: var(--color-error);
    background: rgba(232, 90, 48, 0.06);
}
.sh-friend__remove:active {
    transform: scale(0.9);
}
.sh-friend__chevron {
    font-size: 18px;
    color: var(--text-muted);
    flex-shrink: 0;
    transition: transform var(--dur-fast) var(--ease);
}
.sh-friend.expanded .sh-friend__chevron {
    transform: rotate(90deg);
}
.sh-friend__detail {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s var(--ease);
    border-top: 0 solid var(--border);
    background: var(--bg-surface);
}
.sh-friend.expanded .sh-friend__detail {
    max-height: 500px;
    border-top-width: 1px;
}
.sh-friend__list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-lg);
    border-bottom: 1px solid var(--border);
}
.sh-friend__list:last-child {
    border-bottom: none;
}
.sh-friend__list-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sh-friend__list-perm {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
    margin-left: var(--space-md);
}
.sh-friend__list-perm.write {
    background: rgba(88, 204, 108, 0.08);
    color: var(--color-success);
}
.sh-friend__list-perm.read {
    background: var(--bg-elevated);
    color: var(--text-muted);
}

/* ── Per-List Actions (Friend Detail) ── */
.sh-friend__list-actions {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-shrink: 0;
    margin-left: auto;
}
.sh-friend__list-remove {
    width: 22px;
    height: 22px;
    border-radius: var(--radius-full);
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 11px;
    cursor: pointer;
    opacity: 0.6;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
}
.sh-friend__list-remove:hover {
    opacity: 1;
    background: var(--bg-elevated);
}
.sh-friend__list-remove--kick:hover {
    color: var(--color-error, #e74c3c);
    background: rgba(231, 76, 60, 0.08);
}
.sh-friend__list-remove--leave:hover {
    color: var(--color-warning, #f39c12);
    background: rgba(243, 156, 18, 0.08);
}

/* ── Hint ── */
.sh-hint {
    text-align: center;
    padding: var(--space-xl) var(--space-xl) var(--space-lg);
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
}

/* ── Empty State ── */
.sh-empty {
    text-align: center;
    padding: var(--space-2xl) var(--space-xl);
}
.sh-empty__icon {
    font-size: 40px;
    margin-bottom: var(--space-md);
    opacity: 0.7;
}
.sh-empty__title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
}
.sh-empty__hint {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
    max-width: 260px;
    margin: 0 auto;
}


/* ══════════════════════════════════════════════════════════════
   SHARE MANAGER (.sm-*)
   Zentrierter Fullscreen-Dialog zum Verwalten von Listenzugriffen.
   ══════════════════════════════════════════════════════════════ */

/* ── Overlay + Panel ── */
.sm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 40;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s var(--ease);
}
.sm-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}
.sm-panel {
    background: var(--bg-base);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 420px;
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
    transform: translateY(16px) scale(0.97);
    transition: transform 0.25s var(--ease);
    overflow: hidden;
}
.sm-overlay.visible .sm-panel {
    transform: translateY(0) scale(1);
}

/* ── Header ── */
.sm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-lg) var(--space-xl);
    border-bottom: 1px solid var(--border);
    background: var(--bg-surface);
    flex-shrink: 0;
}
.sm-header__left {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    min-width: 0;
}
.sm-header__icon {
    font-size: 28px;
    flex-shrink: 0;
}
.sm-header__title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}
.sm-header__sub {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sm-header__close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text-muted);
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.sm-header__close:hover {
    border-color: var(--border-hover);
    color: var(--text-primary);
}
.sm-header__close:active {
    transform: scale(0.92);
}

/* ── Scrollable Body ── */
.sm-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}
.sm-body::-webkit-scrollbar { display: none; }

/* ── Section ── */
.sm-section {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.sm-section__head {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    font-family: var(--font-mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    font-weight: 700;
}
.sm-section__icon {
    font-size: 13px;
    line-height: 1;
}

/* ── Mitglieder-Liste ── */
.sm-members {
    display: flex;
    flex-direction: column;
}
.sm-member {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--border);
    transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.sm-member--removing {
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
}
.sm-member__name {
    flex: 1;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sm-member__badge {
    font-family: var(--font-mono);
    font-size: 8px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.sm-member__badge--pending {
    background: rgba(255, 170, 64, 0.1);
    color: var(--color-warning);
}
.sm-member__perm {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border);
    background: none;
    white-space: nowrap;
    cursor: default;
}
.sm-member__perm--write {
    color: var(--color-success);
    background: rgba(88, 204, 108, 0.06);
    border-color: rgba(88, 204, 108, 0.2);
}
.sm-member__perm--read {
    color: var(--text-muted);
    background: var(--bg-elevated);
}
.sm-member__perm--clickable {
    cursor: pointer;
    transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast), opacity var(--dur-fast);
}
.sm-member__perm--clickable:hover {
    transform: scale(1.05);
    border-color: var(--color-coral);
}
.sm-member__perm--clickable:active {
    transform: scale(0.95);
}
.sm-member__remove {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
    color: var(--text-muted);
    flex-shrink: 0;
    transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast), opacity var(--dur-fast);
}
.sm-member__remove:hover {
    border-color: var(--color-error);
    color: var(--color-error);
    background: rgba(232, 90, 48, 0.06);
}
.sm-member__remove:active {
    transform: scale(0.9);
}

/* ── Freunde-Chips ── */
.sm-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: var(--space-sm) var(--space-lg) var(--space-md);
}
.sm-chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background: var(--bg-elevated);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.sm-chip:hover {
    border-color: var(--border-hover);
    background: var(--bg-hover);
}
.sm-chip:active {
    transform: scale(0.95);
}
.sm-chip.selected {
    background: rgba(255, 107, 64, 0.08);
    border-color: var(--color-coral);
    color: var(--color-coral);
    box-shadow: 0 0 0 3px rgba(255, 107, 64, 0.1);
}

/* ── Permission-Toggle ── */
.sm-perm {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--border);
}
.sm-perm__label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
}
.sm-perm__toggle {
    display: flex;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    overflow: hidden;
}
.sm-perm__opt {
    padding: 5px 12px;
    font-size: 10px;
    font-weight: 700;
    font-family: var(--font-mono);
    cursor: pointer;
    color: var(--text-muted);
    transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast), opacity var(--dur-fast);
}
.sm-perm__opt.active {
    background: var(--color-coral);
    color: white;
}

/* ── Action-Button (Einladen) ── */
.sm-action-btn {
    padding: 14px;
    border-radius: var(--radius-md);
    background: var(--color-coral);
    color: white;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    border: none;
    width: 100%;
    cursor: pointer;
    text-align: center;
    box-shadow: 0 4px 16px rgba(255, 107, 64, 0.25);
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
    display: none;
}
.sm-action-btn.visible {
    display: block;
    animation: fadeUp 0.2s var(--ease);
}
.sm-action-btn:hover:not(:disabled) {
    background: var(--color-coral-dark);
    transform: translateY(-1px);
}
.sm-action-btn:active:not(:disabled) {
    transform: scale(0.98);
}
.sm-action-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── Link-Sektion ── */
.sm-link {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin: 0 var(--space-lg) var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.sm-link__url {
    flex: 1;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sm-link__copy {
    padding: 6px 14px;
    border-radius: var(--radius-full);
    background: var(--color-coral);
    color: white;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast), opacity var(--dur-fast);
}
.sm-link__copy:hover {
    background: var(--color-coral-dark);
}
.sm-link__copy:active {
    transform: scale(0.95);
}
.sm-link__copy.copied {
    background: var(--color-success);
}


/* ── Link deaktivieren Button ── */
.sm-link__deactivate {
    display: block;
    width: calc(100% - 2 * var(--space-lg));
    margin: var(--space-sm) var(--space-lg) var(--space-lg);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    border: 1.5px solid var(--color-danger, #e74c3c);
    background: transparent;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-danger, #e74c3c);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.sm-link__deactivate:hover {
    background: rgba(231, 76, 60, 0.08);
}
.sm-link__deactivate:active {
    transform: scale(0.97);
}

/* ── Tab-Bar (Link teilen / QR Code) ── */
.sm-tabs {
    display: flex;
    gap: 4px;
    margin: 0 var(--space-lg) var(--space-md);
    padding: 3px;
    background: var(--bg-subtle);
    border-radius: var(--radius-full);
    border: 1px solid var(--border);
}
.sm-tab {
    flex: 1;
    padding: 8px 12px;
    border: none;
    border-radius: var(--radius-full);
    background: transparent;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.sm-tab.active {
    background: var(--bg-elevated);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}
.sm-tab:not(.active):hover {
    color: var(--text-secondary);
}
.sm-tab:active {
    transform: scale(0.97);
}

/* ── QR-Code Display ── */
.sm-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-sm) var(--space-lg) var(--space-md);
}
.sm-qr__canvas-wrap {
    background: #FFFFFF;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    padding: 10px;
    margin-bottom: var(--space-sm);
}
.sm-qr__canvas {
    display: block;
    border-radius: 4px;
}
.sm-qr__url {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: var(--space-md);
}
.sm-qr__actions {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
    margin-bottom: var(--space-sm);
}
.sm-qr__btn {
    padding: 8px 18px;
    border-radius: var(--radius-full);
    border: 1.5px solid var(--border);
    background: var(--bg-elevated);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.sm-qr__btn:hover {
    border-color: var(--border-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}
.sm-qr__btn:active {
    transform: scale(0.96);
}

/* ── Messenger-Buttons ── */
.sm-messengers {
    display: flex;
    gap: 8px;
    padding: 0 var(--space-lg) var(--space-lg);
}
.sm-msg-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: var(--space-md) var(--space-sm);
    border-radius: var(--radius-md);
    border: 1.5px solid var(--border);
    background: var(--bg-elevated);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.sm-msg-btn:hover {
    border-color: var(--border-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.sm-msg-btn:active {
    transform: scale(0.96);
}
.sm-msg-btn__icon {
    font-size: 22px;
    line-height: 1;
}


/* ══════════════════════════════════════════════════════════════
   JOIN PAGE
   Seite die beim Klick auf einen Share-Link erscheint.
   ══════════════════════════════════════════════════════════════ */

.join-card {
    max-width: 360px;
    margin: 40px auto;
    padding: 32px 24px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    text-align: center;
    box-shadow: var(--shadow-lg);
    animation: fadeUp 0.3s var(--ease);
}
.join-card__icon {
    font-size: 48px;
    margin-bottom: 16px;
}
.join-card__title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.join-card__meta {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 24px;
}
.join-card__btn {
    display: inline-block;
    padding: 14px 32px;
    border-radius: var(--radius-md);
    background: var(--color-coral);
    color: white;
    font-weight: 600;
    font-size: 14px;
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    box-shadow: 0 4px 16px rgba(255, 107, 64, 0.25);
    transition: transform var(--dur-fast), opacity var(--dur-fast);
}
.join-card__btn:hover {
    transform: translateY(-1px);
}
.join-card__btn:disabled {
    opacity: 0.6;
    cursor: default;
    transform: none;
}
.join-card__login-hint {
    margin-top: 16px;
    font-size: 12px;
    color: var(--text-muted);
}
.join-card__login-hint a {
    color: var(--color-coral);
    text-decoration: none;
    font-weight: 600;
}


/* ══════════════════════════════════════════════════════════════
   ADD-ITEM FULL-PAGE (.add-page__*)
   Eigene Full-Page-Ansicht zum Hinzufuegen von Artikeln.
   Kein App-Shell, kein position:fixed, normaler Document-Flow.
   ══════════════════════════════════════════════════════════════ */

.add-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    background: var(--bg-base);
    max-width: var(--max-width);
    margin: 0 auto;
}

/* ── Header ── */
.add-page__header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    padding-top: calc(env(safe-area-inset-top, 12px) + var(--space-md));
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.add-page__back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    font-size: 20px;
    color: var(--text-primary);
    cursor: pointer;
    border-radius: var(--radius-full);
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}
.add-page__back-btn:active {
    background: var(--bg-hover);
}
.add-page__title-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex: 1;
    min-width: 0;
}
.add-page__title-icon {
    font-size: 22px;
    flex-shrink: 0;
    line-height: 1;
}
.add-page__title {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.add-page__done-btn {
    padding: 7px 16px;
    border-radius: var(--radius-full);
    border: 1.5px solid var(--color-coral);
    background: transparent;
    color: var(--color-coral);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
    flex-shrink: 0;
}
.add-page__done-btn:hover {
    background: rgba(255, 107, 64, 0.08);
}
.add-page__done-btn:active {
    transform: scale(0.95);
}

/* ── Suchfeld ── */
.add-page__search {
    padding: var(--space-md) var(--space-lg);
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
}
.add-page__input {
    flex: 1;
    width: 100%;
    padding: 12px 18px;
    padding-right: 38px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--bg-input);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
}
.add-page__input:focus {
    border-color: var(--color-coral);
    box-shadow: 0 0 0 3px rgba(255, 107, 64, 0.12);
}
.add-page__input::placeholder {
    color: var(--text-muted);
}
.add-page__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    display: none;
}
.add-page__clear {
    position: absolute;
    right: calc(var(--space-lg) + 8px);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: var(--bg-hover);
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.add-page__clear:hover {
    background: var(--bg-elevated);
    color: var(--text-secondary);
}
.add-page__clear:active {
    transform: scale(0.9);
}
.add-page__search.has-value .add-page__clear {
    display: flex;
}

/* ── Mengenleiste ── */
.add-page__qty-bar {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
    background: var(--bg-surface);
}
.add-page__qty-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.add-page__qty-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background: var(--bg-elevated);
    font-size: 20px;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.add-page__qty-btn:hover {
    border-color: var(--color-coral);
    color: var(--color-coral);
}
.add-page__qty-btn:active {
    transform: scale(0.9);
    background: var(--bg-hover);
}
.add-page__qty-value {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    min-width: 48px;
    text-align: center;
}

/* Einheiten-Chips */
.add-page__unit-chips {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
}
.add-page__unit-chip {
    padding: 6px 14px;
    border-radius: var(--radius-full);
    border: 1.5px solid var(--border);
    background: var(--bg-elevated);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.add-page__unit-chip:hover {
    border-color: var(--border-hover);
}
.add-page__unit-chip:active {
    transform: scale(0.95);
}
.add-page__unit-chip.active {
    border-color: var(--color-coral);
    background: rgba(255, 107, 64, 0.1);
    color: var(--color-coral);
    font-weight: 600;
}

/* ── Session-Tracker ── */
.add-page__session {
    padding: var(--space-sm) var(--space-lg) var(--space-md);
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
}
.add-page__session-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--color-success);
    margin-bottom: var(--space-sm);
}
.add-page__session-count {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    background: rgba(88, 204, 108, 0.1);
    color: var(--color-success);
    padding: 2px 7px;
    border-radius: var(--radius-full);
}
.add-page__session-chips {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.add-page__session-chips::-webkit-scrollbar {
    display: none;
}
.add-page__session-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(88, 204, 108, 0.08);
    border: 1px solid rgba(88, 204, 108, 0.2);
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    color: var(--color-success);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Content (Produkt-Grid, scrollbar) ── */
.add-page__content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: var(--space-sm) 0;
}
.add-page__content::-webkit-scrollbar {
    display: none;
}
/* Suggest-Klassen innerhalb der Full-Page anpassen */
.add-page__content .suggest-grid {
    padding: 4px var(--space-lg) 10px;
}
.add-page__content .suggest-source {
    padding: 10px var(--space-lg) 4px;
}
.add-page__content .suggest-custom {
    margin: 0 var(--space-lg);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}
.add-page__empty {
    text-align: center;
    padding: var(--space-2xl) var(--space-xl);
    font-size: 13px;
    color: var(--text-muted);
}

/* ── Footer ── */
.add-page__footer {
    padding: var(--space-md) var(--space-lg);
    padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
    flex-shrink: 0;
    border-top: 1px solid var(--border);
    background: var(--bg-surface);
}
.add-page__finish-btn {
    width: 100%;
    padding: 14px;
    border-radius: var(--radius-md);
    border: none;
    background: var(--color-coral);
    color: white;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(255, 107, 64, 0.25);
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.add-page__finish-btn:hover {
    background: var(--color-coral-dark);
    transform: translateY(-1px);
}
.add-page__finish-btn:active {
    transform: scale(0.98);
}

/* ── Verify Banner (collapsible) ─────────────────────────────── */
.verify-banner {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin: 0 20px var(--space-md);
    overflow: hidden;
}
.verify-banner__header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 10px var(--space-md);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.verify-banner__icon {
    font-size: 16px;
    flex-shrink: 0;
}
.verify-banner__label {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}
.verify-banner__arrow {
    font-size: 10px;
    color: var(--text-muted);
    transition: transform var(--dur-fast) var(--ease);
}
.verify-banner.expanded .verify-banner__arrow {
    transform: rotate(180deg);
}
.verify-banner__body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s var(--ease);
}
.verify-banner.expanded .verify-banner__body {
    max-height: 200px;
}
.verify-banner.expanded {
    border-color: var(--color-coral);
}
.verify-banner__text {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
    line-height: 1.4;
    padding: 0 var(--space-md);
}
.verify-banner__form {
    display: flex;
    gap: var(--space-xs);
    margin-bottom: var(--space-xs);
    padding: 0 var(--space-md);
}
.verify-banner__input {
    flex: 1;
    min-width: 0;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 16px;
    font-family: var(--font-mono, monospace);
    letter-spacing: 2px;
    text-align: center;
    background: var(--bg);
    color: var(--text);
}
.verify-banner__input:focus {
    outline: none;
    border-color: var(--color-coral);
}
.verify-banner__resend {
    background: none;
    border: none;
    color: var(--color-coral);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px var(--space-md) var(--space-md);
}
.verify-banner__resend:disabled {
    opacity: 0.5;
}

/* ── Pull to Refresh ─────────────────────────────── */
.pull-refresh-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 0;
    overflow: hidden;
    transition: height 0.2s var(--ease), opacity 0.2s var(--ease);
    opacity: 0;
}

.pull-refresh-spinner__dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 3px solid var(--border);
    border-top-color: var(--color-coral);
}

.pull-refresh-spinner--loading .pull-refresh-spinner__dot {
    animation: pull-refresh-spin 0.8s linear infinite;
}

@keyframes pull-refresh-spin {
    to { transform: rotate(360deg); }
}