/* Layout: grey rounded hero with yellow arcs + pill switches; pastel gradient add-panel; numbered lanes (01/02/03) as the status sequence */
:root{
  --bg:#ffffff; --panel:#f2f2f2; --surface:#ffffff; --line:#e3e3e3; --line-strong:#1e1e1e;
  --fg:#1e1e1e; --muted:#6f6f6f;
  --accent:#e3003b; --accent-fg:#ffffff; --pill:#1e1e1e; --pill-fg:#ffffff;
  --gold:#f5c400; --grad-a:#d3eadf; --grad-b:#f3eaa6;
  --a:#1e1e1e; --b:#c48f00;
  --hot:#e3003b; --hot-soft:#fde6ec; --done:#9a9a9a; --ok:#1d7d47;
  --display:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#121212; --panel:#1d1d1d; --surface:#232323; --line:#343434; --line-strong:#e9e9e9;
  --fg:#f0f0f0; --muted:#a3a3a3; --accent:#ff4a72; --accent-fg:#ffffff; --pill:#f0f0f0; --pill-fg:#121212;
  --gold:#f5c400; --grad-a:#1e3329; --grad-b:#3a3519; --a:#f0f0f0; --b:#f5c400;
  --hot:#ff4a72; --hot-soft:#3d1520; --done:#6c6c6c; --ok:#5fd08e; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#121212; --panel:#1d1d1d; --surface:#232323; --line:#343434; --line-strong:#e9e9e9;
  --fg:#f0f0f0; --muted:#a3a3a3; --accent:#ff4a72; --accent-fg:#ffffff; --pill:#f0f0f0; --pill-fg:#121212;
  --gold:#f5c400; --grad-a:#1e3329; --grad-b:#3a3519; --a:#f0f0f0; --b:#f5c400;
  --hot:#ff4a72; --hot-soft:#3d1520; --done:#6c6c6c; --ok:#5fd08e; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font:16px/1.45 var(--body);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:20px 48px}
.wrap{max-width:1220px;margin:0 auto;display:flex;flex-direction:column;gap:24px}

/* hero */
header{position:relative;overflow:hidden;background:var(--panel);border-radius:28px;padding-block:clamp(28px,5vw,56px);padding-inline:clamp(20px,6vw,80px);
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px}
header .arcs{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
header .arcs path{fill:none;stroke:var(--gold);stroke-width:2}
header>div{position:relative}
h1{font:700 clamp(28px,4.4vw,48px)/1.12 var(--display);margin:0;letter-spacing:-.015em;text-wrap:balance;overflow-wrap:anywhere;max-width:16ch}
.sub{color:var(--muted);font-size:clamp(15px,1.6vw,19px);margin-top:12px}
.hright{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.team{display:flex;gap:8px;flex-wrap:wrap}
.person{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:5px 10px 5px 5px}
.dot{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:600 13px var(--body);color:var(--bg)}
.dot.a{background:var(--a)} .dot.b{background:var(--b)}
.person input{border:0;background:transparent;color:var(--fg);font:500 15px var(--body);width:110px;padding:4px}
.person input:focus{outline:2px solid var(--accent);border-radius:6px}

.bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.seg{display:flex;flex-wrap:wrap;gap:10px;background:transparent;border:0;padding:0}
.seg button{border:1px solid var(--line-strong);background:transparent;color:var(--fg);font:500 16px var(--body);padding:8px 26px;border-radius:999px;cursor:pointer;min-width:110px}
.seg button[aria-pressed="true"]{background:var(--pill);color:var(--pill-fg);border-color:var(--pill)}
.seg button:hover:not([aria-pressed="true"]){background:var(--panel)}
.stats{font:500 13px var(--body);color:var(--muted);font-variant-numeric:tabular-nums}

input,select,textarea{font:15px var(--body);color:var(--fg);background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px;min-width:0}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px}
input[type=color]{padding:2px;width:44px;height:38px}
input[type=checkbox]{width:16px;height:16px;padding:0;accent-color:var(--accent)}
form.add{display:grid;grid-template-columns:1fr auto auto auto auto;gap:10px;border-radius:24px;padding:18px;
  background:linear-gradient(120deg,var(--grad-a),var(--grad-b))}
.btn{font:500 15px var(--body);border:1px solid var(--pill);border-radius:999px;padding:10px 22px;background:var(--pill);color:var(--pill-fg);cursor:pointer;white-space:nowrap}
.btn.ghost{background:var(--surface);color:var(--fg);border-color:var(--line-strong)}
.btn.danger{background:transparent;color:var(--hot);border-color:var(--hot)}
.btn.sm{font-size:14px;padding:7px 14px}
.btn:disabled{opacity:.45;cursor:default}
.btn:focus-visible,.seg button:focus-visible,.card:focus-visible,.mv:focus-visible,.tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:760px){form.add{grid-template-columns:1fr 1fr}form.add #newTitle{grid-column:1/-1}form.add .btn{grid-column:1/-1}.seg button{min-width:0;padding:8px 18px}}

/* lanes */
.board{display:grid;grid-template-columns:repeat(var(--ncols,3),minmax(0,1fr));gap:20px;align-items:start}
@media (max-width:760px){.board{grid-template-columns:1fr}}
.lane{display:flex;flex-direction:column;gap:10px;min-width:0;border-radius:24px;padding:16px;background:var(--panel);min-height:140px}
.lane.over{outline:2px dashed var(--accent);outline-offset:-2px}
.lane h2{margin:0 0 6px;font:700 20px/1.2 var(--display);color:var(--fg);display:flex;align-items:center;gap:12px}
.lane h2 .n{flex:none;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--accent);color:var(--accent);display:grid;place-items:center;font:600 14px var(--body);font-variant-numeric:tabular-nums}
.lane h2 .n.on{background:var(--accent);color:var(--accent-fg)}
.lane h2 .nm{flex:1;min-width:0;overflow-wrap:anywhere}
.lane h2 .c{font:500 14px var(--body);color:var(--muted);font-variant-numeric:tabular-nums}
.list{display:flex;flex-direction:column;gap:10px}
.empty{color:var(--muted);font-size:14px;padding:16px 6px;text-align:center}

.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:10px;cursor:pointer;min-width:0}
.card.hot{box-shadow:inset 3px 0 0 var(--hot)}
.card .t{font-weight:500;font-size:16px;overflow-wrap:anywhere}
.card.isdone .t{color:var(--done);text-decoration:line-through}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.id{font:500 12px var(--body);color:var(--accent)}
.chip{border-radius:999px;padding:2px 10px 2px 8px;font-weight:500;font-size:13px;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line)}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold)}
.chip.a{color:var(--fg)} .chip.a::before{background:var(--a)}
.chip.b{color:var(--fg)} .chip.b::before{background:var(--b)}
.chip.none{border-style:dashed} .chip.none::before{background:var(--line)}
.chip.late,.chip.hotc{background:var(--hot-soft);color:var(--hot);border-color:transparent} .chip.late::before,.chip.hotc::before{background:var(--hot)}
.moves{margin-left:auto;display:flex;gap:6px}
.mv{border:1px solid var(--line);background:var(--surface);color:var(--fg);border-radius:10px;width:34px;height:32px;cursor:pointer;font-size:15px;line-height:1}
.mv:hover{border-color:var(--line-strong)}
.note{font-size:14px;color:var(--muted);background:var(--panel);border-radius:16px;padding:12px 16px}
.note.ok{color:var(--ok)}

/* editor */
.tabs{display:flex;gap:10px;flex-wrap:wrap}
.tab{border:1px solid var(--line-strong);background:transparent;color:var(--fg);font:500 16px var(--body);padding:8px 22px;cursor:pointer;border-radius:999px;white-space:nowrap}
.tab[aria-selected="true"]{background:var(--pill);color:var(--pill-fg);border-color:var(--pill)}
.panel{display:flex;flex-direction:column;gap:20px}
.box{background:var(--panel);border-radius:24px;padding:22px;display:flex;flex-direction:column;gap:14px;min-width:0}
.box h3{margin:0;font:700 20px/1.2 var(--display)}
.box .hint{font-size:14px;color:var(--muted);margin:0}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:20px}
.field{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted);font-weight:500}
.rows{display:flex;flex-direction:column;gap:8px}
.erow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.erow input[type=text]{flex:1 1 160px}
.erow .cnt{font:13px var(--body);color:var(--muted);min-width:60px;font-variant-numeric:tabular-nums}
.erow label{display:flex;gap:6px;align-items:center;font-size:14px;color:var(--muted)}
.ico{border:1px solid var(--line);background:var(--surface);color:var(--fg);border-radius:10px;width:36px;height:36px;cursor:pointer}
.ico:hover:not(:disabled){border-color:var(--line-strong)} .ico:disabled{opacity:.35;cursor:default}
.ico.del:hover:not(:disabled){color:var(--hot);border-color:var(--hot)}
.ico.armed{color:var(--hot);border-color:var(--hot);background:var(--hot-soft)}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

.tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:20px;background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:840px;font-size:15px}
th{font:500 13px var(--body);color:var(--muted);text-align:left;padding:14px 10px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--panel)}
td{padding:6px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
tr.sel td{background:var(--hot-soft)}
td input[type=text],td select,td input[type=date]{width:100%;background:transparent;border-color:transparent;padding:7px}
td input[type=text]:hover,td select:hover,td input[type=date]:hover{border-color:var(--line)}
td.num{font:500 13px var(--body);color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap}
.bulk{display:flex;flex-wrap:wrap;gap:10px;align-items:center;border-radius:24px;padding:14px;background:linear-gradient(120deg,var(--grad-a),var(--grad-b))}
.bulk .lbl{font:500 14px var(--body);color:var(--fg);margin-right:auto}

textarea.code{font:13px/1.5 var(--mono);min-height:460px;width:100%;resize:vertical;white-space:pre;tab-size:2}

dialog{border:0;border-radius:24px;background:var(--surface);color:var(--fg);padding:24px;width:min(480px,calc(100vw - 32px))}
dialog::backdrop{background:rgb(20 20 20 / .45)}
dialog form{display:flex;flex-direction:column;gap:14px}
dialog label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted);font-weight:500}
dialog .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
dialog .acts{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
dialog .acts .danger{margin-right:auto}
dialog textarea{min-height:90px;resize:vertical}
@media (prefers-reduced-motion:no-preference){.card{transition:border-color .15s,transform .15s}.card:hover{transform:translateY(-1px);border-color:var(--line-strong)}}

/* login + app chrome */
.login{min-height:calc(100vh - 80px);display:grid;place-items:center}
.login form{width:min(420px,100%);background:var(--panel);border-radius:28px;padding:32px;display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden}
.login h1{font-size:30px;max-width:none}
.login .err{color:var(--hot);font-size:14px;min-height:20px;margin:0}
.login label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted);font-weight:500}
.login .btn{margin-top:6px}
.who{font-size:14px;color:var(--muted)}
a.btn{text-decoration:none;display:inline-block}
.live{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok)}
.live.off::before{background:var(--hot)}

/* mobile: one lane at a time */
.lanetabs,.swipehint{display:none}
@media (max-width:760px){
  .lanetabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-inline:-4px;padding-inline:4px}
  .lanetabs button{flex:none;border:1px solid var(--line-strong);background:transparent;color:var(--fg);font:500 15px var(--body);padding:9px 16px;border-radius:999px;cursor:pointer;display:flex;gap:8px;align-items:center}
  .lanetabs button span{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
  .lanetabs button[aria-selected="true"]{background:var(--pill);color:var(--pill-fg);border-color:var(--pill)}
  .lanetabs button[aria-selected="true"] span{color:inherit;opacity:.7}
  .swipehint{display:block;margin:-8px 4px 0;font-size:13px;color:var(--muted)}
  .board .lane:not(.active){display:none}
  .lane h2 .n{width:38px;height:38px}
  .mv{width:42px;height:40px}
  header{border-radius:22px}
  .hright{width:100%}
  .team{flex:1}
  .person{flex:1 1 140px}
  .person input{width:100%}
  dialog .row{grid-template-columns:1fr}
}
.card{touch-action:pan-y}
.card.swiping{transition:none!important}
.card .swipe-to{font-size:12px;color:var(--accent);font-weight:600}
.offline .add,.offline #modeBtn{opacity:.5;pointer-events:none}