﻿/* App card example stays compact; the editor below is a separate guided experience. */
.remodel-card-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(140px,43%);align-items:center;gap:18px}
.app-copy{display:flex;flex-direction:column;gap:9px;min-width:0}
.card-example{display:grid;grid-template-columns:1fr 1fr;position:relative;width:100%;overflow:hidden;border-radius:9px;border:1px solid var(--line);gap:2px;background:var(--paper)}
.card-example>span:not(.example-tag){position:relative;min-width:0}.card-example img{width:100%;height:100px;object-fit:cover;display:block}.card-example small{position:absolute;top:5px;left:5px;background:#18201bd9;color:white;font:9px system-ui;border-radius:3px;padding:3px 4px}.card-example .example-tag{position:absolute;bottom:4px;right:5px;font:8px system-ui;color:white;text-shadow:0 1px 3px #000}
#dashboard:has(.remodel-workspace:not([hidden])) .studio-layout{display:block;max-width:none}
#dashboard:has(.remodel-workspace:not([hidden])) .studio-nav,#dashboard:has(.remodel-workspace:not([hidden])) .history-section,#dashboard:has(.remodel-workspace:not([hidden])) .studio-footer{display:none}
#dashboard:has(.remodel-workspace:not([hidden])) main.studio-main{max-width:1200px;padding:22px 32px 40px;margin:auto}
#dashboard:has(.remodel-workspace:not([hidden])) .studio-header{min-height:60px;padding:12px 32px}
.remodel-workspace .workspace-heading{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;margin:0 0 20px}
.editor-title{display:flex;align-items:center;gap:10px}.editor-title img{width:32px;height:32px}
#dashboard .editor-title h1{font:600 16px/1.2 system-ui;letter-spacing:-.03em;margin:0}
.editor-actions{justify-self:start}.new-room{justify-self:end;border:1px solid var(--line);border-radius:24px;background:var(--paper);color:var(--ink);padding:10px 17px;font:600 12px system-ui;min-height:42px}
.creation-steps{display:flex;align-items:center;justify-content:center;gap:16px;margin:0 auto 28px;width:min(490px,100%)}
.creation-steps button{border:0;background:none;color:var(--muted);font:12px system-ui;display:flex;align-items:center;gap:7px;padding:5px 0;min-height:36px;white-space:nowrap}
.creation-steps button span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--wash);font-size:11px}
.creation-steps button[aria-current=step]{color:var(--ink);font-weight:650}.creation-steps button[aria-current=step] span{background:var(--accent);color:var(--on-accent)}
.creation-steps button:disabled{opacity:.55;cursor:default}.creation-steps i{height:1px;background:var(--line);flex:1;min-width:12px}
.room-welcome{display:grid;grid-template-columns:1.05fr 1fr;border:1px solid var(--line);border-radius:28px;overflow:hidden;background:var(--paper);min-height:530px;box-shadow:0 20px 65px #303b3010}
.welcome-visual{position:relative;min-height:530px;background:var(--wash);overflow:hidden}
.welcome-visual>img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover}
.welcome-visual:after{content:'';position:absolute;inset:55% 0 0;background:linear-gradient(transparent,#19251dd9);pointer-events:none}
.welcome-before{position:absolute;top:22px;left:22px;width:34%;height:32%;border:5px solid #fffdf5;border-radius:16px;box-shadow:0 6px 24px #0003;transform:rotate(-5deg);overflow:hidden;z-index:1}
.welcome-before img{width:100%;height:100%;object-fit:cover}.welcome-before span{position:absolute;bottom:7px;left:7px;background:#fffdf5;color:#334431;border-radius:20px;padding:3px 10px;font-size:10px}
.welcome-after{position:absolute;top:25px;right:22px;border-radius:20px;background:#fffdf5eb;color:#334431;font-size:11px;padding:5px 12px}
.visual-note{position:absolute;bottom:28px;left:28px;right:20px;color:#fffaf0;font:italic 27px/1.3 Fraunces,Georgia,serif;z-index:1}.visual-note small{display:block;margin-top:9px;font:9px system-ui;letter-spacing:.06em;opacity:.8}
.welcome-create{padding:48px 40px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.flow-kicker{font:600 9px/1.5 system-ui;letter-spacing:.13em;color:var(--rust)}
#dashboard .welcome-create h2{font:44px/1.1 Fraunces,Georgia,serif;letter-spacing:-.045em;margin:16px 0 14px}
.welcome-create h2 em,.design-intro h2 em{font-weight:400;color:var(--rust)}
.welcome-create>p{font:14px/1.7 system-ui;color:var(--muted);margin:0 0 26px}
.photo-start{display:grid;grid-template-columns:44px 1fr;gap:5px 14px;text-align:left;align-items:center;width:100%;padding:23px 20px;border:1px dashed var(--rust);border-radius:16px;background:var(--wash);color:var(--ink);cursor:pointer}
.upload-icon{grid-row:1/3;display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:var(--accent);color:var(--on-accent);font-size:26px}
.photo-start strong{font:600 14px system-ui}.photo-start>span:last-child{font:11px system-ui;color:var(--muted)}.photo-start b{margin-left:8px;color:var(--rust)}
.photo-start:hover{box-shadow:0 0 0 3px var(--peach)}.upload-help{font:9px/1.7 system-ui;color:var(--muted);margin:10px 0 24px}
.welcome-reassurance{display:flex;flex-wrap:wrap;gap:12px;font:10px system-ui;color:var(--muted)}
.welcome-create .welcome-cost{font:10px system-ui;margin:22px 0 0;color:var(--muted)}
.remodel-workspace[data-step=photo] .remodel-grid{display:none}
.remodel-workspace:not([data-step=photo]) .room-welcome{display:none}
.remodel-workspace .remodel-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr);gap:40px;align-items:start}
.remodel-workspace .preview-stage{padding:0;position:sticky;top:20px;overflow:hidden;background:var(--wash);border:1px solid var(--line);border-radius:22px;min-width:0}
.remodel-workspace .preview-top{display:flex;justify-content:space-between;padding:17px 20px;margin:0;gap:12px;border-bottom:1px solid var(--line);background:var(--paper)}
#dashboard .preview-top h2{font:600 13px system-ui;margin:0;letter-spacing:0}.canvas-meta{font:9px system-ui;letter-spacing:.12em;color:var(--muted)}
.remodel-workspace .preview-empty{padding:20px;background:none;display:block;border-radius:0}
.remodel-workspace #stage-photo{width:100%;height:clamp(240px,calc(100svh - 380px),490px);object-fit:contain;display:block;border-radius:12px}
.remodel-workspace .preview-caption{padding:16px 0 0;background:none}.preview-caption p{font:italic 19px Fraunces,Georgia,serif;margin:0 0 5px}.preview-caption span{font:11px system-ui;color:var(--muted)}
.remodel-workspace .remodel-controls{padding:0;max-height:none;overflow:visible;background:transparent;border:0}
.design-intro{margin:0 0 20px}#dashboard .design-intro h2{font:35px/1.15 Fraunces,Georgia,serif;letter-spacing:-.035em;margin:8px 0}
.design-intro p{font:12px system-ui;color:var(--muted);margin:0}
.settings-content{padding:0}#remodel-notice:empty{display:none}
.remodel-workspace .upload-zone{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;min-height:0;padding:10px 12px;margin:0 0 20px;border:1px solid var(--line);border-radius:12px;background:var(--paper);text-align:left}
.remodel-workspace .upload-zone:has(#photo-preview:not([hidden])){display:grid;grid-template-columns:44px 1fr auto;min-height:0}
.remodel-workspace #photo-preview{grid-row:auto;width:44px;height:42px;border-radius:7px}
.upload-zone>span{min-width:0}.upload-zone strong,.upload-zone small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.upload-zone strong{font:600 11px system-ui}.upload-zone small{font:9px system-ui;margin-top:4px;color:var(--muted)}
.remodel-workspace .upload-zone .choose-photo{grid-column:3!important;font:11px system-ui;color:var(--rust);text-decoration:underline}
.remodel-workspace .style-ideas{border:0;margin:0 0 16px;padding:0;min-width:0}.remodel-workspace .style-ideas legend{font:600 12px system-ui;padding:0;margin-bottom:10px;width:100%;display:flex;justify-content:space-between}.style-ideas legend>span,.prompt-label>span{font:10px system-ui;color:var(--muted);font-weight:400}
.remodel-workspace .visual-styles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.remodel-workspace .visual-styles button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:86px;border:1px solid var(--line);border-radius:13px;background:var(--paper);color:var(--ink);padding:12px 5px;font:11px system-ui}
.style-palette{display:flex;justify-content:center;isolation:isolate}.style-palette i{width:27px;height:27px;border-radius:50%;background:var(--swatch);border:2px solid var(--paper);box-shadow:0 1px 4px #0001}.style-palette i+i{margin-left:-7px}
.style-check{display:none;position:absolute;right:5px;top:4px;color:var(--rust);font-size:10px}
.remodel-workspace .visual-styles button[aria-pressed=true]{border-color:var(--rust);background:var(--peach);box-shadow:inset 0 0 0 1px var(--rust)}.visual-styles button[aria-pressed=true] .style-check{display:block}
.remodel-workspace .more-styles{margin-top:8px!important}.more-styles summary{font-size:11px;min-height:32px;padding:8px 0;color:var(--rust)}.more-styles .style-chips button{min-height:40px}
.remodel-workspace .prompt-label{display:flex;justify-content:space-between;align-items:center;margin:0 0 8px;font:600 12px system-ui}
.remodel-workspace textarea{width:100%;height:85px;min-height:85px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);padding:12px;font:13px/1.5 system-ui;resize:vertical}
.remodel-workspace .design-details{margin:8px 0 0!important;font:10px/1.6 system-ui;color:var(--muted)}.design-details summary{min-height:24px;cursor:pointer}
.remodel-workspace .create-area{position:static;padding:14px 0 0;background:transparent;border:0}.remodel-workspace .create-area .tool-primary{margin:0;display:flex;flex-direction:row;justify-content:space-between;min-height:54px;border-radius:14px;padding:14px 19px}.create-area .create-label{font-weight:600;font-size:13px}.create-area>p{font:9px system-ui;color:var(--muted);text-align:center;margin:8px 0 0}
.remodel-workspace[data-step=result] .remodel-grid{display:block;max-width:1000px;margin:auto}.remodel-workspace[data-step=result] .remodel-controls{display:none}.remodel-workspace[data-step=result] .preview-stage{position:relative;top:auto}
.remodel-workspace .design-result{padding:18px}.remodel-workspace .result-toolbar{margin-bottom:14px;display:flex;align-items:center;justify-content:space-between;gap:8px}.comparison-tabs button{min-height:40px}.remodel-workspace .result-images{display:flex;align-items:center;gap:8px;background:var(--wash)}.result-images figure{flex:1;min-width:0}.remodel-workspace .result-images img{height:clamp(220px,calc(100svh - 420px),590px);width:100%;object-fit:contain}.result-images figcaption{font-size:10px}
.result-next{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:14px}.result-next>span{font:italic 16px Fraunces,Georgia,serif;color:var(--muted)}.remodel-workspace .try-again{margin:0;padding:12px 18px;min-height:44px;border:1px solid var(--line);border-radius:24px;background:var(--paper);color:var(--ink);font:600 11px system-ui;text-decoration:none}
.remodel-workspace .generation-progress{padding:20px;display:flex;gap:13px;align-items:center;border-top:1px solid var(--line);background:var(--paper)}.generation-progress strong{font-size:14px}.generation-progress p{font-size:11px;margin-bottom:0}.drag-over{outline:3px solid var(--rust);outline-offset:4px}
@media(max-width:1000px){.remodel-card-body{display:flex}.welcome-create{padding:28px}#dashboard .welcome-create h2{font-size:36px}.welcome-reassurance{flex-direction:column;gap:8px}.remodel-workspace .remodel-grid{gap:24px;grid-template-columns:minmax(0,1fr) minmax(320px,1fr)}}
@media(max-width:760px){
 .remodel-card-body{gap:12px}.card-example img{height:85px}
 #dashboard:has(.remodel-workspace:not([hidden])) .studio-header{padding:10px 16px;min-height:54px}#dashboard:has(.remodel-workspace:not([hidden])) .studio-header .brand{font-size:23px}
 #dashboard:has(.remodel-workspace:not([hidden])) main.studio-main{padding:14px 16px 30px}
 .remodel-workspace .workspace-heading{grid-template-columns:1fr auto;margin-bottom:12px;gap:10px}.editor-actions{grid-row:1;grid-column:1}.editor-title{grid-row:2;grid-column:1}.new-room{grid-row:2;grid-column:2;padding:8px 12px;font-size:11px;min-height:38px}.editor-title img{width:27px;height:27px}#dashboard .editor-title h1{font-size:14px}.editor-actions .back-button{font-size:11px;padding:0;min-height:22px}
 .creation-steps{gap:8px;margin-bottom:16px}.creation-steps button{font-size:10px;gap:5px}.creation-steps button span{width:21px;height:21px;font-size:10px}.creation-steps i{min-width:6px}
 .room-welcome{display:flex;flex-direction:column;border-radius:20px;min-height:0}.welcome-visual{min-height:190px;height:190px}.welcome-visual>img{object-position:center 56%}.welcome-before{top:13px;left:15px;width:30%;height:66%;border-width:3px;border-radius:10px}.welcome-after{top:13px;right:13px;font-size:9px;padding:4px 9px}.visual-note{bottom:13px;left:auto;right:15px;width:57%;font-size:18px;text-align:right}.visual-note small{font-size:7px;margin-top:5px}
 .welcome-create{padding:22px;align-items:stretch}.welcome-create>.flow-kicker{font-size:8px}#dashboard .welcome-create h2{font-size:33px;margin:8px 0 10px}.welcome-create h2 br{display:none}.welcome-create>p{font-size:12px;margin-bottom:18px}.welcome-create>p br{display:none}.photo-start{padding:17px 13px;grid-template-columns:36px 1fr;gap:5px 11px}.upload-icon{width:36px;height:36px;font-size:22px;border-radius:10px}.photo-start strong{font-size:12px}.photo-start>span:last-child{font-size:10px}.upload-help{font-size:8px;margin:8px 0 0}.welcome-reassurance{display:none}.welcome-create .welcome-cost{font-size:9px;margin:12px 0 0}
 .remodel-workspace .remodel-grid{display:block}.remodel-workspace[data-step=design] .preview-stage{display:none}.remodel-workspace .remodel-controls{padding-bottom:86px}
 .design-intro{margin:0 0 13px}.design-intro .flow-kicker{display:none}#dashboard .design-intro h2{font-size:29px;margin:0 0 6px}.design-intro p{font-size:11px}
 .remodel-workspace .upload-zone,.remodel-workspace .upload-zone:has(#photo-preview:not([hidden])){margin:0 0 13px;padding:8px 10px;grid-template-columns:39px 1fr auto;gap:10px}.remodel-workspace #photo-preview{width:39px;height:38px}
 .remodel-workspace .visual-styles{gap:7px}.remodel-workspace .visual-styles button{min-height:70px;gap:7px;padding:9px 3px;font-size:10px;border-radius:11px}.style-palette i{width:23px;height:23px}.remodel-workspace .style-ideas{margin-bottom:10px}.remodel-workspace .style-ideas legend{margin-bottom:8px;font-size:11px}.style-ideas legend>span{font-size:9px}.remodel-workspace .more-styles{margin-top:4px!important}.more-styles summary{font-size:10px;min-height:28px;padding:6px 0}
 .remodel-workspace .prompt-label{font-size:11px;margin-bottom:7px}.prompt-label>span{font-size:9px}.remodel-workspace textarea{font-size:16px;height:72px;min-height:72px;padding:10px;line-height:1.4}.remodel-workspace .design-details{font-size:9px;margin-top:5px!important}
 .remodel-workspace .create-area{position:fixed;left:0;right:0;bottom:0;z-index:5;background:var(--bg);border-top:1px solid var(--line);padding:10px 16px max(9px,env(safe-area-inset-bottom))}.remodel-workspace .create-area .tool-primary{min-height:50px}.create-area>p{font-size:8px;margin-top:5px}
 .remodel-workspace .preview-top{padding:12px 14px}.remodel-workspace .preview-top h2{font-size:12px}.canvas-meta{font-size:8px}.remodel-workspace .design-result{padding:12px}.comparison-tabs{gap:0}.comparison-tabs button{font-size:9px;padding:8px;min-height:38px}.result-toolbar .tool-secondary{font-size:9px;padding:9px;min-height:38px}.remodel-workspace .result-images img{height:clamp(180px,calc(100svh - 410px),440px)}.result-images figcaption{padding:6px;font-size:9px}.result-next{flex-direction:column;gap:10px;margin-top:10px}.result-next>span{display:none}.remodel-workspace .try-again{width:100%;min-height:44px}.remodel-workspace #stage-photo{height:clamp(180px,calc(100svh - 430px),400px)}.remodel-workspace .preview-caption{display:none}
}
@media(max-width:760px) and (max-height:720px){.welcome-visual{height:140px;min-height:140px}.welcome-create{padding:17px}.welcome-create>.flow-kicker{display:none}#dashboard .welcome-create h2{font-size:28px;margin-top:0}.welcome-create>p{margin-bottom:13px}.photo-start{padding:14px 12px}.remodel-workspace .workspace-heading{margin-bottom:8px}.creation-steps{margin-bottom:10px}.design-intro p{display:none}.design-intro{margin-bottom:10px}#dashboard .design-intro h2{font-size:26px}.remodel-workspace .visual-styles button{min-height:62px;gap:5px}.style-palette i{width:20px;height:20px}.remodel-workspace .upload-zone,.remodel-workspace .upload-zone:has(#photo-preview:not([hidden])){margin-bottom:10px}}
