/* ============================================================
   dashboard.css — 儀表板分析總覽（2.png）v4
   藍導覽 + 發光地球(大背景) + 兩張橫幅卡(3D刷卡機 / 信用卡) + 最新消息
   ============================================================ */

/* ── 頂部品牌列配置已拉出至 header.css（.brand / .header-right） ── */

/* ── 導覽列（暖→藍漸層選單） ── */
.navbar{display:flex;align-items:center;justify-content:space-between;padding:0 1.7rem;height:54px;flex-shrink:0;position:sticky;top:66px;z-index:40;
  background:linear-gradient(180deg,#2a5596 0%,#173f8a 44%,#0c2a66 100%);
  border-top:1px solid rgba(226,196,90,.45);
  border-bottom:1px solid var(--line-strong);box-shadow:0 6px 22px rgba(6,18,48,.4);overflow:hidden;}
/* 選單科技光暈 + 中線 */
.navbar::before{content:'';position:absolute;left:0;right:0;top:50%;height:150%;transform:translateY(-50%);pointer-events:none;
  background:radial-gradient(58% 82% at 50% 50%,rgba(93,184,255,.2),transparent 72%);}
.navbar::after{content:'';position:absolute;left:6%;right:6%;bottom:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(93,184,255,.6),transparent);}
.nav-item{display:inline-flex;align-items:center;gap:8px;height:54px;padding:0 16px;
  color:#cfe1f7;text-decoration:none;font-size:.9rem;font-weight:600;position:relative;z-index:1;
  transition:color .2s;white-space:nowrap;}
.nav-item i{font-size:.95rem;color:#9fc4f0;transition:color .2s;}
.nav-item:hover{color:#fff;}
.nav-item:hover i{color:var(--glow);}
/* 啟用項：發光膠囊（對齊參考圖 首頁 高亮） */
.nav-item.active{color:#fff;}
.nav-item.active i{color:#bfe2ff;}
.nav-item.active::before{content:'';position:absolute;inset:8px 4px;border-radius:11px;z-index:-1;
  background:linear-gradient(180deg,rgba(93,184,255,.36),rgba(46,127,255,.16));
  border:1px solid rgba(140,205,255,.55);
  box-shadow:0 0 18px rgba(93,184,255,.5),inset 0 0 14px rgba(120,200,255,.35);}
.nav-item.active::after{content:'';position:absolute;left:14px;right:14px;bottom:5px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--glow),transparent);box-shadow:0 0 10px rgba(93,184,255,.85);}

/* ── 內容 ── */
.main{flex:1;padding:.8rem 2.2rem 1.2rem;max-width:1320px;width:100%;margin:0 auto;position:relative;z-index:2;}
.crumb{font-family:var(--f-display);font-size:.78rem;color:var(--ink-mute);margin-bottom:.5rem;letter-spacing:.5px;}
.crumb b{color:var(--glow);font-weight:600;}
.page-title{display:flex;align-items:center;gap:12px;font-size:1.5rem;font-weight:900;margin-bottom:.6rem;color:#fff;letter-spacing:1px;}
.page-title i{color:var(--glow);filter:drop-shadow(0 0 12px rgba(93,184,255,.8));}

/* ── 場景：地球背景 + 兩張卡 ── */
.dash-scene{position:relative;margin-bottom:1rem;min-height:320px;
  display:flex;align-items:center;}
/* 科技大數據底圖（全幅，含發光網格地球＋網路節點＋城市天際線） */
.scene-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(5,13,34,.06) 0%,rgba(6,16,40,.12) 40%,rgba(4,11,30,.5) 80%,rgba(4,11,30,.92) 100%),
    url("../../b22.jpg") center top/cover no-repeat;
  -webkit-mask:linear-gradient(180deg,#000 0%,#000 88%,transparent 100%);
  mask:linear-gradient(180deg,#000 0%,#000 88%,transparent 100%);}
/* 發光網格旋轉地球（canvas 動畫）— b22 底圖已含地球，移除避免重複 */
.globe-canvas{display:none;}
@media(max-width:760px){.globe-canvas{left:60%;width:380px;height:380px;opacity:.7;}}

/* 發光地球（大背景，置中於兩卡之間/後方） */
.globe-bg{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);width:600px;height:600px;z-index:1;
  display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:1;}
/* 地球後方光暈（讓地球在科技底圖上更突出） */
.globe-bg::before{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:680px;height:680px;border-radius:50%;
  background:radial-gradient(circle,rgba(46,127,255,.5) 0%,rgba(28,82,184,.26) 40%,transparent 68%);
  filter:blur(7px);}
.globe{position:relative;width:480px;height:480px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#4a93ff 0%,#1c52b8 42%,#0d2c72 70%,#071c46 100%);
  box-shadow:0 0 150px rgba(46,127,255,.7),0 0 260px rgba(46,127,255,.4),
    inset -26px -28px 84px rgba(0,0,0,.62),inset 20px 20px 64px rgba(120,180,255,.34);
  animation:globefloat 9s ease-in-out infinite;overflow:hidden;}
@keyframes globefloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.globe .dots{position:absolute;inset:0;border-radius:50%;overflow:hidden;
  -webkit-mask:radial-gradient(circle at 42% 38%,#000 55%,transparent 92%);mask:radial-gradient(circle at 42% 38%,#000 55%,transparent 92%);}
.globe .dots::before{content:'';position:absolute;top:-10%;left:0;width:200%;height:120%;
  background:radial-gradient(circle,rgba(160,205,255,.5) 1px,transparent 1.7px);background-size:16px 16px;
  animation:globespin 18s linear infinite;}
@keyframes globespin{to{transform:translateX(-50%)}}
.globe .lat{position:absolute;inset:0;border-radius:50%;overflow:hidden;
  background:repeating-linear-gradient(0deg,transparent 0 22px,rgba(150,200,255,.14) 22px 23px);
  -webkit-mask:radial-gradient(circle,#000 78%,transparent 99%);mask:radial-gradient(circle,#000 78%,transparent 99%);}
.globe .mer{position:absolute;top:0;left:50%;width:58%;height:100%;transform:translateX(-50%);
  border-left:1px solid rgba(150,200,255,.13);border-right:1px solid rgba(150,200,255,.13);border-radius:50%;}
.globe .mer.m2{width:90%;}
.globe-bg .orbit{position:absolute;left:50%;top:50%;width:560px;height:560px;transform:translate(-50%,-50%) rotateX(75deg);
  border:1px solid rgba(93,184,255,.34);border-radius:50%;animation:orbitspin 16s linear infinite;}
.globe-bg .orbit::after{content:'';position:absolute;top:-4px;left:50%;width:8px;height:8px;border-radius:50%;background:var(--glow);box-shadow:0 0 12px var(--glow);}
@keyframes orbitspin{to{transform:translate(-50%,-50%) rotateX(75deg) rotate(360deg)}}
/* 第二條軌道（反向、較傾斜） */
.globe-bg .orbit2{width:660px;height:660px;transform:translate(-50%,-50%) rotateX(72deg) rotateZ(28deg);
  border-color:rgba(140,108,255,.26);animation:orbitspin2 24s linear infinite;}
.globe-bg .orbit2::after{background:#c4a4ff;box-shadow:0 0 12px #c4a4ff;}
@keyframes orbitspin2{to{transform:translate(-50%,-50%) rotateX(72deg) rotateZ(28deg) rotate(-360deg)}}
/* 發光陸塊（自轉，營造地球感） */
.globe .land{position:absolute;inset:0;border-radius:50%;overflow:hidden;
  -webkit-mask:radial-gradient(circle at 42% 38%,#000 58%,transparent 92%);mask:radial-gradient(circle at 42% 38%,#000 58%,transparent 92%);}
.globe .land::before{content:'';position:absolute;top:0;left:0;width:200%;height:100%;
  background:
    radial-gradient(ellipse 56px 92px at 16% 36%,rgba(126,196,255,.5),transparent 70%),
    radial-gradient(ellipse 92px 58px at 33% 62%,rgba(126,196,255,.44),transparent 70%),
    radial-gradient(ellipse 64px 112px at 54% 30%,rgba(150,210,255,.5),transparent 72%),
    radial-gradient(ellipse 48px 70px at 70% 64%,rgba(126,196,255,.42),transparent 70%),
    radial-gradient(ellipse 84px 60px at 86% 42%,rgba(140,205,255,.44),transparent 72%),
    radial-gradient(ellipse 40px 56px at 96% 70%,rgba(126,196,255,.4),transparent 70%);
  filter:blur(2.5px);animation:globespin 22s linear infinite;}
/* 球面高光 */
.globe .shine{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 34% 28%,rgba(190,225,255,.55),transparent 38%);
  -webkit-mask:radial-gradient(circle,#000 80%,transparent 99%);mask:radial-gradient(circle,#000 80%,transparent 99%);}

/* ── 發光科技平台（地球底座光環，對齊參考圖） ── */
.scene-portal{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);
  width:620px;height:240px;z-index:1;pointer-events:none;}
/* 中央能量核心光暈 */
.scene-portal .core{position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:460px;height:300px;border-radius:50%;
  background:radial-gradient(ellipse 50% 60% at 50% 100%,rgba(120,200,255,.6) 0%,rgba(46,127,255,.3) 30%,transparent 66%);
  filter:blur(8px);animation:corepulse 6s ease-in-out infinite;}
@keyframes corepulse{0%,100%{opacity:.85}50%{opacity:1}}
/* 地面同心光環（透視傾斜） */
.scene-portal .rings{position:absolute;left:50%;bottom:-10px;transform:translate(-50%,38%) rotateX(74deg);
  width:560px;height:560px;border-radius:50%;
  background:repeating-radial-gradient(circle,transparent 0 30px,rgba(93,184,255,.32) 30px 32px);
  -webkit-mask:radial-gradient(circle,#000 8%,rgba(0,0,0,.6) 40%,transparent 72%);
  mask:radial-gradient(circle,#000 8%,rgba(0,0,0,.6) 40%,transparent 72%);}

/* 兩張橫幅卡 */
.dash-cards{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:7rem;width:100%;}
.dcard{position:relative;border-radius:20px;min-height:230px;overflow:hidden;cursor:pointer;text-decoration:none;
  display:flex;align-items:stretch;
  background:linear-gradient(150deg,rgba(11,34,82,.58),rgba(5,17,46,.66));
  border:1px solid var(--line-strong);
  box-shadow:0 22px 50px rgba(0,0,0,.5);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);}
.dcard:hover{transform:translateY(-7px);box-shadow:0 34px 72px rgba(0,0,0,.6),0 0 44px rgba(46,127,255,.3);border-color:rgba(93,184,255,.6);}
.dcard .accent{position:absolute;top:0;left:0;width:4px;height:100%;z-index:5;background:linear-gradient(180deg,var(--glow),var(--blue));}
.dcard.iss .accent{background:linear-gradient(180deg,#a9d2ff,var(--blue));}

/* 視覺舞台（左半，含 3D 裝置） */
.stage{position:relative;flex:0 0 50%;overflow:hidden;display:flex;align-items:center;justify-content:center;}
/* 卡片插圖（m1.png / m2.png）：填滿舞台、右緣淡出融入文字區 */
.stage-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  -webkit-mask:linear-gradient(90deg,#000 68%,transparent 100%);mask:linear-gradient(90deg,#000 68%,transparent 100%);
  transition:transform .45s var(--ease);}
.dcard:hover .stage-img{transform:scale(1.05);}
.stage .grid{position:absolute;inset:0;
  background-image:radial-gradient(rgba(120,180,255,.22) 1.3px,transparent 1.3px);background-size:18px 18px;
  -webkit-mask-image:radial-gradient(ellipse 80% 65% at 50% 60%,#000,transparent 80%);
  mask-image:radial-gradient(ellipse 80% 65% at 50% 60%,#000,transparent 80%);}
.stage .platform{position:absolute;left:50%;bottom:30px;width:212px;height:54px;transform:translateX(-50%);
  border-radius:50%;background:radial-gradient(ellipse,rgba(77,155,255,.72),rgba(77,155,255,0) 70%);filter:blur(4px);}
.stage .iss-plat{background:radial-gradient(ellipse,rgba(140,108,255,.72),rgba(140,108,255,0) 70%);}
.dev{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);z-index:2;animation:bob 6s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 8px))}}

/* 場景底部城市天際線 */
.dash-scene .scene-skyline{position:absolute;left:0;right:0;bottom:-4px;width:100%;height:140px;z-index:1;pointer-events:none;
  filter:drop-shadow(0 0 14px rgba(93,184,255,.45));
  -webkit-mask:linear-gradient(180deg,transparent,#000 55%);mask:linear-gradient(180deg,transparent,#000 55%);}

/* 漂浮迷你 UI 晶片（對齊參考圖卡面周邊元件） */
.chip-float{position:absolute;z-index:3;width:38px;height:38px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,rgba(30,70,140,.62),rgba(10,28,66,.72));
  border:1px solid rgba(120,180,255,.45);color:var(--glow-2);font-size:.82rem;
  box-shadow:0 8px 20px rgba(0,0,0,.42),0 0 16px rgba(46,127,255,.28);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  animation:chipfloat 5s ease-in-out infinite;}
.cf-tl{left:7%;top:18%;animation-delay:.1s;}
.cf-bl{left:5%;bottom:26%;width:48px;height:34px;animation-delay:.7s;}
.cf-tr{right:13%;top:14%;animation-delay:1.2s;}
@keyframes chipfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.chip-float .mbars{display:flex;align-items:flex-end;gap:2px;height:16px;}
.chip-float .mbars i{width:4px;background:var(--glow);border-radius:1px;box-shadow:0 0 6px rgba(93,184,255,.6);}
.cf-pie{border-radius:50%;background:conic-gradient(var(--glow) 0 45%,var(--blue) 45% 72%,var(--gold-soft) 72% 100%);
  border:1px solid rgba(120,180,255,.55);box-shadow:0 8px 20px rgba(0,0,0,.42),0 0 16px rgba(46,127,255,.3);}
@media(prefers-reduced-motion:reduce){.chip-float{animation:none;}}

/* 3D 刷卡機（收單） */
.pos{position:relative;width:104px;height:138px;transform:perspective(620px) rotateX(6deg) rotateY(-20deg);}
.pos-body{position:absolute;inset:0;border-radius:14px;
  background:linear-gradient(160deg,#22467e,#0c2150);
  border:1px solid rgba(120,180,255,.45);
  box-shadow:0 18px 40px rgba(0,0,0,.5),0 0 28px rgba(46,127,255,.3) inset,-6px 0 0 rgba(0,0,0,.25);}
.pos-screen{position:absolute;top:11px;left:11px;right:11px;height:56px;border-radius:8px;
  background:linear-gradient(160deg,#0d63b8,#063b73);border:1px solid rgba(120,200,255,.5);
  box-shadow:0 0 18px rgba(93,184,255,.5) inset;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;}
.pos-screen .lbl{font-family:var(--f-mono);font-size:.5rem;letter-spacing:1px;color:#bfe2ff;}
.pos-screen .pbars{display:flex;align-items:flex-end;gap:2px;height:14px;}
.pos-screen .pbars span{width:3px;background:#7fd0ff;border-radius:1px;}
.pos-keys{position:absolute;top:78px;left:14px;right:14px;display:grid;grid-template-columns:repeat(3,1fr);gap:5px;}
.pos-keys i{height:10px;border-radius:3px;background:rgba(120,180,255,.3);}
.pos-card{position:absolute;top:-14px;right:8px;width:54px;height:34px;border-radius:5px;
  background:linear-gradient(135deg,#ffd97a,#d8a93a);transform:rotate(-12deg);
  box-shadow:0 8px 16px rgba(0,0,0,.45);}
.pos-card::after{content:'';position:absolute;left:6px;top:7px;width:11px;height:8px;border-radius:2px;background:rgba(255,255,255,.55);}

/* 3D 信用卡（發卡） */
.cc-stack{position:relative;width:158px;height:100px;transform:perspective(640px) rotateX(8deg) rotateY(-18deg);}
.cc{position:absolute;width:158px;height:100px;border-radius:12px;
  box-shadow:0 18px 38px rgba(0,0,0,.5),0 0 0 1px rgba(150,200,255,.3) inset;}
.cc.back{top:-16px;left:14px;background:linear-gradient(135deg,#5db8ff,#1a56c4);opacity:.7;}
.cc.front{background:linear-gradient(135deg,#2e7fff,#0f3a91);}
.cc .chip{position:absolute;left:14px;top:24px;width:24px;height:18px;border-radius:4px;background:linear-gradient(135deg,#ffd97a,#cf9f33);}
.cc .chip::after{content:'';position:absolute;inset:3px;border:1px solid rgba(120,80,0,.4);border-radius:2px;}
.cc .brand{position:absolute;right:12px;top:11px;font-family:var(--f-display);font-size:.52rem;letter-spacing:1px;color:#dcebff;font-weight:600;}
.cc .num{position:absolute;left:14px;bottom:26px;font-family:var(--f-mono);font-size:.6rem;letter-spacing:1.5px;color:#eaf3ff;}
.cc .holder{position:absolute;left:14px;bottom:11px;font-family:var(--f-mono);font-size:.46rem;letter-spacing:1px;color:rgba(220,235,255,.8);}

/* 標題（右半） */
.dcard .label{flex:1;display:flex;flex-direction:column;justify-content:center;gap:.7rem;padding:0 1.6rem 0 .4rem;z-index:2;}
.dcard .c-title{font-size:1.6rem;font-weight:900;color:#fff;letter-spacing:1px;line-height:1.36;}
/* 圓形進入按鈕（對齊參考圖：左卡青、右卡紫） */
.dcard .enter{position:absolute;right:1.5rem;bottom:1.4rem;z-index:3;
  width:52px;height:52px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:1.08rem;color:var(--glow);
  border:1.5px solid rgba(93,184,255,.55);background:rgba(93,184,255,.1);
  box-shadow:0 0 22px rgba(93,184,255,.32),0 0 0 6px rgba(93,184,255,.05);
  transition:all .3s var(--ease);}
.dcard.iss .enter{color:#c4a4ff;border-color:rgba(168,128,255,.6);background:rgba(150,110,255,.12);
  box-shadow:0 0 22px rgba(150,110,255,.34),0 0 0 6px rgba(150,110,255,.05);}
.dcard:hover .enter{background:var(--blue);color:#fff;border-color:var(--blue);box-shadow:0 0 28px rgba(46,127,255,.6);}
.dcard.iss:hover .enter{background:#7c5cff;border-color:#7c5cff;box-shadow:0 0 28px rgba(124,92,255,.6);}
.dcard .enter i{transition:transform .25s var(--ease);}
.dcard:hover .enter i{transform:translateX(4px);}

/* 最新消息（深藍玻璃卡） */
.news{position:relative;z-index:2;background:linear-gradient(160deg,rgba(13,40,96,.66),rgba(5,18,48,.8));
  border:1px solid var(--line-strong);border-radius:18px;
  padding:1.3rem 1.6rem;box-shadow:0 18px 40px rgba(0,0,0,.42);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.news-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem;}
.news-head .t{display:flex;align-items:center;gap:9px;font-size:1.08rem;font-weight:900;color:#fff;letter-spacing:.5px;}
.news-head .t i{color:var(--glow);}
.news-more{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-display);font-size:.78rem;color:var(--glow-2);text-decoration:none;
  padding:6px 14px;border-radius:9px;border:1px solid rgba(93,184,255,.4);transition:all .2s var(--ease);}
.news-more:hover{color:#fff;background:var(--blue);border-color:var(--blue);}
table.news-tbl{width:100%;border-collapse:collapse;font-size:.88rem;}
.news-tbl thead th{text-align:left;font-family:var(--f-display);color:var(--ink-mute);font-weight:600;font-size:.74rem;letter-spacing:1px;
  padding:9px 12px;border-bottom:1px solid var(--line-strong);text-transform:uppercase;}
.news-tbl tbody td{padding:11px 12px;border-bottom:1px solid var(--line);color:var(--ink-soft);}
.news-tbl tbody tr{cursor:pointer;transition:background .2s;}
.news-tbl tbody tr:last-child td{border-bottom:none;}
.news-tbl tbody tr:hover{background:rgba(93,184,255,.08);}
.news-tbl tbody tr:hover .n-title{color:#fff;}
.news-tbl tbody tr:hover .n-arrow{color:var(--glow);transform:translateX(3px);}
.n-date{font-family:var(--f-mono);color:var(--glow);font-weight:500;white-space:nowrap;width:130px;font-size:.82rem;}
.n-title{display:inline-flex;align-items:center;gap:10px;}
.n-title .dot{width:7px;height:7px;border-radius:50%;background:var(--glow);box-shadow:0 0 9px rgba(93,184,255,.85);flex-shrink:0;}
.n-tag{font-family:var(--f-display);font-size:.6rem;font-weight:600;letter-spacing:.5px;color:var(--glow-2);
  border:1px solid rgba(93,184,255,.4);border-radius:5px;padding:1px 6px;margin-right:2px;}
.n-arrow{text-align:right;color:var(--ink-mute);width:30px;transition:all .2s var(--ease);}

@media(max-width:980px){
  .dash-cards{grid-template-columns:1fr;}
  .globe-bg{opacity:.4;width:300px;height:300px;}
  .dcard{min-height:200px;}
  .navbar{overflow-x:auto;position:static;}
}