:root,
:root[data-theme="dark"] {
    --main-bg: radial-gradient(circle at 18% 24%, #061a2f 0%, #050914 42%, #16051f 100%);
    --box-bg: rgba(7, 19, 34, 0.16);
    --glass-card-bg: rgba(8, 17, 32, 0.28);
    --blue: #0088ff;
    --pink: #ff00ff;
    --yellow: #fff24a;
    --green: #6fffb1;
    --red: #ff4d67;
    --turquoise: #00f6ff;
    --turquoise-lite: color-mix(in srgb, var(--turquoise) 42%, white);
    --turquoise-bright: color-mix(in srgb, var(--turquoise) 94%, white);
    --turquoise-soft: color-mix(in srgb, var(--turquoise) 20%, white);
    --text-color: color-mix(in srgb, var(--turquoise) 20%, white);
    --text-color-white: color-mix(in srgb, var(--turquoise) 20%, white);
    --text-color-1: #ffffff;
    --text-active-color: #ffffff;
    --description-color: var(--turquoise-lite);
    --glow-gradient-lite: linear-gradient(135deg, #ff00ff, #0088ff, #00f6ff, #ff00ff);
    --elem-gradient-1: linear-gradient(160deg, color-mix(in srgb, var(--turquoise) 22%, transparent), rgba(255, 0, 255, 0.16)), rgba(0, 0, 0, 0.28);
    --glass-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(0, 0, 0, 0.12));
    --shadow: 0 22px 44px rgba(0, 0, 0, 0.55), 0 0 34px rgba(0, 246, 255, 0.18), 0 0 48px rgba(255, 0, 255, 0.09), inset 0 1px 0 #ffffff1a;
    --revers-shadow: inset 0 0 20px rgba(0, 246, 255, 0.28);
    --hover-shadow: 0 30px 52px #000000a6, 0 0 48px rgba(0, 246, 255, 0.36), 0 0 28px rgba(255, 0, 255, 0.18);
    --easy-background: rgb(7 18 34 / 72%);
    --elem-bg: rgba(1, 8, 18, 0.5);
    --input-autofill-bg: #020814;
    --lite-shadow: 0 0 14px rgba(0, 246, 255, 0.45);
    --hard-shadow: 0 0 28px rgba(0, 246, 255, 0.92);
    --text-shadow: 0 0 6px rgba(0, 246, 255, 0.92);
    --hover-bg: rgba(0, 246, 255, 0.18);
    --input-bg: rgba(1, 7, 18, 0.36);
    --glow-effect: rgba(0, 246, 255, 0.14), rgba(8, 12, 25, 0);
    --surface-panel-bg: rgba(4, 11, 30, 0.76);
    --surface-panel-border: 1px solid rgba(151, 76, 255, 0.38);
    --text-muted: rgba(220, 232, 255, 0.68);
    --cta-gradient: linear-gradient(100deg, #ff00ff 0%, #8f44ff 46%, #00f6ff 100%);
    --cta-shadow: 0 0 30px rgba(255, 0, 255, 0.46), 0 0 44px rgba(0, 246, 255, 0.22);
    --select-bg: rgba(3, 8, 18, 0.98);
}

:root[data-theme="light"] {
    --main-bg: radial-gradient(circle at 16% 20%, #f5fbff 0%, #dcecff 48%, #f9ecff 100%);
    --box-bg: rgba(255, 255, 255, 0.32);
    --glass-card-bg: rgba(255, 255, 255, 0.72);
    --blue: #006edc;
    --pink: #c42bbf;
    --yellow: #d6b900;
    --green: #0a9b54;
    --red: #c93636;
    --turquoise: #008fb5;
    --turquoise-lite: color-mix(in srgb, var(--turquoise) 78%, black);
    --turquoise-bright: color-mix(in srgb, var(--turquoise) 86%, white);
    --turquoise-soft: color-mix(in srgb, var(--turquoise) 20%, white);
    --text-color: #28435a;
    --text-color-white: color-mix(in srgb, var(--turquoise) 20%, white);
    --text-color-1: #071929;
    --text-active-color: #ffffff;
    --description-color: #315c76;
    --glow-gradient-lite: linear-gradient(135deg, #f3a6ff, #7fc8ff, color-mix(in srgb, var(--turquoise) 42%, white), #f3a6ff);
    --elem-gradient-1: linear-gradient(160deg, color-mix(in srgb, var(--turquoise) 18%, transparent), rgba(196, 43, 191, 0.16)), rgba(255, 255, 255, 0.66);
    --glass-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(228, 243, 255, 0.46));
    --shadow: 0 20px 40px rgba(46, 90, 125, 0.2), 0 0 30px rgba(0, 143, 181, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.78);
    --revers-shadow: inset 0 0 18px rgba(0, 143, 181, 0.18);
    --hover-shadow: 0 24px 44px rgba(49, 89, 118, 0.24), 0 0 34px rgba(196, 43, 191, 0.14);
    --easy-background: rgb(255 255 255 / 74%);
    --elem-bg: rgba(255, 255, 255, 0.5);
    --input-autofill-bg: #eef8ff;
    --lite-shadow: 0 0 14px rgba(0, 143, 181, 0.22);
    --hard-shadow: 0 0 25px rgba(0, 143, 181, 0.4);
    --text-shadow: 0 0 5px rgba(0, 143, 181, 0.26);
    --hover-bg: color-mix(in srgb, var(--turquoise) 78%, black);
    --input-bg: rgb(255 255 255 / 44%);
    --glow-effect: rgba(0, 143, 181, 0.05), rgba(8, 12, 25, 0);
    --surface-panel-bg: rgba(255, 255, 255, 0.7);
    --surface-panel-border: 1px solid rgba(0, 143, 181, 0.22);
    --text-muted: rgb(25 32 39 / 68%);
    --cta-gradient: linear-gradient(100deg, #f064ff 0%, #7c5cff 48%, #18bce5 100%);
    --cta-shadow: 0 18px 38px rgba(49, 89, 118, 0.2), 0 0 30px rgba(0, 143, 181, 0.18);
    --select-bg: rgb(255 255 255 / 96%);
}