:root {
  --bg: #f4f2ed;
  --panel: #fffdf9;
  --panel-strong: #ffffff;
  --ink: #1f2925;
  --muted: #66706b;
  --line: #dcd9d1;
  --accent: #244c3d;
  --accent-2: #d9e5dc;
  --accent-3: #8b542f;
  --danger: #a64238;
  --warning: #8b661f;
  --success: #2f6b4d;
  --shadow: 0 24px 70px rgba(23, 37, 31, 0.11);
  --radius: 18px;
  --radius-sm: 11px;
  --sidebar: 286px;
  --preview: 440px;
}

* { box-sizing: border-box; }
.sr-only { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 0% 0%, rgba(181,122,74,.10), transparent 32%),
    radial-gradient(circle at 100% 0%, rgba(36,76,61,.10), transparent 34%),
    var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline:3px solid #b57a4a;
  outline-offset:3px;
}

.shell { min-height: 100vh; }
.topbar {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 26px;
  border-bottom: 1px solid rgba(31,41,37,.08);
  background: rgba(255,253,249,.82);
  backdrop-filter: blur(18px);
  position: sticky;
  top: 0;
  z-index: 20;
}
.brand { display:flex; align-items:center; gap:12px; font-weight:760; letter-spacing:-.02em; border:0; background:transparent; padding:0; color:var(--ink); text-align:left; }
.brand-mark {
  width: 38px; height:38px; border-radius:12px; background:var(--accent); color:white;
  display:grid; place-items:center; box-shadow:0 8px 20px rgba(36,76,61,.22);
}
.brand small { display:block; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.12em; margin-top:2px; }
.top-actions { display:flex; align-items:center; gap:10px; }
.status-pill {
  border:1px solid var(--line); background:#fff; color:var(--muted); border-radius:999px;
  padding:8px 12px; font-size:12px; font-weight:650;
}
.status-pill.live { color:var(--success); border-color:rgba(47,107,77,.25); background:#f3faf5; }

.workspace { display:grid; grid-template-columns:var(--sidebar) minmax(0,1fr); min-height:calc(100vh - 72px); }
.sidebar {
  border-right:1px solid rgba(31,41,37,.08); padding:22px 18px; background:rgba(255,253,249,.55);
  position:sticky; top:72px; height:calc(100vh - 72px); overflow:auto;
}
.project-card { padding:16px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-sm); margin-bottom:20px; }
.project-card .eyebrow { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; font-weight:700; }
.project-card h3 { margin:7px 0 4px; font-size:15px; line-height:1.25; }
.project-card p { margin:0; color:var(--muted); font-size:12px; }
.progress-track { height:5px; background:#e7e4dc; border-radius:999px; overflow:hidden; margin-top:12px; }
.progress-bar { height:100%; background:var(--accent); transition:width .3s ease; }
.step-list { display:flex; flex-direction:column; gap:5px; }
.step-button {
  width:100%; display:flex; align-items:center; gap:11px; padding:11px 10px; border:0; background:transparent;
  border-radius:10px; color:var(--muted); text-align:left; font-size:13px; font-weight:620;
}
.step-button:hover { background:rgba(36,76,61,.06); color:var(--ink); }
.step-button.active { background:var(--accent-2); color:var(--accent); }
.step-index { width:25px; height:25px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; font-size:11px; background:white; flex:0 0 auto; }
.step-button.done .step-index { background:var(--accent); color:white; border-color:var(--accent); }
.sidebar-footer { margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }

.main { min-width:0; }
.mobile-step-list { display:none; }
.builder-grid { display:grid; grid-template-columns:minmax(0,1fr) var(--preview); min-height:calc(100vh - 72px); }
.content { padding:42px clamp(24px,4vw,60px) 80px; max-width:940px; width:100%; margin:0 auto; }
.preview-pane { border-left:1px solid rgba(31,41,37,.08); background:#e9e7e0; padding:18px; position:sticky; top:72px; height:calc(100vh - 72px); }
.preview-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; font-size:12px; color:var(--muted); }
.device-switch { display:flex; gap:4px; background:rgba(255,255,255,.72); padding:3px; border-radius:9px; }
.device-switch button { border:0; background:transparent; border-radius:7px; padding:6px 8px; color:var(--muted); }
.device-switch button.active { background:white; color:var(--ink); box-shadow:0 2px 8px rgba(0,0,0,.08); }
.preview-frame-wrap { height:calc(100% - 38px); display:flex; justify-content:center; }
.preview-frame { width:100%; height:100%; border:0; border-radius:15px; background:#fff; box-shadow:0 20px 55px rgba(28,37,33,.18); transition:width .25s ease; }
.preview-frame.mobile { width:320px; }
.preview-empty { width:100%; height:100%; display:grid; place-items:center; background:rgba(255,255,255,.6); border:1px dashed #c5c1b7; border-radius:15px; color:var(--muted); text-align:center; padding:30px; }
.preview-empty svg { margin-bottom:10px; opacity:.65; }

.eyebrow { color:var(--accent-3); font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.page-title { font-family:Georgia, "Times New Roman", serif; font-size:clamp(36px,5vw,58px); line-height:1.02; letter-spacing:-.04em; margin:10px 0 14px; font-weight:500; }
.lede { font-size:18px; line-height:1.55; color:var(--muted); max-width:720px; margin:0 0 30px; }
.section-title { font-family:Georgia, serif; font-size:29px; letter-spacing:-.025em; margin:0 0 8px; font-weight:500; }
.section-copy { color:var(--muted); line-height:1.55; margin:0 0 24px; }

.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:0 1px 0 rgba(255,255,255,.9) inset; }
.card + .card { margin-top:16px; }
.card.compact { padding:18px; }
.card-header { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:18px; }
.card-header h3 { margin:0; font-size:17px; }
.card-header p { margin:5px 0 0; font-size:13px; color:var(--muted); line-height:1.45; }

.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-grid.one { grid-template-columns:1fr; }
.form-grid.three { grid-template-columns:repeat(3,1fr); }
.field { display:flex; flex-direction:column; gap:7px; }
.field.full { grid-column:1/-1; }
.field label { font-size:12px; font-weight:760; color:#3e4844; }
.field .hint { color:var(--muted); font-size:12px; line-height:1.4; }
.input, .textarea, .select {
  width:100%; border:1px solid #d4d0c7; background:#fff; color:var(--ink); border-radius:10px;
  padding:12px 13px; outline:none; transition:border .15s, box-shadow .15s;
}
.input:focus, .textarea:focus, .select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(36,76,61,.11); }
.textarea { min-height:110px; resize:vertical; line-height:1.5; }

.choice-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.choice-card { border:1px solid var(--line); background:white; border-radius:13px; padding:16px; text-align:left; transition:.15s; min-height:118px; }
.choice-card:hover { transform:translateY(-1px); border-color:#bcb8ae; }
.choice-card.selected { border-color:var(--accent); box-shadow:0 0 0 2px rgba(36,76,61,.12); background:#fbfefc; }
.choice-card strong { display:block; font-size:14px; margin-bottom:6px; }
.choice-card span { display:block; color:var(--muted); font-size:12px; line-height:1.45; }
.choice-card .radio { width:16px; height:16px; border-radius:50%; border:1px solid #aaa69c; margin-bottom:12px; }
.choice-card.selected .radio { border:5px solid var(--accent); }

.btn { border:0; border-radius:10px; padding:11px 15px; font-weight:730; font-size:13px; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.btn-primary { background:var(--accent); color:white; box-shadow:0 8px 18px rgba(36,76,61,.18); }
.btn-primary:hover { filter:brightness(.95); }
.btn-secondary { background:#fff; border:1px solid var(--line); color:var(--ink); }
.btn-ghost { background:transparent; color:var(--muted); }
.btn-danger { background:#fff4f2; color:var(--danger); border:1px solid #efd0cb; }
.btn:disabled { opacity:.45; cursor:not-allowed; box-shadow:none; }
.actions-row { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-top:28px; padding-top:20px; border-top:1px solid var(--line); }
.actions-row .right { display:flex; gap:10px; }

.upload-zone { border:1.5px dashed #b8b3a8; background:rgba(255,255,255,.55); border-radius:15px; padding:28px; text-align:center; transition:.15s; }
.upload-zone:hover, .upload-zone.drag { border-color:var(--accent); background:#fbfdfb; }
.upload-zone input { display:none; }
.upload-icon { width:46px; height:46px; display:grid; place-items:center; border-radius:14px; background:var(--accent-2); color:var(--accent); margin:0 auto 12px; }
.upload-zone strong { display:block; margin-bottom:4px; }
.upload-zone p { margin:0; color:var(--muted); font-size:12px; }
.file-list { display:grid; gap:8px; margin-top:14px; }
.file-row { display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid var(--line); background:#fff; padding:10px 12px; border-radius:10px; }
.file-meta { display:flex; align-items:center; gap:10px; min-width:0; }
.file-thumb { width:38px; height:38px; border-radius:8px; background:#ece9e2; object-fit:cover; display:grid; place-items:center; color:var(--muted); font-size:10px; }
.file-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:12px; font-weight:650; }
.file-size { color:var(--muted); font-size:11px; }

.fact-table { width:100%; border-collapse:collapse; }
.fact-table th { text-align:left; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.08em; padding:0 10px 9px; }
.fact-table td { border-top:1px solid var(--line); padding:12px 10px; vertical-align:middle; }
.fact-table .input { padding:9px 10px; }
.badge { display:inline-flex; align-items:center; gap:6px; padding:5px 8px; border-radius:999px; font-size:10px; font-weight:760; white-space:nowrap; }
.badge.verified { background:#eaf5ee; color:#2c6b49; }
.badge.confirmed { background:#edf1f7; color:#415a75; }
.badge.inferred { background:#fff6dc; color:#82651d; }
.badge.missing { background:#f4eeee; color:#7d5d5b; }

.notice { display:flex; gap:12px; padding:14px 15px; border-radius:12px; background:#f7f4ed; border:1px solid #e8e2d6; color:#5f645f; font-size:13px; line-height:1.45; margin-bottom:18px; }
.notice.success { background:#eef8f1; border-color:#d2ead9; color:#315e42; }
.notice.warning { background:#fff8e7; border-color:#eedfb6; color:#70591f; }
.notice.error { background:#fff1ef; border-color:#f0d0cb; color:#7e3932; }

.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:18px; }
.metric { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px; }
.metric span { display:block; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.08em; font-weight:700; }
.metric strong { display:block; font-size:28px; margin-top:8px; letter-spacing:-.04em; }
.metric em { display:block; color:var(--success); font-size:11px; margin-top:5px; font-style:normal; }

.qa-list { display:grid; gap:9px; }
.qa-item { display:flex; justify-content:space-between; align-items:center; padding:12px 13px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.qa-item .qa-label { display:flex; gap:10px; align-items:center; font-size:13px; }
.qa-dot { width:9px; height:9px; border-radius:50%; background:#bbb; }
.qa-item.pass .qa-dot { background:var(--success); }
.qa-item.fail .qa-dot { background:var(--danger); }
.qa-item.warn .qa-dot { background:#c79528; }
.qa-item small { color:var(--muted); }

.lead-table { width:100%; border-collapse:collapse; }
.lead-table th, .lead-table td { text-align:left; padding:12px 10px; border-bottom:1px solid var(--line); font-size:12px; }
.lead-table th { color:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-size:10px; }
.lead-name { font-weight:740; }
.stage-select { border:1px solid var(--line); border-radius:8px; padding:7px 8px; background:#fff; font-size:11px; }

.site-outline { display:grid; gap:8px; }
.outline-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.outline-left { display:flex; align-items:center; gap:10px; }
.drag-handle { color:#aaa; letter-spacing:-2px; }
.toggle { width:38px; height:22px; border-radius:999px; background:#d7d4cc; position:relative; border:0; }
.toggle::after { content:""; position:absolute; width:16px; height:16px; border-radius:50%; background:white; top:3px; left:3px; transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.toggle.on { background:var(--accent); }
.toggle.on::after { left:19px; }

.loader { width:18px; height:18px; border:2px solid rgba(255,255,255,.45); border-top-color:white; border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.skeleton { border-radius:8px; background:linear-gradient(90deg,#ece9e2 25%,#f6f4ef 50%,#ece9e2 75%); background-size:200% 100%; animation:shimmer 1.4s infinite; }
@keyframes shimmer { to { background-position:-200% 0; } }

.modal-backdrop { position:fixed; inset:0; background:rgba(17,25,22,.58); display:grid; place-items:center; padding:20px; z-index:50; }
.modal { background:var(--panel-strong); border-radius:18px; padding:24px; width:min(620px,100%); box-shadow:var(--shadow); max-height:90vh; overflow:auto; }
.modal h2 { margin:0 0 8px; font-family:Georgia,serif; font-weight:500; }
.modal p { color:var(--muted); line-height:1.5; }
.code-box { background:#17201c; color:#d9e6df; padding:15px; border-radius:10px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; overflow:auto; }

.toast { position:fixed; right:20px; bottom:20px; background:#1e2b25; color:white; border-radius:10px; padding:12px 15px; box-shadow:0 14px 35px rgba(0,0,0,.2); font-size:13px; opacity:0; transform:translateY(8px); pointer-events:none; transition:.2s; z-index:80; }
.toast.show { opacity:1; transform:translateY(0); }

.hero-start { padding:12px 0 8px; }
.feature-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:24px 0; }
.feature { padding:16px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.6); }
.feature strong { display:block; font-size:13px; margin-bottom:6px; }
.feature span { color:var(--muted); font-size:12px; line-height:1.4; }

.auth-shell { min-height:100vh; display:grid; place-items:center; padding:28px; }
.auth-card { width:min(620px,100%); }
.auth-brand { margin-bottom:50px; }
.project-hub { max-width:1120px; margin:auto; padding:60px 24px; }
.hub-head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:28px; }
.hub-head .page-title { max-width:720px; }
.property-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.property-tile { text-align:left; border:1px solid var(--line); background:var(--panel); border-radius:var(--radius); padding:24px; min-height:190px; color:var(--ink); transition:.18s; }
.property-tile:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
.property-tile h2 { font-family:Georgia,serif; font-weight:500; font-size:25px; margin:26px 0 8px; }
.property-tile p,.property-tile small { color:var(--muted); }
.empty-card { border:1px dashed #b8b3a8; border-radius:var(--radius); padding:34px; color:var(--muted); background:rgba(255,255,255,.45); }
.create-card { margin-bottom:22px; }
.fact-card { overflow:auto; margin-bottom:14px; }
.unit { max-width:74px; }
.image-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.image-card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.image-card>img { width:100%; height:260px; object-fit:cover; display:block; }
.image-controls { display:grid; gap:12px; padding:18px; }
.image-controls label { display:grid; gap:6px; font-size:12px; font-weight:700; }
.section-editor .textarea { min-height:170px; margin-top:10px; }
.publish-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
.enquiry-list { display:grid; gap:12px; }
.enquiry-card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; border:1px solid var(--line); border-radius:12px; padding:18px; background:#fff; }
.enquiry-card span,.enquiry-card small { display:block; color:var(--muted); margin-top:4px; }
.enquiry-card p { margin:12px 0 0; }
.enquiry-card>div:last-child { display:grid; gap:8px; align-content:start; min-width:190px; }
.pack-request { display:flex; align-items:center; justify-content:space-between; gap:18px; border:1px solid var(--line); border-radius:12px; padding:16px 18px; background:#fff; }
.pack-request small { display:block; color:var(--muted); margin-top:4px; }
.loader.dark { border-color:rgba(36,76,61,.2); border-top-color:var(--accent); margin:80px auto; }

@media (max-width: 1220px) {
  :root { --preview: 370px; --sidebar:250px; }
  .choice-grid { grid-template-columns:1fr; }
}
@media (max-width: 980px) {
  .workspace { grid-template-columns:1fr; }
  .sidebar { display:none; }
  .mobile-step-list { display:flex; gap:8px; overflow-x:auto; padding:12px 20px; border-bottom:1px solid var(--line); background:rgba(255,253,249,.9); position:sticky; top:72px; z-index:10; }
  .mobile-step-button { flex:0 0 auto; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--muted); padding:9px 12px; font-size:12px; font-weight:700; }
  .mobile-step-button span { margin-right:6px; }
  .mobile-step-button.active { background:var(--accent); border-color:var(--accent); color:#fff; }
  .builder-grid { grid-template-columns:1fr; }
  .preview-pane { position:relative; top:auto; height:640px; border-left:0; border-top:1px solid var(--line); }
  .content { padding:30px 20px 55px; }
  .metrics { grid-template-columns:repeat(2,1fr); }
  .property-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 650px) {
  .topbar { padding:0 14px; height:64px; }
  .topbar .status-pill { display:none; }
  .workspace { min-height:calc(100vh - 64px); }
  .form-grid, .form-grid.three { grid-template-columns:1fr; }
  .choice-grid { grid-template-columns:1fr; }
  .feature-strip { grid-template-columns:1fr; }
  .metrics { grid-template-columns:1fr 1fr; }
  .fact-table thead { display:none; }
  .fact-table, .fact-table tbody, .fact-table tr, .fact-table td { display:block; width:100%; }
  .fact-table tr { border-top:1px solid var(--line); padding:12px 0; }
  .fact-table td { border:0; padding:5px 0; }
  .actions-row { align-items:stretch; flex-direction:column-reverse; }
  .actions-row .right { width:100%; }
  .actions-row .right .btn { flex:1; }
  .page-title { font-size:39px; }
  .lead-table { display:block; overflow:auto; white-space:nowrap; }
  .hub-head { display:block; }
  .hub-head .btn { margin-top:12px; }
  .property-grid,.image-grid { grid-template-columns:1fr; }
  .enquiry-card { grid-template-columns:1fr; }
  .top-actions [data-action="preview"] { display:none; }
  .mobile-step-list { top:64px; padding-inline:14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}