:root{
  --bg: oklch(0.985 0.004 80);
  --surface: oklch(0.99 0.003 80);
  --white: #ffffff;
  --text: oklch(0.22 0.01 60);
  --text-soft: oklch(0.5 0.01 60);
  --text-softer: oklch(0.55 0.01 60);
  --text-faint: oklch(0.4 0.01 60);
  --text-30: oklch(0.3 0.01 60);
  --border: oklch(0.9 0.006 70);
  --border-light: oklch(0.93 0.005 70);
  --chip-bg: oklch(0.94 0.006 70);
  --chip-bg-2: oklch(0.96 0.005 75);
  --accent: oklch(0.62 0.13 40);
  --accent-hover: oklch(0.55 0.13 40);
  --accent-soft-bg: oklch(0.95 0.03 40);
  --accent-soft-text: oklch(0.45 0.11 40);
  --ph-a: oklch(0.94 0.006 70);
  --ph-b: oklch(0.965 0.005 75);
  --overlay: oklch(0.2 0.01 60 / 0.35);
  --shadow-soft: 0 8px 24px oklch(0.3 0.02 60 / 0.1);
  --shadow-lg: 0 24px 60px oklch(0.2 0.02 60 / 0.25);
  --shadow-drawer: -12px 0 32px oklch(0.2 0.02 60 / 0.15);
  --error: oklch(0.5 0.15 30);
  --toast-bg: oklch(0.22 0.01 60);
  --green-bg: oklch(0.94 0.05 150); --green-text: oklch(0.4 0.1 150);
  --blue-bg: oklch(0.94 0.03 250); --blue-text: oklch(0.45 0.1 250);
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } .skeleton{ animation:none; } }
body{
  background: var(--bg); color: var(--text); font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased; min-height:100vh;
}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px;
}
.serif{ font-family:'Fraunces',serif; }
.mono{ font-family:'IBM Plex Mono',monospace; }
input[type="range"]{ accent-color: var(--accent); }
::placeholder{ color: var(--text-softer); }
button{ font-family:inherit; cursor:pointer; }
input, select, textarea{ font-family:inherit; }
.hidden{ display:none !important; }

/* ---------- pills / buttons ---------- */
.pill-accent{
  border:none; background:var(--accent); color:#fff; font-weight:600; font-size:14px;
  padding:0 22px; height:44px; border-radius:22px; cursor:pointer; white-space:nowrap;
  transition: background .15s ease;
}
.pill-accent:hover{ background: var(--accent-hover); }
.pill-accent:disabled{ opacity:0.6; cursor:default; }
.pill-accent.sm{ height:38px; padding:0 18px; font-size:13px; border-radius:19px; }
.pill-outline{
  border:1px solid var(--border); background:#fff; color: var(--text-30); font-weight:600; font-size:13px;
  padding:0 16px; height:36px; border-radius:18px; cursor:pointer; white-space:nowrap;
}
.pill-outline:hover{ background: var(--chip-bg-2); }
.pill-outline.accent-line{ border-color:var(--accent); color:var(--accent); }
.pill-outline.accent-line:hover{ background: var(--accent-soft-bg); }
.pill-outline.sm{ height:32px; padding:0 14px; font-size:12px; border-radius:16px; }
.pill-outline.danger{ border-color: var(--error); color:var(--error); }
.pill-outline.danger:hover{ background: oklch(0.94 0.05 30); }
.link-btn{ border:none; background:none; color:var(--accent); font-weight:600; font-size:13px; cursor:pointer; padding:0; }
.icon-btn{
  border:none; background:var(--chip-bg); width:34px; height:34px; border-radius:50%; cursor:pointer;
  font-size:16px; color:var(--text-faint); display:flex; align-items:center; justify-content:center;
}
.icon-btn.sm{ width:26px; height:26px; font-size:13px; }

/* ---------- top bar ---------- */
.topbar{ position:sticky; top:0; z-index:20; background:var(--surface); border-bottom:1px solid var(--border); }
.topbar-inner{ max-width:1400px; margin:0 auto; padding:0 32px; display:flex; align-items:center; justify-content:space-between; height:72px; gap:24px; }
.brand{ display:flex; align-items:center; gap:10px; cursor:pointer; }
.brand-mark{ width:32px; height:32px; border-radius:8px; background:var(--accent); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:600; font-size:17px; }
.brand-name{ font-weight:600; font-size:22px; letter-spacing:-0.01em; }
.topbar-right{ display:flex; align-items:center; gap:16px; }
.raw-select{
  height:38px; border-radius:19px; border:1px solid var(--border); padding:0 16px; font-size:13px;
  background:#fff; color: var(--text-faint);
}
.user-badge{ font-size:13px; color:var(--text-soft); display:flex; align-items:center; gap:8px; }
.user-badge .role-tag{ background:var(--chip-bg); color:var(--text-faint); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; padding:3px 9px; border-radius:10px; }
.segmented{ display:flex; background:var(--chip-bg); border-radius:20px; padding:3px; gap:2px; }
.segmented button{
  border:none; height:34px; padding:0 18px; border-radius:17px; font-size:13px; font-weight:600;
  background:transparent; color: var(--text-soft);
}
.segmented button.active{ background:#fff; color:var(--text); box-shadow: 0 1px 3px oklch(0.3 0.02 60 / 0.12); }
.subnav{ max-width:1400px; margin:0 auto; padding:0 32px; display:flex; gap:28px; }
.subnav button{
  border:none; background:none; cursor:pointer; padding:14px 2px; font-size:14px; font-weight:600;
  border-bottom:2px solid transparent; color:var(--text-soft);
}
.subnav button.active{ border-bottom-color:var(--accent); color:var(--text); }

/* ---------- containers ---------- */
.page{ max-width:1400px; margin:0 auto; padding:36px 32px 80px; }
.page-narrow{ max-width:900px; margin:0 auto; padding:36px 32px 80px; }
.page-detail{ max-width:1100px; margin:0 auto; padding:28px 32px 80px; }
.page-catalogue{ max-width:1300px; margin:0 auto; padding:44px 32px 80px; }
.page-form{ max-width:760px; margin:0 auto; padding:28px 32px 140px; }
.page-center{ max-width:420px; margin:0 auto; padding:80px 32px; }
.panel-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:28px; flex-wrap:wrap; }
.panel-title{ font-weight:600; font-size:32px; letter-spacing:-0.01em; }
.panel-sub{ color:var(--text-soft); font-size:15px; margin-top:6px; max-width:520px; }

/* ---------- filter card ---------- */
.filter-card{ background:#fff; border:1px solid var(--border); border-radius:16px; padding:18px 20px; margin-bottom:20px; }
.filter-card.sm{ padding:16px 18px; margin-bottom:18px; }
.filter-row1{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.filter-row2{ display:flex; gap:24px; align-items:center; margin-top:16px; flex-wrap:wrap; }
.filter-row2.sm{ gap:20px; margin-top:14px; }
.search-input{
  flex:1; min-width:220px; height:40px; border-radius:20px; border:1px solid var(--border);
  padding:0 18px; font-size:14px; background: var(--surface); color:var(--text);
}
.filter-select{ height:40px; border-radius:20px; border:1px solid var(--border); padding:0 16px; font-size:13px; background:#fff; color:var(--text-faint); }
.filter-select.sm{ height:38px; border-radius:19px; padding:0 14px; font-size:12px; }
.bhk-label{ font-size:12px; color:var(--text-soft); margin-right:4px; }
.chip{ border:1px solid var(--border); background:#fff; color:var(--text-faint); border-radius:16px; height:32px; padding:0 14px; font-size:13px; font-weight:600; }
.chip.sm{ height:28px; padding:0 12px; font-size:12px; border-radius:14px; }
.chip.active{ border-color:var(--accent); background:var(--accent); color:#fff; }
.price-row{ display:flex; align-items:center; gap:10px; flex:1; min-width:220px; }
.price-row span{ font-size:12px; color:var(--text-soft); white-space:nowrap; }
.count-line{ font-size:13px; color:var(--text-soft); margin-bottom:16px; }
.selected-only-label{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-faint); cursor:pointer; white-space:nowrap; }

/* ---------- project cards ---------- */
.card-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:24px; }
.card-grid.assign{ grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }
.proj-card{ background:#fff; border:1px solid var(--border); border-radius:16px; overflow:hidden; transition: box-shadow .15s ease; }
.proj-card:hover{ box-shadow: var(--shadow-soft); }
.media-ph{
  background: repeating-linear-gradient(135deg, var(--ph-a), var(--ph-a) 12px, var(--ph-b) 12px, var(--ph-b) 24px);
  background-color: var(--chip-bg);
  background-size: contain; background-position:center; background-repeat:no-repeat;
  display:flex; align-items:center; justify-content:center; position:relative;
}
.media-ph span{ font-size:11px; color:var(--text-softer); }
.card-body{ padding:18px 18px 20px; }
.card-body.sm{ padding:12px 14px 14px; }
.eyebrow{ font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-softer); font-weight:600; }
.card-title{ font-weight:600; font-size:19px; margin-top:4px; }
.card-title.sm{ font-size:15px; margin-top:2px; }
.card-locality{ font-size:13px; color:var(--text-soft); margin-top:4px; }
.card-locality.sm{ font-size:12px; margin-top:2px; }
.card-meta-row{ display:flex; justify-content:space-between; align-items:center; margin-top:14px; }
.card-meta-row.sm{ margin-top:10px; }
.card-bhk{ font-size:13px; color:var(--text-faint); }
.card-bhk.sm{ font-size:11px; }
.card-price{ font-size:14px; font-weight:600; }
.card-price.sm{ font-size:12px; }
.status-badge{ display:inline-block; padding:4px 12px; border-radius:20px; font-size:12px; font-weight:600; }
.priority-badge{ display:inline-block; padding:4px 12px; border-radius:20px; font-size:11.5px; font-weight:700; letter-spacing:0.01em; }
.priority-badge.p1{ background:var(--accent); color:#fff; }
.priority-badge.p2{ background:var(--text-faint); color:#fff; }
.priority-badge.p3{ background:transparent; color:var(--text-soft); border:1px solid var(--border); }
.updated-badge{ position:absolute; top:12px; right:12px; background:var(--accent); color:#fff; font-size:11px; font-weight:600; padding:4px 10px; border-radius:12px; }
.assign-check{ position:absolute; top:8px; left:8px; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#fff; }
.card-actions{ display:flex; justify-content:space-between; align-items:center; margin-top:14px; }

/* ---------- customer rows ---------- */
.list-card{ background:#fff; border:1px solid var(--border); border-radius:16px; overflow:hidden; }
.cust-row{ display:flex; align-items:center; gap:16px; padding:18px 22px; border-bottom:1px solid var(--border-light); flex-wrap:wrap; }
.cust-row:last-child{ border-bottom:none; }
.cust-actions{ display:flex; gap:10px; flex-shrink:0; }
.cust-avatar{ width:44px; height:44px; border-radius:50%; background:var(--accent-soft-bg); color:var(--accent-soft-text); display:flex; align-items:center; justify-content:center; font-weight:600; font-size:16px; flex-shrink:0; }
.cust-name{ font-weight:600; font-size:15px; }
.cust-phone{ font-size:12px; color:var(--text-soft); margin-top:2px; }

/* ---------- drawer (assign panel) ---------- */
.drawer-overlay{ position:fixed; inset:0; background:var(--overlay); z-index:40; display:flex; justify-content:flex-end; }
.drawer{ width:min(760px,100%); height:100%; background:var(--bg); display:flex; flex-direction:column; box-shadow:var(--shadow-drawer); }
.drawer-header{ padding:24px 28px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:flex-start; background:#fff; }
.drawer-title{ font-weight:600; font-size:24px; }
.drawer-sub{ font-size:12px; color:var(--text-soft); margin-top:4px; }
.drawer-body{ padding:18px 28px; overflow-y:auto; flex:1; }
.drawer-footer{ padding:18px 28px; border-top:1px solid var(--border); background:#fff; display:flex; gap:14px; align-items:center; }
.share-box{ flex:1; background:var(--chip-bg-2); border-radius:10px; padding:10px 14px; font-size:13px; color:var(--text-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---------- centered modal ---------- */
.modal-overlay{ position:fixed; inset:0; background:var(--overlay); z-index:50; display:flex; align-items:center; justify-content:center; padding:20px; }
.modal-card{ width:min(560px,92vw); max-height:88vh; overflow-y:auto; background:#fff; border-radius:16px; box-shadow:var(--shadow-lg); }
.modal-header{ padding:24px 28px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:flex-start; }
.modal-title{ font-weight:600; font-size:22px; }
.modal-sub{ color:var(--text-soft); font-size:13px; margin-top:4px; }
.modal-body{ padding:22px 28px; display:flex; flex-direction:column; gap:16px; }
.modal-footer{ padding:18px 28px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:12px; }

/* ---------- form page ---------- */
.form-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-field{ display:flex; flex-direction:column; gap:6px; font-size:12px; color:var(--text-soft); }
.form-field input, .form-field select, .form-field textarea{
  height:40px; border-radius:10px; border:1px solid var(--border); padding:0 14px; font-size:14px; color:var(--text); background:#fff;
}
.form-field textarea{ height:auto; padding:10px 14px; resize:vertical; }
.form-field input.mono{ font-family:'IBM Plex Mono',monospace; }
.section-card{ background:#fff; border:1px solid var(--border); border-radius:16px; padding:22px 24px; margin-bottom:20px; scroll-margin-top:132px; }
.form-jumpnav{ position:sticky; top:72px; z-index:15; background:var(--bg); display:flex; gap:4px; overflow-x:auto; padding:10px 0 14px; margin-bottom:8px; border-bottom:1px solid var(--border); }
.form-jumpnav a{ flex-shrink:0; font-size:12.5px; font-weight:600; color:var(--text-soft); text-decoration:none; padding:6px 12px; border-radius:14px; white-space:nowrap; }
.form-jumpnav a:hover{ background:var(--chip-bg-2); color:var(--text); }
.section-heading{ font-weight:600; font-size:18px; margin-bottom:4px; }
.section-caption{ font-size:12.5px; color:var(--text-soft); margin-bottom:18px; }
.form-stack{ display:flex; flex-direction:column; gap:14px; }
.unit-row{ display:grid; grid-template-columns:70px 1fr 1fr; gap:10px; align-items:center; }
.unit-row span{ font-size:13px; font-weight:600; }
.unit-row input{ height:36px; border-radius:9px; border:1px solid var(--border); padding:0 12px; font-family:'IBM Plex Mono',monospace; font-size:13px; }
.unit-row-edit{ display:grid; grid-template-columns:100px 1fr 1fr 34px; gap:10px; align-items:center; }
.unit-row-edit select{ height:36px; border-radius:9px; border:1px solid var(--border); padding:0 10px; font-size:13px; background:#fff; color:var(--text); }
.unit-row-edit input{ height:36px; border-radius:9px; border:1px solid var(--border); padding:0 12px; font-family:'IBM Plex Mono',monospace; font-size:13px; }
.form-error{ font-size:13px; color:var(--error); }
.back-link{ border:none; background:none; color:var(--text-soft); font-size:14px; cursor:pointer; padding:0; margin-bottom:20px; display:inline-block; }

.cover-upload{
  height:280px; border-radius:16px; border:1.5px dashed var(--border); background:var(--surface);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; position:relative; overflow:hidden;
  background-size:contain; background-position:center; background-repeat:no-repeat; margin-bottom:14px;
}
.cover-upload .cover-hint{ font-size:13px; color:var(--text-soft); text-align:center; padding:0 20px; }
.cover-upload .cover-hint b{ color:var(--text); }
.doc-row-edit{ display:grid; grid-template-columns:1fr 1fr 34px 34px; gap:10px; align-items:center; }
.doc-row-edit.video{ grid-template-columns:1fr 1fr 90px 34px 34px; }
.doc-row-edit input{ height:38px; border-radius:9px; border:1px solid var(--border); padding:0 12px; font-size:13px; }
.doc-row-edit input.mono{ font-family:'IBM Plex Mono',monospace; }
.img-row-edit{ display:grid; grid-template-columns:56px 1fr 34px 1fr 34px; gap:10px; align-items:center; }
.img-row-edit input{ height:38px; border-radius:9px; border:1px solid var(--border); padding:0 12px; font-size:13px; }
.img-thumb{ width:56px; height:38px; border-radius:6px; background:var(--chip-bg); background-size:cover; background-position:center; flex-shrink:0; }
.row-remove{ border:none; background:var(--chip-bg); width:34px; height:34px; border-radius:8px; color:var(--text-faint); font-size:15px; cursor:pointer; }
.row-remove:hover{ background: oklch(0.94 0.05 30); color:var(--error); }
.row-upload{ border:1px solid var(--border); background:#fff; width:34px; height:34px; border-radius:8px; color:var(--text-faint); font-size:14px; cursor:pointer; }
.row-upload:hover{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft-bg); }
.row-upload:disabled{ opacity:0.5; cursor:default; }
.add-row-btn{ border:1px dashed var(--border); background:none; color:var(--text-soft); font-size:13px; font-weight:600; padding:9px 16px; border-radius:10px; cursor:pointer; align-self:flex-start; }
.add-row-btn:hover{ border-color:var(--accent); color:var(--accent); }
.form-footer-bar{
  position:sticky; bottom:0; background:#fff; border-top:1px solid var(--border); padding:16px 32px;
  display:flex; justify-content:flex-end; gap:12px; margin:0 -32px; max-width:none;
}

/* ---------- customer catalogue ---------- */
.greeting{ font-weight:600; font-size:36px; letter-spacing:-0.01em; }
.greeting-sub{ color:var(--text-soft); font-size:15px; margin-top:10px; margin-bottom:36px; }
.empty-state{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:80px 20px; }
.empty-circle{ width:64px; height:64px; border-radius:50%; border:2px dashed oklch(0.8 0.008 70); margin-bottom:20px; }
.empty-title{ font-weight:600; font-size:20px; }
.empty-sub{ color:var(--text-soft); font-size:14px; margin-top:8px; max-width:340px; }

/* ---------- project detail (shared: customer + broker view) ---------- */
.cover-ph{ height:320px; border-radius:16px; display:flex; align-items:center; justify-content:center; margin-bottom:24px; }
.detail-toolbar{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:20px; }
.detail-head-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap; }
.detail-name{ font-weight:600; font-size:32px; }
.detail-meta{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; margin-top:8px; color:var(--text-soft); font-size:14px; }
.rera-pill{ font-size:12px; background:var(--chip-bg-2); padding:3px 10px; border-radius:6px; color:var(--text-faint); }
.tab-row{ display:flex; gap:6px; margin-top:28px; border-bottom:1px solid var(--border); overflow-x:auto; }
.tab-row button{ border:none; background:none; padding:12px 16px; font-size:14px; font-weight:600; white-space:nowrap; cursor:pointer; border-bottom:2px solid transparent; color:var(--text-soft); }
.tab-row button.active{ border-bottom-color:var(--accent); color:var(--accent); }
.tab-content{ padding-top:28px; }
.overview-desc{ font-size:15px; line-height:1.7; color:var(--text-30); max-width:720px; margin-bottom:28px; }
.spec-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:20px; margin-bottom:32px; }
.spec-label{ font-size:12px; color:var(--text-soft); }
.spec-value{ font-family:'IBM Plex Mono',monospace; font-size:15px; font-weight:600; margin-top:4px; }
.subheading{ font-weight:600; font-size:18px; margin-bottom:14px; }
.doc-list{ background:#fff; border:1px solid var(--border); border-radius:14px; overflow:hidden; }
.doc-row{ display:flex; align-items:center; gap:16px; padding:16px 20px; border-bottom:1px solid var(--border-light); }
.doc-row:last-child{ border-bottom:none; }
.doc-icon{ width:36px; height:36px; border-radius:8px; background:var(--accent-soft-bg); color:var(--accent-soft-text); display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:700; flex-shrink:0; }
.doc-name{ font-size:14px; font-weight:600; }
.doc-meta{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--text-soft); margin-top:2px; }
.unit-list{ background:#fff; border:1px solid var(--border); border-radius:14px; overflow:hidden; }
.unit-list-row{ display:flex; justify-content:space-between; padding:14px 20px; border-bottom:1px solid var(--border-light); font-size:14px; }
.unit-list-row:last-child{ border-bottom:none; }
.img-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:18px; }
.img-tile{ height:160px; border-radius:12px; display:flex; align-items:center; justify-content:center; }
.timeline{ max-width:640px; }
.timeline-row{ display:flex; gap:20px; padding-bottom:26px; }
.timeline-date{ width:96px; flex-shrink:0; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--text-soft); padding-top:2px; }
.timeline-dot-col{ width:9px; flex-shrink:0; display:flex; flex-direction:column; align-items:center; }
.timeline-dot{ width:9px; height:9px; border-radius:50%; background:var(--accent); flex-shrink:0; }
.timeline-line{ width:1px; flex:1; background:var(--border); margin-top:4px; }
.timeline-title{ font-weight:600; font-size:14px; }
.timeline-desc{ font-size:13px; color:var(--text-soft); margin-top:4px; }

/* ---------- initial-load skeleton ---------- */
@keyframes skeleton-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.5; } }
.skeleton-topbar{ height:72px; border-bottom:1px solid var(--border); background:var(--surface); }
.skeleton-page{ max-width:1400px; margin:0 auto; padding:36px 32px; }
.skeleton{ animation:skeleton-pulse 1.3s ease-in-out infinite; background:var(--chip-bg); border-radius:8px; }
.skeleton-title{ width:220px; height:32px; border-radius:8px; margin-bottom:28px; }
.skeleton-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:24px; }
.skeleton-card{ height:260px; border-radius:16px; }

/* ---------- toast ---------- */
.toast{ position:fixed; bottom:28px; left:50%; transform:translateX(-50%); background:var(--toast-bg); color:#fff; padding:12px 22px; border-radius:24px; font-size:13px; font-weight:500; z-index:60; box-shadow:0 8px 24px oklch(0.2 0.02 60 / 0.25); }
.toast.toast-success{ background: oklch(0.4 0.1 150); }
.toast.toast-error{ background: var(--error); }

/* ---------- map ---------- */
.map-container{ height:560px; border-radius:16px; overflow:hidden; border:1px solid var(--border); background:#fff; }
.loc-search-wrap{ position:relative; margin-bottom:10px; }
.loc-results{ position:absolute; top:calc(100% + 4px); left:0; right:0; background:#fff; border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow-soft); z-index:1000; max-height:220px; overflow-y:auto; }
.loc-results div{ padding:10px 14px; font-size:13px; cursor:pointer; border-bottom:1px solid var(--border-light); }
.loc-results div:last-child{ border-bottom:none; }
.loc-results div:hover{ background:var(--chip-bg-2); }
.map-pin{ background:var(--accent); color:#fff; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; font-family:'Inter',sans-serif; border:2px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,0.35); }
.map-empty{ height:400px; display:flex; align-items:center; justify-content:center; }
.map-view-row{ display:flex; gap:16px; align-items:flex-start; }
.map-view-row .map-container{ flex:1; min-width:0; }
.map-legend{ width:240px; flex-shrink:0; background:#fff; border:1px solid var(--border); border-radius:16px; padding:8px; max-height:560px; overflow-y:auto; }
.map-legend-row{ display:flex; align-items:center; gap:10px; padding:10px 10px; border-radius:10px; cursor:pointer; }
.map-legend-row:hover{ background:var(--chip-bg-2); }
.map-legend-badge{ background:var(--accent); color:#fff; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:11px; flex-shrink:0; }
.map-legend-name{ font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width: 760px){
  .map-view-row{ flex-direction:column; }
  .map-legend{ width:100%; max-height:none; }
}
.maps-link{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--accent); font-weight:600; text-decoration:none; margin-top:4px; }
.amber-badge{ background: oklch(0.94 0.05 80); color: oklch(0.45 0.1 80); }

/* ---------- customer profile / stage ---------- */
.stage-row{ display:flex; align-items:center; gap:10px; }
.cust-row.clickable{ cursor:pointer; }
.cust-row.clickable:hover{ background:var(--chip-bg-2); }
.drawer-search{ width:100%; height:40px; border-radius:20px; border:1px solid var(--border); padding:0 18px; font-size:14px; background:var(--surface); color:var(--text); margin-bottom:14px; }

/* ---------- compare table ---------- */
.compare-table{ border-collapse:collapse; min-width:640px; background:#fff; }
.compare-table th, .compare-table td{ border:1px solid var(--border); padding:12px 16px; font-size:13px; text-align:left; vertical-align:top; line-height:1.5; }
.compare-table thead th{ background:var(--chip-bg-2); font-family:'Fraunces',serif; font-weight:600; font-size:15px; color:var(--text); white-space:nowrap; }
.compare-table thead th:first-child{ background:var(--surface); }
.compare-table tbody th{ background:var(--surface); font-weight:600; color:var(--text-soft); white-space:nowrap; font-size:11.5px; text-transform:uppercase; letter-spacing:0.04em; }
.compare-table tbody td{ font-family:'IBM Plex Mono',monospace; color:var(--text-30); }
.compare-table tr.compare-row-block th, .compare-table tr.compare-row-block td{ background:var(--surface); padding-top:16px; padding-bottom:16px; }

/* ---------- login ---------- */
.login-card{ background:#fff; border:1px solid var(--border); border-radius:16px; padding:36px 32px; box-shadow:var(--shadow-soft); }
.login-title{ font-weight:600; font-size:26px; margin-bottom:6px; }
.login-sub{ color:var(--text-soft); font-size:14px; margin-bottom:26px; }

@media (max-width: 760px){
  .topbar-inner{ padding:0 18px; height:auto; flex-wrap:wrap; padding-top:12px; padding-bottom:12px; gap:12px; }
  .subnav, .page, .page-narrow, .page-detail, .page-catalogue, .page-form{ padding-left:18px; padding-right:18px; }
  .form-grid2{ grid-template-columns:1fr; }
  .drawer{ width:100%; }
  .greeting{ font-size:26px; }
  .form-footer-bar{ margin:0 -18px; padding:14px 18px; }
  .doc-row-edit, .doc-row-edit.video, .img-row-edit, .unit-row-edit{ grid-template-columns:1fr; }
  .cust-actions{ width:100%; flex-wrap:wrap; margin-top:4px; }
  .form-jumpnav{ position:static; }
  .section-card{ scroll-margin-top:16px; }
}