:root{
  --bg:#f8f4ee;
  --card:#fffdf9;
  --card2:#fff7ef;
  --text:#231c1f;
  --muted:#6d5f64;
  --line:rgba(71,45,53,.14);
  --brand:#7a1f45;
  --brand2:#d6a946;
  --shadow: 0 14px 32px rgba(67,39,54,.12);
  --r:18px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: "Avenir Next", "Montserrat", "Nunito Sans", "Segoe UI", sans-serif;
  background: radial-gradient(1000px 560px at 0% -10%, rgba(122,31,69,.20), transparent 65%),
              radial-gradient(800px 520px at 100% 0%, rgba(214,169,70,.20), transparent 65%),
              var(--bg);
  color:var(--text);
}

a{color:inherit;text-decoration:none}
.container{max-width:1080px;margin:0 auto;padding:22px}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0; gap:14px;
}
.brand{
  display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px;
}
.badge{
  font-size:12px;color:var(--muted);
  background:rgba(255,255,255,.62);
  border:1px solid var(--line);
  padding:6px 10px;border-radius:999px;
}
/* Top navigation tabs */
.navlinks{display:flex;gap:10px;flex-wrap:wrap}

.tabs{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:6px;
  padding:6px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.55);
}

.tab{
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  font-weight:800;
  letter-spacing:.2px;
  border:1px solid rgba(122,31,69,.20);
  background:rgba(255,255,255,.86);
  color:rgba(35,28,31,.85);
  white-space:nowrap;
}
.tabBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--brand),#55263a);
  color:#fff;
  font-size:11px;
  font-weight:800;
  line-height:1;
}
.tab:hover{background:#fff}
.tab.active{background:#fff;border-color:rgba(122,31,69,.20);color:var(--text)}

.tab--cta{background:rgba(122,31,69,.12);border-color:rgba(122,31,69,.24);color:#5a1936}
.tab--cta:hover{background:rgba(122,31,69,.18)}
.tab--cta.active{background:rgba(122,31,69,.24);border-color:rgba(122,31,69,.34)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px; padding:10px 14px;border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.78);
  color:var(--text);
  transition:.15s transform, .15s background;
}
.btn:hover{transform:translateY(-1px);background:#fff}
.btn.primary{
  border:none;
  background: linear-gradient(135deg, var(--brand), #55263a);
  color:#fff;
}
.btn.danger{
  background: rgba(122,31,69,.12);
  border:1px solid rgba(122,31,69,.28);
  color:#5a1936;
}
.btn.green{
  border:none;
  background: linear-gradient(135deg, var(--brand2), #f0cc7b);
  color:#3a2a00;
  font-weight:750;
}
.navMenuBtn{display:none}
.hero{
  display:grid; grid-template-columns: 1.2fr .8fr;
  gap:18px; align-items:stretch;
  margin-top:10px;
}
@media (max-width: 900px){
  .hero{grid-template-columns: 1fr;}
}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.76));
  border:1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
.card.pad{padding:18px}
.h1{font-size:42px;line-height:1.05;margin:0 0 10px;font-weight:900}
.sub{color:var(--muted);font-size:16px;line-height:1.5;margin:0 0 14px}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.kpi{padding:12px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.66)}
.kpi b{display:block;font-size:18px}
.kpi span{color:var(--muted);font-size:12px}

.filters{
  display:grid;grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap:10px; margin:14px 0;
}
.filters--two{
  grid-template-columns: 1.2fr 1fr;
}
@media(max-width: 900px){
  .filters{grid-template-columns:1fr 1fr;}
}
.input, select, textarea{
  width:100%;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.74);
  color:var(--text);
  padding:11px 12px;
  outline:none;
}
textarea{min-height:120px;resize:vertical}
label{font-size:12px;color:var(--muted);display:block;margin:6px 0 6px}
.grid{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
@media(max-width: 900px){
  .grid{grid-template-columns:1fr;}
}
.listing{
  padding:14px;
  border-radius:16px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.74);
}
.toprow{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.pill{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(122,31,69,.10);
  border:1px solid rgba(122,31,69,.24);
  color: #5a1936;
}
.meta{color:var(--muted);font-size:13px;margin-top:8px;line-height:1.35}
.price{font-size:22px;font-weight:900;margin-top:8px}
.actions{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.small{font-size:12px;color:var(--muted)}
hr.sep{
  border:0;border-top:1px solid var(--line);
  margin:16px 0;
}
.footer{margin:28px 0;color:var(--muted);font-size:12px}
.legalCopy{
  margin-top:12px;
  font-size:11px;
  line-height:1.5;
  color:var(--muted);
  max-width:100%;
  overflow-wrap:anywhere;
}
.legalCopyNote{
  margin-top:8px;
  font-size:11px;
  line-height:1.5;
  color:var(--muted);
}
.notice{
  padding:12px;border-radius:14px;border:1px dashed rgba(255,255,255,.2);
  background:rgba(255,255,255,.5);color:var(--text)
}


/* --- Photos + Contact modal (v2) --- */
.card-photos{display:flex;gap:10px;overflow:auto;margin:10px 0 6px;padding-bottom:4px}
.card-photos img{height:96px;width:auto;border-radius:12px;border:1px solid rgba(255,255,255,.12);cursor:pointer}
.card-photos::-webkit-scrollbar{height:6px}
.card-photos::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:999px}

.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;padding:18px;z-index:50}
.modal{width:min(520px,100%);background:rgba(255,252,248,.95);border:1px solid var(--line);border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.25);padding:16px 16px 14px}
.modal h3{margin:2px 0 10px;font-size:16px}
.modal .row{display:flex;gap:10px;align-items:center;justify-content:space-between;margin:10px 0}
.modal .value{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:13px;opacity:.95;word-break:break-all}
.modal .actions{display:flex;gap:10px;justify-content:flex-end;margin-top:12px}
.modal .btn{padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--text);font-weight:600;cursor:pointer}
.modal .btn.primary{background:linear-gradient(90deg,#d6a946,#be8631);border:0;color:#342205}
.modal .btn.danger{background:rgba(122,31,69,.12);border:1px solid rgba(122,31,69,.25)}
.modal .small{font-size:12px;opacity:.75}

/* Mobile nav polish */
@media (max-width: 640px){
  .nav.mobile-nav-ready{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    position:relative;
  }
  .nav.mobile-nav-ready > div:last-child{
    display:none;
    width:100%;
    margin-top:10px;
    padding:10px;
    border:1px solid var(--line);
    border-radius:14px;
    background:rgba(255,255,255,.78);
    box-shadow:0 10px 24px rgba(0,0,0,.08);
  }
  .nav.mobile-nav-ready.nav-open > div:last-child{display:flex;flex-direction:column;gap:10px}
  .nav.mobile-nav-ready .navMenuBtn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:40px;
    padding:9px 12px;
  }
  .navMenuIcon{
    display:inline-flex;
    width:18px;
    justify-content:center;
    font-size:16px;
    line-height:1;
  }
  .tabs{
    width:100%;
    overflow:visible;
    -webkit-overflow-scrolling:auto;
    scroll-behavior:auto;
    scrollbar-width:none;
    flex-wrap:wrap;
    border-radius:12px;
    padding:4px;
    gap:6px;
  }
  .tabs::-webkit-scrollbar{display:none}
  .tab{
    flex:1 1 calc(50% - 6px);
    min-height:40px;
    padding:10px 10px;
    font-size:14px;
  }
  .nav.mobile-nav-ready .navright{
    width:100%;
    justify-content:stretch;
  }
  .nav.mobile-nav-ready .navright .btn{width:100%}
  .nav.mobile-nav-ready .navchip{
    width:100%;
    justify-content:space-between;
    border-radius:12px;
    padding:8px 10px;
  }
}

/* Image upload previews */
.imggrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:700px){.imggrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.imgtile{position:relative;border-radius:14px;overflow:hidden;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10)}
.imgtile img{width:100%;height:110px;object-fit:cover;display:block}
.imgtile .x{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.35);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-weight:700}

/* Listing card image */
.listing-img{margin:-2px -2px 12px -2px;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04)}
.listing-img img{width:100%;height:180px;object-fit:cover;display:block}
.listing-carousel{position:relative}
.listing-carousel .listing-photo{display:none}
.listing-carousel .listing-photo.is-active{display:block}
.imgNavBtn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.45);
  background:rgba(20,12,16,.50);
  color:#fff;
  cursor:pointer;
  font-size:22px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
}
.imgNavBtn.prev{left:8px}
.imgNavBtn.next{right:8px}
.imgCount{
  position:absolute;
  right:8px;
  bottom:8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.45);
  background:rgba(20,12,16,.50);
  color:#fff;
  font-size:11px;
  padding:4px 8px;
}
@media (max-width:700px){
  .listing-img{background:rgba(255,255,255,.92)}
  .listing-img img{height:auto;max-height:58vh;object-fit:contain;background:rgba(255,255,255,.92)}
}

.card-title{font-size:18px;font-weight:850;line-height:1.25;margin-top:10px}
.desc{color:var(--muted);font-size:14px;line-height:1.45;margin-top:10px}
.empty{
  border:1px dashed var(--line);
  border-radius:14px;
  padding:22px;
  background:rgba(255,255,255,.55);
  color:var(--muted);
}
.skeleton{
  border-radius:14px;
  padding:22px;
  background:rgba(255,255,255,.55);
  color:var(--muted);
}

/* Auth chip (top-right) */
.navright{display:flex;align-items:center;gap:10px}
.navchip{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:rgba(255,255,255,.55);padding:6px 8px;border-radius:999px}
.dot{width:10px;height:10px;border-radius:999px;background:linear-gradient(135deg,var(--brand2),var(--brand))}

/* Auth modal reuse */
.modal-backdrop{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(20,12,16,.40);padding:18px;z-index:50}
.modal{width:min(560px, 96vw);background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.88));border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.22);padding:16px}

/* Inbox */
.inbox{display:grid;grid-template-columns:1fr;gap:10px;margin-top:12px}
.inboxRow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.72)}
.inboxRow:hover{background:#fff}
.inboxName{font-weight:900}
.inboxIg{font-weight:800;color:var(--muted);margin-left:8px}
.inboxMeta{color:var(--muted);font-size:12px;margin-top:2px}
.inboxPreview{
  color:rgba(35,28,31,.72);
  font-size:13px;
  margin-top:5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:62vw;
}
.inboxRight{display:flex;align-items:center;gap:10px}
.inboxUnread{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  height:20px;
  padding:0 7px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--brand),#55263a);
  color:#fff;
  font-size:11px;
  font-weight:800;
}
.inboxRow.isUnread .inboxName{font-weight:950}
.inboxChevron{font-size:22px;color:rgba(35,28,31,.55)}

/* Chat */
.chatShell{display:flex;flex-direction:column;margin-top:24px;height:auto;min-height:0}
.chatHeader{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.72)}
.chatHeaderLeft{display:flex;flex-direction:column;gap:2px}
.chatHeaderName{font-weight:950}
.chatHeaderMeta{color:var(--muted);font-size:12px}
.chatHeaderActions{display:flex;gap:8px;flex-wrap:wrap}

.chatMessages{overflow:auto;padding:14px;margin-top:10px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.62);min-height:360px;max-height:62vh}
.bubbleRow{display:flex;margin:8px 0}
.bubbleRow.mine{justify-content:flex-end}
.bubbleRow.theirs{justify-content:flex-start}
.bubble{max-width:min(520px, 78%);border-radius:18px;padding:10px 12px;border:1px solid var(--line);background:#fff}
.bubbleRow.mine .bubble{background:linear-gradient(135deg, rgba(122,31,69,.12), rgba(214,169,70,.10))}
.bubbleBody{white-space:pre-wrap;word-wrap:break-word}
.bubbleMeta{margin-top:6px;font-size:11px;color:var(--muted);text-align:right}

.chatForm{display:flex;gap:10px;margin-top:10px}
.chatInput{flex:1;border:1px solid var(--line);border-radius:16px;padding:12px 12px;background:rgba(255,255,255,.78);font:inherit}

@media (max-width: 900px){
  .chatMessages{min-height:300px;max-height:56vh}
}

/* Mobile-first tuning (primary usage) */
html{
  -webkit-text-size-adjust:100%;
}

@media (max-width: 900px){
  .container{padding:16px}
  .card.pad{padding:16px}
  .h1{font-size:34px;line-height:1.1}
  .kpis{grid-template-columns:1fr 1fr}
  .filters{grid-template-columns:1fr !important}
  .filters--two{grid-template-columns:1fr !important}
  .actions{gap:8px}
  .actions .btn{min-height:42px}
  .toprow{gap:8px}
  .pill{align-self:flex-start}
  .chatShell{min-height:460px}
  .bubble{max-width:min(620px,86%)}
}

@media (max-width: 640px){
  .container{padding:12px}
  .nav{padding:10px 0;gap:10px}
  .brand{gap:8px;font-size:15px}
  .badge{display:none}
  .navright .btn{min-height:40px;padding:9px 12px}

  .h1{font-size:30px;line-height:1.12}
  .sub{font-size:15px}
  .kpis{grid-template-columns:1fr}
  .kpi{padding:10px}
  .card{border-radius:16px}
  .listing{padding:12px}
  .price{font-size:20px}
  .meta{font-size:12px}
  .small{font-size:11px}

  .input, select, textarea{
    min-height:42px;
    font-size:16px; /* prevents iOS zoom on focus */
    padding:10px 12px;
  }
  textarea{min-height:110px}
  .btn{min-height:42px}
  .actions .btn{width:100%}

  .listing-img{
    background:rgba(255,255,255,.92);
  }
  .listing-img img{
    height:auto;
    max-height:58vh;
    object-fit:contain;
    background:rgba(255,255,255,.92);
  }
  .imgNavBtn{
    width:38px;
    height:38px;
    font-size:24px;
  }
  .imgCount{
    font-size:12px;
    padding:5px 9px;
  }

  .imggrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .imgtile img{height:100px}

  .modal-backdrop{padding:12px}
  .modal{padding:14px}
  .modal .actions{flex-direction:column}
  .modal .actions .btn{width:100%}

  .chatShell{margin-top:16px}
  .chatHeader{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
  .chatHeaderActions{width:100%}
  .chatHeaderActions .btn{width:100%}
  .chatMessages{
    min-height:42vh;
    max-height:52vh;
  }
  .bubble{max-width:90%}
  .chatForm{flex-direction:column}
  .chatInput{min-height:44px}
.chatForm .btn{width:100%}
}

/* Inline edit modal */
.editOverlay{
  position:fixed;
  inset:0;
  z-index:80;
  background:rgba(20,12,16,.50);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
}
.editDialog{
  width:min(760px,100%);
  max-height:88vh;
  overflow:auto;
  border-radius:18px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(255,255,255,.92));
  box-shadow:0 24px 60px rgba(0,0,0,.25);
  padding:16px;
}
.editTitle{
  font-weight:900;
  font-size:22px;
  margin-bottom:10px;
}
.editGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.editThumbs{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-top:10px;
}
.editThumb{
  position:relative;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--line);
  background:rgba(255,255,255,.85);
}
.editThumb img{
  width:100%;
  height:98px;
  object-fit:cover;
  display:block;
}
.editActions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:12px;
}
@media (max-width: 700px){
  .editDialog{
    max-height:92vh;
    padding:14px;
    border-radius:16px;
  }
  .editTitle{font-size:20px}
  .editGrid{grid-template-columns:1fr}
  .editThumbs{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .editThumb img{height:96px}
  .editActions{
    flex-direction:column-reverse;
  }
  .editActions .btn{width:100%}
}