/* minerX / Hyper color + layout shell for :20004
   Colors from live minerx.vip Hyper CSS variables */
:root{
  --ct-leftbar-width:260px;
  --ct-leftbar-width-sm:70px;
  --ct-topbar-height: 51px;
  --fr-gutter: 68px; /* FR 48px + right inset 12px + gap */

/* ===== A 左右框距离（自己填数字，单位 px）=====
   改 index.html 里 <header ... style="--a-inset-left: 0px; --a-inset-right: 0px;">
   例: --a-inset-left: 24px; --a-inset-right: 48px;
================================================ */

  --topbar-brand-shift: 10px; /* tight: logo then Windows */
  --topbar-menu-shift: 8%;
  --ct-footer-height:0px;
  --ct-right-tools-width:60px;

  --ct-menu-bg:#313a46;
  --ct-menu-item-color:#8391a2;
  --ct-menu-item-hover-color:#bccee4;
  --ct-menu-item-active-color:#ffffff;

  --ct-topbar-bg: #3A444E; /* A area unified bg */
  --ct-topbar-item-color:#8391a2;
  --win-label-color: #AAB8C4;
  --win-label-hover: #c9b6ef; /* brighter soft lilac */ /* D1 menu text follows Windows */
  --ct-topbar-item-hover-color:#bccee4;
  --ct-topbar-search-bg:#464f5b;

  --ct-blue:#2c8ef8;
  --ct-indigo:#727cf5;
  --ct-purple:#6b5eae;
  --ct-pink:#ff679b;
  --ct-red:#fa5c7c;
  --ct-orange:#fd7e14;
  --ct-yellow:#ffc35a;
  --ct-green:#0acf97;

  --body-bg:#2a3038;
  --card-bg:#323a46;
  --card-border:#3a444e;
  --text:#dee2e6;
  --muted:#8391a2;
  --table-stripe:#2e3640;
  --table-hover:#3a4450;
  --font:"IBM Plex Sans","Noto Sans SC",Segoe UI,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;background:var(--body-bg);color:var(--text);font:13.5px/1.4 var(--font)}
a{color:var(--ct-blue);text-decoration:none}
a:hover{text-decoration:underline}
button,input,select{font:inherit;color:inherit}

/* ===== Hyper layout: left menu + content ===== */
.wrapper{min-height:100vh;width:100%;position:relative}
.leftside-menu{display:none!important;width:0!important;min-width:0!important}
body.sidebar-sm .leftside-menu{display:none!important}
body.sidebar-sm .leftside-menu .side-nav-link span,
body.sidebar-sm .leftside-menu .side-nav-title,
body.sidebar-sm .leftside-menu .logo span{display:none}
body.sidebar-sm .content-page{
  margin-left:0;
  margin-right:0;
  min-height:100vh;
  padding:0 0 24px;
  overflow:visible;
}

.logo-box{height:var(--ct-topbar-height);display:flex;align-items:center;padding:0 20px;border-bottom:1px solid #3a444e}
.logo{display:inline-flex;align-items:center;text-decoration:none;line-height:0}
.logo-img{height:40px;width:auto;max-width:280px;display:block;object-fit:contain}
/* sidebar-sm must NOT clip topbar logo */
.logo span{color:var(--ct-indigo)}

.side-nav{padding:12px 0 24px}
.side-nav-title{
  padding:12px 20px 6px;font-size:11px;text-transform:uppercase;
  letter-spacing:.04em;color:#6c757d;font-weight:600
}
.side-nav-link{
  display:flex;align-items:center;gap:10px;
  padding:10px 20px;color:var(--ct-menu-item-color);text-decoration:none;
  border-left:3px solid transparent
}
.side-nav-link i{font-style:normal;width:1.2rem;text-align:center;opacity:.9}
.side-nav-link:hover{color:var(--ct-menu-item-hover-color);background:rgba(255,255,255,.03);text-decoration:none}
.side-nav-link.is-active{
  color:var(--ct-menu-item-active-color);
  background:rgba(114,124,245,.12);
  border-left-color:var(--ct-indigo)
}

.content-page{
  margin-left:0;
  margin-right:0;
  min-height:100vh;
  padding:0 0 24px;
  transition:margin-left .25s ease;
}

/* topbar */
.navbar-custom.topbar{
  width:100%;
  max-width:100%;
  min-width:0;
  height:var(--ct-topbar-height);background:var(--ct-topbar-bg);
  margin:0;padding:0;gap:12px;
  border:1px solid #fff;
  border-bottom:1px solid #fff;
  position:sticky;top:0;left:0;right:auto;z-index:1260;overflow:visible;
  display:flex;align-items:center;justify-content:flex-start;box-sizing:border-box;
}
.page-content{padding:0 12px;box-sizing:border-box;width:100%}
/* full-bleed band under topbar — seamless soft join, no gap */
.hero-band{
  --hero-inset-x: 4%;
  width:100%;
  max-width:none;
  height:288px;
  min-height:288px;
  max-height:288px;
  margin:0 0 12px;
  padding:0 var(--hero-inset-x);
  box-sizing:border-box;
  background:linear-gradient(180deg, var(--ct-topbar-bg) 0%, #2e3640 42%, var(--body-bg) 100%);
  border:1px solid #fff;
  border-top:1px solid #fff;
  border-bottom:1px solid #fff;
  position:relative;
  overflow:hidden;
}
.hero-band-inner{
  width:100%;
  height:100%;
  box-sizing:border-box;
  position:relative;
  border:1px solid rgba(255,255,255,.85);
  display:grid;
  grid-template-columns:repeat(10, 168px);
  grid-template-rows:repeat(3, 68px);
  justify-content:space-evenly;
  align-content:space-evenly;
  justify-items:stretch;
  align-items:stretch;
  overflow:hidden;
}
.hero-card{
  width:168px;
  height:68px;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.55);
  border-radius:6px;
  background:rgba(50,58,70,.9);
  color:#dee2e6;
  font-size:12px;
  font-weight:600;
  letter-spacing:.02em;
  display:flex;
  align-items:center;
  justify-content:center;
  user-select:none;
}

/* notice/announcement band under hero outer frame: height 108px */
.notice-band{
  --notice-inset-x: 4%;
  width:100%;
  height:108px;
  min-height:108px;
  max-height:108px;
  margin:0 0 12px;
  padding:0 var(--notice-inset-x);
  box-sizing:border-box;
  background:var(--body-bg);
  border:none;
  position:relative;
}
.notice-band-inner{
  width:100%;
  height:100%;
  box-sizing:border-box;
  border:none;
  display:flex;
  align-items:center;
  justify-content:stretch;
  padding:0; /* usable area L/R flush with frame */
}
/* actual usable area: height 28px, L/R same as frame */
.notice-use{
  width:100%;
  height:48px;
  min-height:48px;
  max-height:48px;
  box-sizing:border-box;
  border:none;
  display:flex;
  align-items:center;
  padding:0 10px;
  background:#3A444E;
}
.notice-bar{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:14px 18px;
  width:100%;
  height:100%;
  color:var(--text);
  font-size:13px;
  overflow:hidden;
}
.notice-bar b{color:#fff;font-weight:700;margin-right:4px}
.notice-bar a{color:var(--ct-blue);text-decoration:none;white-space:nowrap}
.notice-bar a:hover{text-decoration:underline}

.notice-bar a.text-success{color:var(--ct-green)}
.notice-bar a.text-warning{color:var(--ct-orange)}
.notice-bar a.text-pink{color:var(--ct-pink)}


.button-menu-mobile{
  width:32px;height:32px;border:0;border-radius:6px;
  background:transparent;color:var(--ct-topbar-item-color);cursor:pointer;align-self:center;flex:0 0 auto
}
.button-menu-mobile:hover{color:var(--ct-topbar-item-hover-color);background:rgba(255,255,255,.05)}
.app-search{
  display:flex;align-items:center;gap:8px;
  background:var(--ct-topbar-search-bg);
  border-radius:20px;padding:4px 12px;min-width:200px;color:var(--muted);margin-left:12ch}
.app-search input{border:0;outline:0;background:transparent;color:var(--text);width:100%}
.topbar-menu{
  list-style:none;margin:0 var(--topbar-menu-shift, 8%) 0 auto;padding:0;
  display:flex;align-items:center;gap:10px;flex:0 0 auto;
  flex-wrap:nowrap;position:relative;z-index:1220;overflow:visible
}
.topbar-menu > li{display:flex;align-items:center;flex:0 0 auto;position:relative}
.topbar-menu a{color:var(--ct-topbar-item-color);font-size:12px;padding:4px 6px;white-space:nowrap}
.topbar-menu a:hover{color:var(--ct-topbar-item-hover-color);text-decoration:none}
.nav-chip,.nav-ico,.nav-user{
  border:1px solid #414d5d;background:#3c4655;color:var(--ct-topbar-item-color);
  border-radius:20px;padding:4px 10px;cursor:pointer;white-space:nowrap;line-height:1.2
}
.nav-ico{width:30px;height:30px;padding:0;display:grid;place-items:center;border-radius:50%;font-weight:600}
.nav-user{width:30px;height:30px;padding:0;display:grid;place-items:center;border-radius:50%}
.nav-chip{height:30px;display:inline-flex;align-items:center}

/* refresh + clock from :20003, dark shell style */
.tb-ico{
  border:1px solid #414d5d;background:#3c4655;color:var(--ct-topbar-item-color);
  border-radius:6px;width:30px;height:30px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer
}
.tb-ico:hover{color:#fff;background:#464f5b}
.tb-ico .ico{width:15px;height:15px;display:block}
.tb-refresh-wrap{position:relative;overflow:visible}
.tb-clock{
  width:auto;min-width:64px;height:30px;padding:0 10px;gap:6px;
  border-radius:6px
}
.tb-clock-txt{font-size:12px;font-variant-numeric:tabular-nums;color:#bccee4;line-height:1}
.refresh-menu{
  position:absolute;right:0;top:calc(100% + 6px);min-width:168px;z-index:1300;
  background:#323a46;border:1px solid #4b5563;border-radius:6px;
  box-shadow:0 8px 24px rgba(0,0,0,.35);padding:4px 0;overflow:hidden
}
.refresh-menu-title{
  padding:8px 12px 6px;font-size:11px;color:#8391a2;border-bottom:1px solid #3a444e
}
.refresh-menu button{
  display:block;width:100%;text-align:left;border:0;background:transparent;
  color:#dee2e6;padding:8px 12px;cursor:pointer;font:inherit
}
.refresh-menu button:hover{background:#3a444e;color:#fff}
.refresh-menu button.off{color:#fa5c7c}
.refresh-menu[hidden]{display:none!important}
.site-ver-li{margin-left:2px}
.topbar-menu .site-ver{
  margin:0;color:#8391a2;font-size:13px;font-weight:500;
  white-space:nowrap;line-height:1
}

/* cards / metrics — Hyper dark card feel */
.card{
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:6px;
  box-shadow:0 0 15px 0 rgba(0,0,0,.05)
}
.row-metrics{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:12px
}
.metric{padding:16px 14px 12px}
.metric-num{display:flex;align-items:baseline;gap:8px;font-size:28px;font-weight:700;line-height:1.1}
.metric-num small{font-size:13px;color:var(--muted);font-weight:500}
.metric-label{margin-top:8px;color:var(--muted);font-size:12px}
.row-hash{margin-bottom:12px}
.hash-card{display:inline-block;padding:12px 18px;font-size:22px;font-weight:700}
.hash-card small{margin-left:6px;color:var(--muted);font-size:13px;font-weight:500}
/* page tabs */
.page-tabs{
  display:flex;flex-wrap:wrap;gap:2px;
  border-bottom:1px solid var(--card-border);margin:4px 0 12px
}
.page-tab{
  display:inline-flex;flex-direction:column;align-items:center;gap:4px;
  min-width:70px;padding:10px 8px;border:0;background:transparent;
  color:var(--muted);cursor:pointer;border-bottom:2px solid transparent
}
.page-tab i{font-style:normal}
.page-tab.is-active{color:#fff;border-bottom-color:var(--ct-indigo)}
.page-tab:hover{color:#fff}

.filter-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.btn-pill{
  border:1px solid #4b5563;background:#3a444e;color:#fff;
  border-radius:20px;padding:6px 12px;cursor:pointer
}
.btn-pill.is-on{background:#fff;color:#313a46;border-color:#fff;font-weight:600}
.btn-primary{
  border:0;border-radius:20px;padding:6px 14px;cursor:pointer;
  background:var(--ct-blue);color:#fff;font-weight:600
}
.form-select-pill{
  border:1px solid #dbe2ea;background:#fff;color:#313a46;
  border-radius:20px;padding:6px 10px;height:32px
}

/* table */
.table-card{padding:0;overflow:hidden}
.table-responsive{overflow:auto;max-height:calc(100vh - 340px)}
.table{
  width:max-content;min-width:100%;border-collapse:collapse;table-layout:fixed
}
.table th,.table td{
  padding:10px 12px;border-bottom:1px solid #3a444e;
  white-space:nowrap;font-size:12.5px;vertical-align:middle;text-align:left
}
.table thead th{
  position:sticky;top:0;z-index:2;
  background:#2c3440;color:var(--muted);font-weight:600;border-bottom-color:#424e5a
}
.table tbody tr:nth-child(even) td{background:var(--table-stripe)}
.table tbody tr:hover td{background:var(--table-hover)}
.table .name{font-weight:600;color:#fff}
.table .hash{color:var(--ct-blue)}
.gpu-dots{display:inline-flex;gap:3px}
.gpu-dots i{width:10px;height:10px;border-radius:2px;background:var(--ct-green);display:inline-block;font-style:normal}
.gpu-dots i.off{background:#5a6572}
.ssh-btn{
  width:28px;height:28px;border-radius:4px;border:1px solid #4b5563;
  background:#2a3038;color:var(--muted);cursor:pointer
}

/* right utility rail — floating overlay; NOT counted in layout width */
.right-tools{
  position:fixed;
  top:50%;
  right:8px;
  bottom:auto;
  width:var(--ct-right-tools-width, 60px);
  z-index:1300;
  transform:translateY(-50%);
  background:rgba(37,43,51,.96);
  border:1px solid #3a444e;
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:10px 0;
  max-height:calc(100vh - 24px);
  overflow-y:auto;
  pointer-events:auto;
}
.right-tools button{
  width:40px;height:40px;border:0;border-radius:8px;
  background:transparent;color:var(--muted);cursor:pointer;
  flex:0 0 auto
}
.right-tools button:hover{background:#323a46;color:#fff}

@media (max-width:1200px){
  .row-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .leftside-menu{transform:translateX(-100%)}
  body.sidebar-open .leftside-menu{transform:translateX(0)}
  .content-page{margin-left:0;margin-right:0}
  .right-tools{display:none}
  .row-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* logo moved to topbar — sidebar has no brand block */
.leftside-menu .logo-box{display:none!important}
.navbar-custom .top-logo{
  display:inline-flex;align-items:center;justify-content:center;
  margin-left:var(--topbar-brand-shift);margin-right:6px;position:relative;z-index:1210;
  flex:0 0 auto;overflow:visible;height:auto;align-self:center;line-height:0;
}
.navbar-custom .logo-img{
  height:64px;width:auto;max-width:none;max-height:none;
  display:block;object-fit:contain;object-position:center center;
}
body.sidebar-sm .navbar-custom .logo-img{height:64px;max-width:none;object-fit:contain}
.side-nav{padding-top:12px}

.other-view{padding:28px 20px;margin-top:0}
.other-view-inner h3{margin:0 0 8px;font-size:18px}
.other-view-inner p{margin:0;color:var(--muted)}

a.logo,a.logo:hover,a.top-logo,a.top-logo:hover{text-decoration:none!important;border:0!important;box-shadow:none!important}

/* brand separator + OS badge (minerX-style after logo) */
.brand-sep{
  width:4px;height:4px;border-radius:50%;
  background:#6c757d;flex:0 0 auto;align-self:center;
  margin:0 8px 0 0;opacity:.85
}
.os-badge{
  display:inline-flex;align-items:center;justify-content:center;
  height:auto;padding:0;flex:0 0 auto;align-self:center;
  border:0;border-radius:0;background:transparent;
  color:#8391A2;font-size:16px;font-weight:600;letter-spacing:.02em;
  line-height:1;user-select:none;white-space:nowrap
}

.site-ver{
  flex:0 0 auto;align-self:center;margin-left:10px;
  color:#8391a2;font-size:13px;font-weight:500;letter-spacing:.02em;
  line-height:1;user-select:none;white-space:nowrap
}

.site-ver-li{display:flex;align-items:center;list-style:none}
.topbar-menu .site-ver{margin-left:4px;color:#8391a2;font-size:13px;font-weight:500}
.tb-ico.is-spin .ico{animation:mfSpin .6s linear}
@keyframes mfSpin{to{transform:rotate(360deg)}}

/* keep right actions visible, search yields space */
.navbar-custom.topbar .app-search{
  flex:1 1 auto;min-width:120px;max-width:280px;margin-left:12ch
}
.navbar-custom.topbar .topbar-menu{flex:0 0 auto;margin-left:auto;margin-right:var(--topbar-menu-shift, 8%);transform:none}
.navbar-custom.topbar .top-logo,
.navbar-custom.topbar .brand-sep,
.navbar-custom.topbar .os-badge{flex:0 0 auto}

/* language switcher */
.lang-wrap{position:relative;overflow:visible}
.lang-btn{
  display:inline-flex!important;align-items:center;gap:6px;
  height:30px;padding:0 10px 0 8px!important
}
.lang-flag{
  width:18px;height:12px;border-radius:2px;object-fit:cover;
  box-shadow:0 0 0 1px rgba(255,255,255,.12);flex:0 0 auto;display:block
}
.lang-label{font-size:12px;color:inherit;white-space:nowrap}
.lang-caret{font-size:10px;opacity:.75;margin-left:2px}
.lang-menu{
  position:absolute;right:0;top:calc(100% + 6px);min-width:150px;z-index:1400;
  background:#323a46;border:1px solid #4b5563;border-radius:6px;
  box-shadow:0 8px 24px rgba(0,0,0,.35);padding:4px 0;overflow:hidden
}
.lang-menu[hidden]{display:none!important}
.lang-opt{
  display:flex;align-items:center;gap:8px;width:100%;
  border:0;background:transparent;color:#dee2e6;
  padding:8px 12px;cursor:pointer;font:inherit;text-align:left
}
.lang-opt:hover{background:#3a444e;color:#fff}
.lang-opt.is-on{background:rgba(114,124,245,.15);color:#fff}

.topbar-menu .social-link{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--ct-topbar-item-color);font-size:12px;padding:4px 6px;white-space:nowrap
}
.topbar-menu .social-link:hover{color:var(--ct-topbar-item-hover-color);text-decoration:none}
.social-ico{width:15px;height:15px;display:inline-flex;flex:0 0 auto}
.social-ico svg{width:15px;height:15px;display:block}


/* colorful social + larger topbar right cluster */
.topbar-menu{
  gap:12px!important
}
.topbar-menu .social-link{
  display:inline-flex;align-items:center;gap:7px;
  font-size:14px!important;font-weight:500;padding:4px 8px;white-space:nowrap
}
.topbar-menu .social-link:hover{text-decoration:none;filter:brightness(1.12)}
.social-ico{width:18px;height:18px;display:inline-flex;flex:0 0 auto}
.social-ico svg{width:18px;height:18px;display:block}
.social-link[title="Discord"]{color:#7289da}
.social-link[title="Discord"] .social-ico{color:#5865F2}
.social-link[title="Telegram"]{color:#5b9bd5}
.social-link[title="Telegram"] .social-ico{color:#2AABEE}

.topbar-menu .nav-ico,
.topbar-menu .nav-user,
.topbar-menu .tb-ico{
  width:34px!important;height:34px!important
}
.topbar-menu .tb-ico .ico{width:17px!important;height:17px!important}
.topbar-menu .tb-clock{
  min-width:72px!important;height:34px!important;padding:0 12px!important;gap:7px!important
}
.topbar-menu .tb-clock-txt{font-size:13px!important}
.topbar-menu .nav-chip,
.topbar-menu .lang-btn{
  height:34px!important;font-size:13px!important;padding:0 12px 0 10px!important
}
.topbar-menu .lang-flag{width:22px!important;height:15px!important}
.topbar-menu .lang-label{font-size:13px!important}
.topbar-menu .lang-caret{font-size:11px!important}
.topbar-menu .site-ver{font-size:14px!important}
.topbar-menu .nav-ico{font-size:15px!important}
.topbar-menu .nav-user{font-size:14px!important;font-weight:600}
.lang-opt{font-size:13px!important;padding:9px 14px!important}
.lang-opt .lang-flag{width:22px!important;height:15px!important}

/* app-search removed from topbar */
.app-search{display:none!important}
.navbar-custom.topbar .app-search{display:none!important}

/* user avatar menu */
.user-wrap{position:relative;overflow:visible}
.user-avatar-btn{
  width:34px;height:34px;padding:0;border:0;border-radius:50%;
  background:transparent;cursor:pointer;display:grid;place-items:center;
  box-shadow:0 0 0 2px rgba(114,124,245,.35)
}
.user-avatar-btn:hover{box-shadow:0 0 0 2px rgba(114,124,245,.7)}
.user-avatar-img{width:34px;height:34px;border-radius:50%;display:block;object-fit:cover}
.user-menu{
  position:absolute;right:0;top:calc(100% + 8px);min-width:168px;z-index:1500;
  background:#323a46;border:1px solid #4b5563;border-radius:8px;
  box-shadow:0 10px 28px rgba(0,0,0,.4);padding:6px 0;overflow:hidden
}
.user-menu[hidden]{display:none!important}
.user-menu-title{
  padding:8px 14px 6px;font-size:12px;color:#8391a2;border-bottom:1px solid #3a444e
}
.user-menu-item{
  display:flex;align-items:center;gap:10px;width:100%;
  border:0;background:transparent;color:#dee2e6;
  padding:10px 14px;cursor:pointer;font:inherit;text-align:left
}
.user-menu-item:hover{background:#3a444e;color:#fff}
.user-menu-item .umi{width:16px;height:16px;display:inline-flex;color:#8391a2}
.user-menu-item:hover .umi{color:#fff}


/* layout zone markers for communication */
.zone-mark{
  position:absolute; top:4px; left:4px; z-index:50;
  min-width:22px; height:18px; padding:0 6px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; color:#111; border:1px solid #fff; border-radius:3px;
  font:700 11px/1 "IBM Plex Sans", "Noto Sans SC", sans-serif;
  letter-spacing:.02em; pointer-events:none; user-select:none;
  box-shadow:0 1px 4px rgba(0,0,0,.35);
}
.zone-mark-sm{ min-width:26px; height:16px; font-size:10px; top:2px; left:2px; }
.navbar-custom.topbar,
.notice-use-NOTUSED{
  width:100%;
  box-sizing:border-box;
  position:relative;
}
/* NOTE: main-band / D* / e-band removed from legacy 38px lock — was crushing D1 height */


.navbar-custom.topbar .zone-mark{ top:50%; left:8px; transform:translateY(-50%); }
.notice-use .zone-mark{ top:50%; left:4px; transform:translateY(-50%); }
.notice-use .notice-bar{ padding-left:34px; }

/* D: large main frame below C, same L/R alignment (4%) */
.main-band{
  --main-inset-x: 4%;
  width:100%;
  height:auto;
  min-height:0;
  max-height:none;
  margin:0 0 12px;
  padding:0 var(--main-inset-x);
  box-sizing:border-box;
  background:transparent;
  border:1px solid #fff;
  position:relative;
  /* bottom hugs D3 — no extra empty height */
}
.main-band-inner{
  width:100%;
  height:64px;
  min-height: 64px;
  max-height: 64px;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.85);
  position:relative;
  background:rgba(46,54,64,.35);
  overflow:hidden;
}
.d1-row{
  width:100%;
  height:100%;
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  box-sizing:border-box;
}
.d1-cell{
  flex:0 0 108px;
  width:108px;
  height:100%;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.45);
  border-left:none;
  background:rgba(50,58,70,.75);
  color:#cfd5dd;
  font:600 11px/1 "IBM Plex Sans","Noto Sans SC",sans-serif;
  display:flex;
  align-items:center;
  justify-content:center;
  user-select:none;
}
.d1-cell:first-child{ border-left:1px solid rgba(255,255,255,.45); }
.main-band-inner > .zone-mark{ z-index:60; }

.main-band-d2{
  width:100%;
  height:48px;
  min-height: 48px;
  max-height: 48px;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.85);
  border-top:none;
  position:relative;
  background:rgba(46,54,64,.35);
}


.d2-row,.d3-row{
  width:100%;
  height:100%;
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  box-sizing:border-box;
}
.d2-cell,.d3-cell{
  flex:0 0 98px;
  width:98px;
  height:100%;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.45);
  border-left:none;
  background:rgba(50,58,70,.75);
  color:#cfd5dd;
  font:600 11px/1 "IBM Plex Sans","Noto Sans SC",sans-serif;
  display:flex;
  align-items:center;
  justify-content:center;
  user-select:none;
}
.d2-cell:first-child,.d3-cell:first-child{ border-left:1px solid rgba(255,255,255,.45); }
.main-band-d2 > .zone-mark,
.main-band-d3 > .zone-mark{ z-index:60; }


/* E: below D, same L/R alignment (4%), height 48 */
.e-band{
  --e-inset-x: 4%;
  width:100%;
  height:auto;
  min-height:0;
  max-height:none;
  margin:0 0 12px;
  padding:0 var(--e-inset-x);
  box-sizing:border-box;
  background:transparent;
  border:1px solid #fff;
  position:relative;
}
.e-band-inner{
  width:100%;
  height: 58px;
  min-height: 58px;
  max-height: 58px;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.85);
  position:relative;
  background:rgba(46,54,64,.35);
}

.e-band-e2{
  width:100%;
  height:38px;
  min-height:38px;
  max-height:38px;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.85);
  border-top:none;
  position:relative;
  background:rgba(46,54,64,.35);
  display:block;
  flex-shrink:0;
}
.e-band-e2 > .zone-mark{ z-index:60; }



/* F: below E, same L/R as E, height auto-grows like E; first row 38 */
.f-band{
  --f-inset-x: 4%;
  width:100%;
  height:auto;
  min-height:0;
  max-height:none;
  margin:0 0 12px;
  padding:0 var(--f-inset-x);
  box-sizing:border-box;
  background:transparent;
  border:1px solid #fff;
  position:relative;
}
.f-band-inner{
  width:100%;
  height:38px;
  min-height:38px;
  max-height:38px;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.85);
  position:relative;
  background:rgba(46,54,64,.35);
}

.f1-row{
  width:100%;
  height:100%;
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  box-sizing:border-box;
}
.f1-cell{
  flex:0 0 98px;
  width:98px;
  height:100%;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.45);
  border-left:none;
  background:rgba(50,58,70,.75);
  color:#cfd5dd;
  font:600 11px/1 "IBM Plex Sans","Noto Sans SC",sans-serif;
  display:flex;
  align-items:center;
  justify-content:center;
  user-select:none;
}
.f1-cell:first-child{ border-left:1px solid rgba(255,255,255,.45); }
.f-band-inner > .zone-mark{ z-index:60; }

/* floating L/R frames: width 48, height 768, stick to viewport (follow scroll) */
.float-side{
  position:fixed;
  width:48px;
  height:808px;
  min-width:48px;
  max-width:48px;
  min-height:808px;
  max-height:808px;
  box-sizing:border-box;
  border:1px solid #fff;
  background:rgba(37,43,51,.92);
  z-index:1250;
  overflow:hidden;
  pointer-events:none; /* do not cover G15/G-row clicks */
}
.float-side .zone-mark,
.float-side .fr-cell.is-interactive,
.float-side a,
.float-side button {
  pointer-events:auto;
}
.float-side-left{ left:0; top:8%; transform:none; }
.float-side-right{
  right:0;
  top:8%; /* fixed ratio from viewport top */
  transform:none;
}
.float-side > .zone-mark{
  top:8px; left:50%; transform:translateX(-50%);
  writing-mode:horizontal-tb;
}
@media (max-height:800px){
  .float-side{
    height:calc(100vh - 32px);
    min-height:0;
    max-height:calc(100vh - 32px);
  }
}

.fr-inner{
  width:100%;
  height:100%;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:stretch;
  overflow:hidden;
}
.fr-cell{
  flex:0 0 48px;
  width:100%;
  height:48px;
  min-height:48px;
  max-height:48px;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.45);
  border-top:none;
  background:rgba(50,58,70,.75);
  color:#cfd5dd;
  font:600 10px/1 "IBM Plex Sans","Noto Sans SC",sans-serif;
  display:flex;
  align-items:center;
  justify-content:center;
  user-select:none;
}
.fr-cell:first-child{ border-top:1px solid rgba(255,255,255,.45); }
.float-side-right > .zone-mark{ z-index:60; }

/* ===== LAYOUT LOCK POLICY =====
   A/B/C/D/F: fixed locked sizes
   E: free to grow downward; outer right border grows with height
*/
/* A lock */
.navbar-custom.topbar{
  height:var(--ct-topbar-height) !important;
  min-height:var(--ct-topbar-height) !important;
  max-height:var(--ct-topbar-height) !important;
  flex-shrink:0 !important;
}
/* B lock */
section.hero-band[data-zone="B"],
.hero-band{
  height:288px !important;
  min-height:288px !important;
  max-height:288px !important;
  flex-shrink:0 !important;
  overflow:hidden !important;
}
.hero-band-inner{
  height:100% !important;
  overflow:hidden !important;
}
/* C lock */
.notice-band{
  height:108px !important;
  min-height:108px !important;
  max-height:108px !important;
  flex-shrink:0 !important;
  overflow:hidden !important;
}
.notice-use{
  height:48px !important;
  min-height:48px !important;
  max-height:48px !important;
}
/* D lock: outer hugs D1+D2+D3 but children fixed; no free grow beyond */
.main-band{
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  flex-shrink:0 !important;
}
.main-band-inner{
  height:72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
  overflow:hidden !important;
}
.main-band-d2{
  height:56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  overflow:hidden !important;
}
.main-band-d3{
  height:56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  overflow:hidden !important;
}
.main-band-d4{
  height:56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  overflow:hidden !important;
}
/* F lock */
.f-band{
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  flex-shrink:0 !important;
}
.f-band-inner{
  height:38px !important;
  min-height:38px !important;
  max-height:38px !important;
  overflow:hidden !important;
}
/* E free: can grow downward; right border length follows height */
.e-band{
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:visible !important;
  border:1px solid #fff !important;
  box-sizing:border-box !important;
  display:block !important;
}
.e-band-inner{
  height: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;
  display:block !important;
}
.e-band-e2{
  width:100% !important;
  height:38px !important;
  min-height:38px !important;
  max-height:38px !important;
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  border:1px solid rgba(255,255,255,.85) !important;
  border-top:none !important;
  background:rgba(46,54,64,.35) !important;
  box-sizing:border-box !important;
}

/* A: split into 18 equal cells L→R */
.navbar-custom.topbar{
  position:relative !important;
}
.a-row{
  /* 左右框距离：改 header 上 --a-inset-left / --a-inset-right 数字 */
  position:absolute;
  top:0;
  bottom:0;
  left: var(--a-inset-left, 0px);
  right: var(--a-inset-right, 0px);
  width:auto;
  height:auto;
  display:flex;
  align-items:stretch;
  justify-content:stretch;
  box-sizing:border-box;
  pointer-events:none;
  z-index:1;
}
.a-cell{
  flex:1 1 0;
  min-width:0;
  height:100%;
  box-sizing:border-box;
  background:rgba(255,255,255,.03);
  color:rgba(207,213,221,.55);
  font:600 9px/1 "IBM Plex Sans","Noto Sans SC",sans-serif;
  display:flex;
  align-items:center;
  justify-content:center;
  user-select:none;
}
/* .a-cell L/R borders: not fixed — add per-cell when needed */
.a-cell:first-child{ border-left: none; }

/* A cells: no fixed L/R frame. Opt-in borders: */
.a-cell.a-border-l{ border-left: 1px solid rgba(255,255,255,.55); }
.a-cell.a-border-r{ border-right: 1px solid rgba(255,255,255,.55); }
.a-cell.a-border-lr{
  border-left: 1px solid rgba(255,255,255,.55);
  border-right: 1px solid rgba(255,255,255,.55);
}
.a-cell-half.a-border-l{ border-left: 1px solid rgba(255,255,255,.55); }
.a-cell-half.a-border-r{ border-right: 1px solid rgba(255,255,255,.55); }


/* A13: fixed outer size, internal L/R split */
.a-cell.a-cell-split{
  display:flex;
  flex-direction:row;
  align-items:stretch;
  justify-content:stretch;
  padding:0;
  gap:0;
  color:transparent; /* hide outer label if any */
}
.a-cell.a-cell-split > .a-cell-half{
  flex:1 1 0;
  min-width:0;
  height:100%;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(207,213,221,.55);
  font:600 10px/1 "IBM Plex Sans","Noto Sans SC",sans-serif;
  user-select:none;
  background:rgba(255,255,255,.02);
}
.a-cell.a-cell-split > .a-cell-half:first-child{
  border-right:1px solid rgba(255,255,255,.35);
}

/* A13L/R: FT4 refresh / FT3 help */
.a-cell-half{
  position:relative;
  overflow:visible;
  pointer-events:auto;
}
.a13-slot{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  pointer-events:auto;
  z-index:3;
}
.a13-slot > li{
  position:static !important;
  margin:0 !important;
  display:flex;
  align-items:center;
  justify-content:center;
}




/* A-bar tools: unified larger text + icons */
.a-ui{
  --a-tool-fs: 14px;
  --a-tool-ico: 18px;
  --a-tool-h: 36px;
}
.a-clock-slot .tb-ico.tb-clock,
.a13-slot .tb-ico,
.a13-slot .nav-ico,
.a-social-slot .social-link,
.a-lang-slot .lang-btn{
  height: var(--a-tool-h) !important;
  min-height: var(--a-tool-h) !important;
  font-size: var(--a-tool-fs) !important;
  line-height: 1 !important;
  box-sizing: border-box;
}
.a-clock-slot .tb-ico.tb-clock{
  width: auto !important;
  min-width: 86px !important;
  padding: 0 12px !important;
  gap: 8px !important;
  border-radius: 7px !important;
}
.a-clock-slot .tb-ico.tb-clock .ico,
.a13-slot .tb-ico .ico{
  width: var(--a-tool-ico) !important;
  height: var(--a-tool-ico) !important;
}
.a-clock-slot .tb-clock-txt{
  font-size: var(--a-tool-fs) !important;
}
.a13-slot .tb-ico{
  width: var(--a-tool-h) !important;
  padding: 0 !important;
  border-radius: 7px !important;
}
.a13-slot .nav-ico{
  width: var(--a-tool-h) !important;
  padding: 0 !important;
  border-radius: 50% !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}
.a-social-slot .social-link{
  display: inline-flex !important;
  align-items: center;
  gap: 8px !important;
  padding: 0 10px !important;
  border: 1px solid #414d5d;
  background: #3c4655;
  border-radius: 7px;
  color: var(--ct-topbar-item-color);
  text-decoration: none;
}
.a-social-slot .social-link:hover{
  color: #fff;
  background: #464f5b;
}
.a-social-slot .social-ico,
.a-social-slot .social-ico svg{
  width: var(--a-tool-ico) !important;
  height: var(--a-tool-ico) !important;
  display: block;
  flex: 0 0 auto;
}
.a-social-slot .social-link > span:not(.social-ico){
  font-size: var(--a-tool-fs) !important;
}
.a-lang-slot .lang-btn{
  display: inline-flex !important;
  align-items: center;
  gap: 8px !important;
  padding: 0 12px 0 10px !important;
  border-radius: 18px !important;
}
.a-lang-slot .lang-flag{
  width: 22px !important;
  height: 15px !important;
}
.a-lang-slot .lang-label,
.a-lang-slot .lang-caret{
  font-size: var(--a-tool-fs) !important;
}
.a-ver-slot .site-ver{
  font-size: var(--a-tool-fs) !important;
}
.a-user-slot .user-avatar-btn,
.a-user-slot .user-avatar-img{
  width: 38px !important;
  height: 38px !important;
}

.a-cell.a-cell-split{
  pointer-events:auto;
  color:inherit;
}


.a-ui{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  width:100%;
  height:100%;
  box-sizing:border-box;
  gap:12px;
  pointer-events:auto;
}
.a-ui .topbar-menu{ margin-left:auto; }

/* A: user avatar centered in column 17 of 18-grid */
.navbar-custom.topbar{ position:relative !important; }
/* moved to .a-user-slot */

/* A: version label at left edge of column 38 */
.topbar-menu > li.site-ver-li{
  position:absolute !important;
  left: calc((38 - 1) / 38 * 100%) !important;
  top:50% !important;
  transform: translateY(-50%) !important;
  margin:0 !important;
  z-index:5;
  display:flex !important;
  align-items:center;
  justify-content:flex-start;
}
.topbar-menu > li.site-ver-li .site-ver{
  margin:0 !important;
  padding-left:4px;
}



/* FT: each icon in its own framed cell */
.f-tools{
  --ft-inset-x: 4%;
  width:100%;
  min-height:48px;
  margin:0 0 12px;
  padding:8px var(--ft-inset-x);
  box-sizing:border-box;
  border:1px solid #fff;
  position:relative;
  background:rgba(46,54,64,.25);
}
.f-tools > .zone-mark{ z-index:60; }
.ft-row{
  width:100%;
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  gap:8px;
  box-sizing:border-box;
}
.ft-cell{
  position:relative;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.85);
  background:rgba(50,58,70,.75);
  min-height:44px;
  padding:6px 10px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ft-cell > .zone-mark{ top:2px; left:2px; z-index:5; }
.ft-cell-menu{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
}
.ft-cell-menu > li{
  position:static !important;
  left:auto !important;
  top:auto !important;
  transform:none !important;
  margin:0 !important;
  display:flex;
  align-items:center;
}




/* A12: clock from FT5 (independent slot) */
.a-clock-slot{
  list-style:none;
  margin:0;
  padding:0;
  position:absolute !important;
  left: calc((20 - 0.5) / 36 * 100%) !important;
  top:50% !important;
  transform: translate(-50%, -50%) !important;
  z-index:6;
  display:flex;
  align-items:center;
  pointer-events:auto;
}
.a-clock-slot > li{
  position:static !important;
  left:auto !important;
  top:auto !important;
  transform:none !important;
  margin:0 !important;
  display:flex;
  align-items:center;
}



/* A14/A15: Discord / Telegram pulled from FT1 / FT2 as independent slots */
.a-social-slot{
  list-style:none;
  margin:0;
  padding:0;
  position:absolute !important;
  top:50% !important;
  transform: translate(-50%, -50%) !important;
  z-index:6;
  display:flex;
  align-items:center;
  pointer-events:auto;
}
.a-discord-slot{ display:none !important; }
.a-telegram-slot{ left: calc((28 - 0.5) / 36 * 100%) !important; }
.a-social-slot > li{
  position:static !important;
  margin:0 !important;
  display:flex;
  align-items:center;
}

/* A16: lang switcher from FT6 */
.a-lang-slot{
  list-style:none;
  margin:0;
  padding:0;
  position:absolute !important;
  left: calc((33 - 0.5) / 36 * 100%) !important;
  top:50% !important;
  transform: translate(-50%, -50%) !important;
  z-index:6;
  display:flex;
  align-items:center;
  pointer-events:auto;
}
.a-lang-slot > li.lang-wrap{
  position:relative !important;
  left:auto !important;
  top:auto !important;
  margin:0 !important;
  display:flex;
  align-items:center;
  overflow:visible;
}

/* A17: user avatar from FT8 */
.a-user-slot{
  list-style:none;
  margin:0;
  padding:0;
  position:absolute !important;
  left: calc((35 - 0.5) / 36 * 100%) !important;
  top:50% !important;
  transform: translate(-50%, -50%) !important;
  z-index:6;
  display:flex;
  align-items:center;
}
.a-user-slot > li.user-wrap{
  position:static !important;
  left:auto !important;
  top:auto !important;
  transform:none !important;
  margin:0 !important;
  display:flex;
  align-items:center;
}

/* A18: version (from FT7) flush to left + bottom edges of column 38 */
.a-ver-slot{
  list-style:none;
  margin:0;
  padding:0;
  position:absolute !important;
  left: calc((38 - 1) / 38 * 100% - var(--a-tools-nudge, 0%)) !important;
  bottom: 0 !important;
  top: auto !important;
  transform: none !important;
  z-index:6;
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  pointer-events:auto;
}
.a-ver-slot > li.site-ver-li{
  position:static !important;
  left:auto !important;
  top:auto !important;
  transform:none !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  align-items:flex-end;
  line-height:1;
}
.a-ver-slot .site-ver{
  margin:0 !important;
  padding:0 !important;
  color:#8391a2;
  font-size:13px;
  font-weight:500;
  letter-spacing:.02em;
  line-height:1;
  white-space:nowrap;
  user-select:none;
}




/* A 36-grid positions (原18×2) */
.a-ui { --a-tools-nudge: 1.2%; }
.a-clock-slot { left: calc((20 - 0.5) / 36 * 100% - var(--a-tools-nudge)) !important; }
/* discord moved to A23 cell */
.a-discord-slot { display:none !important; }
.a-telegram-slot { left: calc((28 - 0.5) / 36 * 100% - var(--a-tools-nudge)) !important; }
.a-lang-slot { left: calc((33 - 0.5) / 36 * 100% - var(--a-tools-nudge)) !important; }
.a-user-slot { left: calc((35 - 0.5) / 36 * 100% - var(--a-tools-nudge)) !important; }
.a-ver-slot { left: calc((36 - 1) / 36 * 100% - var(--a-tools-nudge)) !important; }


.a-cell.a-cell-tool{
  color: inherit;
  pointer-events: auto;
  overflow: visible;
}
.a-cell.a-cell-tool .a13-slot{
  width: 100%;
  height: 100%;
}


/* A21 refresh: Chinese text button */
.a-refresh-text-btn,
.a13-slot .tb-ico.a-refresh-text-btn{
  width: auto !important;
  min-width: var(--a-tool-h, 36px);
  height: var(--a-tool-h, 36px) !important;
  padding: 0 10px !important;
  border-radius: 7px !important;
  font-size: var(--a-tool-fs, 14px) !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em;
  white-space: nowrap;
  line-height: 1 !important;
}


/* In-grid A tools visibility */
.a-row{ pointer-events: none; }
.a-cell.a-cell-tool{
  pointer-events: auto !important;
  z-index: 8;
  color: inherit !important;
  overflow: visible !important;
  position: relative;
}
.a-cell.a-cell-tool .a13-slot{
  pointer-events: auto !important;
  z-index: 8;
}
.a-cell.a-cell-tool .tb-ico,
.a-cell.a-cell-tool .nav-ico,
.a-cell.a-cell-tool .social-link{
  pointer-events: auto !important;
}
.a13-discord-slot .social-link{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:0 !important;
  width: var(--a-tool-h, 36px);
  height: var(--a-tool-h, 36px) !important;
  min-height: var(--a-tool-h, 36px) !important;
  padding: 0 !important;
  border: 1px solid #414d5d;
  background: #3c4655;
  border-radius: 7px;
  color: var(--ct-topbar-item-color);
  font-size: 0 !important; /* hide Discord text, icon only in tight cell */
}
.a13-discord-slot .social-link > span:not(.social-ico){ display:none !important; }
.a13-discord-slot .social-ico,
.a13-discord-slot .social-ico svg{
  width: var(--a-tool-ico, 18px) !important;
  height: var(--a-tool-ico, 18px) !important;
  display:block;
}


/* Let clicks/pass-through to in-grid A tools; keep a-ui children clickable */
.a-ui{ pointer-events: none !important; }
.a-ui > *{ pointer-events: auto !important; }


/* ===== LAYOUT GRID = VISUAL REFERENCE ONLY (不影响实际应用交互) ===== */
.a-row,
.a-cell,
.zone-mark,
.zone-mark-sm,
.hero-card,
[data-zone="B"] .hero-card,
.d-cell, .d1-cell, .d3-cell, .d4-cell, .f1-cell, .e-band-e1, .e-band-e2,
.fr-cell{
  pointer-events: none !important;
}
.a-row{ z-index: 1; }
/* real controls live in .a-ui slots */
.a-ui{ pointer-events: none !important; z-index: 6; }
.a-ui > *{ pointer-events: auto !important; }

/* A21 refresh / A22 help / A23 Discord */
.a-ref-slot,
.a-help-slot,
.a-disc-slot{
  list-style:none;
  margin:0;
  padding:0;
  position:absolute !important;
  top:50% !important;
  transform: translate(-50%, -50%) !important;
  z-index:7;
  display:flex;
  align-items:center;
  pointer-events:auto;
}
.a-ref-slot{ left: calc((21 - 0.5) / 36 * 100% - var(--a-tools-nudge, 0%)) !important; }
.a-help-slot{ left: calc((22 - 0.5) / 36 * 100% - var(--a-tools-nudge, 0%)) !important; }
.a-disc-slot{ left: calc((23 - 0.5) / 36 * 100% - var(--a-tools-nudge, 0%)) !important; }
.a-ref-slot > li,
.a-help-slot > li,
.a-disc-slot > li{
  margin:0 !important;
  display:flex;
  align-items:center;
}
.a-ref-slot .tb-ico{
  width: var(--a-tool-h, 36px) !important;
  height: var(--a-tool-h, 36px) !important;
  padding:0 !important;
}
.a-ref-slot .tb-ico .ico{
  width: var(--a-tool-ico, 18px) !important;
  height: var(--a-tool-ico, 18px) !important;
}
.a-help-slot .nav-ico{
  width: var(--a-tool-h, 36px) !important;
  height: var(--a-tool-h, 36px) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}
.a-disc-slot .social-link{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  width: auto !important;
  height: var(--a-tool-h, 36px) !important;
  min-height: var(--a-tool-h, 36px) !important;
  padding: 0 10px !important;
  gap: 8px !important;
  border: 0;
  background: transparent;
  border-radius:7px;
  color:var(--ct-topbar-item-color);
  font-size: var(--a-tool-fs, 14px) !important;
  font-weight: 500;
  text-decoration:none;
  white-space: nowrap;
}
.a-disc-slot .social-link > span:not(.social-ico){
  display:inline !important;
  font-size: var(--a-tool-fs, 14px) !important;
}
.a-disc-slot .social-ico,
.a-disc-slot .social-ico svg{
  width: var(--a-tool-ico, 18px) !important;
  height: var(--a-tool-ico, 18px) !important;
  display:block;
}


/* Telegram / Lang spacing: avoid overlap */
.a-telegram-slot .social-link{
  display:inline-flex !important;
  align-items:center;
  gap:8px !important;
  height: var(--a-tool-h, 36px) !important;
  padding: 0 10px !important;
  border: 0;
  background: transparent;
  border-radius:7px;
  color:var(--ct-topbar-item-color);
  font-size: var(--a-tool-fs, 14px) !important;
  text-decoration:none;
  white-space:nowrap;
}
.a-telegram-slot .social-ico,
.a-telegram-slot .social-ico svg{
  width: var(--a-tool-ico, 18px) !important;
  height: var(--a-tool-ico, 18px) !important;
  display:block;
  flex:0 0 auto;
}
.a-lang-slot .lang-btn{
  max-width: none;
}


/* A tools: pack right, ignore grid numbers */
.a-ui{
  display:flex !important;
  align-items:center !important;
}
.a-tools-right{
  margin-left:auto !important;
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:6px !important;
  position:relative !important;
  z-index:8;
  pointer-events:auto !important;
}
.a-tools-right > .a-tools-item{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
  position:static !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  transform:none !important;
  display:flex !important;
  align-items:center !important;
  flex:0 0 auto !important;
}
.a-tools-right > .a-tools-item > li{
  position:static !important;
  left:auto !important;
  top:auto !important;
  transform:none !important;
  margin:0 !important;
  display:flex !important;
  align-items:center !important;
}
.a-tools-right .tb-ico,
.a-tools-right .nav-ico,
.a-tools-right .social-link,
.a-tools-right .lang-btn{
  height:var(--a-tool-h, 36px) !important;
  min-height:var(--a-tool-h, 36px) !important;
  box-sizing:border-box;
}
.a-tools-right .tb-ico:not(.tb-clock){
  width:var(--a-tool-h, 36px) !important;
  padding:0 !important;
}
.a-tools-right .tb-ico.tb-clock{
  width:auto !important;
  min-width:86px !important;
  padding:0 12px !important;
  gap:8px !important;
}
.a-tools-right .nav-ico{
  width:var(--a-tool-h, 36px) !important;
  padding:0 !important;
  border-radius:50% !important;
  font-size:16px !important;
  font-weight:700 !important;
}
.a-tools-right .social-link{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  padding:0 10px !important;
  border: 0;
  background: transparent;
  border-radius:7px;
  color:var(--ct-topbar-item-color);
  font-size:var(--a-tool-fs, 14px) !important;
  text-decoration:none;
  white-space:nowrap;
  width:auto !important;
}
.a-tools-right .social-link > span:not(.social-ico){
  display:inline !important;
  font-size:var(--a-tool-fs, 14px) !important;
}
.a-tools-right .social-ico,
.a-tools-right .social-ico svg,
.a-tools-right .tb-ico .ico{
  width:var(--a-tool-ico, 18px) !important;
  height:var(--a-tool-ico, 18px) !important;
  display:block;
  flex:0 0 auto;
}
.a-tools-right .lang-btn{
  padding:0 12px 0 10px !important;
  gap:8px !important;
  border-radius:18px !important;
  font-size:var(--a-tool-fs, 14px) !important;
}
.a-tools-right .site-ver{
  font-size:var(--a-tool-fs, 14px) !important;
  padding:0 4px !important;
  white-space:nowrap;
}
.a-tools-right .user-avatar-btn,
.a-tools-right .user-avatar-img{
  width:38px !important;
  height:38px !important;
}


/* version: stick to bottom edge of A bar */
.a-tools-right{
  align-items: center !important;
  align-self: stretch !important;
  height: 100% !important;
}
.a-tools-right > .a-tools-item.a-ver-slot{
  align-self: flex-end !important;
  height: auto !important;
  padding-bottom: 1px !important;
  margin-bottom: 0 !important;
}
.a-tools-right > .a-tools-item.a-ver-slot > li.site-ver-li{
  align-items: flex-end !important;
  line-height: 1 !important;
}
.a-tools-right .a-ver-slot .site-ver{
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
}


/* A grid table: hidden */
.a-row{ display: none !important; }
header.navbar-custom.topbar > .zone-mark{ display: none !important; }


/* A area unified background */
.navbar-custom.topbar,
header.navbar-custom.topbar{
  background: #3A444E !important;
  background-image: none !important;
}
.a-ui{
  background: transparent !important;
}


/* A region full-bleed #3A444E — includes right strip; buttons blend in */
.navbar-custom.topbar,
header.navbar-custom.topbar{
  width: 100% !important;
  max-width: none !important;
  right: 0 !important;
  background: #3A444E !important;
  background-image: none !important;
  border-color: rgba(255,255,255,.35) !important;
}
.a-ui{
  background: transparent !important;
}
.a-tools-right{
  background: transparent !important;
  /* keep clear of FR 48px rail */
  padding-right: var(--fr-gutter, 52px) !important;
  box-sizing: border-box !important;
}


.a-tools-right .user-avatar-btn,
.a-tools-right .site-ver{
  background: transparent !important;
  border: 0 !important;
}

/* A tools buttons: NO separate chip background — same as A #3A444E */
.a-tools-right .tb-ico,
.a-tools-right .tb-ico.tb-clock,
.a-tools-right .nav-ico,
.a-tools-right .social-link,
.a-tools-right .lang-btn,
.a-tools-right .nav-chip,
.a-tools-right .lang-wrap .lang-btn,
.navbar-custom.topbar .a-tools-right .tb-ico,
.navbar-custom.topbar .a-tools-right .nav-ico,
.navbar-custom.topbar .a-tools-right .social-link,
.navbar-custom.topbar .a-tools-right .lang-btn{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
.a-tools-right .tb-ico:hover,
.a-tools-right .nav-ico:hover,
.a-tools-right .social-link:hover,
.a-tools-right .lang-btn:hover,
.navbar-custom.topbar .a-tools-right .tb-ico:hover,
.navbar-custom.topbar .a-tools-right .nav-ico:hover,
.navbar-custom.topbar .a-tools-right .social-link:hover,
.navbar-custom.topbar .a-tools-right .lang-btn:hover{
  background: rgba(255,255,255,.06) !important;
  background-color: rgba(255,255,255,.06) !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #fff !important;
}
.a-tools-right .user-avatar-btn{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}


/* content cards first & visible */
.hero-band-inner .hero-card.is-filled,
.hero-band-inner .activity-card.is-filled{
  order: 0;
  display: flex !important;
  flex-direction: column;
  flex: 0 0 var(--b1-card-w, 260px) !important;
  width: var(--b1-card-w, 260px) !important;
  min-width: var(--b1-card-w, 260px) !important;
  max-width: var(--b1-card-w, 260px) !important;
  height: var(--b1-card-h, 248px) !important;
  min-height: var(--b1-card-h, 248px) !important;
  max-height: var(--b1-card-h, 248px) !important;
  pointer-events: auto !important;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: #323a46;
  overflow: hidden;
  color: #dee2e6;
  scroll-snap-align: start;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.hero-band-inner .hero-card.is-filled:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 8px 20px rgba(0,0,0,.28);
}

/* empty cards: deprioritized — hide by default so content always wins space */
.hero-band-inner .hero-card.is-empty{
  order: 99;
  display: none !important;
  pointer-events: none !important;
}

.activity-card-cover{
  flex: 0 0 42%;
  min-height: 88px;
  background:
    linear-gradient(135deg, rgba(44,142,248,.45), rgba(114,124,245,.25) 45%, rgba(58,68,78,.2)),
    linear-gradient(180deg, #3a4450, #2e3640);
}
.activity-card.is-filled:nth-child(2) .activity-card-cover{
  background:
    linear-gradient(135deg, rgba(10,207,151,.4), rgba(44,142,248,.2) 50%, rgba(58,68,78,.15)),
    linear-gradient(180deg, #3a4450, #2e3640);
}
.activity-card.is-filled:nth-child(3) .activity-card-cover{
  background:
    linear-gradient(135deg, rgba(255,195,90,.4), rgba(253,126,20,.2) 50%, rgba(58,68,78,.15)),
    linear-gradient(180deg, #3a4450, #2e3640);
}
.activity-card.is-filled:nth-child(4) .activity-card-cover{
  background:
    linear-gradient(135deg, rgba(255,103,155,.35), rgba(114,124,245,.25) 50%, rgba(58,68,78,.15)),
    linear-gradient(180deg, #3a4450, #2e3640);
}
.activity-card.is-filled:nth-child(5) .activity-card-cover{
  background:
    linear-gradient(135deg, rgba(114,124,245,.45), rgba(44,142,248,.2) 50%, rgba(58,68,78,.15)),
    linear-gradient(180deg, #3a4450, #2e3640);
}
.activity-card-body{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 12px 10px;
  min-height: 0;
}
.activity-badge{
  align-self: flex-start;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: #c5ced8;
}
.activity-badge-hot{ background: rgba(250,92,124,.18); color: #ff8aa0; }
.activity-badge-new{ background: rgba(10,207,151,.16); color: #4be0b5; }
.activity-badge-tag{ background: rgba(44,142,248,.16); color: #7cbcff; }
.activity-badge-soon{ background: rgba(255,195,90,.14); color: #ffd27a; }
.activity-title{ margin:0; font-size:15px; font-weight:700; line-height:1.25; color:#fff; }
.activity-desc{ margin:0; font-size:12px; line-height:1.4; color:#97a3b1; flex:1 1 auto; }
.activity-meta{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:4px; }
.activity-date{ font-size:11px; color:#8391a2; white-space:nowrap; }
.activity-cta{ font-size:12px; font-weight:600; color:#7cbcff; white-space:nowrap; }



/* B1: three groups 5x2, fixed card size; left + center + right */
.hero-band-inner{
  display: flex !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  height: 100% !important;
}
.b1-groups{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
}
.b1-group{
  display: grid !important;
  grid-template-columns: repeat(5, 168px) !important;
  grid-template-rows: repeat(2, 68px) !important;
  gap: 10px 12px !important;
  flex: 0 0 auto;
}
.hero-band-inner .hero-card,
.b1-group .hero-card,
[data-zone="B"] .hero-card{
  display: flex !important;
  width: 168px !important;
  min-width: 168px !important;
  max-width: 168px !important;
  height: 68px !important;
  min-height: 68px !important;
  max-height: 68px !important;
  flex: 0 0 168px !important;
  box-sizing: border-box !important;
  border: none !important;
  border-radius: 6px !important;
  background: rgba(50,58,70,.9) !important;
  color: #dee2e6 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  align-items: center !important;
  justify-content: center !important;
  transform: none !important;
}








/* === CARD 01–04 workers metric === */
.hero-card.mf-workers-card,
.hero-card[data-i="1"],
.hero-card[data-i="2"],
.hero-card[data-i="3"],
.hero-card[data-i="4"],
.hero-card#card01 {
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: auto !important;
  position: relative !important;
}
.hero-card.mf-workers-card .mf-top-split,
.hero-card[data-i="1"] .mf-top-split,
.hero-card[data-i="2"] .mf-top-split,
.hero-card[data-i="3"] .mf-top-split,
.hero-card[data-i="4"] .mf-top-split {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 18px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  box-sizing: border-box !important;
}
.hero-card.mf-workers-card .mf-half,
.hero-card[data-i="1"] .mf-half,
.hero-card[data-i="2"] .mf-half,
.hero-card[data-i="3"] .mf-half,
.hero-card[data-i="4"] .mf-half {
  flex: 1 1 50% !important;
  width: 50% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  border: 1px dashed rgba(255,255,255,.45) !important;
  background: rgba(0,0,0,.10) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}
.hero-card.mf-workers-card .mf-half-l,
.hero-card[data-i="1"] .mf-half-l,
.hero-card[data-i="2"] .mf-half-l,
.hero-card[data-i="3"] .mf-half-l,
.hero-card[data-i="4"] .mf-half-l {
  border-right-width: 0 !important;
}
.hero-card.mf-workers-card .mf-half-r,
.hero-card[data-i="1"] .mf-half-r,
.hero-card[data-i="2"] .mf-half-r,
.hero-card[data-i="3"] .mf-half-r,
.hero-card[data-i="4"] .mf-half-r {
  border-left: 1px dashed rgba(255,255,255,.45) !important;
}
.hero-card.mf-workers-card .mf-digits,
.hero-card[data-i="1"] .mf-digits,
.hero-card[data-i="2"] .mf-digits,
.hero-card[data-i="3"] .mf-digits,
.hero-card[data-i="4"] .mf-digits {
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  align-items: center !important;
  justify-items: center !important;
  box-sizing: border-box !important;
}
.hero-card.mf-workers-card .mf-digits .d,
.hero-card[data-i="1"] .mf-digits .d,
.hero-card[data-i="2"] .mf-digits .d,
.hero-card[data-i="3"] .mf-digits .d,
.hero-card[data-i="4"] .mf-digits .d {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  font-family: "IBM Plex Sans", "Noto Sans SC", system-ui, sans-serif !important;
  font-weight: 400 !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  user-select: none !important;
  text-align: center !important;
}
.hero-card.mf-workers-card .mf-digits .d.is-empty,
.hero-card[data-i="1"] .mf-digits .d.is-empty,
.hero-card[data-i="2"] .mf-digits .d.is-empty,
.hero-card[data-i="3"] .mf-digits .d.is-empty,
.hero-card[data-i="4"] .mf-digits .d.is-empty {
  visibility: hidden !important;
}
.hero-card.mf-workers-card .mf-digits-l .d,
.hero-card[data-i="1"] .mf-digits-l .d,
.hero-card[data-i="2"] .mf-digits-l .d,
.hero-card[data-i="3"] .mf-digits-l .d,
.hero-card[data-i="4"] .mf-digits-l .d {
  color: #e8ecf1 !important;
  font-weight: 400 !important;
  font-size: min(36px, calc((68px - 18px) * 0.78)) !important;
}
.hero-card.mf-workers-card .mf-digits-r .d,
.hero-card[data-i="1"] .mf-digits-r .d,
.hero-card[data-i="2"] .mf-digits-r .d,
.hero-card[data-i="3"] .mf-digits-r .d,
.hero-card[data-i="4"] .mf-digits-r .d {
  color: #ff3b3b !important;
  font-weight: 400 !important;
  font-size: min(22px, calc((68px - 18px) * 0.48)) !important;
  font-weight: 400 !important;
}
.hero-card.mf-workers-card .mf-cell-h18,
.hero-card[data-i="1"] .mf-cell-h18,
.hero-card[data-i="2"] .mf-cell-h18,
.hero-card[data-i="3"] .mf-cell-h18,
.hero-card[data-i="4"] .mf-cell-h18 {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  box-sizing: border-box !important;
  border: 1px dashed rgba(255,255,255,.55) !important;
  background: rgba(0,0,0,.14) !important;
  pointer-events: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.hero-card.mf-workers-card .mf-cell-h18 .mf-lab,
.hero-card[data-i="1"] .mf-cell-h18 .mf-lab,
.hero-card[data-i="2"] .mf-cell-h18 .mf-lab,
.hero-card[data-i="3"] .mf-cell-h18 .mf-lab,
.hero-card[data-i="4"] .mf-cell-h18 .mf-lab {
  font-family: "IBM Plex Sans", "Noto Sans SC", system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  color: #c5ced8 !important;
  letter-spacing: 0.02em !important;
  text-align: center !important;
  white-space: nowrap !important;
}



/* === CARD 03 split line shift === */
/* 竖线向左移一半：从 50% → 25% */
.hero-card[data-i="3"] .mf-top-split .mf-half-l {
  flex: 0 0 25% !important;
  width: 25% !important;
  max-width: 25% !important;
}
.hero-card[data-i="3"] .mf-top-split .mf-half-r {
  flex: 1 1 75% !important;
  width: 75% !important;
  max-width: 75% !important;
}
.hero-card[data-i="3"] .mf-half-l {
  padding: 2px !important;
}
.hero-card[data-i="3"] .mf-half-l .mf-bolt {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  color: #ffc35a !important; /* 黄色闪电 */
  line-height: 0 !important;
  box-sizing: border-box !important;
}
.hero-card[data-i="3"] .mf-half-l .mf-bolt svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  /* 瘦一点：高度铺满不变，横向压窄 */
  transform: scaleX(0.55) !important;
  transform-origin: center center !important;
}


.hero-card[data-i="3"] .mf-half-r .mf-power {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
  padding: 0 2px !important;
  font-family: "IBM Plex Sans", "Noto Sans SC", system-ui, sans-serif !important;
  font-weight: 400 !important;
  font-size: min(36px, calc((68px - 18px) * 0.78)) !important;
  line-height: 1 !important;
  color: #e8ecf1 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  text-align: center !important;
  overflow: hidden !important;
}

/* === CARD 04 no split + quota === */
.hero-card[data-i="4"] .mf-top-single {
  display: flex !important;
}
.hero-card[data-i="4"] .mf-half-full {
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  border: 1px dashed rgba(255,255,255,.45) !important;
  border-right-width: 1px !important;
}
.hero-card[data-i="4"] .mf-half-l,
.hero-card[data-i="4"] .mf-half-r {
  display: none !important;
}


/* continuous numbers — no 3-slot spread */
.hero-card.mf-workers-card .mf-num,
.hero-card[data-i="1"] .mf-num,
.hero-card[data-i="2"] .mf-num,
.hero-card[data-i="4"] .mf-num,
.hero-card[data-i="5"] .mf-num {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
  font-family: "IBM Plex Sans", "Noto Sans SC", system-ui, sans-serif !important;
  font-weight: 400 !important;
  font-size: min(36px, calc((68px - 18px) * 0.78)) !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
  text-align: center !important;
  padding: 0 4px !important;
}
.hero-card.mf-workers-card .mf-num-l,
.hero-card[data-i="1"] .mf-num-l,
.hero-card[data-i="2"] .mf-num-l,
.hero-card[data-i="5"] .mf-num-l {
  color: #e8ecf1 !important;
}
.hero-card.mf-workers-card .mf-num-r,
.hero-card[data-i="1"] .mf-num-r,
.hero-card[data-i="2"] .mf-num-r,
.hero-card[data-i="5"] .mf-num-r {
  color: #ff3b3b !important;
  font-size: min(22px, calc((68px - 18px) * 0.48)) !important;
}
.hero-card[data-i="4"] .mf-quota {
  color: #e8ecf1 !important;
  letter-spacing: 0.02em !important;
}


/* === CARD 05 same format as card 04 === */
.hero-card[data-i="5"],
.hero-card#card05 {
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: auto !important;
  position: relative !important;
}
.hero-card[data-i="5"] .mf-top-split,
.hero-card[data-i="5"] .mf-top-single {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 18px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  box-sizing: border-box !important;
}
.hero-card[data-i="5"] .mf-half-full {
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  border: 1px dashed rgba(255,255,255,.45) !important;
  background: rgba(0,0,0,.10) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}
.hero-card[data-i="5"] .mf-half-l,
.hero-card[data-i="5"] .mf-half-r {
  display: none !important;
}
.hero-card[data-i="5"] .mf-cell-h18 {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  box-sizing: border-box !important;
  border: 1px dashed rgba(255,255,255,.55) !important;
  background: rgba(0,0,0,.14) !important;
  pointer-events: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.hero-card[data-i="5"] .mf-cell-h18 .mf-lab {
  font-family: "IBM Plex Sans", "Noto Sans SC", system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  color: #c5ced8 !important;
  letter-spacing: 0.02em !important;
  text-align: center !important;
  white-space: nowrap !important;
}
.hero-card[data-i="5"] .mf-num,
.hero-card[data-i="5"] .mf-points {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
  font-family: "IBM Plex Sans", "Noto Sans SC", system-ui, sans-serif !important;
  font-weight: 400 !important;
  font-size: min(36px, calc((68px - 18px) * 0.78)) !important;
  line-height: 1 !important;
  color: #e8ecf1 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
  text-align: center !important;
  padding: 0 4px !important;
}
/* === B ZONE FIXED HEIGHT (lock) === */
section.hero-band[data-zone="B"],
.hero-band[data-zone="B"],
.hero-band {
  height: 288px !important;
  min-height: 288px !important;
  max-height: 288px !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
.hero-band[data-zone="B"] .hero-band-inner,
.hero-band .hero-band-inner,
[data-zone="B1"].hero-band-inner {
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* B1 pack: fixed card size, left pack, fits inside fixed B */
.b1-card-pack {
  --b1-card-w: 168px;
  --b1-card-h: 68px;
  --b1-gap-x: 12px;
  --b1-gap-y: 10px;
  --b1-cols-max: 6;
  --b1-row-max: calc(var(--b1-cols-max) * var(--b1-card-w) + (var(--b1-cols-max) - 1) * var(--b1-gap-x));
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-content: flex-start !important;
  align-items: flex-start !important;
  gap: var(--b1-gap-y) var(--b1-gap-x) !important;
  width: min(100%, var(--b1-row-max)) !important;
  max-width: var(--b1-row-max) !important;
  height: auto !important;
  max-height: 100% !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* B1 pack: centered block, max 6/row, items LTR */
.hero-band[data-zone="B"] .hero-band-inner,
[data-zone="B1"].hero-band-inner {
  justify-content: center !important;
  align-items: flex-start !important;
  align-content: flex-start !important;
}

.b1-card-pack .hero-card,
.hero-band-inner .hero-card,
[data-zone="B"] .hero-card {
  flex: 0 0 var(--b1-card-w) !important;
  width: var(--b1-card-w) !important;
  min-width: var(--b1-card-w) !important;
  max-width: var(--b1-card-w) !important;
  height: var(--b1-card-h) !important;
  min-height: var(--b1-card-h) !important;
  max-height: var(--b1-card-h) !important;
  box-sizing: border-box !important;
}
/* prevent tall activity/is-filled cards from breaking B height */
.hero-band-inner .hero-card.is-filled,
[data-zone="B"] .hero-card.is-filled {
  height: var(--b1-card-h, 68px) !important;
  min-height: var(--b1-card-h, 68px) !important;
  max-height: var(--b1-card-h, 68px) !important;
  width: var(--b1-card-w, 168px) !important;
  min-width: var(--b1-card-w, 168px) !important;
  max-width: var(--b1-card-w, 168px) !important;
  flex: 0 0 var(--b1-card-w, 168px) !important;
}



/* slot numbers on 7–9 for observation */
.hero-card[data-i="7"] .mf-g4-cell,
.hero-card[data-i="8"] .mf-g4-cell,
.hero-card[data-i="9"] .mf-g4-cell {
  position: relative !important;
}
.hero-card[data-i="7"] .mf-slot-no,
.hero-card[data-i="8"] .mf-slot-no,
.hero-card[data-i="9"] .mf-slot-no {
  position: absolute !important;
  top: 2px !important;
  right: 3px !important;
  font-family: "IBM Plex Sans", system-ui, sans-serif !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  color: rgba(255,255,255,.55) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}




/* hash cell content in 7–9 — left aligned, hashrate visible */
.hero-card[data-i="7"] .mf-g4-cell,
.hero-card[data-i="8"] .mf-g4-cell,
.hero-card[data-i="9"] .mf-g4-cell {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 4px 6px 3px !important;
  gap: 2px !important;
  position: relative !important;
  overflow: visible !important;
}
.hero-card[data-i="7"] .mf-g4-cell .hv,
.hero-card[data-i="8"] .mf-g4-cell .hv,
.hero-card[data-i="9"] .mf-g4-cell .hv {
  display: block !important;
  width: 100% !important;
  flex: 0 0 auto !important;
  min-height: 1em !important;
  overflow: visible !important;
  font-family: "IBM Plex Sans", "Noto Sans SC", system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  color: #3dd68c !important;
  white-space: nowrap !important;
  text-align: left !important;
  visibility: visible !important;
}
.hero-card[data-i="7"] .mf-g4-cell .hk,
.hero-card[data-i="8"] .mf-g4-cell .hk,
.hero-card[data-i="9"] .mf-g4-cell .hk {
  display: block !important;
  width: 100% !important;
  flex: 0 0 auto !important;
  font-family: "IBM Plex Sans", "Noto Sans SC", system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  color: #c5ced8 !important;
  white-space: nowrap !important;
  text-align: left !important;
  visibility: visible !important;
}
.hero-card[data-i="7"] .mf-g4-cell.is-empty .hv,
.hero-card[data-i="8"] .mf-g4-cell.is-empty .hv,
.hero-card[data-i="9"] .mf-g4-cell.is-empty .hv {
  color: #8391a2 !important;
  font-weight: 400 !important;
}

/* === B1 FINAL: left + bottom, max 6/row === */
.hero-band[data-zone="B"] .hero-band-inner,
.hero-band-inner[data-zone="B1"],
.hero-band-inner {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: flex-end !important;
  align-content: flex-end !important;
}
.b1-card-pack {
  --b1-card-w: 168px !important;
  --b1-card-h: 68px !important;
  --b1-gap-x: 12px !important;
  --b1-gap-y: 10px !important;
  --b1-cols-max: 6 !important;
  --b1-row-max: calc(6 * 168px + 5 * 12px) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-content: flex-end !important;
  align-items: flex-end !important;
  gap: 10px 12px !important;
  width: min(100%, calc(6 * 168px + 5 * 12px)) !important;
  max-width: calc(6 * 168px + 5 * 12px) !important;
  margin: 0 !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  margin-top: auto !important;
  margin-bottom: 0 !important;
  box-sizing: border-box !important;
  align-self: flex-end !important;
}



/* === CARD 07–09 4 blocks 2x2 === */
.hero-card[data-i="7"],
.hero-card[data-i="8"],
.hero-card[data-i="9"],
.hero-card#card07,
.hero-card#card08,
.hero-card#card09 {
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: auto !important;
  position: relative !important;
}
.hero-card[data-i="7"] .mf-g4,
.hero-card[data-i="8"] .mf-g4,
.hero-card[data-i="9"] .mf-g4 {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.hero-card[data-i="7"] .mf-g4-cell,
.hero-card[data-i="8"] .mf-g4-cell,
.hero-card[data-i="9"] .mf-g4-cell {
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  border: 1px dashed rgba(255,255,255,.45);
  background: rgba(0,0,0,.10);
}
.hero-card[data-i="7"] .mf-g4-cell:nth-child(2),
.hero-card[data-i="7"] .mf-g4-cell:nth-child(4),
.hero-card[data-i="8"] .mf-g4-cell:nth-child(2),
.hero-card[data-i="8"] .mf-g4-cell:nth-child(4),
.hero-card[data-i="9"] .mf-g4-cell:nth-child(2),
.hero-card[data-i="9"] .mf-g4-cell:nth-child(4) {
  border-left-width: 0;
}
.hero-card[data-i="7"] .mf-g4-cell:nth-child(3),
.hero-card[data-i="7"] .mf-g4-cell:nth-child(4),
.hero-card[data-i="8"] .mf-g4-cell:nth-child(3),
.hero-card[data-i="8"] .mf-g4-cell:nth-child(4),
.hero-card[data-i="9"] .mf-g4-cell:nth-child(3),
.hero-card[data-i="9"] .mf-g4-cell:nth-child(4) {
  border-top-width: 0;
}

/* === B hide inner layout grids === */
[data-zone="B"] .mf-half,
[data-zone="B"] .mf-half-l,
[data-zone="B"] .mf-half-r,
[data-zone="B"] .mf-half-full,
[data-zone="B"] .mf-cell-h18,
[data-zone="B"] .mf-g4-cell,
.hero-card.mf-workers-card .mf-half,
.hero-card.mf-workers-card .mf-cell-h18,
.hero-card[data-i="1"] .mf-half,
.hero-card[data-i="1"] .mf-cell-h18,
.hero-card[data-i="2"] .mf-half,
.hero-card[data-i="2"] .mf-cell-h18,
.hero-card[data-i="3"] .mf-half,
.hero-card[data-i="3"] .mf-cell-h18,
.hero-card[data-i="4"] .mf-half,
.hero-card[data-i="4"] .mf-cell-h18,
.hero-card[data-i="4"] .mf-half-full,
.hero-card[data-i="5"] .mf-half,
.hero-card[data-i="5"] .mf-cell-h18,
.hero-card[data-i="5"] .mf-half-full,
.hero-card[data-i="7"] .mf-g4-cell,
.hero-card[data-i="8"] .mf-g4-cell,
.hero-card[data-i="9"] .mf-g4-cell {
  border-color: transparent !important;
  background: transparent !important;
}
.hero-card[data-i="7"] .mf-slot-no,
.hero-card[data-i="8"] .mf-slot-no,
.hero-card[data-i="9"] .mf-slot-no {
  display: none !important;
}
[data-zone="B"] .zone-mark,
[data-zone="B1"] .zone-mark,
.hero-band[data-zone="B"] > .zone-mark,
.hero-band-inner > .zone-mark {
  display: none !important;
}
/* B/B1 外框格子隐藏 */
section.hero-band[data-zone="B"],
.hero-band[data-zone="B"],
.hero-band {
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  outline: none !important;
  box-shadow: none !important;
}
.hero-band[data-zone="B"] .hero-band-inner,
.hero-band-inner[data-zone="B1"],
.hero-band-inner {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* B cards: A-area background, no frame */
.hero-band[data-zone="B"] .hero-card,
.hero-band-inner .hero-card,
.b1-card-pack .hero-card,
[data-zone="B"] .hero-card {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  background: #3A444E !important;
  background-color: #3A444E !important;
  background-image: none !important;
}

/* unused B cards/cells: hide visually, keep layout */
.b1-card-pack .hero-card.is-unused,
.hero-band[data-zone="B"] .hero-card.is-unused,
[data-zone="B"] .hero-card.is-unused {
  visibility: hidden !important;
  pointer-events: none !important;
}
.hero-card[data-i="7"] .mf-g4-cell.is-empty,
.hero-card[data-i="8"] .mf-g4-cell.is-empty,
.hero-card[data-i="9"] .mf-g4-cell.is-empty {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* === B no A-blend gradient === */
section.hero-band[data-zone="B"],
.hero-band[data-zone="B"],
.hero-band {
  background: #2e3640 !important;
  background-image: none !important;
  background-color: #2e3640 !important;
}
.hero-band[data-zone="B"] .hero-band-inner,
.hero-band-inner[data-zone="B1"],
.hero-band-inner {
  background: transparent !important;
  background-image: none !important;
}

/* === hide A/B join white line === */
.navbar-custom.topbar,
header.navbar-custom.topbar {
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
section.hero-band[data-zone="B"],
.hero-band[data-zone="B"],
.hero-band {
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
.hero-band-inner,
.hero-band-inner[data-zone="B1"] {
  border: none !important;
  border-top: none !important;
}

/* === metric numbers scale 4/5 === */
.hero-card.mf-workers-card .mf-num,
.hero-card[data-i="1"] .mf-num,
.hero-card[data-i="2"] .mf-num,
.hero-card[data-i="4"] .mf-num,
.hero-card[data-i="5"] .mf-num,
.hero-card[data-i="5"] .mf-points,
.hero-card[data-i="4"] .mf-quota,
.hero-card[data-i="3"] .mf-half-r .mf-power,
.hero-card.mf-workers-card .mf-digits-l .d,
.hero-card[data-i="1"] .mf-digits-l .d,
.hero-card[data-i="2"] .mf-digits-l .d {
  font-size: min(28.8px, calc((68px - 18px) * 0.624)) !important;
}
.hero-card.mf-workers-card .mf-num-r,
.hero-card[data-i="1"] .mf-num-r,
.hero-card[data-i="2"] .mf-num-r,
.hero-card[data-i="5"] .mf-num-r,
.hero-card.mf-workers-card .mf-digits-r .d,
.hero-card[data-i="1"] .mf-digits-r .d,
.hero-card[data-i="2"] .mf-digits-r .d {
  font-size: min(17.6px, calc((68px - 18px) * 0.384)) !important;
}

/* power unit smaller */
.hero-card[data-i="3"] .mf-power .mf-pwr-n {
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
}
.hero-card[data-i="3"] .mf-power .mf-pwr-u {
  font-size: 0.55em !important;
  font-weight: 400 !important;
  margin-left: 2px !important;
  opacity: 0.85;
  vertical-align: 0.12em;
}


/* === C1 dock to top of C === */
.notice-band[data-zone="C"],
.notice-band {
  border: none !important;
  background: #2e3640 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
.notice-band[data-zone="C"] .notice-band-inner,
.notice-band-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  height: 100% !important;
  border: none !important;
  box-sizing: border-box !important;
  padding: 0 !important;
}
/* C1 贴顶 48px */
.notice-band[data-zone="C"] .notice-use,
.notice-use[data-zone="C1"] {
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  margin: 0 !important;
  flex: 0 0 48px !important;
  align-self: stretch !important;
  border: none !important;
  background: #3A444E !important;
  position: relative !important;
  box-sizing: border-box !important;
}
.notice-use[data-zone="C1"] > .zone-mark,
.notice-band[data-zone="C"] > .zone-mark {
  display: inline-flex !important;
  z-index: 60 !important;
}
.notice-band[data-zone="C"] .notice-bar {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  visibility: visible !important;
}

/* === C1 bg sync A === */
.notice-use[data-zone="C1"],
.notice-band[data-zone="C"] .notice-use,
.notice-use {
  background: #3A444E !important;
  background-color: #3A444E !important;
  background-image: none !important;
}



/* === C1 marquee === */
.notice-use[data-zone="C1"] .notice-bar.c1-marquee,
.notice-bar.c1-marquee {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  position: relative !important;
}
.notice-bar.c1-marquee .c1-marquee-track {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
  white-space: nowrap !important;
  will-change: transform;
  animation: c1-marquee-scroll 28s linear infinite !important;
}
.notice-bar.c1-marquee .c1-seg {
  display: inline-block !important;
  flex: 0 0 auto !important;
  font-family: "IBM Plex Sans", "Noto Sans SC", system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
}
.notice-bar.c1-marquee .c1-sep {
  display: inline-block !important;
  flex: 0 0 auto !important;
  margin: 0 18px !important;
  color: rgba(255,255,255,.38) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}
/* 截图同款分段色：绿 / 青 / 橙 / 粉 */
.notice-bar.c1-marquee .c1-c1 { color: #0acf97 !important; }
.notice-bar.c1-marquee .c1-c2 { color: #2ec4b6 !important; }
.notice-bar.c1-marquee .c1-c3 { color: #fd7e14 !important; }
.notice-bar.c1-marquee .c1-c4 { color: #ff679b !important; }
@keyframes c1-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* === C1 left 98px split === */
.notice-use[data-zone="C1"] {
  display: flex !important;
  align-items: stretch !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.notice-use[data-zone="C1"] > .zone-mark {
  z-index: 70 !important;
}
.notice-use[data-zone="C1"] .c1-split {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  position: relative !important;
}
.notice-use[data-zone="C1"] .c1-left {
  flex: 0 0 98px !important;
  width: 98px !important;
  min-width: 98px !important;
  max-width: 98px !important;
  height: 100% !important;
  box-sizing: border-box !important;
  background: #3A444E !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 3 !important;
  position: relative !important;
}
.notice-use[data-zone="C1"] .c1-ann {
  color: var(--win-label-color, #8391A2) !important;
  font-family: "IBM Plex Sans", "Noto Sans SC", system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0.04em !important;
  white-space: nowrap !important;
  text-align: center !important;
}
.notice-use[data-zone="C1"] .c1-vline {
  flex: 0 0 1px !important;
  width: 1px !important;
  align-self: stretch !important;
  background: rgba(255,255,255,.55) !important;
  z-index: 4 !important;
  position: relative !important;
}
.notice-use[data-zone="C1"] .c1-right,
.notice-use[data-zone="C1"] .notice-bar.c1-marquee {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 100% !important;
  padding-left: 12px !important;
  padding-right: 0 !important;
  overflow: hidden !important;
}

/* === C/C1 frames off (final) === */
section.notice-band,
section.notice-band[data-zone="C"],
.notice-band,
.notice-band *,
.notice-band-inner,
.notice-use,
.notice-use[data-zone="C1"],
.notice-use .c1-split,
.notice-use .c1-left,
.notice-use .c1-right,
.notice-use .c1-marquee,
.notice-bar,
.notice-bar * {
  border: none !important;
  border-width: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}
.notice-use .c1-vline {
  display: none !important;
}
.notice-band > .zone-mark,
.notice-use > .zone-mark {
  display: none !important;
}

/* === C/C1 zone-marks off (specificity override) === */
.notice-band[data-zone="C"] > .zone-mark,
.notice-use[data-zone="C1"] > .zone-mark,
.notice-band > .zone-mark,
.notice-use > .zone-mark,
.notice-use .zone-mark,
section.notice-band > .zone-mark {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* === B/C seam off: kill B bottom margin gap === */
section.hero-band[data-zone="B"],
.hero-band[data-zone="B"],
.hero-band {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}
section.notice-band[data-zone="C"],
.notice-band[data-zone="C"],
.notice-band {
  margin-top: 0 !important;
}

/* === C/C1 frames + marks ON === */
section.notice-band[data-zone="C"],
.notice-band[data-zone="C"],
.notice-band {
  border: 1px solid #fff !important;
  border-width: 1px !important;
  outline: none !important;
  box-shadow: none !important;
  position: relative !important;
  box-sizing: border-box !important;
}
.notice-band[data-zone="C"] .notice-band-inner,
.notice-band-inner {
  border: 1px solid rgba(255,255,255,.85) !important;
  border-width: 1px !important;
  box-sizing: border-box !important;
  position: relative !important;
}
.notice-use[data-zone="C1"],
.notice-band[data-zone="C"] .notice-use,
.notice-use {
  border: 1px solid rgba(255,255,255,.85) !important;
  border-width: 1px !important;
  box-sizing: border-box !important;
  position: relative !important;
}
/* keep content split lines off; only outer C / C1 frames */
.notice-use .c1-split,
.notice-use .c1-left,
.notice-use .c1-right,
.notice-use .c1-marquee,
.notice-bar,
.notice-bar * {
  border: none !important;
  border-width: 0 !important;
  box-shadow: none !important;
}
.notice-use .c1-vline {
  display: none !important;
}
.notice-band[data-zone="C"] > .zone-mark,
.notice-use[data-zone="C1"] > .zone-mark,
section.notice-band > .zone-mark,
.notice-band > .zone-mark,
.notice-use > .zone-mark {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  height: 18px !important;
  min-width: 22px !important;
  overflow: visible !important;
  pointer-events: none !important;
  z-index: 80 !important;
}
.notice-use[data-zone="C1"] > .zone-mark {
  height: 16px !important;
  min-width: 26px !important;
  top: 2px !important;
  left: 2px !important;
  transform: none !important;
}

/* === C height 108 (push D/E/F down) === */
section.notice-band[data-zone="C"],
.notice-band[data-zone="C"],
.notice-band {
  height: 108px !important;
  min-height: 108px !important;
  max-height: 108px !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}
.notice-band[data-zone="C"] .notice-band-inner,
.notice-band-inner {
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}
/* C1 stays 48 at top of C */
.notice-use[data-zone="C1"],
.notice-band[data-zone="C"] .notice-use,
.notice-use {
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  margin-top: 0 !important;
  flex: 0 0 48px !important;
}



/* === remove C1 cell/grid only; keep C frame === */
.notice-use[data-zone="C1"],
.notice-band[data-zone="C"] .notice-use,
.notice-use {
  border: none !important;
  border-width: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}
/* notice-band-inner was part of C1-ish nested grid — strip if it boxes C1 */
.notice-band[data-zone="C"] .notice-band-inner,
.notice-band-inner {
  border: none !important;
  border-width: 0 !important;
}
/* remove all temporary hlines */
.notice-band .c-hline,
.notice-band-inner > .c-hline,
.notice-use .c1-hline,
.c-hline,
.c1-hline {
  display: none !important;
  visibility: hidden !important;
  border: none !important;
  height: 0 !important;
  opacity: 0 !important;
}
/* keep C outer frame visible */
section.notice-band[data-zone="C"],
.notice-band[data-zone="C"],
.notice-band {
  border: 1px solid #fff !important;
  border-width: 1px !important;
}

/* === C1 center in C (108px) === */
.notice-band[data-zone="C"] .notice-band-inner,
.notice-band-inner {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: stretch !important;
  height: 100% !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  box-sizing: border-box !important;
}
.notice-use[data-zone="C1"],
.notice-band[data-zone="C"] .notice-use,
.notice-use {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  align-self: stretch !important;
  flex: 0 0 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
}

/* === C1 marquee restore (rollback enter anim) === */
.notice-use[data-zone="C1"] .notice-bar.c1-marquee,
.notice-bar.c1-marquee {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  position: relative !important;
  box-sizing: border-box !important;
  padding-left: 12px !important;
}
.notice-bar.c1-marquee .c1-marquee-track {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
  white-space: nowrap !important;
  animation: c1-marquee-scroll 28s linear infinite !important;
}
.notice-bar.c1-marquee .c1-seg {
  display: inline-block !important;
  font-family: "IBM Plex Sans", "Noto Sans SC", system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}
.notice-bar.c1-marquee .c1-sep {
  display: inline-block !important;
  margin: 0 18px !important;
  color: rgba(255,255,255,.38) !important;
}
.notice-bar.c1-marquee .c1-c1 { color: #0acf97 !important; }
.notice-bar.c1-marquee .c1-c2 { color: #2ec4b6 !important; }

/* === C1 cell/grid ON === */
.notice-use[data-zone="C1"],
.notice-band[data-zone="C"] .notice-use,
.notice-use {
  border: 1px solid rgba(255,255,255,.85) !important;
  border-width: 1px !important;
  outline: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  position: relative !important;
}
.notice-use[data-zone="C1"] > .zone-mark,
.notice-use > .zone-mark {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  height: 16px !important;
  min-width: 26px !important;
  overflow: visible !important;
  z-index: 80 !important;
  top: 2px !important;
  left: 2px !important;
  transform: none !important;
  pointer-events: none !important;
}

/* === C1 vertical line ON (between left label and marquee) === */
.notice-use[data-zone="C1"] .c1-vline,
.notice-use .c1-vline {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex: 0 0 1px !important;
  width: 1px !important;
  min-width: 1px !important;
  max-width: 1px !important;
  align-self: stretch !important;
  height: auto !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: rgba(255,255,255,.85) !important;
  background-color: rgba(255,255,255,.85) !important;
  box-shadow: none !important;
  z-index: 4 !important;
  position: relative !important;
  pointer-events: none !important;
}

/* === C1 continue: right vline + 98px right slot (RTL) === */
.notice-use[data-zone="C1"] .c1-vline,
.notice-use[data-zone="C1"] .c1-vline-r,
.notice-use .c1-vline {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex: 0 0 1px !important;
  width: 1px !important;
  min-width: 1px !important;
  max-width: 1px !important;
  align-self: stretch !important;
  height: auto !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: rgba(255,255,255,.85) !important;
  background-color: rgba(255,255,255,.85) !important;
  z-index: 4 !important;
  position: relative !important;
  pointer-events: none !important;
}
.notice-use[data-zone="C1"] .c1-right-slot,
.notice-use .c1-right-slot {
  flex: 0 0 98px !important;
  width: 98px !important;
  min-width: 98px !important;
  max-width: 98px !important;
  height: 100% !important;
  box-sizing: border-box !important;
  background: #3A444E !important;
  display: block !important;
  position: relative !important;
}
.notice-use[data-zone="C1"] .c1-right,
.notice-use[data-zone="C1"] .notice-bar.c1-marquee {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* === C1 vline-r at 75% (center + half right) === */
.notice-use[data-zone="C1"] .c1-split,
.notice-use .c1-split {
  position: relative !important;
}
.notice-use[data-zone="C1"] .c1-vline-r,
.notice-use .c1-vline-r {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  left: 75% !important;
  top: 0 !important;
  bottom: 0 !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  flex: none !important;
  width: 1px !important;
  min-width: 1px !important;
  max-width: 1px !important;
  height: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: rgba(255,255,255,.85) !important;
  background-color: rgba(255,255,255,.85) !important;
  z-index: 6 !important;
  pointer-events: none !important;
}
/* drop right 98px slot if leftover */
.notice-use[data-zone="C1"] .c1-right-slot,
.notice-use .c1-right-slot {
  display: none !important;
  width: 0 !important;
  flex: 0 0 0 !important;
  max-width: 0 !important;
  overflow: hidden !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* === C1 RTL linear: constant speed, enter at 75% line → exit left === */
.notice-use[data-zone="C1"] .notice-bar.c1-rtl-play,
.notice-bar.c1-rtl-play {
  display: block !important;
  flex: 0 0 auto !important;
  width: calc(75% - 99px) !important;
  max-width: calc(75% - 99px) !important;
  min-width: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  position: relative !important;
  padding: 0 !important;
  margin: 0 !important;
}
.notice-bar.c1-rtl-play .c1-rtl-track {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
  max-width: none !important;
  height: 100% !important;
  white-space: nowrap !important;
  box-sizing: content-box !important;
  /* start just outside right edge (= 75% line) */
  padding-left: 100% !important;
  will-change: transform;
  animation: c1-rtl-linear 55s linear infinite !important;
}
.notice-bar.c1-rtl-play .c1-seg {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  height: 100% !important;
  font-family: "IBM Plex Sans", "Noto Sans SC", system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
}
.notice-bar.c1-rtl-play .c1-sep {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  height: 100% !important;
  margin: 0 18px !important;
  color: rgba(255,255,255,.38) !important;
  font-size: 13px !important;
}
.notice-bar.c1-rtl-play .c1-c1 { color: #0acf97 !important; }
.notice-bar.c1-rtl-play .c1-c2 { color: #2c8ef8 !important; }
.notice-bar.c1-rtl-play .c1-c3 { color: #fd7e14 !important; }
.notice-bar.c1-rtl-play .c1-c4 { color: #ff679b !important; }
/* 100% here is the track's own width (incl. padding-left), so it clears left evenly */
@keyframes c1-rtl-linear {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

/* === C1 seg colors: each | followed by different text color === */
.notice-bar.c1-rtl-play .c1-seg.c1-c1,
.notice-bar.c1-rtl-play .c1-c1 { color: #0acf97 !important; } /* green */
.notice-bar.c1-rtl-play .c1-seg.c1-c2,
.notice-bar.c1-rtl-play .c1-c2 { color: #2c8ef8 !important; } /* blue */
.notice-bar.c1-rtl-play .c1-seg.c1-c3,
.notice-bar.c1-rtl-play .c1-c3 { color: #fd7e14 !important; } /* orange */
.notice-bar.c1-rtl-play .c1-seg.c1-c4,
.notice-bar.c1-rtl-play .c1-c4 { color: #ff679b !important; } /* pink */
.notice-bar.c1-rtl-play .c1-sep { color: rgba(255,255,255,.45) !important; }

/* === C inner frames OFF (keep C outer only) === */
.notice-band[data-zone="C"] .notice-band-inner,
.notice-band .notice-band-inner,
.notice-band[data-zone="C"] .notice-use,
.notice-use[data-zone="C1"],
.notice-band .notice-use,
.notice-band[data-zone="C"] .c1-split,
.notice-band[data-zone="C"] .c1-left,
.notice-band[data-zone="C"] .c1-right,
.notice-band[data-zone="C"] .c1-rtl-play,
.notice-band[data-zone="C"] .notice-bar {
  border: none !important;
  border-width: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}
.notice-band[data-zone="C"] .c1-vline,
.notice-band[data-zone="C"] .c1-vline-r,
.notice-use .c1-vline,
.notice-use .c1-vline-r {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  flex: 0 0 0 !important;
  background: transparent !important;
  opacity: 0 !important;
}
.notice-band[data-zone="C"] .notice-use > .zone-mark,
.notice-use[data-zone="C1"] > .zone-mark {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
/* keep C outer frame */
section.notice-band[data-zone="C"],
.notice-band[data-zone="C"],
.notice-band {
  border: 1px solid #fff !important;
  border-width: 1px !important;
}
.notice-band[data-zone="C"] > .zone-mark {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* === C outer frame OFF === */
section.notice-band[data-zone="C"],
.notice-band[data-zone="C"],
.notice-band {
  border: none !important;
  border-width: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}
.notice-band[data-zone="C"] > .zone-mark,
section.notice-band > .zone-mark,
.notice-band > .zone-mark {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* === C/D seam off === */
section.notice-band[data-zone="C"],
.notice-band[data-zone="C"],
.notice-band {
  margin-bottom: 0 !important;
}
section.main-band[data-zone="D"],
.main-band[data-zone="D"],
.main-band {
  margin-top: 0 !important;
}

/* === D1 cell1: 电脑 + icon === */
.d1-cell.d1-cell-pc,
.d1-row .d1-cell.d1-cell-pc {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 108px !important;
  height: 100% !important;
  text-align: center !important;
  color: var(--win-label-color, #8391A2) !important;
  font-family: "IBM Plex Sans", "Noto Sans SC", system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.06em !important;
}
.d1-cell.d1-cell-pc .d1-pc-ico {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--win-label-color, #8391A2) !important;
  flex: 0 0 auto !important;
  font-weight: 700 !important;
}
.d1-cell.d1-cell-pc .d1-pc-ico svg {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  stroke-width: 2.2 !important;
}
.d1-cell.d1-cell-pc .d1-pc-ico svg rect,
.d1-cell.d1-cell-pc .d1-pc-ico svg path {
  stroke-width: 2.2 !important;
}
.d1-cell.d1-cell-pc .d1-pc-label {
  display: inline-block !important;
  white-space: nowrap !important;
  color: var(--win-label-color, #8391A2) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: center !important;
}

/* === D1 cell2: 显卡 + icon (share bold/center with pc) === */
.d1-cell.d1-cell-gpu,
.d1-row .d1-cell.d1-cell-gpu,
.d1-cell.d1-cell-icon {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 108px !important;
  height: 100% !important;
  text-align: center !important;
  color: var(--win-label-color, #8391A2) !important;
  font-family: "IBM Plex Sans", "Noto Sans SC", system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.06em !important;
}
.d1-cell.d1-cell-gpu .d1-gpu-ico {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #0acf97 !important;
  flex: 0 0 auto !important;
}
.d1-cell.d1-cell-gpu .d1-gpu-ico svg {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
}
.d1-cell.d1-cell-gpu .d1-gpu-label {
  display: inline-block !important;
  white-space: nowrap !important;
  color: var(--win-label-color, #8391A2) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: center !important;
}

/* === D1 cell3: fan + icon === */
.d1-cell.d1-cell-fan,
.d1-row .d1-cell.d1-cell-fan {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 108px !important;
  height: 100% !important;
  text-align: center !important;
  color: var(--win-label-color, #8391A2) !important;
  font-family: "IBM Plex Sans", "Noto Sans SC", system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.06em !important;
}
.d1-cell.d1-cell-fan .d1-fan-ico {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffc35a !important;
  flex: 0 0 auto !important;
}
.d1-cell.d1-cell-fan .d1-fan-ico svg {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
}
.d1-cell.d1-cell-fan .d1-fan-label {
  display: inline-block !important;
  white-space: nowrap !important;
  color: var(--win-label-color, #8391A2) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: center !important;
}

/* === D1 cell4: wallet + icon === */
.d1-cell.d1-cell-wallet,
.d1-row .d1-cell.d1-cell-wallet {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 108px !important;
  height: 100% !important;
  text-align: center !important;
  color: var(--win-label-color, #8391A2) !important;
  font-family: "IBM Plex Sans", "Noto Sans SC", system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.06em !important;
}
.d1-cell.d1-cell-wallet .d1-wallet-ico {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ff679b !important;
  flex: 0 0 auto !important;
}
.d1-cell.d1-cell-wallet .d1-wallet-ico svg {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
}
.d1-cell.d1-cell-wallet .d1-wallet-label {
  display: inline-block !important;
  white-space: nowrap !important;
  color: var(--win-label-color, #8391A2) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: center !important;
}

/* === D1 cell5: flight + plane icon === */
.d1-cell.d1-cell-flight,
.d1-row .d1-cell.d1-cell-flight {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 108px !important;
  height: 100% !important;
  text-align: center !important;
  color: var(--win-label-color, #8391A2) !important;
  font-family: "IBM Plex Sans", "Noto Sans SC", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.04em !important;
}
.d1-cell.d1-cell-flight .d1-flight-ico {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--win-label-color, #8391A2) !important;
  flex: 0 0 auto !important;
}
.d1-cell.d1-cell-flight .d1-flight-ico svg {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
}
.d1-cell.d1-cell-flight .d1-flight-label {
  display: inline-block !important;
  white-space: nowrap !important;
  color: var(--win-label-color, #8391A2) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: center !important;
}

/* === D1 flight plane takeoff tilt === */
.d1-cell.d1-cell-flight .d1-flight-ico {
  transform: rotate(-42deg) !important;
  transform-origin: center center !important;
}
.d1-cell.d1-cell-flight .d1-flight-ico svg {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
}

/* === D1 cell6: overclock + GPU OC icon === */
.d1-cell.d1-cell-oc,
.d1-row .d1-cell.d1-cell-oc {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: 108px !important;
  height: 100% !important;
  text-align: center !important;
  color: var(--win-label-color, #8391A2) !important;
  font-family: "IBM Plex Sans", "Noto Sans SC", system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.06em !important;
}
.d1-cell.d1-cell-oc .d1-oc-ico {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fd7e14 !important;
  flex: 0 0 auto !important;
}
.d1-cell.d1-cell-oc .d1-oc-ico svg {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
}
.d1-cell.d1-cell-oc .d1-oc-label {
  display: inline-block !important;
  white-space: nowrap !important;
  color: var(--win-label-color, #8391A2) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: center !important;
}

/* === D1 cell7: driver install icon === */
.d1-cell.d1-cell-drv,
.d1-row .d1-cell.d1-cell-drv {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: 108px !important;
  height: 100% !important;
  text-align: center !important;
  color: var(--win-label-color, #8391A2) !important;
  font-family: "IBM Plex Sans", "Noto Sans SC", system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.06em !important;
}
.d1-cell.d1-cell-drv .d1-drv-ico {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #727cf5 !important;
  flex: 0 0 auto !important;
}
.d1-cell.d1-cell-drv .d1-drv-ico svg {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
}
.d1-cell.d1-cell-drv .d1-drv-label {
  display: inline-block !important;
  white-space: nowrap !important;
  color: var(--win-label-color, #8391A2) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: center !important;
}

/* === D1 cell8: settings gear === */
.d1-cell.d1-cell-set,
.d1-row .d1-cell.d1-cell-set {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: 108px !important;
  height: 100% !important;
  text-align: center !important;
  color: var(--win-label-color, #8391A2) !important;
  font-family: "IBM Plex Sans", "Noto Sans SC", system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.06em !important;
}
.d1-cell.d1-cell-set .d1-set-ico {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #8391a2 !important;
  flex: 0 0 auto !important;
}
.d1-cell.d1-cell-set .d1-set-ico svg {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
}
.d1-cell.d1-cell-set .d1-set-label {
  display: inline-block !important;
  white-space: nowrap !important;
  color: var(--win-label-color, #8391A2) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: center !important;
}

/* === D1 bg sync A (#3A444E) === */
.main-band-inner[data-zone="D1"],
.main-band-inner,
.d1-row,
.d1-cell,
.d1-row .d1-cell {
  background: #3A444E !important;
  background-color: #3A444E !important;
  background-image: none !important;
}

/* === D2 bg sync A (#3A444E) === */
.main-band-d2[data-zone="D2"],
.main-band-d2,
.d2-row,
.d2-cell,
.main-band-d2 .d2-cell {
  background: #3A444E !important;
  background-color: #3A444E !important;
  background-image: none !important;
}

/* === D3 cell1: 在线 (text only) === */
.d3-cell.d3-cell-online,
.d3-row .d3-cell.d3-cell-online {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  height: 100% !important;
  text-align: center !important;
  color: #0acf97 !important;
  font-family: "IBM Plex Sans", "Noto Sans SC", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.06em !important;
  background: #3A444E !important;
}
.d3-cell.d3-cell-online .d3-online-dot {
  display: none !important;
}

/* === D3 cell2: 离线 (text only) === */
.d3-cell.d3-cell-offline,
.d3-row .d3-cell.d3-cell-offline {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  text-align: center !important;
  color: #fa5c7c !important;
  font-family: "IBM Plex Sans", "Noto Sans SC", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.06em !important;
  background: #3A444E !important;
}

/* === D3 cell3: 无算力 (text only) === */
.d3-cell.d3-cell-nohash,
.d3-row .d3-cell.d3-cell-nohash {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  text-align: center !important;
  color: #fd7e14 !important;
  font-family: "IBM Plex Sans", "Noto Sans SC", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.04em !important;
  background: #3A444E !important;
}

/* === D3 cell4: 无飞行表 (text only) === */
.d3-cell.d3-cell-noflight,
.d3-row .d3-cell.d3-cell-noflight {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  text-align: center !important;
  color: #ffc35a !important;
  font-family: "IBM Plex Sans", "Noto Sans SC", system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
  background: #3A444E !important;
}

/* === D4 band (below D3) === */
.main-band-d4[data-zone="D4"],
.main-band-d4 {
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(255,255,255,.85) !important;
  border-top: none !important;
  position: relative !important;
  background: #3A444E !important;
  background-color: #3A444E !important;
  overflow: hidden !important;
}
.main-band-d4 > .zone-mark { z-index: 60 !important; }
.d4-row {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
}
.d4-cell {
  flex: 0 0 98px !important;
  width: 98px !important;
  height: 100% !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(255,255,255,.45) !important;
  border-left: none !important;
  background: #3A444E !important;
  background-color: #3A444E !important;
  color: #cfd5dd !important;
  font: 600 11px/1 "IBM Plex Sans", "Noto Sans SC", sans-serif !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  user-select: none !important;
}
.d4-cell:first-child {
  border-left: 1px solid rgba(255,255,255,.45) !important;
}


/* === D full-width row + cells grow (fix bunching) === */
section.main-band[data-zone="D"],
.main-band[data-zone="D"],
.main-band {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}
.main-band-inner[data-zone="D1"],
.main-band-d2[data-zone="D2"],
.main-band-d3[data-zone="D3"],
.main-band-d4[data-zone="D4"],
.main-band-inner,
.main-band-d2,
.main-band-d3,
.main-band-d4 {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
}
.d1-row,
.d3-row,
.d4-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
  gap: 0 !important;
}
/* keep min widths so fillRow can count columns; grow to fill leftover */
.d1-cell,
.d1-row .d1-cell {
  flex: 1 1 108px !important;
  width: auto !important;
  min-width: 108px !important;
  max-width: none !important;
  box-sizing: border-box !important;
}
.d3-cell,
.d3-row .d3-cell,
.d4-cell,
.d4-row .d4-cell {
  flex: 1 1 98px !important;
  width: auto !important;
  min-width: 98px !important;
  max-width: none !important;
  box-sizing: border-box !important;
}
.d1-cell.d1-cell-pc,
.d1-cell.d1-cell-gpu,
.d1-cell.d1-cell-fan,
.d1-cell.d1-cell-wallet,
.d1-cell.d1-cell-flight,
.d1-cell.d1-cell-oc,
.d1-cell.d1-cell-drv,
.d1-cell.d1-cell-set,
.d1-cell.d1-cell-icon {
  flex: 1 1 108px !important;
  width: auto !important;
  min-width: 108px !important;
  max-width: none !important;
}

/* === D HEIGHT FINAL FIX (root cause: legacy 38px group) === */
section.main-band[data-zone="D"],
.main-band[data-zone="D"],
.main-band {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  width: 100% !important;
}
.main-band-inner[data-zone="D1"],
section.main-band[data-zone="D"] > .main-band-inner,
.main-band > .main-band-inner {
  height: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
  width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
.main-band-d2[data-zone="D2"],
.main-band-d3[data-zone="D3"],
.main-band-d4[data-zone="D4"],
section.main-band[data-zone="D"] > .main-band-d2,
section.main-band[data-zone="D"] > .main-band-d3,
section.main-band[data-zone="D"] > .main-band-d4 {
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
.d1-row,
.d3-row,
.d4-row {
  height: 100% !important;
  min-height: 100% !important;
  width: 100% !important;
}
.d1-cell,
.d3-cell,
.d4-cell {
  height: 100% !important;
  min-height: 100% !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}



/* === D1 HEIGHT 38 (1789384606) === */
.main-band-inner[data-zone="D1"],
section.main-band[data-zone="D"] > .main-band-inner,
.main-band > .main-band-inner {
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
}
.main-band-inner[data-zone="D1"] .d1-row,
#d1Row.d1-row,
#d1Row {
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  align-items: stretch !important;
}
.main-band-inner[data-zone="D1"] .d1-cell,
#d1Row .d1-cell {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
}


/* === D1 HEIGHT 48 (1789384653) === */
.main-band-inner[data-zone="D1"],
section.main-band[data-zone="D"] > .main-band-inner,
.main-band > .main-band-inner {
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
}
.main-band-inner[data-zone="D1"] .d1-row,
#d1Row.d1-row,
#d1Row {
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  align-items: stretch !important;
}
.main-band-inner[data-zone="D1"] .d1-cell,
#d1Row .d1-cell {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
}


/* === D2 HEIGHT 38 (1789384716) === */
.main-band-d2[data-zone="D2"],
section.main-band[data-zone="D"] > .main-band-d2,
.main-band-d2 {
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
}


/* ===== D1 cells: left align ===== */
.d1-cell,
.d1-row .d1-cell,
.d1-cell.d1-cell-pc,
.d1-cell.d1-cell-gpu,
.d1-cell.d1-cell-fan,
.d1-cell.d1-cell-wallet,
.d1-cell.d1-cell-flight,
.d1-cell.d1-cell-oc,
.d1-cell.d1-cell-drv,
.d1-cell.d1-cell-set,
.d1-cell.d1-cell-icon,
.d1-row .d1-cell.d1-cell-pc,
.d1-row .d1-cell.d1-cell-gpu,
.d1-row .d1-cell.d1-cell-fan,
.d1-row .d1-cell.d1-cell-wallet,
.d1-row .d1-cell.d1-cell-flight,
.d1-row .d1-cell.d1-cell-oc,
.d1-row .d1-cell.d1-cell-drv,
.d1-row .d1-cell.d1-cell-set {
  justify-content: flex-start !important;
  text-align: left !important;
  padding-left: 10px !important;
  padding-right: 6px !important;
  box-sizing: border-box !important;
}
.d1-cell .d1-pc-label,
.d1-cell .d1-gpu-label,
.d1-cell .d1-fan-label,
.d1-cell .d1-wallet-label,
.d1-cell .d1-flight-label,
.d1-cell .d1-oc-label,
.d1-cell .d1-drv-label,
.d1-cell .d1-set-label {
  text-align: left !important;
}

/* ===== D1 LEFT ALIGN FORCE ===== */
#d1Row.d1-row,
.d1-row {
  justify-content: flex-start !important;
}
#d1Row .d1-cell,
.main-band-inner[data-zone="D1"] .d1-cell,
.d1-row .d1-cell,
.d1-cell {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  padding-left: 8px !important;
  padding-right: 4px !important;
  margin: 0 !important;
}
#d1Row .d1-cell.d1-cell-pc,
#d1Row .d1-cell.d1-cell-gpu,
#d1Row .d1-cell.d1-cell-fan,
#d1Row .d1-cell.d1-cell-wallet,
#d1Row .d1-cell.d1-cell-flight,
#d1Row .d1-cell.d1-cell-oc,
#d1Row .d1-cell.d1-cell-drv,
#d1Row .d1-cell.d1-cell-set,
#d1Row .d1-cell.d1-cell-icon {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  padding-left: 8px !important;
  gap: 6px !important;
}
#d1Row .d1-cell [class$="-label"],
#d1Row .d1-cell .d1-pc-label,
#d1Row .d1-cell .d1-gpu-label,
#d1Row .d1-cell .d1-fan-label,
#d1Row .d1-cell .d1-wallet-label,
#d1Row .d1-cell .d1-flight-label,
#d1Row .d1-cell .d1-oc-label,
#d1Row .d1-cell .d1-drv-label,
#d1Row .d1-cell .d1-set-label {
  text-align: left !important;
  margin: 0 !important;
  flex: 0 1 auto !important;
}
#d1Row .d1-cell [class$="-ico"] {
  flex: 0 0 auto !important;
  margin: 0 !important;
}



/* ===== REMOVE D4 band ===== */
.main-band-d4,
.main-band-d4[data-zone="D4"],
section.main-band[data-zone="D"] > .main-band-d4,
#d4Row {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}



/* ===== FIX: D3 containing block ===== */
.main-band-d3,
.main-band-d3[data-zone="D3"],
section.main-band[data-zone="D"] > .main-band-d3 {
  position: relative !important;
  width: 100% !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(255,255,255,.85) !important;
  border-top: none !important;
  background: #3A444E !important;
  overflow: hidden !important;
  display: block !important;
}
.main-band-d3 > .zone-mark {
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  z-index: 60 !important;
}

/* ===== D3 HEIGHT 30 ===== */
.main-band-d3,
.main-band-d3[data-zone="D3"],
section.main-band[data-zone="D"] > .main-band-d3 {
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
}
.main-band-d3 .d3-row,
.main-band-d3 .d3-cell {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* ===== D3 vertical lines 80px (absolute, not percent) ===== */
.main-band-d3,
.main-band-d3[data-zone="D3"] {
  position: relative !important;
  background-image: none !important;
}
#d3Row.d3-row,
.main-band-d3 .d3-row {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  display: block !important;
  background: transparent !important;
}
#d3Row .d3-vline,
.d3-row .d3-vline {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #fff !important;
  opacity: 0.7;
  pointer-events: none !important;
  z-index: 5 !important;
  display: block !important;
}

/* ===== D3 vlines on band (not collapsed row) ===== */
.main-band-d3,
.main-band-d3[data-zone="D3"] {
  position: relative !important;
  overflow: hidden !important;
}
.main-band-d3 > .d3-vline {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 1px !important;
  height: auto !important;
  min-height: 100% !important;
  background: #ffffff !important;
  opacity: 0.85 !important;
  pointer-events: none !important;
  z-index: 4 !important;
  display: block !important;
}
#d3Row.d3-row,
.main-band-d3 .d3-row {
  height: 100% !important;
  min-height: 30px !important;
}

/* ===== D3 cell1 static 所有 left ===== */
#d3Row.d3-row,
.main-band-d3 .d3-row {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  width: 100% !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
}
#d3Row .d3-cell,
.main-band-d3 .d3-cell {
  flex: 0 0 80px !important;
  width: 80px !important;
  min-width: 80px !important;
  max-width: 80px !important;
  height: 30px !important;
  box-sizing: border-box !important;
  border: none !important;
  border-right: 1px solid rgba(255,255,255,.55) !important;
  background: #3A444E !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0 8px !important;
}
#d3Row .d3-cell.d3-cell-all {
  justify-content: flex-start !important;
  text-align: left !important;
}
#d3Row .d3-all-label {
  display: block !important;
  width: 100% !important;
  color: #e8ecf1 !important;
  font: 600 13px/1 "IBM Plex Sans", "Noto Sans SC", sans-serif !important;
  text-align: left !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}
/* ===== D3 label cells left ===== */
#d3Row .d3-cell.d3-cell-label {
  justify-content: flex-start !important;
  text-align: left !important;
}

/* ===== D: hide frame/table LINES only (content stays) ===== */
section.main-band[data-zone="D"],
.main-band[data-zone="D"],
.main-band {
  display: block !important;
  border-color: transparent !important;
  border-width: 1px !important;
  border-style: solid !important;
}
.main-band-inner,
.main-band-d2,
.main-band-d3,
.main-band-d3[data-zone="D3"],
section.main-band[data-zone="D"] > .main-band-inner,
section.main-band[data-zone="D"] > .main-band-d2,
section.main-band[data-zone="D"] > .main-band-d3 {
  border-color: transparent !important;
}
#d1Row .d1-cell,
.d1-row .d1-cell,
.d1-cell {
  border-color: transparent !important;
}
#d3Row .d3-cell,
.d3-row .d3-cell,
.d3-cell {
  border-color: transparent !important;
}
.main-band .d3-vline {
  display: none !important;
}

/* ===== D2/D3 moved into E; D is D1-only ===== */
.e-band > .main-band-d2,
.e-band > .main-band-d3 {
  width: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;
  display: block !important;
}
.e-band > .main-band-d2 {
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
}
.e-band > .main-band-d3 {
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
}
/* D now only wraps D1 */
section.main-band[data-zone="D"] > .main-band-inner {
  width: 100% !important;
}

/* ===== D and E: no gap ===== */
section.main-band[data-zone="D"],
.main-band[data-zone="D"],
.main-band {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}
section.e-band[data-zone="E"],
.e-band[data-zone="E"],
.e-band {
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}
/* kill any gap from adjacent borders/padding */
section.main-band[data-zone="D"] + section.e-band[data-zone="E"],
.main-band + .e-band {
  margin-top: 0 !important;
}

/* ===== D3 restored visible inside E ===== */
.e-band > .main-band-d3,
.e-band .main-band-d3,
.main-band-d3[data-zone="D3"] {
  display: block !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  overflow: hidden !important;
}
#d3Row.d3-row,
.e-band #d3Row,
.e-band .d3-row {
  display: flex !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  overflow: hidden !important;
}
#d3Row .d3-cell,
.e-band .d3-cell,
.d3-row .d3-cell {
  display: flex !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 8px !important;
}

/* ===== D1 bottom faint solid line (not table cell border) ===== */
section.main-band[data-zone="D"],
.main-band[data-zone="D"],
.main-band {
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
section.e-band[data-zone="E"],
.e-band[data-zone="E"],
.e-band {
  border-top: none !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}
.main-band-inner[data-zone="D1"],
section.main-band[data-zone="D"] > .main-band-inner,
.main-band > .main-band-inner {
  position: relative !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.main-band-inner[data-zone="D1"]::after,
section.main-band[data-zone="D"] > .main-band-inner::after,
.main-band > .main-band-inner::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 1px !important;
  background: rgba(255,255,255,.28) !important;
  pointer-events: none !important;
  z-index: 40 !important;
  display: block !important;
}
#d1Row .d1-cell,
.d1-row .d1-cell {
  border-bottom: none !important;
  box-shadow: none !important;
}
.e-band > .main-band-d2 {
  border-top: none !important;
  margin-top: 0 !important;
}

/* ===== E: hide outer frame lines only ===== */
section.e-band[data-zone="E"],
.e-band[data-zone="E"],
.e-band {
  border-color: transparent !important;
}

/* ===== D1: hide leftover number cells ===== */
#d1Row .d1-cell.d1-cell-num-hidden,
.d1-row .d1-cell.d1-cell-num-hidden {
  visibility: hidden !important;
  color: transparent !important;
  pointer-events: none !important;
  border-color: transparent !important;
}

/* ===== D/E match B background (#2e3640) ===== */
section.main-band[data-zone="D"],
.main-band[data-zone="D"],
.main-band,
section.e-band[data-zone="E"],
.e-band[data-zone="E"],
.e-band {
  background: #2e3640 !important;
  background-color: #2e3640 !important;
}
section.main-band[data-zone="D"] > .zone-mark,
section.e-band[data-zone="E"] > .zone-mark,
.main-band .zone-mark,
.main-band .zone-mark-sm,
.e-band .zone-mark,
.e-band .zone-mark-sm {
  background: #2e3640 !important;
  background-color: #2e3640 !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
}

/* ===== E1 height 58 ===== */
.e-band-inner,
.e-band [data-zone="E1"],
.e-band-inner[data-zone="E1"] {
  height: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;
}

/* ===== EFG remap: E=D2+D3; F=old E1/E2; G=old F ===== */
.f-band-mid {
  --e-inset-x: 4%;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  margin: 0 0 12px;
  padding: 0 var(--e-inset-x);
  box-sizing: border-box;
  background: #2e3640 !important;
  background-color: #2e3640 !important;
  border: 1px solid transparent !important;
  border-color: transparent !important;
  position: relative;
  overflow: visible !important;
  display: block !important;
}
.f-band-mid > .zone-mark,
.f-band-mid .zone-mark,
.f-band-mid .zone-mark-sm {
  background: #2e3640 !important;
  background-color: #2e3640 !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
}
.e-band .main-band-d2 > .zone-mark,
.e-band .main-band-d3 > .zone-mark,
.f-band-mid .e-band-inner > .zone-mark,
.f-band-mid .e-band-e2 > .zone-mark {
  display: none !important;
}
.f-band[data-zone="G"] > .zone-mark,
.f-band[data-zone="G"] .zone-mark,
.f-band[data-zone="G"] .zone-mark-sm {
  background: #2e3640 !important;
  background-color: #2e3640 !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
}
.f-tools[data-zone="GT"] > .zone-mark {
  background: #2e3640 !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
}

/* ===== E/F no gap ===== */
section.e-band[data-zone="E"],
.e-band[data-zone="E"],
.e-band {
  margin-bottom: 0 !important;
}
section.f-band-mid[data-zone="F"],
.f-band-mid[data-zone="F"],
.f-band-mid {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.e-band + .f-band-mid {
  margin-top: 0 !important;
}

/* ===== F1 draggable columns ===== */
.e-band-inner[data-zone="F1"] {
  position: relative;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}
.ff1-row {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: stretch;
  box-sizing: border-box;
  position: relative;
}
.ff1-cell {
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  height: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,.45);
  border-left: none;
  background: rgba(50,58,70,.75);
  color: #cfd5dd;
  font: 600 11px/1 "IBM Plex Sans","Noto Sans SC",sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  user-select: none;
}
.ff1-cell:first-child {
  border-left: 1px solid rgba(255,255,255,.45);
}
.ff1-handles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
}
.ff1-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10px;
  margin-left: -5px;
  cursor: col-resize;
  pointer-events: auto;
  background: transparent;
}
.ff1-handle::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(255,255,255,.55);
}
.ff1-handle:hover::before,
.ff1-handle.is-dragging::before {
  background: #fff;
  width: 3px;
  left: 3.5px;
}
.ff1-row.is-dragging,
.ff1-row.is-dragging * {
  cursor: col-resize !important;
  user-select: none !important;
}

/* ===== F1 bg #2c2c2c ===== */
.e-band-inner[data-zone="F1"],
.e-band-inner[data-zone="F1"] .ff1-row,
.e-band-inner[data-zone="F1"] .ff1-cell {
  background: #2c2c2c !important;
  background-color: #2c2c2c !important;
}
/* ===== F1 checkbox 18x18 ===== */
.ff1-cell.ff1-cell-check {
  justify-content: flex-start;
  padding-left: 13px;
}
.ff1-check {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  max-width: 18px;
  max-height: 18px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 2px;
  background: #ffffff;
  box-shadow: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex: 0 0 auto;
}
.ff1-check:hover {
  filter: brightness(0.96);
}
.ff1-check-mark {
  display: none;
  width: 9px;
  height: 5px;
  border-left: 1.5px solid #111;
  border-bottom: 1.5px solid #111;
  transform: rotate(-45deg) translate(0px, -1px);
  box-sizing: border-box;
}
.ff1-check.is-checked .ff1-check-mark {
  display: block;
}

/* ===== F1 cell2 label ===== */
.ff1-cell.ff1-cell-label {
  justify-content: flex-start;
  padding-left: 8px;
  color: #ffffff;
  font: 600 12px/1 "IBM Plex Sans","Noto Sans SC",sans-serif;
  letter-spacing: 0.02em;
}

/* ===== F1 align: center except cell1 ===== */
.ff1-cell {
  justify-content: center !important;
  text-align: center !important;
  padding-left: 0 !important;
}
.ff1-cell.ff1-cell-check {
  justify-content: flex-start !important;
  text-align: left !important;
  padding-left: 13px !important;
}
.ff1-cell.ff1-cell-label {
  justify-content: center !important;
  text-align: center !important;
  padding-left: 0 !important;
}

/* ===== F1 cell7 adaptive stack ===== */
.ff1-cell.ff1-cell-stack {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  align-content: center !important;
  gap: 2px 4px;
  line-height: 1.05;
}
.ff1-cell.ff1-cell-stack.is-narrow {
  flex-direction: column !important;
  gap: 2px;
}
.ff1-cell.ff1-cell-stack .ff1-stack-top,
.ff1-cell.ff1-cell-stack .ff1-stack-bottom {
  display: block;
  flex: 0 0 auto;
  font: 600 11px/1 "IBM Plex Sans","Noto Sans SC",sans-serif;
  color: #ffffff;
  white-space: nowrap;
}

/* ===== F7 min width 3 chars (JS sets px) ===== */
.ff1-cell.ff1-cell-f7,
.ff1-cell[data-i="6"] {
  /* floor enforced in initFf1Resize via inline min-width px (~3汉字) */
  min-width: 0;
}

/* ===== F1 drag fix ===== */
html.ff1-dragging, html.ff1-dragging * {
  cursor: col-resize !important;
  user-select: none !important;
}
.e-band-inner[data-zone="F1"] {
  overflow: visible !important;
  position: relative !important;
  z-index: 5;
}
.ff1-handles {
  z-index: 40 !important;
  pointer-events: none !important;
}
.ff1-handle {
  width: 14px !important;
  margin-left: -7px !important;
  z-index: 41 !important;
  pointer-events: auto !important;
  touch-action: none !important;
}
.ff1-row.is-dragging .ff1-cell {
  pointer-events: none !important;
}

/* ===== F frame box fix ===== */
.f-band-mid[data-zone="F"],
.f-band-mid {
  background: transparent !important;
  border: none !important;
  padding-left: var(--e-inset-x, 4%) !important;
  padding-right: var(--e-inset-x, 4%) !important;
}
.e-band-inner[data-zone="F1"] {
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.85) !important;
  box-sizing: border-box !important;
  background: #2c2c2c !important;
}
.e-band-e2[data-zone="F2"] {
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  border: 1px solid rgba(255,255,255,.85) !important;
  border-top: none !important;
  background: #3A444E !important;
  background-color: #3A444E !important;
  box-sizing: border-box !important;
}
.ff1-cell {
  border-color: rgba(255,255,255,.35) !important;
}
.ff1-handles {
  z-index: 50 !important;
}
.ff1-handle {
  width: 12px !important;
  margin-left: -6px !important;
}

/* ===== F1 text size = 16px ===== */
.e-band-inner[data-zone="F1"] .ff1-cell,
.ff1-cell,
.ff1-cell.ff1-cell-label,
.ff1-cell.ff1-cell-stack .ff1-stack-top,
.ff1-cell.ff1-cell-stack .ff1-stack-bottom {
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 48px !important;
}
.ff1-check {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
}

/* ===== F1 stack cols 7/8/9 same as CPU温度 ===== */
.ff1-cell.ff1-cell-stack,
.ff1-cell.ff1-cell-f7,
.ff1-cell[data-i="6"],
.ff1-cell[data-i="7"],
.ff1-cell[data-i="8"],
.ff1-cell[data-i="9"],
.ff1-cell[data-i="10"],
.ff1-cell[data-i="11"],
.ff1-cell[data-i="13"] {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 2px 4px;
  line-height: 1.05;
}
.ff1-cell.ff1-cell-stack.is-narrow {
  flex-direction: column !important;
  gap: 2px;
}
.ff1-cell.ff1-cell-stack .ff1-stack-top,
.ff1-cell.ff1-cell-stack .ff1-stack-bottom {
  display: block;
  flex: 0 0 auto;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 16px !important;
  color: #ffffff;
  white-space: nowrap;
}


/* ===== F2 BG = A (#3A444E / --ct-topbar-bg) ===== */
.e-band-e2[data-zone="F2"],
.f-band-mid .e-band-e2[data-zone="F2"],
section.f-band-mid[data-zone="F"] .e-band-e2[data-zone="F2"] {
  background: var(--ct-topbar-bg, #3A444E) !important;
  background-color: var(--ct-topbar-bg, #3A444E) !important;
  background-image: none !important;
}

/* ===== F1 HEIGHT 48 ===== */
.e-band-inner[data-zone="F1"],
.f-band-mid .e-band-inner[data-zone="F1"],
section.f-band-mid[data-zone="F"] .e-band-inner[data-zone="F1"] {
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
}
.e-band-inner[data-zone="F1"] .ff1-row,
.e-band-inner[data-zone="F1"] .ff1-cell {
  height: 100% !important;
  max-height: 100% !important;
}

/* ===== F2-FN follow F1 column vertical lines ===== */
.ff-follow-row,
.e-band-e2[data-zone="F2"] {
  display: block !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 0 !important;
}
.ffn-row {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: stretch;
  box-sizing: border-box;
  position: relative;
}
.ffn-cell {
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  height: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,.35);
  border-left: none;
  border-top: none;
  border-bottom: none;
  background: transparent;
  overflow: hidden;
}
.ffn-cell:first-child {
  border-left: none;
}
.ffn-cell + .ffn-cell {
  border-left: 1px solid rgba(255,255,255,.45);
}
/* match F1 outer frame: right edge already on band */
.e-band-e2[data-zone="F2"] .ffn-row,
.ff-follow-row .ffn-row {
  border: none;
}

/* ===== F2-FN data rows from /api/machines ===== */
.ff-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-sizing: border-box;
}
.ff-body > .ff-follow-row,
.ff-body > .ff-data-row,
.ff-body > .e-band-e2 {
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  border-top: none !important;
}
.ff-body > .ff-follow-row + .ff-follow-row {
  border-top: 1px solid rgba(255,255,255,.25) !important;
}
.ffn-cell {
  color: #e8eaed;
  font: 500 15px/1.1 "IBM Plex Sans","Noto Sans SC",sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ffn-cell[data-i="1"] {
  justify-content: flex-start;
  padding-left: 8px;
}
.ffn-cell-check {
  justify-content: flex-start !important;
  padding-left: 13px !important;
}

.ffn-check-star {
  display: inline-flex;
  align-items: center;
  gap: 2ch; /* ~2 characters between checkbox and star */
  height: 100%;
}
.ffn-star {
  border: 0;
  background: transparent;
  color: #ffffff !important;
  font-size: 15px;
  line-height: 1;
  width: 18px;
  height: 18px;
  min-width: 18px;
  padding: 0;
  margin: 0;
  cursor: pointer;
  pointer-events: auto;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ffn-star:hover { color: #ffe08a !important; }
.ffn-star.on,
.ffn-star[aria-pressed="true"] { color: #ffd43b !important; }
.ffn-cell.is-star-name,
.ff-follow-row.is-starred .ffn-cell[data-i="1"] { color: #ffd43b !important; }


.ff-follow-row.is-offline .ffn-cell:not([data-i="5"]) {
  opacity: 0.55;
}
.ff-follow-row.is-offline .ffn-cell[data-i="5"] {
  opacity: 1 !important;
}

[data-panel="ef"].is-mf-view-active { outline: none; }
[data-mf-view].is-mf-view-hidden { display: none !important; }



/* Allow multi-color icons: beat currentColor locks */
#d1Row .d1-cell .d1-ico-color svg,
#d1Row .d1-cell .d1-ico-color svg * {
  color: transparent !important;
}

/* MF_D1_MENU_3STATE */
/* 1) 未选中：图标+文字灰黑 */
/* 2) 选中：彩色图标 + 机器数量亮度文字 */
/* 3) 悬停：文字灰紫 */

#d1Row .d1-cell.is-filled {
  pointer-events: auto !important;
  cursor: pointer;
}

/* --- idle (not selected) --- */
#d1Row .d1-cell.is-filled:not(.is-active) [class$="-label"] {
  color: #AAB8C4 !important;
}
#d1Row .d1-cell.is-filled:not(.is-active) .d1-ico-color {
  filter: none !important;
  color: #AAB8C4 !important;
}
#d1Row .d1-cell.is-filled:not(.is-active) .d1-ico-color svg,
#d1Row .d1-cell.is-filled:not(.is-active) .d1-ico-color svg * {
  color: #AAB8C4 !important;
  fill: #AAB8C4 !important;
  stroke: #AAB8C4 !important;
}
/* paths that were fill:none still need stroke */
#d1Row .d1-cell.is-filled:not(.is-active) .d1-ico-color svg [fill="none"] {
  fill: none !important;
  stroke: #AAB8C4 !important;
}

/* --- hover: text gray-purple (selected or not) --- */
#d1Row .d1-cell.is-filled:hover [class$="-label"] {
  color: #c9b6ef !important;
}
/* hover does not force icon purple — idle stays gray-black, active keeps color */
#d1Row .d1-cell.is-filled:not(.is-active):hover .d1-ico-color {
  filter: none !important;
}
#d1Row .d1-cell.is-filled.is-active:hover .d1-ico-color {
  filter: brightness(1.06);
}

/* --- selected: label = machine count brightness --- */
#d1Row .d1-cell.is-filled.is-active [class$="-label"] {
  color: #e8ecf1 !important;
}
#d1Row .d1-cell.is-filled.is-active:hover [class$="-label"] {
  color: #c9b6ef !important;
}

/* --- selected: colorful icons (beat idle gray) --- */
#d1Row .d1-cell.is-filled.is-active .d1-ico-color {
  color: transparent !important;
  filter: none;
}
#d1Row .d1-cell.is-filled.is-active .d1-ico-color svg,
#d1Row .d1-cell.is-filled.is-active .d1-ico-color svg * {
  color: transparent !important;
}

/* workers 机器 — blue */
#d1Row .d1-cell-pc.is-active .d1-ico-color svg .i-a { fill: #3B82F6 !important; stroke: none !important; }
#d1Row .d1-cell-pc.is-active .d1-ico-color svg .i-b { fill: #0F172A !important; stroke: none !important; }
#d1Row .d1-cell-pc.is-active .d1-ico-color svg .i-c { fill: #60A5FA !important; stroke: none !important; }
#d1Row .d1-cell-pc.is-active .d1-ico-color svg .i-d { fill: #93C5FD !important; stroke: none !important; }

/* gpus 显卡 — green */
#d1Row .d1-cell-gpu.is-active .d1-ico-color svg .i-a { fill: #10B981 !important; stroke: none !important; }
#d1Row .d1-cell-gpu.is-active .d1-ico-color svg .i-b,
#d1Row .d1-cell-gpu.is-active .d1-ico-color svg .i-c { fill: #064E3B !important; stroke: none !important; }
#d1Row .d1-cell-gpu.is-active .d1-ico-color svg .i-d { stroke: #6EE7B7 !important; fill: none !important; }
#d1Row .d1-cell-gpu.is-active .d1-ico-color svg .i-e { stroke: #A7F3D0 !important; fill: none !important; }

/* wallet 钱包 — amber */
#d1Row .d1-cell-wallet.is-active .d1-ico-color svg .i-a { fill: #F59E0B !important; stroke: none !important; }
#d1Row .d1-cell-wallet.is-active .d1-ico-color svg .i-b { stroke: #B45309 !important; fill: none !important; }
#d1Row .d1-cell-wallet.is-active .d1-ico-color svg .i-c { fill: #FDE68A !important; stroke: none !important; }
#d1Row .d1-cell-wallet.is-active .d1-ico-color svg .i-d { fill: #B45309 !important; stroke: none !important; }

/* stats 风扇 — cyan */
#d1Row .d1-cell-fan.is-active .d1-ico-color svg .i-a { fill: #06B6D4 !important; stroke: none !important; }
#d1Row .d1-cell-fan.is-active .d1-ico-color svg .i-b { fill: #083344 !important; stroke: none !important; }
#d1Row .d1-cell-fan.is-active .d1-ico-color svg .i-c { stroke: #ECFEFF !important; fill: none !important; }
#d1Row .d1-cell-fan.is-active .d1-ico-color svg .i-d { stroke: #A5F3FC !important; fill: none !important; }
#d1Row .d1-cell-fan.is-active .d1-ico-color svg .i-e { stroke: #CFFAFE !important; fill: none !important; }

/* flight 飞行表 — orange */
#d1Row .d1-cell-flight.is-active .d1-ico-color svg .i-a { fill: #F97316 !important; stroke: none !important; }
#d1Row .d1-cell-flight.is-active .d1-ico-color svg .i-b { stroke: #FFEDD5 !important; fill: none !important; }

/* oc 超频 — purple */
#d1Row .d1-cell-oc.is-active .d1-ico-color svg .i-a { fill: #8B5CF6 !important; stroke: none !important; }
#d1Row .d1-cell-oc.is-active .d1-ico-color svg .i-b { stroke: #C4B5FD !important; fill: none !important; }
#d1Row .d1-cell-oc.is-active .d1-ico-color svg .i-c { stroke: #EDE9FE !important; fill: none !important; }

/* drivers 驱动 — indigo */
#d1Row .d1-cell-drv.is-active .d1-ico-color svg .i-a { fill: #6366F1 !important; stroke: none !important; }
#d1Row .d1-cell-drv.is-active .d1-ico-color svg .i-b { stroke: #A5B4FC !important; fill: none !important; }
#d1Row .d1-cell-drv.is-active .d1-ico-color svg .i-c { stroke: #EEF2FF !important; fill: none !important; }

/* settings 设定 — slate + sky */
#d1Row .d1-cell-set.is-active .d1-ico-color svg .i-a { fill: #94A3B8 !important; stroke: none !important; }
#d1Row .d1-cell-set.is-active .d1-ico-color svg .i-b { stroke: #38BDF8 !important; fill: none !important; }
#d1Row .d1-cell-set.is-active .d1-ico-color svg .i-c { fill: #0F172A !important; stroke: none !important; }


/* MF_D1_MENU_SCALE */
#d1Row .d1-cell.is-filled [class$="-label"],
#d1Row .d1-cell .d1-pc-label,
#d1Row .d1-cell .d1-gpu-label,
#d1Row .d1-cell .d1-fan-label,
#d1Row .d1-cell .d1-wallet-label,
#d1Row .d1-cell .d1-flight-label,
#d1Row .d1-cell .d1-oc-label,
#d1Row .d1-cell .d1-drv-label,
#d1Row .d1-cell .d1-set-label {
  font-size: 14px !important;
  line-height: 1.1 !important;
}
#d1Row .d1-cell.is-filled .d1-ico-color,
#d1Row .d1-cell.is-filled [class$="-ico"],
#d1Row .d1-cell.is-filled .d1-ico-color svg,
#d1Row .d1-cell.is-filled [class$="-ico"] svg {
  width: 22px !important;
  height: 22px !important;
}
#d1Row .d1-cell.is-filled .d1-ico-color,
#d1Row .d1-cell.is-filled [class$="-ico"] {
  flex: 0 0 22px !important;
}

/* MF_D_ZONE_STABLE */
section.main-band[data-zone="D"] > .zone-mark,
.main-band[data-zone="D"] > .zone-mark {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
#d1Row .d1-cell:not(.is-filled),
#d1Row .d1-cell.d1-cell-num-hidden {
  visibility: hidden !important;
  color: transparent !important;
  font-size: 0 !important;
  pointer-events: none !important;
  border-color: transparent !important;
}
#d1Row .d1-cell.is-filled {
  visibility: visible !important;
}


/* ===== MF_D3_FILTER_BUTTONS (preview) ===== */
.e-band > .main-band-d3,
.main-band-d3[data-zone="D3"] {
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  display: flex !important;
  align-items: center !important;
  background: #343C46 !important;
  padding: 0 10px !important;
  box-sizing: border-box !important;
}

#d3Row.d3-row.d3-filter-bar,
.main-band-d3 .d3-row.d3-filter-bar {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

#d3Row .d3-filter-btn,
.main-band-d3 .d3-filter-btn {
  all: unset;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 28px !important;
  padding: 0 14px !important;
  margin: 0 !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06) !important;
  color: #AAB8C4 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .12s ease !important;
  user-select: none !important;
}

#d3Row .d3-filter-btn.d3-filter-gap,
.main-band-d3 .d3-filter-btn.d3-filter-gap {
  margin-left: 14px !important;
}

#d3Row .d3-filter-btn .d3-all-label,
.main-band-d3 .d3-filter-btn .d3-all-label {
  display: inline-block !important;
  width: auto !important;
  color: inherit !important;
  font: 600 13px/1 "IBM Plex Sans", "Noto Sans SC", sans-serif !important;
  letter-spacing: 0.02em !important;
  text-align: center !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}

#d3Row .d3-filter-btn:hover,
.main-band-d3 .d3-filter-btn:hover {
  color: #F3F6F9 !important;
  border-color: rgba(255, 255, 255, 0.20) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.06)) !important;
}

#d3Row .d3-filter-btn:active,
.main-band-d3 .d3-filter-btn:active {
  transform: translateY(1px) !important;
}

#d3Row .d3-filter-btn.is-filter.is-active,
.main-band-d3 .d3-filter-btn.is-filter.is-active {
  color: #FFFFFF !important;
  border-color: rgba(44, 142, 248, 0.85) !important;
  background: linear-gradient(180deg, #3A97F8, #2C8EF8) !important;
  box-shadow: 0 0 0 1px rgba(44,142,248,0.25), inset 0 1px 0 rgba(255,255,255,0.22) !important;
}

#d3Row .d3-filter-btn.is-tool,
.main-band-d3 .d3-filter-btn.is-tool {
  color: #AAB8C4 !important;
  border-color: rgba(170, 184, 196, 0.28) !important;
  background: rgba(0, 0, 0, 0.18) !important;
  box-shadow: none !important;
}

#d3Row .d3-filter-btn.is-tool:hover,
.main-band-d3 .d3-filter-btn.is-tool:hover {
  color: #E8ECF1 !important;
  border-color: rgba(148, 163, 184, 0.55) !important;
  background: rgba(148, 163, 184, 0.14) !important;
}

#d3Row .d3-filter-btn.is-tool.is-on,
.main-band-d3 .d3-filter-btn.is-tool.is-on {
  color: #E8ECF1 !important;
  border-color: rgba(10, 207, 151, 0.55) !important;
  background: rgba(10, 207, 151, 0.14) !important;
}


/* ===== MF_SHOW_FILTER_PANEL ===== */
.mf-show-filter-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 10px 12px 12px;
  background: #2F3640;
  border: 1px solid rgba(255,255,255,0.10);
  border-top: none;
  box-sizing: border-box;
}
.mf-show-filter-panel[hidden] { display: none !important; }
.mf-sfp-title {
  color: #AAB8C4;
  font: 600 12px/1.2 "IBM Plex Sans","Noto Sans SC",sans-serif;
  letter-spacing: 0.04em;
}
.mf-sfp-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
}
.mf-sfp-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 0 10px 0 8px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: #E8ECF1;
  cursor: pointer;
  user-select: none;
  font: 600 13px/1 "IBM Plex Sans","Noto Sans SC",sans-serif;
}
.mf-sfp-item input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: #2C8EF8;
  cursor: pointer;
}
.mf-sfp-text { color: #E8ECF1; }
.mf-sfp-count {
  color: #AAB8C4;
  font-weight: 700;
  min-width: 1.2em;
  text-align: right;
}
.mf-sfp-actions { display: flex; gap: 8px; align-items: center; }
.mf-sfp-btn {
  height: 28px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.22);
  color: #AAB8C4;
  font: 600 13px/1 "IBM Plex Sans","Noto Sans SC",sans-serif;
  cursor: pointer;
}
.mf-sfp-btn:hover { color: #fff; border-color: rgba(255,255,255,0.28); }
.mf-sfp-btn.is-primary {
  color: #fff;
  border-color: rgba(44,142,248,0.9);
  background: linear-gradient(180deg, #3A97F8, #2C8EF8);
}

.mf-sfp-group { width: 100%; margin-bottom: 6px; }
.mf-sfp-group-title {
  color: #8FA0B0;
  font: 600 12px/1.2 "IBM Plex Sans","Noto Sans SC",sans-serif;
  margin: 4px 0 6px;
}
.mf-sfp-group-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.mf-sfp-item .mf-sfp-text {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mf-sfp-empty { color: #AAB8C4; font: 500 13px/1.4 "Noto Sans SC",sans-serif; }
.mf-show-filter-panel { max-height: 42vh; overflow: auto; }


.ffn-cell-status {
  justify-content: center !important;
}
.ffn-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.ffn-status-ico {
  display: block;
  width: 16px;
  height: 16px;
}

.ffn-status-offline-img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  display: block;
}


/* Metric cols text #AAB8C4 (white ~70%) */
.ff1-cell[data-i="3"], .ff1-cell[data-i="4"], .ff1-cell[data-i="5"], .ff1-cell[data-i="6"], .ff1-cell[data-i="7"], .ff1-cell[data-i="8"], .ff1-cell[data-i="9"], .ff1-cell[data-i="10"], .ff1-cell[data-i="11"], .ff1-cell[data-i="12"], .ff1-cell[data-i="13"], .ff1-cell[data-i="14"], .ff1-cell[data-i="15"],
.ffn-cell[data-i="3"], .ffn-cell[data-i="4"], .ffn-cell[data-i="5"], .ffn-cell[data-i="6"], .ffn-cell[data-i="7"], .ffn-cell[data-i="8"], .ffn-cell[data-i="9"], .ffn-cell[data-i="10"], .ffn-cell[data-i="11"], .ffn-cell[data-i="12"], .ffn-cell[data-i="13"], .ffn-cell[data-i="14"], .ffn-cell[data-i="15"],
.ff1-cell[data-i="13"] .ff1-stack-top,
.ff1-cell[data-i="13"] .ff1-stack-bottom {
  color: #AAB8C4 !important;
}
/* end metric text */

.ffn-cell-name {
  justify-content: flex-start !important;
  align-items: center !important;
}

.ffn-name-main {
  flex: 0 0 6ch;
  width: 6ch;
  min-width: 6ch;
  max-width: 6ch;
  font: 500 15px/1.15 "IBM Plex Sans","Noto Sans SC",sans-serif;
  color: #e8eaed;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ffn-cell.is-star-name .ffn-name-main,
.ff-follow-row.is-starred .ffn-name-main {
  color: #ffd43b !important;
}


.ffn-cell-name {
  justify-content: flex-start !important;
  align-items: center !important;
}
.ffn-name-line {
  display: inline-flex;
  align-items: baseline;
  gap: 2ch;
  max-width: 100%;
  min-width: 0;
}
.ffn-name-main {
  font: 500 15px/1.15 "IBM Plex Sans","Noto Sans SC",sans-serif;
  color: #e8eaed;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.ffn-cell.is-star-name .ffn-name-main,
.ff-follow-row.is-starred .ffn-name-main {
  color: #ffd43b !important;
}
.ffn-log-count {
  flex: 0 0 auto;
  font: 500 12px/1 "IBM Plex Sans","Noto Sans SC",sans-serif;
  color: #AAB8C4;
  white-space: nowrap;
}

/* 算力列：钱包名 算力 （飞行表） */
.ffn-cell[data-i="3"],
.ff1-cell[data-i="3"] {
  justify-content: flex-start !important;
  padding-left: 8px;
}
.ffn-cell[data-i="3"] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.ffn-cell-hash {
  justify-content: flex-start !important;
  padding-left: 8px;
  gap: 0;
  overflow: hidden;
}
.ffn-hash-main {
  color: #3498DB; /* 纯蓝亮度 70% */
  font: 500 15px/1.15 "IBM Plex Sans","Noto Sans SC",sans-serif;
  white-space: nowrap;
}
.ffn-hash-flight {
  color: #AAB8C4;
  font: 500 10.5px/1.15 "IBM Plex Sans","Noto Sans SC",sans-serif; /* 13px 缩小 1/3 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: baseline;
}






/* Row parity from machine list (Y-101=单, header excluded) */
.ff-body > .ff-follow-row.is-row-odd {
  background: #2e3640 !important; /* B款 */ /* F2 格子色 */
}
.ff-body > .ff-follow-row.is-row-odd .ffn-cell {
  background: transparent !important;
}
/* end row-parity */


/* GPU bars: 20003 color, larger squares (~table font 12px) */
.ff-follow-row.is-offline .ffn-cell[data-i="5"] {
  opacity: 1 !important;
}
.ffn-cell[data-i="5"] {
  opacity: 1 !important;
  filter: none !important;
}
.ffn-cell[data-i="5"] .gpu-bars {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  max-width: none;
  box-sizing: border-box;
  opacity: 1 !important;
  filter: none !important;
}
.ffn-cell[data-i="5"] .gpu-bars span {
  cursor: help;
  width: 14px;
  height: 14px;
  border-radius: 2px;
  background: #373a40;
  flex: 0 0 14px;
  opacity: 1 !important;
  filter: none !important;
}
.ffn-cell[data-i="5"] .gpu-bars span.on { background: #2d863d !important; }
.ffn-cell[data-i="5"] .gpu-bars span.warn { background: #fcc419 !important; }
.ffn-cell[data-i="5"] .gpu-bars span.off { background: #3a4450 !important; }
.ffn-cell[data-i="5"] .gpu-bars span.empty { background: #2e3640; opacity: 0.65; }



/* Fan col: green spinning icon when autofan_enabled */
.ffn-cell[data-i="11"].ffn-cell-fan {
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.ffn-cell[data-i="11"] .ffn-fan-ico {
  display: inline-flex;
  width: 16px;
  height: 16px;
  color: #40c057;
  line-height: 0;
}
.ffn-cell[data-i="11"] .ffn-fan-ico svg {
  display: block;
  width: 16px;
  height: 16px;
}
.ffn-cell[data-i="11"] .ffn-fan-ico.is-spin {
  animation: ffn-fan-spin 1.1s linear infinite;
}
.ffn-cell[data-i="11"].is-autofan-on {
  color: #40c057 !important;
}
@keyframes ffn-fan-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 型号列内容字色：纯白约 70% */
.ff1-cell[data-i="4"],
.ffn-cell[data-i="4"] {
  color: #AAB8C4 !important;
}

/* 功耗列：右对齐 + 等宽数字，竖列更整齐 */
.ff1-cell[data-i="12"],
.ffn-cell[data-i="12"] {
  text-align: right !important;
  justify-content: flex-end !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  padding-right: 10px !important;
  box-sizing: border-box;
}
.ff1-cell[data-i="12"] {
  text-align: right !important;
}

/* 远程列：20003 电脑图标 */
.ffn-cell[data-i="15"].ffn-cell-remote {
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.ffn-cell[data-i="15"] .ffn-remote svg {
  display: block;
  width: 16px;
  height: 16px;
}
.ffn-cell[data-i="15"] .ffn-remote.is-on {
  color: #69db7c;
  opacity: 1;
}
.ffn-cell[data-i="15"] .ffn-remote.is-off {
  color: #868e96;
  opacity: 0.7;
}
.ff1-cell[data-i="15"] {
  text-align: center !important;
}

/* 表头居中；数据行对齐不变 */
#ff1Row .ff1-cell {
  text-align: center !important;
  justify-content: center !important;
  align-items: center !important;
}
#ff1Row .ff1-cell .ff1-stack {
  align-items: center !important;
  text-align: center !important;
}
#ff1Row .ff1-cell .ff1-stack-top,
#ff1Row .ff1-cell .ff1-stack-bottom {
  text-align: center !important;
  width: 100%;
}
/* 勾选列表头保持原样（若有控件） */
#ff1Row .ff1-cell[data-i="0"],
.ff1-cell.ff1-cell-check {
  justify-content: flex-start !important;
  padding-left: 13px !important;
}

/* 显卡格子：数据行左对齐（表头仍居中） */
.ffn-cell[data-i="5"] {
  justify-content: flex-start !important;
  text-align: left !important;
  padding-left: 8px !important;
  box-sizing: border-box;
}
.ffn-cell[data-i="5"] .gpu-bars {
  justify-content: flex-start !important;
  margin-right: auto;
}

/* G15 pager: < 1 >  100条/页 */
.f1-cell.is-g15-pager {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 98px;
  padding: 0 4px;
  justify-content: flex-start;
  overflow: visible;
  border: 1px solid rgba(255,255,255,.45);
  background: rgba(50,58,70,.75);
  position: relative;
  z-index: 1400;
  pointer-events: auto !important;
}
.f1-cell.is-g15-pager .g15-pager,
.f1-cell.is-g15-pager .g15-nav,
.f1-cell.is-g15-pager .g15-num,
.f1-cell.is-g15-pager .g15-size {
  position: relative;
  z-index: 1401;
  pointer-events: auto !important;
}
.f1-cell.is-g15-pager-spacer {
  flex: 0 0 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: none !important;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.g15-pager {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  white-space: nowrap;
}
.g15-nav,
.g15-num {
  height: 28px;
  min-width: 28px;
  padding: 0 8px;
  border: none;
  border-radius: 4px;
  background: #8b7cf7;
  color: #fff;
  font: 600 13px/1 "IBM Plex Sans", "Noto Sans SC", sans-serif;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.g15-nav:hover:not(:disabled) { filter: brightness(1.08); }
.g15-nav:disabled { opacity: 0.4; cursor: default; }
.g15-num { min-width: 32px; cursor: default; }
.g15-size {
  height: 28px;
  min-width: 108px;
  border: none;
  border-radius: 4px;
  background: #8b7cf7;
  color: #fff;
  padding: 0 28px 0 10px;
  font: 600 13px/1 "IBM Plex Sans", "Noto Sans SC", sans-serif;
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #fff 50%),
    linear-gradient(135deg, #fff 50%, transparent 50%);
  background-position: calc(100% - 12px) 11px, calc(100% - 7px) 11px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.g15-size:hover { filter: brightness(1.08); }
.g15-size option {
  background: #2a2d34;
  color: #e8eaed;
  font-weight: 500;
}



/* keep G15 clear of fixed right FR rail (48px) */
.f-band[data-zone="G"] {
  --f-inset-x: 4%;
  padding-right: calc(var(--f-inset-x) + 56px) !important;
}
.f-band[data-zone="G"] .f1-row {
  position: relative;
  z-index: 2;
  overflow: visible;
}
.f-band[data-zone="G"] .f-band-inner {
  overflow: visible !important;
}
/* zone marks stay non-blocking */
.f-band[data-zone="G"] > .zone-mark,
.f-band[data-zone="G"] .zone-mark {
  pointer-events: none !important;
}


.ffn-cell-remote,
.ffn-cell[data-i="15"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.ffn-remote {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 16px !important;
  height: 16px !important;
  line-height: 0;
}
.ffn-remote svg {
  width: 16px !important;
  height: 16px !important;
  display: block;
}

/* remote icon: slightly larger than GPU green box (GPU stays 14) */
.ffn-cell[data-i="15"].ffn-cell-remote,
.ffn-cell[data-i="15"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.ffn-cell[data-i="15"] .ffn-remote,
.ffn-remote {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  line-height: 0 !important;
  flex: 0 0 18px !important;
  transform: none !important;
}
.ffn-cell[data-i="15"] .ffn-remote svg,
.ffn-remote svg {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  max-width: none !important;
  max-height: none !important;
  transform: none !important;
}
.ffn-cell[data-i="15"] .ffn-remote.is-on,
.ffn-remote.is-on {
  color: #69db7c !important;
  opacity: 1 !important;
}
.ffn-cell[data-i="15"] .ffn-remote.is-off,
.ffn-remote.is-off {
  color: #868e96 !important;
  opacity: 0.7 !important;
}


/* 升序按钮保持可点排序样式 */
.d3-filter-btn[data-filter="asc"].is-on {
  border-color: #2d863d;
}


/* 升序按钮与下拉视觉统一一点 */
.d3-filter-btn[data-filter="asc"] {
  border-radius: 8px !important;
  border: 1px solid rgba(64, 192, 87, 0.85) !important;
  background: rgba(45, 134, 61, 0.12) !important;
  color: #f1f3f5 !important;
  min-height: 30px !important;
  padding: 0 12px !important;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.d3-filter-btn[data-filter="asc"]:hover,
.d3-filter-btn[data-filter="asc"].is-on:hover {
  border-color: #51cf66 !important;
  background: rgba(45, 134, 61, 0.22) !important;
  box-shadow: 0 0 0 1px rgba(81, 207, 102, 0.18);
}
.d3-filter-btn[data-filter="asc"].is-on {
  border-color: rgba(64, 192, 87, 0.85) !important;
  background: rgba(45, 134, 61, 0.12) !important;
}

/* D3 排序下拉：去掉外层黑框，只保留一层绿框 */
.d3-filter-btn.is-sort-select,
.main-band-d3 .d3-filter-btn.is-sort-select {
  all: unset !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  border-radius: 0 !important;
}
.d3-filter-btn.is-sort-select .d3-sort-key-select,
.d3-sort-key-select {
  box-sizing: border-box !important;
  display: inline-block !important;
  height: 28px !important;
  min-width: 88px !important;
  max-width: 120px !important;
  margin: 0 !important;
  padding: 0 26px 0 12px !important;
  border: 1px solid #40c057 !important;
  border-radius: 8px !important;
  background-color: transparent !important;
  color: #f1f3f5 !important;
  font: 600 13px/28px "IBM Plex Sans", "Noto Sans SC", sans-serif !important;
  letter-spacing: 0.02em;
  outline: none !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  box-shadow: none !important;
  transition: border-color .15s ease, background-color .15s ease;
  background-image:
    linear-gradient(45deg, transparent 50%, #adb5bd 50%),
    linear-gradient(135deg, #adb5bd 50%, transparent 50%) !important;
  background-position: calc(100% - 11px) 11px, calc(100% - 6px) 11px !important;
  background-size: 5px 5px, 5px 5px !important;
  background-repeat: no-repeat !important;
}
.d3-sort-key-select:hover {
  border-color: #51cf66 !important;
  background-color: rgba(45, 134, 61, 0.14) !important;
}
.d3-sort-key-select:focus {
  border-color: #69db7c !important;
  background-color: rgba(45, 134, 61, 0.18) !important;
}
.d3-sort-key-select option {
  background: #252830;
  color: #e9ecef;
  font-weight: 500;
}
/* 升序也做成单层绿框，和外层 d3-cell 黑底脱钩 */
.d3-filter-btn[data-filter="asc"],
.main-band-d3 .d3-filter-btn[data-filter="asc"] {
  border: 1px solid #40c057 !important;
  border-radius: 8px !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: #f1f3f5 !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 12px !important;
}
.d3-filter-btn[data-filter="asc"]:hover,
.d3-filter-btn[data-filter="asc"].is-on:hover {
  border-color: #51cf66 !important;
  background: rgba(45, 134, 61, 0.14) !important;
}
.d3-filter-btn[data-filter="asc"].is-on {
  border-color: #40c057 !important;
  background: transparent !important;
}

/* === kill double frame: outer tool shell must vanish for sort select === */
.main-band-d3 .d3-filter-btn.is-tool.is-sort-select,
.d3-filter-bar .d3-filter-btn.is-tool.is-sort-select,
.d3-row .d3-filter-btn.is-tool.is-sort-select,
#d3Row .d3-filter-btn.is-tool.is-sort-select {
  border: 0 !important;
  border-width: 0 !important;
  border-color: transparent !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  border-radius: 0 !important;
  color: inherit !important;
}
.main-band-d3 .d3-filter-btn.is-tool.is-sort-select:hover,
.d3-filter-bar .d3-filter-btn.is-tool.is-sort-select:hover,
#d3Row .d3-filter-btn.is-tool.is-sort-select:hover,
.main-band-d3 .d3-filter-btn.is-tool.is-sort-select.is-on,
#d3Row .d3-filter-btn.is-tool.is-sort-select.is-on {
  border: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
}
#d3Row .d3-sort-key-select,
.main-band-d3 .d3-sort-key-select {
  height: 28px !important;
  line-height: 26px !important;
  border: 1px solid #40c057 !important;
  border-radius: 8px !important;
  background-color: transparent !important;
  padding: 0 26px 0 12px !important;
}

/* GPU 绿框悬停提示：父级 e-band-e2 曾 pointer-events:none，需重新打开 */
.ff-follow-row.e-band-e2,
.ff-body > .e-band-e2.ff-follow-row {
  pointer-events: auto !important;
}
.ff-follow-row .ffn-row,
.ff-follow-row .ffn-cell,
.ff-follow-row .ffn-cell[data-i="5"],
.ff-follow-row .gpu-bars,
.ff-follow-row .gpu-bars span {
  pointer-events: auto !important;
}
.ff-follow-row .gpu-bars span {
  cursor: help !important;
  position: relative;
  z-index: 2;
}

.ff-gpu-hover-tip {
  position: fixed;
  z-index: 99999;
  transform: translate(-50%, -100%);
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(20, 24, 30, 0.96);
  border: 1px solid rgba(255,255,255,.22);
  color: #e9ecef;
  font: 600 12px/1.3 "IBM Plex Sans", "Noto Sans SC", sans-serif;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
}
.ff-gpu-hover-tip[hidden] { display: none !important; }

/* F 区域：只隐藏格子线条，保留内容 */
.f-band-mid[data-zone="F"] .ff1-cell,
.f-band-mid[data-zone="F"] .ffn-cell,
.f-band-mid[data-zone="F"] .ff1-row,
.f-band-mid[data-zone="F"] .ffn-row,
.f-band-mid[data-zone="F"] .e-band-inner,
.f-band-mid[data-zone="F"] .e-band-e2,
.f-band-mid[data-zone="F"] .ff-follow-row,
.f-band-mid[data-zone="F"] .ff-body,
.f-band-mid[data-zone="F"] {
  border: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
.f-band-mid[data-zone="F"] .ff1-cell,
.f-band-mid[data-zone="F"] .ffn-cell {
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: none !important;
}

/* 状态列左对齐 */
.ff1-cell[data-i="2"],
.ffn-cell[data-i="2"],
.ffn-cell.ffn-cell-status {
  justify-content: flex-start !important;
  text-align: left !important;
  padding-left: 8px !important;
}
.ffn-cell[data-i="2"] .ffn-status,
.ffn-cell-status .ffn-status {
  justify-content: flex-start !important;
  width: 100%;
}

/* 表头勾选与下方勾选左对齐 */
.f-band-mid[data-zone="F"] .ff1-cell[data-i="0"],
.f-band-mid[data-zone="F"] .ff1-cell.ff1-cell-check {
  justify-content: flex-start !important;
  align-items: center !important;
  padding-left: 13px !important;
  padding-right: 0 !important;
}
.f-band-mid[data-zone="F"] .ffn-cell[data-i="0"],
.f-band-mid[data-zone="F"] .ffn-cell-check {
  justify-content: flex-start !important;
  padding-left: 13px !important;
}
.f-band-mid[data-zone="F"] .ff1-cell[data-i="0"] .ff1-check,
.f-band-mid[data-zone="F"] .ffn-cell-check .ffn-check,
.f-band-mid[data-zone="F"] .ffn-check-star .ffn-check {
  margin-left: 0 !important;
}

/* F 列拖拽：开启 */
.e-band-inner[data-zone="F1"] {
  overflow: visible !important;
  position: relative !important;
  z-index: 30 !important;
  pointer-events: auto !important;
}
.f-band-mid[data-zone="F"] .ff1-handles,
#ff1Handles.ff1-handles {
  display: block !important;
  pointer-events: none !important;
  z-index: 50 !important;
}
.f-band-mid[data-zone="F"] .ff1-handle,
#ff1Handles .ff1-handle {
  display: block !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  width: 12px !important;
  margin-left: -6px !important;
  cursor: col-resize !important;
  z-index: 51 !important;
}
.f-band-mid[data-zone="F"] .ff1-handle::before,
#ff1Handles .ff1-handle::before {
  content: "" !important;
  opacity: 1 !important;
  background: rgba(255,255,255,.7) !important;
  width: 2px !important;
}
.f-band-mid[data-zone="F"] .ff1-handle:hover::before,
.f-band-mid[data-zone="F"] .ff1-handle.is-dragging::before {
  background: #fff !important;
  width: 3px !important;
}


/* 自定义布局勾选：单独一框，与排序下拉拉开 */
.d3-custom-layout {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  margin-left: 18px !important;
  padding: 0 12px !important;
  min-height: 28px;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,0.04) !important;
  box-sizing: border-box;
}
.d3-custom-layout-check {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: #7dcea0;
  cursor: pointer;
}
.d3-sort-wrap.is-sort-select {
  margin-right: 0 !important;
}
html.ff1-custom-layout-off #ff1Handles,
html.ff1-custom-layout-off .ff1-handle {
  display: none !important;
  pointer-events: none !important;
}


/* E2 框（E 区内 D2）：显示外框，放自定义布局 */
.e-band[data-zone="E"] > .main-band-d2,
.e-band[data-zone="E"] > .main-band-d2[data-zone="D2"] {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  border: 1px solid rgba(255,255,255,.85) !important;
  border-color: rgba(255,255,255,.85) !important;
  border-top: none !important;
  box-sizing: border-box !important;
  padding: 0 10px !important;
  gap: 10px;
  visibility: visible !important;
  opacity: 1 !important;
  background: #3A444E !important;
}
.e-band[data-zone="E"] > .main-band-d2 .d3-custom-layout {
  margin-left: 0 !important;
}


/* D3 外框显示 */
.e-band[data-zone="E"] > .main-band-d3,
.e-band[data-zone="E"] > .main-band-d3[data-zone="D3"],
.main-band-d3[data-zone="D3"],
.e-band .main-band-d3 {
  border: 1px solid rgba(255,255,255,.85) !important;
  border-color: rgba(255,255,255,.85) !important;
  box-sizing: border-box !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}



/* D2 不再放自定义布局 */
.e-band[data-zone="E"] > .main-band-d2 .d3-custom-layout {
  display: none !important;
}



/* D3 已删数字格/竖线，仅筛选 + 第10位自定义布局 */
.main-band-d3 > .d3-vline,
#d3Row.d3-grid-row {
  /* default hidden; html.mf-show-grid 打开 */
}
html:not(.mf-show-grid) .main-band-d3 > .d3-vline,
html:not(.mf-show-grid) #d3Row.d3-grid-row {
  display: none !important;
}
#d3Row.d3-filter-bar {
  display: none !important; /* 实际控件在 overlay */
}
.main-band-d3 > .d3-filter-overlay {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 6 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 8px !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border: 0 !important;
  pointer-events: none !important;
}
.main-band-d3 > .d3-filter-overlay > * {
  pointer-events: auto !important;
}
.main-band-d3 > .d3-custom-layout.is-on-cell-10 {
  z-index: 12 !important;
  pointer-events: auto !important;
  color: #E8ECF1 !important;
  white-space: nowrap;
  cursor: pointer;
  font-size: 11px;
}
.main-band-d3 > .d3-custom-layout.is-on-cell-10 .d3-all-label {
  font-size: 11px !important;
  color: #E8ECF1 !important;
}

/* 自定义布局在 D3 第10位：强制可见 */
.e-band[data-zone="E"] > .main-band-d3 > .d3-custom-layout.is-on-cell-10,
.main-band-d3 > .d3-custom-layout.is-on-cell-10,
.main-band-d3 .d3-custom-layout.is-on-cell-10 {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 20 !important;
  pointer-events: auto !important;
  color: #E8ECF1 !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
}
.main-band-d3 > .d3-custom-layout.is-on-cell-10 .d3-all-label {
  display: inline !important;
  visibility: visible !important;
  color: #E8ECF1 !important;
  font-size: 12px !important;
}
.main-band-d3 > .d3-custom-layout.is-on-cell-10 .d3-custom-layout-check {
  display: inline-block !important;
  visibility: visible !important;
  width: 14px !important;
  height: 14px !important;
}



/* 默认隐藏 D3 数字格/竖线；勾选后显示 */
html.mf-hide-grid .main-band-d3 > .d3-vline,
html.mf-hide-grid #d3Row.d3-grid-row {
  display: none !important;
}
html.mf-show-grid .main-band-d3 > .d3-vline {
  display: block !important;
  z-index: 3 !important;
  opacity: 0.85 !important;
  pointer-events: none !important;
}
html.mf-show-grid #d3Row.d3-grid-row {
  display: flex !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
html.mf-show-grid #d3Row.d3-grid-row .d3-cell {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex: 0 0 80px !important;
  width: 80px !important;
  min-width: 80px !important;
  border: 1px solid rgba(255,255,255,.45) !important;
  border-left: none !important;
  color: rgba(230,235,240,.9) !important;
  background: rgba(50,58,70,.4) !important;
  pointer-events: none !important;
  align-items: center !important;
  justify-content: center !important;
  font: 600 11px/1 "IBM Plex Sans","Noto Sans SC",sans-serif !important;
}
html.mf-show-grid #d3Row.d3-grid-row .d3-cell:first-child {
  border-left: 1px solid rgba(255,255,255,.45) !important;
}
/* 勾选时 A 区格子数字更明显 */
html.mf-show-grid .a-row > .a-cell:not(.a-cell-tool):not(.a-cell-split) {
  color: rgba(207,213,221,.75) !important;
  border-color: rgba(255,255,255,.35) !important;
}
html.mf-hide-grid .a-row > .a-cell:not(.a-cell-tool):not(.a-cell-split) {
  color: transparent !important;
}

/* 右上角格子开关：数字格 + D2/D3 外框 */
.site-ver-li.site-grid-toggle-li,
.site-ver-li {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.site-grid-toggle {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  user-select: none;
  color: rgba(207,213,221,.85);
  font: 600 12px/1 "IBM Plex Sans","Noto Sans SC",sans-serif;
  white-space: nowrap;
}
.site-grid-toggle-check {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: #7dcea0;
  cursor: pointer;
}
.site-grid-toggle-label { opacity: 0.9; }

/* ---- 隐藏：无数字格、无 D2/D3 外框 ---- */
html.mf-hide-grid .main-band-d3 > .d3-vline,
html.mf-hide-grid #d3Row.d3-grid-row {
  display: none !important;
}
html.mf-hide-grid .e-band[data-zone="E"] > .main-band-d2,
html.mf-hide-grid .e-band[data-zone="E"] > .main-band-d2[data-zone="D2"],
html.mf-hide-grid .main-band-d2[data-zone="D2"],
html.mf-hide-grid .e-band[data-zone="E"] > .main-band-d3,
html.mf-hide-grid .e-band[data-zone="E"] > .main-band-d3[data-zone="D3"],
html.mf-hide-grid .main-band-d3[data-zone="D3"],
html.mf-hide-grid .e-band .main-band-d3 {
  border-color: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
}
html.mf-hide-grid .a-row > .a-cell:not(.a-cell-tool):not(.a-cell-split) {
  color: transparent !important;
}

/* ---- 显示：数字格 + D2/D3 外框 ---- */
html.mf-show-grid .main-band-d3 > .d3-vline {
  display: block !important;
  z-index: 3 !important;
  opacity: 0.85 !important;
  pointer-events: none !important;
}
html.mf-show-grid #d3Row.d3-grid-row {
  display: flex !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
html.mf-show-grid #d3Row.d3-grid-row .d3-cell {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex: 0 0 80px !important;
  width: 80px !important;
  min-width: 80px !important;
  border: 1px solid rgba(255,255,255,.45) !important;
  border-left: none !important;
  color: rgba(230,235,240,.9) !important;
  background: rgba(50,58,70,.4) !important;
  pointer-events: none !important;
  align-items: center !important;
  justify-content: center !important;
  font: 600 11px/1 "IBM Plex Sans","Noto Sans SC",sans-serif !important;
}
html.mf-show-grid #d3Row.d3-grid-row .d3-cell:first-child {
  border-left: 1px solid rgba(255,255,255,.45) !important;
}
html.mf-show-grid .e-band[data-zone="E"] > .main-band-d2,
html.mf-show-grid .e-band[data-zone="E"] > .main-band-d2[data-zone="D2"],
html.mf-show-grid .main-band-d2[data-zone="D2"] {
  border: 1px solid rgba(255,255,255,.85) !important;
  border-color: rgba(255,255,255,.85) !important;
  border-top: none !important;
  box-sizing: border-box !important;
}
html.mf-show-grid .e-band[data-zone="E"] > .main-band-d3,
html.mf-show-grid .e-band[data-zone="E"] > .main-band-d3[data-zone="D3"],
html.mf-show-grid .main-band-d3[data-zone="D3"],
html.mf-show-grid .e-band .main-band-d3 {
  border: 1px solid rgba(255,255,255,.85) !important;
  border-color: rgba(255,255,255,.85) !important;
  box-sizing: border-box !important;
}
html.mf-show-grid .a-row > .a-cell:not(.a-cell-tool):not(.a-cell-split) {
  color: rgba(207,213,221,.75) !important;
  border-color: rgba(255,255,255,.35) !important;
}

/* G/G1 外框+内部格子开关（跟右上角「格子」勾选） */
html.mf-hide-grid .f-band[data-zone="G"],
html.mf-hide-grid section.f-band[data-zone="G"] {
  border-color: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
html.mf-hide-grid .f-band[data-zone="G"] .f-band-inner[data-zone="G1"],
html.mf-hide-grid .f-band-inner[data-zone="G1"] {
  border-color: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
html.mf-hide-grid .f-band[data-zone="G"] .f1-cell:not(.is-g15-pager):not(.is-g15-pager-spacer),
html.mf-hide-grid #f1Row > .f1-cell:not(.is-g15-pager):not(.is-g15-pager-spacer) {
  color: transparent !important;
  border-color: transparent !important;
  background: transparent !important;
}

html.mf-show-grid .f-band[data-zone="G"],
html.mf-show-grid section.f-band[data-zone="G"] {
  border: 1px solid rgba(255,255,255,.85) !important;
  border-color: rgba(255,255,255,.85) !important;
  box-sizing: border-box !important;
}
html.mf-show-grid .f-band[data-zone="G"] .f-band-inner[data-zone="G1"],
html.mf-show-grid .f-band-inner[data-zone="G1"] {
  border: 1px solid rgba(255,255,255,.85) !important;
  border-color: rgba(255,255,255,.85) !important;
  box-sizing: border-box !important;
}
html.mf-show-grid .f-band[data-zone="G"] .f1-cell:not(.is-g15-pager):not(.is-g15-pager-spacer),
html.mf-show-grid #f1Row > .f1-cell:not(.is-g15-pager):not(.is-g15-pager-spacer) {
  color: #cfd5dd !important;
  border: 1px solid rgba(255,255,255,.45) !important;
  border-left: none !important;
  background: rgba(50,58,70,.75) !important;
  visibility: visible !important;
  opacity: 1 !important;
}
html.mf-show-grid .f-band[data-zone="G"] .f1-cell:not(.is-g15-pager):first-child,
html.mf-show-grid #f1Row > .f1-cell:not(.is-g15-pager):first-child {
  border-left: 1px solid rgba(255,255,255,.45) !important;
}
/* G15 分页控件始终可见可点 */
html.mf-hide-grid .f1-cell.is-g15-pager,
html.mf-show-grid .f1-cell.is-g15-pager {
  color: inherit !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* GT 外框+内部格子开关（跟右上角「格子」勾选） */
html.mf-hide-grid .f-tools[data-zone="GT"],
html.mf-hide-grid section.f-tools[data-zone="GT"],
html.mf-hide-grid .f-tools {
  border-color: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
html.mf-hide-grid .f-tools .ft-row.ft-grid-row,
html.mf-hide-grid .f-tools .ft-cell.ft-grid-cell {
  display: none !important;
}

html.mf-show-grid .f-tools[data-zone="GT"],
html.mf-show-grid section.f-tools[data-zone="GT"],
html.mf-show-grid .f-tools {
  border: 1px solid rgba(255,255,255,.85) !important;
  border-color: rgba(255,255,255,.85) !important;
  box-sizing: border-box !important;
}
html.mf-show-grid .f-tools .ft-row.ft-grid-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  width: 100% !important;
  min-height: 44px !important;
}
html.mf-show-grid .f-tools .ft-cell.ft-grid-cell {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex: 0 0 98px !important;
  width: 98px !important;
  min-width: 98px !important;
  min-height: 44px !important;
  border: 1px solid rgba(255,255,255,.45) !important;
  border-left: none !important;
  background: rgba(50,58,70,.75) !important;
  color: #cfd5dd !important;
  align-items: center !important;
  justify-content: center !important;
  font: 600 11px/1 "IBM Plex Sans","Noto Sans SC",sans-serif !important;
  padding: 0 !important;
}
html.mf-show-grid .f-tools .ft-cell.ft-grid-cell:first-child {
  border-left: 1px solid rgba(255,255,255,.45) !important;
}

/* FR 外框+内部数字格子开关（跟右上角「格子」勾选） */
html.mf-hide-grid .float-side[data-zone="FR"],
html.mf-hide-grid aside.float-side-right[data-zone="FR"],
html.mf-hide-grid .float-side.float-side-right {
  border-color: transparent !important;
  /* 保留占位，但外框线隐藏；侧栏本身仍在 */
  box-shadow: none !important;
}
html.mf-hide-grid .float-side[data-zone="FR"] .fr-inner[data-zone="FR1"],
html.mf-hide-grid .float-side-right .fr-inner {
  border-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
html.mf-hide-grid .float-side[data-zone="FR"] .fr-cell:not(.is-interactive),
html.mf-hide-grid .float-side-right .fr-cell:not(.is-interactive) {
  color: transparent !important;
  border-color: transparent !important;
  background: transparent !important;
}

html.mf-show-grid .float-side[data-zone="FR"],
html.mf-show-grid aside.float-side-right[data-zone="FR"],
html.mf-show-grid .float-side.float-side-right {
  border: 1px solid #fff !important;
  border-color: #fff !important;
  box-sizing: border-box !important;
}
html.mf-show-grid .float-side[data-zone="FR"] .fr-inner[data-zone="FR1"],
html.mf-show-grid .float-side-right .fr-inner {
  border: none !important;
}
html.mf-show-grid .float-side[data-zone="FR"] .fr-cell:not(.is-interactive),
html.mf-show-grid .float-side-right .fr-cell:not(.is-interactive) {
  color: #cfd5dd !important;
  border: 1px solid rgba(255,255,255,.45) !important;
  border-top: none !important;
  background: rgba(50,58,70,.75) !important;
  visibility: visible !important;
  opacity: 1 !important;
}
html.mf-show-grid .float-side[data-zone="FR"] .fr-cell:not(.is-interactive):first-child,
html.mf-show-grid .float-side-right .fr-cell:not(.is-interactive):first-child {
  border-top: 1px solid rgba(255,255,255,.45) !important;
}
/* FR 可交互格始终可见 */
html.mf-hide-grid .float-side .fr-cell.is-interactive,
html.mf-show-grid .float-side .fr-cell.is-interactive {
  color: inherit !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* FR 背景同步 B（#2e3640） */
.float-side[data-zone="FR"],
.float-side.float-side-right,
aside.float-side-right[data-zone="FR"] {
  background: #2e3640 !important;
  background-color: #2e3640 !important;
  background-image: none !important;
}
.float-side[data-zone="FR"] .fr-inner,
.float-side-right .fr-inner[data-zone="FR1"] {
  background: #2e3640 !important;
  background-color: #2e3640 !important;
}
.float-side[data-zone="FR"] .fr-cell,
.float-side-right .fr-cell {
  background: #2e3640 !important;
  background-color: #2e3640 !important;
}
/* 显示格子时格子底也跟 B */
html.mf-show-grid .float-side[data-zone="FR"] .fr-cell:not(.is-interactive),
html.mf-show-grid .float-side-right .fr-cell:not(.is-interactive) {
  background: #2e3640 !important;
  background-color: #2e3640 !important;
}

/* GPU 绿块：防重叠 + 底色跟行/B 一致 */
.ffn-cell[data-i="5"] .gpu-bars {
  gap: 4px !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
}
.ffn-cell[data-i="5"] .gpu-bars span {
  position: relative !important;
  z-index: 1 !important;
  margin: 0 !important;
  transform: none !important;
  flex: 0 0 14px !important;
  width: 14px !important;
  min-width: 14px !important;
  max-width: 14px !important;
  height: 14px !important;
  box-sizing: border-box !important;
  background: #2e3640 !important;
}
.ffn-cell[data-i="5"] .gpu-bars span.on {
  background: #2d863d !important;
}
.ffn-cell[data-i="5"] .gpu-bars span.warn {
  background: #fcc419 !important;
}
.ffn-cell[data-i="5"] .gpu-bars span.off {
  background: #3a4450 !important;
}
.ffn-cell[data-i="5"] .gpu-bars span.empty {
  background: #2e3640 !important;
  opacity: 0.7 !important;
}


/* F 区：底/单数行 = B(#2e3640)；双数行 = A(#3A444E) */
.f-band-mid[data-zone="F"],
section.f-band-mid[data-zone="F"],
.f-band-mid[data-zone="F"] .ff-body {
  background: #2e3640 !important;
  background-color: #2e3640 !important;
  background-image: none !important;
}
/* 表头 F1 跟 B */
.f-band-mid[data-zone="F"] .e-band-inner[data-zone="F1"],
.f-band-mid[data-zone="F"] .ff1-row,
.f-band-mid[data-zone="F"] .ff1-cell {
  background: #2e3640 !important;
  background-color: #2e3640 !important;
  background-image: none !important;
}
/* 单数行（第1、3…）B 色 */
.f-band-mid[data-zone="F"] .ff-follow-row.is-row-odd,
.ff-body > .ff-follow-row.is-row-odd {
  background: #2e3640 !important;
  background-color: #2e3640 !important;
}
.f-band-mid[data-zone="F"] .ff-follow-row.is-row-odd .ffn-cell,
.ff-body > .ff-follow-row.is-row-odd .ffn-cell {
  background: transparent !important;
}
/* 双数行（第2、4…）A 色 */
.f-band-mid[data-zone="F"] .ff-follow-row.is-row-even,
.ff-body > .ff-follow-row.is-row-even {
  background: #3A444E !important;
  background-color: #3A444E !important;
  background-image: none !important;
}
.f-band-mid[data-zone="F"] .ff-follow-row.is-row-even .ffn-cell,
.ff-body > .ff-follow-row.is-row-even .ffn-cell {
  background: transparent !important;
}

/* 机器列表行色冲突修复
   冲突来源：
   1) .e-band-e2[data-zone="F2"] 写死 #3A444E，压掉单数行 B 色
   2) .e-band-e2 半透明底与双数行 A 色叠色，左侧勾选格看起来像另一块色
   处理：列表行只认 is-row-odd / is-row-even，整行同色到底
*/
.f-band-mid[data-zone="F"] .e-band-e2.ff-follow-row,
.f-band-mid[data-zone="F"] .ff-body > .ff-follow-row,
.ff-body > .ff-follow-row.e-band-e2,
.ff-body > .e-band-e2[data-zone="F2"],
.f-band-mid[data-zone="F"] .e-band-e2[data-zone="F2"] {
  background-image: none !important;
}
/* 单数整行 B */
.f-band-mid[data-zone="F"] .ff-follow-row.is-row-odd,
.f-band-mid[data-zone="F"] .ff-follow-row.is-row-odd.e-band-e2,
.f-band-mid[data-zone="F"] .e-band-e2.ff-follow-row.is-row-odd,
.ff-body > .ff-follow-row.is-row-odd,
.ff-body > .e-band-e2.ff-follow-row.is-row-odd {
  background: #2e3640 !important;
  background-color: #2e3640 !important;
}
/* 双数整行 A */
.f-band-mid[data-zone="F"] .ff-follow-row.is-row-even,
.f-band-mid[data-zone="F"] .ff-follow-row.is-row-even.e-band-e2,
.f-band-mid[data-zone="F"] .e-band-e2.ff-follow-row.is-row-even,
.ff-body > .ff-follow-row.is-row-even,
.ff-body > .e-band-e2.ff-follow-row.is-row-even {
  background: #3A444E !important;
  background-color: #3A444E !important;
}
/* 行内所有格子（含勾选格）透明，跟行色走，不许单独一块色 */
.f-band-mid[data-zone="F"] .ff-follow-row.is-row-odd .ffn-row,
.f-band-mid[data-zone="F"] .ff-follow-row.is-row-even .ffn-row,
.f-band-mid[data-zone="F"] .ff-follow-row.is-row-odd .ffn-cell,
.f-band-mid[data-zone="F"] .ff-follow-row.is-row-even .ffn-cell,
.f-band-mid[data-zone="F"] .ff-follow-row.is-row-odd .ffn-cell[data-i="0"],
.f-band-mid[data-zone="F"] .ff-follow-row.is-row-even .ffn-cell[data-i="0"],
.f-band-mid[data-zone="F"] .ff-follow-row.is-row-odd .ffn-cell-check,
.f-band-mid[data-zone="F"] .ff-follow-row.is-row-even .ffn-cell-check,
.f-band-mid[data-zone="F"] .ff-follow-row .ffn-check-star {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* F1 头条 #333333 */
.f-band-mid[data-zone="F"] .e-band-inner[data-zone="F1"],
.f-band-mid[data-zone="F"] .e-band-inner[data-zone="F1"] .ff1-row,
.f-band-mid[data-zone="F"] .e-band-inner[data-zone="F1"] .ff1-cell,
.e-band-inner[data-zone="F1"],
.e-band-inner[data-zone="F1"] .ff1-row,
.e-band-inner[data-zone="F1"] .ff1-cell {
  background: #333333 !important;
  background-color: #333333 !important;
  background-image: none !important;
}

/* F 数据行正文字号 15px */
.f-band-mid[data-zone="F"] .ffn-cell,
.ff-follow-row .ffn-cell,
.ffn-cell {
  font-size: 15px !important;
  line-height: 1.1 !important;
}
.f-band-mid[data-zone="F"] .ffn-name-main,
.f-band-mid[data-zone="F"] .ffn-hash-main,
.ffn-name-main,
.ffn-hash-main {
  font-size: 15px !important;
  line-height: 1.15 !important;
}

/* 机器列表行悬停加亮 */
.f-band-mid[data-zone="F"] .ff-follow-row.ff-data-row,
.ff-body > .ff-follow-row.ff-data-row {
  transition: filter 0.12s ease, background-color 0.12s ease;
  cursor: default;
}
.f-band-mid[data-zone="F"] .ff-follow-row.ff-data-row:hover,
.ff-body > .ff-follow-row.ff-data-row:hover {
  filter: brightness(1.18);
}
/* 悬停时保持勾选/星标/远程可点，不被 filter 影响可点性 */
.f-band-mid[data-zone="F"] .ff-follow-row.ff-data-row:hover .ffn-cell {
  /* 行级 brightness 已够，单元格不再单独压暗 */
}


.ff-expand-inner {
  padding: 12px 16px;
  color: #d8dee6;
  font-size: 13px;
  line-height: 1.5;
}
.ff-follow-row.is-expanded {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}
.ff-follow-row {
  cursor: pointer;
}

.ff-expand-cell27 {
  height: 27px !important;
  min-height: 27px !important;
  max-height: 27px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 0 12px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  border: none !important;
  background: linear-gradient(90deg, #1c4d7a 0%, #163a5c 55%, #13283f 100%) !important;
  color: #d0ebff !important;
  font-size: 12px !important;
  line-height: 27px !important;
}
.ff-expand-cell27 .ff-ex-st {
  font-weight: 700;
  padding: 0 8px;
  border-radius: 3px;
  background: rgba(0,0,0,0.25);
  line-height: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
}
.ff-expand-cell27 .ff-ex-st.on { color: #8ce99a; }
.ff-expand-cell27 .ff-ex-st.idle { color: #ffd43b; }
.ff-expand-cell27 .ff-ex-st.off { color: #ffa8a8; }



/* selected checkbox: blue box + white tick */
.ff1-check.is-checked,
.ffn-check.is-checked {
  background: #228be6 !important;
  border: none !important;
  box-shadow: none !important;
}
.ff1-check.is-checked .ff1-check-mark,
.ffn-check.is-checked .ff1-check-mark {
  display: block !important;
  border-left-color: #ffffff !important;
  border-bottom-color: #ffffff !important;
}

/* select-all indeterminate (partial selection) — same idea as backend #selectAll */
.ff1-check.is-indeterminate {
  background: #228be6 !important;
}
.ff1-check .ff1-check-indeterminate {
  display: none;
  width: 10px;
  height: 2px;
  background: #ffffff;
  border-radius: 1px;
}
.ff1-check.is-indeterminate .ff1-check-mark {
  display: none !important;
}
.ff1-check.is-indeterminate .ff1-check-indeterminate {
  display: block !important;
}
.ff1-check.is-checked .ff1-check-indeterminate {
  display: none !important;
}

/* selall harden */
#ff1SelectAll.ff1-check,
.ff1-cell[data-i="0"] .ff1-check {
  background: #ffffff;
}
#ff1SelectAll.ff1-check.is-checked,
#ff1SelectAll.ff1-check.is-indeterminate,
.ff1-cell[data-i="0"] .ff1-check.is-checked,
.ff1-cell[data-i="0"] .ff1-check.is-indeterminate,
.ffn-check.is-checked {
  background: #228be6 !important;
}
#ff1SelectAll .ff1-check-mark,
.ffn-check .ff1-check-mark,
.ff1-check .ff1-check-mark {
  border-left-color: #111;
  border-bottom-color: #111;
}
#ff1SelectAll.is-checked .ff1-check-mark,
#ff1SelectAll.is-indeterminate .ff1-check-indeterminate,
.ffn-check.is-checked .ff1-check-mark,
.ff1-check.is-checked .ff1-check-mark {
  border-left-color: #fff !important;
  border-bottom-color: #fff !important;
}











/* expand box + center vline FIX vlineFix222327
   Root cause: .ff-body > .ff-expand-box {display:block!important} beat flex,
   so .ff-expand-draw height collapsed to 0 and the vertical line was invisible. */
.ff-body > .ff-expand-box,
.ff-expand-box {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 160px !important;
  min-height: 160px !important;
  max-height: 160px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  background: #1a1d24 !important;
  border-top: 1px solid #3a4450 !important;
  border-bottom: 1px solid #3a4450 !important;
  position: relative !important;
  z-index: 30 !important;
  flex: 0 0 160px !important;
  pointer-events: auto !important;
}
.ff-body > .ff-expand-box > .ff-expand-cell27,
.ff-expand-box > .ff-expand-cell27 {
  flex: 0 0 27px !important;
  height: 27px !important;
}
.ff-body > .ff-expand-box > .ff-expand-draw,
.ff-expand-box > .ff-expand-draw {
  flex: 1 1 auto !important;
  height: 133px !important;
  min-height: 133px !important;
  max-height: 133px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  background: transparent !important;
  border: none !important;
  position: relative !important;
}
.ff-expand-draw-left,
.ff-expand-draw-right {
  flex: 1 1 50% !important;
  width: 50% !important;
  height: 133px !important;
  min-height: 133px !important;
  box-sizing: border-box !important;
  border: none !important;
}
.ff-expand-draw-left {
  border-right: 1px solid #ffffff !important;
}

/* left panel 4 draggable horizontal lines h4drag222558 */
.ff-expand-draw-left {
  position: relative !important;
}
.ff-ex-hline {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 0 !important;
  border-top: 1px solid #ffffff !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: ns-resize !important;
  z-index: 5 !important;
  box-sizing: border-box !important;
  /* hit area */
  pointer-events: auto !important;
}
.ff-ex-hline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -6px;
  height: 12px;
  cursor: ns-resize;
}
.ff-ex-hline:hover {
  border-top-color: #7eb8d8 !important;
}

.ff-expand-draw-right {
  position: relative !important;
}

/* content uncoupled from hlines; slots fixed */
/* hashline bound to first hline bindL1222907 */
.ff-ex-hline[data-hline="0"] {
  z-index: 6 !important;
}
.ff-ex-hline-label {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 4px; /* sit just above the white line */
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  pointer-events: none; /* drag goes to the line */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  line-height: 1.2;
  color: #ced4da;
}
.ff-ex-hashline .algo {
  color: #ced4da;
  font-weight: 600;
}
.ff-ex-hashline .hash {
  color: #69db7c;
  font-size: 15px;
  font-weight: 700;
}
.ff-ex-hashline .ar {
  color: #ced4da;
  font-size: 13px;
}

.ff-ex-hline[data-hline="1"] { z-index: 6 !important; }
.ff-ex-actions {
  pointer-events: auto !important;
  gap: 8px;
  align-items: center;
}
.ff-ex-btn {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,.18);
  background: #228be6;
  color: #fff;
  cursor: pointer;
  line-height: 1.2;
}
.ff-ex-btn.ghost {
  background: rgba(255,255,255,.06);
  color: #e9ecef;
  border-color: rgba(255,255,255,.28);
}
.ff-ex-btn:hover { filter: brightness(1.08); }

/* event lines on left cells 3-5 L3ev223833 */
.ff-ex-hline[data-hline="2"],
.ff-ex-hline[data-hline="3"],
.ff-ex-hline[data-hline="4"] {
  z-index: 6 !important;
}
.ff-ex-evline {
  font-size: 11px !important;
  color: #adb5bd !important;
  pointer-events: none !important;
}
.ff-ex-evline.is-empty {
  opacity: 0.45;
}

/* right GPU tiles on hline Rgpu224118 — CSS drawn boxes */
.ff-ex-hline-r {
  z-index: 6 !important;
}
.ff-ex-gpus {
  pointer-events: none !important;
  left: 8px !important;
  right: 8px !important;
  bottom: 6px !important;
  top: auto !important;
  display: flex !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
}
.ff-ex-gpus-empty {
  color: #868e96;
  font-size: 12px;
}
.ff-expand-box .rd-gpu-tiles {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  justify-content: flex-start;
  align-items: flex-end;
  direction: ltr;
}
.ff-expand-box .rd-gpu-tile {
  flex: 0 0 auto;
  width: 58px;
  background: #25272d;
  border: 1px solid #32353c;
  border-radius: 4px;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.2;
  color: #aeb0b5;
  text-align: center !important;
}
.ff-expand-box .rd-gpu-tile-temp,
.ff-expand-box .rd-gpu-tile-fan,
.ff-expand-box .rd-gpu-tile-hash {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: center !important;
}
.ff-expand-box .rd-gpu-tile-temp {
  padding: 5px 0 3px !important;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.ff-expand-box .rd-gpu-tile-fan {
  padding: 3px 0 !important;
  font-weight: 600;
  color: #fff !important;
  background: #c92a2a;
}
.ff-expand-box .rd-gpu-tile-fan.is-idle {
  background: #3a3d45;
  color: #8b8e95 !important;
}
.ff-expand-box .rd-gpu-tile-hash {
  padding: 4px 0 5px !important;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* GPU tiles to the left (toward center divider) */
.ff-ex-gpus,
.ff-expand-box .rd-gpu-tiles {
  justify-content: flex-start !important;
}

/* guide strokes (no hide toggle) */
.ff-expand-box {
  position: relative !important;
}
.ff-ex-hline {
  border-top: none !important; /* stroke moved to .ff-ex-guide */
}
.ff-ex-guide {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  height: 0 !important;
  border-top: 1px solid #ffffff !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
.ff-expand-draw-left {
  border-right: none !important; /* stroke moved to .ff-ex-vguide */
}
.ff-ex-vguide {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
  width: 0 !important;
  border-right: 1px solid #ffffff !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* fixed content slots — independent of draggable white lines fixContent230100 */
.ff-ex-slot {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
  z-index: 4 !important;
}
.ff-ex-slot[data-slot="0"] { top: 16% !important; }
.ff-ex-slot[data-slot="1"] { top: 34% !important; }
.ff-ex-slot[data-slot="2"] { top: 52% !important; }
.ff-ex-slot[data-slot="3"] { top: 70% !important; }
.ff-ex-slot[data-slot="4"] { top: 88% !important; }
.ff-ex-slot-r[data-slot-r="0"] { top: 50% !important; }
.ff-ex-hline {
  z-index: 5 !important;
}
.ff-ex-hline-label {
  position: absolute !important;
  left: 10px !important;
  right: 10px !important;
  bottom: 4px !important;
  top: auto !important;
}
.ff-ex-actions {
  pointer-events: auto !important;
}

/* remove expand white lines rmlines230330 */
.ff-ex-hline,
.ff-ex-hline-r,
.ff-ex-guide,
.ff-ex-vguide,
.ff-ex-hline::after {
  display: none !important;
  border: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.ff-expand-draw-left {
  border-right: none !important;
}

/* larger vertical gaps between expand content rows gapSlots230530 */
.ff-ex-slot[data-slot="0"] { top: 22px !important; }
.ff-ex-slot[data-slot="1"] { top: 52px !important; }
.ff-ex-slot[data-slot="2"] { top: 82px !important; }
.ff-ex-slot[data-slot="3"] { top: 108px !important; }
.ff-ex-slot[data-slot="4"] { top: 128px !important; }
.ff-ex-slot-r[data-slot-r="0"] { top: 70px !important; }
.ff-ex-hline-label { bottom: 8px !important; }

/* gap between status bar and hash row barGap230730 */
.ff-body > .ff-expand-box,
.ff-expand-box {
  height: 172px !important;
  min-height: 172px !important;
  max-height: 172px !important;
  flex: 0 0 172px !important;
}
.ff-body > .ff-expand-box > .ff-expand-cell27,
.ff-expand-box > .ff-expand-cell27 {
  margin-bottom: 12px !important;
}
.ff-ex-slot[data-slot="0"] { top: 28px !important; }

/* more space between hashline and action buttons hashBtnGap231040 */
.ff-ex-slot[data-slot="0"] { top: 28px !important; }
.ff-ex-slot[data-slot="1"] { top: 68px !important; }
.ff-ex-slot[data-slot="2"] { top: 96px !important; }
.ff-ex-slot[data-slot="3"] { top: 118px !important; }
.ff-ex-slot[data-slot="4"] { top: 136px !important; }

/* event logs left-to-right row evRow231140 */
.ff-ex-evrow {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 16px !important;
  left: 10px !important;
  right: 10px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}
.ff-ex-evitem {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  font-size: 11px !important;
  color: #adb5bd !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}
.ff-ex-evitem.is-empty {
  opacity: 0.45 !important;
  display: none !important; /* hide empty slots so items pack left-to-right */
}
.ff-ex-slot[data-slot="3"],
.ff-ex-slot[data-slot="4"] {
  display: none !important;
}

/* selected D1 menu underline covers icon + label d1ActiveLine231820 */
#d1Row .d1-cell.is-filled {
  position: relative !important;
}
#d1Row .d1-cell.is-filled.is-active::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: 4px !important;
  /* icon(~22) + gap(8) + label(~32) + slight pad ≈ 78 */
  width: 82px !important;
  height: 2px !important;
  background: #ffffff !important;
  border-radius: 0 !important;
  pointer-events: none !important;
  z-index: 5 !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}
#d1Row .d1-cell-pc.is-active::after,
#d1Row .d1-cell-gpu.is-active::after,
#d1Row .d1-cell-fan.is-active::after,
#d1Row .d1-cell-wallet.is-active::after,
#d1Row .d1-cell-flight.is-active::after,
#d1Row .d1-cell-oc.is-active::after,
#d1Row .d1-cell-drv.is-active::after,
#d1Row .d1-cell-set.is-active::after {
  width: 82px !important;
  bottom: 4px !important;
}

/* workers/机器: underline sits under icon+label group, a bit wider */

/* D1 center align + underline under icon+label d1Center232040 */
#d1Row .d1-cell.is-filled,
#d1Row .d1-cell.is-filled.is-active {
  justify-content: center !important;
  text-align: center !important;
}
#d1Row .d1-cell.is-filled.is-active::after {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: 92px !important;
  bottom: 4px !important;
  height: 2px !important;
  background: #ffffff !important;
}

/* gpus F page gpuView232650 */
.mf-gpus-band {
  display: block !important;
}
.mf-gpus-band[hidden],
.mf-gpus-band.is-mf-view-hidden {
  display: none !important;
}
.mf-gpus-page {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 16px 20px;
  min-height: 360px;
  background: #1a1d24;
  color: #e9ecef;
}
.mf-gpus-toolbar {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 12px;
}
.mf-gpus-title {
  font-size: 16px;
  font-weight: 700;
  color: #f8f9fa;
}
.mf-gpus-sub {
  font-size: 12px;
  color: #868e96;
}
.mf-gpus-table-wrap {
  width: 100%;
  overflow: auto;
  border: 1px solid #3a4450;
  border-radius: 4px;
  background: #151820;
}
.mf-gpus-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  min-width: 860px;
}
.mf-gpus-table th,
.mf-gpus-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid #2c3440;
  white-space: nowrap;
}
.mf-gpus-table th {
  background: #1e2530;
  color: #adb5bd;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 1;
}
.mf-gpus-table tbody tr:hover {
  background: rgba(34, 139, 230, 0.08);
}
.mf-gpus-table td {
  color: #dee2e6;
}

/* wallet F page walletView234500 */
.mf-wallet-band[hidden],
.mf-wallet-band.is-mf-view-hidden { display: none !important; }
.mf-wallet-page {
  width: 100%;
  box-sizing: border-box;
  padding: 16px 18px 24px;
  min-height: 420px;
  background: #3A444E !important;
  background-color: #3A444E !important;
  color: #e9ecef;
}
.mf-wallet-band {
  background: #3A444E !important;
  background-color: #3A444E !important;
}
.mf-wallet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.mf-wallet-title {
  font-size: 22px;
  font-weight: 700;
  color: #f8f9fa;
  line-height: 1.2;
}
.mf-wallet-desc {
  margin-top: 6px;
  font-size: 13px;
  color: #868e96;
}
.mf-wallet-add {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  background: #228be6;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  flex: 0 0 auto;
}
.mf-wallet-add:hover { filter: brightness(1.08); }
.mf-wallet-saved-label {
  font-size: 14px;
  font-weight: 600;
  color: #f1f3f5;
  margin-bottom: 10px;
}
.mf-wallet-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.mf-wal-chip {
  border: 1px solid #2e3138;
  background: #23252b;
  color: #adb5bd;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 13px;
  cursor: pointer;
}
.mf-wal-chip:hover { color: #e9ecef; border-color: #3d424c; }
.mf-wal-chip.is-on {
  color: #e9ecef;
  border-color: #4dabf7;
  background: #1e2a38;
}
.mf-wallet-groups { display: grid; gap: 18px; }
.mf-wallet-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 8px;
}
.mf-wallet-group-title {
  font-size: 14px;
  font-weight: 600;
  color: #f1f3f5;
}
.mf-wallet-group-count { font-size: 12px; color: #868e96; }
.mf-wallet-table-wrap {
  border: 1px solid #2c3440;
  border-radius: 8px;
  overflow: hidden;
  background: #151820;
}
.mf-wallet-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.mf-wallet-table th,
.mf-wallet-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid #2c3440;
  vertical-align: middle;
}
.mf-wallet-table th {
  color: #868e96;
  font-weight: 500;
  background: #1a1f28;
}
.mf-wallet-table tr:last-child td { border-bottom: none; }
.mf-wal-addr {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: #ced4da;
}
.mf-wal-note { color: #868e96; }
.mf-wal-ops {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  white-space: nowrap;
}
.mf-wal-btn {
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid #3a4450;
  background: #2c3440;
  color: #e9ecef;
}
.mf-wal-btn.ghost { background: #252b36; }
.mf-wal-btn.primary {
  background: #228be6;
  border-color: #228be6;
  color: #fff;
}
.mf-wal-btn:hover { filter: brightness(1.08); }
.mf-wallet-empty {
  padding: 24px 12px;
  color: #868e96;
  font-size: 13px;
}
.mf-wallet-modal {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 40;
}
.mf-wallet-modal[hidden] { display: none !important; }
.mf-wallet-band { position: relative !important; }
.mf-wallet-modal-card {
  width: min(440px, 92%);
  background: #1e2530;
  border: 1px solid #3a4450;
  border-radius: 10px;
  padding: 16px;
  display: grid;
  gap: 10px;
}
.mf-wallet-modal-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
}
.mf-wallet-field {
  display: grid;
  gap: 6px;
  font-size: 12px;
  color: #adb5bd;
}
.mf-wallet-field input {
  height: 34px;
  border-radius: 6px;
  border: 1px solid #3a4450;
  background: #151820;
  color: #e9ecef;
  padding: 0 10px;
}
.mf-wallet-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}
.mf-wallet-modal-err {
  color: #ffa8a8;
  font-size: 12px;
}

/* wallet bg = A bar bg (#3A444E) walBgA235820 */
.mf-wallet-band,
.mf-wallet-band.f-band-mid,
.mf-wallet-page {
  background: #3A444E !important;
  background-color: #3A444E !important;
}

/* sync wallet column alignment across groups walAlign083140 */
.mf-wallet-groups {
  width: 100%;
}
.mf-wallet-group,
.mf-wallet-table-wrap,
.mf-wallet-table {
  width: 100% !important;
  box-sizing: border-box !important;
}
.mf-wallet-table {
  table-layout: fixed !important;
}
.mf-wallet-table th,
.mf-wallet-table td {
  text-align: left !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
/* name | address | note | ops — same widths every group */
.mf-wallet-table th:nth-child(1),
.mf-wallet-table td:nth-child(1) { width: 16% !important; }
.mf-wallet-table th:nth-child(2),
.mf-wallet-table td:nth-child(2) { width: 42% !important; }
.mf-wallet-table th:nth-child(3),
.mf-wallet-table td:nth-child(3) { width: 18% !important; }
.mf-wallet-table th:nth-child(4),
.mf-wallet-table td:nth-child(4) {
  width: 24% !important;
  text-align: right !important;
}
.mf-wal-ops {
  display: inline-flex !important;
  justify-content: flex-end !important;
  width: 100% !important;
}
.mf-wal-addr {
  display: inline-block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  vertical-align: bottom !important;
}

/* show full wallet content, no truncation walFull083240 */
.mf-wallet-table th,
.mf-wallet-table td {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  word-break: break-all !important;
  vertical-align: top !important;
}
.mf-wallet-table th:nth-child(4),
.mf-wallet-table td:nth-child(4) {
  white-space: nowrap !important;
  word-break: normal !important;
  vertical-align: middle !important;
}
.mf-wal-addr {
  display: inline !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  word-break: break-all !important;
}
.mf-wal-ops {
  flex-wrap: wrap !important;
}

/* wallet ops buttons horizontal row walOpsRow083340 */
.mf-wallet-table th:nth-child(4),
.mf-wallet-table td:nth-child(4) {
  width: 28% !important;
  min-width: 220px !important;
  white-space: nowrap !important;
  word-break: normal !important;
  vertical-align: middle !important;
  text-align: right !important;
}
.mf-wal-ops {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  width: auto !important;
  max-width: none !important;
}
.mf-wal-ops .mf-wal-btn {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* autofan F page autofanView083450 */
.mf-autofan-band[hidden],
.mf-autofan-band.is-mf-view-hidden { display: none !important; }
.mf-autofan-band,
.mf-autofan-band.f-band-mid,
.mf-autofan-page {
  background: #3A444E !important;
  background-color: #3A444E !important;
}
.mf-autofan-page {
  width: 100%;
  box-sizing: border-box;
  padding: 16px 18px 24px;
  min-height: 420px;
  color: #e9ecef;
}
.mf-af-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.mf-af-title {
  font-size: 22px;
  font-weight: 700;
  color: #f8f9fa;
  line-height: 1.2;
}
.mf-af-stats {
  margin-top: 8px;
  font-size: 13px;
  color: #e9ecef;
}
.mf-af-desc {
  margin-top: 6px;
  font-size: 13px;
  color: #868e96;
  max-width: 720px;
  line-height: 1.45;
}
.mf-af-actions {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
}
.mf-af-btn {
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid #4dabf7;
  background: #228be6;
  color: #fff;
  white-space: nowrap;
}
.mf-af-btn.primary { background: #228be6; }
.mf-af-btn:hover { filter: brightness(1.08); }
.mf-af-table-wrap {
  max-width: 560px;
  border: 1px solid #2c3440;
  border-radius: 8px;
  overflow: hidden;
  background: #1a1f28;
}
.mf-af-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.mf-af-table th,
.mf-af-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid #2c3440;
  vertical-align: middle;
}
.mf-af-table th {
  color: #adb5bd;
  font-weight: 600;
  background: #1e2530;
}
.mf-af-table tr:last-child td { border-bottom: none; }
.mf-af-table input[type="number"] {
  width: 72px;
  height: 32px;
  border-radius: 4px;
  border: 1px solid #3a4450;
  background: #0f1318;
  color: #f8f9fa;
  padding: 0 8px;
  margin-right: 6px;
}
.mf-af-foot {
  margin-top: 12px;
  font-size: 12px;
  color: #868e96;
  max-width: 720px;
  line-height: 1.45;
}
.mf-af-msg {
  margin-top: 10px;
  font-size: 13px;
  color: #69db7c;
}
.mf-af-msg.is-err { color: #ffa8a8; }

/* flight F page flightView083820 */
.mf-flight-band[hidden],
.mf-flight-band.is-mf-view-hidden { display: none !important; }
.mf-flight-band,
.mf-flight-band.f-band-mid,
.mf-flight-page {
  background: #3A444E !important;
  background-color: #3A444E !important;
}
.mf-flight-band { position: relative !important; }
.mf-flight-page {
  width: 100%;
  box-sizing: border-box;
  padding: 16px 18px 24px;
  min-height: 420px;
  color: #e9ecef;
}
.mf-fl-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.mf-fl-title {
  font-size: 22px;
  font-weight: 700;
  color: #f8f9fa;
}
.mf-fl-desc {
  margin-top: 6px;
  font-size: 13px;
  color: #868e96;
  max-width: 720px;
  line-height: 1.45;
}

.mf-fl-os {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 4px;
}
.mf-fl-os-btn {
  border: 1px solid #2e3138;
  background: #23252b;
  color: #adb5bd;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.2;
}
.mf-fl-os-btn:hover { filter: brightness(1.08); }
.mf-fl-os-btn.is-on {
  color: #e9ecef;
  border-color: #4dabf7;
  background: #1e2a38;
}
.mf-fl-actions { display: flex; gap: 10px; flex: 0 0 auto; flex-wrap: wrap; align-items: center; }
.mf-fl-section-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
}
.mf-fl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.mf-fl-chip {
  border: 1px solid #2e3138;
  background: #23252b;
  color: #adb5bd;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 13px;
  cursor: pointer;
}
.mf-fl-chip.is-on {
  color: #e9ecef;
  border-color: #4dabf7;
  background: #1e2a38;
}
.mf-fl-table-wrap {
  border: 1px solid #2c3440;
  border-radius: 8px;
  overflow: auto;
  background: #1a1f28;
}
.mf-fl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
  min-width: 900px;
}
.mf-fl-table th,
.mf-fl-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid #2c3440;
  vertical-align: middle;
  word-break: break-word;
}
.mf-fl-table th {
  color: #868e96;
  font-weight: 500;
  background: #1e2530;
  position: sticky;
  top: 0;
}
.mf-fl-table th:nth-child(1), .mf-fl-table td:nth-child(1) { width: 22%; }
.mf-fl-table th:nth-child(2), .mf-fl-table td:nth-child(2) { width: 12%; }
.mf-fl-table th:nth-child(3), .mf-fl-table td:nth-child(3) { width: 22%; }
.mf-fl-table th:nth-child(4), .mf-fl-table td:nth-child(4) { width: 14%; }
.mf-fl-table th:nth-child(5), .mf-fl-table td:nth-child(5) { width: 8%; }
.mf-fl-table th:nth-child(6), .mf-fl-table td:nth-child(6) { width: 22%; }
.mf-fl-sub { margin-top: 4px; font-size: 12px; color: #868e96; font-weight: 400; }
.mf-fl-ops {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 8px;
  justify-content: flex-end;
  width: 100%;
}
.mf-fl-btn {
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid #3a4450;
  background: #2c3440;
  color: #e9ecef;
  white-space: nowrap;
}
.mf-fl-btn.sm { padding: 6px 10px; font-size: 12px; }
.mf-fl-btn.ghost { background: #252b36; }
.mf-fl-btn.primary {
  background: #228be6;
  border-color: #228be6;
  color: #fff;
}
.mf-fl-btn:hover { filter: brightness(1.08); }
.mf-fl-msg { margin-top: 10px; font-size: 13px; color: #69db7c; }
.mf-fl-msg.is-err { color: #ffa8a8; }
.mf-fl-modal {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 40;
}
.mf-fl-modal[hidden] { display: none !important; }
.mf-fl-modal-card {
  width: min(520px, 94%);
  max-height: 90%;
  overflow: auto;
  background: #1e2530;
  border: 1px solid #3a4450;
  border-radius: 10px;
  padding: 16px;
  display: grid;
  gap: 10px;
}
.mf-fl-modal-title { font-size: 16px; font-weight: 700; }
.mf-fl-field {
  display: grid;
  gap: 6px;
  font-size: 12px;
  color: #adb5bd;
}
.mf-fl-field input,
.mf-fl-field select {
  height: 34px;
  border-radius: 6px;
  border: 1px solid #3a4450;
  background: #151820;
  color: #e9ecef;
  padding: 0 10px;
}
.mf-fl-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}
.mf-fl-modal-err { color: #ffa8a8; font-size: 12px; }

/* wallet addr show first5…last5 walShort084320 */
.mf-fl-wallet,
.mf-wal-addr {
  word-break: normal !important;
  white-space: nowrap !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
}

/* keep flight ops buttons fully visible flOpsVisible084450 */
.mf-flight-page {
  padding-right: calc(18px + var(--fr-gutter, 52px)) !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}
.mf-flight-band {
  overflow: visible !important;
}
.mf-fl-table-wrap {
  overflow-x: auto !important;
  overflow-y: visible !important;
  padding-right: 4px !important;
}
.mf-fl-table {
  min-width: 1080px !important;
  table-layout: fixed !important;
}
/* 7 cols: name miner algo pool wallet used ops */
.mf-fl-table th:nth-child(1), .mf-fl-table td:nth-child(1) { width: 12% !important; }
.mf-fl-table th:nth-child(2), .mf-fl-table td:nth-child(2) { width: 14% !important; }
.mf-fl-table th:nth-child(3), .mf-fl-table td:nth-child(3) { width: 9% !important; }
.mf-fl-table th:nth-child(4), .mf-fl-table td:nth-child(4) { width: 16% !important; }
.mf-fl-table th:nth-child(5), .mf-fl-table td:nth-child(5) { width: 12% !important; }
.mf-fl-table th:nth-child(6), .mf-fl-table td:nth-child(6) {
  width: 7% !important;
  text-align: center !important;
  white-space: nowrap !important;
}
.mf-fl-table th:nth-child(7), .mf-fl-table td:nth-child(7) {
  width: 30% !important;
  min-width: 260px !important;
  text-align: right !important;
  white-space: nowrap !important;
  overflow: visible !important;
  padding-right: 14px !important;
}
.mf-fl-ops {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  width: max-content !important;
  max-width: none !important;
  margin-left: auto !important;
}
.mf-fl-ops .mf-fl-btn {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* flight table fluid with browser width flFluid084620 */
.mf-flight-page {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding-left: clamp(12px, 1.2vw, 18px) !important;
  padding-right: calc(clamp(12px, 1.2vw, 18px) + var(--fr-gutter, 52px)) !important;
}
.mf-fl-table-wrap {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
}
.mf-fl-table {
  width: 100% !important;
  min-width: 0 !important;
  table-layout: fixed !important;
}
.mf-fl-table th,
.mf-fl-table td {
  box-sizing: border-box !important;
}
/* proportional columns that shrink/grow with viewport */
.mf-fl-table th:nth-child(1), .mf-fl-table td:nth-child(1) { width: 12% !important; }
.mf-fl-table th:nth-child(2), .mf-fl-table td:nth-child(2) { width: 14% !important; }
.mf-fl-table th:nth-child(3), .mf-fl-table td:nth-child(3) { width: 9% !important; }
.mf-fl-table th:nth-child(4), .mf-fl-table td:nth-child(4) { width: 16% !important; }
.mf-fl-table th:nth-child(5), .mf-fl-table td:nth-child(5) { width: 11% !important; }
.mf-fl-table th:nth-child(6), .mf-fl-table td:nth-child(6) { width: 7% !important; }
.mf-fl-table th:nth-child(7), .mf-fl-table td:nth-child(7) {
  width: 31% !important;
  min-width: 0 !important;
  padding-right: clamp(8px, 1vw, 14px) !important;
}
.mf-fl-ops {
  width: 100% !important;
  max-width: 100% !important;
  justify-content: flex-end !important;
  gap: clamp(4px, 0.6vw, 8px) !important;
}
.mf-fl-ops .mf-fl-btn {
  padding: clamp(4px, 0.5vw, 6px) clamp(6px, 0.7vw, 10px) !important;
  font-size: clamp(11px, 0.95vw, 12px) !important;
}
.mf-fl-btn:not(.sm) {
  padding: clamp(6px, 0.7vw, 8px) clamp(10px, 1vw, 12px) !important;
  font-size: clamp(12px, 1vw, 13px) !important;
}
@media (max-width: 1100px) {
  .mf-fl-table {
    min-width: 920px !important; /* only then allow horizontal scroll */
  }
}

/* flight ops buttons right align flOpsRight084820 */
.mf-fl-table th:nth-child(7),
.mf-fl-table td:nth-child(7),
.mf-fl-table td.mf-fl-ops,
td.mf-fl-ops {
  text-align: right !important;
}
.mf-fl-ops {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: flex-end !important;
  align-items: center !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  width: 100% !important;
  float: none !important;
}
.mf-fl-ops .mf-fl-btn {
  float: none !important;
  margin-left: 0 !important;
}

/* flight row lines span full width to the right flLineFull084920 */
.mf-flight-page {
  width: 100% !important;
}
.mf-fl-table-wrap {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  box-sizing: border-box !important;
}
.mf-fl-table {
  width: 100% !important;
  min-width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
}
.mf-fl-table thead th {
  border-bottom: 1px solid #4a5562 !important;
}
.mf-fl-table tbody td {
  border-bottom: 1px solid #3a4450 !important;
}
.mf-fl-table tbody tr:last-child td {
  border-bottom: none !important;
}
/* ensure every column participates so the line is continuous */
.mf-fl-table th,
.mf-fl-table td {
  border-left: none !important;
  border-right: none !important;
}

/* oc templates F page ocView085220 */
.mf-oc-band[hidden],
.mf-oc-band.is-mf-view-hidden { display: none !important; }
.mf-oc-band,
.mf-oc-band.f-band-mid,
.mf-oc-page {
  background: #3A444E !important;
  background-color: #3A444E !important;
}
.mf-oc-band { position: relative !important; overflow: visible !important; }
.mf-oc-page {
  width: 100%;
  box-sizing: border-box;
  padding: 16px 18px 24px;
  padding-right: calc(18px + var(--fr-gutter, 52px));
  min-height: 420px;
  color: #e9ecef;
}
.mf-oc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.mf-oc-title {
  font-size: 22px;
  font-weight: 700;
  color: #f8f9fa;
}
.mf-oc-desc {
  margin-top: 6px;
  font-size: 13px;
  color: #868e96;
  max-width: 720px;
  line-height: 1.45;
}
.mf-oc-table-wrap {
  width: 100%;
  border: 1px solid #2c3440;
  border-radius: 8px;
  overflow-x: auto;
  background: #1a1f28;
}
.mf-oc-table {
  width: 100%;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13px;
}
.mf-oc-table th,
.mf-oc-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid #3a4450;
  vertical-align: middle;
  word-break: break-word;
}
.mf-oc-table th {
  color: #868e96;
  font-weight: 500;
  background: #1e2530;
  position: sticky;
  top: 0;
}
.mf-oc-table th:nth-child(1), .mf-oc-table td:nth-child(1) { width: 16%; }
.mf-oc-table th:nth-child(2), .mf-oc-table td:nth-child(2),
.mf-oc-table th:nth-child(3), .mf-oc-table td:nth-child(3),
.mf-oc-table th:nth-child(4), .mf-oc-table td:nth-child(4),
.mf-oc-table th:nth-child(5), .mf-oc-table td:nth-child(5),
.mf-oc-table th:nth-child(6), .mf-oc-table td:nth-child(6),
.mf-oc-table th:nth-child(7), .mf-oc-table td:nth-child(7),
.mf-oc-table th:nth-child(8), .mf-oc-table td:nth-child(8) { width: 8%; }
.mf-oc-table th:nth-child(9), .mf-oc-table td:nth-child(9) {
  width: 28%;
  text-align: right;
  white-space: nowrap;
}
.mf-oc-table tbody tr:last-child td { border-bottom: none; }
.mf-oc-name { font-weight: 700; color: #f1f3f5; }
.mf-oc-ops {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 6px;
  width: 100%;
}
.mf-oc-btn {
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid #3a4450;
  background: #2c3440;
  color: #e9ecef;
  white-space: nowrap;
}
.mf-oc-btn.sm { padding: 6px 10px; font-size: 12px; }
.mf-oc-btn.ghost { background: #252b36; }
.mf-oc-btn.primary {
  background: #228be6;
  border-color: #228be6;
  color: #fff;
}
.mf-oc-btn:hover { filter: brightness(1.08); }
.mf-oc-msg { margin-top: 10px; font-size: 13px; color: #69db7c; }
.mf-oc-msg.is-err { color: #ffa8a8; }
.mf-oc-modal {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 40;
}
.mf-oc-modal[hidden] { display: none !important; }
.mf-oc-modal-card {
  width: min(480px, 94%);
  max-height: 90%;
  overflow: auto;
  background: #1e2530;
  border: 1px solid #3a4450;
  border-radius: 10px;
  padding: 16px;
  display: grid;
  gap: 10px;
}
.mf-oc-modal-title { font-size: 16px; font-weight: 700; }
.mf-oc-field {
  display: grid;
  gap: 6px;
  font-size: 12px;
  color: #adb5bd;
}
.mf-oc-field input {
  height: 34px;
  border-radius: 6px;
  border: 1px solid #3a4450;
  background: #151820;
  color: #e9ecef;
  padding: 0 10px;
}
.mf-oc-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}
.mf-oc-modal-err { color: #ffa8a8; font-size: 12px; }

/* OC layout match flight sheet ocLay085530 */
.mf-oc-band,
.mf-oc-band.f-band-mid,
.mf-oc-page {
  background: #3A444E !important;
  background-color: #3A444E !important;
}
.mf-oc-band {
  position: relative !important;
  overflow: visible !important;
}
.mf-oc-page {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 16px clamp(12px, 1.2vw, 18px) 24px !important;
  padding-right: calc(clamp(12px, 1.2vw, 18px) + var(--fr-gutter, 52px)) !important;
  min-height: 420px !important;
  color: #e9ecef !important;
}
.mf-oc-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 16px !important;
}
.mf-oc-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #f8f9fa !important;
  line-height: 1.2 !important;
}
.mf-oc-desc {
  margin-top: 6px !important;
  font-size: 13px !important;
  color: #868e96 !important;
  max-width: 720px !important;
  line-height: 1.45 !important;
}
.mf-oc-actions {
  display: flex !important;
  gap: 10px !important;
  flex: 0 0 auto !important;
  flex-wrap: wrap !important;
}
.mf-oc-section-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  margin-bottom: 10px !important;
  color: #f1f3f5 !important;
}
.mf-oc-table-wrap {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  box-sizing: border-box !important;
  border: 1px solid #2c3440 !important;
  border-radius: 8px !important;
  overflow-x: auto !important;
  background: #1a1f28 !important;
}
.mf-oc-table {
  width: 100% !important;
  min-width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
  font-size: 13px !important;
}
.mf-oc-table th,
.mf-oc-table td {
  padding: 12px 10px !important;
  text-align: left !important;
  vertical-align: middle !important;
  border-bottom: 1px solid #3a4450 !important;
  border-left: none !important;
  border-right: none !important;
  word-break: break-word !important;
  overflow: visible !important;
}
.mf-oc-table thead th {
  color: #868e96 !important;
  font-weight: 500 !important;
  background: #1e2530 !important;
  position: sticky !important;
  top: 0 !important;
  border-bottom: 1px solid #4a5562 !important;
}
.mf-oc-table tbody tr:last-child td {
  border-bottom: none !important;
}
/* name + 7 numeric + ops — proportional like flight */
.mf-oc-table th:nth-child(1), .mf-oc-table td:nth-child(1) { width: 14% !important; }
.mf-oc-table th:nth-child(2), .mf-oc-table td:nth-child(2) { width: 9% !important; }
.mf-oc-table th:nth-child(3), .mf-oc-table td:nth-child(3) { width: 9% !important; }
.mf-oc-table th:nth-child(4), .mf-oc-table td:nth-child(4) { width: 9% !important; }
.mf-oc-table th:nth-child(5), .mf-oc-table td:nth-child(5) { width: 9% !important; }
.mf-oc-table th:nth-child(6), .mf-oc-table td:nth-child(6) { width: 8% !important; }
.mf-oc-table th:nth-child(7), .mf-oc-table td:nth-child(7) { width: 8% !important; }
.mf-oc-table th:nth-child(8), .mf-oc-table td:nth-child(8) { width: 7% !important; }
.mf-oc-table th:nth-child(9), .mf-oc-table td:nth-child(9) {
  width: 27% !important;
  text-align: right !important;
  white-space: nowrap !important;
  word-break: normal !important;
  padding-right: clamp(8px, 1vw, 14px) !important;
}
.mf-oc-name {
  font-weight: 700 !important;
  color: #f1f3f5 !important;
}
.mf-oc-ops {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: clamp(4px, 0.6vw, 8px) !important;
  width: 100% !important;
  margin-left: auto !important;
}
.mf-oc-btn {
  border-radius: 6px !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  cursor: pointer !important;
  border: 1px solid #3a4450 !important;
  background: #2c3440 !important;
  color: #e9ecef !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}
.mf-oc-btn.sm {
  padding: 6px 10px !important;
  font-size: 12px !important;
}
.mf-oc-btn.ghost { background: #252b36 !important; }
.mf-oc-btn.primary {
  background: #228be6 !important;
  border-color: #228be6 !important;
  color: #fff !important;
}
.mf-oc-btn:hover { filter: brightness(1.08); }
.mf-oc-msg {
  margin-top: 10px !important;
  font-size: 13px !important;
  color: #69db7c !important;
}
.mf-oc-msg.is-err { color: #ffa8a8 !important; }

/* drivers F page — same layout mode as flight drvView090010 */
.mf-drv-band[hidden],
.mf-drv-band.is-mf-view-hidden { display: none !important; }
.mf-drv-band,
.mf-drv-band.f-band-mid,
.mf-drv-page {
  background: #3A444E !important;
  background-color: #3A444E !important;
}
.mf-drv-band { position: relative !important; overflow: visible !important; }
.mf-drv-page {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 16px clamp(12px, 1.2vw, 18px) 24px !important;
  padding-right: calc(clamp(12px, 1.2vw, 18px) + var(--fr-gutter, 52px)) !important;
  min-height: 420px !important;
  color: #e9ecef !important;
}
.mf-drv-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 16px !important;
}
.mf-drv-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #f8f9fa !important;
}
.mf-drv-desc {
  margin-top: 6px !important;
  font-size: 13px !important;
  color: #868e96 !important;
  max-width: 720px !important;
  line-height: 1.45 !important;
}
.mf-drv-actions {
  display: flex !important;
  gap: 10px !important;
  flex: 0 0 auto !important;
  flex-wrap: wrap !important;
}
.mf-drv-section-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  margin-bottom: 8px !important;
  color: #f1f3f5 !important;
}
.mf-drv-sync {
  min-height: 18px;
  margin-bottom: 10px;
  font-size: 12px;
  color: #868e96;
}
.mf-drv-sync.is-run { color: #74c0fc; }
.mf-drv-sync.is-err { color: #ffa8a8; }
.mf-drv-table-wrap {
  width: 100% !important;
  box-sizing: border-box !important;
  border: 1px solid #2c3440 !important;
  border-radius: 8px !important;
  overflow-x: auto !important;
  background: #1a1f28 !important;
}
.mf-drv-table {
  width: 100% !important;
  min-width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
  font-size: 13px !important;
}
.mf-drv-table th,
.mf-drv-table td {
  padding: 12px 10px !important;
  text-align: left !important;
  vertical-align: middle !important;
  border-bottom: 1px solid #3a4450 !important;
  word-break: break-word !important;
}
.mf-drv-table thead th {
  color: #868e96 !important;
  font-weight: 500 !important;
  background: #1e2530 !important;
  border-bottom: 1px solid #4a5562 !important;
}
.mf-drv-table tbody tr:last-child td { border-bottom: none !important; }
.mf-drv-table th:nth-child(1), .mf-drv-table td:nth-child(1) { width: 16% !important; }
.mf-drv-table th:nth-child(2), .mf-drv-table td:nth-child(2) { width: 16% !important; }
.mf-drv-table th:nth-child(3), .mf-drv-table td:nth-child(3) { width: 28% !important; }
.mf-drv-table th:nth-child(4), .mf-drv-table td:nth-child(4) { width: 12% !important; }
.mf-drv-table th:nth-child(5), .mf-drv-table td:nth-child(5) {
  width: 28% !important;
  text-align: right !important;
  white-space: nowrap !important;
}
.mf-drv-ver { font-weight: 700 !important; color: #f1f3f5 !important; }
.mf-drv-note { color: #adb5bd !important; }
.mf-drv-series {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: #252b36;
  color: #dee2e6;
  font-size: 12px;
}
.mf-drv-ops {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  width: 100% !important;
}
.mf-drv-btn {
  border-radius: 6px !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  cursor: pointer !important;
  border: 1px solid #3a4450 !important;
  background: #2c3440 !important;
  color: #e9ecef !important;
  white-space: nowrap !important;
}
.mf-drv-btn.sm { padding: 6px 10px !important; font-size: 12px !important; }
.mf-drv-btn.ghost { background: #252b36 !important; }
.mf-drv-btn.primary {
  background: #228be6 !important;
  border-color: #228be6 !important;
  color: #fff !important;
}
.mf-drv-btn:hover { filter: brightness(1.08); }
.mf-drv-msg { margin-top: 10px !important; font-size: 13px !important; color: #69db7c !important; }
.mf-drv-msg.is-err { color: #ffa8a8 !important; }

/* drivers match original mine-fleet UI drvMatch090230 */
.mf-drv-form {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-end !important;
  gap: 12px 16px !important;
  margin-bottom: 16px !important;
}
.mf-drv-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  font-size: 13px !important;
  color: #adb5bd !important;
}
.mf-drv-field-url { flex: 1 1 360px !important; min-width: 260px !important; }
.mf-drv-input,
.mf-drv-select {
  height: 36px !important;
  border-radius: 6px !important;
  border: 1px solid #3a4450 !important;
  background: #1a1f28 !important;
  color: #e9ecef !important;
  padding: 0 10px !important;
  font-size: 13px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 140px !important;
}
.mf-drv-input:focus,
.mf-drv-select:focus {
  outline: none !important;
  border-color: #4dabf7 !important;
}
.mf-drv-table th:nth-child(1), .mf-drv-table td:nth-child(1) { width: 14% !important; }
.mf-drv-table th:nth-child(2), .mf-drv-table td:nth-child(2) { width: 18% !important; }
.mf-drv-table th:nth-child(3), .mf-drv-table td:nth-child(3) { width: 10% !important; }
.mf-drv-table th:nth-child(4), .mf-drv-table td:nth-child(4) {
  width: 58% !important;
  text-align: right !important;
  white-space: nowrap !important;
}
.mf-drv-series {
  display: inline-block !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  background: rgba(64, 192, 87, 0.18) !important;
  color: #69db7c !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
.mf-drv-series.rtx40 {
  background: rgba(34, 139, 230, 0.18) !important;
  color: #74c0fc !important;
}
.mf-drv-local { color: #ced4da !important; }
.mf-drv-ops-cell { text-align: right !important; }
.mf-drv-progress {
  position: relative !important;
  margin-top: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: #2c3440 !important;
  overflow: hidden !important;
}
.mf-drv-progress > i {
  display: block !important;
  height: 100% !important;
  background: #228be6 !important;
}
.mf-drv-progress > span {
  position: absolute !important;
  right: 6px !important;
  top: -16px !important;
  font-size: 11px !important;
  color: #74c0fc !important;
}

/* settings F page setView090540 */
.mf-set-band[hidden],
.mf-set-band.is-mf-view-hidden { display: none !important; }
.mf-set-band,
.mf-set-band.f-band-mid,
.mf-set-page {
  background: #3A444E !important;
  background-color: #3A444E !important;
}
.mf-set-band { position: relative !important; overflow: visible !important; }
.mf-set-page {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 16px clamp(12px, 1.2vw, 18px) 24px !important;
  padding-right: calc(clamp(12px, 1.2vw, 18px) + var(--fr-gutter, 52px)) !important;
  min-height: 420px !important;
  color: #e9ecef !important;
}
.mf-set-head { margin-bottom: 16px !important; }
.mf-set-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #f8f9fa !important;
}
.mf-set-form {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-end !important;
  gap: 12px 14px !important;
  margin-bottom: 16px !important;
}
.mf-set-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  font-size: 13px !important;
  color: #adb5bd !important;
  min-width: 220px !important;
}
.mf-set-select {
  height: 36px !important;
  min-width: 240px !important;
  border-radius: 6px !important;
  border: 1px solid #3a4450 !important;
  background: #1a1f28 !important;
  color: #e9ecef !important;
  padding: 0 10px !important;
  font-size: 13px !important;
}
.mf-set-select:disabled {
  opacity: 0.85 !important;
  cursor: not-allowed !important;
}
.mf-set-btn {
  border-radius: 6px !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  cursor: pointer !important;
  border: 1px solid #3a4450 !important;
  background: #2c3440 !important;
  color: #e9ecef !important;
  white-space: nowrap !important;
  height: 36px !important;
}
.mf-set-btn.primary {
  background: #228be6 !important;
  border-color: #228be6 !important;
  color: #fff !important;
}
.mf-set-btn:hover { filter: brightness(1.08); }
.mf-set-hint {
  font-size: 13px !important;
  color: #adb5bd !important;
  align-self: center !important;
}
.mf-set-hint code {
  color: #74c0fc !important;
  background: transparent !important;
  font-size: 13px !important;
}
.mf-set-panel { max-width: 920px !important; }
.mf-set-box {
  margin: 0 0 12px !important;
  padding: 14px 16px !important;
  border-radius: 8px !important;
  background: #151a22 !important;
  border: 1px solid #2c3440 !important;
  color: #69db7c !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  white-space: pre-wrap !important;
  word-break: break-all !important;
  min-height: 52px !important;
}
.mf-set-note {
  margin: 12px 0 0 !important;
  font-size: 13px !important;
  color: #868e96 !important;
  line-height: 1.55 !important;
  max-width: 860px !important;
}
.mf-set-msg {
  margin-top: 12px !important;
  font-size: 13px !important;
  color: #69db7c !important;
}
.mf-set-msg.is-err { color: #ffa8a8 !important; }

/* account name display setAcct091140 */
.mf-set-account {
  display: flex !important;
  align-items: center !important;
  height: 36px !important;
  min-width: 240px !important;
  border-radius: 6px !important;
  border: 1px solid #3a4450 !important;
  background: #1a1f28 !important;
  color: #f8f9fa !important;
  padding: 0 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-sizing: border-box !important;
}

/* logo nudge down a bit logoDown093615 */
.navbar-custom .top-logo,
.navbar-custom.topbar .top-logo,
a.logo.top-logo {
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
  overflow: visible !important;
  line-height: 0 !important;
}
.navbar-custom .logo-img,
body.sidebar-sm .navbar-custom .logo-img,
.navbar-custom.topbar .logo-img,
.top-logo .logo-img {
  height: 58px !important;
  width: auto !important;
  max-width: 148px !important;
  display: block !important;
  object-fit: contain !important;
  object-position: left center !important;
  position: relative !important;
  top: 4px !important;
  transform: translateY(4px) !important;
  margin: 0 !important;
}



/* FR float frame: leave space from right edge frGap095830 */
.float-side.float-side-right,
aside.float-side-right[data-zone="FR"] {
  right: 12px !important;
  left: auto !important;
}

/* FR icons flat white 70% frFlatWhite101120 */
.float-side .fr-cell.is-interactive.fr-cell-rocket,
.float-side .fr-cell.is-interactive.fr-cell-reboot,
.float-side .fr-cell.is-interactive.fr-cell-power,
.float-side .fr-cell.is-interactive.fr-cell-refresh,
.float-side .fr-cell.is-interactive.fr-cell-update,
.float-side .fr-cell.is-interactive.fr-cell-clearlog,
.float-side .fr-cell.is-interactive.fr-cell-delrig,
.float-side .fr-cell.is-interactive.fr-cell-fan {
  color: rgba(255, 255, 255, 0.7) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  cursor: pointer !important;
  font-size: 0 !important;
}
.float-side .fr-cell.is-interactive.fr-cell-rocket:hover,
.float-side .fr-cell.is-interactive.fr-cell-reboot:hover,
.float-side .fr-cell.is-interactive.fr-cell-power:hover,
.float-side .fr-cell.is-interactive.fr-cell-refresh:hover,
.float-side .fr-cell.is-interactive.fr-cell-update:hover,
.float-side .fr-cell.is-interactive.fr-cell-clearlog:hover,
.float-side .fr-cell.is-interactive.fr-cell-delrig:hover,
.float-side .fr-cell.is-interactive.fr-cell-fan:hover {
  color: rgba(255, 255, 255, 0.92) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 0 !important;
}
.float-side .fr-cell .fr-rocket-ico,
.float-side .fr-cell .fr-reboot-ico,
.float-side .fr-cell .fr-power-ico,
.float-side .fr-cell .fr-refresh-ico,
.float-side .fr-cell .fr-update-ico,
.float-side .fr-cell .fr-clearlog-ico,
.float-side .fr-cell .fr-delrig-ico,
.float-side .fr-cell .fr-fan-ico {
  width: 36px !important;
  height: 36px !important;
  display: block !important;
  filter: none !important;
  opacity: 1 !important;
}
html.mf-hide-grid .float-side .fr-cell.is-interactive.fr-cell-rocket,
html.mf-show-grid .float-side .fr-cell.is-interactive.fr-cell-rocket,
html.mf-hide-grid .float-side .fr-cell.is-interactive.fr-cell-reboot,
html.mf-show-grid .float-side .fr-cell.is-interactive.fr-cell-reboot,
html.mf-hide-grid .float-side .fr-cell.is-interactive.fr-cell-power,
html.mf-show-grid .float-side .fr-cell.is-interactive.fr-cell-power,
html.mf-hide-grid .float-side .fr-cell.is-interactive.fr-cell-refresh,
html.mf-show-grid .float-side .fr-cell.is-interactive.fr-cell-refresh,
html.mf-hide-grid .float-side .fr-cell.is-interactive.fr-cell-update,
html.mf-show-grid .float-side .fr-cell.is-interactive.fr-cell-update,
html.mf-hide-grid .float-side .fr-cell.is-interactive.fr-cell-clearlog,
html.mf-show-grid .float-side .fr-cell.is-interactive.fr-cell-clearlog,
html.mf-hide-grid .float-side .fr-cell.is-interactive.fr-cell-delrig,
html.mf-show-grid .float-side .fr-cell.is-interactive.fr-cell-delrig,
.float-side .fr-cell.is-interactive.fr-cell-fan {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  border: 0 !important;
}

/* FR8 autofan icon fr8Fan101320 */
.float-side .fr-cell.is-interactive.fr-cell-fan {
  color: rgba(255, 255, 255, 0.7) !important;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer !important;
  font-size: 0 !important;
}
.float-side .fr-cell.is-interactive.fr-cell-fan:hover {
  color: rgba(255, 255, 255, 0.92) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}
.float-side .fr-cell .fr-fan-ico {
  width: 36px !important;
  height: 36px !important;
  display: block !important;
  filter: none !important;
}
html.mf-hide-grid .float-side .fr-cell.is-interactive.fr-cell-fan,
html.mf-show-grid .float-side .fr-cell.is-interactive.fr-cell-fan {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  border: 0 !important;
}

/* FR16 exit/logout icon fr16Exit101830 */
.float-side .fr-cell.is-interactive.fr-cell-exit {
  color: rgba(255, 255, 255, 0.7) !important;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer !important;
  font-size: 0 !important;
}
.float-side .fr-cell.is-interactive.fr-cell-exit:hover {
  color: rgba(255, 255, 255, 0.92) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}
.float-side .fr-cell .fr-exit-ico {
  width: 36px !important;
  height: 36px !important;
  display: block !important;
  filter: none !important;
}
html.mf-hide-grid .float-side .fr-cell.is-interactive.fr-cell-exit,
html.mf-show-grid .float-side .fr-cell.is-interactive.fr-cell-exit {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  border: 0 !important;
}

/* FR flight modal 528x268 frFlightModal102630 */
.mf-fr-modal[hidden] { display: none !important; }
.mf-fr-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10050 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.mf-fr-modal-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.45) !important;
}
.mf-fr-modal-box {
  position: relative !important;
  z-index: 1 !important;
  width: 528px !important;
  height: 268px !important;
  max-width: calc(100vw - 24px) !important;
  max-height: calc(100vh - 24px) !important;
  box-sizing: border-box !important;
  background: #2E3640 !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: 8px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45) !important;
  overflow: hidden !important;
}
.mf-fr-modal-close {
  position: absolute !important;
  top: 6px !important;
  right: 8px !important;
  width: 28px !important;
  height: 28px !important;
  border: 0 !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 20px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  z-index: 2 !important;
}
.mf-fr-modal-close:hover {
  color: #fff !important;
}
.mf-fr-modal-body {
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
  padding: 16px 18px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  overflow: auto !important;
}

/* FR flight modal panel bind frModalBind102930 */
.mf-fr-flight-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  justify-content: center;
  box-sizing: border-box;
  padding: 8px 8px 8px 0;
}
.mf-fr-flight-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mf-fr-select {
  flex: 1 1 auto;
  min-width: 0;
  height: 36px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.28);
  background: #1a1f28;
  color: rgba(255,255,255,.85);
  padding: 0 10px;
  font-size: 13px;
  box-sizing: border-box;
}
.mf-fr-select:focus {
  outline: none;
  border-color: rgba(255,255,255,.45);
}
.mf-fr-confirm {
  flex: 0 0 auto;
  height: 36px;
  min-width: 64px;
  padding: 0 14px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.28);
  background: #3a4450;
  color: rgba(255,255,255,.9);
  font-size: 13px;
  cursor: pointer;
}
.mf-fr-confirm:hover {
  filter: brightness(1.08);
}
.mf-fr-confirm:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.mf-fr-flight-msg {
  min-height: 18px;
  font-size: 12px;
  color: #69db7c;
}
.mf-fr-flight-msg.is-err {
  color: #ffa8a8;
}


.mf-fr-flight-row-all {
  justify-content: flex-end !important;
  margin-top: 4px !important;
}
.mf-fr-confirm-all {
  min-width: 96px !important;
  background: #228be6 !important;
  border-color: #228be6 !important;
  color: #fff !important;
}

/* remote icon boot-wait states (from 20003 rig-remote) ffRemoteBoot105230 */
.ffn-cell[data-i="15"] .ffn-remote.is-on,
.ffn-remote.is-on {
  color: #69db7c !important;
  opacity: 1 !important;
}
.ffn-cell[data-i="15"] .ffn-remote.is-off,
.ffn-remote.is-off {
  color: #868e96 !important;
  opacity: 0.7 !important;
}
.ffn-cell[data-i="15"] .ffn-remote.is-wait,
.ffn-remote.is-wait {
  color: #fcc419 !important;
  opacity: 1 !important;
}
.ffn-cell[data-i="15"] .ffn-remote.is-err,
.ffn-remote.is-err {
  color: #ff6b6b !important;
  opacity: 1 !important;
}







/* brand-gone-131200 */
.brand-cluster,
.navbar-custom .top-logo,
.navbar-custom.topbar .top-logo,
a.logo.top-logo,
.brand-sep,
.os-badge {
  display: none !important;
}




/* mf-nav-brand-131800: same horizontal start as homepage topbar (padding-left 20.4%) */
.mf-nav-brand{
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  flex: 0 0 auto !important;
  margin-left: 20.4% !important;
  margin-right: 0 !important;
  text-decoration: none !important;
  line-height: 0 !important;
  height: 100% !important;
  position: relative !important;
  z-index: 8 !important;
}
.mf-nav-brand-logo{
  display: block !important;
  height: 44px !important;
  width: auto !important;
  max-width: 180px !important;
  object-fit: contain !important;
  object-position: left center !important;
}
.mf-nav-brand-mos{
  display: inline-flex !important;
  align-items: center !important;
  padding: 8px 12px !important;
  color: rgba(226, 232, 240, 0.72) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  user-select: none !important;
  border-radius: 6px !important;
}
.mf-nav-brand:hover .mf-nav-brand-mos{
  color: #ffffff !important;
}


/* d3-tool-checks-132400 */
.d3-tool-checks.is-on-cell-10 {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  z-index: 20 !important;
  pointer-events: auto !important;
}
.d3-tool-checks .d3-custom-layout {
  margin-left: 0 !important;
  position: relative !important;
  left: auto !important;
  width: auto !important;
  min-width: 0 !important;
}


/* ffn-status-wrap-os */
.ffn-cell-status .ffn-status-wrap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
}
.ffn-cell-status .ffn-os {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 52px !important;
  height: 16px !important;
  padding: 0 5px !important;
  border-radius: 4px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  line-height: 1 !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  box-sizing: border-box !important;
}
.ffn-cell-status .ffn-os-lin {
  color: #69db7c !important;
  background: rgba(105, 219, 124, 0.12) !important;
  border-color: rgba(105, 219, 124, 0.35) !important;
}
.ffn-cell-status .ffn-os-win {
  color: #74c0fc !important;
  background: rgba(116, 192, 252, 0.12) !important;
  border-color: rgba(116, 192, 252, 0.35) !important;
}
.ffn-cell-status .ffn-os-unk {
  color: #adb5bd !important;
  background: rgba(173, 181, 189, 0.10) !important;
}

/* miner software warehouse on flight page */
.mf-mwh-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.mf-mwh-title {
  font-size: 18px;
  font-weight: 700;
  color: #f8f9fa;
}
.mf-mwh-desc {
  margin-top: 6px;
  font-size: 13px;
  color: #868e96;
  max-width: 720px;
  line-height: 1.45;
}
.mf-mwh-pull {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}
.mf-mwh-date {
  color: #9aa0a6;
  font-size: 12px;
  white-space: nowrap;
}
.mf-mwh-tidy {
  margin: 12px 0 16px;
  max-width: 860px;
  display: grid;
  gap: 10px;
}
.mf-mwh-url-label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  color: #c5cdd8;
}
.mf-mwh-url {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #2e3138;
  background: #1a1d24;
  color: #e9ecef;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
}
.mf-mwh-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
  width: 100%;
  margin-bottom: 12px;
}
.mf-mwh-empty {
  grid-column: 1 / -1;
  padding: 18px 12px;
  color: #868e96;
  font-size: 13px;
  border: 1px dashed #2c3038;
  border-radius: 8px;
}
.mf-mwh-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid #2c3038;
  border-radius: 8px;
  background: #1c1e24;
}
.mf-mwh-card-title {
  font-weight: 700;
  font-size: 13px;
  color: #e8eaef;
  line-height: 1.3;
}
.mf-mwh-coin {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 650;
  color: #74c0fc;
  background: rgba(34, 139, 230, 0.16);
}
.mf-mwh-vers { display: flex; flex-direction: column; gap: 6px; }
.mf-mwh-ver {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 4px 6px 4px 8px;
  border-radius: 6px;
  background: rgba(0,0,0,.18);
}
.mf-mwh-ver.is-empty .mf-mwh-ver-name { color: #868e96; }
.mf-mwh-ver-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: #ced4da;
}
.mf-mwh-ver-size {
  flex: 0 0 auto;
  min-width: 2.6em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: #8b9bb4;
  font-size: 12px;
}