@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Rajdhani:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap');@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Rajdhani:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap');@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Rajdhani:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap');@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Rajdhani:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap');@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');/*
! tailwindcss v3.3.7 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
*/

html {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: Poppins, sans-serif; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden] {
  display: none;
}

:root,
[data-theme] {
  background-color: hsl(var(--b1) / var(--tw-bg-opacity, 1));
  color: hsl(var(--bc) / var(--tw-text-opacity, 1));
}

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

:root {
  color-scheme: light;
  --pf: 259 94% 44%;
  --sf: 314 100% 40%;
  --af: 174 75% 39%;
  --nf: 214 20% 14%;
  --in: 198 93% 60%;
  --su: 158 64% 52%;
  --wa: 43 96% 56%;
  --er: 0 91% 71%;
  --inc: 198 100% 12%;
  --suc: 158 100% 10%;
  --wac: 43 100% 11%;
  --erc: 0 100% 14%;
  --rounded-box: 1rem;
  --rounded-btn: 0.5rem;
  --rounded-badge: 1.9rem;
  --animation-btn: 0.25s;
  --animation-input: .2s;
  --btn-text-case: uppercase;
  --btn-focus-scale: 0.95;
  --border-btn: 1px;
  --tab-border: 1px;
  --tab-radius: 0.5rem;
  --p: 259 94% 51%;
  --pc: 259 96% 91%;
  --s: 314 100% 47%;
  --sc: 314 100% 91%;
  --a: 174 75% 46%;
  --ac: 174 75% 11%;
  --n: 214 20% 21%;
  --nc: 212 19% 87%;
  --b1: 0 0% 100%;
  --b2: 0 0% 95%;
  --b3: 180 2% 90%;
  --bc: 215 28% 17%;
}

@media (prefers-color-scheme: dark) {

  :root {
    color-scheme: dark;
    --pf: 262 80% 43%;
    --sf: 316 70% 43%;
    --af: 175 70% 34%;
    --in: 198 93% 60%;
    --su: 158 64% 52%;
    --wa: 43 96% 56%;
    --er: 0 91% 71%;
    --inc: 198 100% 12%;
    --suc: 158 100% 10%;
    --wac: 43 100% 11%;
    --erc: 0 100% 14%;
    --rounded-box: 1rem;
    --rounded-btn: 0.5rem;
    --rounded-badge: 1.9rem;
    --animation-btn: 0.25s;
    --animation-input: .2s;
    --btn-text-case: uppercase;
    --btn-focus-scale: 0.95;
    --border-btn: 1px;
    --tab-border: 1px;
    --tab-radius: 0.5rem;
    --p: 262 80% 50%;
    --pc: 0 0% 100%;
    --s: 316 70% 50%;
    --sc: 0 0% 100%;
    --a: 175 70% 41%;
    --ac: 0 0% 100%;
    --n: 213 18% 20%;
    --nf: 212 17% 17%;
    --nc: 220 13% 69%;
    --b1: 212 18% 14%;
    --b2: 213 18% 12%;
    --b3: 213 18% 10%;
    --bc: 220 13% 69%;
  }
}

[data-theme=light] {
  color-scheme: light;
  --pf: 259 94% 44%;
  --sf: 314 100% 40%;
  --af: 174 75% 39%;
  --nf: 214 20% 14%;
  --in: 198 93% 60%;
  --su: 158 64% 52%;
  --wa: 43 96% 56%;
  --er: 0 91% 71%;
  --inc: 198 100% 12%;
  --suc: 158 100% 10%;
  --wac: 43 100% 11%;
  --erc: 0 100% 14%;
  --rounded-box: 1rem;
  --rounded-btn: 0.5rem;
  --rounded-badge: 1.9rem;
  --animation-btn: 0.25s;
  --animation-input: .2s;
  --btn-text-case: uppercase;
  --btn-focus-scale: 0.95;
  --border-btn: 1px;
  --tab-border: 1px;
  --tab-radius: 0.5rem;
  --p: 259 94% 51%;
  --pc: 259 96% 91%;
  --s: 314 100% 47%;
  --sc: 314 100% 91%;
  --a: 174 75% 46%;
  --ac: 174 75% 11%;
  --n: 214 20% 21%;
  --nc: 212 19% 87%;
  --b1: 0 0% 100%;
  --b2: 0 0% 95%;
  --b3: 180 2% 90%;
  --bc: 215 28% 17%;
}

[data-theme=dark] {
  color-scheme: dark;
  --pf: 262 80% 43%;
  --sf: 316 70% 43%;
  --af: 175 70% 34%;
  --in: 198 93% 60%;
  --su: 158 64% 52%;
  --wa: 43 96% 56%;
  --er: 0 91% 71%;
  --inc: 198 100% 12%;
  --suc: 158 100% 10%;
  --wac: 43 100% 11%;
  --erc: 0 100% 14%;
  --rounded-box: 1rem;
  --rounded-btn: 0.5rem;
  --rounded-badge: 1.9rem;
  --animation-btn: 0.25s;
  --animation-input: .2s;
  --btn-text-case: uppercase;
  --btn-focus-scale: 0.95;
  --border-btn: 1px;
  --tab-border: 1px;
  --tab-radius: 0.5rem;
  --p: 262 80% 50%;
  --pc: 0 0% 100%;
  --s: 316 70% 50%;
  --sc: 0 0% 100%;
  --a: 175 70% 41%;
  --ac: 0 0% 100%;
  --n: 213 18% 20%;
  --nf: 212 17% 17%;
  --nc: 220 13% 69%;
  --b1: 212 18% 14%;
  --b2: 213 18% 12%;
  --b3: 213 18% 10%;
  --bc: 220 13% 69%;
}

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
}
.\!container {
  width: 100% !important;
}
.container {
  width: 100%;
}
@media (min-width: 640px) {

  .\!container {
    max-width: 640px !important;
  }

  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {

  .\!container {
    max-width: 768px !important;
  }

  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {

  .\!container {
    max-width: 1024px !important;
  }

  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {

  .\!container {
    max-width: 1280px !important;
  }

  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {

  .\!container {
    max-width: 1536px !important;
  }

  .container {
    max-width: 1536px;
  }
}
.alert {
  display: grid;
  width: 100%;
  grid-auto-flow: row;
  align-content: flex-start;
  align-items: center;
  justify-items: center;
  gap: 1rem;
  text-align: center;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: hsl(var(--b2) / var(--tw-border-opacity));
  padding: 1rem;
  --tw-text-opacity: 1;
  color: hsl(var(--bc) / var(--tw-text-opacity));
  border-radius: var(--rounded-box, 1rem);
  --alert-bg: hsl(var(--b2));
  --alert-bg-mix: hsl(var(--b1));
  background-color: var(--alert-bg);
}
@media (min-width: 640px) {

  .alert {
    grid-auto-flow: column;
    grid-template-columns: auto minmax(auto,1fr);
    justify-items: start;
    text-align: left;
  }
}
.avatar.placeholder > div {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (hover:hover) {

  .label a:hover {
    --tw-text-opacity: 1;
    color: hsl(var(--bc) / var(--tw-text-opacity));
  }

  .menu :where(li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):where(.active), .menu :where(li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):where(.active) {
    --tw-bg-opacity: 1;
    background-color: hsl(var(--n) / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: hsl(var(--nc) / var(--tw-text-opacity));
  }

  .tab:hover {
    --tw-text-opacity: 1;
  }

  .table tr.hover:hover,
  .table tr.hover:nth-child(even):hover {
    --tw-bg-opacity: 1;
    background-color: hsl(var(--b2) / var(--tw-bg-opacity));
  }

  .table-zebra tr.hover:hover,
  .table-zebra tr.hover:nth-child(even):hover {
    --tw-bg-opacity: 1;
    background-color: hsl(var(--b3) / var(--tw-bg-opacity));
  }
}
.btn {
  display: inline-flex;
  flex-shrink: 0;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  border-color: transparent;
  border-color: hsl(var(--b2) / var(--tw-border-opacity));
  text-align: center;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: var(--rounded-btn, 0.5rem);
  height: 3rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  line-height: 1em;
  min-height: 3rem;
  gap: 0.5rem;
  font-weight: 600;
  text-decoration-line: none;
  border-width: var(--border-btn, 1px);
  animation: button-pop var(--animation-btn, 0.25s) ease-out;
  text-transform: var(--btn-text-case, uppercase);
  --tw-border-opacity: 1;
  --tw-bg-opacity: 1;
  background-color: hsl(var(--b2) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: hsl(var(--bc) / var(--tw-text-opacity));
  outline-color: hsl(var(--bc) / 1);
}
.btn-disabled,
  .btn[disabled],
  .btn:disabled {
  pointer-events: none;
  --tw-border-opacity: 0;
  background-color: hsl(var(--n) / var(--tw-bg-opacity));
  --tw-bg-opacity: 0.2;
  color: hsl(var(--bc) / var(--tw-text-opacity));
  --tw-text-opacity: 0.2;
}
.btn-group > input[type="radio"].btn {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.btn-group > input[type="radio"].btn:before {
  content: attr(data-title);
}
.btn:is(input[type="checkbox"]),
.btn:is(input[type="radio"]) {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.btn:is(input[type="checkbox"]):after,
.btn:is(input[type="radio"]):after {
  --tw-content: attr(aria-label);
  content: var(--tw-content);
}
.\!card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: var(--rounded-box, 1rem) !important;
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--rounded-box, 1rem);
}
.\!card:focus {
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
}
.card:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.\!card figure {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.card figure {
  display: flex;
  align-items: center;
  justify-content: center;
}
.\!card.image-full {
  display: grid !important;
}
.card.image-full {
  display: grid;
}
.\!card.image-full:before {
  position: relative !important;
  content: "" !important;
  z-index: 10 !important;
  --tw-bg-opacity: 1 !important;
  background-color: hsl(var(--n) / var(--tw-bg-opacity)) !important;
  opacity: 0.75 !important;
  border-radius: var(--rounded-box, 1rem) !important;
}
.card.image-full:before {
  position: relative;
  content: "";
  z-index: 10;
  --tw-bg-opacity: 1;
  background-color: hsl(var(--n) / var(--tw-bg-opacity));
  opacity: 0.75;
  border-radius: var(--rounded-box, 1rem);
}
.\!card.image-full:before,
    .\!card.image-full > * {
  grid-column-start: 1 !important;
  grid-row-start: 1 !important;
}
.card.image-full:before,
    .card.image-full > * {
  grid-column-start: 1;
  grid-row-start: 1;
}
.\!card.image-full:before,
    .\!card.image-full > * {
  grid-column-start: 1 !important;
  grid-row-start: 1 !important;
}
.\!card.image-full > figure img {
  height: 100% !important;
  -o-object-fit: cover !important;
     object-fit: cover !important;
}
.card.image-full > figure img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.\!card.image-full > .card-body {
  position: relative !important;
  z-index: 20 !important;
  --tw-text-opacity: 1 !important;
  color: hsl(var(--nc) / var(--tw-text-opacity)) !important;
}
.card.image-full > .card-body {
  position: relative;
  z-index: 20;
  --tw-text-opacity: 1;
  color: hsl(var(--nc) / var(--tw-text-opacity));
}
.chat {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.checkbox {
  flex-shrink: 0;
  --chkbg: var(--bc);
  --chkfg: var(--b1);
  height: 1.5rem;
  width: 1.5rem;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-width: 1px;
  border-color: hsl(var(--bc) / var(--tw-border-opacity));
  --tw-border-opacity: 0.2;
  border-radius: var(--rounded-btn, 0.5rem);
}
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown > *:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.dropdown .dropdown-content {
  position: absolute;
}
.dropdown:is(:not(details)) .dropdown-content {
  visibility: hidden;
  opacity: 0;
  transform-origin: top;
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.dropdown-end .dropdown-content {
  right: 0px;
}
.dropdown-left .dropdown-content {
  top: 0px;
  right: 100%;
  bottom: auto;
  transform-origin: right;
}
.dropdown-right .dropdown-content {
  left: 100%;
  top: 0px;
  bottom: auto;
  transform-origin: left;
}
.dropdown-bottom .dropdown-content {
  bottom: auto;
  top: 100%;
  transform-origin: top;
}
.dropdown-top .dropdown-content {
  bottom: 100%;
  top: auto;
  transform-origin: bottom;
}
.dropdown-end.dropdown-right .dropdown-content {
  bottom: 0px;
  top: auto;
}
.dropdown-end.dropdown-left .dropdown-content {
  bottom: 0px;
  top: auto;
}
.dropdown.dropdown-open .dropdown-content,
.dropdown:not(.dropdown-hover):focus .dropdown-content,
.dropdown:focus-within .dropdown-content {
  visibility: visible;
  opacity: 1;
}
@media (hover: hover) {

  .dropdown.dropdown-hover:hover .dropdown-content {
    visibility: visible;
    opacity: 1;
  }

  .btm-nav > *.disabled:hover,
      .btm-nav > *[disabled]:hover {
    pointer-events: none;
    --tw-border-opacity: 0;
    background-color: hsl(var(--n) / var(--tw-bg-opacity));
    --tw-bg-opacity: 0.1;
    color: hsl(var(--bc) / var(--tw-text-opacity));
    --tw-text-opacity: 0.2;
  }

  .btn:hover {
    --tw-border-opacity: 1;
    border-color: hsl(var(--b3) / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: hsl(var(--b3) / var(--tw-bg-opacity));
  }

  .btn-primary:hover {
    --tw-border-opacity: 1;
    border-color: hsl(var(--pf) / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: hsl(var(--pf) / var(--tw-bg-opacity));
  }

  .btn-secondary:hover {
    --tw-border-opacity: 1;
    border-color: hsl(var(--sf) / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: hsl(var(--sf) / var(--tw-bg-opacity));
  }

  .btn.glass:hover {
    --glass-opacity: 25%;
    --glass-border-opacity: 15%;
  }

  .btn-ghost:hover {
    --tw-border-opacity: 0;
    background-color: hsl(var(--bc) / var(--tw-bg-opacity));
    --tw-bg-opacity: 0.2;
  }

  .btn-outline:hover {
    --tw-border-opacity: 1;
    border-color: hsl(var(--bc) / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: hsl(var(--bc) / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: hsl(var(--b1) / var(--tw-text-opacity));
  }

  .btn-outline.btn-primary:hover {
    --tw-border-opacity: 1;
    border-color: hsl(var(--pf) / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: hsl(var(--pf) / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: hsl(var(--pc) / var(--tw-text-opacity));
  }

  .btn-outline.btn-secondary:hover {
    --tw-border-opacity: 1;
    border-color: hsl(var(--sf) / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: hsl(var(--sf) / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: hsl(var(--sc) / var(--tw-text-opacity));
  }

  .btn-outline.btn-accent:hover {
    --tw-border-opacity: 1;
    border-color: hsl(var(--af) / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: hsl(var(--af) / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: hsl(var(--ac) / var(--tw-text-opacity));
  }

  .btn-outline.btn-success:hover {
    --tw-border-opacity: 1;
    border-color: hsl(var(--su) / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: hsl(var(--su) / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: hsl(var(--suc) / var(--tw-text-opacity));
  }

  .btn-outline.btn-info:hover {
    --tw-border-opacity: 1;
    border-color: hsl(var(--in) / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: hsl(var(--in) / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: hsl(var(--inc) / var(--tw-text-opacity));
  }

  .btn-outline.btn-warning:hover {
    --tw-border-opacity: 1;
    border-color: hsl(var(--wa) / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: hsl(var(--wa) / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: hsl(var(--wac) / var(--tw-text-opacity));
  }

  .btn-outline.btn-error:hover {
    --tw-border-opacity: 1;
    border-color: hsl(var(--er) / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: hsl(var(--er) / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: hsl(var(--erc) / var(--tw-text-opacity));
  }

  .btn-disabled:hover,
    .btn[disabled]:hover,
    .btn:disabled:hover {
    --tw-border-opacity: 0;
    background-color: hsl(var(--n) / var(--tw-bg-opacity));
    --tw-bg-opacity: 0.2;
    color: hsl(var(--bc) / var(--tw-text-opacity));
    --tw-text-opacity: 0.2;
  }

  .btn:is(input[type="checkbox"]:checked):hover, .btn:is(input[type="radio"]:checked):hover {
    --tw-border-opacity: 1;
    border-color: hsl(var(--pf) / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: hsl(var(--pf) / var(--tw-bg-opacity));
  }

  .dropdown.dropdown-hover:hover .dropdown-content {
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .menu :where(li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(.active):hover, .menu :where(li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(.active):hover {
    cursor: pointer;
    background-color: hsl(var(--bc) / 0.1);
    --tw-text-opacity: 1;
    color: hsl(var(--bc) / var(--tw-text-opacity));
    outline: 2px solid transparent;
    outline-offset: 2px;
  }

  .tab[disabled],
    .tab[disabled]:hover {
    cursor: not-allowed;
    color: hsl(var(--bc) / var(--tw-text-opacity));
    --tw-text-opacity: 0.2;
  }
}
.dropdown:is(details) summary::-webkit-details-marker {
  display: none;
}
.file-input {
  height: 3rem;
  flex-shrink: 1;
  padding-right: 1rem;
  font-size: 1rem;
  line-height: 2;
  line-height: 1.5rem;
  overflow: hidden;
  border-width: 1px;
  border-color: hsl(var(--bc) / var(--tw-border-opacity));
  --tw-border-opacity: 0;
  --tw-bg-opacity: 1;
  background-color: hsl(var(--b1) / var(--tw-bg-opacity));
  border-radius: var(--rounded-btn, 0.5rem);
}
.file-input::file-selector-button {
  margin-right: 1rem;
  display: inline-flex;
  height: 2.875rem;
  min-height: 2.875rem;
  flex-shrink: 0;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding-left: 1rem;
  padding-right: 1rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
  line-height: 1em;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: hsl(var(--n) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: hsl(var(--n) / var(--tw-bg-opacity));
  font-weight: 600;
  text-transform: uppercase;
  text-transform: var(--btn-text-case, uppercase);
  --tw-text-opacity: 1;
  color: hsl(var(--nc) / var(--tw-text-opacity));
  text-decoration-line: none;
  border-width: var(--border-btn, 1px);
  animation: button-pop var(--animation-btn, 0.25s) ease-out;
}
.footer {
  display: grid;
  width: 100%;
  grid-auto-flow: row;
  place-items: start;
  row-gap: 2.5rem;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.footer > * {
  display: grid;
  place-items: start;
  gap: 0.5rem;
}
@media (min-width: 48rem) {

  .footer {
    grid-auto-flow: column;
  }

  .footer-center {
    grid-auto-flow: row dense;
  }
}
.label {
  display: flex;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  align-items: center;
  justify-content: space-between;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.indicator {
  position: relative;
  display: inline-flex;
  width: -moz-max-content;
  width: max-content;
}
.indicator :where(.indicator-item) {
  z-index: 1;
  position: absolute;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  white-space: nowrap;
}
.input {
  flex-shrink: 1;
  height: 3rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 1rem;
  line-height: 2;
  line-height: 1.5rem;
  border-width: 1px;
  border-color: hsl(var(--bc) / var(--tw-border-opacity));
  --tw-border-opacity: 0;
  --tw-bg-opacity: 1;
  background-color: hsl(var(--b1) / var(--tw-bg-opacity));
  border-radius: var(--rounded-btn, 0.5rem);
}
.input-group > .input {
  isolation: isolate;
}
.input-group > *,
  .input-group > .input,
  .input-group > .textarea,
  .input-group > .select {
  border-radius: 0px;
}
.join {
  display: inline-flex;
  align-items: stretch;
  border-radius: var(--rounded-btn, 0.5rem);
}
.join * {
  border-radius: inherit;
}
.join :where(.join-item) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}
.join .join-item:not(:first-child):not(:last-child),
  .join *:not(:first-child):not(:last-child) .join-item {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}
.join .join-item:first-child:not(:last-child),
  .join *:first-child:not(:last-child) .join-item {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.join :where(.join-item:first-child:not(:last-child)),
  .join :where(*:first-child:not(:last-child) .join-item) {
  border-bottom-left-radius: inherit;
  border-top-left-radius: inherit;
}
.join .join-item:last-child:not(:first-child),
  .join *:last-child:not(:first-child) .join-item {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}
.join :where(.join-item:last-child:not(:first-child)),
  .join :where(*:last-child:not(:first-child) .join-item) {
  border-top-right-radius: inherit;
  border-bottom-right-radius: inherit;
}
.link {
  cursor: pointer;
  text-decoration-line: underline;
}
.menu {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  font-size: 0.875rem;
  line-height: 1.25rem;
  padding: 0.5rem;
}
.menu :where(li ul) {
  position: relative;
  white-space: nowrap;
  margin-left: 1rem;
  padding-left: 0.5rem;
}
.menu :where(li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)),
  .menu :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
  display: grid;
  grid-auto-flow: column;
  align-content: flex-start;
  align-items: center;
  gap: 0.5rem;
  grid-auto-columns: max-content auto max-content;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: left;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: var(--rounded-btn, 0.5rem);
}
.menu li.disabled {
  cursor: not-allowed;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  color: hsl(var(--bc) / 0.3);
}
.menu :where(li > .menu-dropdown:not(.menu-dropdown-show)) {
  display: none;
}
:where(.menu li) {
  position: relative;
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: stretch;
}
:where(.menu li) .badge {
  justify-self: end;
}
.\!modal {
  pointer-events: none !important;
  position: fixed !important;
  inset: 0px !important;
  margin: 0px !important;
  display: grid !important;
  height: 100% !important;
  max-height: none !important;
  width: 100% !important;
  max-width: none !important;
  justify-items: center !important;
  padding: 0px !important;
  opacity: 0 !important;
  overscroll-behavior: contain !important;
  z-index: 999 !important;
  background-color: transparent !important;
  transition-duration: 200ms !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-property: transform, opacity, visibility !important;
  overflow-y: hidden !important;
}
.modal {
  pointer-events: none;
  position: fixed;
  inset: 0px;
  margin: 0px;
  display: grid;
  height: 100%;
  max-height: none;
  width: 100%;
  max-width: none;
  justify-items: center;
  padding: 0px;
  opacity: 0;
  overscroll-behavior: contain;
  z-index: 999;
  background-color: transparent;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: transform, opacity, visibility;
  overflow-y: hidden;
}
:where(.\!modal) {
  align-items: center !important;
}
:where(.modal) {
  align-items: center;
}
.modal-open,
.modal:target,
.modal-toggle:checked + .modal,
.modal[open] {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
}

.\!modal:target,
.modal-toggle:checked + .\!modal,
.\!modal[open] {
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}
:root:has(:is(.modal-open, .modal:target, .modal-toggle:checked + .modal, .modal[open])) {
  overflow: hidden;
}
:root:has(:is(.modal-open, .\!modal:target, .modal-toggle:checked + .\!modal, .\!modal[open])) {
  overflow: hidden !important;
}
.navbar {
  display: flex;
  align-items: center;
  padding: var(--navbar-padding, 0.5rem);
  min-height: 4rem;
  width: 100%;
}
:where(.navbar > *) {
  display: inline-flex;
  align-items: center;
}
.navbar-start {
  width: 50%;
  justify-content: flex-start;
}
.navbar-center {
  flex-shrink: 0;
}
.navbar-end {
  width: 50%;
  justify-content: flex-end;
}
.progress {
  position: relative;
  width: 100%;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  overflow: hidden;
  height: 0.5rem;
  border-radius: var(--rounded-box, 1rem);
}
.select {
  display: inline-flex;
  flex-shrink: 0;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  height: 3rem;
  padding-left: 1rem;
  padding-right: 2.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  line-height: 2;
  min-height: 3rem;
  border-width: 1px;
  border-color: hsl(var(--bc) / var(--tw-border-opacity));
  --tw-border-opacity: 0;
  --tw-bg-opacity: 1;
  background-color: hsl(var(--b1) / var(--tw-bg-opacity));
  font-weight: 600;
  border-radius: var(--rounded-btn, 0.5rem);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(1px + 50%), calc(100% - 16px) calc(1px + 50%);
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
.select[multiple] {
  height: auto;
}
.stack {
  display: inline-grid;
  place-items: center;
  align-items: flex-end;
}
.stack > * {
  grid-column-start: 1;
  grid-row-start: 1;
  transform: translateY(10%) scale(0.9);
  z-index: 1;
  width: 100%;
  opacity: 0.6;
}
.stack > *:nth-child(2) {
  transform: translateY(5%) scale(0.95);
  z-index: 2;
  opacity: 0.8;
}
.stack > *:nth-child(1) {
  transform: translateY(0) scale(1);
  z-index: 3;
  opacity: 1;
}
.stats {
  display: inline-grid;
  --tw-bg-opacity: 1;
  background-color: hsl(var(--b1) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: hsl(var(--bc) / var(--tw-text-opacity));
  border-radius: var(--rounded-box, 1rem);
}
:where(.stats) {
  grid-auto-flow: column;
  overflow-x: auto;
}
.stat-value {
  grid-column-start: 1;
  white-space: nowrap;
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: 800;
}
.steps .step {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  grid-template-columns: auto;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-template-rows: 40px 1fr;
  place-items: center;
  text-align: center;
  min-width: 4rem;
}
.swap {
  position: relative;
  display: inline-grid;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  place-content: center;
  cursor: pointer;
}
.swap > * {
  grid-column-start: 1;
  grid-row-start: 1;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: transform, opacity;
}
.swap input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.swap .swap-on,
.swap .swap-indeterminate,
.swap input:indeterminate ~ .swap-on {
  opacity: 0;
}
.swap input:checked ~ .swap-off,
.swap.swap-active .swap-off,
.swap input:indeterminate ~ .swap-off {
  opacity: 0;
}
.swap input:checked ~ .swap-on,
.swap-active .swap-on,
.swap input:indeterminate ~ .swap-indeterminate {
  opacity: 1;
}
.tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
}
.tab {
  position: relative;
  display: inline-flex;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 2rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  line-height: 2;
  --tab-padding: 1rem;
  --tw-text-opacity: 0.5;
  --tab-color: hsl(var(--bc) / var(--tw-text-opacity, 1));
  --tab-bg: hsl(var(--b1) / var(--tw-bg-opacity, 1));
  --tab-border-color: hsl(var(--b3) / var(--tw-bg-opacity, 1));
  color: var(--tab-color);
  padding-left: var(--tab-padding, 1rem);
  padding-right: var(--tab-padding, 1rem);
}
.table {
  position: relative;
  width: 100%;
  text-align: left;
  font-size: 0.875rem;
  line-height: 1.25rem;
  border-radius: var(--rounded-box, 1rem);
}
.table :where(.table-pin-rows thead tr) {
  position: sticky;
  top: 0px;
  z-index: 1;
  --tw-bg-opacity: 1;
  background-color: hsl(var(--b1) / var(--tw-bg-opacity));
}
.table :where(.table-pin-rows tfoot tr) {
  position: sticky;
  bottom: 0px;
  z-index: 1;
  --tw-bg-opacity: 1;
  background-color: hsl(var(--b1) / var(--tw-bg-opacity));
}
.table :where(.table-pin-cols tr th) {
  position: sticky;
  left: 0px;
  right: 0px;
  --tw-bg-opacity: 1;
  background-color: hsl(var(--b1) / var(--tw-bg-opacity));
}
.textarea {
  flex-shrink: 1;
  min-height: 3rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  line-height: 2;
  border-width: 1px;
  border-color: hsl(var(--bc) / var(--tw-border-opacity));
  --tw-border-opacity: 0;
  --tw-bg-opacity: 1;
  background-color: hsl(var(--b1) / var(--tw-bg-opacity));
  border-radius: var(--rounded-btn, 0.5rem);
}
.btm-nav > *:where(.active) {
  border-top-width: 2px;
  --tw-bg-opacity: 1;
  background-color: hsl(var(--b1) / var(--tw-bg-opacity));
}
.btm-nav > *.disabled,
    .btm-nav > *[disabled] {
  pointer-events: none;
  --tw-border-opacity: 0;
  background-color: hsl(var(--n) / var(--tw-bg-opacity));
  --tw-bg-opacity: 0.1;
  color: hsl(var(--bc) / var(--tw-text-opacity));
  --tw-text-opacity: 0.2;
}
.btm-nav > * .label {
  font-size: 1rem;
  line-height: 1.5rem;
}
.btn:active:hover,
  .btn:active:focus {
  animation: button-pop 0s ease-out;
  transform: scale(var(--btn-focus-scale, 0.97));
}
.btn:focus-visible {
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
}
.btn-primary {
  --tw-border-opacity: 1;
  border-color: hsl(var(--p) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: hsl(var(--p) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: hsl(var(--pc) / var(--tw-text-opacity));
  outline-color: hsl(var(--p) / 1);
}
.btn-primary.btn-active {
  --tw-border-opacity: 1;
  border-color: hsl(var(--pf) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: hsl(var(--pf) / var(--tw-bg-opacity));
}
.btn-secondary {
  --tw-border-opacity: 1;
  border-color: hsl(var(--s) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: hsl(var(--s) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: hsl(var(--sc) / var(--tw-text-opacity));
  outline-color: hsl(var(--s) / 1);
}
.btn-secondary.btn-active {
  --tw-border-opacity: 1;
  border-color: hsl(var(--sf) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: hsl(var(--sf) / var(--tw-bg-opacity));
}
.btn.glass {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  outline-color: currentColor;
}
.btn.glass.btn-active {
  --glass-opacity: 25%;
  --glass-border-opacity: 15%;
}
.btn-ghost {
  border-width: 1px;
  border-color: transparent;
  background-color: transparent;
  color: currentColor;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  outline-color: currentColor;
}
.btn-ghost.btn-active {
  --tw-border-opacity: 0;
  background-color: hsl(var(--bc) / var(--tw-bg-opacity));
  --tw-bg-opacity: 0.2;
}
.btn-outline {
  border-color: currentColor;
  background-color: transparent;
  --tw-text-opacity: 1;
  color: hsl(var(--bc) / var(--tw-text-opacity));
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.btn-outline.btn-active {
  --tw-border-opacity: 1;
  border-color: hsl(var(--bc) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: hsl(var(--bc) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: hsl(var(--b1) / var(--tw-text-opacity));
}
.btn-outline.btn-primary {
  --tw-text-opacity: 1;
  color: hsl(var(--p) / var(--tw-text-opacity));
}
.btn-outline.btn-primary.btn-active {
  --tw-border-opacity: 1;
  border-color: hsl(var(--pf) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: hsl(var(--pf) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: hsl(var(--pc) / var(--tw-text-opacity));
}
.btn-outline.btn-secondary {
  --tw-text-opacity: 1;
  color: hsl(var(--s) / var(--tw-text-opacity));
}
.btn-outline.btn-secondary.btn-active {
  --tw-border-opacity: 1;
  border-color: hsl(var(--sf) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: hsl(var(--sf) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: hsl(var(--sc) / var(--tw-text-opacity));
}
.btn-outline.btn-accent {
  --tw-text-opacity: 1;
  color: hsl(var(--a) / var(--tw-text-opacity));
}
.btn-outline.btn-accent.btn-active {
  --tw-border-opacity: 1;
  border-color: hsl(var(--af) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: hsl(var(--af) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: hsl(var(--ac) / var(--tw-text-opacity));
}
.btn-outline.btn-success {
  --tw-text-opacity: 1;
  color: hsl(var(--su) / var(--tw-text-opacity));
}
.btn-outline.btn-success.btn-active {
  --tw-border-opacity: 1;
  border-color: hsl(var(--su) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: hsl(var(--su) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: hsl(var(--suc) / var(--tw-text-opacity));
}
.btn-outline.btn-info {
  --tw-text-opacity: 1;
  color: hsl(var(--in) / var(--tw-text-opacity));
}
.btn-outline.btn-info.btn-active {
  --tw-border-opacity: 1;
  border-color: hsl(var(--in) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: hsl(var(--in) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: hsl(var(--inc) / var(--tw-text-opacity));
}
.btn-outline.btn-warning {
  --tw-text-opacity: 1;
  color: hsl(var(--wa) / var(--tw-text-opacity));
}
.btn-outline.btn-warning.btn-active {
  --tw-border-opacity: 1;
  border-color: hsl(var(--wa) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: hsl(var(--wa) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: hsl(var(--wac) / var(--tw-text-opacity));
}
.btn-outline.btn-error {
  --tw-text-opacity: 1;
  color: hsl(var(--er) / var(--tw-text-opacity));
}
.btn-outline.btn-error.btn-active {
  --tw-border-opacity: 1;
  border-color: hsl(var(--er) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: hsl(var(--er) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: hsl(var(--erc) / var(--tw-text-opacity));
}
.btn-group > input[type="radio"]:checked.btn,
  .btn-group > .btn-active {
  --tw-border-opacity: 1;
  border-color: hsl(var(--p) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: hsl(var(--p) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: hsl(var(--pc) / var(--tw-text-opacity));
}
.btn-group > input[type="radio"]:checked.btn:focus-visible, .btn-group > .btn-active:focus-visible {
  outline-style: solid;
  outline-width: 2px;
  outline-color: hsl(var(--p) / 1);
}
.btn:is(input[type="checkbox"]:checked),
.btn:is(input[type="radio"]:checked) {
  --tw-border-opacity: 1;
  border-color: hsl(var(--p) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: hsl(var(--p) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: hsl(var(--pc) / var(--tw-text-opacity));
}
.btn:is(input[type="checkbox"]:checked):focus-visible, .btn:is(input[type="radio"]:checked):focus-visible {
  outline-color: hsl(var(--p) / 1);
}
@keyframes button-pop {

  0% {
    transform: scale(var(--btn-focus-scale, 0.98));
  }

  40% {
    transform: scale(1.02);
  }

  100% {
    transform: scale(1);
  }
}
.\!card :where(figure:first-child) {
  overflow: hidden !important;
  border-start-start-radius: inherit !important;
  border-start-end-radius: inherit !important;
  border-end-start-radius: unset !important;
  border-end-end-radius: unset !important;
}
.card :where(figure:first-child) {
  overflow: hidden;
  border-start-start-radius: inherit;
  border-start-end-radius: inherit;
  border-end-start-radius: unset;
  border-end-end-radius: unset;
}
.\!card :where(figure:last-child) {
  overflow: hidden !important;
  border-start-start-radius: unset !important;
  border-start-end-radius: unset !important;
  border-end-start-radius: inherit !important;
  border-end-end-radius: inherit !important;
}
.card :where(figure:last-child) {
  overflow: hidden;
  border-start-start-radius: unset;
  border-start-end-radius: unset;
  border-end-start-radius: inherit;
  border-end-end-radius: inherit;
}
.\!card:focus-visible {
  outline: 2px solid currentColor !important;
  outline-offset: 2px !important;
}
.card:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.\!card.bordered {
  border-width: 1px !important;
  --tw-border-opacity: 1 !important;
  border-color: hsl(var(--b2) / var(--tw-border-opacity)) !important;
}
.card.bordered {
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: hsl(var(--b2) / var(--tw-border-opacity));
}
.\!card.compact .card-body {
  padding: 1rem !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
}
.card.compact .card-body {
  padding: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.\!card.image-full :where(figure) {
  overflow: hidden !important;
  border-radius: inherit !important;
}
.card.image-full :where(figure) {
  overflow: hidden;
  border-radius: inherit;
}
.checkbox:focus-visible {
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
  outline-color: hsl(var(--bc) / 1);
}
.checkbox:checked,
  .checkbox[checked="true"],
  .checkbox[aria-checked="true"] {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--bc) / var(--tw-bg-opacity));
  background-repeat: no-repeat;
  animation: checkmark var(--animation-input, 0.2s) ease-in-out;
  background-image: linear-gradient(-45deg, transparent 65%, hsl(var(--chkbg)) 65.99%),
      linear-gradient(45deg, transparent 75%, hsl(var(--chkbg)) 75.99%),
      linear-gradient(-45deg, hsl(var(--chkbg)) 40%, transparent 40.99%),
      linear-gradient(
        45deg,
        hsl(var(--chkbg)) 30%,
        hsl(var(--chkfg)) 30.99%,
        hsl(var(--chkfg)) 40%,
        transparent 40.99%
      ),
      linear-gradient(-45deg, hsl(var(--chkfg)) 50%, hsl(var(--chkbg)) 50.99%);
}
.checkbox:indeterminate {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--bc) / var(--tw-bg-opacity));
  background-repeat: no-repeat;
  animation: checkmark var(--animation-input, 0.2s) ease-in-out;
  background-image: linear-gradient(90deg, transparent 80%, hsl(var(--chkbg)) 80%),
      linear-gradient(-90deg, transparent 80%, hsl(var(--chkbg)) 80%),
      linear-gradient(
        0deg,
        hsl(var(--chkbg)) 43%,
        hsl(var(--chkfg)) 43%,
        hsl(var(--chkfg)) 57%,
        hsl(var(--chkbg)) 57%
      );
}
.checkbox:disabled {
  cursor: not-allowed;
  border-color: transparent;
  --tw-bg-opacity: 1;
  background-color: hsl(var(--bc) / var(--tw-bg-opacity));
  opacity: 0.2;
}
@keyframes checkmark {

  0% {
    background-position-y: 5px;
  }

  50% {
    background-position-y: -2px;
  }

  100% {
    background-position-y: 0;
  }
}
[dir="rtl"] .checkbox:checked,
    [dir="rtl"] .checkbox[checked="true"],
    [dir="rtl"] .checkbox[aria-checked="true"] {
  background-image: linear-gradient(45deg, transparent 65%, hsl(var(--chkbg)) 65.99%),
        linear-gradient(-45deg, transparent 75%, hsl(var(--chkbg)) 75.99%),
        linear-gradient(45deg, hsl(var(--chkbg)) 40%, transparent 40.99%),
        linear-gradient(
          -45deg,
          hsl(var(--chkbg)) 30%,
          hsl(var(--chkfg)) 30.99%,
          hsl(var(--chkfg)) 40%,
          transparent 40.99%
        ),
        linear-gradient(45deg, hsl(var(--chkfg)) 50%, hsl(var(--chkbg)) 50.99%);
}
.dropdown.dropdown-open .dropdown-content,
.dropdown:focus .dropdown-content,
.dropdown:focus-within .dropdown-content {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.file-input:focus {
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
  outline-color: hsl(var(--bc) / 0.2);
}
.file-input-disabled,
  .file-input[disabled] {
  cursor: not-allowed;
  --tw-border-opacity: 1;
  border-color: hsl(var(--b2) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: hsl(var(--b2) / var(--tw-bg-opacity));
  --tw-text-opacity: 0.2;
}
.file-input-disabled::-moz-placeholder, .file-input[disabled]::-moz-placeholder {
  color: hsl(var(--bc) / var(--tw-placeholder-opacity));
  --tw-placeholder-opacity: 0.2;
}
.file-input-disabled::placeholder,
  .file-input[disabled]::placeholder {
  color: hsl(var(--bc) / var(--tw-placeholder-opacity));
  --tw-placeholder-opacity: 0.2;
}
.file-input-disabled::file-selector-button, .file-input[disabled]::file-selector-button {
  --tw-border-opacity: 0;
  background-color: hsl(var(--n) / var(--tw-bg-opacity));
  --tw-bg-opacity: 0.2;
  color: hsl(var(--bc) / var(--tw-text-opacity));
  --tw-text-opacity: 0.2;
}
.input[list]::-webkit-calendar-picker-indicator {
  line-height: 1em;
}
.input:focus {
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
  outline-color: hsl(var(--bc) / 0.2);
}
.input-disabled,
  .input:disabled,
  .input[disabled] {
  cursor: not-allowed;
  --tw-border-opacity: 1;
  border-color: hsl(var(--b2) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: hsl(var(--b2) / var(--tw-bg-opacity));
  --tw-text-opacity: 0.2;
}
.input-disabled::-moz-placeholder, .input:disabled::-moz-placeholder, .input[disabled]::-moz-placeholder {
  color: hsl(var(--bc) / var(--tw-placeholder-opacity));
  --tw-placeholder-opacity: 0.2;
}
.input-disabled::placeholder,
  .input:disabled::placeholder,
  .input[disabled]::placeholder {
  color: hsl(var(--bc) / var(--tw-placeholder-opacity));
  --tw-placeholder-opacity: 0.2;
}
.join > :where(*:not(:first-child)) {
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: -1px;
}
.link:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.\!loading {
  pointer-events: none !important;
  display: inline-block !important;
  aspect-ratio: 1 / 1 !important;
  width: 1.5rem !important;
  background-color: currentColor !important;
  -webkit-mask-size: 100% !important;
          mask-size: 100% !important;
  -webkit-mask-repeat: no-repeat !important;
          mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
          mask-position: center !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-in-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E") !important;
          mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-in-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E") !important;
}
.loading {
  pointer-events: none;
  display: inline-block;
  aspect-ratio: 1 / 1;
  width: 1.5rem;
  background-color: currentColor;
  -webkit-mask-size: 100%;
          mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-in-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-in-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.loading-spinner {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-in-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-in-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.loading-dots {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_qM83%7Banimation:spinner_8HQG 1.05s infinite%7D.spinner_oXPr%7Banimation-delay:.1s%7D.spinner_ZTLf%7Banimation-delay:.2s%7D@keyframes spinner_8HQG%7B0%25,57.14%25%7Banimation-timing-function:cubic-bezier(0.33,.66,.66,1);transform:translate(0)%7D28.57%25%7Banimation-timing-function:cubic-bezier(0.33,0,.66,.33);transform:translateY(-6px)%7D100%25%7Btransform:translate(0)%7D%7D%3C/style%3E%3Ccircle class='spinner_qM83' cx='4' cy='12' r='3'/%3E%3Ccircle class='spinner_qM83 spinner_oXPr' cx='12' cy='12' r='3'/%3E%3Ccircle class='spinner_qM83 spinner_ZTLf' cx='20' cy='12' r='3'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_qM83%7Banimation:spinner_8HQG 1.05s infinite%7D.spinner_oXPr%7Banimation-delay:.1s%7D.spinner_ZTLf%7Banimation-delay:.2s%7D@keyframes spinner_8HQG%7B0%25,57.14%25%7Banimation-timing-function:cubic-bezier(0.33,.66,.66,1);transform:translate(0)%7D28.57%25%7Banimation-timing-function:cubic-bezier(0.33,0,.66,.33);transform:translateY(-6px)%7D100%25%7Btransform:translate(0)%7D%7D%3C/style%3E%3Ccircle class='spinner_qM83' cx='4' cy='12' r='3'/%3E%3Ccircle class='spinner_qM83 spinner_oXPr' cx='12' cy='12' r='3'/%3E%3Ccircle class='spinner_qM83 spinner_ZTLf' cx='20' cy='12' r='3'/%3E%3C/svg%3E");
}
.menu :where(li:empty) {
  background-color: hsl(var(--bc) / 0.1);
  margin: 0.5rem 1rem;
  height: 1px;
}
.menu :where(li ul):before {
  position: absolute;
  left: 0px;
  top: 0.75rem;
  bottom: 0.75rem;
  width: 1px;
  background-color: hsl(var(--bc) / 0.1);
  content: "";
}
.menu :where(li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(.active).focus,
    .menu :where(li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(.active):focus,
    .menu :where(li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(.active).focus,
    .menu :where(li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(.active):focus {
  cursor: pointer;
  background-color: hsl(var(--bc) / 0.1);
  --tw-text-opacity: 1;
  color: hsl(var(--bc) / var(--tw-text-opacity));
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.menu :where(li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):active,
    .menu :where(li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):where(.active),
    .menu :where(li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):active,
    .menu :where(li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):where(.active) {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--n) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: hsl(var(--nc) / var(--tw-text-opacity));
}
.menu :where(li > details > summary)::-webkit-details-marker {
  display: none;
}
.menu :where(li > details > summary):after,
  .menu :where(li > .menu-dropdown-toggle):after {
  justify-self: end;
  display: block;
  margin-top: -0.5rem;
  height: 0.5rem;
  width: 0.5rem;
  transform: rotate(45deg);
  transition-property: transform, margin-top;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  content: "";
  transform-origin: 75% 75%;
  box-shadow: 2px 2px;
  pointer-events: none;
}
.menu :where(li > details[open] > summary):after,
  .menu :where(li > .menu-dropdown-toggle.menu-dropdown-show):after {
  transform: rotate(225deg);
  margin-top: 0;
}
.menu .menu-title {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  color: hsl(var(--bc) / 0.4);
}
.mockup-phone .display {
  overflow: hidden;
  border-radius: 40px;
  margin-top: -25px;
}
.\!modal:not(dialog:not(.modal-open)),
  .\!modal::backdrop {
  background-color: rgba(0, 0, 0, 0.3) !important;
  animation: modal-pop 0.2s ease-out !important;
}
.modal:not(dialog:not(.modal-open)),
  .modal::backdrop {
  background-color: rgba(0, 0, 0, 0.3);
  animation: modal-pop 0.2s ease-out;
}
.\!modal:not(dialog:not(.modal-open)),
  .\!modal::backdrop {
  background-color: rgba(0, 0, 0, 0.3) !important;
  animation: modal-pop 0.2s ease-out !important;
}
.modal-open .modal-box,
.modal-toggle:checked + .modal .modal-box,
.modal:target .modal-box,
.modal[open] .modal-box {
  --tw-translate-y: 0px;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.modal-toggle:checked + .\!modal .modal-box,
.\!modal:target .modal-box,
.\!modal[open] .modal-box {
  --tw-translate-y: 0px !important;
  --tw-scale-x: 1 !important;
  --tw-scale-y: 1 !important;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
}
@keyframes modal-pop {

  0% {
    opacity: 0;
  }
}
.progress::-moz-progress-bar {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--n) / var(--tw-bg-opacity));
}
.progress:indeterminate {
  --progress-color: hsl(var(--n));
  background-image: repeating-linear-gradient(
    90deg,
    var(--progress-color) -1%,
    var(--progress-color) 10%,
    transparent 10%,
    transparent 90%
  );
  background-size: 200%;
  background-position-x: 15%;
  animation: progress-loading 5s ease-in-out infinite;
}
.progress::-webkit-progress-bar {
  background-color: hsl(var(--n) / 0.2);
  border-radius: var(--rounded-box, 1rem);
}
.progress::-webkit-progress-value {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--nf) / var(--tw-bg-opacity));
  border-radius: var(--rounded-box, 1rem);
}
.progress:indeterminate::-moz-progress-bar {
  background-color: hsl(var(--n) / 0.2);
  background-image: repeating-linear-gradient(
    90deg,
    var(--progress-color) -1%,
    var(--progress-color) 10%,
    transparent 10%,
    transparent 90%
  );
  background-size: 200%;
  background-position-x: 15%;
  animation: progress-loading 5s ease-in-out infinite;
}
@keyframes progress-loading {

  50% {
    background-position-x: -115%;
  }
}
@keyframes radiomark {

  0% {
    box-shadow: 0 0 0 12px hsl(var(--b1)) inset, 0 0 0 12px hsl(var(--b1)) inset;
  }

  50% {
    box-shadow: 0 0 0 3px hsl(var(--b1)) inset, 0 0 0 3px hsl(var(--b1)) inset;
  }

  100% {
    box-shadow: 0 0 0 4px hsl(var(--b1)) inset, 0 0 0 4px hsl(var(--b1)) inset;
  }
}
@keyframes rating-pop {

  0% {
    transform: translateY(-0.125em);
  }

  40% {
    transform: translateY(-0.125em);
  }

  100% {
    transform: translateY(0);
  }
}
.select:focus {
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
  outline-color: hsl(var(--bc) / 0.2);
}
.select-disabled,
  .select:disabled,
  .select[disabled] {
  cursor: not-allowed;
  --tw-border-opacity: 1;
  border-color: hsl(var(--b2) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: hsl(var(--b2) / var(--tw-bg-opacity));
  --tw-text-opacity: 0.2;
}
.select-disabled::-moz-placeholder, .select:disabled::-moz-placeholder, .select[disabled]::-moz-placeholder {
  color: hsl(var(--bc) / var(--tw-placeholder-opacity));
  --tw-placeholder-opacity: 0.2;
}
.select-disabled::placeholder,
  .select:disabled::placeholder,
  .select[disabled]::placeholder {
  color: hsl(var(--bc) / var(--tw-placeholder-opacity));
  --tw-placeholder-opacity: 0.2;
}
.select-multiple,
  .select[multiple],
  .select[size].select:not([size="1"]) {
  background-image: none;
  padding-right: 1rem;
}
[dir="rtl"] .select {
  background-position: calc(0% + 12px) calc(1px + 50%), calc(0% + 16px) calc(1px + 50%);
}
:where(.stats) > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-x-reverse: 0;
  border-right-width: calc(1px * var(--tw-divide-x-reverse));
  border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
  --tw-divide-y-reverse: 0;
  border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(0px * var(--tw-divide-y-reverse));
}
.steps .step:before {
  top: 0px;
  grid-column-start: 1;
  grid-row-start: 1;
  height: 0.5rem;
  width: 100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-bg-opacity: 1;
  background-color: hsl(var(--b3) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: hsl(var(--bc) / var(--tw-text-opacity));
  content: "";
  margin-left: -100%;
}
.steps .step:after {
  content: counter(step);
  counter-increment: step;
  z-index: 1;
  position: relative;
  grid-column-start: 1;
  grid-row-start: 1;
  display: grid;
  height: 2rem;
  width: 2rem;
  place-items: center;
  place-self: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: hsl(var(--b3) / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: hsl(var(--bc) / var(--tw-text-opacity));
}
.steps .step:first-child:before {
  content: none;
}
.steps .step[data-content]:after {
  content: attr(data-content);
}
.tab.tab-active:not(.tab-disabled):not([disabled]) {
  border-color: hsl(var(--bc) / var(--tw-border-opacity));
  --tw-border-opacity: 1;
  --tw-text-opacity: 1;
}
.tab:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.tab:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -3px;
}
.tab:focus-visible.tab-lifted {
  border-bottom-right-radius: var(--tab-radius, 0.5rem);
  border-bottom-left-radius: var(--tab-radius, 0.5rem);
}
.tab-disabled,
  .tab[disabled] {
  cursor: not-allowed;
  color: hsl(var(--bc) / var(--tw-text-opacity));
  --tw-text-opacity: 0.2;
}
.tabs-boxed .tab {
  border-radius: var(--rounded-btn, 0.5rem);
}
.table :where(th, td) {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  vertical-align: middle;
}
.table tr.active,
  .table tr.active:nth-child(even),
  .table-zebra tbody tr:nth-child(even) {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--b2) / var(--tw-bg-opacity));
}
.table-zebra tr.active,
    .table-zebra tr.active:nth-child(even),
    .table-zebra-zebra tbody tr:nth-child(even) {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--b3) / var(--tw-bg-opacity));
}
.table :where(thead, tbody) :where(tr:not(:last-child)),
    .table :where(thead, tbody) :where(tr:first-child:last-child) {
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-bottom-color: hsl(var(--b2) / var(--tw-border-opacity));
}
.table :where(thead, tfoot) {
  white-space: nowrap;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  color: hsl(var(--bc) / 0.6);
}
.textarea:focus {
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
  outline-color: hsl(var(--bc) / 0.2);
}
.textarea-disabled,
  .textarea:disabled,
  .textarea[disabled] {
  cursor: not-allowed;
  --tw-border-opacity: 1;
  border-color: hsl(var(--b2) / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: hsl(var(--b2) / var(--tw-bg-opacity));
  --tw-text-opacity: 0.2;
}
.textarea-disabled::-moz-placeholder, .textarea:disabled::-moz-placeholder, .textarea[disabled]::-moz-placeholder {
  color: hsl(var(--bc) / var(--tw-placeholder-opacity));
  --tw-placeholder-opacity: 0.2;
}
.textarea-disabled::placeholder,
  .textarea:disabled::placeholder,
  .textarea[disabled]::placeholder {
  color: hsl(var(--bc) / var(--tw-placeholder-opacity));
  --tw-placeholder-opacity: 0.2;
}
@keyframes toast-pop {

  0% {
    transform: scale(0.9);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.tooltip.tooltip-primary {
  --tooltip-color: hsl(var(--p));
  --tooltip-text-color: hsl(var(--pc));
}
.tooltip.tooltip-secondary {
  --tooltip-color: hsl(var(--s));
  --tooltip-text-color: hsl(var(--sc));
}
.tooltip.tooltip-accent {
  --tooltip-color: hsl(var(--a));
  --tooltip-text-color: hsl(var(--ac));
}
.tooltip.tooltip-info {
  --tooltip-color: hsl(var(--in));
  --tooltip-text-color: hsl(var(--inc));
}
.tooltip.tooltip-success {
  --tooltip-color: hsl(var(--su));
  --tooltip-text-color: hsl(var(--suc));
}
.tooltip.tooltip-warning {
  --tooltip-color: hsl(var(--wa));
  --tooltip-text-color: hsl(var(--wac));
}
.tooltip.tooltip-error {
  --tooltip-color: hsl(var(--er));
  --tooltip-text-color: hsl(var(--erc));
}
.rounded-box {
  border-radius: var(--rounded-box, 1rem);
}
.artboard.phone-1.horizontal,
      .artboard.phone-1.artboard-horizontal {
  width: 568px;
  height: 320px;
}
.artboard.phone-2.horizontal,
      .artboard.phone-2.artboard-horizontal {
  width: 667px;
  height: 375px;
}
.artboard.phone-3.horizontal,
      .artboard.phone-3.artboard-horizontal {
  width: 736px;
  height: 414px;
}
.artboard.phone-4.horizontal,
      .artboard.phone-4.artboard-horizontal {
  width: 812px;
  height: 375px;
}
.artboard.phone-5.horizontal,
      .artboard.phone-5.artboard-horizontal {
  width: 896px;
  height: 414px;
}
.artboard.phone-6.horizontal,
      .artboard.phone-6.artboard-horizontal {
  width: 1024px;
  height: 320px;
}
.btm-nav-xs > *:where(.active) {
  border-top-width: 1px;
}
.btm-nav-sm > *:where(.active) {
  border-top-width: 2px;
}
.btm-nav-md > *:where(.active) {
  border-top-width: 2px;
}
.btm-nav-lg > *:where(.active) {
  border-top-width: 4px;
}
.indicator :where(.indicator-item) {
  right: 0px;
  left: auto;
  top: 0px;
  bottom: auto;
  --tw-translate-x: 50%;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.indicator :where(.indicator-item.indicator-start) {
  right: auto;
  left: 0px;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.indicator :where(.indicator-item.indicator-center) {
  right: 50%;
  left: 50%;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.indicator :where(.indicator-item.indicator-end) {
  right: 0px;
  left: auto;
  --tw-translate-x: 50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.indicator :where(.indicator-item.indicator-bottom) {
  top: auto;
  bottom: 0px;
  --tw-translate-y: 50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.indicator :where(.indicator-item.indicator-middle) {
  top: 50%;
  bottom: 50%;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.indicator :where(.indicator-item.indicator-top) {
  top: 0px;
  bottom: auto;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.join.join-vertical {
  flex-direction: column;
}
.join.join-vertical .join-item:first-child:not(:last-child),
  .join.join-vertical *:first-child:not(:last-child) .join-item {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
.join.join-vertical .join-item:last-child:not(:first-child),
  .join.join-vertical *:last-child:not(:first-child) .join-item {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}
.join.join-horizontal {
  flex-direction: row;
}
.join.join-horizontal .join-item:first-child:not(:last-child),
  .join.join-horizontal *:first-child:not(:last-child) .join-item {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: inherit;
  border-top-left-radius: inherit;
}
.join.join-horizontal .join-item:last-child:not(:first-child),
  .join.join-horizontal *:last-child:not(:first-child) .join-item {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-bottom-right-radius: inherit;
  border-top-right-radius: inherit;
}
.menu-horizontal {
  display: inline-flex;
  flex-direction: row;
}
.menu-horizontal > li:not(.menu-title) > details > ul {
  position: absolute;
}
.steps-horizontal .step {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  place-items: center;
  text-align: center;
}
.steps-vertical .step {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(1, minmax(0, 1fr));
}
.tooltip {
  position: relative;
  display: inline-block;
  --tooltip-offset: calc(100% + 1px + var(--tooltip-tail, 0px));
}
.tooltip:before {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  content: var(--tw-content);
  --tw-content: attr(data-tip);
}
.tooltip:before, .tooltip-top:before {
  transform: translateX(-50%);
  top: auto;
  left: 50%;
  right: auto;
  bottom: var(--tooltip-offset);
}
.avatar.online:before {
  content: "";
  position: absolute;
  z-index: 10;
  display: block;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: hsl(var(--su) / var(--tw-bg-opacity));
  outline-style: solid;
  outline-width: 2px;
  outline-color: hsl(var(--b1) / 1);
  width: 15%;
  height: 15%;
  top: 7%;
  right: 7%;
}
.avatar.offline:before {
  content: "";
  position: absolute;
  z-index: 10;
  display: block;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: hsl(var(--b3) / var(--tw-bg-opacity));
  outline-style: solid;
  outline-width: 2px;
  outline-color: hsl(var(--b1) / 1);
  width: 15%;
  height: 15%;
  top: 7%;
  right: 7%;
}
.btn-group .btn:not(:first-child):not(:last-child) {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.btn-group .btn:first-child:not(:last-child) {
  margin-top: -0px;
  margin-left: -1px;
  border-top-left-radius: var(--rounded-btn, 0.5rem);
  border-top-right-radius: 0;
  border-bottom-left-radius: var(--rounded-btn, 0.5rem);
  border-bottom-right-radius: 0;
}
.btn-group .btn:last-child:not(:first-child) {
  border-top-left-radius: 0;
  border-top-right-radius: var(--rounded-btn, 0.5rem);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: var(--rounded-btn, 0.5rem);
}
.btn-group-horizontal .btn:not(:first-child):not(:last-child) {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.btn-group-horizontal .btn:first-child:not(:last-child) {
  margin-top: -0px;
  margin-left: -1px;
  border-top-left-radius: var(--rounded-btn, 0.5rem);
  border-top-right-radius: 0;
  border-bottom-left-radius: var(--rounded-btn, 0.5rem);
  border-bottom-right-radius: 0;
}
.btn-group-horizontal .btn:last-child:not(:first-child) {
  border-top-left-radius: 0;
  border-top-right-radius: var(--rounded-btn, 0.5rem);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: var(--rounded-btn, 0.5rem);
}
.btn-group-vertical .btn:first-child:not(:last-child) {
  margin-top: -1px;
  margin-left: -0px;
  border-top-left-radius: var(--rounded-btn, 0.5rem);
  border-top-right-radius: var(--rounded-btn, 0.5rem);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.btn-group-vertical .btn:last-child:not(:first-child) {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: var(--rounded-btn, 0.5rem);
  border-bottom-right-radius: var(--rounded-btn, 0.5rem);
}
.join.join-vertical > :where(*:not(:first-child)) {
  margin-left: 0px;
  margin-right: 0px;
  margin-top: -1px;
}
.join.join-horizontal > :where(*:not(:first-child)) {
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: -1px;
}
.menu-horizontal > li:not(.menu-title) > details > ul {
  margin-top: 1rem;
  margin-left: 0px;
  --tw-bg-opacity: 1;
  background-color: hsl(var(--b1) / var(--tw-bg-opacity));
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-right: 0.5rem;
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  border-radius: var(--rounded-box, 1rem);
}
.menu-horizontal > li > details > ul:before {
  content: none;
}
.menu-sm :where(li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)),
  .menu-sm :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  border-radius: var(--rounded-btn, 0.5rem);
}
.menu-sm .menu-title {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.steps-horizontal .step {
  grid-template-rows: 40px 1fr;
  grid-template-columns: auto;
  min-width: 4rem;
}
.steps-horizontal .step:before {
  height: 0.5rem;
  width: 100%;
  --tw-translate-y: 0px;
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  content: "";
  margin-left: -100%;
}
.steps-vertical .step {
  gap: 0.5rem;
  grid-template-columns: 40px 1fr;
  grid-template-rows: auto;
  min-height: 4rem;
  justify-items: start;
}
.steps-vertical .step:before {
  height: 100%;
  width: 0.5rem;
  --tw-translate-y: -50%;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  margin-left: 50%;
}
[dir="rtl"] .steps-vertical .step:before {
  margin-right: auto;
}
.tooltip {
  position: relative;
  display: inline-block;
  text-align: center;
  --tooltip-tail: 0.1875rem;
  --tooltip-color: hsl(var(--n));
  --tooltip-text-color: hsl(var(--nc));
  --tooltip-tail-offset: calc(100% + 0.0625rem - var(--tooltip-tail));
}
.tooltip:before,
.tooltip:after {
  opacity: 0;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-delay: 100ms;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.tooltip:after {
  position: absolute;
  content: "";
  border-style: solid;
  border-width: var(--tooltip-tail, 0);
  width: 0;
  height: 0;
  display: block;
}
.tooltip:before {
  max-width: 20rem;
  border-radius: 0.25rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  background-color: var(--tooltip-color);
  color: var(--tooltip-text-color);
  width: -moz-max-content;
  width: max-content;
}
.tooltip.tooltip-open:before,
.tooltip.tooltip-open:after,
.tooltip:hover:before,
.tooltip:hover:after {
  opacity: 1;
  transition-delay: 75ms;
}
.tooltip:has(:focus-visible):after,
.tooltip:has(:focus-visible):before {
  opacity: 1;
  transition-delay: 75ms;
}
.tooltip:not([data-tip]):hover:before,
.tooltip:not([data-tip]):hover:after {
  visibility: hidden;
  opacity: 0;
}
.tooltip:after, .tooltip-top:after {
  transform: translateX(-50%);
  border-color: var(--tooltip-color) transparent transparent transparent;
  top: auto;
  left: 50%;
  right: auto;
  bottom: var(--tooltip-tail-offset);
}
.visible {
  visibility: visible;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.inset-0 {
  inset: 0px;
}
.left-0 {
  left: 0px;
}
.right-4 {
  right: 1rem;
}
.top-4 {
  top: 1rem;
}
.top-full {
  top: 100%;
}
.z-10 {
  z-index: 10;
}
.z-\[5000\] {
  z-index: 5000;
}
.z-\[6000\] {
  z-index: 6000;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.-mt-8 {
  margin-top: -2rem;
}
.mb-0 {
  margin-bottom: 0px;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-3 {
  margin-left: 0.75rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-10 {
  margin-top: 2.5rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.flex {
  display: flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.contents {
  display: contents;
}
.hidden {
  display: none;
}
.h-12 {
  height: 3rem;
}
.h-5 {
  height: 1.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-8 {
  height: 2rem;
}
.h-\[700px\] {
  height: 700px;
}
.h-\[84px\] {
  height: 84px;
}
.h-full {
  height: 100%;
}
.min-h-\[30px\] {
  min-height: 30px;
}
.min-h-\[60vh\] {
  min-height: 60vh;
}
.min-h-screen {
  min-height: 100vh;
}
.w-12 {
  width: 3rem;
}
.w-5 {
  width: 1.25rem;
}
.w-52 {
  width: 13rem;
}
.w-6 {
  width: 1.5rem;
}
.w-8 {
  width: 2rem;
}
.w-\[500px\] {
  width: 500px;
}
.w-full {
  width: 100%;
}
.w-max {
  width: -moz-max-content;
  width: max-content;
}
.min-w-0 {
  min-width: 0px;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-\[1500px\] {
  max-width: 1500px;
}
.max-w-xl {
  max-width: 36rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.shrink-0 {
  flex-shrink: 0;
}
@keyframes pulse {

  50% {
    opacity: .5;
  }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes slide {

  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-50%);
  }
}
.animate-slide {
  animation: slide 20s linear infinite;
}
.cursor-pointer {
  cursor: pointer;
}
.list-inside {
  list-style-position: inside;
}
.list-decimal {
  list-style-type: decimal;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.flex-col {
  flex-direction: column;
}
.items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-\[12px\] {
  gap: 12px;
}
.gap-\[15px\] {
  gap: 15px;
}
.gap-\[20px\] {
  gap: 20px;
}
.gap-\[50px\] {
  gap: 50px;
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.break-all {
  word-break: break-all;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-\[100px\] {
  border-radius: 100px;
}
.rounded-\[14px\] {
  border-radius: 14px;
}
.rounded-\[20px\] {
  border-radius: 20px;
}
.rounded-\[24px\] {
  border-radius: 24px;
}
.rounded-\[40px\] {
  border-radius: 40px;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: 0.5rem;
}
.rounded-xl {
  border-radius: 0.75rem;
}
.border {
  border-width: 1px;
}
.border-2 {
  border-width: 2px;
}
.border-\[\#16b84e\] {
  --tw-border-opacity: 1;
  border-color: rgb(22 184 78 / var(--tw-border-opacity));
}
.border-\[\#2b2c2d\] {
  --tw-border-opacity: 1;
  border-color: rgb(43 44 45 / var(--tw-border-opacity));
}
.border-blue-600 {
  --tw-border-opacity: 1;
  border-color: rgb(37 99 235 / var(--tw-border-opacity));
}
.border-red-600 {
  --tw-border-opacity: 1;
  border-color: rgb(220 38 38 / var(--tw-border-opacity));
}
.border-white\/10 {
  border-color: rgb(255 255 255 / 0.1);
}
.border-white\/20 {
  border-color: rgb(255 255 255 / 0.2);
}
.bg-\[\#1b1c1d\]\/80 {
  background-color: rgb(27 28 29 / 0.8);
}
.bg-\[\#e1dbff\] {
  --tw-bg-opacity: 1;
  background-color: rgb(225 219 255 / var(--tw-bg-opacity));
}
.bg-base-100 {
  --tw-bg-opacity: 1;
  background-color: hsl(var(--b1) / var(--tw-bg-opacity));
}
.bg-blue-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
}
.bg-blue-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(30 58 138 / var(--tw-bg-opacity));
}
.bg-gray-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
}
.bg-gray-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
}
.bg-gray-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
}
.bg-green-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity));
}
.bg-purple-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(147 51 234 / var(--tw-bg-opacity));
}
.bg-red-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity));
}
.bg-red-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(127 29 29 / var(--tw-bg-opacity));
}
.bg-transparent {
  background-color: transparent;
}
.bg-white\/20 {
  background-color: rgb(255 255 255 / 0.2);
}
.bg-white\/5 {
  background-color: rgb(255 255 255 / 0.05);
}
.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.from-\[\#2a2a2a\]\/60 {
  --tw-gradient-from: rgb(42 42 42 / 0.6) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(42 42 42 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#ffbb33\] {
  --tw-gradient-from: #ffbb33 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 187 51 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#ffffff\]\/10 {
  --tw-gradient-from: rgb(255 255 255 / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#ffffff\]\/20 {
  --tw-gradient-from: rgb(255 255 255 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-transparent {
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-\[\#1a1a1a\]\/60 {
  --tw-gradient-to: rgb(26 26 26 / 0.6) var(--tw-gradient-to-position);
}
.to-\[\#e1dbff\] {
  --tw-gradient-to: #e1dbff var(--tw-gradient-to-position);
}
.to-\[\#e1dbff\]\/10 {
  --tw-gradient-to: rgb(225 219 255 / 0.1) var(--tw-gradient-to-position);
}
.p-1 {
  padding: 0.25rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-4 {
  padding: 1rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-8 {
  padding: 2rem;
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pr-24 {
  padding-right: 6rem;
}
.pt-4 {
  padding-top: 1rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-\[15px\] {
  font-size: 15px;
}
.text-\[16px\] {
  font-size: 16px;
}
.text-\[18px\] {
  font-size: 18px;
}
.text-\[20px\] {
  font-size: 20px;
}
.text-\[28px\] {
  font-size: 28px;
}
.text-\[30px\] {
  font-size: 30px;
}
.text-\[32px\] {
  font-size: 32px;
}
.text-\[40px\] {
  font-size: 40px;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-bold {
  font-weight: 700;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.italic {
  font-style: italic;
}
.leading-5 {
  line-height: 1.25rem;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.text-\[\#16b84e\] {
  --tw-text-opacity: 1;
  color: rgb(22 184 78 / var(--tw-text-opacity));
}
.text-\[\#e1dbff\] {
  --tw-text-opacity: 1;
  color: rgb(225 219 255 / var(--tw-text-opacity));
}
.text-\[\#e1dbff\]\/70 {
  color: rgb(225 219 255 / 0.7);
}
.text-\[\#e1dbff\]\/80 {
  color: rgb(225 219 255 / 0.8);
}
.text-\[\#ff5e00\] {
  --tw-text-opacity: 1;
  color: rgb(255 94 0 / var(--tw-text-opacity));
}
.text-\[\#ffffff\] {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.text-black {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity));
}
.text-blue-200 {
  --tw-text-opacity: 1;
  color: rgb(191 219 254 / var(--tw-text-opacity));
}
.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity));
}
.text-green-400 {
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity));
}
.text-red-200 {
  --tw-text-opacity: 1;
  color: rgb(254 202 202 / var(--tw-text-opacity));
}
.text-red-400 {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity));
}
.text-slate-200 {
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity));
}
.text-slate-300 {
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity));
}
.text-slate-400 {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.underline {
  text-decoration-line: underline;
}
.opacity-0 {
  opacity: 0;
}
.opacity-60 {
  opacity: 0.6;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_6px_16px_rgba\(0\2c 0\2c 0\2c 0\.35\)\] {
  --tw-shadow: 0 6px 16px rgba(0,0,0,0.35);
  --tw-shadow-colored: 0 6px 16px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[inset_0_1px_0_rgba\(255\2c 255\2c 255\2c 0\.04\)\2c 0_4px_14px_rgba\(0\2c 0\2c 0\2c 0\.2\)\] {
  --tw-shadow: inset 0 1px 0 rgba(255,255,255,0.04),0 4px 14px rgba(0,0,0,0.2);
  --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color), 0 4px 14px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.\!ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-white\/10 {
  --tw-ring-color: rgb(255 255 255 / 0.1);
}
.drop-shadow {
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  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);
}
.drop-shadow-\[0_2px_4px_rgba\(0\2c 0\2c 0\2c 0\.5\)\] {
  --tw-drop-shadow: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
  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);
}
.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);
}
.backdrop-blur-\[6px\] {
  --tw-backdrop-blur: blur(6px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.duration-500 {
  transition-duration: 500ms;
}
.duration-700 {
  transition-duration: 700ms;
}

/* Global font */
body {
  font-family: Poppins, sans-serif;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 100%;
  height: auto;
}

/* Smooth scrolling */
html {
  scroll-behavior: auto;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 100%;
  height: auto;
}

/* Custom scrollbar for webkit browsers */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  -webkit-transition: background 0.3s ease;
  transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* Petit Formal Script faqat maxsus joylarda ishlatish uchun */
.petit {
  font-family: 'Petit Formal Script', cursive;
}

/* Checker background - grid lines ko‘rinishida */
.bg-checker-lines {
  background-image: 
    linear-gradient(to right, rgba(0, 0, 0, 0.2) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 1px, transparent 1px);
  background-size: 40px 40px;
  background-color: transparent;
}
.hover\:bg-\[\#16b84e\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(22 184 78 / var(--tw-bg-opacity));
}
.hover\:bg-blue-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
}
.hover\:bg-green-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(21 128 61 / var(--tw-bg-opacity));
}
.hover\:bg-purple-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(126 34 206 / var(--tw-bg-opacity));
}
.hover\:bg-red-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / var(--tw-bg-opacity));
}
.hover\:bg-white\/20:hover {
  background-color: rgb(255 255 255 / 0.2);
}
.hover\:bg-opacity-90:hover {
  --tw-bg-opacity: 0.9;
}
.hover\:text-\[\#ff5e00\]:hover {
  --tw-text-opacity: 1;
  color: rgb(255 94 0 / var(--tw-text-opacity));
}
.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.hover\:shadow-xl:hover {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:ring-2:hover {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.hover\:ring-white\/20:hover {
  --tw-ring-color: rgb(255 255 255 / 0.2);
}
.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}
.group:hover .group-hover\:opacity-80 {
  opacity: 0.8;
}
@media (min-width: 640px) {

  .sm\:-mt-12 {
    margin-top: -3rem;
  }

  .sm\:ml-4 {
    margin-left: 1rem;
  }

  .sm\:mt-10 {
    margin-top: 2.5rem;
  }

  .sm\:h-14 {
    height: 3.5rem;
  }

  .sm\:h-9 {
    height: 2.25rem;
  }

  .sm\:h-\[92px\] {
    height: 92px;
  }

  .sm\:w-14 {
    width: 3.5rem;
  }

  .sm\:w-9 {
    width: 2.25rem;
  }

  .sm\:gap-\[20px\] {
    gap: 20px;
  }

  .sm\:space-y-6 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
  }

  .sm\:rounded-\[18px\] {
    border-radius: 18px;
  }

  .sm\:rounded-\[40px\] {
    border-radius: 40px;
  }

  .sm\:p-6 {
    padding: 1.5rem;
  }

  .sm\:p-8 {
    padding: 2rem;
  }

  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .sm\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .sm\:text-\[18px\] {
    font-size: 18px;
  }

  .sm\:text-\[56px\] {
    font-size: 56px;
  }

  .sm\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .sm\:leading-6 {
    line-height: 1.5rem;
  }
}
@media (min-width: 768px) {

  .md\:-mt-16 {
    margin-top: -4rem;
  }

  .md\:w-\[260px\] {
    width: 260px;
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:justify-center {
    justify-content: center;
  }

  .md\:gap-6 {
    gap: 1.5rem;
  }

  .md\:rounded-\[40px\] {
    border-radius: 40px;
  }

  .md\:px-7 {
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }
}
@media (min-width: 1024px) {

  .lg\:flex {
    display: flex;
  }

  .lg\:hidden {
    display: none;
  }
}
/* ====== Fon panjarasi ====== */
.bg-grid {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 40px 40px;
  background-color: #111;
  position: relative;
  overflow: hidden;
}

/* ====== Sahifa kirish/chiqish animatsiyasi ====== */
.page--start {
  transform: translateX(120%) skewY(-7deg);
}

.page--in {
  transform: translateX(0) skewY(0);
  transition: transform 0.8s ease-in-out;
}
.glow-blob {
  position: absolute;
  pointer-events: none;
  filter: blur(100px);
  opacity: 100%;
  transform-origin: 50% 50%;
  animation: rotateBlob linear infinite;
}

@keyframes rotateBlob {
  from { transform: skewY(-8deg) rotate(0deg);   }
  to   { transform: skewY(-8deg) rotate(360deg); }
}
.navbar {
    backdrop-filter: blur(25px) saturate(0%);
    -webkit-backdrop-filter: blur(25px) saturate(0%);
    background-color: rgba(17, 25, 40, 0.11);
    border-radius: 40px;
    border: 1px solid rgba(255, 255, 255, 0.125);
    padding: 0.75rem 1.5rem;
    margin: 1rem;
    transition: all 0.3s ease;
    position: relative; /* ensure dropdown anchors correctly */
    z-index: 5000;      /* stay above page content */
    overflow: visible;  /* allow dropdown to overflow */
}

.div{
    color: #e1dbff;
}

.nav-btn {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.nav-btn:hover{
    background-color: transparent;
    color: violet;
    border: 1px solid #e1dbff;
    transform: translateY(-1px);
}

/* SmartSoftGaming-style animated underline for nav links */
.nav-link {
    position: relative;
    display: inline-block;
    padding-bottom: 2px;
    transition: color 0.3s ease;
    font-size: 0.95rem;
}

/* Underline effect */
.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #ff5e00 0%, #e1dbff 100%);
    transition: width 0.4s ease;
}

.nav-link:hover::after {
    width: 100%;
}

.nav-logo {
    display: flex;
    align-items: center;
    padding-left: 0.5rem;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}

.nav-logo-img {
    width: 180px;
    height: 64px;
    display: block;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: left center;
       object-position: left center;
    filter: drop-shadow(0 0 10px rgba(225, 219, 255, 0.25));
}

.nav-burger {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    border-radius: 12px;
    background: rgba(10, 12, 18, 0.55);
    border: 1px solid rgba(225, 219, 255, 0.2);
    color: #e1dbff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.nav-burger:hover {
    background: rgba(30, 35, 55, 0.75);
    border-color: rgba(255, 94, 0, 0.5);
    transform: translateY(-1px);
}

.nav-burger:active {
    transform: translateY(0);
}

.nav-burger svg {
    width: 20px;
    height: 20px;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .navbar {
        border-radius: 30px;
        padding: 0.6rem 1.2rem;
        margin: 0.8rem;
    }
    
    .nav-link {
        font-size: 0.9rem;
        padding: 0.3rem 0.6rem;
    }
    
    .nav-btn {
        padding: 0.4rem 0.8rem;
        font-size: 0.85rem;
    }
}

@media (min-width: 1024px) {
    .nav-burger {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .nav-logo-img {
        width: 180px;
        height: 64px;
    }
}

@media (max-width: 768px) {
    .navbar {
        border-radius: 30px;
        padding: 0.6rem 1.2rem;
        margin: 0.8rem;
        flex-wrap: nowrap;           /* prevent layout break */
        justify-content: space-between;
        gap: 0.25rem;
    }
    
    .nav-link {
        font-size: 0.9rem;
        padding: 0.3rem 0.6rem;
    }
    
    .nav-btn {
        padding: 0.4rem 0.8rem;
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .navbar {
        border-radius: 30px;
        padding: 0.6rem 1.2rem;
        padding: 0.4rem 0.8rem;
        margin: 0.3rem;
        flex-direction: row;        /* keep row to avoid dropdown shift */
        align-items: center;
        gap: 0.25rem;
    }
    
    .nav-link {
        font-size: 0.8rem;
        padding: 0.2rem 0.4rem;
        margin: 0.05rem;
    }
    
    .nav-btn {
        padding: 0.35rem 0.6rem;
        font-size: 0.75rem;
        margin: 0.05rem;
        width: auto;
        min-width: 80px;
    }
    
    .nav-link::after {
        height: 1.5px;
    }
}


.login-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow-y: auto; /* Разрешаем вертикальную прокрутку внутри модала */
  overflow-x: hidden; /* Блокируем горизонтальную прокрутку */
  scroll-behavior: smooth; /* Плавный скролл */
  background:
    radial-gradient(140% 120% at 8% 15%, rgba(88, 166, 255, 0.16), rgba(10, 18, 32, 0)),
    radial-gradient(160% 140% at 90% 0%, rgba(0, 255, 136, 0.12), rgba(10, 18, 32, 0)),
    linear-gradient(160deg, #0c1c2a 0%, #0b1422 45%, #0a111c 100%),
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 42px 42px, 42px 42px;
  /* Полностью блокируем видимость основного контента */
  backdrop-filter: blur(0px);
  color: #e6edf3;
  font-family: 'Rajdhani', 'Segoe UI', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem;
  z-index: 9999;
  animation: slideInFromRight 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  isolation: isolate;
}

.login-overlay::before,
.login-overlay::after {
  content: '';
  position: fixed;
  inset: -10%;
  pointer-events: none;
  z-index: -1;
}

.login-overlay::before {
  background:
    radial-gradient(1.4px 1.4px at 40px 80px, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1.2px 1.2px at 200px 120px, rgba(200, 235, 255, 0.7), transparent),
    radial-gradient(1.8px 1.8px at 120px 220px, rgba(255, 255, 255, 0.4), transparent);
  background-size: 280px 320px, 340px 380px, 420px 460px;
  opacity: 0.5;
}

.login-overlay::after {
  background: radial-gradient(circle at 50% 0%, rgba(0, 255, 136, 0.12), transparent 60%);
}

/* Блокировка прокрутки body при открытом модале */

body.modal-open {
  overflow: hidden !important;
}

.login-overlay.closing {
  animation: slideOutToRight 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Exit left animation for login -> register transition */

.login-overlay.exit-left {
  animation: slideOutToLeft 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.login-overlay.exit-left-restart {
  animation: slideOutToLeftRestart 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Enter from right animation for register -> login transition */

.login-overlay.enter-from-right {
  animation: slideInFromRight 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.login-overlay.enter-from-right-restart {
  animation: slideInFromRightRestart 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Enter from left animation for register -> login transition */

.login-overlay.enter-from-left {
  animation: slideInFromLeft 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards !important;
}

.login-overlay.enter-from-left-restart {
  animation: slideInFromLeftRestart 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards !important;
}

@keyframes slideOutToRight {
  0% {
    transform: translateX(0) skewX(0deg);
    opacity: 1;
  }
  100% {
    transform: translateX(100%) skewX(-15deg);
    opacity: 0;
  }
}

@keyframes slideOutToLeft {
  0% {
    transform: translateX(0) skewX(0deg);
    opacity: 1;
  }
  100% {
    transform: translateX(-100%) skewX(15deg);
    opacity: 0;
  }
}

@keyframes slideOutToLeftRestart {
  0% {
    transform: translateX(0) skewX(0deg);
    opacity: 1;
  }
  100% {
    transform: translateX(-100%) skewX(15deg);
    opacity: 0;
  }
}

@keyframes slideInFromRight {
  0% {
    transform: translateX(100%) skewX(-15deg);
    opacity: 0;
  }
  50% {
    transform: translateX(20%) skewX(-8deg);
    opacity: 0.7;
  }
  100% {
    transform: translateX(0) skewX(0deg);
    opacity: 1;
  }
}

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%) skewX(15deg);
    opacity: 0;
  }
  50% {
    transform: translateX(-20%) skewX(8deg);
    opacity: 0.7;
  }
  100% {
    transform: translateX(0) skewX(0deg);
    opacity: 1;
  }
}

@keyframes slideInFromLeftRestart {
  0% {
    transform: translateX(-100%) skewX(15deg);
    opacity: 0;
  }
  50% {
    transform: translateX(-20%) skewX(8deg);
    opacity: 0.7;
  }
  100% {
    transform: translateX(0) skewX(0deg);
    opacity: 1;
  }
}

/* Login overlay on top of others */

.login-overlay.on-top {
  z-index: 10010;
}

/* Removed kirish and home text styles - no longer needed */

/* Login content animations */

.login-content {
  transition: opacity 0.5s ease-in;
}

.login-content.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(100%) skewX(-15deg);
}

.login-content.slide-in {
  animation: contentSlideIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.login-content.slide-out {
  animation: contentSlideOut 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes contentSlideOut {
  0% {
    opacity: 1;
    transform: translateX(0) skewX(0deg);
  }
  100% {
    opacity: 0;
    transform: translateX(-100%) skewX(15deg);
  }
}

@keyframes contentSlideIn {
  0% {
    opacity: 0;
    transform: translateX(100%) skewX(-15deg);
  }
  100% {
    opacity: 1;
    transform: translateX(0) skewX(0deg);
  }
}

.login-content.fade-in {
  opacity: 1;
  animation: fadeInUp 0.5s ease-out forwards;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.login-overlay .close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(10, 18, 32, 0.7);
  border: 1px solid rgba(125, 211, 252, 0.3);
  color: #7dd3fc;
  font-size: 1.3rem;
  cursor: pointer;
  opacity: 0.85;
  transition: all 0.2s ease;
  z-index: 10002;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-overlay .close-btn:hover {
  opacity: 1;
  border-color: rgba(125, 211, 252, 0.6);
  box-shadow: 0 8px 18px rgba(125, 211, 252, 0.2);
}

.login-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  min-height: 100vh;
  padding: 2.5rem 0;
  box-sizing: border-box;
  justify-content: center;
}

.login-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #e6edf3;
  margin-bottom: 1rem;
  width: min(520px, 90vw);
  justify-content: flex-start;
}

.login-logo .logo-icon {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #00ff88, #2ea043);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  box-shadow: 0 6px 16px rgba(0, 255, 136, 0.35);
}

.login-logo .logo-text {
  font-family: 'Orbitron', monospace;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 2.5px;
  color: #00ff88;
  text-shadow: 0 0 12px rgba(0, 255, 136, 0.45);
}

.login-form-container {
  background: linear-gradient(180deg, rgba(14, 22, 36, 0.96), rgba(10, 16, 26, 0.95));
  border: 1px solid rgba(125, 211, 252, 0.12);
  border-radius: 24px;
  padding: 2.6rem;
  width: 520px;
  max-width: 90vw;
  box-shadow:
    0 22px 45px rgba(0, 0, 0, 0.45),
    0 10px 30px rgba(16, 185, 129, 0.15);
  position: relative;
  z-index: 10001;
  margin-bottom: 3rem; /* Space below form so it doesn't stick to bottom */
  backdrop-filter: blur(10px);
}

.login-form-container::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.35), rgba(125, 211, 252, 0.2), rgba(0, 0, 0, 0));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.login-title {
  font-family: 'Orbitron', monospace;
  font-size: 2.1rem;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
  margin-bottom: 0.5rem;
  text-shadow: 0 0 18px rgba(0, 255, 136, 0.25);
}

.login-subtitle {
  color: #94a3b8;
  text-align: center;
  margin-bottom: 2rem;
  font-size: 0.98rem;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.login-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.login-form .form-group label {
  font-weight: 600;
  color: #cbd5e1;
  font-size: 0.95rem;
}

.login-form .form-group input {
  padding: 0.95rem 1.1rem;
  border: 1px solid rgba(125, 211, 252, 0.7);
  border-radius: 14px;
  font-size: 1rem;
  transition: all 0.2s;
  outline: none;
  background: rgba(7, 12, 20, 0.92);
  color: #e6edf3;
  font-weight: 600;
  box-shadow:
    inset 0 0 0 1px rgba(125, 211, 252, 0.28),
    0 0 0 1px rgba(2, 6, 12, 0.9);
}

.login-form .form-group input:hover {
  border-color: rgba(125, 211, 252, 0.95);
}

.login-form .form-group input:focus {
  box-shadow:
    0 0 0 2px rgba(0, 255, 136, 0.22),
    inset 0 0 0 1px rgba(0, 255, 136, 0.35);
  border-color: rgba(0, 255, 136, 0.8);
}

.login-form .form-group input::-moz-placeholder {
  color: #7b8795;
  opacity: 0.7;
}

.login-form .form-group input::placeholder {
  color: #7b8795;
  opacity: 0.7;
}

.password-input-container {
  position: relative;
  display: flex;
  align-items: center;
}

.password-input-container input {
  padding-right: 3rem !important;
  width: 100%;
}

.password-toggle {
  position: absolute;
  right: 0.9rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  color: #7dd3fc;
  opacity: 0.7;
  z-index: 1;
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0.5rem 0;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.remember-me {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: #94a3b8;
  cursor: pointer;
}

.login-form .form-group.remember {
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.login-form .form-group.remember label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  cursor: pointer;
}

.login-form .form-group.remember input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #00ff88;
  cursor: pointer;
}

.notification-banner {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 500;
  text-align: center;
  min-width: 320px;
  max-width: 500px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  animation: slideInFromTop 0.3s ease-out;
}

.notification-banner.error {
  background: rgba(255, 59, 48, 0.9);
  border: 1px solid #ff3b30;
  color: white;
}

.notification-banner.success {
  background: rgba(0, 255, 136, 0.9);
  border: 1px solid #00ff88;
  color: #003d1a;
}

@keyframes slideInFromTop {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.notification-banner.fading {
  opacity: 0;
  transform: translateX(-50%) translateY(-20px);
  transition: all 0.3s ease-out;
}

.forgot-password {
  color: #7dd3fc;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
}

.forgot-password:hover {
  color: #00ff88;
  text-decoration: none;
}

.login-btn {
  background: linear-gradient(120deg, #1f8a3a, #2ea043);
  color: #ffffff;
  border: 1px solid rgba(35, 134, 54, 0.75);
  padding: 0.875rem 1.5rem;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 0.5rem;
  width: 100%;
}

.login-btn:hover {
  background: linear-gradient(120deg, #2ea043, #1f8a3a);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(35, 134, 54, 0.35);
}

.google-btn {
  background: rgba(125, 211, 252, 0.08);
  border: 1px solid rgba(125, 211, 252, 0.22);
  padding: 0.875rem 1.5rem;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.2s;
  color: #e6edf3;
  width: 100%;
}

.google-btn:hover {
  background: rgba(125, 211, 252, 0.18);
  border-color: rgba(125, 211, 252, 0.5);
  transform: translateY(-1px);
}

.google-btn.loading {
  pointer-events: none;
}

.login-btn:disabled,
.google-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.google-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(125, 211, 252, 0.35);
  border-top-color: #7dd3fc;
  border-radius: 50%;
  animation: googleSpin 0.8s linear infinite;
}

.google-icon {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  -o-object-fit: contain;
     object-fit: contain;
}

@keyframes googleSpin {
  to {
    transform: rotate(360deg);
  }
}

.signup-link {
  text-align: center;
  color: #94a3b8;
  font-size: 0.9rem;
  margin-top: 1rem;
}

.signup-link a {
  color: #7dd3fc;
  text-decoration: none;
  font-weight: 600;
}

.signup-link a:hover {
  color: #00ff88;
  text-decoration: none;
}

/* Responsive */

@media (max-width: 768px) {
  .login-form-container {
    width: 360px;
    padding: 2rem;
  }
  
  .close-btn {
    top: 0.8rem;
    right: 0.8rem;
  }
}

@media (max-width: 480px) {
  .login-form-container {
    width: 300px;
    padding: 1.5rem;
  }
  
  .login-title {
    font-size: 1.5rem;
  }
}

@media (max-height: 720px) {
  .login-overlay {
    align-items: flex-start;
    padding-top: 2rem;
  }

  .login-content {
    min-height: auto;
    justify-content: flex-start;
  }
}
.notification {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 360px;
  max-width: 90%;
  padding: 0;
  border-radius: 16px;
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.15),
    0 8px 16px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  z-index: 20050;
  opacity: 0;
  transform: translateX(-50%) translateY(-30px) scale(0.9);
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  font-family: 'Rajdhani', sans-serif;
  will-change: transform, opacity;
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.notification::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  pointer-events: none;
}

.notification.notification-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
  animation: slideInBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.notification.notification-hide {
  opacity: 0;
  transform: translateX(-50%) translateY(-20px) scale(0.95);
  animation: slideOutSmooth 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Success notification */
.notification.success {
  background: linear-gradient(135deg, 
    rgba(16, 185, 129, 0.95) 0%, 
    rgba(5, 150, 105, 0.95) 50%,
    rgba(4, 120, 87, 0.95) 100%);
  border: 1px solid rgba(16, 185, 129, 0.3);
  box-shadow: 
    0 20px 40px rgba(16, 185, 129, 0.25),
    0 8px 16px rgba(16, 185, 129, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Error notification */
.notification.error {
  background: linear-gradient(135deg, 
    rgba(239, 68, 68, 0.95) 0%, 
    rgba(220, 38, 38, 0.95) 50%,
    rgba(185, 28, 28, 0.95) 100%);
  border: 1px solid rgba(239, 68, 68, 0.3);
  box-shadow: 
    0 20px 40px rgba(239, 68, 68, 0.25),
    0 8px 16px rgba(239, 68, 68, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Info notification */
.notification.info {
  background: linear-gradient(135deg, 
    rgba(59, 130, 246, 0.95) 0%, 
    rgba(37, 99, 235, 0.95) 50%,
    rgba(29, 78, 216, 0.95) 100%);
  border: 1px solid rgba(59, 130, 246, 0.3);
  box-shadow: 
    0 20px 40px rgba(59, 130, 246, 0.25),
    0 8px 16px rgba(59, 130, 246, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Warning notification */
.notification.warning {
  background: linear-gradient(135deg, 
    rgba(245, 158, 11, 0.95) 0%, 
    rgba(217, 119, 6, 0.95) 50%,
    rgba(180, 83, 9, 0.95) 100%);
  border: 1px solid rgba(245, 158, 11, 0.3);
  box-shadow: 
    0 20px 40px rgba(245, 158, 11, 0.25),
    0 8px 16px rgba(245, 158, 11, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.notification-content {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  position: relative;
  z-index: 1;
}

.notification-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 20px;
  font-weight: bold;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  animation: iconPulse 2s ease-in-out infinite;
}

.notification-message {
  flex: 1;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.notification-close {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
  flex-shrink: 0;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.notification-close:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
  transform: scale(1.1);
}

.notification-close:active {
  transform: scale(0.95);
}

/* Progress bar */
.notification-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 0 0 16px 16px;
  animation: progressBar 4s linear;
  transform-origin: left;
}

/* Animation keyframes */
@keyframes slideInBounce {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-40px) scale(0.8);
  }
  60% {
    opacity: 1;
    transform: translateX(-50%) translateY(5px) scale(1.05);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@keyframes slideOutSmooth {
  0% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-30px) scale(0.9);
  }
}

@keyframes iconPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0);
  }
}

@keyframes progressBar {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}

/* Glow effects */
.notification.success.notification-show {
  animation: slideInBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), 
             successGlow 2s ease-in-out 0.2s infinite alternate;
}

.notification.error.notification-show {
  animation: slideInBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), 
             errorGlow 2s ease-in-out 0.2s infinite alternate;
}

.notification.info.notification-show {
  animation: slideInBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), 
             infoGlow 2s ease-in-out 0.2s infinite alternate;
}

.notification.warning.notification-show {
  animation: slideInBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), 
             warningGlow 2s ease-in-out 0.2s infinite alternate;
}

@keyframes successGlow {
  0% { box-shadow: 0 20px 40px rgba(16, 185, 129, 0.25), 0 8px 16px rgba(16, 185, 129, 0.15); }
  100% { box-shadow: 0 25px 50px rgba(16, 185, 129, 0.35), 0 12px 24px rgba(16, 185, 129, 0.25); }
}

@keyframes errorGlow {
  0% { box-shadow: 0 20px 40px rgba(239, 68, 68, 0.25), 0 8px 16px rgba(239, 68, 68, 0.15); }
  100% { box-shadow: 0 25px 50px rgba(239, 68, 68, 0.35), 0 12px 24px rgba(239, 68, 68, 0.25); }
}

@keyframes infoGlow {
  0% { box-shadow: 0 20px 40px rgba(59, 130, 246, 0.25), 0 8px 16px rgba(59, 130, 246, 0.15); }
  100% { box-shadow: 0 25px 50px rgba(59, 130, 246, 0.35), 0 12px 24px rgba(59, 130, 246, 0.25); }
}

@keyframes warningGlow {
  0% { box-shadow: 0 20px 40px rgba(245, 158, 11, 0.25), 0 8px 16px rgba(245, 158, 11, 0.15); }
  100% { box-shadow: 0 25px 50px rgba(245, 158, 11, 0.35), 0 12px 24px rgba(245, 158, 11, 0.25); }
}

/* Responsive design */
@media (max-width: 480px) {
  .notification {
    min-width: 320px;
    max-width: 95%;
    top: 10px;
    border-radius: 12px;
  }
  
  .notification-content {
    padding: 16px 20px;
    gap: 12px;
  }
  
  .notification-message {
    font-size: 15px;
  }
  
  .notification-icon {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }
  
  .notification-close {
    width: 28px;
    height: 28px;
    font-size: 16px;
  }
}

@media (max-width: 320px) {
  .notification {
    min-width: 280px;
    top: 5px;
  }
  
  .notification-content {
    padding: 14px 16px;
    gap: 10px;
  }
  
  .notification-message {
    font-size: 14px;
  }
  
  .notification-icon {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }
}
.two-factor-login-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10100;
  backdrop-filter: blur(8px);
}

.two-factor-login-modal {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  border-radius: 24px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
  max-width: 480px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  animation: modalAppear 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalAppear {
  from {
    opacity: 0;
    transform: translateY(-40px) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.two-factor-login-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px 30px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.two-factor-login-header h3 {
  margin: 0;
  color: white;
  font-size: 1.4rem;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.two-factor-login-close {
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: white;
  font-size: 28px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  font-weight: 300;
}

.two-factor-login-close:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.1);
}

.two-factor-login-close:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.two-factor-login-content {
  padding: 30px;
}

.two-factor-login-info {
  text-align: center;
  margin-bottom: 30px;
}

.telegram-icon {
  font-size: 4rem;
  margin-bottom: 15px;
  animation: none;
  transform: none;
}

.two-factor-login-info h4 {
  margin: 0 0 10px 0;
  color: white;
  font-size: 1.3rem;
  font-weight: 600;
}

.two-factor-login-info p {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
  font-size: 1rem;
}

.two-factor-login-error {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
  padding: 15px 20px;
  border-radius: 12px;
  margin-bottom: 25px;
  font-weight: 500;
  text-align: center;
  border: 1px solid rgba(239, 68, 68, 0.3);
  animation: shake 0.5s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.code-input-container {
  margin-bottom: 25px;
}

.code-input-container label {
  display: block;
  color: white;
  font-weight: 600;
  margin-bottom: 15px;
  text-align: center;
  font-size: 1.1rem;
}

.code-inputs {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
}

.code-input {
  width: 50px;
  height: 60px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);
}

.code-input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

.code-input.error {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.2);
  animation: inputShake 0.3s ease-in-out;
}

@keyframes inputShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

.code-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.two-factor-login-timer {
  text-align: center;
  margin-bottom: 25px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  backdrop-filter: blur(10px);
}

.two-factor-login-timer p {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}

.timer {
  color: #22c55e;
  font-weight: 700;
  font-size: 1.1rem;
  font-family: 'Courier New', monospace;
}

.expired {
  color: #fbbf24 !important;
  font-weight: 600;
}

.two-factor-login-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 25px;
}

.btn-verify,
.btn-resend {
  padding: 14px 24px;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 1rem;
  position: relative;
  overflow: hidden;
}

.btn-verify {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

.btn-verify:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.5);
}

.btn-verify:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.2);
}

.btn-resend {
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.btn-resend:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}

.btn-resend.primary {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  border: none;
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

.btn-resend.primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.5);
}

.btn-resend:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.two-factor-login-help {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 20px;
  color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
}

.two-factor-login-help p {
  margin: 0 0 12px 0;
  font-weight: 600;
}

.two-factor-login-help ul {
  margin: 0;
  padding-left: 20px;
}

.two-factor-login-help li {
  margin-bottom: 8px;
  line-height: 1.4;
  font-size: 0.95rem;
}

/* Loading animation */
.btn-verify:disabled::after,
.btn-resend:disabled::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Responsive design */
@media (max-width: 768px) {
  .two-factor-login-modal {
    width: 95%;
    margin: 10px;
    border-radius: 20px;
  }
  
  .two-factor-login-header {
    padding: 20px 20px 15px;
  }
  
  .two-factor-login-header h3 {
    font-size: 1.2rem;
  }
  
  .two-factor-login-content {
    padding: 20px;
  }
  
  .telegram-icon {
    font-size: 3rem;
  }
  
  .code-inputs {
    gap: 8px;
  }
  
  .code-input {
    width: 45px;
    height: 55px;
    font-size: 1.6rem;
  }
  
  .two-factor-login-info h4 {
    font-size: 1.2rem;
  }
  
  .two-factor-login-info p {
    font-size: 0.95rem;
  }
}

@media (max-width: 480px) {
  .code-inputs {
    gap: 6px;
  }
  
  .code-input {
    width: 40px;
    height: 50px;
    font-size: 1.4rem;
  }
}

/* Dark theme compatibility */
@media (prefers-color-scheme: dark) {
  .two-factor-login-modal {
    background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
  }
}

/* Accessibility improvements */
.code-input:focus-visible {
  outline: 2px solid #22c55e;
  outline-offset: 2px;
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .code-input {
    border-width: 3px;
  }
  
  .btn-verify,
  .btn-resend {
    border: 2px solid currentColor;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .two-factor-login-modal,
  .telegram-icon,
  .code-input,
  .btn-verify,
  .btn-resend {
    animation: none;
    transition: none;
  }
  
  .btn-verify:hover:not(:disabled),
  .btn-resend:hover:not(:disabled) {
    transform: none;
  }
}

/* Registration page reuses login modal styles */
.login-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow-y: auto; /* Разрешаем вертикальную прокрутку внутри модала */
  overflow-x: hidden; /* Блокируем горизонтальную прокрутку */
  scroll-behavior: smooth; /* Плавный скролл */
  background:
    radial-gradient(140% 120% at 8% 15%, rgba(88, 166, 255, 0.16), rgba(10, 18, 32, 0)),
    radial-gradient(160% 140% at 90% 0%, rgba(0, 255, 136, 0.12), rgba(10, 18, 32, 0)),
    linear-gradient(160deg, #0c1c2a 0%, #0b1422 45%, #0a111c 100%),
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 42px 42px, 42px 42px;
  /* Полностью блокируем видимость основного контента */
  backdrop-filter: blur(0px);
  color: #e6edf3;
  font-family: 'Rajdhani', 'Segoe UI', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem;
  z-index: 9999;
  animation: slideInFromRight 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  isolation: isolate;
}
.login-overlay::before,
.login-overlay::after {
  content: '';
  position: fixed;
  inset: -10%;
  pointer-events: none;
  z-index: -1;
}
.login-overlay::before {
  background:
    radial-gradient(1.4px 1.4px at 40px 80px, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1.2px 1.2px at 200px 120px, rgba(200, 235, 255, 0.7), transparent),
    radial-gradient(1.8px 1.8px at 120px 220px, rgba(255, 255, 255, 0.4), transparent);
  background-size: 280px 320px, 340px 380px, 420px 460px;
  opacity: 0.5;
}
.login-overlay::after {
  background: radial-gradient(circle at 50% 0%, rgba(0, 255, 136, 0.12), transparent 60%);
}
/* Блокировка прокрутки body при открытом модале */
body.modal-open {
  overflow: hidden !important;
}
.login-overlay.closing {
  animation: slideOutToRight 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
/* Exit left animation for login -> register transition */
.login-overlay.exit-left {
  animation: slideOutToLeft 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.login-overlay.exit-left-restart {
  animation: slideOutToLeftRestart 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
/* Enter from right animation for register -> login transition */
.login-overlay.enter-from-right {
  animation: slideInFromRight 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.login-overlay.enter-from-right-restart {
  animation: slideInFromRightRestart 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
/* Enter from left animation for register -> login transition */
.login-overlay.enter-from-left {
  animation: slideInFromLeft 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards !important;
}
.login-overlay.enter-from-left-restart {
  animation: slideInFromLeftRestart 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards !important;
}
@keyframes slideOutToRight {
  0% {
    transform: translateX(0) skewX(0deg);
    opacity: 1;
  }
  100% {
    transform: translateX(100%) skewX(-15deg);
    opacity: 0;
  }
}
@keyframes slideOutToLeft {
  0% {
    transform: translateX(0) skewX(0deg);
    opacity: 1;
  }
  100% {
    transform: translateX(-100%) skewX(15deg);
    opacity: 0;
  }
}
@keyframes slideOutToLeftRestart {
  0% {
    transform: translateX(0) skewX(0deg);
    opacity: 1;
  }
  100% {
    transform: translateX(-100%) skewX(15deg);
    opacity: 0;
  }
}
@keyframes slideInFromRight {
  0% {
    transform: translateX(100%) skewX(-15deg);
    opacity: 0;
  }
  50% {
    transform: translateX(20%) skewX(-8deg);
    opacity: 0.7;
  }
  100% {
    transform: translateX(0) skewX(0deg);
    opacity: 1;
  }
}
@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%) skewX(15deg);
    opacity: 0;
  }
  50% {
    transform: translateX(-20%) skewX(8deg);
    opacity: 0.7;
  }
  100% {
    transform: translateX(0) skewX(0deg);
    opacity: 1;
  }
}
@keyframes slideInFromLeftRestart {
  0% {
    transform: translateX(-100%) skewX(15deg);
    opacity: 0;
  }
  50% {
    transform: translateX(-20%) skewX(8deg);
    opacity: 0.7;
  }
  100% {
    transform: translateX(0) skewX(0deg);
    opacity: 1;
  }
}
/* Login overlay on top of others */
.login-overlay.on-top {
  z-index: 10010;
}
/* Removed kirish and home text styles - no longer needed */
/* Login content animations */
.login-content {
  transition: opacity 0.5s ease-in;
}
.login-content.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(100%) skewX(-15deg);
}
.login-content.slide-in {
  animation: contentSlideIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.login-content.slide-out {
  animation: contentSlideOut 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes contentSlideOut {
  0% {
    opacity: 1;
    transform: translateX(0) skewX(0deg);
  }
  100% {
    opacity: 0;
    transform: translateX(-100%) skewX(15deg);
  }
}
@keyframes contentSlideIn {
  0% {
    opacity: 0;
    transform: translateX(100%) skewX(-15deg);
  }
  100% {
    opacity: 1;
    transform: translateX(0) skewX(0deg);
  }
}
.login-content.fade-in {
  opacity: 1;
  animation: fadeInUp 0.5s ease-out forwards;
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.login-overlay .close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(10, 18, 32, 0.7);
  border: 1px solid rgba(125, 211, 252, 0.3);
  color: #7dd3fc;
  font-size: 1.3rem;
  cursor: pointer;
  opacity: 0.85;
  transition: all 0.2s ease;
  z-index: 10002;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-overlay .close-btn:hover {
  opacity: 1;
  border-color: rgba(125, 211, 252, 0.6);
  box-shadow: 0 8px 18px rgba(125, 211, 252, 0.2);
}
.login-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  min-height: 100vh;
  padding: 2.5rem 0;
  box-sizing: border-box;
  justify-content: center;
}
.login-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #e6edf3;
  margin-bottom: 1rem;
  width: min(520px, 90vw);
  justify-content: flex-start;
}
.login-logo .logo-icon {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #00ff88, #2ea043);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  box-shadow: 0 6px 16px rgba(0, 255, 136, 0.35);
}
.login-logo .logo-text {
  font-family: 'Orbitron', monospace;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 2.5px;
  color: #00ff88;
  text-shadow: 0 0 12px rgba(0, 255, 136, 0.45);
}
.login-form-container {
  background: linear-gradient(180deg, rgba(14, 22, 36, 0.96), rgba(10, 16, 26, 0.95));
  border: 1px solid rgba(125, 211, 252, 0.12);
  border-radius: 24px;
  padding: 2.6rem;
  width: 520px;
  max-width: 90vw;
  box-shadow:
    0 22px 45px rgba(0, 0, 0, 0.45),
    0 10px 30px rgba(16, 185, 129, 0.15);
  position: relative;
  z-index: 10001;
  margin-bottom: 3rem; /* Space below form so it doesn't stick to bottom */
  backdrop-filter: blur(10px);
}
.login-form-container::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.35), rgba(125, 211, 252, 0.2), rgba(0, 0, 0, 0));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.login-title {
  font-family: 'Orbitron', monospace;
  font-size: 2.1rem;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
  margin-bottom: 0.5rem;
  text-shadow: 0 0 18px rgba(0, 255, 136, 0.25);
}
.login-subtitle {
  color: #94a3b8;
  text-align: center;
  margin-bottom: 2rem;
  font-size: 0.98rem;
}
.login-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.login-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.login-form .form-group label {
  font-weight: 600;
  color: #cbd5e1;
  font-size: 0.95rem;
}
.login-form .form-group input {
  padding: 0.95rem 1.1rem;
  border: 1px solid rgba(125, 211, 252, 0.7);
  border-radius: 14px;
  font-size: 1rem;
  transition: all 0.2s;
  outline: none;
  background: rgba(7, 12, 20, 0.92);
  color: #e6edf3;
  font-weight: 600;
  box-shadow:
    inset 0 0 0 1px rgba(125, 211, 252, 0.28),
    0 0 0 1px rgba(2, 6, 12, 0.9);
}
.login-form .form-group input:hover {
  border-color: rgba(125, 211, 252, 0.95);
}
.login-form .form-group input:focus {
  box-shadow:
    0 0 0 2px rgba(0, 255, 136, 0.22),
    inset 0 0 0 1px rgba(0, 255, 136, 0.35);
  border-color: rgba(0, 255, 136, 0.8);
}
.login-form .form-group input::-moz-placeholder {
  color: #7b8795;
  opacity: 0.7;
}
.login-form .form-group input::placeholder {
  color: #7b8795;
  opacity: 0.7;
}
.password-input-container {
  position: relative;
  display: flex;
  align-items: center;
}
.password-input-container input {
  padding-right: 3rem !important;
  width: 100%;
}
.password-toggle {
  position: absolute;
  right: 0.9rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  color: #7dd3fc;
  opacity: 0.7;
  z-index: 1;
}
.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0.5rem 0;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.remember-me {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: #94a3b8;
  cursor: pointer;
}
.login-form .form-group.remember {
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.login-form .form-group.remember label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  cursor: pointer;
}
.login-form .form-group.remember input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #00ff88;
  cursor: pointer;
}
.notification-banner {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 500;
  text-align: center;
  min-width: 320px;
  max-width: 500px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  animation: slideInFromTop 0.3s ease-out;
}
.notification-banner.error {
  background: rgba(255, 59, 48, 0.9);
  border: 1px solid #ff3b30;
  color: white;
}
.notification-banner.success {
  background: rgba(0, 255, 136, 0.9);
  border: 1px solid #00ff88;
  color: #003d1a;
}
@keyframes slideInFromTop {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}
.notification-banner.fading {
  opacity: 0;
  transform: translateX(-50%) translateY(-20px);
  transition: all 0.3s ease-out;
}
.forgot-password {
  color: #7dd3fc;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
}
.forgot-password:hover {
  color: #00ff88;
  text-decoration: none;
}
.login-btn {
  background: linear-gradient(120deg, #1f8a3a, #2ea043);
  color: #ffffff;
  border: 1px solid rgba(35, 134, 54, 0.75);
  padding: 0.875rem 1.5rem;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 0.5rem;
  width: 100%;
}
.login-btn:hover {
  background: linear-gradient(120deg, #2ea043, #1f8a3a);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(35, 134, 54, 0.35);
}
.google-btn {
  background: rgba(125, 211, 252, 0.08);
  border: 1px solid rgba(125, 211, 252, 0.22);
  padding: 0.875rem 1.5rem;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.2s;
  color: #e6edf3;
  width: 100%;
}
.google-btn:hover {
  background: rgba(125, 211, 252, 0.18);
  border-color: rgba(125, 211, 252, 0.5);
  transform: translateY(-1px);
}
.google-btn.loading {
  pointer-events: none;
}
.login-btn:disabled,
.google-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.google-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(125, 211, 252, 0.35);
  border-top-color: #7dd3fc;
  border-radius: 50%;
  animation: googleSpin 0.8s linear infinite;
}
.google-icon {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  -o-object-fit: contain;
     object-fit: contain;
}
@keyframes googleSpin {
  to {
    transform: rotate(360deg);
  }
}
.signup-link {
  text-align: center;
  color: #94a3b8;
  font-size: 0.9rem;
  margin-top: 1rem;
}
.signup-link a {
  color: #7dd3fc;
  text-decoration: none;
  font-weight: 600;
}
.signup-link a:hover {
  color: #00ff88;
  text-decoration: none;
}
/* Responsive */
@media (max-width: 768px) {
  .login-form-container {
    width: 360px;
    padding: 2rem;
  }
  
  .close-btn {
    top: 0.8rem;
    right: 0.8rem;
  }
}
@media (max-width: 480px) {
  .login-form-container {
    width: 300px;
    padding: 1.5rem;
  }
  
  .login-title {
    font-size: 1.5rem;
  }
}
@media (max-height: 720px) {
  .login-overlay {
    align-items: flex-start;
    padding-top: 2rem;
  }

  .login-content {
    min-height: auto;
    justify-content: flex-start;
  }
}
/* Override title if needed */
.login-title {
  font-size: 1.8rem;
}
/* Ensure smooth scrolling for registration overlay */
.login-overlay {
  scroll-behavior: smooth; /* Плавный скролл для регистрации */
  align-items: flex-start;
  padding-top: clamp(2rem, 6vh, 4rem);
  padding-bottom: 3rem;
}
.login-content {
  min-height: auto;
  padding: 0;
  gap: 1.5rem;
  justify-content: flex-start;
}
.login-form-container {
  margin-bottom: 2rem;
}
.register-form .form-group label {
  display: none;
}
/* Exit right animation for register -> login transition */
.login-overlay.exit-right {
  animation: slideOutToRight 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
/* Enter from right animation for login -> register transition */
.login-overlay.enter-from-right {
  animation: slideInFromRight 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}


.login-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow-y: auto; /* Разрешаем вертикальную прокрутку внутри модала */
  overflow-x: hidden; /* Блокируем горизонтальную прокрутку */
  scroll-behavior: smooth; /* Плавный скролл */
  background:
    radial-gradient(140% 120% at 8% 15%, rgba(88, 166, 255, 0.16), rgba(10, 18, 32, 0)),
    radial-gradient(160% 140% at 90% 0%, rgba(0, 255, 136, 0.12), rgba(10, 18, 32, 0)),
    linear-gradient(160deg, #0c1c2a 0%, #0b1422 45%, #0a111c 100%),
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 42px 42px, 42px 42px;
  /* Полностью блокируем видимость основного контента */
  backdrop-filter: blur(0px);
  color: #e6edf3;
  font-family: 'Rajdhani', 'Segoe UI', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem;
  z-index: 9999;
  animation: slideInFromRight 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  isolation: isolate;
}

.login-overlay::before,
.login-overlay::after {
  content: '';
  position: fixed;
  inset: -10%;
  pointer-events: none;
  z-index: -1;
}

.login-overlay::before {
  background:
    radial-gradient(1.4px 1.4px at 40px 80px, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1.2px 1.2px at 200px 120px, rgba(200, 235, 255, 0.7), transparent),
    radial-gradient(1.8px 1.8px at 120px 220px, rgba(255, 255, 255, 0.4), transparent);
  background-size: 280px 320px, 340px 380px, 420px 460px;
  opacity: 0.5;
}

.login-overlay::after {
  background: radial-gradient(circle at 50% 0%, rgba(0, 255, 136, 0.12), transparent 60%);
}

/* Блокировка прокрутки body при открытом модале */

body.modal-open {
  overflow: hidden !important;
}

.login-overlay.closing {
  animation: slideOutToRight 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Exit left animation for login -> register transition */

.login-overlay.exit-left {
  animation: slideOutToLeft 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.login-overlay.exit-left-restart {
  animation: slideOutToLeftRestart 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Enter from right animation for register -> login transition */

.login-overlay.enter-from-right {
  animation: slideInFromRight 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.login-overlay.enter-from-right-restart {
  animation: slideInFromRightRestart 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Enter from left animation for register -> login transition */

.login-overlay.enter-from-left {
  animation: slideInFromLeft 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards !important;
}

.login-overlay.enter-from-left-restart {
  animation: slideInFromLeftRestart 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards !important;
}

@keyframes slideOutToRight {
  0% {
    transform: translateX(0) skewX(0deg);
    opacity: 1;
  }
  100% {
    transform: translateX(100%) skewX(-15deg);
    opacity: 0;
  }
}

@keyframes slideOutToLeft {
  0% {
    transform: translateX(0) skewX(0deg);
    opacity: 1;
  }
  100% {
    transform: translateX(-100%) skewX(15deg);
    opacity: 0;
  }
}

@keyframes slideOutToLeftRestart {
  0% {
    transform: translateX(0) skewX(0deg);
    opacity: 1;
  }
  100% {
    transform: translateX(-100%) skewX(15deg);
    opacity: 0;
  }
}

@keyframes slideInFromRight {
  0% {
    transform: translateX(100%) skewX(-15deg);
    opacity: 0;
  }
  50% {
    transform: translateX(20%) skewX(-8deg);
    opacity: 0.7;
  }
  100% {
    transform: translateX(0) skewX(0deg);
    opacity: 1;
  }
}

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%) skewX(15deg);
    opacity: 0;
  }
  50% {
    transform: translateX(-20%) skewX(8deg);
    opacity: 0.7;
  }
  100% {
    transform: translateX(0) skewX(0deg);
    opacity: 1;
  }
}

@keyframes slideInFromLeftRestart {
  0% {
    transform: translateX(-100%) skewX(15deg);
    opacity: 0;
  }
  50% {
    transform: translateX(-20%) skewX(8deg);
    opacity: 0.7;
  }
  100% {
    transform: translateX(0) skewX(0deg);
    opacity: 1;
  }
}

/* Login overlay on top of others */

.login-overlay.on-top {
  z-index: 10010;
}

/* Removed kirish and home text styles - no longer needed */

/* Login content animations */

.login-content {
  transition: opacity 0.5s ease-in;
}

.login-content.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(100%) skewX(-15deg);
}

.login-content.slide-in {
  animation: contentSlideIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.login-content.slide-out {
  animation: contentSlideOut 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes contentSlideOut {
  0% {
    opacity: 1;
    transform: translateX(0) skewX(0deg);
  }
  100% {
    opacity: 0;
    transform: translateX(-100%) skewX(15deg);
  }
}

@keyframes contentSlideIn {
  0% {
    opacity: 0;
    transform: translateX(100%) skewX(-15deg);
  }
  100% {
    opacity: 1;
    transform: translateX(0) skewX(0deg);
  }
}

.login-content.fade-in {
  opacity: 1;
  animation: fadeInUp 0.5s ease-out forwards;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.login-overlay .close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(10, 18, 32, 0.7);
  border: 1px solid rgba(125, 211, 252, 0.3);
  color: #7dd3fc;
  font-size: 1.3rem;
  cursor: pointer;
  opacity: 0.85;
  transition: all 0.2s ease;
  z-index: 10002;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-overlay .close-btn:hover {
  opacity: 1;
  border-color: rgba(125, 211, 252, 0.6);
  box-shadow: 0 8px 18px rgba(125, 211, 252, 0.2);
}

.login-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  min-height: 100vh;
  padding: 2.5rem 0;
  box-sizing: border-box;
  justify-content: center;
}

.login-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #e6edf3;
  margin-bottom: 1rem;
  width: min(520px, 90vw);
  justify-content: flex-start;
}

.login-logo .logo-icon {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #00ff88, #2ea043);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  box-shadow: 0 6px 16px rgba(0, 255, 136, 0.35);
}

.login-logo .logo-text {
  font-family: 'Orbitron', monospace;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 2.5px;
  color: #00ff88;
  text-shadow: 0 0 12px rgba(0, 255, 136, 0.45);
}

.login-form-container {
  background: linear-gradient(180deg, rgba(14, 22, 36, 0.96), rgba(10, 16, 26, 0.95));
  border: 1px solid rgba(125, 211, 252, 0.12);
  border-radius: 24px;
  padding: 2.6rem;
  width: 520px;
  max-width: 90vw;
  box-shadow:
    0 22px 45px rgba(0, 0, 0, 0.45),
    0 10px 30px rgba(16, 185, 129, 0.15);
  position: relative;
  z-index: 10001;
  margin-bottom: 3rem; /* Space below form so it doesn't stick to bottom */
  backdrop-filter: blur(10px);
}

.login-form-container::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.35), rgba(125, 211, 252, 0.2), rgba(0, 0, 0, 0));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.login-title {
  font-family: 'Orbitron', monospace;
  font-size: 2.1rem;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
  margin-bottom: 0.5rem;
  text-shadow: 0 0 18px rgba(0, 255, 136, 0.25);
}

.login-subtitle {
  color: #94a3b8;
  text-align: center;
  margin-bottom: 2rem;
  font-size: 0.98rem;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.login-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.login-form .form-group label {
  font-weight: 600;
  color: #cbd5e1;
  font-size: 0.95rem;
}

.login-form .form-group input {
  padding: 0.95rem 1.1rem;
  border: 1px solid rgba(125, 211, 252, 0.7);
  border-radius: 14px;
  font-size: 1rem;
  transition: all 0.2s;
  outline: none;
  background: rgba(7, 12, 20, 0.92);
  color: #e6edf3;
  font-weight: 600;
  box-shadow:
    inset 0 0 0 1px rgba(125, 211, 252, 0.28),
    0 0 0 1px rgba(2, 6, 12, 0.9);
}

.login-form .form-group input:hover {
  border-color: rgba(125, 211, 252, 0.95);
}

.login-form .form-group input:focus {
  box-shadow:
    0 0 0 2px rgba(0, 255, 136, 0.22),
    inset 0 0 0 1px rgba(0, 255, 136, 0.35);
  border-color: rgba(0, 255, 136, 0.8);
}

.login-form .form-group input::-moz-placeholder {
  color: #7b8795;
  opacity: 0.7;
}

.login-form .form-group input::placeholder {
  color: #7b8795;
  opacity: 0.7;
}

.password-input-container {
  position: relative;
  display: flex;
  align-items: center;
}

.password-input-container input {
  padding-right: 3rem !important;
  width: 100%;
}

.password-toggle {
  position: absolute;
  right: 0.9rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  color: #7dd3fc;
  opacity: 0.7;
  z-index: 1;
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0.5rem 0;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.remember-me {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: #94a3b8;
  cursor: pointer;
}

.login-form .form-group.remember {
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.login-form .form-group.remember label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  cursor: pointer;
}

.login-form .form-group.remember input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #00ff88;
  cursor: pointer;
}

.notification-banner {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 500;
  text-align: center;
  min-width: 320px;
  max-width: 500px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  animation: slideInFromTop 0.3s ease-out;
}

.notification-banner.error {
  background: rgba(255, 59, 48, 0.9);
  border: 1px solid #ff3b30;
  color: white;
}

.notification-banner.success {
  background: rgba(0, 255, 136, 0.9);
  border: 1px solid #00ff88;
  color: #003d1a;
}

@keyframes slideInFromTop {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.notification-banner.fading {
  opacity: 0;
  transform: translateX(-50%) translateY(-20px);
  transition: all 0.3s ease-out;
}

.forgot-password {
  color: #7dd3fc;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
}

.forgot-password:hover {
  color: #00ff88;
  text-decoration: none;
}

.login-btn {
  background: linear-gradient(120deg, #1f8a3a, #2ea043);
  color: #ffffff;
  border: 1px solid rgba(35, 134, 54, 0.75);
  padding: 0.875rem 1.5rem;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 0.5rem;
  width: 100%;
}

.login-btn:hover {
  background: linear-gradient(120deg, #2ea043, #1f8a3a);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(35, 134, 54, 0.35);
}

.google-btn {
  background: rgba(125, 211, 252, 0.08);
  border: 1px solid rgba(125, 211, 252, 0.22);
  padding: 0.875rem 1.5rem;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.2s;
  color: #e6edf3;
  width: 100%;
}

.google-btn:hover {
  background: rgba(125, 211, 252, 0.18);
  border-color: rgba(125, 211, 252, 0.5);
  transform: translateY(-1px);
}

.google-btn.loading {
  pointer-events: none;
}

.login-btn:disabled,
.google-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.google-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(125, 211, 252, 0.35);
  border-top-color: #7dd3fc;
  border-radius: 50%;
  animation: googleSpin 0.8s linear infinite;
}

.google-icon {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  -o-object-fit: contain;
     object-fit: contain;
}

@keyframes googleSpin {
  to {
    transform: rotate(360deg);
  }
}

.signup-link {
  text-align: center;
  color: #94a3b8;
  font-size: 0.9rem;
  margin-top: 1rem;
}

.signup-link a {
  color: #7dd3fc;
  text-decoration: none;
  font-weight: 600;
}

.signup-link a:hover {
  color: #00ff88;
  text-decoration: none;
}

/* Responsive */

@media (max-width: 768px) {
  .login-form-container {
    width: 360px;
    padding: 2rem;
  }
  
  .close-btn {
    top: 0.8rem;
    right: 0.8rem;
  }
}

@media (max-width: 480px) {
  .login-form-container {
    width: 300px;
    padding: 1.5rem;
  }
  
  .login-title {
    font-size: 1.5rem;
  }
}

@media (max-height: 720px) {
  .login-overlay {
    align-items: flex-start;
    padding-top: 2rem;
  }

  .login-content {
    min-height: auto;
    justify-content: flex-start;
  }
}

/* Поверх всех наложений */

.login-overlay.on-top {
  z-index: 10020 !important;
}

/* Заголовок */

.login-title {
  font-size: 1.6rem;
}

/* Гарантируем интерактивность формы */

.login-content,
.login-form-container,
.login-form,
.form-group,
.login-form input,
.login-form button {
  pointer-events: auto !important;
}

/* Дополнительно: включаем события для всех потомков внутри контента */

.login-overlay.on-top .login-content,
.login-overlay.on-top .login-content * {
  pointer-events: auto !important;
}

/* Поднимаем форму над любыми декоративными слоями и баннерами */

.login-content {
  position: relative;
  z-index: 10040; /* выше notification-banner (10000) и прочих */
}

.login-form-container {
  position: relative;
  z-index: 10050;
}

/* Декоративные тексты не должны перехватывать клики */

.kirish-text,
.home-text {
  pointer-events: none !important;
  z-index: 0;
}

/* ensure disabled code input looks dimmed */

input[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Ограничим область кнопки закрытия, чтобы она не перекрывала контент */

.close-btn {
  width: 36px;
  height: 36px;
}
@keyframes blink {
  0%, 50% { opacity: 1; }
  50.1%, 100% { opacity: 0; }
}
.caret {
  display: inline-block;
  margin-left: 2px;
  animation: blink 1s steps(1) infinite;
}

/** SLIDE ANIMATION **/
/* Disable auto slide on mobile to avoid duplicate-looking loop */
@keyframes slide {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.animate-slide { animation: slide 30s linear infinite; }
/* Mobile animation enabled: previously disabled to avoid loop duplication */
/* Force animation to run in case something paused it */
.animate-slide { animation-play-state: running !important; }

/** SLIDER MASK **/
.slider-mask {
  overflow-x: auto; /* allow swipe scroll on mobile */
  overflow-y: hidden;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
          mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-mode: alpha;
          mask-mode: alpha;
}

/* Lift override removed; use Tailwind margins on wrapper and only adjust h1 as needed */

/* hide scrollbar but keep scrollability */
.slider-mask::-webkit-scrollbar { height: 0 !important; width: 0 !important; background: transparent; }
.slider-mask { scrollbar-width: none; }

/** GLASS CONTAINER **/
.asosiy-div {
  backdrop-filter: blur(18px) saturate(0%);
  -webkit-backdrop-filter: blur(18px) saturate(0%);
  background: rgba(17, 25, 40, 0.11);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.125);
  padding: 1rem;
  margin: 1rem;
  /* margin-top override removed to avoid sticking to navbar */
  transition: all 0.3s ease;
}

/** EDITION PILL **/
.edition-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 0;
}

.edition-pill__inner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.9rem;
  width: 150px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 9999px;
  backdrop-filter: blur(8px);
  background: radial-gradient(
    145% 145% at 30% 25%,
    rgba(255, 255, 255, 0.10) 0%,
    rgba(255, 255, 255, 0.02) 40%,
    rgba(255, 255, 255, 0.00) 70%
  );
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    inset 0 0 4px rgba(255, 255, 255, 0.15),
          0 4px 8px rgba(0, 0, 0, 0.55);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  outline: none;
}

/** HOVER & SELECTED **/
.edition-pill:hover .edition-pill__inner,
.edition-pill:focus-visible .edition-pill__inner,
.edition-pill.selected .edition-pill__inner {
  transform: scale(1.06);
  box-shadow:
    inset 0 0 6px rgba(255, 255, 255, 0.20),
          0 6px 12px rgba(0, 0, 0, 0.65);
  z-index: 10;
  cursor: pointer;
}

/** OUTLINE UTILITY **/
.outline {
  outline: 1.3px solid #2b2c2d;
}
/* Intro heading */
.intro-section {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
}

.intro-heading {
  font-size: clamp(3rem, 8vw, 10rem);
  font-weight: 800;
  color: #e1dbff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  pointer-events: none;
}

.horizontal-scroll-wrapper {
  height: 100vh;
  overflow: visible; /* fix clipped shadows */
  background: transparent;
  position: relative;
}

.horizontal-scroll-container {
  display: flex;
  height: 100vh;
  will-change: transform;
  overflow: visible; /* allow card shadows to render fully */
}

.cards-wrapper {
  display: flex;
  gap: 0;
  padding: 0;
  align-items: center;
  height: 100%;
}

.horizontal-section {
  width: 100vw;
  height: 100vh;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.horizontal-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: var(--section-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.1;
  z-index: -2;
}

.feature-card {
  width: 80vw;
  max-width: 800px;
  height: 60vh;
  min-height: 400px;
  backdrop-filter: blur(25px) saturate(0%);
  -webkit-backdrop-filter: blur(25px) saturate(0%);
  background-color: rgba(17, 25, 40, 0.11);
  border-radius: 40px;
  border: 1px solid rgba(255, 255, 255, 0.125);
  padding: 3rem;
  text-align: left;
  position: relative;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: visible; /* do not clip inner glows */
  
  /* Запрет выделения текста */
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  
  /* Улучшенный эффект наклона */
  transform-style: preserve-3d;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}





.feature-gif {
  position: absolute;
  top: 2rem;
  right: 2rem;
  width: 120px;
  height: 120px;
  border-radius: 20px;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0.9;
  transition: opacity 0.3s ease;
}

.feature-title {
  font-size: 3rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.3;
  margin: 0 0 2rem 0;
  text-align: left;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
}

.feature-description {
  font-size: 1.4rem;
  line-height: 1.6;
  color: #ffffff;
  text-align: left;
  margin: 0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
}

.section-content {
  text-align: center;
  position: relative;
  padding: 3rem 4rem;
  backdrop-filter: blur(25px) saturate(0%);
  -webkit-backdrop-filter: blur(25px) saturate(0%);
  background-color: rgba(17, 25, 40, 0.11);
  border-radius: 40px;
  border: 1px solid rgba(255, 255, 255, 0.125);
  min-width: 600px;
  transition: all 0.3s ease;
  transform: translateY(0);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
  animation: pulseGlow 3s ease-in-out infinite;
}

.section-text {
  font-size: 5rem;
  font-weight: 700;
  color: #e1dbff;
  line-height: 1.2;
  margin: 0;
  text-align: center;
}

/* Glow border only effect */
.feature-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 40px;
  padding: 0.7px; /* border thickness */
  background: linear-gradient(130deg, #ffffff 0%, #ffffff 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude; /* For Firefox */
  pointer-events: none;
  animation: glowPulse 6s ease-in-out infinite;
}

@keyframes glowPulse {
  0%,100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

/* Responsive design */
@media (max-width: 768px) {
  .cards-wrapper {
    gap: 20px;
    padding: 0 30px;
  }
  
  .feature-card {
    width: 340px;
    height: 300px;
    padding: 2rem;
  }
  
  .feature-icon {
    width: 60px;
    height: 60px;
    font-size: 2rem;
    margin-bottom: 2rem;
  }
  
  .feature-title {
    font-size: 1.5rem;
    margin-bottom: 0.8rem;
  }
  
  .feature-description {
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  .cards-wrapper {
    gap: 15px;
    padding: 0 20px;
  }
  
  .feature-card {
    width: 260px;
    height: 220px;
    padding: 1.2rem;
  }
  
  .feature-icon {
    width: 35px;
    height: 35px;
    font-size: 1rem;
    margin-bottom: 0.8rem;
  }
  
  .feature-title {
    font-size: 1rem;
    margin-bottom: 0.6rem;
  }
  
  .feature-description {
    font-size: 0.75rem;
    line-height: 1.4;
  }
}
/* Animated Sticker Component Styles */

.animated-sticker-container {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  /* Ensure canvas doesn't cause layout shift */
  overflow: hidden;
}

.animated-sticker-gif {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
  margin: 0 auto;
  border-radius: 0; /* no rounding to avoid square glow edge */
  transition: all 0.3s ease;
  /* No base shadow to avoid rectangular halo on semi-transparent canvases */
  filter: brightness(0.98) saturate(1.12);
  background: transparent; /* prevent square background */
  position: relative;
  z-index: 0;
}

/* Loading State */
.animated-sticker-gif[src=""] {
  opacity: 0;
}

.animated-sticker-gif:not([src=""]) {
  opacity: 1;
  transition: opacity 0.3s ease;
}

.sticker-fallback-emoji {
  font-size: inherit;
  display: none;
}

/* Hover Effects */
.animated-sticker-container:hover {
  transform: scale(1.1);
}

.animated-sticker-container:hover .animated-sticker-gif {
  filter: brightness(1.08) saturate(1.25);
  transform: scale(1.05);
}

/* Playing Animation State */
.animated-sticker-container.playing {
  /* remove box-shadow based pulses */
}

.animated-sticker-container.playing .animated-sticker-gif {
  filter: brightness(1.15) saturate(1.35);
}

/* Has Hovered State (for subtle indication that sticker is interactive) */
.animated-sticker-container.has-hovered {
  position: relative;
}

.animated-sticker-container.has-hovered::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 10px;
  background: linear-gradient(45deg, #238636, #2ea043, #40d05a, #238636);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s ease;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  padding: 2px; /* show only border, not full fill */
}

.animated-sticker-container.has-hovered:hover::after {
  opacity: 0.25;
}

/* Navigation Button Integration */
.nav-item .animated-sticker-container {
  width: 30px;
  height: 30px;
  margin-right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  /* Prevent layout shift in navbar */
  flex-shrink: 0;
}

.nav-item:hover .animated-sticker-container {
  transform: scale(1.2);
}

/* Stat Card Integration */
.stat-icon .animated-sticker-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-card:hover .stat-icon .animated-sticker-container {
  transform: scale(1.02);
}

/* Balance Card Integration */
.balance-card-icon .animated-sticker-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Canvas overlay styles for frozen frames */
canvas[data-sticker-canvas="1"] {
  pointer-events: none;
  border-radius: 0;
  background: transparent;
}

/* Mobile Optimizations */
@media (max-width: 768px) {
  .animated-sticker-container:hover {
    transform: scale(1.05);
  }
  
  .animated-sticker-container:hover .animated-sticker-gif {
    transform: scale(1.02);
  }
  
  .nav-item .animated-sticker-container {
    width: 28px;
    height: 28px;
    margin-right: 0;
    justify-content: center;
    align-items: center;
  }
}

/* Accessibility - Reduce motion if preferred */
@media (prefers-reduced-motion: reduce) {
  .animated-sticker-container,
  .animated-sticker-gif {
    transition: none;
    animation: none;
  }
  
  .animated-sticker-container:hover {
    transform: none;
  }
  
  .animated-sticker-container.playing {
    animation: none;
  }
}
/* New Server Tariff Cards Styles */
.new-server-section {
  padding: 12px 20px 20px;
  max-width: 1200px;
  margin: 0 auto;
  margin-top: 0;
  /* Main page accent palette */
  --accent-main: #ff5e00;   /* orange */
  --accent-alt2: #ff2a6d;   /* pink */
  --accent-alt:  #a855f7;   /* purple */
}

.new-server-section h2 {
  color: #e1dbff;
  font-size: 2rem;
  margin-bottom: 20px;
  font-weight: 600;
}

/* Layout tweaks for main page section */
.new-server-section .tariff-plans-grid {
  grid-template-columns: repeat(5, minmax(280px, 1fr));
  gap: 20px;
  justify-content: center;
}

@media (max-width: 1600px) {
  .new-server-section .tariff-plans-grid {
    grid-template-columns: repeat(4, minmax(260px, 1fr));
    gap: 24px;
  }
}

@media (max-width: 1200px) {
  .new-server-section .tariff-plans-grid {
    grid-template-columns: repeat(3, minmax(280px, 1fr));
    gap: 28px;
  }
}

@media (max-width: 900px) {
  .new-server-section .tariff-plans-grid {
    grid-template-columns: repeat(2, minmax(300px, 1fr));
    gap: 24px;
  }
}

@media (max-width: 650px) {
  .new-server-section .tariff-plans-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* Use unique colors for each tariff type */
.new-server-section .tariff-proxy::before {
  background: linear-gradient(90deg, #ff3a3a, #ff912b, #ff6b6b);
}

.new-server-section .tariff-mini::before {
  background: linear-gradient(90deg, #2dfff1, #22ff90, #4ecdc4);
}

.new-server-section .tariff-standard::before {
  background: linear-gradient(90deg, #2294ff, #00e7b9, #45b7d1);
}

.new-server-section .tariff-pro::before {
  background: linear-gradient(90deg, #fbff00, #ff6600, #f9ca24);
}

.new-server-section .tariff-ultimate::before {
  background: linear-gradient(90deg, #6e15ff, #ff00ff, #a55eea);
}

/* Proxy tariff colors */
.new-server-section .tariff-proxy:hover {
  border-color: rgba(255, 58, 58, 0.35);
  box-shadow: 0 10px 30px rgba(255, 58, 58, 0.18);
}

.new-server-section .tariff-proxy.selected {
  border-color: #ff3a3a;
  background: linear-gradient(135deg, rgba(255, 58, 58, 0.1) 0%, rgba(45, 45, 45, 0.9) 50%);
}

.new-server-section .tariff-proxy .tariff-price {
  color: #ff3a3a;
  text-shadow: 0 0 10px rgba(255, 58, 58, 0.5);
}

.new-server-section .tariff-proxy .tariff-select-btn:not(:disabled) {
  background: linear-gradient(135deg, #ff3a3a, #ff912b);
  color: #fff;
}

.new-server-section .tariff-proxy .tariff-select-btn:not(:disabled):hover {
  background: linear-gradient(135deg, #ff912b, #ff3a3a);
  box-shadow: 0 6px 20px rgba(255, 58, 58, 0.35);
}

/* Mini tariff colors */
.new-server-section .tariff-mini:hover {
  border-color: rgba(45, 255, 241, 0.35);
  box-shadow: 0 10px 30px rgba(45, 255, 241, 0.18);
}

.new-server-section .tariff-mini.selected {
  border-color: #2dfff1;
  background: linear-gradient(135deg, rgba(45, 255, 241, 0.1) 0%, rgba(45, 45, 45, 0.9) 50%);
}

.new-server-section .tariff-mini .tariff-price {
  color: #2dfff1;
  text-shadow: 0 0 10px rgba(45, 255, 241, 0.5);
}

.new-server-section .tariff-mini .tariff-select-btn:not(:disabled) {
  background: linear-gradient(135deg, #2dfff1, #22ff90);
  color: #000;
}

.new-server-section .tariff-mini .tariff-select-btn:not(:disabled):hover {
  background: linear-gradient(135deg, #22ff90, #2dfff1);
  box-shadow: 0 6px 20px rgba(45, 255, 241, 0.35);
}

/* Standard tariff colors */
.new-server-section .tariff-standard:hover {
  border-color: rgba(34, 148, 255, 0.35);
  box-shadow: 0 10px 30px rgba(34, 148, 255, 0.18);
}

.new-server-section .tariff-standard.selected {
  border-color: #2294ff;
  background: linear-gradient(135deg, rgba(34, 148, 255, 0.1) 0%, rgba(45, 45, 45, 0.9) 50%);
}

.new-server-section .tariff-standard .tariff-price {
  color: #2294ff;
  text-shadow: 0 0 10px rgba(34, 148, 255, 0.5);
}

.new-server-section .tariff-standard .tariff-select-btn:not(:disabled) {
  background: linear-gradient(135deg, #2294ff, #00e7b9);
  color: #fff;
}

.new-server-section .tariff-standard .tariff-select-btn:not(:disabled):hover {
  background: linear-gradient(135deg, #00e7b9, #2294ff);
  box-shadow: 0 6px 20px rgba(34, 148, 255, 0.35);
}

/* Pro tariff colors */
.new-server-section .tariff-pro:hover {
  border-color: rgba(251, 255, 0, 0.35);
  box-shadow: 0 10px 30px rgba(251, 255, 0, 0.18);
}

.new-server-section .tariff-pro.selected {
  border-color: #fbff00;
  background: linear-gradient(135deg, rgba(251, 255, 0, 0.1) 0%, rgba(45, 45, 45, 0.9) 50%);
}

.new-server-section .tariff-pro .tariff-price {
  color: #fbff00;
  text-shadow: 0 0 10px rgba(251, 255, 0, 0.5);
}

.new-server-section .tariff-pro .tariff-select-btn:not(:disabled) {
  background: linear-gradient(135deg, #fbff00, #ff6600);
  color: #000;
}

.new-server-section .tariff-pro .tariff-select-btn:not(:disabled):hover {
  background: linear-gradient(135deg, #ff6600, #fbff00);
  box-shadow: 0 6px 20px rgba(251, 255, 0, 0.35);
}

/* Ultimate tariff colors */
.new-server-section .tariff-ultimate:hover {
  border-color: rgba(110, 21, 255, 0.35);
  box-shadow: 0 10px 30px rgba(110, 21, 255, 0.18);
}

.new-server-section .tariff-ultimate.selected {
  border-color: #6e15ff;
  background: linear-gradient(135deg, rgba(110, 21, 255, 0.1) 0%, rgba(45, 45, 45, 0.9) 50%);
}

.new-server-section .tariff-ultimate .tariff-price {
  color: #6e15ff;
  text-shadow: 0 0 10px rgba(110, 21, 255, 0.5);
}

.new-server-section .tariff-ultimate .tariff-select-btn:not(:disabled) {
  background: linear-gradient(135deg, #6e15ff, #ff00ff);
  color: #fff;
}

/* Price info button styles */
.tariff-price-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.price-info-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.info-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #6c757d;
  color: #6c757d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  border: 1px solid #6c757d;
}

.new-server-section .tariff-ultimate .tariff-select-btn:not(:disabled):hover {
  background: linear-gradient(135deg, #ff00ff, #6e15ff);
  box-shadow: 0 6px 20px rgba(110, 21, 255, 0.35);
}

.new-server-section .tariff-name {
  left: -5px;
  top: 15zpx;
  font-size: 1.85rem;
}

/* Add inner spacing to avoid hugging */
.new-server-section .tariff-card {
  padding-top: 16px;
}

.new-server-section .tariff-header {
  height: 76px;
}

.new-server-section .tariff-image {
  width: 120px;
  height: 120px;
  right: -10px;
  top: -10px;
  opacity: 0.25;
}

/* Unique spec colors for each tariff type */
.new-server-section .tariff-proxy .spec-value {
  color: #ff912b;
  text-shadow: 0 0 8px rgba(255, 145, 43, 0.25);
}

.new-server-section .tariff-proxy .spec-fill {
  background: linear-gradient(90deg, #ff3a3a, #ff912b);
}

.new-server-section .tariff-mini .spec-value {
  color: #22ff90;
  text-shadow: 0 0 8px rgba(34, 255, 144, 0.25);
}

.new-server-section .tariff-mini .spec-fill {
  background: linear-gradient(90deg, #2dfff1, #22ff90);
}

.new-server-section .tariff-standard .spec-value {
  color: #00e7b9;
  text-shadow: 0 0 8px rgba(0, 231, 185, 0.25);
}

.new-server-section .tariff-standard .spec-fill {
  background: linear-gradient(90deg, #2294ff, #00e7b9);
}

.new-server-section .tariff-pro .spec-value {
  color: #ff6600;
  text-shadow: 0 0 8px rgba(255, 102, 0, 0.25);
}

.new-server-section .tariff-pro .spec-fill {
  background: linear-gradient(90deg, #fbff00, #ff6600);
}

.new-server-section .tariff-ultimate .spec-value {
  color: #ff00ff;
  text-shadow: 0 0 8px rgba(255, 0, 255, 0.25);
}

.new-server-section .tariff-ultimate .spec-fill {
  background: linear-gradient(90deg, #6e15ff, #ff00ff);
}

.server-creation-form {
  margin-bottom: 30px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.server-creation-form h3 {
  color: #e1dbff;
  margin-bottom: 15px;
  font-size: 1.3rem;
  font-weight: 500;
}

.server-name-input {
  width: 100%;
  max-width: 400px;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #e1dbff;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.3s ease;
}

.server-name-input:focus {
  border-color: #00ff88;
}

.server-name-input::-moz-placeholder {
  color: rgba(225, 219, 255, 0.5);
}

.server-name-input::placeholder {
  color: rgba(225, 219, 255, 0.5);
}

/* Tariff Plans Grid */
.tariff-plans-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 50px;
}

/* Individual Tariff Card */
.tariff-card {
  background: linear-gradient(135deg, rgba(45, 45, 45, 0.9) 0%, rgba(30, 30, 35, 0.95) 100%);
  border-radius: 16px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  padding: 0 24px 24px 24px;
  position: relative;
  transition: all 0.3s ease;
  cursor: default; /* Remove pointer cursor from card */
  overflow: hidden;
  min-height: 192px;
}

.tariff-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #00ff88, #00d4aa, #00b8ff);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tariff-card:hover {
  border-color: rgba(0, 255, 136, 0.3);
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 255, 136, 0.15);
}

.tariff-card:hover::before {
  opacity: 1;
}

.tariff-card.selected {
  border-color: #00ff88;
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.1) 0%, rgba(45, 45, 45, 0.9) 50%);
}

.tariff-card.selected::before {
  opacity: 1;
}

/* Tariff Header */
.tariff-header {
  position: relative;
  margin-bottom: 24px;
  height: 64px;
}

.tariff-image {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 150px;
  height: 150px;
  border-radius: 16px;
  overflow: hidden;
  opacity: 1;
  z-index: 1;
}

.tariff-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  filter: brightness(1.2);
}

.tariff-name {
  position: absolute;
  top: 10px;
  left: -7px;
  font-size: 1.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  z-index: 2;
  margin: 0;
  display: inline-block;
  background: repeating-linear-gradient(90deg,var(--c1) 0%, var(--c2) 50%, var(--c1) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: neonSlide 2s linear infinite;
}

/* Per-tariff gradient color variables */
.tariff-proxy {
  --c1: #ff3a3a; /* red */
  --c2: #ff912b; /* orange */
}

.tariff-mini {
  --c1: #2dfff1; /* teal */
  --c2: #22ff90; /* green */
}

.tariff-standard {
  --c1: #2294ff; /* light blue */
  --c2: #00e7b9; /* aqua */
}

.tariff-pro {
  --c1: #fbff00; /* yellow */
  --c2: #ff6600; /* deep orange */
}

.tariff-ultimate {
  --c1: #6e15ff; /* purple */
  --c2: #ff00ff; /* light purple */
}

@keyframes neonSlide {
  0% { background-position: 0 0; }
  100% { background-position: -200% 0; }
}


@keyframes flowingProxy {
  0% { 
    color: #ff6b6b;
    text-shadow: 0 0 10px #ff6b6b, 0 0 20px #ff6b6b, 0 0 30px #ff6b6b;
  }
  50% { 
    color: #ff9f43;
    text-shadow: 0 0 10px #ff9f43, 0 0 20px #ff9f43, 0 0 30px #ff9f43;
  }
  100% { 
    color: #ff6b6b;
    text-shadow: 0 0 10px #ff6b6b, 0 0 20px #ff6b6b, 0 0 30px #ff6b6b;
  }
}

@keyframes flowingMini {
  0% { 
    color: #4ecdc4;
    text-shadow: 0 0 10px #4ecdc4, 0 0 20px #4ecdc4, 0 0 30px #4ecdc4;
  }
  50% { 
    color: #26de81;
    text-shadow: 0 0 10px #26de81, 0 0 20px #26de81, 0 0 30px #26de81;
  }
  100% { 
    color: #4ecdc4;
    text-shadow: 0 0 10px #4ecdc4, 0 0 20px #4ecdc4, 0 0 30px #4ecdc4;
  }
}

@keyframes flowingStandard {
  0% { 
    color: #45b7d1;
    text-shadow: 0 0 10px #45b7d1, 0 0 20px #45b7d1, 0 0 30px #45b7d1;
  }
  50% { 
    color: #74b9ff;
    text-shadow: 0 0 10px #74b9ff, 0 0 20px #74b9ff, 0 0 30px #74b9ff;
  }
  100% { 
    color: #45b7d1;
    text-shadow: 0 0 10px #45b7d1, 0 0 20px #45b7d1, 0 0 30px #45b7d1;
  }
}

@keyframes flowingPro {
  0% { 
    color: #f9ca24;
    text-shadow: 0 0 10px #f9ca24, 0 0 20px #f9ca24, 0 0 30px #f9ca24;
  }
  50% { 
    color: #f0932b;
    text-shadow: 0 0 10px #f0932b, 0 0 20px #f0932b, 0 0 30px #f0932b;
  }
  100% { 
    color: #f9ca24;
    text-shadow: 0 0 10px #f9ca24, 0 0 20px #f9ca24, 0 0 30px #f9ca24;
  }
}

@keyframes flowingUltimate {
  0% { 
    color: #a55eea;
    text-shadow: 0 0 10px #a55eea, 0 0 20px #a55eea, 0 0 30px #a55eea;
  }
  50% { 
    color: #fd79a8;
    text-shadow: 0 0 10px #fd79a8, 0 0 20px #fd79a8, 0 0 30px #fd79a8;
  }
  100% { 
    color: #a55eea;
    text-shadow: 0 0 10px #a55eea, 0 0 20px #a55eea, 0 0 30px #a55eea;
  }
}

.tariff-price-container {
  position: absolute;
  top: 42px;
  left: -5px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 2;
}

.tariff-price {
  color: #00ff88;
  font-size: 2rem;
  font-weight: 800;
  display: flex;
  align-items: baseline;
  gap: 4px;
  text-shadow: 0 0 10px #00ff88;
}

.tariff-price .currency {
  font-size: 1.2rem;
  color: rgba(225, 219, 255, 0.9);
  font-weight: 500;
  text-shadow: 0 0 5px rgba(225, 219, 255, 0.5);
}

.price-info-btn {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #6c757d;
  border: 1px solid #6c757d;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 4px;
}

.price-info-btn:hover {
  background: #6c757d;
  transform: scale(1.1);
}

.info-icon {
  color: #ffffff;
  font-size: 12px;
  font-weight: bold;
  font-style: italic;
}

.price-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 8px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  pointer-events: none;
  z-index: 1000;
}

.price-info-btn:hover .price-tooltip {
  opacity: 1;
  visibility: visible;
}

.tooltip-content {
  background: rgba(0, 0, 0, 0.9);
  border: 1px solid #00ff88;
  border-radius: 8px;
  padding: 12px;
  min-width: 200px;
  box-shadow: 0 4px 20px rgba(0, 255, 136, 0.3);
  backdrop-filter: blur(10px);
}

.hourly-rate {
  color: #00ff88;
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 8px;
  text-shadow: 0 0 5px #00ff88;
}

.payment-info {
  color: rgba(225, 219, 255, 0.9);
  font-size: 12px;
  line-height: 1.4;
}

.tooltip-content::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #00ff88;
}

/* Tariff Specifications */
.tariff-specs {
  position: relative;
  z-index: 3;
  margin-bottom: 20px;
}

.spec-item {
  z-index: 3;
  display: flex;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  position: relative;
  transition: all 0.2s ease;
}

.spec-item:hover {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  padding-left: 8px;
  padding-right: 8px;
}

.spec-item:last-child {
  border-bottom: none;
}

.spec-icon {
  width: 45px;
  height: 45px;
  margin-right: 8px;
  margin-left: -8px;
  opacity: 1;
  filter: brightness(1.1);
}

.spec-label {
  color: #e1dbff;
  font-size: 1rem;
  font-weight: 600;
  flex: 1;
  min-width: 0;
  letter-spacing: 0.5px;
}

.spec-value {
  color: #00fff2;
  font-weight: 700;
  font-size: 1.1rem;
  min-width: 70px;
  text-align: right;
  text-shadow: 0 0 8px rgba(0, 47, 255, 0.3);
}

/* CPU Progress Bar */
.spec-bar {
  width: 80px;
  height: 8px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 4px;
  margin: 0 12px;
  position: relative;
  overflow: hidden;
}

.spec-fill {
  height: 100%;
  background: linear-gradient(90deg, #00ff88, #00d4aa);
  border-radius: 4px;
  transition: width 0.8s ease;
  position: relative;
}

.spec-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* Tariff Features */
.tariff-features {
  display: none;
  margin-bottom: 24px;
}

.feature {
  color: rgba(225, 219, 255, 0.9);
  font-size: 1.1rem;
  margin-bottom: 8px;
  padding-left: 20px;
  position: relative;
  line-height: 1.4;
}

.feature:last-child {
  margin-bottom: 0;
}

/* Select Button */
.tariff-select-btn {
  width: 100%;
  padding: 14px 20px;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer !important;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
  pointer-events: auto !important;
  z-index: 10;
}

.tariff-select-btn:not(:disabled) {
  background: linear-gradient(135deg, #00ff88, #00d4aa);
  color: #000;
  opacity: 1 !important;
}

.tariff-select-btn:not(:disabled):hover {
  background: linear-gradient(135deg, #00d4aa, #00ff88);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 255, 136, 0.3);
}

.tariff-select-btn.selected {
  background: linear-gradient(135deg, #ff6b35, #ff8f65);
  color: white;
}

.tariff-select-btn:disabled {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(225, 219, 255, 0.5);
  cursor: not-allowed;
  opacity: 1 !important;
}

/* Create Server Action */
.create-server-action {
  text-align: center;
  padding: 30px 0;
  border-top: 2px solid rgba(255, 255, 255, 0.1);
  margin-top: 30px;
}

.btn.primary.large {
  padding: 16px 40px;
  font-size: 1.2rem;
  font-weight: 700;
  background: linear-gradient(135deg, #00ff88, #00d4aa);
  color: #000;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.btn.primary.large:hover {
  background: linear-gradient(135deg, #00d4aa, #00ff88);
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 255, 136, 0.4);
}

/* Responsive Design */
@media (max-width: 768px) {
  .tariff-plans-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .tariff-card {
    padding: 20px;
  }
  
  .tariff-name {
    font-size: 1.3rem;
  }
  
  .tariff-price {
    font-size: 1.5rem;
  }
  
  .spec-label {
    font-size: 1.1rem;
  }
  
  .feature {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .new-server-section {
    padding: 12px 12px 16px;
  }
  
  .tariff-card {
    padding: 16px;
  }
  
  .tariff-image {
    width: 60px;
    height: 60px;
  }
  
  .spec-bar {
    width: 60px;
  }
}
.faq-section {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 4rem 1rem;
}

.faq-title {
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 3rem;
  color: #ffffff;
  position: relative;
}
.faq-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1rem;
  width: 80px;
  height: 4px;
  background: #ff8c00;
  transform: translateX(-50%);
  border-radius: 2px;
}

.faq-item {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  margin-bottom: 1.25rem;
  overflow: hidden;
  transition: border-color 0.25s ease;
}
.faq-item.open {
  border-color: #ff8c00;
}

.faq-question {
  width: 100%;
  padding: 0.75rem 1rem;
  background: none;
  border: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.95rem;
  font-weight: 600;
  color: #ffffff;
  cursor: pointer;
}
.faq-icon {
  font-size: 1.25rem;
  margin-left: 1rem;
  color: #ff8c00;
  transition: transform 0.3s ease, color 0.3s ease;
}
.faq-item.open .faq-icon {
  color: #ff8c00;
  transform: rotate(90deg);
}

.faq-answer {
  max-height: 0;
  opacity: 0;
  transition: all 0.35s ease;
  padding: 0 1.5rem;
}
.faq-item.open .faq-answer {
  max-height: 400px;
  opacity: 1;
  padding: 0 1.5rem 1.25rem;
}

.faq-answer p {
  color: #d6d9e0;
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 768px) {
  .faq-title {
    font-size: 1.5rem;
  }
  .faq-question {
    font-size: 1rem;
  }
}
.footer-section {
  width: 100%;
  padding: 1.5rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
  color: #d6d9e0;
}

/* === Subscribe card === */
.subscribe-card {
  width: 100%;
  max-width: 1100px;
  background: rgba(15, 15, 15, 0.9);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 2rem 2.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.5rem;
}

.subscribe-text {
  flex: 1 1 300px;
}
.subscribe-title {
  font-size: 2rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.75rem;
}
.subscribe-desc {
  max-width: 380px;
  font-size: 0.95rem;
  line-height: 1.6;
}

.subscribe-form {
  flex: 1 1 280px;
  display: flex;
  gap: 1rem;
  align-items: center;
}
.subscribe-input {
  flex: 1;
  padding: 0.9rem 1.2rem;
  border-radius: 9999px;
  border: none;
  outline: none;
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
  font-size: 1rem;
}
.subscribe-input::-moz-placeholder {
  color: #c4c4c4;
}
.subscribe-input::placeholder {
  color: #c4c4c4;
}
.subscribe-btn {
  padding: 0.9rem 1.8rem;
  border: none;
  border-radius: 9999px;
  background: linear-gradient(90deg, #ff8c00 0%, #ffa733 100%);
  font-weight: 600;
  color: #111;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.subscribe-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

/* === Links section === */
.footer-links {
  width: 100%;
  max-width: 1100px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2rem;
}
.footer-brand {
  flex: 1 1 220px;
}
.brand-name {
  font-size: 1.6rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.5rem;
}
.brand-tag {
  font-size: 0.9rem;
  line-height: 1.4;
}
.link-columns {
  flex: 2 1 420px;
  display: flex;
  justify-content: space-between;
  gap: 2rem;
}
.link-col {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.link-title {
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 0.4rem;
}
.link-col a {
  font-size: 0.9rem;
  color: #d6d9e0;
  text-decoration: none;
  transition: color 0.25s ease;
}
.link-col a:hover {
  color: #ff8c00;
}
.link-text {
  font-size: 0.9rem;
  color: #d6d9e0;
}

.payment-method {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.payment-icon {
  width: 72px;
  height: auto;
  display: block;
  -o-object-fit: contain;
     object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(255, 140, 0, 0.25));
}

.footer-meta {
  width: 100%;
  max-width: 1100px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-copy {
  font-size: 0.85rem;
  color: #aeb4c1;
}

/* === Socials === */
.footer-socials {
  margin-top: 2rem;
  display: flex;
  gap: 1.5rem;
}
.footer-socials a {
  display: inline-flex;
}
.footer-socials svg {
  transition: transform 0.25s ease;
}
.footer-socials a:hover svg {
  transform: translateY(-3px);
}

@media (max-width: 768px) {
  .subscribe-card {
    padding: 2rem;
  }
  .subscribe-title {
    font-size: 1.6rem;
  }
  .link-columns {
    flex-direction: column;
    gap: 1.5rem;
  }
  .footer-meta {
    justify-content: center;
    text-align: center;
  }
}
.scroll-to-top-btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  z-index: 1000;
  
  /* Glass/blur background matching site style */
  backdrop-filter: blur(25px) saturate(0%);
  -webkit-backdrop-filter: blur(25px) saturate(0%);
  background-color: rgba(17, 25, 40, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  
  /* Icon styling */
  color: #e1dbff;
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Subtle glow effect */
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
  
  /* Smooth transitions */
  transition: all 0.3s ease;
}

.scroll-to-top-btn:hover {
  /* Enhanced hover effects */
  background-color: rgba(17, 25, 40, 0.25);
  border: 1px solid rgba(255, 94, 0, 0.4);
  box-shadow: 0 0 30px rgba(255, 94, 0, 0.2);
  color: #ff5e00;
  transform: translateY(-2px) scale(1.05);
}

.scroll-to-top-btn:active {
  /* Click effect */
  transform: translateY(0) scale(0.95);
  box-shadow: 0 0 15px rgba(255, 94, 0, 0.3);
}

.scroll-to-top-btn svg {
  width: 24px;
  height: 24px;
  transition: transform 0.3s ease;
}

.scroll-to-top-btn:hover svg {
  transform: translateY(-1px);
}

/* Responsive design */
@media (max-width: 768px) {
  .scroll-to-top-btn {
    width: 50px;
    height: 50px;
    bottom: 20px;
    right: 20px;
  }
  
  .scroll-to-top-btn svg {
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 480px) {
  .scroll-to-top-btn {
    width: 45px;
    height: 45px;
    bottom: 15px;
    right: 15px;
  }
  
  .scroll-to-top-btn svg {
    width: 18px;
    height: 18px;
  }
}
/* Announcement Banner Styles */
.announcement-banner {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 24px;
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
  animation: slideInFromTop 0.5s ease-out;
}

.announcement-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
  pointer-events: none;
}

.banner-content {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 1;
}

.banner-icon {
  font-size: 24px;
  animation: pulse 2s infinite;
  flex-shrink: 0;
}

.banner-text {
  flex: 1;
  min-width: 0;
}

.banner-title {
  color: white;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.banner-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  flex-wrap: wrap;
}

.banner-date,
.banner-views,
.banner-author {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.banner-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.banner-indicators {
  display: flex;
  gap: 6px;
  align-items: center;
}

.indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.3s ease;
}

.indicator.active {
  background: white;
  transform: scale(1.2);
}

.indicator:hover {
  background: rgba(255, 255, 255, 0.7);
  transform: scale(1.1);
}

.banner-close {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.banner-close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

/* Animations */
@keyframes slideInFromTop {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .announcement-banner {
    padding: 12px 16px;
    margin-bottom: 16px;
  }

  .banner-content {
    gap: 12px;
  }

  .banner-icon {
    font-size: 20px;
  }

  .banner-title {
    font-size: 14px;
  }

  .banner-meta {
    font-size: 11px;
    gap: 8px;
  }

  .banner-actions {
    gap: 8px;
  }

  .banner-close {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .announcement-banner {
    padding: 10px 12px;
  }

  .banner-content {
    gap: 10px;
  }

  .banner-title {
    font-size: 13px;
  }

  .banner-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .banner-indicators {
    gap: 4px;
  }

  .indicator {
    width: 6px;
    height: 6px;
  }
}

/* Dark theme support */
@media (prefers-color-scheme: dark) {
  .announcement-banner {
    background: linear-gradient(135deg, #4c63d2 0%, #5a4fcf 100%);
    box-shadow: 0 4px 20px rgba(76, 99, 210, 0.4);
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .announcement-banner {
    background: #2563eb;
    border: 2px solid #1d4ed8;
  }

  .banner-title {
    font-weight: 700;
  }

  .banner-close {
    background: rgba(255, 255, 255, 0.9);
    color: #2563eb;
  }
}

* {
  box-sizing: border-box;
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: #00ff88 transparent;
}

/* WebKit (Chrome, Edge, Opera) */

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #00ff88 0%, #00cc6a 100%);
  border-radius: 6px;
  box-shadow: 0 0 8px rgba(0, 255, 136, 0.6);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #00ff88 0%, #00ff88 100%);
}

.dashboard-container {
  display: grid;
  grid-template-rows: auto 1fr; /* высота navbar = auto, контент = всё остальное */
  height: 100vh;               /* фиксированная высота экрана */
  overflow: hidden;            /* убираем основной скроллер страницы */
  position: relative;
  isolation: isolate;
  background: 
    radial-gradient(120% 120% at 15% 20%, rgba(122, 199, 255, 0.08), rgba(11, 23, 41, 0)),
    radial-gradient(140% 140% at 85% 0%, rgba(103, 196, 255, 0.12), rgba(9, 16, 30, 0)),
    linear-gradient(145deg, #0b1524 0%, #0e1c33 48%, #0a1424 100%);
  color: #e8f5ff;
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  animation: fadeIn 0.8s ease-out;
}

.dashboard-container.winter-mode .dashboard-header {
  background: rgba(8, 16, 30, 0.82);
  border-bottom: none;
  box-shadow: 0 12px 40px rgba(7, 17, 33, 0.45);
}

.dashboard-container.winter-mode .dashboard-nav {
  background: rgba(10, 20, 36, 0.78);
  border-bottom: none;
  box-shadow: 0 10px 30px rgba(7, 17, 33, 0.35);
}

.dashboard-container.winter-mode .nav-item {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(125, 211, 252, 0.3);
  color: #e8f5ff;
}

.dashboard-container.winter-mode .nav-item:hover {
  background: rgba(173, 232, 255, 0.08);
  border-color: rgba(173, 232, 255, 0.5);
}

.dashboard-container.winter-mode .nav-item.active {
  background: linear-gradient(120deg, #4bb1ff, #9ad6ff);
  color: #0b1728;
  box-shadow: 0 8px 25px rgba(75, 177, 255, 0.4);
}

.dashboard-container.winter-mode .dashboard-main {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
  border-top: 1px solid rgba(125, 211, 252, 0.05);
}

/* Переопределяем глобальные стили для dashboard */

body:has(.dashboard-container) {
  overflow: hidden !important;
}

html:has(.dashboard-container) {
  overflow: hidden !important;
}

.dashboard-header {
  position: sticky; /* или fixed, если нужно "прилипание" */
  top: 0;
  z-index: 1000;
  background: rgba(22, 27, 34, 0.95);
  border-bottom: none;
  margin-bottom: 0; /* избегаем визуальной щели под хедером */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
}

/* Dashboard Navigation */

.dashboard-nav {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 35px 20px 20px; /* увеличенный зазор сверху для опускания кнопок */
  background: rgba(22, 27, 34, 0.95);
  border-bottom: none;
  flex-wrap: wrap;
  position: relative; /* управляется фиксированным .dashboard-header */
  margin-top: 0;
  overflow: visible; /* не обрезаем верх рамки при hover */
}

.nav-item {
  background: rgba(35, 134, 54, 0.1);
  border: 1px solid #238636;
  color: #7dd3fc;
  padding: 10px 15px;
  border-radius: 8px;
  cursor: pointer !important;
  transition: all 0.3s ease;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  overflow: visible; /* avoid clipping of active highlight */
  justify-content: center;
  pointer-events: auto !important;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.nav-item:hover {
  background: rgba(35, 134, 54, 0.2);
  border-color: #2ea043;
  transform: translateY(-2px);
}

.nav-item.active {
  background: linear-gradient(45deg, #238636, #2ea043);
  color: white;
  box-shadow: 0 4px 15px rgba(35, 134, 54, 0.3);
}

.nav-item.nav-item-disabled {
  opacity: 0.45;
  cursor: not-allowed !important;
  box-shadow: none;
  transform: none;
}

.nav-item.nav-item-disabled:hover {
  transform: none;
  box-shadow: none;
}

/* Dashboard Main Content */

.dashboard-main {
  min-height: 0; /* позволяет контенту сжиматься в grid */
  overflow: auto; /* скроллинг только внутри основного контента */
  padding: 30px;
  padding-top: calc(35px + 20px + 20px + 44px + 10px); /* компенсация высоты navbar */
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}

.ban-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin: 12px 16px 0;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(31, 41, 55, 0.9), rgba(15, 23, 42, 0.9));
  border: 1px solid rgba(248, 113, 113, 0.4);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(248, 113, 113, 0.12);
}

.ban-banner-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.ban-gif {
  width: 72px;
  height: 72px;
  -o-object-fit: contain;
     object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(248, 113, 113, 0.35));
}

.ban-banner-title {
  font-weight: 800;
  color: #f87171;
  font-size: 16px;
}

.ban-banner-reason {
  color: #e2e8f0;
  font-size: 14px;
}

.ban-banner-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ban-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 6, 12, 0.92);
  backdrop-filter: blur(4px);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.ban-card {
  background: linear-gradient(145deg, #111827, #0b1624);
  border: 1px solid rgba(248, 113, 113, 0.4);
  border-radius: 18px;
  padding: 24px;
  max-width: 720px;
  width: 100%;
  text-align: center;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.45);
}

.ban-card h3 {
  color: #fca5a5;
  margin: 12px 0 6px;
  font-size: 22px;
}

.ban-reason {
  color: #e5e7eb;
  margin: 6px 0 10px;
  font-size: 15px;
}

.ban-hint {
  color: #94a3b8;
  font-size: 14px;
  margin: 0;
}

.ban-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 14px;
}

.loading {
  position: relative;
  text-align: center;
  font-size: 18px;
  color: #7dd3fc;
  padding: 40px 20px;
  overflow: hidden;
  border-radius: 12px;
  background: radial-gradient(circle at 20% 20%, rgba(125, 211, 252, 0.08), transparent 40%),
    radial-gradient(circle at 80% 0%, rgba(46, 160, 67, 0.08), transparent 42%),
    rgba(12, 17, 23, 0.75);
}

.loading::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.2px 1.2px at 20px 30px, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1.4px 1.4px at 60px 10px, rgba(200, 235, 255, 0.8), transparent),
    radial-gradient(1.6px 1.6px at 110px 50px, rgba(255, 255, 255, 0.7), transparent);
  background-size: 140px 180px, 160px 220px, 200px 260px;
  animation: snowLoader 6s linear infinite;
  opacity: 0.75;
}

@keyframes snowLoader {
  0% { background-position: 0 0, 0 0, 0 0; }
  100% { background-position: 0 280px, -40px 260px, -60px 320px; }
}

/* Buttons */

.btn {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  cursor: pointer !important;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  pointer-events: auto !important;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.btn.primary {
  background: linear-gradient(45deg, #238636, #2ea043);
  color: white;
}

.btn.primary:not(:disabled):hover {
  background: linear-gradient(45deg, #2ea043, #238636);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(35, 134, 54, 0.4);
}

.btn.secondary {
  background: rgba(125, 211, 252, 0.1);
  color: #7dd3fc;
  border: 1px solid #7dd3fc;
}

.btn.secondary:hover {
  background: rgba(125, 211, 252, 0.2);
  transform: translateY(-2px);
}

.btn.danger {
  background: linear-gradient(45deg, #da3633, #f85149);
  color: white;
}

.btn.danger:hover {
  background: linear-gradient(45deg, #f85149, #da3633);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(248, 81, 73, 0.4);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

/* Server Creation Form */

.server-creation-form {
  background: rgba(22, 27, 34, 0.8);
  border: 1px solid #30363d;
  border-radius: 12px;
  padding: 25px;
  margin-bottom: 30px;
}

.server-creation-form h3 {
  margin: 0 0 15px 0;
  color: #7dd3fc;
  font-size: 18px;
}

.server-name-input {
  width: 100%;
  padding: 15px;
  background: rgba(13, 17, 23, 0.8);
  border: 1px solid #30363d;
  border-radius: 8px;
  color: #e6edf3;
  font-size: 16px;
  transition: border-color 0.3s ease;
}

.server-name-input:focus {
  outline: none;
  border-color: #238636;
  box-shadow: 0 0 10px rgba(35, 134, 54, 0.3);
}

/* Addon Management Modal */

.addon-modal {
  max-width: 600px;
  width: 90%;
}

.addon-section {
  margin-bottom: 20px;
}

.addon-section h4 {
  margin: 0 0 15px 0;
  color: #7dd3fc;
  font-size: 18px;
  font-weight: 600;
}

.addon-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background: rgba(13, 17, 23, 0.6);
  border: 1px solid #30363d;
  border-radius: 8px;
  margin-bottom: 10px;
}

.addon-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.addon-icon {
  width: 32px;
  height: 32px;
  -o-object-fit: contain;
     object-fit: contain;
}

.addon-info div {
  display: flex;
  flex-direction: column;
}

.addon-name {
  color: #e6edf3;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 4px;
}

.addon-price {
  color: #8b949e;
  font-size: 14px;
}

.addon-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.addon-btn {
  width: 32px;
  height: 32px;
  border: 1px solid #30363d;
  background: rgba(22, 27, 34, 0.8);
  color: #e6edf3;
  border-radius: 6px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.addon-btn:hover:not(:disabled) {
  background: rgba(35, 134, 54, 0.2);
  border-color: #238636;
}

.addon-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.addon-btn.minus:hover:not(:disabled) {
  background: rgba(248, 81, 73, 0.2);
  border-color: #f85149;
}

.addon-value {
  color: #e6edf3;
  font-size: 16px;
  font-weight: 500;
  min-width: 60px;
  text-align: center;
}

.addon-total {
  padding: 15px;
  background: rgba(35, 134, 54, 0.1);
  border: 1px solid #238636;
  border-radius: 8px;
  margin-bottom: 20px;
  text-align: center;
}

.addon-total span {
  color: #2ea043;
  font-size: 18px;
  font-weight: 600;
}

.plan-card.selected {
  border-color: #2ea043;
  background: rgba(35, 134, 54, 0.1);
  box-shadow: 0 8px 25px rgba(35, 134, 54, 0.3);
}

.create-server-action {
  text-align: center;
  margin-top: 30px;
  padding: 20px;
  background: rgba(22, 27, 34, 0.5);
  border-radius: 12px;
  border: 1px dashed #30363d;
}

/* Payment History Section */

.payment-history-section {
  background: rgba(22, 27, 34, 0.8);
  border: 1px solid #30363d;
  border-radius: 12px;
  padding: 25px;
  margin-top: 30px;
  color: #e6edf3;
}

.payment-history-section h3 {
  margin-top: 0;
  margin-bottom: 20px;
  color: #7dd3fc;
  font-size: 20px;
  text-align: center;
}

.payments-table table {
  width: 100%;
  border-collapse: collapse;
}

.payments-table th, .payments-table td {
  padding: 12px 8px;
  text-align: center;
}

.payments-table thead {
  background: rgba(125, 211, 252, 0.08);
}

.payments-table tbody tr:nth-child(odd) {
  background: rgba(125, 211, 252, 0.04);
}

.payments-table tbody tr:hover {
  background: rgba(125, 211, 252, 0.08);
}

.no-payments {
  text-align: center;
  padding: 20px;
  color: #8b949e;
}

/* Transaction Status */

.status.completed {
  background: rgba(35, 134, 54, 0.2);
  color: #2ea043;
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: bold;
}

.status.pending {
  background: rgba(255, 193, 7, 0.2);
  color: #ffc107;
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: bold;
}

.status.refill {
  background: rgba(35, 134, 54, 0.2);
  color: #2ea043;
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: bold;
}

.status.approved {
  background: rgba(0, 255, 136, 0.15);
  color: #00ff88;
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: bold;
}

.status.new {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: bold;
}

.status.rejected {
  background: rgba(248, 81, 73, 0.15);
  color: #f85149;
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: bold;
}

.status.debit {
  background: rgba(248, 81, 73, 0.2);
  color: #f85149;
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: bold;
}

.no-transactions {
  text-align: center;
  padding: 50px;
  background: rgba(22, 27, 34, 0.5);
  border-radius: 15px;
  border: 1px solid #30363d;
  color: #8b949e;
}

/* Balance Section Improvements */

.current-balance.negative {
  background: linear-gradient(135deg, #da3633, #f85149);
  color: white;
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 20px;
  text-align: center;
}

.current-balance:not(.negative) {
  background: linear-gradient(135deg, #238636, #2ea043);
  color: white;
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 20px;
  text-align: center;
}

/* Enhanced Profile Section */

.profile-info {
  background: linear-gradient(135deg, rgba(22, 27, 34, 0.95), rgba(13, 17, 23, 0.9));
  border: 1px solid rgba(48, 54, 61, 0.8);
  border-radius: 20px;
  padding: 50px;
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 50px;
  backdrop-filter: blur(20px);
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.3),
    0 8px 25px rgba(35, 134, 54, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

/* Mobile responsive - вертикальный макет на мобильных */

@media (max-width: 768px) {
  .profile-info {
    flex-direction: column;
    align-items: center;
    gap: 35px;
    max-width: 700px;
    padding: 30px;
  }
}

.profile-info::before {
  display: none;
}

.profile-avatar {
  text-align: center;
  z-index: 1;
  flex-shrink: 0;
}

.avatar-circle {
  width: 150px;
  height: 150px;
  background: linear-gradient(135deg, #238636, #2ea043, #7dd3fc);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 52px;
  font-weight: bold;
  color: white;
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  margin: 0 auto;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.avatar-circle:hover {
  transform: scale(1.03);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
}

.profile-details {
  text-align: left;
  flex: 1;
  z-index: 1;
}

/* Mobile responsive для аватара и деталей */

@media (max-width: 768px) {
  .avatar-circle {
    width: 120px;
    height: 120px;
    font-size: 42px;
  }
  
  .profile-details {
    text-align: center;
    width: 100%;
  }
}

.profile-details h3 {
  margin: 0 0 25px 0;
  color: #7dd3fc;
  font-size: 32px;
  font-weight: 700;
  text-shadow: 0 2px 10px rgba(125, 211, 252, 0.3);
}

.profile-details p {
  margin: 15px 0;
  color: #c9d1d9;
  font-size: 17px;
  line-height: 1.6;
  transition: all 0.3s ease;
  padding: 8px 16px;
  border-radius: 8px;
}

.profile-details p:hover {
  color: #e6edf3;
  background: rgba(125, 211, 252, 0.05);
}

.profile-details strong {
  color: #7dd3fc;
  font-weight: 600;
}

.power-mode {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(125, 211, 252, 0.15);
  background: rgba(125, 211, 252, 0.05);
}

.power-mode.eco {
  background: linear-gradient(135deg, rgba(74, 222, 128, 0.15), rgba(16, 185, 129, 0.18));
  border-color: rgba(74, 222, 128, 0.35);
}

.power-mode.normal {
  background: linear-gradient(135deg, rgba(248, 113, 113, 0.15), rgba(249, 115, 22, 0.18));
  border-color: rgba(249, 115, 22, 0.35);
}

.power-mode-top {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-start;
}

.mode-label {
  font-weight: 700;
  color: #94a3b8;
  font-size: 14px;
}

.power-mode.eco .mode-label.active {
  color: #a3e635; /* салатово-зелёный */
}

.power-mode.normal .mode-label.active {
  color: #fb923c; /* оранжево-красный */
}

.mode-toggle {
  position: relative;
  width: 90px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(125, 211, 252, 0.25);
  background: linear-gradient(135deg, rgba(125, 211, 252, 0.15), rgba(46, 160, 67, 0.2));
  cursor: pointer;
  padding: 4px;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.mode-toggle.eco {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.35), rgba(16, 185, 129, 0.4));
  border-color: rgba(52, 211, 153, 0.6);
}

.mode-toggle.normal {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.35), rgba(248, 113, 113, 0.4));
  border-color: rgba(249, 115, 22, 0.6);
}

.mode-thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #0b1621;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
  transition: transform 0.25s ease;
}

.mode-toggle.normal .mode-thumb {
  transform: translateX(52px);
}

.mode-hint {
  margin: 8px 0 0 0;
  font-size: 13px;
  color: #cbd5e1;
}

/* Eco mode: выключаем все анимации/переходы */

body.eco-mode * {
  animation: none !important;
  transition: none !important;
}

.profile-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  width: 100%;
  max-width: 100%;
  z-index: 1;
  margin-top: 30px;
}

/* Mobile responsive для кнопок */

@media (max-width: 768px) {
  .profile-actions {
    max-width: 600px;
    margin-top: 0;
  }
}

.profile-actions .btn {
  min-width: 180px;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.profile-actions .btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.profile-actions .btn:hover::before {
  left: 100%;
}

.profile-actions .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(35, 134, 54, 0.4);
}

/* Profile Navigation */

.profile-nav {
  display: flex;
  gap: 10px;
  margin-bottom: 30px;
  justify-content: center;
  flex-wrap: wrap;
}

.profile-nav-btn {
  background: rgba(22, 27, 34, 0.8);
  border: 1px solid #30363d;
  color: #8b949e;
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  font-weight: 500;
}

.profile-nav-btn:hover {
  background: rgba(35, 134, 54, 0.1);
  border-color: #238636;
  color: #7dd3fc;
}

.profile-nav-btn.active {
  background: linear-gradient(135deg, #238636, #2ea043);
  border-color: #2ea043;
  color: white;
  box-shadow: 0 4px 15px rgba(35, 134, 54, 0.3);
}

/* Profile Activity */

.profile-activity {
  background: rgba(22, 27, 34, 0.8);
  border: 1px solid #30363d;
  border-radius: 15px;
  padding: 30px;
  max-width: 800px;
  margin: 0 auto;
}

.profile-activity h3 {
  color: #7dd3fc;
  margin-bottom: 20px;
  font-size: 24px;
}

.activity-filters {
  display: flex;
  gap: 10px;
  margin-bottom: 25px;
  flex-wrap: wrap;
}

.filter-btn {
  background: rgba(13, 17, 23, 0.8);
  border: 1px solid #30363d;
  color: #8b949e;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 13px;
}

.filter-btn:hover {
  background: rgba(35, 134, 54, 0.1);
  border-color: #238636;
  color: #7dd3fc;
}

.filter-btn.active {
  background: #238636;
  border-color: #2ea043;
  color: white;
}

.activity-list {
  max-height: 400px;
  overflow-y: auto;
}

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 15px;
  border-bottom: 1px solid #30363d;
  transition: background 0.3s ease;
}

.activity-item:hover {
  background: rgba(35, 134, 54, 0.05);
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-icon {
  font-size: 20px;
  width: 30px;
  text-align: center;
  flex-shrink: 0;
}

.activity-content {
  flex: 1;
}

.activity-description {
  color: #e6edf3;
  font-size: 14px;
  margin-bottom: 5px;
}

.activity-time {
  color: #8b949e;
  font-size: 12px;
  margin-bottom: 3px;
}

.activity-ip {
  color: #7c3aed;
  font-size: 11px;
}

/* Profile Sessions */

.profile-sessions {
  background: linear-gradient(135deg, rgba(22, 27, 34, 0.95), rgba(13, 17, 23, 0.9));
  border: 1px solid rgba(48, 54, 61, 0.8);
  border-radius: 20px;
  padding: 40px;
  max-width: 900px;
  margin: 0 auto;
  backdrop-filter: blur(20px);
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.3),
    0 8px 25px rgba(35, 134, 54, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  animation: fadeInUp 0.6s ease-out;
}

.profile-sessions h3 {
  color: #7dd3fc;
  margin-bottom: 30px;
  font-size: 28px;
  font-weight: 700;
  text-shadow: 0 2px 10px rgba(125, 211, 252, 0.3);
  text-align: center;
}

.sessions-actions {
  margin-bottom: 30px;
  text-align: center;
}

.sessions-list {
  max-height: 500px;
  overflow-y: auto;
  padding-right: 10px;
}

.sessions-list::-webkit-scrollbar {
  width: 6px;
}

.sessions-list::-webkit-scrollbar-track {
  background: rgba(48, 54, 61, 0.3);
  border-radius: 3px;
}

.sessions-list::-webkit-scrollbar-thumb {
  background: rgba(125, 211, 252, 0.5);
  border-radius: 3px;
}

.sessions-list::-webkit-scrollbar-thumb:hover {
  background: rgba(125, 211, 252, 0.7);
}

.session-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px;
  border: 1px solid rgba(48, 54, 61, 0.6);
  border-radius: 16px;
  margin-bottom: 20px;
  background: linear-gradient(135deg, rgba(13, 17, 23, 0.8), rgba(22, 27, 34, 0.6));
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.session-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(125, 211, 252, 0.1), transparent);
  transition: left 0.6s;
}

.session-item:hover::before {
  left: 100%;
}

.session-item:hover {
  background: linear-gradient(135deg, rgba(35, 134, 54, 0.1), rgba(13, 17, 23, 0.8));
  border-color: rgba(35, 134, 54, 0.6);
  transform: translateY(-3px);
  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.3),
    0 5px 15px rgba(35, 134, 54, 0.4);
}

.session-info {
  flex: 1;
  z-index: 1;
  position: relative;
}

.session-device {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
}

.session-device strong {
  color: #e6edf3;
  font-size: 16px;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.current-session {
  background: linear-gradient(135deg, #238636, #2ea043);
  color: white;
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 
    0 2px 8px rgba(35, 134, 54, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  animation: pulse 2s infinite alternate;
}

.session-details {
  color: #a5b4c2;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 400;
}

.session-details div {
  margin-bottom: 4px;
  padding: 2px 0;
}

.btn.small {
  padding: 8px 16px;
  font-size: 13px;
  min-width: auto;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.btn.small::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.6s;
}

.btn.small:hover::before {
  left: 100%;
}

.btn.small:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* Empty State */

.empty-state {
  text-align: center;
  padding: 60px 30px;
  color: #8b949e;
  background: linear-gradient(135deg, rgba(13, 17, 23, 0.4), rgba(22, 27, 34, 0.2));
  border: 1px dashed rgba(139, 148, 158, 0.3);
  border-radius: 16px;
  margin: 20px 0;
  animation: fadeInUp 0.8s ease-out 0.2s both;
}

.empty-state p {
  font-size: 18px;
  margin: 0;
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.empty-state::before {
  content: '🔒';
  display: block;
  font-size: 48px;
  margin-bottom: 20px;
  opacity: 0.7;
  animation: glow 2s ease-in-out infinite alternate;
}

.dashboard-container.dashboard-loading {
  opacity: 0;
  transform: translateY(20px) scale(0.98);
}

.dashboard-container::before {
  content: '';
  position: fixed;
  top: -6%;
  left: -6%;
  width: 112%;
  height: 112%;
  background: 
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 32%),
    radial-gradient(circle at 80% 10%, rgba(140, 216, 255, 0.06) 0%, transparent 38%),
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 48px 48px, 48px 48px;
  opacity: 0.65;
  pointer-events: none;
  z-index: 0;
}

.dashboard-container::after {
  content: '';
  position: fixed;
  top: -4%;
  left: -4%;
  width: 108%;
  height: 110%;
  background-image:
    radial-gradient(1.5px 1.5px at 40px 80px, rgba(255, 255, 255, 0.92), transparent),
    radial-gradient(1.8px 1.8px at 180px 60px, rgba(255, 255, 255, 0.88), transparent),
    radial-gradient(2.2px 2.2px at 120px 200px, rgba(255, 255, 255, 0.18), transparent),
    radial-gradient(1.2px 1.2px at 260px 140px, rgba(255, 255, 255, 0.55), transparent);
  background-size: 320px 320px, 420px 420px, 520px 520px, 360px 360px;
  background-repeat: repeat;
  animation: snowfall 48s linear infinite, snowDrift 18s ease-in-out infinite;
  opacity: 0.6;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: normal;
}

.dashboard-container::before,
.dashboard-container::after {
  will-change: transform, background-position;
}

/* Отключаем анимации фона и снега в ECO для максимальной плавности */

body.eco-mode .dashboard-container::before,
body.eco-mode .dashboard-container::after {
  animation: none !important;
  opacity: 0.2;
  background-attachment: scroll;
}

@keyframes snowfall {
  0% { background-position: 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 0 700px, -160px 600px, -80px 520px, 120px 660px; }
}

@keyframes snowDrift {
  0%, 100% { transform: translateY(-1.5%) translateX(0); }
  50% { transform: translateY(1.5%) translateX(-0.6%); }
}

/* Dashboard Header - Compact Single Line */

.dashboard-header {
  background: rgba(22, 27, 34, 0.95);
  border-bottom: 2px solid #238636;
  backdrop-filter: blur(10px);
  height: 85px;
  min-height: 85px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4000; /* поверх всего контента */
  width: 100%;
  overflow: visible;
}

.header-top {
  position: static;
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* equal sides, center fixed by content */
  align-items: center;
  -moz-column-gap: 12px;
       column-gap: 12px;
  padding: 10px 5px;
  height: 100%;
  max-width: 100%;
  z-index: 1;
  background: transparent;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: initial;
  min-width: -moz-max-content;
  min-width: max-content;
  padding-left: 5px;
  justify-self: start;
}

.header-center {
  display: flex;
  align-items: center;
  justify-content: center;
  position: static; /* ensure true centering */
  left: 0;
  justify-self: center; /* center exactly in grid */
}

@media (max-width: 1024px) {
  .header-center {
    left: 20px; /* reduce shift on tablets */
  }
  .header-left {
    flex: 0 0 120px;
    min-width: 120px;
  }
  .header-right {
    flex: 0 0 260px;
    min-width: 260px;
    padding-right: 4px;
  }
  .header-center .dashboard-nav {
    gap: 12px;
  }
}

@media (max-width: 768px) {
  .header-center {
    left: 0; /* reset on mobile to keep center aligned */
  }
  .header-left {
    flex: 0 0 100px;
    min-width: 100px;
  }
  .header-right {
    flex: 0 0 200px;
    min-width: 200px;
    padding-right: 3px;
  }
  .header-center .dashboard-nav {
    gap: 8px;
  }
}

.header-center .dashboard-nav {
  display: flex;
  justify-content: center;
  gap: 16px;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  flex-wrap: nowrap;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: initial;
  min-width: -moz-max-content;
  min-width: max-content;
  justify-content: flex-end;
  padding-right: 5px;
  justify-self: end;
}

.logo-container {
  width: 150px;
  height: 65px;
  margin-top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: visible; /* allow logo glow to render outside bounds */
  position: static;
  background: transparent;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.logo-container:hover {
  transform: scale(1.05);
}

.logo-image {
  width: 100%;
  height: 100%;
  border-radius: 14px;
  -o-object-fit: contain;
     object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(64, 208, 90, 0.5));
  transition: filter 0.3s ease;
}

.logo-container:hover .logo-image {
  filter: drop-shadow(0 0 15px rgba(64, 208, 90, 0.8)) brightness(1.1);
}

.powered-by-text {
  font-size: 9px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  margin-top: 2px;
  letter-spacing: 0.5px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  transition: color 0.3s ease;
}

.logo-container:hover .powered-by-text {
  color: rgba(64, 208, 90, 0.8);
}

@keyframes neon-pulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(64, 208, 90, 0.5), inset 0 0 10px rgba(64, 208, 90, 0.1);
  }
  50% {
    box-shadow: 0 0 35px rgba(64, 208, 90, 0.8), inset 0 0 20px rgba(64, 208, 90, 0.3);
  }
}

.logo-text {
  font-family: 'Orbitron', monospace;
  font-size: 1.8rem;
  font-weight: 900;
  color: #00ff88;
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
  letter-spacing: 2px;
  margin: 0;
}

.time-info {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Space Mono', monospace;
}

.time {
  font-size: 20px;
  font-weight: bold;
  color: #40d05a;
  text-shadow: 0 0 8px rgba(64, 208, 90, 0.4);
}

.date {
  font-size: 12px;
  color: #7dd3fc;
  opacity: 0.8;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.user-avatar {
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #238636, #2ea043);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #ffffff;
  font-size: 1rem;
  border: 2px solid rgba(0, 255, 136, 0.3);
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
}

.user-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.user-name {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  color: #00ff88;
  white-space: nowrap;
}

.user-email {
  font-size: 0.9rem;
  color: rgba(0, 255, 136, 0.6);
}

.logout-btn {
  background: transparent;
  margin-left: 8px;
  border: 2px solid rgba(0, 255, 136, 0.3);
  color: #00ff88;
  padding: 8px 12px;
  border-radius: 6px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  transition: all 0.3s ease;
  min-height: 32px;
}

.logout-btn:hover {
  background: transparent;
  border-color: #00ff88;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 255, 136, 0.2);
}

/* Main Content - дополнительные стили */

.dashboard-main {
  position: relative;
  z-index: 1;
}

/* Welcome Section */

.welcome-section {
  position: relative;
  padding: 3rem 2rem;
  margin-bottom: 3rem;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 20px;
  border: 2px solid rgba(0, 255, 136, 0.2);
  overflow: hidden;
}

.welcome-content {
  position: relative;
  z-index: 2;
}

.welcome-title {
  font-family: 'Orbitron', monospace;
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0 0 1rem 0;
  color: #ffffff;
  text-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
}

.user-highlight {
  color: #00ff88;
  text-shadow: 0 0 15px rgba(0, 255, 136, 0.6);
}

.welcome-subtitle {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  margin: 0;
  font-weight: 400;
}

.welcome-decoration {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.floating-orb {
  position: absolute;
  background: radial-gradient(circle, rgba(0, 255, 136, 0.1), transparent);
  border-radius: 50%;
  animation: float 6s ease-in-out infinite;
}

.orb-1 {
  width: 100px;
  height: 100px;
  top: 20%;
  right: 10%;
  animation-delay: 0s;
}

.orb-2 {
  width: 150px;
  height: 150px;
  top: 60%;
  right: 20%;
  animation-delay: 2s;
}

.orb-3 {
  width: 80px;
  height: 80px;
  top: 40%;
  right: 5%;
  animation-delay: 4s;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px) scale(1);
    opacity: 0.3;
  }
  50% {
    transform: translateY(-20px) scale(1.1);
    opacity: 0.6;
  }
}

/* Stats Grid */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.stat-card {
  background: rgba(0, 0, 0, 0.7);
  border: 2px solid rgba(0, 255, 136, 0.2);
  border-radius: 15px;
  padding: 2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 136, 0.1), transparent);
  transition: left 0.5s;
}

.stat-card:hover::before {
  left: 100%;
}

.stat-card:hover {
  border-color: rgba(0, 255, 136, 0.5);
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 255, 136, 0.15);
}

.stat-icon {
  font-size: 2.5rem;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-radius: 12px;
  border: none;
}

.stat-number {
  font-family: 'Space Mono', monospace;
  font-size: 2rem;
  font-weight: 700;
  color: #00ff88;
  margin: 0 0 0.5rem 0;
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
}

.stat-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1rem;
  margin: 0;
  font-weight: 500;
}

/* Dashboard Home (Asosiy) */

.dashboard-container .stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  margin: 12px 0 6px;
}

.dashboard-container .stats-cards .stat-card {
  background: linear-gradient(150deg, rgba(17, 24, 39, 0.95), rgba(15, 23, 42, 0.85));
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 24px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-height: 140px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 18px 35px rgba(6, 10, 20, 0.45);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.dashboard-container .stats-cards .stat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24px;
  border: 1px solid transparent;
  background: linear-gradient(120deg, rgba(59, 130, 246, 0.35), rgba(16, 185, 129, 0.25), transparent);
  opacity: 0.25;
  pointer-events: none;
}

.dashboard-container .stats-cards .stat-card::after {
  content: '';
  position: absolute;
  right: -30%;
  top: -30%;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.25), transparent 60%);
  opacity: 0.45;
  pointer-events: none;
}

.dashboard-container .stats-cards .stat-card:hover {
  transform: translateY(-6px);
  border-color: rgba(99, 102, 241, 0.45);
  box-shadow: 0 24px 50px rgba(6, 10, 20, 0.55);
}

.dashboard-container .stats-cards .stat-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(30, 41, 59, 0.85);
  border: 1px solid rgba(59, 130, 246, 0.35);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.35);
}

.dashboard-container .stats-cards .stat-content h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #e2e8f0;
}

.dashboard-container .stats-cards .stat-detail {
  font-size: 14px;
  color: #94a3b8;
}

.dashboard-container .stats-cards .stat-value {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #34d399;
  text-shadow: 0 8px 20px rgba(16, 185, 129, 0.25);
}

.dashboard-container .stats-cards .stat-value.negative {
  color: #f87171;
  text-shadow: 0 8px 20px rgba(248, 113, 113, 0.25);
}

.dashboard-container .stats-cards .stat-warning {
  font-size: 13px;
  color: #fbbf24;
}

.dashboard-container .stats-cards .stat-action {
  margin-top: 6px;
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid rgba(99, 102, 241, 0.35);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(14, 165, 233, 0.35));
  color: #e2e8f0;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.dashboard-container .stats-cards .stat-action:hover {
  transform: translateY(-2px);
  border-color: rgba(59, 130, 246, 0.6);
  box-shadow: 0 10px 22px rgba(30, 64, 175, 0.3);
}

@media (max-width: 768px) {
  .dashboard-container .stats-cards .stat-card {
    padding: 14px;
    min-height: 140px;
  }
  .dashboard-container .stats-cards .stat-value {
    font-size: 28px;
  }
}

/* Section Titles */

.section-title {
  font-family: 'Orbitron', monospace;
  font-size: 1.8rem;
  font-weight: 600;
  color: #00ff88;
  margin: 0 0 2rem 0;
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
  position: relative;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #00ff88, transparent);
  border-radius: 2px;
}

/* Quick Actions */

.quick-actions {
  margin-bottom: 3rem;
}

.actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.action-btn {
  background: rgba(0, 0, 0, 0.6);
  border: 2px solid rgba(0, 255, 136, 0.3);
  border-radius: 12px;
  padding: 1.5rem;
  color: #ffffff;
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.1rem;
  font-weight: 500;
  cursor: pointer !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  transition: all 0.3s ease;
  pointer-events: auto !important;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.action-btn:hover {
  background: transparent;
  border-color: #00ff88;
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 255, 136, 0.2);
}

.action-icon {
  font-size: 2rem;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-radius: 10px;
  border: none;
}

/* Recent Activity */

.recent-activity {
  margin-bottom: 3rem;
}

.dashboard-header {
  width: 100%;
  overflow: visible;
  background: rgba(22, 27, 34, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 2px solid #238636;
  padding: 0;
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5000 !important;
  display: block; /* header-top controls layout via CSS Grid */
  height: 85px;
  min-height: 85px;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
  margin-bottom: 10px;
}

.activity-list {
  background: rgba(0, 0, 0, 0.6);
  border: 2px solid rgba(0, 255, 136, 0.2);
  border-radius: 15px;
  padding: 1.5rem;
}

.activity-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(0, 255, 136, 0.1);
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-icon {
  font-size: 1.5rem;
  width: 40px;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-radius: 8px;
  border: none;
}

.activity-content {
  flex: 1;
}

.activity-text {
  color: #ffffff;
  margin: 0 0 0.3rem 0;
  font-weight: 500;
}

.activity-time {
  color: rgba(0, 255, 136, 0.6);
  font-size: 0.9rem;
  font-family: 'Space Mono', monospace;
}

/* Footer */

.dashboard-footer {
  background: rgba(0, 0, 0, 0.8);
  border-top: 2px solid rgba(0, 255, 136, 0.2);
  padding: 1.5rem 2rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-family: 'Space Mono', monospace;
  font-size: 0.9rem;
}

.nav-label { margin-left: 6px; }

/* Extra-small devices (≤576px) */

@media (max-width: 576px) {
  .logo-container {
    display: none;
  }
  .header-left {
    flex: 0 0 0;
    min-width: 0;
    padding-left: 0;
  }
  .header-center {
    left: 0; /* fully center nav when logo hidden */
  }
}

@media (max-width: 600px) {
  .nav-label,
  .user-name,
  .user-avatar { display: none; }
}

/* Medium devices (≤768px) */

@media (max-width: 768px) {
  .header-center { left: 0; }
  .dashboard-nav {
    gap: 8px;
    padding: 12px;
    width: 100%;
    justify-content: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin; /* Firefox */
  }
}

/* Responsive Design */

@media (max-width: 1024px) {
  .dashboard-header {
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
  }
  
  .header-left, .header-center, .header-right {
    flex: none;
  }
  
  .welcome-title {
    font-size: 2rem;
  }
  
  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

/* ---------- Responsive Priority Rules (Nav highest priority) ---------- */

/* 1) Сначала скрываем правый блок (имя + logout), когда не помещается */

@media (max-width: 1250px) {
  .header-right { display: none; }
}

/* 2) Если всё ещё тесно — убираем подписи у кнопок (оставляем только иконки) */

@media (max-width: 1100px) {
  .nav-label { display: none !important; }
  .header-center .dashboard-nav { gap: 10px; }
  .dashboard-nav .nav-item { padding: 10px; min-width: 44px; }
}

/* 3) Далее убираем логотип, чтобы центр оставался в приоритете */

@media (max-width: 992px) {
  .logo-container { display: none !important; }
  .header-left { min-width: 0; }
}

/* 4) На совсем узких — делаем горизонтальный скролл и жесткий nowrap */

@media (max-width: 820px) {
  .header-center .dashboard-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .dashboard-nav .nav-item { flex: 0 0 auto; }
}

@media (max-width: 768px) {
  .dashboard-main {
    padding: 1rem;
    padding-top: calc(35px + 20px + 20px + 44px + 10px); /* пустота равная высоте navbar на мобильных */
  }
  
  .dashboard-container {
    /* CSS Grid стили уже применены выше, дополнительные настройки не нужны */
  }
  
  .welcome-section {
    padding: 2rem 1rem;
  }
  
  .welcome-title {
    font-size: 1.8rem;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .actions-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
  
  .user-info {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .current-time {
    font-size: 1.5rem;
  }
}

@media (max-width: 480px) {
  /* Ensure nav buttons are fully visible and scrollable */
  .dashboard-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible; /* avoid vertical clipping */
    padding: 14px 12px; /* a bit more vertical space to avoid clipping */
    gap: 10px;
    align-items: center;
  }
  .dashboard-nav::-webkit-scrollbar {
    height: 6px;
  }
  .dashboard-nav::-webkit-scrollbar-thumb {
    background: #238636;
    border-radius: 3px;
  }
  .dashboard-nav .nav-item {
    flex: 0 0 auto;
    /* stickers larger and truly centered */
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    padding: 0 !important;
    border-radius: 14px !important;
    font-size: 24px !important; /* larger emoji/icon */
    line-height: 1;  /* avoid vertical clipping */
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* центрируем навигацию и не обрезаем подсветку */
  .header-center { justify-content: center; justify-self: center; }
  .header-top { overflow: visible; }
  .dashboard-header { height: auto; min-height: 90px; padding: 6px 0; overflow: visible; }
  /* активное/нажатое состояние не обрезается сверху/снизу */
  .nav-item.active,
  .nav-item:focus,
  .nav-item:active { box-shadow: 0 4px 15px rgba(35,134,54,0.35); outline: none; }
}

/* Apply slightly smaller bump for very small tablets as well */

@media (max-width: 600px) {
  .header-center {
    justify-content: center;
    position: relative;
    z-index: 2;
    align-self: center;
    width: 100%;
    margin: 0 auto;
    overflow: visible;
  }
  .header-top {
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: center;
  }
  .header-top, .dashboard-header { overflow: visible; }
  .dashboard-nav {
    align-items: center;
    overflow: visible;
    padding: 10px 12px 12px;
    justify-content: center;
    gap: 10px;
    flex-wrap: nowrap;
    width: 100%;
    margin: 0 auto;
  }
  .dashboard-nav .nav-item {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    padding: 8px !important;
    border-radius: 12px !important;
    font-size: 18px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1 !important;
    overflow: visible !important;
  }
  /* Увеличиваем именно иконку/эмодзи внутри кнопки */
  .dashboard-nav .nav-item > svg,
  .dashboard-nav .nav-item > img,
  .dashboard-nav .nav-item > span:not(.nav-label) {
    font-size: 36px !important;
    width: 36px !important;
    height: 36px !important;
    line-height: 1 !important;
    display: inline-block !important;
  }
}

/* removed stray block that caused CSS parse error */

@media (max-width: 480px) {
  .dashboard-header {
    padding: 12px 10px;
    min-height: 96px;
  }
  .dashboard-nav {
    padding: 16px 12px 14px;
    overflow: visible; /* чтобы рамки активных кнопок не резались */
    justify-content: center;
    gap: 10px;
  }
  /* Увеличиваем именно иконку/эмодзи и здесь */
  .dashboard-nav .nav-item > svg,
  .dashboard-nav .nav-item > img,
  .dashboard-nav .nav-item > span:not(.nav-label) {
    font-size: 34px !important;
    width: 34px !important;
    height: 34px !important;
  }
  .logo-text {
    font-size: 1.4rem;
  }
  .welcome-title {
    font-size: 1.5rem;
  }
  .section-title {
    font-size: 1.4rem;
  }
}

/* Modal Animations */

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

/* Exit Animations for Password Modal */

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

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

.modal-overlay.closing {
  animation: fadeOut 0.3s ease-out forwards;
}

.modal.password-modal.closing {
  animation: slideDown 0.35s ease-out forwards;
}

/* Password Change Modal Styles */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  z-index: 16001;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease-out;
}

.modal.password-modal,
.modal.addon-modal {
  background: rgba(22, 27, 34, 0.98);
  border: 1px solid #30363d;
  border-radius: 12px;
  width: 95%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.7);
  animation: slideUp 0.35s ease-out;
  color: #e6edf3;
  padding: 30px;
  position: relative;
}

.modal.addon-modal {
  max-width: 700px;
}

.modal.password-modal {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 16003 !important;
}

/* Addon Modal Specific Styles */

.addon-section {
  margin-bottom: 30px;
}

.addon-section h4 {
  color: #58a6ff;
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 20px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #30363d;
}

.addon-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid rgba(48, 54, 61, 0.3);
}

.addon-item:last-child {
  border-bottom: none;
}

.addon-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.addon-icon {
  width: 40px;
  height: 40px;
  -o-object-fit: contain;
     object-fit: contain;
}

.addon-info > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.addon-name {
  color: #e6edf3;
  font-size: 16px;
  font-weight: 500;
}

.addon-price {
  color: #8b949e;
  font-size: 14px;
}

.addon-controls {
  display: flex;
  align-items: center;
  gap: 15px;
}

.addon-btn {
  width: 35px;
  height: 35px;
  border: 1px solid #30363d;
  background: rgba(22, 27, 34, 0.8);
  color: #e6edf3;
  border-radius: 6px;
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.addon-btn:hover:not(:disabled) {
  background: rgba(35, 134, 54, 0.2);
  border-color: #2ea043;
  color: #2ea043;
}

.addon-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.addon-btn.minus {
  color: #f85149;
}

.addon-btn.minus:hover:not(:disabled) {
  background: rgba(248, 81, 73, 0.2);
  border-color: #f85149;
  color: #f85149;
}

.addon-btn.plus {
  color: #2ea043;
}

.addon-value {
  color: #58a6ff;
  font-size: 16px;
  font-weight: 600;
  min-width: 60px;
  text-align: center;
}

.addon-total {
  margin-top: 20px;
  padding: 20px;
  background: rgba(35, 134, 54, 0.1);
  border: 1px solid #238636;
  border-radius: 8px;
  text-align: center;
}

.addon-total span {
  color: #e6edf3;
  font-size: 16px;
  font-weight: 600;
}

.addon-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #30363d;
}

.addon-actions .btn {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.addon-actions .btn.secondary {
  background: rgba(139, 148, 158, 0.2);
  color: #8b949e;
  border: 1px solid #30363d;
}

.addon-actions .btn.secondary:hover {
  background: rgba(139, 148, 158, 0.3);
  color: #e6edf3;
}

.addon-actions .btn.primary {
  background: #238636;
  color: #ffffff;
}

.addon-actions .btn.primary:hover {
  background: #2ea043;
}

.addon-actions .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.modal-header {
  padding: 20px 30px;
  border-bottom: 1px solid #30363d;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  margin: 0;
  color: #58a6ff;
  font-size: 20px;
  font-weight: 600;
}

.close-btn {
  background: transparent;
  border: none;
  color: #8b949e;
  font-size: 24px;
  cursor: pointer !important;
  transition: all 0.2s ease;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  pointer-events: auto !important;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.close-btn:hover {
  color: #e6edf3;
  background: rgba(255, 255, 255, 0.1);
}

.modal-content {
  padding: 30px;
}

.password-step h4 {
  color: #58a6ff;
  margin: 0 0 10px 0;
  font-size: 18px;
}

.password-step p {
  color: #8b949e;
  margin: 0 0 20px 0;
  font-size: 14px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  color: #e6edf3;
  margin-bottom: 8px;
  font-weight: 500;
  font-size: 14px;
}

.form-group input {
  width: 100%;
  padding: 12px 16px;
  background: rgba(13, 17, 23, 0.6);
  border: 1px solid #30363d;
  border-radius: 8px;
  color: #e6edf3;
  font-size: 14px;
  transition: all 0.2s ease;
}

.form-group input:focus {
  outline: none;
  border-color: #58a6ff;
  box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.2);
}

/* Admin Panel Styles */

.admin-panel-container {
  padding: 30px;
  background: rgba(22, 27, 34, 0.8);
  border-radius: 15px;
  border: 1px solid #30363d;
  margin-bottom: 30px;
}

.admin-header {
  margin-bottom: 40px;
  text-align: center;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(59, 130, 246, 0.1));
  padding: 30px;
  border-radius: 20px;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.admin-header h2 {
  color: #10b981;
  font-size: 32px;
  font-weight: 800;
  margin: 0 0 12px 0;
  text-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
  background: linear-gradient(135deg, #10b981, #3b82f6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.admin-header p {
  color: #94a3b8;
  font-size: 18px;
  margin: 0;
  font-weight: 500;
}

/* Admin Stats Grid */

.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

.admin-stat-card {
  background: linear-gradient(135deg, rgba(22, 27, 34, 0.95), rgba(30, 41, 59, 0.95));
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 20px;
  padding: 30px;
  color: white;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(16, 185, 129, 0.1);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 140px;
  position: relative;
  overflow: hidden;
}

.admin-stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #10b981, #3b82f6, #8b5cf6);
  opacity: 0.8;
}

.admin-stat-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(16, 185, 129, 0.4);
  border-color: rgba(16, 185, 129, 0.6);
}

.admin-stat-card:hover::before {
  opacity: 1;
  background: linear-gradient(90deg, #10b981, #3b82f6, #8b5cf6, #ef4444);
}

.stat-icon {
  font-size: 3rem;
  opacity: 0.95;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
  transition: all 0.3s ease;
}

.admin-stat-card:hover .stat-icon {
  transform: scale(1.1);
  filter: drop-shadow(0 6px 12px rgba(16, 185, 129, 0.4));
}

.stat-content {
  flex: 1;
  min-width: 0;
}

.stat-content h3 {
  margin: 0 0 12px 0;
  font-size: 1.1rem;
  opacity: 0.95;
  font-weight: 600;
  line-height: 1.3;
  color: #e2e8f0;
}

.stat-number {
  font-size: 2.4rem;
  font-weight: 800;
  margin: 12px 0;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  line-height: 1;
  background: linear-gradient(135deg, #ffffff, #e2e8f0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-description {
  font-size: 0.9rem;
  opacity: 0.85;
  margin: 0;
  line-height: 1.4;
  color: #cbd5e1;
  font-weight: 500;
}

@media (max-width: 1024px) {
  .admin-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
}

/* Специальные стили для карточек RAM и SSD - растянуты по горизонтали */

.admin-stat-card.resource-card {
  grid-column: span 2;
  min-height: 120px;
}

@media (max-width: 1024px) {
  .admin-stat-card.resource-card {
    grid-column: span 1;
  }
}

@media (max-width: 768px) {
  .admin-stats-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .admin-stat-card {
    padding: 20px;
    gap: 15px;
    min-height: 100px;
  }
  
  .admin-stat-card.resource-card {
    grid-column: span 1;
  }
  
  .stat-icon {
    font-size: 2rem;
  }
  
  .stat-number {
    font-size: 1.8rem;
  }
}

.admin-section {
  padding: 30px;
  background: rgba(22, 27, 34, 0.8);
  border-radius: 15px;
  border: 1px solid #30363d;
  margin-bottom: 30px;
}

.admin-filters {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.filter-btn {
  background: rgba(35, 134, 54, 0.1);
  border: 1px solid #238636;
  color: #7dd3fc;
  padding: 12px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.filter-btn:hover {
  background: rgba(35, 134, 54, 0.2);
  border-color: #2ea043;
  transform: translateY(-2px);
}

.filter-btn.active {
  background: linear-gradient(45deg, #238636, #2ea043);
  color: white;
  box-shadow: 0 4px 15px rgba(35, 134, 54, 0.3);
}

.admin-chats {
  min-height: 400px;
}

.empty-chats {
  text-align: center;
  padding: 60px 20px;
  color: #8b949e;
}

.empty-icon {
  font-size: 64px;
  margin-bottom: 20px;
  opacity: 0.5;
}

.empty-chats h3 {
  color: #e6edf3;
  font-size: 24px;
  margin: 0 0 10px 0;
}

.empty-chats p {
  font-size: 16px;
  margin: 0;
}

.chats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 20px;
}

.chat-card {
  background: rgba(13, 17, 23, 0.8);
  border: 1px solid #30363d;
  border-radius: 12px;
  padding: 20px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.chat-card:hover {
  border-color: #58a6ff;
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(88, 166, 255, 0.2);
}

.chat-card.open {
  border-left: 4px solid #2ea043;
}

.chat-card.closed {
  border-left: 4px solid #8b949e;
}

.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.chat-id {
  font-family: 'Space Mono', monospace;
  font-size: 14px;
  font-weight: bold;
  color: #58a6ff;
  background: rgba(88, 166, 255, 0.1);
  padding: 4px 8px;
  border-radius: 4px;
}

.chat-status {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
}

.status-open {
  background: rgba(46, 160, 67, 0.2);
  color: #2ea043;
}

.status-closed {
  background: rgba(139, 148, 158, 0.2);
  color: #8b949e;
}

.chat-content {
  margin-bottom: 15px;
}

.chat-title {
  color: #e6edf3;
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 10px 0;
  line-height: 1.4;
}

.chat-description {
  color: #8b949e;
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 15px 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.chat-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
}

.chat-user,
.chat-date {
  color: #8b949e;
  display: flex;
  align-items: center;
  gap: 5px;
}

.chat-priority {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
}

.priority-high {
  color: #f85149;
}

.priority-medium {
  color: #ffc107;
}

.priority-low {
  color: #2ea043;
}

/* Mobile responsive for admin panel */

@media (max-width: 768px) {
  .admin-section {
    padding: 20px;
  }
  
  .admin-filters {
    flex-direction: column;
    align-items: center;
  }
  
  .filter-btn {
    width: 100%;
    max-width: 300px;
  }
  
  .chats-grid {
    grid-template-columns: 1fr;
  }
  
  .chat-meta {
    font-size: 11px;
  }
}

.form-group input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 30px;
}

.modal.addon-modal .modal-actions .btn {
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.modal.addon-modal .modal-actions .btn.primary::after {
  content: '';
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.35), transparent 60%);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.modal.addon-modal .modal-actions .btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(34, 197, 94, 0.35);
}

.modal.addon-modal .modal-actions .btn.secondary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(148, 163, 184, 0.25);
}

.modal.addon-modal .modal-actions .btn.primary:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 6px 14px rgba(34, 197, 94, 0.25);
}

.modal.addon-modal .modal-actions .btn.primary:active::after {
  opacity: 0.45;
  transform: scale(1);
}

.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 100px;
}

.btn.is-loading {
  pointer-events: none;
  opacity: 0.85;
}

.btn .btn-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #ffffff;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
  vertical-align: -2px;
  animation: btn-spin 0.8s linear infinite;
}

@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Дублирующиеся стили кнопок удалены для предотвращения конфликтов */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

/* Notification dot for new messages */

.nav-item-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notification-dot {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 12px;
  height: 12px;
  background: #ff4444;
  border-radius: 50%;
  border: 2px solid #0d1117;
  animation: pulse 2s infinite;
  z-index: 10;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 68, 68, 0.7);
  }
  70% {
    transform: scale(1.1);
    box-shadow: 0 0 0 10px rgba(255, 68, 68, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 68, 68, 0);
  }
}

/* Message animations */

.message-animate {
  animation: messageSlideIn 0.3s ease-out;
}

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

/* Smooth scrolling for chat container */

.chat-messages {
  scroll-behavior: smooth;
}

/* CPU Chart Section */

.admin-cpu-section {
  margin-top: 30px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.cpu-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  flex-wrap: wrap;
  gap: 15px;
}

.cpu-chart-header h3 {
  color: #ffffff;
  font-size: 24px;
  font-weight: 600;
  margin: 0;
  background: linear-gradient(45deg, #4CAF50, #81C784);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.time-filter-buttons {
  display: flex;
  gap: 8px;
  background: rgba(255, 255, 255, 0.05);
  padding: 6px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.time-filter-buttons .filter-btn {
  padding: 8px 16px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: #b0b0b0;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 45px;
}

.time-filter-buttons .filter-btn:hover {
  background: rgba(76, 175, 80, 0.1);
  color: #4CAF50;
  transform: translateY(-1px);
}

.time-filter-buttons .filter-btn.active {
  background: linear-gradient(45deg, #4CAF50, #66BB6A);
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
}

.cpu-chart-container {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 15px;
  padding: 25px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.cpu-chart-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cpu-current-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  margin-bottom: 20px;
}

.cpu-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.03);
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.cpu-label {
  color: #b0b0b0;
  font-size: 14px;
  font-weight: 500;
}

.cpu-value {
  color: #4CAF50;
  font-size: 16px;
  font-weight: 600;
}

.cpu-chart-area {
  position: relative;
  height: 300px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.chart-placeholder {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 20px;
}

.chart-grid {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 40px;
  pointer-events: none;
}

.grid-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}

.chart-line {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 40px;
}

.cpu-line-chart {
  width: 100%;
  height: 100%;
}

.cpu-line-chart svg {
  width: 100%;
  height: 100%;
}

.chart-labels {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.y-labels {
  position: absolute;
  left: 10px;
  top: 20px;
  bottom: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  width: 40px;
}

.y-labels span {
  color: #888;
  font-size: 12px;
  font-weight: 500;
}

.x-labels {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 20px;
}

.x-labels span {
  color: #888;
  font-size: 12px;
  font-weight: 500;
}

/* Responsive design for CPU chart */

@media (max-width: 768px) {
  .cpu-chart-header {
    flex-direction: column;
    align-items: stretch;
  }
  
  .time-filter-buttons {
    justify-content: center;
  }
  
  .cpu-current-stats {
    grid-template-columns: 1fr;
  }
  
  .cpu-chart-area {
    height: 250px;
  }
  
  .chart-placeholder {
    padding: 15px;
  }
  
  .chart-grid {
    left: 15px;
  }
  
  .chart-line {
    left: 15px;
  }
  
  .y-labels {
    width: 30px;
  }
  
  .x-labels {
    left: 15px;
  }
}

@media (max-width: 480px) {
  .admin-cpu-section {
    padding: 20px;
    margin-top: 20px;
  }
  
  .cpu-chart-header h3 {
    font-size: 20px;
  }
  
  .time-filter-buttons .filter-btn {
    padding: 6px 12px;
    font-size: 12px;
    min-width: 35px;
  }
  
  .cpu-chart-area {
    height: 200px;
  }
}

/* Admin Charts Section */

.admin-charts-section {
  margin: 30px 0;
  padding: 30px;
  background: linear-gradient(135deg, rgba(22, 27, 34, 0.95), rgba(30, 41, 59, 0.95));
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.admin-charts-section h3 {
  color: #10b981;
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 25px 0;
  text-align: center;
  text-shadow: 0 0 15px rgba(16, 185, 129, 0.4);
}

.charts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.chart-container {
  background: linear-gradient(135deg, rgba(13, 17, 23, 0.8), rgba(22, 27, 34, 0.8));
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 15px;
  padding: 25px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.chart-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #10b981, #3b82f6, #8b5cf6);
  opacity: 0.6;
}

.chart-container:hover {
  transform: translateY(-3px);
  border-color: rgba(16, 185, 129, 0.5);
  box-shadow: 0 10px 30px rgba(16, 185, 129, 0.15);
}

.chart-container:hover::before {
  opacity: 1;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.chart-header h4 {
  color: #e2e8f0;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.chart-current {
  color: #10b981;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Space Mono', monospace;
}

.chart-wrapper {
  margin-bottom: 20px;
}

.progress-chart {
  width: 100%;
  height: 12px;
  background: rgba(30, 41, 59, 0.8);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  margin-bottom: 10px;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.progress-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.8s ease;
  position: relative;
  overflow: hidden;
}

.progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 2s infinite;
}

/* Admin user management */

.admin-tools-section {
  margin-top: 24px;
  padding: 24px;
  background: rgba(17, 24, 39, 0.8);
  border: 1px solid #30363d;
  border-radius: 16px;
}

.admin-tools-header h3 {
  margin: 0;
  color: #e2e8f0;
  font-size: 22px;
}

.admin-tools-header p {
  margin: 6px 0 0;
  color: #94a3b8;
}

.admin-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.admin-tool-card {
  background: linear-gradient(145deg, rgba(22, 27, 34, 0.95), rgba(30, 41, 59, 0.9));
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: 14px;
  padding: 18px;
  color: #e2e8f0;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-tool-card.danger {
  border-color: rgba(248, 113, 113, 0.45);
  background: linear-gradient(145deg, rgba(34, 6, 6, 0.9), rgba(48, 17, 17, 0.9));
}

.admin-card-header h4 {
  margin: 0;
  font-size: 18px;
  color: #fff;
}

.admin-hint {
  color: #94a3b8;
  font-size: 13px;
}

.admin-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-field label {
  font-size: 13px;
  color: #cbd5e1;
}

.admin-input {
  width: 100%;
  padding: 12px 12px;
  border-radius: 10px;
  border: 1px solid #334155;
  background: rgba(15, 23, 42, 0.8);
  color: #e2e8f0;
}

.admin-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.admin-textarea {
  min-height: 80px;
  resize: vertical;
}

.admin-button {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #3b82f6, #10b981);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.admin-button:hover:enabled {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(59, 130, 246, 0.25);
}

.admin-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.admin-button.danger {
  background: linear-gradient(135deg, #f43f5e, #ef4444);
}

.admin-ban-controls {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-ban-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.status-banned {
  background: rgba(248, 113, 113, 0.18);
  color: #fca5a5;
  border-color: rgba(248, 113, 113, 0.5);
}

.admin-user-summary {
  margin-top: 10px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid #30363d;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-user-identity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.identity-name {
  font-weight: 700;
  color: #e2e8f0;
}

.identity-username, .identity-email {
  font-size: 13px;
  color: #94a3b8;
}

.status-pill {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
}

.status-active { background: rgba(16, 185, 129, 0.15); color: #34d399; border-color: rgba(16, 185, 129, 0.4); }

.status-suspended { background: rgba(251, 191, 36, 0.15); color: #fbbf24; border-color: rgba(251, 191, 36, 0.4); }

.status-deleted { background: rgba(239, 68, 68, 0.15); color: #ef4444; border-color: rgba(239, 68, 68, 0.4); }

.status-unknown { background: rgba(148, 163, 184, 0.15); color: #cbd5e1; border-color: rgba(148, 163, 184, 0.4); }

.status-inactive { background: rgba(248, 113, 113, 0.15); color: #f87171; border-color: rgba(248, 113, 113, 0.4); }

.admin-user-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.stat-block {
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid #30363d;
  border-radius: 10px;
  padding: 10px;
}

.stat-block span {
  color: #94a3b8;
  font-size: 12px;
}

.stat-block strong {
  display: block;
  margin-top: 4px;
  color: #e2e8f0;
}

.stat-sub {
  margin-top: 6px;
  font-size: 12px;
  color: #94a3b8;
}

.admin-server-list {
  border: 1px solid #30363d;
  border-radius: 10px;
  padding: 10px;
  background: rgba(17, 24, 39, 0.7);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.server-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(48, 54, 61, 0.9);
}

.server-item.empty {
  justify-content: center;
  color: #94a3b8;
}

.server-id {
  color: #e2e8f0;
  font-weight: 600;
}

.server-meta {
  color: #94a3b8;
  font-size: 12px;
}

.server-more {
  text-align: center;
  color: #94a3b8;
  font-size: 13px;
}

.transfer-breakdown {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid #30363d;
  color: #cbd5e1;
  font-size: 13px;
}

.danger-text {
  color: #fca5a5;
  font-size: 13px;
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

.ram-progress {
  background: linear-gradient(90deg, #10b981, #059669);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}

.disk-progress {
  background: linear-gradient(90deg, #3b82f6, #2563eb);
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.4);
}

.chart-labels {
  display: flex;
  justify-content: space-between;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 500;
  margin-top: 8px;
  padding: 0 5px;
}

.chart-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.chart-stats .stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  background: rgba(30, 41, 59, 0.5);
  border-radius: 8px;
  border: 1px solid rgba(16, 185, 129, 0.1);
}

.chart-stats .stat-label {
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 500;
}

.chart-stats .stat-value {
  color: #10b981;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Space Mono', monospace;
}

/* CPU Chart Animations */

.cpu-line-chart {
  animation: fadeInChart 0.8s ease-out;
}

.cpu-line-chart svg {
  transition: all 0.3s ease;
}

.cpu-line-chart svg path {
  animation: drawPath 1.5s ease-out;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation-fill-mode: forwards;
}

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

@keyframes drawPath {
  to {
    stroke-dashoffset: 0;
  }
}

/* Tooltip animations */

.cpu-tooltip {
  animation: tooltipFadeIn 0.2s ease-out;
  transform-origin: bottom center;
}

@keyframes tooltipFadeIn {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Filter button transitions */

.time-filter-buttons .filter-btn {
  transition: all 0.3s ease;
}

.time-filter-buttons .filter-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

.time-filter-buttons .filter-btn.active {
  animation: pulseActive 0.5s ease-out;
}

@keyframes pulseActive {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* Chart transition when changing time periods */

.cpu-chart-area {
  transition: opacity 0.3s ease;
}

.cpu-chart-area.loading {
  opacity: 0.6;
}

/* Responsive design for charts */

@media (max-width: 1024px) {
  .charts-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .admin-charts-section {
    padding: 20px;
    margin: 20px 0;
  }
  
  .chart-container {
    padding: 20px;
  }
  
  .chart-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .chart-stats {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* Анимация для плавного перехода графика при изменении периодов времени */

.cpu-chart-container {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.cpu-chart-container.loading {
  opacity: 0.6;
  pointer-events: none;
  transform: scale(0.98);
}

.cpu-chart-container.loading .cpu-line-chart {
  animation: chartLoading 0.5s ease-in-out;
}

@keyframes chartLoading {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  50% {
    opacity: 0.3;
    transform: translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Support Chat Notification Styles */

.support-notification {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  color: white;
  padding: 12px 20px;
  border-radius: 25px;
  box-shadow: 0 8px 25px rgba(220, 38, 38, 0.4);
  cursor: pointer;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: 14px;
  animation: notificationBounce 2s infinite, notificationFadeIn 0.5s ease-out;
  transition: all 0.3s ease;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.support-notification:hover {
  transform: translateX(-50%) translateY(-3px);
  box-shadow: 0 12px 35px rgba(220, 38, 38, 0.6);
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.notification-arrow {
  font-size: 18px;
  font-weight: bold;
  animation: arrowBounce 1s infinite;
}

.notification-text {
  white-space: nowrap;
}

@keyframes notificationBounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  40% {
    transform: translateX(-50%) translateY(-5px);
  }
  60% {
    transform: translateX(-50%) translateY(-3px);
  }
}

@keyframes arrowBounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(3px);
  }
}

@keyframes notificationFadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Responsive styles for notification */

@media (max-width: 768px) {
  .support-notification {
    bottom: 20px;
    padding: 10px 16px;
    font-size: 13px;
  }
  
  .notification-arrow {
    font-size: 16px;
  }
}

/* Activity Section Styles */

.activity-section {
  padding: 30px;
  background: rgba(22, 27, 34, 0.8);
  border-radius: 15px;
  border: 1px solid #30363d;
  margin-bottom: 30px;
}

.activity-header {
  margin-bottom: 30px;
  text-align: center;
}

.activity-header h2 {
  color: #7dd3fc;
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.activity-subtitle {
  color: #8b949e;
  font-size: 16px;
  margin: 0;
}

.activity-content {
  max-width: 1000px;
  margin: 0 auto;
}

.activity-filters {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
  justify-content: center;
  flex-wrap: wrap;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.filter-group label {
  color: #e6edf3;
  font-size: 14px;
  font-weight: 500;
}

.filter-select {
  padding: 10px 15px;
  background: rgba(13, 17, 23, 0.8);
  border: 1px solid #30363d;
  border-radius: 8px;
  color: #e6edf3;
  font-size: 14px;
  min-width: 180px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter-select:focus {
  outline: none;
  border-color: #58a6ff;
  box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.2);
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.activity-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background: rgba(13, 17, 23, 0.6);
  border: 1px solid #30363d;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.activity-item:hover {
  border-color: #58a6ff;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(88, 166, 255, 0.1);
}

.activity-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.activity-icon.login {
  background: rgba(88, 166, 255, 0.2);
  border: 2px solid #58a6ff;
}

.activity-icon.server {
  background: rgba(46, 160, 67, 0.2);
  border: 2px solid #2ea043;
}

.activity-icon.payment {
  background: rgba(255, 193, 7, 0.2);
  border: 2px solid #ffc107;
}

.activity-icon.support {
  background: rgba(139, 92, 246, 0.2);
  border: 2px solid #8b5cf6;
}

.activity-details {
  flex: 1;
}

.activity-title {
  color: #e6edf3;
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 5px 0;
}

.activity-description {
  color: #8b949e;
  font-size: 14px;
  margin: 0 0 5px 0;
}

.activity-time {
  color: #58a6ff;
  font-size: 12px;
  font-weight: 500;
}

/* Sessions Section Styles */

.sessions-section {
  padding: 30px;
  background: rgba(22, 27, 34, 0.8);
  border-radius: 15px;
  border: 1px solid #30363d;
  margin-bottom: 30px;
}

.sessions-header {
  margin-bottom: 30px;
  text-align: center;
}

.sessions-header h2 {
  color: #7dd3fc;
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sessions-subtitle {
  color: #8b949e;
  font-size: 16px;
  margin: 0;
}

.sessions-content {
  max-width: 1200px;
  margin: 0 auto;
}

.sessions-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.session-stat-card {
  background: rgba(13, 17, 23, 0.6);
  border: 1px solid #30363d;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  transition: all 0.3s ease;
}

.session-stat-card:hover {
  border-color: #58a6ff;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(88, 166, 255, 0.1);
}

.stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(88, 166, 255, 0.2);
  border: 2px solid #58a6ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.stat-info {
  flex: 1;
}

.stat-number {
  color: #e6edf3;
  font-size: 24px;
  font-weight: 700;
  margin: 0;
}

.stat-label {
  color: #8b949e;
  font-size: 14px;
  margin: 0;
}

.sessions-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 30px;
}

.session-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  background: rgba(13, 17, 23, 0.6);
  border: 1px solid #30363d;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.session-item:hover {
  border-color: #58a6ff;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(88, 166, 255, 0.1);
}

.session-item.current {
  border-color: #2ea043;
  background: rgba(46, 160, 67, 0.05);
}

.session-device {
  display: flex;
  align-items: center;
  gap: 15px;
  flex: 1;
}

.device-icon {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: rgba(88, 166, 255, 0.2);
  border: 2px solid #58a6ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.device-info {
  flex: 1;
}

.device-name {
  color: #e6edf3;
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 5px 0;
}

.device-location {
  color: #8b949e;
  font-size: 14px;
  margin: 0 0 3px 0;
}

.device-ip {
  color: #58a6ff;
  font-size: 12px;
  font-family: 'Space Mono', monospace;
  margin: 0;
}

.session-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.status-badge {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.status-badge.current {
  background: rgba(46, 160, 67, 0.2);
  color: #2ea043;
  border: 1px solid #2ea043;
}

.status-badge.active {
  background: rgba(88, 166, 255, 0.2);
  color: #58a6ff;
  border: 1px solid #58a6ff;
}

.session-time {
  color: #8b949e;
  font-size: 12px;
  text-align: right;
}

.terminate-btn {
  background: rgba(248, 81, 73, 0.1);
  border: 1px solid #f85149;
  color: #f85149;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.terminate-btn:hover {
  background: rgba(248, 81, 73, 0.2);
  transform: translateY(-1px);
}

.sessions-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn.secondary {
  background: rgba(88, 166, 255, 0.1);
  border: 1px solid #58a6ff;
  color: #58a6ff;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.btn.secondary:hover {
  background: rgba(88, 166, 255, 0.2);
  transform: translateY(-2px);
}

.btn.danger {
  background: rgba(248, 81, 73, 0.1);
  border: 1px solid #f85149;
  color: #f85149;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.btn.danger:hover {
  background: rgba(248, 81, 73, 0.2);
  transform: translateY(-2px);
}

/* Mobile Responsive for Activity and Sessions */

@media (max-width: 768px) {
  .activity-section,
  .sessions-section {
    padding: 20px;
  }
  
  .activity-filters {
    flex-direction: column;
    align-items: center;
  }
  
  .filter-group {
    width: 100%;
    max-width: 300px;
  }
  
  .filter-select {
    width: 100%;
  }
  
  .activity-item {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }
  
  .sessions-stats {
    grid-template-columns: 1fr;
  }
  
  .session-item {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
  
  .session-device {
    flex-direction: column;
    text-align: center;
  }
  
  .session-status {
    align-items: center;
  }
  
  .sessions-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .btn.secondary,
  .btn.danger {
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }
}

/* Profile Section Styles */

.profile-section {
  background: transparent;
  border-radius: 20px;
  padding: 15px 20px;
  margin: 10px 0;
  backdrop-filter: blur(20px);
  animation: fadeInUp 0.8s ease-out;
}

.profile-info {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
}

.profile-avatar {
  display: flex;
  justify-content: center;
  align-items: center;
}

.avatar-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(135deg, #238636, #2ea043);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  font-weight: 700;
  color: white;
  box-shadow: 
    0 8px 25px rgba(35, 134, 54, 0.4),
    inset 0 2px 0 rgba(255, 255, 255, 0.2);
  border: 3px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.avatar-circle:hover {
  transform: scale(1.05);
  box-shadow: 
    0 12px 35px rgba(35, 134, 54, 0.6),
    inset 0 2px 0 rgba(255, 255, 255, 0.3);
}

.profile-details {
  flex: 1;
  min-width: 0;
}

.profile-details h3 {
  color: #e6edf3;
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 20px 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.profile-details p {
  color: #a5b4c2;
  font-size: 16px;
  margin: 12px 0;
  line-height: 1.5;
}

.profile-details p strong {
  color: #e6edf3;
  font-weight: 600;
}

.status {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
}

.status.active {
  background: rgba(46, 160, 67, 0.2);
  color: #2ea043;
  border: 1px solid #2ea043;
}

.status.suspended {
  background: rgba(248, 81, 73, 0.2);
  color: #f85149;
  border: 1px solid #f85149;
}

.profile-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 220px;
}

.profile-actions .btn {
  width: 100%;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
  text-align: center;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.profile-actions .btn.secondary {
  background: rgba(125, 211, 252, 0.1);
  color: #7dd3fc;
  border: 1px solid #7dd3fc;
}

.profile-actions .btn.secondary:hover {
  background: rgba(125, 211, 252, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(125, 211, 252, 0.3);
}

.profile-actions .btn.danger {
  background: rgba(248, 81, 73, 0.1);
  color: #f85149;
  border: 1px solid #f85149;
}

.profile-actions .btn.danger:hover {
  background: rgba(248, 81, 73, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(248, 81, 73, 0.3);
}

/* Responsive Design for Profile */

@media (max-width: 1024px) {
  .profile-info {
    grid-template-columns: 1fr;
    gap: 25px;
    text-align: center;
  }
  
  .profile-actions {
    max-width: 400px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .profile-section {
    padding: 20px;
    margin: 15px 0;
  }
  
  .profile-info {
    gap: 20px;
  }
  
  .avatar-circle {
    width: 100px;
    height: 100px;
    font-size: 40px;
  }
  
  .profile-details h3 {
    font-size: 24px;
    margin-bottom: 15px;
  }
  
  .profile-details p {
    font-size: 15px;
    margin: 10px 0;
  }
  
  .profile-actions {
    min-width: auto;
    max-width: 100%;
  }
  
  .profile-actions .btn {
    padding: 14px 20px;
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .profile-section {
    padding: 15px;
  }
  
  .avatar-circle {
    width: 80px;
    height: 80px;
    font-size: 32px;
  }
  
  .profile-details h3 {
    font-size: 20px;
  }
  
  .profile-details p {
    font-size: 14px;
  }
  
  .profile-actions .btn {
    padding: 12px 16px;
    font-size: 14px;
  }
}

/* Profile Enhancement Animations */

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

@keyframes shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

@keyframes glow {
  from {
    text-shadow: 0 2px 10px rgba(125, 211, 252, 0.3);
  }
  to {
    text-shadow: 0 4px 20px rgba(125, 211, 252, 0.6);
  }
}

@keyframes pulse {
  from {
    box-shadow: 
      0 15px 35px rgba(35, 134, 54, 0.4),
      0 5px 15px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
  to {
    box-shadow: 
      0 20px 45px rgba(35, 134, 54, 0.6),
      0 8px 25px rgba(0, 0, 0, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }
}
.two-factor-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  backdrop-filter: blur(5px);
}

.two-factor-modal {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 20px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
  max-width: 600px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideInScale 0.3s ease-out;
}

@keyframes slideInScale {
  from {
    opacity: 0;
    transform: translateY(-30px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes slideOutScale {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-30px) scale(0.9);
  }
}

.two-factor-modal.closing {
  animation: slideOutScale 0.3s ease-in forwards;
}

.two-factor-overlay.closing {
  animation: fadeOut 0.3s ease-in forwards;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes slideOutScale {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-30px) scale(0.9);
  }
}

.two-factor-modal.closing {
  animation: slideOutScale 0.3s ease-in forwards;
}

.two-factor-overlay.closing {
  animation: fadeOut 0.3s ease-in forwards;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.two-factor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px 30px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.two-factor-header h3 {
  margin: 0;
  color: white;
  font-size: 1.4rem;
  font-weight: 600;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.two-factor-close {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  font-size: 28px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  font-weight: 300;
}

.two-factor-close:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.two-factor-close:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.two-factor-content {
  padding: 30px;
}

.two-factor-alert {
  padding: 15px 20px;
  border-radius: 12px;
  margin-bottom: 25px;
  font-weight: 500;
  animation: fadeInUp 0.3s ease;
}

.two-factor-alert.success {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.two-factor-alert.error {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

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

.two-factor-loading {
  text-align: center;
  padding: 40px 20px;
  color: rgba(255, 255, 255, 0.9);
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top: 4px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 20px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.status-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 25px;
  margin-bottom: 25px;
  display: flex;
  align-items: center;
  gap: 20px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.status-card.enabled {
  background: rgba(34, 197, 94, 0.2);
  border-color: rgba(34, 197, 94, 0.3);
}

.status-card.disabled {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.3);
}

.status-icon {
  font-size: 3rem;
  line-height: 1;
}

.status-info h4 {
  margin: 0 0 8px 0;
  color: white;
  font-size: 1.3rem;
  font-weight: 600;
}

.status-info p {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
}

.telegram-info {
  color: #22c55e !important;
  font-weight: 500;
  margin-top: 8px !important;
}

.link-date {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 0.9rem;
  margin-top: 5px !important;
}

.two-factor-info,
.two-factor-benefits {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 25px;
  color: rgba(255, 255, 255, 0.9);
}

.two-factor-info h4,
.two-factor-benefits h4 {
  margin: 0 0 15px 0;
  color: white;
  font-size: 1.1rem;
}

.two-factor-benefits ul {
  margin: 0;
  padding-left: 20px;
}

.two-factor-benefits li {
  margin-bottom: 8px;
  line-height: 1.4;
}

.command-box {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 12px 16px;
  margin: 15px 0;
  font-family: 'Courier New', monospace;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.command-box code {
  color: #22c55e;
  font-size: 1.1rem;
  font-weight: 500;
}

.warning-text {
  color: #fbbf24 !important;
  font-weight: 500;
  margin-top: 15px !important;
}

.link-telegram {
  color: rgba(255, 255, 255, 0.9);
}

.link-telegram h4,
.link-telegram h5 {
  color: white;
  margin-bottom: 15px;
}

.link-container {
  margin: 20px 0;
}

.link-box {
  display: flex;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 15px;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.telegram-link {
  flex: 1;
  color: #22c55e;
  text-decoration: none;
  font-weight: 500;
  word-break: break-all;
  padding: 8px 12px;
  background: rgba(34, 197, 94, 0.1);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.telegram-link:hover {
  background: rgba(34, 197, 94, 0.2);
  transform: translateY(-1px);
}

.copy-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 1.1rem;
}

.copy-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

.link-info {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 15px;
  margin: 20px 0;
  font-size: 0.95rem;
}

.link-info code {
  background: rgba(0, 0, 0, 0.3);
  padding: 4px 8px;
  border-radius: 4px;
  color: #22c55e;
  font-weight: 500;
}

.instructions {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 20px;
  margin: 20px 0;
}

.instructions h5 {
  margin: 0 0 15px 0;
  color: white;
}

.instructions ol {
  margin: 0;
  padding-left: 20px;
}

.instructions li {
  margin-bottom: 10px;
  line-height: 1.5;
}

.two-factor-actions {
  display: flex;
  gap: 15px;
  justify-content: flex-end;
  margin-top: 30px;
  flex-wrap: wrap;
}

.btn-primary,
.btn-secondary,
.btn-danger {
  padding: 12px 24px;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 1rem;
  min-width: 140px;
}

.btn-primary {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.btn-secondary:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

.btn-danger {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
}

.btn-danger:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.5);
}

.btn-primary:disabled,
.btn-secondary:disabled,
.btn-danger:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Responsive design */
@media (max-width: 768px) {
  .two-factor-modal {
    width: 95%;
    margin: 10px;
    border-radius: 16px;
  }
  
  .two-factor-header {
    padding: 20px 20px 15px;
  }
  
  .two-factor-header h3 {
    font-size: 1.2rem;
  }
  
  .two-factor-content {
    padding: 20px;
  }
  
  .status-card {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }
  
  .status-icon {
    font-size: 2.5rem;
  }
  
  .two-factor-actions {
    flex-direction: column;
  }
  
  .btn-primary,
  .btn-secondary,
  .btn-danger {
    width: 100%;
    min-width: auto;
  }
  
  .link-box {
    flex-direction: column;
    gap: 15px;
  }
  
  .telegram-link {
    text-align: center;
  }
}

/* Dark theme compatibility */
@media (prefers-color-scheme: dark) {
  .two-factor-modal {
    background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
  }
}

/* Centered link styles */
.link-section-centered {
  text-align: center;
  margin: 30px 0;
}

.link-header {
  margin-bottom: 25px;
}

.link-header h4 {
  color: white;
  font-size: 1.3rem;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.link-container-centered {
  display: flex;
  justify-content: center;
  margin: 25px 0;
}

.link-display-main {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 20px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  max-width: 500px;
  width: 100%;
}

.link-text-centered {
  display: block;
  color: #22c55e;
  text-decoration: none;
  font-weight: 600;
  word-break: break-all;
  padding: 15px;
  background: rgba(34, 197, 94, 0.15);
  border-radius: 10px;
  margin-bottom: 15px;
  transition: all 0.3s ease;
  font-size: 1.05rem;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.link-text-centered:hover {
  background: rgba(34, 197, 94, 0.25);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(34, 197, 94, 0.2);
}

.copy-btn-centered {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  border: none;
  color: white;
  padding: 12px 20px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1rem;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
}

.copy-btn-centered:hover {
  background: linear-gradient(135deg, #16a34a, #15803d);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4);
}

.link-info-centered {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 20px;
  margin-top: 25px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.expires-info {
  color: #fbbf24;
  font-size: 1rem;
  margin-bottom: 10px;
  font-weight: 500;
}

.instruction-text {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1rem;
  margin-bottom: 15px;
}

.security-note {
  color: #22c55e !important;
  font-weight: 500;
  margin-top: 10px !important;
}

/* Scrollbar styling */
.two-factor-modal::-webkit-scrollbar {
  width: 8px;
}

.two-factor-modal::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.two-factor-modal::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
}

.two-factor-modal::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}/* Admin Chat Interface Styles - Telegram Desktop Style */

.admin-chat-container {
  display: flex;
  height: calc(100vh - 140px); /* fallback для старых браузеров */
  height: calc(100svh - 140px); /* стабильная высота без дерганий адресной строки */
  min-height: 500px;
  background: #17212b;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  overscroll-behavior: none; /* предотвращаем «прокрутку родителя» */
}

/* Блокируем скролл основного контейнера дашборда, когда открыт админ-чат */
.dashboard-main:has(.admin-chat-container) {
  overflow: hidden !important;
}

/* Left Sidebar - Chat List */
.admin-chat-sidebar {
  width: 350px;
  background: #2b5278;
  border-right: 1px solid #0f1419;
  display: flex;
  flex-direction: column;
}

.admin-chat-header {
  padding: 20px;
  background: #2b5278;
  border-bottom: 1px solid #0f1419;
}

.admin-chat-header h2 {
  color: #ffffff;
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 15px 0;
}

.admin-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-filters button {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #ffffff;
  padding: 8px 12px;
  border-radius: 16px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.admin-filters button:hover {
  background: rgba(255, 255, 255, 0.2);
}

.admin-filters button.active {
  background: #5288c1;
  color: #ffffff;
}

.admin-tickets-list {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

.admin-ticket-item {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: background-color 0.2s ease;
  position: relative;
}

.admin-ticket-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.admin-ticket-item.selected {
  background: #5288c1;
}

.admin-chat-item.has-unread {
  background: rgba(40, 167, 69, 0.1);
  border-left: 3px solid #28a745;
}

.admin-chat-item.has-unread:not(.selected):hover {
  background: rgba(40, 167, 69, 0.15);
}

.chat-unread-count {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #28a745;
  color: #ffffff;
  border-radius: 10px;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 600;
  min-width: 18px;
  text-align: center;
}

.chat-online-status {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #28a745;
}

.chat-online-status.offline {
  background: #6c757d;
}

.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.chat-user {
  color: #ffffff;
  font-weight: 600;
  font-size: 15px;
}

.chat-time {
  color: #8bb4d1;
  font-size: 12px;
}

.chat-preview {
  color: #8bb4d1;
  font-size: 14px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 8px;
}

.chat-status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.chat-status-badge.open {
  background: rgba(46, 160, 67, 0.2);
  color: #2ea043;
}

.chat-status-badge.closed {
  background: rgba(139, 148, 158, 0.2);
  color: #8b949e;
}

/* Right Panel - Chat Window */
.admin-chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #17212b;
}

.admin-chat-main .admin-chat-header {
  background: #17212b;
  border-bottom: 1px solid #0f1419;
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chat-user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.chat-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #5288c1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 600;
  font-size: 16px;
}

.chat-user-details h3 {
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.chat-user-email {
  color: #8bb4d1;
  font-size: 13px;
}

.chat-actions {
  display: flex;
  gap: 8px;
}

.chat-action-btn {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #ffffff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.chat-action-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.chat-action-btn.close {
  background: rgba(244, 67, 54, 0.2);
  color: #f44336;
}

.chat-action-btn.close:hover {
  background: rgba(244, 67, 54, 0.3);
}

.chat-action-btn.reopen {
  background: rgba(76, 175, 80, 0.2);
  color: #4caf50;
}

.chat-action-btn.reopen:hover {
  background: rgba(76, 175, 80, 0.3);
}

.chat-messages {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  background: #0e1621;
}

.chat-message {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
}

.chat-message.user {
  align-items: flex-end;
}

.chat-message.support {
  align-items: flex-start;
}

.message-bubble {
  max-width: 70%;
  padding: 12px 16px;
  border-radius: 18px;
  word-wrap: break-word;
}

.chat-message.user .message-bubble {
  background: #5288c1;
  color: #ffffff;
  border-bottom-right-radius: 4px;
}

.chat-message.support .message-bubble {
  background: #2b5278;
  color: #ffffff;
  border-bottom-left-radius: 4px;
}

.message-time {
  font-size: 11px;
  color: #8bb4d1;
  margin-top: 4px;
  padding: 0 4px;
}

.chat-input-container {
  padding: 16px 20px;
  background: #17212b;
  border-top: 1px solid #0f1419;
  display: flex;
  gap: 12px;
  align-items: flex-end;
}

.chat-input {
  flex: 1;
  background: #2b5278;
  border: none;
  border-radius: 20px;
  padding: 12px 16px;
  color: #ffffff;
  font-size: 14px;
  resize: none;
  min-height: 20px;
  max-height: 100px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.chat-input:focus {
  box-shadow: 0 0 0 2px rgba(82, 136, 193, 0.3);
  background: #3a5f8a;
}

.chat-input::-moz-placeholder {
  color: #8bb4d1;
}

.chat-input::placeholder {
  color: #8bb4d1;
}

.chat-send-btn {
  background: #5288c1;
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #ffffff;
  font-size: 18px;
  min-width: 44px;
}

.chat-send-btn:hover:not(:disabled) {
  background: #4a7ba7;
  transform: scale(1.05);
}

.chat-send-btn:active:not(:disabled) {
  transform: scale(0.98);
}

.chat-send-btn:disabled {
  background: rgba(255, 255, 255, 0.1);
  cursor: not-allowed;
  transform: none;
  opacity: 0.6;
}

.admin-chat-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #8bb4d1;
  text-align: center;
}

.admin-chat-empty h3 {
  color: #ffffff;
  margin-bottom: 8px;
}

.admin-chat-empty p {
  color: #8bb4d1;
  margin: 0;
}

/* Scrollbar Styles */
.admin-tickets-list,
.chat-messages {
  scrollbar-gutter: stable both-edges; /* избегаем смещения контента при появлении/скрытии скролла */
  overscroll-behavior: contain; /* не пробрасывать скролл наверх */
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch; /* плавность без дёрганий на iOS */
  scroll-behavior: auto; /* отключаем smooth для стабильности */
  touch-action: pan-y; /* только вертикальная прокрутка */
  overflow-anchor: none; /* отключает «привязку» прокрутки для исключения скачков */
}
.admin-tickets-list::-webkit-scrollbar,
.chat-messages::-webkit-scrollbar {
  width: 6px;
}

.admin-tickets-list::-webkit-scrollbar-track,
.chat-messages::-webkit-scrollbar-track {
  background: transparent;
}

.admin-tickets-list::-webkit-scrollbar-thumb,
.chat-messages::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.admin-tickets-list::-webkit-scrollbar-thumb:hover,
.chat-messages::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Loading Messages Styles */
.loading-messages {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: #8bb4d1;
  font-size: 14px;
}

.loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(139, 180, 209, 0.3);
  border-top: 3px solid #5288c1;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 12px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Ticket Messages List */
.ticket-messages-list {
  padding: 10px 0;
}

.ticket-messages-list .message {
  margin-bottom: 12px;
}

.ticket-messages-list .message.admin .message-content {
  background: #5288c1;
  margin-left: 20px;
  margin-right: 60px;
}

.ticket-messages-list .message.user .message-content {
  background: #2f3349;
  margin-left: 60px;
  margin-right: 20px;
}

/* Анимация для новых сообщений */
@keyframes newMessagePulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

.admin-ticket-item.has-unread {
  animation: newMessagePulse 2s ease-in-out infinite;
}

.admin-ticket-item.has-unread:hover {
  animation: none;
}

/* Быстрые ответы */
.quick-replies {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.quick-reply-btn {
  background: rgba(82, 136, 193, 0.2);
  border: 1px solid #5288c1;
  color: #ffffff;
  padding: 6px 12px;
  border-radius: 15px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.quick-reply-btn:hover {
  background: rgba(82, 136, 193, 0.4);
  transform: translateY(-1px);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .admin-chat-container {
    flex-direction: column;
    height: calc(100vh - 150px); /* fallback */
    height: calc(100svh - 150px); /* стабильная высота */
  }
  
  .admin-chat-sidebar {
    width: 100%;
    height: 300px; /* фиксированная зона, остальное займёт main */
  }
  
  .admin-chat-main {
    height: calc(100% - 300px);
    min-height: 0; /* позволяет корректно сжиматься без прыжков */
  }
  
  .message-bubble {
    max-width: 85%;
  }
  
  .quick-replies {
    gap: 5px;
  }
  
  .quick-reply-btn {
    font-size: 11px;
    padding: 4px 8px;
  }
}

@media (max-width: 480px) {
  .admin-chat-sidebar {
    height: 250px;
  }
  
  .admin-chat-header {
    padding: 15px;
  }
  
  .admin-ticket-item {
    padding: 12px 15px;
  }
  
  .chat-input-container {
    padding: 12px 15px;
  }
  
  .ticket-messages-list .message.admin .message-content {
    margin-left: 10px;
    margin-right: 40px;
  }
  
  .ticket-messages-list .message.user .message-content {
    margin-left: 40px;
    margin-right: 10px;
  }
}/* Beautiful Dashboard Home Section Styles */

/* Welcome Section */
.welcome-section {
  margin-bottom: 40px;
}

.welcome-card {
  background: linear-gradient(135deg, #238636, #2ea043);
  border-radius: 20px;
  padding: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 10px 30px rgba(35, 134, 54, 0.3);
  position: relative;
  overflow: hidden;
}

.welcome-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent);
  border-radius: 50%;
}

.welcome-content h2 {
  margin: 0 0 10px 0;
  color: white;
  font-size: 28px;
  font-weight: 700;
}

.welcome-content p {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
}

.welcome-time {
  text-align: right;
  color: white;
}

.welcome-time .current-time {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 5px;
  font-family: 'Space Mono', monospace;
}

.welcome-time .current-date {
  font-size: 18px;
  opacity: 0.9;
}

/* Stats Cards */
.stats-cards {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 0px;
  flex-wrap: wrap;
}

.stat-card {
  background: rgba(22, 27, 34, 0.8);
  border: 1px solid #30363d;
  border-radius: 20px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  width: 400px;
  height: 480px;
  aspect-ratio: 3/4;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(35, 134, 54, 0.1), transparent);
  transition: left 0.5s;
}

.stat-card:hover::before {
  left: 100%;
}

.stat-card:hover {
  border-color: #238636;
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(35, 134, 54, 0.2);
}

.stat-icon {
  font-size: 300px;
  width: 320px;
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-radius: 15px;
  border: none;
}

.stat-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.stat-content h3 {
  margin: 0 0 20px 0;
  color: #7dd3fc;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.stat-value {
  font-size: 220px;
  font-weight: 900;
  margin-bottom: 15px;
  font-family: 'Space Mono', monospace;
  color: #e6edf3;
  line-height: 1.1;
}

.stat-value.positive {
  color: #2ea043;
}

.stat-value.negative {
  color: #f85149;
}

.stat-detail {
  color: #8b949e;
  font-size: 24px;
  font-weight: 600;
  opacity: 0.9;
}

.stat-warning {
  color: #ffc107;
  font-size: 36px;
  font-weight: 600;
}

.stat-action {
  background: linear-gradient(135deg, #238636, #2ea043, #40d05a);
  color: white;
  border: none;
  padding: 16px 32px;
  border-radius: 12px;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(35, 134, 54, 0.25);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
  min-width: 160px;
  pointer-events: auto !important;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.stat-action::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.stat-action:hover::before {
  left: 100%;
}

.stat-action:hover {
  background: linear-gradient(135deg, #2ea043, #40d05a, #238636);
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 25px rgba(35, 134, 54, 0.4);
}

.stat-action:active {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 4px 15px rgba(35, 134, 54, 0.5);
}

/* Compact height for home stats cards */
.stat-card.panel-stat,
.stat-card.balance-stat {
  height: clamp(240px, 30vh, 300px);
  padding: clamp(12px, 1.4vw, 18px);
  gap: clamp(8px, 1.2vw, 14px);
}

.stat-card.panel-stat .stat-icon,
.stat-card.balance-stat .stat-icon {
  width: clamp(120px, 14vw, 170px);
  height: clamp(120px, 14vw, 170px);
  font-size: clamp(110px, 13vw, 160px);
}

.stat-card.panel-stat .stat-content,
.stat-card.balance-stat .stat-content {
  flex: 0;
  justify-content: flex-start;
  gap: 6px;
  transform: translateY(-8px);
  margin-bottom: 6px;
}

.stat-card.panel-stat .stat-content h3,
.stat-card.balance-stat .stat-content h3 {
  font-size: clamp(20px, 2.2vw, 26px);
  margin-bottom: 8px;
}

.stat-card.panel-stat .stat-detail {
  font-size: clamp(14px, 1.6vw, 18px);
}

.stat-card.balance-stat .stat-value {
  font-size: clamp(52px, 5vw, 82px);
  margin-bottom: 6px;
}

.stat-card.balance-stat .stat-warning {
  font-size: clamp(16px, 2vw, 24px);
}

.stat-card.panel-stat .stat-action,
.stat-card.balance-stat .stat-action {
  padding: 10px 20px;
  font-size: 16px;
  min-width: 120px;
}

/* Quick Actions Section */
.quick-actions-section {
  margin-bottom: 40px;
}

.quick-actions-section h3 {
  margin: 0 0 25px 0;
  color: #7dd3fc;
  font-size: 24px;
  font-weight: 600;
}

.actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.action-card {
  background: rgba(22, 27, 34, 0.8);
  border: 1px solid #30363d;
  border-radius: 15px;
  padding: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 20px;
}

.action-card:hover {
  border-color: #238636;
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(35, 134, 54, 0.2);
}

.action-icon {
  font-size: 30px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-radius: 12px;
  border: none;
}

.action-content h4 {
  margin: 0 0 8px 0;
  color: #e6edf3;
  font-size: 18px;
  font-weight: 600;
}

.action-content p {
  margin: 0;
  color: #8b949e;
  font-size: 18px;
}

/* Recent Servers Section */
.recent-servers-section {
  margin-bottom: 0px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.section-header h3 {
  margin: 0;
  color: #7dd3fc;
  font-size: 24px;
  font-weight: 600;
}

.see-all-btn {
  background: none;
  border: 1px solid #7dd3fc;
  color: #7dd3fc;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.see-all-btn:hover {
  background: rgba(125, 211, 252, 0.1);
  transform: translateX(5px);
}

.servers-preview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.server-preview-card {
  background: rgba(22, 27, 34, 0.8);
  border: 1px solid #30363d;
  border-radius: 12px;
  padding: 20px;
  transition: all 0.3s ease;
}

.server-preview-card:hover {
  border-color: #238636;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(35, 134, 54, 0.2);
}

.server-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.server-name {
  color: #e6edf3;
  font-size: 18px;
  font-weight: 600;
}

.server-status {
  font-size: 20px;
}

.server-preview-details {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
  font-size: 18px;
  color: #8b949e;
}

.server-preview-actions {
  display: flex;
  gap: 10px;
}

.btn-mini {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-mini.primary {
  background: linear-gradient(45deg, #238636, #2ea043);
  color: white;
}

.btn-mini.primary:hover {
  background: linear-gradient(45deg, #2ea043, #238636);
  transform: translateY(-1px);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .welcome-card {
    flex-direction: column;
    text-align: center;
    gap: 20px;
    padding: 30px 20px;
  }
  
  .welcome-content h2 {
    font-size: 24px;
  }
  
  .welcome-time .current-time {
    font-size: 28px;
  }
  
  .stats-cards {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .actions-grid {
    grid-template-columns: 1fr;
  }
  
  .servers-preview {
    grid-template-columns: 1fr;
  }
  
  .server-preview-details {
    flex-direction: column;
    gap: 8px;
  }
}

/* Bigger balance on main dashboard card only */
.balance-stat .stat-value {
  font-size: 45px;
}
/* Beautiful Servers Section Styles */

/* Servers Page Header */
.servers-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 40px;
  padding: 30px;
  background: linear-gradient(135deg, rgba(22, 27, 34, 0.95), rgba(13, 17, 23, 0.95));
  border-radius: 20px;
  border: 1px solid #30363d;
}

.page-title-section {
  flex: 1;
}

.page-title {
  margin: 0 0 10px 0;
  color: #7dd3fc;
  font-size: 32px;
  font-weight: 700;
  font-family: 'Orbitron', monospace;
}

.page-subtitle {
  margin: 0;
  color: #8b949e;
  font-size: 20px;
  font-weight: 400;
}

.create-server-btn {
  background: linear-gradient(45deg, #238636, #2ea043);
  color: white;
  border: none;
  padding: 15px 30px;
  border-radius: 12px;
  font-size: 20px;
  font-weight: 600;
  cursor: pointer !important;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(35, 134, 54, 0.3);
  pointer-events: auto !important;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.create-server-btn:hover {
  background: linear-gradient(45deg, #2ea043, #238636);
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(35, 134, 54, 0.4);
}

.btn-icon {
  font-size: 18px;
}

/* Servers Stats */
.servers-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.stat-item {
  background: rgba(22, 27, 34, 0.8);
  border: 1px solid #30363d;
  border-radius: 15px;
  padding: 25px;
  display: flex;
  align-items: center;
  gap: 20px;
  transition: all 0.3s ease;
}

.stat-item:hover {
  border-color: #238636;
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(35, 134, 54, 0.2);
}

.stat-icon {
  font-size: 36px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}

.stat-icon.active {
  background: rgba(46, 160, 67, 0.1);
  border: 1px solid #2ea043;
}

.stat-icon.inactive {
  background: rgba(248, 81, 73, 0.1);
  border: 1px solid #f85149;
}

.stat-icon.total {
  background: rgba(125, 211, 252, 0.1);
  border: 1px solid #7dd3fc;
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: #e6edf3;
  font-family: 'Space Mono', monospace;
  margin-bottom: 5px;
}

.stat-label {
  color: #8b949e;
  font-size: 18px;
  font-weight: 500;
}

/* Empty State Modern */
.empty-state-modern {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 80px 40px;
  background: rgba(22, 27, 34, 0.8);
  border: 1px solid #30363d;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}

.empty-visual {
  position: relative;
  margin-bottom: 40px;
}

.empty-icon-large {
  font-size: 120px;
  opacity: 0.7;
  animation: float 3s ease-in-out infinite;
}

.empty-particles {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
}

.particle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #238636;
  border-radius: 50%;
  animation: particle-float 4s infinite;
}

.particle:nth-child(1) {
  top: 20%;
  left: 20%;
  animation-delay: 0s;
}

.particle:nth-child(2) {
  top: 20%;
  right: 20%;
  animation-delay: 1s;
}

.particle:nth-child(3) {
  bottom: 20%;
  left: 50%;
  animation-delay: 2s;
}

@keyframes particle-float {
  0%, 100% {
    transform: translateY(0px);
    opacity: 0.7;
  }
  50% {
    transform: translateY(-20px);
    opacity: 1;
  }
}

.empty-content h3 {
  margin: 0 0 15px 0;
  color: #7dd3fc;
  font-size: 28px;
  font-weight: 600;
}

.empty-content p {
  margin: 0 0 30px 0;
  color: #8b949e;
  font-size: 20px;
  max-width: 500px;
}

.cta-button {
  background: linear-gradient(45deg, #238636, #2ea043);
  color: white;
  border: none;
  padding: 18px 36px;
  border-radius: 15px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 6px 25px rgba(35, 134, 54, 0.3);
}

.cta-button:hover {
  background: linear-gradient(45deg, #2ea043, #238636);
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(35, 134, 54, 0.4);
}

.cta-icon {
  font-size: 20px;
}

/* Beautiful Servers Grid */
.beautiful-servers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 30px;
}

.beautiful-server-card {
  background: rgba(22, 27, 34, 0.95);
  border: 1px solid #30363d;
  border-radius: 20px;
  padding: 30px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.beautiful-server-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(35, 134, 54, 0.05), transparent);
  transition: left 0.5s;
}

.beautiful-server-card:hover::before {
  left: 100%;
}

.beautiful-server-card:hover {
  border-color: #238636;
  transform: translateY(-8px);
  box-shadow: 0 15px 40px rgba(35, 134, 54, 0.2);
}

.beautiful-server-card.active {
  border-color: #2ea043;
}

.server-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 25px;
}

.server-title-section {
  flex: 1;
}

.server-title {
  margin: 0 0 10px 0;
  color: #e6edf3;
  font-size: 24px;
  font-weight: 700;
}

.server-status-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 18px;
  font-weight: 600;
}

.server-status-badge.active {
  background: rgba(46, 160, 67, 0.15);
  color: #2ea043;
  border: 1px solid #2ea043;
}

.server-status-badge:not(.active) {
  background: rgba(248, 81, 73, 0.15);
  color: #f85149;
  border: 1px solid #f85149;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.server-type-badge {
  background: rgba(125, 211, 252, 0.1);
  color: #7dd3fc;
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 600;
  border: 1px solid #7dd3fc;
}

/* Server Details Grid */
.server-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  background: rgba(13, 17, 23, 0.6);
  border-radius: 12px;
  border: 1px solid #21262d;
}

.detail-icon {
  font-size: 20px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(35, 134, 54, 0.1);
  border-radius: 10px;
  border: 1px solid #238636;
}

.detail-content {
  flex: 1;
}

.detail-label {
  color: #8b949e;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 4px;
}

.detail-value {
  color: #e6edf3;
  font-size: 20px;
  font-weight: 600;
}

.detail-value.server-ip {
  font-family: 'Space Mono', monospace;
  font-size: 18px;
  color: #7dd3fc;
}

/* Server Actions Modern */
.server-actions-modern {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.action-btn {
  flex: 1;
  min-width: 120px;
  padding: 12px 18px;
  border: none;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.3s ease;
  pointer-events: auto !important;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.action-btn.primary-action {
  background: linear-gradient(45deg, #238636, #2ea043);
  color: white;
}

.action-btn.primary-action:hover {
  background: linear-gradient(45deg, #2ea043, #238636);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(35, 134, 54, 0.3);
}

.action-btn.secondary-action {
  background: rgba(125, 211, 252, 0.1);
  color: #7dd3fc;
  border: 1px solid #7dd3fc;
}

.action-btn.secondary-action:hover {
  background: rgba(125, 211, 252, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(125, 211, 252, 0.2);
}

.action-btn.danger-action {
  background: rgba(248, 81, 73, 0.1);
  color: #f85149;
  border: 1px solid #f85149;
}

.action-btn.danger-action:hover {
  background: rgba(248, 81, 73, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(248, 81, 73, 0.2);
}

.action-icon {
  font-size: 20px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .servers-page-header {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
  
  .page-title {
    font-size: 24px;
  }
  
  .servers-stats {
    grid-template-columns: 1fr;
  }
  
  .beautiful-servers-grid {
    grid-template-columns: 1fr;
  }
  
  .server-details-grid {
    grid-template-columns: 1fr;
  }
  
  .server-actions-modern {
    flex-direction: column;
  }
  
  .action-btn {
    min-width: auto;
  }
  
  .empty-state-modern {
    padding: 60px 20px;
  }
  
  .empty-icon-large {
    font-size: 80px;
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}
/* Smooth Section Transitions - No Flicker */

/* Prevent white flashes during transitions */
.dashboard-main {
  background: transparent;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

.dashboard-content {
  background: transparent;
  min-height: 0;
  position: relative;
  isolation: isolate;
}

/* Ensure consistent background during transitions */
.dashboard-content::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  z-index: -1;
  pointer-events: none;
}

.dashboard-content-wrapper {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
              transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform-style: preserve-3d;
}

.dashboard-content-wrapper.transitioning {
  opacity: 0;
  transform: translateY(2px) scale(0.995);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform-style: preserve-3d;
  will-change: opacity, transform;
  pointer-events: none;
}

/* Enhanced Navigation Transitions */
.dashboard-nav .nav-item {
  transition: all 0.3s ease;
  position: relative;
}

.dashboard-nav .nav-item::before,
.dashboard-nav .nav-item::after {
  content: '';
  position: absolute;
  bottom: 0px;
  left: 12%;
  right: 12%;
  border-radius: 999px;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.35s ease, opacity 0.35s ease;
  opacity: 0;
}

.dashboard-nav .nav-item:hover::before {
  transform: scaleX(1);
  opacity: 1;
}

.dashboard-nav .nav-item::before {
  height: 3px;
  background: linear-gradient(90deg, rgba(0, 255, 136, 0), #2ea043, #00ff88, #2ea043, rgba(0, 255, 136, 0));
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
}

.dashboard-nav .nav-item::after {
  height: 8px;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 136, 0.45), transparent);
  filter: blur(6px);
}

.dashboard-nav .nav-item:hover::after {
  transform: scaleX(1);
  opacity: 0.9;
}

/* Stat Cards Enhanced Animations */
.stat-card {
  position: relative;
  overflow: hidden;
}

.stat-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(35, 134, 54, 0.1), transparent);
  transition: left 0.6s ease;
}

.stat-card:hover::after {
  left: 100%;
}

/* Action Cards Smooth Hover */
.action-card {
  position: relative;
  overflow: hidden;
}

.action-card::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, rgba(35, 134, 54, 0.1), transparent);
  transition: all 0.4s ease;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.action-card:hover::before {
  width: 300px;
  height: 300px;
}

/* Button Press Animations */
.stat-action,
.create-server-btn,
.cta-button {
  transform: translateY(0);
  box-shadow: 0 4px 15px rgba(35, 134, 54, 0.2);
  transition: all 0.2s ease;
}

.stat-action:active,
.create-server-btn:active,
.cta-button:active {
  transform: translateY(2px);
  box-shadow: 0 2px 8px rgba(35, 134, 54, 0.3);
}

/* Loading Animation Enhancement */
.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;
  padding: 60px;
  color: #7dd3fc;
  font-size: 18px;
}

.loading::after {
  content: '';
  width: 40px;
  height: 40px;
  border: 3px solid #30363d;
  border-top: 3px solid #238636;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-top: 20px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Page Entrance Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dashboard-content > * {
  animation: fadeInUp 0.5s ease-out;
}

/* Staggered Animation for Cards */
.stats-cards .stat-card:nth-child(1) {
  animation-delay: 0.1s;
}

.stats-cards .stat-card:nth-child(2) {
  animation-delay: 0.2s;
}

.stats-cards .stat-card:nth-child(3) {
  animation-delay: 0.3s;
}

.actions-grid .action-card:nth-child(1) {
  animation-delay: 0.2s;
}

.actions-grid .action-card:nth-child(2) {
  animation-delay: 0.3s;
}

.actions-grid .action-card:nth-child(3) {
  animation-delay: 0.4s;
}

/* Smooth Scroll for Content Areas */
.dashboard-content {
  scroll-behavior: smooth;
}

/* Enhanced Focus States */
.stat-action:focus,
.action-card:focus {
  outline: 2px solid #238636;
  outline-offset: 2px;
}

/* Mobile Optimization */
@media (max-width: 768px) {
  .dashboard-content-wrapper.transitioning {
    transform: translateY(5px);
  }
  
  .dashboard-content > * {
    animation-duration: 0.3s;
  }
}

/* Removed delayed-in animation to avoid conflicts with transitioning */

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .dashboard-content-wrapper,
  .dashboard-content-wrapper.delayed-in {
    transition: none !important;
    animation: none !important;
  }
}
/* Modern Balance Section Styles */

.balance-section-modern {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 18px 22px 26px;
  max-width: 1200px;
  margin: 0 auto;
}

.balance-header {
  text-align: center;
  margin-bottom: 20px;
}

.balance-header h2 {
  font-size: 2.5rem;
  font-weight: 800;
  color: #40d05a;
  margin-bottom: 20px;
  text-shadow: 0 0 25px rgba(64, 208, 90, 0.4);
}

.balance-subtitle {
  font-size: 1.5rem;
  color: #7dd3fc;
  opacity: 0.9;
  font-weight: 500;
}

.balance-cards-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: start;
}

/* Balance Display Card */
.balance-display-card {
  background: rgba(22, 27, 34, 0.8);
  border: 1px solid #238636;
  border-radius: 20px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 25px;
  position: relative;
  overflow: hidden;
}

.balance-display-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #238636, #2ea043, #40d05a, #238636);
  animation: balance-glow 3s ease-in-out infinite;
}

.balance-display-card.negative {
  border-color: #f85149;
}

.balance-display-card.negative::before {
  background: linear-gradient(90deg, #f85149, #ff6b6b, #ff8a8a, #f85149);
}

.balance-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  margin: 0 auto;
}

.balance-info {
  text-align: center;
  flex: 1;
}

.balance-label {
  font-size: 1.8rem;
  color: #7dd3fc;
  margin-bottom: 20px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1.2px;
}

.balance-amount {
  font-size: 3rem;
  font-weight: 900;
  font-family: 'Space Mono', monospace;
  margin-bottom: 25px;
  text-shadow: 0 0 20px currentColor;
}

.balance-amount.positive {
  color: #40d05a;
}

.balance-amount.negative {
  color: #f85149;
}

.balance-warning-modern {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(248, 81, 73, 0.1);
  border: 1px solid #f85149;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 0.9rem;
  color: #f85149;
  font-weight: 500;
}

.balance-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 0.95rem;
}

.status-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

.status-indicator.active {
  background: #40d05a;
  box-shadow: 0 0 10px rgba(64, 208, 90, 0.6);
}

.status-indicator.warning {
  background: #f85149;
  box-shadow: 0 0 10px rgba(248, 81, 73, 0.6);
}

.status-text {
  color: #e6edf3;
  font-weight: 500;
}

/* Deposit Card */
.deposit-card {
  background: rgba(22, 27, 34, 0.8);
  border: 2px solid #30363d;
  border-radius: 20px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.deposit-card-header {
  text-align: center;
}

.deposit-card-header h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #e6edf3;
  margin-bottom: 8px;
}

.deposit-card-header p {
  color: #7dd3fc;
  opacity: 0.8;
}

.deposit-form-modern {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.amount-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.amount-input {
  width: 100%;
  background: rgba(30, 35, 42, 0.8);
  border: 2px solid #30363d;
  border-radius: 12px;
  padding: 15px 50px 15px 20px;
  font-size: 1.3rem;
  font-weight: 600;
  color: #e6edf3;
  font-family: 'Space Mono', monospace;
  transition: all 0.3s ease;
}

.amount-input:focus {
  outline: none;
  border-color: #238636;
  box-shadow: 0 0 0 3px rgba(35, 134, 54, 0.1);
}

.currency-label {
  position: absolute;
  right: 15px;
  font-size: 1.2rem;
  font-weight: 600;
  color: #7dd3fc;
  pointer-events: none;
}

.quick-amounts {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.quick-amounts-label {
  font-size: 0.9rem;
  color: #7dd3fc;
  font-weight: 500;
  margin-bottom: 5px;
}

.quick-amount-btn {
  background: rgba(35, 134, 54, 0.1);
  border: 1px solid #238636;
  border-radius: 8px;
  color: #40d05a;
  padding: 8px 16px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  display: inline-block;
  margin-right: 10px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);
}

.quick-amount-btn:hover {
  background: rgba(35, 134, 54, 0.2);
  border-color: #2ea043;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.35);
}

.quick-amount-btn:active {
  transform: translateY(1px) scale(0.99);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.3);
}

.deposit-btn {
  background: linear-gradient(135deg, #238636, #2ea043);
  border: none;
  border-radius: 12px;
  color: white;
  padding: 16px 24px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 4px 20px rgba(35, 134, 54, 0.3);
  margin-top: 10px;
}

.deposit-btn:hover {
  background: linear-gradient(135deg, #2ea043, #40d05a);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.3), 0 6px 25px rgba(35, 134, 54, 0.4);
}

.deposit-btn:active {
  transform: translateY(1px) scale(0.99);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.3);
}

.deposit-btn.disabled {
  background: #30363d;
  color: #7d8590;
  cursor: not-allowed;
  box-shadow: none;
}

.deposit-btn.disabled:hover {
  transform: none;
  background: #30363d;
}

.deposit-btn-icon {
  font-size: 1.2rem;
}

/* Animations */
@keyframes balance-glow {
  0%, 100% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.1);
  }
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .balance-cards-container {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .balance-section-modern {
    padding: 16px 14px 20px;
  }
  
  .balance-display-card,
  .deposit-card {
    padding: 20px;
  }
  
  .balance-amount {
    font-size: 2.2rem;
  }
  
  .balance-header h2 {
    font-size: 1.8rem;
  }
}
/* Support Section Styles */
.support-section {
  padding: 0.85rem;
  background: linear-gradient(180deg, rgba(12, 15, 20, 0.95), rgba(9, 12, 18, 0.92));
  border-radius: 14px;
  border: 1px solid rgba(59, 130, 246, 0.25);
  margin-bottom: 0; /* убираем отступ снизу чтобы поднять контент */
  height: calc(100vh - 140px); /* fallback для старых браузеров */
  height: calc(100svh - 140px); /* стабильная высота без дерганий адресной строки */
  min-height: 420px;
  display: flex;
  flex-direction: column;
  overscroll-behavior: none; /* предотвращаем «прокрутку родителя» */
}

/* Отключаем общий скролл дашборда, когда открыт раздел поддержки */
.dashboard-main:has(.support-section) {
  overflow: hidden !important;
}

/* На всякий случай блокируем общий скролл страницы, когда видна support-section */
html:has(.support-section),
body:has(.support-section) {
  overflow: hidden !important;
  background: #0f1720;
}

/* Убираем отступ снизу только для раздела Support */
.dashboard-main.support-active {
  padding-bottom: 30px !important;
  overflow: hidden !important; /* fallback если :has() недоступен */
}

.dashboard-main.support-active .dashboard-content-wrapper {
  max-width: 100%;
  width: 100%;
  margin: 0;
}

.support-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 4px 10px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.15);
  flex-shrink: 0;
}

.support-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.support-avatar {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #0f1720;
  border: 1px solid rgba(59, 130, 246, 0.35);
  display: grid;
  place-items: center;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
}

.support-avatar img {
  width: 20px;
  height: 20px;
}

.support-online-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid #0b0f16;
}

.support-title-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.support-title {
  color: #e2e8f0;
  font-weight: 700;
  font-size: 0.95rem;
}

.support-status {
  color: rgba(148, 163, 184, 0.85);
  font-size: 0.75rem;
}

.support-header-right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.support-subtitle {
  color: rgba(148, 163, 184, 0.7);
  font-size: 0.8rem;
  margin: 0;
  font-family: 'Inter', sans-serif;
}

/* Modern Chat Styles */
.modern-chat {
  background: rgba(10, 13, 18, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  min-height: 0;
  overscroll-behavior: none;
}

.chat-messages {
  flex: 1;
  padding: 12px 14px 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(59, 130, 246, 0.35) transparent;
  /* фиксируем поведение скролла внутри чата */
  overscroll-behavior: contain; /* предотвращает прокрутку родителя */
  overscroll-behavior-y: contain;
  overflow-anchor: none; /* отключает привязку прокрутки и «скачки» */
  -webkit-overflow-scrolling: touch; /* плавность на iOS без дёрганий */
  scroll-behavior: auto; /* исключаем лишнюю «инерцию» от smooth */
  scrollbar-gutter: stable both-edges; /* исключает изменение ширины при появлении скроллбара */
  touch-action: pan-y; /* только вертикальная прокрутка внутри */
}

.chat-messages::-webkit-scrollbar {
  width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
  background: transparent;
}

.chat-messages::-webkit-scrollbar-thumb {
  background: rgba(59, 130, 246, 0.35);
  border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
  background: rgba(59, 130, 246, 0.6);
}

/* Loading Styles */
.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  gap: 1rem;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(0, 255, 136, 0.2);
  border-top: 3px solid #00ff88;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading p {
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  font-family: 'Inter', sans-serif;
}

/* Welcome Message Styles */
.welcome-message {
  text-align: center;
  padding: 2rem;
  max-width: 400px;
  margin: 0 auto;
}

.welcome-icon {
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: center;
}

.welcome-message h3 {
  color: #00ff88;
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 1rem 0;
}

.welcome-message p {
  color: rgba(255, 255, 255, 0.7);
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
  margin: 0 0 0.5rem 0;
}

.welcome-message p:last-child {
  margin-bottom: 0;
}

/* Message Styles */
.message {
  display: flex;
  flex-direction: column;
  max-width: 68%;
  margin-bottom: 1px;
  animation: messageSlideIn 0.3s ease;
}

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

.message-bubble {
  padding: 8px 10px 10px;
  border-radius: 12px;
  position: relative;
}

.user-message {
  align-self: flex-end;
}

.user-message .message-bubble {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.9), rgba(59, 130, 246, 0.8));
  border: none;
  border-bottom-right-radius: 6px;
  color: #fff;
}

.support-message {
  align-self: flex-start;
}

.support-message .message-bubble {
  background: rgba(30, 35, 45, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-bottom-left-radius: 6px;
}

.message-content {
  color: #eef2f7;
  line-height: 1.4;
  font-size: 0.9rem;
  font-family: 'Inter', sans-serif;
  margin-bottom: 0.35rem;
}

.message-meta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 0.65rem;
  opacity: 0.7;
  margin-top: 0.35rem;
  gap: 8px;
}

.message-time {
  color: rgba(226, 232, 240, 0.75);
  font-family: 'Space Mono', monospace;
}

.message-author {
  color: #7dd3fc;
  font-weight: 600;
  font-family: 'Rajdhani', sans-serif;
}

.message-label {
  font-size: 11px;
  color: rgba(148, 163, 184, 0.8);
  margin-bottom: 4px;
}

.chat-typing {
  font-size: 11px;
  color: rgba(148, 163, 184, 0.8);
  margin-top: 2px;
  padding-left: 4px;
}

.no-messages {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* Chat Input Styles */
.chat-input {
  padding: 10px 12px;
  background: rgba(12, 15, 20, 0.95);
  border-top: 1px solid rgba(148, 163, 184, 0.15);
  flex-shrink: 0;
  backdrop-filter: blur(6px);
}

.input-container {
  display: flex;
  gap: 1rem;
  align-items: center;
  position: relative;
}

.message-input {
  flex: 1;
  background: rgba(24, 28, 36, 0.95);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 10px;
  padding: 0.5rem 0.8rem;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  height: 36px;
  box-shadow: none;
}

.message-input:focus {
  outline: none;
  border-color: rgba(59, 130, 246, 0.6);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
  background: rgba(24, 28, 36, 1);
}

.message-input::-moz-placeholder {
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
}

.message-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
}

.send-btn {
  background: rgba(59, 130, 246, 0.9);
  border: none;
  color: #fff;
  padding: 0;
  border-radius: 10px;
  font-size: 1rem;
  cursor: pointer !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  box-shadow: none;
  position: relative;
  overflow: hidden;
  pointer-events: auto !important;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.send-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.6s;
}

.send-btn:hover:not(:disabled) {
  background: rgba(59, 130, 246, 1);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
}

.send-btn:hover:not(:disabled)::before {
  left: 100%;
}

.send-btn:active:not(:disabled) {
  transform: translateY(-1px) scale(1.02);
  transition: all 0.1s;
}

.send-btn:disabled {
  background: rgba(148, 163, 184, 0.25);
  color: rgba(255, 255, 255, 0.4);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.send-btn:disabled:hover {
  transform: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Анимация отправки */
@keyframes sendPulse {
  0% { transform: scale(1); }
  50% { transform: scale(0.95); }
  100% { transform: scale(1); }
}

.send-btn.sending {
  animation: sendPulse 0.3s ease;
}

/* GIF иконка отправки */
.send-btn img {
  transition: all 0.3s ease;
  filter: none;
  border-radius: 4px;
}

.send-btn:hover:not(:disabled) img {
  filter: none;
}

.send-btn:disabled img {
  filter: opacity(0.4);
}

/* Анимация для однократного воспроизведения GIF */
@keyframes gifPlayOnce {
  0% { 
    transform: scale(1) rotate(0deg);
    filter: brightness(0) invert(1) hue-rotate(0deg) blur(0.5px);
  }
  25% {
    transform: scale(1.1) rotate(5deg);
    filter: brightness(0) invert(1) hue-rotate(90deg) blur(0.5px);
  }
  50% {
    transform: scale(1.2) rotate(0deg);
    filter: brightness(0) invert(1) hue-rotate(180deg) blur(0.5px);
  }
  75% {
    transform: scale(1.1) rotate(-5deg);
    filter: brightness(0) invert(1) hue-rotate(270deg) blur(0.5px);
  }
  100% { 
    transform: scale(1) rotate(0deg);
    filter: brightness(0) invert(1) hue-rotate(360deg) blur(0.5px);
  }
}

/* GIF animation now handled by JavaScript utils/gifControl.js */

/* Стили для chat_icon в заголовке */
.support-header h2 img {
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
  width: 39.6px;
  height: 39.6px;
}

/* Стили для chat_icon в приветственном сообщении */
.welcome-icon img {
  display: block;
  width: 52.8px;
  height: 52.8px;
  margin: 0 auto;
}

/* Responsive Design */
@media (max-width: 768px) {
  .support-section {
    padding: 0.75rem;
    height: calc(100vh - 200px); /* fallback для старых браузеров */
    height: calc(100svh - 200px); /* стабильная высота без дерганий адресной строки */
    min-height: 240px;
  }
  
  .modern-chat {
    /* убираем фиксированную высоту для мобильных */
  }
  
  .chat-messages {
    padding: 0.75rem;
  }
  
  .chat-input {
    padding: 0.75rem;
  }
  
  .input-container {
    gap: 0.5rem;
  }
  
  .message {
    max-width: 90%;
  }
  
  .welcome-message {
    padding: 1rem;
  }
  
  .support-subtitle {
    display: none;
  }
}

/* Grouped Messages Styles */
.grouped-message {
  margin-top: 2px !important;
  margin-bottom: 0.2rem !important;
}

.grouped-message .message-bubble {
  margin-top: 0.2rem;
  opacity: 1;
  padding: 5px 10px;
}

.grouped-message .message-meta {
  display: none;
}

.message:not(.grouped-message) {
  margin-top: 10px;
  margin-bottom: 0.35rem;
}

.message:first-child {
  margin-top: 0;
}

/* Улучшенная визуализация группировки */
.grouped-message .message-bubble {
  border-radius: 12px;
}

.user-message.grouped-message .message-bubble {
  border-radius: 12px 4px 12px 12px;
}

.support-message.grouped-message .message-bubble {
  border-radius: 4px 12px 12px 12px;
}

/* Первое сообщение в группе имеет полные закругления */
.message:not(.grouped-message) .message-bubble {
  border-radius: 18px;
}

.user-message:not(.grouped-message) .message-bubble {
  border-radius: 18px 18px 6px 18px;
}

.support-message:not(.grouped-message) .message-bubble {
  border-radius: 18px 18px 18px 6px;
}
/* Payment Modal Overlay */
.payment-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 16000; /* above header/navigation */
  animation: fadeIn 0.3s ease-out;
}

/* Modal Overlay for Addon Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 16002; /* above header/navigation */
  animation: fadeIn 0.3s ease-out;
}

/* Payment Modal Container */
.payment-modal {
  max-height: 90vh;
  overflow-y: auto;

  padding-right: 6px; /* scrollbar space */
  background: rgba(22, 27, 34, 0.98);
  border: 1px solid #30363d;
  border-radius: 12px;
  padding: 30px 28px 48px; /* more bottom padding to avoid sticking */
  width: 95%;
  max-width: 600px;
  color: #e6edf3;
  position: relative;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.7);
  animation: slideUp 0.35s ease-out;
  box-sizing: border-box;
}
/* extra spacer so bottom content doesn't stick */
.payment-modal::after {
  content: '';
  display: block;
  height: 20px; /* reduced from 80px to minimize unnecessary whitespace */
}
/* When Admin payment is visible, give larger bottom breathing space so button never sticks to viewport bottom */
.payment-modal:has(.admin-pay.show) {
  padding-bottom: 120px; /* large bottom padding so button never touches edge */
}
.payment-modal:has(.admin-pay.show)::after {
  height: 40px; /* moderate extra spacer */
}

/* Modal Header Styling */
.modal-header {
  text-align: center;
  margin-bottom: 25px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(48, 54, 61, 0.6);
}

.modal-title {
  font-size: 22px;
  font-weight: 600;
  color: #58a6ff;
  margin: 0 0 12px 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  letter-spacing: 0.3px;
}

.modal-amount {
  font-size: 16px;
  margin: 0;
  color: #8b949e;
  font-weight: 500;
}

.modal-amount .amount-value {
  color: #58a6ff;
  font-weight: 700;
  font-size: 18px;
  text-shadow: 0 1px 2px rgba(88, 166, 255, 0.3);
}

.modal-amount .currency {
  color: #7c3aed;
  font-weight: 600;
  font-size: 18px;
  opacity: 0.9;
}

/* Close Button */
.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  border: none;
  background: transparent;
  color: #8b949e;
  font-size: 24px;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}
.modal-close:hover {
  color: #e6edf3;
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.1);
}

.pay-iframe-container {
  width: 100%;
  height: 600px;
  margin: 25px 0;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.pay-iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Old modal styles removed - using new modal-header styles instead */

/* Payment Options */
.payment-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}
.pay-option {
  display: flex;
  align-items: center;
  justify-content: center; /* center icon */
  gap: 0;
  height: 68px; /* taller button */
  width: 100%;
  background: rgba(125, 211, 252, 0.06);
  border: 1px solid #7dd3fc;
  color: #7dd3fc;
  padding: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.25s ease;
}
.pay-option img {
  width: 28px;
  height: 28px;
}
.pay-logo {
  width: 80px !important;
  height: 50px !important;
  -o-object-fit: contain;
     object-fit: contain;
  font-size: 32px; /* for emoji */
}

/* Custom Text Logo for Admin Payment */
.pay-text-logo {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 16px;
  font-weight: 600;
  color: #58a6ff;
  text-align: center;
  display: block;
  line-height: 1.3;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 4px rgba(88, 166, 255, 0.3);
  background: linear-gradient(135deg, #58a6ff, #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: all 0.3s ease;
  white-space: nowrap;
}

/* When parent button is selected, adjust text logo */
.pay-option.selected .pay-text-logo {
  color: #ffffff;
  background: none;
  -webkit-text-fill-color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  font-weight: 700;
}

/* MirPay Section Styles */
.mirpay-section {
  margin-top: 20px;
  padding: 20px;
  background: rgba(88, 166, 255, 0.05);
  border: 1px solid rgba(88, 166, 255, 0.2);
  border-radius: 12px;
  text-align: center;
  animation: slideIn 0.3s ease-out;
}

.mirpay-section p {
  color: #e6edf3;
  margin-bottom: 15px;
  font-size: 16px;
}

.qr-container {
  display: flex;
  justify-content: center;
  margin: 20px 0;
  padding: 15px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.qr-code {
  max-width: 200px;
  max-height: 200px;
  width: 100%;
  height: auto;
  border-radius: 8px;
  transition: opacity 0.3s ease;
}

.qr-error {
  text-align: center;
  padding: 20px;
  color: #dc3545;
}

.qr-error p {
  margin-bottom: 15px;
  color: #dc3545 !important;
}

.qr-link {
  display: inline-block;
  padding: 10px 20px;
  background: #58a6ff;
  color: #ffffff !important;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 500;
  transition: background 0.2s ease;
}

.qr-link:hover {
  background: #4088d4;
  text-decoration: none;
}

.qr-iframe-container {
  width: 220px;
  height: 220px;
  margin: 0 auto 15px auto;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.qr-iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.payment-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 15px 0;
  padding: 12px;
  border-radius: 8px;
  font-weight: 500;
}

.payment-status.pending {
  background: rgba(255, 193, 7, 0.1);
  border: 1px solid #ffc107;
  color: #ffc107;
}

.payment-status.paid {
  background: rgba(40, 167, 69, 0.1);
  border: 1px solid #28a745;
  color: #28a745;
}

.payment-status.failed {
  background: rgba(220, 53, 69, 0.1);
  border: 1px solid #dc3545;
  color: #dc3545;
}

.status-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

.status-indicator.pending {
  background: #ffc107;
}

.status-indicator.success {
  background: #28a745;
}

.status-indicator.failed {
  background: #dc3545;
}

.mirpay-amount {
  color: #58a6ff !important;
  font-size: 18px;
  font-weight: 600;
}

.mirpay-action {
  margin-bottom: 14px;
}

.loading-payment {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding: 30px;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(88, 166, 255, 0.2);
  border-top: 3px solid #58a6ff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

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

/* Base Modal Styles */
.modal {
  background: rgba(22, 27, 34, 0.98);
  border: 1px solid #30363d;
  border-radius: 12px;
  padding: 30px;
  color: #e6edf3;
  position: relative;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.7);
  animation: slideUp 0.35s ease-out;
  max-height: 90vh;
  overflow-y: auto;
}

/* Missing animations for modals */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

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

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Close button for addon modal */
.close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  border: none;
  background: transparent;
  color: #8b949e;
  font-size: 24px;
  cursor: pointer !important;
  transition: all 0.2s ease;
  z-index: 10;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  pointer-events: auto !important;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.close-btn:hover {
  color: #e6edf3;
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.1);
}

/* Modal actions */
.modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(48, 54, 61, 0.6);
}

.modal-content {
  margin-bottom: 0;
}

/* Addon Modal specific styles */
.addon-modal {
  max-width: 600px;
  width: 90%;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 16001;
  animation: slideUp 0.35s ease-out;
}

.addon-modal.closing {
  animation: slideDown 0.3s ease-in;
}

.modal-overlay.closing {
  animation: fadeOut 0.3s ease-in;
}

.payment-modal-overlay.closing {
  animation: fadeOut 0.3s ease-in;
}

.payment-modal.closing {
  animation: slideDown 0.3s ease-in;
}
.pay-option:hover {
  background: rgba(125, 211, 252, 0.12);
}
.pay-option.selected {
  background: linear-gradient(45deg, #238636, #2ea043);
  border-color: #2ea043;
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(35, 134, 54, 0.4);
}

/* File Dropzone */
.file-dropzone {
  margin-top: 16px; /* space from previous element */
  border: 2px dashed #7dd3fc;
  background: rgba(125, 211, 252, 0.04);
  padding: 16px;
  border-radius: 8px;
  text-align: center;
  color: #7dd3fc;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.file-dropzone:hover {
  background: rgba(125, 211, 252, 0.08);
  border-color: #2ea043;
  color: #2ea043;
}
/* removed icon for cleaner text */
/* .file-dropzone::after {
  content: '\f093';
  font-family: 'Font Awesome 5 Free', sans-serif;
  font-weight: 900;
  margin-left: 8px;
} */

/* Admin payment instructions */
.admin-pay {
  background: rgba(22, 27, 34, 0.8);
  border: 1px dashed #30363d;
  padding: 24px 18px; /* extra top padding so content doesn't stick to top */
  padding-bottom: 24px; /* balanced bottom padding inside admin block */
  margin-top: 16px; /* space from top section */
  margin-bottom: 16px; /* slightly smaller gap before modal bottom */
  border-radius: 10px;
  color: #e6edf3;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}
/* invisible spacer after button */
.admin-pay::after {
  content: '';
  display: block;
  height: 192px; /* slightly more space below the button (admin only) */
}

/* Admin-only spacing between dropzone and button */
.admin-pay .file-dropzone { 
  margin-top: 32px;  /* move dropzone further lower */
  margin-bottom: 20px; 
}
.admin-pay .btn.primary {
  margin-top: 20px; /* gap from dropzone */
  margin-bottom: 110px; /* lift button a bit more */
}

.card-number {
  font-family: 'Space Mono', monospace;
  font-size: 18px;
  letter-spacing: 1px;
  background: rgba(13, 17, 23, 0.6);
  padding: 10px 14px;
  border-radius: 6px;
  border: 1px solid #30363d;
  text-align: center;
  -webkit-user-select: all;
     -moz-user-select: all;
          user-select: all;
}

/* Coming soon text */
.coming-soon {
  text-align: center;
  color: #ffc107;
  font-weight: 600;
}

/* Pagination Styles */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 0;
}

.pagination button {
  background: rgba(22, 27, 34, 0.8);
  border: 1px solid #30363d;
  color: #e6edf3;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 18px;
  font-weight: 500;
  min-width: 40px;
  transition: all 0.2s ease;
}

.pagination button:hover:not(:disabled) {
  background: rgba(35, 134, 54, 0.2);
  border-color: #2ea043;
  color: #2ea043;
}

.pagination button:disabled {
  background: rgba(22, 27, 34, 0.4);
  border-color: rgba(48, 54, 61, 0.4);
  color: rgba(139, 148, 158, 0.4);
  cursor: not-allowed;
}

.pagination span {
  color: #e6edf3;
  font-size: 18px;
  font-weight: 500;
  min-width: 60px;
  text-align: center;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Exit Animations */
@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes slideDown {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(20px); opacity: 0; }
}

.payment-modal-overlay.closing {
  animation: fadeOut 0.3s ease-out forwards;
}
.payment-modal.closing {
  animation: slideDown 0.35s ease-out forwards;
}

/* Admin Menu Animation */
@keyframes adminSlideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
    max-height: 0;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    max-height: 200px;
  }
}

.admin-pay {
  animation: adminSlideIn 0.4s ease-out forwards;
  
}
.admin-pay .btn {
  margin-top: 12px;
  margin-bottom: 60px;
}

/* Generic Modal Overlay (used by Addon Management Modal) */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 16002; /* ensure above any headers/navigation and other overlays */
  animation: fadeIn 0.3s ease-out;
}

/* Base Modal Container */
.modal {
   background: rgba(22, 27, 34, 0.98);
   border: 1px solid #30363d;
   border-radius: 12px;
   width: 95%;
   max-width: 720px;
   max-height: 90vh;
   display: flex;
   flex-direction: column;
   overflow: hidden; /* header sticky, content scrolls */
   color: #e6edf3;
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.7);
   animation: slideUp 0.35s ease-out;
   position: relative; /* for absolute close button */
 }

/* Addon specific sizing */
.modal.addon-modal {
  max-width: 800px;
}

/* Header already styled globally via .modal-header in this file */
.modal-content {
  padding: 20px 24px;
  overflow-y: auto;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 14px 24px;
  border-top: 1px solid rgba(48, 54, 61, 0.6);
}

/* Addon Modal content blocks */
.addon-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.addon-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(48, 54, 61, 0.6);
  border-radius: 10px;
  padding: 12px 14px;
}

.addon-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.addon-icon {
  width: 28px;
  height: 28px;
}

.addon-name {
  display: block;
  font-weight: 600;
  color: #e6edf3;
}

.addon-price {
  display: block;
  font-size: 14px;
  color: #8b949e;
}

.addon-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.addon-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid #30363d;
  background: rgba(22, 27, 34, 0.8);
  color: #e6edf3;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: all 0.2s ease;
}
.addon-btn:hover:not(:disabled) {
  background: rgba(35, 134, 54, 0.15);
  border-color: #2ea043;
  color: #2ea043;
}
.addon-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.addon-value {
  min-width: 64px;
  text-align: center;
  font-weight: 600;
  color: #e6edf3;
}

.addon-total {
  margin: 16px 0 4px;
  padding: 12px 14px;
  background: rgba(88, 166, 255, 0.06);
  border: 1px solid rgba(88, 166, 255, 0.2);
  border-radius: 10px;
  color: #58a6ff;
  font-weight: 600;
}

/* Addon Modal Styles */
.addon-modal {
  background: rgba(22, 27, 34, 0.98);
  border: 1px solid #30363d;
  border-radius: 12px;
  padding: 30px;
  width: 95%;
  max-width: 600px;
  color: #e6edf3;
  position: relative;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.7);
  animation: slideUp 0.35s ease-out;
  box-sizing: border-box;
  max-height: 90vh;
  overflow-y: auto;
}

.addon-section {
  margin-bottom: 20px;
}

.addon-section h4 {
  color: #58a6ff;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.addon-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: rgba(48, 54, 61, 0.3);
  border: 1px solid rgba(48, 54, 61, 0.6);
  border-radius: 10px;
  margin-bottom: 12px;
  transition: all 0.2s ease;
}

.addon-item:hover {
  background: rgba(48, 54, 61, 0.5);
  border-color: rgba(88, 166, 255, 0.3);
}

.addon-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.addon-icon {
  width: 32px;
  height: 32px;
  opacity: 0.8;
}

.addon-name {
  display: block;
  font-weight: 600;
  color: #e6edf3;
  margin-bottom: 4px;
}

.addon-price {
  display: block;
  font-size: 12px;
  color: #8b949e;
}

.addon-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.addon-btn {
  width: 32px;
  height: 32px;
  border: 1px solid #30363d;
  background: rgba(48, 54, 61, 0.8);
  color: #e6edf3;
  border-radius: 6px;
  cursor: pointer !important;
  transition: all 0.2s ease;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto !important;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.addon-btn:hover:not(:disabled) {
  background: rgba(88, 166, 255, 0.2);
  border-color: #58a6ff;
  color: #58a6ff;
}

.addon-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.addon-value {
  min-width: 60px;
  text-align: center;
  font-weight: 600;
  color: #58a6ff;
}

.modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(48, 54, 61, 0.6);
}

.btn {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer !important;
  transition: all 0.2s ease;
  font-size: 14px;
  pointer-events: auto !important;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.btn.secondary {
  background: rgba(48, 54, 61, 0.8);
  color: #e6edf3;
  border: 1px solid #30363d;
}

.btn.secondary:hover {
  background: rgba(48, 54, 61, 1);
  border-color: #58a6ff;
}

.btn.primary {
  background: linear-gradient(135deg, #58a6ff, #7c3aed);
  color: white;
  border: 1px solid transparent;
}

.btn.primary:hover {
  background: linear-gradient(135deg, #4a9eff, #6d28d9);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(88, 166, 255, 0.3);
}

.close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  border: none;
  background: transparent;
  color: #8b949e;
  font-size: 24px;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

.close-btn:hover {
  background: rgba(248, 81, 73, 0.1);
  color: #f85149;
}

/* Payment modal overrides for visibility + loading states */
.payment-modal .btn {
  border-radius: 10px;
}

.payment-modal .btn.primary {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #f8fafc;
  border: 1px solid rgba(34, 197, 94, 0.4);
  box-shadow: 0 10px 24px rgba(34, 197, 94, 0.25);
}

.payment-modal .btn.primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #16a34a, #22c55e);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(34, 197, 94, 0.35);
}

.payment-modal .btn.primary:disabled {
  opacity: 0.7;
  cursor: wait;
}

.payment-modal .pay-option {
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(125, 211, 252, 0.45);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.35);
  font-weight: 600;
}

.payment-modal .pay-option:not(.selected):hover {
  background: rgba(30, 41, 59, 0.9);
  border-color: rgba(125, 211, 252, 0.7);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.45);
}

.payment-modal .pay-text-logo {
  font-size: 17px;
}

.payment-modal .pay-logo {
  width: 92px !important;
  height: 54px !important;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.payment-modal .pay-option:hover .pay-logo {
  transform: scale(1.05);
  filter: drop-shadow(0 6px 10px rgba(125, 211, 252, 0.35));
}

.payment-modal .pay-option.selected {
  background: linear-gradient(45deg, #238636, #2ea043);
  border-color: #2ea043;
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(35, 134, 54, 0.35);
}

.payment-modal .pay-option.selected .pay-text-logo {
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
}

.admin-confirm-btn {
  width: 100%;
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 15px;
  letter-spacing: 0.2px;
  position: relative;
}

.admin-confirm-btn .btn-loader {
  display: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #ffffff;
  animation: spin 0.8s linear infinite;
}

.admin-confirm-btn.is-loading .btn-loader {
  display: inline-block;
}

.modal.addon-modal .btn.primary {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #f8fafc;
  border: 1px solid rgba(34, 197, 94, 0.4);
  box-shadow: 0 8px 20px rgba(34, 197, 94, 0.25);
}

.modal.addon-modal .btn.primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #16a34a, #22c55e);
}

.modal.addon-modal .btn.secondary {
  background: rgba(30, 41, 59, 0.7);
  color: #e6edf3;
  border: 1px solid rgba(148, 163, 184, 0.35);
}

.modal.addon-modal .btn.secondary:hover:not(:disabled) {
  background: rgba(30, 41, 59, 0.9);
  border-color: rgba(148, 163, 184, 0.6);
}

.modal.addon-modal .addon-btn {
  width: 38px;
  height: 38px;
  background: rgba(30, 41, 59, 0.85);
  border-color: rgba(148, 163, 184, 0.35);
  color: #e2e8f0;
}

.modal.addon-modal .addon-btn:hover:not(:disabled) {
  background: rgba(34, 197, 94, 0.2);
  border-color: rgba(34, 197, 94, 0.6);
  color: #22c55e;
}

.modal.addon-modal .addon-btn.minus:hover:not(:disabled) {
  background: rgba(248, 81, 73, 0.2);
  border-color: rgba(248, 81, 73, 0.6);
  color: #f87171;
}
/* Server Configuration Modal */
.server-config-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(5px);
  z-index: 6000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease-out;
}

/* Create Server Button */
.create-server-btn.loading {
  position: relative;
  overflow: hidden;
}

.create-server-btn.loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg, 
    transparent, 
    rgba(255, 255, 255, 0.2), 
    transparent
  );
  animation: loading-shimmer 1.5s infinite;
}

@keyframes loading-shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

.server-config-modal {
  background: rgba(22, 27, 34, 0.95);
  border: 1px solid #30363d;
  border-radius: 12px;
  width: 95%;
  max-width: 1200px;
  max-height: 90vh;
  /* Make only content scrollable */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
  animation: slideUp 0.35s ease-out;
}

.server-config-header {
  background: rgba(35, 134, 54, 0.1);
  border-bottom: 2px solid #238636;
  padding: 20px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Sticky header */
  position: sticky;
  top: 0;
  z-index: 2;
}

.server-config-header h2 {
  color: #e6edf3;
  font-size: 24px;
  font-weight: 600;
  margin: 0;
}

.close-btn {
  background: none;
  border: 2px solid rgba(255, 255, 255, 0.2);
  color: #e6edf3;
  font-size: 20px;
  cursor: pointer !important;
  padding: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: all 0.3s ease;
  position: absolute;
  top: 20px;
  right: 30px;
  z-index: 10;
  overflow: hidden;
  pointer-events: auto !important;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.close-btn::before {
  content: '✕';
  font-weight: bold;
  font-size: 16px;
}

.close-btn:hover {
  background: rgba(255, 59, 48, 0.1);
  border-color: rgba(255, 59, 48, 0.5);
  color: #ff3b30;
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(255, 59, 48, 0.2);
}

.server-config-content {
  display: flex;
  /* Take remaining height and make inner area scrollable */
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* Left Side - Settings Menu */
.server-config-left {
  flex: 1;
  background: rgba(13, 17, 23, 0.6);
  border-right: 1px solid #30363d;
  padding: 24px;
  overflow-y: auto;
}

.config-section {
  margin-bottom: 32px;
  transition: all 0.3s ease;
  overflow: hidden;
}

.config-section.collapsed {
  max-height: 60px;
}

.config-section.collapsed .config-content {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
}

.config-content {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.3s ease;
  pointer-events: auto;
}

.config-section h3 {
  color: #58a6ff;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #30363d;
}

.section-header {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.2s ease;
}

.section-header:hover {
  color: #79c0ff;
  transform: translateX(2px);
}

.toggle-icon {
  font-size: 18px;
  transition: transform 0.3s ease;
  margin-left: 8px;
}

.config-section.collapsed .toggle-icon {
  transform: rotate(0deg);
}

.config-section:not(.collapsed) .toggle-icon {
  transform: rotate(0deg);
}

.config-item {
  background: linear-gradient(135deg, rgba(45, 45, 45, 0.9) 0%, rgba(30, 30, 35, 0.95) 100%);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  transition: all 0.3s ease;
  overflow: hidden;
}

.config-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #00ff88, #00d4aa, #00b8ff);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.config-item:hover {
  border-color: rgba(0, 255, 136, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 255, 136, 0.1);
}

.config-item:hover::before {
  opacity: 1;
}

.config-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.config-label span:first-child {
  color: #e6edf3;
  font-weight: 500;
}

.config-price {
  color: #58a6ff;
  font-size: 18px;
  font-weight: 600;
}

.config-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.config-btn {
  background: #238636;
  border: none;
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer !important;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  pointer-events: auto !important;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.config-btn:hover {
  background: #2ea043;
  transform: scale(1.05);
}

.config-btn:active {
  transform: scale(0.95);
}

.config-btn.disabled,
.config-btn:disabled {
  background: #6c757d;
  color: #adb5bd;
  cursor: not-allowed;
  opacity: 0.6;
}

.config-btn.disabled:hover,
.config-btn:disabled:hover {
  background: #6c757d;
  transform: none;
}

.config-value {
  min-width: 60px;
  text-align: center;
  font-weight: bold;
  color: #58a6ff;
}

.config-delta {
  color: #7c3aed;
  font-weight: bold;
  margin-right: 2px;
}

/* Checkbox Items */
.config-checkbox-item {
  background: linear-gradient(135deg, rgba(45, 45, 45, 0.9) 0%, rgba(30, 30, 35, 0.95) 100%);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 16px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.config-checkbox-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #00ff88, #00d4aa, #00b8ff);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.config-checkbox-item:hover {
  border-color: rgba(0, 255, 136, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 255, 136, 0.1);
}

.config-checkbox-item:hover::before {
  opacity: 1;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  width: 100%;
}

.checkbox-label input[type="checkbox"] {
  display: none;
}

.checkbox-custom {
  width: 20px;
  height: 20px;
  border: 2px solid #30363d;
  border-radius: 4px;
  background: transparent;
  transition: all 0.2s ease;
  position: relative;
  flex-shrink: 0;
}

.checkbox-label input[type="checkbox"]:checked + .checkbox-custom {
  background: #238636;
  border-color: #238636;
}

.checkbox-label input[type="checkbox"]:checked + .checkbox-custom::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 18px;
  font-weight: bold;
}

.checkbox-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.checkbox-info span:first-child {
  color: #e6edf3;
  font-weight: 500;
}

/* Build Items */
.build-item {
  background: rgba(22, 27, 34, 0.8);
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.build-item:hover {
  border-color: #58a6ff;
  background: rgba(88, 166, 255, 0.05);
}

.build-item.selected {
  border-color: #238636;
  background: rgba(35, 134, 54, 0.1);
}

.build-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.build-name {
  color: #e6edf3;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.verified-badge {
  width: 24px;
  height: 24px;
  margin-left: 12px;
  vertical-align: middle;
}

.build-author {
  color: #7d8590;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.build-price {
  color: #58a6ff;
  font-weight: 600;
}

/* Right Side - Server Card */
.server-config-right {
  flex: 0 0 350px;
  background: rgba(13, 17, 23, 0.3);
  padding: 15px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  max-height: calc(90vh - 100px);
}

.server-summary-card {
  width: 100%;
  min-width: 250px;
  max-width: 350px;
  background: linear-gradient(135deg, rgba(45, 45, 45, 0.9) 0%, rgba(30, 30, 35, 0.95) 100%);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 24px;
  position: relative;
  overflow: hidden;
  min-height: 192px;
  transition: all 0.3s ease;
  cursor: default;
}

/* Card Colors */
.server-card-proxy {
  border-color: #ff6b6b;
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.1), rgba(22, 27, 34, 0.9));
}

.server-card-mini {
  border-color: #4ecdc4;
  background: linear-gradient(135deg, rgba(78, 205, 196, 0.1), rgba(22, 27, 34, 0.9));
}

.server-card-standard {
  border-color: #45b7d1;
  background: linear-gradient(135deg, rgba(69, 183, 209, 0.1), rgba(22, 27, 34, 0.9));
}

.server-card-pro {
  border-color: #f9ca24;
  background: linear-gradient(135deg, rgba(249, 202, 36, 0.1), rgba(22, 27, 34, 0.9));
}

.server-card-ultimate {
  border-color: #8e44ad;
  background: linear-gradient(135deg, rgba(142, 68, 173, 0.1), rgba(22, 27, 34, 0.9));
}

/* Override to use exact original tariff card styling */
.server-summary-card.tariff-card .tariff-header {
  position: relative;
  margin-bottom: 24px;
  height: 44px;
}

.server-summary-card.tariff-card .tariff-name {
  position: absolute;
  top: 0px;
  left: -5px;
  font-size: 1.75rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  z-index: 2;
  margin: 0;
  display: inline-block;
  background: repeating-linear-gradient(90deg,var(--c1) 0%, var(--c2) 50%, var(--c1) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: neonSlide 2s linear infinite;
}

/* Builds Grid Styles */
.builds-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 24px !important;
  margin-top: 20px !important;
  justify-content: start !important;
  align-items: start !important;
}

.build-card {
  background: linear-gradient(135deg, rgba(22, 27, 34, 0.95), rgba(13, 17, 23, 0.95)) !important;
  border: 1px solid #40d05a !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
  height: 200px !important;
  position: relative !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(10px) !important;
  width: 100% !important;
  max-width: 320px !important;
}

.build-card:hover {
  border-color: #58ff7a;
  box-shadow: 0 8px 32px rgba(64, 208, 90, 0.4), 0 0 20px rgba(88, 255, 122, 0.3);
  transform: translateY(-3px) scale(1.02);
}

.build-card-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  background: radial-gradient(circle at top right, rgba(64, 208, 90, 0.05), transparent 60%);
}

.build-info {
  flex: 1;
  padding: 16px 16px 0px 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-right: 90px;
  text-align: left;
}

.build-name {
  font-size: 19px;
  font-weight: 900;
  color: #ffffff;
  margin: 0 0 10px 0;
  line-height: 1.3;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.5px;
  word-wrap: break-word;
}

.build-price {
  font-size: 18px;
  color: #58ff7a;
  font-weight: 900;
  margin-bottom: 16px;
  text-shadow: 0 0 10px rgba(88, 255, 122, 0.5);
  letter-spacing: 0.3px;
  text-align: left;
}

.build-buy-btn {
  padding: 12px 16px;
  background: linear-gradient(135deg, #238636, #2ea043);
  color: white;
  border: none;
  border-radius: 10px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 13px;
  margin: 16px;
  width: calc(100% - 32px);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 10px rgba(35, 134, 54, 0.3);
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.build-buy-btn:hover {
  background: linear-gradient(135deg, #2ea043, #40d05a);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(35, 134, 54, 0.4);
}

.build-buy-btn.selected {
  background: #40d05a;
  color: #000;
}

.build-buy-btn.config-btn {
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 11px;
}

.build-buy.config-btn:hover {
  background: #2ea043;
  transform: translateY(-1px);
}

.config-btn.disabled,
.config-btn:disabled {
  background: #6c757d;
  color: #adb5bd;
  cursor: not-allowed;
  opacity: 0.6;
}

.config-btn.disabled:hover,
.config-btn:disabled:hover {
  background: #6c757d;
  transform: none;
}

.build-buy-btn.selected {
  background: #40d05a;
  color: #000;
}

.build-buy-btn.disabled,
.build-buy-btn:disabled {
  background: #6c757d !important;
  color: #adb5bd !important;
  cursor: not-allowed;
  opacity: 0.7;
  font-size: 10px;
  padding: 6px 8px;
}

.build-buy-btn.disabled:hover,
.build-buy-btn:disabled:hover {
  background: #6c757d !important;
  transform: none;
}

.build-image-container {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 70px;
  height: 70px;
  overflow: hidden;
  cursor: pointer;
  border-radius: 12px;
  z-index: 2;
  border: none;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.build-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.3s ease;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  pointer-events: none;
}

.build-image-container:hover .build-image {
  transform: scale(1.05);
}

.build-preview-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  color: white;
  font-weight: bold;
  font-size: 16px;
}

.build-image-container:hover .build-preview-overlay {
  opacity: 1;
}

/* Build Preview Modal Styles */
.build-preview-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(5px);
}

.build-preview-modal {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 15px;
  width: 90%;
  max-width: 700px;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
}

.build-preview-header {
  padding: 20px;
  border-bottom: 1px solid #30363d;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.build-preview-header h2 {
  color: #e6edf3;
  margin: 0;
  font-size: 24px;
}

.build-preview-price {
  color: #40d05a;
  font-weight: bold;
  font-size: 18px;
}

.build-preview-content {
  padding: 20px;
  /* Extra bottom padding so content isn't hidden under fade overlay */
  padding-bottom: 64px;
}

.build-preview-image {
  width: 100%;
  height: 300px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 12px;
  margin-bottom: 20px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
}

.build-preview-info p {
  color: #e6edf3;
  margin-bottom: 20px;
  text-align: center;
}

.build-preview-description {
  margin: 20px 0;
  padding: 20px;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 12px;
}

.build-preview-description pre {
  color: #e6edf3;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.build-preview-buy-btn {
  width: 100%;
  padding: 15px;
  background: #238636;
  color: white;
  border: none;
  border-radius: 12px;
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.build-preview-buy-btn:hover {
  background: #2ea043;
}

.build-preview-buy-btn.selected {
  background: #40d05a;
  color: #000;
}

/* Bottom fade overlay to prevent clipping of content */
.build-preview-fade-bottom {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  pointer-events: none;
  background: linear-gradient(to top, #161b22 40%, rgba(22,27,34,0));
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  z-index: 2;
}

/* Add gradient variables for server cards */
.server-summary-card.tariff-proxy {
  --c1: #ff3a3a; /* red */
  --c2: #ff912b; /* orange */
}

.server-summary-card.tariff-mini {
  --c1: #2dfff1; /* teal */
  --c2: #22ff90; /* green */
}

.server-summary-card.tariff-standard {
  --c1: #2294ff; /* light blue */
  --c2: #00e7b9; /* aqua */
}

.server-summary-card.tariff-pro {
  --c1: #fbff00; /* yellow */
  --c2: #ff6600; /* deep orange */
}

.server-summary-card.tariff-ultimate {
  --c1: #6e15ff; /* purple */
  --c2: #ff00ff; /* light purple */
}

/* Add neonSlide animation */
@keyframes neonSlide {
  0% { background-position: 0 0; }
  100% { background-position: -200% 0; }
}

/* Features entrance animations */
@keyframes featuresIn {
  from { opacity: 0; transform: translateY(6px) scale(0.98); box-shadow: 0 0 0 rgba(0,255,136,0); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    box-shadow: 0 6px 20px rgba(0,255,136,0.18); }
}

@keyframes featureIn {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

@keyframes tickPop {
  0%   { transform: scale(0.6); filter: drop-shadow(0 0 0 rgba(0,255,136,0)); }
  60%  { transform: scale(1.2); filter: drop-shadow(0 0 8px rgba(0,255,136,0.6)); }
  100% { transform: scale(1);   filter: drop-shadow(0 0 4px rgba(0,255,136,0.35)); }
}

/* Additional Features Styling */
.server-summary-card .additional-features-container {
  margin: 20px 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.35s ease;
  max-height: 0;
  opacity: 0;
}

.server-summary-card .additional-features-container.expanded {
  max-height: 400px; /* enough for several rows */
  opacity: 1;
}

.server-summary-card .additional-features-container.collapsed {
  max-height: 0;
  opacity: 0;
}

.server-summary-card .additional-features-container .additional-features {
  margin: 20px 0;
  padding: 16px;
  background: rgba(0, 255, 136, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(0, 255, 136, 0.2);
}

.server-summary-card .additional-features h4 {
  color: #00ff88;
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 12px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
}

.server-summary-card .additional-features .feature {
  color: #a0ff88;
  font-size: 0.95rem;
  font-weight: 500;
  margin: 6px 0;
  display: flex;
  align-items: center;
  text-shadow: 0 0 5px rgba(160, 255, 136, 0.3);
  transition: opacity 0.28s ease, transform 0.28s ease, max-height 0.35s ease, margin 0.3s ease;
  max-height: 40px;
  /* Prevent initial flash and improve paint stability */
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  will-change: opacity, transform;
  backface-visibility: hidden;
}

.server-summary-card .additional-features .feature.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  max-height: 40px;
  margin: 6px 0;
  /* Use both to keep end styles applied and avoid pop-in on reflow */
  animation: featureIn 0.28s ease-out both;
}

.server-summary-card .additional-features .feature.leaving {
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  max-height: 0;
  margin: 0;
  pointer-events: none;
}

.server-summary-card .additional-features .feature::before {
  content: '✓';
  color: #00ff88;
  font-weight: bold;
  margin-right: 12px;
  margin-left: 4px;
  font-size: 1.5em;
  text-shadow: 0 0 8px rgba(0, 255, 136, 0.5);
}

.server-summary-card .additional-features .feature.visible::before {
  transform-origin: center;
  animation: tickPop 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: var(--d, 0s);
}

.server-summary-card .additional-features .feature.leaving::before {
  animation: none;
}

/* Removed nth-of-type stagger to avoid animation restarts (flicker) when list changes */

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .server-summary-card .additional-features-container,
  .server-summary-card .additional-features .feature,
  .server-summary-card .additional-features .feature::before {
    animation: none !important;
    transition: none !important;
  }
  .server-summary-card .additional-features .feature {
    opacity: 1;
    transform: none;
    max-height: none;
  }
}

/* Play container entrance animation only when expanded */
.server-summary-card .additional-features-container.expanded .additional-features {
  animation: featuresIn 0.35s ease-out both;
}

.server-summary-card.tariff-card .tariff-price {
  position: absolute;
  top: 32px;
  left: -5px;
  color: #00ff88;
  font-size: 2rem;
  font-weight: 800;
  display: flex;
  align-items: baseline;
  gap: 4px;
  z-index: 2;
  text-shadow: 0 0 10px #00ff88;
}

.server-summary-card.tariff-card .currency {
  color: rgba(225, 219, 255, 0.9);
  font-size: 0.9rem;
  font-weight: 500;
  text-shadow: 0 0 5px rgba(225, 219, 255, 0.5);
}

/* Ensure card uses original tariff card colors and gradients */
.server-summary-card.tariff-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #00ff88, #00d4aa, #00b8ff);
  opacity: 1;
}

.additional-features {
  margin: 20px 0;
  padding: 16px;
  background: rgba(35, 134, 54, 0.1);
  border: 1px solid rgba(35, 134, 54, 0.3);
  border-radius: 8px;
}

.additional-features h4 {
  color: #58a6ff;
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px 0;
}

.additional-features .feature {
  color: #2ea043;
  font-size: 18px;
  margin-bottom: 4px;
}

/* Use exact same button styling as original tariff cards */
.server-summary-card .create-server-btn {
  width: 100%;
  padding: 14px 20px;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer !important;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
  pointer-events: auto !important;
  z-index: 10;
  opacity: 1 !important;
  background: linear-gradient(135deg, #00ff88, #00d4aa);
  color: #000;
}

.server-summary-card .create-server-btn:hover {
  background: linear-gradient(135deg, #00d4aa, #00ff88);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 255, 136, 0.3);
}

.server-summary-card .create-server-btn:active {
  transform: translateY(0);
}

.server-summary-card .create-server-btn.insufficient {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(225, 219, 255, 0.5);
  cursor: not-allowed;
  opacity: 1 !important;
}

.server-summary-card .create-server-btn.insufficient:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: none;
  box-shadow: none;
}

.server-summary-card .create-server-btn:disabled {
  opacity: 1 !important;
  cursor: not-allowed;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

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

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

/* Closing animation classes */
.server-config-overlay.closing {
  animation: fadeOut 0.35s ease-out forwards;
}

.server-config-modal.closing {
  animation: slideDown 0.35s ease-out forwards;
}

/* Responsive */
@media (max-width: 768px) {
  .server-config-content {
    flex-direction: column;
    height: auto;
    max-height: calc(90vh - 100px);
  }
  
  .server-config-right {
    flex: none;
    border-left: none;
    border-top: 1px solid #30363d;
  }
  
  /* Fix additional features positioning on mobile */
  .server-summary-card .additional-features-container {
    position: relative;
    margin: 20px 0;
    z-index: 1;
  }
  
  .server-summary-card .additional-features-container .additional-features {
    position: relative;
    margin: 20px 0;
    padding: 16px;
    background: rgba(0, 255, 136, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(0, 255, 136, 0.2);
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
  }
  
  .server-config-left {
    border-right: none;
  }
  
  .builds-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-top: 16px !important;
  }
  
  .build-card {
    max-width: 100% !important;
    height: 180px !important;
  }
  
  .build-info {
    padding: 12px 12px 0px 12px !important;
    padding-right: 80px !important;
  }
  
  .build-name {
    font-size: 16px !important;
    margin: 0 0 8px 0 !important;
  }
  
  .build-price {
    font-size: 15px !important;
    margin-bottom: 12px !important;
  }
  
  .build-buy-btn {
    font-size: 11px !important;
    padding: 10px 12px !important;
    margin: 12px !important;
    width: calc(100% - 24px) !important;
    min-height: 36px !important;
  }
  
  .build-image-container {
    width: 60px !important;
    height: 60px !important;
    top: 12px !important;
    right: 12px !important;
  }
}

/* Modal closing animations */
@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

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

/* Closing animation classes */
.server-config-overlay.closing {
  animation: fadeOut 0.3s ease-out;
}

.server-config-modal.closing {
  animation: slideDown 0.3s ease-out;
}
/* Modern Dashboard Styles */

/* Welcome Hero Section */
.modern-dashboard-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 2rem;
  background: linear-gradient(135deg, rgba(0, 20, 40, 0.05) 0%, rgba(0, 50, 100, 0.05) 100%);
  border-radius: 20px;
  margin: 1rem;
}

.welcome-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #1a2332 0%, #2d3748 50%, #1a2332 100%);
  border-radius: 20px;
  padding: 3rem 2rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.welcome-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(74, 222, 128, 0.1) 0%, rgba(34, 197, 94, 0.1) 50%, rgba(16, 185, 129, 0.1) 100%);
  z-index: 0;
}

.hero-content {
  flex: 1;
  z-index: 1;
}

.hero-title {
  font-size: 2.5rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.brand-accent {
  background: linear-gradient(135deg, #4ade80 0%, #22c55e 50%, #10b981 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 0;
}

.hero-visual {
  position: relative;
  width: 300px;
  height: 200px;
}

.floating-elements {
  position: relative;
  width: 100%;
  height: 100%;
}

.float-element {
  position: absolute;
  font-size: 3rem;
  animation: float 6s ease-in-out infinite;
  opacity: 0.8;
}

.element-1 {
  top: 20px;
  right: 50px;
  animation-delay: 0s;
}

.element-2 {
  top: 80px;
  right: 150px;
  animation-delay: -2s;
}

.element-3 {
  top: 120px;
  right: 20px;
  animation-delay: -4s;
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33% { transform: translateY(-20px) rotate(5deg); }
  66% { transform: translateY(10px) rotate(-3deg); }
}

/* Modern Stats Grid */
.modern-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 1.5rem;
}

.modern-stat-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.modern-stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
}

.modern-stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.gradient-panel::before {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
}

.gradient-balance::before {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(16, 185, 129, 0.1) 100%);
}

.gradient-servers::before {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
}

.modern-stat-card:hover::before {
  opacity: 1;
}

.stat-icon-modern {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}

.stat-content-modern {
  flex: 1;
  z-index: 1;
}

.stat-content-modern h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 0.5rem;
}

.stat-value-modern {
  font-size: 1.5rem;
  font-weight: 700;
  color: #4ade80;
  margin-bottom: 0.25rem;
}

.balance-value.negative {
  color: #ef4444;
}

.stat-detail-modern {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.7);
}

.stat-warning-modern {
  font-size: 1.1rem;
  color: #fbbf24;
  margin-top: 0.25rem;
}

.modern-action-btn {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.primary-gradient {
  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
  color: white;
}

.balance-gradient {
  background: linear-gradient(135deg, #22c55e 0%, #10b981 100%);
  color: white;
}

.servers-gradient {
  background: linear-gradient(135deg, #a855f7 0%, #8b5cf6 100%);
  color: white;
}

.modern-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

/* Quick Actions Section */
.quick-actions-section {
  margin-top: 2rem;
}

.section-title-modern {
  font-size: 1.875rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 1.5rem;
  text-align: center;
}

.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.quick-action-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.quick-action-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(74, 222, 128, 0.1) 0%, rgba(34, 197, 94, 0.1) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
}

.quick-action-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}

.quick-action-card:hover::before {
  opacity: 1;
}

.action-icon-large {
  width: 80px;
  height: 80px;
  margin: 0 auto 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  font-size: 2.5rem;
  z-index: 1;
  position: relative;
}

.quick-action-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 0.5rem;
  z-index: 1;
  position: relative;
}

.quick-action-card p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.1rem;
  z-index: 1;
  position: relative;
}

/* Recent Servers Modern */
.modern-recent-servers {
  margin-top: 2rem;
}

.section-header-modern {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.modern-see-all-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  padding: 0.75rem 1.5rem;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.modern-see-all-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateX(5px);
}

.arrow-icon {
  transition: transform 0.3s ease;
}

.modern-see-all-btn:hover .arrow-icon {
  transform: translateX(3px);
}

.modern-servers-preview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 1.5rem;
}

.modern-server-preview-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.modern-server-preview-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(16, 185, 129, 0.1) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
}

.modern-server-preview-card.online::before {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(16, 185, 129, 0.15) 100%);
}

.modern-server-preview-card.offline::before {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(220, 38, 38, 0.1) 100%);
}

.modern-server-preview-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.modern-server-preview-card:hover::before {
  opacity: 1;
}

.card-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 20px;
  background: radial-gradient(circle at 50% 0%, rgba(74, 222, 128, 0.3), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.modern-server-preview-card:hover .card-glow {
  opacity: 0.3;
}

.server-preview-header-modern {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
  z-index: 1;
  position: relative;
}

.server-name-modern {
  font-size: 1.25rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 0.25rem;
}

.server-tariff {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.7);
}

.status-indicator-modern {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  border-radius: 20px;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.status-indicator-modern.online {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.status-indicator-modern.offline {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.1); }
}

.server-stats-modern {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
  z-index: 1;
  position: relative;
}

.stat-item-modern {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stat-item-modern .stat-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.1rem;
}

.stat-item-modern .stat-value {
  color: #ffffff;
  font-weight: 600;
  font-size: 1.1rem;
}

.server-actions-modern {
  display: flex;
  gap: 0.75rem;
  z-index: 1;
  position: relative;
}

.action-btn-modern {
  flex: 1;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 10px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.action-btn-modern.primary {
  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
  color: white;
}

.action-btn-modern.secondary {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.action-btn-modern:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Responsive Design */
@media (max-width: 768px) {
  .modern-dashboard-content {
    padding: 1rem;
    margin: 0.5rem;
  }
  
  .welcome-hero {
    flex-direction: column;
    text-align: center;
    padding: 2rem 1rem;
  }
  
  .hero-title {
    font-size: 2rem;
  }
  
  .hero-visual {
    width: 200px;
    height: 120px;
  }
  
  .modern-stats-grid {
    grid-template-columns: 1fr;
  }
  
  .quick-actions-grid {
    grid-template-columns: 1fr;
  }
  
  .modern-servers-preview {
    grid-template-columns: 1fr;
  }
}
/* Modern Servers Page Styles */

.modern-servers-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 2rem;
  background: linear-gradient(135deg, rgba(0, 20, 40, 0.05) 0%, rgba(0, 50, 100, 0.05) 100%);
  border-radius: 20px;
  margin: 1rem;
}

/* Payment Overview Card */
.payment-overview-card {
  background: linear-gradient(135deg, #1e293b 0%, #334155 50%, #1e293b 100%);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 20px;
  padding: 2rem;
  margin-bottom: 1rem;
  margin-top: 0.5rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
}

@media (max-width: 768px) {
  .payment-overview-card {
    padding: 1.25rem;
    margin-bottom: 0.75rem;
    border-radius: 15px;
  }
}

@media (max-width: 480px) {
  .payment-overview-card {
    padding: 1rem;
    margin-bottom: 0.5rem;
    border-radius: 12px;
  }
}

.payment-overview-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(34, 197, 94, 0.1) 0%, rgba(16, 185, 129, 0.1) 50%, rgba(5, 150, 105, 0.1) 100%);
  z-index: 0;
}

.payment-overview-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  z-index: 1;
  position: relative;
}

.payment-overview-icon {
  font-size: 2rem;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.payment-overview-header h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.payment-overview-content {
  z-index: 1;
  position: relative;
}

.payment-overview-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

@media (max-width: 768px) {
  .payment-overview-stats {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
  }
}

@media (max-width: 480px) {
  .payment-overview-stats {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
}

.payment-stat-item {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.1);
  border-radius: 15px;
  padding: 1.5rem;
  text-align: center;
  transition: all 0.3s ease;
}

.payment-stat-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  border-color: rgba(34, 197, 94, 0.3);
}

@media (max-width: 768px) {
  .payment-stat-item {
    padding: 1.25rem;
    border-radius: 12px;
  }
}

@media (max-width: 480px) {
  .payment-stat-item {
    padding: 1rem;
    border-radius: 10px;
  }
  
  .payment-stat-label {
    font-size: 0.8rem;
  }
  
  .payment-stat-value {
    font-size: 1.125rem;
  }
  
  .payment-stat-value.total-amount {
    font-size: 1.25rem;
  }
}

.payment-stat-label {
  display: block;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.payment-stat-value {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
}

.payment-stat-value.total-amount {
  font-size: 1.5rem;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.payment-stat-value.total-amount .currency {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

.payment-stat-value.expiry-date {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.expiry-date-text.normal {
  color: #22c55e;
}

.expiry-date-text.warning {
  color: #f59e0b;
}

.expiry-date-text.critical {
  color: #ef4444;
}

.days-left {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 400;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 25px;
  font-size: 0.875rem;
  font-weight: 600;
}

.status-badge.active {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.status-badge.warning {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Server Price Info */
.server-price-info {
  background: rgba(15, 23, 42, 0.4);
  border: 1px solid rgba(148, 163, 184, 0.1);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.server-monthly-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price-label {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}

.price-value {
  font-size: 1.125rem;
  font-weight: 700;
  color: #22c55e;
}

/* Modern Servers Header */
.modern-servers-header {
  background: linear-gradient(135deg, #1a2332 0%, #2d3748 50%, #1a2332 100%);
  border-radius: 20px;
  padding: 2rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.modern-servers-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(168, 85, 247, 0.1) 0%, rgba(139, 92, 246, 0.1) 50%, rgba(124, 58, 237, 0.1) 100%);
  z-index: 0;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1;
  position: relative;
}

.page-title-modern {
  font-size: 2.5rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 0.5rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.page-subtitle-modern {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 0;
}

.create-server-btn-modern {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 50%, #15803d 100%);
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 15px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer !important;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  pointer-events: auto !important;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  box-shadow: 0 10px 20px rgba(34, 197, 94, 0.3);
}

.create-server-btn-modern::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.6s;
}

.create-server-btn-modern:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(34, 197, 94, 0.3);
}

.create-server-btn-modern:hover::before {
  left: 100%;
}

.btn-icon-wrapper {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Modern Stats Dashboard */
.modern-servers-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.stat-card-modern {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: 1rem;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  min-height: auto;
}

.stat-card-modern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
}

.stat-card-modern.online::before {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(16, 185, 129, 0.1) 100%);
}

.stat-card-modern.offline::before {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(220, 38, 38, 0.1) 100%);
}

.stat-card-modern.total::before {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
}

.stat-card-modern.players::before {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
}

.stat-card-modern:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.stat-card-modern:hover::before {
  opacity: 1;
}

.stat-icon-container {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
  z-index: 1;
}

.stat-icon-modern {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.floating-circles {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  pointer-events: none;
}

.floating-circle {
  position: absolute;
  border-radius: 50%;
  filter: blur(8px);
  opacity: 0.4;
}

.floating-circle.online {
  background: radial-gradient(circle, #22c55e, transparent);
  animation: float-green 6s infinite ease-in-out;
}

.floating-circle.offline {
  background: radial-gradient(circle, #ef4444, transparent);
  animation: float-red 8s infinite ease-in-out;
}

.floating-circle:nth-child(1) {
  width: 20px;
  height: 20px;
  top: 20%;
  left: 15%;
  animation-delay: 0s;
}

.floating-circle:nth-child(2) {
  width: 30px;
  height: 30px;
  top: 60%;
  right: 20%;
  animation-delay: -2s;
}

.floating-circle:nth-child(3) {
  width: 15px;
  height: 15px;
  bottom: 30%;
  left: 30%;
  animation-delay: -4s;
}

@keyframes pulse-ring {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.8);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.3);
  }
}

.stat-content {
  z-index: 1;
  position: relative;
}

.stat-value-large {
  font-size: 2.5rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 0.5rem;
}

.stat-label-modern {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Modern Empty State */
.modern-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 4rem 2rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
}

.empty-illustration {
  position: relative;
  margin-bottom: 2rem;
}

.empty-icon-animated {
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  background: linear-gradient(135deg, rgba(74, 222, 128, 0.2) 0%, rgba(34, 197, 94, 0.2) 100%);
  border-radius: 30px;
  animation: bounce 3s ease-in-out infinite;
  margin: 0 auto;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

.empty-particles-modern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.particle-1, .particle-2, .particle-3, .particle-4 {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #4ade80;
  border-radius: 50%;
  opacity: 0.6;
}

.particle-1 {
  top: 20px;
  left: 20px;
  animation: float 4s ease-in-out infinite;
  animation-delay: 0s;
}

.particle-2 {
  top: 30px;
  right: 30px;
  animation: float 4s ease-in-out infinite;
  animation-delay: -1s;
}

.particle-3 {
  bottom: 40px;
  left: 40px;
  animation: float 4s ease-in-out infinite;
  animation-delay: -2s;
}

.particle-4 {
  bottom: 20px;
  right: 20px;
  animation: float 4s ease-in-out infinite;
  animation-delay: -3s;
}

.empty-text-modern h2 {
  font-size: 2rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 1rem;
}

.empty-text-modern p {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
  margin-bottom: 2rem;
  max-width: 500px;
}

.cta-button-modern {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 15px;
  font-size: 1.125rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(34, 197, 94, 0.3);
  margin: 0 auto;
  max-width: -moz-fit-content;
  max-width: fit-content;
}

.btn-icon-modern {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cta-button-modern:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(34, 197, 94, 0.4);
}

.btn-shimmer {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.6s;
}

.cta-button-modern:hover .btn-shimmer {
  left: 100%;
}

/* Ultra Modern Servers Grid */
.ultra-modern-servers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 2rem;
  animation: fadeInUp 0.6s ease-out;
}

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

.ultra-modern-server-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 24px;
  padding: 2rem;
  position: relative;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  animation: slideInUp 0.6s ease-out;
  animation-fill-mode: both;
}

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

.ultra-modern-server-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 0;
  border-radius: 24px;
}

.ultra-modern-server-card.online::before {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(16, 185, 129, 0.15) 100%);
}

.ultra-modern-server-card.offline::before {
  background: linear-gradient(135deg, rgba(107, 114, 128, 0.1) 0%, rgba(75, 85, 99, 0.1) 100%);
}

.ultra-modern-server-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
  border-color: rgba(255, 255, 255, 0.25);
}

.ultra-modern-server-card:hover::before {
  opacity: 1;
}

.card-background-glow {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(74, 222, 128, 0.1) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 0;
}

.ultra-modern-server-card:hover .card-background-glow {
  opacity: 0.5;
}

.server-header-modern {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  z-index: 1;
  position: relative;
}

.server-identity {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.server-avatar {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.25rem;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.server-name-ultra {
  font-size: 1.375rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.25rem;
}

.server-meta {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.server-game {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.7);
}

.server-plan-badge {
  background: rgba(59, 130, 246, 0.2);
  color: #3b82f6;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.status-pill {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.status-pill.online {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.4);
}

.status-pill.offline {
  background: rgba(107, 114, 128, 0.2);
  color: #9ca3af;
  border: 1px solid rgba(107, 114, 128, 0.4);
}

.status-indicator {
  position: relative;
}

.status-dot-animated {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
  animation: statusPulse 2s infinite;
}

@keyframes statusPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.2);
  }
}

/* Server Metrics */
.server-metrics {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
  z-index: 1;
  position: relative;
}

.metric-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.metric-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

@media (max-width: 768px) {
  .metric-item {
    padding: 0.625rem;
    gap: 0.5rem;
    border-radius: 8px;
  }
}

@media (max-width: 480px) {
  .metric-item {
    padding: 0.5rem;
    gap: 0.375rem;
    border-radius: 6px;
    flex-direction: column;
    text-align: center;
  }
}

.metric-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.metric-data {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.metric-label {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}

.metric-value {
  font-size: 1.1rem;
  color: #ffffff;
  font-weight: 600;
}

@media (max-width: 768px) {
  .metric-icon {
    width: 36px;
    height: 36px;
    font-size: 1.125rem;
    border-radius: 8px;
  }
  
  .metric-label {
    font-size: 1rem;
  }
  
  .metric-value {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .metric-icon {
    width: 32px;
    height: 32px;
    font-size: 1rem;
    border-radius: 6px;
  }
  
  .metric-label {
    font-size: 0.9rem;
  }
  
  .metric-value {
    font-size: 0.9rem;
  }
}

.metric-value.monospace {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  background: rgba(255, 255, 255, 0.1);
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  font-size: 1rem;
}

.players-count {
  color: #4ade80;
}

.performance {
  color: #22c55e;
}

/* Server Actions Ultra */
.server-actions-ultra {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.75rem;
  z-index: 1;
  position: relative;
}

.action-btn-ultra {
  padding: 0.75rem 1rem;
  border: none;
  border-radius: 12px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.action-btn-ultra.primary {
  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.action-btn-ultra.secondary {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.action-btn-ultra.danger {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.btn-icon-ultra {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.action-btn-ultra:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.btn-ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.3s, height 0.3s;
  pointer-events: none;
}

.action-btn-ultra:active .btn-ripple {
  width: 100px;
  height: 100px;
}

/* Server Card Shine Effect */
.server-card-shine {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.8s ease;
  pointer-events: none;
  z-index: 2;
}

.ultra-modern-server-card:hover .server-card-shine {
  left: 100%;
}

/* Responsive Design */
@media (max-width: 768px) {
  .modern-servers-content {
    padding: 0.75rem;
    margin: 0.25rem;
    gap: 1rem;
  }
  
  .header-content {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  
  .page-title-modern {
    font-size: 1.75rem;
  }
  
  .page-subtitle-modern {
    font-size: 1rem;
  }
  
  .create-server-btn-modern {
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
  }
  
  .modern-servers-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  
  .ultra-modern-servers-grid {
    grid-template-columns: 1fr;
  }
  
  .ultra-modern-server-card {
    padding: 1rem;
  }
  
  .server-header-modern {
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
  }
  
  .server-title-modern {
    font-size: 1.25rem;
  }
  
  .server-subtitle-modern {
    font-size: 0.875rem;
  }
  
  .status-pill {
    align-self: flex-start;
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
  }
  
  .server-actions-ultra {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  
  .action-btn-ultra {
    padding: 0.625rem 0.875rem;
    font-size: 0.9rem;
  }
  
  .metric-item {
    padding: 0.625rem;
  }
  
  .metric-label {
    font-size: 0.9rem;
  }
  
  .metric-value {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .modern-servers-content {
    padding: 0.5rem;
    margin: 0;
  }
  
  .page-title-modern {
    font-size: 1.5rem;
  }
  
  .modern-servers-stats {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  
  .ultra-modern-server-card {
    padding: 0.5rem 0.65rem;
  }
  
  .server-header-modern {
    gap: 0.25rem;
  }
  
  .server-title-modern {
    font-size: 1rem;
  }
  
  .server-subtitle-modern { display: none; }
  
  .status-pill {
    padding: 0.2rem;
    font-size: 0;
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    border-radius: 999px;
    justify-content: center;
    gap: 0;
    overflow: visible;
  }
  .status-pill .status-dot-animated { margin: 0; }
  .status-pill .status-indicator { margin: 0; }
  .status-pill span { display: none; }
  
  /* Метрики на телефоне: оставляем текст, как на ПК */
  .metrics-grid-modern {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
  
  .metric-item {
    padding: 0.5rem;
    gap: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: auto;
    aspect-ratio: auto;
  }
  
  .metric-icon {
    width: 32px;
    height: 32px;
    font-size: 1rem;
  }
  
  .metric-data {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  
  .metric-label,
  .metric-value {
    display: block;
  }
  
  .metric-label {
    font-size: 0.75rem;
  }
  
  .metric-value {
    font-size: 0.85rem;
  }
  
  .action-btn-ultra {
    padding: 0.45rem 0.65rem;
    font-size: 0.78rem;
  }
}

@media (max-width: 360px) {
  .ultra-modern-server-card {
    padding: 0.5rem;
  }
  
  .server-title-modern {
    font-size: 1rem;
  }
  
  .metric-item {
    padding: 0.4rem;
  }
  
  .metric-icon {
    width: 28px;
    height: 28px;
    font-size: 0.875rem;
  }
  
  .metric-label,
  .metric-value {
    font-size: 0.72rem;
  }
}

/* Server Addons Styles */
.server-addons-premium {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 12px;
  padding: 1rem;
  margin-top: 1rem;
}

.addons-header-premium {
  margin-bottom: 0.75rem;
}

.addons-title-premium {
  font-size: 0.875rem;
  font-weight: 600;
  color: #6366f1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.addons-list-premium {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.addon-item-premium {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.addon-item-premium:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.addon-icon-premium {
  font-size: 1.25rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);
  border-radius: 6px;
}

.addon-content-premium {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
}

.addon-name-premium {
  font-size: 0.875rem;
  font-weight: 500;
  color: #e2e8f0;
}

.addon-quantity-premium {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6366f1;
  background: rgba(99, 102, 241, 0.2);
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
}

/* Addon Management Styles */
.addons-header-premium {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.addons-manage-btn {
  background: rgba(99, 102, 241, 0.2);
  border: 1px solid rgba(99, 102, 241, 0.3);
  color: #e2e8f0;
  padding: 0.375rem 0.75rem;
  border-radius: 6px;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.addons-manage-btn:hover {
  background: rgba(99, 102, 241, 0.3);
  border-color: rgba(99, 102, 241, 0.5);
  transform: translateY(-1px);
}

.addon-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  text-align: center;
}

.addon-empty-text {
  font-size: 0.875rem;
  color: #94a3b8;
  font-style: italic;
}

.addon-add-btn {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  border: none;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.addon-add-btn:hover {
  background: linear-gradient(135deg, #5855eb 0%, #7c3aed 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

/* Premium Servers Grid */
.premium-servers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 2rem;
  justify-content: center;
  align-items: start;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (max-width: 1200px) {
  .premium-servers-grid {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1.5rem;
  }
}

@media (max-width: 900px) {
  .premium-servers-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
  }
}

@media (max-width: 768px) {
  .premium-servers-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    padding: 0 0.25rem;
  }
}

@media (max-width: 480px) {
  .premium-servers-grid {
    gap: 0.5rem;
    padding: 0;
  }
}

@media (max-width: 360px) {
  .premium-servers-grid {
    gap: 0.25rem;
  }
  
  .server-addons-premium {
    padding: 0.75rem;
  }
  
  .addon-item-premium {
    padding: 0.375rem;
  }
  
  .addon-icon-premium {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 1rem;
  }
  
  .addons-manage-btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
  }
  
  .addon-empty-state {
    padding: 1rem;
  }
}
/* Enhanced Dashboard Styles */

/* Payment Overview Card */
.payment-overview-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  margin-top: -2rem; /* Поднимаем окно ещё выше */
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.payment-overview-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.payment-overview-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.money-icon {
  width: 56px;
  height: 56px;
  filter: brightness(1.2);
}

.payment-overview-header h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

.payment-overview-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}

.payment-stat-item {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 1rem;
  text-align: center;
}

.payment-stat-label {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.payment-stat-value {
  font-size: 1.125rem;
  font-weight: 600;
  color: #ffffff;
}

.total-amount {
  color: #22c55e;
  font-size: 1.25rem;
  font-weight: 700;
}

.currency {
  font-size: 1rem;
  opacity: 1;
  color: #22c55e;
  font-weight: 600;
}

.expiry-date-text.critical {
  color: #ef4444;
}

.expiry-date-text.warning {
  color: #f59e0b;
}

.expiry-date-text.normal {
  color: #22c55e;
}

.days-left {
  font-size: 0.875rem;
  opacity: 0.8;
  margin-left: 0;
  text-align: center;
  display: block;
}

.status-badge {
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 500;
}

.status-badge.active {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.status-badge.warning {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

@media (max-width: 768px) {
  .payment-overview-stats {
    grid-template-columns: 1fr;
  }
  
  .payment-overview-card {
    margin-top: -0.5rem;
    padding: 1rem;
  }
  
  .payment-overview-header {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
  }
}

/* Servers Dashboard Section */
.servers-dashboard-section {
  margin-top: 2rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.servers-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.section-title-block {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.section-title {
  font-size: 1.875rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

.total-online-stats {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.online-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 20px;
  padding: 0.5rem 1rem;
}

.online-dot {
  width: 10px;
  height: 10px;
  background: #22c55e;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.2); }
}

.online-text {
  font-size: 0.875rem;
  color: #22c55e;
  font-weight: 600;
}

.see-all-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  padding: 0.75rem 1.5rem;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 600;
}

.see-all-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateX(5px);
}

/* Servers Content Grid */
.servers-content-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
  align-items: flex-start;
}

.servers-list-section {
  display: flex;
  flex-direction: column;
}

.servers-preview {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Enhanced Server Preview Cards */
.server-preview-card.premium-server-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 1.5rem;
  max-width: 600px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  animation: slideInUp 0.6s ease-out;
}

.server-preview-card.premium-server-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, rgba(16, 185, 129, 0.08) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
}

.server-preview-card.premium-server-card.online::before {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(16, 185, 129, 0.1) 100%);
}

.server-preview-card.premium-server-card.offline::before {
  background: linear-gradient(135deg, rgba(107, 114, 128, 0.08) 0%, rgba(75, 85, 99, 0.08) 100%);
}

.server-preview-card.premium-server-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
  border-color: rgba(34, 197, 94, 0.3);
}

.server-preview-card.premium-server-card.online {
  border-color: rgba(34, 197, 94, 0.4);
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.1);
}

.server-preview-card.premium-server-card.offline {
  border-color: rgba(239, 68, 68, 0.3);
  opacity: 0.9;
}

.server-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
  z-index: 1;
  position: relative;
}

.server-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.server-name {
  font-size: 1.125rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
}

.server-plan {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.25);
  padding: 0.25rem 0.5rem;
  border-radius: 8px;
  width: -moz-fit-content;
  width: fit-content;
}

.server-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.server-status.active {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.server-status.inactive {
  background: rgba(107, 114, 128, 0.2);
  color: #9ca3af;
  border: 1px solid rgba(107, 114, 128, 0.3);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  animation: statusPulse 2s infinite;
}

@keyframes statusPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.1); }
}

.server-preview-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 1rem;
  z-index: 1;
  position: relative;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
}

.detail-label {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}

.detail-value {
  font-size: 1.1rem;
  color: #ffffff;
  font-weight: 600;
}

/* CPU, RAM, SSD specific styles */
.metric-value-premium.cpu-premium {
  color: #60a5fa;
  font-weight: 600;
}

.metric-value-premium.ram-premium {
  color: #34d399;
  font-weight: 600;
}

.metric-value-premium.ssd-premium {
  color: #fbbf24;
  font-weight: 600;
}

.detail-value.players {
  color: #4ade80;
}

.server-preview-actions {
  z-index: 1;
  position: relative;
}

.btn-mini {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-mini.primary {
  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
  color: white;
}

.btn-mini:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Chart Section */
.chart-section {
  display: flex;
  flex-direction: column;
  height: -moz-fit-content;
  height: fit-content;
  position: sticky;
  top: 2rem;
}

.chart-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.03) 100%);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.chart-header h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
}

.chart-current {
  font-size: 1.25rem;
  font-weight: 700;
  color: #22c55e;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.25);
  padding: 0.5rem 1rem;
  border-radius: 12px;
}

.chart-container {
  position: relative;
}

.players-chart {
  width: 100%;
  height: 120px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  padding: 10px;
}

.chart-point {
  transition: r 0.2s ease;
  cursor: pointer;
}

.chart-point:hover {
  r: 5;
}

.chart-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  padding: 0 10px;
}

.time-label {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
}

/* Modern Loading Animation */
.modern-loading-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
  display: grid;
  place-items: center;
  z-index: 10000;
  backdrop-filter: blur(8px);
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  text-align: center;
}

.loading-spinner {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.spinner-ring {
  position: absolute;
  border-radius: 50%;
  border: 3px solid transparent;
  animation: spin 2s linear infinite;
}

.ring-1 {
  width: 120px;
  height: 120px;
  border-top: 3px solid #22c55e;
  border-right: 3px solid rgba(34, 197, 94, 0.3);
  animation-duration: 1.5s;
}

.ring-2 {
  width: 90px;
  height: 90px;
  border-top: 3px solid #3b82f6;
  border-left: 3px solid rgba(59, 130, 246, 0.3);
  animation-duration: 2s;
  animation-direction: reverse;
}

.ring-3 {
  width: 60px;
  height: 60px;
  border-top: 3px solid #a855f7;
  border-bottom: 3px solid rgba(168, 85, 247, 0.3);
  animation-duration: 1.2s;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-icon {
  font-size: 2.5rem;
  animation: bounce 2s ease-in-out infinite;
  z-index: 1;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

.loading-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.loading-title {
  font-size: 2rem;
  font-weight: 800;
  color: #ffffff;
  background: linear-gradient(135deg, #22c55e 0%, #3b82f6 50%, #a855f7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.5rem;
}

.loading-subtitle {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 1rem;
}

.loading-dots {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.loading-dots span {
  width: 8px;
  height: 8px;
  background: #22c55e;
  border-radius: 50%;
  animation: dot-bounce 1.4s ease-in-out infinite both;
}

.loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.loading-dots span:nth-child(2) { animation-delay: -0.16s; }
.loading-dots span:nth-child(3) { animation-delay: 0s; }

@keyframes dot-bounce {
  0%, 80%, 100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  40% {
    transform: scale(1.2);
    opacity: 1;
  }
}

/* Advanced Chart Styles */
.advanced-chart-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  position: sticky;
  top: 2rem;
  height: -moz-fit-content;
  height: fit-content;
}

.chart-header-advanced {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2rem;
  gap: 1rem;
}

.chart-title-section h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 0.5rem 0;
}

.chart-subtitle {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.current-stats {
  display: flex;
  gap: 1rem;
}

.stat-block {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 1rem;
  text-align: center;
  min-width: 80px;
}

.stat-number {
  font-size: 1.5rem;
  font-weight: 800;
  color: #22c55e;
  margin-bottom: 0.25rem;
}

.stat-label {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.advanced-chart-container {
  position: relative;
}

.advanced-players-chart {
  width: 100%;
  height: 280px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  padding: 15px;
  margin-bottom: 1rem;
}

.chart-main-line {
  transition: all 0.3s ease;
}

.chart-point-bg {
  opacity: 0;
  transition: all 0.2s ease;
}

.chart-point-main {
  transition: all 0.2s ease;
  cursor: pointer;
}

.chart-point-main:hover {
  r: 6;
  filter: drop-shadow(0 0 8px #22c55e);
}

.chart-point-main:hover + .chart-point-bg {
  opacity: 1;
}

.chart-point-label {
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.chart-point-main:hover ~ .chart-point-label {
  opacity: 1;
}

.advanced-chart-labels {
  margin-bottom: 1rem;
}

.time-markers {
  display: flex;
  justify-content: space-between;
  padding: 0 45px;
}

.time-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.marker-line {
  width: 2px;
  height: 12px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 1px;
}

.marker-label {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
}

.chart-legend {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.legend-color.online {
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}

.legend-color.trend {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

.legend-item span {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

/* Enhanced Server Preview Cards */
.server-preview-card-enhanced {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 1.5rem;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.server-preview-card-enhanced.online {
  border-color: rgba(34, 197, 94, 0.4);
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.1);
}

.server-preview-card-enhanced.offline {
  border-color: rgba(239, 68, 68, 0.3);
  opacity: 0.8;
}

.server-preview-card-enhanced:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.server-card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.server-avatar-mini {
  width: 45px;
  height: 45px;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.125rem;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.server-identity-mini {
  flex: 1;
}

.server-name-enhanced {
  font-size: 1.125rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 0.25rem;
}

.server-plan-badge-mini {
  background: linear-gradient(90deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.server-status-enhanced {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.server-status-enhanced.online {
  color: #22c55e;
}

.server-status-enhanced.offline {
  color: #ef4444;
}

.status-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: relative;
}

.server-status-enhanced.online .status-pulse {
  background: #22c55e;
  animation: pulse-green 2s infinite;
}

.server-status-enhanced.offline .status-pulse {
  background: #ef4444;
}

@keyframes pulse-green {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

.server-metrics-mini {
  margin-bottom: 1rem;
}

.metric-row {
  display: flex;
  gap: 1rem;
}

.metric-mini {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.metric-icon-mini {
  font-size: 1rem;
}

.metric-text {
  color: rgba(255, 255, 255, 0.8);
  font-family: 'JetBrains Mono', monospace;
}

.metric-text.players {
  color: #22c55e;
  font-weight: 600;
}

.server-billing-info {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.billing-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.billing-row:not(:last-child) {
  margin-bottom: 0.75rem;
}

.billing-row.expiration {
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 0;
}

.billing-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
}

.billing-icon {
  font-size: 1.125rem;
}

.billing-icon.warning {
  animation: warning-pulse 2s infinite;
}

.billing-icon.caution {
  animation: caution-pulse 3s infinite;
}

@keyframes warning-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

@keyframes caution-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.billing-details {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.billing-label {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.billing-value {
  font-size: 0.875rem;
  font-weight: 600;
  color: #ffffff;
}

.expiration-date.critical {
  color: #ef4444;
}

.expiration-date.warning {
  color: #f59e0b;
}

.expiration-date.normal {
  color: #22c55e;
}

.days-left {
  font-size: 0.75rem;
  margin-left: 0.5rem;
  opacity: 0.8;
}

.server-actions-enhanced {
  display: flex;
  gap: 0.75rem;
}

.btn-enhanced {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border: none;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.btn-enhanced.primary {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
}

.btn-enhanced.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 15px rgba(59, 130, 246, 0.4);
}

.btn-enhanced.warning {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
}

.btn-enhanced.warning:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 15px rgba(245, 158, 11, 0.4);
}

.card-glow-effect {
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
  border-radius: 16px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: -1;
}

.server-preview-card-enhanced:hover .card-glow-effect {
  opacity: 1;
}

/* Premium Server Cards (Full Servers Section) */
.premium-servers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 600px));
  justify-content: start;
  gap: 2rem;
  animation: fadeInUp 0.6s ease;
}

.premium-server-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 2rem;
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
  animation: slideInUp 0.6s ease both;
}

.premium-server-card.online {
  border-color: rgba(34, 197, 94, 0.4);
  box-shadow: 0 0 30px rgba(34, 197, 94, 0.1);
}

.premium-server-card.offline {
  border-color: rgba(239, 68, 68, 0.3);
  opacity: 0.9;
}

.premium-server-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.card-background-premium {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 50% 0%, rgba(34, 197, 94, 0.1) 0%, transparent 50%);
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.premium-server-card.online:hover .card-background-premium {
  opacity: 0.8;
}

.card-shimmer-effect {
  position: absolute;
  top: -2px;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transition: left 0.6s ease;
}

.premium-server-card:hover .card-shimmer-effect {
  left: 100%;
}

.server-header-premium {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
}

.server-identity-premium {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.server-avatar-premium {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.avatar-ring {
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border: 2px solid rgba(34, 197, 94, 0.6);
  border-radius: 18px;
  animation: rotate 3s linear infinite;
}

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.avatar-text-premium {
  z-index: 1;
}

.server-info-premium {
  flex: 1;
}

.server-name-premium {
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.5rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.server-meta-premium {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.server-game-premium {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.875rem;
  font-weight: 500;
}

.plan-badge-premium {
  padding: 0.375rem 1rem;
  border-radius: 25px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.plan-badge-premium.proxy {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  background-size: 200% 100%;
  color: white;
  position: relative;
  overflow: hidden;
  animation: badge-glow 2s ease-in-out infinite;
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  z-index: 2;
}

.plan-badge-premium.proxy::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: badge-shimmer 3s ease-in-out infinite;
}

.plan-badge-premium.mini {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
}

.plan-badge-premium.standard {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  background-size: 200% 100%;
  color: white;
  position: relative;
  overflow: hidden;
  animation: badge-glow-standard 2s ease-in-out infinite;
}

.plan-badge-premium.standard::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: badge-shimmer 3s ease-in-out infinite;
}

.plan-badge-premium.pro {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
}

.plan-badge-premium.ultimate {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
}

.status-indicator-premium {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 600;
}

.status-indicator-premium.online {
  color: #22c55e;
}

.status-indicator-premium.offline {
  color: #ef4444;
}

.status-dot-premium {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  position: relative;
}

.status-indicator-premium.online .status-dot-premium {
  background: #22c55e;
}

.status-indicator-premium.offline .status-dot-premium {
  background: #ef4444;
}

.pulse-animation {
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border: 2px solid currentColor;
  border-radius: 50%;
  animation: pulse-ring 2s infinite;
  opacity: 0.3;
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.8);
    opacity: 0.8;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes badge-glow {
  0%, 100% {
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.5), 0 0 20px rgba(139, 92, 246, 0.3), 0 0 30px rgba(139, 92, 246, 0.1);
  }
  50% {
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.8), 0 0 30px rgba(139, 92, 246, 0.6), 0 0 40px rgba(139, 92, 246, 0.4);
  }
}

@keyframes badge-glow-standard {
  0%, 100% {
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.5), 0 0 20px rgba(16, 185, 129, 0.3), 0 0 30px rgba(16, 185, 129, 0.1);
  }
  50% {
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.8), 0 0 30px rgba(16, 185, 129, 0.6), 0 0 40px rgba(16, 185, 129, 0.4);
  }
}

@keyframes badge-shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

.server-metrics-premium {
  margin-bottom: 2rem;
}

.metrics-row-premium {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem;
}

.metric-card-premium {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition: all 0.2s ease;
}

.metric-card-premium:hover {
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.2);
}

.metric-icon-premium {
  font-size: 1.25rem;
}

.metric-content-premium {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}

.metric-label-premium {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.025em;
  font-weight: 500;
}

.metric-value-premium {
  font-size: 0.875rem;
  font-weight: 600;
  color: #ffffff;
}

.metric-value-premium.monospace {
  font-family: 'JetBrains Mono', monospace;
}

.metric-value-premium.players-premium {
  color: #22c55e;
}

.performance-premium.excellent {
  color: #22c55e;
}

.performance-premium.stopped {
  color: #ef4444;
}

.server-billing-premium {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.billing-header-premium {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.billing-title-premium {
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
}

.current-balance-premium {
  font-size: 1.125rem;
  font-weight: 800;
  color: #22c55e;
  font-family: 'JetBrains Mono', monospace;
}

.billing-details-premium {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.billing-item-premium {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.billing-label-premium {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

.billing-amount-premium {
  font-size: 0.875rem;
  font-weight: 700;
  color: #ffffff;
  font-family: 'JetBrains Mono', monospace;
}

.expiration-premium {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 1rem;
  margin-top: 0.5rem;
}

.expiration-content-premium {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

.expiration-label-premium {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.025em;
  font-weight: 600;
}

.expiration-info-premium {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.expiration-date-premium {
  font-size: 1rem;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
}

.expiration-date-premium.critical {
  color: #ef4444;
  animation: critical-pulse 1.5s infinite;
}

.expiration-date-premium.warning {
  color: #f59e0b;
}

.expiration-date-premium.normal {
  color: #22c55e;
}

@keyframes critical-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.days-remaining-premium {
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  text-align: center;
}

.days-remaining-premium.critical {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.days-remaining-premium.warning {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.days-remaining-premium.normal {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.server-actions-premium {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.action-btn-premium {
  flex: 1;
  min-width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  border: none;
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.action-btn-premium.primary-premium {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.action-btn-premium.primary-premium:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(59, 130, 246, 0.4);
}

.action-btn-premium.secondary-premium {
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
  color: white;
  border: 1px solid rgba(107, 114, 128, 0.3);
}

.action-btn-premium.secondary-premium:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(107, 114, 128, 0.4);
}

.action-btn-premium.warning-premium {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  border: 1px solid rgba(245, 158, 11, 0.3);
  animation: warning-glow 2s infinite;
}

.action-btn-premium.warning-premium:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(245, 158, 11, 0.5);
}

@keyframes warning-glow {
  0%, 100% { box-shadow: 0 0 5px rgba(245, 158, 11, 0.3); }
  50% { box-shadow: 0 0 20px rgba(245, 158, 11, 0.6); }
}

.action-btn-premium.danger-premium {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.action-btn-premium.danger-premium:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(239, 68, 68, 0.4);
}

.btn-icon-premium {
  font-size: 1rem;
}

.btn-shine-premium {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.6s ease;
}

.action-btn-premium:hover .btn-shine-premium {
  left: 100%;
}

.premium-card-glow {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(34, 197, 94, 0.15), 
    transparent);
  transition: left 0.8s ease;
  pointer-events: none;
  z-index: 1;
}

.premium-server-card:hover .premium-card-glow {
  left: 100%;
}

.premium-server-card::after {
  content: '';
  position: absolute;
  inset: 0;
  padding: 2px;
  background: linear-gradient(135deg, 
    rgba(34, 197, 94, 0.3), 
    rgba(16, 185, 129, 0.2), 
    rgba(34, 197, 94, 0.3));
  border-radius: 20px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: xor;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.premium-server-card:hover::after {
  opacity: 1;
}

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

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



.btn-create-build {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn-create-build:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
}

/* Responsive design */
@media (max-width: 768px) {
  .builds-grid {
    grid-template-columns: 1fr;
  }
  
  .my-builds-section {
    padding: 1.5rem;
  }
  
  .build-actions {
    flex-direction: column;
  }
  
  .empty-builds {
    padding: 2rem 1rem;
  }
}

/* Server Addons Styles */
.server-addons-premium {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.addons-header-premium {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.addons-title-premium {
  font-size: 0.875rem;
  font-weight: 600;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.addons-manage-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  padding: 0.5rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.875rem;
}

.addons-manage-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

.addons-list-premium {
  width: 100%;
}

.addons-row-premium {
  display: flex;
  gap: 1rem;
  width: 100%;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.addons-row-premium .addon-item-premium {
  flex: 1 1 calc(33.333% - 0.67rem);
  min-width: 0;
}

.addons-row-premium:last-child {
  margin-bottom: 0;
}

.addons-left-premium {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.addons-right-premium {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.addon-item-premium {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  flex: 1;
  min-height: 60px;
  min-width: 0;
}

.addon-item-premium.clickable-metric {
  cursor: pointer;
}

.addon-item-premium.clickable-metric:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.08));
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.addon-icon-premium {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  background: transparent;
  border-radius: 0;
  flex-shrink: 0;
}

.addon-icon-img,
.metric-icon-img {
  width: 48px;
  height: 48px;
  -o-object-fit: contain;
     object-fit: contain;
}

.addon-icon-img-large {
  width: 50px;
  height: 50px;
  -o-object-fit: contain;
     object-fit: contain;
}

.addon-content-premium {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  flex: 1;
  min-width: 0;
}

.addon-name-premium {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.2;
}

.addon-quantity-premium {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  white-space: nowrap;
}

@media (max-width: 640px) {
  /* Чуть сужаем фон карточки на мобильных, чтобы не упирался в края */
  .premium-server-card {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
    margin-left: auto;
    margin-right: auto;
    max-width: calc(100vw - 16px);
    width: 100%;
  }
  .card-background-premium {
    left: 10px;
    right: 10px;
    top: 10px;
    bottom: 10px;
    border-radius: 16px;
  }
  .premium-servers-grid {
    grid-template-columns: 1fr;
    justify-content: center;
    justify-items: center;
    padding: 0 8px;
    margin: 0 auto;
    max-width: 100vw;
  }

  /* На мобильных показываем подписи под иконками */
  .server-addons-premium {
    padding: 0.75rem;
  }

  .addon-item-premium.clickable-metric {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: 0.6rem;
    padding: 0.65rem 0.75rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
    border: 1px solid rgba(255, 255, 255, 0.15);
  }

  .addon-item-premium.clickable-metric .addon-icon-premium {
    width: 42px;
    height: 42px;
  }

  .addon-item-premium.clickable-metric .addon-content-premium {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
  }

  .addon-item-premium.clickable-metric .addon-name-premium {
    font-size: 0.7rem;
  }

  .addon-item-premium.clickable-metric .addon-quantity-premium {
    font-size: 0.7rem;
  }
}

/* Server Metrics Styles */
.server-metrics-premium {
  margin-top: 1rem;
  margin-bottom: 1.5rem;
}

.metrics-row-premium {
  display: flex;
  gap: 1rem;
  width: 100%;
}

.metric-card-premium {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  min-height: 70px;
}

.metric-card-premium:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.08));
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.metric-icon-premium {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-radius: 0;
  flex-shrink: 0;
}

.metric-content-premium {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}

.metric-label-premium {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.2;
}

.metric-value-premium {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
}

.click-hint {
  font-size: 1rem;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.metric-card-premium:hover .click-hint {
  opacity: 1;
}

/* Responsive Design */
@media (max-width: 768px) {
  .addons-row-premium {
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
  }
  
  .addons-row-premium:last-child {
    margin-bottom: 0;
  }
  
  .addons-left-premium,
  .addons-right-premium {
    flex: none;
  }
  
  .addon-item-premium {
    padding: 0.875rem;
  }
  
  .addon-icon-premium {
    width: 36px;
    height: 36px;
  }
  
  .addon-name-premium {
    font-size: 0.8rem;
  }
  
  .addon-quantity-premium {
    font-size: 0.7rem;
  }
  

}

@media (max-width: 480px) {
  .addons-row-premium {
    gap: 0.5rem;
    margin-bottom: 0.5rem;
  }
  
  .addon-item-premium {
    padding: 0.75rem;
    gap: 0.5rem;
  }
  
  .addon-icon-premium {
    width: 32px;
    height: 32px;
  }
  
  .addon-name-premium {
    font-size: 0.75rem;
  }
  
  .addon-quantity-premium {
    font-size: 0.65rem;
  }
}

@media (max-width: 1200px) {
  .servers-content-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .chart-section {
    position: static;
  }
  
  .advanced-chart-card {
    position: static;
  }
}

@media (max-width: 768px) {
  .servers-dashboard-section {
    padding: 1rem;
    margin-top: 1rem;
  }
  
  .servers-section-header {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }
  
  .section-title {
    font-size: 1.5rem;
  }
  
  .server-preview-details {
    grid-template-columns: 1fr;
  }
  
  .advanced-chart-card {
    padding: 1rem;
  }
  
  .chart-header-advanced {
    flex-direction: column;
    gap: 1rem;
  }
  
  .current-stats {
    flex-direction: row;
    justify-content: center;
  }
  
  .advanced-players-chart {
    height: 200px;
  }
  
  .loading-title {
    font-size: 1.5rem;
  }
  
  .loading-subtitle {
    font-size: 1rem;
  }
  
  .loading-spinner {
    width: 80px;
    height: 80px;
  }
  
  .ring-1 {
    width: 80px;
    height: 80px;
  }
  
  .ring-2 {
    width: 60px;
    height: 60px;
  }
  
  .ring-3 {
    width: 40px;
    height: 40px;
  }
  
  .loading-icon {
    font-size: 1.5rem;
  }
}


.dashboard-container {
  --bg: #0f1720;
  --surface: #18212d;
  --surface-alt: #1f2937;
  --surface-elevated: #202c3d;
  --border: #2a3544;
  --text: #e2e8f0;
  --muted: #9aa6b2;
  --accent: #6c7dff;
  --accent-strong: #8b9bff;
  --danger: #ef4444;
  --success: #22c55e;

  display: block;
  background:
    radial-gradient(120% 120% at 10% 0%, rgba(108, 125, 255, 0.08), transparent 45%),
    radial-gradient(140% 140% at 90% 10%, rgba(45, 212, 191, 0.08), transparent 50%),
    var(--bg);
  color: var(--text);
  font-family: 'Manrope', 'Segoe UI', sans-serif;
  font-weight: 500;
  height: 100vh;
  overflow: hidden;
  animation: none;
}

.dashboard-container::before,
.dashboard-container::after {
  content: none;
  display: none;
}

.dashboard-container * {
  animation: none !important;
}

.dashboard-container ::-moz-selection {
  background: rgba(56, 189, 248, 0.25);
  color: #eaf6ff;
  -webkit-text-fill-color: #eaf6ff;
}

.dashboard-container ::selection {
  background: rgba(56, 189, 248, 0.25);
  color: #eaf6ff;
  -webkit-text-fill-color: #eaf6ff;
}

body:has(.dashboard-container) {
  --bg: #0f1720;
  background: var(--bg);
}

.dashboard-shell {
  display: flex;
  min-height: 100vh;
  background: var(--bg);
  height: 100%;
  min-height: 0;
}

.dashboard-sidebar {
  width: 260px;
  background: #111827;
  border-right: 1px solid var(--border);
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sidebar-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.sidebar-logo {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  -o-object-fit: contain;
     object-fit: contain;
  background: #0b1220;
  padding: 6px;
  border: 1px solid var(--border);
}

.sidebar-brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.brand-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}

.brand-subtitle {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.sidebar-section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 10px;
}

.dashboard-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  background: transparent;
  border: none;
  flex: 1;
  justify-content: flex-start;
}

.dashboard-nav ::-moz-selection {
  background: rgba(56, 189, 248, 0.35);
  color: #eaf6ff;
  -webkit-text-fill-color: #eaf6ff;
}

.dashboard-nav ::selection {
  background: rgba(56, 189, 248, 0.35);
  color: #eaf6ff;
  -webkit-text-fill-color: #eaf6ff;
}

.dashboard-nav .nav-item:focus,
.dashboard-nav .nav-item:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.nav-item {
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  gap: 10px;
  justify-content: flex-start;
  min-height: 40px;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  -webkit-text-fill-color: currentColor;
}

.nav-item:hover {
  background: rgba(108, 125, 255, 0.08);
  border-color: rgba(108, 125, 255, 0.35);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.3);
}

.nav-item:active {
  transform: translateY(1px) scale(0.99);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.35);
}

.nav-item.active {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.35), rgba(34, 211, 238, 0.22));
  border-color: rgba(56, 189, 248, 0.7);
  color: #eaf6ff;
  box-shadow: 0 10px 22px rgba(56, 189, 248, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.dashboard-nav .nav-label {
  color: inherit;
  -webkit-text-fill-color: currentColor;
}

.nav-item.nav-item-disabled {
  opacity: 0.5;
}

.nav-item .animated-sticker-container {
  width: 22px;
  height: 22px;
  margin-right: 0;
}

.nav-item:hover .animated-sticker-container {
  transform: none;
}

.sidebar-footer {
  margin-top: auto;
}

.sidebar-balance {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-balance.negative {
  border-color: rgba(239, 68, 68, 0.4);
}

.balance-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.balance-value {
  font-size: 16px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text);
}

.dashboard-page {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.dashboard-topbar {
  background: #111927;
  border-bottom: 1px solid var(--border);
  padding: 16px 24px;
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: nowrap;
  overflow: hidden;
}

.topbar-left {
  flex: 1 1 auto;
  min-width: 0;
}

.topbar-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-subtitle {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.topbar-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  flex: 1 1 320px;
  min-width: 220px;
}

.topbar-search.is-disabled {
  opacity: 0.5;
}

.topbar-search-icon {
  font-size: 14px;
  color: var(--muted);
}

.topbar-search-input {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  outline: none;
}

.topbar-search-clear {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  flex-wrap: nowrap;
  flex-shrink: 0;
}

.topbar-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.topbar-icon-btn:hover {
  border-color: rgba(108, 125, 255, 0.6);
  background: rgba(108, 125, 255, 0.1);
}

.topbar-balance-chip {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.topbar-chip-button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.topbar-chip-button:hover {
  border-color: rgba(108, 125, 255, 0.6);
  background: rgba(108, 125, 255, 0.08);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.35);
}

.topbar-chip-button:active {
  transform: translateY(1px) scale(0.99);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.35);
}

.topbar-chip-button:focus-visible {
  outline: 2px solid rgba(108, 125, 255, 0.7);
  outline-offset: 2px;
}

.topbar-balance-chip.negative {
  border-color: rgba(239, 68, 68, 0.6);
  color: #f87171;
}

.chip-label {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.chip-value {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 13px;
}

.topbar-user {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0;
  width: 44px;
  height: 44px;
  min-width: 0;
}

.topbar-user.has-details {
  gap: 10px;
  padding: 6px 12px;
  width: auto;
  max-width: 240px;
  justify-content: flex-start;
}

.topbar-user-button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.topbar-user-button:hover {
  border-color: rgba(108, 125, 255, 0.6);
  background: rgba(108, 125, 255, 0.08);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.35);
}

.topbar-user-button:active {
  transform: translateY(1px) scale(0.99);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.35);
}

.topbar-user-button:focus-visible {
  outline: 2px solid rgba(108, 125, 255, 0.7);
  outline-offset: 2px;
}

.user-avatar {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background: rgba(108, 125, 255, 0.18);
  color: #eaf6ff;
  font-weight: 700;
  font-size: 18px;
  border: none;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.topbar-user.has-details .user-avatar {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.user-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

.user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-email {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(108, 125, 255, 0.45);
  color: var(--text);
  padding: 0;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.topbar-logout:hover {
  border-color: rgba(108, 125, 255, 0.8);
  background: rgba(108, 125, 255, 0.08);
}

.topbar-logout-icon {
  width: 20px;
  height: 20px;
  display: block;
  opacity: 1;
  filter: brightness(2) saturate(1.3) drop-shadow(0 0 6px rgba(148, 163, 184, 0.35));
}

.dashboard-main {
  flex: 1;
  min-height: 0;
  padding: 18px 24px 20px;
  overflow: auto;
  background: var(--bg);
}

@media (min-width: 1024px) {
  .dashboard-main[data-section="dashboard"] {
    overflow: hidden;
  }
}

.dashboard-content-wrapper {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}

.dashboard-container :is(
  .stat-card,
  .payment-overview-card,
  .premium-server-card,
  .server-creation-form,
  .admin-section,
  .admin-panel-container,
  .admin-charts-section,
  .admin-cpu-section,
  .profile-info,
  .profile-activity,
  .profile-sessions,
  .activity-section,
  .sessions-section,
  .payment-history-section,
  .server-summary-card,
  .tariff-card,
  .modern-empty-state,
  .empty-state,
  .support-notification
) {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: none;
}

.modern-servers-content,
.modern-dashboard-content {
  background: transparent;
  margin: 0;
  padding: 0;
}

.stats-cards {
  justify-content: center;
  gap: 16px;
  margin-top: 8px;
}

.stat-card {
  width: 100%;
  max-width: 360px;
  height: auto;
  padding: 16px 18px 18px;
  gap: 16px;
  border-radius: 16px;
  align-items: center;
  text-align: center;
}

.dashboard-container .stats-cards .stat-card {
  border-width: 2px;
}

.stat-card::before,
.stat-card:hover::before {
  display: none;
}

.stat-card:hover {
  transform: none;
  box-shadow: none;
}

.stat-icon {
  width: 68px;
  height: 68px;
  font-size: 24px;
  border: 2px solid rgba(59, 130, 246, 0.45);
}

.stat-content h3 {
  font-size: 16px;
  color: var(--text);
}

.stat-content {
  text-align: center;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Asosiy layout stabilization (no downshift on zoom) */

.dashboard-main[data-section="dashboard"] .stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(16px, 2.5vw, 28px);
  margin: 8px auto 0;
  max-width: 1100px;
  align-content: start;
  justify-items: stretch;
}

.dashboard-main[data-section="dashboard"] .stat-card {
  max-width: none;
  min-height: clamp(140px, 18vh, 200px);
  padding: clamp(12px, 1.2vw, 18px);
  gap: clamp(8px, 1vw, 12px);
  justify-content: center;
}

.dashboard-main[data-section="dashboard"] .stat-card .stat-icon {
  width: clamp(48px, 6vmin, 96px);
  height: clamp(48px, 6vmin, 96px);
  border-width: 3px;
  border-radius: 22px;
}

.dashboard-main[data-section="dashboard"] .stat-content {
  flex: 0;
  gap: clamp(6px, 1.4vmin, 12px);
}

.dashboard-main[data-section="dashboard"] .stat-content h3 {
  font-size: clamp(18px, 2.2vmin, 26px);
  line-height: 1.15;
}

.dashboard-main[data-section="dashboard"] .stat-detail {
  font-size: clamp(14px, 1.8vmin, 20px);
  line-height: 1.2;
}

.dashboard-main[data-section="dashboard"] .stat-value {
  font-size: clamp(24px, 3vmin, 36px);
  line-height: 1.05;
}

.dashboard-main[data-section="dashboard"] .stat-warning {
  font-size: clamp(14px, 2vmin, 24px);
}

.dashboard-main[data-section="dashboard"] .stat-action {
  align-self: center;
  font-size: clamp(14px, 1.8vmin, 20px);
  margin-top: 6px;
  padding: clamp(8px, 1.2vmin, 14px) clamp(14px, 2vmin, 24px);
  min-width: clamp(120px, 16vmin, 180px);
}

@media (max-width: 1100px) {
  .dashboard-main[data-section="dashboard"] .stats-cards {
    grid-template-columns: 1fr;
    max-width: 520px;
  }
}

.stat-value {
  font-size: 26px;
  font-family: 'JetBrains Mono', monospace;
}

.stat-detail {
  font-size: 14px;
}

.stat-action {
  font-size: 14px;
  padding: 10px 16px;
  text-transform: none;
  letter-spacing: 0;
  background: rgba(108, 125, 255, 0.15);
  color: var(--text);
  border: 1px solid rgba(108, 125, 255, 0.5);
  box-shadow: none;
}

.stat-action:hover {
  transform: none;
  background: rgba(108, 125, 255, 0.25);
  box-shadow: none;
}

.stat-action::before {
  display: none;
}

.premium-servers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 600px));
  justify-content: start;
  gap: 16px;
}

.premium-server-card {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: none;
  overflow: hidden;
}

.premium-server-card:hover {
  transform: none;
  box-shadow: none;
}

.card-background-premium,
.premium-card-glow,
.btn-shine-premium {
  display: none;
}

.server-search-empty {
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 16px;
  padding: 32px;
  text-align: center;
  color: var(--muted);
}

.server-search-empty h3 {
  color: var(--text);
  margin: 12px 0 8px;
}

.server-search-empty .empty-icon {
  font-size: 32px;
}

/* Servers Section Refresh */

.payment-overview-card {
  background: linear-gradient(160deg, rgba(26, 36, 52, 0.96), rgba(18, 24, 35, 0.96));
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 18px;
  padding: 20px 24px;
  box-shadow: 0 18px 40px rgba(4, 10, 20, 0.45);
  margin: 0 0 16px;
  position: static;
  top: auto;
}

.payment-overview-card::before {
  display: none;
}

.payment-overview-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.payment-overview-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(108, 125, 255, 0.18);
  border: 1px solid rgba(108, 125, 255, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
}

.payment-overview-icon .money-icon {
  width: 22px;
  height: 22px;
  -o-object-fit: contain;
     object-fit: contain;
}

.payment-overview-header h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  text-shadow: none;
}

.payment-overview-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.payment-stat-item {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 12px;
  padding: 14px 16px;
  text-align: left;
  transition: none;
}

.payment-stat-item:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--border);
}

.payment-stat-label {
  color: var(--muted);
  margin-bottom: 6px;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.payment-stat-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  line-height: 1.2;
}

.payment-stat-value.total-amount {
  font-size: 18px;
  color: var(--accent-strong);
  -webkit-text-fill-color: initial;
}

.payment-stat-value.expiry-date {
  align-items: center;
}

.payment-stat-value.total-amount .currency {
  color: var(--muted);
}

.days-left {
  font-size: 12px;
  color: var(--muted);
  margin-left: 0;
  display: inline-flex;
  align-items: baseline;
}

.payment-stat-centered {
  text-align: center;
}

.payment-stat-centered .payment-stat-value {
  justify-content: center;
}

.payment-stat-centered .status-badge {
  margin: 0 auto;
}

.status-badge {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
}

.status-badge.active {
  background: rgba(34, 197, 94, 0.15);
  color: #34d399;
  border: 1px solid rgba(34, 197, 94, 0.4);
}

.status-badge.warning {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.4);
}

.premium-servers-grid {
  grid-template-columns: repeat(auto-fit, minmax(320px, 600px));
  gap: 16px;
  max-width: 100%;
  padding: 0;
  margin: 0;
  width: 100%;
  justify-content: start;
  align-items: start;
  justify-items: start;
}

.premium-server-card {
  background: linear-gradient(160deg, rgba(27, 37, 52, 0.96), rgba(18, 24, 35, 0.96));
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 16px;
  padding: 18px;
  animation: none !important;
  box-shadow: 0 14px 30px rgba(5, 10, 20, 0.4);
  max-width: 600px;
  width: 100%;
}

.premium-server-card:hover {
  transform: none;
  box-shadow: none;
}

.card-background-premium,
.card-shimmer-effect,
.premium-card-glow,
.btn-shine-premium,
.avatar-ring,
.pulse-animation {
  display: none !important;
}

.server-header-premium {
  margin-bottom: 16px;
  gap: 16px;
  align-items: flex-start;
}

.server-identity-premium {
  gap: 12px;
}

.server-avatar-premium {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(108, 125, 255, 0.12);
  border: 1px solid rgba(108, 125, 255, 0.35);
}

.server-avatar-icon {
  width: 28px;
  height: 28px;
  -o-object-fit: contain;
     object-fit: contain;
}

.server-name-premium {
  font-size: 18px;
  color: var(--text);
  margin-bottom: 6px;
  text-shadow: none;
}

.server-name-premium.server-name-editable {
  cursor: text;
  position: relative;
}

.server-name-premium.server-name-editable:hover {
  color: #c7d2fe;
}

.server-name-input {
  width: 100%;
  max-width: 260px;
  font-size: 18px;
  color: var(--text);
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(108, 125, 255, 0.5);
  border-radius: 8px;
  padding: 4px 8px;
  outline: none;
}

.server-name-input:focus {
  border-color: rgba(108, 125, 255, 0.9);
  box-shadow: 0 0 0 2px rgba(108, 125, 255, 0.2);
}

.server-name-input:disabled {
  opacity: 0.6;
  cursor: wait;
}

.server-meta-premium {
  flex-wrap: wrap;
  gap: 8px;
}

.server-game-premium {
  font-size: 12px;
  color: var(--muted);
}

.plan-badge-premium,
.plan-badge-premium.proxy,
.plan-badge-premium.mini,
.plan-badge-premium.standard,
.plan-badge-premium.pro,
.plan-badge-premium.ultimate {
  background: rgba(108, 125, 255, 0.15);
  color: var(--accent-strong);
  border: 1px solid rgba(108, 125, 255, 0.4);
  padding: 4px 10px;
  font-size: 11px;
  letter-spacing: 0.04em;
}

.status-indicator-premium {
  padding: 6px 10px !important;
  font-size: 12px;
  border-radius: 999px !important;
  box-shadow: none;
}

.status-text-premium {
  font-size: 12px !important;
}

.server-price-info {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 0;
}

.price-label {
  color: var(--muted);
  font-size: 12px;
}

.price-value {
  font-weight: 700;
  color: var(--text);
  font-size: 14px;
}

.server-addons-premium {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  transition: grid-template-columns 0.2s ease, min-height 0.25s ease;
  grid-auto-rows: auto;
  align-content: start;
}

.addons-row-premium {
  display: contents;
}

.addon-item-premium {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  min-height: 0;
  max-height: 120px;
  overflow: hidden;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, opacity 0.22s ease, max-height 0.3s ease, padding 0.3s ease, margin 0.3s ease, height 0.3s ease;
}

.addon-item-premium.clickable-metric {
  cursor: pointer;
}

.addon-item-premium:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(108, 125, 255, 0.18);
  border-color: rgba(108, 125, 255, 0.55);
}

.server-addons-premium.is-editing {
  grid-template-columns: 1fr;
  gap: 0;
  align-content: center;
  justify-items: center;
  min-height: clamp(200px, 32vw, 260px);
  transition: min-height 0.25s ease, grid-template-columns 0.2s ease;
}

.server-addons-premium.is-editing .addon-item-premium:not(.is-active) {
  opacity: 0;
  max-height: 0;
  min-height: 0;
  padding: 0;
  margin: 0;
  border-width: 0;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
  transform: scale(0.98);
}

.addon-item-premium.is-active {
  grid-column: 1 / -1;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
  max-height: 360px;
  width: min(100%, 520px);
  justify-self: center;
  background: rgba(15, 23, 42, 0.75);
  border-color: rgba(108, 125, 255, 0.6);
  box-shadow: 0 12px 26px rgba(108, 125, 255, 0.2);
  transform: translateY(0);
}

.addon-item-premium.is-active .addon-content-premium {
  text-align: center;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

.addon-item-premium.is-active:hover {
  transform: none;
  background: rgba(15, 23, 42, 0.75);
  box-shadow: 0 12px 26px rgba(108, 125, 255, 0.2);
  border-color: rgba(108, 125, 255, 0.6);
}

.addon-edit-panel {
  width: 100%;
  flex-basis: 100%;
  border-top: 0 solid rgba(148, 163, 184, 0.15);
  padding-top: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.25s ease, border-width 0.25s ease, transform 0.25s ease;
}

.addon-item-premium.is-active .addon-edit-panel {
  border-top-width: 1px;
  padding-top: 12px;
  max-height: 240px;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.addon-edit-row {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}

.addon-edit-value {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-weight: 600;
  color: var(--text);
  min-width: 80px;
  justify-content: center;
}

.addon-edit-unit {
  font-size: 12px;
  color: var(--muted);
}

.addon-edit-count {
  font-size: 18px;
}

.addon-edit-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.addon-item-premium .addon-edit-panel .addon-btn.is-inline {
  width: 36px;
  height: 36px;
  padding: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.addon-edit-meta {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}

.addon-edit-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.addon-item-premium.is-active .addon-name-premium {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.addon-item-premium.is-active .addon-quantity-premium {
  font-size: 14px;
  font-weight: 700;
}

.addon-icon-premium {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(108, 125, 255, 0.15);
  border: 1px solid rgba(108, 125, 255, 0.25);
  flex-shrink: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.addon-icon-img {
  width: 30px;
  height: 30px;
  -o-object-fit: contain;
     object-fit: contain;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.addon-item-premium:hover .addon-icon-premium {
  transform: translateY(-1px) scale(1.05);
  box-shadow: 0 6px 14px rgba(108, 125, 255, 0.35);
  background: rgba(108, 125, 255, 0.22);
}

.addon-item-premium:hover .addon-icon-img {
  transform: scale(1.08);
  filter: drop-shadow(0 4px 8px rgba(108, 125, 255, 0.45));
}

.addon-name-premium {
  color: var(--muted);
  font-size: 11px;
}

.addon-quantity-premium {
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}

.server-actions-premium {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: 10px;
  grid-auto-flow: row;
}

@media (min-width: 901px) {
  .server-actions-premium:not(:has(.warning-premium)) .action-btn-premium.danger-premium {
    grid-column: 1 / -1;
    justify-self: stretch;
  }
}

.action-btn-premium {
  min-width: 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--text);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.action-btn-premium:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.35);
}

.action-btn-premium:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.3);
}

.action-btn-premium.main-action {
  grid-column: 1 / -1;
  font-weight: 700;
}

.action-btn-premium.primary-premium {
  background: rgba(108, 125, 255, 0.18);
  border-color: rgba(108, 125, 255, 0.6);
}

.action-btn-premium.warning-premium {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.45);
  animation: none !important;
}

.action-btn-premium.danger-premium {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.5);
}

.btn-icon-premium {
  font-size: 14px;
}

.ban-banner {
  margin: 16px 0 0;
  background: #1a1f2b;
  border-color: rgba(239, 68, 68, 0.4);
}

.btn {
  border-radius: 10px;
  padding: 10px 16px;
  border: 1px solid var(--border);
  font-weight: 600;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.btn.primary {
  background: var(--accent);
  color: #0b1020;
  border-color: transparent;
}

.btn.secondary {
  background: transparent;
  color: var(--text);
}

.btn.danger {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.55);
  color: #f87171;
}

.btn:hover {
  transform: none;
  box-shadow: none;
}

.form-group input,
.server-name-input,
.filter-select,
.admin-input,
.modal.password-modal input {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: none;
}

.payment-overview-card h3,
.admin-header h2,
.admin-charts-section h3,
.profile-details h3,
.activity-header h2,
.sessions-header h2 {
  color: var(--text);
  text-shadow: none;
}

.dashboard-container :is(
  .welcome-title,
  .section-title,
  .page-title,
  .logo-text
) {
  font-family: 'Manrope', 'Segoe UI', sans-serif;
  text-shadow: none;
}

.animated-sticker-container,
.animated-sticker-container:hover,
.animated-sticker-container .animated-sticker-gif,
.animated-sticker-container:hover .animated-sticker-gif {
  transform: none;
  filter: none;
}

.notification-dot {
  animation: none;
}

.support-notification {
  animation: none;
  box-shadow: none;
}

@media (max-width: 1200px) {
  .topbar-search {
    flex-basis: 260px;
  }
}

@media (max-width: 1024px) {
  .dashboard-shell {
    flex-direction: column;
  }

  .dashboard-sidebar {
    width: 100%;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    position: sticky;
    top: 0;
    z-index: 40;
  }

  .sidebar-section {
    flex: 1;
  }

  .dashboard-nav {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
  }

  .nav-item {
    flex: 0 0 auto;
  }

  .sidebar-footer {
    display: none;
  }

  .topbar-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-left: 0;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .dashboard-topbar {
    padding: 12px 16px;
  }

  .topbar-search {
    display: none;
  }

  .topbar-actions {
    width: auto;
    margin-left: auto;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: nowrap;
  }

  .dashboard-main {
    padding: 16px;
  }

  .payment-overview-card {
    padding: 16px;
  }

  .payment-overview-stats {
    grid-template-columns: 1fr;
  }

  .premium-server-card {
    padding: 14px;
  }

  .server-actions-premium {
    grid-template-columns: 1fr;
  }

  .server-addons-premium .addon-item-premium {
    justify-content: center;
    text-align: left;
  }

  .server-addons-premium .addon-item-premium.clickable-metric {
    flex-direction: row;
    align-items: center;
  }

  .server-addons-premium .addon-content-premium {
    align-items: flex-start;
  }
}

@media (max-width: 600px) {
  .sidebar-brand-text {
    display: none;
  }

  .dashboard-nav .nav-item {
    padding: 8px 10px;
  }

  .topbar-user {
    display: inline-flex;
  }

  .topbar-user .user-email {
    display: none;
  }
}

@media (max-width: 1100px) {
  .topbar-user.has-details {
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
  }

  .topbar-user.has-details .user-details {
    display: none;
  }

  .topbar-user.has-details .user-avatar {
    width: 100%;
    height: 100%;
  }
}

@media (max-width: 600px) {
  .dashboard-nav .nav-item {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
  }

  .dashboard-nav .nav-item > svg,
  .dashboard-nav .nav-item > img,
  .dashboard-nav .nav-item > span:not(.nav-label) {
    font-size: 16px !important;
    width: 16px !important;
    height: 16px !important;
  }
}

@media (max-width: 768px) {
  .dashboard-shell {
    padding-bottom: 88px;
  }

  .dashboard-content-wrapper {
    overflow: visible;
  }

  .dashboard-sidebar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    height: 88px;
    padding: 0px 0px 0px;
    border-right: none;
    border-top: 1px solid var(--border);
    background: rgba(15, 23, 32, 0.98);
    backdrop-filter: blur(10px);
    z-index: 60;
    overflow: visible;
  }

  .sidebar-brand,
  .sidebar-section-title {
    display: none;
  }

  .sidebar-section {
    width: 100%;
  }

  .dashboard-nav {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    overflow: visible;
    position: relative;
    isolation: isolate;
  }

  .dashboard-nav,
  .dashboard-nav * {
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }

  .dashboard-nav .nav-item {
    flex: 1 1 0;
    padding: 6px 4px !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    border-right: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11px;
    color: var(--muted);
    -webkit-text-fill-color: currentColor;
    background: transparent !important;
    box-shadow: none !important;
    transform: none;
    text-align: center;
    position: relative;
    z-index: 1;
    transition: color 0.2s ease;
  }

  .dashboard-nav .nav-item.active,
  .dashboard-nav .nav-item.active:active,
  .dashboard-nav .nav-item.active:focus,
  .dashboard-nav .nav-item.active:focus-visible {
    color: #9fd7ff !important;
    -webkit-text-fill-color: #9fd7ff !important;
    box-shadow: none !important;
  }

  .dashboard-nav .nav-item.active .nav-label {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
  }

  .dashboard-nav .nav-item:focus,
  .dashboard-nav .nav-item:focus-visible {
    outline: none !important;
    box-shadow: none !important;
  }

  .dashboard-nav .nav-item:hover {
    transform: none;
  }

  .dashboard-nav .nav-label {
    margin: 0;
    display: block !important;
    font-size: 10px;
    line-height: 1.1;
    color: inherit;
    -webkit-text-fill-color: currentColor;
  }

  .dashboard-nav .animated-sticker-container {
    width: 24px;
    height: 24px;
  }

  .dashboard-nav .nav-item::before {
    content: none !important;
  }

  .dashboard-nav .nav-item::after {
    content: none !important;
  }

  .dashboard-nav .nav-item:hover::after {
    transform: translateY(-50%);
    opacity: 1;
  }

  .dashboard-nav .nav-item:last-child::after {
    content: none;
  }

  .dashboard-nav::before {
    content: '';
    position: absolute;
    top: -8px;
    bottom: -8px;
    left: 0;
    width: calc(100% / var(--nav-count, 4));
    border: 1px solid rgba(56, 189, 248, 0.5);
    border-radius: 18px;
    background: rgba(56, 189, 248, 0.08);
    transform: translateX(calc(var(--active-index, 0) * 100%));
    transition: transform 0.28s ease, opacity 0.2s ease;
    opacity: var(--nav-indicator-opacity, 1);
    pointer-events: none;
    box-shadow: 0 10px 22px rgba(56, 189, 248, 0.2);
    z-index: 0;
  }

  .dashboard-nav .nav-item > svg,
  .dashboard-nav .nav-item > img,
  .dashboard-nav .nav-item > span:not(.nav-label) {
    width: 20px !important;
    height: 20px !important;
    font-size: 20px !important;
  }

  .dashboard-main {
    padding-bottom: 104px;
  }
}

@media (max-width: 600px) {
  .topbar-balance-chip {
    padding: 6px 10px;
    font-size: 12px;
  }

  .topbar-user.has-details {
    width: 40px;
    height: 40px;
    padding: 0;
  }

  .topbar-user.has-details .user-avatar {
    width: 100%;
    height: 100%;
  }

  .topbar-user,
  .topbar-logout {
    width: 40px;
    height: 40px;
    padding: 0;
  }

  .topbar-logout-icon {
    width: 18px;
    height: 18px;
  }
}