/* Gaming dashboard typography (UserCP + scoped) */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Orbitron:wght@500;600;700&display=swap");

/* ==========================================================================

   THEME TOKENS

   ========================================================================== */

   :root {
    /* surfaces */
    --bg-0: #05060b;
    --bg-1: #0e101a;
    --bg-2: #171a26;

    /* text */
    --text-1: #f5f3ff;  /* headings */
    --text-2: #d2d6e3;  /* body */
    --text-3: #8d91a6;  /* muted */

    /* accent – single gold/amber */
    --accent: hsl(38 92% 60%);
    --accent-2: color-mix(in srgb, var(--accent) 70%, #ffffff 30%);
    /* приглушен accent за мета/чипове – не натрапчиво */
    --accent-muted: color-mix(in srgb, var(--accent) 48%, var(--text-3) 52%);

    /* borders & shadows */
    --border: rgba(255, 255, 255, 0.09);
    --shadow-1: 0 18px 40px rgba(0, 0, 0, 0.55);
    --shadow-2: 0 30px 90px rgba(0, 0, 0, 0.78);

    /* radii */
    --radius: 16px;
    --radius-lg: 20px;

    /* spacing scale */
    --space-1: clamp(4px, 0.35vw, 6px);
    --space-2: clamp(8px, 0.6vw, 10px);
    --space-3: clamp(12px, 0.9vw, 16px);
    --space-4: clamp(16px, 1.2vw, 20px);
    --space-5: clamp(24px, 1.8vw, 28px);
    --space-6: clamp(32px, 2.4vw, 40px);

    /* legacy aliases / mapping */
    --bg-dim: color-mix(in srgb, var(--bg-0) 78%, #050308 22%);
    --card: color-mix(in srgb, var(--bg-1) 85%, #1d1931 15%);
    --card-2: var(--bg-2);
    --stroke: var(--border);
    --glass: rgba(255, 255, 255, 0.04);

    /* text legacy */
    --text: var(--text-2);
    --muted: var(--text-3);
    --success: #44d28a;

    /* secondary badge roles (HOT ≠ VIP, same premium style, different color) */
    --badge-hot: #dc2626;        /* crimson main */
    --badge-hot-dark: #7f1d1d;
    --badge-hot-light: #fca5a5;
    --badge-hot-glow: rgba(220, 38, 38, 0.5);
    --badge-hot-text: #1a0a0a;
    /* VIP – premium gold ($20), exclusive look */
    --badge-vip: #E6B65C;        /* gold main */
    --badge-vip-dark: #B8892E;
    --badge-vip-light: #F5D98B;
    --badge-vip-glow: rgba(230, 182, 92, 0.45);
    --badge-vip-text: #1A1408;
    /* soft gold for rate/season meta & chips (not too bright) */
    --accent-muted: #f0d19a;

    /* layout */
    --gap: var(--space-4);

    /* shadows & glow policy (glow only opt-in) */
    --shadow: var(--shadow-1);
    --glow: 0 0 0 0 rgba(0, 0, 0, 0); /* reserved – use only for HOT/VIP/primary CTA */

    /* primary CTA gradient (gold only) */
    --button-gradient: linear-gradient(
      135deg,
      var(--accent) 0%,
      color-mix(in srgb, var(--accent) 80%, #101320 20%) 55%,
      color-mix(in srgb, var(--accent) 60%, #05060b 40%) 100%
    );
    --button-gradient-hover: linear-gradient(
      135deg,
      color-mix(in srgb, var(--accent) 92%, #ffffff 8%) 0%,
      var(--accent) 50%,
      color-mix(in srgb, var(--accent) 65%, #020308 35%) 100%
    );
  }
  
  a {
    text-decoration: none;
  }
  
  /* ==========================================================================
  
     BASE
  
     ========================================================================== */
  
  * {
    box-sizing: border-box;
  }
  
  html,
  body {
    margin: 0;
    padding: 0;

    color: var(--text-2);

    font-family: Inter, system-ui, Segoe UI, Roboto, Arial, sans-serif;
    font-size: clamp(14px, 0.85rem + 0.15vw, 16px);
    line-height: 1.5;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    background-color: var(--bg-0);

    /* Custom cursor */
    cursor: url('normal cursor.cur'), auto;
  }

  :where(a, button, input, select, textarea, [role="button"]) {
    outline: none;
  }

  :where(a, button, input, select, textarea, [role="button"]):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  
  /* Custom cursor for all interactive elements */
  a, button, input[type="submit"], input[type="button"], 
  select, [role="button"], .clickable,
  .ad, .avatar, .login-btn, .brand,
  .ads-btn, .card, .server-card,
  [onclick], [data-clickable] {
    cursor: url('link select.cur'), pointer !important;
  }
  
  /* background */
  
  body {
    background:
      linear-gradient(0deg, var(--bg-dim), var(--bg-dim)),
      url("images/background.jpg") center center / cover no-repeat fixed;
  }
  
  .bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(1200px 600px at 80% -10%, rgba(255, 191, 73, 0.12), transparent 65%),
      radial-gradient(900px 420px at 10% 110%, rgba(82, 109, 255, 0.16), transparent 65%),
      linear-gradient(180deg, rgba(3, 4, 10, 0.9), rgba(3, 4, 10, 0.98));
  }
  
  #particles {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
  }
  
  .page-header,
  .top-ads,
  .grid,
  .footer {
    position: relative;
    z-index: 2;
  }
  
  .muted {
    color: var(--muted);
  }
  
  .card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--card), var(--card-2));
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
    backdrop-filter: saturate(130%) blur(10px);
    -webkit-backdrop-filter: saturate(130%) blur(10px);
    transition: border-color 0.25s ease, transform 0.25s ease,
      box-shadow 0.25s ease, background-color 0.25s ease;
  }
  
  .card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.04),
      rgba(255, 255, 255, 0)
    );
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
  }
  
  .card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, 0.02);
    opacity: 0.6;
    pointer-events: none;
  }
  
  .card:hover {
    border-color: color-mix(in srgb, var(--accent) 40%, transparent 60%);
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
  }
  
  .card:hover::before {
    opacity: 1;
  }
  
  .chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  
  .chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  
    padding: 4px 8px;
    border-radius: 999px;
  
    font-size: 12px;
    color: var(--accent-muted);
    background: rgba(255, 255, 255, 0.08);
  
    border: 1px solid var(--stroke);
  }
  
  /* generic buttons */
  
  .btn-primary {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    min-height: 44px;
    font-weight: 700;
    letter-spacing: 0.15px;
    color: #0b0704;
    background-image: var(--button-gradient);
    border: 1px solid color-mix(in srgb, var(--accent) 70%, transparent 30%);
    border-radius: 999px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.65),
      0 18px 40px rgba(0, 0, 0, 0.8),
      0 0 32px rgba(255, 191, 73, 0.45); /* primary CTA glow (allowed) */
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.25s ease,
      box-shadow 0.25s ease, background-image 0.25s ease;
    overflow: hidden;
  }
  
  .btn-primary::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 45%);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
  }
  
  .btn-primary:hover {
    background-image: var(--button-gradient-hover);
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.75),
      0 22px 55px rgba(0, 0, 0, 0.85),
      0 0 40px rgba(255, 191, 73, 0.6); /* stronger glow still only here */
  }
  
  .btn-primary:hover::after {
    opacity: 0.35;
  }
  
  .btn-primary:active {
    transform: translateY(0) scale(0.98);
  }
  
  .name-link {
    color: inherit;
    text-decoration: none;
  }
  
  .name-link:hover {
    text-decoration: none;
  }
  
  .name-link:focus,
  .name-link:active {
    text-decoration: none;
    outline: none;
  }
  
  .brand {
    display: flex;
  
    align-items: center;
  
    gap: 6px;
  
    text-decoration: none; /* убрать подчёркивание */
  
    color: inherit; /* оставить тот же цвет текста */
  }
  
  .brand img {
    display: block;
  }
  
  .btn-secondary {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    min-height: 42px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--text-2);
    font-weight: 600;
    transition: border-color 0.2s ease, transform 0.2s ease, color 0.2s ease,
      box-shadow 0.2s ease, background-color 0.2s ease;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
    cursor: pointer;
  }
  
  .btn-secondary::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(145deg, rgba(255, 153, 95, 0.12), rgba(255, 111, 182, 0.05));
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }
  
  .btn-secondary:hover {
    border-color: color-mix(in srgb, var(--accent) 35%, transparent 65%);
    color: var(--text-1);
    transform: translateY(-2px);
    background-color: rgba(255, 255, 255, 0.04);
    box-shadow: var(--shadow-1);
  }
  
  .btn-secondary:hover::before {
    opacity: 1;
  }
  
  .btn-secondary:active {
    transform: translateY(0) scale(0.99);
  }
  
  .btn-primary.small {
    padding: 6px 16px;
    min-height: auto;
    font-size: 13px;
    border-radius: 999px;
  }
  
  .btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.02);
    color: var(--muted);
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
  }
  
  .btn-ghost:hover {
    border-color: color-mix(in srgb, var(--accent) 30%, transparent 70%);
    color: var(--text-1);
    background: rgba(255, 255, 255, 0.04);
  }
  
  /* inputs */
  
  input,
  textarea,
  select {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
  
    border: 1px solid rgba(255, 255, 255, 0.15);
  
    background: rgba(0, 0, 0, 0.25);
    color: var(--text);
    font-size: 14px;
  
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  }
  
  input:focus,
  textarea:focus,
  select:focus {
    border-color: var(--accent);
  
    background: rgb(22 20 33);
  
    box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.18);
  }
  
  .input-error {
    border-color: #ff3b3b !important;
  
    box-shadow: 0 0 0 3px rgba(255, 59, 59, 0.25) !important;
  }
  
  .small-hint {
    font-size: 11px;
    opacity: 0.75;
    margin-top: 4px;
    font-style: italic;
    margin-left: 5px;
  }
  
  /* ==========================================================================
  
     HEADER & NAV
  
     ========================================================================== */
  
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  
    /* match hero/banners width so everything is visually aligned */
    max-width: 1630px;
    margin: var(--space-3) auto var(--space-2);
    /* keep comfortable distance from hero border */
    padding: 12px 24px;
  }

  /* HERO grouping surface (logo + title + banners) */
  .page-header::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: min(1600px, calc(100% - 32px));
    top: -10px;
    bottom: -10px;
    border-radius: 26px;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.035) 0%,
      rgba(255, 255, 255, 0.012) 55%,
      rgba(255, 255, 255, 0) 100%
    );
    border: 1px solid color-mix(in srgb, var(--accent) 14%, rgba(255, 255, 255, 0.10) 86%);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.22);
    pointer-events: none;
    z-index: -1;
  }
  
  .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
  }
  
  .brand img {
    transition: transform 0.25s ease, filter 0.25s ease;
  }
  
  .brand:hover img {
    transform: translateY(-1px) scale(1.02);
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.6));
  }
  
  .brand span {
    font-size: 18px;
  }
  
  .main-nav {
    display: flex;
    align-items: center;
  }
  
  .main-nav a {
    position: relative;
    color: var(--muted);
    text-decoration: none;
    margin-left: 18px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease,
      transform 0.2s ease;
  }
  
  .main-nav a:hover {
    color: var(--text-1);
    border-color: color-mix(in srgb, var(--accent) 35%, transparent 65%);
    background: rgba(255, 255, 255, 0.03);
    transform: translateY(-2px);
  }

  .main-nav a.active {
    color: var(--text-1);
    border-color: color-mix(in srgb, var(--accent) 45%, transparent 55%);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 14px rgba(255, 182, 92, 0.15);
  }
  
  .login-btn {
    margin-left: 18px;
    padding: 10px 20px;
    border-radius: 999px;
  
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-1);
    text-decoration: none;
  
    border: 1px solid rgba(255, 255, 255, 0.16);
    
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.4px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.7);
    transition: transform 0.25s ease,
      box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
    overflow: hidden;
  }
  
  .login-btn svg {
    transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  
  .login-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-1);
    border-color: color-mix(in srgb, var(--accent) 30%, transparent 70%);
    transform: translateY(-2px);
    box-shadow: var(--shadow-1);
  }
  
  /* Add Server Button - градиент стил като на изображението */
  .add-server-btn {
    background: var(--button-gradient) !important;
    color: #0b0704 !important;
    border-color: color-mix(in srgb, var(--accent) 70%, transparent 30%) !important;
    font-weight: 600;
  }
  
  .add-server-btn:hover {
    background: var(--button-gradient-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8),
      0 22px 55px rgba(0, 0, 0, 0.9),
      0 0 40px rgba(255, 191, 73, 0.7); /* allowed strong glow for primary CTA */
  }
  
  .userbox {
    position: relative;
    margin-left: 12px;
    display: inline-flex;
    align-items: center;
  }
  
  .userbox .avatar,
  #avatarBtn {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 1px solid #444;
    cursor: pointer;
    vertical-align: middle;
    margin-left: 12px;
    transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55), 
                border-color 0.3s ease,
                box-shadow 0.3s ease;
  }
  
  .userbox .avatar:hover,
  #avatarBtn:hover {
    transform: translateY(-1px) scale(1.02);
    border-color: color-mix(in srgb, var(--accent) 40%, transparent 60%);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.8);
  }
  
  .main-nav .userbox {
    margin-left: auto;
  } /* аватар уводим вправо */
  
  /* ==========================================================================
  
     TOP ADS
  
     ========================================================================== */
  
  .top-ads {
    max-width: 1600px;
    margin: 30px auto 40px;
    position: relative;
    overflow: visible;
    perspective: 1500px;
    padding: 24px 16px;
  }

  /* HERO title (index.php) — premium + readable */
  .top-ads > h2 {
    /* override inline styles safely */
    margin: 0 !important;
    font-size: 23px !important; /* +~15% vs 20px */
    font-weight: 600;
    letter-spacing: 0.8px !important;
    color: rgba(240, 240, 240, 0.88) !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
  }

  .hero-subtitle {
    max-width: 620px;
    margin: 9px auto 0;
    text-align: center;
    font-size: 13px;
    line-height: 1.62;
    font-weight: 500;
    letter-spacing: 0.15px;
    color: rgba(255, 185, 90, 0.58);
  }

  .hero-subtitle::after {
    content: "";
    display: block;
    width: 120px;
    height: 1px;
    background: rgba(255, 185, 90, 0.22);
    margin: 12px auto 0;
  }

  .top-ads::before {
    content: "";
    position: absolute;
    inset: -4px;
    z-index: -1;
    border-radius: 24px;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.035) 0%,
      rgba(255, 255, 255, 0.012) 55%,
      rgba(255, 255, 255, 0) 100%
    );
    border: 1px solid color-mix(in srgb, var(--accent) 14%, rgba(255, 255, 255, 0.10) 86%);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22);
    pointer-events: none;
  }
  
  .ads-track {
    display: flex;
    gap: 30px;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform;
    padding: 10px;
  }
  
  /* Center focus (visual only) */
  .ads-track .ad {
    opacity: 0.93; /* side banners subtly recede */
    transition: opacity 0.25s ease;
  }

  .ads-track .ad.is-center {
    opacity: 1;
    border-color: color-mix(in srgb, var(--accent) 38%, rgba(255, 255, 255, 0.06) 62%);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.7),
      inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent 72%);
  }

  .ads-track .ad.is-center img {
    filter: brightness(1) contrast(1.06);
  }

  .ad {
    display: block;
    width: 270px;
    height: 100px;
    flex: 0 0 auto;
    position: relative;
    
    border-radius: 16px;
    overflow: hidden;
    
    background: linear-gradient(135deg, var(--bg-1), var(--bg-2));
    
    border-radius: var(--radius-lg);
    transform: translateZ(0);
    transform-style: flat;
    transition: transform 0.2s ease;
    
    /* subtle always-on outline ("подчертаване") */
    border: 1px solid color-mix(in srgb, var(--accent) 18%, rgba(255, 255, 255, 0.08) 82%);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.7),
      inset 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent 88%);
  }
  
  .ad::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, 0.04);
    pointer-events: none;
  }
  
  .ad:hover {
    /* subtle interaction only: no jump/glow */
    transform: translateZ(0) scale(1.025);
  }
  
  .ad:focus-visible {
    transform: translateZ(0) scale(1.025);
  }

  .ad:active {
    /* keep it highlighted on press, no shrink */
    transform: translateZ(0) scale(1.02);
  }

  .ad img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.25s ease;
    /* non-hover banners fade slightly into background */
    filter: brightness(0.94) contrast(1.05);
  }
  
  .ad:hover img {
    filter: brightness(1) contrast(1.08);
  }

  .ad:focus-visible img {
    filter: brightness(1) contrast(1.08);
  }

  .ad:active img {
    filter: brightness(1) contrast(1.08);
  }

  /* When one banner is hovered, make the others subtly recede */
  .ads-track:hover .ad:not(:hover):not(:focus-visible):not(.is-center) img {
    filter: brightness(0.91) contrast(1.04);
  }
  
  .ads-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
  
    width: 48px;
    height: 48px;
    border-radius: 50%;
  
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(135deg, rgba(10, 10, 16, 0.98), rgba(16, 16, 24, 0.98));
    
    color: var(--accent);
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    
    box-shadow:
      0 8px 24px rgba(0, 0, 0, 0.75);
    
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
  }
  
  .ads-btn:hover {
    background: linear-gradient(135deg, rgba(18, 18, 26, 0.98), rgba(22, 22, 32, 0.98));
    border-color: color-mix(in srgb, var(--accent) 40%, transparent 60%);
    color: var(--text-1);
    transform: translateY(-50%) translateY(-2px);
    box-shadow: var(--shadow-1);
  }
  
  .ads-btn:active {
    transform: translateY(-50%) scale(0.95);
  }
  
  .ads-btn.prev {
    left: -20px;
  }
  .ads-btn.next {
    right: -20px;
  }
  
  /* ==========================================================================
  
     GRID (index.php)
  
     ========================================================================== */
  
  .grid {
    max-width: 1650px;
    margin: 0 auto;
    padding: 0 20px;
  
    min-height: 75vh; /* minimum height for columns */
    height: auto; /* allow natural expansion */
  
    display: grid;
    grid-template-columns: 1.1fr 1.1fr 360px;
    gap: var(--gap);
  
    align-content: start;
  }

  /* Left column wrapper for stacked sections */
  .left-column-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    height: auto;
    min-height: 0;
  }
  
  /* Right column wrapper for stacked sections (Top-10 + Popular Tags) */
  .right-column-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    height: auto;
    min-height: 0;
  }
  
  /* Override for sections in right column wrapper */
  .right-column-wrapper .col {
    max-height: none;
    overflow: visible;
  }
  
  /* columns with inner scroll */
  
  .col {
    background: linear-gradient(180deg, var(--card), var(--card-2));
  
    border: 1px solid var(--stroke);
  
    border-radius: var(--radius);
  
    padding: 0;
  
    box-shadow: var(--shadow-1);
  
    backdrop-filter: saturate(130%) blur(10px);
  
    -webkit-backdrop-filter: saturate(130%) blur(10px);
  
    max-height: 100%;
  
    overflow: hidden;
  
    position: relative;
  
    transition: border-color 0.45s ease, box-shadow 0.45s ease;
  }

  /* Override for sections in left column wrapper */
  .left-column-wrapper .col {
    max-height: none;
    overflow: visible;
  }

  /* Keep right column (Top-10) with fixed height, don't expand */
  .col.right {
    align-self: start;
  }

  .col.right .col-content {
    overflow: visible;
  }

  /* Ensure sections in left column wrapper stretch vertically */
  .left-column-wrapper .col {
    max-height: none;
    height: auto;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow: visible;
  }

  .left-column-wrapper .col-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow: visible;
    max-height: none;
  }
  
  .col::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.03),
      rgba(255, 255, 255, 0)
    );
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
  }
  
  .col:hover {
    border-color: color-mix(in srgb, var(--accent) 30%, transparent 70%);
    box-shadow: var(--shadow-2);
  }
  
  .col:hover::before {
    opacity: 1;
  }
  
  .col-content {
    padding: 14px;
    max-height: 100%;
    overflow: auto;
    scrollbar-width: none;
  }
  
  .col-content::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  /* Remove height constraints for left column wrapper sections */
  .left-column-wrapper .col-content {
    max-height: none;
    overflow: visible;
  }

  /* Keep right column content with scroll */
  .col.right .col-content {
    overflow: visible;
  }
  
  /* Fade effect at bottom of columns */
  .col-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to bottom, transparent 0%, rgba(36, 32, 56, 0.85) 40%, rgba(36, 32, 56, 0.98) 100%);
    pointer-events: none;
    border-radius: 0 0 var(--radius) var(--radius);
    z-index: 10;
  }

  /* Hide fade effect for left column wrapper sections since they expand naturally */
  .left-column-wrapper .col-fade {
    display: none;
  }

  /* Keep fade effect for right column */
  .col.right .col-fade {
    display: none;
  }
  
  .col h3 {
    position: relative;
    margin: 4px 4px 4px;
    padding: 0 0 4px 0;
    font-size: 1rem;
    letter-spacing: 0.3px;
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
  }
  
  .col h3::after {
    content: none;
  }
  
  /* Точката пред заглавието е премахната */
  .col h3::before {
    content: none;
  }

  /* Visual hierarchy: emphasize vs muted section headings */
  .col--emphasize h3 {
    text-shadow: 0 0 20px rgba(255, 182, 92, 0.25);
    opacity: 1;
  }

  .col--muted h3 {
    opacity: 0.78;
  }

  .col h4 {
    margin: 16px 4px 8px;
    font-size: 13px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
  }

  /* Schedule buckets (Today / Tomorrow / Next 7 days / After week+) */

  .schedule-groups {
    display: grid;
    gap: 12px;
    margin-top: 12px;
  }

  .schedule-group {
    position: relative;
    padding: 12px 12px 10px;
    border-radius: var(--radius);
    background: linear-gradient(180deg, var(--card), var(--card-2));
    border: 1px solid var(--stroke);
    box-shadow: var(--shadow);
    backdrop-filter: saturate(140%) blur(12px);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    overflow: hidden;
    transition: border-color 0.45s ease, box-shadow 0.45s ease, transform 0.45s ease;
  }

  .schedule-group::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: calc(var(--radius) - 2px);
    background: radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.08), transparent 55%),
      radial-gradient(circle at 80% 0%, rgba(255, 111, 182, 0.12), transparent 55%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.45s ease;
  }

  .schedule-group::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, 0.02);
    mix-blend-mode: screen;
    opacity: 0.5;
    pointer-events: none;
  }

  .schedule-group:hover {
    border-color: rgba(255, 153, 95, 0.35);
    box-shadow: var(--glow);
    transform: translateY(-2px);
  }

  .schedule-group:hover::before {
    opacity: 1;
  }

  .schedule-title {
    position: relative;
    margin: 0 4px 2px;
    padding: 0 0 2px 0;
    font-size: 14px;
    letter-spacing: 0.3px;
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
  }
  
  .schedule-title::after {
    content: none;
  }
  
  /* Точката пред schedule заглавието е премахната */
  .schedule-title::before {
    content: none;
  }

  .schedule-group .list li:last-child {
    margin-bottom: 0;
  }

  /* Show up to 5 servers, then scroll */
  .schedule-group {
    --schedule-visible: 5;
    --schedule-row: 52px; /* approx li height incl. gap */
  }

  .schedule-group .list {
    max-height: calc(var(--schedule-visible) * var(--schedule-row));
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }

  .schedule-group .list::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
  
  /* lists (index.php) */
  
  .list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
.list li.empty-row {
  margin-bottom: 0;
}

.list li.empty-row .server-content {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  padding: 10px 12px;
  opacity: 0.75;
  border-style: dashed;
}

.list li.empty-row .meta,
.list li.empty-row .date,
.list li.empty-row .header,
.list li.empty-row .icon-btn,
.list li.empty-row .tag {
  display: none !important;
}

  /* .list.small removed: extra li padding caused inconsistent spacing between server cards in TODAY / TOMORROW */
  
.list li {
  position: relative;
  margin-bottom: 8px;
  overflow: hidden;
  transition: transform 0.25s ease;
}

  .list li .server-content {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 16px;
    align-items: center;
    padding: 8px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.28s ease;
  }

  .list li:hover {
    transform: translateY(-2px);
  }

  .list li:hover .server-content {
    background: rgba(255, 255, 255, 0.04);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
  }

  .list li:active {
    transform: translateY(0) scale(0.99);
  }
  
  .name {
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.4px;
    color: var(--text-1);
    text-transform: uppercase;
    font-family: 'Cinzel', 'Cinzel Decorative', 'Trajan Pro', 'Cormorant Garamond', 'Goudy Old Style', 'Times New Roman', serif;
  }
  
.meta {
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  opacity: 0.95;
  margin-left: 0;
}
  
.date {
  background: rgba(255, 191, 73, 0.14);
  color: color-mix(in srgb, var(--accent) 75%, #ffffff 25%);

  margin-left: 0;
  padding: 2px 6px;
  border-radius: 6px;

  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  border: 1px solid rgba(255, 153, 95, 0.5);
  box-shadow: 0 6px 14px rgba(255, 153, 95, 0.18);
  transition: border-color 0.3s ease, background 0.3s ease;
  vertical-align: middle;
}
  
  /* header row inside card */
  
  .server-card .header {
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: 22px;
  }
  
  .server-card .header .name {
    flex: 1;
    margin-left: 5px;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    font-family: 'Cinzel', 'Cinzel Decorative', 'Trajan Pro', 'Cormorant Garamond', 'Goudy Old Style', 'Times New Roman', serif;
    min-width: 0;
    word-break: break-word;
  }
  
  /* ==========================================================================
  
     SERVER CARD: SHARED + TOP-PAGE SPECIFICS
  
     ========================================================================== */
  
  .server-card {
    position: relative;
  }
  
  .server-card.has-bg {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.1);
  }
  
  .server-card.has-bg::before {
    content: "";
  
    position: absolute;
    inset: 0;
  
    background: linear-gradient(
        180deg,
        rgba(20, 18, 30, 0.72),
        rgba(20, 18, 30, 0.68)
      ),
      var(--server-bg, none);
  
    background-size: cover;
  
    background-position: center;
  
    filter: saturate(1.05);
  
    border-radius: 12px;
  
    z-index: 0;
  }
  
  .server-card.has-bg > * {
    position: relative;
    z-index: 1;
  }
  
  .server-card.has-bg:hover::before {
    filter: saturate(1.12) brightness(1.02);
  }
  
  /* Generic icon buttons */
  
  .icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
  
    /* Нов черен бордер */
    border: 1px solid #000000;
  
    box-shadow: 0 8px 18px rgba(3, 0, 15, 0.45);
    transition: border-color 0.3s ease,
                transform 0.3s ease,
                background 0.3s ease;
  }
  
  /* General icon-btn hover (fallback for icons without specific styles) */
  .icon-btn:hover {
    transform: translateY(-2px);
  }
  
  .icon-btn svg {
    width: 14px;
    height: 14px;
    fill: #ffffff; /* white */
  }
  
  /* Website icon button */
  .icon-btn[title="Open website"],
  .icon-btn[title="Website"],
  .icon-btn[title*="website" i] {
    background: #22C55E; /* Green */
    border: 1px solid #16A34A; /* darker green border */
    font-size: 16px;
    line-height: 1;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  .icon-btn[title="Open website"]:hover,
  .icon-btn[title="Website"]:hover,
  .icon-btn[title*="website" i]:hover {
    background: #16A34A;
    border-color: #15803D;
    transform: translateY(-2px);
  }
  
  .icon-btn[title="Open website"] svg,
  .icon-btn[title="Website"] svg,
  .icon-btn[title*="website" i] svg {
    fill: #ffffff;
  }
  
  /* Make emoji white */
  .icon-btn[title="Open website"] .link-emoji,
  .icon-btn[title="Website"] .link-emoji,
  .icon-btn[title*="website" i] .link-emoji {
    filter: brightness(0) invert(1);
    display: inline-block;
  }
  
  .icon-btn[title="Open website"] svg,
  .icon-btn[title="Website"] svg,
  .icon-btn[title*="website" i] svg {
    fill: #ffffff;
  }
  
  /* Discord icon button */
  .icon-btn[title="Open Discord"],
  .icon-btn[title="Discord"],
  .icon-btn[title*="discord" i] {
    background: #5865F2; /* Discord Purple */
    border: 1px solid #3741db; /* darker purple border */
  }
  
  .icon-btn[title="Open Discord"]:hover,
  .icon-btn[title="Discord"]:hover,
  .icon-btn[title*="discord" i]:hover {
    background: #4752C4;
    border-color: #2F35A3;
    transform: translateY(-2px);
  }
  
.icon-btn[title="Open Discord"] svg,
.icon-btn[title="Discord"] svg,
.icon-btn[title*="discord" i] svg {
  fill: #ffffff;
}

/* Info button (server page) */
.icon-btn.info-btn {
  background: #3b82f6;
  border: 1px solid #2563eb;
}
.icon-btn.info-btn:hover {
  background: #2563eb;
  border-color: #1d4ed8;
  transform: translateY(-2px);
}
.icon-btn.info-btn svg {
  fill: #ffffff;
}
  
  /* Like buttons (generic) */
  
  .like-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  
    padding: 4px 8px;
    border-radius: 8px;
  
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #ffd4bd;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 8px 16px rgba(5, 0, 15, 0.35);
    cursor: pointer;
    user-select: none;
    transition: border-color 0.3s ease, color 0.3s ease, transform 0.3s ease,
      background 0.3s ease;
  }
  
  .like-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }
  
  .like-btn:not([disabled]):hover {
    border-color: rgba(255, 153, 95, 0.45);
    background: rgba(255, 153, 95, 0.2);
    color: #1b0f1f;
    transform: translateY(-2px);
  }
  
  /* ==========================================================================
  
     RIGHT COLUMN (index.php): Top-10
  
     ========================================================================== */
  
  .col.right .likes {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  
  .col.right .likes li {
    margin-bottom: 8px;
    cursor: pointer;
    transition: transform 0.25s ease;
  }

  .col.right .likes li:active {
    transform: translateY(0) scale(0.99);
  }

  .col.right .likes li .server-content {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 6px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.35s ease;
  }

  /* Option 1: No VIP/HOT tinting inside Top-10 User Choice (uniform rows) */
  .col.right .likes li.server-card.is-vip .server-content,
  .col.right .likes li.server-card.is-hot .server-content {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: none;
    animation: none;
    filter: none;
  }

  .col.right .likes li.server-card.is-vip:hover .server-content,
  .col.right .likes li.server-card.is-hot:hover .server-content {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: var(--shadow-1);
    animation: none;
    filter: none;
  }
  
  .col.right .likes li:hover {
    transform: translateY(-2px);
  }

  .col.right .likes li:hover .server-content {
    background: rgba(255, 255, 255, 0.06);
    box-shadow: var(--shadow-1);
  }

  .col.right .likes li .name {
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    font-family: 'Cinzel', 'Cinzel Decorative', 'Trajan Pro', 'Cormorant Garamond', 'Goudy Old Style', 'Times New Roman', serif;
    color: var(--text-1);
  }
  
  .rank {
    font-weight: 800;
    font-size: 16px;
    color: var(--accent);
    text-shadow: none;
    opacity: 0.96;
  }
  
  /* POPULAR TAGS */
  .tags-container {
    margin-bottom: 20px;
  }
  
  .tags-group {
    margin-bottom: 8px;
  }
  
  .tags-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
  }
  
  .tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  
  .tag-btn {
    padding: 6px 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #F6F2FF;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-family: 'Cinzel', 'Cinzel Decorative', 'Trajan Pro', 'Cormorant Garamond', 'Goudy Old Style', 'Times New Roman', serif;
  }
  
  .tag-btn:hover {
    background: rgba(255, 153, 95, 0.2);
    border-color: rgba(255, 153, 95, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 153, 95, 0.2);
  }
  
  .tag-btn.active {
    background: linear-gradient(135deg, rgba(255, 153, 95, 0.3), rgba(255, 111, 182, 0.2));
    border-color: rgba(255, 153, 95, 0.6);
    color: #ffd9b2;
    box-shadow: 0 0 12px rgba(255, 153, 95, 0.3);
  }
  
  .tag-btn-clear {
    background: rgba(255, 111, 182, 0.15) !important;
    border-color: rgba(255, 111, 182, 0.3) !important;
    color: #ffb4d9 !important;
  }
  
  .tag-btn-clear:hover {
    background: rgba(255, 111, 182, 0.25) !important;
    border-color: rgba(255, 111, 182, 0.5) !important;
  }
  
  /* ==========================================================================
  
     PREMIUM TAGS / VISUALS
  
     ========================================================================== */
  
  .tag {
    padding: 2px 6px;
    border-radius: 6px;
  
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
  
    border: 1px solid rgba(255, 255, 255, 0.16);
    vertical-align: middle;
  }
  
  /* HOT badge – red gradient, glow, metallic; same premium style as VIP, red palette */
  .tag.hot {
    color: var(--badge-hot-text);
    background: linear-gradient(135deg, var(--badge-hot-light), var(--badge-hot), var(--badge-hot-dark));
    border: 1px solid var(--badge-hot-light);
    box-shadow:
      0 0 14px var(--badge-hot-glow),
      inset 0 1px 0 rgba(255, 255, 255, 0.35);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  /* VIP badge – gold gradient, glow, metallic */
  .tag.super {
    color: var(--badge-vip-text);
    background: linear-gradient(135deg, var(--badge-vip-light), var(--badge-vip), var(--badge-vip-dark));
    border: 1px solid var(--badge-vip-light);
    box-shadow:
      0 0 14px var(--badge-vip-glow),
      inset 0 1px 0 rgba(255, 255, 255, 0.35);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  /* HOT row – само badge HOT, без специален бордер на картата */
  .server-card.premium-1 {
    position: relative;
  }

  .server-card.premium-1 .name {
    color: #F6F2FF;
  }

  .server-card.premium-1 .date {
    border-color: rgba(127, 29, 29, 0.5) !important;
    background: rgba(220, 38, 38, 0.18) !important;
    color: var(--badge-hot-light) !important;
  }

  /* VIP row – само badge VIP, без специален бордер на картата */
  .server-card.premium-2 {
    position: relative;
  }

  .server-card.premium-2 .name {
    color: #F6F2FF;
  }

  .server-card.premium-2 .date {
    border-color: rgba(184, 137, 46, 0.5) !important;
    background: rgba(230, 182, 92, 0.18) !important;
    color: var(--badge-vip-light) !important;
  }

  /* Status-based content-area glow (only the space behind text; text unchanged) */
  .server-card.is-vip .server-content {
    background: linear-gradient(
      135deg,
      rgba(230, 182, 92, 0.38) 50%,
      rgba(180, 200, 255, 0.26) 80%,
      rgba(230, 182, 92, 0.32) 100%
    );
    border-color: rgba(230, 182, 92, 0.68);
    box-shadow:
      inset 0 0 26px rgba(230, 182, 92, 0.36),
      0 0 20px rgba(230, 182, 92, 0.26);
  }

  .server-card.is-hot .server-content {
    background: linear-gradient(
      135deg,
      rgba(220, 38, 38, 0.36) 0%,
      rgba(255, 120, 60, 0.24) 50%,
      rgba(220, 38, 38, 0.30) 100%
    );
    border-color: rgba(220, 38, 38, 0.68);
    box-shadow:
      inset 0 0 22px rgba(220, 38, 38, 0.34),
      0 0 16px rgba(220, 38, 38, 0.26);
  }

  @media (prefers-reduced-motion: no-preference) {
    .server-card.is-hot .server-content {
      animation: hotGlowPulse 4s ease-in-out infinite;
    }
  }

  @keyframes hotGlowPulse {
    0%, 100% { opacity: 1; filter: brightness(1); }
    50% { opacity: 0.97; filter: brightness(1.04); }
  }

  /* Stronger, more saturated glow on hover only for VIP / HOT */
  .server-card.is-vip:hover .server-content {
    background: linear-gradient(
      135deg,
      rgba(230, 182, 92, 0.54) 0%,
      rgba(180, 200, 255, 0.34) 45%,
      rgba(230, 182, 92, 0.46) 100%
    );
    border-color: rgba(230, 182, 92, 0.86);
    box-shadow:
      inset 0 0 34px rgba(230, 182, 92, 0.42),
      0 0 26px rgba(230, 182, 92, 0.32);
  }

  .server-card.is-hot:hover .server-content {
    background: linear-gradient(
      135deg,
      rgba(220, 38, 38, 0.52) 0%,
      rgba(255, 120, 60, 0.34) 45%,
      rgba(220, 38, 38, 0.42) 100%
    );
    border-color: rgba(220, 38, 38, 0.86);
    box-shadow:
      inset 0 0 30px rgba(220, 38, 38, 0.42),
      0 0 22px rgba(220, 38, 38, 0.32);
  }

  /* “Open” badge */
  
  .badge-open {
    background: rgb(0 255 45 / 18%);
  
    color: var(--success);
  
    border: 1px solid rgb(0 137 47 / 28%);
  }
  
  /* ========================================================================== */
  
  /* TOOLTIP (shared)                                                           */
  
  /* ========================================================================== */
  
  .card-tip {
    position: fixed;
    z-index: 998;
    pointer-events: none;
    max-width: 340px;
  
    background: rgba(30, 30, 30, 0.9);
    color: #fff;
    border-radius: 10px;
  
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.3;
    display: none;
  
    border: 1px solid rgba(255, 255, 255, 0.08);
  
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  }
  
  .card-tip h5 {
    margin: 0 0 6px;
    font-size: 13px;
    color: #ffcc8a;
  }
  
  .card-tip .pair {
    display: flex;
    gap: 6px;
    align-items: center;
  }
  
  .card-tip .k {
    opacity: 0.75;
    min-width: 88px;
  }
  
  .card-tip .v {
    flex: 1;
    word-break: break-word;
  }
  
  /* Только для “Recent likes”: ник + дата вправо */
  
  .card-tip .like-line {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
  }
  
  .card-tip .like-nick {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .card-tip .like-date {
    margin-left: auto;
    white-space: nowrap;
    opacity: 0.9;
    font-variant-numeric: tabular-nums;
  }
  
  /* ==========================================================================
  
     FOOTER - MODERN DESIGN WITH EFFECTS
  
     ========================================================================== */
  
  .footer {
    position: relative;
    width: 100%;
    margin-top: 80px;
    padding: 0;
    z-index: 3;
    overflow: hidden;
  }
  
  .footer-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, 
      rgba(17, 14, 26, 0.85) 0%, 
      rgba(25, 20, 40, 0.95) 50%,
      rgba(15, 10, 30, 1) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 0;
  }
  
  .footer-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
      transparent 0%, 
      color-mix(in srgb, var(--accent) 50%, transparent) 20%, 
      color-mix(in srgb, var(--accent) 80%, transparent) 50%, 
      color-mix(in srgb, var(--accent) 50%, transparent) 80%, 
      transparent 100%);
    animation: shimmer 3s ease-in-out infinite;
  }
  
  @keyframes shimmer {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
  }
  
  .footer-content {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
    padding: 40px 20px 20px;
    z-index: 1;
  }
  
  .f-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-bottom: 30px;
  }
  
  .footer-col {
    position: relative;
    padding: 20px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
  }
  
  .footer-col:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 15%, transparent);
  }
  
  .footer-icon {
    font-size: 32px;
    margin-bottom: 12px;
    display: inline-block;
    animation: float 3s ease-in-out infinite;
  }
  
  @keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
  }
  
  .footer-col:nth-child(1) .footer-icon { animation-delay: 0s; }
  .footer-col:nth-child(2) .footer-icon { animation-delay: 0.2s; }
  .footer-col:nth-child(3) .footer-icon { animation-delay: 0.4s; }
  .footer-col:nth-child(4) .footer-icon { animation-delay: 0.6s; }
  
  .footer-col h3 {
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  
  .footer-col p {
    margin: 0 0 8px 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
  }
  
  .footer-social {
    display: flex;
    gap: 10px;
    margin-top: 15px;
  }
  
  .social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    transition: all 0.3s ease;
  }
  
  .social-link:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, var(--accent) 30%, transparent));
    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
    transform: translateY(-3px) rotate(5deg);
    box-shadow: 0 5px 15px color-mix(in srgb, var(--accent) 30%, transparent);
  }
  
  .time-display {
    margin-top: 10px;
    padding: 12px;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    border-radius: 8px;
    text-align: center;
  }
  
  .time-display strong {
    font-size: 24px;
    font-weight: 800;
    color: var(--accent);
    font-family: 'Courier New', monospace;
    letter-spacing: 2px;
    text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 50%, transparent);
  }
  
  .stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
  }
  
  .stat-item {
    padding: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    text-align: center;
    transition: all 0.3s ease;
  }
  
  .stat-item:hover {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
    transform: scale(1.05);
  }
  
  .stat-value {
    font-size: 20px;
    font-weight: 800;
    color: var(--accent);
    margin-bottom: 4px;
  }
  
  .stat-label {
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  
  .reset-timer {
    margin-top: 10px;
    padding: 15px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    border-radius: 8px;
    text-align: center;
  }
  
  .reset-timer strong {
    font-size: 28px;
    font-weight: 900;
    color: var(--accent);
    font-family: 'Courier New', monospace;
    letter-spacing: 2px;
    text-shadow: 0 0 15px color-mix(in srgb, var(--accent) 55%, transparent);
    animation: pulse 2s ease-in-out infinite;
  }
  
  @keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.05); }
  }
  
  .reset-info {
    margin-top: 8px;
    font-size: 12px;
    color: var(--muted);
  }
  
  .footer-bottom {
    position: relative;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  
  .footer-wave {
    position: absolute;
    top: -2px;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, 
      transparent 0%, 
      color-mix(in srgb, var(--accent) 30%, transparent) 25%, 
      color-mix(in srgb, var(--accent) 60%, transparent) 50%, 
      color-mix(in srgb, var(--accent) 30%, transparent) 75%, 
      transparent 100%);
    animation: wave 4s ease-in-out infinite;
  }
  
  @keyframes wave {
    0%, 100% { transform: translateX(-100%); }
    50% { transform: translateX(100%); }
  }
  
  .copy {
    margin: 0;
    padding: 15px 0;
    color: var(--accent-muted);
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.5px;
  }
  
  /* ==========================================================================
  
     RESPONSIVE (index + shared)
  
     ========================================================================== */
  
  @media (max-width: 1200px) {
    .grid {
      grid-template-columns: 1fr 1fr;
      height: 75vh;
    }
  
    .col.right {
      grid-column: 1 / -1;
    }
  }
  
  @media (max-width: 1024px) {
    .f-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }
    
    .stats-grid {
      grid-template-columns: repeat(2, 1fr);
    }
    
    .footer {
      position: relative;
      min-height: 500px;
    }
    
    .footer-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }
  }
  
  @media (max-width: 760px) {
    html,
    body {
      overflow: visible;
    }
  
    .top-ads {
      padding: 0 40px;
      height: 110px;
    }
  
    .grid {
      grid-template-columns: 1fr;
      height: auto;
      padding-bottom: 12px;
    }
  
    .f-grid {
      grid-template-columns: 1fr;
      gap: 15px;
    }
  
    .footer {
      position: relative;
      transform: none;
      margin-top: 40px;
      min-height: 400px;
    }
    
    .footer-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }
    
    .footer-content {
      padding: 30px 15px 15px;
      position: relative;
      z-index: 1;
    }
    
    .footer-col {
      padding: 15px;
      text-align: center;
    }
    
    .footer-icon {
      font-size: 28px;
    }
    
    .footer-social {
      justify-content: center;
    }
    
    .stats-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
    }
    
    .time-display strong {
      font-size: 20px;
    }
    
    .reset-timer strong {
      font-size: 24px;
    }
  }
  
  /* ==========================================================================
  
     SMALL MODAL (generic) — for small popups like top-up
  
     ========================================================================== */
  
  .modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  
  .modal-body {
    background: linear-gradient(180deg, var(--card), var(--card-2));
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    padding: 22px;
    width: min(520px, 88vw);
    max-height: 70vh;
    overflow: auto;
    color: var(--text);
    box-shadow: var(--shadow);
    backdrop-filter: saturate(120%) blur(8px);
    -webkit-backdrop-filter: saturate(120%) blur(8px);
    animation: modalIn 0.2s ease;
  }
  
  .modal h3 {
    margin: 0 0 12px;
    font-size: 18px;
    text-align: center;
  }
  
  .modal button {
    margin-top: 10px;
    padding: 10px 14px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
  }
  
  .modal button[type="submit"] {
    background: var(--accent);
    color: #111;
    font-weight: 700;
    margin-right: 6px;
  }
  
  .modal button[type="button"] {
    background: rgba(255, 255, 255, 0.15);
    color: var(--text);
  }
  
  .modal button:hover {
    opacity: 0.95;
  }
  
  @keyframes modalIn {
    from {
      transform: scale(0.98);
      opacity: 0;
    }
    to {
      transform: scale(1);
      opacity: 1;
    }
  }
  
  /* ==========================================================================
     MUOGG USERCP — premium MMO control panel (visual only)
     ========================================================================== */

  /* UserCP = същата цветова система като сайта (:root --bg, --card, --accent) */
  #usercp {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 3vw, 28px);
    font-family: "DM Sans", system-ui, sans-serif;
    color: var(--text-2);
    background:
      radial-gradient(1200px 600px at 80% -10%, rgba(255, 140, 0, 0.12), transparent 70%),
      radial-gradient(900px 400px at 10% 110%, rgba(51, 209, 160, 0.06), transparent 70%),
      rgba(5, 6, 11, 0.88);
    backdrop-filter: blur(12px) saturate(1.05);
    -webkit-backdrop-filter: blur(12px) saturate(1.05);
    animation: usercpBackdropIn 0.35s ease;
  }

  @keyframes usercpBackdropIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  #usercp .usercp-card {
    position: relative;
    width: min(1180px, 96vw);
    height: min(78vh, 860px);
    max-height: calc(100vh - 24px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--text-2);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
    border: 1px solid var(--stroke);
    box-shadow:
      var(--shadow-2),
      0 0 40px rgba(255, 140, 0, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: saturate(120%) blur(10px);
    -webkit-backdrop-filter: saturate(120%) blur(10px);
    animation: usercpCardIn 0.38s cubic-bezier(0.22, 1, 0.36, 1);
  }

  #usercp .usercp-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 35%, transparent) 0%,
      rgba(255, 255, 255, 0.06) 50%,
      color-mix(in srgb, var(--accent) 25%, transparent) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.9;
  }

  @keyframes usercpCardIn {
    from {
      opacity: 0;
      transform: scale(0.97) translateY(12px);
    }
    to {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }

  /* — Topbar — */
  #usercp .usercp-head {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px 18px 14px 20px;
    border-bottom: 1px solid var(--stroke);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent);
    position: relative;
    z-index: 2;
  }

  #usercp .usercp-head::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 40%, transparent), transparent);
    pointer-events: none;
  }

  #usercp .usercp-head > img:first-of-type {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    object-fit: cover;
    border: 2px solid color-mix(in srgb, var(--accent) 45%, var(--stroke));
    box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 25%, transparent);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }

  #usercp .usercp-head > img:first-of-type:hover {
    transform: scale(1.04);
    box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 40%, transparent);
  }

  #usercp .usercp-title,
  #usercp .usercp-head .title {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding-right: 8px;
    border-right: 1px solid var(--stroke);
    margin-right: 4px;
  }

  #usercp .usercp-title > div:first-child,
  #usercp .usercp-head .title > div {
    font-family: "Orbitron", sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-1);
    text-shadow: 0 0 20px color-mix(in srgb, var(--accent) 30%, transparent);
  }

  #usercp .usercp-title .subtitle {
    opacity: 0.75;
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  #usercp .balance-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
    padding: 4px 10px 4px 4px;
    border-radius: 999px;
    background: var(--bg-2);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--stroke));
  }

  #usercp .balance-pill #balanceVal {
    font-family: "Orbitron", sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: 0.02em;
  }

  #usercp .balance-pill .btn-primary.small,
  #usercp #btnTopup {
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    border-radius: 999px;
    font-weight: 700;
    background: var(--button-gradient);
    border: none;
    color: #111;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  #usercp .balance-pill .btn-primary.small:hover,
  #usercp #btnTopup:hover {
    transform: translateY(-2px);
    background: var(--button-gradient-hover);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 45%, transparent);
  }

  /* — Nav tabs (center) — */
  #usercp .usercp-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    padding: 4px 12px;
  }

  #usercp .usercp-tabs .tab-btn {
    font-family: "DM Sans", sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 10px 16px;
    border-radius: 10px;
    cursor: pointer;
    color: var(--text-2);
    background: var(--glass);
    border: 1px solid var(--stroke);
    transition: color 0.2s, background 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  }

  #usercp .usercp-tabs .tab-btn:hover {
    color: var(--text-1);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--stroke));
    box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 12%, transparent);
    transform: translateY(-1px);
  }

  #usercp .usercp-tabs .tab-btn.active {
    color: #111;
    background: var(--button-gradient);
    border-color: color-mix(in srgb, var(--accent) 60%, #1a1408);
    box-shadow:
      0 0 20px color-mix(in srgb, var(--accent) 28%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, 0.25);
  }

  /* Logout + close */
  #usercp .usercp-head #btnLogout {
    font-family: "DM Sans", sans-serif;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 10px 18px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--stroke));
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 18%, transparent), var(--glass));
    color: var(--accent);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    margin-left: auto;
  }

  #usercp .usercp-head #btnLogout:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 20%, transparent);
  }

  #usercp .usercp-head .close {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--stroke);
    background: var(--glass);
    color: var(--muted);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
  }

  #usercp .usercp-head .close:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(248, 113, 113, 0.4);
    color: #fecaca;
    transform: scale(1.05);
  }

  /* — Body / scroll — */
  #usercp .usercp-body {
    position: relative;
    z-index: 1;
    padding: 22px 24px 28px;
    overflow: auto;
    flex: 1;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--accent) 50%, transparent) var(--bg-2);
    background: radial-gradient(ellipse 80% 50% at 50% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 65%);
  }

  #usercp .usercp-body::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  #usercp .usercp-body::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 70%, #333), color-mix(in srgb, var(--accent) 40%, #222));
    border-radius: 8px;
  }

  #usercp .usercp-section {
    animation: usercpSectionIn 0.3s ease;
  }

  @keyframes usercpSectionIn {
    from { opacity: 0.85; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
  }

  #usercp .usercp-section .row {
    margin: 12px 0;
  }

  #usercp .usercp-section .row.inline {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
  }

  #usercp .usercp-section .row.inline > div {
    flex: 1;
    min-width: 160px;
  }

  #usercp .usercp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
  }

  #usercp #addServer {
    background: transparent;
    box-shadow: none;
    padding: 0;
    border: 0;
  }

  #usercp #addServer label,
  #usercp .usercp-section label,
  #usercp .editForm label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-muted);
    margin-bottom: 8px;
    margin-left: 2px;
  }

  #usercp .form-compact input,
  #usercp .form-compact select,
  #usercp .form-compact textarea,
  #usercp .editForm input,
  #usercp .editForm select,
  #usercp .editForm textarea {
    width: 100%;
    padding: 12px 14px;
    font-size: 14px;
    font-family: "DM Sans", sans-serif;
    border-radius: 12px;
    border: 1px solid var(--stroke);
    background: var(--bg-2);
    color: var(--text-1);
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  }

  #usercp .form-compact input:focus,
  #usercp .form-compact select:focus,
  #usercp .form-compact textarea:focus,
  #usercp .editForm input:focus,
  #usercp .editForm select:focus,
  #usercp .editForm textarea:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--accent) 55%, var(--stroke));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
    background: var(--bg-0);
  }

  #usercp .form-compact .row,
  #usercp .editForm .row {
    margin: 10px 0;
  }

  #usercp .small-hint,
  #usercp .hint {
    font-size: 12px;
    color: var(--muted);
    margin-top: 6px;
  }

  /* Primary actions inside UserCP */
  #usercp .btn-primary:not(.small):not(#btnTopup) {
    font-family: "Orbitron", sans-serif;
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 14px 28px;
    border-radius: 12px;
    border: none;
    color: #111;
    background: var(--button-gradient);
    box-shadow: 0 8px 28px color-mix(in srgb, var(--accent) 28%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  }

  #usercp .btn-primary:not(.small):not(#btnTopup):hover {
    transform: translateY(-3px);
    background: var(--button-gradient-hover);
    box-shadow: 0 14px 40px color-mix(in srgb, var(--accent) 35%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  }

  #usercp .btn-secondary,
  #usercp .btn-ghost {
    font-weight: 600;
    font-size: 0.8rem;
    padding: 10px 16px;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s, background 0.2s;
  }

  #usercp .btn-secondary {
    background: color-mix(in srgb, var(--accent) 12%, var(--glass));
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--stroke));
    color: var(--text-1);
  }

  #usercp .btn-secondary:hover {
    transform: translateY(-2px);
    background: color-mix(in srgb, var(--accent) 20%, var(--glass));
  }

  #usercp .btn-ghost {
    background: transparent;
    border: 1px solid var(--stroke);
    color: var(--text-2);
  }

  #usercp .btn-ghost:hover {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--stroke));
    color: var(--accent);
  }

  #usercp .usercp-section .row.inline.two-1 > div:first-child {
    flex: 2;
  }

  #usercp .usercp-section .row.inline.two-1 > div:last-child {
    flex: 1;
  }

  #usercp .editForm textarea {
    resize: vertical;
    min-height: 88px;
  }

  #usercp .editForm .usercp-actions {
    margin-top: 16px;
    gap: 10px;
  }

  /* — My servers widgets — */
  #usercp .servers-list {
    display: grid;
    gap: 16px;
  }

  #usercp .servers-list .my-item {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "card actions"
      "editor editor";
    gap: 10px 12px;
    align-items: start;
  }

  #usercp .servers-list .my-item .card {
    grid-area: card;
    padding: 16px 18px;
    border-radius: 14px;
    background: linear-gradient(145deg, var(--card), var(--bg-2));
    border: 1px solid var(--stroke);
    box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: border-color 0.25s, box-shadow 0.25s;
  }

  #usercp .servers-list .my-item .card:hover {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--stroke));
    box-shadow: var(--shadow-1), 0 0 24px color-mix(in srgb, var(--accent) 10%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }

  #usercp .servers-list .my-item .actions {
    grid-area: actions;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  #usercp .servers-list .my-item .actions button,
  #usercp .servers-list .my-item .actions a {
    background: var(--glass);
    border: 1px solid var(--stroke);
    color: var(--text-2);
    padding: 10px 14px;
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
  }

  #usercp .servers-list .my-item .actions button:hover,
  #usercp .servers-list .my-item .actions a:hover {
    transform: translateX(2px);
    border-color: color-mix(in srgb, var(--accent) 40%, var(--stroke));
    box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 12%, transparent);
  }

  #usercp .servers-list .my-item .actions .primary {
    background: var(--button-gradient);
    border-color: color-mix(in srgb, var(--accent) 50%, #1a1408);
    color: #111;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 28%, transparent);
  }

  #usercp .servers-list .my-item .editor {
    grid-area: editor;
    display: none;
    padding: 18px 20px;
    border-radius: 14px;
    border: 1px solid var(--stroke);
    background: linear-gradient(180deg, var(--bg-1), var(--bg-0));
    box-shadow: inset 0 0 32px rgba(0, 0, 0, 0.35);
  }

  #usercp .servers-list .my-item .editor.open {
    display: block;
    animation: editorIn 0.22s ease;
  }

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

  #usercp .pay-embed {
    border-radius: 14px !important;
    overflow: hidden;
    border: 1px solid var(--stroke) !important;
    box-shadow: var(--shadow-1);
  }

  #usercp .pill,
  #usercp .pill-danger {
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 600;
  }

  @media (max-width: 760px) {
    #usercp .usercp-head {
      flex-direction: column;
      align-items: stretch;
    }
    #usercp .usercp-title,
    #usercp .usercp-head .title {
      border-right: none;
      padding-right: 0;
      margin-right: 0;
    }
    #usercp .usercp-tabs {
      order: 3;
      width: 100%;
      margin: 8px 0 0;
    }
    #usercp .usercp-head #btnLogout {
      margin-left: 0;
      width: 100%;
    }
    #usercp .servers-list .my-item {
      grid-template-columns: 1fr;
      grid-template-areas: "card" "actions" "editor";
    }
    #usercp .servers-list .my-item .actions {
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-start;
    }
  }
  
  /* hide legacy small add-server modal trigger binding */
  
  .open-add-server,
  .open-add-banner {
    display: none !important;
  }
  
  /* ==========================================================================
  
     TOP PAGE (top.php)
  
     ========================================================================== */
  
  /* Frame + toolbar */
  
  .page-frame {
    max-width: 1280px;
    margin: 20px auto;
    padding: 0 20px;
    position: relative;
    z-index: 2;
  }
  
  .top-toolbar {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 10px;
    margin: 10px 0;
  }
  
  .top-toolbar input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--stroke);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
  }
  
  .top-toolbar input::placeholder {
    color: var(--muted);
  }
  
  /* Селект в тёмном стиле */
  
  .top-toolbar select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: rgba(
      255,
      255,
      255,
      0.06
    ) !important; /* фон «как у инпутов» */
    color: var(--text) !important;
    border: 1px solid var(--stroke);
    border-radius: 10px;
    padding: 10px 36px 10px 12px; /* место под стрелку справа */
    line-height: 1.2;
  }
  
  /* Стрелка (svg) поверх фона */
  
  .top-toolbar select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
  }
  
  /* Цвета при фокусе */
  
  .top-toolbar select:focus {
    outline: none;
    border-color: rgba(255, 153, 0, 0.6);
    box-shadow: 0 0 0 3px rgba(255, 153, 0, 0.12);
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: var(--text) !important;
  }
  
  /* Сами пункты выпадающего списка (когда раскрыт) */
  
  .top-toolbar select option {
    background: #121212;
    color: #fff;
  }
  
  /* На некоторых Edge/Chromium белеет при disabled – фикс */
  
  .top-toolbar select:disabled {
    background-color: rgba(255, 255, 255, 0.04) !important;
    color: rgba(255, 255, 255, 0.5) !important;
    cursor: not-allowed;
  }
  
  @media (max-width: 900px) {
    .top-toolbar {
      grid-template-columns: 1fr;
    }
  }
  
  /* List area */
  
  .list-wrap {
    height: 60vh;
    padding: 5px;
    overflow: auto;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  
  .list-wrap::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
  
  #topList {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
  }
  
  /* Card layout on TOP page (each LI has class .server-card) */
  
  #topList .server-card {
    position: relative;
    transition: transform 0.25s ease;
  }

  #topList .server-card:hover {
    transform: translateY(-2px);
  }

  #topList .server-card:active {
    transform: translateY(0) scale(0.99);
  }

  #topList .server-card .server-content {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 12px;
    background: linear-gradient(180deg, var(--card), var(--card-2));
    border: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 0.28s ease, box-shadow 0.28s ease, border-color 0.25s ease;
  }

  #topList .server-card:hover .server-content {
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
  }

  /* Top 1000 page only: no VIP/HOT glow/border – premium rows look like normal */
  #topList .server-card.is-vip .server-content,
  #topList .server-card.is-vip:hover .server-content,
  #topList .server-card.is-hot .server-content,
  #topList .server-card.is-hot:hover .server-content {
    background: linear-gradient(180deg, var(--card), var(--card-2)) !important;
    border-color: rgba(255, 255, 255, 0.04) !important;
    box-shadow: none;
  }
  #topList .server-card.is-vip:hover .server-content,
  #topList .server-card.is-hot:hover .server-content {
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
  }
  #topList .server-card.is-hot .server-content {
    animation: none;
  }
  #topList .server-card.premium-2 .date {
    border-color: rgba(255, 255, 255, 0.12) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: inherit !important;
  }
  #topList .server-card.premium-2 .name {
    color: inherit;
  }
  #topList .server-card.premium-1 .date {
    border-color: rgba(255, 255, 255, 0.12) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: inherit !important;
  }
  #topList .server-card.premium-1 .name {
    color: inherit;
  }
  
  #topList .server-card .rank {
    font-weight: 800;
    color: #ffc48f;
    font-size: 24px;
  
    width: 42px;
    text-align: center;
  }
  
  #topList .server-card .name-wrap .name {
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    font-family: 'Cinzel', 'Cinzel Decorative', 'Trajan Pro', 'Cormorant Garamond', 'Goudy Old Style', 'Times New Roman', serif;
  }
  
  #topList .server-card .name-wrap .meta {
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    margin-top: 2px;
    opacity: 0.95;
  }
  
  #topList .server-card .cell.inline-actions {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  /* Load more */
  
  .load-more-wrap {
    display: flex;
    justify-content: center;
    margin: 14px 0 4px;
  }
  
  .load-more {
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--accent);
    color: #111;
  
    border: 1px solid var(--accent);
    font-weight: 700;
    cursor: pointer;
  }
  
  .load-more[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
  }
  
  /* Tooltip (recent likes) on TOP page — reuse shared but slightly wider */
  
  .card-tip {
    max-width: 360px;
  }
  
  /* TOP page modal (server details + reviews) */
  
  .modal-card {
    width: min(1200px, 70vw);
  
    height: 70vh;
  
    display: flex;
    flex-direction: column;
  
    color: var(--text);
  
    background: linear-gradient(180deg, var(--card), var(--card-2));
  
    border: 1px solid var(--stroke);
  
    border-radius: var(--radius);
  
    backdrop-filter: saturate(120%) blur(8px);
    -webkit-backdrop-filter: saturate(120%) blur(8px);
  
    animation: modalIn 0.2s ease;
  
    overflow: hidden;
  }
  
  .m-head {
    display: flex;
    align-items: center;
    gap: 10px;
  
    padding: 12px 14px;
    border-bottom: 1px solid var(--stroke);
  
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent);
  }
  
  .m-ava {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  
    display: flex;
    align-items: center;
    justify-content: center;
  
    background: #2a2a2a;
    border: 1px solid #3a3a3a;
    font-weight: 800;
  }
  
  .m-title {
    font-weight: 800;
    letter-spacing: 0.2px;
  }
  
  .m-close {
    margin-left: auto;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--stroke);
  
    background: rgba(255, 255, 255, 0.08);
    color: var(--text);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
  }
  
  .m-close:hover {
    background: rgba(255, 255, 255, 0.14);
  }
  
  .m-grid {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 12px;
  
    padding: 12px;
    overflow: auto;
    max-height: calc(80vh - 58px);
  }
  
  @media (max-width: 900px) {
    .m-grid {
      grid-template-columns: 1fr;
    }
  }
  
  /* Simple boxed sections inside modal */
  
  .box {
    border: 1px solid rgba(255, 255, 255, 0.08);
  
    background: rgba(255, 255, 255, 0.04);
  
    border-radius: 10px;
  
    padding: 10px;
  }
  
  /* Reviews block */
  
  .rev-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 6px;
  }
  
  .rev-head .avg {
    font-weight: 800;
  }
  
  .rev-form {
    display: grid;
    gap: 8px;
    margin-top: 8px;
  }
  
  .rev-form .stars {
    display: flex;
    gap: 6px;
  }
  
  .rev-form .stars button {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--stroke);
    background: rgba(255, 255, 255, 0.06);
    cursor: pointer;
    color: #ffd700;
    font-size: 18px;
    transition: color 0.2s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .rev-form .stars button:hover {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 0.1);
  }
  
  .rev-form .stars button.selected,
  .rev-form .stars button[data-selected="true"] {
    color: #ffd700;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
  }
  
  .rev-item {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 8px;
    margin-top: 8px;
  }
  
  .rev-item .meta {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 4px;
  }
  
  /* ==========================================================================
  
     INFO / DOCS PAGES (About, Partners, Postback)
  
     ========================================================================== */
  
  .page-frame.page-scroll {
    height: 60vh;
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior: contain;
  }
  
  .page-frame.page-scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
  
  .page-title {
    margin: 6px 0 12px;
    font-size: 24px;
    letter-spacing: 0.3px;
  }
  
  /* FAQ */
  
  .faq {
    display: grid;
    gap: 12px;
    margin: 10px 0 60px;
  }
  
  .faq details {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    overflow: hidden;
  }
  
  .faq summary {
    cursor: pointer;
    list-style: none;
    padding: 12px 14px;
    font-weight: 700;
    letter-spacing: 0.2px;
    outline: none;
  }
  
  .faq summary::-webkit-details-marker {
    display: none;
  }
  
  .faq .content {
    padding: 0 14px 12px 14px;
    color: var(--text);
  }
  
  .faq .steps {
    margin: 8px 0 0;
    padding-left: 18px;
  }
  
  .faq code {
    background: rgba(255, 255, 255, 0.08);
    padding: 2px 6px;
    border-radius: 6px;
  }
  
  .faq .hint {
    color: var(--muted);
    font-size: 12px;
  }
  
  .faq .badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    margin-left: 6px;
  }
  
  /* Partners */
  
  .page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 6px 0 10px;
  }
  
  .page-head .muted {
    color: var(--muted);
    font-size: 14px;
  }
  
  .partners {
    display: grid;
    gap: 12px;
    margin-bottom: 40px;
  }
  
  .partner {
    display: flex;
    gap: 14px;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    padding: 12px 14px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  }
  
  .partner:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(3, 0, 20, 0.35);
    background: rgba(255, 255, 255, 0.06);
  }
  
  .partner .logo-wrap {
    width: 120px;
    min-width: 120px;
    height: 72px;
    border-radius: 10px;
    background: rgba(15, 15, 15, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
  }
  
  .partner .logo-wrap img {
    max-width: 110px;
    max-height: 60px;
    object-fit: contain;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35));
  }
  
  .partner .info {
    flex: 1;
    min-width: 0;
  }
  
  .partner .info h3 {
    margin: 0 0 4px;
    font-size: 18px;
    letter-spacing: 0.2px;
  }
  
  .partner .info p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.45;
  }
  
  .partner .actions {
    display: flex;
    gap: 8px;
  }
  
  .partner .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 10px;
    font-weight: 700;
    letter-spacing: 0.2px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: linear-gradient(180deg, rgba(255, 160, 40, 0.25), rgba(255, 111, 182, 0.25));
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    transition: filter 0.2s ease, transform 0.2s ease;
  }
  
  .partner .btn:hover {
    filter: brightness(1.05);
  }
  
  .partner .btn:active {
    transform: translateY(1px);
  }
  
  .partner-guide {
    border: 1px dashed rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    padding: 0 14px 12px;
    margin-top: 14px;
  }
  
  .partner-guide summary {
    cursor: pointer;
    list-style: none;
    font-weight: 700;
    padding: 12px 0;
  }
  
  .partner-guide summary::-webkit-details-marker {
    display: none;
  }
  
  .partner-guide .info {
    margin-top: 6px;
    color: var(--muted);
  }
  
  /* Documentation */
  
  .page-wrap {
    max-width: 1240px;
    margin: 80px auto 60px;
    padding: 0 20px;
    position: relative;
    z-index: 2;
  }
  
  .page-wrap .title {
    font-size: 28px;
    font-weight: 900;
    margin: 0 0 10px;
  }
  
  .step {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 14px;
    padding: 16px;
  }
  
  .step + .step {
    margin-top: 14px;
  }
  
  .tight {
    margin: 8px 0 0 22px;
  }
  
  .tight li {
    margin: 6px 0;
  }
  
  .note,
  .small {
    font-size: 13px;
    opacity: 0.9;
    margin-top: 0;
  }
  
  .codebox {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: rgba(15, 13, 24, 0.92);
    margin-top: 10px;
  }
  
  .codebox__top {
    display: flex;
    justify-content: flex-end;
    padding: 8px;
  }
  
  .codebox__btn,
  .codebox__toggle {
    color: #fff;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    cursor: pointer;
  }
  
  pre.code {
    margin: 0;
    padding: 12px;
    overflow: auto;
    white-space: pre;
    font-family: "JetBrains Mono", "Fira Code", Menlo, monospace;
    font-size: 13px;
    line-height: 1.45;
  }
  
  .codebox__fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 38px;
    height: 64px;
    background: linear-gradient(to bottom, rgba(15, 13, 24, 0), rgba(15, 13, 24, 1));
    display: none;
  }
  
  .codebox__bottom {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 8px;
  }
  
  .codebox--collapsed .codebox__fade,
  .codebox--collapsed .codebox__bottom {
    display: flex;
  }
  
  .grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  
  @media (max-width: 960px) {
    .grid-2 {
      grid-template-columns: 1fr;
    }
  }
  
  /* — Ставим уведомление выше любого модала/оверлея — */
  
  :root {
    --z-usercp: 9000; /* если используешь для usercp */
  
    --z-notify: 100000; /* нотификация всегда выше */
  }
  
  #notifyModal {
    position: fixed !important;
  
    inset: 0 !important; /* top/right/bottom/left = 0 */
  
    display: none; /* показываем из JS */
  
    align-items: center;
  
    justify-content: center;
  
    z-index: var(--z-notify) !important;
  
    /* фон + блюр */
  
    background: rgba(10, 8, 20, 0.45);
  
    backdrop-filter: blur(6px);
  
    -webkit-backdrop-filter: blur(6px);
  }
  
  #notifyModal .modal-body {
    position: relative;
  
    z-index: 1; /* на всякий случай поверх бэкдропа */
  }
  
  /* если у usercp нет z-index — можно задать ниже, чем у notify */
  
  #usercp {
    z-index: var(--z-usercp);
  }
  
  /* Center notification tweaks */
  
  .notify-body {
    text-align: center;
  }
  
  .notify-title {
    margin: 0 0 8px;
    font-size: 18px;
    color: #ffd9b2;
  }
  
  .notify-msg {
    margin: 0 0 12px;
    color: var(--text);
    opacity: 0.95;
  }
  
  .notify-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 6px;
  }
  
  .notify-actions .btn-primary {
    min-width: 120px;
  }
  
  .notify-actions .btn-ghost {
    min-width: 120px;
  }
  
  /* Mobile menu toggle */
  .mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 10002;
    position: relative;
  }
  
  .mobile-menu-toggle span {
    width: 100%;
    height: 3px;
    background: var(--text);
    border-radius: 10px;
    transition: all 0.3s ease;
  }
  
  .mobile-menu-toggle.active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
  }
  
  .mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
  }
  
  .mobile-menu-toggle.active span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
  }
  
  /* Responsive navigation */
  @media (max-width: 900px) {
    .page-header {
      z-index: 10001;
    }
    
    .mobile-menu-toggle {
      display: flex;
    }
    
    .main-nav {
      display: flex;
      position: fixed;
      top: 0;
      right: -100%;
      width: 280px;
      height: 100vh;
      background: linear-gradient(180deg, rgba(36, 32, 56, 0.18), rgba(46, 40, 70, 0.98));
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      flex-direction: column;
      align-items: flex-start;
      padding: 80px 20px 20px;
      transition: right 0.3s ease;
      box-shadow: -5px 0 15px rgba(0,0,0,0.5);
      z-index: 10000;
      overflow-y: auto;
    }
    
    .main-nav.active {
      right: 0;
    }
    
    .main-nav a {
      margin: 0 0 10px 0 !important;
      width: 100%;
      padding: 12px 15px;
      border-radius: 8px;
      display: block;
      color: var(--text);
      opacity: 1;
      visibility: visible;
    }
    
    .main-nav a:hover {
      background: rgba(255,255,255,0.1);
    }
    
    .main-nav .login-btn {
      margin: 10px 0 !important;
      width: 100%;
      text-align: center;
      display: block;
      opacity: 1;
      visibility: visible;
    }
    
    .main-nav .userbox {
      margin: 10px 0 !important;
      width: 100%;
      display: block;
      opacity: 1;
      visibility: visible;
    }
  }
  
  /* Responsive brutal ads */
  @media (max-width: 768px) {
    .top-ads {
      margin: 20px auto 30px;
      padding: 15px 10px;
      overflow: hidden;
    }

    .hero-subtitle {
      margin: 8px auto 0;
      font-size: 12.75px;
    }

    .top-ads > h2 {
      font-size: 21px !important;
      letter-spacing: 0.7px !important;
    }
    
    .ads-track {
      gap: 20px;
      padding: 5px;
    }
    
    .ad {
      width: 240px;
      height: 90px;
      animation: float 8s ease-in-out infinite;
    }
    
    .ad:hover {
      transform: translateZ(0) scale(1.025);
    }
    
    .ads-btn {
      width: 40px;
      height: 40px;
      font-size: 20px;
    }
    
    .ads-btn.prev {
      left: 5px;
    }
    .ads-btn.next {
      right: 5px;
    }
  }
  
  @media (max-width: 480px) {
    .top-ads {
      margin: 15px auto 25px;
    }
    
    .ads-track {
      gap: 15px;
    }
    
    .ad {
      width: 200px;
      height: 75px;
    }
    
    .ads-btn {
      width: 36px;
      height: 36px;
      font-size: 18px;
    }
  }

  /* ==========================================================================
  
     ACCOUNT DASHBOARD (account.php)
  
     ========================================================================== */

  .dashboard-shell {
    max-width: 1630px;
    margin: 40px auto 180px;
    padding: 0 24px;
    font-family: inherit;
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 24px;
  }

  .dashboard-sidebar {
    background: linear-gradient(180deg, var(--card), var(--card-2));
    border-radius: var(--radius-lg);
    border: 1px solid var(--stroke);
    box-shadow: var(--shadow-1);
    padding: 20px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .dashboard-userbox {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .dashboard-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
  }

  .dashboard-avatar--lg {
    width: 72px;
    height: 72px;
    border-radius: 22px;
  }

  .dashboard-user-meta {
    min-width: 0;
  }

  .dashboard-username {
    font-weight: 700;
    color: var(--text-1);
  }

  .dashboard-username-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  .dashboard-balance-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
    background: rgba(0, 0, 0, 0.22);
    color: #f5d98b;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
  }

  .dashboard-email {
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
  }

  .dashboard-nav-group {
    margin-top: 6px;
  }

  .dashboard-nav-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent-muted);
    margin-bottom: 6px;
  }

  .dashboard-nav-item,
  .dashboard-nav-logout {
    width: 100%;
    text-align: left;
    padding: 9px 10px;
    margin-bottom: 4px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-2);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
  }

  .dashboard-nav-item:hover:not([disabled]),
  .dashboard-nav-logout:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: color-mix(in srgb, var(--accent) 30%, transparent 70%);
    color: var(--text-1);
    transform: translateY(-1px);
  }

  .dashboard-nav-item[disabled] {
    opacity: 0.4;
    cursor: default;
  }

  .dashboard-nav-item--active {
    background: rgba(255, 255, 255, 0.06);
    border-color: color-mix(in srgb, var(--accent) 45%, transparent 55%);
    color: var(--text-1);
    box-shadow: 0 0 16px rgba(255, 191, 73, 0.15);
  }

  .dashboard-nav-logout {
    margin-top: 8px;
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.15), rgba(127, 29, 29, 0.25));
    border-color: rgba(248, 113, 113, 0.5);
    color: #fecaca;
  }

  .dashboard-main {
    background: linear-gradient(180deg, var(--card), var(--card-2));
    border-radius: var(--radius-lg);
    border: 1px solid var(--stroke);
    box-shadow: var(--shadow-2);
    padding: 22px 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .dashboard-main-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 14px;
  }

  .dashboard-main-head h1 {
    margin: 0 0 4px;
    font-size: 1.4rem;
    color: var(--text-1);
  }

  .dashboard-main-head p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--muted);
  }

  .dashboard-main-meta {
    display: flex;
    gap: 8px;
    align-items: center;
  }

  .dashboard-chip {
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.18);
    border: 1px solid rgba(22, 163, 74, 0.7);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #bbf7d0;
  }

  .dashboard-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.9fr) minmax(0, 1.2fr);
    gap: 18px;
    margin-top: 4px;
  }

  .dashboard-card {
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: radial-gradient(circle at top left, rgba(255, 191, 73, 0.12), transparent 48%),
                radial-gradient(circle at bottom right, rgba(88, 101, 242, 0.16), transparent 55%),
                linear-gradient(180deg, rgba(10, 8, 20, 0.96), rgba(8, 7, 15, 0.98));
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.7);
    padding: 18px 18px 16px;
  }

  .dashboard-card--profile {
    grid-column: 1 / -1;
  }

  .dashboard-card--accent {
    background: radial-gradient(circle at top left, rgba(34, 197, 94, 0.18), transparent 55%),
                radial-gradient(circle at bottom right, rgba(234, 179, 8, 0.18), transparent 55%),
                linear-gradient(180deg, rgba(8, 47, 73, 0.96), rgba(8, 47, 73, 1));
  }

  .dashboard-card-head h2 {
    margin: 0 0 4px;
    font-size: 1.05rem;
    color: var(--text-1);
  }

  .dashboard-card-head p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--muted);
  }

  .dashboard-card-body p {
    margin: 0 0 16px;
    font-size: 0.9rem;
    color: var(--text-2);
  }

  .server-panel-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
  }

  .server-panel-actions .btn-primary,
  .server-panel-actions .btn-secondary {
    width: 100%;
    justify-content: center;
  }

  .dashboard-form {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .dashboard-form-row label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent-muted);
    margin-bottom: 6px;
  }

  .dashboard-form-row input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(0, 0, 0, 0.35);
    color: var(--text-1);
    font-size: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  }

  .dashboard-form-row input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(255, 191, 73, 0.28);
    background: #0b0b16;
  }

  .dashboard-input--readonly {
    opacity: 0.85;
    cursor: default;
  }

  .dashboard-form-actions {
    margin-top: 4px;
  }

  .dashboard-alert {
    margin-top: 10px;
    padding: 9px 11px;
    border-radius: 10px;
    font-size: 13px;
  }

  .dashboard-alert--ok {
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(22, 163, 74, 0.65);
    color: #bbf7d0;
  }

  .dashboard-alert--error {
    background: rgba(248, 113, 113, 0.12);
    border: 1px solid rgba(248, 113, 113, 0.7);
    color: #fecaca;
  }

  .avatar-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    margin-bottom: 4px;
  }

  .avatar-col {
    display: flex;
    justify-content: center;
  }

  .avatar-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .avatar-presets {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  .avatar-preset-btn {
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    overflow: hidden;
  }

  .avatar-preset-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .avatar-preset-btn:hover {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(255, 191, 73, 0.18);
  }

  .dashboard-card--tools {
    margin-top: 4px;
    padding: 16px;
  }

  .dashboard-tools-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
  }

  .dashboard-tools-title {
    font-size: 12px;
    color: var(--text-2);
  }

  .dashboard-tools-wrap .usercp-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
  }

  .dashboard-tools-wrap .usercp-tabs .tab-btn {
    font-family: inherit;
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 10px 14px;
    border-radius: 10px;
    cursor: pointer;
    color: var(--text-2);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--stroke);
    transition: color 0.2s, background 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  }

  .dashboard-tools-wrap .usercp-tabs .tab-btn:hover {
    color: var(--text-1);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--stroke));
    box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 12%, transparent);
    transform: translateY(-1px);
  }

  .dashboard-tools-wrap .usercp-tabs .tab-btn.active {
    color: #111;
    background: var(--button-gradient);
    border-color: color-mix(in srgb, var(--accent) 60%, #1a1408);
    box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 28%, transparent);
  }

  .dashboard-usercp-body {
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    padding: 14px;
    background: linear-gradient(180deg, rgba(7, 8, 16, 0.5), rgba(7, 8, 16, 0.36));
  }

  .dashboard-form-compact .row {
    margin-bottom: 12px;
  }

  .dashboard-form-compact .row.inline {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .dashboard-form-compact .row.inline.two-1 {
    grid-template-columns: 1.6fr 1fr;
  }

  .dashboard-form-compact label {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent-muted);
  }

  .dashboard-form-compact .hint {
    color: var(--muted);
    opacity: 0.8;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    font-size: 11px;
    margin-left: 3px;
  }

  .dashboard-form-compact input,
  .dashboard-form-compact select,
  .dashboard-form-compact textarea,
  .dashboard-tools-wrap .editForm input,
  .dashboard-tools-wrap .editForm select,
  .dashboard-tools-wrap .editForm textarea {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(0, 0, 0, 0.35);
    color: var(--text-1);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  }

  .dashboard-form-compact input:focus,
  .dashboard-form-compact select:focus,
  .dashboard-form-compact textarea:focus,
  .dashboard-tools-wrap .editForm input:focus,
  .dashboard-tools-wrap .editForm select:focus,
  .dashboard-tools-wrap .editForm textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(255, 191, 73, 0.25);
    background: #0b0b16;
  }

  /* Date/time picker accent for account Add/Edit forms */
  .dashboard-form-compact input[type="datetime-local"],
  .dashboard-tools-wrap .editForm input[type="datetime-local"] {
    color-scheme: dark;
  }

  .dashboard-form-compact input[type="datetime-local"]::-webkit-calendar-picker-indicator,
  .dashboard-tools-wrap .editForm input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    opacity: 0.95;
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    padding: 2px;
    border: 1px solid rgba(255, 191, 73, 0.28);
    background-color: rgba(255, 191, 73, 0.08);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23f4c15d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
  }

  .dashboard-form-compact input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator,
  .dashboard-tools-wrap .editForm input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator,
  .dashboard-form-compact input[type="datetime-local"]:focus::-webkit-calendar-picker-indicator,
  .dashboard-tools-wrap .editForm input[type="datetime-local"]:focus::-webkit-calendar-picker-indicator {
    border-color: rgba(255, 191, 73, 0.48);
    background-color: rgba(255, 191, 73, 0.14);
    box-shadow: 0 0 0 2px rgba(255, 191, 73, 0.22);
    opacity: 1;
  }

  .dashboard-tools-wrap .usercp-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
  }

  .dashboard-tools-wrap .servers-list .my-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "card actions" "editor editor";
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.2);
    margin-bottom: 10px;
  }

  .dashboard-tools-wrap .servers-list .my-item .card {
    grid-area: card;
  }

  .dashboard-tools-wrap .servers-list .my-item .actions {
    grid-area: actions;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
  }

  .dashboard-tools-wrap .servers-list .my-item .actions button,
  .dashboard-tools-wrap .servers-list .my-item .actions a {
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-1);
    padding: 8px 12px;
    text-decoration: none;
    text-align: center;
  }

  .dashboard-tools-wrap .servers-list .my-item .actions .primary {
    background: var(--button-gradient);
    color: #111;
    border-color: color-mix(in srgb, var(--accent) 60%, #1a1408);
    font-weight: 700;
  }

  .dashboard-tools-wrap .servers-list .my-item .editor {
    grid-area: editor;
    display: none;
  }

  .dashboard-tools-wrap .servers-list .my-item .editor.open {
    display: block;
  }

  .dashboard-tools-wrap #mineWrap {
    display: grid;
    gap: 14px;
  }

  .dashboard-tools-wrap .my-servers-empty {
    padding: 22px 20px;
    border-radius: 14px;
    border: 1px dashed rgba(255, 255, 255, 0.18);
    background:
      radial-gradient(circle at 0% 0%, rgba(255, 191, 73, 0.1), transparent 55%),
      linear-gradient(180deg, rgba(9, 12, 20, 0.78), rgba(7, 9, 17, 0.9));
    color: var(--text-2);
  }

  .dashboard-tools-wrap .my-servers-empty__title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-1);
    margin-bottom: 6px;
    letter-spacing: 0.01em;
  }

  .dashboard-tools-wrap .my-servers-empty p {
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
  }

  .dashboard-tools-wrap .servers-list--premium {
    display: grid;
    gap: 14px;
  }

  .dashboard-tools-wrap .servers-list--premium .my-item {
    --server-accent: rgba(166, 176, 195, 0.36);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    grid-template-areas:
      "card actions"
      "editor editor";
    gap: 12px;
    padding: 0;
    border-radius: 16px;
    border: 0;
    background: transparent;
    box-shadow: none;
    transition: transform 0.22s ease;
  }

  .dashboard-tools-wrap .servers-list--premium .my-item:hover {
    transform: translateY(-2px);
    box-shadow: none;
  }

  .dashboard-tools-wrap .servers-list--premium .my-item.is-hot {
    --server-accent: rgba(255, 193, 99, 0.58);
  }

  .dashboard-tools-wrap .servers-list--premium .my-item.is-vip {
    --server-accent: rgba(124, 171, 255, 0.55);
  }

  .dashboard-tools-wrap .servers-list--premium .my-item .card {
    grid-area: card;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background:
      radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--server-accent) 24%, transparent), transparent 45%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 45%),
      linear-gradient(180deg, rgba(15, 17, 30, 0.92), rgba(9, 11, 20, 0.94));
    padding: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 14px 30px rgba(0, 0, 0, 0.34);
  }

  .dashboard-tools-wrap .servers-list--premium .my-server-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
  }

  .dashboard-tools-wrap .servers-list--premium .my-server-title {
    margin: 0;
    font-size: 1.03rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--text-1);
  }

  .dashboard-tools-wrap .servers-list--premium .my-server-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
  }

  .dashboard-tools-wrap .servers-list--premium .my-server-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-2);
  }

  .dashboard-tools-wrap .servers-list--premium .my-server-meta small {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
  }

  .dashboard-tools-wrap .servers-list--premium .my-server-meta b {
    font-size: 0.76rem;
    font-weight: 700;
    color: #e8e7ef;
  }

  .dashboard-tools-wrap .servers-list--premium .my-server-badges {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
  }

  .dashboard-tools-wrap .servers-list--premium .my-plan-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--server-accent) 70%, rgba(255, 255, 255, 0.2));
    background: color-mix(in srgb, var(--server-accent) 20%, rgba(9, 12, 22, 0.9));
    color: color-mix(in srgb, var(--server-accent) 72%, #fff);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .dashboard-tools-wrap .servers-list--premium .leftpill {
    display: inline-flex;
  }

  .dashboard-tools-wrap .servers-list--premium .leftpill .pill {
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-2);
    padding: 4px 9px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
  }

  .dashboard-tools-wrap .servers-list--premium .leftpill .pill-danger {
    border-color: rgba(248, 113, 113, 0.7);
    color: #fecaca;
    background: rgba(127, 29, 29, 0.26);
  }

  .dashboard-tools-wrap .servers-list--premium .my-server-share-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .dashboard-tools-wrap .servers-list--premium .my-share-box {
    border-radius: 12px;
    border: 0;
    background: rgba(4, 6, 12, 0.42);
    padding: 10px;
  }

  .dashboard-tools-wrap .servers-list--premium .my-share-label {
    margin-bottom: 8px;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--accent-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  .dashboard-tools-wrap .servers-list--premium .my-share-field-row,
  .dashboard-tools-wrap .servers-list--premium .my-share-html-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex-wrap: wrap;
  }

  .dashboard-tools-wrap .servers-list--premium .my-share-input,
  .dashboard-tools-wrap .servers-list--premium .my-share-code {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(12, 15, 26, 0.9);
    border-radius: 10px;
    color: #d9deea;
    padding: 10px 11px;
    font-size: 0.78rem;
    line-height: 1.4;
  }

  .dashboard-tools-wrap .servers-list--premium .my-share-input:focus,
  .dashboard-tools-wrap .servers-list--premium .my-share-code:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--server-accent) 62%, rgba(255, 255, 255, 0.2));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--server-accent) 18%, transparent);
  }

  .dashboard-tools-wrap .servers-list--premium .my-share-input {
    flex: 1 1 420px;
    min-height: 40px;
  }

  .dashboard-tools-wrap .servers-list--premium .my-share-code {
    flex: 1 1 420px;
    min-height: 96px;
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  }

  .dashboard-tools-wrap .servers-list--premium .my-share-preview-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .dashboard-tools-wrap .servers-list--premium .my-banner-preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(9, 10, 16, 0.75);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    padding: 6px;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  }

  .dashboard-tools-wrap .servers-list--premium .my-banner-preview:hover {
    border-color: color-mix(in srgb, var(--server-accent) 65%, rgba(255, 255, 255, 0.22));
    transform: translateY(-1px);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--server-accent) 24%, transparent);
  }

  .dashboard-tools-wrap .servers-list--premium .my-banner-preview img {
    display: block;
    border-radius: 8px;
  }

  .dashboard-tools-wrap .servers-list--premium .actions {
    grid-area: actions;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .dashboard-tools-wrap .servers-list--premium .my-server-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    margin-top: 2px;
  }

  .dashboard-tools-wrap .servers-list--premium .my-server-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 30px;
    padding: 5px 8px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-2);
  }

  .dashboard-tools-wrap .servers-list--premium .my-server-stat span {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
  }

  .dashboard-tools-wrap .servers-list--premium .my-server-stat b {
    font-size: 0.84rem;
    font-weight: 800;
    color: var(--text-1);
  }

  .dashboard-tools-wrap .servers-list--premium .btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    padding: 8px 12px;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-1);
    text-decoration: none;
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
  }

  .dashboard-tools-wrap .servers-list--premium .btn-action:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--server-accent) 55%, rgba(255, 255, 255, 0.25));
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
  }

  .dashboard-tools-wrap .servers-list--premium .btn-action--primary {
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 74%, #f5cc7e), color-mix(in srgb, var(--accent) 60%, #b07b2f));
    border-color: color-mix(in srgb, var(--accent) 58%, #37250e);
    color: #18130a;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 24%, transparent);
  }

  .dashboard-tools-wrap .servers-list--premium .btn-action--secondary {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
  }

  .dashboard-tools-wrap .servers-list--premium .btn-action--ghost {
    min-width: 108px;
    text-transform: none;
    letter-spacing: 0.01em;
    font-size: 0.75rem;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-2);
  }

  .dashboard-tools-wrap .servers-list--premium .btn-action--ghost.is-copied {
    border-color: rgba(34, 197, 94, 0.68);
    background: rgba(22, 163, 74, 0.22);
    color: #bbf7d0;
  }

  .dashboard-tools-wrap .servers-list--premium .btn-action--danger {
    border-color: rgba(248, 113, 113, 0.55);
    background: linear-gradient(180deg, rgba(248, 113, 113, 0.16), rgba(127, 29, 29, 0.25));
    color: #fecaca;
  }

  .dashboard-tools-wrap .servers-list--premium .my-item .editor {
    grid-area: editor;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(180deg, rgba(8, 10, 18, 0.95), rgba(5, 7, 14, 0.96));
    padding: 16px;
  }

  .wallet-card {
    background: linear-gradient(180deg, rgba(68, 62, 100, 0.36), rgba(57, 52, 88, 0.26));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 18px;
  }

  .wallet-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
  }

  .wallet-head h3 {
    margin: 0;
    font-size: 1.9rem;
    color: #d6d2e8;
    letter-spacing: 0.01em;
  }

  .wallet-balance {
    border: 2px solid rgba(255, 191, 73, 0.7);
    border-radius: 999px;
    padding: 6px 14px;
    font-weight: 700;
    color: #f3e7b4;
    background: rgba(0, 0, 0, 0.25);
  }

  .wallet-balance b {
    color: #ffbf49;
  }

  .wallet-form label {
    display: block;
    margin-bottom: 8px;
    color: #b6afcf;
    font-size: 0.95rem;
  }

  .wallet-form input {
    width: min(560px, 100%);
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.2);
    color: #e8e6f2;
    font-size: 1.8rem;
    font-weight: 600;
  }

  .wallet-form .wallet-btn {
    margin-top: 16px;
    border-radius: 8px !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 800;
  }

  .topads-my-list {
    display: grid;
    gap: 12px;
    margin-top: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    justify-content: stretch;
    align-items: start;
  }

  .topads-my-item {
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(16, 20, 35, 0.68), rgba(9, 12, 22, 0.74));
    padding: 8px;
    width: 100%;
  }

  .topads-my-head {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    margin-bottom: 6px;
  }

  .topads-my-title-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .topads-my-title-wrap b {
    color: var(--text-1);
    letter-spacing: 0.03em;
    font-size: 0.83rem;
  }

  .topads-my-chips {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
  }

  .topads-chip {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-2);
    font-size: 0.72rem;
    line-height: 1;
  }

  .topads-chip--active {
    border-color: rgba(16, 185, 129, 0.62);
    background: linear-gradient(180deg, rgba(8, 70, 50, 0.55), rgba(7, 50, 38, 0.4));
    color: #bbf7d0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }

  .topads-chip--off {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(226, 232, 240, 0.82);
  }

  .topads-chip--left {
    border-color: rgba(56, 189, 248, 0.58);
    background: linear-gradient(180deg, rgba(12, 58, 90, 0.52), rgba(10, 38, 64, 0.38));
    color: #bae6fd;
  }

  .topads-chip--left-danger {
    border-color: rgba(248, 113, 113, 0.65);
    background: linear-gradient(180deg, rgba(127, 29, 29, 0.36), rgba(76, 17, 25, 0.4));
    color: #fecaca;
  }

  .topads-chip--until {
    border-color: rgba(255, 191, 73, 0.46);
    background:
      radial-gradient(circle at 14% 0%, rgba(255, 191, 73, 0.2), transparent 56%),
      linear-gradient(180deg, rgba(20, 22, 36, 0.9), rgba(10, 12, 22, 0.9));
    color: #f8e6bf;
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 6px 14px rgba(0, 0, 0, 0.28);
  }

  .topads-chip--danger {
    border-color: rgba(248, 113, 113, 0.58);
    background: rgba(127, 29, 29, 0.2);
    color: #fecaca;
  }

  .topads-my-extend {
    align-self: flex-start;
    white-space: nowrap;
    font-size: 0.72rem;
    padding: 6px 10px;
    border-radius: 9px;
    min-height: 34px;
  }

  .topads-my-extend.btn-primary {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 10px 20px rgba(0, 0, 0, 0.45), 0 0 18px rgba(255, 191, 73, 0.32);
  }

  .topads-my-extend.btn-primary:hover {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.62), 0 12px 24px rgba(0, 0, 0, 0.5), 0 0 24px rgba(255, 191, 73, 0.42);
  }

  .topads-my-preview-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }

  .topads-mini-ad {
    width: 100%;
    max-width: 270px;
    height: auto;
    aspect-ratio: 27 / 10;
  }

  .topads-my-link {
    font-size: 12px;
    color: var(--muted);
    word-break: break-all;
  }

  .topads-my-link a {
    color: color-mix(in srgb, var(--accent) 60%, #7aa9ff);
    text-decoration: none;
  }

  .topads-my-link a:hover {
    text-decoration: underline;
  }

  @media (max-width: 1600px) {
    .topads-my-list {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (max-width: 1200px) {
    .topads-my-list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 760px) {
    .topads-my-list {
      grid-template-columns: 1fr;
    }
  }

  .topads-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(270px, 26vw, 360px);
    gap: 16px;
    align-items: start;
  }

  .topads-info {
    position: sticky;
    top: 10px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--stroke));
    background:
      radial-gradient(circle at 6% 4%, rgba(255, 191, 73, 0.14), transparent 52%),
      radial-gradient(circle at 100% 0%, rgba(87, 147, 255, 0.16), transparent 45%),
      linear-gradient(180deg, rgba(17, 19, 33, 0.96), rgba(10, 11, 20, 0.98));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 16px 30px rgba(0, 0, 0, 0.48);
  }

  .topads-kicker {
    font-family: inherit;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.68rem;
    color: color-mix(in srgb, var(--accent) 65%, #fff);
    margin-bottom: 4px;
  }

  .topads-available {
    font-family: inherit;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text-1);
    margin-bottom: 8px;
    letter-spacing: 0.01em;
    line-height: 1.2;
  }

  .topads-progress {
    height: 9px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
    margin-bottom: 8px;
  }

  .topads-progress > span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ffcf59, #ff8f5b);
    box-shadow: 0 0 16px rgba(255, 176, 80, 0.5);
    transition: width 260ms ease;
  }

  .topads-summary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 9px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-2);
    font-weight: 700;
    font-size: 0.8rem;
    margin-bottom: 10px;
  }

  .topads-caption {
    color: var(--muted);
    font-size: 0.8rem;
    margin-bottom: 8px;
    line-height: 1.4;
  }

  .topads-dates {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    max-height: 356px;
    overflow: auto;
    padding-right: 2px;
  }

  .topads-date-pill {
    display: flex;
    align-items: center;
    align-items: center;
    gap: 6px;
    padding: 6px 7px;
    border-radius: 9px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }

  .topads-date-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 21px;
    height: 21px;
    border-radius: 6px;
    background: rgba(255, 179, 77, 0.16);
    border: 1px solid rgba(255, 198, 113, 0.38);
    color: #ffdba0;
    font-size: 0.64rem;
    font-weight: 800;
    flex: 0 0 auto;
  }

  .topads-date-label {
    color: var(--muted);
    font-size: 0.64rem;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  .topads-date-value {
    color: var(--text-1);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.1;
    white-space: nowrap;
  }

  .topads-date-pill.empty {
    opacity: 0.9;
    border-style: dashed;
    display: block;
    padding: 10px 12px;
    grid-column: 1 / -1;
    color: var(--text-2);
    font-size: 0.85rem;
    font-weight: 600;
  }

  @media (max-width: 1400px) {
    .topads-dates {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 560px) {
    .topads-dates {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 1100px) {
    .topads-layout {
      grid-template-columns: 1fr;
    }
    .topads-info {
      position: static;
    }

    .dashboard-tools-wrap .servers-list--premium .my-item {
      grid-template-columns: 1fr;
      grid-template-areas:
        "card"
        "actions"
        "editor";
    }

    .dashboard-tools-wrap .servers-list--premium .actions {
      flex-direction: row;
      flex-wrap: wrap;
    }
  }

  @media (max-width: 1024px) {
    .dashboard-shell {
      grid-template-columns: 1fr;
      gap: 18px;
    }

    .dashboard-main-grid {
      grid-template-columns: 1fr;
    }

    .dashboard-sidebar {
      order: 2;
    }
  }

  @media (max-width: 720px) {
    .dashboard-main-head {
      flex-direction: column;
      align-items: flex-start;
    }

    .avatar-row {
      grid-template-columns: auto;
      justify-items: flex-start;
    }

    .dashboard-form-compact .row.inline,
    .dashboard-form-compact .row.inline.two-1 {
      grid-template-columns: 1fr;
    }

    .dashboard-tools-wrap .servers-list .my-item {
      grid-template-columns: 1fr;
      grid-template-areas: "card" "actions" "editor";
    }

    .dashboard-tools-wrap .servers-list .my-item .actions {
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-start;
    }

    .dashboard-tools-wrap .servers-list--premium .my-server-head {
      flex-direction: column;
      align-items: flex-start;
    }

    .dashboard-tools-wrap .servers-list--premium .my-server-badges {
      justify-content: flex-start;
    }

    .dashboard-tools-wrap .servers-list--premium .my-share-preview-col {
      width: 100%;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }

    .dashboard-tools-wrap .servers-list--premium .my-share-preview-col .btn-action--ghost {
      min-width: 0;
      flex: 1;
    }
  }