:root{
  --bg:#f6f4ef; --panel:#ffffff; --ink:#2b2b2b; --muted:#8a8577; --line:#e7e2d6;
  --accent:#2f7a86; --accent2:#c67b5c; --ok:#3f9b57; --err:#c0492f; --warn:#c99a2e;
  --brief:#9a8fb0; --approved:#c99a2e; --images:#2f7a86; --seo:#4f8bc9; --pub:#3f9b57;
  --radius:14px; --shadow:0 1px 3px rgba(0,0,0,.06),0 6px 20px rgba(0,0,0,.04);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink)}
.muted{color:var(--muted)} .small{font-size:12px}

/* Login */
.login-bg{min-height:100vh;display:grid;place-items:center;background:
  radial-gradient(1200px 500px at 50% -10%, #efeae0, var(--bg));}
.login-card{background:var(--panel);padding:40px 36px;border-radius:20px;box-shadow:var(--shadow);
  text-align:center;width:min(92vw,380px);border:1px solid var(--line)}
.logo{font-size:26px;font-weight:700;margin-bottom:6px}
.logo span,.brand span{color:var(--accent)}
.btn-google{margin-top:22px;display:inline-flex;gap:10px;align-items:center;justify-content:center;
  width:100%;padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:#fff;
  color:var(--ink);text-decoration:none;font-weight:600;transition:.15s;cursor:pointer}
.btn-google:hover{background:#faf8f3;border-color:#d8d2c4}

/* Topbar */
.topbar{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:12px 20px;background:rgba(255,255,255,.86);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.brand{font-size:19px;font-weight:700}
.top-center{display:flex;justify-content:center}
.search{width:min(360px,40vw);padding:8px 14px;border:1px solid var(--line);border-radius:20px;background:#fff;font-size:13px;outline:none}
.search:focus{border-color:var(--accent)}
.top-right{display:flex;align-items:center;gap:12px;justify-content:flex-end}
.btn-ghost{background:transparent;border:1px solid var(--line);border-radius:9px;padding:6px 10px;
  color:var(--ink);text-decoration:none;cursor:pointer;font-size:13px}
.btn-ghost:hover{background:#faf8f3}

/* Agents bar */
.agents{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:16px 20px}
.agent{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow)}
.agent h3{margin:0 0 4px;font-size:14px}
.agent .flow{font-size:11px;color:var(--muted);margin-bottom:10px}
.agent .run{width:100%;border:0;border-radius:10px;padding:10px;font-weight:600;color:#fff;background:var(--accent);cursor:pointer;transition:.15s}
.agent .run:hover{filter:brightness(1.06)} .agent .run:disabled{opacity:.55;cursor:progress}
.agent .reports-btn{width:100%;margin-top:7px;border:1px solid var(--line);background:#faf8f3;border-radius:9px;padding:7px;font-size:12px;cursor:pointer;color:var(--ink)}
.agent .reports-btn:hover{background:#f2eee5;border-color:#d8d2c4}
.agent .last{margin-top:8px;font-size:11px;min-height:14px}
.upload-box{display:flex;align-items:center;justify-content:center;padding:22px;border:2px dashed var(--line);border-radius:12px;
  background:#faf8f3;cursor:pointer;color:var(--muted);font-size:13px;transition:.15s;text-align:center}
.upload-box:hover,.upload-box.drag{border-color:var(--accent);background:#f2f6f6;color:var(--accent)}
.report-list{margin-top:14px;display:flex;flex-direction:column;gap:7px;max-height:46vh;overflow:auto}
.report-row{border:1px solid var(--line);border-radius:9px;padding:9px 12px;background:#fff}
.r-name{font-size:13px;font-weight:600;overflow-wrap:anywhere}
.r-new{font-size:10px;font-weight:700;background:var(--pub);color:#fff;border-radius:20px;padding:1px 7px;margin-left:6px;vertical-align:middle}
.r-meta{margin-top:2px}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;vertical-align:middle}
.dot.ok{background:var(--ok)} .dot.err{background:var(--err)} .dot.run{background:var(--warn)}

/* Board */
.board{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;padding:4px 20px 40px;align-items:start}
.col{background:#efece4;border:1px solid var(--line);border-radius:var(--radius);min-height:120px}
.col-head{display:flex;justify-content:space-between;align-items:center;padding:11px 13px;font-weight:700;font-size:13px;
  border-bottom:1px solid var(--line)}
.col-head .n{background:#fff;border:1px solid var(--line);border-radius:20px;padding:1px 9px;font-size:12px;color:var(--muted)}
.col[data-k="Brief"] .col-head{color:var(--brief)}
.col[data-k="Approved"] .col-head{color:var(--approved)}
.col[data-k="Images Ready "] .col-head{color:var(--images)}
.col[data-k="SEO Ready "] .col-head{color:var(--seo)}
.col[data-k="Published"] .col-head{color:var(--pub)}
.col-body{padding:10px;display:flex;flex-direction:column;gap:9px}
.card{position:relative;background:#fff;border:1px solid var(--line);border-radius:11px;padding:11px 12px;box-shadow:0 1px 2px rgba(0,0,0,.04);
  cursor:pointer;transition:.12s}
.card:hover{border-color:#cfc9ba;box-shadow:0 2px 10px rgba(0,0,0,.07);transform:translateY(-1px)}
.card.sel{border-color:var(--accent2);box-shadow:0 0 0 2px rgba(198,123,92,.25)}
.card-check{position:absolute;top:8px;right:8px;display:flex;align-items:center;gap:4px;font-size:10.5px;color:var(--muted);
  background:#faf8f3;border:1px solid var(--line);border-radius:20px;padding:2px 8px 2px 6px;cursor:pointer}
.card-check input{accent-color:var(--accent2);cursor:pointer;margin:0}
.card.has-check .card-name{padding-right:52px}
.run.has-sel{background:var(--accent2)}
.card-name{font-weight:650;font-size:13.5px;line-height:1.3;overflow-wrap:anywhere}
.card-theme{margin-top:3px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4}
.card-more{margin-top:6px;font-size:11px;color:var(--accent);font-weight:600}
.card-meta{margin-top:7px;display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:10.5px;padding:2px 7px;border-radius:20px;background:#f1eee6;color:var(--muted);border:1px solid var(--line)}
.chip a{color:var(--accent);text-decoration:none}
.card-actions{margin-top:9px;display:flex;gap:7px;flex-wrap:wrap}
.card-actions button{font-size:12px;padding:6px 10px;border-radius:8px;border:1px solid var(--line);cursor:pointer;background:#fff}
.btn-approve{background:var(--approved)!important;color:#fff;border:0!important}
.btn-reject{background:#fff!important;color:var(--err)!important;border:1px solid #e6c3b8!important}
.btn-reject:hover{background:#fbeeea!important}
.empty{padding:14px;color:var(--muted);font-size:12px;text-align:center}

/* Toast */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(30px);opacity:0;
  background:#2b2b2b;color:#fff;padding:11px 18px;border-radius:10px;font-size:13px;transition:.25s;pointer-events:none;z-index:50;max-width:80vw}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{background:var(--err)} .toast.ok{background:var(--ok)}

/* Badges + primary button */
.badge{display:inline-block;margin-top:6px;font-size:11px;font-weight:700;padding:2px 10px;border-radius:20px;color:#fff}
.badge[data-s="Brief"]{background:var(--brief)}
.badge[data-s="Approved"]{background:var(--approved)}
.badge[data-s="Images Ready "]{background:var(--images)}
.badge[data-s="SEO Ready "]{background:var(--seo)}
.badge[data-s="Published"]{background:var(--pub)}
.badge[data-s="Paused"]{background:#9a958a}
.btn-primary{background:var(--accent);color:#fff;border:0;border-radius:9px;padding:8px 14px;font-weight:600;cursor:pointer;font-size:13px}
.btn-primary:hover{filter:brightness(1.06)}

/* Modal */
.modal-overlay{position:fixed;inset:0;z-index:60;background:rgba(30,28,24,.45);display:grid;place-items:center;padding:20px}
.modal-overlay[hidden]{display:none}
.modal{background:#fff;width:min(680px,94vw);max-height:88vh;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.25);
  display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line)}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;padding:18px 20px;border-bottom:1px solid var(--line)}
.modal-head h2{margin:0;font-size:18px;overflow-wrap:anywhere}
.modal-body{padding:16px 20px;overflow-y:auto;display:flex;flex-direction:column;gap:14px}
.sec h4{margin:0 0 5px;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.sec p{margin:0;font-size:13.5px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.sec pre{margin:0;font-size:12px;line-height:1.5;background:#f6f4ef;border:1px solid var(--line);border-radius:8px;
  padding:9px 11px;white-space:pre-wrap;overflow-wrap:anywhere;font-family:ui-monospace,Menlo,monospace}
.seed-list{display:flex;flex-wrap:wrap;gap:6px}
.seed{font-size:11.5px;background:#f1eee6;border:1px solid var(--line);border-radius:8px;padding:3px 8px}
.tag-list{display:flex;flex-wrap:wrap;gap:6px}
.tag{font-size:11.5px;background:#eaf2f2;border:1px solid #cfe0e0;color:#2f6a72;border-radius:8px;padding:3px 8px}
.modal-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 20px;border-top:1px solid var(--line);flex-wrap:wrap}
.foot-left{display:flex;align-items:center;gap:8px}
.foot-right{display:flex;gap:8px;flex-wrap:wrap}
.foot-right a,.foot-right button{font-size:13px}
#m-status-sel{padding:7px 10px;border:1px solid var(--line);border-radius:9px;background:#fff;font-size:13px}
.link-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid var(--line);border-radius:9px;
  background:#fff;text-decoration:none;color:var(--ink);cursor:pointer}
.link-btn:hover{background:#faf8f3}

@media(max-width:900px){
  .topbar{grid-template-columns:1fr auto;row-gap:8px}
  .top-center{grid-column:1/-1;order:3;justify-content:stretch}
  .search{width:100%;max-width:none}
  .agents{grid-template-columns:repeat(2,1fr)}
  .board{grid-template-columns:1fr;}
}