:root {
  color-scheme: light;
  --paper: #faf7f2;
  --surface: #fffefa;
  --surface-2: #f2ede5;
  --ink: #252725;
  --muted: #777a75;
  --line: #eae5dd;
  --berry: #a63352;
  --berry-dark: #812540;
  --berry-soft: #f7e7eb;
  --sage: #e4ece5;
  --sage-ink: #45644f;
  --gold: #c98c42;
  --shadow: 0 12px 35px rgba(64, 45, 38, .07);
  --shadow-sm: 0 4px 18px rgba(64,45,38,.055);
  --radius: 22px;
  --radius-sm: 15px;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--paper); scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); min-width: 320px; -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
a { color: inherit; }
.app-shell { max-width: 1120px; min-height: 100dvh; margin: 0 auto; padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
.topbar { height: 70px; position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; background: rgba(250,247,242,.94); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(234,229,221,.75); }
.brand { display: inline-flex; gap: 10px; align-items: center; border: 0; background: transparent; padding: 0; cursor: pointer; font-family: Manrope, sans-serif; font-weight: 800; font-size: 21px; letter-spacing: -.6px; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; background: var(--berry); color: white; border-radius: 12px; font: 800 21px Manrope, sans-serif; line-height: 1; box-shadow: 0 5px 13px rgba(166,51,82,.2); }
.top-actions { display: flex; align-items: center; gap: 10px; }
.demo-pill, .user-chip { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 7px 11px; color: var(--muted); font-size: 12px; }
.user-chip { color: var(--ink); font-weight: 600; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.main { padding: 22px 22px 30px; }
.bottom-nav { position: fixed; z-index: 20; bottom: 0; left: 50%; transform: translateX(-50%); width: min(100%, 640px); display: grid; grid-template-columns: repeat(5,1fr); padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: rgba(255,254,250,.96); border: 1px solid var(--line); border-bottom: 0; border-radius: 22px 22px 0 0; box-shadow: 0 -8px 28px rgba(44,36,31,.075); backdrop-filter: blur(16px); }
.nav-item { border: 0; background: transparent; color: #898a84; min-height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 10px; font-weight: 600; cursor: pointer; }
.nav-item svg { width: 20px; height: 20px; stroke: currentColor; }
.nav-item.active { color: var(--berry); }
.nav-item.active::before { content: ''; width: 22px; height: 3px; position: absolute; margin-top: -48px; border-radius: 3px; background: var(--berry); }
.eyebrow { color: var(--berry); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
h1,h2,h3,p { margin-top: 0; }
h1,h2,h3 { font-family: Manrope, 'DM Sans', sans-serif; letter-spacing: -.5px; }
h1 { font-size: clamp(28px, 6vw, 42px); line-height: 1.12; margin: 8px 0 13px; }
h2 { font-size: 23px; line-height: 1.2; margin: 0; }
h3 { font-size: 16px; line-height: 1.3; margin: 0; }
.hero { position: relative; overflow: hidden; border-radius: 27px; min-height: 300px; padding: 30px 25px 24px; background: #f0ded9; display: flex; align-items: center; }
.hero-copy { max-width: 570px; position: relative; z-index: 2; }
.hero .eyebrow { color: #8a3448; }
.hero h1 { max-width: 490px; color: #382b2b; }
.hero p { color: #695c57; max-width: 390px; font-size: 14px; line-height: 1.55; margin-bottom: 19px; }
.hero-art { position: absolute; right: 0; bottom: 0; width: 39%; height: 100%; max-width: 360px; display: grid; place-items: center; color: #a34653; opacity: .92; }
.hero-art svg { width: 100%; height: 100%; max-height: 310px; }
.hero-search { display: flex; align-items: center; gap: 9px; max-width: 420px; padding: 6px 7px 6px 15px; background: var(--surface); border: 1px solid rgba(123,82,73,.1); border-radius: 14px; box-shadow: var(--shadow-sm); }
.hero-search input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 13px; }
.search-symbol { color: #83817a; display: grid; place-items: center; }
.search-symbol svg { width: 18px; }
.btn { border: 0; border-radius: 12px; padding: 11px 15px; background: var(--berry); color: white; font-size: 13px; line-height: 1.2; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform .16s ease, background .16s ease, box-shadow .16s ease; }
.btn:hover { background: var(--berry-dark); box-shadow: 0 5px 14px rgba(166,51,82,.18); }
.btn:active { transform: scale(.98); }
.btn svg { width: 17px; height: 17px; }
.btn.secondary { color: var(--ink); background: var(--surface); border: 1px solid var(--line); }
.btn.secondary:hover { background: var(--surface-2); box-shadow: none; }
.btn.soft { color: var(--berry); background: var(--berry-soft); }
.btn.ghost { color: var(--muted); background: transparent; padding: 8px 10px; }
.btn.ghost:hover { color: var(--berry); background: var(--berry-soft); box-shadow: none; }
.btn.small { padding: 8px 10px; border-radius: 10px; font-size: 12px; }
.btn.full { width: 100%; }
.btn:disabled { opacity: .46; cursor: not-allowed; box-shadow: none; }
.quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 17px 0 30px; }
.quick-card { min-height: 99px; padding: 16px; border-radius: 19px; border: 1px solid var(--line); background: var(--surface); display: flex; align-items: center; justify-content: space-between; text-align: left; cursor: pointer; box-shadow: 0 2px 9px rgba(40,32,27,.025); transition: transform .18s ease, box-shadow .18s ease; }
.quick-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.quick-card strong { font: 700 14px Manrope, sans-serif; display: block; margin-bottom: 4px; }
.quick-card small { color: var(--muted); font-size: 11px; }
.quick-icon { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; color: var(--berry); background: var(--berry-soft); flex: 0 0 auto; }
.quick-icon.sage { color: var(--sage-ink); background: var(--sage); }
.quick-icon svg { width: 21px; }
.section { margin: 29px 0; }
.section-head { display: flex; justify-content: space-between; gap: 12px; align-items: end; margin-bottom: 14px; }
.section-head p { color: var(--muted); margin: 6px 0 0; font-size: 12px; }
.text-link { border: 0; background: transparent; color: var(--berry); font-size: 12px; font-weight: 700; cursor: pointer; padding: 6px 0; white-space: nowrap; }
.category-row { display: flex; gap: 9px; overflow-x: auto; padding: 2px 0 7px; scrollbar-width: none; }
.category-row::-webkit-scrollbar { display: none; }
.category-chip { flex: 0 0 auto; border: 1px solid var(--line); background: var(--surface); color: #555a55; border-radius: 999px; padding: 10px 14px; font-size: 12px; cursor: pointer; }
.category-chip:hover,.category-chip.selected { border-color: #d5a0ad; color: var(--berry); background: var(--berry-soft); }
.product-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.product-card { background: var(--surface); border: 1px solid var(--line); border-radius: 19px; overflow: hidden; min-width: 0; box-shadow: 0 2px 9px rgba(40,32,27,.025); }
.product-art { height: 150px; position: relative; display: grid; place-items: center; overflow: hidden; background: #f1e7dc; color: #7f5960; }
.product-art::before,.product-art::after { content: ''; position: absolute; border-radius: 50%; background: rgba(255,255,255,.36); }
.product-art::before { width: 118px; height: 118px; right: -26px; top: -40px; }
.product-art::after { width: 60px; height: 60px; left: -12px; bottom: -17px; }
.product-art svg { width: 112px; height: 112px; z-index: 1; filter: drop-shadow(0 6px 3px rgba(71,45,38,.1)); }
.art--lamp { background: #eee6d6; color: #a17b45; }
.art--headphones,.art--keyboard,.art--gamepad,.art--cards { background: #e5e7ef; color: #59617a; }
.art--book { background: #e6ece3; color: #657a59; }
.art--care,.art--flower { background: #f2e2e5; color: #a84d66; }
.art--plant,.art--paw,.art--bottle { background: #e2ebe4; color: #52755b; }
.art--coffee,.art--candle,.art--mug { background: #eee4d9; color: #926a50; }
.art--ticket { background: #f0e2ce; color: #a5793d; }
.art--star,.art--puzzle,.art--scarf { background: #e9e1ee; color: #83618e; }
.demo-tag,.ad-tag { position: absolute; z-index: 2; left: 9px; top: 9px; padding: 5px 7px; border-radius: 7px; background: rgba(255,254,250,.83); color: #74756e; font-size: 9px; font-weight: 700; backdrop-filter: blur(5px); }
.ad-tag { left: auto; right: 9px; background: #fff3d7; color: #895f1f; }
.product-info { padding: 11px 11px 12px; }
.product-info .category-label { color: var(--muted); font-size: 10px; margin-bottom: 5px; }
.product-info h3 { font: 600 13px/1.35 Manrope, sans-serif; height: 35px; overflow: hidden; margin-bottom: 8px; }
.product-price { font: 800 15px Manrope, sans-serif; }
.product-note { color: var(--muted); font-size: 10px; margin-top: 4px; min-height: 13px; }
.product-actions { display: flex; justify-content: space-between; gap: 6px; padding-top: 9px; }
.icon-btn { width: 34px; height: 34px; display: inline-grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 11px; color: #6d706a; background: var(--surface); cursor: pointer; }
.icon-btn:hover,.icon-btn.saved { color: var(--berry); background: var(--berry-soft); border-color: #f0d2d9; }
.icon-btn svg { width: 17px; height: 17px; }
.add-btn { flex: 1; border: 0; border-radius: 10px; background: #f4f0e9; color: #535650; font-size: 11px; font-weight: 700; cursor: pointer; }
.add-btn:hover { background: var(--berry-soft); color: var(--berry); }
.collection-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.collection-card { position: relative; min-height: 130px; overflow: hidden; padding: 15px; border: 1px solid var(--line); border-radius: 18px; background: #e9eee8; text-align: left; cursor: pointer; }
.collection-card:nth-child(3n+2) { background: #f2e5e4; }
.collection-card:nth-child(3n) { background: #eee8dc; }
.collection-card strong { display: block; position: relative; z-index: 1; max-width: 150px; font: 700 14px/1.35 Manrope,sans-serif; }
.collection-card small { display: block; margin-top: 7px; position: relative; z-index: 1; color: #666b62; font-size: 10px; }
.collection-card svg { width: 66px; height: 66px; position: absolute; right: 4px; bottom: -3px; opacity: .48; }
.banner { display: flex; gap: 15px; align-items: center; justify-content: space-between; margin: 28px 0; padding: 20px; border: 1px solid #e9ded0; border-radius: 21px; background: #f4eee4; }
.banner h3 { font-size: 17px; margin-bottom: 5px; }
.banner p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.banner-art { width: 70px; height: 70px; flex: 0 0 auto; display: grid; place-items: center; color: #9c6747; }
.banner-art svg { width: 60px; height: 60px; }
.screen-title { display: flex; align-items: start; justify-content: space-between; gap: 14px; margin: 4px 0 20px; }
.screen-title p { color: var(--muted); font-size: 13px; margin: 7px 0 0; line-height: 1.5; }
.screen-title h1 { font-size: 29px; margin: 5px 0; }
.filters { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 8px; margin-bottom: 15px; }
.field,.select { width: 100%; border: 1px solid var(--line); outline: 0; border-radius: 12px; background: var(--surface); padding: 11px 12px; color: var(--ink); font-size: 13px; }
.field:focus,.select:focus,.textarea:focus { border-color: #c87b91; box-shadow: 0 0 0 3px rgba(166,51,82,.08); }
.filter-input { position: relative; }
.filter-input .field { padding-left: 37px; }
.filter-input svg { width: 17px; color: #898a84; position: absolute; top: 11px; left: 12px; }
.range-label { color: var(--muted); font-size: 11px; padding: 0 1px; }
.range-wrap { display: flex; align-items: center; gap: 7px; padding: 0 4px; }
input[type=range] { accent-color: var(--berry); width: 100%; }
.empty { padding: 28px 18px; text-align: center; border: 1px dashed #dcd4c9; border-radius: 18px; color: var(--muted); background: rgba(255,254,250,.55); }
.empty-art { display: grid; place-items: center; margin: 0 auto 9px; width: 46px; height: 46px; border-radius: 15px; color: var(--berry); background: var(--berry-soft); }
.empty-art svg { width: 22px; }
.empty h3 { color: var(--ink); margin-bottom: 5px; }
.empty p { margin: 0; font-size: 12px; line-height: 1.5; }
.swipe-wrap { max-width: 440px; margin: 0 auto; }
.swipe-card { border-radius: 24px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); touch-action: pan-y; user-select: none; transition: transform .2s ease; }
.swipe-card .product-art { height: min(44vh,330px); min-height: 225px; }
.swipe-card .product-art svg { width: 170px; height: 170px; }
.swipe-content { padding: 18px 18px 20px; }
.swipe-content h2 { font-size: 22px; margin: 8px 0; }
.swipe-content p { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0 0 13px; }
.swipe-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.swipe-controls { display: flex; justify-content: center; gap: 15px; padding: 17px 0 5px; }
.swipe-control { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); cursor: pointer; color: #777; }
.swipe-control svg { width: 22px; height: 22px; }
.swipe-control.like { color: var(--berry); border-color: #f0ccd5; }
.swipe-control.love { background: var(--berry); color: white; border-color: var(--berry); }
.swipe-meta { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 11px; margin: 12px 3px 0; }
.swipe-tools { display: flex; justify-content: center; gap: 9px; }
.list-card { display: flex; gap: 14px; align-items: center; padding: 14px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); }
.list-cover { width: 62px; height: 62px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 15px; background: #eee5dc; color: #946d57; }
.list-cover svg { width: 35px; height: 35px; }
.list-main { min-width: 0; flex: 1; }
.list-main h3 { font: 700 14px Manrope,sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-main p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.item-card { padding: 11px; margin: 9px 0; display: grid; grid-template-columns: 74px minmax(0,1fr); gap: 11px; border: 1px solid var(--line); background: var(--surface); border-radius: 16px; }
.item-card .product-art { height: 74px; border-radius: 12px; }
.item-card .product-art svg { width: 48px; height: 48px; }
.item-main { min-width: 0; }
.item-main h3 { font-size: 13px; margin: 2px 0 5px; }
.item-main p { color: var(--muted); font-size: 11px; margin: 0 0 5px; line-height: 1.4; overflow-wrap: anywhere; }
.item-actions { grid-column: 1/-1; display: flex; gap: 8px; align-items: center; justify-content: end; }
.status { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; color: var(--sage-ink); background: var(--sage); border-radius: 999px; font-size: 10px; font-weight: 700; }
.status.pending { color: #895f1f; background: #fff3d7; }
.modal-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: end center; padding: 15px; background: rgba(31,28,26,.35); backdrop-filter: blur(4px); }
.modal { width: min(100%,520px); max-height: min(86dvh,800px); overflow: auto; padding: 22px; border: 1px solid var(--line); border-radius: 23px 23px 17px 17px; background: var(--surface); box-shadow: 0 22px 70px rgba(34,27,25,.2); animation: sheet-in .18s ease-out; }
@keyframes sheet-in { from { transform: translateY(20px); opacity:.5; } to { transform:none; opacity:1; } }
.modal-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:17px; }
.modal-head h2 { font-size:20px; }
.modal-close { border:0; width:34px; height:34px; border-radius:11px; background:var(--surface-2); font-size:19px; cursor:pointer; }
.form-stack { display:grid; gap:11px; }
.form-label { display:block; color:#656961; font-size:11px; font-weight:700; margin-bottom:5px; }
.textarea { width:100%; min-height:85px; padding:11px 12px; border:1px solid var(--line); border-radius:12px; outline:0; color:var(--ink); background:var(--surface); font-size:13px; resize:vertical; }
.form-help { color:var(--muted); font-size:10px; line-height:1.45; margin:0; }
.notice { padding:11px 13px; border-radius:12px; background:#f3eee6; color:#696963; font-size:11px; line-height:1.5; }
.notice.demo { background:#fff4dd; color:#745925; }
.gift-result { padding:15px; border-radius:15px; background:#f5f1ea; }
.gift-result h3 { margin-bottom:6px; }
.gift-result p { color:var(--muted); font-size:12px; line-height:1.5; margin:0; }
.game-card { padding:17px; margin:10px 0; border:1px solid var(--line); background:var(--surface); border-radius:18px; }
.game-card h3 { font-size:15px; }
.game-meta { display:flex; gap:7px; flex-wrap:wrap; margin:9px 0 13px; }
.game-link { display:flex; gap:7px; }
.place-card { padding:15px; border:1px solid var(--line); border-radius:17px; background:var(--surface); margin:10px 0; }
.place-card h3 { margin-bottom:5px; }
.place-card p { margin:0; color:var(--muted); font-size:12px; line-height:1.5; }
.admin-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:16px 0; }
.stat-card { padding:15px; border:1px solid var(--line); border-radius:17px; background:var(--surface); }
.stat-card strong { display:block; font:800 23px Manrope,sans-serif; margin-bottom:3px; }
.stat-card span { color:var(--muted); font-size:11px; }
.table-list { display:grid; gap:7px; }
.event-row { display:flex; justify-content:space-between; padding:10px 12px; border-radius:11px; background:#f3efe8; font-size:12px; }
.event-row span:last-child { font-weight:700; }
.loading { min-height:180px; display:grid; place-items:center; color:var(--muted); font-size:13px; }
.spinner { width:24px; height:24px; margin:0 auto 10px; border:2px solid #e7dce0; border-top-color:var(--berry); border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.toast { position:fixed; z-index:80; bottom:calc(84px + env(safe-area-inset-bottom)); left:50%; transform:translate(-50%,12px); max-width:calc(100% - 32px); padding:11px 15px; border-radius:12px; background:#302e2c; color:white; font-size:12px; opacity:0; pointer-events:none; transition:all .2s; box-shadow:var(--shadow); text-align:center; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.toast.error { background:#8b273e; }
.boot { min-height:100dvh; display:flex; gap:11px; align-items:center; justify-content:center; color:var(--muted); font-size:13px; }
.skeleton { min-height:150px; background:linear-gradient(90deg,#f1ede7,#faf7f2,#f1ede7); background-size:200% 100%; border-radius:18px; animation:skeleton 1.2s infinite; }
@keyframes skeleton { to { background-position:-200% 0; } }
.hidden { display:none!important; }
@media (min-width:760px) {
  .main { padding:30px 30px 45px; }
  .topbar { padding:0 30px; }
  .hero { min-height:320px; padding:40px; }
  .quick-actions { grid-template-columns:repeat(4,1fr); }
  .product-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; }
  .product-art { height:180px; }
  .collection-row { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .collection-card { min-height:155px; }
  .bottom-nav { bottom:16px; border-bottom:1px solid var(--line); border-radius:18px; padding:5px 10px; }
  .nav-item { min-height:48px; flex-direction:row; font-size:12px; gap:7px; }
  .nav-item.active::before { display:none; }
  .app-shell { padding-bottom:100px; }
  .toast { bottom:88px; }
  .modal-backdrop { place-items:center; }
  .modal { border-radius:23px; }
}
@media (max-width:430px) {
  .topbar { height:62px; padding:0 15px; }
  .main { padding:16px 15px 25px; }
  .hero { min-height:300px; padding:23px 18px; align-items:flex-start; }
  .hero-art { width:48%; height:56%; right:-4px; bottom:0; opacity:.75; }
  .hero-copy { width:100%; }
  .hero h1 { max-width:300px; font-size:30px; }
  .hero p { max-width:300px; font-size:12px; }
  .hero-search { position:relative; z-index:3; }
  .quick-card { padding:12px; min-height:88px; }
  .quick-card strong { font-size:12px; }
  .quick-card small { font-size:10px; }
  .quick-icon { width:36px; height:36px; }
  .product-art { height:130px; }
  .product-art svg { width:98px; height:98px; }
  .filters { grid-template-columns:minmax(0,1fr) auto; }
  .filters .sort-select { grid-column:1/-1; }
  .demo-pill { font-size:10px; padding:6px 8px; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }

/* Dark, card-led visual language inspired by the supplied references. */
:root {
  color-scheme: dark;
  --paper: #09090c;
  --surface: #15151a;
  --surface-2: #202027;
  --ink: #f7f6fa;
  --muted: #a3a1aa;
  --line: #2c2b33;
  --berry: #8b6cff;
  --berry-dark: #7252e8;
  --berry-soft: #28213d;
  --sage: #1a302c;
  --sage-ink: #8de2c5;
  --gold: #e1bb76;
  --shadow: 0 18px 50px rgba(0,0,0,.34);
  --shadow-sm: 0 8px 24px rgba(0,0,0,.24);
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
html, body { color:var(--ink); background:#09090c; }
body { background:radial-gradient(ellipse at 50% -18%, rgba(93,70,171,.16), transparent 42%), #09090c; }
.app-shell { max-width:1000px; }
.topbar { background:rgba(9,9,12,.88); border-color:rgba(255,255,255,.07); }
.brand { color:#f8f7fb; }
.brand-mark { color:#fff; background:linear-gradient(145deg,#a58cff,#6949db); box-shadow:0 8px 22px rgba(126,94,246,.28); }
.brand-mark svg { width:20px; height:20px; }
.demo-pill, .user-chip { color:#c5c2cc; border-color:var(--line); background:#17171c; }
.user-chip { color:#f5f4f8; }
.main { padding-top:20px; }
.bottom-nav { background:rgba(18,18,23,.96); border-color:#302f37; box-shadow:0 -10px 35px rgba(0,0,0,.38); }
.nav-item { color:#85838d; }
.nav-item.active { color:#b5a4ff; }
.nav-item.active::before { background:#9a82ff; }
.eyebrow { color:#b5a4ff; letter-spacing:.09em; }
h1,h2,h3 { color:#f7f6fa; }
.hero { min-height:310px; padding:32px; border:1px solid rgba(183,161,255,.18); background:radial-gradient(ellipse at 86% 20%,rgba(120,89,233,.25),transparent 36%),linear-gradient(135deg,#1b1924 0%,#15141b 57%,#101014 100%); box-shadow:var(--shadow-sm); }
.hero-copy { max-width:560px; }
.hero .eyebrow { display:flex; gap:7px; align-items:center; color:#c0b2ff; }
.hero-spark svg { width:15px; height:15px; }
.hero h1 { max-width:500px; color:#fbfaff; font-size:clamp(36px,7vw,56px); line-height:1.02; letter-spacing:-.055em; margin:16px 0 13px; }
.hero h1 em { color:#b4a2ff; font-style:normal; }
.hero p { max-width:390px; color:#b3b0bb; font-size:14px; line-height:1.55; margin-bottom:19px; }
.hero .hero-art { width:37%; max-width:300px; right:5px; bottom:0; height:100%; opacity:1; }
.hero-orbit { position:absolute; display:block; border:1px solid rgba(188,169,255,.19); border-radius:50%; }
.orbit-one { width:210px; height:210px; right:15px; top:44px; box-shadow:inset 0 0 48px rgba(133,106,236,.12),0 0 45px rgba(133,106,236,.10); }
.orbit-two { width:144px; height:144px; right:48px; top:77px; border-color:rgba(188,169,255,.12); }
.hero-gift { width:90px; height:90px; display:grid; place-items:center; position:relative; z-index:1; color:#e2d9ff; border:1px solid rgba(210,196,255,.2); border-radius:30px; background:linear-gradient(145deg,rgba(144,115,255,.32),rgba(66,52,105,.38)); box-shadow:0 18px 50px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.13); transform:rotate(-8deg); }
.hero-gift svg { width:48px; height:48px; }
.hero-caption { display:flex; align-items:center; gap:8px; color:#85828e; font-size:10px; margin-top:12px; }
.hero-dot { width:6px; height:6px; border-radius:50%; background:#a78eff; box-shadow:0 0 10px #8b6cff; }
.hero-search { max-width:470px; padding:6px 6px 6px 14px; border:1px solid #35323e; background:#0d0d11; box-shadow:0 10px 24px rgba(0,0,0,.18); }
.hero-search input { color:#f7f6fa; }
.hero-search input::placeholder { color:#77747f; }
.search-symbol { width:18px; height:18px; flex:0 0 auto; }
.search-symbol { color:#a8a4b1; }
.btn { color:#fff; background:linear-gradient(135deg,#9a7cff,#7453e8); box-shadow:0 5px 18px rgba(124,91,239,.16); }
.btn:hover { color:#fff; background:linear-gradient(135deg,#aa93ff,#8062ee); box-shadow:0 8px 22px rgba(124,91,239,.24); }
.btn.secondary { color:#eeedf2; background:#202027; border-color:#383740; }
.btn.secondary:hover { color:#fff; background:#292832; }
.btn.soft { color:#c2b5ff; background:#2b2440; }
.btn.ghost { color:#a3a1aa; }
.btn.ghost:hover { color:#c2b5ff; background:#252036; }
.quick-actions { gap:11px; margin:16px 0 28px; }
.quick-card { min-height:92px; color:#f6f5f8; border-color:#2d2c34; background:linear-gradient(145deg,#19191f,#131317); box-shadow:0 4px 16px rgba(0,0,0,.16); }
.quick-card:hover { border-color:#484056; box-shadow:0 10px 26px rgba(0,0,0,.28); }
.quick-card strong { color:#f5f4f8; }
.quick-card small { color:#9996a1; }
.quick-feature { border-color:rgba(151,124,255,.3); background:linear-gradient(135deg,#211c30,#16151c); }
.quick-icon { color:#c4b5ff; background:#302749; }
.quick-icon.sage { color:#9be7ce; background:#1d3832; }
.section { margin:27px 0; }
.section-head { align-items:center; margin-bottom:13px; }
.section-head p { color:#8f8d97; }
.text-link { color:#b3a0ff; }
.category-row { gap:8px; padding-bottom:5px; }
.category-chip { color:#c4c1cb; border-color:#302f37; background:#15151a; }
.category-chip:hover,.category-chip.selected { color:#c6b8ff; border-color:#7660c3; background:#28223b; }
.product-grid { gap:12px; }
.product-card { position:relative; color:var(--ink); background:#15151a; border-color:#2b2a32; border-radius:20px; box-shadow:0 7px 24px rgba(0,0,0,.2); transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.product-card:hover { transform:translateY(-3px); border-color:#464050; box-shadow:0 14px 32px rgba(0,0,0,.3); }
.art-button { display:block; width:100%; padding:0; border:0; background:transparent; cursor:pointer; }
.product-art { height:164px; color:#d9d0ff; background:radial-gradient(circle at 50% 42%,rgba(148,120,255,.22),transparent 37%),linear-gradient(135deg,#272431,#19191f); }
.product-art::before { background:rgba(190,175,255,.09); }
.product-art::after { background:rgba(255,255,255,.055); }
.product-art svg { width:104px; height:104px; stroke-width:1.35; filter:drop-shadow(0 9px 8px rgba(0,0,0,.34)); }
.art--lamp,.art--ticket { color:#efcf96; background:radial-gradient(circle at 50% 45%,rgba(230,176,94,.18),transparent 38%),linear-gradient(135deg,#2c261f,#1a191b); }
.art--headphones,.art--keyboard,.art--gamepad,.art--cards { color:#a8c2ff; background:radial-gradient(circle at 50% 42%,rgba(87,129,226,.24),transparent 38%),linear-gradient(135deg,#202632,#17191e); }
.art--book,.art--plant,.art--paw,.art--bottle { color:#a4e0c2; background:radial-gradient(circle at 50% 42%,rgba(92,176,134,.2),transparent 38%),linear-gradient(135deg,#202b27,#171a1b); }
.art--care,.art--flower { color:#f3a8c4; background:radial-gradient(circle at 50% 42%,rgba(214,108,159,.2),transparent 38%),linear-gradient(135deg,#2a2029,#19171c); }
.art--coffee,.art--candle,.art--mug { color:#e7bd9a; background:radial-gradient(circle at 50% 42%,rgba(181,119,75,.18),transparent 38%),linear-gradient(135deg,#2a241f,#19191b); }
.art--star,.art--puzzle,.art--scarf { color:#d7b6f4; background:radial-gradient(circle at 50% 42%,rgba(163,117,207,.2),transparent 38%),linear-gradient(135deg,#292230,#19181d); }
.demo-tag,.ad-tag { background:rgba(12,12,16,.76); color:#b9b6c0; border:1px solid rgba(255,255,255,.1); backdrop-filter:blur(8px); }
.ad-tag { color:#f2d596; background:rgba(61,46,20,.82); }
.card-favorite { position:absolute; z-index:3; top:10px; right:10px; background:rgba(12,12,16,.78); border-color:rgba(255,255,255,.16); color:#f5f3fa; backdrop-filter:blur(8px); }
.card-favorite:hover,.card-favorite.saved { color:#ff9fc4; background:rgba(45,25,40,.9); border-color:rgba(255,159,196,.34); }
.product-info { padding:12px 12px 13px; }
.product-card-top { min-height:18px; display:flex; justify-content:space-between; align-items:center; gap:7px; }
.product-info .category-label { color:#a9a6b1; font-size:10px; margin:0; }
.demo-mark { color:#a9a3b6; font-size:8px; font-weight:800; letter-spacing:.08em; }
.product-info h3 { height:auto; min-height:35px; overflow:hidden; margin:7px 0 4px; color:#f6f5f8; font:700 13px/1.35 Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
.product-description { display:-webkit-box; min-height:30px; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; margin:0 0 10px; color:#95929d; font-size:10px; line-height:1.45; }
.product-price-row { display:flex; flex-direction:column; gap:2px; min-height:40px; }
.product-price { color:#f7f6fa; font:800 17px/1.2 Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
.product-price-row span { color:#797681; font-size:9px; }
.product-actions { padding-top:10px; }
.add-btn { display:flex; align-items:center; justify-content:center; gap:6px; min-height:37px; border-radius:11px; color:#fff; background:linear-gradient(135deg,#9273ff,#704fe4); font-size:11px; }
.add-btn:hover { color:#fff; background:linear-gradient(135deg,#a68eff,#8062ee); }
.add-btn svg { width:15px; height:15px; }
.collection-row { gap:10px; }
.collection-card { min-height:128px; color:#f5f3f8; border-color:#302e37; background:linear-gradient(140deg,#1b2020,#15181a); }
.collection-card:nth-child(3n+2) { background:linear-gradient(140deg,#251d26,#17161b); }
.collection-card:nth-child(3n) { background:linear-gradient(140deg,#27231c,#171719); }
.collection-card strong { color:#f5f3f8; }
.collection-card small { color:#a5a1ab; }
.collection-card svg { color:#c3b2ff; opacity:.26; }
.banner { border-color:#34303f; background:linear-gradient(135deg,#201c2b,#17161c); }
.banner p { color:#aaa6b1; }
.banner-art { color:#c2b3ff; }
.screen-title p { color:#a5a2ad; }
.field,.select,.textarea { color:#f4f3f7; border-color:#383740; background:#17171c; }
.field::placeholder,.textarea::placeholder { color:#797681; }
.field:focus,.select:focus,.textarea:focus { border-color:#8269dc; box-shadow:0 0 0 3px rgba(139,108,255,.12); }
.range-label,.range-wrap { color:#aaa7b1; }
input[type=range] { accent-color:#9a7cff; }
.empty { color:#aaa7b1; border-color:#393640; background:rgba(20,20,25,.76); }
.empty-art { color:#c5b7ff; background:#302749; }
.empty h3 { color:#f7f6fa; }
.list-card,.item-card,.game-card,.place-card,.stat-card { color:#f6f5f8; border-color:#302f37; background:#15151a; }
.list-cover { color:#c5b7ff; background:#2a243a; }
.list-main p,.item-main p,.place-card p { color:#aaa7b1; }
.status { color:#9ee6ca; background:#1b342e; }
.status.pending { color:#f0ce8f; background:#382e1b; }
.modal-backdrop { background:rgba(0,0,0,.72); }
.modal { color:#f7f6fa; border-color:#34323b; background:#17171c; box-shadow:0 25px 90px rgba(0,0,0,.6); }
.modal-close { color:#d3d0d8; background:#29282f; }
.form-label { color:#c6c3cc; }
.form-help,.loading { color:#9c99a3; }
.notice { color:#b7b3bd; background:#222127; }
.notice.demo { color:#e4cb99; background:#2c261c; }
.gift-result { background:#222127; }
.event-row { background:#24232a; }
.spinner { border-color:#34313e; border-top-color:#a48cff; }
.toast { color:#fff; background:#29272f; }
.toast.error { background:#8b2b47; }
.boot { color:#aaa7b1; }
.skeleton { background:linear-gradient(90deg,#1a191f,#24232a,#1a191f); background-size:200% 100%; }
.demo-note { display:flex; gap:12px; align-items:flex-start; padding:15px; border:1px solid #302f37; border-radius:16px; background:#15151a; }
.demo-note-icon { flex:0 0 auto; color:#a894ff; }
.demo-note-icon svg { width:20px; height:20px; }
.demo-note strong { display:block; margin-bottom:4px; color:#e9e6f0; font-size:12px; }
.demo-note p { margin:0; color:#9996a1; font-size:11px; line-height:1.45; }
@media (min-width:760px) {
  .main { padding-top:28px; }
  .hero { min-height:330px; padding:40px; }
  .product-grid { gap:16px; }
  .product-art { height:190px; }
}
@media (max-width:430px) {
  .hero { min-height:246px; padding:16px 17px 14px; }
  .hero h1 { max-width:270px; font-size:32px; margin:9px 0 7px; }
  .hero p { max-width:280px; font-size:10px; line-height:1.45; margin-bottom:9px; }
  .hero .hero-art { width:39%; height:42%; right:0; bottom:4px; opacity:.76; }
  .orbit-one { width:145px; height:145px; right:-3px; top:9px; }
  .orbit-two { width:100px; height:100px; right:20px; top:31px; }
  .hero-gift { width:62px; height:62px; border-radius:22px; }
  .hero-gift svg { width:34px; height:34px; }
  .hero-caption { margin-top:6px; font-size:8px; }
  .section-head { margin-bottom:9px; }
  .section-head p { font-size:10px; }
  .product-art { height:110px; }
  .quick-card { min-height:88px; }
  .product-info { padding:10px; }
  .product-info h3 { font-size:12px; }
  .product-description { font-size:9px; }
  .product-price { font-size:15px; }
  .product-price-row { min-height:37px; }
  .add-btn { min-height:34px; font-size:10px; }
  .card-favorite { width:31px; height:31px; }
  .card-favorite svg { width:15px; height:15px; }
}