:root{--primary:#0f5d4a;--primary-2:#1f7a61;--accent:#2563eb;--danger:#b42318;--surface:#fff;--surface-2:#f7fafb;--surface-3:#eef3f6;--text:#16212d;--muted:#5f6c79;--border:#d9e1e8;--shadow:0 16px 32px rgba(15,23,42,.08);--topbar:80px;--left:430px;--right:360px;--font:Inter,Roboto,"Segoe UI",Arial,sans-serif;--mapbg:#dce8ef}
body[data-theme='dark']{--surface:#15202b;--surface-2:#1b2a37;--surface-3:#243546;--text:#edf4fa;--muted:#b8c6d3;--border:#334a5d;--shadow:0 16px 32px rgba(0,0,0,.28);--mapbg:#101820;background:linear-gradient(180deg,#0f1720,#13202b)}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:var(--font);background:radial-gradient(circle at top left,#f7fafc 0,#eaf0f4 55%,#e3ebf0 100%);color:var(--text)}
button,input,textarea,select{font:inherit}button{border:none;background:var(--primary);color:#fff;border-radius:14px;padding:.82rem .98rem;cursor:pointer;transition:transform .08s ease,filter .18s ease}button:hover{filter:brightness(.99)}button:active{transform:translateY(1px)}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid rgba(37,99,235,.22);outline-offset:2px}
button:disabled{opacity:.55;cursor:not-allowed;filter:none;transform:none}
.secondary-btn{background:var(--surface-3);color:var(--text);border:1px solid var(--border)}.ghost-btn{background:transparent;color:var(--text);border:1px dashed var(--border)}.danger-btn{background:var(--danger)}.link-btn{background:transparent;color:var(--accent);padding:.2rem 0;border:none;border-radius:0}
.topbar{height:var(--topbar);display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.5rem;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:1000}
.brand{display:flex;align-items:center;gap:1rem}.brand-mark{width:50px;height:50px;border-radius:16px;display:grid;place-items:center;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--primary),var(--primary-2));box-shadow:var(--shadow)}.brand h1{margin:0;font-size:1.35rem}.brand p{margin:.22rem 0 0;color:var(--muted);font-size:.95rem}
.topbar-actions{display:flex;align-items:center;gap:.75rem}.save-badge,.count-pill,.flow-status{display:inline-flex;align-items:center;justify-content:center;min-height:2.1rem;padding:0 .9rem;border-radius:999px;font-size:.85rem;font-weight:700}.save-badge{background:#ebf6f1;color:#0f5d4a;border:1px solid #d0eadf}.count-pill{background:#ecf7f2;color:#0f5d4a;border:1px solid #d7efe5}.flow-status{background:var(--surface-3);color:var(--text);border:1px solid var(--border)}
.topbar-select{border:1px solid var(--border);border-radius:14px;background:var(--surface);color:var(--text);padding:.78rem .95rem;min-width:180px}.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.app-shell{display:grid;grid-template-columns:var(--left) minmax(0,1fr) var(--right);height:calc(100vh - var(--topbar))}
.side-panel{overflow:auto;padding:1rem;background:var(--surface-2)}.left-panel{border-right:1px solid var(--border)}.right-panel{border-left:1px solid var(--border)}.map-panel{padding:1rem;min-width:0}
#map{width:100%;height:100%;border-radius:24px;border:1px solid var(--border);box-shadow:var(--shadow);background:var(--mapbg)}
.panel{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:20px;padding:1rem;margin-bottom:1rem}.compact-panel{padding:.95rem}.panel h2,.workflow-head h2{margin:0;font-size:1.05rem}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.workflow-panel{padding:1rem 1rem 1.1rem}.workflow-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:.85rem}.workflow-hint{margin:.3rem 0 0;color:var(--muted);font-size:.9rem}
.stepper{position:relative;margin-bottom:.95rem;padding-top:.2rem}.stepper-track,.stepper-fill{position:absolute;left:0;right:0;top:11px;height:4px;border-radius:999px}.stepper-track{background:var(--surface-3)}.stepper-fill{width:0;background:linear-gradient(90deg,var(--primary),var(--primary-2));transition:width .28s ease}.stepper-dots{display:grid;grid-template-columns:repeat(4,1fr);position:relative;z-index:1}.step-dot{width:22px;height:22px;border-radius:999px;background:var(--surface);border:2px solid var(--border);display:block;margin:0 auto;transition:all .2s ease}.step-dot.active{background:var(--primary);border-color:var(--primary)}.step-dot.done{background:#dcefe8;border-color:var(--primary)}
.flow-card{border:1px solid var(--border);border-radius:16px;background:var(--surface);padding:1rem;animation:fadeIn .18s ease}.flow-card[hidden]{display:none}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.75rem}.card-head h3{margin:0;font-size:1rem}.screen-state{font-size:.84rem;color:var(--muted)}.top-actions{margin-bottom:.5rem}
.choice-grid,.tool-grid,.feature-actions,.action-row{display:flex;flex-wrap:wrap;gap:.75rem}.choice-grid>button,.action-row>button,.tool-grid>button{flex:1 1 120px}
.choice-btn,.theme-card,.subtype-card,.feature-main{background:var(--surface);color:var(--text);border:1px solid var(--border);box-shadow:none}.choice-btn.selected,.theme-card.selected,.subtype-card.selected{background:linear-gradient(180deg,#ebf6f1,#daf0e6)!important;border-color:#b8dfcf!important;color:#0f5d4a!important}
body[data-theme='dark'] .choice-btn.selected,body[data-theme='dark'] .theme-card.selected,body[data-theme='dark'] .subtype-card.selected{background:linear-gradient(180deg,#1e5d4f,#214d44)!important;color:#eaf8f1!important;border-color:#3b8c75!important}
.theme-list,.subtype-list{display:grid;gap:.65rem}.theme-card,.subtype-card{text-align:left;padding:.8rem .9rem;border-radius:14px}.theme-card strong,.subtype-card strong{display:block;margin-bottom:.2rem;font-size:.95rem}.theme-card span,.subtype-card span{display:block;color:var(--muted);font-size:.86rem;line-height:1.3}
.auto-labels{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:.9rem}.auto-label-card{border:1px solid var(--border);border-radius:16px;background:var(--surface-2);padding:.8rem .9rem}.auto-label-card span{display:block;color:var(--muted);font-size:.84rem;margin-bottom:.2rem}
label{display:block;font-weight:700;margin:0 0 .45rem}input[type='text'],input[type='search'],textarea,select{width:100%;border:1px solid var(--border);border-radius:14px;background:var(--surface);padding:.82rem .95rem;color:var(--text)}textarea{resize:vertical;min-height:100px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-top:.9rem}.selection-card{border:1px solid var(--border);border-radius:16px;background:var(--surface-2);padding:.8rem .9rem}.selection-card span{display:block;color:var(--muted);font-size:.84rem;margin-bottom:.2rem}.selection-card strong{display:block}
.mini-status-card{background:var(--surface-2);border:1px solid var(--border);border-radius:16px;padding:.85rem;display:grid;gap:.45rem;margin:1rem 0}.mini-status-card div{display:flex;justify-content:space-between;gap:1rem}.mini-status-card span{color:var(--muted)}.postdraw-fields[hidden]{display:none}
.small-hint{margin:.1rem 0 .8rem;color:var(--muted);font-size:.88rem;line-height:1.4}.bottom-action{margin-top:1rem}
.action-stack{display:flex;flex-direction:column;gap:.7rem;margin-bottom:.8rem}.empty-state{background:var(--surface-2);border:1px dashed var(--border);border-radius:16px;padding:1rem;color:var(--muted)}
.feature-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.75rem}.feature-item{overflow:hidden;border-radius:18px;border:1px solid var(--border);background:var(--surface)}.feature-main{width:100%;border:none;border-radius:0;background:var(--surface);color:var(--text);text-align:left;padding:1rem;border-bottom:1px solid var(--border)}.feature-title{display:block;font-weight:800;margin-bottom:.25rem}.feature-meta{display:block;color:var(--muted);font-size:.92rem;line-height:1.45}.feature-actions{padding:.85rem 1rem}.tiny-btn{font-size:.9rem;padding:.55rem .75rem;border-radius:12px}
.map-label{background:rgba(255,255,255,.92);border:1px solid rgba(15,32,43,.12);border-radius:10px;padding:.18rem .42rem;font-size:.76rem;font-weight:700;color:#18232d;box-shadow:0 4px 10px rgba(15,23,42,.08)}.mobile-only{display:none}
@media (max-width:1320px){:root{--left:400px;--right:320px}.two-col,.auto-labels{grid-template-columns:1fr}}
@media (max-width:980px){.app-shell{grid-template-columns:1fr;grid-template-rows:auto minmax(360px,1fr) auto}.left-panel,.right-panel{border:none}.left-panel{border-bottom:1px solid var(--border)}.right-panel{border-top:1px solid var(--border)}.mobile-only{display:inline-flex}}
@media (max-width:640px){.brand p{display:none}.left-panel.is-collapsed,.right-panel.is-collapsed{display:none}.topbar-select{min-width:140px}}