/* ── Maintenance-only additions on top of style.css ── */

        .maintenance-wrap {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 3rem 1.5rem;
            position: relative;
            z-index: 5;
        }

        .maintenance-card {
            background: var(--glass-bg);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border: 1px solid var(--glass-border);
            border-radius: 20px;
            box-shadow: 0 24px 64px rgba(0,0,0,0.45);
            padding: 3rem 2.5rem;
            max-width: 520px;
            width: 100%;
            text-align: center;
            animation: card-rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
        }
        @keyframes card-rise {
            from { opacity: 0; transform: translateY(28px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        .maintenance-logo {
            max-width: 200px;
            margin-bottom: 1.8rem;
            animation: logo-glow 3s ease-in-out infinite;
        }

        .maint-badge {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            font-size: 0.68rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            padding: 4px 14px;
            border-radius: 20px;
            margin-bottom: 1.4rem;
            background: rgba(249, 226, 175, 0.1);
            color: var(--yellow);
            border: 1px solid rgba(249, 226, 175, 0.25);
        }
        .maint-badge-dot {
            width: 7px; height: 7px;
            border-radius: 50%;
            background: var(--yellow);
            box-shadow: 0 0 6px var(--yellow);
            animation: badge-blink 1.2s ease-in-out infinite;
            flex-shrink: 0;
        }
        @keyframes badge-blink {
            0%, 100% { opacity: 1; }
            50%       { opacity: 0.15; }
        }

        .maintenance-card h1 {
            font-size: 1.85rem;
            font-weight: 900;
            color: var(--text);
            line-height: 1.2;
            margin-bottom: 0.75rem;
            text-shadow: 0 2px 6px rgba(0,0,0,0.4);
        }
        .maintenance-card h1 span { color: var(--mauve); }

        .maintenance-card .subtitle {
            color: var(--subtext0);
            font-size: 0.9rem;
            line-height: 1.65;
            margin-bottom: 2rem;
        }

        .maint-home {
            display: inline-block;
            color: var(--mauve);
            font-weight: 700;
            font-size: 0.9rem;
            text-decoration: none;
            transition: color 0.2s, opacity 0.2s;
        }
        .maint-home:hover {
            color: var(--text);
            opacity: 0.9;
        }

        .maint-divider {
            width: 100%; height: 1px; margin-bottom: 2rem;
            background: linear-gradient(90deg, transparent, var(--surface1), var(--mauve), var(--surface1), transparent);
            opacity: 0.5;
        }

        .maint-progress { margin-bottom: 2rem; text-align: left; }
        .maint-progress-labels {
            display: flex;
            justify-content: space-between;
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--subtext0);
            margin-bottom: 0.55rem;
        }
        .maint-progress-labels span:last-child { color: var(--mauve); }
        .maint-progress-track {
            width: 100%; height: 6px; border-radius: 10px;
            background: var(--surface0); overflow: hidden;
        }
        .maint-progress-fill {
            height: 100%; border-radius: 10px;
            background: linear-gradient(90deg, var(--mauve), var(--blue));
            box-shadow: 0 0 10px rgba(224, 175, 104, 0.4);
            width: 0%;
            animation: maint-fill 2s cubic-bezier(0.4, 0, 0.2, 1) 0.5s forwards;
        }
        @keyframes maint-fill { to { width: 68%; } }

        .maint-checklist {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.65rem;
            margin-bottom: 2rem;
            text-align: left;
        }
        .maint-item {
            display: flex;
            align-items: center;
            gap: 9px;
            font-size: 0.82rem;
            color: var(--subtext0);
        }
        .maint-item-icon {
            width: 26px; height: 26px;
            border-radius: 7px;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0; font-size: 0.8rem; font-weight: 800;
        }
        .maint-item.is-done   { color: var(--text); }
        .maint-item.is-done   .maint-item-icon { background: rgba(166,227,161,0.12); color: var(--green);   border: 1px solid rgba(166,227,161,0.25); }
        .maint-item.is-wip    .maint-item-icon { background: rgba(249,226,175,0.10); color: var(--yellow);  border: 1px solid rgba(249,226,175,0.25); animation: spin-icon 3s linear infinite; }
        .maint-item.is-todo   .maint-item-icon { background: rgba(49,50,68,0.5);     color: var(--surface1); border: 1px solid rgba(69,71,90,0.4); }
        @keyframes spin-icon { to { transform: rotate(360deg); } }

        .maint-discord {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            text-decoration: none;
            padding: 13px 26px;
            border-radius: 12px;
            font-weight: 700;
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            background: rgba(88, 101, 242, 0.1);
            color: #7289da;
            border: 1px solid rgba(88, 101, 242, 0.3);
            transition: background 0.25s, box-shadow 0.25s, transform 0.25s;
        }
        .maint-discord:hover {
            background: rgba(88, 101, 242, 0.22);
            box-shadow: 0 8px 28px rgba(88, 101, 242, 0.2);
            transform: translateY(-2px);
        }

        @media (max-width: 480px) {
            .maintenance-card { padding: 2rem 1.25rem; }
            .maintenance-card h1 { font-size: 1.5rem; }
            .maint-checklist { grid-template-columns: 1fr; }
        }