@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500&display=swap');

:root{
  --ink:#1B2430;
  --paper:#E9EDEA;
  --card:#F7F6F1;
  --amber:#D98E2B;
  --amber-deep:#B8730F;
  --teal:#3F7D6D;
  --rust:#B5453A;
  --line: rgba(27,36,48,0.16);
  --line-strong: rgba(27,36,48,0.32);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans', sans-serif;
  line-height:1.5;
}
h1,h2,h3{ font-family:'Space Grotesk', sans-serif; margin:0; }
.mono{ font-family:'IBM Plex Mono', monospace; }
button{ font-family:inherit; cursor:pointer; }
input,textarea,select{ font-family:inherit; }

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}

/* ---------- Masthead ---------- */
.masthead{
  background:var(--ink);
  color:var(--paper);
  padding: clamp(28px,5vw,56px) clamp(20px,5vw,48px);
}
.masthead-inner{ max-width:980px; margin:0 auto; }
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing:0.14em;
  color:var(--amber);
  margin-bottom:10px;
}
.masthead h1{
  font-size:clamp(32px,6vw,52px);
  font-weight:700;
  letter-spacing:-0.01em;
}
.lede{
  max-width:560px;
  margin:14px 0 22px;
  color:rgba(233,237,234,0.82);
  font-size:15px;
}
.stat-row{
  display:flex; gap:18px; flex-wrap:wrap; align-items:center;
  font-family:'IBM Plex Mono', monospace; font-size:12.5px;
  color:rgba(233,237,234,0.72); margin-bottom:20px;
}
.stat-row .dot{ color:var(--amber); }

.header-actions{ display:flex; gap:10px; flex-wrap:wrap; }

.ghost-btn{
  background:transparent;
  border:1px solid rgba(233,237,234,0.4);
  color:var(--paper);
  padding:9px 16px;
  border-radius:2px;
  font-size:13px;
  font-family:'IBM Plex Mono', monospace;
  transition:background .15s, border-color .15s;
}
.ghost-btn:hover{ background:rgba(233,237,234,0.08); border-color:rgba(233,237,234,0.7); }
.solid-btn{
  background:var(--amber);
  border:1px solid var(--amber);
  color:var(--ink);
  padding:9px 16px;
  border-radius:2px;
  font-size:13px;
  font-weight:600;
  font-family:'IBM Plex Mono', monospace;
  transition:background .15s;
}
.solid-btn:hover{ background:var(--amber-deep); border-color:var(--amber-deep); }
.badge-count{
  background:var(--rust); color:#fff; border-radius:50px;
  font-size:11px; padding:1px 7px; margin-left:6px;
}

button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible{
  outline:2px solid var(--teal); outline-offset:2px;
}

/* ---------- Main grid ---------- */
main{ max-width:1080px; margin:0 auto; padding: 34px clamp(16px,4vw,32px) 70px; }

.grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap:22px;
}

.empty-state{
  text-align:center; padding:70px 20px; color:rgba(27,36,48,0.6);
}
.empty-state h3{ margin-bottom:8px; font-size:20px; }

/* ---------- Tag card (signature element) ---------- */
.tag-card{
  position:relative;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:3px;
  overflow:visible;
  display:flex; flex-direction:column;
}
.tag-card.sold{ opacity:0.6; }

.tag-hole{
  position:absolute; top:14px; left:16px;
  width:12px; height:12px; border-radius:50%;
  background:var(--paper);
  border:1px solid var(--line-strong);
  z-index:2;
}

.tag-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px 12px 40px;
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  letter-spacing:0.05em;
}
.tag-no{ color:rgba(27,36,48,0.55); }
.stamp{
  font-weight:600; padding:3px 8px; border:1.5px solid currentColor; border-radius:2px;
  transform:rotate(-3deg);
}
.stamp.available{ color:var(--teal); }
.stamp.sold{ color:var(--rust); }

.tag-photo{
  width:100%; aspect-ratio:4/3; background:#dfe3df;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; cursor:pointer;
}
.tag-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.tag-photo .no-photo{ font-family:'IBM Plex Mono', monospace; font-size:12px; color:rgba(27,36,48,0.4); }

.tag-perf{
  position:relative;
  border-top:2px dashed var(--line-strong);
  margin:0 14px;
}
.tag-perf::before, .tag-perf::after{
  content:''; position:absolute; top:-7px; width:14px; height:14px; border-radius:50%;
  background:var(--paper); border:1px solid var(--line-strong);
}
.tag-perf::before{ left:-21px; }
.tag-perf::after{ right:-21px; }

.tag-body{ padding:16px; display:flex; flex-direction:column; gap:8px; flex:1; }
.tag-body h3{ font-size:17px; cursor:pointer; }
.tag-body h3:hover{ color:var(--amber-deep); }
.desc{
  font-size:13.5px; color:rgba(27,36,48,0.75);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  margin:0;
}
.condition-note{
  font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:var(--teal);
}
.price-row{ display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding-top:8px; }
.price{ font-family:'IBM Plex Mono', monospace; font-weight:600; font-size:15px; }
.cta{
  background:var(--ink); color:var(--paper); border:none; padding:8px 14px;
  border-radius:2px; font-size:12.5px; font-family:'IBM Plex Mono', monospace;
  transition:background .15s;
}
.cta:hover{ background:#000; }
.cta:disabled{ background:rgba(27,36,48,0.3); cursor:not-allowed; }

.seller-controls{
  display:flex; gap:6px; padding: 0 16px 14px; flex-wrap:wrap;
}
.seller-controls button{
  background:none; border:1px solid var(--line-strong); border-radius:2px;
  font-family:'IBM Plex Mono', monospace; font-size:11px; padding:5px 8px;
  color:var(--ink);
}
.seller-controls button:hover{ background:rgba(27,36,48,0.06); }
.seller-controls .danger{ color:var(--rust); border-color:var(--rust); }

/* ---------- Footer ---------- */
.foot{
  text-align:center; padding:30px 20px 50px; font-size:12.5px;
  color:rgba(27,36,48,0.5); font-family:'IBM Plex Mono', monospace;
}

/* ---------- Modals ---------- */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(27,36,48,0.55);
  display:flex; align-items:flex-start; justify-content:center;
  padding: 5vh 16px; overflow-y:auto; z-index:100;
}
.modal-backdrop[hidden]{ display:none; }
.modal{
  background:var(--card); border-radius:4px; max-width:560px; width:100%;
  padding:28px; position:relative; margin-bottom:5vh;
}
.modal h2{ font-size:22px; margin-bottom:4px; }
.modal .sub{ font-size:13px; color:rgba(27,36,48,0.6); margin-bottom:18px; }
.close-x{
  position:absolute; top:16px; right:16px; background:none; border:none;
  font-size:20px; line-height:1; color:rgba(27,36,48,0.5); padding:4px;
}
.close-x:hover{ color:var(--ink); }

.field{ margin-bottom:16px; }
.field label{ display:block; font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.03em; margin-bottom:6px; color:rgba(27,36,48,0.7); }
.field input[type=text], .field input[type=number], .field textarea, .field select{
  width:100%; padding:10px 12px; border:1px solid var(--line-strong); border-radius:2px;
  background:#fff; font-size:14px; color:var(--ink);
}
.field textarea{ min-height:80px; resize:vertical; }
.radio-group{ display:flex; gap:14px; flex-wrap:wrap; font-size:13.5px; }
.radio-group label{ display:flex; align-items:center; gap:6px; font-family:'IBM Plex Sans',sans-serif; color:var(--ink); }

.photo-picker{
  border:1.5px dashed var(--line-strong); border-radius:3px; padding:16px; text-align:center; cursor:pointer;
}
.photo-picker:hover{ border-color:var(--teal); }
.photo-previews{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.photo-previews .thumb{ position:relative; width:70px; height:70px; border-radius:2px; overflow:hidden; }
.photo-previews .thumb img{ width:100%; height:100%; object-fit:cover; }
.photo-previews .thumb button{
  position:absolute; top:2px; right:2px; background:rgba(27,36,48,0.75); color:#fff; border:none;
  border-radius:50%; width:18px; height:18px; font-size:11px; line-height:1;
}

.form-note{ font-size:12px; color:rgba(27,36,48,0.55); margin-top:4px; }
.error-text{ color:var(--rust); font-size:12.5px; margin-top:6px; }
.success-box{ background:rgba(63,125,109,0.12); border:1px solid var(--teal); color:var(--teal); padding:12px 14px; border-radius:3px; font-size:13.5px; }

.detail-photo{ width:100%; aspect-ratio:4/3; background:#dfe3df; border-radius:3px; overflow:hidden; margin-bottom:16px; position:relative; }
.detail-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo-nav{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(27,36,48,0.6); color:#fff; border:none; width:30px; height:30px; border-radius:50%; font-size:16px; }
.photo-nav.prev{ left:8px; } .photo-nav.next{ right:8px; }

.divider{ border:none; border-top:1px solid var(--line); margin:18px 0; }

.inquiry-item{ border:1px solid var(--line); border-radius:3px; padding:12px 14px; margin-bottom:10px; }
.inquiry-item .top-row{ display:flex; justify-content:space-between; font-size:12.5px; color:rgba(27,36,48,0.55); font-family:'IBM Plex Mono', monospace; margin-bottom:6px; }
.inquiry-item .msg{ font-size:14px; margin:4px 0; }
.inquiry-item .contact-line{ font-family:'IBM Plex Mono', monospace; font-size:13px; color:var(--teal); }
.inquiry-item .offer{ font-family:'IBM Plex Mono', monospace; font-weight:600; }
.inquiry-item .remove-btn{ background:none; border:none; color:var(--rust); font-size:12px; font-family:'IBM Plex Mono', monospace; }

@media (max-width:520px){
  .modal{ padding:20px; }
}