:root {
  color-scheme: dark;
  --paper:#000000;
  --surface:#1E1E1E;
  --surface-2:#292929;
  --ink:#FFFFFF;
  --muted:#9A9A9A;
  --line:rgba(255,255,255,.16);
  --line-soft:rgba(255,255,255,.10);
  --green:#39D353;
  --violet:#5C33F6;
  --orange:#E8793C;
  --red:#5A2029;
  --blue:#182D4B;
  --berry:var(--violet);
  --berry-dark:#4823E2;
  --berry-soft:#261C4B;
  --sage:#172D22;
  --sage-ink:var(--green);
  --gold:var(--orange);
  --radius:28px;
  --radius-sm:24px;
  --shadow:none;
  --shadow-sm:none;
  font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
* { box-shadow:none!important; text-shadow:none!important; background-image:none!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; }
html,body { margin:0; min-width:320px; color:var(--ink); background:#000; -webkit-font-smoothing:antialiased; }
body { background:#000; }
button,input,select,textarea { font:inherit; }
button { color:inherit; }
.app-shell { max-width:1040px; min-height:100dvh; margin:0 auto; padding-bottom:calc(150px + env(safe-area-inset-bottom)); }
.topbar { height:62px; position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; padding:0 20px; color:#fff; background:#000; border-bottom:1px solid var(--line-soft); }
.brand { display:inline-flex; align-items:center; gap:9px; padding:0; color:#fff; border:0; background:transparent; font:900 19px/1 'Arial Black',Impact,Inter,sans-serif; letter-spacing:-.04em; text-transform:uppercase; cursor:pointer; }
.brand-mark { display:grid; place-items:center; width:34px; height:34px; border:1px solid rgba(255,255,255,.28); border-radius:12px; color:#000; background:var(--green); }
.brand-mark svg { width:19px; height:19px; }
.top-actions { display:flex; align-items:center; gap:7px; }
.demo-pill,.user-chip { max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:7px 10px; color:#ccc; border:1px solid var(--line); border-radius:999px; background:#111; font-size:10px; font-weight:650; }
.user-chip { color:#fff; }
.main { padding:18px 20px 32px; }
.eyebrow { display:inline-flex; align-items:center; gap:7px; color:#c7c7c7; font-size:9px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { font-family:'Arial Black',Impact,Inter,-apple-system,sans-serif; font-weight:900; letter-spacing:-.04em; }
h1,h2 { text-transform:uppercase; }
h1 { font-size:clamp(31px,7vw,54px); line-height:.94; margin:10px 0 9px; }
h2 { font-size:clamp(19px,4vw,25px); line-height:1; margin:0; }
h3 { font-size:16px; line-height:1.12; }
.hero { position:relative; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(145px,.7fr); gap:12px; min-height:235px; overflow:hidden; padding:16px; border:1px solid var(--line); border-radius:30px; background:#1E1E1E; }
.hero-copy { position:relative; z-index:2; align-self:center; max-width:560px; }
.hero .eyebrow { color:#bdbdbd; }
.hero-dot { width:7px; height:7px; border-radius:50%; background:var(--green); }
.hero h1 { max-width:450px; margin:12px 0 9px; color:#fff; }
.hero p { max-width:390px; margin:0 0 15px; color:#b7b7b7; font-size:12px; line-height:1.45; }
.hero-search { display:flex; align-items:center; gap:8px; width:min(100%,450px); min-height:48px; padding:4px 5px 4px 13px; border:1px solid rgba(255,255,255,.24); border-radius:999px; background:#080808; }
.hero-search input { width:100%; min-width:0; color:#fff; border:0; outline:0; background:transparent; font-size:12px; }
.hero-search input::placeholder { color:#777; }
.search-symbol { flex:0 0 auto; display:grid; place-items:center; color:#aaa; }
.search-symbol svg { width:17px; height:17px; }
.hero-caption { display:flex; align-items:center; gap:7px; margin-top:9px; color:#8f8f8f; font-size:8px; font-weight:750; letter-spacing:.1em; }
.hero-count { color:#fff; font:800 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace; }
.hero-art { position:relative; display:grid; place-items:center; min-height:194px; overflow:hidden; border:1px solid rgba(255,255,255,.14); border-radius:24px; color:#fff; background:var(--violet); }
.hero-art::after { position:absolute; right:-25px; top:-27px; width:132px; height:132px; content:''; border:1px dashed rgba(255,255,255,.65); border-radius:50%; }
.hero-orbit { position:absolute; border:1px dashed rgba(255,255,255,.48); border-radius:50%; }
.orbit-one { width:104px; height:104px; }
.orbit-two { width:76px; height:76px; }
.hero-gift { z-index:1; display:grid; place-items:center; }
.hero-gift svg { width:62px; height:62px; stroke-width:1.4; }
.hero-art-label { position:absolute; z-index:2; left:12px; bottom:10px; font:900 8px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.1em; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:42px; padding:10px 16px; color:#000; border:1px solid transparent; border-radius:999px; background:var(--green); font-size:12px; line-height:1; font-weight:850; cursor:pointer; transition:transform .12s ease,background-color .12s ease; }
.btn:hover { color:#000; background:#58e66d; }
.btn:active { transform:scale(.98); }
.btn svg { width:16px; height:16px; }
.btn.secondary { color:#fff; border-color:var(--line); background:#1E1E1E; }
.btn.secondary:hover { background:#303030; }
.btn.soft { color:#fff; background:var(--violet); }
.btn.ghost { color:#bbb; background:transparent; }
.btn.ghost:hover { color:#fff; background:#1e1e1e; }
.btn.small { min-height:36px; padding:8px 13px; font-size:10px; }
.btn.full { width:100%; }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.quick-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin:14px 0 24px; }
.quick-card { position:relative; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; min-height:110px; padding:14px; color:#fff; border:1px solid var(--line); border-radius:26px; background:#1E1E1E; text-align:left; cursor:pointer; }
.quick-card strong { display:block; max-width:220px; margin-bottom:5px; font:900 15px/1.05 'Arial Black',Impact,Inter,sans-serif; letter-spacing:-.035em; text-transform:uppercase; }
.quick-card small { display:block; color:rgba(255,255,255,.72); font-size:10px; line-height:1.3; }
.quick-feature { grid-column:1/-1; min-height:126px; border-color:var(--violet); background:var(--violet); }
.quick-card:nth-child(2) { background:#172d22; border-color:rgba(57,211,83,.4); }
.quick-card:nth-child(3) { border-style:dashed; background:#111; }
.quick-card:nth-child(4) { background:#2a1913; border-color:rgba(232,121,60,.34); }
.quick-icon,.quick-icon.sage { display:grid; place-items:center; width:38px; height:38px; flex:0 0 auto; border:1px solid rgba(255,255,255,.38); border-radius:50%; color:#fff; background:rgba(0,0,0,.18); }
.quick-icon svg { width:19px; height:19px; }
.section { margin:24px 0; }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:10px; margin-bottom:11px; }
.section-head h2 { color:#fff; }
.section-head p { margin:5px 0 0; color:#8d8d8d; font-size:9px; }
.text-link { display:inline-flex; align-items:center; gap:4px; padding:5px 0; color:#ccc; border:0; background:transparent; font-size:10px; font-weight:800; cursor:pointer; white-space:nowrap; }
.text-link svg { width:14px; height:14px; }
.category-row { display:flex; gap:7px; overflow-x:auto; padding:3px 1px 8px; scrollbar-width:none; }
.category-row::-webkit-scrollbar { display:none; }
.category-chip { display:inline-flex; align-items:center; gap:8px; min-height:44px; flex:0 0 auto; padding:5px 6px 5px 5px; color:#fff; border:1px dashed rgba(255,255,255,.28); border-radius:999px; background:#101010; cursor:pointer; }
.category-chip:hover,.category-chip.selected { border-style:solid; background:#222; }
.chip-icon,.chip-add { display:grid; place-items:center; width:31px; height:31px; flex:0 0 auto; color:#fff; border-radius:50%; background:#303030; }
.chip-icon svg { width:16px; height:16px; }
.chip-label { font-size:10px; font-weight:750; white-space:nowrap; }
.chip-count { color:#a4a4a4; font:750 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace; }
.chip-add { width:25px; height:25px; color:#fff; border:1px solid rgba(255,255,255,.32); background:transparent; }
.chip-add svg { width:13px; height:13px; }
.category-chip:nth-child(3n+1) .chip-icon { color:#000; background:var(--green); }
.category-chip:nth-child(3n+2) .chip-icon { color:#fff; background:var(--violet); }
.category-chip:nth-child(3n) .chip-icon { color:#000; background:var(--orange); }
.product-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.product-card { position:relative; min-width:0; overflow:hidden; color:#fff; border:1px solid var(--line); border-radius:28px; background:#1E1E1E; }
.art-button { display:block; width:100%; padding:0; border:0; background:transparent; cursor:pointer; }
.product-art { position:relative; display:grid; place-items:center; height:136px; overflow:hidden; color:#f3f3f3; background:#252525; }
.product-art::before,.product-art::after { display:none!important; }
.product-art svg { z-index:1; width:90px; height:90px; color:inherit; stroke-width:1.15; filter:none!important; }
.art--lamp,.art--headphones,.art--keyboard,.art--gamepad,.art--cards,.art--book,.art--care,.art--flower,.art--plant,.art--paw,.art--bottle,.art--coffee,.art--candle,.art--mug,.art--ticket,.art--star,.art--puzzle,.art--scarf { color:#fff; background:#252525; }
.product-card:nth-child(4n+1) .product-art { color:#fff; background:#321c3e; }
.product-card:nth-child(4n+2) .product-art { color:#fff; background:#172d42; }
.product-card:nth-child(4n+3) .product-art { color:#fff; background:#49251d; }
.product-card:nth-child(4n) .product-art { color:#fff; background:#1c3323; }
.demo-tag,.ad-tag { position:absolute; z-index:2; top:9px; left:9px; padding:6px 8px; color:#fff; border:1px solid rgba(255,255,255,.22); border-radius:999px; background:#080808; font-size:8px; font-weight:800; letter-spacing:.07em; }
.ad-tag { left:auto; right:9px; color:#000; border-color:var(--orange); background:var(--orange); }
.card-favorite { position:absolute; z-index:3; top:8px; right:8px; display:grid; place-items:center; width:34px; height:34px; color:#fff; border:1px solid rgba(255,255,255,.32); border-radius:50%; background:#080808; cursor:pointer; }
.card-favorite svg { width:16px; height:16px; }
.card-favorite:hover,.card-favorite.saved { color:#000; border-color:var(--green); background:var(--green); }
.product-info { min-width:0; padding:11px; }
.product-card-top { display:flex; align-items:center; justify-content:space-between; gap:5px; min-height:14px; }
.product-info .category-label { overflow:hidden; color:#aaa; font-size:8px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.demo-mark { flex:0 0 auto; color:#bbb; font:800 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; }
.product-info h3 { min-height:34px; margin:6px 0 4px; overflow:hidden; color:#fff; font:900 12px/1.12 'Arial Black',Impact,Inter,sans-serif; letter-spacing:-.025em; text-transform:uppercase; }
.product-description { display:-webkit-box; min-height:28px; margin:0 0 7px; overflow:hidden; color:#9e9e9e; font-size:9px; line-height:1.35; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.product-price-row { display:flex; flex-direction:column; gap:3px; min-height:36px; }
.product-price { color:#fff; font:900 15px/1 'Arial Black',Impact,Inter,sans-serif; letter-spacing:-.025em; }
.product-price-row span { color:#888; font-size:8px; }
.product-actions { padding-top:8px; }
.add-btn { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; min-height:36px; color:#000; border:0; border-radius:999px; background:var(--green); font-size:10px; font-weight:900; cursor:pointer; }
.add-btn:hover { background:#58e66d; }
.add-btn svg { width:14px; height:14px; }
.product-grid > .product-card:nth-child(5n+1) { display:grid; grid-column:span 2; grid-template-columns:1fr 1fr; min-height:220px; }
.product-grid > .product-card:nth-child(5n+1) .art-button { min-height:100%; }
.product-grid > .product-card:nth-child(5n+1) .product-art { height:100%; min-height:220px; }
.product-grid > .product-card:nth-child(5n+1) .product-info { align-self:center; padding:14px; }
.product-grid > .product-card:nth-child(5n+1) .product-info h3 { min-height:0; font-size:16px; }
.product-grid > .product-card:nth-child(5n+1) .product-description { min-height:0; }
.product-grid > .empty { grid-column:1/-1; }
.icon-btn { display:inline-grid; place-items:center; width:36px; height:36px; flex:0 0 auto; color:#fff; border:1px solid var(--line); border-radius:50%; background:#1e1e1e; cursor:pointer; }
.icon-btn:hover,.icon-btn.saved { color:#000; border-color:var(--green); background:var(--green); }
.icon-btn svg { width:17px; height:17px; }
.collection-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.collection-card,.collection-card:nth-child(3n+2),.collection-card:nth-child(3n) { position:relative; display:block; min-height:124px; overflow:hidden; padding:13px; color:#fff; border:1px solid var(--line); border-radius:26px; background:#1E1E1E; text-align:left; cursor:pointer; }
.collection-card:nth-child(3n+2) { background:#251b37; }
.collection-card:nth-child(3n) { background:#182638; }
.collection-card:nth-child(4n) { border-style:dashed; background:#111; }
.collection-card strong { position:relative; z-index:1; display:block; max-width:145px; color:#fff; font:900 14px/1.08 'Arial Black',Impact,Inter,sans-serif; letter-spacing:-.035em; text-transform:uppercase; }
.collection-card small { position:relative; z-index:1; display:block; margin-top:9px; color:#b5b5b5; font-size:9px; }
.collection-card svg { position:absolute; right:7px; bottom:7px; width:40px; height:40px; color:#fff; opacity:.35; }
.collection-card:nth-child(4n+1) { grid-column:span 2; }
.banner { display:flex; align-items:center; justify-content:space-between; gap:13px; margin:20px 0; padding:16px; color:#fff; border:1px solid rgba(92,51,246,.7); border-radius:30px; background:#261c4b; }
.banner h3 { margin:8px 0 5px; font-size:17px; text-transform:uppercase; }
.banner p { margin:0; color:#c8c3da; font-size:10px; line-height:1.4; }
.banner-art { display:grid; place-items:center; width:60px; height:60px; flex:0 0 auto; color:#fff; border:1px solid rgba(255,255,255,.28); border-radius:50%; }
.banner-art svg { width:31px; height:31px; }
.screen-title { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin:5px 0 18px; }
.screen-title h1 { margin:8px 0 6px; font-size:clamp(27px,6vw,43px); }
.screen-title p { margin:0; color:#aaa; font-size:11px; line-height:1.45; }
.filters { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:8px; margin-bottom:13px; }
.field,.select,.textarea { width:100%; min-height:43px; padding:10px 12px; color:#fff; border:1px solid var(--line); border-radius:18px; outline:0; background:#1E1E1E; font-size:12px; }
.field::placeholder,.textarea::placeholder { color:#797979; }
.field:focus,.select:focus,.textarea:focus { border-color:#fff; outline:1px solid rgba(255,255,255,.25); }
.filter-input { position:relative; }
.filter-input .field { padding-left:38px; }
.filter-input svg { position:absolute; top:12px; left:12px; width:17px; color:#999; }
.range-label,.range-wrap { color:#aaa; font-size:10px; }
.range-wrap { display:flex; align-items:center; gap:8px; }
input[type=range] { width:100%; accent-color:var(--green); }
.empty { padding:25px 17px; color:#aaa; border:1px dashed rgba(255,255,255,.3); border-radius:28px; background:#111; text-align:center; }
.empty-art { display:grid; place-items:center; width:48px; height:48px; margin:0 auto 10px; color:#000; border-radius:50%; background:var(--green); }
.empty-art svg { width:23px; height:23px; }
.empty h3 { margin-bottom:6px; color:#fff; text-transform:uppercase; }
.empty p { margin:0; font-size:11px; line-height:1.45; }
.swipe-wrap { max-width:460px; margin:0 auto; }
.swipe-card { overflow:hidden; border:1px solid var(--line); border-radius:30px; background:#1E1E1E; touch-action:pan-y; user-select:none; }
.swipe-card .product-art { height:min(44vh,360px); min-height:230px; }
.swipe-card .product-art svg { width:170px; height:170px; }
.swipe-content { padding:16px; }
.swipe-content h2 { margin:8px 0; font-size:22px; }
.swipe-content p { margin:0 0 13px; color:#aaa; font-size:12px; line-height:1.45; }
.swipe-bottom { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.swipe-controls { display:flex; justify-content:center; gap:12px; padding:14px 0 5px; }
.swipe-control { display:grid; place-items:center; width:52px; height:52px; color:#fff; border:1px solid var(--line); border-radius:50%; background:#1E1E1E; cursor:pointer; }
.swipe-control svg { width:22px; height:22px; }
.swipe-control.like { color:var(--green); border-color:var(--green); }
.swipe-control.love { color:#000; border-color:var(--green); background:var(--green); }
.swipe-meta { display:flex; align-items:center; justify-content:space-between; margin:12px 3px 0; color:#929292; font-size:10px; }
.swipe-tools { display:flex; justify-content:center; gap:9px; }
.list-card,.item-card,.game-card,.place-card,.stat-card { color:#fff; border:1px solid var(--line); border-radius:26px; background:#1E1E1E; }
.list-card { display:flex; align-items:center; gap:12px; margin-bottom:9px; padding:12px; }
.list-cover { display:grid; place-items:center; width:54px; height:54px; flex:0 0 auto; color:#fff; border-radius:18px; background:#5C33F6; }
.list-cover svg { width:28px; height:28px; }
.list-main { min-width:0; flex:1; }
.list-main h3 { overflow:hidden; color:#fff; font-size:14px; text-overflow:ellipsis; white-space:nowrap; }
.list-main p,.item-main p,.place-card p { margin:5px 0 0; color:#999; font-size:10px; line-height:1.4; }
.item-card { display:grid; grid-template-columns:72px minmax(0,1fr); gap:10px; margin:9px 0; padding:10px; }
.item-card .product-art { height:72px; border-radius:18px; }
.item-card .product-art svg { width:46px; height:46px; }
.item-main { min-width:0; }
.item-main h3 { margin:2px 0 5px; font-size:13px; }
.item-actions { display:flex; grid-column:1/-1; align-items:center; justify-content:flex-end; gap:7px; flex-wrap:wrap; }
.status { display:inline-flex; align-items:center; gap:5px; padding:6px 9px; color:#000; border-radius:999px; background:var(--green); font-size:9px; font-weight:850; }
.status.pending { color:#fff; background:#67371e; }
.modal-backdrop { position:fixed; inset:0; z-index:50; display:grid; place-items:end center; padding:12px; background:rgba(0,0,0,.82); }
.modal { width:min(100%,520px); max-height:min(88dvh,800px); overflow:auto; padding:20px; color:#fff; border:1px solid rgba(255,255,255,.22); border-radius:30px; background:#1E1E1E; animation:sheet-in .18s ease-out; }
@keyframes sheet-in { from { transform:translateY(16px); opacity:.5; } to { transform:none; opacity:1; } }
.modal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:15px; }
.modal-head h2 { font-size:19px; }
.modal-close { width:38px; height:38px; color:#fff; border:1px solid var(--line); border-radius:50%; background:#111; font-size:20px; cursor:pointer; }
.form-stack { display:grid; gap:11px; }
.form-label { display:block; margin-bottom:5px; color:#c9c9c9; font-size:10px; font-weight:800; }
.textarea { min-height:86px; resize:vertical; }
.form-help,.loading { color:#999; font-size:10px; line-height:1.45; }
.notice { padding:12px; color:#ccc; border:1px solid var(--line); border-radius:22px; background:#1E1E1E; font-size:10px; line-height:1.5; }
.notice.demo { color:#f0c3aa; border-color:rgba(232,121,60,.36); background:#2a1913; }
.gift-result { padding:15px; border:1px solid var(--line); border-radius:26px; background:#1E1E1E; }
.gift-result h3 { margin-bottom:6px; }
.gift-result p { color:#aaa; font-size:11px; line-height:1.45; }
.game-card,.place-card { margin:9px 0; padding:15px; }
.game-card h3,.place-card h3 { margin-bottom:5px; text-transform:uppercase; }
.game-meta { display:flex; gap:7px; flex-wrap:wrap; margin:9px 0 13px; }
.game-link { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.place-card p { margin-bottom:10px; }
.admin-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:14px 0; }
.stat-card { padding:13px; }
.stat-card strong { display:block; margin-bottom:3px; font:900 22px/1 'Arial Black',Impact,Inter,sans-serif; }
.stat-card span { color:#999; font-size:10px; }
.table-list { display:grid; gap:7px; }
.event-row { display:flex; justify-content:space-between; padding:10px 12px; border:1px solid var(--line-soft); border-radius:18px; background:#151515; font-size:10px; }
.event-row span:last-child { font-weight:800; }
.loading { min-height:180px; display:grid; place-items:center; }
.spinner { width:24px; height:24px; margin:0 auto 10px; border:2px solid #333; border-top-color:var(--green); border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.toast { position:fixed; z-index:80; bottom:calc(88px + env(safe-area-inset-bottom)); left:50%; max-width:calc(100% - 32px); padding:11px 15px; color:#000; border-radius:999px; background:var(--green); font-size:11px; text-align:center; opacity:0; pointer-events:none; transform:translate(-50%,12px); transition:all .2s; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.toast.error { color:#fff; background:#7f2635; }
.boot { display:flex; min-height:100dvh; align-items:center; justify-content:center; gap:11px; color:#aaa; font-size:12px; }
.skeleton { min-height:150px; border-radius:24px; background:#222; animation:none; }
.demo-note { display:flex; align-items:flex-start; gap:10px; padding:13px; border:1px solid var(--line); border-radius:24px; background:#1E1E1E; }
.demo-note-icon { flex:0 0 auto; color:var(--green); }
.demo-note-icon svg { width:18px; height:18px; }
.demo-note strong { display:block; margin-bottom:4px; color:#fff; font-size:10px; }
.demo-note p { margin:0; color:#999; font-size:9px; line-height:1.45; }
.wish-fab { position:fixed; z-index:30; left:50%; bottom:calc(76px + env(safe-area-inset-bottom)); display:inline-flex; align-items:center; gap:9px; min-height:54px; padding:6px 19px 6px 7px; color:#fff; border:1px solid rgba(255,255,255,.28); border-radius:999px; background:var(--violet); font-size:15px; font-weight:900; letter-spacing:-.02em; transform:translateX(-50%); cursor:pointer; }
.wish-fab-plus { display:grid; place-items:center; width:38px; height:38px; color:#000; border-radius:50%; background:#fff; }
.wish-fab-plus svg { width:20px; height:20px; }
.bottom-nav { position:fixed; z-index:20; left:50%; bottom:0; display:grid; grid-template-columns:repeat(5,1fr); width:min(100%,720px); padding:7px 8px calc(7px + env(safe-area-inset-bottom)); border:1px solid var(--line); border-bottom:0; border-radius:25px 25px 0 0; background:#080808; transform:translateX(-50%); }
.nav-item { position:relative; display:flex; min-height:47px; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:#777; border:0; background:transparent; font-size:8px; font-weight:700; cursor:pointer; }
.nav-item svg { width:18px; height:18px; }
.nav-item.active { color:#fff; }
.nav-item.active::before { position:absolute; top:0; width:22px; height:2px; margin:0; border-radius:2px; background:var(--green); content:''; }
@media (min-width:760px) {
  .main { padding:28px 30px 40px; }
  .hero { min-height:280px; padding:20px; }
  .hero-art { min-height:238px; }
  .product-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
  .product-art { height:180px; }
  .product-grid > .product-card:nth-child(5n+1) { grid-column:span 2; }
  .collection-row { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .collection-card:nth-child(4n+1) { grid-column:span 2; }
  .quick-actions { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .quick-feature { grid-column:span 2; }
  .bottom-nav { bottom:12px; padding:6px 9px; border-bottom:1px solid var(--line); border-radius:999px; }
  .nav-item { min-height:42px; flex-direction:row; gap:7px; font-size:10px; }
  .nav-item.active::before { top:auto; left:8px; right:8px; bottom:-6px; width:auto; height:2px; margin:0; }
  .wish-fab { bottom:calc(78px + env(safe-area-inset-bottom)); }
  .app-shell { padding-bottom:150px; }
  .modal-backdrop { place-items:center; }
}
@media (max-width:520px) {
  .topbar { height:56px; padding:0 14px; }
  .brand { font-size:17px; }
  .brand-mark { width:30px; height:30px; }
  .demo-pill { padding:6px 8px; font-size:8px; }
  .user-chip { max-width:88px; padding:6px 8px; font-size:9px; }
  .main { padding:12px 13px 25px; }
  .hero { display:block; min-height:0; padding:17px; border-radius:28px; }
  .hero-copy { width:100%; }
  .hero h1 { max-width:265px; margin-top:13px; font-size:35px; }
  .hero p { max-width:255px; margin-bottom:12px; font-size:10px; }
  .hero-art { position:absolute; top:12px; right:12px; width:62px; min-height:62px; height:62px; border-radius:20px; }
  .hero-art::after,.hero-orbit,.hero-art-label { display:none; }
  .hero-gift svg { width:30px; height:30px; }
  .hero-search { min-height:44px; }
  .hero-search .btn { min-height:34px; padding:8px 11px; }
  .hero-caption { font-size:7px; }
  .quick-actions { gap:7px; margin:11px 0 20px; }
  .quick-card { min-height:98px; padding:11px; border-radius:23px; }
  .quick-feature { min-height:105px; }
  .quick-card strong { max-width:155px; font-size:12px; }
  .quick-card small { max-width:160px; font-size:8px; }
  .quick-icon,.quick-icon.sage { width:32px; height:32px; }
  .section { margin:19px 0; }
  .section-head { margin-bottom:9px; }
  .section-head h2 { font-size:19px; }
  .section-head p { font-size:8px; }
  .product-grid { gap:7px; }
  .product-card { border-radius:23px; }
  .product-art { height:112px; }
  .product-art svg { width:72px; height:72px; }
  .product-grid > .product-card:nth-child(5n+1) { min-height:188px; }
  .product-grid > .product-card:nth-child(5n+1) .product-art { min-height:188px; }
  .product-grid > .product-card:nth-child(5n+1) .product-info { padding:10px; }
  .product-grid > .product-card:nth-child(5n+1) .product-info h3 { font-size:13px; }
  .product-info { padding:9px; }
  .product-info h3 { min-height:30px; font-size:10px; }
  .product-description { min-height:24px; font-size:8px; }
  .product-price { font-size:13px; }
  .add-btn { min-height:32px; font-size:9px; }
  .card-favorite { width:29px; height:29px; }
  .collection-row { gap:7px; }
  .collection-card,.collection-card:nth-child(3n+2),.collection-card:nth-child(3n) { min-height:105px; padding:11px; border-radius:23px; }
  .collection-card strong { font-size:12px; }
  .banner { padding:13px; border-radius:25px; }
  .screen-title { gap:8px; }
  .screen-title h1 { font-size:28px; }
  .screen-title p { font-size:10px; }
  .filters { grid-template-columns:minmax(0,1fr) auto; }
  .filters .sort-select { grid-column:1/-1; }
  .bottom-nav { width:100%; border-radius:23px 23px 0 0; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }

/* Clean Dark Bento: spacious layout, neutral surfaces, one accent on the floating action. */
:root {
  --surface:#121212;
  --surface-2:#1A1A1A;
  --line:rgba(255,255,255,.14);
  --line-soft:rgba(255,255,255,.08);
  --muted:#929292;
  --berry:#5C33F6;
  --berry-dark:#4d29df;
  --berry-soft:#1A1A1A;
  --sage:#1A1A1A;
  --sage-ink:#d7d7d7;
  --gold:#d7d7d7;
}
.app-shell { max-width:960px; padding-bottom:calc(142px + env(safe-area-inset-bottom)); }
.topbar { padding:0 28px; border-color:var(--line-soft); }
.brand { font-size:18px; }
.brand-mark { display:none; }
.top-actions { gap:12px; }
.demo-pill,.user-chip { padding:6px 0; color:#aaa; border:0; background:transparent; font-size:10px; }
.user-chip { color:#fff; }
.main { padding:28px 28px 40px; }
.eyebrow { color:#aaa; font-size:9px; letter-spacing:.1em; }
.hero { display:block; min-height:0; padding:32px; border:1px solid var(--line-soft); border-radius:32px; background:#121212; }
.hero-copy { max-width:620px; }
.hero .eyebrow { color:#aaa; }
.hero-dot,.hero-caption,.hero-art { display:none!important; }
.hero h1 { max-width:600px; margin:0 0 14px; font-size:clamp(38px,7vw,58px); }
.hero p { max-width:460px; margin-bottom:24px; color:#aaa; font-size:13px; }
.hero-search { max-width:560px; min-height:56px; gap:12px; padding:6px 7px 6px 18px; border-color:#303030; border-radius:999px; background:#000; }
.hero-search input { font-size:13px; }
.search-symbol { color:#aaa; }
.btn { min-height:46px; padding:12px 20px; color:#000; background:#fff; font-size:12px; }
.btn:hover { color:#000; background:#ddd; }
.btn.secondary,.btn.soft { color:#fff; border-color:#343434; background:#1A1A1A; }
.btn.secondary:hover,.btn.soft:hover { color:#fff; background:#252525; }
.btn.ghost { color:#bbb; }
.btn.small { min-height:42px; padding:10px 17px; font-size:11px; }
.quick-actions { gap:20px; margin:28px 0 36px; }
.quick-card { min-height:148px; padding:24px; border-color:var(--line-soft); border-radius:30px; background:#121212; }
.quick-card strong { max-width:260px; margin:0 0 8px; font-size:17px; }
.quick-card small { color:#999; font-size:11px; }
.quick-feature,.quick-card:nth-child(2),.quick-card:nth-child(3),.quick-card:nth-child(4) { border-color:var(--line-soft); background:#121212; }
.quick-feature { min-height:160px; }
.quick-icon,.quick-card .quick-icon { display:none!important; }
.section { margin:36px 0; }
.section-head { gap:18px; margin-bottom:18px; }
.section-head p { display:none; }
.section-head h2 { font-size:clamp(21px,4vw,27px); }
.text-link { color:#d5d5d5; font-size:11px; }
.text-link svg { display:none; }
.category-row { gap:12px; padding:5px 1px 9px; }
.category-chip { min-height:46px; padding:12px 19px; color:#ddd; border:1px dashed rgba(255,255,255,.22); background:transparent; font-size:11px; font-weight:650; }
.category-chip:hover,.category-chip.selected { color:#fff; border-color:rgba(255,255,255,.48); background:#121212; }
.chip-icon,.chip-add,.chip-count { display:none!important; }
.category-chip:nth-child(3n+1) .chip-icon,.category-chip:nth-child(3n+2) .chip-icon,.category-chip:nth-child(3n) .chip-icon { background:#1A1A1A; color:#fff; }
.product-grid { grid-template-columns:minmax(0,1fr); gap:18px; }
.product-card,.product-grid > .product-card:nth-child(5n+1) { display:grid; grid-column:auto; grid-template-columns:132px minmax(0,1fr); min-height:210px; border-color:var(--line-soft); border-radius:30px; background:#121212; }
.art-button,.product-grid > .product-card:nth-child(5n+1) .art-button { height:100%; min-height:210px; }
.product-art,.product-grid > .product-card:nth-child(5n+1) .product-art { height:100%; min-height:210px; color:#ddd; background:#1A1A1A; }
.product-card:nth-child(4n+1) .product-art,.product-card:nth-child(4n+2) .product-art,.product-card:nth-child(4n+3) .product-art,.product-card:nth-child(4n) .product-art { color:#ddd; background:#1A1A1A; }
.product-art svg { width:64px; height:64px; stroke-width:1.15; }
.demo-tag,.ad-tag { top:12px; left:12px; padding:5px 8px; color:#ccc; border-color:rgba(255,255,255,.2); border-radius:999px; background:#080808; font-size:8px; }
.ad-tag { left:auto; right:12px; color:#111; border-color:#ddd; background:#ddd; }
.card-favorite { top:12px; right:12px; width:38px; height:38px; color:#ddd; border-color:rgba(255,255,255,.24); background:#080808; }
.card-favorite:hover,.card-favorite.saved { color:#000; border-color:#fff; background:#fff; }
.product-info,.product-grid > .product-card:nth-child(5n+1) .product-info { display:flex; flex-direction:column; align-items:stretch; justify-content:center; padding:24px; }
.product-info .category-label { color:#969696; font-size:9px; }
.demo-mark { color:#aaa; font-size:8px; }
.product-info h3,.product-grid > .product-card:nth-child(5n+1) .product-info h3 { min-height:0; margin:10px 0 0; font-size:15px; line-height:1.12; }
.product-description { display:none; }
.product-price-row { min-height:0; margin-top:16px; }
.product-price { font-size:17px; }
.product-price-row span { display:none; }
.product-actions { padding-top:18px; }
.add-btn { min-height:44px; color:#000; border-radius:999px; background:#fff; font-size:11px; }
.add-btn:hover { background:#ddd; }
.collection-row { gap:18px; }
.collection-card,.collection-card:nth-child(3n+2),.collection-card:nth-child(3n),.collection-card:nth-child(4n) { min-height:150px; padding:24px; border-color:var(--line-soft); border-style:solid; border-radius:30px; background:#121212; }
.collection-card:nth-child(4n+1) { grid-column:span 2; }
.collection-card strong { max-width:240px; font-size:15px; }
.collection-card small { margin-top:12px; color:#929292; font-size:10px; }
.collection-card svg { display:none; }
.banner { margin:28px 0; padding:28px; border-color:var(--line-soft); border-radius:30px; background:#121212; }
.banner h3 { margin:0 0 9px; font-size:18px; }
.banner p { color:#aaa; font-size:11px; }
.banner-art { display:none; }
.screen-title { gap:20px; margin:8px 0 28px; }
.screen-title h1 { margin:8px 0 10px; font-size:clamp(32px,6vw,44px); }
.screen-title p { max-width:560px; color:#9c9c9c; font-size:12px; }
.filters { gap:14px; margin-bottom:20px; }
.field,.select,.textarea { min-height:50px; padding:13px 16px; border-color:#2c2c2c; border-radius:20px; background:#121212; font-size:12px; }
.filter-input .field { padding-left:42px; }
.filter-input svg { top:16px; left:15px; }
.range-label,.range-wrap { color:#9a9a9a; font-size:10px; }
input[type=range] { accent-color:#fff; }
.empty { display:flex; min-height:220px; flex-direction:column; align-items:center; justify-content:center; padding:32px; border-color:rgba(255,255,255,.22); border-radius:30px; background:#121212; }
.empty-art { display:none; }
.empty h3 { margin:0 0 9px; }
.empty p { max-width:350px; font-size:11px; }
.swipe-card { border-radius:32px; background:#121212; }
.swipe-content { padding:24px; }
.swipe-content h2 { font-size:23px; }
.swipe-controls { gap:18px; padding:20px 0 8px; }
.swipe-control { width:56px; height:56px; color:#ddd; border-color:#303030; background:#121212; }
.swipe-control.like,.swipe-control.love { color:#fff; border-color:#555; background:#1A1A1A; }
.list-card { gap:20px; margin-bottom:16px; padding:24px; border-color:var(--line-soft); border-radius:30px; background:#121212; }
.list-cover { display:none; }
.list-main h3 { font-size:16px; }
.list-main p { font-size:11px; }
.item-card { grid-template-columns:86px minmax(0,1fr); gap:16px; margin:14px 0; padding:20px; border-color:var(--line-soft); border-radius:28px; background:#121212; }
.item-card .product-art { height:86px; min-height:86px; border-radius:22px; background:#1A1A1A; }
.item-card .product-art svg { width:48px; height:48px; }
.item-main h3 { font-size:14px; }
.item-main p { font-size:11px; }
.item-actions { gap:10px; }
.status,.status.pending { color:#ddd; border:1px solid #333; background:#1A1A1A; }
.modal-backdrop { padding:20px; background:rgba(0,0,0,.78); }
.modal { padding:28px; border-color:#303030; border-radius:32px; background:#121212; }
.modal-head { margin-bottom:22px; }
.modal-head h2 { font-size:22px; }
.modal-close { width:42px; height:42px; color:#ddd; border-color:#333; background:#1A1A1A; }
.form-stack { gap:18px; }
.form-label { color:#bdbdbd; font-size:11px; }
.form-help,.loading { color:#999; font-size:11px; }
.notice,.notice.demo { padding:18px; color:#aaa; border-color:#292929; border-radius:24px; background:#121212; font-size:11px; }
.gift-result,.game-card,.place-card,.stat-card { padding:24px; border-color:var(--line-soft); border-radius:28px; background:#121212; }
.game-card,.place-card { margin:14px 0; }
.game-meta { gap:10px; margin:16px 0 18px; }
.game-link { gap:10px; }
.admin-stats { gap:16px; margin:20px 0; }
.event-row { padding:15px 18px; border-color:#272727; border-radius:20px; background:#121212; }
.spinner { border-color:#303030; border-top-color:#fff; }
.toast,.toast.error { color:#fff; background:#1A1A1A; border:1px solid #444; }
.demo-note { gap:14px; padding:20px; border-color:var(--line-soft); border-radius:24px; background:#121212; }
.demo-note-icon { color:#bbb; }
.demo-note strong { font-size:11px; }
.demo-note p { font-size:10px; }
.wish-fab { min-height:58px; padding:7px 22px 7px 8px; color:#fff; border:1px solid rgba(255,255,255,.18); background:#5C33F6; }
.wish-fab-plus { width:42px; height:42px; color:#000; background:#fff; }
.bottom-nav { width:min(100%,760px); padding:10px 12px calc(10px + env(safe-area-inset-bottom)); border-color:var(--line-soft); border-radius:28px 28px 0 0; background:#050505; }
.nav-item { min-height:52px; color:#7d7d7d; font-size:9px; }
.nav-item svg { width:19px; height:19px; }
.nav-item.active { color:#fff; }
.nav-item.active::before { display:none; }
@media (min-width:760px) {
  .main { padding:36px 36px 48px; }
  .hero { padding:40px; }
  .quick-actions { gap:20px; }
  .quick-card { padding:28px; }
  .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
  .product-card,.product-grid > .product-card:nth-child(5n+1) { grid-column:auto; grid-template-columns:118px minmax(0,1fr); min-height:220px; }
  .art-button,.product-grid > .product-card:nth-child(5n+1) .art-button,.product-art,.product-grid > .product-card:nth-child(5n+1) .product-art { min-height:220px; height:100%; }
  .product-info,.product-grid > .product-card:nth-child(5n+1) .product-info { padding:24px; }
  .collection-row { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
  .collection-card:nth-child(4n+1) { grid-column:auto; }
  .bottom-nav { bottom:12px; padding:7px 12px; border-bottom:1px solid var(--line-soft); border-radius:999px; }
  .nav-item { min-height:44px; }
}
@media (max-width:520px) {
  .topbar { height:62px; padding:0 22px; }
  .main { padding:22px 20px 38px; }
  .hero { padding:28px 24px; border-radius:30px; }
  .hero h1 { max-width:300px; margin:0 0 12px; font-size:35px; }
  .hero p { margin-bottom:22px; font-size:11px; }
  .hero-search { min-height:54px; padding-left:16px; }
  .hero-search .btn { min-height:40px; padding:10px 16px; }
  .quick-actions { gap:16px; margin:24px 0 32px; }
  .quick-card,.quick-feature { min-height:138px; padding:20px; border-radius:28px; }
  .quick-card strong { font-size:14px; }
  .quick-card small { font-size:10px; }
  .section { margin:32px 0; }
  .section-head { margin-bottom:16px; }
  .section-head h2 { font-size:21px; }
  .category-row { gap:10px; }
  .category-chip { min-height:48px; padding:13px 18px; }
  .product-grid { gap:16px; }
  .product-card,.product-grid > .product-card:nth-child(5n+1) { grid-template-columns:104px minmax(0,1fr); min-height:204px; border-radius:27px; }
  .art-button,.product-grid > .product-card:nth-child(5n+1) .art-button,.product-art,.product-grid > .product-card:nth-child(5n+1) .product-art { min-height:204px; height:100%; }
  .product-art svg { width:54px; height:54px; }
  .product-info,.product-grid > .product-card:nth-child(5n+1) .product-info { padding:18px; }
  .product-info h3,.product-grid > .product-card:nth-child(5n+1) .product-info h3 { margin-top:9px; font-size:13px; }
  .product-price-row { margin-top:13px; }
  .product-price { font-size:16px; }
  .product-actions { padding-top:15px; }
  .add-btn { min-height:42px; }
  .card-favorite { top:10px; right:10px; width:34px; height:34px; }
  .collection-row { gap:14px; }
  .collection-card,.collection-card:nth-child(3n+2),.collection-card:nth-child(3n),.collection-card:nth-child(4n) { min-height:128px; padding:20px; border-radius:26px; }
  .collection-card strong { font-size:13px; }
  .banner { padding:24px; border-radius:28px; }
  .screen-title { margin-bottom:24px; }
  .screen-title h1 { font-size:30px; }
  .filters { gap:12px; }
  .filters .sort-select { grid-column:1/-1; }
  .empty { min-height:220px; padding:30px 24px; }
  .list-card { padding:20px; }
  .item-card { grid-template-columns:72px minmax(0,1fr); padding:16px; }
  .item-card .product-art { min-height:72px; height:72px; }
  .modal { padding:24px; }
  .bottom-nav { width:100%; padding-right:10px; padding-left:10px; border-radius:26px 26px 0 0; }
  .wish-fab { bottom:calc(80px + env(safe-area-inset-bottom)); }
}

/* Keep the single highlighted action inside the fixed tab bar so it never covers a card. */
.bottom-nav { grid-template-columns:repeat(5,minmax(0,1fr)); align-items:center; gap:8px; }
.wish-fab { position:relative; left:auto; bottom:auto; justify-self:center; align-self:center; min-width:60px; min-height:42px; gap:3px; padding:3px 7px 3px 3px; font-size:10px; transform:none; }
.wish-fab-plus { width:32px; height:32px; }
.wish-fab-plus svg { width:17px; height:17px; }
.product-info,.product-grid > .product-card:nth-child(5n+1) .product-info { padding:24px; }
@media (max-width:520px) {
  .product-info,.product-grid > .product-card:nth-child(5n+1) .product-info { padding:24px; }
  .quick-card,.quick-feature { padding:24px; }
  .collection-card,.collection-card:nth-child(3n+2),.collection-card:nth-child(3n),.collection-card:nth-child(4n) { padding:24px; }
  .list-card { padding:24px; }
  .item-card { padding:24px; }
}
.bottom-nav { grid-template-columns:repeat(6,minmax(0,1fr)); gap:4px; }
.nav-item { white-space:nowrap; font-size:8px; }
.wish-fab { min-width:0; gap:2px; padding:2px 5px 2px 2px; font-size:9px; }
.wish-fab-plus { width:24px; height:24px; }
.wish-fab-plus svg { width:15px; height:15px; }
.product-card .demo-tag { display:none; }
@media (max-width:520px) {
  .bottom-nav { gap:3px; padding-right:7px; padding-left:7px; }
  .nav-item { font-size:7px; }
}
.card-favorite { left:12px; right:auto; top:12px; }
@media (max-width:520px) { .card-favorite { left:10px; right:auto; top:10px; } }

/* Floating Wish action sits above the tab bar, separate from navigation. */
.bottom-nav { grid-template-columns:repeat(5,minmax(0,1fr)); }
.wish-fab {
  position:fixed;
  z-index:30;
  left:50%;
  bottom:calc(78px + env(safe-area-inset-bottom));
  justify-self:auto;
  align-self:auto;
  min-width:112px;
  min-height:54px;
  gap:8px;
  padding:6px 18px 6px 7px;
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:#5C33F6;
  font-size:15px;
  transform:translateX(-50%);
}
.wish-fab-plus { width:38px; height:38px; border-radius:50%; color:#000; background:#fff; }
.wish-fab-plus svg { width:20px; height:20px; }
@media (max-width:520px) {
  .bottom-nav { grid-template-columns:repeat(5,minmax(0,1fr)); gap:3px; padding-right:10px; padding-left:10px; }
  .nav-item { font-size:7px; }
  .wish-fab { bottom:calc(78px + env(safe-area-inset-bottom)); }
  .hero { padding:24px; }
  .hero h1 { margin-bottom:16px; }
}