/* ================================================================
   PropertyExpo — Merchant Panel CSS  (merchant.css)
   Fully responsive: desktop sidebar | tablet | mobile
================================================================ */

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy-900: #0b1638;
  --navy-800: #152050;
  --navy-700: #1c2d6b;
  --gold-600: #c9a23a;
  --gold-500: #e0b54a;
  --white:    #ffffff;
  --cream:    #fbf9f5;
  --line:     #e5e8f2;
  --ink:      #1a1f3a;
  --ink-2:    #374268;
  --ink-3:    #7a84a8;
  --green:    #1a8a5b;
  --green-bg: rgba(26,138,91,.08);
  --amber:    #d97706;
  --amber-bg: rgba(217,119,6,.08);
  --red:      #ef4444;
  --red-bg:   rgba(239,68,68,.08);
  --blue:     #2563eb;
  --blue-bg:  rgba(37,99,235,.08);
  --sidebar-w: 240px;
  --topbar-h:  62px;
}

html, body { height: 100%; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px; line-height: 1.5;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--gold-600); text-decoration: none; }
a:hover { text-decoration: underline; }
input, select, textarea, button { font-family: inherit; font-size: 13.5px; }

/* ── AUTH ────────────────────────────────────────────────────── */
.m-auth {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}
.m-auth-art {
  background: var(--navy-900); color: #fff;
  display: flex; flex-direction: column;
  padding: 40px 48px;
  position: relative; overflow: hidden;
}
.m-auth-art::before {
  content:''; position:absolute; top:-120px; right:-120px;
  width:380px; height:380px; border-radius:50%;
  background:radial-gradient(circle,rgba(224,181,74,.18) 0%,transparent 70%);
}
.m-auth-art::after {
  content:''; position:absolute; bottom:-80px; left:-80px;
  width:280px; height:280px; border-radius:50%;
  background:radial-gradient(circle,rgba(224,181,74,.10) 0%,transparent 70%);
}
.m-brand { display:flex; align-items:center; gap:12px; text-decoration:none; }
.m-wordmark { font-family:'Fraunces',serif; font-weight:700; font-size:17px; color:#fff; }
.m-wordmark span { color:var(--gold-500); }
.m-tag { font-size:11px; color:rgba(255,255,255,.45); letter-spacing:.08em; text-transform:uppercase; }
.m-pitch { flex:1; display:flex; flex-direction:column; justify-content:center; padding:40px 0 32px; }
.m-eyebrow { display:flex; align-items:center; gap:10px; font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-500); margin-bottom:18px; }
.m-eyebrow span { display:inline-block; width:28px; height:2px; background:var(--gold-500); }
.m-pitch h1 { font-family:'Fraunces',serif; font-weight:500; font-size:32px; line-height:1.25; color:#fff; margin-bottom:16px; }
.m-pitch h1 span { color:var(--gold-500); font-style:italic; }
.m-pitch p { font-size:14.5px; color:rgba(255,255,255,.65); line-height:1.7; margin-bottom:32px; max-width:400px; }
.m-stats { display:flex; gap:28px; }
.m-stats .n { font-family:'Fraunces',serif; font-size:26px; font-weight:600; color:var(--gold-500); }
.m-stats .l { font-size:12px; color:rgba(255,255,255,.5); margin-top:2px; }
.m-perks { display:flex; flex-direction:column; gap:10px; }
.m-perk { display:flex; align-items:center; gap:10px; font-size:14px; color:rgba(255,255,255,.75); }
.m-perk span { color:var(--gold-500); font-weight:700; }
.m-art-foot { display:flex; gap:16px; font-size:12px; color:rgba(255,255,255,.3); padding-top:20px; border-top:1px solid rgba(255,255,255,.08); }

.m-auth-form-wrap {
  display:flex; align-items:center; justify-content:center;
  padding:40px 32px; background:var(--white);
}
.m-auth-form {
  width:100%; max-width:420px;
  display:flex; flex-direction:column; gap:16px;
  animation:authFade .35s ease both;
}
@keyframes authFade { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }

.m-title-row h2 { font-family:'Fraunces',serif; font-size:26px; font-weight:600; color:var(--navy-900); margin-bottom:4px; }
.m-title-row p  { font-size:13.5px; color:var(--ink-3); }
.m-title-row a  { color:var(--gold-600); }

.m-alert { padding:11px 14px; border-radius:10px; font-size:13px; display:flex; align-items:flex-start; gap:8px; }
.m-alert.error   { background:var(--red-bg);   color:#b91c1c; border:1px solid #fca5a5; }
.m-alert.success { background:var(--green-bg); color:#166534; border:1px solid rgba(26,138,91,.25); }

.m-field { display:flex; flex-direction:column; gap:5px; }
.m-field label { font-size:12.5px; font-weight:600; color:var(--ink-2); }
.m-field input, .m-field select, .m-field textarea {
  padding:10px 13px; border:1.5px solid var(--line); border-radius:10px;
  font-size:13.5px; color:var(--ink); background:var(--white);
  transition:border-color .15s,box-shadow .15s; outline:none; width:100%;
}
.m-field input:focus,.m-field select:focus,.m-field textarea:focus {
  border-color:var(--gold-500); box-shadow:0 0 0 3px rgba(224,181,74,.12);
}
.m-field input.err { border-color:var(--red); }
.m-err-text { color:var(--red); font-size:12px; margin-left:6px; }
.m-input-wrap { position:relative; display:flex; align-items:center; }
.m-input-wrap svg { position:absolute; left:13px; color:var(--ink-3); pointer-events:none; }
.m-input-wrap input { padding-left:40px; }
.m-toggle { position:absolute; right:12px; background:none; border:none; cursor:pointer; font-size:11px; font-weight:700; color:var(--ink-3); letter-spacing:.08em; }
.m-meta { display:flex; align-items:center; justify-content:space-between; font-size:13px; }
.m-meta label { display:flex; align-items:center; gap:6px; cursor:pointer; color:var(--ink-2); }
.m-meta input[type="checkbox"] { accent-color:var(--gold-500); }
.m-meta a { color:var(--ink-3); font-size:13px; }
.m-meta a:hover { color:var(--gold-600); }
.m-submit {
  width:100%; padding:13px 20px;
  background:var(--navy-900); color:#fff; border:none; border-radius:11px;
  font-size:14.5px; font-weight:600; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:background .15s,transform .1s; margin-top:4px;
}
.m-submit:hover { background:var(--navy-700); }
.m-submit:active { transform:scale(.98); }
.m-divider { text-align:center; font-size:13px; color:var(--ink-3); position:relative; }
.m-divider::before,.m-divider::after { content:''; position:absolute; top:50%; width:35%; height:1px; background:var(--line); }
.m-divider::before { left:0; } .m-divider::after { right:0; }
.m-register-btn {
  width:100%; padding:12px 20px; border:1.5px solid var(--line);
  border-radius:11px; background:var(--white); color:var(--ink);
  font-size:14px; font-weight:500; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:border-color .15s,box-shadow .15s; text-decoration:none;
}
.m-register-btn:hover { border-color:var(--gold-500); box-shadow:0 0 0 3px rgba(224,181,74,.1); text-decoration:none; }
.m-hint { text-align:center; font-size:13px; color:var(--ink-3); }
.m-hint a { color:var(--gold-600); font-weight:500; }
.m-row-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* ── APP SHELL ───────────────────────────────────────────────── */
.m-app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

/* ── SIDEBAR ─────────────────────────────────────────────────── */
.m-sidebar {
  background: var(--navy-900);
  color: rgba(255,255,255,.65);
  display: flex; flex-direction: column;
  height: 100vh;
  position: sticky; top: 0;
  overflow-y: auto;
  z-index: 100;
}
.m-sidebar-brand { padding:20px 20px 16px; border-bottom:1px solid rgba(255,255,255,.08); }
.m-sidebar-profile {
  display:flex; align-items:center; gap:10px;
  padding:14px 18px; border-bottom:1px solid rgba(255,255,255,.08);
}
.m-ava {
  width:36px; height:36px; border-radius:50%;
  background:linear-gradient(135deg,var(--navy-700),var(--gold-600));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces',serif; font-weight:700; font-size:13px; flex:0 0 36px;
}
.m-sid-info { flex:1; min-width:0; }
.m-sid-name { font-size:13px; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m-sid-ref  { font-size:11px; color:rgba(255,255,255,.35); font-family:monospace; }
.m-status-dot { width:8px; height:8px; border-radius:50%; flex:0 0 8px; }
.m-status-dot.green  { background:#22c55e; }
.m-status-dot.amber  { background:#f59e0b; }
.m-status-dot.red    { background:#ef4444; }
.m-status-dot.grey   { background:#6b7280; }

.m-nav { display:flex; flex-direction:column; padding:10px; gap:2px; flex:1; }
.m-nav-item {
  display:flex; align-items:center; gap:11px;
  padding:10px 12px; border-radius:10px;
  font-size:13.5px; font-weight:500;
  color:rgba(255,255,255,.6); text-decoration:none;
  transition:background .12s,color .12s; position:relative;
}
.m-nav-item:hover { background:rgba(255,255,255,.07); color:#fff; text-decoration:none; }
.m-nav-item.active { background:rgba(224,181,74,.15); color:var(--gold-500); }
.m-nav-item.active svg { color:var(--gold-500); }
.m-badge { margin-left:auto; background:var(--red); color:#fff; font-size:10.5px; font-weight:700; padding:1px 6px; border-radius:99px; }

.m-sidebar-foot { padding:12px 10px 16px; border-top:1px solid rgba(255,255,255,.08); display:flex; flex-direction:column; gap:2px; }
.m-foot-link { display:flex; align-items:center; gap:9px; padding:9px 12px; border-radius:9px; font-size:13px; color:rgba(255,255,255,.4); text-decoration:none; transition:background .12s,color .12s; }
.m-foot-link:hover { background:rgba(255,255,255,.06); color:rgba(255,255,255,.7); text-decoration:none; }
.m-foot-link.danger:hover { color:#f87171; }

/* ── MAIN ────────────────────────────────────────────────────── */
.m-main { display:flex; flex-direction:column; min-height:100vh; min-width:0; overflow:hidden; }
.m-backdrop { display:none; }

/* ── TOPBAR ──────────────────────────────────────────────────── */
.m-topbar {
  display:flex; align-items:center;
  height:var(--topbar-h); padding:0 20px;
  background:var(--white); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:50; gap:12px;
}
.m-menu-btn { display:none; background:none; border:none; cursor:pointer; padding:6px; border-radius:8px; color:var(--ink-2); flex:0 0 auto; }
.m-topbar-title { font-family:'Fraunces',serif; font-size:18px; font-weight:600; color:var(--navy-900); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m-topbar-actions { display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.m-icon-btn { width:36px; height:36px; border-radius:9px; border:1.5px solid var(--line); background:var(--white); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink-2); transition:border-color .12s; text-decoration:none; flex:0 0 36px; }
.m-icon-btn:hover { border-color:var(--gold-500); text-decoration:none; }
.m-topbar-ava { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,var(--navy-700),var(--gold-600)); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-weight:700; font-size:12px; flex:0 0 32px; }

/* ── STATUS BANNER ───────────────────────────────────────────── */
.m-status-banner { display:flex; align-items:flex-start; gap:10px; padding:12px 20px; font-size:13.5px; flex-wrap:wrap; line-height:1.5; }
.m-status-banner.pending  { background:var(--amber-bg); color:#92400e; border-bottom:1px solid rgba(217,119,6,.2); }
.m-status-banner.rejected { background:var(--red-bg); color:#b91c1c; border-bottom:1px solid rgba(239,68,68,.2); }
.m-status-banner a { color:inherit; font-weight:600; }

/* ── CONTENT ─────────────────────────────────────────────────── */
.m-content { padding:22px; flex:1; animation:mFadeIn .28s ease both; }
@keyframes mFadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }

/* ── PAGE HEADER ─────────────────────────────────────────────── */
.m-page-hd { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:20px; gap:12px; flex-wrap:wrap; }
.m-crumb { font-size:12.5px; color:var(--ink-3); margin-bottom:4px; }
.m-crumb a { color:var(--ink-3); }
.m-crumb .sep { margin:0 5px; }
.m-page-hd h1 { font-family:'Fraunces',serif; font-size:22px; font-weight:600; color:var(--navy-900); }
.m-page-hd h1 .gold { color:var(--gold-600); }
.m-hd-actions { display:flex; gap:8px; flex-wrap:wrap; }

/* ── STAT CARDS ──────────────────────────────────────────────── */
.m-stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px; }
.m-stat-card { background:var(--white); border:1px solid var(--line); border-radius:14px; padding:16px 18px; display:flex; flex-direction:column; gap:8px; transition:box-shadow .15s,transform .15s; }
.m-stat-card:hover { box-shadow:0 4px 20px rgba(11,22,56,.08); transform:translateY(-2px); }
.m-stat-card .row { display:flex; align-items:center; gap:8px; }
.m-stat-card .icn { width:36px; height:36px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex:0 0 36px; }
.m-stat-card .icn.gold   { background:rgba(224,181,74,.12); color:var(--gold-600); }
.m-stat-card .icn.green  { background:var(--green-bg);  color:var(--green); }
.m-stat-card .icn.navy   { background:rgba(11,22,56,.08); color:var(--navy-900); }
.m-stat-card .icn.amber  { background:var(--amber-bg);  color:var(--amber); }
.m-stat-card .icn.red    { background:var(--red-bg);    color:var(--red); }
.m-stat-card .icn.blue   { background:var(--blue-bg);   color:var(--blue); }
.m-stat-card .lbl  { font-size:11.5px; color:var(--ink-3); font-weight:500; text-transform:uppercase; letter-spacing:.06em; }
.m-stat-card .val  { font-family:'Fraunces',serif; font-size:26px; font-weight:600; color:var(--navy-900); line-height:1; }
.m-stat-card .foot { font-size:12px; color:var(--ink-3); }
.m-stat-card .foot strong { color:var(--green); }

/* ── CARD ────────────────────────────────────────────────────── */
.m-card { background:var(--white); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.m-card-hd { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--line); gap:10px; flex-wrap:wrap; }
.m-card-hd h3 { font-size:14.5px; font-weight:600; color:var(--navy-900); }
.m-card-sub   { font-size:12px; color:var(--ink-3); margin-top:2px; }

/* ── DASHBOARD 2-col grid (class-based so media queries work) ── */
.m-dash-2col { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
.m-dash-col  { display:flex; flex-direction:column; gap:16px; }

/* ── TABLE ───────────────────────────────────────────────────── */
.m-table-wrap { background:var(--white); border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-bottom:20px; }
.m-table-bar  { display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.m-filters    { display:flex; gap:6px; flex-wrap:wrap; }
.m-chip {
  padding:5px 12px; border-radius:99px; font-size:12.5px; font-weight:500;
  border:1.5px solid var(--line); color:var(--ink-2); background:var(--white);
  cursor:pointer; text-decoration:none; transition:all .12s;
  display:inline-flex; align-items:center; gap:5px;
}
.m-chip:hover { border-color:var(--gold-500); text-decoration:none; }
.m-chip.on { background:var(--navy-900); color:#fff; border-color:var(--navy-900); }
.m-chip .cnt { font-size:11px; opacity:.7; }
.m-search { display:flex; align-items:center; gap:8px; padding:8px 12px; border:1.5px solid var(--line); border-radius:9px; background:var(--cream); margin-left:auto; }
.m-search svg { color:var(--ink-3); flex:0 0 auto; }
.m-search input { border:none; background:none; outline:none; font-size:13px; color:var(--ink); width:160px; }

table.m-data { width:100%; border-collapse:collapse; }
table.m-data thead th { padding:10px 14px; font-size:11.5px; font-weight:600; color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em; text-align:left; background:var(--cream); border-bottom:1px solid var(--line); }
table.m-data thead th.r { text-align:right; }
table.m-data thead th.c { text-align:center; }
table.m-data tbody td { padding:11px 14px; font-size:13.5px; color:var(--ink-2); border-bottom:1px solid var(--line); vertical-align:middle; }
table.m-data tbody tr:last-child td { border-bottom:none; }
table.m-data tbody tr { transition:background .1s; }
table.m-data tbody tr:hover { background:var(--cream); }
table.m-data td.r { text-align:right; }
table.m-data td.c { text-align:center; }

.m-who { display:flex; align-items:center; gap:10px; }
.m-who .ava { width:32px; height:32px; border-radius:8px; background:linear-gradient(135deg,var(--navy-700),var(--gold-600)); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-weight:700; font-size:11px; flex:0 0 32px; }
.m-who .nm  { font-weight:600; font-size:13.5px; color:var(--navy-900); }
.m-who .sub { font-size:12px; color:var(--ink-3); }
.m-id { font-family:monospace; font-size:11.5px; color:var(--ink-3); background:var(--cream); padding:2px 7px; border-radius:5px; }

.m-acts { display:flex; align-items:center; gap:4px; justify-content:flex-end; }
.m-acts a, .m-acts button { width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:7px; border:1.5px solid var(--line); background:var(--white); color:var(--ink-2); cursor:pointer; transition:all .12s; text-decoration:none; }
.m-acts a:hover, .m-acts button:hover { border-color:var(--gold-500); color:var(--navy-900); transform:scale(1.1); }
.m-acts .danger:hover  { border-color:var(--red);   color:var(--red); }
.m-acts .success:hover { border-color:var(--green); color:var(--green); }

.m-table-foot { display:flex; align-items:center; justify-content:space-between; padding:11px 16px; border-top:1px solid var(--line); font-size:13px; color:var(--ink-3); flex-wrap:wrap; gap:8px; }
.m-pager { display:flex; gap:4px; }
.m-pager a { width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:7px; border:1.5px solid var(--line); font-size:13px; color:var(--ink-2); text-decoration:none; transition:all .12s; }
.m-pager a:hover { border-color:var(--gold-500); text-decoration:none; }
.m-pager a.on { background:var(--navy-900); color:#fff; border-color:var(--navy-900); }

/* ── TAGS ────────────────────────────────────────────────────── */
.m-tag { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:99px; font-size:12px; font-weight:500; white-space:nowrap; }
.m-tag.green  { background:var(--green-bg);  color:var(--green); }
.m-tag.amber  { background:var(--amber-bg);  color:var(--amber); }
.m-tag.red    { background:var(--red-bg);    color:var(--red); }
.m-tag.navy   { background:rgba(11,22,56,.08); color:var(--navy-900); }
.m-tag.blue   { background:var(--blue-bg);   color:var(--blue); }
.m-tag.gold   { background:rgba(224,181,74,.12); color:var(--gold-600); }
.m-tag.grey   { background:#f0f1f5; color:#6b7280; }
.m-tag.dot::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }

/* ── BUTTONS ─────────────────────────────────────────────────── */
.m-btn { display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:10px; font-size:13.5px; font-weight:600; cursor:pointer; border:none; transition:background .14s,transform .1s; text-decoration:none; white-space:nowrap; }
.m-btn:active { transform:scale(.97); text-decoration:none; }
.m-btn.primary { background:var(--navy-900); color:#fff; }
.m-btn.primary:hover { background:var(--navy-700); text-decoration:none; color:#fff; }
.m-btn.gold    { background:var(--gold-500); color:var(--navy-900); }
.m-btn.gold:hover { background:var(--gold-600); text-decoration:none; }
.m-btn.ghost   { background:var(--white); color:var(--ink-2); border:1.5px solid var(--line); }
.m-btn.ghost:hover { border-color:var(--gold-500); color:var(--navy-900); text-decoration:none; }
.m-btn.danger  { background:var(--red); color:#fff; }
.m-btn.danger:hover { background:#dc2626; text-decoration:none; }
.m-btn.sm { padding:6px 12px; font-size:12.5px; border-radius:8px; }

/* ── FORM ────────────────────────────────────────────────────── */
.m-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.m-form-grid .full { grid-column:1/-1; }
label.m-lbl { font-size:12.5px; font-weight:600; color:var(--ink-2); display:block; margin-bottom:5px; }
.m-input, .m-select, .m-textarea { width:100%; padding:9px 13px; border:1.5px solid var(--line); border-radius:10px; font-size:13.5px; color:var(--ink); background:var(--white); outline:none; transition:border-color .15s,box-shadow .15s; }
.m-input:focus,.m-select:focus,.m-textarea:focus { border-color:var(--gold-500); box-shadow:0 0 0 3px rgba(224,181,74,.12); }
.m-textarea { resize:vertical; min-height:80px; }
.m-hint-txt { font-size:12px; color:var(--ink-3); margin-top:4px; }

/* Toggle */
.m-switch { display:inline-flex; align-items:center; cursor:pointer; gap:8px; }
.m-switch input { display:none; }
.m-slider { width:38px; height:22px; background:var(--line); border-radius:99px; position:relative; transition:background .2s; flex:0 0 38px; }
.m-slider::after { content:''; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform .2s; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.m-switch input:checked + .m-slider { background:var(--navy-900); }
.m-switch input:checked + .m-slider::after { transform:translateX(16px); }

/* ── MODAL ───────────────────────────────────────────────────── */
#m-modal-portal { position:fixed; inset:0; z-index:9000; pointer-events:none; }
#m-modal-portal:has(.m-modal.open) { pointer-events:auto; }
.m-modal { position:absolute; inset:0; display:none; align-items:center; justify-content:center; padding:16px; background:rgba(11,22,56,0); transition:background .22s ease; }
.m-modal.open  { display:flex; }
.m-modal.ready { background:rgba(11,22,56,.55); }
.m-modal.closing             { background:rgba(11,22,56,0) !important; }
.m-modal.closing .m-modal-box { opacity:0 !important; transform:translateY(12px) scale(.97) !important; }
.m-modal-box { position:relative; background:var(--white); border-radius:18px; box-shadow:0 32px 80px rgba(11,22,56,.22); display:flex; flex-direction:column; overflow:hidden; min-height:0; max-height:calc(100vh - 32px); opacity:0; transform:translateY(20px) scale(.97); transition:opacity .22s ease,transform .22s cubic-bezier(.34,1.22,.64,1); }
.m-modal.ready .m-modal-box { opacity:1; transform:none; }
.m-modal-head { display:flex; align-items:center; justify-content:space-between; padding:16px 22px; border-bottom:1px solid var(--line); flex:0 0 auto; }
.m-modal-head h3 { font-size:16px; font-weight:600; color:var(--navy-900); margin:0; }
.m-modal-close { background:none; border:none; cursor:pointer; color:var(--ink-3); padding:6px 9px; border-radius:8px; font-size:18px; line-height:1; transition:background .12s,color .12s; }
.m-modal-close:hover { background:var(--cream); color:var(--navy-900); }
.m-modal-body { overflow-y:auto; flex:1 1 0; min-height:500px; padding:18px 22px; }
.m-modal-foot { display:flex; gap:8px; justify-content:flex-end; padding:14px 22px; border-top:1px solid var(--line); flex:0 0 auto; }
.m-modal .m-modal-box > form { display:flex; flex-direction:column; flex:1 1 0; min-height:0; overflow:hidden; }

/* ── TOAST ───────────────────────────────────────────────────── */
#m-toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--navy-900); color:#fff; padding:11px 20px; border-radius:999px; font-size:13.5px; font-weight:500; box-shadow:0 8px 24px rgba(11,22,56,.25); z-index:9100; opacity:0; pointer-events:none; transition:opacity .22s,transform .22s cubic-bezier(.34,1.22,.64,1); white-space:nowrap; }
#m-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
#m-toast.success::before { content:'✓  '; color:var(--gold-500); }
#m-toast.error::before   { content:'✕  '; color:#f87171; }

/* ── FLASH ───────────────────────────────────────────────────── */
.m-flash { display:flex; align-items:center; gap:8px; padding:12px 16px; border-radius:10px; font-size:13.5px; margin-bottom:18px; }
.m-flash.success { background:var(--green-bg); border:1px solid rgba(26,138,91,.25); color:#166534; }
.m-flash.error   { background:var(--red-bg);   border:1px solid #fca5a5; color:#b91c1c; }

/* ── TIMELINE ────────────────────────────────────────────────── */
.m-timeline { display:flex; flex-direction:column; }
.m-tl-item  { display:flex; gap:12px; padding:11px 0; position:relative; }
.m-tl-item+.m-tl-item::before { content:''; position:absolute; top:0; left:13px; width:2px; height:11px; background:var(--line); }
.m-tl-dot   { width:27px; height:27px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:0 0 27px; font-size:12px; }
.m-tl-dot.green { background:var(--green-bg); color:var(--green); }
.m-tl-dot.amber { background:var(--amber-bg); color:var(--amber); }
.m-tl-dot.navy  { background:rgba(11,22,56,.06); color:var(--navy-900); }
.m-tl-dot.red   { background:var(--red-bg); color:var(--red); }
.m-tl-body  { flex:1; min-width:0; }
.m-tl-title { font-size:13.5px; font-weight:500; color:var(--navy-900); }
.m-tl-meta  { font-size:12px; color:var(--ink-3); margin-top:2px; }

/* ── PROPERTY CARDS ──────────────────────────────────────────── */
.m-prop-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.m-prop-card { background:var(--white); border:1px solid var(--line); border-radius:14px; overflow:hidden; transition:box-shadow .15s,transform .15s; }
.m-prop-card:hover { box-shadow:0 6px 24px rgba(11,22,56,.1); transform:translateY(-2px); }
.m-prop-thumb { height:150px; background:var(--cream) center/cover no-repeat; position:relative; }
.m-prop-badges { position:absolute; top:10px; left:10px; display:flex; gap:6px; flex-wrap:wrap; }
.m-prop-body  { padding:13px 15px; }
.m-prop-price { font-family:'Fraunces',serif; font-size:17px; font-weight:600; color:var(--navy-900); }
.m-prop-title { font-size:13px; font-weight:500; color:var(--navy-900); margin:4px 0; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m-prop-loc   { font-size:12.5px; color:var(--ink-3); margin-bottom:10px; }
.m-prop-acts  { display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; }

/* ── EMPTY STATE ─────────────────────────────────────────────── */
.m-empty { text-align:center; padding:40px 20px; color:var(--ink-3); }
.m-empty svg { margin-bottom:12px; opacity:.35; }
.m-empty h4 { font-size:15px; font-weight:600; color:var(--ink-2); margin-bottom:6px; }
.m-empty p  { font-size:13.5px; line-height:1.6; max-width:300px; margin:0 auto 16px; }

/* ── PROFILE DROPDOWN ────────────────────────────────────────── */
.m-profile-wrap { position:relative; }
.m-prof-drop { display:none; position:absolute; top:calc(100% + 8px); right:0; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 8px 24px rgba(11,22,56,.1); min-width:190px; z-index:200; padding:6px 0; }
.m-prof-drop a { display:flex; align-items:center; gap:10px; padding:10px 14px; font-size:13.5px; color:var(--ink-2); text-decoration:none; transition:background .1s; }
.m-prof-drop a:hover { background:var(--cream); text-decoration:none; }
.m-prof-drop .danger-link { color:var(--red); }
.m-prof-drop .divider { border-top:1px solid var(--line); margin:4px 0; }

/* ═══════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
═══════════════════════════════════════════════════ */

/* Tablet: 2-col stats, 2-col props, dashboard cols stack */
@media (max-width: 1100px) {
  .m-stats-row    { grid-template-columns: repeat(2, 1fr); }
  .m-prop-grid    { grid-template-columns: repeat(2, 1fr); }
}

/* Tablet narrow: dashboard 2-col becomes 1-col */
@media (max-width: 900px) {
  .m-dash-2col    { grid-template-columns: 1fr; }
}

/* Mobile: sidebar flies in, full-width layout */
@media (max-width: 768px) {
  /* AUTH */
  .m-auth { grid-template-columns: 1fr; }
  .m-auth-art { display: none; }
  .m-auth-form-wrap { padding: 28px 20px; align-items: flex-start; min-height: 100vh; }
  .m-row-2 { grid-template-columns: 1fr; }

  /* APP */
  .m-app { grid-template-columns: 1fr; }

  /* Sidebar off-canvas */
  .m-sidebar {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    z-index: 200;
    width: var(--sidebar-w);
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: none;
  }
  .m-sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0,0,0,.3);
  }

  /* Backdrop */
  .m-backdrop {
    display: block;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 199;
    opacity: 0;
    transition: opacity .25s;
    pointer-events: none;
  }
  .m-backdrop.on { opacity: 1; pointer-events: auto; }

  /* Topbar */
  .m-menu-btn { display: flex; }
  .m-topbar   { padding: 0 16px; }
  .m-topbar-title { font-size: 16px; }

  /* Content */
  .m-content { padding: 14px; }

  /* Stats: 2 across on mobile */
  .m-stats-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .m-stat-card { padding: 13px 14px; }
  .m-stat-card .val { font-size: 22px; }

  /* Props: 1 col */
  .m-prop-grid { grid-template-columns: 1fr; }

  /* Form grid 1 col */
  .m-form-grid { grid-template-columns: 1fr; }

  /* Table scrollable */
  .m-table-wrap { overflow-x: auto; }
  table.m-data  { min-width: 540px; }

  /* Page header stack */
  .m-page-hd { flex-direction: column; align-items: flex-start; }

  /* Card hd wrap */
  .m-card-hd { flex-direction: column; align-items: flex-start; }

  /* Search full width */
  .m-search { margin-left: 0; width: 100%; }
  .m-search input { width: 100%; }

  /* Modal full width on mobile */
  .m-modal { padding: 12px; }
  .m-modal-box { max-height: calc(100vh - 24px); }
}

/* Very small phones */
@media (max-width: 380px) {
  .m-stats-row { grid-template-columns: 1fr; }
  .m-hd-actions .m-btn { font-size: 12px; padding: 7px 12px; }
  .m-topbar-title { font-size: 14px; }
}