.login-link{
      padding:6px 10px;border-radius:8px;text-decoration:none;font-size:13px;font-weight:700;
      background:transparent;color:#a855f7;border:1px solid rgba(0,0,0,0.06);
      transition:all 0.3s;font-family:inherit;display:inline-flex;align-items:center;
      line-height:1.4;white-space:nowrap;cursor:pointer;
    }
    .login-link:hover{background:rgba(168,85,247,0.1);border-color:rgba(168,85,247,0.3);}
    body.page-index.dark-mode .login-link{border-color:rgba(255,255,255,0.12);color:#c084fc;}
    body.page-index.dark-mode .login-link:hover{background:rgba(168,85,247,0.15);}

    body.page-index *{
      margin:0;
      padding:0;
      box-sizing:border-box;
      scroll-behavior:smooth;
    }

    body.page-index{
      font-family: Arial, Helvetica, sans-serif;
      background: linear-gradient(180deg, #fffaf0 0%, #000000 100%);
      color:#111111;
      overflow-x:hidden;
    }

    body.page-index::before{
      content:"";
      position:fixed;
      width:600px;
      height:600px;
      background:radial-gradient(circle, rgba(255,255,255,0.12), transparent 70%);
      top:-200px;
      left:-150px;
      z-index:-1;
    }

    body.page-index::after{
      content:"";
      position:fixed;
      width:500px;
      height:500px;
      background:radial-gradient(circle, rgba(255,255,255,0.08), transparent 70%);
      bottom:-200px;
      right:-150px;
      z-index:-1;
    }

    body.page-index header{
      width:100%;
      padding:25px 8%;
      display:flex;
      justify-content:space-between;
      align-items:center;
      position:fixed;
      top:0;
      z-index:1000;
      background: rgba(255,250,240,0.78);
      backdrop-filter: blur(8px);
      border-bottom:1px solid rgba(0,0,0,0.06);
    }

    body.page-index .logo{
      font-size:28px;
      font-weight:bold;
      letter-spacing:2px;
      color:#f5f5f5;
    }

    body.page-index .logo img{
      height:36px;
      width:auto;
      display:block;
      cursor:pointer;
      transition:opacity 280ms ease, transform 280ms ease;
    }

    body.page-index .header-actions{
      display:flex;
      gap:8px;
      align-items:center;
    }

    body.page-index .mode-btn{
      padding:6px 10px;
      border-radius:8px;
      border:1px solid rgba(0,0,0,0.06);
      background:transparent;
      cursor:pointer;
      font-weight:700;
      color:#111111;
    }

    body.page-index .mode-btn.active{
      background:#111111;
      color:#ffffff;
    }

    /* Smooth transitions for theme change */
    body.page-index, body.page-index header, body.page-index nav a, body.page-index .hero h1, body.page-index .hero p, body.page-index .card, body.page-index .card h3, body.page-index .card p, body.page-index .section-title, body.page-index .section-subtitle, body.page-index footer, body.page-index .product-btn, body.page-index .btn{
      transition: background 400ms ease, color 400ms ease, border-color 400ms ease, box-shadow 400ms ease;
    }

    body.page-index.dark-mode{ background: linear-gradient(180deg,#000000 0%, #000000 100%); color:#f5f5f5; }
    body.page-index.dark-mode header{ background: rgba(0,0,0,0.88); border-bottom:1px solid rgba(255,255,255,0.08); }
    body.page-index.dark-mode .mode-btn{ color:#f5f5f5; border:1px solid rgba(255,255,255,0.12); }
    body.page-index.dark-mode .mode-btn.active{ background:#f5f5f5; color:#000000; }

    /* Invert text and important elements for dark mode */
    body.page-index.dark-mode nav a{ color:#f5f5f5; }
    body.page-index.dark-mode .hero h1{ color:#ffffff; }
    body.page-index.dark-mode .hero p{ color:#d0d0d0; }
    body.page-index.dark-mode .card h3, body.page-index.dark-mode .card p, body.page-index.dark-mode .section-title, body.page-index.dark-mode .section-subtitle, body.page-index.dark-mode footer, body.page-index.dark-mode .product-btn, body.page-index.dark-mode .btn{ color:#e6e6e6; }
    body.page-index.dark-mode .product-btn{ background:#111111; color:#ffffff; border-color: rgba(255,255,255,0.12); box-shadow:0 10px 30px rgba(0,0,0,0.4); }

    /* Ensure hero buttons have black text in both themes and readable backgrounds */
    body.page-index #exploreBtn, body.page-index #contactBtn{ color:#111111 !important; }
    /* In dark mode keep text black but make the button backgrounds light so text is readable */
    body.page-index.dark-mode #exploreBtn{ color:#111111 !important; background: rgba(255,255,255,0.9) !important; border-color: rgba(0,0,0,0.06) !important; }
    body.page-index.dark-mode #contactBtn{ color:#111111 !important; background: rgba(255,255,255,0.85) !important; border-color: rgba(0,0,0,0.06) !important; }

    body.page-index nav a{
      text-decoration:none;
      color:#111111;
      margin-left:30px;
      transition:0.3s;
      font-size:15px;
    }

    body.page-index nav a:hover{
      color:#444444;
    }

    body.page-index .hero{
      min-height:100vh;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      padding:120px 10%;
    }

    body.page-index .hero-content{
      max-width:900px;
    }

    body.page-index .hero h1{
      font-size:72px;
      margin-bottom:20px;
      color:#111111;
      letter-spacing:2px;
      line-height:1.05;
      text-transform:uppercase;
      font-weight:800;
    }

    body.page-index .hero p{
      font-size:20px;
      line-height:1.9;
      color:#6b6b6b;
      margin-bottom:40px;
      max-width:760px;
      margin-left:auto;
      margin-right:auto;
    }

    body.page-index .buttons{
      display:inline-flex;
      justify-content:center;
      gap:20px;
      flex-wrap:wrap;
      background: rgba(255,255,255,0.6);
      padding:12px 18px;
      border-radius:14px;
      backdrop-filter: blur(8px);
      border:1px solid rgba(0,0,0,0.06);
      box-shadow: 0 8px 24px rgba(0,0,0,0.06);
      align-items:center;
    }

    body.page-index .btn{
      padding:16px 34px;
      border:none;
      border-radius:12px;
      cursor:pointer;
      font-size:16px;
      font-weight:bold;
      transition:0.3s;
      text-decoration:none;
    }

    body.page-index .primary{
      background:#ffffff;
      color:#000000;
      box-shadow:0 8px 24px rgba(0,0,0,0.08);
    }

    body.page-index .primary:hover{
      transform:translateY(-3px);
      box-shadow:0 14px 40px rgba(0,0,0,0.12);
    }

    body.page-index .secondary{
      background:transparent;
      border:2px solid rgba(0,0,0,0.08);
      color:#111111;
    }

    body.page-index .secondary:hover{
      background: rgba(255,255,255,0.9);
      color:#000000;
    }

    /* Luxurious proximity animation styles */
    body.page-index .btn{
      position: relative;
      overflow: hidden;
    }

    body.page-index .btn::before{
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255,255,255,0.8), rgba(255,255,255,0.2), transparent);
      transform: translate(-50%, -50%);
      pointer-events: none;
      transition: width 0.4s ease-out, height 0.4s ease-out;
      opacity: 0;
    }

    body.page-index .btn.proximity-active::before{
      opacity: 1;
      width: 200px;
      height: 200px;
    }

    body.page-index .btn.proximity-active{
      transform: scale(1.08);
      box-shadow: 0 20px 50px rgba(255,200,100,0.35), 0 0 40px rgba(255,215,0,0.25) !important;
    }

    body.page-index #exploreBtn.proximity-active{
      background: linear-gradient(135deg, #ffffff 0%, #fffacd 100%) !important;
      box-shadow: 0 20px 50px rgba(255,200,100,0.4), 0 0 60px rgba(255,215,0,0.3) !important;
    }

    body.page-index #contactBtn.proximity-active{
      background: rgba(255,255,255,0.95) !important;
      border-color: rgba(255,215,0,0.5) !important;
      box-shadow: 0 20px 50px rgba(255,200,100,0.35), 0 0 40px rgba(255,215,0,0.2) !important;
    }

    /* Dark mode proximity animation styles */
    body.page-index.dark-mode .btn.proximity-active{
      transform: scale(1.08);
      box-shadow: 0 20px 50px rgba(255,200,100,0.35), 0 0 40px rgba(255,215,0,0.25) !important;
    }

    body.page-index.dark-mode #exploreBtn.proximity-active{
      background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, #fffacd 100%) !important;
      box-shadow: 0 20px 50px rgba(255,200,100,0.4), 0 0 60px rgba(255,215,0,0.3) !important;
    }

    body.page-index.dark-mode #contactBtn.proximity-active{
      background: rgba(255,255,255,0.95) !important;
      border-color: rgba(255,215,0,0.6) !important;
      box-shadow: 0 20px 50px rgba(255,200,100,0.35), 0 0 40px rgba(255,215,0,0.2) !important;
    }

    body.page-index section{
      padding:100px 10%;
    }

    body.page-index .section-title{
      text-align:center;
      font-size:42px;
      margin-bottom:15px;
    }

    body.page-index .section-subtitle{
      text-align:center;
      color:#d1d1d1;
      margin-bottom:60px;
      font-size:18px;
    }

    body.page-index .features{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
      gap:30px;
    }

    body.page-index .card{
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      min-height:360px;
      background:rgba(255,255,255,0.06);
      border:1px solid rgba(255,255,255,0.12);
      border-radius:20px;
      padding:35px;
      transition:0.3s;
      backdrop-filter:blur(10px);
    }

    body.page-index .card{
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      min-height:360px;
      background:rgba(255,255,255,0.06);
      border:1px solid rgba(255,255,255,0.12);
      border-radius:20px;
      padding:35px;
      transition:transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease, background 0.35s ease;
      backdrop-filter:blur(10px);
    }

    body.page-index .card:hover{
      transform:translateY(-8px);
      border-color:rgba(255,255,255,0.3);
      box-shadow:0 30px 60px rgba(0,0,0,0.25);
      background:rgba(255,255,255,0.08);
    }

    body.page-index .card-icon{
      width:56px;
      height:56px;
      border-radius:50%;
      background:rgba(255,255,255,0.18);
      display:flex;
      align-items:center;
      justify-content:center;
      margin-bottom:20px;
      font-size:26px;
      color:#ffffff;
      box-shadow:0 10px 30px rgba(0,0,0,0.2);
    }

    body.page-index .card h3{
      font-size:24px;
      margin-bottom:18px;
      color:#ffffff;
    }

    body.page-index .card p{
      color:#d8d8d8;
      line-height:1.8;
      margin-bottom:25px;
    }

    body.page-index .product-btn{
      display:inline-block;
      padding:12px 24px;
      background:#ffffff;
      border:1px solid rgba(255,255,255,0.18);
      border-radius:12px;
      color:#000000;
      text-decoration:none;
      transition:transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease, color 0.35s ease;
      font-weight:bold;
      box-shadow:0 10px 30px rgba(255,255,255,0.08);
    }

    body.page-index .product-btn:hover{
      transform:translateY(-4px) scale(1.02);
      box-shadow:0 18px 40px rgba(255,255,255,0.14);
      background:#f5f5f5;
    }

    body.page-index .about{
      text-align:center;
      max-width:1000px;
      margin:auto;
    }

    body.page-index .about p{
      color:#d8d8d8;
      line-height:2;
      margin-bottom:25px;
      font-size:18px;
    }

    body.page-index .contact-list{
      list-style:none;
      padding:0;
      margin:30px auto 0;
      max-width:520px;
      display:grid;
      gap:16px;
    }

    body.page-index .contact-item{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:16px;
      background:rgba(255,255,255,0.04);
      border:1px solid rgba(255,255,255,0.12);
      border-radius:16px;
      padding:18px 22px;
    }

    body.page-index .contact-icon{
      width:34px;
      height:34px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      flex-shrink:0;
      background:rgba(255,255,255,0.1);
      border-radius:50%;
    }

    body.page-index .contact-link{
      color:#f5f5f5;
      text-decoration:none;
      font-weight:600;
    }

    body.page-index .contact-note{
      color:#ff6b6b;
      margin-top:16px;
      max-width:560px;
      margin-left:auto;
      margin-right:auto;
    }

    body.page-index footer{
      text-align:center;
      padding:35px;
      border-top:1px solid rgba(255,255,255,0.08);
      color:#7e8ba3;
      background:#040611;
    }

    @media(max-width:768px){

      body.page-index .hero h1{
        font-size:48px;
      }

      body.page-index nav{
        display:none;
      }

      body.page-index .hero p{
        font-size:17px;
      }

      body.page-index .section-title{
        font-size:34px;
      }
    }
  


    body.page-rank *{
      margin:0;
      padding:0;
      box-sizing:border-box;
      scroll-behavior:smooth;
    }

    body.page-rank{
      font-family: Arial, Helvetica, sans-serif;
      background: linear-gradient(180deg, #fffaf0 0%, #000000 100%);
      color:#111111;
      overflow-x:hidden;
    }

    body.page-rank::before{
      content:"";
      position:fixed;
      width:600px;
      height:600px;
      background:radial-gradient(circle, rgba(255,255,255,0.12), transparent 70%);
      top:-200px;
      left:-150px;
      z-index:-1;
    }

    body.page-rank::after{
      content:"";
      position:fixed;
      width:500px;
      height:500px;
      background:radial-gradient(circle, rgba(255,255,255,0.08), transparent 70%);
      bottom:-200px;
      right:-150px;
      z-index:-1;
    }

    body.page-rank header{
      width:100%;
      padding:25px 8%;
      display:flex;
      justify-content:space-between;
      align-items:center;
      position:fixed;
      top:0;
      z-index:1000;
      background: rgba(255,250,240,0.78);
      backdrop-filter: blur(8px);
      border-bottom:1px solid rgba(0,0,0,0.06);
    }

    body.page-rank .logo{
      font-size:28px;
      font-weight:bold;
      letter-spacing:2px;
      color:#111111;
    }

    body.page-rank .logo img{
      height:36px;
      width:auto;
      display:block;
      cursor:pointer;
      transition:opacity 280ms ease, transform 280ms ease;
    }

    body.page-rank .header-actions{ display:flex; gap:8px; align-items:center; }
    body.page-rank .mode-btn{ padding:6px 10px; border-radius:8px; border:1px solid rgba(0,0,0,0.06); background:transparent; cursor:pointer; font-weight:700; color:#111111; }
    body.page-rank .mode-btn.active{ background:#111111; color:#ffffff; }
    body.page-rank.dark-mode{ background: linear-gradient(180deg,#000000 0%, #000000 100%); color:#f5f5f5; }
    body.page-rank.dark-mode header{ background: rgba(0,0,0,0.88); border-bottom:1px solid rgba(255,255,255,0.08); }
    body.page-rank.dark-mode .mode-btn{ color:#f5f5f5; border:1px solid rgba(255,255,255,0.12); }
    body.page-rank.dark-mode .mode-btn.active{ background:#f5f5f5; color:#000000; }

    /* Dark mode inverted colors for better contrast */
    body.page-rank.dark-mode nav a{ color:#f5f5f5; }
    body.page-rank.dark-mode nav a:hover{ color:#d1d1d1; }
    body.page-rank.dark-mode .hero h1{ color:#ffffff; }
    body.page-rank.dark-mode .hero p{ color:#d0d0d0; }
    body.page-rank.dark-mode .section-title{ color:#ffffff; }
    body.page-rank.dark-mode .section-subtitle{ color:#b0b0b0; }
    body.page-rank.dark-mode .card{
      background:rgba(40,40,50,0.8);
      border:1px solid rgba(255,255,255,0.15);
    }
    body.page-rank.dark-mode .card:hover{
      background:rgba(50,50,65,0.9);
      border-color:rgba(255,255,255,0.25);
      box-shadow:0 30px 60px rgba(0,0,0,0.5);
    }
    body.page-rank.dark-mode .card h3{ color:#ffffff; }
    body.page-rank.dark-mode .card p{ color:#d8d8d8; }
    body.page-rank.dark-mode .product-btn{
      background:#1a1a24;
      color:#ffffff;
      border:1px solid rgba(255,255,255,0.2);
      box-shadow:0 10px 30px rgba(0,0,0,0.3);
    }
    body.page-rank.dark-mode .product-btn:hover{
      background:#252535;
      color:#ffffff;
      border-color:rgba(255,255,255,0.3);
      box-shadow:0 18px 40px rgba(255,255,255,0.1);
    }
    body.page-rank.dark-mode footer{ background:#000000; border-top:1px solid rgba(255,255,255,0.08); color:#909090; }

    body.page-rank nav a{
      text-decoration:none;
      color:#111111;
      margin-left:30px;
      transition:0.3s;
      font-size:15px;
    }

    body.page-rank nav a:hover{
      color:#444444;
    }

    body.page-rank .hero{
      min-height:100vh;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      padding:120px 10%;
    }

    body.page-rank .hero-content{
      max-width:900px;
    }

    body.page-rank .hero h1{
      font-size:72px;
      margin-bottom:20px;
      color:#111111;
      letter-spacing:2px;
      line-height:1.05;
      text-transform:uppercase;
      font-weight:800;
    }

    body.page-rank .hero p{
      font-size:20px;
      line-height:1.9;
      color:#6b6b6b;
      margin-bottom:40px;
      max-width:760px;
      margin-left:auto;
      margin-right:auto;
    }

    body.page-rank .buttons{
      display:inline-flex;
      justify-content:center;
      gap:20px;
      flex-wrap:wrap;
      background: rgba(255,255,255,0.6);
      padding:12px 18px;
      border-radius:14px;
      backdrop-filter: blur(8px);
      border:1px solid rgba(0,0,0,0.06);
      box-shadow: 0 8px 24px rgba(0,0,0,0.06);
      align-items:center;
    }

    body.page-rank .btn{
      padding:16px 34px;
      border:none;
      border-radius:12px;
      cursor:pointer;
      font-size:16px;
      font-weight:bold;
      transition:0.3s;
      text-decoration:none;
    }

    body.page-rank .primary{
      background:#ffffff;
      color:#000000;
      box-shadow:0 8px 24px rgba(0,0,0,0.08);
    }

    body.page-rank .primary:hover{
      transform:translateY(-3px);
      box-shadow:0 14px 40px rgba(0,0,0,0.12);
    }

    body.page-rank .secondary{
      background:transparent;
      border:2px solid rgba(0,0,0,0.08);
      color:#111111;
    }

    body.page-rank .secondary:hover{
      background: rgba(255,255,255,0.9);
      color:#000000;
    }

    body.page-rank section{
      padding:100px 10%;
    }

    body.page-rank .section-title{
      text-align:center;
      font-size:42px;
      margin-bottom:15px;
    }

    body.page-rank .section-subtitle{
      text-align:center;
      color:#d1d1d1;
      margin-bottom:60px;
      font-size:18px;
    }

    body.page-rank .features{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
      gap:30px;
    }

    body.page-rank .card{
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      min-height:360px;
      background:rgba(255,255,255,0.06);
      border:1px solid rgba(255,255,255,0.12);
      border-radius:20px;
      padding:35px;
      transition:transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease, background 0.35s ease;
      backdrop-filter:blur(10px);
    }

    body.page-rank .card:hover{
      transform:translateY(-8px);
      border-color:rgba(255,255,255,0.3);
      box-shadow:0 30px 60px rgba(0,0,0,0.25);
      background:rgba(255,255,255,0.08);
    }

    body.page-rank .card-image{
      width:100%;
      height:180px;
      border-radius:14px;
      overflow:hidden;
      margin-bottom:22px;
      background:rgba(255,255,255,0.04);
      display:flex;
      align-items:center;
      justify-content:center;
    }
    body.page-rank .card-image img{
      max-width:100%;
      max-height:100%;
      object-fit:contain;
      border-radius:14px;
      display:none;
    }
    body.page-rank .card-image .dark-img{display:none;}
    body.page-rank .card-image .light-img{display:block;}
    body.page-rank.dark-mode .card-image .light-img{display:none;}
    body.page-rank.dark-mode .card-image .dark-img{display:block;}
    body.page-rank.dark-mode .card-image{
      background:rgba(255,255,255,0.06);
    }

    body.page-rank .card h3{
      font-size:24px;
      margin-bottom:18px;
      color:#ffffff;
    }

    body.page-rank .card p{
      color:#d8d8d8;
      line-height:1.8;
      margin-bottom:25px;
    }

    body.page-rank .product-btn{
      display:inline-block;
      padding:12px 24px;
      background:#ffffff;
      border:1px solid rgba(255,255,255,0.18);
      border-radius:12px;
      color:#000000;
      text-decoration:none;
      transition:transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease, color 0.35s ease;
      font-weight:bold;
      box-shadow:0 10px 30px rgba(255,255,255,0.08);
    }

    body.page-rank .product-btn:hover{
      transform:translateY(-4px) scale(1.02);
      box-shadow:0 18px 40px rgba(255,255,255,0.14);
      background:#f5f5f5;
    }

    body.page-rank .about{
      text-align:center;
      max-width:1000px;
      margin:auto;
    }

    body.page-rank .about p{
      color:#d8d8d8;
      line-height:2;
      margin-bottom:25px;
      font-size:18px;
    }

    body.page-rank footer{
      text-align:center;
      padding:35px;
      border-top:1px solid rgba(255,255,255,0.08);
      color:#7e8ba3;
      background:#040611;
    }

    @media(max-width:768px){

      body.page-rank .hero h1{
        font-size:48px;
      }

      body.page-rank nav{
        display:none;
      }

      body.page-rank .hero p{
        font-size:17px;
      }

      body.page-rank .section-title{
        font-size:34px;
      }
    }
  


        body.page-rankb *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            scroll-behavior: smooth;
        }

        body.page-rankb{
            font-family: Arial, Helvetica, sans-serif;
            background: linear-gradient(180deg, #fffaf0 0%, #000000 100%);
            color: #111111;
            min-height: 100vh;
            overflow-x: hidden;
        }

        body.page-rankb::before{
            content: "";
            position: fixed;
            width: 600px;
            height: 600px;
            background: radial-gradient(circle, rgba(255,255,255,0.12), transparent 70%);
            top: -200px;
            left: -150px;
            z-index: -1;
        }

        body.page-rankb::after{
            content: "";
            position: fixed;
            width: 500px;
            height: 500px;
            background: radial-gradient(circle, rgba(255,255,255,0.08), transparent 70%);
            bottom: -200px;
            right: -150px;
            z-index: -1;
        }

        /* NAVBAR */

        body.page-rankb nav{
            width: 100%;
            padding: 25px 8%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(0,0,0,0.06);
            background: rgba(255,250,240,0.78);
            backdrop-filter: blur(8px);
            position: sticky;
            top: 0;
            z-index: 100;
        }

        body.page-rankb .logo{
            font-size: 28px;
            font-weight: bold;
            letter-spacing: 2px;
            color: #111111;
            text-decoration: none;
            display: flex;
            align-items: center;
        }

        body.page-rankb .logo img{
            height: 36px;
            width: auto;
            display: block;
            cursor: pointer;
            transition: opacity 280ms ease, transform 280ms ease;
        }

        body.page-rankb .logo span{
            opacity: 0.6;
        }

        body.page-rankb .back{
            text-decoration: none;
            color: #111111;
            font-size: 15px;
            transition: 0.3s;
        }

        body.page-rankb .back:hover{
            color: #444444;
        }

        body.page-rankb .mode-btn{
            padding: 6px 10px;
            border-radius: 8px;
            border: 1px solid rgba(0,0,0,0.06);
            background: transparent;
            cursor: pointer;
            font-weight: 700;
            color: #111111;
            transition: 0.3s;
            font-size: 14px;
        }

        body.page-rankb .mode-btn.active{
            background: #111111;
            color: #ffffff;
        }

        /* Dark mode styles */
        body.page-rankb.dark-mode{ background: linear-gradient(180deg, #000000 0%, #000000 100%); color: #f5f5f5; }
        body.page-rankb.dark-mode nav{ background: rgba(0,0,0,0.88); border-bottom: 1px solid rgba(255,255,255,0.08); }
        body.page-rankb.dark-mode .logo{ color: #f5f5f5; }
        body.page-rankb.dark-mode .back{ color: #d1d1d1; }
        body.page-rankb.dark-mode .back:hover{ color: #ffffff; }
        body.page-rankb.dark-mode .mode-btn{ color: #f5f5f5; border: 1px solid rgba(255,255,255,0.12); }
        body.page-rankb.dark-mode .mode-btn.active{ background: #f5f5f5; color: #000000; }

        /* HERO */

        body.page-rankb .hero{
            text-align: center;
            padding: 120px 20px 60px;
            min-height: 60vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        body.page-rankb .badge{
            display: inline-block;
            padding: 8px 15px;
            border: 1px solid rgba(0,0,0,0.06);
            border-radius: 50px;
            color: #777777;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 22px;
            background: rgba(255,255,255,0.4);
        }

        body.page-rankb .hero h1{
            font-size: clamp(42px, 7vw, 72px);
            line-height: 1;
            font-weight: 800;
            letter-spacing: -2px;
            color: #111111;
            margin-bottom: 20px;
        }

        body.page-rankb .hero h1 span{
            color: #888888;
        }

        body.page-rankb .hero p{
            max-width: 700px;
            margin: 20px auto 0;
            color: #6b6b6b;
            font-size: 18px;
            line-height: 1.7;
        }

        body.page-rankb.dark-mode .badge{ background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.12); color: #9a9a9a; }
        body.page-rankb.dark-mode .hero h1{ color: #ffffff; }
        body.page-rankb.dark-mode .hero h1 span{ color: #b0b0b0; }
        body.page-rankb.dark-mode .hero p{ color: #d0d0d0; }

        /* MAIN */

        body.page-rankb .container{
            width: 90%;
            max-width: 1200px;
            margin: auto;
            padding-bottom: 80px;
            padding-top: 40px;
        }

        /* SELECTOR */

        body.page-rankb .selector{
            background: rgba(255,255,255,0.6);
            border: 1px solid rgba(0,0,0,0.06);
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.06);
            backdrop-filter: blur(8px);
        }

        body.page-rankb .selector-title{
            font-size: 22px;
            font-weight: 800;
            margin-bottom: 25px;
            color: #111111;
        }

        body.page-rankb .modes{
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
            margin-bottom: 30px;
        }

        body.page-rankb .mode{
            padding: 16px;
            background: #ffffff;
            border: 1px solid rgba(0,0,0,0.08);
            border-radius: 12px;
            color: #666666;
            cursor: pointer;
            text-align: center;
            transition: 0.3s;
            font-weight: 700;
            font-size: 15px;
        }

        body.page-rankb .mode small{
            display: block;
            font-size: 11px;
            color: #999999;
            margin-top: 5px;
            font-weight: normal;
        }

        body.page-rankb .mode:hover{
            border-color: #111111;
            color: #111111;
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.08);
        }

        body.page-rankb .mode.active{
            background: #111111;
            color: #ffffff;
            border-color: #111111;
        }

        body.page-rankb .mode.active small{
            color: #cccccc;
        }

        body.page-rankb.dark-mode .selector{ background: rgba(40,40,50,0.8); border: 1px solid rgba(255,255,255,0.15); }
        body.page-rankb.dark-mode .selector-title{ color: #ffffff; }
        body.page-rankb.dark-mode .mode{ background: #1a1a24; border: 1px solid rgba(255,255,255,0.1); color: #d0d0d0; }
        body.page-rankb.dark-mode .mode small{ color: #909090; }
        body.page-rankb.dark-mode .mode:hover{ border-color: #ffffff; color: #ffffff; box-shadow: 0 8px 20px rgba(0,0,0,0.3); }
        body.page-rankb.dark-mode .mode.active{ background: #ffffff; color: #000000; border-color: #ffffff; }
        body.page-rankb.dark-mode .mode.active small{ color: #444444; }

        /* RANK SELECTORS */

        body.page-rankb .rank-selection{
            display: grid;
            grid-template-columns: 1fr 60px 1fr;
            gap: 15px;
            align-items: center;
            margin-top: 30px;
            margin-bottom: 25px;
        }

        body.page-rankb .rank-box{
            background: #ffffff;
            border: 1px solid rgba(0,0,0,0.06);
            border-radius: 15px;
            padding: 20px;
        }

        body.page-rankb .rank-box label{
            display: block;
            color: #999999;
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            margin-bottom: 10px;
            font-weight: 700;
        }

        body.page-rankb select{
            width: 100%;
            background: #ffffff;
            border: 1px solid rgba(0,0,0,0.06);
            color: #111111;
            padding: 12px;
            border-radius: 10px;
            font-size: 15px;
            outline: none;
            cursor: pointer;
            font-weight: 600;
        }

        body.page-rankb .arrow{
            text-align: center;
            color: #999999;
            font-size: 24px;
        }

        body.page-rankb.dark-mode .rank-box{ background: #1a1a24; border: 1px solid rgba(255,255,255,0.1); }
        body.page-rankb.dark-mode .rank-box label{ color: #909090; }
        body.page-rankb.dark-mode select{ background: #1a1a24; border: 1px solid rgba(255,255,255,0.1); color: #ffffff; }
        body.page-rankb.dark-mode .arrow{ color: #707070; }

        /* PRICE */

        body.page-rankb .price-card{
            margin-top: 25px;
            border-radius: 18px;
            padding: 30px;
            background: rgba(255,255,255,0.8);
            border: 1px solid rgba(0,0,0,0.08);
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.06);
        }

        body.page-rankb .price-info small{
            color: #999999;
            display: block;
            margin-bottom: 8px;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 700;
        }

        body.page-rankb .price-info strong{
            font-size: 20px;
            color: #111111;
            font-weight: 700;
        }

        body.page-rankb .price{
            font-size: 42px;
            font-weight: 800;
            color: #111111;
        }

        body.page-rankb .order-btn{
            border: none;
            background: #111111;
            color: #ffffff;
            padding: 16px 34px;
            border-radius: 12px;
            font-weight: 700;
            cursor: pointer;
            transition: 0.3s;
            font-size: 16px;
        }

        body.page-rankb .order-btn:hover{
            transform: translateY(-3px);
            box-shadow: 0 14px 40px rgba(0,0,0,0.12);
        }

        body.page-rankb.dark-mode .price-card{ background: rgba(40,40,50,0.8); border: 1px solid rgba(255,255,255,0.15); }
        body.page-rankb.dark-mode .price-info small{ color: #909090; }
        body.page-rankb.dark-mode .price-info strong{ color: #ffffff; }
        body.page-rankb.dark-mode .price{ color: #ffffff; }
        body.page-rankb.dark-mode .order-btn{ background: #ffffff; color: #000000; }
        body.page-rankb.dark-mode .order-btn:hover{ box-shadow: 0 14px 40px rgba(0,0,0,0.3); }

        /* PRICING TABLE */

        body.page-rankb .pricing-section{
            margin-top: 60px;
        }

        body.page-rankb .section-heading{
            margin-bottom: 20px;
        }

        body.page-rankb .section-heading h2{
            font-size: 30px;
        }

        body.page-rankb .section-heading p{
            color: #777;
            margin-top: 8px;
        }

        body.page-rankb .table-wrap{
            overflow-x: auto;
            border-radius: 18px;
            border: 1px solid #222;
        }

        body.page-rankb table{
            width: 100%;
            border-collapse: collapse;
            min-width: 700px;
            background: #090909;
        }

        body.page-rankb th{
            background: #111;
            color: #888;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 1px;
            padding: 18px;
            text-align: left;
        }

        body.page-rankb td{
            padding: 19px 18px;
            border-top: 1px solid #1c1c1c;
            color: #ddd;
        }

        body.page-rankb td:not(:first-child){
            font-weight: 800;
        }

        body.page-rankb tr:hover td{
            background: #0e0e0e;
        }

        body.page-rankb .ssl{
            color: #fff;
        }

        /* FEATURES */

        body.page-rankb .features{
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-top: 60px;
        }

        body.page-rankb .feature{
            padding: 30px;
            background: rgba(255,255,255,0.6);
            border: 1px solid rgba(0,0,0,0.06);
            border-radius: 20px;
            backdrop-filter: blur(8px);
            transition: 0.3s;
        }

        body.page-rankb .feature:hover{
            transform: translateY(-5px);
            box-shadow: 0 14px 40px rgba(0,0,0,0.08);
        }

        body.page-rankb .feature-icon{
            font-size: 28px;
            margin-bottom: 15px;
        }

        body.page-rankb .feature h3{
            margin-bottom: 10px;
            color: #111111;
            font-size: 18px;
            font-weight: 700;
        }

        body.page-rankb .feature p{
            color: #6b6b6b;
            line-height: 1.6;
            font-size: 15px;
        }

        body.page-rankb.dark-mode .feature{ background: rgba(40,40,50,0.8); border: 1px solid rgba(255,255,255,0.15); }
        body.page-rankb.dark-mode .feature:hover{ box-shadow: 0 14px 40px rgba(0,0,0,0.3); }
        body.page-rankb.dark-mode .feature h3{ color: #ffffff; }
        body.page-rankb.dark-mode .feature p{ color: #d0d0d0; }

        /* FOOTER */

        body.page-rankb footer{
            text-align: center;
            padding: 35px;
            border-top: 1px solid rgba(0,0,0,0.06);
            color: #999999;
            background: rgba(255,250,240,0.4);
            font-size: 13px;
        }

        body.page-rankb.dark-mode footer{ background: rgba(0,0,0,0.4); border-top: 1px solid rgba(255,255,255,0.08); color: #707070; }

        /* RESPONSIVE */

        @media(max-width: 768px) {

            body.page-rankb .hero h1{
                font-size: 48px;
            }

            body.page-rankb .hero p{
                font-size: 16px;
            }

            body.page-rankb .modes{
                grid-template-columns: repeat(2, 1fr);
            }

            body.page-rankb .rank-selection{
                grid-template-columns: 1fr;
            }

            body.page-rankb .arrow{
                transform: rotate(90deg);
            }

            body.page-rankb .price-card{
                flex-direction: column;
                align-items: flex-start;
            }

            body.page-rankb .price{
                font-size: 32px;
            }

            body.page-rankb .features{
                grid-template-columns: 1fr;
            }

            body.page-rankb nav{
                padding: 20px 5%;
            }

            body.page-rankb .selector{
                padding: 25px;
            }
        }
            /* Currency select styles */
            body.page-rankb .currency-select{ position:relative; display:inline-block; }
            body.page-rankb .currency-toggle{
                background:rgba(0,0,0,0.04); color:#111111;
                border:1px solid rgba(0,0,0,0.1); padding:8px 12px;
                border-radius:10px; cursor:pointer; font-weight:700;
                display:inline-flex; align-items:center; gap:6px;
            }
            body.page-rankb .currency-dropdown{
                position:absolute; top:calc(100% + 10px); left:0;
                background:rgba(0,0,0,0.9); border:1px solid rgba(255,255,255,0.06);
                padding:8px; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,0.5);
                display:none; min-width:220px; z-index:40;
            }
            body.page-rankb .currency-dropdown.open{ display:block; }
            body.page-rankb .currency-option{
                display:block; background:transparent; color:#f5f5f5;
                border:none; text-align:left; padding:8px 10px; width:100%;
                cursor:pointer; border-radius:8px;
            }
            body.page-rankb .currency-option:hover{ background:rgba(255,255,255,0.03); }
            body.page-rankb .flag{ width:20px; height:14px; object-fit:cover; margin-right:8px; vertical-align:middle; }
            body.page-rankb.dark-mode .currency-toggle{
                background:rgba(255,255,255,0.06); color:#f5f5f5;
                border:1px solid rgba(255,255,255,0.08);
            }
    


        body.page-rankt *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            scroll-behavior: smooth;
        }

        body.page-rankt{
            font-family: Arial, Helvetica, sans-serif;
            background: linear-gradient(180deg, #fffaf0 0%, #000000 100%);
            color: #111111;
            min-height: 100vh;
            overflow-x: hidden;
        }

        body.page-rankt::before{
            content: "";
            position: fixed;
            width: 600px;
            height: 600px;
            background: radial-gradient(circle, rgba(255,255,255,0.12), transparent 70%);
            top: -200px;
            left: -150px;
            z-index: -1;
        }

        body.page-rankt::after{
            content: "";
            position: fixed;
            width: 500px;
            height: 500px;
            background: radial-gradient(circle, rgba(255,255,255,0.08), transparent 70%);
            bottom: -200px;
            right: -150px;
            z-index: -1;
        }

        /* NAVBAR */

        body.page-rankt nav{
            width: 100%;
            padding: 25px 8%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(0,0,0,0.06);
            background: rgba(255,250,240,0.78);
            backdrop-filter: blur(8px);
            position: sticky;
            top: 0;
            z-index: 100;
        }

        body.page-rankt .logo{
            font-size: 28px;
            font-weight: bold;
            letter-spacing: 2px;
            color: #111111;
            text-decoration: none;
            display: flex;
            align-items: center;
        }

        body.page-rankt .logo img{
            height: 36px;
            width: auto;
            display: block;
            cursor: pointer;
            transition: opacity 280ms ease, transform 280ms ease;
        }

        body.page-rankt .logo span{
            opacity: 0.6;
        }

        body.page-rankt .mode-btn{
            padding: 6px 10px;
            border-radius: 8px;
            border: 1px solid rgba(0,0,0,0.06);
            background: transparent;
            cursor: pointer;
            font-weight: 700;
            color: #111111;
            transition: 0.3s;
            font-size: 14px;
        }

        body.page-rankt .mode-btn.active{
            background: #111111;
            color: #ffffff;
        }

        /* Dark mode styles */
        body.page-rankt.dark-mode{ background: linear-gradient(180deg, #000000 0%, #000000 100%); color: #f5f5f5; }
        body.page-rankt.dark-mode nav{ background: rgba(0,0,0,0.88); border-bottom: 1px solid rgba(255,255,255,0.08); }
        body.page-rankt.dark-mode .logo{ color: #f5f5f5; }
        body.page-rankt.dark-mode .mode-btn{ color: #f5f5f5; border: 1px solid rgba(255,255,255,0.12); }
        body.page-rankt.dark-mode .mode-btn.active{ background: #f5f5f5; color: #000000; }

        /* HERO */

        body.page-rankt .hero{
            text-align: center;
            padding: 120px 20px 60px;
            min-height: 60vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        body.page-rankt .badge{
            display: inline-block;
            padding: 8px 15px;
            border: 1px solid rgba(0,0,0,0.06);
            border-radius: 50px;
            color: #777777;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 22px;
            background: rgba(255,255,255,0.4);
        }

        body.page-rankt .hero h1{
            font-size: clamp(42px, 7vw, 72px);
            line-height: 1;
            font-weight: 800;
            letter-spacing: -2px;
            color: #111111;
            margin-bottom: 20px;
        }

        body.page-rankt .hero h1 span{
            color: #888888;
        }

        body.page-rankt .hero p{
            max-width: 700px;
            margin: 20px auto 0;
            color: #6b6b6b;
            font-size: 18px;
            line-height: 1.7;
        }

        body.page-rankt.dark-mode .badge{ background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.12); color: #9a9a9a; }
        body.page-rankt.dark-mode .hero h1{ color: #ffffff; }
        body.page-rankt.dark-mode .hero h1 span{ color: #b0b0b0; }
        body.page-rankt.dark-mode .hero p{ color: #d0d0d0; }

        /* MAIN */

        body.page-rankt .container{
            width: 90%;
            max-width: 1200px;
            margin: auto;
            padding-bottom: 80px;
            padding-top: 40px;
        }

        /* SELECTOR */

        body.page-rankt .selector{
            background: rgba(255,255,255,0.6);
            border: 1px solid rgba(0,0,0,0.06);
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.06);
            backdrop-filter: blur(8px);
        }

        body.page-rankt .selector-title{
            font-size: 22px;
            font-weight: 800;
            margin-bottom: 25px;
            color: #111111;
        }

        body.page-rankt .modes{
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            margin-bottom: 30px;
        }

        body.page-rankt .mode{
            padding: 16px;
            background: #ffffff;
            border: 1px solid rgba(0,0,0,0.08);
            border-radius: 12px;
            color: #666666;
            cursor: pointer;
            text-align: center;
            transition: 0.3s;
            font-weight: 700;
            font-size: 15px;
        }

        body.page-rankt .mode small{
            display: block;
            font-size: 11px;
            color: #999999;
            margin-top: 5px;
            font-weight: normal;
        }

        body.page-rankt .mode:hover{
            border-color: #111111;
            color: #111111;
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.08);
        }

        body.page-rankt .mode.active{
            background: #111111;
            color: #ffffff;
            border-color: #111111;
        }

        body.page-rankt .mode.active small{
            color: #cccccc;
        }

        body.page-rankt.dark-mode .selector{ background: rgba(40,40,50,0.8); border: 1px solid rgba(255,255,255,0.15); }
        body.page-rankt.dark-mode .selector-title{ color: #ffffff; }
        body.page-rankt.dark-mode .mode{ background: #1a1a24; border: 1px solid rgba(255,255,255,0.1); color: #d0d0d0; }
        body.page-rankt.dark-mode .mode small{ color: #909090; }
        body.page-rankt.dark-mode .mode:hover{ border-color: #ffffff; color: #ffffff; box-shadow: 0 8px 20px rgba(0,0,0,0.3); }
        body.page-rankt.dark-mode .mode.active{ background: #ffffff; color: #000000; border-color: #ffffff; }
        body.page-rankt.dark-mode .mode.active small{ color: #444444; }

        /* RANK SELECTOR */

        body.page-rankt .rank-label{
            font-size: 12px;
            color: #999999;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 700;
            margin-bottom: 10px;
            margin-top: 20px;
            display: block;
        }

        body.page-rankt .rank-buttons{
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin-bottom: 25px;
        }

        body.page-rankt .rank-btn{
            padding: 12px;
            background: #ffffff;
            border: 1px solid rgba(0,0,0,0.08);
            border-radius: 10px;
            color: #666666;
            cursor: pointer;
            text-align: center;
            transition: 0.3s;
            font-weight: 600;
            font-size: 13px;
        }

        body.page-rankt .rank-btn:hover{
            border-color: #111111;
            color: #111111;
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(0,0,0,0.08);
        }

        body.page-rankt .rank-btn.active{
            background: #111111;
            color: #ffffff;
            border-color: #111111;
        }

        body.page-rankt.dark-mode .rank-btn{ background: #1a1a24; border: 1px solid rgba(255,255,255,0.1); color: #d0d0d0; }
        body.page-rankt.dark-mode .rank-btn:hover{ border-color: #ffffff; color: #ffffff; box-shadow: 0 6px 15px rgba(0,0,0,0.3); }
        body.page-rankt.dark-mode .rank-btn.active{ background: #ffffff; color: #000000; border-color: #ffffff; }
        body.page-rankt.dark-mode .rank-label{ color: #909090; }

        /* TITLE COLOR SELECTOR */

        body.page-rankt .title-label{
            font-size: 12px;
            color: #999999;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 700;
            margin-bottom: 10px;
            margin-top: 15px;
            display: block;
        }

        body.page-rankt .title-colors{
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
            gap: 10px;
            margin-bottom: 20px;
        }

        body.page-rankt .color-btn{
            padding: 12px;
            background: #ffffff;
            border: 2px solid rgba(0,0,0,0.08);
            border-radius: 10px;
            color: #666666;
            cursor: pointer;
            text-align: center;
            transition: 0.3s;
            font-weight: 600;
            font-size: 13px;
        }

        body.page-rankt .color-btn:hover{
            border-color: #111111;
            color: #111111;
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(0,0,0,0.08);
        }

        body.page-rankt .color-btn.active{
            background: #111111;
            color: #ffffff;
            border-color: #111111;
            box-shadow: 0 6px 15px rgba(0,0,0,0.15);
        }

        body.page-rankt.dark-mode .color-btn{ background: #1a1a24; border-color: rgba(255,255,255,0.1); color: #d0d0d0; }
        body.page-rankt.dark-mode .color-btn:hover{ border-color: #ffffff; color: #ffffff; box-shadow: 0 6px 15px rgba(0,0,0,0.3); }
        body.page-rankt.dark-mode .color-btn.active{ background: #ffffff; color: #000000; border-color: #ffffff; }

        body.page-rankt .price-card{
            margin-top: 25px;
            border-radius: 18px;
            padding: 30px;
            background: rgba(255,255,255,0.8);
            border: 1px solid rgba(0,0,0,0.08);
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.06);
        }

        body.page-rankt .price-info small{
            color: #999999;
            display: block;
            margin-bottom: 8px;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 700;
        }

        body.page-rankt .price-info strong{
            font-size: 20px;
            color: #111111;
            font-weight: 700;
        }

        body.page-rankt .price{
            font-size: 42px;
            font-weight: 800;
            color: #111111;
        }

        body.page-rankt .order-btn{
            border: none;
            background: #111111;
            color: #ffffff;
            padding: 16px 34px;
            border-radius: 12px;
            font-weight: 700;
            cursor: pointer;
            transition: 0.3s;
            font-size: 16px;
        }

        body.page-rankt .order-btn:hover{
            transform: translateY(-3px);
            box-shadow: 0 14px 40px rgba(0,0,0,0.12);
        }

        body.page-rankt.dark-mode .price-card{ background: rgba(40,40,50,0.8); border: 1px solid rgba(255,255,255,0.15); }
        body.page-rankt.dark-mode .price-info small{ color: #909090; }
        body.page-rankt.dark-mode .price-info strong{ color: #ffffff; }
        body.page-rankt.dark-mode .price{ color: #ffffff; }
        body.page-rankt.dark-mode .order-btn{ background: #ffffff; color: #000000; }
        body.page-rankt.dark-mode .order-btn:hover{ box-shadow: 0 14px 40px rgba(0,0,0,0.3); }

        /* FEATURES */

        body.page-rankt .features{
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-top: 60px;
        }

        body.page-rankt .feature{
            padding: 30px;
            background: rgba(255,255,255,0.6);
            border: 1px solid rgba(0,0,0,0.06);
            border-radius: 20px;
            backdrop-filter: blur(8px);
            transition: 0.3s;
        }

        body.page-rankt .feature:hover{
            transform: translateY(-5px);
            box-shadow: 0 14px 40px rgba(0,0,0,0.08);
        }

        body.page-rankt .feature-icon{
            font-size: 28px;
            margin-bottom: 15px;
        }

        body.page-rankt .feature h3{
            margin-bottom: 10px;
            color: #111111;
            font-size: 18px;
            font-weight: 700;
        }

        body.page-rankt .feature p{
            color: #6b6b6b;
            line-height: 1.6;
            font-size: 15px;
        }

        body.page-rankt.dark-mode .feature{ background: rgba(40,40,50,0.8); border: 1px solid rgba(255,255,255,0.15); }
        body.page-rankt.dark-mode .feature:hover{ box-shadow: 0 14px 40px rgba(0,0,0,0.3); }
        body.page-rankt.dark-mode .feature h3{ color: #ffffff; }
        body.page-rankt.dark-mode .feature p{ color: #d0d0d0; }

        /* FOOTER */

        body.page-rankt footer{
            text-align: center;
            padding: 35px;
            border-top: 1px solid rgba(0,0,0,0.06);
            color: #999999;
            background: rgba(255,250,240,0.4);
            font-size: 13px;
        }

        body.page-rankt.dark-mode footer{ background: rgba(0,0,0,0.4); border-top: 1px solid rgba(255,255,255,0.08); color: #707070; }

        /* RESPONSIVE */

        @media(max-width: 768px) {

            body.page-rankt .hero h1{
                font-size: 48px;
            }

            body.page-rankt .hero p{
                font-size: 16px;
            }

            body.page-rankt .modes{
                grid-template-columns: 1fr;
            }

            body.page-rankt .rank-buttons{
                grid-template-columns: 1fr;
            }

            body.page-rankt .title-colors{
                grid-template-columns: repeat(2, 1fr);
            }

            body.page-rankt .price-card{
                flex-direction: column;
                align-items: flex-start;
            }

            body.page-rankt .price{
                font-size: 32px;
            }

            body.page-rankt .features{
                grid-template-columns: 1fr;
            }

            body.page-rankt nav{
                padding: 20px 5%;
            }

            body.page-rankt .selector{
                padding: 25px;
            }
        }
            /* Currency select styles */
            body.page-rankt .currency-select{ position:relative; display:inline-block; }
            body.page-rankt .currency-toggle{
                background:rgba(0,0,0,0.04); color:#111111;
                border:1px solid rgba(0,0,0,0.1); padding:8px 12px;
                border-radius:10px; cursor:pointer; font-weight:700;
                display:inline-flex; align-items:center; gap:6px;
            }
            body.page-rankt .currency-dropdown{
                position:absolute; top:calc(100% + 10px); left:0;
                background:rgba(0,0,0,0.9); border:1px solid rgba(255,255,255,0.06);
                padding:8px; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,0.5);
                display:none; min-width:220px; z-index:40;
            }
            body.page-rankt .currency-dropdown.open{ display:block; }
            body.page-rankt .currency-option{
                display:block; background:transparent; color:#f5f5f5;
                border:none; text-align:left; padding:8px 10px; width:100%;
                cursor:pointer; border-radius:8px;
            }
            body.page-rankt .currency-option:hover{ background:rgba(255,255,255,0.03); }
            body.page-rankt .flag{ width:20px; height:14px; object-fit:cover; margin-right:8px; vertical-align:middle; }
            body.page-rankt.dark-mode .currency-toggle{
                background:rgba(255,255,255,0.06); color:#f5f5f5;
                border:1px solid rgba(255,255,255,0.08);
            }
    


        body.page-ranke *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            scroll-behavior: smooth;
        }

        body.page-ranke{
            font-family: Arial, Helvetica, sans-serif;
            background: linear-gradient(180deg, #fffaf0 0%, #000000 100%);
            color: #111111;
            min-height: 100vh;
            overflow-x: hidden;
        }

        body.page-ranke::before{
            content: "";
            position: fixed;
            width: 600px;
            height: 600px;
            background: radial-gradient(circle, rgba(255,255,255,0.12), transparent 70%);
            top: -200px;
            left: -150px;
            z-index: -1;
        }

        body.page-ranke::after{
            content: "";
            position: fixed;
            width: 500px;
            height: 500px;
            background: radial-gradient(circle, rgba(255,255,255,0.08), transparent 70%);
            bottom: -200px;
            right: -150px;
            z-index: -1;
        }

        /* NAVBAR */

        body.page-ranke nav{
            width: 100%;
            padding: 25px 8%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(0,0,0,0.06);
            background: rgba(255,250,240,0.78);
            backdrop-filter: blur(8px);
            position: sticky;
            top: 0;
            z-index: 100;
        }

        body.page-ranke .logo{
            font-size: 28px;
            font-weight: bold;
            letter-spacing: 2px;
            color: #111111;
            text-decoration: none;
            display: flex;
            align-items: center;
        }

        body.page-ranke .logo img{
            height: 36px;
            width: auto;
            display: block;
            cursor: pointer;
            transition: opacity 280ms ease, transform 280ms ease;
        }

        body.page-ranke .logo span{
            opacity: 0.6;
        }

        body.page-ranke .back{
            text-decoration: none;
            color: #111111;
            font-size: 15px;
            transition: 0.3s;
        }

        body.page-ranke .back:hover{
            color: #444444;
        }

        body.page-ranke .mode-btn{
            padding: 6px 10px;
            border-radius: 8px;
            border: 1px solid rgba(0,0,0,0.06);
            background: transparent;
            cursor: pointer;
            font-weight: 700;
            color: #111111;
            transition: 0.3s;
            font-size: 14px;
        }

        body.page-ranke .mode-btn.active{
            background: #111111;
            color: #ffffff;
        }

        /* Dark mode styles */
        body.page-ranke.dark-mode{ background: linear-gradient(180deg, #000000 0%, #000000 100%); color: #f5f5f5; }
        body.page-ranke.dark-mode nav{ background: rgba(0,0,0,0.88); border-bottom: 1px solid rgba(255,255,255,0.08); }
        body.page-ranke.dark-mode .logo{ color: #f5f5f5; }
        body.page-ranke.dark-mode .back{ color: #d1d1d1; }
        body.page-ranke.dark-mode .back:hover{ color: #ffffff; }
        body.page-ranke.dark-mode .mode-btn{ color: #f5f5f5; border: 1px solid rgba(255,255,255,0.12); }
        body.page-ranke.dark-mode .mode-btn.active{ background: #f5f5f5; color: #000000; }

        /* HERO */

        body.page-ranke .hero{
            text-align: center;
            padding: 120px 20px 60px;
            min-height: 60vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        body.page-ranke .badge{
            display: inline-block;
            padding: 8px 15px;
            border: 1px solid rgba(0,0,0,0.06);
            border-radius: 50px;
            color: #777777;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 22px;
            background: rgba(255,255,255,0.4);
        }

        body.page-ranke .hero h1{
            font-size: clamp(42px, 7vw, 72px);
            line-height: 1;
            font-weight: 800;
            letter-spacing: -2px;
            color: #111111;
            margin-bottom: 20px;
        }

        body.page-ranke .hero h1 span{
            color: #888888;
        }

        body.page-ranke .hero p{
            max-width: 700px;
            margin: 20px auto 0;
            color: #6b6b6b;
            font-size: 18px;
            line-height: 1.7;
        }

        body.page-ranke.dark-mode .badge{ background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.12); color: #9a9a9a; }
        body.page-ranke.dark-mode .hero h1{ color: #ffffff; }
        body.page-ranke.dark-mode .hero h1 span{ color: #b0b0b0; }
        body.page-ranke.dark-mode .hero p{ color: #d0d0d0; }

        /* MAIN */

        body.page-ranke .container{
            width: 90%;
            max-width: 1200px;
            margin: auto;
            padding-bottom: 80px;
            padding-top: 40px;
        }

        /* SELECTOR */

        body.page-ranke .selector{
            background: rgba(255,255,255,0.6);
            border: 1px solid rgba(0,0,0,0.06);
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.06);
            backdrop-filter: blur(8px);
        }

        body.page-ranke .selector-title{
            font-size: 22px;
            font-weight: 800;
            margin-bottom: 25px;
            color: #111111;
        }

        body.page-ranke .modes{
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 12px;
            margin-bottom: 30px;
        }

        body.page-ranke .mode{
            padding: 16px;
            background: #ffffff;
            border: 1px solid rgba(0,0,0,0.08);
            border-radius: 12px;
            color: #666666;
            cursor: pointer;
            text-align: center;
            transition: 0.3s;
            font-weight: 700;
            font-size: 15px;
        }

        body.page-ranke .mode small{
            display: block;
            font-size: 11px;
            color: #999999;
            margin-top: 5px;
            font-weight: normal;
        }

        body.page-ranke .mode:hover{
            border-color: #111111;
            color: #111111;
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.08);
        }

        body.page-ranke .mode.active{
            background: #111111;
            color: #ffffff;
            border-color: #111111;
        }

        body.page-ranke .mode.active small{
            color: #cccccc;
        }

        body.page-ranke.dark-mode .selector{ background: rgba(40,40,50,0.8); border: 1px solid rgba(255,255,255,0.15); }
        body.page-ranke.dark-mode .selector-title{ color: #ffffff; }
        body.page-ranke.dark-mode .mode{ background: #1a1a24; border: 1px solid rgba(255,255,255,0.1); color: #d0d0d0; }
        body.page-ranke.dark-mode .mode small{ color: #909090; }
        body.page-ranke.dark-mode .mode:hover{ border-color: #ffffff; color: #ffffff; box-shadow: 0 8px 20px rgba(0,0,0,0.3); }
        body.page-ranke.dark-mode .mode.active{ background: #ffffff; color: #000000; border-color: #ffffff; }
        body.page-ranke.dark-mode .mode.active small{ color: #444444; }

        /* RANK SELECTORS */

        body.page-ranke .rank-selection{
            display: grid;
            grid-template-columns: 1fr 60px 1fr;
            gap: 15px;
            align-items: center;
            margin-top: 30px;
            margin-bottom: 25px;
        }

        body.page-ranke .rank-box{
            background: #ffffff;
            border: 1px solid rgba(0,0,0,0.06);
            border-radius: 15px;
            padding: 20px;
        }

        body.page-ranke .rank-box label{
            display: block;
            color: #999999;
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            margin-bottom: 10px;
            font-weight: 700;
        }

        body.page-ranke select{
            width: 100%;
            background: #ffffff;
            border: 1px solid rgba(0,0,0,0.06);
            color: #111111;
            padding: 12px;
            border-radius: 10px;
            font-size: 15px;
            outline: none;
            cursor: pointer;
            font-weight: 600;
        }

        body.page-ranke .arrow{
            text-align: center;
            color: #999999;
            font-size: 24px;
        }

        body.page-ranke.dark-mode .rank-box{ background: #1a1a24; border: 1px solid rgba(255,255,255,0.1); }
        body.page-ranke.dark-mode .rank-box label{ color: #909090; }
        body.page-ranke.dark-mode select{ background: #1a1a24; border: 1px solid rgba(255,255,255,0.1); color: #ffffff; }
        body.page-ranke.dark-mode .arrow{ color: #707070; }

        /* PRICE */

        body.page-ranke .price-card{
            margin-top: 25px;
            border-radius: 18px;
            padding: 30px;
            background: rgba(255,255,255,0.8);
            border: 1px solid rgba(0,0,0,0.08);
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.06);
        }

        body.page-ranke .price-info small{
            color: #999999;
            display: block;
            margin-bottom: 8px;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 700;
        }

        body.page-ranke .price-info strong{
            font-size: 20px;
            color: #111111;
            font-weight: 700;
        }

        body.page-ranke .price{
            font-size: 42px;
            font-weight: 800;
            color: #111111;
        }

        body.page-ranke .order-btn{
            border: none;
            background: #111111;
            color: #ffffff;
            padding: 16px 34px;
            border-radius: 12px;
            font-weight: 700;
            cursor: pointer;
            transition: 0.3s;
            font-size: 16px;
        }

        body.page-ranke .order-btn:hover{
            transform: translateY(-3px);
            box-shadow: 0 14px 40px rgba(0,0,0,0.12);
        }

        body.page-ranke.dark-mode .price-card{ background: rgba(40,40,50,0.8); border: 1px solid rgba(255,255,255,0.15); }
        body.page-ranke.dark-mode .price-info small{ color: #909090; }
        body.page-ranke.dark-mode .price-info strong{ color: #ffffff; }
        body.page-ranke.dark-mode .price{ color: #ffffff; }
        body.page-ranke.dark-mode .order-btn{ background: #ffffff; color: #000000; }
        body.page-ranke.dark-mode .order-btn:hover{ box-shadow: 0 14px 40px rgba(0,0,0,0.3); }

        /* PRICING TABLE */

        body.page-ranke .pricing-section{
            margin-top: 60px;
        }

        body.page-ranke .section-heading{
            margin-bottom: 20px;
        }

        body.page-ranke .section-heading h2{
            font-size: 30px;
        }

        body.page-ranke .section-heading p{
            color: #777;
            margin-top: 8px;
        }

        body.page-ranke .table-wrap{
            overflow-x: auto;
            border-radius: 18px;
            border: 1px solid #222;
        }

        body.page-ranke table{
            width: 100%;
            border-collapse: collapse;
            min-width: 700px;
            background: #090909;
        }

        body.page-ranke th{
            background: #111;
            color: #888;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 1px;
            padding: 18px;
            text-align: left;
        }

        body.page-ranke td{
            padding: 19px 18px;
            border-top: 1px solid #1c1c1c;
            color: #ddd;
        }

        body.page-ranke td:not(:first-child){
            font-weight: 800;
        }

        body.page-ranke tr:hover td{
            background: #0e0e0e;
        }

        body.page-ranke .ssl{
            color: #fff;
        }

        /* FEATURES */

        body.page-ranke .features{
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-top: 60px;
        }

        body.page-ranke .feature{
            padding: 30px;
            background: rgba(255,255,255,0.6);
            border: 1px solid rgba(0,0,0,0.06);
            border-radius: 20px;
            backdrop-filter: blur(8px);
            transition: 0.3s;
        }

        body.page-ranke .feature:hover{
            transform: translateY(-5px);
            box-shadow: 0 14px 40px rgba(0,0,0,0.08);
        }

        body.page-ranke .feature-icon{
            font-size: 28px;
            margin-bottom: 15px;
        }

        body.page-ranke .feature h3{
            margin-bottom: 10px;
            color: #111111;
            font-size: 18px;
            font-weight: 700;
        }

        body.page-ranke .feature p{
            color: #6b6b6b;
            line-height: 1.6;
            font-size: 15px;
        }

        body.page-ranke.dark-mode .feature{ background: rgba(40,40,50,0.8); border: 1px solid rgba(255,255,255,0.15); }
        body.page-ranke.dark-mode .feature:hover{ box-shadow: 0 14px 40px rgba(0,0,0,0.3); }
        body.page-ranke.dark-mode .feature h3{ color: #ffffff; }
        body.page-ranke.dark-mode .feature p{ color: #d0d0d0; }

        /* FOOTER */

        body.page-ranke footer{
            text-align: center;
            padding: 35px;
            border-top: 1px solid rgba(0,0,0,0.06);
            color: #999999;
            background: rgba(255,250,240,0.4);
            font-size: 13px;
        }

        body.page-ranke.dark-mode footer{ background: rgba(0,0,0,0.4); border-top: 1px solid rgba(255,255,255,0.08); color: #707070; }

        /* RESPONSIVE */

        @media(max-width: 768px) {

            body.page-ranke .hero h1{
                font-size: 48px;
            }

            body.page-ranke .hero p{
                font-size: 16px;
            }

            body.page-ranke .modes{
                grid-template-columns: repeat(2, 1fr);
            }

            body.page-ranke .rank-selection{
                grid-template-columns: 1fr;
            }

            body.page-ranke .arrow{
                transform: rotate(90deg);
            }

            body.page-ranke .price-card{
                flex-direction: column;
                align-items: flex-start;
            }

            body.page-ranke .price{
                font-size: 32px;
            }

            body.page-ranke .features{
                grid-template-columns: 1fr;
            }

            body.page-ranke nav{
                padding: 20px 5%;
            }

            body.page-ranke .selector{
                padding: 25px;
            }
        }
            /* Currency select styles */
            body.page-ranke .currency-select{ position:relative; display:inline-block; }
            body.page-ranke .currency-toggle{
                background:rgba(0,0,0,0.04); color:#111111;
                border:1px solid rgba(0,0,0,0.1); padding:8px 12px;
                border-radius:10px; cursor:pointer; font-weight:700;
                display:inline-flex; align-items:center; gap:6px;
            }
            body.page-ranke .currency-dropdown{
                position:absolute; top:calc(100% + 10px); left:0;
                background:rgba(0,0,0,0.9); border:1px solid rgba(255,255,255,0.06);
                padding:8px; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,0.5);
                display:none; min-width:220px; z-index:40;
            }
            body.page-ranke .currency-dropdown.open{ display:block; }
            body.page-ranke .currency-option{
                display:block; background:transparent; color:#f5f5f5;
                border:none; text-align:left; padding:8px 10px; width:100%;
                cursor:pointer; border-radius:8px;
            }
            body.page-ranke .currency-option:hover{ background:rgba(255,255,255,0.03); }
            body.page-ranke .flag{ width:20px; height:14px; object-fit:cover; margin-right:8px; vertical-align:middle; }
            body.page-ranke.dark-mode .currency-toggle{
                background:rgba(255,255,255,0.06); color:#f5f5f5;
                border:1px solid rgba(255,255,255,0.08);
            }
    



        body.page-steam *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            scroll-behavior: smooth;
        }

        body.page-steam{
            font-family: Arial, Helvetica, sans-serif;
            background: linear-gradient(180deg, #fffaf0 0%, #000000 100%);
            color: #111111;
            min-height: 100vh;
            overflow-x: hidden;
        }

        body.page-steam::before{
            content: "";
            position: fixed;
            width: 600px;
            height: 600px;
            background: radial-gradient(circle, rgba(255,255,255,0.12), transparent 70%);
            top: -200px;
            left: -150px;
            z-index: -1;
        }

        body.page-steam::after{
            content: "";
            position: fixed;
            width: 500px;
            height: 500px;
            background: radial-gradient(circle, rgba(255,255,255,0.08), transparent 70%);
            bottom: -200px;
            right: -150px;
            z-index: -1;
        }

        /* NAVBAR */

        body.page-steam nav{
            width: 100%;
            padding: 25px 8%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(0,0,0,0.06);
            background: rgba(255,250,240,0.78);
            backdrop-filter: blur(8px);
            position: sticky;
            top: 0;
            z-index: 100;
        }

        body.page-steam .logo{
            font-size: 28px;
            font-weight: bold;
            letter-spacing: 2px;
            color: #111111;
            text-decoration: none;
            display: flex;
            align-items: center;
        }

        body.page-steam .logo img{
            height: 36px;
            width: auto;
            display: block;
            cursor: pointer;
            transition: opacity 280ms ease, transform 280ms ease;
        }

        body.page-steam .logo span{
            opacity: 0.6;
        }

        body.page-steam .back{
            text-decoration: none;
            color: #111111;
            font-size: 15px;
            transition: 0.3s;
        }

        body.page-steam .back:hover{
            color: #444444;
        }

        body.page-steam .mode-btn{
            padding: 6px 10px;
            border-radius: 8px;
            border: 1px solid rgba(0,0,0,0.06);
            background: transparent;
            cursor: pointer;
            font-weight: 700;
            color: #111111;
            transition: 0.3s;
            font-size: 14px;
        }

        body.page-steam .mode-btn.active{
            background: #111111;
            color: #ffffff;
        }

        /* Dark mode styles */
        body.page-steam.dark-mode{ background: linear-gradient(180deg, #000000 0%, #000000 100%); color: #f5f5f5; }
        body.page-steam.dark-mode nav{ background: rgba(0,0,0,0.88); border-bottom: 1px solid rgba(255,255,255,0.08); }
        body.page-steam.dark-mode .logo{ color: #f5f5f5; }
        body.page-steam.dark-mode .back{ color: #d1d1d1; }
        body.page-steam.dark-mode .back:hover{ color: #ffffff; }
        body.page-steam.dark-mode .mode-btn{ color: #f5f5f5; border: 1px solid rgba(255,255,255,0.12); }
        body.page-steam.dark-mode .mode-btn.active{ background: #f5f5f5; color: #000000; }

        /* HERO */

        body.page-steam .hero{
            text-align: center;
            padding: 120px 20px 60px;
            min-height: 60vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        body.page-steam .badge{
            display: inline-block;
            padding: 8px 15px;
            border: 1px solid rgba(0,0,0,0.06);
            border-radius: 50px;
            color: #777777;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 22px;
            background: rgba(255,255,255,0.4);
        }

        body.page-steam .hero h1{
            font-size: clamp(42px, 7vw, 72px);
            line-height: 1;
            font-weight: 800;
            letter-spacing: -2px;
            color: #111111;
            margin-bottom: 20px;
        }

        body.page-steam .hero h1 span{
            color: #888888;
        }

        body.page-steam .hero p{
            max-width: 700px;
            margin: 20px auto 0;
            color: #6b6b6b;
            font-size: 18px;
            line-height: 1.7;
        }

        body.page-steam.dark-mode .badge{ background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.12); color: #9a9a9a; }
        body.page-steam.dark-mode .hero h1{ color: #ffffff; }
        body.page-steam.dark-mode .hero h1 span{ color: #b0b0b0; }
        body.page-steam.dark-mode .hero p{ color: #d0d0d0; }

        /* MAIN */

        body.page-steam .container{
            width: 90%;
            max-width: 1200px;
            margin: auto;
            padding-bottom: 80px;
            padding-top: 40px;
        }

        /* SELECTOR */

        body.page-steam .selector{
            background: rgba(255,255,255,0.6);
            border: 1px solid rgba(0,0,0,0.06);
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.06);
            backdrop-filter: blur(8px);
        }

        body.page-steam .selector-title{
            font-size: 22px;
            font-weight: 800;
            margin-bottom: 25px;
            color: #111111;
        }

        body.page-steam .modes{
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
            margin-bottom: 30px;
        }

        body.page-steam .mode{
            padding: 16px;
            background: #ffffff;
            border: 1px solid rgba(0,0,0,0.08);
            border-radius: 12px;
            color: #666666;
            cursor: pointer;
            text-align: center;
            transition: 0.3s;
            font-weight: 700;
            font-size: 15px;
        }

        body.page-steam .mode small{
            display: block;
            font-size: 11px;
            color: #999999;
            margin-top: 5px;
            font-weight: normal;
        }

        body.page-steam .mode:hover{
            border-color: #111111;
            color: #111111;
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.08);
        }

        body.page-steam .mode.active{
            background: #111111;
            color: #ffffff;
            border-color: #111111;
        }

        body.page-steam .mode.active small{
            color: #cccccc;
        }

        body.page-steam.dark-mode .selector{ background: rgba(40,40,50,0.8); border: 1px solid rgba(255,255,255,0.15); }
        body.page-steam.dark-mode .selector-title{ color: #ffffff; }
        body.page-steam.dark-mode .mode{ background: #1a1a24; border: 1px solid rgba(255,255,255,0.1); color: #d0d0d0; }
        body.page-steam.dark-mode .mode small{ color: #909090; }
        body.page-steam.dark-mode .mode:hover{ border-color: #ffffff; color: #ffffff; box-shadow: 0 8px 20px rgba(0,0,0,0.3); }
        body.page-steam.dark-mode .mode.active{ background: #ffffff; color: #000000; border-color: #ffffff; }
        body.page-steam.dark-mode .mode.active small{ color: #444444; }

        /* RANK SELECTORS */

        body.page-steam .rank-selection{
            display: grid;
            grid-template-columns: 1fr 60px 1fr;
            gap: 15px;
            align-items: center;
            margin-top: 30px;
            margin-bottom: 25px;
        }

        body.page-steam .rank-box{
            background: #ffffff;
            border: 1px solid rgba(0,0,0,0.06);
            border-radius: 15px;
            padding: 20px;
        }

        body.page-steam .rank-box label{
            display: block;
            color: #999999;
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            margin-bottom: 10px;
            font-weight: 700;
        }

        body.page-steam select{
            width: 100%;
            background: #ffffff;
            border: 1px solid rgba(0,0,0,0.06);
            color: #111111;
            padding: 12px;
            border-radius: 10px;
            font-size: 15px;
            outline: none;
            cursor: pointer;
            font-weight: 600;
        }

        body.page-steam .arrow{
            text-align: center;
            color: #999999;
            font-size: 24px;
        }

        body.page-steam.dark-mode .rank-box{ background: #1a1a24; border: 1px solid rgba(255,255,255,0.1); }
        body.page-steam.dark-mode .rank-box label{ color: #909090; }
        body.page-steam.dark-mode select{ background: #1a1a24; border: 1px solid rgba(255,255,255,0.1); color: #ffffff; }
        body.page-steam.dark-mode .arrow{ color: #707070; }

        /* PRICE */

        body.page-steam .price-card{
            margin-top: 25px;
            border-radius: 18px;
            padding: 30px;
            background: rgba(255,255,255,0.8);
            border: 1px solid rgba(0,0,0,0.08);
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.06);
        }

        body.page-steam .price-info small{
            color: #999999;
            display: block;
            margin-bottom: 8px;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 700;
        }

        body.page-steam .price-info strong{
            font-size: 20px;
            color: #111111;
            font-weight: 700;
        }

        body.page-steam .price{
            font-size: 42px;
            font-weight: 800;
            color: #111111;
        }

        body.page-steam .order-btn{
            border: none;
            background: #111111;
            color: #ffffff;
            padding: 16px 34px;
            border-radius: 12px;
            font-weight: 700;
            cursor: pointer;
            transition: 0.3s;
            font-size: 16px;
        }

        body.page-steam .order-btn:hover{
            transform: translateY(-3px);
            box-shadow: 0 14px 40px rgba(0,0,0,0.12);
        }

        body.page-steam.dark-mode .price-card{ background: rgba(40,40,50,0.8); border: 1px solid rgba(255,255,255,0.15); }
        body.page-steam.dark-mode .price-info small{ color: #909090; }
        body.page-steam.dark-mode .price-info strong{ color: #ffffff; }
        body.page-steam.dark-mode .price{ color: #ffffff; }
        body.page-steam.dark-mode .order-btn{ background: #ffffff; color: #000000; }
        body.page-steam.dark-mode .order-btn:hover{ box-shadow: 0 14px 40px rgba(0,0,0,0.3); }

        /* PRICING TABLE */

        body.page-steam .pricing-section{
            margin-top: 60px;
        }

        body.page-steam .section-heading{
            margin-bottom: 20px;
        }

        body.page-steam .section-heading h2{
            font-size: 30px;
        }

        body.page-steam .section-heading p{
            color: #777;
            margin-top: 8px;
        }

        body.page-steam .table-wrap{
            overflow-x: auto;
            border-radius: 18px;
            border: 1px solid #222;
        }

        body.page-steam table{
            width: 100%;
            border-collapse: collapse;
            min-width: 700px;
            background: #090909;
        }

        body.page-steam th{
            background: #111;
            color: #888;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 1px;
            padding: 18px;
            text-align: left;
        }

        body.page-steam td{
            padding: 19px 18px;
            border-top: 1px solid #1c1c1c;
            color: #ddd;
        }

        body.page-steam td:not(:first-child){
            font-weight: 800;
        }

        body.page-steam tr:hover td{
            background: #0e0e0e;
        }

        body.page-steam .ssl{
            color: #fff;
        }

        /* FEATURES */

        body.page-steam .features{
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-top: 60px;
        }

        body.page-steam .feature{
            padding: 30px;
            background: rgba(255,255,255,0.6);
            border: 1px solid rgba(0,0,0,0.06);
            border-radius: 20px;
            backdrop-filter: blur(8px);
            transition: 0.3s;
        }

        body.page-steam .feature:hover{
            transform: translateY(-5px);
            box-shadow: 0 14px 40px rgba(0,0,0,0.08);
        }

        body.page-steam .feature-icon{
            font-size: 28px;
            margin-bottom: 15px;
        }

        body.page-steam .feature h3{
            margin-bottom: 10px;
            color: #111111;
            font-size: 18px;
            font-weight: 700;
        }

        body.page-steam .feature p{
            color: #6b6b6b;
            line-height: 1.6;
            font-size: 15px;
        }

        body.page-steam.dark-mode .feature{ background: rgba(40,40,50,0.8); border: 1px solid rgba(255,255,255,0.15); }
        body.page-steam.dark-mode .feature:hover{ box-shadow: 0 14px 40px rgba(0,0,0,0.3); }
        body.page-steam.dark-mode .feature h3{ color: #ffffff; }
        body.page-steam.dark-mode .feature p{ color: #d0d0d0; }

        /* FOOTER */

        body.page-steam footer{
            text-align: center;
            padding: 35px;
            border-top: 1px solid rgba(0,0,0,0.06);
            color: #999999;
            background: rgba(255,250,240,0.4);
            font-size: 13px;
        }

        body.page-steam.dark-mode footer{ background: rgba(0,0,0,0.4); border-top: 1px solid rgba(255,255,255,0.08); color: #707070; }

        /* RESPONSIVE */

        @media(max-width: 768px) {

            body.page-steam .hero h1{
                font-size: 48px;
            }

            body.page-steam .hero p{
                font-size: 16px;
            }

            body.page-steam .modes{
                grid-template-columns: repeat(2, 1fr);
            }

            body.page-steam .rank-selection{
                grid-template-columns: 1fr;
            }

            body.page-steam .arrow{
                transform: rotate(90deg);
            }

            body.page-steam .price-card{
                flex-direction: column;
                align-items: flex-start;
            }

            body.page-steam .price{
                font-size: 32px;
            }

            body.page-steam .features{
                grid-template-columns: 1fr;
            }

            body.page-steam nav{
                padding: 20px 5%;
            }

            body.page-steam .selector{
                padding: 25px;
            }
        }

/* STEAM ACCOUNT STORE */
body.page-steam .market-section{
    margin-top: 60px;
}

body.page-steam .config-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 20px;
}

body.page-steam .option-card{
    appearance: none;
    border: 1px solid rgba(0,0,0,0.08);
    background: #ffffff;
    color: #666666;
    border-radius: 14px;
    padding: 20px;
    text-align: left;
    cursor: pointer;
    transition: 0.25s;
    width: 100%;
}

body.page-steam .option-card:hover{
    transform: translateY(-2px);
    border-color: #111;
    box-shadow: 0 10px 22px rgba(0,0,0,0.07);
}

body.page-steam .option-card.active{
    background: #111;
    color: #fff;
    border-color: #111;
}

body.page-steam .option-card strong{
    display: block;
    color: inherit;
    font-size: 16px;
    margin-bottom: 7px;
}

body.page-steam .option-card span{
    color: #999;
    font-size: 12px;
    line-height: 1.5;
}

body.page-steam .option-card.active span{
    color: #cfcfcf;
}

body.page-steam .market-summary{
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items: center;
    margin-top: 25px;
    padding: 30px;
    border-radius: 18px;
    background: rgba(255,255,255,0.8);
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

body.page-steam .summary-small{
    color: #999;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 8px;
}

body.page-steam .summary-title{
    font-size: 20px;
    font-weight: 800;
}

body.page-steam .summary-price{
    font-size: 42px;
    font-weight: 800;
    color: #111;
    white-space: nowrap;
}

body.page-steam .check-btn{
    margin-top: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    text-decoration: none;
    background: #111;
    color: #fff;
    padding: 14px 22px;
    border-radius: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.25s;
}

body.page-steam .check-btn:hover{
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

body.page-steam .market-note{
    margin-top: 12px;
    color: #777;
    font-size: 12px;
    line-height: 1.6;
}

body.page-steam .sell-section{
    margin-top: 60px;
}

body.page-steam .sell-card{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 38px;
    border-radius: 20px;
    background: rgba(255,255,255,0.62);
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    backdrop-filter: blur(8px);
}

body.page-steam .sell-card h2{
    margin-top: 12px;
    font-size: 30px;
}

body.page-steam .sell-card p{
    max-width: 700px;
    color: #6b6b6b;
    line-height: 1.6;
    margin-top: 10px;
}

body.page-steam .sell-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background: #111;
    color: #fff;
    padding: 16px 28px;
    border-radius: 12px;
    font-weight: 700;
    white-space: nowrap;
    transition: 0.3s;
}

body.page-steam .sell-btn:hover{
    transform: translateY(-3px);
    box-shadow: 0 14px 40px rgba(0,0,0,0.12);
}

body.page-steam.dark-mode .option-card{
    background: #1a1a24;
    border-color: rgba(255,255,255,0.1);
    color: #d0d0d0;
}

body.page-steam.dark-mode .option-card:hover{
    border-color: #fff;
}

body.page-steam.dark-mode .option-card.active{
    background: #fff;
    color: #000;
    border-color: #fff;
}

body.page-steam.dark-mode .option-card.active span{
    color: #444;
}

body.page-steam.dark-mode .market-summary, body.page-steam.dark-mode .sell-card{
    background: rgba(40,40,50,0.8);
    border-color: rgba(255,255,255,0.15);
}

body.page-steam.dark-mode .summary-price{
    color: #fff;
}

body.page-steam.dark-mode .market-note, body.page-steam.dark-mode .sell-card p{
    color: #d0d0d0;
}

body.page-steam.dark-mode .check-btn, body.page-steam.dark-mode .sell-btn{
    background: #fff;
    color: #000;
}

@media(max-width: 768px) {
    body.page-steam .config-grid{
        grid-template-columns: 1fr;
    }

    body.page-steam .market-summary{
        grid-template-columns: 1fr;
    }

    body.page-steam .summary-price{
        font-size: 34px;
    }

    body.page-steam .sell-card{
        flex-direction: column;
        align-items: flex-start;
        padding: 28px;
    }

    body.page-steam .sell-btn{
        width: 100%;
    }
}
            /* Currency select styles */
            body.page-steam .currency-select{ position:relative; display:inline-block; }
            body.page-steam .currency-toggle{
                background:rgba(0,0,0,0.04); color:#111111;
                border:1px solid rgba(0,0,0,0.1); padding:8px 12px;
                border-radius:10px; cursor:pointer; font-weight:700;
                display:inline-flex; align-items:center; gap:6px;
            }
            body.page-steam .currency-dropdown{
                position:absolute; top:calc(100% + 10px); left:0;
                background:rgba(0,0,0,0.9); border:1px solid rgba(255,255,255,0.06);
                padding:8px; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,0.5);
                display:none; min-width:220px; z-index:40;
            }
            body.page-steam .currency-dropdown.open{ display:block; }
            body.page-steam .currency-option{
                display:block; background:transparent; color:#f5f5f5;
                border:none; text-align:left; padding:8px 10px; width:100%;
                cursor:pointer; border-radius:8px;
            }
            body.page-steam .currency-option:hover{ background:rgba(255,255,255,0.03); }
            body.page-steam .flag{ width:20px; height:14px; object-fit:cover; margin-right:8px; vertical-align:middle; }
            body.page-steam.dark-mode .currency-toggle{
                background:rgba(255,255,255,0.06); color:#f5f5f5;
                border:1px solid rgba(255,255,255,0.08);
            }
    


            body.page-discord *{
                margin:0;
                padding:0;
                box-sizing:border-box;
                scroll-behavior:smooth;
            }

            body.page-discord{
                font-family: Arial, Helvetica, sans-serif;
                background: linear-gradient(180deg, #fffaf0 0%, #000000 100%);
                color:#111111;
                overflow-x:hidden;
            }

            body.page-discord::before{
                content:"";
                position:fixed;
                width:600px;
                height:600px;
                background:radial-gradient(circle, rgba(255,255,255,0.12), transparent 70%);
                top:-200px;
                left:-150px;
                z-index:-1;
            }

            body.page-discord::after{
                content:"";
                position:fixed;
                width:500px;
                height:500px;
                background:radial-gradient(circle, rgba(255,255,255,0.08), transparent 70%);
                bottom:-200px;
                right:-150px;
                z-index:-1;
            }

            body.page-discord header{
                width:100%;
                padding:25px 8%;
                display:flex;
                justify-content:space-between;
                align-items:center;
                position:fixed;
                top:0;
                z-index:1000;
                background: rgba(255,250,240,0.78);
                backdrop-filter: blur(8px);
                border-bottom:1px solid rgba(0,0,0,0.06);
            }

            body.page-discord .logo{
                font-size:28px;
                font-weight:bold;
                letter-spacing:2px;
                color:#111111;
            }

            body.page-discord .logo img{ height:36px; width:auto; display:block; cursor:pointer; }

            body.page-discord .header-actions{ display:flex; gap:8px; align-items:center; }
            body.page-discord .mode-btn{ padding:6px 10px; border-radius:8px; border:1px solid rgba(0,0,0,0.06); background:transparent; cursor:pointer; font-weight:700; color:#111111; }
            body.page-discord .mode-btn.active{ background:#111111; color:#ffffff; }
            body.page-discord .logo img{ transition:opacity 280ms ease, transform 280ms ease; }
            body.page-discord.dark-mode{ background: linear-gradient(180deg,#000000 0%, #000000 100%); color:#f5f5f5; }
            body.page-discord.dark-mode header{ background: rgba(0,0,0,0.88); border-bottom:1px solid rgba(255,255,255,0.08); }
            body.page-discord.dark-mode .mode-btn{ color:#f5f5f5; border:1px solid rgba(255,255,255,0.12); }
            body.page-discord.dark-mode .mode-btn.active{ background:#f5f5f5; color:#000000; }

            body.page-discord nav a{
                text-decoration:none;
                color:#111111;
                margin-left:30px;
                transition:0.3s;
                font-size:15px;
            }

            body.page-discord nav a:hover{
                color:#444444;
            }

            body.page-discord .container{
                width:90%;
                max-width:1200px;
                margin:120px auto 40px; /* account for fixed header */
                padding:50px 0;
            }

            body.page-discord .section-title{
                font-size:32px;
                margin-bottom:18px;
            }

            body.page-discord .card{
                background:rgba(255,255,255,0.04);
                border:1px solid rgba(255,255,255,0.08);
                border-radius:16px;
                padding:20px;
                transition:transform 0.35s cubic-bezier(.25,.8,.25,1), box-shadow 0.35s cubic-bezier(.25,.8,.25,1), opacity 0.35s ease;
                transform:translateY(0);
                will-change:transform, opacity;
                opacity:0; /* start hidden for reveal */
            }

            body.page-discord .card:hover{
                transform:translateY(-10px) scale(1.01);
                box-shadow:0 30px 60px rgba(0,0,0,0.45);
            }

            body.page-discord .card .icon{
                width:72px;
                height:72px;
                margin:0 auto 16px;
                display:flex;
                align-items:center;
                justify-content:center;
                border-radius:50%;
                background:rgba(255,255,255,0.05);
            }

            body.page-discord .card .icon i, body.page-discord .card .icon img{
                font-size:28px;
                width:36px;
                height:36px;
                color:#fff;
            }

            body.page-discord .card h3{
                margin-bottom:14px;
                text-align:center;
            }

            body.page-discord .products{
                display:grid;
                grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
                gap:20px;
            }

            /* Currency select styles */
            body.page-discord .currency-select{
                position:relative;
                display:inline-block;
            }

            body.page-discord .currency-toggle{
                background:rgba(255,255,255,0.06);
                color:#f5f5f5;
                border:1px solid rgba(255,255,255,0.08);
                padding:10px 14px;
                border-radius:10px;
                cursor:pointer;
                font-weight:700;
            }

            body.page-discord .currency-dropdown{
                position:absolute;
                top:calc(100% + 10px);
                left:0;
                background:rgba(0,0,0,0.9);
                border:1px solid rgba(255,255,255,0.06);
                padding:8px;
                border-radius:10px;
                box-shadow:0 10px 30px rgba(0,0,0,0.5);
                display:none;
                min-width:220px;
                z-index:40;
            }

            body.page-discord .currency-dropdown.open{ display:block; }

            body.page-discord .currency-option{
                display:block;
                background:transparent;
                color:#f5f5f5;
                border:none;
                text-align:left;
                padding:8px 10px;
                width:100%;
                cursor:pointer;
                border-radius:8px;
            }

            body.page-discord .currency-option:hover{ background:rgba(255,255,255,0.03); }
            body.page-discord .flag{
                width:20px;
                height:14px;
                object-fit:cover;
                margin-right:8px;
                vertical-align:middle;
            }

            body.page-discord .price{ color:#d8d8d8; margin:12px 0 }

            body.page-discord .btn{ background:#ffffff; color:#000; padding:10px 14px; border-radius:10px; border:none; cursor:pointer; font-weight:bold; transition:transform 0.22s ease, box-shadow 0.22s ease; }

            body.page-discord .btn:hover{ transform:translateY(-3px); box-shadow:0 10px 30px rgba(0,0,0,0.2); }

            /* Reveal utility for smooth scroll animations */
            body.page-discord .reveal{ opacity:0; transform:translateY(24px); transition:opacity 0.6s cubic-bezier(.2,.8,.2,1), transform 0.6s cubic-bezier(.2,.8,.2,1); }
            body.page-discord .reveal.active{ opacity:1; transform:translateY(0); }

            /* small controls */
            body.page-discord .currency-btn, body.page-discord .boost-tab{ transition:background 0.25s ease, transform 0.18s ease; }
            body.page-discord .currency-btn:hover, body.page-discord .boost-tab:hover{ transform:translateY(-3px); }

            body.page-discord footer{
                text-align:center;
                padding:35px;
                border-top:1px solid rgba(255,255,255,0.08);
                color:#7e8ba3;
                background:#040611;
                margin-top:40px;
            }
            /* Boost cards layout */
            body.page-discord .boost-buttons{ display:flex; gap:12px; justify-content:center; margin-bottom:28px; }

            body.page-discord .boost-tab{
                padding:10px 24px;
                border-radius:16px;
                background:#09090f;
                border:1px solid rgba(255,255,255,0.08);
                color:#d5d6e0;
                cursor:pointer;
                font-weight:700;
                letter-spacing:0.01em;
                transition:background 0.3s cubic-bezier(.25,.8,.25,1), border-color 0.3s cubic-bezier(.25,.8,.25,1), color 0.3s cubic-bezier(.25,.8,.25,1), text-shadow 0.3s cubic-bezier(.25,.8,.25,1);
            }

            body.page-discord .boost-tab.active{
                background:rgba(44, 9, 75, 0.7);
                border-color:#8b5cf6;
                color:#ffffff;
                text-shadow:0 0 18px rgba(227, 129, 255, 0.7);
            }

            body.page-discord .boost-grid{
                display:grid;
                grid-template-columns:repeat(4,1fr);
                gap:24px;
                align-items:start;
            }

            body.page-discord .boost-card{
                background:rgba(7,7,15,0.96);
                border:1px solid rgba(255,255,255,0.06);
                border-radius:24px;
                padding:32px 24px;
                position:relative;
                overflow:hidden;
                transition:transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
                min-height:420px;
            }

            body.page-discord .boost-card:hover{ transform:translateY(-8px); box-shadow:0 30px 50px rgba(0,0,0,0.4); }

            body.page-discord .boost-card h3{ font-size:22px; margin-bottom:12px; letter-spacing:-0.03em; }

            body.page-discord .boost-badge{
                position:absolute;
                top:-10px;
                left:50%;
                transform:translateX(-50%);
                background:#ff75d8;
                color:#fff;
                padding:9px 24px;
                border-radius:999px;
                font-size:11px;
                font-weight:800;
+                letter-spacing:0.08em;
                text-transform:uppercase;
            }

            body.page-discord .boost-price{ font-size:40px; font-weight:900; color:#e397ff; margin:16px 0 20px; letter-spacing:-0.02em; }

            body.page-discord .boost-features{ list-style:none; padding:0; margin:0 0 28px; color:#c0c3d5; line-height:2.1 }

            body.page-discord .boost-features li{ position:relative; padding-left:34px; margin-bottom:12px; }
            body.page-discord .boost-features li::before{ content:'\2713'; position:absolute; left:0; top:2px; color:#de90ff; background:rgba(20, 16, 50, 0.85); width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:11px; border:1px solid rgba(255,255,255,0.08); }

            body.page-discord .purchase{ display:inline-block; width:100%; text-align:center; padding:16px 18px; border-radius:16px; background:rgba(255,255,255,0.04); border:1px solid rgba(112, 65, 255, 0.25); color:#fff; cursor:pointer; font-weight:800; letter-spacing:0.02em; transition:background 0.3s cubic-bezier(.25,.8,.25,1), transform 0.3s cubic-bezier(.25,.8,.25,1);
            }

            body.page-discord .purchase:hover{ transform:translateY(-2px); background:rgba(255,255,255,0.08); }

            body.page-discord .purchase.primary{ background:linear-gradient(90deg,#7d47ff,#a53cff); border:none; box-shadow:0 14px 40px rgba(125,60,255,0.24); }

            body.page-discord .boost-card.popular{ background:linear-gradient(180deg, rgba(81, 19, 134, 0.95), rgba(32, 6, 60, 0.98)); border:1px solid rgba(255,255,255,0.18); }

            @media(max-width:960px){ body.page-discord .boost-grid{ grid-template-columns:repeat(2,1fr); } }
            @media(max-width:560px){ body.page-discord .boost-grid{ grid-template-columns:1fr; } body.page-discord .boost-tab{ padding:10px 16px; } }
        



        body.page-accr *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            scroll-behavior: smooth;
        }

        body.page-accr{
            font-family: Arial, Helvetica, sans-serif;
            background: linear-gradient(180deg, #fffaf0 0%, #000000 100%);
            color: #111111;
            min-height: 100vh;
            overflow-x: hidden;
        }

        body.page-accr::before{
            content: "";
            position: fixed;
            width: 600px;
            height: 600px;
            background: radial-gradient(circle, rgba(255,255,255,0.12), transparent 70%);
            top: -200px;
            left: -150px;
            z-index: -1;
        }

        body.page-accr::after{
            content: "";
            position: fixed;
            width: 500px;
            height: 500px;
            background: radial-gradient(circle, rgba(255,255,255,0.08), transparent 70%);
            bottom: -200px;
            right: -150px;
            z-index: -1;
        }

        /* NAVBAR */

        body.page-accr nav{
            width: 100%;
            padding: 25px 8%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(0,0,0,0.06);
            background: rgba(255,250,240,0.78);
            backdrop-filter: blur(8px);
            position: sticky;
            top: 0;
            z-index: 100;
        }

        body.page-accr .logo{
            font-size: 28px;
            font-weight: bold;
            letter-spacing: 2px;
            color: #111111;
            text-decoration: none;
            display: flex;
            align-items: center;
        }

        body.page-accr .logo img{
            height: 36px;
            width: auto;
            display: block;
            cursor: pointer;
            transition: opacity 280ms ease, transform 280ms ease;
        }

        body.page-accr .logo span{
            opacity: 0.6;
        }

        body.page-accr .back{
            text-decoration: none;
            color: #111111;
            font-size: 15px;
            transition: 0.3s;
        }

        body.page-accr .back:hover{
            color: #444444;
        }

        body.page-accr .mode-btn{
            padding: 6px 10px;
            border-radius: 8px;
            border: 1px solid rgba(0,0,0,0.06);
            background: transparent;
            cursor: pointer;
            font-weight: 700;
            color: #111111;
            transition: 0.3s;
            font-size: 14px;
        }

        body.page-accr .mode-btn.active{
            background: #111111;
            color: #ffffff;
        }

        /* Dark mode styles */
        body.page-accr.dark-mode{ background: linear-gradient(180deg, #000000 0%, #000000 100%); color: #f5f5f5; }
        body.page-accr.dark-mode nav{ background: rgba(0,0,0,0.88); border-bottom: 1px solid rgba(255,255,255,0.08); }
        body.page-accr.dark-mode .logo{ color: #f5f5f5; }
        body.page-accr.dark-mode .back{ color: #d1d1d1; }
        body.page-accr.dark-mode .back:hover{ color: #ffffff; }
        body.page-accr.dark-mode .mode-btn{ color: #f5f5f5; border: 1px solid rgba(255,255,255,0.12); }
        body.page-accr.dark-mode .mode-btn.active{ background: #f5f5f5; color: #000000; }

        /* HERO */

        body.page-accr .hero{
            text-align: center;
            padding: 120px 20px 60px;
            min-height: 60vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        body.page-accr .badge{
            display: inline-block;
            padding: 8px 15px;
            border: 1px solid rgba(0,0,0,0.06);
            border-radius: 50px;
            color: #777777;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 22px;
            background: rgba(255,255,255,0.4);
        }

        body.page-accr .hero h1{
            font-size: clamp(42px, 7vw, 72px);
            line-height: 1;
            font-weight: 800;
            letter-spacing: -2px;
            color: #111111;
            margin-bottom: 20px;
        }

        body.page-accr .hero h1 span{
            color: #888888;
        }

        body.page-accr .hero p{
            max-width: 700px;
            margin: 20px auto 0;
            color: #6b6b6b;
            font-size: 18px;
            line-height: 1.7;
        }

        body.page-accr.dark-mode .badge{ background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.12); color: #9a9a9a; }
        body.page-accr.dark-mode .hero h1{ color: #ffffff; }
        body.page-accr.dark-mode .hero h1 span{ color: #b0b0b0; }
        body.page-accr.dark-mode .hero p{ color: #d0d0d0; }

        /* MAIN */

        body.page-accr .container{
            width: 90%;
            max-width: 1200px;
            margin: auto;
            padding-bottom: 80px;
            padding-top: 40px;
        }

        /* SELECTOR */

        body.page-accr .selector{
            background: rgba(255,255,255,0.6);
            border: 1px solid rgba(0,0,0,0.06);
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.06);
            backdrop-filter: blur(8px);
        }

        body.page-accr .selector-title{
            font-size: 22px;
            font-weight: 800;
            margin-bottom: 25px;
            color: #111111;
        }

        body.page-accr .modes{
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
            margin-bottom: 30px;
        }

        body.page-accr .mode{
            padding: 16px;
            background: #ffffff;
            border: 1px solid rgba(0,0,0,0.08);
            border-radius: 12px;
            color: #666666;
            cursor: pointer;
            text-align: center;
            transition: 0.3s;
            font-weight: 700;
            font-size: 15px;
        }

        body.page-accr .mode small{
            display: block;
            font-size: 11px;
            color: #999999;
            margin-top: 5px;
            font-weight: normal;
        }

        body.page-accr .mode:hover{
            border-color: #111111;
            color: #111111;
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.08);
        }

        body.page-accr .mode.active{
            background: #111111;
            color: #ffffff;
            border-color: #111111;
        }

        body.page-accr .mode.active small{
            color: #cccccc;
        }

        body.page-accr.dark-mode .selector{ background: rgba(40,40,50,0.8); border: 1px solid rgba(255,255,255,0.15); }
        body.page-accr.dark-mode .selector-title{ color: #ffffff; }
        body.page-accr.dark-mode .mode{ background: #1a1a24; border: 1px solid rgba(255,255,255,0.1); color: #d0d0d0; }
        body.page-accr.dark-mode .mode small{ color: #909090; }
        body.page-accr.dark-mode .mode:hover{ border-color: #ffffff; color: #ffffff; box-shadow: 0 8px 20px rgba(0,0,0,0.3); }
        body.page-accr.dark-mode .mode.active{ background: #ffffff; color: #000000; border-color: #ffffff; }
        body.page-accr.dark-mode .mode.active small{ color: #444444; }

        /* RANK SELECTORS */

        body.page-accr .rank-selection{
            display: grid;
            grid-template-columns: 1fr 60px 1fr;
            gap: 15px;
            align-items: center;
            margin-top: 30px;
            margin-bottom: 25px;
        }

        body.page-accr .rank-box{
            background: #ffffff;
            border: 1px solid rgba(0,0,0,0.06);
            border-radius: 15px;
            padding: 20px;
        }

        body.page-accr .rank-box label{
            display: block;
            color: #999999;
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            margin-bottom: 10px;
            font-weight: 700;
        }

        body.page-accr select{
            width: 100%;
            background: #ffffff;
            border: 1px solid rgba(0,0,0,0.06);
            color: #111111;
            padding: 12px;
            border-radius: 10px;
            font-size: 15px;
            outline: none;
            cursor: pointer;
            font-weight: 600;
        }

        body.page-accr .arrow{
            text-align: center;
            color: #999999;
            font-size: 24px;
        }

        body.page-accr.dark-mode .rank-box{ background: #1a1a24; border: 1px solid rgba(255,255,255,0.1); }
        body.page-accr.dark-mode .rank-box label{ color: #909090; }
        body.page-accr.dark-mode select{ background: #1a1a24; border: 1px solid rgba(255,255,255,0.1); color: #ffffff; }
        body.page-accr.dark-mode .arrow{ color: #707070; }

        /* PRICE */

        body.page-accr .price-card{
            margin-top: 25px;
            border-radius: 18px;
            padding: 30px;
            background: rgba(255,255,255,0.8);
            border: 1px solid rgba(0,0,0,0.08);
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.06);
        }

        body.page-accr .price-info small{
            color: #999999;
            display: block;
            margin-bottom: 8px;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 700;
        }

        body.page-accr .price-info strong{
            font-size: 20px;
            color: #111111;
            font-weight: 700;
        }

        body.page-accr .price{
            font-size: 42px;
            font-weight: 800;
            color: #111111;
        }

        body.page-accr .order-btn{
            border: none;
            background: #111111;
            color: #ffffff;
            padding: 16px 34px;
            border-radius: 12px;
            font-weight: 700;
            cursor: pointer;
            transition: 0.3s;
            font-size: 16px;
        }

        body.page-accr .order-btn:hover{
            transform: translateY(-3px);
            box-shadow: 0 14px 40px rgba(0,0,0,0.12);
        }

        body.page-accr.dark-mode .price-card{ background: rgba(40,40,50,0.8); border: 1px solid rgba(255,255,255,0.15); }
        body.page-accr.dark-mode .price-info small{ color: #909090; }
        body.page-accr.dark-mode .price-info strong{ color: #ffffff; }
        body.page-accr.dark-mode .price{ color: #ffffff; }
        body.page-accr.dark-mode .order-btn{ background: #ffffff; color: #000000; }
        body.page-accr.dark-mode .order-btn:hover{ box-shadow: 0 14px 40px rgba(0,0,0,0.3); }

        /* PRICING TABLE */

        body.page-accr .pricing-section{
            margin-top: 60px;
        }

        body.page-accr .section-heading{
            margin-bottom: 20px;
        }

        body.page-accr .section-heading h2{
            font-size: 30px;
        }

        body.page-accr .section-heading p{
            color: #777;
            margin-top: 8px;
        }

        body.page-accr .table-wrap{
            overflow-x: auto;
            border-radius: 18px;
            border: 1px solid #222;
        }

        body.page-accr table{
            width: 100%;
            border-collapse: collapse;
            min-width: 700px;
            background: #090909;
        }

        body.page-accr th{
            background: #111;
            color: #888;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 1px;
            padding: 18px;
            text-align: left;
        }

        body.page-accr td{
            padding: 19px 18px;
            border-top: 1px solid #1c1c1c;
            color: #ddd;
        }

        body.page-accr td:not(:first-child){
            font-weight: 800;
        }

        body.page-accr tr:hover td{
            background: #0e0e0e;
        }

        body.page-accr .ssl{
            color: #fff;
        }

        /* FEATURES */

        body.page-accr .features{
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-top: 60px;
        }

        body.page-accr .feature{
            padding: 30px;
            background: rgba(255,255,255,0.6);
            border: 1px solid rgba(0,0,0,0.06);
            border-radius: 20px;
            backdrop-filter: blur(8px);
            transition: 0.3s;
        }

        body.page-accr .feature:hover{
            transform: translateY(-5px);
            box-shadow: 0 14px 40px rgba(0,0,0,0.08);
        }

        body.page-accr .feature-icon{
            font-size: 28px;
            margin-bottom: 15px;
        }

        body.page-accr .feature h3{
            margin-bottom: 10px;
            color: #111111;
            font-size: 18px;
            font-weight: 700;
        }

        body.page-accr .feature p{
            color: #6b6b6b;
            line-height: 1.6;
            font-size: 15px;
        }

        body.page-accr.dark-mode .feature{ background: rgba(40,40,50,0.8); border: 1px solid rgba(255,255,255,0.15); }
        body.page-accr.dark-mode .feature:hover{ box-shadow: 0 14px 40px rgba(0,0,0,0.3); }
        body.page-accr.dark-mode .feature h3{ color: #ffffff; }
        body.page-accr.dark-mode .feature p{ color: #d0d0d0; }

        /* FOOTER */

        body.page-accr footer{
            text-align: center;
            padding: 35px;
            border-top: 1px solid rgba(0,0,0,0.06);
            color: #999999;
            background: rgba(255,250,240,0.4);
            font-size: 13px;
        }

        body.page-accr.dark-mode footer{ background: rgba(0,0,0,0.4); border-top: 1px solid rgba(255,255,255,0.08); color: #707070; }

        /* RESPONSIVE */

        @media(max-width: 768px) {

            body.page-accr .hero h1{
                font-size: 48px;
            }

            body.page-accr .hero p{
                font-size: 16px;
            }

            body.page-accr .modes{
                grid-template-columns: repeat(2, 1fr);
            }

            body.page-accr .rank-selection{
                grid-template-columns: 1fr;
            }

            body.page-accr .arrow{
                transform: rotate(90deg);
            }

            body.page-accr .price-card{
                flex-direction: column;
                align-items: flex-start;
            }

            body.page-accr .price{
                font-size: 32px;
            }

            body.page-accr .features{
                grid-template-columns: 1fr;
            }

            body.page-accr nav{
                padding: 20px 5%;
            }

            body.page-accr .selector{
                padding: 25px;
            }
        }

/* RARE ACCOUNTS */
body.page-accr .accounts-section{
    margin-top: 60px;
}

body.page-accr .accounts-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 25px;
}

body.page-accr .empty-card{
    min-height: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 45px 30px;
    background: rgba(255,255,255,0.58);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.05);
    backdrop-filter: blur(8px);
}

body.page-accr .empty-icon{
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    font-size: 26px;
    font-weight: 800;
    color: #777;
    border: 1px solid rgba(0,0,0,0.08);
    background: rgba(255,255,255,0.72);
}

body.page-accr .empty-card h3{
    font-size: 23px;
    margin-bottom: 10px;
}

body.page-accr .empty-card p{
    max-width: 560px;
    color: #777;
    line-height: 1.7;
    margin-bottom: 18px;
}

body.page-accr .status-pill{
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.08);
    background: rgba(255,255,255,0.7);
    color: #888;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

body.page-accr .mode{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

body.page-accr .mode small{
    width: 100%;
}

body.page-accr .sell-section{
    margin-top: 60px;
}

body.page-accr .sell-card{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 38px;
    border-radius: 20px;
    background: rgba(255,255,255,0.62);
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    backdrop-filter: blur(8px);
}

body.page-accr .sell-card h2{
    margin-top: 12px;
    font-size: 30px;
}

body.page-accr .sell-card p{
    max-width: 650px;
    color: #6b6b6b;
    line-height: 1.6;
    margin-top: 10px;
}

body.page-accr .sell-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background: #111;
    color: #fff;
    padding: 16px 28px;
    border-radius: 12px;
    font-weight: 700;
    white-space: nowrap;
    transition: 0.3s;
}

body.page-accr .sell-btn:hover{
    transform: translateY(-3px);
    box-shadow: 0 14px 40px rgba(0,0,0,0.12);
}

body.page-accr.dark-mode .empty-card{
    background: rgba(40,40,50,0.8);
    border-color: rgba(255,255,255,0.15);
}
body.page-accr.dark-mode .empty-icon{
    background: #1a1a24;
    border-color: rgba(255,255,255,0.1);
    color: #aaa;
}
body.page-accr.dark-mode .empty-card p, body.page-accr.dark-mode .sell-card p{
    color: #d0d0d0;
}
body.page-accr.dark-mode .status-pill{
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.12);
    color: #aaa;
}
body.page-accr.dark-mode .sell-card{
    background: rgba(40,40,50,0.8);
    border-color: rgba(255,255,255,0.15);
}
body.page-accr.dark-mode .sell-card h2{
    color: #fff;
}
body.page-accr.dark-mode .sell-btn{
    background: #fff;
    color: #000;
}

@media(max-width: 768px) {
    body.page-accr .accounts-grid{
        grid-template-columns: 1fr;
    }

    body.page-accr .sell-card{
        flex-direction: column;
        align-items: flex-start;
        padding: 28px;
    }

    body.page-accr .sell-btn{
        width: 100%;
    }
}
            /* Currency select styles */
            body.page-accr .currency-select{ position:relative; display:inline-block; }
            body.page-accr .currency-toggle{
                background:rgba(0,0,0,0.04); color:#111111;
                border:1px solid rgba(0,0,0,0.1); padding:8px 12px;
                border-radius:10px; cursor:pointer; font-weight:700;
                display:inline-flex; align-items:center; gap:6px;
            }
            body.page-accr .currency-dropdown{
                position:absolute; top:calc(100% + 10px); left:0;
                background:rgba(0,0,0,0.9); border:1px solid rgba(255,255,255,0.06);
                padding:8px; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,0.5);
                display:none; min-width:220px; z-index:40;
            }
            body.page-accr .currency-dropdown.open{ display:block; }
            body.page-accr .currency-option{
                display:block; background:transparent; color:#f5f5f5;
                border:none; text-align:left; padding:8px 10px; width:100%;
                cursor:pointer; border-radius:8px;
            }
            body.page-accr .currency-option:hover{ background:rgba(255,255,255,0.03); }
            body.page-accr .flag{ width:20px; height:14px; object-fit:cover; margin-right:8px; vertical-align:middle; }
            body.page-accr.dark-mode .currency-toggle{
                background:rgba(255,255,255,0.06); color:#f5f5f5;
                border:1px solid rgba(255,255,255,0.08);
            }
    


        body.page-accs *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            scroll-behavior: smooth;
        }

        body.page-accs{
            font-family: Arial, Helvetica, sans-serif;
            background: linear-gradient(180deg, #fffaf0 0%, #000000 100%);
            color: #111111;
            min-height: 100vh;
            overflow-x: hidden;
        }

        body.page-accs::before{
            content: "";
            position: fixed;
            width: 600px;
            height: 600px;
            background: radial-gradient(circle, rgba(255,255,255,0.12), transparent 70%);
            top: -200px;
            left: -150px;
            z-index: -1;
        }

        body.page-accs::after{
            content: "";
            position: fixed;
            width: 500px;
            height: 500px;
            background: radial-gradient(circle, rgba(255,255,255,0.08), transparent 70%);
            bottom: -200px;
            right: -150px;
            z-index: -1;
        }

        /* NAVBAR */

        body.page-accs nav{
            width: 100%;
            padding: 25px 8%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(0,0,0,0.06);
            background: rgba(255,250,240,0.78);
            backdrop-filter: blur(8px);
            position: sticky;
            top: 0;
            z-index: 100;
        }

        body.page-accs .logo{
            font-size: 28px;
            font-weight: bold;
            letter-spacing: 2px;
            color: #111111;
            text-decoration: none;
            display: flex;
            align-items: center;
        }

        body.page-accs .logo img{
            height: 36px;
            width: auto;
            display: block;
            cursor: pointer;
            transition: opacity 280ms ease, transform 280ms ease;
        }

        body.page-accs .logo span{
            opacity: 0.6;
        }

        body.page-accs .back{
            text-decoration: none;
            color: #111111;
            font-size: 15px;
            transition: 0.3s;
        }

        body.page-accs .back:hover{
            color: #444444;
        }

        body.page-accs .mode-btn{
            padding: 6px 10px;
            border-radius: 8px;
            border: 1px solid rgba(0,0,0,0.06);
            background: transparent;
            cursor: pointer;
            font-weight: 700;
            color: #111111;
            transition: 0.3s;
            font-size: 14px;
        }

        body.page-accs .mode-btn.active{
            background: #111111;
            color: #ffffff;
        }

        /* Dark mode styles */
        body.page-accs.dark-mode{ background: linear-gradient(180deg, #000000 0%, #000000 100%); color: #f5f5f5; }
        body.page-accs.dark-mode nav{ background: rgba(0,0,0,0.88); border-bottom: 1px solid rgba(255,255,255,0.08); }
        body.page-accs.dark-mode .logo{ color: #f5f5f5; }
        body.page-accs.dark-mode .back{ color: #d1d1d1; }
        body.page-accs.dark-mode .back:hover{ color: #ffffff; }
        body.page-accs.dark-mode .mode-btn{ color: #f5f5f5; border: 1px solid rgba(255,255,255,0.12); }
        body.page-accs.dark-mode .mode-btn.active{ background: #f5f5f5; color: #000000; }

        /* HERO */

        body.page-accs .hero{
            text-align: center;
            padding: 120px 20px 60px;
            min-height: 60vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        body.page-accs .badge{
            display: inline-block;
            padding: 8px 15px;
            border: 1px solid rgba(0,0,0,0.06);
            border-radius: 50px;
            color: #777777;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 22px;
            background: rgba(255,255,255,0.4);
        }

        body.page-accs .hero h1{
            font-size: clamp(42px, 7vw, 72px);
            line-height: 1;
            font-weight: 800;
            letter-spacing: -2px;
            color: #111111;
            margin-bottom: 20px;
        }

        body.page-accs .hero h1 span{
            color: #888888;
        }

        body.page-accs .hero p{
            max-width: 700px;
            margin: 20px auto 0;
            color: #6b6b6b;
            font-size: 18px;
            line-height: 1.7;
        }

        body.page-accs.dark-mode .badge{ background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.12); color: #9a9a9a; }
        body.page-accs.dark-mode .hero h1{ color: #ffffff; }
        body.page-accs.dark-mode .hero h1 span{ color: #b0b0b0; }
        body.page-accs.dark-mode .hero p{ color: #d0d0d0; }

        /* MAIN */

        body.page-accs .container{
            width: 90%;
            max-width: 1200px;
            margin: auto;
            padding-bottom: 80px;
            padding-top: 40px;
        }

        /* SELECTOR */

        body.page-accs .selector{
            background: rgba(255,255,255,0.6);
            border: 1px solid rgba(0,0,0,0.06);
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.06);
            backdrop-filter: blur(8px);
        }

        body.page-accs .selector-title{
            font-size: 22px;
            font-weight: 800;
            margin-bottom: 25px;
            color: #111111;
        }

        body.page-accs .modes{
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
            margin-bottom: 30px;
        }

        body.page-accs .mode{
            padding: 16px;
            background: #ffffff;
            border: 1px solid rgba(0,0,0,0.08);
            border-radius: 12px;
            color: #666666;
            cursor: pointer;
            text-align: center;
            transition: 0.3s;
            font-weight: 700;
            font-size: 15px;
        }

        body.page-accs .mode small{
            display: block;
            font-size: 11px;
            color: #999999;
            margin-top: 5px;
            font-weight: normal;
        }

        body.page-accs .mode:hover{
            border-color: #111111;
            color: #111111;
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.08);
        }

        body.page-accs .mode.active{
            background: #111111;
            color: #ffffff;
            border-color: #111111;
        }

        body.page-accs .mode.active small{
            color: #cccccc;
        }

        body.page-accs.dark-mode .selector{ background: rgba(40,40,50,0.8); border: 1px solid rgba(255,255,255,0.15); }
        body.page-accs.dark-mode .selector-title{ color: #ffffff; }
        body.page-accs.dark-mode .mode{ background: #1a1a24; border: 1px solid rgba(255,255,255,0.1); color: #d0d0d0; }
        body.page-accs.dark-mode .mode small{ color: #909090; }
        body.page-accs.dark-mode .mode:hover{ border-color: #ffffff; color: #ffffff; box-shadow: 0 8px 20px rgba(0,0,0,0.3); }
        body.page-accs.dark-mode .mode.active{ background: #ffffff; color: #000000; border-color: #ffffff; }
        body.page-accs.dark-mode .mode.active small{ color: #444444; }

        /* RANK SELECTORS */

        body.page-accs .rank-selection{
            display: grid;
            grid-template-columns: 1fr 60px 1fr;
            gap: 15px;
            align-items: center;
            margin-top: 30px;
            margin-bottom: 25px;
        }

        body.page-accs .rank-box{
            background: #ffffff;
            border: 1px solid rgba(0,0,0,0.06);
            border-radius: 15px;
            padding: 20px;
        }

        body.page-accs .rank-box label{
            display: block;
            color: #999999;
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            margin-bottom: 10px;
            font-weight: 700;
        }

        body.page-accs select{
            width: 100%;
            background: #ffffff;
            border: 1px solid rgba(0,0,0,0.06);
            color: #111111;
            padding: 12px;
            border-radius: 10px;
            font-size: 15px;
            outline: none;
            cursor: pointer;
            font-weight: 600;
        }

        body.page-accs .arrow{
            text-align: center;
            color: #999999;
            font-size: 24px;
        }

        body.page-accs.dark-mode .rank-box{ background: #1a1a24; border: 1px solid rgba(255,255,255,0.1); }
        body.page-accs.dark-mode .rank-box label{ color: #909090; }
        body.page-accs.dark-mode select{ background: #1a1a24; border: 1px solid rgba(255,255,255,0.1); color: #ffffff; }
        body.page-accs.dark-mode .arrow{ color: #707070; }

        /* PRICE */

        body.page-accs .price-card{
            margin-top: 25px;
            border-radius: 18px;
            padding: 30px;
            background: rgba(255,255,255,0.8);
            border: 1px solid rgba(0,0,0,0.08);
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.06);
        }

        body.page-accs .price-info small{
            color: #999999;
            display: block;
            margin-bottom: 8px;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 700;
        }

        body.page-accs .price-info strong{
            font-size: 20px;
            color: #111111;
            font-weight: 700;
        }

        body.page-accs .price{
            font-size: 42px;
            font-weight: 800;
            color: #111111;
        }

        body.page-accs .order-btn{
            border: none;
            background: #111111;
            color: #ffffff;
            padding: 16px 34px;
            border-radius: 12px;
            font-weight: 700;
            cursor: pointer;
            transition: 0.3s;
            font-size: 16px;
        }

        body.page-accs .order-btn:hover{
            transform: translateY(-3px);
            box-shadow: 0 14px 40px rgba(0,0,0,0.12);
        }

        body.page-accs.dark-mode .price-card{ background: rgba(40,40,50,0.8); border: 1px solid rgba(255,255,255,0.15); }
        body.page-accs.dark-mode .price-info small{ color: #909090; }
        body.page-accs.dark-mode .price-info strong{ color: #ffffff; }
        body.page-accs.dark-mode .price{ color: #ffffff; }
        body.page-accs.dark-mode .order-btn{ background: #ffffff; color: #000000; }
        body.page-accs.dark-mode .order-btn:hover{ box-shadow: 0 14px 40px rgba(0,0,0,0.3); }

        /* PRICING TABLE */

        body.page-accs .pricing-section{
            margin-top: 60px;
        }

        body.page-accs .section-heading{
            margin-bottom: 20px;
        }

        body.page-accs .section-heading h2{
            font-size: 30px;
        }

        body.page-accs .section-heading p{
            color: #777;
            margin-top: 8px;
        }

        body.page-accs .table-wrap{
            overflow-x: auto;
            border-radius: 18px;
            border: 1px solid #222;
        }

        body.page-accs table{
            width: 100%;
            border-collapse: collapse;
            min-width: 700px;
            background: #090909;
        }

        body.page-accs th{
            background: #111;
            color: #888;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 1px;
            padding: 18px;
            text-align: left;
        }

        body.page-accs td{
            padding: 19px 18px;
            border-top: 1px solid #1c1c1c;
            color: #ddd;
        }

        body.page-accs td:not(:first-child){
            font-weight: 800;
        }

        body.page-accs tr:hover td{
            background: #0e0e0e;
        }

        body.page-accs .ssl{
            color: #fff;
        }

        /* FEATURES */

        body.page-accs .features{
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-top: 60px;
        }

        body.page-accs .feature{
            padding: 30px;
            background: rgba(255,255,255,0.6);
            border: 1px solid rgba(0,0,0,0.06);
            border-radius: 20px;
            backdrop-filter: blur(8px);
            transition: 0.3s;
        }

        body.page-accs .feature:hover{
            transform: translateY(-5px);
            box-shadow: 0 14px 40px rgba(0,0,0,0.08);
        }

        body.page-accs .feature-icon{
            font-size: 28px;
            margin-bottom: 15px;
        }

        body.page-accs .feature h3{
            margin-bottom: 10px;
            color: #111111;
            font-size: 18px;
            font-weight: 700;
        }

        body.page-accs .feature p{
            color: #6b6b6b;
            line-height: 1.6;
            font-size: 15px;
        }

        body.page-accs.dark-mode .feature{ background: rgba(40,40,50,0.8); border: 1px solid rgba(255,255,255,0.15); }
        body.page-accs.dark-mode .feature:hover{ box-shadow: 0 14px 40px rgba(0,0,0,0.3); }
        body.page-accs.dark-mode .feature h3{ color: #ffffff; }
        body.page-accs.dark-mode .feature p{ color: #d0d0d0; }

        /* FOOTER */

        body.page-accs footer{
            text-align: center;
            padding: 35px;
            border-top: 1px solid rgba(0,0,0,0.06);
            color: #999999;
            background: rgba(255,250,240,0.4);
            font-size: 13px;
        }

        body.page-accs.dark-mode footer{ background: rgba(0,0,0,0.4); border-top: 1px solid rgba(255,255,255,0.08); color: #707070; }

        /* RESPONSIVE */

        @media(max-width: 768px) {

            body.page-accs .hero h1{
                font-size: 48px;
            }

            body.page-accs .hero p{
                font-size: 16px;
            }

            body.page-accs .modes{
                grid-template-columns: repeat(2, 1fr);
            }

            body.page-accs .rank-selection{
                grid-template-columns: 1fr;
            }

            body.page-accs .arrow{
                transform: rotate(90deg);
            }

            body.page-accs .price-card{
                flex-direction: column;
                align-items: flex-start;
            }

            body.page-accs .price{
                font-size: 32px;
            }

            body.page-accs .features{
                grid-template-columns: 1fr;
            }

            body.page-accs nav{
                padding: 20px 5%;
            }

            body.page-accs .selector{
                padding: 25px;
            }
        }
            /* Currency select styles */
            body.page-accs .currency-select{ position:relative; display:inline-block; }
            body.page-accs .currency-toggle{
                background:rgba(0,0,0,0.04); color:#111111;
                border:1px solid rgba(0,0,0,0.1); padding:8px 12px;
                border-radius:10px; cursor:pointer; font-weight:700;
                display:inline-flex; align-items:center; gap:6px;
            }
            body.page-accs .currency-dropdown{
                position:absolute; top:calc(100% + 10px); left:0;
                background:rgba(0,0,0,0.9); border:1px solid rgba(255,255,255,0.06);
                padding:8px; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,0.5);
                display:none; min-width:220px; z-index:40;
            }
            body.page-accs .currency-dropdown.open{ display:block; }
            body.page-accs .currency-option{
                display:block; background:transparent; color:#f5f5f5;
                border:none; text-align:left; padding:8px 10px; width:100%;
                cursor:pointer; border-radius:8px;
            }
            body.page-accs .currency-option:hover{ background:rgba(255,255,255,0.03); }
            body.page-accs .flag{ width:20px; height:14px; object-fit:cover; margin-right:8px; vertical-align:middle; }
            body.page-accs.dark-mode .currency-toggle{
                background:rgba(255,255,255,0.06); color:#f5f5f5;
                border:1px solid rgba(255,255,255,0.08);
            }
    


/* ══ index.html animations ══ */
/* ── Animations ── */
    header{opacity:0;transform:translateY(-20px);animation:slideDown 0.6s 0.1s cubic-bezier(.25,.8,.25,1) forwards;}
    @keyframes slideDown{to{opacity:1;transform:translateY(0);}}

    .hero-content>*{opacity:0;transform:translateY(24px);}
    .hero-content>*:nth-child(1){animation:fadeUp 0.7s 0.3s cubic-bezier(.25,.8,.25,1) forwards;}
    .hero-content>*:nth-child(2){animation:fadeUp 0.7s 0.45s cubic-bezier(.25,.8,.25,1) forwards;}
    .hero-content>*:nth-child(3){animation:fadeUp 0.7s 0.6s cubic-bezier(.25,.8,.25,1) forwards;}
    @keyframes fadeUp{to{opacity:1;transform:translateY(0);}}

    .section-title,.section-subtitle{opacity:0;transform:translateY(24px);transition:all 0.6s cubic-bezier(.25,.8,.25,1);}
    .section-title.visible,.section-subtitle.visible{opacity:1;transform:translateY(0);}

    .card{opacity:0;transform:translateY(30px);transition:all 0.5s cubic-bezier(.25,.8,.25,1);}
    .card.visible{opacity:1;transform:translateY(0);}
    .card:nth-child(2).visible{transition-delay:0.1s;}
    .card:nth-child(3).visible{transition-delay:0.2s;}

    .about p,.contact-note{opacity:0;transform:translateY(20px);transition:all 0.5s cubic-bezier(.25,.8,.25,1);}
    .about p.visible,.contact-note.visible{opacity:1;transform:translateY(0);}

    .contact-item{opacity:0;transform:translateX(-20px);transition:all 0.4s cubic-bezier(.25,.8,.25,1);}
    .contact-item.visible{opacity:1;transform:translateX(0);}
    .contact-item:nth-child(2).visible{transition-delay:0.1s;}
    .contact-item:nth-child(3).visible{transition-delay:0.2s;}

    footer{opacity:0;transform:translateY(10px);transition:all 0.5s cubic-bezier(.25,.8,.25,1);}
    footer.visible{opacity:1;transform:translateY(0);}

    .product-btn{transition:all 0.3s cubic-bezier(.25,.8,.25,1);}
    .product-btn:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 8px 24px rgba(0,0,0,0.15);}

    .btn{transition:all 0.35s cubic-bezier(.25,.8,.25,1);}
    .btn:hover{transform:translateY(-2px) scale(1.03);}
    .btn:active{transform:translateY(0) scale(0.98);}

    nav a{transition:color 0.3s,transform 0.3s;}
    nav a:hover{transform:translateY(-1px);}

/* ══ discord.html ══ */
.reveal{opacity:0;transform:translateY(24px);transition:opacity 0.6s cubic-bezier(.25,.8,.25,1),transform 0.6s cubic-bezier(.25,.8,.25,1);}
            .reveal.active{opacity:1;transform:translateY(0);}
            .card{opacity:0;transform:translateY(24px);transition:opacity 0.5s cubic-bezier(.25,.8,.25,1),transform 0.5s cubic-bezier(.25,.8,.25,1),box-shadow 0.3s ease,border-color 0.3s ease;}
            .card.visible{opacity:1;transform:translateY(0);}
            .card:hover{transform:translateY(-6px);box-shadow:0 12px 40px rgba(0,0,0,0.12);}
            .dark-mode .card:hover{box-shadow:0 12px 40px rgba(0,0,0,0.4);}
            .card .btn{transition:all 0.3s cubic-bezier(.25,.8,.25,1);}
            .card .btn:hover{transform:translateY(-2px) scale(1.02);}
            .card .btn:active{transform:translateY(0) scale(0.98);}
            .icon{transition:transform 0.3s ease;}
            .card:hover .icon{transform:scale(1.1) rotate(-3deg);}
            .section-title{opacity:0;transform:translateY(20px);transition:opacity 0.5s ease,transform 0.5s ease;}
            .section-title.visible{opacity:1;transform:translateY(0);}
            .accounts-box{opacity:0;transform:translateY(16px);transition:opacity 0.5s ease,transform 0.5s ease;}
            .accounts-box.visible{opacity:1;transform:translateY(0);}
            .boost-buttons{display:flex;justify-content:center;gap:6px;margin-bottom:48px;}
            .boost-tab{padding:12px 36px;border:none;background:rgba(255,255,255,0.04);color:#888;font-size:15px;font-weight:600;cursor:pointer;border-radius:10px;transition:all 0.3s cubic-bezier(.25,.8,.25,1);font-family:inherit;}
            .boost-tab:hover{color:#ccc;background:rgba(255,255,255,0.06);}
            .boost-tab.active{background:linear-gradient(135deg,#a855f7,#9333ea);color:#fff;box-shadow:0 4px 20px rgba(168,85,247,0.35);}
            .boost-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:60px;}
            @media(max-width:900px){.boost-grid{grid-template-columns:repeat(2,1fr);}}
            @media(max-width:520px){.boost-grid{grid-template-columns:1fr;}}
            .boost-card{position:relative;background:#0d0d0d;border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:28px 22px 24px;display:flex;flex-direction:column;opacity:0;transform:translateY(24px);transition:all 0.5s cubic-bezier(.25,.8,.25,1);}
            .boost-card.visible{opacity:1;transform:translateY(0);}
            .boost-card:hover{transform:translateY(-4px);box-shadow:0 8px 32px rgba(0,0,0,0.3);}
            .boost-card.popular{background:linear-gradient(170deg,rgba(168,85,247,0.18) 0%,rgba(124,58,237,0.06) 50%,#0d0d0d 100%);border:1px solid rgba(168,85,247,0.3);box-shadow:0 0 40px rgba(168,85,247,0.1);padding-top:40px;z-index:1;}
            .boost-card.popular:hover{box-shadow:0 0 50px rgba(168,85,247,0.15);}
            .popular-badge{position:absolute;top:12px;right:20px;background:linear-gradient(135deg,#f472b6,#ec4899);color:#fff;font-size:8px;font-weight:800;padding:4px 10px;border-radius:6px;letter-spacing:1.5px;text-transform:uppercase;white-space:nowrap;}
            .boost-card h3{font-size:20px;font-weight:800;font-style:italic;letter-spacing:-0.2px;margin:0 0 6px;color:#fff;}
            .boost-price{font-size:30px;font-weight:800;letter-spacing:-0.5px;margin-bottom:4px;background:linear-gradient(135deg,#f472b6,#e879f9);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
            .boost-duration{font-size:13px;color:#666;margin-bottom:28px;}
            .boost-features{list-style:none;padding:0;margin:0 0 28px;flex:1;display:flex;flex-direction:column;gap:16px;}
            .boost-features li{display:flex;align-items:center;gap:12px;font-size:13.5px;color:#ccc;font-weight:500;}
            .bf-icon{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0;background:rgba(168,85,247,0.15);color:#a855f7;}
            .purchase{display:block;width:100%;padding:14px;background:transparent;color:#ccc;border:1.5px solid rgba(168,85,247,0.3);border-radius:12px;font-size:14px;font-weight:600;cursor:pointer;transition:all 0.3s cubic-bezier(.25,.8,.25,1);font-family:inherit;margin-top:auto;}
            .purchase:hover{background:rgba(168,85,247,0.08);border-color:rgba(168,85,247,0.5);transform:translateY(-2px);}
            .purchase:active{transform:translateY(0) scale(0.98);}
            .purchase.primary{background:linear-gradient(135deg,#a855f7,#7c3aed);border-color:transparent;color:#fff;box-shadow:0 4px 16px rgba(168,85,247,0.3);}
            .purchase.primary:hover{box-shadow:0 8px 28px rgba(168,85,247,0.4);transform:translateY(-2px);}
            footer{opacity:0;transition:opacity 0.5s ease;}
            footer.visible{opacity:1;}
        
.login-link:hover{background:rgba(168,85,247,0.25);border-color:rgba(168,85,247,0.5);transform:translateY(-1px);}
.dark-mode .login-link:hover{background:rgba(168,85,247,0.25);}

/* ══ basket.html ══ */
body.page-basket .flag{width:20px;height:14px;object-fit:cover;margin-right:8px;vertical-align:middle;}
        body.page-basket .currency-select{position:relative;display:inline-block;}
        body.page-basket .currency-toggle{padding:6px 10px;border-radius:8px;border:1px solid rgba(0,0,0,0.06);background:transparent;cursor:pointer;font-weight:700;color:#111;font-size:13px;display:flex;align-items:center;gap:4px;font-family:inherit;}
        body.page-basket .dark-mode .currency-toggle{color:#f0f0f0;border-color:rgba(255,255,255,0.12);}
        body.page-basket .currency-dropdown{display:none;position:absolute;top:calc(100% + 6px);right:0;background:#fff;border:1px solid rgba(0,0,0,0.08);border-radius:10px;min-width:220px;z-index:100;box-shadow:0 8px 24px rgba(0,0,0,0.1);padding:6px;}
        body.page-basket .dark-mode .currency-dropdown{background:#1a1a1a;border-color:rgba(255,255,255,0.1);box-shadow:0 8px 24px rgba(0,0,0,0.4);}
        body.page-basket .currency-dropdown.open{display:block;}
        body.page-basket .currency-option{display:flex;align-items:center;width:100%;padding:10px 12px;border:none;background:transparent;cursor:pointer;font-size:13px;color:#1a1a1a;border-radius:6px;font-family:inherit;text-align:left;}
        body.page-basket .dark-mode .currency-option{color:#e8e8e8;}
        body.page-basket .currency-option:hover{background:rgba(0,0,0,0.04);}
        body.page-basket .dark-mode .currency-option:hover{background:rgba(255,255,255,0.06);}
        body.page-basket .mode-btn{padding:6px 10px;border-radius:8px;border:1px solid rgba(0,0,0,0.06);background:transparent;cursor:pointer;font-weight:700;color:#111;font-size:13px;font-family:inherit;transition:all 0.2s;}
        body.page-basket .dark-mode .mode-btn{color:#f0f0f0;border-color:rgba(255,255,255,0.12);}
        body.page-basket .mode-btn.active{background:#1a1a1a;color:#fff;}
        body.page-basket .dark-mode .mode-btn.active{background:#fff;color:#111;}
        body.page-basket .logo-img{height:32px;width:auto;}
        body.page-basket{background:#0f0f0f;color:#e8e8e8;font-family:'Inter',system-ui,-apple-system,sans-serif;min-height:100vh;padding-bottom:60px;}
        body:not(.dark-mode).page-basket{background:#f5f5f5;color:#1a1a1a;}
        body.page-basket .basket-wrap{max-width:1100px;margin:0 auto;padding:20px 24px;}
        body.page-basket .breadcrumb{display:flex;align-items:center;gap:8px;font-size:13px;color:#666;margin-bottom:32px;}
        body.page-basket .breadcrumb a{color:#888;text-decoration:none;transition:color 0.2s;}
        body.page-basket .breadcrumb a:hover{color:#fff;}
        body.page-basket .breadcrumb .sep{color:#444;}
        body.page-basket .breadcrumb .current{color:#fff;font-weight:600;}
        body:not(.dark-mode) .breadcrumb{color:#999;}
        body:not(.dark-mode) .breadcrumb a{color:#666;}
        body:not(.dark-mode) .breadcrumb .current{color:#1a1a1a;}
        body:not(.dark-mode) .breadcrumb .sep{color:#ccc;}
        body.page-basket .basket-grid{display:grid;grid-template-columns:1fr 380px;gap:32px;align-items:start;}
        body.page-basket @media(max-width:860px){.basket-grid{grid-template-columns:1fr;}}
        body.page-basket .basket-items{display:flex;flex-direction:column;gap:16px;}
        body.page-basket .basket-card{display:flex;align-items:center;gap:24px;padding:24px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:16px;transition:all 0.3s ease;animation:cardIn 0.4s ease backwards;}
        body:not(.dark-mode) .basket-card{background:#fff;border-color:rgba(0,0,0,0.06);box-shadow:0 2px 12px rgba(0,0,0,0.04);}
        body.page-basket .basket-card:hover{border-color:rgba(255,255,255,0.1);transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,0,0,0.15);}
        body:not(.dark-mode) .basket-card:hover{border-color:rgba(0,0,0,0.1);box-shadow:0 8px 30px rgba(0,0,0,0.08);}
        body.page-basket @keyframes cardIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
        body.page-basket .basket-card:nth-child(1){animation-delay:0s;}
        body.page-basket .basket-card:nth-child(2){animation-delay:0.06s;}
        body.page-basket .basket-card:nth-child(3){animation-delay:0.12s;}
        body.page-basket .basket-card-img{width:80px;height:80px;border-radius:12px;object-fit:cover;background:rgba(255,255,255,0.05);flex-shrink:0;}
        body:not(.dark-mode) .basket-card-img{background:rgba(0,0,0,0.04);}
        body.page-basket .basket-card-info{flex:1;min-width:0;}
        body.page-basket .basket-card-title{font-size:16px;font-weight:700;letter-spacing:-0.2px;margin-bottom:4px;}
        body.page-basket .basket-card-meta{font-size:13px;color:#888;line-height:1.5;}
        body:not(.dark-mode) .basket-card-meta{color:#888;}
        body.page-basket .basket-card-prices{display:flex;align-items:center;gap:10px;margin-top:8px;}
        body.page-basket .basket-card-price{font-size:17px;font-weight:700;}
        body.page-basket .basket-card-old{font-size:14px;color:#666;text-decoration:line-through;}
        body.page-basket .basket-card-right{display:flex;flex-direction:column;align-items:flex-end;gap:16px;flex-shrink:0;}
        body.page-basket .basket-card-remove{width:32px;height:32px;border-radius:50%;border:none;background:rgba(231,76,60,0.1);color:#e74c3c;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all 0.3s ease;}
        body.page-basket .basket-card-remove:hover{background:rgba(231,76,60,0.2);transform:scale(1.1);}
        body.page-basket .qty-control{display:flex;align-items:center;gap:0;border:1px solid rgba(255,255,255,0.1);border-radius:10px;overflow:hidden;}
        body:not(.dark-mode) .qty-control{border-color:rgba(0,0,0,0.1);}
        body.page-basket .qty-btn{width:40px;height:40px;border:none;background:rgba(255,255,255,0.06);color:#fff;font-size:18px;font-weight:700;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;justify-content:center;}
        body:not(.dark-mode) .qty-btn{background:rgba(0,0,0,0.04);color:#1a1a1a;}
        body.page-basket .qty-btn:hover{background:rgba(255,255,255,0.12);}
        body:not(.dark-mode) .qty-btn:hover{background:rgba(0,0,0,0.08);}
        body.page-basket .qty-val{width:44px;height:40px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;border-left:1px solid rgba(255,255,255,0.08);border-right:1px solid rgba(255,255,255,0.08);}
        body:not(.dark-mode) .qty-val{border-color:rgba(0,0,0,0.08);}
        body.page-basket .basket-summary{position:sticky;top:24px;}
        body.page-basket .summary-card{padding:28px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:16px;}
        body:not(.dark-mode) .summary-card{background:#fff;border-color:rgba(0,0,0,0.06);box-shadow:0 2px 12px rgba(0,0,0,0.04);}
        body.page-basket .summary-title{font-size:18px;font-weight:800;letter-spacing:-0.3px;margin-bottom:24px;}
        body.page-basket .discount-row{display:flex;gap:0;margin-bottom:28px;border:1px solid rgba(255,255,255,0.1);border-radius:10px;overflow:hidden;}
        body:not(.dark-mode) .discount-row{border-color:rgba(0,0,0,0.1);}
        body.page-basket .discount-input{flex:1;padding:12px 16px;background:rgba(255,255,255,0.04);border:none;color:#fff;font-size:14px;font-family:inherit;outline:none;}
        body:not(.dark-mode) .discount-input{background:rgba(0,0,0,0.03);color:#1a1a1a;}
        body.page-basket .discount-input::placeholder{color:#666;}
        body.page-basket .discount-btn{padding:12px 20px;background:#1a1a1a;color:#fff;border:none;font-weight:700;font-size:13px;cursor:pointer;transition:all 0.3s;font-family:inherit;letter-spacing:0.3px;}
        body:not(.dark-mode) .discount-btn{background:#1a1a1a;color:#fff;}
        body.page-basket .discount-btn:hover{background:#333;}
        body.page-basket .summary-rows{display:flex;flex-direction:column;gap:14px;margin-bottom:24px;}
        body.page-basket .summary-row{display:flex;justify-content:space-between;align-items:center;font-size:14px;}
        body.page-basket .summary-row .label{color:#888;}
        body:not(.dark-mode) .summary-row .label{color:#999;}
        body.page-basket .summary-row .value{font-weight:700;}
        body.page-basket .summary-total{display:flex;justify-content:space-between;align-items:center;padding-top:16px;border-top:1px solid rgba(255,255,255,0.08);margin-bottom:24px;}
        body:not(.dark-mode) .summary-total{border-color:rgba(0,0,0,0.08);}
        body.page-basket .summary-total .label{font-size:16px;font-weight:700;}
        body.page-basket .summary-total .value{font-size:22px;font-weight:800;}
        body.page-basket .checkout-btn{display:block;width:100%;padding:18px;background:#1a1a1a;color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:700;cursor:pointer;transition:all 0.3s ease;font-family:inherit;letter-spacing:0.3px;}
        body:not(.dark-mode) .checkout-btn{background:#1a1a1a;color:#fff;}
        body.page-basket .checkout-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.2);}
        body.page-basket .checkout-btn:active{transform:translateY(0) scale(0.98);}
        body.page-basket .empty-basket{text-align:center;padding:80px 20px;color:#666;}
        body.page-basket .empty-basket h2{font-size:22px;font-weight:700;margin-bottom:8px;color:#999;}
        body:not(.dark-mode) .empty-basket h2{color:#333;}
        body.page-basket .empty-basket p{font-size:14px;margin-bottom:24px;}
        body.page-basket .empty-basket a{display:inline-block;padding:14px 28px;background:#1a1a1a;color:#fff;border-radius:12px;text-decoration:none;font-weight:600;font-size:14px;transition:all 0.3s;}
        body.page-basket .empty-basket a:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.15);}
        body.page-basket .checkout-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0);backdrop-filter:blur(0px);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all 0.4s cubic-bezier(.25,.8,.25,1);z-index:10000;padding:20px;}
        body.page-basket .checkout-modal-overlay.open{background:rgba(0,0,0,0.5);backdrop-filter:blur(12px);opacity:1;visibility:visible;}
        body.page-basket .checkout-modal{background:#1a1a1a;color:#e8e8e8;border-radius:24px;max-width:480px;width:100%;padding:40px;box-shadow:0 32px 80px rgba(0,0,0,0.5);transform:translateY(20px) scale(0.96);transition:all 0.4s cubic-bezier(.25,.8,.25,1);position:relative;}
        body:not(.dark-mode) .checkout-modal{background:#fff;color:#1a1a1a;box-shadow:0 32px 80px rgba(0,0,0,0.12);}
        body.page-basket .checkout-modal-overlay.open .checkout-modal{transform:translateY(0) scale(1);}
        body.page-basket .checkout-modal h3{font-size:24px;font-weight:800;letter-spacing:-0.5px;margin:0 0 6px;}
        body.page-basket .checkout-modal p{font-size:14px;color:#888;margin:0 0 20px;line-height:1.6;}
        body:not(.dark-mode) .checkout-modal p{color:#888;}
        body.page-basket .checkout-modal-items{border:1px solid rgba(255,255,255,0.06);border-radius:14px;padding:16px;margin:0 0 16px;background:rgba(255,255,255,0.03);}
        body:not(.dark-mode) .checkout-modal-items{border-color:rgba(0,0,0,0.06);background:rgba(0,0,0,0.02);}
        body.page-basket .checkout-modal-item{display:flex;justify-content:space-between;gap:12px;padding:10px 4px;border-bottom:1px solid rgba(255,255,255,0.04);font-size:14px;}
        body:not(.dark-mode) .checkout-modal-item{border-color:rgba(0,0,0,0.04);}
        body.page-basket .checkout-modal-item:last-child{border-bottom:none;}
        body.page-basket .checkout-modal-item .nm{font-weight:700;}
        body.page-basket .checkout-modal-item .mt{display:block;font-size:12px;color:#888;margin-top:3px;}
        body.page-basket .checkout-modal-item .pr{font-weight:700;white-space:nowrap;}
        body.page-basket .checkout-modal-total{display:flex;justify-content:space-between;font-size:20px;font-weight:800;padding:12px 4px 0;border-top:1px solid rgba(255,255,255,0.06);margin-top:4px;}
        body:not(.dark-mode) .checkout-modal-total{border-color:rgba(0,0,0,0.06);}
        body.page-basket .checkout-modal-note{font-size:13px;line-height:1.7;color:#888;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.04);padding:16px 18px;border-radius:14px;margin:20px 0;}
        body:not(.dark-mode) .checkout-modal-note{color:#666;background:rgba(0,0,0,0.02);border-color:rgba(0,0,0,0.04);}
        body.page-basket .checkout-modal-actions{display:flex;flex-direction:column;gap:12px;}
        body.page-basket .checkout-modal-next,.checkout-modal-done,.checkout-modal-discord{display:block;width:100%;padding:18px;border:none;border-radius:14px;font-weight:700;font-size:15px;cursor:pointer;transition:all 0.3s ease;font-family:inherit;box-sizing:border-box;}
        body.page-basket .checkout-modal-next,.checkout-modal-done{background:#fff;color:#111;}
        body:not(.dark-mode) .checkout-modal-next,body:not(.dark-mode) .checkout-modal-done{background:#1a1a1a;color:#fff;}
        body.page-basket .checkout-modal-next:hover,.checkout-modal-done:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.15);}
        body.page-basket .checkout-modal-discord{background:#5865f2;color:#fff;text-decoration:none;text-align:center;}
        body.page-basket .checkout-modal-discord:hover{background:#4a56e0;transform:translateY(-2px);box-shadow:0 8px 24px rgba(88,101,242,0.3);}
        body.page-basket .checkout-modal-close{position:absolute;top:16px;right:16px;background:rgba(255,255,255,0.06);border:none;color:#888;width:36px;height:36px;border-radius:10px;cursor:pointer;font-size:15px;transition:all 0.3s;display:flex;align-items:center;justify-content:center;}
        body:not(.dark-mode) .checkout-modal-close{background:rgba(0,0,0,0.04);color:#999;}
        body.page-basket .checkout-modal-close:hover{background:rgba(255,255,255,0.1);color:#fff;transform:rotate(90deg);}
        body:not(.dark-mode) .checkout-modal-close:hover{background:rgba(0,0,0,0.08);color:#1a1a1a;}
        body.page-basket .checkout-modal-step{display:none;}
        body.page-basket .checkout-modal-step.active{display:block;animation:stepIn 0.35s ease;}
        body.page-basket @keyframes stepIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
    
body.page-basket .login-link:hover{background:rgba(168,85,247,0.25);border-color:rgba(168,85,247,0.5);transform:translateY(-1px);}
body.page-basket .dark-mode .login-link:hover{background:rgba(168,85,247,0.25);}

/* ══ login.html ══ */
*{margin:0;padding:0;box-sizing:border-box;}
    body{
      font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
      background:#0a0a0a;color:#e8e8e8;
      min-height:100vh;display:flex;flex-direction:column;
      transition:background 0.5s ease,color 0.5s ease;overflow-x:hidden;
    }
    body:not(.dark-mode){background:#f5f5f5;color:#1a1a1a;}

    nav{
      display:flex;align-items:center;justify-content:space-between;
      padding:16px 40px;border-bottom:1px solid rgba(255,255,255,0.06);
      backdrop-filter:blur(20px);position:sticky;top:0;z-index:100;
      background:rgba(10,10,10,0.8);
      animation:slideDown 0.6s cubic-bezier(.25,.8,.25,1) both;
    }
    body:not(.dark-mode) nav{background:rgba(245,245,245,0.9);border-color:rgba(0,0,0,0.06);}
    body.page-login @keyframes slideDown{from{opacity:0;transform:translateY(-20px);}to{opacity:1;transform:translateY(0);}}

    body.page-login .logo{display:flex;align-items:center;text-decoration:none;}
    body.page-login .logo-img{height:36px;transition:transform 0.3s;}
    body.page-login .logo:hover .logo-img{transform:scale(1.05);}
    body.page-login .nav-right{display:flex;align-items:center;gap:10px;}
    body.page-login .mode-btn{
      padding:7px 14px;border-radius:8px;border:1px solid rgba(255,255,255,0.12);
      background:rgba(255,255,255,0.04);color:#aaa;font-size:13px;font-weight:500;
      cursor:pointer;transition:all 0.3s;font-family:inherit;
    }
    body:not(.dark-mode) .mode-btn{border-color:rgba(0,0,0,0.1);color:#666;background:rgba(0,0,0,0.03);}
    body.page-login .mode-btn:hover{background:rgba(255,255,255,0.08);color:#fff;transform:translateY(-1px);}
    body:not(.dark-mode) .mode-btn:hover{background:rgba(0,0,0,0.06);color:#1a1a1a;}

    body.page-login .bg-glow{
      position:fixed;width:600px;height:600px;border-radius:50%;
      background:radial-gradient(circle,rgba(168,85,247,0.08) 0%,transparent 70%);
      top:-200px;left:50%;transform:translateX(-50%);pointer-events:none;z-index:0;
      animation:glowPulse 6s ease-in-out infinite alternate;
    }
    body:not(.dark-mode) .bg-glow{background:radial-gradient(circle,rgba(168,85,247,0.05) 0%,transparent 70%);}
    body.page-login @keyframes glowPulse{from{opacity:0.6;transform:translateX(-50%) scale(1);}to{opacity:1;transform:translateX(-50%) scale(1.1);}}

    body.page-login .login-wrap{
      flex:1;display:flex;align-items:center;justify-content:center;padding:40px 20px;
      position:relative;z-index:1;
    }
    body.page-login .login-card{
      width:100%;max-width:440px;background:rgba(255,255,255,0.04);
      border:1px solid rgba(255,255,255,0.08);border-radius:24px;
      padding:48px 40px;backdrop-filter:blur(10px);
      opacity:0;transform:translateY(30px);
      animation:cardIn 0.7s 0.2s cubic-bezier(.25,.8,.25,1) forwards;
    }
    body:not(.dark-mode) .login-card{background:#fff;border-color:rgba(0,0,0,0.08);box-shadow:0 8px 40px rgba(0,0,0,0.08);}
    body.page-login @keyframes cardIn{to{opacity:1;transform:translateY(0);}}

    body.page-login .login-card>*:not(.step){opacity:0;transform:translateY(16px);}
    body.page-login .login-card>*:not(.step):nth-child(1){animation:elIn 0.5s 0.35s cubic-bezier(.25,.8,.25,1) forwards;}
    body.page-login .login-card>*:not(.step):nth-child(2){animation:elIn 0.5s 0.42s cubic-bezier(.25,.8,.25,1) forwards;}
    body.page-login .login-card>*:not(.step):nth-child(3){animation:elIn 0.5s 0.49s cubic-bezier(.25,.8,.25,1) forwards;}
    body.page-login .login-card>*:not(.step):nth-child(4){animation:elIn 0.5s 0.56s cubic-bezier(.25,.8,.25,1) forwards;}
    body.page-login .login-card>*:not(.step):nth-child(5){animation:elIn 0.5s 0.63s cubic-bezier(.25,.8,.25,1) forwards;}
    body.page-login .login-card>*:not(.step):nth-child(6){animation:elIn 0.5s 0.70s cubic-bezier(.25,.8,.25,1) forwards;}
    body.page-login .login-card>*:not(.step):nth-child(7){animation:elIn 0.5s 0.77s cubic-bezier(.25,.8,.25,1) forwards;}
    body.page-login @keyframes elIn{to{opacity:1;transform:translateY(0);}}

    body.page-login .login-card h1{font-size:28px;font-weight:800;letter-spacing:-0.5px;margin-bottom:6px;text-align:center;}
    body.page-login .login-card .subtitle{font-size:14px;color:#888;text-align:center;margin-bottom:32px;}
    body:not(.dark-mode) .login-card .subtitle{color:#888;}

    body.page-login .form-group{margin-bottom:18px;}
    body.page-login .form-group label{display:block;font-size:13px;font-weight:600;margin-bottom:7px;color:#ccc;}
    body:not(.dark-mode) .form-group label{color:#444;}
    body.page-login .form-group input{
      width:100%;padding:14px 16px;border-radius:12px;border:1.5px solid rgba(255,255,255,0.1);
      background:rgba(255,255,255,0.04);color:#e8e8e8;font-size:14px;
      font-family:inherit;transition:all 0.35s cubic-bezier(.25,.8,.25,1);outline:none;
    }
    body:not(.dark-mode) .form-group input{border-color:rgba(0,0,0,0.12);background:rgba(0,0,0,0.02);color:#1a1a1a;}
    body.page-login .form-group input:focus{border-color:#a855f7;box-shadow:0 0 0 3px rgba(168,85,247,0.15);transform:translateY(-1px);}
    body.page-login .form-group input::placeholder{color:#555;}

    body.page-login .form-options{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;font-size:13px;}
    body.page-login .form-options label{display:flex;align-items:center;gap:6px;color:#aaa;cursor:pointer;}
    body:not(.dark-mode) .form-options label{color:#666;}
    body.page-login .form-options input[type="checkbox"]{width:16px;height:16px;border-radius:4px;border:1.5px solid rgba(255,255,255,0.15);background:rgba(255,255,255,0.04);cursor:pointer;accent-color:#a855f7;}
    body.page-login .form-options a{color:#a855f7;text-decoration:none;font-weight:500;}
    body.page-login .form-options a:hover{color:#c084fc;text-decoration:underline;}

    body.page-login .btn-login{
      width:100%;padding:15px;border:none;border-radius:12px;
      background:linear-gradient(135deg,#a855f7,#7c3aed);color:#fff;
      font-size:15px;font-weight:700;cursor:pointer;
      transition:all 0.35s cubic-bezier(.25,.8,.25,1);
      font-family:inherit;margin-bottom:14px;position:relative;overflow:hidden;
    }
    body.page-login .btn-login::after{content:'';position:absolute;top:50%;left:50%;width:0;height:0;background:rgba(255,255,255,0.15);border-radius:50%;transform:translate(-50%,-50%);transition:width 0.6s,height 0.6s;}
    body.page-login .btn-login:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(168,85,247,0.35);}
    body.page-login .btn-login:hover::after{width:300px;height:300px;}
    body.page-login .btn-login:active{transform:translateY(0) scale(0.98);}
    body.page-login .btn-login .spinner{display:none;width:20px;height:20px;border:2.5px solid rgba(255,255,255,0.3);border-top-color:#fff;border-radius:50%;animation:spin 0.7s linear infinite;margin:0 auto;}
    body.page-login .btn-login.loading .btn-text{display:none;}
    body.page-login .btn-login.loading .spinner{display:block;}
    body.page-login @keyframes spin{to{transform:rotate(360deg);}}

    body.page-login .btn-back{background:none;border:none;color:#a855f7;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;padding:0;margin-bottom:16px;}
    body.page-login .btn-back:hover{color:#c084fc;}

    body.page-login .code-label{font-size:13px;color:#aaa;text-align:center;margin-bottom:16px;}
    body:not(.dark-mode) .code-label{color:#666;}

    body.page-login .code-inputs{display:flex;gap:10px;justify-content:center;margin-bottom:24px;}
    body.page-login .code-inputs input{
      width:52px;height:58px;border-radius:12px;border:1.5px solid rgba(255,255,255,0.1);
      background:rgba(255,255,255,0.04);color:#e8e8e8;font-size:22px;font-weight:700;
      text-align:center;font-family:inherit;outline:none;
      transition:all 0.3s cubic-bezier(.25,.8,.25,1);caret-color:#a855f7;
    }
    body:not(.dark-mode) .code-inputs input{border-color:rgba(0,0,0,0.12);background:rgba(0,0,0,0.02);color:#1a1a1a;}
    body.page-login .code-inputs input:focus{border-color:#a855f7;box-shadow:0 0 0 3px rgba(168,85,247,0.15);transform:translateY(-2px);}
    body.page-login .code-inputs input.filled{border-color:rgba(34,197,94,0.4);background:rgba(34,197,94,0.04);}

    body.page-login .resend-row{text-align:center;font-size:13px;color:#888;margin-bottom:24px;}
    body:not(.dark-mode) .resend-row{color:#888;}
    body.page-login .resend-row button{background:none;border:none;color:#a855f7;font-weight:600;cursor:pointer;font-family:inherit;font-size:13px;padding:0;}
    body.page-login .resend-row button:hover{color:#c084fc;}
    body.page-login .resend-row button:disabled{color:#555;cursor:default;}

    body.page-login .divider{display:flex;align-items:center;gap:14px;margin:22px 0;color:#555;font-size:13px;}
    body:not(.dark-mode) .divider{color:#bbb;}
    body.page-login .divider::before,.divider::after{content:'';flex:1;height:1px;background:rgba(255,255,255,0.08);}
    body:not(.dark-mode) .divider::before,body:not(.dark-mode) .divider::after{background:rgba(0,0,0,0.08);}

    body.page-login .btn-google{
      width:100%;padding:14px;border-radius:12px;
      border:1.5px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.04);
      color:#e8e8e8;font-size:14px;font-weight:600;cursor:pointer;
      transition:all 0.35s cubic-bezier(.25,.8,.25,1);font-family:inherit;
      display:flex;align-items:center;justify-content:center;gap:10px;
    }
    body:not(.dark-mode) .btn-google{border-color:rgba(0,0,0,0.12);background:#fff;color:#1a1a1a;}
    body.page-login .btn-google:hover{background:rgba(255,255,255,0.08);border-color:rgba(168,85,247,0.3);transform:translateY(-2px);}
    body:not(.dark-mode) .btn-google:hover{background:#f8f8f8;}
    body.page-login .btn-google svg{width:20px;height:20px;}
    body.page-login .btn-google span{position:relative;z-index:1;}

    body.page-login .signup-link{text-align:center;margin-top:24px;font-size:13px;color:#888;}
    body.page-login .signup-link a{color:#a855f7;text-decoration:none;font-weight:600;}
    body.page-login .signup-link a:hover{color:#c084fc;text-decoration:underline;}

    body.page-login .error-msg{
      display:none;background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.2);
      color:#ef4444;font-size:13px;padding:10px 14px;border-radius:10px;margin-bottom:16px;text-align:center;
    }
    body.page-login .error-msg.show{display:block;animation:msgIn 0.4s ease,shake 0.4s 0.4s ease;}
    body.page-login @keyframes msgIn{from{opacity:0;transform:translateY(-8px) scale(0.96);}to{opacity:1;transform:translateY(0) scale(1);}}
    body.page-login @keyframes shake{0%,100%{transform:translateX(0);}25%{transform:translateX(-6px);}75%{transform:translateX(6px);}}

    body.page-login .step{display:none;}
    body.page-login .step.active{display:block;animation:stepFade 0.4s cubic-bezier(.25,.8,.25,1);}
    body.page-login @keyframes stepFade{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}

    body.exiting{animation:pageOut 0.4s cubic-bezier(.25,.8,.25,1) forwards;}
    body.page-login @keyframes pageOut{to{opacity:0;transform:translateY(-20px) scale(0.97);}}

    body.page-login @media(max-width:520px){
      body.page-login .login-card{padding:36px 24px;border-radius:20px;}
      nav{padding:14px 20px;}
      body.page-login .code-inputs input{width:44px;height:50px;font-size:18px;}
    }

/* ══ admin.html ══ */
*{margin:0;padding:0;box-sizing:border-box;}
    body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#0a0a0a;color:#e8e8e8;min-height:100vh;transition:background 0.4s,color 0.4s;}
    body:not(.dark-mode){background:#f5f5f5;color:#1a1a1a;}

    nav{display:flex;align-items:center;justify-content:space-between;padding:14px 32px;border-bottom:1px solid rgba(255,255,255,0.06);background:rgba(10,10,10,0.8);backdrop-filter:blur(20px);position:sticky;top:0;z-index:100;}
    body:not(.dark-mode) nav{background:rgba(245,245,245,0.9);border-color:rgba(0,0,0,0.06);}
    body.page-admin .logo{display:flex;align-items:center;text-decoration:none;}
    body.page-admin .logo-img{height:32px;}
    body.page-admin .nav-right{display:flex;align-items:center;gap:8px;}
    body.page-admin .mode-btn{padding:6px 12px;border-radius:8px;border:1px solid rgba(255,255,255,0.12);background:transparent;color:#aaa;font-size:13px;font-weight:600;cursor:pointer;transition:all 0.3s;font-family:inherit;}
    body:not(.dark-mode) .mode-btn{border-color:rgba(0,0,0,0.1);color:#666;}
    body.page-admin .mode-btn:hover{background:rgba(255,255,255,0.08);color:#fff;}
    body.page-admin .mode-btn.active{background:#fff;color:#111;}
    body:not(.dark-mode) .mode-btn.active{background:#1a1a1a;color:#fff;}
    body.page-admin .admin-logout{padding:6px 12px;border-radius:8px;border:1px solid rgba(239,68,68,0.3);background:transparent;color:#ef4444;font-size:13px;font-weight:600;cursor:pointer;transition:all 0.3s;font-family:inherit;}
    body.page-admin .admin-logout:hover{background:rgba(239,68,68,0.1);}

    body.page-admin .wrap{max-width:1100px;margin:0 auto;padding:32px 24px;}

    /* ── Login ── */
    body.page-admin .login-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(16px);display:flex;align-items:center;justify-content:center;z-index:200;opacity:1;transition:opacity 0.4s;}
    body.page-admin .login-overlay.hidden{opacity:0;pointer-events:none;}
    body.page-admin .login-box{width:100%;max-width:400px;background:#141414;border:1px solid rgba(255,255,255,0.08);border-radius:20px;padding:40px 32px;animation:popIn 0.4s cubic-bezier(.25,.8,.25,1);}
    body:not(.dark-mode) .login-box{background:#fff;border-color:rgba(0,0,0,0.08);box-shadow:0 16px 48px rgba(0,0,0,0.1);}
    body.page-admin @keyframes popIn{from{opacity:0;transform:scale(0.92) translateY(16px);}to{opacity:1;transform:scale(1) translateY(0);}}
    body.page-admin .login-box h2{font-size:22px;font-weight:800;margin-bottom:6px;text-align:center;}
    body.page-admin .login-box .sub{font-size:13px;color:#888;text-align:center;margin-bottom:28px;}
    body.page-admin .login-box label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:#ccc;}
    body:not(.dark-mode) .login-box label{color:#444;}
    body.page-admin .login-box input{width:100%;padding:12px 14px;border-radius:10px;border:1.5px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.04);color:#e8e8e8;font-size:14px;font-family:inherit;outline:none;transition:all 0.3s;margin-bottom:16px;}
    body:not(.dark-mode) .login-box input{border-color:rgba(0,0,0,0.12);background:rgba(0,0,0,0.02);color:#1a1a1a;}
    body.page-admin .login-box input:focus{border-color:#a855f7;box-shadow:0 0 0 3px rgba(168,85,247,0.15);}
    body.page-admin .login-box .btn-submit{width:100%;padding:13px;border:none;border-radius:10px;background:linear-gradient(135deg,#a855f7,#7c3aed);color:#fff;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;transition:all 0.3s;}
    body.page-admin .login-box .btn-submit:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(168,85,247,0.3);}
    body.page-admin .login-error{color:#ef4444;font-size:13px;text-align:center;margin-top:12px;display:none;}
    body.page-admin .login-error.show{display:block;animation:shake 0.3s ease;}
    body.page-admin @keyframes shake{0%,100%{transform:translateX(0);}25%{transform:translateX(-5px);}75%{transform:translateX(5px);}}

    /* ── Dashboard ── */
    body.page-admin .dash{display:none;}
    body.page-admin .dash.active{display:block;}

    body.page-admin .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:32px;}
    body.page-admin .stat{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06);border-radius:16px;padding:24px;transition:all 0.3s;}
    body:not(.dark-mode) .stat{background:#fff;border-color:rgba(0,0,0,0.06);box-shadow:0 2px 12px rgba(0,0,0,0.04);}
    body.page-admin .stat:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.1);}
    body.page-admin .stat .label{font-size:12px;color:#888;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:8px;}
    body:not(.dark-mode) .stat .label{color:#888;}
    body.page-admin .stat .value{font-size:28px;font-weight:800;letter-spacing:-0.5px;}
    body.page-admin .stat .value.purple{color:#a855f7;}

    body.page-admin .tabs{display:flex;gap:6px;margin-bottom:24px;flex-wrap:wrap;}
    body.page-admin .tab{padding:8px 16px;border-radius:8px;border:1px solid rgba(255,255,255,0.08);background:transparent;color:#aaa;font-size:13px;font-weight:600;cursor:pointer;transition:all 0.3s;font-family:inherit;}
    body:not(.dark-mode) .tab{border-color:rgba(0,0,0,0.08);color:#666;}
    body.page-admin .tab:hover{background:rgba(255,255,255,0.06);}
    body.page-admin .tab.active{background:rgba(168,85,247,0.15);color:#a855f7;border-color:rgba(168,85,247,0.3);}

    body.page-admin .panel{display:none;}
    body.page-admin .panel.active{display:block;}

    body.page-admin .order-list{display:flex;flex-direction:column;gap:12px;}
    body.page-admin .order-card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06);border-radius:14px;padding:20px;display:flex;justify-content:space-between;align-items:center;gap:16px;transition:all 0.3s;}
    body:not(.dark-mode) .order-card{background:#fff;border-color:rgba(0,0,0,0.06);box-shadow:0 2px 8px rgba(0,0,0,0.03);}
    body.page-admin .order-card:hover{border-color:rgba(168,85,247,0.2);}
    body.page-admin .order-info{flex:1;min-width:0;}
    body.page-admin .order-name{font-weight:700;font-size:15px;margin-bottom:4px;}
    body.page-admin .order-meta{font-size:13px;color:#888;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    body:not(.dark-mode) .order-meta{color:#888;}
    body.page-admin .order-right{text-align:right;flex-shrink:0;}
    body.page-admin .order-price{font-size:18px;font-weight:800;color:#a855f7;margin-bottom:4px;}
    body.page-admin .order-time{font-size:11px;color:#666;}
    body.page-admin .order-status{display:inline-block;padding:3px 10px;border-radius:6px;font-size:11px;font-weight:700;margin-top:6px;}
    body.page-admin .order-status.pending{background:rgba(251,191,36,0.15);color:#fbbf24;}
    body.page-admin .order-status.completed{background:rgba(34,197,94,0.15);color:#22c55e;}
    body.page-admin .order-status.cancelled{background:rgba(239,68,68,0.15);color:#ef4444;}

    body.page-admin .order-btn{padding:6px 14px;border:none;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;transition:all 0.25s;font-family:inherit;}
    body.page-admin .done-btn{background:rgba(168,85,247,0.15);color:#a855f7;border:1px solid rgba(168,85,247,0.3);}
    body.page-admin .done-btn:hover{background:rgba(168,85,247,0.25);transform:translateY(-1px);}
    body.page-admin .approve-btn{background:rgba(34,197,94,0.15);color:#22c55e;border:1px solid rgba(34,197,94,0.3);}
    body.page-admin .approve-btn:hover{background:rgba(34,197,94,0.25);transform:translateY(-1px);}
    body.page-admin .return-btn{background:rgba(239,68,68,0.15);color:#ef4444;border:1px solid rgba(239,68,68,0.3);}
    body.page-admin .return-btn:hover{background:rgba(239,68,68,0.25);transform:translateY(-1px);}

    body.page-admin .empty{text-align:center;padding:60px 20px;color:#555;}
    body.page-admin .empty h3{font-size:18px;margin-bottom:8px;color:#888;}
    body.page-admin .empty p{font-size:13px;}

    body.page-admin .emp-form{display:flex;gap:10px;margin-bottom:24px;flex-wrap:wrap;}
    body.page-admin .emp-form input{padding:10px 14px;border-radius:10px;border:1.5px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.04);color:#e8e8e8;font-size:13px;font-family:inherit;outline:none;transition:all 0.3s;}
    body:not(.dark-mode) .emp-form input{border-color:rgba(0,0,0,0.12);background:rgba(0,0,0,0.02);color:#1a1a1a;}
    body.page-admin .emp-form input:focus{border-color:#a855f7;}
    body.page-admin .emp-form .btn-add{padding:10px 18px;border:none;border-radius:10px;background:linear-gradient(135deg,#a855f7,#7c3aed);color:#fff;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:all 0.3s;}
    body.page-admin .emp-form .btn-add:hover{transform:translateY(-1px);}

    body.page-admin .emp-list{display:flex;flex-direction:column;gap:8px;}
    body.page-admin .emp-row{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06);border-radius:12px;}
    body:not(.dark-mode) .emp-row{background:#fff;border-color:rgba(0,0,0,0.06);}
    body.page-admin .emp-email{font-weight:600;font-size:14px;}
    body.page-admin .emp-del{padding:5px 10px;border:none;border-radius:6px;background:rgba(239,68,68,0.1);color:#ef4444;font-size:12px;font-weight:600;cursor:pointer;transition:all 0.2s;}
    body.page-admin .emp-del:hover{background:rgba(239,68,68,0.2);}

    body.page-admin .search-bar{width:100%;padding:12px 16px;border-radius:12px;border:1.5px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.04);color:#e8e8e8;font-size:14px;font-family:inherit;outline:none;margin-bottom:20px;transition:all 0.3s;}
    body:not(.dark-mode) .search-bar{border-color:rgba(0,0,0,0.1);background:rgba(0,0,0,0.02);color:#1a1a1a;}
    body.page-admin .search-bar:focus{border-color:#a855f7;}

    body.page-admin @media(max-width:600px){
      body.page-admin .wrap{padding:20px 16px;}
      body.page-admin .order-card{flex-direction:column;align-items:flex-start;}
      body.page-admin .order-right{text-align:left;}
      body.page-admin .emp-form{flex-direction:column;}
    }

/* ══════════════════════════════════════════════════════
   index.html — Apple Music-style dark glassmorphism UI
   ══════════════════════════════════════════════════════ */

body.page-index {
  margin: 0;
  padding: 0;
  background: #000;
  color: #fff;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body.page-index .arc-home {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: 600px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
}

/* ── Top status bar ── */
body.page-index .arc-top-bar {
  padding: 20px 0 0;
  text-align: center;
}

body.page-index .arc-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}

body.page-index .arc-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #5eead4;
  box-shadow: 0 0 8px #5eead4, 0 0 20px rgba(94,234,212,0.3);
  animation: arcPulse 2s ease-in-out infinite;
}

@keyframes arcPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}

body.page-index .arc-status-label {
  color: rgba(255,255,255,0.6);
}

body.page-index .arc-status-divider {
  color: rgba(255,255,255,0.2);
}

body.page-index .arc-status-page {
  color: rgba(255,255,255,0.35);
  font-variant-numeric: tabular-nums;
}

/* ── Hero ── */
body.page-index .arc-hero {
  text-align: center;
  padding: 60px 0 20px;
  flex-shrink: 0;
}

body.page-index .arc-hero-title {
  font-size: clamp(48px, 10vw, 100px);
  font-weight: 900;
  letter-spacing: -2px;
  line-height: 1;
  margin: 0 0 12px;
  background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0.6) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: opacity 0.3s ease;
}

body.page-index .arc-hero-sub {
  font-size: 15px;
  color: rgba(255,255,255,0.4);
  margin: 0;
  font-weight: 400;
}

/* ── Content panels ── */
body.page-index .arc-hero-content {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0 24px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

body.page-index .arc-hero-content::-webkit-scrollbar { display: none; }

body.page-index .arc-panel {
  display: none;
  animation: arcFadeIn 0.35s ease;
}

body.page-index .arc-panel.active { display: block; }

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

/* ── Service cards grid (Home panel) ── */
body.page-index .arc-services-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

body.page-index .arc-service-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 24px 18px;
  text-decoration: none;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all 0.3s ease;
  cursor: pointer;
}

body.page-index .arc-service-card:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(168,85,247,0.3);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(168,85,247,0.1);
}

body.page-index .arc-service-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(168,85,247,0.12);
  border-radius: 10px;
  color: #a855f7;
}

body.page-index .arc-service-icon svg {
  width: 20px;
  height: 20px;
}

body.page-index .arc-service-label {
  font-size: 15px;
  font-weight: 700;
}

body.page-index .arc-service-desc {
  font-size: 12px;
  color: rgba(255,255,255,0.35);
  line-height: 1.3;
}

/* ── List items (Boosting, Accounts, Discord, Contact panels) ── */
body.page-index .arc-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body.page-index .arc-list-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: rgba(255,255,255,0.04);
  border-radius: 14px;
  text-decoration: none;
  color: #fff;
  transition: all 0.2s ease;
  cursor: pointer;
}

body.page-index .arc-list-item:hover {
  background: rgba(255,255,255,0.08);
}

body.page-index .arc-list-num {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.25);
  min-width: 24px;
  font-variant-numeric: tabular-nums;
}

body.page-index .arc-list-item div {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body.page-index .arc-list-item strong {
  font-size: 15px;
  font-weight: 600;
}

body.page-index .arc-list-item span {
  font-size: 12px;
  color: rgba(255,255,255,0.35);
}

body.page-index .arc-list-arrow {
  font-size: 20px;
  color: rgba(255,255,255,0.2);
  font-weight: 300;
}

/* ── Contact panel ── */
body.page-index .arc-contact-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body.page-index .arc-contact-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: rgba(255,255,255,0.04);
  border-radius: 14px;
  text-decoration: none;
  color: #fff;
  transition: all 0.2s ease;
}

body.page-index .arc-contact-item:hover {
  background: rgba(255,255,255,0.08);
}

body.page-index .arc-contact-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  object-fit: contain;
  background: rgba(255,255,255,0.06);
  padding: 6px;
}

body.page-index .arc-contact-item div {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body.page-index .arc-contact-item strong {
  font-size: 15px;
  font-weight: 600;
}

body.page-index .arc-contact-item span {
  font-size: 12px;
  color: rgba(255,255,255,0.35);
}

body.page-index .arc-contact-note {
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,0.25);
  margin-top: 20px;
}

/* ── Bottom section ── */
body.page-index .arc-bottom {
  flex-shrink: 0;
  padding-bottom: max(env(safe-area-inset-bottom), 12px);
}

body.page-index .arc-hint {
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,0.2);
  margin: 0 0 12px;
}

body.page-index .arc-hint u {
  color: rgba(94,234,212,0.5);
  text-decoration: none;
  border-bottom: 1px solid rgba(94,234,212,0.2);
}

/* ── Glassmorphism nav bar ── */
body.page-index .arc-nav {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 24px;
  padding: 8px 6px;
  position: relative;
  overflow: hidden;
}

body.page-index .arc-nav-glow {
  position: absolute;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(94,234,212,0.25) 0%, rgba(94,234,212,0.08) 50%, transparent 70%);
  pointer-events: none;
  transition: left 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
  opacity: 0;
  z-index: 0;
}

body.page-index .arc-nav-glow.visible { opacity: 1; }

body.page-index .arc-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 12px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.3);
  cursor: pointer;
  transition: color 0.3s ease;
  position: relative;
  z-index: 1;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  border-radius: 16px;
  min-width: 52px;
}

body.page-index .arc-tab svg {
  width: 22px;
  height: 22px;
  transition: all 0.3s ease;
}

body.page-index .arc-tab span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: all 0.3s ease;
}

body.page-index .arc-tab.active {
  color: #5eead4;
}

body.page-index .arc-tab.active svg {
  filter: drop-shadow(0 0 6px rgba(94,234,212,0.4));
}

body.page-index .arc-tab.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(94,234,212,0.2);
  filter: blur(8px);
  z-index: -1;
}

body.page-index .arc-tab:hover:not(.active) {
  color: rgba(255,255,255,0.55);
}

/* ── Header override (hide original header on index) ── */
body.page-index header { display: none; }
body.page-index .hero { display: none; }
body.page-index #features { display: none; }
body.page-index #products { display: none; }
body.page-index #about { display: none; }
body.page-index #contact { display: none; }
body.page-index footer { display: none; }

/* ── Responsive ── */
@media (max-width: 480px) {
  body.page-index .arc-home { padding: 0 16px; }
  body.page-index .arc-hero-title { font-size: 52px; }
  body.page-index .arc-services-grid { gap: 10px; }
  body.page-index .arc-service-card { padding: 20px 14px; }
  body.page-index .arc-tab { min-width: 46px; padding: 8px 8px; }
  body.page-index .arc-tab svg { width: 20px; height: 20px; }
  body.page-index .arc-tab span { font-size: 9px; }
}
/* ── Crystal canvas background ── */
body.page-index #arcCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

body.page-index .arc-home {
  position: relative;
  z-index: 1;
}

/* ── Cart badge ── */
body.page-index .arc-cart-badge {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #a855f7;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ── Nav link tabs (basket, user) ── */
body.page-index .arc-tab-link {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 12px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.3);
  cursor: pointer;
  transition: color 0.3s ease;
  position: relative;
  z-index: 1;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  border-radius: 16px;
  min-width: 52px;
}

body.page-index .arc-tab-link svg {
  width: 22px;
  height: 22px;
  transition: all 0.3s ease;
}

body.page-index .arc-tab-link span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: all 0.3s ease;
}

body.page-index .arc-tab-link:hover {
  color: rgba(255,255,255,0.55);
}

/* Remove old hint style */
body.page-index .arc-hint { display: none; }