/* Bot Ops Board: dark (default) + light themes, from mockups/common.css + board.html */
:root,[data-theme=dark]{--bg:#0d1117;--panel:#151b23;--panel2:#1b2330;--line:#263040;--text:#e6edf3;--muted:#8b98a9;--accent:#f5a524;
--urgent:#ef4444;--high:#f97316;--med:#eab308;--low:#64748b;--blocked:#ef4444;--future:#64748b;
--chip-urgent-bg:rgba(239,68,68,.16);--chip-urgent:#fca5a5;--chip-high-bg:rgba(249,115,22,.16);--chip-high:#fdba74;
--chip-med-bg:rgba(234,179,8,.15);--chip-med:#fde047;--chip-low-bg:rgba(100,116,139,.22);--chip-low:#cbd5e1;
--reason:#fecaca;--blocked-card:linear-gradient(180deg,rgba(239,68,68,.10),var(--panel2));--card-shadow:none;--overlay:rgba(3,6,12,.66);color-scheme:dark}
[data-theme=light]{--bg:#f6f7f9;--panel:#ffffff;--panel2:#ffffff;--line:#e3e7ee;--text:#0f172a;--muted:#64748b;
--chip-urgent:#b91c1c;--chip-high:#c2410c;--chip-med:#a16207;--chip-low:#334155;--reason:#991b1b;--blocked-card:#fff5f5;
--card-shadow:0 1px 2px rgba(15,23,42,.06);--overlay:rgba(15,23,42,.45);color-scheme:light}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif;font-size:13px}
body{min-height:100vh}
button,select,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
a{color:var(--accent)}
.chip{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:600;padding:2px 7px;border-radius:999px;letter-spacing:.02em;text-transform:uppercase}
.p-urgent{background:var(--chip-urgent-bg);color:var(--chip-urgent)}.p-high{background:var(--chip-high-bg);color:var(--chip-high)}
.p-medium{background:var(--chip-med-bg);color:var(--chip-med)}.p-low{background:var(--chip-low-bg);color:var(--chip-low)}
.av{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-weight:700;font-size:12px;color:#fff;flex:none}
.av.sm{width:20px;height:20px;font-size:9.5px;border-radius:6px}
.av.user{background:#334155}
.tag{font-size:10.5px;color:var(--muted);background:var(--panel2);border:1px solid var(--line);padding:1px 6px;border-radius:5px}
/* header */
header.top{height:60px;display:flex;align-items:center;gap:18px;padding:0 24px;border-bottom:1px solid var(--line);background:var(--panel);position:sticky;top:0;z-index:5}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;white-space:nowrap}
.logo .mark{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,#f5a524,#f97316);display:grid;place-items:center;color:#111;font-weight:800;font-size:13px}
.logo small{color:var(--muted);font-weight:500;margin-left:4px}
.seg{display:flex;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:3px}
.seg button{padding:5px 12px;border-radius:6px;color:var(--muted);font-weight:500;white-space:nowrap}.seg .on{background:var(--panel2);color:var(--text)}
.search{flex:1;max-width:320px;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:8px 12px;outline:none}
.search::placeholder{color:var(--muted)}.search:focus{border-color:var(--accent)}
.btn{background:var(--accent);color:#111;font-weight:600;padding:8px 14px;border-radius:8px;white-space:nowrap}
.btn:hover{filter:brightness(1.07)}
.ghost{border:1px solid var(--line);padding:7px 12px;border-radius:8px;color:var(--muted);background:transparent;white-space:nowrap}
select.ghost{appearance:none;padding-right:26px;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238b98a9'/%3E%3C/svg%3E") no-repeat right 10px center}
select.ghost option{background:var(--panel);color:var(--text)}
.sp{flex:1}
.menu-wrap{position:relative}
.menu{position:absolute;right:0;top:38px;background:var(--panel);border:1px solid var(--line);border-radius:10px;min-width:220px;padding:6px;box-shadow:0 12px 30px rgba(0,0,0,.35);display:flex;flex-direction:column}
.menu[hidden]{display:none}
.menu a,.menu button{padding:8px 10px;border-radius:6px;color:var(--text);text-decoration:none;text-align:left}
.menu a:hover,.menu button:hover{background:var(--panel2)}
.menu-h{padding:8px 10px;color:var(--muted);font-size:12px;border-bottom:1px solid var(--line);margin-bottom:4px}
/* banner + stats */
.banner{margin:12px 24px 0;padding:9px 14px;border-radius:8px;border:1px solid rgba(239,68,68,.55);background:rgba(239,68,68,.10);color:#f87171;font-weight:500}
.stats{display:flex;gap:10px;padding:14px 24px 6px;flex-wrap:wrap}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:9px 14px;display:flex;gap:10px;align-items:baseline}
.stat b{font-size:18px}.stat span{color:var(--muted)}
.stat.red{border-color:rgba(239,68,68,.45)}.stat.red b{color:#f87171}
/* grid */
.board{padding-bottom:30px}
.grid{display:grid;grid-template-columns:190px repeat(4,minmax(0,1fr));gap:10px;padding:8px 24px}
.grid.status{grid-template-columns:repeat(4,minmax(0,1fr))}
.colh{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600;padding:4px 4px;display:flex;justify-content:space-between}
.colh.blk{color:#f87171}
.lane{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px;border-left:4px solid}
.lane h3{font-size:14px;display:flex;gap:9px;align-items:center}
.lane p{color:var(--muted);font-size:11.5px;line-height:1.4}
.lane .load{font-size:11px;color:var(--muted)}
.lane.add{border-style:dashed;border-left-color:var(--future);padding:9px 12px;flex-direction:row;align-items:center;gap:9px;opacity:.65}
.cell{background:rgba(255,255,255,.015);border:1px dashed var(--line);border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:8px;min-height:120px}
.grid.status .cell{min-height:60vh}
.cell.blkcell{background:rgba(239,68,68,.04);border-color:rgba(239,68,68,.25)}
.cell .empty{margin:auto;color:#64748b;font-size:11.5px}
.cell .older{color:var(--muted);font-size:11.5px;padding:2px 4px;text-align:left}
.cell .older:hover{color:var(--text)}
.card{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 11px;display:flex;flex-direction:column;gap:7px;border-left:3px solid;cursor:pointer;box-shadow:var(--card-shadow)}
.card:hover{border-color:#3a475b}
.card .t{font-weight:600;font-size:12.5px;line-height:1.35;overflow-wrap:anywhere}
.card .m{display:flex;gap:6px;align-items:center;flex-wrap:wrap;color:var(--muted);font-size:11px}
.card .due{margin-left:auto}.due.over{color:#f87171;font-weight:600}
.card .who{display:flex;gap:6px;align-items:center;color:var(--muted);font-size:11px}
.card.blocked{border:1px solid rgba(239,68,68,.6);border-left:3px solid var(--blocked);background:var(--blocked-card)}
.reason{font-size:11px;color:var(--reason);background:rgba(239,68,68,.12);border-radius:6px;padding:5px 7px;line-height:1.35}
.card.done .t{color:var(--muted);text-decoration:line-through;text-decoration-color:#475569}
.sortable-ghost{opacity:.35}.sortable-drag{transform:rotate(1.5deg)}
.cell.drop-hover{border-color:var(--accent)}
/* modal */
.overlay{position:fixed;inset:0;background:var(--overlay);display:grid;place-items:center;z-index:20;padding:20px;backdrop-filter:blur(2px)}
.modal{width:860px;max-width:100%;max-height:calc(100vh - 40px);overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.mh{display:flex;align-items:center;gap:10px;padding:18px 24px;border-bottom:1px solid var(--line)}
.mh .id{font-family:'JetBrains Mono',monospace;color:var(--muted);font-size:12px}
.x{margin-left:auto;color:var(--muted);font-size:18px}
.mbody{display:grid;grid-template-columns:1fr 280px}
.mmain{padding:22px 24px;display:flex;flex-direction:column;gap:16px;border-right:1px solid var(--line)}
.modal label,.login-box label{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:600;display:block;margin-bottom:6px}
.in{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:13.5px;line-height:1.5;width:100%;outline:none}
.in:focus{border-color:var(--accent)}
textarea.in{min-height:120px;resize:vertical}
.in.title{font-size:19px;font-weight:700}
.blkpanel{border:1px solid rgba(239,68,68,.55);background:rgba(239,68,68,.08);border-radius:10px;padding:12px 14px}
.blkpanel b{color:#f87171;font-size:12px;letter-spacing:.05em}
.blkpanel textarea{margin-top:6px;color:var(--reason);background:transparent;border-color:rgba(239,68,68,.35);min-height:60px}
.mside{padding:22px 20px;display:flex;flex-direction:column;gap:15px;background:rgba(255,255,255,.01)}
select.in{padding:8px 10px}
.prio{display:flex;gap:6px}.prio .chip{padding:5px 9px;opacity:.45;cursor:pointer}.prio .chip.on{opacity:1;outline:1px solid currentColor}
.act{font-size:12px;color:var(--muted);line-height:1.6;display:flex;flex-direction:column;gap:6px;max-height:200px;overflow:auto}
.act b{color:var(--text);font-weight:600}
.mfoot{display:flex;gap:10px;padding:14px 24px;border-top:1px solid var(--line);align-items:center}
.danger{color:#f87171;margin-right:auto}
.err{color:#f87171;font-size:12px}
.overdue-lbl{color:#f87171;font-weight:600;font-size:11.5px}
.comment-row{display:flex;gap:6px}.comment-row input{padding:6px 8px;font-size:12px}
/* login */
.login-page{display:grid;place-items:center;min-height:100vh}
.login-box{width:360px;max-width:92vw;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:28px;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.login-box form{display:flex;flex-direction:column;gap:4px;margin-top:22px}
.login-box .in{margin-bottom:12px}
.logo.big{font-size:17px}.logo.big small{display:block;margin:2px 0 0;font-size:12px}
.btn.wide{width:100%;padding:11px;margin-top:6px}
.login-error{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.5);color:#f87171;border-radius:8px;padding:8px 10px;margin-bottom:10px}
.login-foot{color:var(--muted);font-size:11.5px;margin-top:16px;text-align:center}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--panel2);border:1px solid var(--line);padding:9px 14px;border-radius:8px;z-index:30}
@media (max-width:1000px){.grid{grid-template-columns:150px repeat(4,minmax(160px,1fr));overflow-x:auto}.search{display:none}.mbody{grid-template-columns:1fr}}