/* ----- RESET & BASE ----- */
    * { box-sizing: border-box; padding: 0; margin: 0; }
    body {
      font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
      background: #f8fafc;
      color: #0f172a;
      line-height: 1.6;
      padding: 0 20px;
    }

    /* ----- PAGE WRAPPER (sidebar + content) ----- */
    .page-wrapper {
      display: flex;
      gap: 20px;
      max-width: 1400px;
      margin: 20px auto;
      padding: 0 15px;
    }

    /* ----- SIDEBAR ----- */
    .sidebar {
      flex: 0 0 260px;
      display: block;
      background: #fff;
      border-radius: 15px;
      box-shadow: 2px 2px 12px 1px #d8d8d8;
      padding: 15px;
      height: fit-content;
      position: sticky;
      top: 20px;
    }
    .sidebar h3 {
      font-size: 18px;
      font-weight: 800;
      color: #0891b2;
      border-bottom: 2px solid #e5e7eb;
      padding-bottom: 10px;
      margin-bottom: 15px;
    }
    .sidebar ul { list-style: none; padding: 0; margin: 0; }
    .sidebar ul li { margin-bottom: 4px; }
    .sidebar ul li a {
      display: block;
      padding: 8px 12px;
      color: #334155;
      text-decoration: none;
      border-radius: 6px;
      font-size: 14px;
      transition: background 0.15s, color 0.15s;
    }
    .sidebar ul li a:hover { background: #e0f2fe; color: #0891b2; }
    .sidebar .cat-title {
      font-size: 13px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      color: #0891b2;
      margin: 18px 0 6px 0;
      padding-bottom: 4px;
      border-bottom: 1px solid #e5e7eb;
    }
    .sidebar .cat-title:first-of-type { margin-top: 0; }

    /* ----- MAIN CONTENT ----- */
    .main-content { flex: 1; min-width: 0; }

    /* ----- SIDEBAR TOGGLE (mobile) ----- */
    .sidebar-toggle {
      display: none;
      background: #0891b2;
      color: #fff;
      border: none;
      padding: 10px 20px;
      border-radius: 8px;
      font-weight: 700;
      cursor: pointer;
      margin-bottom: 15px;
    }
    .sidebar-toggle:hover { background: #0e7490; }

    /* ----- LEFTCOLUMN (nickname cards) ----- */
    .leftcolumn {
      padding: 15px;
      min-height: 1px;
      margin-top: 1px;
      border-radius: 15px;
      background-color: #fff;
      box-shadow: 2px 2px 12px 1px #d8d8d8;
    }

    .thish1 {
      font-size: 25px;
      margin: -15px -15px 20px;
      color: #fff;
      border-radius: 15px 15px 0 0;
      padding: 8px;
      background: linear-gradient(135deg, red 0%, #d913cb 52%, #6875dd 100%);
      background-size: 350% 350%;
      animation: waveColors 8s ease infinite;
      text-align: center;
    }
    @keyframes waveColors {
      0% { background-position: 0% 7%; }
      50% { background-position: 100% 94%; }
      100% { background-position: 0% 7%; }
    }

    .thish2 {
      margin-top: 10px;
      margin-bottom: 10px;
      color: #383838;
      font-size: 18px;
    }

    .nickfinder-ff {
      margin-left: 4px;
      margin-bottom: 5px;
      border-radius: 8px;
      border: 2px solid #2204a7;
      background: linear-gradient(135deg, #ffffff 0, #ffffff 50% 50%);
      display: inline-block;
      min-width: 45%;
      width: auto;
      padding: 0 5px;
      font-size: 20px;
      line-height: 51px;
      text-align: center;
      vertical-align: middle;
      overflow: hidden;
      cursor: pointer;
      box-shadow: 8px 4px 6px 4px #0323db33;
      transition: 0.5s;
    }
    .nickfinder-ff:hover {
      background: #adfffd;
      cursor: pointer;
    }

    #myUL { list-style-type: none; margin: 0 0 10px; display: inline; box-sizing: border-box; }
    #myUL li { display: inline; }

    .threedot { text-align: center; margin: 15px auto auto; }

    /* ----- RESPONSIVE ----- */
    @media (max-width: 768px) {
      .page-wrapper { flex-direction: column; }
      .page-wrapper .sidebar { flex: none; width: 100%; position: static; display: none; }
      .page-wrapper .sidebar.open { display: block; }
      .sidebar-toggle { display: none; }
      .nickfinder-ff { min-width: 48%; font-size: 13px; }
    }
    @media (max-width: 390px) {
      .thish1 { margin: -15px -8px 20px; }
      .leftcolumn { padding: 15px 8px; }
    }