:root{
  color-scheme:light;
  --nav:#263241;
  --nav-soft:#344355;
  --canvas:#f1f3f6;
  --surface:#fff;
  --surface-soft:#f8f9fb;
  --line:#dce1e7;
  --line-strong:#c8d0da;
  --text:#283443;
  --muted:#7b8794;
  --accent:#178c7b;
  --accent-dark:#0f6f62;
  --accent-soft:#e2f4f0;
  --danger:#c63b4a;
  --shadow:0 7px 22px rgba(34,49,65,.09);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--canvas);color:var(--text);font:14px/1.45 Inter,Segoe UI,system-ui,sans-serif}
button,input,select{font:inherit}
button{cursor:pointer}
h1,h2,p{margin-top:0}
header{
  height:68px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:0 24px;
  background:var(--surface);
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:20
}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{width:40px;height:40px;display:grid;place-items:center;border-radius:5px;background:var(--accent);color:#fff;font-size:13px;font-weight:900;letter-spacing:.06em}
.brand h1{font-size:20px;margin:0}
.eyebrow{display:block;font-size:10px;letter-spacing:.13em;font-weight:800;color:var(--muted);margin-bottom:2px}
.header-actions{display:flex;align-items:center;gap:9px}
.header-search{width:260px;height:38px;display:flex;align-items:center;border:1px solid var(--line);border-radius:4px;background:var(--surface-soft);color:var(--muted);padding:0 12px}
main{padding:0;min-height:calc(100vh - 68px)}
.panel{max-width:430px;margin:9vh auto;padding:34px;background:var(--surface);border:1px solid var(--line);border-radius:7px;box-shadow:0 24px 70px rgba(20,31,44,.16)}
.panel h2{font-size:27px;margin-bottom:8px}
.panel p{color:var(--muted)}
label{display:block;color:#5e6b78;font-size:12px;font-weight:700;margin:13px 0 6px}
input,select{width:100%;height:40px;padding:0 11px;background:#fff;color:var(--text);border:1px solid var(--line-strong);border-radius:4px;margin-bottom:9px;outline:0}
input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
button{padding:10px 15px;background:var(--accent);color:#fff;border:0;border-radius:4px;font-weight:700}
button:hover{background:var(--accent-dark)}
.secondary-button{background:var(--surface);color:#536171;border:1px solid var(--line);box-shadow:none}
.secondary-button:hover{background:var(--surface-soft);color:var(--text)}
.panel form button{width:100%;margin-top:8px}
.error{color:var(--danger)}
#workspace{min-height:calc(100vh - 68px)}
.status{height:42px;display:flex;align-items:center;padding:0 20px;background:var(--surface);border-bottom:1px solid var(--line);color:var(--muted);font-size:12px}
.workspace-grid{display:grid;grid-template-columns:275px minmax(0,1fr);min-height:calc(100vh - 110px)}
.composer{background:var(--nav);color:#dce4ed;border-right:1px solid #1d2834;padding:0;height:100%}
.side-title{min-height:72px;display:flex;align-items:center;gap:12px;padding:15px 18px;background:#202b38;border-bottom:1px solid #3a4858}
.side-title strong,.side-title small{display:block}
.side-title small{color:#9facba;font-size:11px;margin-top:2px}
.side-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:4px;background:var(--accent);color:#fff;font-size:20px}
.composer details{border-bottom:1px solid #3a4858;padding:5px 14px}
.composer details:last-child{border-bottom:0}
.composer summary{cursor:pointer;font-weight:700;padding:12px 4px;list-style:none}
.composer summary::-webkit-details-marker{display:none}
.composer summary::after{content:'+';float:right;color:#91a0af}
.composer details[open] summary::after{content:'−'}
.composer form{padding:0 4px 15px}
.composer label{color:#b8c3ce}
.composer input,.composer select{background:#202b38;border-color:#465567;color:#fff}
.composer input:focus,.composer select:focus{border-color:#53c8b6;box-shadow:0 0 0 3px rgba(83,200,182,.14)}
.board{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:290px;
  align-items:start;
  gap:10px;
  overflow-x:auto;
  padding:18px 18px 28px;
  min-width:0
}
.stage{min-height:calc(100vh - 148px);padding:0 2px;border-top:3px solid #79a8df}
.stage:nth-child(4n+2){border-top-color:#e2aa56}
.stage:nth-child(4n+3){border-top-color:#83c394}
.stage:nth-child(4n+4){border-top-color:#b992d1}
.stage h2{height:50px;font-size:12px;text-transform:uppercase;letter-spacing:.035em;display:flex;align-items:center;justify-content:space-between;margin:0;padding:0 8px;border-bottom:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.count{min-width:24px;height:22px;padding:0 7px;border-radius:11px;background:#e2e7ec;color:#63707e;display:grid;place-items:center;font-size:11px}
.card{width:100%;min-height:76px;text-align:left;margin:9px 0 0;background:var(--surface);color:var(--text);border:1px solid #d6dce3;border-radius:3px;padding:12px;box-shadow:0 1px 2px rgba(36,49,64,.05);transition:.15s ease}
.card:hover{background:var(--surface);border-color:#93a5b7;box-shadow:var(--shadow);transform:translateY(-1px)}
dialog{background:var(--surface);color:var(--text);border:0;border-radius:7px;box-shadow:0 28px 80px rgba(24,34,46,.28);max-width:620px;width:calc(100% - 32px);padding:22px}
dialog::backdrop{background:rgba(28,38,50,.5)}
.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);padding-bottom:14px}
.dialog-head h2{margin:0}
.dialog-head button{background:var(--surface-soft);color:var(--text);border:1px solid var(--line)}
pre{white-space:pre-wrap;background:var(--surface-soft);border:1px solid var(--line);border-radius:4px;padding:15px;overflow:auto}
@media(max-width:820px){
  .header-search{display:none}
  header{padding:0 12px}
  .workspace-grid{grid-template-columns:1fr}
  .composer{order:2}
  .board{order:1;min-height:540px}
  .stage{min-height:500px}
}