:root{
    --aqua-50:#ECFEFF;
    --aqua-100:#CFFAFE;
    --aqua-200:#A5F3FC;
    --aqua-300:#67E8F9;
    --aqua-400:#22D3EE;
    --aqua-500:#06B6D4;
    --aqua-600:#0891B2;
    --aqua-700:#0E7490;
    --aqua-800:#155E75;
    --aqua-900:#164E63;
    --sky-300:#7DD3FC;
    --sky-400:#38BDF8;
    --sky-500:#0EA5E9;
    --sky-600:#0284C7;
    --pink-soft:#FBCFE8;
    --aqua-text:#0c2a44;
    --aqua-text-soft:rgba(12,42,68,.6);
    --aqua-bg:#F0FBFF;
    --aqua-bg-card:rgba(255,255,255,.7);
    --aqua-grad-1:linear-gradient(135deg,#22D3EE 0%,#0EA5E9 100%);
    --aqua-grad-2:linear-gradient(135deg,#67E8F9 0%,#22D3EE 50%,#0EA5E9 100%);
    --aqua-glow:0 12px 40px rgba(34,211,238,.25);
}

html.dark{
    --aqua-text:#dbeafe;
    --aqua-text-soft:rgba(207,250,254,.65);
    --aqua-bg:#051828;
    --aqua-bg-card:rgba(11,38,64,.75);
}

.aqua-bubbles{
    position:fixed;inset:0;
    overflow:hidden;pointer-events:none;
    z-index:0;
}
.aqua-bubbles span{
    position:absolute;
    bottom:-160px;
    width:14px;height:14px;
    background:radial-gradient(circle at 30% 30%,rgba(207,250,254,.95),rgba(34,211,238,.4) 60%,rgba(14,165,233,.05) 100%);
    border-radius:50%;
    box-shadow:0 0 14px rgba(34,211,238,.35),inset 0 0 5px rgba(255,255,255,.6);
    opacity:0;
    animation:aqBubble linear infinite;
}
.aqua-bubbles span:nth-child(1){left:6%;width:18px;height:18px;animation-duration:18s;animation-delay:-2s}
.aqua-bubbles span:nth-child(2){left:18%;width:10px;height:10px;animation-duration:14s;animation-delay:-6s}
.aqua-bubbles span:nth-child(3){left:30%;width:24px;height:24px;animation-duration:22s;animation-delay:-10s}
.aqua-bubbles span:nth-child(4){left:46%;width:12px;height:12px;animation-duration:16s;animation-delay:-1s}
.aqua-bubbles span:nth-child(5){left:60%;width:20px;height:20px;animation-duration:20s;animation-delay:-7s}
.aqua-bubbles span:nth-child(6){left:74%;width:8px;height:8px;animation-duration:13s;animation-delay:-3s}
.aqua-bubbles span:nth-child(7){left:86%;width:16px;height:16px;animation-duration:17s;animation-delay:-9s}
.aqua-bubbles span:nth-child(8){left:94%;width:11px;height:11px;animation-duration:19s;animation-delay:-5s}
@keyframes aqBubble{
    0%{transform:translate3d(0,0,0) scale(.6);opacity:0}
    10%{opacity:.85}
    50%{transform:translate3d(20px,-50vh,0) scale(1)}
    90%{opacity:.7}
    100%{transform:translate3d(-20px,-110vh,0) scale(1.1);opacity:0}
}

.aqua-sparkles{
    position:fixed;inset:0;pointer-events:none;z-index:1;
    background-image:
        radial-gradient(2px 2px at 12% 22%,rgba(255,255,255,.9),transparent 70%),
        radial-gradient(1.5px 1.5px at 78% 38%,rgba(207,250,254,.95),transparent 70%),
        radial-gradient(2.5px 2.5px at 32% 76%,rgba(103,232,249,.85),transparent 70%),
        radial-gradient(1px 1px at 62% 12%,rgba(255,255,255,.8),transparent 70%),
        radial-gradient(2px 2px at 88% 84%,rgba(34,211,238,.7),transparent 70%);
    background-size:480px 480px;
    animation:aqTwinkle 5s ease-in-out infinite;
    opacity:.55;
}
@keyframes aqTwinkle{
    0%,100%{opacity:.45}
    50%{opacity:.85}
}

html.dark .aqua-sparkles{opacity:.85}

@keyframes aqBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes aqShine{
    0%{background-position:-200% 0}
    100%{background-position:200% 0}
}

.aqua-shine{
    background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);
    background-size:200% 100%;
    animation:aqShine 2.4s linear infinite;
}

@keyframes aqGlowPulse{
    0%,100%{box-shadow:0 0 0 0 rgba(34,211,238,.5)}
    50%{box-shadow:0 0 0 14px rgba(34,211,238,0)}
}

.aqua-pulse{animation:aqGlowPulse 2.6s ease-out infinite}

::selection{background:rgba(34,211,238,.35);color:#0c2a44}
html.dark ::selection{background:rgba(103,232,249,.4);color:#031424}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg,#67E8F9,#0EA5E9);
    border-radius:10px;
    border:2px solid transparent;
    background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#22D3EE,#0284C7);background-clip:padding-box;border:2px solid transparent}

html.dark ::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#0EA5E9,#155E75);background-clip:padding-box;border:2px solid transparent}