/* ===================================================================== store.css — Liamverse Store "Signal" redesign Dense data-terminal energy with premium finish. Bloomberg terminal × Vercel dashboard. ===================================================================== */ /* ============================================================ FONT IMPORTS — loaded via in for performance. Do NOT use @import here (it blocks rendering). ============================================================ */ /* ============================================================ RESET & ROOT ============================================================ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} html,body{height:100%;overflow:hidden;} body{ font-family:var(--font-body); font-size:15px; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; background:var(--bg-base); color:var(--text-primary); } /* ============================================================ DESIGN TOKENS — 5 themes x light/dark 1 Signal (violet, default) · 2 Ember (orange) · 3 Mono 4 Aurora (teal) · 5 Rouge (crimson) Selected via [data-theme] + [data-mode] on and #app. ============================================================ */ :root{ /* Typography */ --font-display:'Space Grotesk',sans-serif; --font-body:'Inter',sans-serif; --font-mono:'JetBrains Mono',monospace; /* Radii */ --r-pill:6px; --r-card:8px; --r-btn:4px; --r-tab:0px; /* Spacing */ --page-padding:14px; /* Shared fixed tones */ --warn:#FBBF24; --accent-danger:#F43F5E; --overlay:rgba(0,0,0,.6); --scrim-strong:rgba(var(--bg-surface-rgb),.90); --scrim-soft:rgba(var(--bg-surface-rgb),0); /* Legacy aliases (used by JS-generated inline styles and some components) */ --a:var(--accent-primary); --a2:var(--accent-primary); --ad:rgba(var(--accent-rgb),.1); --al:var(--accent-primary); --bg:var(--bg-base); --sf:var(--bg-surface); --s2:var(--bg-elevated); --tx:var(--text-primary); --mu:var(--text-secondary); --mu2:var(--text-data); --bd:var(--border-subtle); --nb:var(--bg-base); --ff:var(--font-body); } /* ── THEME 1 · SIGNAL — dark (default) ─────────────────────── */ :root, [data-theme="1"]{ --bg-base:#0A0A0F; --bg-surface:#111118; --bg-surface-rgb:17,17,24; --bg-elevated:#1A1A28; --accent-primary:#7C5CFC; --accent-rgb:124,92,252; --accent-contrast:#FFFFFF; --accent-hot:#FF4D6D; --hot-rgb:255,77,109; --accent-new:#00E5A0; --new-rgb:0,229,160; --text-primary:#F0F0FF; --text-secondary:#8585A0; --text-data:#A8A8D0; --border-subtle:rgba(124,92,252,0.12); --border-active:rgba(124,92,252,0.45); --shadow-pop:0 8px 30px rgba(0,0,0,.5); --shadow-sm:0 1px 2px rgba(0,0,0,.35); --shadow-md:0 4px 16px rgba(0,0,0,.45); --elevation-border:inset 0 1px 0 rgba(255,255,255,.04); } /* THEME 1 · SIGNAL — light */ [data-theme="1"][data-mode="light"]{ --bg-base:#F5F5FB; --bg-surface:#FFFFFF; --bg-surface-rgb:255,255,255; --bg-elevated:#ECECF7; --accent-primary:#6847F5; --accent-rgb:104,71,245; --accent-contrast:#FFFFFF; --accent-hot:#E11D48; --hot-rgb:225,29,72; --accent-new:#059669; --new-rgb:5,150,105; --text-primary:#16162B; --text-secondary:#6E6E8F; --text-data:#44446B; --border-subtle:rgba(104,71,245,0.16); --border-active:rgba(104,71,245,0.5); --shadow-pop:0 8px 30px rgba(22,22,43,.14); --shadow-sm:0 1px 2px rgba(22,22,43,.06); --shadow-md:0 4px 16px rgba(22,22,43,.10); --elevation-border:inset 0 1px 0 rgba(255,255,255,.7); } /* ── THEME 2 · EMBER — dark ────────────────────────────────── */ [data-theme="2"]{ --bg-base:#0F0C08; --bg-surface:#171310; --bg-surface-rgb:23,19,16; --bg-elevated:#211B15; --accent-primary:#FF7A1A; --accent-rgb:255,122,26; --accent-contrast:#FFFFFF; --accent-hot:#FF4D4D; --hot-rgb:255,77,77; --accent-new:#3DDC97; --new-rgb:61,220,151; --text-primary:#F7F1E8; --text-secondary:#A89A88; --text-data:#D2C6B2; --border-subtle:rgba(255,122,26,0.14); --border-active:rgba(255,122,26,0.5); --shadow-pop:0 8px 30px rgba(0,0,0,.5); --shadow-sm:0 1px 2px rgba(0,0,0,.35); --shadow-md:0 4px 16px rgba(0,0,0,.45); --elevation-border:inset 0 1px 0 rgba(255,255,255,.04); } /* THEME 2 · EMBER — light */ [data-theme="2"][data-mode="light"]{ --bg-base:#FBF5EE; --bg-surface:#FFFFFF; --bg-surface-rgb:255,255,255; --bg-elevated:#F4EBDF; --accent-primary:#E8630A; --accent-rgb:232,99,10; --accent-contrast:#FFFFFF; --accent-hot:#DC2626; --hot-rgb:220,38,38; --accent-new:#059669; --new-rgb:5,150,105; --text-primary:#241505; --text-secondary:#8A7A66; --text-data:#5C4B38; --border-subtle:rgba(232,99,10,0.18); --border-active:rgba(232,99,10,0.55); --shadow-pop:0 8px 30px rgba(36,21,5,.13); --shadow-sm:0 1px 2px rgba(36,21,5,.06); --shadow-md:0 4px 16px rgba(36,21,5,.10); --elevation-border:inset 0 1px 0 rgba(255,255,255,.7); } /* ── THEME 3 · MONO — dark ─────────────────────────────────── */ [data-theme="3"]{ --bg-base:#09090B; --bg-surface:#111113; --bg-surface-rgb:17,17,19; --bg-elevated:#1A1A1D; --accent-primary:#F4F4F5; --accent-rgb:244,244,245; --accent-contrast:#0A0A0B; --accent-hot:#F87171; --hot-rgb:248,113,113; --accent-new:#4ADE80; --new-rgb:74,222,128; --text-primary:#F4F4F5; --text-secondary:#8E8E96; --text-data:#C4C4CC; --border-subtle:rgba(244,244,245,0.10); --border-active:rgba(244,244,245,0.32); --shadow-pop:0 8px 30px rgba(0,0,0,.55); --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 4px 16px rgba(0,0,0,.5); --elevation-border:inset 0 1px 0 rgba(255,255,255,.04); } /* THEME 3 · MONO — light */ [data-theme="3"][data-mode="light"]{ --bg-base:#FAFAFA; --bg-surface:#FFFFFF; --bg-surface-rgb:255,255,255; --bg-elevated:#F0F0F1; --accent-primary:#18181B; --accent-rgb:24,24,27; --accent-contrast:#FFFFFF; --accent-hot:#DC2626; --hot-rgb:220,38,38; --accent-new:#16A34A; --new-rgb:22,163,74; --text-primary:#18181B; --text-secondary:#71717A; --text-data:#3F3F46; --border-subtle:rgba(24,24,27,0.12); --border-active:rgba(24,24,27,0.4); --shadow-pop:0 8px 30px rgba(24,24,27,.12); --shadow-sm:0 1px 2px rgba(24,24,27,.06); --shadow-md:0 4px 16px rgba(24,24,27,.09); --elevation-border:inset 0 1px 0 rgba(255,255,255,.7); } /* ── THEME 4 · AURORA — dark ───────────────────────────────── */ [data-theme="4"]{ --bg-base:#05100D; --bg-surface:#0A1713; --bg-surface-rgb:10,23,19; --bg-elevated:#102019; --accent-primary:#2DD4A7; --accent-rgb:45,212,167; --accent-contrast:#04241B; --accent-hot:#FB7185; --hot-rgb:251,113,133; --accent-new:#38BDF8; --new-rgb:56,189,248; --text-primary:#E9FBF4; --text-secondary:#7E9A90; --text-data:#A9CFC1; --border-subtle:rgba(45,212,167,0.13); --border-active:rgba(45,212,167,0.45); --shadow-pop:0 8px 30px rgba(0,0,0,.5); --shadow-sm:0 1px 2px rgba(0,0,0,.35); --shadow-md:0 4px 16px rgba(0,0,0,.45); --elevation-border:inset 0 1px 0 rgba(255,255,255,.04); } /* THEME 4 · AURORA — light */ [data-theme="4"][data-mode="light"]{ --bg-base:#F1FAF6; --bg-surface:#FFFFFF; --bg-surface-rgb:255,255,255; --bg-elevated:#E5F3EC; --accent-primary:#0C9373; --accent-rgb:12,147,115; --accent-contrast:#FFFFFF; --accent-hot:#E11D48; --hot-rgb:225,29,72; --accent-new:#0284C7; --new-rgb:2,132,199; --text-primary:#0B241C; --text-secondary:#5E7A70; --text-data:#33544A; --border-subtle:rgba(12,147,115,0.18); --border-active:rgba(12,147,115,0.5); --shadow-pop:0 8px 30px rgba(11,36,28,.13); --shadow-sm:0 1px 2px rgba(11,36,28,.06); --shadow-md:0 4px 16px rgba(11,36,28,.10); --elevation-border:inset 0 1px 0 rgba(255,255,255,.7); } /* ── THEME 5 · ROUGE — dark ────────────────────────────────── */ [data-theme="5"]{ --bg-base:#100A0E; --bg-surface:#171016; --bg-surface-rgb:23,16,22; --bg-elevated:#211722; --accent-primary:#F43F6B; --accent-rgb:244,63,107; --accent-contrast:#FFFFFF; --accent-hot:#FB923C; --hot-rgb:251,146,60; --accent-new:#34D399; --new-rgb:52,211,153; --text-primary:#FAF0F4; --text-secondary:#A58B98; --text-data:#D6B9C7; --border-subtle:rgba(244,63,107,0.14); --border-active:rgba(244,63,107,0.45); --shadow-pop:0 8px 30px rgba(0,0,0,.5); --shadow-sm:0 1px 2px rgba(0,0,0,.35); --shadow-md:0 4px 16px rgba(0,0,0,.45); --elevation-border:inset 0 1px 0 rgba(255,255,255,.04); } /* THEME 5 · ROUGE — light */ [data-theme="5"][data-mode="light"]{ --bg-base:#FBF4F6; --bg-surface:#FFFFFF; --bg-surface-rgb:255,255,255; --bg-elevated:#F5E8EC; --accent-primary:#DB2358; --accent-rgb:219,35,88; --accent-contrast:#FFFFFF; --accent-hot:#EA580C; --hot-rgb:234,88,12; --accent-new:#059669; --new-rgb:5,150,105; --text-primary:#26101A; --text-secondary:#92707E; --text-data:#5E3D4C; --border-subtle:rgba(219,35,88,0.16); --border-active:rgba(219,35,88,0.5); --shadow-pop:0 8px 30px rgba(38,16,26,.13); --shadow-sm:0 1px 2px rgba(38,16,26,.06); --shadow-md:0 4px 16px rgba(38,16,26,.10); --elevation-border:inset 0 1px 0 rgba(255,255,255,.7); } /* Legacy stored themes 6/7 fall back to Signal via JS validation. */ /* ============================================================ APP SHELL ============================================================ */ #app{ font-family:var(--font-body); background:var(--bg-base); color:var(--text-primary); height:100dvh; display:flex; flex-direction:column; overflow:hidden; max-width:480px; margin:0 auto; position:relative; } /* ============================================================ SCROLLBAR ============================================================ */ ::-webkit-scrollbar{width:4px;} ::-webkit-scrollbar-track{background:var(--bg-base);} ::-webkit-scrollbar-thumb{background:var(--accent-primary);border-radius:2px;opacity:.5;} *{scrollbar-width:thin;scrollbar-color:var(--accent-primary) var(--bg-base);} /* ============================================================ TOPBAR — tight 48px header ============================================================ */ .topbar{ display:flex;align-items:center;justify-content:space-between; padding:0 var(--page-padding); height:48px; padding-top:max(0px, env(safe-area-inset-top)); background:var(--bg-surface); border-bottom:1px solid var(--border-subtle); flex-shrink:0; z-index:10; } .brand{display:flex;align-items:center;gap:10px;} .brand-icon{ width:28px;height:28px; display:flex;align-items:center;justify-content:center; flex-shrink:0;overflow:hidden; border-radius:6px; background:var(--accent-primary); } .brand-icon{color:var(--accent-contrast);} .brand-icon svg{ width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2; } .brand-icon svg [fill]:not([fill="none"]){fill:currentColor;} .brand-icon img{width:100%;height:100%;object-fit:cover;} .brand-name{ font-family:var(--font-display); font-size:15px;font-weight:700;color:var(--text-primary); letter-spacing:.02em;text-transform:uppercase; } .brand-sub{ font-family:var(--font-mono); font-size:9px;color:var(--text-secondary); letter-spacing:.08em;text-transform:uppercase; } .topbar-right{display:flex;align-items:center;gap:6px;} .bal-pill{ display:flex;align-items:center;gap:5px; background:transparent;border:1px solid var(--border-subtle);color:var(--text-data); font-family:var(--font-mono); font-size:12px;font-weight:600;padding:5px 10px; border-radius:var(--r-pill); font-variant-numeric:tabular-nums;cursor:pointer; transition:border-color .15s; } .bal-pill:hover{border-color:var(--border-active);} .bal-pill svg{width:13px;height:13px;stroke:var(--text-secondary);fill:none;stroke-width:2;} .icon-btn{ position:relative; width:32px;height:32px;background:transparent;border:1px solid var(--border-subtle); display:flex;align-items:center;justify-content:center;cursor:pointer; border-radius:var(--r-pill); transition:background .15s,border-color .15s; } .icon-btn:hover{background:var(--bg-elevated);border-color:var(--border-active);} .icon-btn svg{width:15px;height:15px;stroke:var(--text-secondary);fill:none;stroke-width:1.9;} .icon-btn .dot{ position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%; background:var(--accent-hot);display:none; } .icon-btn.has-unread .dot{display:block;} @media (prefers-reduced-motion: no-preference){ .icon-btn.has-unread .dot{ animation:bellPulse 2s ease-in-out infinite; } } @keyframes bellPulse{ 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.6;transform:scale(1.3);} } /* ============================================================ SECTION TABS — underline style, no pills ============================================================ */ .sec-tabs{ display:flex;background:var(--bg-surface); border-bottom:1px solid var(--border-subtle); overflow-x:auto;scrollbar-width:none;flex-shrink:0; padding:0 var(--page-padding);gap:0; position:sticky;top:0;z-index:5; min-height:42px; } .sec-tabs::-webkit-scrollbar{display:none;} .sec-tab{ flex-shrink:0;cursor:pointer; font-family:var(--font-body), 'Inter', -apple-system, sans-serif; font-size:13px;font-weight:500; color:var(--text-secondary); transition:color .2s,border-color .2s,background .2s;white-space:nowrap; background:none !important;border:none; padding:11px 13px !important; border-bottom:2px solid transparent !important; border-radius:0 !important; text-transform:none !important; letter-spacing:.01em !important; position:relative; line-height:1.2; } .sec-tab:hover{color:var(--text-data);} .sec-tab.on{ color:var(--text-primary) !important; background:var(--bg-elevated) !important; border-bottom-color:transparent !important; font-weight:600; } /* ============================================================ PAGE SYSTEM ============================================================ */ .pages{flex:1;overflow:hidden;position:relative;} .page{ position:absolute;inset:0; overflow-y:auto;overflow-x:hidden; display:none;flex-direction:column; -webkit-overflow-scrolling:touch; } .page.active{display:flex;} /* ============================================================ SECTION HEADINGS — monospace label with extending line ============================================================ */ .section-label{ padding:20px var(--page-padding) 12px; font-family:var(--font-mono); font-size:11px;font-weight:400;color:var(--text-secondary); text-transform:uppercase;letter-spacing:.15em; display:flex;align-items:center;gap:12px; } .section-label::after{ content:'';flex:1;height:1px; background:var(--border-subtle); } .section-blurb{ padding:14px 18px 6px;text-align:center; font-style:normal;font-size:13px;line-height:1.5;color:var(--text-secondary); } .section-thin{ padding:6px 14px 2px;font-size:13px;color:var(--text-secondary); } .hr-soft{height:1px;background:var(--border-subtle);margin:10px 14px 2px;border:none;} /* ============================================================ TODAY'S PICK (featured hero) — with animated gradient border ============================================================ */ .pick-card{ margin:14px 12px 4px;border-radius:var(--r-card); background:var(--bg-surface); position:relative;overflow:hidden;cursor:pointer; min-height:180px;display:flex;align-items:stretch; /* Animated gradient border via padding trick */ padding:1px; background:linear-gradient(135deg, var(--accent-primary), var(--accent-new), var(--accent-primary)); background-size:200% 200%; } @media (prefers-reduced-motion: no-preference){ .pick-card{animation:gradientBorder 6s ease infinite;} } @keyframes gradientBorder{ 0%{background-position:0% 50%;} 50%{background-position:100% 50%;} 100%{background-position:0% 50%;} } .pick-card > *{position:relative;z-index:2;} .pick-card.has-img{ background:linear-gradient(135deg, var(--accent-primary), var(--accent-new), var(--accent-primary)); background-size:200% 200%; } .pick-bg{ position:absolute;inset:1px;width:calc(100% - 2px);height:calc(100% - 2px); object-fit:cover;object-position:center; opacity:.35;z-index:0; border-radius:calc(var(--r-card) - 1px); } .pick-card::before{ content:'';position:absolute;inset:1px;z-index:0; background:var(--bg-surface); border-radius:calc(var(--r-card) - 1px); } .pick-card.has-img::before{ background:linear-gradient(180deg, var(--scrim-soft) 0%, var(--scrim-strong) 55%, var(--scrim-strong) 100%); } .pick-card::after{ content:'';position:absolute;right:10%;top:50%;transform:translateY(-50%); width:140px;height:140px;z-index:0; background:var(--accent-primary);opacity:.06; border-radius:50%; filter:blur(1px); pointer-events:none; } .pick-card.has-img::after{display:none;} .pick-content{ position:relative;z-index:2; display:flex;flex-direction:column;justify-content:center; padding:24px 20px;flex:1; } .pick-label{ font-family:var(--font-mono); font-size:11px;font-weight:400;letter-spacing:.12em;text-transform:uppercase; color:var(--text-secondary); } .pick-name{ font-family:var(--font-display); font-size:28px;font-weight:700;color:var(--text-primary); margin:8px 0 16px;letter-spacing:-.02em;line-height:1.1; } .pick-buy{ align-self:flex-start;position:relative; background:var(--accent-primary);border:none;color:var(--accent-contrast); font-family:var(--font-body);font-size:13px;font-weight:600; padding:10px 18px;border-radius:var(--r-btn);cursor:pointer; transition:transform .15s,brightness .15s,box-shadow .15s; } @media (prefers-reduced-motion: no-preference){ .pick-buy:hover{ transform:translateY(-1px); filter:brightness(1.15); box-shadow:0 4px 16px rgba(var(--accent-rgb),.35); } } .pick-card.has-img .pick-buy{ background:rgba(var(--accent-rgb),.85); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); } /* ============================================================ FILTER / SEARCH BAR ============================================================ */ .filter-bar{display:flex;align-items:center;gap:8px;padding:12px var(--page-padding) 6px;} .search-wrap{ flex:1;display:flex;align-items:center;gap:8px; background:var(--bg-elevated); border:1px solid var(--border-subtle); border-radius:var(--r-pill);padding:0 12px; transition:border-color .2s,box-shadow .2s; } .search-wrap:focus-within{ border-color:var(--border-active); box-shadow:0 0 0 3px rgba(var(--accent-rgb),0.08); } .search-wrap svg{width:14px;height:14px;stroke:var(--text-secondary);fill:none;stroke-width:2;flex-shrink:0;} .search-wrap input{ flex:1;background:none;border:none;outline:none;color:var(--text-primary); font-family:var(--font-body);font-size:13px;padding:9px 0;min-width:0; } .search-wrap input::placeholder{color:var(--text-secondary);} .sort-trigger-wrap{position:relative;flex-shrink:0;} .sort-trigger{ display:flex;align-items:center;justify-content:center; width:36px;height:36px;flex-shrink:0; background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--r-pill); color:var(--text-secondary);cursor:pointer; transition:border-color .15s,color .15s; } .sort-trigger:hover{border-color:var(--border-active);color:var(--text-primary);} .sort-trigger svg{width:16px;height:16px;} .sort-popover{ position:absolute;top:calc(100% + 6px);right:0;z-index:20; min-width:150px; background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--r-card); box-shadow:var(--shadow-md); padding:4px; display:none;flex-direction:column;gap:1px; } .sort-popover.open{display:flex;} .sort-opt{ display:flex;align-items:center;justify-content:space-between;gap:10px; width:100%;background:none;border:none;border-radius:calc(var(--r-card) - 3px); padding:8px 10px;cursor:pointer;text-align:left; font-family:var(--font-body);font-size:12.5px;font-weight:500;color:var(--text-primary); transition:background .12s; } .sort-opt:hover{background:var(--bg-surface);} .sort-opt.on{color:var(--accent-primary);font-weight:600;} .sort-opt svg{width:13px;height:13px;flex-shrink:0;} /* ============================================================ PRODUCT GRID ============================================================ */ .prod-grid{ display:grid;grid-template-columns:1fr 1fr; gap:14px;padding:4px 12px 20px; } .prod-card{ background:var(--bg-surface);border:1px solid var(--border-subtle); border-radius:var(--r-card);overflow:hidden; cursor:pointer; transition:transform .2s cubic-bezier(.4,0,.2,1),border-color .2s,box-shadow .2s; -webkit-tap-highlight-color:transparent; } .prod-card:active{transform:scale(.965);transition-duration:.1s;} @media (prefers-reduced-motion: no-preference){ .prod-card:hover{ transform:translateY(-4px); border-color:var(--border-active); box-shadow:0 12px 40px rgba(var(--accent-rgb),0.18),0 0 0 1px rgba(var(--accent-rgb),0.08); } .prod-card:hover .prod-img img{transform:scale(1.06);} .prod-img img{transition:transform .4s cubic-bezier(.4,0,.2,1);} .prod-card:hover .prod-name{color:var(--accent-primary);} .prod-name{transition:color .2s;} } .prod-card.featured{border-color:var(--border-active);} /* Sold out overlay: grayscale + diagonal lines */ .prod-card.sold-out{filter:grayscale(0.5);opacity:.7;} .prod-img{ width:100%;aspect-ratio:16/10; display:flex;align-items:center;justify-content:center; position:relative;overflow:hidden;flex-shrink:0; background:var(--bg-elevated); font-size:34px; } /* Radial glow in thumbnail area */ .prod-img::after{ content:'';position:absolute;inset:0; background:radial-gradient(circle at center, rgba(var(--accent-rgb),0.06), transparent 70%); pointer-events:none; } .prod-img img{width:100%;height:100%;object-fit:cover;} .thumb-bg{ position:absolute;inset:0;background-size:cover;background-position:center; filter:blur(22px) saturate(1.3) brightness(.5);transform:scale(1.25);z-index:0; } .prod-img .thumb-fg,.sheet-img .thumb-fg{ position:relative;z-index:1;width:100%;height:100%; object-fit:contain !important; filter:drop-shadow(0 6px 16px rgba(0,0,0,.45)); opacity:.9; transition:opacity .2s; } .prod-card:hover .prod-img .thumb-fg{opacity:1;} .prod-img .thumb-fg{padding:14px;} /* Product placeholder (no photo on file) — branded pattern + category-toned icon */ .thumb-placeholder{ position:relative;z-index:1;width:100%;height:100%; display:flex;align-items:center;justify-content:center; background: repeating-linear-gradient(135deg, rgba(var(--accent-rgb),.05) 0px, rgba(var(--accent-rgb),.05) 1px, transparent 1px, transparent 8px), var(--bg-elevated); border:1px solid var(--tp-tone, var(--border-subtle)); border-radius:6px; box-sizing:border-box; color:var(--tp-tone, var(--text-secondary)); } .thumb-placeholder svg{width:30%;height:30%;} .thumb-placeholder[data-cat="acc"]{--tp-tone:#8B85E0;} .thumb-placeholder[data-cat="api_key"]{--tp-tone:#4FA3D8;} .thumb-placeholder[data-cat="streaming"]{--tp-tone:#D880BC;} .thumb-placeholder[data-cat="cc"]{--tp-tone:#5FB889;} .thumb-placeholder[data-cat="vpn"]{--tp-tone:#D6A24A;} .thumb-placeholder[data-cat="digital_file"]{--tp-tone:#7C9BE0;} .thumb-placeholder[data-cat="custom"]{--tp-tone:var(--text-secondary);} .sheet-img .thumb-placeholder svg{width:22%;height:22%;} /* Stock badge */ .prod-stock-badge{ position:absolute;top:6px;right:6px; font-family:var(--font-mono), monospace; font-size:11px;font-weight:700;letter-spacing:.03em; color:var(--accent-hot);background:var(--bg-elevated); padding:4px 8px;border-radius:4px;z-index:2; border:1px solid rgba(var(--hot-rgb),.4); } /* HOT / NEW badges */ .prod-badge-corner{ position:absolute;top:7px;left:7px;z-index:2; font-family:var(--font-mono); font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase; padding:2px 6px;border-radius:3px; } .prod-badge-corner{ color:var(--accent-contrast);background:var(--accent-primary); } .prod-badge-hot{ background:var(--accent-hot);color:#fff; } .prod-badge-new{ background:rgba(var(--new-rgb),0.15);color:var(--accent-new); } .prod-body{padding:11px 12px 14px;} .prod-cat{ font-family:var(--font-mono); font-size:11px;font-weight:400;letter-spacing:.1em; text-transform:uppercase;margin-bottom:4px;color:var(--text-secondary); } .prod-name{ font-family:var(--font-body); font-size:14px;font-weight:600;color:var(--text-primary); line-height:1.3;margin-bottom:4px; } .prod-seller{ font-size:10px;color:var(--accent-primary);margin-bottom:4px;opacity:0.85; font-family:var(--font-mono);letter-spacing:0.02em; } .prod-ratings{ font-family:var(--font-mono);font-size:10px;margin-bottom:4px; letter-spacing:0.02em;line-height:1.6; display:flex;flex-direction:column;gap:1px; } .rating-row{display:flex;align-items:center;gap:4px;font-size:11px;} .rating-label{color:var(--text-secondary);min-width:48px;} .rating-stars{display:inline-flex;align-items:center;gap:1px;color:#FBBF24;} .rating-stars .star-ic{display:inline-flex;width:11px;height:11px;} .rating-stars .star-ic svg{width:100%;height:100%;} .rating-count{color:var(--text-secondary);opacity:.7;font-size:9px;} /* Star Picker (seller upload form) */ .star-picker{display:flex;gap:4px;} .star-pick{ display:inline-flex;width:24px;height:24px;cursor:pointer;color:var(--text-secondary); transition:color .1s,transform .1s;user-select:none; } .star-pick svg{width:100%;height:100%;} .star-pick.on,.star-pick:hover{color:#FBBF24;} .star-pick:active{transform:scale(1.2);} .row-ratings{ font-family:var(--font-mono);font-size:10px;margin:2px 0;line-height:1.5; } .sheet-ratings{ font-family:var(--font-mono);font-size:12px;margin:4px 0;line-height:1.6; } .rating-seller{color:#f5c542;} .rating-product{color:#5bc0de;} .rating-dot{color:var(--text-secondary);opacity:0.5;} .prod-desc{ font-size:11px;color:var(--text-secondary);line-height:1.4;margin-bottom:4px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .prod-note{ font-size:10px;color:var(--accent-primary);opacity:0.8;line-height:1.4;margin-bottom:6px; font-family:var(--font-mono);letter-spacing:0.02em; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; padding:3px 6px;border-radius:4px; background:rgba(255,255,255,0.04);border-left:2px solid var(--accent-primary); } .row-note{ font-size:10px;color:var(--accent-primary);opacity:0.8;line-height:1.3;margin:2px 0; font-family:var(--font-mono);letter-spacing:0.02em; } .sheet-note{ font-size:12px;color:var(--accent-primary);opacity:0.85;line-height:1.5;margin:6px 0; font-family:var(--font-mono); padding:6px 10px;border-radius:6px; background:rgba(255,255,255,0.04);border-left:2px solid var(--accent-primary); } .prod-footer{display:flex;align-items:center;justify-content:space-between;} .prod-price{ font-family:var(--font-mono); font-size:18px;font-weight:600;color:var(--accent-primary); } .prod-stock{font-family:var(--font-mono);font-size:10px;color:var(--text-secondary);} .stock-out{color:var(--accent-hot);font-weight:600;} /* Sold out price strikethrough */ .prod-card.sold-out .prod-price{color:var(--text-secondary);text-decoration:line-through;} /* ============================================================ CARD STAGGER ANIMATION ============================================================ */ @media (prefers-reduced-motion: no-preference){ .prod-card{ animation:cardFadeIn .3s ease both; } .prod-card:nth-child(1){animation-delay:0ms;} .prod-card:nth-child(2){animation-delay:40ms;} .prod-card:nth-child(3){animation-delay:80ms;} .prod-card:nth-child(4){animation-delay:120ms;} .prod-card:nth-child(5){animation-delay:160ms;} .prod-card:nth-child(6){animation-delay:200ms;} .prod-card:nth-child(7){animation-delay:240ms;} .prod-card:nth-child(8){animation-delay:280ms;} .prod-card:nth-child(9){animation-delay:320ms;} .prod-card:nth-child(10){animation-delay:360ms;} .prod-card:nth-child(n+11){animation-delay:400ms;} } @keyframes cardFadeIn{ from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:none;} } /* ============================================================ BADGE PULSE (HOT only) ============================================================ */ @media (prefers-reduced-motion: no-preference){ .prod-badge-hot{ animation:hotPulse 2s infinite; } } @keyframes hotPulse{ 0%{box-shadow:0 0 0 0 rgba(var(--hot-rgb),0.4);} 70%{box-shadow:0 0 6px 4px rgba(var(--hot-rgb),0);} 100%{box-shadow:0 0 0 0 rgba(var(--hot-rgb),0);} } /* ============================================================ LIST ROWS (Verify / Methods / Ads) ============================================================ */ .row-list{padding:6px 12px 16px;display:flex;flex-direction:column;gap:8px;} .list-row{ background:var(--bg-surface);border:1px solid var(--border-subtle); border-radius:var(--r-card);padding:13px 14px; display:flex;align-items:flex-start;gap:12px; transition:border-color .15s; } .list-row:hover{border-color:var(--border-active);} .row-ico{ width:40px;height:40px;border-radius:var(--r-pill); display:flex;align-items:center;justify-content:center;flex-shrink:0; font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--accent-contrast); background:var(--accent-primary); } .row-ico[class*="alt"]{color:#fff;} .row-ico.alt1{background:#4338CA;} .row-ico.alt2{background:#7C3AED;} .row-ico.alt3{background:#B45309;} .row-ico.alt4{background:#047857;} .row-ico.alt5{background:#1D4ED8;} .row-ico.alt6{background:#6D28D9;} .row-main{flex:1;min-width:0;} .row-eyebrow{ font-family:var(--font-mono); font-size:10px;font-weight:400;letter-spacing:.1em;text-transform:uppercase; color:var(--text-secondary);margin-bottom:3px;display:flex;align-items:center;gap:6px;flex-wrap:wrap; } .row-tag{ font-family:var(--font-mono); font-size:9px;font-weight:600;letter-spacing:.06em;text-transform:uppercase; color:var(--accent-primary);background:rgba(var(--accent-rgb),0.1);padding:2px 6px;border-radius:3px; } .row-name{font-size:14px;font-weight:600;color:var(--text-primary);line-height:1.25;margin-bottom:3px;} .row-desc{font-size:11px;color:var(--text-secondary);line-height:1.45; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .row-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex-shrink:0;} .row-price{font-family:var(--font-mono);font-size:16px;font-weight:600;color:var(--accent-primary);white-space:nowrap;} .row-price .sub{font-size:9px;color:var(--text-secondary);font-weight:400;} .row-btn{ background:var(--accent-primary);color:var(--accent-contrast);border:none;font-family:var(--font-body); font-size:12px;font-weight:600;padding:7px 16px;border-radius:var(--r-btn); cursor:pointer;transition:transform .15s,filter .15s;white-space:nowrap; } .row-btn:hover{filter:brightness(1.1);transform:translateY(-1px);} .row-btn:active{opacity:.8;} .row-btn:disabled{opacity:.4;cursor:default;transform:none;filter:none;} /* ============================================================ ORDERS PAGE ============================================================ */ .orders-list{padding:0 var(--page-padding) 16px;display:flex;flex-direction:column;gap:7px;} .order-row{ background:var(--bg-surface);border:1px solid var(--border-subtle); border-radius:var(--r-card);padding:12px 13px; display:flex;align-items:center;gap:11px;cursor:pointer; transition:border-color .15s; } .order-row:hover{border-color:var(--border-active);} .order-ava{ width:38px;height:38px;border-radius:var(--r-pill); display:flex;align-items:center;justify-content:center; font-family:var(--font-mono);font-size:11px;font-weight:600;flex-shrink:0; background:rgba(var(--accent-rgb),0.1);color:var(--accent-primary); } .order-info{flex:1;min-width:0;} .order-name{font-size:12px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .order-date{font-size:10px;color:var(--text-secondary);margin-top:2px;} .order-right{text-align:right;flex-shrink:0;} .order-price{font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--text-primary);} .order-status{font-family:var(--font-mono);font-size:10px;font-weight:600;margin-top:2px;} .s-ok{color:var(--accent-new);} .s-pend{color:var(--warn);} .s-fail{color:var(--accent-hot);} /* ============================================================ BALANCE PAGE ============================================================ */ .bal-card{ margin:14px 12px;border-radius:var(--r-card); background:var(--bg-surface);border:1px solid var(--border-subtle);padding:20px; } .bal-card-label{ font-family:var(--font-mono); font-size:10px;font-weight:400;text-transform:uppercase;letter-spacing:.12em; color:var(--text-secondary);margin-bottom:8px; } .bal-amount{ font-family:var(--font-mono); font-size:36px;font-weight:600;color:var(--text-primary);margin-bottom:18px;letter-spacing:-1px; } .bal-amount .sym{font-size:20px;color:var(--text-secondary);font-weight:400;} .add-funds-btn{ display:flex;align-items:center;justify-content:center;gap:7px; width:100%;padding:12px;border-radius:var(--r-btn); background:var(--accent-primary);color:var(--accent-contrast); font-family:var(--font-body);font-size:13px;font-weight:600; cursor:pointer;border:none; transition:transform .15s,filter .15s; } .add-funds-btn:hover{filter:brightness(1.1);transform:translateY(-1px);} .add-funds-btn:active{opacity:.8;} .add-funds-btn svg{width:14px;height:14px;stroke:var(--accent-contrast);fill:none;stroke-width:2.5;} .act-title{ padding:14px 14px 8px; font-family:var(--font-mono); font-size:10px;font-weight:400;text-transform:uppercase;letter-spacing:.12em; color:var(--text-secondary); } .act-list{padding:0 var(--page-padding) 16px;display:flex;flex-direction:column;gap:6px;} .act-row{ background:var(--bg-surface);border:1px solid var(--border-subtle); border-radius:var(--r-card);padding:11px 12px; display:flex;align-items:center;gap:10px; } .act-ico{ width:30px;height:30px;border-radius:var(--r-pill); background:rgba(var(--accent-rgb),0.1);display:flex;align-items:center;justify-content:center;flex-shrink:0; } .act-ico svg{width:14px;height:14px;stroke:var(--accent-primary);fill:none;stroke-width:1.9;} .act-info{flex:1;min-width:0;} .act-name{font-size:11px;font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .act-sub{font-size:10px;color:var(--text-secondary);margin-top:1px;} .act-amt{font-family:var(--font-mono);font-size:12px;font-weight:600;flex-shrink:0;} .act-out{color:var(--accent-hot);} .act-in{color:var(--accent-new);} /* ============================================================ PROFILE PAGE ============================================================ */ .prof-header{ margin:14px 12px;border-radius:var(--r-card); background:var(--bg-surface);border:1px solid var(--border-subtle);padding:16px; display:flex;align-items:center;gap:13px; } .prof-avatar{ width:48px;height:48px;border-radius:50%; background:rgba(var(--accent-rgb),0.1);border:1px solid var(--border-subtle); display:flex;align-items:center;justify-content:center; font-family:var(--font-display);font-size:18px;font-weight:700; color:var(--accent-primary);flex-shrink:0; } .prof-name{font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--text-primary);} .prof-handle{font-family:var(--font-mono);font-size:11px;color:var(--text-secondary);margin-top:2px;} .prof-stats{display:flex;gap:0;margin:0 12px 8px;border-radius:var(--r-card); background:var(--bg-surface);border:1px solid var(--border-subtle);overflow:hidden;} .prof-stat{flex:1;padding:14px 8px;text-align:center;border-right:1px solid var(--border-subtle);} .prof-stat:last-child{border-right:none;} .prof-stat-val{font-family:var(--font-mono);font-size:18px;font-weight:600;color:var(--text-primary);} .prof-stat-label{font-family:var(--font-mono);font-size:9px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.08em;margin-top:3px;} /* theme switcher card */ .theme-switcher-card{ margin:0 12px 8px;border-radius:var(--r-card); background:var(--bg-surface);border:1px solid var(--border-subtle);padding:14px; } .theme-switcher-title{font-family:var(--font-mono);font-size:10px;font-weight:400;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px;} .theme-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;} .theme-dot{display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;} .theme-dot-circle{ width:32px;height:32px;border-radius:50%; border:2px solid transparent; transition:border-color .15s,transform .1s; display:flex;align-items:center;justify-content:center; } .theme-dot.active .theme-dot-circle{border-color:var(--text-primary);transform:scale(1.1);} .theme-dot-inner{width:22px;height:22px;border-radius:50%;} .theme-dot-label{font-size:8px;color:var(--text-secondary);font-weight:500;text-align:center;white-space:nowrap;} .mode-toggle-row{ display:flex;align-items:center;justify-content:space-between; margin-top:12px;padding-top:10px;border-top:1px solid var(--border-subtle); } .mode-toggle-label{font-size:12px;font-weight:500;color:var(--text-primary);} .toggle{ width:36px;height:20px;border-radius:10px; background:var(--bg-elevated);border:1px solid var(--border-subtle); position:relative;cursor:pointer;transition:background .2s;flex-shrink:0; } .toggle.on{background:var(--accent-primary);border-color:var(--accent-primary);} .toggle::after{content:'';position:absolute;top:3px;left:3px;width:12px;height:12px;border-radius:50%;background:#fff;transition:left .18s;} .toggle.on::after{left:19px;} .prof-section{padding:0 var(--page-padding) 4px;} .prof-section-label{ font-family:var(--font-mono); font-size:9px;font-weight:400;text-transform:uppercase; letter-spacing:.1em;color:var(--text-secondary);padding:10px 2px 6px; } .prof-row{ background:var(--bg-surface);border:1px solid var(--border-subtle); border-radius:var(--r-card);margin-bottom:6px; padding:13px;display:flex;align-items:center;gap:10px;cursor:pointer; transition:border-color .15s;text-decoration:none; } .prof-row:hover{border-color:var(--border-active);} .prof-row-icon{width:16px;height:16px;stroke:var(--text-secondary);fill:none;stroke-width:1.8;flex-shrink:0;} .prof-row-label{flex:1;font-size:12px;font-weight:500;color:var(--text-primary);} .prof-row-val{font-family:var(--font-mono);font-size:11px;color:var(--text-secondary);} .prof-row-chev{width:14px;height:14px;stroke:var(--text-secondary);fill:none;stroke-width:2;flex-shrink:0;} .footer-note{padding:18px 16px 24px;font-size:10px;color:var(--text-secondary);text-align:center;line-height:1.5;} /* ============================================================ BOTTOM NAV ============================================================ */ .bottom-nav{ display:flex; background:var(--bg-base); border-top:1px solid var(--border-subtle); padding:8px 0; padding-bottom:max(8px, env(safe-area-inset-bottom)); flex-shrink:0; z-index:10; } .nav-item{ flex:1;display:flex;flex-direction:column;align-items:center;gap:3px; cursor:pointer;-webkit-tap-highlight-color:transparent; transition:opacity .1s;background:none;border:none;font-family:var(--font-body); } .nav-item:active{opacity:.7;} .nav-icon{ width:26px;height:26px; display:flex;align-items:center;justify-content:center; border-radius:6px;transition:background .2s,transform .2s; } .nav-icon svg{width:18px;height:18px;stroke:var(--text-secondary);fill:none;stroke-width:1.8;transition:stroke .15s;} .nav-item.on .nav-icon svg{stroke:var(--accent-primary);} .nav-label{font-size:9px;color:var(--text-secondary);font-weight:500;transition:color .15s;} .nav-item.on .nav-label{color:var(--accent-primary);} /* ============================================================ EMPTY / LOADING STATES ============================================================ */ .empty-state{ display:flex;flex-direction:column;align-items:center; justify-content:center;gap:10px;padding:60px 20px;text-align:center; } .empty-state .es-icon{font-size:34px;opacity:.5;} .empty-state .es-svg{font-size:inherit;opacity:.35;width:56px;height:56px;color:var(--accent-primary);} .empty-state .es-svg svg{width:100%;height:100%;} .empty-state h3{font-size:14px;color:var(--text-primary);font-weight:600;} .empty-state p{font-size:12px;color:var(--text-secondary);} .spinner{ width:26px;height:26px;border-radius:50%;margin:50px auto; border:2px solid var(--border-subtle);border-top-color:var(--accent-primary); animation:spin .7s linear infinite; } @keyframes spin{to{transform:rotate(360deg);}} /* ============================================================ TOASTS ============================================================ */ .toast-wrap{ position:fixed;left:50%;bottom:84px;transform:translateX(-50%); z-index:9998;display:flex;flex-direction:column;gap:8px; width:90%;max-width:420px;pointer-events:none; } .toast{ background:var(--bg-elevated);border:1px solid var(--border-subtle);color:var(--text-primary); border-radius:var(--r-card);padding:11px 14px; font-size:12px;font-weight:500; box-shadow:var(--shadow-pop); } .toast.ok{border-color:rgba(var(--new-rgb),.4);border-left:3px solid var(--accent-new);} .toast.err{border-color:rgba(var(--hot-rgb),.4);border-left:3px solid var(--accent-hot);} @media (prefers-reduced-motion: no-preference){ .toast{animation:toastIn .25s ease;} } @keyframes toastIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}} /* ============================================================ MODAL / BOTTOM SHEET ============================================================ */ .sheet-backdrop{ position:fixed;inset:0;z-index:9990; background:var(--overlay); display:none;align-items:flex-end;justify-content:center; } .sheet-backdrop.open{display:flex;} .sheet{ width:100%;max-width:480px; background:var(--bg-surface);border:1px solid var(--border-subtle); border-radius:12px 12px 0 0; padding:18px 18px max(18px, env(safe-area-inset-bottom)); max-height:88vh;overflow-y:auto; } @media (prefers-reduced-motion: no-preference){ .sheet{animation:sheetUp .26s ease;} } @media(min-width:520px){ .sheet-backdrop{align-items:center;} .sheet{border-radius:12px;} @media (prefers-reduced-motion: no-preference){ .sheet{animation:sheetIn .2s ease;} } } @keyframes sheetUp{from{transform:translateY(100%);}to{transform:none;}} @keyframes sheetIn{from{opacity:0;transform:scale(.96);}to{opacity:1;transform:none;}} .sheet-grip{width:40px;height:4px;border-radius:3px;background:var(--border-subtle);margin:0 auto 14px;} .sheet-img{ position:relative; width:100%;height:150px;border-radius:var(--r-card);overflow:hidden; display:flex;align-items:center;justify-content:center;font-size:48px;margin-bottom:14px; background:var(--bg-elevated); } .sheet-img img{width:100%;height:100%;object-fit:cover;} .sheet-img .thumb-fg{padding:18px;} .sheet-cat{ font-family:var(--font-mono); font-size:10px;font-weight:400;letter-spacing:.1em;text-transform:uppercase; color:var(--accent-primary);margin-bottom:5px; } .sheet-name{font-family:var(--font-display);font-size:20px;font-weight:700;color:var(--text-primary);margin-bottom:8px;line-height:1.2;} .sheet-seller{ font-size:12px;color:var(--accent-primary);margin-bottom:8px; font-family:var(--font-mono);letter-spacing:0.02em; } .sheet-seller b{font-weight:600;} /* ── Seller Panel ──────────────────────────────────────────────── */ .seller-stats{ display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0; } .seller-stat{ background:var(--bg-elevated,rgba(255,255,255,.05));border-radius:10px; padding:10px 8px;text-align:center; } .seller-stat-val{ font-family:var(--font-mono);font-size:16px;font-weight:700; color:var(--accent-primary,#7C5CFC); } .seller-stat-label{ font-size:10px;color:var(--text-secondary,#6B6B8A);margin-top:2px; text-transform:uppercase;letter-spacing:.04em; } /* Seller file drop zone */ .seller-drop-zone{ border:2px dashed var(--border-active,rgba(124,92,252,.45)); border-radius:12px;padding:24px 16px;text-align:center; cursor:pointer;transition:background .15s,border-color .15s; margin:8px 0; } .seller-drop-zone:hover,.seller-drop-zone.drag-over{ background:rgba(var(--accent-rgb),.08);border-color:var(--accent-primary); } .seller-drop-zone .drop-label{ font-size:14px;font-weight:600;color:var(--text-primary,#F0F0FF);margin-bottom:2px; } .seller-drop-zone .drop-sub{ font-size:11px;color:var(--text-secondary,#6B6B8A); } .seller-info-rows{margin:10px 0;} .seller-info-row{ display:flex;align-items:center;justify-content:space-between; padding:8px 0;border-bottom:1px solid var(--border-subtle,rgba(255,255,255,.06)); font-size:13px; } .seller-info-row span{color:var(--text-secondary,#6B6B8A);} .seller-info-row b{color:var(--text-primary,#F0F0FF);font-weight:500;text-align:right;} .batch-ic{display:inline-flex;width:14px;height:14px;vertical-align:-2px;} .batch-ic svg{width:100%;height:100%;} .batch-ic-ok{color:var(--accent-new,#2DD4A7);} .batch-ic-bad{color:var(--accent-danger,#F43F5E);} .batch-ic-wait{color:var(--warn,#FBBF24);} .sheet-desc{font-size:13px;color:var(--text-data);line-height:1.55;margin-bottom:14px;white-space:pre-wrap;} .sheet-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;} .sheet-price{font-family:var(--font-mono);font-size:24px;font-weight:600;color:var(--accent-primary);} .sheet-stock{font-family:var(--font-mono);font-size:11px;color:var(--text-secondary);} .sheet-btn{ width:100%;padding:14px;border-radius:var(--r-btn); background:var(--accent-primary);color:var(--accent-contrast);border:none;font-family:var(--font-body); font-size:14px;font-weight:600;cursor:pointer; transition:transform .15s,filter .15s; } .sheet-btn:hover{filter:brightness(1.1);transform:translateY(-1px);} .sheet-btn:active{opacity:.85;} .sheet-btn:disabled{opacity:.4;cursor:default;transform:none;filter:none;} .sheet-btn.secondary{background:var(--bg-elevated);color:var(--text-primary);border:1px solid var(--border-subtle);margin-top:8px;} .sheet-btn.secondary:hover{border-color:var(--border-active);} .sheet-btn.ghost{ background:none;color:var(--text-secondary);border:none;margin-top:4px; padding:12px 14px;font-weight:500; } .sheet-btn.ghost:hover{color:var(--text-primary);filter:none;transform:none;} .sheet-btn.danger{background:var(--accent-danger);color:#fff;} .sheet-btn.danger:hover{filter:brightness(1.08);} .sheet-h{font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--text-primary);margin-bottom:4px;text-align:center;} .sheet-p{font-size:12px;color:var(--text-secondary);margin-bottom:16px;text-align:center;line-height:1.5;} .sheet-content-box{ background:var(--bg-base);border:1px solid var(--border-subtle);border-radius:var(--r-card); padding:13px;font-family:var(--font-mono);font-size:12px;color:var(--text-primary); white-space:pre-wrap;word-break:break-all;margin-bottom:14px;max-height:220px;overflow-y:auto; } /* ============================================================ OWNER EDIT MODE ============================================================ */ .icon-btn.on{background:var(--accent-primary);border-color:var(--accent-primary);} .icon-btn.on svg{stroke:#fff;} .edit-banner{ margin:10px 12px 0;padding:8px 12px;border-radius:var(--r-card); background:rgba(var(--accent-rgb),0.08);border:1px solid var(--border-subtle);color:var(--accent-primary); font-size:11px;font-weight:600;text-align:center; } .edit-add{ display:flex;align-items:center;justify-content:center;gap:8px; margin:10px 12px;padding:13px;border-radius:var(--r-card); border:1px dashed var(--accent-primary);background:rgba(var(--accent-rgb),0.05);color:var(--accent-primary); font-family:var(--font-body);font-size:13px;font-weight:600;cursor:pointer;width:calc(100% - 24px); } .edit-add svg{width:15px;height:15px;stroke:var(--accent-primary);fill:none;stroke-width:2.5;} .prod-card.editing{border-color:var(--accent-primary);} .prod-edit-tag,.row-edit-tag{ position:absolute;top:7px;left:7px; font-family:var(--font-mono);font-size:9px;font-weight:600; background:var(--accent-primary);color:var(--accent-contrast);padding:2px 7px;border-radius:3px;letter-spacing:.04em; z-index:2; } .row-manage-btn{ background:var(--bg-elevated);border:1px solid var(--accent-primary);color:var(--accent-primary); font-family:var(--font-body);font-size:12px;font-weight:600;padding:7px 14px; border-radius:var(--r-btn);cursor:pointer;white-space:nowrap; } /* form fields inside sheets */ .sheet-field{margin-bottom:11px;} .sheet-field label{ display:block;font-family:var(--font-mono);font-size:10px;font-weight:400;text-transform:uppercase; letter-spacing:.08em;color:var(--text-secondary);margin-bottom:5px; } .sheet-field input,.sheet-field select,.sheet-field textarea{ width:100%;background:var(--bg-base);border:1px solid var(--border-subtle);border-radius:var(--r-pill); padding:11px 12px;color:var(--text-primary);font-family:var(--font-body);font-size:13px; outline:none;transition:border-color .15s; } .sheet-field input:focus,.sheet-field select:focus,.sheet-field textarea:focus{ border-color:var(--border-active); } .sheet-field textarea{min-height:90px;resize:vertical;font-family:var(--font-mono);border-radius:var(--r-card);} .sheet-row2{display:grid;grid-template-columns:1fr 1fr;gap:10px;} /* BIN issuer info */ .bin-info{margin-top:8px;background:var(--bg-base);border:1px solid var(--border-subtle);border-radius:var(--r-card);padding:4px 12px;} .bin-info:empty{display:none;border:none;padding:0;margin:0;} .bin-row{display:flex;justify-content:space-between;gap:10px;font-size:11px;padding:5px 0;color:var(--text-data);border-bottom:1px solid var(--border-subtle);} .bin-row:last-child{border-bottom:none;} .bin-row b{color:var(--text-primary);font-weight:600;text-align:right;} /* amount chips for top-up */ .amount-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px;} .amount-chip{ padding:11px 4px;border-radius:var(--r-card);border:1px solid var(--border-subtle); background:var(--bg-elevated);color:var(--text-primary);font-family:var(--font-mono);font-weight:600;font-size:13px; cursor:pointer;text-align:center;transition:border-color .15s; } .amount-chip:hover{border-color:var(--border-active);} .amount-chip.on{background:var(--accent-primary);color:var(--accent-contrast);border-color:var(--accent-primary);} /* crypto wallet rows */ .wallet-row{ background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--r-card); padding:11px 12px;margin-bottom:8px; } .wallet-coin{font-size:12px;font-weight:600;color:var(--text-primary);margin-bottom:4px;} .wallet-addr{font-size:11px;color:var(--text-secondary);font-family:var(--font-mono);word-break:break-all;} /* login widget host */ .login-host{display:flex;justify-content:center;margin-top:6px;min-height:46px;} /* ============================================================ ADMIN SLIDE-IN DRAWER (owner) ============================================================ */ .drawer-backdrop{ position:fixed;inset:0;z-index:9995;background:var(--overlay); opacity:0;transition:opacity .22s; } .drawer-backdrop.open{opacity:1;} .drawer{ position:fixed;top:0;left:0;bottom:0;width:82%;max-width:300px; background:var(--bg-surface);border-right:1px solid var(--border-subtle); transform:translateX(-100%);transition:transform .25s ease; z-index:9996;display:flex;flex-direction:column;overflow-y:auto; padding-top:max(16px,env(safe-area-inset-top)); padding-bottom:max(16px,env(safe-area-inset-bottom)); } .drawer.open{transform:none;} .drawer-head{ padding:8px 18px 12px; font-family:var(--font-display);font-size:16px;font-weight:700; color:var(--text-primary);letter-spacing:.02em; } .drawer-head small{ display:block;font-family:var(--font-mono);font-size:10px;font-weight:400; color:var(--text-secondary);text-transform:uppercase;letter-spacing:.1em;margin-top:2px; } .drawer-link{ display:flex;align-items:center;gap:12px; padding:13px 18px;color:var(--text-primary);text-decoration:none; font-size:13px;font-weight:500;border-left:3px solid transparent; -webkit-tap-highlight-color:transparent; transition:background .15s; } .drawer-link:hover{background:var(--bg-elevated);} .drawer-link:active{background:rgba(var(--accent-rgb),0.08);} .drawer-link.close-row{margin-top:auto;border-top:1px solid var(--border-subtle);color:var(--text-secondary);} .drawer-link svg{width:17px;height:17px;stroke:var(--accent-primary);fill:none;stroke-width:1.8;flex-shrink:0;} /* admin overlay */ .admin-overlay{ position:fixed;inset:0;z-index:9994;background:var(--bg-base); display:none;flex-direction:column; opacity:0;transition:opacity .18s; } .admin-overlay.open{display:flex;opacity:1;} .admin-ov-bar{ display:flex;align-items:center;gap:8px; padding:max(12px,env(safe-area-inset-top)) 12px 12px; background:var(--bg-surface);border-bottom:1px solid var(--border-subtle);flex-shrink:0; } .admin-ov-bar .t{ flex:1;font-family:var(--font-display);font-size:15px;font-weight:700; color:var(--text-primary);letter-spacing:0; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .admin-ov-btn{ background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--r-pill); padding:8px 12px;font-family:var(--font-body);font-size:12px;font-weight:600; color:var(--text-primary);cursor:pointer;display:flex;align-items:center;gap:6px;flex-shrink:0; transition:border-color .15s; } .admin-ov-btn:hover{border-color:var(--border-active);} .admin-ov-btn.icon{padding:8px;} .admin-ov-btn svg{width:15px;height:15px;stroke:var(--text-primary);fill:none;stroke-width:2;} .admin-ov-btn:active{opacity:.7;} .admin-ov-body{flex:1;position:relative;overflow:hidden;} .admin-ov-frame{position:absolute;inset:0;border:none;width:100%;height:100%;background:var(--bg-base);} .admin-ov-spin{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--bg-base);z-index:1;} /* ============================================================ DESKTOP SIDEBAR NAV (>= 768px) — 200px, left-border indicator ============================================================ */ @media(min-width:768px){ body{ display:flex;align-items:stretch;justify-content:center; min-height:100vh;overflow:auto;background:var(--bg-base); } #app{ height:100vh;max-width:none;width:100%; display:grid;grid-template-columns:200px 1fr;grid-template-rows:auto 1fr; } .topbar{grid-column:1/-1;grid-row:1;} /* Hide header balance on desktop — shown in sidebar bottom */ .topbar .bal-pill{display:none;} .sidebar{ display:flex;flex-direction:column;gap:2px;padding:14px 0; background:var(--bg-surface);border-right:1px solid var(--border-subtle);overflow-y:auto; position:relative; } /* Terminal tree connectors */ .sidebar::before{ content:'';position:absolute;left:22px;top:14px;bottom:14px; width:1px; background:repeating-linear-gradient(to bottom, var(--border-subtle) 0, var(--border-subtle) 3px, transparent 3px, transparent 7px); } .sidebar-item{ display:flex;align-items:center;gap:10px; padding:10px 16px; cursor:pointer; transition:background .15s,border-color .15s; border:none;border-left:3px solid transparent; background:none;font-family:var(--font-body);width:100%;text-align:left; border-radius:0; position:relative; } .sidebar-item:hover{background:var(--bg-elevated);} .sidebar-item.on{ background:transparent; border-left-color:var(--accent-primary); } .sidebar-item svg{width:17px;height:17px;stroke:var(--text-secondary);fill:none;stroke-width:1.8;} .sidebar-item.on svg{stroke:var(--accent-primary);} .sidebar-item span{font-size:13px;font-weight:500;color:var(--text-secondary);} .sidebar-item.on span{color:var(--accent-primary);font-weight:600;} /* Sidebar bottom balance display */ .sidebar-balance{ display:flex;align-items:center;gap:8px;margin-top:auto; padding:14px 16px; font-family:var(--font-mono);font-size:12px;font-weight:600; color:var(--text-data); border-top:1px solid var(--border-subtle); } .sidebar-balance svg{width:15px;height:15px;stroke:var(--accent-primary);flex-shrink:0;} /* ── Collapsible admin section ── */ .sidebar-admin{ margin-top:8px; border-top:1px solid var(--border-subtle); padding-top:6px; } .sidebar-admin-toggle{ display:flex;align-items:center;gap:8px; padding:8px 16px; cursor:pointer; background:none;border:none;width:100%;text-align:left; font-family:var(--font-mono); transition:background .15s; } .sidebar-admin-toggle:hover{background:var(--bg-elevated);} .sidebar-admin-toggle svg{width:14px;height:14px;stroke:var(--accent-primary);fill:none;stroke-width:2;flex-shrink:0;} .sidebar-admin-toggle span{ font-size:10px;font-weight:600;letter-spacing:.1em; text-transform:uppercase;color:var(--text-secondary); flex:1; } .sidebar-admin-toggle .chevron{ width:12px;height:12px;stroke:var(--text-secondary); transition:transform .2s; } .sidebar-admin.open .sidebar-admin-toggle .chevron{ transform:rotate(90deg); } .sidebar-admin-list{ display:none; flex-direction:column; padding:2px 0 4px; } .sidebar-admin.open .sidebar-admin-list{display:flex;} .sidebar-admin-link{ display:block; padding:7px 16px 7px 38px; font-size:12px;font-weight:500; color:var(--text-secondary); cursor:pointer; transition:background .12s,color .12s; text-decoration:none; border:none;background:none;width:100%;text-align:left; font-family:var(--font-body); border-left:3px solid transparent; } .sidebar-admin-link:hover{ background:var(--bg-elevated); color:var(--text-primary); } .sidebar-admin-link.active{ color:var(--accent-primary); font-weight:600; background:rgba(var(--accent-rgb),0.06); border-left-color:var(--accent-primary); } .bottom-nav{display:none;} .main-content{grid-column:2;display:flex;flex-direction:column;overflow:hidden;} .pages{flex:1;overflow:hidden;} .prod-grid{grid-template-columns:repeat(auto-fill, minmax(210px, 1fr));gap:14px;align-items:start;} .toast-wrap{bottom:24px;} } @media(max-width:767px){ .sidebar{display:none;} .main-content{display:contents;} } /* ============================================================ STATS STRIP — lightweight metrics above filter bar ============================================================ */ .stats-strip{ display:flex;gap:0;margin:10px 12px 0;border-radius:var(--r-card); background:var(--bg-surface);border:1px solid var(--border-subtle);overflow:hidden; box-shadow:var(--shadow-sm); } .stats-strip-item{ flex:1;padding:12px 8px;text-align:center; display:flex;flex-direction:column;align-items:center;gap:3px; border-right:1px solid var(--border-subtle); } .stats-strip-item:last-child{border-right:none;} .stats-strip-ic{ display:flex;width:15px;height:15px;color:var(--text-secondary);opacity:.7;margin-bottom:1px; } .stats-strip-ic svg{width:100%;height:100%;} .stats-strip-val{ font-family:var(--font-mono);font-size:16px;font-weight:600; color:var(--accent-primary); } .stats-strip-label{ font-family:var(--font-mono);font-size:8px;color:var(--text-secondary); text-transform:uppercase;letter-spacing:.06em;margin-top:2px; } /* ============================================================ MODE SEGMENTED CONTROL (Light / Dark / Auto) ============================================================ */ .mode-seg{ display:flex;border-radius:var(--r-pill); background:var(--bg-elevated);border:1px solid var(--border-subtle); overflow:hidden; } .mode-seg-btn{ flex:1;padding:7px 0;cursor:pointer; font-family:var(--font-body);font-size:11px;font-weight:600; color:var(--text-secondary); background:none;border:none; transition:color .15s,background .15s; text-align:center; } .mode-seg-btn:hover{color:var(--text-primary);} .mode-seg-btn.on{ background:var(--accent-primary); color:var(--accent-contrast); } /* ============================================================ PAGE TRANSITION — subtle fade-slide ============================================================ */ @media (prefers-reduced-motion: no-preference){ .page.active{animation:pageFadeIn .22s ease both;} } @keyframes pageFadeIn{ from{opacity:0;transform:translateY(6px);} to{opacity:1;transform:none;} } /* ============================================================ BOTTOM NAV — active pill indicator ============================================================ */ .nav-item.on .nav-icon{ background:rgba(var(--accent-rgb),0.12); transform:scale(1.08); } /* ============================================================ ACCESSIBILITY — focus-visible outlines ============================================================ */ :focus{outline:none;} :focus-visible{ outline:2px solid var(--accent-primary); outline-offset:2px; border-radius:var(--r-btn); } button:focus-visible, .sec-tab:focus-visible, .nav-item:focus-visible, .amount-chip:focus-visible, .prod-card:focus-visible, .list-row:focus-visible, .prof-row:focus-visible, .toggle:focus-visible{ outline:2px solid var(--accent-primary); outline-offset:2px; } .sheet-btn:focus-visible{ outline:2px solid var(--accent-primary); outline-offset:2px; box-shadow:0 0 0 4px rgba(var(--accent-rgb),0.2); } /* ============================================================ SKELETON LOADING ============================================================ */ @keyframes shimmer{ 0%{background-position:-400px 0;} 100%{background-position:400px 0;} } .skel{ background:linear-gradient(90deg,var(--bg-elevated) 25%,rgba(var(--accent-rgb),0.06) 50%,var(--bg-elevated) 75%); background-size:800px 100%; animation:shimmer 1.6s infinite linear; border-radius:var(--r-btn); } .skel-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 var(--page-padding);} .skel-card{border-radius:var(--r-card);overflow:hidden;border:1px solid var(--border-subtle);} .skel-card-img{aspect-ratio:16/10;width:100%;} .skel-card-body{padding:11px 12px 14px;display:flex;flex-direction:column;gap:6px;} .skel-line{height:10px;border-radius:3px;} .skel-line.w60{width:60%;} .skel-line.w80{width:80%;} .skel-line.w40{width:40%;} .skel-line.w30{width:30%;} .skel-line.h14{height:14px;} .skel-line.h18{height:18px;} .skel-row{display:flex;gap:10px;padding:8px var(--page-padding);align-items:center;} .skel-circle{width:40px;height:40px;border-radius:50%;flex-shrink:0;} .skel-row-body{flex:1;display:flex;flex-direction:column;gap:5px;} .skel-bal{padding:var(--page-padding);display:flex;flex-direction:column;align-items:center;gap:10px;} .skel-bal-big{width:140px;height:36px;border-radius:6px;} .skel-bal-btn{width:120px;height:32px;border-radius:var(--r-pill);} /* ============================================================ PULL-TO-REFRESH ============================================================ */ .ptr-indicator{ text-align:center;padding:10px 0 4px;font-size:11px; font-family:var(--font-mono);color:var(--text-secondary); transition:opacity .2s;opacity:0;height:0;overflow:hidden; } .ptr-indicator.visible{opacity:1;height:auto;} .ptr-indicator.loading{color:var(--accent-primary);} /* ============================================================ COPY BUTTON (credentials) ============================================================ */ .copy-action{ display:inline-flex;align-items:center;gap:5px; font-family:var(--font-mono);font-size:11px; background:var(--bg-elevated);color:var(--text-secondary); border:1px solid var(--border-subtle);border-radius:var(--r-btn); padding:6px 12px;cursor:pointer;margin:6px 0 12px; transition:color .15s,border-color .15s,background .15s; } .copy-action:hover{color:var(--accent-primary);border-color:var(--border-active);} .copy-action.copied{color:var(--accent-new);border-color:rgba(var(--new-rgb),.4);} /* ============================================================ STOCK WARNING COLORS ============================================================ */ .stock-low{color:var(--warn);font-weight:600;} .stock-critical{color:var(--accent-hot);font-weight:700;animation:stockPulse 2s infinite;} @keyframes stockPulse{0%,100%{opacity:1;}50%{opacity:.6;}} /* ============================================================ IMAGE ZOOM OVERLAY ============================================================ */ .img-zoom-overlay{ position:fixed;inset:0;z-index:99999; background:rgba(0,0,0,.92); display:flex;align-items:center;justify-content:center; cursor:zoom-out; animation:zoomIn .2s ease; } @keyframes zoomIn{from{opacity:0;}to{opacity:1;}} .img-zoom-overlay img{ max-width:92vw;max-height:90vh; object-fit:contain;border-radius:8px; box-shadow:0 0 60px rgba(0,0,0,.5); } .img-zoom-close{ position:absolute;top:16px;right:16px; background:rgba(255,255,255,.15);color:#fff; border:none;border-radius:50%;width:36px;height:36px; font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center; backdrop-filter:blur(4px); } .img-zoom-close:hover{background:rgba(255,255,255,.25);} /* ============================================================ TAB UNDERLINE SLIDE ============================================================ */ .sec-tabs{position:relative;} .tab-indicator{ position:absolute;bottom:0;height:2px; background:var(--accent-primary); box-shadow:0 0 8px rgba(var(--accent-rgb),.5); transition:left .25s cubic-bezier(.4,0,.2,1),width .25s cubic-bezier(.4,0,.2,1); border-radius:1px; pointer-events:none;z-index:2; } /* ============================================================ BOTTOM NAV ACTIVE PILL ============================================================ */ .nav-item{position:relative;} .nav-item.on .nav-icon{ background:rgba(var(--accent-rgb),0.12); } /* ============================================================ SCROLL-TO-TOP BUTTON ============================================================ */ .scroll-top{ position:absolute;right:14px;bottom:14px;z-index:20; width:36px;height:36px;border-radius:50%; background:var(--bg-elevated);border:1px solid var(--border-subtle); color:var(--text-secondary);cursor:pointer; display:none;align-items:center;justify-content:center; box-shadow:var(--shadow-pop); transition:opacity .2s,transform .2s; } .scroll-top.visible{display:flex;} .scroll-top:hover{color:var(--accent-primary);border-color:var(--border-active);} .scroll-top svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.5;} /* ============================================================ PROMO CODE ROW ============================================================ */ .promo-row{display:flex;gap:6px;margin-bottom:10px;} .promo-input{ flex:1;padding:8px 10px;border-radius:var(--r-btn); background:var(--bg-elevated);border:1px solid var(--border-subtle); color:var(--text-primary);font-family:var(--font-mono);font-size:12px; text-transform:uppercase;letter-spacing:.05em;outline:none; } .promo-input:focus{border-color:var(--accent-primary);} .promo-input::placeholder{color:var(--text-secondary);text-transform:none;letter-spacing:0;} .promo-apply{ padding:8px 14px;border-radius:var(--r-btn); background:var(--bg-elevated);border:1px solid var(--border-subtle); color:var(--text-primary);font-family:var(--font-mono);font-size:11px; cursor:pointer;transition:border-color .15s;flex-shrink:0; } .promo-apply:hover:not(:disabled){border-color:var(--accent-primary);color:var(--accent-primary);} .promo-apply:disabled{opacity:.6;cursor:default;color:var(--accent-new);} /* ============================================================ QUANTITY SELECTOR ============================================================ */ .qty-row{ display:flex;align-items:center;gap:10px;margin-bottom:12px; justify-content:center; } .qty-label{font-family:var(--font-mono);font-size:11px;color:var(--text-secondary);letter-spacing:.05em;} .qty-btn{ width:30px;height:30px;border-radius:50%; background:var(--bg-elevated);border:1px solid var(--border-subtle); color:var(--text-primary);cursor:pointer;font-size:16px; display:flex;align-items:center;justify-content:center; transition:border-color .15s,background .15s; } .qty-btn:hover:not(:disabled){border-color:var(--accent-primary);background:rgba(var(--accent-rgb),0.08);} .qty-btn:disabled{opacity:.3;cursor:default;} .qty-val{ font-family:var(--font-mono);font-size:18px;font-weight:600; color:var(--text-primary);min-width:24px;text-align:center; } /* ============================================================ ORDER FILTER TABS ============================================================ */ .order-filters{ display:flex;gap:6px;padding:4px var(--page-padding) 12px; overflow-x:auto;scrollbar-width:none; } .order-filters::-webkit-scrollbar{display:none;} .order-filter{ flex-shrink:0;padding:5px 12px;border-radius:var(--r-pill); font-family:var(--font-mono);font-size:10px;letter-spacing:.04em; background:var(--bg-elevated);border:1px solid var(--border-subtle); color:var(--text-secondary);cursor:pointer;transition:all .15s; } .order-filter:hover{border-color:var(--border-active);color:var(--text-primary);} .order-filter.on{ background:rgba(var(--accent-rgb),0.12);border-color:var(--accent-primary); color:var(--accent-primary);font-weight:600; } /* ============================================================ WISHLIST HEART ============================================================ */ .wish-btn{ position:absolute;top:6px;left:6px;z-index:3; width:28px;height:28px;border-radius:50%; background:rgba(0,0,0,.35);backdrop-filter:blur(4px); border:none;cursor:pointer;padding:0; display:flex;align-items:center;justify-content:center; transition:transform .15s,background .15s; } .wish-btn svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2;transition:fill .2s,stroke .2s;} .wish-btn:hover{transform:scale(1.15);} .wish-btn.wishlisted svg{fill:var(--accent-hot);stroke:var(--accent-hot);} /* ============================================================ SOLD COUNT BADGE ============================================================ */ .prod-sold{ font-family:var(--font-mono);font-size:9px;color:var(--text-secondary); margin-left:6px;opacity:.7; } /* ============================================================ SEARCH HIGHLIGHT ============================================================ */ mark.hl{background:rgba(var(--accent-rgb),0.2);color:var(--accent-primary);border-radius:2px;padding:0 1px;} /* ============================================================ KEYBOARD HINTS ============================================================ */ .kb-hint{ font-family:var(--font-mono);font-size:9px; background:var(--bg-base);border:1px solid var(--border-subtle); border-radius:3px;padding:1px 5px;margin-left:6px; color:var(--text-secondary);opacity:.6;vertical-align:middle; } /* ============================================================ CONNECTION STATUS BANNER ============================================================ */ .conn-banner{ display:none;text-align:center; padding:6px var(--page-padding); background:var(--accent-hot);color:#fff; font-family:var(--font-mono);font-size:11px;font-weight:600; letter-spacing:.03em; } .conn-banner.visible{display:block;} /* ============================================================ STAGGERED CARD ENTRANCE ============================================================ */ @media (prefers-reduced-motion: no-preference){ .prod-card{animation:cardFadeIn .35s ease both;} .prod-card:nth-child(1){animation-delay:0s;} .prod-card:nth-child(2){animation-delay:.06s;} .prod-card:nth-child(3){animation-delay:.12s;} .prod-card:nth-child(4){animation-delay:.18s;} .prod-card:nth-child(5){animation-delay:.24s;} .prod-card:nth-child(6){animation-delay:.30s;} .prod-card:nth-child(7){animation-delay:.36s;} .prod-card:nth-child(8){animation-delay:.42s;} .prod-card:nth-child(n+9){animation-delay:.48s;} } @keyframes cardFadeIn{ from{opacity:0;transform:translateY(12px) scale(.97);} to{opacity:1;transform:none;} } /* ============================================================ SMOOTH THEME TRANSITION ============================================================ */ .theme-transitioning, .theme-transitioning *, .theme-transitioning *::before, .theme-transitioning *::after{ transition:background-color .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease !important; } /* ============================================================ PROGRESS BAR (top of app) ============================================================ */ .prog-bar{ position:absolute;top:0;left:0;height:2px;z-index:9999; background:var(--accent-primary); width:0;opacity:0;pointer-events:none; } .prog-bar.active{ opacity:1;width:70%; transition:width 8s cubic-bezier(.1,.5,.3,1); } .prog-bar.done{ width:100%;opacity:0; transition:width .2s ease,opacity .3s ease .2s; } /* ============================================================ AUTO-HIDE TOPBAR ============================================================ */ .topbar{transition:transform .25s ease;} .topbar-hidden{transform:translateY(-100%);} /* ============================================================ SELLER VERIFIED BADGE ============================================================ */ .seller-verified{ display:inline-flex;align-items:center;justify-content:center; width:14px;height:14px;border-radius:50%; background:var(--accent-primary);color:var(--accent-contrast); font-size:9px;font-weight:700;vertical-align:middle;margin-left:3px; } /* ============================================================ WARRANTY SHIELD ON CARD ============================================================ */ .prod-warranty{font-size:12px;margin-left:4px;vertical-align:middle;opacity:.7;} .warranty-badge{color:var(--accent-new);} /* ============================================================ RETRY BUTTON ============================================================ */ .retry-btn{ margin-top:10px;padding:7px 20px;border-radius:var(--r-pill); font-family:var(--font-mono);font-size:11px; background:var(--bg-elevated);border:1px solid var(--border-subtle); color:var(--text-primary);cursor:pointer; transition:border-color .15s; } .retry-btn:hover{border-color:var(--accent-primary);color:var(--accent-primary);} /* ============================================================ RECENTLY VIEWED ROW ============================================================ */ .recent-row{ display:flex;gap:8px;padding:0 var(--page-padding) 8px; overflow-x:auto;scrollbar-width:none; } .recent-row::-webkit-scrollbar{display:none;} .recent-chip{ flex-shrink:0;display:flex;align-items:center;gap:5px; padding:6px 10px;border-radius:var(--r-pill); background:var(--bg-elevated);border:1px solid var(--border-subtle); cursor:pointer;font-size:11px;color:var(--text-primary); transition:border-color .15s; } .recent-chip:hover{border-color:var(--accent-primary);} .recent-thumb{ position:relative;overflow:hidden;flex-shrink:0; width:20px;height:20px;border-radius:5px; display:flex;align-items:center;justify-content:center; background:var(--bg-base); } .recent-thumb .thumb-fg{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;} .recent-thumb .thumb-placeholder{width:70%;height:70%;background:none;border:none;} .recent-name{font-family:var(--font-body);white-space:nowrap;max-width:80px;overflow:hidden;text-overflow:ellipsis;} /* ============================================================ SHEET ACTIONS ROW ============================================================ */ .sheet-actions-row{display:flex;gap:8px;align-items:center;} .sheet-actions-row .sheet-btn.secondary{flex:1;margin-top:0;} .sheet-action-btn{ width:40px;height:40px;border-radius:var(--r-card);flex-shrink:0; background:var(--bg-elevated);border:1px solid var(--border-subtle); color:var(--text-secondary);cursor:pointer; display:flex;align-items:center;justify-content:center; transition:color .15s,border-color .15s;margin-top:8px; } .sheet-action-btn:hover{color:var(--accent-primary);border-color:var(--accent-primary);} /* ============================================================ SOLD-OUT DIAGONAL OVERLAY ============================================================ */ .prod-card.sold-out .prod-img::before{ content:'';position:absolute;inset:0;z-index:2; background:repeating-linear-gradient( -45deg, transparent,transparent 8px, rgba(0,0,0,.12) 8px,rgba(0,0,0,.12) 9px ); pointer-events:none; } /* ============================================================ RESPONSIVE GRID: 3 columns on wider screens ============================================================ */ @media(min-width:420px){ .prod-grid{grid-template-columns:repeat(3,1fr);} } /* ============================================================ ANIMATED NOTIFICATION BELL ============================================================ */ @keyframes bellRing{ 0%,100%{transform:rotate(0);} 15%{transform:rotate(14deg);} 30%{transform:rotate(-12deg);} 45%{transform:rotate(8deg);} 60%{transform:rotate(-6deg);} 75%{transform:rotate(2deg);} } #bellBtn svg{transition:transform .1s;} #bellBtn:hover svg{animation:bellRing .8s ease;} /* ============================================================ COMPARE MODE ============================================================ */ .cmp-btn{ position:absolute;top:6px;right:6px;z-index:3; width:24px;height:24px;border-radius:50%; background:rgba(0,0,0,.35);backdrop-filter:blur(4px); border:none;cursor:pointer;padding:0; display:flex;align-items:center;justify-content:center; transition:transform .15s,background .15s;opacity:.7; } .cmp-btn:hover{transform:scale(1.15);opacity:1;} .cmp-btn.cmp-on{background:var(--accent-primary);opacity:1;} .cmp-btn.cmp-on svg{stroke:var(--accent-contrast);} .compare-bar{ display:none;align-items:center;justify-content:space-between; padding:8px var(--page-padding); background:rgba(var(--accent-rgb),0.08);border-bottom:1px solid var(--border-subtle); font-size:12px;color:var(--text-primary);font-family:var(--font-mono); } .compare-bar.visible{display:flex;} .cmp-go{ padding:5px 14px;border-radius:var(--r-pill);background:var(--accent-primary); color:var(--accent-contrast);border:none;cursor:pointer;font-size:11px;font-weight:600; } .cmp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:12px;margin:12px 0;} .cmp-col{text-align:center;padding:10px;background:var(--bg-elevated);border-radius:var(--r-card);border:1px solid var(--border-subtle);} .cmp-thumb{ position:relative;overflow:hidden;margin:0 auto 8px; width:56px;height:56px;border-radius:var(--r-card); display:flex;align-items:center;justify-content:center; background:var(--bg-base); } .cmp-thumb .thumb-fg{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;} .cmp-thumb .thumb-placeholder{width:60%;height:60%;} .cmp-name{font-size:12px;font-weight:600;color:var(--text-primary);margin-bottom:4px;} .cmp-price{font-family:var(--font-mono);font-size:16px;font-weight:600;color:var(--accent-primary);margin-bottom:6px;} .cmp-meta{font-size:10px;color:var(--text-secondary);margin-bottom:2px;font-family:var(--font-mono);} /* ============================================================ QUICK-VIEW (long press) ============================================================ */ .quickview{text-align:center;padding:8px 0;} .qv-name{font-family:var(--font-display);font-size:18px;font-weight:700;margin-bottom:4px;} .qv-price{font-family:var(--font-mono);font-size:22px;font-weight:600;color:var(--accent-primary);margin-bottom:6px;} .qv-meta{font-size:11px;color:var(--text-secondary);margin-bottom:6px;font-family:var(--font-mono);} .qv-desc{font-size:12px;color:var(--text-data);line-height:1.5;} /* ============================================================ PRICE STRIKETHROUGH ============================================================ */ .price-orig{text-decoration:line-through;opacity:.5;font-size:.75em;margin-right:3px;color:var(--text-secondary);} /* ============================================================ ORDER TIMELINE ============================================================ */ .order-timeline{display:flex;align-items:center;justify-content:center;gap:0;margin:12px 0 16px;padding:0 10px;} .tl-step{display:flex;align-items:center;text-align:center;} .tl-dot{ width:18px;height:18px;border-radius:50%; border:2px solid var(--border-subtle);background:var(--bg-elevated); display:flex;align-items:center;justify-content:center; font-size:9px;transition:all .2s;flex-shrink:0; } .tl-done .tl-dot{border-color:var(--accent-primary);background:var(--accent-primary);color:var(--accent-contrast);} .tl-done .tl-dot::after{content:'\2713';font-size:10px;font-weight:700;color:var(--accent-contrast);} .tl-line{width:30px;height:2px;background:var(--border-subtle);flex-shrink:0;} .tl-done .tl-line{background:var(--accent-primary);} .tl-label{font-size:9px;color:var(--text-secondary);margin-top:4px;position:absolute;transform:translateY(18px);font-family:var(--font-mono);} .tl-step{position:relative;flex-direction:column;} /* ============================================================ SPARKLINE ============================================================ */ .sparkline-wrap{padding:0 var(--page-padding);margin-bottom:8px;} .sparkline{width:100%;height:40px;} .sparkline polyline{fill:none;stroke:var(--accent-primary);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;} /* ============================================================ TAB COUNT BADGE ============================================================ */ .tab-count{font-size:10px;opacity:.5;font-weight:400;} /* ============================================================ FLY-TO-BALANCE ANIMATION ============================================================ */ .fly-dot{ position:fixed;width:12px;height:12px;border-radius:50%; background:var(--accent-primary);z-index:99999; transition:all .45s cubic-bezier(.4,0,.2,1); pointer-events:none; box-shadow:0 0 12px var(--accent-primary); } .bal-pulse{animation:balPulseAnim .4s ease;} @keyframes balPulseAnim{0%{transform:scale(1);}50%{transform:scale(1.15);}100%{transform:scale(1);}} /* ============================================================ CONFETTI ============================================================ */ .confetti-container{position:fixed;inset:0;z-index:99998;pointer-events:none;overflow:hidden;} .confetti-piece{ position:absolute;top:-10px;width:8px;height:8px;border-radius:2px; animation:confettiFall linear forwards; } @keyframes confettiFall{ 0%{transform:translateY(0) rotate(0deg);opacity:1;} 100%{transform:translateY(100vh) rotate(720deg);opacity:0;} } /* ============================================================ ACHIEVEMENT BADGES ============================================================ */ .badge-row{display:flex;gap:6px;justify-content:center;margin:8px 0 4px;flex-wrap:wrap;} .achv-badge{ font-size:18px; width:32px;height:32px;border-radius:50%; background:var(--bg-elevated);border:1px solid var(--border-subtle); display:flex;align-items:center;justify-content:center; transition:transform .15s;cursor:default; } .achv-badge:hover{transform:scale(1.2);} /* ============================================================ RECOMMENDATIONS ============================================================ */ .recs-section{margin:14px 0 6px;border-top:1px solid var(--border-subtle);padding-top:12px;} .recs-title{font-family:var(--font-mono);font-size:10px;color:var(--text-secondary);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px;} .recs-row{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;} .recs-row::-webkit-scrollbar{display:none;} .rec-chip{ flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:3px; padding:8px 10px;border-radius:var(--r-card); background:var(--bg-elevated);border:1px solid var(--border-subtle); cursor:pointer;min-width:70px;transition:border-color .15s; } .rec-chip:hover{border-color:var(--accent-primary);} .rec-thumb{ position:relative;overflow:hidden;flex-shrink:0; width:32px;height:32px;border-radius:6px; display:flex;align-items:center;justify-content:center; background:var(--bg-base); } .rec-thumb .thumb-fg{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;} .rec-thumb .thumb-placeholder{width:70%;height:70%;background:none;border:none;} .rec-name{font-size:10px;color:var(--text-primary);white-space:nowrap;max-width:70px;overflow:hidden;text-overflow:ellipsis;} .rec-price{font-size:11px;font-family:var(--font-mono);color:var(--accent-primary);font-weight:600;} /* ============================================================ MINI PRODUCT TOOLTIP (hover on product name) ============================================================ */ .prod-tooltip{ position:fixed;z-index:9999; background:var(--bg-surface);border:1px solid var(--border-subtle); border-radius:var(--r-card);padding:10px 12px; box-shadow:var(--shadow-pop);max-width:200px; font-size:11px;pointer-events:none; animation:tooltipIn .15s ease; } @keyframes tooltipIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}} .prod-tooltip .tt-name{font-weight:600;margin-bottom:3px;} .prod-tooltip .tt-price{font-family:var(--font-mono);color:var(--accent-primary);font-weight:600;} /* ============================================================ SMOOTH NUMBER TRANSITIONS ============================================================ */ .num-transition{transition:opacity .2s;display:inline-block;} /* ============================================================ PRODUCT AVAILABILITY DOT ============================================================ */ .avail-dot{ width:6px;height:6px;border-radius:50%;display:inline-block;margin-right:4px;vertical-align:middle; } .avail-dot.avail-high{background:#00E5A0;} .avail-dot.avail-mid{background:var(--warn);} .avail-dot.avail-low{background:var(--accent-hot);} /* ============================================================ ADMIN OVERLAY — smooth open/close ============================================================ */ .admin-overlay{ transition:opacity .2s ease; } .admin-overlay.open{ animation:overlayFadeIn .2s ease; } @keyframes overlayFadeIn{ from{opacity:0;} to{opacity:1;} } /* ============================================================ JOIN GATE OVERLAY — forced channel/group join ============================================================ */ .join-gate-overlay{ position:fixed;inset:0;z-index:100000; background:var(--bg-base); display:flex;align-items:center;justify-content:center; padding:20px; animation:joinGateFadeIn .3s ease; } @keyframes joinGateFadeIn{from{opacity:0;}to{opacity:1;}} .join-gate-card{ width:100%;max-width:380px; background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:var(--r-card,12px); padding:32px 24px; text-align:center; box-shadow:var(--shadow-pop,0 8px 32px rgba(0,0,0,.3)); } .join-gate-icon{ width:72px;height:72px;border-radius:50%; background:var(--bg-elevated,#1a1a2e); display:flex;align-items:center;justify-content:center; margin:0 auto 20px; color:var(--accent-primary,#7C5CFC); } .join-gate-title{ font-family:var(--font-display,sans-serif); font-size:20px;font-weight:700; color:var(--text-primary); margin-bottom:8px; } .join-gate-desc{ font-size:13px;color:var(--text-secondary); line-height:1.5;margin-bottom:24px; } .join-gate-buttons{display:flex;flex-direction:column;gap:10px;margin-bottom:20px;} .join-gate-btn{ display:flex;align-items:center;justify-content:center;gap:8px; padding:12px 16px;border-radius:10px; text-decoration:none;font-weight:600;font-size:14px; transition:all .15s ease;cursor:pointer;border:none; } .join-gate-btn.channel{ background:linear-gradient(135deg,#2196F3,#1976D2);color:#fff; } .join-gate-btn.channel:hover{filter:brightness(1.1);transform:translateY(-1px);} .join-gate-btn.group{ background:linear-gradient(135deg,#4CAF50,#388E3C);color:#fff; } .join-gate-btn.group:hover{filter:brightness(1.1);transform:translateY(-1px);} .join-gate-btn.joined{ background:var(--bg-elevated);color:var(--text-secondary); pointer-events:none;opacity:.6; } .join-gate-btn svg{width:18px;height:18px;flex-shrink:0;} .join-gate-check{ display:flex;align-items:center;justify-content:center;gap:6px; width:100%;padding:12px;border-radius:10px; background:var(--accent-primary,#7C5CFC);color:var(--accent-contrast,#fff); font-weight:600;font-size:14px;border:none;cursor:pointer; transition:all .15s ease; } .join-gate-check:hover{filter:brightness(1.1);transform:translateY(-1px);} .join-gate-check:disabled{opacity:.5;pointer-events:none;} .join-gate-hint{ font-size:11px;color:var(--text-secondary); margin-top:12px;opacity:.7; }