:root{--ink:#102a1d;--deep:#173f2b;--leaf:#286241;--accent:#d49b45;--cream:#f3eddf;--paper:#fbfaf6;--line:#d8d6cd;--muted:#68736d;--shadow:0 18px 50px rgba(16,42,29,.12)}
*{box-sizing:border-box}html{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--paper);color:var(--ink)}body{margin:0;min-width:320px}button,input{font:inherit}button{cursor:pointer}.app-shell{min-height:100vh}.topbar{height:82px;padding:10px clamp(18px,4vw,56px);display:flex;align-items:center;justify-content:space-between;background:var(--cream);border-bottom:1px solid rgba(23,63,43,.12);position:sticky;top:0;z-index:20}.brand{display:flex;align-items:center;gap:13px}.brand img{width:58px;height:58px;object-fit:contain;mix-blend-mode:multiply}.brand strong{font-family:Georgia,serif;font-size:1.17rem;display:block;letter-spacing:.01em}.brand span{display:block;text-transform:uppercase;letter-spacing:.18em;font-size:.68rem;color:var(--leaf);margin-top:3px}.top-actions{display:flex;align-items:center;gap:10px}.offline-pill{font-size:.78rem;background:#fff9;padding:9px 13px;border-radius:99px;border:1px solid #cfddcf}.offline-pill i,.engine-status i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#5da66c;margin-right:7px}.icon-button,.secondary,.primary{border:0;border-radius:10px;padding:11px 15px;font-weight:700}.secondary{background:white;border:1px solid var(--line);color:var(--ink)}.primary{background:var(--deep);color:white;box-shadow:0 8px 22px rgba(23,63,43,.18)}.primary:disabled{opacity:.46;cursor:not-allowed}.workspace{min-height:calc(100vh - 82px);display:grid;grid-template-columns:90px minmax(0,1fr) 350px}.workflow{border-right:1px solid var(--line);padding:34px 12px;display:flex;flex-direction:column;align-items:center;gap:30px}.step{display:flex;flex-direction:column;align-items:center;gap:7px;color:#8e9791;font-size:.7rem;text-align:center}.step b{display:grid;place-items:center;width:31px;height:31px;border:1px solid var(--line);border-radius:50%}.step.active{color:var(--deep);font-weight:700}.step.active b{background:var(--deep);color:white;border-color:var(--deep)}.canvas-column{padding:24px;min-width:0}.project-bar{display:flex;align-items:end;gap:9px;margin-bottom:14px}.project-bar label{font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);flex:1}.project-bar input{display:block;width:100%;border:0;background:transparent;color:var(--ink);font-family:Georgia,serif;font-size:1.35rem;font-weight:700;padding:5px 0 2px;outline:none}.stage{position:relative;overflow:hidden;min-height:560px;height:calc(100vh - 180px);border-radius:18px;background:linear-gradient(140deg,#dfe6e0,#bac7be);box-shadow:var(--shadow);touch-action:none}.empty-state{height:100%;min-height:560px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:30px;background:radial-gradient(circle at 50% 35%,#eef2ec 0,#d7e0d8 43%,#c6d2ca 100%)}.camera-mark{font-size:3rem;width:76px;height:76px;display:grid;place-items:center;border:1px solid #9caf9f;border-radius:50%;margin-bottom:14px}.empty-state h1{font-family:Georgia,serif;font-size:clamp(1.8rem,3vw,3.1rem);margin:0 0 9px;max-width:500px}.empty-state p{margin:0 0 20px;color:var(--muted);font-size:1rem}.empty-state small{margin-top:13px;color:var(--muted)}.site-image{width:100%;height:100%;object-fit:cover;display:none}.reference-overlay{position:absolute;left:18%;top:24%;width:62%;transform-origin:center;cursor:grab;filter:drop-shadow(0 22px 18px rgba(0,0,0,.28));user-select:none}.reference-overlay:active{cursor:grabbing}.reference-overlay img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border:3px solid rgba(255,255,255,.72);border-radius:8px;mix-blend-mode:normal}.drag-hint{position:absolute;top:8px;left:8px;background:#102a1dcc;color:#fff;padding:6px 8px;border-radius:6px;font-size:.68rem}.concept-badge{position:absolute;left:14px;bottom:14px;background:#fffdf3e8;padding:8px 11px;border-radius:8px;font-size:.7rem;font-weight:700}.mobile-actionbar{display:none}.control-panel{border-left:1px solid var(--line);padding:24px;background:#f6f5f0;overflow-y:auto;max-height:calc(100vh - 82px);position:sticky;top:82px}.mode-switch{display:grid;grid-template-columns:1fr 1fr;background:#e7e7e0;border-radius:11px;padding:4px;margin-bottom:24px}.mode-switch button,.segmented button{border:0;background:transparent;padding:10px;border-radius:8px;font-weight:700;color:var(--muted)}.mode-switch button.active,.segmented button.active{background:white;color:var(--deep);box-shadow:0 3px 12px #102a1d14}.panel-heading{display:flex;justify-content:space-between;align-items:start}.panel-heading span,.view-controls>span,.saved-section>div>span{font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;color:var(--leaf);font-weight:800}.panel-heading h2,.saved-section h2{font-family:Georgia,serif;margin:5px 0 16px;font-size:1.45rem}.panel-heading b{background:var(--cream);padding:7px 10px;border-radius:7px;color:var(--leaf)}.structure-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.structure-card{border:2px solid transparent;background:white;border-radius:12px;padding:0;overflow:hidden;text-align:left;color:var(--ink)}.structure-card.active{border-color:var(--leaf)}.structure-card img{display:block;width:100%;height:88px;object-fit:cover;filter:saturate(.9) contrast(1.03)}.structure-card span{display:block;padding:8px;font-size:.72rem;font-weight:750}.view-controls{margin-top:23px}.segmented{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;background:#e7e7e0;padding:4px;border-radius:10px;margin-top:8px}.adjustments{margin-top:21px;display:grid;gap:15px}.adjustments label{font-size:.76rem;font-weight:700}.adjustments output{float:right;color:var(--muted)}input[type=range]{width:100%;accent-color:var(--leaf);margin-top:8px}.ai-card{background:white;border:1px solid var(--line);padding:24px;border-radius:15px}.spark{font-size:2rem;color:var(--accent)}.ai-card h2{font-family:Georgia,serif;margin:8px 0}.ai-card p,.ai-card small{color:var(--muted);line-height:1.5}.ai-card button{width:100%;margin:18px 0 10px}.engine-status{display:flex;align-items:flex-start;background:#f2f3ef;padding:12px;border-radius:9px;font-size:.77rem}.engine-status i{margin-top:5px;background:#b5a577}.engine-status span,.engine-status strong{display:block}.saved-section{padding:38px clamp(20px,7vw,96px) 70px;background:var(--deep);color:white}.saved-section>div>span{color:#a9c3af}.saved-section h2{font-size:2rem}.saved-projects{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}.saved-card{background:#ffffff10;border:1px solid #ffffff20;border-radius:12px;padding:15px}.saved-card strong,.saved-card span{display:block}.saved-card span{color:#bbcbc0;font-size:.75rem;margin-top:5px}.saved-card button{margin-top:12px;background:transparent;color:white;border:1px solid #ffffff30;padding:7px 9px;border-radius:7px}.no-projects{color:#bdcabe}
@media(max-width:1000px){.workspace{grid-template-columns:1fr 330px}.workflow{display:none}.stage{height:600px}.control-panel{top:82px}.canvas-column{padding:18px}}
@media(max-width:760px){.topbar{height:69px;padding:7px 13px}.brand img{width:47px;height:47px}.brand strong{font-size:1rem}.brand span{font-size:.56rem}.offline-pill{font-size:0;width:34px;height:34px;padding:0;display:grid;place-items:center}.offline-pill i{margin:0}.workspace{display:flex;flex-direction:column}.canvas-column{padding:12px}.project-bar{align-items:center}.project-bar label{margin-right:auto}.project-bar .secondary{display:none}.project-bar input{font-size:1.05rem}.stage,.empty-state{height:55vh;min-height:390px;border-radius:14px}.empty-state h1{font-size:1.65rem}.empty-state p{font-size:.9rem}.mobile-actionbar{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.control-panel{position:static;max-height:none;border-left:0;border-top:1px solid var(--line);padding:18px 14px 25px}.structure-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:5px}.structure-card{min-width:142px;scroll-snap-align:start}.saved-section{padding:30px 15px 50px}.saved-projects{grid-template-columns:1fr}.concept-badge{font-size:.62rem}.reference-overlay{width:68%;left:16%}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* The customer photo is the permanent background; only the transparent model moves. */
.site-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#19251f;z-index:1}
.reference-overlay{z-index:3;filter:drop-shadow(0 18px 13px rgba(0,0,0,.34))}
.reference-overlay img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain;border:0;border-radius:0;pointer-events:none}
.drag-hint{left:50%;transform:translateX(-50%);white-space:nowrap}
.concept-badge{z-index:5}

.coach{display:flex;align-items:center;gap:13px;background:#edf4ee;border:1px solid #c9d9cc;border-radius:12px;padding:11px 14px;margin:0 0 12px;color:var(--deep)}
.coach b{white-space:nowrap;background:var(--deep);color:white;border-radius:7px;padding:7px 9px;font-size:.8rem}.coach span{font-size:.9rem;line-height:1.35}
.workspace{grid-template-columns:110px minmax(0,1fr) 350px}.workflow{display:flex;width:110px;padding-left:8px;padding-right:8px}.step{position:relative;width:100%;font-size:.76rem}.step:not(:last-child)::after{content:"";position:absolute;width:3px;height:26px;top:39px;left:calc(50% - 1px);background:#d7ddd8;border-radius:4px}.step.complete:not(:last-child)::after{background:var(--leaf)}
.step b{background:white;transition:background .2s,color .2s,border-color .2s}.step.complete{color:var(--leaf);font-weight:800}.step.complete b{background:var(--leaf);border-color:var(--leaf);color:white}.step.active b{box-shadow:0 0 0 5px rgba(40,98,65,.13)}
@media(min-width:761px) and (max-width:1000px){.workspace{grid-template-columns:90px minmax(0,1fr) 320px}.workflow{display:flex;width:90px}}
@media(max-width:760px){.workflow{display:flex;width:100%;height:76px;order:0;flex-direction:row;justify-content:space-around;gap:0;padding:10px 8px;border-right:0;border-bottom:1px solid var(--line)}.step{width:25%;font-size:.66rem;gap:3px}.step b{width:27px;height:27px}.step:not(:last-child)::after{width:calc(100% - 34px);height:3px;left:calc(50% + 17px);top:13px}.canvas-column{order:1}.control-panel{order:2}.coach{align-items:flex-start;padding:10px 11px}.coach b{font-size:.72rem}.coach span{font-size:.82rem}}

.advisor{background:linear-gradient(145deg,#173f2b,#245c3d);color:white;border-radius:14px;padding:15px;margin-bottom:22px;box-shadow:0 12px 30px rgba(23,63,43,.16)}.advisor-title{display:flex;justify-content:space-between;align-items:center}.advisor-title span{font-family:Georgia,serif;font-weight:700}.advisor-title b{font-size:.68rem;padding:5px 7px;border-radius:99px;background:#ffffff16;color:#dce8df}.advisor>p{font-size:.76rem;line-height:1.45;color:#c7d8cc;margin:9px 0 12px}.suggestion-list{display:grid;gap:8px}.suggestion{width:100%;display:grid;grid-template-columns:58px 1fr auto;gap:10px;align-items:center;text-align:left;border:1px solid #ffffff1c;background:#ffffff0d;color:white;border-radius:10px;padding:7px}.suggestion:hover,.suggestion:focus-visible{background:#ffffff1a}.suggestion img{width:58px;height:48px;object-fit:contain;background:linear-gradient(145deg,#536b5b,#244534);border-radius:7px}.suggestion span,.suggestion strong,.suggestion small,.suggestion em{display:block}.suggestion em{font-style:normal;text-transform:uppercase;letter-spacing:.1em;font-size:.56rem;color:#a8c8b0}.suggestion strong{font-size:.74rem;margin:2px 0}.suggestion small{font-size:.62rem;color:#c4d4c8}.suggestion>b{font-size:.68rem;background:white;color:var(--deep);padding:6px 8px;border-radius:7px}.idea-list{margin:15px 0}.ai-card .suggestion{background:#f1f4f0;color:var(--ink);border-color:var(--line)}.ai-card .suggestion em{color:var(--leaf)}.ai-card .suggestion small{color:var(--muted)}.ai-card .suggestion>b{background:var(--deep);color:white}
.saved-card>img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:8px;margin-bottom:11px}.saved-actions{display:flex;gap:8px}.saved-actions button{flex:1}.saved-actions .view-project{background:white;color:var(--deep);border-color:white;font-weight:800}.project-viewer{width:min(920px,calc(100% - 24px));max-width:none;border:0;border-radius:18px;padding:18px;background:var(--paper);color:var(--ink);box-shadow:0 30px 100px #0008}.project-viewer.large{width:min(1400px,calc(100% - 20px));height:calc(100dvh - 20px);max-height:none}.project-viewer::backdrop{background:#08150cf0;backdrop-filter:blur(5px)}.project-viewer[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:14px}.project-viewer img{display:block;width:100%;max-height:65vh;object-fit:contain;border-radius:12px;background:#19251f;cursor:zoom-in}.project-viewer.large img{height:100%;max-height:none;min-height:0;cursor:zoom-out}.viewer-head,.viewer-actions{display:flex;align-items:center;justify-content:space-between;gap:10px}.viewer-head span{font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;color:var(--leaf);font-weight:800}.viewer-head h2{font-family:Georgia,serif;margin:3px 0;font-size:1.5rem}.viewer-close{border:0;background:#e9ece7;color:var(--deep);width:40px;height:40px;border-radius:50%;font-size:1.7rem;line-height:1}.viewer-actions{justify-content:flex-end}.viewer-actions button{min-width:140px}@media(max-width:560px){.project-viewer{width:calc(100% - 16px);padding:10px}.project-viewer.large{width:100%;height:100dvh;border-radius:0}.viewer-head h2{font-size:1.15rem}.viewer-actions{display:grid;grid-template-columns:repeat(3,1fr)}.viewer-actions button{min-width:0;padding:12px 6px;font-size:.78rem}}
.upload-recommendations{margin-top:16px;padding:18px;border:1px solid #ccd8ce;border-radius:16px;background:#f4f7f2;box-shadow:0 10px 30px rgba(16,42,29,.08)}.recommendation-head{display:flex;align-items:start;justify-content:space-between;gap:12px}.recommendation-head span{color:var(--leaf);font-size:.7rem;text-transform:uppercase;letter-spacing:.13em;font-weight:800}.recommendation-head h2{font-family:Georgia,serif;margin:4px 0 14px;font-size:1.45rem}.recommendation-head>b{background:#dcebdd;color:var(--deep);padding:7px 9px;border-radius:99px;font-size:.7rem}.recommendation-tabs{display:flex;gap:6px;margin-bottom:14px}.recommendation-tabs button{border:1px solid var(--line);background:white;color:var(--ink);padding:10px 14px;border-radius:9px;font-weight:800}.recommendation-tabs button.active{background:var(--deep);border-color:var(--deep);color:white}.recommendation-pane>p{color:var(--muted);margin:0 0 12px;font-size:.88rem}.recommendation-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.recommendation-card{background:white;border:1px solid var(--line);border-radius:12px;overflow:hidden}.recommendation-card>img{width:100%;height:120px;object-fit:cover}.recommendation-card>div{padding:11px}.recommendation-card span{color:var(--leaf);font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;font-weight:800}.recommendation-card h3{font-size:.92rem;margin:4px 0}.recommendation-card small{display:block;color:var(--muted);margin-bottom:10px}.recommendation-card button{width:100%;padding:9px;font-size:.76rem}.refresh-ideas{margin:0 0 12px}@media(max-width:760px){.upload-recommendations{padding:14px}.recommendation-head h2{font-size:1.2rem}.recommendation-head>b{display:none}.recommendation-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}.recommendation-card{min-width:210px;scroll-snap-align:start}.recommendation-card>img{height:130px}}
.remove-photo{border:1px solid #bd6d61;background:#fff4f1;color:#8f3026;border-radius:10px;padding:11px 14px;font-weight:800}@media(max-width:760px){.project-bar .remove-photo{display:none}.mobile-actionbar{grid-template-columns:repeat(3,1fr)}.mobile-actionbar button{padding:11px 7px;font-size:.78rem}}
.mobile-editbar{display:none}.brand img{mix-blend-mode:normal;background:#eee5d3;padding:6px;border-radius:10px}@media(max-width:760px){.topbar{padding:7px 9px}.brand{gap:7px}.brand img{width:45px;height:45px;padding:7px}.brand strong{font-size:.9rem}.brand span{font-size:.49rem}.offline-pill{display:flex;width:auto;height:auto;font-size:.62rem;padding:7px 8px;white-space:nowrap}.offline-pill i{margin-right:5px}.mobile-editbar{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.mobile-actionbar{grid-template-columns:1fr 1fr;margin-top:8px}.mobile-actionbar button,.mobile-editbar button{padding:11px 7px;font-size:.78rem}.upload-recommendations{display:none!important}#offlinePanel{display:flex;flex-direction:column}.advisor{order:1}.view-controls{order:2}.panel-heading{order:3;margin-top:24px}.structure-grid{order:4}.adjustments{order:5}}