: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}
.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)}
.tiny-btn{font-size:.9rem;padding:.55rem .75rem;border-radius:12px}
.tool-btn,.subtype-btn,.theme-tab,.feature-main{background:var(--surface);color:var(--text);border:1px solid var(--border);box-shadow:none}
.tool-btn.selected,.subtype-btn.selected,.theme-tab.selected{background:linear-gradient(180deg,#ebf6f1,#daf0e6)!important;border-color:#b8dfcf!important;color:#0f5d4a!important}
body[data-theme='dark'] .tool-btn.selected,body[data-theme='dark'] .subtype-btn.selected,body[data-theme='dark'] .theme-tab.selected{background:linear-gradient(180deg,#1e5d4f,#214d44)!important;color:#eaf8f1!important;border-color:#3b8c75!important}
.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,.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}.badge{background:#eef5ff;color:#2563eb;border:1px solid #d5e3ff}.count-pill{background:#ecf7f2;color:#0f5d4a;border:1px solid #d7efe5}.flow-status{background:var(--surface-3);color:var(--text);border:1px solid var(--border)}
.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{margin:0 0 .55rem;font-size:1.02rem}.flow-head,.panel-head,.step-title-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.muted{color:var(--muted);font-size:.9rem;margin:0 0 .8rem}.compact-text{margin-bottom:0}
.flow-card{display:grid;gap:.75rem}
.progress-wrap{margin:0 0 .1rem}.progress-bar{width:100%;height:10px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);overflow:hidden}.progress-fill{height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg,var(--primary),var(--primary-2));transition:width .28s ease}.progress-text{margin-top:.45rem;color:var(--muted);font-size:.84rem}
.drawer-step{border:1px solid var(--border);border-radius:16px;background:var(--surface);overflow:hidden;transition:border-color .22s ease,box-shadow .22s ease,opacity .22s ease}
.drawer-step.locked{opacity:.48}
.drawer-step.open{border-color:#bfd6ff;box-shadow:0 0 0 3px rgba(37,99,235,.08)}
.drawer-header{width:100%;display:flex;align-items:center;justify-content:space-between;text-align:left;background:var(--surface);color:var(--text);border:none;border-radius:0;padding:.9rem 1rem}
.drawer-body{max-height:0;overflow:hidden;transition:max-height .32s ease}
.drawer-step.open .drawer-body{max-height:520px}
.drawer-inner{padding:0 1rem 1rem}
.step-state{font-size:.82rem;color:var(--muted)}
.tool-select-grid,.tool-grid,.feature-actions,.draw-row{display:flex;flex-wrap:wrap;gap:.7rem}
.tool-select-grid>button,.draw-row>button,.tool-grid>button{flex:1 1 120px}
.theme-tabs,.subtype-grid{display:grid;grid-template-columns:1fr;gap:.65rem}
.theme-tab,.subtype-btn{text-align:left;padding:.8rem .9rem}
.theme-tab strong,.subtype-btn strong{display:block;margin-bottom:.2rem;font-size:.95rem}
.theme-tab span,.subtype-btn span{display:block;color:var(--muted);font-size:.86rem;line-height:1.3}
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:90px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}.compact-grid{margin-top:.9rem}
.draft-summary{background:var(--surface-2);border:1px solid var(--border);border-radius:16px;padding:.85rem;display:grid;gap:.45rem;margin:1rem 0}.draft-summary div{display:flex;justify-content:space-between;gap:1rem}.draft-summary span{color:var(--muted)}
.compact-summary{margin-bottom:.85rem}
.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}
.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)}
.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}
.mobile-only{display:none}
@media (max-width:1320px){:root{--left:400px;--right:320px}.two-col{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}}

.flow-card{
  gap:.6rem;
}
.drawer-step{
  border-radius:14px;
  transition:border-color .22s ease, box-shadow .22s ease, opacity .22s ease, transform .24s ease;
  transform:translateY(0);
}
.drawer-step.open{
  transform:translateY(-1px);
}
.drawer-body{
  max-height:0;
  overflow:hidden;
  transition:max-height .34s ease, opacity .24s ease;
  opacity:.0;
}
.drawer-step.open .drawer-body{
  max-height:560px;
  opacity:1;
}
.drawer-header{
  padding:.82rem .95rem;
}
.drawer-inner{
  padding:0 .95rem .95rem;
}
.progress-wrap{
  margin:.05rem 0 .1rem;
}
.progress-text{
  font-size:.82rem;
}
.draft-summary{
  gap:.35rem;
}