/* ============================================================
   common.css — 暗色科技風共用設計系統 v3（藍色基調・對齊參考圖）
   信用卡大數據儀表板入口網站 (demo4)
   Palette: 深海軍藍底 + 亮藍/青藍發光 + 金色點綴（logo / 信任徽章）
   Fonts: Noto Sans TC (CJK body) · Sora (display) · IBM Plex Mono (data)
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}

:root{
  /* ── 底色 / 表面（海軍藍） ── */
  --bg-0:#040b1e;
  --bg-1:#081a42;
  --bg-2:#0c2862;
  --surface:#0d2752;
  --surface-2:#103168;
  --glass:rgba(16,49,104,.5);
  --line:rgba(120,170,255,.14);
  --line-strong:rgba(120,170,255,.3);
  --hair:rgba(255,255,255,.06);

  /* ── 品牌藍 ── */
  --blue:#2e7fff;          /* 主藍 */
  --blue-soft:#4d9bff;
  --blue-deep:#1a56c4;
  --blue-deeper:#0f3a91;
  --glow:#5db8ff;          /* 青藍發光 */
  --glow-2:#93d4ff;
  --gold:#c9a227;
  --gold-soft:#e2c45a;

  /* ── 文字 ── */
  --ink:#eaf1fb;
  --ink-soft:#a8c2e8;
  --ink-mute:#5f7bab;

  /* ── 報表暗紅（分析頁淺色報表，對齊 3.png） ── */
  --maroon:#7a2b2b;--maroon2:#9a3a3a;--maroon-dk:#5f2020;
  /* 堆疊長條圖彩虹配色（對齊 3.png） */
  --c-ben:#2f5fa6;--c-r2:#e3ba43;--c-r3:#4a9d5b;--c-oth:#b0392f;
  --c-cyan:#1f9bb5;--c-orange:#dd8a3c;

  /* ── 字體 ── */
  --f-cjk:'Noto Sans TC',sans-serif;
  --f-display:'Sora','Noto Sans TC',sans-serif;
  --f-mono:'IBM Plex Mono','Noto Sans TC',monospace;

  --radius:20px;
  --shadow:0 30px 70px rgba(0,0,0,.5);
  --ease:cubic-bezier(.22,1,.36,1);
}

html{scroll-behavior:smooth;}
body{
  font-family:var(--f-cjk);
  min-height:100vh;display:flex;flex-direction:column;
  color:var(--ink);
  background:var(--bg-0);
  position:relative;overflow-x:hidden;
}

/* ── 極光 mesh 漸層（藍，緩慢飄移） ── */
body::before{
  content:'';position:fixed;inset:-20%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(48% 40% at 16% 4%,rgba(46,127,255,.4),transparent 60%),
    radial-gradient(42% 36% at 88% 0%,rgba(93,184,255,.24),transparent 58%),
    radial-gradient(52% 46% at 80% 98%,rgba(26,86,196,.34),transparent 62%),
    radial-gradient(44% 40% at 4% 92%,rgba(15,58,145,.3),transparent 60%),
    linear-gradient(160deg,var(--bg-0) 0%,var(--bg-1) 48%,var(--bg-2) 100%);
  background-size:200% 200%;
  animation:aurora 26s ease-in-out infinite;
}
@keyframes aurora{0%,100%{background-position:0% 0%}50%{background-position:100% 60%}}

/* ── 細網格 + 暈影 ── */
body::after{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(93,184,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(93,184,255,.05) 1px,transparent 1px),
    radial-gradient(ellipse 120% 80% at 50% 40%,transparent 55%,rgba(0,0,0,.55) 100%);
  background-size:56px 56px,56px 56px,100% 100%;
  -webkit-mask-image:radial-gradient(ellipse 130% 100% at 50% 0%,#000 30%,transparent 90%);
  mask-image:radial-gradient(ellipse 130% 100% at 50% 0%,#000 30%,transparent 90%);
}

/* 噪點顆粒層 */
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.35;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");}

/* 字體工具 */
.mono{font-family:var(--f-mono);font-feature-settings:"tnum" 1;letter-spacing:.3px;}
.display{font-family:var(--f-display);}

/* 捲軸 */
*::-webkit-scrollbar{width:11px;height:11px;}
*::-webkit-scrollbar-track{background:rgba(6,20,48,.5);}
*::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--blue),var(--blue-deeper));border-radius:8px;border:2px solid rgba(6,20,48,.6);}
*::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--glow),var(--blue));}

/* ── 載入交錯淡入 ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.reveal{opacity:0;animation:fadeUp .7s var(--ease) forwards;}
.reveal.d1{animation-delay:.05s}.reveal.d2{animation-delay:.15s}
.reveal.d3{animation-delay:.27s}.reveal.d4{animation-delay:.4s}
.reveal.d5{animation-delay:.55s}.reveal.d6{animation-delay:.7s}
@media(prefers-reduced-motion:reduce){
  .reveal{animation:none;opacity:1;transform:none}
  body::before{animation:none}
}

/* ── 頂部品牌列（藍漸層） ── */
.header{display:flex;align-items:center;justify-content:space-between;
  padding:0 1.9rem;height:66px;flex-shrink:0;position:sticky;top:0;z-index:50;
  background:linear-gradient(180deg,rgba(17,55,128,.92),rgba(9,28,72,.82));
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);
  box-shadow:0 6px 30px rgba(0,0,0,.4);}
.header::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(93,184,255,.65),rgba(201,162,39,.4),transparent);}
.brand{display:flex;align-items:center;gap:14px;}
.brand img{height:42px;filter:drop-shadow(0 2px 12px rgba(201,162,39,.45));}
.brand .txt{line-height:1.16;}
.brand .txt b{font-size:1.06rem;font-weight:900;letter-spacing:.5px;color:var(--ink);}
.brand .txt small{display:block;font-family:var(--f-display);font-size:.6rem;letter-spacing:1.2px;color:var(--ink-mute);text-transform:uppercase;}
.header-right{display:flex;align-items:center;gap:13px;font-size:.84rem;color:var(--ink-soft);}
.data-date{display:flex;align-items:center;gap:7px;color:var(--ink-soft);font-weight:500;}
.data-date i{color:var(--gold-soft);}
.data-date .mono{color:var(--ink);}
.greet b{color:var(--glow);font-weight:700;}
.hbtn{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:10px;cursor:pointer;
  font-family:inherit;font-size:.8rem;font-weight:600;color:var(--glow-2);
  background:rgba(93,184,255,.08);border:1px solid rgba(93,184,255,.4);transition:all .25s var(--ease);}
.hbtn:hover{background:var(--blue);color:#fff;border-color:var(--blue);
  box-shadow:0 8px 22px rgba(46,127,255,.42);transform:translateY(-1px);}

/* ── 系統切換按鈕（登入者資訊左方） ── */
.sys-switch{display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:12px;
  background:rgba(8,26,66,.5);border:1px solid var(--line-strong);}
.sys-switch a{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:9px;
  font-family:inherit;font-size:.8rem;font-weight:600;color:var(--ink-soft);text-decoration:none;
  white-space:nowrap;cursor:pointer;transition:all .25s var(--ease);}
.sys-switch a i{font-size:.82rem;color:var(--glow);transition:color .25s var(--ease);}
.sys-switch a:hover{color:#fff;background:rgba(93,184,255,.14);}
.sys-switch a.active{color:#fff;background:var(--blue);box-shadow:0 6px 18px rgba(46,127,255,.4);}
.sys-switch a.active i{color:#fff;}
.sys-switch a.disabled{color:var(--ink-mute);cursor:not-allowed;pointer-events:none;}
.sys-switch a.disabled i{color:var(--ink-mute);}
.head-sep{width:1px;height:26px;flex-shrink:0;margin:0 6px;
  background:linear-gradient(180deg,transparent,rgba(93,184,255,.5),transparent);}

/* ── 共用頁尾母題 ── */
.footer{position:relative;flex-shrink:0;margin-top:auto;padding:1.7rem 2.2rem 1.4rem;overflow:hidden;z-index:2;}
.footer .skyline{position:absolute;left:0;right:0;bottom:0;width:100%;opacity:.5;pointer-events:none;}
.footer .wave{position:absolute;left:0;right:0;bottom:0;width:100%;pointer-events:none;}
.footer-inner{position:relative;z-index:2;max-width:1320px;margin:0 auto;}
.trust-pill{display:inline-flex;align-items:center;gap:9px;
  padding:8px 18px;border-radius:999px;font-size:.76rem;font-weight:700;letter-spacing:3px;color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--blue-deeper));
  box-shadow:0 10px 26px rgba(46,127,255,.4),0 0 0 1px rgba(93,184,255,.3) inset;
  border:1px solid rgba(93,184,255,.34);}
.trust-pill i{color:var(--gold-soft);}
.copyright{margin-top:.6rem;font-size:.72rem;color:var(--ink-mute);line-height:1.6;}
/* 頁尾圖（f1.png：安全標語 + 版權） */
.footer-img{display:block;width:auto;height:auto;max-width:100%;max-height:66px;}
.copyright .mono{letter-spacing:.5px;}

@media(max-width:820px){
  .header{flex-wrap:wrap;height:auto;padding:.6rem 1rem;gap:.5rem;}
  .header-right{font-size:.78rem;gap:8px;flex-wrap:wrap;}
}