:root{ --stage-top:#1b1d23; --stage-bottom:#0b0c10; --accent:#ecc680; --accent-2:#caa45c; --accent-soft:rgba(236,198,128,.14); --ink:#eef0f4; --muted:#9aa0ad; --faint:#6b7080; --text-soft:#cdd1da; --panel:rgba(20,22,28,.72); --panel-2:rgba(28,31,38,.85); --line:rgba(255,255,255,.08); --panel-solid:rgba(16,17,21,.96); --skel-bg:rgba(255,255,255,.025); --skel-shine:rgba(255,255,255,.06); --display:"Space Grotesk",ui-sans-serif,system-ui,sans-serif; --body:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --page-bg: radial-gradient(90% 60% at 50% -8%, rgba(236,198,128,.07) 0%, rgba(236,198,128,0) 60%), radial-gradient(120% 100% at 50% 18%, var(--stage-top) 0%, var(--stage-bottom) 74%); } /* light theme: set by admin, saved to settings.json, applied as data-theme on */ html[data-theme="light"]{ --stage-top:#f6f4ef; --stage-bottom:#e9e5dd; --accent:#9a6b1f; --accent-2:#b88a3a; --accent-soft:rgba(154,107,31,.12); --ink:#20222a; --muted:#5d636e; --faint:#979ca6; --text-soft:#3a3f49; --panel:rgba(255,255,255,.72); --panel-2:rgba(255,255,255,.86); --line:rgba(0,0,0,.10); --panel-solid:rgba(250,249,246,.97); --skel-bg:rgba(0,0,0,.04); --skel-shine:rgba(0,0,0,.06); --page-bg: radial-gradient(90% 60% at 50% -6%, rgba(154,107,31,.06) 0%, rgba(154,107,31,0) 60%), radial-gradient(120% 100% at 50% 16%, var(--stage-top) 0%, var(--stage-bottom) 78%); } /* ink theme: deep blue with a flowing-ink background (see #inkbg) */ html[data-theme="ink"]{ --stage-top:#0c1a32; --stage-bottom:#050a16; --accent:#ecc680; --accent-2:#caa45c; --accent-soft:rgba(236,198,128,.14); --ink:#e9eef7; --muted:#93a4c2; --faint:#5d6b86; --text-soft:#c4cee0; --panel:rgba(10,18,34,.62); --panel-2:rgba(14,24,44,.82); --line:rgba(150,180,230,.12); --panel-solid:rgba(8,14,28,.94); --skel-bg:rgba(255,255,255,.03); --skel-shine:rgba(120,170,230,.10); --page-bg:radial-gradient(120% 100% at 50% 12%, #0c1a32 0%, #050a16 80%); } *{box-sizing:border-box;margin:0;padding:0;} html,body{height:100%;} /* paint the root the theme's base colour so the URL-bar collapse / overscroll never reveals a white strip behind the fixed background layers */ html{background:var(--stage-bottom);overscroll-behavior:none;} body{ background:var(--page-bg); font-family:var(--body); color:var(--ink);overflow:hidden; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } /* flowing-ink animated background (ink theme only), sits behind the box canvas */ #inkbg{position:fixed;inset:0;z-index:0;pointer-events:none;display:none;} html[data-theme="ink"] #inkbg{display:block;} /* the single shared 3D canvas: behind everything, never grabs clicks */ /* shared WebGL renderer is now an offscreen work buffer: each box is blitted into its own per-tile (.box-cv) which lives in the scrolling DOM, so boxes move with the page on the compositor instead of being repainted at viewport coordinates every frame (which froze during momentum scroll). */ #gl{position:fixed;left:-99999px;top:0;pointer-events:none;opacity:0;} .box-cv{position:absolute;inset:0;width:100%;height:100%;display:block;} /* ---------- GRID VIEW ---------- */ #grid-view{ position:fixed;inset:0;z-index:1;overflow-y:auto;-webkit-overflow-scrolling:touch; overscroll-behavior:none; } .head{ display:flex;align-items:center;gap:14px 16px;flex-wrap:wrap; padding:30px 34px 14px;max-width:1280px;margin:0 auto; } .brand{display:flex;align-items:center;gap:11px;min-width:0;} .brand .mark{width:30px;height:30px;flex:0 0 auto;color:var(--accent);} .brand .word{font-family:var(--display);font-weight:600;font-size:21px;letter-spacing:-.01em; color:var(--ink);line-height:1;white-space:nowrap;} .brand .word b{color:var(--accent);font-weight:700;} .brand .count{font-family:var(--display);font-size:12px;color:var(--muted);letter-spacing:.02em; padding-left:14px;margin-left:3px;border-left:1px solid var(--line);white-space:nowrap;} /* search / filter / sort toolbar */ .tools{display:flex;align-items:center;gap:9px;margin-left:auto;flex-wrap:wrap;} .tools[hidden]{display:none;} .tools .search{position:relative;display:flex;align-items:center;} .tools .search svg{position:absolute;left:11px;width:15px;height:15px;color:var(--faint);pointer-events:none;} .tools input, .tools select{ font-family:var(--body);font-size:13px;color:var(--ink); background:var(--panel);border:1px solid var(--line);border-radius:10px; height:36px;padding:0 12px;outline:none;transition:border-color .15s ease, box-shadow .15s ease; -webkit-appearance:none;appearance:none; } .tools input{padding-left:32px;width:190px;max-width:46vw;} .tools input::placeholder{color:var(--faint);} .tools select{padding-right:30px;cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 15px) 16px,calc(100% - 10px) 16px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;} .tools input:focus, .tools select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);} .tools select option{background:var(--panel-solid);color:var(--ink);} .grid{ display:grid;gap:34px 26px;padding:26px 34px 40px;max-width:1280px;margin:0 auto; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); } .card{display:block;text-decoration:none;color:inherit;border-radius:14px;outline:none;} .card:focus-visible{box-shadow:0 0 0 2px var(--accent);} /* transparent window the box is drawn into; must stay see-through */ .card .stage{ position:relative;width:100%;aspect-ratio:3/4;border-radius:14px;background:transparent; transition:transform .25s ease; } .card:hover .stage{transform:translateY(-5px);} .card .meta{padding:11px 4px 0;} .card .meta .t{font-size:14.5px;font-weight:550;line-height:1.3; white-space:normal;overflow-wrap:break-word;min-height:calc(1.3em * 2);} .card .meta .p{margin-top:3px;font-family:var(--display);font-size:13px;font-weight:500; color:var(--accent);letter-spacing:.01em;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;} .card .meta .p .avg-tag{font-family:var(--body);font-size:10px;font-weight:500;letter-spacing:.04em; text-transform:uppercase;color:var(--faint);} .card .meta .p .trend{font-family:var(--body);font-size:11px;font-weight:600;letter-spacing:0;} .trend.up{color:#5bb36a;} .trend.down{color:#d97a6c;} .trend.flat{color:var(--faint);} html[data-theme="light"] .trend.up{color:#3f8f50;} html[data-theme="light"] .trend.down{color:#bf5340;} /* hover preview card (desktop only) */ #hovercard{position:fixed;z-index:55;width:300px;max-height:72vh;overflow-y:auto;overscroll-behavior:contain; background:var(--panel-solid);border:1px solid var(--line);border-radius:14px; box-shadow:0 24px 60px rgba(0,0,0,.5);color:var(--ink); opacity:0;transform:translateY(6px) scale(.985);transform-origin:top left; transition:opacity .18s ease, transform .18s cubic-bezier(.4,0,.2,1);will-change:transform,opacity;} #hovercard.show{opacity:1;transform:none;} #hovercard[hidden]{display:none;} #hovercard::-webkit-scrollbar{width:9px;} #hovercard::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:6px;} .hc-media{position:relative;width:100%;height:158px;background:rgba(255,255,255,.03); border-bottom:1px solid var(--line);border-radius:14px 14px 0 0;overflow:hidden;} .hc-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .55s ease;} .hc-img.on{opacity:1;} .hc-dots{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;gap:5px;pointer-events:none;} .hc-dot{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.32);transition:background .3s;} .hc-dot.on{background:var(--accent);} .hc-body{padding:13px 15px 15px;} .hc-title{font-family:var(--display);font-size:15px;font-weight:600;line-height:1.3;} .hc-price{color:var(--accent);font-weight:600;margin-top:5px;font-size:14px;} .hc-ebay{margin-top:11px;padding-top:11px;border-top:1px solid var(--line);} .hc-ebay .row1{display:flex;align-items:baseline;gap:8px;} .hc-ebay .avg{font-size:17px;font-weight:700;} .hc-ebay .lbl{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);} .hc-ebay .lmh{margin-top:6px;font-size:12px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 14px;} .hc-ebay .lmh b{color:var(--text-soft);font-weight:600;} .hc-trend{font-size:11px;font-weight:600;margin-left:auto;} .hc-trend.up{color:#5bb36a;} .hc-trend.down{color:#d97a6c;} .hc-trend.flat{color:var(--faint);} .hc-specs{margin-top:11px;} .hc-specs .r{display:flex;justify-content:space-between;gap:14px;padding:5px 0;font-size:12.5px;border-top:1px solid var(--line);} .hc-specs .r .k{color:var(--muted);white-space:nowrap;} .hc-specs .r .v{color:var(--ink);text-align:right;} .hc-desc{margin-top:11px;padding-top:11px;border-top:1px solid var(--line);font-size:12.5px;line-height:1.5;color:var(--text-soft);} .hc-hint{margin-top:12px;font-size:11px;color:var(--faint);letter-spacing:.02em;} /* skeleton shimmer, shown over a tile until its box has loaded */ .skel{position:absolute;inset:0;border-radius:14px;overflow:hidden; background:var(--skel-bg);border:1px solid var(--line); opacity:1;transition:opacity .5s ease;} .skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%); background:linear-gradient(90deg,transparent,var(--skel-shine),transparent); animation:shimmer 1.5s ease-in-out infinite;} .skel.hide{opacity:0;pointer-events:none;} @keyframes shimmer{100%{transform:translateX(100%);}} /* empty / error state */ .empty{max-width:760px;margin:0 auto;padding:90px 34px;text-align:center;} .empty .e-mark{width:44px;height:44px;margin:0 auto 18px;opacity:.7;color:var(--accent);} .empty h2{font-family:var(--display);font-size:20px;font-weight:600;margin-bottom:8px;} .empty p{font-size:14px;color:var(--muted);line-height:1.55;} /* footer */ .site-foot{max-width:1280px;margin:0 auto;padding:24px 34px 42px;color:var(--faint); font-size:12px;display:flex;align-items:center;gap:9px;} .site-foot .fmark{width:15px;height:15px;opacity:.55;flex:0 0 auto;color:var(--muted);} .site-foot b{font-family:var(--display);color:var(--muted);font-weight:600;} @media (max-width:560px){ .head{padding:22px 20px 10px;gap:12px;} .brand .word{font-size:19px;} .grid{padding:16px 18px 36px;gap:26px 16px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));} .site-foot{padding:18px 20px 34px;} } /* ---------- DETAIL VIEW ---------- */ #detail-view{ position:fixed;inset:0;z-index:2;overflow-y:auto;display:none;overscroll-behavior:none; } .back{ position:sticky;top:0;display:inline-flex;align-items:center;gap:8px; margin:22px 0 0 28px;padding:8px 14px;border-radius:999px; background:var(--panel);border:1px solid var(--line); color:var(--ink);font-size:13px;letter-spacing:.03em;text-decoration:none; backdrop-filter:blur(6px); } .back:hover{border-color:var(--accent);} .back .arrow{color:var(--accent);} .detail-wrap{ display:grid;gap:40px;align-items:start; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); max-width:1120px;margin:0 auto;padding:8px 32px 28px; } .detail-gallery{max-width:1120px;margin:0 auto;padding:4px 32px 90px;} .detail-stage{ width:100%;aspect-ratio:4/5;background:transparent;cursor:grab;position:sticky;top:24px; touch-action:none; } .detail-stage.dragging{cursor:grabbing;} .detail-info{padding-top:18px;} .detail-info .t{font-family:var(--display);font-size:31px;font-weight:600;line-height:1.12;letter-spacing:-.01em;} .detail-info .p{margin-top:7px;font-family:var(--display);font-size:18px;font-weight:500;color:var(--accent);letter-spacing:.01em;} .detail-info .d{margin-top:18px;font-size:15px;line-height:1.6;color:var(--text-soft);max-width:46ch;} .title-card{position:relative;border:1px solid var(--line);border-radius:14px; background:var(--panel);padding:15px 17px;cursor:pointer; transition:border-color .15s ease, background .15s ease;} .title-card:hover{border-color:var(--accent);} .title-card:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);} .title-card .t{margin:0;padding-right:30px;} .title-card .p{margin-top:7px;} .title-link{position:absolute;top:15px;right:15px;width:16px;height:16px;color:var(--muted); opacity:.6;transition:color .15s ease, opacity .15s ease;} .title-card:hover .title-link{color:var(--accent);opacity:1;} .copied-pop{position:absolute;top:-13px;right:14px;background:var(--accent);color:#0c0d11; font-size:11.5px;font-weight:600;letter-spacing:.02em;padding:4px 10px;border-radius:999px; box-shadow:0 6px 18px rgba(0,0,0,.35);opacity:0;transform:translateY(5px);pointer-events:none; transition:opacity .16s ease, transform .16s ease;} .copied-pop.show{opacity:1;transform:translateY(0);} .specs{margin-top:18px;border:1px solid var(--line);border-radius:14px; background:var(--panel);padding:2px 14px;} .specs .row{ display:flex;justify-content:space-between;gap:16px; padding:11px 2px;border-top:1px solid var(--line);font-size:14px; } .specs .row:first-child{border-top:none;} .specs .row .k{color:var(--muted);} .specs .row .v{color:var(--ink);text-align:right;} .stage-ctrls{ margin-top:10px;display:flex;align-items:center;justify-content:space-between;gap:12px; } .stage-hint{ font-size:11px;color:var(--muted); letter-spacing:.08em;text-transform:uppercase; } .stage-btns{display:flex;gap:8px;flex:0 0 auto;} .sc-btn{ display:flex;align-items:center;justify-content:center;width:34px;height:34px; border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--muted); cursor:pointer;transition:color .15s ease, border-color .15s ease, background .15s ease; } .sc-btn:hover{color:var(--accent);border-color:var(--accent);} .sc-btn:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);} .sc-btn svg{width:17px;height:17px;} /* eBay live-price panel (detail view) */ .ebay-panel{ margin-top:18px;border:1px solid var(--line);border-radius:14px; background:var(--panel);padding:14px 14px 12px; } .ebay-panel .eb-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;} .ebay-panel .eb-h{font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--ink);} .ebay-panel .eb-h span{color:var(--muted);font-weight:500;font-size:11px;} .ebay-panel .eb-sum{margin-top:9px;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;} .ebay-panel .eb-sum b{font-family:var(--display);color:var(--accent);font-weight:600;} .ebay-panel .eb-sum .k{color:var(--muted);margin-right:5px;} .ebay-panel .eb-avg{font-family:var(--display);font-size:22px;font-weight:600;color:var(--accent);letter-spacing:.01em;} .ebay-panel .eb-avg small{font-size:12px;color:var(--muted);font-weight:500;letter-spacing:.02em;margin-left:6px;font-family:inherit;} .ebay-panel .eb-trend{display:flex;align-items:center;gap:10px;margin:9px 0 2px;} .ebay-panel .eb-trend-lbl{flex:0 0 auto;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);} .ebay-panel .eb-trend .spark{flex:1 1 auto;min-width:0;width:100%;height:30px;opacity:.92;} .ebay-panel .eb-trend.lite{color:var(--faint);} .ebay-panel .eb-trend-note{flex:1 1 auto;min-width:0;font-size:11px;color:var(--faint);letter-spacing:.01em;} .ebay-panel .eb-delta{flex:0 0 auto;font-family:var(--display);font-size:13px;font-weight:600;} .ebay-panel .eb-delta small{font-family:var(--body);font-weight:500;font-size:10.5px;color:var(--muted); margin-left:5px;letter-spacing:.02em;} .ebay-panel .eb-list{margin-top:11px;max-height:300px;overflow-y:auto;display:flex;flex-direction:column;gap:1px;} .ebay-panel .eb-row{display:flex;align-items:center;justify-content:space-between;gap:12px; padding:8px 4px;border-top:1px solid var(--line);text-decoration:none;color:inherit;} .ebay-panel .eb-row:first-child{border-top:none;} .ebay-panel .eb-row:hover{background:var(--accent-soft);} .ebay-panel .eb-t{font-size:12.5px;color:var(--text-soft);line-height:1.3; overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;} .ebay-panel .eb-pr{flex:0 0 auto;text-align:right;font-size:13px;font-family:var(--display);font-weight:600;color:var(--ink);} .ebay-panel .eb-pr small{display:block;font-size:10.5px;color:var(--muted);font-weight:500;letter-spacing:.01em;font-family:inherit;} .ebay-panel .eb-foot{margin-top:9px;font-size:10.5px;color:var(--faint);letter-spacing:.02em;} .ebay-panel .eb-msg{font-size:12.5px;color:var(--muted);padding:4px 0;} @media (max-width:760px){ .detail-wrap{grid-template-columns:1fr;gap:14px;} .detail-stage{position:relative;top:0;aspect-ratio:1/1;} .detail-info .t{font-size:24px;} } /* visible keyboard focus on every interactive control */ a:focus-visible,button:focus-visible,input:focus-visible{ outline:2px solid var(--accent);outline-offset:2px;border-radius:6px; } .card:focus-visible{outline:none;} @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.001ms !important;animation-iteration-count:1 !important; transition-duration:.001ms !important; } .card:hover .stage{transform:none;} } /* options menu */ #opt-btn{ position:fixed;top:22px;right:24px;z-index:20;width:40px;height:40px;border-radius:10px; background:var(--panel);border:1px solid var(--line);color:var(--ink); display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(6px); transition:border-color .15s ease; } #opt-btn:hover{border-color:var(--accent);} #opt-btn svg{width:19px;height:19px;} #opt-panel{ position:fixed;top:0;right:0;z-index:25;height:100%;width:300px;max-width:84vw; background:var(--panel-solid);border-left:1px solid var(--line);backdrop-filter:blur(10px); transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1); padding:22px 22px;display:flex;flex-direction:column;gap:22px; } #opt-panel.open{transform:translateX(0);} #opt-panel .opt-head{display:flex;align-items:center;justify-content:space-between;} #opt-panel .opt-head h2{font-size:15px;font-weight:600;} #opt-panel .opt-close{background:none;border:none;color:var(--muted);font-size:20px;cursor:pointer;line-height:1;} #opt-panel .opt-close:hover{color:var(--ink);} .opt-row label{display:block;font-size:12px;color:var(--muted);letter-spacing:.04em;margin-bottom:9px;} .opt-row + .opt-row{margin-top:24px;padding-top:22px;border-top:1px solid var(--line);} .opt-row select{width:100%;font:inherit;font-size:13px;color:var(--ink);background:var(--panel); border:1px solid var(--line);border-radius:9px;height:38px;padding:0 12px;outline:none;cursor:pointer;} .opt-row select:focus{border-color:var(--accent);} .opt-row .opt-note{margin-top:8px;font-size:11px;color:var(--faint);letter-spacing:.02em;} #bg-ink-opts{margin-top:10px;} #bg-ink-opts .bg-sub{display:block;font-size:10.5px;letter-spacing:.04em;color:var(--faint); text-transform:uppercase;margin:10px 0 5px;} #bg-ink-opts select{width:100%;} .opt-row .lab{display:flex;justify-content:space-between;font-size:9.5px;letter-spacing:.06em; text-transform:uppercase;color:var(--muted);margin-top:7px;} .opt-row .speed-track{position:relative;display:flex;align-items:center;} .opt-row .snap-dot{position:absolute;left:50%;top:50%;width:13px;height:13px; transform:translate(-50%,-50%);border:2px solid var(--accent);border-radius:50%; opacity:.5;pointer-events:none;z-index:0;} .opt-row input[type=range]{position:relative;z-index:1;width:100%;accent-color:var(--accent);cursor:pointer;} #opt-scrim{position:fixed;inset:0;z-index:24;background:rgba(0,0,0,.35);opacity:0;pointer-events:none; transition:opacity .28s ease;} #opt-scrim.open{opacity:1;pointer-events:auto;} /* MFC pictures gallery */ .mfc-pics{margin-top:6px;border:1px solid var(--line);border-radius:14px; background:var(--panel);padding:18px 20px;} .mfc-pics h3{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted); font-weight:600;margin-bottom:14px;} .mfc-pics .grid-pics{display:grid;grid-template-columns:repeat(auto-fill,minmax(116px,1fr));gap:12px;} .mfc-pics .grid-pics img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:8px; border:1px solid var(--line);cursor:pointer;background:#0d0e12; transition:border-color .15s ease, transform .15s ease;} .mfc-pics .grid-pics img:hover{border-color:var(--accent);transform:translateY(-2px);} .mfc-credit{margin-top:11px;font-size:11px;color:var(--muted);} .mfc-credit a{color:var(--accent);text-decoration:none;} .mfc-credit a:hover{text-decoration:underline;} /* lightbox */ #lightbox{position:fixed;inset:0;z-index:60;background:rgba(8,9,12,.93); display:none;align-items:center;justify-content:center;backdrop-filter:blur(3px);} #lightbox.open{display:flex;} #lightbox img{max-width:92vw;max-height:86vh;object-fit:contain;border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,.5);} #lightbox .lb-close{position:absolute;top:16px;right:22px;font-size:30px;color:#cdd1da; background:none;border:none;cursor:pointer;line-height:1;} #lightbox .lb-close:hover{color:#fff;} #lightbox .lb-nav{position:absolute;top:50%;transform:translateY(-50%);font-size:30px; color:#cdd1da;background:rgba(20,22,28,.6);border:1px solid var(--line);border-radius:50%; width:48px;height:48px;cursor:pointer;display:flex;align-items:center;justify-content:center;} #lightbox .lb-nav:hover{color:#fff;border-color:var(--accent);} #lightbox .lb-prev{left:14px;} #lightbox .lb-next{right:14px;} #lightbox .lb-count{position:absolute;bottom:18px;left:50%;transform:translateX(-50%); font-size:12px;color:var(--muted);letter-spacing:.06em;} /* order button + overlays */ .order-btn{display:inline-block;margin-top:22px;font:inherit;font-size:15px;font-weight:600; color:#0b0c10;background:var(--accent);border:1px solid var(--accent);border-radius:10px; padding:11px 22px;cursor:pointer;transition:background .15s,transform .05s;letter-spacing:.01em;} .order-btn:hover{background:var(--accent-2);} .order-btn:active{transform:translateY(1px);} .order-btn.ghost{background:none;color:var(--accent);} .order-btn.ghost:hover{background:var(--accent-soft);} .ov{position:fixed;inset:0;z-index:70;background:rgba(8,9,12,.78);backdrop-filter:blur(5px); display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:48px 16px;} .ov[hidden]{display:none;} .ov-card{position:relative;width:440px;max-width:100%;background:var(--panel-solid); border:1px solid var(--line);border-radius:16px;padding:26px 26px 24px; box-shadow:0 30px 80px rgba(0,0,0,.5);} .ov-x{position:absolute;top:14px;right:16px;font-size:24px;line-height:1;color:var(--muted); background:none;border:none;cursor:pointer;} .ov-x:hover{color:var(--ink);} .ov-h{font-family:var(--display);font-size:22px;font-weight:600;letter-spacing:-.01em;padding-right:24px;} .ov-sub{margin-top:8px;font-size:14px;line-height:1.55;color:var(--text-soft);} .of-l{display:block;margin-top:15px;font-size:13px;color:var(--muted);font-weight:500;} .of-l .of-opt{color:var(--faint);font-weight:400;} .of-l input,.of-l textarea{display:block;width:100%;margin-top:6px;font:inherit;font-size:14px; color:var(--ink);background:var(--panel-2);border:1px solid var(--line);border-radius:9px; padding:9px 11px;box-sizing:border-box;} .of-l input:focus,.of-l textarea:focus{outline:none;border-color:var(--accent);} .of-l textarea{resize:vertical;} .of-radio{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;} .of-radio label{flex:1 1 0;min-width:120px;display:flex;align-items:center;gap:8px;cursor:pointer; font-size:13.5px;color:var(--ink);font-weight:400;background:var(--panel-2); border:1px solid var(--line);border-radius:9px;padding:9px 11px;} .of-radio input{accent-color:var(--accent);} .of-err{margin-top:12px;font-size:13px;color:#f0a3a3;background:rgba(224,116,116,.1); border:1px solid rgba(224,116,116,.35);border-radius:8px;padding:8px 11px;} .of-link{display:block;margin-top:12px;font-size:13.5px;color:var(--accent);word-break:break-all; background:var(--panel-2);border:1px solid var(--line);border-radius:9px;padding:10px 12px;} .ost-row{display:flex;align-items:center;gap:10px;margin-top:14px;} .ost-pill{font-size:11px;letter-spacing:.05em;text-transform:uppercase;border-radius:7px; padding:3px 10px;border:1px solid var(--line);color:var(--muted);} .ost-pill.pending{color:#e7c66b;border-color:rgba(231,198,107,.45);} .ost-pill.approved{color:#8fd0ff;border-color:rgba(143,208,255,.45);} .ost-pill.paid{color:#8ce0b0;border-color:rgba(140,224,176,.45);} .ost-pill.fulfilled{color:var(--text-soft);} .ost-pill.declined,.ost-pill.canceled{color:#f0a3a3;border-color:rgba(224,116,116,.45);} .ost-pay{margin-top:16px;border-top:1px solid var(--line);padding-top:16px;} .ost-pay h3{font-size:14px;font-weight:600;color:var(--ink);} .ost-pay .amt{font-family:var(--display);font-size:24px;font-weight:600;color:var(--accent);margin-top:4px;} .ost-pay .instr{margin-top:10px;font-size:13.5px;line-height:1.6;color:var(--text-soft);white-space:pre-wrap;} .ost-pay .pp{display:inline-block;margin-top:12px;} /* music button + mini player */ #music-btn{position:fixed;top:70px;right:24px;z-index:20;width:40px;height:40px;border-radius:10px; background:var(--panel);border:1px solid var(--line);color:var(--ink); display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(6px); transition:border-color .15s ease,color .15s ease;} #music-btn:hover{border-color:var(--accent);} #music-btn.playing{border-color:var(--accent);color:var(--accent);} #music-btn svg{width:18px;height:18px;} #music-btn .eq{display:none;gap:2px;align-items:flex-end;height:15px;} #music-btn.playing .eq{display:flex;} #music-btn.playing .note{display:none;} #music-btn .eq i{width:3px;background:currentColor;border-radius:1px;display:block; animation:eqbar .9s ease-in-out infinite;} #music-btn .eq i:nth-child(1){height:7px;animation-delay:0s;} #music-btn .eq i:nth-child(2){height:14px;animation-delay:.22s;} #music-btn .eq i:nth-child(3){height:9px;animation-delay:.44s;} @keyframes eqbar{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}} #music-panel{position:fixed;top:70px;right:24px;z-index:26;width:250px;max-width:84vw; background:var(--panel-solid);border:1px solid var(--line);border-radius:12px;backdrop-filter:blur(10px); padding:15px 16px;box-shadow:0 16px 40px rgba(0,0,0,.45); transform:translateX(calc(100% + 32px));opacity:0;pointer-events:none; transition:transform .26s cubic-bezier(.4,0,.2,1),opacity .26s ease;} #music-panel.open{transform:translateX(0);opacity:1;pointer-events:auto;} #music-panel .mp-top{display:flex;align-items:center;gap:12px;margin-bottom:14px;} #music-panel .mp-play{flex:0 0 auto;width:42px;height:42px;border-radius:50%;border:none; background:var(--accent);color:#1a1410;display:flex;align-items:center;justify-content:center;cursor:pointer;} #music-panel .mp-play:hover{background:#f0cd87;} #music-panel .mp-play svg{width:18px;height:18px;} #music-panel .mp-meta{min-width:0;} #music-panel .mp-meta .lbl{font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;} #music-panel .mp-live{display:inline-flex;align-items:center;gap:4px;margin-left:7px;color:#ff5a5a;font-weight:700;font-size:8.5px;letter-spacing:.08em;} #music-panel .mp-live::before{content:"";width:6px;height:6px;border-radius:50%;background:#ff5a5a;animation:livedot 1.4s ease-in-out infinite;} @keyframes livedot{0%,100%{opacity:1}50%{opacity:.25}} #music-panel .mp-meta .name{font-size:13.5px;color:var(--ink);white-space:nowrap;overflow:hidden;} #music-panel .mp-meta .name .mp-name-inner{display:inline-block;will-change:transform;} #music-panel .mp-meta .name.marquee .mp-name-inner{animation:mqpan var(--mq-dur,8s) linear infinite alternate;} @keyframes mqpan{0%,15%{transform:translateX(0)}85%,100%{transform:translateX(var(--mq-shift,0))}} #music-panel .mp-meta .sub{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;} #music-panel .mp-vol{display:flex;align-items:center;gap:10px;} #music-panel .mp-vol svg{width:15px;height:15px;color:var(--muted);flex:0 0 auto;} #music-panel .mp-vol input[type=range]{width:100%;accent-color:var(--accent);cursor:pointer;} #music-panel .mp-credit{margin-top:12px;font-size:10.5px;color:var(--faint);} #music-panel .mp-credit a{color:var(--muted);text-decoration:none;} #music-panel .mp-credit a:hover{text-decoration:underline;}