/* ============================================================
   KidCart - Premium Mobile UI
   ============================================================ */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

:root {
    --purple: #7c3aed;
    --purple-light: #a78bfa;
    --purple-bg: #ede9fe;
    --green: #10b981;
    --green-light: #d1fae5;
    --red: #ef4444;
    --red-light: #fee2e2;
    --blue: #3b82f6;
    --orange: #f59e0b;
    --bg: #f8f7ff;
    --card: #ffffff;
    --text: #1e293b;
    --text2: #64748b;
    --text3: #94a3b8;
    --border: #e2e8f0;
    --shadow: 0 4px 24px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 40px rgba(0,0,0,0.12);
    --radius: 16px;
    --radius-sm: 10px;
}

html, body {
    height:100%; overflow:hidden;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    background: var(--bg); color: var(--text);
    -webkit-font-smoothing: antialiased;
}

.hidden { display:none !important; }

/* ===== Screens ===== */
.screen {
    display:none; position:fixed; inset:0;
    flex-direction:column; overflow:hidden;
}
.screen.active { display:flex; }

/* Animations */
@keyframes fadeUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:none; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes pop { 0% { transform:scale(0.8); opacity:0; } 70% { transform:scale(1.05); } 100% { transform:scale(1); opacity:1; } }
@keyframes shake { 0%,100% { transform:translateX(0); } 25% { transform:translateX(-8px); } 75% { transform:translateX(8px); } }
@keyframes cardIn { from { transform:scale(0.92); opacity:0; } to { transform:scale(1); opacity:1; } }

/* ===== MODE SELECT ===== */
.mode-bg {
    flex:1; display:flex; align-items:safe center; justify-content:center;
    background: linear-gradient(145deg, #7c3aed 0%, #4f46e5 50%, #2563eb 100%);
    padding: 24px; overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.mode-content { width:100%; max-width:400px; }
.brand { text-align:center; margin-bottom:28px; animation: fadeUp 0.6s ease-out; }
.brand-logo { width:56px; height:56px; margin-bottom:4px; }
.brand h1 { font-family:'Nunito',sans-serif; font-size:2.8rem; font-weight:900; color:white; letter-spacing:-2px; }
.brand p { color:rgba(255,255,255,0.7); font-size:1rem; font-weight:500; }
.mode-buttons { display:flex; flex-direction:column; gap:14px; animation: fadeUp 0.6s ease-out 0.15s both; }
.mode-btn {
    display:flex; align-items:center; gap:16px;
    background:rgba(255,255,255,0.12); backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,0.2);
    border-radius: var(--radius); padding:20px; cursor:pointer;
    text-align:left; color:white;
    transition: transform 0.15s, background 0.15s;
}
.mode-btn:active { transform:scale(0.97); background:rgba(255,255,255,0.2); }
.mode-emoji { font-size:2.4rem; }
.mode-label { font-family:'Nunito',sans-serif; font-size:1.15rem; font-weight:800; display:block; }
.mode-desc { font-size:0.8rem; opacity:0.7; display:block; margin-top:2px; }

/* ===== PIN ===== */
.pin-content {
    flex:1; display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    background: linear-gradient(145deg, #7c3aed, #4f46e5);
    padding:24px; color:white;
}
.pin-content h2 { font-size:1.3rem; margin-bottom:28px; font-weight:700; }
.pin-dots { display:flex; gap:16px; margin-bottom:36px; }
.dot {
    width:18px; height:18px; border-radius:50%;
    border:2px solid rgba(255,255,255,0.5);
    transition: all 0.15s;
}
.dot.filled { background:white; border-color:white; transform:scale(1.15); }
.dot.wrong { border-color:var(--red); animation: shake 0.3s; }
.pin-pad { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; max-width:280px; width:100%; }
.pin-pad button {
    height:64px; border-radius:50%; border:none;
    background:rgba(255,255,255,0.12); color:white;
    font-size:1.5rem; font-weight:600; cursor:pointer;
    transition: background 0.1s, transform 0.1s;
}
.pin-pad button:active { background:rgba(255,255,255,0.25); transform:scale(0.92); }
.pin-empty { visibility:hidden; }
.pin-hint { margin-top:24px; font-size:0.8rem; opacity:0.5; }
.back-btn {
    position:absolute; top:16px; left:16px;
    background:rgba(255,255,255,0.15); border:none; color:white;
    width:40px; height:40px; border-radius:50%;
    font-size:1.2rem; cursor:pointer; z-index:10;
}

/* ===== Kid Select ===== */
.pick-content {
    flex:1; display:flex; flex-direction:column;
    align-items:center; justify-content:safe center;
    background: linear-gradient(145deg, #7c3aed, #2563eb);
    padding:24px; color:white; position:relative;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.pick-content h2 { font-size:1.4rem; font-weight:700; margin-bottom:28px; }
.kid-list, .store-list { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; width:100%; max-width:360px; }
.kid-option, .store-option {
    background:rgba(255,255,255,0.12); border:2px solid transparent;
    border-radius:var(--radius); padding:20px 12px; text-align:center;
    cursor:pointer; transition: all 0.2s; color:white;
}
.kid-option:active, .store-option:active { transform:scale(0.95); }
.kid-option.selected, .store-option.selected { background:white; color:var(--purple); border-color:white; }
.kid-option .avatar { font-size:2.4rem; display:block; margin-bottom:6px; }
.kid-option .name { font-size:0.9rem; font-weight:700; }
.store-option { font-size:1.1rem; font-weight:800; padding:24px 12px; }
.store-option-logo { max-width:80%; max-height:40px; object-fit:contain; filter:brightness(0) invert(1); }

.config-msg {
    margin-top:20px; background:rgba(255,255,255,0.15);
    border-radius:var(--radius-sm); padding:16px;
    font-size:0.85rem; line-height:1.5; text-align:center; max-width:360px;
}

/* ===== Swipe Screen ===== */
.swipe-header {
    display:flex; align-items:center; padding:10px 14px;
    background:white; border-bottom:1px solid var(--border); gap:10px; flex-shrink:0;
}
.hdr-btn {
    background:var(--bg); border:none; width:36px; height:36px;
    border-radius:50%; font-size:1.1rem; cursor:pointer; color:var(--text);
    display:flex; align-items:center; justify-content:center;
}
.hdr-center { flex:1; text-align:center; font-weight:700; font-size:0.95rem; }
.hdr-badge {
    background:var(--purple-light); color:white;
    font-size:0.75rem; font-weight:700; padding:4px 12px;
    border-radius:20px; min-width:36px; text-align:center;
}

.cat-tabs {
    display:flex; overflow-x:auto; background:white;
    border-bottom:1px solid var(--border); scrollbar-width:none; flex-shrink:0;
}
.cat-tabs::-webkit-scrollbar { display:none; }
.cat {
    flex:0 0 auto; padding:10px 16px; border:none; background:none;
    font-size:0.8rem; font-weight:600; color:var(--text3);
    cursor:pointer; border-bottom:3px solid transparent;
    text-transform:capitalize; white-space:nowrap;
}
.cat.active { color:var(--purple); border-bottom-color:var(--purple); }

.swipe-area {
    flex:1; display:flex; align-items:center; justify-content:center;
    padding:12px; overflow:hidden; position:relative;
}
.card-stack {
    position:relative; width:100%; max-width:360px;
    aspect-ratio: 3/4;
    max-height: 500px;
}

/* ===== Card ===== */
.card {
    position:absolute; top:0; left:0; width:100%; height:100%;
    background:white;
    border-radius:20px; box-shadow:var(--shadow-lg);
    overflow:hidden; cursor:grab; user-select:none;
    touch-action:none; will-change:transform;
    display:flex; flex-direction:column;
}
.card:active { cursor:grabbing; }
.card.behind { z-index:-1; pointer-events:none; opacity:0; }
.card.entering { animation:cardFadeIn 0.12s ease-out; }
@keyframes cardFadeIn {
    from { opacity:0; }
    to { opacity:1; }
}
.card.entering { animation:cardIn 0.15s ease-out; }

.card-img {
    flex:1; display:flex; align-items:center; justify-content:center;
    background:white; position:relative; overflow:hidden;
    min-height:0;
}
.card-img img {
    width:auto; height:auto;
    max-width:85%; max-height:85%;
    object-fit:contain;
}
.card-img .ph { font-size:5.5rem; opacity:0.2; }

.card-badges {
    position:absolute; top:10px; left:10px;
    display:flex; flex-direction:column; gap:4px; z-index:5;
}
.badge {
    font-size:0.7rem; font-weight:700; padding:4px 10px;
    border-radius:20px; color:white;
}
.badge.loved { background:var(--green); }
.badge.restock { background:var(--purple); }
.badge.recent { background:rgba(0,0,0,0.5); }

.card-stamp {
    position:absolute; top:50%; padding:12px 28px;
    border-radius:12px; font-size:2rem; font-weight:900;
    opacity:0; pointer-events:none; z-index:10;
    background:rgba(255,255,255,0.9);
}
.card-stamp.yes { right:50%; transform:translate(50%,-50%) rotate(12deg); color:var(--green); border:4px solid var(--green); }
.card-stamp.no { left:50%; transform:translate(-50%,-50%) rotate(-12deg); color:var(--red); border:4px solid var(--red); }

.card-detail {
    padding:14px 18px; border-top:1px solid var(--border); flex-shrink:0;
}
.card-brand { font-size:0.7rem; color:var(--text3); font-weight:600; text-transform:uppercase; letter-spacing:0.5px; }
.card-name { font-size:1.05rem; font-weight:700; line-height:1.3; margin-top:2px; }
.card-price { display:inline-block; margin-top:4px; font-size:1.1rem; font-weight:800; color:var(--purple); }

.swipe-legend {
    display:flex; justify-content:space-between; padding:8px 30px;
    font-size:0.8rem; font-weight:700; flex-shrink:0;
}
.swipe-buttons {
    display:flex; gap:12px; padding:8px 20px; flex-shrink:0;
    justify-content:center;
}
.swipe-btn {
    flex:1; max-width:160px; padding:12px; border:none; border-radius:25px;
    font-size:0.95rem; font-weight:700; cursor:pointer;
    transition:transform 0.1s;
}
.swipe-btn:active { transform:scale(0.93); }
.swipe-btn.nope { background:var(--red-light); color:var(--red); }
.swipe-btn.want { background:var(--green-light); color:#065f46; }

.done-msg {
    position:absolute; inset:0; display:flex; flex-direction:column;
    align-items:center; justify-content:center; text-align:center; color:var(--text2);
}
/* Swipe tutorial overlay */
.swipe-tutorial {
    position:absolute; inset:0; z-index:60;
    display:flex; align-items:center; justify-content:space-between;
    background:rgba(0,0,0,0.35);
    border-radius:20px; padding:20px;
    animation:fadeIn 0.3s ease-out;
    cursor:pointer;
}
.tut-side {
    display:flex; flex-direction:column; align-items:center; gap:6px;
}
.tut-left { color:var(--red); }
.tut-right { color:var(--green); }
.tut-arrow { font-size:2.5rem; font-weight:900; animation:tutBounce 1s ease-in-out infinite; }
.tut-left .tut-arrow { animation-name:tutBounceLeft; }
.tut-right .tut-arrow { animation-name:tutBounceRight; }
.tut-label { font-size:1.1rem; font-weight:800; }
.tut-center { color:white; font-size:0.9rem; font-weight:600; text-align:center; opacity:0.8; }

@keyframes tutBounceLeft {
    0%,100% { transform:translateX(0); }
    50% { transform:translateX(-10px); }
}
@keyframes tutBounceRight {
    0%,100% { transform:translateX(0); }
    50% { transform:translateX(10px); }
}

/* Undo button */
.undo-btn {
    position:absolute; bottom:50px; left:50%;
    transform:translateX(-50%) translateY(20px);
    background:var(--text); color:white;
    padding:8px 24px; border-radius:25px;
    font-size:0.85rem; font-weight:700; cursor:pointer;
    opacity:0; transition:all 0.3s ease; z-index:50;
}
.undo-btn.show {
    opacity:1; transform:translateX(-50%) translateY(0);
}

/* Cart total bar */
.cart-total-bar {
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 16px; background:white;
    border-bottom:1px solid var(--border); flex-shrink:0;
}
.cart-total-info { display:flex; flex-direction:column; }
.cart-total-info span:first-child {
    font-family:'Nunito',sans-serif; font-size:1.4rem;
    font-weight:900; color:var(--text);
}
.cart-total-info span:last-child { font-size:0.8rem; color:var(--text3); }
.cart-checkout-btn {
    padding:10px 24px; border:none; border-radius:25px;
    background:var(--green); color:white;
    font-size:0.95rem; font-weight:700; cursor:pointer;
    transition:transform 0.1s;
}
.cart-checkout-btn:active { transform:scale(0.95); }

/* Cart tabs */
.cart-tabs {
    display:flex; background:white; border-bottom:1px solid var(--border);
    flex-shrink:0;
}
.cart-tab {
    flex:1; padding:10px 6px; border:none; background:none;
    font-size:0.8rem; font-weight:600; color:var(--text3);
    cursor:pointer; border-bottom:3px solid transparent;
    white-space:nowrap; display:flex; align-items:center;
    justify-content:center; gap:4px;
}
.cart-tab.active { color:var(--purple); border-bottom-color:var(--purple); }
.cart-badge {
    font-size:0.65rem; background:var(--orange); color:white;
    padding:1px 6px; border-radius:10px; font-weight:700;
}
.cart-badge.green { background:var(--green); }

.picks-tabs {
    display:flex; background:white; border-bottom:1px solid var(--border);
    flex-shrink:0;
}
.picks-tab {
    flex:1; padding:10px; border:none; background:none;
    font-size:0.85rem; font-weight:600; color:var(--text3);
    cursor:pointer; border-bottom:3px solid transparent;
}
.picks-tab.active { color:var(--purple); border-bottom-color:var(--purple); }

/* Add button in skipped list */
.pick-add {
    background:var(--green-light); color:var(--green); border:none;
    width:32px; height:32px; border-radius:50%; font-size:1.1rem;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
}

.done-icon { font-size:4rem; color:var(--green); margin-bottom:12px; }
.done-msg p { font-size:1.1rem; margin-bottom:20px; }
.done-msg button {
    padding:10px 28px; border-radius:25px; border:none;
    background:var(--purple); color:white; font-size:1rem;
    font-weight:600; cursor:pointer;
}

/* ===== Parent Dashboard ===== */
.parent-header {
    display:flex; align-items:center; padding:12px 14px;
    background:white; border-bottom:1px solid var(--border);
    gap:10px; flex-shrink:0;
}
.parent-header h1 { font-family:'Nunito',sans-serif; font-size:1.1rem; font-weight:800; }
.header-logo {
    flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
}
.header-logo-img { width:28px; height:28px; }

.parent-body, .settings-body {
    flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding:16px; padding-bottom:40px;
}

.dash-section { margin-bottom:24px; }
.dash-title { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.dash-title h3 { font-size:0.95rem; font-weight:700; }
.count-badge {
    background:var(--orange); color:white;
    font-size:0.75rem; font-weight:700; padding:3px 10px;
    border-radius:20px; min-width:28px; text-align:center;
}
.count-badge.green { background:var(--green); }
.small-btn {
    background:var(--purple-bg); color:var(--purple); border:none;
    padding:6px 14px; border-radius:20px; font-size:0.8rem;
    font-weight:600; cursor:pointer;
}
.small-btn.green { background:var(--green-light); color:#065f46; }
.dash-title-right { display:flex; align-items:center; gap:8px; }

.item-list { display:flex; flex-direction:column; gap:8px; }
.list-empty { text-align:center; color:var(--text3); padding:20px; font-size:0.9rem; }

.approve-flash {
    width:100%; text-align:center; padding:14px;
    font-family:'Nunito',sans-serif; font-size:1rem; font-weight:800;
    color:var(--green); animation:flashGreen 0.6s ease-out;
}
@keyframes flashGreen {
    0% { background:var(--green); color:white; }
    100% { background:transparent; color:var(--green); }
}

.item-row {
    display:flex; align-items:center; background:white;
    border-radius:var(--radius-sm); padding:10px; box-shadow:0 1px 4px rgba(0,0,0,0.04);
    gap:10px; animation: fadeUp 0.3s ease-out both;
}
.item-thumb {
    width:50px; height:50px; border-radius:10px; background:var(--bg);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; overflow:hidden;
}
.item-thumb img { width:100%; height:100%; object-fit:cover; }
.item-thumb .ph-sm { font-size:1.4rem; opacity:0.3; }
.item-info { flex:1; min-width:0; }
.item-name { font-weight:600; font-size:0.88rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.item-meta { font-size:0.75rem; color:var(--text3); }
.item-price { font-weight:700; color:var(--purple); }

.item-actions { display:flex; gap:6px; flex-shrink:0; }
.act-btn {
    width:36px; height:36px; border-radius:50%; border:none;
    font-size:1rem; cursor:pointer; display:flex;
    align-items:center; justify-content:center;
    transition: transform 0.1s;
}
.act-btn:active { transform:scale(0.88); }
.act-approve { background:var(--green-light); color:var(--green); }
.act-reject { background:var(--red-light); color:var(--red); }
.act-cart { background:#dbeafe; color:var(--blue); font-size:0.75rem; font-weight:700; }
.act-bought { background:var(--purple-bg); color:var(--purple); }
.act-delete { background:var(--red-light); color:var(--red); }
.act-link {
    width:36px; height:36px; border-radius:50%;
    background:var(--green-light); color:var(--green);
    display:flex; align-items:center; justify-content:center;
    text-decoration:none; font-size:1rem;
}

/* Block form */
.block-form { display:flex; gap:8px; margin-bottom:10px; }
.block-form input {
    flex:1; padding:10px; border:2px solid var(--border); border-radius:var(--radius-sm);
    font-size:0.9rem; outline:none;
}
.block-form input:focus { border-color:var(--purple-light); }
.block-form button {
    padding:10px 18px; border:none; border-radius:var(--radius-sm);
    background:var(--red); color:white; font-weight:600; cursor:pointer;
}

/* ===== Settings ===== */
.setting-group {
    background:white; border-radius:var(--radius); padding:16px;
    margin-bottom:14px; box-shadow:0 1px 4px rgba(0,0,0,0.04);
}
.setting-group h3 { font-size:0.9rem; font-weight:700; margin-bottom:12px; }

.add-kid-row { margin-top:12px; }
.add-kid-row input {
    width:100%; padding:10px; border:2px solid var(--border);
    border-radius:var(--radius-sm); font-size:0.9rem; margin-bottom:8px; outline:none;
}
.add-kid-row input:focus { border-color:var(--purple-light); }
.avatar-row { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.av-pick {
    width:40px; height:40px; border-radius:50%; border:2px solid transparent;
    background:var(--bg); font-size:1.3rem; display:flex;
    align-items:center; justify-content:center; cursor:pointer;
    transition: all 0.15s;
}
.av-pick.sel { border-color:var(--purple); background:var(--purple-bg); transform:scale(1.1); }
.add-kid-row button {
    width:100%; padding:10px; border:none; border-radius:var(--radius-sm);
    background:var(--purple); color:white; font-weight:600;
    font-size:0.9rem; cursor:pointer;
}

.kid-row {
    display:flex; align-items:center; gap:10px; padding:8px 0;
    border-bottom:1px solid var(--border);
}
.kid-row:last-child { border:none; }
.kid-row .av { font-size:1.5rem; }
.kid-row .nm { flex:1; font-weight:600; }
.kid-row .del {
    background:none; border:none; color:var(--red);
    font-size:0.8rem; cursor:pointer; font-weight:600;
}

.pin-change { display:flex; gap:8px; flex-wrap:wrap; }
.pin-change input {
    flex:1; min-width:100px; padding:10px; border:2px solid var(--border);
    border-radius:var(--radius-sm); font-size:0.9rem; outline:none;
}
.pin-change button {
    padding:10px 18px; border:none; border-radius:var(--radius-sm);
    background:var(--purple); color:white; font-weight:600; cursor:pointer;
}

#api-status {
    font-size:0.85rem; color:var(--text2); line-height:1.6;
}
.status-ok { color:var(--green); font-weight:600; }
.status-no { color:var(--red); font-weight:600; }

/* ===== Toast ===== */
.toast {
    position:fixed; bottom:80px; left:50%;
    transform:translateX(-50%) translateY(80px);
    background:var(--text); color:white;
    padding:10px 20px; border-radius:16px;
    font-size:0.85rem; font-weight:600;
    opacity:0; transition:all 0.3s ease;
    z-index:999; pointer-events:none;
    max-width:85vw; text-align:center;
    line-height:1.3;
}
.toast.show { transform:translateX(-50%) translateY(0); opacity:1; }
.toast.warning { background:var(--orange); }
.toast.error { background:var(--red); }

/* ===== Loading ===== */
.loading { text-align:center; color:var(--text3); padding:30px; font-size:0.9rem; }
.spin {
    display:inline-block; width:20px; height:20px;
    border:3px solid var(--border); border-top-color:var(--purple);
    border-radius:50%; animation:spin 0.5s linear infinite; margin-right:8px; vertical-align:middle;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ===== Category colors for placeholder cards ===== */
.card-img.cat-snacks { background:#fef3c7; }
.card-img.cat-cookies { background:#ffe4e6; }
.card-img.cat-candy { background:#fce7f3; }
.card-img.cat-cereal { background:#fef9c3; }
.card-img.cat-frozen { background:#dbeafe; }
.card-img.cat-drinks { background:#ccfbf1; }
.card-img.cat-dairy { background:#f1f5f9; }
.card-img.cat-fruit { background:#d1fae5; }
.card-img.cat-meals { background:#ede9fe; }
.card-img.cat-other { background:#f1f5f9; }

/* ===== Auth / Landing ===== */
.landing-bg {
    flex:1; display:flex; align-items:safe center; justify-content:center;
    background: linear-gradient(145deg, #7c3aed 0%, #4f46e5 50%, #2563eb 100%);
    padding:24px; overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.landing-inner { width:100%; max-width:400px; }

.auth-buttons { display:flex; flex-direction:column; gap:10px; animation:fadeUp 0.5s ease-out 0.15s both; }
.btn-primary {
    padding:11px; border:none; border-radius:var(--radius-sm);
    background:white; color:var(--purple); font-size:0.95rem;
    font-weight:700; cursor:pointer; width:100%;
    transition:transform 0.1s;
}
.btn-primary:active { transform:scale(0.97); }
.btn-outline {
    padding:14px; border:2px solid rgba(255,255,255,0.4); border-radius:var(--radius-sm);
    background:transparent; color:white; font-size:1rem;
    font-weight:600; cursor:pointer; width:100%;
}
.btn-ghost {
    padding:10px; border:none; background:none; color:rgba(255,255,255,0.7);
    font-size:0.9rem; font-weight:500; cursor:pointer; width:100%; text-align:center;
}
.divider { text-align:center; color:rgba(255,255,255,0.3); margin:4px 0; font-size:0.8rem; }
.divider span { padding:0 12px; }

.auth-form { animation:fadeUp 0.3s ease-out; }
.auth-form h2 { color:white; text-align:center; margin-bottom:8px; font-size:1.1rem; }
.auth-form input {
    width:100%; padding:10px 12px; border:none; border-radius:8px;
    background:rgba(255,255,255,0.15); color:white; font-size:0.9rem;
    margin-bottom:6px; outline:none;
}
.auth-form input::placeholder { color:rgba(255,255,255,0.5); }
.auth-form input:focus { background:rgba(255,255,255,0.25); }
.form-hint { color:rgba(255,255,255,0.6); font-size:0.75rem; text-align:center; margin-bottom:6px; }
.pin-setup {
    background:rgba(255,255,255,0.08); border-radius:8px;
    padding:8px 10px; margin-bottom:6px; display:flex;
    align-items:center; gap:8px;
}
.pin-setup label {
    color:white; font-weight:600; font-size:0.8rem; white-space:nowrap;
}
.pin-setup .form-hint { display:none; }
.pin-setup input { margin:0; flex:1; text-align:center; font-size:1.2rem !important; letter-spacing:6px; padding:8px !important; }

.consent-section {
    background:rgba(255,255,255,0.08); border-radius:8px;
    padding:8px 10px; margin-bottom:8px;
}
.consent-check {
    display:flex; align-items:flex-start; gap:6px;
    color:rgba(255,255,255,0.9); font-size:0.75rem; line-height:1.3;
    margin-bottom:6px; cursor:pointer;
}
.consent-check:last-of-type { margin-bottom:0; }
.consent-check input[type="checkbox"] {
    width:16px; height:16px; flex-shrink:0; margin-top:1px;
    accent-color:var(--green); cursor:pointer;
}
.consent-check a { color:var(--purple-light); }
.coppa-notice {
    font-size:0.65rem; color:rgba(255,255,255,0.4);
    line-height:1.3; margin-top:6px; padding-top:6px;
    border-top:1px solid rgba(255,255,255,0.1);
}
.auth-error {
    margin-top:12px; padding:10px; border-radius:var(--radius-sm);
    background:rgba(239,68,68,0.2); color:#fca5a5;
    font-size:0.85rem; text-align:center;
}

/* First time tip */
.first-time-tip {
    background:rgba(255,255,255,0.12); backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,0.2);
    border-radius:var(--radius); padding:16px;
    margin-bottom:20px; color:white;
    font-size:0.85rem; line-height:1.6; text-align:center;
    animation:fadeUp 0.4s ease-out;
}
.first-time-tip p { margin-bottom:6px; }
.first-time-tip p:last-child { margin-bottom:0; }
.pin-tip {
    background:rgba(255,255,255,0.1); border-radius:8px;
    padding:8px; margin-top:8px !important;
    font-size:0.8rem;
}

/* Guest banner */
.guest-banner {
    background:rgba(255,255,255,0.1); border-radius:var(--radius-sm);
    padding:12px; text-align:center; margin-bottom:16px;
    color:rgba(255,255,255,0.8); font-size:0.85rem;
}
.guest-banner button {
    background:rgba(255,255,255,0.2); border:none; color:white;
    padding:6px 14px; border-radius:20px; font-size:0.8rem;
    font-weight:600; cursor:pointer; margin-top:6px;
}

/* ===== Checkout ===== */
.checkout-banner {
    display:flex; align-items:center; justify-content:space-between;
    background:linear-gradient(135deg, var(--green), #059669);
    border-radius:var(--radius); padding:14px 16px;
    margin-bottom:16px; color:white;
}
.checkout-info { font-size:0.95rem; font-weight:600; }
.checkout-total { font-size:0.85rem; opacity:0.8; display:block; }
.checkout-btn {
    background:white; color:var(--green); border:none;
    padding:10px 20px; border-radius:25px;
    font-size:0.9rem; font-weight:700; cursor:pointer;
    white-space:nowrap;
}

.checkout-body {
    flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding:16px; padding-bottom:40px;
}
.cart-list-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:8px 0 12px; margin-bottom:4px;
    font-size:0.9rem; font-weight:600; color:var(--text2);
}
.checkout-store {
    background:white; border-radius:var(--radius); padding:16px;
    margin-bottom:14px; box-shadow:0 1px 4px rgba(0,0,0,0.04);
}
.checkout-store h3 { font-size:1rem; font-weight:700; margin-bottom:4px; }
.checkout-store .store-total { color:var(--text2); font-size:0.9rem; margin-bottom:12px; }
.checkout-store .checkout-items { font-size:0.85rem; color:var(--text2); margin-bottom:14px; line-height:1.6; }
.checkout-instructions {
    font-size:0.85rem; color:var(--text2); line-height:1.5;
    margin-bottom:14px;
}
.checkout-items-list { margin-bottom:16px; }
.checkout-item-row {
    display:flex; align-items:center; justify-content:space-between;
    padding:12px; margin-bottom:6px; background:var(--bg);
    border-radius:var(--radius-sm); text-decoration:none; color:var(--text);
    transition:transform 0.1s;
}
.checkout-item-row:active { transform:scale(0.98); }
.ci-info { flex:1; min-width:0; }
.ci-name { font-size:0.88rem; font-weight:600; display:block;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ci-price { font-size:0.8rem; color:var(--purple); font-weight:700; }
.checkout-item-link {
    background:var(--green); color:white; text-decoration:none;
    padding:6px 14px; border-radius:15px; font-size:0.8rem;
    font-weight:700; white-space:nowrap; flex-shrink:0;
}
.buy-btn {
    display:block; width:100%; padding:14px; border:none;
    border-radius:var(--radius-sm); color:white;
    font-size:1rem; font-weight:700; cursor:pointer;
    text-align:center; text-decoration:none;
    margin-bottom:8px; transition:transform 0.1s;
}
.buy-btn:active { transform:scale(0.97); }
.buy-walmart { background:#0071ce; }
.buy-kroger { background:#0268b8; }
.buy-share { background:var(--purple); }

/* Invite */
.invite-section { text-align:center; }
.invite-code {
    font-size:1.8rem; font-weight:800; letter-spacing:4px;
    color:var(--purple); margin:8px 0;
}
.invite-link { font-size:0.8rem; color:var(--text3); word-break:break-all; }
.invite-copy {
    margin-top:8px; padding:8px 20px; border:none;
    border-radius:20px; background:var(--purple-bg); color:var(--purple);
    font-weight:600; font-size:0.85rem; cursor:pointer;
}

/* Settings extras */
.setting-desc { font-size:0.8rem; color:var(--text3); margin-bottom:10px; }
.setting-input {
    width:100%; padding:10px; border:2px solid var(--border);
    border-radius:var(--radius-sm); font-size:0.9rem;
    margin-bottom:8px; outline:none;
}
.setting-input:focus { border-color:var(--purple-light); }
.kroger-connected { color:var(--green); font-weight:600; }
.kroger-btn {
    padding:10px 20px; border:none; border-radius:var(--radius-sm);
    background:#0268b8; color:white; font-weight:600; cursor:pointer;
}

/* ===== Setup Wizard ===== */
.wizard-bg {
    flex:1; display:flex; align-items:safe center; justify-content:center;
    background: linear-gradient(145deg, #7c3aed 0%, #4f46e5 50%, #2563eb 100%);
    padding:24px; position:relative;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.wizard-inner { width:100%; max-width:400px; position:relative; }

.wizard-brand {
    display:flex; align-items:center; justify-content:center; gap:10px;
    margin-bottom:24px;
}
.wiz-logo { width:44px; height:44px; }
.wiz-brand-name {
    font-family:'Nunito',sans-serif; font-size:1.6rem;
    font-weight:900; color:white;
}

.wizard-progress {
    display:flex; justify-content:center; gap:8px; margin-bottom:32px;
}
.wiz-dot {
    width:10px; height:10px; border-radius:50%;
    background:rgba(255,255,255,0.3); transition:all 0.3s;
}
.wiz-dot.active { background:white; transform:scale(1.2); }
.wiz-dot.done { background:var(--green); }

.wiz-step {
    display:none; animation:fadeUp 0.35s ease-out;
}
.wiz-step.active { display:block; }
.wiz-step h2 {
    font-family:'Nunito',sans-serif; color:white;
    font-size:1.5rem; font-weight:900; text-align:center; margin-bottom:4px;
}
.wiz-sub {
    color:rgba(255,255,255,0.7); text-align:center;
    font-size:0.9rem; margin-bottom:24px;
}

.wiz-options {
    display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.wiz-store-btn {
    padding:20px 12px; border-radius:var(--radius); border:2px solid transparent;
    text-align:center; font-weight:800; font-size:1.05rem;
    color:white; cursor:pointer; transition:all 0.2s;
}
.wiz-store-btn:active { transform:scale(0.95); }
.wiz-store-btn.selected { border-color:white; box-shadow:0 0 20px rgba(255,255,255,0.3); }
.wiz-store-logo { max-width:80%; max-height:50px; object-fit:contain; filter:brightness(0) invert(1); }
.wiz-store-name { font-size:1.1rem; font-weight:800; }

.wiz-input {
    width:100%; padding:14px 16px; border:none; border-radius:var(--radius-sm);
    background:rgba(255,255,255,0.15); color:white; font-size:1.1rem;
    outline:none; text-align:center; margin-bottom:12px;
}
.wiz-input::placeholder { color:rgba(255,255,255,0.5); }
.wiz-input:focus { background:rgba(255,255,255,0.25); }

.wiz-select {
    width:100%; padding:10px; border:none; border-radius:var(--radius-sm);
    background:rgba(255,255,255,0.15); color:white; font-size:0.9rem;
    outline:none; margin-bottom:12px;
}
.wiz-select option { color:var(--text); background:white; }

.wiz-distance {
    display:flex; align-items:center; gap:10px; margin-bottom:16px;
}
.wiz-distance label { color:rgba(255,255,255,0.7); font-size:0.85rem; white-space:nowrap; }
.wiz-distance .wiz-select { margin:0; flex:1; }

.wiz-locations {
    max-height:250px; overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.wiz-loc {
    padding:12px; margin-bottom:8px; border-radius:var(--radius-sm);
    background:rgba(255,255,255,0.1); color:white; cursor:pointer;
    border:2px solid transparent; transition:all 0.2s;
}
.wiz-loc:active { transform:scale(0.97); }
.wiz-loc.selected { background:rgba(255,255,255,0.25); border-color:rgba(255,255,255,0.5); }
.wiz-loc-name { font-weight:700; font-size:0.95rem; display:flex; align-items:center; justify-content:space-between; }
.wiz-loc-dist { font-size:0.75rem; opacity:0.7; font-weight:400; }
.wiz-loc-addr { font-size:0.8rem; opacity:0.7; margin-top:2px; }

.wiz-kids { margin-bottom:12px; }
.wiz-kid-item {
    display:flex; align-items:center; gap:10px; padding:10px;
    background:rgba(255,255,255,0.1); border-radius:var(--radius-sm);
    margin-bottom:6px; color:white;
}
.wiz-kid-item .av { font-size:1.5rem; }
.wiz-kid-item .nm { flex:1; font-weight:600; }
.wiz-kid-item .del {
    background:none; border:none; color:rgba(255,255,255,0.5);
    font-size:1.2rem; cursor:pointer;
}

.wiz-add-kid {
    display:flex; gap:8px; margin-bottom:16px;
}
.wiz-add-kid .wiz-input { flex:1; margin:0; text-align:left; }
.wiz-add-btn {
    padding:10px 20px; border:none; border-radius:var(--radius-sm);
    background:rgba(255,255,255,0.2); color:white;
    font-weight:700; cursor:pointer;
}

.wiz-next {
    display:block; width:100%; padding:14px; border:none;
    border-radius:var(--radius-sm); background:rgba(255,255,255,0.2);
    color:white; font-size:1rem; font-weight:700; cursor:pointer;
    margin-top:8px;
}

.wiz-budgets { margin-bottom:16px; }
.wiz-budget-row {
    display:flex; align-items:center; gap:10px; padding:8px 0;
    color:white; border-bottom:1px solid rgba(255,255,255,0.1);
}
.wiz-budget-row .av { font-size:1.3rem; }
.wiz-budget-row .nm { flex:1; font-weight:600; }
.wiz-budget-row input {
    width:80px; padding:8px; border:none; border-radius:8px;
    background:rgba(255,255,255,0.15); color:white;
    font-size:0.95rem; text-align:right; outline:none;
}
.wiz-budget-row input::placeholder { color:rgba(255,255,255,0.4); }

.wiz-filter-row {
    margin-bottom:20px;
}
.wiz-filter-row label {
    display:block; color:rgba(255,255,255,0.7);
    font-size:0.85rem; margin-bottom:4px;
}

.wiz-scope-row { margin-bottom:16px; }
.wiz-scope-row > label {
    display:block; color:rgba(255,255,255,0.7);
    font-size:0.85rem; margin-bottom:8px;
}
.wiz-scope-toggles {
    display:flex; gap:8px;
}
.wiz-scope-opt {
    flex:1; display:flex; align-items:center; justify-content:center;
    gap:6px; padding:10px 8px; border-radius:var(--radius-sm);
    background:rgba(255,255,255,0.1); color:white;
    font-size:0.85rem; font-weight:600; cursor:pointer;
    border:2px solid transparent; transition:all 0.2s;
}
.wiz-scope-opt:has(input:checked) {
    background:rgba(255,255,255,0.25);
    border-color:rgba(255,255,255,0.5);
}
.wiz-scope-opt input { display:none; }

.wiz-skip {
    display:block; width:100%; padding:12px; margin-top:12px;
    border:none; border-radius:var(--radius-sm);
    background:transparent; color:rgba(255,255,255,0.6);
    font-size:0.9rem; font-weight:600; cursor:pointer;
    text-align:center;
}

.wiz-go {
    display:block; width:100%; padding:16px; border:none;
    border-radius:var(--radius-sm); background:white; color:var(--purple);
    font-family:'Nunito',sans-serif; font-size:1.15rem; font-weight:900;
    cursor:pointer; transition:transform 0.1s;
}
.wiz-go:active { transform:scale(0.97); }

/* ===== Dashboard (post-setup) ===== */
.dash-status {
    background:white; border-radius:var(--radius); padding:14px 16px;
    margin-bottom:14px; box-shadow:0 1px 4px rgba(0,0,0,0.04);
}
.dash-status-info { font-weight:700; margin-bottom:10px; }
.dash-store-logo { height:28px; object-fit:contain; }
.dash-loc { display:block; font-size:0.8rem; color:var(--text3); font-weight:400; }
.dash-status-controls { display:flex; gap:8px; align-items:center; }
.dash-select {
    flex:1; padding:8px 10px; border:2px solid var(--border);
    border-radius:8px; font-size:0.85rem; outline:none; background:white;
}
.dash-select:focus { border-color:var(--purple-light); }
.dash-scope-toggles {
    display:flex; gap:14px; margin-top:10px; padding-top:10px;
    border-top:1px solid var(--border);
}
.scope-toggle {
    display:flex; align-items:center; gap:6px;
    font-size:0.85rem; font-weight:600; color:var(--text2);
    cursor:pointer;
}
.scope-toggle input[type="radio"] {
    width:16px; height:16px; accent-color:var(--purple);
    cursor:pointer;
}

/* Pending alert */
.pending-alert {
    display:flex; align-items:center; gap:10px;
    background:var(--orange); color:white;
    border-radius:var(--radius); padding:12px 16px;
    margin-bottom:12px; cursor:pointer;
    font-size:0.9rem; font-weight:600;
    animation:fadeUp 0.3s ease-out;
}
.pa-icon { font-size:1.2rem; }
.pending-alert span:nth-child(2) { flex:1; }
.pa-arrow { font-size:1rem; opacity:0.7; }

/* Quick actions */
.dash-actions {
    display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:8px;
}
.dash-action-card {
    display:flex; flex-direction:column; align-items:center;
    padding:18px 12px; border-radius:var(--radius);
    cursor:pointer; color:white; transition:transform 0.1s;
    text-align:center;
}
.dash-action-card:active { transform:scale(0.96); }
.dash-action-card.green { background:var(--green); }
.dash-action-card.purple { background:var(--purple); }
.da-icon { font-size:1.4rem; margin-bottom:4px; }
.da-label { font-size:0.95rem; font-weight:700; }
.da-hint { font-size:0.75rem; opacity:0.8; margin-top:2px; }

/* Device hint */
.device-hint {
    display:flex; align-items:center; gap:8px;
    background:var(--purple-bg); border-radius:var(--radius-sm);
    padding:10px 14px; margin-bottom:14px;
    font-size:0.8rem; color:var(--purple); font-weight:500;
    line-height:1.4;
}
.dh-icon { font-size:1.2rem; flex-shrink:0; }

/* Ready banner */
.ready-banner {
    display:flex; align-items:center; gap:10px;
    background:linear-gradient(135deg, #10b981, #059669);
    border-radius:var(--radius); padding:14px 16px;
    margin-bottom:16px; color:white; font-weight:600; font-size:0.9rem;
    animation: fadeUp 0.3s ease-out;
}
.ready-icon { font-size:1.3rem; }
.ready-banner span { flex:1; }
.ready-banner button {
    background:white; color:#059669; border:none;
    padding:8px 16px; border-radius:20px;
    font-weight:700; font-size:0.85rem; cursor:pointer;
    white-space:nowrap;
}

/* Add kid inline */
.add-kid-inline {
    display:flex; gap:8px; margin-top:10px;
}
.add-kid-inline input {
    flex:1; padding:8px 12px; border:2px solid var(--border);
    border-radius:var(--radius-sm); font-size:0.9rem; outline:none;
}
.add-kid-inline input:focus { border-color:var(--purple-light); }
.add-kid-inline button {
    padding:8px 16px; border:none; border-radius:var(--radius-sm);
    background:var(--purple); color:white; font-weight:600;
    font-size:0.85rem; cursor:pointer;
}

/* Kid row with invite */
.kid-invite-row {
    display:flex; align-items:center; gap:8px; padding:8px 0;
    border-bottom:1px solid var(--border);
}
.kid-invite-row:last-child { border:none; }
.kid-invite-row .av { font-size:1.3rem; }
.kid-invite-row .nm { font-weight:600; font-size:0.9rem; min-width:60px; }
.kid-invite-row .budget-input {
    width:70px; padding:5px 6px; border:2px solid var(--border);
    border-radius:6px; font-size:0.85rem; text-align:right;
}
.kid-invite-row .set-btn {
    padding:5px 10px; border:none; border-radius:6px;
    background:var(--purple-bg); color:var(--purple);
    font-size:0.75rem; font-weight:600; cursor:pointer;
}
.kid-invite-row .share-btn {
    padding:5px 10px; border:none; border-radius:6px;
    background:var(--green-light); color:#065f46;
    font-size:0.75rem; font-weight:600; cursor:pointer;
}
.kid-invite-row .del-btn {
    padding:5px 8px; border:none; border-radius:6px;
    background:var(--red-light); color:var(--red);
    font-size:0.75rem; cursor:pointer;
}
/* Family code section */
.family-code-section {
    background:linear-gradient(135deg, var(--purple-bg), #f0e7ff);
    border-radius:var(--radius); padding:16px; margin-top:12px; text-align:center;
    border:1px solid rgba(124,58,237,0.1);
}
.fc-header {
    font-size:0.85rem; color:var(--text2); font-weight:600; margin-bottom:8px;
}
.fc-code {
    font-family:'Nunito',monospace; font-size:2rem; font-weight:900;
    letter-spacing:5px; color:var(--purple); margin-bottom:4px;
}
.fc-timer {
    font-size:0.75rem; color:var(--text3); margin-bottom:10px;
}
.fc-activate-btn {
    padding:10px 24px; border:none; border-radius:25px;
    background:var(--purple); color:white;
    font-size:0.9rem; font-weight:700; cursor:pointer;
    transition:transform 0.1s;
}
.fc-activate-btn:active { transform:scale(0.95); }
.fc-share-btn {
    padding:10px 24px; border:none; border-radius:25px;
    background:var(--green); color:white;
    font-size:0.9rem; font-weight:700; cursor:pointer;
    transition:transform 0.1s;
}
.fc-share-btn:active { transform:scale(0.95); }

/* Kid dashboard rows */
.kid-dash-row {
    display:flex; align-items:center; gap:12px; padding:12px;
    background:white; border-radius:var(--radius-sm);
    margin-bottom:8px; box-shadow:0 1px 4px rgba(0,0,0,0.04);
}
.kd-av { font-size:1.6rem; }
.kd-info { flex:1; }
.kd-name { font-weight:700; font-size:0.95rem; display:block; }
.kd-budget-edit {
    display:flex; align-items:center; gap:2px;
    font-size:0.9rem; font-weight:600; color:var(--text2);
}
.kd-budget-edit input {
    width:65px; padding:5px 6px; border:2px solid var(--border);
    border-radius:6px; font-size:0.85rem; text-align:right; outline:none;
}
.kd-budget-edit input:focus { border-color:var(--purple-light); }

/* Clickable title */
.dash-title.clickable { cursor:pointer; }
.dash-title.clickable:hover h3 { color:var(--purple); }

/* Parent controls */
.control-row { margin-bottom:12px; }
.control-row label { display:block; font-size:0.8rem; font-weight:600; color:var(--text2); margin-bottom:4px; }
.control-row select, .control-row input {
    width:100%; padding:10px; border:2px solid var(--border);
    border-radius:var(--radius-sm); font-size:0.9rem; outline:none;
    background:white;
}
.control-row select:focus, .control-row input:focus { border-color:var(--purple-light); }
.zip-row { display:flex; gap:8px; }
.zip-row input { flex:1; }
.zip-row button {
    padding:10px 16px; border:none; border-radius:var(--radius-sm);
    background:var(--purple); color:white; font-weight:600; cursor:pointer;
    white-space:nowrap;
}
.location-result { font-size:0.8rem; color:var(--text2); margin-top:6px; }
.location-result .loc-item {
    padding:6px 0; cursor:pointer; border-bottom:1px solid var(--border);
}
.location-result .loc-item:hover { color:var(--purple); }

/* Budget bar */
.budget-bar {
    display:flex; align-items:center; gap:10px;
    padding:8px 14px; background:white; border-bottom:1px solid var(--border);
    flex-shrink:0;
}
.budget-text { font-size:0.8rem; font-weight:600; color:var(--text2); white-space:nowrap; }
.budget-track {
    flex:1; height:8px; background:var(--border);
    border-radius:4px; overflow:hidden;
}
.budget-fill {
    height:100%; background:var(--green); border-radius:4px;
    transition:width 0.3s ease;
}
.budget-fill.over { background:var(--red); }

/* Kid budget settings */
.budget-row {
    display:flex; align-items:center; gap:10px; padding:8px 0;
    border-bottom:1px solid var(--border);
}
.budget-row:last-child { border:none; }
.budget-row .av { font-size:1.3rem; }
.budget-row .nm { flex:1; font-weight:600; font-size:0.9rem; }
.budget-row input {
    width:80px; padding:6px 8px; border:2px solid var(--border);
    border-radius:var(--radius-sm); font-size:0.9rem; text-align:right;
}
.budget-row button {
    padding:6px 12px; border:none; border-radius:var(--radius-sm);
    background:var(--purple); color:white; font-size:0.8rem;
    font-weight:600; cursor:pointer;
}

/* Kid search */
.kid-search {
    padding:6px 12px; background:white; border-bottom:1px solid var(--border);
    flex-shrink:0;
}
.kid-search input {
    width:100%; padding:8px 12px; border:2px solid var(--border);
    border-radius:20px; font-size:0.85rem; outline:none;
}
.kid-search input:focus { border-color:var(--purple-light); }

/* Search row */
.search-row { margin-bottom:10px; }
.search-row input {
    width:100%; padding:10px; border:2px solid var(--border);
    border-radius:var(--radius-sm); font-size:0.9rem; outline:none;
}
.search-row input:focus { border-color:var(--purple-light); }

/* Picks button in swipe header */
.picks-btn {
    background:var(--purple-bg); color:var(--purple); border:none;
    padding:6px 14px; border-radius:20px;
    font-size:0.8rem; font-weight:700; cursor:pointer;
    display:flex; align-items:center; gap:4px;
}
.picks-btn span {
    background:var(--purple); color:white;
    font-size:0.7rem; width:20px; height:20px;
    border-radius:50%; display:inline-flex;
    align-items:center; justify-content:center;
}

/* Picks body */
.picks-body {
    flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding:12px; padding-bottom:40px;
}
.pick-item {
    display:flex; align-items:center; background:white;
    border-radius:var(--radius-sm); padding:10px;
    margin-bottom:8px; box-shadow:0 1px 4px rgba(0,0,0,0.04); gap:10px;
}
.pick-thumb {
    width:50px; height:50px; border-radius:10px; background:var(--bg);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; overflow:hidden;
}
.pick-thumb img { width:100%; height:100%; object-fit:cover; }
.pick-info { flex:1; min-width:0; }
.pick-name { font-weight:600; font-size:0.88rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pick-meta { font-size:0.75rem; color:var(--text3); }
.pick-status {
    font-size:0.65rem; font-weight:700; padding:3px 8px;
    border-radius:12px; text-transform:uppercase;
}
.pick-status.pending { background:#fef3c7; color:#92400e; }
.pick-status.approved { background:var(--green-light); color:#065f46; }
.pick-status.rejected { background:var(--red-light); color:#991b1b; }
.pick-remove {
    background:var(--red-light); color:var(--red); border:none;
    width:32px; height:32px; border-radius:50%;
    font-size:0.9rem; cursor:pointer; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
}