/* Editor studio: one workspace, one inspector, restrained state colors. */
:root {
    --studio-shadow: 0 16px 48px rgba(35, 49, 57, .09), 0 2px 6px rgba(35, 49, 57, .03);
    --green: #16856b;
    --green-bg: #edf7f2;
    --text-soft: #74828e;
    --surface-base: #edf0ed;
}
:root[data-theme="dark"] {
    --studio-shadow: 0 16px 48px rgba(0, 0, 0, .25);
    --green: #65c8a8;
    --green-bg: #15342e;
    --text-soft: #8a9ba9;
}
.header { border-bottom: 1px solid var(--border-subtle); background: var(--surface-elevated); }
.header .logo { letter-spacing: -.04em; }
.address-pill { border: 1px solid var(--border-subtle); background: var(--surface-muted); }
.demo-buy-btn { box-shadow: none !important; font-weight: 700; border-radius: 12px; }
.wizard-panel { background: var(--surface-elevated); backdrop-filter: none; -webkit-backdrop-filter: none; }
.wizard-progress { padding: 22px 24px 18px; background: transparent; }
.progress-steps { margin-bottom: 15px; }
.progress-step { font-size: 12px; color: var(--gray-500); }
.progress-step-num { width: 26px; height: 26px; background: var(--surface-muted); border: 1px solid var(--border-subtle); }
.progress-step.active .progress-step-num, .progress-step.completed .progress-step-num { border-color: transparent; }
.progress-bar-track { height: 3px; background: var(--gray-100); }
.progress-bar-fill { background: var(--blue); }
.kpi-bar { padding: 22px 18px; background: var(--surface-muted); }
.kpi-value { font-size: 18px; letter-spacing: -.035em; }
.kpi-label { font-size: 9px; letter-spacing: .075em; color: var(--gray-500); margin-top: 4px; }
.kpi-divider { height: 30px; }
.step-panel { padding: 26px 24px; }
.step-title { font-size: 23px; letter-spacing: -.045em; font-weight: 700; }
.step-subtitle { font-size: 12px; line-height: 1.6; color: var(--gray-500); }
.step-header { margin-bottom: 24px; }
.system-category-badge, .placement-mode-toggle, .orientation-toggle, .fill-mode-toggle {
    padding: 4px; border-radius: 12px; background: var(--surface-muted); border: 1px solid var(--border-subtle);
}
.category-option { min-height: 42px; color: var(--gray-600) !important; opacity: 1; }
.category-option .category-icon { filter: grayscale(1); opacity: .7; }
[data-active="balkon"] .category-option.balkon, [data-active="pv"] .category-option.pv { color: var(--blue) !important; }
.module-count-value, .battery-slider-value { background: var(--surface-muted); border: 1px solid var(--border-subtle); border-radius: 10px; font-size: 16px; }
.module-count-label, .battery-slider-label { font-weight: 600; color: var(--gray-700); }
.system-info-box.pv, .system-info-box.balkon { background: transparent; border: 0; border-left: 2px solid var(--blue); border-radius: 0; padding: 4px 0 4px 15px; margin: 20px 0 24px; }
.system-info-box h4 { font-weight: 700; }
.system-info-box li { color: var(--gray-600); line-height: 1.65; }
.system-info-box .info-hint { font-style: normal; color: var(--gray-500); font-size: 11px; }
.wizard-footer { padding: 18px 24px; background: var(--surface-elevated); border-top: 1px solid var(--border-subtle); }
.nav-btn { border-radius: 12px; min-height: 48px; font-weight: 700; transition: background .18s, transform .18s; }
.nav-btn-next { background: var(--blue); box-shadow: 0 5px 14px color-mix(in srgb, var(--blue) 17%, transparent); }
.nav-btn:active { transform: translateY(1px); }
.stat-card { border: 1px solid var(--border-subtle); border-radius: 16px; box-shadow: none; }
.stat-card-value { letter-spacing: -.045em; }
.config-summary { border-radius: 12px; background: var(--surface-muted); padding: 16px; }
.recognition-notice { border-radius: 12px; }
.scene-details-trigger { display:flex; align-items:center; gap:8px; min-height:44px; padding:0 14px; border:1px solid var(--border-subtle); border-radius:14px; background:var(--surface-elevated); color:var(--gray-800); font:700 12px var(--font); box-shadow:var(--studio-shadow); cursor:pointer; }
.scene-details-trigger[hidden] { display:none; }
.scene-details-trigger svg { width:19px; height:19px; color:var(--blue); }
.scene-details-trigger[aria-expanded="true"] { border-color:var(--blue); background:var(--blue-bg); }
.scene-details-dot { width:6px; height:6px; border-radius:50%; background:var(--green); }
.scene-layer-controls { position:absolute; top:104px; right:0; width:340px; padding:20px; border-radius:20px; background:var(--surface-elevated); border:1px solid var(--border-subtle); box-shadow:var(--studio-shadow); backdrop-filter:none; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-6px); transition:opacity .18s, transform .18s, visibility .18s; max-height:calc(100dvh - 200px); overflow-y:auto; overscroll-behavior:contain; }
.scene-layer-controls.is-open { opacity:1; visibility:visible; pointer-events:auto; transform:none; }
.scene-layer-controls { position:fixed; z-index:2101; }
.scene-layer-controls.needs-choice .scene-details-result,
.scene-layer-controls.needs-choice .scene-details-help,
.scene-layer-controls.needs-choice .scene-details-note { display:none; }
.scene-details-header { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.scene-details-eyebrow { font-size:10px; font-weight:700; letter-spacing:.1em; color:var(--gray-500); }
.scene-details-header h2 { font-size:21px; letter-spacing:-.04em; margin:4px 0 0; color:var(--gray-900); }
.scene-details-close { width:44px; height:44px; border:0; border-radius:50%; font:26px var(--font); background:var(--surface-muted); color:var(--gray-600); cursor:pointer; flex-shrink:0; }
.scene-details-intro { font-size:12px; line-height:1.5; color:var(--gray-500); margin:10px 0 18px; }
.scene-layer-toggle { min-height:76px; grid-template-columns:32px minmax(0,1fr) 38px; gap:10px; padding:12px 0; border-radius:0; border-top:1px solid var(--border-subtle); }
.scene-layer-toggle + .scene-layer-toggle { margin:0; }
.scene-layer-icon { width:32px; height:32px; background:var(--surface-muted); border-radius:10px; }
.scene-layer-name { font-size:13px; display:flex; align-items:center; gap:7px; }
.scene-layer-state { font-size:10px; font-weight:600; color:var(--gray-500); }
.scene-layer-toggle[aria-pressed="true"] .scene-layer-state { color:var(--blue); }
.scene-layer-description { white-space:normal; font-size:11px; line-height:1.5; margin-top:4px; }
.scene-layer-switch { width:38px; height:22px; }
.scene-layer-switch::after { width:16px; height:16px; }
.scene-layer-toggle[aria-pressed="true"] .scene-layer-switch::after { transform:translateX(16px); }
.scene-details-result { margin-top:12px; padding:12px; border-radius:10px; background:var(--blue-bg); color:var(--blue); font-size:12px; line-height:1.5; font-weight:650; }
.scene-details-result:empty { display:none; }
.scene-details-help { font-size:11px; line-height:1.6; color:var(--gray-600); margin:12px 0; }
.scene-layer-controls:not(.has-obstacles) .scene-details-help,
.scene-layer-controls:not(.has-obstacles) .scene-details-note { display:none; }
.scene-details-note { padding-top:14px; margin-top:14px; border-top:1px solid var(--border-subtle); color:var(--gray-500); font-size:11px; line-height:1.6; }
.scene-details-note strong { color:var(--gray-700); font-weight:700; }
.scene-details-note p { margin:4px 0 0; }
.scene-layer-controls .obstacle-prompt { display:none; position:static; width:auto; max-height:none; padding:14px; margin:12px 0 0; border:0; border-radius:12px; box-shadow:none; background:var(--surface-muted); color:var(--gray-800); backdrop-filter:none; transform:none; }
.scene-layer-controls .obstacle-prompt.visible { display:block; }
.scene-layer-controls .obstacle-prompt-title { font-size:15px; line-height:1.4; color:var(--gray-900); }
.scene-layer-controls .obstacle-prompt-copy { font-size:12px; line-height:1.6; color:var(--gray-600); }
.scene-layer-controls .obstacle-prompt-actions { flex-direction:column; }
.scene-layer-controls .obstacle-prompt-action { min-height:44px; width:100%; border-radius:9px; }
.scene-details-backdrop { display:none; }
.scene-details-trigger:focus-visible,.scene-details-close:focus-visible { outline:3px solid var(--blue); outline-offset:3px; }
.recognition-notice { padding:14px; background:var(--surface-muted); border:1px solid var(--border-subtle); grid-template-columns:20px minmax(0,1fr); }
.recognition-notice-icon { color:var(--blue); }
.recognition-notice-title { font-size:12px; }
.recognition-notice-copy,.recognition-notice-status { font-size:11px; line-height:1.55; }
:root[data-theme="dark"] .scene-details-result { background:#152D48; color:#A8CDFF; }
:root[data-theme="dark"] .scene-layer-toggle[aria-pressed="true"] .scene-layer-icon { background:#152D48; color:#A8CDFF; }
@media (max-width:600px) {
    body.scene-details-open .demo-buy-mobile { visibility:hidden; pointer-events:none; }
    .scene-layer-controls { position:fixed; inset:auto 12px 12px; width:auto; max-height:calc(100dvh - 110px); padding:20px 20px calc(20px + env(safe-area-inset-bottom)); border-radius:24px; transform:translateY(16px); z-index:2101; }
    .scene-layer-controls::before { content:''; display:block; width:36px; height:4px; border-radius:3px; background:var(--gray-200); margin:-8px auto 16px; }
    .scene-details-backdrop:not([hidden]) { display:block; position:fixed; inset:0; z-index:2000; border:0; background:rgba(15,23,42,.28); backdrop-filter:blur(2px); }
    .scene-layer-toggle { min-height:78px; }
    .scene-details-intro,.scene-layer-description,.scene-details-help,.scene-details-note { font-size:12px; }
}
@media (prefers-reduced-motion:reduce) { .scene-layer-controls { transition:none; } }
:root[data-theme="dark"] [data-active="pv"] .category-option.pv,
:root[data-theme="dark"] [data-active="balkon"] .category-option.balkon { color: #fff !important; }
.viewport::after {
    content: 'Ziehen zum Drehen · Scrollen zum Zoomen';
    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
    padding: 9px 14px; border-radius: 20px; background: var(--surface-glass-strong);
    border: 1px solid var(--border-subtle); color: var(--gray-600); font-size: 11px;
    white-space: nowrap; pointer-events: none; z-index: 2;
}
@media (min-width: 901px) {
    .main-content { padding: 16px; gap: 16px; }
    .viewport { border-radius: 22px; overflow: hidden; }
    .wizard-panel { width: 396px; margin: 0; border: 1px solid var(--border-subtle); border-radius: 22px; box-shadow: var(--studio-shadow); }
    .header { padding-left: 30px; padding-right: 30px; }
}
@media (max-width: 600px) {
    .viewport::after { display: none; }
    .mobile-kpi-overlay { background: var(--surface-glass-strong); border-bottom: 1px solid var(--border-subtle); }
    .mobile-kpi-overlay .logo { letter-spacing: -.04em; }
    .mobile-address-btn { border-radius: 10px; }
    .wizard-panel { border-radius: 24px 24px 0 0; border: 1px solid var(--border-subtle); border-bottom: 0; box-shadow: 0 -8px 40px rgba(35,49,57,.10); }
    .sheet-handle { padding-top: 12px; }
    .sheet-handle-bar { background: var(--gray-300); width: 36px; height: 4px; border-radius: 4px; }
    .sheet-handle-hint { font-size: 11px; }
    .wizard-progress { padding: 12px 18px; }
    .progress-steps { margin-bottom: 10px; }
    .step-panel { padding: 22px 20px; }
    .step-title { font-size: 22px; }
    .step-subtitle { font-size: 12px; }
    .mini-controls { background: var(--surface-elevated); padding-left: 18px; padding-right: 18px; }
    .wizard-footer { padding: 12px 18px; }
    .nav-btn { min-height: 46px; }
    .category-option { padding: 8px; }
    .system-info-box { margin-top: 18px; margin-bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .step-panel { animation: none; }
    .nav-btn, .progress-bar-fill { transition: none; }
}