/* 新品监控与复盘中台 · 觅朵科技 产品设计中心 */
:root{
  --bg:#F4F3EF; --panel:#FFFFFF; --panel2:#FAF9F6; --ink:#15161A; --ink2:#43444B; --mute:#8B8982; --mute2:#B5B2AA;
  --line:#E5E2DA; --line2:#EEECE6; --side:#121316; --side2:#1C1D22; --side-ink:#ECEBE6; --side-mute:#8C8B87;
  --acc:#3640F2; --acc2:#5B63F7; --acc-soft:#ECEDFE; --acc-ink:#232BC4;
  --good:#0E9466; --good-soft:#E2F4EC; --warn:#C77700; --warn-soft:#FCF0DB; --bad:#DA3338; --bad-soft:#FCE7E7; --info:#3640F2; --info-soft:#ECEDFE;
  --s1:#B9BEFF; --s2:#7C83FA; --s3:#3640F2; --s4:#15161A;
  --r:14px; --r2:10px; --sh:0 1px 0 rgba(20,20,30,.03),0 1px 2px rgba(20,20,30,.04); --sh2:0 10px 30px -12px rgba(20,22,40,.18),0 2px 6px rgba(20,22,40,.05);
  --font:-apple-system,BlinkMacSystemFont,"PingFang SC","HarmonyOS Sans SC","MiSans","Microsoft YaHei UI","Microsoft YaHei","Segoe UI",sans-serif;
  --num:"Bahnschrift","DIN Alternate","DIN 2014","SF Pro Display",-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono","SF Mono","Cascadia Mono",Consolas,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font:14px/1.6 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
img{display:block;max-width:100%}
::selection{background:#D9DBFF}
.num{font-family:var(--num);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.mono{font-family:var(--mono);font-size:12.5px}
.mute{color:var(--mute)} .ink2{color:var(--ink2)}
.nowrap{white-space:nowrap}
.hide{display:none!important}

/* boot */
.boot{display:grid;place-items:center;height:100vh}
.boot-mark{width:46px;height:46px;border-radius:50%;border:2.5px solid var(--ink);display:grid;place-items:center;animation:spin 1.6s var(--ease) infinite}
.boot-mark i{width:14px;height:14px;border-radius:50%;background:var(--acc)}
@keyframes spin{50%{transform:scale(.86) rotate(180deg)}100%{transform:rotate(360deg)}}

/* layout */
.shell{display:grid;grid-template-columns:236px 1fr;min-height:100vh}
.side{background:var(--side);color:var(--side-ink);position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:22px 14px 16px;overflow:auto}
.brand{display:flex;align-items:center;gap:11px;padding:2px 8px 22px}
.brand-mark{width:34px;height:34px;border-radius:50%;border:2px solid var(--side-ink);display:grid;place-items:center;flex:none;position:relative}
.brand-mark::after{content:"";width:11px;height:11px;border-radius:50%;background:#7A82FF;box-shadow:0 0 0 4px rgba(122,130,255,.16);transition:transform .6s var(--ease)}
.brand:hover .brand-mark::after{transform:scale(1.35)}
.brand b{display:block;font-size:15px;letter-spacing:.04em}
.brand small{display:block;font-size:11px;color:var(--side-mute);letter-spacing:.18em}
.nav{display:flex;flex-direction:column;gap:2px}
.nav-sec{font-size:11px;color:#5D5C59;letter-spacing:.2em;padding:16px 10px 6px}
.nav a{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:9px;color:#B9B8B2;font-size:13.5px;position:relative;transition:background .2s,color .2s}
.nav a svg{width:17px;height:17px;flex:none;opacity:.85}
.nav a:hover{background:var(--side2);color:#fff}
.nav a.on{background:#24252B;color:#fff}
.nav a.on::before{content:"";position:absolute;left:-14px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:#7A82FF}
.nav .cnt{margin-left:auto;font:600 11px/18px var(--num);min-width:20px;padding:0 6px;border-radius:10px;background:#2C2D34;color:#D7D6D0;text-align:center}
.nav .cnt.hot{background:#E0393E;color:#fff}
.side-foot{margin-top:auto;padding:14px 8px 0;border-top:1px solid #24252A}
.me{display:flex;align-items:center;gap:10px}
.av{width:30px;height:30px;border-radius:50%;background:#2C2D34;display:grid;place-items:center;font-size:12px;font-weight:600;flex:none;color:#fff}
.me b{font-size:13px;display:block;line-height:1.3}
.me small{color:var(--side-mute);font-size:11.5px}
.me button{margin-left:auto;background:none;border:0;color:var(--side-mute);cursor:pointer;padding:6px;border-radius:7px}
.me button:hover{color:#fff;background:var(--side2)}
.credit{font-size:10.5px;color:#5D5C59;letter-spacing:.06em;margin-top:14px;line-height:1.5}

.main{min-width:0;padding:30px 38px 70px}
.top{display:flex;align-items:flex-end;gap:18px;margin-bottom:24px;flex-wrap:wrap}
.top h1{font-size:28px;line-height:1.15;margin:0;font-weight:650;letter-spacing:-.01em}
.top .sub{color:var(--mute);margin-top:6px;font-size:13.5px}
.top .tools{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.crumb{font-size:12.5px;color:var(--mute);margin-bottom:8px;display:flex;gap:6px;align-items:center}
.crumb a:hover{color:var(--ink)}

/* page transitions */
.page{animation:pagein .45s var(--ease) both}
@keyframes pagein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.stagger>*{animation:rise .5s var(--ease) both}
.stagger>*:nth-child(1){animation-delay:.02s}.stagger>*:nth-child(2){animation-delay:.05s}.stagger>*:nth-child(3){animation-delay:.08s}.stagger>*:nth-child(4){animation-delay:.11s}.stagger>*:nth-child(5){animation-delay:.14s}.stagger>*:nth-child(6){animation-delay:.17s}.stagger>*:nth-child(7){animation-delay:.2s}.stagger>*:nth-child(8){animation-delay:.23s}.stagger>*:nth-child(n+9){animation-delay:.26s}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;padding:0 14px;border-radius:10px;border:1px solid var(--line);background:var(--panel);cursor:pointer;font-size:13.5px;font-weight:500;white-space:nowrap;transition:transform .15s,background .2s,border-color .2s,box-shadow .2s}
.btn:hover{border-color:#CFCBC1;box-shadow:var(--sh)}
.btn:active{transform:scale(.97)}
.btn svg{width:16px;height:16px}
.btn.pri{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.pri:hover{background:#2A2B31}
.btn.acc{background:var(--acc);border-color:var(--acc);color:#fff}
.btn.acc:hover{background:var(--acc-ink)}
.btn.good{background:var(--good);border-color:var(--good);color:#fff}
.btn.bad{background:#fff;border-color:#F1C6C7;color:var(--bad)}
.btn.bad:hover{background:var(--bad-soft)}
.btn.ghost{background:transparent;border-color:transparent}
.btn.ghost:hover{background:#EAE8E2;box-shadow:none}
.btn.sm{height:30px;padding:0 10px;font-size:12.5px;border-radius:8px}
.btn.xs{height:24px;padding:0 8px;font-size:12px;border-radius:7px}
.btn[disabled]{opacity:.45;pointer-events:none}
.icon-btn{width:32px;height:32px;display:grid;place-items:center;border-radius:8px;border:0;background:transparent;cursor:pointer;color:var(--ink2)}
.icon-btn:hover{background:#EAE8E2}
.icon-btn svg{width:17px;height:17px}

/* cards */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.card-h{display:flex;align-items:center;gap:10px;padding:16px 18px 0}
.card-h h3{margin:0;font-size:15px;font-weight:620}
.card-h .r{margin-left:auto;display:flex;gap:6px;align-items:center}
.card-b{padding:14px 18px 18px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-main{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
.sec-t{font-size:12px;letter-spacing:.16em;color:var(--mute);margin:28px 0 12px;display:flex;align-items:center;gap:10px}
.sec-t::after{content:"";flex:1;height:1px;background:var(--line)}

/* KPI */
.kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.kpi{padding:16px 16px 14px;position:relative;overflow:hidden;cursor:default;transition:transform .25s var(--ease),box-shadow .25s}
.kpi[data-go]{cursor:pointer}
.kpi[data-go]:hover{transform:translateY(-2px);box-shadow:var(--sh2)}
.kpi .l{font-size:12.5px;color:var(--mute);display:flex;align-items:center;gap:6px}
.kpi .v{font:600 34px/1.1 var(--num);margin-top:10px;letter-spacing:-.01em}
.kpi .d{font-size:12px;color:var(--mute);margin-top:4px}
.kpi.bad .v{color:var(--bad)} .kpi.warn .v{color:var(--warn)} .kpi.acc .v{color:var(--acc)}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block;background:var(--mute2);flex:none}
.dot.good{background:var(--good)}.dot.warn{background:var(--warn)}.dot.bad{background:var(--bad)}.dot.acc,.dot.info{background:var(--acc)}

/* hero */
.hero{display:flex;align-items:flex-end;gap:20px;margin-bottom:22px;flex-wrap:wrap}
.hero h1{font-size:30px;margin:0;font-weight:650;letter-spacing:-.01em}
.hero p{margin:8px 0 0;color:var(--ink2);font-size:14.5px}
.hero p b{font-weight:650}
.hero .date{margin-left:auto;text-align:right;color:var(--mute);font-size:12.5px;line-height:1.5}
.hero .date .num{font-size:22px;color:var(--ink);display:block}

/* chips & badges */
.chip{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:6px;background:#F0EEE8;color:var(--ink2);font-size:12px;white-space:nowrap;font-weight:500}
.chip.good{background:var(--good-soft);color:var(--good)}
.chip.warn{background:var(--warn-soft);color:var(--warn)}
.chip.bad{background:var(--bad-soft);color:var(--bad)}
.chip.info,.chip.acc{background:var(--acc-soft);color:var(--acc-ink)}
.chip.ink{background:var(--ink);color:#fff}
.chip.line{background:transparent;border:1px solid var(--line)}
.chip.mute{background:#F0EEE8;color:var(--mute)}
.chip.demo{background:#FFF4D6;color:#8A5A00;border:1px dashed #E9C46A}
.brand-UYAAI{background:#FFE9F0;color:#C2185B}.brand-Mislens{background:#E8F1FF;color:#1F5BD8}.brand-Fresh{background:#E7F7EF;color:#0F8A5F}.brand-Mystic{background:#F3EBFF;color:#7A3FD6}
.tag-fact,.tag-sug,.tag-tbd{display:inline-block;font-size:11px;padding:1px 6px;border-radius:5px;margin-right:6px;vertical-align:1px;font-weight:600;letter-spacing:.04em}
.tag-fact{background:#EDECE7;color:#55544F}.tag-sug{background:var(--acc-soft);color:var(--acc-ink)}.tag-tbd{background:var(--warn-soft);color:var(--warn)}

/* forms */
.inp,.sel,textarea.inp{height:36px;border:1px solid var(--line);background:var(--panel);border-radius:9px;padding:0 11px;outline:none;transition:border-color .2s,box-shadow .2s;min-width:0}
textarea.inp{height:auto;min-height:84px;padding:9px 11px;resize:vertical;line-height:1.6;width:100%}
.inp:focus,.sel:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(54,64,242,.12)}
.sel{appearance:none;padding-right:30px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238B8982' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center}
.search{position:relative;flex:1;min-width:200px;max-width:340px}
.search input{width:100%;height:38px;border-radius:19px;padding-left:38px;background:var(--panel)}
.search svg{position:absolute;left:13px;top:11px;width:16px;height:16px;color:var(--mute)}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field>label{font-size:12.5px;color:var(--ink2);font-weight:550}
.field>label em{color:var(--bad);font-style:normal;margin-left:2px}
.field .help{font-size:12px;color:var(--mute)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row>.grow{flex:1}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
.seg{display:inline-flex;background:#ECEAE4;border-radius:10px;padding:3px;gap:2px;flex-wrap:wrap}
.seg button{border:0;background:transparent;height:30px;padding:0 12px;border-radius:8px;cursor:pointer;font-size:13px;color:var(--ink2);transition:background .2s,color .2s,box-shadow .2s}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08);font-weight:550}
.pills{display:flex;flex-wrap:wrap;gap:6px}
.pill{border:1px solid var(--line);background:#fff;border-radius:18px;height:32px;padding:0 13px;cursor:pointer;font-size:13px;transition:all .2s var(--ease)}
.pill:hover{border-color:#C9C5BB}
.pill.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.pill.on.bad{background:var(--bad);border-color:var(--bad)}
.pill.on.warn{background:var(--warn);border-color:var(--warn)}
.pill.on.good{background:var(--good);border-color:var(--good)}
.toggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--ink2);user-select:none}
.toggle input{display:none}
.toggle i{width:32px;height:19px;border-radius:10px;background:#D8D5CD;position:relative;transition:background .2s}
.toggle i::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:#fff;transition:transform .25s var(--ease);box-shadow:0 1px 2px rgba(0,0,0,.2)}
.toggle input:checked+i{background:var(--acc)}
.toggle input:checked+i::after{transform:translateX(13px)}

/* toolbar */
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.toolbar .sp{flex:1}
.count-line{font-size:12.5px;color:var(--mute);margin:-4px 0 14px}

/* product cards */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.pc{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;display:flex;flex-direction:column}
.pc:hover{transform:translateY(-3px);box-shadow:var(--sh2);border-color:#D9D5CC}
.pc-img{aspect-ratio:1/1;background:#F1EFEA;position:relative;overflow:hidden}
.pc-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.pc:hover .pc-img img{transform:scale(1.05)}
.pc-img .noimg{position:absolute;inset:0;display:grid;place-items:center;color:var(--mute2);font:600 22px var(--num);letter-spacing:.06em}
.pc-img .tl{position:absolute;left:10px;top:10px;display:flex;gap:5px;flex-wrap:wrap}
.pc-img .tr{position:absolute;right:10px;top:10px}
.pc-b{padding:12px 14px 14px;display:flex;flex-direction:column;gap:9px;flex:1}
.pc-t{display:flex;align-items:baseline;gap:8px}
.pc-t b{font:650 17px/1.2 var(--num);letter-spacing:.01em}
.pc-t span{font-size:12px;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.whl{display:flex;flex-direction:column;gap:6px}
.whr{display:grid;grid-template-columns:62px 1fr 38px;gap:8px;align-items:center;font-size:12px}
.whr .n{color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.whr .d{font:600 12px var(--num);text-align:right;color:var(--ink2)}
.prog{height:6px;border-radius:4px;background:#EEECE6;position:relative;overflow:hidden;display:flex;gap:2px}
.prog i{flex:1;background:#E8E6DF;border-radius:2px;position:relative;overflow:hidden}
.prog i b{position:absolute;inset:0;width:0;border-radius:2px;transition:width 1s var(--ease)}
.prog i:nth-child(1) b{background:var(--s1)}.prog i:nth-child(2) b{background:var(--s2)}.prog i:nth-child(3) b{background:var(--s3)}
.prog.done i b{background:var(--s4)!important}
.prog.na{opacity:.45}
.pc-f{margin-top:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap}

/* tables */
.tbl-wrap{overflow:auto;border-radius:var(--r);border:1px solid var(--line);background:var(--panel)}
table.tbl{border-collapse:separate;border-spacing:0;width:100%;font-size:13px}
.tbl th{position:sticky;top:0;background:var(--panel2);text-align:left;font-weight:550;color:var(--ink2);font-size:12px;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap;z-index:1}
.tbl th[data-sort]{cursor:pointer}
.tbl th[data-sort]:hover{color:var(--ink)}
.tbl th .ar{opacity:.4;margin-left:3px}
.tbl td{padding:10px 12px;border-bottom:1px solid var(--line2);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background .15s}
.tbl tbody tr.click{cursor:pointer}
.tbl tbody tr:hover{background:#FBFAF7}
.tbl td.r,.tbl th.r{text-align:right}
.thumb{width:38px;height:38px;border-radius:8px;object-fit:cover;background:#F1EFEA;flex:none}
.thumb-n{width:38px;height:38px;border-radius:8px;background:#F1EFEA;display:grid;place-items:center;font-size:10px;color:var(--mute2)}
.pcell{display:flex;align-items:center;gap:10px;min-width:150px}
.pcell b{font:650 14px var(--num);display:block}
.pcell small{color:var(--mute);font-size:11.5px;display:block;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.blank{color:var(--mute2)}

/* lists */
.list{display:flex;flex-direction:column}
.li{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line2);cursor:pointer;transition:padding .2s var(--ease)}
.li:last-child{border-bottom:0}
.li:hover{padding-left:4px}
.li .grow{flex:1;min-width:0}
.li .t{font-weight:600;font-size:13.5px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.li .s{font-size:12px;color:var(--mute);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.empty{padding:34px 10px;text-align:center;color:var(--mute);font-size:13px}
.empty svg{width:34px;height:34px;opacity:.35;display:block;margin:0 auto 8px}

/* stage bar */
.stagebar{display:flex;height:12px;border-radius:7px;overflow:hidden;gap:2px;background:#EEECE6}
.stagebar span{height:100%;transition:flex-grow 1s var(--ease)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--ink2);margin-top:12px}
.legend span{display:flex;gap:6px;align-items:center}
.legend i{width:10px;height:10px;border-radius:3px}

/* product detail */
.phead{display:grid;grid-template-columns:168px 1fr;gap:24px;align-items:start;margin-bottom:6px}
.phead-img{width:168px;height:168px;border-radius:18px;overflow:hidden;background:#F1EFEA;border:1px solid var(--line);position:relative}
.phead-img img{width:100%;height:100%;object-fit:cover}
.phead h1{font:650 36px/1.05 var(--num);margin:4px 0 6px;letter-spacing:.005em}
.phead .nm{font-size:15px;color:var(--ink2)}
.meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px;font-size:13px}
.meta div{display:flex;flex-direction:column}
.meta small{color:var(--mute);font-size:11.5px}
.meta b{font-weight:550}
.wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px}
.wc{padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.wc-h{display:flex;align-items:center;gap:8px}
.wc-h b{font-size:15px}
.wc-h .r{margin-left:auto;display:flex;gap:4px}
.wc-day{display:flex;align-items:baseline;gap:8px}
.wc-day>.num{font-size:30px;font-weight:600;line-height:1}
.timeline{position:relative;height:34px;margin:4px 0 2px}
.timeline .rail{position:absolute;left:0;right:0;top:13px;height:8px;border-radius:5px;background:#EEECE6;display:flex;gap:2px;overflow:hidden}
.timeline .rail i{flex:1;background:#E6E4DD}
.timeline .fill{position:absolute;left:0;top:13px;height:8px;border-radius:5px;background:linear-gradient(90deg,var(--s1),var(--s2) 50%,var(--s3));width:0;transition:width 1.2s var(--ease)}
.timeline .nd{position:absolute;top:6px;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:#fff;border:2px solid var(--mute2);display:grid;place-items:center;font:700 8.5px var(--num);color:var(--mute);z-index:2}
.timeline .nd.due{border-color:var(--warn);color:var(--warn)}
.timeline .nd.overdue{border-color:var(--bad);color:#fff;background:var(--bad)}
.timeline .nd.done{border-color:var(--good);background:var(--good);color:#fff}
.timeline .nd.doing{border-color:var(--acc);color:var(--acc)}
.timeline .nd.skipped{border-style:dashed}
.timeline .ev{position:absolute;top:0;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--warn);z-index:3}
.timeline .now{position:absolute;top:0;bottom:0;width:2px;background:var(--ink);margin-left:-1px;z-index:1;border-radius:2px}
.stg3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stg{border:1px solid var(--line2);background:var(--panel2);border-radius:10px;padding:9px 10px}
.stg small{display:block;font-size:11px;color:var(--mute)}
.stg .num{font-size:20px;font-weight:600;line-height:1.3}
.stg .pos{font-size:11px;color:var(--ink2)}
.stg.cur{border-color:#C9CCFD;background:#F6F6FF}
.kv{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;font-size:12px}
.kv div{display:flex;flex-direction:column}
.kv small{color:var(--mute);font-size:11px}
.kv b{font:600 14px var(--num)}
.hint{border-radius:10px;padding:10px 12px;font-size:12.5px;line-height:1.55;display:flex;gap:9px}
.hint b{display:block;font-size:13px;margin-bottom:1px}
.hint.good{background:var(--good-soft);color:#0A6F4C}.hint.warn{background:var(--warn-soft);color:#8A5300}.hint.bad{background:var(--bad-soft);color:#A82226}.hint.info{background:var(--info-soft);color:var(--acc-ink)}.hint.mute{background:#F1EFEA;color:var(--ink2)}
.flags{display:flex;flex-direction:column;gap:4px}
.flag{font-size:12px;display:flex;gap:7px;align-items:flex-start;color:var(--ink2)}
.flag .dot{margin-top:7px}
.spark{width:100%;height:40px}
.spark path.l{fill:none;stroke:var(--acc);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:400;stroke-dashoffset:400;animation:draw 1.4s var(--ease) .2s forwards}
.spark path.a{fill:url(#sg);opacity:.9}
@keyframes draw{to{stroke-dashoffset:0}}

/* tabs */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:30px 0 16px;overflow-x:auto}
.tabs button{border:0;background:none;padding:10px 12px 11px;cursor:pointer;color:var(--mute);font-size:14px;position:relative;white-space:nowrap}
.tabs button:hover{color:var(--ink)}
.tabs button.on{color:var(--ink);font-weight:600}
.tabs button.on::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;background:var(--ink);border-radius:2px}
.tabs button .n{font:600 11px var(--num);color:var(--mute);margin-left:4px}

/* review */
.flow{display:flex;align-items:center;gap:0;margin:2px 0 22px;flex-wrap:wrap}
.flow .st{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mute)}
.flow .st i{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--mute2);display:grid;place-items:center;font:600 11px var(--num);background:#fff}
.flow .st.done i{background:var(--ink);border-color:var(--ink);color:#fff}
.flow .st.cur i{border-color:var(--acc);color:var(--acc);box-shadow:0 0 0 4px rgba(54,64,242,.12)}
.flow .st.cur{color:var(--ink);font-weight:600}
.flow .st.rej i{border-color:var(--bad);background:var(--bad);color:#fff}
.flow .ln{width:38px;height:1.5px;background:var(--line);margin:0 8px}
.flow .ln.done{background:var(--ink)}
.facts table{font-size:12.5px}
.facts .tbl td,.facts .tbl th{padding:8px 10px}
.opt-grid{display:flex;flex-wrap:wrap;gap:6px}
.opt{border:1px solid var(--line);background:#fff;border-radius:9px;padding:7px 12px;cursor:pointer;font-size:13px;transition:all .18s var(--ease)}
.opt:hover{border-color:#C3BFB5}
.opt.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.opt small{display:block;font-size:11px;opacity:.7}
.act-row{display:grid;grid-template-columns:1.6fr .8fr .9fr .9fr 32px;gap:8px;margin-bottom:8px;align-items:center}
.act-row .inp,.act-row .sel{width:100%;height:34px;font-size:13px}
.block{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--panel2);margin-bottom:12px}
.block h4{margin:0 0 6px;font-size:12px;color:var(--mute);font-weight:550;letter-spacing:.06em}
.block p{margin:0;white-space:pre-wrap;font-size:13.5px}
.sticky-side{position:sticky;top:20px}
.log{display:flex;flex-direction:column;gap:0;position:relative;padding-left:16px}
.log::before{content:"";position:absolute;left:4px;top:6px;bottom:6px;width:1px;background:var(--line)}
.log .e{position:relative;padding:5px 0 9px;font-size:12.5px}
.log .e::before{content:"";position:absolute;left:-15px;top:11px;width:7px;height:7px;border-radius:50%;background:var(--mute2);border:2px solid var(--panel)}
.log .e b{font-weight:600}
.log .e small{color:var(--mute);display:block}

/* kanban */
.kanban{display:grid;grid-template-columns:repeat(4,minmax(240px,1fr));gap:14px;overflow-x:auto;padding-bottom:6px}
.col{background:#ECEAE4;border-radius:var(--r);padding:12px;min-height:300px;transition:background .2s}
.col.over{background:#E2E3FB}
.col-h{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;margin:2px 4px 12px}
.col-h .num{color:var(--mute);font-weight:600}
.kc{background:#fff;border-radius:11px;padding:12px;margin-bottom:9px;box-shadow:0 1px 2px rgba(0,0,0,.05);cursor:grab;border:1px solid transparent;transition:transform .2s var(--ease),box-shadow .2s,border-color .2s}
.kc:hover{box-shadow:var(--sh2)}
.kc.dragging{opacity:.4;transform:rotate(1.5deg)}
.kc .t{font-size:13.5px;font-weight:600;line-height:1.45}
.kc .m{display:flex;gap:6px;align-items:center;margin-top:8px;flex-wrap:wrap;font-size:12px;color:var(--mute)}
.kc .p{display:flex;align-items:center;gap:7px;margin-top:9px;font-size:12px}
.kc .p img,.kc .p .thumb-n{width:22px;height:22px;border-radius:5px;object-fit:cover}
.kc.late{border-color:#F3C9CA}

/* import */
.imp-types{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.imp-t{padding:16px;cursor:pointer;transition:all .25s var(--ease);position:relative}
.imp-t:hover{transform:translateY(-2px);box-shadow:var(--sh2)}
.imp-t.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.imp-t b{display:block;font-size:14.5px;margin:8px 0 4px}
.imp-t p{margin:0;font-size:12.5px;color:var(--mute);line-height:1.55}
.imp-t .ic{width:34px;height:34px;border-radius:9px;background:#F1EFEA;display:grid;place-items:center}
.imp-t .ic svg{width:18px;height:18px}
.drop{border:1.5px dashed #CFCBC1;border-radius:var(--r);padding:34px;text-align:center;background:var(--panel2);cursor:pointer;transition:all .2s}
.drop:hover,.drop.over{border-color:var(--acc);background:#F6F6FF}
.drop b{display:block;font-size:15px;margin-bottom:4px}
.mapgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px 14px}
.mapgrid .field{margin:0}
.steps{display:flex;gap:6px;margin-bottom:18px;flex-wrap:wrap}
.steps span{font-size:12.5px;padding:5px 11px;border-radius:15px;background:#ECEAE4;color:var(--mute)}
.steps span.on{background:var(--ink);color:#fff}
.steps span.done{background:#DCDAD3;color:var(--ink2)}

/* SOP */
.sop{display:grid;grid-template-columns:230px minmax(0,1fr);gap:30px;align-items:start}
.toc{position:sticky;top:24px;display:flex;flex-direction:column;gap:1px}
.toc a{padding:7px 10px;border-radius:8px;font-size:13px;color:var(--ink2);display:flex;gap:8px;transition:background .2s}
.toc a span{font:600 12px var(--num);color:var(--mute);width:18px}
.toc a:hover{background:#EAE8E2}
.toc a.on{background:var(--ink);color:#fff}
.toc a.on span{color:#9FA5FF}
.doc{max-width:900px}
.doc section{padding:6px 0 26px;border-bottom:1px solid var(--line);margin-bottom:26px;scroll-margin-top:20px}
.doc h2{font-size:22px;margin:6px 0 14px;display:flex;align-items:baseline;gap:12px;font-weight:650}
.doc h2 .num{font-size:15px;color:var(--acc);font-weight:600}
.doc h3{font-size:15px;margin:20px 0 8px}
.doc p,.doc li{font-size:14px;line-height:1.75;color:#2B2C31}
.doc ul,.doc ol{padding-left:20px;margin:6px 0}
.doc li{margin:3px 0}
.doc .tbl{font-size:12.8px}
.doc .tbl td{vertical-align:top}
.doc .note{background:var(--panel2);border:1px solid var(--line);border-left:3px solid var(--ink);border-radius:8px;padding:10px 14px;font-size:13px;margin:12px 0;color:var(--ink2)}
.doc .note.warn{border-left-color:var(--warn)}
.flowline{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:10px 0}
.flowline span{background:#fff;border:1px solid var(--line);border-radius:8px;padding:5px 10px;font-size:12.5px}
.flowline i{color:var(--mute2);font-style:normal}

/* checklist */
.ck{display:grid;grid-template-columns:28px 1fr 130px 120px;gap:12px;align-items:start;padding:12px 0;border-bottom:1px solid var(--line2)}
.ck:last-child{border-bottom:0}
.ck .box{width:22px;height:22px;border-radius:7px;border:1.5px solid var(--mute2);display:grid;place-items:center;cursor:pointer;transition:all .2s var(--ease);margin-top:1px}
.ck .box svg{width:13px;height:13px;color:#fff;opacity:0;transform:scale(.4);transition:all .25s var(--ease)}
.ck.done .box{background:var(--good);border-color:var(--good)}
.ck.done .box svg{opacity:1;transform:none}
.ck.doing .box{border-color:var(--acc);background:var(--acc-soft)}
.ck b{font-size:13.5px;font-weight:600}
.ck.done b{color:var(--mute);text-decoration:line-through;text-decoration-color:var(--mute2)}
.ck p{margin:2px 0 0;font-size:12.5px;color:var(--mute)}
.ck .nt{font-size:12px;color:var(--ink2);margin-top:4px}
.ring{width:84px;height:84px;position:relative;flex:none}
.ring svg{transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:8}
.ring .bg{stroke:#ECEAE4}
.ring .fg{stroke:var(--good);stroke-linecap:round;transition:stroke-dashoffset 1.2s var(--ease)}
.ring .c{position:absolute;inset:0;display:grid;place-items:center;font:600 18px var(--num)}
.weeks{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.wk{padding:14px;border-radius:12px;background:var(--panel);border:1px solid var(--line);position:relative}
.wk .w{font:600 12px var(--num);color:var(--acc);letter-spacing:.08em}
.wk b{display:block;font-size:14px;margin:4px 0 6px}
.wk ul{margin:0;padding-left:16px;font-size:12.5px;color:var(--ink2);line-height:1.6}
.wk.now{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}

/* modal */
.mask{position:fixed;inset:0;background:rgba(18,19,22,.42);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:grid;place-items:center;z-index:50;padding:20px;animation:fade .25s ease both}
.mask.out{animation:fade .2s ease reverse both}
.modal{background:var(--panel);border-radius:18px;width:min(560px,100%);max-height:calc(100vh - 40px);display:flex;flex-direction:column;box-shadow:0 30px 80px -20px rgba(0,0,0,.35);animation:pop .35s var(--ease) both}
.modal.wide{width:min(860px,100%)}
.mask.out .modal{animation:pop .2s ease reverse both}
.modal-h{padding:20px 22px 8px;display:flex;align-items:flex-start;gap:12px}
.modal-h h3{margin:0;font-size:18px;font-weight:650}
.modal-h p{margin:4px 0 0;font-size:13px;color:var(--mute)}
.modal-h .icon-btn{margin-left:auto;margin-top:-4px}
.modal-b{padding:12px 22px;overflow:auto}
.modal-f{padding:14px 22px 20px;display:flex;gap:8px;justify-content:flex-end;border-top:1px solid var(--line2)}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}

/* toast */
#toast-root{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:80;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:var(--ink);color:#fff;padding:10px 16px;border-radius:12px;font-size:13.5px;box-shadow:0 10px 30px -8px rgba(0,0,0,.4);animation:toast .4s var(--ease) both;display:flex;gap:9px;align-items:center;max-width:90vw}
.toast.err{background:var(--bad)}
.toast.out{animation:toast .25s ease reverse both}
@keyframes toast{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}

/* login */
.login{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}
.login-art{background:var(--side);color:var(--side-ink);padding:48px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.login-art .brand{padding:0}
.login-art h2{font-size:44px;line-height:1.15;margin:auto 0 18px;font-weight:650;letter-spacing:-.01em;position:relative;z-index:2}
.login-art h2 em{font-style:normal;color:#9FA5FF}
.login-art p{color:#9C9B95;max-width:430px;font-size:14.5px;line-height:1.8;position:relative;z-index:2;margin:0}
.login-art .foot{margin-top:40px;font-size:11.5px;color:#5D5C59;letter-spacing:.08em;position:relative;z-index:2}
.iris{position:absolute;right:-140px;top:-120px;width:560px;height:560px;opacity:.9}
.iris circle{fill:none;stroke:#2A2B31}
.iris .r1{stroke:#7A82FF;stroke-width:1.5;stroke-dasharray:3 9;animation:rot 40s linear infinite;transform-origin:280px 280px}
.iris .r2{animation:rot 70s linear infinite reverse;transform-origin:280px 280px;stroke-dasharray:1 5}
@keyframes rot{to{transform:rotate(360deg)}}
.login-form{display:grid;place-items:center;padding:40px}
.login-form form{width:min(360px,100%)}
.login-form h3{font-size:24px;margin:0 0 6px}
.login-form .inp{width:100%;height:44px;font-size:15px}
.login-form .btn{width:100%;height:46px;font-size:15px;margin-top:8px}
.err-line{color:var(--bad);font-size:13px;min-height:20px;margin-top:6px}

/* misc */
.split{display:flex;gap:6px;align-items:center}
.kbd{font:500 11px var(--mono);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:0 5px;color:var(--mute)}
.bar-mini{display:inline-block;height:6px;border-radius:3px;background:var(--acc);vertical-align:middle}
.group-chips{display:flex;gap:8px;flex-wrap:wrap}
.group-chips a{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:10px;padding:4px 10px 4px 4px;font-size:12.5px;background:#fff}
.group-chips a img,.group-chips a .thumb-n{width:26px;height:26px;border-radius:6px}
.mobile-top{display:none}
.skel{background:linear-gradient(90deg,#ECEAE4 0%,#F5F4F0 50%,#ECEAE4 100%);background-size:200% 100%;animation:sk 1.2s linear infinite;border-radius:10px}
@keyframes sk{to{background-position:-200% 0}}

@media (max-width:1280px){.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.imp-types{grid-template-columns:repeat(2,minmax(0,1fr))}.weeks{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1024px){.g-main,.g2{grid-template-columns:1fr}.sop{grid-template-columns:1fr}.toc{position:static;flex-direction:row;flex-wrap:wrap}.kanban{grid-template-columns:repeat(4,260px)}}
@media (max-width:860px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;bottom:0;width:250px;z-index:40;transform:translateX(-100%);transition:transform .35s var(--ease)}
  .shell.nav-open .side{transform:none;box-shadow:20px 0 60px rgba(0,0,0,.3)}
  .mobile-top{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--side);color:#fff;position:sticky;top:0;z-index:30}
  .mobile-top .icon-btn{color:#fff}
  .main{padding:20px 16px 60px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .phead{grid-template-columns:96px 1fr;gap:14px}.phead-img{width:96px;height:96px}.phead h1{font-size:26px}
  .login{grid-template-columns:1fr}.login-art{min-height:300px;padding:28px}.login-art h2{font-size:30px;margin-top:60px}
  .fgrid{grid-template-columns:1fr}
  .act-row{grid-template-columns:1fr 1fr}.act-row>:first-child{grid-column:1/-1}
  .imp-types,.weeks{grid-template-columns:1fr}
  .ck{grid-template-columns:28px 1fr}.ck>:nth-child(n+3){grid-column:2}
  .wgrid{grid-template-columns:1fr}
  .top h1{font-size:23px}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.toast svg{width:16px;height:16px;flex:none}
.field>.btn{align-self:flex-start}
.facts td:first-child{white-space:nowrap}

.ref{border:1px solid #F0E3C8;background:#FFFBF3;border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:7px;font-size:12px}
.ref-h{display:flex;align-items:center;gap:6px;font-size:12px}
.ref-h svg{width:14px;height:14px;color:#D9761A}
.ref-r{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;color:var(--ink2)}
.ref-r>span:first-child{color:var(--mute);min-width:84px}
.ref-r b{font-size:13px}

.dpick{display:flex;flex-direction:column;gap:8px}
.deptsel{display:flex;align-items:center;gap:12px;padding:9px 9px 9px 11px;border-radius:12px;border:1px solid var(--ink);background:#fff;animation:pop .4s var(--ease) both}
.deptsel b{display:block;font-size:14.5px}.deptsel small{font-size:12px;color:var(--mute)}
.dicon{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#C9CCFD,#7A82FF);display:grid;place-items:center;color:#fff;flex:none}.dicon svg{width:17px;height:17px}
.sugs{display:flex;flex-direction:column;gap:6px}
.sug{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border-radius:11px;border:1px solid var(--line);background:#fff;cursor:pointer;transition:all .3s var(--ease);animation:rise .4s var(--ease) backwards}
.sug:hover{border-color:var(--ink);transform:translateX(3px)}
.sug b{display:block;font-size:13.5px}.sug small{font-size:11.5px;color:var(--mute)}
.hitpill{font-size:11px;padding:2px 8px;border-radius:999px;background:var(--acc-soft);color:var(--acc-ink);white-space:nowrap}
.casc{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.ccol{max-height:260px;overflow:auto;padding:5px;display:flex;flex-direction:column;gap:2px}
.cbtn{display:flex;align-items:center;gap:6px;min-height:34px;padding:0 9px;border:0;border-radius:8px;background:transparent;cursor:pointer;font-size:13px;text-align:left;transition:background .2s}
.cbtn:hover{background:#F1EFEA}.cbtn.on{background:var(--ink);color:#fff}
.okmark{width:58px;height:58px;border-radius:50%;background:var(--good);color:#fff;display:grid;place-items:center;margin:0 auto;animation:pop .5s var(--ease) both}.okmark svg{width:28px;height:28px}
.login-form{overflow:auto}