:root{
    --maintenance-width:1000px;

    --page-bg:#edf0f4;
    --page-bg-light:#fafbfc;

    --surface:#ffffff;
    --surface-soft:#f6f8fa;
    --surface-muted:#eef2f6;

    --text:#0a0e12;
    --text-soft:#3a4553;
    --text-muted:#6c7a8a;

    --line:#e2e8f0;
    --line-strong:#cbd5e1;

    --accent:#dc2626;
    --accent-dark:#b91c1c;
    --accent-light:#ef4444;
    --accent-soft:rgba(220,38,38,.08);
    --accent-glow:rgba(220,38,38,.15);

    --success:#10b981;
    --success-dark:#059669;
    --success-soft:rgba(16,185,129,.1);
    --success-glow:rgba(16,185,129,.12);

    --shadow-xs:0 1px 2px rgba(0,0,0,.02);
    --shadow-small:0 10px 25px -5px rgba(0,0,0,.05),0 8px 10px -6px rgba(0,0,0,.02);
    --shadow-medium:0 20px 40px -12px rgba(0,0,0,.12),0 8px 24px -8px rgba(0,0,0,.08);
    --shadow-large:0 30px 60px -15px rgba(0,0,0,.15),0 15px 35px -12px rgba(0,0,0,.1);
    --shadow-xl:0 40px 80px -20px rgba(0,0,0,.2),0 20px 45px -15px rgba(0,0,0,.12);
    --shadow-glow:0 0 30px rgba(220,38,38,.15);
    --shadow-glow-success:0 0 30px rgba(16,185,129,.12);

    --ease-out-expo:cubic-bezier(.16,1,.3,1);
    --ease-out-back:cubic-bezier(.34,1.2,.64,1);
    --ease-spring:cubic-bezier(.25,.46,.45,.94);
    --ease-smooth:cubic-bezier(.4,0,.2,1);
}

*{
    box-sizing:border-box;
}

html{
    min-width:320px;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
}

body{
    margin:0;
    min-width:320px;
    min-height:100vh;
    font-family:"Inter","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
    color:var(--text);
    background:radial-gradient(ellipse at 0% 0%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.4) 35%, transparent 65%),
                radial-gradient(ellipse at 100% 0%, var(--accent-soft) 0%, transparent 45%),
                radial-gradient(ellipse at 80% 100%, rgba(15,23,42,.06) 0%, transparent 50%),
                linear-gradient(135deg, var(--page-bg-light) 0%, var(--page-bg) 50%, #e8ecf1 100%);
    background-attachment:fixed;
}

/* =========================================
   GRUNDLAYOUT
========================================= */

.maintenance-shell{
    position:relative;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    overflow-x:hidden;
}

.maintenance-shell::before,
.maintenance-shell::after{
    content:"";
    position:fixed;
    z-index:-1;
    border-radius:50%;
    pointer-events:none;
    filter:blur(60px);
    opacity:.4;
}

.maintenance-shell::before{
    width:70vw;
    height:70vw;
    max-width:600px;
    max-height:600px;
    left:-20vw;
    top:-20vh;
    background:radial-gradient(circle, var(--accent-light), transparent 70%);
    animation:backgroundOrbOne 18s ease-in-out infinite alternate;
}

.maintenance-shell::after{
    width:80vw;
    height:80vw;
    max-width:700px;
    max-height:700px;
    right:-25vw;
    bottom:-25vh;
    background:radial-gradient(circle, rgba(59,130,246,.08), transparent 70%);
    animation:backgroundOrbTwo 22s ease-in-out infinite alternate;
}

@keyframes backgroundOrbOne{
    0%{transform:translate3d(0,0,0) scale(1); opacity:.3;}
    100%{transform:translate3d(45px,35px,0) scale(1.15); opacity:.5;}
}

@keyframes backgroundOrbTwo{
    0%{transform:translate3d(0,0,0) scale(1); opacity:.25;}
    100%{transform:translate3d(-55px,-40px,0) scale(1.2); opacity:.4;}
}

.maintenance-main{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:60px 0;
}

.maintenance-wrap{
    width:min(var(--maintenance-width), calc(100% - 40px));
    margin:0 auto;
}

/* =========================================
   HAUPTKARTE
========================================= */

.maintenance-hero{
    position:relative;
    isolation:isolate;
    min-width:0;
    overflow:visible;
    padding:40px;
    border-radius:40px;
    backdrop-filter:blur(0px);
    background:radial-gradient(ellipse at 100% 0%, rgba(255,255,255,.8) 0%, rgba(255,255,255,.95) 60%);
    box-shadow:var(--shadow-xl), inset 0 1px 0 rgba(255,255,255,.8);
    animation:maintenanceCardAppear .8s var(--ease-out-expo) both;
}

@keyframes maintenanceCardAppear{
    from{opacity:0; transform:translateY(30px) scale(.96); filter:blur(8px);}
    to{opacity:1; transform:translateY(0) scale(1); filter:blur(0);}
}

.maintenance-hero::before{
    content:"";
    position:absolute;
    z-index:-1;
    inset:0;
    pointer-events:none;
    background-image:linear-gradient(rgba(15,23,42,.02) 1px, transparent 1px),
                     linear-gradient(90deg, rgba(15,23,42,.02) 1px, transparent 1px);
    background-size:40px 40px;
    mask-image:linear-gradient(180deg, rgba(0,0,0,.3), transparent 70%);
}

.maintenance-hero::after{
    content:"";
    position:absolute;
    z-index:-1;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background:radial-gradient(ellipse at 30% 20%, rgba(220,38,38,.06) 0%, transparent 50%),
                radial-gradient(ellipse at 85% 90%, rgba(16,185,129,.04) 0%, transparent 50%);
    pointer-events:none;
}

/* =========================================
   STATUS-BADGE
========================================= */

.maintenance-badge{
    position:relative;
    width:max-content;
    max-width:100%;
    min-height:40px;
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:0 20px;
    overflow:hidden;
    border:1px solid rgba(220,38,38,.2);
    border-radius:100px;
    background:linear-gradient(135deg, rgba(255,255,255,.98) 0%, rgba(254,242,242,.98) 100%);
    color:var(--accent-dark);
    font-size:12px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    box-shadow:var(--shadow-xs), inset 0 1px 0 rgba(255,255,255,.9);
    animation:badgeAppear .5s .1s var(--ease-out-expo) both;
}

@keyframes badgeAppear{
    from{opacity:0; transform:translateX(-20px) scale(.9);}
    to{opacity:1; transform:translateX(0) scale(1);}
}

.maintenance-badge::after{
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    left:-100%;
    top:0;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
    animation:badgeShine 4s ease-in-out infinite;
}

@keyframes badgeShine{
    0%,70%{left:-100%;}
    100%{left:100%;}
}

.maintenance-badge-dot{
    position:relative;
    width:8px;
    height:8px;
    flex:0 0 8px;
    border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 0 4px var(--accent-soft);
}

.maintenance-badge-dot::before{
    content:"";
    position:absolute;
    inset:-4px;
    border:1px solid var(--accent-light);
    border-radius:50%;
    animation:badgePulse 2s ease-out infinite;
}

@keyframes badgePulse{
    0%{opacity:.8; transform:scale(.6);}
    75%,100%{opacity:0; transform:scale(1.8);}
}

/* =========================================
   HEADER BEREICH
========================================= */

.maintenance-grid-top{
    margin-top:28px;
    display:grid;
    grid-template-columns:140px minmax(0,1fr);
    gap:32px;
    align-items:center;
}

.maintenance-copy{
    min-width:0;
    animation:maintenanceCopyAppear .6s .15s var(--ease-out-expo) both;
}

@keyframes maintenanceCopyAppear{
    from{opacity:0; transform:translateX(24px);}
    to{opacity:1; transform:translateX(0);}
}

.maintenance-copy h1{
    max-width:760px;
    margin:0;
    background:linear-gradient(135deg, var(--text) 0%, var(--text-soft) 50%, var(--accent-dark) 100%);
    background-clip:text;
    -webkit-background-clip:text;
    color:transparent;
    font-size:clamp(36px, 4.5vw, 56px);
    font-weight:800;
    line-height:1.05;
    letter-spacing:-.03em;
    text-wrap:balance;
}

.maintenance-copy p{
    max-width:720px;
    margin:18px 0 0;
    color:var(--text-soft);
    font-size:16px;
    line-height:1.65;
    font-weight:450;
}

/* =========================================
   ANIMIERTE GRAFIK - REALISTISCH & ARTISTISCH
========================================= */

.maintenance-visual{
    position:relative;
    width:140px;
    height:140px;
    overflow:visible;
    border:none;
    border-radius:36px;
    background:radial-gradient(ellipse at 30% 25%, rgba(255,255,255,.18) 0%, rgba(255,255,255,.02) 45%, transparent 70%),
                radial-gradient(ellipse at 75% 80%, rgba(220,38,38,.25) 0%, rgba(220,38,38,.05) 40%, transparent 65%),
                linear-gradient(135deg, #1a1f2e 0%, #0f1119 35%, #0a0c12 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12),
               inset 0 -1px 0 rgba(0,0,0,.3),
               0 25px 45px -12px rgba(0,0,0,.35),
               0 0 0 1px rgba(255,255,255,.08);
    animation:visualAppear .6s .05s var(--ease-out-back) both, visualFloat 5s ease-in-out infinite;
}

@keyframes visualAppear{
    from{opacity:0; transform:translateY(20px) rotate(-6deg) scale(.88); filter:blur(6px);}
    to{opacity:1; transform:translateY(0) rotate(0) scale(1); filter:blur(0);}
}

@keyframes visualFloat{
    0%,100%{transform:translateY(0) rotate(0deg);}
    50%{transform:translateY(-6px) rotate(1deg);}
}

/* Glossy Overlay */
.maintenance-visual__gloss{
    position:absolute;
    inset:0;
    border-radius:36px;
    overflow:hidden;
    pointer-events:none;
}

.maintenance-visual__gloss::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(125deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.02) 20%, transparent 40%);
}

/* Orbitale Ringe */
.maintenance-visual__orbits{
    position:absolute;
    inset:0;
}

.orbit-ring{
    position:absolute;
    border-radius:50%;
    border:1px solid;
    opacity:.5;
}

.orbit-ring--1{
    width:100px;
    height:100px;
    left:20px;
    top:20px;
    border-color:rgba(220,38,38,.3);
    animation:orbitSpin 12s linear infinite;
}

.orbit-ring--2{
    width:76px;
    height:76px;
    left:32px;
    top:32px;
    border-color:rgba(255,255,255,.15);
    animation:orbitSpin 8s linear infinite reverse;
}

.orbit-ring--3{
    width:52px;
    height:52px;
    left:44px;
    top:44px;
    border-color:rgba(220,38,38,.2);
    animation:orbitSpin 5s linear infinite;
}

@keyframes orbitSpin{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
}

/* Schwebende Partikel */
.particle{
    position:absolute;
    width:3px;
    height:3px;
    border-radius:50%;
    background:rgba(255,255,255,.6);
}

.particle--1{left:18px; top:25px; animation:particleFloat 3.2s ease-in-out infinite;}
.particle--2{right:22px; top:18px; width:4px; height:4px; background:rgba(239,68,68,.7); animation:particleFloat 2.5s ease-in-out infinite .4s;}
.particle--3{left:28px; bottom:24px; width:2px; height:2px; animation:particleFloat 3.8s ease-in-out infinite .8s;}
.particle--4{right:30px; bottom:30px; width:3px; height:3px; background:rgba(239,68,68,.6); animation:particleFloat 2.9s ease-in-out infinite 1.1s;}
.particle--5{left:45%; top:12px; width:2px; height:2px; animation:particleFloat 4.2s ease-in-out infinite 1.5s;}

@keyframes particleFloat{
    0%,100%{transform:translateY(0) scale(1); opacity:.4;}
    50%{transform:translateY(-8px) scale(1.5); opacity:1;}
}

/* Premium Zahnräder */
.gear{
    position:absolute;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    filter:drop-shadow(0 6px 12px rgba(0,0,0,.35));
}

.gear--main{
    width:48px;
    height:48px;
    left:20px;
    top:22px;
    background:linear-gradient(135deg, #e2e8f0 0%, #94a3b8 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.1);
    animation:gearRotate 6s linear infinite;
}

.gear--small{
    width:30px;
    height:30px;
    right:22px;
    bottom:20px;
    background:linear-gradient(135deg, #f1f5f9 0%, #cbd5e1 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.1);
    animation:gearRotate 4s linear infinite reverse;
}

.gear__center{
    width:40%;
    height:40%;
    border-radius:50%;
    background:radial-gradient(circle, #64748b 0%, #334155 100%);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.3);
}

.gear--small .gear__center{
    background:radial-gradient(circle, #475569 0%, #1e293b 100%);
}

.gear__spoke{
    position:absolute;
    background:linear-gradient(90deg, #cbd5e1 0%, #f1f5f9 50%, #cbd5e1 100%);
    border-radius:2px;
}

.gear--main .gear__spoke{
    width:calc(100% + 14px);
    height:6px;
}

.gear--small .gear__spoke{
    width:calc(100% + 10px);
    height:5px;
}

.gear__spoke--vertical{
    transform:rotate(90deg);
}

@keyframes gearRotate{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
}

/* Realistischer Schraubenschlüssel */
.wrench{
    position:absolute;
    width:50px;
    height:7px;
    left:47px;
    top:68px;
    border-radius:100px;
    background:linear-gradient(180deg, #e2e8f0 0%, #94a3b8 50%, #64748b 100%);
    box-shadow:0 5px 12px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.4);
    transform:rotate(-32deg);
    animation:wrenchMove 2.6s ease-in-out infinite;
}

@keyframes wrenchMove{
    0%,100%{transform:rotate(-32deg);}
    50%{transform:rotate(-24deg);}
}

.wrench::before{
    content:"";
    position:absolute;
    width:16px;
    height:16px;
    left:-7px;
    top:-5px;
    border:4px solid #e2e8f0;
    border-right-color:transparent;
    border-radius:50%;
    background:linear-gradient(135deg, #f1f5f9 0%, #94a3b8 100%);
    box-shadow:inset -1px -1px 0 rgba(0,0,0,.1);
    transform:rotate(28deg);
}

.wrench::after{
    content:"";
    position:absolute;
    width:13px;
    height:13px;
    right:-4px;
    top:-3px;
    border-radius:3px;
    background:linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%);
    box-shadow:inset -1px -1px 0 rgba(0,0,0,.1);
    transform:rotate(45deg);
}

/* Leuchtende Indikatoren */
.glow-dot{
    position:absolute;
    border-radius:50%;
}

.glow-dot--red{
    width:7px;
    height:7px;
    left:18px;
    top:20px;
    background:radial-gradient(circle, #ef4444 0%, #dc2626 70%);
    box-shadow:0 0 0 3px rgba(239,68,68,.2), 0 0 12px #ef4444;
    animation:glowPulse 1.8s ease-in-out infinite;
}

.glow-dot--blue{
    width:5px;
    height:5px;
    right:25px;
    top:26px;
    background:radial-gradient(circle, #60a5fa 0%, #3b82f6 70%);
    box-shadow:0 0 0 2px rgba(96,165,250,.2), 0 0 8px #60a5fa;
    animation:glowPulse 2.2s ease-in-out infinite .5s;
}

.glow-dot--green{
    width:6px;
    height:6px;
    left:55px;
    bottom:22px;
    background:radial-gradient(circle, #34d399 0%, #10b981 70%);
    box-shadow:0 0 0 2px rgba(52,211,153,.2), 0 0 10px #34d399;
    animation:glowPulse 1.6s ease-in-out infinite .3s;
}

@keyframes glowPulse{
    0%,100%{transform:scale(1); opacity:.8;}
    50%{transform:scale(1.3); opacity:1;}
}

/* Metallische Nieten */
.rivet{
    position:absolute;
    width:5px;
    height:5px;
    border-radius:50%;
    background:radial-gradient(circle, #94a3b8 0%, #475569 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 1px 2px rgba(0,0,0,.2);
}

.rivet--tl{top:14px; left:14px;}
.rivet--tr{top:14px; right:14px;}
.rivet--bl{bottom:14px; left:14px;}
.rivet--br{bottom:14px; right:14px;}

/* Gradient Border Effekt */
.maintenance-visual::after{
    content:"";
    position:absolute;
    inset:-1px;
    border-radius:37px;
    background:linear-gradient(135deg, rgba(255,255,255,.25) 0%, rgba(220,38,38,.15) 50%, rgba(255,255,255,.05) 100%);
    pointer-events:none;
    z-index:-1;
}

/* =========================================
   VORTEILSKARTEN
========================================= */

.maintenance-highlights{
    margin-top:32px;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
}

.maintenance-highlight{
    position:relative;
    min-width:0;
    overflow:hidden;
    padding:20px;
    border:none;
    border-radius:24px;
    background:linear-gradient(135deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.95) 100%);
    box-shadow:var(--shadow-small), inset 0 1px 0 rgba(255,255,255,.8);
    transition:all .35s var(--ease-smooth);
    animation:highlightAppear .5s var(--ease-out-expo) both;
}

.maintenance-highlight:nth-child(1){animation-delay:.15s;}
.maintenance-highlight:nth-child(2){animation-delay:.22s;}
.maintenance-highlight:nth-child(3){animation-delay:.29s;}

@keyframes highlightAppear{
    from{opacity:0; transform:translateY(20px);}
    to{opacity:1; transform:translateY(0);}
}

.maintenance-highlight::before{
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    inset:0;
    background:linear-gradient(135deg, transparent 0%, rgba(220,38,38,.02) 50%, transparent 100%);
    opacity:0;
    transition:opacity .35s var(--ease-smooth);
}

.maintenance-highlight:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-medium);
}

.maintenance-highlight:hover::before{opacity:1;}

.maintenance-highlight__icon{
    position:relative;
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:16px;
    border-radius:16px;
    background:linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
    color:#ffffff;
    font-size:20px;
    font-weight:700;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.15), var(--shadow-small);
    transition:transform .25s var(--ease-out-back);
}

.maintenance-highlight:nth-child(2) .maintenance-highlight__icon{
    background:linear-gradient(135deg, var(--accent-light) 0%, var(--accent-dark) 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.2), var(--shadow-glow);
}

.maintenance-highlight:nth-child(3) .maintenance-highlight__icon{
    background:linear-gradient(135deg, #34d399 0%, var(--success-dark) 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.2), var(--shadow-glow-success);
}

.maintenance-highlight:hover .maintenance-highlight__icon{
    transform:translateY(-3px) scale(1.05);
}

.maintenance-highlight strong{
    display:block;
    margin-bottom:8px;
    color:var(--text);
    font-size:15px;
    font-weight:700;
    line-height:1.3;
}

.maintenance-highlight span{
    display:block;
    color:var(--text-muted);
    font-size:13px;
    line-height:1.55;
}

/* =========================================
   INFO PANEL
========================================= */

.maintenance-panel{
    position:relative;
    margin-top:24px;
    overflow:hidden;
    padding:28px;
    border:none;
    border-radius:28px;
    background:linear-gradient(135deg, rgba(255,255,255,.98) 0%, rgba(247,250,252,.98) 100%);
    box-shadow:var(--shadow-medium), inset 0 1px 0 rgba(255,255,255,.8);
    animation:panelAppear .6s .35s var(--ease-out-expo) both;
}

@keyframes panelAppear{
    from{opacity:0; transform:translateY(20px);}
    to{opacity:1; transform:translateY(0);}
}

.maintenance-panel::after{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    right:-90px;
    bottom:-90px;
    border-radius:50%;
    border:1px solid rgba(16,185,129,.1);
    box-shadow:0 0 0 20px rgba(16,185,129,.04), 0 0 0 40px rgba(16,185,129,.02);
    pointer-events:none;
}

.maintenance-panel__head{
    position:relative;
    z-index:1;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    margin-bottom:20px;
}

.maintenance-panel__head h2{
    margin:0;
    color:var(--text);
    font-size:18px;
    font-weight:700;
    line-height:1.3;
    letter-spacing:-.01em;
}

.maintenance-panel__head p{
    max-width:680px;
    margin:8px 0 0;
    color:var(--text-muted);
    font-size:14px;
    line-height:1.55;
}

.maintenance-chip{
    position:relative;
    flex:0 0 auto;
    min-height:34px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:0 14px;
    border:none;
    border-radius:100px;
    background:linear-gradient(135deg, rgba(16,185,129,.1) 0%, rgba(16,185,129,.05) 100%);
    color:var(--success-dark);
    font-size:11px;
    font-weight:700;
    letter-spacing:.05em;
    text-transform:uppercase;
    backdrop-filter:blur(10px);
}

.maintenance-chip::before{
    content:"";
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--success);
    box-shadow:0 0 0 3px var(--success-soft);
    animation:chipPulse 1.5s ease-in-out infinite;
}

@keyframes chipPulse{
    0%,100%{opacity:1; transform:scale(1);}
    50%{opacity:.6; transform:scale(.7);}
}

.maintenance-list{
    position:relative;
    z-index:1;
    display:grid;
    gap:12px;
    margin:0;
    padding:0;
    list-style:none;
}

.maintenance-list li{
    display:grid;
    grid-template-columns:22px minmax(0,1fr);
    gap:12px;
    align-items:start;
    color:var(--text-soft);
    font-size:14px;
    line-height:1.55;
}

.maintenance-list li::before{
    content:"✓";
    width:22px;
    height:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:0px;
    border-radius:50%;
    background:linear-gradient(135deg, #34d399 0%, var(--success-dark) 100%);
    color:#ffffff;
    font-size:11px;
    font-weight:700;
    box-shadow:var(--shadow-xs);
}

/* =========================================
   PROGRESS BAR
========================================= */

.maintenance-progress-wrap{
    position:relative;
    z-index:1;
    margin-top:24px;
    padding-top:20px;
    border-top:1px solid var(--line);
}

.maintenance-progress-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:12px;
}

.maintenance-progress-top strong{
    color:var(--text);
    font-size:13px;
    font-weight:700;
}

.maintenance-progress-top span{
    color:var(--text-muted);
    font-size:12px;
    font-weight:600;
}

.maintenance-progress{
    position:relative;
    width:100%;
    height:8px;
    overflow:hidden;
    border:none;
    border-radius:100px;
    background:linear-gradient(90deg, #e2e8f0 0%, #cbd5e1 100%);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.05);
}

.maintenance-progress-bar{
    position:absolute;
    width:36%;
    height:100%;
    left:0;
    top:0;
    overflow:hidden;
    border-radius:inherit;
    background:linear-gradient(90deg, var(--accent-dark) 0%, var(--accent) 30%, var(--accent-light) 50%, var(--accent) 70%, var(--accent-dark) 100%);
    background-size:200% 100%;
    box-shadow:0 0 12px var(--accent-light);
    animation:progressTravel 2.8s ease-in-out infinite, progressColor 3s linear infinite;
}

.maintenance-progress-bar::before{
    content:"";
    position:absolute;
    inset:0;
    background:repeating-linear-gradient(-45deg, rgba(255,255,255,.2) 0px, rgba(255,255,255,.2) 6px, transparent 6px, transparent 12px);
    animation:progressStripe 1s linear infinite;
}

@keyframes progressTravel{
    0%{transform:translateX(-100%);}
    50%{transform:translateX(200%);}
    100%{transform:translateX(-100%);}
}

@keyframes progressColor{
    from{background-position:0 0;}
    to{background-position:200% 0;}
}

@keyframes progressStripe{
    from{background-position:0 0;}
    to{background-position:12px 0;}
}

/* =========================================
   NOTE BANNER
========================================= */

.maintenance-note{
    position:relative;
    margin-top:24px;
    margin-bottom:0;
    overflow:hidden;
    padding:16px 20px;
    border:none;
    border-radius:20px;
    background:linear-gradient(135deg, rgba(254,242,242,.98) 0%, rgba(254,226,226,.98) 100%);
    color:var(--accent-dark);
    font-size:13px;
    font-weight:600;
    line-height:1.55;
    text-align:center;
    box-shadow:var(--shadow-small), inset 0 1px 0 rgba(255,255,255,.6);
    animation:noteAppear .5s .45s var(--ease-out-expo) both;
}

@keyframes noteAppear{
    from{opacity:0; transform:translateY(12px);}
    to{opacity:1; transform:translateY(0);}
}

.maintenance-note::before{
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:-100%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
    animation:noteShine 4s ease-in-out infinite;
}

@keyframes noteShine{
    0%,70%{left:-100%;}
    100%{left:100%;}
}

/* =========================================
   RESPONSIVE DESIGN
========================================= */

@media (max-width:820px){
    .maintenance-main{padding:40px 0;}
    .maintenance-hero{padding:28px; border-radius:32px;}
    .maintenance-grid-top{grid-template-columns:120px minmax(0,1fr); gap:24px;}
    
    .maintenance-visual{width:120px; height:120px; border-radius:30px;}
    .orbit-ring--1{width:86px; height:86px; left:17px; top:17px;}
    .orbit-ring--2{width:64px; height:64px; left:28px; top:28px;}
    .orbit-ring--3{width:44px; height:44px; left:38px; top:38px;}
    .gear--main{width:42px; height:42px; left:16px; top:18px;}
    .gear--small{width:26px; height:26px; right:18px; bottom:16px;}
    .wrench{width:44px; left:40px; top:58px;}
    .wrench::before{width:14px; height:14px; left:-6px; top:-4px;}
    .wrench::after{width:11px; height:11px;}
    
    .maintenance-copy h1{font-size:38px;}
    .maintenance-copy p{font-size:15px;}
    .maintenance-highlights{gap:16px;}
}

@media (max-width:680px){
    .maintenance-highlights{grid-template-columns:1fr; gap:14px;}
    .maintenance-highlight{display:grid; grid-template-columns:48px minmax(0,1fr); gap:16px; align-items:start;}
    .maintenance-highlight__icon{grid-row:1 / span 2; margin-bottom:0;}
    .maintenance-highlight strong{align-self:end; margin-bottom:4px;}
}

@media (max-width:580px){
    .maintenance-wrap{width:calc(100% - 24px);}
    .maintenance-main{padding:24px 0 32px;}
    .maintenance-hero{padding:20px; border-radius:28px;}
    .maintenance-badge{min-height:36px; padding:0 16px; font-size:10px; gap:8px;}
    .maintenance-grid-top{grid-template-columns:1fr; gap:20px; margin-top:20px;}
    
    .maintenance-visual{width:100px; height:100px; margin:0 auto; border-radius:26px;}
    .orbit-ring--1{width:72px; height:72px; left:14px; top:14px;}
    .orbit-ring--2{width:54px; height:54px; left:23px; top:23px;}
    .orbit-ring--3{width:38px; height:38px; left:31px; top:31px;}
    .gear--main{width:36px; height:36px; left:12px; top:14px;}
    .gear--small{width:22px; height:22px; right:14px; bottom:12px;}
    .gear--main .gear__spoke{width:calc(100% + 10px); height:5px;}
    .gear--small .gear__spoke{width:calc(100% + 8px); height:4px;}
    .wrench{width:38px; left:33px; top:49px; height:6px;}
    .wrench::before{width:12px; height:12px; left:-5px; top:-3px;}
    .wrench::after{width:9px; height:9px;}
    .glow-dot--red{width:6px; height:6px; left:14px; top:16px;}
    .glow-dot--blue{right:18px; top:20px;}
    .glow-dot--green{left:45px; bottom:16px;}
    .particle--1{left:14px; top:20px;}
    .particle--2{right:16px; top:14px;}
    .particle--3{left:22px; bottom:18px;}
    .particle--4{right:22px; bottom:22px;}
    
    .maintenance-copy{text-align:center;}
    .maintenance-copy h1{font-size:32px;}
    .maintenance-copy p{margin-top:12px; font-size:14px;}
    .maintenance-highlights{margin-top:24px;}
    .maintenance-panel{margin-top:20px; padding:20px; border-radius:24px;}
    .maintenance-panel__head{flex-direction:column; gap:12px;}
    .maintenance-chip{align-self:flex-start;}
    .maintenance-progress-top{flex-direction:column; align-items:flex-start; gap:6px;}
    .maintenance-note{margin-top:20px; padding:14px 16px; font-size:12px;}
}

/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
    .maintenance-progress-bar{width:36%; transform:none; animation:none;}
    .maintenance-progress-bar::before,.maintenance-progress-bar::after{animation:none;}
    .maintenance-badge::after,.maintenance-note::before{animation:none; display:none;}
}

/* =========================================
   DARK MODE
========================================= */

@media (prefers-color-scheme:dark){
    :root{
        --page-bg:#0a0e12;
        --page-bg-light:#11151a;
        --surface:#1a2027;
        --surface-soft:#1e242c;
        --surface-muted:#252d36;
        --text:#e2e8f0;
        --text-soft:#94a3b8;
        --text-muted:#64748b;
        --line:#2d3748;
        --line-strong:#3a4553;
    }
    body{background:radial-gradient(ellipse at 0% 0%, rgba(26,32,39,.95) 0%, rgba(26,32,39,.8) 50%, rgba(10,14,18,1) 100%), linear-gradient(135deg, var(--page-bg-light) 0%, var(--page-bg) 100%);}
    .maintenance-hero{background:linear-gradient(135deg, rgba(30,36,44,.98) 0%, rgba(26,32,39,.98) 100%); box-shadow:var(--shadow-xl);}
    .maintenance-highlight,.maintenance-panel{background:linear-gradient(135deg, rgba(30,36,44,.98) 0%, rgba(26,32,39,.98) 100%);}
}