@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');
:root{--bg:#F2F4F3;--panel:#FFF;--ink:#171C22;--muted:#6B7480;--line:#E1E5E3;--accent:#0E6E5C;--accent-soft:#E1F0EC;--danger:#B03A3A;--warn:#B8860B;--ios:#3A6EA5;--android:#4C8C3B;--pwa:#8A4FA8}
*{box-sizing:border-box}
body{margin:0;font-family:'Inter',sans-serif;background:var(--bg);color:var(--ink);font-size:14px}
.app{min-height:100vh;padding:44px 18px 60px}
.wrap{max-width:1360px;margin:0 auto}
h1{font-family:'Space Grotesk';font-size:24px;font-weight:700;margin:0;letter-spacing:-.5px}
.sub{color:var(--muted);font-size:12px;margin-top:3px}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.btn{font-family:'Inter';font-size:13px;font-weight:600;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:8px;padding:8px 13px;cursor:pointer;transition:.15s}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{filter:brightness(1.1);color:#fff}
.btn.sm{padding:5px 9px;font-size:12px}
.btn.danger-ghost{color:var(--danger);border-color:transparent;background:transparent}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tabs{display:flex;gap:4px;background:#E7EAE8;border-radius:9px;padding:3px}
.tabs button{font-family:'Inter';font-size:13px;font-weight:600;border:none;background:transparent;color:var(--muted);padding:7px 16px;border-radius:7px;cursor:pointer}
.tabs button.on{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0;align-items:center}
.filters select,.filters input{font-family:'Inter';font-size:13px;border:1px solid var(--line);border-radius:8px;padding:7px 10px;background:var(--panel);color:var(--ink)}
.filters input.search{min-width:220px;flex:1}
.board{display:flex;gap:12px;overflow-x:auto;padding-bottom:14px;align-items:flex-start}
.col{min-width:270px;flex:1;background:#EBEEEC;border-radius:10px;padding:8px}
.colhead{padding:6px 8px 8px;border-bottom:3px solid;margin-bottom:8px}
.colhead .cname{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.colhead .cmeta{font-family:'JetBrains Mono';font-size:11px;color:var(--muted);margin-top:2px}
.col.dragover{outline:2px dashed var(--accent);outline-offset:-2px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:10px 11px;margin-bottom:8px;cursor:grab;transition:.12s}
.card:hover{box-shadow:0 2px 8px rgba(0,0,0,.09);border-color:#C8CFCB}
.card .cc{font-weight:600;font-size:13px;margin-bottom:3px}
.card .cb{font-family:'JetBrains Mono';font-size:12px;font-weight:600;color:var(--accent)}
.card .cm{font-size:11px;color:var(--muted);margin-top:4px;display:flex;justify-content:space-between;gap:6px}
.chip{display:inline-block;font-family:'JetBrains Mono';font-size:10px;font-weight:600;padding:1px 7px;border-radius:99px;margin:2px 3px 0 0;color:#fff;white-space:nowrap;line-height:1.5}
.chip.iOS{background:var(--ios)}.chip.Android{background:var(--android)}.chip.PWA{background:var(--pwa)}
.tag{display:inline-block;font-size:10px;background:var(--accent-soft);color:var(--accent);border-radius:5px;padding:1px 6px;font-weight:600;margin:2px 3px 0 0;white-space:nowrap;line-height:1.5}
.tag.appchip{background:#EEF0EF;color:var(--muted)}
.mf{position:relative}
.mfbtn{font-family:'Inter';font-size:13px;border:1px solid var(--line);border-radius:8px;padding:7px 10px;background:var(--panel);color:var(--ink);cursor:pointer}
.mfbtn.has{border-color:var(--accent);color:var(--accent);font-weight:600}
.mfpanel{position:absolute;top:calc(100% + 4px);left:0;z-index:40;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.12);padding:6px;min-width:180px;max-height:280px;overflow:auto}
.mfpanel .mfitem{display:flex !important;align-items:center;gap:9px;font-size:13px !important;font-weight:400 !important;text-transform:none !important;letter-spacing:0 !important;color:var(--ink) !important;padding:7px 9px;margin:0 !important;border-radius:6px;cursor:pointer;white-space:nowrap;user-select:none}
.mfpanel .mfitem:hover{background:#F3F6F4}
.mfpanel .mfitem.sel{background:var(--accent-soft);color:var(--accent) !important;font-weight:600 !important}
.mfpanel .mfitem input[type="checkbox"]{width:auto !important;padding:0 !important;margin:0;flex:0 0 auto;accent-color:var(--accent)}
.mfclear{font-size:12px;color:var(--danger);font-weight:600;padding:6px 8px;cursor:pointer;border-bottom:1px solid var(--line);margin-bottom:4px}
.pk{position:relative}
.pkbtn{width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px;font-family:'Inter';font-size:14px;border:1px solid var(--line);border-radius:8px;padding:8px 11px;background:#fff;color:var(--ink);cursor:pointer;text-align:left}
.pkbtn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.pkbtn.ph .pkl{color:var(--muted)}
.pkl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.pka{color:var(--muted);font-size:11px;flex-shrink:0}
.table{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.row{display:grid;grid-template-columns:20px 34px 1.5fr .9fr .8fr .9fr 1fr 1.4fr 1.1fr;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line);align-items:center;font-size:13px}
.row.headr{background:#FAFBFA;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:600}
.row-number{font-family:'JetBrains Mono';font-size:11px;color:var(--muted);text-align:right;user-select:none}
.row-drag-handle{color:var(--muted);font-size:17px;line-height:1;text-align:center;cursor:grab;user-select:none;touch-action:none}.row-drag-handle:hover{color:var(--accent)}.row.dragging{opacity:.38}.row.drop-target{position:relative}.row.drop-target::before{content:"";position:absolute;z-index:2;top:-2px;left:10px;right:10px;height:3px;background:var(--accent);border-radius:99px;box-shadow:0 0 0 2px var(--accent-soft)}.row-drag-handle:active{cursor:grabbing}
.row.priority-row{box-shadow:inset 4px 0 var(--priority-color)}.priority-line{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:11px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.priority-line span{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.row:last-child{border-bottom:none}
.row:not(.headr):hover{background:#F7FAF9;cursor:pointer}
.row.u{grid-template-columns:1fr 1fr .8fr .7fr 1.4fr;cursor:default!important}
.mono{font-family:'JetBrains Mono';font-size:12px}
.stagepill{font-size:11px;font-weight:600;padding:3px 9px;border-radius:99px;color:#fff;display:inline-block}
.contactline{color:var(--muted);font-size:12px}
.contactline b{color:var(--ink)}
.role{font-size:9px;text-transform:uppercase;letter-spacing:.4px;color:var(--accent);font-weight:700;margin-left:3px}
.star{color:var(--warn);font-size:12px;margin-right:2px}
.empty{padding:44px;text-align:center;color:var(--muted)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:16px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.stat b{font-family:'JetBrains Mono';font-size:21px;display:block}
.stat span{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
.panelbox{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:14px}
.panelbox h3{font-family:'Space Grotesk';font-size:14px;margin:0 0 12px}
.bar{display:flex;align-items:center;gap:10px;margin-bottom:7px;font-size:12px}
.bar .bl{width:170px;color:var(--muted);text-align:right;flex-shrink:0}
.bar .bt{flex:1;background:#EEF1EF;border-radius:5px;height:18px;overflow:hidden}
.bar .bf{height:100%;border-radius:5px;min-width:2px}
.bar .bn{font-family:'JetBrains Mono';font-size:11px;width:70px}
.overlay{position:fixed;inset:0;background:rgba(20,25,23,.5);display:flex;align-items:flex-start;justify-content:center;padding:30px 14px;overflow:auto;z-index:50}
.modal{background:var(--panel);border-radius:14px;width:100%;max-width:760px;padding:22px}
.modal.narrow{max-width:460px}
.modal h2{font-family:'Space Grotesk';font-size:18px;margin:0}
.mtabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:14px 0 16px;flex-wrap:wrap}
.mtabs button{font-family:'Inter';font-size:13px;font-weight:600;border:none;background:none;color:var(--muted);padding:8px 14px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.mtabs button.on{color:var(--accent);border-bottom-color:var(--accent)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.field{margin-bottom:12px}
.field label{display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;font-family:'Inter';font-size:14px;border:1px solid var(--line);border-radius:8px;padding:8px 11px;background:#fff;color:var(--ink)}
.field textarea{min-height:64px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.oschips{display:flex;gap:8px;flex-wrap:wrap}
.osbtn{font-family:'JetBrains Mono';font-size:12px;font-weight:600;padding:6px 13px;border-radius:99px;border:1px solid var(--line);background:#fff;cursor:pointer;color:var(--muted)}
.osbtn.on.iOS{background:var(--ios);border-color:var(--ios);color:#fff}
.osbtn.on.Android{background:var(--android);border-color:var(--android);color:#fff}
.osbtn.on.PWA{background:var(--pwa);border-color:var(--pwa);color:#fff}
.stageselect{display:flex;flex-wrap:wrap;gap:6px}
.stagebtn{font-size:11px;font-weight:600;padding:5px 10px;border-radius:99px;border:1px solid var(--line);background:#fff;cursor:pointer;color:var(--muted)}
.stagebtn.on{color:#fff}
.priority-editor{border:1px solid var(--line);border-radius:9px;padding:10px 11px;background:#FBFCFB}.priority-editor.is-active{border-color:var(--priority-color);box-shadow:inset 3px 0 var(--priority-color)}.priority-editor-head{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;font-weight:600;color:var(--muted)}.priority-colors{display:flex;gap:8px;margin-top:9px}.priority-color{width:24px;height:24px;border-radius:50%;border:2px solid transparent;background:var(--priority-color);cursor:pointer;box-shadow:0 0 0 1px rgba(0,0,0,.12)}.priority-color.on{outline:2px solid var(--ink);outline-offset:2px}.priority-reminder-fields{margin-top:10px}.priority-reminder-fields .field{margin-bottom:0}
.appgrid{display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start;align-items:flex-start;max-height:180px;overflow:auto;padding:8px;border:1px solid var(--line);border-radius:8px;background:#fff}
.appbtn{flex:0 0 auto;white-space:nowrap}
.appbtn{font-family:'JetBrains Mono';font-size:12px;padding:4px 11px;border-radius:99px;border:1px solid var(--line);background:#fff;cursor:pointer;color:var(--muted)}
.appbtn.on{background:var(--accent);border-color:var(--accent);color:#fff}
.ctcard{border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:10px;background:#FBFCFB}
.ctcard.main{border-color:var(--warn);background:#FDFBF3}
.ctgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:8px;margin-bottom:8px}
.ctgrid2{display:grid;grid-template-columns:.8fr 1.2fr 30px;gap:8px;align-items:center}
.mainchk{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--warn);margin-bottom:8px;cursor:pointer;user-select:none}
.notebox{border-left:3px solid var(--accent);background:#F6FAF8;border-radius:0 8px 8px 0;padding:9px 12px;margin-bottom:8px}
.notebox .nt{font-size:13px;white-space:pre-wrap}
.notebox .nm{font-family:'JetBrains Mono';font-size:10px;color:var(--muted);margin-top:4px}
.histline{display:flex;gap:10px;font-size:12px;color:var(--muted);padding:5px 0;border-bottom:1px dashed var(--line)}
.histline .hd{font-family:'JetBrains Mono';font-size:10px;flex-shrink:0;width:110px}
.addnote{display:flex;gap:8px;margin-top:10px}
.addnote textarea{flex:1;font-family:'Inter';font-size:14px;border:1px solid var(--line);border-radius:8px;padding:8px 11px;min-height:56px}
.modal .actions{display:flex;justify-content:space-between;margin-top:16px;gap:10px}
.savebar{display:flex;gap:10px}
.tagsinput{display:flex;flex-wrap:wrap;gap:6px;align-items:center;border:1px solid var(--line);border-radius:8px;padding:5px 8px;background:#fff}
.tagsinput .tag{font-size:11px;padding:3px 8px;cursor:pointer}
.tagsinput input{flex:1;min-width:120px;border:none;padding:4px;font-family:'Inter';font-size:13px;outline:none}
.userbadge{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:6px 12px;font-size:13px}
.userbadge .rolebadge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;background:var(--accent-soft);color:var(--accent);border-radius:5px;padding:2px 7px}
.modal.wide{max-width:1040px}
.prevwrap{border:1px solid var(--line);border-radius:10px;overflow:auto;max-height:420px;margin:6px 0 4px}
.prevtable{border-collapse:collapse;width:100%;font-size:12px}
.prevtable th{position:sticky;top:0;background:#FAFBFA;text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.prevtable td{padding:7px 10px;border-bottom:1px solid var(--line);white-space:nowrap;max-width:220px;overflow:hidden;text-overflow:ellipsis}
.prevtable tr:last-child td{border-bottom:none}
.loginwrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.loginbox{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:32px;width:100%;max-width:380px}
.loginbox h1{font-size:22px;margin-bottom:4px}
.err{background:#F8E3DE;color:var(--danger);border-radius:8px;padding:9px 12px;font-size:13px;margin-bottom:12px}
.ok{background:#DEF3E4;color:#1D6B34;border-radius:8px;padding:9px 12px;font-size:13px;margin-bottom:12px}
@media(max-width:900px){.row{grid-template-columns:20px 32px 1fr 1fr}.row.headr{display:none}.grid2,.grid3,.ctgrid{grid-template-columns:1fr}.board{flex-direction:column}.col{min-width:unset}}