:root {
      --hot-pink: #FF3FA4;
      --baby-pink: #f8b8d8;
      --light-pink: #fce4f0;
      --black: #111;
      --white: #fff;
      --neon-green: #39ff14;
      --dark-pink: #c0005a;
    }
    body {
      background-color: var(--black);
      background-image:
        radial-gradient(circle, #ff3fa455 1px, transparent 1px),
        radial-gradient(circle, #ff3fa422 1px, transparent 1px);
      background-size: 30px 30px, 60px 60px;
      font-family: 'Helvetica';
      color: var(--black);
      min-height: 100vh;
      padding: 10px;
    }
    
    h2 {
      font-family: 'script';
      font-size:1.8vw;
      color:black;
      padding:-1vw;
      background: #FF3FA4;
      background: -webkit-linear-gradient(90deg, rgba(255, 63, 164, 1) 23%, rgba(237, 221, 83, 0) 100%);
      background: -moz-linear-gradient(90deg, rgba(255, 63, 164, 1) 23%, rgba(237, 221, 83, 0) 100%);
      background: linear-gradient(90deg, rgba(255, 63, 164, 1) 23%, rgba(237, 221, 83, 0) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FF3FA4", endColorstr="#EDDD53", GradientType=1);
      background-size:100%;
      line-height:2vw;
      margin-bottom:1vw;
      margin-left:-1vw;
}

    h3 {
      font-family: 'wasted';
      font-size:3vw;
}
      
    h4 {
      font-family: 'Georgia';
      font-size:2vw;
      color:black;
      letter-spacing: 1px;
}

a:hover {
  color: #ff3399;
}
a:active {
  color: lime;
}
a:visited {
  color:#ff3399;
}
li {
  list-style-image: url('/2/listie.gif');
  list-style-position: inside;
}
@font-face { font-family: 'decipher'; src: url('/1/decipher.otf'); }
@font-face { font-family: 'symbols';  src: url('/1/decipher2.otf'); }
@font-face { font-family: 'sexy';     src: url('/1/sexy.ttf'); }
@font-face { font-family: 'spray';    src: url('/1/spray.ttf'); }
@font-face { font-family: 'hearts';   src: url('/1/hearts.ttf'); }
@font-face { font-family: 'music';    src: url('/1/music.ttf'); }
@font-face { font-family: 'guns';     src: url('/1/2ndamend.ttf'); }
@font-face { font-family: 'script';     src: url('/1/script.ttf'); }
@font-face { font-family: 'wasted';     src: url('/1/wasted.otf'); }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    .page-wrapper {
      max-width: 820px;
      margin: 0 auto;
      border: 6px solid var(--hot-pink);
      background: var(--black);
      box-shadow: 0 0 30px var(--hot-pink), 0 0 60px #ff3fa455;
      position: relative;
      overflow: hidden;
    }


    .page-wrapper::before,
    .page-wrapper::after {
      content: '';
      position: absolute;
      top: 0; bottom: 0;
      width: 48px;
      background:
        radial-gradient(ellipse 14px 10px at 24px 20px, #c0005a 80%, transparent 81%),
        radial-gradient(ellipse 10px 8px at 10px 50px, #8b0038 80%, transparent 81%),
        radial-gradient(ellipse 12px 9px at 36px 80px, #c0005a 80%, transparent 81%),
        radial-gradient(ellipse 10px 7px at 20px 110px, #8b0038 80%, transparent 81%),
        radial-gradient(ellipse 14px 10px at 8px 140px, #c0005a 80%, transparent 81%),
        radial-gradient(ellipse 10px 8px at 38px 170px, #8b0038 80%, transparent 81%),
        radial-gradient(ellipse 12px 9px at 18px 200px, #c0005a 80%, transparent 81%),
        radial-gradient(ellipse 11px 8px at 32px 230px, #8b0038 80%, transparent 81%),
        radial-gradient(ellipse 13px 9px at 6px 260px, #c0005a 80%, transparent 81%),
        radial-gradient(ellipse 10px 7px at 40px 290px, #8b0038 80%, transparent 81%),
        radial-gradient(ellipse 14px 10px at 22px 320px, #c0005a 80%, transparent 81%),
        radial-gradient(ellipse 10px 8px at 12px 350px, #8b0038 80%, transparent 81%),
        radial-gradient(ellipse 12px 9px at 36px 380px, #c0005a 80%, transparent 81%),
        radial-gradient(ellipse 10px 7px at 20px 410px, #8b0038 80%, transparent 81%),
        radial-gradient(ellipse 14px 10px at 8px 440px, #c0005a 80%, transparent 81%),
        radial-gradient(ellipse 11px 8px at 38px 470px, #8b0038 80%, transparent 81%),
        radial-gradient(ellipse 13px 9px at 24px 500px, #c0005a 80%, transparent 81%),
        radial-gradient(ellipse 10px 8px at 10px 530px, #8b0038 80%, transparent 81%),
        radial-gradient(ellipse 12px 9px at 36px 560px, #c0005a 80%, transparent 81%),
        radial-gradient(ellipse 10px 7px at 20px 590px, #8b0038 80%, transparent 81%);
      background-color: var(--hot-pink);
      background-repeat: repeat-y;
      z-index: 0;
      pointer-events: none;
    }
    .page-wrapper::before { left: 0; }
    .page-wrapper::after  { right: 0; }

    .inner {
      margin: 0 48px;
      position: relative;
      z-index: 1;
    }

    /* ── HEADER ── */
    .header {
      background: var(--black);
      padding: 14px 16px 8px;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .header-text h1 {
      font-family: 'Decipher', sans-serif;
      font-weight: 900;
      font-size: clamp(1.7rem, 7vw, 2.7rem);
      color: var(--white);
      line-height: 1;
    }
    .header-text p {
      font-size: clamp(0.7rem, 2.5vw, 0.9rem);
      color: var(--white);
      font-weight: 400;
    }

    /* ── CATEGORIES BAR ── */
    .categories {
      background: var(--hot-pink);
      padding: 8px 12px;
      text-align: center;
      font-family: 'wasted';
    }
    .categories a {
      font-weight: 600;
      font-size: clamp(0.7rem, 2.8vw, 1rem);
      color: var(--white);
      text-shadow: 1px 1px 0 var(--dark-pink);
      letter-spacing: 1px;
      text-decoration:none;
    }
    .categories a:not(:last-child)::after {
      content: ' | ';
      color: var(--white);
    }
    
    .blackie {
      background: black;
      width:100%;
      height:100%;
      padding:2%;
    }
    
    .boxie {
      border: 3px solid var(--hot-pink);
      padding: 2%;
      background: var(--light-pink);
      display: flex;
      flex-direction: column;
      gap: 12px;
      width:100%;
    }

    /* -------------------------------------------- MAIN GRID ── */
    .main-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      background: var(--black);
    }

    @media (max-width: 560px) {
      .main-grid {
        grid-template-columns: 1fr;
      }
      .inner { margin: 0 32px; }
      .page-wrapper::before,
      .page-wrapper::after { width: 28px; }
    }

    /* ── LEFT COLUMN ── */
    .left-col {
      border-right: 3px solid var(--hot-pink);
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .profile-card {
      display: flex;
      gap: 10px;
      background: var(--light-pink);
      border: 2px solid var(--baby-pink);
      padding: 8px;
    }

    .avatar {
      width: 200px;
      height: 130px;
      background-image: url('/3/me.png');
      background-size:cover;
      background-position: center;
      background-repeat: no-repeat;
      border: 2px solid var(--baby-pink);
    }

    .profile-bio {
      font-size: clamp(0.65rem, 2.2vw, 0.8rem);
      color: var(--black);
      line-height: 1.6;
    }
    .profile-bio strong {
      display: block;
      color: var(--baby-pink);
    }

    .online-badge {
      display: flex;
      align-items: center;
      gap: 5px;
      margin-top: 6px;
    }
    .online-dot {
      width: 10px; height: 10px;
      background: var(--neon-green);
      border-radius: 50%;
      box-shadow: 0 0 6px var(--neon-green);
      animation: pulse 1.5s infinite;
    }
    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.4; }
    }
    .online-badge span {
      font-size: 0.72rem;
      color: var(--neon-green);
      font-style: italic;
      font-weight: 700;
    }

    .updates {
      background: var(--light-pink);
      padding: 10px;
      font-size: clamp(0.7rem, 2.2vw, 0.85rem);
      color: var(--black);
      text-align: justify;
      border: 2px solid var(--hot-pink);
      line-height: -0.5;
      
    }

    
    /* ------------------------------------------ RIGHT COLUMN ── */
    .right-col {
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    /* Login box */
    .login-box {
      background: var(--light-pink);
      border: 2px solid var(--hot-pink);
      padding: 10px 12px;
    }
    .login-box h3 {
      font-size: 0.85rem;
      font-weight: 900;
      margin-bottom: 8px;
      color: var(--black);
      border-bottom: 1px solid var(--hot-pink);
      padding-bottom: 4px;
    }
    .login-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 6px;
    }
    .login-row label {
      font-size: 0.78rem;
      font-weight: 700;
      min-width: 60px;
      color: var(--black);
    }
    .login-row input {
      flex: 1;
      padding: 4px 6px;
      font-size: 0.75rem;
      border: 1px solid #999;
      background: var(--white);
      font-family: 'Nunito', sans-serif;
    }
    
    .status {
      height:8vh;
      width:100%;
      border:2px solid white;
      background: var(--light-pink);
    }

    .chatbox {
      background: var(--light-pink);
      border: 2px solid var(--hot-pink);
      padding: 10px 12px;
    }
    .chatbox h3 {
      font-size: 0.85rem;
      font-weight: 900;
      margin-bottom: 8px;
      color: var(--black);
      border-bottom: 1px solid var(--hot-pink);
      padding-bottom: 4px;
    }
    .chatbox-inner {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* ---------------------------------------------------- GRID*/
    .top-finds {
      background: var(--light-pink);
      border: 2px solid var(--hot-pink);
      padding: 10px 12px;
    }
    .top-finds h3 {
      font-size: 0.95rem;
      font-weight: 900;
      margin-bottom: 8px;
      color: var(--black);
    }
    .finds-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 6px;
    }
    .find-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
    }
    .find-img {
      width: 100%;
      aspect-ratio: 1;
      background: linear-gradient(135deg, var(--baby-pink), var(--hot-pink));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      border: 1px solid var(--dark-pink);
    }
    .find-item span {
      font-size: clamp(0.55rem, 1.8vw, 0.68rem);
      font-weight: 700;
      color: var(--black);
      text-align: center;
    }

    /* Where to find */
    .where-box {
      background: var(--light-pink);
      border: 2px solid var(--hot-pink);
      padding: 10px 12px;
    }
    .where-box h3 {
      font-size: 0.9rem;
      font-weight: 900;
      margin-bottom: 6px;
      color: var(--black);
    }
    .where-box p {
      font-size: clamp(0.65rem, 2vw, 0.78rem);
      color: var(--black);
      line-height: 1.6;
    }
    .where-box .free-entry {
      margin-top: 4px;
      font-size: 0.72rem;
      color: var(--dark-pink);
      font-weight: 900;
    }
    
    .cutesie {
      width:4vw;
      position:static;
      max-height:100%;
    }
    
    .cutesie:hover {
      box-shadow: #FF82C1;