html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/* The local collection is deliberately self-contained: no card image leaves this browser until a later account import. */
.collection-workspace { max-width: 1120px; margin: 0 auto; padding: 3rem 1.5rem 5rem; }
.collection-workspace__header { display:flex; justify-content:space-between; gap:2rem; align-items:end; border-bottom:2px solid #1a2e45; padding-bottom:1.75rem; }
.collection-workspace h1,.collection-workspace h2,.collection-workspace h3 { font-family: Georgia,serif; }.eyebrow { color:#c53c2c; font-size:.75rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.collection-workspace__actions { display:flex; gap:.75rem; }.collection-workspace button,.import-button { border:0; padding:.7rem 1rem; background:#17324d; color:#fff; cursor:pointer; font:inherit; font-weight:700; }.import-button { background:#c53c2c; }
.collection-workspace__grid { display:grid; grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr); gap:1.5rem; margin-top:2rem; }.collection-form,.collection-list { padding:1.5rem; background:#fff; border:1px solid #d7dce1; }.collection-form label { display:block; margin-top:1rem; font-weight:700; font-size:.86rem; }.collection-form input,.collection-form select { width:100%; margin-top:.35rem; padding:.55rem; border:1px solid #9ca9b5; font:inherit; }.form-row { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }.form-hint { color:#5d6b78; font-size:.86rem; }.save-entry { margin-top:1.4rem; width:100%; background:#c53c2c!important; }.collection-list__heading { display:flex; justify-content:space-between; gap:1rem; align-items:baseline; border-bottom:1px solid #d7dce1; }.collection-list__heading span { color:#5d6b78; font-size:.85rem; }.collection-entry { display:grid; grid-template-columns:1fr auto auto; gap:1rem; align-items:center; padding:1rem 0; border-bottom:1px solid #e7eaed; }.collection-entry h3,.collection-entry p { margin:0; }.collection-entry p,.collection-entry small { color:#5d6b78; }.collection-entry__images { display:flex; gap:.4rem; }.collection-entry__images img { width:42px; height:58px; object-fit:cover; }.collection-entry button { padding:.4rem .6rem; background:#6b1d1d; font-size:.78rem; }.empty-state { color:#5d6b78; padding:2rem 0; }
@media (max-width: 760px) { .collection-workspace__header,.collection-workspace__grid { display:block; }.collection-workspace__actions { margin-top:1rem; }.collection-list { margin-top:1.5rem; }.collection-entry { grid-template-columns:1fr auto; }.collection-entry__images { grid-row:2; }.form-row { grid-template-columns:1fr; gap:0; } }

/* The home page uses card proportions and collection states rather than stock marketplace imagery. */
:root { --ink:#102238; --ink-soft:#526170; --paper:#f3f6fa; --surface:#fff; --signal:#e54d36; --gold:#ffcb47; --line:#d9e1ea; }
body { margin:0; min-width:320px; background:var(--paper); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,sans-serif; }
.site-header { border-bottom:1px solid var(--line); background:rgba(255,255,255,.92); }
.site-nav { width:min(1180px,calc(100% - 40px)); min-height:76px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.site-brand { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; line-height:1; }.site-brand__mark { color:var(--signal); font-size:24px; }.site-brand strong,.site-brand small { display:block; }.site-brand small { color:var(--ink-soft); font-size:11px; margin-top:4px; letter-spacing:.02em; }
.site-nav__links { display:flex; gap:24px; margin-left:auto; }.site-nav__links a,.site-footer a { color:var(--ink); text-decoration:none; font-size:14px; font-weight:650; }.site-nav__links a:hover,.site-footer a:hover { color:var(--signal); }
.preview-badge { border:1px solid #f0c3ba; color:#a73a2c; border-radius:999px; padding:7px 10px; font-size:12px; font-weight:750; }
.site-footer { width:min(1180px,calc(100% - 40px)); margin:0 auto; min-height:80px; display:flex; align-items:center; justify-content:space-between; gap:20px; color:var(--ink-soft); font-size:13px; border-top:1px solid var(--line); }
.home-hero { width:min(1180px,calc(100% - 40px)); margin:0 auto; min-height:590px; display:grid; grid-template-columns:1.08fr .92fr; gap:50px; align-items:center; }
.home-kicker { margin:0 0 16px; color:var(--signal); font-size:13px; font-weight:800; letter-spacing:.025em; }.home-hero h1,.home-path h2,.home-boundary h2 { margin:0; font-family:Georgia,serif; letter-spacing:-.045em; }.home-hero h1 { max-width:650px; font-size:clamp(52px,7vw,88px); line-height:.92; }.home-hero__intro { max-width:590px; margin:28px 0; color:var(--ink-soft); font-size:18px; line-height:1.6; }.home-hero__actions { display:flex; gap:12px; flex-wrap:wrap; }.action-button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 19px; text-decoration:none; font-weight:800; }.action-button--primary { background:var(--signal); color:#fff; box-shadow:4px 4px 0 var(--ink); }.action-button--primary:hover { color:#fff; transform:translate(1px,1px); box-shadow:3px 3px 0 var(--ink); }.action-button--quiet { color:var(--ink); border:1px solid var(--ink); }.home-hero__note { color:var(--ink-soft); font-size:13px; margin-top:20px; }
.home-hero__visual { position:relative; min-height:405px; display:grid; place-items:center; }
.home-path { border-top:1px solid var(--line); background:var(--surface); padding:92px max(20px,calc((100% - 1180px)/2)); }.home-path__intro { max-width:590px; }.home-path h2,.home-boundary h2 { font-size:clamp(35px,4.2vw,54px); line-height:1; }.path-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:36px; list-style:none; padding:52px 0 0; margin:0; }.path-steps li { display:flex; gap:15px; padding-top:18px; border-top:2px solid var(--ink); }.path-steps span { color:var(--signal); font:700 20px Georgia,serif; }.path-steps h3 { margin:0 0 8px; font-size:17px; }.path-steps p,.home-boundary > p { margin:0; color:var(--ink-soft); line-height:1.55; }
.home-boundary { width:min(1180px,calc(100% - 40px)); margin:0 auto; padding:82px 0; display:grid; grid-template-columns:1.1fr .9fr; gap:80px; align-items:end; }.home-boundary > p { max-width:430px; font-size:17px; }
@media (max-width:760px) { .site-nav { min-height:66px; width:calc(100% - 28px); }.site-nav__links { display:none; }.preview-badge { margin-left:auto; }.home-hero { width:calc(100% - 40px); grid-template-columns:1fr; gap:14px; padding:64px 0 40px; }.home-hero__visual { min-height:285px; transform:scale(.74); transform-origin:top center; margin-bottom:-74px; }.home-path { padding:64px 20px; }.path-steps { grid-template-columns:1fr; gap:25px; padding-top:36px; }.home-boundary { width:calc(100% - 40px); display:block; padding:64px 0; }.home-boundary > p { margin-top:24px; }.site-footer { width:calc(100% - 40px); min-height:100px; align-items:flex-start; justify-content:center; flex-direction:column; gap:8px; padding:22px 0; } }

/* PokeCardProject visual language: dark album pages with a restrained gold accent. */
:root { --ink:#eef0f3; --ink-soft:#a9b1bf; --paper:#0d1520; --surface:#171a21; --surface-hover:#1e222b; --signal:#f4ce65; --gold:#f4ce65; --line:#2b3240; }
.site-header { background:var(--surface); }.site-brand { gap:11px; }.site-brand__mark { width:31px; height:37px; display:grid; place-items:center; background:var(--signal); color:#171a21; border:3px double #171a21; border-radius:5px; transform:rotate(-8deg); font-size:14px; }.site-brand strong { font-size:17px; letter-spacing:-.04em; }.site-brand small { color:var(--signal); font:700 11px Consolas,monospace; letter-spacing:1.5px; }.preview-badge { border-color:#5f5330; color:var(--signal); border-radius:6px; font:11px Consolas,monospace; }
.action-button--primary { color:#171a21; box-shadow:4px 4px 0 #000; }.action-button--primary:hover { color:#171a21; box-shadow:3px 3px 0 #000; }.action-button--quiet { border-color:var(--line); }.action-button--quiet:hover { border-color:var(--signal); color:var(--signal); }
.path-steps li { border-color:var(--line); }
.collection-workspace h1,.collection-workspace h2,.collection-workspace h3 { color:var(--ink); }.collection-workspace__header { border-color:var(--line); }.collection-workspace button,.import-button { background:var(--surface); border:1px solid var(--line); color:var(--ink); border-radius:6px; }.collection-workspace button:hover,.import-button:hover { border-color:var(--signal); }.import-button,.save-entry { background:var(--signal)!important; color:#171a21!important; border-color:var(--signal)!important; }.collection-form,.collection-list { background:var(--surface); border-color:var(--line); border-radius:8px; }.collection-form input,.collection-form select { background:var(--paper); color:var(--ink); border-color:var(--line); border-radius:6px; }.form-hint,.collection-entry p,.collection-entry small,.collection-list__heading span,.empty-state { color:var(--ink-soft); }.collection-list__heading,.collection-entry { border-color:var(--line); }.collection-entry button { background:#3a2024; color:var(--ink); border-color:#61323a; }

/* The catalog is a focused guest album: the server only supplies reference data. */
.catalog-workspace { min-height:calc(100vh - 156px); }.catalog-hero { width:min(1200px,100%); margin:auto; padding:55px 34px 36px; display:flex; justify-content:space-between; align-items:end; gap:30px; border-bottom:1px solid var(--line); }.catalog-hero h1 { margin:15px 0 10px; font-size:clamp(36px,4vw,60px); font-weight:750; letter-spacing:-2.5px; line-height:1.1; }.catalog-hero h1 span,.intro h2 span { color:var(--signal); }.catalog-hero p:not(.eyebrow) { margin:0; color:var(--ink-soft); }.catalog-tools { width:min(420px,100%); display:grid; gap:10px; }.catalog-tools>div { display:flex; gap:10px; flex-wrap:wrap; }.catalog-tools small { color:var(--ink-soft); line-height:1.5; }.quiet { border:1px solid var(--line); border-radius:6px; background:transparent; color:var(--ink); padding:9px 12px; font:inherit; font-size:12px; cursor:pointer; }.quiet:hover { border-color:var(--signal); }.import-label { position:relative; cursor:pointer; overflow:hidden; }.import-label input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.catalog-layout { max-width:1440px; margin:auto; display:grid; grid-template-columns:240px minmax(0,1fr); }.set-sidebar { padding:40px 24px; border-right:1px solid var(--line); }.set-sidebar h2 { color:var(--ink); font-size:18px; margin:16px 0 28px; }.set-sidebar nav { display:grid; gap:5px; }.set-button { width:100%; border:1px solid transparent; padding:13px 10px; background:transparent; color:var(--ink-soft); display:flex; gap:8px; align-items:center; text-align:left; border-radius:6px; cursor:pointer; }.set-button span { flex:1; }.set-button small { font:11px Consolas,monospace; }.set-button[aria-pressed=true] { background:#25271f; border-color:#5f5330; color:var(--signal); }.set-button:hover { background:var(--surface-hover); }.sidebar-note { margin-top:40px; border-top:1px solid var(--line); padding-top:24px; font-size:11px; line-height:1.7; color:var(--ink-soft); }.status-dot { display:inline-block; width:6px; height:6px; margin-right:4px; background:#91bfaa; border-radius:50%; }
.catalog { min-width:0; padding:38px 44px; }.intro { display:flex; justify-content:space-between; gap:16px; align-items:center; margin-bottom:28px; }.intro h2 { margin:15px 0; color:var(--ink); font-size:clamp(30px,3vw,44px); letter-spacing:-1.5px; }.intro-copy,.reference-note { color:var(--ink-soft); font-size:13px; line-height:1.65; }.album-stamp { flex-shrink:0; width:128px; padding:16px; border:1px solid #5f5330; outline:1px solid #5f5330; outline-offset:5px; color:var(--signal); text-align:center; transform:rotate(7deg); margin-right:10px; }.album-stamp span { display:block; font:8px Consolas,monospace; letter-spacing:1px; }.album-stamp strong { display:block; font:700 35px/1.05 Georgia,serif; margin:8px 0; }.progress-panel { display:flex; align-items:center; gap:44px; background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:22px 24px; margin-bottom:28px; }.progress-panel p { margin:8px 0 0; white-space:nowrap; }.progress-panel p strong { font-size:30px; }.progress-panel p span { color:var(--ink-soft); font-size:12px; }.progress-wrap { flex:1; min-width:0; }.progress-label { display:flex; justify-content:space-between; gap:12px; font-size:12px; margin-bottom:8px; color:var(--ink-soft); }.progress-label strong { color:var(--signal); }.progress-panel progress { width:100%; height:6px; border:0; border-radius:10px; overflow:hidden; background:var(--line); }.progress-panel progress::-webkit-progress-bar { background:var(--line); }.progress-panel progress::-webkit-progress-value { background:var(--signal); }.progress-panel progress::-moz-progress-bar { background:var(--signal); }
.catalog-controls { display:flex; gap:12px; }.search-label { flex:1; min-width:0; }.catalog-controls input,.catalog-controls select,.collection-dialog input { width:100%; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:6px; padding:12px; min-width:0; }.filters { display:flex; gap:6px; flex-wrap:wrap; padding:16px 0 8px; }.chip { color:var(--ink-soft); background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:9px 12px; cursor:pointer; }.chip:hover { background:var(--surface-hover); }.chip.active { background:var(--signal); border-color:var(--signal); color:#171a21; font-weight:700; }.filters [data-result-count] { margin-left:auto; font:11px Consolas,monospace; color:var(--ink-soft); align-self:center; }.card-list { display:grid; gap:10px; margin-top:18px; }.catalog-card { display:grid; grid-template-columns:82px minmax(0,1fr) auto; align-items:center; gap:22px; background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:16px 20px; }.catalog-card:hover { border-color:#525054; background:var(--surface-hover); }.card-preview { width:82px; height:114px; border:0; background:#222735; border-radius:4px; padding:0; overflow:hidden; color:var(--ink-soft); font-size:10px; cursor:pointer; }.card-preview img { width:100%; height:100%; object-fit:contain; display:block; }.card-info { min-width:0; }.card-info h2 { margin:8px 0; font-size:20px; letter-spacing:-.4px; }.title-button { padding:0; border:0; text-align:left; background:transparent; color:var(--ink); font:inherit; cursor:pointer; overflow-wrap:anywhere; }.card-number { font:11px Consolas,monospace; color:var(--ink-soft); }.rarity { color:var(--signal); font-size:11px; }.card-kind { color:var(--ink-soft); font-size:12px; margin-top:8px; }.card-actions { display:flex; flex-direction:column; align-items:stretch; gap:8px; }.collection-quantity { display:flex; align-items:center; justify-content:space-between; gap:8px; }.collection-quantity button,.collect-button,.wish-button { border:1px solid var(--line); background:transparent; color:var(--ink-soft); border-radius:5px; padding:8px 10px; font-size:11px; cursor:pointer; }.collection-quantity button:hover,.collect-button:hover,.wish-button:hover { border-color:var(--signal); color:var(--signal); }.wish-button[aria-pressed=true] { color:var(--signal); border-color:#6b5931; }.collection-quantity output { min-width:32px; text-align:center; color:var(--ink); }.empty { text-align:center; padding:50px 10px; color:var(--ink-soft); }.load-more { width:100%; margin-top:18px; padding:14px; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:6px; cursor:pointer; }
.collection-dialog { width:min(760px,calc(100% - 28px)); color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:35px; }.collection-dialog::backdrop { background:#000b; }.dialog-close { position:absolute; right:10px; top:8px; font-size:25px; color:var(--ink); background:transparent; border:0; cursor:pointer; }.dialog-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:30px; }.detail-image img { width:100%; height:auto; border-radius:8px; }.collection-dialog form { display:grid; gap:12px; }.collection-dialog h2,.collection-dialog p { margin:0; }.collection-dialog label { display:grid; gap:6px; font-size:12px; }.collection-dialog .check-label { display:flex; align-items:center; gap:8px; }.save { background:var(--signal); color:#171a21; padding:13px; border:0; border-radius:6px; font-weight:700; cursor:pointer; }
.collection-drawer { position:fixed; z-index:20; inset:0 0 0 auto; width:min(620px,44vw); max-width:620px; height:100vh; max-height:100vh; margin:0; box-sizing:border-box; border-radius:0; border-width:0 0 0 1px; padding:34px; overflow:auto; box-shadow:-18px 0 40px #0008; }.drawer-layout { display:grid; grid-template-columns:150px minmax(0,1fr); gap:26px; }.collection-drawer .detail-image { align-self:start; position:sticky; top:0; }.choice-set { margin:0; padding:0; border:0; }.choice-set legend { margin-bottom:8px; color:var(--ink); font-size:12px; font-weight:700; }.choice-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }.choice-grid.two { grid-template-columns:repeat(2,1fr); }.choice-grid.three { grid-template-columns:repeat(3,1fr); }.choice-grid button { min-height:48px; padding:7px; border:1px solid var(--line); border-radius:6px; background:var(--paper); color:var(--ink-soft); cursor:pointer; font-size:11px; }.choice-grid button b,.choice-grid button span { display:block; }.choice-grid button b { color:var(--ink); font-size:15px; margin-bottom:3px; }.choice-grid button[aria-pressed=true] { background:#25271f; border-color:#5f5330; color:var(--signal); }.choice-grid button[aria-pressed=true] b { color:var(--signal); }.local-photos { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.local-photos p { grid-column:1/-1; color:var(--ink); font-size:12px; font-weight:700; }.local-photos p small { color:var(--ink-soft); font-weight:400; }.local-photos input { font-size:10px; padding:8px; }.collection-drawer-open .catalog-workspace { box-sizing:border-box; padding-right:min(620px,44vw); transition:padding-right .18s ease; }
@media(min-width:1400px) { .card-list { grid-template-columns:repeat(2,minmax(0,1fr)); }.catalog-card { gap:14px; padding:16px; }.card-actions { grid-column:2; flex-direction:row; flex-wrap:wrap; } }
@media(max-width:1023px) and (min-width:721px) { .catalog-hero { padding:42px 26px 30px; }.catalog-layout { grid-template-columns:190px minmax(0,1fr); }.set-sidebar { padding:30px 15px; }.catalog { padding:30px 24px; }.collection-drawer { position:fixed; inset:7vh auto auto 50%; transform:translateX(-50%); width:min(680px,calc(100% - 48px)); height:auto; max-height:86vh; border:1px solid var(--line); border-radius:12px; }.collection-drawer .detail-image { position:static; } }
@media(max-width:720px) { .catalog-hero { padding:36px 16px 26px; display:block; }.catalog-tools { margin-top:24px; }.catalog-layout { display:block; }.set-sidebar { border:0; border-bottom:1px solid var(--line); padding:16px; }.set-sidebar>.eyebrow,.set-sidebar h2,.sidebar-note { display:none; }.set-sidebar nav { display:flex; overflow-x:auto; gap:8px; padding:3px 3px 9px; }.set-button { width:auto; flex:none; gap:12px; padding:10px; }.catalog { padding:25px 16px; }.album-stamp { width:95px; padding:10px; }.album-stamp strong { font-size:29px; }.intro-copy { font-size:13px; }.progress-panel { padding:18px; gap:18px; }.progress-label { font-size:10px; }.catalog-controls { flex-direction:column; }.catalog-card { gap:13px; padding:14px; grid-template-columns:66px minmax(0,1fr); }.card-preview { width:66px; height:92px; grid-row:span 2; }.card-info h2 { font-size:18px; }.card-actions { grid-column:2; flex-direction:row; flex-wrap:wrap; }.dialog-layout { grid-template-columns:1fr; }.detail-image { max-width:200px; margin:auto; }.collection-dialog { padding:30px 20px; }.collection-drawer { width:100%; max-width:100%; padding:24px 18px; }.drawer-layout { grid-template-columns:1fr; }.collection-drawer .detail-image { max-width:150px; margin:auto; }.local-photos { grid-template-columns:1fr; } }

/* Legal pages and footer: plain reading layout, reuses the site tokens so dark mode works for free. */
.legal-page { width:min(760px,calc(100% - 40px)); margin:0 auto; padding:64px 0 80px; color:var(--ink); line-height:1.65; }
.legal-page h1 { margin:6px 0 22px; font-family:Georgia,serif; font-size:clamp(38px,5vw,56px); letter-spacing:-.04em; line-height:1; }
.legal-page h1 span { color:var(--signal); }
.legal-page h2 { margin:38px 0 10px; font-size:19px; letter-spacing:-.01em; }
.legal-page p, .legal-page address { margin:0 0 12px; color:var(--ink-soft); font-style:normal; }
.legal-page a { color:var(--ink); text-underline-offset:3px; }
.legal-page code { font-size:.9em; }
.legal-page__lead { font-size:18px; color:var(--ink) !important; }
.legal-page__missing { padding:14px 16px; border-left:4px solid var(--signal); background:var(--surface); color:var(--ink) !important; }
.legal-page__stand { margin-top:32px !important; font-size:13px; }
.site-footer__text { display:flex; flex-direction:column; gap:4px; }
.site-footer__text small { font-size:12px; }
.site-footer__text small a { font-size:12px; font-weight:600; text-decoration:underline; }
.site-footer__links { display:flex; gap:20px; }

/* Auth pages (login, 2FA, logout, access denied). */
.auth-page { min-height:calc(100vh - 156px); display:grid; place-items:start center; padding:64px 20px 80px; }
.auth-card { width:min(440px,100%); box-sizing:border-box; padding:34px; background:var(--surface); border:1px solid var(--line); border-radius:10px; }
.auth-card--wide { width:min(640px,100%); }
.auth-card h1 { margin:0 0 10px; font-size:clamp(32px,4vw,44px); letter-spacing:-1.5px; }.auth-card h1 span { color:var(--signal); }
.auth-card h2 { margin:28px 0 8px; font-size:18px; }
.auth-card__sub { margin:0 0 14px; color:var(--ink-soft); line-height:1.55; font-size:14px; }
.auth-card__more { margin-top:20px; color:var(--ink-soft); font-size:13px; }.auth-card__more a,.auth-card__more summary { color:var(--ink); cursor:pointer; }
.auth-form { display:grid; gap:8px; margin-top:16px; }
.auth-form label { font-size:13px; font-weight:700; margin-top:6px; }
.auth-form input:not([type=checkbox]), .auth-form textarea { width:100%; box-sizing:border-box; padding:12px; background:var(--paper); color:var(--ink); border:1px solid var(--line); border-radius:6px; font:inherit; }
.auth-form .auth-form__check { display:flex; align-items:center; gap:8px; font-weight:400; }
.auth-form button { margin-top:10px; border:0; cursor:pointer; font:inherit; font-weight:800; }.auth-form .action-button--quiet { background:transparent; }
.auth-form__error { color:#e5735f; font-size:12px; }
.auth-alert { padding:12px 14px; border-left:4px solid var(--signal); background:var(--paper); font-size:14px; }.auth-alert--error { border-left-color:#e5735f; }
.auth-codes { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; padding:0; list-style:none; font-family:Consolas,monospace; }
.auth-qr svg { width:200px; height:200px; background:#fff; padding:8px; }

/* DE/EN switch in the header. */
.lang-switch { display:inline-flex; gap:2px; padding:2px; border:1px solid var(--line); border-radius:6px; }
.lang-switch a { padding:4px 8px; border-radius:4px; color:var(--ink-soft); text-decoration:none; font:700 11px Consolas,monospace; }
.lang-switch a[aria-current="true"] { background:var(--signal); color:#171a21; }

/* Collection filters: four selects plus search no longer fit one row on small screens. */
.catalog-controls { flex-wrap:wrap; }
.catalog-controls label:not(.search-label) { flex:1 1 160px; }
.catalog-controls .search-label { flex:2 1 260px; }

/* Administration: overview tiles, price form and the recent-price list (replaces inline styles). */
.admin-stats { width:min(1200px,100%); margin:auto; padding:30px 34px; box-sizing:border-box; display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; }
.admin-stat { background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:20px; display:grid; gap:8px; align-content:start; }
.admin-stat strong { font-size:34px; letter-spacing:-1px; }
.admin-stat strong small { font-size:16px; color:var(--ink-soft); font-weight:500; }
.admin-stat p { margin:0; color:var(--ink-soft); font-size:13px; }
.admin-stat--warning { border-color:var(--signal); }
.admin-stat__error { color:var(--signal)!important; overflow-wrap:anywhere; }
.admin-stat__list { list-style:none; margin:0; padding:0; display:grid; gap:4px; font-size:13px; }
.admin-stat__list li { display:flex; justify-content:space-between; gap:10px; color:var(--ink-soft); }
.admin-stat__list b { color:var(--ink); }
.admin-page { width:min(1200px,100%); margin:auto; padding:30px 34px; box-sizing:border-box; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:30px; align-items:start; }
.admin-page > .status-dot { grid-column:1 / -1; margin:0; }
.admin-form { background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:24px; display:grid; gap:14px; }
.admin-form h2,.admin-recent h2 { margin:0; font-size:22px; }
.admin-form h2 span,.admin-recent h2 span { color:var(--signal); }
.admin-form label { display:grid; gap:6px; font-size:13px; color:var(--ink-soft); }
.admin-form input,.admin-form select { width:100%; box-sizing:border-box; background:var(--bg,#171a21); color:var(--ink); border:1px solid var(--line); border-radius:6px; padding:11px; font:inherit; }
.admin-form__grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; }
.admin-form__actions { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.field-error { color:var(--signal); font-size:12px; }
.admin-price-row { display:flex; justify-content:space-between; gap:16px; padding:14px 16px; background:var(--surface); border:1px solid var(--line); border-radius:8px; color:var(--ink); text-decoration:none; }
.admin-price-row:hover,.admin-price-row:focus-visible { border-color:var(--signal); }
.admin-price-row p { margin:4px 0 0; color:var(--ink-soft); font-size:12px; }
.admin-price-row > div:last-child { text-align:right; white-space:nowrap; }
@media (max-width:900px) { .admin-page { grid-template-columns:1fr; padding:24px 16px; } .admin-stats { padding:24px 16px; } }

/* Design pass: header, links, focus and form polish on top of the dark theme, plus the phone fixes.
   Kept as one block at the end so it wins over the older rules above without touching them. */
.eyebrow { color:#f08a76; } /* the old #c53c2c red was too dark to read on the dark surfaces */
:where(a, button, input, select, summary):focus-visible { outline:2px solid var(--signal); outline-offset:2px; }

.site-header { position:sticky; top:0; z-index:10; box-shadow:0 1px 0 var(--line), 0 10px 30px #0004; }
.site-brand strong, .preview-badge { white-space:nowrap; }
.site-nav__links { align-items:center; }
.site-nav__links a { padding:6px 0; border-bottom:2px solid transparent; white-space:nowrap; }
.site-nav__links a[aria-current="page"] { color:var(--signal); border-bottom-color:var(--signal); }
.site-nav__links .site-nav__cta { padding:7px 14px; border:1px solid var(--signal); border-radius:6px; color:var(--signal); }
.site-nav__links .site-nav__cta:hover, .site-nav__links .site-nav__cta[aria-current="page"] { background:var(--signal); color:#171a21; }

.auth-card { border-top:3px solid var(--signal); box-shadow:0 24px 60px #0006; }
.auth-card a, .auth-card__more a { color:var(--signal); text-underline-offset:3px; }
.auth-card a:hover { text-decoration:underline; }
.auth-form input:not([type=checkbox]):focus { outline:none; border-color:var(--signal); box-shadow:0 0 0 3px #f4ce6533; }
.auth-form .auth-form__check { align-items:flex-start; line-height:1.45; }
.auth-form input[type=checkbox] { flex:none; width:18px; height:18px; margin:1px 0 0; accent-color:var(--signal); }
.auth-form small.auth-card__sub { margin:0; font-size:12px; }
.auth-form__error:empty { display:none; }
.auth-form .action-button { width:100%; border-radius:6px; }

/* Padding was added on top of 100% width, so /sammlung scrolled sideways on phones. */
.catalog-hero { box-sizing:border-box; }

/* The links used to be display:none on phones, which left them without any navigation. Below 960px they
   get their own swipeable row under the brand; brand, links, language and badge don't fit one row on tablets. */
@media (max-width:960px) {
  .site-nav { flex-wrap:wrap; gap:12px; padding-top:10px; }
  .site-nav__links { display:flex; order:3; width:100%; margin:0; gap:14px; overflow-x:auto; padding:0 0 10px; scrollbar-width:none; }
  .site-nav__links::-webkit-scrollbar { display:none; }
  .site-nav__links a { flex:none; font-size:13px; }
  .site-nav__links .site-nav__cta { padding:6px 10px; }
  .lang-switch { margin-left:auto; }
  .preview-badge { margin-left:0; }
  /* Two hero columns are too narrow here and the rotated middle card stuck out past the viewport;
     stacked, the cards also reach above their box, so the margin keeps them off the note. */
  .home-hero { grid-template-columns:1fr; min-height:0; padding:64px 0 40px; }
  .home-hero__visual { margin-top:40px; }
}
@media (max-width:760px) {
  .auth-page { padding:32px 16px 56px; }
  .auth-card { padding:26px 20px; }
}
/* Brand, language switch and badge don't fit one row on small phones; the preview gate already says it's private. */
@media (max-width:420px) { .preview-badge { display:none; } }
/* On the smallest phones the nav row would need a swipe to reach "Registrieren"; the brand already links home. */
@media (max-width:360px) { .site-nav__links > a:first-child { display:none; } }

/* Element filter: a <details> dropdown with checkboxes, styled like the selects next to it. */
.catalog-controls .multi-select-field { flex:1 1 160px; min-width:0; }
.multi-select { position:relative; }
.multi-select summary { display:flex; align-items:center; justify-content:space-between; gap:10px; list-style:none; cursor:pointer; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:6px; padding:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.multi-select summary::-webkit-details-marker { display:none; }
.multi-select summary::after { content:""; flex:none; width:7px; height:7px; border-right:2px solid var(--ink-soft); border-bottom:2px solid var(--ink-soft); transform:translateY(-2px) rotate(45deg); transition:transform .15s ease; }
.multi-select[open] summary { border-color:var(--signal); }
.multi-select[open] summary::after { transform:translateY(2px) rotate(-135deg); }
.multi-select__panel { position:absolute; z-index:15; top:calc(100% + 6px); left:0; right:0; min-width:220px; box-sizing:border-box; padding:10px; background:var(--surface); border:1px solid var(--line); border-radius:8px; box-shadow:0 18px 40px #0008; display:grid; gap:8px; }
.multi-select__options { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:2px; max-height:260px; overflow:auto; }
.multi-select__option { display:flex; align-items:center; gap:9px; padding:8px; border-radius:5px; cursor:pointer; font-size:14px; }
.multi-select__option:hover { background:var(--surface-hover); }
.multi-select__option input { flex:none; width:16px; height:16px; margin:0; accent-color:var(--signal); }
.multi-select__option:has(input:checked) { color:var(--signal); }
.multi-select__panel .quiet { justify-self:start; }

/* Home: the three ways, the sale step by step and the trust list. */
.home-path__intro > p:not(.home-kicker) { margin:18px 0 0; color:var(--ink-soft); font-size:17px; line-height:1.55; }
.path-steps a { display:inline-block; margin-top:12px; color:var(--signal); font-weight:700; font-size:14px; text-decoration:none; }
.path-steps a:hover { text-decoration:underline; text-underline-offset:3px; }
.home-sell { width:min(1180px,calc(100% - 40px)); margin:0 auto; padding:82px 0 0; display:grid; grid-template-columns:.8fr 1.2fr; gap:60px; align-items:start; }
.home-sell h2 { margin:0; font-family:Georgia,serif; font-size:clamp(32px,3.6vw,46px); letter-spacing:-.04em; line-height:1.05; }
.home-sell__intro > p:not(.home-kicker) { margin:18px 0 0; color:var(--ink-soft); line-height:1.6; }
.sell-steps { list-style:none; counter-reset:sell; margin:0; padding:0; display:grid; gap:14px; }
.sell-steps li { counter-increment:sell; position:relative; padding:18px 20px 18px 64px; background:var(--surface); border:1px solid var(--line); border-radius:8px; }
.sell-steps li::before { content:counter(sell); position:absolute; left:20px; top:16px; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:var(--signal); color:#171a21; font-weight:800; }
.sell-steps h3 { margin:0 0 6px; font-size:16px; }
.sell-steps p { margin:0; color:var(--ink-soft); line-height:1.55; font-size:14px; }
.trust-list { margin:0 0 16px; padding:0; list-style:none; display:grid; gap:12px; }
.trust-list li { position:relative; padding-left:26px; color:var(--ink-soft); line-height:1.55; }
.trust-list li::before { content:"✦"; position:absolute; left:0; color:var(--signal); }
.home-boundary a { color:var(--signal); font-weight:700; text-decoration:none; }
/* The old one-line teaser sat at the bottom; heading and list now start together. */
.home-boundary { align-items:start; }
@media (max-width:860px) { .home-sell { grid-template-columns:1fr; gap:28px; padding-top:64px; } .sell-steps li { padding-left:58px; } }

/* Privacy page: table of contents, overview table and cookie list. */
/* Terms: the test-phase notice sits above the table of contents and must not be overlooked. */
.legal-notice { margin:0 0 18px; padding:16px 20px; border:1px solid var(--cov-partial, #ffad42); border-left-width:4px; border-radius:8px; background:color-mix(in srgb, var(--cov-partial, #ffad42) 10%, var(--surface)); line-height:1.55; }
.legal-notice strong { display:block; margin-bottom:4px; color:var(--cov-partial, #ffad42); }
.legal-toc { margin:0 0 10px; padding:16px 20px; background:var(--surface); border:1px solid var(--line); border-radius:8px; }
.legal-toc ol { margin:0; padding-left:20px; columns:2; column-gap:28px; font-size:14px; line-height:1.9; }
.legal-toc a { color:var(--ink-soft); text-decoration:none; }
.legal-toc a:hover { color:var(--signal); }
.legal-page h2[id] { scroll-margin-top:100px; }
.legal-page ul { margin:0 0 12px; padding-left:20px; color:var(--ink-soft); }
.legal-page li { margin-bottom:6px; }
.legal-table { overflow-x:auto; margin:0 0 12px; border:1px solid var(--line); border-radius:8px; }
.legal-table table { width:100%; border-collapse:collapse; font-size:14px; }
.legal-table th, .legal-table td { padding:10px 12px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); }
.legal-table th { color:var(--ink); background:var(--surface); white-space:nowrap; }
.legal-table td { color:var(--ink-soft); }
.legal-table tr:last-child td { border-bottom:0; }
@media (max-width:560px) { .legal-toc ol { columns:1; } .legal-table table { min-width:520px; } }

/* Sell stack (/angebot), member area (/konto), marketplace and the request review. Same tokens as the album. */
/* Counts as a Pokéball: red top, black band, the number sits in the white button. site.js (window.pokeBall)
   adds is-bumped when the number changes, is-vanishing when a badge empties, is-empty at 0, plus a smoke puff. */
.poke-ball { position:relative; display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 3px; box-sizing:border-box; vertical-align:middle; border:1.5px solid #15171c; border-radius:11px;
  background:radial-gradient(circle at 32% 26%, #fff8 0 2px, transparent 3px), linear-gradient(#ee3b2c 0 calc(50% - 1px), #15171c calc(50% - 1px) calc(50% + 1px), #f3f3f3 calc(50% + 1px));
  box-shadow:inset -2px -2px 0 #0003, 0 2px 6px #0007; }
.poke-ball[hidden] { display:none; }
.poke-ball__num { position:relative; z-index:1; min-width:12px; height:12px; padding:0 2px; box-sizing:border-box; display:grid; place-items:center; border:1.5px solid #15171c; border-radius:7px; background:#fff; color:#15171c; font:800 8.5px/1 system-ui,sans-serif; }
.poke-ball.is-bumped { animation:ball-bump .6s cubic-bezier(.3,1.6,.5,1); }
.poke-ball.is-vanishing { animation:ball-vanish .5s ease-in forwards; }
a:has(> .poke-ball) { position:relative; }
.poke-ball__smoke { position:absolute; z-index:2; width:0; height:0; pointer-events:none; }
.poke-ball__smoke i { position:absolute; left:-7px; top:-7px; width:14px; height:14px; border-radius:50%; background:radial-gradient(circle, #f2f2f2 0 35%, #c9ccd1cc 60%, transparent 72%); animation:ball-smoke .8s ease-out forwards; }
@keyframes ball-wobble { 0%, 14%, 100% { rotate:0deg; } 3% { rotate:-16deg; } 7% { rotate:13deg; } 10% { rotate:-6deg; } }
@keyframes ball-bump { 0% { scale:1; } 30% { scale:1.4 .8; } 55% { scale:.9 1.15; } 100% { scale:1; } }
@keyframes ball-vanish { 40% { scale:1.25; opacity:1; } 100% { scale:0; opacity:0; } }
@keyframes ball-smoke { 0% { opacity:.95; transform:scale(.3); } 100% { opacity:0; transform:translate(var(--dx), var(--dy)) scale(calc(var(--s) * 1.8)); } }
/* Header badge wobbles now and then like a ball mid-catch; the album balls only when hovered. */
.nav-badge { margin-left:5px; animation:ball-wobble 5s ease-in-out 2s infinite; }
.poke-ball.is-empty { background:radial-gradient(circle at 32% 26%, #fff6 0 2px, transparent 3px), linear-gradient(#5b616e 0 calc(50% - 1px), #15171c calc(50% - 1px) calc(50% + 1px), #c9ccd3 calc(50% + 1px)); opacity:.75; }
.poke-ball--lg { min-width:40px; height:40px; padding:0 5px; border-width:2px; border-radius:20px; }
.poke-ball--lg .poke-ball__num { min-width:20px; height:20px; padding:0 4px; border-width:2px; border-radius:11px; font-size:12px; }
.poke-ball--md { min-width:30px; height:30px; padding:0 4px; border-radius:15px; }
.poke-ball--md .poke-ball__num { min-width:16px; height:16px; border-radius:9px; font-size:10.5px; }
.collection-quantity { position:relative; }
.collection-quantity output.poke-ball { min-width:40px; font-size:inherit; line-height:1; }
/* Selling and marketplace switches stay locked until the card is in the album (collection.js). */
.collect-button:disabled, [data-dialog-sell]:disabled { opacity:.4; cursor:not-allowed; }
.collect-button:disabled:hover, [data-dialog-sell]:disabled:hover { border-color:var(--line); color:var(--ink-soft); }
.listing-set:disabled { opacity:.45; }
[data-dialog-album-hint] { margin:4px 0 0; }
.collection-quantity:hover .poke-ball:not(.is-empty, .is-bumped) { animation:ball-wobble 1.6s ease-in-out; }
.trade-picker__count { position:relative; display:inline-flex; align-items:center; gap:6px; }
[data-owned-count] { position:relative; display:inline-block; }
[data-owned-count].is-bumped { animation:ball-bump .6s cubic-bezier(.3,1.6,.5,1); }
@media (prefers-reduced-motion: reduce) { .poke-ball, .poke-ball.is-bumped, .nav-badge, [data-owned-count].is-bumped { animation:none; } }
.member-page { width:min(1200px,100%); margin:auto; padding:30px 34px 60px; box-sizing:border-box; display:grid; gap:28px; }
.member-section { display:grid; gap:12px; }
.member-section h2, .offer-stack h2, .section-head h2 { margin:0; font-size:22px; }
.member-section h2 span, .offer-stack h2 span, .section-head h2 span { color:var(--signal); }
.member-section p { margin:0; color:var(--ink-soft); }
.member-list { display:grid; gap:10px; }
.member-name { max-width:520px; margin-top:8px; }
.empty-note { color:var(--ink-soft); }
.empty-note a, .member-page a:not([class]), .auth-alert a { color:var(--signal); }
.section-head { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.status-pill { display:inline-block; padding:3px 9px; border:1px solid var(--line); border-radius:999px; color:var(--ink-soft); font-size:11px; font-weight:700; white-space:nowrap; }
.status-pill--quoteready, .status-pill--open, .status-pill--accepted, .status-pill--own { border-color:#5f5330; color:var(--signal); background:#25271f; }
.status-pill--paid { border-color:#3d6a55; color:#91bfaa; }
.status-pill--rejected, .status-pill--declined, .status-pill--cancelled, .status-pill--expired, .status-pill--withdrawn { color:#d98b7c; border-color:#61323a; }
blockquote { margin:0; padding:10px 14px; border-left:3px solid var(--signal); background:var(--surface); color:var(--ink); border-radius:0 6px 6px 0; overflow-wrap:anywhere; }
.admin-form textarea, .member-page textarea { width:100%; box-sizing:border-box; background:var(--paper); color:var(--ink); border:1px solid var(--line); border-radius:6px; padding:11px; font:inherit; resize:vertical; }
.validation-summary.validation-summary-valid { display:none; }
.validation-summary ul { margin:0; padding-left:18px; }

.offer-layout { width:min(1200px,100%); margin:auto; padding:30px 34px 60px; box-sizing:border-box; display:grid; grid-template-columns:minmax(0,1.4fr) minmax(300px,1fr); gap:30px; align-items:start; }
.offer-stack { display:grid; gap:14px; }
.offer-rows { display:grid; gap:10px; }
.offer-row, .review-line { display:grid; grid-template-columns:62px minmax(0,1fr) auto; gap:16px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:12px 16px; }
.offer-row__image { width:62px; height:86px; background:#222735; border-radius:4px; overflow:hidden; }
.offer-row__image img { width:100%; height:100%; object-fit:contain; display:block; }
.offer-row__info { min-width:0; display:grid; gap:5px; }
.offer-row__info strong { overflow-wrap:anywhere; }
.offer-row__variant { display:flex; gap:6px; flex-wrap:wrap; }
.offer-row select, .offer-row input { background:var(--paper); color:var(--ink); border:1px solid var(--line); border-radius:6px; padding:7px; font:inherit; font-size:12px; }
.offer-row input[type=number] { width:70px; }
.offer-row__side { display:grid; justify-items:end; gap:6px; text-align:right; }
.offer-row__side small { color:var(--ink-soft); font-size:11px; }
.offer-row__price { color:var(--signal); font-weight:750; white-space:nowrap; }
.offer-total { display:grid; gap:6px; background:var(--surface); border:1px solid #5f5330; border-radius:8px; padding:18px 20px; }
.offer-total strong { font-size:30px; color:var(--signal); }
.offer-total > div { display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; }
.offer-send { position:sticky; top:100px; }
/* Server-rendered stack rows: the variant is read-only (it is the album's), quantity saves on change (offer.js). */
.offer-row__variant-text { color:var(--ink-soft); font-size:13px; }
.offer-row__album { justify-self:start; color:var(--signal); font-size:12px; text-decoration:none; }
.offer-row__album:hover { text-decoration:underline; text-underline-offset:3px; }
.offer-row__quantity { display:flex; align-items:center; gap:8px; }
.offer-row__quantity label { display:contents; }
.offer-row__price small { display:block; color:var(--ink-soft); font-weight:500; font-size:11px; }
.offer-row__side form { margin:0; }
.offer-layout--guest { grid-template-columns:minmax(0, 640px); }
.sell-decision { margin-top:6px; }

.inquiry { display:grid; gap:8px; background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:16px 18px; }
.inquiry header { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.inquiry header p { margin:4px 0 0; }
.inquiry__contact { color:var(--ink)!important; }
.inquiry__respond { display:grid; gap:10px; margin-top:4px; }
.inquiry__respond label { display:grid; gap:6px; font-size:13px; color:var(--ink-soft); }
.history { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.history li { padding-left:14px; border-left:2px solid var(--line); }
.history li p { margin:4px 0 0; }

.market-filter { flex-wrap:wrap; }
.market-filter label:not(.search-label) { flex:0 0 200px; }
.market-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px; }
.market-card { display:grid; grid-template-columns:80px minmax(0,1fr); gap:14px; background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:14px; color:var(--ink); text-decoration:none; }
.market-card:hover, .market-card:focus-visible { border-color:var(--signal); background:var(--surface-hover); }
.market-card__image { width:80px; height:111px; background:#222735; border-radius:4px; overflow:hidden; }
.market-card__image img { width:100%; height:100%; object-fit:contain; display:block; }
.market-card__body { min-width:0; display:grid; gap:4px; align-content:start; }
.market-card__body strong { font-size:17px; overflow-wrap:anywhere; }
.market-card__body small { color:var(--ink-soft); }
.market-card__tags { display:flex; gap:5px; flex-wrap:wrap; }
.market-card__price { color:var(--signal); font-weight:750; }
.market-card .card-kind { margin-top:0; }
.pager { display:flex; justify-content:center; align-items:center; gap:14px; }
.pager .quiet { text-decoration:none; }
.listing-layout { grid-template-columns:minmax(200px,320px) minmax(0,1fr); align-items:start; }
.listing-image img { width:100%; height:auto; border-radius:10px; }
.listing-body { display:grid; gap:16px; }
.listing-facts { display:grid; grid-template-columns:max-content minmax(0,1fr); gap:8px 18px; margin:0; }
.listing-facts dt { color:var(--ink-soft); font-size:13px; }
.listing-facts dd { margin:0; display:flex; gap:6px; flex-wrap:wrap; }
.kind-choice { border:0; margin:0; padding:0; display:flex; gap:18px; flex-wrap:wrap; }
.kind-choice legend { color:var(--ink-soft); font-size:13px; margin-bottom:6px; }
.check-label { display:flex!important; align-items:center; gap:8px; color:var(--ink)!important; }
.check-label input { width:auto!important; accent-color:var(--signal); }
.listed-tag { display:inline-block; margin-top:6px; color:var(--signal); font-size:11px; font-weight:700; }
.listing-set { display:grid; gap:8px; padding:12px; border:1px solid var(--line); border-radius:8px; }
.listing-set small { color:var(--ink-soft); font-size:11px; line-height:1.5; }
.collection-dialog .quiet[data-dialog-sell] { padding:12px; }

.review-lines { display:grid; gap:10px; }
.review-line { grid-template-columns:62px minmax(0,1fr) minmax(220px,300px); align-items:start; }
.review-line--accepted { border-color:#3d6a55; }
.review-line--rejected { opacity:.7; }
.review-line--manualreview { border-color:#5f5330; }
.review-line__form { display:grid; gap:8px; }
.review-line__form label { display:grid; gap:4px; font-size:12px; color:var(--ink-soft); }
.review-line__form input { width:100%; box-sizing:border-box; background:var(--paper); color:var(--ink); border:1px solid var(--line); border-radius:6px; padding:9px; font:inherit; }
.review-line .offer-row__info a { color:var(--signal); }
.admin-page--flush { width:100%; padding:0; }
.admin-stat strong a { color:inherit; text-decoration:none; }

@media (max-width:900px) {
  .offer-layout, .listing-layout { grid-template-columns:1fr; padding:24px 16px 48px; }
  .member-page { padding:24px 16px 48px; }
  .offer-send { position:static; }
  .listing-image { max-width:240px; }
  .review-line { grid-template-columns:62px minmax(0,1fr); }
  .review-line__form { grid-column:1 / -1; }
}
@media (max-width:560px) {
  .offer-row { grid-template-columns:52px minmax(0,1fr); }
  .offer-row__image { width:52px; height:72px; }
  .offer-row__side { grid-column:1 / -1; grid-template-columns:auto 1fr auto; align-items:center; justify-items:start; text-align:left; }
  .inquiry header { flex-direction:column; }
  .market-filter label:not(.search-label) { flex:1 1 100%; }
}

/* Album: bigger quantity stepper — the old 11px buttons were hard to hit, especially on phones. */
.collection-quantity { gap:6px; }
.collection-quantity button { min-width:44px; min-height:44px; padding:0; font-size:22px; line-height:1; font-weight:700; color:var(--ink); border-radius:8px; }
.collection-quantity button:disabled { opacity:.35; cursor:default; }
.collection-quantity button:disabled:hover { border-color:var(--line); color:var(--ink); }
.collection-quantity output { min-width:48px; line-height:1; font-size:20px; font-weight:700; }

/* Album: card kind tinted by the element, roughly the energy colours on the cards. */
.card-kind[data-element] { display:block; width:fit-content; padding:4px 10px; border-radius:999px; font-weight:700; color:#fff; background:#5a6270; }
.card-kind[data-element=Grass] { background:#3b8f3a; }
.card-kind[data-element=Fire] { background:#d23a2a; }
.card-kind[data-element=Water] { background:#2a74c9; }
.card-kind[data-element=Lightning] { background:#f2c418; color:#1d1a0c; }
.card-kind[data-element=Psychic] { background:#8a46b8; }
.card-kind[data-element=Fighting] { background:#a85a26; }
.card-kind[data-element=Darkness] { background:#2c3640; box-shadow:inset 0 0 0 1px #56616c; }
.card-kind[data-element=Metal] { background:#808c97; color:#14181d; }
.card-kind[data-element=Dragon] { background:#b08a28; color:#1d1a0c; }
.card-kind[data-element=Fairy] { background:#de6ea6; }
.card-kind[data-element=Colorless] { background:#e6e3d8; color:#2a2a26; }
.card-kind[data-element=trainer],.card-kind[data-element=energy] { background:transparent; color:var(--ink-soft); box-shadow:inset 0 0 0 1px var(--line); }

/* Marketplace: trade offer picked from the own album instead of free text. */
.kind-section { display:grid; gap:6px; }
.kind-section[hidden] { display:none; }
.trade-picker { border:1px solid var(--line); border-radius:8px; margin:0; padding:16px; min-width:0; }
.trade-picker legend { padding:0 6px; color:var(--ink); font-weight:700; font-size:14px; }
.trade-picker__hint { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin:0 0 4px; color:var(--ink-soft); font-size:13px; line-height:1.5; }
.trade-picker__count { color:var(--signal); white-space:nowrap; font-size:14px; }
.admin-form .trade-picker__search { margin:4px 0 6px; background:var(--paper); }
.trade-picker__grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:8px; max-height:460px; overflow:auto; padding:2px; }
.admin-form label.trade-option { position:relative; display:grid; grid-template-columns:52px minmax(0,1fr); gap:10px; align-items:center; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--paper); color:var(--ink); cursor:pointer; }
.admin-form label.trade-option[hidden] { display:none; }
.trade-option:hover { border-color:var(--ink-soft); }
.admin-form .trade-option input { position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.trade-option:has(input:focus-visible) { outline:2px solid var(--signal); outline-offset:2px; }
.trade-option.is-selected,.trade-option:has(input:checked) { border-color:var(--signal); box-shadow:inset 0 0 0 1px var(--signal); }
.trade-option.is-selected::after,.trade-option:has(input:checked)::after { content:"✓"; position:absolute; top:6px; right:8px; width:20px; height:20px; display:grid; place-items:center; border-radius:50%; background:var(--signal); color:#171a21; font-size:12px; font-weight:800; }
.trade-option:has(input:disabled) { opacity:.45; cursor:not-allowed; }
.trade-option__image { width:52px; height:72px; border-radius:4px; overflow:hidden; background:#222735; }
.trade-option__image img { width:100%; height:100%; object-fit:cover; display:block; }
.trade-option__body { display:grid; gap:2px; min-width:0; padding-right:18px; }
.trade-option__body strong { font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.trade-option__body small { color:var(--ink-soft); font-size:11px; line-height:1.4; }

/* Offered cards inside a request on /konto. */
.offered-cards { display:grid; gap:8px; margin:4px 0; }
.offered-cards > p { margin:0; color:var(--ink-soft); font-size:13px; }
.offered-cards ul { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:8px; }
.offered-card { display:grid; grid-template-columns:52px minmax(0,1fr); gap:10px; align-items:center; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--paper); }
.offered-card strong { display:block; font-size:14px; }
.offered-card small { display:block; color:var(--ink-soft); font-size:11px; line-height:1.4; }

/* Home, modern pass: real cards, glow and motion. Everything that moves stops under prefers-reduced-motion.
   Entrance animations use `translate`, hovers use `transform`, so the two never fight over one property. */
main:has(> .home-hero) { overflow-x:clip; } /* only the start page: the full-bleed glow and tilted cards may reach past the viewport; other pages keep their own table scrolling */
.home-hero { position:relative; isolation:isolate; }
.home-hero::before { content:""; position:absolute; z-index:-1; inset:0 calc(50% - 50vw); pointer-events:none;
  background:radial-gradient(620px 440px at 78% 48%, #f4ce6524, transparent 70%), radial-gradient(520px 380px at 8% 18%, #3d7bd626, transparent 70%), radial-gradient(#ffffff10 1px, transparent 1px) 0 0/26px 26px;
  -webkit-mask-image:linear-gradient(#000 65%, transparent); mask-image:linear-gradient(#000 65%, transparent); }
.home-hero__copy > * { animation:rise .8s cubic-bezier(.2,.7,.2,1) both; }
.home-hero__copy > :nth-child(2) { animation-delay:.08s; }
.home-hero__copy > :nth-child(3) { animation-delay:.16s; }
.home-hero__copy > :nth-child(4) { animation-delay:.24s; }
.home-hero__copy > :nth-child(5) { animation-delay:.32s; }
.home-hero__shimmer { background:linear-gradient(100deg, var(--signal) 20%, #fff3c4 40%, #ff9f5a 58%, var(--signal) 80%) 0 0/220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:shimmer 5s ease-in-out infinite alternate; }
@keyframes rise { from { opacity:0; translate:0 24px; } }
@keyframes shimmer { to { background-position:100% 0; } }

/* Buttons everywhere get the rounder, glossier look; the gradient follows --signal, so the blue admin zone gets blue buttons. */
.action-button { border-radius:10px; transition:transform .2s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease, background-color .2s ease; }
.action-button--primary { position:relative; overflow:hidden; background:linear-gradient(135deg, color-mix(in srgb, var(--signal) 55%, #fff), var(--signal) 45%, color-mix(in srgb, var(--signal) 82%, #7a3d00)); box-shadow:0 10px 30px color-mix(in srgb, var(--signal) 20%, transparent), inset 0 1px 0 #fff8; }
.action-button--primary:hover { transform:translateY(-2px); box-shadow:0 16px 40px color-mix(in srgb, var(--signal) 33%, transparent), inset 0 1px 0 #fff8; }
.action-button--primary::after { content:""; position:absolute; inset:0; background:linear-gradient(110deg, transparent 35%, #fffa 50%, transparent 65%); translate:-120% 0; transition:translate .7s ease; }
.action-button--primary:hover::after { translate:120% 0; }
.action-button--quiet { background:#ffffff08; }
.action-button--quiet:hover { transform:translateY(-2px); }

/* Hero fan: three real holo cards dealt in, floating, tilting under the pointer (home.js sets --rx/--ry/--mx/--my). */
.home-hero__visual { min-height:470px; perspective:1200px; }
.hero-glow { position:absolute; width:360px; height:360px; border-radius:50%; background:conic-gradient(#f4ce65, #ff6b4a, #7b5cff, #3fb6ff, #f4ce65); filter:blur(72px); opacity:.33; animation:spin 18s linear infinite; }
.hero-card { position:absolute; width:240px; aspect-ratio:245 / 342; animation:deal .9s cubic-bezier(.2,.8,.2,1) both, float 6s ease-in-out infinite; }
.hero-card--back { translate:-96px -16px; rotate:-12deg; animation-delay:.15s, 0s; }
.hero-card--middle { translate:96px -2px; rotate:10deg; animation-delay:.3s, -2s; }
.hero-card--front { z-index:2; translate:0 24px; animation-delay:.45s, -4s; }
.hero-card:hover { z-index:3; } /* peek at the back cards: the hovered one comes forward */
.hero-card__body { position:relative; height:100%; border-radius:11px; overflow:hidden; box-shadow:0 30px 60px #000a, 0 0 0 1px #ffffff1c; transform:rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition:transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .3s; will-change:transform; }
.hero-card__body.is-tilting { transition:transform .08s linear, box-shadow .3s; box-shadow:0 40px 80px #000c, 0 0 0 1px #f4ce6566, 0 0 60px #f4ce6533; }
.hero-card__body img { display:block; width:100%; height:100%; object-fit:cover; }
.hero-card__shine { position:absolute; inset:0; pointer-events:none; mix-blend-mode:color-dodge; opacity:0; transition:opacity .3s;
  background:radial-gradient(circle at var(--mx, 50%) var(--my, 50%), #ffffffa0, transparent 45%), linear-gradient(115deg, transparent 20%, #ff6b8a66 35%, #ffd76a66 45%, #6bffd866 55%, #6b8aff66 65%, transparent 80%);
  background-size:100% 100%, 250% 250%; background-position:center, var(--mx, 50%) var(--my, 50%); }
.hero-card--front .hero-card__shine { opacity:.35; animation:sheen 5s ease-in-out infinite alternate; }
.hero-card__body.is-tilting .hero-card__shine { opacity:.8; animation:none; }
.hero-chip { position:absolute; z-index:4; display:inline-flex; align-items:center; gap:8px; padding:10px 15px; border-radius:999px; background:#171a21d0; border:1px solid #ffffff1f; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 12px 30px #0007; font-size:13px; font-weight:700; white-space:nowrap; animation:rise .8s .95s both, float 7s ease-in-out infinite; }
.hero-chip b { color:var(--signal); }
.hero-chip--top { top:4%; right:0; }
.hero-chip--bottom { bottom:2%; left:0; animation-delay:1.1s, -3s; }
@keyframes deal { from { opacity:0; translate:0 160px; rotate:0deg; scale:.85; } }
@keyframes float { 50% { transform:translateY(-12px); } }
@keyframes spin { to { rotate:360deg; } }
@keyframes sheen { from { background-position:center, 0% 0%; } to { background-position:center, 100% 100%; } }

/* Shelf: endless row of catalog cards. The track holds the list twice, so -50% (plus half a gap) lands on the copy. */
.home-shelf { padding:40px 0 96px; }
.home-shelf__intro { width:min(1180px, calc(100% - 40px)); margin:0 auto 28px; }
.home-shelf h2 { margin:0; max-width:720px; font-family:Georgia,serif; font-size:clamp(30px,3.4vw,44px); letter-spacing:-.04em; line-height:1.05; }
.card-marquee { overflow:hidden; padding:24px 0 30px; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.card-marquee__track { display:flex; align-items:flex-start; gap:22px; width:max-content; animation:marquee 70s linear infinite; }
.card-marquee:hover .card-marquee__track { animation-play-state:paused; }
@keyframes marquee { to { translate:calc(-50% - 11px) 0; } }
.shelf-card { flex:none; width:168px; margin:0; transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.shelf-card:nth-child(even) { margin-top:28px; } /* 12 cards per pass, so the zigzag lines up at the seam too */
.shelf-card img { display:block; width:100%; height:auto; border-radius:8px; box-shadow:0 16px 34px #0009; transition:box-shadow .35s, transform .35s cubic-bezier(.2,.8,.2,1); }
.shelf-card:hover { transform:translateY(-10px); }
.shelf-card:hover img { transform:rotate(-2deg) scale(1.04); box-shadow:0 22px 50px #000b, 0 0 0 2px var(--signal), 0 0 40px #f4ce6544; }
.shelf-card figcaption { margin-top:12px; font-size:14px; font-weight:700; }
.shelf-card small { display:block; margin-top:2px; color:var(--ink-soft); font-size:12px; font-weight:500; }

/* Steps as cards with a little lift and a gradient edge on hover. */
.home-path { background:linear-gradient(180deg, var(--surface), var(--paper)); }
.path-steps li { position:relative; overflow:hidden; flex-direction:column; gap:14px; padding:28px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(160deg, #ffffff0a, transparent 60%), var(--surface); transition:transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s; }
.path-steps li::before { content:""; position:absolute; inset:0 0 auto; height:3px; background:linear-gradient(90deg, var(--signal), #ff7a59, #7b5cff); transform:scaleX(0); transform-origin:left; transition:transform .45s ease; }
.path-steps li:hover { transform:translateY(-6px); border-color:#f4ce6555; box-shadow:0 24px 50px #0007; }
.path-steps li:hover::before { transform:scaleX(1); }
.path-steps span { width:44px; height:44px; display:grid; place-items:center; border:1px solid #f4ce6544; border-radius:12px; background:#f4ce651a; }
.sell-steps li { border-radius:14px; transition:transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s; }
.sell-steps li:hover { transform:translateX(6px); border-color:#f4ce6555; }
.sell-steps li::before { box-shadow:0 0 0 6px #f4ce651a; }

/* Sections fade up as they scroll in. Scroll-driven, no JS; browsers without view() just show them as before. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-reveal]:not(ol), ol[data-reveal] > li { animation:rise linear both; animation-timeline:view(); animation-range:entry 0% entry 55%; }
  }
}

@media (max-width:760px) {
  .home-hero__visual { min-height:400px; transform:none; margin-bottom:0; } /* drops the old scale(.74) for the placeholder cards */
  .hero-card { width:190px; }
  .hero-card--back { translate:-70px -12px; }
  .hero-card--middle { translate:70px 0; }
  .hero-glow { width:250px; height:250px; }
  .hero-chip { font-size:12px; padding:8px 12px; }
  .home-shelf { padding:24px 0 64px; }
  .shelf-card { width:132px; }
  .path-steps li { padding:22px; }
}
@media (max-width:420px) {
  .hero-card { width:165px; }
  .hero-card--back { translate:-56px -10px; }
  .hero-card--middle { translate:56px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .home-hero__copy > *, .home-hero__shimmer, .hero-glow, .hero-card, .hero-chip, .hero-card--front .hero-card__shine, .card-marquee__track { animation:none; }
  .card-marquee { overflow-x:auto; }
}

.visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Admin zone: everything under /Admin swaps the gold for a cool blue, gets a striped banner and a tinted
   header, so it never looks like the public site. The tokens are redefined on body.zone-admin. */
body.zone-admin { --paper:#0b1020; --surface:#131a2e; --surface-hover:#1a2340; --line:#28335a; --signal:#8fa8ff; --gold:#8fa8ff; --ink-soft:#a3adc8; }
.zone-admin .site-header { background:linear-gradient(180deg, #161f3a, #121a30); box-shadow:0 1px 0 #3a4a8a, 0 10px 30px #0006; }
.zone-admin .site-brand__mark { background:var(--signal); }
.zone-admin .site-brand small { color:var(--signal); }
.admin-zone-bar { display:flex; align-items:center; gap:14px; padding:7px max(20px, calc((100% - 1180px) / 2)); font-size:12.5px; color:#dfe6ff;
  background:repeating-linear-gradient(-45deg, #2b3a7a 0 12px, #24326a 12px 24px); border-bottom:1px solid #4a5fb0; }
.admin-zone-bar__label { display:inline-flex; align-items:center; gap:7px; padding:3px 10px; border-radius:999px; background:#0b1020; color:var(--signal); font-weight:800; letter-spacing:.06em; text-transform:uppercase; font-size:11px; box-shadow:0 0 0 1px #4a5fb0; }
.admin-zone-bar__hint { color:#c4cdef; }
.admin-zone-bar__exit { margin-left:auto; color:#fff; font-weight:700; text-decoration:none; white-space:nowrap; }
.admin-zone-bar__exit:hover { text-decoration:underline; text-underline-offset:3px; }
.zone-admin .catalog-hero h1 span, .zone-admin .admin-form h2 span { color:var(--signal); }
@media (max-width:760px) { .admin-zone-bar__hint { display:none; } }

/* Coverage colours for the price maintenance status: none red, partial orange, complete green. */
:root { --cov-none:#ff6b6b; --cov-partial:#ffad42; --cov-complete:#4fd18b; }
.coverage-pill { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; font:800 12px/1.3 Consolas,monospace; white-space:nowrap; border:1px solid currentColor; background:color-mix(in srgb, currentColor 14%, transparent); }
.coverage-pill::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 8px currentColor; }
.coverage-pill--none { color:var(--cov-none); }
.coverage-pill--partial { color:var(--cov-partial); }
.coverage-pill--complete { color:var(--cov-complete); }
.coverage-pill--big { font-size:15px; padding:6px 13px; }
.price-flash { margin:0 0 16px; padding:12px 16px; border:1px solid #3d7a5c; border-radius:10px; background:#12291f; color:#a9f0c8; }

/* Overview: set list with progress on the left, card tiles on the right. */
.price-tools { display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.price-layout { max-width:1440px; margin:auto; display:grid; grid-template-columns:260px minmax(0,1fr); }
.price-sets { padding:28px 18px; border-right:1px solid var(--line); display:grid; gap:6px; align-content:start; }
.price-set { display:grid; grid-template-columns:1fr auto; gap:6px 10px; padding:11px 12px; border:1px solid transparent; border-radius:10px; color:var(--ink); text-decoration:none; transition:background-color .2s, border-color .2s; }
.price-set:hover { background:var(--surface-hover); }
.price-set[aria-current="page"] { background:var(--surface); border-color:var(--signal); }
.price-set__name { font-size:14px; font-weight:700; }
.price-set__name small { color:var(--ink-soft); font-weight:500; margin-left:4px; }
.price-set__count { font:11px Consolas,monospace; color:var(--ink-soft); align-self:center; }
.price-bar { grid-column:1 / -1; height:5px; border-radius:3px; background:#ffffff12; overflow:hidden; }
.price-bar__fill { display:block; height:100%; border-radius:inherit; transition:width .6s ease; }
.price-set--none .price-bar__fill { background:var(--cov-none); }
.price-set--partial .price-bar__fill { background:var(--cov-partial); }
.price-set--complete .price-bar__fill { background:var(--cov-complete); }
.price-main { padding:28px 30px 60px; min-width:0; }
.price-main__head { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.price-main__head h2 { margin:0; font-size:28px; letter-spacing:-.03em; }
.price-main__head h2 span { color:var(--signal); }
.price-main__head p { margin:6px 0 0; color:var(--ink-soft); font-size:14px; }
.price-filter { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:22px 0 18px; }
.price-filter input[type=search] { flex:1 1 220px; min-width:0; padding:11px 12px; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:8px; }
.price-filter__chips { display:flex; gap:6px; flex-wrap:wrap; }
.price-filter .chip { text-decoration:none; font-size:13px; }
.price-filter .chip--none { color:var(--cov-none); }
.price-filter .chip--partial { color:var(--cov-partial); }
.price-filter .chip--complete { color:var(--cov-complete); }
.price-filter .chip.active { color:#171a21; } /* the coverage colours above would sit on the --signal fill */
/* Admin request search: dates and sort sit next to the search box and wrap on small screens. */
.request-filter label { display:flex; gap:6px; align-items:center; font-size:12px; color:var(--ink-soft); }
.request-filter input[type=date],.request-filter select { padding:10px; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:8px; font:inherit; }
.audit-detail { margin:4px 0 0; font:11px Consolas,monospace; color:var(--ink-soft); white-space:pre-wrap; overflow-wrap:anywhere; }
.price-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(330px, 1fr)); gap:14px; }
.price-tile { position:relative; display:grid; grid-template-columns:86px minmax(0,1fr); gap:14px; padding:14px; color:var(--ink); text-decoration:none; background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden; transition:transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s, box-shadow .25s; }
.price-tile::before { content:""; position:absolute; inset:0 auto 0 0; width:3px; }
.price-tile--none::before { background:var(--cov-none); }
.price-tile--partial::before { background:var(--cov-partial); }
.price-tile--complete::before { background:var(--cov-complete); }
.price-tile:hover, .price-tile:focus-within { transform:translateY(-3px); border-color:var(--signal); box-shadow:0 18px 40px #0008; }
.price-tile__link { color:inherit; font-size:15px; font-weight:800; text-decoration:none; overflow-wrap:anywhere; }
.price-tile__link::after { content:""; position:absolute; inset:0; z-index:1; border-radius:inherit; } /* the whole tile clicks through to the editor */
.price-tile__link:focus-visible { outline:none; }
.price-tile:has(.price-tile__link:focus-visible) { outline:2px solid var(--signal); outline-offset:2px; }
.price-tile__image { width:86px; height:auto; aspect-ratio:245 / 342; object-fit:cover; border-radius:6px; box-shadow:0 8px 18px #0008; transition:transform .25s; }
.price-tile:hover .price-tile__image { transform:rotate(-2deg) scale(1.04); }
.price-tile__body { min-width:0; }
.price-tile__head { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.price-tile__meta { margin:3px 0 8px; color:var(--ink-soft); font:11px Consolas,monospace; }
.price-matrix { width:100%; border-collapse:separate; border-spacing:2px; font:11px/1.2 Consolas,monospace; }
.price-matrix th { color:var(--ink-soft); font-weight:700; text-align:center; padding:2px 3px; }
.price-matrix thead th small { display:block; font-weight:500; opacity:.75; font-size:9.5px; }
.price-matrix tbody th { text-align:left; }
.price-matrix td { text-align:right; padding:3px 5px; border-radius:4px; background:#ffffff08; color:var(--ink); white-space:nowrap; }
.price-matrix td.is-missing { color:var(--cov-none); text-align:center; background:color-mix(in srgb, var(--cov-none) 10%, transparent); }
.price-matrix td.is-optional { color:var(--ink-soft); text-align:center; background:transparent; }
.price-matrix td.is-paused { color:var(--ink-soft); text-decoration:line-through; }
.price-recent { margin-top:30px; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.price-recent summary { cursor:pointer; padding:14px 18px; font-weight:700; }
.price-recent ul { list-style:none; margin:0; padding:0 18px 12px; display:grid; gap:2px; }
.price-recent li { display:grid; grid-template-columns:minmax(120px, 1fr) minmax(0, 2fr) auto; gap:4px 14px; align-items:baseline; padding:8px 0; border-top:1px solid var(--line); font-size:13px; }
.price-recent li a { color:var(--ink); font-weight:700; text-decoration:none; }
.price-recent li a:hover { color:var(--signal); }
.price-recent li span, .price-recent li small { color:var(--ink-soft); }
.price-recent li small { grid-column:2 / -1; font-size:11px; }

/* Card editor: sticky card on the left, helper and matrix form on the right. */
.price-editor { max-width:1280px; margin:auto; padding:34px; box-sizing:border-box; display:grid; grid-template-columns:300px minmax(0,1fr); gap:34px; align-items:start; }
.price-editor__card { position:sticky; top:120px; display:grid; gap:10px; }
.price-editor__card .quiet { color:var(--ink-soft); text-decoration:none; font-size:13px; }
.price-editor__card h1 { margin:6px 0 0; font-family:Georgia,serif; font-size:30px; letter-spacing:-.03em; line-height:1.05; }
.price-editor__card h1 span { color:var(--signal); }
.price-editor__image { perspective:900px; }
.price-editor__image img { display:block; width:100%; height:auto; border-radius:14px; box-shadow:0 26px 60px #000a, 0 0 0 1px #ffffff18; animation:deal .7s cubic-bezier(.2,.8,.2,1) both; }
.price-editor__hint { margin:0; color:var(--ink-soft); font-size:12.5px; line-height:1.5; }
.price-editor__hint a { color:var(--signal); }
.price-editor__nav { display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.price-editor__nav .action-button { min-height:38px; padding:0 14px; font-size:13px; }
.price-editor__main { min-width:0; display:grid; gap:18px; }
.price-helper { padding:18px 20px; border:1px solid var(--line); border-radius:14px; background:linear-gradient(160deg, color-mix(in srgb, var(--signal) 10%, transparent), transparent 60%), var(--surface); display:grid; gap:12px; }
.price-helper h2, .price-helper-preview h2 { margin:0; font-size:18px; }
.price-helper h2 span, .price-helper-preview h2 span { color:var(--signal); }
.price-helper__row { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; }
.price-helper__row label:not(.price-helper__check) { display:grid; gap:5px; font-size:12px; color:var(--ink-soft); }
.price-helper__row input[type=text] { width:130px; padding:10px 11px; background:var(--paper); color:var(--ink); border:1px solid var(--line); border-radius:8px; font:inherit; font-size:15px; }
.price-helper__check { display:flex; align-items:center; gap:7px; font-size:13px; color:var(--ink-soft); padding-bottom:10px; }
.price-helper__row .action-button { min-height:42px; }
.price-form { display:grid; gap:12px; }
.price-form__scroll { overflow-x:auto; border:1px solid var(--line); border-radius:14px; background:var(--surface); padding:10px; }
.price-matrix--edit { font-size:13px; border-spacing:6px; min-width:420px; }
.price-matrix--edit thead th { font-family:inherit; font-size:12px; }
.price-matrix--edit tbody th { font-family:inherit; font-size:13px; white-space:nowrap; padding-right:8px; }
.price-matrix--edit tbody th small { display:block; color:var(--ink-soft); font:500 10.5px Consolas,monospace; margin-top:2px; }
.price-matrix--edit td { position:relative; padding:0; background:transparent; }
.price-cell { width:100%; min-width:84px; box-sizing:border-box; padding:10px 30px 10px 10px; text-align:right; background:var(--paper); color:var(--ink); border:1px solid var(--line); border-radius:8px; font:600 14px Consolas,monospace; transition:border-color .2s, box-shadow .2s, background-color .2s; }
.price-cell:focus { outline:none; border-color:var(--signal); box-shadow:0 0 0 3px color-mix(in srgb, var(--signal) 25%, transparent); }
.price-cell::placeholder { color:color-mix(in srgb, var(--signal) 60%, transparent); }
td.is-required .price-cell:placeholder-shown { border-color:color-mix(in srgb, var(--cov-none) 55%, var(--line)); }
.price-cell.is-changed { border-color:var(--cov-partial); background:color-mix(in srgb, var(--cov-partial) 10%, var(--paper)); }
.price-cell.is-invalid { border-color:var(--cov-none); }
td.is-optional .price-cell { opacity:.7; }
.price-cell__pause { position:absolute; right:6px; top:50%; translate:0 -50%; display:grid; place-items:center; width:20px; height:20px; border-radius:5px; color:var(--ink-soft); cursor:pointer; font-size:11px; }
.price-cell__pause input { position:absolute; opacity:0; width:1px; height:1px; }
.price-cell__pause:has(input:checked) { background:var(--cov-partial); color:#1b1306; }
.price-cell__pause:has(input:focus-visible) { outline:2px solid var(--signal); }
td:has(.price-cell__pause input:checked) .price-cell { text-decoration:line-through; color:var(--ink-soft); }
.price-form__reason { display:grid; gap:6px; font-size:13px; color:var(--ink-soft); }
.price-form__reason input { padding:11px 12px; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:8px; font:inherit; }
.price-form__changes { color:var(--cov-partial); font:700 13px Consolas,monospace; }

/* Helper settings page. */
.price-helper-page { max-width:1200px; margin:auto; padding:30px 34px 60px; box-sizing:border-box; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:28px; align-items:start; }
.price-helper-page > .price-flash { grid-column:1 / -1; }
.price-helper-form { display:grid; gap:18px; }
.price-factor-groups { display:grid; gap:14px; }
.price-factor-group { margin:0; padding:16px 18px 18px; border:1px solid var(--line); border-radius:14px; background:var(--surface); display:grid; gap:10px; }
.price-factor-group legend { padding:0 6px; font-weight:800; color:var(--signal); }
.price-factor { display:grid; grid-template-columns:minmax(110px, 1fr) minmax(90px, 1.4fr) auto auto; gap:12px; align-items:center; }
.price-factor__label { font-size:14px; font-weight:600; }
.price-factor input[type=range] { width:100%; accent-color:var(--signal); }
.price-factor__value { display:flex; align-items:center; gap:4px; color:var(--ink-soft); font-size:13px; }
.price-factor__value input { width:70px; padding:8px; text-align:right; background:var(--paper); color:var(--ink); border:1px solid var(--line); border-radius:7px; font:600 14px Consolas,monospace; }
.price-factor__required { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-soft); white-space:nowrap; }
.price-factor__required input { accent-color:var(--cov-complete); }
.price-factor__field { display:grid; gap:6px; font-size:13px; color:var(--ink-soft); }
.price-factor__field select, .price-factor__field input { max-width:220px; padding:9px 10px; background:var(--paper); color:var(--ink); border:1px solid var(--line); border-radius:7px; font:inherit; }
.price-helper-preview { position:sticky; top:120px; padding:18px 20px; border:1px solid var(--line); border-radius:14px; background:var(--surface); display:grid; gap:14px; }
.price-matrix--preview { font-size:13px; border-spacing:4px; }
.price-matrix--preview td { padding:7px 8px; }
.price-matrix td.is-flash { animation:cell-flash .6s ease; }
@keyframes cell-flash { from { background:color-mix(in srgb, var(--signal) 45%, transparent); } }

@media (max-width:1023px) {
  .price-layout { grid-template-columns:200px minmax(0,1fr); }
  .price-editor { grid-template-columns:220px minmax(0,1fr); padding:24px; gap:24px; }
  .price-helper-page { grid-template-columns:1fr; }
  .price-helper-preview { position:static; }
}
@media (max-width:720px) {
  .price-layout { display:block; }
  .price-sets { display:flex; overflow-x:auto; border-right:0; border-bottom:1px solid var(--line); padding:14px 16px; }
  .price-set { flex:none; min-width:170px; }
  .price-main { padding:20px 16px 48px; }
  .price-grid { grid-template-columns:1fr; }
  .price-editor { display:block; padding:20px 16px; }
  .price-editor__card { position:static; grid-template-columns:110px minmax(0,1fr); align-items:start; margin-bottom:20px; }
  .price-editor__card > .quiet, .price-editor__card > p, .price-editor__card > nav { grid-column:1 / -1; }
  .price-editor__card h1 { font-size:24px; }
  .price-helper-page { padding:20px 16px 48px; }
  .price-factor { grid-template-columns:1fr auto; }
  .price-factor input[type=range] { grid-column:1 / -1; grid-row:2; }
}