:root{
  --bg:#F4F7FA; --panel:#FFFFFF; --line:#E2E8F0; --line2:#EDF2F7;
  --ink:#0E1A2B; --ink2:#41506A; --ink3:#7B889B; --ink4:#A9B4C3;
  --blue:#0A6CFF; --blue2:#3A8BFF; --blue-50:#EEF4FF; --blue-100:#DCE8FF;
  --cyan:#00B8D9; --green:#12B886; --amber:#F59F00; --red:#F03E3E;
  --hud:rgba(10,108,255,.7);
  --mono:"JetBrains Mono","Cascadia Code",Consolas,"SFMono-Regular",monospace;
  --sans:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
  --side:232px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scrollbar-width:thin;scrollbar-color:#C9D4E3 transparent}
body{font-family:var(--sans);font-size:14px;line-height:1.5;color:var(--ink);background:var(--bg);overflow-x:hidden;-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
svg{display:block}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ============ background ============ */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg .grid{position:absolute;inset:0;overflow:hidden;
  -webkit-mask-image:radial-gradient(ellipse 85% 75% at 58% 32%,#000 25%,rgba(0,0,0,.3) 100%);
          mask-image:radial-gradient(ellipse 85% 75% at 58% 32%,#000 25%,rgba(0,0,0,.3) 100%)}
/* 网格放在伪元素上做缓慢漂移：位移恰好一个大格（140px）后无缝循环，只动 transform，走合成层 */
.bg .grid::before{content:'';position:absolute;left:-140px;top:-140px;right:0;bottom:0;will-change:transform;
  background-image:linear-gradient(rgba(10,108,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(10,108,255,.055) 1px,transparent 1px),
  linear-gradient(rgba(10,108,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(10,108,255,.07) 1px,transparent 1px);
  background-size:28px 28px,28px 28px,140px 140px,140px 140px;animation:gridDrift 48s linear infinite}
@keyframes gridDrift{to{transform:translate3d(140px,140px,0)}}
.bg .g3{width:620px;height:620px;left:34%;top:42%;filter:none;opacity:1;background:radial-gradient(circle,rgba(10,108,255,.07),rgba(0,184,217,.035) 40%,transparent 68%);animation:drift3 38s ease-in-out infinite alternate}
@keyframes drift3{0%{transform:translate(-160px,-60px) scale(.9)}100%{transform:translate(180px,90px) scale(1.15)}}
.bg .spot{position:absolute;left:0;top:0;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;opacity:0;transition:opacity .6s;
  background:radial-gradient(circle,rgba(10,108,255,.075),rgba(0,184,217,.03) 38%,transparent 66%);transform:translate3d(var(--sx,50vw),var(--sy,40vh),0);will-change:transform}
.bg.spot-on .spot{opacity:1}
.bg canvas.fxc{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.2s}
.bg canvas.fxc.on{opacity:1}
.bg .rings{position:absolute;left:62%;top:30%;width:1500px;height:1500px;margin:-750px 0 0 -750px;border-radius:50%;
  background:repeating-radial-gradient(circle,transparent 0 139px,rgba(10,108,255,.06) 140px 141px);
  -webkit-mask-image:radial-gradient(circle,#000 0,#000 30%,transparent 66%);mask-image:radial-gradient(circle,#000 0,#000 30%,transparent 66%)}
.bg .sweep{position:absolute;left:62%;top:30%;width:1500px;height:1500px;margin:-750px 0 0 -750px;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(10,108,255,.075) 26deg,rgba(0,184,217,.03) 50deg,transparent 62deg,transparent 360deg);
  animation:spin 24s linear infinite;
  -webkit-mask-image:radial-gradient(circle,#000 0,#000 30%,transparent 66%);mask-image:radial-gradient(circle,#000 0,#000 30%,transparent 66%)}
.bg .glow{position:absolute;border-radius:50%;filter:blur(80px);opacity:.55}
.bg .g1{width:520px;height:520px;left:18%;top:-160px;background:#D9E8FF;animation:drift 26s ease-in-out infinite alternate}
.bg .g2{width:460px;height:460px;right:-120px;bottom:-140px;background:#D4F4FA;animation:drift 32s ease-in-out infinite alternate-reverse}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes drift{to{transform:translate(120px,80px) scale(1.1)}}

/* ============ layout ============ */
.app{position:relative;z-index:1;display:grid;grid-template-columns:var(--side) minmax(0,1fr);min-height:100vh}

/* sidebar */
.side{position:sticky;top:0;height:100vh;overflow-y:auto;overflow-x:hidden;background:rgba(255,255,255,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-right:1px solid var(--line);padding:16px 12px 52px;display:flex;flex-direction:column;scrollbar-width:none}
.side::-webkit-scrollbar{display:none}
.brand{position:relative;display:flex;gap:10px;align-items:center;padding:2px 6px 14px;border-bottom:1px dashed var(--line);margin-bottom:4px;min-width:0}
.brand::after{content:'';position:absolute;left:6px;bottom:-1px;width:42px;height:1px;background:linear-gradient(90deg,var(--blue),var(--cyan))}
.brand .logo-w{position:relative;width:40px;height:40px;flex:none;display:grid;place-items:center}
.brand .logo-w::before{content:'';position:absolute;inset:-3px;border-radius:50%;border:1px dashed rgba(10,108,255,.35);animation:spin 18s linear infinite}
.brand .logo-w::after{content:'';position:absolute;right:-2px;top:2px;width:7px;height:7px;border-radius:50%;background:var(--green);border:2px solid #fff;box-shadow:0 0 0 0 rgba(18,184,134,.5);animation:brandPing 2.4s ease-out infinite}
@keyframes brandPing{0%{box-shadow:0 0 0 0 rgba(18,184,134,.55)}70%,100%{box-shadow:0 0 0 7px rgba(18,184,134,0)}}
.brand .logo{width:38px;height:38px;flex:none;filter:drop-shadow(0 4px 10px rgba(10,108,255,.28))}
.brand > div{min-width:0}
.brand b{font-size:18px;letter-spacing:.06em;display:flex;align-items:baseline;gap:6px;line-height:1.2;
  background:linear-gradient(100deg,var(--ink) 30%,var(--blue) 60%,var(--ink) 90%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:brandShine 9s ease-in-out infinite}
.brand b em{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--blue);-webkit-text-fill-color:var(--blue);font-weight:600}
@keyframes brandShine{0%,100%{background-position:100% 0}50%{background-position:0 0}}
.brand small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--ink3);text-transform:uppercase;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-sub{position:relative;font-size:12px;color:var(--ink2);margin:8px 2px 0;padding:6px 8px 6px 10px;line-height:1.5;border-radius:4px;background:linear-gradient(100deg,rgba(10,108,255,.06),rgba(0,184,217,.02) 70%,transparent)}
.brand-sub::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:2px;border-radius:2px;background:linear-gradient(var(--blue),var(--cyan))}
.nav-h{display:flex;align-items:center;gap:7px;font-size:10.5px;letter-spacing:.16em;color:var(--ink3);font-family:var(--mono);text-transform:uppercase;padding:14px 10px 6px;white-space:nowrap}
.nav-h::before{content:'';width:5px;height:5px;flex:none;border:1.5px solid var(--blue);border-radius:1px;transform:rotate(45deg);opacity:.7}
.nav-h::after{content:'';flex:1;min-width:8px;height:1px;order:1;background:repeating-linear-gradient(90deg,#D5DEEA 0 3px,transparent 3px 6px)}
.nav-h i{order:2;font-style:normal;color:var(--ink4);font-size:10.5px;padding:0 5px;border:1px solid var(--line);border-radius:3px;line-height:15px;letter-spacing:.04em;background:#fff}
.nav-i{position:relative;display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:6px;color:var(--ink2);cursor:pointer;transition:background .2s,color .2s;font-size:14px;white-space:nowrap;user-select:none}
.nav-i svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.nav-i:hover{background:#F1F6FF;color:var(--ink)}
.nav-i.on{background:linear-gradient(90deg,rgba(10,108,255,.13),rgba(10,108,255,.02));color:var(--blue);font-weight:600}
.nav-i.on::before{content:'';position:absolute;left:-12px;top:6px;bottom:6px;width:3px;border-radius:0 3px 3px 0;background:var(--blue);box-shadow:0 0 10px var(--blue)}
.nav-i.on svg{filter:drop-shadow(0 0 4px rgba(10,108,255,.35))}
.nav-i:hover svg{transform:translateX(1px)}
.nav-i svg{transition:transform .2s}
.nav-i .bd{margin-left:auto;font-family:var(--mono);font-size:11px;line-height:16px;padding:0 6px;border-radius:9px;background:var(--blue-50);color:var(--blue);font-weight:500;box-shadow:inset 0 0 0 1px rgba(10,108,255,.16);font-variant-numeric:tabular-nums}
.nav-i .bd.r{background:#FFEDED;color:var(--red);box-shadow:inset 0 0 0 1px rgba(240,62,62,.2);animation:bdPulse 2.6s ease-out infinite}
.nav-i .bd.g{background:#E6F8F2;color:var(--green);box-shadow:inset 0 0 0 1px rgba(18,184,134,.22);display:inline-flex;align-items:center;gap:4px}
.nav-i .bd.g::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;animation:blink 1.6s steps(1) infinite}
.nav-i .bd[data-badge].g::before{display:none}
@keyframes bdPulse{0%{box-shadow:inset 0 0 0 1px rgba(240,62,62,.2),0 0 0 0 rgba(240,62,62,.35)}70%,100%{box-shadow:inset 0 0 0 1px rgba(240,62,62,.2),0 0 0 6px rgba(240,62,62,0)}}
.nav-sub{margin:1px 0 2px 18px;padding-left:8px;border-left:1px dashed #D5DEEA}
.nav-sub .nav-i{padding:5px 10px;font-size:13.5px}
.side-card{margin-top:18px;border:1px solid var(--line);border-radius:8px;padding:12px;background:linear-gradient(160deg,#F7FAFF,#fff);position:relative;overflow:hidden}
.side-card::after{content:'';position:absolute;right:-30px;top:-30px;width:90px;height:90px;border-radius:50%;border:1px dashed rgba(10,108,255,.25)}
.side-card .k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--blue);text-transform:uppercase}
.side-card b{display:block;font-size:14px;margin:4px 0 2px}
.side-card p{font-size:12px;color:var(--ink3)}
.side-card .pg{height:4px;border-radius:2px;background:var(--line2);margin:10px 0 6px;overflow:hidden}
.side-card .pg i{position:relative;display:block;height:100%;width:62%;background:linear-gradient(90deg,var(--blue),var(--cyan));border-radius:2px;overflow:hidden;transform-origin:left;animation:pgIn 1.4s cubic-bezier(.2,.7,.2,1) .4s both}
.side-card .pg i::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);transform:translateX(-100%);animation:pgSheen 2.8s ease-in-out 1.8s infinite}
@keyframes pgIn{from{transform:scaleX(0)}}
@keyframes pgSheen{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
.side-card .row{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink3)}

/* topbar */
.main{min-width:0;padding-bottom:52px}
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;height:60px;padding:0 20px;background:rgba(244,247,250,.84);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.top::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--blue),var(--cyan),transparent) no-repeat;background-size:30% 100%;animation:scanx 7s linear infinite}
.top::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent 0 44%,rgba(10,108,255,.06) 49%,rgba(0,184,217,.09) 50%,rgba(10,108,255,.04) 51%,transparent 56%) no-repeat;background-size:60% 100%;background-position:-80% 0;animation:topScan 11s cubic-bezier(.5,0,.5,1) 1.5s infinite}
@keyframes topScan{0%{background-position:-80% 0}45%,100%{background-position:180% 0}}
@keyframes scanx{from{background-position:-40% 0}to{background-position:140% 0}}
/* 标题区可收缩：长标题（如“课程资料 · 论文库 / 标准库 / 漏洞库”）在空间不够时省略号截断，不挤压右侧用户区 */
.ttl{flex:0 1 auto;min-width:120px;position:relative;padding-left:12px}
.ttl::before{content:'';position:absolute;left:0;top:4px;bottom:4px;width:6px;border:1.5px solid var(--blue);border-right:0;opacity:.75}
.ttl .crumb{font-size:12px;color:var(--ink3);display:flex;gap:6px;align-items:center}
.ttl .crumb b{color:var(--ink2);font-weight:500}
.ttl h1{font-size:17px;font-weight:700;display:block;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ttl h1 em{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:var(--blue);font-weight:500;margin-left:8px}
.ttl .crumb{white-space:nowrap;overflow:hidden}
.ttl h1 em::after{content:'_';margin-left:1px;animation:blink 1.1s steps(1) infinite}
.search{flex:1;min-width:160px;max-width:420px;margin-left:12px;display:flex;align-items:center;gap:8px;height:34px;padding:0 10px;border:1px solid var(--line);background:#fff;border-radius:7px;transition:.2s}
.search:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(10,108,255,.12)}
.search svg{width:15px;height:15px;stroke:var(--ink3);fill:none;stroke-width:1.8;flex:none}
.search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:13.5px}
.search input::placeholder{color:var(--ink4)}
.search kbd{font-family:var(--mono);font-size:11px;color:var(--ink3);border:1px solid var(--line);border-radius:4px;padding:0 5px;background:var(--bg)}
.tb-r{margin-left:auto;display:flex;align-items:center;gap:10px}
.pill{display:flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:1px solid #CDEFE3;background:#F1FBF7;border-radius:14px;font-size:12.5px;color:#0B8F69;white-space:nowrap}
.dot{width:7px;height:7px;border-radius:50%;background:var(--green);position:relative;flex:none}
.dot::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1.5px solid currentColor;opacity:0;animation:ping 2s ease-out infinite}
.dot.g{color:var(--green)}.dot.r{background:var(--red);color:var(--red)}.dot.a{background:var(--amber);color:var(--amber)}.dot.b{background:var(--blue);color:var(--blue)}
@keyframes ping{0%{transform:scale(.6);opacity:.8}100%{transform:scale(1.8);opacity:0}}
.clock{font-family:var(--mono);text-align:right;line-height:1.2;white-space:nowrap}
.clock b{font-size:16px;font-weight:600;letter-spacing:.04em;display:block}
.clock small{font-size:10.5px;color:var(--ink3);letter-spacing:.08em}
.role{position:relative;display:flex;padding:3px;border:1px solid var(--line);border-radius:8px;background:#fff}
.role button{position:relative;z-index:1;height:26px;padding:0 13px;font-size:13px;color:var(--ink3);border-radius:6px;transition:color .25s}
.role button.on{color:#fff;font-weight:600}
.role .ind{position:absolute;top:3px;bottom:3px;border-radius:6px;background:linear-gradient(135deg,var(--blue),#2C86FF);box-shadow:0 4px 10px -2px rgba(10,108,255,.45);transition:left .3s cubic-bezier(.3,.8,.3,1),width .3s}
.ibtn{position:relative;width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;background:#fff;transition:.2s}
.ibtn:hover{border-color:var(--blue);color:var(--blue)}
.ibtn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ibtn .n{position:absolute;top:-5px;right:-5px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--red);color:#fff;font-size:10.5px;font-family:var(--mono);display:grid;place-items:center;border:2px solid var(--bg)}
.me{display:flex;align-items:center;gap:8px;padding-left:10px;border-left:1px solid var(--line)}
.av{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:#fff;font-weight:600;font-size:14px;background:linear-gradient(135deg,#3A8BFF,#00B8D9);flex:none}
.me b{display:block;font-size:13.5px;line-height:1.2;white-space:nowrap}
.me small{white-space:nowrap}
.tb-r{flex:none}
.me small{font-size:11.5px;color:var(--ink3)}
.me-link{display:flex;align-items:center;gap:8px;padding:3px 8px 3px 3px;margin-left:-3px;border-radius:9px;border:1px solid transparent;transition:border-color .2s,background .2s,box-shadow .2s;flex:none}
.me-link:hover{border-color:rgba(10,108,255,.28);background:#fff;box-shadow:0 6px 16px -10px rgba(10,108,255,.45)}
.me-link:hover b,.me-link.on b{color:var(--blue)}
.me-link.on{border-color:rgba(10,108,255,.35);background:#fff}
.me-link .av{position:relative;box-shadow:0 4px 10px -4px rgba(10,108,255,.55)}
.me-link .av::after{content:'';position:absolute;right:-2px;bottom:-2px;width:8px;height:8px;border-radius:50%;background:var(--green);border:2px solid var(--bg)}

/* filter bar */
.filters{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:14px 20px 0}
.fl{display:flex;align-items:center;gap:8px}
.fl > span{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--ink3);text-transform:uppercase}
.sel{position:relative}
.sel select{appearance:none;-webkit-appearance:none;height:30px;padding:0 28px 0 10px;border:1px solid var(--line);border-radius:6px;background:#fff;font-size:13.5px;cursor:pointer;outline:0}
.sel select:focus{border-color:var(--blue)}
.sel::after{content:'';position:absolute;right:10px;top:12px;width:6px;height:6px;border-right:1.5px solid var(--ink3);border-bottom:1.5px solid var(--ink3);transform:rotate(45deg);pointer-events:none}
.seg{display:flex;padding:2px;border:1px solid var(--line);border-radius:6px;background:#fff}
.seg button{height:24px;padding:0 10px;font-size:13px;border-radius:4px;color:var(--ink2);transition:.2s;white-space:nowrap}
.seg button:hover{color:var(--blue)}
.seg button.on{background:var(--blue-50);color:var(--blue);font-weight:600;box-shadow:inset 0 0 0 1px rgba(10,108,255,.25)}
.sw{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none;font-size:13px;color:var(--ink2)}
.sw .tr{width:34px;height:19px;border-radius:10px;background:#CDD6E3;position:relative;transition:.25s}
.sw .tr::after{content:'';position:absolute;left:2px;top:2px;width:15px;height:15px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:.25s}
.sw.on .tr{background:var(--blue)}
.sw.on .tr::after{left:17px}
.sw .lv{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--red);display:flex;align-items:center;gap:5px}
.sw:not(.on) .lv{color:var(--ink4)}
.sw:not(.on) .lv .dot{background:var(--ink4)}
.sw:not(.on) .lv .dot::after{display:none}
.f-r{margin-left:auto;display:flex;align-items:center;gap:10px}
.upd{font-size:12px;color:var(--ink3);white-space:nowrap}
.upd b{font-family:var(--mono);color:var(--ink2);font-weight:500}
.btn{height:30px;padding:0 12px;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:6px;background:#fff;font-size:13px;color:var(--ink2);transition:.2s;white-space:nowrap}
.btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.btn:hover{border-color:var(--blue);color:var(--blue)}
.btn.pri{background:linear-gradient(135deg,var(--blue),#2C86FF);color:#fff;border-color:transparent;box-shadow:0 6px 14px -6px rgba(10,108,255,.6)}
.btn.pri:hover{filter:brightness(1.06);color:#fff}

/* board */
.board{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;padding:14px 20px 20px}
.s3{grid-column:span 3}.s4{grid-column:span 4}.s5{grid-column:span 5}.s7{grid-column:span 7}.s8{grid-column:span 8}.s12{grid-column:1/-1}

.panel{position:relative;display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);border-radius:4px;
  background:
   linear-gradient(var(--hud),var(--hud)) 0 0/10px 1.5px no-repeat,
   linear-gradient(var(--hud),var(--hud)) 0 0/1.5px 10px no-repeat,
   linear-gradient(var(--hud),var(--hud)) 100% 0/10px 1.5px no-repeat,
   linear-gradient(var(--hud),var(--hud)) 100% 0/1.5px 10px no-repeat,
   linear-gradient(var(--hud),var(--hud)) 0 100%/10px 1.5px no-repeat,
   linear-gradient(var(--hud),var(--hud)) 0 100%/1.5px 10px no-repeat,
   linear-gradient(var(--hud),var(--hud)) 100% 100%/10px 1.5px no-repeat,
   linear-gradient(var(--hud),var(--hud)) 100% 100%/1.5px 10px no-repeat,
   rgba(255,255,255,.93);
  box-shadow:0 1px 2px rgba(16,40,80,.04),0 10px 28px -16px rgba(16,40,80,.16);transition:border-color .25s,box-shadow .25s}
.panel:hover{border-color:rgba(10,108,255,.32);box-shadow:0 1px 2px rgba(16,40,80,.04),0 14px 34px -16px rgba(10,108,255,.25)}
.rise{opacity:0;transform:translateY(12px);animation:rise .75s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--d,0s)}
@keyframes rise{to{opacity:1;transform:none}}
.ph{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:12px 14px 8px}
.ph .eb{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--ink3);text-transform:uppercase;display:flex;gap:6px;align-items:center;white-space:nowrap}
.ph .eb b{color:var(--blue);font-weight:600}
.ph h3{font-size:15px;font-weight:600;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph h3 small{font-size:12px;font-weight:400;color:var(--ink3);margin-left:6px}
.ph > div:not(.ph-r){min-width:0}
.ph .eb{overflow:hidden;letter-spacing:.14em}
/* 空间不够时先让右侧工具区换行（收缩系数大），收缩到最小内容宽度后才截断左侧标题 */
.ph-r{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;flex:0 1000 auto;max-width:100%}
.pb{padding:0 14px 14px;flex:1;min-height:0;display:flex;flex-direction:column}
.chip{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px;border-radius:10px;font-size:12px;border:1px solid var(--line);background:#fff;color:var(--ink2);white-space:nowrap}
.chip i{width:7px;height:7px;border-radius:2px;flex:none}
.live{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--red);padding:0 8px;height:20px;border-radius:10px;background:#FFF1F1;border:1px solid #FFD6D6}
.live .dot{width:6px;height:6px}

/* KPI row */
.row1{grid-column:1/-1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) minmax(0,1.55fr);gap:14px}
.kpi{padding:12px 14px 10px;overflow:hidden}
.kpi::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 38%,rgba(10,108,255,.07) 50%,transparent 62%);transform:translateX(-110%);animation:sheen 7s ease-in-out infinite;animation-delay:calc(var(--d,0s) + 1.2s);pointer-events:none}
@keyframes sheen{0%,70%{transform:translateX(-110%)}100%{transform:translateX(110%)}}
.kl{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--ink3);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kl b{font-family:var(--sans);letter-spacing:.02em;color:var(--ink2);font-weight:500}
.kv{display:flex;align-items:baseline;gap:4px;margin-top:6px}
.kv .num{font-family:var(--mono);font-size:27px;font-weight:600;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums;transition:color .3s}
.kv .num.tick{color:var(--blue)}
.kv .ku{font-size:12.5px;color:var(--ink3);font-family:var(--mono)}
.kd{font-size:12px;font-family:var(--mono);margin-top:2px;display:flex;gap:6px;align-items:center;white-space:nowrap;overflow:hidden;min-width:0}
.kd em{font-style:normal;font-family:var(--sans);color:var(--ink3);min-width:0;overflow:hidden;text-overflow:ellipsis}
/* KPI / 雷达标签：英文小标一行（超长省略），中文标题独占第二行，窄卡片也能完整显示中文 */
.kpi .kl,.rl .kl{line-height:1.35}
.kpi .kl b,.rl .kl b{display:block;font-size:13px;font-weight:600;color:var(--ink);letter-spacing:.02em;margin-top:1px;overflow:hidden;text-overflow:ellipsis}
.up{color:var(--green)}.dn{color:var(--amber)}.bad{color:var(--red)}
.kpi .spark{width:100%;height:30px;margin-top:6px}
.sl{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.6s ease forwards;animation-delay:.3s}
@keyframes draw{to{stroke-dashoffset:0}}
.kpi.alert{background:
   linear-gradient(var(--red),var(--red)) 0 0/10px 1.5px no-repeat,linear-gradient(var(--red),var(--red)) 0 0/1.5px 10px no-repeat,
   linear-gradient(var(--red),var(--red)) 100% 0/10px 1.5px no-repeat,linear-gradient(var(--red),var(--red)) 100% 0/1.5px 10px no-repeat,
   linear-gradient(var(--red),var(--red)) 0 100%/10px 1.5px no-repeat,linear-gradient(var(--red),var(--red)) 0 100%/1.5px 10px no-repeat,
   linear-gradient(var(--red),var(--red)) 100% 100%/10px 1.5px no-repeat,linear-gradient(var(--red),var(--red)) 100% 100%/1.5px 10px no-repeat,
   linear-gradient(180deg,#FFF7F7,#fff 60%)}

/* radar */
.radar-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;padding:12px 14px}
.radar{position:relative;width:104px;height:104px;border-radius:50%;flex:none;
  background:
   radial-gradient(circle,rgba(10,108,255,.10) 0 2px,transparent 3px),
   repeating-radial-gradient(circle,transparent 0 16px,rgba(10,108,255,.18) 17px 17.6px),
   linear-gradient(rgba(10,108,255,.14),rgba(10,108,255,.14)) center/1px 100% no-repeat,
   linear-gradient(90deg,rgba(10,108,255,.14),rgba(10,108,255,.14)) center/100% 1px no-repeat,
   radial-gradient(circle,#F5F9FF,#EAF2FF);
  border:1px solid rgba(10,108,255,.3);overflow:hidden}
.radar .sw8{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(10,108,255,0) 0deg,rgba(10,108,255,0) 290deg,rgba(10,108,255,.32) 358deg,rgba(10,108,255,.6) 360deg);animation:spin 3.6s linear infinite}
.blip{position:absolute;width:7px;height:7px;margin:-3.5px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(240,62,62,.5);animation:blip 2.4s ease-out infinite}
.blip.a{background:var(--amber);animation-name:blipA}
.blip.b{background:var(--blue);width:5px;height:5px;margin:-2.5px;animation-name:blipB}
@keyframes blip{0%{box-shadow:0 0 0 0 rgba(240,62,62,.55)}100%{box-shadow:0 0 0 10px rgba(240,62,62,0)}}
@keyframes blipA{0%{box-shadow:0 0 0 0 rgba(245,159,0,.55)}100%{box-shadow:0 0 0 9px rgba(245,159,0,0)}}
@keyframes blipB{0%{box-shadow:0 0 0 0 rgba(10,108,255,.45)}100%{box-shadow:0 0 0 7px rgba(10,108,255,0)}}
.rl .kl{margin-bottom:6px}
.rl-row{display:flex;align-items:center;gap:8px;font-size:13px;padding:3px 0;border-bottom:1px dashed var(--line2)}
.rl-row:last-of-type{border-bottom:0}
.rl-row i{width:8px;height:8px;border-radius:50%;flex:none}
.rl-row span{color:var(--ink2);flex:1;white-space:nowrap}
.rl-row b{font-family:var(--mono);font-size:14px}
.rl-foot{margin-top:6px;font-size:11.5px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rl-foot b{color:var(--red);font-weight:600}

/* stream */
.h392{height:392px}
.st-head,.ev{display:grid;grid-template-columns:62px minmax(0,1.05fr) minmax(0,1fr) minmax(0,1fr) 34px;gap:8px;align-items:center}
.st-head{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--ink3);text-transform:uppercase;padding:6px 8px;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);background:#FAFCFF}
.stream{flex:1;min-height:0;overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(#000 80%,transparent);mask-image:linear-gradient(#000 80%,transparent)}
.ev{padding:6px 8px;border-bottom:1px solid var(--line2);font-size:13px;white-space:nowrap}
.ev > span{overflow:hidden;text-overflow:ellipsis}
.ev .t{color:var(--ink3);font-size:12px}
.ev .who{display:flex;align-items:center;gap:6px;color:var(--ink)}
.ev .who i{width:18px;height:18px;border-radius:5px;display:grid;place-items:center;font-style:normal;font-size:11px;color:#fff;flex:none}
.ev .mod{color:var(--ink2)}
.ev .dev{font-size:10.5px;color:var(--ink3);text-align:center;border:1px solid var(--line);border-radius:3px;line-height:16px}
.ev.fresh{animation:evIn .9s cubic-bezier(.2,.7,.2,1)}
@keyframes evIn{0%{opacity:0;transform:translateY(-10px);background:rgba(10,108,255,.16)}40%{opacity:1;transform:none;background:rgba(10,108,255,.12)}100%{background:transparent}}
.tag{display:inline-block;font-weight:500;font-size:12px;padding:1px 7px;border-radius:4px;line-height:17px}
.tag.sys{background:#F1F4F8;color:#55657D}
.tag.res{background:#E6F8FC;color:#0089A3}
.tag.qa{background:var(--blue-50);color:var(--blue)}
.tag.pr{background:#E8F8F2;color:#0B9469}
.tag.lab{background:#F2EEFF;color:#6A4FD8}
.tag.warn{background:#FFF0F0;color:var(--red)}
.tag.inn{background:#FFF6E3;color:#C27C00}

/* heatmap */
.hm{display:grid;grid-template-columns:30px repeat(24,minmax(0,1fr));gap:3px;align-items:center}
.hm .hh{font-size:10px;color:var(--ink4);text-align:left;height:12px;line-height:12px;overflow:visible;white-space:nowrap}
.hm .dl{font-size:11.5px;color:var(--ink3)}
.hm .c{height:17px;border-radius:2.5px;opacity:0;transform:scale(.4);animation:pop .5s cubic-bezier(.2,.8,.3,1.2) forwards;animation-delay:calc(var(--i) * 4ms + .3s);cursor:crosshair;transition:outline-color .15s}
.hm .c:hover{outline:1.5px solid var(--ink);outline-offset:1px}
@keyframes pop{to{opacity:1;transform:none}}
.l0{background:#F0F4FA}.l1{background:#D9E7FF}.l2{background:#ADCBFF}.l3{background:#6FA5FF}.l4{background:#2F80FF}.l5{background:#0A5BDB}
.lg{display:flex;align-items:center;gap:3px;font-size:11px;color:var(--ink3)}
.lg i{width:11px;height:11px;border-radius:2px}
.hstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.hs{border:1px solid var(--line2);background:#FAFCFF;border-radius:4px;padding:7px 9px;min-width:0}
.hs span{display:block;font-size:11.5px;color:var(--ink3);white-space:nowrap}
.hs b{font-family:var(--mono);font-size:16px;font-weight:600;white-space:nowrap}
.hs b small{font-size:11.5px;color:var(--ink3);font-weight:400;margin-left:3px}
.curve-h{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:11.5px;color:var(--ink3)}
.curve{width:100%;flex:1;min-height:40px;margin-top:4px}

/* mcp health */
.tool{padding:8px 0 9px;border-bottom:1px dashed var(--line)}
.tool:last-child{border-bottom:0}
.tool .tw1{display:flex;align-items:center;gap:7px}
.tool .nm{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--ink)}
.tool .p50{margin-left:auto;font-family:var(--mono);font-size:13px;font-weight:600}
.tool .tw2{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink3);margin:1px 0 4px;white-space:nowrap;gap:6px}
.tool .tw2 span:first-child{overflow:hidden;text-overflow:ellipsis}
.tool .tw3{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.tool .tsp{width:100%;height:22px}
.sr{font-family:var(--mono);font-size:11.5px;color:var(--ink2);text-align:right;line-height:1.25}
.sr i{display:block;width:52px;height:3px;background:var(--line2);border-radius:2px;margin-top:3px;overflow:hidden}
.sr i u{display:block;height:100%;background:var(--green)}
.mcp-foot{margin-top:auto;padding-top:8px;border-top:1px solid var(--line2);font-family:var(--mono);font-size:10.5px;color:var(--ink3);letter-spacing:.04em;display:flex;justify-content:space-between;gap:6px;white-space:nowrap}

/* sankey + timeline */
.h372{height:372px}
.sankey{width:100%;height:250px}
.sankey .lk{fill:none;transition:stroke-opacity .2s}
.sankey .lk:hover{stroke-opacity:.5}
.sankey .flw{fill:none;stroke-dasharray:3 9;animation:flow 1.6s linear infinite;pointer-events:none}
@keyframes flow{to{stroke-dashoffset:-24}}
.sankey text{font-size:12.5px;fill:var(--ink);paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round}
.sankey text .v{font-family:var(--mono);fill:var(--ink3);font-size:11.5px}
.sk-foot{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:auto;padding-top:10px;border-top:1px solid var(--line2)}
.sk-foot div{min-width:0}
.sk-foot span{display:block;font-size:11.5px;color:var(--ink3);white-space:nowrap}
.sk-foot b{font-family:var(--mono);font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.sk-foot b.path{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--ink2);line-height:22px}
.stu-chips{display:flex;gap:6px;flex-wrap:nowrap;overflow:hidden;margin-bottom:10px}
.stu-chips button{height:24px;padding:0 9px;border:1px solid var(--line);border-radius:12px;font-size:12.5px;color:var(--ink2);background:#fff;white-space:nowrap;transition:.2s}
.stu-chips button.on{border-color:var(--blue);background:var(--blue-50);color:var(--blue);font-weight:600}
.prof{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line2);border-radius:5px;background:linear-gradient(90deg,#F6F9FF,#fff);margin-bottom:8px}
.prof .av{width:34px;height:34px}
.prof .pi{flex:1;min-width:0}
.prof .pi b{font-size:14px}
.prof .pi small{display:block;font-size:11.5px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prof .ps{display:flex;gap:12px;text-align:right}
.prof .ps span{display:block;font-size:10.5px;color:var(--ink3);white-space:nowrap}
.prof .ps b{font-family:var(--mono);font-size:14px}
.tl{position:relative;flex:1;min-height:0;overflow:hidden;-webkit-mask-image:linear-gradient(#000 85%,transparent);mask-image:linear-gradient(#000 85%,transparent)}
.tl::before{content:'';position:absolute;left:51px;top:6px;bottom:0;width:1px;background:linear-gradient(var(--blue-100),var(--line))}
.ti{position:relative;display:grid;grid-template-columns:40px 14px minmax(0,1fr);gap:4px;align-items:start;padding:3px 0;opacity:0;animation:rise .5s ease forwards;animation-delay:calc(var(--i) * 70ms + .2s)}
.ti .tt{font-family:var(--mono);font-size:11.5px;color:var(--ink3);padding-top:1px}
.ti .td{width:9px;height:9px;border-radius:50%;margin:4px 0 0 3px;border:2px solid #fff;box-shadow:0 0 0 1px currentColor;background:currentColor}
.ti .tc{min-width:0;display:flex;align-items:baseline;gap:8px}
.ti .tc b{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ti .tc small{margin-left:auto;font-size:11px;color:var(--ink3);white-space:nowrap;font-family:var(--mono)}
.ti.now .td{animation:nowp 1.6s ease-in-out infinite}
@keyframes nowp{50%{box-shadow:0 0 0 4px rgba(240,62,62,.2)}}

/* bubbles + table */
.h360{height:360px}
.bubbles{position:relative;flex:1;min-height:0;margin-top:2px;border-radius:4px;background:
  radial-gradient(circle at 50% 50%,rgba(10,108,255,.05),transparent 70%),
  repeating-radial-gradient(circle at 50% 50%,transparent 0 44px,rgba(10,108,255,.06) 45px 46px)}
.bub{position:absolute;cursor:pointer}
.bub .bi{width:100%;height:100%;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:1px solid;animation:float var(--fd,8s) ease-in-out infinite alternate;animation-delay:var(--fdl,0s);transition:transform .25s,box-shadow .25s;padding:4px;overflow:hidden}
.bub:hover .bi{transform:scale(1.07);box-shadow:0 8px 22px -8px currentColor}
.bub .bi b{font-weight:600;line-height:1.2;color:var(--ink);word-break:break-all}
.bub .bi span{font-family:var(--mono);font-weight:600;line-height:1.2;margin-top:2px}
.bub.hot::before{content:'';position:absolute;inset:-5px;border-radius:50%;border:1px dashed currentColor;animation:spin 18s linear infinite;opacity:.6}
.bub.in{animation:bin .7s cubic-bezier(.2,.8,.3,1.25) both;animation-delay:var(--bd,0s)}
@keyframes bin{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
@keyframes float{from{translate:0 -3px}to{translate:0 4px}}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line2);margin-bottom:2px}
.tabs button{height:28px;padding:0 10px;font-size:13px;color:var(--ink3);position:relative;white-space:nowrap}
.tabs button span{font-family:var(--mono);font-size:11px;margin-left:4px;color:var(--ink4)}
.tabs button.on{color:var(--blue);font-weight:600}
.tabs button.on::after{content:'';position:absolute;left:8px;right:8px;bottom:-1px;height:2px;background:var(--blue);border-radius:1px}
.tbl{width:100%;border-collapse:collapse;table-layout:fixed}
.tbl th{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--ink3);text-transform:uppercase;font-weight:500;text-align:left;padding:6px 6px;white-space:nowrap}
.tbl td{padding:5px 6px;border-top:1px solid var(--line2);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:31px}
.tbl tr{transition:background .15s}
.tbl tbody tr:hover{background:#F5F9FF}
.tbl .rk{font-family:var(--mono);color:var(--ink4);font-size:12px}
.tbl .rk.top{color:var(--blue);font-weight:600}
.tbl .fq{font-family:var(--mono);font-weight:600}
.tbl .tsv{width:58px;height:18px}
.ct{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--ink2)}
.ct i{width:6px;height:6px;border-radius:50%}
.stt{font-size:12px;padding:1px 7px;border-radius:4px;line-height:17px}
.stt.ok{background:#E8F8F2;color:#0B9469}
.stt.pend{background:#FFF6E3;color:#B57300}
.stt.teach{background:#FFF0F0;color:var(--red)}
.stt.new{background:var(--blue-50);color:var(--blue)}

/* stuck */
.stuck-wrap{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:18px;flex:1;min-height:0}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--ink2);margin-bottom:8px}
.legend span{display:flex;align-items:center;gap:5px;white-space:nowrap}
.legend i{width:10px;height:6px;border-radius:2px}
.sb{padding:5px 0 7px}
.sb-top{display:flex;align-items:baseline;gap:8px;margin-bottom:5px;min-width:0}
.sb-top .ex{font-size:12px;font-weight:600;color:var(--blue);background:var(--blue-50);padding:0 6px;border-radius:3px;white-space:nowrap;line-height:18px}
.sb-top .nm{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.sb-top .sm{margin-left:auto;font-size:11.5px;color:var(--ink3);white-space:nowrap;font-family:var(--mono)}
.sb-top .sv{font-family:var(--mono);font-size:15px;font-weight:700;width:42px;text-align:right;flex:none}
.sb-bar{position:relative;height:8px;border-radius:4px;background:repeating-linear-gradient(90deg,#EFF3F8 0 calc(20% - 1px),#E3E9F1 calc(20% - 1px) 20%)}
.sb-fill{display:flex;height:100%;width:0;border-radius:4px;overflow:hidden;transition:width 1.3s cubic-bezier(.2,.7,.2,1)}
.sb-fill i{display:block;height:100%}
.sb-fill i + i{border-left:1.5px solid #fff}
.r1{background:var(--blue)}.r2{background:var(--amber)}.r3{background:var(--cyan)}
.thr{position:absolute;top:-4px;bottom:-4px;left:70%;width:0;border-left:1.5px dashed var(--red)}
.thr-lbl{position:relative;height:16px;margin-top:2px;font-family:var(--mono);font-size:10.5px;color:var(--ink4)}
.thr-lbl span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.thr-lbl span:first-child{transform:none}
.thr-lbl span:last-child{transform:translateX(-100%)}
.thr-lbl span.th{color:var(--red)}
.sv.hi{color:var(--red)}.sv.md{color:var(--amber)}.sv.lo{color:var(--blue)}
.donut-box{display:flex;flex-direction:column;align-items:center;border-left:1px dashed var(--line);padding-left:18px;min-width:0}
.donut{width:132px;height:132px;position:relative}
.donut svg{width:100%;height:100%;transform:rotate(-90deg)}
.donut circle{fill:none;stroke-width:13}
.donut .seg2{transition:stroke-dasharray 1.4s cubic-bezier(.2,.7,.2,1)}
.donut .ctr{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.donut .ctr b{font-family:var(--mono);font-size:22px;font-weight:700;line-height:1.1}
.donut .ctr span{font-size:11px;color:var(--ink3)}
.dl-list{width:100%;margin-top:10px}
.dl-list div{display:flex;align-items:center;gap:7px;font-size:12.5px;padding:3px 0}
.dl-list i{width:8px;height:8px;border-radius:2px;flex:none}
.dl-list span{flex:1;color:var(--ink2);white-space:nowrap}
.dl-list b{font-family:var(--mono);font-size:13px}
.mods{width:100%;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.mods .kl{margin-bottom:6px}
.mdr{display:grid;grid-template-columns:minmax(0,1fr) 54px 30px;gap:6px;align-items:center;font-size:12px;padding:2px 0}
.mdr span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink2)}
.mdr u{display:block;height:4px;border-radius:2px;background:var(--line2);overflow:hidden;text-decoration:none}
.mdr u i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--cyan));border-radius:2px}
.mdr b{font-family:var(--mono);font-size:11.5px;text-align:right;font-weight:500}
.advice{margin-top:12px;display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;padding:10px 12px;border:1px solid #D7E6FF;border-radius:5px;background:linear-gradient(100deg,#F3F8FF,#F9FDFF);position:relative;overflow:hidden}
.advice::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(var(--blue),var(--cyan))}
.advice .ai{width:30px;height:30px;border-radius:7px;background:linear-gradient(135deg,var(--blue),var(--cyan));display:grid;place-items:center}
.advice .ai svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.advice .ah{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--blue);text-transform:uppercase;display:flex;justify-content:space-between;gap:8px}
.advice .ah span{color:var(--ink3);letter-spacing:.04em;text-transform:none}
.advice p{font-size:13px;color:var(--ink2);line-height:1.65;min-height:40px;margin-top:2px}
.caret{display:inline-block;width:6px;height:13px;background:var(--blue);vertical-align:-2px;margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* faq */
.usage{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.usage > span{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--ink3);text-transform:uppercase;margin-right:2px}
.ut{height:24px;padding:0 10px;border-radius:12px;border:1px dashed #C8D3E2;font-size:12.5px;color:var(--ink2);display:inline-flex;align-items:center;gap:5px;transition:.2s}
.ut svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.2;display:none}
.ut.on{border-style:solid;border-color:var(--blue);background:var(--blue-50);color:var(--blue);font-weight:600}
.ut.on svg{display:block}
.faq-tools{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--ink3);padding:4px 2px 6px;border-bottom:1px solid var(--line2)}
.faq-tools label{display:flex;align-items:center;gap:6px;cursor:pointer;color:var(--ink2)}
.faq-list{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin}
.fq-i{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:9px;padding:7px 2px;border-bottom:1px solid var(--line2);cursor:pointer;transition:background .15s}
.fq-i:hover{background:#F7FAFF}
.cb{width:15px;height:15px;border-radius:4px;border:1.5px solid #B9C5D6;margin-top:2px;display:grid;place-items:center;transition:.15s;background:#fff}
.cb svg{width:10px;height:10px;stroke:#fff;fill:none;stroke-width:3;opacity:0;transition:.15s}
.on > .cb,.cb.on{background:var(--blue);border-color:var(--blue)}
.on > .cb svg,.cb.on svg{opacity:1}
.fq-i .q{font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fq-i .a{font-size:12px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.fq-i .m{text-align:right;white-space:nowrap}
.fq-i .m b{font-family:var(--mono);font-size:13px;display:block;line-height:1.3}
.fq-i .m span{font-size:11px;color:var(--ink3)}
.exp{margin-top:10px;display:flex;align-items:center;gap:8px;padding-top:10px;border-top:1px dashed var(--line)}
.exp .cnt{font-size:12.5px;color:var(--ink2);margin-right:auto;white-space:nowrap}
.exp .cnt b{font-family:var(--mono);color:var(--blue);font-size:15px}
.prev{margin-top:8px;font-family:var(--mono);font-size:11px;color:var(--ink3);background:#F7F9FC;border:1px solid var(--line2);border-radius:4px;padding:6px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prev b{color:var(--blue);font-weight:500}

/* ticker */
.ticker{position:fixed;left:var(--side);right:0;bottom:0;z-index:30;height:34px;display:flex;align-items:center;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line);overflow:hidden}
.ticker .tk-l{flex:none;height:100%;display:flex;align-items:center;gap:8px;padding:0 14px;background:linear-gradient(90deg,var(--blue),#2C86FF);color:#fff;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;position:relative}
.ticker .tk-l::after{content:'';position:absolute;right:-10px;top:0;border-left:10px solid #2C86FF;border-top:17px solid transparent;border-bottom:17px solid transparent}
.ticker .tk-l .dot{background:#fff;color:#fff}
.tk-track{flex:1;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.tk-run{display:flex;width:max-content;animation:marq 60s linear infinite}
.ticker:hover .tk-run{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.tk-item{display:flex;align-items:center;gap:8px;padding:0 26px;font-size:13px;color:var(--ink2);white-space:nowrap;border-right:1px solid var(--line)}
.tk-item .k{font-family:var(--mono);font-size:11px;padding:0 6px;border-radius:3px;line-height:16px;letter-spacing:.06em}
.k.w{background:#FFF0F0;color:var(--red)}.k.c{background:var(--blue-50);color:var(--blue)}.k.m{background:#FFF6E3;color:#B57300}.k.s{background:#E8F8F2;color:#0B9469}
.tk-item time{font-family:var(--mono);font-size:11.5px;color:var(--ink4)}
.tk-r{flex:none;padding:0 14px;font-family:var(--mono);font-size:11px;color:var(--ink3);border-left:1px solid var(--line);height:100%;display:flex;align-items:center;gap:6px;white-space:nowrap}

/* tooltip + toast */
.tip{position:fixed;z-index:100;pointer-events:none;background:#fff;border:1px solid var(--line);box-shadow:0 10px 30px -10px rgba(16,40,80,.3);border-radius:6px;padding:7px 10px;font-size:12.5px;color:var(--ink2);line-height:1.55;opacity:0;transition:opacity .12s;max-width:280px}
.tip b{color:var(--ink);font-family:var(--mono)}
.tip::before{content:'';position:absolute;left:0;top:0;width:100%;height:2px;background:linear-gradient(90deg,var(--blue),var(--cyan));border-radius:6px 6px 0 0}
.toast{position:fixed;left:50%;bottom:52px;z-index:120;transform:translate(-50%,20px);opacity:0;background:#0E1A2B;color:#fff;font-size:13.5px;padding:9px 16px;border-radius:8px;box-shadow:0 12px 30px -10px rgba(0,0,0,.4);transition:.3s;display:flex;gap:8px;align-items:center;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast i{width:6px;height:6px;border-radius:50%;background:var(--cyan)}

/* responsive */
@media (max-width:1500px){
  .clock small{display:none}
  .me small{display:none}
}
@media (max-width:1366px){
  :root{--side:212px}
  .board{gap:12px;padding:12px 16px 18px}
  .row1{gap:12px}
  .filters{padding:12px 16px 0}
  .top{padding:0 16px;gap:10px}
  .kv .num{font-size:24px}
  .search{max-width:300px}
  .pill .txt{display:none}
  .me div{display:none}
  .stuck-wrap{grid-template-columns:minmax(0,1fr) 186px;gap:14px}
  .donut-box{padding-left:14px}
  .sk-foot{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sk-foot div:last-child{display:none}
  .radar{width:80px;height:80px}
  .radar-card{gap:10px;padding:12px}
  .rl-row{gap:6px;font-size:12.5px}
  .rl-row b{font-size:13px}
  .brand-sub{font-size:11.5px}
}
.rl{min-width:0}
.rl-row span{min-width:0;overflow:hidden;text-overflow:ellipsis}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}