:root {
            color-scheme: light;
            --surface: rgba(255, 255, 255, 0.96);
            --surface-dark: rgba(236, 253, 245, 0.92);
            --bg-gradient: linear-gradient(145deg, #f3fffc 0%, #effdfa 48%, #ffffff 100%);
            --primary: #0f766e;
            --primary-soft: rgba(15, 118, 110, 0.14);
            --accent: #14b8a6;
            --success: #059669;
            --danger: #dc2626;
            --card-radius: 22px;
            --shadow-lg: 0px 30px 80px -42px rgba(2, 44, 34, 0.34);
            --shadow-md: 0px 20px 50px -35px rgba(2, 44, 34, 0.28);
            --text-primary: #082f2a;
            --text-secondary: rgba(8, 47, 42, 0.72);
            --badge-bg: rgba(20, 184, 166, 0.16);
            --glass-border: rgba(148, 163, 184, 0.24);
            --surface-strong: #ffffff;
            --surface-muted: rgba(236, 253, 245, 0.78);
            --line-soft: rgba(15, 118, 110, 0.14);
        }

        @media (prefers-color-scheme: dark) {
            :root {
                color-scheme: dark;
                --surface: rgba(6, 26, 24, 0.92);
                --surface-dark: rgba(3, 15, 14, 0.96);
                --bg-gradient: radial-gradient(circle at top left, rgba(20, 184, 166, 0.22), rgba(6, 78, 59, 0.2) 28%, #020617 70%);
                --text-primary: #e6fffb;
                --text-secondary: rgba(209, 250, 244, 0.78);
                --badge-bg: rgba(20, 184, 166, 0.18);
                --glass-border: rgba(45, 212, 191, 0.18);
                --surface-strong: rgba(10, 44, 41, 0.96);
                --surface-muted: rgba(12, 74, 68, 0.42);
                --line-soft: rgba(45, 212, 191, 0.18);
            }
        }

        html,
        body {
            min-height: 100%;
        }

        body {
            font-family: "Noto Sans TC", "Segoe UI", sans-serif;
            background: var(--bg-gradient);
            background-attachment: fixed;
            color: var(--text-primary);
        }

        #app {
            flex: 1;
        }

        .login-wrapper {
            min-height: 100vh;
            display: flex;
            align-items: center;
            backdrop-filter: blur(22px);
            border-radius: calc(var(--card-radius) + 6px);
            box-shadow: var(--shadow-lg);
        }

        .floating-badge {
            background: rgba(6, 26, 24, 0.86);
            color: #fff;
            border-radius: 999px;
            padding: 0.45rem 1.2rem;
            font-size: 0.85rem;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            display: inline-flex;
            gap: 0.65rem;
        }

        .floating-badge i {
            color: var(--accent);
        }

        .hero-panel {
            background: linear-gradient(145deg, rgba(15, 118, 110, 0.14), rgba(20, 184, 166, 0.1) 36%, rgba(255, 255, 255, 0.78));
            border: 1px solid var(--glass-border);
            box-shadow: var(--shadow-md);
        }

        @media (prefers-color-scheme: dark) {
            .hero-panel {
                background: linear-gradient(145deg, rgba(15, 118, 110, 0.24), rgba(20, 184, 166, 0.12) 36%, rgba(6, 26, 24, 0.88));
            }
        }

        .content-card {
            text-decoration: none;
            color: inherit;
            display: block;
        }

        .content-card .card-body {
            background: linear-gradient(180deg, var(--surface-strong), var(--surface-muted));
            border-radius: var(--card-radius);
            box-shadow: var(--shadow-md);
            transition: transform 0.25s ease, box-shadow 0.25s ease;
            border: 1px solid var(--glass-border);
            min-height: 140px;
            padding: 1.1rem 1.35rem !important;
        }

        .content-card:hover .card-body {
            transform: translateY(-6px) scale(1.01);
            box-shadow: 0 28px 60px -20px rgba(2, 44, 34, 0.28);
        }

        .dashboard-grid {
            display: grid;
            gap: 1.5rem;
        }

        @media (min-width: 992px) {
            .dashboard-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
        }

        .stat-card {
            background: var(--surface-strong);
            color: var(--text-primary);
            border-radius: var(--card-radius);
            padding: 1.4rem 1.6rem;
            box-shadow: var(--shadow-md);
            border: 1px solid var(--glass-border);
        }

        .stat-card .label {
            font-size: 0.85rem;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            opacity: 0.7;
        }

        .stat-card .value {
            font-family: "Outfit", "Segoe UI", sans-serif;
            font-size: 2.1rem;
            font-weight: 600;
            margin: 0.25rem 0 0;
        }

        .nav-shell {
            backdrop-filter: blur(18px);
            background: rgba(255, 255, 255, 0.86);
            border-bottom: 1px solid var(--glass-border);
        }

        @media (prefers-color-scheme: dark) {
            .nav-shell {
                background: rgba(3, 15, 14, 0.8);
            }
        }

        .nav-shell .container-fluid {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
        }

        .nav-meta {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.75rem;
        }

        .nav-shell .navbar-brand {
            font-family: "Outfit", "Segoe UI", sans-serif;
            letter-spacing: 1.2px;
            display: flex;
            align-items: center;
            gap: 0.65rem;
            color: var(--text-primary);
        }

        .nav-shell .navbar-brand span {
            font-size: 0.75rem;
            font-weight: 500;
            text-transform: uppercase;
            opacity: 0.7;
        }

        .nav-actions .btn {
            border-radius: 999px;
            padding-inline: 1.1rem;
        }

        .nav-actions {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.5rem;
        }

        .nav-collapsible {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 0.75rem;
            flex: 1;
        }

        .nav-info-chips {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            flex-wrap: wrap;
        }

        .nav-toggle {
            display: none;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            border: none;
            border-radius: 12px;
            padding: 0.45rem 0.7rem;
            background: var(--primary-soft);
            color: var(--text-primary);
            font-weight: 600;
            font-size: 0.85rem;
        }

        .nav-toggle i {
            font-size: 1.05rem;
        }

        @media (max-width: 767.98px) {
            .nav-shell .container-fluid {
                display: grid;
                grid-template-columns: 1fr auto;
                align-items: center;
                gap: 0.35rem;
                width: 100%;
            }

            .nav-shell.navbar {
                padding-top: 0.65rem;
                padding-bottom: 0.65rem;
            }

            .nav-meta {
                flex-direction: row;
                align-items: center;
                gap: 0.4rem;
            }

            .nav-meta .pill {
                display: none;
            }

            .nav-toggle {
                display: inline-flex;
                justify-self: end;
                padding: 0.4rem 0.65rem;
                border-radius: 10px;
                font-size: 0.78rem;
                gap: 0.3rem;
            }

            .nav-toggle i {
                font-size: 0.9rem;
            }

            .nav-collapsible {
                grid-column: 1 / -1;
                display: flex;
                flex-direction: column;
                align-items: stretch;
                gap: 0.55rem;
            }

            .nav-info-chips {
                display: none;
                grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
                gap: 0.45rem;
            }

            .nav-shell.nav-open .nav-info-chips {
                display: grid;
            }

            .nav-info-chips .pill {
                width: 100%;
                justify-content: flex-start;
                padding: 0.4rem 0.75rem;
                font-size: 0.78rem;
                border-radius: 12px;
                background: var(--surface-muted);
            }

            .nav-actions {
                display: none;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 0.5rem;
            }

            .nav-shell.nav-open .nav-actions {
                display: grid;
            }

            .nav-actions .btn {
                width: 100%;
                border-radius: 12px;
                padding: 0.55rem 0.75rem;
                justify-content: center;
                font-size: 0.84rem;
            }
        }

        .pill {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.45rem 1.05rem;
            border-radius: 999px;
            font-size: 0.85rem;
            background: var(--primary-soft);
            color: var(--text-primary);
        }

        .pill i {
            color: var(--primary);
        }

        .text-preline {
            white-space: pre-line;
        }

        .layout-shell {
            padding: clamp(1.8rem, 2.5vw + 1rem, 3rem);
            max-width: 1200px;
            margin: 0 auto;
            width: 100%;
        }

        .detail-layout,
        .image-page-layout {
            display: flex;
            flex-direction: column;
            gap: 1.35rem;
        }

        .detail-hero,
        .image-page-hero {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-end;
            justify-content: space-between;
            gap: 1rem;
            padding: 1.4rem 1.5rem;
            border-radius: var(--card-radius);
            background: linear-gradient(135deg, rgba(15, 118, 110, 0.12), rgba(20, 184, 166, 0.12), rgba(255, 255, 255, 0.82));
            border: 1px solid var(--glass-border);
            box-shadow: var(--shadow-md);
        }

        @media (prefers-color-scheme: dark) {
            .detail-hero,
            .image-page-hero {
                background: linear-gradient(135deg, rgba(15, 118, 110, 0.18), rgba(20, 184, 166, 0.16), rgba(6, 26, 24, 0.92));
            }
        }

        .detail-hero-copy h2,
        .image-page-hero h2 {
            margin-bottom: 0.25rem;
            font-family: "Outfit", "Segoe UI", sans-serif;
            letter-spacing: 0.02em;
        }

        .detail-hero-meta {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.75rem;
        }

        .detail-grid,
        .image-page-grid {
            display: grid;
            gap: 1.35rem;
        }

        @media (min-width: 992px) {
            .detail-grid,
            .image-page-grid {
                grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
                align-items: start;
            }
        }

        .detail-panel,
        .image-editor-card,
        .preview-shell {
            background: var(--surface);
            border: 1px solid var(--glass-border);
            border-radius: var(--card-radius);
            box-shadow: var(--shadow-md);
            padding: 1.25rem;
        }

        .detail-panel-main {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .detail-panel-rail {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .panel-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 0.75rem;
        }

        .rail-card {
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(236, 253, 245, 0.44));
            border: 1px solid var(--glass-border);
            border-radius: calc(var(--card-radius) - 4px);
            padding: 1rem;
        }

        @media (prefers-color-scheme: dark) {
            .rail-card {
                background: linear-gradient(180deg, rgba(10, 44, 41, 0.84), rgba(6, 26, 24, 0.72));
            }
        }

        .detail-stats {
            display: grid;
            gap: 0.7rem;
        }

        .detail-stats li {
            display: flex;
            justify-content: space-between;
            gap: 1rem;
            padding-bottom: 0.65rem;
            border-bottom: 1px solid rgba(148, 163, 184, 0.18);
        }

        .detail-stats li:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

        .detail-stats span {
            color: var(--text-secondary);
        }

        .detail-stats strong {
            color: var(--text-primary);
            font-weight: 700;
        }

        .image-editor-fields {
            gap: 1rem;
        }

        .image-editor-footer-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 1rem;
        }

        .image-editor-textarea {
            resize: vertical;
            min-height: 180px;
        }

        .preview-shell {
            position: sticky;
            top: 1rem;
        }

        .poster-preview-wrap {
            width: 100%;
            aspect-ratio: 1 / 1;
            border-radius: 28px;
            overflow: hidden;
            background: #9a9a9a;
            border: 1px solid rgba(0, 0, 0, 0.08);
        }

        .poster-preview-canvas {
            display: block;
            width: 100%;
            height: 100%;
        }

        .table-scroll {
            max-height: min(60vh, 540px);
            overflow-y: auto;
            border-radius: var(--card-radius);
            border: 1px solid rgba(148, 163, 184, 0.2);
        }

        table.table-modern {
            color: inherit;
        }

        table.table-modern thead {
            background: rgba(20, 184, 166, 0.13);
        }

        table.table-modern tbody tr:nth-child(even) {
            background: rgba(15, 118, 110, 0.05);
        }

        .badge {
            border-radius: 999px;
            padding-inline: 0.75rem;
        }

        .text-bg-info {
            background-color: rgba(20, 184, 166, 0.16) !important;
            color: #0f766e !important;
        }

        .text-bg-success {
            background-color: rgba(5, 150, 105, 0.16) !important;
            color: #065f46 !important;
        }

        .text-bg-danger {
            background-color: rgba(220, 38, 38, 0.16) !important;
            color: #991b1b !important;
        }

        .btn-outline-primary {
            --bs-btn-color: #0f766e;
            --bs-btn-border-color: rgba(15, 118, 110, 0.45);
            --bs-btn-hover-bg: #0f766e;
            --bs-btn-hover-border-color: #0f766e;
            --bs-btn-hover-color: #ecfeff;
            --bs-btn-active-bg: #0a5f59;
            --bs-btn-active-border-color: #0a5f59;
            --bs-btn-active-color: #ecfeff;
            --bs-btn-disabled-color: #0f766e;
            --bs-btn-disabled-border-color: rgba(15, 118, 110, 0.3);
        }

        .btn-outline-info {
            --bs-btn-color: #0e7490;
            --bs-btn-border-color: rgba(14, 116, 144, 0.45);
            --bs-btn-hover-bg: #0e7490;
            --bs-btn-hover-border-color: #0e7490;
            --bs-btn-hover-color: #ecfeff;
            --bs-btn-active-bg: #155e75;
            --bs-btn-active-border-color: #155e75;
            --bs-btn-active-color: #ecfeff;
            --bs-btn-disabled-color: #0e7490;
            --bs-btn-disabled-border-color: rgba(14, 116, 144, 0.3);
        }

        .btn-outline-secondary {
            --bs-btn-color: var(--text-primary);
            --bs-btn-border-color: rgba(20, 184, 166, 0.28);
            --bs-btn-hover-bg: rgba(20, 184, 166, 0.12);
            --bs-btn-hover-border-color: rgba(20, 184, 166, 0.45);
            --bs-btn-hover-color: var(--text-primary);
            --bs-btn-active-bg: rgba(20, 184, 166, 0.16);
            --bs-btn-active-border-color: rgba(20, 184, 166, 0.5);
            --bs-btn-active-color: var(--text-primary);
            --bs-btn-disabled-color: var(--text-secondary);
            --bs-btn-disabled-border-color: rgba(20, 184, 166, 0.18);
        }

        .btn-outline-light {
            --bs-btn-color: var(--text-primary);
            --bs-btn-border-color: rgba(15, 118, 110, 0.24);
            --bs-btn-hover-bg: rgba(15, 118, 110, 0.12);
            --bs-btn-hover-border-color: rgba(15, 118, 110, 0.35);
            --bs-btn-hover-color: var(--text-primary);
            --bs-btn-active-bg: rgba(15, 118, 110, 0.16);
            --bs-btn-active-border-color: rgba(15, 118, 110, 0.42);
            --bs-btn-active-color: var(--text-primary);
            --bs-btn-disabled-color: var(--text-secondary);
            --bs-btn-disabled-border-color: rgba(15, 118, 110, 0.18);
        }

        .btn-outline-success {
            --bs-btn-color: #059669;
            --bs-btn-border-color: rgba(5, 150, 105, 0.45);
            --bs-btn-hover-bg: #059669;
            --bs-btn-hover-border-color: #059669;
            --bs-btn-hover-color: #ecfdf5;
            --bs-btn-active-bg: #047857;
            --bs-btn-active-border-color: #047857;
            --bs-btn-active-color: #ecfdf5;
            --bs-btn-disabled-color: #059669;
            --bs-btn-disabled-border-color: rgba(5, 150, 105, 0.28);
        }

        .btn-outline-danger {
            --bs-btn-color: #dc2626;
            --bs-btn-border-color: rgba(220, 38, 38, 0.42);
            --bs-btn-hover-bg: #dc2626;
            --bs-btn-hover-border-color: #dc2626;
            --bs-btn-hover-color: #fff7f7;
            --bs-btn-active-bg: #b91c1c;
            --bs-btn-active-border-color: #b91c1c;
            --bs-btn-active-color: #fff7f7;
            --bs-btn-disabled-color: #dc2626;
            --bs-btn-disabled-border-color: rgba(220, 38, 38, 0.28);
        }

        .pill-muted {
            background: rgba(20, 184, 166, 0.12);
            color: var(--primary);
            border-radius: 999px;
            padding: 0.4rem 0.9rem;
            font-size: 0.85rem;
        }

        .detail-actions .btn {
            border-radius: 999px;
        }

        .detail-nav {
            display: grid;
            gap: 0.9rem;
        }

        @media (min-width: 576px) {
            .detail-nav {
                grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            }
        }

        .detail-nav .btn {
            padding: 0.75rem 1.25rem;
            font-size: 1rem;
            border-radius: 14px;
            font-weight: 600;
            width: 100%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }

        .detail-nav .btn-prev {
            background: linear-gradient(135deg, #d9fbf5, #99f6e4);
            color: #064e3b;
            border: none;
        }

        .detail-nav .btn-prev:hover,
        .detail-nav .btn-prev:focus {
            background: linear-gradient(135deg, #a7f3d0, #5eead4);
            color: #042f2e;
        }

        .detail-nav .btn-next {
            background: linear-gradient(135deg, #14b8a6, #06b6d4);
            color: #ecfeff;
            border: none;
        }

        .detail-nav .btn-next:hover,
        .detail-nav .btn-next:focus {
            background: linear-gradient(135deg, #0f766e, #0891b2);
            color: #f0fdfa;
        }

        .info-banner {
            background: linear-gradient(135deg, rgba(15, 118, 110, 0.94), rgba(20, 184, 166, 0.9));
            border: 1px solid rgba(255, 255, 255, 0.25);
            border-radius: var(--card-radius);
            padding: 1.5rem;
            color: #f8fafc;
            box-shadow: 0 28px 60px -32px rgba(15, 23, 42, 0.55);
        }

        .info-banner h2 {
            font-family: "Outfit", "Segoe UI", sans-serif;
            font-size: clamp(1.4rem, 2vw, 1.8rem);
            color: inherit;
        }

        .alert-modern {
            background: var(--surface);
            border-radius: var(--card-radius);
            border: 1px solid var(--glass-border);
            box-shadow: var(--shadow-md);
        }

        .loading-indicator {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            border-radius: var(--card-radius);
            padding: 1.5rem;
            background: rgba(209, 250, 244, 0.72);
            border: 1px solid rgba(20, 184, 166, 0.22);
            color: var(--text-primary);
            font-weight: 500;
        }

        .loading-indicator i {
            animation: spin 1.4s linear infinite;
        }

        @media (prefers-color-scheme: dark) {
            .loading-indicator {
                color: #e2e8f0;
            }
        }

        @keyframes spin {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        .empty-state {
            padding: 3rem;
            text-align: center;
            border-radius: var(--card-radius);
            background: var(--surface);
            border: 1px dashed rgba(20, 184, 166, 0.34);
            color: var(--text-secondary);
        }

        .chip {
            border-radius: 999px;
            padding: 0.3rem 0.8rem;
            font-size: 0.85rem;
            background: rgba(20, 184, 166, 0.12);
            color: var(--primary);
        }

        footer.app-footer {
            text-align: center;
            font-size: 0.8rem;
            color: rgba(226, 232, 240, 0.75);
            padding: 1.5rem 0 2rem;
        }

        .btn-soft {
            background: rgba(20, 184, 166, 0.1);
            color: var(--primary);
            border: none;
        }

        .btn-soft:hover {
            background: rgba(20, 184, 166, 0.18);
            color: var(--primary);
        }

        .btn-pill {
            border-radius: 999px !important;
        }

        .toolbar {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
            align-items: center;
        }

        .toolbar .btn {
            border-radius: 999px;
        }

        .matrix-block {
            background: var(--surface);
            border-radius: var(--card-radius);
            padding: 1.5rem;
            border: 1px solid var(--glass-border);
            box-shadow: var(--shadow-md);
        }

        .gradient-header {
            background: linear-gradient(135deg, rgba(15, 118, 110, 0.16), rgba(20, 184, 166, 0.2), rgba(240, 253, 250, 0.72));
            border-radius: var(--card-radius);
            padding: 1.25rem 1.5rem;
            border: 1px solid rgba(20, 184, 166, 0.24);
        }

        .stacked-card {
            background: var(--surface);
            border-radius: var(--card-radius);
            padding: 1.8rem;
            border: 1px solid var(--glass-border);
            box-shadow: 0 24px 60px -40px rgba(15, 23, 42, 0.45);
        }

        .timeline {
            position: relative;
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
            padding-left: 1.5rem;
        }

        .timeline::before {
            content: "";
            position: absolute;
            top: 0.5rem;
            bottom: 0.5rem;
            left: 12px;
            width: 2px;
            background: var(--line-soft);
        }

        .timeline-entry {
            position: relative;
            padding-left: 1.75rem;
        }

        .timeline-entry::before {
            content: "";
            position: absolute;
            left: -0.15rem;
            top: 0.75rem;
            width: 12px;
            height: 12px;
            border-radius: 999px;
            background: var(--primary);
            box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.16);
        }

        .timeline-card {
            background: var(--surface);
            border-radius: var(--card-radius);
            border: 1px solid var(--glass-border);
            box-shadow: var(--shadow-md);
            padding: 1.5rem;
        }

        .timeline-card h3 {
            font-family: "Outfit", "Segoe UI", sans-serif;
            font-weight: 600;
        }

        .maintenance-tasks {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .maintenance-tasks li {
            display: grid;
            gap: 0.65rem;
            grid-template-columns: minmax(90px, auto) 1fr;
            align-items: flex-start;
        }

        .maintenance-tasks .task-tag {
            font-weight: 600;
            color: var(--primary);
            white-space: nowrap;
        }

        .status-chip {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            border-radius: 999px;
            padding: 0.35rem 0.85rem;
            font-size: 0.82rem;
            background: var(--primary-soft);
            color: var(--text-primary);
            font-weight: 600;
            border: 1px solid var(--glass-border);
        }

        .status-chip.danger {
            background: rgba(220, 38, 38, 0.12);
            color: #b91c1c;
            border-color: rgba(220, 38, 38, 0.35);
        }

        .status-chip.neutral {
            background: rgba(20, 184, 166, 0.12);
            color: #0f766e;
            border-color: rgba(20, 184, 166, 0.24);
        }

        .info-banner .status-chip {
            background: rgba(248, 250, 252, 0.2);
            color: #f8fafc;
            border-color: rgba(255, 255, 255, 0.25);
        }

        .info-banner .status-chip i {
            color: inherit;
        }

        .info-banner .btn-outline-light {
            border-color: rgba(248, 250, 252, 0.55);
            color: #f8fafc;
        }

        .info-banner .btn-outline-light:hover,
        .info-banner .btn-outline-light:focus {
            background: rgba(248, 250, 252, 0.18);
            color: #f8fafc;
        }

        .text-countdown {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            font-family: "Outfit", "Segoe UI", sans-serif;
            font-weight: 600;
            letter-spacing: 0.5px;
            font-variant-numeric: tabular-nums;
            padding: 0.35rem 0.9rem;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.2);
            color: #ecfeff;
            border: 1px solid rgba(255, 255, 255, 0.24);
        }

        .text-countdown.warning {
            background: rgba(239, 68, 68, 0.88);
            border-color: rgba(248, 113, 113, 0.75);
            color: #fff;
            box-shadow: 0 12px 24px -18px rgba(239, 68, 68, 0.85);
        }

        .text-countdown i {
            color: inherit;
        }

        .countdown-line {
            transition: opacity 0.2s ease;
        }

        .countdown-hidden {
            opacity: 0;
            pointer-events: none;
            height: 0;
            overflow: hidden;
            margin: 0;
            padding: 0;
        }

        .filter-pill {
            border-radius: 999px;
            padding: 0.4rem 1.1rem;
            font-size: 0.85rem;
            border: 1px solid var(--glass-border);
            background: transparent;
        }

        .table-responsive::-webkit-scrollbar {
            width: 10px;
        }

        .table-responsive::-webkit-scrollbar-thumb {
            background: rgba(20, 184, 166, 0.28);
            border-radius: 999px;
        }

        .timeline {
            position: relative;
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
            padding-left: 1.5rem;
        }

        .timeline::before {
            content: "";
            position: absolute;
            top: 0.5rem;
            bottom: 0.5rem;
            left: 12px;
            width: 2px;
            background: rgba(15, 23, 42, 0.12);
        }

        .timeline-entry {
            position: relative;
            padding-left: 1.75rem;
        }

        .timeline-entry::before {
            content: "";
            position: absolute;
            left: -0.15rem;
            top: 0.75rem;
            width: 12px;
            height: 12px;
            border-radius: 999px;
            background: var(--primary);
            box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.16);
        }

        .timeline-card {
            background: var(--surface);
            border-radius: var(--card-radius);
            border: 1px solid rgba(148, 163, 184, 0.3);
            box-shadow: var(--shadow-md);
            padding: 1.5rem;
        }

        .timeline-card h3 {
            font-family: "Outfit", "Segoe UI", sans-serif;
            font-weight: 600;
        }

        .maintenance-tasks {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .maintenance-tasks li {
            display: grid;
            gap: 0.65rem;
            grid-template-columns: minmax(90px, auto) 1fr;
            align-items: flex-start;
        }

        .maintenance-tasks .task-tag {
            font-weight: 600;
            color: var(--primary);
            white-space: nowrap;
        }

        .table-responsive::-webkit-scrollbar-track {
            background: transparent;
        }

        .post-grid {
            display: grid;
            gap: 1.4rem;
            grid-template-columns: minmax(0, 1fr);
        }

        .grid-detail {
            display: grid;
            gap: 1.5rem;
        }

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

        .label-sm {
            font-size: 0.75rem;
            letter-spacing: 1.2px;
            text-transform: uppercase;
            opacity: 0.7;
        }

        .modern-table-heading {
            font-family: "Outfit", "Segoe UI", sans-serif;
            font-size: 1.1rem;
            letter-spacing: 0.02em;
            font-weight: 600;
        }

        .view-switcher {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
        }

        .view-switcher .btn {
            border-radius: 999px;
        }

        .disclaimer {
            font-size: 0.8rem;
            color: var(--text-secondary);
        }

        .login-brand {
            font-family: "Outfit", "Segoe UI", sans-serif;
            font-size: 2.1rem;
            font-weight: 600;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }

        .login-highlight {
            color: var(--primary);
        }

        .copy-preview {
            background: rgba(15, 118, 110, 0.08);
            border-radius: var(--card-radius);
            padding: 1.25rem;
            font-family: "Noto Sans TC", monospace;
            white-space: pre-wrap;
            border: 1px solid var(--glass-border);
        }

        .gradient-btn {
            background: linear-gradient(120deg, #0f766e, #14b8a6);
            border: none;
            border-radius: 999px;
            box-shadow: 0 18px 45px -20px rgba(20, 184, 166, 0.55);
        }

        .gradient-btn:hover {
            filter: brightness(1.05);
        }

        .rivercrab-grid {
            display: grid;
            gap: 1.25rem;
        }

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

        .glow-border {
            position: relative;
        }

        .glow-border::before {
            content: "";
            position: absolute;
            inset: -2px;
            border-radius: inherit;
            background: linear-gradient(120deg, rgba(20, 184, 166, 0.42), rgba(34, 211, 238, 0.42));
            z-index: -1;
            opacity: 0;
            transition: opacity 0.35s ease;
        }

        .glow-border:hover::before {
            opacity: 1;
        }

        .tagline {
            font-size: 0.92rem;
            color: rgba(226, 232, 240, 0.85);
        }