/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

html, body {
background:#101820 !important;
}

/* Root Variables - Logo Based Theme */
:root {
    --bg-primary: #0b0f14;
    --bg-secondary: #0f1720;
    --bg-card: rgba(15, 23, 32, 0.75);

    --accent-primary: #00e0a4;
    --accent-secondary: #00b894;
    --accent-glow: rgba(0, 224, 164, 0.35);

    --text-primary: #ffffff;
    --text-secondary: #9ca3af;
    --border-color: rgba(255, 255, 255, 0.08);
}

::selection {
  background: #00e0a4;
  color: #000;
  text-shadow: 0 0 5px rgba(0,224,164,0.6);
}

::-moz-selection {
  background: rgba(0, 224, 164, 0.8);
  color: #000;
}

body {
    background: radial-gradient(circle at top, #101820 0%, #0b0f14 60%);
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
}

body:not(.auth-session-ready) #login-btn,
body:not(.auth-session-ready) #mobile-login-btn {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--accent-primary), var(--accent-secondary));
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--accent-primary);
}



.is-loading-dots {
  position: relative;
  color: transparent !important;
  text-shadow: none !important;
}

.is-loading-dots::after {
  content: ".";
  position: absolute;
  inset: 0;
  color: var(--accent-primary);
  text-shadow: 0 0 14px rgba(0, 224, 164, .38);
  animation: unixLoadingDots 1.05s steps(1, end) infinite;
}

@keyframes unixLoadingDots {
  0%, 100% { content: "."; opacity: .62; transform: translateY(1px); }
  33% { content: ".."; opacity: .84; transform: translateY(0); }
  66% { content: "..."; opacity: 1; transform: translateY(-1px); }
}

.stats-card-loading {
  font-size: clamp(1.35rem, 2.4vw, 2.2rem) !important;
  line-height: 1.15;
  color: var(--text-secondary);
  letter-spacing: -0.03em;
}

.hidden-opacity{
  opacity:0;
  pointer-events:none;
}

body.maintenance-pending {
  background:
    radial-gradient(circle at top left, rgba(0, 224, 164, 0.1), transparent 26%),
    radial-gradient(circle at top right, rgba(56, 189, 248, 0.08), transparent 22%),
    linear-gradient(180deg, #091017 0%, #0b0f14 100%);
}

body.maintenance-pending #site-content {
  visibility: hidden;
}

body.unix-intro-pending {
  overflow: hidden;
}

body.unix-intro-pending #site-content,
body.unix-intro-pending #scrollWrapper,
body.unix-intro-pending #coffee-float-btn {
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
}

body.unix-intro-ready #site-content,
body.unix-intro-ready #scrollWrapper,
body.unix-intro-ready #coffee-float-btn {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .75s cubic-bezier(.22, 1, .36, 1), transform .75s cubic-bezier(.22, 1, .36, 1);
}

.unix-intro {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 48% 42%, rgba(0, 224, 164, .2), transparent 34%),
    radial-gradient(circle at 80% 12%, rgba(7, 42, 78, .46), transparent 30%),
    radial-gradient(circle at 18% 80%, rgba(0, 224, 164, .1), transparent 28%),
    linear-gradient(145deg, #081017 0%, #101820 52%, #071014 100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body.unix-intro-pending .unix-intro,
body.unix-intro-active .unix-intro {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body.unix-intro-leaving .unix-intro {
  opacity: 0;
  transform: scale(1.035);
  filter: blur(8px);
  transition:
    opacity .5s cubic-bezier(.4, 0, .2, 1),
    transform .5s cubic-bezier(.16, 1, .3, 1),
    filter .5s cubic-bezier(.16, 1, .3, 1),
    visibility .5s;
}

body.unix-intro-leaving .unix-intro-logo {
  animation: unixIntroLogoExit .5s cubic-bezier(.4, 0, .2, 1) forwards;
}

body.unix-intro-leaving .unix-intro-grid,
body.unix-intro-leaving .unix-intro-orb {
  animation: none;
  opacity: 0;
  transition: opacity .32s ease;
}

.unix-intro-grid {
  position: absolute;
  inset: -20%;
  background-image:
    linear-gradient(rgba(126, 246, 215, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126, 246, 215, .055) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at center, #000 0%, transparent 62%);
  opacity: .55;
  animation: unixIntroGrid 7s linear infinite;
}

.unix-intro-orb {
  position: absolute;
  width: 460px;
  height: 460px;
  border-radius: 999px;
  filter: blur(64px);
  opacity: .46;
}

.unix-intro-orb-left {
  left: -150px;
  bottom: 4%;
  background: rgba(0, 224, 164, .34);
  animation: unixIntroFloat 4.6s ease-in-out infinite;
}

.unix-intro-orb-right {
  right: -170px;
  top: 4%;
  background: rgba(8, 39, 72, .72);
  animation: unixIntroFloat 5.2s ease-in-out infinite reverse;
}

.unix-intro-logo {
  position: relative;
  z-index: 1;
  width: clamp(160px, 22vw, 280px);
  height: clamp(160px, 22vw, 280px);
  object-fit: contain;
  opacity: 0;
  filter: drop-shadow(0 0 0 rgba(0, 224, 164, 0));
  transform: translateX(130px) scale(.74) rotate(14deg);
  animation:
    unixIntroLogoSweep .9s cubic-bezier(.16, 1, .3, 1) .08s forwards,
    unixIntroLogoBreath 1.8s ease-in-out 1.02s infinite alternate;
}

@keyframes unixIntroLogoSweep {
  0% {
    opacity: 0;
    filter: drop-shadow(0 0 0 rgba(0, 224, 164, 0));
    transform: translateX(130px) scale(.74) rotate(14deg);
  }
  44% {
    opacity: 1;
    filter: drop-shadow(0 0 42px rgba(0, 224, 164, .7));
    transform: translateX(34px) scale(1.1) rotate(-5deg);
  }
  74% {
    opacity: 1;
    filter: drop-shadow(0 0 34px rgba(0, 224, 164, .58));
    transform: translateX(-6px) scale(.98) rotate(2deg);
  }
  to {
    opacity: 1;
    filter: drop-shadow(0 0 28px rgba(0, 224, 164, .52));
    transform: translateX(0) scale(1) rotate(0deg);
  }
}

@keyframes unixIntroLogoBreath {
  to {
    filter: drop-shadow(0 0 40px rgba(0, 224, 164, .66));
    transform: translateY(-4px) scale(1.035);
  }
}

@keyframes unixIntroLogoExit {
  0% {
    opacity: 1;
    filter: drop-shadow(0 0 34px rgba(0, 224, 164, .64));
    transform: translateY(-2px) scale(1.02) rotate(0deg);
  }
  45% {
    opacity: 1;
    filter: drop-shadow(0 0 62px rgba(0, 224, 164, .9));
    transform: scale(1.18) rotate(5deg);
  }
  to {
    opacity: 0;
    filter: blur(8px) drop-shadow(0 0 0 rgba(0, 224, 164, 0));
    transform: scale(.7) rotate(14deg);
  }
}

@keyframes unixIntroGrid {
  to {
    transform: translate3d(72px, 72px, 0);
  }
}

@keyframes unixIntroFloat {
  50% {
    transform: translate3d(22px, -18px, 0) scale(1.08);
  }
}

@media (max-width: 640px) {
  .unix-intro-logo {
    width: 180px;
    height: 180px;
  }
}

.scroll-top-shell{
  transform: translateY(18px) scale(.92);
  opacity: 0;
  transition:
    opacity .35s ease,
    transform .45s cubic-bezier(.22, 1, .36, 1);
}

.scroll-top-shell.is-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Placeholder */
::placeholder {
    color: var(--text-secondary);
    opacity: 1;
}

/* Gradient Glow Section */
.gradient-glow {
    background: linear-gradient(135deg, #0f1720 0%, #0b0f14 100%);
    box-shadow: 0 0 60px var(--accent-glow);
    border: 1px solid var(--border-color);
    backdrop-filter: blur(15px);
}

/* Primary Button */
.btn-primary {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: #0b0f14;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
}

.btn-primary:hover {
    box-shadow: 0 0 25px var(--accent-glow);
    transform: translateY(-3px);
}

/* Secondary Button */
.btn-secondary {
    background: transparent;
    border: 1px solid var(--accent-primary);
    color: var(--accent-primary);
    transition: 0.3s ease;
}

.btn-secondary:hover {
    background: rgba(0, 224, 164, 0.08);
    box-shadow: 0 0 15px var(--accent-glow);
}

/* Feature Card */
.feature-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    backdrop-filter: blur(20px);
    border-radius: 14px;
    transition: 0.3s ease;
}

.feature-card:hover {
    border-color: var(--accent-primary);
    box-shadow: 0 0 35px rgba(0, 224, 164, 0.15);
    transform: translateY(-6px);
}

/* Stat Card */
.stat-card {
    background: rgba(0, 224, 164, 0.05);
    border: 1px solid rgba(0, 224, 164, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 12px;
}

.stats-section {
    background:
        linear-gradient(180deg, #0f2226 0%, #101820 100%);
}

.section-divider-glow {
    position: absolute;
    top: 0;
    left: 50%;
    width: min(1180px, calc(100% - 32px));
    height: 1px;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 224, 164, 0.18) 18%,
        rgba(126, 246, 215, 0.72) 50%,
        rgba(8, 39, 72, 0.42) 82%,
        transparent 100%
    );
    box-shadow:
        0 0 18px rgba(0, 224, 164, 0.18),
        0 10px 34px rgba(0, 224, 164, 0.08);
    transform: translateX(-50%);
}

.stats-heading-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 44px;
}

.stats-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    margin-bottom: 22px;
    border: 1px solid rgba(0, 224, 164, 0.24);
    border-radius: 999px;
    background: rgba(0, 224, 164, 0.075);
    color: #7ef6d7;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    box-shadow: 0 18px 46px rgba(0, 224, 164, 0.08);
}

.stats-live-badge span:first-child {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #00e0a4;
    box-shadow: 0 0 0 7px rgba(0, 224, 164, 0.12), 0 0 22px rgba(0, 224, 164, 0.8);
    animation: statsPulse 1.8s ease-in-out infinite;
}

.stats-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.stats-metric-card {
    position: relative;
    min-height: 270px;
    padding: 24px;
    overflow: hidden;
    border-radius: 30px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)),
        rgba(13, 22, 30, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(18px);
    isolation: isolate;
    transition: transform 0.32s ease, border-color 0.32s ease, box-shadow 0.32s ease;
}

.stats-metric-card::before,
.stats-metric-card::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: -1;
}

.stats-metric-card::before {
    inset: 0;
    background: radial-gradient(circle at 24px 24px, var(--stats-card-glow), transparent 46%);
    opacity: 0.74;
}

.stats-metric-card::after {
    width: 150px;
    height: 150px;
    right: -48px;
    top: -42px;
    border-radius: 44px;
    border: 1px solid var(--stats-card-line);
    background: linear-gradient(135deg, var(--stats-card-wash), transparent);
    transform: rotate(14deg);
}

.stats-metric-card:hover {
    transform: translateY(-8px);
    border-color: var(--stats-card-line);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.28), 0 0 40px var(--stats-card-shadow);
}

.stats-metric-card-guilds {
    --stats-card-glow: rgba(0, 224, 164, 0.22);
    --stats-card-line: rgba(0, 224, 164, 0.28);
    --stats-card-wash: rgba(0, 224, 164, 0.18);
    --stats-card-shadow: rgba(0, 224, 164, 0.12);
    --stats-card-accent: #00e0a4;
    --stats-card-accent-2: #7ef6d7;
}

.stats-metric-card-users {
    --stats-card-glow: rgba(8, 39, 72, 0.42);
    --stats-card-line: rgba(14, 72, 118, 0.46);
    --stats-card-wash: rgba(7, 42, 78, 0.28);
    --stats-card-shadow: rgba(7, 42, 78, 0.24);
    --stats-card-accent: #6fb6d8;
    --stats-card-accent-2: #00e0a4;
}

.stats-metric-card-commands {
    --stats-card-glow: rgba(130, 255, 213, 0.19);
    --stats-card-line: rgba(126, 246, 215, 0.27);
    --stats-card-wash: rgba(0, 184, 148, 0.17);
    --stats-card-shadow: rgba(0, 184, 148, 0.12);
    --stats-card-accent: #7ef6d7;
    --stats-card-accent-2: #00b894;
}

.stats-metric-card-uptime {
    --stats-card-glow: rgba(255, 255, 255, 0.13);
    --stats-card-line: rgba(255, 255, 255, 0.2);
    --stats-card-wash: rgba(126, 246, 215, 0.13);
    --stats-card-shadow: rgba(126, 246, 215, 0.1);
    --stats-card-accent: #ffffff;
    --stats-card-accent-2: #7ef6d7;
}

.stats-card-graphic {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    margin-bottom: 34px;
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));
    border: 1px solid var(--stats-card-line);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 18px 34px var(--stats-card-shadow);
}

.stats-card-graphic svg {
    width: 34px;
    height: 34px;
    fill: none;
    stroke: var(--stats-card-accent);
    stroke-width: 2.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 12px var(--stats-card-shadow));
}

.stats-card-kicker {
    color: var(--stats-card-accent);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.stats-card-value {
    margin-bottom: 12px;
    font-size: clamp(2.35rem, 4vw, 4rem);
    line-height: 0.95;
    font-weight: 900;
    letter-spacing: -0.06em;
    background: linear-gradient(110deg, var(--stats-card-accent), var(--stats-card-accent-2));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stats-card-value-uptime {
    font-size: clamp(1.85rem, 2.65vw, 3.05rem);
    letter-spacing: -0.04em;
}

.stats-card-content p {
    color: #9ca3af;
    line-height: 1.7;
}

@keyframes statsPulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(0.72);
        opacity: 0.72;
    }
}

@media (max-width: 1024px) {
    .stats-metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .stats-section {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .stats-heading-row {
        margin-bottom: 28px;
    }

    .stats-metrics-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .stats-metric-card {
        min-height: 218px;
        padding: 22px;
        border-radius: 24px;
    }

    .stats-card-graphic {
        width: 54px;
        height: 54px;
        margin-bottom: 26px;
        border-radius: 18px;
    }

    .stats-card-graphic svg {
        width: 30px;
        height: 30px;
    }
}

/* Section Title */
.section-title {
    display: block;
    background: linear-gradient(90deg, #ffffff, var(--accent-primary));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.14;
    padding-bottom: .08em;
    overflow: visible;
}

.commands-page-title {
    opacity: 0;
    transform: translateY(18px);
    animation: commandsTitleFade .7s cubic-bezier(.22, 1, .36, 1) .08s forwards;
}

@keyframes commandsTitleFade {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Step Number */
.step-number {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 20px;
    font-weight: bold;
    color: #0b0f14;
    box-shadow: 0 0 20px var(--accent-glow);
}

.step-connector {
    height: 3px;
    border-radius: 999px;
    background:
      linear-gradient(
        90deg,
        rgba(125, 211, 252, 0.78) 0%,
        rgba(45, 212, 191, 0.42) 38%,
        rgba(16, 24, 32, 0) 100%
      );
    box-shadow:
      0 0 12px rgba(125, 211, 252, 0.12),
      0 0 26px rgba(45, 212, 191, 0.08);
}

/* Command Card */
.command-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    position: relative;
    backdrop-filter: blur(15px);
    transition: 0.3s ease;
}

.command-card:hover {
    border-color: var(--accent-primary);
    box-shadow: 0 0 25px rgba(0, 224, 164, 0.15);
}

.command-card.command-card-premium:hover {
    border-color: rgba(250, 204, 21, 0.52);
    box-shadow: 0 0 25px rgba(250, 204, 21, 0.18);
}

.command-card.command-card-premium .cmd {
    color: #facc15;
}

.command-card-upcoming {
    position: relative;
    overflow: hidden;
    pointer-events: none;
    opacity: 0.68;
    filter: saturate(0.86) brightness(0.94);
}

.command-card-upcoming > * {
    position: relative;
    z-index: 1;
}

.command-card-upcoming::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
      linear-gradient(180deg, rgba(8, 15, 24, 0.14), rgba(8, 15, 24, 0.2));
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    pointer-events: none;
}

.command-card-upcoming .dev-progress {
    opacity: 1;
    z-index: 4;
}

.command-card-upcoming .upcoming-badge {
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    padding: 0 11px;
    border-radius: 999px;
    border: 1px solid rgba(248, 113, 113, 0.22);
    background:
      linear-gradient(180deg, rgba(44, 16, 22, 0.82), rgba(30, 11, 15, 0.76));
    color: #fecaca;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.05),
      0 10px 24px rgba(0,0,0,.22),
      0 0 18px rgba(248,113,113,.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.command-card-with-corner-badges {
    padding-top: 66px !important;
}

.command-card-with-corner-badges.has-upcoming-corner-stack {
    padding-top: 98px !important;
}

/* Team Slider */
.team-section {
    background: linear-gradient(180deg, #101820 0%, #0f1720 58%, #101820 100%);
}

.team-heading {
    display: grid;
    gap: 18px;
    margin-bottom: 34px;
}

.team-badge {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    border: 1px solid rgba(0, 224, 164, 0.24);
    border-radius: 999px;
    color: #99f6e4;
    background: rgba(0, 224, 164, 0.08);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.team-badge span:first-child {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--accent-primary);
}

.team-slider-shell {
    position: relative;
    padding: 2px 68px 28px;
}

.team-slider {
    display: flex;
    gap: 34px;
    overflow-x: auto;
    overflow-y: visible;
    padding: 18px 4px 26px;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.team-slider::-webkit-scrollbar {
    display: none;
}

.team-card {
    flex: 0 0 148px;
    min-height: 162px;
    scroll-snap-align: start;
    position: relative;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
    transition: transform .26s ease;
}

.team-card:hover {
    transform: translateY(-5px);
}

.team-card-inner {
    position: relative;
    z-index: 1;
    min-height: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
}

.team-card-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
    text-align: center;
}

.team-avatar-wrap {
    position: relative;
    flex: 0 0 auto;
}

.team-avatar {
    width: 112px;
    height: 112px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.16);
    background: rgba(12, 22, 30, 0.85);
    box-shadow: none;
    transition: border-color .24s ease, transform .24s ease;
}

.team-card:hover .team-avatar {
    border-color: color-mix(in srgb, var(--team-role-color, var(--accent-primary)) 54%, rgba(255,255,255,0.16));
    transform: scale(1.03);
}

.team-avatar-fallback {
    display: grid;
    place-items: center;
    color: #dffdf4;
    font-size: 28px;
    font-weight: 900;
}

.team-role-dot {
    position: absolute;
    right: 1px;
    bottom: 2px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid #101820;
    background: rgba(14, 24, 34, 0.94);
    color: var(--team-role-color, var(--accent-primary));
    box-shadow: none;
}

.team-role-dot img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    display: block;
}

.team-role-dot::after {
    content: attr(data-team-role-label);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translate(-50%, 6px);
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(14, 24, 34, 0.96);
    color: #e5edf5;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .04em;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}

.team-role-dot:hover::after,
.team-role-dot:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

.team-card h3 {
    margin: 0;
    color: #fff;
    font-size: 16px;
    line-height: 1.1;
    font-weight: 750;
    max-width: 148px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-slider-fade {
    position: absolute;
    top: 0;
    bottom: 70px;
    width: 90px;
    z-index: 2;
    pointer-events: none;
}

.team-slider-fade-left {
    left: -2px;
    background: linear-gradient(90deg, #101820 0%, rgba(16,24,32,0) 100%);
}

.team-slider-fade-right {
    right: -2px;
    background: linear-gradient(270deg, #101820 0%, rgba(16,24,32,0) 100%);
}

.team-slider-controls {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
    z-index: 3;
    opacity: 1;
    transition: opacity .18s ease, visibility .18s ease;
}

.team-slider-controls.is-hidden {
    opacity: 0;
    visibility: hidden;
}

.team-slider-btn {
    width: 46px;
    height: 46px;
    display: inline-grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: #cbd5e1;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,0.34));
    pointer-events: auto;
    transition: transform .22s ease, color .22s ease, filter .22s ease;
}

.team-slider-btn:hover {
    transform: translateY(-2px);
    color: var(--accent-primary);
    filter: drop-shadow(0 0 16px rgba(0,224,164,0.22));
}

.team-slider-btn svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 768px) {
    .team-section {
        padding-top: 72px;
        padding-bottom: 74px;
    }

    .team-heading {
        text-align: left;
        margin-bottom: 20px;
    }

    .team-badge {
        font-size: 11px;
        padding: 8px 13px;
    }

    .team-slider-shell {
        margin-left: -16px;
        margin-right: -16px;
        padding: 2px 56px 24px;
    }

    .team-slider {
        gap: 24px;
        padding: 18px 16px 24px;
        scroll-padding-left: 16px;
    }

    .team-card {
        flex-basis: 132px;
        min-height: 150px;
    }

    .team-card-inner {
        padding: 0;
    }

    .team-avatar {
        width: 98px;
        height: 98px;
    }

    .team-card h3 {
        font-size: 15px;
        max-width: 132px;
    }

    .team-slider-fade {
        display: none;
    }
}

.command-card-meta-corner {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    display: inline-flex;
    justify-content: flex-end;
    width: calc(100% - 24px);
    margin: 0 !important;
}

.command-card-with-corner-badges.has-upcoming-corner-stack .command-card-meta-corner {
    top: 48px;
}

.command-card-meta-corner .command-meta-badge {
    margin-left: auto;
}

.premium-only-badge {
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    padding: 0 11px;
    border-radius: 999px;
    border: 1px solid rgba(250, 204, 21, 0.22);
    background:
      linear-gradient(180deg, rgba(46, 35, 10, 0.84), rgba(31, 22, 8, 0.78));
    color: #fde68a;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.05),
      0 10px 24px rgba(0,0,0,.22),
      0 0 18px rgba(250,204,21,.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.premium-only-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #facc15;
    box-shadow:
      0 0 0 4px rgba(250,204,21,.10),
      0 0 12px rgba(250,204,21,.22);
    flex-shrink: 0;
}

.command-card-upcoming .upcoming-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #fda4af;
    box-shadow:
      0 0 0 4px rgba(248,113,113,.12),
      0 0 12px rgba(248,113,113,.26);
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .command-card-meta-corner {
        top: 10px;
        right: 10px;
        max-width: calc(100% - 20px);
    }

    .command-card-with-corner-badges {
        padding-top: 60px !important;
    }

    .command-card-with-corner-badges.has-upcoming-corner-stack {
        padding-top: 90px !important;
    }

    .command-card-with-corner-badges.has-upcoming-corner-stack .command-card-meta-corner {
        top: 42px;
    }

    .command-card-upcoming .upcoming-badge {
        gap: 6px;
        min-height: 26px;
        padding: 0 10px;
        font-size: 10px;
    }

    .premium-only-badge {
        gap: 6px;
        min-height: 26px;
        padding: 0 10px;
        font-size: 10px;
    }

    .command-card-upcoming .upcoming-badge-dot {
        width: 6px;
        height: 6px;
    }

    .premium-only-badge-dot {
        width: 6px;
        height: 6px;
    }
}

.commands-filter-shell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 0;
  flex: 0 1 auto;
}

.command-search-shell {
  position: sticky;
  top: 84px;
  z-index: 20;
  margin-bottom: 38px;
}

.command-search-shell #search-input {
  width: 100%;
  min-height: 58px;
  padding: 0 20px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.045);
  color: #f8fafc;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    0 18px 40px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition:
    transform .24s ease,
    border-color .24s ease,
    box-shadow .24s ease,
    background .24s ease,
    opacity .24s ease;
}

.command-search-shell #search-input::placeholder {
  color: #94a3b8;
}

.command-search-shell #search-input:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.07);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
    0 18px 40px rgba(0, 0, 0, 0.32);
}

.command-search-shell #search-input:focus {
  outline: none;
  transform: translateY(-1px);
  border-color: rgba(0, 224, 164, 0.22);
  background:
    linear-gradient(135deg, rgba(0, 224, 164, 0.08), rgba(255, 255, 255, 0.03)),
    rgba(8, 15, 24, 0.92);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
    0 18px 40px rgba(0, 0, 0, 0.32),
    0 0 24px rgba(0, 224, 164, 0.14);
}

.commands-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 28px;
}

.commands-page-legend {
  margin-top: 18px;
}

.commands-page-legend .cmd-legend {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 0;
  z-index: 1;
}

.commands-page-legend .cmd-legend-content {
  position: static;
  top: auto;
  left: auto;
  width: min(100%, 420px);
  max-height: 0;
  margin-top: 0;
  padding: 0 16px;
  overflow: hidden;
  z-index: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-10px) scale(0.985);
  transform-origin: top left;
  will-change: max-height, opacity, transform;
  transition:
    max-height .42s cubic-bezier(.16, 1, .3, 1),
    margin-top .36s cubic-bezier(.16, 1, .3, 1),
    padding .36s cubic-bezier(.16, 1, .3, 1),
    opacity .24s ease,
    transform .38s cubic-bezier(.16, 1, .3, 1),
    visibility 0s linear .42s;
}

.commands-page-legend .cmd-legend.active .cmd-legend-content {
  max-height: 320px;
  margin-top: 14px;
  padding: 14px 16px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}

.commands-toolbar-separator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 4px;
  color: #64748b;
  font-size: 1rem;
  line-height: 1;
  opacity: 0.9;
  user-select: none;
}

.command-toolbar-legend {
  flex: 0 0 auto;
  margin-left: 8px;
}

.command-search-shell.is-search-open #search-input {
  border-color: rgba(0, 224, 164, 0.22);
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  background:
    linear-gradient(135deg, rgba(0, 224, 164, 0.08), rgba(255, 255, 255, 0.03)),
    rgba(8, 15, 24, 0.92);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
    0 18px 40px rgba(0, 0, 0, 0.32),
    0 0 24px rgba(0, 224, 164, 0.14);
}

.command-search-suggestions {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.045);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    0 18px 40px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px) scale(0.985);
  transform-origin: top center;
  transition:
    opacity .22s ease,
    transform .28s cubic-bezier(.22, 1, .36, 1),
    visibility .22s ease;
}

.command-search-suggestions.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.command-search-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 2px;
}

.command-search-group + .command-search-group {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.command-search-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
}

.command-search-group-label {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.command-search-group-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  flex-shrink: 0;
}

.command-search-group-label[data-category-tone="admin"],
.command-search-group-dot[data-category-tone="admin"] {
  color: #93c5fd;
}

.command-search-group-label[data-category-tone="admin"] {
  border-color: rgba(96, 165, 250, 0.18);
  background: rgba(37, 99, 235, 0.1);
}

.command-search-group-dot[data-category-tone="admin"] {
  background: #60a5fa;
  box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.12);
}

.command-search-group-label[data-category-tone="general"],
.command-search-group-dot[data-category-tone="general"] {
  color: #5eead4;
}

.command-search-group-label[data-category-tone="general"] {
  border-color: rgba(45, 212, 191, 0.18);
  background: rgba(13, 148, 136, 0.1);
}

.command-search-group-dot[data-category-tone="general"] {
  background: #2dd4bf;
  box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.12);
}

.command-search-group-label[data-category-tone="moderation"],
.command-search-group-dot[data-category-tone="moderation"] {
  color: #fda4af;
}

.command-search-group-label[data-category-tone="moderation"] {
  border-color: rgba(251, 113, 133, 0.18);
  background: rgba(190, 24, 93, 0.1);
}

.command-search-group-dot[data-category-tone="moderation"] {
  background: #fb7185;
  box-shadow: 0 0 0 4px rgba(251, 113, 133, 0.12);
}

.command-search-group-label[data-category-tone="fun"],
.command-search-group-dot[data-category-tone="fun"] {
  color: #f9a8d4;
}

.command-search-group-label[data-category-tone="fun"] {
  border-color: rgba(236, 72, 153, 0.18);
  background: rgba(190, 24, 93, 0.08);
}

.command-search-group-dot[data-category-tone="fun"] {
  background: #ec4899;
  box-shadow: 0 0 0 4px rgba(236, 72, 153, 0.12);
}

.command-search-group-label[data-category-tone="premium"],
.command-search-group-dot[data-category-tone="premium"] {
  color: #fde68a;
}

.command-search-group-label[data-category-tone="premium"] {
  border-color: rgba(250, 204, 21, 0.2);
  background: rgba(202, 138, 4, 0.12);
}

.command-search-group-dot[data-category-tone="premium"] {
  background: #facc15;
  box-shadow: 0 0 0 4px rgba(250, 204, 21, 0.12);
}

.command-search-group-label[data-category-tone="neutral"],
.command-search-group-dot[data-category-tone="neutral"] {
  color: #cbd5e1;
}

.command-search-group-label[data-category-tone="neutral"] {
  border-color: rgba(148, 163, 184, 0.16);
  background: rgba(148, 163, 184, 0.08);
}

.command-search-group-dot[data-category-tone="neutral"] {
  background: #94a3b8;
  box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.12);
}

.command-search-suggestion {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
  color: #f8fafc;
  text-align: left;
  transition:
    border-color .2s ease,
    background .2s ease,
    transform .2s ease,
    box-shadow .2s ease,
    opacity .24s ease;
  opacity: 0;
  animation: commandSuggestionIn .26s cubic-bezier(.22, 1, .36, 1) forwards;
  animation-delay: var(--suggestion-delay, 0ms);
}

.command-search-suggestion:hover,
.command-search-suggestion.is-active {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.16);
  background:
    linear-gradient(135deg, rgba(0, 224, 164, 0.08), rgba(255, 255, 255, 0.03)),
    rgba(8, 15, 24, 0.92);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
    0 18px 40px rgba(0, 0, 0, 0.32),
    0 0 24px rgba(0, 224, 164, 0.14);
}

.command-search-suggestion-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
  color: #cbd5e1;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: -.02em;
}

.command-search-suggestion-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.command-search-suggestion-title {
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.2;
}

.command-search-suggestion-desc {
  color: #94a3b8;
  font-size: 0.72rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@keyframes commandSuggestionIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.commands-filter-label {
  color: #94a3b8;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: .01em;
}

.command-filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.command-filter-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.035);
  color: #9ca3af;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  transition:
    transform .22s ease,
    color .22s ease,
    border-color .22s ease,
    background .22s ease,
    box-shadow .22s ease;
}

.command-filter-tag:hover {
  transform: translateY(-1px);
  color: #f8fafc;
  border-color: rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.055);
}

.command-filter-tag.is-active {
  color: #04130f;
  border-color: rgba(0,224,164,0.38);
  background: linear-gradient(135deg, rgba(0,224,164,0.96), rgba(45,212,191,0.92));
  box-shadow:
    0 0 18px rgba(0,224,164,0.18),
    0 10px 24px rgba(0,224,164,0.12);
}

.commands-unified-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 24px;
}

.commands-empty-state {
  margin-top: 18px;
  padding: 18px 20px;
  border-radius: 18px;
  border: 1px dashed rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  color: #94a3b8;
  text-align: center;
}

@media (max-width: 767px) {
  .command-search-shell {
    top: 78px;
    margin-bottom: 28px;
  }

  .command-search-shell #search-input {
    min-height: 54px;
    padding: 0 18px;
    border-radius: 16px;
  }

  .commands-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .commands-page-legend {
    margin-top: 16px;
  }

  .commands-toolbar-separator {
    display: none;
  }

  .command-toolbar-legend {
    width: 100%;
    margin-left: 0;
  }

  .command-search-shell.is-search-open #search-input {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
  }

  .command-search-suggestions {
    padding: 7px;
    border-radius: 14px;
  }

  .command-search-group {
    gap: 4px;
    padding: 7px 1px;
  }

  .command-search-group-header {
    gap: 7px;
    padding: 0 7px;
  }

  .command-search-group-label {
    min-height: 20px;
    padding: 0 8px;
    font-size: 0.6rem;
  }

  .command-search-group-dot {
    width: 6px;
    height: 6px;
  }

  .command-search-suggestion {
    gap: 9px;
    padding: 9px 10px;
    border-radius: 11px;
  }

  .command-search-suggestion-icon {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    font-size: 0.76rem;
  }

  .command-search-suggestion-title {
    font-size: 0.82rem;
  }

  .command-search-suggestion-desc {
    font-size: 0.68rem;
  }
}

@media (min-width: 768px) {
  .commands-unified-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .commands-unified-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.scroll-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity .55s ease,
        transform .7s cubic-bezier(.22, 1, .36, 1);
    will-change: opacity, transform;
}

.scroll-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Category Badge */
.category-badge {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: #0b0f14;
    font-weight: 600;
}

/* Permission Badge */
.permission-badge {
    background: rgba(255, 59, 59, 0.15);
    border: 1px solid rgba(255, 59, 59, 0.4);
    color: #ff6b6b;
}

.copy-command {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition:
        text-shadow 0.24s ease,
        transform 0.22s ease,
        border-color 0.24s ease,
        box-shadow 0.24s ease,
        background 0.24s ease;
}

.copy-command::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(115deg,
        transparent 0%,
        transparent 34%,
        rgba(126, 246, 215, 0.18) 50%,
        transparent 66%,
        transparent 100%);
    opacity: 0;
    transform: translateX(-120%);
    transition: opacity .22s ease;
}

.copy-command:hover::before,
.copy-command:focus-visible::before {
    opacity: 1;
    animation: copyCommandSheen .82s cubic-bezier(.22, 1, .36, 1);
}

.copy-command:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 1px rgba(0,224,164,.34),
        0 0 0 5px rgba(0,224,164,.09),
        0 18px 38px rgba(0,0,0,.24);
}

.copy-command-chip {
    position: absolute;
    top: 50%;
    right: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 16px;
    height: 16px;
    padding: 0;
    color: rgba(203, 213, 225, .94);
    transform: translateY(-50%);
    transition:
        transform .22s ease,
        color .24s ease,
        opacity .24s ease;
}

.copy-command-chip-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Crect x='9' y='9' width='11' height='11' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Crect x='9' y='9' width='11' height='11' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E");
}

.copy-command-chip-label {
    display: none;
}

.copy-command:hover .copy-command-chip,
.copy-command:focus-visible .copy-command-chip {
    transform: translateY(calc(-50% - 1px));
    color: #7ef6d7;
}

.copy-command.is-copying {
    transform: translateY(-2px) scale(1.01);
    box-shadow:
        0 0 0 1px rgba(0,224,164,.2),
        0 14px 32px rgba(0,0,0,.24),
        0 0 28px rgba(0,224,164,.14);
}

.copy-command.is-copying .copy-command-chip {
    color: #7ef6d7;
}

.copy-command.is-copied {
    transform: translateY(-2px);
    box-shadow:
        0 0 0 1px rgba(0,224,164,.22),
        0 18px 38px rgba(0,0,0,.28),
        0 0 32px rgba(0,224,164,.18);
}

.copy-command.is-copied .copy-command-chip {
    color: #7ef6d7;
}

.copy-command.is-copied .copy-command-chip-icon {
    -webkit-mask-image: url('/assets/img/good.svg');
    mask-image: url('/assets/img/good.svg');
}

.copy-command.is-copy-error {
    transform: translateY(-1px);
    box-shadow:
        0 0 0 1px rgba(248,113,113,.24),
        0 14px 32px rgba(0,0,0,.24),
        0 0 32px rgba(248,113,113,.16);
}

.copy-command.is-copy-error .copy-command-chip {
    color: #fca5a5;
}

.copy-command.is-copy-error .copy-command-chip-icon {
    -webkit-mask-image: url('/assets/img/wrong.svg');
    mask-image: url('/assets/img/wrong.svg');
}

.site-toast-root {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    pointer-events: none;
}

.site-toast {
    min-width: min(320px, calc(100vw - 32px));
    max-width: min(420px, calc(100vw - 32px));
    padding: 14px 18px;
    border-radius: 18px;
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.5;
    box-shadow: 0 0 28px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(14px);
    border: 1px solid transparent;
    pointer-events: auto;
    animation: siteToastIn .24s ease;
}

.site-toast.is-hiding {
    animation: siteToastOut .22s ease forwards;
}

.site-toast-inner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.site-toast-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 1px;
    background: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.site-toast-copy {
    background: rgba(11, 23, 20, 0.94);
    border-color: rgba(0, 224, 164, 0.24);
    color: #7ef6d7;
}

.site-toast-error {
    background: rgba(42, 17, 21, 0.94);
    border-color: rgba(248, 113, 113, 0.24);
    color: #fca5a5;
}

.site-toast-info {
    background: rgba(17, 24, 39, 0.94);
    border-color: rgba(148, 163, 184, 0.24);
    color: #cbd5e1;
}

.site-toast-copy .site-toast-icon {
    -webkit-mask-image: url('/assets/img/good.svg');
    mask-image: url('/assets/img/good.svg');
}

.site-toast-error .site-toast-icon {
    -webkit-mask-image: url('/assets/img/wrong.svg');
    mask-image: url('/assets/img/wrong.svg');
}

.site-toast-info .site-toast-icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2Zm0 4a1.25 1.25 0 1 1-1.25 1.25A1.25 1.25 0 0 1 12 6Zm2 11h-4a1 1 0 0 1 0-2h1v-3h-.5a1 1 0 0 1 0-2H12a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2Zm0 4a1.25 1.25 0 1 1-1.25 1.25A1.25 1.25 0 0 1 12 6Zm2 11h-4a1 1 0 0 1 0-2h1v-3h-.5a1 1 0 0 1 0-2H12a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z'/%3E%3C/svg%3E");
}

.cookie-consent-root {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9998;
    width: min(332px, calc(100vw - 48px));
    display: flex;
    justify-content: flex-end;
    pointer-events: none;
}

.cookie-consent-card {
    --cookie-consent-radius: 18px;
    position: relative;
    isolation: isolate;
    width: 100%;
    overflow: hidden;
    clip-path: inset(0 round var(--cookie-consent-radius));
    padding: 14px;
    border-radius: var(--cookie-consent-radius);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background:
      linear-gradient(180deg, rgba(18, 26, 37, 0.96), rgba(10, 15, 22, 0.94));
    box-shadow:
      0 24px 60px rgba(0, 0, 0, 0.34),
      0 0 34px rgba(0, 224, 164, 0.1);
    backdrop-filter: blur(18px) saturate(1.14);
    -webkit-backdrop-filter: blur(18px) saturate(1.14);
    pointer-events: auto;
    opacity: 0;
    transform: translateY(18px) scale(0.965);
    transition:
      opacity .34s ease,
      transform .42s cubic-bezier(.22, 1, .36, 1);
}

.cookie-consent-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
      radial-gradient(circle at top left, rgba(0, 224, 164, 0.16), transparent 38%),
      linear-gradient(135deg, rgba(255,255,255,0.12), transparent 48%);
    opacity: 0.9;
    pointer-events: none;
    z-index: 0;
}

.cookie-consent-card::after {
    content: "";
    position: absolute;
    top: -28px;
    right: -30px;
    width: 138px;
    height: 138px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(0, 224, 164, 0.16) 0%, rgba(0, 224, 164, 0.035) 48%, transparent 74%);
    filter: blur(16px);
    pointer-events: none;
    z-index: 0;
}

.cookie-consent-card.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.cookie-consent-card.is-hiding {
    opacity: 0;
    transform: translateY(16px) scale(0.975);
}

.cookie-consent-content {
    position: relative;
    z-index: 1;
}

.cookie-consent-badge {
    display: none;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.cookie-consent-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: linear-gradient(135deg, #00e0a4, #34d399);
    box-shadow: 0 0 12px rgba(0, 224, 164, 0.48);
}

.cookie-consent-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.cookie-consent-icon-shell {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background:
      linear-gradient(135deg, rgba(0, 224, 164, 0.22), rgba(13, 21, 31, 0.9));
    border: 1px solid rgba(0, 224, 164, 0.16);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.05),
      0 12px 24px rgba(0, 0, 0, 0.22);
    color: #7ef6d7;
}

.cookie-consent-icon-shell svg {
    width: 18px;
    height: 18px;
}

.cookie-consent-icon-asset {
    width: 18px;
    height: 18px;
    display: inline-block;
    background: currentColor;
    -webkit-mask-image: url('/assets/img/legal/cookie.svg');
    mask-image: url('/assets/img/legal/cookie.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.cookie-consent-copy {
    min-width: 0;
}

.cookie-consent-title {
    margin: 0;
    color: #f8fafc;
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.3;
}

.cookie-consent-description {
    margin: 7px 0 0;
    color: #94a3b8;
    font-size: .81rem;
    line-height: 1.55;
}

.cookie-consent-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
    order: 3;
}

.cookie-consent-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid transparent;
    font-size: .8rem;
    font-weight: 700;
    transition:
      transform .22s ease,
      border-color .22s ease,
      background .22s ease,
      box-shadow .22s ease,
      color .22s ease;
}

.cookie-consent-button:hover {
    transform: translateY(-1px);
}

.cookie-consent-button-secondary {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
    color: #cbd5e1;
}

.cookie-consent-button-secondary:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.12);
}

.cookie-consent-button-primary {
    background: linear-gradient(135deg, rgba(0, 224, 164, 0.92), rgba(52, 211, 153, 0.88));
    color: #081018;
    box-shadow: 0 10px 20px rgba(0, 224, 164, 0.18);
}

.cookie-consent-button-primary:hover {
    box-shadow: 0 14px 28px rgba(0, 224, 164, 0.24);
}

.cookie-consent-footer {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 8px;
    order: 2;
}

.cookie-consent-toggle {
    display: inline-flex;
    align-items: center;
    vertical-align: baseline;
    gap: 8px;
    min-height: auto;
    margin-left: 32px;
    transform: translateY(12px);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #cbd5e1;
    font-size: .76rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: color .22s ease, transform .22s ease;
}

.cookie-consent-toggle:hover {
    color: #f8fafc;
    transform: translateY(11px);
}

.cookie-consent-toggle-arrow {
    width: 12px;
    height: 12px;
    color: rgba(126, 246, 215, 0.92);
    transition: transform .28s cubic-bezier(.22, 1, .36, 1);
}

.cookie-consent-card.is-expanded .cookie-consent-toggle-arrow {
    transform: rotate(180deg);
}

.cookie-consent-details {
    display: grid;
    width: 100%;
    grid-template-rows: 0fr;
    transition:
      grid-template-rows .34s cubic-bezier(.22, 1, .36, 1),
      margin-top .28s ease;
}

.cookie-consent-card.is-expanded .cookie-consent-details {
    grid-template-rows: 1fr;
    margin-top: 10px;
}

.cookie-consent-details-inner {
    min-height: 0;
    overflow: hidden;
}

.cookie-consent-details-card {
    padding: 11px;
    border-radius: 14px;
    background: rgba(255,255,255,0.035);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.cookie-consent-details-copy {
    margin: 0;
    color: #94a3b8;
    font-size: .76rem;
    line-height: 1.55;
}

.cookie-consent-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.cookie-consent-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.05);
    color: #dbe7f3;
    font-size: .68rem;
    font-weight: 700;
}

.cookie-consent-tag::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.85;
}

.cookie-consent-tag-necessary {
    color: #7ef6d7;
}

.cookie-consent-tag-preferences {
    color: #93c5fd;
}

.cookie-consent-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    color: #7ef6d7;
    font-size: .74rem;
    font-weight: 700;
    transition: color .22s ease, transform .22s ease;
}

.cookie-consent-link:hover {
    color: #b8ffea;
    transform: translateX(2px);
}

@keyframes copyCommandSheen {
    0% {
        transform: translateX(-120%);
    }
    100% {
        transform: translateX(120%);
    }
}

@keyframes siteToastIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes siteToastOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }
}

@keyframes siteToastMobileReveal {
    from {
        opacity: 0;
        transform: translateY(-26px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes siteToastMobileHide {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(-22px) scale(0.96);
    }
}

@media (max-width: 640px) {
    .copy-command-chip {
        top: 50%;
        right: 7px;
        width: 15px;
        height: 15px;
    }

    .copy-command-chip-icon {
        width: 15px;
        height: 15px;
    }

    .site-toast-root {
        top: 0;
        right: 18px;
        left: 18px;
        bottom: auto;
        z-index: 45;
        padding-top: 74px;
        align-items: stretch;
    }

    .site-toast {
        min-width: 0;
        max-width: 100%;
        padding: 11px 14px;
        border-radius: 15px;
        font-size: .84rem;
        line-height: 1.4;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.26);
        animation: siteToastMobileReveal .34s cubic-bezier(.22, 1, .36, 1);
    }

    .site-toast.is-hiding {
        animation: siteToastMobileHide .28s cubic-bezier(.22, 1, .36, 1) forwards;
    }

    .site-toast-inner {
        gap: 10px;
    }

    .site-toast-icon {
        width: 17px;
        height: 17px;
        margin-top: 0;
    }

    .cookie-consent-root {
        right: 14px;
        left: 14px;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
        z-index: 44;
        width: auto;
    }

    .cookie-consent-card {
        --cookie-consent-radius: 16px;
        padding: 12px;
        border-radius: var(--cookie-consent-radius);
    }

    .cookie-consent-badge {
        margin-bottom: 9px;
        font-size: .62rem;
    }

    .cookie-consent-head {
        gap: 9px;
    }

    .cookie-consent-icon-shell {
        width: 34px;
        height: 34px;
        border-radius: 11px;
    }

    .cookie-consent-title {
        font-size: .88rem;
    }

    .cookie-consent-description {
        font-size: .78rem;
        line-height: 1.48;
    }

    .cookie-consent-actions {
        margin-top: 12px;
        flex-direction: column-reverse;
    }

    .cookie-consent-button {
        width: 100%;
        min-height: 34px;
        font-size: .78rem;
    }

    .cookie-consent-card.is-expanded .cookie-consent-details {
        margin-top: 9px;
    }
}

@media (max-width: 767px) {
    .site-toast-root {
        z-index: 45;
    }

    .cookie-consent-root {
        z-index: 44;
    }
}

.dev-progress {
    position: absolute;
    bottom: 0;
    left: -40%;
    height: 3px;
    width: 40%;
    background: linear-gradient(
        90deg,
        transparent,
        #00e0a4,
        transparent
    );
    animation: devLoad 1.6s infinite ease-in-out;
}

@keyframes devLoad {
    0% { left: -40%; }
    100% { left: 100%; }
}

.flip-card { perspective: 1200px; }

.flip-inner {
    transition: transform .65s cubic-bezier(.4,.2,.2,1);
    transform-style: preserve-3d;
}

.flip-card.flipped .flip-inner {
    transform: rotateY(180deg);
}

.flip-face { backface-visibility: hidden; }

.flip-back {
    position: absolute;
    inset: 0;
    transform: rotateY(180deg);
}

.flip-card.flash {
    box-shadow:
        0 0 14px rgba(0,224,164,.7),
        0 0 35px rgba(0,224,164,.45);
}

[data-category] {
    transition: opacity .2s ease, transform .2s ease;
}

mark {
    font-weight: 600;
    background:rgba(0,224,164,.25);
    padding:2px 4px;
    border-radius:4px;
    color:white;
}

/* ===== PREMIUM LINK OVERRIDE ===== */

/* ===== PREMIUM LINK FULL ===== */

.premium-link {
  position: relative;
  display: inline-flex;
  transition: color .25s ease, text-shadow .25s ease;
}

/* underline base (center) */
.premium-link::after {
  content: "";
  position: absolute;

  left: 50%;
  bottom: -4px;

  width: 0%;
  height: 2px;

  transform: translateX(-50%);

  background: linear-gradient(
    90deg,
    #9ca3af,
    #facc15
  );

  transition: width .35s ease;
}

/* hover text */
.premium-link:hover {
  color: #facc15;

  text-shadow:
    0 0 8px rgba(250,204,21,.9),
    0 0 20px rgba(250,204,21,.5);
}

/* underline hover */
.premium-link:hover::after {
  width: 100%;

  animation: premiumGlow 1.2s ease-in-out infinite alternate;

  background: linear-gradient(
    90deg,
    #facc15,
    #fde68a,
    #facc15
  );

  box-shadow:
    0 0 8px rgba(250,204,21,.7),
    0 0 16px rgba(250,204,21,.45);
}

/* glow animation */
@keyframes premiumGlow {
  from {
    box-shadow: 0 0 6px rgba(250,204,21,.5);
  }
  to {
    box-shadow: 0 0 16px rgba(250,204,21,.9);
  }
}

#scrollTopBtn{
  position: relative;
  overflow: hidden;
  box-shadow:
    0 0 8px rgba(0,224,164,.4),
    0 0 16px rgba(0,224,164,.2);
  isolation: isolate;
  animation: scrollTopFloat 3.2s ease-in-out infinite;
  transition:
    box-shadow .25s ease,
    transform .25s ease,
    background .25s ease,
    filter .25s ease;
}

#scrollTopBtn:hover{
  box-shadow:
    0 0 12px rgba(0,224,164,.7),
    0 0 24px rgba(0,224,164,.4);
  background: #19eab0;
  transform: translateY(-4px) scale(1.06);
  filter: saturate(1.08);
}

/* ===== SCROLL ARROW (CLEAN) ===== */

.scroll-arrow{
  position: relative;
  z-index: 2;
  transition: transform .3s ease, filter .3s ease;
}

/* hover – zostaje efekt */
#scrollTopBtn:hover .scroll-arrow{
  transform: translateY(-5px) scale(1.12);
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.18));
}

.scroll-top-ring,
.scroll-top-glow{
  position: absolute;
  inset: 0;
  border-radius: 999px;
  pointer-events: none;
}

.scroll-top-ring{
  inset: -2px;
  border: 1px solid rgba(255,255,255,.22);
  opacity: .8;
}

.scroll-top-glow{
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.42), transparent 32%),
    radial-gradient(circle at 70% 75%, rgba(0,127,93,.22), transparent 40%);
  z-index: 1;
}

#scrollTopBtn.bounce{
  animation:
    scrollTopFloat 3.2s ease-in-out infinite,
    scrollTopBounce .7s cubic-bezier(.34, 1.56, .64, 1);
}

#scrollTopBtn.scroll-top-active{
  animation: scrollTopLaunch .55s cubic-bezier(.22, 1, .36, 1);
}

@keyframes scrollTopFloat{
  0%, 100%{
    transform: translateY(0);
  }
  50%{
    transform: translateY(-4px);
  }
}

@keyframes scrollTopBounce{
  0%{
    transform: translateY(0) scale(1);
  }
  35%{
    transform: translateY(-10px) scale(1.07);
  }
  70%{
    transform: translateY(2px) scale(.97);
  }
  100%{
    transform: translateY(0) scale(1);
  }
}

@keyframes scrollTopLaunch{
  0%{
    transform: translateY(0) scale(1);
  }
  35%{
    transform: translateY(-8px) scale(1.08);
  }
  100%{
    transform: translateY(0) scale(1);
  }
}

.inline-info{
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.inline-info-dot{
    width:16px;
    height:16px;
    border-radius:50%;
    background:#00e0a4;
    color:#06261e;
    font-size:11px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    position:relative; /* anchor */
}

.inline-tooltip{
    position:absolute;
    bottom:-10px;
    left:50%;
    transform:translate(-50%, 100%) scale(.95);

    width:190px;
    background:#0b0f14;
    color:#e5e7eb;

    font-size:10.5px;        /* mniejszy */
    font-weight:400;        /* bez pogrubienia */
    line-height:1.45;       /* lepszy flow */

    padding:7px 10px;
    border-radius:8px;
    border:1px solid rgba(0,224,164,.35);
    box-shadow:0 12px 26px rgba(0,0,0,.6);

    opacity:0;
    pointer-events:none;
    transition:.18s ease;
    z-index:80;
}

.inline-tooltip strong{
  color:#00e0a4;
  font-weight:500;
}

/* arrow */
.inline-tooltip::before{
    content:"";
    position:absolute;
    top:-5px;
    left:50%;
    transform:translateX(-50%) rotate(45deg);
    width:8px;
    height:8px;
    background:#0b0f14;
    border-left:1px solid rgba(0,224,164,.35);
    border-top:1px solid rgba(0,224,164,.35);
}

/* show with float in */
.inline-info-dot:hover .inline-tooltip,
.inline-info-dot.active .inline-tooltip{
    opacity:1;
    transform:translate(-50%, 110%) scale(1);
    pointer-events:auto;
}

.faq-answer{
max-height:0;
overflow:hidden;
opacity:0;
transform:translateY(-6px);
transition:max-height .35s ease,opacity .25s ease,transform .25s ease;
}

.faq-item.active .faq-answer{
max-height:420px;
opacity:1;
transform:translateY(0);
}

.faq-item.active{
border-color:#00e0a4;
box-shadow:0 0 12px rgba(0,224,164,.35),0 0 24px rgba(0,224,164,.15);
}

.faq-question{
  gap: 16px;
}

.faq-question-icon{
width:20px;
height:20px;
min-width:20px;
color:rgba(255,255,255,.62);
transition:transform .28s ease,color .25s ease;
}

.faq-item.active .faq-question-icon{
transform:rotate(180deg);
color:rgba(255,255,255,.92);
}

.faq-item{
    transition: transform .25s ease, box-shadow .25s ease;
    cursor:pointer;
}

.faq-item:hover{
    transform: translateY(-3px);
    box-shadow: 0 0 10px rgba(0,224,164,.15);
}

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

.faq-search-shell{
  isolation:isolate;
}

.faq-search-shell::before{
  content:"";
  position:absolute;
  inset:8px 18px;
  z-index:-1;
  border-radius:999px;
  background:
    radial-gradient(circle at 18% 50%, rgba(0,224,164,.28), transparent 34%),
    radial-gradient(circle at 78% 36%, rgba(35,70,94,.34), transparent 40%);
  filter:blur(18px);
  opacity:.62;
  pointer-events:none;
  transition:opacity .24s ease, transform .24s ease;
}

.faq-search-shell:focus-within::before{
  opacity:.86;
  transform:scaleX(1.03);
}

.faq-search-input{
  width:100%;
  min-height:58px;
  padding:0 20px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(135deg, rgba(255,255,255,.085), rgba(255,255,255,.035)),
    rgba(13,22,31,.84);
  color:#f8fafc;
  font-size:16px;
  font-weight:700;
  letter-spacing:-.01em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(255,255,255,.025),
    0 18px 44px rgba(0,0,0,.34);
  backdrop-filter:blur(18px) saturate(135%);
  -webkit-backdrop-filter:blur(18px) saturate(135%);
  outline:none;
  transition:
    transform .24s cubic-bezier(.22,1,.36,1),
    border-color .24s ease,
    background .24s ease,
    box-shadow .24s ease;
}

.faq-search-input::placeholder{
  color:#93a0b3;
}

.faq-search-input:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.16);
  background:
    linear-gradient(135deg, rgba(255,255,255,.11), rgba(255,255,255,.045)),
    rgba(15,25,35,.88);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(255,255,255,.03),
    0 20px 48px rgba(0,0,0,.38);
}

.faq-search-input:focus{
  transform:translateY(-1px);
  border-color:rgba(0,224,164,.32);
  background:
    linear-gradient(135deg, rgba(0,224,164,.115), rgba(255,255,255,.045)),
    rgba(9,18,27,.92);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(255,255,255,.03),
    0 20px 48px rgba(0,0,0,.40),
    0 0 28px rgba(0,224,164,.13);
}

.faq-filter-bar{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
flex-wrap:wrap;
}

.faq-filter{
border:1px solid rgba(148,163,184,.18);
border-radius:999px;
background:rgba(15,23,42,.56);
color:#94a3b8;
font-size:13px;
font-weight:700;
padding:8px 13px;
transition:transform .22s ease,border-color .22s ease,background .22s ease,color .22s ease,box-shadow .22s ease;
}

.faq-filter:hover,
.faq-filter:focus-visible{
transform:translateY(-1px);
border-color:rgba(148,163,184,.34);
background:rgba(30,41,59,.72);
color:#e5e7eb;
outline:none;
}

.faq-filter.is-active{
border-color:rgba(0,224,164,.36);
background:linear-gradient(135deg, rgba(0,224,164,.14), rgba(15,23,42,.62));
color:#dffbf2;
box-shadow:0 0 18px rgba(0,224,164,.10);
}

.faq-empty{
border:1px dashed rgba(148,163,184,.22);
border-radius:18px;
background:rgba(15,23,42,.42);
color:#94a3b8;
font-size:14px;
font-weight:600;
padding:18px;
text-align:center;
}

@media (max-width: 767px) {
  .faq-filter-bar {
    justify-content:flex-start;
    overflow-x:auto;
    flex-wrap:nowrap;
    padding:2px 2px 8px;
    -webkit-overflow-scrolling:touch;
  }

  .faq-filter {
    flex:0 0 auto;
    font-size:12px;
    padding:7px 11px;
  }

  .faq-search-shell {
    top: 76px;
  }

  .faq-search-shell::before {
    inset: 9px 14px;
    filter: blur(14px);
  }

  .faq-search-input {
    min-height: 52px;
    border-radius: 18px;
    padding: 0 16px;
    font-size: 15px;
  }

  .faq-item {
    padding: 18px 16px;
    border-radius: 16px;
  }

  .faq-question {
    align-items: flex-start;
    font-size: 1rem;
    line-height: 1.45;
  }

  .faq-question-icon {
    margin-top: 2px;
  }

  .faq-answer {
    margin-top: 10px;
    font-size: 0.95rem;
    line-height: 1.7;
  }
}

/* ===== DISCORD BUTTON CLEAN ===== */

.discord-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 8px 24px;          /* px-6 py-2 */
  border-radius: 8px;         /* rounded-lg */

  font-size: 0.875rem;        /* text-sm */
  font-weight: 500;           /* font-medium */
  color: white;

  background: #5865F2;
  border: none;

  transition: all .2s ease;
}

.discord-btn:hover {
  background: #4752C4;
  box-shadow: 0 0 15px rgba(88,101,242,.35);
  transform: translateY(-2px);
}

.discord-btn:active {
  transform: scale(.97);
}

.discord-btn-icon {
  width: 16px;
  height: 16px;
  transition: transform .25s ease, filter .25s ease;
}

.discord-btn:hover .discord-btn-icon {
  transform: rotate(-8deg) scale(1.08);
  filter: drop-shadow(0 0 6px rgba(255,255,255,.4));
}

/* ===== USER PANEL GLASS + SUBTLE GLYX BORDER ===== */

#user-panel {
  position: absolute;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-14px) scale(0.96);
  transform-origin: top right;
  will-change: transform, opacity;
  transition:
    opacity .24s ease,
    transform .28s cubic-bezier(.22, 1, .36, 1),
    visibility 0s linear .28s;

  background: #1a222c;
  border-radius: 12px;
  border: 1px solid #2a3542;
  box-shadow:
    0 20px 50px rgba(0,0,0,0.65),
    inset 0 1px 0 rgba(255,255,255,0.03);
}

#user-panel.panel-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}

#user-panel:hover {
  border-color: rgba(0,224,164,0.25);
  box-shadow:
    0 20px 50px rgba(0,0,0,0.65),
    0 0 12px rgba(0,224,164,0.12),
    inset 0 1px 0 rgba(255,255,255,0.03);
}

.user-arrow {
  position: absolute;
  top: 50px;
  right: 16px;
  width: 12px;
  height: 12px;
  background: #1a222c;
  transform: translateY(-8px) rotate(45deg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  will-change: transform, opacity;
  transition:
    opacity .2s ease,
    transform .26s cubic-bezier(.22, 1, .36, 1),
    visibility 0s linear .26s;
  border-left: 1px solid #2a3542;
  border-top: 1px solid #2a3542;
  box-shadow: -2px -2px 8px rgba(0,0,0,.5);
  z-index: 60;
}

.user-arrow.panel-arrow-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) rotate(45deg);
  transition-delay: .04s;
}

.mobile-user-arrow {
  position: absolute;
  top: 50px;
  right: 24px;
  width: 12px;
  height: 12px;
  background: #1a222c;
  transform: translateY(-8px) rotate(45deg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  will-change: transform, opacity;
  transition:
    opacity .2s ease,
    transform .26s cubic-bezier(.22, 1, .36, 1),
    visibility 0s linear .26s;
  border-left: 1px solid #2a3542;
  border-top: 1px solid #2a3542;
  box-shadow: -2px -2px 8px rgba(0,0,0,.5);
  z-index: 60;
}

.mobile-user-arrow.panel-arrow-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) rotate(45deg);
  transition-delay: .04s;
}

#mobile-menu {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-10px);
  transition:
    max-height .35s ease,
    opacity .25s ease,
    transform .25s ease;
}

#mobile-menu.open {
  max-height: 500px;
  opacity: 1;
  transform: translateY(0);
}

#mobile-user-panel {
  position: absolute;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-14px) scale(0.96);
  transform-origin: top right;
  will-change: transform, opacity;
  transition:
    opacity .24s ease,
    transform .28s cubic-bezier(.22, 1, .36, 1),
    visibility 0s linear .28s;

  background: #1a222c;
  border-radius: 12px;
  border: 1px solid #2a3542;
  box-shadow:
    0 20px 50px rgba(0,0,0,0.65),
    inset 0 1px 0 rgba(255,255,255,0.03);
}

#mobile-user-panel.panel-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}

#mobile-user-panel:hover {
  border-color: rgba(0,224,164,0.25);
  box-shadow:
    0 20px 50px rgba(0,0,0,0.65),
    0 0 12px rgba(0,224,164,0.12),
    inset 0 1px 0 rgba(255,255,255,0.03);
}

#mobile-user-panel > div:first-child {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.site-lang-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  z-index: 80;
}

.site-lang-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  transition: opacity .25s ease, color .25s ease;
}

.site-lang-toggle:hover,
.site-lang-toggle.is-open {
  background: transparent;
  box-shadow: none;
}

.site-lang-current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}

.site-lang-current-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
}

.site-lang-current-label {
  font-size: 0.84rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  transform: translateY(1px);
}

.site-lang-flag-shell {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 999px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 2px 8px rgba(0,0,0,0.2);
}

.site-lang-flag {
  width: 128%;
  height: 128%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.05);
  transform-origin: center;
}

.site-lang-arrow {
  width: 12px;
  height: 12px;
  color: rgba(255, 255, 255, 0.62);
  transform-origin: center;
  transition: transform .42s cubic-bezier(.16, 1, .3, 1), color .25s ease;
}

.site-lang-toggle:hover .site-lang-arrow,
.site-lang-toggle.is-open .site-lang-arrow {
  color: rgba(255, 255, 255, 0.92);
}

.site-lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 180px;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid #2a3542;
  background: #1a222c;
  box-shadow:
    0 20px 50px rgba(0,0,0,0.65),
    inset 0 1px 0 rgba(255,255,255,0.03);
  backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, -12px, 0) scale(0.92);
  transform-origin: top right;
  filter: blur(8px);
  will-change: transform, opacity, filter;
  transition:
    opacity .22s ease,
    transform .34s cubic-bezier(.16, 1, .3, 1),
    filter .26s ease,
    visibility 0s linear .34s;
}

.site-lang-menu.menu-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
  transition-delay: 0s;
}

.site-lang-option {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 12px;
  color: #e5f7f2;
  opacity: 0;
  transform: translate3d(0, -6px, 0) scale(0.985);
  transition:
    opacity .22s ease,
    background .22s ease,
    transform .3s cubic-bezier(.16, 1, .3, 1),
    box-shadow .22s ease;
}

.site-lang-menu.menu-visible .site-lang-option {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.site-lang-menu.menu-visible .site-lang-option:nth-child(1) {
  transition-delay: .035s;
}

.site-lang-menu.menu-visible .site-lang-option:nth-child(2) {
  transition-delay: .07s;
}

.site-lang-menu.menu-visible .site-lang-option:nth-child(3) {
  transition-delay: .105s;
}

.site-lang-option:hover {
  background: rgba(255, 255, 255, 0.06);
  transform: translate3d(2px, 0, 0) scale(1);
}

.site-lang-option.active {
  background: rgba(0, 224, 164, 0.1);
  box-shadow: inset 0 0 0 1px rgba(0, 224, 164, 0.12);
}

.site-lang-option-main {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.site-lang-option-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
}

.site-lang-option-name {
  font-size: 0.84rem;
  font-weight: 600;
  color: #f8fafc;
}

.site-lang-option-subtitle {
  font-size: 0.68rem;
  color: #7f9198;
}

.site-lang-option-check {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #5eead4;
  opacity: 0;
  transition: opacity .22s ease;
}

.site-lang-option.active .site-lang-option-check {
  opacity: 1;
}

.site-lang-mobile {
  margin-right: 2px;
}

.site-lang-mobile .site-lang-toggle {
  padding-right: 8px;
}

.site-lang-mobile .site-lang-flag-shell {
  width: 20px;
  height: 20px;
}

.site-lang-mobile .site-lang-flag {
  width: 138%;
  height: 138%;
  transform: scale(1.08);
}

.site-lang-mobile .site-lang-current-label {
  display: none;
}

.mobile-panel-language {
  display: none;
}

.mobile-panel-lang-dropdown {
  display: block;
  width: 100%;
  max-width: 232px;
  margin: 6px auto 0;
  text-align: center;
}

.mobile-panel-lang-toggle {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0;
}

.mobile-panel-lang-toggle .site-lang-current {
  flex: 0 1 auto;
}

.mobile-panel-lang-toggle .site-lang-current-inner {
  justify-content: center;
  flex-direction: row;
  gap: 10px;
  min-height: 56px;
}

.mobile-panel-lang-toggle .site-lang-current-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #a7adc1;
  transform: none;
}

.mobile-panel-lang-toggle .site-lang-arrow {
  flex-shrink: 0;
}

.mobile-panel-lang-dropdown .site-lang-menu {
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  min-width: 0;
}

.site-lang-footer-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
  transition: opacity .25s ease, color .25s ease;
}

.site-lang-footer-toggle:hover {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.site-lang-footer-current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.site-lang-footer-separator {
  color: #4b5563;
  font-size: 1rem;
  line-height: 1;
  opacity: 0.9;
}

.site-lang-footer .site-lang-menu {
  left: 0;
  right: auto;
  min-width: 190px;
}

#lang-toggle.active {
  box-shadow:
    0 0 8px rgba(0,224,164,.25),
    0 0 18px rgba(0,224,164,.15);
  animation: langPulse 3s ease-in-out infinite;
}

@keyframes langPulse {
  0%,100% { box-shadow: 0 0 6px rgba(0,224,164,.25); }
  50% { box-shadow: 0 0 14px rgba(0,224,164,.45); }
}

@media (max-width: 767px) {
  .site-lang-menu {
    right: -6px;
    min-width: 170px;
  }
}

/* ===== GLYX SWITCH ===== */

.maintenance-toggle {
position: relative;
display: inline-block;
width: 46px;
height: 26px;
}

.maintenance-toggle input {
opacity: 0;
width: 0;
height: 0;
position: absolute;
}

.toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #334155;
border-radius: 30px;
transition: 0.3s;
}

.toggle-slider:before {
position: absolute;
content: "";
height: 20px;
width: 20px;
left: 3px;
bottom: 3px;
background-color: white;
border-radius: 50%;
transition: 0.3s;
}

.maintenance-toggle input:checked + .toggle-slider {
background: #00e0a4;
box-shadow: 0 0 8px #00e0a4;
}

.maintenance-toggle input:checked + .toggle-slider:before {
transform: translateX(20px);
}

/* ===== Maintenance Buttons ===== */

.maintenance-btn-primary{
display:flex;
align-items:center;
justify-content:center;

padding:12px 24px;
width:100%;

border-radius:10px;

background:linear-gradient(90deg,#00e0a4,#00b894);
color:black;
font-weight:600;
position:relative;
overflow:hidden;

transition:all .25s ease;
}

.maintenance-btn-primary:hover{
transform:translateY(-2px) scale(1.05);
box-shadow:0 0 20px rgba(0,224,164,.35);
}

.maintenance-btn-primary::after{
content:"";
position:absolute;
inset:-120% auto -120% -20%;
width:50%;
background:linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
transform:rotate(14deg);
animation:maintenanceButtonSweep 3.8s ease-in-out infinite;
pointer-events:none;
}

@keyframes maintenanceEnter{
0%{
opacity:0;
transform:translateY(20px) scale(.96);
}
100%{
opacity:1;
transform:translateY(0) scale(1);
}
}

@keyframes maintenanceButtonSweep{
0%, 100%{
transform:translateX(-180%) rotate(14deg);
}
45%, 60%{
transform:translateX(280%) rotate(14deg);
}
}

.maintenance-badge{
display:inline-flex;
align-items:center;
gap:10px;
padding:10px 14px;
border-radius:999px;
border:1px solid rgba(0,224,164,.16);
background:rgba(255,255,255,.035);
color:#cbd5e1;
font-size:.78rem;
font-weight:600;
letter-spacing:.16em;
text-transform:uppercase;
}

.maintenance-badge-dot{
width:9px;
height:9px;
border-radius:999px;
background:#00e0a4;
box-shadow:0 0 14px rgba(0,224,164,.6);
animation:maintenancePulse 1.8s ease-in-out infinite;
}

@keyframes maintenancePulse{
0%, 100%{
transform:scale(1);
opacity:.75;
}
50%{
transform:scale(1.45);
opacity:1;
}
}

.maintenance-shell{
position:relative;
overflow:hidden;
}

.maintenance-shell::before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(120deg, rgba(0,224,164,.055), transparent 26%),
radial-gradient(circle at top right, rgba(94,234,212,.12), transparent 24%);
pointer-events:none;
}

.maintenance-status-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
margin:0 auto 28px;
max-width:640px;
}

.maintenance-status-card{
position:relative;
padding:16px 14px;
border-radius:18px;
background:rgba(255,255,255,.035);
border:1px solid rgba(255,255,255,.06);
backdrop-filter:blur(12px);
}

.maintenance-status-label{
font-size:.72rem;
letter-spacing:.14em;
text-transform:uppercase;
color:#7f9198;
}

.maintenance-status-value{
margin-top:8px;
font-size:.98rem;
font-weight:700;
color:#f8fafc;
}

.maintenance-title{
font-size:clamp(2rem, 4.8vw, 3.4rem);
line-height:1.05;
font-weight:800;
letter-spacing:-.04em;
}

.maintenance-copy{
color:#9aa8b4;
margin:0 auto;
max-width:650px;
font-size:1rem;
line-height:1.85;
}

.maintenance-copy strong{
color:#ecfeff;
font-weight:600;
}

.maintenance-actions{
display:flex;
flex-direction:column;
gap:12px;
margin:0 auto 22px;
width:100%;
max-width:720px;
}

.maintenance-login-wrap{
padding-top:20px;
border-top:1px solid rgba(255,255,255,.08);
max-width:360px;
margin:0 auto;
}

@media (min-width: 640px){
  .maintenance-actions{
    flex-direction:row;
  }
}

@media (max-width: 767px){
  #maintenance-overlay{
    align-items:flex-start;
  }

  .maintenance-status-grid{
    grid-template-columns:1fr;
    gap:10px;
    margin-bottom:20px;
  }

  .maintenance-shell{
    border-radius:24px;
    width:100%;
    max-width:420px;
    margin:auto;
    padding:22px 16px !important;
  }

  .maintenance-status-card{
    padding:13px 12px;
    border-radius:16px;
  }

  .maintenance-status-label{
    font-size:.66rem;
    letter-spacing:.12em;
  }

  .maintenance-status-value{
    margin-top:6px;
    font-size:.92rem;
  }

  .maintenance-title{
    font-size:clamp(1.65rem, 8vw, 2.2rem);
    line-height:1.08;
    overflow-wrap:anywhere;
  }

  .maintenance-copy{
    max-width:100%;
    font-size:.93rem;
    line-height:1.7;
    overflow-wrap:anywhere;
  }

  .maintenance-actions{
    margin-bottom:18px;
    gap:10px;
  }

  .maintenance-login-wrap{
    max-width:100%;
    padding-top:16px;
  }

  .maintenance-badge{
    font-size:.68rem;
    padding:8px 12px;
    letter-spacing:.12em;
    max-width:100%;
    justify-content:center;
    white-space:normal;
  }
}


/* support */

.maintenance-btn-secondary{
display:flex;
align-items:center;
justify-content:center;
gap:10px;

padding:12px 24px;
width:100%;

border-radius:16px;

border:1px solid rgba(0,224,164,.4);
color:#00e0a4;
background:rgba(255,255,255,.03);

transition:all .25s ease;
white-space:normal;
text-align:center;
}

.maintenance-btn-secondary:hover{
background:rgba(0,224,164,.08);
transform:translateY(-2px);
box-shadow:0 0 18px rgba(0,224,164,.25);
}

.maintenance-btn-home{
display:flex;
align-items:center;
justify-content:center;
gap:10px;

padding:12px 24px;
width:100%;

border-radius:16px;

border:1px solid rgba(255,255,255,.1);
background:rgba(255,255,255,.05);
color:#e5e7eb;
font-weight:600;

transition:all .25s ease;
white-space:normal;
text-align:center;
}

.maintenance-btn-home:hover{
border-color:rgba(148,163,184,.32);
box-shadow:0 0 22px rgba(148,163,184,.12);
transform:translateY(-2px);
}

.maintenance-btn-home-icon{
width:18px;
height:18px;
object-fit:contain;
filter:
brightness(0) saturate(100%) invert(72%) sepia(9%) saturate(283%) hue-rotate(182deg) brightness(89%) contrast(88%)
drop-shadow(0 0 8px rgba(148,163,184,.16));
}


/* discord login */

.maintenance-btn-discord{
display:flex;
align-items:center;
justify-content:center;
gap:8px;

padding:12px 24px;
width:100%;

border-radius:16px;

background:#5865F2;
color:white;
font-weight:600;

transition:all .25s ease;
}

.maintenance-btn-discord:hover{
background:#4752c4;
transform:translateY(-2px);
box-shadow:0 0 20px rgba(88,101,242,.4);
}

/* ===== DISCORD ICON ANIMATION (MAINTENANCE ONLY) ===== */

.maintenance-btn-discord .discord-btn-icon{
  transition:transform .25s ease, filter .25s ease;
}

.maintenance-btn-discord:hover .discord-btn-icon{
  transform:rotate(-8deg) scale(1.08);
  filter:drop-shadow(0 0 6px rgba(255,255,255,.4));
}

/* ===== USER PANEL SUPPORT BUTTON (same as btn-secondary) ===== */

.panel-support-btn{
display:block;
width:100%;
text-align:center;

padding:8px 24px;

border-radius:8px;

font-size:14px;
font-weight:500;

background:transparent;
border:1px solid var(--accent-primary);
color:var(--accent-primary);

transition:0.3s ease;
}

.panel-support-btn:hover{
background:rgba(0,224,164,0.08);
box-shadow:0 0 15px var(--accent-glow);
}

/* ===== USER PANEL ITEMS ===== */

.panel-item{
display:flex;
align-items:center;
gap:10px;
min-height:40px;
width:100%;
padding:10px 14px;
border:0;
border-radius:8px;
background:transparent;
color:#d1d5db;
font:inherit;
font-size:14px;
font-weight:400;
text-align:left;
text-decoration:none;
cursor:pointer;
transition:all .25s ease;
}

.panel-item:hover{
background:#1e293b;
transform:translateX(4px);
}

.panel-item:not(.logout-item):hover{
background:#1e293b;
box-shadow:
0 0 8px rgba(255,255,255,.08),
inset 0 0 6px rgba(255,255,255,.04);
}

/* ===== ICON ===== */

.panel-icon{
width:16px;
height:16px;

filter:invert(1);

transition:transform .25s ease;
}

/* ===== LOGOUT ICON ===== */

.logout-icon{
width:16px;
height:16px;
min-width:16px;
min-height:16px;

display:block;
flex-shrink:0;

filter:invert(55%) sepia(53%) saturate(2977%)
hue-rotate(327deg) brightness(98%) contrast(98%);

transition:transform .25s ease, filter .25s ease;
}

.logout-item{
color:#f87171;
}

.logout-item span{
transition:color .25s ease;
}

/* animacja ikon */

.panel-item:hover .panel-icon{
transform:translateX(2px) scale(1.05);
}

.panel-item:hover .logout-icon{
filter:invert(55%) sepia(53%) saturate(2977%)
hue-rotate(327deg) brightness(98%) contrast(98%);
}

/* wysunięcie + zmiana koloru */

.logout-item.is-logout-hover .logout-icon{
transform:translateX(6px) scale(1.05);
filter:invert(18%) sepia(94%) saturate(5200%)
hue-rotate(350deg) brightness(110%) contrast(110%);
}

/* czerwony hover przycisku */

.logout-item:hover,
.logout-item:focus-visible{
color:#ef4444;
background:rgba(239,68,68,.12);
box-shadow:0 0 14px rgba(239,68,68,.08);
}

.logout-item:hover span,
.logout-item:focus-visible span{
color:#ef4444;
}

body.has-admin-go-to #admin-maintenance-desktop,
body.has-admin-go-to #admin-maintenance-mobile{
padding-bottom:0;
}

body.has-admin-go-to #admin-maintenance-desktop + .p-2,
body.has-admin-go-to #admin-maintenance-mobile + .p-2{
padding-top:4px;
}

.panel-go-to{
position:relative;
width:100%;
}

.panel-go-to-trigger{
justify-content:flex-start;
cursor:default;
}

.panel-go-to-arrow{
width:14px;
height:14px;
margin-left:auto;
color:#94a3b8;
transition:transform .38s cubic-bezier(.16,1,.3,1), color .28s ease;
}

.panel-go-to-menu{
display:grid;
grid-template-rows:0fr;
margin:0 4px;
overflow:hidden;
opacity:0;
transform:translateY(-6px) scaleY(.96);
transform-origin:top center;
pointer-events:none;
will-change:grid-template-rows, opacity, transform;
transition:
grid-template-rows .56s cubic-bezier(.16,1,.3,1),
opacity .38s ease,
transform .56s cubic-bezier(.16,1,.3,1);
}

.panel-go-to-menu-inner{
display:grid;
gap:1px;
min-height:0;
padding:0;
overflow:hidden;
opacity:.72;
transform:translateY(-4px);
transition:
padding .48s ease,
opacity .42s ease,
transform .52s cubic-bezier(.16,1,.3,1);
}

.panel-go-to:hover .panel-go-to-menu,
.panel-go-to:focus-within .panel-go-to-menu,
.panel-go-to.is-open .panel-go-to-menu{
grid-template-rows:1fr;
opacity:1;
transform:translateY(0) scaleY(1);
pointer-events:auto;
}

.panel-go-to:hover .panel-go-to-menu-inner,
.panel-go-to:focus-within .panel-go-to-menu-inner,
.panel-go-to.is-open .panel-go-to-menu-inner{
padding:4px 0 5px;
opacity:1;
transform:translateY(0);
}

.panel-go-to:hover .panel-go-to-arrow,
.panel-go-to:focus-within .panel-go-to-arrow,
.panel-go-to.is-open .panel-go-to-arrow{
color:#cbd5e1;
transform:rotate(90deg);
}

.panel-go-to-option{
display:flex;
align-items:center;
gap:10px;
width:100%;
min-height:38px;
padding:9px 14px 9px 38px;
border-radius:8px;
color:#cbd5e1;
font-size:13.5px;
font-weight:400;
text-align:left;
transition:background .22s ease, color .22s ease, transform .22s ease, box-shadow .22s ease;
}

.panel-go-to-option:hover,
.panel-go-to-option:focus-visible{
color:#e5e7eb;
background:#1e293b;
box-shadow:
0 0 8px rgba(255,255,255,.07),
inset 0 0 6px rgba(255,255,255,.035);
transform:translateX(3px);
outline:none;
}

.panel-go-to-option:hover .panel-icon,
.panel-go-to-option:focus-visible .panel-icon{
transform:translateX(2px) scale(1.05);
}

.panel-id-badge{
display:inline-flex;
align-items:center;
gap:5px;
min-width:0;
max-width:100%;
color:#5f6976;
font-size:12px;
line-height:1.35;
}

.panel-id-badge img{
width:15px;
height:15px;
object-fit:contain;
flex-shrink:0;
opacity:.9;
filter:brightness(0) saturate(100%) invert(43%) sepia(8%) saturate(519%) hue-rotate(176deg) brightness(88%) contrast(84%);
}

.panel-id-badge span{
min-width:0;
word-break:break-word;
color:#5f6976;
}

.panel-identity-line{
display:flex;
align-items:center;
gap:4px;
min-width:0;
max-width:100%;
line-height:1.25;
font-size:16px;
margin-bottom:5px;
animation:panelIdentityFloat 2.9s ease-in-out infinite;
}

.panel-identity-greeting{
color:#9ca3af;
font-weight:600;
}

.panel-identity-name{
position:relative;
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
color:#fff;
font-weight:600;
font-size:17px;
text-shadow:
0 0 10px rgba(255,255,255,.22);
}

.panel-identity-bang{
color:#8f98a8;
font-weight:600;
font-size:19px;
margin-left:-4px;
}

@keyframes panelIdentityFloat{
0%, 100%{
transform:translateY(0);
opacity:.88;
}
45%, 55%{
transform:translateY(-2px);
opacity:1;
}
}

.panel-avatar-role-host{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
width:48px;
height:48px;
flex:0 0 auto;
}

.panel-avatar-role-host > #panel-avatar,
.panel-avatar-role-host > #mobile-panel-avatar{
width:100%;
height:100%;
}

.panel-avatar-role-badge{
position:absolute;
right:-4px;
bottom:-4px;
display:flex;
align-items:center;
justify-content:center;
width:21px;
height:21px;
border-radius:999px;
background:rgba(13,20,28,.96);
border:1px solid rgba(148,163,184,.34);
box-shadow:0 8px 18px rgba(0,0,0,.35);
z-index:2;
pointer-events:none;
}

.panel-avatar-role-badge img{
width:14px;
height:14px;
object-fit:contain;
filter:drop-shadow(0 0 5px currentColor);
}

.nav-unix{
display:inline-block;
overflow:visible;
padding-block:.08em;
line-height:1.14;
background: linear-gradient(
90deg,
#00e0a4,
#00b894,
#00e0a4
);

background-size: 200% 200%;

-webkit-background-clip: text;
background-clip: text;
color: transparent;

animation: unixGlowMove 4s linear infinite;

text-shadow:
0 0 6px rgba(0,224,164,0.5),
0 0 18px rgba(0,224,164,0.25);

transition: all .3s ease;

}

.nav-unix:hover{

text-shadow:
0 0 10px rgba(0,224,164,0.9),
0 0 30px rgba(0,224,164,0.6);

}

@keyframes unixGlowMove{

0%{
background-position:0% 50%;
}

100%{
background-position:200% 50%;
}}

.footer-lang-option img{
transition: transform .2s ease;
}

.footer-lang-option:hover img{
transform: scale(1.15);
}

/* ===== GLYX LOGO GLOW PREMIUM ===== */

.nav-logo{
position:relative;
width:32px;
height:32px;
display:flex;
align-items:center;
justify-content:center;
}

/* miękki gradient glow pod logo */

.nav-logo::before{
content:"";
position:absolute;
inset:-6px;

background:radial-gradient(
circle at center,
rgba(0,224,164,.35),
transparent 65%
);

filter:blur(10px);
opacity:.6;
z-index:-1;

transition:.35s ease;
}

/* obraz logo */

.nav-logo-img{
width:100%;
height:100%;
object-fit:contain;

filter:
drop-shadow(0 0 6px rgba(0,224,164,.25));
transition:.3s ease;
}

/* hover */

.nav-logo:hover::before{
opacity:.9;
filter:blur(14px);
}

.nav-logo:hover .nav-logo-img{
transform:scale(1.06);
filter:
drop-shadow(0 0 8px rgba(0,224,164,.5))
drop-shadow(0 0 18px rgba(0,184,148,.35));
}

@media (min-width: 768px) {
  .nav-desktop-links {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
  }
}

nav.fixed.top-0.z-50{
  border-bottom-left-radius: 28px;
  border-bottom-right-radius: 28px;
}

body:not(.apanel-shell) > #site-content > nav.fixed.top-0.z-50 {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate3d(0, 0, 0) !important;
}

@media (max-width: 767px) {
  nav.fixed.top-0.z-50{
    border-bottom-left-radius: 28px;
    border-bottom-right-radius: 28px;
  }
}

/* ===== NAVBAR LINK UNDERLINE (GLYX STYLE) ===== */

.nav-link {
  position: relative;
  display: inline-block;
  transition: color .35s ease, text-shadow .35s ease;
}

/* underline base (center start) */
.nav-link::after {
  content: "";
  position: absolute;

  left: 50%;
  bottom: -4px;

  width: 0%;
  height: 2px;

  transform: translateX(-50%);

  background: linear-gradient(
    90deg,
    #9ca3af,
    #00e0a4
  );

  transition: width .35s ease;
}

/* hover */
.nav-link:hover {
  color: #00e0a4;

  text-shadow:
    0 0 6px rgba(0,224,164,.5),
    0 0 14px rgba(0,224,164,.25);
}

/* slide from center */
.nav-link:hover::after {
  width: 100%;

background: linear-gradient(
    90deg,
    #00e0a4,
    #a3f3dd,
    #00e0a4
  );

  box-shadow:
    0 0 6px rgba(0, 224, 164, 0.5),
    0 0 12px rgba(0,224,164,.3);
}

/* smooth language switch */

html.lang-transition *{
transition:
color .15s ease,
background-color .15s ease,
border-color .15s ease,
fill .15s ease;
}

/* unix signature */

.unix-sign{
display:inline-block;
margin-top:6px;

font-weight:500;
letter-spacing:.08em;
font-size:.95em;

background:linear-gradient(90deg,#00e0a4,#00b894);
-webkit-background-clip:text;
background-clip:text;
color:transparent;

text-shadow:0 0 10px rgba(0,224,164,.25);
}

/* ===== FOOTER SOCIAL ICONS CLEAN ===== */

.footer-social{
display:inline-flex;
align-items:center;
justify-content:center;

width:18px;
height:18px;

transition:all .2s ease;
}

.footer-social img{
width:18px;
height:18px;

/* taki sam kolor jak tekst footer */
opacity:.65;

filter:invert(70%) sepia(8%) saturate(200%) hue-rotate(180deg);

transition:all .2s ease;
}

/* hover */

.footer-social:hover img{
opacity:1;

filter:
invert(100%)
drop-shadow(0 0 6px rgba(0,224,164,.35));
}

.cmd-box {
  position: relative;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 10px 68px 10px 16px;
  font-size: 12px;
  line-height: 1.35;
  font-family: monospace;
  display: block;
  background: rgba(255, 255, 255, 0.045);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    0 18px 40px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition:
    transform .24s ease,
    border-color .24s ease,
    box-shadow .24s ease,
    background .24s ease,
    opacity .24s ease;
}

/* kolory */
.cmd {
  color: #00e0a4;
  font-weight: 500;
}

.cmd-required {
  color: #ffffff;
}

.cmd-optional {
  color: #9ca3af;
}

.cmd-box:hover {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.07);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
    0 18px 40px rgba(0, 0, 0, 0.32);
  transform: translateY(-2px);
}

.command-meta-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 6px;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 9999px;
  box-shadow: none;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.command-meta-badge-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(255,255,255,.96);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: none;
  line-height: 1;
}

.command-meta-badge-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
  text-align: center;
}

.command-meta-badge.is-single {
  justify-content: center;
}

@media (max-width: 640px) {
  .command-meta-badge {
    gap: 5px;
    min-height: 26px;
    padding: 4px 9px;
  }

  .command-meta-badge-label {
    min-height: 100%;
    padding: 0;
    font-size: 7px;
  }

  .command-meta-badge-value {
    font-size: 9px;
  }
}

.cmd-legend {
  position: relative;
  display: inline-block;
  margin-left: 16px;
  z-index: 20;
}

.cmd-legend-header {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 32px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  font-size: 14px;
  font-weight: 500;
  color: #9ca3af;
  cursor: pointer;
  transition:
    opacity .25s ease,
    color .25s ease,
    transform .25s ease;
}

.cmd-legend-header:hover,
.cmd-legend.active .cmd-legend-header {
  color: rgba(255,255,255,.92);
  transform: translateY(-1px);
}

.cmd-legend-arrow {
  width: 12px;
  height: 12px;
  color: rgba(255,255,255,.62);
  transition: transform .28s ease, color .25s ease;
}

.cmd-legend-header:hover .cmd-legend-arrow,
.cmd-legend.active .cmd-legend-arrow {
  color: rgba(255,255,255,.92);
}

.cmd-legend-content {
  position: absolute;
  top: 140%;
  left: 8px;
  width: 280px;
  padding: 14px 16px;
  background: #1a222c;
  border: 1px solid #2a3542;
  border-radius: 12px;
  box-shadow:
    0 20px 50px rgba(0,0,0,.65),
    0 0 22px rgba(0,224,164,.12),
    inset 0 1px 0 rgba(255,255,255,0.03);
  backdrop-filter: blur(18px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 30;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-10px) scale(0.94);
  transform-origin: top left;
  transition:
    opacity .22s ease,
    transform .28s cubic-bezier(.22, 1, .36, 1),
    visibility 0s linear .28s;
}

.cmd-legend.active .cmd-legend-content {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}

.cmd-legend.active .cmd-legend-arrow {
  transform: rotate(180deg);
}

.cmd-legend-item {
  display: flex;
  align-items: center;
  gap: 10px;

  font-size: 13px;
  line-height: 1.5;
}

.cmd-legend-text {
  color: #9ca3af;
}

.cmd-box-mini {
  background: #2b2d31;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 12px;
}

[data-category] > .flex.items-center.mb-8 {
  position: relative;
  padding: 14px 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid rgba(148, 163, 184, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03),
    0 12px 28px rgba(0,0,0,0.12);
}

.category-badge {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    0 10px 22px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.18);
}

.category-badge::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.18), transparent 46%);
  pointer-events: none;
}

[data-category] > .flex.items-center.mb-8 > .h-px {
  height: 2px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(0,224,164,0.95), rgba(45,212,191,0.48) 42%, rgba(16,24,32,0));
  box-shadow:
    0 0 18px rgba(0,224,164,0.18),
    0 0 30px rgba(0,224,164,0.08);
}

#panel-role span,
#mobile-panel-role span{
text-shadow: 0 0 8px rgba(0,224,164,.25);
}

.role-dev { color: #ffffff; }
.role-friend { color: #3dcf2a; }
.role-partner { color: #3b82f6; }
.role-bug-hunter { color: #ffd56d; }
.role-tester { color: #a855f7; }
.role-premium { color: #facc15; }
.role-supporter { color: #fa9616; }
.role-basic { color: #9ca3af; }

.role-dev img {
  filter: drop-shadow(0 0 6px #ffffff);
}

.role-friend img {
  filter: drop-shadow(0 0 6px #3dcf2a);
}

.role-partner img {
  filter: drop-shadow(0 0 6px #3b82f6);
}

.role-tester img {
  filter: drop-shadow(0 0 6px #a855f7);
}

.role-premium img {
  filter: drop-shadow(0 0 6px #facc15);
}

.role-supporter img {
  filter: drop-shadow(0 0 6px #fa9616);
}

.role-basic img {
  filter: drop-shadow(0 0 6px #9ca3af);
}

/* ===== PREMIUM CARD ===== */

.premium-card{
background:rgba(15,23,32,.7);
border:1px solid rgba(255,255,255,.08);

padding:24px;
border-radius:16px;

text-align:center;

transition:.3s ease;
}

.premium-card h3{
font-weight:600;
margin-bottom:6px;
}

.premium-card p{
font-size:14px;
color:#9ca3af;
}

.premium-card:hover{
transform:translateY(-6px);

border-color:#00e0a4;

box-shadow:
0 0 20px rgba(0,224,164,.2),
0 0 40px rgba(0,224,164,.1);
}

/* ===== PRICE BOX ===== */

.premium-price-box{
position:relative;

background:rgba(15,23,32,.75);
border:1px solid rgba(0,224,164,.25);

padding:40px 30px;
border-radius:20px;

width:320px;

text-align:center;

box-shadow:
0 0 30px rgba(0,224,164,.15),
inset 0 0 25px rgba(0,224,164,.05);
}

/* badge */

.premium-badge{
position:absolute;
top:-14px;
left:50%;
transform:translateX(-50%);

background:#facc15;
color:black;

font-size:12px;
font-weight:600;

padding:6px 12px;
border-radius:999px;

box-shadow:0 0 12px rgba(250,204,21,.5);
}

/* old price */

.premium-old-price{
text-decoration:line-through;
color:#6b7280;
font-size:14px;
}

/* new price */

.premium-price{
font-size:36px;
font-weight:700;

background:linear-gradient(90deg,#00e0a4,#00b894);
background-clip: text;
-webkit-background-clip: text;
color:transparent;

text-shadow:0 0 10px rgba(0,224,164,.4);
}

.premium-sub{
font-size:14px;
color:#9ca3af;
}

/* ===== BUTTON ===== */

.premium-buy-btn{
display:flex;
align-items:center;
justify-content:center;
gap:8px;

width:100%;
padding:14px 20px;

border-radius:12px;

font-weight:600;
font-size:15px;

background:linear-gradient(135deg,#00e0a4,#00b894);
color:#04241c;

opacity:.6;
cursor:not-allowed;

position:relative;
overflow:hidden;

transition:.25s ease;

box-shadow:
0 0 10px rgba(0,224,164,.25),
0 0 25px rgba(0,224,164,.1);
}

.premium-buy-btn::before{
content:"";
position:absolute;
inset:0;

background:linear-gradient(
120deg,
transparent,
rgba(255,255,255,.25),
transparent
);

transform:translateX(-120%);
}

.premium-buy-btn:hover::before{
transform:translateX(120%);
transition:.6s;
}

.premium-buy-btn::after{
content:"🔒";
position:absolute;
right:12px;
font-size:14px;
opacity:.7;
}

.premium-coming{
font-size:12px;
color:#064e3b;
opacity:.8;
}

.premium-hero-img{
filter:
drop-shadow(0 0 10px rgba(0,224,164,.5))
drop-shadow(0 0 25px rgba(0,224,164,.25));

animation: premiumFloat 4s ease-in-out infinite;
transition: .3s ease;
}

.premium-hero-img:hover{
transform: scale(1.08) rotate(-3deg);

filter:
drop-shadow(0 0 14px rgba(0,224,164,.8))
drop-shadow(0 0 40px rgba(0,224,164,.45));
}

@keyframes premiumFloat{
0%,100%{ transform: translateY(0); }
50%{ transform: translateY(-8px); }
}

.premium-scroll-btn{
display:flex;
align-items:center;
gap:8px;

padding:10px 18px;

border-radius:999px;

font-size:14px;
font-weight:500;

color:#00e0a4;

border:1px solid rgba(0,224,164,.35);

background:rgba(0,224,164,.08);

transition:.25s ease;
}

.premium-scroll-btn:hover{
transform:translateY(-2px);

box-shadow:
0 0 12px rgba(0,224,164,.35),
0 0 25px rgba(0,224,164,.15);

background:rgba(0,224,164,.12);
}

/* strzałka */

.premium-scroll-arrow{
transition:.25s ease;
}

.premium-scroll-btn:hover .premium-scroll-arrow{
transform:translateY(4px);
}

/* subtle bounce anim */

.premium-scroll-arrow{
animation: premiumArrowBounce 1.6s infinite;
}

@keyframes premiumArrowBounce{
0%,100%{ transform:translateY(0); }
50%{ transform:translateY(4px); }
}

.panel-layout {
  display: flex;
  min-height: 100vh;
}

.panel-sidebar {
  width: 220px;
  background: rgba(15,23,32,.85);
  border-right: 1px solid rgba(0,224,164,.2);
  padding: 20px;

  display: flex;
  flex-direction: column;
  gap: 10px;
}

.panel-sidebar button {
  padding: 10px;
  border-radius: 8px;
  background: transparent;
  color: #9ca3af;
  transition: .2s;
}

.panel-sidebar button:hover {
  background: rgba(0,224,164,.08);
  color: #00e0a4;
}

.panel-content {
  flex: 1;
  padding: 30px;
}

.panel-tab.hidden {
  display: none;
}

/* stats */
.stats-grid {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

.stat-box {
  background: rgba(15,23,32,.7);
  border: 1px solid rgba(0,224,164,.2);
  padding: 20px;
  border-radius: 12px;
  width: 150px;
  text-align: center;
}

/* ===== BURGER ===== */

.burger {
  width: 26px;
  height: 20px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  cursor: pointer;
  z-index: 100;
}

.burger span {
  display: block;
  height: 2px;
  width: 100%;

  background: #9ca3af;
  border-radius: 2px;

  transition: all .35s cubic-bezier(.4,.2,.2,1);
}

/* HOVER */
.burger:hover span {
  background: #00e0a4;
  box-shadow: 0 0 6px rgba(0,224,164,.6);
}

/* ACTIVE (X) */
.burger.active span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

.burger.active span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.burger.active span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* ===== PING STATUS ===== */

#ping-dot {
  background: #00e0a4;
  box-shadow: 0 0 6px rgba(0,224,164,.6);
  transition: .3s ease;
}

#ping-anim {
  background: #00e0a4;
  animation: pingPulse 1.5s infinite;
}

/* 🔴 OFFLINE */
.ping-offline #ping-dot {
  background: #ef4444;
  box-shadow: 0 0 6px rgba(239,68,68,.6);
}

.ping-offline #ping-anim {
  display: none;
}

/* 🟢 ONLINE */
.ping-online #ping-dot {
  background: #00e0a4;
}

.ping-online #ping-anim {
  display: block;
}

.ping-maintenance #ping-dot {
  background: #facc15;
  box-shadow: 0 0 9px rgba(250, 204, 21, .55);
}

.ping-maintenance #ping-anim {
  display: block;
  background: #facc15;
}

.stat-bot-status {
  font-weight: 800;
  letter-spacing: .01em;
  transition: color .22s ease, opacity .22s ease;
}

.stat-bot-status-since {
  margin-left: .15rem;
  font-weight: 700;
  transition: opacity .22s ease;
}

#ping-box.ping-online .stat-bot-status {
  color: #00e0a4;
}

#ping-box.ping-maintenance .stat-bot-status {
  color: #facc15;
}

#ping-box.ping-offline .stat-bot-status {
  color: #ef4444;
}

#ping-box.loading {
  opacity: 0.6;
  transition: opacity .2s ease;
}

/* animacja */
@keyframes pingPulse {
  0% {
    transform: scale(1);
    opacity: .7;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

/* ===== AVATAR TRIGGER CLEAN ===== */

.avatar-trigger {
  all: unset;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;
  position: relative;
  z-index: 50;
  transition: transform .22s cubic-bezier(.2,.8,.2,1);
  -webkit-tap-highlight-color: transparent;
}

.avatar-trigger::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: inherit;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.18), transparent 42%),
    radial-gradient(circle at center, rgba(0,224,164,.24), transparent 68%);
  opacity: 0;
  transform: scale(.78);
  filter: blur(7px);
  transition: opacity .24s ease, transform .24s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}

.avatar-trigger::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 1px solid rgba(0,224,164,.0);
  box-shadow: 0 0 0 0 rgba(0,224,164,0);
  opacity: 0;
  transform: scale(.92);
  transition: opacity .22s ease, transform .22s cubic-bezier(.2,.8,.2,1), border-color .22s ease, box-shadow .22s ease;
  pointer-events: none;
}

.avatar-img {
  width: 44px;
  height: 44px;

  border-radius: 50%;
  display: block;
  object-fit: cover;

  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, filter .22s ease;
  will-change: transform;
}

.avatar-trigger:hover,
.avatar-trigger:focus-visible,
.avatar-trigger[aria-expanded="true"] {
  transform: translateY(-1px);
}

.avatar-trigger:hover::before,
.avatar-trigger:focus-visible::before,
.avatar-trigger[aria-expanded="true"]::before {
  opacity: 1;
  transform: scale(1);
}

.avatar-trigger:hover::after,
.avatar-trigger:focus-visible::after,
.avatar-trigger[aria-expanded="true"]::after {
  opacity: 1;
  transform: scale(1);
  border-color: rgba(0,224,164,.28);
  box-shadow: 0 0 18px rgba(0,224,164,.16);
}

.avatar-trigger:hover .avatar-img,
.avatar-trigger:focus-visible .avatar-img,
.avatar-trigger[aria-expanded="true"] .avatar-img {
  transform: scale(1.045) rotate(-1deg);
  box-shadow: 0 8px 22px rgba(0,0,0,.22);
  filter: saturate(1.08) brightness(1.05);
}

.avatar-trigger:active {
  transform: translateY(-1px);
}

.avatar-trigger:active .avatar-img {
  transform: scale(1.025) rotate(0deg);
  filter: saturate(1.12) brightness(1.08);
}

.avatar-trigger:active::before {
  opacity: 1;
  transform: scale(1.12);
  filter: blur(10px);
}

.avatar-trigger:active::after {
  opacity: 1;
  transform: scale(1.08);
  border-color: rgba(0,224,164,.36);
  box-shadow: 0 0 24px rgba(0,224,164,.22);
}

@media (prefers-reduced-motion: reduce) {
  .avatar-trigger,
  .avatar-trigger::before,
  .avatar-trigger::after,
  .avatar-img {
    transition: none;
  }

  .avatar-trigger:hover,
  .avatar-trigger:focus-visible,
  .avatar-trigger:active,
  .avatar-trigger:hover .avatar-img,
  .avatar-trigger:focus-visible .avatar-img,
  .avatar-trigger[aria-expanded="true"],
  .avatar-trigger[aria-expanded="true"] .avatar-img,
  .avatar-trigger:active .avatar-img {
    transform: none;
  }
}

.buycoffee-mobile {
    width: 160px;
    height: auto;
    opacity: 0.95;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.buycoffee-mobile:hover {
    transform: scale(1.05);
    opacity: 1;
}

.coffee-float {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 9999;

    opacity: 0;
    transform: translateY(30px);
    transition: all 0.3s ease;
}

/* pokazanie */
.coffee-float.show {
    opacity: 1;
    transform: translateY(0);
}

/* NIE zmieniamy wyglądu — tylko lekki hover */
.coffee-float img {
    width: 200px;
    height: auto;
    transition: transform 0.2s ease;
}

.coffee-float:hover img {
    transform: scale(1.05);
}

/* mobile off */
@media (max-width: 768px) {
    .coffee-float {
        display: none;
    }
}

.footer-coffee-btn {
    width: 180px;
    height: auto;
    opacity: 0.95;
    transition: all 0.2s ease;
}

.footer-coffee-btn:hover {
    transform: scale(1.05);
    opacity: 1;
}

/* desktop większy */
@media (min-width: 768px) {
    .footer-coffee-btn {
        width: 220px;
    }
}

.footer-coffee-center-btn {
    width: 140px;
    height: auto;
    opacity: 0.95;
    transition: all 0.2s ease;
}

.footer-coffee-center-btn:hover {
    transform: scale(1.05);
    opacity: 1;
}

/* ===== Unified Maintenance Screen (mobile first) ===== */
#maintenance-overlay.hidden,
.maintenance-overlay.hidden {
  display: none !important;
}

#maintenance-overlay.flex,
.maintenance-overlay.flex {
  display: flex !important;
}

.maintenance-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  padding: max(18px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom));
  overflow-x: hidden;
  overflow-y: auto;
  text-align: center;
  color: #f5fff9;
  background:
    radial-gradient(circle at 18% 8%, rgba(0, 224, 164, .18), transparent 24rem),
    radial-gradient(circle at 88% 18%, rgba(20, 55, 86, .58), transparent 24rem),
    radial-gradient(circle at 50% 100%, rgba(0, 184, 148, .11), transparent 22rem),
    linear-gradient(180deg, #071016 0%, #081119 52%, #05090f 100%);
}

.maintenance-ambient {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.maintenance-orb {
  position: absolute;
  display: block;
  border-radius: 999px;
  filter: blur(42px);
  opacity: .42;
  transform: translateZ(0);
  animation: maintenanceOrbFloat 8s ease-in-out infinite alternate;
}

.maintenance-orb-a {
  width: 190px;
  height: 190px;
  top: 8%;
  left: -72px;
  background: rgba(0, 224, 164, .42);
}

.maintenance-orb-b {
  width: 220px;
  height: 220px;
  right: -96px;
  top: 18%;
  background: rgba(14, 46, 74, .8);
  animation-delay: -2.4s;
}

.maintenance-orb-c {
  width: 170px;
  height: 170px;
  left: 30%;
  bottom: -86px;
  background: rgba(0, 184, 148, .28);
  animation-delay: -4.6s;
}

.maintenance-shell {
  position: relative;
  width: min(100%, 430px);
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(171, 255, 230, .1);
  background:
    linear-gradient(145deg, rgba(21, 35, 45, .88), rgba(8, 14, 21, .94)),
    rgba(8, 14, 21, .92);
  box-shadow:
    0 22px 65px rgba(0, 0, 0, .5),
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 0 42px rgba(0, 224, 164, .08);
  backdrop-filter: blur(22px) saturate(128%);
  -webkit-backdrop-filter: blur(22px) saturate(128%);
  animation: maintenanceEnter .42s cubic-bezier(.2, .9, .22, 1) both;
}

.maintenance-card-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, rgba(0, 224, 164, .16), transparent 27%, rgba(20, 55, 86, .22) 78%, transparent),
    radial-gradient(circle at 50% -10%, rgba(126, 246, 215, .1), transparent 42%);
}

.maintenance-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px 18px;
}

.maintenance-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  max-width: 100%;
  margin-bottom: 18px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0, 224, 164, .22);
  background: rgba(0, 224, 164, .08);
  color: #a9f8e3;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .13em;
  line-height: 1.25;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.maintenance-badge-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #00e0a4;
  box-shadow: 0 0 16px rgba(0, 224, 164, .76);
  animation: maintenancePulse 1.8s ease-in-out infinite;
}

.maintenance-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 18px;
}

.maintenance-brand-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 0 20px rgba(0, 224, 164, .32));
}

.maintenance-brand-name {
  color: #dbfff5;
  font-size: clamp(30px, 11vw, 44px);
  font-weight: 900;
  letter-spacing: -.05em;
  text-shadow: 0 0 28px rgba(0, 224, 164, .22);
}

.maintenance-title {
  max-width: 12ch;
  margin: 0 auto 12px;
  color: #f8fffc;
  font-size: clamp(31px, 9vw, 45px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -.065em;
  padding-bottom: .04em;
  text-wrap: balance;
}

.maintenance-copy {
  max-width: 34rem;
  margin: 0 auto 20px;
  color: #94a7b4;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.65;
  text-wrap: pretty;
}

.maintenance-status-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  width: 100%;
  margin: 0 0 16px;
}

.maintenance-status-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 12px 13px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .075);
  background: rgba(255, 255, 255, .04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

.maintenance-status-label {
  min-width: 0;
  color: #6f8190;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .11em;
  line-height: 1.25;
  text-align: left;
  text-transform: uppercase;
}

.maintenance-status-value {
  min-width: 0;
  color: #ddfff6;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
  text-align: right;
}

.maintenance-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  width: 100%;
  margin: 0 0 13px;
}

.maintenance-btn-home,
.maintenance-btn-secondary,
.maintenance-btn-discord {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  width: 100%;
  padding: 12px 16px;
  overflow: hidden;
  border-radius: 17px;
  border: 1px solid rgba(255, 255, 255, .1);
  color: #e7fff8;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
}

.maintenance-btn-home {
  border-color: rgba(0, 224, 164, .28);
  background: linear-gradient(135deg, rgba(0, 224, 164, .18), rgba(255, 255, 255, .035));
  box-shadow: 0 12px 34px rgba(0, 224, 164, .08);
}

.maintenance-btn-secondary {
  background: rgba(255, 255, 255, .045);
  color: #a8b7c4;
}

.maintenance-btn-discord {
  border-color: rgba(88, 101, 242, .38);
  background: linear-gradient(135deg, rgba(88, 101, 242, .94), rgba(70, 82, 196, .9));
  color: #fff;
}

.maintenance-btn-home:hover,
.maintenance-btn-secondary:hover,
.maintenance-btn-discord:hover {
  transform: translateY(-2px);
}

.maintenance-btn-home:hover {
  border-color: rgba(0, 224, 164, .42);
  box-shadow: 0 16px 42px rgba(0, 224, 164, .14);
}

.maintenance-btn-secondary:hover {
  border-color: rgba(148, 163, 184, .22);
  background: rgba(255, 255, 255, .065);
}

.maintenance-btn-discord:hover {
  box-shadow: 0 16px 42px rgba(88, 101, 242, .28);
}

.maintenance-btn-home-icon,
.maintenance-btn-discord .discord-btn-icon,
.discord-btn-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.maintenance-btn-home-icon {
  filter: brightness(0) saturate(100%) invert(80%) sepia(16%) saturate(1112%) hue-rotate(111deg) brightness(101%) contrast(96%);
}

.maintenance-login-wrap {
  width: 100%;
  padding-top: 13px;
  border-top: 1px solid rgba(255, 255, 255, .075);
}

@keyframes maintenanceEnter {
  from {
    opacity: 0;
    transform: translateY(16px) scale(.975);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes maintenancePulse {
  0%, 100% {
    opacity: .75;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.36);
  }
}

@keyframes maintenanceOrbFloat {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(18px, -14px, 0) scale(1.08);
  }
}

@media (min-width: 520px) {
  .maintenance-overlay {
    padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
  }

  .maintenance-shell {
    width: min(100%, 620px);
    border-radius: 32px;
  }

  .maintenance-content {
    padding: 34px 28px 26px;
  }

  .maintenance-title {
    max-width: 14ch;
  }

  .maintenance-copy {
    font-size: 15px;
  }
}

@media (min-width: 760px) {
  .maintenance-shell {
    width: min(100%, 800px);
  }

  .maintenance-content {
    padding: 44px 42px 34px;
  }

  .maintenance-badge {
    margin-bottom: 22px;
    font-size: 11px;
  }

  .maintenance-brand-logo {
    width: 58px;
    height: 58px;
  }

  .maintenance-title {
    max-width: 16ch;
    font-size: clamp(46px, 6vw, 68px);
  }

  .maintenance-copy {
    margin-bottom: 28px;
    font-size: 16px;
  }

  .maintenance-status-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 20px;
  }

  .maintenance-status-card {
    display: block;
    padding: 16px 14px;
    text-align: left;
  }

  .maintenance-status-value {
    display: block;
    margin-top: 8px;
    text-align: left;
    font-size: 14px;
  }

  .maintenance-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .maintenance-login-wrap {
    max-width: 390px;
    margin: 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .maintenance-shell,
  .maintenance-orb,
  .maintenance-badge-dot {
    animation: none !important;
  }

  .maintenance-btn-home,
  .maintenance-btn-secondary,
  .maintenance-btn-discord {
    transition: none !important;
  }
}

/* Maintenance without status tiles */
.maintenance-copy {
  margin-bottom: 22px;
}

.maintenance-actions {
  margin-top: 0;
}

@media (min-width: 760px) {
  .maintenance-copy {
    margin-bottom: 30px;
  }
}

/* Maintenance strict unification across public pages and panels */
#maintenance-overlay.maintenance-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  padding: max(18px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom));
  overflow-x: hidden;
  overflow-y: auto;
  text-align: center;
  color: #f5fff9;
  background:
    radial-gradient(circle at 18% 8%, rgba(0, 224, 164, .18), transparent 24rem),
    radial-gradient(circle at 88% 18%, rgba(20, 55, 86, .58), transparent 24rem),
    radial-gradient(circle at 50% 100%, rgba(0, 184, 148, .11), transparent 22rem),
    linear-gradient(180deg, #071016 0%, #081119 52%, #05090f 100%);
}

#maintenance-overlay .maintenance-shell {
  position: relative;
  width: min(100%, 430px);
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(171, 255, 230, .1);
  background:
    linear-gradient(145deg, rgba(21, 35, 45, .88), rgba(8, 14, 21, .94)),
    rgba(8, 14, 21, .92);
  box-shadow:
    0 22px 65px rgba(0, 0, 0, .5),
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 0 42px rgba(0, 224, 164, .08);
  backdrop-filter: blur(22px) saturate(128%);
  -webkit-backdrop-filter: blur(22px) saturate(128%);
  animation: maintenanceEnter .42s cubic-bezier(.2, .9, .22, 1) both;
}

#maintenance-overlay .maintenance-shell::before {
  content: none;
}

#maintenance-overlay .maintenance-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px 18px;
}

#maintenance-overlay .maintenance-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  max-width: 100%;
  margin: 0 0 18px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0, 224, 164, .22);
  background: rgba(0, 224, 164, .08);
  color: #a9f8e3;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .13em;
  line-height: 1.25;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

#maintenance-overlay .maintenance-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 18px;
}

#maintenance-overlay .maintenance-brand-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 0 20px rgba(0, 224, 164, .32));
}

#maintenance-overlay .maintenance-brand-name {
  color: #dbfff5;
  font-size: clamp(30px, 11vw, 44px);
  font-weight: 900;
  letter-spacing: -.05em;
  text-shadow: 0 0 28px rgba(0, 224, 164, .22);
}

#maintenance-overlay .maintenance-title {
  max-width: 12ch;
  margin: 0 auto 12px;
  color: #f8fffc;
  font-size: clamp(31px, 9vw, 45px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -.065em;
  padding-bottom: .04em;
  text-wrap: balance;
}

#maintenance-overlay .maintenance-copy {
  max-width: 34rem;
  margin: 0 auto 22px;
  color: #94a7b4;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.65;
  text-wrap: pretty;
}

#maintenance-overlay .maintenance-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  width: 100%;
  margin: 0 0 13px;
}

#maintenance-overlay .maintenance-btn-home,
#maintenance-overlay .maintenance-btn-secondary,
#maintenance-overlay .maintenance-btn-discord {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  width: 100%;
  padding: 12px 16px;
  overflow: hidden;
  border-radius: 17px;
  border: 1px solid rgba(255, 255, 255, .1);
  color: #e7fff8;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
}

#maintenance-overlay .maintenance-btn-home {
  border-color: rgba(0, 224, 164, .28);
  background: linear-gradient(135deg, rgba(0, 224, 164, .18), rgba(255, 255, 255, .035));
  box-shadow: 0 12px 34px rgba(0, 224, 164, .08);
}

#maintenance-overlay .maintenance-btn-secondary {
  background: rgba(255, 255, 255, .045);
  color: #a8b7c4;
}

#maintenance-overlay .maintenance-btn-discord {
  border-color: rgba(88, 101, 242, .38);
  background: linear-gradient(135deg, rgba(88, 101, 242, .94), rgba(70, 82, 196, .9));
  color: #fff;
}

#maintenance-overlay .maintenance-login-wrap {
  width: 100%;
  max-width: none;
  margin: 0;
  padding-top: 13px;
  border-top: 1px solid rgba(255, 255, 255, .075);
}

#maintenance-overlay .maintenance-status-grid {
  display: none !important;
}

@media (min-width: 520px) {
  #maintenance-overlay.maintenance-overlay {
    padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
  }

  #maintenance-overlay .maintenance-shell {
    width: min(100%, 620px);
    border-radius: 32px;
  }

  #maintenance-overlay .maintenance-content {
    padding: 34px 28px 26px;
  }

  #maintenance-overlay .maintenance-title {
    max-width: 14ch;
  }

  #maintenance-overlay .maintenance-copy {
    font-size: 15px;
  }
}

@media (min-width: 760px) {
  #maintenance-overlay .maintenance-shell {
    width: min(100%, 800px);
  }

  #maintenance-overlay .maintenance-content {
    padding: 44px 42px 34px;
  }

  #maintenance-overlay .maintenance-badge {
    margin-bottom: 22px;
    font-size: 11px;
  }

  #maintenance-overlay .maintenance-brand-logo {
    width: 58px;
    height: 58px;
  }

  #maintenance-overlay .maintenance-title {
    max-width: 16ch;
    font-size: clamp(46px, 6vw, 68px);
  }

  #maintenance-overlay .maintenance-copy {
    margin-bottom: 30px;
    font-size: 16px;
  }

  #maintenance-overlay .maintenance-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  #maintenance-overlay .maintenance-login-wrap {
    max-width: 390px;
    margin: 0 auto;
  }
}


.unix-command-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 23px;
  margin: 0 2px;
  padding: 2px 8px 3px;
  border: 1px solid rgba(0, 224, 164, .22);
  border-radius: 999px;
  background: rgba(0, 224, 164, .09);
  color: #92f5dd;
  font: inherit;
  font-size: .92em;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  vertical-align: baseline;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, text-shadow .2s ease, transform .2s ease;
}

.unix-command-copy:hover,
.unix-command-copy:focus-visible {
  color: #e8fff8;
  background: rgba(0, 224, 164, .16);
  border-color: rgba(0, 224, 164, .38);
  box-shadow: 0 0 18px rgba(0, 224, 164, .16), inset 0 1px 0 rgba(255,255,255,.12);
  outline: none;
  transform: translateY(-1px);
}

.unix-command-copy.is-copied {
  color: #f5fffc;
  border-color: rgba(0, 224, 164, .62);
  background: rgba(0, 224, 164, .2);
  text-shadow: 0 0 12px rgba(0, 224, 164, .9), 0 0 26px rgba(0, 224, 164, .46);
  box-shadow: 0 0 24px rgba(0, 224, 164, .24), inset 0 1px 0 rgba(255,255,255,.14);
  animation: unixCommandCopied .82s cubic-bezier(.2, .9, .2, 1) both;
}

.unix-command-toast {
  pointer-events: none;
}

@keyframes unixCommandCopied {
  0% { transform: translateY(0) scale(1); }
  38% { transform: translateY(-1px) scale(1.045); }
  100% { transform: translateY(0) scale(1); }
}


/* Global user name overflow guard */
#panel-username,
#mobile-panel-username,
#username,
.user-panel-name,
.user-name,
.username,
[data-user-name] {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}