.ibm-plex-sans-arabic-thin { font-family: "IBM Plex Sans Arabic", sans-serif; font-weight: 100; font-style: normal; }
.ibm-plex-sans-arabic-extralight { font-family: "IBM Plex Sans Arabic", sans-serif; font-weight: 200; font-style: normal; }
.ibm-plex-sans-arabic-light { font-family: "IBM Plex Sans Arabic", sans-serif; font-weight: 300; font-style: normal; }
.ibm-plex-sans-arabic-regular { font-family: "IBM Plex Sans Arabic", sans-serif; font-weight: 400; font-style: normal; }
.ibm-plex-sans-arabic-medium { font-family: "IBM Plex Sans Arabic", sans-serif; font-weight: 500; font-style: normal; }
.ibm-plex-sans-arabic-semibold { font-family: "IBM Plex Sans Arabic", sans-serif; font-weight: 600; font-style: normal; }
.ibm-plex-sans-arabic-bold { font-family: "IBM Plex Sans Arabic", sans-serif; font-weight: 700; font-style: normal; }

:root {
    --brand-rgb: 194 30 86;
    --brand-hover-rgb: 233 44 107;
    --brand-950-rgb: 3 0 8;
    --brand-900-rgb: 12 6 20;
    --brand-ink: #fff;
    --brand-glow: rgb(var(--brand-rgb) / 0.4);
    --brand-primary: rgb(var(--brand-rgb));
    --brand-hover: rgb(var(--brand-hover-rgb));
    --brand-dark: rgb(var(--brand-950-rgb));
    --brand-card-bg: rgb(var(--brand-900-rgb));
    --ease-elastic: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-swift: cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="blue"] {
    --brand-rgb: 0 164 240;
    --brand-hover-rgb: 51 182 244;
}

[data-theme="yellow"] {
    --brand-rgb: 255 209 60;
    --brand-hover-rgb: 240 190 46;
    --brand-ink: #000;
}

[data-theme="mint"] {
    --brand-rgb: 99 240 190;
    --brand-hover-rgb: 146 244 209;
    --brand-ink: #000;
}

[data-theme="green"] {
    --brand-rgb: 33 213 21;
    --brand-hover-rgb: 62 235 50;
    --brand-ink: #000;
}

[data-theme="purple"] {
    --brand-rgb: 124 58 237;
    --brand-hover-rgb: 155 105 241;
}

[data-theme="pink"] {
    --brand-rgb: 255 105 180;
    --brand-hover-rgb: 255 156 206;
    --brand-ink: #000;
}

.video-container.hide-cursor,
.video-container.hide-cursor * {
    cursor: none !important;
}

* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

body {
    font-family: "IBM Plex Sans Arabic", sans-serif;
    background-color: var(--brand-dark);
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--brand-rgb) / 0.2) transparent;
    position: relative;
}

::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-primary); box-shadow: 0 0 10px var(--brand-glow); }

.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.hide-scrollbar::-webkit-scrollbar { display: none; }

.noise-veil {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.035;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.aurora-field {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.aurora-blob {
    position: absolute;
    border-radius: 999px;
    filter: blur(90px);
    opacity: 0.35;
    will-change: transform;
}
.aurora-blob.b1 { width: 42vw; height: 42vw; background: radial-gradient(circle, rgb(var(--brand-rgb)), transparent 70%); top: -12vw; right: -10vw; animation: drift-a 22s ease-in-out infinite; }
.aurora-blob.b2 { width: 34vw; height: 34vw; background: radial-gradient(circle, rgb(var(--brand-rgb) / 0.55), transparent 70%); bottom: -14vw; left: -8vw; animation: drift-b 26s ease-in-out infinite; }
.aurora-blob.b3 { width: 24vw; height: 24vw; background: radial-gradient(circle, rgb(var(--brand-rgb) / 0.35), transparent 70%); top: 40%; left: 30%; animation: drift-c 30s ease-in-out infinite; }

@keyframes drift-a {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-6vw, 8vw) scale(1.15); }
}
@keyframes drift-b {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(8vw, -6vw) scale(1.1); }
}
@keyframes drift-c {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-4vw, -6vw) scale(0.9); }
}

.text-shadow-cinema { text-shadow: 0 15px 50px rgba(0,0,0,0.9); }

.dock-nav {
    background: rgba(12, 6, 20, 0.55);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 20px 45px -20px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.04);
}

html {
    overscroll-behavior-y: none;
}
body.has-banner-visible nav.fixed,
body.has-banner-visible header.fixed {
    top: calc(1rem + 2rem) !important;
}
@media (min-width: 768px) {
    body.has-banner-visible nav.fixed,
    body.has-banner-visible header.fixed {
        top: calc(1.5rem + 2rem) !important;
    }
}
body.has-banner nav.fixed,
body.has-banner header.fixed {
    transition: top 0.2s ease;
}

.spotlight-card {
    position: relative;
    --mx: 50%;
    --my: 50%;
}
.spotlight-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(480px circle at var(--mx) var(--my), rgb(var(--brand-hover-rgb) / 0.16), transparent 65%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 1;
}
.spotlight-card:hover::before { opacity: 1; }

.tilt-card {
    transform-style: preserve-3d;
    transition: transform 0.55s var(--ease-elastic), box-shadow 0.55s var(--ease-elastic);
    transform: perspective(1000px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) translateZ(0);
}
.tilt-card:hover {
    box-shadow: 0 35px 70px -20px rgba(0,0,0,0.65), 0 0 40px -8px var(--brand-glow);
}
.tilt-card-inner { transform: translateZ(30px); transform-style: preserve-3d; }

.ribbon-badge {
    clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
}

.grain-ring {
    background: conic-gradient(from 180deg, var(--brand-primary), #ff8fb3, var(--brand-primary));
}

.chapter-index {
    font-variant-numeric: tabular-nums;
    -webkit-text-stroke: 1px rgb(var(--brand-rgb) / 0.5);
    color: transparent;
}

.section-tick {
    width: 3px;
    align-self: stretch;
    min-height: 2.5rem;
    border-radius: 999px;
    background: linear-gradient(180deg, rgb(var(--brand-rgb)), rgb(var(--brand-hover-rgb)));
    box-shadow: 0 0 14px rgb(var(--brand-rgb) / 0.55);
}
.section-badge {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(var(--brand-rgb));
    background: rgb(var(--brand-rgb) / 0.1);
    border: 1px solid rgb(var(--brand-rgb) / 0.2);
}
@media (min-width: 768px) {
    .section-badge { width: 3rem; height: 3rem; border-radius: 1.25rem; }
}

.ripple-loader {
    width: 260px;
    height: 260px;
    position: relative;
}
.ripple-ring {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(0deg, rgb(var(--brand-rgb) / 0.06) 0%, rgb(var(--brand-rgb) / 0.14) 100%);
    border-top: 1px solid rgb(var(--brand-rgb) / 0.9);
    box-shadow: 0 10px 10px rgb(0 0 0 / 0.3);
    backdrop-filter: blur(5px);
    animation: ripple-pulse 2s ease-in-out infinite;
}
.ripple-ring:nth-child(1) { z-index: 5; animation-delay: 0s; }
.ripple-ring:nth-child(2) { z-index: 4; animation-delay: 0.2s; border-top-color: rgb(var(--brand-rgb) / 0.7); }
.ripple-ring:nth-child(3) { z-index: 3; animation-delay: 0.4s; border-top-color: rgb(var(--brand-rgb) / 0.5); }
.ripple-ring:nth-child(4) { z-index: 2; animation-delay: 0.6s; border-top-color: rgb(var(--brand-rgb) / 0.35); }
.ripple-ring:nth-child(5) { z-index: 1; animation-delay: 0.8s; border-top-color: rgb(var(--brand-rgb) / 0.2); }
.ripple-logo {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30%;
}
@keyframes ripple-pulse {
    0% { transform: scale(1); box-shadow: 0 10px 10px rgb(0 0 0 / 0.3); }
    50% { transform: scale(1.3); box-shadow: 0 30px 20px rgb(0 0 0 / 0.3); }
    100% { transform: scale(1); box-shadow: 0 10px 10px rgb(0 0 0 / 0.3); }
}
@media (prefers-reduced-motion: reduce) {
    .ripple-ring { animation: none; }
}

.skeleton-shimmer {
    position: relative;
    overflow: hidden;
    background: rgba(255,255,255,0.04);
}
.skeleton-shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
    animation: shimmer-sweep 1.6s infinite;
}
@keyframes shimmer-sweep {
    100% { transform: translateX(100%); }
}

.magnetic-btn {
    transition: transform 0.35s var(--ease-elastic), background-color 0.3s ease, box-shadow 0.3s ease;
}

.icon-pop { transition: transform 0.4s var(--ease-elastic); }
.group:hover .icon-pop, button:hover .icon-pop { transform: scale(1.15) rotate(-6deg); }

.progress-track { height: 5px; transition: height 0.3s var(--ease-elastic); }
.group\/scrub:hover .progress-track { height: 8px; }
.progress-bar { transition: width 0.12s linear; }
#progress_handle { transition: transform 0.4s var(--ease-elastic); box-shadow: 0 0 0 4px rgb(var(--brand-rgb) / 0.25), 0 0 18px var(--brand-glow); }
.group\/scrub:hover #progress_handle { transform: translateY(-50%) scale(1.3); }

.volume-slider { -webkit-appearance: none; appearance: none; outline: none; height: 22px; background: transparent; cursor: pointer; }
.volume-slider::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 4px;
    background: linear-gradient(to right, rgb(var(--brand-rgb)) var(--volume-fill, 100%), rgba(255,255,255,0.2) var(--volume-fill, 100%));
}
.volume-slider::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(255,255,255,0.2); }
.volume-slider::-moz-range-progress { height: 4px; border-radius: 4px; background: rgb(var(--brand-rgb)); }
.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 12px; width: 12px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    margin-top: -4px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    transition: transform 0.2s ease, background 0.2s ease;
}
.volume-slider::-webkit-slider-thumb:hover { transform: scale(1.3); background: var(--brand-primary); }
.volume-slider::-moz-range-thumb {
    height: 12px; width: 12px; border: none; border-radius: 50%; background: #fff; cursor: pointer;
}

.player-shell { transition: opacity 0.3s ease, transform 0.3s ease; }
.video-container.hide-cursor { cursor: none; }

#controls { transition: opacity 0.35s ease, transform 0.35s ease; }

.season-pill { transition: all 0.4s var(--ease-swift); }
.season-pill[data-active="true"] { box-shadow: 0 12px 28px -8px var(--brand-glow); }

.episode-tile { transition: transform 0.45s var(--ease-elastic), box-shadow 0.45s var(--ease-elastic), border-color 0.4s ease; }
.episode-tile:hover { transform: translateY(-8px); box-shadow: 0 25px 45px -15px rgba(0,0,0,0.55), 0 0 30px -6px var(--brand-glow); }

.poster-frame { transition: transform 0.9s var(--ease-elastic), box-shadow 0.9s ease; }
.group:hover .poster-frame { transform: translateY(-10px) rotate(-1deg) scale(1.02); box-shadow: 0 45px 90px -18px rgba(0,0,0,0.85), 0 0 40px var(--brand-glow); }

.nav-dot { animation: pulse-dot 2.2s ease-in-out infinite; }
@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.7); }
}

.logo-float { animation: float-logo 5s ease-in-out infinite; }
@keyframes float-logo {
    0%, 100% { transform: translateY(0) rotate(0deg); filter: drop-shadow(0 0 15px var(--brand-glow)); }
    50% { transform: translateY(-10px) rotate(4deg); filter: drop-shadow(0 0 28px var(--brand-glow)); }
}

.theme-checkbox { position: relative; width: 24px; height: 24px; }
.theme-checkbox * { box-sizing: border-box; }
.theme-checkbox input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    margin: 0;
    position: absolute;
    top: 0; left: 0;
    width: 24px; height: 24px;
    border: 2px solid rgba(255,255,255,0.25);
    border-radius: 50%;
}
.theme-checkbox input[type="checkbox"]:focus { outline: 0; }
.theme-checkbox label {
    width: 24px; height: 24px;
    background: none;
    border-radius: 50%;
    position: absolute;
    top: 0; left: 0;
    pointer-events: none;
}
.theme-checkbox svg {
    position: absolute;
    top: 5px; left: 4px;
    z-index: 1;
    pointer-events: none;
}
.theme-checkbox svg path {
    stroke: var(--brand-ink);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 19;
    stroke-dashoffset: 19;
    transition: stroke-dashoffset 0.3s ease;
    transition-delay: 0.2s;
}
.theme-checkbox input:checked + label {
    animation: checkbox-splash 0.6s ease forwards;
}
.theme-checkbox input:checked + label + svg path { stroke-dashoffset: 0; }

.heart-container {
    --heart-color: rgb(var(--brand-rgb));
    position: relative;
    width: 2.75rem;
    height: 2.75rem;
    transition: .3s;
}
.heart-container.heart-sm {
    width: 1.5rem;
    height: 1.5rem;
}

.comment-highlight {
    animation: comment-flash 2.8s ease;
    border-radius: 1rem;
}
@keyframes comment-flash {
    0%, 100% { background-color: transparent; box-shadow: 0 0 0 0 rgb(var(--brand-rgb) / 0); }
    12%, 38% { background-color: rgb(var(--brand-rgb) / 0.2); box-shadow: 0 0 0 2px rgb(var(--brand-rgb) / 0.45), 0 0 26px rgb(var(--brand-rgb) / 0.35); }
    52% { background-color: rgb(var(--brand-rgb) / 0.05); box-shadow: 0 0 0 1px rgb(var(--brand-rgb) / 0.15); }
    66%, 86% { background-color: rgb(var(--brand-rgb) / 0.2); box-shadow: 0 0 0 2px rgb(var(--brand-rgb) / 0.45), 0 0 26px rgb(var(--brand-rgb) / 0.35); }
}
.heart-container .checkbox {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    z-index: 20;
    cursor: pointer;
}
.heart-container .svg-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.heart-container .svg-outline,
.heart-container .svg-filled {
    width: 60%;
    height: 60%;
    fill: var(--heart-color);
    position: absolute;
}
.heart-container .svg-filled {
    animation: keyframes-svg-filled 1s;
    display: none;
}
.heart-container .svg-celebrate {
    position: absolute;
    animation: keyframes-svg-celebrate .5s;
    animation-fill-mode: forwards;
    display: none;
    stroke: var(--heart-color);
    fill: var(--heart-color);
    stroke-width: 2px;
}
.heart-container .checkbox:checked ~ .svg-container .svg-filled {
    display: block;
}
.heart-container .checkbox:checked ~ .svg-container .svg-celebrate {
    display: block;
}
@keyframes keyframes-svg-filled {
    0% { transform: scale(0); }
    25% { transform: scale(1.2); }
    50% { transform: scale(1); filter: brightness(1.5); }
}
@keyframes keyframes-svg-celebrate {
    0% { transform: scale(0); }
    50% { opacity: 1; filter: brightness(1.5); }
    100% { transform: scale(1.4); opacity: 0; display: none; }
}

.copy-link-btn.is-copied,
.copy-link-btn.is-copied:hover {
    color: #000 !important;
}

.elastic-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    padding: 6px;
}
.elastic-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.elastic-box {
    width: 24px;
    height: 24px;
    border: 2px solid rgba(255, 255, 255, 0.18);
    border-radius: 7px;
    background-color: rgba(255, 255, 255, 0.03);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.elastic-checkmark {
    width: 14px;
    height: 14px;
    color: rgb(var(--brand-rgb));
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
    transition: stroke-dashoffset 0.15s ease;
}
.elastic-checkbox-label:hover .elastic-box {
    border-color: rgb(var(--brand-rgb) / 0.6);
    background-color: rgb(var(--brand-rgb) / 0.1);
}
.elastic-checkbox-label:active .elastic-box {
    transform: scaleX(1.2) scaleY(0.8);
    border-radius: 5px 5px 10px 10px;
}
.elastic-input:checked + .elastic-box {
    background-color: rgb(var(--brand-rgb));
    border-color: rgb(var(--brand-rgb));
    animation: elastic-snap 0.4s cubic-bezier(0.25, 1.5, 0.5, 1) forwards;
}
.elastic-input:checked + .elastic-box .elastic-checkmark {
    color: var(--brand-ink);
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0.15s;
}
.elastic-input:not(:checked) + .elastic-box {
    animation: elastic-release 0.3s ease-out;
}
.elastic-text {
    color: #94a3b8;
    font-size: 12px;
    font-weight: 600;
    transition: color 0.2s ease;
}
.elastic-input:checked ~ .elastic-text {
    color: rgb(var(--brand-rgb));
}
@keyframes elastic-snap {
    0% { transform: scaleX(1.2) scaleY(0.8); }
    40% { transform: scaleX(0.7) scaleY(1.3); border-radius: 12px 12px 6px 6px; }
    70% { transform: scaleX(1.1) scaleY(0.9); border-radius: 6px; }
    100% { transform: scale(1); border-radius: 7px; }
}
@keyframes elastic-release {
    0% { transform: scale(0.8); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}
.elastic-input:focus-visible + .elastic-box {
    outline: 2px solid rgb(var(--brand-rgb));
    outline-offset: 3px;
}

@keyframes checkbox-splash {
    40% {
        background: rgb(var(--brand-rgb));
        box-shadow: 0 -18px 0 -8px rgb(var(--brand-rgb)), 16px -8px 0 -8px rgb(var(--brand-rgb)), 16px 8px 0 -8px rgb(var(--brand-rgb)), 0 18px 0 -8px rgb(var(--brand-rgb)), -16px 8px 0 -8px rgb(var(--brand-rgb)), -16px -8px 0 -8px rgb(var(--brand-rgb));
    }
    100% {
        background: rgb(var(--brand-rgb));
        box-shadow: 0 -36px 0 -10px transparent, 32px -16px 0 -10px transparent, 32px 16px 0 -10px transparent, 0 36px 0 -10px transparent, -32px 16px 0 -10px transparent, -32px -16px 0 -10px transparent;
    }
}

.reveal-up { animation: reveal-up 0.7s var(--ease-elastic) both; }
@keyframes reveal-up {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in { animation: fade-in 0.6s ease both; }
@keyframes fade-in {
    from { opacity: 0; } to { opacity: 1; }
}

.zoom-in { animation: zoom-in 0.55s var(--ease-elastic) both; }
@keyframes zoom-in {
    from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); }
}

.shake-x { animation: shake-x 0.5s ease; }
@keyframes shake-x {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
}

@media (max-width: 767px) {
    .aurora-blob { filter: blur(60px); opacity: 0.25; }
}

.ai-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 1.15rem;
    border-radius: 9999px;
    color: rgb(var(--brand-rgb));
    background: rgb(var(--brand-rgb) / 0.08);
    border: 1px solid rgb(var(--brand-rgb) / 0.3);
    box-shadow: 0 0 22px rgb(var(--brand-rgb) / 0.12);
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.ai-toggle-mark {
    display: flex;
    flex: none;
    transform-origin: center center;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), filter 0.45s ease;
}
.ai-toggle-mark svg { display: block; }
.ai-toggle-label {
    display: block;
    transition: opacity 0.3s ease;
}
.ai-toggle-btn:hover .ai-toggle-label,
.ai-toggle-btn:focus-visible .ai-toggle-label { opacity: 0; }
.ai-toggle-btn:hover .ai-toggle-mark,
.ai-toggle-btn:focus-visible .ai-toggle-mark {
    transform: translateX(var(--ai-shift, 1rem)) scale(1.3);
    filter: drop-shadow(0 0 8px rgb(var(--brand-rgb) / 0.55));
}
.ai-toggle-btn:hover:active { transform: scale(0.95); }
.ai-toggle-btn:hover { background: rgb(var(--brand-rgb) / 0.16); transform: translateY(-1px); }
.ai-toggle-btn[aria-pressed="true"] {
    background: rgb(var(--brand-rgb));
    color: var(--brand-ink);
    border-color: rgb(var(--brand-rgb));
}
.ai-toggle-btn:disabled { pointer-events: none; }

.ai-field-ring {
    border-radius: 1.6rem;
    padding: 2px;
    background: linear-gradient(120deg, rgb(72 147 252 / 0.55), rgb(var(--brand-rgb) / 0.6), rgb(189 153 254 / 0.55), rgb(255 95 159 / 0.45), rgb(72 147 252 / 0.55));
    background-size: 320% 320%;
    animation: ai-ring-shift 7s ease infinite;
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.5);
}
.ai-field-ring:focus-within { box-shadow: 0 0 34px rgb(var(--brand-rgb) / 0.28), 0 25px 50px -12px rgb(0 0 0 / 0.5); }
.ai-field-inner {
    border-radius: calc(1.6rem - 2px);
    background: rgb(var(--brand-950-rgb) / 0.96);
}
.ai-logo-pulse { animation: ai-logo-float 2.4s ease-in-out infinite, ai-logo-hue 2.6s linear infinite; }
.ai-submit-btn {
    color: #fff;
    text-shadow: 0 1px 2px rgb(0 0 0 / 0.35);
    background: linear-gradient(110deg, #4893fc, #7c6dfa, #bd99fe, #ff5f9f, #4893fc);
    background-size: 300% 100%;
    animation: ai-ring-shift 2.8s linear infinite;
    box-shadow: 0 8px 24px rgb(124 109 250 / 0.4);
}
#aiInput { min-height: 4.75rem; }
@keyframes ai-ring-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes ai-logo-hue {
    from { filter: drop-shadow(0 0 7px rgb(72 147 252 / 0.85)) hue-rotate(0deg) saturate(1.4); }
    to { filter: drop-shadow(0 0 7px rgb(72 147 252 / 0.85)) hue-rotate(360deg) saturate(1.4); }
}
@keyframes ai-logo-float {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.12) rotate(8deg); }
}

.ai-gen {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    direction: ltr;
    width: 180px;
    height: 180px;
    font-size: 1.2em;
    font-weight: 300;
    color: #fff;
    border-radius: 50%;
    user-select: none;
}
.ai-gen-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-color: transparent;
    animation: ai-gen-rotate 2s linear infinite;
    z-index: 0;
}
.ai-gen-letter {
    position: relative;
    display: inline-block;
    opacity: 0.4;
    animation: ai-letter-anim 2s infinite;
    z-index: 1;
}
.ai-gen-letter:nth-child(1) { animation-delay: 0.0s; }
.ai-gen-letter:nth-child(2) { animation-delay: 0.1s; }
.ai-gen-letter:nth-child(3) { animation-delay: 0.2s; }
.ai-gen-letter:nth-child(4) { animation-delay: 0.3s; }
.ai-gen-letter:nth-child(5) { animation-delay: 0.4s; }
.ai-gen-letter:nth-child(6) { animation-delay: 0.5s; }
.ai-gen-letter:nth-child(7) { animation-delay: 0.6s; }
.ai-gen-letter:nth-child(8) { animation-delay: 0.7s; }
.ai-gen-letter:nth-child(9) { animation-delay: 0.8s; }
.ai-gen-letter:nth-child(10) { animation-delay: 0.9s; }

@keyframes ai-gen-rotate {
    0% {
        transform: rotate(90deg);
        box-shadow: 0 10px 20px 0 #fff inset, 0 20px 30px 0 #ad5fff inset, 0 60px 60px 0 #471eec inset;
    }
    50% {
        transform: rotate(270deg);
        box-shadow: 0 10px 20px 0 #fff inset, 0 20px 10px 0 #d60a47 inset, 0 40px 60px 0 #311e80 inset;
    }
    100% {
        transform: rotate(450deg);
        box-shadow: 0 10px 20px 0 #fff inset, 0 20px 30px 0 #ad5fff inset, 0 60px 60px 0 #471eec inset;
    }
}
@keyframes ai-letter-anim {
    0%, 100% { opacity: 0.4; transform: translateY(0); }
    20% { opacity: 1; transform: scale(1.15); }
    40% { opacity: 0.7; transform: translateY(0); }
}

.ai-search {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    direction: ltr;
    color: #fff;
    user-select: none;
}
.ai-search-ring {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: transparent;
    animation: ai-search-rotate 1.5s linear infinite;
}
.ai-search-letters { display: inline-flex; gap: 1px; }
.ai-search-letter {
    display: inline-block;
    opacity: 0.4;
    animation: ai-letter-anim 2s infinite;
}
.ai-search-letter:nth-child(1) { animation-delay: 0.0s; }
.ai-search-letter:nth-child(2) { animation-delay: 0.1s; }
.ai-search-letter:nth-child(3) { animation-delay: 0.2s; }
.ai-search-letter:nth-child(4) { animation-delay: 0.3s; }
.ai-search-letter:nth-child(5) { animation-delay: 0.4s; }
.ai-search-letter:nth-child(6) { animation-delay: 0.5s; }
.ai-search-letter:nth-child(7) { animation-delay: 0.6s; }
.ai-search-letter:nth-child(8) { animation-delay: 0.7s; }
.ai-search-letter:nth-child(9) { animation-delay: 0.8s; }

@keyframes ai-search-rotate {
    0% {
        transform: rotate(90deg);
        box-shadow: 0 1px 1px 0 #fff inset, 0 3px 5px 0 #ff5f9f inset, 0 4px 4px 0 #0693ff inset;
    }
    50% {
        transform: rotate(270deg);
        background: #7c0911;
        box-shadow: 0 1px 1px 0 #fff inset, 0 3px 5px 0 #d60a47 inset, 0 4px 4px 0 #fbef19 inset;
    }
    100% {
        transform: rotate(450deg);
        box-shadow: 0 1px 1px 0 #fff inset, 0 3px 5px 0 #ff5f9f inset, 0 4px 4px 0 #28a9ff inset;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ai-field-ring, .ai-logo-pulse, .ai-submit-btn { animation: none; }
}

#resultsSection { scroll-margin-top: 7rem; }