:root{--c:#2f6fed;--c2:#e9f0ff;--ink:#1a2233;--mut:#6b7488;--line:#e7eaf2;--bg:#f5f7fc;--card:#fff;
--violet:#7c5cff;--violet2:#f0ecff;--blue:#2f6fed;--blue2:#e8f0ff;--orange:#ff8a3d;--orange2:#fff1e7;--green:#16a974;--green2:#e3f7ef;--red:#e5484d;--red2:#ffeceb;--yellow:#f5b400;--yellow2:#fff7da;
--r:16px;--sh:0 1px 2px rgba(16,24,40,.04),0 4px 14px rgba(16,24,40,.05)}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,sans-serif;font-size:14.5px;line-height:1.45}
a{color:var(--c)}
button{font:inherit;cursor:pointer}
input,select,textarea{font:inherit;color:inherit;width:100%;padding:10px 12px;border:1.5px solid #dfe3ec;border-radius:12px;background:#fff;transition:border .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--c);box-shadow:0 0 0 3px var(--c2)}
textarea{min-height:110px;resize:vertical}
label{display:block;font-size:12.5px;font-weight:700;color:#475069;margin:0 0 6px}
.hidden{display:none!important}
/* top bar */
.top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top-in{max-width:1320px;margin:0 auto;display:flex;align-items:center;gap:18px;padding:12px 22px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;white-space:nowrap}
.logo i{width:34px;height:34px;border-radius:11px;background:linear-gradient(135deg,var(--c),#7c5cff);display:grid;place-items:center;color:#fff;font-style:normal;font-size:18px}
.logo small{display:block;font-weight:500;font-size:11.5px;color:var(--mut)}
.tabs{display:flex;gap:4px;margin-left:8px;overflow-x:auto}
.tabs a{padding:8px 14px;border-radius:999px;color:#4a5370;font-weight:600;text-decoration:none;white-space:nowrap;cursor:pointer}
.tabs a:hover{background:#f1f3f9}
.tabs a.on{background:var(--c2);color:var(--c)}
.tabs a .b{display:inline-block;min-width:20px;padding:0 6px;margin-left:6px;border-radius:99px;background:var(--orange);color:#fff;font-size:11.5px;text-align:center}
.top .sp{flex:1}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1.5px solid #dfe3ec;background:#fff;color:var(--ink);padding:9px 15px;border-radius:999px;font-weight:700;white-space:nowrap;transition:transform .08s,background .15s}
.btn:hover{background:#f6f8fc}.btn:active{transform:scale(.97)}
.btn.p{background:var(--c);border-color:var(--c);color:#fff;box-shadow:0 4px 14px rgba(47,111,237,.28)}.btn.p:hover{filter:brightness(1.06)}
.btn.g{background:var(--green);border-color:var(--green);color:#fff}
.btn.wa{background:#25d366;border-color:#25d366;color:#fff}
.btn.o{background:var(--orange);border-color:var(--orange);color:#fff}
.btn.ghost{border-color:transparent;background:transparent;color:var(--mut)}.btn.ghost:hover{background:#f1f3f9;color:var(--ink)}
.btn.sm{padding:6px 11px;font-size:13px}
.btn.lg{padding:12px 20px;font-size:15px}
.btn.danger{color:var(--red);border-color:#f6c9c9}
.btn[disabled]{opacity:.5;pointer-events:none}
.av{width:34px;height:34px;border-radius:50%;background:#ffd9b8;display:grid;place-items:center;font-weight:800;color:#8a4a12;cursor:pointer}
main{max-width:1320px;margin:0 auto;padding:24px 22px 90px}
h1{font-size:26px;margin:0 0 4px;letter-spacing:-.01em}
h2{font-size:18px;margin:0 0 12px}
.sub{color:var(--mut);margin:0 0 20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--sh)}
.grid{display:grid;gap:16px}
.g4{grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:1fr 1fr}.gm{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
@media(max-width:1000px){.g4{grid-template-columns:1fr 1fr}.g3,.g2,.gm{grid-template-columns:1fr}}
/* tiles */
.tile{border-radius:20px;padding:18px;cursor:pointer;transition:transform .12s;border:0;text-align:left;color:var(--ink)}
.tile:hover{transform:translateY(-2px)}
.tile .n{font-size:38px;font-weight:800;line-height:1;margin:8px 0 6px}
.tile .e{font-size:24px}
.tile .l{font-weight:700}.tile .h{font-size:12.5px;opacity:.75}
.t-violet{background:var(--violet2)}.t-violet .n{color:var(--violet)}
.t-blue{background:var(--blue2)}.t-blue .n{color:var(--blue)}
.t-orange{background:var(--orange2)}.t-orange .n{color:#e26d1c}
.t-green{background:var(--green2)}.t-green .n{color:var(--green)}
.hello{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:700;white-space:nowrap}
.pill.ok{background:var(--green2);color:var(--green)}.pill.warn{background:var(--yellow2);color:#a87900}.pill.late{background:var(--red2);color:var(--red)}.pill.n{background:#eef1f6;color:#5d6780}.pill.v{background:var(--violet2);color:var(--violet)}.pill.b{background:var(--blue2);color:var(--blue)}.pill.or{background:var(--orange2);color:#d4600e}
.todo{display:flex;flex-direction:column;gap:10px}
.trow{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid var(--line);border-radius:14px;background:#fff;transition:box-shadow .15s}
.trow:hover{box-shadow:var(--sh)}
.trow .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:20px;flex-shrink:0}
.trow .tx{flex:1;min-width:0;cursor:pointer}
.trow .tx b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trow .tx span{font-size:12.5px;color:var(--mut)}
.trow .ac{display:flex;gap:8px;align-items:center;flex-shrink:0}
.trow select{width:auto;padding:7px 10px;border-radius:999px;font-weight:600}
.empty{text-align:center;color:var(--mut);padding:26px 10px}
.empty .big{font-size:40px}
/* board */
.board{display:grid;grid-template-columns:repeat(4,minmax(240px,1fr));gap:14px;overflow-x:auto;padding-bottom:8px}
.col{background:#eef1f7;border-radius:18px;padding:10px;min-height:200px}
.col h3{display:flex;align-items:center;gap:8px;font-size:14px;margin:4px 6px 10px}
.col h3 .k{margin-left:auto;background:#fff;border-radius:99px;padding:1px 9px;font-size:12px}
.col .dot{width:10px;height:10px;border-radius:50%}
.kcard{background:#fff;border-radius:14px;padding:12px;margin-bottom:9px;cursor:pointer;border:1px solid transparent;box-shadow:0 1px 2px rgba(16,24,40,.06);transition:border .12s,transform .1s}
.kcard:hover{border-color:#cdd8f5;transform:translateY(-1px)}
.kcard .r1{display:flex;justify-content:space-between;gap:6px;font-size:12px;color:var(--mut);margin-bottom:5px}
.kcard .ob{font-weight:700;font-size:13.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kcard .dm{font-size:12.5px;color:var(--mut);margin:4px 0 8px}
.kcard .r3{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.fbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.fbar input[type=search]{max-width:320px;border-radius:999px;padding-left:16px}
.fbar select{width:auto;border-radius:999px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:999px;border:1.5px solid #dfe3ec;background:#fff;font-weight:600;cursor:pointer;user-select:none;transition:all .12s}
.chip:hover{border-color:#c6cfe2}
.chip.on{border-color:var(--c);background:var(--c2);color:var(--c)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.seg{display:inline-flex;background:#eef1f7;border-radius:999px;padding:3px}
.seg a{padding:6px 13px;border-radius:999px;font-weight:600;color:#5d6780;cursor:pointer;text-decoration:none}
.seg a.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
tr.cl{cursor:pointer}tr.cl:hover td{background:#f8faff}
.tbl{overflow-x:auto}
/* drawer */
#drawer-bg{position:fixed;inset:0;background:rgba(20,28,45,.35);z-index:40}
#drawer{position:fixed;top:0;right:0;bottom:0;width:min(640px,100%);background:#fff;z-index:41;overflow-y:auto;box-shadow:-10px 0 40px rgba(0,0,0,.12);animation:sl .18s ease-out}
@keyframes sl{from{transform:translateX(30px);opacity:.6}to{transform:none;opacity:1}}
.dh{position:sticky;top:0;background:#fff;z-index:2;padding:16px 20px 12px;border-bottom:1px solid var(--line)}
.dh .x{position:absolute;right:14px;top:12px}
.db{padding:18px 20px 40px;display:flex;flex-direction:column;gap:16px}
.steps{display:flex;gap:6px;margin-top:12px}
.steps div{flex:1;text-align:center;font-size:11.5px;font-weight:700;color:#9aa3b8}
.steps div i{display:block;height:6px;border-radius:9px;background:#e8ebf2;margin-bottom:6px}
.steps div.on{color:var(--c)}.steps div.on i{background:var(--c)}
.steps div.done{color:var(--green)}.steps div.done i{background:var(--green)}
.next{border-radius:18px;padding:16px;background:linear-gradient(135deg,#f3f7ff,#f6f2ff);border:1px solid #dfe6fb}
.next h4{margin:0 0 4px;font-size:15px}
.next p{margin:0 0 12px;color:#4c5672;font-size:13.5px}
.who{display:flex;gap:12px;align-items:center}
.who .av{width:42px;height:42px;font-size:16px;background:#dbe7ff;color:var(--c);cursor:default}
.contact{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.feed{display:flex;flex-direction:column;gap:10px}
.ev{display:flex;gap:10px}
.ev .ei{width:30px;height:30px;border-radius:50%;background:#eef1f7;display:grid;place-items:center;flex-shrink:0;font-size:14px}
.ev .eb{background:#f6f8fc;border-radius:4px 14px 14px 14px;padding:8px 12px;font-size:13.5px;flex:1}
.ev .eb small{display:block;color:var(--mut);font-size:11.5px;margin-top:2px}
.kv{display:grid;grid-template-columns:120px 1fr;gap:7px 12px;font-size:13.5px}.kv dt{color:var(--mut)}.kv dd{margin:0}
.quote{background:#fbfcfe;border-left:3px solid var(--c);padding:10px 12px;border-radius:8px;white-space:pre-wrap;font-size:13.5px}
/* modal */
#modal{position:fixed;inset:0;background:rgba(20,28,45,.45);z-index:60;display:flex;align-items:flex-start;justify-content:center;padding:36px 12px;overflow-y:auto}
.mbox{background:#fff;border-radius:22px;width:100%;max-width:720px;padding:22px 24px;box-shadow:0 30px 70px rgba(0,0,0,.25);animation:pop .16s ease-out}
@keyframes pop{from{transform:scale(.97);opacity:.5}to{transform:none;opacity:1}}
.mh{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.mh h3{margin:0;font-size:19px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}.full{grid-column:1/-1}
@media(max-width:640px){.form{grid-template-columns:1fr}}
.bigchips{display:grid;grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:8px}
.bigchips .chip{flex-direction:column;border-radius:14px;padding:10px 6px;font-size:12.5px;justify-content:center}
.bigchips .chip span{font-size:22px}
.hint{font-size:12.5px;color:var(--mut)}
.magic{font-size:12.5px;background:var(--yellow2);color:#7a5800;padding:6px 10px;border-radius:10px;margin-top:6px}
#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:#1a2233;color:#fff;padding:12px 18px;border-radius:14px;font-weight:600;opacity:0;transition:all .2s;z-index:80;pointer-events:none;max-width:90vw}
#toast.on{opacity:1;transform:translateX(-50%)}
.bars .row{display:grid;grid-template-columns:minmax(120px,38%) 1fr 54px;gap:10px;align-items:center;margin:9px 0;font-size:13.5px}
.bar{height:12px;background:#eef1f7;border-radius:99px;overflow:hidden}.bar i{display:block;height:100%;border-radius:99px;background:var(--c)}
.kpi{padding:16px;border-radius:18px;background:#fff;border:1px solid var(--line)}
.kpi .v{font-size:30px;font-weight:800;margin:4px 0}.kpi .l{color:var(--mut);font-size:12.5px;font-weight:600}.kpi .h{font-size:12px;color:var(--mut)}
.podium{display:flex;gap:10px;align-items:stretch}
.podium>div{flex:1;border-radius:14px;padding:12px;text-align:center}
.st-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
pre.rep{white-space:pre-wrap;font-family:inherit;font-size:13.5px;background:#fbfcfe;border:1px solid var(--line);border-radius:14px;padding:16px;margin:0;max-height:560px;overflow:auto}
.login{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 20% 10%,#e7efff,transparent 50%),radial-gradient(circle at 80% 90%,#f1ebff,transparent 50%),var(--bg)}
.login .card{width:100%;max-width:400px;padding:28px}
.switch{position:relative;width:44px;height:26px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.switch span{position:absolute;inset:0;background:#d6dbe6;border-radius:99px;transition:.15s;cursor:pointer}
.switch span:before{content:"";position:absolute;width:20px;height:20px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.15s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.switch input:checked+span{background:var(--green)}
.switch input:checked+span:before{transform:translateX(18px)}
.tg{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.tg div{flex:1}.tg b{display:block}.tg small{color:var(--mut)}
.fab{display:none}
@media(max-width:760px){
 .tabs{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);justify-content:space-around;margin:0;padding:6px;z-index:30}
 .tabs a{padding:8px 8px;font-size:12px}
 .top .newbtn{display:none}
 .fab{display:flex;position:fixed;right:16px;bottom:72px;z-index:31;width:56px;height:56px;border-radius:50%;padding:0;font-size:26px}
 main{padding:18px 14px 110px}
 .board{grid-template-columns:repeat(4,82vw)}
 .trow{flex-wrap:wrap}.trow .ac{width:100%;justify-content:flex-end}
 .kv{grid-template-columns:1fr}
}