:root{
    --bg1:#171020; --bg2:#241630; --lamp:rgba(232,168,107,.14);
    --card:#251a2f; --card-border:rgba(242,194,126,.16);
    --amber:#e8a86b; --gold:#f2c27e; --rose:#e2708d; --rose-deep:#c25574;
    --text:#f5ecdf; --muted:#a8909c; --ink:#171020;
    --radius:20px;
    --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
    --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    /* pebble gem tones */
    --pb-rose1:#e8aebf; --pb-rose2:#c97d95; --pb-rose3:#8f4f66;
    --pb-ambr1:#f0c690; --pb-ambr2:#d99c58; --pb-ambr3:#96622f;
    --pb-jade1:#a8cbb4; --pb-jade2:#76a687; --pb-jade3:#48705a;
    --pb-laps1:#a9b9d6; --pb-laps2:#7288b0; --pb-laps3:#485d85;
    --pb-moon1:#e6ddea; --pb-moon2:#bfb2c9; --pb-moon3:#847992;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    font-family:var(--sans);
    background:
      radial-gradient(900px 600px at 12% -8%, var(--lamp), transparent 60%),
      radial-gradient(800px 620px at 108% 112%, rgba(194,85,116,.13), transparent 55%),
      linear-gradient(165deg, var(--bg1), var(--bg2) 70%, #2a1830);
    background-attachment:fixed;
    color:var(--text); min-height:100%;
    -webkit-font-smoothing:antialiased;
  }
  #app{max-width:520px;margin:0 auto;padding:calc(16px + env(safe-area-inset-top)) 18px 90px;position:relative;z-index:1}
  /* personal background: fixed layer under the UI, scrimmed for readability
     (fixed div instead of background-attachment — iOS ignores the latter) */
  #bgLayer{position:fixed;inset:0;z-index:0;pointer-events:none;
    background:center/cover no-repeat;}
  #bgLayer::after{content:'';position:absolute;inset:0;
    background:linear-gradient(rgba(23,16,32,.78), rgba(23,16,32,.88) 65%, rgba(23,16,32,.92));}
  #bgLayer.color-bg::after{display:none}   /* color mode: vignette only, no photo scrim */

  /* ---------- header ---------- */
  header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
  .logo{font-family:var(--serif);font-size:24px;font-weight:600;letter-spacing:.3px;display:flex;align-items:center;gap:9px}
  .logo em{font-style:normal;color:var(--gold)}
  .logo svg{flex-shrink:0}
  .hdr-right{display:flex;gap:8px;align-items:center}
  .user-switch{display:flex;gap:5px;background:rgba(255,255,255,.05);border:1px solid var(--card-border);border-radius:999px;padding:4px}
  .user-chip{width:36px;height:36px;border-radius:50%;border:2px solid transparent;font-size:15px;font-weight:700;
    display:flex;align-items:center;justify-content:center;cursor:pointer;background:rgba(255,255,255,.07);color:var(--text);transition:.2s}
  .user-chip.active{border-color:var(--gold);transform:scale(1.06)}
  .gear{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.05);border:1px solid var(--card-border);
    color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center}
  .gear svg{width:17px;height:17px;fill:currentColor}

  .hello{font-size:14px;color:var(--muted);margin-bottom:16px;display:flex;align-items:center;justify-content:space-between;gap:10px}
  .hello b{color:var(--text);font-weight:600}
  .boutique-btn{background:rgba(255,255,255,.06);border:1px solid var(--card-border);color:var(--gold);
    border-radius:999px;padding:7px 14px;font-size:12.5px;font-weight:600;cursor:pointer;letter-spacing:.3px}

  /* ---------- avatar ---------- */
  .avatar{width:44px;height:44px;border-radius:50%;font-size:18px;font-weight:700;font-family:var(--serif);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--ink)}

  /* ---------- stash cards ---------- */
  .stash-card{
    background:linear-gradient(170deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
    border:1px solid var(--card-border);border-radius:var(--radius);
    padding:18px;margin-bottom:16px;
    box-shadow:0 10px 30px rgba(10,4,14,.45);
  }
  .stash-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
  .stash-top h2{font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:.2px}
  .stash-top .sub{font-size:12px;color:var(--muted);margin-top:2px}
  .pair-menu-btn{margin-left:auto;background:none;border:none;color:var(--muted);font-size:19px;cursor:pointer;
    width:34px;height:34px;border-radius:50%;line-height:1}
  .pair-menu-btn:active{background:rgba(255,255,255,.08)}
  .stash-body{display:flex;align-items:center;gap:16px}

  .vault{width:106px;height:112px;flex-shrink:0;position:relative;cursor:pointer;transition:transform .2s;display:block;background:none;border:none;padding:0}
  .vault:active{transform:scale(.95)}
  .vault svg{display:block;width:100%;height:100%}
  .vault.glow svg{filter:drop-shadow(0 0 14px rgba(242,194,126,.55));animation:jarGlow 2.6s ease-in-out infinite}
  @keyframes jarGlow{0%,100%{filter:drop-shadow(0 0 8px rgba(242,194,126,.35))}50%{filter:drop-shadow(0 0 20px rgba(242,194,126,.7))}}
  .vault.locked{cursor:default}
  .vault.locked svg{filter:saturate(.35) brightness(.62)}
  .vault .lock-badge{position:absolute;right:2px;bottom:6px;width:26px;height:26px;border-radius:50%;
    background:#3a2a3f;border:1px solid var(--card-border);display:flex;align-items:center;justify-content:center;font-size:12px}
  .vault .spark{position:absolute;top:2px;right:6px;font-size:14px;animation:twinkle 1.8s infinite}
  @keyframes twinkle{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
  .vault.bomb{animation:bombPulse 1.1s ease-in-out infinite;cursor:pointer}
  @keyframes bombPulse{0%,100%{transform:rotate(-2deg) scale(1)}50%{transform:rotate(2deg) scale(1.05)}}
  .vault.bomb svg{filter:drop-shadow(0 0 18px rgba(226,112,141,.75))}

  .stash-info{flex:1;min-width:0}
  .status-line{font-family:var(--serif);font-size:16px;margin-bottom:5px;font-weight:600;letter-spacing:.2px}
  .status-sub{font-size:12.5px;color:var(--muted);line-height:1.5}
  .countdown{font-variant-numeric:tabular-nums;color:var(--gold);font-weight:700}

  .card-actions{display:flex;gap:10px;margin-top:14px}
  .btn{border:none;border-radius:13px;padding:12px 16px;font-size:14px;font-weight:700;cursor:pointer;
    transition:transform .12s, filter .2s;font-family:var(--sans)}
  .btn:active{transform:scale(.97)}
  .btn-love{background:linear-gradient(135deg,var(--rose),var(--rose-deep));color:#fff;flex:1;box-shadow:0 6px 18px rgba(194,85,116,.35)}
  .btn-ghost{background:rgba(255,255,255,.07);color:var(--muted);border:1px solid var(--card-border)}
  .btn-gold{background:linear-gradient(135deg,var(--gold),var(--amber));color:#41290f}
  .waiting-hint{font-size:12px;color:var(--muted);margin-top:10px;display:flex;align-items:center;gap:7px}
  .waiting-hint b{color:var(--gold)}
  .waiting-hint .pb{transform:scale(.72);margin:-4px -2px}

  .pending-banner{background:rgba(242,194,126,.08);border:1px solid rgba(242,194,126,.35);border-radius:13px;
    padding:12px 14px;font-size:13px;margin-top:12px;line-height:1.5}
  .pending-banner .row{display:flex;gap:8px;margin-top:8px}

  .add-card{border:1.5px dashed rgba(242,194,126,.28);border-radius:var(--radius);padding:17px;text-align:center;
    color:var(--muted);font-size:14px;cursor:pointer;background:transparent;width:100%;font-family:var(--sans)}

  .sync-chip{font-size:11px;color:var(--muted);border:1px solid var(--card-border);border-radius:999px;padding:3px 10px}
  .sync-chip.on{color:#9fd6a8;border-color:rgba(159,214,168,.35)}

  /* ---------- pebbles ---------- */
  .pb{display:inline-block;width:26px;height:21px;position:relative;
    border-radius:48% 52% 55% 45% / 58% 50% 50% 42%;
    background:radial-gradient(circle at 32% 28%, var(--p1), var(--p2) 55%, var(--p3));
    box-shadow:inset 0 -3px 5px rgba(0,0,0,.28), inset 0 2px 3px rgba(255,255,255,.35), 0 2px 4px rgba(10,4,14,.5)}
  .pb.t0{--p1:var(--pb-rose1);--p2:var(--pb-rose2);--p3:var(--pb-rose3)}
  .pb.t1{--p1:var(--pb-ambr1);--p2:var(--pb-ambr2);--p3:var(--pb-ambr3)}
  .pb.t2{--p1:var(--pb-jade1);--p2:var(--pb-jade2);--p3:var(--pb-jade3)}
  .pb.t3{--p1:var(--pb-laps1);--p2:var(--pb-laps2);--p3:var(--pb-laps3)}
  .pb.t4{--p1:#c5aed6;--p2:#977ab8;--p3:#65487f}
  .pb.t5{--p1:var(--pb-moon1);--p2:var(--pb-moon2);--p3:var(--pb-moon3)}
  .pb.r1{border-radius:55% 45% 48% 52% / 45% 55% 45% 55%}
  .pb.r2{border-radius:42% 58% 50% 50% / 52% 44% 56% 48%}

  /* ---------- modal sheet ---------- */
  .overlay{position:fixed;inset:0;height:100vh;height:100dvh;background:rgba(14,7,18,.74);backdrop-filter:blur(6px);
    display:flex;z-index:50;
    overflow-y:auto;overscroll-behavior:contain;padding:24px 16px;
    animation:fadeIn .2s}
  @keyframes fadeIn{from{opacity:0}to{opacity:1}}
  .sheet{background:linear-gradient(172deg,#2e1e35,#221228);width:100%;max-width:520px;
    margin:auto;   /* centered; when taller than the screen the overlay scrolls, keeping the gap all round */
    border-radius:24px;padding:24px 20px;
    border:1px solid var(--card-border);
    animation:slideUp .28s cubic-bezier(.2,.9,.3,1.08)}
  @keyframes slideUp{from{transform:translateY(60px);opacity:0}to{transform:none;opacity:1}}
  .sheet h3{font-family:var(--serif);font-size:20px;font-weight:600;margin-bottom:4px}
  .sheet .to{font-size:13px;color:var(--muted);margin-bottom:18px;line-height:1.5}
  .sheet-close{float:right;background:rgba(255,255,255,.08);border:none;color:var(--muted);
    width:32px;height:32px;border-radius:50%;font-size:14px;cursor:pointer}

  .section-label{font-size:11px;text-transform:uppercase;letter-spacing:1.4px;color:var(--muted);margin-bottom:10px}

  /* composer */
  .note-row{display:flex;gap:10px;margin-bottom:16px}
  .note-side{display:flex;flex-direction:column;gap:8px}
  .note-side .btn{padding:10px 14px;font-size:13px}
  .note-input{flex:1;background:rgba(255,255,255,.06);border:1px solid var(--card-border);border-radius:14px;
    padding:13px 14px;color:var(--text);font-size:15px;outline:none;font-family:var(--serif);resize:none;line-height:1.5;
    -webkit-user-select:text;user-select:text}
  .note-input::placeholder{color:#8d7484;font-family:var(--sans);font-size:13.5px}
  .note-input:focus{border-color:rgba(242,194,126,.45)}
  .emoji-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
  .emoji-btn{font-size:26px;width:52px;height:52px;border-radius:15px;border:1px solid var(--card-border);
    background:rgba(255,255,255,.05);cursor:pointer;transition:transform .12s}
  .emoji-btn:active{transform:scale(1.22)}
  .phrase-scroll{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:14px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .phrase-scroll::-webkit-scrollbar{display:none}
  .phrase-chip{background:rgba(255,255,255,.06);border:1px solid var(--card-border);color:var(--text);
    border-radius:999px;padding:9px 15px;font-size:13px;cursor:pointer;white-space:nowrap;flex-shrink:0;font-family:var(--serif)}
  .phrase-chip:active{background:rgba(226,112,141,.25)}
  .attach-row{display:flex;gap:8px;margin-bottom:18px}
  .attach-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
    background:rgba(255,255,255,.05);border:1px solid var(--card-border);color:var(--muted);
    border-radius:14px;padding:11px 6px;font-size:11.5px;font-weight:600;cursor:pointer;font-family:var(--sans)}
  .attach-btn .ic{font-size:19px}
  .attach-btn:active{background:rgba(226,112,141,.15)}
  .attach-btn.rec{color:#fff;background:rgba(226,112,141,.3);border-color:var(--rose)}
  .pour-photo{width:100%;max-height:280px;object-fit:cover;border-radius:14px;display:block;margin-top:6px}

  /* flair strip */
  .flair-strip{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:6px;scrollbar-width:none}
  .flair-strip::-webkit-scrollbar{display:none}
  .flair-chip{display:flex;flex-direction:column;align-items:center;gap:3px;flex-shrink:0;
    background:rgba(255,255,255,.05);border:1px solid var(--card-border);color:var(--muted);
    border-radius:14px;padding:9px 13px;font-size:11px;font-weight:600;cursor:pointer;min-width:64px;font-family:var(--sans)}
  .flair-chip .fe{font-size:21px}
  .flair-chip.sel{border-color:var(--gold);background:rgba(242,194,126,.13);color:var(--text)}
  .flair-note{font-size:11.5px;color:var(--muted);margin-bottom:16px;line-height:1.5}
  .flair-note b{color:var(--gold)}
  .lovers-flair{display:flex;align-items:center;gap:11px;background:rgba(226,112,141,.08);
    border:1px solid rgba(226,112,141,.3);border-radius:14px;padding:12px 14px;margin-bottom:16px;
    font-size:13px;cursor:pointer;color:var(--text);width:100%;text-align:left;font-family:var(--sans)}
  .lovers-flair .big{font-size:20px}
  .lovers-flair small{display:block;color:var(--muted);margin-top:2px;font-size:11.5px;line-height:1.4}
  .lovers-flair.armed{border-color:var(--gold);background:rgba(242,194,126,.1)}
  .lovers-flair.rec{border-color:var(--rose);background:rgba(226,112,141,.25)}

  .send-extra{display:flex;flex-direction:column;gap:10px;margin-bottom:8px}
  .extra-btn{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.05);
    border:1px solid var(--card-border);color:var(--text);border-radius:15px;padding:13px 15px;
    font-size:13.5px;font-weight:600;cursor:pointer;text-align:left;width:100%;font-family:var(--sans)}
  .extra-btn small{color:var(--muted);font-weight:400;margin-left:auto;flex-shrink:0}
  .more-toggle{background:none;border:none;color:var(--muted);font-size:12.5px;cursor:pointer;padding:8px 0;width:100%;text-align:center;font-family:var(--sans)}

  .lock-opts{display:flex;gap:10px;margin:14px 0 20px}
  .lock-opt{flex:1;padding:13px 8px;border-radius:15px;border:1px solid var(--card-border);
    background:rgba(255,255,255,.05);color:var(--text);cursor:pointer;text-align:center;font-size:13px;font-weight:600;font-family:var(--sans)}
  .lock-opt.sel{border-color:var(--gold);background:rgba(242,194,126,.13)}
  .lock-opt.disabled{opacity:.4;cursor:default}
  .lock-opt small{display:block;color:var(--muted);font-weight:400;margin-top:3px;font-size:10.5px}
  .person-opts{display:flex;flex-direction:column;gap:10px;margin:14px 0 6px}
  .person-opt{display:flex;align-items:center;gap:12px;padding:12px;border-radius:15px;
    border:1px solid var(--card-border);background:rgba(255,255,255,.05);cursor:pointer;color:var(--text);font-size:15px;width:100%;font-family:var(--sans)}
  .person-opt.sel{border-color:var(--rose);background:rgba(226,112,141,.12)}

  .field{margin-bottom:14px}
  .field label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:1.3px;color:var(--muted);margin-bottom:7px}
  .field input{width:100%;background:rgba(255,255,255,.06);border:1px solid var(--card-border);border-radius:13px;
    padding:12px 14px;color:var(--text);font-size:15px;outline:none;font-family:var(--sans)}
  .field input:focus{border-color:rgba(242,194,126,.45)}

  /* ---------- boutique ---------- */
  .store-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;margin-bottom:20px}
  .store-tile{border:1px solid var(--card-border);border-radius:15px;padding:11px 8px;text-align:center;background:rgba(255,255,255,.04);position:relative}
  .store-tile .jar-mini{display:flex;justify-content:center}
  .store-tile .nm{font-size:11px;margin-top:6px}
  .store-tile .pr{font-size:10.5px;color:var(--gold);margin-top:3px;font-weight:700}
  .store-tile.active-item{border-color:var(--gold);background:rgba(242,194,126,.1)}
  .mini-btn{border:none;border-radius:999px;padding:5px 11px;font-size:11px;cursor:pointer;background:rgba(255,255,255,.12);color:var(--text);margin-top:7px;font-family:var(--sans)}
  .duo-card{background:linear-gradient(135deg,rgba(226,112,141,.12),rgba(242,194,126,.1));
    border:1px solid rgba(242,194,126,.3);border-radius:16px;padding:16px;margin-bottom:14px}
  .duo-card h4{font-family:var(--serif);font-size:17px;margin-bottom:6px}
  .duo-card .perks{font-size:13px;color:var(--muted);line-height:1.9;margin-bottom:12px}
  .gift-card{background:linear-gradient(135deg,rgba(242,194,126,.12),rgba(226,112,141,.12));
    border:1px dashed var(--gold);border-radius:12px;padding:10px 12px;margin-top:6px;font-size:14px}
  .stat-table{width:100%;font-size:13px;margin-top:12px;border-collapse:collapse}
  .stat-table td{padding:5px 4px;border-bottom:1px solid var(--card-border);color:var(--muted)}
  .stat-table td:last-child{text-align:right;color:var(--text)}
  .keep-line{font-size:13.5px;padding:8px 0;border-bottom:1px solid var(--card-border);text-align:left;font-family:var(--serif)}
  .keep-line .kd{color:var(--muted);font-size:11px;margin-top:2px;font-family:var(--sans)}

  /* ---------- toast + fly ---------- */
  #toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(90px);
    background:rgba(23,10,26,.94);border:1px solid var(--card-border);color:var(--text);
    padding:12px 20px;border-radius:999px;font-size:13.5px;z-index:99;transition:transform .3s;white-space:nowrap}
  #toast.show{transform:translateX(-50%) translateY(0)}
  .fly-pb{position:fixed;z-index:98;pointer-events:none;animation:flyUp 1s cubic-bezier(.3,.6,.4,1) forwards}
  @keyframes flyUp{to{transform:translateY(-130px) scale(.4);opacity:0}}

  /* ---------- pour-out scene ---------- */
  .pour-scene{position:fixed;inset:0;z-index:60;background:rgba(15,6,19,.93);backdrop-filter:blur(8px);
    display:flex;flex-direction:column;align-items:center;overflow-y:auto;overflow-x:hidden;animation:fadeIn .25s}
  .pour-stage{position:relative;width:100%;max-width:520px;padding:40px 20px 0;text-align:center;flex-shrink:0}
  .big-jar{width:130px;margin:0 auto;animation:jarShake .6s ease-in-out}
  .big-jar svg{width:100%;filter:drop-shadow(0 0 22px rgba(242,194,126,.4))}
  @keyframes jarShake{0%{transform:rotate(0)}20%{transform:rotate(-8deg) scale(1.04)}
    40%{transform:rotate(7deg) scale(1.08)}60%{transform:rotate(-5deg) scale(1.1)}
    80%{transform:rotate(3deg) scale(1.06)}100%{transform:rotate(0) scale(1)}}
  .pour-title{font-family:var(--serif);font-size:22px;font-weight:600;margin-top:12px}
  .pour-sub{font-size:13px;color:var(--muted);margin-top:5px;margin-bottom:8px}

  .pour-list{width:100%;max-width:520px;padding:0 20px 40px}
  .pour-card{background:rgba(255,255,255,.05);border:1px solid var(--card-border);border-radius:16px;
    padding:14px 16px;margin-bottom:11px;display:flex;gap:13px;align-items:center;
    opacity:0;animation:cardIn .5s cubic-bezier(.2,.9,.3,1.12) forwards}
  @keyframes cardIn{from{opacity:0;transform:translateY(-30px) scale(.9)}to{opacity:1;transform:none}}
  .pour-card.past{animation:none;opacity:.55}
  .pour-card.special{border-color:var(--gold);box-shadow:0 0 16px rgba(242,194,126,.3)}
  .pour-emoji{font-size:32px}
  .pour-text{flex:1;text-align:left;min-width:0}
  .pour-text .msg{font-family:var(--serif);font-size:15.5px;line-height:1.5}
  .pour-text .meta{font-size:11px;color:var(--muted);margin-top:4px;font-family:var(--sans)}
  .pour-done{width:100%;max-width:520px;padding:0 20px 46px}
  .past-label{font-size:11px;text-transform:uppercase;letter-spacing:1.4px;color:var(--muted);margin:20px 0 12px;text-align:left}
  .empty-state{text-align:center;padding:30px 20px 10px;color:var(--muted);font-size:15px;line-height:1.6;font-family:var(--serif)}
  .empty-state .big{font-size:50px;margin-bottom:12px}
  .empty-pet-wrap{display:inline-block;padding:26px 40px;margin-bottom:4px;border-radius:50%;
    background:radial-gradient(closest-side, rgba(245,226,193,.30), rgba(245,226,193,0))}
  .empty-pet{width:138px;height:auto;display:block;filter:drop-shadow(0 4px 9px rgba(0,0,0,.4))}

  /* flair particles */
  .particle{position:fixed;z-index:97;pointer-events:none;font-size:30px}
  .pt-balloon{animation:ptRise 4.2s ease-in forwards;bottom:-50px}
  @keyframes ptRise{0%{transform:translateY(0) translateX(0);opacity:0}8%{opacity:1}
    50%{transform:translateY(-45vh) translateX(var(--sway,20px))}
    100%{transform:translateY(-105vh) translateX(calc(var(--sway,20px) * -1));opacity:.9}}
  .pt-fall{animation:ptFall 3.6s ease-in-out forwards;top:-50px}
  @keyframes ptFall{0%{transform:translateY(0) rotate(0);opacity:0}10%{opacity:1}
    100%{transform:translateY(108vh) translateX(var(--sway,30px)) rotate(var(--rot,200deg));opacity:.85}}
  .pt-conf{width:9px;height:14px;border-radius:2px;font-size:0}
  .pt-burst{animation:ptBurst 1.5s ease-out forwards}
  @keyframes ptBurst{0%{transform:scale(.2);opacity:0}15%{opacity:1;transform:scale(1.35)}100%{transform:scale(.5) translate(var(--tx,0),var(--ty,-60px));opacity:0}}
  .fw-canvas{position:fixed;inset:0;z-index:97;pointer-events:none}
  .emoji-pour{position:fixed;inset:0;z-index:62;pointer-events:none}
  .pour-tally{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:10px}
  .pour-tally .etally{font-size:21px;line-height:1;display:inline-flex;align-items:center;gap:5px;
    background:rgba(255,255,255,.06);border:1px solid var(--card-border);border-radius:999px;padding:5px 12px}
  .pour-tally .etally b{font-family:var(--serif);font-size:14px;color:var(--gold);font-weight:600}

  /* ---------- favorites + scrapbook ---------- */
  .fav-btn{background:none;border:none;font-size:20px;cursor:pointer;color:#6f5a68;
    flex-shrink:0;padding:4px 6px;line-height:1;transition:transform .15s;align-self:flex-start}
  .fav-btn.on{color:var(--gold)}
  .fav-btn:active{transform:scale(1.35)}
  .keep-line{display:flex;align-items:flex-start;gap:8px}
  .keep-line .kl-body{flex:1;min-width:0}
  .keep-thumb{width:46px;height:46px;object-fit:cover;border-radius:9px;flex-shrink:0;background:rgba(0,0,0,.25)}
  .scrap-scene{position:fixed;inset:0;z-index:60;background:rgba(15,6,19,.95);backdrop-filter:blur(8px);
    overflow-y:auto;animation:fadeIn .25s}
  .scrap-wrap{max-width:520px;margin:0 auto;padding:calc(22px + env(safe-area-inset-top)) 18px 60px}
  .scrap-head{text-align:center;margin-bottom:20px}
  .scrap-head h2{font-family:var(--serif);font-size:24px;font-weight:600}
  .scrap-head .sub{font-size:12.5px;color:var(--muted);margin-top:5px;line-height:1.5}
  .scrap-grid{column-count:2;column-gap:12px}
  .scrap-tile{break-inside:avoid;background:rgba(255,255,255,.05);border:1px solid var(--card-border);
    border-radius:16px;padding:12px;margin-bottom:12px}
  .scrap-tile img{width:100%;border-radius:10px;display:block;margin-bottom:8px}
  .scrap-tile .quote{font-family:var(--serif);font-size:14.5px;line-height:1.55}
  .scrap-tile .cap{font-family:var(--serif);font-size:13px;line-height:1.5;color:var(--text)}
  .scrap-tile .who{display:flex;align-items:center;justify-content:space-between;gap:6px;
    font-size:10.5px;color:var(--muted);margin-top:8px;font-family:var(--sans)}
  .scrap-tile .fav-btn{font-size:16px;padding:2px 4px}
  .scrap-tile.wide{column-span:all}

  /* image caption step */
  .img-preview{width:100%;max-height:300px;object-fit:contain;border-radius:14px;display:block;
    margin-bottom:12px;background:rgba(0,0,0,.25)}

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:.001s !important;animation-delay:0s !important;transition:none !important}
  }