/* Inter: add Google Fonts link in HTML if needed */
.__className_f367f3 {
font-family:Inter,Inter Fallback;font-style:normal}
.__variable_f367f3 {
--font-inter:"Inter","Inter Fallback"}
:root {
--transition:all .2s ease-in-out;--transition-scissed:.2s ease-in-out;--blur:15px;--border-radius:7.5px;--lg-radius:24px;--md-radius:12px;--sm-radius:8px;--srounding-radius:50%;--slg-padding:32px;--lg-padding:24px;--md-padding:16px;--sm-padding:12px;--ssm-padding:8px;--font-size:15px;--z-index:10000;--family-regular:"Inter",sans-serif;--family-medium:"Inter",sans-serif;--text-color:#ebebeb;--text-color-alower:#ffffff7a;--bg-color:#030303;--bg-second-color:#161519;--button-bg:color-mix(in srgb,var(--bg-second-color),black 3.5%);--border-color:#ffffff14;--accent-color:#06403b;--btn-primary-bg:var(--accent-color);--btn-primary-border:var(--accent-color);--btn-primary-text:#ecf8f6}
[data-theme=light] {
--text-color:#1f1f1f;--text-color-alower:#5a5a5a;--bg-color:#f8f7f4;--bg-second-color:#efeee9;--button-bg:#e8e7e2;--border-color:rgba(0,0,0,0.08);--accent-color:#0a6b63;--btn-primary-bg:var(--accent-color);--btn-primary-border:var(--accent-color);--btn-primary-text:#f2fbfa}
/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */@layer properties {
@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {
*,::backdrop,:after,:before {
--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-ease:initial}
}
}
@layer theme {
:host,:root {
--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-emerald-500:oklch(69.6% .17 162.48);--color-teal-500:oklch(70.4% .14 182.503);--color-cyan-500:oklch(71.5% .143 215.221);--color-white:#fff;--spacing:.25rem;--ease-out:cubic-bezier(0,0,.2,1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}
}
@layer base {
*,::backdrop,:after,:before {
box-sizing:border-box;border:0 solid;margin:0;padding:0}
::file-selector-button {
box-sizing:border-box;border:0 solid;margin:0;padding:0}
:host,html {
-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}
hr {
height:0;color:inherit;border-top-width:1px}
abbr:where([title]) {
-webkit-text-decoration:underline dotted;text-decoration:underline dotted}
h1,h2,h3,h4,h5,h6 {
font-size:inherit;font-weight:inherit}
a {
color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}
b,strong {
font-weight:bolder}
code,kbd,pre,samp {
font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}
small {
font-size:80%}
sub,sup {
vertical-align:baseline;font-size:75%;line-height:0;position:relative}
sub {
bottom:-.25em}
sup {
top:-.5em}
table {
text-indent:0;border-color:inherit;border-collapse:collapse}
:-moz-focusring {
outline:auto}
progress {
vertical-align:baseline}
summary {
display:list-item}
menu,ol,ul {
list-style:none}
audio,canvas,embed,iframe,img,object,svg,video {
vertical-align:middle;display:block}
img,video {
max-width:100%;height:auto}
button,input,optgroup,select,textarea {
font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}
::file-selector-button {
font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}
:where(select:is([multiple],[size])) optgroup {
font-weight:bolder}
:where(select:is([multiple],[size])) optgroup option {
padding-inline-start:20px}
::file-selector-button {
margin-inline-end:4px}
::placeholder {
opacity:1}
@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
::placeholder {
color:currentColor}
@supports (color:color-mix(in lab,red,red)) {
::placeholder {
color:color-mix(in oklab,currentcolor 50%,transparent)}
}
}
textarea {
resize:vertical}
::-webkit-search-decoration {
-webkit-appearance:none}
::-webkit-date-and-time-value {
min-height:1lh;text-align:inherit}
::-webkit-datetime-edit {
display:inline-flex}
::-webkit-datetime-edit-fields-wrapper {
padding:0}
::-webkit-datetime-edit,::-webkit-datetime-edit-year-field {
padding-block:0}
::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-month-field {
padding-block:0}
::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field {
padding-block:0}
::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-second-field {
padding-block:0}
::-webkit-datetime-edit-meridiem-field {
padding-block:0}
::-webkit-calendar-picker-indicator {
line-height:1}
:-moz-ui-invalid {
box-shadow:none}
button,input:where([type=button],[type=reset],[type=submit]) {
appearance:button}
::file-selector-button {
appearance:button}
::-webkit-inner-spin-button,::-webkit-outer-spin-button {
height:auto}
[hidden]:where(:not([hidden=until-found])) {
display:none!important}
}
@layer components;@layer utilities {
.pointer-events-none {
pointer-events:none}
.visible {
visibility:visible}
.absolute {
position:absolute}
.fixed {
position:fixed}
.relative {
position:relative}
.inset-0 {
inset:calc(var(--spacing)*0)}
.top-\[5\%\] {
top:5%}
.top-\[10\%\] {
top:10%}
.top-\[12\%\] {
top:12%}
.top-\[15\%\] {
top:15%}
.top-\[18\%\] {
top:18%}
.top-\[60\%\] {
top:60%}
.top-\[62\%\] {
top:62%}
.top-\[70\%\] {
top:70%}
.right-\[-5\%\] {
right:-5%}
.right-\[-6\%\] {
right:-6%}
.right-\[15\%\] {
right:15%}
.right-\[18\%\] {
right:18%}
.bottom-\[5\%\] {
bottom:5%}
.bottom-\[8\%\] {
bottom:8%}
.bottom-\[10\%\] {
bottom:10%}
.left-\[-8\%\] {
left:-8%}
.left-\[-10\%\] {
left:-10%}
.left-\[-12\%\] {
left:-12%}
.left-\[5\%\] {
left:5%}
.left-\[6\%\] {
left:6%}
.left-\[8\%\] {
left:8%}
.left-\[20\%\] {
left:20%}
.container {
width:100%}
@media (min-width:40rem) {
.container {
max-width:40rem}
}
@media (min-width:48rem) {
.container {
max-width:48rem}
}
@media (min-width:64rem) {
.container {
max-width:64rem}
}
@media (min-width:80rem) {
.container {
max-width:80rem}
}
@media (min-width:96rem) {
.container {
max-width:96rem}
}
.block {
display:block}
.hidden {
display:none}
.resize {
resize:both}
.overflow-hidden {
overflow:hidden}
.rounded {
border-radius:.25rem}
.rounded-full {
border-radius:3.40282e+38px}
.border {
border-style:var(--tw-border-style);border-width:1px}
.bg-gradient-to-r {
--tw-gradient-position:to right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}
.from-\[\#0A6B63\]\/\[0\.2\] {
--tw-gradient-from:oklab(47.6024% -.0807098 -.00804982/.2);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}
.from-\[\#0A6B63\]\/\[0\.16\] {
--tw-gradient-from:oklab(47.6024% -.0807097 -.00804982/.16);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}
.from-cyan-500\/\[0\.15\] {
--tw-gradient-from:#00b7d726}
@supports (color:color-mix(in lab,red,red)) {
.from-cyan-500\/\[0\.15\] {
--tw-gradient-from:color-mix(in oklab,var(--color-cyan-500)15%,transparent)}
}
.from-cyan-500\/\[0\.15\] {
--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}
.from-cyan-500\/\[0\.18\] {
--tw-gradient-from:#00b7d72e}
@supports (color:color-mix(in lab,red,red)) {
.from-cyan-500\/\[0\.18\] {
--tw-gradient-from:color-mix(in oklab,var(--color-cyan-500)18%,transparent)}
}
.from-cyan-500\/\[0\.18\] {
--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}
.from-emerald-500\/\[0\.2\] {
--tw-gradient-from:#00bb7f33}
@supports (color:color-mix(in lab,red,red)) {
.from-emerald-500\/\[0\.2\] {
--tw-gradient-from:color-mix(in oklab,var(--color-emerald-500)20%,transparent)}
}
.from-emerald-500\/\[0\.2\] {
--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}
.from-emerald-500\/\[0\.16\] {
--tw-gradient-from:#00bb7f29}
@supports (color:color-mix(in lab,red,red)) {
.from-emerald-500\/\[0\.16\] {
--tw-gradient-from:color-mix(in oklab,var(--color-emerald-500)16%,transparent)}
}
.from-emerald-500\/\[0\.16\] {
--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}
.from-teal-500\/\[0\.2\] {
--tw-gradient-from:#00baa733}
@supports (color:color-mix(in lab,red,red)) {
.from-teal-500\/\[0\.2\] {
--tw-gradient-from:color-mix(in oklab,var(--color-teal-500)20%,transparent)}
}
.from-teal-500\/\[0\.2\] {
--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}
.from-teal-500\/\[0\.16\] {
--tw-gradient-from:#00baa729}
@supports (color:color-mix(in lab,red,red)) {
.from-teal-500\/\[0\.16\] {
--tw-gradient-from:color-mix(in oklab,var(--color-teal-500)16%,transparent)}
}
.from-teal-500\/\[0\.16\] {
--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}
.from-white\/\[0\.08\] {
--tw-gradient-from:#ffffff14}
@supports (color:color-mix(in lab,red,red)) {
.from-white\/\[0\.08\] {
--tw-gradient-from:color-mix(in oklab,var(--color-white)8%,transparent)}
}
.from-white\/\[0\.08\] {
--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}
.to-transparent {
--tw-gradient-to:transparent;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}
.antialiased {
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.blur {
--tw-blur:blur(8px)}
.blur,.filter {
filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}
.transition {
transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}
.ease-out {
--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}
@media (min-width:48rem) {
.md\:top-\[10\%\] {
top:10%}
.md\:top-\[15\%\] {
top:15%}
.md\:top-\[20\%\] {
top:20%}
.md\:top-\[75\%\] {
top:75%}
.md\:right-\[0\%\] {
right:0}
.md\:right-\[20\%\] {
right:20%}
.md\:bottom-\[10\%\] {
bottom:10%}
.md\:left-\[-5\%\] {
left:-5%}
.md\:left-\[10\%\] {
left:10%}
.md\:left-\[25\%\] {
left:25%}
}
}
[data-aos][data-aos][data-aos-duration="50"],body[data-aos-duration="50"] [data-aos] {
transition-duration:50ms}
[data-aos][data-aos][data-aos-delay="50"],body[data-aos-delay="50"] [data-aos] {
transition-delay:0}
[data-aos][data-aos][data-aos-delay="50"].aos-animate,body[data-aos-delay="50"] [data-aos].aos-animate {
transition-delay:50ms}
[data-aos][data-aos][data-aos-duration="100"],body[data-aos-duration="100"] [data-aos] {
transition-duration:.1s}
[data-aos][data-aos][data-aos-delay="100"],body[data-aos-delay="100"] [data-aos] {
transition-delay:0}
[data-aos][data-aos][data-aos-delay="100"].aos-animate,body[data-aos-delay="100"] [data-aos].aos-animate {
transition-delay:.1s}
[data-aos][data-aos][data-aos-duration="150"],body[data-aos-duration="150"] [data-aos] {
transition-duration:.15s}
[data-aos][data-aos][data-aos-delay="150"],body[data-aos-delay="150"] [data-aos] {
transition-delay:0}
[data-aos][data-aos][data-aos-delay="150"].aos-animate,body[data-aos-delay="150"] [data-aos].aos-animate {
transition-delay:.15s}
[data-aos][data-aos][data-aos-duration="200"],body[data-aos-duration="200"] [data-aos] {
transition-duration:.2s}
[data-aos][data-aos][data-aos-delay="200"],body[data-aos-delay="200"] [data-aos] {
transition-delay:0}
[data-aos][data-aos][data-aos-delay="200"].aos-animate,body[data-aos-delay="200"] [data-aos].aos-animate {
transition-delay:.2s}
[data-aos][data-aos][data-aos-duration="250"],body[data-aos-duration="250"] [data-aos] {
transition-duration:.25s}
[data-aos][data-aos][data-aos-delay="250"],body[data-aos-delay="250"] [data-aos] {
transition-delay:0}
[data-aos][data-aos][data-aos-delay="250"].aos-animate,body[data-aos-delay="250"] [data-aos].aos-animate {
transition-delay:.25s}
[data-aos][data-aos][data-aos-duration="300"],body[data-aos-duration="300"] [data-aos] {
transition-duration:.3s}
[data-aos][data-aos][data-aos-delay="300"],body[data-aos-delay="300"] [data-aos] {
transition-delay:0}
[data-aos][data-aos][data-aos-delay="300"].aos-animate,body[data-aos-delay="300"] [data-aos].aos-animate {
transition-delay:.3s}
[data-aos][data-aos][data-aos-duration="350"],body[data-aos-duration="350"] [data-aos] {
transition-duration:.35s}
[data-aos][data-aos][data-aos-delay="350"],body[data-aos-delay="350"] [data-aos] {
transition-delay:0}
[data-aos][data-aos][data-aos-delay="350"].aos-animate,body[data-aos-delay="350"] [data-aos].aos-animate {
transition-delay:.35s}
[data-aos][data-aos][data-aos-duration="400"],body[data-aos-duration="400"] [data-aos] {
transition-duration:.4s}
[data-aos][data-aos][data-aos-delay="400"],body[data-aos-delay="400"] [data-aos] {
transition-delay:0}
[data-aos][data-aos][data-aos-delay="400"].aos-animate,body[data-aos-delay="400"] [data-aos].aos-animate {
transition-delay:.4s}
[data-aos][data-aos][data-aos-duration="450"],body[data-aos-duration="450"] [data-aos] {
transition-duration:.45s}
[data-aos][data-aos][data-aos-delay="450"],body[data-aos-delay="450"] [data-aos] {
transition-delay:0}
[data-aos][data-aos][data-aos-delay="450"].aos-animate,body[data-aos-delay="450"] [data-aos].aos-animate {
transition-delay:.45s}
[data-aos][data-aos][data-aos-duration="500"],body[data-aos-duration="500"] [data-aos] {
transition-duration:.5s}
[data-aos][data-aos][data-aos-delay="500"],body[data-aos-delay="500"] [data-aos] {
transition-delay:0}
[data-aos][data-aos][data-aos-delay="500"].aos-animate,body[data-aos-delay="500"] [data-aos].aos-animate {
transition-delay:.5s}
[data-aos][data-aos][data-aos-duration="550"],body[data-aos-duration="550"] [data-aos] {
transition-duration:.55s}
[data-aos][data-aos][data-aos-delay="550"],body[data-aos-delay="550"] [data-aos] {
transition-delay:0}
[data-aos][data-aos][data-aos-delay="550"].aos-animate,body[data-aos-delay="550"] [data-aos].aos-animate {
transition-delay:.55s}
[data-aos][data-aos][data-aos-duration="600"],body[data-aos-duration="600"] [data-aos] {
transition-duration:.6s}
[data-aos][data-aos][data-aos-delay="600"],body[data-aos-delay="600"] [data-aos] {
transition-delay:0}
[data-aos][data-aos][data-aos-delay="600"].aos-animate,body[data-aos-delay="600"] [data-aos].aos-animate {
transition-delay:.6s}
[data-aos][data-aos][data-aos-duration="650"],body[data-aos-duration="650"] [data-aos] {
transition-duration:.65s}
[data-aos][data-aos][data-aos-delay="650"],body[data-aos-delay="650"] [data-aos] {
transition-delay:0}
[data-aos][data-aos][data-aos-delay="650"].aos-animate,body[data-aos-delay="650"] [data-aos].aos-animate {
transition-delay:.65s}
[data-aos][data-aos][data-aos-duration="700"],body[data-aos-duration="700"] [data-aos] {
transition-duration:.7s}
[data-aos][data-aos][data-aos-delay="700"],body[data-aos-delay="700"] [data-aos] {
transition-delay:0}
[data-aos][data-aos][data-aos-delay="700"].aos-animate,body[data-aos-delay="700"] [data-aos].aos-animate {
transition-delay:.7s}
[data-aos][data-aos][data-aos-duration="750"],body[data-aos-duration="750"] [data-aos] {
transition-duration:.75s}
[data-aos][data-aos][data-aos-delay="750"],body[data-aos-delay="750"] [data-aos] {
transition-delay:0}
[data-aos][data-aos][data-aos-delay="750"].aos-animate,body[data-aos-delay="750"] [data-aos].aos-animate {
transition-delay:.75s}
[data-aos][data-aos][data-aos-duration="800"],body[data-aos-duration="800"] [data-aos] {
transition-duration:.8s}
[data-aos][data-aos][data-aos-delay="800"],body[data-aos-delay="800"] [data-aos] {
transition-delay:0}
[data-aos][data-aos][data-aos-delay="800"].aos-animate,body[data-aos-delay="800"] [data-aos].aos-animate {
transition-delay:.8s}
[data-aos][data-aos][data-aos-duration="850"],body[data-aos-duration="850"] [data-aos] {
transition-duration:.85s}
[data-aos][data-aos][data-aos-delay="850"],body[data-aos-delay="850"] [data-aos] {
transition-delay:0}
[data-aos][data-aos][data-aos-delay="850"].aos-animate,body[data-aos-delay="850"] [data-aos].aos-animate {
transition-delay:.85s}
[data-aos][data-aos][data-aos-duration="900"],body[data-aos-duration="900"] [data-aos] {
transition-duration:.9s}
[data-aos][data-aos][data-aos-delay="900"],body[data-aos-delay="900"] [data-aos] {
transition-delay:0}
[data-aos][data-aos][data-aos-delay="900"].aos-animate,body[data-aos-delay="900"] [data-aos].aos-animate {
transition-delay:.9s}
[data-aos][data-aos][data-aos-duration="950"],body[data-aos-duration="950"] [data-aos] {
transition-duration:.95s}
[data-aos][data-aos][data-aos-delay="950"],body[data-aos-delay="950"] [data-aos] {
transition-delay:0}
[data-aos][data-aos][data-aos-delay="950"].aos-animate,body[data-aos-delay="950"] [data-aos].aos-animate {
transition-delay:.95s}
[data-aos][data-aos][data-aos-duration="1000"],body[data-aos-duration="1000"] [data-aos] {
transition-duration:1s}
[data-aos][data-aos][data-aos-delay="1000"],body[data-aos-delay="1000"] [data-aos] {
transition-delay:0}
[data-aos][data-aos][data-aos-delay="1000"].aos-animate,body[data-aos-delay="1000"] [data-aos].aos-animate {
transition-delay:1s}
[data-aos][data-aos][data-aos-duration="1050"],body[data-aos-duration="1050"] [data-aos] {
transition-duration:1.05s}
[data-aos][data-aos][data-aos-delay="1050"],body[data-aos-delay="1050"] [data-aos] {
transition-delay:0}
[data-aos][data-aos][data-aos-delay="1050"].aos-animate,body[data-aos-delay="1050"] [data-aos].aos-animate {
transition-delay:1.05s}
[data-aos][data-aos][data-aos-duration="1100"],body[data-aos-duration="1100"] [data-aos] {
transition-duration:1.1s}
[data-aos][data-aos][data-aos-delay="1100"],body[data-aos-delay="1100"] [data-aos] {
transition-delay:0}
[data-aos][data-aos][data-aos-delay="1100"].aos-animate,body[data-aos-delay="1100"] [data-aos].aos-animate {
transition-delay:1.1s}
[data-aos][data-aos][data-aos-duration="1150"],body[data-aos-duration="1150"] [data-aos] {
transition-duration:1.15s}
[data-aos][data-aos][data-aos-delay="1150"],body[data-aos-delay="1150"] [data-aos] {
transition-delay:0}
[data-aos][data-aos][data-aos-delay="1150"].aos-animate,body[data-aos-delay="1150"] [data-aos].aos-animate {
transition-delay:1.15s}
[data-aos][data-aos][data-aos-duration="1200"],body[data-aos-duration="1200"] [data-aos] {
transition-duration:1.2s}
[data-aos][data-aos][data-aos-delay="1200"],body[data-aos-delay="1200"] [data-aos] {
transition-delay:0}
[data-aos][data-aos][data-aos-delay="1200"].aos-animate,body[data-aos-delay="1200"] [data-aos].aos-animate {
transition-delay:1.2s}
[data-aos][data-aos][data-aos-duration="1250"],body[data-aos-duration="1250"] [data-aos] {
transition-duration:1.25s}
[data-aos][data-aos][data-aos-delay="1250"],body[data-aos-delay="1250"] [data-aos] {
transition-delay:0}
[data-aos][data-aos][data-aos-delay="1250"].aos-animate,body[data-aos-delay="1250"] [data-aos].aos-animate {
transition-delay:1.25s}
[data-aos][data-aos][data-aos-duration="1300"],body[data-aos-duration="1300"] [data-aos] {
transition-duration:1.3s}
[data-aos][data-aos][data-aos-delay="1300"],body[data-aos-delay="1300"] [data-aos] {
transition-delay:0}
[data-aos][data-aos][data-aos-delay="1300"].aos-animate,body[data-aos-delay="1300"] [data-aos].aos-animate {
transition-delay:1.3s}
[data-aos][data-aos][data-aos-duration="1350"],body[data-aos-duration="1350"] [data-aos] {
transition-duration:1.35s}
[data-aos][data-aos][data-aos-delay="1350"],body[data-aos-delay="1350"] [data-aos] {
transition-delay:0}
[data-aos][data-aos][data-aos-delay="1350"].aos-animate,body[data-aos-delay="1350"] [data-aos].aos-animate {
transition-delay:1.35s}
[data-aos][data-aos][data-aos-duration="1400"],body[data-aos-duration="1400"] [data-aos] {
transition-duration:1.4s}
[data-aos][data-aos][data-aos-delay="1400"],body[data-aos-delay="1400"] [data-aos] {
transition-delay:0}
[data-aos][data-aos][data-aos-delay="1400"].aos-animate,body[data-aos-delay="1400"] [data-aos].aos-animate {
transition-delay:1.4s}
[data-aos][data-aos][data-aos-duration="1450"],body[data-aos-duration="1450"] [data-aos] {
transition-duration:1.45s}
[data-aos][data-aos][data-aos-delay="1450"],body[data-aos-delay="1450"] [data-aos] {
transition-delay:0}
[data-aos][data-aos][data-aos-delay="1450"].aos-animate,body[data-aos-delay="1450"] [data-aos].aos-animate {
transition-delay:1.45s}
[data-aos][data-aos][data-aos-duration="1500"],body[data-aos-duration="1500"] [data-aos] {
transition-duration:1.5s}
[data-aos][data-aos][data-aos-delay="1500"],body[data-aos-delay="1500"] [data-aos] {
transition-delay:0}
[data-aos][data-aos][data-aos-delay="1500"].aos-animate,body[data-aos-delay="1500"] [data-aos].aos-animate {
transition-delay:1.5s}
[data-aos][data-aos][data-aos-duration="1550"],body[data-aos-duration="1550"] [data-aos] {
transition-duration:1.55s}
[data-aos][data-aos][data-aos-delay="1550"],body[data-aos-delay="1550"] [data-aos] {
transition-delay:0}
[data-aos][data-aos][data-aos-delay="1550"].aos-animate,body[data-aos-delay="1550"] [data-aos].aos-animate {
transition-delay:1.55s}
[data-aos][data-aos][data-aos-duration="1600"],body[data-aos-duration="1600"] [data-aos] {
transition-duration:1.6s}
[data-aos][data-aos][data-aos-delay="1600"],body[data-aos-delay="1600"] [data-aos] {
transition-delay:0}
[data-aos][data-aos][data-aos-delay="1600"].aos-animate,body[data-aos-delay="1600"] [data-aos].aos-animate {
transition-delay:1.6s}
[data-aos][data-aos][data-aos-duration="1650"],body[data-aos-duration="1650"] [data-aos] {
transition-duration:1.65s}
[data-aos][data-aos][data-aos-delay="1650"],body[data-aos-delay="1650"] [data-aos] {
transition-delay:0}
[data-aos][data-aos][data-aos-delay="1650"].aos-animate,body[data-aos-delay="1650"] [data-aos].aos-animate {
transition-delay:1.65s}
[data-aos][data-aos][data-aos-duration="1700"],body[data-aos-duration="1700"] [data-aos] {
transition-duration:1.7s}
[data-aos][data-aos][data-aos-delay="1700"],body[data-aos-delay="1700"] [data-aos] {
transition-delay:0}
[data-aos][data-aos][data-aos-delay="1700"].aos-animate,body[data-aos-delay="1700"] [data-aos].aos-animate {
transition-delay:1.7s}
[data-aos][data-aos][data-aos-duration="1750"],body[data-aos-duration="1750"] [data-aos] {
transition-duration:1.75s}
[data-aos][data-aos][data-aos-delay="1750"],body[data-aos-delay="1750"] [data-aos] {
transition-delay:0}
[data-aos][data-aos][data-aos-delay="1750"].aos-animate,body[data-aos-delay="1750"] [data-aos].aos-animate {
transition-delay:1.75s}
[data-aos][data-aos][data-aos-duration="1800"],body[data-aos-duration="1800"] [data-aos] {
transition-duration:1.8s}
[data-aos][data-aos][data-aos-delay="1800"],body[data-aos-delay="1800"] [data-aos] {
transition-delay:0}
[data-aos][data-aos][data-aos-delay="1800"].aos-animate,body[data-aos-delay="1800"] [data-aos].aos-animate {
transition-delay:1.8s}
[data-aos][data-aos][data-aos-duration="1850"],body[data-aos-duration="1850"] [data-aos] {
transition-duration:1.85s}
[data-aos][data-aos][data-aos-delay="1850"],body[data-aos-delay="1850"] [data-aos] {
transition-delay:0}
[data-aos][data-aos][data-aos-delay="1850"].aos-animate,body[data-aos-delay="1850"] [data-aos].aos-animate {
transition-delay:1.85s}
[data-aos][data-aos][data-aos-duration="1900"],body[data-aos-duration="1900"] [data-aos] {
transition-duration:1.9s}
[data-aos][data-aos][data-aos-delay="1900"],body[data-aos-delay="1900"] [data-aos] {
transition-delay:0}
[data-aos][data-aos][data-aos-delay="1900"].aos-animate,body[data-aos-delay="1900"] [data-aos].aos-animate {
transition-delay:1.9s}
[data-aos][data-aos][data-aos-duration="1950"],body[data-aos-duration="1950"] [data-aos] {
transition-duration:1.95s}
[data-aos][data-aos][data-aos-delay="1950"],body[data-aos-delay="1950"] [data-aos] {
transition-delay:0}
[data-aos][data-aos][data-aos-delay="1950"].aos-animate,body[data-aos-delay="1950"] [data-aos].aos-animate {
transition-delay:1.95s}
[data-aos][data-aos][data-aos-duration="2000"],body[data-aos-duration="2000"] [data-aos] {
transition-duration:2s}
[data-aos][data-aos][data-aos-delay="2000"],body[data-aos-delay="2000"] [data-aos] {
transition-delay:0}
[data-aos][data-aos][data-aos-delay="2000"].aos-animate,body[data-aos-delay="2000"] [data-aos].aos-animate {
transition-delay:2s}
[data-aos][data-aos][data-aos-duration="2050"],body[data-aos-duration="2050"] [data-aos] {
transition-duration:2.05s}
[data-aos][data-aos][data-aos-delay="2050"],body[data-aos-delay="2050"] [data-aos] {
transition-delay:0}
[data-aos][data-aos][data-aos-delay="2050"].aos-animate,body[data-aos-delay="2050"] [data-aos].aos-animate {
transition-delay:2.05s}
[data-aos][data-aos][data-aos-duration="2100"],body[data-aos-duration="2100"] [data-aos] {
transition-duration:2.1s}
[data-aos][data-aos][data-aos-delay="2100"],body[data-aos-delay="2100"] [data-aos] {
transition-delay:0}
[data-aos][data-aos][data-aos-delay="2100"].aos-animate,body[data-aos-delay="2100"] [data-aos].aos-animate {
transition-delay:2.1s}
[data-aos][data-aos][data-aos-duration="2150"],body[data-aos-duration="2150"] [data-aos] {
transition-duration:2.15s}
[data-aos][data-aos][data-aos-delay="2150"],body[data-aos-delay="2150"] [data-aos] {
transition-delay:0}
[data-aos][data-aos][data-aos-delay="2150"].aos-animate,body[data-aos-delay="2150"] [data-aos].aos-animate {
transition-delay:2.15s}
[data-aos][data-aos][data-aos-duration="2200"],body[data-aos-duration="2200"] [data-aos] {
transition-duration:2.2s}
[data-aos][data-aos][data-aos-delay="2200"],body[data-aos-delay="2200"] [data-aos] {
transition-delay:0}
[data-aos][data-aos][data-aos-delay="2200"].aos-animate,body[data-aos-delay="2200"] [data-aos].aos-animate {
transition-delay:2.2s}
[data-aos][data-aos][data-aos-duration="2250"],body[data-aos-duration="2250"] [data-aos] {
transition-duration:2.25s}
[data-aos][data-aos][data-aos-delay="2250"],body[data-aos-delay="2250"] [data-aos] {
transition-delay:0}
[data-aos][data-aos][data-aos-delay="2250"].aos-animate,body[data-aos-delay="2250"] [data-aos].aos-animate {
transition-delay:2.25s}
[data-aos][data-aos][data-aos-duration="2300"],body[data-aos-duration="2300"] [data-aos] {
transition-duration:2.3s}
[data-aos][data-aos][data-aos-delay="2300"],body[data-aos-delay="2300"] [data-aos] {
transition-delay:0}
[data-aos][data-aos][data-aos-delay="2300"].aos-animate,body[data-aos-delay="2300"] [data-aos].aos-animate {
transition-delay:2.3s}
[data-aos][data-aos][data-aos-duration="2350"],body[data-aos-duration="2350"] [data-aos] {
transition-duration:2.35s}
[data-aos][data-aos][data-aos-delay="2350"],body[data-aos-delay="2350"] [data-aos] {
transition-delay:0}
[data-aos][data-aos][data-aos-delay="2350"].aos-animate,body[data-aos-delay="2350"] [data-aos].aos-animate {
transition-delay:2.35s}
[data-aos][data-aos][data-aos-duration="2400"],body[data-aos-duration="2400"] [data-aos] {
transition-duration:2.4s}
[data-aos][data-aos][data-aos-delay="2400"],body[data-aos-delay="2400"] [data-aos] {
transition-delay:0}
[data-aos][data-aos][data-aos-delay="2400"].aos-animate,body[data-aos-delay="2400"] [data-aos].aos-animate {
transition-delay:2.4s}
[data-aos][data-aos][data-aos-duration="2450"],body[data-aos-duration="2450"] [data-aos] {
transition-duration:2.45s}
[data-aos][data-aos][data-aos-delay="2450"],body[data-aos-delay="2450"] [data-aos] {
transition-delay:0}
[data-aos][data-aos][data-aos-delay="2450"].aos-animate,body[data-aos-delay="2450"] [data-aos].aos-animate {
transition-delay:2.45s}
[data-aos][data-aos][data-aos-duration="2500"],body[data-aos-duration="2500"] [data-aos] {
transition-duration:2.5s}
[data-aos][data-aos][data-aos-delay="2500"],body[data-aos-delay="2500"] [data-aos] {
transition-delay:0}
[data-aos][data-aos][data-aos-delay="2500"].aos-animate,body[data-aos-delay="2500"] [data-aos].aos-animate {
transition-delay:2.5s}
[data-aos][data-aos][data-aos-duration="2550"],body[data-aos-duration="2550"] [data-aos] {
transition-duration:2.55s}
[data-aos][data-aos][data-aos-delay="2550"],body[data-aos-delay="2550"] [data-aos] {
transition-delay:0}
[data-aos][data-aos][data-aos-delay="2550"].aos-animate,body[data-aos-delay="2550"] [data-aos].aos-animate {
transition-delay:2.55s}
[data-aos][data-aos][data-aos-duration="2600"],body[data-aos-duration="2600"] [data-aos] {
transition-duration:2.6s}
[data-aos][data-aos][data-aos-delay="2600"],body[data-aos-delay="2600"] [data-aos] {
transition-delay:0}
[data-aos][data-aos][data-aos-delay="2600"].aos-animate,body[data-aos-delay="2600"] [data-aos].aos-animate {
transition-delay:2.6s}
[data-aos][data-aos][data-aos-duration="2650"],body[data-aos-duration="2650"] [data-aos] {
transition-duration:2.65s}
[data-aos][data-aos][data-aos-delay="2650"],body[data-aos-delay="2650"] [data-aos] {
transition-delay:0}
[data-aos][data-aos][data-aos-delay="2650"].aos-animate,body[data-aos-delay="2650"] [data-aos].aos-animate {
transition-delay:2.65s}
[data-aos][data-aos][data-aos-duration="2700"],body[data-aos-duration="2700"] [data-aos] {
transition-duration:2.7s}
[data-aos][data-aos][data-aos-delay="2700"],body[data-aos-delay="2700"] [data-aos] {
transition-delay:0}
[data-aos][data-aos][data-aos-delay="2700"].aos-animate,body[data-aos-delay="2700"] [data-aos].aos-animate {
transition-delay:2.7s}
[data-aos][data-aos][data-aos-duration="2750"],body[data-aos-duration="2750"] [data-aos] {
transition-duration:2.75s}
[data-aos][data-aos][data-aos-delay="2750"],body[data-aos-delay="2750"] [data-aos] {
transition-delay:0}
[data-aos][data-aos][data-aos-delay="2750"].aos-animate,body[data-aos-delay="2750"] [data-aos].aos-animate {
transition-delay:2.75s}
[data-aos][data-aos][data-aos-duration="2800"],body[data-aos-duration="2800"] [data-aos] {
transition-duration:2.8s}
[data-aos][data-aos][data-aos-delay="2800"],body[data-aos-delay="2800"] [data-aos] {
transition-delay:0}
[data-aos][data-aos][data-aos-delay="2800"].aos-animate,body[data-aos-delay="2800"] [data-aos].aos-animate {
transition-delay:2.8s}
[data-aos][data-aos][data-aos-duration="2850"],body[data-aos-duration="2850"] [data-aos] {
transition-duration:2.85s}
[data-aos][data-aos][data-aos-delay="2850"],body[data-aos-delay="2850"] [data-aos] {
transition-delay:0}
[data-aos][data-aos][data-aos-delay="2850"].aos-animate,body[data-aos-delay="2850"] [data-aos].aos-animate {
transition-delay:2.85s}
[data-aos][data-aos][data-aos-duration="2900"],body[data-aos-duration="2900"] [data-aos] {
transition-duration:2.9s}
[data-aos][data-aos][data-aos-delay="2900"],body[data-aos-delay="2900"] [data-aos] {
transition-delay:0}
[data-aos][data-aos][data-aos-delay="2900"].aos-animate,body[data-aos-delay="2900"] [data-aos].aos-animate {
transition-delay:2.9s}
[data-aos][data-aos][data-aos-duration="2950"],body[data-aos-duration="2950"] [data-aos] {
transition-duration:2.95s}
[data-aos][data-aos][data-aos-delay="2950"],body[data-aos-delay="2950"] [data-aos] {
transition-delay:0}
[data-aos][data-aos][data-aos-delay="2950"].aos-animate,body[data-aos-delay="2950"] [data-aos].aos-animate {
transition-delay:2.95s}
[data-aos][data-aos][data-aos-duration="3000"],body[data-aos-duration="3000"] [data-aos] {
transition-duration:3s}
[data-aos][data-aos][data-aos-delay="3000"],body[data-aos-delay="3000"] [data-aos] {
transition-delay:0}
[data-aos][data-aos][data-aos-delay="3000"].aos-animate,body[data-aos-delay="3000"] [data-aos].aos-animate {
transition-delay:3s}
[data-aos][data-aos][data-aos-easing=linear],body[data-aos-easing=linear] [data-aos] {
transition-timing-function:cubic-bezier(.25,.25,.75,.75)}
[data-aos][data-aos][data-aos-easing=ease],body[data-aos-easing=ease] [data-aos] {
transition-timing-function:ease}
[data-aos][data-aos][data-aos-easing=ease-in],body[data-aos-easing=ease-in] [data-aos] {
transition-timing-function:ease-in}
[data-aos][data-aos][data-aos-easing=ease-out],body[data-aos-easing=ease-out] [data-aos] {
transition-timing-function:ease-out}
[data-aos][data-aos][data-aos-easing=ease-in-out],body[data-aos-easing=ease-in-out] [data-aos] {
transition-timing-function:ease-in-out}
[data-aos][data-aos][data-aos-easing=ease-in-back],body[data-aos-easing=ease-in-back] [data-aos] {
transition-timing-function:cubic-bezier(.6,-.28,.735,.045)}
[data-aos][data-aos][data-aos-easing=ease-out-back],body[data-aos-easing=ease-out-back] [data-aos] {
transition-timing-function:cubic-bezier(.175,.885,.32,1.275)}
[data-aos][data-aos][data-aos-easing=ease-in-out-back],body[data-aos-easing=ease-in-out-back] [data-aos] {
transition-timing-function:cubic-bezier(.68,-.55,.265,1.55)}
[data-aos][data-aos][data-aos-easing=ease-in-sine],body[data-aos-easing=ease-in-sine] [data-aos] {
transition-timing-function:cubic-bezier(.47,0,.745,.715)}
[data-aos][data-aos][data-aos-easing=ease-out-sine],body[data-aos-easing=ease-out-sine] [data-aos] {
transition-timing-function:cubic-bezier(.39,.575,.565,1)}
[data-aos][data-aos][data-aos-easing=ease-in-out-sine],body[data-aos-easing=ease-in-out-sine] [data-aos] {
transition-timing-function:cubic-bezier(.445,.05,.55,.95)}
[data-aos][data-aos][data-aos-easing=ease-in-quad],body[data-aos-easing=ease-in-quad] [data-aos] {
transition-timing-function:cubic-bezier(.55,.085,.68,.53)}
[data-aos][data-aos][data-aos-easing=ease-out-quad],body[data-aos-easing=ease-out-quad] [data-aos] {
transition-timing-function:cubic-bezier(.25,.46,.45,.94)}
[data-aos][data-aos][data-aos-easing=ease-in-out-quad],body[data-aos-easing=ease-in-out-quad] [data-aos] {
transition-timing-function:cubic-bezier(.455,.03,.515,.955)}
[data-aos][data-aos][data-aos-easing=ease-in-cubic],body[data-aos-easing=ease-in-cubic] [data-aos] {
transition-timing-function:cubic-bezier(.55,.085,.68,.53)}
[data-aos][data-aos][data-aos-easing=ease-out-cubic],body[data-aos-easing=ease-out-cubic] [data-aos] {
transition-timing-function:cubic-bezier(.25,.46,.45,.94)}
[data-aos][data-aos][data-aos-easing=ease-in-out-cubic],body[data-aos-easing=ease-in-out-cubic] [data-aos] {
transition-timing-function:cubic-bezier(.455,.03,.515,.955)}
[data-aos][data-aos][data-aos-easing=ease-in-quart],body[data-aos-easing=ease-in-quart] [data-aos] {
transition-timing-function:cubic-bezier(.55,.085,.68,.53)}
[data-aos][data-aos][data-aos-easing=ease-out-quart],body[data-aos-easing=ease-out-quart] [data-aos] {
transition-timing-function:cubic-bezier(.25,.46,.45,.94)}
[data-aos][data-aos][data-aos-easing=ease-in-out-quart],body[data-aos-easing=ease-in-out-quart] [data-aos] {
transition-timing-function:cubic-bezier(.455,.03,.515,.955)}
[data-aos^=fade][data-aos^=fade] {
opacity:0;transition-property:opacity,transform}
[data-aos^=fade][data-aos^=fade].aos-animate {
opacity:1;transform:translateZ(0)}
[data-aos=fade-up] {
transform:translateY(100px)}
[data-aos=fade-down] {
transform:translateY(-100px)}
[data-aos=fade-right] {
transform:translate(-100px)}
[data-aos=fade-left] {
transform:translate(100px)}
[data-aos=fade-up-right] {
transform:translate(-100px,100px)}
[data-aos=fade-up-left] {
transform:translate(100px,100px)}
[data-aos=fade-down-right] {
transform:translate(-100px,-100px)}
[data-aos=fade-down-left] {
transform:translate(100px,-100px)}
[data-aos^=zoom][data-aos^=zoom] {
opacity:0;transition-property:opacity,transform}
[data-aos^=zoom][data-aos^=zoom].aos-animate {
opacity:1;transform:translateZ(0)scale(1)}
[data-aos=zoom-in] {
transform:scale(.6)}
[data-aos=zoom-in-up] {
transform:translateY(100px)scale(.6)}
[data-aos=zoom-in-down] {
transform:translateY(-100px)scale(.6)}
[data-aos=zoom-in-right] {
transform:translate(-100px)scale(.6)}
[data-aos=zoom-in-left] {
transform:translate(100px)scale(.6)}
[data-aos=zoom-out] {
transform:scale(1.2)}
[data-aos=zoom-out-up] {
transform:translateY(100px)scale(1.2)}
[data-aos=zoom-out-down] {
transform:translateY(-100px)scale(1.2)}
[data-aos=zoom-out-right] {
transform:translate(-100px)scale(1.2)}
[data-aos=zoom-out-left] {
transform:translate(100px)scale(1.2)}
[data-aos^=slide][data-aos^=slide] {
transition-property:transform}
[data-aos^=slide][data-aos^=slide].aos-animate {
transform:translateZ(0)}
[data-aos=slide-up] {
transform:translateY(100%)}
[data-aos=slide-down] {
transform:translateY(-100%)}
[data-aos=slide-right] {
transform:translate(-100%)}
[data-aos=slide-left] {
transform:translate(100%)}
[data-aos^=flip][data-aos^=flip] {
backface-visibility:hidden;transition-property:transform}
[data-aos=flip-left] {
transform:perspective(2500px)rotateY(-100deg)}
[data-aos=flip-left].aos-animate {
transform:perspective(2500px)rotateY(0)}
[data-aos=flip-right] {
transform:perspective(2500px)rotateY(100deg)}
[data-aos=flip-right].aos-animate {
transform:perspective(2500px)rotateY(0)}
[data-aos=flip-up] {
transform:perspective(2500px)rotateX(-100deg)}
[data-aos=flip-up].aos-animate {
transform:perspective(2500px)rotateX(0)}
[data-aos=flip-down] {
transform:perspective(2500px)rotateX(100deg)}
[data-aos=flip-down].aos-animate {
transform:perspective(2500px)rotateX(0)}
[data-theme=light] .header {
background:#f8f7f4cc}
[data-theme=light] .header-scrolled {
background:#f8f7f4f2;box-shadow:0 4px 20px #0000000f}
[data-theme=light] .main-hero {
background:var(--bg-color)}
[data-theme=light] .bento-card {
background:linear-gradient(165deg,#ffffffe6,#f5f4f0f2);border:1px solid #0000000f;box-shadow:0 4px 24px #0000000a}
[data-theme=light] .bento-card:before {
background:linear-gradient(90deg,#0000,#0000000a,#0000)}
[data-theme=light] .bento-card h3 {
color:#1f1f1f}
[data-theme=light] .bento-card p {
color:#6b6b6b}
[data-theme=light] .lang-dropdown {
background:#fffffffa;box-shadow:0 8px 32px #0000001a}
[data-theme=light] .decoration-circle {
border-color:var(--accent-color)}
@supports (color:color-mix(in lab,red,red)) {
[data-theme=light] .decoration-circle {
border-color:color-mix(in srgb,var(--accent-color),transparent 70%)}
}
[data-theme=light] .decoration-circle {
background:radial-gradient(circle,var(--accent-color)0,transparent 70%)}
@supports (color:color-mix(in lab,red,red)) {
[data-theme=light] .decoration-circle {
background:radial-gradient(circle,color-mix(in srgb,var(--accent-color),transparent 90%)0,transparent 70%)}
}
[data-theme=light] .btn-outline {
color:#1f1f1f!important}
[data-theme=light] .btn-outline,[data-theme=light] .lang-current {
background:#fff;border-color:#0000001a}
[data-theme=light] .btn-fill {
background:var(--btn-primary-bg);border-color:var(--btn-primary-border)}
[data-theme=light] .video-player {
background:#efeee9}
[data-theme=light] .footer {
border-top-color:#00000014}
[data-theme=light] .stat-number {
color:var(--accent-color)}
[data-theme=light] .bento-stats {
border-top-color:#00000014}
* {
box-sizing:border-box;outline:none;margin:0;padding:0}
body {
background-color:var(--bg-color);color:var(--text-color);font-family:var(--family-regular);font-size:var(--font-size);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-user-select:none;user-select:none;flex-direction:column;min-height:100vh;display:flex;position:relative;overflow-x:hidden}
.header {
z-index:100;-webkit-backdrop-filter:blur(24px);border:1px solid var(--border-color);border-radius:var(--lg-radius);width:calc(100% - 40px);max-width:1400px;transition:var(--transition);background:#0a0a0cbf;justify-content:space-between;align-items:center;margin:16px auto 0;padding:14px 32px;display:flex;position:fixed;top:0;left:20px;right:20px}
.header-scrolled {
background:#0a0a0ce6;box-shadow:0 8px 32px #0006}
.logo {
color:var(--text-color);align-items:center;gap:10px;font-size:17px;font-weight:600;text-decoration:none;display:flex}
.logo i {
font-size:20px;position:relative}
.logo-dot {
background-color:#e56161;border-radius:50%;width:6px;height:6px;position:absolute;top:-2px;right:-2px;box-shadow:0 0 5px #e56161}
.header nav {
gap:30px;display:flex}
.nav-center {
position:absolute;left:48%;transform:translate(-50%)}
.header-ru .nav-center {
left:43%}
.header nav a {
color:var(--text-color-alower);transition:var(--transition);align-items:center;gap:8px;font-size:14px;font-weight:500;text-decoration:none;display:flex}
.header nav a.active,.header nav a[aria-current=page] {
color:#fff;text-shadow:0 0 12px #ffffff40;font-weight:600}
[data-theme=light] .header nav a.active,[data-theme=light] .header nav a[aria-current=page] {
color:#1f1f1f;text-shadow:none}
.header nav a:hover {
color:var(--text-color)}
.header nav a i {
font-size:14px}
.header-right {
align-items:center;gap:10px;display:flex}
.theme-toggle {
color:var(--text-color-alower);cursor:pointer;transition:var(--transition);margin-right:8px;font-size:16px}
.theme-toggle:hover {
color:var(--accent-color)}
.lang-selector {
position:relative}
.lang-current {
padding:var(--sm-padding)var(--md-padding);background:var(--button-bg);border:1px solid var(--border-color);border-radius:var(--md-radius);color:var(--text-color);cursor:pointer;transition:var(--transition);justify-content:center;align-items:center;gap:8px;font-size:14px;display:flex}
.lang-current:hover {
border-color:var(--accent-color)}
.lang-current .fa-chevron-down {
color:var(--text-color-alower);font-size:10px;transition:transform .2s}
.lang-current .fa-chevron-down.rotated {
transform:rotate(180deg)}
.lang-dropdown {
-webkit-backdrop-filter:blur(20px);border:1px solid var(--border-color);border-radius:var(--md-radius);z-index:200;background:#0a0a0cf2;min-width:100%;position:absolute;top:calc(100% + 8px);left:0;overflow:hidden}
.lang-option {
padding:var(--sm-padding)var(--md-padding);color:var(--text-color-alower);cursor:pointer;transition:var(--transition);align-items:center;gap:8px;font-size:14px;display:flex}
.lang-option:hover {
background:var(--button-bg);color:var(--text-color)}
.lang-option.active {
color:var(--accent-color)}
.fi {
background-position:50%;background-repeat:no-repeat;background-size:contain;border-radius:2px;width:18px;height:14px}
.fi-ru {
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Crect fill='%23fff' width='9' height='3'/%3E%3Crect fill='%230039a6' y='2' width='9' height='2'/%3E%3Crect fill='%23d52b1e' y='4' width='9' height='2'/%3E%3C/svg%3E")}
.fi-gb {
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3CclipPath id='a'%3E%3Cpath d='M0 0v30h60V0z'/%3E%3C/clipPath%3E%3CclipPath id='b'%3E%3Cpath d='M30 15h30v15zv15H0zH0V0zV0h30z'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M0 0v30h60V0z' fill='%23012169'/%3E%3Cpath d='M0 0l60 30m0-30L0 30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0 0l60 30m0-30L0 30' clip-path='url(%23b)' stroke='%23C8102E' stroke-width='4'/%3E%3Cpath d='M30 0v30M0 15h60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30 0v30M0 15h60' stroke='%23C8102E' stroke-width='6'/%3E%3C/g%3E%3C/svg%3E")}
.auth-container {
gap:10px;display:flex}
.header-profile-btn {
gap:6px;min-height:36px;padding-left:12px;padding-right:16px}
.header-avatar {
background:0 0;border:none;border-radius:999px;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;display:inline-flex;overflow:hidden}
.header-avatar img {
object-fit:cover;image-rendering:auto;width:100%;height:100%;display:block}
[data-theme=light] .header-avatar {
background:0 0}
.mobile-toggle {
border-radius:var(--md-radius);color:#1f1f1f;width:36px;height:36px;transition:var(--transition);background:#fff;border:1px solid #0000001f;justify-content:center;align-items:center;display:none}
.mobile-toggle:hover {
border-color:var(--accent-color);color:#1f1f1f}
.mobile-nav-backdrop {
z-index:140;background:#0009;position:fixed;inset:0}
.mobile-nav {
border:1px solid var(--border-color);-webkit-backdrop-filter:blur(22px);background:#0a0a0ce6;border-radius:18px;flex-direction:column;gap:16px;padding:16px;display:flex;position:absolute;top:86px;left:16px;right:16px;box-shadow:0 20px 50px #00000073}
.mobile-nav-links {
grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}
.mobile-nav-links a {
color:var(--text-color-alower);padding:var(--sm-padding)var(--md-padding);border-radius:var(--md-radius);background:var(--button-bg);border:1px solid var(--border-color);width:100%;transition:var(--transition);align-items:center;gap:10px;font-size:14px;font-weight:500;text-decoration:none;display:flex}
.mobile-nav-links a.active,.mobile-nav-links a[aria-current=page] {
color:#fff;text-shadow:0 0 12px #fff3;border-color:var(--accent-color);font-weight:600}
.mobile-nav-links a:hover {
color:var(--text-color);border-color:var(--accent-color)}
.mobile-nav-divider {
background:var(--border-color);height:1px}
.mobile-nav-actions {
flex-direction:column;gap:10px;display:flex}
[data-theme=light] .mobile-nav {
background:#f8f7f4f2;border-color:#00000014}
[data-theme=light] .mobile-nav-links a,[data-theme=light] .mobile-toggle {
background:#fff;border-color:#0000001a}
[data-theme=light] .mobile-toggle {
color:#1f1f1f}
[data-theme=light] .mobile-nav-links a.active,[data-theme=light] .mobile-nav-links a[aria-current=page] {
color:#1f1f1f;text-shadow:none}
button {
transition:var(--transition);cursor:pointer;padding:var(--md-padding)var(--lg-padding);border-radius:var(--md-radius);width:auto;font-family:var(--family-regular);font-size:var(--font-size);-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;font-weight:400;display:flex}
.btn-outline {
background:var(--button-bg);border:1px solid var(--border-color);color:#fff!important}
.btn-outline:hover {
border-color:var(--accent-color)}
.btn-fill {
background:var(--btn-primary-bg);border:1px solid var(--btn-primary-border);box-shadow:inset 0 1px 1px #fff;color:var(--btn-primary-text)!important}
.btn-fill:hover {
filter:brightness(.65)}
.btn-sm {
padding:var(--sm-padding)var(--md-padding);font-size:14px}
button span[translate=no] {
padding-right:var(--ssm-padding);align-items:center;display:flex}
.main-hero {
text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;min-height:100vh;padding-top:60px;padding-bottom:80px;display:flex;position:relative}
.hero-glow {
filter:blur(48px);background:linear-gradient(to bottom right,#ffcba40d,#0000,#f43f5e0d)}
.hero-glow,.hero-overlay {
pointer-events:none;position:absolute;inset:0}
.hero-overlay {
background:linear-gradient(#030303cc,#0000 50%,#030303)}
[data-theme=light] .hero-glow {
background:linear-gradient(to bottom right,#e07a3d14,#0000,#f43f5e0f)}
[data-theme=light] .hero-overlay {
background:linear-gradient(#f8f7f4cc,#0000 50%,#f8f7f4)}
.elegant-shape {
-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border:2px solid #ffffff26;box-shadow:0 8px 32px #ffffff1a}
.elegant-shape:after {
content:"";background:radial-gradient(circle,#fff3,#0000 70%);border-radius:9999px;position:absolute;inset:0}
[data-theme=light] .elegant-shape {
border-color:#06403b40;box-shadow:0 8px 32px #06403b1f}
[data-theme=light] .elegant-shape:after {
background:radial-gradient(circle,#06403b26,#0000 70%)}
[data-theme=light] .from-\[\#0A6B63\]\/\[0\.16\] {
background:linear-gradient(90deg,#06403b3d,#0000)!important}
[data-theme=light] .from-\[\#0A6B63\]\/\[0\.2\] {
background:linear-gradient(90deg,#06403b47,#0000)!important}
[data-theme=light] .from-emerald-500\/\[0\.16\] {
background:linear-gradient(90deg,#0a6b6333,#0000)!important}
[data-theme=light] .from-emerald-500\/\[0\.2\] {
background:linear-gradient(90deg,#0a6b633d,#0000)!important}
[data-theme=light] .from-teal-500\/\[0\.16\] {
background:linear-gradient(90deg,#1c82782e,#0000)!important}
[data-theme=light] .from-teal-500\/\[0\.2\] {
background:linear-gradient(90deg,#1c827838,#0000)!important}
[data-theme=light] .from-cyan-500\/\[0\.15\] {
background:linear-gradient(90deg,#06b6d426,#0000)!important}
.header-advice {
background:var(--accent-color);border:1px solid var(--accent-color);padding:var(--sm-padding)var(--lg-padding);border-radius:var(--lg-radius);width:fit-content;transition:var(--transition);opacity:1;z-index:10;align-items:center;gap:10px;margin-bottom:30px;display:flex;position:relative;box-shadow:inset 0 1px 1px #fff;color:var(--btn-primary-text)!important}
.header-advice:after,.header-advice:before {
content:"";border-radius:var(--lg-radius);outline:1px solid var(--accent-color);outline-offset:3.5px;opacity:.65;pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}
.header-advice:after {
outline-offset:6px;opacity:.35}
h1 {
letter-spacing:-1px;color:var(--text-color);margin-bottom:25px;font-size:72px;font-weight:500;line-height:1.1}
.subtext,h1 {
z-index:10;position:relative}
.subtext {
color:var(--text-color-alower);max-width:650px;margin-bottom:40px;font-size:16px;font-weight:400;line-height:1.5}
.hero-actions {
z-index:10;gap:10px;display:flex;position:relative}
.features-section {
z-index:10;width:100%;max-width:1100px;margin:0 auto;padding:150px 24px;position:relative}
.features-header {
text-align:center;margin-bottom:60px}
.features-title {
letter-spacing:-1.5px;color:var(--text-color);margin-bottom:16px;font-size:52px;font-weight:600;line-height:1.1}
.features-subtitle {
color:var(--text-color-alower);font-size:18px;font-weight:400;line-height:1.5}
.bento-grid {
grid-template-rows:auto auto auto;grid-template-columns:repeat(4,1fr);gap:16px;display:grid}
.bento-card {
-webkit-backdrop-filter:blur(20px);background:linear-gradient(165deg,#0a0a0cf2,#050506fa);border:1px solid #ffffff0a;border-radius:28px;padding:32px;transition:all .5s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}
.bento-card:before {
content:"";background:linear-gradient(90deg,#0000,#ffffff1f,#0000);height:1px;position:absolute;top:0;left:20%;right:20%}
.bento-card:after {
content:"";background:radial-gradient(circle at 50% 0,var(--accent-color)0,transparent 50%);position:absolute;inset:0}
@supports (color:color-mix(in lab,red,red)) {
.bento-card:after {
background:radial-gradient(circle at 50% 0,color-mix(in srgb,var(--accent-color),transparent 92%)0,transparent 50%)}
}
.bento-card:after {
opacity:0;pointer-events:none;transition:opacity .5s}
.bento-card h3 {
color:var(--text-color);letter-spacing:-.3px;margin-bottom:10px;font-size:19px;font-weight:600}
.bento-card p {
color:#ffffff73;font-size:14px;line-height:1.7}
.bento-icon {
border-radius:16px;justify-content:center;align-items:center;width:52px;height:52px;margin-bottom:24px;display:flex;position:relative;box-shadow:0 8px 24px #0006,0 2px 8px #0000004d,inset 0 1px #ffffff40,inset 0 -1px #0000001a}
.bento-icon:before {
content:"";background:inherit;filter:blur(12px);opacity:.4;z-index:-1;border-radius:19px;position:absolute;inset:-3px}
.bento-icon i {
color:#000;font-size:22px}
.bento-icon-peach {
background:linear-gradient(145deg,var(--accent-color)0,var(--accent-color)50%,var(--accent-color)100%)}
@supports (color:color-mix(in lab,red,red)) {
.bento-icon-peach {
background:linear-gradient(145deg,color-mix(in srgb,var(--accent-color),white 35%)0,color-mix(in srgb,var(--accent-color),white 15%)50%,color-mix(in srgb,var(--accent-color),black 12%)100%)}
}
.bento-icon-green {
background:linear-gradient(145deg,var(--accent-color)0,var(--accent-color)50%,var(--accent-color)100%)}
@supports (color:color-mix(in lab,red,red)) {
.bento-icon-green {
background:linear-gradient(145deg,color-mix(in srgb,var(--accent-color),white 35%)0,color-mix(in srgb,var(--accent-color),white 15%)50%,color-mix(in srgb,var(--accent-color),black 12%)100%)}
}
.bento-icon-blue {
background:linear-gradient(145deg,var(--accent-color)0,var(--accent-color)50%,var(--accent-color)100%)}
@supports (color:color-mix(in lab,red,red)) {
.bento-icon-blue {
background:linear-gradient(145deg,color-mix(in srgb,var(--accent-color),white 35%)0,color-mix(in srgb,var(--accent-color),white 15%)50%,color-mix(in srgb,var(--accent-color),black 12%)100%)}
}
.bento-icon-purple {
background:linear-gradient(145deg,var(--accent-color)0,var(--accent-color)50%,var(--accent-color)100%)}
@supports (color:color-mix(in lab,red,red)) {
.bento-icon-purple {
background:linear-gradient(145deg,color-mix(in srgb,var(--accent-color),white 35%)0,color-mix(in srgb,var(--accent-color),white 15%)50%,color-mix(in srgb,var(--accent-color),black 12%)100%)}
}
.bento-large {
grid-area:span 1/span 2}
.bento-medium {
grid-area:span 1/span 1;padding-top:20px;padding-bottom:20px;position:relative}
.bento-medium:after {
content:"";background:var(--accent-color);width:70%;height:70%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
@supports (color:color-mix(in lab,red,red)) {
.bento-medium:after {
background:color-mix(in srgb,var(--accent-color),transparent 85%)}
}
.bento-medium:after {
filter:blur(40px);z-index:-1;pointer-events:none;border-radius:50%}
.bento-small-medium {
grid-area:span 1/span 1;padding:24px}
.bento-wide {
grid-area:span 1/span 2}
.bento-small {
grid-area:span 1/span 1}
.bento-large h3 {
margin-bottom:12px;font-size:24px}
.bento-large p {
max-width:280px;font-size:15px}
.bento-large .bento-icon {
border-radius:16px;width:56px;height:56px}
.bento-large .bento-icon i {
font-size:24px}
.bento-decoration {
gap:12px;display:flex;position:absolute;bottom:-30px;right:-30px}
.bento-decoration-top {
inset:-20px auto auto -20px}
.bento-decoration-top .decoration-circle {
width:80px;height:80px}
.bento-decoration-top .decoration-circle:last-child {
width:50px;height:50px}
.decoration-circle {
border:1px solid var(--accent-color);border-radius:50%;width:120px;height:120px}
@supports (color:color-mix(in lab,red,red)) {
.decoration-circle {
border:1px solid color-mix(in srgb,var(--accent-color),transparent 75%)}
}
.decoration-circle {
background:radial-gradient(circle,var(--accent-color)0,transparent 70%)}
@supports (color:color-mix(in lab,red,red)) {
.decoration-circle {
background:radial-gradient(circle,color-mix(in srgb,var(--accent-color),transparent 92%)0,transparent 70%)}
}
.decoration-circle {
animation:floatUp 5s ease-in-out infinite}
.decoration-circle:last-child {
border-color:var(--accent-color);width:70px;height:70px}
@supports (color:color-mix(in lab,red,red)) {
.decoration-circle:last-child {
border-color:color-mix(in srgb,var(--accent-color),transparent 85%)}
}
.decoration-circle:last-child {
animation:floatDown 3.5s ease-in-out infinite}
@keyframes floatUp {
0%,to {
transform:translateY(0)}
50% {
transform:translateY(-18px)}
}
@keyframes floatDown {
0%,to {
transform:translateY(0)}
50% {
transform:translateY(12px)}
}
.bento-wide-content {
align-items:flex-start;gap:20px;margin-bottom:20px;display:flex}
.bento-wide-content .bento-icon {
flex-shrink:0;width:52px;min-width:52px;height:52px;min-height:52px;margin-bottom:0}
.bento-wide-content .bento-icon i {
font-size:22px}
.bento-wide-text h3 {
margin-bottom:6px}
.bento-stats {
border-top:1px solid var(--border-color);gap:32px;padding-top:16px;display:flex}
.stat {
flex-direction:column;display:flex}
.stat-number {
color:var(--accent-color);font-size:24px;font-weight:700}
.stat-label {
color:var(--text-color-alower);text-transform:uppercase;letter-spacing:.5px;font-size:12px}
.bento-small {
text-align:center;flex-direction:column;justify-content:center;align-items:center;padding:24px;display:flex}
.bento-small .bento-icon {
margin-bottom:12px}
.bento-small h3 {
margin-bottom:0;font-size:16px}
@media (max-width:900px) {
.bento-grid {
grid-template-columns:repeat(2,1fr)}
.bento-large,.bento-wide {
grid-column:span 2}
}
@media (max-width:600px) {
.bento-grid {
grid-template-columns:1fr}
.bento-large,.bento-wide {
grid-area:span 1/span 1}
.bento-small {
grid-column:span 1}
.features-title {
font-size:36px}
.features-section {
padding:100px 16px}
}
.video-section {
z-index:10;width:100%;max-width:1000px;margin:0 auto;padding:200px 24px 150px;position:relative}
.video-title {
letter-spacing:-1px;color:var(--text-color);text-align:center;margin-bottom:20px;font-size:56px;font-weight:500;line-height:1.1}
.video-subtitle {
color:var(--text-color-alower);text-align:center;margin-bottom:40px;font-size:16px;font-weight:400;line-height:1.5}
.video-player {
aspect-ratio:16/9;border-radius:var(--lg-radius);border:1px solid var(--border-color);background:var(--button-bg);width:100%;overflow:hidden}
.video-player iframe {
border:none;width:100%;height:100%}
@media (max-width:768px) {
.video-title {
font-size:32px}
.video-section {
margin-top:100px}
}
.legal-page {
min-height:100vh;padding:140px 24px 120px;position:relative;overflow:hidden}
.legal-page .hero-glow,.legal-page .hero-overlay {
z-index:0}
.legal-shell {
z-index:1;max-width:1100px;margin:0 auto;position:relative}
.legal-hero {
text-align:center;margin-bottom:40px}
.legal-pill {
background:var(--button-bg);border:1px solid var(--border-color);color:var(--text-color);letter-spacing:.2em;text-transform:uppercase;border-radius:999px;align-items:center;gap:10px;margin-bottom:20px;padding:8px 18px;font-size:12px;display:inline-flex}
.legal-title {
letter-spacing:-1px;color:var(--text-color);margin-bottom:16px;font-size:56px;font-weight:600;line-height:1.1}
.legal-subtitle {
max-width:720px;margin:0 auto 20px;font-size:16px;line-height:1.6}
.legal-meta,.legal-subtitle {
color:var(--text-color-alower)}
.legal-meta {
flex-wrap:wrap;justify-content:center;gap:12px;font-size:13px;display:flex}
.legal-meta span {
align-items:center;gap:8px;display:inline-flex}
.legal-grid {
--legal-card-height:min(68vh,720px);grid-template-columns:260px 1fr;align-items:stretch;gap:20px;display:grid}
.legal-card {
-webkit-backdrop-filter:blur(20px);border:1px solid var(--border-color);background:linear-gradient(165deg,#0a0a0ce6,#050506fa);border-radius:24px;padding:24px;box-shadow:0 12px 32px #00000059}
.legal-card-title {
text-transform:uppercase;letter-spacing:.2em;color:var(--text-color-alower);margin-bottom:10px;font-size:11px}
.legal-content,.legal-toc {
height:var(--legal-card-height)}
.legal-toc {
flex-direction:column;gap:10px;display:flex}
.legal-toc a {
color:var(--text-color);transition:var(--transition);background:#ffffff05;border:1px solid #0000;border-radius:12px;align-items:center;gap:10px;padding:10px 12px;font-size:14px;text-decoration:none;display:flex}
.legal-toc a:hover {
border-color:var(--accent-color);color:var(--accent-color)}
.legal-content {
scrollbar-gutter:stable;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb)transparent;border-radius:18px;gap:28px;padding-right:28px;overflow-y:auto}
.legal-content,.legal-section {
flex-direction:column;display:flex}
.legal-section {
gap:12px;scroll-margin-top:12px}
.legal-section h2 {
letter-spacing:-.2px;font-size:22px}
.legal-section h2,.legal-section h3 {
color:var(--text-color);font-weight:600}
.legal-section h3 {
font-size:16px}
.legal-section p {
color:var(--text-color-alower);font-size:14px;line-height:1.7}
.legal-section ul {
flex-direction:column;gap:8px;padding-left:18px;display:flex}
.legal-section li {
color:var(--text-color-alower);font-size:14px;line-height:1.6}
.legal-highlight {
background:#ffcba414;border:1px solid #ffcba433;border-radius:16px;flex-direction:column;gap:8px;padding:16px;display:flex}
.legal-highlight strong {
color:var(--text-color);font-size:14px}
.legal-highlight p {
color:var(--text-color-alower);font-size:13px;line-height:1.6}
.legal-columns {
grid-template-columns:repeat(2,1fr);gap:16px;display:grid}
.legal-contact a {
color:var(--accent-color);text-decoration:none}
.legal-contact a:hover {
opacity:.85}
.legal-content::-webkit-scrollbar {
width:8px}
.legal-content::-webkit-scrollbar-track {
background:0 0}
.legal-content::-webkit-scrollbar-thumb {
background:var(--scrollbar-thumb-soft);background-clip:content-box;border:2px solid #0000;border-radius:6px}
.legal-content::-webkit-scrollbar-thumb:hover {
background:var(--scrollbar-thumb-hover)}
[data-theme=light] .legal-card {
background:linear-gradient(165deg,#fffffff5,#f8f7f4f2);border-color:#00000014;box-shadow:0 12px 30px #00000014}
[data-theme=light] .legal-content {
scrollbar-color:var(--scrollbar-thumb)transparent}
[data-theme=light] .legal-toc a {
background:#00000008}
[data-theme=light] .legal-highlight {
background:#e07a3d14;border-color:#e07a3d33}
@media (max-width:960px) {
.legal-grid {
grid-template-columns:1fr}
.legal-toc {
height:auto}
.legal-content {
height:auto;overflow:visible}
}
@media (max-width:640px) {
.legal-page {
padding:120px 16px 100px}
.legal-title {
font-size:36px}
.legal-card {
padding:20px}
.legal-columns {
grid-template-columns:1fr}
}
.footer {
border-top:1px solid var(--border-color);margin-top:60px;padding:40px 24px}
.footer-container {
flex-wrap:wrap;justify-content:space-between;gap:40px;max-width:1200px;margin:0 auto;display:flex}
.footer-column {
flex-direction:column;gap:12px;display:flex}
.footer-column-title {
color:var(--text-color);align-items:center;gap:8px;font-size:14px;font-weight:500;display:flex}
.footer-column nav {
flex-direction:column;gap:8px;display:flex}
.footer-column nav a,.footer-column nav span {
color:var(--text-color-alower);cursor:pointer;transition:var(--transition);font-size:14px;text-decoration:none}
.footer-column nav a:hover,.footer-column nav span:hover {
color:var(--accent-color)}
.footer-line {
background:var(--border-color);width:100%;height:1px;margin:20px 0}
.footer-bottom {
max-width:1200px;color:var(--text-color-alower);flex-wrap:wrap;justify-content:space-between;gap:20px;margin:0 auto;font-size:14px}
.footer-bottom,.footer-logo {
align-items:center;display:flex}
.footer-logo {
gap:10px;text-decoration:none}
.footer-logo-icon {
background:var(--accent-color);border-radius:var(--md-radius);justify-content:center;align-items:center;width:32px;height:32px;display:flex;box-shadow:inset 0 1px 1px #fff}
.footer-logo-icon span {
color:#000;font-size:14px;font-weight:700}
.footer-logo-text {
color:var(--text-color);font-size:16px;font-weight:600}
::-webkit-scrollbar {
width:8px;height:8px}
::-webkit-scrollbar-track {
background:var(--bg-color)}
::-webkit-scrollbar-thumb {
background:var(--scrollbar-thumb-soft);border-radius:4px}
::-webkit-scrollbar-thumb:hover {
background:var(--scrollbar-thumb-hover)}
::selection {
background:var(--accent-color);color:#000}
@media (max-width:1024px) {
.header .nav-center {
display:none}
.header {
padding:16px 20px}
.auth-container {
display:none}
.mobile-toggle {
display:inline-flex}
h1 {
font-size:48px}
}
@media (max-width:768px) {
.header {
width:calc(100% - 24px);margin-top:12px;padding:12px 14px;left:12px;right:12px}
.header-right {
gap:10px}
.theme-toggles {
display:none}
.lang-current {
padding:6px 10px;font-size:12px}
.mobile-nav {
top:78px;left:12px;right:12px}
h1 {
font-size:36px}
.subtext {
padding:0 20px;font-size:14px}
.hero-actions {
flex-direction:column}
}
@media (max-width:480px) {
.mobile-nav-links {
grid-template-columns:1fr}
}
.auth-page {
background:var(--bg-color);justify-content:center;align-items:center;min-height:100vh;padding:120px 20px 40px;display:flex;position:relative;overflow:hidden}
.auth-bg-shapes {
pointer-events:none;position:absolute;inset:0;overflow:hidden}
.auth-shape {
border-radius:50%;position:absolute}
.auth-shape-1 {
background:#ffcba426;width:400px;height:400px;top:-100px;right:-100px}
.auth-shape-2 {
background:#f43f5e1a;width:300px;height:300px;bottom:-50px;left:-50px}
.auth-shape-3 {
background:#8b5cf61a;width:200px;height:200px;top:50%;left:50%;transform:translate(-50%,-50%)}
.auth-container-wrapper {
z-index:10;flex-direction:column;align-items:center;gap:24px;width:100%;max-width:420px;display:flex}
.auth-logo {
color:var(--text-color);transition:var(--transition);align-items:center;gap:12px;font-size:18px;font-weight:600;text-decoration:none;display:flex}
.auth-logo:hover {
color:var(--accent-color)}
.auth-logo i {
font-size:14px}
.auth-card {
-webkit-backdrop-filter:blur(24px);border:1px solid var(--border-color);border-radius:var(--lg-radius);background:#0a0a0cbf;width:100%;padding:32px}
.auth-tabs {
background:var(--button-bg);border-radius:var(--md-radius);gap:8px;margin-bottom:28px;padding:4px;display:flex}
.auth-tab {
color:var(--text-color-alower);cursor:pointer;border-radius:var(--sm-radius);transition:var(--transition);background:0 0;border:none;flex:1;justify-content:center;align-items:center;gap:8px;padding:12px 20px;font-size:14px;font-weight:500;display:flex}
.auth-tab i {
font-size:13px}
.auth-tab.active {
background:var(--accent-color);color:#000}
.auth-form {
gap:20px}
.auth-field,.auth-form {
flex-direction:column;display:flex}
.auth-field {
gap:8px}
.auth-field label {
color:var(--text-color);font-size:14px;font-weight:500}
.auth-input-wrapper {
align-items:center;display:flex;position:relative}
.auth-input-wrapper i {
color:var(--text-color-alower);font-size:14px;position:absolute;left:16px}
.auth-input-wrapper input {
background:var(--button-bg);border:1px solid var(--border-color);border-radius:var(--md-radius);width:100%;color:var(--text-color);font-size:14px;font-family:var(--family-regular);transition:var(--transition);padding:14px 16px 14px 44px}
.auth-input-wrapper input::placeholder {
color:var(--text-color-alower)}
.auth-input-wrapper input:focus {
border-color:var(--accent-color);outline:none}
.auth-input-wrapper.error input {
border-color:#e56161;box-shadow:0 0 0 1px #e5616133}
.auth-input-wrapper.error i {
color:#e56161}
.auth-options {
justify-content:space-between}
.auth-checkbox,.auth-options {
align-items:center;display:flex}
.auth-checkbox {
cursor:pointer;color:var(--text-color-alower);gap:8px;font-size:13px}
.auth-checkbox input {
width:16px;height:16px;accent-color:var(--accent-color);cursor:pointer}
.auth-forgot {
color:var(--accent-color);transition:var(--transition);font-size:13px;text-decoration:none}
.auth-forgot:hover {
opacity:.8}
.auth-recaptcha {
align-items:center;width:100%;margin-top:4px}
.auth-recaptcha,.auth-recaptcha>div {
justify-content:center;display:flex}
.auth-submit {
width:100%;margin-top:8px;padding:14px 24px}
.auth-divider {
color:var(--text-color-alower);align-items:center;gap:16px;font-size:13px;display:flex}
.auth-divider:after,.auth-divider:before {
content:"";background:var(--border-color);flex:1;height:1px}
.auth-socials {
gap:12px}
.auth-social,.auth-socials {
justify-content:center;display:flex}
.auth-social {
background:var(--button-bg);border:1px solid var(--border-color);border-radius:var(--md-radius);width:48px;height:48px;color:var(--text-color);cursor:pointer;transition:var(--transition);align-items:center;font-size:18px}
.auth-social:hover {
border-color:var(--accent-color);color:var(--accent-color)}
.auth-footer-text {
color:var(--text-color-alower);font-size:14px}
.auth-tos-note {
text-align:center;font-size:12px}
.auth-footer-text a {
color:var(--accent-color);transition:var(--transition);text-decoration:none}
.auth-footer-text a:hover {
opacity:.8}
.auth-footer-text button {
color:var(--accent-color);cursor:pointer;transition:var(--transition);background:0 0;border:none;padding:0;font-size:14px}
.auth-footer-text button:hover {
opacity:.8}
.auth-2fa-backdrop {
z-index:240;background:#000000a6;justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}
.auth-2fa-modal {
border:1px solid var(--border-color);-webkit-backdrop-filter:blur(24px);background:#0a0a0cd1;border-radius:22px;flex-direction:column;gap:14px;width:100%;max-width:420px;padding:24px;display:flex;box-shadow:0 20px 50px #00000073}
.auth-2fa-title {
color:var(--text-color);font-size:20px;font-weight:600}
.auth-2fa-subtitle {
color:var(--text-color-alower);font-size:13px;line-height:1.45}
.auth-2fa-input input {
text-align:center;letter-spacing:.08em}
.auth-2fa-submit {
justify-content:center;width:100%;margin-top:4px}
[data-theme=light] .auth-card {
background:linear-gradient(165deg,#fffffff2,#f8f7f4fa);box-shadow:0 8px 40px #00000014}
[data-theme=light] .auth-shape-1 {
background:#e07a3d26}
[data-theme=light] .auth-shape-2 {
background:#f43f5e1a}
[data-theme=light] .auth-shape-3 {
background:#8b5cf614}
[data-theme=light] .auth-input-wrapper input,[data-theme=light] .auth-social {
background:#fff}
[data-theme=light] .auth-2fa-modal {
background:#f8f7f4eb;border-color:#00000014;box-shadow:0 14px 34px #0000001f}
@media (max-width:480px) {
.auth-card {
padding:24px}
.auth-socials {
gap:8px}
.auth-social {
width:44px;height:44px}
}
.recover-page {
background:var(--bg-color);justify-content:center;align-items:center;min-height:100vh;padding:140px 24px 100px;display:flex;position:relative;overflow:hidden}
.recover-shell {
z-index:10;width:100%;max-width:520px;position:relative}
.recover-card {
gap:20px}
.recover-card,.recover-header {
flex-direction:column;display:flex}
.recover-header {
text-align:center;gap:6px}
.recover-pill {
border:1px solid var(--border-color);background:var(--button-bg);color:var(--text-color-alower);border-radius:999px;justify-content:center;align-items:center;gap:8px;width:fit-content;margin:0 auto;padding:8px 14px;font-size:12px;font-weight:500;display:inline-flex}
.recover-title {
color:var(--text-color);font-size:26px;font-weight:600}
.recover-subtitle {
color:var(--text-color-alower);margin-top:-4px;font-size:13px;line-height:1.6}
.recover-status {
border-radius:var(--md-radius);border:1px solid var(--border-color);background:var(--button-bg);color:var(--text-color);align-items:center;gap:10px;padding:10px 12px;font-size:13px;display:flex}
.recover-status.success {
border-color:var(--accent-color)}
@supports (color:color-mix(in lab,red,red)) {
.recover-status.success {
border-color:color-mix(in srgb,var(--accent-color),transparent 55%)}
}
.recover-status.success {
color:var(--accent-color)}
.recover-status.error {
color:#ffb0b0;background:#ff5f5f1a;border-color:#ff5f5f80}
.recover-step {
flex-direction:column;gap:12px;display:flex}
.recover-step .recover-account {
margin-top:-18px}
.recover-step-label {
color:var(--text-color);font-size:13px;font-weight:500}
.recover-account {
justify-content:center;align-items:center;gap:8px;padding:0;display:flex}
.recover-account-label {
color:var(--text-color-alower);font-size:12px}
.recover-account-name {
color:var(--text-color);font-size:14px;font-weight:600}
.recover-disabled {
opacity:.6;cursor:not-allowed}
@media (max-width:520px) {
.recover-page {
padding:120px 16px 80px}
.recover-title {
font-size:22px}
}
.dashboard-page {
background:var(--bg-color);justify-content:center;align-items:center;min-height:100vh;padding:120px 24px 80px;display:flex;position:relative;overflow:hidden}
.dashboard-page .hero-glow {
filter:blur(48px);pointer-events:none;background:linear-gradient(to bottom right,#ffcba40d,#0000,#f43f5e0d);position:absolute;inset:0}
.dashboard-page .hero-overlay {
background:linear-gradient(to top,var(--bg-color)0,transparent 50%,#030303cc 100%);pointer-events:none;position:absolute;inset:0}
.dashboard-shell {
z-index:1;width:100%;max-width:1100px;margin:0 auto;position:relative}
.dashboard-layout {
align-items:flex-start;gap:20px;display:flex}
.dashboard-sidebar {
flex-direction:column;gap:16px;width:500px;min-width:500px;display:flex}
.dashboard-main {
flex-direction:column;flex:1;gap:10px;display:flex}
.profile-card {
align-items:center;gap:16px;padding:16px 20px;display:flex}
.profile-avatar {
background:0 0;border-radius:50%;width:46px;height:46px;padding:0;position:relative}
.profile-avatar-button {
cursor:pointer;background:0 0;border:none;border-radius:50%;width:100%;height:100%;margin:0;padding:0}
.profile-avatar img {
object-fit:cover;image-rendering:auto;background:#121218;border-radius:50%;width:100%;height:100%}
.profile-status {
background:#7cffa4;border:2px solid #0b0b10;border-radius:50%;width:8px;height:8px;position:absolute;bottom:1px;right:1px;box-shadow:0 0 0 3px #7cffa433}
.profile-info {
flex-direction:column;gap:4px;display:flex}
.profile-name-row {
align-items:center;gap:8px;display:flex}
.profile-name-row h2 {
color:var(--text-color);font-size:16px;font-weight:600;font-family:var(--family-regular)}
.profile-id,.profile-info p {
color:var(--text-color-alower);font-size:12px}
.profile-action {
border-radius:var(--md-radius);border:1px solid var(--border-color);background:var(--button-bg);width:36px;height:36px;color:var(--text-color-alower);transition:var(--transition);justify-content:center;align-items:center;margin-left:auto;padding:0;display:inline-flex}
.profile-action:hover {
color:var(--text-color);border-color:var(--accent-color)}
.profile-logout:hover {
color:#e56161;border-color:#e56161}
@media (max-width:1100px) {
.dashboard-tab {
min-width:130px}
}
@media (max-width:1024px) {
.dashboard-layout {
flex-direction:column}
.dashboard-sidebar {
width:100%;min-width:0}
.dashboard-main {
width:100%}
}
@media (max-width:980px) {
.dashboard-tabs {
justify-content:flex-start}
}
@media (max-width:720px) {
.dashboard-page {
padding:110px 16px 60px}
.dashboard-tabs {
flex-wrap:wrap}
.dashboard-tab {
flex:1;min-width:0}
.info-grid,.info-grid.secondary {
grid-template-columns:1fr}
.license-row {
flex-direction:column;align-items:stretch}
.profile-card {
flex-wrap:wrap}
.profile-action {
margin-left:0}
.settings-row {
flex-direction:column;align-items:stretch}
.settings-input-wrapper {
width:100%}
.settings-btn {
justify-content:center;width:100%}
}
@property --tw-border-style {
syntax:"*";inherits:false;initial-value:solid}
@property --tw-gradient-position {
syntax:"*";inherits:false}
@property --tw-gradient-from {
syntax:"";inherits:false;initial-value:#0000}
@property --tw-gradient-via {
syntax:"";inherits:false;initial-value:#0000}
@property --tw-gradient-to {
syntax:"";inherits:false;initial-value:#0000}
@property --tw-gradient-stops {
syntax:"*";inherits:false}
@property --tw-gradient-via-stops {
syntax:"*";inherits:false}
@property --tw-gradient-from-position {
syntax:"";inherits:false;initial-value:0}
@property --tw-gradient-via-position {
syntax:"";inherits:false;initial-value:50%}
@property --tw-gradient-to-position {
syntax:"";inherits:false;initial-value:100%}
@property --tw-blur {
syntax:"*";inherits:false}
@property --tw-brightness {
syntax:"*";inherits:false}
@property --tw-contrast {
syntax:"*";inherits:false}
@property --tw-grayscale {
syntax:"*";inherits:false}
@property --tw-hue-rotate {
syntax:"*";inherits:false}
@property --tw-invert {
syntax:"*";inherits:false}
@property --tw-opacity {
syntax:"*";inherits:false}
@property --tw-saturate {
syntax:"*";inherits:false}
@property --tw-sepia {
syntax:"*";inherits:false}
@property --tw-drop-shadow {
syntax:"*";inherits:false}
@property --tw-drop-shadow-color {
syntax:"*";inherits:false}
@property --tw-drop-shadow-alpha {
syntax:"";inherits:false;initial-value:100%}
@property --tw-drop-shadow-size {
syntax:"*";inherits:false}
@property --tw-ease {
syntax:"*";inherits:false}
@keyframes siteNoticeIn {
0% {
opacity:0;transform:translateY(8px)}
to {
opacity:1;transform:translateY(0)}
}
@keyframes siteNoticeOut {
0% {
opacity:1;transform:translateY(0)}
to {
opacity:0;transform:translateY(12px)}
}
.site-notifications {
position:fixed;right:clamp(16px,3.5vw,28px);bottom:clamp(16px,3.5vw,28px);display:flex;flex-direction:column-reverse;align-items:flex-end;gap:12px;z-index:var(--z-index);pointer-events:none}
.site-notice {
--notice-duration:5000ms;--notice-accent:#b7b7b7;display:flex;align-items:center;gap:12px;padding:16px 18px;border-radius:var(--md-radius);background:var(--button-bg);color:var(--text-color);font-size:14px;line-height:1.4;width:fit-content;max-width:min(420px,94vw);min-height:56px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06);animation:siteNoticeIn .35s ease,siteNoticeOut .35s ease calc(var(--notice-duration) - .35s) forwards;pointer-events:auto}
.site-notice__icon {
width:34px;height:34px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--notice-accent),transparent 85%);color:var(--notice-accent);font-size:16px;flex:0 0 auto}
.site-notice__body {
display:flex;flex-direction:column;gap:2px;min-width:0}
.site-notice__title {
font-weight:600;font-size:13px}
.site-notice__message {
font-size:13px;color:var(--text-color-alower);word-break:break-word}
.site-notice--success {
--notice-accent:#8dd6b0}
.site-notice--info {
--notice-accent:#8abedb}
.site-notice--error {
--notice-accent:#b7b7b7}
[data-theme=light] .site-notice {
background:#ffffff;color:#1f1f1f;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 10px 32px rgba(0,0,0,.08)}
[data-theme=light] .site-notice__message {
color:#5a5a5a}
.products-page {
min-height:100vh;position:relative;overflow:hidden;padding:140px 24px 120px}
.products-page .hero-glow,.products-page .hero-overlay {
z-index:0}
.products-page [data-aos] {
filter:blur(12px)}
.products-page [data-aos].aos-animate {
filter:blur(0)}
.products-shell {
max-width:1100px;margin:0 auto;position:relative;z-index:1}
.products-hero {
text-align:center;margin-bottom:28px}
.products-tabs {
display:flex;align-items:center;justify-content:center;gap:8px;background:rgba(255,255,255,.03);border:1px solid var(--border-color);padding:6px 10px;border-radius:18px;margin:10px auto 0;width:fit-content}
.products-tab {
border:none;background:transparent;color:var(--text-color-alower);padding:8px 14px;border-radius:12px;font-size:14px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;transition:var(--transition)}
.products-tab i {
font-size:13px}
.products-tab:hover {
color:var(--text-color)}
.products-tab.active {
background:var(--accent-color);color:#000;box-shadow:inset 0 1px 1px #fff}
.products-pill {
display:inline-flex;align-items:center;gap:10px;padding:8px 18px;border-radius:999px;background:var(--button-bg);border:1px solid var(--border-color);color:var(--text-color);font-size:12px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:20px}
.products-title {
font-size:56px;line-height:1.1;font-weight:600;letter-spacing:-1px;color:var(--text-color);margin-bottom:16px}
.products-subtitle {
color:var(--text-color-alower);font-size:16px;line-height:1.6;max-width:720px;margin:0 auto 16px}
.products-rate {
display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;color:var(--text-color-alower);padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.03);border:1px solid var(--border-color);width:fit-content;margin:0 auto}
.products-grid {
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.products-empty {
grid-column:1/-1;padding:24px;border-radius:18px;border:1px dashed var(--border-color);text-align:center;color:var(--text-color-alower);font-size:14px}
.product-card {
background:linear-gradient(165deg,rgba(10,10,12,.9),rgba(5,5,6,.98));border:1px solid var(--border-color);border-radius:24px;padding:28px;display:flex;flex-direction:column;gap:16px;position:relative;overflow:hidden;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transition:var(--transition);transform:translateY(0)}
.product-card:hover {
transform:translateY(-6px)}
.product-card:after {
content:"";position:absolute;inset:0;background:radial-gradient(circle at top,color-mix(in srgb,var(--accent-color),transparent 85%),transparent 55%);opacity:0;transition:opacity .3s ease;pointer-events:none}
.product-card:hover:after {
opacity:1}
.product-card-featured {
border-color:color-mix(in srgb,var(--accent-color),transparent 60%);box-shadow:0 20px 40px color-mix(in srgb,var(--accent-color),transparent 85%)}
.product-card-top {
display:flex;align-items:center;justify-content:space-between;gap:12px}
.product-card-logo {
width:46px;height:46px;border-radius:14px;border:1px solid var(--border-color);background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;overflow:hidden}
.product-card-logo img {
width:100%;height:100%;object-fit:cover}
.product-card-logo--placeholder {
color:var(--accent-color);font-size:18px}
.product-badge {
padding:6px 12px;border-radius:999px;font-size:11px;color:#000;background:var(--accent-color);box-shadow:inset 0 1px 1px #fff;text-transform:uppercase;letter-spacing:.12em}
.product-card h3 {
font-size:20px;color:var(--text-color);font-weight:600}
.product-card .product-desc {
color:var(--text-color-alower);font-size:13px;line-height:1.5}
.product-price {
display:flex;align-items:center;gap:10px}
.product-price-rub {
font-size:28px;font-weight:600;color:var(--text-color);line-height:1}
.product-price-usd {
font-size:14px;color:var(--text-color-alower);line-height:1}
.product-cta {
margin-top:auto;gap:8px}
.product-modal-backdrop {
position:fixed;inset:0;background:rgba(3,3,3,.7);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);display:flex;align-items:center;justify-content:center;padding:24px;z-index:300}
.product-modal {
width:min(960px,100%);max-height:calc(100vh - 96px);background:linear-gradient(165deg,rgba(10,10,12,.95),rgba(5,5,6,.98));border:1px solid var(--border-color);border-radius:22px;padding:28px;display:grid;grid-template-columns:.9fr 1.1fr;gap:28px;position:relative;box-shadow:0 25px 60px rgba(0,0,0,.5);overflow-y:auto}
.product-modal-close {
position:absolute;top:18px;right:18px;width:36px;height:36px;border-radius:12px;border:1px solid var(--border-color);background:var(--button-bg);color:var(--text-color-alower);display:inline-flex;align-items:center;justify-content:center;transition:var(--transition)}
.product-modal-close:hover {
border-color:var(--accent-color);color:var(--text-color)}
.product-modal-left {
display:flex;flex-direction:column;gap:16px}
.product-modal-name {
font-size:20px;font-weight:600;color:var(--text-color)}
.product-modal-image {
border-radius:18px;border:1px solid var(--border-color);background:radial-gradient(circle at top,color-mix(in srgb,var(--accent-color),transparent 70%),transparent 60%);min-height:220px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.product-modal-image:after {
content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.04),transparent);pointer-events:none}
.product-modal-image-inner {
display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--text-color);text-transform:uppercase;letter-spacing:.25em;font-size:11px}
.product-modal-logo {
width:88px;height:88px;object-fit:contain;border-radius:18px;border:1px solid var(--border-color);background:rgba(255,255,255,.04);padding:10px}
.product-modal-image-inner i {
font-size:46px;color:var(--accent-color);text-shadow:0 10px 30px rgba(255,203,164,.4)}
.product-modal-price {
display:flex;align-items:center;gap:12px}
.product-modal-right {
display:flex;flex-direction:column;gap:18px}
.product-modal-section {
display:flex;flex-direction:column;gap:10px}
.product-modal-label {
font-size:12px;text-transform:uppercase;letter-spacing:.2em;color:var(--text-color-alower)}
.product-modal-section p {
font-size:14px;line-height:1.6;color:var(--text-color)}
.payment-options {
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.payment-option {
border:1px solid var(--border-color);background:var(--button-bg);color:var(--text-color-alower);border-radius:14px;padding:12px 14px;font-size:13px;display:flex;align-items:center;gap:10px;transition:var(--transition)}
.payment-option i {
font-size:14px}
.payment-option.active {
border-color:var(--accent-color);color:var(--text-color);box-shadow:inset 0 1px 1px rgba(255,255,255,.35)}
.promo-input {
display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:var(--button-bg);border:1px solid var(--border-color);transition:var(--transition)}
.promo-input:focus-within {
border-color:var(--accent-color)}
.promo-input i {
color:var(--text-color-alower)}
.promo-input input {
flex:1;background:transparent;border:none;color:var(--text-color);font-size:14px;font-family:var(--family-regular)}
.promo-input input::placeholder {
color:var(--text-color-alower)}
.promo-apply {
white-space:nowrap;padding:6px 10px}
.promo-status {
display:block;margin-top:8px;font-size:12px;color:var(--text-color-alower)}
.promo-status-valid {
color:var(--accent-color)}
.promo-status-invalid {
color:#f87171}
.payment-status {
display:block;margin-top:8px;font-size:12px;color:var(--text-color-alower)}
.payment-status-success {
color:var(--accent-color)}
.payment-status-error {
color:#f87171}
.product-price-old {
font-size:12px;color:var(--text-color-alower);text-decoration:line-through}
.product-modal-buy {
gap:8px;margin-top:6px;width:100%;justify-content:center}
[data-theme=light] .products-rate,[data-theme=light] .products-tabs {
background:rgba(255,255,255,.8)}
[data-theme=light] .product-card,[data-theme=light] .product-modal {
background:linear-gradient(165deg,rgba(255,255,255,.96),rgba(248,247,244,.95));border-color:rgba(0,0,0,.08);box-shadow:0 16px 36px rgba(0,0,0,.08)}
[data-theme=light] .product-modal-image {
background:radial-gradient(circle at top,color-mix(in srgb,var(--accent-color),transparent 75%),transparent 60%)}
[data-theme=light] .product-card .product-desc,[data-theme=light] .product-price-usd,[data-theme=light] .promo-input i,[data-theme=light] .promo-input input::placeholder {
color:rgba(0,0,0,.55)}
[data-theme=light] .product-modal-section p {
color:rgba(0,0,0,.75)}
[data-theme=light] .payment-option {
background:#ffffff;color:rgba(0,0,0,.6)}
[data-theme=light] .payment-option.active {
color:#000}
[data-theme=light] .promo-input {
background:#ffffff}
@media (max-width:1024px) {
.products-grid {
grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px) {
.product-modal {
grid-template-columns:1fr}
.product-modal-left {
align-items:stretch}
}
@media (max-width:640px) {
.products-page {
padding:120px 16px 100px}
.products-title {
font-size:36px}
.products-tabs {
width:100%;justify-content:center;flex-wrap:wrap}
.products-grid {
grid-template-columns:1fr}
.product-modal {
padding:20px}
.payment-options {
grid-template-columns:1fr}
}
/* ========== Components (ex-next) ========== */
.panel-page {
min-height:100vh;position:relative;overflow:hidden;padding:140px 24px 120px}
.panel-page .hero-glow,.panel-page .hero-overlay {
z-index:0}
.panel-shell {
max-width:1200px;margin:0 auto;position:relative;z-index:1}
.panel-hero {
text-align:center;margin-bottom:32px}
.panel-pill {
display:inline-flex;align-items:center;gap:10px;padding:8px 18px;border-radius:999px;background:var(--button-bg);border:1px solid var(--border-color);color:var(--text-color);font-size:12px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:16px}
.panel-title {
font-size:52px;line-height:1.1;font-weight:600;letter-spacing:-1px;color:var(--text-color);margin-bottom:12px}
.panel-subtitle {
color:var(--text-color-alower);font-size:16px;line-height:1.6;max-width:720px;margin:0 auto}
.panel-stats {
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}
.panel-tabs {
display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:24px 0 18px}
.panel-tab {
padding:var(--sm-padding) var(--md-padding);border-radius:var(--md-radius);border:1px solid var(--border-color);background:var(--button-bg);color:var(--text-color-alower);font-weight:500;font-family:var(--family-regular);display:flex;align-items:center;justify-content:center;gap:8px;transition:var(--transition)}
.panel-tab,.panel-tab i {
font-size:13px}
.panel-tab:hover {
border-color:var(--accent-color);color:var(--text-color)}
.panel-tab.active {
background:var(--accent-color);color:black;border-color:var(--accent-color);box-shadow:inset 0 1px 1px #fff}
.panel-content {
display:flex;flex-direction:column;gap:18px}
.panel-tools {
display:flex;flex-wrap:wrap;gap:8px}
.panel-filter,.panel-search {
display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--md-radius);border:1px solid var(--border-color);background:var(--button-bg);color:var(--text-color);font-size:13px;min-width:200px}
.panel-filter {
min-width:160px}
.panel-filter i,.panel-search i {
color:var(--text-color-alower);font-size:12px}
.panel-filter select,.panel-search input {
flex:1;background:transparent;border:none;color:var(--text-color);font-size:13px;font-family:var(--family-regular)}
.panel-search input::placeholder {
color:rgba(255,255,255,.35)}
.panel-filter select {
cursor:pointer}
.panel-pagination {
display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:6px}
.panel-pagination-pages {
display:flex;align-items:center;gap:6px}
.panel-pagination-btn {
display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:10px;border:1px solid var(--border-color);background:var(--button-bg);color:var(--text-color-alower);font-size:12px;transition:var(--transition)}
.panel-pagination-btn:hover {
border-color:var(--accent-color);color:var(--text-color)}
.panel-pagination-btn.active {
background:var(--accent-color);color:#000;border-color:var(--accent-color);box-shadow:inset 0 1px 1px #fff}
.panel-pagination-btn:disabled {
opacity:.5;cursor:not-allowed}
.panel-grid {
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.panel-card {
background:linear-gradient(165deg,rgba(10,10,12,.9),rgba(5,5,6,.98));backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border-color);border-radius:22px;padding:22px;box-shadow:0 12px 32px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:18px}
.panel-card-wide {
grid-column:span 2}
.panel-card-header h2 {
font-size:18px;color:var(--text-color);margin-bottom:6px}
.panel-card-header p {
color:var(--text-color-alower);font-size:13px}
.panel-card-header-row {
display:flex;align-items:center;justify-content:space-between;gap:12px}
.panel-header-btn {
gap:8px}
.panel-stat {
display:flex;flex-direction:column;gap:10px}
.panel-stat-label {
color:var(--text-color-alower);font-size:12px;text-transform:uppercase;letter-spacing:.15em}
.panel-stat-row {
display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.panel-stat-value {
font-size:22px;font-weight:600;color:var(--text-color)}
.panel-stat-delta {
font-size:12px;color:var(--accent-color)}
.panel-actions {
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.panel-action-card {
background:var(--button-bg);border:1px solid var(--border-color);border-radius:16px;padding:14px;display:flex;gap:12px;align-items:flex-start}
.panel-action-icon {
width:36px;height:36px;border-radius:12px;background:rgba(255,203,164,.15);color:var(--accent-color);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.panel-action-icon i {
font-size:16px}
.panel-action-title {
color:var(--text-color);font-size:14px;font-weight:500;display:block;margin-bottom:4px}
.panel-action-desc {
color:var(--text-color-alower);font-size:12px;line-height:1.5}
.panel-table {
display:flex;flex-direction:column;gap:10px}
.panel-row {
display:grid;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;border:1px solid var(--border-color);background:var(--button-bg);font-size:13px;color:var(--text-color)}
.panel-users-table .panel-row {
grid-template-columns:1.4fr .8fr .8fr .9fr}
.panel-promos-table .panel-row {
grid-template-columns:1fr .7fr .7fr .7fr 1fr}
.panel-products-table .panel-row {
grid-template-columns:1.3fr .6fr .5fr 1.2fr .8fr}
.panel-keys-table .panel-row {
grid-template-columns:1.2fr .8fr .8fr .9fr}
.panel-launcher-versions-table .panel-row {
grid-template-columns:1fr .9fr .5fr .8fr .9fr}
.panel-changelog-table .panel-row {
grid-template-columns:.8fr .8fr .6fr .7fr}
.panel-row-header {
background:transparent;border:none;padding:0 4px 4px;color:var(--text-color-alower);font-size:11px;text-transform:uppercase;letter-spacing:.12em}
.panel-cell-strong {
font-weight:600;color:var(--text-color)}
.panel-row-actions {
display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.panel-row-actions .btn-outline {
padding:6px 10px;font-size:12px}
.panel-action-btn,.panel-details-btn {
gap:6px}
.panel-user-identity {
display:flex;flex-direction:column;gap:4px}
.panel-user-uid {
letter-spacing:.16em}
.panel-row-subtext {
margin-top:4px}
.panel-cell-mono,.panel-row-subtext {
font-size:12px;color:var(--text-color-alower)}
.panel-cell-mono {
font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.panel-product-logo {
width:42px;height:42px;border-radius:12px;border:1px solid var(--border-color);background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--accent-color)}
.panel-product-logo img {
width:100%;height:100%;object-fit:cover}
.panel-empty {
padding:18px;border-radius:12px;border:1px dashed var(--border-color);color:var(--text-color-alower);text-align:center;grid-column:1/-1}
.panel-status-compact {
display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--text-color)}
.panel-status-dot {
width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.4);box-shadow:0 0 0 4px rgba(255,255,255,.05)}
.panel-status-dot--active {
background:#7cffb3;box-shadow:0 0 0 4px rgba(124,255,179,.15)}
.panel-status-dot--banned {
background:#e56161;box-shadow:0 0 0 4px rgba(229,97,97,.15)}
.panel-status {
display:inline-flex;align-items:center;justify-content:center;padding:4px 10px;border-radius:999px;font-size:11px;border:1px solid transparent}
.panel-status-active {
border-color:rgba(124,255,164,.4);color:#7cffb3;background:rgba(124,255,164,.08)}
.panel-status-flagged {
border-color:rgba(255,203,164,.4);color:var(--accent-color);background:rgba(255,203,164,.08)}
.panel-status-banned {
border-color:rgba(229,97,97,.4);color:#e56161;background:rgba(229,97,97,.08)}
.panel-status-expired {
border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.6);background:rgba(255,255,255,.06)}
.panel-status-available {
border-color:rgba(124,255,164,.4);color:#7cffb3;background:rgba(124,255,164,.08)}
.panel-status-used {
border-color:rgba(255,203,164,.4);color:var(--accent-color);background:rgba(255,203,164,.08)}
.panel-status-revoked {
border-color:rgba(229,97,97,.4);color:#e56161;background:rgba(229,97,97,.08)}
.panel-status-text {
padding:0;border:0;border-radius:0;background:transparent;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.panel-site-grid {
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.panel-security-list {
display:flex;flex-direction:column;gap:10px}
.panel-security-item {
display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:14px;border:1px solid var(--border-color);background:var(--button-bg);color:var(--text-color);font-size:13px;position:relative;cursor:pointer}
.panel-security-item input {
position:absolute;opacity:0;pointer-events:none}
.panel-security-item input:checked+.panel-toggle-slider {
background:var(--accent-color)}
.panel-security-item input:checked+.panel-toggle-slider:after {
transform:translateX(18px)}
.panel-toggle {
display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:14px;border:1px solid var(--border-color);background:var(--button-bg);color:var(--text-color);font-size:13px;cursor:pointer;position:relative}
.panel-toggle input {
position:absolute;opacity:0;pointer-events:none}
.panel-toggle-slider {
width:42px;height:22px;border-radius:999px;background:rgba(255,255,255,.12);position:relative;transition:var(--transition)}
.panel-toggle-slider:after {
content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:var(--transition)}
.panel-toggle input:checked+.panel-toggle-slider {
background:var(--accent-color)}
.panel-toggle input:checked+.panel-toggle-slider:after {
transform:translateX(18px)}
.panel-content-table .panel-row {
grid-template-columns:1.4fr .8fr .8fr}
.panel-security-table .panel-row {
grid-template-columns:.8fr 1.8fr .7fr .9fr}
.panel-security-log-type {
width:fit-content;gap:6px;padding:5px 10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.panel-security-log-type:before {
content:"";width:6px;height:6px;border-radius:999px;background:currentColor;opacity:.8}
.panel-status-log-type-log {
border-color:rgba(255,255,255,.18);color:var(--text-color-alower);background:rgba(255,255,255,.06)}
.panel-status-log-type-debugger {
border-color:rgba(229,97,97,.4);color:#e56161;background:rgba(229,97,97,.08)}
.panel-modal-backdrop {
position:fixed;inset:0;background:rgba(0,0,0,.65);display:flex;align-items:flex-start;justify-content:center;padding:24px;z-index:200;overflow-y:auto;overscroll-behavior:contain}
.panel-modal {
width:min(980px,100%);margin:auto 0;scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) transparent;border-radius:24px;border:1px solid var(--border-color);background:rgba(10,10,12,.75);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);padding:28px;position:relative;box-shadow:0 20px 50px rgba(0,0,0,.45)}
.panel-modal-close {
position:absolute;top:18px;right:18px;width:36px;height:36px;border-radius:12px;border:1px solid var(--border-color);background:var(--button-bg);color:var(--text-color-alower);display:inline-flex;align-items:center;justify-content:center}
.panel-modal-close:hover {
color:var(--text-color);border-color:var(--accent-color)}
.panel-modal::-webkit-scrollbar,.panel-user-list::-webkit-scrollbar {
width:8px}
.panel-modal::-webkit-scrollbar-track,.panel-user-list::-webkit-scrollbar-track {
background:transparent}
.panel-modal::-webkit-scrollbar-thumb,.panel-user-list::-webkit-scrollbar-thumb {
background:var(--scrollbar-thumb-soft);border-radius:6px;border:2px solid transparent;background-clip:content-box}
.panel-modal::-webkit-scrollbar-thumb:hover,.panel-user-list::-webkit-scrollbar-thumb:hover {
background:var(--scrollbar-thumb-hover)}
.panel-modal-header {
display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.panel-modal-title {
text-transform:uppercase;letter-spacing:.2em;margin-bottom:8px}
.panel-modal-title,.panel-modal-uid {
font-size:12px;color:var(--text-color-alower);display:block}
.panel-modal-uid {
margin-top:4px}
.panel-modal-grid {
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.panel-modal-column {
display:flex;flex-direction:column;gap:16px}
.panel-modal-section {
display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:16px;border:1px solid var(--border-color);background:var(--button-bg)}
.panel-modal-label {
font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--text-color-alower)}
.panel-ban-info {
display:flex;flex-direction:column;gap:6px}
.panel-ban-reason {
font-size:13px;color:var(--text-color);font-weight:600}
.panel-ban-meta {
font-size:12px;color:var(--text-color-alower)}
.panel-info-list {
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.panel-info-item {
display:flex;flex-direction:column;gap:4px}
.panel-info-label {
font-size:11px;color:var(--text-color-alower);text-transform:uppercase;letter-spacing:.12em}
.panel-info-value {
font-size:13px;color:var(--text-color)}
.panel-field {
display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--text-color-alower)}
.panel-field-hint {
font-size:11px;color:var(--text-color-alower);line-height:1.4}
.panel-multiselect {
position:relative}
.panel-multiselect-trigger {
width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;min-height:36px;border-radius:var(--sm-radius);border:1px solid var(--border-color);background:rgba(0,0,0,.2);color:var(--text-color);font-size:12px;text-align:left;transition:var(--transition)}
.panel-multiselect-trigger.open {
border-color:var(--accent-color);box-shadow:0 0 0 1px rgba(255,203,164,.25)}
.panel-multiselect-value {
display:flex;flex-wrap:nowrap;gap:6px;overflow:hidden;min-width:0}
.panel-multiselect-placeholder {
color:var(--text-color-alower)}
.panel-multiselect-tag {
padding:4px 8px;border-radius:999px;border:1px solid var(--border-color);background:rgba(255,255,255,.06);font-size:11px;letter-spacing:.02em;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.panel-multiselect-chevron {
font-size:11px;color:var(--text-color-alower);transition:var(--transition)}
.panel-multiselect-chevron.rotated {
transform:rotate(180deg)}
.panel-multiselect-list {
position:absolute;top:calc(100% + 8px);left:0;right:0;padding:10px;border-radius:16px;border:1px solid var(--border-color);background:rgba(10,10,12,.96);box-shadow:0 18px 32px rgba(0,0,0,.4);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:flex;flex-direction:column;gap:8px;max-height:240px;overflow-y:auto;z-index:20}
.panel-multiselect-option {
display:flex;align-items:center;padding:9px 12px;border-radius:12px;border:1px solid var(--border-color);background:var(--button-bg);color:var(--text-color);font-size:12px;transition:var(--transition);text-align:left}
.panel-multiselect-option:hover {
border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.05)}
.panel-multiselect-option.active {
border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.1);box-shadow:inset 0 1px 1px rgba(255,255,255,.08)}
.panel-role-grid {
display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.panel-field-stack {
display:flex;flex-direction:column;gap:10px}
.panel-field-compact {
max-width:300px;width:100%;align-self:flex-start}
.panel-field-compact-grid {
justify-self:start}
.panel-key-fields {
align-items:end}
.panel-field-right {
align-self:flex-end;justify-self:end}
.panel-key-item {
margin-top:6px}
.panel-field-spacer {
min-height:1px}
.panel-user-lock {
display:flex;flex-direction:column;gap:6px}
.panel-user-lock-field {
position:relative}
.panel-user-list {
position:absolute;top:calc(100% + 6px);left:0;right:0;padding:6px 4px 6px 0;border-radius:12px;border:1px solid var(--border-color);background:rgba(10,10,12,.9);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);display:flex;flex-direction:column;align-items:flex-start;gap:6px;max-height:210px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) transparent;z-index:20}
.panel-user-option {
width:100%;border-radius:10px;border:1px solid transparent;background:transparent;display:flex;justify-content:flex-start;align-items:center;gap:10px;text-align:left;color:var(--text-color);min-height:40px;padding:6px 8px 6px 6px}
.panel-user-option:hover {
border-color:var(--accent-color);background:rgba(255,255,255,.04)}
.panel-user-empty {
padding:8px 10px;border-radius:10px;border:1px dashed var(--border-color);color:var(--text-color-alower);font-size:12px}
.panel-user-preview {
display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;border:1px solid var(--border-color);background:rgba(0,0,0,.2)}
.panel-user-avatar {
width:30px;height:30px;border-radius:50%;background:var(--accent-color);color:#000;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.panel-user-details {
display:flex;flex-direction:column;gap:1px}
.panel-user-name {
font-size:13px;color:var(--text-color);font-weight:600;line-height:1.2}
.panel-user-uid {
font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--text-color-alower);line-height:1.1}
.panel-field-row {
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.panel-input,.panel-select,.panel-textarea {
width:100%;padding:8px 10px;border-radius:var(--sm-radius);border:1px solid var(--border-color);background:rgba(0,0,0,.2);color:var(--text-color);font-size:13px;font-family:var(--family-regular)}
.panel-select-wrap {
position:relative;width:100%}
.panel-select-wrap .panel-select {
appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:none;padding-right:34px}
.panel-select-wrap:after {
content:"";position:absolute;top:50%;right:14px;width:6px;height:6px;border-right:2px solid var(--text-color-alower);border-bottom:2px solid var(--text-color-alower);transform:translateY(-50%) rotate(45deg);pointer-events:none}
.panel-textarea {
resize:vertical;min-height:84px}
.panel-textarea-lg {
min-height:160px}
.panel-choice {
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.panel-choice-btn {
padding:8px 10px;border-radius:var(--sm-radius);border:1px solid var(--border-color);background:rgba(0,0,0,.2);color:var(--text-color-alower);font-size:12px;transition:var(--transition)}
.panel-choice-btn.active {
background:var(--accent-color);color:black;border-color:var(--accent-color);box-shadow:inset 0 1px 1px #fff}
.panel-user-modal-categories {
max-width:360px;margin-bottom:14px}
.panel-user-purchases-wrap {
display:flex;flex-direction:column;gap:12px}
.panel-user-purchases-subtitle {
margin:0;font-size:12px;color:var(--text-color-alower)}
.panel-user-purchases-metrics {
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.panel-user-purchase-metric {
display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-radius:12px;border:1px solid var(--border-color);background:rgba(0,0,0,.18)}
.panel-user-purchase-metric-value {
font-size:16px;font-weight:600;color:var(--text-color)}
.panel-user-purchases-table .panel-row {
grid-template-columns:1.35fr .65fr .9fr}
.panel-user-purchases-table .panel-row span:first-child {
word-break:break-all}
.panel-promo-activation-metrics {
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.panel-promo-activation-metric {
display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:12px;border:1px solid var(--border-color);background:rgba(0,0,0,.18)}
.panel-promo-activation-metric strong {
font-size:17px;color:var(--text-color)}
.panel-promo-activations-table .panel-row {
grid-template-columns:.85fr 1.35fr .7fr 1fr}
.panel-promo-activations-table .panel-row span:nth-child(2) {
word-break:break-all}
.panel-modal-actions {
display:flex;flex-wrap:wrap;gap:8px}
.panel-modal-actions-center {
justify-content:center;width:fit-content;align-self:center;margin-left:auto;margin-right:auto}
.panel-modal-actions-offset {
margin-top:3px}
.panel-modal-actions-offset .panel-modal-btn {
transform:translateY(10px)}
.panel-products-tabs {
margin:0 auto;padding:4px 6px;border-radius:14px;gap:6px;justify-content:flex-start}
.panel-products-tab {
padding:6px 10px;border-radius:10px;font-size:12px;gap:6px}
.panel-products-tab i {
font-size:11px}
.panel-modal-btn i {
transform:translateX(-4px)}
.panel-modal-btn-shift-lg i {
transform:translateX(-6px)}
.panel-modal-save {
width:100%;justify-content:center;gap:8px}
[data-theme=light] .panel-card {
background:linear-gradient(165deg,rgba(255,255,255,.96),rgba(248,247,244,.95));border-color:rgba(0,0,0,.08);box-shadow:0 12px 30px rgba(0,0,0,.08)}
[data-theme=light] .panel-action-card,[data-theme=light] .panel-row,[data-theme=light] .panel-toggle {
background:#ffffff;border-color:rgba(0,0,0,.08)}
[data-theme=light] .panel-row-header {
color:rgba(0,0,0,.5)}
[data-theme=light] .panel-status-expired {
color:rgba(0,0,0,.5);background:rgba(0,0,0,.04)}
[data-theme=light] .panel-status-log-type-log {
border-color:rgba(0,0,0,.16);color:rgba(0,0,0,.6);background:rgba(0,0,0,.04)}
[data-theme=light] .panel-status-log-type-debugger {
border-color:rgba(229,97,97,.32);color:#c14646;background:rgba(229,97,97,.11)}
[data-theme=light] .panel-status-text {
background:transparent;border:0}
[data-theme=light] .panel-tab.active {
color:black}
[data-theme=light] .panel-filter,[data-theme=light] .panel-modal-section,[data-theme=light] .panel-search,[data-theme=light] .panel-security-item {
background:#ffffff;border-color:rgba(0,0,0,.08)}
[data-theme=light] .panel-search input::placeholder {
color:rgba(0,0,0,.4)}
[data-theme=light] .panel-modal {
background:rgba(248,247,244,.85);border-color:rgba(0,0,0,.08)}
[data-theme=light] .panel-modal,[data-theme=light] .panel-user-list {
scrollbar-color:var(--scrollbar-thumb) transparent}
[data-theme=light] .panel-choice-btn,[data-theme=light] .panel-input,[data-theme=light] .panel-multiselect-option,[data-theme=light] .panel-multiselect-trigger,[data-theme=light] .panel-select,[data-theme=light] .panel-textarea {
background:#ffffff;border-color:rgba(0,0,0,.08);color:#1f1f1f}
[data-theme=light] .panel-multiselect-list {
background:rgba(255,255,255,.98);border-color:rgba(0,0,0,.08);box-shadow:0 18px 30px rgba(0,0,0,.12)}
[data-theme=light] .panel-multiselect-placeholder {
color:rgba(0,0,0,.45)}
[data-theme=light] .panel-multiselect-tag {
background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.08)}
[data-theme=light] .panel-choice-btn.active {
color:black}
[data-theme=light] .panel-promo-activation-metric,[data-theme=light] .panel-user-purchase-metric {
background:rgba(0,0,0,.03)}
@media (max-width:1100px) {
.panel-actions,.panel-stats {
grid-template-columns:repeat(2,minmax(0,1fr))}
.panel-tabs {
grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:960px) {
.panel-grid {
grid-template-columns:1fr}
.panel-card-wide {
grid-column:span 1}
.panel-site-grid {
grid-template-columns:1fr}
.panel-changelog-table .panel-row,.panel-content-table .panel-row,.panel-keys-table .panel-row,.panel-launcher-versions-table .panel-row,.panel-products-table .panel-row,.panel-promo-activations-table .panel-row,.panel-promos-table .panel-row,.panel-security-table .panel-row,.panel-user-purchases-table .panel-row,.panel-users-table .panel-row {
grid-template-columns:1fr;gap:6px}
.panel-row-header {
display:none}
.panel-row-actions {
justify-content:flex-start}
.panel-field-row,.panel-info-list,.panel-modal-grid,.panel-promo-activation-metrics,.panel-user-purchases-metrics {
grid-template-columns:1fr}
}
@media (max-width:640px) {
.panel-page {
padding:120px 16px 100px}
.panel-title {
font-size:36px}
.panel-tabs {
grid-template-columns:repeat(2,minmax(0,1fr))}
.panel-filter,.panel-search {
min-width:0;width:100%}
}
.panel-2fa-backdrop {
z-index:260}
.panel-2fa-modal {
width:min(460px,100%);display:flex;flex-direction:column;gap:14px;padding:22px}
.panel-2fa-head {
display:flex;align-items:center;gap:12px}
.panel-2fa-head h3 {
font-size:17px;color:var(--text-color)}
.panel-2fa-head p {
margin-top:4px;font-size:12px;color:var(--text-color-alower)}
.panel-2fa-icon {
width:42px;height:42px;border-radius:13px;background:rgba(255,203,164,.16);color:var(--accent-color);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.panel-2fa-actions {
width:100%;gap:10px}
@media (min-width:1025px) {
.panel-cta {
padding:14px;gap:12px}
.panel-cta-top {
gap:10px}
.panel-cta-icon {
width:34px;height:34px;border-radius:10px}
.panel-cta-title {
font-size:13px}
.panel-cta-subtitle {
font-size:11px}
.panel-cta-btn {
padding:8px 12px;font-size:13px}
}
.dashboard-page {
min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg-color);position:relative;overflow:hidden;padding:120px 24px 80px}
.dashboard-page .hero-glow {
position:absolute;inset:0;background:linear-gradient(to bottom right,rgba(255,203,164,.05),transparent,rgba(244,63,94,.05));filter:blur(48px);pointer-events:none}
.dashboard-page .hero-overlay {
position:absolute;inset:0;background:linear-gradient(to top,var(--bg-color) 0,transparent 50%,rgba(3,3,3,.8) 100%);pointer-events:none}
.dashboard-shell {
width:100%;max-width:1100px;margin:0 auto;position:relative;z-index:1}
.dashboard-layout {
display:flex;gap:20px;align-items:flex-start}
.dashboard-sidebar {
width:500px;min-width:500px;display:flex;flex-direction:column;gap:16px}
.dashboard-main {
flex:1;display:flex;flex-direction:column;gap:10px}
.dashboard-main.is-blocked {
margin-top:-24px}
.profile-card {
display:flex;align-items:center;gap:16px;padding:16px 20px}
.profile-avatar {
position:relative;width:46px;height:46px;border-radius:50%;padding:0;background:transparent}
.profile-avatar img {
width:100%;height:100%;border-radius:50%;object-fit:cover;background:#121218;image-rendering:auto}
.profile-avatar-button.is-disabled {
cursor:not-allowed;opacity:.7}
.profile-info {
display:flex;flex-direction:column;gap:4px}
.profile-name-row {
display:flex;align-items:center;gap:8px}
.profile-name-row h2 {
font-size:16px;font-weight:600;color:var(--text-color);font-family:var(--family-regular)}
.profile-id,.profile-info p {
font-size:12px;color:var(--text-color-alower)}
.profile-action {
margin-left:auto;width:36px;height:36px;padding:0;border-radius:var(--md-radius);border:1px solid var(--border-color);background:var(--button-bg);color:var(--text-color-alower);display:inline-flex;align-items:center;justify-content:center;transition:var(--transition)}
.profile-action:hover {
color:var(--text-color);border-color:var(--accent-color)}
.profile-logout:hover {
color:#e56161;border-color:#e56161}
.panel-cta {
gap:16px;margin-top:-4px}
.panel-cta-top {
gap:12px}
.panel-cta-icon,.panel-cta-top {
display:flex;align-items:center}
.panel-cta-icon {
width:38px;height:38px;border-radius:12px;background:rgba(255,203,164,.15);color:var(--accent-color);justify-content:center}
.panel-cta-title {
display:block;font-size:14px;font-weight:600;color:var(--text-color);margin-bottom:2px}
.panel-cta-subtitle {
display:block;font-size:12px;color:var(--text-color-alower)}
.panel-cta-btn {
width:100%;justify-content:center;gap:8px;margin-top:10px}
.dashboard-quick-links {
display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px;width:100%}
.dashboard-quick-links a {
width:100%}
.dashboard-quick-links .btn-fill,.dashboard-quick-links .btn-outline {
width:100%;justify-content:center;min-height:36px}
.dashboard-admin-icon {
margin-right:4px}
@media (min-width:1025px) {
.dashboard-shell {
zoom:1.1}
.panel-cta {
padding:14px;gap:12px}
.panel-cta-top {
gap:10px}
.panel-cta-icon {
width:34px;height:34px;border-radius:10px}
.panel-cta-title {
font-size:13px}
.panel-cta-subtitle {
font-size:11px}
.panel-cta-btn {
padding:8px 12px;font-size:13px}
.dashboard-tabs {
gap:12px;margin-bottom:15px}
.dashboard-tab {
padding:19px 25px;font-size:20px;gap:9px}
.dashboard-tab i {
font-size:19px}
}
.dashboard-tabs {
gap:8px;margin-bottom:10px}
.dashboard-tab,.dashboard-tabs {
display:flex;align-items:center}
.dashboard-tab {
padding:var(--sm-padding) var(--md-padding);border-radius:var(--md-radius);border:1px solid var(--border-color);background:var(--button-bg);color:var(--text-color-alower);font-size:13px;font-weight:400;font-family:var(--family-regular);transition:var(--transition);flex:1;justify-content:center;gap:6px}
.dashboard-tab i {
font-size:13px}
.dashboard-tab:hover {
border-color:var(--accent-color);color:var(--text-color)}
.dashboard-tab.active {
background:var(--accent-color);color:#000;border-color:var(--accent-color);box-shadow:inset 0 1px 1px #fff}
.dashboard-card {
border:1px solid var(--border-color);border-radius:var(--md-radius);background:rgba(10,10,12,.75);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);padding:18px}
.blocked-state-card {
display:flex;flex-direction:column;gap:12px;min-height:200px;justify-content:flex-start;padding:12px 14px 14px}
.blocked-state-head {
display:flex;align-items:flex-start;gap:10px}
.blocked-state-head-text {
transform:translateY(7px)}
.blocked-state-icon {
width:56px;height:56px;border-radius:14px;border:none;background:transparent;color:#e56161;display:inline-flex;align-items:center;justify-content:center;font-size:28px;margin-top:0;flex-shrink:0;filter:drop-shadow(0 0 10px rgba(229,97,97,.28))}
.blocked-state-head-text h3 {
margin:0;font-size:16px;font-weight:600;color:var(--text-color);line-height:1.15}
.blocked-state-head-text p {
margin:3px 0 0;font-size:12px;color:var(--text-color-alower);line-height:1.35}
.blocked-state-text {
margin-top:2px;font-size:13px;line-height:1.5;color:var(--text-color)}
.blocked-state-text p {
margin:0}
.blocked-state-text p+p {
margin-top:6px}
.blocked-state-text span {
color:var(--text-color-alower);font-weight:500}
.card-title {
font-size:14px;font-family:var(--family-regular);color:var(--text-color-alower);margin-bottom:12px;display:block}
.license-row {
display:flex;align-items:center;gap:12px}
.license-card-inline {
padding:12px}
.license-card-inline .license-row {
gap:10px}
.license-card-inline .license-input {
flex:1}
.license-card-inline .dashboard-btn {
white-space:nowrap}
.license-input {
padding:var(--sm-padding) var(--md-padding);border-radius:var(--md-radius);background:var(--button-bg);border:1px solid var(--border-color);transition:var(--transition);flex:1;display:flex;align-items:center;gap:8px}
.license-input:focus-within {
border-color:var(--accent-color)}
.license-input i {
color:var(--text-color-alower);font-size:13px}
.license-input input {
width:100%;color:var(--text-color);font-size:14px;font-family:var(--family-regular);background:none;border:none}
.license-input input::placeholder {
color:#ffffff4d}
.dashboard-btn {
padding:var(--sm-padding) var(--md-padding);border-radius:var(--md-radius);border:1px solid var(--accent-color);background:var(--accent-color);color:#000;font-size:14px;font-weight:400;font-family:var(--family-regular);transition:var(--transition);display:inline-flex;align-items:center;gap:8px;box-shadow:inset 0 1px 1px #fff}
.dashboard-btn:hover {
filter:brightness(.65)}
.dashboard-btn i {
font-size:14px}
.info-grid {
display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.account-wrapper {
display:flex;flex-direction:column;gap:12px;padding:12px}
.account-wrapper .info-grid {
gap:10px}
.info-card-inner {
background:var(--button-bg);border:1px solid var(--border-color);border-radius:var(--md-radius);display:flex;flex-direction:column;gap:6px;padding:12px}
.account-wrapper .license-row {
gap:10px;margin-top:2px}
.account-wrapper .license-input {
flex:1}
.account-wrapper .info-card-inner {
align-items:center;text-align:center}
.account-wrapper .info-label {
justify-content:center}
.account-wrapper .info-value {
text-align:center}
.account-wrapper .info-card-left {
align-items:flex-start;text-align:left}
.account-wrapper .info-card-left .info-label {
justify-content:flex-start}
.account-wrapper .info-card-left .info-value {
text-align:left}
.info-grid.secondary {
grid-template-columns:repeat(2,1fr)}
.info-card {
display:flex;flex-direction:column;gap:6px;min-height:auto;padding:12px}
.info-label {
color:var(--text-color-alower);display:flex;align-items:center;gap:6px}
.info-label,.info-label i {
font-size:11px}
.info-value {
font-size:13px;font-weight:500;font-family:var(--family-regular);color:var(--text-color)}
.info-value.muted {
color:#ffffff80}
.friends-card {
display:flex;flex-direction:column;gap:12px}
.friends-row {
display:flex;align-items:center;justify-content:space-between}
.friends-count {
color:var(--text-color);font-size:26px;font-weight:600}
.friends-row i {
color:#ffffff80}
.soon-card {
display:flex;align-items:center;justify-content:center;min-height:120px;position:relative;overflow:hidden}
.soon-card:before {
content:"";background:#ffffff26;width:140%;height:1px;position:absolute;transform:rotate(-8deg)}
.soon-card span {
text-transform:uppercase;letter-spacing:.25em;color:#ffffff73;font-size:12px;transform:rotate(-8deg)}
.settings-wrapper {
display:flex;flex-direction:column;gap:16px;padding:16px}
.settings-section {
display:flex;flex-direction:column;gap:8px}
.settings-title {
color:var(--text-color);margin-bottom:2px;font-size:13px;font-weight:500}
.settings-divider {
background:var(--border-color);height:1px}
.settings-row {
display:flex;align-items:center;gap:10px}
.settings-input-wrapper {
background:var(--button-bg);border:1px solid var(--border-color);border-radius:var(--md-radius);transition:var(--transition);display:flex;align-items:center;gap:8px;width:210px;padding:10px 12px}
.settings-input-wrapper:focus-within {
border-color:var(--accent-color)}
.settings-input-wrapper i {
color:var(--text-color-alower);font-size:12px}
.settings-input-wrapper input {
color:var(--text-color);font-size:13px;font-family:var(--family-regular);background:none;border:none;flex:1}
.settings-input-wrapper input::placeholder {
color:#ffffff4d}
.settings-btn {
display:flex;align-items:center;gap:6px;white-space:nowrap}
.settings-btn i {
margin-right:0;line-height:1}
.settings-actions-center {
display:flex;justify-content:center}
.telegram-link-btn {
width:auto;max-width:100%;justify-content:flex-start;gap:6px;padding-left:14px;padding-right:16px;white-space:nowrap}
.telegram-link-btn span[translate=no] {
padding-right:4px}
.telegram-modal-backdrop {
position:fixed;inset:0;background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;padding:24px;z-index:220}
.telegram-modal {
width:100%;max-width:460px;border-radius:22px;border:1px solid var(--border-color);background:rgba(10,10,12,.8);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);padding:24px;position:relative;box-shadow:0 20px 50px rgba(0,0,0,.45)}
.telegram-modal,.telegram-modal * {
user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}
.telegram-modal-close {
position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:10px;border:1px solid var(--border-color);background:var(--button-bg);color:var(--text-color-alower);display:inline-flex;align-items:center;justify-content:center;transition:var(--transition)}
.telegram-modal-close:hover {
color:var(--text-color);border-color:var(--accent-color)}
.telegram-modal-header {
display:flex;align-items:center;gap:12px;margin-bottom:12px}
.telegram-modal-icon {
width:44px;height:44px;border-radius:14px;background:var(--accent-color);color:var(--btn-primary-text);display:inline-flex;align-items:center;justify-content:center;font-size:18px}
.telegram-modal-title {
font-size:16px;font-weight:600;color:var(--text-color)}
.telegram-modal-subtitle {
font-size:12px;color:var(--text-color-alower)}
.google-qr-wrap {
width:fit-content;margin:4px auto 14px;padding:10px;border-radius:14px;border:1px solid var(--border-color);background:rgba(255,255,255,.04)}
.google-qr-wrap svg {
display:block}
.telegram-modal-text {
font-size:13px;color:var(--text-color-alower);line-height:1.5;margin-bottom:16px}
.telegram-modal-highlight {
color:var(--accent-color);font-weight:600;margin:0 4px}
.telegram-modal-command {
color:var(--text-color);background:rgba(255,255,255,.08);border:1px solid var(--border-color);border-radius:8px;padding:2px 6px;margin:0 4px;font-family:var(--family-regular);font-size:12px}
.telegram-modal-field {
display:flex;flex-direction:column;gap:6px}
.telegram-modal-label {
font-size:12px;color:var(--text-color-alower)}
.telegram-code-pill {
width:100%;display:flex;gap:8px;padding:var(--sm-padding) var(--md-padding);border-radius:var(--md-radius);background:var(--btn-primary-bg);border:1px solid var(--btn-primary-border);box-shadow:inset 0 1px 1px #fff;color:var(--btn-primary-text);min-height:36px;cursor:pointer;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}
.telegram-code-icon,.telegram-code-pill {
align-items:center;justify-content:center}
.telegram-code-icon {
display:inline-flex;font-size:12px;pointer-events:none}
.telegram-code-value {
flex:1;text-align:center;letter-spacing:.08em;font-size:13px;font-family:var(--family-regular);color:var(--btn-primary-text);background:transparent;border:none;padding:0;cursor:inherit;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;pointer-events:none}
.telegram-code-pill.is-loading {
opacity:.75}
.telegram-modal-actions {
display:flex;justify-content:center;margin-top:12px}
.telegram-confirm-btn,.telegram-verify-btn {
width:190px;justify-content:center}
.telegram-verify-input {
width:100%}
.telegram-verify-input input {
text-align:center;letter-spacing:.08em}
.telegram-modal-primary {
width:210px;justify-content:center}
.telegram-session-actions {
gap:10px}
.telegram-success {
display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:4px 8px 2px}
.telegram-success-title {
font-size:15px;font-weight:600;color:var(--text-color)}
.launcher-wrapper {
display:flex;flex-direction:column;gap:12px;padding:12px}
.launcher-wrapper .info-card-inner {
text-align:center;justify-content:center;align-items:center;min-height:70px;padding:12px}
.launcher-wrapper .info-value {
font-size:14px}
.launcher-row {
display:flex;align-items:center;justify-content:space-between;margin-top:2px;padding-left:12px}
.launcher-info {
display:flex;flex-direction:column;gap:6px}
.launcher-btn {
display:flex;align-items:center;gap:6px}
.tickets-wrapper {
display:flex;flex-direction:column;gap:16px;padding:16px}
.tickets-toolbar {
display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tickets-title-wrap {
display:flex;flex-direction:column;gap:4px}
.tickets-title {
font-size:16px;font-weight:600;color:var(--text-color)}
.tickets-subtitle {
font-size:12px;color:var(--text-color-alower)}
.tickets-actions {
display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tickets-new-btn {
gap:6px}
.tickets-tabs {
display:flex;background:rgba(255,255,255,.03);border:1px solid var(--border-color);padding:6px 10px;border-radius:18px;width:fit-content;margin:0 auto}
.tickets-tab,.tickets-tabs {
align-items:center;justify-content:center;gap:8px}
.tickets-tab {
border:none;background:transparent;color:var(--text-color-alower);padding:8px 14px;border-radius:12px;font-size:13px;display:inline-flex;min-width:140px;cursor:pointer;transition:var(--transition)}
.tickets-tab i {
font-size:12px}
.tickets-tab:hover {
color:var(--text-color)}
.tickets-tab.active {
background:var(--accent-color);color:#000;box-shadow:inset 0 1px 1px #fff}
.tickets-grid {
display:grid;grid-template-columns:minmax(260px,320px) 1fr;gap:12px;min-height:360px}
.ticket-list {
gap:8px;min-height:360px;max-height:520px;overflow:auto;padding-right:4px}
.ticket-item,.ticket-list {
display:flex;flex-direction:column}
.ticket-item {
text-align:left;border:1px solid var(--border-color);border-radius:var(--md-radius);background:var(--button-bg);padding:10px;gap:6px;transition:var(--transition);color:var(--text-color)}
.ticket-item.active,.ticket-item:hover {
border-color:var(--accent-color)}
.ticket-item.active {
box-shadow:0 0 0 1px rgba(255,203,164,.2)}
.ticket-item-top {
display:flex;align-items:center;justify-content:space-between;gap:6px}
.ticket-subject {
font-size:13px;font-weight:600}
.ticket-status {
font-size:10px;text-transform:uppercase;letter-spacing:.08em;padding:2px 6px;border-radius:999px;border:1px solid var(--border-color);color:var(--text-color-alower)}
.ticket-status.open {
border-color:rgba(124,255,164,.5);color:#7cffa4}
.ticket-status.closed {
border-color:rgba(229,97,97,.5);color:#e56161}
.ticket-meta {
display:flex;flex-wrap:wrap;gap:6px 12px;font-size:11px;color:var(--text-color-alower)}
.ticket-preview {
font-size:12px;color:#ffffffb3;line-height:1.4}
.ticket-thread {
display:flex;flex-direction:column;gap:12px;border:1px solid var(--border-color);border-radius:var(--md-radius);background:rgba(255,255,255,.02);padding:12px;min-height:360px}
.ticket-thread-header {
display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.ticket-thread-title {
font-size:15px;font-weight:600;color:var(--text-color)}
.ticket-thread-meta {
display:flex;flex-wrap:wrap;gap:6px 10px;font-size:11px;color:var(--text-color-alower);margin-top:4px}
.ticket-thread-actions {
display:flex;align-items:center;gap:8px}
.ticket-messages {
gap:10px;border:1px solid var(--border-color);border-radius:var(--md-radius);background:rgba(0,0,0,.2);max-height:320px;overflow:auto}
.ticket-bubble,.ticket-messages {
display:flex;flex-direction:column;padding:10px}
.ticket-bubble {
gap:6px;border-radius:12px;border:1px solid var(--border-color);background:rgba(255,255,255,.05);max-width:85%}
.ticket-bubble.user {
align-self:flex-end;border-color:rgba(255,203,164,.45);background:rgba(255,203,164,.12)}
.ticket-bubble.staff {
align-self:flex-start;border-color:rgba(99,179,237,.45);background:rgba(99,179,237,.12)}
.ticket-bubble-meta {
display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;color:var(--text-color-alower)}
.ticket-bubble-author {
text-transform:uppercase;letter-spacing:.08em;font-weight:600;color:var(--text-color);font-size:10px}
.ticket-bubble-text {
font-size:12px;color:var(--text-color);line-height:1.4;white-space:pre-wrap}
.ticket-composer {
display:flex;flex-direction:column;gap:8px}
.ticket-field input,.ticket-field textarea {
background:var(--button-bg);border-radius:var(--md-radius)}
.ticket-composer textarea,.ticket-new-fields textarea {
min-height:90px;resize:vertical}
.ticket-new {
gap:12px}
.ticket-new,.ticket-new-header {
display:flex;flex-direction:column}
.ticket-new-header {
gap:4px}
.tickets-empty {
display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center}
.ticket-thread-loading,.tickets-empty {
text-align:center;padding:20px;color:var(--text-color-alower)}
[data-theme=light] .dashboard-card,[data-theme=light] .profile-card {
background:rgba(255,255,255,.85);border-color:rgba(0,0,0,.08)}
[data-theme=light] .dashboard-tab.active {
color:#000}
[data-theme=light] .profile-action {
color:#5a5a5a;background:rgba(0,0,0,.08);border-color:rgba(0,0,0,.08)}
[data-theme=light] .license-input {
background:#fff;border-color:rgba(0,0,0,.08)}
[data-theme=light] .license-input input::placeholder {
color:#0006}
[data-theme=light] .info-value.muted {
color:#6b6b6b}
[data-theme=light] .soon-card:before {
background:rgba(0,0,0,.12)}
[data-theme=light] .soon-card span {
color:rgba(0,0,0,.45)}
[data-theme=light] .settings-input-wrapper {
background:#fff}
[data-theme=light] .settings-input-wrapper input::placeholder {
color:#0006}
[data-theme=light] .blocked-state-icon {
border:none;background:transparent;color:#e56161}
[data-theme=light] .blocked-state-text span {
color:#6b6b6b}
[data-theme=light] .tickets-tabs {
background:#fff;border-color:rgba(0,0,0,.08)}
[data-theme=light] .tickets-tab {
color:#5a5a5a}
[data-theme=light] .tickets-tab.active {
color:#000}
[data-theme=light] .ticket-item,[data-theme=light] .ticket-thread {
background:#fff}
[data-theme=light] .ticket-messages {
background:rgba(0,0,0,.04)}
@media (max-width:1100px) {
.dashboard-tab {
min-width:130px}
}
@media (max-width:1024px) {
.dashboard-layout {
flex-direction:column}
.dashboard-sidebar {
width:100%;min-width:0}
.dashboard-main {
width:100%}
.dashboard-main.is-blocked {
margin-top:0}
}
@media (max-width:980px) {
.dashboard-tabs {
justify-content:flex-start}
.tickets-grid {
grid-template-columns:1fr}
.ticket-list {
max-height:260px}
.tickets-toolbar {
flex-direction:column;align-items:flex-start}
.tickets-actions {
width:100%;justify-content:flex-start}
.tickets-tabs {
width:100%;justify-content:space-between}
}
@media (max-width:720px) {
.dashboard-page {
padding:110px 16px 60px}
.dashboard-tabs {
flex-wrap:wrap}
.dashboard-tab {
flex:1;min-width:0}
.info-grid,.info-grid.secondary {
grid-template-columns:1fr}
.license-row {
flex-direction:column;align-items:stretch}
.blocked-state-card {
min-height:auto}
.blocked-state-icon {
width:52px;height:52px;font-size:26px}
.blocked-state-text {
font-size:12.5px}
.profile-card {
flex-wrap:wrap}
.profile-action {
margin-left:0}
.settings-row {
flex-direction:column;align-items:stretch}
.settings-input-wrapper {
width:100%}
.settings-btn {
width:100%;justify-content:center}
.dashboard-quick-links {
grid-template-columns:1fr}
.tickets-wrapper {
padding:14px}
.ticket-thread-header {
flex-direction:column;align-items:flex-start}
.ticket-thread-actions {
width:100%}
.ticket-thread-actions .btn-fill,.ticket-thread-actions .btn-outline {
width:100%;justify-content:center}
.ticket-messages {
max-height:240px;padding:8px}
.ticket-bubble {
max-width:100%}
.ticket-composer textarea,.ticket-new-fields textarea {
min-height:110px}
.ticket-list {
max-height:220px;min-height:0}
.tickets-tabs {
width:100%}
.tickets-tab {
flex:1;min-width:0;justify-content:center}
}
@media (max-width:520px) {
.tickets-tab {
min-width:0;flex:1}
.tickets-tabs {
width:100%}
.ticket-field input,.ticket-field textarea {
font-size:12px}
}
.tickets-panel-page .panel-hero {
display:flex;flex-direction:column;align-items:center;gap:10px}
.tickets-panel-page .hero-glow {
background:radial-gradient(circle at top,color-mix(in srgb,var(--accent-color) 28%,transparent) 0,transparent 60%),radial-gradient(circle at bottom,color-mix(in srgb,var(--accent-color) 16%,transparent) 0,transparent 55%)}
.tickets-panel-page .panel-card {
background:linear-gradient(165deg,rgba(12,12,14,.92),rgba(6,6,8,.98));box-shadow:0 16px 36px rgba(0,0,0,.35)}
.tickets-hero-actions {
display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.tickets-tabs.panel-tabs {
grid-template-columns:repeat(2,minmax(0,1fr));max-width:360px;margin:18px auto 24px}
.tickets-tabs-hero.panel-tabs {
margin:0}
.tickets-tabs .panel-tab {
background:rgba(255,255,255,.05);color:rgba(255,255,255,.7);border-color:rgba(255,255,255,.08)}
.tickets-tabs .panel-tab:hover {
color:var(--text-color);border-color:var(--btn-primary-border)}
.tickets-tabs .panel-tab.active {
background:var(--btn-primary-bg);color:var(--btn-primary-text);border-color:var(--btn-primary-border);box-shadow:inset 0 1px 1px #fff}
.tickets-grid {
grid-template-columns:minmax(360px,460px) 1fr;gap:22px;align-items:stretch}
.tickets-list-card {
padding:18px;height:620px}
.tickets-tools {
margin:6px 0 10px}
.tickets-create-btn {
padding:var(--sm-padding) var(--md-padding);font-size:13px;gap:8px;margin-left:0;justify-content:center;align-items:center;white-space:nowrap;transform:translateX(-12px)}
.tickets-tools .panel-filter,.tickets-tools .panel-search {
flex:1;min-width:0}
.tickets-table {
display:flex;flex-direction:column;gap:10px;max-height:640px;overflow:auto;padding-right:3px}
.ticket-row {
grid-template-columns:1fr;text-align:left;cursor:pointer;gap:8px;transition:var(--transition)}
.ticket-row.active {
box-shadow:0 0 0 1px color-mix(in srgb,var(--accent-color) 35%,transparent)}
.ticket-row.active,.ticket-row:hover {
border-color:var(--accent-color)}
.ticket-row-title {
display:flex;align-items:center;justify-content:space-between;gap:8px}
.ticket-row-subject {
font-weight:600;font-size:13px;color:var(--text-color)}
.ticket-badge {
font-size:10px;text-transform:uppercase;letter-spacing:.08em;padding:2px 8px;border-radius:999px;border:1px solid var(--border-color);color:var(--text-color-alower);background:rgba(255,255,255,.04)}
.ticket-badge.open {
border-color:color-mix(in srgb,var(--accent-color) 45%,transparent);color:color-mix(in srgb,var(--accent-color) 80%,#ffffff);background:color-mix(in srgb,var(--accent-color) 12%,transparent)}
.ticket-badge.closed {
border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.6);background:rgba(255,255,255,.04)}
.ticket-row-meta {
display:flex;flex-wrap:wrap;gap:6px 10px;font-size:11px;color:var(--text-color-alower)}
.ticket-row-preview {
font-size:12px;color:rgba(255,255,255,.7);line-height:1.4}
.tickets-board-card {
height:620px;display:flex;flex-direction:column}
.tickets-board-card .panel-card-header p {
display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.ticket-detail-title {
display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
.ticket-meta-inline {
font-size:12px;color:var(--text-color-alower)}
.ticket-code {
font-weight:600;color:color-mix(in srgb,var(--accent-color) 85%,#ffffff)}
.tickets-board-messages {
border:1px solid var(--border-color);border-radius:18px;padding:12px;background:rgba(10,10,12,.6);overflow:hidden;display:flex;flex-direction:column;flex:1;min-height:0}
.tickets-board-scroll {
overflow:auto;flex:1;min-height:0;width:calc(100% + 10px);margin-right:-10px;padding-right:10px;display:flex;flex-direction:column;gap:10px;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--accent-color) 35%,rgba(255,255,255,.2)) rgba(0,0,0,.35)}
.tickets-board-scroll::-webkit-scrollbar {
width:10px}
.tickets-board-scroll::-webkit-scrollbar-track {
background:rgba(0,0,0,.35);box-shadow:none;margin:12px 0}
.tickets-board-scroll::-webkit-scrollbar-thumb,.tickets-board-scroll::-webkit-scrollbar-track {
border-top-left-radius:6px;border-bottom-left-radius:6px;border-top-right-radius:23px;border-bottom-right-radius:23px}
.tickets-board-scroll::-webkit-scrollbar-thumb {
background:color-mix(in srgb,var(--accent-color) 35%,rgba(255,255,255,.2));border:2px solid rgba(0,0,0,0);background-clip:padding-box}
.ticket-message-row {
display:flex;align-items:center;gap:8px}
.ticket-message-row.own {
justify-content:flex-start}
.ticket-message-row.other {
justify-content:flex-end}
.ticket-message-row.own .ticket-message-avatar {
order:0}
.ticket-message-row.own .ticket-message {
order:1}
.ticket-message-row.other .ticket-message {
order:0}
.ticket-message-row.other .ticket-message-avatar {
order:1}
.ticket-message {
position:relative;max-width:75%;padding:6px 10px 6px 12px;border-radius:12px;display:flex;flex-direction:column;gap:3px;min-height:36px;border:1px solid var(--border-color);font-size:13px;line-height:1.4;word-wrap:break-word;box-shadow:none}
.ticket-message.short {
min-width:110px}
.ticket-message-row.own .ticket-message {
border-color:var(--border-color);background:rgba(14,14,18,.7);transform:translateY(5px)}
.ticket-message-row.other .ticket-message {
border-color:var(--border-color);background:rgba(8,8,12,.72)}
.ticket-message-avatar {
width:36px;height:36px;border-radius:50%;background:color-mix(in srgb,var(--accent-color) 65%,transparent);color:#fff;font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:default;overflow:hidden}
.ticket-message-avatar img {
width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.ticket-message-content {
display:flex;flex-direction:column;gap:4px}
.ticket-message-text {
font-size:11px;color:var(--text-color);line-height:1.4;white-space:pre-wrap;word-break:break-word}
.ticket-message-author {
display:block;font-size:11px;font-weight:600;margin-bottom:1px;line-height:1.2}
.ticket-message-date {
font-size:10px;color:rgba(255,255,255,.5);line-height:1;margin-top:2px;align-self:flex-end;pointer-events:none;user-select:none}
.ticket-message:hover .ticket-message-date {
opacity:.7}
.ticket-message-row.own .ticket-message-date {
text-align:right}
.tickets-board-compose {
display:flex;flex-direction:column;gap:10px;margin-top:auto}
.tickets-board-compose .ticket-field textarea {
min-height:120px}
.tickets-send-btn {
min-height:40px}
.ticket-field {
display:flex;flex-direction:column;gap:6px}
.ticket-field span {
font-size:11px;color:var(--text-color-alower)}
.ticket-field input,.ticket-field textarea {
background:rgba(8,8,10,.7);border:1px solid var(--border-color);border-radius:14px;padding:10px 12px;color:var(--text-color);font-size:13px;font-family:var(--family-regular);transition:var(--transition)}
.ticket-field input:focus,.ticket-field textarea:focus {
outline:none;border-color:var(--accent-color)}
.ticket-new-card {
display:flex;flex-direction:column;gap:14px}
.ticket-new-fields {
display:flex;flex-direction:column;gap:12px}
.tickets-empty,.tickets-loading {
text-align:center;color:var(--text-color-alower);padding:24px 12px;display:flex;flex-direction:column;align-items:center;gap:6px}
.tickets-empty-title {
font-size:13px;font-weight:600;color:var(--text-color)}
.tickets-empty-text {
font-size:12px}
.tickets-empty i {
font-size:20px;color:var(--accent-color)}
@media (max-width:1100px) {
.tickets-grid {
grid-template-columns:1fr}
.tickets-table {
max-height:320px}
}
@media (max-width:720px) {
.tickets-hero-actions {
width:100%;justify-content:center}
.tickets-tabs.panel-tabs {
max-width:100%}
.tickets-board-card .panel-row-actions {
width:100%;justify-content:flex-start}
.tickets-board-card .panel-row-actions .btn-fill,.tickets-board-card .panel-row-actions .btn-outline {
width:100%;justify-content:center}
}
@media (max-width:520px) {
.ticket-field input,.ticket-field textarea {
font-size:12px}
}