/* 色票（深/淺）＋圓角/動畫由 /css/theme.css 統一提供（key=podvault_theme）。
           §3.1：本檔只保留頁面版面，主題色一律用 var()，不自建 [data-theme] 色覆蓋。 */

        /* §3.1 集中化：本頁不自維護 [data-theme="light"] 色覆蓋，
           主題色一律用 theme.css 語意 token（--surface-hover/--ripple/--scrim/
           --skeleton-lo/--status-*…），深/淺各在 theme.css 定義一次。 */

        * { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; }

        body {
            font-family: 'Noto Sans TC', -apple-system, sans-serif;
            background-color: var(--bg-deep);
            color: var(--text-primary);
            line-height: 1.7;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
            min-height: 100vh;
            min-height: 100dvh;
        }

        /* ── 背景光暈 ───────────────────────────────── */
        .bg-patchwork {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            pointer-events: none; z-index: 0;
        }
        .bg-patch {
            position: absolute; border-radius: 50%;
            filter: blur(130px); opacity: 0.15;
        }
        .bg-patch-1 { width: 500px; height: 500px; background: radial-gradient(circle, rgba(212,165,71,0.4) 0%, transparent 70%); top: -10%; left: -5%; animation: patchFloat 16s ease-in-out infinite; }
        .bg-patch-2 { width: 400px; height: 400px; background: radial-gradient(circle, rgba(184,133,122,0.35) 0%, transparent 70%); bottom: 0; right: -5%; animation: patchFloat 20s ease-in-out infinite; animation-delay: -7s; }
        .bg-patch-3 { width: 350px; height: 350px; background: radial-gradient(circle, rgba(138,154,107,0.3) 0%, transparent 70%); top: 50%; left: 30%; animation: patchFloat 18s ease-in-out infinite; animation-delay: -12s; }
        .bg-patch-4 { width: 300px; height: 300px; background: radial-gradient(circle, rgba(70,100,130,0.25) 0%, transparent 70%); top: 20%; right: 10%; animation: patchFloat 22s ease-in-out infinite; animation-delay: -4s; }
        .bg-patch-5 { width: 280px; height: 280px; background: radial-gradient(circle, rgba(196,149,106,0.3) 0%, transparent 70%); bottom: 20%; left: 5%; animation: patchFloat 14s ease-in-out infinite; animation-delay: -9s; }

        @keyframes patchFloat {
            0%,100% { transform: translate(0,0) scale(1); }
            25% { transform: translate(25px,-15px) scale(1.04); }
            50% { transform: translate(-15px,20px) scale(0.97); }
            75% { transform: translate(-20px,-10px) scale(1.02); }
        }

        .bg-grain {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            pointer-events: none; z-index: 1; opacity: 0.5;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.01'/%3E%3C/svg%3E");
        }

        /* ── 導航 ───────────────────────────────────── */
        .nav-bar {
            position: fixed; top: 0; left: 0; right: 0; z-index: 100;
            padding: 0 24px; height: 60px;
            display: flex; align-items: center; justify-content: space-between;
            background: var(--fx-nav-bg);
            backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px);
            border-bottom: 1px solid var(--border-subtle);
        }
        .nav-logo {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.1rem; font-weight: 500;
            color: var(--text-primary); letter-spacing: 0.12em;
            text-decoration: none; position: relative;
        }
        .nav-logo::after {
            content: ''; position: absolute;
            top: -2px; right: -10px;
            width: 7px; height: 7px;
            background: var(--accent-rose); border-radius: 50%;
        }
        .nav-badge {
            font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase;
            color: var(--accent-gold); border: 1px solid rgba(200,169,126,0.3);
            padding: 3px 10px; border-radius: var(--radius-pill);
        }
        .nav-right { display: flex; align-items: center; gap: 16px; }
        .nav-user { font-size: 0.8rem; color: var(--text-secondary); }
        .btn-logout {
            font-size: 0.78rem; color: var(--text-tertiary);
            background: none; border: none; cursor: pointer;
            padding: 4px 8px; border-radius: var(--radius-soft);
            transition: color 0.2s;
        }
        .btn-logout:hover { color: var(--accent-rose); }

        /* ── 主區 ───────────────────────────────────── */
        .main-wrap {
            position: relative; z-index: 2;
            padding: 80px 24px 60px;
            max-width: 1100px; margin: 0 auto;
        }

        .page-header {
            margin-bottom: 32px;
        }
        .page-title {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.8rem; font-weight: 500;
            color: var(--text-primary); letter-spacing: 0.08em;
        }
        .page-subtitle {
            font-size: 0.82rem; color: var(--text-tertiary);
            margin-top: 4px; letter-spacing: 0.05em;
        }

        /* ── Tab 導航 ───────────────────────────────── */
        .tab-nav {
            /* 11 個 tab 自動換行成多列，寬度夠一排、不夠就疊列（波尼 2026-07-15）*/
            display: flex; flex-wrap: wrap; gap: 4px 2px;
            border-bottom: 1px solid var(--border-subtle);
            margin-bottom: 32px;
        }
        .tab-btn {
            padding: 12px 20px;
            background: none; border: none; cursor: pointer;
            font-family: 'Noto Sans TC', sans-serif;
            font-size: 0.85rem; color: var(--text-tertiary);
            letter-spacing: 0.05em;
            white-space: nowrap; /* 中文不被壓成直排 */
            border-bottom: 2px solid transparent;
            margin-bottom: -1px;
            transition: color 0.25s, border-color 0.25s;
            position: relative;
        }
        .tab-btn:hover { color: var(--text-secondary); }
        .tab-btn.active {
            color: var(--accent-gold);
            border-bottom-color: var(--accent-gold);
        }
        .tab-btn i { margin-right: 6px; font-size: 0.8rem; }

        /* 未處理筆數徽章（波尼 2026-07-15）：玫瑰色小圓標，0 筆時隱藏 */
        .tab-badge {
            display: none; /* JS 填入 >0 時改 inline-flex */
            align-items: center; justify-content: center;
            min-width: 17px; height: 17px; padding: 0 5px;
            margin-left: 6px; border-radius: 9px;
            background: var(--accent-rose); color: #1a1210;
            font-size: 0.68rem; font-weight: 700; letter-spacing: 0;
            vertical-align: 1px;
        }

        .tab-panel { display: none; }
        .tab-panel.active { display: block; }

        /* ── 卡片 ───────────────────────────────────── */
        .card {
            background: var(--bg-card);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-medium);
            padding: 24px;
            margin-bottom: 20px;
        }
        .card-title {
            font-size: 0.78rem; letter-spacing: 0.15em; text-transform: uppercase;
            color: var(--text-tertiary); margin-bottom: 16px;
        }

        /* ── 篩選列 ─────────────────────────────────── */
        .filter-bar {
            display: flex; gap: 12px; flex-wrap: wrap;
            align-items: center; margin-bottom: 16px;
        }
        .filter-input {
            flex: 1; min-width: 200px;
            background: var(--bg-elevated);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-soft);
            padding: 8px 14px; font-size: 0.82rem;
            color: var(--text-primary); outline: none;
            transition: border-color 0.2s;
        }
        .filter-input:focus { border-color: rgba(200,169,126,0.4); }
        .filter-input::placeholder { color: var(--text-tertiary); }
        .filter-group { display: flex; gap: 4px; }
        .filter-chip {
            padding: 6px 14px; font-size: 0.75rem;
            letter-spacing: 0.08em;
            background: none; border: 1px solid var(--border-subtle);
            border-radius: var(--radius-pill); cursor: pointer;
            color: var(--text-tertiary); transition: all 0.2s;
        }
        .filter-chip:hover { color: var(--text-secondary); border-color: var(--border-medium); }
        .filter-chip.active {
            background: rgba(200,169,126,0.12);
            border-color: rgba(200,169,126,0.35);
            color: var(--accent-gold);
        }

        /* ── 表格 ───────────────────────────────────── */
        .data-table { width: 100%; border-collapse: collapse; }
        .data-table th {
            text-align: left; padding: 10px 12px;
            font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
            color: var(--text-tertiary);
            border-bottom: 1px solid var(--border-subtle);
        }
        .data-table td {
            padding: 12px 12px;
            font-size: 0.82rem; color: var(--text-secondary);
            border-bottom: 1px solid var(--border-subtle);
            vertical-align: middle;
        }
        .data-table tr:last-child td { border-bottom: none; }
        .data-table tr:hover td { background: var(--surface-hover); }
        .data-table .email-cell { color: var(--text-primary); font-size: 0.85rem; }

        /* ── 狀態徽章 ───────────────────────────────── */
        .badge {
            display: inline-flex; align-items: center; gap: 5px;
            padding: 3px 10px; border-radius: var(--radius-pill);
            font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
            font-weight: 600;
        }
        .badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; }
        .badge-active { background: rgba(134,197,99,0.12); color: var(--status-success); border: 1px solid rgba(134,197,99,0.25); }
        .badge-active::before { background: var(--status-success); }
        .badge-inactive { background: rgba(150,140,130,0.1); color: var(--text-tertiary); border: 1px solid var(--border-subtle); }
        .badge-inactive::before { background: var(--text-tertiary); }
        .badge-admin { background: rgba(200,169,126,0.12); color: var(--accent-gold); border: 1px solid rgba(200,169,126,0.25); }
        .badge-admin::before { background: var(--accent-gold); }
        .badge-vendor { background: rgba(184,133,122,0.12); color: var(--accent-rose); border: 1px solid rgba(184,133,122,0.25); }
        .badge-vendor::before { background: var(--accent-rose); }
        .badge-used { background: rgba(100,130,180,0.12); color: var(--status-info); border: 1px solid rgba(100,130,180,0.25); }
        .badge-used::before { background: var(--status-info); }
        .badge-expired { background: rgba(184,133,122,0.12); color: var(--accent-rose); border: 1px solid rgba(184,133,122,0.25); }
        .badge-expired::before { background: var(--accent-rose); }

        /* ── 操作按鈕 ───────────────────────────────── */
        .action-btn {
            padding: 4px 10px; font-size: 0.72rem; letter-spacing: 0.06em;
            border-radius: var(--radius-soft); border: 1px solid var(--border-subtle);
            background: none; cursor: pointer; color: var(--text-tertiary);
            transition: all 0.2s; position: relative; overflow: hidden;
        }
        .action-btn::before {
            content: ''; position: absolute;
            top: 50%; left: 50%; width: 0; height: 0;
            background: var(--ripple); border-radius: 50%;
            transform: translate(-50%,-50%); transition: width 0.4s, height 0.4s, opacity 0.4s;
            opacity: 0;
        }
        .action-btn:hover::before { width: 120px; height: 120px; opacity: 1; }
        .action-btn:hover { color: var(--text-primary); border-color: var(--border-medium); }
        .action-btn.danger:hover { color: var(--accent-rose); border-color: rgba(184,133,122,0.4); }
        .action-btn.primary:hover { color: var(--accent-gold); border-color: rgba(200,169,126,0.4); }
        .action-btns { display: flex; gap: 6px; flex-wrap: wrap; }

        /* ── 生成序號表單 ───────────────────────────── */
        .gen-form {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 16px; margin-bottom: 20px;
        }
        .form-field { display: flex; flex-direction: column; gap: 6px; }
        .form-label {
            font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
            color: var(--text-tertiary);
        }
        .form-input, .form-select {
            background: var(--bg-elevated);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-soft);
            padding: 9px 14px; font-size: 0.85rem;
            color: var(--text-primary); outline: none;
            transition: border-color 0.2s;
            font-family: 'Noto Sans TC', sans-serif;
        }
        .form-input:focus, .form-select:focus { border-color: rgba(200,169,126,0.4); }
        .form-select { cursor: pointer; }

        /* ── 主按鈕 ─────────────────────────────────── */
        .btn-primary {
            padding: 10px 28px; font-size: 0.82rem;
            letter-spacing: 0.12em; text-transform: uppercase;
            background: linear-gradient(135deg, rgba(200,169,126,0.15) 0%, rgba(184,133,122,0.12) 100%);
            border: 1px solid rgba(200,169,126,0.35);
            border-radius: var(--radius-soft); cursor: pointer;
            color: var(--accent-gold); transition: all 0.3s;
            position: relative; overflow: hidden;
        }
        .btn-primary::before {
            content: ''; position: absolute;
            top: 50%; left: 50%; width: 0; height: 0;
            background: rgba(200,169,126,0.15); border-radius: 50%;
            transform: translate(-50%,-50%); transition: width 0.5s, height 0.5s, opacity 0.5s; opacity: 0;
        }
        .btn-primary:hover::before { width: 300px; height: 300px; opacity: 1; }
        .btn-primary:hover { border-color: rgba(200,169,126,0.6); }
        .btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }

        .btn-secondary {
            padding: 9px 20px; font-size: 0.78rem;
            letter-spacing: 0.1em;
            background: none; border: 1px solid var(--border-medium);
            border-radius: var(--radius-soft); cursor: pointer;
            color: var(--text-secondary); transition: all 0.2s;
        }
        .btn-secondary:hover { color: var(--text-primary); border-color: var(--border-medium); }

        /* ── 新增廠商 Modal ─────────────────────────── */
        .modal-overlay {
            display: none; position: fixed; inset: 0; z-index: 200;
            background: var(--scrim);
            backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
            align-items: center; justify-content: center; padding: 20px;
        }
        .modal-overlay.open { display: flex; }
        .modal-box {
            background: var(--bg-card);
            border: 1px solid var(--border-medium);
            border-radius: var(--radius-medium);
            padding: 32px; width: 100%; max-width: 560px;
            max-height: 90vh; overflow-y: auto;
        }
        .modal-title {
            font-family: 'Cormorant Garamond', serif;
            font-size: 1.3rem; font-weight: 500;
            color: var(--text-primary); margin-bottom: 24px;
            letter-spacing: 0.06em;
        }
        .modal-form { display: flex; flex-direction: column; gap: 16px; }
        .modal-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
        .modal-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 8px; }
        .modal-textarea {
            background: var(--bg-elevated);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-soft);
            padding: 10px 14px; font-size: 0.82rem;
            color: var(--text-primary); outline: none;
            resize: vertical; min-height: 80px;
            transition: border-color 0.2s;
            font-family: 'Noto Sans TC', sans-serif; line-height: 1.6;
        }
        .modal-textarea:focus { border-color: rgba(200,169,126,0.4); }

        /* ── 序號生成結果 ───────────────────────────── */
        .keys-result {
            display: none; margin-top: 16px;
            background: var(--bg-elevated);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-soft);
            padding: 16px;
        }
        .keys-result.show { display: block; }
        .keys-result-header {
            display: flex; justify-content: space-between; align-items: center;
            margin-bottom: 12px;
        }
        .keys-result-title { font-size: 0.78rem; color: var(--text-tertiary); letter-spacing: 0.1em; text-transform: uppercase; }
        .keys-actions { display: flex; gap: 8px; }
        .keys-list {
            font-family: 'Courier New', monospace; font-size: 0.85rem;
            color: var(--accent-gold); letter-spacing: 0.05em;
            line-height: 2; max-height: 220px; overflow-y: auto;
        }

        /* ── 統計數字 ───────────────────────────────── */
        .stats-row {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 12px; margin-bottom: 24px;
        }
        .stat-card {
            background: var(--bg-elevated);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-soft);
            padding: 16px 20px;
        }
        .stat-label { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 6px; }
        .stat-num { font-family: 'Cormorant Garamond', serif; font-size: 1.8rem; color: var(--accent-gold); line-height: 1; }

        /* ── 空狀態 ─────────────────────────────────── */
        .empty-state {
            text-align: center; padding: 48px 20px;
            color: var(--text-tertiary); font-size: 0.82rem;
        }
        .empty-state i { font-size: 2rem; margin-bottom: 12px; display: block; opacity: 0.4; }

        /* ── 骨架 ───────────────────────────────────── */
        .skeleton {
            background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--skeleton-lo) 50%, var(--bg-elevated) 75%);
            background-size: 200% 100%; border-radius: var(--radius-soft);
            animation: shimmer 1.4s infinite;
        }
        @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
        .skeleton-row { height: 44px; margin-bottom: 8px; }

        /* ── Toast ──────────────────────────────────── */
        .toast-container {
            position: fixed; bottom: 24px; right: 24px; z-index: 300;
            display: flex; flex-direction: column; gap: 10px;
        }
        .toast {
            padding: 12px 18px; border-radius: var(--radius-soft);
            font-size: 0.82rem; max-width: 320px;
            animation: toastIn 0.3s ease;
            border: 1px solid;
        }
        .toast-success { background: rgba(134,197,99,0.1); border-color: rgba(134,197,99,0.3); color: var(--status-success); }
        .toast-error { background: rgba(184,133,122,0.1); border-color: rgba(184,133,122,0.3); color: var(--accent-rose); }
        .toast-info { background: rgba(200,169,126,0.1); border-color: rgba(200,169,126,0.3); color: var(--accent-gold); }
        @keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        /* ── Checkbox ───────────────────────────────── */
        .check-all, .check-row {
            width: 16px; height: 16px; cursor: pointer;
            accent-color: var(--accent-gold);
        }

        /* ── 搜尋框 icon ────────────────────────────── */
        .search-wrap { position: relative; flex: 1; min-width: 200px; }
        .search-wrap i {
            position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
            font-size: 0.75rem; color: var(--text-tertiary); pointer-events: none;
        }
        .search-wrap .filter-input { padding-left: 32px; }

        /* ── 分頁 ───────────────────────────────────── */
        .pagination {
            display: flex; gap: 6px; justify-content: center; margin-top: 20px;
        }
        .page-btn {
            width: 32px; height: 32px; border-radius: var(--radius-soft);
            display: flex; align-items: center; justify-content: center;
            background: none; border: 1px solid var(--border-subtle);
            cursor: pointer; font-size: 0.78rem; color: var(--text-tertiary);
            transition: all 0.2s;
        }
        .page-btn:hover, .page-btn.active {
            color: var(--accent-gold); border-color: rgba(200,169,126,0.4);
            background: rgba(200,169,126,0.08);
        }

        /* ── 多選操作列 ─────────────────────────────── */
        .bulk-bar {
            display: none; align-items: center; gap: 12px;
            padding: 10px 16px; margin-bottom: 12px;
            background: rgba(200,169,126,0.08);
            border: 1px solid rgba(200,169,126,0.2);
            border-radius: var(--radius-soft);
            font-size: 0.82rem; color: var(--accent-gold);
        }
        .bulk-bar.show { display: flex; }
        .bulk-count { font-weight: 600; }

        @media (max-width: 640px) {
            .main-wrap { padding: 72px 16px 48px; }
            /* Tab 列橫向捲動：10 個 tab 不再硬擠一排把字壓成直排 */
            .tab-nav {
                overflow-x: auto; -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
            }
            .tab-nav::-webkit-scrollbar { display: none; }
            .tab-btn {
                padding: 10px 14px; font-size: 0.78rem;
                flex: 0 0 auto; white-space: nowrap;
            }
            .gen-form { grid-template-columns: 1fr; }
            .modal-row { grid-template-columns: 1fr; }
            .stats-row { grid-template-columns: repeat(2, 1fr); }
            /* 表格改橫向捲動（外層容器已有 overflow-x:auto），
               不再隱藏第 4 欄以後 —— 手機也要看得到完整欄位與操作按鈕 */
            .data-table { min-width: 640px; }
        }

/* ── 手機效能優化 ─────────────────────────────────────
   手機 GPU 無法負荷 fractalNoise + blur(130px) 動畫
   手機版：關閉顆粒紋理、降低光暈模糊、停止浮動動畫
──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* 最耗效能：SVG fractalNoise 顆粒紋理直接關閉 */
  .bg-grain { display: none !important; }

  /* 光暈圓圈：blur 130px → 30px，停止浮動動畫 */
  .bg-patch, .bp {
    filter: blur(30px) !important;
    animation: none !important;
  }

  /* 城市頁旋轉環：停止動畫 */
  .cuisine-ring, .cuisine-ring-2, .cuisine-ring-3,
  .hero-emblem { animation: none !important; }

  /* 導覽列毛玻璃：降低 blur 減輕 GPU */
  .nav-bar, .topbar, .navbar {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }
}