:root{
  --ink:#2a2823; --sub:#8c867a; --faint:#b6b0a4; --line:#cfc9bc; --line2:#ddd8cc;
  --paper:#f4f2ec; --card:#ffffff; --soft:#faf8f3;
  --accent:#F5821F; --accent-d:#d96f12; --accent-soft:#fde7d2;
  --ok:#2e9e6b; --ok-soft:#d8f0e3; --blue:#3f7fd6; --blue-soft:#dde9fa;
  --warn:#d99a17; --warn-soft:#f6eccf; --bad:#d6553f; --bad-soft:#f7ddd6;
  --hd:'Caveat',cursive; --bd:'Kalam',cursive;
  --r:13px 9px 15px 8px / 9px 14px 7px 13px;
  --r2:9px 7px 10px 6px / 7px 10px 6px 9px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--bd);background:var(--paper);color:var(--ink);font-size:14px;line-height:1.4;-webkit-font-smoothing:antialiased}
button{font-family:inherit;color:inherit;cursor:pointer;border:none;background:none}
input,textarea,select{font-family:inherit;color:var(--ink);font-size:14px}
svg.ic{display:block;flex:none}
a.lnk,.lnk{color:var(--accent-d);text-decoration:underline;text-underline-offset:2px;cursor:pointer;font-size:13px}

#app{display:flex;height:100vh;overflow:hidden}

/* ---------- sidebar ---------- */
.wf-side{width:236px;flex:none;background:var(--soft);border-right:2px solid var(--ink);
  display:flex;flex-direction:column;padding:18px 14px 12px}
.wf-brand{font-family:var(--hd);font-size:30px;font-weight:700;color:var(--accent-d);letter-spacing:.5px;
  display:flex;align-items:center;gap:6px;padding:2px 6px 16px;cursor:pointer}
.dotmark{width:9px;height:9px;border-radius:50%;background:var(--accent);display:inline-block;margin-top:10px}
.wf-nav{display:flex;flex-direction:column;gap:3px;overflow:auto;flex:1}
.wf-navgroup{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--faint);padding:14px 8px 5px}
.wf-navitem{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:var(--r2);
  color:var(--ink);font-size:14.5px;text-align:left;width:100%;transition:.12s;border:1.6px solid transparent}
.wf-navitem .lb{flex:1}
.wf-navitem:hover{background:#fff;border-color:var(--line2)}
.wf-navitem.active{background:var(--accent);color:#fff;border-color:var(--ink);box-shadow:2px 2px 0 var(--ink)}
.wf-navitem .bdg{font-size:11px;background:var(--accent-soft);color:var(--accent-d);border-radius:8px;padding:1px 7px;font-weight:700}
.wf-navitem.active .bdg{background:#fff;color:var(--accent-d)}
.wf-side-foot{border-top:1.6px dashed var(--line);padding-top:10px;margin-top:6px;font-size:12px;color:var(--faint);display:flex;align-items:center;gap:8px}
.wf-side-foot .lnk{margin-left:auto}

/* ---------- topbar ---------- */
.wf-main{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--paper)}
.wf-top{display:flex;align-items:center;gap:14px;padding:14px 26px;border-bottom:2px solid var(--ink);background:var(--soft);flex-wrap:wrap}
.wf-top-l{flex:1;min-width:200px;max-width:440px}
.wf-top-r{display:flex;align-items:center;gap:12px}
.wf-iconbtn{position:relative;width:38px;height:38px;border-radius:var(--r2);border:1.6px solid var(--line);
  background:#fff;display:grid;place-items:center;color:var(--ink)}
.wf-iconbtn:hover{border-color:var(--ink)}
.wf-scroll{flex:1;overflow:auto}
.wf-content{padding:24px 26px 60px;max-width:1320px;margin:0 auto}

/* ---------- page head ---------- */
.wf-pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.wf-h1 .t{font-family:var(--hd);font-size:34px;font-weight:700;line-height:1}
.wf-h1 .s{color:var(--sub);font-size:14px;margin-top:3px}
.wf-pagehead .acts{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.wf-h2{font-family:var(--hd);font-size:21px;font-weight:600;margin:2px 0 8px}

/* ---------- layout ---------- */
.wf-row{display:flex}.wf-col{display:flex;flex-direction:column}
.wf-grid{display:grid}
.align-start{align-items:flex-start}.align-center{align-items:center}
.wf-content>.wf-row+.wf-row,.wf-content>.wf-card+.wf-row,.wf-content>.wf-row+.wf-card,
.wf-content>.wf-grid+.wf-row,.wf-content>.wf-row+.wf-grid,.wf-content>.wf-grid+.wf-card,
.wf-content>.wf-card+.wf-card,.wf-content>.wf-card+.wf-grid,.wf-content>.wf-grid+.wf-grid{margin-top:14px}
.wf-muted{color:var(--sub);font-size:13px}

/* ---------- card / panel ---------- */
.wf-card{background:var(--card);border:1.8px solid var(--ink);border-radius:var(--r);
  box-shadow:3px 3px 0 rgba(42,40,35,.13);padding:15px}
.wf-card.soft{background:var(--soft);box-shadow:none}
.wf-panel-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;
  font-family:var(--hd);font-size:19px;font-weight:600}
.wf-panel-r{font-family:var(--bd);font-size:12.5px;color:var(--sub);font-weight:400;display:flex;align-items:center;gap:6px}
.wf-panel{min-width:0;flex:1}

/* ---------- buttons ---------- */
.wf-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:var(--r2);
  border:1.8px solid var(--ink);background:#fff;font-size:14px;transition:.12s;white-space:nowrap}
.wf-btn:hover{transform:translate(-1px,-1px);box-shadow:2px 2px 0 var(--ink)}
.wf-btn.primary{background:var(--accent);color:#fff}
.wf-btn.ghost{border-color:var(--line);background:#fff;color:var(--ink)}
.wf-btn.ghost:hover{border-color:var(--ink)}
.wf-btn.danger{border-color:var(--bad);color:var(--bad)}
.wf-btn.sm{padding:6px 11px;font-size:13px}
.wf-btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}

/* ---------- tags / chips ---------- */
.wf-tag{display:inline-flex;align-items:center;font-size:12px;padding:2px 9px;border-radius:11px;
  border:1.4px solid var(--line);background:var(--soft);color:var(--sub);white-space:nowrap}
.wf-tag.ok{background:var(--ok-soft);border-color:var(--ok);color:#1f7a4f}
.wf-tag.blue{background:var(--blue-soft);border-color:var(--blue);color:#2c5fa8}
.wf-tag.warn{background:var(--warn-soft);border-color:var(--warn);color:#9a6f0f}
.wf-tag.bad{background:var(--bad-soft);border-color:var(--bad);color:#a83b28}
.wf-chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;padding:5px 13px;border-radius:18px;
  border:1.6px solid var(--line);background:#fff;color:var(--sub);cursor:pointer}
.wf-chip.on{border-color:var(--ink);background:var(--ink);color:#fff}
.wf-chip.on::before{content:'✓';font-size:11px}
.wf-statusdot{width:9px;height:9px;border-radius:50%;background:var(--faint);display:inline-block;flex:none}
.wf-statusdot.ok{background:var(--ok)}.wf-statusdot.blue{background:var(--blue)}
.wf-statusdot.warn{background:var(--warn)}.wf-statusdot.bad{background:var(--bad)}

/* ---------- form ---------- */
.wf-field{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.wf-field .lb{font-size:12.5px;color:var(--sub);padding-left:2px}
.wf-field input,.wf-field select,.wf-field textarea{border:1.6px solid var(--line);border-radius:var(--r2);background:var(--soft);
  padding:9px 11px;min-height:38px;width:100%;outline:none}
.wf-field input:focus,.wf-field select:focus,.wf-field textarea:focus{border-color:var(--accent)}
.wf-field textarea{resize:vertical;line-height:1.5}
.wf-searchbar{display:flex;align-items:center;gap:9px;border:1.6px solid var(--line);border-radius:22px;
  background:#fff;padding:7px 16px;font-size:14px}
.wf-searchbar input{border:none;outline:none;background:none;flex:1;min-width:60px}
.wf-pill{display:inline-flex;align-items:center;gap:7px;border:1.6px solid var(--line);border-radius:20px;
  background:#fff;padding:6px 12px;font-size:13.5px;white-space:nowrap}
.wf-pill select{border:none;outline:none;background:none;font-size:13.5px}
.wf-toolbar{padding:11px 13px}.wf-toolbar .wf-row{align-items:center;flex-wrap:wrap}
.wf-toolbar .wf-searchbar{flex:1;min-width:200px}

/* ---------- table ---------- */
.wf-table{width:100%;border-collapse:collapse;font-size:13.5px}
.wf-table th{text-align:left;font-size:11.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--faint);
  font-weight:700;padding:7px 10px;border-bottom:1.8px solid var(--ink)}
.wf-table td{padding:10px;border-bottom:1.4px dashed var(--line2);vertical-align:middle}
.wf-table tr:last-child td{border-bottom:none}
.wf-table .r{text-align:right}

/* ---------- KPI ---------- */
.wf-stat-card{padding:14px 16px}
.wf-stat .lb{font-size:12.5px;color:var(--sub)}
.wf-stat .val{font-family:var(--hd);font-size:30px;font-weight:700;line-height:1.1;margin-top:2px}
.wf-stat .dl{font-size:12.5px;margin-top:3px;color:var(--sub)}
.wf-stat .dl.ok{color:#1f7a4f}.wf-stat .dl.warn{color:#9a6f0f}.wf-stat .dl.bad{color:#a83b28}

/* ---------- charts ---------- */
.wf-chart{width:100%}
.wf-chart .area{fill:var(--accent-soft);opacity:.6}
.wf-chart .ln{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.wf-chart .grid{stroke:var(--line2);stroke-width:1;stroke-dasharray:3 5}
.wf-donut circle{fill:none;stroke-width:5}
.wf-donut .bg{stroke:var(--soft)}
.donut-wrap{display:flex;align-items:center;gap:18px;justify-content:center}
.donut-leg{display:flex;flex-direction:column;gap:8px;font-size:13.5px}
.donut-leg .wf-row{align-items:center}

/* ---------- product candidates ---------- */
.cand{padding:12px;display:flex;flex-direction:column}
.cand-top{display:flex;align-items:center;gap:7px;margin-bottom:9px}
.cand-score{margin-left:auto;display:flex;align-items:center;gap:3px;font-size:12.5px;color:var(--warn);font-weight:700}
.cand-name{font-size:14.5px;font-weight:700;margin:9px 0 5px;line-height:1.25;flex:1}
.cand-meta{display:flex;justify-content:space-between;font-size:13px;color:var(--sub);margin-bottom:10px}
.cand-meta .mg{color:#1f7a4f;font-weight:700}

/* ---------- kanban ---------- */
.kb-row{overflow-x:auto;padding-bottom:8px;display:flex}
.kb-col{width:232px;flex:none;background:var(--soft);border:1.7px solid var(--line);border-radius:var(--r2);padding:11px}
.kb-h{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;margin-bottom:11px}
.kb-h b{margin-left:auto;color:var(--sub)}
.kb-body{display:flex;flex-direction:column;gap:9px;min-height:30px}
.kb-card{background:#fff;border:1.7px solid var(--ink);border-radius:var(--r2);padding:9px;box-shadow:2px 2px 0 rgba(42,40,35,.1)}
.kb-c-name{font-size:13.5px;font-weight:700;margin:6px 0;cursor:pointer}
.kb-c-name:hover{color:var(--accent-d)}
.kb-c-tags{display:flex;flex-wrap:wrap;gap:5px}
.kb-move{display:flex;justify-content:space-between;margin-top:8px}
.kb-move button{color:var(--faint);padding:2px 8px;border-radius:8px}
.kb-move button:hover{color:var(--ink);background:var(--soft)}

/* ---------- placeholders / images ---------- */
.wf-img{background:var(--soft);border:1.7px dashed var(--line);border-radius:var(--r2);display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;color:var(--faint);overflow:hidden;position:relative}
.wf-img .cap{font-size:11.5px}
.wf-img img{width:100%;height:100%;object-fit:cover}
.ph-thumb{width:110px;height:110px;flex:none;cursor:pointer}
.ph-thumb .del{position:absolute;top:4px;right:4px;background:#fff;border:1.4px solid var(--ink);border-radius:8px;
  width:22px;height:22px;display:grid;place-items:center;font-size:12px;opacity:0;transition:.12s}
.ph-thumb:hover .del{opacity:1}
.wf-avatar{width:36px;height:36px;border-radius:50%;border:1.7px solid var(--ink);background:var(--accent-soft);
  color:var(--accent-d);display:grid;place-items:center;font-weight:700;font-size:14px;flex:none}

/* ---------- preview ---------- */
.prev-col{width:280px;flex:none}
.prev-card{padding:14px;position:sticky;top:0}
.prev-h{font-family:var(--hd);font-size:17px;display:flex;align-items:center;gap:7px;margin-bottom:10px;color:var(--sub)}
.prev-title{font-weight:700;font-size:15px;margin:10px 0 4px;line-height:1.25}
.prev-price{font-family:var(--hd);font-size:26px;font-weight:700;color:var(--accent-d);margin-bottom:8px}
.prev-price s{font-family:var(--bd);font-size:15px;color:var(--faint);margin-left:6px}
.prev-desc{font-size:12.5px;color:var(--sub);white-space:pre-line;max-height:130px;overflow:hidden}

/* ---------- console log ---------- */
.ag-console{margin-top:14px;background:var(--ink);border-color:var(--ink);color:#e8e2d4}
.ag-log-h{font-family:var(--hd);font-size:18px;display:flex;align-items:center;gap:8px;margin-bottom:10px;color:#fff}
.ag-log{font-size:13px;display:flex;flex-direction:column;gap:5px;color:#cfc8b8}

/* ---------- settings rows ---------- */
.rule-row{display:flex;align-items:center;gap:10px;font-size:14px;padding:8px 0;border-bottom:1.4px dashed var(--line2)}
.rule-row span:first-child{flex:1}

/* ---------- integrations ---------- */
.intg-card{padding:15px;display:flex;flex-direction:column;gap:11px}
.intg-h{display:flex;align-items:center;gap:9px}
.intg-h .t{font-weight:700;font-size:15.5px;flex:1}
.intg-d{font-size:13px;color:var(--sub);line-height:1.45;flex:1}

/* ---------- modal / toast ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(42,40,35,.45);display:grid;place-items:center;z-index:50;padding:20px}
.modal{background:var(--paper);border:2px solid var(--ink);border-radius:var(--r);box-shadow:5px 5px 0 rgba(42,40,35,.3);
  width:min(560px,100%);max-height:90vh;overflow:auto;padding:20px}
.modal .wf-h2{margin-bottom:12px}
.toast-wrap{position:fixed;bottom:18px;right:18px;z-index:60;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--ink);color:#fff;border-radius:var(--r2);padding:10px 16px;font-size:13.5px;
  box-shadow:3px 3px 0 rgba(0,0,0,.2);animation:toastIn .2s}
.toast.err{background:var(--bad)}
@keyframes toastIn{from{transform:translateY(8px);opacity:0}}

.wf-empty{padding:60px;text-align:center;color:var(--faint);font-family:var(--hd);font-size:24px}

/* ---------- login ---------- */
.login-wrap{height:100vh;display:grid;place-items:center;background:var(--paper)}
.login-box{width:min(380px,92vw)}
.login-brand{font-family:var(--hd);font-size:44px;font-weight:700;color:var(--accent-d);text-align:center;margin-bottom:16px}

/* scrollbars */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px;border:2px solid var(--paper)}
::-webkit-scrollbar-track{background:transparent}

@media (max-width: 900px){
  .wf-side{width:74px;padding:18px 8px 12px}
  .wf-side .wf-brand{font-size:22px;justify-content:center}
  .wf-side .wf-navitem .lb,.wf-side .wf-navitem .bdg,.wf-side .wf-navgroup,.wf-side-foot span{display:none}
  .wf-navitem{justify-content:center}
  .prev-col{display:none}
}