/* QuadNova – main.css */
:root,[data-theme="light"]{
  --text-xs:clamp(.75rem,.7rem + .25vw,.875rem);
  --text-sm:clamp(.875rem,.8rem + .35vw,1rem);
  --text-base:clamp(1rem,.95rem + .25vw,1.125rem);
  --text-lg:clamp(1.125rem,1rem + .75vw,1.5rem);
  --text-xl:clamp(1.5rem,1.2rem + 1.25vw,2.25rem);
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;
  --space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;
  --color-bg:#f7f6f2;--color-surface:#f9f8f5;--color-surface-2:#fafaf8;
  --color-surface-offset:#f3f0ec;--color-divider:#dcd9d5;--color-border:#d4d1ca;
  --color-text:#28251d;--color-text-muted:#6c6a64;--color-text-faint:#a09a90;
  --color-text-inverse:#f9f8f4;
  --color-primary:#0e6b62;--color-primary-hover:#0c4e54;--color-primary-active:#0f3638;
  --color-primary-highlight:#c8ddd9;
  --color-orange:#c96a11;--color-success:#437a22;--color-error:#a12c4e;
  --radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.9rem;--radius-xl:1.25rem;
  --radius-full:9999px;
  --shadow-sm:0 1px 3px rgba(19,18,15,.07);
  --shadow-md:0 6px 24px rgba(19,18,15,.09);
  --shadow-lg:0 18px 56px rgba(19,18,15,.12);
  --transition:180ms cubic-bezier(.16,1,.3,1);
  --content:1180px;
  --font-body:'Satoshi',Inter,sans-serif;
  --font-display:'Cabinet Grotesk','Satoshi',sans-serif;
}
[data-theme="dark"]{
  --color-bg:#171614;--color-surface:#1c1b19;--color-surface-2:#201f1d;
  --color-surface-offset:#22211f;--color-divider:#262523;--color-border:#393836;
  --color-text:#e2ded6;--color-text-muted:#a09b92;--color-text-faint:#6f6b63;
  --color-text-inverse:#1b1916;
  --color-primary:#56a79b;--color-primary-hover:#6db8ad;--color-primary-active:#377a71;
  --color-primary-highlight:#313b3b;
  --color-orange:#fdab43;--color-success:#7cb255;--color-error:#e06090;
  --shadow-sm:0 1px 3px rgba(0,0,0,.22);--shadow-md:0 6px 24px rgba(0,0,0,.3);
  --shadow-lg:0 18px 56px rgba(0,0,0,.44);
}
@media (prefers-color-scheme: dark){:root:not([data-theme]){
  --color-bg:#171614;--color-surface:#1c1b19;--color-surface-2:#201f1d;
  --color-surface-offset:#22211f;--color-divider:#262523;--color-border:#393836;
  --color-text:#e2ded6;--color-text-muted:#a09b92;--color-text-faint:#6f6b63;
  --color-text-inverse:#1b1916;
  --color-primary:#56a79b;--color-primary-hover:#6db8ad;--color-primary-active:#377a71;
  --color-primary-highlight:#313b3b;
  --color-orange:#fdab43;--color-success:#7cb255;--color-error:#e06090;
  --shadow-sm:0 1px 3px rgba(0,0,0,.22);--shadow-md:0 6px 24px rgba(0,0,0,.3);
  --shadow-lg:0 18px 56px rgba(0,0,0,.44);
}}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:none;text-size-adjust:none;
  -webkit-font-smoothing:antialiased}
body{font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text);
  background:var(--color-bg);min-height:100dvh;line-height:1.6}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.1;text-wrap:balance}
p,li{text-wrap:pretty;max-width:72ch}
::selection{background:color-mix(in srgb,var(--color-primary) 22%,transparent);color:var(--color-text)}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:var(--radius-sm)}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ── Layout ── */
.container{width:min(calc(100% - 2rem),var(--content));margin-inline:auto}
.skip-link{position:absolute;left:1rem;top:-200px;background:var(--color-primary);
  color:var(--color-text-inverse);padding:.6rem 1rem;border-radius:var(--radius-full);z-index:200}
.skip-link:focus{top:1rem}

/* ── Header ── */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--color-bg) 85%,transparent);
  backdrop-filter:blur(18px);border-bottom:1px solid rgba(40,37,29,.09)}
.hdr-inner{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-3) 1rem;
  max-width:var(--content);margin-inline:auto}
.brand{display:flex;align-items:center;gap:.7rem;font-family:var(--font-display);font-weight:800;
  font-size:1.1rem;flex-shrink:0}
.logo-mark{width:40px;height:40px;background:linear-gradient(135deg,var(--color-primary),
  color-mix(in srgb,var(--color-primary) 60%,#000));border-radius:11px;display:grid;
  place-items:center;color:#fff;flex-shrink:0}
.main-nav{display:flex;align-items:center;gap:var(--space-1);margin-left:auto}
.main-nav .nav-link{padding:.65rem .9rem;border-radius:var(--radius-full);font-size:var(--text-sm);
  font-weight:500;color:var(--color-text-muted);transition:var(--transition)}
.main-nav .nav-link:hover,.main-nav .nav-link.active{color:var(--color-text);
  background:var(--color-surface-2)}
.hdr-actions{display:flex;align-items:center;gap:var(--space-2);margin-left:var(--space-4)}
.icon-btn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:var(--color-surface-2);border:1px solid rgba(40,37,29,.09);transition:var(--transition)}
.icon-btn:hover{background:var(--color-surface-offset)}
.avatar-btn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:var(--color-primary-highlight);color:var(--color-primary);font-weight:900;
  font-size:var(--text-xs);border:1px solid rgba(40,37,29,.09)}
.hamburger{display:none;width:40px;height:40px;border-radius:50%;background:var(--color-surface-2);
  border:1px solid rgba(40,37,29,.09);flex-direction:column;align-items:center;
  justify-content:center;gap:5px;padding:0}
.hamburger span{width:18px;height:2px;background:currentColor;display:block;border-radius:2px;
  transition:var(--transition)}
.mobile-nav{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-4) 1rem;
  border-top:1px solid rgba(40,37,29,.09);background:var(--color-surface)}
.mobile-nav a{padding:.75rem 1rem;border-radius:var(--radius-lg);transition:var(--transition)}
.mobile-nav a:hover{background:var(--color-surface-2)}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.9rem 1.2rem;
  border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:700;transition:var(--transition)}
.btn-primary{background:var(--color-primary);color:var(--color-text-inverse)}
.btn-primary:hover{background:var(--color-primary-hover)}
.btn-secondary{background:var(--color-surface-2);border:1px solid rgba(40,37,29,.1);color:var(--color-text-muted)}
.btn-secondary:hover{background:var(--color-surface-offset);color:var(--color-text)}
.btn-danger{background:var(--color-error);color:#fff}
.btn-sm{padding:.6rem .95rem;font-size:var(--text-xs)}
.btn-full{width:100%;justify-content:center}

/* ── Cards ── */
.card{background:var(--color-surface);border:1px solid rgba(40,37,29,.09);
  border-radius:var(--radius-xl);box-shadow:var(--shadow-sm)}

/* ── Listing Cards ── */
.listing-card{background:var(--color-surface);border:1px solid rgba(40,37,29,.09);
  border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;transition:var(--transition)}
.listing-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.listing-img{position:relative;aspect-ratio:16/10;background:var(--color-surface-offset);overflow:hidden}
.listing-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.listing-card:hover .listing-img img{transform:scale(1.04)}
.listing-img .no-img{width:100%;height:100%;display:grid;place-items:center;
  color:var(--color-text-faint);font-size:2.5rem;background:var(--color-surface-2)}
.badge-row{position:absolute;top:.8rem;left:.8rem;right:.8rem;display:flex;
  justify-content:space-between;gap:.4rem;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;gap:.3rem;padding:.4rem .75rem;
  border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:800;
  background:rgba(255,255,255,.92);color:#1f2b28;backdrop-filter:blur(8px)}
.badge.premium{background:var(--color-orange);color:#fff}
.badge.featured{background:var(--color-primary);color:#fff}
.badge.sold{background:rgba(0,0,0,.65);color:#fff}
.listing-body{padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);flex:1}
.listing-price{font-size:1.6rem;font-family:var(--font-display)}
.listing-title{font-weight:700;font-size:var(--text-base)}
.listing-meta{display:flex;flex-wrap:wrap;gap:.5rem}
.listing-meta span{padding:.4rem .7rem;border-radius:var(--radius-full);
  background:var(--color-surface-offset);font-size:var(--text-xs);color:var(--color-text-muted)}
.listing-actions{display:flex;gap:var(--space-3);margin-top:auto}
.listing-actions .btn{flex:1;justify-content:center}

/* ── Forms ── */
.form-wrap{background:var(--color-surface);border:1px solid rgba(40,37,29,.09);
  border-radius:var(--radius-xl);padding:var(--space-8);box-shadow:var(--shadow-sm)}
.form-row{display:grid;gap:var(--space-4)}
.form-row.cols2{grid-template-columns:repeat(2,1fr)}
.form-group{display:flex;flex-direction:column;gap:.45rem}
.form-group label{font-size:var(--text-sm);font-weight:700;color:var(--color-text-muted)}
.form-group input,.form-group select,.form-group textarea{
  padding:.9rem 1rem;border-radius:var(--radius-lg);border:1px solid rgba(40,37,29,.13);
  background:var(--color-surface-2);transition:var(--transition);width:100%}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 15%,transparent)}
.form-group textarea{min-height:120px;resize:vertical}
.form-error{color:var(--color-error);font-size:var(--text-xs);margin-top:.25rem}
.form-hint{color:var(--color-text-muted);font-size:var(--text-xs)}
.alert{padding:1rem 1.2rem;border-radius:var(--radius-lg);margin-bottom:var(--space-5)}
.alert-success{background:color-mix(in srgb,var(--color-success) 12%,var(--color-surface));
  color:var(--color-success);border:1px solid color-mix(in srgb,var(--color-success) 30%,transparent)}
.alert-error{background:color-mix(in srgb,var(--color-error) 10%,var(--color-surface));
  color:var(--color-error);border:1px solid color-mix(in srgb,var(--color-error) 28%,transparent)}
.alert-info{background:color-mix(in srgb,var(--color-primary) 10%,var(--color-surface));
  color:var(--color-primary);border:1px solid color-mix(in srgb,var(--color-primary) 26%,transparent)}

/* ── Status badges ── */
.status-badge{display:inline-flex;padding:.4rem .75rem;border-radius:var(--radius-full);
  font-size:var(--text-xs);font-weight:800}
.status-active{background:color-mix(in srgb,var(--color-success) 15%,var(--color-surface));color:var(--color-success)}
.status-pending{background:color-mix(in srgb,var(--color-orange) 18%,var(--color-surface));color:var(--color-orange)}
.status-sold{background:color-mix(in srgb,var(--color-text-muted) 18%,var(--color-surface));color:var(--color-text-muted)}
.status-rejected{background:color-mix(in srgb,var(--color-error) 14%,var(--color-surface));color:var(--color-error)}

/* ── Page header ── */
.page-header{padding:var(--space-10) 0 var(--space-6)}
.page-header h1{font-size:var(--text-xl)}
.page-header p{color:var(--color-text-muted);margin-top:var(--space-3)}

/* ── Section ── */
.section{padding:var(--space-8) 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-4);
  margin-bottom:var(--space-6)}
.section-head h2{font-size:var(--text-xl)}
.section-head p{color:var(--color-text-muted);max-width:60ch}

/* ── Grid ── */
.listing-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:var(--space-5)}
.three-col{grid-template-columns:repeat(3,1fr)}
.four-col{grid-template-columns:repeat(4,1fr)}
.stats-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--space-4)}
.stat-card{background:var(--color-surface);border:1px solid rgba(40,37,29,.09);
  border-radius:var(--radius-xl);padding:var(--space-5)}
.stat-card strong{display:block;font-size:1.7rem;font-family:var(--font-display)}
.stat-card span{color:var(--color-text-muted);font-size:var(--text-sm)}

/* ── Hero ── */
.hero{padding:clamp(2.5rem,6vw,5rem) 0}
.hero-inner{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--space-8);align-items:center}
.hero-text .eyebrow{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .85rem;
  border-radius:var(--radius-full);background:var(--color-primary-highlight);
  color:var(--color-primary);font-size:var(--text-xs);font-weight:800;text-transform:uppercase;
  letter-spacing:.1em;margin-bottom:var(--space-4)}
.hero-text h1{font-size:clamp(2.1rem,4vw,4rem);max-width:14ch;margin-bottom:var(--space-4)}
.hero-text .lead{color:var(--color-text-muted);max-width:52ch;margin-bottom:var(--space-6)}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);margin-top:var(--space-8)}
.hero-stat strong{display:block;font-size:1.5rem;font-family:var(--font-display)}
.hero-stat span{color:var(--color-text-muted);font-size:var(--text-xs)}
.hero-panel{background:var(--color-surface);border:1px solid rgba(40,37,29,.09);
  border-radius:var(--radius-xl);padding:var(--space-6);box-shadow:var(--shadow-md)}

/* ── Search bar ── */
.search-bar{display:flex;align-items:center;gap:var(--space-3);background:var(--color-surface);
  border:1px solid rgba(40,37,29,.1);border-radius:var(--radius-full);padding:.9rem 1.2rem;
  box-shadow:var(--shadow-sm)}
.search-bar input{flex:1;border:none;background:transparent;outline:none;font-size:var(--text-base)}
.search-bar .btn{flex-shrink:0}

/* ── Filters sidebar ── */
.filters-layout{display:grid;grid-template-columns:280px 1fr;gap:var(--space-8);align-items:start}
.filters-sidebar{position:sticky;top:calc(72px + 1rem);background:var(--color-surface);
  border:1px solid rgba(40,37,29,.09);border-radius:var(--radius-xl);padding:var(--space-5)}
.filter-section{margin-top:var(--space-5)}
.filter-label{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.14em;
  color:var(--color-text-faint);margin-bottom:var(--space-3);display:block}
.chip-row{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{padding:.5rem .8rem;border-radius:var(--radius-full);background:var(--color-surface-2);
  border:1px solid rgba(40,37,29,.09);font-size:var(--text-xs);font-weight:600;cursor:pointer;
  transition:var(--transition)}
.chip:hover,.chip.active{background:var(--color-primary-highlight);border-color:var(--color-primary);
  color:var(--color-primary)}

/* ── Breadcrumb ── */
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  font-size:var(--text-xs);color:var(--color-text-muted);padding:var(--space-4) 0}
.breadcrumb a:hover{color:var(--color-primary)}
.breadcrumb .sep{color:var(--color-text-faint)}

/* ── Pagination ── */
.pagination{display:flex;align-items:center;justify-content:center;gap:var(--space-2);
  padding:var(--space-8) 0}
.pagination a,.pagination span{width:42px;height:42px;border-radius:50%;display:grid;
  place-items:center;background:var(--color-surface);border:1px solid rgba(40,37,29,.09);
  font-size:var(--text-sm);font-weight:600;transition:var(--transition)}
.pagination a:hover{background:var(--color-surface-offset)}
.pagination .current{background:var(--color-primary);color:var(--color-text-inverse);border-color:transparent}

/* ── Table ── */
.data-table{width:100%;border-collapse:collapse}
.data-table th,.data-table td{text-align:left;padding:var(--space-4);
  border-bottom:1px solid rgba(40,37,29,.08)}
.data-table th{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.12em;
  color:var(--color-text-muted)}
.data-table tr:hover td{background:var(--color-surface-2)}
.data-table td:last-child{white-space:nowrap}

/* ── Image upload ── */
.img-upload-area{border:2px dashed rgba(40,37,29,.18);border-radius:var(--radius-xl);
  padding:var(--space-10);text-align:center;cursor:pointer;transition:var(--transition);
  background:var(--color-surface-2)}
.img-upload-area:hover{border-color:var(--color-primary);background:var(--color-primary-highlight)}
.img-preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:var(--space-3);margin-top:var(--space-4)}
.img-preview{position:relative;aspect-ratio:1;border-radius:var(--radius-lg);overflow:hidden}
.img-preview img{width:100%;height:100%;object-fit:cover}
.img-preview .remove-img{position:absolute;top:.4rem;right:.4rem;width:26px;height:26px;
  background:rgba(0,0,0,.65);color:#fff;border-radius:50%;display:grid;place-items:center;
  font-size:.75rem;cursor:pointer}

/* ── Footer ── */
.site-footer{border-top:1px solid rgba(40,37,29,.09);margin-top:var(--space-16);padding:var(--space-12) 0 var(--space-8)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--space-8)}
.footer-desc{color:var(--color-text-muted);font-size:var(--text-sm);margin-top:var(--space-3);max-width:34ch}
.footer-grid strong{display:block;font-size:var(--text-sm);font-weight:800;margin-bottom:var(--space-3)}
.footer-grid ul{list-style:none;display:flex;flex-direction:column;gap:.6rem}
.footer-grid ul a{font-size:var(--text-sm);color:var(--color-text-muted);transition:var(--transition)}
.footer-grid ul a:hover{color:var(--color-text)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  padding-top:var(--space-6);border-top:1px solid rgba(40,37,29,.08);
  font-size:var(--text-xs);color:var(--color-text-faint);margin-top:var(--space-6)}

/* ── Responsive ── */
@media (max-width: 1100px){.hero-inner,.filters-layout{grid-template-columns:1fr}
  .hero-panel{display:none}.four-col{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width: 768px){.main-nav,.hdr-actions .btn-secondary{display:none}
  .hamburger{display:flex}.three-col{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr}}
@media (max-width: 480px){.three-col,.four-col,.stats-row{grid-template-columns:1fr}
  .form-row.cols2{grid-template-columns:1fr}}


/* ── Mobile nav fix ──────────────────────────────────────────── */
.mobile-nav {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: var(--space-4) var(--space-4) var(--space-6);
  gap: var(--space-1);
  box-shadow: var(--shadow-md);
}
.mobile-nav[hidden] { display: none !important; }
.mobile-nav a {
  display: block;
  padding: .85rem 1rem;
  border-radius: var(--radius-lg);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text);
  transition: var(--transition);
  text-decoration: none;
  border: none;
}
.mobile-nav a:hover,
.mobile-nav a:active {
  background: var(--color-surface-offset);
  color: var(--color-primary);
}
.mobile-nav .btn {
  margin-top: var(--space-3);
  justify-content: center;
  text-align: center;
  border-radius: var(--radius-full);
}
.mobile-nav .btn-primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .85rem 1rem;
}