/* ============================================================
   🍓 WEBBERRY Y2K GLOSS OVERHAUL
   Paste this AFTER your existing style.css
   ============================================================ */

/* ------------------------------------------------------------
   🌐 Y2K COLOUR SYSTEM
   ------------------------------------------------------------ */

   :root{
    --pink:#ff5f98;
    --pink2:#ffb7d5;
  
    --blue:#27b9d8;
    --blue2:#d9f9ff;
  
    --green:#9eeec1;
    --yellow:#fff4a8;
    --purple:#cbbcff;
  
    --text:#214858;
    --muted:#66828d;
  
    --white:#ffffff;
  
    --panel:rgba(255,255,255,.91);
  
    --border:#5fc1d6;
  
    --shadow:
      0 8px 0 rgba(61,170,194,.16),
      0 14px 30px rgba(38,130,151,.16);
  
    --y2k-blue:#b9f4ff;
    --y2k-cyan:#58d7ec;
    --y2k-pink:#ff75a8;
    --y2k-deep:#197b94;
  }
  
  
  /* ------------------------------------------------------------
     ✨ GLOBAL
     ------------------------------------------------------------ */
  
  *{
    box-sizing:border-box;
  }
  
  html{
    scroll-behavior:smooth;
  }
  
  body{
    margin:0;
    color:var(--text);
  
    font-family:
      "Nunito",
      "Trebuchet MS",
      Arial,
      sans-serif;
  
    background:
      radial-gradient(
        circle at 15% 12%,
        rgba(255,255,255,.95) 0 7px,
        transparent 8px
      ),
      radial-gradient(
        circle at 84% 30%,
        rgba(255,255,255,.85) 0 5px,
        transparent 6px
      ),
      radial-gradient(
        circle at 40% 75%,
        rgba(255,255,255,.8) 0 8px,
        transparent 9px
      ),
      linear-gradient(
        180deg,
        #d9faff 0%,
        #bceff7 25%,
        #dffaff 55%,
        #c8f3f5 100%
      );
  
    min-height:100vh;
    overflow-x:hidden;
  }
  
  
  /* tiny repeating Y2K dots */
  
  body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:-2;
  
    background-image:
      radial-gradient(
        rgba(255,255,255,.7) 1px,
        transparent 1px
      );
  
    background-size:22px 22px;
    opacity:.35;
  }
  
  
  /* soft glow */
  
  body::after{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:-3;
  
    background:
      radial-gradient(
        ellipse at 50% -10%,
        rgba(255,255,255,.9),
        transparent 55%
      );
  
    opacity:.8;
  }
  
  
  button,
  input,
  textarea,
  select{
    font:inherit;
  }
  
  button{
    cursor:pointer;
  }
  
  a{
    color:inherit;
  }
  
  
  /* ------------------------------------------------------------
     ☁️ BACKGROUND DECORATIONS
     ------------------------------------------------------------ */
  
  .bg-decoration{
    position:fixed;
    pointer-events:none;
    z-index:-1;
    opacity:.8;
  }
  
  
  /* glossy clouds */
  
  .cloud{
    width:170px;
    height:55px;
  
    background:
      linear-gradient(
        180deg,
        #ffffff 0%,
        #f4ffff 45%,
        #d9f8ff 100%
      );
  
    border-radius:50px;
  
    border:2px solid rgba(255,255,255,.9);
  
    box-shadow:
      0 5px 14px rgba(54,166,188,.12),
      inset 0 3px 5px rgba(255,255,255,.9);
  
    filter:none;
  }
  
  .cloud:before,
  .cloud:after{
    content:"";
    position:absolute;
  
    background:
      linear-gradient(
        180deg,
        #ffffff,
        #e4fbff
      );
  
    border-radius:50%;
  
    border:2px solid rgba(255,255,255,.7);
  
    box-shadow:
      inset 0 3px 5px rgba(255,255,255,.8);
  }
  
  .cloud:before{
    width:70px;
    height:70px;
    left:25px;
    bottom:15px;
  }
  
  .cloud:after{
    width:90px;
    height:90px;
    right:20px;
    bottom:10px;
  }
  
  .cloud.c1{
    top:100px;
    left:3%;
    transform:scale(.7);
  }
  
  .cloud.c2{
    top:420px;
    right:2%;
    transform:scale(.8);
  }
  
  .cloud.c3{
    top:780px;
    left:5%;
    transform:scale(.55);
  }
  
  
  /* bubbles */
  
  .bubble{
    width:35px;
    height:35px;
  
    border:2px solid rgba(255,255,255,.9);
    border-radius:50%;
  
    background:
      radial-gradient(
        circle at 30% 25%,
        rgba(255,255,255,.95),
        rgba(255,255,255,.12) 40%,
        rgba(112,218,237,.18)
      );
  
    box-shadow:
      inset 2px 2px 5px rgba(255,255,255,.9),
      0 4px 10px rgba(64,176,197,.1);
  }
  
  .b1{
    position:fixed;
    top:22%;
    left:4%;
  }
  
  .b2{
    position:fixed;
    top:65%;
    right:5%;
    width:55px;
    height:55px;
  }
  
  .b3{
    position:fixed;
    top:84%;
    left:12%;
    width:22px;
    height:22px;
  }
  
  
  /* ------------------------------------------------------------
     🖥️ HEADER
     ------------------------------------------------------------ */
  
  header{
    position:sticky;
    top:0;
    z-index:1000;
  
    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.98) 0%,
        rgba(239,253,255,.96) 45%,
        rgba(197,243,249,.96) 100%
      );
  
    backdrop-filter:blur(12px);
  
    border-bottom:
      4px solid #31abc5;
  
    box-shadow:
      0 3px 0 rgba(255,255,255,.95),
      0 7px 18px rgba(28,127,150,.18);
  }
  
  .header-inner{
    max-width:1200px;
    margin:auto;
  
    padding:12px 18px;
  
    display:flex;
    align-items:center;
    gap:20px;
  }
  
  
  /* 🍓 logo */
  
  .logo{
    min-width:170px;
  
    text-decoration:none;
    line-height:.9;
  
    font-weight:900;
  
    color:#ee4f88;
  
    text-shadow:
      2px 2px 0 #ffffff,
      4px 4px 0 #ffb7d3;
  
    filter:
      drop-shadow(0 2px 0 rgba(42,151,174,.12));
  }
  
  .logo-main{
    display:block;
    font-size:31px;
  }
  
  .logo-sub{
    display:block;
  
    font-size:11px;
    color:#48727e;
  
    letter-spacing:1px;
    margin-top:4px;
  }
  
  
  /* ------------------------------------------------------------
     🔘 SITE SWITCHER
     ------------------------------------------------------------ */
  
  .site-switcher{
    display:flex;
    gap:5px;
  
    background:
      linear-gradient(
        180deg,
        #e9fbff,
        #c8edf3
      );
  
    padding:4px;
  
    border-radius:16px;
  
    border:
      2px solid #54bdd0;
  
    box-shadow:
      inset 0 2px 0 rgba(255,255,255,.95),
      0 3px 7px rgba(46,145,165,.13);
  }
  
  .site-switcher button{
    border:1px solid transparent;
  
    background:transparent;
  
    padding:7px 10px;
  
    border-radius:11px;
  
    font-weight:800;
  
    color:#447180;
  
    transition:.18s;
  }
  
  .site-switcher button:hover{
    background:rgba(255,255,255,.65);
  }
  
  .site-switcher button.active{
    background:
      linear-gradient(
        180deg,
        #ffffff,
        #dff9ff
      );
  
    color:#ec4d88;
  
    border-color:#69c8da;
  
    box-shadow:
      inset 0 2px 0 white,
      0 2px 5px rgba(33,132,153,.18);
  }
  
  
  /* ------------------------------------------------------------
     🧭 NAVIGATION
     ------------------------------------------------------------ */
  
  .main-nav{
    display:flex;
    gap:6px;
    flex:1;
    justify-content:center;
  }
  
  .nav-btn{
    border:2px solid #65bfd1;
  
    background:
      linear-gradient(
        180deg,
        #ffffff 0%,
        #eafcff 42%,
        #c9f1f6 100%
      );
  
    border-radius:13px;
  
    padding:8px 11px;
  
    font-size:13px;
    font-weight:900;
  
    color:#24576a;
  
    box-shadow:
      inset 0 2px 0 rgba(255,255,255,.95),
      0 3px 0 rgba(45,154,176,.18);
  
    transition:.16s;
  }
  
  .nav-btn:hover{
    transform:translateY(-2px);
  
    background:
      linear-gradient(
        180deg,
        #ffffff,
        #d9f9ff
      );
  
    color:#ef4e8c;
  
    box-shadow:
      inset 0 2px 0 white,
      0 5px 0 rgba(45,154,176,.18);
  }
  
  .nav-btn.active{
    background:
      linear-gradient(
        180deg,
        #bff5ff,
        #72d8e9
      );
  
    color:#125d73;
  
    border-color:#32a9c2;
  
    transform:translateY(-1px);
  
    box-shadow:
      inset 0 2px 0 rgba(255,255,255,.95),
      0 3px 0 rgba(33,135,156,.22);
  }
  
  
  /* ------------------------------------------------------------
     👤 ACCOUNT
     ------------------------------------------------------------ */
  
  .account{
    position:relative;
  }
  
  .account-btn{
    border:2px solid #64bfd0;
  
    background:
      linear-gradient(
        180deg,
        #ffffff,
        #e4faff
      );
  
    padding:8px 12px;
  
    border-radius:15px;
  
    box-shadow:
      inset 0 2px 0 white,
      0 4px 0 rgba(45,154,176,.16);
  
    font-weight:900;
    color:#27596b;
  }
  
  .account-btn:hover{
    transform:translateY(-1px);
  }
  
  .account-menu{
    display:none;
  
    position:absolute;
    right:0;
    top:52px;
  
    width:190px;
    padding:10px;
  
    background:
      linear-gradient(
        180deg,
        #ffffff,
        #eafcff
      );
  
    border:
      2px solid #55bcd0;
  
    border-radius:15px;
  
    box-shadow:
      0 10px 30px rgba(37,125,147,.2),
      inset 0 2px 0 white;
  }
  
  .account-menu.open{
    display:block;
  }
  
  .account-menu button{
    width:100%;
  
    border:0;
  
    background:transparent;
  
    padding:10px;
  
    text-align:left;
  
    border-radius:9px;
  
    font-weight:800;
  }
  
  .account-menu button:hover{
    background:#dff9ff;
    color:#e94e89;
  }
  
  
  /* ------------------------------------------------------------
     📦 MAIN LAYOUT
     ------------------------------------------------------------ */
  
  .container{
    max-width:1200px;
  
    margin:25px auto;
  
    padding:0 18px 80px;
  }
  
  .page{
    display:none;
    animation:pageIn .35s ease;
  }
  
  .page.active{
    display:block;
  }
  
  @keyframes pageIn{
    from{
      opacity:0;
      transform:translateY(8px);
    }
  
    to{
      opacity:1;
      transform:none;
    }
  }
  
  .grid{
    display:grid;
    gap:18px;
  }
  
  .home-grid{
    grid-template-columns:260px minmax(0,1fr) 280px;
  }
  
  .profile-grid{
    grid-template-columns:260px minmax(0,1fr) 260px;
  }
  
  
  /* ------------------------------------------------------------
     🪟 CARDS
     ------------------------------------------------------------ */
  
  .card{
    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.96),
        rgba(248,254,255,.90)
      );
  
    border:
      3px solid #63bed0;
  
    border-radius:18px;
  
    box-shadow:
      inset 0 2px 0 rgba(255,255,255,.95),
      inset 0 -3px 0 rgba(176,230,238,.35),
      0 7px 0 rgba(61,166,187,.13),
      0 12px 25px rgba(45,131,151,.13);
  
    padding:18px;
  
    position:relative;
    overflow:hidden;
  }
  
  
  /* glossy strip at top */
  
  .card::before{
    content:"";
  
    position:absolute;
  
    top:0;
    left:0;
    right:0;
  
    height:7px;
  
    background:
      linear-gradient(
        90deg,
        #ff6fa5,
        #8eeaf5,
        #a6efc3,
        #c6b5ff,
        #ff9cc3
      );
  
    opacity:.9;
  }
  
  
  /* little shine */
  
  .card::after{
    content:"";
  
    position:absolute;
  
    top:7px;
    left:12%;
  
    width:35%;
    height:2px;
  
    background:rgba(255,255,255,.95);
  
    border-radius:50%;
  }
  
  .card-title{
    margin:0 0 13px;
  
    font-size:18px;
    font-weight:900;
  
    color:#245c70;
  
    text-shadow:
      1px 1px 0 white;
  }
  
  .tiny{
    font-size:12px;
    color:#64808a;
  }
  
  
  /* ------------------------------------------------------------
     🏷️ BADGES
     ------------------------------------------------------------ */
  
  .badge{
    display:inline-flex;
    align-items:center;
    gap:4px;
  
    background:
      linear-gradient(
        180deg,
        #ffffff,
        #e5faff
      );
  
    border:
      2px solid #8bd1df;
  
    padding:5px 8px;
  
    border-radius:12px;
  
    font-size:11px;
    font-weight:900;
  
    margin:3px;
  
    box-shadow:
      inset 0 2px 0 white,
      0 2px 0 rgba(61,158,179,.12);
  }
  
  
  /* ------------------------------------------------------------
     🏠 HERO
     ------------------------------------------------------------ */
  
  .hero{
    background:
      radial-gradient(
        circle at 85% 25%,
        rgba(255,255,255,.95) 0 7px,
        transparent 8px
      ),
  
      radial-gradient(
        circle at 10% 75%,
        rgba(255,255,255,.8) 0 5px,
        transparent 6px
      ),
  
      linear-gradient(
        135deg,
        rgba(255,255,255,.98),
        rgba(233,252,255,.92) 45%,
        rgba(255,239,247,.92)
      );
  
    border:
      4px solid #61bed0;
  
    border-radius:22px;
  
    box-shadow:
      inset 0 3px 0 white,
      0 7px 0 rgba(55,164,187,.15),
      0 14px 30px rgba(44,130,151,.15);
  
    padding:32px;
  
    margin-bottom:18px;
  
    position:relative;
    overflow:hidden;
  }
  
  
  /* fake browser-gloss stripe */
  
  .hero::before{
    content:"";
  
    position:absolute;
  
    left:0;
    right:0;
    top:0;
  
    height:15px;
  
    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.95),
        rgba(255,255,255,0)
      );
  
    pointer-events:none;
  }
  
  .hero h1{
    margin:0;
  
    font-size:clamp(38px,7vw,75px);
  
    color:#f04f8d;
  
    line-height:.9;
  
    text-shadow:
      2px 2px 0 #ffffff,
      5px 5px 0 #ffc2d9,
      7px 7px 0 rgba(67,174,194,.12);
  }
  
  .hero p{
    max-width:650px;
    font-size:17px;
    color:#315867;
  }
  
  .hero-sticker{
    position:absolute;
  
    right:8%;
    top:22px;
  
    font-size:72px;
  
    transform:rotate(10deg);
  
    filter:
      drop-shadow(2px 4px 0 rgba(54,157,179,.15));
  
    animation:floaty 3s ease-in-out infinite;
  }
  
  @keyframes floaty{
    0%,100%{
      transform:translateY(0) rotate(8deg);
    }
  
    50%{
      transform:translateY(-10px) rotate(12deg);
    }
  }
  
  .sparkle-text{
    display:inline-block;
  
    background:
      linear-gradient(
        180deg,
        #fffbc9,
        #fff1a0
      );
  
    padding:6px 12px;
  
    border:
      2px solid #e3cb63;
  
    border-radius:12px;
  
    font-weight:900;
  
    color:#6d632b;
  
    box-shadow:
      inset 0 2px 0 white,
      0 3px 0 rgba(185,160,61,.18);
  
    transform:rotate(-2deg);
  }
  
  
  /* ------------------------------------------------------------
     💎 BUTTONS
     ------------------------------------------------------------ */
  
  .btn{
    border:
      2px solid #56b9cc;
  
    border-radius:12px;
  
    padding:9px 13px;
  
    font-weight:900;
  
    color:#27576a;
  
    background:
      linear-gradient(
        180deg,
        #ffffff 0%,
        #f5fdff 35%,
        #cceff5 100%
      );
  
    box-shadow:
      inset 0 2px 0 white,
      inset 0 -2px 0 rgba(96,185,201,.2),
      0 4px 0 rgba(50,148,169,.17);
  
    transition:.14s;
  }
  
  .btn:hover{
    transform:translateY(-2px);
  
    box-shadow:
      inset 0 2px 0 white,
      0 6px 0 rgba(50,148,169,.17),
      0 8px 13px rgba(43,132,151,.12);
  }
  
  .btn:active{
    transform:translateY(2px);
  
    box-shadow:
      inset 0 2px 4px rgba(47,136,155,.2),
      0 1px 0 rgba(50,148,169,.17);
  }
  
  
  /* pink */
  
  .btn.primary{
    background:
      linear-gradient(
        180deg,
        #ffb4d1 0%,
        #ff79a9 45%,
        #f34f8e 100%
      );
  
    color:white;
  
    border-color:#ec578d;
  
    text-shadow:
      0 1px 1px rgba(111,38,65,.3);
  
    box-shadow:
      inset 0 2px 0 rgba(255,255,255,.75),
      0 4px 0 #d9467a;
  }
  
  
  /* blue */
  
  .btn.blue{
    background:
      linear-gradient(
        180deg,
        #cfffff,
        #8de5f1 45%,
        #55c8dd
      );
  
    color:#15586d;
  
    border-color:#42aec3;
  }
  
  
  /* green */
  
  .btn.green{
    background:
      linear-gradient(
        180deg,
        #dcffe9,
        #a9f3c4 45%,
        #78df9e
      );
  
    border-color:#66c992;
  }
  
  
  /* danger */
  
  .btn.danger{
    background:
      linear-gradient(
        180deg,
        #fff,
        #ffe9ef
      );
  
    color:#d34e70;
  
    border-color:#ee9db4;
  }
  
  .btn-row{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
  }
  
  
  /* ------------------------------------------------------------
     👩‍💻 AVATARS / USER
     ------------------------------------------------------------ */
  
  .user-mini{
    text-align:center;
  }
  
  .avatar{
    width:90px;
    height:90px;
  
    border-radius:22px;
  
    object-fit:cover;
  
    border:
      4px solid white;
  
    box-shadow:
      0 0 0 2px #66bfd0,
      0 5px 14px rgba(38,126,148,.2);
  
    background:
      linear-gradient(
        135deg,
        #ff8bbb,
        #8ce6ff
      );
  }
  
  .avatar.big{
    width:140px;
    height:140px;
    border-radius:28px;
  }
  
  .avatar.tiny-avatar{
    width:38px;
    height:38px;
    border-radius:11px;
  }
  
  .username{
    font-weight:900;
    color:#255a6b;
  }
  
  .status-dot{
    width:9px;
    height:9px;
  
    background:#57dc8c;
  
    border-radius:50%;
  
    display:inline-block;
  
    box-shadow:
      0 0 5px #57dc8c,
      0 0 10px rgba(87,220,140,.6);
  }
  
  
  /* ------------------------------------------------------------
     💬 FEED
     ------------------------------------------------------------ */
  
  .composer textarea{
    width:100%;
  
    min-height:85px;
  
    resize:vertical;
  
    border:
      2px solid #75c6d5;
  
    border-radius:13px;
  
    padding:12px;
  
    outline:none;
  
    background:
      linear-gradient(
        180deg,
        #ffffff,
        #f2fcff
      );
  
    box-shadow:
      inset 0 2px 5px rgba(57,151,170,.08);
  }
  
  .composer textarea:focus{
    border-color:#ef75a5;
  
    box-shadow:
      0 0 0 3px rgba(255,117,165,.13),
      inset 0 2px 5px rgba(57,151,170,.08);
  }
  
  .feed-post{
    margin-top:15px;
  }
  
  .post-header{
    display:flex;
    gap:10px;
    align-items:center;
  }
  
  .post-author{
    flex:1;
  }
  
  .post-time{
    font-size:11px;
    color:#78919a;
  }
  
  .post-text{
    line-height:1.55;
    margin:14px 0;
    white-space:pre-wrap;
  }
  
  .post-image{
    width:100%;
    max-height:480px;
  
    object-fit:cover;
  
    border-radius:14px;
  
    border:
      3px solid white;
  
    box-shadow:
      0 0 0 2px #69bfd0,
      0 5px 15px rgba(41,133,153,.15);
  }
  
  .reactions{
    display:flex;
    gap:5px;
    flex-wrap:wrap;
    margin-top:10px;
  }
  
  .reaction{
    border:
      2px solid #8bd0dc;
  
    background:
      linear-gradient(
        180deg,
        #fff,
        #e8faff
      );
  
    border-radius:11px;
  
    padding:5px 8px;
  
    font-size:12px;
  
    cursor:pointer;
  
    box-shadow:
      inset 0 1px 0 white;
  }
  
  .reaction:hover{
    background:#fff0f7;
  
    border-color:#f18bad;
  
    transform:translateY(-1px);
  }
  
  .comments{
    border-top:
      2px dotted #92cbd5;
  
    margin-top:12px;
  
    padding-top:10px;
  }
  
  .comment{
    font-size:12px;
  
    background:
      linear-gradient(
        180deg,
        #f8feff,
        #e8faff
      );
  
    border:
      1px solid #b7dfe6;
  
    padding:7px 10px;
  
    border-radius:9px;
  
    margin:5px 0;
  }
  
  .comment-form{
    display:flex;
    gap:5px;
    margin-top:8px;
  }
  
  .comment-form input{
    flex:1;
  
    border:
      2px solid #8acbd7;
  
    border-radius:9px;
  
    padding:7px;
  
    background:#fff;
  }
  
  
  /* ------------------------------------------------------------
     🔎 DISCOVER
     ------------------------------------------------------------ */
  
  .discover-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
  }
  
  .profile-tile{
    text-align:center;
    transition:.2s;
  }
  
  .profile-tile:hover{
    transform:
      translateY(-5px)
      rotate(-.7deg);
  }
  
  .profile-tile .avatar{
    margin:auto;
  }
  
  .search{
    display:flex;
    gap:8px;
    margin-bottom:18px;
  }
  
  .search input{
    flex:1;
  
    border:
      2px solid #66bfd0;
  
    border-radius:13px;
  
    padding:11px 13px;
  
    box-shadow:
      inset 0 2px 5px rgba(40,130,150,.08),
      0 3px 0 rgba(54,158,180,.1);
  
    background:#fff;
  }
  
  .search input:focus{
    outline:none;
    border-color:#ef75a5;
  }
  
  
  /* ------------------------------------------------------------
     👤 PROFILE
     ------------------------------------------------------------ */
  
  .profile-banner{
    min-height:220px;
  
    border-radius:22px;
  
    border:
      4px solid #61bed0;
  
    box-shadow:
      inset 0 3px 0 white,
      0 7px 0 rgba(55,164,187,.14),
      0 13px 28px rgba(44,130,151,.13);
  
    padding:25px;
  
    position:relative;
    overflow:hidden;
  
    margin-bottom:18px;
  
    background:
      radial-gradient(
        circle at 85% 25%,
        rgba(255,255,255,.8) 0 5px,
        transparent 6px
      ),
      linear-gradient(
        135deg,
        #e1fbff,
        #ffffff 45%,
        #ffe7f1
      );
  }
  
  .profile-banner::after{
    content:"✦ ✧ ★ ✦ ✧";
  
    position:absolute;
  
    right:30px;
    top:30px;
  
    font-size:34px;
  
    color:#49b8ce;
  
    opacity:.55;
  
    text-shadow:
      2px 2px white;
  }
  
  .profile-info{
    display:flex;
    gap:18px;
    align-items:end;
  
    position:relative;
    z-index:2;
  }
  
  .profile-name{
    font-size:32px;
    font-weight:900;
  
    color:#ef568f;
  
    text-shadow:
      2px 2px 0 white,
      3px 3px 0 #ffc3d9;
  }
  
  .profile-handle{
    color:#5c7d87;
    font-weight:800;
  }
  
  .section-box{
    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.96),
        rgba(241,252,255,.92)
      );
  
    border:
      3px solid #70c5d4;
  
    border-radius:16px;
  
    padding:16px;
  
    margin-bottom:16px;
  
    box-shadow:
      inset 0 2px 0 white,
      0 5px 0 rgba(70,157,176,.11),
      0 7px 15px rgba(70,140,158,.08);
  }
  
  .section-title{
    font-weight:900;
    margin-bottom:10px;
    color:#275d70;
  }
  
  .interests{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
  }
  
  .interest{
    background:
      linear-gradient(
        180deg,
        #f4ffff,
        #d8f6fb
      );
  
    border:
      2px solid #86cfdb;
  
    border-radius:18px;
  
    padding:6px 10px;
  
    font-size:12px;
    font-weight:800;
  
    box-shadow:
      inset 0 1px 0 white;
  }
  
  .friend-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
  }
  
  .friend{
    text-align:center;
    font-size:10px;
    font-weight:800;
  }
  
  .friend img{
    width:52px;
    height:52px;
  
    object-fit:cover;
  
    border-radius:13px;
  
    border:
      2px solid white;
  
    box-shadow:
      0 0 0 1px #65bdcf,
      0 3px 6px rgba(38,129,150,.14);
  }
  
  
  /* ------------------------------------------------------------
     📸 GALLERY
     ------------------------------------------------------------ */
  
  .gallery{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
  }
  
  .gallery img{
    width:100%;
    aspect-ratio:1;
  
    object-fit:cover;
  
    border-radius:10px;
  
    border:
      3px solid white;
  
    box-shadow:
      0 0 0 2px #69c0d1,
      0 3px 8px rgba(42,129,148,.13);
  
    transition:.18s;
  }
  
  .gallery img:hover{
    transform:scale(1.03) rotate(-.5deg);
    filter:saturate(1.1);
  }
  
  
  /* ------------------------------------------------------------
     📷 PHOTO BOOTH
     ------------------------------------------------------------ */
  
  .booth{
    display:grid;
    grid-template-columns:1fr 330px;
    gap:20px;
  }
  
  .booth-canvas{
    width:100%;
    min-height:500px;
  
    border-radius:20px;
  
    border:
      5px solid #64bfd0;
  
    background:
      radial-gradient(
        circle at 20% 20%,
        #505050,
        #222 45%,
        #101010
      );
  
    display:flex;
    align-items:center;
    justify-content:center;
  
    overflow:hidden;
    position:relative;
  
    box-shadow:
      inset 0 3px 7px rgba(0,0,0,.4),
      0 7px 0 rgba(52,147,168,.14);
  }
  
  #boothImage{
    max-width:100%;
    max-height:520px;
    object-fit:contain;
  }
  
  .booth-placeholder{
    color:white;
    text-align:center;
    padding:30px;
  }
  
  .effect-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:7px;
  }
  
  .effect-btn{
    padding:9px 4px;
  
    border:
      2px solid #75c4d2;
  
    border-radius:10px;
  
    background:
      linear-gradient(
        180deg,
        #fff,
        #e6faff
      );
  
    font-size:11px;
    font-weight:900;
  
    color:#315f6d;
  
    box-shadow:
      inset 0 1px 0 white;
  }
  
  .effect-btn:hover{
    transform:translateY(-1px);
  }
  
  .effect-btn.active{
    background:
      linear-gradient(
        180deg,
        #ffb9d5,
        #ff83af
      );
  
    color:white;
  
    border-color:#ed6799;
  }
  
  .sticker-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:5px;
  }
  
  .sticker{
    border:
      2px solid #79c7d5;
  
    border-radius:8px;
  
    background:
      linear-gradient(
        180deg,
        #fff,
        #e9faff
      );
  
    padding:7px;
    font-size:20px;
  
    box-shadow:
      inset 0 1px 0 white;
  }
  
  .sticker:hover{
    transform:scale(1.08) rotate(-3deg);
  }
  
  
  /* ------------------------------------------------------------
     ⚙️ SETTINGS
     ------------------------------------------------------------ */
  
  .settings-grid{
    display:grid;
    grid-template-columns:200px 1fr;
    gap:20px;
  }
  
  .settings-tabs{
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  
  .settings-tab{
    border:
      2px solid #70c5d4;
  
    background:
      linear-gradient(
        180deg,
        #ffffff,
        #e4faff
      );
  
    padding:11px;
  
    border-radius:11px;
  
    text-align:left;
  
    font-weight:900;
  
    color:#315e6d;
  
    box-shadow:
      inset 0 1px 0 white;
  }
  
  .settings-tab:hover{
    color:#ef548e;
  }
  
  .settings-tab.active{
    background:
      linear-gradient(
        180deg,
        #ffd9e9,
        #ffafd0
      );
  
    color:#d93f7d;
  
    border-color:#ef83aa;
  }
  
  .setting-panel{
    display:none;
  }
  
  .setting-panel.active{
    display:block;
  }
  
  .form-row{
    margin-bottom:14px;
  }
  
  .form-row label{
    display:block;
  
    font-size:12px;
    font-weight:900;
  
    margin-bottom:5px;
  
    color:#315d6d;
  }
  
  .form-row input,
  .form-row textarea,
  .form-row select{
    width:100%;
  
    border:
      2px solid #7cc9d6;
  
    border-radius:11px;
  
    padding:9px;
  
    background:
      linear-gradient(
        180deg,
        #fff,
        #f2fcff
      );
  
    box-shadow:
      inset 0 2px 4px rgba(45,137,157,.06);
  }
  
  .form-row input:focus,
  .form-row textarea:focus,
  .form-row select:focus{
    outline:none;
    border-color:#ef78a7;
  }
  
  .form-row textarea{
    min-height:100px;
    resize:vertical;
  }
  
  .theme-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
  }
  
  .theme-card{
    border:
      3px solid #70c4d3;
  
    border-radius:14px;
  
    padding:18px 8px;
  
    text-align:center;
  
    font-weight:900;
  
    cursor:pointer;
  
    min-height:85px;
  
    box-shadow:
      inset 0 2px 0 white,
      0 3px 0 rgba(56,149,170,.12);
  }
  
  .theme-card:hover{
    transform:scale(1.03);
  }
  
  
  /* ------------------------------------------------------------
     🪟 MODALS
     ------------------------------------------------------------ */
  
  .modal{
    display:none;
  
    position:fixed;
  
    inset:0;
  
    z-index:3000;
  
    background:
      rgba(30,102,120,.38);
  
    backdrop-filter:blur(7px);
  
    align-items:center;
    justify-content:center;
  
    padding:18px;
  }
  
  .modal.open{
    display:flex;
  }
  
  .modal-box{
    width:min(650px,100%);
  
    max-height:90vh;
  
    overflow:auto;
  
    background:
      linear-gradient(
        180deg,
        #ffffff,
        #effcff
      );
  
    border:
      4px solid #61bfd1;
  
    border-radius:20px;
  
    box-shadow:
      inset 0 3px 0 white,
      0 20px 70px rgba(24,96,115,.28);
  
    padding:22px;
  
    position:relative;
  }
  
  .modal-close{
    position:absolute;
  
    top:12px;
    right:12px;
  
    border:
      2px solid #e783a8;
  
    background:
      linear-gradient(
        180deg,
        #fff,
        #ffdce9
      );
  
    color:#d9477e;
  
    width:32px;
    height:32px;
  
    border-radius:50%;
  
    font-weight:900;
  
    box-shadow:
      inset 0 1px 0 white;
  }
  
  
  /* ------------------------------------------------------------
     💬 TOAST
     ------------------------------------------------------------ */
  
  #toast{
    position:fixed;
  
    right:20px;
    bottom:20px;
  
    z-index:5000;
  
    background:
      linear-gradient(
        180deg,
        #ffffff,
        #e5faff
      );
  
    border:
      3px solid #62bdcf;
  
    border-radius:14px;
  
    padding:12px 17px;
  
    box-shadow:
      inset 0 2px 0 white,
      0 7px 0 rgba(49,146,167,.13),
      0 10px 25px rgba(39,125,145,.16);
  
    transform:translateY(130px);
  
    transition:.3s;
  
    font-weight:900;
  
    color:#285c6d;
  }
  
  #toast.show{
    transform:translateY(0);
  }
  
  
  /* ------------------------------------------------------------
     ⭐ FLOATING DECOR
     ------------------------------------------------------------ */
  
  .floating-sticker{
    position:fixed;
  
    z-index:200;
  
    pointer-events:none;
  
    animation:
      stickerFloat 5s ease-in-out infinite;
  
    font-size:28px;
  
    filter:
      drop-shadow(1px 2px 0 rgba(255,255,255,.8));
  }
  
  @keyframes stickerFloat{
    0%,100%{
      transform:translateY(0) rotate(-5deg);
    }
  
    50%{
      transform:translateY(-12px) rotate(6deg);
    }
  }
  
  
  /* ------------------------------------------------------------
     🎵 MUSIC PLAYER
     ------------------------------------------------------------ */
  
  .music-player{
    border-radius:15px;
  
    padding:15px;
  
    background:
      linear-gradient(
        135deg,
        #ffe0ed,
        #e2f9ff
      );
  
    border:
      2px solid #66c1d1;
  
    box-shadow:
      inset 0 2px 0 white,
      0 4px 0 rgba(53,150,171,.12);
  }
  
  .music-bar{
    height:6px;
  
    border-radius:6px;
  
    background:
      #ffffff;
  
    margin-top:10px;
  
    overflow:hidden;
  
    box-shadow:
      inset 0 1px 2px rgba(0,0,0,.08);
  }
  
  .music-bar span{
    display:block;
  
    width:45%;
    height:100%;
  
    background:
      linear-gradient(
        90deg,
        #ff77aa,
        #ff9bc0,
        #72d9ea
      );
  }
  
  
  /* ------------------------------------------------------------
     🖼️ CUSTOM PROFILE PREVIEW
     ------------------------------------------------------------ */
  
  .preview{
    border:
      4px solid #61bfd0;
  
    border-radius:19px;
  
    min-height:400px;
  
    padding:20px;
  
    background:
      radial-gradient(
        circle at 80% 20%,
        rgba(255,255,255,.8) 0 6px,
        transparent 7px
      ),
      linear-gradient(
        135deg,
        #ffe3ef,
        #e4faff
      );
  
    overflow:hidden;
  
    box-shadow:
      inset 0 2px 0 white,
      0 6px 0 rgba(52,150,171,.13);
  }
  
  .preview-window{
    background:
      linear-gradient(
        180deg,
        #ffffff,
        #effcff
      );
  
    border:
      3px solid #73c5d3;
  
    border-radius:11px;
  
    padding:12px;
  
    margin-bottom:10px;
  
    box-shadow:
      inset 0 2px 0 white;
  }
  
  
  /* ------------------------------------------------------------
     🫥 EMPTY STATES
     ------------------------------------------------------------ */
  
  .empty{
    text-align:center;
  
    padding:30px 15px;
  
    color:#6e8992;
  }
  
  .empty-icon{
    font-size:45px;
    margin-bottom:5px;
  }
  
  
  /* ------------------------------------------------------------
     ✨ PROFILE DECOR
     ------------------------------------------------------------ */
  
  .profile-decor{
    position:absolute;
  
    font-size:30px;
  
    pointer-events:none;
  
    filter:
      drop-shadow(1px 2px 0 rgba(255,255,255,.8));
  }
  
  .d1{
    top:15px;
    left:20px;
  }
  
  .d2{
    bottom:20px;
    right:20px;
  }
  
  .d3{
    top:100px;
    right:15%;
  }
  
  
  /* ------------------------------------------------------------
     💿 EXTRA Y2K DETAILS
     These don't interfere with existing HTML.
     ------------------------------------------------------------ */
  
  
  /* shiny horizontal selection */
  
  ::selection{
    background:#ff9fc2;
    color:white;
  }
  
  
  /* scrollbar */
  
  ::-webkit-scrollbar{
    width:12px;
  }
  
  ::-webkit-scrollbar-track{
    background:#c9f2f7;
    border-left:2px solid white;
  }
  
  ::-webkit-scrollbar-thumb{
    background:
      linear-gradient(
        180deg,
        #ff9cbe,
        #62cee0
      );
  
    border:
      2px solid white;
  
    border-radius:10px;
  
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.8);
  }
  
  
  /* little glossy shine when hovering cards */
  
  .card:hover,
  .section-box:hover{
    box-shadow:
      inset 0 2px 0 rgba(255,255,255,.98),
      inset 0 -3px 0 rgba(176,230,238,.35),
      0 8px 0 rgba(61,166,187,.13),
      0 15px 28px rgba(45,131,151,.16);
  }
  
  
  /* ------------------------------------------------------------
     🌈 SPECIAL THEMES
     ------------------------------------------------------------ */
  
  body.theme-aqua{
    --pink:#43cce8;
    --pink2:#a7efff;
    --text:#193c4c;
  
    background:
      radial-gradient(
        circle at 20% 15%,
        white 0 7px,
        transparent 8px
      ),
      linear-gradient(
        135deg,
        #d9fbff,
        #b5edff,
        #eaffff
      );
  }
  
  body.theme-punk{
    --pink:#ff385f;
    --pink2:#ff879c;
    --text:#241e25;
  
    background:
      repeating-linear-gradient(
        45deg,
        #eadde1 0 5px,
        #f5e9ec 5px 10px
      );
  }
  
  body.theme-cyber{
    --pink:#a46cff;
    --pink2:#dfcaff;
    --text:#21182d;
  
    background:
      linear-gradient(
        135deg,
        #f0e8ff,
        #d9f3ff,
        #fce6ff
      );
  }
  
  body.theme-ocean{
    --pink:#328ddd;
    --pink2:#8ccaff;
    --text:#173650;
  
    background:
      linear-gradient(
        135deg,
        #dffbff,
        #9eeaff,
        #d6f7ff
      );
  }
  
  body.theme-retro{
    --pink:#7658a9;
    --pink2:#cdb9e8;
    --text:#30283b;
  
    background:#d7d1dc;
  
    font-family:"VT323",monospace;
    font-size:18px;
  }
  
  body.theme-retro .card,
  body.theme-retro .section-box{
    border-radius:3px;
  
    box-shadow:
      4px 4px 0 #776c80;
  }
  
  body.theme-retro button{
    border-radius:2px;
  }
  
  
  /* ------------------------------------------------------------
     📱 RESPONSIVE
     ------------------------------------------------------------ */
  
  @media(max-width:950px){
  
    .home-grid,
    .profile-grid{
      grid-template-columns:1fr;
    }
  
    .main-nav{
      display:none;
    }
  
    .discover-grid{
      grid-template-columns:repeat(2,1fr);
    }
  
    .booth{
      grid-template-columns:1fr;
    }
  
    .settings-grid{
      grid-template-columns:1fr;
    }
  
    .settings-tabs{
      flex-direction:row;
      overflow:auto;
    }
  }
  
  
  @media(max-width:600px){
  
    .header-inner{
      flex-wrap:wrap;
    }
  
    .logo{
      min-width:auto;
    }
  
    .site-switcher{
      order:3;
      width:100%;
      justify-content:center;
    }
  
    .hero{
      padding:22px;
    }
  
    .hero-sticker{
      opacity:.3;
    }
  
    .discover-grid{
      grid-template-columns:1fr;
    }
  
    .friend-grid{
      grid-template-columns:repeat(4,1fr);
    }
  
    .profile-info{
      align-items:center;
      flex-direction:column;
      text-align:center;
    }
  }
/* Real-account polish */
.reaction.selected{transform:translateY(-1px);box-shadow:0 0 0 2px rgba(255,95,152,.22), inset 0 2px 0 #fff;}
.auth-message{min-height:22px;}
.auth-box input[style*="display: none"]{display:none!important;}