.inv-card-wrap{overflow:hidden;position:relative;} .inv-card{transition:transform .25s cubic-bezier(.25,.46,.45,.94);touch-action:pan-y;will-change:transform;} .sel-dot{display:none;position:absolute;top:35px;left:10px;transform:translateY(-50%);width:22px;height:22px;border-radius:50%;background:rgba(124,109,242,0.2);border:2px solid rgba(124,109,242,0.4);z-index:15;transition:all .15s;align-items:center;justify-content:center;} .sel-dot::after{content:'';width:10px;height:10px;border-radius:50%;background:transparent;transition:background .15s;} .bulk-active .sel-dot{display:flex;}.bulk-active .inv-card{margin-left:36px;} .inv-selected .sel-dot{background:var(--purple,#7c6df2);border-color:var(--purple,#7c6df2);} .inv-selected .sel-dot::after{background:#fff;} .cas{display:flex!important;flex-direction:row;gap:8px;padding:6px 12px 10px;justify-content:flex-start;} .cas button{flex:0 0 auto!important;padding:7px 20px!important;border:none!important;border-radius:20px!important;font-size:12px!important;font-weight:600!important;cursor:pointer;letter-spacing:.03em;transition:all .15s;text-transform:uppercase;} .cas button:active{transform:scale(.95);opacity:.8;} .cas .cs{color:#fff!important;background:linear-gradient(135deg,#22c55e,#16a34a)!important;} .cas .ce{color:rgba(124,109,242,1)!important;background:rgba(124,109,242,0.12)!important;border:1px solid rgba(124,109,242,0.3)!important;} *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased} :root{ --bg:#09090e; --bg2:#121219; --card:#121219; --glass:rgba(255,255,255,0.03); --glass-border:rgba(255,255,255,0.07); --text:#f3f3f6; --muted:#9a9aa5; --muted2:#5e5e6a; --green:#34d399; --green-dim:rgba(52,211,153,0.14); --red:#f2667c; --red-dim:rgba(242,102,124,0.14); --blue:#3b82f6; --blue-dim:rgba(59,130,246,0.15); --purple:#9b5cff; --accent:#7c6df2; --yellow:#f59e0b; --nav-h:72px; --safe-bottom:env(safe-area-inset-bottom,0px); --va-bg:#09090e; --va-bg-deep:#08080c; --va-surface:#121219; --va-surface-2:#15151d; --va-surface-soft:rgba(255,255,255,0.03); --va-border:rgba(255,255,255,0.07); --va-text:#f3f3f6; --va-text-strong:#f8f8fb; --va-text-muted:#9a9aa5; --va-text-faint:#74747e; --va-text-dim:#5e5e6a; --va-accent:#7c6df2; --va-accent-2:#9b5cff; --va-accent-soft:#a99bff; --va-accent-tint:#c4bdf5; --va-accent-deep:#4d3fb0; --va-accent-nav:#8b7cf6; --va-success:#34d399; --va-success-deep:#1f7d5c; --va-danger:#f2667c; --va-danger-solid:#e0455f; --va-grad-brand:linear-gradient(135deg,#7c6df2,#9b5cff); --va-grad-panel:linear-gradient(155deg,#1e1a3c,#15131f); --va-grad-success:linear-gradient(155deg,#16261f,#121a17); --va-radius-sm:12px; --va-radius-md:18px; --va-radius-lg:22px; --va-radius-sheet:30px; --va-radius-pill:999px; } html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:'Satoshi',sans-serif} body::before{content:'';position:fixed;top:0;left:0;right:0;bottom:0;background: radial-gradient(ellipse 80% 50% at 20% -10%,rgba(59,130,246,0.08) 0%,transparent 60%), radial-gradient(ellipse 60% 40% at 80% 110%,rgba(139,92,246,0.07) 0%,transparent 60%); z-index:0} /* ═══ LAYOUT ═══ */ #app{position:relative;z-index:1;width:100%;min-height:100vh;display:flex;flex-direction:column} .sections{flex:1;overflow:hidden;position:relative} .section{position:absolute;inset:0;overflow-y:auto;padding:16px 16px calc(var(--nav-h) + var(--safe-bottom) + 88px);display:none;scrollbar-width:none} .section::-webkit-scrollbar{display:none} .section.active{display:block} /* ═══ NAV ═══ */ .nav{position:fixed;bottom:0;left:0;right:0;height:calc(var(--nav-h) + var(--safe-bottom));z-index:100;padding-bottom:var(--safe-bottom)} .nav-inner{height:var(--nav-h);display:flex;align-items:stretch;background:#0e0e1a;backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border-top:1px solid var(--glass-border)} .nav-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:none;background:none;color:var(--muted);cursor:pointer;transition:color .2s;padding:6px 4px;position:relative} .nav-btn svg{width:22px;height:22px;stroke-width:1.5;transition:transform .2s}.nav-icon{font-size:26px;line-height:1;transition:transform .2s;display:block}.nav-btn.active .nav-icon{transform:scale(1.1)} ..nav-btn span{font-size:12px;font-weight:500;letter-spacing:.4px;text-transform:uppercase} .nav-btn.active{color:#7c6df2}.nav-btn.active span{font-weight:600} .nav-btn.active svg{transform:scale(1.1)} /* ═══ GLASS CARDS ═══ */ .card{background:var(--card);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:16px;padding:16px;margin-bottom:12px} .card-sm{background:var(--card);backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:12px;padding:12px;margin-bottom:10px} .stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px} .stat-card{background:rgba(124,109,242,0.08);border:1px solid rgba(124,109,242,0.15);border-radius:12px;padding:12px} .stat-val{font-family:'Clash Display',sans-serif;font-size:20px;font-weight:700;line-height:1;letter-spacing:-0.5px} .stat-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-top:5px;font-weight:500} .stat-card.green{background:rgba(52,211,153,0.08);border-color:rgba(52,211,153,0.2)}.stat-card.green .stat-val{color:var(--green)} .stat-card.red .stat-val{color:var(--red)} .stat-card.blue .stat-val{color:var(--blue)} /* ═══ TYPOGRAPHY ═══ */ .page-title{font-family:'Clash Display',sans-serif;font-size:26px;font-weight:700;margin-bottom:10px;padding-top:6px;letter-spacing:-0.3px} .section-label{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:8px;margin-top:14px} /* ═══ SEARCH ═══ */ .search-wrap{position:relative;margin-bottom:8px} .search-wrap svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);width:16px;height:16px;stroke-width:2} .search-input{width:100%;background:var(--glass);border:1px solid var(--glass-border);border-radius:12px;padding:11px 12px 11px 38px;color:var(--text);font-size:15px;font-family:'Satoshi',sans-serif;outline:none;transition:border-color .2s} .search-input::placeholder{color:var(--muted)} .search-input:focus{border-color:rgba(59,130,246,0.4)} /* ═══ BUTTONS ═══ */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;border-radius:10px;height:30px;font-family:'Satoshi',sans-serif;font-weight:600;cursor:pointer;transition:all .15s;active:transform scale(.97)} .btn:active{transform:scale(.97)} .btn-primary{background:linear-gradient(135deg,#7c6df2,#9b5cff);color:#fff;padding:14px 20px;font-size:15px;font-weight:600;width:100%;height:auto;box-shadow:0 12px 30px -10px rgba(124,109,242,0.6)} .btn-green{background:var(--green);color:#fff;border:none;padding:0 18px;font-size:13px;font-weight:700} .btn-red{background:var(--red-dim);color:var(--red);border:1px solid rgba(239,68,68,0.3);padding:0 14px;font-size:13px;font-weight:700;min-width:34px} .btn-ghost{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);color:var(--text);padding:0 16px;font-size:13px;font-weight:700} .btn-icon{background:#7c6df2;color:#fff;width:52px;height:52px;border-radius:50%;position:fixed;bottom:calc(var(--nav-h) + var(--safe-bottom) + 16px);right:16px;z-index:50;box-shadow:0 0 20px rgba(124,109,242,0.5);font-size:24px;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer} .btn-icon:active{transform:scale(.93)} /* ── Reskin: inventory FAB + menu → component kit (scoped to #fab / #inv-fab-menu only) ── */ #fab{width:58px;height:58px;font-size:26px;font-weight:500;background:linear-gradient(135deg,#7c6df2,#9b5cff);box-shadow:0 14px 30px -8px rgba(124,109,242,0.7);} #fab:active{transform:scale(.93);} #inv-fab-menu{background:#121219;border:1px solid rgba(255,255,255,0.10);border-radius:18px;box-shadow:0 18px 40px -12px rgba(0,0,0,0.65);padding:8px;min-width:190px;} #inv-fab-menu button{background:#1a1a24;border:1px solid rgba(255,255,255,0.05);border-radius:12px;color:var(--text);font-family:'Satoshi',sans-serif;font-size:14.5px;font-weight:500;gap:11px;padding:0 14px;min-height:46px;margin-bottom:6px;transition:background .14s,transform .12s;} #inv-fab-menu button:last-child{margin-bottom:0;} #inv-fab-menu button:hover{background:#22222e;} #inv-fab-menu button:active{background:#262635;transform:scale(.985);} /* ═══ FILTER PILLS ═══ */ .filters{display:flex;gap:6px;margin-bottom:10px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px} .filters::-webkit-scrollbar{display:none} .pill{background:var(--glass);border:1px solid var(--glass-border);border-radius:20px;padding:6px 14px;font-size:13px;color:var(--muted);cursor:pointer;white-space:nowrap;transition:all .15s} .pill.active{background:var(--blue-dim);border-color:rgba(59,130,246,0.4);color:var(--blue)} /* ═══ INVENTORY CARD ═══ */ /* retired: .inv-card{background:var(--card);backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:12px;padding:12px 12px 12px 32px;margin-bottom:6px;display:flex;gap:12px;align-items:center;position:relative;overflow:hidden} */ /* retired: .inv-card-img{width:48px;height:66px;border-radius:6px;object-fit:cover;background:var(--glass);flex-shrink:0} */ /* retired: .inv-card-img-placeholder{width:48px;height:66px;border-radius:6px;background:linear-gradient(135deg,rgba(59,130,246,0.15),rgba(139,92,246,0.15));border:1px solid var(--glass-border);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:20px} */ /* retired: .inv-card-info{flex:1;min-width:0} */ /* retired: .inv-card-name{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} */ /* retired: .inv-card-set{font-size:12px;color:var(--muted);margin-top:2px} */ /* retired: .inv-card-meta{display:flex;gap:8px;margin-top:6px;align-items:center;flex-wrap:wrap} */ /* retired: .inv-card-actions{display:flex;gap:6px;flex-shrink:0}.btn-edit{padding:6px 10px;font-size:12px;background:rgba(59,130,246,0.15);border:1px solid rgba(59,130,246,0.3);color:#60a5fa;border-radius:6px;cursor:pointer} */ .badge{font-size:11px;padding:3px 8px;border-radius:6px;font-weight:500} .badge-green{background:var(--green-dim);color:var(--green)} .badge-red{background:var(--red-dim);color:var(--red)} .badge-blue{background:var(--blue-dim);color:var(--blue)} .badge-gray{background:var(--glass);color:var(--muted);border:1px solid var(--glass-border)} /* ═══ SHOW CARD ═══ */ .show-card{background:var(--card);backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:12px;padding:14px;margin-bottom:8px;cursor:pointer;transition:border-color .2s} .show-card:active{border-color:rgba(59,130,246,0.4)} .show-card-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px} .show-card-top>div:first-child{flex:1;min-width:0} .show-card-name{font-family:'Clash Display',sans-serif;font-size:18px;font-weight:600} .show-card-date{font-size:13px;color:var(--muted);margin-top:2px} .show-card-venue{font-size:13px;color:var(--muted);margin-top:4px} .show-card-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid var(--glass-border)} .show-card-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;padding-top:8px;border-top:1px solid var(--glass-border)} .show-card-menu{position:relative;display:inline-block}.show-card-menu-btn{background:none;border:1px solid var(--glass-border);color:var(--muted);border-radius:6px;padding:1px 8px;font-size:18px;cursor:pointer;line-height:1.4;letter-spacing:1px}.show-card-menu-btn:hover{color:var(--text);border-color:var(--muted2)}.show-card-menu-drop{display:none;position:absolute;right:0;top:calc(100% + 4px);background:var(--bg2);border:1px solid var(--glass-border);border-radius:8px;min-width:150px;z-index:100;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,0.4)}.show-card-menu-drop.open{display:block}.show-card-menu-drop button{display:block;width:100%;background:none;border:none;color:var(--text);text-align:left;padding:10px 14px;font-size:13px;cursor:pointer;white-space:nowrap}.show-card-menu-drop button:hover{background:rgba(255,255,255,0.06)} .show-stat{text-align:center} .show-stat-val{font-family:'Clash Display',sans-serif;font-size:16px;font-weight:600} .show-stat-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-top:2px} /* ── Reskin B4 #4: Shows tab chrome → component kit ── header action buttons, the per-card ⋯ menu, and the checklist modal; cards/badges/ stats/templates were kit already from the earlier Shows pass. */ #shows-list-view .btn-ghost{background:#1a1a24;border:1px solid rgba(255,255,255,0.10);color:#c9c8d4;border-radius:12px;} #shows-list .show-card-menu-btn{background:#1a1a24;border:1px solid rgba(255,255,255,0.10);color:#c9c8d4;border-radius:10px;} #shows-list .show-card-menu-drop{background:#121219;border:1px solid rgba(255,255,255,0.10);border-radius:12px;} #shows-list .show-card-menu-drop button:hover{background:rgba(124,109,242,0.10);} #modal-checklist .modal{background:#121219;border-top:1px solid rgba(255,255,255,0.10);border-radius:24px 24px 0 0;} #modal-checklist .modal-handle{width:40px;height:4px;} /* ── Reskin: Shows screen cards → component kit (scoped to #shows-list) ── */ #shows-list .show-card{background:#121219;border:1px solid rgba(255,255,255,0.07);border-radius:18px;backdrop-filter:none;} #shows-list .show-card:active{border-color:rgba(124,109,242,0.4);} #shows-list .show-card.show-card-active{border-color:rgba(124,109,242,0.45);border-left:3px solid #7c6df2;background:linear-gradient(150deg,rgba(124,109,242,0.22),rgba(124,109,242,0.06) 55%,#121219);} /* Active-show hero stats: earnings leads, cash/sold support */ #shows-list .show-hero-stats{display:flex;align-items:center;gap:14px;margin-top:12px;padding-top:12px;border-top:1px solid rgba(124,109,242,0.22);} #shows-list .show-hero-earn{flex:1;min-width:0;} #shows-list .show-hero-earn-val{font-family:'Clash Display',sans-serif;font-size:34px;font-weight:700;letter-spacing:-1px;line-height:1;} #shows-list .show-hero-earn-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-top:4px;} #shows-list .show-hero-side{display:flex;flex-shrink:0;} #shows-list .show-hero-stat{text-align:center;padding:0 14px;} #shows-list .show-hero-stat:last-child{padding-right:4px;} #shows-list .show-hero-stat + .show-hero-stat{border-left:1px solid rgba(255,255,255,0.08);} #shows-list .show-hero-stat-val{font-family:'Clash Display',sans-serif;font-size:16px;font-weight:600;color:#f0eeff;} #shows-list .show-hero-stat-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-top:2px;} #shows-list .show-card-name{font-family:'Clash Display',sans-serif;font-size:18px;font-weight:600;color:#f8f8fb;} #shows-list .show-card-date{font-family:'Satoshi',sans-serif;font-size:13px;color:#74747e;margin-top:2px;} #shows-list .show-card-venue{font-family:'Satoshi',sans-serif;font-size:13px;color:#74747e;margin-top:4px;} #shows-list .badge{font-size:11px;font-weight:600;padding:3px 10px;border-radius:999px;} #shows-list .badge-green{background:rgba(52,211,153,0.15);color:#34d399;border:1px solid rgba(52,211,153,0.30);} #shows-list .badge-gray{background:rgba(255,255,255,0.07);color:#b4b4be;border:1px solid rgba(255,255,255,0.14);} #shows-list .badge-upcoming{background:rgba(124,109,242,0.15);color:#a89cf7;border:1px solid rgba(124,109,242,0.35);} /* kit accent pill — distinguishes Upcoming from gray Completed */ #shows-list .show-card-stats{gap:0;margin-top:12px;padding:14px 8px;background:linear-gradient(135deg,rgba(124,109,242,0.20),rgba(124,109,242,0.05));border:1px solid rgba(124,109,242,0.28);border-radius:18px;} #shows-list .show-stat{text-align:center;background:none;border:none;border-radius:0;padding:2px 4px;} #shows-list .show-stat + .show-stat{border-left:1px solid rgba(255,255,255,0.06);} #shows-list .show-stat-val{font-family:'Clash Display',sans-serif;font-size:16px;font-weight:600;color:#f0eeff;} #shows-list .show-stat-label{font-size:10px;color:#74747e;text-transform:uppercase;letter-spacing:.5px;margin-top:2px;} #shows-list .shows-group-label{font-family:'Satoshi',sans-serif;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#74747e;margin-bottom:8px;} #shows-list .shows-foldout-summary{display:flex;justify-content:space-between;align-items:center;cursor:pointer;padding:10px 14px;background:#1a1a24;border:1px solid rgba(255,255,255,0.07);border-radius:12px;list-style:none;font-family:'Satoshi',sans-serif;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#74747e;} #shows-list .empty-dashed{border:1.5px dashed rgba(255,255,255,0.10);border-radius:18px;} #shows-list .empty-cta-purple{background:linear-gradient(135deg,#7c6df2,#9b5cff);color:#fff;box-shadow:0 12px 30px -10px rgba(124,109,242,0.6);} /* ═══ SHOW DETAIL ═══ */ #show-detail{display:none} .back-btn{display:flex;align-items:center;gap:8px;color:var(--blue);font-size:15px;font-weight:500;background:none;border:none;cursor:pointer;padding:4px 0;margin-bottom:12px} .txn-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--glass-border)} .txn-row:last-child{border-bottom:none} .txn-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0} .txn-desc{flex:1;min-width:0} .txn-name{font-size:14px;font-weight:500} .txn-meta{font-size:12px;color:var(--muted);margin-top:1px} .txn-amt{font-family:'Clash Display',sans-serif;font-size:16px;font-weight:600} /* ═══ PRICE TAB ═══ */ .price-result-card{background:var(--card);backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:16px;overflow:hidden;margin-bottom:12px} .price-result-header{padding:14px 16px;display:flex;gap:14px;align-items:center} .price-result-img{width:56px;height:76px;border-radius:8px;object-fit:cover;background:var(--glass)} .price-result-name{font-weight:600;font-size:15px} .price-result-set{font-size:12px;color:var(--muted);margin-top:2px} .price-market{font-family:'Clash Display',sans-serif;font-size:28px;font-weight:700;color:var(--green);margin-top:4px} .cond-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:12px 16px;border-top:1px solid var(--glass-border)} .cond-cell{background:var(--glass);border-radius:10px;padding:10px} .cond-name{font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);font-weight:600} .cond-prices{display:flex;gap:8px;margin-top:6px;align-items:baseline} .cond-mid{font-family:'Clash Display',sans-serif;font-size:18px;font-weight:700;color:var(--text)} .cond-range{font-size:11px;color:var(--muted)} /* ═══ Earnings TAB ═══ */ .pnl-hero{background:linear-gradient(135deg,rgba(52,211,153,0.15),rgba(59,130,246,0.1));border:1px solid rgba(52,211,153,0.2);border-radius:12px;padding:16px;text-align:center;margin-bottom:12px} .pnl-hero.negative{background:linear-gradient(135deg,rgba(239,68,68,0.15),rgba(239,68,68,0.05));border-color:rgba(239,68,68,0.2)} .pnl-label{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:6px} .pnl-amount{font-family:'Clash Display',sans-serif;font-size:42px;font-weight:700;color:var(--green)} .pnl-amount.negative{color:var(--red)} .pnl-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--glass-border)} .pnl-row:last-child{border-bottom:none} .pnl-row-label{font-size:14px;color:var(--muted)} .pnl-row-val{font-family:'Clash Display',sans-serif;font-size:16px;font-weight:600} .partner-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0} .partner-name{font-size:14px;font-weight:500} .partner-share{font-size:12px;color:var(--muted)} .partner-val{font-family:'Clash Display',sans-serif;font-size:17px;font-weight:600;color:var(--green)} .range-pills{display:flex;gap:6px;margin-bottom:12px} .range-pill{background:var(--glass);border:1px solid var(--glass-border);border-radius:8px;padding:6px 14px;font-size:13px;color:var(--muted);cursor:pointer} .range-pill.active{background:var(--blue-dim);border-color:rgba(59,130,246,0.4);color:var(--blue)} .export-row{display:flex;gap:6px;margin-bottom:10px} .export-row .btn-ghost{flex:1;font-size:13px;padding:10px} /* ═══ PROFILE TAB ═══ */ .profile-section{margin-bottom:14px} .profile-row{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;background:var(--card);border:1px solid var(--glass-border);border-radius:10px;margin-bottom:6px} .profile-row-label{font-size:15px} .profile-row-val{font-size:14px;color:var(--muted)} /* ── Reskin: Profile tab → component kit (scoped to #sec-profile; #profile-team-section, #profile-notif-section and member-action-sheet untouched; no backdrop-filter anywhere — WKWebView tap-eater) ── */ #sec-profile .pf-head{display:flex;flex-direction:column;align-items:center;padding:16px 0 20px;margin-bottom:6px;} #sec-profile .pf-avatar{width:64px;height:64px;border-radius:50%;background:var(--va-grad-brand);display:flex;align-items:center;justify-content:center;font-family:'Clash Display',sans-serif;font-size:24px;font-weight:600;color:#fff;letter-spacing:.02em;box-shadow:0 12px 30px -12px rgba(124,109,242,0.6);} #sec-profile .pf-cam{position:absolute;bottom:0;right:0;width:22px;height:22px;border-radius:50%;background:var(--va-accent);border:2px solid var(--va-bg);display:flex;align-items:center;justify-content:center;} #sec-profile .pf-name{font-family:'Clash Display',sans-serif;font-size:20px;font-weight:600;color:var(--va-text-strong);margin-top:12px;letter-spacing:-.01em;} #sec-profile .pf-biz{font-size:13px;color:var(--va-text-muted);margin-top:3px;} #sec-profile .pf-biz:empty{display:none;} #sec-profile .pf-email{font-size:15px;font-weight:500;color:var(--va-text);margin-top:12px;} /* email-only identity: email is now the main line (name/biz hidden) */ #sec-profile #profile-plan-badge{margin-top:10px;} #sec-profile #profile-plan-badge .badge{background:rgba(124,109,242,0.18);border:1px solid rgba(124,109,242,0.45);color:var(--va-accent-tint);font-size:11px;font-weight:600;padding:3px 12px;border-radius:999px;} #sec-profile .pf-label{font-family:'Satoshi',sans-serif;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--va-text-faint);margin:16px 2px 8px;} #sec-profile .pf-group{background:var(--va-surface);border:1px solid var(--va-border);border-radius:18px;overflow:hidden;margin-bottom:4px;} #sec-profile .pf-row{display:flex;align-items:center;gap:12px;padding:13px 14px;border-bottom:1px solid rgba(255,255,255,0.05);} #sec-profile .pf-group .pf-row:last-child{border-bottom:none;} #sec-profile .pf-row[onclick]{cursor:pointer;} #sec-profile .pf-row[onclick]:active{background:rgba(255,255,255,0.03);} #sec-profile .pf-ic{width:30px;height:30px;border-radius:9px;background:rgba(124,109,242,0.12);display:flex;align-items:center;justify-content:center;color:var(--va-accent-soft);flex-shrink:0;} #sec-profile .pf-lbl{flex:1;font-size:14px;font-weight:500;color:var(--va-text);} #sec-profile .pf-val{font-size:13px;color:var(--va-text-muted);max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} #sec-profile .pf-chev{color:var(--va-text-dim);font-size:18px;line-height:1;} #sec-profile .pf-row.danger .pf-lbl{color:var(--va-danger);} #sec-profile .pf-row.danger .pf-ic{background:rgba(242,102,124,0.10);color:var(--va-danger);} #sec-profile .pf-danger{margin-top:28px;padding-top:14px;border-top:1px solid rgba(242,102,124,0.18);} #sec-profile .pf-danger .pf-group{border-color:rgba(242,102,124,0.22);background:rgba(242,102,124,0.04);} /* ── Reskin: Edit Profile + Delete Account modals → kit chrome (scoped; overlay behavior rules at ~243 and ~571 untouched) ── */ #modal-edit-profile .modal-box,#modal-delete-account .modal-box{background:var(--va-surface);border:1px solid rgba(255,255,255,0.10);} /* ── Reskin: Trade modal (screen 7) → component kit. SCOPED, and NOTHING in the JS render functions is touched — behavior is byte-identical (tonight's device test exercises trade logic). --glass-bg is undefined in the dark theme (only set in [data-theme=light]), so the modal's panels/inputs rendered transparent; scoping it here fixes every background at once (static shell + JS-rendered rows/summary). Radii on JS-rendered controls are overridden by selector (inline radius needs !important); the summary numbers get Clash Display. ── */ #modal-trade,#modal-trade-picker{--glass-bg:rgba(255,255,255,0.05);} #modal-trade #trade-summary{font-family:'Satoshi',sans-serif;line-height:1.5;} #modal-trade #trade-summary strong{font-family:'Clash Display',sans-serif;font-weight:600;color:var(--va-text-strong);} #modal-trade #trade-out-list button,#modal-trade #trade-in-list button{border-radius:8px!important;} #modal-trade #trade-in-list input,#modal-trade #trade-in-list select{border-radius:10px!important;} #modal-trade-picker #tp-inv-list label{border-radius:12px!important;} #modal-trade-picker #tp-inv-list input{border-radius:10px!important;} #modal-edit-profile .ep-title{font-family:'Clash Display',sans-serif;font-size:20px;font-weight:600;color:var(--va-text-strong);} #modal-edit-profile .ep-x{font-size:20px;line-height:1;background:none;border:none;color:var(--va-text-muted);cursor:pointer;padding:4px;} #modal-edit-profile .ep-label{display:block;font-family:'Satoshi',sans-serif;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--va-text-faint);margin-bottom:6px;} #modal-edit-profile .ep-input{width:100%;padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,0.07);background:#1a1a24;color:var(--va-text);font-size:15px;font-family:inherit;box-sizing:border-box;outline:none;} #modal-edit-profile .ep-input:focus{border-color:var(--va-accent);} #modal-edit-profile .ep-save{width:100%;padding:14px;border-radius:12px;background:var(--va-grad-brand);color:#fff;border:none;font-size:15px;font-weight:600;cursor:pointer;box-shadow:0 12px 30px -10px rgba(124,109,242,0.5);font-family:inherit;} #modal-edit-profile .ep-cancel{width:100%;margin-top:8px;padding:12px;border-radius:12px;background:transparent;color:var(--va-text-muted);border:1px solid rgba(255,255,255,0.12);font-size:15px;cursor:pointer;font-family:inherit;} #modal-delete-account .da-title{font-family:'Clash Display',sans-serif;font-size:19px;font-weight:600;color:var(--va-text-strong);margin-bottom:8px;} #modal-delete-account .da-body{font-size:13px;color:var(--va-text-muted);margin-bottom:20px;line-height:1.5;} #modal-delete-account .da-del{width:100%;padding:14px;background:var(--va-danger-solid);color:#fff;border:none;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;margin-bottom:8px;font-family:inherit;} #modal-delete-account .da-del:disabled{opacity:.35;cursor:default;} #modal-delete-account .da-input{width:100%;padding:12px;border-radius:12px;border:1px solid rgba(242,102,124,0.35);background:#1a1a24;color:var(--va-text);font-size:15px;font-family:inherit;box-sizing:border-box;outline:none;text-align:center;letter-spacing:.15em;margin-bottom:14px;} #modal-delete-account .da-input:focus{border-color:var(--va-danger);} #modal-delete-account .da-cancel{width:100%;padding:12px;background:transparent;color:var(--va-text-muted);border:1px solid rgba(255,255,255,0.12);border-radius:12px;font-size:15px;cursor:pointer;font-family:inherit;} /* ═══ MODALS ═══ */ .modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;background:rgba(0,0,0,0.7);z-index:200;display:none;align-items:flex-end} .modal-overlay.active{display:flex} #modal-edit-profile{align-items:center;justify-content:center}#modal-delete-account{align-items:center;justify-content:center}#modal-member-edit{align-items:center;justify-content:center}#modal-trade-detail{align-items:center;justify-content:center}#modal-edit-txn{align-items:center;justify-content:center}#modal-undo-confirm{align-items:center;justify-content:center}#modal-del-txn-confirm{align-items:center;justify-content:center}#modal-expense{align-items:center;justify-content:center}#modal-del-expense-confirm{align-items:center;justify-content:center}.modal-box{background:var(--bg2);border-radius:16px;padding:24px;width:min(420px,92vw);max-height:85vh;overflow-y:auto;border:1px solid var(--glass-border);box-shadow:0 20px 60px rgba(0,0,0,0.6)} /* Add/Edit Expense: the Date field overflowed its container and the sheet scrolled sideways on device (David, 2026-07-16). Same root cause already fixed for #modal-add-show's date/time inputs: iOS WebKit gives input[type=date] an intrinsic min-content width that ignores width:100%, so it pushes the sheet wider than the viewport. appearance:none removes that native floor; min-height keeps the tap target. overflow-x:hidden on the box is the belt to that braces — nothing in this sheet should ever scroll sideways. */ /* Ledger row sublabel TOKENS — payment method, "trade", "expense" (#5). These rendered lowercase while the category in the SAME line rendered Title Case ("Supplies · expense", "cash", "trade") — one row type, two typographies (David, device 2026-07-16). Kit treatment: Title Case, matching the categories already there and the row's own sentence-case description above it. Scoped to a span around the token ONLY — never the whole sublabel — because that line also carries the seller's name, and capitalising a real person is a bug ("mcdonald" -> "Mcdonald"). Data is untouched; this is presentation only. */ .tx-tag{text-transform:capitalize} #modal-expense .modal-box{overflow-x:hidden} #modal-expense input[type=date]{-webkit-appearance:none;appearance:none;display:block;min-width:0;max-width:100%;width:100%;min-height:44px;box-sizing:border-box;text-align:left} .modal{background:var(--bg2);border-radius:24px 24px 0 0;padding:20px;padding-bottom:calc(20px + var(--safe-bottom));width:100%;max-height:90vh;overflow-y:auto;animation:slideUp .3s ease} #modal-edit-card .modal{touch-action:pan-y;overscroll-behavior:none} @media(min-width:601px){.modal-overlay.active{align-items:center}.modal{max-width:520px;border-radius:16px;margin:0 auto}} @keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}} .modal-handle{width:36px;height:4px;background:var(--muted2);border-radius:2px;margin:0 auto 16px} .modal-title{font-family:'Clash Display',sans-serif;font-size:20px;font-weight:600;margin-bottom:16px} .form-group{margin-bottom:14px} .form-label{font-size:12px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);margin-bottom:6px;display:block} .form-input{width:100%;background:var(--glass);border:1px solid var(--glass-border);border-radius:10px;padding:11px 14px;color:var(--text);font-size:15px;font-family:'Satoshi',sans-serif;outline:none;transition:border-color .2s} .form-input:focus{border-color:rgba(59,130,246,0.5)} .form-input::placeholder{color:var(--muted)} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px} .form-select{width:100%;background-color:var(--glass);border:1px solid var(--glass-border);border-radius:10px;padding:11px 38px 11px 14px;color:var(--text);font-size:15px;font-family:'Satoshi',sans-serif;outline:none;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2374747e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px} .form-select option{background:var(--bg2)} /* ── Reskin step 2: Add Card modal chrome + fields (ALL scoped to #modal-add-card; shared classes untouched) ── */ #modal-add-card .modal{background:#121219;border-top:1px solid rgba(255,255,255,0.10);border-radius:24px 24px 0 0;touch-action:pan-y;overscroll-behavior:none;} #modal-add-card .modal-handle{width:40px;height:4px;} #modal-add-card .ac-kicker{font-family:'Satoshi',sans-serif;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#9b5cff;margin-bottom:5px;} #modal-add-card .ac-mode-seg{display:flex;gap:0;background:#15151d;border:1px solid rgba(255,255,255,0.10);border-radius:12px;padding:3px;margin-bottom:14px;} #modal-add-card .ac-mode-btn{flex:1;background:transparent;border:none;color:#9b99b0;font-family:'Satoshi',sans-serif;font-size:13px;font-weight:600;padding:9px 8px;border-radius:9px;cursor:pointer;transition:background .14s,color .14s;} #modal-add-card .ac-mode-btn.on{background:linear-gradient(135deg,#7c6df2,#9b5cff);color:#fff;} #modal-add-card .modal-title{font-family:'Clash Display',sans-serif;font-size:22px;color:#f8f8fb;margin-bottom:16px;} #modal-add-card .form-label{font-family:'Satoshi',sans-serif;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#74747e;} #modal-add-card .form-input,#modal-add-card .form-select{background-color:#1a1a24;border:1px solid rgba(255,255,255,0.07);border-radius:12px;} #modal-add-card .form-input:focus,#modal-add-card .form-select:focus{border-color:#7c6df2;} #modal-add-card #c-lookup{background-color:#1b1830;border:1px solid rgba(124,109,242,0.45);background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:14px 50%;padding-left:40px;} #modal-add-card #c-lookup:focus{border-color:#7c6df2;} #modal-add-card .ac-divider{display:flex;align-items:center;gap:10px;margin:2px 0 14px;font-family:'Satoshi',sans-serif;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#5a5a64;} #modal-add-card .ac-divider::before,#modal-add-card .ac-divider::after{content:'';flex:1;height:1px;background:rgba(255,255,255,0.07);} #modal-add-card #c-cost,#modal-add-card #c-market,#modal-add-card #c-ask{font-family:'Clash Display',sans-serif;font-weight:600;letter-spacing:-.01em;} #modal-add-card .btn-primary:not(#save-all-btn){background:transparent;border:1px solid rgba(255,255,255,0.12);color:#c9c8d4;box-shadow:none;} #modal-add-card .btn-primary:not(#save-all-btn):active{background:rgba(255,255,255,0.04);} #modal-add-card #c-qty{background:#1a1a24;border:1px solid rgba(255,255,255,0.07);border-radius:12px;font-family:'Clash Display',sans-serif;font-weight:600;} #modal-add-card button[onclick^="adjBuyQty"]{background:#1a1a24!important;border:1px solid rgba(255,255,255,0.07)!important;border-radius:12px!important;color:#f0eeff!important;width:38px!important;height:38px!important;} /* ── Reskin step 3: condition chips (select kept as hidden value-holder) ── */ #modal-add-card #c-condition{display:none;} #modal-add-card .ac-cond-chips,#modal-edit-card .ac-cond-chips{display:flex;gap:7px;} #modal-add-card .ac-cond-chip,#modal-edit-card .ac-cond-chip{flex:1;min-height:40px;padding:0 4px;background:#1a1a24;border:1px solid rgba(255,255,255,0.10);border-radius:12px;color:#c9c8d4;font-family:'Satoshi',sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:background .14s,border-color .14s,color .14s,box-shadow .14s;} #modal-add-card .ac-cond-chip:active,#modal-edit-card .ac-cond-chip:active{transform:scale(.97);} #modal-add-card .ac-cond-chip.on,#modal-edit-card .ac-cond-chip.on{background:linear-gradient(135deg,#7c6df2,#9b5cff);border-color:transparent;color:#fff;box-shadow:0 8px 20px -8px rgba(124,109,242,0.7);} /* ── Grade combo: pick-or-type dropdown for graded cards ── */ .gr-combo{position:relative;} .gr-combo .form-input{padding-right:42px;} .gr-chev{position:absolute;right:4px;top:0;height:100%;width:38px;background:none;border:none;color:#74747e;cursor:pointer;display:flex;align-items:center;justify-content:center;} .gr-list{position:absolute;top:calc(100% + 4px);left:0;right:0;max-height:190px;overflow-y:auto;background:#1a1a24;border:1px solid rgba(255,255,255,0.10);border-radius:12px;z-index:60;box-shadow:0 14px 34px rgba(0,0,0,0.55);} .gr-item{padding:11px 14px;font-size:14px;color:#c9c8d4;cursor:pointer;border-bottom:1px solid rgba(255,255,255,0.05);} .gr-item:last-child{border-bottom:none;} .gr-item:active{background:rgba(124,109,242,0.15);} .gr-empty{padding:11px 14px;font-size:12px;color:#74747e;} /* ── Reskin step 4: cost %-of-market chips (drive-only; #c-pct kept as hidden engine) ── */ #modal-add-card #c-pct-group{display:none;} #modal-add-card #c-market-row{grid-template-columns:1fr;} #modal-add-card .ac-cost-chips{display:flex;gap:7px;} #modal-add-card .ac-cost-chip{flex:1;min-height:38px;padding:0 4px;background:#1a1a24;border:1px solid rgba(255,255,255,0.10);border-radius:12px;color:#c9c8d4;font-family:'Satoshi',sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:background .14s,border-color .14s,color .14s,box-shadow .14s;} #modal-add-card .ac-cost-chip:active{transform:scale(.97);} #modal-add-card .ac-cost-chip.on{background:linear-gradient(135deg,#7c6df2,#9b5cff);border-color:transparent;color:#fff;box-shadow:0 8px 20px -8px rgba(124,109,242,0.7);} #modal-add-card #c-cost-custom-wrap{margin-top:7px;} #modal-add-card .ac-cost-readout{margin-top:6px;font-family:'Satoshi',sans-serif;font-size:11px;color:#74747e;min-height:13px;} /* ── Reskin: catalog search results + recent chips (scoped to #modal-add-card) ── */ #modal-add-card .ac-sr-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:4px 0;} #modal-add-card .ac-sr-card{cursor:pointer;padding:8px;border-radius:12px;background:#1a1a24;border:1px solid rgba(255,255,255,0.10);transition:background .14s,border-color .14s;} #modal-add-card .ac-sr-card:active{background:#22222e;border-color:rgba(124,109,242,0.5);} #modal-add-card .ac-sr-thumb{width:100%;aspect-ratio:2.5/3.5;object-fit:contain;border-radius:6px;margin-bottom:6px;display:block;} #modal-add-card .ac-sr-thumb-ph{width:100%;aspect-ratio:2.5/3.5;background:var(--glass-border);border-radius:6px;margin-bottom:6px;} #modal-add-card .ac-sr-name{font-family:'Satoshi',sans-serif;font-size:12px;font-weight:600;color:#f0eeff;line-height:1.3;} #modal-add-card .ac-sr-set{font-size:10px;color:#74747e;margin-top:2px;} #modal-add-card .ac-sr-lang{background:rgba(255,255,255,.09);padding:1px 6px;border-radius:99px;font-size:9px;font-weight:600;} #modal-add-card .ac-sr-price{font-family:'Clash Display',sans-serif;font-size:12px;font-weight:600;color:#9b8cff;margin-top:3px;} #modal-add-card .ac-sr-empty{color:var(--muted);font-size:12px;padding:4px;} #modal-add-card .ac-sr-grid-scroll{max-height:46vh;overflow-y:auto;overflow-x:hidden;touch-action:pan-y;overscroll-behavior:contain;} #modal-add-card .ac-sr-more{display:block;width:100%;margin-top:8px;padding:9px;border-radius:12px;background:#1a1a24;border:1px solid rgba(124,109,242,0.35);color:#9b8cff;font-family:'Satoshi',sans-serif;font-size:12px;font-weight:600;cursor:pointer;} #modal-add-card .ac-sr-more:active{background:#22222e;} #modal-add-card .ac-recent-label{font-family:'Satoshi',sans-serif;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#74747e;margin:2px 0 6px;} #modal-add-card .ac-recent-row{display:flex;gap:6px;flex-wrap:wrap;} #modal-add-card .ac-recent-chip{background:#15151d;border:1px solid rgba(255,255,255,0.10);color:#c9c8d4;font-family:'Satoshi',sans-serif;font-size:11px;padding:5px 11px;border-radius:99px;cursor:pointer;} #modal-add-card .ac-recent-chip:active{background:#1f1f2b;} /* ── Reskin: Add Card one-screen layout + interactive queue footer ── */ #modal-add-card .ac-hdr{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:14px;} #modal-add-card .ac-close{width:32px;height:32px;flex-shrink:0;border-radius:9px;border:1px solid rgba(255,255,255,0.10);background:#1a1a24;color:#c9c8d4;font-size:18px;line-height:1;cursor:pointer;} #modal-add-card .ac-picked{display:flex;align-items:center;gap:11px;padding:9px 11px;background:#1a1a24;border:1px solid rgba(124,109,242,0.40);border-radius:14px;margin-bottom:12px;cursor:pointer;} #modal-add-card .ac-picked-thumb{width:38px;height:53px;flex-shrink:0;border-radius:6px;background:var(--glass-border);overflow:hidden;display:flex;align-items:center;justify-content:center;} #modal-add-card .ac-picked-thumb img{width:100%;height:100%;object-fit:cover;} #modal-add-card .ac-picked-info{flex:1;min-width:0;} #modal-add-card .ac-picked-name{font-family:'Satoshi',sans-serif;font-size:14px;font-weight:600;color:#f0eeff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} #modal-add-card .ac-picked-sub{font-size:11px;color:#74747e;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} #modal-add-card .ac-picked-mkt{font-family:'Clash Display',sans-serif;font-size:15px;font-weight:600;color:#9b8cff;flex-shrink:0;} #modal-add-card .ac-picked-edit{background:none;border:none;color:#9b8cff;font-size:15px;cursor:pointer;flex-shrink:0;padding:0 2px;} #modal-add-card .ac-manual-toggle,#modal-add-card .ac-more-toggle{display:block;width:100%;text-align:left;background:none;border:none;color:#9b8cff;font-family:'Satoshi',sans-serif;font-size:12px;font-weight:600;cursor:pointer;padding:4px 0;margin-bottom:6px;} #modal-add-card .ac-footer{display:flex;align-items:center;gap:10px;margin-top:10px;} #modal-add-card .ac-footer .btn-primary{margin-top:0;height:48px;padding:0 18px;flex:1;} #modal-add-card .ac-queue-count{flex-shrink:0;height:48px;padding:0 16px;border-radius:12px;background:#1a1a24;border:1px solid rgba(255,255,255,0.10);color:#c9c8d4;font-family:'Satoshi',sans-serif;font-size:13px;font-weight:600;cursor:pointer;} #modal-add-card #add-queue-list{margin-top:10px;background:#15151d;border:1px solid rgba(255,255,255,0.10);border-radius:14px;padding:8px;max-height:240px;overflow-y:auto;overflow-x:hidden;touch-action:pan-y;overscroll-behavior:contain;} #modal-add-card .buy-pct-chip{flex:0 0 auto;padding:8px 14px;border-radius:10px;background:#1a1a24;border:1px solid rgba(255,255,255,0.12);color:#c9c8d4;font-family:'Satoshi',sans-serif;font-size:14px;font-weight:600;cursor:pointer;} #modal-add-card .buy-pct-chip.on{background:rgba(124,109,242,0.88);border-color:#7c6df2;color:#fff;} #modal-add-card .ac-q-row{display:flex;align-items:center;gap:10px;padding:7px 8px;background:#1a1a24;border:1px solid rgba(255,255,255,0.06);border-radius:10px;margin-bottom:6px;cursor:pointer;} #modal-add-card .ac-q-row.editing{border-color:rgba(124,109,242,0.6);background:#221f3a;} #modal-add-card .ac-q-row:last-child{margin-bottom:0;} #modal-add-card .ac-q-thumb{width:30px;height:42px;flex-shrink:0;border-radius:5px;background:var(--glass-border);overflow:hidden;display:flex;align-items:center;justify-content:center;} #modal-add-card .ac-q-thumb img{width:100%;height:100%;object-fit:cover;} #modal-add-card .ac-q-info{flex:1;min-width:0;} #modal-add-card .ac-q-name{font-family:'Satoshi',sans-serif;font-size:13px;font-weight:600;color:#f0eeff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} #modal-add-card .ac-q-meta{font-size:11px;color:#74747e;margin-top:1px;} #modal-add-card .ac-q-del{background:none;border:none;color:#74747e;font-size:18px;cursor:pointer;flex-shrink:0;padding:0 4px;} #modal-add-card .ac-q-edit{background:none;border:none;color:#74747e;font-size:14px;cursor:pointer;flex-shrink:0;padding:0 4px;} #modal-add-card .ac-q-head{display:flex;align-items:center;justify-content:space-between;padding:2px 6px 8px;} #modal-add-card .ac-q-head span{font-family:'Satoshi',sans-serif;font-size:11px;text-transform:uppercase;letter-spacing:0.05em;color:#74747e;font-weight:600;} #modal-add-card .ac-q-clear{background:#1a1a24;border:1px solid rgba(255,255,255,0.10);border-radius:8px;color:#c9c8d4;font-size:12px;font-weight:600;padding:5px 10px;cursor:pointer;} #modal-add-card .ac-q-clear.armed{border-color:rgba(248,113,113,0.5);color:#f87171;} /* ── Reskin (Build #4): Add-Card sheet → AddCard mockup look, visual-only, scoped to #modal-add-card. All #c- ids/handlers untouched; queueAddCard's live path is unaffected. --glass-bg is undefined in the dark theme (only [data-theme=light] sets it), so the qty +/- buttons rendered transparent — scope it here so they read as kit raised surfaces (same fix as #modal-trade). Notes/date are made always-visible via display:block!important, which beats syncAddCardSections()'s inline display:none — zero JS touched. */ #modal-add-card{--glass-bg:#1a1a24;} #modal-add-card .modal-title{font-size:25px;} #modal-add-card .ac-close{width:34px;height:34px;border-radius:50%;} /* Catalog search → accent-tinted bar with a leading magnifier, per mockup */ #modal-add-card .ac-search-wrap{position:relative;} #modal-add-card .ac-search-wrap #c-lookup{background-color:#1b1830;border-color:rgba(124,109,242,0.45);padding-left:42px;} #modal-add-card .ac-search-ico{position:absolute;left:14px;top:13px;color:#c4bdf5;pointer-events:none;display:flex;} /* "or enter manually" toggle styled as a centered divider (kept tappable in accent) */ #modal-add-card .ac-manual-toggle{text-align:center;display:flex;align-items:center;gap:10px;justify-content:center;} #modal-add-card .ac-manual-toggle::before,#modal-add-card .ac-manual-toggle::after{content:'';flex:1;height:1px;background:rgba(255,255,255,0.07);} /* Money/number fields in Clash, like the kit's numeric treatment */ #modal-add-card input[type=number]{font-family:'Clash Display',sans-serif;font-weight:600;} /* Qty stepper buttons pick up the now-defined raised surface + kit radius */ #modal-add-card .ac-qty-step{border-radius:12px!important;} /* Add-to-queue = tinted secondary; Save-all keeps the gradient primary (mockup hierarchy) */ #modal-add-card #c-queue-add-btn{background:rgba(124,109,242,0.13);border:1px solid rgba(124,109,242,0.40);color:#c4bdf5;box-shadow:none;} #modal-add-card #save-all-btn{font-family:'Clash Display',sans-serif;box-shadow:0 14px 32px -10px rgba(124,109,242,0.6);} /* Notes + Date: always visible (drop the collapse). !important beats the JS inline display:none. */ #modal-add-card #c-more{display:block!important;} #modal-add-card #c-more-toggle{display:none!important;} #modal-add-card #c-notes{resize:none;min-height:52px;line-height:1.45;} /* Cancel button (ghost), per mockup */ #modal-add-card .ac-cancel{width:100%;padding:13px;margin-top:10px;border-radius:14px;border:1px solid rgba(255,255,255,0.10);background:transparent;color:#9a9aa5;font-family:'Satoshi',sans-serif;font-size:14.5px;font-weight:700;cursor:pointer;} #modal-add-card .ac-cancel:active{background:rgba(255,255,255,0.03);} /* ── Reskin: Create-Show modal → component kit (scoped to #modal-add-show) ── */ #modal-add-show .modal{background:#121219;border-top:1px solid rgba(255,255,255,0.10);border-radius:24px 24px 0 0;} #modal-add-show .modal-handle{width:40px;height:4px;} #modal-add-show .ac-hdr{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:14px;} #modal-add-show .ac-kicker{font-family:'Satoshi',sans-serif;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#9b5cff;margin-bottom:5px;} #modal-add-show .modal-title{font-family:'Clash Display',sans-serif;font-size:22px;color:#f8f8fb;margin-bottom:0;} #modal-add-show .ac-close{width:32px;height:32px;flex-shrink:0;border-radius:9px;border:1px solid rgba(255,255,255,0.10);background:#1a1a24;color:#c9c8d4;font-size:18px;line-height:1;cursor:pointer;} #modal-checklist .ac-close{width:32px;height:32px;flex-shrink:0;border-radius:9px;border:1px solid rgba(255,255,255,0.10);background:#1a1a24;color:#c9c8d4;font-size:18px;line-height:1;cursor:pointer;} #modal-add-show .form-label{font-family:'Satoshi',sans-serif;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#74747e;} #modal-add-show .form-input,#modal-add-show .form-select{background-color:#1a1a24;border:1px solid rgba(255,255,255,0.07);border-radius:12px;} #modal-add-show .form-input:focus,#modal-add-show .form-select:focus{border-color:#7c6df2;} #modal-add-show .ac-cur{position:relative;} #modal-add-show .ac-cur-sym{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#74747e;font-family:'Clash Display',sans-serif;font-size:15px;pointer-events:none;} /* Any .ac-cur input must clear the absolutely-positioned $ at left:14px, or the first typed digit lands under it. #s-table-cost (added later, C5) reused the .ac-cur wrapper but not this rule — David, device 2026-07-16. Keyed off the wrapper now so the next currency field inherits it instead of repeating the bug. */ #modal-add-show .ac-cur .form-input{padding-left:28px;font-family:'Clash Display',sans-serif;font-weight:600;} #modal-add-show #s-status{display:none;} #modal-add-show .ac-status-chips{display:flex;gap:7px;} #modal-add-show .ac-status-chip{flex:1;min-height:40px;background:#1a1a24;border:1px solid rgba(255,255,255,0.10);border-radius:12px;color:#c9c8d4;font-family:'Satoshi',sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:background .14s,border-color .14s,color .14s,box-shadow .14s;} #modal-add-show .ac-status-chip:active{transform:scale(.97);} #modal-add-show .ac-status-chip.on{background:linear-gradient(135deg,#7c6df2,#9b5cff);border-color:transparent;color:#fff;box-shadow:0 8px 20px -8px rgba(124,109,242,0.7);} #modal-add-show #venue-suggestions{display:none;background:#15151d;border:1px solid rgba(255,255,255,0.10);border-radius:12px;margin-top:4px;max-height:180px;overflow-y:auto;position:relative;z-index:999;} #modal-add-show .ac-venue-row{padding:10px 14px;cursor:pointer;font-family:'Satoshi',sans-serif;font-size:14px;color:#f0eeff;border-bottom:1px solid rgba(255,255,255,0.06);} #modal-add-show .ac-venue-row:last-child{border-bottom:none;} #modal-add-show .ac-venue-row:active{background:#1f1f2b;} #modal-add-show .ac-tpl-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;} #modal-add-show .ac-tpl-save{background:none;border:none;color:#9b8cff;font-family:'Satoshi',sans-serif;font-size:12px;font-weight:600;cursor:pointer;padding:0;} #modal-add-show .ac-tpl-save:active{opacity:.7;} #modal-add-show .ac-actions{display:flex;gap:10px;margin-top:8px;} #modal-add-show .ac-actions .btn{height:48px;padding:0 18px;margin-top:0;width:auto;display:flex;align-items:center;justify-content:center;} #modal-add-show .ac-actions .btn-primary{flex:1;} #modal-add-show .ac-actions .btn-ghost{flex:0 0 auto;} /* "Add Cards Coming In" sheet: its paired actions ("Add card" / "Done") rendered at different sizes (David, device 2026-07-16). .btn-primary gave the add button padding:14px 20px + height:auto (~47px, 15px text) while .btn-ghost fell through to .btn's height:30px + 13px text — so the pair disagreed on height AND type size. Equalised on the same 48px geometry every other paired modal action uses (the .ac-actions .btn rules around this one); colour alone separates them now. */ #modal-trade-picker #tp-add-btn,#modal-trade-picker #tp-close-btn{display:flex;align-items:center;justify-content:center;width:100%;height:48px;padding:0 18px;font-size:15px;font-weight:600;border-radius:12px;box-sizing:border-box;} #modal-quick-sell .ac-actions{display:flex;gap:10px;margin-top:8px;} #modal-quick-sell .ac-actions .btn{height:48px;padding:0 18px;margin-top:0;width:auto;display:flex;align-items:center;justify-content:center;} #modal-quick-sell .ac-actions .btn-primary{flex:1;} #modal-quick-sell .ac-actions .btn-ghost{flex:0 0 auto;} #modal-trade .ac-actions{display:flex;gap:10px;margin-top:8px;} #modal-trade .ac-actions .btn{height:48px;padding:0 18px;margin-top:0;width:auto;display:flex;align-items:center;justify-content:center;} #modal-trade .ac-actions .btn-primary{flex:1;} #modal-trade .ac-actions .btn-ghost{flex:0 0 auto;} /* Restructure: grouped sections + paired rows (no overflow on Date/Cash) */ #modal-add-show .form-group{margin-bottom:11px;} #modal-add-show .ac-section{font-family:'Satoshi',sans-serif;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#9b5cff;margin:14px 0 8px;} #modal-add-show .ac-prow{display:flex;gap:10px;margin-bottom:11px;} #modal-add-show .ac-prow>.form-group{min-width:0;margin-bottom:0;} #modal-add-show .ac-prow .form-input{min-width:0;width:100%;box-sizing:border-box;} /* iOS WebKit gives date/time inputs an intrinsic min-content width that ignores flex shrinking — Date slid under Cash, End time overflowed the viewport. appearance:none removes the native floor so min-width:0/width:100% apply; min-height keeps the empty-input tap target. */ #modal-add-show .ac-prow input[type=date],#modal-add-show .ac-prow input[type=time]{-webkit-appearance:none;appearance:none;display:block;min-width:0;max-width:100%;min-height:44px;text-align:left;} #modal-add-show .ac-prow input::-webkit-date-and-time-value{text-align:left;} /* ── Reskin B4 #2: Edit Card modal → component kit (scoped to #modal-edit-card; shared classes untouched) ── */ #modal-edit-card .modal{background:#121219;border-top:1px solid rgba(255,255,255,0.10);border-radius:24px 24px 0 0;} #modal-edit-card .modal-handle{width:40px;height:4px;} #modal-edit-card .modal-title{font-family:'Clash Display',sans-serif;font-size:22px;color:#f8f8fb;} #modal-edit-card .form-label{font-family:'Satoshi',sans-serif;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#74747e;} #modal-edit-card .form-input,#modal-edit-card .form-select{background-color:#1a1a24;border:1px solid rgba(255,255,255,0.07);border-radius:12px;} #modal-edit-card .form-input:focus,#modal-edit-card .form-select:focus{border-color:#7c6df2;} #modal-edit-card #ec-cost,#modal-edit-card #ec-ask,#modal-edit-card #ec-market{font-family:'Clash Display',sans-serif;font-weight:600;letter-spacing:-.01em;} #modal-edit-card .btn-primary{height:48px;border-radius:12px;} #modal-edit-card .btn-ghost{background:#1a1a24;border:1px solid rgba(255,255,255,0.10);color:#c9c8d4;border-radius:12px;height:44px;} #modal-edit-card #ec-delta-section{background:#15151d!important;border:1px solid rgba(255,255,255,0.10)!important;border-radius:14px!important;} /* ── Reskin B4 #2: Confirm-variant picker → component kit. Its results reuse the ac-sr and ac-cond-chip classes whose styles were scoped to #modal-add-card only, so mirror them here. (NEVER write a literal star-slash inside a CSS comment — a glob like "ac-sr-star-slash" terminated this comment early and silently killed the next rule.) ── */ /* The picker can be launched over ANY layer — inventory list (base), card details (z1400), or async after another sheet opened (edit card, z200). It must always land on top of all app chrome, below only toasts (9999); cvConfirm re-renders the open detail view, so floating above everything is safe. */ #modal-confirm-variant.modal-overlay{z-index:2000;} /* no-match / error empty state inside the picker (kit type, actionable copy) */ #modal-confirm-variant .cv-empty{text-align:center;padding:22px 14px;} #modal-confirm-variant .cv-empty-t{font-size:14px;font-weight:700;color:#f0eeff;margin-bottom:6px;} #modal-confirm-variant .cv-empty-s{font-size:12px;color:#9a9aa5;line-height:1.55;} #modal-confirm-variant .modal{background:#121219;border-top:1px solid rgba(255,255,255,0.10);border-radius:24px 24px 0 0;} #modal-confirm-variant .modal-handle{width:40px;height:4px;} #modal-confirm-variant .modal-title{font-family:'Clash Display',sans-serif;font-size:22px;color:#f8f8fb;margin-bottom:8px;} #modal-confirm-variant .form-input{background:#1a1a24;border:1px solid rgba(255,255,255,0.07);border-radius:12px;} #modal-confirm-variant .form-input:focus{border-color:#7c6df2;} #modal-confirm-variant .ac-sr-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:4px 0;} #modal-confirm-variant .ac-sr-card{cursor:pointer;padding:8px;border-radius:12px;background:#1a1a24;border:1px solid rgba(255,255,255,0.10);transition:background .14s,border-color .14s;} #modal-confirm-variant .ac-sr-card:active{background:#22222e;border-color:rgba(124,109,242,0.5);} #modal-confirm-variant .ac-sr-thumb{width:100%;aspect-ratio:2.5/3.5;object-fit:contain;border-radius:6px;margin-bottom:6px;display:block;} #modal-confirm-variant .ac-sr-thumb-ph{width:100%;aspect-ratio:2.5/3.5;background:var(--glass-border);border-radius:6px;margin-bottom:6px;} #modal-confirm-variant .ac-sr-name{font-family:'Satoshi',sans-serif;font-size:12px;font-weight:600;color:#f0eeff;line-height:1.3;} #modal-confirm-variant .ac-sr-set{font-size:10px;color:#74747e;margin-top:2px;} #modal-confirm-variant .ac-sr-lang{background:rgba(255,255,255,.09);padding:1px 6px;border-radius:99px;font-size:9px;font-weight:600;} #modal-confirm-variant .ac-sr-price{font-family:'Clash Display',sans-serif;font-size:12px;font-weight:600;color:#9b8cff;margin-top:3px;} #modal-confirm-variant .ac-cond-chip{min-height:38px;padding:0 12px;background:#1a1a24;border:1px solid rgba(255,255,255,0.10);border-radius:12px;color:#c9c8d4;font-family:'Satoshi',sans-serif;font-size:13px;font-weight:600;cursor:pointer;} #modal-confirm-variant .ac-cond-chip:active{transform:scale(.97);} #modal-confirm-variant .ac-cond-chip.on{background:linear-gradient(135deg,#7c6df2,#9b5cff);border-color:transparent;color:#fff;} #modal-confirm-variant #cv-picked{background:#1a1a24;border:1px solid rgba(124,109,242,0.40);border-radius:14px;padding:11px;margin:2px 0 10px;} #modal-confirm-variant .btn-primary{height:48px;border-radius:12px;} #modal-confirm-variant .btn-ghost{background:#1a1a24;border:1px solid rgba(255,255,255,0.10);color:#c9c8d4;border-radius:12px;height:44px;} /* ── Reskin B4 #2: Copies qty picker + bulk-delete confirm → kit surface (scoped) ── */ #modal-group-qty .modal-box,#modal-bulk-delete .modal-box{background:#121219;border:1px solid rgba(255,255,255,0.10);} /* ── Reskin B4 #3: sell flow — single-card Sell + QuickSell + no-active-show → component kit. (The multi-card #sale-sheet is already kit; its purple-gradient Complete Sale is the reference primary for sale CTAs — green stays reserved for money numbers.) ── */ #modal-sell .modal,#modal-quick-sell .modal,#modal-no-active-show .modal{background:#121219;border-top:1px solid rgba(255,255,255,0.10);border-radius:24px 24px 0 0;} #modal-sell .modal-handle,#modal-quick-sell .modal-handle,#modal-no-active-show .modal-handle{width:40px;height:4px;} #modal-sell .modal-title,#modal-quick-sell .modal-title,#modal-no-active-show .modal-title{font-family:'Clash Display',sans-serif;font-size:22px;color:#f8f8fb;} #modal-sell .form-label{font-family:'Satoshi',sans-serif;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#74747e;} #modal-sell .form-input,#modal-sell .form-select,#modal-quick-sell .form-input{background-color:#1a1a24;border:1px solid rgba(255,255,255,0.07);border-radius:12px;} #modal-sell .form-input:focus,#modal-sell .form-select:focus,#modal-quick-sell .form-input:focus{border-color:#7c6df2;} #modal-sell .sell-card-preview{background:#1a1a24;border:1px solid rgba(124,109,242,0.40);border-radius:14px;} #modal-sell #sell-price{font-family:'Clash Display',sans-serif;font-weight:600;letter-spacing:-.01em;} #modal-sell .btn-primary{height:48px;border-radius:12px;} #modal-sell .btn-ghost{background:#1a1a24;border:1px solid rgba(255,255,255,0.10);color:#c9c8d4;border-radius:12px;height:44px;} #modal-quick-sell #qs-price{font-family:'Clash Display',sans-serif;} #modal-quick-sell [id^=qs-pm-]{height:44px;border-radius:12px;font-family:'Satoshi',sans-serif;font-size:13px;font-weight:600;padding:0 6px;} #modal-quick-sell [id^=qs-pm-].btn-ghost{background:#1a1a24;border:1px solid rgba(255,255,255,0.10);color:#c9c8d4;} #modal-quick-sell [id^=qs-pm-].btn-primary{background:linear-gradient(135deg,#7c6df2,#9b5cff);border:none;color:#fff;box-shadow:none;} #modal-quick-sell .ac-actions .btn-ghost{background:#1a1a24;border:1px solid rgba(255,255,255,0.10);color:#c9c8d4;border-radius:12px;} #modal-quick-sell #qs-sell-btn{border-radius:12px;} /* ── Reskin: Add to Calendar sheet → component kit (scoped to #cal-modal-overlay) ── */ #cal-modal-overlay .cal-sheet{background:#121219;border-top:1px solid rgba(255,255,255,0.10);border-radius:24px 24px 0 0;padding:14px 18px calc(20px + env(safe-area-inset-bottom));width:100%;max-width:480px;} #cal-modal-overlay .cal-handle{width:40px;height:4px;border-radius:2px;background:var(--muted2);margin:0 auto 14px;} #cal-modal-overlay .cal-hdr{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px;} #cal-modal-overlay .cal-title{font-family:'Clash Display',sans-serif;font-size:20px;font-weight:600;color:#f8f8fb;} #cal-modal-overlay .cal-close{width:32px;height:32px;flex-shrink:0;border-radius:9px;border:1px solid rgba(255,255,255,0.10);background:#1a1a24;color:#c9c8d4;font-size:18px;line-height:1;cursor:pointer;} #cal-modal-overlay .cal-sub{font-family:'Satoshi',sans-serif;font-size:13px;color:#74747e;margin-bottom:16px;} #cal-modal-overlay .cal-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:52px;border-radius:12px;background:#1a1a24;font-family:'Satoshi',sans-serif;font-size:14px;font-weight:600;cursor:pointer;margin-bottom:10px;} #cal-modal-overlay .cal-btn:active{transform:scale(.99);} #cal-modal-overlay .cal-btn-google{color:#60a5fa;border:1px solid rgba(96,165,250,0.30);} #cal-modal-overlay .cal-btn-apple{color:#34d399;border:1px solid rgba(52,211,153,0.30);} #cal-modal-overlay .cal-btn-cancel{color:#c9c8d4;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.10);margin-bottom:0;} /* ── Templates Manager (sub-view; kit-styled, scoped to #templates-view) ── */ #templates-view{display:none;} #templates-view .tpl-hdr{display:flex;align-items:center;gap:10px;margin-bottom:14px;} #templates-view .tpl-back{flex-shrink:0;height:36px;padding:0 14px 0 11px;border-radius:10px;border:1px solid rgba(255,255,255,0.10);background:#1a1a24;color:#c9c8d4;font-family:'Satoshi',sans-serif;font-size:14px;font-weight:600;cursor:pointer;} #templates-view .tpl-back:active{background:#22222e;} #templates-view .tpl-title{flex:1;font-family:'Clash Display',sans-serif;font-size:22px;font-weight:600;color:#f8f8fb;} #templates-view .tpl-new{flex-shrink:0;font-size:12px;padding:8px 12px;width:auto;} #templates-view .tpl-form{background:#121219;border:1px solid rgba(255,255,255,0.07);border-radius:18px;padding:14px;margin-bottom:14px;} #templates-view .form-label{font-family:'Satoshi',sans-serif;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#74747e;} #templates-view .form-input{background:#1a1a24;border:1px solid rgba(255,255,255,0.07);border-radius:12px;} #templates-view .form-input:focus{border-color:#7c6df2;} #templates-view .tpl-card{display:flex;align-items:center;gap:12px;background:#121219;border:1px solid rgba(255,255,255,0.07);border-radius:14px;padding:12px 14px;margin-bottom:8px;cursor:pointer;} #templates-view .tpl-card:active{border-color:rgba(124,109,242,0.4);} #templates-view .tpl-card-info{flex:1;min-width:0;} #templates-view .tpl-card-name{font-family:'Clash Display',sans-serif;font-size:16px;font-weight:600;color:#f8f8fb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} #templates-view .tpl-card-sub{font-family:'Satoshi',sans-serif;font-size:12px;color:#74747e;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} #templates-view .tpl-del{flex-shrink:0;background:none;border:none;color:#74747e;font-size:18px;cursor:pointer;padding:2px 6px;} #templates-view .tpl-confirm{display:flex;align-items:center;gap:8px;flex-shrink:0;} #templates-view .tpl-confirm-q{font-family:'Satoshi',sans-serif;font-size:12px;color:#f2667c;} #templates-view .tpl-confirm-yes{background:rgba(242,102,124,0.15);border:1px solid rgba(242,102,124,0.4);color:#f2667c;border-radius:8px;font-size:12px;font-weight:600;padding:5px 10px;cursor:pointer;} #templates-view .tpl-confirm-no{background:#1a1a24;border:1px solid rgba(255,255,255,0.10);color:#c9c8d4;border-radius:8px;font-size:12px;font-weight:600;padding:5px 10px;cursor:pointer;} #templates-view .tpl-empty{text-align:center;padding:40px 20px;color:#74747e;font-family:'Satoshi',sans-serif;font-size:13px;} #templates-view .tpl-empty-title{font-family:'Clash Display',sans-serif;font-size:16px;color:#f0eeff;margin-bottom:6px;} #templates-view .tpl-form-title{font-family:'Clash Display',sans-serif;font-size:16px;font-weight:600;color:#f8f8fb;margin-bottom:10px;} #templates-view .tpl-form-actions{display:flex;gap:10px;margin-top:8px;} #templates-view .tpl-form-actions .btn{height:48px;padding:0 18px;margin-top:0;width:auto;display:flex;align-items:center;justify-content:center;} #templates-view .tpl-form-actions .btn-primary{flex:1;} #templates-view .tpl-form-actions .btn-ghost{flex:0 0 auto;} #templates-view #tpl-venue-suggestions{display:none;background:#15151d;border:1px solid rgba(255,255,255,0.10);border-radius:12px;margin-top:4px;max-height:180px;overflow-y:auto;position:relative;z-index:999;} #templates-view .ac-venue-row{padding:10px 14px;cursor:pointer;font-family:'Satoshi',sans-serif;font-size:14px;color:#f0eeff;border-bottom:1px solid rgba(255,255,255,0.06);} #templates-view .ac-venue-row:last-child{border-bottom:none;} #templates-view .ac-venue-row:active{background:#1f1f2b;} .partner-pools{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px} .pool-input-wrap{background:var(--glass);border:1px solid var(--glass-border);border-radius:10px;padding:10px;text-align:center} .pool-input-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px} .pool-input{width:100%;background:none;border:none;color:var(--text);font-size:17px;font-weight:600;font-family:'Clash Display',sans-serif;text-align:center;outline:none} /* ═══ TOAST ═══ */ .toast{position:fixed;bottom:calc(var(--nav-h) + var(--safe-bottom) + 12px);left:50%;transform:translateX(-50%) translateY(12px);background:rgba(30,30,45,0.95);backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:12px;padding:10px 18px;font-size:14px;font-weight:500;z-index:10000;opacity:0;transition:all .25s;white-space:nowrap;pointer-events:none} .toast.show{opacity:1;transform:translateX(-50%) translateY(0)} /* ═══ LANG TOGGLE ═══ */ .lang-toggle{display:flex;background:var(--glass);border:1px solid var(--glass-border);border-radius:8px;overflow:hidden;margin-bottom:14px;width:fit-content} .lang-btn{padding:7px 18px;font-size:13px;font-weight:500;cursor:pointer;background:none;border:none;color:var(--muted);transition:all .15s} .lang-btn.active{background:var(--blue-dim);color:var(--blue)} /* ═══ EMPTY STATE ═══ */ .empty-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px 20px} .empty-dashed{border:1.5px dashed rgba(255,255,255,0.08);border-radius:14px;margin-top:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:220px;padding:8px} .empty-ring{position:relative;width:68px;height:68px;margin-bottom:14px} .empty-ring-bg{position:absolute;inset:0;border-radius:50%} .empty-ring-inner{position:absolute;inset:6px;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:26px} .empty-title{font-size:15px;font-weight:700;color:var(--text);margin-bottom:5px;letter-spacing:-.2px} .empty-sub{font-size:11px;color:var(--muted);line-height:1.55;margin-bottom:16px;max-width:180px} .empty-cta{display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 16px;border-radius:10px;font-size:12px;font-weight:600;cursor:pointer;border:none;font-family:inherit} .empty-cta-solid{background:#7c6df2;color:#fff} .empty-cta-purple{background:rgba(124,109,242,0.15);color:#a89cf7;border:1px solid rgba(124,109,242,0.3)} .empty-cta-green{background:rgba(52,211,153,0.12);color:#6ee7b7;border:1px solid rgba(52,211,153,0.25)} /* ═══ SELL MODAL SPECIFIC ═══ */ .sell-card-preview{background:var(--glass);border-radius:12px;padding:12px;margin-bottom:14px;display:flex;gap:12px;align-items:center} .sell-card-name{font-weight:600;font-size:15px} .sell-card-ask{font-family:'Clash Display',sans-serif;font-size:20px;color:var(--green)} /* ═══ SWIPE DELETE ═══ */ /* ═══ HISTORY ═══ */ .history-item{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--glass-border)} .history-item:last-child{border-bottom:none} .history-name{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1} .history-price{font-family:'Clash Display',sans-serif;font-size:15px;color:var(--green);flex-shrink:0;margin-left:12px} .history-date{font-size:11px;color:var(--muted);margin-top:1px} /* ═══ LOADING ═══ */ .skeleton{background:linear-gradient(90deg,var(--glass) 25%,rgba(255,255,255,0.08) 50%,var(--glass) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:8px;height:16px;margin-bottom:8px} @keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}} .spinner{width:20px;height:20px;border:2px solid var(--glass-border);border-top-color:var(--blue);border-radius:50%;animation:spin .7s linear infinite;display:inline-block} @keyframes spin{to{transform:rotate(360deg)}} .spinning{animation:spin .8s linear infinite;transform-origin:center;transform-box:fill-box;} [data-theme="light"]{--bg:#f0f0f5;--bg2:#e8e8f0;--card:rgba(255,255,255,.95);--glass:rgba(255,255,255,.9);--glass-bg:rgba(255,255,255,.8);--glass-border:rgba(0,0,0,.1);--text:#1a1a2e;--muted:#6b7280;--muted2:#9ca3af;} /* === MOBILE RESPONSIVE === */ @media (max-width:600px){ /* retired: .inv-card{padding:10px 10px 10px 30px;gap:8px;flex-wrap:wrap;align-items:flex-start} */ /* retired: .inv-card-img,.inv-card-img-placeholder{width:52px!important;height:72px!important;flex-shrink:0!important} */ /* retired: .inv-card-info{flex:1;min-width:0;max-width:calc(100% - 68px);overflow:hidden} */ /* retired: .inv-card-name{font-size:13px!important;white-space:normal!important;overflow:visible!important;text-overflow:unset!important;line-height:1.3!important;font-weight:700!important;word-break:break-word} */ /* retired: .inv-card-set{font-size:11px;margin-top:1px;white-space:normal;word-break:break-word} */ /* retired: .inv-card-meta{gap:4px;margin-top:4px} */ /* retired: .inv-card-meta .badge{font-size:10px;padding:2px 5px} */ /* retired: .inv-card-actions{width:100%!important;flex-shrink:0!important;display:flex!important;gap:5px!important;flex-wrap:nowrap!important;justify-content:flex-end!important;margin-top:6px!important} */ /* retired: .inv-card-actions button,.inv-card-actions a{padding:5px 8px!important;font-size:11px!important;min-width:0!important} */ /* .inv-cb removed */ #inv-bulk-bar{padding:6px 10px;font-size:11px} .filters{gap:6px} .pill{font-size:11px;padding:4px 10px} #inv-bulk-bar .btn{font-size:11px;padding:4px 8px} .stat-grid{gap:6px} .page-title{font-size:20px} .app-wm{display:none} .section{padding:12px 12px calc(var(--nav-h) + var(--safe-bottom) + 88px)} .search-input{font-size:14px} /* filter row on mobile */ #inv-filter-pills{flex-wrap:wrap;gap:4px} /* sort + select row */ #inv-select-btn{font-size:11px;padding:4px 10px} /* filter pills horizontal scroll */ /* price tiles: compact flat text instead of boxed tiles */ .price-tile{background:none!important;border:none!important;border-radius:0!important;padding:0 4px 0 0!important;display:inline-flex!important;align-items:baseline!important;gap:2px!important;cursor:default!important} .price-tile span:first-child{font-size:9px!important;color:var(--muted)!important} .price-tile span:last-child{font-size:11px!important;font-weight:700!important} /* price row: tighter, horizontal scroll */ /* retired: .inv-card-meta>div:last-child{gap:0!important;margin-top:3px!important;flex-wrap:nowrap!important;overflow-x:auto!important;scrollbar-width:none!important} */ /* actions: compact */ /* retired: .inv-card-actions{margin-top:4px!important} */ /* qty ctrl smaller on mobile */ /* retired: .inv-card-actions>div{margin-right:4px!important} */ /* retired: .inv-card-actions>div button{width:20px!important;height:20px!important;font-size:12px!important} */ /* retired: .inv-card-actions>div span{font-size:11px!important} */ } .scan-choice-menu{display:none;position:absolute;bottom:72px;right:16px;background:var(--bg2);border:1px solid var(--glass-border);border-radius:12px;overflow:hidden;min-width:160px;box-shadow:0 8px 24px rgba(0,0,0,0.5);z-index:150}.scan-choice-menu.open{display:block}.scan-choice-menu button{display:flex;align-items:center;gap:10px;width:100%;background:none;border:none;color:var(--text);padding:12px 16px;font-size:14px;cursor:pointer;text-align:left}.scan-choice-menu button:hover{background:rgba(255,255,255,0.06)}.buy-list-item{background:var(--card);border:1px solid var(--glass-border);border-radius:12px;padding:10px 12px;margin-bottom:8px}.buy-list-item-top{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px}.buy-card-img{width:40px;height:56px;object-fit:contain;border-radius:4px;flex-shrink:0;background:var(--glass);border:1px solid var(--glass-border)}.buy-card-img-ph{width:40px;height:56px;border-radius:4px;flex-shrink:0;background:var(--glass);border:1px solid var(--glass-border)}.buy-card-info{flex:1;min-width:0}.buy-card-name{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.buy-card-meta{font-size:11px;color:var(--muted);margin-top:2px}.buy-card-mkt{font-size:11px;color:var(--blue);margin-top:4px;font-weight:500}.buy-fields{display:grid;grid-template-columns:1fr 1fr auto;gap:6px;align-items:end;border-top:1px solid var(--glass-border);padding-top:8px}.buy-field label{font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);display:block;margin-bottom:3px}.buy-field input{width:100%;background:var(--glass);border:1px solid var(--glass-border);border-radius:7px;padding:5px 8px;color:var(--text);font-size:13px;font-weight:600;text-align:center;box-sizing:border-box}.buy-pay{font-size:13px;font-weight:600;color:var(--green);text-align:right;padding-bottom:2px}.buy-summary{background:var(--glass);border:1px solid var(--glass-border);border-radius:12px;padding:12px 14px;margin-bottom:12px}.buy-summary-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.buy-summary-row:last-child{margin-bottom:0;border-top:1px solid var(--glass-border);padding-top:8px;margin-top:4px}.buy-search-results{max-height:200px;overflow-y:auto;margin-bottom:8px}.buy-result-item{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;cursor:pointer;border:1px solid var(--glass-border);margin-bottom:4px;background:var(--glass)}.buy-result-item:hover{background:var(--glass-bg);border-color:var(--blue)} /* ═══ AUTH SCREEN ═══ */ #auth-screen{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:24px} #auth-screen::before{content:'';position:fixed;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse 80% 50% at 20% -10%,rgba(59,130,246,0.12) 0%,transparent 60%),radial-gradient(ellipse 60% 40% at 80% 110%,rgba(139,92,246,0.1) 0%,transparent 60%);pointer-events:none} .auth-box{width:100%;max-width:360px;position:relative;z-index:1} .auth-logo{text-align:center;margin-bottom:32px} .auth-logo-title{font-family:'Clash Display',sans-serif;font-size:32px;font-weight:700} .auth-logo-sub{font-size:13px;color:var(--muted);margin-top:4px;letter-spacing:.5px} .auth-card{background:var(--va-surface);border:1px solid var(--va-border);border-radius:22px;padding:26px} .auth-tabs{display:flex;background:var(--glass);border-radius:10px;padding:3px;margin-bottom:20px} .auth-tab{flex:1;text-align:center;padding:8px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;color:var(--muted);transition:all .2s;border:none;background:none} .auth-tab.active{background:rgba(124,109,242,0.16);color:#f3f3f6;box-shadow:none} .auth-field{margin-bottom:14px} .auth-field label{display:block;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:6px} .auth-field input{width:100%;background:var(--glass);border:1px solid var(--glass-border);border-radius:12px;padding:12px 14px;color:var(--text);font-size:15px;font-family:'Satoshi',sans-serif;outline:none;transition:border-color .2s;-webkit-text-fill-color:var(--text);color-scheme:dark}.auth-field input:-webkit-autofill,.auth-field input:-webkit-autofill:focus,.auth-field input:-webkit-autofill:hover,.auth-field input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px #0d0d1a inset!important;-webkit-text-fill-color:#f0eeff!important;border-color:rgba(124,109,242,0.2)!important;transition:background-color 5000s ease-in-out 0s,color 5000s ease-in-out 0s} .auth-field input:focus{border-color:rgba(124,109,242,0.55)} .auth-error{color:var(--red);font-size:13px;margin-bottom:12px;min-height:18px;text-align:center} .auth-msg{color:var(--green);font-size:13px;margin-bottom:12px;min-height:18px;text-align:center} /* === OPTION B === */ /* retired: .inv-card{cursor:pointer;flex-direction:column!important;padding:0!important;gap:0!important;overflow:hidden!important;flex-wrap:nowrap!important;align-items:stretch!important} */ /* retired: .inv-card-body{display:flex!important;align-items:center!important;gap:12px!important;padding:12px!important} */ /* retired: .qty-col{display:flex!important;flex-direction:column!important;align-items:center!important;gap:3px!important;flex-shrink:0!important} */ /* retired: .qi-btn{width:26px;height:26px;border-radius:8px;border:1px solid var(--glass-border);background:var(--glass-bg);color:var(--text);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .1s} */ /* retired: .qi-btn:active{transform:scale(.88)} */ /* retired: .qi-num{font-size:14px;font-weight:600;color:var(--text);min-width:18px;text-align:center;line-height:1} */ /* === END OPTION B === */ /* === INTERACTION POLISH === */ /* 1. Button press feedback - all buttons */ .btn{transition:transform .12s ease,opacity .12s ease} .btn:active{transform:scale(.94);opacity:.82} .btn-primary:active{transform:scale(.94)} .btn-ghost:active{transform:scale(.94)} .btn-red:active{transform:scale(.94)} /* qty +/- buttons */ .qty-btn{transition:transform .1s ease,background .15s ease} .qty-btn:active{transform:scale(.88)} /* inv-card action buttons override */ .inv-card-actions button:active,.inv-card-actions a:active{transform:scale(.9)!important} /* 2. Modal overlay — fade in/out instead of snap */ .modal-overlay{transition:background .25s ease,backdrop-filter .25s ease;opacity:0;pointer-events:none} .modal-overlay.active{opacity:1;pointer-events:auto} /* 3. Modal sheet — slide up on open, slide down on close */ @keyframes slideUp{from{transform:translateY(100%);opacity:.4}to{transform:translateY(0);opacity:1}} @keyframes slideDown{from{transform:translateY(0);opacity:1}to{transform:translateY(100%);opacity:.4}} .modal{animation:slideUp .28s cubic-bezier(.34,1.2,.64,1)} .modal.closing{animation:slideDown .22s ease-in forwards} @media(max-width:600px){ .modal-overlay>.modal-box{width:100%!important;max-width:100%!important;border-radius:24px 24px 0 0!important;margin:0!important;max-height:90vh;overflow-y:auto;animation:slideUp .3s ease;padding-bottom:calc(24px + var(--safe-bottom,0px))!important} .modal-overlay>.modal-box::before{content:'';display:block;width:36px;height:4px;background:var(--muted2,rgba(255,255,255,.2));border-radius:2px;margin:0 auto 14px} #modal-edit-profile.modal-overlay,#modal-delete-account.modal-overlay,#modal-member-edit.modal-overlay,#modal-trade-detail.modal-overlay,#modal-edit-txn.modal-overlay,#modal-undo-confirm.modal-overlay,#modal-del-txn-confirm.modal-overlay,#modal-expense.modal-overlay,#modal-del-expense-confirm.modal-overlay{align-items:flex-end;justify-content:center} .modal-box.closing{animation:slideDown .22s ease-in forwards} } /* 4. Toast — slide up from below, fade out smoothly */ @keyframes toastIn{from{transform:translateX(-50%) translateY(20px);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}} @keyframes toastOut{from{transform:translateX(-50%) translateY(0);opacity:1}to{transform:translateX(-50%) translateY(16px);opacity:0}} .toast{animation:none} .toast.show{animation:toastIn .22s cubic-bezier(.34,1.2,.64,1) forwards} .toast.hiding{animation:toastOut .2s ease-in forwards} /* 5. Card row tap highlight */ .inv-card{transition:background .15s ease,border-color .15s ease} .inv-card:active{background:var(--glass-bg)!important;border-color:var(--blue)!important} /* 6. Nav tab — icon bounce on activate */ .nav-btn{transition:color .2s ease} .nav-btn svg{transition:transform .2s cubic-bezier(.34,1.4,.64,1)} .nav-btn.active svg{transform:scale(1.15)} .nav-btn:active svg{transform:scale(.88)} /* === END INTERACTION POLISH === */ .member-action-sheet{position:fixed;bottom:0;left:0;right:0;z-index:9999;background:var(--glass-bg);border-top:1px solid var(--glass-border);border-radius:20px 20px 0 0;padding:12px 0 24px;transform:translateY(100%);transition:transform .25s ease;backdrop-filter:blur(20px);pointer-events:none;} .member-action-sheet.active{transform:translateY(0);pointer-events:auto;} .member-action-sheet-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9998;background:rgba(0,0,0,0);transition:background .25s ease;pointer-events:none;} .member-action-sheet-overlay.active{background:rgba(0,0,0,0.5);pointer-events:auto;} .member-action-btn{display:block;width:100%;padding:16px 24px;background:none;border:none;text-align:left;font-size:15px;cursor:pointer;color:var(--text);border-bottom:1px solid var(--glass-border);} .member-action-btn.danger{color:#f2667c;} .member-action-btn:last-child{border-bottom:none;} .paywall-plan{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:16px;padding:20px;margin-bottom:12px;} .paywall-plan.featured{border-color:var(--accent);background:rgba(124,109,242,0.08);} .paywall-badge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:20px;background:var(--accent);color:#fff;margin-left:8px;} #invite-username-input:-webkit-autofill, #invite-username-input:-webkit-autofill:hover, #invite-username-input:-webkit-autofill:focus { } .skeleton{background:linear-gradient(90deg,rgba(255,255,255,0.04) 25%,rgba(255,255,255,0.08) 50%,rgba(255,255,255,0.04) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:8px}@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}.skeleton-card{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:12px;padding:16px;margin-bottom:10px}.skeleton-line{height:12px;margin-bottom:8px}.skeleton-line.w60{width:60%}.skeleton-line.w40{width:40%}.skeleton-line.w80{width:80%}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 24px;text-align:center;gap:12px}.empty-state-icon{font-size:48px;opacity:0.4}.empty-state-title{font-size:16px;font-weight:600;color:var(--text);opacity:0.6}.empty-state-sub{font-size:13px;color:var(--muted);line-height:1.5;max-width:220px}.empty-state-btn{margin-top:8px;padding:10px 20px;background:var(--accent);color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer}.ptr-indicator{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;justify-content:center;padding:12px;background:var(--bg);z-index:100;transform:translateY(-100%);transition:transform 0.2s;gap:8px;font-size:13px;color:var(--muted)}.ptr-indicator.visible{transform:translateY(0)}.ptr-spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,0.2);border-top-color:var(--accent);border-radius:50%;animation:spin 0.6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}} .spinning{animation:spin .8s linear infinite;transform-origin:center;display:block;}.toast.toast-error{background:#7f1d1d;border-color:#991b1b}.toast.toast-success{background:#14532d;border-color:#166534} /* Always hide ptr-indicator and auth-screen back link */ .ptr-indicator { display: none !important; } .back-btn { display: none !important; } #auth-screen > a { display: none !important; } input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;} input[type=number]{-moz-appearance:textfield;} /* ═══ COMPONENT KIT — CARD SURFACES (#10, David 2026-07-16) ═══════════════════ New kit standard: a card is a TONAL STEP, not a stroke. It reads as a card because its surface sits slightly lighter than the page behind it — no border, no purple left-accent. Existing radii are deliberately untouched. The tonal step already exists in the tokens, so nothing here sets a background: page --bg #09090e / --i2-bg #09090f card --card #121219 / --i2-card #13121f (and --glass, a subtle lighten) Removing the strokes is all that was needed to land the standard. SCOPE — card surfaces ONLY. Inputs, chips, buttons, segmented controls and image placeholders keep their borders on purpose: there the stroke IS the affordance. An input with no edge is not a card, it is an invisible field. WHY ONE BLOCK, AND WHY !important: several of these cards are built in JS with INLINE border styles (the inventory card writes its own border + left-accent per row), and inline styles beat any non-important rule. One documented kit block also means one place to read, re-tune or revert — versus ~103 hand-edits, where the risk is a typo in the 87th one. This is the standard, not a workaround; it is not the kind of one-off !important patch removed in 8eb5369. NOTE for David: the inventory card's left-accent was SEMANTIC, not decorative — green for graded, purple for raw. Removing it per spec loses that at-a-glance signal; graded cards still carry their grade badge, so the information survives. Flagged rather than silently kept. */ .card,.card-sm,.inv-card,.show-card,.show-card-menu-drop,.modal-box,.paywall-plan, .price-result-card,.profile-row,.sell-card-preview,.member-action-sheet, .inv2-row,.inv2-ptile,.inv2-hist-row,.inv2-skel-row,.pnl2-row, /* Hero/stat surfaces. These paint their tonal step with a linear-gradient rather than a --card token, so a "background:var(--...)" search does not find them — the DOM sweep did (branch_pass.py caught .pnl2-best still wearing its purple left-accent after the first pass). Same kit standard applies: they are cards. */ .inv2-hero,.pnl-hero,.sm-hero,.pnl2-best,.show-card-stats{ border:none!important; } /* .inv-card-img-placeholder is deliberately NOT in that list: it is an image frame standing in for missing art, not a card surface. Its stroke is the placeholder. */ /* Palette matched to inventory_mockup.html */ #inv2-root,#inv2-detail,#pnl-inv2{--i2-bg:#09090f;--i2-card:#13121f;--i2-border:rgba(124,109,242,0.12);--i2-border2:rgba(255,255,255,0.08);--i2-purple:#7c6df2;--i2-purple-lt:#c4bcff;--i2-green:#34d399;--i2-red:#f2667c;--i2-amber:#f59e0b;--i2-muted:#666;--i2-text:#f0eeff;} .inv2-hero{background:linear-gradient(135deg,rgba(124,109,242,0.20),rgba(124,109,242,0.05));border:1px solid rgba(124,109,242,0.28);border-radius:18px;padding:16px 16px 14px;margin-bottom:12px;} .inv2-hero-label{font-size:11px;letter-spacing:.1em;font-weight:700;color:var(--i2-purple-lt);text-transform:uppercase;} .inv2-hero-val{font-family:'Clash Display',sans-serif;font-size:34px;font-weight:600;color:var(--i2-text);margin-top:4px;letter-spacing:-.02em;line-height:1.1;} .inv2-hero-sub{font-size:13px;color:var(--i2-muted);margin-top:5px;} .inv2-hero-note{font-size:11px;color:var(--i2-muted);opacity:.85;margin-top:9px;} .inv2-hero-stats{display:flex;gap:26px;margin-top:12px;padding-top:12px;border-top:1px solid var(--i2-border2);} .inv2-hero-stats>div{display:flex;flex-direction:column;gap:2px;} /* logging-to pill relocated into the summary card top row (label left, pill right) */ .inv2-hero-top{display:flex;align-items:center;justify-content:space-between;gap:10px;} .inv2-hero-top .inv2-hero-label{white-space:nowrap;} .inv2-logpill{display:inline-flex;align-items:center;gap:6px;background:rgba(52,211,153,0.1);border:1px solid rgba(52,211,153,0.25);border-radius:99px;padding:4px 10px;font-size:11px;color:#34d399;font-weight:500;min-width:0;max-width:62%;flex-shrink:1;} .inv2-logpill .inv2-logpill-dot{width:6px;height:6px;border-radius:50%;background:#34d399;flex-shrink:0;} .inv2-logpill #inv2-logpill-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .inv2-hs-label{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--i2-muted);} .inv2-hs-val{font-family:'Clash Display',sans-serif;font-size:15px;font-weight:600;color:var(--i2-text);} /* Earnings hero internal layout (scoped to #pnl-inv2) — even kit tiers, no floating gaps */ #pnl-inv2 .inv2-hero{margin-bottom:6px;} /* tighten hero->best-show into a cohesive summary set */ #pnl-inv2 .inv2-hero-divider{height:1px;background:var(--i2-border2);margin:14px 0 12px;} #pnl-inv2 .pnl2-tier{display:grid;gap:0;} #pnl-inv2 .pnl2-tier-2{grid-template-columns:repeat(2,1fr);} #pnl-inv2 .pnl2-tier-3{grid-template-columns:repeat(3,1fr);} /* 4-up: Sold / Bought / Expenses / Transactions (#9). Expenses earns a slot in the header row rather than living only at the bottom of the page — it is one of the four numbers that explain the headline. Slightly tighter padding so four cells fit 390px without the values wrapping. */ #pnl-inv2 .pnl2-tier-4{grid-template-columns:repeat(4,1fr);} #pnl-inv2 .pnl2-tier-4 .pnl2-cell{padding:2px 9px;} #pnl-inv2 .pnl2-tier-4 .pnl2-cell-label{font-size:9px;letter-spacing:.04em;} #pnl-inv2 .pnl2-tier-4 .pnl2-cell-val{font-size:15px;} /* integrated tiles: sit directly on the hero surface, separated by hairline dividers (no boxes) */ #pnl-inv2 .pnl2-cell{display:flex;flex-direction:column;gap:3px;padding:2px 14px;} #pnl-inv2 .pnl2-tier .pnl2-cell:first-child{padding-left:0;} #pnl-inv2 .pnl2-tier .pnl2-cell + .pnl2-cell{border-left:1px solid rgba(255,255,255,0.06);} #pnl-inv2 .pnl2-cell-label{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--i2-muted);font-weight:600;} #pnl-inv2 .pnl2-cell-val{font-family:'Clash Display',sans-serif;font-size:17px;font-weight:600;color:var(--i2-text);line-height:1.1;letter-spacing:-.01em;} .inv2-toprow{display:flex;align-items:center;gap:8px;margin-bottom:10px;} .inv2-search-wrap{position:relative;flex:1;} .inv2-search{width:100%;box-sizing:border-box;background:var(--i2-card);border:1px solid var(--i2-border);border-radius:12px;padding:10px 14px 10px 38px;color:var(--i2-text);font-size:14px;font-family:inherit;outline:none;} .inv2-search::placeholder{color:var(--i2-muted);} .inv2-search-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--i2-muted);pointer-events:none;} .inv2-filterrow{display:flex;align-items:center;gap:7px;overflow-x:auto;scrollbar-width:none;padding:2px 0 10px;} .inv2-filterrow::-webkit-scrollbar{display:none;} .inv2-chips{display:flex;gap:7px;flex-shrink:0;} .inv2-chip{flex-shrink:0;padding:7px 15px;border-radius:999px;white-space:nowrap;font-size:13px;font-weight:600;cursor:pointer;border:1px solid var(--i2-border2);background:rgba(255,255,255,0.04);color:var(--i2-muted);transition:all .15s;} .inv2-chip.on{background:rgba(124,109,242,0.2);border-color:rgba(124,109,242,0.5);color:var(--i2-purple-lt);} .inv2-sortbtn{margin-left:auto;flex-shrink:0;padding:6px 12px;border-radius:20px;border:1px solid var(--i2-border2);background:rgba(255,255,255,0.04);color:var(--i2-muted);font-size:12px;cursor:pointer;white-space:nowrap;font-family:inherit;} .inv2-selbtn{flex-shrink:0;min-width:34px;height:30px;padding:0 9px;border-radius:20px;border:1px solid var(--i2-border2);background:rgba(255,255,255,0.04);color:var(--i2-muted);font-size:13px;cursor:pointer;font-family:inherit;} .inv2-cv-chip{color:#f5b74e;font-size:11px;font-weight:600;cursor:default;white-space:nowrap;} .inv2-printing-tag{color:var(--i2-purple-lt,#c4bcff);font-size:11px;font-weight:600;white-space:nowrap;} .inv2-cv-note{background:rgba(245,183,78,0.12);border:1px solid rgba(245,183,78,0.35);color:#f5b74e;border-radius:10px;padding:9px 12px;margin:10px 0 2px;font-size:12px;line-height:1.45;cursor:pointer;} #modal-confirm-variant .ac-sr-grid{max-height:min(300px,38vh);overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;} .cv-printing-row{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0;} .inv2-row{display:flex;align-items:flex-start;gap:12px;padding:10px 12px;background:var(--i2-card);border:1px solid var(--i2-border);border-left:3px solid var(--i2-purple);border-radius:18px;margin-bottom:8px;cursor:pointer;transition:border-color .15s,background .15s;} .inv2-row:active{background:#1a1930;border-color:rgba(124,109,242,0.35);} .inv2-row.sold{border-left-color:#888;opacity:.7;} .inv2-row.sel{background:rgba(124,109,242,0.1);border-color:rgba(124,109,242,0.5);} .inv2-thumb{width:48px;height:66px;border-radius:7px;flex-shrink:0;background:linear-gradient(135deg,#1e1b3a,#2a2550);display:flex;align-items:center;justify-content:center;font-size:22px;overflow:hidden;} .inv2-freshness{font-size:10px;color:var(--i2-muted,#666);margin-top:8px;letter-spacing:.02em;} /* Quiet no-image slot: surface-colored card shape + muted label (replaces the joker fallback) */ .noimg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--i2-card,#13121f);border:1px solid rgba(255,255,255,0.07);border-radius:inherit;color:#6b6980;font-size:9px;font-weight:600;letter-spacing:.02em;text-align:center;line-height:1.25;padding:2px;box-sizing:border-box;} .inv2-dimg.noimg-d{background:var(--i2-card,#13121f);box-shadow:none;border:1px solid rgba(255,255,255,0.07);color:#6b6980;font-size:13px;font-weight:600;} .inv2-thumb img{width:100%;height:100%;object-fit:cover;} .inv2-info{flex:1;min-width:0;} .inv2-name{font-size:14px;font-weight:600;color:var(--i2-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px;} /* Grade badge leads the name line so a long set/card name can never truncate it. */ .inv2-grade-badge{display:inline-block;background:rgba(124,109,242,0.22);color:#c4bcff;border:1px solid rgba(124,109,242,0.35);border-radius:6px;font-size:10px;font-weight:700;letter-spacing:0.02em;padding:1px 6px;margin-right:6px;vertical-align:1px;} /* Company label colors. BGS is "black" but sits on a near-black page, so it gets a lighter dark fill + brighter border to read as a badge instead of a hole. */ .inv2-grade-badge.gb-psa{background:rgba(228,30,38,0.20);color:#ff9d9d;border-color:rgba(228,30,38,0.45);} .inv2-grade-badge.gb-bgs{background:#26262d;color:#e8e8ec;border-color:rgba(255,255,255,0.30);} .inv2-grade-badge.gb-cgc{background:rgba(37,99,235,0.22);color:#9dc1ff;border-color:rgba(37,99,235,0.50);} .inv2-grade-badge.gb-gray{background:rgba(148,163,184,0.16);color:#c7ced9;border-color:rgba(148,163,184,0.32);} .inv2-set{font-size:11px;color:var(--i2-muted);margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} /* ── Option B clean text-line row ── */ .inv2-sub{font-size:12px;color:var(--i2-muted);margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .inv2-meta{font-size:12px;color:var(--i2-muted);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .inv2-meta .inv2-num{font-family:'Clash Display',sans-serif;font-weight:600;color:var(--i2-text);} .inv2-meta .inv2-mgn-up{color:var(--i2-green);font-weight:600;} .inv2-meta .inv2-mgn-dn{color:var(--i2-red);font-weight:600;} .inv2-meta .inv2-mkt-tap{cursor:pointer;color:var(--i2-purple-lt);} .inv2-badges{display:flex;gap:5px;flex-wrap:wrap;align-items:center;} .inv2-badge{font-size:10px;font-weight:600;padding:2px 7px;border-radius:6px;white-space:nowrap;} #inv2-root .b-cond{background:rgba(124,109,242,0.15);border:1px solid rgba(124,109,242,0.3);color:#a89ff5;} #inv2-root .b-cost{background:#1e1d2e;border:1px solid #2a2840;color:#888;} #inv2-root .b-mkt{background:#1e1d2e;border:1px solid #2a2840;color:#888;} #inv2-root .b-mkt.tap{cursor:pointer;color:#a89ff5;border-color:rgba(124,109,242,0.3);} #inv2-root .b-up{background:rgba(52,211,153,0.1);border:1px solid rgba(52,211,153,0.25);color:var(--i2-green);} #inv2-root .b-dn{background:rgba(242,102,124,0.1);border:1px solid rgba(242,102,124,0.25);color:var(--i2-red);} .inv2-right{text-align:right;flex-shrink:0;padding-left:6px;} .inv2-ask{font-family:'Clash Display',sans-serif;font-size:18px;font-weight:600;color:var(--i2-green);margin-bottom:4px;} .inv2-ask.sold{color:var(--i2-red);} .inv2-ask.loss{color:var(--i2-amber);} .inv2-ask.none{color:var(--i2-purple-lt);font-size:12px;cursor:pointer;} .inv2-qty{font-size:10px;color:var(--i2-muted);} .inv2-empty{text-align:center;padding:48px 20px;color:var(--i2-muted);} .inv2-empty-emoji{font-size:40px;margin-bottom:12px;} .inv2-empty-title{font-size:16px;font-weight:700;color:var(--i2-text);margin-bottom:6px;} .inv2-empty-sub{font-size:13px;color:var(--i2-muted);line-height:1.5;} /* ── Skeleton load-in: static placeholders shipped in the HTML; the first renderInventory2() overwrites #inv2-hero/#inv2-list innerHTML so they vanish without any JS. Quiet opacity pulse only (no shimmer sweep); Reduce Motion turns the pulse off entirely. ── */ .inv2-skel{background:rgba(255,255,255,0.07);border-radius:7px;animation:inv2SkelPulse 1.6s ease-in-out infinite;} @keyframes inv2SkelPulse{0%,100%{opacity:1;}50%{opacity:.45;}} @media (prefers-reduced-motion:reduce){.inv2-skel{animation:none;}} .inv2-skel-row{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--i2-card);border:1px solid var(--i2-border);border-left:3px solid rgba(124,109,242,0.25);border-radius:18px;margin-bottom:8px;} .inv2-skel-row:nth-child(2) .inv2-skel{animation-delay:.1s;} .inv2-skel-row:nth-child(3) .inv2-skel{animation-delay:.2s;} .inv2-skel-row:nth-child(4) .inv2-skel{animation-delay:.3s;} .inv2-skel-row:nth-child(5) .inv2-skel{animation-delay:.4s;} .inv2-skel-row:nth-child(6) .inv2-skel{animation-delay:.5s;} .inv2-skel-thumb{width:48px;height:66px;flex-shrink:0;} .inv2-skel-info{flex:1;min-width:0;} /* pinned search+filter block: sticks to the top of the section scroller. No negative margins — they overflowed the section horizontally and made the whole view pannable (overflow-x computes to auto when overflow-y is auto). The -16px box-shadow paints the strip above; side gutters never contain rows, so content-width background is enough. */ .inv2-pinbar{position:sticky;top:0;z-index:30;background:var(--bg);padding:10px 0 4px;box-shadow:0 -16px 0 0 var(--bg);} #sec-inventory{overflow-x:hidden;} /* belt-and-braces: this section scrolls vertically only */ /* sticky selection bar (bulk mode): fixed above the tab bar, FAB-style — count + $total + Continue */ #inv2-selbar{position:fixed;left:16px;right:16px;bottom:calc(var(--nav-h) + var(--safe-bottom) + 12px);z-index:95;align-items:center;justify-content:space-between;gap:10px;background:#16131f;border:1px solid rgba(124,109,242,0.45);border-radius:16px;padding:10px 10px 10px 16px;box-shadow:0 12px 30px -8px rgba(0,0,0,0.65);} #inv2-selbar .sb-info{font-size:13px;font-weight:600;color:var(--i2-text,#f0eeff);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} #inv2-selbar .sb-cta{flex-shrink:0;background:linear-gradient(135deg,#7c6df2,#9b5cff);color:#fff;border:none;border-radius:12px;padding:11px 18px;font-size:14px;font-weight:700;font-family:inherit;cursor:pointer;box-shadow:0 8px 20px -8px rgba(124,109,242,0.7);} #inv2-selbar .sb-cta:active{transform:scale(.98);} #inv2-selbar .sb-scan{flex-shrink:0;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.16);color:#f0eeff;border-radius:12px;padding:11px 14px;font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;} #inv2-selbar .sb-scan:active{transform:scale(.98);} #inv2-selbar .sb-cancel{flex-shrink:0;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.16);color:#9a9aa5;border-radius:12px;padding:11px 14px;font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;} #inv2-selbar .sb-cancel:active{transform:scale(.98);} .inv2-bulkbar-inner{display:flex;align-items:center;justify-content:space-between;gap:8px;background:rgba(124,109,242,0.15);border:1px solid rgba(124,109,242,0.3);border-radius:12px;padding:10px 12px;margin-bottom:10px;font-size:13px;color:var(--i2-purple-lt);font-weight:600;} .inv2-bulkbar-inner button{font-size:12px;font-weight:600;padding:7px 12px;border-radius:8px;border:1px solid var(--i2-border2);background:rgba(255,255,255,0.06);color:var(--i2-text);cursor:pointer;font-family:inherit;} .inv2-bulkbar-inner button.del{background:rgba(242,102,124,0.2);border-color:rgba(242,102,124,0.4);color:var(--i2-red);} .inv2-check{width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,0.2);flex-shrink:0;position:relative;transition:all .12s;} .inv2-check.on{background:var(--i2-purple);border-color:var(--i2-purple);} .inv2-check.on::after{content:'';position:absolute;left:7px;top:3px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);} /* ── INV2 DETAIL (Screen 2) — namespaced full-screen overlay, additive ── */ .inv2-detail{position:fixed;inset:0;z-index:1400;background:var(--i2-bg,#09090f);display:flex;flex-direction:column;} .inv2-dhdr{display:flex;align-items:center;gap:10px;padding:calc(14px + env(safe-area-inset-top,0px)) 14px 10px;border-bottom:1px solid var(--i2-border2);background:var(--i2-bg,#09090f);flex-shrink:0;} .inv2-dhdr-title{flex:1;font-size:16px;font-weight:700;color:var(--i2-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;} .inv2-iconbtn{width:38px;height:38px;flex-shrink:0;border-radius:10px;border:1px solid var(--i2-border2);background:rgba(255,255,255,0.04);color:var(--i2-text);font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;} .inv2-backbtn{flex-shrink:0;height:38px;padding:0 16px 0 12px;border-radius:10px;border:1px solid rgba(124,109,242,0.5);background:rgba(124,109,242,0.18);color:var(--i2-purple-lt);font-size:15px;font-weight:700;font-family:inherit;display:flex;align-items:center;gap:2px;cursor:pointer;} .inv2-backbtn:active{background:rgba(124,109,242,0.3);} .inv2-dscroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px 16px 48px;} .inv2-dimg-wrap{display:flex;justify-content:center;padding:8px 0 18px;} .inv2-dimg{width:168px;aspect-ratio:2.5/3.5;border-radius:14px;background:#13121f;display:flex;align-items:center;justify-content:center;font-size:54px;box-shadow:0 0 38px rgba(124,109,242,0.45);object-fit:contain;} .inv2-dname{font-size:22px;font-weight:800;color:var(--i2-text);text-align:center;letter-spacing:-.02em;line-height:1.15;} .inv2-dset{font-size:13px;color:var(--i2-muted);text-align:center;margin-top:4px;} .inv2-ptiles{display:flex;gap:8px;margin-top:18px;} .inv2-ptile{flex:1;background:var(--i2-card);border:1px solid var(--i2-border);border-radius:12px;padding:11px 8px;text-align:center;} .inv2-ptile.hl{border-color:rgba(124,109,242,0.5);background:rgba(124,109,242,0.08);} .inv2-pt-lbl{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--i2-muted);font-weight:700;} .inv2-pt-val{font-size:18px;font-weight:800;color:var(--i2-text);margin-top:3px;} .inv2-pt-val.muted{color:var(--i2-muted);} .inv2-pt-val.green{color:var(--i2-green);} .inv2-pt-val.purple{color:#c4bcff;} .inv2-delta{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding:11px 14px;border-radius:12px;background:rgba(52,211,153,0.08);border:1px solid rgba(52,211,153,0.22);} .inv2-delta.loss{background:rgba(245,158,11,0.08);border-color:rgba(245,158,11,0.25);} .inv2-delta-lbl{font-size:12px;color:var(--i2-muted);} .inv2-delta-val{font-size:14px;font-weight:700;color:var(--i2-green);} .inv2-delta.loss .inv2-delta-val{color:var(--i2-amber);} .inv2-actions{display:flex;gap:8px;margin-top:16px;} .inv2-act{flex:1;padding:13px 8px;border-radius:12px;font-size:14px;font-weight:700;cursor:pointer;border:1px solid var(--i2-border2);background:rgba(255,255,255,0.04);color:var(--i2-text);display:flex;align-items:center;justify-content:center;gap:6px;} .inv2-act.sell{background:var(--i2-purple);border-color:var(--i2-purple);color:#fff;} .inv2-act.del{color:var(--i2-red);border-color:rgba(242,102,124,0.4);background:rgba(242,102,124,0.08);flex:0 0 50px;} .inv2-ddiv{height:1px;background:var(--i2-border2);margin:20px 0;} .inv2-dtabs{display:flex;gap:6px;margin-bottom:14px;} .inv2-dtab{flex:1;text-align:center;padding:9px;border-radius:10px;font-size:13px;font-weight:600;color:var(--i2-muted);background:rgba(255,255,255,0.03);border:1px solid var(--i2-border2);cursor:pointer;} .inv2-dtab.on{color:var(--i2-text);background:rgba(124,109,242,0.15);border-color:rgba(124,109,242,0.4);} .inv2-info-row{display:flex;justify-content:space-between;gap:12px;padding:9px 2px;border-bottom:1px solid var(--i2-border2);font-size:14px;} /* Copies cost ledger (group detail) */ .inv2-led{margin-top:14px;background:var(--i2-card);border:1px solid var(--i2-border2);border-radius:12px;padding:12px 14px;} .inv2-led-hdr{font-size:12.5px;font-weight:700;color:var(--i2-text);margin-bottom:4px;} .inv2-led-sub{font-weight:500;color:var(--i2-muted);font-size:11px;} .inv2-led-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px solid rgba(255,255,255,0.05);} .inv2-led-main{display:flex;align-items:center;min-width:0;} .inv2-led-date{font-size:12.5px;color:var(--i2-text);white-space:nowrap;} .inv2-led-first{margin-left:8px;font-size:10px;color:var(--i2-purple-lt);background:rgba(124,109,242,0.15);padding:2px 7px;border-radius:999px;font-weight:600;white-space:nowrap;} .inv2-led-right{display:flex;align-items:center;gap:10px;flex-shrink:0;} .inv2-led-cost{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.12);color:var(--i2-text);border-radius:8px;padding:5px 10px;font-size:12.5px;font-weight:600;font-family:inherit;cursor:pointer;white-space:nowrap;} .inv2-led-cost.add{color:#f5b74e;border-color:rgba(245,183,78,0.4);background:rgba(245,183,78,0.08);} .inv2-cost-note{background:rgba(245,183,78,0.12);border:1px solid rgba(245,183,78,0.35);color:#f5b74e;border-radius:10px;padding:10px 12px;margin-top:12px;font-size:12px;line-height:1.45;cursor:pointer;} .inv2-led-input{width:84px;background:#1a1a24;border:1px solid var(--i2-border2);border-radius:8px;color:var(--i2-text);padding:6px 8px;font-size:13px;} .inv2-led-save{background:var(--i2-purple);border:none;color:#fff;border-radius:8px;padding:6px 12px;font-size:12px;font-weight:700;font-family:inherit;cursor:pointer;} .inv2-info-row .k{color:var(--i2-muted);} .inv2-info-row .v{color:var(--i2-text);font-weight:600;text-align:right;} .inv2-hist-row{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:var(--i2-card);border:1px solid var(--i2-border2);border-radius:10px;margin-bottom:8px;} .inv2-hist-date{font-size:13px;color:var(--i2-muted);} .inv2-hist-price{font-size:13px;font-weight:600;color:var(--i2-text);} /* ── INV2 whole-number price picker (injected only when toggle is on) ── */ .inv2-pp{margin:0 0 12px;} .inv2-pp-mkt{font-size:12px;color:var(--i2-muted);margin-bottom:7px;} .inv2-pp-mkt b{color:var(--i2-text);font-weight:700;} .inv2-pp-chips{display:flex;gap:6px;flex-wrap:wrap;} .inv2-pp-chip{flex:1;min-width:52px;padding:9px 4px;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;border:1px solid var(--i2-border2);background:rgba(255,255,255,0.04);color:var(--i2-text);font-family:inherit;} .inv2-pp-chip.on{background:var(--i2-purple);border-color:var(--i2-purple);color:#fff;} .inv2-pp-chip.custom{flex:0 0 auto;color:var(--i2-muted);font-weight:600;} /* ── INV2 Earnings view (toggle-gated, mirrors the inventory design language) ── */ /* Section heading introducing the history list — proper kit heading (Clash Display), distinct from the card-internal "BEST SHOW" kicker. Larger top margin = clear break after the summary set. */ .pnl2-elabel{font-family:'Clash Display',sans-serif;font-size:18px;font-weight:600;letter-spacing:-.01em;text-transform:none;color:var(--i2-text);margin:24px 2px 10px;} .pnl2-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;background:var(--i2-card);border:1px solid var(--i2-border);border-left:3px solid var(--i2-purple);border-radius:14px;margin-bottom:8px;} .pnl2-best{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;background:linear-gradient(135deg,rgba(124,109,242,0.12),rgba(124,109,242,0.03));border:1px solid rgba(124,109,242,0.28);border-left:3px solid var(--i2-purple);border-radius:14px;margin-bottom:8px;} .pnl2-tag{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--i2-purple-lt);margin-bottom:4px;} .pnl2-nm{font-size:14px;font-weight:600;color:var(--i2-text);} .pnl2-best .pnl2-nm{font-size:15px;font-weight:700;} .pnl2-meta{font-size:11px;color:var(--i2-muted);margin-top:2px;} .pnl2-amt{font-size:16px;font-weight:700;color:var(--i2-green);white-space:nowrap;} .pnl2-best .pnl2-amt{font-size:20px;font-weight:800;} .pnl2-empty{text-align:center;padding:24px 16px;color:var(--i2-muted);font-size:13px;line-height:1.5;} /* Quiet treatment for $0 / no-earning shows so real earners stand out (scoped to #pnl-inv2) */ #pnl-inv2 .pnl2-row-quiet{border-left-color:var(--i2-border2);opacity:.7;} #pnl-inv2 .pnl2-row-quiet .pnl2-nm{color:var(--i2-muted);font-weight:500;} /* ── Multi-card split-tender Sale Sheet (all scoped to #sale-sheet) ── */ /* WKWebView-safe: explicit edges + width/height (NOT inset:0 → renders 0x0); no backdrop-filter (eats touch). */ #sale-sheet{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;z-index:300;background:#09090e;display:none;flex-direction:column;font-family:'Satoshi',sans-serif;color:#f0eeff;} #sale-sheet.open{display:flex;} #sale-sheet *{box-sizing:border-box;} #sale-sheet .ss-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 18px 14px;border-bottom:1px solid rgba(255,255,255,0.07);flex-shrink:0;} #sale-sheet .ss-title{font-family:'Clash Display',sans-serif;font-size:22px;font-weight:600;letter-spacing:-.01em;} #sale-sheet .ss-sub{font-size:12.5px;color:#8a8898;margin-top:3px;} #sale-sheet .ss-x{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);color:#c9c8d4;width:34px;height:34px;border-radius:12px;font-size:18px;line-height:1;cursor:pointer;flex-shrink:0;} #sale-sheet .ss-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px 16px 8px;} #sale-sheet .ss-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#74747e;font-weight:700;margin:4px 2px 8px;} #sale-sheet .ss-card{background:#121219;border:1px solid rgba(255,255,255,0.07);border-radius:18px;padding:6px 14px 12px;margin-bottom:14px;} #sale-sheet .ss-crow{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,0.05);} #sale-sheet .ss-crow:last-child{border-bottom:none;} #sale-sheet .ss-cname{font-size:14px;font-weight:600;color:#f0eeff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} #sale-sheet .ss-cqty{color:#c4bcff;font-weight:700;font-size:12px;background:rgba(124,109,242,0.15);border-radius:999px;padding:1px 7px;margin-left:2px;} #sale-sheet .ss-cmeta{font-size:11px;color:#74747e;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} #sale-sheet .ss-cask{font-family:'Clash Display',sans-serif;font-size:15px;font-weight:600;color:#c4bcff;white-space:nowrap;flex-shrink:0;} #sale-sheet .ss-prow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 0;} #sale-sheet .ss-pl{font-size:13px;color:#8a8898;} #sale-sheet .ss-pv{font-family:'Clash Display',sans-serif;font-size:16px;font-weight:600;} #sale-sheet .ss-price-input{width:140px;text-align:right;background:#09090e;border:1px solid rgba(124,109,242,0.45);border-radius:12px;padding:9px 12px;color:#f0eeff;font-family:'Clash Display',sans-serif;font-size:18px;font-weight:600;outline:none;} #sale-sheet .ss-disc{color:#34d399;} #sale-sheet .ss-disc.zero{color:#74747e;} #sale-sheet .ss-tender{display:flex;align-items:center;gap:8px;margin-bottom:9px;} #sale-sheet .ss-method{flex:0 0 auto;min-width:104px;background:#09090e;border:1px solid rgba(255,255,255,0.12);border-radius:12px;color:#f0eeff;font-size:13px;font-weight:600;padding:10px;font-family:inherit;outline:none;-webkit-appearance:none;} #sale-sheet .ss-amt{flex:1;min-width:0;background:#09090e;border:1px solid rgba(255,255,255,0.12);border-radius:12px;padding:10px 12px;color:#f0eeff;font-family:'Clash Display',sans-serif;font-size:15px;font-weight:600;outline:none;text-align:right;} #sale-sheet .ss-trm{flex:0 0 auto;background:rgba(242,102,124,0.14);border:1px solid rgba(242,102,124,0.35);color:#f2667c;width:36px;height:38px;border-radius:12px;font-size:16px;line-height:1;cursor:pointer;} #sale-sheet .ss-addtender{width:100%;background:rgba(124,109,242,0.12);border:1px dashed rgba(124,109,242,0.5);color:#c4bcff;font-size:13px;font-weight:600;padding:10px;border-radius:12px;cursor:pointer;font-family:inherit;margin-top:2px;} #sale-sheet .ss-ttl{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding-top:11px;border-top:1px solid rgba(255,255,255,0.06);font-size:13px;font-weight:600;} #sale-sheet .ss-ttl.ok{color:#34d399;} #sale-sheet .ss-ttl.bad{color:#f2667c;} #sale-sheet .ss-err{background:rgba(242,102,124,0.12);border:1px solid rgba(242,102,124,0.35);color:#f2667c;font-size:12.5px;line-height:1.45;padding:10px 12px;border-radius:12px;margin-bottom:14px;} #sale-sheet .ss-foot{flex-shrink:0;display:flex;align-items:center;gap:12px;padding:14px 16px;padding-bottom:calc(14px + env(safe-area-inset-bottom));border-top:1px solid rgba(255,255,255,0.08);background:#0c0c13;} #sale-sheet .ss-foot-total{flex:0 0 auto;} #sale-sheet .ss-foot-cap{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#74747e;} #sale-sheet .ss-foot-amt{font-family:'Clash Display',sans-serif;font-size:22px;font-weight:700;} #sale-sheet .ss-complete{flex:1;background:linear-gradient(135deg,#7c6df2,#9b5cff);border:none;color:#fff;font-family:'Satoshi',sans-serif;font-size:15px;font-weight:700;padding:15px;border-radius:14px;cursor:pointer;} #sale-sheet .ss-complete:disabled{opacity:.4;cursor:not-allowed;} #sale-sheet .ss-seg{display:inline-flex;background:#09090e;border:1px solid rgba(255,255,255,0.12);border-radius:10px;overflow:hidden;flex-shrink:0;} #sale-sheet .ss-seg-btn{background:transparent;border:none;color:#8a8898;font-size:13px;font-weight:700;padding:8px 12px;cursor:pointer;font-family:inherit;min-width:34px;line-height:1;} #sale-sheet .ss-seg-btn.on{background:linear-gradient(135deg,#7c6df2,#9b5cff);color:#fff;} #sale-sheet .ss-disc-input{width:96px;text-align:right;background:#09090e;border:1px solid rgba(124,109,242,0.45);border-radius:12px;padding:9px 12px;color:#34d399;font-family:'Clash Display',sans-serif;font-size:16px;font-weight:600;outline:none;} #sale-sheet .ss-disc-hint{font-size:11px;color:#74747e;text-align:right;padding:2px 2px 2px;} #sale-sheet .ss-roundrow{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 0 6px;} #sale-sheet .ss-round-cap{font-size:11px;color:#74747e;} #sale-sheet .ss-rbtn{background:rgba(124,109,242,0.12);border:1px solid rgba(124,109,242,0.4);color:#c4bcff;font-size:12px;font-weight:600;padding:6px 12px;border-radius:10px;cursor:pointer;font-family:inherit;} #sale-sheet .ss-rbtn:active{background:rgba(124,109,242,0.25);} /* Sell action on the inventory bulk bar */ .inv2-bulkbar-inner button.sell{background:rgba(52,211,153,0.18);border-color:rgba(52,211,153,0.4);color:var(--i2-green);} /* ── Reskin B4 #5: show detail (closed/completed path) → kit. The generic .card is glass with backdrop-filter (a WKWebView tap-eater) — swap for a kit surface inside the detail; error-state Back button gets the kit ghost look. ── */ #show-detail-content .card{background:#121219;backdrop-filter:none;-webkit-backdrop-filter:none;border:1px solid rgba(255,255,255,0.07);border-radius:18px;} #show-detail-content .btn-ghost{background:#1a1a24;border:1px solid rgba(255,255,255,0.10);color:#c9c8d4;border-radius:12px;} /* ── Show Mode (active-show) reskin — kit surfaces, scoped to #show-detail-content ── */ #show-detail-content{font-family:'Satoshi',sans-serif;} #show-detail-content .sm-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px;} #show-detail-content .sm-title{font-family:'Clash Display',sans-serif;font-size:22px;font-weight:600;letter-spacing:-.01em;color:#f3f3f6;display:flex;align-items:center;gap:9px;flex-wrap:wrap;line-height:1.15;} /* .sm-live (the LIVE chip) retired per approved mockup B5 as modified by David: the elapsed clock says "live" by existing — a show with a running clock IS live, so the chip was a label for something already on screen. Rule removed; the markup no longer emits it. */ #show-detail-content .sm-sub{font-size:12.5px;color:#9a9aa5;margin-top:4px;} /* Elapsed (+ remaining) clock: success green, NO "Live" word, no animation, sits inline ahead of the muted date/venue. Minutes only — it ticks once a minute, so seconds would be a lie the UI could not keep. */ #show-detail-content .sm-clock{color:#34d399;font-weight:600;} #show-detail-content .sm-head-btns{display:flex;align-items:center;gap:8px;flex-shrink:0;} #show-detail-content .sm-bar{position:fixed;left:16px;right:16px;bottom:calc(var(--nav-h) + var(--safe-bottom) + 12px);z-index:95;display:flex;gap:10px;} #show-detail-content .sm-bar-reg{padding:14px 18px;border-radius:12px;background:#16131f;border:1px solid rgba(255,255,255,0.12);color:#f3f3f6;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;box-shadow:0 12px 30px -8px rgba(0,0,0,0.65);} #show-detail-content .sm-bar-sale{flex:1;padding:14px 18px;border-radius:12px;border:none;background:linear-gradient(135deg,#7c6df2,#9b5cff);color:#fff;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 12px 30px -8px rgba(124,109,242,0.5);} #show-detail-content .sm-btn-ic{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;background:#121219;border:1px solid rgba(255,255,255,0.08);color:#9a9aa5;cursor:pointer;flex-shrink:0;font-size:15px;line-height:1;} #show-detail-content .sm-hero{background:linear-gradient(135deg,rgba(124,109,242,0.20),rgba(124,109,242,0.05));border:1px solid rgba(124,109,242,0.28);border-radius:18px;padding:16px 16px 14px;margin-bottom:14px;} #show-detail-content .sm-hero-label{font-size:11px;letter-spacing:.1em;font-weight:700;color:#c4bcff;text-transform:uppercase;} #show-detail-content .sm-hero-val{font-family:'Clash Display',sans-serif;font-size:34px;font-weight:600;color:#34d399;margin-top:4px;letter-spacing:-.02em;line-height:1.1;} #show-detail-content .sm-hero-stats{display:flex;margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,0.08);} #show-detail-content .sm-hero-stats>div{flex:1;display:flex;flex-direction:column;gap:2px;padding:0 12px;} #show-detail-content .sm-hero-stats>div:first-child{padding-left:0;} #show-detail-content .sm-hero-stats>div + div{border-left:1px solid rgba(255,255,255,0.06);} #show-detail-content .sm-hs-label{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#9a9aa5;} #show-detail-content .sm-hs-val{font-family:'Clash Display',sans-serif;font-size:16px;font-weight:600;color:#f3f3f6;} #show-detail-content .sm-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px;} #show-detail-content .sm-act{padding:13px 6px;border-radius:12px;display:flex;flex-direction:column;align-items:center;gap:6px;background:#121219;border:1px solid rgba(255,255,255,0.08);color:#f3f3f6;cursor:pointer;font-family:inherit;font-size:11.5px;font-weight:600;} #show-detail-content .sm-act:active{background:#1a1830;} #show-detail-content .sm-act-ic{font-size:20px;line-height:1;} #show-detail-content .sm-card{background:#121219;border:1px solid rgba(255,255,255,0.08);border-radius:18px;overflow:hidden;} #show-detail-content .sm-card-hd{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;} #show-detail-content .sm-card-hd-t{font-size:13px;font-weight:600;color:#f3f3f6;} #show-detail-content .sm-card-hd-n{font-size:11px;color:#9a9aa5;} #show-detail-content .sm-tx{display:flex;align-items:center;gap:11px;padding:11px 14px;border-bottom:1px solid rgba(255,255,255,0.05);} #show-detail-content .sm-tx:last-child{border-bottom:none;} #show-detail-content .sm-tx-ic{font-size:14px;flex-shrink:0;width:16px;text-align:center;} #show-detail-content .sm-tx-main{flex:1;min-width:0;} #show-detail-content .sm-tx-desc{font-size:13px;font-weight:500;color:#f3f3f6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} #show-detail-content .sm-tx-meta{font-size:11px;color:#9a9aa5;margin-top:1px;} #show-detail-content .sm-tx-amt{font-family:'Clash Display',sans-serif;font-size:14px;font-weight:700;white-space:nowrap;} #show-detail-content .sm-tx-empty{padding:22px;text-align:center;color:#9a9aa5;font-size:13px;} .gmb-coin-wrap{perspective:700px;width:104px;height:104px;margin:0 auto}.gmb-coin{width:104px;height:104px;position:relative;transform-style:preserve-3d;transition:transform 1.05s cubic-bezier(.18,.66,.2,1)}.gmb-face{position:absolute;inset:0;border-radius:50%;display:flex;align-items:center;justify-content:center;-webkit-backface-visibility:hidden;backface-visibility:hidden;background:#c8a24c;border:3px solid #7d6122;box-sizing:border-box}.gmb-ring{width:80px;height:80px;border-radius:50%;border:2px solid #ecd592;display:flex;align-items:center;justify-content:center;color:#6a4f17}.gmb-back{transform:rotateY(180deg)}.gmb-chip{flex:1;text-align:center;padding:9px 0;font-size:15px;border-radius:8px;cursor:pointer;background:rgba(255,255,255,.05);color:#cfcce8;border:1px solid rgba(255,255,255,.08)}.gmb-chip.on{background:#7c6df2;color:#fff;border-color:#7c6df2}@keyframes gmbpop{0%{transform:scale(.5);opacity:0}100%{transform:scale(1);opacity:1}} /* ═══ OFFLINE BANNER — participates in layout so it covers nothing ═══ */ /* --ob-h is set live to the banner's measured height by _syncBannerLayout(); .offline-active is toggled on while the banner shows. Shift the scroll sections and the top-anchored overlays down by exactly that height, so the card-detail back button, the show X and the screen titles all clear the banner instead of hiding beneath it. */ html.offline-active .section { top: var(--ob-h, 0px); } html.offline-active .modal-overlay, html.offline-active #sale-sheet, html.offline-active .member-action-sheet-overlay { top: var(--ob-h, 0px); }