/* =====================================================================
   鐩戞帶澶у睆娣辫壊鍩?鈥斺€?绉戞妧鎰熶富鍦?
   鏋勬垚锛氭繁绌哄簳 + 鏋佺粏缃戞牸 + 鍥涜鍒囪竟 + 鐢靛厜闈掓弿杈?+ 鏁板瓧鍙戝厜 + 鎵弿绾?
   ===================================================================== */

.dk{
  background:var(--dk-bg);
  color:var(--dk-text);
  position:relative;
  --line:var(--dk-line);
}
/* 搴曠汗锛氬弻灞傜綉鏍?鈥斺€?缁嗙綉鏍煎瘑銆佺矖缃戞牸鐤?*/
.dk-grid{
  position:relative;
  background:
    radial-gradient(1200px 520px at 12% -10%,rgba(47,107,255,.18),transparent 62%),
    radial-gradient(900px 480px at 92% 8%,rgba(34,224,200,.10),transparent 60%),
    linear-gradient(180deg,var(--dk-bg) 0%,var(--dk-bg-2) 100%);
}
.dk-grid::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(var(--dk-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--dk-line) 1px,transparent 1px);
  background-size:34px 34px;opacity:.55;
}
.dk-grid::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(94,138,220,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(94,138,220,.10) 1px,transparent 1px);
  background-size:170px 170px;opacity:.7;
}
.dk-grid > *{position:relative;z-index:1}

/* ---------- 澶у睆椤靛鍣?---------- */
.screen{min-height:calc(100vh - var(--top-h))}
.screen__top{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:16px var(--sp-5) 12px;
}
.screen__title{
  display:flex;align-items:center;gap:11px;
  font-size:var(--fs-xl);font-weight:var(--fw-strong);letter-spacing:var(--ls-caps);color:var(--dk-strong);
}
.screen__title .ic{width:20px;height:20px;color:var(--dk-cyan)}
.screen__title::before{
  content:"";width:4px;height:18px;border-radius:2px;
  background:linear-gradient(180deg,var(--dk-cyan),var(--dk-blue));
  box-shadow:0 0 14px rgba(34,224,200,.7);
}
.screen__clock{
  font-family:var(--mono);font-size:var(--fs-base);color:var(--dk-dim);
  letter-spacing:var(--ls-caps);font-variant-numeric:tabular-nums;
}
.screen__live{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--fs-xs);font-weight:var(--fw-strong);letter-spacing:var(--ls-caps);
  padding:3px 10px;border-radius:11px;
  color:var(--dk-cyan);background:rgba(34,224,200,.10);
  border:1px solid rgba(34,224,200,.3);
}
.screen__live::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--dk-cyan);animation:pulseRing 1.8s infinite;
}
.screen__acts{margin-left:auto;display:flex;gap:var(--sp-2);flex-wrap:wrap}

/* 澶у睆鍐呯殑鎸夐挳 */
.dkbtn{
  display:inline-flex;align-items:center;gap:6px;
  height:32px;padding:0 12px;border-radius:var(--r-sm);
  font-size:var(--fs-sm);font-weight:var(--fw-strong);
  background:rgba(78,147,255,.12);
  border:1px solid rgba(78,147,255,.34);
  color:#9DC2FF;white-space:nowrap;
  transition:background .15s,border-color .15s,color .15s;
}
.dkbtn:hover{background:rgba(78,147,255,.2);border-color:rgba(78,147,255,.55);color:#CFE2FF}
.dkbtn .ic{width:14px;height:14px}
.dkbtn--ghost{background:transparent;border-color:var(--dk-line-2);color:var(--dk-dim)}
.dkbtn--ghost:hover{background:rgba(94,138,220,.1);color:var(--dk-text)}
.dkbtn--cy{background:rgba(34,224,200,.12);border-color:rgba(34,224,200,.34);color:var(--dk-cyan)}
.dkbtn--cy:hover{background:rgba(34,224,200,.2);color:#7FF3E4}

/* ---------- 澶у睆闈㈡澘锛堝洓瑙掑垏杈癸級 ---------- */
.dkp{
  position:relative;
  background:var(--dk-panel);
  border:1px solid var(--dk-line);
  border-radius:var(--r-md);
  backdrop-filter:blur(3px);
  min-width:0;overflow:hidden;
}
/* 鍥涜绉戞妧鎰熷垏鏍?*/
.dkp::before,.dkp::after{
  content:"";position:absolute;width:12px;height:12px;pointer-events:none;
  border-color:rgba(34,224,200,.55);
}
.dkp::before{top:-1px;left:-1px;border-top:2px solid;border-left:2px solid;border-radius:var(--r-md) 0 0 0}
.dkp::after{bottom:-1px;right:-1px;border-bottom:2px solid;border-right:2px solid;border-radius:0 0 var(--r-md) 0}
.dkp--flat::before,.dkp--flat::after{display:none}

.dkp__head{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:11px var(--sp-4);
  border-bottom:1px solid var(--dk-line);
  background:linear-gradient(90deg,rgba(78,147,255,.09),transparent 70%);
}
.dkp__title{
  display:flex;align-items:center;gap:8px;
  font-size:var(--fs-md);font-weight:var(--fw-strong);letter-spacing:var(--ls-caps);color:#DCE9FF;
}
.dkp__title .ic{width:15px;height:15px;color:var(--dk-cyan)}
.dkp__title::before{
  content:"";width:3px;height:13px;border-radius:2px;background:var(--dk-cyan);
  box-shadow:0 0 9px rgba(34,224,200,.85);
}
.dkp__hint{margin-left:auto;font-size:var(--fs-xs);color:var(--dk-dim);white-space:nowrap}
.dkp__body{padding:13px var(--sp-4)}
.dkp__body--flush{padding:0}

/* 鎸囨爣鏉★細1px 缃戞牸鍒嗗壊锛屾墎骞?*/
.dkstats{
  display:grid;gap:1px;
  background:var(--dk-line);
  border:1px solid var(--dk-line);border-radius:var(--r-md);
  overflow:hidden;
}
.dkstats--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.dkstats--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.dkstats--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.dkstats--6{grid-template-columns:repeat(6,minmax(0,1fr))}
.dkstat{background:var(--dk-panel-solid);padding:13px var(--sp-4);min-width:0}
.dkstat__k{font-size:var(--fs-xs);color:var(--dk-dim);letter-spacing:var(--ls-caps);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dkstat__v{
  font-size:var(--fs-3xl);font-weight:var(--fw-strong);font-family:var(--mono);
  color:var(--dk-strong);line-height:var(--lh-display);letter-spacing:var(--ls-tight);
  margin-top:1px;
}
.dkstat__u{font-size:var(--fs-xs);color:var(--dk-dim);font-family:var(--font);margin-left:4px;font-weight:var(--fw-strong)}
.dkstat__v--cy{color:var(--dk-cyan);text-shadow:0 0 22px rgba(34,224,200,.45)}
.dkstat__v--bl{color:var(--dk-blue);text-shadow:0 0 22px rgba(78,147,255,.4)}
.dkstat__v--am{color:var(--dk-amber)}
.dkstat__v--rd{color:var(--dk-red)}
.dkstat__v--vi{color:var(--dk-violet)}
.dkstat__sub{font-size:var(--fs-xs);color:var(--dk-dim);margin-top:1px}

/* ---------- 娣辫壊鐑姏鏍?---------- */
.dkheat{display:grid;gap:5px}
.dkheat--12{grid-template-columns:repeat(12,minmax(0,1fr))}
.dkheat--18{grid-template-columns:repeat(18,minmax(0,1fr))}
.dkheat--24{grid-template-columns:repeat(24,minmax(0,1fr))}
.dkheat__c{
  aspect-ratio:1.3;border-radius:2px;cursor:pointer;position:relative;
  transition:transform .1s var(--ease);
}
.dkheat__c:hover{transform:scale(1.25);z-index:2;outline:1px solid rgba(255,255,255,.45)}
.dkheat__c--ok{background:rgba(34,224,200,.30);box-shadow:inset 0 0 0 1px rgba(34,224,200,.34)}
.dkheat__c--warn{background:rgba(255,176,32,.42);box-shadow:inset 0 0 0 1px rgba(255,176,32,.5)}
.dkheat__c--err{background:rgba(255,90,90,.5);box-shadow:inset 0 0 0 1px rgba(255,90,90,.6)}
.dkheat__c--off{background:rgba(120,145,190,.15);box-shadow:inset 0 0 0 1px rgba(120,145,190,.22)}
.dkheat__lbl{
  font-size:var(--fs-xs);color:var(--dk-dim);letter-spacing:var(--ls-caps);
  margin:11px 0 6px;display:flex;align-items:center;gap:8px;
}
.dkheat__lbl::after{content:"";flex:1;height:1px;background:var(--dk-line)}

/* ---------- 鍛婅娴?---------- */
.feed{display:flex;flex-direction:column}
.feed__i{
  display:flex;gap:10px;align-items:flex-start;
  padding:9px 0;border-bottom:1px dashed var(--dk-line);
  font-size:var(--fs-sm);
}
.feed__i:last-child{border-bottom:none}
.feed__lv{
  flex:0 0 auto;font-size:var(--fs-xs);font-weight:var(--fw-strong);letter-spacing:var(--ls-caps);
  padding:1px 7px;border-radius:3px;margin-top:1px;
}
.feed__lv--hi{color:#FF9A9A;background:rgba(255,90,90,.14);border:1px solid rgba(255,90,90,.32)}
.feed__lv--mid{color:#FFC458;background:rgba(255,176,32,.12);border:1px solid rgba(255,176,32,.32)}
.feed__lv--low{color:#9DC2FF;background:rgba(78,147,255,.12);border:1px solid rgba(78,147,255,.32)}
.feed__txt{flex:1;min-width:0;color:var(--dk-text);line-height:var(--lh-caption)}
.feed__time{
  flex:0 0 auto;font-family:var(--mono);font-size:var(--fs-xs);color:var(--dk-dim);
}
.feed__i--new{animation:feedIn .4s var(--ease-out) both}
@keyframes feedIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}

/* ---------- 璁惧鐘舵€佽 ---------- */
.devrow{
  display:flex;align-items:center;gap:10px;
  padding:8px 0;border-bottom:1px dashed var(--dk-line);font-size:var(--fs-sm);
}
.devrow:last-child{border-bottom:none}
.devrow__id{font-family:var(--mono);font-size:var(--fs-xs);color:var(--dk-dim);flex:0 0 auto;width:88px}
.devrow__name{flex:1;min-width:0;color:var(--dk-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.devrow__val{font-family:var(--mono);font-weight:var(--fw-strong);flex:0 0 auto}

/* 淇″彿寮哄害鏉?*/
.sig{display:inline-flex;align-items:flex-end;gap:2px;height:12px;flex:0 0 auto}
.sig i{width:3px;border-radius:1px;background:rgba(120,145,190,.32)}
.sig i:nth-child(1){height:4px}
.sig i:nth-child(2){height:7px}
.sig i:nth-child(3){height:10px}
.sig i:nth-child(4){height:13px}
.sig--1 i:nth-child(-n+1),.sig--2 i:nth-child(-n+2),
.sig--3 i:nth-child(-n+3),.sig--4 i:nth-child(-n+4){background:var(--dk-cyan)}
.sig--0 i{background:rgba(255,90,90,.45)}

/* ---------- 鎵弿绾匡紙瑁呴グ锛?---------- */
.scan{position:relative;overflow:hidden}
.scan::after{
  content:"";position:absolute;top:0;bottom:0;width:22%;
  background:linear-gradient(90deg,transparent,rgba(34,224,200,.13),transparent);
  animation:sweep 5.5s linear infinite;pointer-events:none;
}

/* ---------- 澶у睆鍐呯殑鏆楄壊琛ㄦ牸 ---------- */
.dktable{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-sm)}
.dktable thead th{
  text-align:left;font-size:var(--fs-xs);font-weight:var(--fw-strong);letter-spacing:var(--ls-caps);
  color:var(--dk-dim);padding:9px 12px;white-space:nowrap;
  border-bottom:1px solid var(--dk-line);
  background:rgba(94,138,220,.05);
}
.dktable tbody td{padding:9px 12px;border-bottom:1px dashed var(--dk-line);white-space:nowrap;color:var(--dk-text)}
.dktable tbody tr:hover{background:rgba(78,147,255,.07)}
.dktable tbody tr:last-child td{border-bottom:none}
.dktable .mono{font-family:var(--mono)}

/* ---------- 鐜舰浠〃 ---------- */
.gauge{display:flex;align-items:center;gap:14px}
.gauge__r{position:relative;flex:0 0 auto}
.gauge__c{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.gauge__v{font-family:var(--mono);font-size:var(--fs-2xl);font-weight:var(--fw-strong);color:var(--dk-strong);line-height:var(--lh-display)}
.gauge__l{font-size:var(--fs-xs);color:var(--dk-dim);letter-spacing:var(--ls-caps)}

/* ---------- 澶у睆鏍呮牸 ---------- */
.dkgrid{display:grid;gap:12px;min-width:0}
.dkgrid--3-2{grid-template-columns:3fr 2fr}
.dkgrid--5-4-3{grid-template-columns:5fr 4fr 3fr}
.dkgrid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.dkgrid--3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* ---------- 鍝嶅簲寮?---------- */
@media (max-width:1400px){
  .dkgrid--5-4-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dkstats--6{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1100px){
  .dkgrid--3-2,.dkgrid--5-4-3,.dkgrid--3{grid-template-columns:minmax(0,1fr)}
  .screen__top{padding:12px var(--sp-4) 10px}
}
@media (max-width:780px){
  .dkstats--3,.dkstats--4,.dkstats--5,.dkstats--6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dkstat{padding:11px 13px}
  .dkstat__v{font-size:var(--fs-xl)}
  .dkheat--24,.dkheat--18{grid-template-columns:repeat(12,minmax(0,1fr))}
  .screen__title{font-size:var(--fs-lg);letter-spacing:var(--ls-caps)}
  .screen__clock{font-size:var(--fs-xs)}
}
@media (max-width:520px){
  .dkstats--3,.dkstats--4,.dkstats--5,.dkstats--6{grid-template-columns:repeat(2,minmax(0,1fr))}
}