/* Sell Anywhere · Book Lovers — one engine, two skins. Tokens only; no hard-coded surface colors. */
:root{
  --font-d:'Bricolage Grotesque','Avenir Next','Trebuchet MS',system-ui,sans-serif;
  --font-b:'Figtree','Avenir Next',system-ui,sans-serif;
  --paper:#f5efe2; --card:#fffaf0; --ink:#14202b; --ink2:#44525f; --line:#d9cfbb; --accent:#e8553d; --accent-ink:#fff;
  --tagc:#f2b705; --good:#2f7d4f; --warn:#b36b00; --bad:#b3261e; --shadow:0 14px 40px rgba(20,32,43,.12);
  --r4-bg:var(--card); --r4-fg:var(--ink); --r4-line:var(--line); --r4-accent:var(--accent); --r4-font:var(--font-b);
  --s1:.5rem; --s2:.8rem; --s3:1.3rem; --s4:2.1rem; --s5:3.4rem; --s6:5.5rem; --max:72rem; color-scheme:light;
}
:root[data-skin=books]{
  --font-d:'Fraunces','Iowan Old Style','Georgia',serif; --font-b:'Source Sans 3','Avenir Next',system-ui,sans-serif;
  --paper:#f7f0e3; --card:#fffaf1; --ink:#2a1d22; --ink2:#5b4a50; --line:#dccfbc; --accent:#8a2f4d; --tagc:#c28a3a; --good:#3d7a55;
  --shadow:0 14px 40px rgba(60,20,40,.14);
}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){
  --paper:#0e1620; --card:#16212d; --ink:#f1ead9; --ink2:#a9b4bf; --line:#2a3846; --accent:#ff7a5f; --accent-ink:#1a0f0b; --tagc:#f2b705; --shadow:0 14px 40px rgba(0,0,0,.45); color-scheme:dark;}
  :root[data-skin=books]:not([data-theme=light]){--paper:#171014; --card:#21171c; --ink:#f5ebdc; --ink2:#bda9b0; --line:#3a2a31; --accent:#e58aa6; --accent-ink:#2a0f1a; --tagc:#d9a24e;}}
:root[data-theme=dark]{--paper:#0e1620; --card:#16212d; --ink:#f1ead9; --ink2:#a9b4bf; --line:#2a3846; --accent:#ff7a5f; --accent-ink:#1a0f0b; --tagc:#f2b705; --shadow:0 14px 40px rgba(0,0,0,.45); color-scheme:dark}
:root[data-theme=dark][data-skin=books]{--paper:#171014; --card:#21171c; --ink:#f5ebdc; --ink2:#bda9b0; --line:#3a2a31; --accent:#e58aa6; --accent-ink:#2a0f1a; --tagc:#d9a24e}

*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.55 var(--font-b);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,svg,video,canvas{max-width:100%}
h1,h2,h3{font-family:var(--font-d);line-height:1.08;margin:0 0 .5em;letter-spacing:-.015em;font-weight:700}
:root[data-skin=books] h1,:root[data-skin=books] h2{font-weight:600;letter-spacing:-.01em;font-optical-sizing:auto}
h1{font-size:clamp(2.2rem,6.4vw,4rem);text-wrap:balance}h2{font-size:clamp(1.6rem,4.5vw,2.6rem)}h3{font-size:1.25rem}
p{margin:0 0 1em}a{color:inherit}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding-inline:max(1rem,env(safe-area-inset-left)) max(1rem,env(safe-area-inset-right))}
.muted{color:var(--ink2)}.sm{font-size:.88rem}.eyebrow{font:700 .74rem/1 var(--font-b);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:var(--s2);min-height:3.6rem;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;font:700 1.15rem var(--font-d);min-height:44px}
.brand svg{width:30px;height:30px;flex:none}
.links{display:flex;gap:.2rem;margin-left:auto;align-items:center;flex-wrap:wrap}
.links a,.links button.lk{padding:.55rem .75rem;border-radius:999px;text-decoration:none;font:600 .92rem var(--font-b);color:var(--ink2);min-height:44px;display:inline-flex;align-items:center;background:none;border:0;cursor:pointer}
.links a:hover,.links a[aria-current]{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--ink)}
.burger{display:none;margin-left:auto;min-width:44px;min-height:44px;border:1px solid var(--line);background:var(--card);border-radius:12px;color:var(--ink);font-size:1.2rem}
.skinsw{display:inline-flex;border:1.5px solid var(--line);border-radius:999px;padding:2px;background:var(--card)}
.skinsw a{padding:.3rem .7rem;border-radius:999px;font:700 .76rem var(--font-b);text-decoration:none;color:var(--ink2);min-height:32px;display:inline-flex;align-items:center}
.skinsw a[aria-current]{background:var(--accent);color:var(--accent-ink)}
.newbadge{background:var(--tagc);color:#1a1200;border-radius:999px;font:800 .66rem var(--font-b);padding:.2rem .5rem;letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
@media(max-width:860px){.burger{display:block}.links{display:none;width:100%;margin:0 0 .6rem;flex-direction:column;align-items:stretch}.links.open{display:flex}.links a{border:1px solid var(--line);background:var(--card)}}

/* buttons / forms */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:46px;padding:.6rem 1.2rem;border-radius:999px;border:2px solid var(--ink);background:var(--ink);color:var(--paper);font:700 .98rem var(--font-b);text-decoration:none;cursor:pointer;transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 -2px color-mix(in srgb,var(--ink) 25%,transparent)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.btn.ghost{background:transparent;color:var(--ink)}.btn.sm{min-height:38px;padding:.35rem .9rem;font-size:.86rem}.btn[disabled]{opacity:.5;pointer-events:none}
.btn.bad{border-color:var(--bad);color:var(--bad);background:transparent}
label{display:block;font:700 .82rem var(--font-b);margin:0 0 .3rem;color:var(--ink2)}
input,select,textarea{width:100%;min-height:46px;padding:.65rem .85rem;border:1.5px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);font:inherit}
textarea{min-height:7rem;resize:vertical}
.field{margin-bottom:var(--s2)}.row{display:grid;gap:var(--s2);grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.chips{display:flex;flex-wrap:wrap;gap:.45rem}
.chip{display:inline-flex;align-items:center;gap:.4rem;min-height:40px;padding:.35rem .8rem;border:1.5px solid var(--line);border-radius:999px;background:var(--card);font:600 .88rem var(--font-b);cursor:pointer;user-select:none}
.chip input{width:auto;min-height:0;margin:0}.chip.on,.chip:has(input:checked){background:color-mix(in srgb,var(--accent) 16%,var(--card));border-color:var(--accent)}
.stat{display:inline-block;padding:.15rem .6rem;border-radius:999px;font:800 .7rem var(--font-b);letter-spacing:.06em;text-transform:uppercase;background:var(--line);color:var(--ink)}
.stat.listed{background:color-mix(in srgb,var(--good) 25%,var(--card));color:var(--good)}.stat.sold{background:var(--good);color:#fff}.stat.draft{background:color-mix(in srgb,var(--tagc) 35%,var(--card))}.stat.pack{background:color-mix(in srgb,var(--accent) 18%,var(--card));color:var(--accent)}
.notice{border-left:5px solid var(--tagc);background:color-mix(in srgb,var(--tagc) 14%,var(--card));padding:.8rem 1rem;border-radius:0 12px 12px 0;font-size:.95rem}
.notice.bad{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 10%,var(--card))}.notice.good{border-color:var(--good);background:color-mix(in srgb,var(--good) 10%,var(--card))}
.toast{position:fixed;left:50%;bottom:calc(1.2rem + env(safe-area-inset-bottom,0px));transform:translate(-50%,40px);opacity:0;background:var(--ink);color:var(--paper);padding:.7rem 1.1rem;border-radius:999px;z-index:90;transition:.25s;max-width:92vw;font-weight:600;pointer-events:none}
.toast.show{transform:translate(-50%,0);opacity:1}
.loading{opacity:.6}.spin{display:inline-block;width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:sp .7s linear infinite;vertical-align:-.15em}@keyframes sp{to{transform:rotate(360deg)}}
.modal-bg{position:fixed;inset:0;background:rgba(10,14,20,.6);z-index:80;display:grid;place-items:center;padding:1rem}
.modal{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:1.4rem;width:min(30rem,100%);max-height:90vh;overflow:auto;box-shadow:var(--shadow)}

/* ===== signature: price-tag (sell) / bookmark ribbon (books) ===== */
.tag{--h:3.1rem;position:relative;display:inline-flex;align-items:center;min-height:var(--h);padding:.2rem 1rem .2rem 2.1rem;background:var(--tagc);color:#1a1200;font:800 1.3rem var(--font-d);clip-path:polygon(1.1rem 0,100% 0,100% 100%,1.1rem 100%,0 50%);border-radius:0 6px 6px 0}
.tag::before{content:"";position:absolute;left:.8rem;top:50%;width:.7rem;height:.7rem;margin-top:-.35rem;border-radius:50%;background:var(--paper);box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}
:root[data-skin=books] .tag{padding:.45rem 1rem .9rem;clip-path:polygon(0 0,100% 0,100% 100%,50% calc(100% - .55rem),0 100%);background:var(--accent);color:var(--accent-ink);border-radius:4px 4px 0 0;min-height:0;font-weight:600}
:root[data-skin=books] .tag::before{display:none}
.perf{height:14px;margin:var(--s4) 0;background:radial-gradient(circle at 7px 7px,var(--line) 2px,transparent 2.5px) 0 0/14px 14px repeat-x;opacity:.9}
:root[data-skin=books] .perf{height:28px;background:linear-gradient(var(--line),var(--line)) 0 50%/100% 1px no-repeat;position:relative}
:root[data-skin=books] .perf::after{content:"";position:absolute;left:50%;top:0;width:14px;height:28px;margin-left:-7px;background:var(--accent);clip-path:polygon(0 0,100% 0,100% 100%,50% 70%,0 100%)}
.wm{position:relative;isolation:isolate}
.wm::after{content:"re4urbished";position:absolute;right:.9rem;bottom:.5rem;font:800 .66rem var(--font-b);letter-spacing:.2em;text-transform:uppercase;color:var(--ink);opacity:.14;pointer-events:none;z-index:-1}
.empty{border:2px dashed var(--line);border-radius:18px;padding:var(--s4) var(--s3);text-align:center;color:var(--ink2)}
.empty svg{width:72px;height:72px;margin-bottom:.4rem;color:var(--accent)}

/* layout blocks */
.hero{padding-block:var(--s5) var(--s4);display:grid;gap:var(--s4);grid-template-columns:1.15fr .85fr;align-items:center}
@media(max-width:860px){.hero{grid-template-columns:1fr;padding-block:var(--s4)}}
.hero h1 em{font-style:normal;color:var(--accent);position:relative;white-space:nowrap}
:root[data-skin=books] .hero h1 em{font-style:italic}
.hero .lede{font-size:1.2rem;color:var(--ink2);max-width:34rem}
.cta{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:var(--s3)}
.receipt{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));border-block:2px dashed var(--line)}
.receipt>div{padding:var(--s3) var(--s2);border-inline-start:2px dashed var(--line)}.receipt>div:first-child{border-inline-start:0}
@media(max-width:860px){.receipt>div{border-inline-start:0;border-top:2px dashed var(--line)}.receipt>div:first-child{border-top:0}}
.receipt .n{font:800 3rem/1 var(--font-d);color:var(--accent);opacity:.9}
.band{padding-block:var(--s5)}.band.alt{background:color-mix(in srgb,var(--ink) 5%,var(--paper));border-block:1px solid var(--line)}
.split{display:grid;gap:var(--s4);grid-template-columns:1fr 1fr}@media(max-width:860px){.split{grid-template-columns:1fr}}
.panel{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:var(--s3);box-shadow:var(--shadow)}
.rail{display:flex;gap:var(--s2);overflow-x:auto;padding-bottom:.8rem;scroll-snap-type:x proximity}.rail>*{flex:0 0 min(78vw,16rem);scroll-snap-align:start}
.grid{display:grid;gap:var(--s2);grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr))}
.listing{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;text-decoration:none;color:inherit;position:relative}
.listing .ph{aspect-ratio:4/3;background:color-mix(in srgb,var(--ink) 8%,var(--card)) center/cover;display:grid;place-items:center;color:var(--ink2);font-size:.85rem}
:root[data-skin=books] .listing .ph{aspect-ratio:3/4}
.listing .b{padding:.8rem .9rem 1rem}.listing h3{font-size:1.02rem;margin:.2rem 0}.listing .tag{position:absolute;right:.6rem;top:.6rem;--h:2.2rem;font-size:1rem}
:root[data-skin=books] .listing .tag{top:0;right:.7rem;font-size:.95rem}
.tbl{width:100%;border-collapse:collapse;font-size:.93rem}.tbl th,.tbl td{text-align:left;padding:.65rem .5rem;border-bottom:1px solid var(--line);vertical-align:top}.tbl th{font:700 .74rem var(--font-b);letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
.xs{overflow-x:auto}
.tabs{display:flex;gap:.4rem;overflow-x:auto;padding-bottom:.3rem;margin-bottom:var(--s3)}.tabs button{flex:none;min-height:44px;padding:.4rem 1rem;border:1.5px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);font:700 .9rem var(--font-b);cursor:pointer}.tabs button[aria-selected=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.steps{counter-reset:s;display:grid;gap:var(--s3)}.step{position:relative;padding-left:3.4rem}.step::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:0;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font:800 1rem var(--font-d)}
.step h2{font-size:1.45rem}.step.done::before{content:"✓";background:var(--good)}
.cam{position:relative;border-radius:18px;overflow:hidden;background:#000;aspect-ratio:4/3;max-height:22rem}.cam video{width:100%;height:100%;object-fit:cover}
.cam::after{content:"";position:absolute;left:8%;right:8%;top:50%;height:2px;background:var(--accent);box-shadow:0 0 14px var(--accent);animation:beam 2.2s ease-in-out infinite}@keyframes beam{50%{transform:translateY(60px)}0%,100%{transform:translateY(-60px)}}
.thumbs{display:flex;gap:.5rem;flex-wrap:wrap}.thumbs .t{position:relative;width:5.4rem;height:5.4rem;border-radius:12px;background:var(--line) center/cover;border:1px solid var(--line)}.thumbs button{position:absolute;top:-6px;right:-6px;width:28px;height:28px;border-radius:50%;border:0;background:var(--bad);color:#fff;cursor:pointer}
.pill-count{font-size:.74rem;color:var(--ink2)}.over{color:var(--bad);font-weight:700}
.foot{border-top:1px solid var(--line);padding-block:var(--s4);margin-top:var(--s5);color:var(--ink2);font-size:.9rem}
.foot .cols{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}.foot a{display:block;padding:.3rem 0;text-decoration:none}
.qrbox{background:#fff;padding:12px;border-radius:14px;display:inline-block;line-height:0}.qrbox svg{width:180px;height:180px}
.bar{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.sample{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--warn)}
.stars{color:var(--tagc);letter-spacing:.1em}
.sticky-cta{position:sticky;bottom:calc(.6rem + env(safe-area-inset-bottom,0px));z-index:20}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}