/* ============================
  nvr HERO – TAG 樣式優化
============================ */
.its-hero .hero-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:20px;
}

.its-hero .hero-tag{
  border-radius:999px;
  border:1px solid rgba(148,163,184,.45);
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  font-size:.82rem;
  padding:8px 14px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:#111827;
  cursor:pointer;
  transition:
    background .18s ease-out,
    box-shadow .18s ease-out,
    border-color .18s ease-out,
    transform .12s ease-out;
}

.its-hero .hero-tag i{
  font-size:.85rem;
  color:#4b5563;
}

.its-hero .hero-tag:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 40px rgba(15,23,42,.10);
}

.its-hero .hero-tag.active{
  border-color:rgba(129,140,248,.9);
  background:linear-gradient(
    135deg,
    rgba(239,246,255,.96),
    rgba(219,234,254,.96)
  );
  box-shadow:
    0 0 0 1px rgba(129,140,248,.7),
    0 18px 46px rgba(79,70,229,.22);
  color:#111827c4;
}

.its-hero .hero-tag.active i{
  color:#4f46e5;
}

//* =======================================================
   QUICK PATCH — vidawareCanvas 容器
======================================================= */

/* 1) canvas 外層玻璃容器 */
.vidaware-canvas-wrap{
  background:
    radial-gradient(420px 320px at 30% 28%, rgba(170,210,255,.14), transparent 68%),
    radial-gradient(720px 520px at 78% 72%, rgba(0,0,0,.45), transparent 60%),
    linear-gradient(135deg,
      rgba(12,16,34,.94) 0%,
      rgba(27,28,68,.86) 52%,
      rgba(8,10,18,.96) 100%
    ) !important;  
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow:
    0 28px 90px rgba(0,0,0,.40),
    inset 0 0 0 1px rgba(255,255,255,.05) !important;
  backdrop-filter: blur(18px) saturate(1.10) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.10) !important;
  overflow:hidden;
}

/* 2) 內部再暗色 vignette（ */
.vidaware-canvas-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  z-index:1;

  background:
    /* 中心做一點點暗，拉回對比 */
    radial-gradient(520px 420px at 50% 50%, rgba(0, 0, 0, 0.18), transparent 70%),
    /* 邊緣 vignette（右側更深） */
    radial-gradient(900px 680px at 80% 50%, rgba(0,0,0,.32), transparent 62%);
  opacity:.92;
}

/* 3) canvas本體在最上層 */
.vidaware-canvas-wrap #vidawareCanvas{
  position:relative;
  z-index:2;
}


/* 可選：線條更清楚 */
.vidaware-canvas-wrap.is-crisp #vidawareCanvas{
  filter: contrast(1.18) brightness(1.06) saturate(1.06);
}

/* 4) 讓線條更清楚：微提亮 */
.vidaware-canvas-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  z-index:3;
  /* 超淡的掃光感 */
  background: linear-gradient(120deg,
    rgba(255,255,255,0) 38%,
    rgba(170,210,255,.05) 50%,
    rgba(255,255,255,0) 64%
  );
  mix-blend-mode: screen;
  opacity:.28;
}

/* 4) 如果 canvas-title（ */
.vidaware-canvas-wrap 
.canvas-title{
  background: linear-gradient(135deg, rgba(89, 36, 175, 0.726), rgba(14, 20, 36, 0.753)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 16px 46px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255,255,255,.04) !important;
}

/* 5) 圓角更一致（*/
.vidaware-canvas-wrap,
.vidaware-canvas-wrap::before,
.vidaware-canvas-wrap::after{
  border-radius:32px;
}

#vidawareCanvas{
  width:100%;
  height:100%;
  display:block; 
  background: 
  radial-gradient(circle at 35% 25%, rgb(39, 41, 139), 
  rgb(138, 84, 238) 78%, rgba(9, 6, 170, 0.836)) !important;
  border-radius: 28px;
}

/* ===========================
   canvas-title
=========================== */
.canvas-title{
  position:absolute;

  /*  關鍵：緊貼動畫底 */
  right:22px;
  bottom:8px;          
  left:auto;

  max-width:340px;     
  width:auto;

  padding:8px 14px;   
  border-radius:12px;

  background:
    linear-gradient(
      135deg,
      rgba(15,23,42,.98),
      rgba(30,41,59,.98)
    );
  color:#e5e7eb;

  display:flex;
  align-items:center;
  gap:10px;

  font-size:12px;
  pointer-events:none;

  box-shadow:
    0 10px 26px rgba(15,23,42,.45), */
    inset 0 0 0 1px rgba(255,255,255,.05);

  opacity:0;
  transform:translateY(6px); 
  transition:
    opacity .3s ease,
    transform .3s ease;
}

.canvas-title.show{
  opacity:1;
  transform:translateY(0);
}

/* 左側狀態條 */
.canvas-title::before{
  content:"";
  width:3px;          
  height:100%;
  border-radius:3px;
  background:linear-gradient(
    180deg,
    #6366f1,
    #3b82f6
  );
  box-shadow:0 0 10px rgba(99,102,241,.6);
}

/* 標題 */
.canvas-title h4{
  margin:0;
  font-size:11.5px;   
  font-weight:700;
  white-space:nowrap;
  color:#f9fafb;
}

/* 副標：緊湊 */
.canvas-title p{
  margin:0;
  font-size:11px;
  opacity:.75;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:200px;
}

/* Tag 切換時*/
.vidaware-canvas-wrap.dbs-phase-switch{
  animation:dbsPhaseFlash .38s ease-out;
}
@keyframes dbsPhaseFlash{
  0%{
    box-shadow:0 26px 80px rgba(15,23,42,.45),
               0 0 0 0 rgba(129,140,248,0.0);
  }
  50%{
    box-shadow:0 26px 80px rgba(15,23,42,.45),
               0 0 0 8px rgba(129,140,248,0.45);
  }
  100%{
    box-shadow:0 26px 80px rgba(15,23,42,.45),
               0 0 0 0 rgba(129,140,248,0.0);
  }
}

/* ===========================
   DBS Pillars – Layout
=========================== */
/* 區塊背景 + 外框 */
.dbs-pillars-section{
  padding: 96px 0 120px;
  background: radial-gradient(circle at top, #eef2ff 0, #f9fbff 40%, #f3f4ff 100%);
}

.dbs-pillars-shell{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}

/* 上方小標「即時事件 轉化模擬器」 */
.dbs-pillars-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#9ca3af;
  margin-bottom:10px;
}

.dbs-pillars-eyebrow-ico{
  font-size:11px;
}

/* 主標 */
.dbs-pillars-title{
  margin:0;
  font-size:32px;
  line-height:1.3;
  font-weight:800;
  color:#0f172a;
}

@media (min-width: 1024px){
  .dbs-pillars-title{
    font-size:36px;
  }
}

/* 高亮 span */
.dbs-pillars-title span{
  color:#2563eb;
}

/* 副標 */
.dbs-pillars-sub{
  margin-top:10px;
  margin-bottom:40px;
  font-size:14px;
  line-height:1.7;
  color:#6b7280;
}

/* 卡片排版 */
.dbs-pillars-grid{
  display:grid;
  gap:26px;
}

@media (min-width: 960px){
  .dbs-pillars-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
/* 外層 article */
.dbs-pillars-grid > article.dbs-pillars-card{
  position:relative;
  padding-top:0px;         
}

/* ===========================
   Cards – iOS glass look
=========================== */
.dbs-pillars-card{
  position: relative;
  flex: 1 1 0;
  min-width: 260px;
  max-width: 360px;
  padding: 26px 24px 24px;
  border-radius: 22px;
  background: linear-gradient(145deg,
    rgba(255,255,255,0.92),
    rgba(241,245,255,0.92));
  border: 1px solid rgba(148,163,184,0.35);
  box-shadow:
    0 24px 55px rgba(15,23,42,0.12),
    0 0 0 1px rgba(255,255,255,0.7) inset;
  backdrop-filter: blur(22px);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition:
    transform .38s cubic-bezier(.19,1,.22,1),
    box-shadow .32s ease,
    border-color .32s ease,
    background .32s ease;
}

/* Hover / active depth */
.dbs-pillars-card:hover{
  transform: translateY(-6px) translateZ(0);
  box-shadow:
    0 30px 80px rgba(15,23,42,0.16),
    0 0 0 1px rgba(129,140,248,0.6) inset;
}

.dbs-pillars-card.is-active{
  transform: translateY(-8px);
  border-color: rgba(79,70,229,0.9);
  box-shadow:
    0 34px 90px rgba(79,70,229,0.30),
    0 0 0 1px rgba(255,255,255,0.85) inset;
}

/* Tag bubble  */
.dbs-pillars-tag{
  position:absolute;
  top: 38px;               
  right: 22px;            
  transform:none;         /*  不要再往上拉 */
  z-index:5;               /* 關鍵：高於內層卡片 */
  max-width:200px;
  padding:8px 18px;
  border-radius:50px;
  font-size:12px;
  line-height:1.5;
  color:#f9fafb;
  text-align:left;
  background:linear-gradient(135deg,#4f46e5,#3b82f6);
  box-shadow:0 18px 35px rgba(37,99,235,.45);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}

/* 只有啟用的卡片才顯示標籤 */
.dbs-pillars-card.is-active .dbs-pillars-tag{
  opacity:1;
  transform:translateY(-72%);
}

/* 內層真正的卡片外觀 */
.dbs-pillars-card-inner{
  position:relative;
  z-index:1;
  border-radius:26px;
  padding:26px 26px 26px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(24px);
  border:1px solid rgba(148,163,184,.28);
  box-shadow:
    0 18px 40px rgba(15,23,42,.16),
    0 0 0 1px rgba(255,255,255,.8);
  text-align:left;
  transition:
    transform .35s cubic-bezier(.19,1,.22,1),
    box-shadow .3s ease,
    border-color .3s ease;
}

/* hover / active：加強光暈 */
.dbs-pillars-card-inner:hover{
  transform:translateY(-4px);
  box-shadow:0 26px 60px rgba(15,23,42,.24);
}

.dbs-pillars-card.is-active .dbs-pillars-card-inner{
  transform:translateY(-6px);
  border-color:rgba(129,140,248,.9);
  box-shadow:
    0 32px 80px rgba(37,99,235,.32),
    0 0 0 1px rgba(129,140,248,.85);
}

/* Card content */
.dbs-pillars-card-title{
  margin: 0px 0 10px;
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
}

.dbs-pillars-card-text{
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: #4b5563;
}

/* ===========================
   Minimal line icons 
=========================== */
/* icon 圓角＋Font Awesome */
.dbs-pillars-icon{
  width:48px;
  height:48px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:18px;
  background:radial-gradient(circle at 0 0,#e0edff 0,#e5ecff 40%,#dbeafe 100%);
  box-shadow:0 10px 25px rgba(15,23,42,.25);
}

.dbs-pillars-fa{
  font-size:20px;
  color:#2563eb;
}

/* 各卡片色彩 */
.dbs-pillars-fa--event{ color:#2563eb; }
.dbs-pillars-fa--multi{ color:#0ea5e9; }
.dbs-pillars-fa--decision{ color:#22c55e; }

/* Hover / Active：icon 微浮起 + 呼吸感 */
.dbs-pillars-card:hover .dbs-pillars-icon,
.dbs-pillars-card.dbs-pillars-card--active .dbs-pillars-icon{
  transform: translateY(-3px);
  box-shadow:
    0 18px 40px rgba(15,23,42,0.32),
    0 0 0 1px rgba(129,140,248,0.6);
  background:
    radial-gradient(circle at 30% 15%, rgba(255,255,255,1), rgba(241,245,249,0.78));
}

.dbs-pillars-card:hover .dbs-pillars-fa,
.dbs-pillars-card.dbs-pillars-card--active .dbs-pillars-fa{
  transform: scale(1.08);
  text-shadow: 0 6px 16px rgba(15,23,42,0.5);
}

/* Active 卡片再加一點呼吸動畫 */
.dbs-pillars-card.dbs-pillars-card--active .dbs-pillars-fa{
  animation: dbs-pillars-fa-pulse 1.8s ease-in-out infinite;
}

@keyframes dbs-pillars-fa-pulse{
  0%,100%{ transform: scale(1.08); }
  50%    { transform: scale(1.14); }
}

/* Event icon: 疊加方塊 */
.dbs-pillars-icon--event::before,
.dbs-pillars-icon--event::after{
  content:"";
  position:absolute;
  border-radius:6px;
  border:2px solid #e5e7eb;
}
.dbs-pillars-icon--event::before{
  width:14px;height:14px;
  top:9px;left:9px;
}
.dbs-pillars-icon--event::after{
  width:10px;height:10px;
  top:4px;left:16px;
}

/* Multi-source icon: 五點星 */
.dbs-pillars-icon--multi::before{
  content:"";
  position:absolute;
  top:50%;left:50%;
  width:4px;height:4px;
  margin:-2px;
  border-radius:999px;
  background:#e5e7eb;
  box-shadow:
    0 -10px 0 0 #e5e7eb,
    0 10px 0 0 #e5e7eb,
    -9px 4px 0 0 #e5e7eb,
    9px 4px 0 0 #e5e7eb;
}

/* Decision icon: 折線＋節點 */
.dbs-pillars-icon--decision::before,
.dbs-pillars-icon--decision::after{
  content:"";
  position:absolute;
}
.dbs-pillars-icon--decision::before{
  left:7px;bottom:9px;
  width:18px;height:12px;
  border-left:2px solid #e5e7eb;
  border-bottom:2px solid #e5e7eb;
  transform:skewX(-22deg);
}
.dbs-pillars-icon--decision::after{
  bottom:7px;left:6px;
  width:6px;height:6px;
  border-radius:999px;
  background:#e5e7eb;
  box-shadow: 10px -8px 0 0 #e5e7eb, 18px -14px 0 0 #e5e7eb;
}

/* ===========================
   RWD
=========================== */
@media (max-width: 960px){
  .dbs-pillars-grid{
    flex-direction: column;
    align-items: stretch;
  }
  .dbs-pillars-card{
    max-width:none;
  }
  .dbs-pillars-tag{
    max-width: 88%;
  }
}

/* =========================
   VWA MEM (scoped) vwamem-
========================= */
.vwamem-section{
  --vwamem-bg1:#3385f39c;
  --vwamem-bg2:#5658ffc2;

  --w:#ffffff;
  --glass: rgba(255,255,255,.12);
  --glass2: rgba(255,255,255,.16);
  --stroke: rgba(255,255,255,.18);
  --shadow: 0 22px 70px rgba(0,0,0,.22);

  --cyan: rgba(140,235,255,1);
  --violet: rgba(210,185,255,1);

  position:relative;
  overflow:hidden;
  padding: 56px 0;
  background:
    radial-gradient(1200px 680px at 20% 25%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(900px 560px at 82% 10%, rgba(0,0,0,.18), transparent 62%),
    linear-gradient(135deg, var(--vwamem-bg1), var(--vwamem-bg2));
}

.vwamem-section::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(circle at 18% 28%, rgba(255,255,255,.10), transparent 55%),
    radial-gradient(circle at 78% 62%, rgba(0,0,0,.12), transparent 55%);
  opacity:.55;
  pointer-events:none;
}

.vwamem-wrap{
  position:relative;
  z-index:2;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
  display:grid;
  grid-template-columns: minmax(0,1.15fr) minmax(0,1fr);
  gap: 34px;
  align-items:center;
}

/* LEFT */
.vwamem-left{ color: rgba(255,255,255,.96); }

.vwamem-pill{
  display:inline-flex;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 34px rgba(0,0,0,.14);
}

.vwamem-title{
  margin: 16px 0 10px;
  font-size: 44px;
  line-height: 1.12;
  font-weight: 900;
  letter-spacing: -.02em;
}

.vwamem-accent{
  background: linear-gradient(120deg, rgba(255,255,255,.96), rgba(140,235,255,.95), rgba(233,206,255,.96));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}

.vwamem-desc{
  max-width: 580px;
  font-size: 14.5px;
  line-height: 1.95;
  color: rgba(255,255,255,.88);
}

/* ctrl bar */
.vwamem-ctrlBar{
  margin-top: 14px;
  max-width: 620px;
  display:flex;
  gap: 14px;
  align-items:center;
  flex-wrap:wrap;
}

.vwamem-chips{
  display:flex;
  gap: 8px;
  padding: 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.10);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(12px);
}

.vwamem-chipBtn{
  border: 0;
  cursor:pointer;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing:.10em;
  color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  transition: transform .16s ease, background .18s ease, border-color .18s ease;
}
.vwamem-chipBtn:hover{ transform: translateY(-1px); }
.vwamem-chipBtn.is-active{
  background: linear-gradient(135deg, rgba(140,235,255,.22), rgba(255,255,255,.10));
  border-color: rgba(140,235,255,.55);
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
}

.vwamem-activity{
  flex: 1 1 280px;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.10);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(12px);
}

.vwamem-activityLabel{
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.76);
  white-space:nowrap;
}

.vwamem-range{
  width: 100%;
  accent-color: rgba(140,235,255,.95);
}

.vwamem-activityVal{
  min-width: 44px;
  text-align:right;
  font-size: 12px;
  font-weight: 900;
  color: rgba(255,255,255,.92);
}

/* cards list */
.vwamem-list{
  margin-top: 14px;
  max-width: 620px;
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.vwamem-card{
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  backdrop-filter: blur(14px);
  box-shadow: 0 16px 44px rgba(0,0,0,.16);
  border-radius: 18px;
  padding: 14px 14px;

  display:grid;
  grid-template-columns: 52px 1fr auto 22px;
  align-items:center;
  gap: 12px;

  cursor:pointer;
  text-align:left;
  transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
.vwamem-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 62px rgba(0,0,0,.20);
  border-color: rgba(255,255,255,.24);
}
.vwamem-card.is-active{
  border-color: rgba(140,235,255,.55);
  background: linear-gradient(135deg, rgba(140,235,255,.20), rgba(255,255,255,.07));
  box-shadow: 0 26px 72px rgba(0,0,0,.24);
}

.vwamem-ico{
  width: 46px; height: 46px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.vwamem-ico i{
  font-size: 18px;
  color: rgba(255,255,255,.94);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.18));
}

.vwamem-ct b{ display:block; font-size: 15px; }
.vwamem-ct small{
  display:block;
  margin-top: 2px;
  font-size: 12.5px;
  color: rgba(255,255,255,.80);
  line-height: 1.5;
}

.vwamem-tag{
  font-size: 12px;
  font-weight: 900;
  letter-spacing:.10em;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(10,14,34,.28);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.88);
}

.vwamem-go{
  width: 22px; height: 22px;
  display:grid; place-items:center;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.82);
  font-size: 18px;
}

/* focus bar */
.vwamem-focusBar{
  margin-top: 12px;
  max-width: 620px;
  border-radius: 18px;
  padding: 12px 14px 14px;
  background: rgba(0,0,0,.12);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(12px);
  position:relative;
}
.vwamem-focusLeft{
  display:flex;
  align-items:center;
  gap: 10px;
}
.vwamem-dot{
  width:10px; height:10px;
  border-radius:999px;
  background: rgba(140,235,255,.95);
  box-shadow: 0 0 18px rgba(140,235,255,.35);
}
.vwamem-focusLabel{
  font-size: 12px;
  letter-spacing:.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.vwamem-focusRight{
  position:absolute;
  right: 14px;
  top: 12px;
}
.vwamem-focusVal{
  font-size: 12.5px;
  font-weight: 900;
  color: rgba(255,255,255,.92);
}
.vwamem-focusHint{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(255,255,255,.72);
}

/* RIGHT orb */
.vwamem-right{
  display:flex;
  justify-content:center;
  align-items:center;
}

.vwamem-orb{
  position:relative;
  width: min(460px, 92vw);
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  display:grid;
  place-items:center;
  isolation:isolate;
  user-select:none;
  touch-action: none; /* allow drag */
}

.vwamem-ring{
  position:absolute; inset: 8px;
  border-radius:999px;
  border: 6px solid rgba(255,255,255,.28);
  box-shadow: 0 24px 90px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.20);
  pointer-events:none;
}
.vwamem-ring2{
  position:absolute; inset: 28px;
  border-radius:999px;
  border: 1px solid rgba(255,255,255,.22);
  pointer-events:none;
  opacity:.8;
}

.vwamem-glow{
  position:absolute; inset:-22px;
  border-radius:999px;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.16), transparent 55%),
    radial-gradient(circle at 60% 75%, rgba(140,235,255,.18), transparent 58%),
    radial-gradient(circle at 50% 50%, rgba(0,0,0,.22), transparent 70%);
  opacity:.9;
  pointer-events:none;
  transition: filter .18s ease, opacity .18s ease, transform .18s ease;
}

.vwamem-dragHint{
  /* position:absolute; */
  top: 18px;
  right: 22px;
  font-size: 11px;
  color: rgba(255,255,255,.70);
  background: rgba(0,0,0,.14);
  border: 1px solid rgba(255,255,255,.14);
  padding: 6px 10px;
  border-radius: 999px;
  backdrop-filter: blur(12px);
}

/* core */
.vwamem-orbCore{
  width: 82%;
  height: 82%;
  border-radius: 999px;
  position:relative;
  display:grid;
  place-items:center;
  /* background: radial-gradient(circle at 40% 30%, rgba(255,255,255,.14), rgba(0,0,0,.20) 60%, rgba(0,0,0,.24));
  box-shadow: 0 24px 90px rgba(0,0,0,.38); */
  overflow:hidden;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .12s ease;
}

/* stack plates */
.vwamem-stack{
  position:absolute;
  inset: 18%;
  display:grid;
  place-items:center;
}
.vwamem-plate{
  position:absolute;
  width: 78%;
  height: 10%;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 20px 50px rgba(0,0,0,.18);
  filter: drop-shadow(0 14px 30px rgba(0,0,0,.18));
  transform: translateY(var(--y, 0px));
  opacity: var(--op, .55);
}

.vwamem-plate{
  animation: vwamemPlateLift 2.8s ease-in-out infinite;
}
.vwamem-plate:nth-child(2){ animation-delay:.12s; }
.vwamem-plate:nth-child(3){ animation-delay:.24s; }
.vwamem-plate:nth-child(4){ animation-delay:.36s; }

@keyframes vwamemPlateLift{
  0%,100%{ transform: translateY(0); opacity:.85; }
  50%{ transform: translateY(-6px); opacity:1; }
}


/* distribute plates */
.vwamem-plate:nth-child(1){ --y:-78px; --op:.35; }
.vwamem-plate:nth-child(2){ --y:-52px; --op:.45; }
.vwamem-plate:nth-child(3){ --y:-26px; --op:.55; }
.vwamem-plate:nth-child(4){ --y:  0px; --op:.70; }
.vwamem-plate:nth-child(5){ --y: 26px; --op:.55; }
.vwamem-plate:nth-child(6){ --y: 52px; --op:.45; }
.vwamem-plate:nth-child(7){ --y: 78px; --op:.35; }

/* scan line */
.vwamem-scan{
  position:absolute;
  inset: 16%;
  border-radius: 999px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0) 0%,
    rgba(140,235,255,.18) 42%,
    rgba(255,255,255,0) 72%
  );
  mix-blend-mode: screen;
  opacity: 0;
  transform: translateY(-18%);
  pointer-events:none;
}
.vwamem-orb.is-scan .vwamem-scan{
  opacity:.9;
  animation: vwamemScan 1.2s ease-in-out;
}
@keyframes vwamemScan{
  0%{ transform: translateY(-18%); opacity:0; }
  25%{ opacity:.85; }
  100%{ transform: translateY(18%); opacity:0; }
}

/* HUD panel */
.vwamem-hud{
  position:absolute;
  left: 26px;
  bottom: 92px;
  width: 160px;
  border-radius: 16px;
  padding: 10px 12px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 52px rgba(0,0,0,.18);
}
.vwamem-hudRow{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 10px;
  padding: 4px 0;
}
.vwamem-hudRow .k{
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.68);
}
.vwamem-hudRow .v{
  font-size: 12px;
  font-weight: 900;
  color: rgba(255,255,255,.90);
}

/* bottom label */
.vwamem-orbLabel{
  position:absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: min(320px, 82%);
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 52px rgba(0,0,0,.18);
  text-align:center;
}
.vwamem-orbTag{
  display:inline-flex;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.88);
}
.vwamem-orbName{
  display:block;
  margin-top: 6px;
  font-size: 14px;
  letter-spacing: .02em;
  color: rgba(255,255,255,.94);
}
.vwamem-orbSub{
  display:block;
  margin-top: 2px;
  font-size: 12px;
  color: rgba(255,255,255,.78);
}

/* state tints per layer */
.vwamem-orb[data-layer="nvr"] .vwamem-glow{ filter: saturate(1.1); }
.vwamem-orb[data-layer="vbs"] .vwamem-glow{ filter: hue-rotate(20deg) saturate(1.15); }
.vwamem-orb[data-layer="dbs"] .vwamem-glow{ filter: hue-rotate(45deg) saturate(1.2); }

/* RWD */
@media (max-width: 980px){
  .vwamem-wrap{ grid-template-columns: 1fr; gap: 22px; }
  .vwamem-title{ font-size: 38px; }
  .vwamem-right{ margin-top: 10px; }
}
@media (max-width: 640px){
  .vwamem-section{ padding: 44px 0; }
  .vwamem-title{ font-size: 30px; }
  .vwamem-card{
    grid-template-columns: 46px 1fr auto;
  }
  .vwamem-go{ display:none; }
  .vwamem-hud{ left: 16px; bottom: 100px; width: 150px; }
}

/* =========================
   VWA MEM – UPGRADE MOTION
========================= */

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  .vwamem-glow,
  .vwamem-plate,
  .vwamem-orbCore,
  .vwamem-scan{
    animation: none !important;
    transition: none !important;
  }
}

/* Orb breathing glow */
.vwamem-glow{
  animation: vwamemBreath 3.8s ease-in-out infinite;
  will-change: transform, filter, opacity;
}
@keyframes vwamemBreath{
  0%,100%{ transform: scale(1.00); filter: blur(3px); opacity:.82; }
  50%    { transform: scale(1.03); filter: blur(4.2px); opacity:.98; }
}

/* Plates floating */
.vwamem-plate{
  animation: vwamemFloat 3.6s ease-in-out infinite;
  will-change: transform, filter, opacity;
}
.vwamem-plate:nth-child(1){ animation-delay: .00s; }
.vwamem-plate:nth-child(2){ animation-delay: .10s; }
.vwamem-plate:nth-child(3){ animation-delay: .20s; }
.vwamem-plate:nth-child(4){ animation-delay: .30s; }
.vwamem-plate:nth-child(5){ animation-delay: .40s; }
.vwamem-plate:nth-child(6){ animation-delay: .50s; }
.vwamem-plate:nth-child(7){ animation-delay: .60s; }

@keyframes vwamemFloat{
  0%,100%{ transform: translateY(var(--y,0px)) translateZ(0) scale(1); }
  50%    { transform: translateY(calc(var(--y,0px) - 2.6px)) translateZ(0) scale(1.01); }
}

/* Plate highlight on hover */
.vwamem-plate.is-hot{
  background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.09));
  border-color: rgba(140,235,255,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 26px 70px rgba(0,0,0,.22);
  filter: drop-shadow(0 0 18px rgba(140,235,255,.18));
}

/* Right side sweep highlight (like iOS glass scan) */
.vwamem-orbCore::after{
  content:"";
  position:absolute;
  inset:-30%;
  background: linear-gradient(120deg,
    rgba(255,255,255,0) 35%,
    rgba(255,255,255,.16) 48%,
    rgba(140,235,255,.18) 52%,
    rgba(255,255,255,0) 65%
  );
  transform: translateX(-30%) rotate(12deg);
  opacity:0;
  pointer-events:none;
  mix-blend-mode: screen;
}
.vwamem-orb.is-sweep .vwamem-orbCore::after{
  opacity:1;
  animation: vwamemSweep .85s ease-out forwards;
}
@keyframes vwamemSweep{
  0%{ transform: translateX(-38%) rotate(12deg); opacity:0; }
  20%{ opacity:.9; }
  100%{ transform: translateX(38%) rotate(12deg); opacity:0; }
}

/* Tooltip */
.vwamem-tip{
  position:absolute;
  top: 90px;
  right: 34px;
  width: 180px;
  border-radius: 16px;
  padding: 10px 12px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 56px rgba(0,0,0,.20);
  opacity:0;
  transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease;
  pointer-events:none;
}
.vwamem-tip.is-on{
  opacity:1;
  transform: translateY(0);
}
.vwamem-tip .t{
  font-size: 11px;
  letter-spacing:.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.vwamem-tip b{
  display:block;
  margin-top: 6px;
  font-size: 13px;
  color: rgba(255,255,255,.92);
}
.vwamem-tip small{
  display:block;
  margin-top: 2px;
  font-size: 12px;
  color: rgba(255,255,255,.78);
}

/* Left cards micro feedback */
.vwamem-card.is-active{
  position: relative;
}
.vwamem-card.is-active::after{
  content:"";
  position:absolute;
  inset: -1px;
  border-radius: 18px;
  background: radial-gradient(500px 120px at 20% 10%, rgba(140,235,255,.18), transparent 65%);
  pointer-events:none;
}


/* =========================
   VWA MEM – ORBIT UPGRADE
========================= */

.vwamem-orbit{
  position:absolute;
  inset: 10px;
  border-radius: 999px;
  pointer-events: none;
}

.vwamem-orbitRing{
  position:absolute;
  inset: 18px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255,255,255,.10) 0%,
      rgba(255,255,255,.06) 38%,
      rgba(255,255,255,.02) 62%,
      rgba(255,255,255,0) 72%
    );
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 22px 70px rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
  pointer-events: none;
}

/* 微小刻度 */
.vwamem-orbitTicks{
  position:absolute;
  inset: 18px;
  border-radius: 999px;
  pointer-events:none;
  opacity:.8;
  mask-image: radial-gradient(circle, #000 60%, transparent 78%);
  animation: none !important;
}
.vwamem-orbitTicks::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:999px;
  background:
    repeating-conic-gradient(
      from 0deg,
      rgba(255,255,255,.20) 0 1deg,
      rgba(255,255,255,0) 1deg 10deg
    );
  filter: blur(.2px);
  opacity:.55;
}

/* Orbit item */
.vwamem-orbitItem{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%) translate(var(--ox, 0px), var(--oy, 0px));
  pointer-events:auto;
  user-select:none;
  touch-action:none;
  will-change: transform
}

.vwamem-orbitPill{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(14px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 20px 60px rgba(0,0,0,.16);
  transition: transform .16s ease, opacity .16s ease, filter .16s ease;
}

/* base stack container (replaces dot) */
.vwamem-orbitDot{
  position:relative;
  width:18px; height:18px;
  border-radius:6px;
  background: rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.24);
  box-shadow:
    0 10px 24px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: visible;
}

/* turn off any legacy dot glow if exists */
.vwamem-orbitDot i,
.vwamem-orbitDot svg{ display:none !important; }

/* =========================
   NVR — thick storage stack
========================= */
.vwamem-orbitItem[data-layer="nvr"] .vwamem-orbitDot{
  border-radius:7px;
  background: linear-gradient(180deg,
    rgba(255,255,255,.26),
    rgba(255,255,255,.16)
  );
}
.vwamem-orbitItem[data-layer="nvr"] .vwamem-orbitDot::before,
.vwamem-orbitItem[data-layer="nvr"] .vwamem-orbitDot::after{
  content:"";
  position:absolute;
  left:0; top:0; right:0; bottom:0;
  border-radius:7px;
  background: linear-gradient(180deg,
    rgba(255,255,255,.18),
    rgba(255,255,255,.10)
  );
  border:1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
  transform-origin: 50% 50%;
  pointer-events:none;
}
.vwamem-orbitItem[data-layer="nvr"] .vwamem-orbitDot::before{
  transform: translate(2px,-3px) scale(.965);
  opacity:.92;
}
.vwamem-orbitItem[data-layer="nvr"] .vwamem-orbitDot::after{
  transform: translate(4px,-6px) scale(.93);
  opacity:.68;
}

/* extra “base slab” for NVR */
.vwamem-orbitItem[data-layer="nvr"] .vwamem-orbitDot{
  box-shadow:
    0 12px 28px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.24);
}
.vwamem-orbitItem[data-layer="nvr"] .vwamem-orbitDot::marker{ content:""; }

/* =========================
   VBS — thin layers + pulse ripple (streaming)
========================= */
.vwamem-orbitItem[data-layer="vbs"] .vwamem-orbitDot{
  border-radius:999px;
  width:18px; height:18px;
  background: rgba(255,255,255,.18);
}

/* thin “sheets” */
.vwamem-orbitItem[data-layer="vbs"] .vwamem-orbitDot::before,
.vwamem-orbitItem[data-layer="vbs"] .vwamem-orbitDot::after{
  content:"";
  position:absolute;
  left:-1px; right:-1px;
  height:5px;
  border-radius:999px;
  background: rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
  pointer-events:none;
}
.vwamem-orbitItem[data-layer="vbs"] .vwamem-orbitDot::before{ top:2px; opacity:.9; }
.vwamem-orbitItem[data-layer="vbs"] .vwamem-orbitDot::after { top:9px; opacity:.65; }

/* ripple ring (stream pulse) */
.vwamem-orbitItem[data-layer="vbs"] .vwamem-orbitDot .vwamem-ripple{
  display:none;
}
.vwamem-orbitItem[data-layer="vbs"] .vwamem-orbitDot{
  --ripple: rgba(160,220,255,.35);
}
.vwamem-orbitItem[data-layer="vbs"] .vwamem-orbitDot span{ display:none; }

.vwamem-orbitItem[data-layer="vbs"] .vwamem-orbitDot::selection{ background:transparent; }

/* create ripple using an extra pseudo via box-shadow trick */
.vwamem-orbitItem[data-layer="vbs"].is-front .vwamem-orbitDot{
  animation: vwamemVbsPulse 1.6s ease-in-out infinite;
}
@keyframes vwamemVbsPulse{
  0%{
    box-shadow:
      0 10px 24px rgba(0,0,0,.18),
      inset 0 1px 0 rgba(255,255,255,.18),
      0 0 0 0 rgba(160,220,255,.00);
  }
  55%{
    box-shadow:
      0 12px 28px rgba(0,0,0,.20),
      inset 0 1px 0 rgba(255,255,255,.22),
      0 0 0 8px rgba(160,220,255,.18);
  }
  100%{
    box-shadow:
      0 10px 24px rgba(0,0,0,.18),
      inset 0 1px 0 rgba(255,255,255,.18),
      0 0 0 14px rgba(160,220,255,.00);
  }
}

/* =========================
   DBS — stack + decision nodes (workflow)
========================= */
.vwamem-orbitItem[data-layer="dbs"] .vwamem-orbitDot{
  border-radius:6px;
  background: rgba(255,255,255,.20);
}

/* stack sheets */
.vwamem-orbitItem[data-layer="dbs"] .vwamem-orbitDot::before,
.vwamem-orbitItem[data-layer="dbs"] .vwamem-orbitDot::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:6px;
  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.16);
  pointer-events:none;
}
.vwamem-orbitItem[data-layer="dbs"] .vwamem-orbitDot::before{
  transform: translate(2px,-2px) scale(.96);
  opacity:.9;
}
.vwamem-orbitItem[data-layer="dbs"] .vwamem-orbitDot::after{
  transform: translate(4px,-4px) scale(.92);
  opacity:.6;
}

/* add tiny decision nodes */
.vwamem-orbitItem[data-layer="dbs"] .vwamem-orbitDot{
  --node: rgba(210,235,255,.95);
}
.vwamem-orbitItem[data-layer="dbs"] .vwamem-orbitDot .x{ display:none; }

/* nodes drawn via radial-gradients */
.vwamem-orbitItem[data-layer="dbs"] .vwamem-orbitDot{
  background:
    radial-gradient(circle at 30% 35%, var(--node) 0 1.2px, rgba(0,0,0,0) 1.4px),
    radial-gradient(circle at 65% 50%, var(--node) 0 1.2px, rgba(0,0,0,0) 1.4px),
    radial-gradient(circle at 42% 70%, var(--node) 0 1.2px, rgba(0,0,0,0) 1.4px),
    linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.12));
}

/* connect hint lines (subtle) */
.vwamem-orbitItem[data-layer="dbs"] .vwamem-orbitDot::before{
  background:
    linear-gradient(90deg, rgba(210,235,255,.22), rgba(210,235,255,0)),
    rgba(255,255,255,.10);
}

/* =========================
   Active / front polish
========================= */
.vwamem-orbitItem.is-front .vwamem-orbitDot{
  box-shadow:
    0 14px 34px rgba(0,0,0,.22),
    0 0 0 1px rgba(160,220,255,.18),
    inset 0 1px 0 rgba(255,255,255,.26);
}

.vwamem-orbitItem.is-front.is-active .vwamem-orbitDot{
  animation: vwamemStackFloat 2.2s ease-in-out infinite;
}
@keyframes vwamemStackFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-3px); }
}

/* reduce motion safe */
@media (prefers-reduced-motion: reduce){
  .vwamem-orbitItem.is-front.is-active .vwamem-orbitDot,
  .vwamem-orbitItem[data-layer="vbs"].is-front .vwamem-orbitDot{
    animation: none !important;
  }
}

.vmdm-orbImg{
  width: 84%;
  height: 87%;
  margin-top: -50px;
  object-fit: cover;
  border-radius: 999px;
  filter: contrast(1.03) saturate(1.05);
  box-shadow: 0 24px 90px rgba(0,0,0,.38);
  transform: translateZ(0);
}


/* two extra layers */
.vwamem-orbitDot::before,
.vwamem-orbitDot::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:6px;
  background: rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.18);
  transform-origin: 50% 50%;
  pointer-events:none;
}

.vwamem-orbitDot::before{ transform: translate(3px,-3px) scale(.96); opacity:.85; }
.vwamem-orbitDot::after { transform: translate(6px,-6px) scale(.92); opacity:.65; }

.vwamem-orbitText{
  line-height: 1.1;
}
.vwamem-orbitText b{
  display:block;
  font-size: 12px;
  color: rgba(255,255,255,.92);
  letter-spacing:.02em;
}
.vwamem-orbitText small{
  display:block;
  margin-top: 2px;
  font-size: 11px;
  color: rgba(255,255,255,.72);
}

/* active / front: layered float */
.vwamem-orbitItem.is-front .vwamem-orbitDot{
  box-shadow:
    0 14px 34px rgba(0,0,0,.22),
    0 0 0 1px rgba(160,220,255,.18),
    inset 0 1px 0 rgba(255,255,255,.26);
}

.vwamem-orbitItem.is-front.is-active .vwamem-orbitDot{
  animation: vwamemStackFloat 2.4s ease-in-out infinite;
}

@keyframes vwamemStackFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-3px); }
}

/* ticks/ring 有旋轉動畫，直接關掉 */
.vwamem-orbitRing,
.vwamem-orbitTicks{
  animation: none !important;
}

/* 前後景深 */
.vwamem-orbitItem.is-back .vwamem-orbitPill{
  opacity:.42;
  filter: blur(.2px) saturate(.9);
  transform: scale(.92);
}
.vwamem-orbitItem.is-front .vwamem-orbitPill{
  opacity:1;
  transform: scale(1.03);
  filter: saturate(1.05);
}

.vwamem-orbitItem.is-active .vwamem-orbitPill{
  background: rgba(255,255,255,.22);
  border-color: rgba(140,235,255,.42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 26px 70px rgba(0,0,0,.18);
}
.vwamem-orbitItem.is-active .vwamem-orbitDot{
  background: rgba(255,255,255,.95);
  box-shadow: 0 0 22px rgba(140,235,255,.36);
}

/* 可拖曳手勢提示 */
.vwamem-orbitHint{
  position:absolute;
  top: 18px;
  right: 18px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(12px);
  font-size: 11px;
  color: rgba(255,255,255,.74);
  letter-spacing: .08em;
  pointer-events:none;
  opacity:.85;
}

/* 拖曳中 */
.vwamem-orb.is-orbitDrag .vwamem-orbitRing{
  border-color: rgba(140,235,255,.24);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 28px 80px rgba(0,0,0,.22);
}

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  .vwamem-orbitTicks::before{ display:none; }
  .vwamem-orbitPill{ transition:none !important; }
}

/* =========================
   VWA MEM – SIM DATA MOTION
========================= */

/* HUD 整體微掃光 */
.vwamem-hud,
.vwamem-miniHud,
.vwamem-statHud{
  /* position: relative; */
  overflow: hidden;
}

.vwamem-hud::after,
.vwamem-miniHud::after,
.vwamem-statHud::after{
  content:"";
  position:absolute;
  inset:-40%;
  background: linear-gradient(120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.10) 45%,
    rgba(255,255,255,0) 65%
  );
  transform: translateX(-40%) rotate(0.0001deg);
  opacity: .0;
  pointer-events:none;
}

.vwamem-hud.is-scan::after,
.vwamem-miniHud.is-scan::after,
.vwamem-statHud.is-scan::after{
  opacity: .65;
  animation: vwamemScan 1.6s ease-in-out infinite;
}

@keyframes vwamemScan{
  0%{ transform: translateX(-45%) rotate(15deg); opacity:.05; }
  35%{ opacity:.22; }
  100%{ transform: translateX(55%) rotate(15deg); opacity:.06; }
}

/* 數值跳動的小脈衝 */
.vwamem-valPulse{
  display:inline-block;
  transform: translateZ(0);
}
.vwamem-valPulse.is-pop{
  animation: vwamemPop .35s ease-out 1;
}
@keyframes vwamemPop{
  0%{ transform: translateY(0) scale(1); filter: brightness(1); }
  45%{ transform: translateY(-1px) scale(1.04); filter: brightness(1.12); }
  100%{ transform: translateY(0) scale(1); filter: brightness(1); }
}

/* 狀態色 */
.vwamem-hud.is-ok,
.vwamem-miniHud.is-ok,
.vwamem-statHud.is-ok{
  border-color: rgba(255,255,255,.14);
}
.vwamem-hud.is-warn,
.vwamem-miniHud.is-warn,
.vwamem-statHud.is-warn{
  border-color: rgba(255,205,120,.36);
  box-shadow: 0 18px 60px rgba(255,205,120,.10);
}
.vwamem-hud.is-peak,
.vwamem-miniHud.is-peak,
.vwamem-statHud.is-peak{
  border-color: rgba(255,120,120,.42);
  box-shadow: 0 22px 70px rgba(255,120,120,.14);
}

/* 告警脈衝圈 */
.vwamem-hud.is-peak::before,
.vwamem-miniHud.is-peak::before,
.vwamem-statHud.is-peak::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius: 18px;
  border: 1px solid rgba(255,120,120,.38);
  filter: blur(.2px);
  opacity:.0;
  animation: vwamemAlarm 1.0s ease-out infinite;
  pointer-events:none;
}
@keyframes vwamemAlarm{
  0%{ transform: scale(.98); opacity:.0; }
  15%{ opacity:.55; }
  100%{ transform: scale(1.05); opacity:0; }
}

/* HUD sparkline */
.vwamem-spark{
  width: 100%;
  height: 34px;
  display:block;
  margin-top: 8px;
  border-radius: 10px;
  background: rgba(0,0,0,.10);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
}

/* =========================================================
   VWA MEM — LAYERING PATCH 
========================================================= */
/* 最底：glow / 背景修飾 */
.vwamem-glow{ z-index:0 !important; }
.vwamem-ring,
.vwamem-ring2{ z-index:1 !important; }

/* orb core（堆疊圖層）在中層 */
.vwamem-orbCore{ z-index:2 !important; }

/* core 內修飾（scan/sweep）固定在 plates 之上、但不蓋 HUD/Label */
.vwamem-stack{ z-index:1; }         
.vwamem-plate{ z-index:1; }        
.vwamem-scan{ z-index:2 !important; } /* scan 線在 plates 上一層即可 */

/* HUD / Label 要更上層（ */
.vwamem-hud{ z-index:6 !important; }
.vwamem-orbLabel{ z-index:7 !important; }
.vwamem-dragHint{ z-index:8 !important; }

/* orbit 環/刻度 */
.vwamem-orbit{ z-index:3 !important; }
.vwamem-orbitRing,
.vwamem-orbitTicks{ z-index:3 !important; pointer-events:none; }

/* orbit items*/
.vwamem-orbitItem{ z-index:9 !important; }
.vwamem-orbitPill{ pointer-events:auto; }

/* tooltip 也在上層 */
.vwamem-tip{ z-index:10 !important; }

/* 確保所有修飾不擋互動 */
.vwamem-glow,
.vwamem-ring,
.vwamem-ring2,
.vwamem-orbitRing,
.vwamem-orbitTicks,
.vwamem-scan{
  pointer-events:none !important;
}

/* 保留 orb scan 用 vwamemOrbScan，HUD 掃光用 vwamemHudSweep */
.vwamem-orb.is-scan .vwamem-scan{
  animation: vwamemOrbScan 1.2s ease-in-out;
}
@keyframes vwamemOrbScan{
  0%{ transform: translateY(-18%); opacity:0; }
  25%{ opacity:.85; }
  100%{ transform: translateY(18%); opacity:0; }
}

/* HUD 掃光 */
.vwamem-hud.is-scan::after{
  opacity:.65;
  animation: vwamemHudSweep 1.6s ease-in-out infinite;
}
@keyframes vwamemHudSweep{
  0%{ transform: translateX(-45%) rotate(15deg); opacity:.05; }
  35%{ opacity:.22; }
  100%{ transform: translateX(55%) rotate(15deg); opacity:.06; }
}

/* =========================================================
   VWA NVR VALUE (scoped) — vwanvrval-
========================================================= */
.vwanvrval{
  --bg: #ffffff;
  --text: #0f172a;
  --muted: rgba(15,23,42,.62);

  --glass: rgba(255,255,255,.72);
  --glass2: rgba(255,255,255,.58);
  --stroke: rgba(15,23,42,.10);
  --shadow: 0 26px 70px rgba(15,23,42,.10);

  --brand: #4f46e5;
  --brand2:#3b82f6;

  position:relative;
  background: var(--bg);
  padding: 72px 0 84px;
  overflow:hidden;
}

.vwanvrval::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(900px 420px at 18% 28%, rgba(79,70,229,.09), transparent 60%),
    radial-gradient(760px 380px at 86% 40%, rgba(59,130,246,.08), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,1), rgba(248,250,255,1));
  pointer-events:none;
}

.vwanvrval-section{
  --ink:#0f172a;
  --muted:#6b7280;
  --accent:#4f46e5;      /* indigo */
  --accent2:#3b82f6;     /* blue */
  --line: rgba(148,163,184,.32);

  /* iOS glass whites */
  --glass: rgba(255,255,255,.72);
  --glass2: rgba(255,255,255,.58);
  --strokeW: rgba(255,255,255,.72);
  --strokeG: rgba(148,163,184,.28);

  --shadow1: 0 26px 70px rgba(15,23,42,.10);
  --shadow2: 0 12px 40px rgba(15,23,42,.08);

  position:relative;
  padding: 84px 0 72px;
  background:
    radial-gradient(1000px 420px at 50% -10%, rgba(99,102,241,.14), transparent 62%),
    radial-gradient(900px 520px at 10% 22%, rgba(59,130,246,.10), transparent 60%),
    radial-gradient(760px 520px at 90% 65%, rgba(168,85,247,.08), transparent 64%),
    linear-gradient(180deg, #ffffff 0%, #f7f8ff 60%, #ffffff 100%);
  overflow:hidden;
}

.vwanvrval-section::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(circle at 22% 30%, rgba(255,255,255,.85), transparent 48%),
    radial-gradient(circle at 78% 62%, rgba(255,255,255,.80), transparent 52%);
  opacity:.55;
  pointer-events:none;
}

.vwanvrval-shell{
  position:relative;
  z-index:2;
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 24px;
  text-align:center;
}

.vwanvrval-head{
  text-align:center;
  max-width: 820px;
  margin: 0 auto 34px;
}

.vwanvrval-eyebrow{
  margin:0 0 10px;
  font-size: 12px;
  letter-spacing:.22em;
  text-transform: uppercase;
  color: rgba(79,70,229,.85);
  font-weight: 800;
}

.vwanvrval-title{
  margin: 0;
  font-size: 38px;
  line-height: 1.25;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -.02em;
}

.vwanvrval-sub{
  margin: 12px -120px 0;
  font-size: 14.5px;
  line-height: 1.9;
  color: rgba(15,23,42,.62);
}

.vwanvrval-lead{
  margin: 14px auto 34px;
  max-width: 820px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.9;
}

/* grid */
.vwanvrval-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
  margin-top: 6px;
}

.vwanvrval-card{
  position:relative;
  border-radius: 22px;
  padding: 26px 22px 20px;
  text-align:center;
  /* iOS glass */
  background:
    linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.62));
  border: 1px solid var(--strokeG);
  box-shadow:
    0 18px 60px rgba(15,23,42,.08),
    inset 0 1px 0 rgba(255,255,255,.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow:hidden;

  transform: translateZ(0);
  transition:
    transform .28s cubic-bezier(.19,1,.22,1),
    box-shadow .26s ease,
    border-color .26s ease,
    background .26s ease;
  cursor:pointer;
  user-select:none;
}

.vwanvrval-card::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: 22px;
  background: radial-gradient(520px 220px at 30% 10%, rgba(255,255,255,.70), transparent 60%);
  opacity:0;
  transition: opacity .25s ease;
  pointer-events:none;
}

.vwanvrval-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 34px 90px rgba(15,23,42,.14);
  border-color: rgba(79,70,229,.22);
}
.vwanvrval-card:hover::after{ opacity:.75; }

.vwanvrval-card.is-active{
  border-color: rgba(79,70,229,.36);
  box-shadow: 0 42px 110px rgba(79,70,229,.18);
  transform: translateY(-8px);
}

/* shimmer glint */
.vwanvrval-glint{
  position:absolute;
  inset:-40%;
  background: linear-gradient(120deg,
    rgba(255,255,255,0) 36%,
    rgba(255,255,255,.38) 48%,
    rgba(99,102,241,.12) 52%,
    rgba(255,255,255,0) 64%
  );
  transform: translateX(-42%) rotate(12deg);
  opacity:0;
  pointer-events:none;
}

.vwanvrval-card:hover .vwanvrval-glint{
  opacity:1;
  animation: vwanvrvalGlint .85s ease-out forwards;
}
@keyframes vwanvrvalGlint{
  0%{ transform: translateX(-42%) rotate(12deg); opacity:0; }
  20%{ opacity:.9; }
  100%{ transform: translateX(42%) rotate(12deg); opacity:0; }
}

/* hover depth (ALL cards, including 1st) */
.vwanvrval-card:hover{
  border-color: rgba(79,70,229,.35);
  box-shadow:
    0 26px 80px rgba(15,23,42,.12),
    0 0 0 1px rgba(255,255,255,.8) inset;
  transform: translateY(-6px);
}

.vwanvrval-card.is-active{
  border-color: rgba(79,70,229,.40);
  background:
    linear-gradient(135deg, rgba(255,255,255,.86), rgba(240,246,255,.68));
  box-shadow:
    0 34px 92px rgba(79,70,229,.16),
    0 0 0 1px rgba(255,255,255,.86) inset;
  transform: translateY(-6px);
}

/* Icon glass frame */
.vwanvrval-iconWrap{
  width: 66px;
  height: 66px;
  border-radius: 20px;
  margin: 2px auto 14px;
  display:grid;
  place-items:center;

  /* crystal glass */
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.98), rgba(255,255,255,.68) 52%, rgba(255,255,255,.52) 100%);
  border: 1px solid rgba(255,255,255,.72);
  box-shadow:
    0 16px 40px rgba(15,23,42,.08),
    inset 0 1px 0 rgba(255,255,255,.90),
    inset 0 -1px 0 rgba(148,163,184,.20);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.vwanvrval-iconWrap i{
  font-size: 26px; 
  color: var(--accent);
  filter: drop-shadow(0 10px 18px rgba(15,23,42,.12));
}
.vwanvrval-cardTitle{
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -.01em;
}

.vwanvrval-cardText{
  margin: 0 auto 14px;
  max-width: 260px;
  font-size: 13.5px;
  line-height: 1.85;
  color: #64748b;
}

.vwanvrval-tag{
  display:inline-flex;
  padding: 7px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .10em;
  color: rgba(15,23,42,.72);

  background: rgba(255,255,255,.60);
  border: 1px solid rgba(255,255,255,.82);
  box-shadow:
    0 10px 26px rgba(15,23,42,.06),
    inset 0 1px 0 rgba(255,255,255,.90);
}

/* icon */
.vwanvrval-ico{
  width: 74px;
  height: 74px;
  margin: 0 auto 16px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.95), rgba(255,255,255,.55));
  border: 1px solid rgba(15,23,42,.10);
  box-shadow:
    0 18px 44px rgba(15,23,42,.10),
    inset 0 1px 0 rgba(255,255,255,.8);
   color: #4f46e5;
  filter: drop-shadow(0 10px 18px rgba(15,23,42,.10));
}
.vwanvrval-ico i{ font-size:30px; }
.vwanvrval-ico svg{
  width: 34px;
  height: 34px;
  color: rgba(79,70,229,.95);
  filter: drop-shadow(0 10px 20px rgba(15,23,42,.10));
}

.vwanvrval-card h3{
  margin:0 0 10px;
  font-size: 17px;
  font-weight: 900;
  color: var(--text);
}

.vwanvrval-card p{
  margin:0;
  font-size: 13.5px;
  line-height: 1.75;
  color: rgba(15,23,42,.62);
}

.vwanvrval-chip{
  display:inline-flex;
  margin-top: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .10em;
  color: rgba(15,23,42,.72);
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(15,23,42,.10);
}

/* focus ring */
.vwanvrval-card:focus-visible{
  box-shadow:
    0 0 0 4px rgba(79,70,229,.16),
    0 34px 90px rgba(15,23,42,.14);
}

/* =========================
   Detail Panel (glass)
========================= */
.vwanvrval-panel{
  margin: 26px auto 0;
  max-width: 1160px;
  text-align:left;
  border-radius: 26px;
  padding: 22px 22px 20px;

  background: linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.66));
  border: 1px solid rgba(148,163,184,.28);
  box-shadow: var(--shadow1), inset 0 1px 0 rgba(255,255,255,.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  position:relative;
  overflow:hidden;

  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.vwanvrval-panel.is-open{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.vwanvrval-panel::before{
  content:"";
  position:absolute;
  inset:-60%;
  background: radial-gradient(circle at 30% 30%, rgba(99,102,241,.12), transparent 60%);
  pointer-events:none;
}

.vwanvrval-panelClose{
  position:absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.35);
  background: rgba(255,255,255,.72);
  box-shadow: 0 12px 34px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.85);
  cursor:pointer;
  font-size: 18px;
  color: rgba(15,23,42,.70);
}

.vwanvrval-panelHead{ position:relative; z-index:2; padding-right: 44px; }
.vwanvrval-panelPill{
  margin: 0 0 10px;
  display:inline-flex;
  gap:8px;
  align-items:center;
  font-size: 12px;
  letter-spacing:.12em;
  text-transform: uppercase;
  color: rgba(79,70,229,.92);
  font-weight: 900;
}
.vwanvrval-panelTitle{
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 900;
  color: var(--ink);
}
.vwanvrval-panelDesc{
  margin: 0 0 16px;
  color: #64748b;
  font-size: 13.5px;
  line-height: 1.9;
  max-width: 920px;
}

.vwanvrval-panelGrid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 14px;
  align-items: stretch;
}

.vwanvrval-controlCard,
.vwanvrval-statCard{
  border-radius: 18px;
  padding: 14px 14px 12px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(255,255,255,.78);
  box-shadow: 0 14px 44px rgba(15,23,42,.07), inset 0 1px 0 rgba(255,255,255,.88);
  backdrop-filter: blur(14px);
}

.vwanvrval-controlTop{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.vwanvrval-k{
  font-size: 11px;
  letter-spacing:.16em;
  text-transform: uppercase;
  color: rgba(15,23,42,.55);
  font-weight: 900;
}
.vwanvrval-v{
  font-size: 12px;
  font-weight: 900;
  color: rgba(15,23,42,.78);
}

.vwanvrval-range{
  width: 100%;
  accent-color: rgba(79,70,229,.95);
}

.vwanvrval-controlHint{
  margin-top: 8px;
  font-size: 12px;
  color: rgba(15,23,42,.55);
  line-height: 1.7;
}

.vwanvrval-statRow{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(148,163,184,.32);
}
.vwanvrval-statRow:last-of-type{ border-bottom: none; }

.vwanvrval-status{
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.24);
  background: rgba(255,255,255,.58);
}
.vwanvrval-status.is-peak{
  color: rgba(239,68,68,.92);
  border-color: rgba(239,68,68,.22);
  background: rgba(239,68,68,.06);
  box-shadow: 0 0 0 6px rgba(239,68,68,.06);
}

.vwanvrval-miniNote{
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.7;
  color: rgba(15,23,42,.55);
}

/* =========================
   RWD
========================= */
@media (max-width: 1024px){
  .vwanvrval-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vwanvrval-title{ font-size: 34px; }
}
@media (max-width: 640px){
  .vwanvrval-section{ padding: 66px 0 58px; }
  .vwanvrval-grid{ grid-template-columns: 1fr; }
  .vwanvrval-panelGrid{ grid-template-columns: 1fr; }
  .vwanvrval-title{ font-size: 30px; }
}

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  .vwanvrval-card,
  .vwanvrval-card:hover{
    transition:none !important;
    transform:none !important;
  }
  .vwanvrval-glint{ display:none; }
}

/* =========================================================
   vwanvrval – iOS Glass Upgrade (scoped)
========================================================= */
.vwanvrval-sec{
  --bg:#ffffff;
  --ink:#0f172a;
  --muted:#6b7280;

  --accent:#4f46e5;
  --accent2:#3b82f6;

  --glass: rgba(255,255,255,.72);
  --glass2: rgba(255,255,255,.58);
  --stroke: rgba(15,23,42,.10);
  --stroke2: rgba(15,23,42,.06);

  --shadow1: 0 22px 60px rgba(15,23,42,.12);
  --shadow2: 0 10px 26px rgba(15,23,42,.10);
  --shadowIn: inset 0 1px 0 rgba(255,255,255,.80);

  position:relative;
  background: radial-gradient(900px 520px at 50% 0%, rgba(79,70,229,.06), transparent 60%),
              radial-gradient(900px 520px at 10% 70%, rgba(59,130,246,.06), transparent 60%),
              #fff;
  overflow:hidden;
}

/* subtle grain  */
.vwanvrval-sec::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 20% 15%, rgba(0,0,0,.03), transparent 42%),
    radial-gradient(circle at 80% 75%, rgba(0,0,0,.025), transparent 45%);
  opacity:.45;
  pointer-events:none;
}

/* ---------- Cards (value) ---------- */
.vwanvrval-grid{ position:relative; z-index:2; }
.vwanvrval-card{
  position:relative;
  border-radius: 22px;
  background: linear-gradient(180deg, var(--glass), var(--glass2));
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow1), var(--shadowIn);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  transform: translateZ(0);
  transition:
    transform .45s cubic-bezier(.19,1,.22,1),
    box-shadow .35s ease,
    border-color .35s ease,
    background .35s ease;
  overflow:hidden;
  will-change: transform;
}

/* top highlight + edge */
.vwanvrval-card::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(700px 160px at 20% 10%, rgba(255,255,255,.75), transparent 60%),
    radial-gradient(480px 240px at 90% 0%, rgba(79,70,229,.12), transparent 55%);
  opacity:.75;
  pointer-events:none;
}

/* hover: glass lift */
.vwanvrval-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 34px 90px rgba(15,23,42,.14), 0 0 0 1px rgba(79,70,229,.18) inset;
  border-color: rgba(79,70,229,.22);
}

/* active: focus ring */
.vwanvrval-card.is-active{
  transform: translateY(-10px);
  border-color: rgba(79,70,229,.35);
  box-shadow:
    0 42px 110px rgba(79,70,229,.16),
    0 0 0 1px rgba(79,70,229,.24) inset,
    var(--shadowIn);
}

/* icon bubble (更精緻大顆) */
.vwanvrval-ico{
  width: 64px; height: 64px;
  border-radius: 18px;
  display:grid; place-items:center;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.95), rgba(255,255,255,.55) 55%, rgba(255,255,255,.25));
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 16px 36px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.75);
}
.vwanvrval-ico svg{
  width: 30px; height: 30px;
  color: var(--accent);
  filter: drop-shadow(0 10px 18px rgba(15,23,42,.10));
}

/* bottom chip */
.vwanvrval-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 7px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing:.08em;
  color: rgba(15,23,42,.68);
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 12px 26px rgba(15,23,42,.08);
}

/* ---------- Detail Panel (glass drawer) ---------- */
.vwanvrval-panel{
  position:relative;
  z-index:2;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.62));
  border: 1px solid rgba(15,23,42,.10);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 34px 90px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.75);

  transform: translateY(10px);
  opacity: 0;
  pointer-events:none;
  transition:
    transform .50s cubic-bezier(.19,1,.22,1),
    opacity .35s ease;
  overflow:hidden;
}

/* panel show */
.vwanvrval-panel.is-open{
  transform: translateY(0);
  opacity: 1;
  pointer-events:auto;
}

/* panel sweep highlight */
.vwanvrval-panel::before{
  content:"";
  position:absolute; inset:-40%;
  background: linear-gradient(120deg,
    rgba(255,255,255,0) 35%,
    rgba(255,255,255,.22) 48%,
    rgba(79,70,229,.14) 52%,
    rgba(255,255,255,0) 66%
  );
  transform: translateX(-35%) rotate(12deg);
  opacity:0;
  pointer-events:none;
}
.vwanvrval-panel.is-open.vwanvrval-sweep::before{
  opacity:1;
  animation: vwanvrvalSweep .9s ease-out forwards;
}
@keyframes vwanvrvalSweep{
  0%{ transform: translateX(-45%) rotate(12deg); opacity:0; }
  20%{ opacity:.9; }
  100%{ transform: translateX(45%) rotate(12deg); opacity:0; }
}

/* close btn refine */
.vwanvrval-close{
  width: 34px; height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.82);
  box-shadow: 0 12px 26px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.8);
  transition: transform .18s ease, box-shadow .18s ease;
}
.vwanvrval-close:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.85);
}

/* ---------- Sim Controls ---------- */
.vwanvrval-controls{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.vwanvrval-btn{
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.78);
  border-radius: 999px;
  padding: 9px 12px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing:.08em;
  color: rgba(15,23,42,.78);
  cursor:pointer;
  box-shadow: 0 14px 30px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.8);
  transition: transform .16s ease, box-shadow .16s ease;
}
.vwanvrval-btn:hover{ transform: translateY(-1px); }
.vwanvrval-btn.is-on{
  border-color: rgba(79,70,229,.24);
  color: rgba(79,70,229,.92);
  box-shadow: 0 18px 44px rgba(79,70,229,.12), inset 0 1px 0 rgba(255,255,255,.82);
}

.vwanvrval-range{
  accent-color: var(--accent);
}

/* values pulse */
.vwanvrval-pop{
  display:inline-block;
}
.vwanvrval-pop.is-pop{
  animation: vwanvrvalPop .34s ease-out 1;
}
@keyframes vwanvrvalPop{
  0%{ transform: translateY(0) scale(1); }
  45%{ transform: translateY(-1px) scale(1.04); }
  100%{ transform: translateY(0) scale(1); }
}

/* status chips */
.vwanvrval-status{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing:.08em;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.76);
}
.vwanvrval-status.is-ok{ color:#0f172a; }
.vwanvrval-status.is-warn{ color:#b45309; border-color: rgba(245,158,11,.35); }
.vwanvrval-status.is-peak{ color:#b91c1c; border-color: rgba(239,68,68,.38); box-shadow: 0 0 0 6px rgba(239,68,68,.08); }

/* sparkline canvas holder */
.vwanvrval-spark{
  width: 100%;
  height: 42px;
  border-radius: 12px;
  background: rgba(15,23,42,.03);
  border: 1px solid rgba(15,23,42,.06);
  overflow:hidden;
}

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  .vwanvrval-card,
  .vwanvrval-panel{
    transition:none !important;
  }
}


/* =========================
   vwanvrsc – Base
========================= */
.vwanvrsc-section{
  --ink:#0f172a;
  --muted:#64748b;
  --accent:#4f46e5;
  --accent2:#3b82f6;

  --glass: rgba(255,255,255,.76);
  --glass2: rgba(255,255,255,.62);
  --stroke: rgba(148,163,184,.26);

  --shadow1: 0 34px 110px rgba(15,23,42,.12);
  --shadow2: 0 18px 60px rgba(15,23,42,.10);

  position:relative;
  padding: 78px 0 92px;
  background:
    radial-gradient(1100px 520px at 50% -8%, rgba(79,70,229,.10), transparent 60%),
    radial-gradient(900px 520px at 10% 25%, rgba(59,130,246,.10), transparent 58%),
    linear-gradient(180deg, #ffffff 0%, #f7f8ff 55%, #ffffff 100%);
  overflow:hidden;
}
.vwanvrsc-section::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(circle at 22% 30%, rgba(255,255,255,.88), transparent 50%),
    radial-gradient(circle at 78% 62%, rgba(255,255,255,.82), transparent 52%);
  opacity:.55;
  pointer-events:none;
}
.vwanvrsc-shell{
  position:relative;
  z-index:2;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
  display:grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 42px;
  align-items: center;
}

/* 超大螢幕 */
@media (min-width: 1400px){
  .vwanvrsc-shell{ max-width: 1320px; }
  .vwanvrsc-right{ justify-self: end; }
  .vwanvrsc-rightCard{ max-width: 560px; }
}

/* left */
.vwanvrsc-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:0 0 10px;
  font-size: 12px;
  letter-spacing:.22em;
  text-transform: uppercase;
  color: rgba(79,70,229,.88);
  font-weight: 900;
}
.vwanvrsc-title{
  margin:0;
  font-size: 38px;
  line-height: 1.25;
  letter-spacing: -.02em;
  font-weight: 950;
  color: var(--ink);
}
.vwanvrsc-desc{
  margin: 14px 0 20px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.95;
  max-width: 550px;
}

/* capacity glass */
.vwanvrsc-capCard{
  width: 100%;
  max-width: 580px;    
  border-radius: 18px;
  padding: 18px 18px 16px;
  background: linear-gradient(180deg, var(--glass), var(--glass2));
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2), inset 0 1px 0 rgba(255,255,255,.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  cursor:pointer;
  position:relative;
  overflow:hidden;
}
.vwanvrsc-capHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.vwanvrsc-capLabel b{
  display:block;
  font-size: 14px;
  font-weight: 950;
  color: var(--ink);
}
.vwanvrsc-capLabel small{
  display:block;
  margin-top: 6px;
  font-size: 12.5px;
  color: rgba(100,116,139,.88);
  line-height: 1.6;
}
.vwanvrsc-capBadge{
  font-weight: 950;
  letter-spacing: .02em;
  font-size: 20px;
  color: rgba(79,70,229,.92);
  text-shadow: 0 14px 40px rgba(79,70,229,.16);
}

.vwanvrsc-barTrack{
  position:relative;
  height: 8px;
  border-radius: 999px;
  background: rgba(148,163,184,.20);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
  overflow:hidden;
}
.vwanvrsc-barFill{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(79,70,229,.92), rgba(59,130,246,.92));
  box-shadow: 0 10px 26px rgba(79,70,229,.18);
  transition: width .55s cubic-bezier(.19,1,.22,1);
}
.vwanvrsc-barDot{
  position:absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(79,70,229,.22);
  box-shadow:
    0 16px 40px rgba(15,23,42,.10),
    0 0 0 6px rgba(79,70,229,.08);
  transition: left .55s cubic-bezier(.19,1,.22,1);
}
.vwanvrsc-barMeta{
  margin-top: 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.vwanvrsc-metaK{
  font-size: 11px;
  letter-spacing:.16em;
  text-transform: uppercase;
  color: rgba(15,23,42,.50);
  font-weight: 900;
}
.vwanvrsc-metaV{
  font-size: 12px;
  font-weight: 950;
  color: rgba(15,23,42,.70);
}

/* buttons */
.vwanvrsc-actions{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 560px;
}
.vwanvrsc-btn{
  border: 1px solid rgba(148,163,184,.24);
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.62));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 14px;
  padding: 12px 14px;
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 950;
  color: rgba(15,23,42,.76);
  cursor:pointer;
  box-shadow: 0 14px 44px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.88);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.vwanvrsc-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 60px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.90);
}
.vwanvrsc-btn.is-active{
  border-color: rgba(79,70,229,.30);
  box-shadow: 0 22px 70px rgba(79,70,229,.12), inset 0 1px 0 rgba(255,255,255,.90);
}
.vwanvrsc-btnIco{
  width: 38px; height: 38px;
  border-radius: 12px;
  display:grid; place-items:center;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.95), rgba(255,255,255,.68));
  border: 1px solid rgba(255,255,255,.82);
  box-shadow: 0 14px 34px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.92);
}
.vwanvrsc-btnIco i{ font-size: 16px; color: rgba(79,70,229,.92); }

/* right main glass */
.vwanvrsc-rightCard{   
  border-radius: 26px;
  padding: 18px 18px 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.62));
  border: 1px solid rgba(148,163,184,.26);
  box-shadow: var(--shadow1), inset 0 1px 0 rgba(255,255,255,.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overflow:hidden;  /* 防止任何子元素越界 */
}

.vwanvrsc-rightHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 4px 4px 12px;
}
.vwanvrsc-rightTitle b{
  font-size: 14px;
  font-weight: 950;
  color: rgba(15,23,42,.86);
}

.vwanvrsc-rightTools{
  display:flex;
  align-items:center;
  gap: 10px;
}

.vwanvrsc-liveBtn{
  border: 1px solid rgba(148,163,184,.22);
  background: rgba(255,255,255,.62);
  border-radius: 999px;
  padding: 7px 10px;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  cursor:pointer;
  box-shadow: 0 12px 34px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.88);
}
.vwanvrsc-liveBtn .vwanvrsc-liveTxt{
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .14em;
  color: rgba(15,23,42,.72);
}
.vwanvrsc-liveDot{
  width: 8px; height: 8px;
  border-radius: 999px;
  background: rgba(239,68,68,.92);
  box-shadow: 0 0 0 6px rgba(239,68,68,.10);
}
.vwanvrsc-liveBtn.is-on .vwanvrsc-liveDot{
  animation: vwanvrscPulse 1.1s ease-in-out infinite;
}
@keyframes vwanvrscPulse{
  0%,100%{ transform: scale(1); opacity: 1; }
  50%{ transform: scale(1.15); opacity: .78; }
}

.vwanvrsc-health{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-size: 12px;
  font-weight: 950;
  color: rgba(34,197,94,.92);
}
.vwanvrsc-healthDot{
  width: 8px; height: 8px;
  border-radius: 999px;
  background: rgba(34,197,94,.95);
  box-shadow: 0 0 0 6px rgba(34,197,94,.10);
}

/* dashboard container (dark) */
.vwanvrsc-dashboard{
  border-radius: 18px;
  padding: 10px;
  background: rgba(15,23,42,.06);
  border: 1px solid rgba(148,163,184,.24);
  overflow: hidden;
}

.vwanvrsc-dbInner{
  position:relative;
  border-radius: 16px;
  overflow:hidden;
  background:
    radial-gradient(900px 420px at 22% 18%, rgba(139,92,246,.22), transparent 58%),
    radial-gradient(900px 520px at 84% 72%, rgba(34,211,238,.14), transparent 62%),
    linear-gradient(180deg, #0b1223, #0a1020);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 22px 70px rgba(15,23,42,.30);
  min-height: 304px;
  height: clamp(300px, 34vw, 360px);
  transform: perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition: transform .16s ease;
  outline: none;
}

/* scan + noise */
.vwanvrsc-dbScan{
  position:absolute; inset:-40%;
  background: linear-gradient(120deg,
    rgba(255,255,255,0) 30%,
    rgba(255,255,255,.10) 48%,
    rgba(34,211,238,.10) 52%,
    rgba(255,255,255,0) 70%);
  transform: translateX(-40%) rotate(12deg);
  opacity: .0;
  pointer-events:none;
  mix-blend-mode: screen;
}
.vwanvrsc-dbInner.is-live .vwanvrsc-dbScan{
  opacity: .45;
  animation: vwanvrscScan 3.8s ease-in-out infinite;
}
@keyframes vwanvrscScan{
  0%{ transform: translateX(-46%) rotate(12deg); opacity: .05; }
  35%{ opacity: .28; }
  100%{ transform: translateX(46%) rotate(12deg); opacity: .06; }
}
.vwanvrsc-dbNoise{
  position:absolute; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  opacity: .12;
  pointer-events:none;
  mix-blend-mode: overlay;
}

/* layout inside dashboard */
.vwanvrsc-dbSide{
  position:absolute;
  left:0; top:0; bottom:0;
  width: 112px;
  padding: 14px 12px;
  border-right: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.vwanvrsc-dbBrand{
  display:flex;
  align-items:center;
  gap: 8px;
  color: rgba(255,255,255,.86);
  font-weight: 950;
  font-size: 12px;
  letter-spacing:.02em;
}
.vwanvrsc-dbMark{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: rgba(34,211,238,.88);
  box-shadow: 0 0 0 6px rgba(34,211,238,.12);
}
.vwanvrsc-dbNav{
  margin-top: 14px;
  display:flex;
  flex-direction:column;
  gap: 10px;
  font-size: 11px;
  color: rgba(255,255,255,.62);
}
.vwanvrsc-dbNav span{
  display:flex;
  align-items:center;
  gap: 8px;
  opacity:.9;
}
.vwanvrsc-dbNav span i{ opacity:.9; }
.vwanvrsc-dbNav span.is-on{
  color: rgba(255,255,255,.88);
}

.vwanvrsc-dbMain{
  margin-left: 118px;
  padding: 14px 14px 14px;
  height: 100%;
  overflow: hidden;
}

/* KPI cards */
.vwanvrsc-dbKpis{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.vwanvrsc-dbKpi{
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.vwanvrsc-dbKpi .k{
  font-size: 10px;
  letter-spacing:.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
}
.vwanvrsc-dbKpi .v{
  margin-top: 6px;
  font-size: 21px;
  font-weight: 950;
  color: rgba(255,255,255,.90);
}
.vwanvrsc-dbKpi .v small{
  font-size: 12px;
  opacity: .75;
  margin-left: 4px;
}
.vwanvrsc-dbKpi .s{ margin-top: 6px; }
.chip{
  display:inline-flex;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 950;
  letter-spacing:.08em;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.78);
}
.chip.warn{ border-color: rgba(239,68,68,.22); color: rgba(255,192,192,.90); }
.chip.ok{ border-color: rgba(34,197,94,.22); color: rgba(187,255,214,.90); }

/* chart grid */
.vwanvrsc-dbGrid{
  margin-top: 10px;
  display:grid;
  grid-template-columns: 1.2fr .88fr;
  grid-template-rows: 214px 188px;
  align-items: stretch;
  gap: 10px;
}
.vwanvrsc-dbCard{
  border-radius: 14px;
  padding: 10px 12px 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  position:relative;
}
.vwanvrsc-dbCard .hd{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.vwanvrsc-dbCard .hd b{
  font-size: 12px;
  color: rgba(255,255,255,.88);
}
.vwanvrsc-dbCard .tag{
  font-size: 10px;
  font-weight: 950;
  letter-spacing:.10em;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.72);
}
.vwanvrsc-dbCanvas{
  width: 100%;
  height: calc(100% - 120px); 
  display:block;
  border-radius: 10px;
  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.06);
}

/* layout specific */
.vwanvrsc-dbCard--line{ min-height: 214px; }
.vwanvrsc-dbCard--donut{ min-height: 214px; }
.vwanvrsc-dbCard--bars{ min-height: 188px; }
.vwanvrsc-dbCard--status{ min-height: 188px; }

/* donuts */
.vwanvrsc-dbDonuts{
  display:flex;
  gap: 10px;
  justify-content:space-between;
  margin-top: 8px;
}
.vwanvrsc-donut{
  all: unset;
  cursor:pointer;
  width: calc(33.333% - 6px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 8px;
  padding: 8px 6px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  transition: transform .18s ease, border-color .18s ease;
}
.vwanvrsc-donut:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.14);
}
.vwanvrsc-donut .ring{
  width: 54px; height: 54px;
  border-radius: 999px;
  background:
    conic-gradient(from 270deg,
      rgba(34,211,238,.92) 0 var(--p,30%),
      rgba(255,255,255,.10) var(--p,30%) 100%);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 16px 44px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.10);
  position:relative;
}
.vwanvrsc-donut .ring::after{
  content:"";
  position:absolute;
  inset: 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(10,16,32,.90), rgba(10,16,32,.72));
  border: 1px solid rgba(255,255,255,.06);
}
.vwanvrsc-donut .pct{
  margin-top: -46px;
  z-index:2;
  color: rgba(255,255,255,.90);
  font-weight: 950;
}
.vwanvrsc-donut .pct b{ font-size: 14px; }
.vwanvrsc-donut .pct small{ opacity:.78; margin-left: 2px; }
.vwanvrsc-donut .lbl{
  font-size: 10px;
  letter-spacing:.10em;
  text-transform: uppercase;
  color: rgba(255,255,255,.66);
}

.vwanvrsc-dbLegend{
  margin-top: 10px;
  display:flex;
  justify-content:space-between;
  font-size: 10px;
  color: rgba(255,255,255,.70);
}
.vwanvrsc-dbLegend .dot{
  display:inline-block;
  width:8px;height:8px;
  border-radius:999px;
  margin-right: 6px;
}
.dot1{ background: rgba(34,211,238,.92); box-shadow: 0 0 0 5px rgba(34,211,238,.12); }
.dot2{ background: rgba(139,92,246,.92); box-shadow: 0 0 0 5px rgba(139,92,246,.12); }
.dot3{ background: rgba(34,197,94,.92); box-shadow: 0 0 0 5px rgba(34,197,94,.12); }

/* status rows */
.vwanvrsc-dbRows{ margin-top: 10px; display:flex; flex-direction:column; gap: 8px; }
.vwanvrsc-dbRows .row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.06);
}
.vwanvrsc-dbRows .k{
  font-size: 10px;
  letter-spacing:.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
  font-weight: 950;
}
.vwanvrsc-dbRows .v{
  font-size: 12px;
  font-weight: 950;
  color: rgba(255,255,255,.86);
}
.vwanvrsc-dbRows .v.st{ color: rgba(255,255,255,.86); }
.vwanvrsc-dbHint{
  margin-top: 8px;
  line-height: 1.4;
  font-size: 10.5px;
  color: rgba(255,255,255,.60);
  opacity:.9;
}

/* tooltip */
.vwanvrsc-tip{
  position:absolute;
  top: 12px;
  right: 12px;
  width: 190px;
  border-radius: 14px;
  padding: 10px 10px;
  background: rgba(0,0,0,.24);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 56px rgba(0,0,0,.30);
  opacity:0;
  transform: translateY(6px);
  transition: opacity .14s ease, transform .14s ease;
  pointer-events:none;
}
.vwanvrsc-tip.is-on{
  opacity:1;
  transform: translateY(0);
}
.vwanvrsc-tip .t{
  font-size: 10px;
  letter-spacing:.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.66);
}
.vwanvrsc-tip b{
  display:block;
  margin-top: 6px;
  font-size: 12.5px;
  color: rgba(255,255,255,.90);
}
.vwanvrsc-tip small{
  display:block;
  margin-top: 2px;
  font-size: 11px;
  color: rgba(255,255,255,.74);
}

/* ai badge */
.vwanvrsc-aiBadge{
  /* position:absolute; */
  right: 10px;
  bottom: 10px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  font-weight: 950;
  font-size: 12px;
  color: rgba(255,255,255,.88);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
}

/* metrics below dashboard */
.vwanvrsc-metrics{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 6px 4px 2px;
}
.vwanvrsc-metric{
  text-align:center;
  border-radius: 14px;
  padding: 10px 8px 9px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.76);
  box-shadow: 0 14px 40px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.90);
}
.vwanvrsc-mk{
  font-size: 11px;
  letter-spacing:.16em;
  text-transform: uppercase;
  color: rgba(100,116,139,.78);
  font-weight: 950;
}
.vwanvrsc-mv{
  margin-top: 6px;
  font-size: 18px;
  font-weight: 950;
  color: rgba(15,23,42,.86);
}

/* RWD */
@media (max-width: 1024px){
  .vwanvrsc-shell{ grid-template-columns: 1fr; gap: 22px; }
  .vwanvrsc-title{ font-size: 34px; }
  .vwanvrsc-dbSide{ display:none; }
  .vwanvrsc-dbMain{ margin-left: 0; }
}
@media (max-width: 640px){
  .vwanvrsc-section{ padding: 60px 0 70px; }
  .vwanvrsc-title{ font-size: 30px; }
  .vwanvrsc-actions{ grid-template-columns: 1fr; }
  .vwanvrsc-metrics{ grid-template-columns: 1fr; }
  .vwanvrsc-dbGrid{ grid-template-columns: 1fr; grid-template-rows:auto auto auto auto; }
  .vwanvrsc-dbCard--line{ grid-column:1; grid-row:1; }
  .vwanvrsc-dbCard--donut{ grid-column:1; grid-row:2; }
  .vwanvrsc-dbCard--bars{ grid-column:1; grid-row:3; }
  .vwanvrsc-dbCard--status{ grid-column:1; grid-row:4; }
}

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  .vwanvrsc-dbInner{ transition:none !important; transform:none !important; }
  .vwanvrsc-dbInner.is-live .vwanvrsc-dbScan{ animation:none !important; }
  .vwanvrsc-barFill,.vwanvrsc-barDot{ transition:none !important; }
}


/* =========================================================
   ORBIT FIX (最底覆蓋)：用 left/top + CSS var 排位，避免 transform 被蓋
========================================================= */
.vwamem-section .vwamem-orbit{
  position:absolute;
  inset:10px;
  border-radius:999px;
  pointer-events:none;
}

/*  關鍵：別再用 transform 排位；用 left/top calc */
.vwamem-section .vwamem-orbitItem{
  position:absolute;

  /* 用變數推開 */
  left: calc(50% + var(--ox, 0px)) !important;
  top:  calc(50% + var(--oy, 0px)) !important;

  /* transform 只保留置中 */
  transform: translate(-50%, -50%) !important;

  pointer-events:auto;
  user-select:none;
  touch-action:none;
  will-change:left, top;
}

/* 前後景深 */
.vwamem-section .vwamem-orbitItem.is-back .vwamem-orbitPill{
  opacity:.42;
  filter: blur(.2px) saturate(.9);
  transform: scale(.92);
}
.vwamem-section .vwamem-orbitItem.is-front .vwamem-orbitPill{
  opacity:1;
  transform: scale(1.03);
  filter: saturate(1.05);
}