:root { --bg:#f7f7f5; --card:#fff; --raised:#efefec; --imgbg:#f0f0ec; --border:#e3e3de; --border-strong:#d2d2cc; --ink:#1c1917; --gray:#57534e; --faint:#a8a29e; --accent:#b45309; --accent-soft:rgba(180,83,9,.1); --price:#047857; --danger:#dc2626; --owned:#059669; --rar-ar:#0284c7; --rar-sar:#c026d3; --rar-ir:#059669; --rar-sir:#b45309; --headerbg:hsla(60,11%,96%,.92); --onaccent:#fff; }
[data-theme="dark"] { --bg:#0b0f19; --card:#141926; --raised:#1b2233; --imgbg:#0a0e17; --border:#252c3d; --border-strong:#333c52; --ink:#e7e5e4; --gray:#9aa3b5; --faint:#6b7280; --accent:#fbbf24; --accent-soft:rgba(251,191,36,.12); --price:#34d399; --danger:#f87171; --owned:#34d399; --rar-ar:#38bdf8; --rar-sar:#e879f9; --rar-ir:#34d399; --rar-sir:#fbbf24; --headerbg:rgba(11,15,25,.92); --onaccent:#0b0f19; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.45 "Space Grotesk",-apple-system,"Segoe UI",Roboto,sans-serif; }
.code, .pr, .dmarketval, .opaid, #dpill { font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace; }
header { display:flex; align-items:center; gap:8px; padding:12px; background:var(--headerbg); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:5; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.title { font-family:Sora,"Space Grotesk",-apple-system,sans-serif; font-weight:800; font-size:17px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tag { font-size:11px; color:var(--gray); font-weight:400; }
.user { font-size:12px; color:var(--gray); }
main { max-width:760px; margin:0 auto; padding:4px 12px 24px; }
#bootbar { position:sticky; top:0; z-index:50; background:#7a2e3f; color:#fff; font-size:13px; padding:10px 14px; display:flex; gap:10px; align-items:center; }
#bootbar.hidden { display:none; }
#bootbar button { background:#fff; color:#7a2e3f; padding:6px 14px; font-size:13px; }
.sortrow { display:flex; align-items:center; gap:8px; margin:2px 0 8px; }
.sortrow label { font-size:12px; color:var(--gray); }
.sortrow select { flex:1; }
#tabs { display:none; }
#tabs button { flex:1; border-radius:12px; }
#tabs button:not(.on) { background:var(--card); color:var(--gray); border:1px solid var(--border); }
#filterbtn { flex:none; background:transparent; border:0; padding:6px 8px; display:flex; align-items:center; gap:2px; }
#filterbtn span { font-size:11px; font-weight:700; color:var(--accent); }
.searchwrap { position:relative; flex:1; display:flex; align-items:center; background:var(--card); border:1px solid var(--border-strong); border-radius:12px; padding-left:14px; box-shadow:0 1px 4px rgba(28,25,23,.05); }
.searchwrap:focus-within { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.searchwrap #q { flex:1; width:100%; padding:12px 4px; border:0; background:transparent; font-size:15px; min-width:0; color:var(--ink); outline:none; }
.searchwrap #q::placeholder { color:var(--faint); }
.langrow { display:flex; gap:8px; margin-bottom:8px; align-items:center; }
.langrow .seg { display:flex; gap:6px; }
.langrow .seg button { border-radius:10px; padding:7px 20px; font-size:13px; border:1px solid transparent; }
.langhint { font-size:11px; color:var(--gray); }
.langrow .seg button:not(.on) { background:var(--card); color:var(--gray); border:1px solid var(--border); }
.langnote { font-size:13px; color:var(--gray); }
#sheetback { position:fixed; inset:0; background:rgba(28,25,23,.5); z-index:30; }
#sheetback.hidden, #sheet.hidden, #settings.hidden { display:none; }
#settings, #sheet { position:fixed; left:0; right:0; bottom:0; background:var(--card); border-radius:20px 20px 0 0; padding:8px 16px calc(16px + env(safe-area-inset-bottom)); z-index:31; max-width:760px; margin:0 auto; box-shadow:0 -8px 30px rgba(0,0,0,.2); }
#sheet .grab, #settings .grab { width:40px; height:4px; border-radius:2px; background:var(--border-strong); margin:4px auto 8px; }
#sheet h3, #settings h3 { margin:10px 0 6px; font-size:12px; color:var(--gray); text-transform:uppercase; letter-spacing:.5px; }
#sheet .seg { display:flex; gap:8px; }
#sheet .seg button { flex:1; }
#sheet .seg button:not(.on) { background:var(--card); color:var(--gray); border:1px solid var(--border); }
.sheetselect { width:100%; padding:10px; font-size:14px; }
.sheethead { display:flex; justify-content:space-between; align-items:center; margin:2px 0 4px; }
.sheethead b { font-size:15px; letter-spacing:.04em; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 6px; }
.chips button { border-radius:999px; padding:7px 16px; font-size:13px; background:var(--card); color:var(--ink); border:1px solid var(--border); }
.chips button.on { background:var(--ink); color:var(--bg); border-color:var(--ink); font-weight:700; }
.sheetbtns { display:flex; gap:10px; margin-top:10px; }
.sheetbtns button { flex:1; padding:11px 0; border-radius:12px; font-size:15px; font-weight:700; }
.sheetbtns #sheetdone { background:var(--ink); color:var(--bg); }
.sheetbtns #clearfilters { background:var(--card); }
#settingsdone { width:100%; margin-top:10px; }
#fillpx { width:100%; margin-top:8px; }
#login { position:fixed; inset:0; background:var(--bg); z-index:50; display:flex; align-items:center; justify-content:center; padding:24px; }
#login.hidden { display:none; }
.logincard { background:var(--card); border:1px solid var(--border); border-radius:16px; padding:32px 28px; text-align:center; max-width:320px; }
.logincard h1 { font-size:20px; margin:0 0 8px; }
.logincard p { color:var(--gray); font-size:14px; margin:0 0 16px; }
section.hidden { display:none; }
.searchrow { display:flex; gap:8px; margin:6px 0 10px; flex-wrap:wrap; }
.searchrow input { flex:1; padding:12px 16px; border:1px solid var(--border-strong); border-radius:12px; font-size:15px; background:var(--card); color:var(--ink); }
button { background:var(--accent); color:#fff; border:0; border-radius:12px; padding:10px 18px; font-size:14px; font-weight:700; cursor:pointer; }
button.ghost { background:var(--card); color:var(--ink); border:1px solid var(--border); }
.controls { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:6px; }
#sheet .seg { display:flex; }
#sheet .seg button { flex:1; border-radius:0; } #sheet .seg button:first-child { border-radius:12px 0 0 12px; } #sheet .seg button:last-child { border-radius:0 12px 12px 0; }
.seg button:not(.on) { background:var(--card); color:var(--gray); border:1px solid var(--border); }
.chips { display:flex; gap:6px; flex-wrap:wrap; }
.chips button { padding:6px 12px; font-size:12px; }
.cur { padding:7px 10px; border:1px solid var(--border); border-radius:12px; background:var(--card); font:inherit; color:var(--ink); }
.chips button:not(.on) { background:var(--card); color:var(--gray); border:1px solid var(--border); }
h2 { font-size:14px; margin:18px 0 8px; }
.colrow { display:flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:10px 12px; margin-bottom:8px; }
.colrow.open { background:var(--accent-soft); border-color:var(--accent); }
.colrow .meta { flex:1; min-width:0; } .colrow .meta b { display:block; } .colrow .meta span { color:var(--gray); font-size:12px; }
.colrow .spent { font-weight:800; font-size:14px; white-space:nowrap; }
#hist { flex-basis:100%; display:flex; flex-direction:column; gap:6px; }
.hhead { align-self:flex-start; font-size:12px; padding:4px 12px; border-radius:20px; }
.hwrap { display:flex; gap:6px; flex-wrap:wrap; }
.hchip { font-size:12px; padding:4px 10px; border-radius:20px; }
.headcur { margin-left:0; flex:none; }
.hlabel { font-size:12px; color:var(--gray); align-self:center; }
.ans { margin-top:8px; padding:10px; background:var(--accent-soft); border-radius:10px; font-size:13px; }
.ansline { margin-bottom:6px; }
.ansform { display:flex; gap:6px; flex-wrap:wrap; }
.ansform input { flex:1; min-width:80px; font-size:13px; padding:6px; }
.ansform select { flex:1; min-width:90px; font-size:13px; padding:6px 28px 6px 8px; }
.quickrow { display:flex; gap:8px; margin-top:8px; overflow-x:auto; }
.quickrow button { flex:1; white-space:nowrap; font-size:13px; padding:8px 10px; }
.quickrow button.on { background:var(--accent-soft); border-color:var(--accent); color:var(--ink); font-weight:700; }
select { -webkit-appearance:none; appearance:none; background-color:var(--card); background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2357534e' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:36px; border:1px solid var(--border); border-radius:12px; font-size:14px; color:var(--ink); }
#colsel { width:100%; padding-top:12px; padding-bottom:12px; padding-left:14px; font-size:15px; font-weight:700; margin-bottom:6px; }
#colmeta { font-size:13px; color:var(--gray); margin-bottom:8px; }
#colmeta .spent { font-weight:800; color:var(--ink); }
.colmanage { display:flex; gap:8px; flex-wrap:wrap; }
.colmanage button { font-size:12px; padding:8px 12px; }
#qclear { flex:none; border:none; background:transparent; font-size:20px; line-height:1; color:var(--gray); cursor:pointer; display:none; padding:4px 8px; }
.usermenu-wrap { position:relative; display:flex; align-items:center; gap:8px; }
.hiuser { font-size:14px; color:var(--ink); white-space:nowrap; }
#tabbar { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:20; background:var(--card); border-top:1px solid var(--border); padding:10px 4px calc(10px + env(safe-area-inset-bottom)); max-width:760px; margin:0 auto; }
#tabbar button { flex:1; background:transparent; color:var(--gray); border:0; font-size:12px; padding:8px 4px; }
#tabbar button.on { color:var(--accent); }
#searchidle p { color:var(--gray); font-size:14px; margin:6px 4px 12px; }
.idlechips { display:flex; flex-wrap:wrap; gap:8px; margin:0 4px 16px; }
body { padding-bottom:96px; }
#homegreet { font-family:Sora,sans-serif; font-weight:800; font-size:26px; padding:18px 4px 0; }
#homesub { color:var(--gray); font-size:13px; padding:0 4px 12px; }
#homestats { display:flex; gap:10px; margin-bottom:8px; }
.hstat { flex:1; background:var(--card); border:1px solid var(--border); border-radius:14px; padding:12px; text-align:center; color:var(--ink); }
.hstat b { display:block; font-size:19px; }
.hstat span { font-size:11px; color:var(--gray); }
.shelf { padding:10px 0 4px; }
.shelf h3 { display:flex; justify-content:space-between; align-items:baseline; font-size:14px; margin:0 4px 10px; cursor:pointer; }
.shelf h3 em { font-style:normal; font-size:12px; color:var(--gray); font-weight:400; }
.rail { display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; }
.rail img { width:118px; border-radius:10px; box-shadow:0 4px 14px rgba(0,0,0,.25); flex:none; cursor:pointer; }
#youcard { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:18px; margin:12px 0; }
#youcard h3 { margin:0 0 4px; font-size:20px; }
#youcard p { margin:0; color:var(--gray); font-size:13px; }
#youbtns { display:flex; flex-direction:column; gap:8px; }
.ybtn { width:100%; text-align:left; }
@media (min-width:1024px) {
  #tabbar { display:none; }
  body { padding-bottom:0; }
}
#layout { display:block; }
#side { display:none; }
#content { min-width:0; }
@media (min-width:1024px) {
  #layout { display:flex; gap:16px; max-width:1180px; margin:0 auto; align-items:flex-start; }
  #layout main { margin:0; flex:1; }
  #side { display:flex; flex-direction:column; gap:4px; position:sticky; top:70px; min-width:230px; background:var(--card); border:1px solid var(--border); border-radius:14px; padding:12px; }
  .snav { display:flex; justify-content:space-between; align-items:center; gap:8px; width:100%; background:transparent; border:1px solid transparent; padding:10px 12px; border-radius:10px; font-size:15px; color:var(--gray); cursor:pointer; text-align:left; }
  .snav.on { background:var(--accent-soft); color:var(--ink); font-weight:700; border-color:var(--accent); }
  .snav.sub { font-size:14px; padding:8px 12px 8px 30px; }
  .snav .caret { display:inline-block; min-width:18px; color:var(--accent); font-weight:700; }
  .scount { font-size:12px; color:var(--faint); }
  #sidecols { display:flex; flex-direction:column; gap:4px; }
  .quickrow { display:none; }
}
#userbtn { font-size:20px; border:1px solid var(--border); background:var(--card); color:var(--ink); border-radius:50%; width:36px; height:36px; padding:0; flex:none; cursor:pointer; display:flex; align-items:center; justify-content:center; }
#userbtn b { font-size:18px; color:var(--ink); }
#themebtn { font-size:17px; border:1px solid var(--border); background:var(--card); color:var(--ink); border-radius:50%; width:36px; height:36px; padding:0; flex:none; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.pocket .pill { position:absolute; right:6px; bottom:6px; background:var(--ink); color:var(--bg); font-weight:800; border-radius:10px; padding:3px 10px; font-size:12px; text-align:right; line-height:1.3; }
.pocket .pill small { display:block; font-weight:400; font-size:10px; opacity:.75; }
#usermenu { position:absolute; right:0; top:44px; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:10px; min-width:190px; box-shadow:0 8px 24px rgba(0,0,0,.12); z-index:20; display:flex; flex-direction:column; gap:6px; }
#usermenu.hidden { display:none; }
.uprofile { font-size:13px; color:var(--gray); padding:2px 4px; word-break:break-all; }
.ansform .awant { padding:6px 12px; font-size:13px; }
.ansform .alog { padding:6px 12px; font-size:13px; }
.hchip.clear { opacity:.6; }
.colrow.moving { outline:2px dashed var(--accent); }
.colrow .grip { cursor:pointer; touch-action:manipulation; }
.colrow .ops button { padding:6px 10px; font-size:12px; margin-left:4px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.pocket { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:8px; cursor:grab; transition:border-color .15s; }
.pocket:hover { border-color:var(--accent); }
.pocket img { width:100%; border-radius:8px; display:block; aspect-ratio:63/88; object-fit:cover; background:var(--imgbg); }
.pocket .nm { font-weight:700; font-size:12px; margin-top:6px; }
.pocket .code { font-size:11px; color:var(--gray); margin-top:6px; }
.pocket .code .rc { font-weight:800; }
.rar { color:var(--rar-ar); } .rsar { color:var(--rar-sar); } .rir { color:var(--rar-ir); } .rsir { color:var(--rar-sir); }
.pocket .pr { color:var(--price); font-weight:800; font-size:15px; margin-top:2px; }
.pocket .pr.none { color:var(--faint); font-weight:400; font-size:12px; font-family:inherit; }
.pocket .tin { position:relative; }
.pocket .tin img { width:100%; display:block; border-radius:8px; }
.pocket.picked { outline:2px solid var(--ink); outline-offset:-2px; }
.pocket .pill.noprice { background:#fef3c7; color:#92400e; border:1px solid #f59e0b; }
.pocket .pickb { position:absolute; top:6px; right:6px; width:26px; height:26px; border-radius:50%; background:var(--ink); color:var(--bg); font-size:15px; font-weight:800; display:flex; align-items:center; justify-content:center; }
#pickbar { position:fixed; left:0; right:0; bottom:0; background:var(--card); border-top:1px solid var(--border); padding:10px 14px calc(10px + env(safe-area-inset-bottom)); display:flex; gap:8px; align-items:center; z-index:55; }
#pickbar b { flex:none; }
#pickbar select { flex:1; }
#pickbar button { flex:none; background:var(--ink); color:var(--bg); border-radius:10px; font-weight:700; padding:8px 18px; }
body.picking main { padding-bottom:90px; }
.viewseg { display:flex; background:#eceae8; border-radius:12px; padding:4px; margin:4px 0 10px; grid-column:1 / -1; }
.viewseg button { flex:1; border:none; background:none; border-radius:9px; font-size:13px; padding:7px 0; color:var(--gray); }
.viewseg button.on { background:var(--card); color:var(--ink); font-weight:700; box-shadow:0 1px 3px rgba(0,0,0,.12); }
.owntable { grid-column:1 / -1; }
#toast button.toastbtn { margin-left:10px; background:none; border:1px solid currentColor; border-radius:8px; color:inherit; font-size:13px; font-weight:700; padding:4px 12px; }
#dbinsel { display:flex; flex-wrap:wrap; gap:4px 14px; }
.colcheck { display:flex; align-items:center; gap:6px; font-size:14px; padding:4px 0; }
.colcheck input { width:18px; height:18px; }
#toast { position:fixed; left:50%; bottom:84px; transform:translateX(-50%) translateY(20px); background:var(--ink); color:var(--bg); font-size:13px; font-weight:700; border-radius:12px; padding:10px 18px; opacity:0; transition:opacity .2s, transform .2s; z-index:60; pointer-events:none; max-width:90vw; text-align:center; }
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }
.pocket .ctag { position:absolute; top:6px; left:6px; background:var(--accent); color:var(--onaccent); font-size:10px; font-weight:800; border-radius:8px; padding:3px 8px; }
.pocket .ownb { position:absolute; left:6px; bottom:6px; width:22px; height:22px; border-radius:50%; background:var(--owned); color:#fff; font-size:13px; display:flex; align-items:center; justify-content:center; }
.pocket .got { color:var(--gray); font-size:11px; }
.pocket .got.have { background:#ecfdf5; border:1px solid #10b981; color:#065f46; font-weight:700; border-radius:9px; padding:4px 8px; margin-top:4px; font-size:12px; }
.pager { display:flex; justify-content:space-between; align-items:center; margin-top:12px; }
.modal { position:fixed; inset:0; background:rgba(28,25,23,.5); overflow:auto; z-index:10; }
.modal.hidden { display:none; }
.sheet { background:var(--card); max-width:560px; margin:20px auto; border-radius:16px; padding:16px; }
.sheet img { width:min(300px,80%); display:block; margin:8px auto; border-radius:12px; }
.cols { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
#buyform { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
#buyform input, #buyform select { padding:9px 10px; border:1px solid var(--border); border-radius:10px; font-size:14px; background:var(--card); color:var(--ink); }
#buyform input { flex:1; min-width:80px; }
.buyrow { font-size:13px; padding:6px 0; border-top:1px solid var(--border); }
.dtop { display:flex; justify-content:space-between; margin-bottom:6px; }
.dart { display:flex; justify-content:center; }
.dartin { position:relative; }
.dartin img { width:min(210px,56vw); display:block; border-radius:12px; margin:0; background:var(--imgbg); }
#dpill { position:absolute; right:10px; bottom:10px; background:var(--ink); color:#fff; font-weight:800; border-radius:12px; padding:6px 14px; font-size:14px; }
.dname { font-size:16px; margin:8px 2px 4px; }
.dchips { display:flex; gap:6px; flex-wrap:wrap; margin:0 2px 8px; }
.dchip { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:3px 10px; font-size:11px; color:var(--gray); }
.dchip.rc { font-weight:800; }
.dmarket { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:8px 12px; margin-bottom:4px; }
#dshop { width:100%; margin:8px 0 4px; padding:12px; font-size:15px; font-weight:800; background:var(--accent-soft); border:1px solid var(--accent); color:var(--ink); border-radius:12px; }
.dlabel { font-size:11px; color:var(--gray); }
.dmarketval { font-weight:800; font-size:17px; color:var(--price); }
#detail h3 { margin:8px 0 4px; font-size:14px; }
#buys { max-height:22vh; overflow:auto; }
#buytoggle { width:100%; margin:8px 0; }
#buyform.hidden { display:none; }
.dbinder { display:flex; align-items:center; gap:8px; margin-top:8px; }
#dbinsel { flex:1; display:flex; }
#dbinsel select { flex:1; padding:9px 10px; border:1px solid var(--border); border-radius:10px; font-size:14px; }
.live { font-size:11px; color:var(--gray); }
.pocket.cheapest { border:2px solid var(--accent); }
.owntable { grid-column:1 / -1; background:var(--card); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.ownrow { display:grid; grid-template-columns:1.5fr .7fr .7fr .8fr auto; gap:6px; padding:9px 12px; font-size:13px; border-top:1px solid var(--border); align-items:center; }
.ownrow:first-child { border-top:none; }
.ownrow .opaid { font-weight:800; text-align:right; }
.ownrow .odate, .ownrow .owhere { color:var(--gray); }
.oact { display:flex; gap:4px; }
.oact button, .buyrow button { padding:4px 8px; font-size:12px; }
.buyrow { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.buyrow span { flex:1; min-width:140px; }
.erow { display:flex; gap:6px; flex-wrap:wrap; width:100%; }
.erow input { padding:8px; border:1px solid var(--border); border-radius:8px; font-size:13px; flex:1; min-width:80px; background:var(--card); color:var(--ink); }
input, select { color:var(--ink); }
footer { text-align:center; color:var(--faint); font-size:11px; padding:18px 0 8px; }
#dataset{position:fixed;inset:0;z-index:60;background:rgba(20,16,8,.55);display:flex;align-items:flex-end;justify-content:center}
#dataset.hidden{display:none}
#dataset .dpanel{background:#f7f1e3;border-radius:14px 14px 0 0;padding:10px 14px 30px;max-height:80vh;overflow:auto;width:100%;max-width:640px}
#datasetrows{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.datarow{display:flex;justify-content:space-between;gap:10px;background:#fff;border:1px solid #e5ddcb;border-radius:10px;padding:8px 10px;font-size:14px}
.datarow.dd{opacity:1}
.datarow.dd>b::after{content:" ✓";color:var(--accent)}
.datarow span{color:#1c1917;text-align:right}
.dcriteria{font-size:12px;color:#6b5f45;background:#fff8;border:1px solid #e5ddcb;border-radius:10px;padding:7px 10px;margin-top:8px;line-height:1.5}
.dlbtn{padding:2px 10px;font-size:12px;border-radius:999px}
@media (max-width:480px) {
  .title { font-size:14px; }
  .tag { display:none; }
  .headcur { font-size:13px; padding:6px 8px; }
  main { padding:4px 10px 24px; }
  .grid { gap:8px; }
  .pocket { padding:6px; }
  .sheet { margin:10px 8px; padding:12px; }
  .sheet .cols { grid-template-columns:1fr; }
  #buyform input { flex:1; min-width:120px; }
}