:root {
      /* 淡藍色氛圍核心色系 (Pale Blue Atmosphere Palette) */
      --bg-primary: #EEF5FC;          /* 柔和透亮淡冰藍底色 */
      --bg-surface: #FFFFFF;          /* 純白高潔淨表面 */
      --bg-elevated: #E1EFFB;         /* 輕盈淡天藍抬升面 */
      --bg-card: #F4F9FD;             /* 極淺淡藍柔光卡片 */
      --border-subtle: #CCE1F5;       /* 雅緻淡藍細緻邊框 */
      --border-focus: #0284C7;        /* 聚焦湛藍 */
      --text-main: #0F172A;           /* 深度墨藍海軍黑，最高可讀性 */
      --text-muted: #334155;          /* 穩健青灰 */
      --text-dim: #64748B;            /* 輔助灰藍 */
      --primary: #0284C7;             /* 晴朗天藍 / 專業主色 */
      --primary-hover: #0369A1;       /* 深湛藍 */
      --accent-glow: rgba(2, 132, 199, 0.16);
      --accent-gold: #D97706;         /* 溫暖金琥珀 */
      --accent-emerald: #059669;      /* 審核翡翠綠 */
      --accent-rose: #E11D48;
      --accent-purple: #7C3AED;
      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-lg: 16px;
      --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans TC", "Microsoft JhengHei", sans-serif;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: var(--font-sans);
      background-color: var(--bg-primary);
      color: var(--text-main);
      height: 100vh;
      display: flex;
      overflow: hidden;
      -webkit-font-smoothing: antialiased;
    }

    /* =========================================================================
       1. 左側欄 (Sidebar: 支援滑鼠滾輪上下平滑捲動、八大專區導航)
       ========================================================================= */
    .sidebar {
      width: 290px;
      background: var(--bg-surface);
      border-right: 1px solid var(--border-subtle);
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      transition: width 0.25s ease;
      z-index: 20;
      height: 100vh;
      max-height: 100vh;
      overflow: hidden;
    }
    .sidebar.collapsed { width: 0; overflow: hidden; border-right: none; }

    .brand-header {
      padding: 16px 18px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid var(--border-subtle);
      flex-shrink: 0;
      background: var(--bg-surface);
    }
    .brand-title {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--text-main);
      letter-spacing: -0.3px;
    }
    .brand-badge {
      font-size: 0.68rem;
      background: linear-gradient(135deg, #2563EB, #8B5CF6);
      color: #FFF;
      padding: 2px 7px;
      border-radius: 999px;
      font-weight: 600;
    }

    /* 側欄可捲動主體 (支援滑鼠滾輪上下滾動) */
    .sidebar-scroll-body {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 12px 0 24px 0;
      scroll-behavior: smooth;
    }
    .sidebar-scroll-body::-webkit-scrollbar {
      width: 6px;
    }
    .sidebar-scroll-body::-webkit-scrollbar-track {
      background: rgba(15, 23, 42, 0.4);
    }
    .sidebar-scroll-body::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.16);
      border-radius: 999px;
    }
    .sidebar-scroll-body::-webkit-scrollbar-thumb:hover {
      background: #3B82F6;
    }

    .btn-new-chat {
      margin: 0 14px 4px;
      padding: 11px 14px;
      background: linear-gradient(135deg, #2563EB, #1D4ED8);
      color: white;
      border: none;
      border-radius: var(--radius-md);
      font-size: 0.90rem;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      box-shadow: 0 4px 14px var(--accent-glow);
      transition: all 0.2s;
      flex-shrink: 0;
    }
    .btn-new-chat:hover {
      background: linear-gradient(135deg, #3B82F6, #2563EB);
      transform: translateY(-1px);
    }

    .sidebar-nav-group {
      display: flex;
      flex-direction: column;
      gap: 3px;
      padding: 0 10px;
    }
    .sidebar-nav-header {
      padding: 8px 8px 3px;
      font-size: 0.72rem;
      font-weight: 700;
      color: var(--text-dim);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .sidebar-badge {
      font-size: 0.65rem;
      padding: 1px 6px;
      border-radius: 4px;
      background: rgba(255, 255, 255, 0.06);
      color: var(--text-dim);
      font-weight: 500;
    }

    .sidebar-btn {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 10px;
      color: var(--text-muted);
      text-decoration: none;
      font-size: 0.86rem;
      border-radius: var(--radius-sm);
      transition: all 0.15s;
      background: transparent;
      border: 1px solid transparent;
      cursor: pointer;
      width: 100%;
      text-align: left;
    }
    .sidebar-btn:hover {
      background: var(--bg-elevated);
      color: var(--text-main);
      border-color: rgba(255, 255, 255, 0.08);
      transform: translateX(2px);
    }
    .sidebar-btn.active {
      background: rgba(37, 99, 235, 0.15);
      border-color: rgba(59, 130, 246, 0.3);
      color: #93C5FD;
      font-weight: 600;
    }
    .sidebar-btn-icon {
      font-size: 1.05rem;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      flex-shrink: 0;
    }
    .sidebar-btn-text {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 1px;
    }
    .sidebar-btn-title {
      font-size: 0.86rem;
      font-weight: 600;
      color: inherit;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .sidebar-btn-desc {
      font-size: 0.70rem;
      color: var(--text-dim);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .sidebar-btn-tag {
      font-size: 0.65rem;
      padding: 2px 6px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.06);
      color: var(--text-muted);
      flex-shrink: 0;
    }
    .sidebar-btn-tag.gold {
      background: #E0F2FE;
      color: #0369A1;
      border: 1px solid #7DD3FC;
      font-weight: 700;
    }
    .sidebar-btn-tag.green {
      background: rgba(16, 185, 129, 0.15);
      color: #34D399;
      border: 1px solid rgba(16, 185, 129, 0.25);
    }
    .sidebar-btn-tag.blue {
      background: #E0F2FE;
      color: #0369A1;
      border: 1px solid #BAE6FD;
      font-weight: 700;
    }

    .chat-history-list {
      padding: 2px 4px;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .chat-item {
      padding: 8px 10px;
      border-radius: var(--radius-sm);
      color: var(--text-muted);
      font-size: 0.84rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: background 0.15s, color 0.15s;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .chat-item:hover { background: var(--bg-elevated); color: var(--text-main); }
    .chat-item.active { background: #1E3A8A; color: #93C5FD; font-weight: 600; }
    .chat-item-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
    .chat-item-del {
      opacity: 0;
      color: var(--text-dim);
      font-size: 0.85rem;
      padding: 2px 6px;
      border-radius: 4px;
      transition: opacity 0.15s;
    }
    .chat-item:hover .chat-item-del { opacity: 1; }
    .chat-item-del:hover { color: var(--accent-rose); background: rgba(244, 63, 94, 0.15); }

    .sidebar-footer {
      margin-top: 6px;
      padding: 10px 10px 4px;
      border-top: 1px solid var(--border-subtle);
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    /* =========================================================================
       2. 中央主要對話工作台 (Main Chat Stage)
       ========================================================================= */
    .main-stage {
      flex: 1;
      display: flex;
      flex-direction: column;
      position: relative;
      background: radial-gradient(circle at 50% 0%, #162032 0%, #0F172A 70%);
      min-width: 0;
    }

    /* 頂部控制列 */
    .stage-header {
      height: 60px;
      padding: 0 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid rgba(255,255,255,0.06);
      background: rgba(15, 23, 42, 0.75);
      backdrop-filter: blur(12px);
      z-index: 10;
    }
    .header-left {
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .icon-btn {
      background: transparent;
      border: 1px solid var(--border-subtle);
      color: var(--text-muted);
      width: 36px;
      height: 36px;
      border-radius: var(--radius-sm);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s;
    }
    .icon-btn:hover { background: var(--bg-elevated); color: var(--text-main); }

    /* 多模型切換選單 (Model Capsule Selector) */
    .model-selector-wrap { position: relative; }
    .model-badge-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      background: var(--bg-surface);
      border: 1px solid var(--border-subtle);
      padding: 6px 14px;
      border-radius: 999px;
      color: var(--text-main);
      font-size: 0.88rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.15s;
    }
    .model-badge-btn:hover { border-color: var(--primary); background: var(--bg-elevated); }
    .model-status-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--accent-emerald);
      box-shadow: 0 0 8px var(--accent-emerald);
    }

    .model-dropdown {
      position: absolute;
      top: 46px;
      left: 0;
      width: 330px;
      background: #182234;
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md);
      box-shadow: 0 16px 36px rgba(0,0,0,0.5);
      padding: 8px;
      display: none;
      flex-direction: column;
      gap: 4px;
      z-index: 100;
      backdrop-filter: blur(16px);
    }
    .model-dropdown.show { display: flex; }
    .model-opt {
      padding: 10px 12px;
      border-radius: var(--radius-sm);
      cursor: pointer;
      display: flex;
      gap: 12px;
      align-items: flex-start;
      transition: background 0.15s;
    }
    .model-opt:hover { background: var(--bg-elevated); }
    .model-opt.selected { background: #1E3A8A; border-left: 3px solid #3B82F6; }
    .model-opt-icon { font-size: 1.25rem; line-height: 1.2; }
    .model-opt-info { flex: 1; }
    .model-opt-title { font-size: 0.88rem; font-weight: 600; color: var(--text-main); display: flex; align-items: center; gap: 6px; }
    .model-opt-tag { font-size: 0.68rem; padding: 1px 6px; border-radius: 4px; background: rgba(59, 130, 246, 0.2); color: #93C5FD; }
    .model-opt-tag.gold { background: rgba(245, 158, 11, 0.2); color: #FCD34D; }
    .model-opt-desc { font-size: 0.74rem; color: var(--text-muted); margin-top: 2px; }

    .header-right {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .metric-pill {
      font-size: 0.74rem;
      background: rgba(16, 185, 129, 0.1);
      color: var(--accent-emerald);
      border: 1px solid rgba(16, 185, 129, 0.25);
      padding: 4px 10px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      gap: 6px;
      font-weight: 600;
    }

    /* 對話內容區 */
    .chat-messages {
      flex: 1;
      overflow-y: auto;
      padding: 24px 20px 40px;
      display: flex;
      flex-direction: column;
      gap: 24px;
      max-width: 960px;
      width: 100%;
      margin: 0 auto;
    }

    .welcome-card {
      margin: auto;
      text-align: center;
      max-width: 840px;
      width: 100%;
      padding: 30px 20px;
    }
    .welcome-icon {
      font-size: 3rem;
      margin-bottom: 14px;
      display: inline-block;
      filter: drop-shadow(0 6px 16px var(--accent-glow));
    }
    .welcome-title {
      font-size: 1.75rem;
      font-weight: 700;
      color: var(--text-main);
      margin-bottom: 10px;
      letter-spacing: -0.5px;
    }
    .welcome-desc {
      color: var(--text-muted);
      font-size: 0.95rem;
      line-height: 1.6;
      margin-bottom: 18px;
    }
    .hero-input-slot {
      margin: 16px 0 16px;
      width: 100%;
    }
    .input-stage.in-hero {
      padding: 0;
      background: transparent;
      backdrop-filter: none;
      border-top: none;
      max-width: 100%;
      margin: 0;
    }
    .input-stage.in-hero 
    .task-modes-bar { display: flex; gap: 8px; margin-bottom: 10px; overflow-x: auto; padding-bottom: 2px; }
    .task-mode-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 0.76rem; font-weight: 600; color: #94A3B8; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12); cursor: pointer; white-space: nowrap; transition: all 0.2s ease; user-select: none; }
    .task-mode-chip:hover { color: #F8FAFC; background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.22); }
    .task-mode-chip.active { color: #FFFFFF; background: linear-gradient(135deg, #0284C7 0%, #0369A1 100%); border-color: #38BDF8; box-shadow: 0 2px 8px rgba(2, 132, 199, 0.35); font-weight: 700; }
    .input-box-wrapper {
      background: #182234;
      border: 1px solid rgba(59, 130, 246, 0.45);
      border-radius: var(--radius-lg);
      padding: 12px 16px;
      box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45), 0 0 22px rgba(37, 99, 235, 0.18);
      text-align: left;
    }
    .input-stage.in-hero .input-box-wrapper:focus-within {
      border-color: #3B82F6;
      box-shadow: 0 12px 42px rgba(0, 0, 0, 0.55), 0 0 28px rgba(37, 99, 235, 0.32);
    }
    .bottom-input-dock {
      width: 100%;
      flex-shrink: 0;
    }

    /* 快捷情境卡片 (Prompt Chips Grid) */
    .prompt-chips-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 12px;
      text-align: left;
    }
    .prompt-chip {
      background: var(--bg-surface);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md);
      padding: 14px 16px;
      cursor: pointer;
      transition: all 0.2s;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .prompt-chip:hover {
      border-color: var(--primary);
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(0,0,0,0.3);
      background: var(--bg-elevated);
    }
    .prompt-chip-icon { font-size: 1.25rem; }
    .prompt-chip-title { font-size: 0.88rem; font-weight: 600; color: var(--text-main); }
    .prompt-chip-desc { font-size: 0.75rem; color: var(--text-dim); }

    /* 對話氣泡 */
    .msg-row {
      display: flex;
      gap: 14px;
      width: 100%;
      animation: fadeIn 0.25s ease-out;
    }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

    .msg-avatar {
      width: 36px;
      height: 36px;
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
      flex-shrink: 0;
    }
    .msg-row.user .msg-avatar {
      background: #E0F2FE;
      border: 1.5px solid #38BDF8;
      color: #FFF;
    }
    .msg-row.ai .msg-avatar {
      background: #EDE9FE;
      border: 1.5px solid #A78BFA;
      color: #FFF;
      box-shadow: 0 4px 12px rgba(139, 92, 246, 0.12);
    }

    .msg-body {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .msg-author {
      font-size: 0.78rem;
      font-weight: 700;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .msg-content {
      background: var(--bg-surface);
      border: 1px solid rgba(255,255,255,0.05);
      border-radius: var(--radius-md);
      padding: 16px 20px;
      font-size: 0.95rem;
      line-height: 1.75;
      color: var(--text-main);
      box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    }
    .msg-row.user .msg-content {
      background: #E0F2FE;
      color: #000000;
      border-color: rgba(59, 130, 246, 0.2);
    }

    /* 深度思維鏈展開卡片 (CoT Thinking Block) */
    .thinking-card {
      background: rgba(139, 92, 246, 0.08);
      border: 1px solid rgba(139, 92, 246, 0.25);
      border-radius: var(--radius-sm);
      margin-bottom: 12px;
      overflow: hidden;
      font-size: 0.85rem;
    }
    .thinking-header {
      padding: 8px 12px;
      background: rgba(139, 92, 246, 0.12);
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      user-select: none;
      color: #000000;
      font-weight: 600;
      font-size: 0.8rem;
    }
    .thinking-header:hover { background: rgba(139, 92, 246, 0.2); }
    .thinking-body {
      padding: 12px 14px;
      color: #000000;
      line-height: 1.6;
      white-space: pre-wrap;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 0.8rem;
      max-height: 260px;
      overflow-y: auto;
      border-top: 1px solid rgba(139, 92, 246, 0.15);
    }
    .thinking-card.collapsed .thinking-body { display: none; }

    /* 法條標籤膠囊 (Law Citation Pills) */
    .law-pill {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      background: rgba(245, 158, 11, 0.15);
      color: #FCD34D;
      border: 1px solid rgba(245, 158, 11, 0.35);
      padding: 1px 7px;
      border-radius: 4px;
      font-size: 0.85rem;
      font-weight: 600;
      cursor: pointer;
      text-decoration: none;
      transition: all 0.15s;
    }
    .law-pill:hover {
      background: rgba(245, 158, 11, 0.3);
      border-color: #F59E0B;
      box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
      transform: translateY(-1px);
    }

    /* 訊息操作列與按鍵 */
    .msg-actions {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 14px;
      padding-top: 10px;
      border-top: 1px dashed rgba(203, 213, 225, 0.5);
      opacity: 0.95;
    }
    .action-btn {
      background: var(--bg-surface, #ffffff);
      border: 1px solid var(--border-color, #cbd5e1);
      color: var(--text-dim, #334155);
      font-size: 0.82rem;
      font-weight: 500;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 14px;
      border-radius: 6px;
      transition: all 0.15s ease-in-out;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }
    .action-btn:hover {
      background: var(--bg-elevated, #f1f5f9);
      color: var(--text-main, #0f172a);
      border-color: #94a3b8;
      transform: translateY(-1px);
    }
    .action-btn.active {
      background: #e0f2fe;
      color: #0369a1;
      border-color: #38bdf8;
      box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25);
    }

    /* 擬答小文章排版樣式 */
    .legal-heading-major {
      font-size: 1.12rem;
      font-weight: 700;
      color: #0369a1;
      margin: 18px 0 8px 0;
      padding-left: 10px;
      border-left: 4px solid #0284c7;
      line-height: 1.45;
    }
    .legal-heading-middle {
      font-size: 1.02rem;
      font-weight: 600;
      color: #0f172a;
      margin: 14px 0 6px 0;
      padding-left: 6px;
      border-left: 3px solid #38bdf8;
      line-height: 1.4;
    }
    .legal-heading-minor {
      font-size: 0.96rem;
      font-weight: 600;
      color: #334155;
      margin: 10px 0 4px 0;
      line-height: 1.4;
    }
    .legal-paragraph {
      font-size: 0.95rem;
      line-height: 1.85;
      color: #1e293b;
      margin: 8px 0;
      letter-spacing: 0.015em;
    }
    .legal-list-item {
      font-size: 0.95rem;
      line-height: 1.8;
      color: #1e293b;
      margin: 4px 0 4px 16px;
    }
    .answer-spacer {
      height: 8px;
    }
    .source-ref-badge {
      display: inline-block;
      background: #e0f2fe;
      color: #0284c7;
      font-weight: 600;
      font-size: 0.8rem;
      padding: 1px 6px;
      border-radius: 4px;
      margin: 0 3px;
      border: 1px solid #bae6fd;
      vertical-align: baseline;
    }

    /* 引用法條展開區塊 */
    .chat-sources-box {
      margin-top: 14px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 14px 18px;
      animation: fadeIn 0.2s ease-in;
    }
    .chat-sources-header {
      font-weight: 600;
      font-size: 0.9rem;
      color: #0369a1;
      margin-bottom: 10px;
    }
    .chat-source-item {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      padding: 10px 14px;
      margin-bottom: 8px;
    }
    .chat-source-item:last-child {
      margin-bottom: 0;
    }
    .chat-source-title {
      font-weight: 600;
      font-size: 0.88rem;
      color: #0f172a;
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .chat-source-raw {
      font-family: inherit;
      font-size: 0.85rem;
      color: #475569;
      line-height: 1.65;
      white-space: pre-wrap;
      margin: 0;
      background: #f8fafc;
      padding: 8px 12px;
      border-radius: 4px;
    }

    /* 底部輸入區域 (Smart Input Area) */
    .input-stage {
      padding: 12px 24px 20px;
      background: rgba(15, 23, 42, 0.85);
      backdrop-filter: blur(12px);
      border-top: 1px solid rgba(255,255,255,0.06);
      display: flex;
      flex-direction: column;
      gap: 8px;
      max-width: 960px;
      width: 100%;
      margin: 0 auto;
    }

    .input-box-wrapper {
      background: var(--bg-surface);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-lg);
      padding: 10px 14px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.3);
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .input-box-wrapper:focus-within {
      border-color: var(--border-focus);
      box-shadow: 0 8px 28px rgba(37, 99, 235, 0.25);
    }

    .chat-textarea {
      width: 100%;
      min-height: 48px;
      max-height: 200px;
      background: transparent;
      border: none;
      outline: none;
      resize: none;
      color: var(--text-main);
      font-family: inherit;
      font-size: 0.96rem;
      line-height: 1.5;
    }
    .chat-textarea::placeholder { color: var(--text-dim); }

    .input-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 4px;
      border-top: 1px solid rgba(255,255,255,0.04);
    }
    .tool-toggles {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .toggle-chip {
      background: rgba(255,255,255,0.05);
      border: 1px solid var(--border-subtle);
      border-radius: 999px;
      padding: 4px 10px;
      font-size: 0.74rem;
      color: var(--text-muted);
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 5px;
      user-select: none;
      transition: all 0.15s;
    }
    .toggle-chip:hover { background: var(--bg-elevated); color: var(--text-main); }
    .toggle-chip.active {
      background: rgba(37, 99, 235, 0.2);
      border-color: var(--primary);
      color: #93C5FD;
      font-weight: 600;
    }

    .btn-send {
      background: var(--primary);
      color: white;
      border: none;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.15s;
      flex-shrink: 0;
    }
    .btn-send:hover { background: var(--primary-hover); transform: scale(1.05); }
    .btn-send:disabled { background: var(--bg-elevated); color: var(--text-dim); cursor: not-allowed; transform: none; }

    /* =========================================================================
       3. 右側法學檢查器 (Inspector Panel: 條文速查、三段論法結構樹)
       ========================================================================= */
    /* =========================================================================
       3. 右側法學檢查器與會員中心 (Inspector Panel)
          1) 右上角：使用者註冊登入框框
          2) 下面接：法律條文搜尋框框（使用者輸入框框 + 搜尋按鈕）
          3) 下面再接：搜尋到的法條和相關說明
       ========================================================================= */
    .inspector-panel {
      width: 380px;
      max-width: 90vw;
      background: var(--bg-surface);
      border-left: 1px solid var(--border-subtle);
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      transition: width 0.25s ease;
      z-index: 15;
    }
    .inspector-panel.collapsed { width: 0; overflow: hidden; border-left: none; }

    .inspector-header {
      display: none !important;
    }
    .inspector-body {
      flex: 1;
      overflow-y: auto;
      padding: 12px 14px 14px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    /* 頂部 Header 使用者登入按鈕（紫色框框，裡面的字改深藍色） */
    .header-user-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 12px;
      background: rgba(99, 102, 241, 0.15);
      border: 1px solid rgba(99, 102, 241, 0.35);
      border-radius: 20px;
      color: #0369A1;
      font-size: 0.8rem;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .header-user-btn span,
    .header-user-btn #headerUserName,
    .header-user-btn #headerUserIcon {
      color: #0369A1;
      font-weight: 700;
    }
    .header-user-btn:hover {
      background: rgba(99, 102, 241, 0.25);
      border-color: #818CF8;
      color: #0C4A6E;
      transform: translateY(-1px);
    }
    .header-user-btn:hover span,
    .header-user-btn:hover #headerUserName {
      color: #0C4A6E;
    }

    /* 頂部中間即時在線人數框框 (真實統計進入系統人數) */
    .header-center-online {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 6px 16px;
      background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
      border: 1.5px solid #7DD3FC;
      border-radius: 999px;
      box-shadow: 0 2px 8px rgba(2, 132, 199, 0.08);
      font-size: 0.85rem;
      color: #0369A1;
      font-weight: 600;
      user-select: none;
      transition: all 0.2s ease;
    }
    .header-center-online:hover {
      border-color: #0284C7;
      box-shadow: 0 3px 12px rgba(2, 132, 199, 0.16);
      transform: translateY(-1px);
    }
    .online-indicator-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #10B981;
      box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
      animation: pulse-green 2s infinite;
    }
    @keyframes pulse-green {
      0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
      }
      70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
      }
      100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
      }
    }
    .online-label {
      color: #0F172A;
      font-weight: 700;
    }
    .online-count {
      color: #0284C7;
      font-size: 0.95rem;
      font-weight: 800;
      font-family: monospace, sans-serif;
    }
    .online-unit {
      color: #334155;
      font-size: 0.8rem;
    }

    /* 右側抽屜：有框的「使用者登入/註冊」按鍵 (依指示：左右寬度縮小，精緻適中) */
    .btn-auth-heading-box {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px 8px; /* 依指示：左右寬度縮小 */
      background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
      border: 1.5px solid #0284C7;
      border-radius: 7px;
      color: #0369A1;
      font-size: 0.82rem;
      font-weight: 800;
      cursor: pointer;
      box-shadow: 0 1px 4px rgba(2, 132, 199, 0.12);
      transition: all 0.2s ease;
      white-space: nowrap;
      flex-shrink: 0;
      max-width: fit-content;
    }
    .btn-auth-heading-box:hover {
      background: linear-gradient(135deg, #E0F2FE 0%, #BAE6FD 100%);
      border-color: #0369A1;
      color: #0C4A6E;
      transform: translateY(-1px);
      box-shadow: 0 3px 8px rgba(2, 132, 199, 0.2);
    }
    .btn-auth-heading-box:active {
      transform: translateY(0);
    }
    .auth-btn-pill {
      font-size: 0.65rem;
      background: #0284C7;
      color: #FFFFFF;
      padding: 2px 5px;
      border-radius: 4px;
      font-weight: 700;
      letter-spacing: 0.2px;
      white-space: nowrap;
    }

    /* 頂部 Header 會員專案按鈕（移至最右側） */
    .header-pricing-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 14px;
      background: linear-gradient(135deg, #E0F2FE, #BAE6FD);
      border: 1.5px solid #7DD3FC;
      border-radius: 20px;
      color: #0369A1;
      font-size: 0.82rem;
      font-weight: 800;
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow: 0 2px 8px rgba(2, 132, 199, 0.15);
      margin-left: auto;
    }
    .header-pricing-btn:hover {
      background: linear-gradient(135deg, #BAE6FD, #7DD3FC);
      border-color: #0284C7;
      color: #0C4A6E;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25);
    }

    /* 側欄「關於Bob Law AI」按鈕（位於法規查詢上方） */
    .sidebar-btn.sidebar-btn-about {
      border: 1px solid rgba(245, 158, 11, 0.4);
      background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(30, 41, 59, 0.7));
      box-shadow: 0 2px 10px rgba(245, 158, 11, 0.15);
      transition: all 0.25s ease;
      position: relative;
      overflow: hidden;
    }
    .sidebar-btn.sidebar-btn-about:hover {
      border-color: #F59E0B;
      background: linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(30, 41, 59, 0.9));
      box-shadow: 0 4px 16px rgba(245, 158, 11, 0.28);
      transform: translateY(-1px);
    }
    .sidebar-btn.sidebar-btn-about .sidebar-btn-title {
      color: #FDE68A;
      font-weight: 800;
      letter-spacing: 0.3px;
    }
    .sidebar-btn.sidebar-btn-about .sidebar-btn-desc {
      color: #CBD5E1;
    }
    .sidebar-btn-tag.gold {
      background: rgba(245, 158, 11, 0.25);
      color: #FDE68A;
      border: 1px solid rgba(245, 158, 11, 0.45);
    }

    /* 關於 Bob Law AI 彈出視窗容器 */
    .about-modal-container {
      width: 960px;
      max-width: 95vw;
      max-height: 88vh;
      background: #0B1120;
      border: 1px solid rgba(245, 158, 11, 0.35);
      border-radius: 18px;
      box-shadow: 0 25px 70px rgba(0, 0, 0, 0.85), 0 0 40px rgba(245, 158, 11, 0.12);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      animation: modalFadeIn 0.25s ease-out;
    }
    .about-modal-header {
      padding: 22px 28px 16px;
      position: relative;
      background: linear-gradient(180deg, rgba(30, 41, 59, 0.85) 0%, rgba(15, 23, 42, 0.5) 100%);
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
    }
    .about-header-titles {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .about-brand-tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 800;
      color: #0369A1;
      background: #E0F2FE;
      border: 1px solid #7DD3FC;
      padding: 2px 10px;
      border-radius: 12px;
      width: fit-content;
      margin-bottom: 4px;
    }
    .about-modal-title {
      font-size: 1.65rem;
      font-weight: 800;
      color: #F8FAFC;
      letter-spacing: -0.5px;
      margin: 0;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .about-modal-subtitle {
      font-size: 0.88rem;
      color: #94A3B8;
      line-height: 1.45;
    }
    .about-close-btn {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.15);
      color: #94A3B8;
      font-size: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s;
    }
    .about-close-btn:hover {
      background: rgba(239, 68, 68, 0.2);
      border-color: rgba(239, 68, 68, 0.5);
      color: #EF4444;
    }

    /* 視窗內捲動區域 */
    .about-modal-body {
      padding: 24px 28px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    /* 亮點區塊卡片 */
    .about-card {
      background: rgba(19, 29, 49, 0.7);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 14px;
      padding: 20px 22px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      transition: border-color 0.2s;
    }
    .about-card:hover {
      border-color: rgba(245, 158, 11, 0.35);
    }
    .about-card-header {
      display: flex;
      align-items: center;
      gap: 10px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      padding-bottom: 10px;
    }
    .about-card-icon {
      font-size: 1.4rem;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      background: rgba(245, 158, 11, 0.15);
      border: 1px solid rgba(245, 158, 11, 0.3);
      flex-shrink: 0;
    }
    .about-card-title {
      font-size: 1.12rem;
      font-weight: 800;
      color: #F8FAFC;
    }
    .about-card-tag {
      font-size: 11px;
      padding: 2px 8px;
      border-radius: 10px;
      font-weight: 700;
      margin-left: auto;
    }

    /* 格線子卡片 */
    .about-grid-3col {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }
    .about-grid-2col {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
    }
    @media (max-width: 800px) {
      .about-grid-3col, .about-grid-2col {
        grid-template-columns: 1fr;
      }
    }

    .about-subcard {
      background: #111A2E;
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 10px;
      padding: 14px 16px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .about-subcard-title {
      font-size: 0.92rem;
      font-weight: 700;
      color: #60A5FA;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .about-subcard-desc {
      font-size: 0.8rem;
      color: #94A3B8;
      line-height: 1.6;
    }

    /* 流程圖展示方塊 */
    .about-flow-step {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 12px 14px;
      background: #0E1626;
      border-left: 3px solid #3B82F6;
      border-radius: 0 8px 8px 0;
    }
    .flow-step-num {
      font-size: 0.95rem;
      font-weight: 800;
      color: #38BDF8;
      min-width: 28px;
    }
    .flow-step-content {
      font-size: 0.82rem;
      color: #E2E8F0;
      line-height: 1.6;
    }

    /* 底部 CTA 橫幅 */
    .about-cta-banner {
      background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(37, 99, 235, 0.25));
      border: 1px solid rgba(245, 158, 11, 0.4);
      border-radius: 14px;
      padding: 18px 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 14px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    }
    .about-cta-text {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .about-cta-title {
      font-size: 1.15rem;
      font-weight: 800;
      color: #FDE68A;
    }
    .about-cta-desc {
      font-size: 0.82rem;
      color: #E2E8F0;
    }
    .about-cta-actions {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .btn-about-plan {
      padding: 9px 20px;
      background: linear-gradient(135deg, #F59E0B, #D97706);
      color: #1E1B4B;
      font-weight: 800;
      font-size: 0.88rem;
      border-radius: 8px;
      border: none;
      cursor: pointer;
      transition: all 0.2s;
      box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
    }
    .btn-about-plan:hover {
      background: linear-gradient(135deg, #FBBF24, #F59E0B);
      transform: translateY(-1px);
      box-shadow: 0 6px 16px rgba(245, 158, 11, 0.45);
    }
    .btn-about-chat {
      padding: 9px 18px;
      background: rgba(255, 255, 255, 0.08);
      color: #F8FAFC;
      font-weight: 700;
      font-size: 0.88rem;
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      cursor: pointer;
      transition: all 0.2s;
    }
    .btn-about-chat:hover {
      background: rgba(255, 255, 255, 0.16);
      color: #FFFFFF;
    }


    /* 註冊畫面 (Register Modal) 樣式 */
    .register-modal-container {
      width: 580px;
      max-width: 95vw;
      max-height: 90vh;
      background: #0B1120;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 18px;
      box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      animation: modalFadeIn 0.25s ease-out;
    }
    .register-modal-header {
      padding: 22px 26px 14px;
      text-align: center;
      position: relative;
      background: linear-gradient(180deg, rgba(30, 41, 59, 0.6) 0%, rgba(15, 23, 42, 0) 100%);
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
    .register-close-btn {
      position: absolute;
      top: 16px;
      right: 18px;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.15);
      color: #94A3B8;
      font-size: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s;
    }
    .register-close-btn:hover {
      background: rgba(239, 68, 68, 0.2);
      border-color: rgba(239, 68, 68, 0.5);
      color: #EF4444;
    }
    .register-brand-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 700;
      color: #60A5FA;
      background: rgba(59, 130, 246, 0.12);
      padding: 3px 12px;
      border-radius: 12px;
      margin-bottom: 8px;
      letter-spacing: 0.5px;
    }
    .register-modal-title {
      font-size: 1.55rem;
      font-weight: 800;
      color: #F8FAFC;
      letter-spacing: -0.5px;
      margin-bottom: 4px;
    }
    .register-modal-subtitle {
      font-size: 0.85rem;
      color: #94A3B8;
      line-height: 1.4;
    }

    .register-modal-body {
      padding: 20px 26px;
      overflow-y: auto;
      max-height: calc(90vh - 180px);
    }

    /* 第三方 SSO 註冊區塊 */
    .register-sso-section {
      margin-bottom: 16px;
    }
    .sso-section-title {
      font-size: 0.78rem;
      font-weight: 700;
      color: #94A3B8;
      margin-bottom: 10px;
      text-align: center;
      letter-spacing: 0.5px;
    }
    .sso-buttons-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    .btn-sso-reg {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      padding: 10px 14px;
      border-radius: 10px;
      font-size: 0.86rem;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.2s ease;
      text-decoration: none;
    }
    .btn-sso-reg.google-btn {
      background: #FFFFFF;
      color: #1F2937;
      border: 1px solid #E5E7EB;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }
    .btn-sso-reg.google-btn:hover {
      background: #F3F4F6;
      border-color: #D1D5DB;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    }
    .btn-sso-reg.apple-btn {
      background: #000000;
      color: #FFFFFF;
      border: 1px solid rgba(255, 255, 255, 0.2);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }
    .btn-sso-reg.apple-btn:hover {
      background: #18181B;
      border-color: rgba(255, 255, 255, 0.4);
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
    }

    /* 分隔線 */
    .auth-divider-line {
      display: flex;
      align-items: center;
      text-align: center;
      color: #64748B;
      font-size: 11.5px;
      margin: 18px 0;
    }
    .auth-divider-line::before,
    .auth-divider-line::after {
      content: '';
      flex: 1;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    .auth-divider-line span {
      padding: 0 12px;
      font-weight: 600;
    }

    /* Email 註冊表單 */
    .register-email-form {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .form-row-2col {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    @media (max-width: 500px) {
      .form-row-2col, .sso-buttons-row {
        grid-template-columns: 1fr;
      }
    }
    .form-group {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .form-label {
      font-size: 0.78rem;
      font-weight: 700;
      color: #CBD5E1;
    }
    .required-star {
      color: #F87171;
    }
    .form-input, .form-select {
      width: 100%;
      box-sizing: border-box;
      background: #131D31;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 8px;
      color: #F8FAFC;
      padding: 9px 12px;
      font-size: 0.85rem;
      outline: none;
      transition: all 0.2s ease;
    }
    .form-input:focus, .form-select:focus {
      border-color: #3B82F6;
      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
      background: #18243C;
    }
    .form-terms-wrap {
      margin-top: 4px;
    }
    .terms-checkbox-label {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      font-size: 0.76rem;
      color: #94A3B8;
      line-height: 1.45;
      cursor: pointer;
    }
    .terms-checkbox-label input[type="checkbox"] {
      margin-top: 2px;
      accent-color: #2563EB;
      cursor: pointer;
    }
    .btn-register-submit {
      width: 100%;
      padding: 11px;
      background: linear-gradient(135deg, #2563EB, #1D4ED8);
      border: 1px solid #3B82F6;
      border-radius: 10px;
      color: #FFFFFF;
      font-size: 0.94rem;
      font-weight: 800;
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
      margin-top: 6px;
    }
    .btn-register-submit:hover {
      background: linear-gradient(135deg, #1D4ED8, #1E40AF);
      border-color: #60A5FA;
      box-shadow: 0 6px 18px rgba(37, 99, 235, 0.5);
      transform: translateY(-1px);
    }

    .register-modal-footer {
      padding: 12px 24px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(15, 23, 42, 0.85);
      text-align: center;
      font-size: 0.8rem;
      color: #94A3B8;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .login-link {
      color: #60A5FA;
      font-weight: 700;
      text-decoration: underline;
    }
    .footer-privacy-note {
      font-size: 0.72rem;
      color: #64748B;
    }


    /* 會員專案模態視窗與卡片樣式 */
    .pricing-modal-container {
      width: 1120px;
      max-width: 96vw;
      max-height: 90vh;
      background: #0B1120;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 18px;
      box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      animation: modalFadeIn 0.25s ease-out;
    }
    .pricing-modal-header {
      padding: 24px 28px 16px;
      text-align: center;
      position: relative;
      background: linear-gradient(180deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0) 100%);
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
    .pricing-close-btn {
      position: absolute;
      top: 18px;
      right: 20px;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.15);
      color: #94A3B8;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s;
    }
    .pricing-close-btn:hover {
      background: rgba(239, 68, 68, 0.2);
      border-color: rgba(239, 68, 68, 0.5);
      color: #EF4444;
    }
    .pricing-brand-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 700;
      color: #60A5FA;
      background: rgba(59, 130, 246, 0.12);
      padding: 3px 12px;
      border-radius: 12px;
      margin-bottom: 8px;
      letter-spacing: 0.5px;
    }
    .pricing-modal-title {
      font-size: 1.85rem;
      font-weight: 800;
      color: #F8FAFC;
      letter-spacing: -0.5px;
      margin-bottom: 6px;
    }
    .pricing-modal-subtitle {
      font-size: 0.92rem;
      color: #94A3B8;
      margin-bottom: 16px;
    }
    .pricing-cycle-switch-wrap {
      display: inline-flex;
      background: #1E293B;
      padding: 4px;
      border-radius: 30px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
    }
    .pricing-cycle-btn {
      padding: 6px 18px;
      border-radius: 24px;
      font-size: 13px;
      font-weight: 700;
      color: #94A3B8;
      background: transparent;
      border: none;
      cursor: pointer;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .pricing-cycle-btn.active {
      background: #0284C7;
      color: #FFFFFF;
      box-shadow: 0 2px 8px rgba(2, 132, 199, 0.4);
    }
    .pricing-cycle-badge {
      background: #F59E0B;
      color: #78350F;
      font-size: 11px;
      font-weight: 800;
      padding: 1px 6px;
      border-radius: 10px;
    }
    .pricing-cycle-notice {
      margin-top: 10px;
      font-size: 12px;
      color: #64748B;
      line-height: 1.5;
    }

    /* 4 張方案卡片網格 */
    .pricing-cards-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      padding: 24px 28px;
      overflow-y: auto;
      max-height: calc(90vh - 220px);
    }
    @media (max-width: 1024px) {
      .pricing-cards-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    @media (max-width: 640px) {
      .pricing-cards-grid {
        grid-template-columns: 1fr;
      }
    }

    /* 單一方案卡片樣式 */
    .pricing-card {
      background: #131D31;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 16px;
      padding: 22px 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: relative;
      transition: all 0.25s ease;
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
    }
    .pricing-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
      border-color: rgba(255, 255, 255, 0.2);
    }

    /* 學生會員特別樣式 (新增！NT:99元) */
    .pricing-card.student-tier {
      background: linear-gradient(165deg, rgba(16, 185, 129, 0.08), #131D31 50%);
      border: 1px solid rgba(16, 185, 129, 0.4);
      box-shadow: 0 6px 22px rgba(16, 185, 129, 0.12);
    }
    .pricing-card.student-tier:hover {
      border-color: #10B981;
      box-shadow: 0 12px 32px rgba(16, 185, 129, 0.22);
    }

    /* 專業會員樣式 (NT:380元) */
    .pricing-card.pro-tier {
      background: linear-gradient(165deg, rgba(59, 130, 246, 0.08), #131D31 50%);
      border: 1px solid rgba(59, 130, 246, 0.4);
      box-shadow: 0 6px 22px rgba(59, 130, 246, 0.12);
    }
    .pricing-card.pro-tier:hover {
      border-color: #3B82F6;
      box-shadow: 0 12px 32px rgba(59, 130, 246, 0.22);
    }

    /* 無限會員樣式 (NT:660元 · 推薦 · 旗艦深黑高對比卡) */
    .pricing-card.unlimited-tier {
      background: linear-gradient(165deg, #090E17, #111827);
      border: 1.5px solid #F59E0B;
      box-shadow: 0 10px 30px rgba(245, 158, 11, 0.18);
    }
    .pricing-card.unlimited-tier:hover {
      border-color: #FBBF24;
      box-shadow: 0 14px 36px rgba(245, 158, 11, 0.3);
    }

    .pricing-card-badge {
      position: absolute;
      top: 14px;
      right: 14px;
      font-size: 11px;
      font-weight: 800;
      padding: 3px 8px;
      border-radius: 10px;
      letter-spacing: 0.5px;
    }
    .badge-free { background: rgba(148, 163, 184, 0.2); color: #CBD5E1; }
    .badge-student { background: rgba(16, 185, 129, 0.25); color: #34D399; border: 1px solid rgba(16, 185, 129, 0.4); }
    .badge-pro { background: rgba(59, 130, 246, 0.25); color: #93C5FD; border: 1px solid rgba(59, 130, 246, 0.4); }
    .badge-unlimited { background: linear-gradient(135deg, #F59E0B, #D97706); color: #1E1B4B; }

    .pricing-card-title {
      font-size: 1.25rem;
      font-weight: 800;
      color: #F8FAFC;
      margin-top: 4px;
    }
    .pricing-card-subtitle {
      font-size: 0.8rem;
      color: #94A3B8;
      margin-top: 4px;
      min-height: 20px;
    }

    .pricing-price-box {
      margin: 18px 0 14px;
    }
    .pricing-price-main {
      display: flex;
      align-items: baseline;
      gap: 4px;
    }
    .pricing-currency {
      font-size: 1rem;
      font-weight: 700;
      color: #F8FAFC;
    }
    .pricing-amount {
      font-size: 2.1rem;
      font-weight: 800;
      color: #F8FAFC;
      letter-spacing: -1px;
      line-height: 1;
    }
    .pricing-period {
      font-size: 0.82rem;
      color: #94A3B8;
    }
    .pricing-price-sub {
      font-size: 0.75rem;
      color: #64748B;
      margin-top: 6px;
      min-height: 32px;
      line-height: 1.4;
    }

    .btn-plan-select {
      width: 100%;
      padding: 10px;
      border-radius: 8px;
      font-size: 0.9rem;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.2s ease;
      text-align: center;
      margin-bottom: 20px;
      border: 1px solid transparent;
    }
    .btn-plan-select.btn-free {
      background: rgba(255, 255, 255, 0.08);
      color: #E2E8F0;
      border-color: rgba(255, 255, 255, 0.15);
    }
    .btn-plan-select.btn-free:hover {
      background: rgba(255, 255, 255, 0.16);
      color: #FFFFFF;
    }
    .btn-plan-select.btn-student {
      background: linear-gradient(135deg, #10B981, #059669);
      color: #FFFFFF;
      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    }
    .btn-plan-select.btn-student:hover {
      background: linear-gradient(135deg, #059669, #047857);
      box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
    }
    .btn-plan-select.btn-pro {
      background: linear-gradient(135deg, #3B82F6, #2563EB);
      color: #FFFFFF;
      box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    }
    .btn-plan-select.btn-pro:hover {
      background: linear-gradient(135deg, #2563EB, #1D4ED8);
      box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
    }
    .btn-plan-select.btn-unlimited {
      background: linear-gradient(135deg, #F59E0B, #D97706);
      color: #111827;
      font-weight: 800;
      box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4);
    }
    .btn-plan-select.btn-unlimited:hover {
      background: linear-gradient(135deg, #FBBF24, #F59E0B);
      box-shadow: 0 6px 20px rgba(245, 158, 11, 0.5);
    }

    .pricing-features-wrap {
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      padding-top: 14px;
      flex-grow: 1;
    }
    .pricing-features-title {
      font-size: 0.76rem;
      font-weight: 700;
      color: #94A3B8;
      margin-bottom: 10px;
    }
    .pricing-features-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 9px;
    }
    .pricing-feature-item {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      font-size: 0.78rem;
      color: #CBD5E1;
      line-height: 1.45;
    }
    .feature-check-icon {
      color: #38BDF8;
      font-size: 12px;
      flex-shrink: 0;
      margin-top: 1px;
    }
    .pricing-card.student-tier .feature-check-icon {
      color: #34D399;
    }
    .pricing-card.unlimited-tier .feature-check-icon {
      color: #FBBF24;
    }

    .pricing-modal-footer {
      padding: 14px 28px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(15, 23, 42, 0.8);
      text-align: center;
      font-size: 0.82rem;
      color: #94A3B8;
    }


    /* 1. 使用者註冊登入框框 */
    .auth-card-box {
      background: linear-gradient(145deg, rgba(30, 41, 59, 0.85), rgba(15, 23, 42, 0.95));
      border: 1px solid rgba(139, 92, 246, 0.3);
      border-radius: var(--radius-md);
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
    }
    .auth-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px; /* 依指示：兩者不要黏在一起，留出呼吸空間 */
      width: 100%;
    }
    .auth-card-title {
      font-size: 0.86rem;
      font-weight: 700;
      color: #E2E8F0;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .auth-status-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 0.74rem;
      padding: 4px 14px; /* 依指示：左右寬度變大 */
      min-width: 64px;
      white-space: nowrap;
      flex-shrink: 0;
      border-radius: 999px;
      font-weight: 700;
      background: rgba(148, 163, 184, 0.15);
      color: #94A3B8;
      border: 1px solid rgba(148, 163, 184, 0.3);
      text-align: center;
    }
    .auth-status-badge.active {
      background: rgba(16, 185, 129, 0.15);
      color: #34D399;
      border-color: rgba(16, 185, 129, 0.4);
    }
    .auth-tabs {
      display: flex;
      gap: 4px;
      background: rgba(15, 23, 42, 0.6);
      padding: 3px;
      border-radius: 8px;
    }
    .auth-tab {
      flex: 1;
      padding: 5px 0;
      border: none;
      background: transparent;
      color: var(--text-muted);
      font-size: 0.78rem;
      font-weight: 600;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    .auth-tab.active {
      background: var(--primary);
      color: #FFFFFF;
      box-shadow: 0 2px 6px rgba(99, 102, 241, 0.4);
    }
    .auth-inputs-wrap {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .auth-input-group {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .auth-input {
      width: 100%;
      background: rgba(15, 23, 42, 0.85);
      border: 1px solid var(--border-subtle);
      border-radius: 6px;
      padding: 7px 10px;
      font-size: 0.82rem;
      color: var(--text-main);
      outline: none;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .auth-input:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
    }
    .btn-auth-action {
      width: 100%;
      padding: 8px 0;
      background: linear-gradient(135deg, #6366F1, #8B5CF6);
      border: none;
      border-radius: 6px;
      color: #FFFFFF;
      font-size: 0.84rem;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 3px 10px rgba(99, 102, 241, 0.35);
      transition: all 0.2s ease;
    }
    .btn-auth-action:hover {
      background: linear-gradient(135deg, #4F46E5, #7C3AED);
      transform: translateY(-1px);
    }
    .auth-hint {
      font-size: 0.72rem;
      color: var(--text-dim);
      line-height: 1.45;
    }
    .logged-user-profile {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 10px;
      background: rgba(255, 255, 255, 0.03);
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, 0.06);
    }
    .logged-avatar {
      font-size: 1.6rem;
      width: 40px;
      height: 40px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(99, 102, 241, 0.2);
      border-radius: 50%;
    }
    .logged-details {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .logged-name {
      font-size: 0.88rem;
      font-weight: 700;
      color: #F8FAFC;
      line-height: 1.3;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .logged-email {
      font-size: 0.72rem;
      color: var(--text-dim);
      line-height: 1.3;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .logged-tier {
      margin-left: auto;
      flex-shrink: 0;
      display: flex;
      align-items: center;
    }
    .logged-tier .tier-pill,
    #loggedTierBadge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-top: 0 !important;
      font-size: 0.72rem;
      padding: 3px 8px;
      border-radius: 10px;
      white-space: nowrap;
    }
    .tier-pill.gold {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-top: 0;
      font-size: 0.68rem;
      padding: 2px 7px;
      border-radius: 10px;
      background: rgba(245, 158, 11, 0.15);
      color: #FCD34D;
      border: 1px solid rgba(245, 158, 11, 0.3);
      font-weight: 600;
      white-space: nowrap;
    }
    .logged-actions-row {
      display: flex;
      gap: 8px;
      margin-top: 6px;
    }
    .btn-logged-sub {
      flex: 1;
      padding: 6px 0;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid var(--border-subtle);
      border-radius: 6px;
      color: var(--text-muted);
      font-size: 0.76rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    .btn-logged-sub:hover {
      background: rgba(255, 255, 255, 0.1);
      color: #FFFFFF;
    }
    .btn-logged-sub.danger:hover {
      background: rgba(239, 68, 68, 0.2);
      color: #FCA5A5;
      border-color: rgba(239, 68, 68, 0.4);
    }

    /* 2. 法律條文搜尋框框 */
    .law-search-box-wrap {
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md);
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .pane-box-title {
      font-size: 0.82rem;
      font-weight: 700;
      color: var(--text-main);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .badge-blue {
      font-size: 0.68rem;
      padding: 2px 6px;
      border-radius: 10px;
      background: rgba(59, 130, 246, 0.15);
      color: #93C5FD;
      border: 1px solid rgba(59, 130, 246, 0.3);
    }
    .side-search-input-group {
      display: flex;
      gap: 6px;
    }
    .side-search-input {
      flex: 1;
      background: rgba(15, 23, 42, 0.9);
      border: 1px solid var(--border-subtle);
      border-radius: 6px;
      padding: 8px 10px;
      font-size: 0.82rem;
      color: var(--text-main);
      outline: none;
      transition: all 0.2s;
    }
    .side-search-input:focus {
      border-color: #3B82F6;
      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    }
    .btn-side-search {
      background: linear-gradient(135deg, #3B82F6, #2563EB);
      color: #FFFFFF;
      border: none;
      border-radius: 6px;
      padding: 0 12px;
      font-size: 0.8rem;
      font-weight: 700;
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.2s;
    }
    .btn-side-search:hover {
      background: linear-gradient(135deg, #2563EB, #1D4ED8);
      transform: translateY(-1px);
    }
    .quick-law-chips {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 5px;
    }
    .quick-chip-label {
      font-size: 0.72rem;
      color: var(--text-dim);
    }
    .quick-chip {
      font-size: 0.72rem;
      padding: 2px 7px;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: var(--text-muted);
      cursor: pointer;
      transition: all 0.15s;
    }
    .quick-chip:hover {
      background: rgba(59, 130, 246, 0.2);
      border-color: #3B82F6;
      color: #93C5FD;
    }

    /* 3. 搜尋到的法條和相關說明 */
    .searched-law-result-card {
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md);
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .result-card-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px;
    }
    .result-law-title {
      font-size: 0.95rem;
      font-weight: 700;
      color: #FCD34D;
      line-height: 1.35;
    }
    .result-law-meta {
      font-size: 0.72rem;
      color: var(--text-dim);
      margin-top: 2px;
    }
    .status-tag-active {
      font-size: 0.68rem;
      padding: 2px 7px;
      border-radius: 10px;
      background: rgba(16, 185, 129, 0.15);
      color: #34D399;
      border: 1px solid rgba(16, 185, 129, 0.3);
      white-space: nowrap;
    }
    .result-action-buttons {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }
    .btn-result-action {
      flex: 1;
      min-width: 130px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      padding: 6px 10px;
      font-size: 0.76rem;
      font-weight: 600;
      border-radius: 6px;
      text-decoration: none;
      cursor: pointer;
      transition: all 0.15s ease;
      border: 1px solid transparent;
    }
    .btn-result-action.primary {
      background: rgba(16, 185, 129, 0.12);
      color: #6EE7B7;
      border-color: rgba(16, 185, 129, 0.35);
    }
    .btn-result-action.primary:hover {
      background: rgba(16, 185, 129, 0.25);
      border-color: #34D399;
      color: #FFFFFF;
    }
    .btn-result-action.secondary {
      background: rgba(59, 130, 246, 0.12);
      color: #93C5FD;
      border-color: rgba(59, 130, 246, 0.35);
    }
    .btn-result-action.secondary:hover {
      background: rgba(59, 130, 246, 0.25);
      border-color: #60A5FA;
      color: #FFFFFF;
    }
    .result-block-section {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .result-section-label {
      font-size: 0.76rem;
      font-weight: 700;
      color: var(--text-dim);
      letter-spacing: 0.5px;
    }
    .result-law-content {
      font-size: 0.85rem;
      line-height: 1.65;
      color: var(--text-main);
      background: rgba(0, 0, 0, 0.3);
      padding: 10px 12px;
      border-radius: var(--radius-sm);
      border-left: 3px solid #F59E0B;
    }
    .result-plain-box {
      background: rgba(16, 185, 129, 0.08);
      border: 1px solid rgba(16, 185, 129, 0.25);
      border-radius: 6px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .plain-box-badge {
      font-size: 0.7rem;
      font-weight: 700;
      color: #34D399;
    }
    .plain-box-text {
      font-size: 0.82rem;
      line-height: 1.55;
      color: var(--text-main);
    }
    .side-sections-grid {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-top: 4px;
    }
    .side-section-item {
      background: rgba(255, 255, 255, 0.03);
      border-left: 3px solid #3B82F6;
      border-radius: 4px;
      padding: 6px 8px;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .side-section-item.full-width {
      border-left-color: #F59E0B;
    }
    .side-item-tag {
      font-size: 0.7rem;
      font-weight: 700;
      color: #93C5FD;
    }
    .side-item-val {
      font-size: 0.78rem;
      line-height: 1.45;
      color: var(--text-main);
    }
    .side-meta-notes {
      font-size: 0.74rem;
      color: var(--text-muted);
      line-height: 1.5;
      background: rgba(255, 255, 255, 0.02);
      border-radius: 6px;
      padding: 8px 10px;
      border: 1px solid rgba(255, 255, 255, 0.05);
    }

    /* 模態框 (API Key Modal) */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.7);
      backdrop-filter: blur(8px);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 1000;
    }
    .modal-overlay.show { display: flex; }
    .modal-card {
      background: var(--bg-surface);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-lg);
      width: 480px;
      max-width: 90vw;
      padding: 24px;
      box-shadow: 0 20px 48px rgba(0,0,0,0.6);
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .modal-title { font-size: 1.15rem; font-weight: 700; }
    .modal-input {
      width: 100%;
      padding: 10px 14px;
      background: var(--bg-primary);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-sm);
      color: var(--text-main);
      font-size: 0.9rem;
      outline: none;
    }
    .modal-input:focus { border-color: var(--primary); }
    .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
    .btn-secondary {
      padding: 8px 16px;
      background: transparent;
      border: 1px solid var(--border-subtle);
      color: var(--text-muted);
      border-radius: var(--radius-sm);
      cursor: pointer;
    }
    .btn-primary {
      padding: 8px 18px;
      background: var(--primary);
      color: white;
      border: none;
      border-radius: var(--radius-sm);
      cursor: pointer;
      font-weight: 600;
    }

    /* 八大專題大型模態視窗樣式 */
    .modal-card-lg {
      background: #182234;
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-lg);
      width: 820px;
      max-width: 94vw;
      max-height: 86vh;
      box-shadow: 0 24px 56px rgba(0,0,0,0.7);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      animation: modalFadeIn 0.2s ease-out;
    }
    @keyframes modalFadeIn {
      from { opacity: 0; transform: scale(0.97); }
      to { opacity: 1; transform: scale(1); }
    }
    .modal-header-bar {
      padding: 16px 20px;
      border-bottom: 1px solid var(--border-subtle);
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: rgba(15, 23, 42, 0.6);
      flex-shrink: 0;
    }
    .modal-header-title {
      font-size: 1.12rem;
      font-weight: 700;
      color: var(--text-main);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .modal-header-desc {
      font-size: 0.78rem;
      color: var(--text-muted);
      margin-top: 3px;
    }
    .modal-scroll-content {
      padding: 18px 20px;
      overflow-y: auto;
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 14px;
      scroll-behavior: smooth;
    }
    .modal-scroll-content::-webkit-scrollbar {
      width: 6px;
    }
    .modal-scroll-content::-webkit-scrollbar-thumb {
      background: rgba(255,255,255,0.18);
      border-radius: 999px;
    }
    .modal-search-box {
      width: 100%;
      padding: 10px 14px;
      background: var(--bg-primary);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md);
      color: var(--text-main);
      font-size: 0.90rem;
      outline: none;
      transition: border-color 0.2s;
    }
    .modal-search-box:focus { border-color: var(--primary); }

    .modal-filter-row {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }
    .modal-filter-chip {
      background: rgba(255,255,255,0.05);
      border: 1px solid var(--border-subtle);
      color: var(--text-muted);
      padding: 4px 11px;
      border-radius: 999px;
      font-size: 0.76rem;
      cursor: pointer;
      transition: all 0.15s;
    }
    .modal-filter-chip:hover { background: var(--bg-elevated); color: var(--text-main); }
    .modal-filter-chip.active {
      background: rgba(37, 99, 235, 0.25);
      border-color: var(--primary);
      color: #93C5FD;
      font-weight: 600;
    }

    .modal-item-card {
      background: var(--bg-surface);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md);
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      transition: border-color 0.15s, background 0.15s;
    }
    .modal-item-card:hover {
      border-color: rgba(59, 130, 246, 0.4);
      background: rgba(255,255,255,0.02);
    }
    .item-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }
    .item-card-title {
      font-size: 0.96rem;
      font-weight: 800;
      color: #0369A1;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .item-card-body {
      font-size: 0.88rem;
      line-height: 1.65;
      color: #1E293B;
      background: #FAF6ED;
      padding: 10px 12px;
      border-radius: var(--radius-sm);
      border: 1px solid #EADBCA;
      border-left: 4px solid #0284C7;
    }
    .item-card-meta {
      font-size: 0.80rem;
      color: var(--text-muted);
      line-height: 1.55;
    }
    .item-card-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      margin-top: 4px;
      flex-wrap: wrap;
    }
    .btn-action-sm {
      padding: 6px 12px;
      font-size: 0.80rem;
      border-radius: var(--radius-sm);
      cursor: pointer;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      transition: all 0.15s;
      border: 1px solid var(--border-subtle);
      background: rgba(255,255,255,0.05);
      color: var(--text-muted);
      text-decoration: none;
    }
    .btn-action-sm:hover { background: var(--bg-elevated); color: var(--text-main); }
    .btn-action-sm.primary {
      background: var(--primary);
      border-color: var(--primary);
      color: white;
    }
    .btn-action-sm.primary:hover { background: var(--primary-hover); }

    /* 一試互動選項題目樣式 */
    .stage1-qbox {
      background: rgba(0,0,0,0.25);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md);
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .stage1-stem {
      font-size: 0.92rem;
      font-weight: 600;
      line-height: 1.6;
      color: var(--text-main);
    }
    .stage1-options {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .stage1-opt-btn {
      padding: 9px 12px;
      background: rgba(255,255,255,0.04);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-sm);
      color: var(--text-muted);
      font-size: 0.86rem;
      cursor: pointer;
      text-align: left;
      transition: all 0.15s;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .stage1-opt-btn:hover { background: var(--bg-elevated); color: var(--text-main); }
    .stage1-opt-btn.correct {
      background: rgba(16, 185, 129, 0.2) !important;
      border-color: #10B981 !important;
      color: #A7F3D0 !important;
      font-weight: 600;
    }
    .stage1-opt-btn.wrong {
      background: rgba(244, 63, 94, 0.2) !important;
      border-color: #F43F5E !important;
      color: #FECDD3 !important;
    }
    .stage1-explain {
      display: none;
      background: rgba(37, 99, 235, 0.1);
      border-left: 3px solid #3B82F6;
      border-radius: 4px;
      padding: 10px 12px;
      font-size: 0.82rem;
      color: #BFDBFE;
      line-height: 1.6;
    }

    /* =========================================================================
       4-1. 雙欄現代法規速查庫 (Law Browser Modal) 樣式
       左側：51部法典滾輪上下捲動
       右側：條號搜尋、條號滾輪水平捲動選條號、列出條文、官方頁面按鈕、白話按鈕、白話解釋新框框
       ========================================================================= */
    .modal-card-lawbrowser {
      background: #141c2b;
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-lg);
      width: 1160px;
      max-width: 96vw;
      height: 88vh;
      max-height: 88vh;
      box-shadow: 0 24px 60px rgba(0,0,0,0.75);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      animation: modalFadeIn 0.2s ease-out;
    }
    .lawbrowser-layout {
      display: flex;
      flex: 1;
      min-height: 0;
      overflow: hidden;
    }
    .lawbrowser-left-pane {
      width: 320px;
      flex-shrink: 0;
      background: rgba(15, 23, 42, 0.55);
      border-right: 1px solid var(--border-subtle);
      display: flex;
      flex-direction: column;
      min-height: 0;
    }
    .lawbrowser-left-header {
      padding: 14px 16px;
      border-bottom: 1px solid var(--border-subtle);
      display: flex;
      flex-direction: column;
      gap: 10px;
      background: rgba(15, 23, 42, 0.4);
    }
    .law-search-box {
      width: 100%;
      padding: 9px 12px;
      background: var(--bg-primary);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md);
      color: var(--text-main);
      font-size: 0.86rem;
      outline: none;
      transition: border-color 0.2s;
    }
    .law-search-box:focus { border-color: var(--primary); }
    .lawbrowser-count-badge {
      font-size: 0.76rem;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .laws-scroll-list {
      flex: 1;
      overflow-y: auto;
      padding: 8px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      scroll-behavior: smooth;
    }
    .laws-scroll-list::-webkit-scrollbar {
      width: 6px;
    }
    .laws-scroll-list::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.15);
      border-radius: 999px;
    }
    .laws-scroll-list::-webkit-scrollbar-thumb:hover {
      background: rgba(255, 255, 255, 0.25);
    }
    .law-catalog-item {
      padding: 10px 12px;
      border-radius: var(--radius-sm);
      border: 1px solid transparent;
      background: rgba(255, 255, 255, 0.02);
      cursor: pointer;
      display: flex;
      flex-direction: column;
      gap: 4px;
      transition: all 0.15s ease;
    }
    .law-catalog-item:hover {
      background: rgba(59, 130, 246, 0.08);
      border-color: rgba(59, 130, 246, 0.2);
    }
    .law-catalog-item.active {
      background: rgba(37, 99, 235, 0.18);
      border-color: var(--primary);
      box-shadow: 0 0 12px rgba(37, 99, 235, 0.2);
    }
    .law-catalog-title {
      font-size: 0.88rem;
      font-weight: 600;
      color: var(--text-main);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .law-catalog-item.active .law-catalog-title {
      color: #93C5FD;
    }
    .law-catalog-sub {
      font-size: 0.72rem;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .lawbrowser-right-pane {
      flex: 1;
      min-width: 0;
      background: rgba(18, 26, 42, 0.5);
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      padding: 20px 24px;
      gap: 16px;
      scroll-behavior: smooth;
    }
    .lawbrowser-right-pane::-webkit-scrollbar {
      width: 6px;
    }
    .lawbrowser-right-pane::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.18);
      border-radius: 999px;
    }
    .current-law-banner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--border-subtle);
    }
    .current-law-title {
      font-size: 1.15rem;
      font-weight: 700;
      color: #FCD34D;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .current-law-tags {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .article-selector-block {
      background: rgba(0, 0, 0, 0.25);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md);
      padding: 12px 14px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .article-selector-top {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .article-search-input {
      flex: 1;
      padding: 8px 12px;
      background: var(--bg-primary);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-sm);
      color: var(--text-main);
      font-size: 0.85rem;
      outline: none;
      transition: border-color 0.2s;
    }
    .article-search-input:focus { border-color: var(--primary); }
    .article-picker-wrapper {
      position: relative;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .article-picker-hint {
      font-size: 0.74rem;
      color: var(--text-dim);
      white-space: nowrap;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .article-picker-scroll {
      display: flex;
      align-items: center;
      gap: 6px;
      overflow-x: auto;
      padding: 6px 2px;
      flex: 1;
      scroll-behavior: smooth;
      scrollbar-width: thin;
    }
    .article-picker-scroll::-webkit-scrollbar {
      height: 5px;
    }
    .article-picker-scroll::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.2);
      border-radius: 999px;
    }
    .article-picker-scroll::-webkit-scrollbar-thumb:hover {
      background: rgba(59, 130, 246, 0.6);
    }
    .article-pill {
      padding: 5px 12px;
      border-radius: 999px;
      font-size: 0.78rem;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid var(--border-subtle);
      color: var(--text-muted);
      cursor: pointer;
      white-space: nowrap;
      user-select: none;
      transition: all 0.15s ease;
      flex-shrink: 0;
    }
    .article-pill:hover {
      background: var(--bg-elevated);
      color: var(--text-main);
      border-color: rgba(59, 130, 246, 0.4);
    }
    .article-pill.active {
      background: rgba(37, 99, 235, 0.35);
      border-color: #3B82F6;
      color: #93C5FD;
      font-weight: 700;
      box-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
    }
    .selected-article-card {
      background: var(--bg-surface);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md);
      padding: 18px 20px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    }
    .selected-article-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }
    .selected-article-title {
      font-size: 1.05rem;
      font-weight: 700;
      color: #FBBF24;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .article-text-body {
      font-size: 0.94rem;
      line-height: 1.8;
      color: #F3F4F6;
      background: rgba(0,0,0,0.3);
      padding: 14px 16px;
      border-radius: var(--radius-sm);
      border-left: 4px solid #3B82F6;
      font-family: inherit;
      white-space: pre-wrap;
    }
    .article-actions-bar {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      padding-top: 4px;
    }
    .btn-official-page {
      padding: 7px 14px;
      font-size: 0.82rem;
      border-radius: var(--radius-sm);
      cursor: pointer;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: all 0.15s ease;
      background: rgba(16, 185, 129, 0.15);
      border: 1px solid rgba(16, 185, 129, 0.4);
      color: #6EE7B7;
      text-decoration: none;
    }
    .btn-official-page:hover {
      background: rgba(16, 185, 129, 0.25);
      border-color: #10B981;
      color: #A7F3D0;
    }
    .btn-plain-toggle {
      padding: 7px 14px;
      font-size: 0.82rem;
      border-radius: var(--radius-sm);
      cursor: pointer;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: all 0.15s ease;
      background: rgba(245, 158, 11, 0.15);
      border: 1px solid rgba(245, 158, 11, 0.4);
      color: #FCD34D;
    }
    .btn-plain-toggle:hover {
      background: rgba(245, 158, 11, 0.25);
      border-color: #F59E0B;
      color: #FDE68A;
    }
    .btn-plain-toggle.active {
      background: rgba(245, 158, 11, 0.35);
      border-color: #F59E0B;
      box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
    }
    .plain-explanation-box {
      background: linear-gradient(180deg, rgba(30, 41, 59, 0.85) 0%, rgba(15, 23, 42, 0.95) 100%);
      border: 1px solid rgba(245, 158, 11, 0.35);
      border-radius: var(--radius-md);
      padding: 16px 18px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.35);
      animation: plainFadeIn 0.25s ease-out;
    }
    @keyframes plainFadeIn {
      from { opacity: 0; transform: translateY(-6px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .plain-box-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      padding-bottom: 8px;
    }
    .plain-box-title {
      font-size: 0.94rem;
      font-weight: 700;
      color: #FDE68A;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .plain-badge {
      font-size: 0.72rem;
      background: rgba(245, 158, 11, 0.2);
      color: #FCD34D;
      padding: 2px 8px;
      border-radius: 999px;
      border: 1px solid rgba(245, 158, 11, 0.3);
      font-weight: 600;
    }
    .plain-main-text {
      font-size: 0.90rem;
      line-height: 1.75;
      color: #E2E8F0;
      background: rgba(0,0,0,0.2);
      padding: 12px 14px;
      border-radius: var(--radius-sm);
      border-left: 3px solid #F59E0B;
    }
    .plain-sections-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 10px;
      margin-top: 4px;
    }
    .plain-section-card {
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: var(--radius-sm);
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .plain-section-label {
      font-size: 0.74rem;
      font-weight: 700;
      color: #93C5FD;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .plain-section-val {
      font-size: 0.82rem;
      line-height: 1.5;
      color: var(--text-muted);
    }
    @media (max-width: 860px) {
      .modal-card-lawbrowser { width: 95vw; height: 92vh; }
      .lawbrowser-layout { flex-direction: column; }
      .lawbrowser-left-pane { width: 100%; max-height: 220px; border-right: none; border-bottom: 1px solid var(--border-subtle); }
      .laws-scroll-list { max-height: 150px; }
    }

    /* 打字機遊標效果 */
    .cursor-blink::after {
      content: "▋";
      display: inline-block;
      vertical-align: middle;
      color: #3B82F6;
      animation: blink 0.8s infinite;
      margin-left: 2px;
    }
    @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

    /* 響應式優化 */
    @media (max-width: 1024px) {
      .inspector-panel { display: none; }
    }
    @media (max-width: 768px) {
      .sidebar { position: absolute; height: 100%; }
    }

    /* =========================================================================
       列印與 PDF 匯出專業樣式 (@media print)
       徹底隱藏側欄、頂欄、輸入框，防止重疊與截斷，確保 A4 頁面完整呈現
       ========================================================================= */
    @media print {
      @page {
        size: A4 portrait;
        margin: 18mm 16mm 18mm 16mm;
      }
      *, *::before, *::after {
        color-adjust: exact !important;
        -webkit-print-color-adjust: exact !important;
      }
      html, body {
        background: #FFFFFF !important;
        color: #111827 !important;
        height: auto !important;
        overflow: visible !important;
        display: block !important;
        font-size: 11pt !important;
        line-height: 1.8 !important;
        margin: 0 !important;
        padding: 0 !important;
      }
      .sidebar,
      .inspector-panel,
      .stage-header,
      .input-stage,
      .msg-actions,
      .icon-btn,
      .modal-overlay,
      #welcomeCard,
      .prompt-chips-grid {
        display: none !important;
      }
      .main-stage {
        background: transparent !important;
        height: auto !important;
        overflow: visible !important;
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
      }
      .chat-messages {
        height: auto !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        display: block !important;
      }
      .msg-row {
        display: block !important;
        width: 100% !important;
        margin-bottom: 24px !important;
        page-break-inside: auto !important;
      }
      .msg-avatar {
        display: none !important;
      }
      .msg-body {
        width: 100% !important;
        display: block !important;
      }
      .msg-author {
        color: #1E3A8A !important;
        font-size: 12pt !important;
        font-weight: bold !important;
        border-bottom: 1.5pt solid #2563EB !important;
        padding-bottom: 4px !important;
        margin-bottom: 8px !important;
      }
      .msg-content {
        background: transparent !important;
        color: #111827 !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        font-size: 11pt !important;
        line-height: 1.85 !important;
        white-space: normal !important;
        word-break: break-word !important;
      }
      .msg-row.user .msg-content {
        background: #F3F4F6 !important;
        border: 1pt solid #D1D5DB !important;
        border-radius: 6px !important;
        padding: 10px 14px !important;
        margin-bottom: 16px !important;
      }
      .law-pill {
        background: #FEF3C7 !important;
        color: #92400E !important;
        border: 1pt solid #F59E0B !important;
        font-weight: bold !important;
        padding: 1px 4px !important;
        border-radius: 3px !important;
      }
      .thinking-card {
        border: 1pt dashed #9CA3AF !important;
        background: #F9FAFB !important;
        margin-bottom: 14px !important;
        page-break-inside: avoid !important;
      }
      .thinking-header {
        background: #E5E7EB !important;
        color: #374151 !important;
        font-weight: bold !important;
        padding: 6px 10px !important;
      }
      .thinking-body {
        color: #4B5563 !important;
        background: transparent !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 8px 10px !important;
        font-size: 9.5pt !important;
        line-height: 1.5 !important;
      }
    }

    /* =========================================================================
       4-2. 國考與證照全真試題研析工作台 (Exam Studio Modal) 樣式
       涵蓋：司律一試、司律二試、司法特考、地政士試題、不動產經紀人試題
       具備：年度、考科、題目、擬答、官方試卷、高點擬答、使用者擬答框、AI批改
       ========================================================================= */
    .modal-card-examstudio {
      background: #0F172A;
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: var(--radius-lg);
      width: calc(100vw - 16px);
      max-width: calc(100vw - 16px);
      height: calc(100dvh - 16px);
      max-height: calc(100dvh - 16px);
      box-shadow: 0 24px 60px rgba(0,0,0,0.85);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      animation: modalFadeIn 0.2s ease-out;
    }
    .exam-studio-header {
      padding: 14px 20px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      background: rgba(15, 23, 42, 0.95);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      flex-shrink: 0;
      flex-wrap: wrap;
    }
    .exam-studio-brand {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .exam-studio-title {
      font-size: 1.08rem;
      font-weight: 700;
      color: #F8FAFC;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .exam-cat-tabs {
      display: flex;
      gap: 6px;
      align-items: center;
      overflow-x: auto;
      padding: 2px;
    }
    .exam-cat-tab {
      padding: 6px 13px;
      border-radius: 20px;
      font-size: 0.80rem;
      font-weight: 600;
      cursor: pointer;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.12);
      color: #94A3B8;
      transition: all 0.15s ease;
      white-space: nowrap;
    }
    .exam-cat-tab:hover {
      background: rgba(255,255,255,0.12);
      color: #F8FAFC;
    }
    .exam-cat-tab.active {
      background: #2563EB;
      border-color: #3B82F6;
      color: #FFFFFF;
      box-shadow: 0 0 12px rgba(37,99,235,0.4);
    }
    .exam-scroll-body {
      padding: 20px 24px;
      overflow-y: auto;
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 18px;
    }
    .exam-scroll-body::-webkit-scrollbar {
      width: 7px;
    }
    .exam-scroll-body::-webkit-scrollbar-thumb {
      background: rgba(255,255,255,0.18);
      border-radius: 999px;
    }
    .exam-info-banner {
      background: linear-gradient(135deg, rgba(37,99,235,0.12) 0%, rgba(16,185,129,0.10) 100%);
      border: 1px solid rgba(59,130,246,0.25);
      border-radius: 10px;
      padding: 12px 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 10px;
    }
    .exam-info-text {
      font-size: 0.86rem;
      color: #E2E8F0;
      line-height: 1.5;
    }
    .exam-info-title {
      font-weight: 700;
      color: #FCD34D;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .exam-filter-panel {
      background: #182234;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 12px;
      padding: 16px 20px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .exam-filter-row {
      display: flex;
      align-items: flex-start;
      gap: 12px;
    }
    .exam-filter-label {
      width: 80px;
      font-weight: 700;
      font-size: 0.80rem;
      color: #94A3B8;
      padding-top: 5px;
      flex-shrink: 0;
    }
    .exam-btn-group {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      flex: 1;
    }
    .exam-filter-btn {
      padding: 5px 12px;
      font-size: 0.78rem;
      border-radius: 6px;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.04);
      color: #94A3B8;
      cursor: pointer;
      transition: all 0.15s;
    }
    .exam-filter-btn:hover {
      background: rgba(255,255,255,0.1);
      color: #F8FAFC;
    }
    .exam-filter-btn.active {
      background: #10B981;
      border-color: #10B981;
      color: #FFFFFF;
      font-weight: 600;
    }
    .exam-question-card {
      background: #1E293B;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 14px;
      padding: 24px 28px;
      box-shadow: 0 4px 24px rgba(0,0,0,0.3);
      display: flex;
      flex-direction: column;
      gap: 18px;
    }
    .exam-q-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      padding-bottom: 14px;
      flex-wrap: wrap;
      gap: 12px;
    }
    .exam-q-nav {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .exam-q-title {
      font-size: 1.05rem;
      font-weight: 700;
      color: #FCD34D;
    }
    .exam-q-actions {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
    }
    .exam-btn-action {
      padding: 7px 14px;
      font-size: 0.80rem;
      font-weight: 600;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,0.14);
      background: rgba(255,255,255,0.06);
      color: #F8FAFC;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      text-decoration: none;
      transition: all 0.15s;
    }
    .exam-btn-action:hover {
      background: rgba(255,255,255,0.14);
      border-color: rgba(255,255,255,0.3);
      color: #FFFFFF;
    }
    .exam-btn-action.primary {
      background: #2563EB;
      border-color: #3B82F6;
      color: #FFFFFF;
    }
    .exam-btn-action.gold {
      background: rgba(245,158,11,0.18);
      border-color: #F59E0B;
      color: #FCD34D;
    }
    .exam-btn-action.green {
      background: rgba(16,185,129,0.18);
      border-color: #10B981;
      color: #6EE7B7;
    }
    .exam-quote-stem {
      border-left: 4px solid #F59E0B;
      padding: 16px 20px;
      background: rgba(15,23,42,0.65);
      border-radius: 0 8px 8px 0;
      font-size: 0.94rem;
      line-height: 1.85;
      color: #F1F5F9;
      white-space: pre-wrap;
      letter-spacing: 0.2px;
    }
    .exam-ai-live-box {
      margin: 10px 0;
      border: 2px solid #10B981;
      border-radius: 12px;
      background: #0F2321;
      overflow: hidden;
      box-shadow: 0 6px 24px rgba(16,185,129,0.15);
      animation: modalFadeIn 0.2s ease-out;
    }
    .exam-ai-live-header {
      background: #0E4E42;
      color: white;
      padding: 10px 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
    }
    .exam-ai-live-body {
      padding: 18px 22px;
      font-size: 0.92rem;
      line-height: 1.8;
      color: #F0FDF4;
      white-space: pre-wrap;
      min-height: 80px;
    }
    .exam-ai-reasoning-panel {
      background: #091719;
      border-bottom: 1px dashed rgba(16,185,129,0.3);
      padding: 10px 16px;
      font-size: 0.82rem;
      color: #93C5FD;
      max-height: 200px;
      overflow-y: auto;
    }
    .exam-ai-live-footer {
      padding: 8px 16px;
      background: #091719;
      border-top: 1px solid rgba(16,185,129,0.3);
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
    }
    .exam-answer-box {
      border: 1px solid rgba(16, 185, 129, 0.3);
      background: linear-gradient(180deg, rgba(16, 185, 129, 0.06) 0%, rgba(15, 23, 42, 0.6) 100%);
      border-radius: 10px;
      padding: 16px 20px;
      margin-top: 16px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    }
    .exam-answer-title {
      font-size: 0.98rem;
      font-weight: 700;
      color: #6EE7B7;
      margin-bottom: 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
    }
    .exam-answer-content {
      font-size: 0.93rem;
      line-height: 1.85;
      color: #E2E8F0;
      white-space: pre-wrap;
      background: rgba(0, 0, 0, 0.35);
      padding: 16px 20px;
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      max-height: 480px;
      overflow-y: auto;
    }
    .exam-notes-box {
      margin-top: 14px;
      border-top: 1px dashed rgba(255,255,255,0.12);
      padding-top: 18px;
    }
    .exam-notes-box h3 {
      font-size: 0.95rem;
      color: #FCD34D;
      margin: 0 0 6px 0;
    }
    .exam-notes-textarea {
      width: 100%;
      min-height: 110px;
      background: #0F172A;
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 8px;
      color: #F8FAFC;
      padding: 12px 14px;
      font-size: 0.88rem;
      line-height: 1.6;
      outline: none;
      font-family: inherit;
      resize: vertical;
      box-sizing: border-box;
    }
    .exam-notes-textarea:focus {
      border-color: #3B82F6;
    }
    .exam-tools-bar {
      display: flex;
      gap: 8px;
      margin-top: 10px;
      align-items: center;
      flex-wrap: wrap;
    }


    /* =========================================================================
       淡藍色氛圍樣式增強 (Light Blue Theme Enhancements)
       ========================================================================= */
    body {
      background: linear-gradient(180deg, #F0F6FD 0%, #E6F1FC 100%) !important;
      color: #0F172A !important;
    }
    .sidebar {
      background: #EAF2FA !important;
      border-right: 1px solid #CFE2F4 !important;
      box-shadow: 2px 0 16px rgba(186, 215, 243, 0.25) !important;
    }
    .brand-header {
      background: #E2EEF9 !important;
      border-bottom: 1px solid #CFE2F4 !important;
    }
    .brand-title {
      color: #0369A1 !important;
    }
    .sidebar-btn {
      background: #F4F9FE !important;
      border: 1px solid #D5E5F5 !important;
      color: #1E293B !important;
    }
    .sidebar-btn:hover {
      background: #E0EFFC !important;
      border-color: #93C5FD !important;
      color: #0284C7 !important;
    }
    .sidebar-btn-title {
      color: #0F172A !important;
      font-weight: 700 !important;
    }
    .sidebar-btn-desc {
      color: #475569 !important;
    }
    .sidebar-scroll-body::-webkit-scrollbar-track {
      background: #E2EEF9 !important;
    }
    .sidebar-scroll-body::-webkit-scrollbar-thumb {
      background: #BAE6FD !important;
    }

    .main-stage {
      background: #EEF5FC !important;
    }
    .stage-header {
      background: rgba(240, 246, 253, 0.9) !important;
      border-bottom: 1px solid #CCE1F5 !important;
      backdrop-filter: blur(12px) !important;
      min-height: 76px;
      gap: 8px;
      padding: 0 14px;
    }
    .stage-header .header-left { min-width: 0; gap: 8px; flex: 1; }
    .stage-header .model-selector-wrap { min-width: 0; flex: 1; }
    .stage-header .header-right { gap: 8px; flex-shrink: 0; }
    .stage-header .model-badge-btn,
    #headerOnlineBox, #speedMetric, #headerPricingBtn {
      box-sizing: border-box;
      min-height: 56px;
      justify-content: center;
      text-align: center;
      flex-shrink: 0;
      padding: 7px 12px;
    }
    .stage-header .model-badge-btn { width: 100%; }
    #currentModelDisplay, #speedMetricText {
      white-space: pre-line;
      line-height: 1.45;
      text-align: center;
      font-size: 0.78rem;
    }
    #currentModelDisplay { white-space: nowrap; font-size: inherit; }
    .stage-header .model-badge-btn,
    #headerOnlineBox, #headerPricingBtn {
      padding-left: 0.5em;
      padding-right: 0.5em;
      font-size: 1rem;
      white-space: nowrap;
    }
    #headerOnlineBox .header-two-lines,
    #headerPricingBtn .header-two-lines { flex-direction: row; gap: 0.3em; }
    #headerOnlineBox .online-count,
    #headerOnlineBox .online-unit { font-size: inherit; }
    #headerPricingBtn .header-two-lines { gap: 0; }
    .header-two-lines {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      line-height: 1.4;
      white-space: nowrap;
    }
    .welcome-card {
      background: #FFFFFF !important;
      border: 1px solid #BFDBFE !important;
      box-shadow: 0 10px 32px rgba(186, 230, 253, 0.4) !important;
    }
    .welcome-title {
      color: #0369A1 !important;
    }
    .welcome-desc {
      color: #475569 !important;
    }
    .prompt-chip {
      background: #F0F7FE !important;
      border: 1px solid #BFDBFE !important;
      color: #0369A1 !important;
    }
    .prompt-chip:hover {
      background: #E0F2FE !important;
      border-color: #38BDF8 !important;
    }

    /* 對話訊息卡片淡藍氛圍適配 */
    .chat-messages {
      background: #EEF5FC !important;
    }
    .msg-card.ai {
      background: #FFFFFF !important;
      border: 1px solid #BFDBFE !important;
      color: #0F172A !important;
      box-shadow: 0 4px 18px rgba(186, 230, 253, 0.25) !important;
    }
    .msg-card.user {
      background: linear-gradient(135deg, #0284C7, #0369A1) !important;
      color: #FFFFFF !important;
      box-shadow: 0 4px 16px rgba(2, 132, 199, 0.25) !important;
    }
    .msg-header {
      color: #475569 !important;
      border-bottom: 1px solid #E2EEF9 !important;
    }

    /* 輸入區塊淡藍氛圍適配 */
    .input-container {
      background: #FFFFFF !important;
      border: 1px solid #BAE6FD !important;
      box-shadow: 0 6px 24px rgba(2, 132, 199, 0.12) !important;
    }
    .input-container:focus-within {
      border-color: #0284C7 !important;
      box-shadow: 0 8px 30px rgba(2, 132, 199, 0.2) !important;
    }
    #chatInput {
      color: #0F172A !important;
    }
    #chatInput::placeholder {
      color: #94A3B8 !important;
    }

    /* 右側檢查器抽屜淡藍氛圍適配 */
    .inspector-panel {
      background: #EAF2FA !important;
      border-left: 1px solid #CFE2F4 !important;
      box-shadow: -2px 0 16px rgba(186, 215, 243, 0.25) !important;
    }
    .auth-card-box, .law-search-box-wrap, .side-result-card {
      background: #FFFFFF !important;
      border: 1px solid #BFDBFE !important;
      box-shadow: 0 4px 18px rgba(186, 230, 253, 0.3) !important;
      color: #0F172A !important;
    }
    .pane-box-title, .auth-card-title {
      color: #0369A1 !important;
    }
    .side-search-input, .auth-input {
      background: #F0F7FE !important;
      border: 1px solid #BAE6FD !important;
      color: #0F172A !important;
    }
    .side-search-input:focus, .auth-input:focus {
      border-color: #0284C7 !important;
      background: #FFFFFF !important;
    }

    /* 彈出視窗淡藍氛圍統一適配 */
    .modal-overlay {
      background: rgba(15, 35, 60, 0.5) !important;
      backdrop-filter: blur(8px) !important;
    }
    .modal-card-lg, .modal-card, .modal-card-examstudio, .about-modal-container, .register-modal-container, .pricing-modal-container {
      background: #F8FBFE !important;
      border: 1px solid #BFDBFE !important;
      box-shadow: 0 25px 65px rgba(2, 132, 199, 0.22) !important;
      color: #0F172A !important;
    }
    .modal-header-bar, .exam-studio-header, .pricing-modal-header, .register-modal-header, .about-modal-header {
      background: linear-gradient(180deg, #E8F3FD 0%, #F4F9FE 100%) !important;
      border-bottom: 1px solid #CCE1F5 !important;
    }
    .modal-header-title, .pricing-modal-title, .register-modal-title, .about-modal-title {
      color: #0369A1 !important;
    }
    .modal-header-desc, .pricing-modal-subtitle, .register-modal-subtitle, .about-modal-subtitle {
      color: #475569 !important;
    }

    /* =========================================================================
       通用「上一頁」按鍵樣式 (Universal Back Button)
       ========================================================================= */
    .btn-prev-page {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 14px;
      background: #FFFFFF;
      border: 1px solid #BFDBFE;
      border-radius: 20px;
      color: #0369A1;
      font-size: 0.84rem;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.1);
      margin-right: 12px;
      flex-shrink: 0;
    }
    .btn-prev-page:hover {
      background: #E0F2FE;
      border-color: #0284C7;
      color: #0284C7;
      transform: translateX(-2px);
      box-shadow: 0 4px 10px rgba(2, 132, 199, 0.18);
    }
    .btn-prev-arrow {
      font-size: 1rem;
      line-height: 1;
    }
    .btn-prev-text {
      line-height: 1;
    }

    /* =========================================================================
       橫式會員方案卡片樣式 (Horizontal Membership Pricing Cards)
       ========================================================================= */
    .pricing-cards-horizontal {
      display: flex;
      flex-direction: column;
      gap: 14px;
      padding: 20px 28px;
      overflow-y: auto;
      max-height: calc(88vh - 200px);
    }
    .pricing-h-card {
      display: grid;
      grid-template-columns: 240px 1fr 220px;
      gap: 20px;
      align-items: center;
      background: #FFFFFF;
      border: 1px solid #D0E2F2;
      border-radius: 14px;
      padding: 18px 22px;
      box-shadow: 0 4px 16px rgba(2, 132, 199, 0.06);
      transition: all 0.25s ease;
      color: #0F172A;
    }
    .pricing-h-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(2, 132, 199, 0.12);
      border-color: #38BDF8;
    }

    /* 各等級橫式卡片色彩與氛圍 */
    .pricing-h-card.unlimited-h-tier {
      border: 1.8px solid #F59E0B;
      background: linear-gradient(135deg, #FFFDF7 0%, #FFFFFF 100%);
      box-shadow: 0 6px 20px rgba(245, 158, 11, 0.12);
    }
    .pricing-h-card.pro-h-tier {
      border: 1.8px solid #0284C7;
      background: linear-gradient(135deg, #F0F9FF 0%, #FFFFFF 100%);
      box-shadow: 0 6px 20px rgba(2, 132, 199, 0.1);
    }
    .pricing-h-card.student-h-tier {
      border: 1.8px solid #10B981;
      background: linear-gradient(135deg, #F0FDF4 0%, #FFFFFF 100%);
      box-shadow: 0 6px 20px rgba(16, 185, 129, 0.1);
    }
    .pricing-h-card.free-h-tier {
      border: 1.5px solid #CBD5E1;
      background: #FFFFFF;
    }

    /* 左欄：等級徽章與名稱 */
    .h-card-left {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .h-tier-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11.5px;
      font-weight: 800;
      padding: 3px 10px;
      border-radius: 12px;
      width: fit-content;
      letter-spacing: 0.3px;
    }
    .diamond-badge {
      background: linear-gradient(135deg, #FEF3C7, #FDE68A);
      color: #92400E;
      border: 1px solid #F59E0B;
    }
    .gold-badge {
      background: linear-gradient(135deg, #E0F2FE, #BAE6FD);
      color: #0369A1;
      border: 1px solid #0284C7;
    }
    .silver-badge {
      background: linear-gradient(135deg, #D1FAE5, #A7F3D0);
      color: #065F46;
      border: 1px solid #10B981;
    }
    .bronze-badge {
      background: #F1F5F9;
      color: #475569;
      border: 1px solid #CBD5E1;
    }
    .h-tier-name {
      font-size: 1.32rem;
      font-weight: 800;
      color: #0F172A;
      letter-spacing: -0.3px;
    }
    .h-tier-sub {
      font-size: 0.8rem;
      color: #64748B;
      line-height: 1.4;
    }

    /* 中欄：完整權益清單 */
    .h-card-center {
      border-left: 1px solid #E2EEF9;
      border-right: 1px solid #E2EEF9;
      padding: 0 18px;
    }
    .h-features-header {
      font-size: 0.78rem;
      font-weight: 700;
      color: #0369A1;
      margin-bottom: 8px;
    }
    .h-features-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 7px 16px;
    }
    .h-feature-item {
      display: flex;
      align-items: flex-start;
      gap: 7px;
      font-size: 0.78rem;
      color: #334155;
      line-height: 1.45;
    }
    .h-check-icon {
      color: #0284C7;
      font-weight: 800;
      font-size: 12px;
      margin-top: 1px;
    }
    .student-h-tier .h-check-icon { color: #059669; }
    .unlimited-h-tier .h-check-icon { color: #D97706; }

    /* 右欄：價格區塊與訂閱按鈕 */
    .h-card-right {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      text-align: right;
      gap: 8px;
    }
    .h-price-block {
      display: flex;
      align-items: baseline;
      gap: 3px;
    }
    .h-currency {
      font-size: 0.95rem;
      font-weight: 700;
      color: #0F172A;
    }
    .h-amount {
      font-size: 2.1rem;
      font-weight: 800;
      color: #0F172A;
      letter-spacing: -1px;
      line-height: 1;
    }
    .h-period {
      font-size: 0.85rem;
      color: #64748B;
      font-weight: 600;
    }
    .h-price-desc {
      font-size: 0.74rem;
      color: #64748B;
      line-height: 1.35;
      max-width: 200px;
    }
    .btn-h-plan {
      padding: 9px 20px;
      border-radius: 8px;
      font-size: 0.88rem;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.2s ease;
      border: none;
      white-space: nowrap;
    }
    .btn-h-plan.btn-unlimited {
      background: linear-gradient(135deg, #F59E0B, #D97706);
      color: #111827;
      font-weight: 800;
      box-shadow: 0 3px 12px rgba(245, 158, 11, 0.35);
    }
    .btn-h-plan.btn-unlimited:hover {
      background: linear-gradient(135deg, #FBBF24, #F59E0B);
      transform: translateY(-1px);
      box-shadow: 0 5px 16px rgba(245, 158, 11, 0.45);
    }
    .btn-h-plan.btn-pro {
      background: linear-gradient(135deg, #0284C7, #0369A1);
      color: #FFFFFF;
      box-shadow: 0 3px 12px rgba(2, 132, 199, 0.25);
    }
    .btn-h-plan.btn-pro:hover {
      background: linear-gradient(135deg, #0369A1, #075985);
      transform: translateY(-1px);
      box-shadow: 0 5px 16px rgba(2, 132, 199, 0.35);
    }
    .btn-h-plan.btn-student {
      background: linear-gradient(135deg, #10B981, #059669);
      color: #FFFFFF;
      box-shadow: 0 3px 12px rgba(16, 185, 129, 0.25);
    }
    .btn-h-plan.btn-student:hover {
      background: linear-gradient(135deg, #059669, #047857);
      transform: translateY(-1px);
      box-shadow: 0 5px 16px rgba(16, 185, 129, 0.35);
    }
    .btn-h-plan.btn-free {
      background: #F1F5F9;
      color: #334155;
      border: 1px solid #CBD5E1;
    }
    .btn-h-plan.btn-free:hover {
      background: #E2E8F0;
      color: #0F172A;
    }

    @media (max-width: 900px) {
      .pricing-h-card {
        grid-template-columns: 1fr;
        gap: 14px;
      }
      .h-card-center {
        border-left: none;
        border-right: none;
        padding: 10px 0;
        border-top: 1px solid #E2EEF9;
        border-bottom: 1px solid #E2EEF9;
      }
      .h-card-right {
        align-items: flex-start;
        text-align: left;
      }
    }


    /* =========================================================================
       2026-10-18 使用者視覺客製化優化 (黃底紅字、中間輸入框灰底、右邊民法184條米色底)
       ========================================================================= */

    /* 1. 黃底的部分用紅字 (Yellow background elements with red text) */
    .header-pricing-btn {
      background: linear-gradient(135deg, #FEF3C7, #FDE68A) !important;
      border: 1.5px solid #F59E0B !important;
      color: #DC2626 !important;
      font-weight: 800 !important;
      box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25) !important;
    }
    .header-pricing-btn span {
      color: #DC2626 !important;
      font-weight: 800 !important;
    }
    .header-pricing-btn:hover {
      background: linear-gradient(135deg, #FDE68A, #FCD34D) !important;
      border-color: #D97706 !important;
      color: #B91C1C !important;
    }
    .header-pricing-btn:hover span {
      color: #B91C1C !important;
    }

    .sidebar-btn-tag.gold {
      background: #FEF3C7 !important;
      border: 1px solid #F59E0B !important;
      color: #DC2626 !important;
      font-weight: 700 !important;
      box-shadow: 0 1px 3px rgba(245, 158, 11, 0.2) !important;
    }

    .tier-pill.gold {
      background: #FEF3C7 !important;
      border: 1px solid #F59E0B !important;
      color: #DC2626 !important;
      font-weight: 800 !important;
    }

    .law-pill {
      background: #FEF3C7 !important;
      border: 1px solid #F59E0B !important;
      color: #DC2626 !important;
      font-weight: 700 !important;
    }

    .pricing-cycle-badge {
      background: #FEF3C7 !important;
      border: 1px solid #F59E0B !important;
      color: #DC2626 !important;
      font-weight: 800 !important;
    }

    .diamond-badge {
      background: linear-gradient(135deg, #FEF3C7, #FDE68A) !important;
      border: 1.2px solid #F59E0B !important;
      color: #DC2626 !important;
      font-weight: 800 !important;
    }

    .model-opt-tag.gold,
    .plain-badge,
    .exam-btn-action.gold {
      background: #FEF3C7 !important;
      border: 1px solid #F59E0B !important;
      color: #DC2626 !important;
      font-weight: 700 !important;
    }

    /* 2. 中間輸入框框裡面用灰色底 (Middle input box with gray background) */
    .input-stage.in-hero .input-box-wrapper,
    .input-stage .input-box-wrapper,
    .input-container {
      background: #E2E8F0 !important;
      border: 1.5px solid #CBD5E1 !important;
      border-radius: var(--radius-lg) !important;
      box-shadow: 0 8px 28px rgba(100, 116, 139, 0.22) !important;
    }

    .input-stage.in-hero .input-box-wrapper:focus-within,
    .input-stage .input-box-wrapper:focus-within,
    .input-container:focus-within {
      background: #EDF2F7 !important;
      border-color: #0284C7 !important;
      box-shadow: 0 10px 32px rgba(2, 132, 199, 0.28) !important;
    }

    .chat-textarea {
      background: transparent !important;
      color: #0F172A !important;
      font-weight: 500 !important;
    }

    .chat-textarea::placeholder {
      color: #64748B !important;
    }

    .input-toolbar {
      border-top: 1px solid #CBD5E1 !important;
      padding-top: 8px !important;
    }

    .toggle-chip {
      background: #FFFFFF !important;
      border: 1px solid #CBD5E1 !important;
      color: #334155 !important;
    }

    .toggle-chip:hover {
      background: #F1F5F9 !important;
      color: #0F172A !important;
      border-color: #94A3B8 !important;
    }

    .toggle-chip.active {
      background: #0284C7 !important;
      border-color: #0284C7 !important;
      color: #FFFFFF !important;
      font-weight: 700 !important;
    }

    /* 3. 右邊民法第184條那個框框用米色底 (Civil Code Article 184 box with beige background) */
    .searched-law-result-card,
    #sideLawSearchResultBox {
      background: #FAF6EE !important;
      border: 1.5px solid #E4D7C2 !important;
      border-radius: 12px !important;
      box-shadow: 0 6px 20px rgba(180, 150, 120, 0.16) !important;
      padding: 14px !important;
    }

    #sideLawSearchResultBox .result-law-title {
      color: #9A3412 !important;
      font-weight: 800 !important;
      font-size: 1.02rem !important;
    }

    #sideLawSearchResultBox .result-law-meta {
      color: #78716C !important;
    }

    #sideLawSearchResultBox .result-section-label {
      color: #78716C !important;
      font-weight: 700 !important;
    }

    #sideLawSearchResultBox .result-law-content,
    #sideResultLawText {
      background: #FFFDF9 !important;
      border: 1.2px solid #E8DFD0 !important;
      border-left: 4px solid #D97706 !important;
      color: #292524 !important;
      border-radius: 8px !important;
      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04) !important;
      font-weight: 500 !important;
    }

    #sideLawSearchResultBox .result-plain-box {
      background: #F5EFEB !important;
      border: 1.2px solid #E4D7C2 !important;
      color: #292524 !important;
      border-radius: 8px !important;
    }


    /* =========================================================================
       2026-10-18 試題頁深藍色全面改為淺藍色 (Exam Pages Light Blue Theme)
       ========================================================================= */

    /* 1. 題庫研析台容器與頂部分類標籤 (Exam Studio Container & Tabs) */
    .modal-card-examstudio {
      background: #F4F9FD !important;
      border: 1px solid #BFDBFE !important;
      color: #0F172A !important;
      box-shadow: 0 25px 65px rgba(2, 132, 199, 0.22) !important;
    }

    .exam-studio-header {
      background: linear-gradient(180deg, #E8F3FD 0%, #E1EFFB 100%) !important;
      border-bottom: 1px solid #CCE1F5 !important;
    }

    .exam-studio-title {
      color: #0369A1 !important;
      font-weight: 800 !important;
    }

    .exam-cat-tabs {
      background: #E1EFFB !important;
      border: 1px solid #CCE1F5 !important;
      border-radius: 999px !important;
      padding: 3px !important;
    }

    .exam-cat-tab {
      background: #FFFFFF !important;
      border: 1px solid #BFDBFE !important;
      color: #334155 !important;
      font-weight: 600 !important;
      transition: all 0.2s ease !important;
    }

    .exam-cat-tab:hover {
      background: #E0F2FE !important;
      color: #0284C7 !important;
      border-color: #38BDF8 !important;
    }

    .exam-cat-tab.active {
      background: #0284C7 !important;
      border-color: #0284C7 !important;
      color: #FFFFFF !important;
      box-shadow: 0 2px 10px rgba(2, 132, 199, 0.35) !important;
    }

    /* 2. 考題資訊橫幅 (Exam Info Banner) */
    .exam-info-banner {
      background: #E0F2FE !important;
      border: 1px solid #BAE6FD !important;
      box-shadow: 0 2px 8px rgba(186, 230, 253, 0.35) !important;
    }

    .exam-info-title {
      color: #0369A1 !important;
    }

    .exam-info-text {
      color: #1E293B !important;
    }

    /* 3. 頂部過濾面版 (原深藍 #182234 改為透亮淺藍色) */
    .exam-filter-panel {
      background: #E8F2FC !important;
      border: 1.5px solid #BFDBFE !important;
      border-radius: 12px !important;
      box-shadow: 0 4px 18px rgba(186, 230, 253, 0.4) !important;
    }

    .exam-filter-label {
      color: #0369A1 !important;
      font-weight: 700 !important;
    }

    .exam-filter-btn {
      background: #FFFFFF !important;
      border: 1px solid #BAE6FD !important;
      color: #0F172A !important;
      font-weight: 500 !important;
      transition: all 0.15s ease !important;
    }

    .exam-filter-btn:hover {
      background: #E0F2FE !important;
      border-color: #38BDF8 !important;
      color: #0284C7 !important;
    }

    .exam-filter-btn.active {
      background: #0284C7 !important;
      border-color: #0284C7 !important;
      color: #FFFFFF !important;
      font-weight: 700 !important;
      box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3) !important;
    }

    /* 4. 主考題卡片 (原深藍 #1E293B 改為溫潤淺藍色) */
    .exam-question-card {
      background: #F0F7FE !important;
      border: 1.5px solid #BFDBFE !important;
      border-radius: 14px !important;
      box-shadow: 0 6px 24px rgba(186, 230, 253, 0.45) !important;
      color: #0F172A !important;
    }

    .exam-q-header {
      border-bottom: 1px solid #CFE2F4 !important;
      padding-bottom: 14px !important;
    }

    .exam-q-title {
      color: #0369A1 !important;
      font-weight: 800 !important;
    }

    #selectExamJump {
      background: #FFFFFF !important;
      border: 1px solid #BAE6FD !important;
      color: #0F172A !important;
    }

    .exam-btn-action {
      background: #FFFFFF !important;
      border: 1px solid #BAE6FD !important;
      color: #0369A1 !important;
      font-weight: 600 !important;
      transition: all 0.2s ease !important;
    }

    .exam-btn-action:hover {
      background: #E0F2FE !important;
      border-color: #0284C7 !important;
      color: #0284C7 !important;
    }

    .exam-btn-action.primary {
      background: #0284C7 !important;
      border-color: #0284C7 !important;
      color: #FFFFFF !important;
    }

    .exam-btn-action.green {
      background: #10B981 !important;
      border-color: #10B981 !important;
      color: #FFFFFF !important;
    }

    .exam-btn-action.gold {
      background: #FEF3C7 !important;
      border: 1px solid #F59E0B !important;
      color: #DC2626 !important;
      font-weight: 800 !important;
    }

    /* 5. 考題題目內框 (原深藍 rgba(15,23,42,0.65) 改為清爽淺藍色) */
    .exam-quote-stem {
      background: #E1EFFB !important;
      border: 1px solid #BAE6FD !important;
      border-left: 5px solid #0284C7 !important;
      border-radius: 0 10px 10px 0 !important;
      color: #0F172A !important;
      box-shadow: 0 2px 10px rgba(186, 230, 253, 0.3) !important;
      font-size: 0.94rem !important;
      line-height: 1.7 !important;
    }

    /* 6. 原本終審覆核擬答框 (全面淺色高對比化) */
    .exam-answer-box {
      background: #F4F9FD !important;
      border: 1.5px solid #93C5FD !important;
      border-radius: 12px !important;
      box-shadow: 0 4px 18px rgba(186, 230, 253, 0.35) !important;
    }

    .exam-answer-title {
      color: #0369A1 !important;
      font-weight: 800 !important;
    }

    .exam-answer-content {
      background: #FFFFFF !important;
      border: 1px solid #CCE1F5 !important;
      border-radius: 8px !important;
      color: #0F172A !important;
      line-height: 1.45 !important;
    }

    /* 7. 筆記區塊 (原深藍 #0F172A 改為純白高潔淨表面) */
    .exam-notes-box {
      border-top: 1px dashed #CFE2F4 !important;
    }

    .exam-notes-box h3 {
      color: #0369A1 !important;
      font-weight: 700 !important;
    }

    .exam-notes-textarea {
      background: #FFFFFF !important;
      border: 1px solid #BAE6FD !important;
      border-radius: 8px !important;
      color: #0F172A !important;
    }

    .exam-notes-textarea:focus {
      border-color: #0284C7 !important;
      box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
    }

    /* 8. AI 即時示範擬答盒 (原黑綠色改為清亮淺藍淺綠) */
    .exam-ai-live-box {
      background: #EAF7F2 !important;
      border: 1.8px solid #6EE7B7 !important;
      box-shadow: 0 6px 20px rgba(16, 185, 129, 0.15) !important;
    }

    .exam-ai-live-header {
      background: linear-gradient(135deg, #059669, #047857) !important;
      color: #FFFFFF !important;
    }

    .exam-ai-live-body {
      background: #FFFFFF !important;
      color: #0F172A !important;
    }

    .exam-ai-reasoning-panel {
      background: #F0FAF7 !important;
      border-bottom: 1px dashed #A7F3D0 !important;
      color: #0F172A !important;
    }

    .exam-ai-live-footer {
      background: #EAF7F2 !important;
      border-top: 1px solid #A7F3D0 !important;
      color: #0F172A !important;
    }

    /* 9. 司律一試選擇題練習室 (原深藍 rgba(0,0,0,0.25) 改為淺藍色) */
    .stage1-qbox {
      background: #EBF4FC !important;
      border: 1.5px solid #BFDBFE !important;
      border-radius: 12px !important;
      color: #0F172A !important;
      box-shadow: 0 4px 16px rgba(186, 230, 253, 0.35) !important;
    }

    .stage1-stem {
      color: #0F172A !important;
    }

    .stage1-opt-btn {
      background: #FFFFFF !important;
      border: 1px solid #CCE1F5 !important;
      color: #1E293B !important;
      font-weight: 500 !important;
      transition: all 0.15s ease !important;
    }

    .stage1-opt-btn:hover {
      background: #E0F2FE !important;
      border-color: #38BDF8 !important;
      color: #0284C7 !important;
    }

    .stage1-opt-btn.correct {
      background: #D1FAE5 !important;
      border-color: #10B981 !important;
      color: #065F46 !important;
      font-weight: 700 !important;
    }

    .stage1-opt-btn.wrong {
      background: #FEE2E2 !important;
      border-color: #EF4444 !important;
      color: #991B1B !important;
      font-weight: 700 !important;
    }

    .stage1-explain {
      background: #E0F2FE !important;
      border-left: 4px solid #0284C7 !important;
      color: #0F172A !important;
    }


    /* =========================================================================
       2026-10-18 下拉式表單與選單改為淡藍色加框線 (Dropdowns Light Blue with Borders)
       ========================================================================= */

    /* 頂部模型切換按鈕觸發器 */
    .model-badge-btn {
      background: #F0F7FE !important;
      border: 1.5px solid #BAE6FD !important;
      border-radius: 999px !important;
      color: #0F172A !important;
      box-shadow: 0 2px 8px rgba(186, 230, 253, 0.4) !important;
      transition: all 0.2s ease !important;
    }
    .model-badge-btn:hover {
      background: #E0F2FE !important;
      border-color: #0284C7 !important;
      color: #0284C7 !important;
      box-shadow: 0 4px 12px rgba(2, 132, 199, 0.2) !important;
    }

    /* 下拉選單彈出容器 (原深藍 #182234 改為淡藍色 + 精緻湛藍框線) */
    .model-dropdown {
      background: #EEF6FD !important;
      border: 1.8px solid #93C5FD !important;
      border-radius: 12px !important;
      box-shadow: 0 16px 36px rgba(2, 132, 199, 0.22), 0 0 0 1px rgba(147, 197, 253, 0.35) !important;
      padding: 8px !important;
      backdrop-filter: blur(16px) !important;
    }

    /* 下拉選項項目 (加邊框線、高對比白底/淡藍底、深海軍黑文字) */
    .model-opt {
      background: #FFFFFF !important;
      border: 1.2px solid #CCE1F5 !important;
      border-radius: 8px !important;
      padding: 10px 12px !important;
      margin-bottom: 4px !important;
      transition: all 0.15s ease !important;
    }
    .model-opt:last-child {
      margin-bottom: 0 !important;
    }

    .model-opt:hover {
      background: #E0F2FE !important;
      border-color: #38BDF8 !important;
      box-shadow: 0 2px 8px rgba(2, 132, 199, 0.12) !important;
    }

    /* 已選取的選項項目 (明顯淡藍高亮 + 湛藍左邊界框線) */
    .model-opt.selected {
      background: #E0F2FE !important;
      border: 1.5px solid #0284C7 !important;
      border-left: 4px solid #0284C7 !important;
      box-shadow: 0 2px 10px rgba(2, 132, 199, 0.18) !important;
    }

    .model-opt-title {
      color: #0F172A !important;
      font-weight: 700 !important;
      font-size: 0.90rem !important;
    }

    .model-opt-desc {
      color: #475569 !important;
      font-size: 0.76rem !important;
      line-height: 1.4 !important;
      margin-top: 3px !important;
    }

    .model-opt-tag {
      background: #E0EFFE !important;
      border: 1px solid #BAE6FD !important;
      color: #0284C7 !important;
      font-weight: 600 !important;
    }

    .model-opt-tag.gold {
      background: #FEF3C7 !important;
      border: 1px solid #F59E0B !important;
      color: #DC2626 !important;
      font-weight: 700 !important;
    }

    /* 全站通用 <select> 下拉式表單元件 (淡藍底色 + 框線) */
    select,
    .custom-select,
    #selectExamJump,
    #regRole {
      background: #F0F7FE !important;
      border: 1.5px solid #BAE6FD !important;
      border-radius: 8px !important;
      color: #0F172A !important;
      padding: 6px 12px !important;
      font-size: 0.88rem !important;
      outline: none !important;
      box-shadow: 0 2px 6px rgba(186, 230, 253, 0.25) !important;
      transition: all 0.15s ease !important;
    }
    select:focus,
    .custom-select:focus,
    #selectExamJump:focus,
    #regRole:focus {
      background: #FFFFFF !important;
      border-color: #0284C7 !important;
      box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.2) !important;
    }


    /* =========================================================================
       2026-10-18 留言板與彈出視窗深色區塊全面改為淺藍色 (Feedback & Modals Light Blue)
       ========================================================================= */

    /* 1. 留言板發表表單外卡 (原深藍 #0F172A 改為透亮淺藍色) */
    .feedback-form-card {
      background: #EEF6FD !important;
      border: 1.5px solid #BFDBFE !important;
      border-radius: 12px !important;
      box-shadow: 0 8px 24px rgba(186, 230, 253, 0.45) !important;
      padding: 18px 20px !important;
    }

    .feedback-form-card label {
      color: #0369A1 !important;
      font-weight: 600 !important;
    }

    .feedback-form-card input,
    .feedback-form-card select,
    .feedback-form-card textarea {
      background: #FFFFFF !important;
      border: 1.5px solid #BAE6FD !important;
      color: #0F172A !important;
      border-radius: 8px !important;
      padding: 8px 12px !important;
      font-size: 13.5px !important;
      outline: none !important;
      box-shadow: inset 0 1px 3px rgba(0,0,0,0.03) !important;
      transition: all 0.15s ease !important;
    }

    .feedback-form-card input:focus,
    .feedback-form-card select:focus,
    .feedback-form-card textarea:focus {
      background: #FFFFFF !important;
      border-color: #0284C7 !important;
      box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.18) !important;
    }

    .feedback-form-card input::placeholder,
    .feedback-form-card textarea::placeholder {
      color: #64748B !important;
    }

    /* 2. 留言卡片清單 (原深藍 #131D2E 改為透亮淺藍色) */
    .feedback-card {
      background: #F0F7FE !important;
      border: 1.5px solid #BFDBFE !important;
      border-radius: 12px !important;
      padding: 16px 18px !important;
      box-shadow: 0 4px 16px rgba(186, 230, 253, 0.35) !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 10px !important;
    }

    .feedback-card .author-name {
      font-weight: 800 !important;
      color: #0F172A !important;
      font-size: 13.5px !important;
    }

    .feedback-card .msg-title {
      font-weight: 800 !important;
      font-size: 14.5px !important;
      color: #0369A1 !important;
    }

    .feedback-card .msg-body {
      font-size: 13.5px !important;
      color: #1E293B !important;
      line-height: 1.65 !important;
    }

    .feedback-card .reply-box {
      background: #E8F7F0 !important;
      border: 1.5px solid #A7F3D0 !important;
      border-left: 4px solid #10B981 !important;
      border-radius: 8px !important;
      padding: 10px 14px !important;
    }

    .feedback-card .reply-box .reply-title {
      font-size: 12px !important;
      font-weight: 700 !important;
      color: #065F46 !important;
    }

    .feedback-card .reply-box .reply-content {
      font-size: 13px !important;
      color: #064E3B !important;
      line-height: 1.6 !important;
    }

    .feedback-filter-btn {
      background: #FFFFFF !important;
      border: 1px solid #BAE6FD !important;
      color: #334155 !important;
      border-radius: 999px !important;
      padding: 4px 12px !important;
      font-size: 12px !important;
      cursor: pointer !important;
      transition: all 0.15s ease !important;
    }

    .feedback-filter-btn:hover {
      background: #E0F2FE !important;
      border-color: #38BDF8 !important;
      color: #0284C7 !important;
    }

    .feedback-filter-btn.active {
      background: #0284C7 !important;
      border-color: #0284C7 !important;
      color: #FFFFFF !important;
      font-weight: 700 !important;
    }

    /* 3. 關於 Bob Law AI 視窗內部卡片 (原深色改為淺藍/高潔白底) */
    .about-card {
      background: #F0F7FE !important;
      border: 1.5px solid #BFDBFE !important;
      border-radius: 14px !important;
      color: #0F172A !important;
      box-shadow: 0 4px 16px rgba(186, 230, 253, 0.35) !important;
    }

    .about-card-title {
      color: #0369A1 !important;
      font-weight: 800 !important;
    }

    .about-subcard {
      background: #FFFFFF !important;
      border: 1px solid #CCE1F5 !important;
      border-radius: 10px !important;
      color: #0F172A !important;
      box-shadow: 0 2px 8px rgba(186, 230, 253, 0.2) !important;
    }

    .about-subcard-title {
      color: #0369A1 !important;
      font-weight: 700 !important;
    }

    .about-subcard-desc {
      color: #475569 !important;
    }

    /* RAG流程卡片與下方文字深藍色優化 (依指示全面改為高對比深藍色) */
    .about-flow-step {
      background: #F0F9FF !important;
      border: 1.5px solid #BAE6FD !important;
      border-left: 4.5px solid #0284C7 !important;
      color: #0369A1 !important;
      border-radius: 0 8px 8px 0 !important;
      box-shadow: 0 2px 6px rgba(186, 230, 253, 0.25) !important;
    }

    .flow-step-num {
      color: #0284C7 !important;
      font-weight: 900 !important;
      font-size: 0.95rem !important;
      min-width: 32px !important;
    }

    .flow-step-content {
      font-size: 0.86rem !important;
      color: #0369A1 !important; /* RAG這行下面的字全面改深藍色 */
      line-height: 1.65 !important;
      font-weight: 600 !important;
    }

    .flow-step-content strong {
      color: #1E3A8A !important; /* 深藍色加粗，階層清晰 */
      font-weight: 800 !important;
    }

    /* 右邊的紫色框字改深藍色 */
    .about-card-tag.tag-purple, .tag-purple {
      background: #EDE9FE !important;
      border: 1.5px solid #8B5CF6 !important;
      color: #1E3A8A !important; /* 深藍色 */
      font-weight: 800 !important;
    }


    /* =========================================================================
       2026-10-18 關於視窗深色改淺藍、底部橫幅黃字改紅字、淺色字改深藍色字
       ========================================================================= */

    /* 1. 關於視窗所有深色卡片改為透亮淺藍色 (About Modal Cards to Light Blue) */
    .about-card {
      background: #F0F7FE !important;
      border: 1.5px solid #BFDBFE !important;
      border-radius: 14px !important;
      padding: 20px 22px !important;
      color: #0F172A !important;
      box-shadow: 0 4px 18px rgba(186, 230, 253, 0.35) !important;
    }

    .about-card-header {
      border-bottom: 1px solid #CCE1F5 !important;
    }

    .about-card-title {
      color: #0369A1 !important;
      font-weight: 800 !important;
    }

    .about-subcard {
      background: #FFFFFF !important;
      border: 1.5px solid #CCE1F5 !important;
      border-radius: 10px !important;
      color: #0F172A !important;
      box-shadow: 0 2px 8px rgba(186, 230, 253, 0.25) !important;
    }

    .about-subcard-title {
      color: #0369A1 !important;
      font-weight: 700 !important;
    }

    .about-subcard-desc {
      color: #334155 !important;
      line-height: 1.6 !important;
    }

    /* RAG流程卡片與下方文字深藍色優化 (依指示全面改為高對比深藍色) */
    .about-flow-step {
      background: #F0F9FF !important;
      border: 1.5px solid #BAE6FD !important;
      border-left: 4.5px solid #0284C7 !important;
      color: #0369A1 !important;
      border-radius: 0 8px 8px 0 !important;
      box-shadow: 0 2px 6px rgba(186, 230, 253, 0.25) !important;
    }

    .flow-step-num {
      color: #0284C7 !important;
      font-weight: 900 !important;
      font-size: 0.95rem !important;
      min-width: 32px !important;
    }

    .flow-step-content {
      font-size: 0.86rem !important;
      color: #0369A1 !important; /* RAG這行下面的字全面改深藍色 */
      line-height: 1.65 !important;
      font-weight: 600 !important;
    }

    .flow-step-content strong {
      color: #1E3A8A !important; /* 深藍色加粗，階層清晰 */
      font-weight: 800 !important;
    }

    /* 右邊的紫色框字改深藍色 */
    .about-card-tag.tag-purple, .tag-purple {
      background: #EDE9FE !important;
      border: 1.5px solid #8B5CF6 !important;
      color: #1E3A8A !important; /* 深藍色 */
      font-weight: 800 !important;
    }

    .about-brand-tag {
      background: #FEF3C7 !important;
      border: 1px solid #F59E0B !important;
      color: #DC2626 !important;
      font-weight: 800 !important;
    }

    /* 2. 最後一個框 (底部行動呼籲橫幅 .about-cta-banner) 字體色彩優化 */
    .about-cta-banner {
      background: linear-gradient(135deg, #EEF6FD 0%, #E0F2FE 100%) !important;
      border: 2px solid #93C5FD !important;
      border-radius: 14px !important;
      padding: 20px 24px !important;
      box-shadow: 0 8px 24px rgba(2, 132, 199, 0.16) !important;
    }

    /* 黃字改紅字 (Yellow text to Red text) */
    .about-cta-title {
      color: #DC2626 !important;
      font-size: 1.22rem !important;
      font-weight: 900 !important;
      letter-spacing: -0.2px !important;
    }

    /* 淺色字或白色字改深藍色字 (Light/White text to Dark Blue text) */
    .about-cta-desc {
      color: #0F172A !important;
      font-size: 0.90rem !important;
      font-weight: 600 !important;
      line-height: 1.5 !important;
    }

    .about-cta-desc strong {
      color: #0369A1 !important;
      font-weight: 800 !important;
    }

    /* 底部行動按鈕：黃底紅字與白底深藍字 */
    .btn-about-plan {
      background: linear-gradient(135deg, #FEF3C7, #FDE68A) !important;
      border: 1.5px solid #F59E0B !important;
      color: #DC2626 !important;
      font-weight: 800 !important;
      padding: 10px 22px !important;
      border-radius: 8px !important;
      box-shadow: 0 3px 10px rgba(245, 158, 11, 0.3) !important;
      transition: all 0.2s ease !important;
    }
    .btn-about-plan:hover {
      background: linear-gradient(135deg, #FDE68A, #FCD34D) !important;
      color: #B91C1C !important;
      transform: translateY(-1px) !important;
    }

    .btn-about-chat {
      background: #FFFFFF !important;
      border: 1.5px solid #0284C7 !important;
      color: #0284C7 !important;
      font-weight: 800 !important;
      padding: 10px 20px !important;
      border-radius: 8px !important;
      box-shadow: 0 3px 10px rgba(2, 132, 199, 0.15) !important;
      transition: all 0.2s ease !important;
    }
    .btn-about-chat:hover {
      background: #E0F2FE !important;
      color: #0369A1 !important;
      border-color: #0369A1 !important;
      transform: translateY(-1px) !important;
    }


    /* =========================================================================
       2026-10-18 使用者等級切換、管理員「後台」按鈕與管理員後台中心 (#adminConsoleModal) 樣式
       ========================================================================= */

    /* 1. 左上角使用者等級徽章與下拉切換選單 (防換行緊湊美觀排版) */
    .brand-header {
      padding: 12px 10px !important;
      gap: 4px !important;
    }

    .brand-title {
      display: flex !important;
      align-items: center !important;
      gap: 5px !important;
      white-space: nowrap !important;
      flex: 1 !important;
      min-width: 0 !important;
    }

    .brand-name {
      font-size: 0.88rem !important;
      font-weight: 800 !important;
      color: #0369A1 !important;
      letter-spacing: -0.2px !important;
      white-space: nowrap !important;
      flex-shrink: 0 !important;
    }

    .user-tier-wrap {
      position: relative !important;
      display: inline-flex !important;
      align-items: center !important;
      flex-shrink: 0 !important;
    }

    .user-tier-pill {
      display: inline-flex !important;
      align-items: center !important;
      gap: 3px !important;
      padding: 2px 6px !important;
      border-radius: 999px !important;
      font-size: 0.70rem !important;
      font-weight: 800 !important;
      cursor: pointer !important;
      border: 1px solid transparent !important;
      transition: all 0.2s ease !important;
      background: #EDE9FE !important;
      color: #6D28D9 !important;
      outline: none !important;
      white-space: nowrap !important;
      flex-shrink: 0 !important;
    }
    .user-tier-pill:hover {
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(2, 132, 199, 0.2);
    }
    .tier-pill-arrow {
      font-size: 0.65rem;
      opacity: 0.7;
      margin-left: 1px;
    }

    /* 各等級專屬徽章色彩 (淡藍大氛圍下的精緻點綴) */
    .user-tier-pill.tier-admin {
      background: #EDE9FE !important;
      color: #6D28D9 !important;
      border: 1.5px solid #C4B5FD !important;
    }
    .user-tier-pill.tier-diamond {
      background: #E0F2FE !important;
      color: #0284C7 !important;
      border: 1.5px solid #7DD3FC !important;
    }
    .user-tier-pill.tier-gold {
      background: #FEF3C7 !important;
      color: #B45309 !important;
      border: 1.5px solid #FCD34D !important;
    }
    .user-tier-pill.tier-silver {
      background: #ECFDF5 !important;
      color: #059669 !important;
      border: 1.5px solid #6EE7B7 !important;
    }
    .user-tier-pill.tier-bronze {
      background: #F1F5F9 !important;
      color: #475569 !important;
      border: 1.5px solid #CBD5E1 !important;
    }

    /* 切換等級下拉選單 */
    .tier-select-menu {
      display: none;
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      width: 210px;
      background: #FFFFFF !important;
      border: 1.5px solid #BFDBFE !important;
      border-radius: 12px !important;
      box-shadow: 0 10px 28px rgba(2, 132, 199, 0.22) !important;
      padding: 6px !important;
      z-index: 1000;
    }
    .tier-select-menu.show {
      display: block !important;
    }
    .tier-menu-title {
      font-size: 0.70rem;
      font-weight: 800;
      color: #64748B;
      padding: 6px 10px 4px;
      border-bottom: 1px solid #E2E8F0;
      margin-bottom: 4px;
    }
    .tier-menu-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 7px 10px;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    .tier-menu-item:hover {
      background: #F0F7FE !important;
    }
    .tier-menu-item.active {
      background: #E0F2FE !important;
      border: 1px solid #BAE6FD !important;
    }
    .tier-menu-item .t-icon {
      font-size: 1rem;
      width: 22px;
      text-align: center;
    }
    .tier-menu-item .t-info {
      flex: 1;
    }
    .tier-menu-item .t-name {
      font-size: 0.82rem;
      font-weight: 800;
      color: #0F172A;
    }
    .tier-menu-item .t-sub {
      font-size: 0.68rem;
      color: #64748B;
    }
    .tier-menu-item .t-check {
      color: #0284C7;
      font-weight: 900;
      font-size: 0.85rem;
      opacity: 0;
    }
    .tier-menu-item.active .t-check {
      opacity: 1;
    }

    /* 2. 管理員右側「後台」按鈕 */
    .btn-admin-console {
      display: inline-flex;
      align-items: center !important;
      gap: 3px !important;
      background: linear-gradient(135deg, #0284C7, #0369A1) !important;
      color: #FFFFFF !important;
      border: 1px solid #0284C7 !important;
      border-radius: 6px !important;
      padding: 2px 7px !important;
      font-size: 0.70rem !important;
      font-weight: 800 !important;
      cursor: pointer !important;
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.28) !important;
      transition: all 0.2s ease !important;
      outline: none !important;
      white-space: nowrap !important;
      flex-shrink: 0 !important;
    }
    .btn-admin-console:hover {
      background: linear-gradient(135deg, #0369A1, #075985) !important;
      transform: translateY(-1px) !important;
      box-shadow: 0 4px 10px rgba(2, 132, 199, 0.35) !important;
    }

    /* 3. 管理員後台中心視窗 (#adminConsoleModal) 結構樣式 */
    .modal-card-admin {
      width: 95%;
      max-width: 1220px;
      height: 88vh;
      max-height: 92vh;
      background: #F0F7FE !important;
      border: 2px solid #BFDBFE !important;
      border-radius: 18px !important;
      box-shadow: 0 16px 40px rgba(2, 132, 199, 0.22) !important;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .admin-modal-header {
      padding: 16px 24px;
      background: #FFFFFF !important;
      border-bottom: 2px solid #CCE1F5 !important;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      flex-shrink: 0;
    }

    .admin-header-left {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .admin-header-titles {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .admin-modal-title {
      font-size: 1.25rem;
      font-weight: 900;
      color: #0369A1;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .admin-title-icon {
      font-size: 1.3rem;
    }

    .admin-badge-role {
      font-size: 0.68rem;
      font-weight: 800;
      background: #EDE9FE;
      color: #6D28D9;
      border: 1px solid #C4B5FD;
      padding: 2px 7px;
      border-radius: 6px;
    }

    .admin-modal-subtitle {
      font-size: 0.82rem;
      color: #64748B;
      font-weight: 600;
    }

    .admin-header-right {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .admin-tabs-nav {
      display: flex;
      background: #F0F7FE;
      padding: 4px;
      border-radius: 10px;
      border: 1.5px solid #BFDBFE;
      gap: 4px;
    }

    .admin-tab-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 7px 16px;
      border-radius: 7px;
      border: none;
      background: transparent;
      color: #475569;
      font-size: 0.86rem;
      font-weight: 800;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .admin-tab-btn:hover {
      color: #0284C7;
      background: rgba(255, 255, 255, 0.6);
    }
    .admin-tab-btn.active {
      background: #FFFFFF !important;
      color: #0284C7 !important;
      box-shadow: 0 2px 8px rgba(2, 132, 199, 0.16) !important;
    }

    .admin-tab-count {
      background: #E0F2FE;
      color: #0369A1;
      padding: 1px 7px;
      border-radius: 999px;
      font-size: 0.72rem;
      font-weight: 900;
    }

    .admin-modal-body {
      flex: 1;
      overflow-y: auto;
      padding: 20px 24px;
      display: flex;
      flex-direction: column;
      gap: 20px;
      background: #F0F7FE;
    }

    /* 4. KPI 統計卡片列 */
    .admin-kpi-row {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 12px;
    }

    .admin-kpi-card {
      background: #FFFFFF !important;
      border: 1.5px solid #CCE1F5 !important;
      border-radius: 12px !important;
      padding: 12px 14px !important;
      box-shadow: 0 2px 8px rgba(186, 230, 253, 0.28) !important;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .kpi-top {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .kpi-icon {
      font-size: 1.05rem;
    }
    .kpi-label {
      font-size: 0.76rem;
      font-weight: 700;
      color: #64748B;
    }
    .kpi-val {
      font-size: 1.45rem;
      font-weight: 900;
      color: #0284C7;
      letter-spacing: -0.5px;
    }
    .kpi-sub {
      font-size: 0.68rem;
      color: #94A3B8;
    }

    /* 5. 搜尋、篩選與工具列 */
    .admin-toolbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      background: #FFFFFF;
      padding: 12px 16px;
      border-radius: 12px;
      border: 1.5px solid #CCE1F5;
      box-shadow: 0 2px 8px rgba(186, 230, 253, 0.25);
    }

    .admin-toolbar-left {
      display: flex;
      align-items: center;
      gap: 10px;
      flex: 1;
    }

    .admin-search-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
      background: #F8FAFC;
      border: 1.5px solid #BFDBFE;
      border-radius: 8px;
      padding: 6px 12px;
      flex: 1;
      max-width: 340px;
    }

    .admin-search-input {
      border: none;
      outline: none;
      background: transparent;
      font-size: 0.86rem;
      color: #0F172A;
      width: 100%;
    }

    .admin-filter-select {
      background: #F8FAFC;
      border: 1.5px solid #BFDBFE;
      border-radius: 8px;
      padding: 6px 10px;
      font-size: 0.84rem;
      font-weight: 700;
      color: #0F172A;
      outline: none;
      cursor: pointer;
    }

    .btn-admin-add {
      background: linear-gradient(135deg, #0284C7, #0369A1) !important;
      color: #FFFFFF !important;
      border: 1.5px solid #0284C7 !important;
      border-radius: 8px !important;
      padding: 7px 16px !important;
      font-size: 0.84rem !important;
      font-weight: 800 !important;
      cursor: pointer !important;
      display: flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25) !important;
      transition: all 0.2s ease !important;
    }
    .btn-admin-add:hover {
      background: #0369A1 !important;
      transform: translateY(-1px);
    }

    .btn-refresh-feedbacks {
      background: #FFFFFF !important;
      color: #0284C7 !important;
      border: 1.5px solid #0284C7 !important;
      border-radius: 8px !important;
      padding: 7px 14px !important;
      font-size: 0.82rem !important;
      font-weight: 800 !important;
      cursor: pointer !important;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.2s ease !important;
    }
    .btn-refresh-feedbacks:hover {
      background: #E0F2FE !important;
    }

    /* 6. 新增會員表單卡片 */
    .admin-add-form-card {
      background: #FFFFFF;
      border: 1.5px solid #93C5FD;
      border-radius: 12px;
      padding: 16px 20px;
      box-shadow: 0 4px 14px rgba(2, 132, 199, 0.15);
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .admin-form-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #E2E8F0;
      padding-bottom: 8px;
    }
    .form-title {
      font-size: 0.95rem;
      font-weight: 800;
      color: #0369A1;
    }
    .admin-form-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
    }
    .form-field {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .form-field label {
      font-size: 0.74rem;
      font-weight: 700;
      color: #64748B;
    }
    .form-input, .form-select {
      background: #F8FAFC;
      border: 1.5px solid #BFDBFE;
      border-radius: 7px;
      padding: 7px 10px;
      font-size: 0.85rem;
      color: #0F172A;
      outline: none;
    }
    .form-input:focus, .form-select:focus {
      border-color: #0284C7;
      background: #FFFFFF;
    }
    .admin-form-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
    }
    .btn-form-cancel {
      background: #F1F5F9;
      border: 1px solid #CBD5E1;
      color: #475569;
      padding: 6px 14px;
      border-radius: 7px;
      font-size: 0.82rem;
      font-weight: 700;
      cursor: pointer;
    }
    .btn-form-save {
      background: #0284C7;
      border: 1px solid #0284C7;
      color: #FFFFFF;
      padding: 6px 16px;
      border-radius: 7px;
      font-size: 0.82rem;
      font-weight: 800;
      cursor: pointer;
    }

    /* 7. 會員資料列表表格 (Admin Data Table) */
    .admin-table-container {
      background: #FFFFFF;
      border: 1.5px solid #CCE1F5;
      border-radius: 12px;
      box-shadow: 0 4px 14px rgba(186, 230, 253, 0.25);
      overflow-x: auto;
    }

    .admin-data-table {
      width: 100%;
      border-collapse: collapse;
      text-align: left;
    }

    .admin-data-table th {
      background: #E0F2FE !important;
      color: #0369A1 !important;
      font-size: 0.80rem !important;
      font-weight: 800 !important;
      padding: 12px 14px !important;
      border-bottom: 2px solid #BAE6FD !important;
      white-space: nowrap;
    }

    .admin-data-table td {
      padding: 12px 14px !important;
      font-size: 0.84rem !important;
      color: #0F172A !important;
      border-bottom: 1px solid #E2E8F0 !important;
      vertical-align: middle;
    }

    .admin-data-table tr:hover td {
      background: #F0F7FE !important;
    }

    .member-uid {
      font-family: monospace;
      font-weight: 700;
      color: #64748B;
      font-size: 0.78rem;
    }
    .member-name {
      font-weight: 800;
      color: #0F172A;
    }
    .member-email {
      color: #475569;
      font-size: 0.82rem;
    }
    .member-role {
      color: #64748B;
      font-size: 0.78rem;
    }

    /* 表格內等級選擇器 */
    .table-tier-select {
      border: 1.5px solid #BFDBFE;
      border-radius: 7px;
      padding: 4px 8px;
      font-size: 0.76rem;
      font-weight: 800;
      cursor: pointer;
      outline: none;
      background: #FFFFFF;
    }
    .table-tier-select.tier-admin { background: #EDE9FE; color: #6D28D9; border-color: #C4B5FD; }
    .table-tier-select.tier-diamond { background: #E0F2FE; color: #0284C7; border-color: #7DD3FC; }
    .table-tier-select.tier-gold { background: #FEF3C7; color: #B45309; border-color: #FCD34D; }
    .table-tier-select.tier-silver { background: #ECFDF5; color: #059669; border-color: #6EE7B7; }
    .table-tier-select.tier-bronze { background: #F1F5F9; color: #475569; border-color: #CBD5E1; }

    .status-badge {
      display: inline-block;
      padding: 2px 7px;
      border-radius: 999px;
      font-size: 0.70rem;
      font-weight: 800;
    }
    .status-badge.active {
      background: #DCFCE7;
      color: #15803D;
      border: 1px solid #86EFAC;
    }
    .status-badge.disabled {
      background: #FEE2E2;
      color: #B91C1C;
      border: 1px solid #FCA5A5;
    }

    .table-actions {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    .btn-action-sm {
      background: #FFFFFF;
      border: 1px solid #CCE1F5;
      color: #0284C7;
      padding: 3px 8px;
      border-radius: 6px;
      font-size: 0.72rem;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    .btn-action-sm:hover {
      background: #E0F2FE;
      border-color: #0284C7;
    }
    .btn-action-sm.danger {
      color: #DC2626;
      border-color: #FECACA;
    }
    .btn-action-sm.danger:hover {
      background: #FEE2E2;
      border-color: #DC2626;
    }

    /* 8. 留言板管理員審核卡片樣式 */
    .admin-feedback-cards-container {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .admin-fb-card {
      background: #FFFFFF;
      border: 1.5px solid #CCE1F5;
      border-radius: 14px;
      padding: 16px 20px;
      box-shadow: 0 2px 8px rgba(186, 230, 253, 0.25);
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .fb-card-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #F1F5F9;
      padding-bottom: 8px;
    }

    .fb-author-info {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .fb-author-name {
      font-weight: 800;
      color: #0F172A;
      font-size: 0.90rem;
    }
    .fb-author-role {
      font-size: 0.72rem;
      background: #E0F2FE;
      color: #0369A1;
      padding: 2px 7px;
      border-radius: 6px;
      font-weight: 700;
    }
    .fb-category-tag {
      font-size: 0.72rem;
      background: #FEF3C7;
      color: #B45309;
      border: 1px solid #FCD34D;
      padding: 2px 8px;
      border-radius: 6px;
      font-weight: 800;
    }
    .fb-date {
      font-size: 0.98rem !important;
      font-weight: 800 !important;
      color: #000000 !important;
      letter-spacing: 0.3px;
    }

    .fb-title {
      font-size: 0.96rem;
      font-weight: 800;
      color: #0369A1;
    }
    .fb-content {
      font-size: 0.88rem;
      color: #334155;
      line-height: 1.6;
    }

    .fb-reply-box {
      background: #F0F7FE;
      border: 1.5px solid #BFDBFE;
      border-left: 4px solid #0284C7;
      border-radius: 0 8px 8px 0;
      padding: 12px 14px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .fb-reply-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.76rem;
      font-weight: 800;
      color: #0284C7;
    }

    .fb-reply-input {
      width: 100%;
      min-height: 60px;
      background: #FFFFFF;
      border: 1px solid #CCE1F5;
      border-radius: 6px;
      padding: 8px 10px;
      font-size: 0.84rem;
      color: #0F172A;
      outline: none;
      resize: vertical;
    }
    .fb-reply-input:focus {
      border-color: #0284C7;
    }

    .fb-card-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-top: 1px solid #F1F5F9;
      padding-top: 8px;
    }

    .fb-likes-count {
      font-size: 0.76rem;
      color: #64748B;
      font-weight: 700;
    }

    .fb-admin-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .btn-fb-reply-save {
      background: #0284C7;
      border: 1px solid #0284C7;
      color: #FFFFFF;
      font-size: 0.76rem;
      font-weight: 800;
      padding: 5px 12px;
      border-radius: 6px;
      cursor: pointer;
    }
    .btn-fb-reply-save:hover {
      background: #0369A1;
    }
    .btn-fb-delete {
      background: #FFFFFF;
      border: 1px solid #FECACA;
      color: #DC2626;
      font-size: 0.76rem;
      font-weight: 800;
      padding: 5px 10px;
      border-radius: 6px;
      cursor: pointer;
    }
    .btn-fb-delete:hover {
      background: #FEE2E2;
    }


    /* =========================================================================
       2026-10-18 深藍色高對比強化：右側欄指定項目與全頁面不清楚文字全面清晰化
       (Deep Blue High-Contrast Theme & Clarity Fixes Across All Pages)
       ========================================================================= */

    /* 1. 【會員登入】與會員中心標題 */
    #authBoxHeading,
    .auth-card-title,
    .auth-tab,
    #inspectorMainTitle {
      color: #0369A1 !important; /* 深藍色 */
      font-weight: 800 !important;
    }
    .auth-tab.active {
      color: #0284C7 !important;
      border-bottom: 2.5px solid #0284C7 !important;
      font-weight: 800 !important;
    }
    .auth-hint {
      color: #334155 !important;
      font-weight: 500 !important;
    }
    .auth-pricing-link {
      color: #0369A1 !important;
      font-weight: 700 !important;
      text-decoration: underline !important;
    }

    /* 2. 【已登入】與會員身分徽章：依指示左右寬度變大，絕不折行 */
    .auth-status-badge,
    #authStatusBadge,
    .auth-status-badge.logged-in,
    .auth-status-badge.active {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      white-space: nowrap !important;
      flex-shrink: 0 !important;
      padding: 4px 16px !important; /* 依指示：左右寬度變大 */
      min-width: 68px !important;    /* 左右寬度大方開展 */
      text-align: center !important;
      background: #E0F2FE !important;
      border: 1.5px solid #7DD3FC !important;
      border-radius: 999px !important;
      color: #0369A1 !important; /* 深藍色 */
      font-weight: 800 !important;
      font-size: 0.76rem !important;
      box-shadow: 0 1px 4px rgba(2, 132, 199, 0.15) !important;
      letter-spacing: 0.5px !important;
    }
    .logged-name {
      color: #0F172A !important;
      font-weight: 800 !important;
    }
    .logged-email {
      color: #1E3A8A !important; /* 深藍色 */
      font-weight: 600 !important;
    }
    .tier-pill.gold,
    #loggedTierBadge {
      background: #FEF3C7 !important;
      border: 1.5px solid #F59E0B !important;
      color: #B45309 !important; /* 高對比琥珀深金 */
      font-weight: 800 !important;
    }
    .btn-logged-sub {
      background: #FFFFFF !important;
      border: 1.2px solid #BAE6FD !important;
      color: #0369A1 !important; /* 深藍色 */
      font-weight: 700 !important;
    }
    .btn-logged-sub:hover {
      background: #F0F7FE !important;
      border-color: #0284C7 !important;
      color: #0284C7 !important;
    }
    .btn-logged-sub.danger {
      color: #DC2626 !important;
      border-color: #FECACA !important;
    }
    .btn-logged-sub.danger:hover {
      background: #FEF2F2 !important;
      color: #B91C1C !important;
      border-color: #EF4444 !important;
    }

    /* 3. 【52部法典即時庫】標籤 */
    .badge-blue,
    #sideLawBadge {
      background: #E0F2FE !important;
      border: 1.5px solid #7DD3FC !important;
      color: #0369A1 !important; /* 深藍色 */
      font-weight: 800 !important;
      font-size: 0.72rem !important;
      box-shadow: 0 1px 4px rgba(2, 132, 199, 0.15) !important;
    }

    /* 4. 【速查】標籤與熱門條文按鈕 */
    .quick-chip-label {
      color: #0369A1 !important; /* 深藍色 */
      font-weight: 800 !important;
      font-size: 0.76rem !important;
    }
    .quick-chip {
      background: #F0F7FE !important;
      border: 1.2px solid #BAE6FD !important;
      color: #0369A1 !important; /* 深藍色 */
      font-weight: 700 !important;
      font-size: 0.74rem !important;
    }
    .quick-chip:hover {
      background: #0284C7 !important;
      border-color: #0284C7 !important;
      color: #FFFFFF !important;
    }

    /* 5. 【有效運行】（● 有效施行標籤） */
    .status-tag-active,
    #sideResultStatusBadge {
      background: #E0F2FE !important;
      border: 1.5px solid #7DD3FC !important;
      color: #0369A1 !important; /* 深藍色 */
      font-weight: 800 !important;
      font-size: 0.72rem !important;
      box-shadow: 0 1px 4px rgba(2, 132, 199, 0.15) !important;
    }

    /* 6. 【全國法規資料庫官方頁面】按鈕 */
    .btn-result-action.primary,
    #sideMojLink,
    .btn-official-page,
    #btnOfficialPage {
      background: #E0F2FE !important;
      border: 1.8px solid #7DD3FC !important;
      color: #0369A1 !important; /* 深藍色 */
      font-weight: 800 !important;
      font-size: 0.78rem !important;
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.15) !important;
      transition: all 0.2s ease !important;
    }
    .btn-result-action.primary:hover,
    #sideMojLink:hover,
    .btn-official-page:hover,
    #btnOfficialPage:hover {
      background: #0284C7 !important;
      border-color: #0284C7 !important;
      color: #FFFFFF !important;
    }

    /* 7. 【帶入對話深度含攝】按鈕 */
    .btn-result-action.secondary,
    #sideLawSearchResultBox button.btn-result-action {
      background: #E0F2FE !important;
      border: 1.8px solid #7DD3FC !important;
      color: #0369A1 !important; /* 深藍色 */
      font-weight: 800 !important;
      font-size: 0.78rem !important;
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.15) !important;
      transition: all 0.2s ease !important;
    }
    .btn-result-action.secondary:hover,
    #sideLawSearchResultBox button.btn-result-action:hover {
      background: #0284C7 !important;
      border-color: #0284C7 !important;
      color: #FFFFFF !important;
    }

    /* 8. 右側法條卡片內部所有文字深藍清晰化 */
    #sideLawSearchResultBox .result-law-meta,
    #sideResultMeta {
      color: #1E3A8A !important; /* 深藍色 */
      font-weight: 600 !important;
      font-size: 0.75rem !important;
    }
    #sideLawSearchResultBox .result-section-label,
    .result-section-label {
      color: #0369A1 !important; /* 深藍色 */
      font-weight: 800 !important;
      font-size: 0.78rem !important;
    }
    .result-plain-box {
      background: #F5EFEB !important;
      border: 1.5px solid #E4D7C2 !important;
    }
    .plain-box-badge {
      color: #0369A1 !important; /* 深藍色 */
      font-weight: 800 !important;
      font-size: 0.76rem !important;
    }
    .plain-box-text {
      color: #0F172A !important;
      font-weight: 600 !important;
      line-height: 1.6 !important;
    }
    .side-section-item {
      background: #FFFDF9 !important;
      border: 1.2px solid #E8DFD0 !important;
      border-left: 3.5px solid #0284C7 !important;
      border-radius: 6px !important;
    }
    .side-section-item.full-width {
      border-left-color: #D97706 !important;
    }
    .side-item-tag {
      color: #0369A1 !important; /* 深藍色 */
      font-weight: 800 !important;
      font-size: 0.74rem !important;
    }
    .side-item-val {
      color: #0F172A !important; /* 深藍墨黑 */
      font-weight: 600 !important;
      font-size: 0.80rem !important;
    }
    .side-meta-notes {
      background: #F5EFEB !important;
      border: 1.2px solid #E4D7C2 !important;
      color: #334155 !important;
      font-weight: 500 !important;
    }

    /* 9. 全頁面清晰度通盤優化 (All Pages Clarity Optimization) */
    /* 9-1. 側邊欄分類標題與標籤 */
    .nav-group-title {
      color: #0369A1 !important; /* 深藍色 */
      font-weight: 800 !important;
      font-size: 0.72rem !important;
      letter-spacing: 0.5px !important;
    }
    .sidebar-btn.sidebar-btn-about {
      background: #F0F7FE !important;
      border: 1.5px solid #BFDBFE !important;
    }
    .sidebar-btn.sidebar-btn-about .sidebar-btn-title {
      color: #B45309 !important; /* 琥珀深棕金 */
      font-weight: 800 !important;
    }
    .sidebar-btn.sidebar-btn-about .sidebar-btn-desc {
      color: #334155 !important;
      font-weight: 500 !important;
    }
    .nav-item-badge.tag-amber,
    .sidebar-btn-tag.gold {
      background: #FEF3C7 !important;
      color: #B45309 !important;
      border: 1px solid #FCD34D !important;
      font-weight: 800 !important;
    }
    .nav-item-badge.tag-cyan {
      background: #E0F2FE !important;
      color: #0369A1 !important;
      border: 1px solid #BAE6FD !important;
      font-weight: 800 !important;
    }
    .nav-item-badge.tag-rose {
      background: #FFE4E6 !important;
      color: #BE123C !important;
      border: 1px solid #FECDD3 !important;
      font-weight: 800 !important;
    }
    .nav-item-badge.tag-emerald {
      background: #D1FAE5 !important;
      color: #047857 !important;
      border: 1px solid #A7F3D0 !important;
      font-weight: 800 !important;
    }
    .nav-item-badge.tag-indigo {
      background: #EDE9FE !important;
      color: #6D28D9 !important;
      border: 1px solid #C4B5FD !important;
      font-weight: 800 !important;
    }

    /* 9-2. 主畫面中央介紹副標與預設情境卡 */
    .hero-subtitle {
      color: #334155 !important;
      font-weight: 600 !important;
    }
    .preset-card-desc {
      color: #334155 !important;
      font-weight: 500 !important;
    }
    .preset-hint-title {
      color: #0369A1 !important;
      font-weight: 700 !important;
    }

    /* 9-3. 試題審查徽章與說明文字清晰化 */
    .exam-badge-approved {
      background: #E0F2FE !important;
      color: #0369A1 !important; /* 深藍色 */
      border: 1.5px solid #7DD3FC !important;
      font-weight: 800 !important;
    }
    #examReviewBadge {
      color: #B45309 !important;
      font-weight: 700 !important;
    }
    #lawsCountDisplay {
      color: #0369A1 !important;
      font-weight: 700 !important;
    }


    /* 下拉選單淡藍色加框線風格 (依使用者指示全面升級) */
    .exam-dropdown-styled {
      padding: 7px 14px;
      border-radius: 8px;
      background: #E0F2FE;
      border: 1.5px solid #0284C7;
      color: #0369A1;
      font-weight: 800;
      font-size: 0.88rem;
      cursor: pointer;
      outline: none;
      transition: all 0.2s ease;
    }
    .exam-dropdown-styled:hover, .exam-dropdown-styled:focus {
      background: #BAE6FD;
      border-color: #0369A1;
      box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.2);
    }
    .exam-dropdown-styled option {
      background: #FFFFFF;
      color: #0F172A;
      font-weight: 600;
    }


    /* =========================================================================
       2026-10-18 法律書狀研編工作台 (#legalDocumentModal) 樣式
       涵蓋律師、法官、檢察官、書記官書狀 · 左框滾輪滑動清單 · 右框格式填寫 · 下方產生PDF檔
       ========================================================================= */
    .modal-card-legaldoc {
      background: #F8FBFE !important;
      border: 1.5px solid #BFDBFE !important;
      border-radius: var(--radius-lg);
      width: 1360px;
      max-width: 96vw;
      height: 92vh;
      max-height: 94vh;
      box-shadow: 0 24px 60px rgba(2, 132, 199, 0.22) !important;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      animation: modalFadeIn 0.2s ease-out;
    }

    .legaldoc-header {
      padding: 12px 20px;
      background: linear-gradient(180deg, #E8F3FD 0%, #F4F9FE 100%);
      border-bottom: 1.5px solid #CCE1F5;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      flex-shrink: 0;
      flex-wrap: wrap;
    }

    .legaldoc-header-info {
      display: flex;
      flex-direction: column;
      gap: 2px;
      flex: 1;
      min-width: 260px;
    }

    .legaldoc-header-title {
      font-size: 1.12rem;
      font-weight: 800;
      color: #0369A1;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .legaldoc-header-desc {
      font-size: 0.82rem;
      color: #475569;
    }

    .legaldoc-filter-chips {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .legaldoc-chip {
      padding: 5px 12px;
      background: #FFFFFF;
      border: 1.5px solid #BAE6FD;
      color: #0369A1;
      font-size: 0.82rem;
      font-weight: 700;
      border-radius: 20px;
      cursor: pointer;
      transition: all 0.2s ease;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .legaldoc-chip:hover {
      background: #E0F2FE;
      border-color: #0284C7;
    }

    .legaldoc-chip.active {
      background: #0284C7;
      border-color: #0284C7;
      color: #FFFFFF;
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3);
    }

    /* 主體雙欄排版 (左框書狀名稱列表 + 右框格式填寫) */
    .legaldoc-body {
      display: flex;
      flex: 1;
      height: calc(100% - 65px);
      min-height: 0;
      background: #F0F9FF;
      overflow: hidden;
    }

    /* 左邊框框：書狀名稱在左邊框框，框框要有滑鼠滾輪可以上下移動 */
    .legaldoc-sidebar {
      width: 350px;
      min-width: 320px;
      max-width: 380px;
      height: 100%;
      min-height: 0;
      background: #F0F9FF;
      border-right: 1.5px solid #BFDBFE;
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      overflow: hidden;
    }

    .legaldoc-sidebar-header {
      padding: 12px 14px;
      border-bottom: 1px solid #BAE6FD;
      background: #E0F2FE;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .legaldoc-sidebar-title {
      font-size: 0.88rem;
      font-weight: 800;
      color: #0369A1;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .legaldoc-sidebar-tip {
      font-size: 0.75rem;
      color: #0284C7;
      font-weight: 600;
      background: #FFFFFF;
      padding: 2px 6px;
      border-radius: 10px;
      border: 1px solid #BAE6FD;
    }

    .legaldoc-search-wrap {
      padding: 10px 12px;
      background: #F0F9FF;
      border-bottom: 1px solid #BAE6FD;
    }

    .legaldoc-search-input {
      width: 100%;
      box-sizing: border-box;
      padding: 8px 12px;
      font-size: 0.82rem;
      background: #FFFFFF;
      border: 1.5px solid #BAE6FD;
      border-radius: 6px;
      color: #0F172A;
      outline: none;
    }

    .legaldoc-search-input:focus {
      border-color: #0284C7;
      box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
    }

    /* 左側清單容器：滑鼠滾輪上下滾動 */
    .legaldoc-list-container {
      flex: 1;
      min-height: 0;
      overflow-y: auto !important;
      padding: 10px;
      display: block;
    }

    .legaldoc-list-container::-webkit-scrollbar {
      width: 7px;
    }
    .legaldoc-list-container::-webkit-scrollbar-track {
      background: #E0F2FE;
    }
    .legaldoc-list-container::-webkit-scrollbar-thumb {
      background: #93C5FD;
      border-radius: 4px;
    }
    .legaldoc-list-container::-webkit-scrollbar-thumb:hover {
      background: #0284C7;
    }


    /* 階層式書狀群組樣式 (Hierarchical Category Tree) */
    .legaldoc-tree-group {
      background: #FFFFFF;
      border: 1.5px solid #BAE6FD;
      border-radius: 8px;
      overflow: hidden;
      margin-bottom: 8px;
      flex-shrink: 0;
      transition: all 0.2s ease;
      box-shadow: 0 1px 3px rgba(2, 132, 199, 0.05);
    }
    .legaldoc-tree-group.expanded {
      border-color: #0284C7;
      box-shadow: 0 2px 8px rgba(2, 132, 199, 0.12);
    }
    .legaldoc-tree-header {
      padding: 10px 12px;
      background: #F0F9FF;
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      user-select: none;
      transition: background 0.15s ease;
    }
    .legaldoc-tree-header:hover {
      background: #E0F2FE;
    }
    .legaldoc-tree-header-left {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.86rem;
      font-weight: 800;
      color: #0369A1;
    }
    .legaldoc-tree-arrow {
      font-size: 0.72rem;
      color: #0284C7;
      transition: transform 0.2s ease;
      display: inline-block;
    }
    .legaldoc-tree-group.expanded .legaldoc-tree-arrow {
      transform: rotate(90deg);
    }
    .legaldoc-tree-badge {
      font-size: 0.70rem;
      font-weight: 700;
      background: #E0F2FE;
      color: #0284C7;
      border: 1px solid #BAE6FD;
      padding: 1px 7px;
      border-radius: 12px;
    }
    .legaldoc-tree-children {
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding: 6px 8px 8px 8px;
      background: #F8FBFE;
      border-top: 1px solid #E0F2FE;
    }
    .legaldoc-tree-subitem {
      padding: 8px 10px;
      border-radius: 6px;
      font-size: 0.83rem;
      color: #1E293B;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.15s ease;
      background: #FFFFFF;
      border: 1px solid #E2E8F0;
    }
    .legaldoc-tree-subitem:hover {
      background: #E0F2FE;
      border-color: #7DD3FC;
      color: #0369A1;
      transform: translateX(2px);
    }
    .legaldoc-tree-subitem.active {
      background: linear-gradient(135deg, #0284C7, #0369A1) !important;
      color: #FFFFFF !important;
      font-weight: 800 !important;
      border-color: #0284C7 !important;
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25) !important;
    }
    .legaldoc-tree-subitem-icon {
      font-size: 0.75rem;
      opacity: 0.8;
      flex-shrink: 0;
    }
    .legaldoc-tree-subitem-text {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .legaldoc-official-btn {
      padding: 4px 10px;
      font-size: 0.75rem;
      font-weight: 700;
      border-radius: 6px;
      background: #ECFDF5;
      color: #047857;
      border: 1px solid #A7F3D0;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: all 0.15s ease;
    }
    .legaldoc-official-btn:hover {
      background: #D1FAE5;
      color: #065F46;
    }

    .legaldoc-item-card {
      background: #FFFFFF;
      border: 1.5px solid #BAE6FD;
      border-radius: 8px;
      padding: 10px 12px;
      cursor: pointer;
      transition: all 0.18s ease;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .legaldoc-item-card:hover {
      border-color: #0284C7;
      background: #F8FBFE;
      transform: translateX(2px);
    }

    .legaldoc-item-card.active {
      background: #EFF6FF !important;
      border: 2px solid #0284C7 !important;
      box-shadow: 0 4px 12px rgba(2, 132, 199, 0.18) !important;
    }

    .legaldoc-item-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
    }

    .legaldoc-role-tag {
      font-size: 0.72rem;
      font-weight: 800;
      padding: 2px 7px;
      border-radius: 10px;
      white-space: nowrap;
    }
    .legaldoc-role-tag.律師 { background: #DBEAFE; color: #1E40AF; border: 1px solid #BFDBFE; }
    .legaldoc-role-tag.法官 { background: #FEF3C7; color: #92400E; border: 1px solid #FDE68A; }
    .legaldoc-role-tag.檢察官 { background: #DCFCE7; color: #166534; border: 1px solid #BBF7D0; }
    .legaldoc-role-tag.書記官 { background: #F3E8FF; color: #6B21A8; border: 1px solid #E9D5FF; }
    .legaldoc-role-tag.集中審理 { background: #E0F2FE; color: #0284C7; border: 1px solid #BAE6FD; }

    /* 集中審理專用按鍵與選單樣式 */
    .legaldoc-concentrated-section {
      background: #FFFFFF;
      border: 1.5px solid #BAE6FD;
      border-radius: 8px;
      overflow: hidden;
      margin-bottom: 12px;
      box-shadow: 0 1px 4px rgba(2, 132, 199, 0.05);
      flex-shrink: 0;
    }
    .legaldoc-concentrated-header {
      padding: 10px 12px;
      background: #E0F2FE;
      font-size: 0.86rem;
      font-weight: 800;
      color: #0369A1;
      display: flex;
      align-items: center;
      gap: 6px;
      border-bottom: 1px solid #BAE6FD;
    }
    .legaldoc-concentrated-group {
      padding: 6px 8px;
      display: flex;
      flex-direction: column;
      gap: 5px;
      background: #F8FBFE;
    }
    .legaldoc-concentrated-item {
      padding: 9px 12px;
      border-radius: 6px;
      font-size: 0.84rem;
      font-weight: 700;
      color: #1E293B;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      background: #FFFFFF;
      border: 1px solid #E2E8F0;
      transition: all 0.15s ease;
      user-select: none;
    }
    .legaldoc-concentrated-item:hover {
      background: #E0F2FE;
      border-color: #7DD3FC;
      color: #0369A1;
      transform: translateX(2px);
    }
    .legaldoc-concentrated-item.active {
      background: linear-gradient(135deg, #0284C7, #0369A1) !important;
      color: #FFFFFF !important;
      font-weight: 800 !important;
      border-color: #0284C7 !important;
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25) !important;
    }
    .legaldoc-concentrated-item .item-icon {
      font-size: 0.85rem;
      flex-shrink: 0;
    }
    .legaldoc-concentrated-item .item-text {
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .legaldoc-concentrated-item .item-badge {
      font-size: 0.68rem;
      padding: 1px 6px;
      border-radius: 4px;
      background: #E0F2FE;
      color: #0284C7;
      border: 1px solid #BAE6FD;
      font-weight: 700;
      flex-shrink: 0;
    }
    .legaldoc-concentrated-item.active .item-badge {
      background: rgba(255, 255, 255, 0.25);
      color: #FFFFFF;
      border-color: rgba(255, 255, 255, 0.4);
    }

    /* 集中審理制度解析視圖樣式 */
    .legaldoc-info-area {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      padding: 24px 28px;
      background: #F8FBFE;
    }
    .legaldoc-info-card {
      background: #FFFFFF;
      border: 1.5px solid #BAE6FD;
      border-radius: 10px;
      padding: 22px 26px;
      margin-bottom: 20px;
      box-shadow: 0 2px 10px rgba(2, 132, 199, 0.06);
    }
    .legaldoc-info-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 2px solid #E0F2FE;
      padding-bottom: 12px;
      margin-bottom: 16px;
    }
    .legaldoc-info-title {
      font-size: 1.15rem;
      font-weight: 800;
      color: #0369A1;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .legaldoc-info-badge {
      font-size: 0.75rem;
      font-weight: 700;
      background: #E0F2FE;
      color: #0284C7;
      padding: 3px 9px;
      border-radius: 12px;
      border: 1px solid #BAE6FD;
    }
    .legaldoc-info-text {
      font-size: 0.95rem;
      color: #1E293B;
      line-height: 1.85;
      text-align: justify;
      margin-bottom: 16px;
    }
    .legaldoc-info-quote {
      background: #F0F9FF;
      border-left: 4px solid #0284C7;
      padding: 16px 20px;
      border-radius: 0 8px 8px 0;
      font-size: 0.96rem;
      line-height: 1.9;
      color: #0C4A6E;
      margin: 18px 0;
      box-shadow: 0 1px 4px rgba(2, 132, 199, 0.05);
    }
    .legaldoc-info-quote-src {
      display: block;
      margin-top: 12px;
      font-size: 0.82rem;
      color: #64748B;
      font-weight: 600;
      text-align: right;
    }
    .legaldoc-flowchart-container {
      background: #FFFFFF;
      border: 1.5px solid #BFDBFE;
      border-radius: 10px;
      padding: 20px 16px;
      margin: 18px 0;
      box-shadow: 0 2px 8px rgba(2, 132, 199, 0.06);
      overflow-x: auto;
      text-align: center;
    }
    .legaldoc-flowchart-svg {
      max-width: 100%;
      height: auto;
      display: inline-block;
    }
    .legaldoc-grid-cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 14px;
      margin: 16px 0;
    }
    .legaldoc-feature-card {
      background: #F0F9FF;
      border: 1px solid #BAE6FD;
      border-radius: 8px;
      padding: 14px 16px;
      transition: all 0.2s ease;
    }
    .legaldoc-feature-card:hover {
      border-color: #0284C7;
      box-shadow: 0 4px 12px rgba(2, 132, 199, 0.12);
      transform: translateY(-2px);
    }
    .legaldoc-feature-title {
      font-size: 0.92rem;
      font-weight: 800;
      color: #0369A1;
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 6px;
    }
    .legaldoc-feature-desc {
      font-size: 0.84rem;
      color: #334155;
      line-height: 1.6;
    }

    .legaldoc-item-cat {
      font-size: 0.72rem;
      color: #64748B;
      font-weight: 600;
    }

    .legaldoc-item-title {
      font-size: 0.88rem;
      font-weight: 800;
      color: #0F172A;
      line-height: 1.35;
    }
    .legaldoc-item-card.active .legaldoc-item-title {
      color: #0284C7;
    }

    .legaldoc-item-desc {
      font-size: 0.74rem;
      color: #64748B;
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    /* 右邊框框：選中的書狀格式可以填寫 */
    .legaldoc-main {
      flex: 1;
      display: flex;
      flex-direction: column;
      background: #F8FBFE;
      min-width: 0;
      overflow: hidden;
    }

    .legaldoc-main-toolbar {
      padding: 10px 18px;
      background: #FFFFFF;
      border-bottom: 1.5px solid #CCE1F5;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      flex-shrink: 0;
    }

    .legaldoc-current-title {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .legaldoc-current-title .title-text {
      font-size: 1.02rem;
      font-weight: 800;
      color: #0369A1;
    }

    .legaldoc-current-title .official-tag {
      font-size: 0.75rem;
      background: #F0F9FF;
      color: #0284C7;
      padding: 3px 8px;
      border-radius: 4px;
      border: 1px solid #BAE6FD;
      font-weight: 600;
    }

    .legaldoc-toolbar-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .legaldoc-btn-tool {
      padding: 5px 12px;
      font-size: 0.80rem;
      font-weight: 700;
      color: #0369A1;
      background: #F0F9FF;
      border: 1.5px solid #BAE6FD;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s ease;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .legaldoc-btn-tool:hover {
      background: #E0F2FE;
      border-color: #0284C7;
    }

    /* 中間書狀格式填寫編輯區 (直式 A4 紙張樣式) */
    .legaldoc-editor-area {
      flex: 1;
      overflow-y: auto;
      padding: 24px;
      display: flex;
      justify-content: center;
      background: #E2E8F0;
    }

    .legaldoc-editor-area::-webkit-scrollbar {
      width: 8px;
    }
    .legaldoc-editor-area::-webkit-scrollbar-thumb {
      background: #94A3B8;
      border-radius: 4px;
    }

    .legaldoc-paper {
      background: #FFFFFF;
      width: 100%;
      max-width: 840px;
      min-height: 1100px;
      padding: 44px 50px;
      border: 1px solid #CBD5E1;
      box-shadow: 0 10px 30px rgba(0,0,0,0.12);
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      font-family: 'BiauKai', 'DFKai-SB', '標楷體', 'PMingLiU', 'Noto Serif TC', serif;
      box-sizing: border-box;
      position: relative;
    }

    /* 紙張內公文欄位樣式 */
    .doc-header-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      border: 1.5px solid #94A3B8;
      padding: 10px 14px;
      background: #F8FAFC;
      border-radius: 4px;
    }
    .doc-header-grid .grid-full {
      grid-column: span 2;
    }

    .doc-field-group {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .doc-field-label {
      font-weight: 800;
      color: #1E293B;
      font-size: 0.92rem;
      white-space: nowrap;
      min-width: 75px;
    }

    .doc-field-input {
      flex: 1;
      padding: 5px 8px;
      border: 1px solid #CBD5E1;
      border-radius: 4px;
      font-size: 0.92rem;
      font-family: inherit;
      color: #0F172A;
      background: #FFFFFF;
      outline: none;
    }
    .doc-field-input:focus {
      border-color: #0284C7;
      background: #F0F9FF;
    }

    .doc-main-title {
      font-size: 1.50rem;
      font-weight: 900;
      text-align: center;
      letter-spacing: 4px;
      color: #0F172A;
      padding: 10px 0;
      border-bottom: 2px solid #0F172A;
      margin-top: 6px;
    }

    .doc-parties-container {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 10px 0;
      border-bottom: 1px dashed #CBD5E1;
    }

    .doc-party-row {
      display: grid;
      grid-template-columns: 85px 140px 180px 1fr;
      gap: 8px;
      align-items: center;
      background: #F8FAFC;
      padding: 6px 10px;
      border-radius: 4px;
      border: 1px solid #E2E8F0;
    }

    .doc-party-role-tag {
      font-weight: 800;
      color: #1E3A8A;
      font-size: 0.88rem;
    }

    .doc-section-card {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-top: 8px;
    }

    .doc-section-title {
      font-size: 1.02rem;
      font-weight: 900;
      color: #0F172A;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .doc-textarea {
      width: 100%;
      box-sizing: border-box;
      border: 1px solid #CBD5E1;
      border-radius: 4px;
      padding: 12px 14px;
      font-family: inherit;
      font-size: 0.95rem;
      line-height: 1.85;
      color: #0F172A;
      background: #FFFFFF;
      resize: vertical;
      outline: none;
      box-shadow: inset 0 1px 3px rgba(0,0,0,0.04);
    }
    .doc-textarea:focus {
      border-color: #0284C7;
      background: #F0F9FF;
    }

    .doc-footer-box {
      margin-top: 20px;
      padding-top: 14px;
      border-top: 1px solid #CBD5E1;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .doc-court-input {
      font-size: 1.05rem;
      font-weight: 800;
      color: #0F172A;
      width: 100%;
      border: 1px solid transparent;
      padding: 4px 6px;
      border-radius: 4px;
      font-family: inherit;
      outline: none;
    }
    .doc-court-input:focus {
      border-color: #0284C7;
      background: #F0F9FF;
    }

    .doc-date-sign-row {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      flex-wrap: wrap;
      gap: 16px;
    }

    /* 右邊框框下面：完成後在框框下面有按鍵"產生PDF檔" */
    .legaldoc-bottom-bar {
      padding: 12px 24px;
      background: #FFFFFF;
      border-top: 1.5px solid #CCE1F5;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      flex-shrink: 0;
      flex-wrap: wrap;
      box-shadow: 0 -4px 14px rgba(0,0,0,0.04);
    }

    .legaldoc-bottom-tips {
      font-size: 0.82rem;
      color: #0369A1;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 6px;
      flex: 1;
      min-width: 260px;
    }

    .legaldoc-bottom-actions {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .btn-legaldoc-copy {
      padding: 9px 16px;
      background: #F0F9FF;
      border: 1.5px solid #BAE6FD;
      border-radius: 8px;
      color: #0369A1;
      font-size: 0.88rem;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.2s ease;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .btn-legaldoc-copy:hover {
      background: #E0F2FE;
      border-color: #0284C7;
    }

    /* 重點按鍵：產生PDF檔 */
    .btn-legaldoc-pdf {
      padding: 10px 24px;
      background: linear-gradient(135deg, #0284C7 0%, #0369A1 100%);
      color: #FFFFFF;
      border: none;
      border-radius: 8px;
      font-size: 0.98rem;
      font-weight: 800;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
      transition: all 0.2s ease;
    }
    .btn-legaldoc-pdf:hover {
      background: linear-gradient(135deg, #0369A1 0%, #1E3A8A 100%);
      box-shadow: 0 6px 18px rgba(2, 132, 199, 0.45);
      transform: translateY(-1px);
    }
    .btn-legaldoc-pdf:active {
      transform: translateY(1px);
    }

    /* =========================================================================
       2026-10-18 國考法研所證照題庫（折疊主按鍵與靠右縮小6大類子按鍵）
       ========================================================================= */
    .sidebar-btn-exam-parent {
      background: linear-gradient(135deg, #E0F2FE 0%, #EFF6FF 100%) !important;
      border: 1.5px solid #93C5FD !important;
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.1) !important;
      cursor: pointer;
      position: relative;
      margin-bottom: 2px;
      transition: all 0.2s ease !important;
    }
    .sidebar-btn-exam-parent:hover {
      background: linear-gradient(135deg, #BAE6FD 0%, #E0F2FE 100%) !important;
      border-color: #0284C7 !important;
      box-shadow: 0 3px 10px rgba(2, 132, 199, 0.18) !important;
      transform: translateX(1px);
    }
    .sidebar-btn-exam-parent .sidebar-btn-title {
      color: #0369A1 !important;
      font-weight: 800 !important;
      font-size: 0.88rem !important;
      letter-spacing: 0.2px;
    }
    .sidebar-btn-exam-parent .sidebar-btn-desc {
      color: #0284C7 !important;
      font-weight: 600 !important;
    }
    .exam-toggle-arrow {
      font-size: 0.72rem;
      color: #0284C7;
      margin-left: 6px;
      transition: transform 0.22s ease;
      display: inline-block;
      user-select: none;
      font-weight: 800;
    }
    .sidebar-btn-exam-parent.collapsed .exam-toggle-arrow {
      transform: rotate(-90deg);
    }

    /* 6 大類子按鍵容器：靠右對齊、層級導引線、平滑收攏與展開 */
    .sidebar-sub-group {
      display: flex;
      flex-direction: column;
      align-items: flex-end; /* 靠右對齊 */
      gap: 4px;
      margin-top: 5px;
      margin-bottom: 6px;
      padding-left: 8px;
      border-left: 2px dashed #BAE6FD;
      margin-left: 14px;
      max-height: 600px;
      opacity: 1;
      transform-origin: top;
      transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.22s ease, margin 0.22s ease;
      overflow: hidden;
    }
    .sidebar-sub-group.collapsed {
      max-height: 0 !important;
      opacity: 0 !important;
      margin-top: 0 !important;
      margin-bottom: 0 !important;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
      border-left-color: transparent !important;
      pointer-events: none !important;
    }

    /* 6 大類子按鍵：尺寸稍微小一點、寬度 90%、靠右對齊 */
    .sidebar-sub-btn {
      width: 90% !important;
      margin-left: auto !important;
      align-self: flex-end !important;
      padding: 5px 8px !important;
      min-height: 38px !important;
      border-radius: 6px !important;
      background: #F8FBFE !important;
      border: 1px solid #D5E5F5 !important;
      transition: all 0.18s ease !important;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    }
    .sidebar-sub-btn:hover {
      background: #E0EFFC !important;
      border-color: #38BDF8 !important;
      transform: translateX(-1px) !important;
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.12) !important;
    }
    .sidebar-sub-btn .sidebar-btn-icon {
      font-size: 0.95rem !important;
      width: 18px !important;
    }
    .sidebar-sub-btn .sidebar-btn-title {
      font-size: 0.81rem !important;
      font-weight: 700 !important;
      color: #0F172A !important;
    }
    .sidebar-sub-btn .sidebar-btn-desc {
      font-size: 0.67rem !important;
      color: #475569 !important;
    }
    .sidebar-sub-btn .sidebar-btn-tag {
      font-size: 0.65rem !important;
      padding: 1px 5px !important;
    }


    /* =========================================================================
       2026-10-18 會員專案四卡緊湊單畫面排版與正式採購報價單 (#quoteModal) 樣式
       ========================================================================= */
    .pricing-modal-container {
      width: 1240px !important;
      max-width: 96vw !important;
      height: 94vh !important;
      max-height: 95vh !important;
      background: #F8FBFE !important;
      border: 1.5px solid #BFDBFE !important;
      border-radius: 16px !important;
      box-shadow: 0 24px 60px rgba(2, 132, 199, 0.22) !important;
      display: flex !important;
      flex-direction: column !important;
      overflow: hidden !important;
    }
    .pricing-modal-header {
      padding: 8px 24px 6px !important;
      background: linear-gradient(180deg, #E8F3FD 0%, #F4F9FE 100%) !important;
      border-bottom: 1px solid #CCE1F5 !important;
    }
    .pricing-modal-title {
      font-size: 1.38rem !important;
      font-weight: 800 !important;
      color: #0369A1 !important;
      margin-bottom: 2px !important;
      letter-spacing: -0.2px !important;
    }
    .pricing-cycle-switch-wrap {
      padding: 2px 4px !important;
      margin-top: 2px !important;
    }
    .pricing-cycle-btn {
      padding: 3px 12px !important;
      font-size: 11.5px !important;
    }
    .pricing-cycle-notice {
      margin-top: 2px !important;
      font-size: 11px !important;
      color: #64748B !important;
      line-height: 1.2 !important;
    }

    /* 4 個會員橫式框：上下高度縮小、緊湊排版以塞進單一畫面 */
    .pricing-cards-horizontal {
      display: flex !important;
      flex-direction: column !important;
      gap: 6px !important;
      padding: 6px 18px !important;
      flex: 1 !important;
      min-height: 0 !important;
      overflow-y: auto !important;
    }
    .pricing-h-card {
      display: grid !important;
      grid-template-columns: 200px 1fr 190px !important;
      gap: 12px !important;
      align-items: center !important;
      background: #FFFFFF !important;
      border-radius: 10px !important;
      padding: 6px 14px !important;
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.05) !important;
      transition: all 0.2s ease !important;
      color: #0F172A !important;
      min-height: 98px !important;
    }
    .pricing-h-card:hover {
      transform: translateY(-1px) !important;
      box-shadow: 0 4px 12px rgba(2, 132, 199, 0.12) !important;
    }
    .h-card-left {
      display: flex !important;
      flex-direction: column !important;
      gap: 2px !important;
    }
    .h-tier-badge {
      font-size: 10px !important;
      padding: 1px 7px !important;
      border-radius: 8px !important;
      margin-bottom: 1px !important;
      letter-spacing: 0.2px !important;
    }
    .h-tier-name {
      font-size: 1.05rem !important;
      font-weight: 800 !important;
      color: #0F172A !important;
      margin: 0 !important;
      line-height: 1.25 !important;
    }
    .h-tier-sub {
      font-size: 0.70rem !important;
      color: #64748B !important;
      line-height: 1.2 !important;
    }
    .h-card-center {
      border-left: 1px solid #E2EEF9 !important;
      border-right: 1px solid #E2EEF9 !important;
      padding: 0 12px !important;
    }
    .h-features-header {
      font-size: 0.70rem !important;
      font-weight: 700 !important;
      color: #0369A1 !important;
      margin-bottom: 2px !important;
    }
    .h-features-grid {
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      gap: 2px 8px !important;
    }
    .h-feature-item {
      display: flex !important;
      align-items: flex-start !important;
      gap: 4px !important;
      font-size: 0.72rem !important;
      color: #334155 !important;
      line-height: 1.2 !important;
    }
    .h-check-icon {
      font-size: 11px !important;
      margin-top: 1px !important;
    }
    .h-card-right {
      display: flex !important;
      flex-direction: column !important;
      align-items: flex-end !important;
      text-align: right !important;
      gap: 2px !important;
    }
    .h-price-block {
      display: flex !important;
      align-items: baseline !important;
      gap: 2px !important;
    }
    .h-currency {
      font-size: 0.82rem !important;
      font-weight: 700 !important;
      color: #0F172A !important;
    }
    .h-amount {
      font-size: 1.45rem !important;
      font-weight: 800 !important;
      color: #0F172A !important;
      line-height: 1 !important;
    }
    .h-period {
      font-size: 0.72rem !important;
      color: #64748B !important;
      font-weight: 600 !important;
    }
    .h-price-desc {
      font-size: 0.65rem !important;
      color: #64748B !important;
      line-height: 1.15 !important;
      max-width: 180px !important;
    }
    .btn-h-plan {
      padding: 4px 12px !important;
      border-radius: 6px !important;
      font-size: 0.78rem !important;
      font-weight: 700 !important;
      cursor: pointer !important;
      border: none !important;
      white-space: nowrap !important;
    }
    .pricing-modal-footer {
      padding: 6px 18px !important;
      background: #E8F3FD !important;
      border-top: 1px solid #CCE1F5 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 12px !important;
    }
    .pricing-footer-prompt {
      font-size: 0.82rem !important;
      color: #334155 !important;
      font-weight: 700 !important;
    }
    .btn-generate-quote {
      background: linear-gradient(135deg, #0284C7, #0369A1) !important;
      color: #FFFFFF !important;
      border: none !important;
      padding: 5px 14px !important;
      border-radius: 6px !important;
      font-size: 0.82rem !important;
      font-weight: 800 !important;
      cursor: pointer !important;
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3) !important;
      display: inline-flex !important;
      align-items: center !important;
      gap: 6px !important;
      transition: all 0.2s ease !important;
    }
    .btn-generate-quote:hover {
      background: linear-gradient(135deg, #0369A1, #075985) !important;
      transform: translateY(-1px) !important;
      box-shadow: 0 4px 10px rgba(2, 132, 199, 0.45) !important;
    }

    /* 官方正式採購報價單視窗 (#quoteModal) 樣式 */
    .quote-modal-container {
      width: 1080px;
      max-width: 96vw;
      height: 92vh;
      max-height: 94vh;
      background: #F8FBFE !important;
      border: 1.5px solid #BFDBFE !important;
      border-radius: 16px;
      box-shadow: 0 25px 60px rgba(2, 132, 199, 0.22) !important;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      animation: modalFadeIn 0.2s ease-out;
    }
    .quote-modal-header {
      padding: 10px 20px;
      background: linear-gradient(180deg, #E8F3FD 0%, #F4F9FE 100%);
      border-bottom: 1.5px solid #CCE1F5;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }
    .quote-modal-title {
      font-size: 1.15rem;
      font-weight: 800;
      color: #0369A1;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .quote-modal-subtitle {
      font-size: 0.78rem;
      color: #475569;
    }
    .quote-modal-body {
      flex: 1;
      overflow-y: auto;
      padding: 14px 22px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      background: #F0F7FE;
    }
    .quote-sender-card {
      background: #FFFFFF;
      border: 1.5px solid #BAE6FD;
      border-radius: 10px;
      padding: 12px 18px;
      box-shadow: 0 2px 8px rgba(2, 132, 199, 0.08);
    }
    .quote-sender-title {
      font-size: 0.86rem;
      font-weight: 800;
      color: #0369A1;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .quote-sender-form {
      display: flex;
      align-items: flex-end;
      gap: 12px;
      flex-wrap: wrap;
    }
    .quote-input-field {
      flex: 1;
      min-width: 220px;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .quote-field-label {
      font-size: 0.78rem;
      font-weight: 700;
      color: #1E293B;
    }
    .quote-field-input {
      padding: 7px 12px;
      font-size: 0.84rem;
      border: 1.5px solid #BAE6FD;
      border-radius: 6px;
      outline: none;
      background: #F8FBFE;
      color: #0F172A;
      transition: all 0.2s;
    }
    .quote-field-input:focus {
      border-color: #0284C7;
      background: #FFFFFF;
      box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
    }
    .btn-quote-send {
      background: linear-gradient(135deg, #10B981, #059669);
      color: #FFFFFF;
      border: none;
      padding: 8px 22px;
      border-radius: 6px;
      font-size: 0.86rem;
      font-weight: 800;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
      transition: all 0.2s;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .btn-quote-send:hover {
      background: linear-gradient(135deg, #059669, #047857);
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.45);
    }
    .quote-send-status {
      margin-top: 8px;
      padding: 8px 12px;
      border-radius: 6px;
      background: #DCFCE7;
      border: 1px solid #86EFAC;
      color: #166534;
      font-size: 0.80rem;
      font-weight: 700;
    }

    /* 正式 A4 報價單紙張樣式 */
    .quote-sheet-wrapper {
      background: #FFFFFF;
      border: 1.5px solid #D1D5DB;
      border-radius: 8px;
      padding: 24px 32px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans TC", sans-serif;
      color: #0F172A;
    }
    .quote-sheet-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      border-bottom: 2px solid #0369A1;
      padding-bottom: 12px;
      margin-bottom: 12px;
    }
    .quote-brand-logo {
      font-size: 1.25rem;
      font-weight: 900;
      color: #0369A1;
      letter-spacing: -0.3px;
    }
    .quote-brand-sub {
      font-size: 0.80rem;
      color: #475569;
      margin-top: 2px;
    }
    .quote-sheet-meta {
      font-size: 0.78rem;
      color: #334155;
      line-height: 1.5;
      text-align: right;
    }
    .quote-recipient-box {
      background: #F8FAFC;
      border: 1px solid #E2E8F0;
      border-radius: 6px;
      padding: 10px 14px;
      font-size: 0.82rem;
      margin-bottom: 14px;
    }
    .quote-recipient-row {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 10px;
    }
    .quote-table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 14px;
      font-size: 0.80rem;
    }
    .quote-table th {
      background: #E0F2FE;
      color: #0369A1;
      font-weight: 800;
      padding: 8px 10px;
      border: 1px solid #BAE6FD;
    }
    .quote-table td {
      padding: 8px 10px;
      border: 1px solid #E2E8F0;
      vertical-align: middle;
    }
    .quote-table tbody tr:nth-child(even) {
      background: #F8FAFC;
    }
    .quote-payment-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #F8FAFC;
      border: 1px dashed #CBD5E1;
      border-radius: 6px;
      padding: 10px 16px;
      gap: 16px;
      margin-bottom: 14px;
    }
    .quote-info-title {
      font-size: 0.80rem;
      font-weight: 800;
      color: #0369A1;
      margin-bottom: 3px;
    }
    .quote-info-text {
      font-size: 0.75rem;
      color: #334155;
      line-height: 1.4;
    }
    .quote-seal-box {
      flex-shrink: 0;
    }
    .quote-seal-circle {
      width: 72px;
      height: 72px;
      border: 2px solid #DC2626;
      border-radius: 50%;
      color: #DC2626;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 0.62rem;
      font-weight: 900;
      line-height: 1.15;
      transform: rotate(-10deg);
    }
    .quote-action-bar {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 10px;
    }
    .btn-quote-print {
      background: #0284C7;
      color: #FFFFFF;
      border: none;
      padding: 6px 16px;
      border-radius: 6px;
      font-size: 0.80rem;
      font-weight: 700;
      cursor: pointer;
    }
    .btn-quote-copy {
      background: #FFFFFF;
      color: #0284C7;
      border: 1.5px solid #BAE6FD;
      padding: 6px 16px;
      border-radius: 6px;
      font-size: 0.80rem;
      font-weight: 700;
      cursor: pointer;
    }


    /* =========================================================================
       2026-10-18 全國法規即時速查庫全面改為淺藍色氛圍與全系統黃色字改深藍色字體
       ========================================================================= */
    /* 1. 法規速查庫彈出視窗容器 (外圍框框擴展到螢幕畫面 100%、淡藍色氛圍) */
    #statuteModal {
      padding: 0 !important;
      align-items: stretch !important;
      justify-content: stretch !important;
    }
    #statuteModal .modal-card-lawbrowser {
      width: 100vw !important;
      max-width: 100vw !important;
      height: 100vh !important;
      max-height: 100vh !important;
      border-radius: 0 !important;
      margin: 0 !important;
      border: none !important;
      box-shadow: none !important;
      background: #F8FBFE !important;
      color: #0F172A !important;
    }

    /* 2. 司法院大法官解釋及判決查詢視窗容器 (外圍框框擴展到螢幕畫面 100%) */
    #precedentModal {
      padding: 0 !important;
      align-items: stretch !important;
      justify-content: stretch !important;
    }
    #precedentModal .modal-card-lg {
      width: 100vw !important;
      max-width: 100vw !important;
      height: 100vh !important;
      max-height: 100vh !important;
      border-radius: 0 !important;
      margin: 0 !important;
      border: none !important;
      box-shadow: none !important;
      display: flex !important;
      flex-direction: column !important;
    }
    #precedentModal .modal-header-bar {
      border-radius: 0 !important;
    }
    #precedentModal .modal-scroll-content {
      flex: 1 !important;
      overflow-y: auto !important;
      padding: 20px 32px 40px !important;
    }

    /* 4-11. 全收錄資料檢索視窗樣式 (佔螢幕 100% 滿版新畫面) */
    #retrievalModal {
      padding: 0 !important;
      align-items: stretch !important;
      justify-content: stretch !important;
      z-index: 99999 !important;
      background: rgba(15, 23, 42, 0.85) !important;
      backdrop-filter: blur(8px) !important;
    }
    #retrievalModal .modal-card-retrieval {
      width: 100vw !important;
      max-width: 100vw !important;
      height: 100vh !important;
      max-height: 100vh !important;
      border-radius: 0 !important;
      margin: 0 !important;
      border: none !important;
      box-shadow: none !important;
      display: flex !important;
      flex-direction: column !important;
      background: #F8FAFC !important;
      overflow: hidden !important;
    }
    .retrieval-modal-header {
      height: 54px;
      min-height: 54px;
      background: linear-gradient(180deg, #E0F2FE 0%, #F0F9FF 100%) !important;
      border-bottom: 1.5px solid #BAE6FD !important;
      padding: 0 20px;
      display: flex;
      align-items: center;
      gap: 16px;
      box-shadow: 0 2px 10px rgba(2, 132, 199, 0.08) !important;
    }
    .retrieval-header-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .retrieval-header-title {
      font-size: 1.05rem;
      font-weight: 800;
      color: #0369A1 !important;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .retrieval-header-desc {
      font-size: 0.76rem;
      color: #334155 !important;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .retrieval-header-actions {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .retrieval-reload-btn {
      background: #FFFFFF !important;
      border: 1px solid #BAE6FD !important;
      color: #0369A1 !important;
      font-size: 12px;
      font-weight: 700;
      padding: 5px 12px;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s;
    }
    .retrieval-reload-btn:hover {
      background: #E0F2FE !important;
      border-color: #0284C7 !important;
    }
    .retrieval-modal-body {
      flex: 1;
      width: 100%;
      height: calc(100vh - 54px);
      background: #FFFFFF;
      overflow: hidden;
      position: relative;
    }
    .retrieval-iframe {
      width: 100%;
      height: 100%;
      border: none;
      display: block;
    }
    .modal-card-lawbrowser .modal-header-bar {
      background: linear-gradient(180deg, #E8F3FD 0%, #F4F9FE 100%) !important;
      border-bottom: 1px solid #CCE1F5 !important;
      border-radius: 0 !important;
    }
    .modal-card-lawbrowser .modal-header-title {
      color: #0369A1 !important;
      font-weight: 800 !important;
    }
    .modal-card-lawbrowser .modal-header-desc {
      color: #475569 !important;
      font-weight: 600 !important;
    }

    /* 2. 左側 52 部法典清單區域 (淺藍色底) */
    .lawbrowser-left-pane {
      background: #F0F7FD !important;
      border-right: 1.5px solid #CFE2F4 !important;
    }
    .lawbrowser-left-header {
      background: #E1EFFB !important;
      border-bottom: 1px solid #CCE1F5 !important;
    }
    .law-search-box {
      background: #FFFFFF !important;
      border: 1.5px solid #BAE6FD !important;
      color: #0F172A !important;
      font-weight: 600 !important;
    }
    .law-search-box:focus {
      border-color: #0284C7 !important;
      box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
    }
    .lawbrowser-count-badge {
      color: #0369A1 !important;
      font-weight: 700 !important;
    }
    #lawsCountDisplay {
      color: #0284C7 !important;
      font-weight: 800 !important;
    }
    .laws-scroll-list {
      background: #F0F7FD !important;
    }
    .law-catalog-item {
      background: #FFFFFF !important;
      border: 1px solid #CFE2F4 !important;
      border-radius: 8px !important;
      box-shadow: 0 1px 3px rgba(2, 132, 199, 0.05) !important;
      transition: all 0.18s ease !important;
    }
    .law-catalog-item:hover {
      background: #E0F2FE !important;
      border-color: #7DD3FC !important;
      transform: translateY(-1px) !important;
    }
    .law-catalog-item.active {
      background: linear-gradient(135deg, #E0F2FE, #BAE6FD) !important;
      border: 1.5px solid #0284C7 !important;
      box-shadow: 0 2px 8px rgba(2, 132, 199, 0.2) !important;
    }
    .law-catalog-title {
      color: #0F172A !important;
      font-weight: 700 !important;
    }
    .law-catalog-item.active .law-catalog-title {
      color: #0369A1 !important;
      font-weight: 800 !important;
    }
    .law-catalog-sub {
      color: #64748B !important;
    }
    .law-catalog-item.active .law-catalog-sub {
      color: #0284C7 !important;
      font-weight: 600 !important;
    }

    /* 3. 右側條文檢視與選取主區 (淺藍色底) */
    .lawbrowser-right-pane {
      background: #F8FBFE !important;
    }
    .current-law-banner {
      background: #FFFFFF !important;
      border: 1.5px solid #BFDBFE !important;
      border-radius: 12px !important;
      padding: 14px 18px !important;
      box-shadow: 0 2px 8px rgba(2, 132, 199, 0.06) !important;
    }
    /* 黃色字改成深藍色字：當前法典標題 */
    .current-law-title {
      color: #0369A1 !important; /* 原 #FCD34D 黃色改深藍色 */
      font-weight: 800 !important;
    }
    #currentLawMeta {
      color: #475569 !important;
      font-weight: 600 !important;
    }

    /* 條號快速選定區塊 (純白卡底 + 淺藍框線) */
    .article-selector-block {
      background: #FFFFFF !important;
      border: 1.5px solid #BFDBFE !important;
      border-radius: 12px !important;
      padding: 14px 18px !important;
      box-shadow: 0 2px 8px rgba(2, 132, 199, 0.06) !important;
    }
    .article-search-input {
      background: #F8FAFC !important;
      border: 1.5px solid #BAE6FD !important;
      color: #0F172A !important;
      font-weight: 600 !important;
    }
    .article-search-input:focus {
      border-color: #0284C7 !important;
      box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
    }
    .article-picker-hint {
      color: #0369A1 !important;
      font-weight: 700 !important;
    }
    .article-pill {
      background: #FFFFFF !important;
      border: 1px solid #BFDBFE !important;
      color: #334155 !important;
      font-weight: 600 !important;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
    }
    .article-pill:hover {
      background: #E0F2FE !important;
      color: #0284C7 !important;
      border-color: #38BDF8 !important;
    }
    .article-pill.active {
      background: linear-gradient(135deg, #0284C7, #0369A1) !important;
      border-color: #0284C7 !important;
      color: #FFFFFF !important;
      font-weight: 800 !important;
      box-shadow: 0 2px 8px rgba(2, 132, 199, 0.35) !important;
    }

    /* 法律條號選項下面的橫拉棒，上下高度再寬一點 (加寬至 15px，易於拖曳與滑動) */
    #articlePickerScroll::-webkit-scrollbar {
      height: 15px !important;
    }
    #articlePickerScroll::-webkit-scrollbar-track {
      background: #E0F2FE !important;
      border-radius: 8px !important;
    }
    #articlePickerScroll::-webkit-scrollbar-thumb {
      background: #0284C7 !important;
      border-radius: 8px !important;
      border: 3px solid #E0F2FE !important;
    }
    #articlePickerScroll::-webkit-scrollbar-thumb:hover {
      background: #0369A1 !important;
    }
    #articlePickerScroll {
      scrollbar-width: auto !important;
      scrollbar-color: #0284C7 #E0F2FE !important;
    }

    /* 4. 選定法條卡片 (純白卡底 + 淺藍邊框) */
    .selected-article-card {
      background: #FFFFFF !important;
      border: 1.5px solid #BFDBFE !important;
      border-radius: 14px !important;
      box-shadow: 0 4px 18px rgba(2, 132, 199, 0.08) !important;
    }
    /* 黃色字改成深藍色字：選定法條標題 */
    .selected-article-title {
      color: #0369A1 !important; /* 原 #FBBF24 黃色改深藍色 */
      font-weight: 800 !important;
    }
    .article-text-body {
      background: #F0F7FD !important;
      border: 1.5px solid #BFDBFE !important;
      border-left: 5px solid #0284C7 !important;
      border-radius: 8px !important;
      color: #0F172A !important;
      font-weight: 500 !important;
      line-height: 1.8 !important;
    }

    /* 前往全國法規資料庫官方頁面按鈕 (高對比薄荷綠) */
    .btn-official-page {
      background: #ECFDF5 !important;
      border: 1.5px solid #A7F3D0 !important;
      color: #047857 !important;
      font-weight: 700 !important;
    }
    .btn-official-page:hover {
      background: #D1FAE5 !important;
      border-color: #10B981 !important;
      color: #065F46 !important;
    }

    /* 白話按鈕：黃色字與黃框改成深藍色字與透亮淺天藍底 */
    .btn-plain-toggle {
      background: #E0F2FE !important;
      border: 1.5px solid #7DD3FC !important;
      color: #0369A1 !important; /* 原 #FCD34D 黃色改深藍色 */
      font-weight: 800 !important;
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.15) !important;
    }
    .btn-plain-toggle:hover {
      background: #BAE6FD !important;
      border-color: #0284C7 !important;
      color: #075985 !important;
    }
    .btn-plain-toggle.active {
      background: linear-gradient(135deg, #0284C7, #0369A1) !important;
      border-color: #0369A1 !important;
      color: #FFFFFF !important;
      box-shadow: 0 2px 8px rgba(2, 132, 199, 0.35) !important;
    }

    /* 5. 白話解釋新框框 (清新淺天藍底 + 冰藍邊框) */
    .plain-explanation-box {
      background: #F0F9FF !important;
      border: 1.5px solid #7DD3FC !important;
      border-radius: 12px !important;
      box-shadow: 0 4px 16px rgba(2, 132, 199, 0.1) !important;
    }
    /* 白話解釋標題：黃色字改深藍色字 */
    .plain-box-title {
      color: #0369A1 !important; /* 原 #FDE68A 黃色改深藍色 */
      font-weight: 800 !important;
    }
    /* 白話標籤：黃色字改深藍色字 */
    .plain-badge {
      background: #E0F2FE !important;
      border: 1px solid #BAE6FD !important;
      color: #0369A1 !important; /* 原 #FCD34D 黃色改深藍色 */
      font-weight: 700 !important;
    }
    /* 白話主要內文 */
    .plain-main-text {
      background: #FFFFFF !important;
      border: 1px solid #BAE6FD !important;
      border-left: 4px solid #0284C7 !important;
      color: #0F172A !important;
      font-weight: 500 !important;
    }
    /* 白話要件各卡片 */
    .plain-section-card {
      background: #FFFFFF !important;
      border: 1px solid #CFE2F4 !important;
      border-radius: 8px !important;
      box-shadow: 0 1px 4px rgba(2, 132, 199, 0.05) !important;
    }
    .plain-section-label {
      color: #0369A1 !important;
      font-weight: 800 !important;
    }
    .plain-section-val {
      color: #1E293B !important;
      font-weight: 500 !important;
    }

    /* 6. 其他彈窗與全系統黃色字改深藍色字 (Global Yellow Text to Deep Blue) */
    .modal-scroll-content {
      background: #F8FBFE !important;
    }
    .modal-search-box {
      background: #FFFFFF !important;
      border: 1.5px solid #BAE6FD !important;
      color: #0F172A !important;
      font-weight: 600 !important;
    }
    .modal-filter-chip {
      background: #FFFFFF !important;
      border: 1px solid #BFDBFE !important;
      color: #334155 !important;
      font-weight: 600 !important;
    }
    .modal-filter-chip:hover {
      background: #E0F2FE !important;
      color: #0284C7 !important;
      border-color: #38BDF8 !important;
    }
    .modal-filter-chip.active {
      background: #0284C7 !important;
      border-color: #0284C7 !important;
      color: #FFFFFF !important;
      font-weight: 700 !important;
    }
    .modal-item-card {
      background: #FFFFFF !important;
      border: 1.5px solid #BFDBFE !important;
      border-radius: 12px !important;
      box-shadow: 0 2px 8px rgba(2, 132, 199, 0.06) !important;
    }
    /* 裁判與各彈窗卡片標題：黃色字改深藍色字 */
    .item-card-title {
      color: #0369A1 !important; /* 原 #FCD34D 黃色改深藍色 */
      font-weight: 800 !important;
    }
    .item-card-body {
      background: #FAF6ED !important; /* 灰色/淡藍色底改為優雅淡米色 */
      border: 1.5px solid #EADBCA !important;
      border-left: 4px solid #0284C7 !important;
      color: #1E293B !important;
    }
    .item-card-meta {
      color: #0369A1 !important;
      font-weight: 600 !important;
    }

    /* 2026-10-18 實務法律小常識視窗 (#legalTipsModal) 專屬樣式：外圍框框拉至佔螢幕80%、黃字改深藍、內框灰色底改淡米色 */
    #legalTipsModal .modal-card-lg {
      width: 80vw !important;
      max-width: 80vw !important;
      max-height: 88vh !important;
      background: #F8FBFE !important;
      border: 1.5px solid #BFDBFE !important;
      box-shadow: 0 25px 65px rgba(2, 132, 199, 0.22) !important;
    }
    #legalTipsModal .item-card-title {
      color: #0369A1 !important; /* 原黃色改為深藍色 */
      font-weight: 800 !important;
      font-size: 1.08rem !important;
    }
    #legalTipsModal .item-card-body {
      background: #FAF6ED !important; /* 灰色底色改為淡米色 */
      border: 1.5px solid #EADBCA !important;
      border-left: 4px solid #0284C7 !important;
      color: #1E293B !important;
      border-radius: 8px !important;
      padding: 14px 18px !important;
      line-height: 1.8 !important;
      font-size: 0.92rem !important;
      box-shadow: inset 0 1px 3px rgba(180, 150, 120, 0.06) !important;
    }
    #legalTipsModal .item-card-meta {
      color: #0369A1 !important; /* 法律依據文字深藍色 */
      font-weight: 700 !important;
      font-size: 0.88rem !important;
    }
    #legalTipsModal .modal-item-card {
      background: #FFFFFF !important;
      border: 1.5px solid #BAE6FD !important;
      border-radius: 12px !important;
      padding: 18px 22px !important;
      box-shadow: 0 4px 14px rgba(2, 132, 199, 0.08) !important;
    }
    #legalTipsModal .modal-header-title {
      color: #0369A1 !important;
      font-weight: 800 !important;
    }
    #legalTipsModal .modal-filter-chip {
      background: #FFFFFF !important;
      border: 1.5px solid #BAE6FD !important;
      color: #0369A1 !important;
      font-weight: 600 !important;
    }
    #legalTipsModal .modal-filter-chip.active {
      background: #0284C7 !important;
      border-color: #0284C7 !important;
      color: #FFFFFF !important;
      font-weight: 800 !important;
    }

    /* 檢索下拉選單條文標題：黃色字改深藍色字 */
    .result-law-title {
      color: #0369A1 !important; /* 原 #FCD34D 黃色改深藍色 */
      font-weight: 800 !important;
    }

    /* 法條引用膠囊 (.law-pill)：黃色字改深藍色字 */
    .law-pill {
      background: #E0F2FE !important;
      color: #0369A1 !important; /* 原 #FCD34D 黃色改深藍色 */
      border: 1.5px solid #BAE6FD !important;
      font-weight: 700 !important;
    }
    .law-pill:hover {
      background: #BAE6FD !important;
      border-color: #0284C7 !important;
      color: #075985 !important;
    }

    /* 頂部「💎 會員專案」按鈕：黃色字改深藍色字、淺藍底 */
    .header-pricing-btn {
      background: linear-gradient(135deg, #E0F2FE, #BAE6FD) !important;
      border: 1.5px solid #7DD3FC !important;
      color: #0369A1 !important; /* 原 #FDE68A 黃色改深藍色 */
      font-weight: 800 !important;
      box-shadow: 0 2px 8px rgba(2, 132, 199, 0.2) !important;
    }
    .header-pricing-btn:hover {
      background: linear-gradient(135deg, #BAE6FD, #7DD3FC) !important;
      border-color: #0284C7 !important;
      color: #0C4A6E !important;
      box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3) !important;
    }

    /* 頂部中間「會員登入」紫色框框：框框保留紫色，裡面的字顏色改深藍色 */
    .header-user-btn {
      color: #0369A1 !important; /* 紫色框框裡面的字改為深藍色 */
      font-weight: 700 !important;
    }
    .header-user-btn span,
    .header-user-btn #headerUserName,
    .header-user-btn #headerUserIcon {
      color: #0369A1 !important;
      font-weight: 700 !important;
    }
    .header-user-btn:hover {
      color: #0C4A6E !important;
    }
    .header-user-btn:hover span,
    .header-user-btn:hover #headerUserName {
      color: #0C4A6E !important;
    }

    /* 全系統標籤與側欄按鍵右側標籤 (.sidebar-btn-tag.blue「速查」「實務」「書狀」等)：字改深藍色字、淺藍底 */
    .nav-tag.gold, .nav-tag.amber, .model-opt-tag.gold, .sidebar-btn-tag.gold, .sidebar-btn-tag.blue, .tier-pill.gold {
      background: #E0F2FE !important;
      border: 1px solid #BAE6FD !important;
      color: #0369A1 !important; /* 深藍色 */
      font-weight: 700 !important;
    }

    /* 側邊欄關於按鍵標題：黃色字改深藍色字 */
    .sidebar-btn.sidebar-btn-about .sidebar-btn-title {
      color: #0369A1 !important; /* 原 #FDE68A 黃色改深藍色 */
      font-weight: 800 !important;
    }

    /* 關於視窗標籤與標題 */
    .about-brand-tag {
      background: #E0F2FE !important;
      border: 1px solid #BAE6FD !important;
      color: #0369A1 !important; /* 原 #F59E0B 黃色改深藍色 */
      font-weight: 800 !important;
    }
    .about-cta-title {
      color: #0369A1 !important; /* 原 #FDE68A 黃色改深藍色 */
      font-weight: 800 !important;
    }
    .btn-about-plan {
      background: linear-gradient(135deg, #0284C7, #0369A1) !important;
      color: #FFFFFF !important;
      font-weight: 800 !important;
      border: none !important;
      box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3) !important;
    }
    .btn-about-plan:hover {
      background: linear-gradient(135deg, #0369A1, #075985) !important;
    }

    /* 試題研析金操作鈕 (.exam-btn-action.gold)：黃色字改深藍色字 */
    .exam-btn-action.gold {
      background: #E0F2FE !important;
      border: 1.5px solid #7DD3FC !important;
      color: #0369A1 !important; /* 原黃字改深藍字 */
      font-weight: 800 !important;
    }
    .exam-btn-action.gold:hover {
      background: #BAE6FD !important;
      border-color: #0284C7 !important;
      color: #075985 !important;
    }

    /* =========================================================================
       2026-10-19 上線收費：線上結帳收費中心 (#checkoutModal)、電子收據 (#receiptModal) 與用量配額
       ========================================================================= */
    .checkout-modal-container {
      width: 980px;
      max-width: 96vw;
      max-height: 92vh;
      background: #FFFFFF;
      border-radius: 18px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      box-shadow: 0 25px 60px rgba(15, 23, 42, 0.35);
      border: 1px solid #BAE6FD;
      font-family: inherit;
    }
    .checkout-modal-header {
      padding: 16px 24px;
      background: linear-gradient(135deg, #0284C7 0%, #0369A1 100%);
      color: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 2px solid #075985;
    }
    .checkout-header-left {
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .checkout-header-title {
      font-size: 1.25rem;
      font-weight: 800;
      letter-spacing: 0.5px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .checkout-header-sub {
      font-size: 0.8rem;
      color: #E0F2FE;
      margin-top: 2px;
    }
    .checkout-modal-body {
      padding: 24px;
      overflow-y: auto;
      background: #F8FAFC;
    }
    .checkout-grid {
      display: grid;
      grid-template-columns: 42% 58%;
      gap: 24px;
    }
    @media (max-width: 860px) {
      .checkout-grid {
        grid-template-columns: 1fr;
      }
    }

    /* 左側：方案訂單與計費試算卡片 */
    .checkout-summary-card {
      background: #FFFFFF;
      border: 1.5px solid #BAE6FD;
      border-radius: 14px;
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      box-shadow: 0 4px 14px rgba(2, 132, 199, 0.08);
    }
    .checkout-plan-banner {
      background: linear-gradient(135deg, #E0F2FE 0%, #BAE6FD 100%);
      border: 1.5px solid #7DD3FC;
      border-radius: 10px;
      padding: 14px;
    }
    .checkout-plan-badge {
      display: inline-block;
      padding: 3px 8px;
      background: #0369A1;
      color: #FFFFFF;
      border-radius: 999px;
      font-size: 0.72rem;
      font-weight: 800;
      margin-bottom: 6px;
    }
    .checkout-plan-title {
      font-size: 1.15rem;
      font-weight: 800;
      color: #0C4A6E;
    }
    .checkout-plan-desc {
      font-size: 0.78rem;
      color: #0369A1;
      margin-top: 4px;
    }

    /* 計費週期選擇器 */
    .billing-cycle-selector {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .cycle-option {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 14px;
      border: 1.5px solid #CBD5E1;
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.2s ease;
      background: #FFFFFF;
    }
    .cycle-option:hover {
      border-color: #0284C7;
      background: #F0F9FF;
    }
    .cycle-option.selected {
      border-color: #0284C7;
      background: #F0F9FF;
      box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.2);
    }
    .cycle-left {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .cycle-title {
      font-weight: 800;
      font-size: 0.88rem;
      color: #0F172A;
    }
    .cycle-sub {
      font-size: 0.72rem;
      color: #64748B;
      margin-top: 2px;
    }
    .cycle-tag {
      background: #FEF3C7;
      color: #D97706;
      border: 1px solid #FCD34D;
      padding: 2px 6px;
      border-radius: 6px;
      font-size: 0.70rem;
      font-weight: 800;
      margin-left: 6px;
    }
    .cycle-price {
      text-align: right;
      font-weight: 800;
      font-size: 0.95rem;
      color: #0369A1;
    }

    /* 費用試算明細 */
    .checkout-calc-table {
      border-top: 1px dashed #CBD5E1;
      padding-top: 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      font-size: 0.82rem;
    }
    .calc-row {
      display: flex;
      justify-content: space-between;
      color: #64748B;
    }
    .calc-row.discount {
      color: #16A34A;
      font-weight: 700;
    }
    .calc-row.total {
      border-top: 1.5px solid #E2E8F0;
      padding-top: 10px;
      margin-top: 4px;
      color: #0F172A;
      font-size: 1rem;
      font-weight: 800;
    }
    .total-amount {
      color: #0284C7;
      font-size: 1.35rem;
      font-weight: 900;
    }

    .checkout-guarantee {
      background: #F1F5F9;
      border-radius: 8px;
      padding: 10px 12px;
      font-size: 0.74rem;
      color: #475569;
      line-height: 1.45;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    /* 右側：付款方式與電子發票 */
    .checkout-action-card {
      background: #FFFFFF;
      border: 1.5px solid #BAE6FD;
      border-radius: 14px;
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 18px;
      box-shadow: 0 4px 14px rgba(2, 132, 199, 0.08);
    }
    .checkout-section-title {
      font-size: 0.95rem;
      font-weight: 800;
      color: #0F172A;
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
    }
    .pay-methods-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
    }
    .pay-method-btn {
      padding: 10px 6px;
      border: 1.5px solid #E2E8F0;
      border-radius: 8px;
      background: #FFFFFF;
      cursor: pointer;
      text-align: center;
      font-size: 0.78rem;
      font-weight: 700;
      color: #475569;
      transition: all 0.2s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }
    .pay-method-btn.active {
      border-color: #0284C7;
      background: #F0F9FF;
      color: #0369A1;
      box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.2);
    }
    .pay-method-icon {
      font-size: 1.25rem;
    }

    /* 付款表單容器 */
    .pay-panel-content {
      background: #F8FAFC;
      border: 1px solid #E2E8F0;
      border-radius: 10px;
      padding: 14px;
    }
    .form-group-checkout {
      display: flex;
      flex-direction: column;
      gap: 4px;
      margin-bottom: 10px;
    }
    .form-group-checkout label {
      font-size: 0.78rem;
      font-weight: 700;
      color: #334155;
    }
    .form-control-checkout {
      padding: 9px 12px;
      border: 1.5px solid #CBD5E1;
      border-radius: 8px;
      font-size: 0.85rem;
      color: #0F172A;
      background: #FFFFFF;
      transition: border-color 0.2s;
    }
    .form-control-checkout:focus {
      outline: none;
      border-color: #0284C7;
      box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.15);
    }

    /* 發票區域 */
    .invoice-tabs-row {
      display: flex;
      gap: 12px;
      margin-bottom: 10px;
    }
    .invoice-tab-label {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 0.82rem;
      font-weight: 700;
      color: #334155;
      cursor: pointer;
    }

    /* 送出付款按鈕 */
    .btn-submit-payment {
      padding: 14px;
      background: linear-gradient(135deg, #0284C7 0%, #0369A1 100%);
      color: #FFFFFF;
      border: none;
      border-radius: 10px;
      font-size: 1.05rem;
      font-weight: 800;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
      transition: all 0.2s ease;
    }
    .btn-submit-payment:hover {
      background: linear-gradient(135deg, #0369A1 0%, #075985 100%);
      transform: translateY(-1px);
      box-shadow: 0 6px 18px rgba(2, 132, 199, 0.45);
    }
    .btn-submit-payment:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }

    /* =========================================================================
       電子收據模態視窗 (#receiptModal)
       ========================================================================= */
    .receipt-modal-container {
      width: 640px;
      max-width: 95vw;
      background: #FFFFFF;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 25px 60px rgba(15, 23, 42, 0.35);
      border: 1px solid #BAE6FD;
      font-family: inherit;
    }
    .receipt-header-success {
      background: linear-gradient(135deg, #10B981 0%, #059669 100%);
      color: #FFFFFF;
      padding: 20px 24px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }
    .receipt-success-icon {
      font-size: 2.5rem;
    }
    .receipt-success-title {
      font-size: 1.3rem;
      font-weight: 800;
    }
    .receipt-success-sub {
      font-size: 0.85rem;
      color: #D1FAE5;
    }
    .receipt-body {
      padding: 24px;
      background: #F8FAFC;
    }
    .receipt-card {
      background: #FFFFFF;
      border: 1.5px solid #BAE6FD;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 4px 12px rgba(2, 132, 199, 0.08);
      position: relative;
    }
    .receipt-card::before {
      content: "OFFICIAL RECEIPT";
      position: absolute;
      top: 16px;
      right: 20px;
      font-size: 0.65rem;
      font-weight: 900;
      color: #0284C7;
      letter-spacing: 1px;
      border: 1px solid #BAE6FD;
      padding: 2px 6px;
      border-radius: 4px;
      background: #F0F9FF;
    }
    .receipt-row {
      display: flex;
      justify-content: space-between;
      padding: 8px 0;
      border-bottom: 1px solid #F1F5F9;
      font-size: 0.85rem;
    }
    .receipt-label {
      color: #64748B;
      font-weight: 600;
    }
    .receipt-val {
      color: #0F172A;
      font-weight: 700;
    }
    .receipt-total-row {
      display: flex;
      justify-content: space-between;
      padding: 12px 0 4px 0;
      font-size: 1.05rem;
      font-weight: 900;
      color: #0F172A;
    }
    .receipt-actions {
      display: flex;
      gap: 12px;
      margin-top: 18px;
    }
    .btn-receipt-action {
      flex: 1;
      padding: 11px;
      border-radius: 8px;
      font-size: 0.88rem;
      font-weight: 800;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: all 0.2s ease;
    }
    .btn-receipt-print {
      background: #FFFFFF;
      border: 1.5px solid #0284C7;
      color: #0284C7;
    }
    .btn-receipt-print:hover {
      background: #E0F2FE;
    }
    .btn-receipt-done {
      background: #0284C7;
      border: 1.5px solid #0284C7;
      color: #FFFFFF;
    }
    .btn-receipt-done:hover {
      background: #0369A1;
    }

    /* =========================================================================
       側邊欄會員中心：用量配額儀表板 (Quota Usage Dashboard)
       ========================================================================= */
    .quota-dashboard-card {
      background: #FFFFFF;
      border: 1.5px solid #BAE6FD;
      border-radius: 12px;
      padding: 12px 14px;
      margin-top: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .quota-card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.78rem;
      font-weight: 800;
      color: #0369A1;
      border-bottom: 1px solid #E0F2FE;
      padding-bottom: 6px;
    }
    .quota-item {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .quota-item-top {
      display: flex;
      justify-content: space-between;
      font-size: 0.72rem;
      font-weight: 700;
      color: #334155;
    }
    .quota-bar-track {
      width: 100%;
      height: 6px;
      background: #E2E8F0;
      border-radius: 999px;
      overflow: hidden;
    }
    .quota-bar-fill {
      height: 100%;
      background: linear-gradient(90deg, #38BDF8, #0284C7);
      border-radius: 999px;
      transition: width 0.3s ease;
    }
    .quota-actions-row {
      display: flex;
      gap: 6px;
      margin-top: 4px;
    }
    .btn-quota-action {
      flex: 1;
      padding: 6px 4px;
      font-size: 0.70rem;
      font-weight: 800;
      border-radius: 6px;
      cursor: pointer;
      text-align: center;
      border: 1px solid #BAE6FD;
      background: #F0F9FF;
      color: #0369A1;
      transition: all 0.2s ease;
    }
    .btn-quota-action:hover {
      background: #0284C7;
      color: #FFFFFF;
      border-color: #0284C7;
    }


[hidden]{display:none!important} #webNotice{position:fixed;bottom:24px;left:32%;background:#e0f2fe;color:#172b40;border:1px solid #38bdf8;padding:14px;z-index:999999;border-radius:10px;max-width:60vw} .web-note{white-space:pre-wrap;padding:18px;border:1px solid #38bdf8;background:#e0f2fe;border-radius:12px;margin:12px}

/* ========================================================
 * JIMMU Law AI 立體金字（平均放大 + 5秒掃光動效）與細黑體公司標註
 * ======================================================== */
.brand-actions-bar {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 14px 10px !important;
  background: var(--bg-surface, #F8FAFC) !important;
  border-bottom: 1px solid var(--border-subtle, #E2E8F0) !important;
}

.brand-actions-bar .user-tier-wrap {
  flex: 1 !important;
}

.brand-actions-bar .user-tier-pill {
  width: 100% !important;
  justify-content: space-between !important;
}

.jimmu-gold-title {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 900 !important;
  font-size: 1.36rem !important; /* 平均放大，視覺更醒目大氣 */
  letter-spacing: 0.9px !important;
  display: inline-block !important;
  background: linear-gradient(
    90deg,
    #996515 0%,
    #DAA520 20%,
    #FFF8DC 35%,
    #FFFFFF 45%,
    #FFF8DC 55%,
    #DAA520 70%,
    #996515 100%
  ) !important;
  background-size: 250% 100% !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: 0 1px 0 #7A5210, 0 2px 3px rgba(0, 0, 0, 0.28) !important;
  filter: drop-shadow(0 1px 1px rgba(218, 165, 32, 0.45)) !important;
  animation: jimmuGoldShine 5s infinite cubic-bezier(0.4, 0, 0.2, 1) !important;
  white-space: nowrap !important;
  line-height: 1.25 !important;
}

@keyframes jimmuGoldShine {
  0% {
    background-position: 100% 0;
  }
  20% {
    background-position: 0% 0;
  }
  100% {
    background-position: 0% 0;
  }
}

/* 平台首頁正下方英文公司名：細黑體字型 */
.platform-company-footer {
  font-family: "PingFang TC", "Hiragino Sans GB", "Microsoft JhengHei Light", "Microsoft JhengHei", "Noto Sans TC", "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 300 !important; /* 細黑體 */
  font-size: 0.88rem !important;
  color: #64748B !important;
  letter-spacing: 1.5px !important;
  text-align: center !important;
  margin-top: 26px !important;
  margin-bottom: 14px !important;
  user-select: none !important;
}