
    :root { --gold:#ffc000; --sheetH: 60vh; }
    body { font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
    .card { transition: transform .2s var(--tw-ease-spring), box-shadow .2s ease; }
    .card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.07); }
    .drawer { transform: translateX(100%); transition: transform .3s var(--tw-ease-spring); }
    .drawer.open { transform: translateX(0); }
    .carousel { position: relative; overflow: hidden; }
    .slides { display: flex; width: 200%; transition: transform .4s var(--tw-ease-spring); }
    .carousel img { width: 100%; height: 180px; object-fit: cover; display: block; }
    @media (min-width: 640px){ .carousel img { height: 220px; } }
    .no-scrollbar::-webkit-scrollbar{display:none} .no-scrollbar{scrollbar-width:none;-ms-overflow-style:none}
    .btn { transition: transform .12s ease; } .btn:active { transform: scale(.98); }
    .fav-on { color: #ef4444; } .fav-glow { box-shadow: 0 0 0 2px rgba(239,68,68,.35) inset; }
    .tab-pill[aria-selected="true"] { background: rgba(0,0,0,.06); }
    .badge { font-size: 11px; padding: 4px 8px; border-radius: 10px; }
    .pill { font-size: 12px; padding: 6px 10px; border-radius: 9999px; background:#f1f5f9; white-space: nowrap; }
    .snap-x-mandatory{ scroll-snap-type:x mandatory; -webkit-overflow-scrolling: touch; }
    .snap-start{ scroll-snap-align: start; }
    .sheet { transform: translateY(100%); transition: transform .32s var(--tw-ease-spring), height .2s ease; }
    .sheet.open { transform: translateY(0); }
    .grabber { width: 44px; height: 5px; border-radius: 999px; background: rgba(0,0,0,.15); }
    .backdrop { background: radial-gradient(1200px 600px at 50% 100%, rgba(0,0,0,.35), rgba(0,0,0,.55)); }
    .glass { backdrop-filter: blur(10px); background: rgba(255,255,255,.9); }

    /* Chat polish */
    .chat-enter { animation: chatEnter .24s var(--tw-ease-spring) both; }
    @keyframes chatEnter { from { transform: translateY(6px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
    .msg-b { background: linear-gradient(180deg, #ffd54d, #ffc000); color:#111; }
    .msg-a { background: #fff; border: 1px solid rgba(0,0,0,.08); }
    .ring-online { box-shadow: 0 0 0 3px rgba(16,185,129,.2); }
