/* ==========================================================================
        1. 全域變數與基礎樣式 (Theme Variables & Base Styles)
        ========================================================================== */
        :root {
            --bg-main: #0b0f19;
            --bg-container: #0f1a2c;
            --bg-card: #1b2a47;
            --bg-card-hover: #203358;
            --bg-filter: #14223d;
            --border-card: #25395c;
            --border-filter: #1e2f4f;
            --color-red: #ff2226;
            --color-red-dark: #9c2226;
            --color-yellow: #fde047;
            --text-white: #ffffff;
            --text-slate: #cbd5e1;
            --text-muted: #94a3b8;
        }

        body {
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            background-color: var(--bg-main);
            color: var(--text-white);
            margin: 0;
            box-sizing: border-box;
        }

        *, *:before, *:after {
            box-sizing: border-box;
        }

        button:focus {
            outline:none;
            outline: none;
        }


        /* 頂部管理導覽列 */
        .app-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: var(--bg-container);
            border-bottom: 1px solid #1e2f4f;
            padding: 16px 24px;
            margin-bottom: 24px;
            border-radius: 12px;
            max-width: 1400px;
            margin: 0 auto 20px;
        }

        .header-left { display: flex; align-items: center; gap: 18px; }
        .logo-box img {width:120px; }


        @media (max-width: 768px) {
         .header-left {margin: 0 0 20px;}
         .app-header { flex-direction: column; }
        }


  



        .header-title h1 {
            font-size: 20px;
            margin: 0;
            font-weight: 700;
        }

        .header-title p {
            font-size: 11px;
            color: var(--text-muted);
            margin: 4px 0 0 0;
        }

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

        /* 未啟用證照狀態控制 */
        .display-toggle {
            display: flex;
            align-items: center;
            gap: 8px;
            background-color: #090f1a;
            padding: 6px 12px;
            border-radius: 8px;
            border: 1px solid var(--border-card);
        }

        .toggle-label {
            font-size: 11px;
            color: var(--text-muted);
            font-weight: bold;
        }

        .toggle-btn-group {
            display: flex;
            gap: 4px;
        }

        .toggle-btn {
            background-color: #1b2a47;
            color: var(--text-slate);
            border: none;
            font-size: 11px;
            font-weight: bold;
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .toggle-btn.active {
            background-color: var(--color-red);
            color: var(--text-white);
        }

        /* ==========================================================================
           2. 主容器與篩選器區塊 (Roadmap Container & Filters)
           ========================================================================== */
        .roadmap-container {
            max-width: 1400px;
            margin: 0 auto 60px;
            background-color: var(--bg-container);
            border: 1px solid var(--border-card);
            border-radius: 16px;
            padding: 24px;
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
        }

        /* 表格上方的全新標籤篩選器 */
        .filter-section {
            background-color: var(--bg-filter);
            border: 1px solid var(--border-filter);
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 24px;
            position: sticky; top:0px; z-index: 99;
        }

        .filter-row {
            margin-bottom: 16px;
        }

        .filter-row:last-child {
            margin-bottom: 0;
            padding-top: 16px;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
        }

        .filter-row-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }

        .filter-row-title {
            font-size: 18px;
            font-weight: 800;
            color: var(--color-red);
            letter-spacing: 1px;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .reset-link {
            font-size: 16;
            color: var(--text-muted);
            text-decoration: none;
            font-weight: bold;
            cursor: pointer;
            background: none;
            border: none;
            padding: 0;
            transition: color 0.3s;
        }

        .reset-link:hover {
            color: var(--color-red);
            text-decoration: underline;
        }

        /* 標籤按鈕排列 */
        .pills-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .pill {
            background-color: var(--bg-container);
            color: var(--text-slate);
            border: 1px solid var(--border-card);
            border-radius: 20px;
            padding: 6px 14px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .pill:hover {
            background-color: var(--bg-card);
            color: var(--text-white);
        }

        .pill.active {
            background-color: var(--color-red);
            color: var(--text-white);
            border-color: var(--color-red);
            box-shadow: 0 4px 12px rgba(235, 35, 39, 0.25);
        }

        /* --------------------------------------------------------------------------
           響應式展示切換 (Responsive Filter Section Toggles & Mobile Dropdowns)
           -------------------------------------------------------------------------- */
        .mobile-filter-wrapper {
            display: block;
        }

        .desktop-filter-wrapper {
            display: none;
        }

        @media (min-width: 768px) {
            .mobile-filter-wrapper {
                display: none;
            }
            .desktop-filter-wrapper {
                display: block;
            }
        }

        .mobile-filter-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-bottom: 16px;
        }

        .mobile-filter-group:last-child {
            margin-bottom: 0;
        }

        .mobile-filter-label {
            font-size: 11px;
            font-weight: 800;
            color: var(--color-red);
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .mobile-select {
            width: 100%;
            background-color: var(--bg-container);
            color: var(--text-white);
            border: 1px solid var(--border-card);
            border-radius: 8px;
            padding: 12px 16px;
            font-size: 13px;
            font-weight: 600;
            appearance: none;
            -webkit-appearance: none;
            cursor: pointer;
            outline: none;
            transition: border-color 0.3s;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 16px center;
            background-size: 16px;
        }

        .mobile-select:focus {
            border-color: var(--color-red);
        }

        /* ==========================================================================
           3. 六縱列網格矩陣 (6-Column Matrix Grid)
           ========================================================================== */
        .matrix-grid {
            display: grid;
            grid-template-columns: repeat(1, minmax(0, 1fr));
            gap: 16px;
        }

        /* 響應式佈局：大螢幕時自動擴展為一排 6 個邏輯欄位 */
        @media (min-width: 640px) {
            .matrix-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        }
        @media (min-width: 1024px) {
            .matrix-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        }
        @media (min-width: 1280px) {
            .matrix-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
            .col-span-2 { grid-column: span 2; }
        }

        /* 縱向軌道外觀 */
        .grid-column {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        /* 跨雙縱列容器在全尺寸下也需維持 Flex Gap，確保標頭與下方卡片對齊完美一致 */
        .col-span-2 {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .column-header {
            border-top: 4px solid var(--color-red);
            padding-top: 12px;
            margin-bottom: 4px;
            min-height: 80px; /* 統一標頭高度 */
            display: flex;
            flex-direction: column;
        }

        .column-title {
            font-size: 16px;
            font-weight: 800;
            color: var(--text-white);
            /* text-transform: uppercase; */
            margin: 0;
            letter-spacing: 0.5px;
        }

        .column-subtitle {
            font-size: 14px;
            color: var(--text-muted);
            margin: 4px 0 0 0;
        }

        /* ==========================================================================
           4. 證照卡片設計與動畫 (Certification Cards & Interactive States)
           ========================================================================== */
        .cert-card {
            background-color: var(--bg-card);
            border: 1px solid var(--border-card);
            border-radius: 8px;
            padding: 16px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            position: relative;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .cert-card:hover {
            background-color: var(--bg-card-hover);
            border: 1px solid var(--border-card);
     
        }

        .cert-name {
            font-size: 16px;
            font-weight: bold;
            letter-spacing: 0.5px;
        }

        .cert-name .vertical-bar {
            color: var(--color-red);
            font-weight: bold;
            margin: 0 1px;
        }

        .cert-info {
            font-size: 14px;
            color: var(--text-slate);
            line-height: 1.4;
        }

        .cert-footer {
            text-align: right;
            margin-top: auto;
            padding-top: 2px;
        }

        .cert-link {
            font-size: 12px;
            font-weight: bold;
            color: var(--text-muted);
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .cert-link:hover {
            color: var(--text-white);
            text-decoration: underline;
        }

        /* --- 互動篩選狀態 (純 CSS 狀態切換) --- */
        
        /* 1. 半透明淡出模式 */
        .cert-card.dimmed {
            opacity: 0.7;
            filter: grayscale(20%);
            pointer-events: none;
        }

        /* 2. 完全隱藏模式 */
        .cert-card.hidden {
            display: none !important;
        }

        /* 3. 證照高亮狀態（對照紅底白字） */
        .cert-card.highlighted {
            background-color: var(--color-red-dark);
            border-color: var(--color-red);
            transform: scale(1.02);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
        }

        .cert-card.highlighted .cert-info {
            color: var(--text-white);
        }

        .cert-card.highlighted .cert-link {
            color: var(--color-yellow);
        }

        .cert-card.highlighted .cert-link:hover {
            color: var(--text-white);
        }

        /* 雙子縱欄架構 */
        .sub-columns-container {
            display: grid;
            grid-template-columns: 1fr;
            gap: 16px;
        }
        @media (min-width: 1280px) {
            .sub-columns-container {
                grid-template-columns: 1fr 1fr;
            }
        }