/* Page-specific styling that uses your design tokens */

        .maintenance-page {
            min-height: 100vh;
            display: flex;
            align-items: center;
            background: var(--bg);
        }

        .maintenance-wrapper {
            max-width: 640px;
            margin: 0 auto;
            padding: 32px 24px;
            background: var(--card-bg);
            border-radius: 16px;
            border: 1px solid var(--card-border);
            box-shadow: var(--card-shadow);
            text-align: center;
        }

        .maintenance-icon {
            width: 64px;
            height: 64px;
            margin: 0 auto 1.5rem;
            border-radius: 18px;
            display: grid;
            place-items: center;
            background: radial-gradient(circle at 20% 0%, rgba(10, 102, 255, 0.25), transparent),
                        radial-gradient(circle at 80% 120%, rgba(0, 166, 255, 0.35), transparent);
        }

        .maintenance-icon span {
            font-size: 2rem;
        }

        .maintenance-title {
            font-size: 1.9rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
            color: var(--text);
        }

        .maintenance-subtitle {
            font-size: 1.05rem;
            color: var(--text-muted);
            margin-bottom: 1.75rem;
            line-height: 1.6;
        }

        .maintenance-tag {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.3rem 0.7rem;
            border-radius: 999px;
            font-size: 0.8rem;
            background: rgba(10, 132, 255, 0.08);
            color: var(--primary);
            margin-bottom: 1rem;
            text-align: center;
            justify-content: center;
        }

        .maintenance-loader {
            width: 46px;
            height: 46px;
            border-radius: 50%;
            border: 4px solid rgba(148, 163, 184, 0.35);
            border-top-color: var(--primary);
            margin: 0 auto 1.25rem;
            animation: spin 1s linear infinite;
        }

        .maintenance-footer {
            margin-top: 1.25rem;
            font-size: 0.9rem;
            color: var(--text-muted);
        }

        .maintenance-footer strong {
            color: var(--text);
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        @media (max-width: 576px) {
            .maintenance-wrapper {
                padding: 24px 18px;
            }

            .maintenance-title {
                font-size: 1.6rem;
            }
        }