/* ============================================================
   Cannock Ads — modern local marketplace
   Vibe:  a cleaner, calmer Facebook Marketplace / Vinted for Cannock
   Type:  Plus Jakarta Sans (all UI) + Fraunces (logo / small accents only)
   Mood:  cool modern neutrals, punchy evergreen CTAs, photo-first browsing
   ============================================================ */

:root{
  /* ink & neutrals — cool, faintly green-grey (less cream warmth) */
  --ink:#16241d;          /* headings */
  --ink2:#3a4a42;         /* body text */
  --muted:#6c7b73;        /* secondary text */

  /* surfaces — cool off-white / soft grey-green */
  --bg:#eef2ef;           /* app backdrop */
  --bg-2:#f5f8f5;         /* lighter band */
  --card:#ffffff;
  --sunk:#f1f4f1;         /* inset fields, chips */
  --line:#e0e6e2;         /* hairlines */
  --line-2:#cdd6d0;

  /* brand — punchy evergreen (fair, local, trusted) */
  --brand:#0b7d54;
  --brand-2:#096a47;      /* hover / darker */
  --brand-ink:#064a33;    /* deepest */
  --brand-soft:#e1f1e9;   /* tint backgrounds */
  --brand-glow:rgba(11,125,84,.16);

  /* accent — warm ember, used sparingly for highlights only */
  --accent:#e07a3c;
  --accent-2:#c9662b;
  --accent-soft:#fbeade;

  /* status */
  --danger:#d0453f;
  --danger-soft:#fbe6e5;
  --ok:#12935a;
  --gold:#8a5b00;
  --gold-soft:#f9f0d6;

  /* shape — sharper, more modern */
  --r:14px;               /* cards / panels */
  --r-sm:10px;            /* inputs / buttons */
  --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(16,36,29,.05), 0 2px 6px -3px rgba(16,36,29,.10);
  --shadow:0 6px 20px -10px rgba(16,36,29,.22);
  --shadow-lg:0 20px 48px -20px rgba(16,36,29,.30);

  --font-body:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:'Fraunces','Plus Jakarta Sans',Georgia,serif;

  /* Content width: 1100 on smaller screens; grows with the viewport on large desktops */
  --site-max:1100px;
}

*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden;max-width:100%}
body{overflow-x:hidden;max-width:100%}

body{
  font-family:var(--font-body);
  color:var(--ink2);
  line-height:1.55;
  font-size:16px;
  min-height:100vh;
  background-color:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-2);text-decoration:underline}

/* Headings now use Jakarta (no big serif brochure feel) */
h1,h2,h3{font-family:var(--font-body);color:var(--ink);line-height:1.18;font-weight:800;letter-spacing:-.02em}
h1{font-size:clamp(1.55rem,3.4vw,2.05rem);margin:.5rem 0}
h2{font-size:clamp(1.2rem,2.6vw,1.4rem);margin:1.8rem 0 .8rem;font-weight:700}
h3{font-size:1.08rem;font-weight:700}
p{margin:0 0 .2rem}
img{max-width:100%;display:block}
strong{color:var(--ink);font-weight:700}

::selection{background:var(--brand-glow);color:var(--brand-ink)}
:focus-visible{outline:2.5px solid var(--brand);outline-offset:2px;border-radius:4px}

/* Desktop grows with the window; mobile still uses full width + padding. */
.wrap{max-width:var(--site-max);margin:0 auto;padding:0 20px;width:100%;box-sizing:border-box}

/* ============================================================
   Header / nav — stronger brand, clean solid bar
   ============================================================ */
.top{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(160%) blur(12px);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--line);
}
.bar{display:flex;align-items:center;gap:1rem;padding:.7rem 20px;flex-wrap:wrap}
.logo{
  font-family:var(--font-display);
  font-weight:600;font-size:1.42rem;letter-spacing:-.02em;
  color:var(--ink);text-decoration:none;
  display:inline-flex;align-items:center;gap:.55rem;line-height:1;
}
.logo:hover{color:var(--ink);text-decoration:none}
/* Solid rounded-square brand mark with a cut corner + inset dot */
.logo::before{
  content:"";width:1.7rem;height:1.7rem;border-radius:9px 9px 9px 3px;flex:none;
  background:
    radial-gradient(circle at 62% 38%, #fff 15%, transparent 16%),
    linear-gradient(150deg,var(--brand),var(--brand-2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 4px 10px -4px var(--brand);
}

.bar nav{margin-left:auto;display:flex;gap:.2rem;align-items:center;flex-wrap:wrap}
.bar nav a{
  color:var(--ink2);font-weight:600;font-size:.9rem;text-decoration:none;
  padding:.45rem .7rem;border-radius:var(--r-pill);transition:background .15s,color .15s;
}
.bar nav a:hover{color:var(--brand-2);background:var(--brand-soft);text-decoration:none}
.adminlink{color:var(--danger)!important}
.adminlink:hover{background:var(--danger-soft)!important}
.bar nav a.nav-exit{
  color:var(--ink2);
  border:1px solid var(--line);
  margin-left:.15rem;
}
.bar nav a.nav-exit:hover{
  color:var(--danger);
  border-color:var(--danger);
  background:var(--danger-soft);
}

/* Primary "Post an ad" CTA — punchy evergreen */
.cta{
  background:var(--brand);
  color:#fff!important;padding:.5rem 1.1rem!important;border-radius:var(--r-pill);
  font-weight:700;box-shadow:0 6px 16px -8px var(--brand);
  transition:background .15s,transform .12s,box-shadow .15s;
}
.cta:hover{background:var(--brand-2)!important;transform:translateY(-1px);box-shadow:0 10px 22px -10px var(--brand)}

/* ============================================================
   Main — must keep the same max width as .wrap (main.wrap is
   more specific than .wrap, so never set max-width:100% here)
   ============================================================ */
main.wrap{
  max-width:var(--site-max);
  margin-left:auto;
  margin-right:auto;
  padding-top:1rem;
  padding-bottom:1.4rem;
  min-height:60vh;
  overflow-x:hidden;
}
.top > .wrap,
.foot > .wrap{
  max-width:var(--site-max);
  margin-left:auto;
  margin-right:auto;
}
/* Large desktops: use nearly the full window so the tile grid can go as wide as the screen */
@media (min-width:1200px){
  :root{--site-max:min(2400px, calc(100vw - 40px))}
}

/* ============================================================
   Buttons
   ============================================================ */
input,select,textarea,button{font:inherit}
button.btn{-webkit-appearance:none;appearance:none;margin:0}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  box-sizing:border-box;min-height:2.75rem;height:2.75rem;
  background:var(--brand);
  color:#fff;border:1.5px solid transparent;border-radius:var(--r-sm);
  padding:0 1.25rem;font-weight:700;font-size:.95rem;cursor:pointer;width:auto;
  text-decoration:none;line-height:1.2;
  box-shadow:0 6px 16px -10px var(--brand);transition:transform .12s,box-shadow .15s,background .15s,border-color .15s;
}
.btn:hover{background:var(--brand-2);color:#fff;text-decoration:none;transform:translateY(-1px);box-shadow:0 10px 22px -12px var(--brand)}
.btn:active{transform:translateY(0)}
.btn--ghost{background:#fff;color:var(--ink2);border-color:var(--line-2);box-shadow:none}
.btn--ghost:hover{background:var(--brand-soft);color:var(--brand-2);border-color:var(--brand)}
.btn--danger-ghost{
  background:#fff;color:var(--danger);border-color:var(--danger);box-shadow:none;
}
.btn--danger-ghost:hover{
  background:var(--danger-soft);color:#b03a35;border-color:#b03a35;transform:none;box-shadow:none;
}
.btn--ok-ghost{
  background:#fff;color:var(--brand);border-color:var(--brand);box-shadow:none;
}
.btn--ok-ghost:hover{
  background:var(--brand-soft);color:var(--brand-2);border-color:var(--brand-2);transform:none;box-shadow:none;
}
.btn--disabled,.btn[aria-disabled="true"]{
  opacity:.45;cursor:not-allowed;pointer-events:none;
  background:var(--line);color:var(--muted);box-shadow:none;border-color:var(--line-2);
}
.btn--disabled:hover{transform:none;box-shadow:none}
.btn--ai{
  display:inline-flex;align-items:center;gap:.4rem;
  background:#f3f7ff;color:#1d4ed8;border-color:#3b82f6;box-shadow:none;
}
.btn--ai:hover{background:#eaf1ff;color:#1e40af;border-color:#2563eb}
.btn--ai__ico{width:1.05rem;height:1.05rem;flex:0 0 auto}
.btn--sm{
  min-height:2.2rem;height:2.2rem;padding:0 .9rem;font-size:.82rem;font-weight:700;
  border-radius:8px;box-shadow:none;
}
.btn--sm.btn--ai{gap:.35rem;transform:none;box-shadow:none}
.btn--sm.btn--ai:hover{transform:none;box-shadow:none}
.btn--sm.btn--ai .btn--ai__ico,.btn--sm.btn--ai .ico{width:.95rem!important;height:.95rem!important}

/* Sibling buttons in a row always share height — never mix bare .btn with .btn--sm here */
.btn-row,.page-actions{
  display:flex;flex-wrap:wrap;gap:.55rem;align-items:stretch;margin:0;
}
.page-actions{gap:.75rem;margin-top:1.15rem}
.btn-row > .btn,.page-actions > .btn{
  margin:0;align-self:stretch;transform:none;box-shadow:none;
}
.btn-row > .btn:hover,.page-actions > .btn:hover{transform:none}
.section-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:.65rem 1rem;margin:1.35rem 0 .65rem}
.section-head h2{margin:0}
.section-head--listings h2{font-size:1.35rem;line-height:1.2}
.section-head__btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.35rem;
  min-height:2.15rem;padding:.4rem .9rem;font-size:.82rem;font-weight:700;
  border-width:1.5px;box-sizing:border-box;transform:none;box-shadow:none;
}
.section-head__btn:hover{transform:none}
.section-head__btn .ico,
.section-head__btn .btn--ai__ico{width:.95rem!important;height:.95rem!important;flex:0 0 auto}
.post-head{
  display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;
  gap:.65rem 1rem;margin:0 0 .85rem;
}
.post-head h1{margin:0;min-width:0}
.post-head .post-ai{flex:0 0 auto}
.post-head__switch{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.35rem;margin-left:auto}
.post-head__switch-label{font-size:.72rem;font-weight:700;color:var(--muted);letter-spacing:.02em;line-height:1}
.post-wiz__draft-hint{margin:.35rem 0 0;text-align:right}
.post-wiz__nav [data-save-draft]{margin-right:auto}
.post-ai{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.4rem .7rem .4rem .55rem;border:1.5px solid #93c5fd;border-radius:999px;
  background:linear-gradient(135deg,#eff6ff 0%,#f8fafc 70%);
  text-decoration:none;color:#1e3a8a;white-space:nowrap;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
.post-ai:hover{
  border-color:#2563eb;background:#eff6ff;box-shadow:0 4px 12px rgba(37,99,235,.12);
  text-decoration:none;color:#1e40af;
}
.post-ai__ico{width:1rem!important;height:1rem!important;color:#1d4ed8;flex:0 0 auto}
.post-ai__name{font-size:.88rem;font-weight:800;letter-spacing:.01em;color:#1e3a8a}
.post-ai__action{
  font-size:.75rem;font-weight:700;color:#1d4ed8;
  padding-left:.45rem;margin-left:.05rem;border-left:1px solid #bfdbfe;
}
.post-ai-buy{margin:-.35rem 0 1rem}
.post-manual-label{
  margin:0 0 .55rem;font-size:.78rem;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);
}
@media (max-width:420px){
  .post-head{gap:.45rem}
  .post-ai__action{padding-left:.35rem}
}

/* Post Advert — step-by-step wizard */
.post-wiz{margin:0 0 2rem}
.post-wiz__lead{
  margin:0 0 1rem;font-size:1.05rem;font-weight:700;color:var(--ink);
}
.post-wiz__choice{
  display:grid;grid-template-columns:1fr 1fr;gap:.75rem;
}
.post-wiz__card{
  display:flex;flex-direction:column;align-items:flex-start;gap:.4rem;
  text-align:left;padding:1.05rem 1.1rem;border-radius:var(--r);
  border:1.5px solid var(--line);background:var(--card);
  box-shadow:var(--shadow-sm);cursor:pointer;font:inherit;color:inherit;
  text-decoration:none;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.post-wiz__card:hover{
  border-color:var(--brand);box-shadow:var(--shadow);transform:translateY(-1px);
  text-decoration:none;color:inherit;
}
.post-wiz__card strong{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:1.05rem;font-weight:800;color:var(--ink);
}
.post-wiz__card span{font-size:.88rem;line-height:1.4;color:var(--ink2)}
.post-wiz__card--ai{
  border-color:#93c5fd;
  background:linear-gradient(135deg,#eff6ff 0%,#f8fafc 70%);
}
.post-wiz__card--ai:hover{border-color:#2563eb}
.post-wiz__card--ai strong{color:#1e3a8a}
.post-wiz__card-ico{width:1.15rem!important;height:1.15rem!important;color:#1d4ed8}
.post-wiz__form{margin-top:.5rem}
.post-wiz__progress{margin:0 0 1.1rem}
.post-wiz__progress-top{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.45rem;
}
.post-wiz__step-label{font-size:.82rem;font-weight:800;color:var(--ink2)}
.post-wiz__change-path{
  border:0;background:none;padding:0;font:inherit;font-size:.78rem;font-weight:700;
  color:var(--brand);cursor:pointer;text-decoration:underline;
}
.post-wiz__change-path:hover{color:var(--brand-2)}
.post-wiz__bar{
  height:6px;border-radius:999px;background:var(--sunk);overflow:hidden;margin-bottom:.55rem;
}
.post-wiz__bar > span{
  display:block;height:100%;width:0;border-radius:inherit;
  background:var(--brand);transition:width .25s ease;
}
.post-wiz__dots{
  list-style:none;display:flex;gap:.35rem;margin:0;padding:0;
}
.post-wiz__dots li{
  flex:1;height:4px;border-radius:999px;background:var(--line-2);
}
.post-wiz__dots li.is-done{background:var(--brand)}
.post-wiz__dots li.is-current{background:var(--brand-2)}
.post-wiz__panel{display:grid;gap:1rem}
.post-wiz__panel[hidden]{display:none!important}
.post-wiz__h{margin:0;font-size:1.2rem}
.post-wiz__hint{margin:0;font-size:.92rem;color:var(--ink2);line-height:1.4}
.post-wiz__photos{position:relative;display:block}
.post-wiz__photos input[type=file]{
  position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;
}
.post-wiz__photos-btn{pointer-events:none;width:100%;justify-content:center}
.post-wiz__previews{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  gap:.75rem;margin-top:.15rem;
}
.post-wiz__shot{
  margin:0;position:relative;background:#0f1a15;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;aspect-ratio:1;
  display:grid;place-items:center;
}
.post-wiz__shot img{
  max-width:92%;max-height:92%;width:auto;height:auto;object-fit:contain;
  image-orientation:none;transition:transform .2s ease;border-radius:4px;
}
.post-wiz__shot-tools{
  position:absolute;right:.45rem;bottom:.45rem;display:flex;gap:.3rem;
  background:rgba(22,36,29,.78);backdrop-filter:blur(6px);border-radius:999px;padding:.22rem;
}
.post-wiz__shot-tools button{
  appearance:none;border:0;background:transparent;color:#fff;cursor:pointer;
  width:2rem;height:2rem;border-radius:999px;font-size:1.05rem;line-height:1;
  display:grid;place-items:center;
}
.post-wiz__shot-tools button:hover{background:rgba(255,255,255,.18)}
.post-wiz__shot figcaption{
  position:absolute;left:.55rem;top:.5rem;margin:0;padding:.15rem .45rem;
  border-radius:999px;background:rgba(22,36,29,.72);color:#fff;
  font-size:.72rem;font-weight:700;
}
.post-wiz__photo-tip{margin:.15rem 0 0;color:var(--ink2)}

/* Pan/zoom tile framer modal */
.photo-frame{
  position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:1rem;
}
.photo-frame[hidden]{display:none!important}
.photo-frame__backdrop{position:absolute;inset:0;background:rgba(15,26,21,.55)}
.photo-frame__dialog{
  position:relative;z-index:1;width:min(28rem,100%);background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);
  padding:1rem 1.05rem 1.1rem;display:grid;gap:.75rem;
}
.photo-frame__title{margin:0;font-size:1.15rem}
.photo-frame__hint{margin:.25rem 0 0;color:var(--ink2);font-size:.9rem}
.photo-frame__stage{
  position:relative;aspect-ratio:1;width:100%;overflow:hidden;border-radius:var(--r-sm);
  border:1px solid var(--line);background:#0f1a15;touch-action:none;cursor:grab;
}
.photo-frame__stage:active{cursor:grabbing}
.photo-frame__stage img{
  display:block;user-select:none;-webkit-user-drag:none;max-width:none;max-height:none;
}
.photo-frame__controls{display:grid;gap:.65rem}
.photo-frame__zoom{display:grid;gap:.35rem;font-weight:600;font-size:.9rem}
.photo-frame__zoom input{width:100%}
.photo-frame__rotate-row{display:flex;gap:.5rem;justify-content:center}
.photo-frame__rotate-row .btn{min-width:3.25rem;font-size:1.15rem}
.photo-frame__actions{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:flex-end}
.photo-frame__actions .btn{min-width:5.5rem}
.edit-photos .detail2__shot[data-edit-frame]{
  cursor:pointer;-webkit-tap-highlight-color:rgba(11,125,84,.18);
}
.edit-photos .detail2__shot[data-edit-frame] img{
  aspect-ratio:1;object-fit:cover;background:#eef2ef;pointer-events:none;
  width:100%;max-width:100%;max-height:none;height:auto;
}
.edit-photos .detail2__rotate{z-index:2}
.edit-photos-add{margin:.35rem 0 1rem;max-width:560px}
.edit-photos-add__sum{
  list-style:none;cursor:pointer;display:flex;align-items:center;flex-wrap:wrap;gap:.4rem .55rem;
  font-weight:700;color:var(--ink);user-select:none;line-height:1.3;
  min-height:2.5rem;padding:.35rem 0;-webkit-tap-highlight-color:rgba(11,125,84,.14);
}
.edit-photos-add__sum::-webkit-details-marker{display:none}
.edit-photos-add__sum::before{
  content:"";width:.42rem;height:.42rem;border-right:2px solid var(--ink2);border-bottom:2px solid var(--ink2);
  transform:rotate(-45deg);opacity:.55;transition:transform .15s;flex:none;
}
.edit-photos-add[open] > .edit-photos-add__sum::before{transform:rotate(45deg)}
.edit-photos-add__sum:hover{color:var(--brand-2)}
.edit-photos-add__count{
  font-family:var(--font);font-size:.72rem;font-weight:700;
  color:var(--brand-2);background:var(--brand-soft);border-radius:999px;
  padding:.12rem .45rem;letter-spacing:.02em;
}
.edit-photos-add__label{display:block;margin-top:.55rem}
.edit-photos-add > .tiny{margin-top:.45rem}
.ai-draft__zoom-hint,.ai-draft__thumb-hint{pointer-events:none}
.post-wiz__nav{
  display:flex;flex-wrap:wrap;gap:.65rem;margin-top:.35rem;
  padding-top:.35rem;align-items:center;
}
.post-wiz__nav .btn{min-width:7.5rem}
.post-wiz__nav .btn[hidden]{display:none!important}
.post-wiz__nav [data-next],
.post-wiz__nav [data-publish]{margin-left:auto}
.post-wiz__publish{min-height:2.85rem;font-size:1.02rem;padding-left:1.4rem;padding-right:1.4rem}
.post-wiz__review{
  margin:0;padding:0;display:grid;gap:.65rem;
  border:1px solid var(--line);border-radius:var(--r);background:var(--sunk);
  padding:.9rem 1rem;
}
.post-wiz__review-row{
  display:grid;grid-template-columns:8.5rem 1fr;gap:.5rem .75rem;
  padding-bottom:.55rem;border-bottom:1px solid var(--line);
}
.post-wiz__review-row:last-child{border-bottom:0;padding-bottom:0}
.post-wiz__review dt{font-size:.78rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.post-wiz__review dd{margin:0;font-size:.92rem;font-weight:600;color:var(--ink);line-height:1.4;word-break:break-word}
.post-wiz__step-err{margin:0 0 .25rem}
@media (max-width:640px){
  .post-wiz__choice{grid-template-columns:1fr}
  .post-wiz__review-row{grid-template-columns:1fr;gap:.15rem}
  .post-wiz__nav [data-next],
  .post-wiz__nav [data-publish]{margin-left:0;flex:1}
  .post-wiz__nav .btn:not([hidden]){flex:1;justify-content:center}
}
/* Ai Lister — one compact row: credits + switch */
.post-head--ai{
  flex-wrap:nowrap;align-items:center;gap:.5rem .65rem;margin:0 0 .85rem;
}
.post-head--ai .ai-credits--title{
  flex:0 1 auto;min-width:0;margin:0;
  font-size:.82rem;font-weight:700;padding:.4rem .7rem;line-height:1.2;
  white-space:nowrap;
}
.post-head--ai .ai-credits--title .ai-credits__ico{width:.95rem;height:.95rem}
.post-head--ai .post-head__switch{
  flex-direction:row;align-items:center;gap:.4rem;flex:0 0 auto;margin-left:auto;
}
.post-head--ai .post-head__switch-label{font-size:.68rem;white-space:nowrap}
.post-head--ai .post-head__switch .btn{
  min-height:2.05rem;padding:.35rem .7rem;font-size:.78rem;font-weight:700;
  transform:none;box-shadow:none;white-space:nowrap;
}
.post-head--ai .post-head__switch .btn:hover{transform:none}
@media (max-width:520px){
  .post-head--ai{flex-wrap:wrap}
  .post-head--ai .post-head__switch{margin-left:0}
}
.ai-mode{
  display:grid;grid-template-columns:1fr 1fr;gap:.65rem;margin:.35rem 0 .85rem;
}
.ai-mode__card{
  text-align:left;padding:.75rem .85rem;border-radius:12px;border:1.5px solid var(--line);
  background:var(--sunk);cursor:pointer;display:flex;flex-direction:column;gap:.35rem;
  font:inherit;color:inherit;box-shadow:none;
}
.ai-mode__card strong{font-size:.95rem;font-weight:800;color:var(--ink)}
.ai-mode__card span{font-size:.78rem;line-height:1.35;color:var(--muted)}
.ai-mode__card:hover{border-color:#93c5fd;background:#f8fbff}
.ai-mode__card.is-active{
  border-color:#3b82f6;background:#eff6ff;box-shadow:0 0 0 1px #3b82f6 inset;
}
.ai-mode__card.is-active strong{color:#1d4ed8}
.ai-mode-pick[hidden],
.ai-upload-flow[hidden],
#ai-lister-upload-btn[hidden]{display:none!important}
.ai-upload-flow__head{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.5rem .75rem;margin:0 0 .35rem;
}
.ai-upload-flow__head h3{margin:0}
.ai-mode-pick h3{margin:0 0 .35rem}
.ai-draft__thumbs{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem;margin-top:.45rem;
}
.ai-draft__thumb-wrap{position:relative;min-width:0}
.ai-draft__thumb{
  display:block;width:100%;padding:0;border:0;border-radius:8px;overflow:hidden;cursor:zoom-in;background:var(--sunk);
  border:1px solid var(--line);
}
.ai-draft__thumb img{display:block;width:100%;height:64px;object-fit:cover;pointer-events:none}
.ai-draft__hero{position:relative}
.ai-draft__thumb-rot{position:absolute;top:.2rem;left:.2rem;margin:0;z-index:2}
.ai-draft__thumb-rot-btn{
  width:1.35rem;height:1.35rem;padding:0;border:0;border-radius:999px;cursor:pointer;
  background:rgba(15,23,42,.78);color:#fff;font-size:.95rem;line-height:1;font-weight:700;
  display:grid;place-items:center;
}
.ai-draft__thumb-rot-btn:hover{background:rgba(15,23,42,.95)}
.ai-draft__thumb-primary{position:absolute;bottom:.2rem;left:.2rem;margin:0;z-index:2}
.ai-draft__thumb-star{
  width:1.35rem;height:1.35rem;padding:0;border:0;border-radius:999px;cursor:pointer;
  background:rgba(15,23,42,.78);color:#fbbf24;font-size:.95rem;line-height:1;font-weight:700;
  display:grid;place-items:center;
}
.ai-draft__thumb-star:hover{background:rgba(15,23,42,.95)}
.ai-draft__thumb-del{position:absolute;top:.2rem;right:.2rem;margin:0;z-index:2}
.ai-draft__thumb-del-btn{
  width:1.35rem;height:1.35rem;padding:0;border:0;border-radius:999px;cursor:pointer;
  background:rgba(15,23,42,.78);color:#fff;font-size:1rem;line-height:1;font-weight:700;
}
.ai-draft__thumb-del-btn:hover{background:#b91c1c}
.ai-instruct{
  margin:0;border:0;border-radius:0;background:transparent;overflow:visible;width:100%;
  max-width:100%;box-sizing:border-box;
}
.ai-instruct__btn{
  list-style:none;width:100%;justify-content:center;box-sizing:border-box;
  min-height:2.45rem;user-select:none;cursor:pointer;
}
.ai-instruct__btn::-webkit-details-marker{display:none}
.ai-instruct[open] > .ai-instruct__btn{
  background:#dbeafe;border-color:#2563eb;color:#1e40af;
}
.ai-instruct__form{
  margin:.45rem 0 0;padding:.65rem .7rem;border:1.5px solid #93c5fd;border-radius:10px;
  background:#f8fbff;box-shadow:none;width:100%;max-width:100%;box-sizing:border-box;
}
/* Stack in the narrow rail — global input{width:100%} breaks a side-by-side flex row. */
.ai-instruct__row{
  display:flex;flex-direction:column;align-items:stretch;gap:.45rem;width:100%;
}
.ai-instruct__input{
  display:block;width:100%;max-width:100%;min-width:0;margin:0;
  padding:.55rem .65rem;border:1.5px solid #93c5fd;border-radius:8px;
  background:#fff;color:var(--ink);font-weight:600;font-size:.92rem;box-sizing:border-box;
}
.ai-instruct__input::placeholder{color:var(--muted);font-weight:500;opacity:.95}
.ai-instruct__go{
  width:100%;justify-content:center;min-height:2.45rem;box-sizing:border-box;font-weight:800;
}
.ai-instruct__help{margin:.4rem 0 0;color:#1d4ed8}
@media (max-width:680px){
  .ai-mode{grid-template-columns:1fr}
}
.ai-credits{
  display:inline-flex;align-items:center;gap:.4rem;flex-wrap:wrap;
  margin:0 0 1rem;padding:.45rem .7rem;border-radius:999px;
  background:#f3f7ff;border:1.5px solid #3b82f6;color:#1d4ed8;font-size:.9rem;
}
.ai-credits--title{
  margin:0;font-size:1.05rem;font-weight:700;padding:.55rem .9rem;
}
.ai-credits--title .ai-credits__ico{width:1.15rem;height:1.15rem}
.ai-credits--empty{background:#fff7ed;border-color:#fb923c;color:#c2410c}
.ai-credits__ico{width:1rem;height:1rem;flex:0 0 auto}
.ai-credits strong{font-weight:800}
.admin-panel-link{
  margin:.15rem 0 1.1rem;
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .65rem;
}
.admin-panel-link .btn--admin-panel{
  background:var(--danger);
  color:#fff!important;
  font-weight:800;
  box-shadow:0 6px 16px -8px var(--danger);
}
.admin-panel-link .btn--admin-panel:hover{
  background:#a32828;
  filter:none;
  color:#fff!important;
}
.passkey-row--active{border-left:3px solid var(--brand);padding-left:.65rem;margin-left:-.65rem}
.passkeys-fold{margin:0}
.passkeys-fold__sum{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:.45rem;
  font-family:var(--font-display);font-size:1.15rem;font-weight:700;color:var(--ink);
  user-select:none;line-height:1.2;
}
.passkeys-fold__sum::-webkit-details-marker{display:none}
.passkeys-fold__sum::before{
  content:"";width:.42rem;height:.42rem;border-right:2px solid var(--ink2);border-bottom:2px solid var(--ink2);
  transform:rotate(-45deg);opacity:.55;transition:transform .15s;flex:none;
}
.passkeys-fold[open] > .passkeys-fold__sum::before{transform:rotate(45deg)}
.passkeys-fold__sum:hover{color:var(--brand-2)}
.passkeys-fold__count{
  font-family:var(--font);font-size:.72rem;font-weight:700;
  color:var(--brand-2);background:var(--brand-soft);border-radius:999px;
  padding:.12rem .45rem;letter-spacing:.02em;
}
.passkeys-fold > *:not(summary){margin-top:.65rem}
.passkeys-fold > p:first-of-type{margin-top:.45rem}
.seo-tools{
  margin:.85rem 0 0;padding:.75rem .85rem;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--sunk);
}
.seo-tools__sum{
  cursor:pointer;list-style:none;display:flex;align-items:center;gap:.45rem;
  font-weight:700;color:var(--ink);user-select:none;
}
.seo-tools__sum::-webkit-details-marker{display:none}
.seo-tools__sum::before{
  content:"+";display:inline-flex;width:1rem;justify-content:center;
  font-weight:800;color:var(--muted);transition:transform .15s ease;
}
.seo-tools[open] > .seo-tools__sum::before{content:"–"}
.seo-tools__sum:hover{color:var(--brand-2)}
.seo-tools__badge{
  display:inline-flex;align-items:center;padding:.12rem .4rem;border-radius:6px;
  font-size:.72rem;font-weight:800;letter-spacing:.02em;
  background:var(--accent-soft);color:#8a4a12;border:1px solid #f6d9be;
}
.seo-tools > *:not(summary){margin-top:.55rem}
.seo-tools textarea[data-seo-focus]{min-height:4.5rem}
.seo-tools__preview{
  margin-top:.65rem;padding:.65rem .75rem;border-radius:8px;
  background:var(--card);border:1px solid var(--line);
}
.seo-tools__preview-label{
  display:block;font-size:.78rem;font-weight:800;letter-spacing:.02em;
  color:var(--muted);margin-bottom:.35rem;
}
.seo-tools__blob{
  margin:0;font-size:.88rem;line-height:1.45;color:var(--ink);
  word-break:break-word;
}
.seo-tools__locs{margin-top:.5rem}
.ai-draft{display:grid;grid-template-columns:minmax(140px,220px) minmax(0,1fr);gap:1rem;align-items:start}
.ai-draft__body{min-width:0;display:flex;flex-direction:column;gap:.75rem}
.ai-draft__rail{min-width:0;display:flex;flex-direction:column;gap:.75rem}
.ai-draft__fields{min-width:0}
/* Number inputs often ignore `color` in WebKit — use text-fill + !important. */
body.page-ai-lister input.ai-price-input.is-ai-price,
input.ai-price-input.is-ai-price{
  color:#b91c1c!important;
  -webkit-text-fill-color:#b91c1c!important;
  caret-color:#b91c1c;
  font-weight:800!important;
  border-color:#ef4444!important;
  background:#fef2f2!important;
  box-shadow:inset 0 0 0 1px #fecaca;
}
body.page-ai-lister input.ai-price-input:not(.is-ai-price),
input.ai-price-input:not(.is-ai-price){
  color:var(--ink)!important;
  -webkit-text-fill-color:var(--ink)!important;
  font-weight:600;
  border-color:var(--line);
  background:#fff;
  box-shadow:none;
}
.ai-price-hint{margin:.15rem 0 .45rem;color:#b91c1c;font-weight:600}
.ai-barcode{margin-top:.55rem;border:0;background:transparent}
.ai-barcode__summary{
  list-style:none;cursor:pointer;user-select:none;
  font-size:.88rem;font-weight:700;color:var(--ink2);
  padding:.35rem 0;display:flex;align-items:center;gap:.35rem;
}
.ai-barcode__summary::-webkit-details-marker{display:none}
.ai-barcode__summary::before{
  content:'▸';display:inline-block;transition:transform .15s;color:var(--muted);font-size:.75rem;
}
.ai-barcode[open] > .ai-barcode__summary::before{transform:rotate(90deg)}
.ai-barcode__body{display:flex;flex-direction:column;align-items:stretch;gap:.4rem;margin-top:.35rem}
.ai-barcode__cam{width:100%;justify-content:center}
.ai-barcode__form{display:flex;flex-direction:column;gap:.4rem;margin:0}
.ai-barcode__label{margin:0;font-size:.82rem;font-weight:700;color:var(--ink2)}
.ai-barcode__input{margin-top:.25rem;width:100%;box-sizing:border-box}
.ai-barcode-modal{
  position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  padding:1rem;background:rgba(15,23,42,.72);
}
.ai-barcode-modal[hidden]{display:none!important}
.ai-barcode-modal__panel{
  width:min(420px,100%);background:#fff;border-radius:14px;padding:1rem;
  box-shadow:var(--shadow-lg);display:flex;flex-direction:column;gap:.65rem;
}
.ai-barcode-modal__head{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.ai-barcode-modal__head h2{margin:0;font-size:1.1rem}
.ai-barcode-modal__close{
  width:2.2rem;height:2.2rem;border:0;border-radius:999px;background:var(--sunk);
  font-size:1.4rem;line-height:1;cursor:pointer;color:var(--ink);
}
.ai-barcode-modal__video{
  width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;background:#0f172a;
}
.ai-barcode-modal__html5{width:100%;min-height:220px;border-radius:10px;overflow:hidden}
.ai-barcode-modal__html5 video{width:100%!important;border-radius:10px}
.ai-barcode-modal__hint{margin:0;color:var(--muted)}
.ai-draft__source{margin:.15rem 0 0}
.ai-draft__pic img{width:100%;max-height:220px;object-fit:cover;border-radius:10px;border:1px solid var(--line);background:var(--sunk)}
.ai-draft__hero{position:relative;border-radius:10px;overflow:hidden}
.ai-draft__zoom{
  display:block;width:100%;padding:0;margin:0;border:0;background:transparent;cursor:zoom-in;
  position:relative;border-radius:10px;overflow:hidden;
}
.ai-draft__zoom img{display:block;pointer-events:none}
.ai-draft__zoom-hint{
  position:absolute;left:.45rem;bottom:.45rem;padding:.2rem .45rem;border-radius:999px;
  background:rgba(15,23,42,.72);color:#fff;font-size:.68rem;font-weight:700;letter-spacing:.01em;
}
.ai-draft__rotate{
  position:absolute;right:.45rem;bottom:.45rem;display:flex;margin:0;z-index:2;
  background:rgba(22,36,29,.78);backdrop-filter:blur(6px);border-radius:999px;padding:.2rem;
}
.ai-draft__rotate button{
  appearance:none;border:0;background:transparent;color:#fff;cursor:pointer;
  width:2rem;height:2rem;border-radius:999px;font-size:1.1rem;line-height:1;
  display:grid;place-items:center;
}
.ai-draft__rotate button:hover{background:rgba(255,255,255,.18)}
.ai-lightbox{
  position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.55rem;padding:1rem;background:rgba(10,15,25,.88);cursor:zoom-out;
}
.ai-lightbox[hidden]{display:none!important}
.ai-lightbox__img{
  max-width:min(96vw,920px);max-height:min(82vh,920px);width:auto;height:auto;object-fit:contain;
  border-radius:12px;background:#111;box-shadow:0 20px 50px rgba(0,0,0,.45);
}
.ai-lightbox__close{
  position:absolute;top:.65rem;right:.75rem;width:2.4rem;height:2.4rem;border:0;border-radius:999px;
  background:rgba(255,255,255,.92);color:#111;font-size:1.6rem;line-height:1;cursor:pointer;
}
.ai-lightbox__hint{margin:0;color:rgba(255,255,255,.75)}
.ai-draft__form{margin:0;padding:0;border:0;box-shadow:none;background:transparent}
.ai-draft__actions{
  display:flex;justify-content:flex-end;margin-top:1rem;
}
.ai-draft__actions-stack{
  display:flex;flex-direction:column;align-items:stretch;gap:.5rem;
  width:100%;max-width:14rem;
}
.ai-draft__actions-stack .btn{
  width:100%;justify-content:center;min-height:2.45rem;box-sizing:border-box;
}
.ai-draft__publish{
  justify-content:center;font-size:1.05rem;font-weight:800;
  min-height:3.15rem!important;padding:.85rem 1.1rem;border-radius:10px;
}
/* Ai Lister — stay in site wrap; only lift the 660px .form cap inside drafts/upload */
body.page-ai-lister .form.ai-draft__form,
body.page-ai-lister .ai-draft__form.form{
  max-width:none;width:100%;
  margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:transparent;
}
body.page-ai-lister .ai-draft{
  grid-template-columns:minmax(140px,240px) minmax(0,1fr);gap:1rem;
}
body.page-ai-lister .ai-draft__body{min-width:0}
/* Desktop ready drafts: photo | details | tools */
@media (min-width:900px){
  body.page-ai-lister .ai-draft--ready{
    grid-template-columns:minmax(160px,220px) minmax(0,1fr) minmax(220px,280px);
    gap:1rem 1.1rem;
    align-items:start;
  }
  body.page-ai-lister .ai-draft--ready .ai-draft__actions{margin-top:.25rem;justify-content:stretch}
  body.page-ai-lister .ai-draft--ready .ai-draft__actions-stack{max-width:none}
  body.page-ai-lister .ai-draft--ready .ai-instruct{margin:0}
}
@media (max-width:899px){
  body.page-ai-lister .ai-draft--ready{
    grid-template-columns:minmax(140px,220px) minmax(0,1fr);
  }
  body.page-ai-lister .ai-draft--ready .ai-draft__rail{grid-column:1 / -1}
}
body.page-ai-lister #upload.panel .form{
  max-width:none;width:100%;
  margin-top:.75rem;padding:0;border:0;border-radius:0;box-shadow:none;background:transparent;
}
body.page-ai-lister .panel{
  padding:.85rem .9rem;margin:.7rem 0;
}
@media (max-width:680px){
  body.page-ai-lister .panel{padding:.75rem .7rem;border-radius:12px}
  body.page-ai-lister .ai-draft,
  body.page-ai-lister .ai-draft--ready{grid-template-columns:1fr;gap:.7rem}
  body.page-ai-lister .ai-draft--ready .ai-draft__rail{grid-column:auto}
  body.page-ai-lister .ai-draft__actions-stack{max-width:100%}
  body.page-ai-lister .ai-draft__publish{min-height:3.4rem!important;font-size:1.12rem}
}
.ai-draft__form--incomplete .ai-seller-text,
.ai-draft__form--incomplete .ai-seller-text:focus{
  color:#dc2626;caret-color:#dc2626;
}
.ai-draft__form--incomplete .ai-seller-text::placeholder{color:#f87171;opacity:.85}
.ai-draft__form--incomplete select.ai-seller-text{color:#dc2626}
.ai-progress{
  position:sticky;top:.5rem;z-index:20;margin:0 0 1rem;padding:.85rem 1rem;
  background:#f3f7ff;border:1.5px solid #3b82f6;border-radius:12px;box-shadow:var(--shadow-sm);
}
.ai-progress__bar{height:.55rem;background:#dbeafe;border-radius:999px;overflow:hidden;margin:0 0 .55rem}
.ai-progress__fill{display:block;height:100%;width:0;background:#2563eb;transition:width .25s ease}
.ai-progress__text{margin:0;font-weight:700;color:#1d4ed8}
.ai-ask-more{margin:.55rem 0 .75rem}
.ai-ask-more > summary{cursor:pointer;font-weight:700;color:var(--muted);margin-bottom:.45rem}
.ai-ask{margin:0 0 1.1rem}
.ai-ask__card{
  display:grid;grid-template-columns:minmax(140px,200px) 1fr;gap:1rem;align-items:start;
  padding:1rem;background:#fff7ed;border:2px solid #fb923c;border-radius:12px;
}
.ai-ask__img{width:100%;max-height:200px;object-fit:cover;border-radius:10px;border:1px solid var(--line);background:#fff}
.ai-ask__body h3{margin:.1rem 0 .35rem;color:#c2410c}
.ai-ask__credit{margin:0 0 .45rem;font-weight:700;color:#15803d}
.panel--ask{border-color:#fb923c;box-shadow:0 0 0 1px rgba(251,146,60,.25)}
.panel--ai-draft{position:relative;padding-top:1.55rem}
.ai-draft__quick-discard{
  position:absolute;top:.45rem;right:.45rem;z-index:3;margin:0;
}
.ai-draft__quick-discard-btn{
  width:1.85rem;height:1.85rem;padding:0;border:1.5px solid #fca5a5;border-radius:6px;cursor:pointer;
  background:#fee2e2;color:#b91c1c;display:inline-grid;place-items:center;box-sizing:border-box;
}
.ai-draft__quick-discard-btn svg{display:block}
.ai-draft__quick-discard-btn:hover{background:#b91c1c;border-color:#b91c1c;color:#fff}
.ai-draft-status{margin:0 2rem .65rem 0;font-size:.86rem;font-weight:700}
.ai-draft-status--wait{color:#1d4ed8}
.ai-draft-status--ask{color:#c2410c}
.ai-tabs{display:flex;flex-wrap:wrap;gap:.45rem;margin:.35rem 0 .85rem}
.ai-tabs__btn{
  display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .85rem;
  border:1.5px solid var(--line-2);border-radius:999px;background:#fff;color:var(--ink2);
  font-size:.88rem;font-weight:700;text-decoration:none;
}
.ai-tabs__btn:hover{border-color:#3b82f6;color:#1d4ed8;text-decoration:none}
.ai-tabs__btn.is-active{background:#f3f7ff;border-color:#3b82f6;color:#1d4ed8}
.ai-tabs__count{
  display:inline-flex;min-width:1.35rem;justify-content:center;padding:0 .35rem;
  border-radius:999px;background:#dbeafe;color:#1d4ed8;font-size:.78rem;
}
.ai-tabs__btn.is-active .ai-tabs__count{background:#2563eb;color:#fff}
.list-filters{
  display:flex;flex-wrap:nowrap;align-items:stretch;gap:0;margin:.2rem 0 .9rem;
  width:100%;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;
  background:var(--bg-2);box-shadow:var(--shadow-sm);
  overflow-anchor:none;position:sticky;top:0;z-index:6;
}
.list-filters__btn{
  flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;
  gap:.28rem;padding:.65rem .35rem;border:0;border-right:1px solid var(--line);
  border-radius:0;background:transparent;color:var(--ink2);cursor:pointer;
  font:inherit;font-size:.78rem;font-weight:700;text-decoration:none;text-align:center;line-height:1.15;
}
.list-filters__btn:last-child{border-right:0}
.list-filters__btn:hover{background:#fff;color:var(--brand-2);text-decoration:none}
.list-filters__btn.is-active{background:#fff;color:var(--brand-ink);box-shadow:inset 0 -2px 0 var(--brand)}
.list-filters__count{
  display:inline-flex;min-width:1.1rem;justify-content:center;padding:0 .28rem;
  border-radius:999px;background:var(--sunk);color:var(--muted);font-size:.68rem;
}
.list-filters__btn.is-active .list-filters__count{background:var(--brand-soft);color:var(--brand-ink)}
.lf-stage{width:100%;max-width:100%;min-height:12rem}
.lf-panel{margin:0}
.lf-empty{min-height:8rem;padding:.85rem 0}
.lf-empty[hidden]{display:none!important}
.lf-panel[hidden],
.table tr[hidden],
.table tr.is-lf-hidden{display:none!important}
#listings{overflow-anchor:none;scroll-margin-top:4.75rem}
.table--listings thead{display:none}
@media (max-width:420px){
  .list-filters__btn{font-size:.7rem;padding:.6rem .2rem;gap:.2rem}
  .list-filters__count{font-size:.62rem}
}
@media (max-width:680px){
  .ai-draft{grid-template-columns:1fr}
  .ai-draft__pic img{max-height:200px}
  .ai-ask__card{grid-template-columns:1fr}
}
.passkey-active{
  display:inline-block;margin:.15rem 0 .25rem;
  font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  color:var(--brand-2);background:var(--brand-soft);border-radius:999px;padding:.15rem .55rem;
}
.visually-hidden{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
}

/* ============================================================
   Forms
   ============================================================ */
input:not([type=checkbox]):not([type=radio]),select,textarea{
  width:100%;padding:.72rem .9rem;border:1.5px solid var(--line-2);border-radius:var(--r-sm);
  background:#fff;color:var(--ink);transition:border-color .15s,box-shadow .15s;
}
input::placeholder,textarea::placeholder{color:#9aa89f}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-glow);
}
textarea{resize:vertical;min-height:5rem}
select{appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236c7b73' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.4rem;cursor:pointer;
}
input[type=file]{padding:.55rem .7rem;background:var(--sunk);cursor:pointer}
input[type=file]::file-selector-button{
  font:inherit;font-weight:600;margin-right:.8rem;padding:.4rem .8rem;
  border:0;border-radius:8px;background:var(--brand-soft);color:var(--brand-2);cursor:pointer;
}
input[type=checkbox],
input[type=radio]{width:1.15rem;height:1.15rem;accent-color:var(--brand);cursor:pointer;flex:none}

/* Forms stay readable when the site shell grows on large desktops.
   Login/auth stay narrow via .panel--narrow; Ai Lister overrides where needed. */
.form{max-width:720px;width:100%;display:grid;gap:1.15rem;margin-top:1.4rem;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:1.6rem;box-shadow:var(--shadow-sm);box-sizing:border-box}
.form--narrow{max-width:660px}
body.page-post .form,
body.page-ai-lister .form{max-width:920px}
.form label{display:grid;gap:.4rem;font-weight:600;color:var(--ink);font-size:.92rem}
.frow2{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem}
/* Radio/checkbox rows: keep control tight beside copy (overrides .form label grid). */
.choice{display:flex!important;align-items:flex-start;gap:.55rem;margin:0;font-weight:600;cursor:pointer}
.choice > span{flex:1;min-width:0;font-weight:500;line-height:1.35}
.check{display:flex!important;align-items:center;gap:.55rem;align-self:end;
  padding:.72rem .9rem;border:1.5px solid var(--line-2);border-radius:var(--r-sm);background:var(--sunk)}
.lede{max-width:64ch;color:var(--ink2);font-size:1.02rem}
.biz-intro{max-width:40rem;margin:0 0 1.35rem}
.biz-intro .lede{margin:0 0 .85rem}
.biz-intro__points{
  margin:0;padding:0;list-style:none;display:grid;gap:.55rem;
  color:var(--ink2);font-size:1.02rem;line-height:1.45;
}
.biz-intro__points li{
  position:relative;padding-left:1.15rem;
}
.biz-intro__points li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:.4rem;height:.4rem;border-radius:50%;background:var(--brand);
}

/* ============================================================
   Hero — copy + art on top row; search full-width underneath
   ============================================================ */
.hero{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  grid-template-areas:
    "text art"
    "search search";
  gap:1rem 2rem;
  align-items:center;
  text-align:left;
  padding:1.2rem 0 .5rem;
}
.hero__text{grid-area:text;min-width:0}
.hero__art{grid-area:art}
.hero__search{grid-area:search;max-width:44rem;width:100%;margin:0;justify-self:start}
.hero__eyebrow{
  display:inline-flex;align-items:center;gap:.4rem;margin:0 0 .5rem;
  font-weight:700;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--brand);background:var(--brand-soft);
  padding:.3rem .7rem;border-radius:var(--r-pill);
}
.hero h1{
  margin:0 0 .5rem;
  max-width:18ch;
  font-size:clamp(1.7rem,3.6vw,2.5rem);
  font-weight:800;
  letter-spacing:-.03em;
  color:var(--ink);
}
.dotac{color:var(--accent)}
.hero p{margin:0;max-width:52ch;color:var(--ink2);font-size:1.02rem}
.hero__lead{font-weight:700;color:var(--ink)!important;margin:0 0 .35rem!important}
.hero__text .trustrow{margin:.15rem 0 .35rem}
.hero__text .trustrow-biz{margin:0}

/* Illustration — framed side asset */
.hero__art{position:relative;min-width:0;align-self:stretch;max-height:min(260px,36vh)}
.hero__art img{
  position:relative;z-index:1;
  width:100%;height:100%;max-height:min(260px,36vh);
  object-fit:cover;object-position:center 42%;
  background:#fff;border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--shadow-sm);
}

/* Search — prominent, the primary action in the first viewport */
.search{
  display:flex;gap:.5rem;max-width:44rem;margin:0;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:.5rem;box-shadow:var(--shadow-sm);
}
.hero__search.search{box-shadow:var(--shadow)}
.search input[type=search]{flex:3 1 200px;border-color:transparent;background:var(--sunk)}
.search select{flex:1 1 130px;border-color:transparent;background:var(--sunk)}
.search input:focus,.search select:focus{background:#fff}
.search .btn{flex:0 1 auto}

/* ============================================================
   Trust row — one shared pill size; CTA only changes colour
   ============================================================ */
.trustrow{
  --trust-h:2.4rem;
  --trust-pad-x:.85rem;
  --trust-fs:.84rem;
  --trust-ico:1rem;
  list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .55rem;
  margin:1rem 0 .35rem;padding:0;
}
.trustrow > li{
  display:inline-flex;align-items:center;gap:.4rem;
  box-sizing:border-box;height:var(--trust-h);min-height:var(--trust-h);
  padding:0 var(--trust-pad-x);
  font-size:var(--trust-fs);font-weight:600;line-height:1;color:var(--ink2);
  background:var(--card);border:1.5px solid var(--line);
  border-radius:var(--r-pill);box-shadow:var(--shadow-sm);
}
.trustrow > li .ico,
.trustrow__btn .ico{
  width:var(--trust-ico)!important;height:var(--trust-ico)!important;
  flex:0 0 auto;color:var(--brand);
}
.trustrow-biz{margin:0 0 .2rem;font-size:.9rem}
.trustrow-biz a{font-weight:700;color:var(--brand-2)}

/* Hand-Over Agent — same footprint as the other pills */
.trustrow__cta{
  padding:0!important;
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
}
.trustrow__btn{
  display:inline-flex;align-items:center;gap:.4rem;
  box-sizing:border-box;height:var(--trust-h);min-height:var(--trust-h);
  padding:0 var(--trust-pad-x);
  border-radius:var(--r-pill);
  font-size:var(--trust-fs);font-weight:700;line-height:1;letter-spacing:0;
  color:#fff!important;text-decoration:none!important;
  background:var(--brand);
  border:1.5px solid var(--brand-2);
  box-shadow:var(--shadow-sm);
  transition:background .14s ease, border-color .14s ease;
}
.trustrow__btn .ico{color:#fff!important}
.trustrow__btn-go{
  display:inline-flex;align-items:center;justify-content:center;
  width:var(--trust-ico);height:var(--trust-ico);margin:0;
  border-radius:50%;font-size:.65rem;font-weight:800;line-height:1;
  background:rgba(255,255,255,.22);
  transition:background .14s ease;
}
.trustrow__btn:hover{
  background:var(--brand-2);
  border-color:var(--brand-ink);
  transform:none;
  color:#fff!important;text-decoration:none!important;
}
.trustrow__btn:hover .trustrow__btn-go{background:rgba(255,255,255,.32);transform:none}
.trustrow__btn:active{transform:none}
.trustrow__btn:focus-visible{outline:2.5px solid var(--brand);outline-offset:3px}

.sx-agent-search{
  margin:.75rem 0 1rem;display:grid;grid-template-columns:1fr 1fr auto;gap:.65rem;align-items:end;
}
@media (max-width:720px){
  .sx-agent-search{grid-template-columns:1fr}
}

/* Hand-Over Agent directory — compact full-width rows */
.sx-agent-grid{
  gap:.65rem;
  margin:1rem 0 .2rem;
}
.sx-agent-grid > .sx-agent-card{
  grid-column:1 / -1;
  display:flex;
  flex-direction:column;
  gap:.45rem;
  padding:.9rem 1.05rem;
  overflow:visible;
}
.sx-agent-card__top{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap:.65rem 1rem;
}
.sx-agent-card__who{min-width:0;flex:1 1 16rem}
.sx-agent-card__name{
  margin:0;font-size:1.08rem;font-weight:800;color:var(--ink);line-height:1.2;
}
.sx-agent-card__loc{
  margin:.2rem 0 0;font-size:.86rem;font-weight:600;color:var(--ink2);line-height:1.35;
}
.sx-agent-card__stat{font-weight:600;color:var(--muted)}
.sx-agent-card__near{
  display:inline-block;margin-left:.25rem;
  font-size:.66rem;font-weight:800;letter-spacing:.02em;text-transform:uppercase;
  color:var(--brand);background:var(--brand-soft);
  padding:.08rem .38rem;border-radius:var(--r-pill);vertical-align:.05em;
}
.sx-agent-card__desc{
  margin:0;font-size:.9rem;color:var(--ink2);line-height:1.4;
}
.sx-agent-card__fees{
  margin:0;font-size:.9rem;font-weight:600;color:var(--brand-ink);line-height:1.4;
}
.sx-agent-card__fees strong{
  display:inline-block;margin-right:.35rem;
  font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--brand-ink);vertical-align:.05em;
}
.sx-agent-card__tags{
  list-style:none;display:flex;flex-wrap:wrap;gap:.3rem;margin:0;padding:0;
}
.sx-agent-card__tags li{
  font-size:.7rem;font-weight:700;color:var(--ink2);
  background:var(--sunk);border:1px solid var(--line);
  padding:.16rem .45rem;border-radius:var(--r-pill);
}
.sx-agent-card__actions{
  display:flex;flex-wrap:nowrap;align-items:center;gap:.45rem;
  flex:0 0 auto;
}
.sx-agent-card__more{
  padding:.48rem .95rem!important;
  font-size:.84rem!important;font-weight:700!important;
  white-space:nowrap;
}
.sx-fee-payer{margin:.15rem 0 0;color:var(--ink2)}
.sx-agent-card .sx-fee-payer{margin:0}
.ai-nav-count{
  display:inline-block;min-width:1.25em;padding:.05rem .4rem;margin-left:.2rem;
  border-radius:999px;background:var(--brand, #0f766e);color:#fff;font-weight:800;font-size:.78em;line-height:1.35;
}
.ai-nav-count--muted{background:var(--muted,#64748b)}
.ai-tool-lede{margin:.15rem 0 1rem}
.ai-tool-panel{margin-top:.35rem}
.photo-star-btn{
  display:inline-flex;align-items:center;justify-content:center;min-width:1.7rem;height:1.7rem;padding:0 .2rem;
  border:0;border-radius:999px;background:rgba(15,23,42,.75);color:#fbbf24;font-size:1rem;cursor:pointer;line-height:1;
}
.photo-star-btn--on,.photo-star-btn[disabled]{cursor:default}
.photo-primary-badge{
  position:absolute;top:.4rem;left:.4rem;z-index:2;padding:.12rem .45rem;
  border-radius:999px;background:#0f766e;color:#fff;font-size:.68rem;font-weight:800;letter-spacing:.02em;text-transform:uppercase;
}
.detail2__shot{position:relative}
.detail2__shot.is-primary,.post-wiz__shot.is-primary,.ai-upload-shot.is-primary{outline:2px solid #0f766e;outline-offset:2px}
.ai-helper-guide{
  margin:.55rem 0 .75rem;padding:.7rem .8rem;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;
}
.ai-helper-check{margin:.25rem 0 .55rem;padding-left:1.1rem;font-size:.86rem;color:var(--muted)}
.ai-helper-check li{margin:.15rem 0}
.ai-helper-tips{
  margin:0 0 .55rem;padding:.45rem .6rem;border-left:3px solid #0f766e;background:#f0fdfa;color:#115e59;
}
.ai-upload-previews{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:.55rem;margin:.65rem 0;
}
.ai-upload-shot{
  position:relative;margin:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#f8fafc;
}
.ai-upload-shot img{display:block;width:100%;height:88px;object-fit:cover}
.ai-upload-shot__tools{
  position:absolute;top:.25rem;right:.25rem;display:flex;gap:.2rem;z-index:2;
}
.ai-upload-shot__tools button{
  display:inline-flex;align-items:center;justify-content:center;width:1.55rem;height:1.55rem;padding:0;
  border:0;border-radius:999px;background:rgba(15,23,42,.78);color:#fff;font-size:.85rem;cursor:pointer;
}
.ai-upload-shot figcaption{
  padding:.25rem .35rem;font-size:.72rem;font-weight:700;text-align:center;background:#fff;
}
.hoa-fields{margin:.35rem 0 .65rem}
.hoa-fields__pick{margin-top:.55rem;padding:.75rem .85rem;background:var(--sunk);border:1px solid var(--line);border-radius:var(--r-sm)}
.hoa-fields__pick label{margin:0}
.hoa-fields__pick select{margin-top:.25rem}
.hoa-fields__search{display:block;margin:0 0 .55rem}
.hoa-fields__search input[type="search"]{margin-top:.25rem;width:100%}
.hoa-fields__search-hint{margin:.2rem 0 .45rem;color:var(--muted)}
.hoa-fav-form{display:inline}
.hoa-fav-btn--on{background:#fff7ed;border-color:#fb923c;color:#c2410c}
.acct-details{margin:0}
.acct-details__sum{
  cursor:pointer;list-style:none;display:flex;align-items:center;flex-wrap:wrap;gap:.35rem;
  font-size:1.05rem;font-weight:800;line-height:1.3;
}
.acct-details__sum::-webkit-details-marker{display:none}
.acct-details__sum::before{
  content:'▸';display:inline-block;margin-right:.15rem;color:var(--muted);font-weight:700;
  transition:transform .15s ease;
}
.acct-details[open] > .acct-details__sum::before{transform:rotate(90deg)}
.acct-details__body{margin-top:.75rem}
.hoa-fav-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.hoa-fav-list__item{
  display:flex;flex-wrap:wrap;gap:.65rem;align-items:center;justify-content:space-between;
  padding:.7rem .8rem;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;
}
.hoa-fav-list__who{min-width:0;flex:1 1 12rem}
.hoa-fav-list__name{font-weight:700;text-decoration:none}
.hoa-fav-list__name:hover{text-decoration:underline}
.hoa-fav-list__actions{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.sx-agent-card__actions{display:flex;flex-wrap:wrap;gap:.35rem;align-items:flex-start;justify-content:flex-end}
.sx-agent-fees-hero{
  margin:.65rem 0 .35rem;
  font-size:1rem;font-weight:600;color:var(--brand-ink);line-height:1.4;
  max-width:42rem;
}
.sx-agent-fees-hero__label{
  display:inline-block;margin-right:.4rem;
  font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--brand-ink);vertical-align:.05em;
}
.sx-agent-fees-hero__text{font-weight:700}
.sx-agent-book--focus{
  border-color:rgba(11,125,84,.35);
  box-shadow:0 0 0 3px var(--brand-glow);
}
@media (max-width:680px){
  .sx-agent-grid > .sx-agent-card{padding:.85rem .9rem}
}

.samples-banner{margin-top:.9rem}

/* ============================================================
   Feature strip (legacy markup fallback) — kept compact
   ============================================================ */
.features{display:flex;flex-wrap:wrap;gap:.5rem;margin:.85rem 0 .3rem}
.feature{display:inline-flex;gap:.5rem;align-items:center;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:.4rem .8rem;box-shadow:var(--shadow-sm)}
.feature__ic{flex:none;width:1.5rem;height:1.5rem;border-radius:7px;display:grid;place-items:center;
  background:var(--brand-soft);color:var(--brand)}
.feature__ic .ico{width:.95rem!important;height:.95rem!important}
.feature>div strong{font-size:.85rem;color:var(--ink);line-height:1.2}
.feature>div span{display:none}

/* ============================================================
   Empty state — intentional, compact (never a giant void)
   ============================================================ */
.empty--inline{
  margin:1rem 0 1.4rem;padding:1.5rem 1.5rem;text-align:left;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;
}
.empty--inline h2{margin:0 0 .35rem;font-size:1.2rem}
.empty--inline p{margin:0 0 .75rem;color:var(--ink2);max-width:54ch}
.empty--inline .btn{margin:.1rem .45rem .1rem 0}

/* ============================================================
   Icons — hard size floor so stale CSS never blows them up
   ============================================================ */
.ico{
  width:1.15em!important;height:1.15em!important;
  max-width:1.5rem;max-height:1.5rem;
  display:inline-block;flex:none;vertical-align:-.18em;
  overflow:visible;
}
.btn .ico{width:1.05em!important;height:1.05em!important;max-width:1.15rem;max-height:1.15rem;vertical-align:0;margin:0}
.search .btn .ico{margin-right:-.1rem}
.trustrow .ico{width:1rem!important;height:1rem!important;max-width:1rem;max-height:1rem}
h3>.ico{width:1.1em!important;height:1.1em!important;color:var(--brand);margin-right:.45rem;vertical-align:-.16em}
.eyebrow .ico{width:1rem!important;height:1rem!important;max-width:1rem;max-height:1rem}
.safenote .ico{color:var(--accent-2);margin-right:.4rem;vertical-align:-.2em}

/* ============================================================
   Photo placeholders (inside card crop — not full page)
   ============================================================ */
.ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;
  color:var(--ph-ink);background-color:var(--ph-tint);
  background-image:radial-gradient(circle at 1px 1px, rgba(16,36,29,.05) 1px, transparent 0);
  background-size:15px 15px;overflow:hidden}
.ph__icon{display:grid;place-items:center;color:var(--ph-ink)}
.ph__icon .ico{width:2.6rem!important;height:2.6rem!important;max-width:2.6rem;max-height:2.6rem;opacity:.92}
.ph__tag{display:inline-flex;align-items:center;gap:.35rem;max-width:86%;
  font-size:.72rem;font-weight:700;color:var(--ph-ink);
  background:rgba(255,255,255,.78);border:1px solid rgba(16,36,29,.06);
  padding:.2rem .55rem;border-radius:var(--r-pill)}
.ph__tag>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ph__pin{width:.85rem!important;height:.85rem!important;max-width:.85rem;max-height:.85rem;color:var(--brand);flex:none}
.ph--big{position:static;aspect-ratio:4/3;border-radius:var(--r);border:1px solid var(--line);gap:.55rem}
.ph--big .ph__icon .ico{width:3.2rem!important;height:3.2rem!important;max-width:3.2rem;max-height:3.2rem}
.ph--big .ph__tag{font-size:.8rem}
/* Google-feed originals >4MB — shown until dedicated cron resamples to 720 WebP */
.ph--oversize{--ph-tint:#e8eee9;--ph-ink:#3d5246;background-color:var(--ph-tint);
  background-image:linear-gradient(145deg,rgba(46,90,62,.06),transparent 55%),
    radial-gradient(circle at 1px 1px,rgba(16,36,29,.05) 1px,transparent 0)}
.ph--oversize .ph__tag{white-space:normal;text-align:center;line-height:1.25;max-width:92%}
.ph--oversize-failed{--ph-tint:#f3ebe6;--ph-ink:#6b4535;
  background-image:linear-gradient(145deg,rgba(140,70,40,.07),transparent 55%),
    radial-gradient(circle at 1px 1px,rgba(80,40,20,.06) 1px,transparent 0)}
.detail2__shot .ph--oversize{position:relative;inset:auto;width:100%;min-height:min(52vh,420px);
  border:0;border-radius:0;aspect-ratio:auto}
.acct-too-large{margin:0 0 1rem;text-align:left}
.acct-too-large__list{list-style:none;margin:.55rem 0 0;padding:0}
.acct-too-large__list li{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .55rem;
  padding:.45rem 0;border-top:1px solid rgba(122,82,0,.18)}
.acct-too-large__list li:first-child{border-top:0;padding-top:0}
.acct-too-large__title{flex:1 1 12rem;min-width:0;font-weight:600}
.acct-too-large__why{display:block;font-weight:500;margin-top:.15rem}
.acct-too-large__actions{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.inv-photo-issue{color:#6b4535;margin:.2rem 0 0}

/* ============================================================
   Secondary page head — image capped beside copy
   ============================================================ */
.pagehead{display:grid;grid-template-columns:1.15fr .85fr;gap:1.4rem 1.8rem;align-items:center;margin:.6rem 0 1.2rem}
.pagehead__text h1{margin:.35rem 0 .4rem;font-size:clamp(1.5rem,3vw,2rem)}
.pagehead__text .lede{margin-bottom:.9rem}
.pagehead__text .btn{margin:.1rem .45rem .1rem 0}
.pagehead__art{max-height:min(260px,36vh)}
.pagehead__art img{width:100%;height:100%;max-height:min(260px,36vh);object-fit:cover;object-position:center;
  border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.eyebrow{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;font-size:.76rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--brand);background:var(--brand-soft);padding:.3rem .72rem;border-radius:var(--r-pill)}

/* ============================================================
   Listing grid + cards — photo-first, modern
   ============================================================ */
.grid{
  display:grid;
  /* Desktop: as many columns as fit. Phones/tablets keep fixed counts so
     tiles don’t collapse to a single orphan between breakpoints. */
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:1.1rem;
  margin:1.4rem 0;
}
@media (max-width:980px){
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:680px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
}
.card{
  position:relative;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--shadow-sm);text-decoration:none!important;
  display:flex;flex-direction:column;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-2)}
.card__link{display:flex;flex-direction:column;flex:1;min-width:0;text-decoration:none!important;color:inherit}
.card__img{aspect-ratio:1/1;background:linear-gradient(135deg,#eef2ef,#e3ebe6);display:grid;place-items:center;position:relative;overflow:hidden}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease;image-orientation:none}
.card:hover .card__img img{transform:scale(1.04)}
.sold-stamp{
  position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:3;
  background:rgba(15,23,42,.28);
  font-family:var(--font-display);font-size:clamp(1.35rem,5vw,1.85rem);font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.45);
  transform:rotate(-18deg);
}
.sold-stamp::before{
  content:"Sold";padding:.2rem .55rem;border:3px solid #fff;border-radius:6px;
  background:rgba(185,28,28,.82);box-shadow:0 6px 18px rgba(0,0,0,.25);
}

/* Chips overlaid on the photo (Sample / Shop) */
.card__chip{
  position:absolute;top:.55rem;left:.55rem;z-index:2;
  font-size:.68rem;font-weight:700;letter-spacing:.02em;
  padding:.22rem .55rem;border-radius:var(--r-pill);
  background:rgba(22,36,29,.72);color:#fff;backdrop-filter:blur(4px);
  box-shadow:0 2px 6px -2px rgba(16,36,29,.4);
}
.card__chip--shop{background:var(--brand);left:auto;right:.55rem}
/* stack cleanly if both present */
.card__chip + .card__chip--shop{top:.55rem}
/* Business Plus brand as a ribbon on the photo (keeps every tile the same height) */
.card__brand-chip{
  position:absolute;top:.55rem;left:.55rem;z-index:4;
  max-width:calc(100% - 1.1rem);
  display:inline-block;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-family:var(--font-display,var(--font-body));
  font-size:.68rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  padding:.26rem .6rem;border-radius:var(--r-pill);
  background:var(--brand);color:#fff!important;text-decoration:none!important;
  box-shadow:0 2px 8px -2px rgba(16,36,29,.5);
}
a.card__brand-chip:hover{background:var(--brand-2,var(--brand));text-decoration:underline!important;text-underline-offset:.15em}
/* Bottom of tile: area/category left, Guardian hard-right */
.card__meta-row{
  display:flex;align-items:flex-end;justify-content:space-between;gap:.55rem;
  margin-top:auto;padding-top:.55rem;min-width:0;width:100%;
}
.card__meta-row .meta{margin:0;flex:1 1 auto;min-width:0;padding-right:.25rem}
.card__tier{
  flex:0 0 auto;line-height:1;margin-left:auto;align-self:flex-end;
  text-align:right;
}
.card__tier .badge{
  display:inline-block;margin:0;padding:.16rem .42rem;
  font-size:.62rem;font-weight:800;letter-spacing:.02em;
  border-radius:999px;border-width:1px;white-space:nowrap;
}

.noimg{color:var(--muted);font-size:.85rem;font-weight:600}
.noimg--big{padding:4rem 0;text-align:center;background:linear-gradient(135deg,#eef2ef,#e3ebe6);border-radius:var(--r);color:var(--muted)}
.card__body{
  padding:.8rem .9rem .85rem;display:flex;flex-direction:column;gap:.12rem;
  flex:1 1 auto;min-height:0;
}
.card__brand,
a.card__brand{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  margin:0;padding:.65rem .9rem .15rem;
  font-family:var(--font-display,var(--font-body));
  font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--brand)!important;line-height:1.25;text-decoration:none!important;
  overflow-wrap:anywhere;word-break:break-word;max-width:100%;
}
a.card__brand:hover{text-decoration:underline!important;text-underline-offset:.15em}
.card__brand--static{cursor:default}
.card--branded{
  border:2px solid var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 16%,transparent),var(--shadow-sm);
}
.card--branded:hover{
  border-color:var(--brand-2,var(--brand));
  box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 22%,transparent),var(--shadow);
}
.card__img--promo{
  background:#0b7d54;
  color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.5rem;padding:1.1rem .85rem;text-align:center;
}
.card__img--promo-ai{background:#096b48}
.card__img--promo .ico{width:2.6rem;height:2.6rem;stroke:#fff;flex:0 0 auto}
.card__promo-mark{
  font-family:var(--font-display,var(--font-body));
  font-size:.95rem;font-weight:800;letter-spacing:-.02em;line-height:1.2;color:#fff;
  max-width:14ch;
}
.card--promo .price{color:var(--brand)}
.seller-cat__search{
  max-width:44rem;width:100%;margin:1rem 0 0;box-shadow:var(--shadow-sm);
}
.seller-cat__search .btn--ghost{flex:0 1 auto}
.pager{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.65rem 1rem;
  margin:.85rem 0 .35rem;
}
.pager__left{
  display:flex;flex-wrap:wrap;align-items:center;gap:.55rem 1rem;min-width:0;
}
.pager__meta{margin:0}
.pager__perpage{
  display:inline-flex;align-items:center;gap:.4rem;margin:0;flex-wrap:wrap;
}
.pager__perpage-label{margin:0;color:var(--muted);white-space:nowrap}
.pager__perpage select{
  min-height:2rem;padding:.25rem 1.8rem .25rem .55rem;font-size:.85rem;
  border-color:var(--line);background:var(--sunk);width:auto;min-width:4.5rem;
}
.pager__btns{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem}
.pager__page{margin:0 .15rem}
form.pager__goto{
  display:inline-flex!important;flex-direction:row!important;flex-wrap:nowrap!important;
  align-items:center;gap:.35rem;margin:0 0 0 .35rem;
  flex:0 0 auto;width:auto!important;max-width:100%;
}
.pager__goto-label{display:inline!important;margin:0;color:var(--muted);white-space:nowrap}
/* Beat input:not([type=checkbox]):not([type=radio]){width:100%} — was tying at 0,2,1
   and letting the field go full-width, which wrapped Go to / field / Go into a stack. */
nav.pager form.pager__goto input.pager__goto-input[type=number]{
  width:3rem!important;min-width:0!important;max-width:3.25rem!important;
  flex:0 0 3rem!important;align-self:center;box-sizing:border-box;
  min-height:2rem;padding:.25rem .3rem;font-size:.85rem;text-align:center;
  border:1px solid var(--line);border-radius:var(--radius-sm,6px);background:var(--sunk);color:var(--ink);
  -moz-appearance:textfield!important;appearance:textfield!important;
}
nav.pager form.pager__goto input.pager__goto-input[type=number]::-webkit-outer-spin-button,
nav.pager form.pager__goto input.pager__goto-input[type=number]::-webkit-inner-spin-button{
  -webkit-appearance:none!important;margin:0!important;display:none!important;
}
.pager .btn.is-disabled{opacity:.45;pointer-events:none}
@media (max-width:520px){
  .pager{align-items:stretch}
  .pager__left{width:100%;justify-content:space-between}
  .pager__btns{width:100%;justify-content:space-between}
  form.pager__goto{margin-left:auto;margin-top:.15rem}
}

.listing-brand{
  margin:.15rem 0 .45rem;font-family:var(--font-display,var(--font-body));
  font-size:.92rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  color:var(--brand);overflow-wrap:anywhere;word-break:break-word;max-width:100%;
}
a.listing-brand__link{
  color:var(--brand)!important;text-decoration:none!important;
  font:inherit;letter-spacing:inherit;text-transform:inherit;
}
a.listing-brand__link:hover{text-decoration:underline!important;text-underline-offset:.18em}
.price{font-weight:800;color:var(--ink);font-size:1.08rem;letter-spacing:-.02em}
.price--big{font-size:1.9rem;display:inline-block;margin-bottom:.1rem;color:var(--brand)}
.card h3{font-family:var(--font-body);font-weight:600;font-size:.96rem;color:var(--ink2);margin:.05rem 0 .3rem;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  /* reserve two lines so 1-line and 2-line titles occupy the same height and tiles stay level */
  min-height:2.6em}
.meta{font-size:.8rem;color:var(--muted);display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}

/* ============================================================
   Listing detail
   ============================================================ */
/* Desktop: narrower media column so hero + extras share one column width.
   Imgs are width:100% (scale to column). Tall portraits hit max-height and
   letterbox via object-fit:contain; border/bg live on .detail2__shot so frames
   stay matched even when the bitmap is narrower. Mobile stacks at ≤820px. */
.detail2{display:grid;grid-template-columns:.78fr 1fr;gap:1.25rem;margin-top:1.4rem}
.detail2__media{display:grid;gap:.9rem;align-content:start;justify-items:stretch;width:100%;max-width:100%}
.detail2__media img{
  border:0;box-shadow:none;border-radius:0;background:transparent;
  width:100%;max-width:100%;height:auto;max-height:min(70vh,720px);
  object-fit:contain;object-position:center;display:block;image-orientation:none;
}
.detail2__shot{
  position:relative;overflow:hidden;border-radius:var(--r);width:100%;margin:0;
  border:1px solid var(--line);box-shadow:var(--shadow-sm);background:#eef2ef;
  display:flex;justify-content:center;align-items:center;
}
.detail2__shot img{
  display:block;margin:0 auto;width:100%;max-width:100%;height:auto;
  max-height:min(70vh,720px);object-fit:contain;object-position:center;
}
.detail2__shot .sold-stamp{font-size:clamp(1.6rem,6vw,2.4rem)}
.detail2__rotate{
  position:absolute;right:.6rem;bottom:.6rem;display:flex;gap:.35rem;margin:0;
  background:rgba(22,36,29,.72);backdrop-filter:blur(6px);border-radius:999px;padding:.25rem;
}
.detail2__rotate button{
  appearance:none;border:0;background:transparent;color:#fff;cursor:pointer;
  width:2.1rem;height:2.1rem;border-radius:999px;font-size:1.15rem;line-height:1;
  display:grid;place-items:center;
}
.detail2__rotate button:hover{background:rgba(255,255,255,.18)}
.detail2__info{align-self:start}
.detail2__info h1{margin:.15rem 0 .4rem}
.desc{margin:1.1rem 0 1.4rem;white-space:pre-line;color:var(--ink2)}

/* ============================================================
   Panels
   ============================================================ */
.panel{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:1.3rem 1.4rem;box-shadow:var(--shadow-sm);margin:1.1rem 0;
}
.panel h3{margin-bottom:.6rem}
.settings-subhead{
  margin:.9rem 0 .4rem;font-size:1.05rem;font-weight:700;
  display:flex;align-items:center;gap:.45rem;
}
.panel--center{text-align:center;max-width:560px;margin:2.6rem auto;padding:2.2rem;box-shadow:var(--shadow)}
.panel--center h1{margin-bottom:.5rem}
.panel--narrow{max-width:470px}
.panel--narrow form{display:grid;gap:.8rem;margin-top:1rem}
.safenote{
  margin-top:.85rem;font-size:.82rem;line-height:1.45;background:var(--accent-soft);color:#8a4a12;
  border:1px solid #f6d9be;border-radius:var(--r-sm);padding:.55rem .75rem;
}
.safenote__title{
  display:flex;align-items:center;gap:.35rem;font-size:.78rem;font-weight:800;
  letter-spacing:.02em;color:#7a4210;margin:0 0 .2rem;
}
.safenote__title .ico{width:.95rem!important;height:.95rem!important;color:var(--accent-2);margin:0}
.safenote p{margin:0;color:#8a4a12}
.safenote a{color:var(--accent-2);font-weight:700}

.sx-disclaimer{
  margin:.75rem 0 1rem;padding:.65rem .85rem;border-radius:var(--r-sm);
  background:var(--brand-soft);border:1px solid color-mix(in srgb,var(--brand) 28%,transparent);
  color:var(--ink2);line-height:1.45;
}
.page-sx .sx-status-form{display:grid;gap:.7rem}

.share{margin:1.1rem 0 0}
.share__label{display:flex;align-items:center;gap:.4rem;font-size:.85rem;font-weight:700;color:var(--ink2);margin-bottom:.5rem}
.share__label .ico{width:1rem!important;height:1rem!important;color:var(--brand);vertical-align:-.15em}
.share__row{display:flex;flex-wrap:wrap;gap:.5rem}
.share__row .btn{display:inline-flex;align-items:center;gap:.35rem;padding:.4rem .75rem;font-size:.85rem}
.share__row .btn .ico{width:1rem!important;height:1rem!important}
.share__copy--done{background:var(--brand-soft);color:var(--brand-2);border-color:var(--brand)}

.report{margin-top:1rem}
.report summary{cursor:pointer;color:var(--muted);font-size:.9rem;margin:.4rem 0;
  list-style:none;display:inline-flex;align-items:center;gap:.4rem;font-weight:600;user-select:none}
.report summary::-webkit-details-marker{display:none}
.report summary::before{content:"\2691";font-size:.85rem}
.report summary:hover{color:var(--danger)}
.report[open] summary{color:var(--danger);margin-bottom:.7rem}
.report form{display:grid;gap:.7rem;max-width:440px;background:var(--danger-soft);
  border:1px solid #f2cfcc;border-radius:var(--r-sm);padding:1rem}

/* ============================================================
   Badges (reputation tiers) + status pills
   ============================================================ */
.badge{display:inline-flex;align-items:center;gap:.25rem;font-size:.7rem;font-weight:700;
  padding:.18rem .55rem;border-radius:var(--r-pill);vertical-align:middle;letter-spacing:.01em;
  border:1px solid transparent;line-height:1.4}
.badge::before{content:"";width:.4rem;height:.4rem;border-radius:50%;background:currentColor;opacity:.8}
.badge--new{background:var(--sunk);color:var(--muted)}
.badge--member{background:var(--brand-soft);color:var(--brand)}
.badge--trusted{background:#d5ede2;color:#0a5d47;border-color:#b3dccb}
.badge--guardian{background:var(--gold-soft);color:var(--gold);border-color:#f0d9a8}
.badge--biz{background:#e6eefb;color:#2a5f9e;border-color:#c5d7ef}
.badge--biz::before{display:none}
.badge--user{background:var(--sunk);color:var(--muted);border-color:var(--line)}
.badge--user::before{display:none}
.badge--business{background:#d5ede2;color:#0a5d47;border-color:#b3dccb}
.badge--business::before{display:none}
.badge--plus{background:#ffedd5;color:#c2410c;border-color:#fed7aa}
.badge--plus::before{display:none}
.badge--staff{background:#ffedd5;color:#c2410c;border-color:#fdba74}
.badge--staff::before{display:none}

.status{display:inline-block;font-size:.72rem;font-weight:700;padding:.2rem .6rem;border-radius:var(--r-pill);
  background:var(--sunk);color:var(--muted);text-transform:capitalize;letter-spacing:.01em}
.status--live{background:var(--brand-soft);color:var(--brand)}
.status--pending{background:var(--gold-soft);color:var(--gold)}
.status--flagged,.status--removed{background:var(--danger-soft);color:var(--danger)}
.status--sold{background:#e6eafb;color:#3f51b5}
.status--expired,.status--paused{background:var(--sunk);color:var(--muted)}
.status--approved{background:var(--brand-soft);color:var(--brand)}
.status--rejected,.status--revoked{background:var(--danger-soft);color:var(--danger)}

/* ============================================================
   Account / admin / reputation
   ============================================================ */
.acct-title{margin-bottom:.35rem}
.acct-title__plan{color:var(--brand-2);font-weight:700}
.acct{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem;margin-top:1rem;align-items:stretch}
.acct > .panel{margin:0;height:100%;box-sizing:border-box}

/* Inventory source — Business Plus feed/CSV toggle */
.inv-source.form{
  max-width:720px;width:100%;margin:1.4rem 0 1.25rem;
  display:grid;gap:1.15rem;align-content:start;
}
.inv-source__head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;flex-wrap:wrap;
}
.inv-source__title{margin:0;font-size:clamp(1.2rem,2.6vw,1.4rem)}
.inv-source__lede{margin:.35rem 0 0;max-width:46ch}
.inv-source__mode-form{display:grid;gap:.55rem;margin:0}
.inv-toggle{
  display:flex;align-items:center;justify-content:center;gap:.85rem;flex-wrap:wrap;
  padding:.85rem 1rem;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--sunk);
}
.inv-toggle__label{
  font-size:.9rem;font-weight:700;color:var(--muted);min-width:5.5rem;text-align:center;
  transition:color .15s;
}
.inv-toggle__label.is-active{color:var(--brand-ink)}
.inv-toggle__switch{
  position:relative;display:inline-flex!important;align-items:center;margin:0;cursor:pointer;
  width:3.35rem;height:1.9rem;flex:0 0 auto;padding:0;font-weight:inherit;
}
.inv-toggle__switch input{
  position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:2;
}
.inv-toggle__track{
  display:block;width:100%;height:100%;border-radius:999px;
  background:var(--line-2);border:1.5px solid var(--line-2);
  transition:background .18s,border-color .18s;box-sizing:border-box;
}
.inv-toggle__knob{
  position:absolute;top:50%;left:3px;width:1.4rem;height:1.4rem;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(16,36,29,.22);
  transform:translateY(-50%);transition:left .18s;
  pointer-events:none;
}
.inv-toggle__switch input:checked + .inv-toggle__track{
  background:var(--brand);border-color:var(--brand-2);
}
.inv-toggle__switch input:checked + .inv-toggle__track .inv-toggle__knob{left:calc(100% - 1.4rem - 3px)}
.inv-toggle__switch input:focus-visible + .inv-toggle__track{
  outline:2.5px solid var(--brand);outline-offset:2px;
}
.inv-toggle__hint{margin:0;text-align:center}
.inv-source__panel{
  display:grid;gap:1rem;padding:1rem 0 0;border-top:1px solid var(--line);
}
.inv-source__panel[hidden]{display:none!important}
.inv-benefits{
  margin:0;padding:0;list-style:none;display:grid;gap:.45rem;
  font-size:.9rem;color:var(--ink2);line-height:1.4;
}
.inv-benefits li{
  position:relative;padding-left:1.15rem;
}
.inv-benefits li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:.4rem;height:.4rem;border-radius:50%;background:var(--brand);
}
.inv-help{
  display:grid;gap:.35rem;padding:.85rem .95rem;
  background:var(--sunk);border:1px solid var(--line);border-radius:var(--r-sm);
}
.inv-help .tiny{margin:0}
.inv-source__fields{display:grid;gap:1rem;margin:0}
.inv-source__fields .actions{margin:0}

/* Inventory product list — searchable, paged, mobile cards */
.inv-products{margin:1.5rem 0 2rem;width:100%;max-width:100%}
.inv-products__head h2{margin:0 0 .25rem}
.inv-products__lede{margin:0 0 .85rem;max-width:56ch}
.inv-products__search{
  max-width:52rem;width:100%;margin:0 0 .65rem;box-shadow:var(--shadow-sm);
}
.inv-products__search select{flex:1 1 9rem;min-width:8rem}
.inv-products__danger{margin-top:1rem}
.table--inventory{table-layout:fixed}
.table--inventory th:nth-child(1),.table--inventory td.inv-product{width:38%}
.table--inventory th:nth-child(2),.table--inventory td.inv-price{width:7.5rem}
.table--inventory th:nth-child(3),.table--inventory td.inv-views{width:5.5rem;text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.table--inventory th:nth-child(3){text-align:right}
.table--inventory th:nth-child(4),.table--inventory td.inv-avail{width:10.5rem}
.table--inventory th:nth-child(5){width:6.5rem}
.table--inventory th:nth-child(6){width:auto}
.inv-product__title{
  display:block;font-weight:700;line-height:1.3;
  overflow-wrap:anywhere;word-break:break-word;
}
.inv-product__meta{
  display:flex;flex-wrap:wrap;gap:.2rem .55rem;margin:.2rem 0 0;color:var(--muted);
}
.inv-product__views-m{display:none;font-weight:600;color:var(--ink2)}
.inv-product__url{margin:.25rem 0 0;max-width:100%}
.inv-url{
  display:inline-block;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom;
}
.inv-avail__form{margin:0}
.inv-avail__form select{
  width:100%;min-width:0;min-height:2.45rem;font-size:.95rem;padding:.45rem .55rem;
}
.inv-integrity__notes{
  margin:.3rem 0 0;line-height:1.35;color:var(--muted);
  overflow-wrap:anywhere;word-break:break-word;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
.table--inventory thead{display:table-header-group}

.repline{font-size:1.15rem;display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}

/* Ai credits — balance panel internals only */
.ai-pack-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem;margin-top:.35rem;
}
@media (min-width:720px){
  .ai-pack-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.ai-pack{
  margin:0;padding:.75rem .7rem;border:1px solid var(--line);border-radius:12px;background:var(--card,#fff);
  display:flex;flex-direction:column;gap:.2rem;text-align:center;
}
.ai-pack--feat{border-color:var(--green,#0b7d54);box-shadow:0 0 0 1px rgba(11,125,84,.18)}
.ai-pack__credits{margin:0;font-size:1.05rem}
.ai-pack__credits strong{font-size:1.45rem;font-weight:800}
.ai-pack__price{margin:0;font-size:1.15rem;font-weight:800;color:var(--ink)}
.ai-pack__per{margin:0 0 .45rem;opacity:.75}
.ai-pack .btn{width:100%;margin-top:auto}
.panel.ai-cred-bal{display:flex;flex-direction:column}
.panel.ai-cred-bal h3{margin-bottom:.75rem}
.ai-cred-bal__row{
  display:flex;flex-direction:column;justify-content:space-between;gap:1.1rem;flex:1;
}
.ai-cred-bal__n{margin:0;font-size:1.15rem;color:var(--ink2)}
.ai-cred-bal__n strong{font-size:2.1rem;font-weight:800;color:var(--ink);margin-right:.2rem;letter-spacing:-.02em}
.ai-cred-bal__actions{margin-top:auto}
/* Same height for every button in the two credit cards */
.acct .btn{
  min-height:2.75rem;height:2.75rem;padding:0 1.25rem;font-size:.95rem;font-weight:700;
  border-width:1.5px;box-shadow:none;transform:none;
}
.acct .btn:hover{transform:none}
.events{list-style:none;display:grid;gap:.55rem;font-size:.92rem}
.events li{padding:.55rem .7rem;background:var(--bg-2);border:1px solid var(--line);border-radius:9px;line-height:1.4}
.events .pos{color:var(--ok);font-weight:800;margin-right:.2rem}
.events .neg{color:var(--danger);font-weight:800;margin-right:.2rem}
.rules{margin-left:1.2rem;display:grid;gap:.55rem}
.rules li{padding-left:.2rem}
.rules .pos{color:var(--ok);font-weight:800}
.rules .neg{color:var(--danger);font-weight:800}

.table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);margin:.4rem 0}
.table th,.table td{padding:.75rem .9rem;border-bottom:1px solid var(--line);text-align:left;font-size:.92rem;vertical-align:middle}
.table tr:last-child td{border-bottom:0}
.table th{background:var(--bg-2);color:var(--ink);font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.table tbody tr:hover td,.table tr:hover td{background:var(--bg-2)}
/* My listings — AI Lister rows */
.table tr.mine-ai td{background:#f3f7ff}
.table tr.mine-ai:hover td{background:#eaf1ff}
.table tr.mine-ai td:first-child{box-shadow:inset 3px 0 0 #3b82f6}
.mine-ai__mark{
  display:inline-flex;align-items:center;gap:.25rem;
  height:1.55rem;padding:0 .45rem 0 .35rem;margin:0 .45rem 0 0;vertical-align:-.35rem;
  border-radius:999px;background:#dbeafe;color:#2563eb;
}
.mine-ai__ico{width:.95rem;height:.95rem;flex:0 0 auto}
.mine-ai__label{
  font-size:.95rem;font-weight:800;line-height:1;letter-spacing:.01em;color:#2563eb;
}
.saved-draft__thumb{
  width:2.4rem;height:2.4rem;object-fit:cover;border-radius:6px;border:1px solid var(--line);
  vertical-align:middle;margin:0 .4rem 0 .15rem;background:var(--sunk);
}
/* My listings: readable text, fixed thumb, no stretch gaps */
.table-scroll:has(.table--listings){
  margin:.25rem 0;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible;
}
.table--listings{
  border:0;box-shadow:none;background:transparent;border-radius:0;
}
.table--listings th,.table--listings td{padding:.4rem .45rem;font-size:.95rem;vertical-align:middle}
.table--listings .mine-ai__mark{height:1.35rem;padding:0 .4rem 0 .32rem;margin:0 .35rem 0 0;vertical-align:-.25rem}
.table--listings .mine-ai__ico{width:.9rem;height:.9rem}
.table--listings .mine-ai__label{font-size:.82rem}
.table--listings .status{font-size:.78rem;padding:.18rem .5rem;font-weight:750}
.mine-listing__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) 3.75rem;
  grid-template-rows:auto auto;
  column-gap:.65rem;row-gap:.2rem;
  align-items:start;width:100%;min-width:0;
}
.mine-listing__text{
  grid-column:1;grid-row:1 / span 2;
  display:flex;flex-direction:column;gap:.2rem;justify-content:flex-start;
  min-width:0;align-self:start;
}
.mine-listing__title{
  font-size:1.02rem;line-height:1.3;font-weight:700;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
.mine-listing__title a{font-weight:700}
.mine-listing__thumb{
  grid-column:2;grid-row:1 / span 2;
  width:3.75rem;height:3.75rem;object-fit:cover;align-self:start;justify-self:end;
  border-radius:8px;border:1px solid var(--line);background:var(--sunk);
  max-width:none!important;
}
.table--listings .mine-listing__thumb{width:3.75rem;height:3.75rem;max-width:none!important}
.mine-listing__thumb--ph{padding:0;overflow:hidden;display:flex;align-items:center;justify-content:center}
.mine-listing__thumb--ph .ph--oversize{position:static;inset:auto;width:100%;height:100%;min-height:0;
  border:0;border-radius:7px;aspect-ratio:auto}
.mine-listing__thumb--ph .ph__tag{display:none}
.mine-listing__meta{
  display:flex;align-items:center;gap:.45rem;flex-wrap:nowrap;
  white-space:normal;width:100%;min-width:0;
}
.mine-listing__meta-text{
  flex:1 1 auto;min-width:0;line-height:1.3;font-size:.92rem;color:var(--ink2);font-weight:600;
}
.mine-listing__stats{font-weight:500;opacity:.88;white-space:nowrap}
.mine-listing__meta .status{margin-left:auto;flex:0 0 auto}
.table--listings td.actions form,
.table--listings .actions form{
  display:flex;flex-wrap:nowrap;align-items:center;gap:.35rem;width:100%;margin:0;
}
.table--listings td.actions .btn,
.table--listings .actions .btn{
  flex:1 1 0;min-width:0;max-width:none;justify-content:center;
  padding:.48rem .28rem;font-size:.8rem;font-weight:700;white-space:nowrap;min-height:2.35rem;line-height:1.15;
}
.table--listings td.actions .mine-listing__actions-note{
  display:flex;align-items:center;min-height:2.35rem;font-size:.9rem;font-weight:600;color:var(--muted);
}
/* Same card chrome for Draft panel as Active / Expired / Archived */
.lf-panel[data-lf-panel="draft"] .table-scroll:has(.table--listings),
.lf-panel[data-lf-panel="listings"] .table-scroll:has(.table--listings){
  margin:.25rem 0;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible;
}
/* Nested in a panel: drop the second outer frame */
.panel > .table{
  border:0;box-shadow:none;border-radius:0;margin:.15rem 0 .55rem;background:transparent;
}
.panel > .table th{background:var(--sunk)}
.panel > .table tr:hover td{background:var(--bg-2)}

/* Reputation guide */
.rep{max-width:none;width:100%;margin:0 auto .5rem}
.rep__intro{margin:0 0 1.6rem}
.rep__intro h1{margin:.15rem 0 .45rem}
.rep__intro .lede{margin:0;max-width:48rem;color:var(--ink2)}
.rep__block{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:1.25rem 1.35rem;box-shadow:var(--shadow-sm);margin:0 0 1.1rem;
}
.rep__block h2{
  margin:0 0 .9rem;font-size:1.05rem;font-weight:750;display:flex;align-items:center;gap:.4rem;
}
.rep__grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin:0}
.rep__block--wide{grid-column:1 / -1;margin:0}
.rep .table-scroll--fit{border:0;box-shadow:none;background:transparent;margin:0 0 .75rem}
.rep .table-scroll--fit .table{min-width:0;width:100%;border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:none}
.table--tiers th,.table--tiers td{white-space:nowrap}
.table--tiers td:first-child,.table--tiers th:first-child{width:7.5rem}
.rep__rules,.rep__steps{list-style:none;margin:0;padding:0;display:grid;gap:0}
.rep__rules li,.rep__steps li{
  display:grid;grid-template-columns:2.6rem 1fr;gap:.65rem;align-items:start;
  padding:.7rem 0;border-bottom:1px solid var(--line);font-size:.94rem;line-height:1.45;color:var(--ink2);
}
.rep__rules li:last-child,.rep__steps li:last-child{border-bottom:0;padding-bottom:0}
.rep__rules li:first-child,.rep__steps li:first-child{padding-top:0}
.rep__rules .pos,.rep__rules .neg{font-weight:800;font-variant-numeric:tabular-nums;padding-top:.05rem}
.rep__rules .pos{color:var(--ok)}
.rep__rules .neg{color:var(--danger)}
.rep__rules--plain li{grid-template-columns:1fr;padding-left:0}
.rep__steps{counter-reset:repstep}
.rep__steps li{grid-template-columns:1.6rem minmax(0,1fr);counter-increment:repstep}
.rep__steps li::before{
  content:counter(repstep);font-weight:800;color:var(--brand);font-size:.85rem;
  width:1.4rem;height:1.4rem;border-radius:50%;background:var(--brand-soft);
  display:grid;place-items:center;margin-top:.1rem;flex-shrink:0;
}
/* Keep step copy in one grid cell so inline <strong>/<br> don’t become extra columns. */
.rep__steps li > span{min-width:0;display:block}
.rep .tiny{margin:.15rem 0 0}
.modal-backdrop{
  position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:1.25rem;
  background:rgba(18,28,24,.45);backdrop-filter:blur(2px);
}
.modal{
  width:min(26rem,100%);margin:0;padding:1.35rem 1.4rem 1.25rem;
  box-shadow:var(--shadow-lg,0 18px 50px rgba(0,0,0,.18));
}
.modal h2{margin:0 0 .55rem;font-size:1.35rem}
.modal p{margin:.35rem 0}
button.linkish{
  appearance:none;background:none;border:0;padding:0;margin:0;cursor:pointer;
  color:var(--brand,#0b7d54);font:inherit;font-size:.86rem;text-decoration:underline;
}
button.linkish:hover{opacity:.85}

.table-scroll{
  width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
  margin:.4rem 0;border-radius:var(--r);border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-sm);
}
.table-scroll .table{margin:0;border:0;border-radius:0;box-shadow:none;min-width:0;width:100%}

/* Admin staff lists — card stack (phone-safe; no wide tables) */
.admin-cards{display:grid;gap:.85rem;margin:.5rem 0 1.4rem;width:100%;max-width:100%}
.admin-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:1rem 1.05rem;box-shadow:var(--shadow-sm);max-width:100%;overflow-wrap:anywhere;word-break:break-word;
}
.admin-card__title{font-weight:800;color:var(--ink);font-size:1.02rem;margin:0 0 .35rem;line-height:1.3}
.admin-card__meta{font-size:.84rem;color:var(--muted);margin:0 0 .55rem;line-height:1.45}
.admin-card__row{display:flex;flex-wrap:wrap;gap:.35rem .55rem;align-items:center;margin:.35rem 0}
.admin-card form.actions{margin-top:.7rem;padding-top:.7rem;border-top:1px solid var(--line)}
.admin-card form.actions .btn{flex:1 1 calc(50% - .3rem);min-width:0;justify-content:center}
.admin-stats{display:flex;flex-wrap:wrap;gap:.35rem .65rem;font-size:.92rem;color:var(--ink2);margin:.2rem 0 1rem}
.admin-stats span{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:.25rem .65rem;font-size:.8rem;font-weight:600}
.admin-fold{margin:0 0 1.35rem;border:1px solid var(--line);border-radius:var(--r);background:var(--card);box-shadow:var(--shadow-sm);overflow:hidden}
.admin-fold__sum{
  list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem .85rem;
  padding:.95rem 1.1rem;user-select:none;
}
.admin-fold__sum::-webkit-details-marker{display:none}
.admin-fold__sum::before{
  content:"";width:.45rem;height:.45rem;border-right:2px solid var(--ink2);border-bottom:2px solid var(--ink2);
  transform:rotate(-45deg);margin-right:.25rem;flex:none;transition:transform .15s;opacity:.7;
}
.admin-fold[open] > .admin-fold__sum::before{transform:rotate(45deg)}
.admin-fold__sum:hover{background:var(--bg-2)}
.admin-fold__title{font-size:1.15rem;font-weight:800;color:var(--ink);line-height:1.2}
.admin-fold__meta{font-size:.84rem;color:var(--muted)}
.admin-fold__meta a{color:var(--brand-2)}
.admin-fold > .panel,.admin-fold > .empty{margin:.65rem 1.1rem}
.admin-fold > .panel:last-child,.admin-fold > .empty:last-child{margin-bottom:1.1rem}
.admin-fold > .empty{padding:.5rem 0 1rem}
.staff-notes__form textarea{
  width:100%;max-width:100%;box-sizing:border-box;min-height:4.5rem;
  font-size:.9rem;line-height:1.4;resize:vertical;
}
.staff-notes__form .btn{justify-self:start}
/* Member card: Options expander under header */
.panel--focus{
  outline:2px solid var(--brand);
  outline-offset:2px;
  scroll-margin-top:1rem;
}
.member-panel{cursor:pointer}
.member-panel details.member-opts[open]{cursor:default}
.member-opts{
  margin:0;padding:0;border:0;width:100%;
}
.member-opts__email-sum{
  list-style:none;cursor:pointer;display:block;
  padding:0;margin:0;user-select:none;
}
.member-opts__email-sum::-webkit-details-marker{display:none}
.member-opts__email{
  display:block;font-size:1.15rem;font-weight:800;line-height:1.25;color:var(--ink);
  text-decoration:underline;text-decoration-color:color-mix(in srgb, var(--brand) 45%, transparent);
  text-underline-offset:.12em;
}
.member-opts__email-sum:hover .member-opts__email{color:var(--brand-2)}
.member-opts__meta{
  display:block;margin:.35rem 0 0;cursor:pointer;
}
.member-toggles{
  display:block;
  margin-top:.35rem;padding-top:.3rem;border-top:1px dashed var(--line);
  width:100%;
  cursor:pointer;
}
.member-opts__body{
  margin-top:.35rem;display:grid;gap:.45rem;max-width:36rem;cursor:default;
}
.member-opts__body a,
.member-opts__body button,
.member-opts__body input,
.member-opts__body select,
.member-opts__body textarea,
.member-opts__body label,
.member-opts__body .m-tog,
.member-opts__body .m-seg{cursor:auto}
.member-opts__body .m-tog,
.member-opts__body .m-seg__btn,
.member-opts__body .btn,
.member-opts__body .m-apply__btn{cursor:pointer}
.member-opts__links{
  display:flex;flex-wrap:wrap;gap:.4rem;margin:0;
}
.member-opts__links .btn{margin:0}
.member-opts__row{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:.45rem .55rem;
}
.m-biz-form{
  display:grid;gap:.4rem;margin:0;
}
.m-biz-tier{
  display:flex;flex-wrap:wrap;align-items:stretch;gap:.45rem .55rem;
}
.m-plus-brand{
  display:flex;align-items:stretch;margin:0;min-width:0;
  flex:1 1 11rem;max-width:15rem;
}
.m-plus-brand .m-apply__frame{width:100%}
.m-plus-brand.is-locked .m-apply__frame{
  background:var(--sunk);border-color:var(--line);
}
.m-plus-brand.is-locked .m-plus-brand__input,
.m-plus-brand.is-locked input{
  color:var(--muted);cursor:not-allowed;-webkit-text-fill-color:var(--muted);
}
.m-plus-brand.is-locked .m-apply__btn{
  opacity:.45;cursor:not-allowed;pointer-events:none;
}
.m-plus-brand .m-apply__frame input::placeholder{color:var(--muted);opacity:1}
.member-biz__ai{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:.45rem .55rem;
}
.m-tog-form,.m-apply-form,.m-role-form{
  display:flex;align-items:flex-end;margin:0;flex:0 0 auto;
}
.m-seller,.m-apply,.m-role{
  display:flex;flex-direction:column;gap:.18rem;margin:0;min-width:0;
}
.m-seller{width:100%}
.m-role{flex:0 1 9.5rem}
.m-apply{flex:0 0 auto}
.m-apply__lab{line-height:1.2}
.m-apply__frame{
  display:inline-flex;align-items:stretch;max-width:100%;
  border:1.5px solid var(--line-2);border-radius:8px;background:#fff;overflow:hidden;
}
.m-apply__frame--grow{display:flex;width:100%}
.m-apply__frame:focus-within{
  border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-glow);
}
.m-apply__frame input,
.m-seller .m-apply__frame input,
.m-plus-brand .m-apply__frame input{
  width:5.25rem;min-width:0;flex:1 1 auto;
  border:0!important;border-radius:0!important;box-shadow:none!important;
  padding:.38rem .55rem;font-size:.86rem;background:transparent;
}
.m-seller .m-apply__frame input,
.m-plus-brand .m-apply__frame input{width:100%;min-width:7rem}
.m-apply__btn{
  flex:0 0 auto;margin:0;border:0;border-left:1px solid var(--line);
  background:var(--sunk);color:var(--ink2);padding:0 .65rem;
  font:inherit;font-size:.72rem;font-weight:700;cursor:pointer;white-space:nowrap;
}
.m-apply__btn:hover{background:var(--brand-soft);color:var(--brand-2)}
.m-seg{
  display:inline-flex;align-items:stretch;width:max-content;max-width:100%;
  border:1.5px solid var(--line-2);border-radius:999px;overflow:hidden;background:#fff;
}
.m-seg__btn{
  flex:0 0 auto;min-width:3.4rem;margin:0;border:0;border-right:1px solid var(--line);
  background:transparent;color:var(--ink2);padding:.38rem .7rem;
  font:inherit;font-size:.75rem;font-weight:700;cursor:pointer;line-height:1.2;
  box-shadow:none;transform:none;border-radius:0;
}
.m-seg__btn:last-child{border-right:0}
.m-seg__btn:hover{background:var(--sunk);color:var(--ink);transform:none;box-shadow:none}
.m-seg__btn.is-on{color:#fff}
.m-seg__btn.is-on--off{background:#64748b}
.m-seg__btn.is-on--business{background:#15803d}
.m-seg__btn.is-on--plus{background:#c2410c}
.m-role-dd{position:relative;min-width:8.5rem}
.m-role-dd__btn{
  width:100%;box-sizing:border-box;text-align:left;margin:0;
  padding:.38rem 2rem .38rem .55rem;font:inherit;font-size:.86rem;color:var(--ink);
  border:1.5px solid var(--line-2);border-radius:8px;background:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .55rem center;
  cursor:pointer;box-shadow:none;transform:none;
}
.m-role-dd__btn:hover{background-color:var(--sunk);transform:none;box-shadow:none}
.m-role-dd__btn:disabled{opacity:.65;cursor:not-allowed}
.m-role-dd__list{
  position:absolute;z-index:40;left:0;right:0;top:calc(100% + .2rem);margin:0;padding:.25rem 0;
  list-style:none;background:#fff;border:1px solid var(--line-2);border-radius:10px;
  box-shadow:0 12px 28px -14px rgba(0,0,0,.35);
}
.m-role-dd__opt{
  display:block;width:100%;margin:0;border:0;border-radius:0;background:transparent;
  text-align:left;padding:.4rem .7rem;font:inherit;font-size:.86rem;color:var(--ink);
  cursor:pointer;box-shadow:none;transform:none;
}
.m-role-dd__opt:hover{background:var(--sunk);transform:none;box-shadow:none}
.m-role-dd__opt.is-current{font-weight:700}
.m-role-dd__opt.is-current::before{content:"✓ ";color:var(--brand-2)}
.m-role-dd__sep{
  height:0;margin:.35rem .55rem;border:0;border-top:1px solid var(--line);
}
.m-role-dd__opt--danger{color:#b91c1c;font-weight:700}
.m-role-dd__opt--danger:hover{background:#fef2f2;color:#991b1b}
.m-role select{
  width:100%;min-width:8.5rem;padding:.38rem 2rem .38rem .55rem;font-size:.86rem;
  background-position:right .55rem center;
}
.m-role__note{align-self:center}
.member-del-dialog{
  border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem;max-width:22rem;width:calc(100% - 2rem);
  box-shadow:0 18px 40px -20px rgba(0,0,0,.35);
}
.member-del-dialog::backdrop{background:rgba(15,23,42,.45)}
.member-del-dialog__title{margin:0 0 .4rem;font-size:1.05rem}
.member-del-dialog__form{display:grid;gap:.55rem;margin:0}
.member-del-dialog__input{width:100%;box-sizing:border-box}
.member-del-dialog__actions{display:flex;flex-wrap:wrap;gap:.45rem;justify-content:flex-end;margin-top:.2rem}
.member-del-dialog__go{background:#b91c1c;box-shadow:none}
.member-del-dialog__go:hover{background:#991b1b;color:#fff}
.m-tog{
  display:inline-flex;align-items:center;gap:.45rem;margin:0;padding:.15rem 0;
  border:0;background:transparent;cursor:pointer;font:inherit;color:inherit;
  border-radius:8px;line-height:1.15;transform:none;box-shadow:none;
}
.m-tog:hover{background:transparent;transform:none;box-shadow:none}
.m-tog__track{
  position:relative;width:2.35rem;height:1.35rem;border-radius:999px;flex:0 0 auto;
  background:#94a3b8;transition:background .15s;
}
.m-tog__knob{
  position:absolute;top:.15rem;left:.15rem;width:1.05rem;height:1.05rem;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s;
}
.m-tog--off .m-tog__track{background:#94a3b8}
.m-tog--on .m-tog__track{background:#15803d}
.m-tog--on .m-tog__knob{transform:translateX(1rem)}
.m-tog__name{font-size:.78rem;font-weight:700;color:var(--ink);line-height:1.1}
.staff-notes--inline{margin-top:.15rem}
.staff-notes__hint{font-weight:500;color:var(--muted)}
.staff-notes__flag{
  font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  color:var(--brand-2);background:var(--brand-soft);border-radius:999px;padding:.05rem .32rem;
}
.staff-notes__form{display:grid;gap:.4rem;margin-top:.15rem}
.staff-notes__sum{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.28rem;
  font-size:.72rem;font-weight:600;color:var(--muted);user-select:none;
}
.admin-nav{display:grid;gap:.65rem;margin:0 0 1.35rem;width:100%;max-width:100%}
.admin-nav__link{
  display:flex;flex-direction:column;gap:.15rem;padding:.85rem 1rem;
  border:1px solid var(--line);border-radius:10px;background:var(--card);
  text-decoration:none;color:inherit;max-width:100%;box-sizing:border-box
}
.admin-nav__link:hover{border-color:var(--ink2);background:var(--bg)}
.admin-nav__link strong{font-size:1.02rem;color:var(--ink)}
.admin-search,.admin-filter{margin:0 0 1.1rem;width:100%;max-width:100%}
.admin-search label,.admin-filter label{display:block;width:100%}
.admin-search input[type=search]{width:100%;max-width:100%;box-sizing:border-box}
.admin-search-fold{margin:.65rem 1.1rem 1rem;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--sunk)}
.admin-search-fold__sum{
  list-style:none;cursor:pointer;padding:.55rem .75rem;font-size:.86rem;font-weight:700;color:var(--brand-2);
  user-select:none;
}
.admin-search-fold__sum::-webkit-details-marker{display:none}
.admin-search-fold__sum::before{
  content:"";display:inline-block;width:.38rem;height:.38rem;margin-right:.45rem;
  border-right:2px solid var(--brand-2);border-bottom:2px solid var(--brand-2);
  transform:rotate(-45deg);vertical-align:middle;opacity:.7;
}
.admin-search-fold[open] > .admin-search-fold__sum::before{transform:rotate(45deg)}
.admin-search-fold .admin-search{margin:0;padding:0 .75rem .75rem}
.admin-member-link{color:var(--ink);text-decoration:underline;text-decoration-color:color-mix(in srgb, var(--brand) 45%, transparent);text-underline-offset:.12em}
.admin-member-link:hover{color:var(--brand-2)}
.list-search-fold{margin:.15rem 0 .9rem}
.list-search-fold .admin-search input[type=search]{
  width:100%;max-width:100%;box-sizing:border-box;
  padding:.55rem .7rem;border:1px solid var(--line);border-radius:8px;font:inherit;
}
.admin-list{
  display:flex;flex-direction:column;margin:.35rem 0 1.5rem;
  width:100%;max-width:100%;border:1px solid var(--line);border-radius:10px;
  background:var(--card);overflow:hidden
}
.admin-row{
  display:flex;flex-direction:column;gap:.65rem;padding:.9rem 1rem;
  border-bottom:1px solid var(--line);width:100%;max-width:100%;box-sizing:border-box
}
.admin-row:last-child{border-bottom:0}
.admin-row__main{min-width:0;overflow-wrap:anywhere;word-break:break-word}
.admin-row__main > strong{display:block;font-size:1.02rem;color:var(--ink);line-height:1.3}
.admin-row form.actions{display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding-top:.65rem;border-top:1px solid var(--line)}
.admin-row form.actions .btn{flex:1 1 calc(50% - .2rem);min-width:0;justify-content:center}
@media (min-width:720px){
  .admin-row{flex-direction:row;align-items:flex-start;justify-content:space-between;gap:1rem}
  .admin-row form.actions{padding-top:0;border-top:0;flex:0 0 auto;max-width:18rem}
  .admin-row form.actions .btn{flex:1 1 100%}
}
form.actions,.actions{display:flex;gap:.45rem;flex-wrap:wrap;align-items:center;max-width:100%}
.actions form{display:flex;gap:.45rem;flex-wrap:wrap;align-items:center}

/* ============================================================
   Flash messages + empty state
   ============================================================ */
.flash{
  background:var(--brand-soft);border:1px solid #b3dccb;color:#0a5d47;
  padding:.85rem 1.1rem;border-radius:var(--r-sm);margin:1.1rem 0;font-weight:600;
  border-left:4px solid var(--brand);box-shadow:var(--shadow-sm);
}
.flash a{color:var(--brand-2);word-break:break-all}
.flash--warn{background:var(--gold-soft);border-color:#f0d9a8;color:#7a5200;border-left-color:var(--accent)}
.flash--warn a{color:var(--accent-2)}

.empty{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:1.4rem 1.3rem;text-align:center;margin:1rem 0;color:var(--muted);font-size:1rem;box-shadow:var(--shadow-sm);
}
.empty a{font-weight:700}
.empty--inline{text-align:left;box-shadow:var(--shadow-sm)}

/* ============================================================
   Footer
   ============================================================ */
.foot{
  border-top:1px solid var(--line);margin-top:2.4rem;padding:1.8rem 0 2.2rem;
  background:var(--bg-2);text-align:center;font-size:.92rem;color:var(--ink2);
}
.foot p{margin:.3rem 0}
.foot p:first-child{font-family:var(--font-display);font-weight:600;color:var(--ink);font-size:1.04rem}
.foot a{color:var(--ink2);font-weight:600}
.foot a:hover{color:var(--brand)}
.tiny{font-size:.82rem;color:var(--muted)}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:820px){
  .detail2{grid-template-columns:1fr;gap:1.4rem}
}
@media (max-width:760px){
  .hero{
    grid-template-columns:1fr;
    grid-template-areas:
      "text"
      "search";
    gap:1rem;
    text-align:left;
    padding:1rem 0 .6rem;
  }
  .hero h1{max-width:none}
  .hero p{max-width:44rem}
  .hero__art{display:none}
  .pagehead{grid-template-columns:1fr;gap:1rem}
  .pagehead__art{max-height:180px;max-width:420px;width:100%;margin:.4rem 0 0}
  .pagehead__art img{max-height:180px}
}
@media (max-width:680px){
  .acct,.frow2{grid-template-columns:1fr}
  /* One row: brand left (may clip), nav right always fully visible */
  .bar{
    gap:.4rem;padding-left:12px;padding-right:12px;max-width:100%;
    flex-wrap:nowrap;align-items:center;
  }
  .logo{
    font-size:1.05rem;flex:1 1 auto;min-width:0;max-width:100%;gap:.35rem;
    overflow:hidden;white-space:nowrap;
  }
  .logo::before{width:1.25rem;height:1.25rem;border-radius:6px 6px 6px 2px;flex:0 0 auto}
  .bar nav{
    margin-left:0;justify-content:flex-end;gap:.05rem;
    flex:0 0 auto;width:auto;max-width:none;flex-wrap:nowrap;
    position:relative;z-index:2;
    padding-left:.4rem;
    background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.97) .35rem, rgba(255,255,255,.97));
  }
  .bar nav a{padding:.32rem .4rem;font-size:.8rem;white-space:nowrap}
  .cta{padding:.36rem .65rem!important}
  .search{padding:.45rem;gap:.4rem}
  .search input[type=search]{flex:1 1 100%}
  .search select{flex:1 1 calc(50% - .25rem)}
  .search .btn{flex:1 1 100%}
  .form{padding:1.2rem}
  .check{align-self:auto}
  .trustrow{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.45rem;
    width:100%;
  }
  .trustrow li{
    width:100%;
    justify-content:center;
    text-align:center;
    box-sizing:border-box;
  }
  .trustrow__cta{
    grid-column:1 / -1;
  }
  .trustrow__btn{
    width:100%;
    justify-content:center;
    padding:.55rem 1rem;
    font-size:.9rem;
  }
  .trustrow-biz{margin:.15rem 0 .5rem}
  .wrap{padding-left:14px;padding-right:14px}
  .lede,.panel,.panel p,.tiny,td,th,h1,h2,h3{overflow-wrap:anywhere;word-break:break-word}
  .panel{overflow:visible;max-width:100%}
  /* Tables inside panels: no second “card” frame */
  .panel > .table{
    border:0;box-shadow:none;border-radius:0;margin:.2rem 0 .6rem;background:transparent;
  }
  .panel > .table th{background:var(--sunk)}
  .panel > .table th,.panel > .table td{padding:.55rem .45rem}
  form.actions .btn,.actions .btn{flex:1 1 auto;max-width:100%}
  .table--listings td.actions .btn,
  .table--listings .actions .btn{
    flex:1 1 0;min-width:0;max-width:none;padding:.26rem .22rem;font-size:.64rem;
  }
  .rep__grid{grid-template-columns:1fr}
  .rep__block{padding:1.1rem 1.15rem}
  .table--tiers th,.table--tiers td{white-space:normal}
  .rep .table-scroll--fit{overflow-x:auto}
  .rep .table-scroll--fit .table{min-width:28rem}

  /* Admin: stack table rows as cards — no sideways page overflow */
  .table-scroll:not(.table-scroll--fit){
    overflow:visible;border:0;background:transparent;box-shadow:none;border-radius:0;
  }
  .table-scroll:not(.table-scroll--fit) .table{
    min-width:0!important;width:100%;display:block;border:0;background:transparent;
  }
  .table-scroll:not(.table-scroll--fit) .table thead{display:none}
  .table-scroll:not(.table-scroll--fit) .table tbody{display:block}
  .table-scroll:not(.table-scroll--fit) .table tr{
    display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
    margin:0 0 .85rem;padding:.85rem .95rem;box-shadow:var(--shadow-sm);
  }
  .table-scroll:not(.table-scroll--fit) .table tr[hidden],
  .table-scroll:not(.table-scroll--fit) .table tr.is-lf-hidden{display:none!important}
  .table-scroll:not(.table-scroll--fit) .table tr.mine-ai{
    border-color:#60a5fa;border-width:2px;background:#f3f7ff;
    box-shadow:0 0 0 1px rgba(59,130,246,.2),var(--shadow-sm);
  }
  .table-scroll:not(.table-scroll--fit) .table tr.mine-ai td:first-child{box-shadow:none}
  .table-scroll:not(.table-scroll--fit) .table tr:hover td{background:transparent}
  .table-scroll:not(.table-scroll--fit) .table td{
    display:block;border:0;padding:.2rem 0;width:100%;max-width:100%;
    white-space:normal;overflow-wrap:anywhere;word-break:break-word;vertical-align:top;
  }
  .table-scroll:not(.table-scroll--fit) .table td:first-child{padding-top:0}
  .table-scroll:not(.table-scroll--fit) .table td:last-child{padding-bottom:0;padding-top:.55rem;margin-top:.35rem;border-top:1px solid var(--line)}
  /* My listings cards: body + actions, no wasted vertical stretch */
  .table-scroll:not(.table-scroll--fit) .table--listings tr{
    display:grid;
    grid-template-columns:1fr;
    grid-template-areas:
      "listing"
      "actions";
    gap:.4rem;align-items:stretch;
    margin:0 0 .5rem;padding:.55rem .6rem;border-radius:10px;
    box-shadow:var(--shadow-sm);
  }
  .table-scroll:not(.table-scroll--fit) .table--listings td{
    padding:0;margin:0;border:0;width:auto;max-width:100%;
  }
  .table-scroll:not(.table-scroll--fit) .table--listings td.mine-listing{grid-area:listing}
  .table-scroll:not(.table-scroll--fit) .table--listings td.actions{
    grid-area:actions;padding:.4rem 0 0;margin:0;border-top:1px solid var(--line);width:100%;
  }
  .table-scroll:not(.table-scroll--fit) .table--listings .mine-listing__inner{
    grid-template-columns:minmax(0,1fr) 3.75rem;
  }
  .table-scroll:not(.table-scroll--fit) .table--listings .mine-listing__thumb{
    width:3.75rem!important;height:3.75rem!important;max-width:none!important;
  }
  .table-scroll:not(.table-scroll--fit) .table--listings td.actions form{flex-wrap:nowrap}
  .table-scroll:not(.table-scroll--fit) .table--listings td.actions .btn{
    padding:.48rem .22rem;font-size:.78rem;min-height:2.35rem;
  }
  .table-scroll:not(.table-scroll--fit) .table--listings .mine-listing__title{font-size:1.05rem}
  .table-scroll:not(.table-scroll--fit) .table--listings .mine-listing__meta-text{font-size:.95rem}
  .table-scroll:not(.table-scroll--fit) .table--listings .status{font-size:.8rem}
  .table th,.table td{padding:.55rem .6rem;font-size:.86rem}

  /* Inventory: stack product rows as readable cards */
  .inv-toggle{gap:.55rem;padding:.7rem .75rem}
  .inv-toggle__label{min-width:0;flex:1 1 5rem;font-size:.82rem}
  .inv-products__search{display:flex;flex-wrap:wrap}
  .inv-products__search input[type=search],
  .inv-products__search select,
  .inv-products__search .btn{flex:1 1 100%}
  .table--inventory{table-layout:auto}
  .table-scroll:not(.table-scroll--fit) .table--inventory thead{display:none}
  .table-scroll:not(.table-scroll--fit) .table--inventory tr{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.35rem .75rem;
    align-items:start;
  }
  .table-scroll:not(.table-scroll--fit) .table--inventory td{
    padding:.15rem 0;width:auto;max-width:100%;
  }
  .table-scroll:not(.table-scroll--fit) .table--inventory td[data-label]::before{
    content:attr(data-label);
    display:block;
    font-size:.68rem;font-weight:750;text-transform:uppercase;letter-spacing:.05em;
    color:var(--muted);margin-bottom:.12rem;
  }
  .table-scroll:not(.table-scroll--fit) .table--inventory td.inv-product{
    grid-column:1 / -1;padding-top:0;
  }
  .table-scroll:not(.table-scroll--fit) .table--inventory td.inv-product::before{display:none}
  .table-scroll:not(.table-scroll--fit) .table--inventory td.inv-views{display:none}
  .table-scroll:not(.table-scroll--fit) .table--inventory .inv-product__views-m{display:inline}
  .table-scroll:not(.table-scroll--fit) .table--inventory .inv-product__title{font-size:1.05rem}
  .table-scroll:not(.table-scroll--fit) .table--inventory td.inv-avail{grid-column:1 / -1}
  .table-scroll:not(.table-scroll--fit) .table--inventory td.inv-integrity{
    grid-column:1 / -1;padding-top:.45rem;margin-top:.15rem;border-top:1px solid var(--line);
  }
  .table-scroll:not(.table-scroll--fit) .table--inventory td:last-child{
    padding-bottom:0;margin-top:.15rem;
  }
  .table-scroll:not(.table-scroll--fit) .table--inventory .inv-avail__form select{
    min-height:2.75rem;font-size:1rem;
  }
  .table-scroll:not(.table-scroll--fit) .table--inventory .inv-url{
    white-space:nowrap;max-width:100%;
  }
}
@media (max-width:420px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
}

/* ============================================================
   Legal (privacy / cookies / terms)
   ============================================================ */
.page-legal .legal-toc{
  display:flex;flex-wrap:wrap;gap:.45rem;margin:.15rem 0 1.1rem;
}
.page-legal .legal-toc a{
  display:inline-flex;align-items:center;min-height:2.2rem;
  padding:.25rem .85rem;border-radius:var(--r-pill);
  background:var(--card);border:1px solid var(--line);
  color:var(--ink2);font-weight:700;font-size:.9rem;text-decoration:none;
}
.page-legal .legal-toc a:hover,
.page-legal .legal-toc a[aria-current="page"]{
  background:var(--brand-soft);border-color:transparent;color:var(--brand-ink);text-decoration:none;
}
.page-legal .legal-head{margin-bottom:1.15rem}
.page-legal .legal-head .lede{max-width:68ch}
.page-legal .legal-sec{
  scroll-margin-top:5.6rem;margin:1.15rem 0;
}
.page-legal .legal-sec:target{
  box-shadow:0 0 0 2px var(--brand-glow), var(--shadow-sm);
}
.page-legal .legal-sec h2{margin:.1rem 0 .65rem}
.page-legal .legal-sec h3{margin:1.15rem 0 .4rem;font-size:1.02rem}
.page-legal .legal-sec p{margin:0 0 .7rem;max-width:70ch}
.page-legal .legal-sec .rules{margin:0 0 .85rem 1.15rem}
.page-legal .legal-sec .table{font-size:.92rem}
.page-legal .legal-sec code{
  font-size:.88em;background:var(--sunk);padding:.08em .35em;border-radius:5px;
}
.page-legal .legal-note{margin:1.4rem 0 .2rem;max-width:70ch}