@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  color-scheme: light;
  --ink: #242a27;
  --muted: #898e87;
  --line: #e9e9e2;
  --paper: #f6f4ee;
  --card: #fffefa;
  --green: #355b4b;
  --green-dark: #284638;
  --mint: #dcebe1;
  --orange: #e17d54;
  --shadow: 0 12px 40px rgba(44, 49, 41, .055);
  font-family: "DM Sans", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(ellipse at 87% 2%, rgba(233, 223, 199, .26), transparent 28rem),
    var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, label:has(input:focus-visible) .placement-card {
  outline: 3px solid rgba(75, 126, 100, .42);
  outline-offset: 3px;
}

.app-shell { width: min(1320px, 100% - 72px); margin: 0 auto; }
.topbar { height: 77px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(75, 78, 66, .1); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 800 17px Manrope, sans-serif; letter-spacing: -.8px; }
.brand-mark { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 11px; background: var(--green); color: #fff; font: 700 18px Manrope, sans-serif; letter-spacing: -1px; }
.brand-light { font-weight: 500; color: #92958d; }
.top-actions { display: flex; gap: 11px; align-items: center; }
.save-state { color: #81877d; font-size: 11px; }
.save-state::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: #75a481; vertical-align: 1px; }
.save-state.is-saving::before { background: var(--orange); }
.icon-button { display: grid; place-items: center; width: 35px; height: 35px; border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; transition: background .2s, color .2s; }
.icon-button:hover { background: var(--green); color: white; }
.icon-button svg, .text-button svg, .export-button svg, .add-button svg, .photo-button svg, .link-input-wrap svg, .canvas-button svg, .privacy-note svg, .placement-card svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.intro { min-height: 223px; display: flex; align-items: center; justify-content: space-between; padding: 28px 4px 26px; }
.eyebrow { margin: 0 0 8px; color: #858a80; font-size: 9px; font-weight: 700; letter-spacing: 1.35px; text-transform: uppercase; }
.intro .eyebrow { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; }
.eyebrow-dot { width: 6px; height: 6px; display: inline-block; border-radius: 50%; background: var(--orange); }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 10px; font: 800 clamp(34px, 4vw, 47px)/1.07 Manrope, sans-serif; letter-spacing: -2.6px; }
h1 span { color: var(--green); }
.intro-copy { max-width: 450px; margin-bottom: 0; color: #777d74; font-size: 13px; line-height: 1.65; }
.step-indicator { display: flex; align-items: center; gap: 11px; margin-right: 6.5%; color: #858a80; font-size: 10px; }
.step-number { color: var(--orange); font: 700 11px Manrope, sans-serif; }
.step-line { width: 47px; height: 1px; background: #d4d7ce; }

.workspace { display: grid; grid-template-columns: minmax(0, 1.54fr) minmax(340px, .92fr); align-items: start; gap: 24px; }
.room-panel { min-width: 0; padding: 23px 24px 18px; border: 1px solid rgba(235, 234, 224, .9); border-radius: 19px; background: var(--card); box-shadow: var(--shadow); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.panel-heading .eyebrow, .card-heading .eyebrow, .objects-heading .eyebrow { margin-bottom: 4px; }
.panel-heading h2, .card-heading h2, .objects-heading h2 { margin: 0; font: 700 16px Manrope, sans-serif; letter-spacing: -.45px; }
.text-button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: #666d64; font-size: 10px; cursor: pointer; }
.text-button:hover { border-color: #b7c8bb; color: var(--green); }
.text-button svg { width: 14px; height: 14px; }
.room-frame { position: relative; overflow: hidden; aspect-ratio: 1.24; min-height: 300px; border-radius: 12px; background: #edeae2; touch-action: none; }
#room-canvas { display: block; width: 100%; height: 100%; }
.room-badge { position: absolute; top: 13px; left: 13px; display: flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid rgba(255,255,255,.55); border-radius: 5px; background: rgba(255,255,255,.66); color: #646d64; font-size: 8px; font-weight: 700; letter-spacing: .8px; backdrop-filter: blur(7px); pointer-events: none; }
.live-dot { width: 5px; height: 5px; border-radius: 50%; background: #72a27b; }
.canvas-hint { position: absolute; top: 53%; left: 50%; display: flex; align-items: center; gap: 7px; padding: 9px 13px; border: 1px solid rgba(255,255,255,.82); border-radius: 22px; background: rgba(255,254,250,.87); color: #73786e; font-size: 10px; transform: translate(-50%, -50%); pointer-events: none; transition: opacity .2s; white-space: nowrap; }
.canvas-hint[hidden] { opacity: 0; }
.hint-sparkle { color: var(--orange); font-size: 13px; }
.canvas-controls { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 6px; }
.canvas-button { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(255,255,255,.8); border-radius: 9px; background: rgba(255,254,250,.83); color: #586258; cursor: pointer; backdrop-filter: blur(8px); }
.canvas-button:hover { background: white; color: var(--green); }
.canvas-button svg { width: 16px; height: 16px; }
.room-caption, .room-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.room-caption { padding: 11px 1px 14px; color: #7d8279; font-size: 9px; }
.room-size { display: flex; align-items: center; gap: 6px; }
.size-icon { color: var(--orange); font-size: 16px; }
.drag-note { color: #a0a39c; }
.drag-indicator { margin-right: 4px; font-size: 13px; }
.room-footer { min-height: 46px; border-top: 1px solid #eeeee8; color: #8a8e86; font-size: 9px; }
.export-button { display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border: 0; border-radius: 8px; background: var(--green); color: white; font-size: 10px; font-weight: 600; cursor: pointer; transition: background .2s, transform .2s; }
.export-button:hover, .add-button:hover { background: var(--green-dark); transform: translateY(-1px); }
.export-button svg { width: 14px; height: 14px; }

.side-panel { display: grid; gap: 12px; }
.card { padding: 17px 18px; border: 1px solid rgba(235, 234, 224, .9); border-radius: 14px; background: var(--card); box-shadow: var(--shadow); }
.card-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.card-heading h2 { font-size: 14px; }
.section-icon { width: 32px; height: 32px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 10px; }
.section-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.room-icon { background: #e9efe5; color: #59735a; }
.object-icon { background: #fbede2; color: #c7794d; }
.field-label, .field-group > span { display: block; margin-bottom: 6px; color: #666d64; font-size: 10px; font-weight: 600; }
.text-input { width: 100%; height: 36px; padding: 0 10px; border: 1px solid #e8e9e2; border-radius: 7px; outline: none; background: #fff; color: #343a35; font-size: 11px; transition: border-color .2s, box-shadow .2s; }
.text-input:focus, .link-input-wrap:focus-within { border-color: #9eb4a3; box-shadow: 0 0 0 3px rgba(71, 116, 87, .08); }
.text-input::placeholder, .link-input-wrap input::placeholder { color: #b0b3ac; }
.dimensions-row { display: grid; grid-template-columns: minmax(0,1fr) 12px minmax(0,1fr); align-items: end; gap: 6px; margin-top: 11px; }
.room-dimensions { grid-template-columns: minmax(0,1fr) 8px minmax(0,1fr) 8px minmax(0,1fr); gap: 4px; }
.room-dimensions .field-group > span { font-size: 9px; }
.room-dimensions .text-input { padding: 0 7px; font-size: 10px; }
.room-dimensions .multiply { padding-bottom: 10px; font-size: 10px; }
.field-group { min-width: 0; }
.field-group .text-input { font-variant-numeric: tabular-nums; }
.multiply { padding-bottom: 10px; color: #afb2aa; font-size: 11px; text-align: center; }
.helper-text { margin: 7px 0 0; color: #9a9e96; font-size: 9px; line-height: 1.55; }
.add-object .card-heading { margin-bottom: 14px; }
.spaced-label { margin-top: 13px; }
.link-input-wrap { height: 36px; display: flex; align-items: center; gap: 7px; padding: 0 9px; border: 1px solid #e8e9e2; border-radius: 7px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.link-input-wrap svg { width: 14px; height: 14px; flex: 0 0 auto; color: #a3a99f; }
.link-input-wrap input { width: 100%; min-width: 0; border: 0; outline: 0; color: #343a35; font-size: 10px; }
.link-helper { margin-top: 5px; }
.photo-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.photo-button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px dashed #cfd7cc; border-radius: 7px; color: #55705c; font-size: 9px; font-weight: 600; cursor: pointer; }
.photo-button:hover { border-color: var(--green); background: #f5f8f3; }
.photo-button svg { width: 14px; height: 14px; }
.photo-note { color: #a0a39c; font-size: 9px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }
.object-dimensions { grid-template-columns: minmax(0,1fr) 10px minmax(0,1fr) 10px minmax(0,1fr); gap: 4px; margin-top: 12px; }
.object-dimensions .field-group > span { font-size: 9px; }
.object-dimensions .text-input { padding: 0 7px; font-size: 10px; }
.object-dimensions .multiply { padding-bottom: 10px; }
.placement-picker { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 13px; }
.placement-label { color: #666d64; font-size: 10px; font-weight: 600; }
.placement-options { display: flex; gap: 5px; }
.placement-option { cursor: pointer; }
.placement-option > input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.placement-card { display: flex; align-items: center; gap: 5px; padding: 6px 8px; border: 1px solid #e9e9e2; border-radius: 7px; color: #777d74; font-size: 9px; transition: .15s ease; }
.placement-option input:checked + .placement-card { border-color: #9db4a1; background: #eef4ed; color: var(--green); }
.placement-card svg { width: 13px; height: 13px; }
.add-button { width: 100%; height: 39px; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 15px; border: 0; border-radius: 8px; background: var(--green); color: white; font-size: 10px; font-weight: 600; cursor: pointer; transition: background .2s, transform .2s; }
.add-button svg { width: 14px; height: 14px; }
.button-arrow { margin-left: auto; padding-right: 7px; color: #dce8df; font-size: 14px; }
.objects-card { padding-bottom: 8px; }
.objects-card[hidden] { display: none; }
.objects-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.objects-heading h2 { font-size: 13px; }
.count-pill { display: inline-grid; min-width: 19px; height: 19px; place-items: center; margin-left: 4px; border-radius: 50%; background: #f0eee7; color: #7e827a; font: 600 9px "DM Sans", sans-serif; vertical-align: 1px; }
.list-tip { color: #a1a39c; font-size: 8px; }
.object-list { display: grid; gap: 4px; padding: 0; margin: 0; list-style: none; }
.object-row { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 7px 5px; border-top: 1px solid #f0f0ea; cursor: pointer; }
.object-swatch { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; border-radius: 8px; background: #f1eee6; color: #747d69; }
.object-swatch img { width: 100%; height: 100%; object-fit: cover; }
.object-swatch svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.object-summary { min-width: 0; flex: 1; }
.object-summary strong { display: block; overflow: hidden; color: #454b44; font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.object-summary span { display: block; margin-top: 3px; color: #999d94; font-size: 8px; }
.object-actions { display: flex; gap: 3px; }
.object-actions button, .object-actions a { width: 25px; height: 25px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: #a2a59e; font-size: 14px; text-decoration: none; cursor: pointer; }
.object-actions button:hover, .object-actions a:hover { background: #f3f1ea; color: var(--green); }
.object-actions button.delete-object:hover { color: #bc6148; }
.privacy-note { display: flex; align-items: center; gap: 6px; padding: 2px 4px; margin: 0; color: #9a9d94; font-size: 9px; }
.privacy-note svg { width: 13px; height: 13px; color: #8ca08e; }
.page-footer { display: flex; justify-content: space-between; padding: 23px 3px 25px; color: #a0a39a; font-size: 9px; }
.page-footer > span:first-child { font-style: italic; }
.toast { position: fixed; z-index: 4; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); max-width: calc(100vw - 32px); padding: 10px 16px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: #2f473a; color: white; box-shadow: 0 8px 26px rgba(21, 33, 25, .2); font-size: 11px; opacity: 0; pointer-events: none; transform: translate(-50%, 10px); transition: opacity .2s, transform .2s; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.toast.is-error { background: #944f3e; }

@media (min-width: 1360px) {
  .workspace { grid-template-columns: minmax(0, 1.5fr) minmax(390px, .9fr); gap: 30px; }
  .room-panel { padding: 27px 28px 20px; }
  .card { padding: 20px; }
}

@media (max-width: 850px) {
  .app-shell { width: min(100% - 40px, 680px); }
  .workspace { grid-template-columns: 1fr; gap: 16px; }
  .intro { min-height: 190px; }
  .step-indicator { margin-right: 2%; }
  .side-panel { grid-template-columns: repeat(2, minmax(0,1fr)); align-items: start; }
  .add-object { grid-row: span 2; }
  .privacy-note { grid-column: 1 / -1; }
  .objects-card { grid-column: 1; }
}

@media (max-width: 560px) {
  .app-shell { width: calc(100% - 28px); }
  .topbar { height: 62px; }
  .brand { font-size: 15px; }
  .brand-mark { width: 29px; height: 29px; }
  .save-state { font-size: 9px; }
  .intro { min-height: 167px; padding: 23px 2px 22px; }
  .intro .eyebrow { margin-bottom: 9px; }
  h1 { margin-bottom: 7px; font-size: 36px; letter-spacing: -2px; }
  .intro-copy { max-width: 280px; font-size: 11px; }
  .step-indicator { display: none; }
  .room-panel { padding: 17px 13px 10px; border-radius: 14px; }
  .panel-heading { margin: 0 2px 12px; }
  .panel-heading h2 { font-size: 15px; }
  .room-frame { min-height: 260px; aspect-ratio: .94; }
  .room-caption { padding: 10px 1px 12px; font-size: 8px; }
  .drag-note { font-size: 8px; }
  .room-footer { min-height: 43px; font-size: 8px; }
  .export-button { padding: 8px 9px; font-size: 9px; }
  .side-panel { grid-template-columns: 1fr; gap: 10px; }
  .add-object { grid-row: auto; }
  .objects-card { grid-column: auto; }
  .card { padding: 16px; }
  .field-label, .field-group > span { font-size: 10px; }
  .text-input, .link-input-wrap { height: 39px; }
  .object-dimensions .text-input { height: 37px; }
  .add-button { height: 43px; font-size: 11px; }
  .page-footer { padding: 19px 2px 24px; }
}

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