:root{
    --paper:#ffffff;
    --surface:#ffffff;
    --surface-2:#f6f6f4;
    --border:#e2ddd0;
    --ink:#211f19;
    --muted:#726b5b;
    --muted-2:#948c79;
    --brand:#145c53;
    --brand-dark:#0e433c;
    --brand-tint:#e2efec;
    --sale:#2f7d4f;
    --sale-tint:#e4f1e8;
    --rent:#bd6a1c;
    --rent-tint:#fbecd9;
    --service:#35648a;
    --service-tint:#e3ebf2;
    --danger:#b0402a;
    --danger-tint:#fae8e3;
    --featured:#96650f;
    --featured-tint:#faf0d8;
    --featured-glow:rgba(184,134,11,.35);
    /* Rusty orange sampled directly from the logo artwork's "EXCHANGE"
       lettering (avg. pixel colour), used for primary buttons and the
       hero tick text/icons — kept as one fixed set of shades (not a
       separate light/dark-theme pair like --brand/--featured) since
       these are filled surfaces and always-dark hero text, not body
       text that needs to flip with the theme. */
    --rust:#9c5d33;
    --rust-dark:#794828;
    --rust-bright:#ca895e;
    --focus:#145c53;
    --shadow-sm:0 1px 2px rgba(33,31,25,.06);
    --shadow-md:0 10px 30px -12px rgba(33,31,25,.28);
    --radius:10px;
    color-scheme:light;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --paper:#15181a;
      --surface:#1d2124;
      --surface-2:#24282b;
      --border:#34393d;
      --ink:#eeece5;
      --muted:#a8a294;
      --muted-2:#8a8478;
      --brand:#57bcac;
      --brand-dark:#7fd0c2;
      --brand-tint:#183430;
      --sale:#6fc78e;
      --sale-tint:#173327;
      --rent:#e2963f;
      --rent-tint:#3a2814;
      --service:#7fb0dd;
      --service-tint:#1c2c39;
      --danger:#e2836e;
      --danger-tint:#3a221c;
      --featured:#e0b854;
      --featured-tint:#3a3018;
      --featured-glow:rgba(224,184,84,.25);
      --shadow-sm:0 1px 2px rgba(0,0,0,.4);
      --shadow-md:0 14px 34px -14px rgba(0,0,0,.65);
      color-scheme:dark;
    }
  }
  :root[data-theme="dark"]{
    --paper:#15181a;
    --surface:#1d2124;
    --surface-2:#24282b;
    --border:#34393d;
    --ink:#eeece5;
    --muted:#a8a294;
    --muted-2:#8a8478;
    --brand:#57bcac;
    --brand-dark:#7fd0c2;
    --brand-tint:#183430;
    --sale:#6fc78e;
    --sale-tint:#173327;
    --rent:#e2963f;
    --rent-tint:#3a2814;
    --service:#7fb0dd;
    --service-tint:#1c2c39;
    --danger:#e2836e;
    --danger-tint:#3a221c;
    --featured:#e0b854;
    --featured-tint:#3a3018;
    --featured-glow:rgba(224,184,84,.25);
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow-md:0 14px 34px -14px rgba(0,0,0,.65);
    color-scheme:dark;
  }

  *{box-sizing:border-box;}
  body{margin:0;background:var(--paper);color:var(--ink);font-family:"Inter",system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;}
  h1,h2,h3{font-family:"Barlow Condensed",Impact,sans-serif;font-weight:700;letter-spacing:.2px;text-wrap:balance;margin:0;}
  .mono{font-family:"IBM Plex Mono","SFMono-Regular",Menlo,monospace;font-variant-numeric:tabular-nums;}
  a{color:var(--rust);}
  button{font-family:inherit;}
  :focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
  .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  @media (prefers-reduced-motion: reduce){*{animation-duration:.001ms !important;transition-duration:.001ms !important;}}

  /* ---------- footer ---------- */
  .site-footer{margin-top:32px;border-top:1px solid var(--border);background:var(--surface);}
  .footer-inner{max-width:1260px;margin:0 auto;padding:18px 20px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;font-size:13px;color:var(--muted);text-align:center;}
  .footer-brand{font-weight:600;color:var(--ink);}
  .footer-sep{color:var(--muted-2);}
  .footer-inner a{color:var(--muted);text-decoration:underline;}
  .footer-inner a:hover{color:var(--rust);}

  /* ---------- header ---------- */
  .site-header{position:sticky;top:0;z-index:30;background:var(--surface);border-bottom:1px solid var(--border);}
  .header-inner{max-width:1260px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:18px;}
  .brand{display:flex;align-items:center;gap:9px;flex-shrink:0;text-decoration:none;color:var(--ink);cursor:pointer;background:none;border:none;padding:0;}
  .brand-mark{height:34px;width:auto;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .brand-mark img{height:100%;width:auto;display:block;}
  .brand-text{display:flex;flex-direction:column;line-height:1.05;}
  .brand-name{font-size:21px;line-height:1;font-weight:700;}
  .brand-name em{font-style:normal;color:var(--rust);}
  .brand-tag{font-size:10px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.06em;margin-top:2px;}
  .search-form{flex:1;display:flex;max-width:540px;min-width:0;}
  .search-form input{flex:1;min-width:0;border:1px solid var(--border);border-right:none;border-radius:8px 0 0 8px;padding:10px 14px;font-size:14.5px;background:var(--paper);color:var(--ink);}
  .search-form input::placeholder{color:var(--muted-2);}
  .search-form button{border:1px solid var(--border);border-left:none;background:var(--surface-2);color:var(--ink);border-radius:0 8px 8px 0;padding:0 14px;cursor:pointer;}
  .header-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0;}
  .header-mascot{display:flex;align-items:center;justify-content:center;padding:5px 9px;border-radius:9px;background:var(--brand-tint);flex-shrink:0;margin-left:2px;}
  .header-mascot svg{display:block;}
  .btn{border-radius:8px;padding:9px 16px;font-size:14px;font-weight:600;cursor:pointer;border:1px solid transparent;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;}
  .btn-brand{background:var(--rust);color:#fff;}
  .btn-brand:hover{background:var(--rust-dark);}
  .btn-ghost{background:transparent;color:var(--ink);border-color:var(--border);}
  .btn-ghost:hover{background:var(--surface-2);}
  .btn-danger{background:transparent;color:var(--danger);border-color:var(--danger);}
  .btn-danger:hover{background:var(--danger-tint);}
  .btn-sm{padding:6px 11px;font-size:13px;}
  .btn[disabled]{opacity:.5;cursor:not-allowed;}
  .icon{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}

  /* ---------- header: compact mobile/tablet layout ----------
     Below 1100px the header goes compact: wraps to two rows (brand +
     actions on top, full-width search underneath), drops the tagline,
     and the action buttons go icon-only (their text lives in a
     .btn-label span so it can be hidden here without touching app.js's
     click handlers/IDs). One breakpoint, verified directly against the
     live site's real rendered widths (not a local preview — a local
     render without the real Google Fonts loaded measures noticeably
     narrower than production and will under-report this): with brand +
     search + the three full-text action buttons all in one row, real
     measured overflow started well above where it looked fine in a
     font-less local test, up to ~1100px wide. Below that, even a
     two-row layout still overflowed unless the tagline and button
     labels also stepped aside — header-actions alone (3 full-text
     buttons) measured ~449px wide, which is already tight below ~1150px
     of total header width. */
  @media (max-width:1100px){
    .header-inner{flex-wrap:wrap;row-gap:8px;padding:10px 14px;}
    .brand-tag{display:none;}
    .brand-name{font-size:16px;}
    .brand{gap:7px;}
    .search-form{order:3;flex-basis:100%;max-width:none;}
    .header-actions{gap:6px;}
    .header-actions .btn-label{display:none;}
    #postAdBtn{padding:9px 11px;}
    #myListingsBtn,#accountArea .btn{padding:6px 9px;}
  }

  /* ---------- layout ---------- */
  .layout{max-width:1260px;margin:0 auto;padding:22px 20px 60px;display:grid;grid-template-columns:250px 1fr;gap:26px;align-items:start;}
  @media (max-width:860px){.layout{grid-template-columns:1fr;}}

  .sidebar{position:sticky;top:76px;display:flex;flex-direction:column;gap:20px;max-height:calc(100vh - 96px);overflow-y:auto;padding-bottom:10px;}
  @media (max-width:860px){.sidebar{position:static;max-height:none;}}
  .filter-group{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px;flex-shrink:0;}
  .filter-title{font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:600;margin-bottom:10px;}
  .type-toggle{display:flex;border:1px solid var(--border);border-radius:8px;overflow:hidden;}
  .type-toggle button{flex:1;padding:8px 3px;background:var(--surface);color:var(--muted);border:none;font-size:12.5px;font-weight:600;cursor:pointer;border-right:1px solid var(--border);}
  .type-toggle button:last-child{border-right:none;}
  .type-toggle button.active{background:var(--brand-tint);color:var(--rust-dark);}
  .cat-list{display:flex;flex-direction:column;gap:1px;}
  .cat-item{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;border:none;padding:7px 6px;border-radius:6px;cursor:pointer;color:var(--ink);font-size:13.2px;}
  .cat-item:hover{background:var(--surface-2);}
  .cat-item.active{background:var(--brand-tint);color:var(--rust-dark);font-weight:600;}
  .cat-item .icon{width:16px;height:16px;color:var(--muted);flex-shrink:0;}
  .cat-item.active .icon{color:var(--rust-dark);}
  .cat-item span:not(.cat-count){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .cat-count{margin-left:auto;color:var(--muted-2);font-size:12px;flex-shrink:0;}
  .range-row{display:flex;align-items:center;gap:6px;}
  .range-row input{width:0;flex:1;border:1px solid var(--border);border-radius:6px;padding:7px 8px;font-size:13px;background:var(--paper);color:var(--ink);}
  .field-label{font-size:12px;color:var(--muted);margin-bottom:6px;display:block;}
  .loc-input{width:100%;border:1px solid var(--border);border-radius:6px;padding:7px 9px;font-size:13px;background:var(--paper);color:var(--ink);}
  .check-row{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink);padding:4px 0;}
  .clear-filters{font-size:12.5px;color:var(--rust);background:none;border:none;cursor:pointer;padding:0;text-decoration:underline;}

  .results-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap;}
  .results-count{color:var(--muted);font-size:14px;}
  .results-count strong{color:var(--ink);}
  .sort-select{border:1px solid var(--border);border-radius:8px;padding:8px 10px;font-size:13.5px;background:var(--surface);color:var(--ink);}
  .banner{display:flex;align-items:flex-start;gap:10px;background:var(--rent-tint);border:1px solid var(--rent);color:var(--ink);border-radius:8px;padding:10px 13px;font-size:13.5px;margin-bottom:16px;}
  .banner .icon{color:var(--rent);margin-top:1px;}

  /* ---------- grid & card ---------- */
  .listing-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:16px;}
  .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;cursor:pointer;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);transition:transform .12s ease, box-shadow .12s ease;text-align:left;text-decoration:none;color:inherit;}
  .card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
  .thumb{position:relative;aspect-ratio:4/3;background:var(--surface-2);display:flex;align-items:center;justify-content:center;overflow:hidden;}
  .thumb img{width:100%;height:100%;object-fit:cover;}
  .thumb .icon{width:38px;height:38px;}
  .thumb.type-sale{background:var(--sale-tint);}
  .thumb.type-sale .icon{color:var(--sale);}
  .thumb.type-rent{background:var(--rent-tint);}
  .thumb.type-rent .icon{color:var(--rent);}
  .thumb.type-service{background:var(--service-tint);}
  .thumb.type-service .icon{color:var(--service);}
  .type-pill{position:absolute;top:8px;left:8px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:3px 8px;border-radius:99px;color:#fff;}
  .type-pill.sale{background:var(--sale);}
  .type-pill.rent{background:var(--rent);}
  .type-pill.service{background:var(--service);}
  .status-ribbon{position:absolute;inset:0;background:rgba(20,18,14,.55);color:#fff;display:flex;align-items:center;justify-content:center;font-family:"Barlow Condensed";font-size:19px;text-transform:uppercase;letter-spacing:.06em;}
  .card-body{padding:11px 12px 13px;display:flex;flex-direction:column;gap:5px;flex:1;}
  .card-price{font-size:17px;font-weight:600;}
  .card-price.sold{color:var(--muted-2);text-decoration:line-through;}
  .card-price .per{font-size:12px;color:var(--muted);font-weight:500;}
  .card-title{font-family:"Inter";font-weight:600;font-size:14.5px;line-height:1.3;color:var(--ink);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
  .card-meta{font-size:12px;color:var(--muted);display:flex;gap:6px;align-items:center;margin-top:auto;}
  .card-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--muted-2);flex-shrink:0;}

  /* ---------- tier highlighting ---------- */
  .card.tier-featured{border-color:var(--featured);box-shadow:0 0 0 1px var(--featured), var(--shadow-md);}
  .card.tier-featured:hover{box-shadow:0 0 0 1px var(--featured), 0 14px 34px -12px var(--featured-glow);}
  .card.tier-standard{border-color:var(--brand);}
  .tier-badge{position:absolute;top:8px;right:8px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:3px 8px;border-radius:99px;display:flex;align-items:center;gap:3px;}
  .tier-badge.featured{background:var(--featured);color:#26190a;}
  .tier-badge.standard{background:var(--brand);color:#fff;}
  .tier-badge .icon{width:10px;height:10px;}
  .featured-strip{margin-bottom:22px;}
  .featured-strip-head{display:flex;align-items:center;gap:7px;margin-bottom:12px;}
  .featured-strip-head .icon{color:var(--featured);width:18px;height:18px;}
  .featured-strip-head h2{font-family:"Barlow Condensed";font-weight:700;font-size:19px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink);}
  .featured-strip .listing-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));}
  .featured-strip-divider{border:none;border-top:1px solid var(--border);margin:22px 0;}

  /* ---------- listing tier picker (post form) ---------- */
  .tier-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
  .tier-card{position:relative;display:block;border:1.5px solid var(--border);border-radius:10px;padding:11px 12px;cursor:pointer;background:var(--paper);transition:border-color .12s ease;}
  .tier-card.disabled{cursor:not-allowed;opacity:.55;}
  .tier-card input{position:absolute;top:10px;right:10px;margin:0;}
  .tier-card.selected{border-color:var(--brand);background:var(--brand-tint);}
  .tier-card[data-tier="featured"].selected{border-color:var(--featured);background:var(--featured-tint);}
  .tier-card-top{display:flex;flex-direction:column;gap:1px;margin-bottom:5px;padding-right:18px;}
  .tier-name{font-weight:700;font-size:14px;color:var(--ink);}
  .tier-price{font-family:"IBM Plex Mono";font-size:13px;color:var(--rust-dark);}
  .tier-tagline{font-size:11.5px;color:var(--muted);line-height:1.35;}

  /* ---------- sidebar ad slot ---------- */
  .ad-slot{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px;flex-shrink:0;}
  .ad-slot-label{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-2);margin-bottom:8px;}
  .ad-card{display:block;text-decoration:none;color:inherit;border-radius:8px;overflow:hidden;border:1px solid var(--border);background:var(--surface-2);}
  .ad-card-media{aspect-ratio:4/3;background:var(--brand-tint);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:14px;text-align:center;}
  .ad-card-media img{width:100%;height:100%;object-fit:cover;}
  .ad-card-media .placeholder{font-family:"Barlow Condensed";font-weight:700;font-size:15px;color:var(--rust-dark);text-transform:uppercase;letter-spacing:.02em;}
  .ad-card-body{padding:10px 11px;}
  .ad-card-company{font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:2px;}
  .ad-card-headline{font-size:12px;color:var(--muted);line-height:1.35;}
  .ad-cta{display:flex;flex-direction:column;align-items:flex-start;gap:8px;border:1.5px dashed var(--border);border-radius:8px;padding:16px 14px;background:var(--surface-2);}
  .ad-cta p{font-size:12.5px;color:var(--muted);line-height:1.4;margin:0;}
  .ad-cta strong{color:var(--ink);}

  .empty-state{text-align:center;padding:70px 20px;color:var(--muted);}
  .empty-state .icon{width:44px;height:44px;color:var(--muted-2);margin-bottom:10px;}
  .empty-state h3{font-size:20px;color:var(--ink);margin-bottom:6px;}

  /* ---------- modal ---------- */
  .modal-overlay{position:fixed;inset:0;background:rgba(20,18,14,.5);display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto;z-index:100;}
  .modal{background:var(--surface);border-radius:14px;max-width:640px;width:100%;box-shadow:var(--shadow-md);margin-bottom:40px;}
  .modal.wide{max-width:820px;}
  .modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);}
  .modal-head h2{font-size:22px;}
  .modal-close{background:none;border:none;cursor:pointer;color:var(--muted);padding:6px;border-radius:6px;}
  .modal-close:hover{background:var(--surface-2);color:var(--ink);}
  .modal-body{padding:20px;}

  .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
  /* Below 600px the two-column form grid (used by every modal form —
     post a listing, create/edit account, etc.) doesn't just look
     cramped: because .modal-overlay is position:fixed, content that
     overflows it is clipped by the viewport edge with no way to scroll
     to it, silently making the whole right-hand column of fields
     (Condition, Currency, State, etc.) unreachable. Verified on a real
     375px-wide load of the live site before this fix. */
  @media (max-width:600px){
    .form-grid{grid-template-columns:1fr;}
  }
  .form-field{display:flex;flex-direction:column;gap:6px;}
  .form-field.full{grid-column:1/-1;}
  .form-field label{font-size:12.5px;font-weight:600;color:var(--muted);}
  .form-field input,.form-field select,.form-field textarea{border:1px solid var(--border);border-radius:8px;padding:9px 11px;font-size:14px;background:var(--paper);color:var(--ink);font-family:inherit;}
  .form-field textarea{resize:vertical;min-height:80px;}
  .radio-row{display:flex;gap:14px;flex-wrap:wrap;}
  .radio-row label{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:var(--ink);}
  .form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;grid-column:1/-1;}
  .hint{font-size:12px;color:var(--muted-2);font-weight:400;}
  .photo-strip{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px;}
  .photo-thumb{position:relative;width:72px;height:72px;border-radius:8px;overflow:hidden;background:var(--surface-2);border:1px solid var(--border);flex-shrink:0;}
  .photo-thumb img{width:100%;height:100%;object-fit:cover;}
  .photo-remove{position:absolute;top:2px;right:2px;width:18px;height:18px;border-radius:50%;background:rgba(20,18,14,.65);color:#fff;border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;}
  .photo-remove:hover{background:rgba(20,18,14,.85);}
  .thumb-row{display:flex;gap:8px;margin:-8px 0 16px;}
  .thumb-mini{width:56px;height:56px;border-radius:6px;overflow:hidden;border:2px solid transparent;padding:0;cursor:pointer;background:var(--surface-2);flex-shrink:0;}
  .thumb-mini.active{border-color:var(--brand);}
  .thumb-mini img{width:100%;height:100%;object-fit:cover;}

  /* ---------- detail ---------- */
  .detail-media{aspect-ratio:16/9;background:var(--surface-2);border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
  .detail-media img{width:100%;height:100%;object-fit:cover;}
  .detail-media .icon{width:60px;height:60px;}
  .detail-top{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;flex-wrap:wrap;}
  .detail-title{font-size:26px;margin-bottom:4px;}
  .detail-price{font-size:22px;font-weight:600;}
  .badge-row{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0 4px;}
  .badge{font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:99px;text-transform:uppercase;letter-spacing:.03em;}
  .badge.sale{background:var(--sale-tint);color:var(--sale);}
  .badge.rent{background:var(--rent-tint);color:var(--rent);}
  .badge.service{background:var(--service-tint);color:var(--service);}
  .badge.neutral{background:var(--surface-2);color:var(--muted);}
  .detail-desc{font-size:14.5px;line-height:1.65;color:var(--ink);margin:16px 0;white-space:pre-wrap;max-width:65ch;}
  .specs-box{background:var(--paper);border:1px solid var(--border);border-left:3px solid var(--brand);border-radius:8px;padding:12px 14px;margin:0 0 16px;font-size:13.5px;line-height:1.55;white-space:pre-wrap;}
  .specs-box .label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:4px;font-weight:600;}
  .meta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;background:var(--paper);border:1px solid var(--border);border-radius:10px;padding:14px;margin:16px 0;}
  .meta-item .label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:3px;}
  .meta-item .value{font-size:14px;font-weight:600;}
  .contact-card{border:1px solid var(--border);border-radius:10px;padding:14px;display:flex;align-items:center;gap:12px;margin:16px 0;}
  .contact-avatar{width:38px;height:38px;border-radius:50%;background:var(--brand-tint);color:var(--rust-dark);display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;}
  .contact-info{flex:1;min-width:0;}
  .contact-info .name{font-weight:600;font-size:14.5px;}
  .contact-info .company{font-size:12.5px;color:var(--muted);margin-top:1px;}
  .contact-info .value{font-size:13.5px;color:var(--muted);margin-top:2px;}
  .owner-actions{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0;padding:12px;background:var(--brand-tint);border-radius:10px;}
  .owner-actions .label{font-size:12px;color:var(--rust-dark);font-weight:600;width:100%;margin-bottom:2px;}

  .inquiries{margin-top:22px;}
  .inquiries h3{font-size:16px;margin-bottom:10px;}
  .inquiry-form{display:flex;flex-direction:column;gap:8px;background:var(--paper);border:1px solid var(--border);border-radius:10px;padding:12px;margin-bottom:14px;}
  .inquiry-form .row{display:flex;gap:8px;}
  .inquiry-form input,.inquiry-form textarea{border:1px solid var(--border);border-radius:7px;padding:8px 10px;font-size:13.5px;background:var(--surface);color:var(--ink);font-family:inherit;flex:1;}
  .inquiry-form textarea{min-height:56px;resize:vertical;}
  .inquiry-list{display:flex;flex-direction:column;gap:10px;}
  .inquiry-item{border-bottom:1px solid var(--border);padding-bottom:10px;}
  .inquiry-item:last-child{border-bottom:none;}
  .inquiry-item .who{font-size:13px;font-weight:600;}
  .inquiry-item .when{font-size:11.5px;color:var(--muted-2);font-weight:400;margin-left:6px;}
  .inquiry-item .msg{font-size:13.5px;color:var(--ink);margin-top:2px;}
  .no-inquiries{font-size:13.5px;color:var(--muted-2);}

  .my-listing-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);}
  .my-listing-row:last-child{border-bottom:none;}
  .my-listing-thumb{width:52px;height:52px;border-radius:8px;background:var(--surface-2);flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;}
  .my-listing-thumb img{width:100%;height:100%;object-fit:cover;}
  .my-listing-info{flex:1;min-width:0;}
  .my-listing-info .t{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .my-listing-info .p{font-size:12.5px;color:var(--muted);}

  /* ---------- accounts ---------- */
  #accountArea{display:flex;gap:8px;align-items:center;}
  .auth-tabs{display:flex;border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-bottom:16px;}
  .auth-tabs button{flex:1;padding:9px 4px;background:var(--surface);color:var(--muted);border:none;font-size:13.5px;font-weight:600;cursor:pointer;border-right:1px solid var(--border);}
  .auth-tabs button:last-child{border-right:none;}
  .auth-tabs button.active{background:var(--brand-tint);color:var(--rust-dark);}
  .auth-panel{display:none;}
  .auth-panel.active{display:block;}
  .form-error{background:var(--danger-tint);color:var(--danger);border-radius:8px;padding:9px 12px;font-size:13px;margin-bottom:12px;}
  .link-btn{background:none;border:none;padding:0;color:var(--rust-dark);font-size:inherit;font-weight:600;cursor:pointer;text-decoration:underline;}
  .access-key-box{background:var(--brand-tint);border:1px solid var(--brand);border-radius:10px;padding:16px;text-align:center;}
  .access-key-box .key{font-family:"IBM Plex Mono",monospace;font-size:19px;font-weight:600;letter-spacing:.03em;color:var(--rust-dark);background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:10px;margin:10px 0;word-break:break-all;}
  .profile-header{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
  .profile-avatar{width:52px;height:52px;border-radius:50%;background:var(--brand-tint);color:var(--rust-dark);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;flex-shrink:0;}
  .profile-name{font-size:19px;font-family:"Barlow Condensed";font-weight:700;}
  .profile-sub{font-size:13px;color:var(--muted);}
  .profile-meta{display:flex;flex-wrap:wrap;gap:10px 20px;background:var(--paper);border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:16px;font-size:13px;}
  .profile-meta .item .label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);}
  .profile-meta .item .value{font-weight:600;}
  .seller-link{font-size:12.5px;color:var(--rust);background:none;border:none;cursor:pointer;padding:0;text-decoration:underline;margin-top:2px;}

  /* ---------- toasts ---------- */
  .toast-stack{position:fixed;bottom:18px;right:18px;display:flex;flex-direction:column;gap:8px;z-index:200;}
  .toast{background:var(--ink);color:var(--paper);padding:11px 16px;border-radius:8px;font-size:13.5px;box-shadow:var(--shadow-md);animation:toast-in .18s ease;}
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .toast{background:var(--surface-2);color:var(--ink);}}
  :root[data-theme="dark"] .toast{background:var(--surface-2);color:var(--ink);}
  @keyframes toast-in{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}

  .skeleton{background:linear-gradient(90deg,var(--surface-2) 25%,var(--paper) 37%,var(--surface-2) 63%);background-size:400% 100%;animation:sk 1.4s ease infinite;border-radius:var(--radius);aspect-ratio:4/3;}
  @keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}

  /* =========================================================
     INDUSTRIAL POLISH PASS
     Heavier steel-blue brand + gold "certified plate" accent,
     sharper geometry, spec-sheet numerals. Pure overrides via
     source order — no markup or app.js changes required.
     ========================================================= */

  :root{
    --brand:#2c4552;
    --brand-dark:#16262e;
    --brand-tint:#e7edf0;
    --focus:#2c4552;
    --radius:6px;
    --shadow-sm:0 1px 3px rgba(20,18,14,.16);
    --shadow-md:0 16px 38px -14px rgba(20,18,14,.4);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --brand:#5c94a8;
      --brand-dark:#9cc9da;
      --brand-tint:#1a252a;
      --shadow-sm:0 1px 3px rgba(0,0,0,.5);
      --shadow-md:0 18px 42px -16px rgba(0,0,0,.75);
    }
  }
  :root[data-theme="dark"]{
    --brand:#5c94a8;
    --brand-dark:#9cc9da;
    --brand-tint:#1a252a;
    --shadow-sm:0 1px 3px rgba(0,0,0,.5);
    --shadow-md:0 18px 42px -16px rgba(0,0,0,.75);
  }

  /* header: gold hazard-line accent, bolder mark */
  .site-header{border-bottom:2px solid var(--featured);}
  .brand-mark{border-radius:5px;box-shadow:inset 0 -2px 0 rgba(0,0,0,.18);}
  .brand-name{letter-spacing:.1px;}
  .brand-tag{letter-spacing:.09em;}

  /* squarer, heavier surfaces */
  .filter-group,.ad-slot,.card,.modal,.specs-box,.meta-grid,.contact-card,
  .profile-meta,.inquiry-form,.tier-card,.access-key-box{border-width:1.5px;}
  .card{border-radius:6px;}
  .card:hover{border-color:var(--brand);}

  /* placeholder thumbs get a technical texture instead of flat fill */
  .thumb{position:relative;}
  .thumb::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:repeating-linear-gradient(135deg,rgba(0,0,0,.05) 0 9px,transparent 9px 18px);
  }
  .thumb .icon{opacity:.6;}

  /* spec-sheet numerals for anything price-like */
  .card-price,.detail-price,.tier-price{
    font-family:"IBM Plex Mono","SFMono-Regular",Menlo,monospace;
    letter-spacing:-.01em;
  }

  /* stenciled, technical section labels */
  .filter-title,.ad-slot-label,.results-count{letter-spacing:.08em;}
  .featured-strip-head h2{letter-spacing:.05em;}

  /* heavier, stamped CTA buttons */
  .btn-brand{text-transform:uppercase;font-size:13px;letter-spacing:.04em;
    box-shadow:inset 0 -2px 0 rgba(0,0,0,.16);}
  .btn-brand:hover{box-shadow:inset 0 -2px 0 rgba(0,0,0,.22);}

  /* tier-featured leans fully into the gold "certified plate" look */
  .tier-badge.featured{box-shadow:0 1px 2px rgba(0,0,0,.25);}
  .card.tier-featured{box-shadow:0 0 0 1.5px var(--featured), var(--shadow-md);}

  /* =========================================================
     HERO BANNER
     Real photography instead of iconography, for a less
     "template" first impression. Public-domain photo.
     ========================================================= */

  html{scroll-behavior:smooth;}
  .hero{
    position:relative;
    overflow:hidden;
    border-bottom:2px solid var(--featured);
    min-height:620px;
    display:flex;
    align-items:center;
    background:
      linear-gradient(180deg, rgba(10,13,15,.38) 0%, rgba(10,13,15,.7) 100%),
      url('https://upload.wikimedia.org/wikipedia/commons/0/0b/West_Texas_Pumpjack.JPG') center 34% / cover no-repeat;
  }
  .hero-photo{display:none;}
  .hero-inner{
    position:relative;
    max-width:760px;
    margin:0 auto;
    padding:40px 20px;
    text-align:center;
    width:100%;
  }
  .hero-copy{max-width:none;}
  .hero-logo{display:block;margin:0 auto 20px;width:min(360px,78%);height:auto;filter:drop-shadow(0 6px 20px rgba(0,0,0,.55));}
  .hero-title{
    color:#fdfcf8;
    font-size:clamp(28px,4vw,44px);
    margin-bottom:14px;
    text-shadow:0 2px 14px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.6);
  }
  .hero-sub{
    color:#f2eee2;
    font-size:16px;
    line-height:1.6;
    margin:0 0 26px;
    text-shadow:0 1px 8px rgba(0,0,0,.5);
  }
  .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:22px;justify-content:center;}
  .btn-lg{padding:13px 26px;font-size:14.5px;}
  .hero-browse{
    background:rgba(20,18,14,.28);
    color:#fff;
    border-color:rgba(255,255,255,.5);
  }
  .hero-browse:hover{background:rgba(20,18,14,.42);}
  .hero-points{
    display:flex;gap:18px;flex-wrap:wrap;justify-content:center;
    font-size:12.5px;font-weight:700;color:var(--rust-bright);letter-spacing:.02em;
    text-shadow:0 1px 6px rgba(0,0,0,.5);
  }
  .hero-points span{display:inline-flex;align-items:center;gap:6px;}
  .hero-points .icon{width:14px;height:14px;color:var(--rust-bright);stroke-width:2.4;flex-shrink:0;}
  #listingGrid{scroll-margin-top:84px;}

  @media (max-width:760px){
    .hero{min-height:0;background-position:center 42%;}
    .hero-inner{padding:44px 18px;}
    .hero-logo{width:min(260px,72%);margin-bottom:14px;}
  }