2 lines
22 KiB
CSS
2 lines
22 KiB
CSS
:root{--surface-base: rgba(10, 10, 14, .97);--surface-1: rgba(255, 255, 255, .025);--surface-2: rgba(255, 255, 255, .04);--surface-3: rgba(255, 255, 255, .06);--accent: #f59e0b;--accent-light: #fbbf24;--accent-dim: rgba(245, 158, 11, .12);--accent-subtle: rgba(245, 158, 11, .05);--success: #4ade80;--success-dim: rgba(74, 222, 128, .12);--danger: #ef4444;--danger-dim: rgba(239, 68, 68, .12);--warning: #f59e0b;--warning-dim: rgba(245, 158, 11, .12);--text-primary: #fafafa;--text-secondary: #d4d4d8;--text-muted: #71717a;--text-dim: #52525b;--text-ghost: #3f3f46;--border-subtle: rgba(255, 255, 255, .035);--border-default: rgba(255, 255, 255, .06);--border-accent: rgba(245, 158, 11, .15);--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;--space-xl: 20px;--space-2xl: 24px;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 10px;--radius-xl: 14px;--font-family: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-default: .25s cubic-bezier(.4, 0, .2, 1)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body{background:transparent!important;font-family:var(--font-family);color:var(--text-secondary);overflow:hidden;-webkit-font-smoothing:antialiased}#app{width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;background:transparent}.cs-overlay{position:relative;width:75vw;max-width:1100px;height:75vh;max-height:800px;background:var(--surface-base);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);display:flex;flex-direction:column;overflow:hidden}.cs-overlay:before,.cs-overlay:after{content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border-radius:var(--radius-xl);pointer-events:none;z-index:2}.cs-overlay:before{background:conic-gradient(from var(--neon-angle, 0deg),transparent 0%,transparent 15%,var(--accent) 25%,var(--accent-light) 30%,transparent 40%,transparent 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;padding:1.5px;animation:neon-rotate 4s linear infinite}.cs-overlay:after{background:conic-gradient(from var(--neon-angle, 0deg),transparent 0%,transparent 18%,var(--accent-dim) 25%,transparent 42%,transparent 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;padding:4px;filter:blur(6px);animation:neon-rotate 4s linear infinite}@property --neon-angle{syntax: "<angle>"; initial-value: 0deg; inherits: false;}@keyframes neon-rotate{to{--neon-angle: 360deg}}.overlay-enter-active{transition:all .3s cubic-bezier(.16,1,.3,1)}.overlay-leave-active{transition:all .2s cubic-bezier(.4,0,1,1)}.overlay-enter-from{opacity:0;transform:scale(.95) translateY(10px)}.overlay-leave-to{opacity:0;transform:scale(.97) translateY(5px)}.cs-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-md) var(--space-xl);border-bottom:1px solid var(--border-subtle);background:linear-gradient(180deg,var(--accent-subtle) 0%,transparent 100%);position:relative;z-index:3;flex-shrink:0}.cs-header:after{content:"";position:absolute;bottom:-1px;left:5%;right:5%;height:1px;background:linear-gradient(90deg,transparent,var(--border-accent),transparent)}.header-left{display:flex;align-items:center;gap:var(--space-sm)}.shop-name{font-size:18px;font-weight:800;color:var(--text-primary);letter-spacing:-.3px}.header-center{display:flex;align-items:center;gap:var(--space-lg)}.header-right{display:flex;align-items:center;gap:var(--space-md)}.coin-balance{display:flex;align-items:center;gap:var(--space-sm);padding:6px 14px;background:linear-gradient(135deg,var(--accent-dim),var(--accent-subtle));border:1px solid var(--border-accent);border-radius:20px}.coin-icon{width:22px;height:22px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accent),var(--accent-light));border-radius:50%;color:#000;font-size:11px;font-weight:800;flex-shrink:0}.coin-amount{font-size:16px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}.playtime-timer{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--success)}.playtime-timer svg{color:var(--success)}.admin-badge{display:flex;align-items:center;gap:4px;padding:4px 8px;background:#a855f714;border:1px solid rgba(168,85,247,.15);border-radius:var(--radius-sm);font-size:9px;font-weight:700;color:#a855f7;text-transform:uppercase;letter-spacing:.5px}.redeem-section{display:flex;align-items:flex-end;gap:var(--space-sm)}.redeem-input-wrap{display:flex;flex-direction:column;gap:2px}.redeem-label{font-size:9px;font-weight:600;color:var(--text-ghost);text-transform:uppercase;letter-spacing:.3px}.redeem-input{width:180px;padding:6px 10px;background:var(--surface-1);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-primary);font-size:12px;font-family:var(--font-family);font-weight:500;outline:none;transition:border-color var(--transition-fast)}.redeem-input:focus{border-color:var(--border-accent)}.redeem-input::placeholder{color:var(--text-ghost)}.redeem-btn{padding:6px 14px;background:linear-gradient(135deg,var(--accent),var(--accent-light));border:none;border-radius:var(--radius-sm);color:#000;font-size:11px;font-weight:700;font-family:var(--font-family);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}.redeem-btn:hover:not(:disabled){transform:translateY(-1px)}.redeem-btn:disabled{opacity:.4;cursor:not-allowed}.close-btn{background:var(--surface-1);border:1px solid var(--border-subtle);color:var(--text-dim);cursor:pointer;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);transition:all var(--transition-fast);flex-shrink:0}.close-btn:hover{background:#ef444414;border-color:#ef444426;color:var(--danger);transform:scale(1.05)}.cs-main{flex:1;overflow-y:auto;overflow-x:hidden;position:relative;z-index:1}.home-view{padding:var(--space-lg) var(--space-xl);display:flex;flex-direction:column;gap:var(--space-lg);height:100%}.home-grid-container{width:100%;flex:1;display:flex;flex-direction:column}.home-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:var(--space-md);flex:1}.category-tile{position:relative;border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;border:2px solid var(--tile-color, var(--border-default));min-height:100px;transition:all var(--transition-default);background:var(--surface-1)}.category-tile.small{grid-column:span 1}.category-tile.medium{grid-column:span 2}.category-tile.large{grid-column:span 4}.tile-bg{position:absolute;top:0;right:0;bottom:0;left:0;background-size:cover;background-position:center;transition:transform .4s cubic-bezier(.4,0,.2,1)}.category-tile:hover .tile-bg{transform:scale(1.08)}.category-tile:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to top,#000000d9,#0000004d,#00000026);z-index:1}.category-tile:hover{transform:translateY(-3px);box-shadow:0 8px 30px var(--tile-glow, rgba(255, 255, 255, .05));border-color:var(--tile-color, var(--accent))}.tile-content{position:absolute;bottom:0;left:0;right:0;padding:var(--space-md) var(--space-lg);z-index:2;display:flex;align-items:center;gap:var(--space-sm)}.tile-icon{color:var(--tile-color, var(--accent));display:flex;align-items:center;flex-shrink:0;opacity:.9}.tile-label{font-size:16px;font-weight:700;color:var(--text-primary);letter-spacing:-.2px;text-shadow:0 1px 4px rgba(0,0,0,.5)}.tile-gradient{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0}.tile-fallback-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-55%);z-index:1;opacity:.15;transition:opacity .3s,transform .4s cubic-bezier(.4,0,.2,1);filter:drop-shadow(0 0 12px currentColor)}.category-tile:hover .tile-fallback-icon{opacity:.25;transform:translate(-50%,-55%) scale(1.1)}.tile-count{margin-left:auto;padding:2px 8px;background:#ffffff0f;border-radius:10px;font-size:10px;font-weight:600;color:var(--text-dim)}.history-tile{--tile-color: var(--text-muted);background:var(--surface-2)}.history-tile:before{background:linear-gradient(to top,#0009,#0003)}.history-gradient{background:radial-gradient(ellipse at 70% 30%,rgba(113,113,122,.08) 0%,transparent 60%),linear-gradient(135deg,#71717a0d,#0a0a0ef2)}.weekly-section{flex-shrink:0}.weekly-header{display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-md)}.weekly-badge{display:flex;align-items:center;gap:6px;padding:5px 12px;background:linear-gradient(135deg,var(--accent),var(--accent-light));border-radius:var(--radius-sm);color:#000;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;white-space:nowrap}.weekly-badge svg{color:#000}.weekly-discount-info{font-size:11px;font-weight:600;color:var(--success)}.weekly-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-md)}.weekly-card{background:linear-gradient(135deg,var(--accent-dim),var(--accent-subtle));border:1px solid var(--border-accent);border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;transition:all var(--transition-fast)}.weekly-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 6px 20px #f59e0b1a}.weekly-card.owned{opacity:.5;cursor:not-allowed}.weekly-card-image{width:100%;aspect-ratio:16 / 9;background:var(--surface-2);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.weekly-card-image img{width:100%;height:100%;object-fit:cover}.weekly-card-fallback{color:var(--text-ghost);opacity:.4}.weekly-card-body{padding:var(--space-sm) var(--space-md)}.weekly-card-name{font-size:12px;font-weight:700;color:var(--text-primary)}.weekly-card-pricing{display:flex;align-items:center;gap:5px;margin-top:4px}.category-view{height:100%;display:flex;flex-direction:column}.category-header{display:flex;align-items:center;gap:var(--space-lg);padding:var(--space-md) var(--space-xl);border-bottom:1px solid rgba(255,255,255,.03);flex-shrink:0}.back-btn{display:flex;align-items:center;gap:6px;padding:6px 12px;background:var(--surface-1);border:1px solid var(--border-subtle);border-radius:var(--radius-md);color:var(--text-muted);font-size:12px;font-weight:600;font-family:var(--font-family);cursor:pointer;transition:all var(--transition-fast)}.back-btn:hover{background:var(--surface-2);color:var(--text-primary);border-color:var(--border-default)}.category-title{font-size:16px;font-weight:700;color:var(--text-primary);letter-spacing:-.2px}.category-body{flex:1;overflow-y:auto;padding:var(--space-lg) var(--space-xl) var(--space-xl)}.search-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--surface-1);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);margin-bottom:var(--space-md);transition:border-color var(--transition-fast)}.search-bar:focus-within{border-color:var(--border-accent)}.search-bar svg{color:var(--text-ghost);flex-shrink:0}.search-bar input{flex:1;border:none;background:transparent;color:var(--text-primary);font-size:12px;font-family:var(--font-family);outline:none}.search-bar input::placeholder{color:var(--text-ghost)}.item-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-md)}.item-grid.four-col{grid-template-columns:repeat(4,1fr)}.item-card{background:var(--surface-1);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden;transition:all var(--transition-fast);position:relative}.item-card:hover{background:var(--surface-2);border-color:var(--border-default)}.item-card.sold-out{opacity:.5;pointer-events:none}.item-card.owned{opacity:.6}.item-card-image{width:100%;aspect-ratio:16 / 10;background:linear-gradient(135deg,var(--surface-2) 0%,var(--surface-3) 100%);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.item-card-image img{width:100%;height:100%;object-fit:cover}.item-card-image .fallback-icon{color:var(--text-ghost);font-size:28px;opacity:.4;filter:drop-shadow(0 0 8px currentColor);transition:opacity .2s,transform .3s}.item-card:hover .item-card-image .fallback-icon{opacity:.6;transform:scale(1.1)}.item-badge{position:absolute;top:8px;right:8px;padding:3px 8px;border-radius:var(--radius-sm);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.3px}.item-badge.limited{background:var(--danger-dim);color:var(--danger);border:1px solid rgba(239,68,68,.15)}.item-badge.weekly{background:var(--accent-dim);color:var(--accent);border:1px solid var(--border-accent)}.item-badge.owned-badge{background:var(--success-dim);color:var(--success);border:1px solid rgba(74,222,128,.15)}.item-badge.sold-out-badge{background:#ffffff0f;color:var(--text-dim);border:1px solid var(--border-subtle)}.item-card-body{padding:var(--space-md);display:flex;flex-direction:column;gap:var(--space-xs)}.item-card-name{font-size:13px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.item-card-desc{font-size:10px;color:var(--text-dim);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.item-card-amount{font-size:10px;font-weight:700;color:var(--accent)}.item-card-price{display:flex;align-items:center;gap:6px;margin-top:var(--space-xs)}.price-coin{width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accent),var(--accent-light));border-radius:50%;color:#000;font-size:8px;font-weight:800;flex-shrink:0}.price-amount{font-size:14px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}.price-original{font-size:11px;color:var(--text-ghost);text-decoration:line-through;font-variant-numeric:tabular-nums}.discount-tag{font-size:9px;font-weight:700;color:var(--success);background:var(--success-dim);padding:1px 5px;border-radius:3px}.stock-info{font-size:10px;font-weight:600;color:var(--danger);margin-top:2px}.pack-card{background:var(--surface-1);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden;transition:all var(--transition-fast)}.pack-card:hover{background:var(--surface-2);border-color:var(--border-default)}.pack-card.sold-out{opacity:.5;pointer-events:none}.pack-card-image{width:100%;aspect-ratio:16 / 10;background:linear-gradient(135deg,var(--surface-2) 0%,var(--surface-3) 100%);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.pack-card-image img{width:100%;height:100%;object-fit:cover}.pack-card-image .fallback-icon{color:var(--text-ghost);opacity:.4;filter:drop-shadow(0 0 8px currentColor)}.pack-card-body{padding:var(--space-md);display:flex;flex-direction:column;gap:var(--space-xs)}.pack-card-name{font-size:13px;font-weight:600;color:var(--text-primary)}.pack-card-desc{font-size:10px;color:var(--text-dim);line-height:1.3}.pack-contents{margin-top:var(--space-xs);padding:var(--space-sm);background:var(--surface-2);border-radius:var(--radius-sm)}.pack-contents-label{font-size:9px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.3px}.pack-contents-list{display:flex;flex-direction:column;gap:2px;margin-top:4px}.pack-content-item{display:flex;align-items:center;gap:4px;font-size:10px;color:var(--text-secondary);font-weight:500}.pack-content-item svg{color:var(--text-dim);flex-shrink:0}.cs-btn{width:100%;padding:var(--space-sm) var(--space-md);border:none;border-radius:var(--radius-md);font-size:11px;font-weight:600;font-family:var(--font-family);cursor:pointer;transition:all var(--transition-default);background:linear-gradient(135deg,var(--accent),var(--accent-light));color:#000;letter-spacing:.1px;display:flex;align-items:center;justify-content:center;gap:var(--space-sm);position:relative;overflow:hidden;margin-top:var(--space-sm)}.cs-btn:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,.15) 50%,transparent 60%);transform:translate(-100%);transition:transform .5s}.cs-btn:hover:not(:disabled){transform:translateY(-1px)}.cs-btn:hover:not(:disabled):after{transform:translate(100%)}.cs-btn:active:not(:disabled){transform:translateY(0) scale(.98)}.cs-btn:disabled{background:var(--surface-1);color:var(--text-ghost);cursor:not-allowed;border:1px solid var(--border-subtle);opacity:.6}.cs-btn:disabled:after{display:none}.cs-btn.small{width:auto;padding:7px 14px;font-size:11px;border-radius:7px}.cs-btn.ghost{background:var(--surface-1);border:1px solid rgba(255,255,255,.05);color:var(--text-secondary)}.cs-btn.ghost:after{display:none}.cs-btn.ghost:hover:not(:disabled){background:var(--surface-2);border-color:var(--border-default);color:var(--text-primary);transform:none}.cs-btn.green{background:linear-gradient(135deg,var(--success),#22c55e)}.cs-btn.red{background:linear-gradient(135deg,var(--danger),#dc2626);color:#fff}.cs-input{width:100%;padding:10px 14px;background:var(--surface-1);border:1px solid rgba(255,255,255,.05);border-radius:var(--radius-md);color:var(--text-primary);font-size:13px;font-weight:500;font-family:var(--font-family);outline:none;transition:border-color var(--transition-fast),background var(--transition-fast)}.cs-input:focus{border-color:var(--border-accent);background:var(--accent-subtle)}.cs-input::placeholder{color:var(--text-ghost)}.cs-input.error{border-color:#ef44444d}.cs-input.valid{border-color:#4ade804d}.cs-select{width:100%;padding:10px 32px 10px 14px;background:var(--surface-1);border:1px solid rgba(255,255,255,.05);border-radius:var(--radius-md);color:var(--text-primary);font-size:13px;font-weight:500;font-family:var(--font-family);outline:none;transition:border-color var(--transition-fast);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}.cs-select:focus{border-color:var(--border-accent)}.cs-select option{background:#18181b;color:var(--text-primary)}.plate-editor{display:flex;flex-direction:column;gap:var(--space-md)}.plate-preview{display:flex;align-items:center;justify-content:center;padding:var(--space-lg) var(--space-2xl);background:linear-gradient(135deg,#1e293b,#0f172a);border:2px solid var(--border-accent);border-radius:var(--radius-lg);min-height:60px}.plate-text{font-size:24px;font-weight:800;color:var(--text-primary);letter-spacing:4px;text-transform:uppercase;font-variant-numeric:tabular-nums}.plate-text.empty{color:var(--text-ghost);letter-spacing:2px;font-size:14px;font-weight:500}.char-counter{font-size:10px;font-weight:600;text-align:right}.char-counter.valid{color:var(--success)}.char-counter.error{color:var(--danger)}.char-counter.neutral{color:var(--text-dim)}.history-list{display:flex;flex-direction:column;gap:2px}.history-row{display:flex;align-items:center;gap:10px;padding:10px 0;font-size:12px}.history-row+.history-row{border-top:1px solid rgba(255,255,255,.02)}.history-icon{width:32px;height:32px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px}.history-icon.vehicle{background:var(--accent-dim);color:var(--accent)}.history-icon.plate{background:#6366f11a;color:#818cf8}.history-icon.tebex{background:var(--success-dim);color:var(--success)}.history-icon.admin{background:#a855f71a;color:#a855f7}.history-icon.item{background:#3b82f61a;color:#60a5fa}.history-icon.pack{background:#ec48991a;color:#f472b6}.history-info{flex:1;min-width:0}.history-name{font-weight:600;color:var(--text-primary);font-size:12px}.history-meta{font-size:10px;color:var(--text-ghost);margin-top:1px}.history-price{font-weight:700;flex-shrink:0;font-variant-numeric:tabular-nums;color:var(--accent)}.confirm-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:100}.confirm-box{background:#0a0a0efa;border:1px solid var(--border-accent);border-radius:var(--radius-xl);padding:var(--space-2xl);max-width:380px;width:90%}.confirm-box h3{font-size:16px;font-weight:700;color:var(--text-primary);margin-bottom:var(--space-md)}.confirm-item{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md);background:var(--surface-1);border:1px solid var(--border-subtle);border-radius:var(--radius-md);margin-bottom:var(--space-lg)}.confirm-item-image{width:48px;height:48px;border-radius:var(--radius-md);background:var(--surface-2);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}.confirm-item-image img{width:100%;height:100%;object-fit:cover}.confirm-item-info{flex:1}.confirm-item-name{font-size:13px;font-weight:600;color:var(--text-primary)}.confirm-item-price{font-size:12px;font-weight:700;color:var(--accent);margin-top:2px}.confirm-summary{display:flex;flex-direction:column;gap:var(--space-sm);margin-bottom:var(--space-lg)}.confirm-row{display:flex;justify-content:space-between;align-items:center;font-size:12px}.confirm-row .label{color:var(--text-muted)}.confirm-row .value{font-weight:600;color:var(--text-primary);font-variant-numeric:tabular-nums}.confirm-row .value.after{color:var(--success)}.confirm-row .value.admin-free{color:#a855f7}.confirm-actions{display:flex;gap:var(--space-sm);justify-content:flex-end}.empty-state{text-align:center;color:var(--text-ghost);font-size:12px;padding:36px 0;font-weight:500}.step-section{display:flex;flex-direction:column;gap:var(--space-md);margin-bottom:var(--space-lg)}.step-label{font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px}.fade-enter-active{transition:all .25s cubic-bezier(.16,1,.3,1)}.fade-leave-active{transition:all .15s ease-in}.fade-enter-from{opacity:0;transform:translateY(6px)}.fade-leave-to{opacity:0;transform:translateY(-4px)}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:#ffffff03;margin:4px 0}::-webkit-scrollbar-thumb{background:var(--accent-dim);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--border-accent)}.row{display:flex;gap:var(--space-sm)}.row>*{flex:1}.mt-sm{margin-top:var(--space-sm)}.mt-md{margin-top:var(--space-md)}
|