:root {
      --blue: #0B4F8A;
      --blue2: #1E88A8;
      --mint: #22A699;
      --bg: #F3F7FB;
      --card: #FFFFFF;
      --text: #1F2937;
      --muted: #6B7280;
      --line: #E5E7EB;
      --success: #16A34A;
      --warning: #F59E0B;
      --purple: #6366F1;
      --shadow: 0 18px 45px rgba(11, 79, 138, .12);
    }

    body.theme-tzu {
      --blue: #0B4F8A;
      --blue2: #1E88A8;
      --mint: #22A699;
      --bg: #F3F7FB;
      --card: #FFFFFF;
      --text: #1F2937;
      --muted: #6B7280;
      --line: #E5E7EB;
      --shadow: 0 18px 45px rgba(11,79,138,.13);
    }

    body.theme-emerald {
      --blue: #047857;
      --blue2: #0F766E;
      --mint: #34D399;
      --bg: #ECFDF5;
      --card: #FFFFFF;
      --text: #102A27;
      --muted: #64748B;
      --line: #D1FAE5;
      --shadow: 0 18px 45px rgba(4,120,87,.13);
    }

    body.theme-indigo {
      --blue: #3730A3;
      --blue2: #2563EB;
      --mint: #60A5FA;
      --bg: #EEF2FF;
      --card: #FFFFFF;
      --text: #1E1B4B;
      --muted: #64748B;
      --line: #E0E7FF;
      --shadow: 0 18px 45px rgba(55,48,163,.13);
    }

    body.theme-warm {
      --blue: #92400E;
      --blue2: #C2410C;
      --mint: #F59E0B;
      --bg: #FFF7ED;
      --card: #FFFFFF;
      --text: #2F1B10;
      --muted: #78716C;
      --line: #FED7AA;
      --shadow: 0 18px 45px rgba(146,64,14,.13);
    }

    body.theme-dark {
      --blue: #0F172A;
      --blue2: #334155;
      --mint: #38BDF8;
      --bg: #0B1120;
      --card: #111827;
      --text: #F8FAFC;
      --muted: #CBD5E1;
      --line: #263244;
      --shadow: 0 20px 55px rgba(0,0,0,.35);
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: "Noto Sans TC", "Microsoft JhengHei", Arial, sans-serif;
      background:
        radial-gradient(circle at 6% 2%, color-mix(in srgb, var(--mint) 22%, transparent), transparent 28%),
        radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--blue2) 20%, transparent), transparent 28%),
        linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 82%, white) 100%);
      color: var(--text);
      min-height: 100vh;
    }

    .wrap {
      width: min(96vw, 1880px);
      max-width: none;
      margin: 0 auto;
      padding: 24px clamp(18px, 2vw, 36px) 46px;
    }

    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
      gap: 16px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 13px;
    }

    .logo {
      width: 48px;
      height: 48px;
      border-radius: 16px;
      background: linear-gradient(135deg,var(--blue),var(--blue2));
      display: grid;
      place-items: center;
      color: white;
      font-weight: 900;
      box-shadow: 0 10px 22px rgba(11,79,138,.18);
    }

    .brand-title {
      font-size: 19px;
      font-weight: 900;
      letter-spacing: .5px;
    }

    .brand-sub {
      font-size: 12px;
      color: var(--muted);
      margin-top: 3px;
    }

    .top-actions {
      display: flex;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .date-pill,
    .theme-select {
      background: color-mix(in srgb, var(--card) 88%, transparent);
      border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
      color: var(--text);
      padding: 10px 15px;
      border-radius: 999px;
      box-shadow: 0 8px 24px rgba(31,41,55,.06);
      font-size: 13px;
      white-space: nowrap;
    }

    .theme-select {
      outline: none;
      cursor: pointer;
      font-family: inherit;
    }

    .hero {
      position: relative;
      overflow: hidden;
      border-radius: 32px;
      background:
        linear-gradient(135deg, color-mix(in srgb, var(--blue) 96%, black), color-mix(in srgb, var(--blue2) 94%, black)),
        url("data:image/svg+xml,%3Csvg width='1000' height='420' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='white' stroke-opacity='.14'%3E%3Cpath d='M0 160 C200 80 300 240 500 140 S750 90 1000 180'/%3E%3Cpath d='M-40 260 C180 180 340 330 560 220 S760 190 1020 290'/%3E%3Ccircle cx='820' cy='90' r='80'/%3E%3Ccircle cx='870' cy='126' r='145'/%3E%3C/g%3E%3C/svg%3E");
      color: #fff;
      padding: clamp(32px, 3vw, 52px);
      box-shadow: var(--shadow);
      display: grid;
      grid-template-columns: minmax(520px, 1fr) minmax(360px, 520px);
      gap: 28px;
      align-items: end;
      min-height: 285px;
    }

    .hero-content {
      max-width: 980px;
    }

    .label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,.14);
      border: 1px solid rgba(255,255,255,.22);
      font-size: 13px;
      margin-bottom: 16px;
    }

    h1 {
      margin: 0;
      font-size: clamp(34px, 3vw, 52px);
      line-height: 1.18;
      letter-spacing: 1px;
      font-weight: 950;
    }

    .en {
      font-size: 15px;
      opacity: .86;
      margin-top: 8px;
      letter-spacing: .5px;
    }

    .hero p {
      font-size: clamp(16px, 1vw, 19px);
      line-height: 1.85;
      opacity: .96;
      margin: 18px 0 0;
      max-width: 860px;
    }

    .hero-stats {
      display: grid;
      grid-template-columns: repeat(2, minmax(140px, 1fr));
      gap: 12px;
    }

    .glass-stat {
      background: rgba(255,255,255,.16);
      border: 1px solid rgba(255,255,255,.24);
      border-radius: 18px;
      padding: 18px;
      backdrop-filter: blur(12px);
    }

    .glass-stat b {
      display: block;
      font-size: 30px;
      margin-bottom: 3px;
    }

    .glass-stat span {
      font-size: 13px;
      opacity: .86;
    }

    .toolbar {
      margin: 24px 0 20px;
      display: grid;
      grid-template-columns: minmax(360px, 1fr) auto;
      gap: 14px;
      align-items: center;
    }

    .search {
      display: flex;
      align-items: center;
      gap: 10px;
      background: color-mix(in srgb, var(--card) 96%, transparent);
      border: 1px solid color-mix(in srgb, var(--line) 90%, transparent);
      border-radius: 18px;
      padding: 14px 17px;
      box-shadow: 0 10px 28px rgba(11,79,138,.07);
      color: var(--muted);
    }

    .search span {
      font-size: 18px;
    }

    .search input {
      border: 0;
      outline: none;
      width: 100%;
      font-size: 15px;
      font-family: inherit;
      background: transparent;
      color: var(--text);
    }

    .search input::placeholder {
      color: var(--muted);
    }

    .filters {
      display: flex;
      gap: 9px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .chip {
      padding: 10px 15px;
      background: color-mix(in srgb, var(--card) 96%, transparent);
      border: 1px solid var(--line);
      border-radius: 999px;
      font-size: 14px;
      box-shadow: 0 8px 20px rgba(31,41,55,.04);
      cursor: pointer;
      transition: .18s;
      user-select: none;
      color: var(--text);
    }

    .chip:hover {
      transform: translateY(-1px);
      border-color: var(--blue2);
    }

    .chip.active {
      background: linear-gradient(135deg,var(--blue),var(--blue2));
      color: white;
      border-color: transparent;
      font-weight: 800;
    }

    .main {
      display: grid;
      grid-template-columns: minmax(0, 1fr) clamp(320px, 20vw, 390px);
      gap: 22px;
      align-items: start;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 22px;
    }

    .card {
      background: color-mix(in srgb, var(--card) 96%, transparent);
      border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
      border-radius: 28px;
      padding: 28px;
      box-shadow: 0 14px 36px color-mix(in srgb, var(--blue) 9%, transparent);
      min-height: 355px;
      display: flex;
      flex-direction: column;
      transition: .18s;
      position: relative;
      overflow: hidden;
    }

    .card::before {
      content: "";
      position: absolute;
      inset: 0 0 auto 0;
      height: 7px;
      background: linear-gradient(90deg, var(--blue), var(--blue2), var(--mint));
    }

    .card:hover {
      transform: translateY(-4px);
      box-shadow: 0 18px 42px color-mix(in srgb, var(--blue) 14%, transparent);
    }

    .card-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 14px;
      margin-bottom: 18px;
    }

    .icon {
      width: 64px;
      height: 64px;
      border-radius: 20px;
      display: grid;
      place-items: center;
      font-size: 30px;
      background: color-mix(in srgb, var(--blue2) 12%, white);
      flex: 0 0 auto;
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue2) 16%, transparent);
    }

    body.theme-dark .icon {
      background: color-mix(in srgb, var(--blue2) 28%, black);
    }

    .badge {
      padding: 8px 11px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
    }

    .badge.active {
      background: #DCFCE7;
      color: #166534;
    }

    .badge.test {
      background: #FEF3C7;
      color: #92400E;
    }

    .badge.build {
      background: #EDE9FE;
      color: #5B21B6;
    }

    .badge.other {
      background: #E5E7EB;
      color: #374151;
    }

    .card h2 {
      font-size: 22px;
      line-height: 1.42;
      margin: 0 0 6px;
      color: var(--text);
    }

    .subtitle {
      font-size: 13px;
      color: var(--muted);
      margin-bottom: 14px;
    }

    .card p {
      margin: 0;
      color: var(--muted);
      font-size: 15.5px;
      line-height: 1.85;
      flex: 1;
    }

    .tags {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin: 20px 0 14px;
    }

    .tag {
      font-size: 12px;
      color: var(--text);
      background: color-mix(in srgb, var(--line) 45%, transparent);
      padding: 6px 9px;
      border-radius: 999px;
    }

    .card-meta {
      font-size: 12px;
      color: var(--muted);
      margin-bottom: 15px;
      line-height: 1.6;
    }

    .enter {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
      text-decoration: none;
      color: white;
      background: linear-gradient(135deg,var(--blue),var(--blue2));
      padding: 13px 14px;
      border-radius: 15px;
      font-weight: 800;
      font-size: 15px;
      transition: .28s;
      margin-top: auto;
    }

    .enter:hover {
      opacity: .92;
      transform: translateY(-1px);
    }

    .side {
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    .panel {
      background: color-mix(in srgb, var(--card) 96%, transparent);
      border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
      border-radius: 26px;
      box-shadow: 0 14px 36px color-mix(in srgb, var(--blue) 9%, transparent);
      padding: 22px;
    }

    .panel h3 {
      margin: 0 0 15px;
      font-size: 18px;
      color: var(--text);
    }

    .quick {
      display: grid;
      gap: 10px;
    }

    .quick a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 12px 13px;
      border-radius: 15px;
      background: color-mix(in srgb, var(--bg) 65%, var(--card));
      border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
      color: var(--text);
      text-decoration: none;
      font-size: 14px;
      font-weight: 700;
      transition: .18s;
    }

    .quick a:hover {
      background: color-mix(in srgb, var(--blue2) 10%, var(--card));
      border-color: color-mix(in srgb, var(--blue2) 40%, var(--line));
    }

    .notice {
      background: #FFF7ED;
      color: #9A3412;
      border: 1px solid #FED7AA;
      border-radius: 18px;
      padding: 15px;
      font-size: 13.5px;
      line-height: 1.7;
    }

    body.theme-dark .notice {
      background: #1F2937;
      color: #FDE68A;
      border-color: #374151;
    }

    .timeline {
      display: grid;
      gap: 13px;
    }

    .tl {
      display: flex;
      gap: 10px;
      font-size: 13.5px;
      color: var(--muted);
      line-height: 1.5;
    }

    .dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--mint);
      margin-top: 6px;
      flex: 0 0 auto;
    }

    .empty,
    .loading {
      background: var(--card);
      border-radius: 24px;
      padding: 48px 20px;
      text-align: center;
      color: var(--muted);
      box-shadow: 0 14px 36px rgba(11,79,138,.08);
      grid-column: 1 / -1;
    }

    .error {
      background: #FEF2F2;
      color: #991B1B;
      border: 1px solid #FECACA;
      border-radius: 20px;
      padding: 20px;
      line-height: 1.7;
      grid-column: 1 / -1;
    }

    .footer {
      margin-top: 26px;
      text-align: center;
      color: var(--muted);
      font-size: 12px;
    }

    @media(max-width:1350px) {
      .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media(max-width:1180px) {
      .hero {
        grid-template-columns: 1fr;
      }

      .main {
        grid-template-columns: 1fr;
      }

      .toolbar {
        grid-template-columns: 1fr;
      }

      .filters {
        justify-content: flex-start;
      }
    }

    @media(max-width:820px) {
      .grid {
        grid-template-columns: 1fr;
      }
    }

    @media(max-width:720px) {
      .wrap {
        width: 100%;
        padding: 18px 14px 34px;
      }

      .topbar {
        align-items: flex-start;
        gap: 12px;
        flex-direction: column;
      }

      .top-actions {
        justify-content: flex-start;
      }

      .hero {
        padding: 30px 22px;
        border-radius: 24px;
        min-height: auto;
      }

      h1 {
        font-size: 28px;
      }

      .hero p {
        font-size: 15px;
      }

      .hero-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .filters {
        width: 100%;
      }

      .chip {
        flex: 1;
        text-align: center;
      }
    }

    /* ============================================================
       UI/UX・無障礙・動效增強（2026-07-06 新增，純疊加，不改配色）
       目標：卡片 hover 抬升、入場 stagger、鍵盤焦點環、
             prefers-reduced-motion、窄螢幕微調。
       ============================================================ */

    /* (a) 卡片與快速入口 hover：平滑抬升 + 加深陰影 + cursor */
    .card {
      transition: transform .4s ease-out, box-shadow .4s ease-out;
      will-change: transform;
    }

    .card:hover {
      transform: translateY(-4px);
      box-shadow: 0 22px 50px color-mix(in srgb, var(--blue) 18%, transparent);
    }

    .quick a {
      transition: transform .28s ease-out, background .28s ease, border-color .28s ease;
      cursor: pointer;
    }

    .quick a:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 24px color-mix(in srgb, var(--blue) 12%, transparent);
    }

    /* 可點元素統一補 cursor */
    .enter,
    .chip,
    .theme-select,
    .card .enter {
      cursor: pointer;
    }

    /* (b) 系統卡片入場 stagger：淡入 + 上移。
       卡片由 JS innerHTML 重新渲染，故用 CSS animation + nth-child 延遲，
       每次 render 都會重播，長清單延遲上限 .70s。 */
    @keyframes portalCardIn {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .grid > .card {
      animation: portalCardIn .55s ease-out both;
    }

    .grid > .card:nth-child(1)  { animation-delay: .00s; }
    .grid > .card:nth-child(2)  { animation-delay: .06s; }
    .grid > .card:nth-child(3)  { animation-delay: .12s; }
    .grid > .card:nth-child(4)  { animation-delay: .18s; }
    .grid > .card:nth-child(5)  { animation-delay: .24s; }
    .grid > .card:nth-child(6)  { animation-delay: .30s; }
    .grid > .card:nth-child(7)  { animation-delay: .36s; }
    .grid > .card:nth-child(8)  { animation-delay: .42s; }
    .grid > .card:nth-child(9)  { animation-delay: .48s; }
    .grid > .card:nth-child(10) { animation-delay: .54s; }
    .grid > .card:nth-child(11) { animation-delay: .60s; }
    .grid > .card:nth-child(12) { animation-delay: .66s; }
    .grid > .card:nth-child(13) { animation-delay: .70s; }
    .grid > .card:nth-child(n+14) { animation-delay: .70s; }

    /* 快速入口項目也輕微 stagger 淡入 */
    .quick a {
      animation: portalCardIn .5s ease-out both;
    }

    .quick a:nth-child(1) { animation-delay: .07s; }
    .quick a:nth-child(2) { animation-delay: .14s; }
    .quick a:nth-child(3) { animation-delay: .21s; }
    .quick a:nth-child(4) { animation-delay: .28s; }
    .quick a:nth-child(5) { animation-delay: .35s; }
    .quick a:nth-child(n+6) { animation-delay: .42s; }

    /* (c) 鍵盤焦點：明顯焦點環（用既有主色 --blue2），不移除 outline */
    .card:focus-within,
    .enter:focus-visible,
    .chip:focus-visible,
    .theme-select:focus-visible,
    .search:focus-within,
    #searchInput:focus-visible,
    .quick a:focus-visible {
      outline: 3px solid color-mix(in srgb, var(--blue2) 70%, transparent);
      outline-offset: 2px;
      border-radius: 14px;
    }

    /* 進入系統按鈕本身較大圓角，焦點環對齊其外框 */
    .enter:focus-visible {
      outline-offset: 3px;
      border-radius: 15px;
    }

    /* chip 與 theme-select 為膠囊形，焦點環用圓形以貼合 */
    .chip:focus-visible,
    .theme-select:focus-visible {
      border-radius: 999px;
    }

    /* 搜尋框：焦點時同時給容器焦點環並淡化主色邊框 */
    .search:focus-within {
      border-color: color-mix(in srgb, var(--blue2) 45%, var(--line));
      border-radius: 18px;
    }

    /* 讓 chip / 搜尋 input 可接收鍵盤焦點時仍保留原互動樣式，不用 outline:none */

    /* (e) 響應式微調：極窄螢幕(≤480px)讓側欄快速入口/統計卡不擁擠 */
    @media (max-width: 480px) {
      .hero-stats {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
      }
      .glass-stat b {
        font-size: 26px;
      }
      .card {
        padding: 22px;
        min-height: auto;
      }
    }

    /* (d) prefers-reduced-motion：停用動效與位移，只保留即時狀態變化 */
    @media (prefers-reduced-motion: reduce) {
      .grid > .card,
      .quick a {
        animation: none !important;
      }
      .card,
      .quick a,
      .chip,
      .enter {
        transition: none !important;
      }
      .card:hover,
      .quick a:hover,
      .chip:hover,
      .enter:hover {
        transform: none !important;
      }
    }

    /* ============================================================
       明顯但雅致的動態特效（2026-07-07 新增，純疊加）
       維持慈濟藍與版面結構，不改配色、不加外部字體。
       全部特效於 prefers-reduced-motion 停用（見文末覆寫）。
       ============================================================ */

    /* (d) hero 入場：內容淡入 + 上浮 */
    @keyframes portalHeroIn {
      from { opacity: 0; transform: translateY(10px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .hero-content {
      animation: portalHeroIn .8s ease-out both;
    }

    .hero-stats {
      animation: portalHeroIn .8s ease-out .18s both;
    }

    /* (d) 「● 單一入口」badge 的小圓點呼吸：把前置 ● 換成脈動色點 */
    .label {
      position: relative;
      padding-left: 26px;
    }

    .label::before {
      content: "";
      position: absolute;
      left: 12px;
      top: 50%;
      width: 8px;
      height: 8px;
      margin-top: -4px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 0 0 0 rgba(255,255,255,.55);
      animation: portalPulse 3.6s ease-in-out infinite;
    }

    @keyframes portalPulse {
      0%, 100% { transform: scale(1);    opacity: .95; box-shadow: 0 0 0 0 rgba(255,255,255,.5); }
      50%      { transform: scale(1.28); opacity: 1;   box-shadow: 0 0 0 6px rgba(255,255,255,0); }
    }

    /* (b) 卡片 hover 強化：頂部色條由左展開 + 圖示微放大 + 陰影加深 */
    .card::before {
      width: 0;
      transition: width .4s ease-out, filter .4s ease-out;
      will-change: width;
    }

    .card:hover::before {
      width: 100%;
      filter: brightness(1.12) saturate(1.08);
    }

    .card .icon {
      transition: transform .4s ease-out, box-shadow .4s ease-out;
    }

    .card:hover .icon {
      transform: scale(1.06);
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue2) 30%, transparent),
                  0 8px 18px color-mix(in srgb, var(--blue) 16%, transparent);
    }

    /* (c) 常用快速入口 hover：箭頭往右滑動（箭頭在最後一個 span） */
    .quick a span:last-child {
      display: inline-block;
      transition: transform .28s ease-out;
    }

    .quick a:hover span:last-child {
      transform: translateX(5px);
    }

    /* (e) 搜尋框 focus 光暈：用主色 --blue2 柔和外光，與焦點環不衝突 */
    .search {
      transition: box-shadow .3s ease, border-color .3s ease;
    }

    .search:focus-within {
      box-shadow: 0 10px 28px rgba(11,79,138,.07),
                  0 0 0 4px color-mix(in srgb, var(--blue2) 22%, transparent);
    }

    /* (f) 分類 chip 切換更順：背景與文字色補 transition（既有 .18s 為整體，
           此處明確指定色彩相關屬性，讓 active/hover 切換平滑過場） */
    .chip {
      transition: transform .28s ease-out, background .28s ease,
                  color .28s ease, border-color .28s ease, box-shadow .28s ease;
    }

    /* (a) 統計卡數字 count-up：動畫進行中的等寬對齊，避免跳動 */
    .glass-stat b {
      font-variant-numeric: tabular-nums;
    }

    /* (g) 所有新動效於 reduced-motion 停用：hero 直接顯示、圓點不脈動、
           色條直接滿版、箭頭不滑、光暈保留（非動態）、count-up 見 JS 分支 */
    @media (prefers-reduced-motion: reduce) {
      .hero-content,
      .hero-stats {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
      }
      .label::before {
        animation: none !important;
      }
      .card::before {
        width: 100% !important;
        transition: none !important;
      }
      .card:hover .icon,
      .quick a:hover span:last-child {
        transform: none !important;
      }
      .card .icon,
      .quick a span:last-child,
      .card::before {
        transition: none !important;
      }
    }

    /* ============================================================
       使用統計（2026-07-30 新增，純疊加）
       沿用既有主題變數，五套主題與深色大屏皆自動跟著換色，不改原配色。
       ============================================================ */

    /* (1) 頁首公開小列：目前在線／今日使用／累計使用 */
    .usage-pill {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      background: color-mix(in srgb, var(--card) 88%, transparent);
      border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
      color: var(--muted);
      padding: 10px 15px;
      border-radius: 999px;
      box-shadow: 0 8px 24px rgba(31,41,55,.06);
      font-size: 12.5px;
      white-space: nowrap;
    }

    .usage-pill b {
      color: var(--text);
      font-weight: 800;
      font-variant-numeric: tabular-nums;
      margin-left: 4px;
      font-size: 14px;
    }

    .usage-pill .live-dot {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--success);
      margin-right: 6px;
      vertical-align: middle;
      animation: portalDotPulse 3.6s ease-in-out infinite;
    }

    @keyframes portalDotPulse {
      0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(22,163,74,.45); }
      50%      { transform: scale(1.25); box-shadow: 0 0 0 6px rgba(22,163,74,0); }
    }

    .stats-toggle {
      background: color-mix(in srgb, var(--card) 88%, transparent);
      border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
      color: var(--text);
      padding: 10px 15px;
      border-radius: 999px;
      box-shadow: 0 8px 24px rgba(31,41,55,.06);
      font-size: 13px;
      font-family: inherit;
      font-weight: 700;
      white-space: nowrap;
      cursor: pointer;
      transition: transform .28s ease-out, border-color .28s ease;
    }

    .stats-toggle:hover {
      transform: translateY(-1px);
      border-color: var(--blue2);
    }

    .stats-toggle:focus-visible {
      outline: 3px solid color-mix(in srgb, var(--blue2) 70%, transparent);
      outline-offset: 2px;
      border-radius: 999px;
    }

    /* (2) 使用統計頁 */
    #statsView {
      margin-top: 24px;
    }

    .u-kpis {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 14px;
      margin-bottom: 20px;
    }

    .u-kpi {
      background: color-mix(in srgb, var(--card) 96%, transparent);
      border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
      border-radius: 20px;
      box-shadow: 0 14px 36px color-mix(in srgb, var(--blue) 9%, transparent);
      padding: 18px 16px;
      text-align: center;
    }

    .u-kpi .k {
      font-size: 12.5px;
      color: var(--muted);
      margin-bottom: 6px;
    }

    .u-kpi .v {
      font-size: 32px;
      font-weight: 900;
      color: var(--text);
      font-variant-numeric: tabular-nums;
      line-height: 1.1;
    }

    .u-kpi.live .v {
      color: var(--success);
    }

    .u-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
    }

    /* grid 項目預設 min-width:auto 會被內容撐大，圖表的 overflow-x 就不會生效 → 明確歸零 */
    .u-grid > .u-card {
      min-width: 0;
    }

    .u-card.wide {
      grid-column: 1 / -1;
    }

    .u-empty {
      color: var(--muted);
      font-size: 14px;
    }

    /* 橫條排行（各系統點擊、裝置別） */
    .u-rows {
      display: flex;
      flex-direction: column;
      gap: 9px;
    }

    .u-brow {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 13.5px;
      color: var(--text);
    }

    .u-brow .nm {
      flex: 0 0 40%;
      color: var(--muted);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .u-brow .track {
      flex: 1;
      height: 14px;
      background: color-mix(in srgb, var(--line) 55%, transparent);
      border-radius: 7px;
      overflow: hidden;
    }

    .u-brow .fill {
      display: block;
      height: 100%;
      background: linear-gradient(90deg, var(--blue), var(--blue2), var(--mint));
      border-radius: 7px;
    }

    .u-brow .val {
      flex: 0 0 auto;
      min-width: 40px;
      text-align: right;
      font-weight: 800;
      font-variant-numeric: tabular-nums;
    }

    /* 直條圖（每日人次、尖峰時段） */
    .u-bars {
      display: flex;
      align-items: flex-end;
      justify-content: center;   /* 資料天數少時置中，不讓單一長條撐滿整列 */
      gap: 3px;
      height: 158px;
      padding-top: 6px;
      /* 窄螢幕時 24 根時段柱擠不下 → 讓圖表自己橫向捲，整頁不可橫捲 */
      overflow-x: auto;
      overflow-y: hidden;
      scrollbar-width: thin;
    }

    .u-bars .col {
      flex: 1;
      min-width: 0;
      max-width: 56px;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;
    }

    .u-bars .col .bar {
      width: 76%;
      min-height: 2px;
      border-radius: 5px 5px 0 0;
      background: linear-gradient(180deg, var(--blue2), var(--blue));
    }

    .u-bars .col.hot .bar {
      background: linear-gradient(180deg, var(--mint), var(--blue2));
    }

    .u-bars .col .cap {
      margin-top: 5px;
      font-size: 10px;
      color: var(--muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }

    .u-note {
      margin-top: 18px;
      background: color-mix(in srgb, var(--card) 96%, transparent);
      border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
      border-radius: 18px;
      padding: 15px 18px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.75;
    }

    @media (max-width: 1180px) {
      .u-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }

    @media (max-width: 820px) {
      .u-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .u-grid { grid-template-columns: 1fr; }
      .u-bars { height: 128px; }
      .u-brow .nm { flex: 0 0 34%; }
    }

    @media (prefers-reduced-motion: reduce) {
      .usage-pill .live-dot { animation: none !important; }
      .stats-toggle { transition: none !important; }
      .stats-toggle:hover { transform: none !important; }
    }