/* ═══════════════════════════════════════════════════════════════
 * tweasy 共用樣式 — 台股覆盤 / 大A覆盤 / 會員工作台 三站共用
 *
 * ★ 2026-09-24 抽出：原本 finpilot/index.html 與 cneasy/index.html
 *   各自內嵌一份完全相同的 CSS（去註解後 md5 一致，共 13,986 字元），
 *   改 bug 要改兩次、改版容易不同步。
 *
 * ★ 驗證方式：抽出後 finpilot/cneasy 渲染結果必須與抽出前逐像素相同。
 *   若某站需要覆寫，寫在該站自己的 <style> 區塊（後載入優先）。
 * ═══════════════════════════════════════════════════════════════ */
* { box-sizing: border-box; margin: 0; padding: 0; }
        body {
            background-color: #0d1117;
            color: #c9d1d9;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
            min-height: 100vh;
        }
        /* 登入遮罩 */
        #auth-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: #0d1117; z-index: 9999;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
        }
        .login-box {
            background: #161b22; border: 1px solid #30363d; border-radius: 8px;
            padding: 32px; width: 340px; text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,0.5);
        }
        .login-box h2 { margin-bottom: 20px; color: #58a6ff; font-size: 20px; }
        .login-box input {
            width: 100%; padding: 10px 12px; margin-bottom: 12px; background: #0d1117;
            border: 1px solid #30363d; border-radius: 6px; color: #fff; font-size: 14px;
        }
        .login-box button {
            width: 100%; padding: 10px; background: #238636; border: none; border-radius: 6px;
            color: #fff; font-weight: bold; cursor: pointer; font-size: 14px;
        }
        .login-box button:hover { background: #2ea043; }
        .login-err { color: #f85149; font-size: 12px; margin-top: 10px; display: none; line-height: 1.4; }

        .header {
            background: #161b22; border-bottom: 1px solid #30363d;
            padding: 8px 16px;
            display: flex; flex-direction: column; gap: 8px;
            position: sticky; top: 0; z-index: 100;
        }
        .navbar-top-row {
            display: flex; justify-content: space-between; align-items: center; width: 100%;
        }
        .navbar {
            display: flex; align-items: center; justify-content: space-between;
            background: #161b22; border-bottom: 1px solid #30363d;
            padding: 8px 16px; gap: 12px;
        }
        .brand { font-size: 17px; font-weight: bold; color: #58a6ff; display: flex; align-items: center; gap: 8px; white-space: nowrap; flex-shrink: 0; }
        .tabs {
            display: flex; gap: 6px; overflow-x: auto; padding: 4px 0;
            -webkit-overflow-scrolling: touch; scrollbar-width: none; flex-shrink: 1; min-width: 0;
        }
        .tabs::-webkit-scrollbar { display: none; }
        .tab-btn {
            background: #21262d; border: 1px solid #30363d; color: #c9d1d9;
            padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 500;
            white-space: nowrap; transition: all 0.15s; flex-shrink: 0;
        }
        .tab-btn:hover { background: #30363d; color: #fff; }
        .tab-btn.active { background: #1f6feb; color: #fff; border-color: #58a6ff; }
        .user-info { display: flex; align-items: center; gap: 12px; font-size: 12px; color: #8b949e; white-space: nowrap; flex-shrink: 0; }
        .logout-btn {
            background: #30363d; border: none; color: #c9d1d9; padding: 4px 10px;
            border-radius: 4px; cursor: pointer; font-size: 12px;
        }

        /* 手機端導航：漢堡按鈕與下拉選單 */
        .mobile-nav-toggle {
            display: none;
            background: #21262d;
            border: 1px solid #30363d;
            color: #58a6ff;
            font-size: 14px;
            font-weight: bold;
            padding: 6px 12px;
            border-radius: 6px;
            cursor: pointer;
            align-items: center;
            gap: 6px;
            white-space: nowrap;
        }
        .mobile-nav-toggle:hover { background: #30363d; }
        
        .mobile-nav-drawer {
            display: none;
            position: fixed;
            top: 50px;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(13, 17, 23, 0.95);
            backdrop-filter: blur(8px);
            z-index: 9999;
            padding: 16px;
            overflow-y: auto;
            flex-direction: column;
            gap: 10px;
        }
        .mobile-nav-drawer.open {
            display: flex !important;
        }
        .mobile-nav-drawer .tab-btn {
            font-size: 15px !important;
            padding: 12px 16px !important;
            text-align: left !important;
            border-radius: 8px !important;
            background: #21262d !important;
            border: 1px solid #30363d !important;
            width: 100% !important;
        }
        .mobile-nav-drawer .tab-btn.active {
            background: #1f6feb !important;
            border-color: #58a6ff !important;
            color: #fff !important;
        }

        /* 手機端 RWD 適配 (寬度 <= 768px) */
        @media (max-width: 768px) {
            .navbar {
                padding: 8px 10px;
            }
            .header {
                padding: 8px 10px;
            }
            /* 手機直拿時：隱藏橫向平鋪 tabs，顯示漢堡選單按鈕 */
            .tabs {
                display: none !important;
            }
            .mobile-nav-toggle {
                display: inline-flex !important;
            }
            #mkt-status-badge {
                max-width: 180px;
                font-size: 11px;
                padding: 3px 8px;
            }
            .search-box-wrap input {
                width: 120px !important;
            }
        }

        /* 模組 1: 板塊輪動 (左側垂直標籤 + 頂部控制列 + 矩陣) */
        .matrix-layout {
            display: flex; gap: 16px; align-items: flex-start;
        }
        .sidebar-subtabs {
            display: flex; flex-direction: column; gap: 8px; width: 110px; flex-shrink: 0;
        }
        .subtab-btn {
            background: #21262d; border: 1px solid #30363d; color: #c9d1d9;
            padding: 12px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600;
            text-align: center; line-height: 1.4; transition: all 0.15s;
        }
        .subtab-btn:hover { background: #30363d; color: #fff; }
        .subtab-btn.active { background: #58a6ff; color: #0d1117; border-color: #58a6ff; font-weight: bold; }

        .matrix-main {
            flex-grow: 1; overflow-hidden: true; min-width: 0;
        }
        .matrix-controls {
            display: flex; gap: 12px; align-items: center; margin-bottom: 12px;
        }
        .sort-select {
            background: #21262d; border: 1px solid #30363d; color: #f0f6fc; padding: 6px 12px;
            border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer;
        }
        .ctrl-btn {
            background: #1f6feb; border: none; color: #fff; width: 30px; height: 30px;
            border-radius: 50%; display: flex; align-items: center; justify-content: center;
            cursor: pointer; font-size: 14px;
        }
        .ctrl-btn:hover { background: #388bfd; }

        /* ★2026-10-12 法人資金模組：近 10 個交易日歷史切換下拉選單（黑金風格） */
        .chip-history-select {
            display: none;                      /* 只有切到「法人資金」維度才顯示 */
            margin-left: auto;
            background: #161b22;
            border: 1px solid #d29922;
            border-radius: 6px;
            padding: 6px 12px;
            font-size: 13px;
            font-weight: 600;
            color: #d29922;
            cursor: pointer;
            outline: none;
        }
        .chip-history-select:hover,
        .chip-history-select:focus {
            border-color: #f0b429;
            color: #f0b429;
            box-shadow: 0 0 6px rgba(210, 153, 34, 0.45);
        }
        .chip-history-select option {
            background: #161b22;
            color: #d29922;
        }
        .chip-leader-cell { font-size: 12px; color: #8b949e; }
        .chip-leader-cell b { color: #f0f6fc; font-weight: 600; }
        .btn-reset {
            background: #d29922; border: none; color: #0d1117; padding: 6px 14px;
            border-radius: 20px; font-weight: bold; cursor: pointer; font-size: 12px;
            display: flex; align-items: center; gap: 4px;
        }

        /* 通用卡片與表格樣式 */
        .card-panel {
            background: #161b22; border: 1px solid #30363d; border-radius: 8px; padding: 18px; margin-bottom: 20px;
        }
        .panel-title {
            font-size: 15px; font-weight: bold; color: #f0f6fc; margin-bottom: 14px;
            display: flex; justify-content: space-between; align-items: center;
        }
        .table-wrap {
            overflow-x: auto; background: #161b22; border: 1px solid #30363d; border-radius: 8px;
        }
        table { width: 100%; border-collapse: collapse; font-size: 12px; }
        th {
            background: #21262d; padding: 10px 8px; border-bottom: 2px solid #30363d;
            color: #8b949e; font-weight: 600; white-space: nowrap; text-align: center;
        }
        td {
            padding: 8px; border-bottom: 1px solid #21262d; border-right: 1px solid #21262d;
            vertical-align: top; min-width: 135px;
        }
        .rank-col {
            background: #0d1117; font-weight: bold; color: #8b949e; width: 45px; text-align: center;
        }
        .cell-card {
            background: #21262d; border-radius: 6px; padding: 8px 10px;
            transition: all 0.15s ease-in-out; cursor: pointer; border: 1px solid #30363d;
        }
        .cell-card:hover {
            border-color: #58a6ff; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.4);
            background: #282e36;
        }
        .card-title { font-size: 13px; font-weight: 600; color: #f0f6fc; margin-bottom: 4px; }
        .card-stat { font-size: 11px; display: flex; justify-content: space-between; align-items: center; }
        .lu-tag {
            background: rgba(248, 81, 73, 0.2); color: #f85149; padding: 1px 5px;
            border-radius: 4px; font-weight: bold;
        }
        .lu-zero { color: #8b949e; }
        .up { color: #f85149; font-weight: 600; }
        .down { color: #3fb950; font-weight: 600; }
        .badge {
            background: #21262d; color: #8b949e; border: 1px solid #30363d;
            padding: 1px 6px; border-radius: 4px; font-size: 11px; margin-right: 4px;
        }
        .leader {
            margin-top: 5px; font-size: 10px; color: #8b949e; border-top: 1px dashed #30363d;
            padding-top: 3px; display: flex; justify-content: space-between;
        }

        /* 數據列表表格 (情緒/漲停/炸板/核心) */
        .data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
        .data-table th { background: #21262d; padding: 10px 12px; text-align: left; color: #8b949e; font-weight: 600; border-bottom: 2px solid #30363d; }
        .data-table td { padding: 10px 12px; border-bottom: 1px solid #21262d; text-align: left; vertical-align: middle; }
        .data-table tr:hover td { background: #1c2128; }

        /* 連板梯隊 (對齊 Easy復盤 金字塔連板天梯階梯式樣式) */
        .easy-ladder-wrap {
            display: flex; flex-direction: column; gap: 14px; max-width: 1050px; margin: 0 auto;
        }
        .easy-ladder-row {
            display: flex; align-items: stretch; background: #161b22; border: 1px solid #30363d;
            border-radius: 8px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            transition: transform 0.2s ease, border-color 0.2s ease;
        }
        .easy-ladder-row:hover {
            transform: translateY(-2px); border-color: #58a6ff;
        }
        .ladder-tier-badge-col {
            width: 140px; min-width: 140px; display: flex; flex-direction: column;
            justify-content: center; align-items: center; padding: 12px;
            color: #fff; font-weight: 800; text-align: center; border-right: 1px solid #30363d;
        }
        .tier-bg-high { background: linear-gradient(135deg, #da3633 0%, #b62324 100%); }
        .tier-bg-mid { background: linear-gradient(135deg, #d29922 0%, #bb8009 100%); }
        .tier-bg-low { background: linear-gradient(135deg, #1f6feb 0%, #1158c7 100%); }
        .tier-bg-base { background: linear-gradient(135deg, #238636 0%, #1a6328 100%); }

        .ladder-stocks-flow {
            flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 16px;
            background: #0d1117;
        }
        .easy-stock-card {
            background: #161b22; border: 1px solid #30363d; border-radius: 6px;
            padding: 8px 12px; display: flex; flex-direction: column; gap: 4px;
            cursor: pointer; transition: all 0.2s ease; min-width: 160px;
        }
        .easy-stock-card:hover {
            background: #21262d; border-color: #58a6ff; transform: scale(1.03);
        }
        .easy-stock-title {
            display: flex; justify-content: space-between; align-items: center;
        }
        .easy-stock-name {
            font-weight: bold; color: #f0f6fc; font-size: 13px;
        }
        .easy-stock-price {
            font-size: 12px; font-weight: bold; color: #f85149;
        }
        .easy-stock-concept {
            display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px;
        }

        /* 題材生命週期天數小徽章 */
        .lifecycle-badge {
            font-size: 10px; padding: 1px 5px; border-radius: 4px; font-weight: bold;
            display: inline-flex; align-items: center; gap: 2px;
        }
        .lc-day1 { background: rgba(63, 185, 80, 0.2); color: #3fb950; border: 1px solid rgba(63, 185, 80, 0.4); }
        .lc-day23 { background: rgba(88, 166, 255, 0.2); color: #58a6ff; border: 1px solid rgba(88, 166, 255, 0.4); }
        .lc-day4plus { background: rgba(248, 81, 73, 0.2); color: #f85149; border: 1px solid rgba(248, 81, 73, 0.4); }

        /* 板塊卡片高亮反白特效 (同題材連動) */
        .cell-card.highlighted {
            background: #f0f6fc !important;
            border-color: #58a6ff !important;
            box-shadow: 0 0 14px rgba(88, 166, 255, 0.9) !important;
            transform: scale(1.04);
            transition: all 0.2s ease;
            position: relative;
        }
        .cell-card.highlighted .card-title {
            color: #0d1117 !important;
            font-weight: 800 !important;
        }
        .cell-card.highlighted .card-stat,
        .cell-card.highlighted .leader span {
            color: #24292f !important;
        }
        .cell-card.highlighted .up {
            color: #cf222e !important;
        }
        .cell-card.highlighted .down {
            color: #1a7f37 !important;
        }

        /* 題材持續天數浮動通知條 */
        #concept-days-banner {
            position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
            background: #1f6feb; color: #fff; padding: 10px 24px; border-radius: 30px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.6); font-size: 14px; font-weight: bold;
            display: none; z-index: 1000; align-items: center; gap: 12px;
            border: 1px solid rgba(255,255,255,0.2); animation: slideUp 0.3s ease;
        }
        @keyframes slideUp {
            from { bottom: 0; opacity: 0; }
            to { bottom: 20px; opacity: 1; }
        }

        /* Modal */
        #admin-modal, #modal-overlay, #stock-modal {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.75); z-index: 1000; display: none;
            justify-content: center; align-items: center;
        }

        /* 個股主頁彈窗專用樣式 */
        .stock-modal-header {
            display: flex; justify-content: space-between; align-items: center;
            border-bottom: 1px solid #30363d; padding-bottom: 12px; margin-bottom: 16px;
        }
        .stock-tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 16px 0; }
        .kline-canvas-container {
            position: relative; width: 100%; height: 260px;
            background: #0d1117; border-radius: 6px; border: 1px solid #30363d;
            margin-bottom: 8px;
        }
        #kline-canvas { width: 100%; height: 100%; display: block; }
        .kline-tooltip {
            position: absolute; top: 8px; left: 12px; font-size: 12px; color: #c9d1d9;
            pointer-events: none; background: rgba(22, 27, 34, 0.85); padding: 4px 8px;
            border-radius: 4px; border: 1px solid #30363d; display: flex; gap: 12px;
        }
        .modal-card {
            background: #161b22; border: 1px solid #30363d; border-radius: 8px;
            width: 720px; max-height: 85vh; display: flex; flex-direction: column;
            box-shadow: 0 12px 32px rgba(0,0,0,0.8);
        }
        .modal-header {
            padding: 16px 20px; border-bottom: 1px solid #30363d; display: flex;
            justify-content: space-between; align-items: center;
        }
        .modal-header h3 { color: #58a6ff; font-size: 16px; }
        .close-btn { background: none; border: none; color: #8b949e; font-size: 22px; cursor: pointer; }
        .modal-body { padding: 20px; overflow-y: auto; }
        .admin-form {
            display: flex; gap: 10px; margin-bottom: 20px; background: #21262d; padding: 14px;
            border-radius: 6px; border: 1px solid #30363d; align-items: flex-end;
        }
        .form-group { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #8b949e; }
        .form-group input {
            padding: 8px 10px; background: #0d1117; border: 1px solid #30363d; border-radius: 4px;
            color: #fff; font-size: 13px;
        }
        .btn-add {
            padding: 8px 16px; background: #238636; border: none; border-radius: 4px;
            color: #fff; font-weight: bold; cursor: pointer; height: 35px;
        }
        .btn-add:hover { background: #2ea043; }
        .btn-del {
            background: #da3633; border: none; color: #fff; padding: 3px 8px; border-radius: 4px;
            cursor: pointer; font-size: 11px;
        }

        /* ====== 手機版響應式介面 (RWD) ====== */
        @media (max-width: 768px) {
            .container { padding: 10px; }
            .header h1 { font-size: 18px; }
            .header .tagline { font-size: 10px; }
            .tabs {
                overflow-x: auto; white-space: nowrap; gap: 0;
                justify-content: flex-start; padding-bottom: 8px;
                -webkit-overflow-scrolling: touch;
            }
            .tab-btn { flex: 0 0 auto; font-size: 13px; padding: 10px 12px; }

            /* 板塊輪動：左側標籤改為頂部橫向捲動 */
            .matrix-layout { flex-direction: column; gap: 10px; }
            .sidebar-subtabs {
                flex-direction: row; width: 100%; overflow-x: auto; gap: 8px;
                -webkit-overflow-scrolling: touch;
            }
            .subtab-btn { flex: 0 0 auto; padding: 8px 14px; font-size: 12px; white-space: nowrap; }

            /* 控制列換行 + 可捲動 */
            .matrix-controls { flex-wrap: wrap; gap: 8px; }

            /* 表格橫向捲動，手機上可左右滑 */
            .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
            .data-table { min-width: 640px; }
            .card-panel { padding: 12px; }

            /* 情緒指標卡片改為堆疊 */
            .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
        }

        /* 超小螢幕 (手機直幅) */
        @media (max-width: 480px) {
            .container { padding: 6px; }
            .header { flex-direction: column; align-items: flex-start; gap: 6px; }
            .user-info { margin-left: 0; font-size: 11px; }
            .stat-grid { grid-template-columns: 1fr; }
            .badge { font-size: 10px; padding: 2px 6px; }
        }