:root {
  --accent-blue:#4d91ff;
  --accent-pink:#fa5560;
  --accent-purple:#b14bf4;
  --container-max:1400px;
  --hero-height:calc(100vh - 80px);
  --section-padding:120px;
  --security-radar-size:400px
  }

  html, body { overflow-x:hidden }

  .vpn-hero-pills {
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  justify-content:center
  }

  .vpn-pill {
  background:linear-gradient(#1e1e32cc,#1e1e32cc) padding-box,linear-gradient(to right,#fd941366,#ff69b4aa,#b14bf4cc,#ac65cbaa,#3aafd388) border-box;
  border:1px solid transparent;
  border-radius:100px;
  color:var(--text-secondary);
  font-size:14px;
  font-weight:600;
  padding:10px 24px
  }

  .vpn-pill strong {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560,#b14bf4,#4d91ff);
  background-clip:text;
  margin-right:6px
  }

  .vpn-badge {
  background:linear-gradient(81.02deg,#fa55601f -23.47%,#b14bf41f 45.52%,#4d91ff1f 114.8%);
  border:1px solid #b14bf440;
  border-radius:100px;
  display:inline-block;
  font-size:13px;
  font-weight:700;
  letter-spacing:1.5px;
  margin-bottom:24px;
  padding:6px 20px;
  text-transform:uppercase
  }

  .vpn-badge span {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560 -23.47%,#b14bf4 45.52%,#4d91ff 114.8%);
  background-clip:text
  }

  @media (max-width: 768px) {
  .vpn-hero-pills {
  flex-wrap:nowrap;
  gap:10px;
  justify-content:center
  }

  .vpn-pill {
  font-size:13px;
  padding:8px 16px
  }
  }

  .vpnconnect-section {
  align-items:center;
  background:linear-gradient(180deg,var(--color-background) 0%,var(--color-background) 100%);
  display:flex;
  min-height:var(--hero-height);
  overflow:hidden;
  padding:80px 0;
  position:relative
  }
  
  .vpnconnect-container {
  align-items:center;
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:0 auto;
  max-width:600px;
  padding:0 40px;
  position:relative;
  z-index:1
  }
  
  .vpnconnect-hero {
  margin-bottom:40px;
  text-align:center
  }
  
  .vpnconnect-hero p {
  color:var(--text-secondary);
  font-size:16px;
  margin:0
  }
  
  .vpnconnect-card {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(to bottom,#ffffff24,var(--border-subtle)) border-box;
  border:2px solid transparent;
  border-radius:12px;
  min-width:0;
  overflow:hidden;
  padding:32px;
  width:100%
  }
  
  .vpnconnect-card-header {
  align-items:center;
  display:flex;
  justify-content:space-between;
  margin-bottom:24px
  }
  
  .vpnconnect-card-title {
  color:var(--text-primary);
  font-size:20px;
  font-weight:700
  }
  
  .connect-code-inputs {
  display:flex;
  gap:8px;
  justify-content:center;
  margin:24px 0
  }
  
  .connect-code-input {
  background-color:#111116;
  border:1px solid var(--border-subtle);
  border-radius:8px;
  color:#efefef;
  font-size:26px;
  height:64px;
  text-align:center;
  transition:all .15s ease;
  width:54px
  }
  
  .connect-code-input:hover,.connect-code-input:focus {
  background-color:#b14bf40d;
  border-color:#b14bf480;
  outline:none
  }
  
  .connect-code-input::placeholder {
  color:var(--text-faint)
  }
  
  .privacy-section {
  margin-top:-80px;
  padding:0 0 50px
  }
  
  .privacy-hero {
  margin-bottom:60px;
  padding-top:160px;
  text-align:center
  }
  
  .privacy-hero p {
  color:var(--text-secondary);
  font-size:18px;
  font-style:italic
  }
  
  .privacy-container {
  margin:0 auto;
  max-width:1200px;
  padding:0 24px
  }
  
  .privacy-content {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%) border-box;
  border:2px solid transparent;
  border-radius:24px;
  padding:48px
  }
  
  .privacy-content h2 {
  border-bottom:2px solid var(--border-subtle);
  color:var(--text-primary);
  font-size:24px;
  font-weight:700;
  margin-bottom:20px;
  margin-top:40px;
  padding-bottom:12px
  }
  
  .privacy-content h2:first-of-type {
  margin-top:0
  }
  
  .privacy-content h3 {
  color:var(--text-primary);
  font-size:20px;
  font-weight:600;
  margin-bottom:16px;
  margin-top:28px
  }
  
  .privacy-content p {
  color:var(--text-primary);
  font-size:16px;
  line-height:1.8;
  margin-bottom:16px
  }
  
  .privacy-content ul {
  margin:16px 0 24px 24px
  }
  
  .privacy-content li {
  color:var(--text-primary);
  line-height:1.8;
  margin-bottom:8px
  }
  
  .privacy-content .info-box {
  background:linear-gradient(175deg,#4d91ff26 -94.09%,#4d91ff0d 154.53%);
  border-left:4px solid #4d91ff;
  border-radius:12px;
  margin:24px 0;
  padding:24px
  }
  
  .privacy-content .info-box p:last-child {
  margin-bottom:0
  }
  
  .privacy-content .info-box strong {
  color:#4d91ff
  }
  
  .privacy-content .contact-box {
  background:linear-gradient(175deg,var(--border-subtle) -94.09%,var(--border-subtle) 154.53%);
  border-left:4px solid #c66bd5;
  border-radius:8px;
  margin:40px 0 0;
  padding:24px
  }
  
  .privacy-content .contact-box h3 {
  color:var(--text-primary);
  font-size:20px;
  font-weight:700;
  margin-bottom:16px
  }
  
  .privacy-content .contact-box a {
  color:#4d91ff;
  text-decoration:none;
  transition:all .3s ease
  }
  
  .privacy-content .contact-box a:hover {
  color:#c66bd5;
  text-decoration:underline
  }
  
  .vpnconnect-hero h1,.privacy-hero h1 {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  background-clip:text;
  display:inline-block;
  font-size:48px;
  font-weight:800;
  margin-bottom:16px
  }
  
  .privacy-content li::marker,.privacy-content .contact-box strong {
  color:#c66bd5
  }
  
  .privacy-content .info-box p,.privacy-content .contact-box p {
  margin-bottom:8px
  }
  
  @media (max-width: 768px) {
  .privacy-hero h1 {
  font-size:36px
  }
  
  .privacy-content {
  padding:32px 24px
  }
  
  .privacy-content h2 {
  font-size:20px
  }
  }
  
  .st-section {
  margin-top:-80px;
  overflow:hidden;
  padding-bottom:50px;
  position:relative
  }
  
  .st-hero {
  background:linear-gradient(180deg,var(--color-background) 0%,var(--color-background) 50%,var(--color-background) 100%);
  padding:160px 0 32px;
  position:relative;
  text-align:center
  }
  
  .st-hero-glow {
  border-radius:50%;
  pointer-events:none;
  position:absolute;
  z-index:0
  }
  
  .st-hero-glow--pink {
  background:#fa55601f;
  filter:blur(120px);
  height:500px;
  left:-100px;
  top:-200px;
  width:500px
  }
  
  .st-hero-glow--purple {
  background:#b14bf41a;
  filter:blur(140px);
  height:600px;
  right:-150px;
  top:-150px;
  width:600px
  }
  
  .st-hero-glow--blue {
  background:#4d91ff0f;
  bottom:-350px;
  filter:blur(160px);
  height:700px;
  left:50%;
  transform:translateX(-50%);
  width:700px
  }
  
  .st-hero > :not(.st-hero-glow) {
  position:relative;
  z-index:1
  }
  
  .st-badge-wrap {
  margin-bottom:16px
  }
  
  .st-badge {
  background:linear-gradient(81.02deg,#fa55601f -23.47%,#b14bf41f 45.52%,#4d91ff1f 114.8%);
  border:1px solid #b14bf440;
  border-radius:100px;
  display:inline-block;
  font-size:13px;
  font-weight:700;
  letter-spacing:1.5px;
  margin-bottom:24px;
  padding:6px 20px;
  text-transform:uppercase
  }

  .st-badge span {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560 -23.47%,#b14bf4 45.52%,#4d91ff 114.8%);
  background-clip:text
  }
  
  .st-hero h1 {
  color:var(--text-primary);
  font-size:52px;
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.1;
  margin-bottom:14px
  }
  
  .st-hero h1 span {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560 -23.47%,#b14bf4 45.52%,#4d91ff 114.8%);
  background-clip:text;
  display:block
  }
  
  .st-hero-desc {
  color:var(--text-muted);
  font-size:16px;
  line-height:1.6;
  margin:0 auto 20px;
  max-width:560px
  }
  
  .st-hero-pills {
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  justify-content:center
  }
  
  .st-pill {
  background:linear-gradient(#1e1e32cc,#1e1e32cc) padding-box,linear-gradient(to right,#fd941366,#ff69b4aa,#b14bf4cc,#ac65cbaa,#3aafd388) border-box;
  border:1px solid transparent;
  border-radius:100px;
  color:var(--text-secondary);
  font-size:14px;
  font-weight:600;
  padding:10px 24px
  }
  
  .st-pill strong {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560,#b14bf4,#4d91ff);
  background-clip:text;
  margin-right:6px
  }
  
  .st-container {
  margin:0 auto;
  max-width:1200px;
  padding:0 24px;
  position:relative;
  z-index:1
  }
  
  .st-card {
  background:#ffffff05;
  border:none;
  border-radius:28px;
  margin-bottom:32px;
  padding:48px 32px 40px;
  text-align:center
  }
  
  .st-gauge-wrap {
  height:200px;
  margin:0 auto 8px;
  position:relative;
  width:320px
  }
  
  .st-gauge-wrap svg {
  height:100%;
  overflow:visible;
  width:100%
  }
  
  .st-gauge-value {
  bottom:32px;
  left:50%;
  pointer-events:none;
  position:absolute;
  text-align:center;
  transform:translateX(-50%)
  }
  
  .st-gauge-number {
  color:#fff;
  font-size:56px;
  font-variant-numeric:tabular-nums;
  font-weight:800;
  line-height:1
  }
  
  .st-gauge-unit {
  color:var(--text-muted);
  font-size:15px;
  font-weight:600;
  margin-top:2px
  }
  
  .st-needle {
  height:0;
  left:160px;
  position:absolute;
  top:150px;
  transform-origin:center center;
  transition:transform .5s cubic-bezier(0.34,1.56,0.64,1);
  width:0;
  z-index:10
  }
  
  .st-needle-line {
  background:#4d91ff;
  border-radius:2px;
  height:3px;
  position:absolute;
  right:0;
  top:-1.5px;
  transform-origin:right center;
  width:108px
  }
  
  .st-phase {
  color:var(--text-muted);
  font-size:13px;
  font-weight:700;
  letter-spacing:1.5px;
  margin-bottom:24px;
  min-height:20px;
  text-transform:uppercase
  }
  
  .st-stats {
  display:flex;
  gap:12px;
  margin-bottom:32px
  }
  
  .st-stat {
  background:linear-gradient(175deg,var(--border-subtle) -94.09%,#ffffff05 154.53%);
  border:none;
  border-radius:16px;
  flex:1;
  padding:18px 12px;
  text-align:center
  }
  
  .st-stat-label {
  color:var(--text-muted);
  font-size:11px;
  font-weight:700;
  letter-spacing:.8px;
  margin-bottom:6px;
  text-transform:uppercase
  }
  
  .st-stat-value {
  font-size:24px;
  font-variant-numeric:tabular-nums;
  font-weight:800;
  line-height:1
  }
  
  .st-stat-value.upload {
  color:#fa5560
  }
  
  .st-stat-value.ping {
  color:#4d91ff
  }
  
  .st-stat-unit {
  color:var(--text-muted);
  font-size:11px;
  font-weight:600;
  margin-top:4px
  }
  
  .st-btn-wrap {
  display:flex;
  justify-content:center;
  margin-bottom:8px
  }
  
  .st-btn-outer {
  align-items:center;
  background:#ffffff05;
  border:1px solid var(--border-subtle);
  border-radius:50%;
  cursor:pointer;
  display:flex;
  height:120px;
  justify-content:center;
  position:relative;
  transition:all .3s ease;
  width:120px
  }
  
  .st-btn-outer:hover {
  border-color:#b14bf440;
  box-shadow:0 0 40px #b14bf41f
  }
  
  .st-btn-outer.running {
  animation:st-pulse 1.6s ease-in-out infinite;
  border-color:#f6b05d40;
  box-shadow:0 0 40px #f6b05d26
  }
  
  .st-btn-outer.done {
  border-color:#22c55e40;
  box-shadow:0 0 40px #22c55e26
  }
  
  .st-btn-ring {
  align-items:center;
  backdrop-filter:blur(16px);
  border:1px solid var(--border-subtle);
  border-radius:50%;
  display:flex;
  height:90px;
  justify-content:center;
  transition:all .3s ease;
  width:90px
  }
  
  .st-btn-outer:hover .st-btn-ring {
  border-color:#b14bf433;
  box-shadow:0 0 20px #b14bf41a
  }
  
  .st-btn-inner {
  align-items:center;
  background:#232332bf;
  border-radius:50%;
  box-shadow:0 4px 24px #0000004d inset 0 1px 0 var(--border-subtle);
  display:flex;
  height:60px;
  justify-content:center;
  transition:all .2s ease;
  width:60px
  }
  
  .st-btn-outer:hover .st-btn-inner {
  transform:scale(1.05)
  }
  
  .st-btn-inner svg {
  color:var(--text-muted);
  transition:color .3s
  }
  
  .st-btn-outer.running .st-btn-inner svg {
  color:#f6b05d
  }
  
  .st-btn-outer.done .st-btn-inner svg {
  color:#22c55e
  }
  
  .st-stat-value.download,.st-btn-outer:hover .st-btn-inner svg {
  color:#b14bf4
  }
  
  @keyframes st-pulse {
  0%,100% {
  transform:scale(1)
  }
  
  50% {
  transform:scale(1.06)
  }
  }
  
  .st-server {
  align-items:center;
  background:linear-gradient(175deg,var(--border-subtle) -94.09%,#ffffff05 154.53%);
  border-radius:12px;
  display:none;
  justify-content:space-between;
  margin-top:16px;
  padding:14px 20px
  }
  
  .st-server.visible {
  display:flex
  }
  
  .st-server-label {
  color:var(--text-muted);
  font-size:13px
  }
  
  .st-server-value {
  color:var(--text-primary);
  font-family:monospace;
  font-size:13px;
  font-weight:600
  }
  
  .st-content {
  background:linear-gradient(175deg,var(--border-subtle) -94.09%,var(--border-subtle) 154.53%);
  border:1px solid var(--border-subtle);
  border-radius:24px;
  margin-bottom:32px;
  padding:48px
  }
  
  .st-content h2 {
  border-bottom:2px solid var(--border-subtle);
  color:var(--text-primary);
  font-size:24px;
  font-weight:700;
  margin-bottom:20px;
  margin-top:40px;
  padding-bottom:12px
  }
  
  .st-content h2:first-child {
  margin-top:0
  }
  
  .st-content p {
  color:var(--text-secondary);
  font-size:16px;
  line-height:1.8;
  margin-bottom:16px
  }
  
  .st-content ul {
  margin:16px 0 24px 24px
  }
  
  .st-content li {
  color:var(--text-secondary);
  line-height:1.8;
  margin-bottom:8px
  }
  
  .st-content li::marker {
  color:#c66bd5
  }
  
  .st-info-box {
  background:linear-gradient(175deg,#4d91ff26 -94.09%,#4d91ff0d 154.53%);
  border-left:4px solid #4d91ff;
  border-radius:8px;
  margin:24px 0;
  padding:24px
  }
  
  .st-info-box p {
  color:var(--text-secondary);
  margin-bottom:0
  }
  
  .st-info-box strong {
  color:#4d91ff
  }
  
  .st-cta {
  background:linear-gradient(var(--color-primary-dark,#0d1017),var(--color-primary-dark,#0d1017)) padding-box,linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%) border-box;
  border:2px solid transparent;
  border-radius:24px;
  margin-bottom:32px;
  padding:48px;
  text-align:center
  }
  
  .st-cta h2 {
  color:var(--text-primary);
  font-size:28px;
  font-weight:700;
  margin-bottom:16px
  }
  
  .st-cta p {
  color:var(--text-secondary);
  font-size:16px;
  margin-bottom:24px
  }
  
  .st-cta-btn {
  position:relative;
  align-items:center;
  background:linear-gradient(rgba(30,30,50,0.6),rgba(30,30,50,0.6)) padding-box,linear-gradient(81.02deg,#fd941366,#ff69b4aa,#b14bf4cc,#ac65cbaa,#3aafd388) border-box;
  border:1px solid transparent;
  border-radius:14px;
  backdrop-filter:blur(12px) saturate(180%);
  -webkit-backdrop-filter:blur(12px) saturate(180%);
  color:#fff;
  display:inline-flex;
  font-size:16px;
  font-weight:700;
  gap:10px;
  overflow:hidden;
  padding:16px 40px;
  text-decoration:none;
  transition:all .4s ease;
  box-shadow:0 0 20px rgba(255,255,255,0.05),0 6px 24px rgba(0,0,0,0.2),inset 0 1px 1px rgba(255,255,255,0.15),inset 0 -1px 1px rgba(0,0,0,0.3)
  }

  .st-cta-btn:hover {
  filter:brightness(1.05);
  box-shadow:0 0 30px rgba(177,75,244,0.35),0 0 60px rgba(177,75,244,0.15),0 12px 32px rgba(0,0,0,0.4);
  color:#fff
  }
  
  @media (max-width: 768px) {
  .st-hero {
  padding-top:100px
  }
  
  .st-hero h1 {
  font-size:30px
  }
  
  .st-hero-desc {
  font-size:15px;
  max-width:100%;
  padding:0 16px
  }
  
  .st-hero-pills {
  flex-wrap:nowrap;
  gap:10px;
  justify-content:center
  }
  
  .st-pill-hide-mobile {
  display:none
  }
  
  .st-pill {
  font-size:13px;
  padding:8px 16px
  }
  
  .st-card {
  padding:32px 20px
  }
  
  .st-gauge-wrap {
  height:170px;
  width:260px
  }
  
  .st-gauge-number {
  font-size:42px
  }
  
  .st-needle {
  left:130px;
  top:125px
  }
  
  .st-needle-line {
  width:88px
  }
  
  .st-gauge-value {
  bottom:28px
  }
  
  .st-stats {
  gap:8px
  }
  
  .st-stat {
  padding:14px 8px
  }
  
  .st-stat-value {
  font-size:20px
  }
  
  .st-container {
  max-width:100%
  }
  
  .st-content,.st-cta {
  padding:32px 24px
  }
  }
  
  .dns-section {
  margin-top:-80px;
  overflow:hidden;
  padding-bottom:50px;
  position:relative
  }
  
  
  .dns-hero {
  background:linear-gradient(180deg,var(--color-background) 0%,var(--color-background) 50%,var(--color-background) 100%);
  margin-bottom:48px;
  padding:160px 0 32px;
  position:relative;
  text-align:center
  }
  
  .dns-hero-glow {
  border-radius:50%;
  pointer-events:none;
  position:absolute;
  z-index:0
  }
  
  .dns-hero-glow--pink {
  background:#fa55601f;
  filter:blur(120px);
  height:500px;
  left:-100px;
  top:-200px;
  width:500px
  }
  
  .dns-hero-glow--purple {
  background:#b14bf41a;
  filter:blur(140px);
  height:600px;
  right:-150px;
  top:-150px;
  width:600px
  }
  
  .dns-hero-glow--blue {
  background:#4d91ff0f;
  bottom:-350px;
  filter:blur(160px);
  height:700px;
  left:50%;
  transform:translateX(-50%);
  width:700px
  }
  
  .dns-hero > :not(.dns-hero-glow) {
  position:relative;
  z-index:1
  }
  
  .dns-hero h1 {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  background-clip:text;
  display:inline-block;
  font-size:48px;
  font-weight:800;
  margin-bottom:16px
  }

  .dns-hero p {
  color:var(--text-secondary);
  font-size:18px;
  line-height:1.8;
  margin:0 auto;
  max-width:700px
  }
  
  .dns-container {
  margin:0 auto;
  max-width:1200px;
  padding:0 24px;
  position:relative;
  z-index:1
  }
  
  .dns-card {
  background:var(--color-primary-dark);
  border:1px solid var(--border-subtle);
  border-radius:24px;
  margin-bottom:32px;
  padding:48px;
  text-align:center
  }
  
  .dns-icon {
  align-items:center;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  border-radius:50%;
  display:flex;
  height:80px;
  justify-content:center;
  margin:0 auto 24px;
  width:80px
  }
  
  .dns-icon svg {
  color:#fff
  }
  
  .dns-title {
  color:var(--text-primary);
  font-size:24px;
  font-weight:700;
  margin-bottom:16px
  }
  
  .dns-description {
  color:var(--text-secondary);
  font-size:16px;
  margin-bottom:32px;
  margin-left:auto;
  margin-right:auto;
  max-width:500px
  }
  
  .dns-btn {
  align-items:center;
  background:linear-gradient(rgba(30,30,50,0.6),rgba(30,30,50,0.6)) padding-box,linear-gradient(81.02deg,#fd941366,#ff69b4aa,#b14bf4cc,#ac65cbaa,#3aafd388) border-box;
  border:1px solid transparent;
  border-radius:14px;
  backdrop-filter:blur(12px) saturate(180%);
  -webkit-backdrop-filter:blur(12px) saturate(180%);
  color:#fff;
  cursor:pointer;
  display:inline-flex;
  font-size:16px;
  font-weight:700;
  gap:10px;
  overflow:hidden;
  padding:16px 48px;
  transition:all .4s ease;
  box-shadow:0 0 20px rgba(255,255,255,0.05),0 6px 24px rgba(0,0,0,0.2),inset 0 1px 1px rgba(255,255,255,0.15),inset 0 -1px 1px rgba(0,0,0,0.3)
  }

  .dns-btn:hover {
  filter:brightness(1.05);
  box-shadow:0 0 30px rgba(177,75,244,0.35),0 0 60px rgba(177,75,244,0.15),0 12px 32px rgba(0,0,0,0.4)
  }
  
  .dns-btn:disabled {
  cursor:not-allowed;
  opacity:.6;
  transform:none
  }
  
  .dns-results {
  border-top:1px solid var(--border-subtle);
  display:none;
  margin-top:32px;
  padding-top:32px
  }
  
  .dns-results.visible {
  display:block
  }
  
  .dns-status {
  align-items:center;
  border-radius:100px;
  display:inline-flex;
  font-size:15px;
  font-weight:600;
  gap:10px;
  margin-bottom:24px;
  padding:12px 24px
  }
  
  .dns-status.success {
  background:#22c55e26;
  border:1px solid #22c55e4d;
  color:#22c55e
  }
  
  .dns-status.warning {
  background:#ffd70026;
  border:1px solid #ffd7004d;
  color:#ffd700
  }
  
  .dns-status.danger {
  background:#fa556026;
  border:1px solid #fa55604d;
  color:#fa5560
  }
  
  .dns-servers {
  background:linear-gradient(175deg,var(--border-subtle) -94.09%,#ffffff05 154.53%);
  border-radius:12px;
  padding:24px 0;
  text-align:left
  }
  
  .dns-server-item {
  align-items:center;
  border-bottom:1px solid var(--border-subtle);
  border-left:5px solid transparent;
  display:flex;
  justify-content:space-between;
  padding:12px 24px 12px 19px
  }
  
  .dns-server-item:hover {
  background:var(--border-subtle);
  border-left:5px solid var(--border-subtle)
  }
  
  .dns-server-item.current {
  border-left:5px solid #0a4520
  }
  
  .dns-server-item:last-child {
  border-bottom:none
  }
  
  .dns-server-ip {
  color:var(--text-primary);
  font-family:monospace;
  font-size:14px
  }
  
  .dns-server-location {
  color:var(--text-secondary);
  font-size:13px
  }
  
  .dns-content {
  background:var(--color-primary-dark);
  border:1px solid var(--border-subtle);
  border-radius:24px;
  margin-bottom:32px;
  padding:48px
  }
  
  .dns-content h2 {
  border-bottom:2px solid var(--border-subtle);
  color:var(--text-primary);
  font-size:24px;
  font-weight:700;
  margin-bottom:20px;
  margin-top:40px;
  padding-bottom:12px
  }
  
  .dns-content h2:first-child {
  margin-top:0
  }
  
  .dns-content p {
  color:var(--text-primary);
  font-size:16px;
  line-height:1.8;
  margin-bottom:16px
  }
  
  .dns-content ul {
  margin:16px 0 24px 24px
  }
  
  .dns-content li {
  color:var(--text-primary);
  line-height:1.8;
  margin-bottom:8px
  }
  
  .dns-content li::marker {
  color:#c66bd5
  }
  
  .dns-warning-box {
  background:linear-gradient(175deg,#f59e0b26 -94.09%,#f59e0b0d 154.53%);
  border-left:4px solid #f59e0b;
  border-radius:8px;
  margin:24px 0;
  padding:24px
  }
  
  .dns-warning-box p {
  color:var(--text-primary);
  margin-bottom:0
  }
  
  .dns-warning-box strong {
  color:#f59e0b
  }
  
  .dns-info-box {
  background:linear-gradient(175deg,#4d91ff26 -94.09%,#4d91ff0d 154.53%);
  border-left:4px solid #4d91ff;
  border-radius:8px;
  margin:24px 0;
  padding:24px
  }
  
  .dns-info-box p {
  margin-bottom:0
  }
  
  .dns-info-box strong {
  color:#4d91ff
  }
  
  .dns-cta {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%) border-box;
  border:2px solid transparent;
  border-radius:20px;
  padding:48px;
  text-align:center
  }
  
  .dns-cta h2 {
  color:var(--text-primary);
  font-size:28px;
  font-weight:700;
  margin-bottom:16px
  }
  
  .dns-cta p {
  color:var(--text-secondary);
  font-size:16px;
  margin-bottom:24px;
  margin-left:auto;
  margin-right:auto;
  max-width:600px
  }
  
  .dns-cta-btn {
  position:relative;
  align-items:center;
  background:linear-gradient(rgba(30,30,50,0.6),rgba(30,30,50,0.6)) padding-box,linear-gradient(81.02deg,#fd941366,#ff69b4aa,#b14bf4cc,#ac65cbaa,#3aafd388) border-box;
  border:1px solid transparent;
  border-radius:14px;
  backdrop-filter:blur(12px) saturate(180%);
  -webkit-backdrop-filter:blur(12px) saturate(180%);
  color:#fff;
  display:inline-flex;
  font-size:16px;
  font-weight:700;
  gap:10px;
  overflow:hidden;
  padding:16px 40px;
  text-decoration:none;
  transition:all .4s ease;
  box-shadow:0 0 20px rgba(255,255,255,0.05),0 6px 24px rgba(0,0,0,0.2),inset 0 1px 1px rgba(255,255,255,0.15),inset 0 -1px 1px rgba(0,0,0,0.3)
  }

  .dns-cta-btn:hover {
  filter:brightness(1.05);
  box-shadow:0 0 30px rgba(177,75,244,0.35),0 0 60px rgba(177,75,244,0.15),0 12px 32px rgba(0,0,0,0.4);
  color:#fff
  }
  
  @keyframes dns-spin {
  from {
  transform:rotate(0deg)
  }
  
  to {
  transform:rotate(360deg)
  }
  }
  
  .dns-spin {
  animation:dns-spin 1s linear infinite
  }
  
  @media (max-width: 768px) {
  .dns-hero h1 {
  font-size:36px
  }
  
  .dns-server-item {
  align-items:flex-start;
  flex-direction:column;
  gap:4px
  }
  
  .dns-card,.dns-content,.dns-cta {
  padding:32px 24px
  }
  }
  
  .srv-page {
  margin-top:-80px;
  overflow:hidden;
  padding-bottom:50px;
  position:relative
  }
  
  .srv-hero {
  background:linear-gradient(180deg,var(--color-background) 0%,var(--color-background) 50%,var(--color-background) 100%);
  padding:160px 0 32px;
  position:relative;
  text-align:center
  }
  
  .srv-hero-glow {
  border-radius:50%;
  pointer-events:none;
  position:absolute;
  z-index:0
  }
  
  .srv-hero-glow--pink {
  background:#fa55601f;
  filter:blur(120px);
  height:500px;
  left:-100px;
  top:-200px;
  width:500px
  }
  
  .srv-hero-glow--purple {
  background:#b14bf41a;
  filter:blur(140px);
  height:600px;
  right:-150px;
  top:-150px;
  width:600px
  }
  
  .srv-hero-glow--blue {
  background:#4d91ff0f;
  bottom:-350px;
  filter:blur(160px);
  height:700px;
  left:50%;
  transform:translateX(-50%);
  width:700px
  }
  
  .srv-hero > :not(.srv-hero-glow) {
  position:relative;
  z-index:1
  }
  
  .srv-badge {
  background:linear-gradient(81.02deg,#fa55601f -23.47%,#b14bf41f 45.52%,#4d91ff1f 114.8%);
  border:1px solid #b14bf440;
  border-radius:100px;
  display:inline-block;
  font-size:13px;
  font-weight:700;
  letter-spacing:1.5px;
  margin-bottom:24px;
  padding:6px 20px;
  text-transform:uppercase
  }

  .srv-badge span {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560 -23.47%,#b14bf4 45.52%,#4d91ff 114.8%);
  background-clip:text
  }
  
  .srv-badge-wrap {
  margin-bottom:16px
  }
  
  .srv-hero h1 {
  color:var(--text-primary);
  font-size:52px;
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.1;
  margin-bottom:14px
  }
  
  .srv-hero h1 span {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560 -23.47%,#b14bf4 45.52%,#4d91ff 114.8%);
  background-clip:text;
  display:block
  }
  
  .srv-hero-desc {
  color:var(--text-secondary);
  font-size:16px;
  line-height:1.6;
  margin:0 auto 20px;
  max-width:560px
  }
  
  .srv-hero-pills {
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  justify-content:center
  }
  
  .srv-pill {
  background:linear-gradient(#1e1e32cc,#1e1e32cc) padding-box,linear-gradient(to right,#fd941366,#ff69b4aa,#b14bf4cc,#ac65cbaa,#3aafd388) border-box;
  border:1px solid transparent;
  border-radius:100px;
  color:var(--text-secondary);
  font-size:14px;
  font-weight:600;
  padding:10px 24px
  }
  
  .srv-pill strong {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560,#b14bf4,#4d91ff);
  background-clip:text;
  margin-right:6px
  }
  
  .srv-container {
  box-sizing:border-box;
  margin:0 auto;
  max-width:1200px;
  padding:0 24px
  }
  
  .srv-search-wrap {
  margin:0 auto 28px;
  max-width:560px;
  position:relative
  }
  
  .srv-search-icon {
  color:var(--text-muted);
  left:20px;
  pointer-events:none;
  position:absolute;
  top:27px;
  transform:translateY(-50%)
  }
  
  .srv-search {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(to bottom,#ffffff1f,var(--border-subtle)) border-box;
  border:1.5px solid transparent;
  border-radius:16px;
  box-sizing:border-box;
  color:var(--text-primary);
  font-family:inherit;
  font-size:15px;
  outline:none;
  padding:16px 20px 16px 52px;
  transition:border-color 0.3s,box-shadow .3s;
  width:100%
  }
  
  .srv-search::placeholder {
  color:#ffffff59
  }
  
  .srv-search:focus {
  border-color:#b14bf480;
  box-shadow:0 0 0 4px #b14bf41a
  }
  
  .srv-search-count {
  color:var(--text-muted);
  font-size:13px;
  margin-top:12px;
  text-align:center
  }
  
  .srv-stats {
  display:grid;
  gap:16px;
  grid-template-columns:repeat(4,1fr);
  margin-bottom:32px
  }
  
  .srv-stat {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(to bottom,var(--border-subtle),var(--border-subtle)) border-box;
  border:1px solid transparent;
  border-radius:16px;
  padding:20px 16px;
  text-align:center;
  transition:transform .3s ease,box-shadow .3s ease
  }
  
  .srv-stat:hover {
  box-shadow:0 12px 40px #0000004d;
  transform:translateY(-4px)
  }
  
  .srv-stat-val {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560 -23.47%,#b14bf4 45.52%,#4d91ff 114.8%);
  background-clip:text;
  font-size:28px;
  font-weight:800;
  line-height:1;
  margin-bottom:6px
  }
  
  .srv-stat-label {
  color:var(--text-muted);
  font-size:13px;
  font-weight:600;
  letter-spacing:.5px;
  text-transform:uppercase
  }
  
  .srv-regions {
  display:flex;
  flex-direction:column;
  gap:16px;
  margin-bottom:64px
  }
  
  .srv-region {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(to bottom,var(--border-subtle),var(--border-subtle)) border-box;
  border:1px solid transparent;
  border-radius:20px;
  overflow:hidden;
  transition:box-shadow .3s ease
  }
  
  .srv-region:hover {
  box-shadow:0 8px 32px #0003
  }
  
  .srv-region-head {
  align-items:center;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  padding:20px 28px;
  transition:background .2s;
  user-select:none
  }
  
  .srv-region-head:hover {
  background:var(--border-subtle)
  }
  
  .srv-region-left {
  align-items:center;
  display:flex;
  gap:14px
  }
  
  .srv-region-icon {
  align-items:center;
  background:linear-gradient(135deg,#b14bf426,#4d91ff26);
  border-radius:12px;
  color:#b14bf4;
  display:flex;
  flex-shrink:0;
  height:44px;
  justify-content:center;
  width:44px
  }
  
  .srv-region-name {
  color:var(--text-primary);
  font-size:18px;
  font-weight:700
  }
  
  .srv-region-count {
  color:var(--text-muted);
  font-size:13px;
  font-weight:500;
  margin-left:4px
  }
  
  .srv-region-right {
  align-items:center;
  display:flex;
  gap:12px
  }
  
  .srv-region-online {
  align-items:center;
  color:#22c55e;
  display:flex;
  font-size:13px;
  font-weight:500;
  gap:6px
  }
  
  .srv-region-online-dot {
  animation:srv-pulse 2s infinite;
  background:#22c55e;
  border-radius:50%;
  height:8px;
  width:8px
  }
  
  @keyframes srv-pulse {
  0%,100% {
  box-shadow:0 0 0 0 #22c55e66;
  opacity:1
  }
  
  50% {
  box-shadow:0 0 0 6px #22c55e00;
  opacity:.7
  }
  }
  
  .srv-region-chevron {
  color:var(--text-muted);
  flex-shrink:0;
  transition:transform .3s ease
  }
  
  .srv-region.open .srv-region-chevron {
  transform:rotate(180deg)
  }
  
  .srv-region-body {
  max-height:0;
  overflow:hidden;
  transition:max-height .4s cubic-bezier(0.4,0,0.2,1)
  }
  
  .srv-region.open .srv-region-body {
  max-height:2000px
  }
  
  .srv-region-body-inner {
  padding:0 28px 20px
  }
  
  .srv-country {
  align-items:center;
  border-radius:12px;
  display:flex;
  gap:16px;
  justify-content:space-between;
  padding:14px 16px;
  transition:background .2s
  }
  
  .srv-country:hover {
  background:var(--border-subtle)
  }
  
  .srv-country + .srv-country {
  border-top:1px solid var(--border-subtle)
  }
  
  .srv-country-left {
  align-items:center;
  display:flex;
  flex:1;
  gap:14px;
  min-width:0
  }
  
  .srv-flag {
  border-radius:4px;
  box-shadow:0 2px 6px #0000004d;
  flex-shrink:0;
  height:22px;
  object-fit:cover;
  width:32px
  }
  
  .srv-country-name {
  color:var(--text-primary);
  font-size:15px;
  font-weight:600;
  white-space:nowrap
  }
  
  .srv-country-city {
  color:var(--text-muted);
  font-size:13px;
  margin-left:8px
  }
  
  .srv-country-right {
  align-items:center;
  display:flex;
  flex-shrink:0;
  gap:24px
  }
  
  .srv-meta {
  align-items:center;
  color:var(--text-muted);
  display:flex;
  font-size:13px;
  gap:6px;
  white-space:nowrap
  }
  
  .srv-meta svg {
  flex-shrink:0
  }
  
  .srv-meta-label {
  color:#ffffff59
  }
  
  .srv-load {
  align-items:center;
  display:flex;
  gap:8px;
  min-width:100px
  }
  
  .srv-load-bar {
  background:var(--border-subtle);
  border-radius:3px;
  height:6px;
  overflow:hidden;
  width:48px
  }
  
  .srv-load-fill {
  border-radius:3px;
  height:100%;
  transition:width .6s ease
  }
  
  .srv-load-text {
  font-size:12px;
  font-weight:600;
  min-width:32px
  }
  
  .srv-load[data-level="low"] .srv-load-fill {
  background:#22c55e
  }
  
  .srv-load[data-level="low"] .srv-load-text {
  color:#22c55e
  }
  
  .srv-load[data-level="medium"] .srv-load-fill {
  background:#eab308
  }
  
  .srv-load[data-level="medium"] .srv-load-text {
  color:#eab308
  }
  
  .srv-load[data-level="high"] .srv-load-fill {
  background:#f97316
  }
  
  .srv-load[data-level="high"] .srv-load-text {
  color:#f97316
  }
  
  .srv-load[data-level="full"] .srv-load-fill {
  background:#ef4444
  }
  
  .srv-load[data-level="full"] .srv-load-text {
  color:#ef4444
  }
  
  .srv-proto {
  background:#b14bf41f;
  border:1px solid #b14bf433;
  border-radius:6px;
  color:#b14bf4;
  font-size:11px;
  font-weight:700;
  letter-spacing:.5px;
  padding:3px 10px;
  text-transform:uppercase
  }
  
  .srv-features {
  padding:80px 0
  }
  
  .srv-features-header {
  margin-bottom:56px;
  text-align:center
  }
  
  .srv-features-header h2 {
  color:var(--text-primary);
  font-size:48px;
  font-weight:800;
  letter-spacing:-.03em;
  margin-bottom:16px
  }
  
  .srv-features-header p {
  color:var(--text-muted);
  font-size:18px;
  line-height:1.7;
  margin:0 auto;
  max-width:550px
  }
  
  .srv-features-grid {
  display:grid;
  gap:24px;
  grid-template-columns:repeat(3,1fr)
  }
  
  .srv-feat {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(to bottom,var(--border-subtle),var(--border-subtle)) border-box;
  border:1px solid transparent;
  border-radius:24px;
  padding:36px 28px;
  text-align:center;
  transition:transform .4s cubic-bezier(0.4,0,0.2,1),box-shadow .4s ease
  }
  
  .srv-feat:hover {
  box-shadow:0 20px 60px #0000004d;
  transform:translateY(-8px)
  }
  
  .srv-feat-icon {
  align-items:center;
  background:linear-gradient(135deg,#fa556026,#b14bf426,#4d91ff26);
  border-radius:16px;
  display:flex;
  height:56px;
  justify-content:center;
  margin:0 auto 20px;
  width:56px
  }
  
  .srv-feat-icon svg {
  color:#b14bf4
  }
  
  .srv-feat h3 {
  color:var(--text-primary);
  font-size:18px;
  font-weight:700;
  margin-bottom:10px
  }
  
  .srv-feat p {
  color:var(--text-muted);
  font-size:14px;
  line-height:1.7
  }
  
  .srv-cta {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(81.02deg,#fa556080,#b14bf466,#4d91ff80) border-box;
  border:2px solid transparent;
  border-radius:24px;
  margin-bottom:40px;
  overflow:hidden;
  padding:80px 40px;
  position:relative;
  text-align:center
  }
  
  .srv-cta-glow {
  background:radial-gradient(circle,#b14bf414 0%,transparent 70%);
  height:600px;
  left:50%;
  pointer-events:none;
  position:absolute;
  top:50%;
  transform:translate(-50%,-50%);
  width:600px
  }
  
  .srv-cta h2 {
  color:var(--text-primary);
  font-size:40px;
  font-weight:800;
  letter-spacing:-.02em;
  margin-bottom:16px;
  position:relative
  }
  
  .srv-cta p {
  color:var(--text-muted);
  font-size:17px;
  margin-bottom:32px;
  position:relative
  }
  
  .srv-cta-btn {
  position:relative;
  align-items:center;
  background:linear-gradient(rgba(30,30,50,0.6),rgba(30,30,50,0.6)) padding-box,linear-gradient(81.02deg,#fd941366,#ff69b4aa,#b14bf4cc,#ac65cbaa,#3aafd388) border-box;
  border:1px solid transparent;
  border-radius:14px;
  backdrop-filter:blur(12px) saturate(180%);
  -webkit-backdrop-filter:blur(12px) saturate(180%);
  color:#fff;
  display:inline-flex;
  font-size:16px;
  font-weight:700;
  gap:10px;
  overflow:hidden;
  padding:16px 40px;
  text-decoration:none;
  transition:all .4s ease;
  box-shadow:0 0 20px rgba(255,255,255,0.05),0 6px 24px rgba(0,0,0,0.2),inset 0 1px 1px rgba(255,255,255,0.15),inset 0 -1px 1px rgba(0,0,0,0.3)
  }

  .srv-cta-btn:hover {
  filter:brightness(1.05);
  box-shadow:0 0 30px rgba(177,75,244,0.35),0 0 60px rgba(177,75,244,0.15),0 12px 32px rgba(0,0,0,0.4);
  color:#fff
  }
  
  .srv-fade {
  opacity:0;
  transform:translateY(30px);
  transition:opacity .7s ease,transform .7s ease
  }
  
  .srv-fade-item {
  opacity:0;
  transform:translateY(20px);
  transition:opacity .5s ease,transform .5s ease;
  transition-delay:var(--delay,0s)
  }
  
  .srv-no-results {
  color:var(--text-muted);
  display:none;
  font-size:15px;
  padding:48px 24px;
  text-align:center
  }
  
  .srv-no-results svg {
  margin-bottom:12px;
  opacity:.3
  }
  
  .srv-features-header h2 span,.srv-cta h2 span {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560 -23.47%,#b14bf4 45.52%,#4d91ff 114.8%);
  background-clip:text
  }
  
  .srv-fade.visible,.srv-fade.visible .srv-fade-item {
  opacity:1;
  transform:translateY(0)
  }
  
  @media (max-width: 1024px) {
  .srv-hero h1 {
  font-size:40px
  }
  
  .srv-features-header h2 {
  font-size:36px
  }
  
  .srv-features-grid {
  grid-template-columns:repeat(2,1fr)
  }
  
  .srv-country-right {
  gap:16px
  }
  }
  
  @media (max-width: 768px) {
  .srv-hero {
  padding:120px 0 24px
  }
  
  .srv-hero-desc {
  font-size:15px;
  max-width:100%;
  padding:0 16px
  }
  
  .srv-hero-pills {
  gap:10px
  }
  
  .srv-pill {
  font-size:12px;
  padding:8px 14px
  }
  
  .srv-container {
  max-width:100%;
  padding:0 16px
  }
  
  .srv-stats {
  gap:10px;
  grid-template-columns:repeat(2,1fr)
  }
  
  .srv-stat {
  padding:14px 10px
  }
  
  .srv-stat-val {
  font-size:22px
  }
  
  .srv-stat-label {
  font-size:11px
  }
  
  .srv-region {
  border-radius:16px
  }
  
  .srv-region-head {
  gap:8px;
  padding:14px 16px
  }
  
  .srv-region-name {
  font-size:16px
  }
  
  .srv-region-icon {
  border-radius:10px;
  height:36px;
  width:36px
  }
  
  .srv-region-icon svg {
  height:18px;
  width:18px
  }
  
  .srv-region-body-inner {
  padding:0 12px 12px
  }
  
  .srv-country {
  align-items:flex-start;
  flex-direction:column;
  gap:8px;
  padding:10px 12px
  }
  
  .srv-country-right {
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-start;
  width:100%
  }
  
  .srv-load {
  min-width:auto
  }
  
  .srv-features-grid {
  grid-template-columns:1fr
  }
  
  .srv-features-header p {
  font-size:15px;
  padding:0 16px
  }
  
  .srv-cta {
  border-radius:20px;
  padding:48px 20px
  }
  
  .srv-cta h2 {
  font-size:26px
  }
  
  .srv-search-wrap {
  padding:0 16px
  }
  
  .srv-search-icon {
  left:36px
  }
  
  .srv-hero h1,.srv-features-header h2 {
  font-size:30px
  }
  
  .srv-region-count,.srv-region-online,.srv-country-city,.srv-meta {
  font-size:12px
  }
  
  .srv-country-name,.srv-cta p {
  font-size:14px
  }
  }
  
  @media (max-width: 480px) {
  .srv-hero h1 {
  font-size:24px
  }
  
  .srv-hero-pills {
  display:grid;
  gap:8px;
  grid-template-columns:1fr 1fr;
  margin:0 auto;
  max-width:320px
  }
  
  .srv-pill {
  display:flex;
  font-size:12px;
  justify-content:center;
  padding:8px 10px;
  text-align:center
  }
  
  .srv-stats {
  gap:8px;
  grid-template-columns:1fr 1fr
  }
  
  .srv-stat {
  padding:12px 8px
  }
  
  .srv-stat-val {
  font-size:20px
  }
  
  .srv-region-right .srv-region-online span {
  display:none
  }
  }
  
  .ipc-section {
  margin-top:-80px;
  overflow:hidden;
  padding-bottom:50px;
  position:relative
  }
  
  
  .ipc-hero {
  background:linear-gradient(180deg,var(--color-background) 0%,var(--color-background) 50%,var(--color-background) 100%);
  margin-bottom:48px;
  padding:160px 0 32px;
  position:relative;
  text-align:center
  }
  
  .ipc-hero-glow {
  border-radius:50%;
  pointer-events:none;
  position:absolute;
  z-index:0
  }
  
  .ipc-hero-glow--pink {
  background:#fa55601f;
  filter:blur(120px);
  height:500px;
  left:-100px;
  top:-200px;
  width:500px
  }
  
  .ipc-hero-glow--purple {
  background:#b14bf41a;
  filter:blur(140px);
  height:600px;
  right:-150px;
  top:-150px;
  width:600px
  }
  
  .ipc-hero-glow--blue {
  background:#4d91ff0f;
  bottom:-350px;
  filter:blur(160px);
  height:700px;
  left:50%;
  transform:translateX(-50%);
  width:700px
  }
  
  .ipc-hero > :not(.ipc-hero-glow) {
  position:relative;
  z-index:1
  }
  
  .ipc-hero h1 {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  background-clip:text;
  display:inline-block;
  font-size:48px;
  font-weight:800;
  margin-bottom:16px
  }

  .ipc-hero p {
  color:var(--text-secondary);
  font-size:18px;
  line-height:1.8;
  margin:0 auto;
  max-width:700px
  }
  
  .ipc-container {
  margin:0 auto;
  max-width:1200px;
  padding:0 24px;
  position:relative;
  z-index:1
  }
  
  .ipc-display-card {
  background:var(--color-primary-dark);
  border:1px solid var(--border-subtle);
  border-radius:24px;
  margin-bottom:32px;
  padding:48px;
  text-align:center
  }
  
  .ipc-label {
  color:var(--text-secondary);
  font-size:14px;
  letter-spacing:1px;
  margin-bottom:12px;
  text-transform:uppercase
  }
  
  .ipc-address {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  background-clip:text;
  font-family:monospace;
  font-size:48px;
  font-weight:800;
  margin-bottom:24px;
  word-break:break-all
  }
  
  .ipc-address.ipv6 {
  font-size:28px
  }
  
  .ipc-status {
  align-items:center;
  border-radius:100px;
  display:inline-flex;
  font-size:15px;
  font-weight:600;
  gap:10px;
  padding:12px 24px
  }
  
  .ipc-status.protected {
  background:#22c55e26;
  border:1px solid #22c55e4d;
  color:#22c55e
  }
  
  .ipc-status.unprotected {
  background:#fa556026;
  border:1px solid #fa55604d;
  color:#fa5560
  }
  
  .ipc-details {
  border-top:1px solid var(--border-subtle);
  display:grid;
  gap:24px;
  grid-template-columns:repeat(3,1fr);
  margin-top:32px;
  padding-top:32px
  }
  
  .ipc-detail-item {
  text-align:center
  }
  
  .ipc-detail-label {
  color:var(--text-muted);
  font-size:12px;
  letter-spacing:.5px;
  margin-bottom:8px;
  text-transform:uppercase
  }
  
  .ipc-detail-value {
  color:var(--text-primary);
  font-size:16px;
  font-weight:600
  }
  
  .ipc-content {
  background:var(--color-primary-dark);
  border:1px solid var(--border-subtle);
  border-radius:24px;
  margin-bottom:32px;
  padding:48px
  }
  
  .ipc-content h2 {
  border-bottom:2px solid var(--border-subtle);
  color:var(--text-primary);
  font-size:24px;
  font-weight:700;
  margin-bottom:20px;
  margin-top:40px;
  padding-bottom:12px
  }
  
  .ipc-content h2:first-child {
  margin-top:0
  }
  
  .ipc-content p {
  color:var(--text-primary);
  font-size:16px;
  line-height:1.8;
  margin-bottom:16px
  }
  
  .ipc-content ul {
  margin:16px 0 24px 24px
  }
  
  .ipc-content li {
  color:var(--text-primary);
  line-height:1.8;
  margin-bottom:8px
  }
  
  .ipc-content li::marker {
  color:#c66bd5
  }
  
  .ipc-warning-box {
  background:linear-gradient(175deg,#f59e0b26 -94.09%,#f59e0b0d 154.53%);
  border-left:4px solid #f59e0b;
  border-radius:8px;
  margin:24px 0;
  padding:24px
  }
  
  .ipc-warning-box p {
  color:var(--text-primary);
  margin-bottom:0
  }
  
  .ipc-warning-box strong {
  color:#f59e0b
  }
  
  .ipc-info-box {
  background:linear-gradient(175deg,#4d91ff26 -94.09%,#4d91ff0d 154.53%);
  border-left:4px solid #4d91ff;
  border-radius:8px;
  margin:24px 0;
  padding:24px
  }
  
  .ipc-info-box p {
  margin-bottom:0
  }
  
  .ipc-info-box strong {
  color:#4d91ff
  }
  
  .ipc-cta {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%) border-box;
  border:2px solid transparent;
  border-radius:20px;
  padding:48px;
  text-align:center
  }
  
  .ipc-cta h2 {
  color:var(--text-primary);
  font-size:28px;
  font-weight:700;
  margin-bottom:16px
  }
  
  .ipc-cta p {
  color:var(--text-secondary);
  font-size:16px;
  margin-bottom:24px;
  margin-left:auto;
  margin-right:auto;
  max-width:600px
  }
  
  .ipc-cta-btn {
  position:relative;
  align-items:center;
  background:linear-gradient(rgba(30,30,50,0.6),rgba(30,30,50,0.6)) padding-box,linear-gradient(81.02deg,#fd941366,#ff69b4aa,#b14bf4cc,#ac65cbaa,#3aafd388) border-box;
  border:1px solid transparent;
  border-radius:14px;
  backdrop-filter:blur(12px) saturate(180%);
  -webkit-backdrop-filter:blur(12px) saturate(180%);
  color:#fff;
  display:inline-flex;
  font-size:16px;
  font-weight:700;
  gap:10px;
  overflow:hidden;
  padding:16px 40px;
  text-decoration:none;
  transition:all .4s ease;
  box-shadow:0 0 20px rgba(255,255,255,0.05),0 6px 24px rgba(0,0,0,0.2),inset 0 1px 1px rgba(255,255,255,0.15),inset 0 -1px 1px rgba(0,0,0,0.3)
  }

  .ipc-cta-btn:hover {
  filter:brightness(1.05);
  box-shadow:0 0 30px rgba(177,75,244,0.35),0 0 60px rgba(177,75,244,0.15),0 12px 32px rgba(0,0,0,0.4);
  color:#fff
  }
  
  @media (max-width: 768px) {
  .ipc-hero h1 {
  font-size:36px
  }
  
  .ipc-address {
  font-size:28px
  }
  
  .ipc-details {
  gap:16px;
  grid-template-columns:1fr
  }
  
  .ipc-display-card,.ipc-content,.ipc-cta {
  padding:32px 24px
  }
  }
  
  .wrt-section {
  margin-top:-80px;
  overflow:hidden;
  padding-bottom:50px;
  position:relative
  }
  
  
  .wrt-hero {
  background:linear-gradient(180deg,var(--color-background) 0%,var(--color-background) 50%,var(--color-background) 100%);
  margin-bottom:48px;
  padding:160px 0 32px;
  position:relative;
  text-align:center
  }
  
  .wrt-hero-glow {
  border-radius:50%;
  pointer-events:none;
  position:absolute;
  z-index:0
  }
  
  .wrt-hero-glow--pink {
  background:#fa55601f;
  filter:blur(120px);
  height:500px;
  left:-100px;
  top:-200px;
  width:500px
  }
  
  .wrt-hero-glow--purple {
  background:#b14bf41a;
  filter:blur(140px);
  height:600px;
  right:-150px;
  top:-150px;
  width:600px
  }
  
  .wrt-hero-glow--blue {
  background:#4d91ff0f;
  bottom:-350px;
  filter:blur(160px);
  height:700px;
  left:50%;
  transform:translateX(-50%);
  width:700px
  }
  
  .wrt-hero > :not(.wrt-hero-glow) {
  position:relative;
  z-index:1
  }
  
  .wrt-hero h1 {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  background-clip:text;
  display:inline-block;
  font-size:48px;
  font-weight:800;
  margin-bottom:16px
  }

  .wrt-hero p {
  color:var(--text-secondary);
  font-size:18px;
  line-height:1.8;
  margin:0 auto;
  max-width:700px
  }
  
  .wrt-container {
  margin:0 auto;
  max-width:1200px;
  padding:0 24px;
  position:relative;
  z-index:1
  }
  
  .wrt-card {
  background:var(--color-primary-dark);
  border:1px solid var(--border-subtle);
  border-radius:24px;
  margin-bottom:32px;
  padding:48px;
  text-align:center
  }
  
  .wrt-icon {
  align-items:center;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  border-radius:50%;
  display:flex;
  height:80px;
  justify-content:center;
  margin:0 auto 24px;
  width:80px
  }
  
  .wrt-icon svg {
  color:#fff
  }
  
  .wrt-title {
  color:var(--text-primary);
  font-size:24px;
  font-weight:700;
  margin-bottom:16px
  }
  
  .wrt-description {
  color:var(--text-secondary);
  font-size:16px;
  margin-bottom:32px;
  margin-left:auto;
  margin-right:auto;
  max-width:500px
  }
  
  .wrt-results-grid {
  display:grid;
  gap:24px;
  grid-template-columns:repeat(2,1fr);
  margin-top:32px
  }
  
  .wrt-result-box {
  background:linear-gradient(175deg,var(--border-subtle) -94.09%,#ffffff05 154.53%);
  border:1px solid var(--border-subtle);
  border-radius:16px;
  padding:24px;
  text-align:center
  }
  
  .wrt-result-box.leak {
  background:linear-gradient(175deg,#fa55601a -94.09%,#fa556005 154.53%);
  border-color:#fa556080
  }
  
  .wrt-result-box.safe {
  background:linear-gradient(175deg,#22c55e1a -94.09%,#22c55e05 154.53%);
  border-color:#22c55e80
  }
  
  .wrt-result-label {
  color:var(--text-muted);
  font-size:12px;
  letter-spacing:.5px;
  margin-bottom:8px;
  text-transform:uppercase
  }
  
  .wrt-result-value {
  color:var(--text-primary);
  font-family:monospace;
  font-size:14px;
  word-break:break-all
  }
  
  .wrt-result-value.none {
  color:#22c55e
  }
  
  .wrt-result-value.detected {
  color:#fa5560
  }
  
  .wrt-status-banner {
  align-items:center;
  border-radius:100px;
  display:inline-flex;
  font-size:15px;
  font-weight:600;
  gap:10px;
  margin-top:24px;
  padding:12px 24px
  }
  
  .wrt-status-banner.success {
  background:#22c55e26;
  border:1px solid #22c55e4d;
  color:#22c55e
  }
  
  .wrt-status-banner.danger {
  background:#fa556026;
  border:1px solid #fa55604d;
  color:#fa5560
  }
  
  .wrt-content {
  background:var(--color-primary-dark);
  border:1px solid var(--border-subtle);
  border-radius:24px;
  margin-bottom:32px;
  padding:48px
  }
  
  .wrt-content h2 {
  border-bottom:2px solid var(--border-subtle);
  color:var(--text-primary);
  font-size:24px;
  font-weight:700;
  margin-bottom:20px;
  margin-top:40px;
  padding-bottom:12px
  }
  
  .wrt-content h2:first-child {
  margin-top:0
  }
  
  .wrt-content p {
  color:var(--text-primary);
  font-size:16px;
  line-height:1.8;
  margin-bottom:16px
  }
  
  .wrt-content ul {
  margin:16px 0 24px 24px
  }
  
  .wrt-content li {
  color:var(--text-primary);
  line-height:1.8;
  margin-bottom:8px
  }
  
  .wrt-content li::marker {
  color:#c66bd5
  }
  
  .wrt-warning-box {
  background:linear-gradient(175deg,#f59e0b26 -94.09%,#f59e0b0d 154.53%);
  border-left:4px solid #f59e0b;
  border-radius:8px;
  margin:24px 0;
  padding:24px
  }
  
  .wrt-warning-box p {
  color:var(--text-primary);
  margin-bottom:0
  }
  
  .wrt-warning-box strong {
  color:#f59e0b
  }
  
  .wrt-info-box {
  background:linear-gradient(175deg,#4d91ff26 -94.09%,#4d91ff0d 154.53%);
  border-left:4px solid #4d91ff;
  border-radius:8px;
  margin:24px 0;
  padding:24px
  }
  
  .wrt-info-box p {
  margin-bottom:0
  }
  
  .wrt-info-box strong {
  color:#4d91ff
  }
  
  .wrt-browsers-grid {
  display:grid;
  gap:16px;
  grid-template-columns:repeat(4,1fr);
  margin:24px 0
  }
  
  .wrt-browser-item {
  background:linear-gradient(175deg,var(--border-subtle) -94.09%,#ffffff05 154.53%);
  border:1px solid var(--border-subtle);
  border-radius:12px;
  padding:20px;
  text-align:center
  }
  
  .wrt-browser-item p {
  color:var(--text-secondary);
  font-size:13px;
  margin:8px 0 0
  }
  
  .wrt-cta {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%) border-box;
  border:2px solid transparent;
  border-radius:20px;
  padding:48px;
  text-align:center
  }
  
  .wrt-cta h2 {
  color:var(--text-primary);
  font-size:28px;
  font-weight:700;
  margin-bottom:16px
  }
  
  .wrt-cta p {
  color:var(--text-secondary);
  font-size:16px;
  margin-bottom:24px;
  margin-left:auto;
  margin-right:auto;
  max-width:600px
  }
  
  .wrt-cta-btn {
  position:relative;
  align-items:center;
  background:linear-gradient(rgba(30,30,50,0.6),rgba(30,30,50,0.6)) padding-box,linear-gradient(81.02deg,#fd941366,#ff69b4aa,#b14bf4cc,#ac65cbaa,#3aafd388) border-box;
  border:1px solid transparent;
  border-radius:14px;
  backdrop-filter:blur(12px) saturate(180%);
  -webkit-backdrop-filter:blur(12px) saturate(180%);
  color:#fff;
  display:inline-flex;
  font-size:16px;
  font-weight:700;
  gap:10px;
  overflow:hidden;
  padding:16px 40px;
  text-decoration:none;
  transition:all .4s ease;
  box-shadow:0 0 20px rgba(255,255,255,0.05),0 6px 24px rgba(0,0,0,0.2),inset 0 1px 1px rgba(255,255,255,0.15),inset 0 -1px 1px rgba(0,0,0,0.3)
  }

  .wrt-cta-btn:hover {
  filter:brightness(1.05);
  box-shadow:0 0 30px rgba(177,75,244,0.35),0 0 60px rgba(177,75,244,0.15),0 12px 32px rgba(0,0,0,0.4);
  color:#fff
  }
  
  @media (max-width: 768px) {
  .wrt-hero h1 {
  font-size:36px
  }
  
  .wrt-results-grid {
  grid-template-columns:1fr
  }
  
  .wrt-browsers-grid {
  grid-template-columns:repeat(2,1fr)
  }
  
  .wrt-card,.wrt-content,.wrt-cta {
  padding:32px 24px
  }
  }
  
  .about-section {
  margin-top:-80px;
  overflow:hidden;
  padding-bottom:50px;
  position:relative
  }
  
  
  .about-hero {
  align-items:center;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:70vh;
  padding:160px 24px 120px;
  position:relative;
  text-align:center
  }

  .about-hero::after {
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:200px;
  background:linear-gradient(to bottom,transparent,var(--color-background));
  pointer-events:none;
  z-index:0
  }

  .about-hero-glow {
  border-radius:50%;
  filter:blur(120px);
  pointer-events:none;
  position:absolute;
  z-index:0
  }
  
  .about-hero-glow--pink {
  background:#fa556026;
  height:500px;
  left:-100px;
  top:-100px;
  width:500px
  }
  
  .about-hero-glow--purple {
  background:#b14bf41f;
  height:600px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:600px
  }
  
  .about-hero-glow--blue {
  background:#4d91ff26;
  bottom:-100px;
  height:500px;
  right:-100px;
  width:500px
  }
  
  .about-hero-content {
  max-width:800px;
  position:relative;
  z-index:1
  }
  
  .about-badge {
  background:linear-gradient(81.02deg,#fa55601f -23.47%,#b14bf41f 45.52%,#4d91ff1f 114.8%);
  border:1px solid #b14bf440;
  border-radius:100px;
  display:inline-block;
  font-size:13px;
  font-weight:700;
  letter-spacing:1.5px;
  margin-bottom:24px;
  padding:6px 20px;
  text-transform:uppercase
  }

  .about-hero h1 {
  font-size:52px;
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.1;
  margin-bottom:20px
  }
  
  .about-hero-desc {
  color:var(--text-secondary);
  font-size:18px;
  line-height:1.7;
  margin:0 auto 40px;
  max-width:600px
  }
  
  .about-hero-stats {
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  justify-content:center
  }
  
  .about-stat-pill {
  align-items:center;
  background:linear-gradient(#1e1e32cc,#1e1e32cc) padding-box,linear-gradient(to right,#fd941366,#ff69b4aa,#b14bf4cc,#ac65cbaa,#3aafd388) border-box;
  border:1px solid transparent;
  border-radius:100px;
  color:var(--text-secondary);
  display:flex;
  font-size:14px;
  font-weight:600;
  gap:8px;
  padding:10px 24px
  }
  
  .about-stat-pill svg {
  height:16px;
  opacity:.7;
  width:16px
  }
  
  .about-container {
  margin:0 auto;
  max-width:1200px;
  padding:0 24px;
  position:relative;
  z-index:1
  }
  
  .about-section-header {
  margin-bottom:48px;
  text-align:center
  }
  
  .about-section-header h2 {
  color:var(--text-primary);
  font-size:48px;
  font-weight:800;
  letter-spacing:-.03em;
  margin-top:16px
  }
  
  .about-mission-vision {
  display:grid;
  gap:32px;
  grid-template-columns:1fr 1fr;
  margin-bottom:100px;
  align-items:center;
  }
  
  .about-mission {
  padding:8px 0
  }
  
  .about-mission h2 {
  color:var(--text-primary);
  font-size:48px;
  font-weight:800;
  letter-spacing:-.03em;
  margin:16px 0 24px
  }
  
  .about-mission p {
  color:var(--text-secondary);
  font-size:16px;
  line-height:1.8;
  margin-bottom:16px
  }
  
  .about-vision-card {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(135deg,#fa556080,#b14bf459,#4d91ff73) border-box;
  border:2px solid transparent;
  border-radius:24px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
  padding:48px 40px;
  position:relative
  }
  
  .about-vision-card::before {
  background:radial-gradient(circle at 30% 30%,#b14bf414,transparent 60%);
  bottom:0;
  content:'';
  left:0;
  pointer-events:none;
  position:absolute;
  right:0;
  top:0
  }
  
  .about-vision-card h3 {
  color:var(--text-primary);
  font-size:24px;
  font-weight:700;
  margin-bottom:16px;
  position:relative
  }
  
  .about-vision-card p {
  color:var(--text-secondary);
  font-size:16px;
  line-height:1.8;
  position:relative
  }
  
  .about-values-grid {
  display:grid;
  gap:24px;
  grid-template-columns:repeat(3,1fr)
  }
  
  .about-values-bottom {
  display:grid;
  gap:24px;
  grid-template-columns:repeat(2,1fr);
  margin:24px auto 0;
  max-width:800px
  }
  
  .about-value-card {
  background:radial-gradient(circle at 30% 30%,var(--feature-accent-soft,#fa55600f),transparent 60%),linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(to bottom,var(--border-subtle),var(--border-subtle)) border-box;
  border:1px solid transparent;
  border-radius:24px;
  overflow:hidden;
  padding:36px 28px;
  position:relative;
  text-align:center;
  transition:all .4s cubic-bezier(0.4,0,0.2,1)
  }
  
  .about-value-card[data-theme="pink"] {
  --feature-accent:#fa5560;
  --feature-accent-soft:#fa55601a
  }
  
  .about-value-card[data-theme="blue"] {
  --feature-accent:#4d91ff;
  --feature-accent-soft:#4d91ff1a
  }
  
  .about-value-card[data-theme="teal"] {
  --feature-accent:#2fd1b2;
  --feature-accent-soft:#2fd1b21a
  }
  
  .about-value-card[data-theme="amber"] {
  --feature-accent:#ffb347;
  --feature-accent-soft:#ffb3471a
  }
  
  .about-value-card[data-theme="violet"] {
  --feature-accent:#c66bd5;
  --feature-accent-soft:#c66bd51a
  }
  
  .about-value-card:hover {
  box-shadow:0 20px 40px #0000004d;
  transform:translateY(-8px)
  }
  
  .about-value-badge {
  background:var(--feature-accent-soft,#b14bf41a);
  border-radius:100px;
  color:var(--feature-accent,#b14bf4);
  display:inline-block;
  font-size:11px;
  font-weight:700;
  letter-spacing:1px;
  margin-bottom:20px;
  padding:4px 14px;
  text-transform:uppercase
  }
  
  .about-value-icon {
  align-items:center;
  background:linear-gradient(135deg,var(--feature-accent,#fa5560),#b14bf4cc);
  border-radius:50%;
  box-shadow:0 8px 24px #b14bf433;
  display:flex;
  height:64px;
  justify-content:center;
  margin:0 auto 20px;
  width:64px
  }
  
  .about-value-icon svg {
  color:#fff;
  height:28px;
  width:28px
  }
  
  .about-value-card h3 {
  color:var(--text-primary);
  font-size:20px;
  font-weight:700;
  margin-bottom:12px
  }
  
  .about-value-card p {
  color:var(--text-secondary);
  font-size:14px;
  line-height:1.65
  }
  
  .about-timeline-container {
  margin:0 auto;
  max-width:900px;
  padding:20px 0;
  position:relative
  }
  
  .about-timeline-line {
  background:linear-gradient(to bottom,#fa5560,#b14bf4,#4d91ff);
  border-radius:3px;
  bottom:0;
  left:50%;
  opacity:.4;
  position:absolute;
  top:0;
  transform:translateX(-50%);
  width:3px
  }
  
  .about-timeline-item {
  align-items:flex-start;
  display:flex;
  margin-bottom:48px;
  position:relative
  }
  
  .about-timeline-item:last-child {
  margin-bottom:0
  }
  
  .about-timeline-item:nth-child(odd) {
  flex-direction:row;
  padding-right:calc(50% + 40px)
  }
  
  .about-timeline-item:nth-child(even) {
  flex-direction:row-reverse;
  padding-left:calc(50% + 40px)
  }
  
  .about-timeline-dot {
  background:linear-gradient(135deg,#fa5560,#b14bf4,#4d91ff);
  border-radius:50%;
  box-shadow:0 0 20px #b14bf480;
  height:18px;
  left:50%;
  position:absolute;
  top:24px;
  transform:translateX(-50%);
  width:18px;
  z-index:2
  }
  
  .about-timeline-dot::after {
  background:var(--color-primary-dark);
  border-radius:50%;
  content:'';
  height:8px;
  left:50%;
  position:absolute;
  top:50%;
  transform:translate(-50%,-50%);
  width:8px
  }
  
  .about-timeline-card {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(to bottom,var(--border-subtle),var(--border-subtle)) border-box;
  border:1px solid transparent;
  border-radius:20px;
  padding:28px 24px;
  transition:all .4s cubic-bezier(0.4,0,0.2,1);
  width:100%
  }
  
  .about-timeline-card:hover {
  box-shadow:0 12px 32px #0000004d;
  transform:translateY(-4px)
  }
  
  .about-timeline-year {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560 -23.47%,#b14bf4 45.52%,#4d91ff 114.8%);
  background-clip:text;
  font-size:32px;
  font-weight:800;
  letter-spacing:-.02em;
  margin-bottom:8px
  }
  
  .about-timeline-card h4 {
  color:var(--text-primary);
  font-size:18px;
  font-weight:700;
  margin-bottom:8px
  }
  
  .about-timeline-card p {
  color:var(--text-secondary);
  font-size:14px;
  line-height:1.6
  }
  
  .about-map-shell {
  background:linear-gradient(135deg,#fa556080,#b14bf459,#4d91ff73);
  border-radius:32px;
  margin-bottom:32px;
  padding:2px
  }
  
  .about-map-panel {
  align-items:center;
  background:#070b19eb;
  border-radius:30px;
  display:flex;
  justify-content:center;
  min-height:380px;
  overflow:hidden;
  padding:32px;
  position:relative
  }
  
  .about-map-grid {
  background-image:linear-gradient(var(--border-subtle) 1px,transparent 1px),linear-gradient(90deg,var(--border-subtle) 1px,transparent 1px);
  background-size:80px 80px;
  inset:0;
  opacity:.3;
  pointer-events:none;
  position:absolute
  }
  
  .about-badge span,.about-hero h1 .about-gradient-text,.about-section-header h2 .about-gradient-text,.about-mission h2 .about-gradient-text {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560 -23.47%,#b14bf4 45.52%,#4d91ff 114.8%);
  background-clip:text
  }
  
  .about-values,.about-timeline,.about-locations {
  margin-bottom:100px
  }
  
  @keyframes about-pulse {
  0%,100% {
  opacity:.3
  }
  
  50% {
  opacity:1
  }
  }
  
  .about-pin-pulse .pin-outer {
  animation:about-pulse 1.2s ease-in-out infinite
  }
  
  .about-locations-grid {
  display:grid;
  gap:24px;
  grid-template-columns:repeat(2,1fr)
  }
  
  .about-location-card {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(to bottom,var(--border-subtle),var(--border-subtle)) border-box;
  border:1px solid transparent;
  border-radius:24px;
  cursor:pointer;
  padding:36px;
  text-align:center;
  transition:all .4s cubic-bezier(0.4,0,0.2,1)
  }
  
  .about-location-card:hover {
  box-shadow:0 16px 40px #0000004d;
  transform:translateY(-6px)
  }
  
  .about-location-icon {
  align-items:center;
  background:linear-gradient(135deg,#fa5560 0%,#b14bf4 50%,#4d91ff 100%);
  border-radius:50%;
  box-shadow:0 8px 24px #b14bf433;
  display:flex;
  height:64px;
  justify-content:center;
  margin:0 auto 16px;
  width:64px
  }
  
  .about-location-icon svg {
  color:#fff
  }
  
  .about-location-card h4 {
  color:var(--text-primary);
  font-size:22px;
  font-weight:700;
  margin-bottom:6px
  }
  
  .about-location-card .about-location-role {
  color:var(--text-muted);
  font-size:14px;
  margin-bottom:12px
  }
  
  .about-location-card .about-location-detail {
  color:var(--text-muted);
  font-size:13px;
  line-height:1.5
  }
  
  .about-partners {
  margin-bottom:40px
  }
  
  .about-partners-grid {
  display:grid;
  gap:20px;
  grid-template-columns:repeat(4,1fr);
  margin:0 auto;
  max-width:1000px
  }
  
  .about-partner-card {
  align-items:center;
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(to bottom,var(--border-subtle),var(--border-subtle)) border-box;
  border:1px solid transparent;
  border-radius:24px;
  display:flex;
  justify-content:center;
  min-height:100px;
  padding:28px;
  transition:all .4s cubic-bezier(0.4,0,0.2,1)
  }
  
  .about-partner-card:hover {
  background:linear-gradient(var(--color-primary-light),var(--color-primary-light)) padding-box,linear-gradient(to bottom,#ffffff24,var(--border-subtle)) border-box;
  box-shadow:0 16px 40px #b14bf41f;
  transform:translateY(-6px)
  }
  
  .about-partner-card img {
  filter:brightness(0) invert(1);
  height:auto;
  max-height:50px;
  max-width:140px;
  opacity:.7;
  transition:all .3s ease;
  width:auto
  }
  
  .about-partner-card:hover img {
  opacity:1
  }
  
  .about-fade-in {
  opacity:0;
  transform:translateY(30px);
  transition:opacity .7s ease,transform .7s ease
  }
  
  .about-fade-item {
  opacity:0;
  transform:translateY(20px);
  transition:opacity .5s ease,transform .5s ease;
  transition-delay:calc(var(--delay,0) * 0.1s)
  }
  
  .about-fade-in.visible,.about-fade-in.visible .about-fade-item {
  opacity:1;
  transform:translateY(0)
  }
  
  @media (max-width: 1024px) {
  .about-values-grid {
  grid-template-columns:repeat(2,1fr)
  }
  
  .about-values-bottom {
  grid-template-columns:1fr;
  max-width:400px
  }
  
  .about-partners-grid {
  grid-template-columns:repeat(3,1fr)
  }
  
  .about-hero h1,.about-mission h2,.about-section-header h2 {
  font-size:40px
  }
  }
  
  @media (max-width: 768px) {
  .about-hero {
  min-height:auto;
  padding:120px 20px 40px
  }
  
  .about-hero h1 {
  font-size:30px
  }
  
  .about-hero-desc {
  font-size:16px
  }
  
  .about-hero-stats {
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  gap:10px;
  justify-content:center
  }

  .about-stat-pill {
  font-size:12px;
  padding:8px 12px;
  white-space:nowrap
  }

  .about-stat-pill:last-child {
  display:none
  }

  .about-mission-vision {
  grid-template-columns:1fr;
  margin-bottom:80px
  }
  
  .about-mission h2,.about-section-header h2 {
  font-size:32px
  }
  
  .about-values,.about-timeline,.about-locations,.about-partners {
  margin-bottom:80px
  }
  
  .about-timeline-item:nth-child(odd),.about-timeline-item:nth-child(even) {
  flex-direction:row;
  padding-left:56px;
  padding-right:0
  }
  
  .about-map-shell {
  display:none
  }
  
  .about-partners-grid {
  grid-template-columns:repeat(2,1fr)
  }
  
  .about-partner-card {
  padding:20px
  }
  
  .about-partner-card img {
  height:40px;
  max-width:100%;
  object-fit:contain;
  width:100%
  }
  
  .about-values-grid,.about-values-bottom,.about-locations-grid {
  grid-template-columns:1fr
  }
  
  .about-timeline-line,.about-timeline-dot {
  left:20px
  }
  }
  
  @media (max-width: 480px) {
  .about-hero h1 {
  font-size:24px
  }
  
  .about-mission h2,.about-section-header h2 {
  font-size:28px
  }
  
  .about-timeline-card {
  padding:20px 16px
  }
  
  .about-timeline-year {
  font-size:26px
  }
  }
  
  .aup-section {
  margin-top:-80px;
  overflow:hidden;
  padding-bottom:50px;
  position:relative
  }
  
  
  .aup-hero {
  background:linear-gradient(180deg,var(--color-background) 0%,var(--color-background) 50%,var(--color-background) 100%);
  margin-bottom:60px;
  padding:160px 0 32px;
  position:relative;
  text-align:center
  }
  
  .aup-hero-glow {
  border-radius:50%;
  pointer-events:none;
  position:absolute;
  z-index:0
  }
  
  .aup-hero-glow--pink {
  background:#fa55601f;
  filter:blur(120px);
  height:500px;
  left:-100px;
  top:-200px;
  width:500px
  }
  
  .aup-hero-glow--purple {
  background:#b14bf41a;
  filter:blur(140px);
  height:600px;
  right:-150px;
  top:-150px;
  width:600px
  }
  
  .aup-hero-glow--blue {
  background:#4d91ff0f;
  bottom:-350px;
  filter:blur(160px);
  height:700px;
  left:50%;
  transform:translateX(-50%);
  width:700px
  }
  
  .aup-hero > :not(.aup-hero-glow) {
  position:relative;
  z-index:1
  }
  
  .aup-hero h1 {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  background-clip:text;
  display:inline-block;
  font-size:48px;
  font-weight:800;
  margin-bottom:16px
  }
  
  .aup-hero p {
  color:var(--text-secondary);
  font-size:18px;
  line-height:1.6;
  margin:0 auto;
  max-width:700px
  }
  
  .aup-container {
  margin:0 auto;
  max-width:1200px;
  padding:0 24px;
  position:relative;
  z-index:1
  }
  
  .aup-content {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(to bottom,#ffffff24,var(--border-subtle)) border-box;
  border:2px solid transparent;
  border-radius:24px;
  margin-bottom:32px;
  padding:48px
  }
  
  .aup-content h2 {
  border-bottom:2px solid var(--border-subtle);
  color:var(--text-primary);
  font-size:24px;
  font-weight:700;
  margin-bottom:20px;
  margin-top:40px;
  padding-bottom:12px
  }
  
  .aup-content h2:first-child {
  margin-top:0
  }
  
  .aup-content p {
  color:var(--text-primary);
  font-size:16px;
  line-height:1.8;
  margin-bottom:16px
  }
  
  .aup-content ul {
  margin:16px 0 24px 24px
  }
  
  .aup-content li {
  color:var(--text-primary);
  line-height:1.8;
  margin-bottom:8px
  }
  
  .aup-content li::marker {
  color:#c66bd5
  }
  
  .allowed-box {
  background:linear-gradient(175deg,#22c55e26 -94.09%,#22c55e0d 154.53%);
  border:1px solid #22c55e4d;
  border-radius:16px;
  margin:24px 0;
  padding:28px
  }
  
  .allowed-box h3 {
  align-items:center;
  color:#22c55e;
  display:flex;
  font-size:18px;
  font-weight:700;
  gap:12px;
  margin-bottom:16px
  }
  
  .allowed-box li::marker {
  color:#22c55e
  }
  
  .prohibited-box {
  background:linear-gradient(175deg,#fa556026 -94.09%,#fa55600d 154.53%);
  border:1px solid #fa55604d;
  border-radius:16px;
  margin:24px 0;
  padding:28px
  }
  
  .prohibited-box h3 {
  align-items:center;
  color:#fa5560;
  display:flex;
  font-size:18px;
  font-weight:700;
  gap:12px;
  margin-bottom:16px
  }
  
  .aup-section .warning-box {
  background:linear-gradient(175deg,#fa556026 -94.09%,#fa55600d 154.53%);
  border-left:4px solid #fa5560;
  border-radius:8px;
  margin:24px 0;
  padding:24px
  }
  
  .aup-section .warning-box p {
  color:var(--text-primary);
  margin-bottom:0
  }
  
  .aup-section .info-box {
  background:linear-gradient(175deg,#4d91ff26 -94.09%,#4d91ff0d 154.53%);
  border-left:4px solid #4d91ff;
  border-radius:8px;
  margin:24px 0;
  padding:24px
  }
  
  .aup-section .info-box p {
  margin-bottom:0
  }
  
  .aup-section .info-box strong {
  color:#4d91ff
  }
  
  .consequences-grid {
  display:grid;
  gap:20px;
  grid-template-columns:repeat(3,1fr);
  margin:32px 0
  }
  
  .consequence-card {
  background:linear-gradient(175deg,var(--border-subtle) -94.09%,var(--border-subtle) 154.53%);
  border:1px solid var(--border-subtle);
  border-radius:16px;
  padding:24px;
  text-align:center
  }
  
  .consequence-card .level {
  font-size:12px;
  font-weight:600;
  letter-spacing:.5px;
  margin-bottom:8px;
  text-transform:uppercase
  }
  
  .consequence-card.minor .level {
  color:#fbbf24
  }
  
  .consequence-card.major .level {
  color:#f97316
  }
  
  .consequence-card h3 {
  color:var(--text-primary);
  font-size:16px;
  font-weight:600;
  margin-bottom:8px
  }
  
  .consequence-card p {
  color:var(--text-secondary);
  font-size:14px;
  line-height:1.5;
  margin:0
  }
  
  .aup-section .update-notice {
  background:linear-gradient(175deg,var(--border-subtle) -94.09%,#ffffff05 154.53%);
  border-radius:12px;
  margin-top:32px;
  padding:24px;
  text-align:center
  }
  
  .aup-section .update-notice p {
  color:var(--text-secondary);
  font-size:14px;
  margin:0
  }
  
  .aup-section .update-notice strong {
  color:var(--text-primary)
  }
  
  .allowed-box h3 svg,.prohibited-box h3 svg {
  flex-shrink:0
  }
  
  .allowed-box ul,.prohibited-box ul {
  margin:0;
  padding-left:24px
  }
  
  .allowed-box li,.prohibited-box li {
  color:var(--text-primary);
  margin-bottom:8px
  }
  
  .prohibited-box li::marker,.aup-section .warning-box strong,.consequence-card.severe .level {
  color:#fa5560
  }
  
  @media (max-width: 768px) {
  .aup-hero h1 {
  font-size:36px
  }
  
  .aup-content {
  padding:32px 24px
  }
  
  .consequences-grid {
  grid-template-columns:1fr
  }
  
  .allowed-box,.prohibited-box {
  padding:20px
  }
  }
  
  .advertising-section {
  margin-top:-80px;
  padding:0 0 50px
  }
  
  .advertising-hero {
  margin-bottom:60px;
  padding-top:160px;
  text-align:center
  }
  
  .advertising-hero h1 {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  background-clip:text;
  display:inline-block;
  font-size:48px;
  font-weight:800;
  margin-bottom:16px
  }
  
  .advertising-hero p {
  color:var(--text-secondary);
  font-size:18px;
  line-height:1.8;
  margin:0 auto;
  max-width:700px
  }
  
  .advertising-container {
  margin:0 auto;
  max-width:1200px;
  padding:0 24px
  }
  
  .ad-overview {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%) border-box;
  border:2px solid transparent;
  border-radius:24px;
  margin-bottom:40px;
  padding:48px
  }
  
  .ad-overview h2 {
  color:var(--text-primary);
  font-size:28px;
  font-weight:700;
  margin-bottom:20px
  }
  
  .ad-overview p {
  color:var(--text-primary);
  font-size:16px;
  line-height:1.8;
  margin-bottom:16px
  }
  
  .stats-grid {
  display:grid;
  gap:24px;
  grid-template-columns:repeat(3,1fr);
  margin-bottom:40px
  }
  
  .stat-card {
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  border-radius:16px;
  color:var(--text-primary);
  padding:32px;
  text-align:center
  }
  
  .stat-number {
  font-size:48px;
  font-weight:800;
  line-height:1;
  margin-bottom:8px
  }
  
  .stat-label {
  font-size:16px;
  opacity:.9
  }
  
  .features-section {
  margin-bottom:40px
  }
  
  .features-grid {
  display:grid;
  gap:24px;
  grid-template-columns:repeat(4,1fr)
  }
  
  .feature-card {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(to bottom,#ffffff24,var(--border-subtle)) border-box;
  border:2px solid transparent;
  border-radius:16px;
  padding:32px;
  transition:all .3s ease
  }
  
  .feature-card:hover {
  background:linear-gradient(var(--color-primary-light),var(--color-primary-light)) padding-box,linear-gradient(to bottom,#ffffff2e,#ffffff1f) border-box;
  transform:translateY(-5px)
  }
  
  .feature-icon {
  align-items:center;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  border-radius:12px;
  display:flex;
  height:60px;
  justify-content:center;
  margin-bottom:20px;
  width:60px
  }
  
  .feature-card h3 {
  color:var(--text-primary);
  font-size:20px;
  font-weight:700;
  margin-bottom:12px
  }
  
  .feature-card p {
  color:var(--text-secondary);
  font-size:15px;
  line-height:1.6
  }
  
  .ad-formats {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(to bottom,#ffffff24,var(--border-subtle)) border-box;
  border:2px solid transparent;
  border-radius:24px;
  margin-bottom:40px;
  padding:48px
  }
  
  .formats-list {
  margin:0 auto;
  max-width:800px
  }
  
  .format-item {
  align-items:center;
  background:linear-gradient(175deg,var(--border-subtle) -94.09%,var(--border-subtle) 154.53%);
  border-radius:12px;
  display:flex;
  gap:24px;
  margin-bottom:16px;
  padding:24px 28px;
  transition:all .3s ease
  }
  
  .format-item:hover {
  background:linear-gradient(175deg,#ffffff1f -94.09%,var(--border-subtle) 154.53%);
  transform:translateX(5px)
  }
  
  .format-icon {
  align-items:center;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  border-radius:10px;
  display:flex;
  flex-shrink:0;
  height:50px;
  justify-content:center;
  width:50px
  }
  
  .format-content {
  flex:1
  }
  
  .format-content h4 {
  color:var(--text-primary);
  font-size:18px;
  font-weight:700;
  margin-bottom:4px
  }
  
  .format-content p {
  color:var(--text-secondary);
  font-size:15px
  }
  
  .advertising-section .cta-section {
  background:linear-gradient(175deg,var(--border-subtle) -94.09%,var(--border-subtle) 154.53%);
  border:1px solid var(--border-subtle);
  border-radius:20px;
  padding:60px 48px;
  text-align:center
  }
  
  .advertising-section .cta-section h2 {
  font-size:32px;
  font-weight:800;
  margin-bottom:16px
  }
  
  .advertising-section .cta-section p {
  color:var(--text-secondary);
  font-size:18px;
  margin-bottom:32px;
  margin-left:auto;
  margin-right:auto;
  max-width:600px
  }
  
  .contact-btn {
  align-items:center;
  background:linear-gradient(rgba(30,30,50,0.6),rgba(30,30,50,0.6)) padding-box,linear-gradient(81.02deg,#fd941366,#ff69b4aa,#b14bf4cc,#ac65cbaa,#3aafd388) border-box;
  border:1px solid transparent;
  border-radius:14px;
  backdrop-filter:blur(12px) saturate(180%);
  -webkit-backdrop-filter:blur(12px) saturate(180%);
  color:#fff;
  display:inline-flex;
  font-size:18px;
  font-weight:700;
  gap:10px;
  overflow:hidden;
  padding:18px 40px;
  text-decoration:none;
  transition:all .4s ease;
  box-shadow:0 0 20px rgba(255,255,255,0.05),0 6px 24px rgba(0,0,0,0.2),inset 0 1px 1px rgba(255,255,255,0.15),inset 0 -1px 1px rgba(0,0,0,0.3)
  }

  .contact-btn:hover {
  filter:brightness(1.05);
  box-shadow:0 0 30px rgba(177,75,244,0.35),0 0 60px rgba(177,75,244,0.15),0 12px 32px rgba(0,0,0,0.4);
  color:#fff;
  text-decoration:none
  }
  
  .features-section h2,.ad-formats h2 {
  color:var(--text-primary);
  font-size:28px;
  font-weight:700;
  margin-bottom:32px;
  text-align:center
  }
  
  .feature-icon svg,.format-icon svg {
  color:#fff
  }
  
  @media (max-width: 1024px) {
  .features-grid {
  grid-template-columns:repeat(2,1fr)
  }
  }
  
  @media (max-width: 768px) {
  .advertising-hero h1 {
  font-size:36px
  }
  
  .advertising-hero p {
  font-size:16px
  }
  
  .ad-overview,.ad-formats,.advertising-section .cta-section {
  padding:32px 24px
  }
  
  .stat-number {
  font-size:40px
  }
  
  .format-item {
  flex-direction:column;
  text-align:center
  }
  
  .advertising-section .cta-section h2 {
  font-size:24px
  }
  
  .stats-grid,.features-grid {
  grid-template-columns:1fr
  }
  }
  
  .affiliates-section {
  margin-top:-80px;
  overflow:hidden;
  padding-bottom:50px;
  position:relative
  }

  .affiliates-hero {
  align-items:center;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:70vh;
  padding:160px 24px 120px;
  position:relative;
  text-align:center
  }

  .affiliates-hero::after {
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:200px;
  background:linear-gradient(to bottom,transparent,var(--color-background));
  pointer-events:none;
  z-index:0
  }

  .affiliates-hero-glow {
  border-radius:50%;
  filter:blur(120px);
  pointer-events:none;
  position:absolute;
  z-index:0
  }

  .affiliates-hero-glow--pink {
  background:#fa556026;
  height:500px;
  left:-100px;
  top:-100px;
  width:500px
  }

  .affiliates-hero-glow--purple {
  background:#b14bf41f;
  height:600px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:600px
  }

  .affiliates-hero-glow--blue {
  background:#4d91ff26;
  bottom:-100px;
  height:500px;
  right:-100px;
  width:500px
  }

  .affiliates-hero-content {
  max-width:800px;
  position:relative;
  z-index:1
  }

  .affiliates-badge {
  background:linear-gradient(81.02deg,#fa55601f -23.47%,#b14bf41f 45.52%,#4d91ff1f 114.8%);
  border:1px solid #b14bf440;
  border-radius:100px;
  display:inline-block;
  font-size:13px;
  font-weight:700;
  letter-spacing:1.5px;
  margin-bottom:24px;
  padding:6px 20px;
  text-transform:uppercase
  }

  .affiliates-badge span {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  background-clip:text
  }

  .affiliates-hero h1 {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  background-clip:text;
  font-size:52px;
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.1;
  margin-bottom:20px
  }

  .affiliates-hero-desc {
  color:var(--text-secondary);
  font-size:18px;
  line-height:1.7;
  margin:0 auto 40px;
  max-width:600px
  }

  .affiliates-hero-stats {
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  justify-content:center
  }

  .affiliates-stat-pill {
  align-items:center;
  background:linear-gradient(#1e1e32cc,#1e1e32cc) padding-box,linear-gradient(to right,#fd941366,#ff69b4aa,#b14bf4cc,#ac65cbaa,#3aafd388) border-box;
  border:1px solid transparent;
  border-radius:100px;
  color:var(--text-secondary);
  display:flex;
  font-size:14px;
  font-weight:600;
  gap:8px;
  padding:10px 24px
  }

  .affiliates-stat-pill svg {
  height:16px;
  opacity:.7;
  width:16px
  }

  .affiliates-container {
  margin:0 auto;
  max-width:1200px;
  padding:0 24px;
  position:relative;
  z-index:1
  }

  .affiliates-section-header {
  margin-bottom:48px;
  text-align:center
  }

  .affiliates-section-header h2 {
  color:var(--text-primary);
  font-size:32px;
  font-weight:700
  }

  .affiliates-fade-in {
  opacity:0;
  transform:translateY(30px);
  transition:opacity .6s ease,transform .6s ease
  }

  .affiliates-fade-in.visible {
  opacity:1;
  transform:translateY(0)
  }
  
  /* --- Commission Showcase --- */
  .commission-split {
  align-items:center;
  display:flex;
  gap:60px;
  margin-bottom:120px;
  padding:60px 0
  }

  .commission-split-text {
  flex:0 0 42%
  }

  .commission-split-text h2 {
  color:var(--text-primary);
  font-size:32px;
  font-weight:700;
  margin-bottom:16px
  }

  .commission-split-rate {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  background-clip:text;
  font-size:112px;
  font-weight:900;
  letter-spacing:-.04em;
  line-height:1;
  margin-bottom:24px
  }

  .commission-split-desc {
  color:var(--text-secondary);
  font-size:17px;
  line-height:1.7
  }

  .commission-split-visual {
  flex:1;
  min-height:480px;
  position:relative
  }

  .commission-ring {
  border:1.5px dashed var(--border-subtle);
  border-radius:50%;
  pointer-events:none;
  position:absolute
  }

  .commission-ring--lg {
  animation:cfcRingSpin 90s linear infinite;
  height:400px;
  right:-40px;
  top:50%;
  transform:translateY(-50%);
  width:400px
  }

  .commission-ring--sm {
  animation:cfcRingSpin 60s linear infinite reverse;
  height:250px;
  right:35px;
  top:50%;
  transform:translateY(-50%);
  width:250px
  }

  .commission-fcard {
  --cfc-accent:#b14bf4;
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(to bottom right,var(--cfc-accent) 0%,var(--border-subtle) 60%) border-box;
  border:1px solid transparent;
  border-radius:16px;
  box-shadow:0 8px 32px #0004;
  opacity:0;
  padding:20px 24px;
  position:absolute;
  transform:translateY(30px);
  width:270px;
  z-index:1
  }

  .commission-split.visible .commission-fcard {
  animation:cfcSlideIn .6s cubic-bezier(.4,0,.2,1) backwards;
  opacity:1;
  transform:translateY(0);
  transition:transform .3s ease,box-shadow .3s ease
  }

  .commission-split.visible .cfc--1 { animation-delay:0s }
  .commission-split.visible .cfc--2 { animation-delay:.12s }
  .commission-split.visible .cfc--3 { animation-delay:.24s }
  .commission-split.visible .cfc--4 { animation-delay:.36s }

  .commission-fcard:hover {
  box-shadow:0 16px 40px #0006;
  transform:translateY(-4px);
  z-index:2
  }

  .cfc--1 { left:0; top:0 }
  .cfc--2 { left:140px; top:120px }
  .cfc--3 { left:20px; top:240px }
  .cfc--4 { left:160px; top:360px }

  .commission-fcard[data-theme="pink"] { --cfc-accent:#fa5560 }
  .commission-fcard[data-theme="purple"] { --cfc-accent:#b14bf4 }
  .commission-fcard[data-theme="blue"] { --cfc-accent:#4d91ff }
  .commission-fcard[data-theme="teal"] { --cfc-accent:#2fd1b2 }

  .cfc-top {
  align-items:center;
  display:flex;
  gap:14px;
  margin-bottom:14px
  }

  .cfc-icon {
  align-items:center;
  background:linear-gradient(135deg,var(--cfc-accent),#b14bf4cc);
  border-radius:50%;
  box-shadow:0 4px 12px #0003;
  display:flex;
  flex-shrink:0;
  height:42px;
  justify-content:center;
  width:42px
  }

  .cfc-icon svg {
  color:#fff;
  height:20px;
  width:20px
  }

  .cfc-title {
  color:var(--text-primary);
  font-size:16px;
  font-weight:700
  }

  .cfc-label {
  color:var(--text-muted);
  font-size:13px
  }

  .cfc-decor {
  margin-top:2px
  }

  .cfc-bar {
  background:var(--border-subtle);
  border-radius:4px;
  height:6px;
  overflow:hidden;
  width:100%
  }

  .cfc-bar span {
  background:linear-gradient(to right,var(--cfc-accent),#b14bf4);
  border-radius:4px;
  display:block;
  height:100%;
  transform:scaleX(0);
  transform-origin:left;
  width:65%
  }

  .commission-split.visible .cfc-bar span {
  animation:cfcScaleX .8s cubic-bezier(.4,0,.2,1) .5s forwards
  }

  .cfc-dashes {
  align-items:center;
  display:flex;
  gap:6px
  }

  .cfc-dashes span {
  background:var(--border-subtle);
  border-radius:3px;
  display:block;
  flex:1;
  height:4px;
  transform:scaleX(0);
  transform-origin:left
  }

  .commission-split.visible .cfc-dashes span {
  animation:cfcScaleX .35s cubic-bezier(.4,0,.2,1) forwards
  }

  .commission-split.visible .cfc-dashes span:nth-child(1) { animation-delay:.55s }
  .commission-split.visible .cfc-dashes span:nth-child(2) { animation-delay:.65s }
  .commission-split.visible .cfc-dashes span:nth-child(3) { animation-delay:.75s }
  .commission-split.visible .cfc-dashes span:nth-child(4) { animation-delay:.85s }
  .commission-split.visible .cfc-dashes span:nth-child(5) { animation-delay:.95s }

  .cfc-dashes span:last-child {
  background:var(--cfc-accent)
  }

  .cfc-blocks {
  display:flex;
  gap:6px
  }

  .cfc-blocks span {
  background:linear-gradient(135deg,var(--cfc-accent),#b14bf4aa);
  border-radius:6px;
  display:block;
  flex:1;
  height:28px;
  transform:scale(0);
  transform-origin:bottom
  }

  .commission-split.visible .cfc-blocks span {
  animation:cfcPop .35s cubic-bezier(.34,1.56,.64,1) forwards
  }

  .commission-split.visible .cfc-blocks span:nth-child(1) { animation-delay:.7s }
  .commission-split.visible .cfc-blocks span:nth-child(2) { animation-delay:.8s }
  .commission-split.visible .cfc-blocks span:nth-child(3) { animation-delay:.9s }
  .commission-split.visible .cfc-blocks span:nth-child(4) { animation-delay:1s }

  .cfc-chart {
  align-items:flex-end;
  display:flex;
  gap:6px;
  height:36px
  }

  .cfc-chart span {
  background:linear-gradient(to top,var(--cfc-accent),#b14bf4aa);
  border-radius:4px 4px 0 0;
  display:block;
  flex:1;
  transform:scaleY(0);
  transform-origin:bottom
  }

  .cfc-chart span:nth-child(1) { height:40% }
  .cfc-chart span:nth-child(2) { height:55% }
  .cfc-chart span:nth-child(3) { height:75% }
  .cfc-chart span:nth-child(4) { height:100% }

  .commission-split.visible .cfc-chart span {
  animation:cfcScaleY .5s cubic-bezier(.4,0,.2,1) forwards
  }

  .commission-split.visible .cfc-chart span:nth-child(1) { animation-delay:.85s }
  .commission-split.visible .cfc-chart span:nth-child(2) { animation-delay:.95s }
  .commission-split.visible .cfc-chart span:nth-child(3) { animation-delay:1.05s }
  .commission-split.visible .cfc-chart span:nth-child(4) { animation-delay:1.15s }

  @keyframes cfcSlideIn {
  from { opacity:0; transform:translateY(30px) }
  }

  @keyframes cfcScaleX {
  to { transform:scaleX(1) }
  }

  @keyframes cfcScaleY {
  to { transform:scaleY(1) }
  }

  @keyframes cfcPop {
  to { transform:scale(1) }
  }

  @keyframes cfcRingSpin {
  to { transform:translateY(-50%) rotate(360deg) }
  }
  
  .section-title {
  color:var(--text-primary);
  font-size:32px;
  font-weight:700;
  margin-bottom:48px;
  text-align:center
  }
  
  .how-it-works {
  display:grid;
  gap:32px;
  grid-template-columns:repeat(3,1fr);
  margin-bottom:64px
  }
  
  .step-card {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(to bottom,#ffffff24,var(--border-subtle)) border-box;
  border:2px solid transparent;
  border-radius:20px;
  padding:40px 32px;
  position:relative;
  text-align:center;
  transition:all .3s ease
  }
  
  .step-card:hover {
  background:linear-gradient(var(--color-primary-light),var(--color-primary-light)) padding-box,linear-gradient(81.02deg,#fa556080 -23.47%,#b14bf480 45.52%,#4d91ff80 114.8%) border-box;
  transform:translateY(-4px)
  }
  
  .step-number {
  align-items:center;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  border-radius:50%;
  color:#fff;
  display:flex;
  font-size:20px;
  font-weight:700;
  height:48px;
  justify-content:center;
  margin:0 auto 24px;
  width:48px
  }
  
  .step-card h3 {
  color:var(--text-primary);
  font-size:20px;
  font-weight:700;
  margin-bottom:12px
  }
  
  .step-card p {
  color:var(--text-secondary);
  font-size:15px;
  line-height:1.6
  }
  
  .benefits-grid {
  display:grid;
  gap:24px;
  grid-template-columns:repeat(2,1fr);
  margin-bottom:64px
  }
  
  .benefit-card {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(to bottom,#ffffff24,var(--border-subtle)) border-box;
  border:2px solid transparent;
  border-radius:16px;
  display:flex;
  gap:20px;
  padding:32px;
  transition:all .3s ease
  }
  
  .benefit-icon {
  align-items:center;
  background:linear-gradient(135deg,#4d91ff33 0%,#b14bf433 100%);
  border-radius:12px;
  display:flex;
  height:48px;
  justify-content:center;
  min-width:48px;
  width:48px
  }
  
  .benefit-icon svg {
  color:#4d91ff
  }
  
  .benefit-content h3 {
  color:var(--text-primary);
  font-size:18px;
  font-weight:700;
  margin-bottom:8px
  }
  
  .tiers-container {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%) border-box;
  border:2px solid transparent;
  border-radius:24px;
  margin-bottom:64px;
  padding:48px
  }
  
  .tiers-container h2 {
  color:var(--text-primary);
  font-size:28px;
  font-weight:700;
  margin-bottom:32px;
  text-align:center
  }
  
  .tiers-grid {
  display:grid;
  gap:24px;
  grid-template-columns:repeat(3,1fr)
  }
  
  .tier-card {
  background:linear-gradient(175deg,var(--border-subtle) -94.09%,var(--border-subtle) 154.53%);
  border:1px solid var(--border-subtle);
  border-radius:16px;
  padding:32px;
  text-align:center;
  transition:all .3s ease
  }
  
  .tier-card:hover {
  background:linear-gradient(175deg,#ffffff1f -94.09%,var(--border-subtle) 154.53%);
  border-color:#b14bf480
  }
  
  .tier-card.featured {
  background:linear-gradient(175deg,#b14bf426 -94.09%,#b14bf40d 154.53%);
  border-color:#b14bf4;
  transform:scale(1.05)
  }
  
  .tier-badge {
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  border-radius:20px;
  color:#fff;
  display:inline-block;
  font-size:12px;
  font-weight:700;
  letter-spacing:.5px;
  margin-bottom:16px;
  padding:6px 16px;
  text-transform:uppercase
  }
  
  .tier-name {
  color:var(--text-primary);
  font-size:20px;
  font-weight:700;
  margin-bottom:8px
  }
  
  .tier-sales {
  color:var(--text-muted);
  font-size:14px;
  margin-bottom:20px
  }
  
  .tier-rate {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  background-clip:text;
  font-size:48px;
  font-weight:800;
  margin-bottom:8px
  }
  
  .tools-grid {
  display:grid;
  gap:20px;
  grid-template-columns:repeat(4,1fr);
  margin-bottom:64px
  }
  
  .tool-card {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(to bottom,#ffffff24,var(--border-subtle)) border-box;
  border:2px solid transparent;
  border-radius:16px;
  padding:28px 20px;
  text-align:center;
  transition:all .3s ease
  }
  
  .tool-card svg {
  color:#b14bf4;
  margin-bottom:16px
  }
  
  .tool-card h3 {
  color:var(--text-primary);
  font-size:16px;
  font-weight:700;
  margin-bottom:8px
  }
  
  .tool-card p {
  color:var(--text-secondary);
  font-size:13px;
  line-height:1.5
  }

  /* --- Affiliates: Themed Step Cards --- */
  .step-card[data-theme] {
  --step-accent:#b14bf4;
  --step-accent-soft:#b14bf41a
  }

  .step-card[data-theme="pink"] { --step-accent:#fa5560; --step-accent-soft:#fa55601a }
  .step-card[data-theme="violet"] { --step-accent:#b14bf4; --step-accent-soft:#b14bf41a }
  .step-card[data-theme="blue"] { --step-accent:#4d91ff; --step-accent-soft:#4d91ff1a }

  .step-card[data-theme] .step-number {
  background:linear-gradient(135deg,var(--step-accent),#b14bf4cc);
  box-shadow:0 6px 20px color-mix(in srgb,var(--step-accent) 30%,transparent)
  }

  .step-card[data-theme]:hover {
  background:radial-gradient(circle at 50% 0%,var(--step-accent-soft),transparent 60%),linear-gradient(var(--color-primary-light),var(--color-primary-light)) padding-box,linear-gradient(81.02deg,#fa556080 -23.47%,#b14bf480 45.52%,#4d91ff80 114.8%) border-box
  }

  /* --- Affiliates: Themed Benefit Cards --- */
  .aff-benefits-grid {
  display:grid;
  gap:24px;
  grid-template-columns:repeat(3,1fr);
  margin-bottom:80px
  }

  .aff-benefit-card {
  --feature-accent:#b14bf4;
  --feature-accent-soft:#b14bf41a;
  background:radial-gradient(circle at 30% 30%,var(--feature-accent-soft),transparent 60%),linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(to bottom,var(--border-subtle),var(--border-subtle)) border-box;
  border:1px solid transparent;
  border-radius:24px;
  overflow:hidden;
  padding:36px 28px;
  position:relative;
  text-align:center;
  transition:all .4s cubic-bezier(0.4,0,0.2,1)
  }

  .aff-benefit-card[data-theme="pink"] { --feature-accent:#fa5560; --feature-accent-soft:#fa55601a }
  .aff-benefit-card[data-theme="blue"] { --feature-accent:#4d91ff; --feature-accent-soft:#4d91ff1a }
  .aff-benefit-card[data-theme="teal"] { --feature-accent:#2fd1b2; --feature-accent-soft:#2fd1b21a }
  .aff-benefit-card[data-theme="amber"] { --feature-accent:#ffb347; --feature-accent-soft:#ffb3471a }
  .aff-benefit-card[data-theme="violet"] { --feature-accent:#c66bd5; --feature-accent-soft:#c66bd51a }
  .aff-benefit-card[data-theme="indigo"] { --feature-accent:#6366f1; --feature-accent-soft:#6366f11a }

  .aff-benefit-card:hover {
  box-shadow:0 20px 40px #0000004d;
  transform:translateY(-8px)
  }

  .aff-benefit-icon {
  align-items:center;
  background:linear-gradient(135deg,var(--feature-accent,#fa5560),#b14bf4cc);
  border-radius:50%;
  box-shadow:0 8px 24px color-mix(in srgb,var(--feature-accent) 30%,transparent);
  display:flex;
  height:64px;
  justify-content:center;
  margin:0 auto 20px;
  width:64px
  }

  .aff-benefit-icon svg {
  color:#fff;
  height:28px;
  width:28px
  }

  .aff-benefit-card h3 {
  color:var(--text-primary);
  font-size:20px;
  font-weight:700;
  margin-bottom:12px
  }

  .aff-benefit-card p {
  color:var(--text-secondary);
  font-size:14px;
  line-height:1.65
  }

  /* --- Affiliates: Themed Tool Cards --- */
  .aff-tools-grid {
  display:grid;
  gap:20px;
  grid-template-columns:repeat(4,1fr);
  margin-bottom:80px
  }

  .aff-tool-card {
  --tool-accent:#b14bf4;
  --tool-accent-soft:#b14bf41a;
  background:radial-gradient(circle at 50% 20%,var(--tool-accent-soft),transparent 60%),linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(to bottom,var(--border-subtle),var(--border-subtle)) border-box;
  border:1px solid transparent;
  border-radius:20px;
  overflow:hidden;
  padding:32px 24px;
  position:relative;
  text-align:center;
  transition:all .4s cubic-bezier(0.4,0,0.2,1)
  }

  .aff-tool-card[data-theme="pink"] { --tool-accent:#fa5560; --tool-accent-soft:#fa55601a }
  .aff-tool-card[data-theme="blue"] { --tool-accent:#4d91ff; --tool-accent-soft:#4d91ff1a }
  .aff-tool-card[data-theme="teal"] { --tool-accent:#2fd1b2; --tool-accent-soft:#2fd1b21a }
  .aff-tool-card[data-theme="amber"] { --tool-accent:#ffb347; --tool-accent-soft:#ffb3471a }

  .aff-tool-card:hover {
  box-shadow:0 16px 32px #0000004d;
  transform:translateY(-6px)
  }

  .aff-tool-icon {
  align-items:center;
  background:linear-gradient(135deg,var(--tool-accent),#b14bf4cc);
  border-radius:50%;
  box-shadow:0 6px 16px color-mix(in srgb,var(--tool-accent) 25%,transparent);
  display:flex;
  height:56px;
  justify-content:center;
  margin:0 auto 16px;
  width:56px
  }

  .aff-tool-icon svg {
  color:#fff;
  height:26px;
  width:26px
  }

  .aff-tool-card h3 {
  color:var(--text-primary);
  font-size:17px;
  font-weight:700;
  margin-bottom:8px
  }

  .aff-tool-card p {
  color:var(--text-secondary);
  font-size:14px;
  line-height:1.5
  }

  .cta-section {
  background:linear-gradient(135deg,#fa55601a 0%,#b14bf41a 50%,#4d91ff1a 100%);
  border-radius:24px;
  overflow:hidden;
  padding:64px 48px;
  position:relative;
  text-align:center
  }
  
  .cta-section h2 {
  color:var(--text-primary);
  font-size:36px;
  font-weight:800;
  margin-bottom:16px
  }
  
  .cta-section p {
  color:var(--text-secondary);
  font-size:18px;
  line-height:1.6;
  margin:0 auto 32px;
  max-width:600px
  }
  
  .cta-btn {
  position:relative;
  align-items:center;
  background:linear-gradient(rgba(30,30,50,0.6),rgba(30,30,50,0.6)) padding-box,linear-gradient(81.02deg,#fd941366,#ff69b4aa,#b14bf4cc,#ac65cbaa,#3aafd388) border-box;
  border:1px solid transparent;
  border-radius:14px;
  backdrop-filter:blur(12px) saturate(180%);
  -webkit-backdrop-filter:blur(12px) saturate(180%);
  color:#fff;
  display:inline-flex;
  font-size:17px;
  font-weight:700;
  gap:10px;
  overflow:hidden;
  padding:18px 48px;
  text-decoration:none;
  transition:all .4s ease;
  box-shadow:0 0 20px rgba(255,255,255,0.05),0 6px 24px rgba(0,0,0,0.2),inset 0 1px 1px rgba(255,255,255,0.15),inset 0 -1px 1px rgba(0,0,0,0.3)
  }

  .cta-btn:hover {
  filter:brightness(1.05);
  box-shadow:0 0 30px rgba(177,75,244,0.35),0 0 60px rgba(177,75,244,0.15),0 12px 32px rgba(0,0,0,0.4);
  color:#fff;
  text-decoration:none
  }

  .cta-btn::before {
  content:'';
  position:absolute;
  top:0;
  left:15%;
  right:15%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.5),transparent);
  pointer-events:none;
  z-index:1
  }

  .cta-btn::after {
  content:'';
  position:absolute;
  top:0;
  left:-125%;
  width:60%;
  height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,0.25),transparent);
  transform:skewX(-25deg);
  transition:left .6s cubic-bezier(0.25,0.46,0.45,0.94);
  pointer-events:none;
  z-index:1
  }

  .cta-btn:hover::after {
  left:150%
  }

  .cta-btn:active {
  transform:scale(0.97)
  }

  .affiliates-faq {
  margin-top:64px
  }

  .faq-grid {
  display:grid;
  gap:24px;
  grid-template-columns:repeat(2,1fr)
  }

  .faq-grid .faq-item {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(to bottom,#ffffff24,var(--border-subtle)) border-box;
  border:2px solid transparent;
  border-radius:16px;
  padding:28px
  }

  .faq-grid .faq-item h3 {
  color:var(--text-primary);
  font-size:17px;
  font-weight:700;
  margin-bottom:12px
  }
  
  .cta-section::before {
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  border-radius:24px;
  content:'';
  inset:0;
  mask-composite:exclude;
  padding:2px;
  pointer-events:none;
  position:absolute
  }
  
  .benefit-card:hover,.tool-card:hover {
  background:linear-gradient(var(--color-primary-light),var(--color-primary-light)) padding-box,linear-gradient(to bottom,#ffffff2e,#ffffff1f) border-box;
  transform:translateY(-4px)
  }

  .tier-label {
  color:var(--text-secondary);
  font-size:14px
  }
  
  .benefit-content p,.faq-grid .faq-item p {
  color:var(--text-secondary);
  font-size:14px;
  line-height:1.6
  }
  
  @media (max-width: 1024px) {
  .tiers-grid {
  grid-template-columns:1fr
  }

  .tier-card.featured {
  transform:none
  }

  .tools-grid,.aff-tools-grid {
  grid-template-columns:repeat(2,1fr)
  }

  .aff-benefits-grid {
  grid-template-columns:repeat(2,1fr)
  }

  .commission-split {
  gap:40px;
  padding:40px 0
  }

  .commission-split-rate {
  font-size:88px
  }

  .commission-split-visual {
  min-height:440px
  }

  .commission-fcard {
  width:240px
  }

  .cfc--2 { left:100px }
  .cfc--4 { left:120px }
  }

  @media (max-width: 768px) {
  .affiliates-hero {
  min-height:auto;
  padding:140px 20px 80px
  }

  .affiliates-hero h1 {
  font-size:36px
  }

  .affiliates-hero-desc {
  font-size:16px
  }

  .affiliates-stat-pill {
  font-size:13px;
  padding:8px 16px
  }

  .commission-split {
  flex-direction:column;
  gap:32px;
  padding:20px 0;
  margin-bottom:60px;
  text-align:center
  }

  .commission-split-text {
  flex:none
  }

  .commission-split-rate {
  font-size:72px
  }

  .commission-split-text h2 {
  font-size:24px
  }

  .commission-split-visual {
  min-height:auto;
  position:relative;
  width:100%
  }

  .commission-fcard {
  position:relative;
  width:100%;
  left:auto !important;
  top:auto !important
  }

  .cfc--1,.cfc--2,.cfc--3,.cfc--4 {
  left:auto;
  top:auto
  }

  .commission-split-visual {
  display:flex;
  flex-direction:column;
  gap:16px
  }

  .commission-ring {
  display:none
  }

  .tiers-container {
  padding:32px 20px
  }

  .cta-section {
  padding:40px 24px
  }

  .cta-section h2 {
  font-size:28px
  }

  .how-it-works,.benefits-grid,.tools-grid,.faq-grid,.aff-benefits-grid,.aff-tools-grid {
  grid-template-columns:1fr
  }

  .affiliates-section-header h2 {
  font-size:26px
  }
  }
  
  .api-section {
  padding:40px 0
  }
  
  .api-hero {
  margin-bottom:60px;
  text-align:center
  }
  
  .api-hero h1 {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  background-clip:text;
  display:inline-block;
  font-size:48px;
  font-weight:800;
  margin-bottom:16px
  }
  
  .api-hero p {
  color:var(--text-secondary);
  font-size:18px;
  line-height:1.8;
  margin:0 auto;
  max-width:700px
  }
  
  .api-container {
  display:flex;
  gap:32px;
  margin:0 auto;
  max-width:1200px;
  padding:0 24px
  }
  
  .api-sidebar {
  flex-shrink:0;
  height:fit-content;
  position:sticky;
  top:20px;
  width:280px
  }
  
  .api-sidebar h3 {
  border-bottom:2px solid var(--border-subtle);
  color:var(--text-primary);
  font-size:18px;
  font-weight:700;
  margin-bottom:20px;
  padding-bottom:12px
  }
  
  .api-nav {
  list-style:none;
  margin:0;
  padding:0
  }
  
  .api-nav-section-title {
  color:var(--text-primary);
  font-size:14px;
  font-weight:700;
  letter-spacing:.5px;
  margin-bottom:8px;
  text-transform:uppercase
  }
  
  .api-nav-item {
  margin:0;
  padding:0
  }
  
  .api-nav-link {
  border-radius:8px;
  color:var(--text-secondary);
  display:block;
  font-size:14px;
  padding:8px 12px;
  text-decoration:none;
  transition:all .2s
  }
  
  .api-nav-link:hover {
  background:var(--border-subtle);
  color:#fff;
  text-decoration:none
  }
  
  .api-content {
  flex:1;
  min-width:0
  }
  
  .api-info-grid {
  display:grid;
  gap:20px;
  grid-template-columns:repeat(3,1fr);
  margin-bottom:40px
  }
  
  .api-info-box h3 {
  color:var(--text-primary);
  font-size:18px;
  font-weight:700;
  margin-bottom:12px
  }
  
  .api-info-box p {
  color:var(--text-secondary);
  font-size:15px;
  line-height:1.6;
  margin:0
  }
  
  .info-highlight {
  background:linear-gradient(81.02deg,#fa556033 -23.47%,#b14bf433 45.52%,#4d91ff33 114.8%);
  border-radius:8px;
  color:#c66bd5;
  display:inline-block;
  font-family:'Courier New',monospace;
  font-size:14px;
  font-weight:600;
  margin-top:12px;
  padding:8px 12px
  }
  
  .api-section-title {
  border-bottom:2px solid var(--border-subtle);
  color:var(--text-primary);
  font-size:28px;
  font-weight:700;
  margin-bottom:24px;
  padding-bottom:12px
  }
  
  .api-endpoint {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(to bottom,#ffffff24,var(--border-subtle)) border-box;
  border:2px solid transparent;
  border-radius:16px;
  margin-bottom:24px;
  padding:32px;
  scroll-margin-top:20px
  }
  
  .api-endpoint-title {
  color:var(--text-primary);
  font-size:20px;
  font-weight:700;
  margin-bottom:24px
  }
  
  .api-desc-title {
  color:var(--text-primary);
  font-size:14px;
  font-weight:700;
  letter-spacing:.5px;
  margin-bottom:12px;
  text-transform:uppercase
  }
  
  .api-desc pre {
  background:#0000004d;
  border:1px solid var(--border-subtle);
  border-radius:12px;
  color:var(--text-primary);
  margin:0;
  overflow-x:auto;
  padding:16px
  }
  
  .api-desc code {
  font-family:'Courier New',monospace;
  font-size:14px
  }
  
  .api-parameters {
  align-items:start;
  background:#0003;
  border-radius:12px;
  display:grid;
  gap:12px 16px;
  grid-template-columns:auto auto 1fr;
  margin-bottom:12px;
  padding:16px
  }
  
  .api-parameter {
  color:#c66bd5;
  font-family:'Courier New',monospace;
  font-weight:700
  }
  
  .api-parameter.required::after {
  color:#fa5560;
  content:'*';
  margin-left:4px
  }
  
  .api-type {
  color:var(--text-secondary);
  font-family:'Courier New',monospace;
  font-size:14px
  }
  
  .api-example {
  color:var(--text-secondary);
  font-size:14px
  }
  
  .mono {
  background:var(--border-subtle);
  border-radius:4px;
  color:#4d91ff;
  font-family:'Courier New',monospace;
  font-size:13px;
  padding:2px 6px
  }
  
  .required {
  color:#fa5560;
  font-weight:700
  }
  
  .api-response pre {
  background:#0000004d;
  border:1px solid var(--border-subtle);
  border-radius:12px;
  color:var(--text-primary);
  overflow-x:auto;
  padding:20px
  }
  
  .api-section-block {
  margin-bottom:48px;
  scroll-margin-top:20px
  }
  
  .api-sidebar-inner,.api-info-box {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(to bottom,#ffffff24,var(--border-subtle)) border-box;
  border:2px solid transparent;
  border-radius:16px;
  padding:24px
  }
  
  .api-nav-section,.api-desc {
  margin-bottom:20px
  }
  
  @media (max-width: 1024px) {
  .api-container {
  flex-direction:column
  }
  
  .api-sidebar {
  margin-bottom:32px;
  position:static;
  width:100%
  }
  
  .api-info-grid {
  grid-template-columns:1fr
  }
  }
  
  @media (max-width: 768px) {
  .api-hero h1 {
  font-size:36px
  }
  
  .api-endpoint {
  padding:24px
  }
  
  .api-parameters {
  grid-template-columns:1fr
  }
  }
  
  .bug-bounty-section {
  overflow:hidden;
  padding:40px 0 50px;
  position:relative
  }
  
  
  .bug-bounty-hero {
  background:linear-gradient(180deg,var(--color-background) 0%,var(--color-background) 50%,var(--color-background) 100%);
  border-radius:24px;
  margin-bottom:40px;
  margin-left:auto;
  margin-right:auto;
  max-width:1200px;
  padding:60px 0 32px;
  position:relative;
  text-align:center
  }
  
  .bug-bounty-hero-glow {
  border-radius:50%;
  pointer-events:none;
  position:absolute;
  z-index:0
  }
  
  .bug-bounty-hero-glow--pink {
  background:#fa55601f;
  filter:blur(120px);
  height:500px;
  left:-100px;
  top:-200px;
  width:500px
  }
  
  .bug-bounty-hero-glow--purple {
  background:#b14bf41a;
  filter:blur(140px);
  height:600px;
  right:-150px;
  top:-150px;
  width:600px
  }
  
  .bug-bounty-hero-glow--blue {
  background:#4d91ff0f;
  bottom:-350px;
  filter:blur(160px);
  height:700px;
  left:50%;
  transform:translateX(-50%);
  width:700px
  }
  
  .bug-bounty-hero > :not(.bug-bounty-hero-glow) {
  position:relative;
  z-index:1
  }
  
  .bug-bounty-hero h1 {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  background-clip:text;
  display:inline-block;
  font-size:48px;
  font-weight:800;
  margin-bottom:16px
  }

  .bug-bounty-hero .subtitle {
  color:var(--text-secondary);
  font-size:18px;
  line-height:1.8;
  margin:0 auto 8px;
  max-width:700px
  }

  .bug-bounty-hero .tagline {
  color:var(--text-secondary);
  font-size:16px;
  line-height:1.6;
  margin:0 auto;
  max-width:700px;
  opacity:.7
  }
  
  .bug-bounty-container {
  margin:0 auto;
  max-width:1200px;
  padding:0 24px;
  position:relative;
  z-index:1
  }
  
  .bb-intro {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%) border-box;
  border:2px solid transparent;
  border-radius:16px;
  margin-bottom:32px;
  padding:32px;
  text-align:center
  }
  
  .bb-intro p {
  color:var(--text-primary);
  font-size:16px;
  line-height:1.8
  }
  
  .bb-section {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(to bottom,#ffffff24,var(--border-subtle)) border-box;
  border:2px solid transparent;
  border-radius:24px;
  margin-bottom:32px;
  padding:40px
  }
  
  .bb-section-title {
  align-items:center;
  color:var(--text-primary);
  display:flex;
  font-size:24px;
  font-weight:700;
  gap:12px;
  margin-bottom:24px
  }
  
  .bb-section-title svg {
  color:#c66bd5
  }
  
  .bb-section-text {
  color:var(--text-secondary);
  line-height:1.7;
  margin-bottom:16px
  }
  
  .bb-rewards-grid {
  display:grid;
  gap:24px;
  grid-template-columns:repeat(3,1fr);
  margin-top:24px
  }
  
  .bb-reward-card {
  background:linear-gradient(175deg,var(--border-subtle) -94.09%,var(--border-subtle) 154.53%);
  border-radius:16px;
  border-top:4px solid #4d91ff;
  padding:28px;
  transition:all .3s ease
  }
  
  .bb-reward-card.critical {
  border-top-color:#fa5560
  }
  
  .bb-reward-card.high {
  border-top-color:#f59e0b
  }
  
  .bb-reward-card.medium {
  border-top-color:#10b981
  }
  
  .bb-reward-level {
  color:var(--text-primary);
  font-size:20px;
  font-weight:700;
  margin-bottom:8px
  }
  
  .bb-reward-amount {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  background-clip:text;
  font-size:28px;
  font-weight:800;
  margin-bottom:16px
  }
  
  .bb-reward-description {
  color:var(--text-secondary);
  font-size:15px;
  line-height:1.6;
  margin-bottom:20px
  }
  
  .bb-reward-examples {
  background:#0003;
  border-left:3px solid #c66bd5;
  border-radius:12px;
  padding:20px
  }
  
  .bb-reward-examples-title {
  color:var(--text-primary);
  font-size:14px;
  font-weight:600;
  margin-bottom:12px
  }
  
  .bb-reward-examples ul {
  margin:0;
  padding-left:20px
  }
  
  .bb-reward-examples li {
  color:var(--text-secondary);
  font-size:14px;
  line-height:1.5;
  margin-bottom:6px
  }
  
  .bb-scope-list li::before {
  align-items:center;
  background:#10b981;
  border-radius:50%;
  content:'';
  display:flex;
  height:24px;
  justify-content:center;
  left:0;
  position:absolute;
  top:18px;
  width:24px
  }
  
  .bb-scope-list li::after {
  color:var(--text-primary);
  content:'\2713';
  font-size:14px;
  font-weight:700;
  left:6px;
  position:absolute;
  top:18px
  }
  
  .bb-scope-list.out-of-scope li::before {
  background:#fa5560
  }
  
  .bb-scope-list.out-of-scope li::after {
  content:'\2715';
  left:7px
  }
  
  .bb-scope-list li strong {
  color:var(--text-primary)
  }
  
  .bb-process-steps {
  display:grid;
  gap:20px;
  grid-template-columns:repeat(4,1fr);
  margin-top:24px
  }
  
  .bb-process-step {
  background:linear-gradient(175deg,var(--border-subtle) -94.09%,var(--border-subtle) 154.53%);
  border-radius:16px;
  padding:28px;
  text-align:center;
  transition:all .3s ease
  }
  
  .bb-process-step-number {
  align-items:center;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  border-radius:50%;
  color:#fff;
  display:flex;
  font-size:24px;
  font-weight:700;
  height:50px;
  justify-content:center;
  margin:0 auto 16px;
  width:50px
  }
  
  .bb-process-step-title {
  color:var(--text-primary);
  font-size:18px;
  font-weight:700;
  margin-bottom:8px
  }
  
  .bb-process-step-description {
  color:var(--text-secondary);
  font-size:14px;
  line-height:1.6
  }
  
  .bb-rules-list li::before {
  color:#c66bd5;
  content:'\2192';
  font-size:20px;
  font-weight:700;
  left:0;
  position:absolute;
  top:16px
  }
  
  .bb-info-box {
  background:linear-gradient(175deg,#4d91ff26 -94.09%,#4d91ff0d 154.53%);
  border-left:4px solid #4d91ff;
  border-radius:12px;
  margin:24px 0;
  padding:24px
  }
  
  .bb-info-box p {
  color:var(--text-primary);
  line-height:1.7;
  margin:0
  }
  
  .bb-info-box strong {
  color:#4d91ff
  }
  
  .bb-contact-box {
  background:linear-gradient(175deg,var(--border-subtle) -94.09%,var(--border-subtle) 154.53%);
  border:1px solid var(--border-subtle);
  border-radius:20px;
  margin-top:32px;
  padding:40px;
  text-align:center
  }
  
  .bb-contact-box h3 {
  font-size:24px;
  font-weight:700;
  margin-bottom:12px
  }
  
  .bb-contact-box p {
  color:var(--text-secondary);
  font-size:16px;
  margin-bottom:24px
  }
  
  .bb-contact-button {
  align-items:center;
  background:linear-gradient(rgba(30,30,50,0.6),rgba(30,30,50,0.6)) padding-box,linear-gradient(81.02deg,#fd941366,#ff69b4aa,#b14bf4cc,#ac65cbaa,#3aafd388) border-box;
  border:1px solid transparent;
  border-radius:14px;
  backdrop-filter:blur(12px) saturate(180%);
  -webkit-backdrop-filter:blur(12px) saturate(180%);
  color:#fff;
  display:inline-flex;
  font-size:16px;
  font-weight:700;
  gap:10px;
  overflow:hidden;
  padding:16px 40px;
  text-decoration:none;
  transition:all .4s ease;
  box-shadow:0 0 20px rgba(255,255,255,0.05),0 6px 24px rgba(0,0,0,0.2),inset 0 1px 1px rgba(255,255,255,0.15),inset 0 -1px 1px rgba(0,0,0,0.3)
  }

  .bb-contact-button:hover {
  filter:brightness(1.05);
  box-shadow:0 0 30px rgba(177,75,244,0.35),0 0 60px rgba(177,75,244,0.15),0 12px 32px rgba(0,0,0,0.4);
  color:#fff;
  text-decoration:none
  }
  
  .bb-contact-note {
  color:var(--text-primary);
  font-size:14px;
  margin-top:20px
  }
  
  .scope-title {
  align-items:center;
  color:var(--text-primary);
  display:flex;
  font-size:20px;
  font-weight:600;
  gap:10px;
  margin:32px 0 16px
  }
  
  .scope-title.in-scope::before {
  background:#10b981;
  border-radius:50%;
  content:'';
  height:24px;
  width:24px
  }
  
  .scope-title.out-scope::before {
  background:#fa5560;
  border-radius:50%;
  content:'';
  height:24px;
  width:24px
  }
  
  .bb-reward-card:hover,.bb-process-step:hover {
  background:linear-gradient(175deg,#ffffff1f -94.09%,var(--border-subtle) 154.53%);
  transform:translateY(-4px)
  }
  
  .bb-scope-list,.bb-rules-list {
  list-style:none;
  margin:24px 0;
  padding:0
  }
  
  .bb-scope-list li,.bb-rules-list li {
  border-bottom:1px solid var(--border-subtle);
  color:var(--text-primary);
  line-height:1.7;
  padding:16px 0 16px 40px;
  position:relative
  }
  
  .bb-scope-list li:last-child,.bb-rules-list li:last-child {
  border-bottom:none
  }
  
  @media (max-width: 1024px) {
  .bb-rewards-grid {
  grid-template-columns:1fr
  }
  
  .bb-process-steps {
  grid-template-columns:repeat(2,1fr)
  }
  }
  
  @media (max-width: 768px) {
  .bug-bounty-hero {
  padding:40px 24px
  }
  
  .bug-bounty-hero h1 {
  font-size:36px
  }
  
  .bug-bounty-hero .subtitle {
  font-size:16px
  }
  
  .bb-section {
  padding:28px 20px
  }
  
  .bb-section-title {
  font-size:20px
  }
  
  .bb-process-steps {
  grid-template-columns:1fr
  }
  }
  
  .child-policy-section {
  padding:40px 0
  }
  
  .child-policy-hero {
  margin-bottom:60px;
  text-align:center
  }
  
  .child-policy-hero h1 {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  background-clip:text;
  display:inline-block;
  font-size:48px;
  font-weight:800;
  margin-bottom:16px
  }
  
  .child-policy-hero p {
  color:var(--text-secondary);
  font-size:18px;
  font-style:italic
  }
  
  .child-policy-container {
  margin:0 auto;
  max-width:1200px;
  padding:0 24px
  }
  
  .child-policy-content {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%) border-box;
  border:2px solid transparent;
  border-radius:24px;
  padding:48px
  }
  
  .zero-tolerance-box {
  background:linear-gradient(135deg,#fa5560ff 0%,#dc3545ff 100%);
  border-radius:16px;
  color:var(--text-primary);
  margin-bottom:40px;
  padding:40px;
  text-align:center
  }
  
  .zero-tolerance-box h3 {
  align-items:center;
  display:flex;
  font-size:28px;
  font-weight:800;
  gap:12px;
  justify-content:center;
  margin-bottom:16px
  }
  
  .zero-tolerance-box p {
  font-size:17px;
  line-height:1.7;
  opacity:.95
  }
  
  .child-policy-content h2 {
  border-bottom:2px solid var(--border-subtle);
  color:var(--text-primary);
  font-size:24px;
  font-weight:700;
  margin-bottom:20px;
  margin-top:40px;
  padding-bottom:12px
  }
  
  .child-policy-content h2:first-of-type {
  margin-top:0
  }
  
  .child-policy-content p {
  color:var(--text-primary);
  font-size:16px;
  line-height:1.8;
  margin-bottom:16px
  }
  
  .action-box {
  background:linear-gradient(175deg,#4d91ff26 -94.09%,#4d91ff0d 154.53%);
  border-left:4px solid #4d91ff;
  border-radius:12px;
  margin:24px 0;
  padding:28px
  }
  
  .action-box h3 {
  color:#4d91ff;
  font-size:20px;
  font-weight:700;
  margin-bottom:16px
  }
  
  .action-box ul {
  margin:0;
  padding-left:24px
  }
  
  .action-box li {
  color:var(--text-primary);
  line-height:1.8;
  margin-bottom:12px
  }
  
  .action-box li strong {
  color:var(--text-primary)
  }
  
  .action-box li::marker {
  color:#4d91ff
  }
  
  .warning-box {
  background:linear-gradient(175deg,#f59e0b26 -94.09%,#f59e0b0d 154.53%);
  border-left:4px solid #f59e0b;
  border-radius:8px;
  margin:24px 0;
  padding:24px
  }
  
  .warning-box p:last-child {
  margin-bottom:0
  }
  
  .warning-box strong {
  color:#f59e0b
  }
  
  .report-box {
  background:linear-gradient(175deg,#fa556026 -94.09%,#fa55600d 154.53%);
  border-left:4px solid #fa5560;
  border-radius:8px;
  margin:24px 0;
  padding:28px
  }
  
  .report-box strong {
  color:#fa5560
  }
  
  .child-policy-section .contact-btn {
  align-items:center;
  background:linear-gradient(rgba(30,30,50,0.6),rgba(30,30,50,0.6)) padding-box,linear-gradient(81.02deg,#fd941366,#ff69b4aa,#b14bf4cc,#ac65cbaa,#3aafd388) border-box;
  border:1px solid transparent;
  border-radius:14px;
  backdrop-filter:blur(12px) saturate(180%);
  -webkit-backdrop-filter:blur(12px) saturate(180%);
  color:#fff!important;
  display:inline-flex;
  font-size:15px;
  font-weight:700;
  gap:8px;
  margin-top:16px;
  overflow:hidden;
  padding:14px 28px;
  text-decoration:none;
  transition:all .4s ease;
  box-shadow:0 0 20px rgba(255,255,255,0.05),0 6px 24px rgba(0,0,0,0.2),inset 0 1px 1px rgba(255,255,255,0.15),inset 0 -1px 1px rgba(0,0,0,0.3)
  }
  
  .child-policy-section .contact-btn:hover {
  filter:brightness(1.05);
  box-shadow:0 0 30px rgba(177,75,244,0.35),0 0 60px rgba(177,75,244,0.15),0 12px 32px rgba(0,0,0,0.4);
  color:#fff!important;
  text-decoration:none
  }
  
  .child-policy-section .contact-box {
  background:linear-gradient(175deg,var(--border-subtle) -94.09%,var(--border-subtle) 154.53%);
  border-left:4px solid #c66bd5;
  border-radius:8px;
  margin:40px 0 0;
  padding:24px
  }
  
  .child-policy-section .contact-box strong {
  color:#c66bd5
  }
  
  .warning-box p,.report-box p,.child-policy-section .contact-box p {
  margin-bottom:8px
  }
  
  .report-box h3,.child-policy-section .contact-box h3 {
  color:var(--text-primary);
  font-size:20px;
  font-weight:700;
  margin-bottom:16px
  }
  
  .report-box a:not(.contact-btn),.child-policy-section .contact-box a {
  color:#4d91ff;
  text-decoration:none;
  transition:all .3s ease
  }
  
  .report-box a:not(.contact-btn):hover,.child-policy-section .contact-box a:hover {
  color:#c66bd5;
  text-decoration:underline
  }
  
  @media (max-width: 768px) {
  .child-policy-hero h1 {
  font-size:36px
  }
  
  .child-policy-content {
  padding:32px 24px
  }
  
  .child-policy-content h2 {
  font-size:20px
  }
  
  .zero-tolerance-box {
  padding:28px 20px
  }
  
  .zero-tolerance-box h3 {
  flex-direction:column;
  font-size:22px
  }
  }
  
  .copyright-section {
  margin-top:-80px;
  overflow:hidden;
  padding-bottom:50px;
  position:relative
  }
  
  
  .copyright-hero {
  background:linear-gradient(180deg,var(--color-background) 0%,var(--color-background) 50%,var(--color-background) 100%);
  margin-bottom:60px;
  padding:160px 0 32px;
  position:relative;
  text-align:center
  }
  
  .copyright-hero-glow {
  border-radius:50%;
  pointer-events:none;
  position:absolute;
  z-index:0
  }
  
  .copyright-hero-glow--pink {
  background:#fa55601f;
  filter:blur(120px);
  height:500px;
  left:-100px;
  top:-200px;
  width:500px
  }
  
  .copyright-hero-glow--purple {
  background:#b14bf41a;
  filter:blur(140px);
  height:600px;
  right:-150px;
  top:-150px;
  width:600px
  }
  
  .copyright-hero-glow--blue {
  background:#4d91ff0f;
  bottom:-350px;
  filter:blur(160px);
  height:700px;
  left:50%;
  transform:translateX(-50%);
  width:700px
  }
  
  .copyright-hero > :not(.copyright-hero-glow) {
  position:relative;
  z-index:1
  }
  
  .copyright-hero h1 {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  background-clip:text;
  display:inline-block;
  font-size:48px;
  font-weight:800;
  margin-bottom:16px
  }
  
  .copyright-hero p {
  color:var(--text-secondary);
  font-size:18px;
  font-style:italic
  }
  
  .copyright-container {
  margin:0 auto;
  max-width:1200px;
  padding:0 24px;
  position:relative;
  z-index:1
  }
  
  .copyright-content {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%) border-box;
  border:2px solid transparent;
  border-radius:24px;
  padding:48px
  }
  
  .copyright-content h2 {
  border-bottom:2px solid var(--border-subtle);
  color:var(--text-primary);
  font-size:24px;
  font-weight:700;
  margin-bottom:20px;
  margin-top:40px;
  padding-bottom:12px
  }
  
  .copyright-content h2:first-of-type {
  margin-top:24px
  }
  
  .copyright-content p {
  color:var(--text-primary);
  font-size:16px;
  line-height:1.8;
  margin-bottom:16px
  }
  
  .copyright-content ul {
  margin:16px 0 24px 24px
  }
  
  .copyright-content li {
  color:var(--text-primary);
  line-height:1.8;
  margin-bottom:8px
  }
  
  .highlight-box {
  background:linear-gradient(175deg,#fa556026 -94.09%,#fa55600d 154.53%);
  border:1px solid #fa55604d;
  border-radius:12px;
  margin:24px 0;
  padding:24px
  }
  
  .highlight-box strong {
  color:#fa5560
  }
  
  .contact-methods {
  display:grid;
  gap:24px;
  grid-template-columns:repeat(2,1fr);
  margin:32px 0
  }
  
  .contact-method-card {
  background:linear-gradient(175deg,var(--border-subtle) -94.09%,var(--border-subtle) 154.53%);
  border:2px solid var(--border-subtle);
  border-radius:16px;
  padding:32px;
  text-align:center;
  transition:all .3s ease
  }
  
  .contact-method-card:hover {
  background:linear-gradient(175deg,#ffffff1f -94.09%,var(--border-subtle) 154.53%);
  border-color:#c66bd5;
  transform:translateY(-4px)
  }
  
  .contact-method-card h3 {
  color:var(--text-primary);
  font-size:20px;
  font-weight:700;
  margin-bottom:12px
  }
  
  .contact-method-card p {
  color:var(--text-secondary);
  font-size:15px;
  margin-bottom:20px
  }
  
  .copyright-section .contact-btn {
  align-items:center;
  background:linear-gradient(rgba(30,30,50,0.6),rgba(30,30,50,0.6)) padding-box,linear-gradient(81.02deg,#fd941366,#ff69b4aa,#b14bf4cc,#ac65cbaa,#3aafd388) border-box;
  border:1px solid transparent;
  border-radius:14px;
  backdrop-filter:blur(12px) saturate(180%);
  -webkit-backdrop-filter:blur(12px) saturate(180%);
  color:#fff;
  display:inline-flex;
  font-size:15px;
  font-weight:700;
  gap:8px;
  overflow:hidden;
  padding:14px 28px;
  text-decoration:none;
  transition:all .4s ease;
  box-shadow:0 0 20px rgba(255,255,255,0.05),0 6px 24px rgba(0,0,0,0.2),inset 0 1px 1px rgba(255,255,255,0.15),inset 0 -1px 1px rgba(0,0,0,0.3)
  }

  .copyright-section .contact-btn:hover {
  filter:brightness(1.05);
  box-shadow:0 0 30px rgba(177,75,244,0.35),0 0 60px rgba(177,75,244,0.15),0 12px 32px rgba(0,0,0,0.4);
  color:#fff;
  text-decoration:none
  }
  
  .max-links-note {
  color:var(--text-muted);
  font-size:13px;
  font-style:italic;
  margin-top:12px
  }
  
  .info-box {
  background:linear-gradient(175deg,#4d91ff26 -94.09%,#4d91ff0d 154.53%);
  border-left:4px solid #4d91ff;
  border-radius:8px;
  margin:24px 0;
  padding:24px
  }
  
  .info-box strong {
  color:#4d91ff
  }
  
  .contact-box {
  background:linear-gradient(175deg,var(--border-subtle) -94.09%,var(--border-subtle) 154.53%);
  border-left:4px solid #c66bd5;
  border-radius:8px;
  margin:40px 0 0;
  padding:24px
  }
  
  .contact-box h3 {
  color:var(--text-primary);
  font-size:20px;
  font-weight:700;
  margin-bottom:16px
  }
  
  .contact-box a {
  color:#4d91ff;
  text-decoration:none;
  transition:all .3s ease
  }
  
  .contact-box a:hover {
  color:#c66bd5;
  text-decoration:underline
  }
  
  .copyright-content li::marker,.contact-box strong {
  color:#c66bd5
  }
  
  .highlight-box p,.contact-box p {
  margin-bottom:8px
  }
  
  .highlight-box p:last-child,.info-box p {
  margin-bottom:0
  }
  
  @media (max-width: 768px) {
  .copyright-hero h1 {
  font-size:36px
  }
  
  .copyright-content {
  padding:32px 24px
  }
  
  .copyright-content h2 {
  font-size:20px
  }
  
  .contact-methods {
  grid-template-columns:1fr
  }
  }
  
  .dmca-section {
  margin-top:-80px;
  padding:0 0 50px
  }
  
  .dmca-hero {
  margin-bottom:60px;
  padding-top:160px;
  text-align:center
  }
  
  .dmca-hero h1 {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  background-clip:text;
  display:inline-block;
  font-size:48px;
  font-weight:800;
  margin-bottom:16px
  }
  
  .dmca-hero p {
  color:var(--text-secondary);
  font-size:18px;
  line-height:1.6;
  margin:0 auto;
  max-width:700px
  }
  
  .dmca-container {
  margin:0 auto;
  max-width:1200px;
  padding:0 24px
  }
  
  .dmca-content {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%) border-box;
  border:2px solid transparent;
  border-radius:24px;
  margin-bottom:32px;
  padding:48px
  }
  
  .dmca-content h2 {
  border-bottom:2px solid var(--border-subtle);
  color:var(--text-primary);
  font-size:24px;
  font-weight:700;
  margin-bottom:20px;
  margin-top:40px;
  padding-bottom:12px
  }
  
  .dmca-content h2:first-child {
  margin-top:0
  }
  
  .dmca-content p {
  color:var(--text-primary);
  font-size:16px;
  line-height:1.8;
  margin-bottom:16px
  }
  
  .dmca-content ul {
  margin:16px 0 24px 24px
  }
  
  .dmca-content li {
  color:var(--text-primary);
  line-height:1.8;
  margin-bottom:8px
  }
  
  .contact-grid {
  display:grid;
  gap:24px;
  grid-template-columns:repeat(3,1fr);
  margin-bottom:32px
  }
  
  .contact-card {
  background:linear-gradient(175deg,var(--border-subtle) -94.09%,var(--border-subtle) 154.53%);
  border:1px solid var(--border-subtle);
  border-radius:16px;
  padding:28px;
  text-align:center;
  transition:all .3s ease
  }
  
  .contact-card:hover {
  border-color:var(--border-subtle);
  transform:translateY(-4px)
  }
  
  .contact-card-icon {
  align-items:center;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  border-radius:50%;
  display:flex;
  height:56px;
  justify-content:center;
  margin:0 auto 16px;
  width:56px
  }
  
  .contact-card-icon svg {
  color:#fff
  }
  
  .contact-card h3 {
  color:var(--text-primary);
  font-size:18px;
  font-weight:700;
  margin-bottom:8px
  }
  
  .contact-card p {
  color:var(--text-secondary);
  font-size:14px;
  margin-bottom:0
  }
  
  .contact-card a {
  color:#4d91ff;
  text-decoration:none;
  transition:color .3s ease
  }
  
  .info-box {
  background:linear-gradient(175deg,#4d91ff26 -94.09%,#4d91ff0d 154.53%);
  border-left:4px solid #4d91ff;
  border-radius:8px;
  margin:24px 0;
  padding:24px
  }
  
  .info-box p {
  margin-bottom:8px
  }
  
  .info-box p:last-child {
  margin-bottom:0
  }
  
  .info-box strong {
  color:#4d91ff
  }
  
  .warning-box {
  background:linear-gradient(175deg,#f59e0b26 -94.09%,#f59e0b0d 154.53%);
  border-left:4px solid #f59e0b;
  border-radius:8px;
  margin:24px 0;
  padding:24px
  }
  
  .warning-box p {
  color:var(--text-primary);
  margin-bottom:0
  }
  
  .warning-box strong {
  color:#f59e0b
  }
  
  .cta-section {
  background:linear-gradient(175deg,var(--border-subtle) -94.09%,var(--border-subtle) 154.53%);
  border:1px solid var(--border-subtle);
  border-radius:20px;
  padding:48px;
  text-align:center
  }
  
  .cta-section h2 {
  color:var(--text-primary);
  font-size:28px;
  font-weight:700;
  margin-bottom:16px
  }
  
  .cta-section p {
  color:var(--text-secondary);
  font-size:16px;
  margin-bottom:24px;
  margin-left:auto;
  margin-right:auto;
  max-width:600px
  }
  
  .cta-btn {
  position:relative;
  align-items:center;
  background:linear-gradient(rgba(30,30,50,0.6),rgba(30,30,50,0.6)) padding-box,linear-gradient(81.02deg,#fd941366,#ff69b4aa,#b14bf4cc,#ac65cbaa,#3aafd388) border-box;
  border:1px solid transparent;
  border-radius:14px;
  backdrop-filter:blur(12px) saturate(180%);
  -webkit-backdrop-filter:blur(12px) saturate(180%);
  color:#fff;
  display:inline-flex;
  font-size:16px;
  font-weight:700;
  gap:10px;
  overflow:hidden;
  padding:16px 40px;
  text-decoration:none;
  transition:all .4s ease;
  box-shadow:0 0 20px rgba(255,255,255,0.05),0 6px 24px rgba(0,0,0,0.2),inset 0 1px 1px rgba(255,255,255,0.15),inset 0 -1px 1px rgba(0,0,0,0.3)
  }

  .cta-btn:hover {
  filter:brightness(1.05);
  box-shadow:0 0 30px rgba(177,75,244,0.35),0 0 60px rgba(177,75,244,0.15),0 12px 32px rgba(0,0,0,0.4);
  color:#fff;
  text-decoration:none
  }

  .dmca-content li::marker,.contact-card a:hover {
  color:#c66bd5
  }
  
  @media (max-width: 768px) {
  .dmca-hero h1 {
  font-size:36px
  }
  
  .dmca-content h2 {
  font-size:20px
  }
  
  .contact-grid {
  grid-template-columns:1fr
  }
  
  .dmca-content,.cta-section {
  padding:32px 24px
  }
  }
  
  .dl-page {
  margin-top:-80px;
  padding-bottom:50px;
  position:relative
  }
  
  .dl-hero {
  background:linear-gradient(180deg,var(--color-background) 0%,var(--color-background) 50%,var(--color-background) 100%);
  margin-bottom:48px;
  padding:160px 0 32px;
  position:relative;
  text-align:center
  }
  
  .dl-hero-glow {
  border-radius:50%;
  pointer-events:none;
  position:absolute;
  z-index:0
  }
  
  .dl-hero-glow--pink {
  background:#fa55601f;
  filter:blur(120px);
  height:500px;
  left:-100px;
  top:-200px;
  width:500px
  }
  
  .dl-hero-glow--purple {
  background:#b14bf41a;
  filter:blur(140px);
  height:600px;
  right:-150px;
  top:-150px;
  width:600px
  }
  
  .dl-hero-glow--blue {
  background:#4d91ff0f;
  bottom:-350px;
  filter:blur(160px);
  height:700px;
  left:50%;
  transform:translateX(-50%);
  width:700px
  }
  
  .dl-hero > :not(.dl-hero-glow) {
  position:relative;
  z-index:1
  }
  
  .dl-badge-wrap {
  margin-bottom:16px
  }
  
  .dl-badge {
  background:linear-gradient(81.02deg,#fa55601f -23.47%,#b14bf41f 45.52%,#4d91ff1f 114.8%);
  border:1px solid #b14bf440;
  border-radius:100px;
  display:inline-block;
  font-size:13px;
  font-weight:700;
  letter-spacing:1.5px;
  margin-bottom:24px;
  padding:6px 20px;
  text-transform:uppercase
  }

  .dl-badge span {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560 -23.47%,#b14bf4 45.52%,#4d91ff 114.8%);
  background-clip:text
  }
  
  .dl-hero h1 {
  color:var(--text-primary);
  font-size:52px;
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.1;
  margin-bottom:14px
  }
  
  .dl-hero h1 span {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560 -23.47%,#b14bf4 45.52%,#4d91ff 114.8%);
  background-clip:text;
  display:block
  }
  
  .dl-hero-desc {
  color:var(--text-muted);
  font-size:16px;
  line-height:1.6;
  margin:0 auto 20px;
  max-width:560px
  }
  
  .dl-hero-pills {
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  justify-content:center
  }
  
  .dl-pill {
  background:linear-gradient(#1e1e32cc,#1e1e32cc) padding-box,linear-gradient(to right,#fd941366,#ff69b4aa,#b14bf4cc,#ac65cbaa,#3aafd388) border-box;
  border:1px solid transparent;
  border-radius:100px;
  color:var(--text-secondary);
  font-size:14px;
  font-weight:600;
  padding:10px 24px
  }
  
  .dl-pill strong {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560,#b14bf4,#4d91ff);
  background-clip:text;
  margin-right:6px
  }
  
  .dl-accordion {
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:40px;
  margin-left:auto;
  margin-right:auto;
  max-width:1200px;
  padding-left:24px;
  padding-right:24px;
  position:relative;
  z-index:1
  }
  
  .dl-item {
  background:var(--border-subtle);
  border:1px solid var(--border-subtle);
  border-radius:16px;
  overflow:hidden;
  transition:border-color .3s ease
  }
  
  .dl-item:hover {
  border-color:var(--border-subtle)
  }
  
  .dl-item.active {
  border-color:#b14bf466
  }
  
  .dl-item-header {
  align-items:center;
  cursor:pointer;
  display:flex;
  gap:16px;
  padding:20px 24px;
  transition:background .2s ease;
  user-select:none
  }
  
  .dl-item-header:hover {
  background:var(--border-subtle)
  }
  
  .dl-item-icon {
  align-items:center;
  background:linear-gradient(81.02deg,#fa556026 -23.47%,#b14bf426 45.52%,#4d91ff26 114.8%);
  border-radius:12px;
  display:flex;
  flex-shrink:0;
  height:48px;
  justify-content:center;
  width:48px
  }
  
  .dl-item-icon svg {
  color:#c66bd5
  }
  
  .dl-item-info {
  flex:1;
  min-width:0
  }
  
  .dl-item-name {
  color:var(--text-primary);
  font-size:18px;
  font-weight:700;
  line-height:1.3
  }
  
  .dl-item-meta {
  color:var(--text-muted);
  font-size:13px;
  margin-top:2px
  }
  
  .dl-item-chevron {
  color:var(--text-faint);
  flex-shrink:0;
  transition:transform .3s ease
  }
  
  .dl-item.active .dl-item-chevron {
  color:#b14bf4cc;
  transform:rotate(180deg)
  }
  
  .dl-item-body {
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease
  }
  
  .dl-item.active .dl-item-body {
  max-height:400px
  }
  
  .dl-item-content {
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:0 24px 24px
  }
  
  .dl-item-content .dl-sep {
  background:var(--border-subtle);
  height:1px;
  margin-bottom:4px
  }
  
  .dl-btn {
  position:relative;
  align-items:center;
  background:linear-gradient(rgba(30,30,50,0.6),rgba(30,30,50,0.6)) padding-box,linear-gradient(81.02deg,#fd9413cc,#ff69b4cc,#e842fcbb,#ac65cbaa,#3aafd388) border-box;
  border:1px solid transparent;
  border-radius:14px;
  backdrop-filter:blur(12px) saturate(180%);
  -webkit-backdrop-filter:blur(12px) saturate(180%);
  color:#fff;
  display:inline-flex;
  font-size:15px;
  font-weight:700;
  gap:10px;
  justify-content:center;
  overflow:hidden;
  padding:14px 24px;
  text-align:center;
  text-decoration:none;
  transition:all .4s ease;
  box-shadow:0 0 20px rgba(255,255,255,0.05),0 6px 24px rgba(0,0,0,0.2),inset 0 1px 1px rgba(255,255,255,0.15),inset 0 -1px 1px rgba(0,0,0,0.3)
  }

  .dl-btn:hover {
  filter:brightness(1.05);
  box-shadow:0 0 30px rgba(177,75,244,0.35),0 0 60px rgba(177,75,244,0.15),0 12px 32px rgba(0,0,0,0.4);
  color:#fff;
  text-decoration:none
  }

  .dl-btn::before {
  content:'';
  position:absolute;
  top:0;
  left:15%;
  right:15%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.5),transparent);
  pointer-events:none
  }

  .dl-btn-secondary {
  background:var(--border-subtle);
  border:1px solid var(--border-subtle)
  }
  
  .dl-btn-secondary:hover {
  background:#ffffff1f;
  box-shadow:none
  }

  .dl-btn-split {
  display:flex;
  gap:8px;
  width:100%
  }

  .dl-btn-split .dl-btn {
  flex:1;
  justify-content:center
  }

  .dl-req {
  color:var(--text-muted);
  font-size:13px;
  line-height:1.5
  }

  /* Mode Toggle (Desktop / CLI) */
  .dl-mode-toggle {
  display:inline-flex;
  background:var(--color-background, #0d1017);
  border:1px solid var(--border-subtle);
  border-radius:10px;
  padding:3px;
  margin-bottom:16px;
  gap:2px
  }

  .dl-mode-btn {
  background:none;
  border:none;
  border-radius:8px;
  padding:8px 20px;
  font-size:13px;
  font-weight:600;
  color:var(--text-muted);
  cursor:pointer;
  transition:all .2s;
  letter-spacing:0.02em
  }

  .dl-mode-btn:hover {
  color:var(--text-secondary)
  }

  .dl-mode-btn.active {
  background:linear-gradient(135deg,#b14bf4 0%,#7c3aed 100%);
  color:#fff;
  box-shadow:0 2px 8px rgba(177,75,244,0.3)
  }

  /* Linux Installation Instructions */
  .dl-item--expanded.active .dl-item-body {
  max-height:1500px
  }

  .dl-linux-card {
  background:rgba(255,255,255,0.03);
  border:1px solid var(--border-subtle);
  border-radius:12px;
  padding:20px
  }

  .dl-linux-card-head {
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-bottom:16px
  }

  .dl-linux-card-head svg {
  color:#b14bf4;
  flex-shrink:0;
  margin-top:2px
  }

  .dl-linux-card-head h4 {
  font-size:15px;
  font-weight:600;
  margin:0 0 4px;
  color:var(--text-primary)
  }

  .dl-linux-card-head p {
  font-size:13px;
  color:var(--text-muted);
  margin:0
  }

  .dl-linux-code {
  display:flex;
  align-items:center;
  background:#0a0d14;
  border:1px solid var(--border-subtle);
  border-radius:8px;
  padding:12px 16px;
  gap:12px
  }

  .dl-linux-code code {
  flex:1;
  min-width:0;
  overflow-x:auto;
  font-family:'SF Mono','Fira Code','Cascadia Code',monospace;
  font-size:13px;
  color:#e0e6f0;
  white-space:pre;
  user-select:all;
  -webkit-user-select:all;
  line-height:1.6
  }

  .dl-linux-copy {
  flex-shrink:0;
  background:var(--border-subtle);
  border:none;
  border-radius:6px;
  padding:6px 12px;
  font-size:12px;
  color:var(--text-secondary);
  cursor:pointer;
  transition:all .2s
  }

  .dl-linux-copy:hover {
  background:rgba(255,255,255,0.15);
  color:var(--text-primary)
  }

  .dl-linux-copy.copied {
  background:rgba(34,197,94,0.2);
  color:#22c55e
  }

  .dl-linux-note {
  font-size:12px;
  color:var(--text-muted);
  margin:12px 0 0
  }

  .dl-linux-tabs {
  display:flex;
  gap:4px;
  background:rgba(255,255,255,0.03);
  border-radius:8px;
  padding:4px;
  margin-bottom:16px
  }

  .dl-linux-tab {
  flex:1;
  background:none;
  border:none;
  border-radius:6px;
  padding:8px 12px;
  font-size:13px;
  color:var(--text-muted);
  cursor:pointer;
  transition:all .2s
  }

  .dl-linux-tab:hover {
  color:var(--text-secondary)
  }

  .dl-linux-tab.active {
  background:var(--border-subtle);
  color:var(--text-primary)
  }

  .dl-linux-panel {
  display:none
  }

  .dl-linux-panel.active {
  display:flex;
  flex-direction:column;
  gap:8px
  }

  .dl-linux-step {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  color:var(--text-secondary);
  font-weight:500;
  margin-top:8px
  }

  .dl-linux-step:first-child {
  margin-top:0
  }

  .dl-linux-step-num {
  width:22px;
  height:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#b14bf4,#4d91ff);
  border-radius:50%;
  font-size:12px;
  font-weight:700;
  color:#fff;
  flex-shrink:0
  }

  .dl-linux-card--collapsible .dl-linux-card-head {
  cursor:pointer;
  margin-bottom:0
  }

  .dl-linux-card--collapsible .dl-linux-card-chevron {
  margin-left:auto;
  color:var(--text-muted);
  transition:transform .25s ease;
  flex-shrink:0
  }

  .dl-linux-card--collapsible.open .dl-linux-card-chevron {
  transform:rotate(180deg)
  }

  .dl-linux-card--collapsible .dl-linux-card-body {
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease
  }

  .dl-linux-card--collapsible.open .dl-linux-card-body {
  max-height:800px
  }

  .dl-linux-card--collapsible.open .dl-linux-card-head {
  margin-bottom:16px
  }

  .dl-linux-card-desc {
  font-size:13px;
  color:var(--text-muted);
  margin:0 0 12px
  }

  .dl-section-label {
  color:var(--text-muted);
  font-size:13px;
  font-weight:600;
  letter-spacing:1.5px;
  margin-bottom:4px;
  margin-left:auto;
  margin-right:auto;
  max-width:1200px;
  padding-left:24px;
  padding-right:24px;
  position:relative;
  text-transform:uppercase;
  z-index:1
  }
  
  /* QR Sidebar (desktop only, fixed right edge) */
  @keyframes dl-qr-enter {
  from { transform:translateY(-50%) translateX(110%); opacity:0 }
  to   { transform:translateY(-50%) translateX(0); opacity:1 }
  }

  .dl-qr-sidebar {
  align-items:stretch;
  animation:dl-qr-enter .5s cubic-bezier(.16,1,.3,1) 1.2s both;
  display:flex;
  position:fixed;
  right:0;
  top:50%;
  transform:translateY(-50%);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
  z-index:100
  }

  .dl-qr-sidebar.collapsed {
  transform:translateY(-50%) translateX(calc(100% - 40px))
  }

  .dl-qr-toggle {
  align-items:center;
  background:rgba(13,16,23,0.85);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:none;
  border-radius:12px 0 0 12px;
  box-shadow:-2px 0 16px rgba(177,75,244,0.15);
  color:var(--text-muted,#888);
  cursor:pointer;
  display:flex;
  justify-content:center;
  margin-right:-8px;
  padding:12px 16px 12px 10px;
  transition:background .2s,color .2s,box-shadow .2s
  }

  .dl-qr-toggle:hover {
  background:rgba(177,75,244,0.18);
  box-shadow:-2px 0 20px rgba(177,75,244,0.3);
  color:#c66bd5
  }

  .dl-qr-ico-phone {
  display:none
  }

  .dl-qr-sidebar.collapsed .dl-qr-ico-chevron {
  display:none
  }

  .dl-qr-sidebar.collapsed .dl-qr-ico-phone {
  display:block
  }

  .dl-qr-panel {
  background:rgba(13,16,23,0.85);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-radius:16px 0 0 16px;
  box-shadow:-4px 0 32px rgba(177,75,244,0.12),0 0 0 1px rgba(255,255,255,0.06) inset;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  padding:20px 24px 18px;
  position:relative;
  z-index:1
  }

  .dl-qr-code {
  display:flex
  }

  .dl-qr-code svg {
  display:block;
  height:148px;
  width:148px
  }

  .dl-qr-label {
  color:var(--text-muted,#999);
  font-size:12px;
  line-height:1.4;
  margin:0;
  max-width:148px;
  text-align:center
  }

  @media (max-width: 768px) {
  .dl-qr-sidebar {
  display:none !important
  }
  }

  @media (max-width: 640px) {
  .dl-page {
  padding:0 0 64px
  }
  
  .dl-hero {
  padding-top:120px
  }
  
  .dl-section-label,.dl-accordion {
  padding-left:16px;
  padding-right:16px
  }
  
  .dl-hero h1 {
  font-size:30px
  }
  
  .dl-hero-desc {
  font-size:15px;
  max-width:100%;
  padding:0 16px
  }
  
  .dl-hero-pills {
  gap:10px
  }
  
  .dl-pill {
  font-size:12px;
  padding:8px 14px
  }
  
  .dl-pill-hide-mobile {
  display:none
  }
  
  .dl-item-header {
  gap:12px;
  padding:16px 18px
  }
  
  .dl-item-icon {
  border-radius:10px;
  height:40px;
  width:40px
  }
  
  .dl-item-icon svg {
  height:20px;
  width:20px
  }
  
  .dl-item-name {
  font-size:16px
  }
  
  .dl-item-content {
  padding:0 18px 20px
  }

  .dl-btn-split {
  flex-direction:column;
  gap:10px
  }

  .dl-btn-split .dl-btn {
  width:100%;
  justify-content:center
  }

  .dl-linux-card {
  padding:16px
  }

  .dl-linux-tabs {
  flex-direction:column
  }

  .dl-linux-code {
  flex-direction:column;
  align-items:stretch;
  gap:8px
  }

  .dl-linux-code code {
  white-space:pre-wrap;
  word-break:break-all;
  font-size:12px;
  overflow-x:visible
  }

  .dl-linux-copy {
  align-self:flex-end
  }
  }

  .faq-section {
  margin-top:-80px;
  overflow:hidden;
  padding-bottom:50px;
  position:relative
  }
  
  
  .faq-hero {
  background:linear-gradient(180deg,var(--color-background) 0%,var(--color-background) 50%,var(--color-background) 100%);
  padding:160px 0 32px;
  position:relative;
  text-align:center
  }
  
  .faq-hero-glow {
  border-radius:50%;
  pointer-events:none;
  position:absolute;
  z-index:0
  }
  
  .faq-hero-glow--pink {
  background:#fa55601f;
  filter:blur(120px);
  height:500px;
  left:-100px;
  top:-200px;
  width:500px
  }
  
  .faq-hero-glow--purple {
  background:#b14bf41a;
  filter:blur(140px);
  height:600px;
  right:-150px;
  top:-150px;
  width:600px
  }
  
  .faq-hero-glow--blue {
  background:#4d91ff0f;
  bottom:-350px;
  filter:blur(160px);
  height:700px;
  left:50%;
  transform:translateX(-50%);
  width:700px
  }
  
  .faq-hero > :not(.faq-hero-glow) {
  position:relative;
  z-index:1
  }
  
  .faq-badge-wrap {
  margin-bottom:16px
  }
  
  .faq-badge {
  background:linear-gradient(81.02deg,#fa55601f -23.47%,#b14bf41f 45.52%,#4d91ff1f 114.8%);
  border:1px solid #b14bf440;
  border-radius:100px;
  display:inline-block;
  font-size:13px;
  font-weight:700;
  letter-spacing:1.5px;
  margin-bottom:24px;
  padding:6px 20px;
  text-transform:uppercase
  }

  .faq-badge span {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560 -23.47%,#b14bf4 45.52%,#4d91ff 114.8%);
  background-clip:text
  }
  
  .faq-hero h1 {
  color:var(--text-primary);
  font-size:52px;
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.1;
  margin-bottom:14px
  }
  
  .faq-hero h1 span {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560 -23.47%,#b14bf4 45.52%,#4d91ff 114.8%);
  background-clip:text;
  display:block
  }
  
  .faq-hero-desc {
  color:var(--text-secondary);
  font-size:16px;
  line-height:1.6;
  margin:0 auto 20px;
  max-width:560px
  }
  
  .faq-hero-pills {
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  justify-content:center
  }
  
  .faq-pill {
  background:linear-gradient(#1e1e32cc,#1e1e32cc) padding-box,linear-gradient(to right,#fd941366,#ff69b4aa,#b14bf4cc,#ac65cbaa,#3aafd388) border-box;
  border:1px solid transparent;
  border-radius:100px;
  color:var(--text-secondary);
  font-size:14px;
  font-weight:600;
  padding:10px 24px
  }
  
  .faq-pill strong {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560,#b14bf4,#4d91ff);
  background-clip:text;
  margin-right:6px
  }
  
  .faq-container {
  margin:0 auto;
  max-width:1200px;
  padding:0 24px;
  position:relative;
  z-index:1
  }
  
  .faq-content {
  border:1px solid var(--border-subtle);
  border-radius:24px;
  margin-bottom:32px;
  padding:48px
  }
  
  .faq-category {
  margin-bottom:40px
  }
  
  .faq-category-title {
  align-items:center;
  border-bottom:2px solid var(--border-subtle);
  color:var(--text-primary);
  display:flex;
  font-size:24px;
  font-weight:700;
  gap:12px;
  margin-bottom:24px;
  padding-bottom:12px
  }
  
  .faq-category-icon {
  align-items:center;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  border-radius:10px;
  display:flex;
  height:40px;
  justify-content:center;
  width:40px
  }
  
  .faq-category-icon svg {
  color:#fff
  }
  
  .faq-item {
  background:linear-gradient(175deg,var(--border-subtle) -94.09%,#ffffff05 154.53%);
  border:1px solid var(--border-subtle);
  border-radius:12px;
  margin-bottom:12px;
  overflow:hidden;
  transition:all .3s ease
  }
  
  .faq-item:hover {
  border-color:var(--border-subtle)
  }
  
  .faq-question {
  align-items:center;
  background:none;
  border:none;
  color:var(--text-primary);
  cursor:pointer;
  display:flex;
  font-size:17px;
  font-weight:600;
  gap:16px;
  justify-content:space-between;
  padding:20px 24px;
  text-align:left;
  transition:all .3s ease;
  width:100%
  }
  
  .faq-question:hover {
  color:#c66bd5
  }
  
  .faq-question:focus {
  outline:none
  }
  
  .faq-icon {
  color:#c66bd5;
  flex-shrink:0;
  transition:transform .3s ease
  }
  
  .faq-item.active .faq-icon {
  transform:rotate(180deg)
  }
  
  .faq-answer {
  max-height:0;
  overflow:hidden;
  transition:max-height .4s ease
  }
  
  .faq-item.active .faq-answer {
  max-height:500px
  }
  
  .faq-answer-inner {
  color:var(--text-secondary);
  font-size:15px;
  line-height:1.8;
  padding:0 24px 20px
  }
  
  .faq-answer-inner a {
  color:#4d91ff;
  text-decoration:none
  }
  
  .faq-answer-inner a:hover {
  color:#c66bd5;
  text-decoration:underline
  }
  
  .faq-cta {
  background:linear-gradient(#0d1017,#0d1017) padding-box,linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%) border-box;
  border:2px solid transparent;
  border-radius:20px;
  margin-top:40px;
  padding:40px;
  text-align:center
  }
  
  .faq-cta h3 {
  color:var(--text-primary);
  font-size:24px;
  font-weight:700;
  margin-bottom:12px
  }
  
  .faq-cta p {
  color:var(--text-secondary);
  font-size:16px;
  margin-bottom:24px
  }
  
  .faq-cta-btn {
  position:relative;
  align-items:center;
  background:linear-gradient(rgba(30,30,50,0.6),rgba(30,30,50,0.6)) padding-box,linear-gradient(81.02deg,#fd941366,#ff69b4aa,#b14bf4cc,#ac65cbaa,#3aafd388) border-box;
  border:1px solid transparent;
  border-radius:14px;
  backdrop-filter:blur(12px) saturate(180%);
  -webkit-backdrop-filter:blur(12px) saturate(180%);
  color:#fff;
  display:inline-flex;
  font-size:16px;
  font-weight:700;
  gap:10px;
  overflow:hidden;
  padding:14px 32px;
  text-decoration:none;
  transition:all .4s ease;
  box-shadow:0 0 20px rgba(255,255,255,0.05),0 6px 24px rgba(0,0,0,0.2),inset 0 1px 1px rgba(255,255,255,0.15),inset 0 -1px 1px rgba(0,0,0,0.3)
  }

  .faq-cta-btn:hover {
  filter:brightness(1.05);
  box-shadow:0 0 30px rgba(177,75,244,0.35),0 0 60px rgba(177,75,244,0.15),0 12px 32px rgba(0,0,0,0.4);
  color:#fff;
  text-decoration:none
  }
  
  .faq-category:last-child,.faq-item:last-child {
  margin-bottom:0
  }
  
  @media (max-width: 768px) {
  .faq-hero {
  padding-top:120px
  }
  
  .faq-hero h1 {
  font-size:30px
  }
  
  .faq-hero-desc {
  font-size:15px
  }
  
  .faq-hero-pills {
  flex-wrap:nowrap;
  gap:10px
  }
  
  .faq-pill:first-child {
  display:none
  }
  
  .faq-pill {
  font-size:13px;
  padding:8px 16px
  }
  
  .faq-content {
  padding:32px 20px
  }
  
  .faq-category-title {
  font-size:20px
  }
  
  .faq-question {
  font-size:15px;
  padding:16px 20px
  }
  
  .faq-answer-inner {
  padding:0 20px 16px
  }
  }
  
  .jobs-section {
  margin-top:-80px;
  overflow:hidden;
  padding-bottom:50px;
  position:relative
  }
  
  
  .jobs-hero {
  background:linear-gradient(180deg,var(--color-background) 0%,var(--color-background) 50%,var(--color-background) 100%);
  margin-bottom:60px;
  padding:160px 0 32px;
  position:relative;
  text-align:center
  }
  
  .jobs-hero-glow {
  border-radius:50%;
  pointer-events:none;
  position:absolute;
  z-index:0
  }
  
  .jobs-hero-glow--pink {
  background:#fa55601f;
  filter:blur(120px);
  height:500px;
  left:-100px;
  top:-200px;
  width:500px
  }
  
  .jobs-hero-glow--purple {
  background:#b14bf41a;
  filter:blur(140px);
  height:600px;
  right:-150px;
  top:-150px;
  width:600px
  }
  
  .jobs-hero-glow--blue {
  background:#4d91ff0f;
  bottom:-350px;
  filter:blur(160px);
  height:700px;
  left:50%;
  transform:translateX(-50%);
  width:700px
  }
  
  .jobs-hero > :not(.jobs-hero-glow) {
  position:relative;
  z-index:1
  }
  
  .jobs-hero h1 {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  background-clip:text;
  display:inline-block;
  font-size:48px;
  font-weight:800;
  margin-bottom:16px
  }
  
  .jobs-hero p {
  color:var(--text-secondary);
  font-size:18px;
  line-height:1.8;
  margin:0 auto;
  max-width:700px
  }
  
  .jobs-container {
  margin:0 auto;
  max-width:1200px;
  padding:0 24px;
  position:relative;
  z-index:1
  }
  
  .jobs-status {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%) border-box;
  border:2px solid transparent;
  border-radius:24px;
  margin-bottom:48px;
  margin-left:auto;
  margin-right:auto;
  max-width:800px;
  padding:60px 48px;
  text-align:center
  }
  
  .jobs-status-icon {
  align-items:center;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  border-radius:50%;
  display:flex;
  height:100px;
  justify-content:center;
  margin:0 auto 24px;
  width:100px
  }
  
  .jobs-status h2 {
  color:var(--text-primary);
  font-size:28px;
  font-weight:700;
  margin-bottom:20px
  }
  
  .jobs-status p {
  color:var(--text-primary);
  font-size:16px;
  line-height:1.8;
  margin-bottom:16px
  }
  
  .apply-btn {
  align-items:center;
  background:linear-gradient(rgba(30,30,50,0.6),rgba(30,30,50,0.6)) padding-box,linear-gradient(81.02deg,#fd941366,#ff69b4aa,#b14bf4cc,#ac65cbaa,#3aafd388) border-box;
  border:1px solid transparent;
  border-radius:14px;
  backdrop-filter:blur(12px) saturate(180%);
  -webkit-backdrop-filter:blur(12px) saturate(180%);
  color:#fff;
  display:inline-flex;
  font-size:16px;
  font-weight:700;
  gap:10px;
  margin-top:16px;
  overflow:hidden;
  padding:16px 40px;
  text-decoration:none;
  transition:all .4s ease;
  box-shadow:0 0 20px rgba(255,255,255,0.05),0 6px 24px rgba(0,0,0,0.2),inset 0 1px 1px rgba(255,255,255,0.15),inset 0 -1px 1px rgba(0,0,0,0.3)
  }

  .apply-btn:hover {
  filter:brightness(1.05);
  box-shadow:0 0 30px rgba(177,75,244,0.35),0 0 60px rgba(177,75,244,0.15),0 12px 32px rgba(0,0,0,0.4);
  color:#fff;
  text-decoration:none
  }
  
  .perks-section {
  margin-top:48px
  }
  
  .perks-section h3 {
  color:var(--text-primary);
  font-size:28px;
  font-weight:700;
  margin-bottom:32px;
  text-align:center
  }
  
  .perks-grid {
  display:grid;
  gap:24px;
  grid-template-columns:repeat(4,1fr)
  }
  
  .perk-card {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(to bottom,#ffffff24,var(--border-subtle)) border-box;
  border:2px solid transparent;
  border-radius:16px;
  padding:32px;
  text-align:center;
  transition:all .3s ease
  }
  
  .perk-card:hover {
  background:linear-gradient(var(--color-primary-light),var(--color-primary-light)) padding-box,linear-gradient(to bottom,#ffffff2e,#ffffff1f) border-box;
  transform:translateY(-5px)
  }
  
  .perk-icon {
  align-items:center;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  border-radius:50%;
  display:flex;
  height:60px;
  justify-content:center;
  margin:0 auto 16px;
  width:60px
  }
  
  .perk-card h4 {
  color:var(--text-primary);
  font-size:18px;
  font-weight:700;
  margin-bottom:8px
  }
  
  .perk-card p {
  color:var(--text-secondary);
  font-size:15px;
  line-height:1.6
  }
  
  .jobs-status-icon svg,.perk-icon svg {
  color:#fff
  }
  
  @media (max-width: 1024px) {
  .perks-grid {
  grid-template-columns:repeat(2,1fr)
  }
  }
  
  @media (max-width: 768px) {
  .jobs-hero h1 {
  font-size:36px
  }
  
  .jobs-hero p {
  font-size:16px
  }
  
  .jobs-status {
  padding:40px 24px
  }
  
  .jobs-status h2 {
  font-size:24px
  }
  
  .perks-grid {
  grid-template-columns:1fr
  }
  }
  
  .feature-section {
  margin-top:-80px;
  overflow:hidden;
  padding-bottom:50px;
  position:relative
  }
  
  
  .feature-hero {
  background:linear-gradient(180deg,var(--color-background) 0%,var(--color-background) 50%,var(--color-background) 100%);
  margin-bottom:60px;
  padding:160px 0 32px;
  position:relative;
  text-align:center
  }
  
  .feature-hero-glow {
  border-radius:50%;
  pointer-events:none;
  position:absolute;
  z-index:0
  }
  
  .feature-hero-glow--pink {
  background:#fa55601f;
  filter:blur(120px);
  height:500px;
  left:-100px;
  top:-200px;
  width:500px
  }
  
  .feature-hero-glow--purple {
  background:#b14bf41a;
  filter:blur(140px);
  height:600px;
  right:-150px;
  top:-150px;
  width:600px
  }
  
  .feature-hero-glow--blue {
  background:#4d91ff0f;
  bottom:-350px;
  filter:blur(160px);
  height:700px;
  left:50%;
  transform:translateX(-50%);
  width:700px
  }
  
  .feature-hero > :not(.feature-hero-glow) {
  position:relative;
  z-index:1
  }
  
  .feature-hero h1 {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  background-clip:text;
  display:inline-block;
  font-size:48px;
  font-weight:800;
  margin-bottom:16px
  }

  .feature-hero p {
  color:var(--text-secondary);
  font-size:18px;
  line-height:1.8;
  margin:0 auto;
  max-width:700px
  }
  
  .feature-container {
  margin:0 auto;
  max-width:1200px;
  padding:0 24px;
  position:relative;
  z-index:1
  }
  
  .feature-content {
  background:linear-gradient(175deg,var(--border-subtle) -94.09%,var(--border-subtle) 154.53%);
  border:1px solid var(--border-subtle);
  border-radius:24px;
  margin-bottom:32px;
  padding:48px
  }
  
  .feature-content h2 {
  border-bottom:2px solid var(--border-subtle);
  color:var(--text-primary);
  font-size:24px;
  font-weight:700;
  margin-bottom:20px;
  margin-top:40px;
  padding-bottom:12px
  }
  
  .feature-content h2:first-child {
  margin-top:0
  }
  
  .feature-content p {
  color:var(--text-primary);
  font-size:16px;
  line-height:1.8;
  margin-bottom:16px
  }
  
  .feature-content ul {
  margin:16px 0 24px 24px
  }
  
  .feature-content li {
  color:var(--text-primary);
  line-height:1.8;
  margin-bottom:8px
  }
  
  .how-it-works-visual {
  align-items:center;
  background:linear-gradient(175deg,var(--border-subtle) -94.09%,#ffffff05 154.53%);
  border-radius:16px;
  display:grid;
  gap:16px;
  grid-template-columns:1fr auto 1fr auto 1fr;
  margin:40px 0;
  padding:32px
  }
  
  .step-box {
  background:linear-gradient(175deg,var(--border-subtle) -94.09%,var(--border-subtle) 154.53%);
  border:1px solid var(--border-subtle);
  border-radius:12px;
  padding:24px;
  text-align:center
  }
  
  .step-box.danger {
  background:linear-gradient(175deg,#fa556026 -94.09%,#fa55600d 154.53%);
  border-color:#fa556080
  }
  
  .step-box.success {
  background:linear-gradient(175deg,#4d91ff26 -94.09%,#4d91ff0d 154.53%);
  border-color:#4d91ff80
  }
  
  .step-icon {
  align-items:center;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  border-radius:50%;
  display:flex;
  height:48px;
  justify-content:center;
  margin:0 auto 12px;
  width:48px
  }
  
  .step-icon svg {
  color:#fff
  }
  
  .step-box h4 {
  color:var(--text-primary);
  font-size:14px;
  font-weight:700;
  margin-bottom:4px
  }
  
  .step-box p {
  color:var(--text-secondary);
  font-size:12px;
  margin:0
  }
  
  .arrow {
  color:var(--text-faint);
  font-size:24px
  }
  
  .scenarios-grid {
  display:grid;
  gap:24px;
  grid-template-columns:repeat(2,1fr);
  margin:32px 0
  }
  
  .scenario-card {
  background:linear-gradient(175deg,var(--border-subtle) -94.09%,var(--border-subtle) 154.53%);
  border:1px solid var(--border-subtle);
  border-radius:16px;
  padding:28px;
  transition:all .3s ease
  }
  
  .scenario-card:hover {
  border-color:var(--border-subtle);
  transform:translateY(-4px)
  }
  
  .scenario-card h3 {
  align-items:center;
  color:var(--text-primary);
  display:flex;
  font-size:18px;
  font-weight:700;
  gap:12px;
  margin-bottom:12px
  }
  
  .scenario-card p {
  color:var(--text-secondary);
  font-size:14px;
  line-height:1.6;
  margin:0
  }
  
  .feature-section .info-box {
  background:linear-gradient(175deg,#4d91ff26 -94.09%,#4d91ff0d 154.53%);
  border-left:4px solid #4d91ff;
  border-radius:8px;
  margin:24px 0;
  padding:24px
  }
  
  .feature-section .info-box p {
  margin-bottom:0
  }
  
  .feature-section .info-box strong {
  color:#4d91ff
  }
  
  .feature-section .cta-section {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%) border-box;
  border:2px solid transparent;
  border-radius:20px;
  padding:48px;
  text-align:center
  }
  
  .feature-section .cta-section h2 {
  color:var(--text-primary);
  font-size:28px;
  font-weight:700;
  margin-bottom:16px
  }
  
  .feature-section .cta-section p {
  color:var(--text-secondary);
  font-size:16px;
  margin-bottom:24px
  }
  
  .feature-section .cta-btn {
  position:relative;
  align-items:center;
  background:linear-gradient(rgba(30,30,50,0.6),rgba(30,30,50,0.6)) padding-box,linear-gradient(81.02deg,#fd941366,#ff69b4aa,#b14bf4cc,#ac65cbaa,#3aafd388) border-box;
  border:1px solid transparent;
  border-radius:14px;
  backdrop-filter:blur(12px) saturate(180%);
  -webkit-backdrop-filter:blur(12px) saturate(180%);
  color:#fff;
  display:inline-flex;
  font-size:16px;
  font-weight:700;
  gap:10px;
  overflow:hidden;
  padding:16px 40px;
  text-decoration:none;
  transition:all .4s ease;
  box-shadow:0 0 20px rgba(255,255,255,0.05),0 6px 24px rgba(0,0,0,0.2),inset 0 1px 1px rgba(255,255,255,0.15),inset 0 -1px 1px rgba(0,0,0,0.3)
  }

  .feature-section .cta-btn:hover {
  filter:brightness(1.05);
  box-shadow:0 0 30px rgba(177,75,244,0.35),0 0 60px rgba(177,75,244,0.15),0 12px 32px rgba(0,0,0,0.4);
  color:#fff;
  text-decoration:none
  }

  .feature-content li::marker,.scenario-card h3 svg {
  color:#c66bd5
  }
  
  @media (max-width: 768px) {
  .feature-hero h1 {
  font-size:36px
  }
  
  .how-it-works-visual {
  gap:12px;
  grid-template-columns:1fr
  }
  
  .arrow {
  transform:rotate(90deg)
  }
  
  .scenarios-grid {
  grid-template-columns:1fr
  }
  
  .feature-content,.feature-section .cta-section {
  padding:32px 24px
  }
  }
  
  .press-section {
  margin-top:-80px;
  overflow:hidden;
  padding-bottom:50px;
  position:relative
  }
  
  
  .press-hero {
  background:linear-gradient(180deg,var(--color-background) 0%,var(--color-background) 50%,var(--color-background) 100%);
  margin-bottom:60px;
  padding:160px 0 32px;
  position:relative;
  text-align:center
  }
  
  .press-hero-glow {
  border-radius:50%;
  pointer-events:none;
  position:absolute;
  z-index:0
  }
  
  .press-hero-glow--pink {
  background:#fa55601f;
  filter:blur(120px);
  height:500px;
  left:-100px;
  top:-200px;
  width:500px
  }
  
  .press-hero-glow--purple {
  background:#b14bf41a;
  filter:blur(140px);
  height:600px;
  right:-150px;
  top:-150px;
  width:600px
  }
  
  .press-hero-glow--blue {
  background:#4d91ff0f;
  bottom:-350px;
  filter:blur(160px);
  height:700px;
  left:50%;
  transform:translateX(-50%);
  width:700px
  }
  
  .press-hero > :not(.press-hero-glow) {
  position:relative;
  z-index:1
  }
  
  .press-hero h1 {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  background-clip:text;
  display:inline-block;
  font-size:48px;
  font-weight:800;
  margin-bottom:16px
  }
  
  .press-hero p {
  color:var(--text-secondary);
  font-size:18px;
  line-height:1.8;
  margin:0 auto;
  max-width:700px
  }
  
  .press-container {
  margin:0 auto;
  max-width:1200px;
  padding:0 24px;
  position:relative;
  z-index:1
  }
  
  .featured-article {
  align-items:center;
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%) border-box;
  border:2px solid transparent;
  border-radius:24px;
  display:grid;
  gap:48px;
  grid-template-columns:1fr 1fr;
  margin-bottom:48px;
  padding:48px
  }
  
  .featured-badge {
  align-items:center;
  background:linear-gradient(#1e1e32cc,#1e1e32cc) padding-box,linear-gradient(to right,#fd941366,#ff69b4aa,#b14bf4cc,#ac65cbaa,#3aafd388) border-box;
  border:1px solid transparent;
  border-radius:100px;
  backdrop-filter:blur(12px) saturate(180%);
  -webkit-backdrop-filter:blur(12px) saturate(180%);
  color:var(--text-secondary);
  display:inline-flex;
  font-size:13px;
  font-weight:700;
  gap:8px;
  letter-spacing:.5px;
  margin-bottom:20px;
  padding:8px 16px;
  text-transform:uppercase
  }
  
  .featured-article h2 {
  color:var(--text-primary);
  font-size:32px;
  font-weight:700;
  line-height:1.3;
  margin-bottom:16px
  }
  
  .featured-article p {
  color:var(--text-secondary);
  font-size:16px;
  line-height:1.8;
  margin-bottom:24px
  }
  
  .featured-meta {
  align-items:center;
  color:var(--text-secondary);
  display:flex;
  font-size:14px;
  gap:20px
  }
  
  .featured-meta span {
  align-items:center;
  display:flex;
  gap:6px
  }
  
  .featured-image {
  align-items:center;
  background:linear-gradient(135deg,#fa556033 0%,#b14bf433 50%,#4d91ff33 100%);
  border-radius:16px;
  display:flex;
  height:300px;
  justify-content:center
  }
  
  .featured-image svg {
  color:var(--text-faint)
  }
  
  .press-grid {
  display:grid;
  gap:24px;
  grid-template-columns:repeat(3,1fr);
  margin-bottom:48px
  }
  
  .press-card {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(to bottom,#ffffff24,var(--border-subtle)) border-box;
  border:2px solid transparent;
  border-radius:16px;
  overflow:hidden;
  transition:all .3s ease
  }
  
  .press-card:hover {
  background:linear-gradient(var(--color-primary-light),var(--color-primary-light)) padding-box,linear-gradient(to bottom,#ffffff2e,#ffffff1f) border-box;
  transform:translateY(-5px)
  }
  
  .press-card-image {
  align-items:center;
  display:flex;
  height:180px;
  justify-content:center
  }
  
  .press-card-image.gradient-1 {
  background:linear-gradient(135deg,#fa55604d 0%,#b14bf426 100%)
  }
  
  .press-card-image.gradient-2 {
  background:linear-gradient(135deg,#4d91ff4d 0%,#b14bf426 100%)
  }
  
  .press-card-image.gradient-3 {
  background:linear-gradient(135deg,#b14bf44d 0%,#fa556026 100%)
  }
  
  .press-card-image svg {
  color:var(--text-muted)
  }
  
  .press-card-content {
  padding:24px
  }
  
  .press-card-category {
  border-radius:4px;
  display:inline-block;
  font-size:12px;
  font-weight:600;
  letter-spacing:.5px;
  margin-bottom:12px;
  padding:4px 10px;
  text-transform:uppercase
  }
  
  .category-privacy {
  background:#4d91ff33;
  color:#4d91ff
  }
  
  .category-security {
  background:#fa556033;
  color:#fa5560
  }
  
  .category-industry {
  background:#b14bf433;
  color:#b14bf4
  }
  
  .category-technology {
  background:#22c55e33;
  color:#22c55e
  }
  
  .category-regulations {
  background:#f59e0b33;
  color:#f59e0b
  }
  
  .press-card h3 {
  color:var(--text-primary);
  font-size:18px;
  font-weight:700;
  line-height:1.4;
  margin-bottom:12px
  }
  
  .press-card p {
  color:var(--text-secondary);
  font-size:14px;
  line-height:1.6;
  margin-bottom:16px
  }
  
  .press-card-meta {
  align-items:center;
  color:var(--text-muted);
  display:flex;
  font-size:13px;
  justify-content:space-between
  }
  
  .industry-stats {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(to bottom,#ffffff24,var(--border-subtle)) border-box;
  border:2px solid transparent;
  border-radius:24px;
  margin-bottom:48px;
  padding:48px;
  text-align:center
  }
  
  .industry-stats h2 {
  color:var(--text-primary);
  font-size:28px;
  font-weight:700;
  margin-bottom:12px
  }
  
  .industry-stats > p {
  color:var(--text-secondary);
  font-size:16px;
  margin-bottom:40px
  }
  
  .stats-grid {
  display:grid;
  gap:32px;
  grid-template-columns:repeat(4,1fr)
  }
  
  .stat-item {
  text-align:center
  }
  
  .stat-value {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  background-clip:text;
  font-size:42px;
  font-weight:800;
  margin-bottom:8px
  }
  
  .stat-label {
  color:var(--text-secondary);
  font-size:14px
  }
  
  .trends-section {
  margin-bottom:48px
  }
  
  .trends-section h2 {
  color:var(--text-primary);
  font-size:28px;
  font-weight:700;
  margin-bottom:32px;
  text-align:center
  }
  
  .trends-grid {
  display:grid;
  gap:24px;
  grid-template-columns:repeat(2,1fr)
  }
  
  .trend-card {
  align-items:flex-start;
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(to bottom,#ffffff24,var(--border-subtle)) border-box;
  border:2px solid transparent;
  border-radius:16px;
  display:flex;
  gap:24px;
  padding:32px;
  transition:all .3s ease
  }
  
  .trend-card:hover {
  background:linear-gradient(var(--color-primary-light),var(--color-primary-light)) padding-box,linear-gradient(to bottom,#ffffff2e,#ffffff1f) border-box;
  transform:translateY(-3px)
  }
  
  .trend-icon {
  align-items:center;
  background:linear-gradient(135deg,#fa5560ff 0%,#b14bf4ff 50%,#4d91ffff 100%);
  border-radius:16px;
  display:flex;
  flex-shrink:0;
  height:60px;
  justify-content:center;
  width:60px
  }
  
  .trend-icon svg {
  color:#fff
  }
  
  .trend-content h3 {
  color:var(--text-primary);
  font-size:20px;
  font-weight:700;
  margin-bottom:8px
  }
  
  .trend-content p {
  color:var(--text-secondary);
  font-size:15px;
  line-height:1.6
  }
  
  .media-contact {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%) border-box;
  border:2px solid transparent;
  border-radius:24px;
  padding:48px;
  text-align:center
  }
  
  .media-contact h2 {
  color:var(--text-primary);
  font-size:28px;
  font-weight:700;
  margin-bottom:16px
  }
  
  .media-contact p {
  color:var(--text-secondary);
  font-size:16px;
  line-height:1.7;
  margin-bottom:32px;
  margin-left:auto;
  margin-right:auto;
  max-width:600px
  }
  
  .contact-btn {
  align-items:center;
  background:linear-gradient(rgba(30,30,50,0.6),rgba(30,30,50,0.6)) padding-box,linear-gradient(81.02deg,#fd941366,#ff69b4aa,#b14bf4cc,#ac65cbaa,#3aafd388) border-box;
  border:1px solid transparent;
  border-radius:14px;
  backdrop-filter:blur(12px) saturate(180%);
  -webkit-backdrop-filter:blur(12px) saturate(180%);
  color:#fff;
  display:inline-flex;
  font-size:16px;
  font-weight:700;
  gap:8px;
  overflow:hidden;
  padding:16px 40px;
  text-decoration:none;
  transition:all .4s ease;
  box-shadow:0 0 20px rgba(255,255,255,0.05),0 6px 24px rgba(0,0,0,0.2),inset 0 1px 1px rgba(255,255,255,0.15),inset 0 -1px 1px rgba(0,0,0,0.3)
  }

  .contact-btn:hover {
  filter:brightness(1.05);
  box-shadow:0 0 30px rgba(177,75,244,0.35),0 0 60px rgba(177,75,244,0.15),0 12px 32px rgba(0,0,0,0.4);
  color:#fff;
  text-decoration:none
  }
  
  @media (max-width: 1024px) {
  .featured-article {
  grid-template-columns:1fr
  }
  
  .featured-image {
  height:200px;
  order:-1
  }
  
  .press-grid {
  grid-template-columns:repeat(2,1fr)
  }
  
  .stats-grid {
  gap:24px;
  grid-template-columns:repeat(2,1fr)
  }
  }
  
  @media (max-width: 768px) {
  .press-hero h1 {
  font-size:36px
  }
  
  .press-hero p {
  font-size:16px
  }
  
  .featured-article h2 {
  font-size:24px
  }
  
  .trend-card {
  flex-direction:column;
  text-align:center
  }
  
  .trend-icon {
  margin:0 auto
  }
  
  .stats-grid {
  grid-template-columns:1fr 1fr
  }
  
  .stat-value {
  font-size:32px
  }
  
  .featured-article,.industry-stats,.media-contact {
  padding:32px 24px
  }
  
  .press-grid,.trends-grid {
  grid-template-columns:1fr
  }
  }
  
  .privacy-section {
  margin-top:-80px;
  padding:0 0 50px
  }
  
  .privacy-hero {
  margin-bottom:60px;
  padding-top:160px;
  text-align:center
  }
  
  .privacy-hero h1 {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  background-clip:text;
  display:inline-block;
  font-size:48px;
  font-weight:800;
  margin-bottom:16px
  }
  
  .privacy-hero p {
  color:var(--text-secondary);
  font-size:18px;
  margin:0 auto;
  max-width:800px
  }
  
  .privacy-container {
  margin:0 auto;
  max-width:1200px;
  padding:0 24px
  }
  
  .privacy-content {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%) border-box;
  border:2px solid transparent;
  border-radius:24px;
  margin-bottom:40px;
  padding:48px
  }
  
  .privacy-intro {
  background:linear-gradient(175deg,var(--border-subtle) -94.09%,#ffffff05 154.53%);
  border-image:linear-gradient(to bottom,#fa5560ff,#b14bf4ff,#4d91ffff) 1;
  border-left:4px solid;
  border-radius:16px;
  color:var(--text-primary);
  font-size:16px;
  line-height:1.8;
  margin-bottom:40px;
  padding:24px
  }
  
  .privacy-section-title {
  align-items:center;
  color:var(--text-primary);
  display:flex;
  font-size:24px;
  font-weight:700;
  gap:16px;
  margin-bottom:24px
  }
  
  .privacy-section-title .title-icon {
  align-items:center;
  background:linear-gradient(135deg,#fa5560ff 0%,#b14bf4ff 50%,#4d91ffff 100%);
  border-radius:50%;
  display:flex;
  flex-shrink:0;
  height:48px;
  justify-content:center;
  width:48px
  }
  
  .privacy-section-title .title-icon svg {
  color:#fff
  }
  
  .privacy-list {
  display:grid;
  gap:16px;
  list-style:none;
  margin:0 0 32px;
  padding:0
  }
  
  .privacy-list li {
  align-items:flex-start;
  background:linear-gradient(175deg,var(--border-subtle) -94.09%,#ffffff05 154.53%);
  border-left:3px solid transparent;
  border-radius:12px;
  color:var(--text-primary);
  display:flex;
  font-size:15px;
  gap:16px;
  line-height:1.7;
  padding:20px;
  transition:all .3s ease
  }
  
  .privacy-list li:hover {
  background:linear-gradient(175deg,var(--border-subtle) -94.09%,var(--border-subtle) 154.53%);
  border-left-color:#c66bd5;
  transform:translateX(4px)
  }
  
  .privacy-list li svg {
  color:#c66bd5;
  flex-shrink:0;
  margin-top:2px
  }
  
  .privacy-list li a {
  color:#c66bd5;
  font-weight:600;
  text-decoration:none;
  transition:opacity .3s ease
  }
  
  .privacy-list li a:hover {
  opacity:.8;
  text-decoration:underline
  }
  
  .privacy-text-block {
  background:linear-gradient(175deg,var(--border-subtle) -94.09%,#ffffff05 154.53%);
  border-radius:12px;
  color:var(--text-primary);
  font-size:16px;
  line-height:1.8;
  margin-bottom:32px;
  padding:20px
  }
  
  .privacy-footer-note {
  background:linear-gradient(var(--color-primary-light),var(--color-primary-light)) padding-box,linear-gradient(to bottom,#ffffff24,var(--border-subtle)) border-box;
  border:2px solid transparent;
  border-radius:16px;
  color:var(--text-primary);
  font-size:16px;
  font-weight:500;
  line-height:1.8;
  padding:24px;
  text-align:center
  }
  
  .privacy-highlight {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  background-clip:text;
  font-weight:600
  }
  
  .privacy-list li strong,.privacy-text-block strong {
  color:var(--text-primary);
  font-weight:600
  }
  
  @media (max-width: 768px) {
  .privacy-hero h1 {
  font-size:36px
  }
  
  .privacy-content {
  padding:32px 24px
  }
  
  .privacy-section-title {
  font-size:20px
  }
  
  .privacy-list li {
  font-size:14px;
  padding:16px
  }
  
  .privacy-text-block {
  font-size:15px;
  padding:16px
  }
  
  .privacy-intro,.privacy-footer-note {
  font-size:15px;
  padding:20px
  }
  }
  
  .refund-section {
  margin-top:-80px;
  overflow:hidden;
  padding-bottom:50px;
  position:relative
  }
  
  
  .refund-hero {
  background:linear-gradient(180deg,var(--color-background) 0%,var(--color-background) 50%,var(--color-background) 100%);
  margin-bottom:60px;
  padding:160px 0 32px;
  position:relative;
  text-align:center
  }
  
  .refund-hero-glow {
  border-radius:50%;
  pointer-events:none;
  position:absolute;
  z-index:0
  }
  
  .refund-hero-glow--pink {
  background:#fa55601f;
  filter:blur(120px);
  height:500px;
  left:-100px;
  top:-200px;
  width:500px
  }
  
  .refund-hero-glow--purple {
  background:#b14bf41a;
  filter:blur(140px);
  height:600px;
  right:-150px;
  top:-150px;
  width:600px
  }
  
  .refund-hero-glow--blue {
  background:#4d91ff0f;
  bottom:-350px;
  filter:blur(160px);
  height:700px;
  left:50%;
  transform:translateX(-50%);
  width:700px
  }
  
  .refund-hero > :not(.refund-hero-glow) {
  position:relative;
  z-index:1
  }
  
  .refund-hero h1 {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  background-clip:text;
  display:inline-block;
  font-size:48px;
  font-weight:800;
  margin-bottom:16px
  }
  
  .refund-hero p {
  color:var(--text-secondary);
  font-size:18px;
  line-height:1.6;
  margin:0 auto;
  max-width:700px
  }
  
  .refund-container {
  margin:0 auto;
  max-width:1200px;
  padding:0 24px;
  position:relative;
  z-index:1
  }
  
  .guarantee-card {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%) border-box;
  border:2px solid transparent;
  border-radius:24px;
  margin-bottom:32px;
  padding:48px;
  text-align:center
  }
  
  .guarantee-badge {
  align-items:center;
  background:linear-gradient(81.02deg,#fa556033 -23.47%,#b14bf433 45.52%,#4d91ff33 114.8%);
  border-radius:50%;
  display:inline-flex;
  height:100px;
  justify-content:center;
  margin-bottom:24px;
  width:100px
  }
  
  .guarantee-badge span {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  background-clip:text;
  font-size:36px;
  font-weight:800
  }
  
  .guarantee-card h2 {
  color:var(--text-primary);
  font-size:32px;
  font-weight:700;
  margin-bottom:16px
  }
  
  .guarantee-card p {
  color:var(--text-secondary);
  font-size:16px;
  line-height:1.7;
  margin:0 auto;
  max-width:550px
  }
  
  .refund-content {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(to bottom,#ffffff24,var(--border-subtle)) border-box;
  border:2px solid transparent;
  border-radius:24px;
  margin-bottom:32px;
  padding:48px
  }
  
  .refund-content h2 {
  border-bottom:2px solid var(--border-subtle);
  color:var(--text-primary);
  font-size:24px;
  font-weight:700;
  margin-bottom:20px;
  margin-top:40px;
  padding-bottom:12px
  }
  
  .refund-content h2:first-child {
  margin-top:0
  }
  
  .refund-content p {
  color:var(--text-primary);
  font-size:16px;
  line-height:1.8;
  margin-bottom:16px
  }
  
  .refund-content ul,.refund-content ol {
  margin:16px 0 24px 24px
  }
  
  .refund-content li {
  color:var(--text-primary);
  line-height:1.8;
  margin-bottom:8px
  }
  
  .refund-content li::marker {
  color:#c66bd5
  }
  
  .refund-section .success-box {
  background:linear-gradient(175deg,#22c55e26 -94.09%,#22c55e0d 154.53%);
  border-left:4px solid #22c55e;
  border-radius:8px;
  margin:24px 0;
  padding:24px
  }
  
  .refund-section .success-box strong {
  color:#22c55e
  }
  
  .refund-section .warning-box {
  background:linear-gradient(175deg,#fa556026 -94.09%,#fa55600d 154.53%);
  border-left:4px solid #fa5560;
  border-radius:8px;
  margin:24px 0;
  padding:24px
  }
  
  .refund-section .warning-box strong {
  color:#fa5560
  }
  
  .refund-section .info-box {
  background:linear-gradient(175deg,#4d91ff26 -94.09%,#4d91ff0d 154.53%);
  border-left:4px solid #4d91ff;
  border-radius:8px;
  margin:24px 0;
  padding:24px
  }
  
  .refund-section .info-box p {
  margin-bottom:0
  }
  
  .refund-section .info-box strong {
  color:#4d91ff
  }
  
  .steps-grid {
  display:grid;
  gap:20px;
  grid-template-columns:repeat(3,1fr);
  margin:32px 0
  }
  
  .step-card {
  background:linear-gradient(175deg,var(--border-subtle) -94.09%,var(--border-subtle) 154.53%);
  border:1px solid var(--border-subtle);
  border-radius:16px;
  padding:28px;
  text-align:center
  }
  
  .step-number {
  align-items:center;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  border-radius:50%;
  color:#fff;
  display:flex;
  font-size:18px;
  font-weight:700;
  height:40px;
  justify-content:center;
  margin:0 auto 16px;
  width:40px
  }
  
  .step-card h3 {
  color:var(--text-primary);
  font-size:16px;
  font-weight:600;
  margin-bottom:8px
  }
  
  .step-card p {
  color:var(--text-secondary);
  font-size:14px;
  line-height:1.5;
  margin:0
  }
  
  .contact-box {
  background:linear-gradient(175deg,var(--border-subtle) -94.09%,#ffffff05 154.53%);
  border:1px solid var(--border-subtle);
  border-radius:12px;
  margin-top:32px;
  padding:24px;
  text-align:center
  }
  
  .contact-box p {
  color:var(--text-secondary);
  margin:0 0 16px
  }
  
  .contact-box a {
  align-items:center;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  border-radius:8px;
  color:var(--text-primary);
  display:inline-flex;
  font-weight:600;
  gap:8px;
  padding:12px 24px;
  text-decoration:none;
  transition:opacity .2s ease
  }
  
  .contact-box a:hover {
  opacity:.9
  }
  
  .refund-section .success-box p,.refund-section .warning-box p {
  color:var(--text-primary);
  margin-bottom:0
  }
  
  @media (max-width: 768px) {
  .refund-hero h1 {
  font-size:36px
  }
  
  .guarantee-card,.refund-content {
  padding:32px 24px
  }
  
  .steps-grid {
  grid-template-columns:1fr
  }
  }
  
  .regulations-section {
  margin-top:-80px;
  overflow:hidden;
  padding-bottom:50px;
  position:relative
  }
  
  
  .regulations-hero {
  background:linear-gradient(180deg,var(--color-background) 0%,var(--color-background) 50%,var(--color-background) 100%);
  margin-bottom:60px;
  padding:160px 0 32px;
  position:relative;
  text-align:center
  }
  
  .regulations-hero-glow {
  border-radius:50%;
  pointer-events:none;
  position:absolute;
  z-index:0
  }
  
  .regulations-hero-glow--pink {
  background:#fa55601f;
  filter:blur(120px);
  height:500px;
  left:-100px;
  top:-200px;
  width:500px
  }
  
  .regulations-hero-glow--purple {
  background:#b14bf41a;
  filter:blur(140px);
  height:600px;
  right:-150px;
  top:-150px;
  width:600px
  }
  
  .regulations-hero-glow--blue {
  background:#4d91ff0f;
  bottom:-350px;
  filter:blur(160px);
  height:700px;
  left:50%;
  transform:translateX(-50%);
  width:700px
  }
  
  .regulations-hero > :not(.regulations-hero-glow) {
  position:relative;
  z-index:1
  }
  
  .regulations-hero h1 {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  background-clip:text;
  display:inline-block;
  font-size:48px;
  font-weight:800;
  margin-bottom:16px
  }
  
  .regulations-hero p {
  color:var(--text-secondary);
  font-size:18px;
  font-style:italic
  }
  
  .regulations-container {
  margin:0 auto;
  max-width:1200px;
  padding:0 24px;
  position:relative;
  z-index:1
  }
  
  .regulations-content {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%) border-box;
  border:2px solid transparent;
  border-radius:24px;
  padding:48px
  }
  
  .regulations-content h2 {
  border-bottom:2px solid var(--border-subtle);
  color:var(--text-primary);
  font-size:24px;
  font-weight:700;
  margin-bottom:20px;
  margin-top:40px;
  padding-bottom:12px
  }
  
  .regulations-content h2:first-child {
  margin-top:0
  }
  
  .regulations-content p {
  color:var(--text-primary);
  font-size:16px;
  line-height:1.8;
  margin-bottom:16px
  }
  
  .regulations-content ul {
  margin:16px 0 24px 24px
  }
  
  .regulations-content li {
  color:var(--text-primary);
  line-height:1.8;
  margin-bottom:8px;
  position:relative
  }
  
  .regulations-content .info-box {
  background:linear-gradient(175deg,#4d91ff26 -94.09%,#4d91ff0d 154.53%);
  border-left:4px solid #4d91ff;
  border-radius:8px;
  margin:24px 0;
  padding:24px
  }
  
  .regulations-content .info-box p:last-child {
  margin-bottom:0
  }
  
  .regulations-content .info-box strong {
  color:#4d91ff
  }
  
  .contact-box {
  background:linear-gradient(175deg,var(--border-subtle) -94.09%,var(--border-subtle) 154.53%);
  border-left:4px solid #c66bd5;
  border-radius:8px;
  margin:40px 0 0;
  padding:24px
  }
  
  .contact-box h3 {
  color:var(--text-primary);
  font-size:20px;
  font-weight:700;
  margin-bottom:16px
  }
  
  .contact-box a {
  color:#4d91ff;
  text-decoration:none;
  transition:all .3s ease
  }
  
  .contact-box a:hover {
  color:#c66bd5;
  text-decoration:underline
  }
  
  .regulations-content li::marker,.contact-box strong {
  color:#c66bd5
  }
  
  .regulations-content .info-box p,.contact-box p {
  margin-bottom:8px
  }
  
  @media (max-width: 768px) {
  .regulations-hero h1 {
  font-size:36px
  }
  
  .regulations-content {
  padding:32px 24px
  }
  
  .regulations-content h2 {
  font-size:20px
  }
  }
  
  .streaming-section {
  margin-top:-80px;
  overflow:hidden;
  padding-bottom:50px;
  position:relative
  }
  
  
  .streaming-hero {
  background:linear-gradient(180deg,var(--color-background) 0%,var(--color-background) 50%,var(--color-background) 100%);
  margin-bottom:60px;
  padding:160px 0 32px;
  position:relative;
  text-align:center
  }
  
  .streaming-hero-glow {
  border-radius:50%;
  pointer-events:none;
  position:absolute;
  z-index:0
  }
  
  .streaming-hero-glow--pink {
  background:#fa55601f;
  filter:blur(120px);
  height:500px;
  left:-100px;
  top:-200px;
  width:500px
  }
  
  .streaming-hero-glow--purple {
  background:#b14bf41a;
  filter:blur(140px);
  height:600px;
  right:-150px;
  top:-150px;
  width:600px
  }
  
  .streaming-hero-glow--blue {
  background:#4d91ff0f;
  bottom:-350px;
  filter:blur(160px);
  height:700px;
  left:50%;
  transform:translateX(-50%);
  width:700px
  }
  
  .streaming-hero > :not(.streaming-hero-glow) {
  position:relative;
  z-index:1
  }
  
  .streaming-hero h1 {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  background-clip:text;
  display:inline-block;
  font-size:48px;
  font-weight:800;
  margin-bottom:16px
  }

  .streaming-hero p {
  color:var(--text-secondary);
  font-size:18px;
  line-height:1.8;
  margin:0 auto;
  max-width:700px
  }
  
  .streaming-container {
  margin:0 auto;
  max-width:1200px;
  padding:0 24px;
  position:relative;
  z-index:1
  }
  
  .platforms-grid {
  display:grid;
  gap:24px;
  grid-template-columns:repeat(4,1fr);
  margin-bottom:48px
  }
  
  .platform-card {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(to bottom,#ffffff24,var(--border-subtle)) border-box;
  border:2px solid transparent;
  border-radius:16px;
  padding:32px 24px;
  text-align:center;
  transition:all .3s ease
  }
  
  .platform-card:hover {
  background:linear-gradient(var(--color-primary-light),var(--color-primary-light)) padding-box,linear-gradient(81.02deg,#fa556080 -23.47%,#b14bf480 45.52%,#4d91ff80 114.8%) border-box;
  transform:translateY(-4px)
  }
  
  .platform-logo {
  font-size:48px;
  margin-bottom:16px
  }
  
  .platform-card p {
  color:var(--text-secondary);
  font-size:13px
  }
  
  .streaming-content {
  background:linear-gradient(175deg,var(--border-subtle) -94.09%,var(--border-subtle) 154.53%);
  border:1px solid var(--border-subtle);
  border-radius:24px;
  margin-bottom:32px;
  padding:48px
  }
  
  .streaming-content h2 {
  border-bottom:2px solid var(--border-subtle);
  color:var(--text-primary);
  font-size:24px;
  font-weight:700;
  margin-bottom:20px;
  margin-top:40px;
  padding-bottom:12px
  }
  
  .streaming-content h2:first-child {
  margin-top:0
  }
  
  .streaming-content p {
  color:var(--text-primary);
  font-size:16px;
  line-height:1.8;
  margin-bottom:16px
  }
  
  .streaming-content ul {
  margin:16px 0 24px 24px
  }
  
  .streaming-content li {
  color:var(--text-primary);
  line-height:1.8;
  margin-bottom:8px
  }
  
  .streaming-content li::marker {
  color:#c66bd5
  }
  
  .streaming-section .benefits-grid {
  display:grid;
  gap:24px;
  grid-template-columns:repeat(3,1fr);
  margin:32px 0
  }

  .streaming-section .benefit-card {
  background:linear-gradient(175deg,var(--border-subtle) -94.09%,var(--border-subtle) 154.53%);
  border:1px solid var(--border-subtle);
  border-radius:16px;
  display:block;
  gap:0;
  padding:28px;
  text-align:center;
  transition:all .3s ease
  }

  .streaming-section .benefit-card:hover {
  border-color:var(--border-subtle);
  transform:translateY(-4px)
  }

  .streaming-section .benefit-icon {
  align-items:center;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  border-radius:50%;
  display:flex;
  height:56px;
  justify-content:center;
  margin:0 auto 16px;
  width:56px
  }

  .streaming-section .benefit-icon svg {
  color:#fff
  }

  .streaming-section .benefit-card p {
  color:var(--text-secondary);
  font-size:14px;
  line-height:1.6;
  margin:0
  }
  
  .devices-section {
  margin-top:32px
  }
  
  .devices-grid {
  display:grid;
  gap:16px;
  grid-template-columns:repeat(6,1fr);
  margin-top:24px
  }
  
  .device-item {
  background:linear-gradient(175deg,var(--border-subtle) -94.09%,#ffffff05 154.53%);
  border:1px solid var(--border-subtle);
  border-radius:12px;
  padding:20px;
  text-align:center;
  transition:all .3s ease
  }
  
  .device-item:hover {
  border-color:var(--border-subtle)
  }
  
  .device-item svg {
  color:#c66bd5;
  display:block;
  fill:#c66bd5;
  margin-bottom:8px;
  margin-left:auto;
  margin-right:auto
  }
  
  .device-item p {
  color:var(--text-secondary);
  font-size:13px;
  margin:0
  }
  
  .streaming-section .info-box {
  background:linear-gradient(175deg,#4d91ff26 -94.09%,#4d91ff0d 154.53%);
  border-left:4px solid #4d91ff;
  border-radius:8px;
  margin:24px 0;
  padding:24px
  }
  
  .streaming-section .info-box p {
  margin-bottom:0
  }
  
  .streaming-section .info-box strong {
  color:#4d91ff
  }
  
  .streaming-section .cta-section {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%) border-box;
  border:2px solid transparent;
  border-radius:20px;
  padding:48px;
  text-align:center
  }
  
  .streaming-section .cta-section h2 {
  color:var(--text-primary);
  font-size:28px;
  font-weight:700;
  margin-bottom:16px
  }
  
  .streaming-section .cta-section p {
  color:var(--text-secondary);
  font-size:16px;
  margin-bottom:24px
  }
  
  .streaming-section .cta-btn {
  position:relative;
  align-items:center;
  background:linear-gradient(rgba(30,30,50,0.6),rgba(30,30,50,0.6)) padding-box,linear-gradient(81.02deg,#fd941366,#ff69b4aa,#b14bf4cc,#ac65cbaa,#3aafd388) border-box;
  border:1px solid transparent;
  border-radius:14px;
  backdrop-filter:blur(12px) saturate(180%);
  -webkit-backdrop-filter:blur(12px) saturate(180%);
  color:#fff;
  display:inline-flex;
  font-size:16px;
  font-weight:700;
  gap:10px;
  overflow:hidden;
  padding:16px 40px;
  text-decoration:none;
  transition:all .4s ease;
  box-shadow:0 0 20px rgba(255,255,255,0.05),0 6px 24px rgba(0,0,0,0.2),inset 0 1px 1px rgba(255,255,255,0.15),inset 0 -1px 1px rgba(0,0,0,0.3)
  }

  .streaming-section .cta-btn:hover {
  filter:brightness(1.05);
  box-shadow:0 0 30px rgba(177,75,244,0.35),0 0 60px rgba(177,75,244,0.15),0 12px 32px rgba(0,0,0,0.4);
  color:#fff;
  text-decoration:none
  }

  .platform-card h3,.streaming-section .benefit-card h3 {
  color:var(--text-primary);
  font-size:18px;
  font-weight:700;
  margin-bottom:8px
  }
  
  @media (max-width: 768px) {
  .streaming-hero h1 {
  font-size:36px
  }
  
  .platforms-grid {
  grid-template-columns:repeat(2,1fr)
  }
  
  .streaming-section .benefits-grid {
  grid-template-columns:1fr
  }

  .devices-grid {
  grid-template-columns:repeat(3,1fr)
  }

  .streaming-content,.streaming-section .cta-section {
  padding:32px 24px
  }
  }
  
  .bg-grid {
  background-image:linear-gradient(to right,#ffffff09 2px,transparent 2px),linear-gradient(to bottom,#ffffff09 2px,transparent 2px);
  background-image:linear-gradient(to right,#ffffff09 2px,transparent 2px),linear-gradient(to bottom,#ffffff09 2px,transparent 2px);
  background-size:120px 120px;
  background-size:120px 120px
  }
  
  .mask-fade {
  -webkit-mask-composite:destination-in;
  -webkit-mask-composite:destination-in;
  -webkit-mask-image:linear-gradient(to bottom,transparent,white 10%,white 90%,transparent),linear-gradient(to right,transparent,white 10%,white 90%,transparent);
  -webkit-mask-image:linear-gradient(to bottom,transparent,white 10%,white 90%,transparent),linear-gradient(to right,transparent,white 10%,white 90%,transparent);
  mask-composite:multiply;
  mask-composite:multiply;
  mask-image:linear-gradient(to bottom,transparent,white 10%,white 90%,transparent),linear-gradient(to right,transparent,white 10%,white 90%,transparent);
  mask-image:linear-gradient(to bottom,transparent,white 10%,white 90%,transparent),linear-gradient(to right,transparent,white 10%,white 90%,transparent);
  mask-mode:alpha;
  mask-mode:alpha
  }
  
  .tos-section {
  margin-top:-80px;
  overflow:hidden;
  padding-bottom:50px;
  position:relative
  }
  
  
  .tos-hero {
  background:linear-gradient(180deg,var(--color-background) 0%,var(--color-background) 50%,var(--color-background) 100%);
  margin-bottom:60px;
  padding:160px 0 32px;
  position:relative;
  text-align:center
  }
  
  .tos-hero-glow {
  border-radius:50%;
  pointer-events:none;
  position:absolute;
  z-index:0
  }
  
  .tos-hero-glow--pink {
  background:#fa55601f;
  filter:blur(120px);
  height:500px;
  left:-100px;
  top:-200px;
  width:500px
  }
  
  .tos-hero-glow--purple {
  background:#b14bf41a;
  filter:blur(140px);
  height:600px;
  right:-150px;
  top:-150px;
  width:600px
  }
  
  .tos-hero-glow--blue {
  background:#4d91ff0f;
  bottom:-350px;
  filter:blur(160px);
  height:700px;
  left:50%;
  transform:translateX(-50%);
  width:700px
  }
  
  .tos-hero > :not(.tos-hero-glow) {
  position:relative;
  z-index:1
  }
  
  .tos-hero h1 {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  background-clip:text;
  display:inline-block;
  font-size:48px;
  font-weight:800;
  margin-bottom:16px
  }
  
  .tos-hero p {
  color:var(--text-secondary);
  font-size:18px;
  font-style:italic
  }
  
  .tos-hero .effective-date {
  color:var(--text-muted);
  font-size:14px;
  font-style:normal;
  margin-top:16px
  }
  
  .tos-container {
  margin:0 auto;
  max-width:1200px;
  padding:0 24px;
  position:relative;
  z-index:1
  }
  
  .tos-content {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%) border-box;
  border:2px solid transparent;
  border-radius:24px;
  padding:48px
  }
  
  .intro-box {
  background:linear-gradient(175deg,#4d91ff26 -94.09%,#4d91ff0d 154.53%);
  border-left:4px solid #4d91ff;
  border-radius:12px;
  margin-bottom:32px;
  padding:28px
  }
  
  .intro-box p {
  color:var(--text-primary);
  font-size:16px;
  line-height:1.8;
  margin-bottom:12px
  }
  
  .intro-box p:last-child {
  margin-bottom:0
  }
  
  .intro-box strong {
  color:#4d91ff
  }
  
  .important-notice {
  background:linear-gradient(175deg,#f59e0b26 -94.09%,#f59e0b0d 154.53%);
  border-left:4px solid #f59e0b;
  border-radius:8px;
  margin:24px 0;
  padding:24px
  }
  
  .important-notice strong {
  color:#f59e0b
  }
  
  .warning-box {
  background:linear-gradient(175deg,#fa556026 -94.09%,#fa55600d 154.53%);
  border-left:4px solid #fa5560;
  border-radius:8px;
  margin:24px 0;
  padding:24px
  }
  
  .warning-box strong {
  color:#fa5560
  }
  
  .tos-content h2 {
  align-items:center;
  border-bottom:2px solid var(--border-subtle);
  color:var(--text-primary);
  display:flex;
  font-size:24px;
  font-weight:700;
  gap:12px;
  margin-bottom:20px;
  margin-top:40px;
  padding-bottom:12px
  }
  
  .tos-content h2:first-of-type {
  margin-top:0
  }
  
  .section-number {
  align-items:center;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  border-radius:8px;
  color:#fff;
  display:inline-flex;
  font-size:16px;
  font-weight:700;
  height:36px;
  justify-content:center;
  min-width:36px
  }
  
  .tos-content h3 {
  color:var(--text-primary);
  font-size:18px;
  font-weight:600;
  margin-bottom:16px;
  margin-top:28px
  }
  
  .tos-content p {
  color:var(--text-primary);
  font-size:16px;
  line-height:1.8;
  margin-bottom:16px
  }
  
  .tos-content ul,.tos-content ol {
  margin:16px 0 24px 24px
  }
  
  .tos-content li {
  color:var(--text-primary);
  line-height:1.8;
  margin-bottom:8px
  }
  
  .provision-item {
  border-left:2px solid var(--border-subtle);
  margin-bottom:16px;
  padding-left:16px
  }
  
  .provision-number {
  color:#c66bd5;
  font-weight:600;
  margin-right:8px
  }
  
  .definition-grid {
  display:grid;
  gap:12px;
  margin:20px 0
  }
  
  .definition-item {
  background:var(--border-subtle);
  border:1px solid var(--border-subtle);
  border-radius:10px;
  padding:16px 20px
  }
  
  .platform-grid {
  display:grid;
  gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  margin:20px 0
  }
  
  .platform-item {
  background:var(--border-subtle);
  border:1px solid var(--border-subtle);
  border-radius:10px;
  color:var(--text-primary);
  font-weight:500;
  padding:16px;
  text-align:center
  }
  
  .contact-box {
  background:linear-gradient(175deg,var(--border-subtle) -94.09%,var(--border-subtle) 154.53%);
  border-left:4px solid #c66bd5;
  border-radius:8px;
  margin:40px 0 0;
  padding:24px
  }
  
  .contact-box h3 {
  color:var(--text-primary);
  font-size:20px;
  font-weight:700;
  margin-bottom:16px
  }
  
  .contact-box p {
  margin-bottom:8px
  }
  
  .contact-box a {
  color:#4d91ff;
  text-decoration:none;
  transition:all .3s ease
  }
  
  .contact-box a:hover {
  color:#c66bd5;
  text-decoration:underline
  }


  .toc-box {
  background:var(--border-subtle);
  border:1px solid var(--border-subtle);
  border-radius:12px;
  margin-bottom:32px;
  padding:24px
  }
  
  .toc-box h3 {
  color:var(--text-primary);
  font-size:16px;
  font-weight:600;
  letter-spacing:.5px;
  margin-bottom:16px;
  text-transform:uppercase
  }
  
  .toc-list {
  display:grid;
  gap:8px 24px;
  grid-template-columns:repeat(2,1fr);
  list-style:none;
  margin:0;
  padding:0
  }
  
  .toc-list li {
  margin:0
  }
  
  .toc-list a {
  color:var(--text-secondary);
  font-size:14px;
  text-decoration:none;
  transition:color .2s ease
  }
  
  .important-notice p,.warning-box p {
  color:var(--text-primary);
  margin-bottom:0
  }
  
  .tos-content li::marker,.definition-item strong,.contact-box strong,.toc-list a:hover {
  color:#c66bd5
  }
  
  @media (max-width: 768px) {
  .tos-hero h1 {
  font-size:36px
  }
  
  .tos-content {
  padding:32px 24px
  }
  
  .tos-content h2 {
  font-size:20px
  }
  
  .toc-list {
  grid-template-columns:1fr
  }
  
  .platform-grid {
  grid-template-columns:repeat(2,1fr)
  }
  }
  
  .transparency-section {
  margin-top:-80px;
  overflow:hidden;
  padding-bottom:50px;
  position:relative
  }
  
  
  .transparency-hero {
  background:linear-gradient(180deg,var(--color-background) 0%,var(--color-background) 50%,var(--color-background) 100%);
  margin-bottom:60px;
  padding:160px 0 32px;
  position:relative;
  text-align:center
  }
  
  .transparency-hero-glow {
  border-radius:50%;
  pointer-events:none;
  position:absolute;
  z-index:0
  }
  
  .transparency-hero-glow--pink {
  background:#fa55601f;
  filter:blur(120px);
  height:500px;
  left:-100px;
  top:-200px;
  width:500px
  }
  
  .transparency-hero-glow--purple {
  background:#b14bf41a;
  filter:blur(140px);
  height:600px;
  right:-150px;
  top:-150px;
  width:600px
  }
  
  .transparency-hero-glow--blue {
  background:#4d91ff0f;
  bottom:-350px;
  filter:blur(160px);
  height:700px;
  left:50%;
  transform:translateX(-50%);
  width:700px
  }
  
  .transparency-hero > :not(.transparency-hero-glow) {
  position:relative;
  z-index:1
  }
  
  .transparency-hero h1 {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  background-clip:text;
  display:inline-block;
  font-size:48px;
  font-weight:800;
  margin-bottom:16px
  }
  
  .transparency-hero p {
  color:var(--text-secondary);
  font-size:18px;
  line-height:1.6;
  margin:0 auto;
  max-width:700px
  }
  
  .transparency-container {
  margin:0 auto;
  max-width:1200px;
  padding:0 24px;
  position:relative;
  z-index:1
  }
  
  .stats-grid {
  display:grid;
  gap:24px;
  grid-template-columns:repeat(3,1fr);
  margin-bottom:48px
  }
  
  .stat-card {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%) border-box;
  border:2px solid transparent;
  border-radius:20px;
  padding:36px;
  text-align:center
  }
  
  .stat-number {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  background-clip:text;
  font-size:56px;
  font-weight:800;
  margin-bottom:8px
  }
  
  .stat-label {
  color:var(--text-secondary);
  font-size:16px;
  line-height:1.4
  }
  
  .transparency-content {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(to bottom,#ffffff24,var(--border-subtle)) border-box;
  border:2px solid transparent;
  border-radius:24px;
  margin-bottom:32px;
  padding:48px
  }
  
  .transparency-content h2 {
  border-bottom:2px solid var(--border-subtle);
  color:var(--text-primary);
  font-size:24px;
  font-weight:700;
  margin-bottom:20px;
  margin-top:40px;
  padding-bottom:12px
  }
  
  .transparency-content h2:first-child {
  margin-top:0
  }
  
  .transparency-content p {
  color:var(--text-primary);
  font-size:16px;
  line-height:1.8;
  margin-bottom:16px
  }
  
  .transparency-content ul {
  margin:16px 0 24px 24px
  }
  
  .transparency-content li {
  color:var(--text-primary);
  line-height:1.8;
  margin-bottom:8px
  }
  
  .transparency-content li::marker {
  color:#c66bd5
  }
  
  .request-table {
  border-collapse:collapse;
  margin:24px 0;
  width:100%
  }
  
  .request-table th,.request-table td {
  border-bottom:1px solid var(--border-subtle);
  padding:16px;
  text-align:left
  }
  
  .request-table th {
  color:var(--text-muted);
  font-size:12px;
  font-weight:600;
  letter-spacing:.5px;
  text-transform:uppercase
  }
  
  .request-table td {
  color:var(--text-primary);
  font-size:15px
  }
  
  .request-table tr:last-child td {
  border-bottom:none
  }
  
  .request-table .period {
  color:var(--text-primary);
  font-weight:600
  }
  
  .request-table .number {
  color:#c66bd5;
  font-family:monospace;
  font-size:16px
  }
  
  .transparency-section .info-box {
  background:linear-gradient(175deg,#4d91ff26 -94.09%,#4d91ff0d 154.53%);
  border-left:4px solid #4d91ff;
  border-radius:8px;
  margin:24px 0;
  padding:24px
  }
  
  .transparency-section .info-box p {
  margin-bottom:0
  }
  
  .transparency-section .info-box strong {
  color:#4d91ff
  }
  
  .transparency-section .success-box {
  background:linear-gradient(175deg,#22c55e26 -94.09%,#22c55e0d 154.53%);
  border-left:4px solid #22c55e;
  border-radius:8px;
  margin:24px 0;
  padding:24px
  }
  
  .transparency-section .success-box p {
  color:var(--text-primary);
  margin-bottom:0
  }
  
  .principles-grid {
  display:grid;
  gap:24px;
  grid-template-columns:repeat(2,1fr);
  margin:32px 0
  }
  
  .principle-card {
  background:linear-gradient(175deg,var(--border-subtle) -94.09%,var(--border-subtle) 154.53%);
  border:1px solid var(--border-subtle);
  border-radius:16px;
  padding:28px
  }
  
  .principle-card h3 {
  align-items:center;
  color:var(--text-primary);
  display:flex;
  font-size:18px;
  font-weight:700;
  gap:12px;
  margin-bottom:12px
  }
  
  .principle-card p {
  color:var(--text-secondary);
  font-size:14px;
  line-height:1.6;
  margin:0
  }
  
  .tr-update-notice,.update-notice {
  background:linear-gradient(175deg,var(--border-subtle) -94.09%,#ffffff05 154.53%);
  border-radius:12px;
  margin-top:32px;
  padding:24px;
  text-align:center
  }
  
  .tr-update-notice p,.update-notice p {
  color:var(--text-secondary);
  font-size:14px;
  margin:0
  }
  
  .tr-update-notice strong,.update-notice strong {
  color:var(--text-primary)
  }
  
  .transparency-section .success-box strong,.principle-card h3 svg {
  color:#22c55e
  }
  
  @media (max-width: 768px) {
  .transparency-hero h1 {
  font-size:36px
  }
  
  .transparency-content {
  padding:32px 24px
  }
  
  .request-table {
  font-size:14px
  }
  
  .request-table th,.request-table td {
  padding:12px 8px
  }
  
  .stats-grid,.principles-grid {
  grid-template-columns:1fr
  }
  }
  
  .canary-section {
  margin-top:-80px;
  overflow:hidden;
  padding-bottom:50px;
  position:relative
  }
  
  
  .canary-hero {
  background:linear-gradient(180deg,var(--color-background) 0%,var(--color-background) 50%,var(--color-background) 100%);
  margin-bottom:60px;
  padding:160px 0 32px;
  position:relative;
  text-align:center
  }
  
  .canary-hero-glow {
  border-radius:50%;
  pointer-events:none;
  position:absolute;
  z-index:0
  }
  
  .canary-hero-glow--pink {
  background:#fa55601f;
  filter:blur(120px);
  height:500px;
  left:-100px;
  top:-200px;
  width:500px
  }
  
  .canary-hero-glow--purple {
  background:#b14bf41a;
  filter:blur(140px);
  height:600px;
  right:-150px;
  top:-150px;
  width:600px
  }
  
  .canary-hero-glow--blue {
  background:#4d91ff0f;
  bottom:-350px;
  filter:blur(160px);
  height:700px;
  left:50%;
  transform:translateX(-50%);
  width:700px
  }
  
  .canary-hero > :not(.canary-hero-glow) {
  position:relative;
  z-index:1
  }
  
  .canary-hero h1 {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  background-clip:text;
  display:inline-block;
  font-size:48px;
  font-weight:800;
  margin-bottom:16px
  }
  
  .canary-hero p {
  color:var(--text-secondary);
  font-size:18px;
  line-height:1.6;
  margin:0 auto;
  max-width:700px
  }
  
  .canary-container {
  margin:0 auto;
  max-width:1200px;
  padding:0 24px;
  position:relative;
  z-index:1
  }
  
  .canary-status {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(81.02deg,#22c55eff -23.47%,#22c55e80 114.8%) border-box;
  border:2px solid transparent;
  border-radius:24px;
  margin-bottom:32px;
  padding:48px;
  text-align:center
  }
  
  .canary-icon {
  align-items:center;
  background:linear-gradient(135deg,#22c55e33 0%,#22c55e1a 100%);
  border-radius:50%;
  display:flex;
  height:80px;
  justify-content:center;
  margin:0 auto 24px;
  width:80px
  }
  
  .canary-icon svg {
  color:#22c55e;
  height:40px;
  width:40px
  }
  
  .canary-status h2 {
  color:#22c55e;
  font-size:28px;
  font-weight:700;
  margin-bottom:16px
  }
  
  .canary-status p {
  color:var(--text-secondary);
  font-size:16px;
  line-height:1.7;
  margin:0 auto;
  max-width:600px
  }
  
  .canary-date {
  border-top:1px solid var(--border-subtle);
  margin-top:24px;
  padding-top:24px
  }
  
  .canary-date span {
  color:var(--text-muted);
  font-size:14px
  }
  
  .canary-date strong {
  color:var(--text-primary);
  font-weight:600
  }
  
  .canary-content {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(to bottom,#ffffff24,var(--border-subtle)) border-box;
  border:2px solid transparent;
  border-radius:24px;
  margin-bottom:32px;
  padding:48px
  }
  
  .canary-content h2 {
  border-bottom:2px solid var(--border-subtle);
  color:var(--text-primary);
  font-size:24px;
  font-weight:700;
  margin-bottom:20px;
  margin-top:40px;
  padding-bottom:12px
  }
  
  .canary-content h2:first-child {
  margin-top:0
  }
  
  .canary-content p {
  color:var(--text-primary);
  font-size:16px;
  line-height:1.8;
  margin-bottom:16px
  }
  
  .canary-content ul {
  margin:16px 0 24px 24px
  }
  
  .canary-content li {
  color:var(--text-primary);
  line-height:1.8;
  margin-bottom:8px
  }
  
  .canary-content li::marker {
  color:#22c55e
  }
  
  .statements-list {
  list-style:none;
  margin:24px 0;
  padding:0
  }
  
  .statements-list li {
  align-items:flex-start;
  background:linear-gradient(175deg,#22c55e1a -94.09%,#22c55e05 154.53%);
  border-radius:12px;
  display:flex;
  gap:16px;
  margin-bottom:12px;
  padding:20px
  }
  
  .statements-list li svg {
  color:#22c55e;
  flex-shrink:0;
  margin-top:2px
  }
  
  .statements-list li span {
  color:var(--text-primary);
  line-height:1.6
  }
  
  .canary-section .info-box {
  background:linear-gradient(175deg,#4d91ff26 -94.09%,#4d91ff0d 154.53%);
  border-left:4px solid #4d91ff;
  border-radius:8px;
  margin:24px 0;
  padding:24px
  }
  
  .canary-section .info-box p {
  margin-bottom:0
  }
  
  .canary-section .info-box strong {
  color:#4d91ff
  }
  
  .signature-box {
  background:linear-gradient(175deg,var(--border-subtle) -94.09%,#ffffff05 154.53%);
  border:1px solid var(--border-subtle);
  border-radius:12px;
  color:var(--text-secondary);
  font-family:monospace;
  font-size:13px;
  margin-top:32px;
  overflow-x:auto;
  padding:24px
  }
  
  .signature-box .label {
  color:var(--text-muted);
  font-family:inherit;
  font-size:12px;
  letter-spacing:.5px;
  margin-bottom:8px;
  text-transform:uppercase
  }
  
  @media (max-width: 768px) {
  .canary-hero h1 {
  font-size:36px
  }
  
  .canary-status,.canary-content {
  padding:32px 24px
  }
  
  .statements-list li {
  padding:16px
  }
  }
  
  .vpn-info-section {
  margin-top:-80px;
  overflow:hidden;
  padding-bottom:50px;
  position:relative
  }
  
  
  .vpn-info-hero {
  background:linear-gradient(180deg,var(--color-background) 0%,var(--color-background) 50%,var(--color-background) 100%);
  margin-bottom:60px;
  padding:160px 0 32px;
  position:relative;
  text-align:center
  }
  
  .vpn-info-hero-glow {
  border-radius:50%;
  pointer-events:none;
  position:absolute;
  z-index:0
  }
  
  .vpn-info-hero-glow--pink {
  background:#fa55601f;
  filter:blur(120px);
  height:500px;
  left:-100px;
  top:-200px;
  width:500px
  }
  
  .vpn-info-hero-glow--purple {
  background:#b14bf41a;
  filter:blur(140px);
  height:600px;
  right:-150px;
  top:-150px;
  width:600px
  }
  
  .vpn-info-hero-glow--blue {
  background:#4d91ff0f;
  bottom:-350px;
  filter:blur(160px);
  height:700px;
  left:50%;
  transform:translateX(-50%);
  width:700px
  }
  
  .vpn-info-hero > :not(.vpn-info-hero-glow) {
  position:relative;
  z-index:1
  }
  
  .vpn-info-hero h1 {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  background-clip:text;
  display:inline-block;
  font-size:48px;
  font-weight:800;
  margin-bottom:16px
  }

  .vpn-info-hero p {
  color:var(--text-secondary);
  font-size:18px;
  line-height:1.8;
  margin:0 auto;
  max-width:700px
  }
  
  .vpn-info-container {
  margin:0 auto;
  max-width:1200px;
  padding:0 24px;
  position:relative;
  z-index:1
  }
  
  .vpn-info-content {
  background:linear-gradient(175deg,var(--border-subtle) -94.09%,var(--border-subtle) 154.53%);
  border:1px solid var(--border-subtle);
  border-radius:24px;
  margin-bottom:32px;
  padding:48px
  }
  
  .vpn-info-content h2 {
  border-bottom:2px solid var(--border-subtle);
  color:var(--text-primary);
  font-size:24px;
  font-weight:700;
  margin-bottom:20px;
  margin-top:40px;
  padding-bottom:12px
  }
  
  .vpn-info-content h2:first-child {
  margin-top:0
  }
  
  .vpn-info-content p {
  color:var(--text-primary);
  font-size:16px;
  line-height:1.8;
  margin-bottom:16px
  }
  
  .vpn-info-content ul {
  margin:16px 0 24px 24px
  }
  
  .vpn-info-content li {
  color:var(--text-primary);
  line-height:1.8;
  margin-bottom:8px
  }
  
  .vpn-info-content li::marker {
  color:#c66bd5
  }
  
  .how-it-works {
  display:grid;
  gap:24px;
  grid-template-columns:repeat(3,1fr);
  margin:32px 0
  }
  
  .step-card {
  background:linear-gradient(175deg,var(--border-subtle) -94.09%,var(--border-subtle) 154.53%);
  border:1px solid var(--border-subtle);
  border-radius:16px;
  padding:32px 24px;
  text-align:center;
  transition:all .3s ease
  }
  
  .step-number {
  align-items:center;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  border-radius:50%;
  color:#fff;
  display:flex;
  font-size:20px;
  font-weight:700;
  height:48px;
  justify-content:center;
  margin:0 auto 16px;
  width:48px
  }
  
  .step-card h3 {
  color:var(--text-primary);
  font-size:18px;
  font-weight:700;
  margin-bottom:12px
  }
  
  .step-card p {
  color:var(--text-secondary);
  font-size:14px;
  margin-bottom:0
  }
  
  .benefits-grid {
  display:grid;
  gap:24px;
  grid-template-columns:repeat(2,1fr);
  margin:32px 0
  }
  
  .benefit-card {
  align-items:flex-start;
  background:linear-gradient(175deg,var(--border-subtle) -94.09%,var(--border-subtle) 154.53%);
  border:1px solid var(--border-subtle);
  border-radius:16px;
  display:flex;
  gap:20px;
  padding:28px;
  transition:all .3s ease
  }
  
  .benefit-icon {
  align-items:center;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  border-radius:12px;
  display:flex;
  flex-shrink:0;
  height:48px;
  justify-content:center;
  width:48px
  }
  
  .benefit-icon svg {
  color:#fff
  }
  
  .benefit-content h3 {
  color:var(--text-primary);
  font-size:18px;
  font-weight:700;
  margin-bottom:8px
  }
  
  .benefit-content p {
  color:var(--text-secondary);
  font-size:14px;
  line-height:1.6;
  margin-bottom:0
  }
  
  .cta-section {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%) border-box;
  border:2px solid transparent;
  border-radius:20px;
  padding:48px;
  text-align:center
  }
  
  .cta-section h2 {
  color:var(--text-primary);
  font-size:28px;
  font-weight:700;
  margin-bottom:16px
  }
  
  .cta-section p {
  color:var(--text-secondary);
  font-size:16px;
  margin-bottom:24px;
  margin-left:auto;
  margin-right:auto;
  max-width:600px
  }
  
  .cta-btn {
  position:relative;
  align-items:center;
  background:linear-gradient(rgba(30,30,50,0.6),rgba(30,30,50,0.6)) padding-box,linear-gradient(81.02deg,#fd941366,#ff69b4aa,#b14bf4cc,#ac65cbaa,#3aafd388) border-box;
  border:1px solid transparent;
  border-radius:14px;
  backdrop-filter:blur(12px) saturate(180%);
  -webkit-backdrop-filter:blur(12px) saturate(180%);
  color:#fff;
  display:inline-flex;
  font-size:16px;
  font-weight:700;
  gap:10px;
  overflow:hidden;
  padding:16px 40px;
  text-decoration:none;
  transition:all .4s ease;
  box-shadow:0 0 20px rgba(255,255,255,0.05),0 6px 24px rgba(0,0,0,0.2),inset 0 1px 1px rgba(255,255,255,0.15),inset 0 -1px 1px rgba(0,0,0,0.3)
  }

  .cta-btn:hover {
  filter:brightness(1.05);
  box-shadow:0 0 30px rgba(177,75,244,0.35),0 0 60px rgba(177,75,244,0.15),0 12px 32px rgba(0,0,0,0.4);
  color:#fff;
  text-decoration:none
  }

  .step-card:hover,.benefit-card:hover {
  border-color:var(--border-subtle);
  transform:translateY(-4px)
  }
  
  @media (max-width: 768px) {
  .vpn-info-hero h1 {
  font-size:36px
  }
  
  .vpn-info-content,.cta-section {
  padding:32px 24px
  }
  
  .how-it-works,.benefits-grid {
  grid-template-columns:1fr
  }
  }
  
  .ct-toast-container {
  display:flex;
  flex-direction:column;
  gap:12px;
  pointer-events:none;
  position:fixed;
  right:24px;
  top:24px;
  z-index:9999
  }
  
  .ct-toast {
  align-items:center;
  animation:ctToastIn .3s ease;
  border-radius:12px;
  box-shadow:0 10px 40px #0006;
  color:#fff;
  display:flex;
  font-size:14px;
  font-weight:500;
  gap:12px;
  max-width:400px;
  padding:16px 20px;
  pointer-events:auto
  }
  
  .ct-toast.ct-toast-out {
  animation:ctToastOut .3s ease forwards
  }
  
  .ct-toast-success {
  background:linear-gradient(135deg,#10b981f2 0%,#059669f2 100%);
  border:1px solid #10b98180
  }
  
  .ct-toast-error {
  background:linear-gradient(135deg,#ef4444f2 0%,#dc2626f2 100%);
  border:1px solid #ef444480
  }
  
  .ct-toast-icon {
  flex-shrink:0
  }
  
  .ct-toast-close {
  background:none;
  border:none;
  color:#fff;
  cursor:pointer;
  display:flex;
  margin-left:auto;
  opacity:.7;
  padding:4px;
  transition:opacity .2s
  }
  
  .ct-toast-close:hover {
  opacity:1
  }
  
  @keyframes ctToastIn {
  from {
  opacity:0;
  transform:translateX(100px)
  }
  
  to {
  opacity:1;
  transform:translateX(0)
  }
  }
  
  @keyframes ctToastOut {
  from {
  opacity:1;
  transform:translateX(0)
  }
  
  to {
  opacity:0;
  transform:translateX(100px)
  }
  }
  
  .ct-field-error {
  align-items:center;
  animation:ctFieldErrorIn .2s ease;
  color:#f87171;
  display:flex;
  font-size:13px;
  gap:6px;
  margin-top:8px
  }
  
  .ct-field-error svg {
  flex-shrink:0
  }
  
  @keyframes ctFieldErrorIn {
  from {
  opacity:0;
  transform:translateY(-4px)
  }
  
  to {
  opacity:1;
  transform:translateY(0)
  }
  }
  
  .ct-input-error {
  border-color:#ef4444!important
  }
  
  .ct-input-error:focus {
  border-color:#ef4444!important;
  box-shadow:0 0 0 3px #ef444426!important
  }
  
  .ct-section {
  overflow:hidden;
  padding:0 0 80px;
  position:relative
  }
  
  .ct-hero {
  padding:80px 24px 60px;
  position:relative;
  text-align:center
  }
  
  .ct-hero-glow {
  border-radius:50%;
  filter:blur(120px);
  pointer-events:none;
  position:absolute;
  z-index:0
  }
  
  .ct-hero-glow--pink {
  background:#fa55601f;
  height:500px;
  left:-100px;
  top:-200px;
  width:500px
  }
  
  .ct-hero-glow--purple {
  background:#b14bf41a;
  height:600px;
  right:-150px;
  top:-150px;
  width:600px
  }
  
  .ct-hero-glow--blue {
  background:#4d91ff1f;
  bottom:-200px;
  height:500px;
  left:50%;
  transform:translateX(-50%);
  width:500px
  }
  
  .ct-badge {
  background:linear-gradient(81.02deg,#fa55601f -23.47%,#b14bf41f 45.52%,#4d91ff1f 114.8%);
  border:1px solid #b14bf440;
  border-radius:100px;
  display:inline-block;
  font-size:13px;
  font-weight:700;
  letter-spacing:1.5px;
  margin-bottom:24px;
  padding:6px 20px;
  text-transform:uppercase
  }
  
  .ct-hero h1 {
  color:var(--text-primary);
  font-size:52px;
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.1;
  margin-bottom:20px
  }
  
  .ct-hero-desc {
  color:var(--text-secondary);
  font-size:18px;
  line-height:1.7;
  margin:0 auto;
  max-width:600px
  }
  
  .ct-container {
  margin:0 auto;
  max-width:900px;
  padding:0 24px
  }
  
  .ct-info-grid {
  display:grid;
  gap:24px;
  grid-template-columns:repeat(3,1fr);
  margin-bottom:48px
  }
  
  .ct-info-card {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(to bottom,var(--border-subtle),var(--border-subtle)) border-box;
  border:1px solid transparent;
  border-radius:20px;
  padding:32px 24px;
  text-align:center;
  transition:all .3s ease
  }
  
  .ct-info-card:hover {
  background:linear-gradient(var(--color-primary-light),var(--color-primary-light)) padding-box,linear-gradient(to bottom,var(--border-subtle),var(--border-subtle)) border-box;
  box-shadow:0 12px 32px #0000004d;
  transform:translateY(-4px)
  }
  
  .ct-info-icon {
  align-items:center;
  background:linear-gradient(135deg,#fa5560 0%,#b14bf4 50%,#4d91ff 100%);
  border-radius:50%;
  display:flex;
  height:56px;
  justify-content:center;
  margin:0 auto 20px;
  width:56px
  }
  
  .ct-info-title {
  color:var(--text-primary);
  font-size:18px;
  font-weight:700;
  margin-bottom:8px
  }
  
  .ct-info-text {
  color:var(--text-secondary);
  font-size:14px;
  line-height:1.6
  }
  
  .ct-link {
  color:#4d91ff;
  font-weight:600;
  text-decoration:none;
  transition:all .3s ease
  }
  
  .ct-link:hover {
  color:#b14bf4;
  text-decoration:underline
  }
  
  .ct-form-wrapper {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(81.02deg,#fa556099 -23.47%,#b14bf480 45.52%,#4d91ff99 114.8%) border-box;
  border:2px solid transparent;
  border-radius:24px;
  margin-bottom:48px;
  padding:48px
  }
  
  .ct-form-header {
  align-items:center;
  display:flex;
  gap:16px;
  margin-bottom:32px
  }
  
  .ct-form-header-icon {
  align-items:center;
  background:linear-gradient(135deg,#fa5560 0%,#b14bf4 50%,#4d91ff 100%);
  border-radius:50%;
  display:flex;
  flex-shrink:0;
  height:48px;
  justify-content:center;
  width:48px
  }
  
  .ct-form-title {
  color:var(--text-primary);
  font-size:24px;
  font-weight:700
  }
  
  .ct-alert {
  background:linear-gradient(175deg,#fa556033 -94.09%,#fa55601a 154.53%);
  border:1px solid #fa556066;
  border-radius:12px;
  color:var(--text-primary);
  font-size:15px;
  margin-bottom:24px;
  padding:16px 20px
  }
  
  .ct-form-grid {
  display:grid;
  gap:24px;
  grid-template-columns:1fr 1fr
  }
  
  .ct-form-group {
  display:flex;
  flex-direction:column
  }
  
  .ct-form-group--full {
  grid-column:1 / -1
  }
  
  .ct-form-label {
  color:var(--text-primary);
  display:block;
  font-size:14px;
  font-weight:600;
  margin-bottom:8px;
  padding-left:4px
  }
  
  .ct-form-input,.ct-form-textarea {
  background:linear-gradient(175deg,var(--border-subtle) -94.09%,#ffffff0a 154.53%);
  border:1px solid var(--border-subtle);
  border-radius:12px;
  box-sizing:border-box;
  color:var(--text-primary);
  font-family:inherit;
  font-size:15px;
  outline:none;
  padding:14px 16px;
  transition:all .3s ease;
  width:100%
  }
  
  .ct-form-input:focus,.ct-form-textarea:focus {
  background:linear-gradient(175deg,var(--border-subtle) -94.09%,#ffffff0f 154.53%);
  border-color:#4d91ff;
  box-shadow:0 0 0 3px #4d91ff33
  }
  
  .ct-form-input::placeholder,.ct-form-textarea::placeholder {
  color:var(--text-muted)
  }
  
  .ct-form-textarea {
  min-height:150px;
  resize:vertical
  }
  
  .ct-form-footer {
  align-items:center;
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  justify-content:space-between;
  margin-top:32px
  }
  
  .ct-captcha {
  flex:1;
  min-width:200px
  }
  
  .ct-submit-btn {
  align-items:center;
  background:linear-gradient(rgba(30,30,50,0.6),rgba(30,30,50,0.6)) padding-box,linear-gradient(81.02deg,#fd941366,#ff69b4aa,#b14bf4cc,#ac65cbaa,#3aafd388) border-box;
  border:1px solid transparent;
  border-radius:14px;
  backdrop-filter:blur(12px) saturate(180%);
  -webkit-backdrop-filter:blur(12px) saturate(180%);
  color:#fff;
  cursor:pointer;
  display:inline-flex;
  font-family:inherit;
  font-size:16px;
  font-weight:700;
  gap:8px;
  overflow:hidden;
  padding:16px 48px;
  transition:all .4s ease;
  box-shadow:0 0 20px rgba(255,255,255,0.05),0 6px 24px rgba(0,0,0,0.2),inset 0 1px 1px rgba(255,255,255,0.15),inset 0 -1px 1px rgba(0,0,0,0.3)
  }

  .ct-submit-btn:hover:not(:disabled) {
  filter:brightness(1.05);
  box-shadow:0 0 30px rgba(177,75,244,0.35),0 0 60px rgba(177,75,244,0.15),0 12px 32px rgba(0,0,0,0.4)
  }
  
  .ct-submit-btn:disabled {
  cursor:not-allowed;
  opacity:.6
  }
  
  .ct-response-hint {
  align-items:center;
  color:var(--text-muted);
  display:flex;
  font-size:13px;
  gap:6px;
  justify-content:center;
  margin-top:20px;
  text-align:center
  }
  
  .ct-response-hint svg {
  opacity:.5
  }
  
  .ct-cta {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(81.02deg,#fa556080 -23.47%,#b14bf466 45.52%,#4d91ff80 114.8%) border-box;
  border:2px solid transparent;
  border-radius:24px;
  overflow:hidden;
  padding:48px;
  position:relative;
  text-align:center
  }
  
  .ct-cta::before {
  background:radial-gradient(circle at center,#b14bf40f 0%,transparent 60%);
  content:'';
  height:200%;
  left:-50%;
  pointer-events:none;
  position:absolute;
  top:-50%;
  width:200%
  }
  
  .ct-cta h2 {
  color:var(--text-primary);
  font-size:32px;
  font-weight:800;
  margin-bottom:12px
  }
  
  .ct-cta p {
  color:var(--text-secondary);
  font-size:16px;
  line-height:1.6;
  margin:0 auto 28px;
  max-width:500px
  }
  
  .ct-cta-btn {
  align-items:center;
  background:linear-gradient(rgba(30,30,50,0.6),rgba(30,30,50,0.6)) padding-box,linear-gradient(81.02deg,#fd941366,#ff69b4aa,#b14bf4cc,#ac65cbaa,#3aafd388) border-box;
  border:1px solid transparent;
  border-radius:14px;
  backdrop-filter:blur(12px) saturate(180%);
  -webkit-backdrop-filter:blur(12px) saturate(180%);
  color:#fff;
  display:inline-flex;
  font-size:16px;
  font-weight:700;
  gap:8px;
  overflow:hidden;
  padding:14px 36px;
  text-decoration:none;
  transition:all .4s ease;
  box-shadow:0 0 20px rgba(255,255,255,0.05),0 6px 24px rgba(0,0,0,0.2),inset 0 1px 1px rgba(255,255,255,0.15),inset 0 -1px 1px rgba(0,0,0,0.3)
  }

  .ct-cta-btn:hover {
  filter:brightness(1.05);
  box-shadow:0 0 30px rgba(177,75,244,0.35),0 0 60px rgba(177,75,244,0.15),0 12px 32px rgba(0,0,0,0.4);
  color:#fff;
  text-decoration:none
  }
  
  .ct-section .cf-turnstile,.ct-section [class*="turnstile"],.ct-section [class*="captcha"] {
  display:flex!important;
  justify-content:center!important;
  overflow:visible!important;
  width:100%!important
  }
  
  .ct-hero > :not(.ct-hero-glow),.ct-cta > * {
  position:relative;
  z-index:1
  }
  
  .ct-badge span,.ct-gradient-text {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560 -23.47%,#b14bf4 45.52%,#4d91ff 114.8%);
  background-clip:text
  }
  
  .ct-info-icon svg,.ct-form-header-icon svg {
  color:#fff
  }
  
  @media (max-width: 768px) {
  .ct-hero h1 {
  font-size:36px
  }
  
  .ct-hero-desc {
  font-size:16px
  }
  
  .ct-form-wrapper {
  padding:32px 24px
  }
  
  .ct-form-title {
  font-size:20px
  }
  
  .ct-form-footer {
  align-items:stretch;
  flex-direction:column
  }
  
  .ct-submit-btn {
  justify-content:center;
  width:100%
  }
  
  .ct-cta {
  padding:36px 24px
  }
  
  .ct-cta h2 {
  font-size:26px
  }
  
  .ct-info-grid,.ct-form-grid {
  grid-template-columns:1fr
  }
  }
  
  @media (max-width: 400px) {
  .ct-form-wrapper {
  padding:24px 16px
  }
  
  .ct-container {
  padding:0 12px
  }
  
  .ct-section .cf-turnstile,.ct-section [class*="turnstile"],.ct-section [class*="captcha"] {
  transform:scale(0.9);
  transform-origin:center center
  }
  }
  
  .abuse-form-container {
  margin:0 auto;
  max-width:700px;
  padding:40px 24px
  }
  
  .abuse-form-container h2 {
  color:var(--text-primary,#fff);
  font-size:28px;
  font-weight:800;
  margin-bottom:24px
  }
  
  .abuse-form-container textarea,.abuse-form-container input[type="text"],.abuse-form-container input[type="email"] {
  background:var(--color-surface,#ffffff0d);
  border:1px solid var(--border-subtle,#ffffff1a);
  border-radius:10px;
  box-sizing:border-box;
  color:var(--text-primary,#fff);
  font-size:14px;
  outline:none;
  padding:12px 16px;
  transition:border-color .3s;
  width:100%
  }
  
  .abuse-form-container textarea:focus,.abuse-form-container input[type="text"]:focus,.abuse-form-container input[type="email"]:focus {
  border-color:#b14bf480
  }
  
  .cf-turnstile {
  margin:16px 0
  }
  
  @media (max-width: 768px) {
  .cf-turnstile iframe {
  max-width:100%!important;
  transform:scale(0.85);
  transform-origin:left top
  }
  }
  
  .affiliate-info-page {
  margin:0 auto;
  max-width:1400px;
  padding:3rem 2rem
  }
  
  @media (max-width: 767px) {
  .affiliate-info-page {
  padding:1.5rem .75rem
  }
  }
  
  .aff-hero {
  background:linear-gradient(135deg,#b14bf426 0%,#fa556026 100%);
  border:1px solid #b14bf44d;
  border-radius:16px;
  margin-bottom:2rem;
  overflow:hidden;
  padding:3rem;
  position:relative;
  text-align:center
  }
  
  .aff-hero::before {
  animation:pulse 4s ease-in-out infinite;
  background:radial-gradient(circle,#b14bf41a 0%,transparent 50%);
  content:'';
  height:200%;
  left:-50%;
  position:absolute;
  top:-50%;
  width:200%
  }
  
  @keyframes pulse {
  0%,100% {
  opacity:.5;
  transform:scale(1)
  }
  
  50% {
  opacity:.8;
  transform:scale(1.1)
  }
  }
  
  .aff-hero-content {
  position:relative;
  z-index:1
  }
  
  .aff-hero h1 {
  color:var(--text-primary,white);
  font-size:2.5rem;
  font-weight:800;
  margin-bottom:1rem
  }
  
  .aff-hero p {
  color:var(--text-secondary,#ffffffb3);
  font-size:1.1rem;
  margin:0 auto;
  max-width:600px
  }
  
  .earning-methods {
  display:grid;
  gap:1.5rem;
  grid-template-columns:repeat(4,1fr);
  margin-bottom:2rem
  }
  
  @media (max-width: 1100px) {
  .earning-methods {
  grid-template-columns:repeat(2,1fr)
  }
  }
  
  @media (max-width: 600px) {
  .earning-methods {
  grid-template-columns:1fr
  }
  }
  
  .earning-card {
  background:var(--color-bg-subtle,#ffffff08);
  border:1px solid var(--border-subtle,#ffffff1a);
  border-radius:16px;
  overflow:hidden;
  padding:2rem;
  position:relative;
  text-align:center;
  transition:all .3s ease
  }
  
  .earning-card:hover {
  border-color:#b14bf466;
  box-shadow:0 10px 30px #b14bf426;
  transform:translateY(-5px)
  }
  
  .earning-card-icon {
  align-items:center;
  background:linear-gradient(135deg,#b14bf433 0%,#fa556033 100%);
  border-radius:16px;
  display:flex;
  height:70px;
  justify-content:center;
  margin:0 auto 1.5rem;
  width:70px
  }
  
  .earning-card-icon svg {
  height:32px;
  stroke:#b14bf4;
  width:32px
  }
  
  .earning-card h3 {
  color:var(--text-primary,white);
  font-size:1.5rem;
  font-weight:700;
  margin-bottom:.75rem
  }
  
  .earning-card p {
  color:var(--text-muted,#fff9);
  font-size:.95rem;
  line-height:1.6
  }
  
  .earning-card-btn {
  align-items:center;
  background:linear-gradient(135deg,#b14bf433 0%,#fa556033 100%);
  border:1px solid #b14bf466;
  border-radius:8px;
  color:var(--text-primary,white);
  display:inline-flex;
  font-size:.9rem;
  font-weight:600;
  gap:8px;
  margin-top:1rem;
  padding:10px 20px;
  text-decoration:none;
  transition:all .3s ease
  }
  
  .earning-card-btn:hover {
  background:linear-gradient(135deg,#b14bf466 0%,#fa556066 100%);
  border-color:#b14bf499;
  color:var(--text-primary,white);
  transform:translateY(-2px)
  }
  
  .earning-card-btn svg {
  stroke:currentColor
  }
  
  .info-section {
  background:var(--color-bg-subtle,#ffffff08);
  border:1px solid var(--border-subtle,#ffffff1a);
  border-radius:16px;
  margin-bottom:1.5rem;
  padding:2rem
  }
  
  .info-section h2 {
  align-items:center;
  color:var(--text-primary,white);
  display:flex;
  font-size:1.5rem;
  font-weight:700;
  gap:12px;
  margin-bottom:1.5rem
  }
  
  .info-section h2 .section-icon {
  align-items:center;
  background:linear-gradient(81.02deg,#f33f5b -23.47%,#b14bf4 45.52%,#3b82f6 114.8%);
  border-radius:10px;
  display:flex;
  height:40px;
  justify-content:center;
  width:40px
  }
  
  .info-section h2 .section-icon svg {
  height:20px;
  stroke:#fff;
  width:20px
  }
  
  .info-list {
  list-style:none;
  margin:0;
  padding:0
  }
  
  .info-list li {
  background:var(--color-bg-subtle,#ffffff08);
  border-left:3px solid #b14bf4;
  border-radius:0 8px 8px 0;
  color:var(--text-primary,#fffc);
  line-height:1.6;
  margin-bottom:.75rem;
  padding:1rem 1.25rem;
  transition:all .2s ease
  }
  
  .info-list li:hover {
  background:#b14bf41a;
  border-left-color:#f33f5b
  }
  
  .info-list li:last-child {
  margin-bottom:0
  }
  
  .info-list li strong {
  color:var(--text-primary,#fffffff2)
  }
  
  .rates-table-wrapper {
  border-radius:12px;
  overflow-x:auto
  }
  
  .rates-table {
  border-collapse:collapse;
  min-width:600px;
  width:100%
  }
  
  .rates-table thead tr {
  background:linear-gradient(81.02deg,#f33f5b -23.47%,#b14bf4 45.52%,#3b82f6 114.8%)
  }
  
  .rates-table th {
  border:1px solid var(--border-subtle,#ffffff1a);
  color:var(--text-primary);
  font-size:.9rem;
  font-weight:600;
  padding:1rem;
  text-align:center
  }
  
  .rates-table td {
  border:1px solid var(--border-subtle,#ffffff1a);
  color:var(--text-primary,#fffc);
  font-weight:500;
  padding:1rem;
  text-align:center
  }
  
  .rates-table tbody tr {
  background:#ffffff05;
  transition:all .2s ease
  }
  
  .rates-table tbody tr:nth-child(even) {
  background:#ffffff0a
  }
  
  .rates-table tbody tr:hover {
  background:#b14bf41a
  }
  
  .tier-badge {
  border-radius:20px;
  display:inline-block;
  font-size:.85rem;
  font-weight:600;
  padding:.4rem 1rem
  }
  
  .tier-1 {
  background:linear-gradient(135deg,#b14bf4 0%,#8b5cf6 100%);
  color:#fff
  }
  
  .tier-2 {
  background:linear-gradient(135deg,#10b981 0%,#059669 100%);
  color:#fff
  }
  
  .tier-3 {
  background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%);
  color:#fff
  }
  
  .tier-4 {
  background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%);
  color:#fff
  }
  
  .countries-grid {
  display:grid;
  gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr))
  }
  
  .country-tier {
  background:var(--color-bg-subtle,#ffffff08);
  border:1px solid var(--border-subtle,#ffffff1a);
  border-radius:12px;
  padding:1.5rem
  }
  
  .country-tier-header {
  align-items:center;
  display:flex;
  gap:1rem;
  margin-bottom:1rem
  }
  
  .country-tier-countries {
  color:var(--text-secondary,#ffffffb3);
  font-size:.9rem;
  line-height:1.8
  }
  
  .vpn-section {
  background:linear-gradient(135deg,#10b9811a 0%,#0596691a 100%);
  border:1px solid #10b9814d
  }
  
  .vpn-section h2 .section-icon {
  background:linear-gradient(135deg,#10b981 0%,#059669 100%)
  }
  
  .vpn-grid {
  display:grid;
  gap:1.5rem;
  grid-template-columns:repeat(4,1fr)
  }
  
  @media (max-width: 1100px) {
  .vpn-grid {
  grid-template-columns:repeat(2,1fr)
  }
  }
  
  .vpn-card {
  align-items:flex-start;
  background:var(--color-bg-subtle,#ffffff08);
  border:1px solid var(--border-subtle,#ffffff1a);
  border-radius:12px;
  display:flex;
  gap:1rem;
  padding:1.5rem;
  transition:all .2s ease
  }
  
  .vpn-card:hover {
  background:#10b9811a;
  border-color:#10b9814d
  }
  
  .vpn-card-icon {
  align-items:center;
  background:#10b98133;
  border-radius:10px;
  display:flex;
  flex-shrink:0;
  height:48px;
  justify-content:center;
  width:48px
  }
  
  .vpn-card-icon svg {
  height:24px;
  stroke:#10b981;
  width:24px
  }
  
  .vpn-card h4 {
  color:var(--text-primary,white);
  font-size:1.1rem;
  font-weight:600;
  margin-bottom:.5rem
  }
  
  .vpn-card p {
  color:var(--text-muted,#fff9);
  font-size:.9rem;
  line-height:1.5;
  margin:0
  }
  
  .rules-accordion {
  background:var(--color-bg-subtle,#ffffff08);
  border:1px solid var(--border-subtle,#ffffff1a);
  border-radius:12px;
  overflow:hidden
  }
  
  .rules-toggle {
  align-items:center;
  background:transparent;
  border:none;
  color:var(--text-primary,white);
  cursor:pointer;
  display:flex;
  font-size:1.1rem;
  font-weight:600;
  gap:12px;
  padding:1.25rem 1.5rem;
  transition:all .2s ease;
  width:100%
  }
  
  .rules-toggle:hover {
  background:var(--color-bg-element,#ffffff0d)
  }
  
  .rules-toggle svg {
  transition:transform .3s ease
  }
  
  .rules-toggle.active svg {
  transform:rotate(180deg)
  }
  
  .rules-content {
  display:none;
  padding:0 1.5rem 1.5rem
  }
  
  .rules-content.show {
  display:block
  }
  
  .cta-section {
  background:linear-gradient(135deg,#b14bf433 0%,#fa556033 100%);
  border:1px solid #b14bf466;
  border-radius:16px;
  margin-top:2rem;
  padding:3rem;
  text-align:center
  }
  
  .cta-section h2 {
  color:var(--text-primary,white);
  font-size:1.75rem;
  font-weight:700;
  margin-bottom:1rem
  }
  
  .cta-section p {
  color:var(--text-secondary,#ffffffb3);
  font-size:1.1rem;
  margin-bottom:1.5rem
  }
  
  .cta-btn {
  position:relative;
  align-items:center;
  background:linear-gradient(rgba(30,30,50,0.6),rgba(30,30,50,0.6)) padding-box,linear-gradient(81.02deg,#fd941366,#ff69b4aa,#b14bf4cc,#ac65cbaa,#3aafd388) border-box;
  border:1px solid transparent;
  border-radius:14px;
  backdrop-filter:blur(12px) saturate(180%);
  -webkit-backdrop-filter:blur(12px) saturate(180%);
  color:#fff;
  display:inline-flex;
  font-size:1.1rem;
  font-weight:600;
  gap:10px;
  overflow:hidden;
  padding:1rem 2rem;
  text-decoration:none;
  transition:all .4s ease;
  box-shadow:0 0 20px rgba(255,255,255,0.05),0 6px 24px rgba(0,0,0,0.2),inset 0 1px 1px rgba(255,255,255,0.15),inset 0 -1px 1px rgba(0,0,0,0.3)
  }

  .cta-btn:hover {
  filter:brightness(1.05);
  box-shadow:0 0 30px rgba(177,75,244,0.35),0 0 60px rgba(177,75,244,0.15),0 12px 32px rgba(0,0,0,0.4);
  color:#fff;
  text-decoration:none
  }

  @media (max-width: 768px) {
  .aff-hero {
  padding:2rem 1.5rem
  }
  
  .aff-hero h1 {
  font-size:1.75rem
  }
  
  .earning-methods,.countries-grid {
  grid-template-columns:1fr
  }
  
  .vpn-grid {
  grid-template-columns:1fr
  }
  }
  
  .grid-bg {
  background-image:linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px);
  background-size:60px 60px;
  height:100%;
  left:0;
  pointer-events:none;
  position:absolute;
  top:0;
  width:100%;
  z-index:0
  }
  
  #particles-canvas {
  height:100%;
  left:0;
  pointer-events:none;
  position:absolute;
  top:0;
  width:100%;
  z-index:0
  }
  
  .api-docs-page {
  box-sizing:border-box;
  margin:0!important;
  max-width:100%!important;
  overflow-x:hidden;
  padding:0!important;
  text-align:left!important;
  width:100%!important
  }
  
  .api-docs-page *,.api-docs-page ::before,.api-docs-page ::after {
  box-sizing:border-box
  }
  
  .api-container {
  display:flex;
  gap:2rem;
  width:100%!important
  }
  
  .api-container.no-sidebar {
  display:block!important;
  width:100%!important
  }
  
  .api-container.no-sidebar .api-content {
  margin:0!important;
  max-width:100%!important;
  text-align:left!important;
  width:100%!important
  }
  
  .api-header {
  margin-bottom:2rem;
  margin-left:0!important;
  margin-right:auto!important;
  text-align:left!important
  }
  
  .api-info-grid {
  display:grid;
  gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  justify-content:flex-start!important;
  margin-bottom:2rem
  }
  
  .api-nav-horizontal {
  background:var(--color-bg-subtle,#ffffff08);
  border:1px solid var(--border-subtle,#ffffff1a);
  border-radius:12px;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  justify-content:flex-start;
  margin-bottom:2rem;
  padding:1rem
  }
  
  .api-nav-horizontal .api-nav-group {
  align-items:center;
  display:flex;
  gap:.5rem
  }
  
  .api-nav-horizontal .api-nav-group-title {
  color:var(--text-tertiary,#fff6);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.05em;
  margin-right:.25rem;
  text-transform:uppercase
  }
  
  .api-nav-horizontal .api-nav-link {
  background:var(--color-bg-element,#ffffff0d);
  border-radius:6px;
  color:var(--text-secondary,#ffffffb3);
  display:inline-block;
  font-size:.8rem;
  padding:.35rem .75rem;
  text-decoration:none;
  transition:all .2s
  }
  
  .api-nav-horizontal .api-nav-link:hover {
  background:#b14bf433;
  color:var(--text-primary,#fff)
  }
  
  .api-nav-horizontal .api-nav-divider {
  background:var(--border-subtle,#ffffff1a);
  height:20px;
  margin:0 .5rem;
  width:1px
  }
  
  .api-sidebar {
  background:var(--color-bg-subtle,#ffffff08);
  border:1px solid var(--border-subtle,#ffffff1a);
  border-radius:12px;
  flex-shrink:0;
  height:fit-content;
  padding:1.5rem;
  position:sticky;
  top:20px;
  width:240px
  }
  
  .api-sidebar h3 {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(135deg,#b14bf4 0%,#fa5560 100%);
  background-clip:text;
  border-bottom:1px solid var(--border-subtle,#ffffff1a);
  font-size:1.1rem;
  font-weight:700;
  margin-bottom:1.25rem;
  padding-bottom:.75rem
  }
  
  .api-nav {
  list-style:none;
  margin:0;
  padding:0
  }
  
  .api-nav-section {
  margin-bottom:1.25rem
  }
  
  .api-nav-section-title {
  color:var(--text-tertiary,#ffffff80);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.05em;
  margin-bottom:.5rem;
  text-transform:uppercase
  }
  
  .api-nav-item {
  margin:0;
  padding:0
  }
  
  .api-nav-link {
  border-radius:6px;
  color:var(--text-secondary,#ffffffb3);
  display:block;
  font-size:.85rem;
  padding:.4rem .75rem;
  text-decoration:none;
  transition:all .2s
  }
  
  .api-nav-link:hover {
  background:var(--color-bg-element,#ffffff0d);
  color:var(--text-primary,#fff);
  text-decoration:none
  }
  
  .api-content {
  flex:1;
  min-width:0
  }
  
  .api-header h1 {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(135deg,#b14bf4 0%,#fa5560 100%);
  background-clip:text;
  font-size:2rem;
  font-weight:700;
  margin-bottom:.5rem
  }
  
  .api-header p {
  color:var(--text-muted,#fff9);
  font-size:1rem;
  max-width:700px
  }
  
  .api-section {
  margin-bottom:2.5rem;
  scroll-margin-top:20px
  }
  
  .api-section-title {
  border-bottom:1px solid var(--border-subtle,#ffffff1a);
  color:var(--text-primary,#fff);
  font-size:1.25rem;
  font-weight:700;
  margin-bottom:1.5rem;
  padding-bottom:.5rem
  }
  
  .api-endpoint {
  background:var(--color-bg-subtle,#ffffff08);
  border:1px solid var(--border-subtle,#ffffff1a);
  border-radius:12px;
  margin-bottom:1.5rem;
  max-width:100%;
  overflow:hidden;
  padding:1.5rem;
  scroll-margin-top:20px
  }
  
  .api-endpoint-title {
  color:var(--text-primary,#fff);
  font-size:1.1rem;
  font-weight:600;
  margin-bottom:1rem
  }
  
  .api-desc {
  margin-bottom:1rem
  }
  
  .api-desc-title {
  color:var(--text-tertiary,#ffffff80);
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.03em;
  margin-bottom:.5rem;
  text-transform:uppercase
  }
  
  .api-desc pre {
  -webkit-overflow-scrolling:touch;
  background:#0000004d;
  border:1px solid var(--border-subtle);
  border-radius:8px;
  color:#e2e8f0;
  margin:0;
  max-width:100%;
  overflow-x:auto;
  padding:1rem
  }
  
  .api-desc code {
  font-family:'Courier New',monospace;
  font-size:.85rem;
  word-break:break-word
  }
  
  .api-parameters {
  align-items:start;
  background:#0003;
  border-radius:8px;
  display:grid;
  gap:.5rem 1rem;
  grid-template-columns:auto auto 1fr;
  margin-bottom:.5rem;
  padding:.75rem 1rem
  }
  
  .api-parameter {
  color:#b14bf4;
  font-family:'Courier New',monospace;
  font-size:.85rem;
  font-weight:600
  }
  
  .api-parameter.required::after {
  color:#fa5560;
  content:'*';
  margin-left:.25rem
  }
  
  .api-type {
  color:var(--text-tertiary,#ffffff80);
  font-family:'Courier New',monospace;
  font-size:.8rem
  }
  
  .api-example {
  color:var(--text-secondary,#ffffffb3);
  font-size:.85rem
  }
  
  .mono {
  background:var(--color-bg-element,#ffffff1a);
  border-radius:4px;
  font-family:'Courier New',monospace;
  font-size:.8rem;
  padding:.15rem .4rem
  }
  
  .required {
  color:#fa5560;
  font-weight:700
  }
  
  .api-response pre {
  -webkit-overflow-scrolling:touch;
  background:#0000004d;
  border:1px solid var(--border-subtle);
  border-radius:8px;
  color:#e2e8f0;
  max-width:100%;
  overflow-x:auto;
  padding:1rem
  }
  
  .api-info-box {
  background:var(--color-bg-subtle,#ffffff08);
  border:1px solid var(--border-subtle,#ffffff1a);
  border-radius:12px;
  padding:1.25rem
  }
  
  .api-info-box h3 {
  align-items:center;
  color:var(--text-primary,#fff);
  display:flex;
  font-size:1rem;
  font-weight:600;
  gap:.5rem;
  margin-bottom:.5rem
  }
  
  .api-info-box p {
  color:var(--text-muted,#fff9);
  font-size:.9rem;
  line-height:1.5;
  margin:0
  }
  
  .api-info-box .info-highlight {
  background:#ffffff14;
  border-radius:6px;
  color:var(--text-secondary,#ffffffb3);
  display:inline-block;
  font-family:'Courier New',monospace;
  font-size:.85rem;
  font-weight:500;
  margin-top:.5rem;
  padding:.4rem .75rem
  }
  
  .api-header h1,.api-header p,.api-section,.api-endpoint,.api-section-title {
  text-align:left!important
  }
  
  @media (max-width: 968px) {
  .api-container {
  flex-direction:column
  }
  
  .api-sidebar {
  margin-bottom:1.5rem;
  position:static;
  width:100%
  }
  
  .api-info-grid {
  grid-template-columns:1fr
  }
  
  .api-nav-horizontal {
  -webkit-overflow-scrolling:touch;
  overflow-x:auto;
  padding-bottom:.5rem
  }
  
  .api-nav-horizontal .api-nav-group {
  flex-wrap:wrap
  }
  }
  
  @media (max-width: 640px) {
  .api-docs-page {
  padding:0 .5rem!important
  }
  
  .api-header h1 {
  font-size:1.5rem
  }
  
  .api-endpoint {
  border-radius:8px;
  padding:1rem
  }
  
  .api-desc pre {
  -webkit-overflow-scrolling:touch;
  font-size:.75rem;
  max-width:100%;
  overflow-x:auto;
  padding:.75rem;
  white-space:pre;
  word-wrap:normal
  }
  
  .api-desc pre code {
  display:block;
  font-size:.7rem;
  min-width:max-content
  }
  
  .api-response pre {
  -webkit-overflow-scrolling:touch;
  max-width:100%;
  overflow-x:auto
  }
  
  .api-response pre code {
  font-size:.7rem
  }
  
  .api-parameters {
  gap:.25rem;
  grid-template-columns:1fr;
  padding:.5rem .75rem
  }
  
  .api-type {
  color:var(--text-tertiary,#fff6);
  font-size:.7rem
  }
  
  .mono {
  font-size:.7rem;
  word-break:break-all
  }
  
  .api-nav-horizontal {
  flex-wrap:wrap;
  gap:.75rem;
  padding:.75rem
  }
  
  .api-nav-horizontal .api-nav-group {
  flex-wrap:wrap;
  gap:.35rem;
  width:100%
  }
  
  .api-nav-horizontal .api-nav-group-title {
  margin-bottom:.25rem;
  width:100%
  }
  
  .api-nav-horizontal .api-nav-link {
  font-size:.75rem;
  padding:.3rem .5rem
  }
  
  .api-nav-horizontal .api-nav-divider {
  display:none
  }
  
  .api-info-box {
  padding:1rem
  }
  
  .api-info-box .info-highlight {
  font-size:.75rem;
  padding:.3rem .5rem
  }
  
  .api-section-title {
  font-size:1.1rem
  }
  
  .api-endpoint-title {
  font-size:1rem
  }
  
  .api-desc-title {
  font-size:.75rem
  }
  
  .api-header p,.api-info-box h3 {
  font-size:.9rem
  }
  
  .api-parameter,.api-example,.api-info-box p {
  font-size:.8rem
  }
  }
  
  .ask-email-dialog {
  align-items:center;
  backdrop-filter:blur(4px);
  background:#000000b3;
  bottom:0;
  display:none;
  justify-content:center;
  left:0;
  padding:20px;
  position:fixed;
  right:0;
  top:0;
  z-index:9999
  }
  
  .ask-email-dialog.active {
  display:flex
  }
  
  .ask-email-card {
  animation:askEmailSlideIn .3s ease;
  background:linear-gradient(var(--color-primary-dark,#181920),var(--color-primary-dark,#181920)) padding-box,linear-gradient(to bottom,#ffffff24,#ffffff14) border-box;
  border:1px solid transparent;
  border-radius:16px;
  max-width:450px;
  overflow:hidden;
  width:100%
  }
  
  @keyframes askEmailSlideIn {
  from {
  opacity:0;
  transform:translateY(-20px) scale(0.95)
  }
  
  to {
  opacity:1;
  transform:translateY(0) scale(1)
  }
  }
  
  .ask-email-header {
  align-items:center;
  background:linear-gradient(81.02deg,#fa556026 -23.47%,#b14bf426 45.52%,#4d91ff26 114.8%);
  border-bottom:1px solid #b14bf433;
  display:flex;
  justify-content:space-between;
  padding:20px 25px
  }
  
  .ask-email-header h3 {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  align-items:center;
  background:linear-gradient(81.02deg,#fa5560 -23.47%,#b14bf4 45.52%,#4d91ff 114.8%);
  background-clip:text;
  display:flex;
  font-size:1.2rem;
  font-weight:700;
  gap:.5rem;
  margin:0
  }
  
  .ask-email-close {
  align-items:center;
  background:#ffffff1a;
  border:none;
  border-radius:8px;
  color:var(--text-secondary);
  cursor:pointer;
  display:flex;
  height:32px;
  justify-content:center;
  transition:all .3s;
  width:32px
  }
  
  .ask-email-content {
  padding:25px
  }
  
  .ask-email-label {
  color:var(--text-secondary);
  display:block;
  font-size:.95rem;
  font-weight:600;
  margin-bottom:10px
  }
  
  .ask-email-input {
  background:#ffffff0d;
  border:2px solid var(--border-subtle);
  border-radius:10px;
  box-sizing:border-box;
  color:var(--text-primary);
  font-size:1rem;
  padding:14px 16px;
  transition:all .3s;
  width:100%
  }
  
  .ask-email-input:focus {
  border-color:#b14bf4;
  box-shadow:0 0 0 3px #b14bf433;
  outline:none
  }
  
  .ask-email-input::placeholder {
  color:var(--text-faint)
  }
  
  .ask-email-note {
  background:#b14bf41a;
  border-left:3px solid #b14bf4;
  border-radius:6px;
  color:var(--text-secondary);
  font-size:.85rem;
  line-height:1.5;
  margin-top:15px;
  padding:12px
  }
  
  .ask-email-actions {
  display:flex;
  gap:12px;
  padding:0 25px 25px
  }
  
  .ask-email-btn {
  align-items:center;
  border:none;
  border-radius:50px;
  cursor:pointer;
  display:flex;
  flex:1;
  font-size:.95rem;
  font-weight:600;
  gap:.5rem;
  justify-content:center;
  padding:14px 20px;
  transition:all .3s
  }
  
  .ask-email-btn-primary {
  background:linear-gradient(81.02deg,#fa5560 -23.47%,#b14bf4 45.52%,#4d91ff 114.8%);
  box-shadow:0 4px 12px #b14bf44d;
  color:#fff
  }
  
  .ask-email-btn-primary:hover:not(:disabled) {
  box-shadow:0 6px 20px #b14bf466;
  transform:translateY(-2px)
  }
  
  .ask-email-btn-primary:disabled {
  cursor:not-allowed;
  opacity:.5;
  transform:none
  }
  
  .ask-email-btn-secondary {
  background:#ffffff1a;
  border:1px solid var(--border-subtle);
  color:var(--text-secondary)
  }
  
  .ask-email-close:hover,.ask-email-btn-secondary:hover {
  background:#ffffff26;
  color:#fff
  }
  
  @media (max-width: 480px) {
  .ask-email-card {
  margin:10px
  }
  
  .ask-email-header,.ask-email-content {
  padding:18px
  }
  
  .ask-email-actions {
  flex-direction:column;
  padding:0 18px 18px
  }
  }
  
  .ban-notification-table {
  width:100%
  }
  
  .ban-notification-table td {
  font-size:14px;
  padding:8px 12px
  }
  
  .banktransfer-page {
  margin:0 auto;
  max-width:900px;
  padding:2rem 1rem
  }
  
  .payment-hero {
  background:linear-gradient(81.02deg,#fa556026 -23.47%,#b14bf426 45.52%,#4d91ff26 114.8%);
  border:1px solid #b14bf44d;
  border-radius:24px;
  margin-bottom:2rem;
  padding:2.5rem;
  text-align:center
  }
  
  .payment-hero h1 {
  color:var(--text-primary,white);
  font-size:2rem;
  font-weight:700;
  margin:0 0 .5rem
  }
  
  .payment-hero p {
  color:var(--text-secondary,#ffffffb3);
  font-size:1rem;
  margin:0
  }
  
  .summary-card h3 {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  align-items:center;
  background:linear-gradient(81.02deg,#fa5560 -23.47%,#b14bf4 45.52%,#4d91ff 114.8%);
  background-clip:text;
  display:flex;
  font-size:1.3rem;
  gap:.5rem;
  margin:0 0 1.5rem
  }
  
  .summary-item {
  align-items:center;
  border-bottom:1px solid var(--border-subtle,#ffffff1a);
  display:flex;
  justify-content:space-between;
  padding:1rem 0
  }
  
  .summary-item:last-child {
  border-bottom:none;
  font-size:1.2rem;
  font-weight:700
  }
  
  .summary-label {
  color:var(--text-muted,#fff9);
  font-weight:500
  }
  
  .summary-value {
  color:var(--text-primary,#ffffffe6);
  font-weight:600
  }
  
  .country-selection-card h3 {
  color:var(--text-primary,white);
  font-size:1.3rem;
  margin:0 0 .5rem
  }
  
  .country-help-text {
  color:var(--text-muted,#fff9);
  font-size:.9rem;
  line-height:1.5;
  margin-bottom:1.5rem
  }
  
  .form-group {
  margin-bottom:1.5rem
  }
  
  .form-group label {
  color:var(--text-primary,#fffc);
  display:block;
  font-weight:600;
  margin-bottom:.5rem
  }
  
  .choices__inner {
  background:var(--color-bg-element,#ffffff0d);
  border:2px solid var(--border-subtle);
  border-radius:12px;
  color:var(--text-primary,white);
  font-size:1rem;
  min-height:50px;
  padding:1rem 1.5rem;
  text-align:left
  }
  
  .choices__list--single {
  text-align:left
  }
  
  .choices__placeholder {
  color:var(--text-tertiary,#ffffff80);
  opacity:.7;
  text-align:left!important
  }
  
  .choices__item {
  color:var(--text-primary,white);
  text-align:left!important
  }
  
  .choices__inner:hover {
  border-color:#b14bf4
  }
  
  .choices.is-focused .choices__inner,.choices.is-open .choices__inner {
  border-color:#b14bf4;
  box-shadow:0 0 0 3px #b14bf433
  }
  
  .choices__list--dropdown {
  background:#fff;
  border:2px solid #b14bf4;
  border-radius:0 0 12px 12px;
  border-top:none;
  max-height:300px
  }
  
  .choices__list--dropdown .choices__item {
  color:#333;
  font-size:1rem;
  padding:.75rem 1rem;
  text-align:left
  }
  
  .choices__list--dropdown .choices__item--selectable.is-highlighted {
  background:#b14bf426;
  color:#333
  }
  
  .choices[data-type*=select-one] .choices__input {
  background:#fff;
  border-bottom:1px solid #eee;
  color:#333;
  font-size:1rem;
  padding:.5rem 1rem
  }
  
  .submit-section {
  margin-top:2rem;
  text-align:center
  }
  
  .submit-btn {
  align-items:center;
  background:linear-gradient(81.02deg,#fa5560 -23.47%,#b14bf4 45.52%,#4d91ff 114.8%);
  border:none;
  border-radius:50px;
  box-shadow:0 4px 12px #b14bf44d;
  color:#fff;
  cursor:pointer;
  display:inline-flex;
  font-size:1.1rem;
  font-weight:600;
  gap:.75rem;
  padding:1rem 3rem;
  transition:all .3s
  }
  
  .submit-btn:hover:not(:disabled) {
  box-shadow:0 6px 20px #b14bf466;
  transform:translateY(-2px)
  }
  
  .submit-btn:disabled {
  background:#ffffff1a;
  cursor:not-allowed;
  opacity:.6;
  transform:none
  }
  
  .submit-btn i {
  font-size:1.2rem
  }
  
  .info-box {
  background:linear-gradient(var(--color-primary-dark,#181920),var(--color-primary-dark,#181920)) padding-box,linear-gradient(to bottom,#ffffff24,#ffffff14) border-box;
  border:1px solid transparent;
  border-left:4px solid #b14bf4;
  border-radius:12px;
  margin-bottom:2rem;
  padding:2rem
  }
  
  .info-box p {
  color:var(--text-secondary,#ffffffb3);
  font-size:.95rem;
  line-height:1.6;
  margin:0 0 .75rem
  }
  
  .info-box p:last-child {
  margin-bottom:0
  }
  
  .info-box a {
  color:#b14bf4;
  font-weight:600;
  text-decoration:none
  }
  
  .info-box a:hover {
  text-decoration:underline
  }
  
  .info-box ul {
  color:var(--text-primary,#fffc);
  list-style-type:disc;
  margin:.75rem 0;
  padding-left:1.5rem
  }
  
  .info-box li {
  margin-bottom:.5rem;
  padding-left:.5rem
  }
  
  .back-btn {
  align-items:center;
  border-radius:8px;
  color:var(--text-muted,#fff9);
  display:inline-flex;
  font-weight:500;
  gap:.5rem;
  padding:.75rem 1.5rem;
  text-decoration:none;
  transition:all .3s
  }
  
  .back-btn:hover {
  background:var(--color-bg-element,#ffffff0d);
  color:var(--text-primary,white)
  }
  
  .back-btn i {
  font-size:1rem
  }
  
  .summary-card,.country-selection-card {
  background:linear-gradient(var(--color-primary-dark,#181920),var(--color-primary-dark,#181920)) padding-box,linear-gradient(to bottom,#ffffff24,#ffffff14) border-box;
  border:1px solid transparent;
  border-radius:16px;
  margin-bottom:2rem;
  padding:2rem
  }
  
  .summary-item:last-child .summary-value,.info-box strong {
  color:#c66bd5
  }
  
  @media (max-width: 768px) {
  .payment-hero h1 {
  font-size:1.5rem
  }
  
  .submit-btn {
  justify-content:center;
  width:100%
  }
  
  .payment-hero,.summary-card,.country-selection-card {
  padding:1.5rem
  }
  }
  
  .bv-wrapper {
  background:transparent;
  overflow-x:hidden;
  padding:2rem 0;
  width:100%
  }
  
  .bv-container {
  box-sizing:border-box;
  margin:0 auto;
  max-width:1000px;
  padding:0 1rem;
  width:100%
  }
  
  .bv-header {
  background:linear-gradient(81.02deg,#fa556026 -23.47%,#b14bf426 45.52%,#4d91ff26 114.8%);
  border:1px solid #b14bf44d;
  border-radius:24px;
  margin-bottom:2rem;
  padding:2.5rem;
  text-align:center
  }
  
  .bv-header h1 {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  align-items:center;
  background:linear-gradient(81.02deg,#fa5560 -23.47%,#b14bf4 45.52%,#4d91ff 114.8%);
  background-clip:text;
  display:flex;
  font-size:2.2rem;
  font-weight:700;
  gap:.75rem;
  justify-content:center;
  margin:0 0 .5rem
  }
  
  .bv-header p {
  color:var(--text-secondary,#ffffffb3);
  font-size:1.1rem;
  margin:0
  }
  
  .bv-steps-container {
  background:linear-gradient(var(--color-primary-dark,#181920),var(--color-primary-dark,#181920)) padding-box,linear-gradient(to bottom,#ffffff24,#ffffff14) border-box;
  border:1px solid transparent;
  border-radius:16px;
  box-sizing:border-box;
  margin-bottom:2rem;
  padding:2.5rem;
  width:100%
  }
  
  .bv-step {
  border-bottom:1px solid var(--border-subtle,#ffffff1a);
  margin-bottom:2.5rem;
  padding-bottom:2.5rem
  }
  
  .bv-step:last-child {
  border-bottom:none;
  margin-bottom:0;
  padding-bottom:0
  }
  
  .bv-step-header {
  align-items:center;
  display:flex;
  gap:1rem;
  justify-content:center;
  margin-bottom:1.5rem
  }
  
  .bv-step-number {
  align-items:center;
  background:linear-gradient(81.02deg,#fa5560 -23.47%,#b14bf4 45.52%,#4d91ff 114.8%);
  border-radius:50%;
  color:var(--text-primary);
  display:flex;
  flex-shrink:0;
  font-size:1.5rem;
  font-weight:700;
  height:50px;
  justify-content:center;
  width:50px
  }
  
  .bv-step-title {
  color:var(--text-primary,white);
  font-size:1.5rem;
  font-weight:700;
  text-align:center
  }
  
  .bv-step-content {
  color:var(--text-primary,#fffc);
  font-size:1.05rem;
  line-height:1.8;
  margin-left:66px;
  text-align:center
  }
  
  .bv-logo-container {
  align-items:center;
  background:transparent;
  box-sizing:border-box;
  display:flex;
  flex-wrap:wrap;
  gap:2rem;
  justify-content:center;
  margin:1.5rem 0;
  max-width:100%;
  padding:1.5rem 0
  }
  
  .bv-logo-link {
  align-items:center;
  background:#fff;
  border:none;
  border-radius:12px;
  box-sizing:border-box;
  display:flex;
  height:100px;
  justify-content:center;
  padding:1.5rem;
  transition:all .3s;
  width:280px
  }
  
  .bv-logo-link:hover {
  box-shadow:0 4px 12px #b14bf433;
  transform:scale(1.05)
  }
  
  .bv-logo-link img {
  display:block;
  height:auto;
  max-height:65px;
  max-width:220px;
  object-fit:contain;
  width:auto
  }
  
  .bv-noscript-link {
  background:linear-gradient(81.02deg,#fa556033 -23.47%,#b14bf433 45.52%,#4d91ff33 114.8%);
  border:1px solid #b14bf44d;
  border-radius:12px;
  margin:1.5rem 0;
  padding:1.5rem 2rem;
  text-align:center
  }
  
  .bv-noscript-link h3 {
  color:var(--text-primary,white);
  font-size:1.2rem;
  margin-bottom:1rem
  }
  
  .bv-noscript-link .link-box {
  background:#ffffff1a;
  border-radius:8px;
  color:#c66bd5;
  font-family:monospace;
  font-size:.9rem;
  margin-top:1rem;
  padding:1rem;
  word-break:break-all
  }
  
  .bv-noscript-link p {
  color:var(--text-secondary,#ffffffb3);
  font-size:.9rem;
  margin-top:1rem
  }
  
  .bv-info-text {
  background:#b14bf41a;
  border-left:4px solid #b14bf4;
  border-radius:8px;
  box-sizing:border-box;
  color:var(--text-primary,#fffc);
  line-height:1.8;
  margin-top:1.5rem;
  padding:1.5rem;
  width:100%
  }
  
  .bv-info-text a {
  color:#b14bf4;
  font-weight:700;
  text-decoration:underline
  }
  
  .bv-button-container {
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  justify-content:center;
  margin-top:2rem
  }
  
  .bv-btn {
  align-items:center;
  border:none;
  border-radius:50px;
  cursor:pointer;
  display:inline-flex;
  font-size:18px;
  font-weight:700;
  gap:.75rem;
  padding:16px 36px;
  transition:all .3s
  }
  
  .bv-btn-primary {
  background:linear-gradient(81.02deg,#fa5560 -23.47%,#b14bf4 45.52%,#4d91ff 114.8%);
  box-shadow:0 4px 12px #b14bf44d;
  color:#fff
  }
  
  .bv-btn-primary:hover {
  box-shadow:0 6px 20px #b14bf466;
  transform:translateY(-2px)
  }
  
  .bv-faq-container {
  background:linear-gradient(var(--color-primary-dark,#181920),var(--color-primary-dark,#181920)) padding-box,linear-gradient(to bottom,#ffffff24,#ffffff14) border-box;
  border:1px solid transparent;
  border-radius:16px;
  box-sizing:border-box;
  margin-bottom:2rem;
  padding:2rem;
  width:100%
  }
  
  .bv-faq-title {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  align-items:center;
  background:linear-gradient(81.02deg,#fa5560 -23.47%,#b14bf4 45.52%,#4d91ff 114.8%);
  background-clip:text;
  display:flex;
  font-size:1.8rem;
  font-weight:700;
  gap:.5rem;
  justify-content:center;
  margin-bottom:1.5rem;
  text-align:center
  }
  
  .bv-faq-item {
  border-bottom:1px solid var(--border-subtle,#ffffff1a)
  }
  
  .bv-faq-item:last-child {
  border-bottom:none
  }
  
  .bv-faq-question {
  align-items:center;
  background:none;
  border:none;
  color:var(--text-primary,#ffffffe6);
  cursor:pointer;
  display:flex;
  font-size:1.1rem;
  font-weight:600;
  justify-content:space-between;
  outline:none;
  padding:1.25rem 0;
  text-align:left;
  transition:color .3s;
  width:100%
  }
  
  .bv-faq-question:focus {
  outline:none
  }
  
  .bv-faq-icon {
  color:#b14bf4;
  flex-shrink:0;
  font-size:1.2rem;
  transition:transform .3s
  }
  
  .bv-faq-answer {
  color:var(--text-secondary,#ffffffb3);
  line-height:1.8;
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease
  }
  
  .bv-faq-answer-inner {
  padding-bottom:1.25rem
  }
  
  .bv-faq-item.active .bv-faq-answer {
  max-height:500px
  }
  
  .bv-faq-item.active .bv-faq-icon {
  transform:rotate(180deg)
  }
  
  .bv-info-text strong,.bv-info-text a:hover,.bv-faq-question:hover {
  color:#c66bd5
  }
  
  @media (max-width: 768px) {
  .bv-wrapper {
  padding:1rem 0
  }
  
  .bv-container {
  padding:0 .75rem
  }
  
  .bv-header {
  padding:1.5rem
  }
  
  .bv-header h1 {
  flex-direction:column;
  font-size:1.6rem;
  gap:.5rem
  }
  
  .bv-step-header {
  flex-direction:column;
  text-align:center
  }
  
  .bv-step-content {
  margin-left:0;
  text-align:center
  }
  
  .bv-button-container {
  flex-direction:column
  }
  
  .bv-btn {
  justify-content:center;
  width:100%
  }
  
  .bv-logo-container {
  background:transparent;
  flex-direction:column;
  gap:1rem;
  margin:1rem auto;
  max-width:calc(100% - 1rem);
  padding:1rem 0
  }
  
  .bv-logo-link img {
  max-width:200px
  }
  
  .bv-noscript-link h3 {
  font-size:1rem
  }
  
  .bv-noscript-link .link-box {
  font-size:.75rem;
  padding:.75rem
  }
  
  .bv-steps-container,.bv-faq-container {
  padding:1.25rem
  }
  
  .bv-info-text,.bv-noscript-link {
  padding:1rem
  }
  }
  
  .comments-wrapper {
  margin-top:32px
  }
  
  .comments-header {
  align-items:center;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:space-between;
  margin-bottom:24px
  }
  
  .comments-title {
  color:var(--text-primary,white);
  font-size:20px;
  font-weight:600;
  margin:0
  }
  
  .comments-sort {
  align-items:center;
  display:flex;
  gap:8px
  }
  
  .comments-sort-label {
  color:var(--text-tertiary,#ffffff80);
  font-size:13px
  }
  
  .comments-sort-select {
  appearance:none;
  background:#ffffff14;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='#ffffff80' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position:right 8px center;
  background-repeat:no-repeat;
  border:1px solid var(--border-subtle);
  border-radius:6px;
  color:var(--text-primary,white);
  cursor:pointer;
  font-size:13px;
  padding:6px 28px 6px 10px
  }
  
  .comments-sort-select:hover {
  border-color:var(--border-subtle)
  }
  
  .comments-sort-select:focus {
  border-color:var(--border-subtle);
  outline:none
  }
  
  .comments-sort-select option {
  background:#1a1a2e;
  color:var(--text-primary,white)
  }
  
  .comment-item {
  background:var(--color-bg-subtle,#ffffff08);
  border:1px solid var(--border-subtle);
  border-radius:12px;
  margin-bottom:16px;
  padding:20px;
  transition:border-color .2s
  }
  
  .comment-item:target {
  animation:highlightComment 2s ease-out;
  border-color:#b14bf480
  }
  
  @keyframes highlightComment {
  0% {
  background:#ffffff1f
  }
  
  100% {
  background:#ffffff08
  }
  }
  
  .comment-header {
  align-items:center;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:12px
  }
  
  .comment-author {
  align-items:center;
  color:var(--text-primary,white);
  display:inline-flex;
  font-size:14px;
  font-weight:600;
  gap:8px;
  text-decoration:none
  }
  
  .comment-author svg {
  color:var(--text-tertiary,#ffffff80)
  }
  
  .comment-date {
  color:var(--text-tertiary,#fff6);
  font-size:13px
  }
  
  .comment-actions {
  align-items:center;
  display:flex;
  gap:8px;
  margin-left:auto
  }
  
  .comment-link-btn {
  background:none;
  border:none;
  color:var(--text-tertiary,#fff6);
  cursor:pointer;
  display:inline-flex;
  padding:4px;
  transition:color .2s
  }
  
  .comment-link-btn:hover {
  color:var(--text-primary,#fffc)
  }
  
  .comment-link-btn.copied {
  color:#10b981
  }
  
  .comment-ip {
  color:var(--text-faint);
  font-size:12px
  }
  
  .comment-delete {
  background:none;
  border:none;
  color:#fa5560;
  cursor:pointer;
  display:inline-flex;
  padding:4px;
  transition:opacity .2s
  }
  
  .comment-delete:hover {
  opacity:.7
  }
  
  .comment-item.deleting {
  opacity:.5;
  pointer-events:none
  }
  
  .comment-item.deleted {
  animation:fadeOut .3s ease forwards
  }
  
  @keyframes fadeOut {
  to {
  height:0;
  margin:0;
  opacity:0;
  overflow:hidden;
  padding:0
  }
  }
  
  .comment-text {
  color:var(--text-primary,#fffc);
  font-size:14px;
  line-height:1.6;
  margin-bottom:12px
  }
  
  .comment-footer {
  align-items:center;
  border-top:1px solid var(--border-subtle);
  display:flex;
  gap:16px;
  padding-top:12px
  }
  
  .comment-vote-btn {
  align-items:center;
  background:none;
  border:none;
  border-radius:6px;
  color:var(--text-tertiary,#ffffff80);
  cursor:pointer;
  display:inline-flex;
  font-size:13px;
  gap:6px;
  padding:6px 10px;
  transition:all .2s
  }
  
  .comment-vote-btn:hover {
  background:#ffffff14;
  color:var(--text-primary,#fffc)
  }
  
  .comment-vote-btn.active-up {
  background:#10b98126;
  color:#10b981
  }
  
  .comment-vote-btn.active-down {
  background:#fa556026;
  color:#fa5560
  }
  
  .comment-vote-btn.vote-up.has-votes {
  color:#10b981
  }
  
  .comment-vote-btn.vote-down.has-votes {
  color:#fa5560
  }
  
  .comment-vote-btn:disabled {
  cursor:default;
  position:relative
  }
  
  .comment-vote-btn:disabled:hover::after {
  background:#14141ef2;
  border:1px solid var(--border-subtle);
  border-radius:6px;
  bottom:calc(100% + 8px);
  color:var(--text-primary,white);
  content:'Log in to vote';
  font-size:12px;
  font-weight:500;
  left:50%;
  padding:6px 12px;
  position:absolute;
  transform:translateX(-50%);
  white-space:nowrap;
  z-index:100
  }
  
  .comment-vote-btn:disabled:hover::before {
  border:5px solid transparent;
  border-top-color:var(--border-subtle);
  bottom:calc(100% + 2px);
  content:'';
  left:50%;
  position:absolute;
  transform:translateX(-50%);
  z-index:100
  }
  
  .vote-count {
  font-weight:600
  }
  
  .comment-form {
  background:var(--color-bg-subtle,#ffffff08);
  border:1px solid var(--border-subtle);
  border-radius:12px;
  margin-bottom:16px;
  padding:24px
  }
  
  .comment-textarea {
  background:var(--color-bg-element,#ffffff0d);
  border:1px solid var(--border-subtle,#ffffff1a);
  border-radius:8px;
  color:var(--text-primary,white);
  font-size:14px;
  margin-bottom:16px;
  min-height:100px;
  padding:12px 16px;
  resize:vertical;
  transition:border-color 0.2s,background .2s;
  width:100%
  }
  
  .comment-textarea:focus {
  background:#ffffff14;
  border-color:var(--border-subtle);
  outline:none
  }
  
  .comment-textarea::placeholder {
  color:var(--text-tertiary,#fff6)
  }
  
  .comment-submit {
  background:#ffffff1a;
  border:1px solid var(--border-subtle);
  border-radius:8px;
  color:var(--text-primary,white);
  cursor:pointer;
  font-size:14px;
  font-weight:500;
  padding:12px 24px;
  transition:background 0.2s,border-color .2s
  }
  
  .comment-submit:hover {
  background:#ffffff26;
  border-color:var(--border-subtle)
  }
  
  .no-comments {
  align-items:center;
  background:var(--color-bg-subtle,#ffffff08);
  border:1px solid var(--border-subtle);
  border-radius:12px;
  display:flex;
  flex-direction:column;
  gap:12px;
  justify-content:center;
  padding:40px 24px;
  text-align:center
  }
  
  .no-comments svg {
  color:var(--text-faint)
  }
  
  .no-comments-text {
  color:var(--text-tertiary,#ffffff80);
  font-size:15px
  }
  
  .no-comments-subtext {
  color:var(--text-faint);
  font-size:13px
  }
  
  .load-more-wrapper {
  display:flex;
  justify-content:center;
  margin-top:16px
  }
  
  .load-more-btn {
  align-items:center;
  background:var(--color-bg-element,#ffffff0d);
  border:1px solid var(--border-subtle,#ffffff1a);
  border-radius:8px;
  color:var(--text-secondary,#ffffffb3);
  cursor:pointer;
  display:inline-flex;
  font-size:14px;
  font-weight:500;
  gap:8px;
  padding:12px 24px;
  transition:all .2s
  }
  
  .load-more-btn:hover {
  background:#ffffff1a;
  border-color:var(--border-subtle);
  color:var(--text-primary,white)
  }
  
  .load-more-btn svg {
  transition:transform .2s
  }
  
  .load-more-btn:hover svg {
  transform:translateY(2px)
  }
  
  .comment-item.hidden-comment {
  display:none
  }
  
  .comment-login-notice {
  align-items:center;
  background:var(--color-bg-subtle,#ffffff08);
  border:1px solid var(--border-subtle);
  border-radius:12px;
  color:var(--text-muted,#fff9);
  display:flex;
  font-size:14px;
  gap:10px;
  margin-bottom:16px;
  padding:20px 24px
  }
  
  .comment-login-notice svg {
  color:var(--text-tertiary,#fff6);
  flex-shrink:0
  }
  
  .comment-login-notice a {
  color:#4d91ff;
  font-weight:600;
  text-decoration:none
  }
  
  .comment-login-notice a:hover {
  text-decoration:underline
  }
  
  .copy-tooltip {
  animation:tooltipFade 1.5s ease-out forwards;
  background:#10b981f2;
  border-radius:6px;
  color:var(--text-primary,white);
  font-size:13px;
  font-weight:500;
  padding:8px 12px;
  pointer-events:none;
  position:fixed;
  z-index:9999
  }
  
  @keyframes tooltipFade {
  0%,70% {
  opacity:1
  }
  
  100% {
  opacity:0
  }
  }
  
  .bad-word-warning,.comment-error {
  align-items:center;
  animation:warningFadeIn .3s ease;
  background:#fa556026;
  border:1px solid #fa55604d;
  border-radius:8px;
  color:#fa5560;
  display:flex;
  font-size:13px;
  gap:10px;
  margin-bottom:12px;
  margin-top:12px;
  padding:12px 16px
  }
  
  .comment-success {
  align-items:center;
  animation:warningFadeIn .3s ease;
  background:#10b98126;
  border:1px solid #10b9814d;
  border-radius:8px;
  color:#10b981;
  display:flex;
  font-size:13px;
  gap:10px;
  margin-bottom:12px;
  margin-top:12px;
  padding:12px 16px
  }
  
  .bad-word-warning svg {
  flex-shrink:0
  }
  
  @keyframes warningFadeIn {
  from {
  opacity:0;
  transform:translateY(-5px)
  }
  
  to {
  opacity:1;
  transform:translateY(0)
  }
  }
  
  .ce-wrapper {
  background:transparent;
  overflow-x:hidden;
  padding:2rem 0;
  width:100%
  }
  
  .ce-container {
  box-sizing:border-box;
  margin:0 auto;
  max-width:1000px;
  padding:0 1rem;
  width:100%
  }
  
  .ce-header {
  margin-bottom:2rem;
  text-align:center
  }
  
  .ce-header h1 {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560 -23.47%,#b14bf4 45.52%,#4d91ff 114.8%);
  background-clip:text;
  font-size:2.5rem;
  font-weight:700;
  margin-bottom:.5rem
  }
  
  .ce-header p {
  color:var(--text-muted,#fff9);
  font-size:1.1rem
  }
  
  .ce-steps-container {
  background:linear-gradient(var(--color-primary-dark,#181920),var(--color-primary-dark,#181920)) padding-box,linear-gradient(to bottom,#ffffff24,#ffffff14) border-box;
  border:1px solid transparent;
  border-radius:24px;
  box-sizing:border-box;
  margin-bottom:2rem;
  padding:2.5rem;
  width:100%
  }
  
  .ce-step {
  border-bottom:1px solid var(--border-subtle,#ffffff1a);
  margin-bottom:2.5rem;
  padding-bottom:2.5rem
  }
  
  .ce-step:last-child {
  border-bottom:none;
  margin-bottom:0;
  padding-bottom:0
  }
  
  .ce-step-header {
  align-items:center;
  display:flex;
  gap:1rem;
  justify-content:center;
  margin-bottom:1.5rem
  }
  
  .ce-step-number {
  align-items:center;
  background:linear-gradient(81.02deg,#fa5560 -23.47%,#b14bf4 45.52%,#4d91ff 114.8%);
  border-radius:50%;
  color:var(--text-primary);
  display:flex;
  flex-shrink:0;
  font-size:1.5rem;
  font-weight:700;
  height:50px;
  justify-content:center;
  width:50px
  }
  
  .ce-step-title {
  color:var(--text-primary,white);
  font-size:1.5rem;
  font-weight:700;
  text-align:center
  }
  
  .ce-step-content {
  color:var(--text-secondary,#ffffffb3);
  font-size:1.05rem;
  line-height:1.8;
  margin-left:66px;
  text-align:center
  }
  
  .ce-button-container {
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  justify-content:center;
  margin-top:2rem
  }
  
  .ce-btn {
  align-items:center;
  border:none;
  border-radius:50px;
  cursor:pointer;
  display:inline-flex;
  font-size:18px;
  font-weight:700;
  gap:.5rem;
  padding:16px 36px;
  transition:all .3s
  }
  
  .ce-btn-primary {
  background:linear-gradient(81.02deg,#fa5560 -23.47%,#b14bf4 45.52%,#4d91ff 114.8%);
  box-shadow:0 4px 12px #b14bf44d;
  color:#fff
  }
  
  .ce-btn-primary:hover {
  box-shadow:0 6px 20px #b14bf466;
  transform:translateY(-2px)
  }
  
  .ce-btn-video {
  background:#ffffff1a;
  border:1px solid var(--border-subtle);
  color:var(--text-primary,white);
  font-size:17px;
  padding:12px 26px
  }
  
  .ce-btn-video:hover {
  background:#ffffff26;
  transform:translateY(-2px)
  }
  
  .ce-logo-container {
  align-items:center;
  background:transparent;
  box-sizing:border-box;
  display:flex;
  justify-content:center;
  margin:1.5rem 0;
  max-width:100%;
  padding:1.5rem 0
  }
  
  .ce-logo-link {
  align-items:center;
  background:#fff;
  border:none;
  border-radius:12px;
  box-sizing:border-box;
  display:flex;
  height:120px;
  justify-content:center;
  padding:1.5rem;
  transition:all .3s;
  width:320px
  }
  
  .ce-logo-link:hover {
  box-shadow:0 4px 12px #b14bf433;
  transform:scale(1.05)
  }
  
  .ce-logo-link img {
  display:block;
  height:auto;
  max-height:85px;
  max-width:280px;
  object-fit:contain;
  width:auto
  }
  
  .ce-noscript-link {
  background:linear-gradient(81.02deg,#fa556026 -23.47%,#b14bf426 45.52%,#4d91ff26 114.8%);
  border:1px solid #b14bf44d;
  border-radius:16px;
  color:var(--text-primary,white);
  margin:1.5rem 0;
  padding:1.5rem 2rem;
  text-align:center
  }
  
  .ce-noscript-link h3 {
  color:var(--text-primary,white);
  font-size:1.2rem;
  margin-bottom:1rem
  }
  
  .ce-noscript-link .link-box {
  background:#ffffff1a;
  border-radius:8px;
  color:#c66bd5;
  font-family:monospace;
  font-size:.9rem;
  margin-top:1rem;
  padding:1rem;
  word-break:break-all
  }
  
  .ce-noscript-link p {
  color:var(--text-secondary,#ffffffb3);
  font-size:.9rem;
  margin-top:1rem
  }
  
  .ce-info-text {
  background:#b14bf41a;
  border-left:4px solid #b14bf4;
  border-radius:8px;
  box-sizing:border-box;
  color:var(--text-primary,#fffc);
  line-height:1.8;
  margin-top:1.5rem;
  padding:1.5rem;
  width:100%
  }
  
  .ce-info-text a {
  color:#c66bd5;
  font-weight:700;
  text-decoration:underline
  }
  
  .ce-video-container {
  margin:1.5rem auto 0;
  max-height:0;
  max-width:1000px;
  opacity:0;
  overflow:hidden;
  transition:opacity .4s ease,max-height .45s ease;
  width:100%
  }
  
  .ce-video-container.show {
  max-height:1200px;
  opacity:1
  }
  
  .ce-video-wrapper {
  background:linear-gradient(var(--color-primary-dark,#181920),var(--color-primary-dark,#181920)) padding-box,linear-gradient(to bottom,#ffffff24,#ffffff14) border-box;
  border:1px solid transparent;
  border-radius:16px;
  padding:12px
  }
  
  .ce-video-aspect {
  background:#000;
  border-radius:12px;
  overflow:hidden;
  padding-top:56.25%;
  position:relative;
  width:100%
  }
  
  .ce-video-aspect video {
  border-radius:12px;
  height:100%;
  inset:0;
  position:absolute;
  width:100%
  }
  
  .ce-faq-container {
  background:linear-gradient(var(--color-primary-dark,#181920),var(--color-primary-dark,#181920)) padding-box,linear-gradient(to bottom,#ffffff24,#ffffff14) border-box;
  border:1px solid transparent;
  border-radius:24px;
  box-sizing:border-box;
  margin-bottom:2rem;
  padding:2rem;
  width:100%
  }
  
  .ce-faq-title {
  color:var(--text-primary,white);
  font-size:1.8rem;
  font-weight:700;
  margin-bottom:1.5rem;
  text-align:center
  }
  
  .ce-faq-item {
  border-bottom:1px solid var(--border-subtle,#ffffff1a)
  }
  
  .ce-faq-item:last-child {
  border-bottom:none
  }
  
  .ce-faq-question {
  align-items:center;
  background:none;
  border:none;
  color:var(--text-primary,white);
  cursor:pointer;
  display:flex;
  font-size:1.1rem;
  font-weight:600;
  justify-content:space-between;
  outline:none;
  padding:1.25rem 0;
  text-align:left;
  transition:color .3s;
  width:100%
  }
  
  .ce-faq-question:focus {
  outline:none
  }
  
  .ce-faq-icon {
  color:#c66bd5;
  font-size:1.2rem;
  transition:transform .3s
  }
  
  .ce-faq-answer {
  color:var(--text-secondary,#ffffffb3);
  line-height:1.8;
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease
  }
  
  .ce-faq-answer-inner {
  padding-bottom:1.25rem
  }
  
  .ce-faq-item.active .ce-faq-answer {
  max-height:500px
  }
  
  .ce-faq-item.active .ce-faq-icon {
  transform:rotate(180deg)
  }
  
  .ce-info-text strong,.ce-faq-question:hover {
  color:#c66bd5
  }
  
  @media (max-width: 768px) {
  .ce-wrapper {
  padding:1rem 0
  }
  
  .ce-container {
  padding:0 .75rem
  }
  
  .ce-header h1 {
  font-size:1.8rem
  }
  
  .ce-step-header {
  flex-direction:column;
  text-align:center
  }
  
  .ce-step-content {
  margin-left:0;
  text-align:center
  }
  
  .ce-button-container {
  flex-direction:column
  }
  
  .ce-btn {
  width:100%
  }
  
  .ce-logo-container {
  margin:1rem auto;
  max-width:calc(100% - 1rem);
  padding:1.5rem 1rem
  }
  
  .ce-logo-link img {
  max-width:200px
  }
  
  .ce-video-container {
  width:98%
  }
  
  .ce-noscript-link h3 {
  font-size:1rem
  }
  
  .ce-noscript-link .link-box {
  font-size:.75rem;
  padding:.75rem
  }
  
  .ce-steps-container,.ce-faq-container {
  padding:1.25rem
  }
  
  .ce-info-text,.ce-noscript-link {
  padding:1rem
  }
  }
  
  .delete-file-container {
  margin:2rem auto;
  max-width:600px
  }
  
  .delete-file-block {
  background:var(--border-subtle);
  border:1px solid var(--border-subtle);
  border-radius:16px;
  padding:2rem
  }
  
  .delete-file-header {
  align-items:center;
  border-bottom:1px solid var(--border-subtle);
  display:flex;
  gap:1rem;
  margin-bottom:1.5rem;
  padding-bottom:1.5rem
  }
  
  .delete-file-icon {
  align-items:center;
  background:#ef44441a;
  border-radius:12px;
  display:flex;
  flex-shrink:0;
  height:48px;
  justify-content:center;
  width:48px
  }
  
  .delete-file-icon svg {
  color:#ef4444;
  height:24px;
  width:24px
  }
  
  .delete-file-title {
  color:var(--text-primary);
  font-size:1.25rem;
  font-weight:600;
  margin:0
  }
  
  .delete-file-subtitle {
  color:var(--text-muted);
  font-size:.875rem;
  margin-top:.25rem
  }
  
  .delete-file-info {
  background:var(--border-subtle);
  border:1px solid var(--border-subtle);
  border-radius:12px;
  margin-bottom:1.5rem;
  padding:1rem 1.25rem
  }
  
  .delete-file-name {
  color:var(--text-primary);
  font-size:1rem;
  font-weight:600;
  word-break:break-all
  }
  
  .delete-file-warning {
  align-items:flex-start;
  background:#ef444414;
  border-left:3px solid #ef4444;
  border-radius:0 8px 8px 0;
  display:flex;
  gap:.75rem;
  margin-bottom:1.5rem;
  padding:1rem
  }
  
  .delete-file-warning-icon {
  color:#ef4444;
  flex-shrink:0;
  margin-top:2px
  }
  
  .delete-file-warning p {
  color:var(--text-secondary);
  font-size:.875rem;
  line-height:1.5;
  margin:0
  }
  
  .delete-file-actions {
  display:flex;
  gap:1rem;
  justify-content:flex-end
  }
  
  .btn-delete {
  align-items:center;
  background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%);
  border:none;
  border-radius:8px;
  color:#fff!important;
  cursor:pointer;
  display:inline-flex;
  font-size:.875rem;
  font-weight:600;
  gap:.5rem;
  padding:.75rem 1.5rem;
  transition:all .2s ease
  }
  
  .btn-delete:hover {
  box-shadow:0 4px 12px #ef44444d;
  transform:translateY(-1px)
  }
  
  .btn-cancel {
  align-items:center;
  background:#ffffff0d;
  border:1px solid var(--border-subtle);
  border-radius:8px;
  color:var(--text-secondary)!important;
  cursor:pointer;
  display:inline-flex;
  font-size:.875rem;
  font-weight:500;
  gap:.5rem;
  padding:.75rem 1.5rem;
  text-decoration:none;
  transition:all .2s ease
  }
  
  .btn-cancel:hover {
  background:#ffffff1a;
  border-color:var(--border-subtle);
  color:var(--text-primary)!important
  }
  
  .delete-success {
  padding:2rem;
  text-align:center
  }
  
  .delete-success-icon {
  align-items:center;
  background:#22c55e1a;
  border-radius:50%;
  display:flex;
  height:64px;
  justify-content:center;
  margin:0 auto 1rem;
  width:64px
  }
  
  .delete-success-icon svg {
  color:#22c55e;
  height:32px;
  width:32px
  }
  
  .delete-success h3 {
  color:var(--text-primary);
  font-size:1.25rem;
  font-weight:600;
  margin-bottom:.5rem
  }
  
  .delete-success p {
  color:var(--text-secondary);
  font-size:.875rem
  }
  
  @media (max-width: 640px) {
  .delete-file-container {
  margin:1rem
  }
  
  .delete-file-block {
  padding:1.25rem
  }
  
  .delete-file-actions {
  flex-direction:column-reverse
  }
  
  .btn-delete,.btn-cancel {
  justify-content:center;
  width:100%
  }
  }
  
  .dt-payment-wrapper {
  background:transparent;
  overflow-x:hidden;
  padding:2rem 0;
  width:100%
  }
  
  .dt-payment-container {
  box-sizing:border-box;
  margin:0 auto;
  max-width:900px;
  padding:0 1rem;
  width:100%
  }
  
  .dt-payment-header {
  margin-bottom:2rem;
  text-align:center
  }
  
  .dt-payment-header h1 {
  color:var(--text-primary,white);
  font-size:2.5rem;
  font-weight:700;
  margin-bottom:.5rem
  }
  
  .dt-payment-header p {
  color:var(--text-muted,#fff9);
  font-size:1.1rem
  }
  
  .dt-instant-payment-alert {
  align-items:center;
  background:linear-gradient(81.02deg,#fa556026 -23.47%,#b14bf426 45.52%,#4d91ff26 114.8%);
  border:1px solid #b14bf44d;
  border-radius:16px;
  box-sizing:border-box;
  color:var(--text-primary,white);
  display:flex;
  gap:1rem;
  margin-bottom:2rem;
  padding:1.5rem 2rem;
  width:100%
  }
  
  .dt-instant-payment-alert svg {
  color:#c66bd5;
  flex-shrink:0;
  font-size:2rem
  }
  
  .dt-instant-payment-alert .alert-content {
  flex:1
  }
  
  .dt-instant-payment-alert p {
  color:var(--text-primary,#ffffffe6);
  font-size:1rem;
  margin-bottom:.5rem
  }
  
  .dt-instant-payment-alert a {
  color:#c66bd5;
  display:inline-block;
  font-weight:600;
  margin-top:.5rem;
  text-decoration:none
  }
  
  .dt-instant-payment-alert a:hover {
  text-decoration:underline
  }
  
  .dt-order-summary {
  background:linear-gradient(var(--color-primary-dark,#181920),var(--color-primary-dark,#181920)) padding-box,linear-gradient(to bottom,#ffffff24,#ffffff14) border-box;
  border:1px solid transparent;
  border-radius:16px;
  box-sizing:border-box;
  margin-bottom:2rem;
  padding:2rem;
  width:100%
  }
  
  .dt-order-summary h2 {
  align-items:center;
  color:var(--text-primary,white);
  display:flex;
  font-size:1.5rem;
  font-weight:700;
  gap:.5rem;
  margin-bottom:1rem
  }
  
  .dt-order-details {
  align-items:center;
  background:var(--color-bg-element,#ffffff0d);
  border-radius:12px;
  display:flex;
  justify-content:space-between;
  margin-bottom:1rem;
  padding:1rem
  }
  
  .dt-order-details .product {
  color:var(--text-primary,#ffffffe6);
  font-size:1.1rem;
  font-weight:600
  }
  
  .dt-order-details .amount {
  color:#c66bd5;
  font-size:1.8rem;
  font-weight:700
  }
  
  .dt-instructions-box {
  background:#b14bf41a;
  border-left:4px solid #b14bf4;
  border-radius:8px;
  margin-bottom:2rem;
  padding:1.5rem
  }
  
  .dt-instructions-box p {
  color:var(--text-primary,#fffc);
  line-height:1.8;
  margin-bottom:.5rem
  }
  
  .dt-payment-methods-grid {
  display:grid;
  gap:2rem;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  margin-bottom:2rem
  }
  
  .dt-payment-card {
  background:linear-gradient(var(--color-primary-dark,#181920),var(--color-primary-dark,#181920)) padding-box,linear-gradient(to bottom,#ffffff24,#ffffff14) border-box;
  border:1px solid transparent;
  border-radius:16px;
  box-sizing:border-box;
  padding:2rem;
  transition:all .3s;
  width:100%
  }
  
  .dt-payment-card:hover {
  box-shadow:0 8px 24px #b14bf426;
  transform:translateY(-5px)
  }
  
  .dt-payment-card h3 {
  align-items:center;
  color:var(--text-primary,white);
  display:flex;
  font-size:1.3rem;
  font-weight:700;
  gap:.5rem;
  justify-content:center;
  margin-bottom:1.5rem;
  text-align:center
  }
  
  .dt-qr-code-container {
  align-items:center;
  display:flex;
  flex-direction:column;
  justify-content:center;
  margin-bottom:1.5rem;
  text-align:center
  }
  
  .dt-qr-code-container img {
  background:#fff;
  border:3px solid var(--border-subtle,#ffffff1a);
  border-radius:12px;
  display:block;
  margin:0 auto;
  max-width:250px;
  padding:1rem
  }
  
  .dt-qr-pulse-text {
  animation:dt-pulse 2s ease-in-out infinite;
  color:#fa5560;
  font-weight:600;
  margin-top:1rem
  }
  
  .dt-order-summary h2 svg,.dt-instructions-box strong,.dt-payment-card h3 svg {
  color:#c66bd5
  }
  
  @keyframes dt-pulse {
  0%,100% {
  opacity:1;
  transform:scale(1)
  }
  
  50% {
  opacity:.8;
  transform:scale(1.02)
  }
  }
  
  .dt-bank-detail {
  margin-bottom:1.5rem
  }
  
  .dt-bank-detail label {
  color:var(--text-tertiary,#ffffff80);
  display:block;
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.5px;
  margin-bottom:.5rem;
  text-transform:uppercase
  }
  
  .dt-bank-detail-value {
  align-items:center;
  background:var(--color-bg-element,#ffffff0d);
  border:1px solid var(--border-subtle,#ffffff1a);
  border-radius:12px;
  color:var(--text-primary,white);
  cursor:pointer;
  display:flex;
  font-size:1.1rem;
  font-weight:600;
  justify-content:space-between;
  padding:1rem 1.5rem;
  transition:all .3s
  }
  
  .dt-bank-detail-value:hover {
  background:#b14bf41a;
  border-color:#b14bf4
  }
  
  .dt-bank-detail-value .value {
  flex:1;
  min-width:0;
  overflow-wrap:break-word;
  word-break:break-word
  }
  
  .dt-copy-btn {
  align-items:center;
  background:linear-gradient(81.02deg,#fa5560 -23.47%,#b14bf4 45.52%,#4d91ff 114.8%);
  border:none;
  border-radius:8px;
  color:#fff;
  cursor:pointer;
  display:flex;
  flex-shrink:0;
  font-size:.8rem;
  font-weight:600;
  gap:.35rem;
  margin-left:.75rem;
  padding:.5rem .75rem;
  transition:all .3s;
  white-space:nowrap
  }
  
  .dt-copy-btn:hover {
  box-shadow:0 4px 12px #b14bf466;
  transform:translateY(-2px)
  }
  
  .dt-copy-btn svg {
  height:14px;
  width:14px
  }
  
  .dt-copy-btn.copied {
  background:linear-gradient(135deg,#28a745 0%,#218838 100%)
  }
  
  .dt-important-notes {
  background:linear-gradient(var(--color-primary-dark,#181920),var(--color-primary-dark,#181920)) padding-box,linear-gradient(to bottom,#ffffff24,#ffffff14) border-box;
  border:1px solid transparent;
  border-radius:16px;
  box-sizing:border-box;
  padding:2rem;
  width:100%
  }
  
  .dt-important-notes h3 {
  align-items:center;
  color:var(--text-primary,white);
  display:flex;
  font-size:1.3rem;
  font-weight:700;
  gap:.5rem;
  margin-bottom:1rem
  }
  
  .dt-important-notes h3 svg {
  color:#ffb347
  }
  
  .dt-important-notes ul {
  list-style:none;
  padding:0
  }
  
  .dt-important-notes li {
  align-items:flex-start;
  border-bottom:1px solid var(--border-subtle,#ffffff1a);
  color:var(--text-secondary,#ffffffb3);
  display:flex;
  gap:.8rem;
  line-height:1.8;
  padding:.8rem 0
  }
  
  .dt-important-notes li:last-child {
  border-bottom:none
  }
  
  .dt-important-notes li svg {
  color:#c66bd5;
  flex-shrink:0;
  margin-top:.2rem
  }
  
  @media (max-width: 768px) {
  .dt-payment-wrapper {
  padding:1rem 0
  }
  
  .dt-payment-container {
  padding:0 .75rem
  }
  
  .dt-payment-header h1 {
  font-size:1.8rem
  }
  
  .dt-order-summary,.dt-payment-card,.dt-important-notes,.dt-instant-payment-alert {
  padding:1.25rem
  }
  
  .dt-payment-methods-grid {
  gap:1rem;
  grid-template-columns:1fr
  }
  
  .dt-order-details {
  flex-direction:column;
  gap:1rem;
  text-align:center
  }
  
  .dt-instant-payment-alert {
  flex-direction:column;
  padding:1rem;
  text-align:center
  }
  
  .dt-bank-detail-value {
  flex-direction:column;
  gap:1rem;
  padding:.75rem 1rem;
  word-break:break-word
  }
  
  .dt-copy-btn {
  justify-content:center;
  margin-left:0;
  width:100%
  }
  
  .dt-bank-detail label {
  font-size:.75rem
  }
  
  .dt-instructions-box {
  padding:1rem
  }
  }
  
  .dt-toast {
  align-items:center;
  animation:dt-slideIn .3s ease-out;
  background:linear-gradient(135deg,#28a745 0%,#218838 100%);
  border-radius:12px;
  bottom:2rem;
  box-shadow:0 4px 20px #0000004d;
  color:var(--text-primary);
  display:none;
  gap:.8rem;
  padding:1rem 1.5rem;
  position:fixed;
  right:2rem;
  z-index:1000
  }
  
  .dt-toast.show {
  display:flex
  }
  
  @keyframes dt-slideIn {
  from {
  opacity:0;
  transform:translateX(400px)
  }
  
  to {
  opacity:1;
  transform:translateX(0)
  }
  }
  
  .dt-toast svg {
  height:24px;
  width:24px
  }
  
  .download-page-container {
  margin:0 auto;
  max-width:700px;
  padding:40px 24px
  }
  
  .download-page-container .file-info {
  background:var(--color-surface,#ffffff0d);
  border:1px solid var(--border-subtle,#ffffff1a);
  border-radius:16px;
  margin-bottom:24px;
  padding:24px
  }
  
  .download-page-container .file-name {
  color:var(--text-primary,#fff);
  font-size:18px;
  font-weight:700;
  margin-bottom:8px;
  word-break:break-all
  }
  
  .download-page-container .file-size {
  color:var(--text-muted,#ffffff80);
  font-size:14px
  }
  
  .download-page-container .download-btn {
  position:relative;
  background:linear-gradient(rgba(30,30,50,0.6),rgba(30,30,50,0.6)) padding-box,linear-gradient(81.02deg,#fd941366,#ff69b4aa,#b14bf4cc,#ac65cbaa,#3aafd388) border-box;
  border:1px solid transparent;
  border-radius:14px;
  backdrop-filter:blur(12px) saturate(180%);
  -webkit-backdrop-filter:blur(12px) saturate(180%);
  color:#fff;
  cursor:pointer;
  display:block;
  font-size:16px;
  font-weight:700;
  overflow:hidden;
  padding:16px;
  text-align:center;
  text-decoration:none;
  transition:all .4s ease;
  width:100%;
  box-shadow:0 0 20px rgba(255,255,255,0.05),0 6px 24px rgba(0,0,0,0.2),inset 0 1px 1px rgba(255,255,255,0.15),inset 0 -1px 1px rgba(0,0,0,0.3)
  }

  .download-page-container .download-btn:hover {
  filter:brightness(1.05);
  box-shadow:0 0 30px rgba(177,75,244,0.35),0 0 60px rgba(177,75,244,0.15),0 12px 32px rgba(0,0,0,0.4);
  color:#fff;
  text-decoration:none
  }

  .download-page-container .download-btn::before {
  content:'';
  position:absolute;
  top:0;
  left:15%;
  right:15%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.5),transparent);
  pointer-events:none;
  z-index:1
  }

  .download-page-container .download-btn::after {
  content:'';
  position:absolute;
  top:0;
  left:-125%;
  width:60%;
  height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,0.25),transparent);
  transform:skewX(-25deg);
  transition:left .6s cubic-bezier(0.25,0.46,0.45,0.94);
  pointer-events:none;
  z-index:1
  }

  .download-page-container .download-btn:hover::after {
  left:150%
  }

  .download-page-container .cf-turnstile {
  margin:16px 0
  }
  
  @media (max-width: 768px) {
  .download-page-container .cf-turnstile iframe {
  max-width:100%!important;
  transform:scale(0.85);
  transform-origin:left top
  }
  
  .download-page-container {
  padding:24px 16px
  }
  }
  
  .download-wait-upgrade-btn {
  position:relative;
  align-items:center;
  background:linear-gradient(rgba(30,30,50,0.6),rgba(30,30,50,0.6)) padding-box,linear-gradient(81.02deg,#fd941366,#ff69b4aa,#b14bf4cc,#ac65cbaa,#3aafd388) border-box;
  border:1px solid transparent;
  border-radius:14px;
  backdrop-filter:blur(12px) saturate(180%);
  -webkit-backdrop-filter:blur(12px) saturate(180%);
  color:#fff;
  cursor:pointer;
  display:inline-flex;
  font-size:15px;
  font-weight:700;
  gap:8px;
  overflow:hidden;
  padding:14px 32px;
  text-decoration:none;
  transition:all .4s ease;
  box-shadow:0 0 20px rgba(255,255,255,0.05),0 6px 24px rgba(0,0,0,0.2),inset 0 1px 1px rgba(255,255,255,0.15),inset 0 -1px 1px rgba(0,0,0,0.3)
  }

  .download-wait-upgrade-btn:hover {
  filter:brightness(1.05);
  box-shadow:0 0 30px rgba(177,75,244,0.35),0 0 60px rgba(177,75,244,0.15),0 12px 32px rgba(0,0,0,0.4);
  color:#fff;
  text-decoration:none
  }

  .download-wait-upgrade-btn::before {
  content:'';
  position:absolute;
  top:0;
  left:15%;
  right:15%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.5),transparent);
  pointer-events:none;
  z-index:1
  }

  .download-wait-upgrade-btn::after {
  content:'';
  position:absolute;
  top:0;
  left:-125%;
  width:60%;
  height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,0.25),transparent);
  transform:skewX(-25deg);
  transition:left .6s cubic-bezier(0.25,0.46,0.45,0.94);
  pointer-events:none;
  z-index:1
  }

  .download-wait-upgrade-btn:hover::after {
  left:150%
  }

  .download-wait-countdown {
  color:var(--text-primary,#fff);
  font-size:48px;
  font-variant-numeric:tabular-nums;
  font-weight:800;
  margin:24px 0;
  text-align:center
  }
  
  .download-wait-text {
  color:var(--text-muted,#ffffff80);
  font-size:15px;
  text-align:center
  }
  
  @media (max-width: 768px) {
  .download-wait-countdown {
  font-size:36px
  }
  }
  
  .ce-wrapper {
  background:transparent;
  overflow-x:hidden;
  padding:2rem 0;
  width:100%
  }
  
  .ce-container {
  box-sizing:border-box;
  margin:0 auto;
  max-width:1000px;
  padding:0 1rem;
  width:100%
  }
  
  .ce-header {
  margin-bottom:2rem;
  text-align:center
  }
  
  .ce-header h1 {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560 -23.47%,#b14bf4 45.52%,#4d91ff 114.8%);
  background-clip:text;
  font-size:2.5rem;
  font-weight:700;
  margin-bottom:.5rem
  }
  
  .ce-header p {
  color:var(--text-muted,#fff9);
  font-size:1.1rem
  }
  
  .ce-steps-container {
  background:linear-gradient(var(--color-primary-dark,#181920),var(--color-primary-dark,#181920)) padding-box,linear-gradient(to bottom,#ffffff24,#ffffff14) border-box;
  border:1px solid transparent;
  border-radius:24px;
  box-sizing:border-box;
  margin-bottom:2rem;
  padding:2.5rem;
  width:100%
  }
  
  .ce-step {
  border-bottom:1px solid var(--border-subtle,#ffffff1a);
  margin-bottom:2.5rem;
  padding-bottom:2.5rem
  }
  
  .ce-step:last-child {
  border-bottom:none;
  margin-bottom:0;
  padding-bottom:0
  }
  
  .ce-step-header {
  align-items:center;
  display:flex;
  gap:1rem;
  justify-content:center;
  margin-bottom:1.5rem
  }
  
  .ce-step-number {
  align-items:center;
  background:linear-gradient(81.02deg,#fa5560 -23.47%,#b14bf4 45.52%,#4d91ff 114.8%);
  border-radius:50%;
  color:var(--text-primary);
  display:flex;
  flex-shrink:0;
  font-size:1.5rem;
  font-weight:700;
  height:50px;
  justify-content:center;
  width:50px
  }
  
  .ce-step-title {
  color:var(--text-primary,white);
  font-size:1.5rem;
  font-weight:700;
  text-align:center
  }
  
  .ce-step-content {
  color:var(--text-secondary,#ffffffb3);
  font-size:1.05rem;
  line-height:1.8;
  margin-left:66px;
  text-align:center
  }
  
  .ce-button-container {
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  justify-content:center;
  margin-top:2rem
  }
  
  .ce-btn {
  align-items:center;
  border:none;
  border-radius:50px;
  cursor:pointer;
  display:inline-flex;
  font-size:18px;
  font-weight:700;
  gap:.5rem;
  padding:16px 36px;
  transition:all .3s
  }
  
  .ce-btn-primary {
  background:linear-gradient(81.02deg,#fa5560 -23.47%,#b14bf4 45.52%,#4d91ff 114.8%);
  box-shadow:0 4px 12px #b14bf44d;
  color:#fff
  }
  
  .ce-btn-primary:hover {
  box-shadow:0 6px 20px #b14bf466;
  transform:translateY(-2px)
  }
  
  .ce-logo-container {
  align-items:center;
  background:#fff;
  border:2px solid var(--border-subtle,#ffffff1a);
  border-radius:16px;
  box-sizing:border-box;
  display:flex;
  flex-wrap:wrap;
  gap:2rem;
  justify-content:center;
  margin:1.5rem 0;
  max-width:100%;
  padding:2rem 3rem
  }
  
  .ce-logo-link {
  display:inline-block;
  max-width:100%;
  transition:transform .3s
  }
  
  .ce-logo-link:hover {
  transform:scale(1.05)
  }
  
  .ce-logo-link img {
  display:block;
  height:auto;
  max-width:180px;
  width:100%
  }
  
  .ce-logo-link.logo-small img {
  max-width:140px
  }
  
  .ce-noscript-link {
  background:linear-gradient(81.02deg,#fa556026 -23.47%,#b14bf426 45.52%,#4d91ff26 114.8%);
  border:1px solid #b14bf44d;
  border-radius:16px;
  color:var(--text-primary,white);
  margin:1.5rem 0;
  padding:1.5rem 2rem;
  text-align:center
  }
  
  .ce-noscript-link h3 {
  color:var(--text-primary,white);
  font-size:1.2rem;
  margin-bottom:1rem
  }
  
  .ce-noscript-link .link-box {
  background:#ffffff1a;
  border-radius:8px;
  color:#c66bd5;
  font-family:monospace;
  font-size:.9rem;
  margin-top:1rem;
  padding:1rem;
  word-break:break-all
  }
  
  .ce-noscript-link p {
  color:var(--text-secondary,#ffffffb3);
  font-size:.9rem;
  margin-top:1rem
  }
  
  .ce-info-text {
  background:#b14bf41a;
  border-left:4px solid #b14bf4;
  border-radius:8px;
  box-sizing:border-box;
  color:var(--text-primary,#fffc);
  line-height:1.8;
  margin-top:1.5rem;
  padding:1.5rem;
  width:100%
  }
  
  .ce-info-text a {
  color:#c66bd5;
  font-weight:700;
  text-decoration:underline
  }
  
  .ce-faq-container {
  background:linear-gradient(var(--color-primary-dark,#181920),var(--color-primary-dark,#181920)) padding-box,linear-gradient(to bottom,#ffffff24,#ffffff14) border-box;
  border:1px solid transparent;
  border-radius:24px;
  box-sizing:border-box;
  margin-bottom:2rem;
  padding:2rem;
  width:100%
  }
  
  .ce-faq-title {
  color:var(--text-primary,white);
  font-size:1.8rem;
  font-weight:700;
  margin-bottom:1.5rem;
  text-align:center
  }
  
  .ce-faq-item {
  border-bottom:1px solid var(--border-subtle,#ffffff1a)
  }
  
  .ce-faq-item:last-child {
  border-bottom:none
  }
  
  .ce-faq-question {
  align-items:center;
  background:none;
  border:none;
  color:var(--text-primary,white);
  cursor:pointer;
  display:flex;
  font-size:1.1rem;
  font-weight:600;
  justify-content:space-between;
  outline:none;
  padding:1.25rem 0;
  text-align:left;
  transition:color .3s;
  width:100%
  }
  
  .ce-faq-question:focus {
  outline:none
  }
  
  .ce-faq-icon {
  color:#c66bd5;
  font-size:1.2rem;
  transition:transform .3s
  }
  
  .ce-faq-answer {
  color:var(--text-secondary,#ffffffb3);
  line-height:1.8;
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease
  }
  
  .ce-faq-answer-inner {
  padding-bottom:1.25rem
  }
  
  .ce-faq-item.active .ce-faq-answer {
  max-height:500px
  }
  
  .ce-faq-item.active .ce-faq-icon {
  transform:rotate(180deg)
  }
  
  .ce-info-text strong,.ce-faq-question:hover {
  color:#c66bd5
  }
  
  @media (max-width: 768px) {
  .ce-wrapper {
  padding:1rem 0
  }
  
  .ce-container {
  padding:0 .75rem
  }
  
  .ce-header h1 {
  font-size:1.8rem
  }
  
  .ce-step-header {
  flex-direction:column;
  text-align:center
  }
  
  .ce-step-content {
  margin-left:0;
  text-align:center
  }
  
  .ce-button-container {
  flex-direction:column
  }
  
  .ce-btn {
  width:100%
  }
  
  .ce-logo-container {
  flex-direction:column;
  gap:1rem;
  margin:1rem auto;
  max-width:calc(100% - 1rem);
  padding:1.5rem 1rem
  }
  
  .ce-logo-link img {
  max-width:150px
  }
  
  .ce-noscript-link h3 {
  font-size:1rem
  }
  
  .ce-noscript-link .link-box {
  font-size:.75rem;
  padding:.75rem
  }
  
  .ce-steps-container,.ce-faq-container {
  padding:1.25rem
  }
  
  .ce-info-text,.ce-noscript-link {
  padding:1rem
  }
  }
  
  .file-icon-video {
  fill:#E91E63
  }
  
  .file-icon-audio {
  fill:#9C27B0
  }
  
  .file-icon-image {
  fill:#4CAF50
  }
  
  .file-icon-archive {
  fill:#FF9800
  }
  
  .file-icon-document {
  fill:#2196F3
  }
  
  .file-icon-code {
  fill:#00BCD4
  }
  
  .file-icon-default {
  fill:url(#globalGradient)
  }
  
  .check-radio input[type="checkbox"] {
  -webkit-appearance:none!important;
  appearance:none!important;
  background:#ffffff14!important;
  border:1px solid var(--border-subtle)!important;
  border-radius:4px!important;
  cursor:pointer!important;
  height:18px!important;
  min-width:18px!important;
  position:relative!important;
  transition:all .2s ease!important;
  width:18px!important
  }
  
  .check-radio input[type="checkbox"]:hover {
  background:#ffffff1f!important;
  border-color:var(--text-muted)!important
  }
  
  .check-radio input[type="checkbox"]:checked {
  background:#ffffff26!important;
  border-color:var(--text-muted)!important
  }
  
  .check-radio input[type="checkbox"]:checked::after {
  border:solid #fff!important;
  border-width:0 2px 2px 0 !important;
  content:''!important;
  height:10px!important;
  left:6px!important;
  position:absolute!important;
  top:2px!important;
  transform:rotate(45deg)!important;
  width:5px!important
  }
  
  .premium-star-icon {
  filter:drop-shadow(0 0 3px #b14bf480);
  flex-shrink:0
  }
  
  .settings-toggle {
  display:inline-flex;
  flex-shrink:0;
  height:20px;
  position:relative;
  width:36px
  }
  
  .settings-toggle input {
  height:0;
  opacity:0;
  width:0
  }
  
  .settings-toggle .toggle-slider {
  background:#ffffff1a;
  border:1px solid var(--border-subtle);
  border-radius:20px;
  bottom:0;
  cursor:pointer;
  left:0;
  position:absolute;
  right:0;
  top:0;
  transition:all .3s ease
  }
  
  .settings-toggle .toggle-slider:before {
  background:#ffffff80;
  border-radius:50%;
  bottom:2px;
  content:"";
  height:14px;
  left:2px;
  position:absolute;
  transition:all .3s ease;
  width:14px
  }
  
  .settings-toggle input:checked + .toggle-slider {
  background:#ffffff4d;
  border-color:var(--text-muted)
  }
  
  .settings-toggle input:checked + .toggle-slider:before {
  background:#fff;
  box-shadow:0 1px 3px #0003;
  transform:translateX(16px)
  }
  
  .settings-toggle:hover .toggle-slider {
  border-color:var(--text-faint)
  }
  
  .settings-toggle:hover .toggle-slider:before {
  background:#ffffffb3
  }
  
  .settings-toggle input:checked:hover + .toggle-slider:before {
  background:#fff
  }
  
  .th-icon {
  flex-shrink:0;
  height:16px;
  width:16px
  }
  
  .th-icon-premium {
  fill:url(#thPremiumGradient)
  }
  
  /* ========================================
   FOOTER
   ======================================== */

  .duckier-footer {
  background:var(--color-primary-dark);
  border-top:1px solid var(--splash-card-border);
  padding:56px 0 0
  }

  .duckier-footer-container {
  margin:0 auto;
  max-width:1200px;
  padding:0 40px
  }

  /* Zone 1: Brand */
  .duckier-footer-brand {
  align-items:flex-start;
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:40px;
  padding-bottom:40px;
  border-bottom:1px solid var(--splash-card-border)
  }

  .duckier-footer-logo-link {
  align-items:center;
  display:inline-flex;
  gap:12px;
  text-decoration:none
  }

  .duckier-footer-logo-img {
  height:40px;
  width:auto
  }

  .duckier-footer-logo-text {
  color:var(--splash-heading);
  font-size:22px;
  font-weight:700;
  letter-spacing:-.3px
  }

  .duckier-footer-tagline {
  color:var(--splash-text-muted);
  font-size:14px;
  line-height:1.6;
  margin:0;
  max-width:360px
  }

  /* Zone 2: Navigation columns */
  .duckier-footer-main {
  display:grid;
  gap:40px;
  grid-template-columns:repeat(4,1fr)
  }

  .duckier-footer-column {
  display:flex;
  flex-direction:column
  }

  .duckier-footer-column-title {
  color:var(--splash-heading);
  font-size:13px;
  font-weight:600;
  letter-spacing:.8px;
  margin-bottom:20px;
  text-transform:uppercase
  }

  .duckier-footer-links {
  align-items:flex-start;
  display:flex;
  flex-direction:column;
  gap:12px
  }

  .duckier-footer-link {
  color:var(--splash-text-muted);
  font-size:14px;
  position:relative;
  text-decoration:none;
  transition:color .2s ease
  }

  .duckier-footer-link::after {
  background:#fff;
  border-radius:17px;
  content:'';
  inset:-5px -12px;
  opacity:0;
  pointer-events:none;
  position:absolute;
  scale:.9;
  transition:opacity .2s ease,scale .2s ease
  }

  .duckier-footer-link:hover::after {
  opacity:.08;
  scale:1
  }

  /* Zone 2b: Legal inline */
  .duckier-footer-legal {
  border-top:1px solid var(--splash-card-border);
  margin-top:40px;
  padding-top:24px
  }

  .duckier-footer-legal-title {
  color:var(--splash-heading);
  font-size:12px;
  font-weight:600;
  letter-spacing:.8px;
  margin-bottom:12px;
  text-transform:uppercase
  }

  .duckier-footer-legal-links {
  align-items:center;
  display:flex;
  flex-wrap:wrap;
  gap:8px 20px
  }

  .duckier-footer-legal-link {
  color:var(--splash-text-muted);
  font-size:13px;
  text-decoration:none;
  transition:color .2s ease
  }

  .duckier-footer-legal-link:hover {
  color:var(--splash-heading)
  }

  /* Zone 3: Bottom bar */
  .duckier-footer-bottom {
  align-items:center;
  border-top:1px solid var(--splash-card-border);
  display:flex;
  justify-content:space-between;
  margin-top:32px;
  padding:24px 0 32px
  }

  .duckier-footer-copyright {
  color:var(--splash-text-muted);
  font-size:13px;
  margin:0
  }

  .duckier-footer-social {
  align-items:center;
  display:flex;
  gap:16px
  }

  .duckier-footer-social-link {
  align-items:center;
  color:var(--splash-text-muted);
  display:flex;
  transition:color .2s ease
  }

  .duckier-footer-social-link:hover {
  color:var(--splash-heading)
  }
  
  .duckier-lang-btn {
  align-items:center;
  background:#ffffff0d;
  border:1px solid var(--splash-card-border);
  border-radius:24px;
  color:var(--splash-heading);
  cursor:pointer;
  display:inline-flex;
  font-size:14px;
  font-weight:500;
  gap:10px;
  padding:12px 20px;
  transition:all .2s ease
  }
  
  .duckier-lang-btn:hover {
  background:#ffffff1a;
  border-color:var(--splash-card-border);
  color:var(--splash-heading)
  }
  
  .duckier-lang-btn svg {
  height:18px;
  opacity:.9;
  width:18px
  }
  
  .duckier-lang-btn-flag {
  border-radius:50%;
  height:20px;
  object-fit:cover;
  width:20px
  }
  
  .duckier-footer-lang-column {
  align-items:flex-start;
  display:flex;
  flex-direction:column
  }
  
  .duckier-lang-modal-overlay {
  align-items:center;
  backdrop-filter:blur(8px);
  background:#000000bf;
  display:none;
  inset:0;
  justify-content:center;
  position:fixed;
  z-index:9999
  }
  
  .duckier-lang-modal-overlay.active {
  display:flex
  }
  
  .duckier-lang-modal {
  -webkit-backdrop-filter:blur(16px);
  animation:modalSlideIn .3s ease;
  backdrop-filter:blur(16px);
  background:color-mix(in oklab,var(--color-background) 70%,transparent);
  border:1px solid var(--splash-card-border);
  border-radius:16px;
  box-shadow:0 25px 80px #00000080;
  max-height:80vh;
  max-width:720px;
  overflow:hidden;
  width:90%
  }
  
  .premium-indicator,.th-with-icon {
  align-items:center;
  display:inline-flex;
  gap:6px;
  justify-content:center
  }
  
  .duckier-footer-link:hover,.duckier-lang-btn-text {
  color:var(--splash-heading)
  }
  
  .footer-accordion-toggle,.footer-accordion-icon {
  display:none
  }
  
  @keyframes modalSlideIn {
  from {
  opacity:0;
  transform:translateY(-20px) scale(0.95)
  }
  
  to {
  opacity:1;
  transform:translateY(0) scale(1)
  }
  }
  
  .duckier-lang-modal-header {
  align-items:center;
  border-bottom:1px solid var(--splash-card-border);
  display:flex;
  justify-content:space-between;
  padding:24px 28px
  }
  
  .duckier-lang-modal-title {
  color:var(--splash-heading);
  font-size:20px;
  font-weight:600;
  margin:0
  }
  
  .duckier-lang-modal-close {
  align-items:center;
  background:#ffffff1a;
  border:none;
  border-radius:50%;
  color:var(--splash-text);
  cursor:pointer;
  display:flex;
  font-size:20px;
  height:36px;
  justify-content:center;
  transition:all .2s ease;
  width:36px
  }
  
  .duckier-lang-modal-close:hover {
  background:#fff3;
  color:var(--splash-heading)
  }
  
  .duckier-lang-modal-body {
  max-height:calc(80vh - 90px);
  overflow-y:auto;
  padding:24px 28px
  }
  
  .duckier-lang-grid {
  display:grid;
  gap:10px;
  grid-template-columns:repeat(4,1fr)
  }
  
  .duckier-lang-item {
  align-items:center;
  background:#ffffff08;
  border:1px solid transparent;
  border-radius:10px;
  display:flex;
  gap:12px;
  padding:14px 16px;
  text-decoration:none;
  transition:all .2s ease
  }
  
  .duckier-lang-item:hover {
  background:#ffffff14;
  border-color:var(--splash-card-border)
  }
  
  .duckier-lang-item.active {
  background:#6366f126;
  border-color:#6366f166
  }
  
  .duckier-lang-item-flag {
  border-radius:50%;
  flex-shrink:0;
  height:28px;
  object-fit:cover;
  width:28px
  }
  
  .duckier-lang-item-text {
  display:flex;
  flex-direction:column;
  min-width:0
  }
  
  .duckier-lang-item-name {
  color:var(--splash-heading);
  font-size:14px;
  font-weight:500
  }
  
  .duckier-lang-item-native {
  color:var(--splash-text-muted);
  font-size:12px;
  margin-top:2px
  }
  
  @media (max-width: 1200px) {
  .duckier-footer {
  padding:0 0 0
  }

  .duckier-footer-container {
  padding:0
  }

  .duckier-footer-brand {
  align-items:center;
  margin-bottom:0;
  padding:32px 24px;
  text-align:center
  }

  .duckier-footer-tagline {
  max-width:none
  }

  .duckier-footer-main {
  display:flex;
  flex-direction:column;
  gap:0
  }

  .duckier-footer-column {
  border-bottom:1px solid var(--splash-card-border)
  }

  .footer-accordion-toggle {
  -webkit-tap-highlight-color:transparent;
  align-items:center;
  background:none;
  border:none;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  padding:18px 24px;
  width:100%
  }

  .duckier-footer-column-title {
  margin-bottom:0;
  pointer-events:none
  }

  .footer-accordion-icon {
  color:var(--splash-text-muted);
  display:block;
  font-size:20px;
  font-weight:300;
  line-height:1;
  pointer-events:none;
  transition:transform .3s ease;
  user-select:none
  }

  .duckier-footer-column.accordion-open .footer-accordion-icon {
  transform:rotate(45deg)
  }

  .duckier-footer-links {
  align-items:stretch;
  gap:0;
  max-height:0;
  overflow:hidden;
  padding:0 24px;
  transition:max-height .3s ease,padding .3s ease
  }

  .duckier-footer-column.accordion-open .duckier-footer-links {
  max-height:500px;
  padding:0 24px 18px
  }

  .duckier-footer-link {
  border-bottom:1px solid var(--splash-card-border);
  color:var(--splash-text);
  font-size:15px;
  padding:12px 0
  }

  .duckier-footer-link:last-child {
  border-bottom:none
  }

  .duckier-footer-link:hover {
  color:var(--splash-heading)
  }

  .duckier-footer-legal {
  margin-top:0;
  padding:20px 24px
  }

  .duckier-footer-legal-links {
  gap:6px 16px
  }

  .duckier-footer-bottom {
  border-top:1px solid var(--splash-card-border);
  flex-direction:column;
  gap:16px;
  margin-top:0;
  padding:20px 24px 28px;
  text-align:center
  }
  
  .duckier-lang-modal {
  margin:10px;
  max-width:none;
  width:95%
  }
  
  .duckier-lang-modal-header {
  padding:18px 20px
  }
  
  .duckier-lang-modal-title {
  font-size:18px
  }
  
  .duckier-lang-modal-body {
  max-height:calc(85vh - 80px);
  padding:16px
  }
  
  .duckier-lang-grid {
  gap:8px;
  grid-template-columns:repeat(2,1fr)
  }
  
  .duckier-lang-item {
  gap:10px;
  padding:12px
  }
  
  .duckier-lang-item-flag {
  height:24px;
  width:24px
  }
  
  .duckier-lang-item-name {
  font-size:13px
  }
  
  .duckier-lang-item-native {
  font-size:11px
  }
  
  .duckier-footer-lang-column,.duckier-footer-link::after {
  display:none
  }
  }
  
  @media (max-width: 380px) {
  .duckier-lang-grid {
  grid-template-columns:1fr
  }
  
  .duckier-lang-item {
  padding:14px 16px
  }
  }
  
  .toast-container {
  display:flex;
  flex-direction:column;
  gap:12px;
  pointer-events:none;
  position:fixed;
  right:24px;
  top:24px;
  z-index:9999
  }
  
  .toast {
  align-items:center;
  animation:toastIn .3s ease;
  border-radius:12px;
  box-shadow:0 10px 40px #0006;
  color:var(--text-primary);
  display:flex;
  font-size:14px;
  font-weight:500;
  gap:12px;
  max-width:400px;
  padding:16px 20px;
  pointer-events:auto
  }
  
  .toast.toast-out {
  animation:toastOut .3s ease forwards
  }
  
  .toast-success {
  background:linear-gradient(135deg,#10b981f2 0%,#059669f2 100%);
  border:1px solid #10b98180
  }
  
  .toast-error {
  background:linear-gradient(135deg,#ef4444f2 0%,#dc2626f2 100%);
  border:1px solid #ef444480
  }
  
  .toast-icon {
  flex-shrink:0
  }
  
  .toast-close {
  background:none;
  border:none;
  color:#fff;
  cursor:pointer;
  display:flex;
  margin-left:auto;
  opacity:.7;
  padding:4px;
  transition:opacity .2s
  }
  
  .toast-close:hover {
  opacity:1
  }
  
  @keyframes toastIn {
  from {
  opacity:0;
  transform:translateX(100px)
  }
  
  to {
  opacity:1;
  transform:translateX(0)
  }
  }
  
  @keyframes toastOut {
  from {
  opacity:1;
  transform:translateX(0)
  }
  
  to {
  opacity:0;
  transform:translateX(100px)
  }
  }
  
  .field-error {
  align-items:center;
  animation:fieldErrorIn .2s ease;
  color:#f87171;
  display:flex;
  font-size:13px;
  gap:6px;
  margin-top:8px
  }
  
  .field-error svg {
  flex-shrink:0
  }
  
  @keyframes fieldErrorIn {
  from {
  opacity:0;
  transform:translateY(-4px)
  }
  
  to {
  opacity:1;
  transform:translateY(0)
  }
  }
  
  .input-error {
  border-color:#ef4444!important
  }
  
  .input-error:focus {
  border-color:#ef4444!important;
  box-shadow:0 0 0 3px #ef444426!important
  }
  
  .forgot-section {
  align-items:center;
  display:flex;
  justify-content:center;
  min-height:calc(100vh - 80px - 250px);
  padding:40px 0
  }
  
  .forgot-hero {
  margin-bottom:40px;
  text-align:center
  }
  
  .forgot-hero h1 {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  background-clip:text;
  display:inline-block;
  font-size:48px;
  font-weight:800;
  margin-bottom:16px
  }
  
  .forgot-hero p {
  color:var(--text-secondary);
  font-size:16px;
  margin:0
  }
  
  .forgot-container {
  margin:0 auto;
  max-width:500px;
  padding:0 24px;
  width:100%
  }
  
  .forgot-card {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%) border-box;
  border:2px solid transparent;
  border-radius:24px;
  padding:48px
  }
  
  .forgot-alert {
  align-items:center;
  background:linear-gradient(175deg,#fa556026 -94.09%,#fa55600d 154.53%);
  border:1px solid #fa55604d;
  border-radius:12px;
  color:var(--text-primary);
  display:flex;
  font-size:14px;
  gap:12px;
  margin-bottom:24px;
  padding:16px 20px
  }
  
  .forgot-alert svg {
  color:#fa5560ff;
  flex-shrink:0
  }
  
  .forgot-form-group {
  margin-bottom:24px
  }
  
  .forgot-form-group label {
  color:var(--text-primary);
  display:block;
  font-size:14px;
  font-weight:600;
  margin-bottom:8px
  }
  
  .captcha_code,input.captcha_code {
  background-color:#111!important;
  border:1px solid #242c3e!important;
  border-radius:8px!important;
  box-shadow:none!important;
  color:#efefef!important;
  flex-grow:1;
  font-family:inherit!important;
  padding:10px 12px!important;
  transition:all .1s ease-in-out!important;
  width:100%;
  width:100%!important
  }
  
  .captcha_code:hover,.captcha_code:focus,.captcha_code:focus-visible,input.captcha_code:hover,input.captcha_code:focus,input.captcha_code:focus-visible {
  border-color:var(--color-duckier-border)!important;
  outline:none!important
  }
  
  .captcha_code::placeholder,input.captcha_code::placeholder {
  color:var(--text-faint)!important
  }
  
  .forgot-back {
  border-top:1px solid var(--border-subtle);
  color:var(--text-secondary);
  font-size:14px;
  margin-top:32px;
  padding-top:32px;
  text-align:center
  }
  
  .forgot-back a {
  color:#c66bd5;
  font-weight:600;
  text-decoration:none;
  transition:color .3s ease
  }
  
  .forgot-back a:hover {
  color:#d88be5
  }
  
  @media (max-width: 768px) {
  .forgot-hero h1 {
  font-size:36px
  }
  
  .forgot-card {
  padding:32px 24px
  }
  
  .forgot-section {
  min-height:calc(100vh - 150px);
  padding:40px 0
  }
  }
  
  @media (max-width: 400px) {
  .forgot-card {
  padding:24px 16px
  }
  
  .forgot-container {
  padding:0 12px
  }
  }
  
  .cf-turnstile,[class*="turnstile"],[class*="captcha"] {
  display:flex!important;
  justify-content:center!important;
  overflow:visible!important;
  width:100%!important
  }
  
  @media (max-width: 360px) {
  .cf-turnstile,[class*="turnstile"],[class*="captcha"] {
  transform:scale(0.9);
  transform-origin:center center
  }
  }
  
  .g2fa-section .login-section {
  align-items:center;
  display:flex;
  justify-content:center;
  min-height:100vh;
  padding:40px 20px
  }
  
  .g2fa-section .login-card {
  background:linear-gradient(var(--color-primary-dark,#0d1017),var(--color-primary-dark,#0d1017)) padding-box,linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%) border-box;
  border:2px solid transparent;
  border-radius:24px;
  max-width:480px;
  padding:48px;
  text-align:center;
  width:100%
  }
  
  .g2fa-icon-circle {
  align-items:center;
  background:linear-gradient(135deg,#fa556026,#b14bf426,#4d91ff26);
  border-radius:50%;
  display:flex;
  height:80px;
  justify-content:center;
  margin:0 auto 24px;
  width:80px
  }
  
  .g2fa-icon-circle svg {
  color:#b14bf4
  }
  
  .g2fa-section .login-card h2 {
  color:var(--text-primary,#fff);
  font-size:28px;
  font-weight:800;
  margin-bottom:8px
  }
  
  .g2fa-section .login-card .login-subtitle {
  color:var(--text-muted,#ffffff80);
  font-size:15px;
  line-height:1.6;
  margin-bottom:32px
  }
  
  .g2fa-code-input {
  background:var(--color-surface,#ffffff0d);
  border:1.5px solid var(--border-subtle,#ffffff1a);
  border-radius:14px;
  box-sizing:border-box;
  color:var(--text-primary,#fff);
  font-size:18px;
  font-weight:600;
  letter-spacing:8px;
  outline:none;
  padding:16px 20px;
  text-align:center;
  transition:border-color 0.3s,box-shadow .3s;
  width:100%
  }
  
  .g2fa-code-input:focus {
  border-color:#b14bf480;
  box-shadow:0 0 0 4px #b14bf41a
  }
  
  .g2fa-code-input::placeholder {
  color:var(--text-faint,#ffffff4d);
  letter-spacing:normal
  }
  
  .g2fa-section .login-btn {
  background:linear-gradient(81.02deg,#fa5560 -23.47%,#b14bf4 45.52%,#4d91ff 114.8%);
  border:none;
  border-radius:14px;
  color:#fff;
  cursor:pointer;
  font-size:16px;
  font-weight:700;
  margin-top:16px;
  padding:16px;
  transition:all .3s ease;
  width:100%
  }
  
  .g2fa-section .login-btn:hover {
  box-shadow:0 8px 24px #b14bf466;
  transform:translateY(-2px)
  }
  
  .g2fa-section .login-back {
  align-items:center;
  color:var(--text-muted,#ffffff80);
  display:inline-flex;
  font-size:14px;
  gap:8px;
  margin-top:24px;
  text-decoration:none;
  transition:color .3s
  }
  
  .g2fa-section .login-back:hover {
  color:var(--text-primary,#fff)
  }
  
  @media (max-width: 768px) {
  .g2fa-section .login-card {
  padding:32px 24px
  }
  
  .g2fa-section .login-card h2 {
  font-size:24px
  }
  }
  
  #g2fa-code {
  background:var(--color-surface,#ffffff0d);
  border:1px solid var(--border-subtle,#ffffff1a);
  border-radius:8px;
  color:var(--text-primary,#fff);
  font-size:16px;
  outline:none;
  padding:8px 12px;
  transition:border-color 0.3s,box-shadow .3s
  }
  
  #g2fa-code:focus {
  border-color:#b14bf480;
  box-shadow:0 0 0 3px #b14bf41a
  }
  
  #cookie-notice {
  background:var(--color-primary-dark,#0d1017);
  border-top:1px solid var(--border-subtle,#ffffff1a);
  bottom:0;
  box-sizing:border-box;
  color:var(--text-primary,#ffffffd9);
  display:none;
  font-size:13px;
  left:0;
  padding:12px 20px;
  position:fixed;
  text-align:center;
  width:100%;
  z-index:9999
  }
  
  #cookie-notice a {
  color:#b14bf4;
  text-decoration:underline
  }
  
  #cookie-notice button {
  background:linear-gradient(81.02deg,#fa5560 -23.47%,#b14bf4 45.52%,#4d91ff 114.8%);
  border:none;
  border-radius:6px;
  color:#fff;
  cursor:pointer;
  font-size:13px;
  font-weight:600;
  margin-left:15px;
  padding:6px 16px
  }
  
  #header-grid {
  align-items:center!important;
  display:flex!important;
  height:100%!important;
  justify-content:space-between!important
  }
  
  #desktop-nav,#desktop-controls-logged,#desktop-controls-guest {
  display:none!important
  }
  
  #mobile-header-controls,#mobile-header-controls-logged {
  align-items:center;
  display:flex!important;
  gap:12px
  }
  
  @media (min-width: 1200px) {
  #header-grid {
  display:grid!important;
  grid-template-columns:auto 1fr auto!important;
  justify-content:initial!important
  }
  
  #desktop-nav {
  align-items:center;
  display:flex!important;
  gap:32px;
  justify-self:center
  }
  
  #desktop-controls-logged,#desktop-controls-guest {
  display:flex!important
  }
  
  #mobile-header-controls,#mobile-header-controls-logged {
  display:none!important
  }
  }
  
  @media (max-width: 1199px) {
  #main-header .logo {
  align-items:center;
  flex-shrink:0;
  gap:10px
  }
  
  #duckier-logo-text {
  font-size:22px
  }
  
  .duckier-btn-dashboard {
  font-size:13px!important;
  padding:8px 14px!important
  }
  
  .duckier-btn-dashboard svg {
  height:16px;
  width:16px
  }
  
  .mobile-premium-btn {
  font-size:12px!important;
  gap:6px;
  padding:8px 14px!important
  }
  
  .mobile-premium-btn svg {
  height:14px;
  width:14px
  }
  }
  
  @media (min-width: 1200px) {
  .duckier-dropdown-item.md\:hidden {
  display:none!important
  }
  }
  
  #main-header .nav-link-icon span::after {
  background:linear-gradient(81.02deg,#fa5560 -23.47%,#b14bf4 45.52%,#4d91ff 114.8%);
  bottom:-4px;
  content:'';
  height:3px;
  left:-2px;
  opacity:.85;
  position:absolute;
  transition:width .15s ease-in-out;
  width:0;
  z-index:-1
  }
  
  .logo-hover {
  text-decoration:none
  }
  
  .logo-hover .logo-img {
  transition:transform .25s ease
  }
  
  .logo-hover .duckier-logo-text {
  transition:transform .25s ease,letter-spacing .25s ease
  }
  
  .logo-hover:hover .logo-img {
  transform:scale(1.08) rotate(-3deg)
  }
  
  .logo-hover:hover .duckier-logo-text {
  letter-spacing:.5px;
  transform:scale(1.03)
  }
  
  .mega-menu-trigger {
  background:none;
  border:none;
  cursor:pointer
  }
  
  .mega-chevron {
  transition:transform .2s ease
  }
  
  .mega-menu-container:hover .mega-chevron {
  transform:rotate(180deg)
  }
  
  .mega-menu {
  display:none;
  padding-top:12px;
  position:fixed;
  top:80px;
  z-index:9999
  }
  
  .mega-menu-content {
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  background-color:color-mix(in oklab,var(--color-background) 70%,transparent);
  border:1px solid var(--color-border);
  border-radius:16px;
  box-shadow:0 10px 15px -3px #0000001a 0 4px 6px -4px #0000001a;
  display:flex;
  gap:40px;
  padding:28px 36px
  }
  
  .mega-menu-column {
  min-width:130px
  }
  
  .mega-menu-title {
  border-bottom:1px solid var(--splash-card-border);
  color:var(--splash-heading);
  font-size:12px;
  font-weight:600;
  letter-spacing:1.5px;
  margin-bottom:20px;
  padding-bottom:12px;
  text-transform:uppercase
  }
  
  .mega-menu-link {
  align-items:center;
  border-radius:8px;
  color:var(--splash-heading);
  display:flex;
  font-size:14px;
  font-weight:500;
  gap:10px;
  margin:0 -12px;
  padding:10px 12px;
  text-decoration:none;
  transition:all .15s ease
  }
  
  .mega-menu-link svg {
  flex-shrink:0;
  opacity:.7
  }
  
  .mobile-menu-btn {
  align-items:center;
  background:#ffffff14;
  border:1px solid var(--splash-card-border);
  border-radius:12px;
  color:var(--splash-heading);
  cursor:pointer;
  display:flex;
  height:44px;
  justify-content:center;
  transition:all .2s ease;
  width:44px
  }
  
  .mobile-menu-btn:hover {
  background:#ffffff1f
  }
  
  .mobile-dropdown {
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  background-color:color-mix(in oklab,var(--color-background) 70%,transparent);
  border:1px solid var(--color-border);
  border-radius:16px;
  box-shadow:0 10px 15px -3px #0000001a 0 4px 6px -4px #0000001a;
  min-width:200px;
  opacity:0;
  padding:8px;
  pointer-events:none;
  position:fixed;
  transition:opacity .2s ease,visibility .2s ease;
  visibility:hidden;
  z-index:9999
  }
  
  .mobile-dropdown.open {
  opacity:1;
  pointer-events:auto;
  visibility:visible
  }
  
  .mobile-dropdown-item {
  align-items:center;
  border-radius:10px;
  color:var(--splash-heading);
  display:flex;
  font-size:15px;
  font-weight:500;
  gap:12px;
  padding:14px 16px;
  text-decoration:none;
  transition:all .15s ease
  }
  
  .mobile-dropdown-item svg {
  flex-shrink:0;
  opacity:.7
  }
  
  .mobile-dropdown-highlight {
  background:#ffffff0f;
  border:1px solid var(--splash-card-border);
  margin-top:4px
  }
  
  .mobile-dropdown-highlight:hover {
  background:#ffffff1a;
  border-color:var(--splash-card-border)
  }
  
  .mobile-dropdown-highlight svg {
  opacity:.8
  }
  
  .mobile-premium-badge-combined {
  align-items:center;
  background:linear-gradient(135deg,#fa556026 0%,#b14bf426 50%,#4d91ff26 100%);
  border:1px solid #b14bf44d;
  border-radius:20px;
  color:var(--splash-heading);
  display:inline-flex;
  font-size:12px;
  font-weight:600;
  text-decoration:none;
  transition:all .3s ease
  }
  
  .mobile-premium-left {
  align-items:center;
  display:flex;
  gap:5px;
  padding:6px 10px
  }
  
  .mobile-premium-divider {
  background:#fff3;
  height:16px;
  width:1px
  }
  
  .mobile-premium-right {
  align-items:center;
  color:var(--splash-text);
  display:flex;
  font-size:11px;
  font-weight:500;
  gap:5px;
  padding:6px 10px;
  white-space:nowrap
  }
  
  .mobile-premium-right svg {
  opacity:.7
  }
  
  .mobile-upgrade-badge {
  align-items:center;
  background:linear-gradient(135deg,#fa556026 0%,#b14bf426 50%,#4d91ff26 100%);
  border:1px solid #b14bf44d;
  border-radius:20px;
  color:var(--splash-heading);
  display:inline-flex;
  font-size:13px;
  font-weight:600;
  gap:8px;
  padding:8px 16px;
  text-decoration:none;
  transition:all .3s ease;
  white-space:nowrap
  }
  
  .theme-toggle-btn {
  align-items:center;
  background:#ffffff14;
  border:1px solid var(--splash-card-border);
  border-radius:50%;
  color:var(--splash-heading);
  cursor:pointer;
  display:flex;
  font:inherit;
  height:40px;
  justify-content:center;
  line-height:1;
  padding:0;
  position:relative;
  text-decoration:none;
  transition:background .15s ease,border-color .15s ease;
  width:40px
  }
  
  #main-header .nav-link-icon::after,.mobile-menu-btn .close-icon,.mobile-menu-btn.active .menu-icon {
  display:none
  }
  
  #main-header .nav-link-icon span,.mega-menu-container {
  position:relative
  }
  
  #main-header .nav-link-icon:hover span::after,#main-header .mega-menu-container:hover .nav-link::after {
  width:100%
  }
  
  .mega-menu.mega-menu-visible,.mobile-menu-btn.active .close-icon {
  display:block
  }
  
  .mega-menu-link:hover,.mobile-dropdown-item:hover {
  background:#ffffff14;
  color:var(--splash-heading)
  }
  
  .mega-menu-link:hover svg,.mobile-dropdown-item:hover svg {
  opacity:1
  }
  
  .mobile-menu-btn.active,.theme-toggle-btn:hover {
  background:#ffffff26;
  border-color:var(--splash-card-border)
  }
  
  .mobile-premium-badge-combined:hover,.mobile-upgrade-badge:hover {
  background:linear-gradient(135deg,#fa556040 0%,#b14bf440 50%,#4d91ff40 100%);
  border-color:#b14bf480;
  color:var(--splash-heading)
  }
  
  @media (max-width: 767px) {
  .theme-toggle-btn {
  height:42px;
  width:42px
  }
  }
  
  .theme-dropdown {
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  background-color:color-mix(in oklab,var(--color-background) 75%,transparent);
  border:1px solid var(--splash-card-border);
  border-radius:12px;
  box-shadow:0 8px 32px #0006;
  min-width:150px;
  opacity:0;
  padding:4px;
  pointer-events:none;
  position:fixed;
  transform:translateY(-4px);
  transition:opacity .15s ease,visibility .15s ease,transform .15s ease;
  visibility:hidden;
  z-index:10000
  }
  
  .theme-dropdown.open {
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
  visibility:visible
  }
  
  .theme-dropdown-item {
  align-items:center;
  background:none;
  border:none;
  border-radius:8px;
  color:var(--splash-text);
  cursor:pointer;
  display:flex;
  font-family:inherit;
  font-size:13px;
  gap:10px;
  padding:8px 12px;
  transition:background .12s ease,color .12s ease;
  white-space:nowrap;
  width:100%
  }
  
  .theme-dropdown-item:hover {
  background:#ffffff1a;
  color:var(--splash-heading)
  }
  
  .theme-dropdown-item.active {
  color:var(--splash-heading)
  }
  
  .theme-dropdown-item svg:first-child {
  flex-shrink:0;
  height:16px;
  opacity:.7;
  width:16px
  }
  
  .theme-dropdown-item.active svg:first-child {
  opacity:1
  }
  
  .theme-dropdown-item .theme-check {
  height:14px;
  margin-left:auto;
  opacity:0;
  width:14px
  }
  
  .theme-dropdown-item.active .theme-check {
  color:#b14bf4;
  opacity:1
  }
  
  @media (max-width: 767px) {
  .theme-dropdown {
  left:auto!important;
  right:12px;
  transform:translateY(-4px)
  }
  
  .theme-dropdown.open {
  transform:translateY(0)
  }
  }
  
  #main-header {
  background-color:var(--color-background)
  }

  #main-header.header-scrolled {
  background-color:transparent
  }

  @media (min-width: 768px) {
  #main-header {
  transition:top .4s cubic-bezier(0.16,1,0.3,1),border-color .3s ease,background-color .3s ease;
  will-change:top
  }

  #main-header-content {
  transition:max-width .5s cubic-bezier(0.16,1,0.3,1),box-shadow .4s ease;
  will-change:max-width
  }
  }
  
  .header-lang-wrapper {
  position:relative
  }
  
  .header-lang-btn {
  align-items:center;
  background:#ffffff14;
  border:1px solid var(--splash-card-border);
  border-radius:50%;
  box-sizing:border-box;
  cursor:pointer;
  display:flex;
  height:40px;
  justify-content:center;
  line-height:1;
  padding:0;
  transition:all .2s ease;
  width:40px
  }
  
  .header-lang-btn:hover {
  background:#ffffff1f;
  border-color:var(--splash-card-border)
  }
  
  .header-lang-flag {
  border-radius:50%;
  height:24px;
  object-fit:cover;
  width:24px
  }
  
  .header-lang-dropdown {
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  background-color:color-mix(in oklab,var(--color-background) 70%,transparent);
  border:1px solid var(--color-border);
  border-radius:16px;
  box-shadow:0 10px 15px -3px #0000001a 0 4px 6px -4px #0000001a;
  display:none;
  max-height:360px;
  min-width:180px;
  overflow-y:auto;
  padding:8px;
  position:fixed;
  z-index:9999
  }
  
  @keyframes dropdownFadeIn {
  from {
  opacity:0;
  transform:translateY(-8px)
  }
  
  to {
  opacity:1;
  transform:translateY(0)
  }
  }
  
  .header-lang-dropdown {
  scrollbar-color:#c66bd580 transparent;
  scrollbar-width:thin
  }
  
  .header-lang-item {
  align-items:center;
  border-radius:10px;
  color:var(--splash-heading);
  display:flex;
  font-size:14px;
  font-weight:500;
  gap:12px;
  padding:11px 14px;
  position:relative;
  text-decoration:none;
  transition:all .15s ease
  }
  
  .header-lang-item::before {
  background:linear-gradient(135deg,#fa556026 0%,#b14bf426 50%,#4d91ff26 100%);
  border-radius:10px;
  content:'';
  inset:0;
  opacity:0;
  position:absolute;
  transition:opacity .15s ease
  }
  
  .header-lang-item:hover {
  color:var(--splash-heading)
  }
  
  .mobile-cta-btn.duckier-btn {
  font-size:12px!important;
  padding:10px 16px!important;
  white-space:nowrap
  }
  
  #mobile-header-controls,#mobile-header-controls-logged {
  flex-shrink:0;
  gap:8px
  }
  
  .mobile-lang-wrapper {
  position:relative
  }
  
  .mobile-lang-btn {
  align-items:center;
  background:#ffffff14;
  border:1px solid var(--splash-card-border);
  border-radius:50%;
  box-sizing:border-box;
  cursor:pointer;
  display:flex;
  height:42px;
  justify-content:center;
  line-height:1;
  padding:0;
  transition:all .2s ease;
  width:42px
  }
  
  .mobile-lang-flag {
  border-radius:50%;
  height:26px;
  object-fit:cover;
  width:26px
  }
  
  .mobile-lang-dropdown {
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  background-color:color-mix(in oklab,var(--color-background) 70%,transparent);
  border:1px solid var(--color-border);
  border-radius:12px;
  box-shadow:0 10px 15px -3px #0000001a 0 4px 6px -4px #0000001a;
  display:none;
  max-height:70vh;
  min-width:160px;
  overflow-y:auto;
  padding:8px;
  position:fixed;
  scrollbar-color:#c66bd580 transparent;
  scrollbar-width:thin;
  z-index:9999
  }
  
  .mobile-lang-item {
  align-items:center;
  border-radius:8px;
  color:var(--splash-heading);
  display:flex;
  font-size:14px;
  font-weight:500;
  gap:10px;
  padding:10px 12px;
  text-decoration:none;
  transition:all .15s ease
  }
  
  .mobile-menu-btn {
  align-items:center;
  background:#ffffff14;
  border:1px solid var(--splash-card-border);
  border-radius:12px;
  color:var(--splash-heading);
  cursor:pointer;
  display:flex;
  height:42px;
  justify-content:center;
  transition:all .2s ease;
  width:42px
  }
  
  .mobile-menu-btn.active {
  background:linear-gradient(135deg,#fa556033 0%,#b14bf433 100%);
  border-color:#b14bf466
  }
  
  .mobile-nav-overlay {
  backdrop-filter:blur(4px);
  background:#0009;
  bottom:0;
  left:0;
  opacity:0;
  position:fixed;
  right:0;
  top:0;
  transition:all .3s ease;
  visibility:hidden;
  z-index:999
  }
  
  .mobile-nav-overlay.open {
  opacity:1;
  visibility:visible
  }
  
  .mobile-nav-menu {
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  background-color:color-mix(in oklab,var(--color-background) 70%,transparent);
  border-left:1px solid var(--color-border);
  display:flex;
  flex-direction:column;
  height:100%;
  height:100dvh;
  max-width:320px;
  overflow-x:hidden;
  overflow-y:auto;
  position:fixed;
  right:0;
  top:0;
  transform:translateX(100%);
  transition:transform .3s ease;
  visibility:hidden;
  width:85%;
  z-index:1000
  }
  
  .mobile-nav-menu.open {
  transform:translateX(0);
  visibility:visible
  }
  
  .mobile-nav-header {
  align-items:center;
  background:#ffffff0a;
  border-bottom:1px solid var(--splash-card-border);
  display:flex;
  justify-content:space-between;
  padding:16px 20px
  }
  
  .mobile-nav-title {
  color:var(--splash-heading);
  font-size:18px;
  font-weight:700
  }
  
  .mobile-nav-close {
  align-items:center;
  background:#ffffff1a;
  border:none;
  border-radius:10px;
  color:var(--splash-heading);
  cursor:pointer;
  display:flex;
  height:40px;
  justify-content:center;
  transition:all .2s ease;
  width:40px
  }
  
  .mobile-nav-close:hover {
  background:#fa55604d
  }
  
  .mobile-nav-content {
  display:flex;
  flex:1;
  flex-direction:column;
  overflow-y:auto;
  padding:20px
  }
  
  .mobile-nav-footer {
  border-top:1px solid var(--splash-card-border);
  margin-top:auto;
  padding-top:20px
  }
  
  .mobile-nav-footer-row {
  display:grid;
  gap:10px;
  grid-template-columns:1fr 1fr
  }
  
  .mobile-nav-setting-btn {
  align-items:center;
  background:#ffffff0f;
  border:1px solid var(--splash-card-border);
  border-radius:12px;
  color:var(--splash-text);
  cursor:pointer;
  display:flex;
  font-size:13px;
  font-weight:500;
  gap:8px;
  justify-content:center;
  padding:12px 16px;
  transition:all .2s ease
  }
  
  .mobile-nav-lang-flag {
  border-radius:50%;
  height:18px;
  object-fit:cover;
  width:18px
  }
  
  .mobile-nav-lang-select {
  flex:1;
  position:relative
  }
  
  .mobile-nav-lang-select .mobile-nav-setting-btn {
  width:100%
  }
  
  .mobile-nav-lang-dropdown {
  backdrop-filter:blur(20px);
  background:color-mix(in oklab,var(--color-background) 95%,transparent);
  border:1px solid var(--splash-card-border);
  border-radius:12px;
  bottom:100%;
  display:none;
  left:0;
  margin-bottom:8px;
  max-height:180px;
  overflow-x:hidden;
  overflow-y:auto;
  padding:6px;
  position:absolute;
  right:0;
  z-index:100
  }
  
  .mobile-nav-lang-item {
  align-items:center;
  border-radius:8px;
  color:var(--splash-text);
  display:flex;
  font-size:13px;
  gap:10px;
  padding:10px 12px;
  text-decoration:none;
  transition:all .15s ease;
  white-space:nowrap
  }
  
  .mobile-nav-lang-item img {
  border-radius:50%;
  height:20px;
  object-fit:cover;
  width:20px
  }
  
  .mobile-nav-auth {
  display:flex;
  gap:10px;
  margin-bottom:24px
  }
  
  .mobile-nav-auth-btn {
  align-items:center;
  border-radius:10px;
  display:flex;
  flex:1;
  font-size:14px;
  font-weight:600;
  gap:8px;
  justify-content:center;
  padding:14px 16px;
  text-decoration:none;
  transition:all .2s ease
  }
  
  .mobile-nav-auth-login {
  background:#ffffff14;
  border:1px solid var(--splash-card-border);
  color:var(--splash-heading)
  }
  
  .mobile-nav-auth-login:hover {
  background:#ffffff1f;
  color:var(--splash-heading)
  }
  
  .mobile-nav-auth-signup {
  background:linear-gradient(135deg,#fa5560 0%,#b14bf4 100%);
  border:none;
  color:var(--splash-heading)
  }
  
  .mobile-nav-auth-signup:hover {
  box-shadow:0 4px 16px #b14bf466;
  color:var(--splash-heading);
  transform:translateY(-1px)
  }
  
  .mobile-nav-links {
  display:flex;
  flex-direction:column;
  gap:4px
  }
  
  .mobile-nav-link {
  align-items:center;
  border-radius:12px;
  color:var(--splash-heading);
  display:flex;
  font-size:15px;
  font-weight:500;
  gap:14px;
  padding:16px;
  text-decoration:none;
  transition:all .15s ease
  }
  
  .mobile-nav-link svg {
  flex-shrink:0;
  opacity:.7
  }
  
  .header-lang-dropdown::-webkit-scrollbar,.mobile-lang-dropdown::-webkit-scrollbar {
  width:6px
  }
  
  .header-lang-dropdown::-webkit-scrollbar-track,.mobile-lang-dropdown::-webkit-scrollbar-track {
  background:transparent;
  margin:8px 0
  }
  
  .header-lang-dropdown::-webkit-scrollbar-thumb,.mobile-lang-dropdown::-webkit-scrollbar-thumb {
  background:linear-gradient(180deg,#c66bd580 0%,#4d91ff80 100%);
  border-radius:3px
  }
  
  .header-lang-dropdown::-webkit-scrollbar-thumb:hover,.mobile-lang-dropdown::-webkit-scrollbar-thumb:hover {
  background:linear-gradient(180deg,#c66bd5b3 0%,#4d91ffb3 100%)
  }
  
  .header-lang-dropdown.open,.mobile-lang-dropdown.open,.mobile-menu-btn.active .close-icon,.mobile-nav-lang-dropdown.open {
  display:block
  }
  
  .header-lang-item:hover::before,.mobile-nav-link:hover svg {
  opacity:1
  }
  
  .header-lang-item span,.header-lang-item img {
  position:relative;
  z-index:1
  }
  
  .header-lang-item-flag,.mobile-lang-item-flag {
  border-radius:50%;
  flex-shrink:0;
  height:22px;
  object-fit:cover;
  width:22px
  }
  
  .mobile-lang-btn:hover,.mobile-menu-btn:hover {
  background:#ffffff1f;
  border-color:var(--splash-card-border)
  }
  
  .mobile-lang-item:hover,.mobile-nav-setting-btn:hover {
  background:#ffffff1a;
  color:var(--splash-heading)
  }
  
  .mobile-menu-btn .close-icon,.mobile-menu-btn.active .menu-icon {
  display:none
  }
  
  .mobile-nav-lang-item:hover,.mobile-nav-link:hover,.mobile-nav-link.active {
  background:#ffffff14;
  color:var(--splash-heading)
  }
  
  @media (max-width: 767px) {
  .logo-hover .logo-img.mobile-logo {
  height:54px!important;
  width:auto!important
  }
  
  html,body {
  overflow-x:hidden!important
  }
  }
  
  .logo-hover {
  text-decoration:none
  }
  
  .logo-hover .logo-img {
  transition:transform .25s ease
  }
  
  .logo-hover .duckier-logo-text {
  transition:transform .25s ease,letter-spacing .25s ease
  }
  
  .logo-hover:hover .logo-img {
  transform:scale(1.08) rotate(-3deg)
  }
  
  .logo-hover:hover .duckier-logo-text {
  letter-spacing:.5px;
  transform:scale(1.03)
  }
  
  .premium-badge-header {
  align-items:center;
  background:linear-gradient(135deg,#fa556033 0%,#b14bf433 50%,#4d91ff33 100%);
  border:1px solid #b14bf466;
  border-radius:20px;
  color:var(--text-primary);
  cursor:default;
  display:inline-flex;
  font-size:14px;
  font-weight:600;
  gap:8px;
  overflow:hidden;
  padding:6px 16px;
  position:relative;
  text-decoration:none;
  transition:all .3s ease
  }
  
  .premium-badge-header::before {
  background:linear-gradient(90deg,transparent,#ffffff26,transparent);
  content:'';
  height:100%;
  left:-100%;
  position:absolute;
  top:0;
  transition:left .5s ease;
  width:100%
  }
  
  .premium-badge-header:hover {
  background:linear-gradient(135deg,#fa556059 0%,#b14bf459 50%,#4d91ff59 100%);
  border-color:#b14bf499;
  box-shadow:0 4px 15px #b14bf44d;
  transform:translateY(-1px)
  }
  
  .premium-badge-header:hover::before {
  left:100%
  }
  
  .free-badge-header {
  align-items:center;
  background:#ffffff1a;
  border:1px solid var(--border-subtle);
  border-radius:20px;
  color:var(--text-secondary);
  display:inline-flex;
  font-size:14px;
  font-weight:500;
  padding:6px 16px
  }
  
  .welcome-text {
  align-items:center;
  display:inline-flex;
  gap:0
  }
  
  .email-expandable {
  cursor:pointer;
  display:inline-block;
  max-width:18ch;
  overflow:hidden;
  text-overflow:ellipsis;
  transition:max-width .4s ease;
  vertical-align:bottom;
  white-space:nowrap
  }
  
  .email-expandable.expanded {
  max-width:400px
  }
  
  .premium-expire-link {
  align-items:center;
  background:#ffffff14;
  border:1px solid var(--border-subtle);
  border-radius:8px;
  color:var(--text-primary);
  cursor:pointer;
  display:inline-flex;
  font-size:14px;
  gap:10px;
  padding:8px 16px;
  position:relative;
  text-decoration:none;
  transition:all .2s ease
  }
  
  .premium-expire-link svg {
  opacity:.8;
  transition:opacity .2s ease
  }
  
  .premium-expire-link:hover {
  background:linear-gradient(135deg,#b14bf433 0%,#fa556033 100%);
  border-color:#b14bf466;
  color:var(--text-primary)
  }
  
  .premium-expire-link::before {
  border:6px solid transparent;
  border-bottom-color:#b14bf466;
  content:'';
  left:50%;
  opacity:0;
  position:absolute;
  top:calc(100% + 2px);
  transform:translateX(-50%);
  transition:all .2s ease;
  visibility:hidden;
  z-index:1000
  }
  
  .premium-expire-link:hover::before {
  opacity:1;
  visibility:visible
  }
  
  .premium-badge-combined {
  align-items:center;
  background:linear-gradient(135deg,#fa556026 0%,#b14bf426 50%,#4d91ff26 100%);
  border:1px solid #b14bf44d;
  border-radius:20px;
  color:var(--text-primary);
  display:inline-flex;
  font-size:13px;
  font-weight:600;
  overflow:hidden;
  position:relative;
  text-decoration:none;
  transition:all .3s ease
  }
  
  .premium-badge-combined:hover {
  background:linear-gradient(135deg,#fa556040 0%,#b14bf440 50%,#4d91ff40 100%);
  border-color:#b14bf480;
  box-shadow:0 4px 12px #b14bf433;
  color:var(--text-primary);
  transform:translateY(-1px)
  }
  
  .premium-badge-left {
  align-items:center;
  display:flex;
  gap:6px;
  padding:8px 12px
  }
  
  .premium-badge-divider {
  background:#fff3;
  height:20px;
  width:1px
  }
  
  .premium-badge-right {
  align-items:center;
  color:var(--text-secondary);
  display:flex;
  font-weight:500;
  gap:6px;
  padding:8px 12px
  }
  
  .premium-badge-right svg {
  opacity:.7
  }
  
  .premium-badge-combined:hover .premium-badge-right {
  color:var(--text-primary)
  }
  
  .lang-btn-style {
  align-items:center;
  background:#ffffff14;
  border:1px solid var(--border-subtle);
  border-radius:9999px;
  color:var(--text-primary);
  display:inline-flex;
  font-size:.875rem;
  font-weight:500;
  justify-content:center;
  padding:.625rem 1rem;
  transition:all .3s ease
  }
  
  .lang-btn-style:hover {
  background:#ffffff1f
  }
  
  .premium-expire-link:hover svg,.premium-badge-combined:hover .premium-badge-right svg {
  opacity:1
  }
  
  .premium-expire-link::after,.premium-badge-combined::after {
  background:linear-gradient(135deg,#1e1e28fa 0%,#14141efa 100%);
  border:1px solid #b14bf466;
  border-radius:8px;
  box-shadow:0 4px 15px #0000004d;
  color:var(--text-primary);
  content:attr(data-tooltip);
  font-size:12px;
  font-weight:600;
  left:50%;
  opacity:0;
  padding:8px 14px;
  position:absolute;
  top:calc(100% + 8px);
  transform:translateX(-50%) translateY(-5px);
  transition:all .2s ease;
  visibility:hidden;
  white-space:nowrap;
  z-index:1000
  }
  
  .premium-expire-link:hover::after,.premium-badge-combined:hover::after {
  opacity:1;
  transform:translateX(-50%) translateY(0);
  visibility:visible
  }
  
  @media (max-width: 1023px) {
  .header-row {
  align-items:center;
  display:flex;
  justify-content:space-between
  }
  
  .mobile-logo-center {
  display:flex;
  flex:1;
  justify-content:center;
  margin:0 12px
  }
  }
  
  @media (max-width: 480px) {
  .mobile-logo-center {
  margin:0 8px
  }
  
  .mobile-logo-center .logo-img {
  height:44px!important
  }
  
  .mobile-logo-center .duckier-logo-text {
  font-size:1.4rem
  }
  }
  
  .logout-btn-animated {
  align-items:center;
  background:#ffffff14;
  border:1px solid var(--border-subtle);
  border-radius:9999px;
  color:var(--text-primary);
  display:inline-flex;
  font-size:.875rem;
  font-weight:500;
  gap:0;
  justify-content:center;
  overflow:hidden;
  padding:.625rem 1rem;
  text-decoration:none;
  transition:all .3s ease
  }
  
  .logout-btn-animated:hover {
  background:#ffffff1f;
  gap:8px
  }
  
  .logout-btn-animated svg {
  flex-shrink:0
  }
  
  .logout-btn-animated .logout-text {
  max-width:0;
  opacity:0;
  overflow:hidden;
  transition:all .3s ease;
  white-space:nowrap
  }
  
  .logout-btn-animated:hover .logout-text {
  max-width:100px;
  opacity:1
  }
  
  .header-traffic-box {
  background:#ffffff14;
  border:1px solid var(--border-subtle);
  border-radius:8px;
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:160px;
  padding:6px 12px
  }
  
  .header-traffic-label {
  align-items:center;
  color:var(--text-primary);
  display:flex;
  font-size:13px;
  gap:6px
  }
  
  .header-traffic-bar {
  background:#ffffff1a;
  border-radius:3px;
  height:6px;
  overflow:hidden
  }
  
  .header-traffic-progress {
  background:linear-gradient(90deg,#4d91ff 0%,#b14bf4 50%,#fa5560 100%);
  border-radius:3px;
  height:100%;
  transition:width .3s ease
  }
  
  .header-storage-simple {
  align-items:center;
  background:#ffffff14;
  border:1px solid var(--border-subtle);
  border-radius:8px;
  color:var(--text-primary);
  display:flex;
  font-size:13px;
  gap:6px;
  min-height:42px;
  min-width:160px;
  padding:6px 12px
  }
  
  .upgrade-premium-btn {
  align-items:center;
  background:linear-gradient(135deg,#b14bf426 0%,#fa556026 100%);
  border:1px solid #b14bf44d;
  border-radius:20px;
  color:var(--text-primary);
  display:inline-flex;
  font-size:13px;
  font-weight:600;
  gap:8px;
  padding:8px 16px;
  text-decoration:none;
  transition:all .3s ease
  }
  
  .upgrade-premium-btn:hover {
  background:linear-gradient(135deg,#b14bf440 0%,#fa556040 100%);
  border-color:#b14bf480;
  box-shadow:0 4px 12px #b14bf433;
  color:var(--text-primary);
  transform:translateY(-1px)
  }
  
  .notification-wrapper {
  margin-left:8px;
  position:relative
  }
  
  .notification-btn {
  align-items:center;
  background:#ffffff14;
  border:1px solid var(--border-subtle);
  border-radius:50%;
  color:var(--text-primary);
  cursor:pointer;
  display:inline-flex;
  height:42px;
  justify-content:center;
  position:relative;
  transition:all .3s ease;
  width:42px
  }
  
  .notification-btn:hover {
  background:#ffffff1f
  }
  
  .notification-btn.has-unread {
  animation:bellShake .5s ease-in-out infinite
  }
  
  .notification-btn.has-unread svg {
  stroke:#fa5560
  }
  
  .header-traffic-label svg,.header-storage-simple svg {
  opacity:.8
  }
  
  @keyframes bellShake {
  25% {
  transform:rotate(10deg)
  }
  
  75% {
  transform:rotate(-10deg)
  }
  
  0%,100%,50% {
  transform:rotate(0deg)
  }
  }
  
  .notification-badge {
  align-items:center;
  background:#fa5560;
  border-radius:9px;
  color:var(--text-primary);
  display:none;
  font-size:11px;
  font-weight:700;
  height:18px;
  justify-content:center;
  line-height:1;
  min-width:18px;
  padding:0 5px;
  position:absolute;
  right:-2px;
  top:-2px
  }
  
  .notification-badge.visible {
  display:flex
  }
  
  .notification-dropdown {
  backdrop-filter:blur(20px);
  background:#14141efa;
  border:1px solid var(--border-subtle);
  border-radius:16px;
  box-shadow:0 20px 60px #00000080;
  display:none;
  max-height:500px;
  overflow:hidden;
  position:absolute;
  right:0;
  top:calc(100% + 12px);
  width:380px;
  z-index:9999
  }
  
  .notification-dropdown.open {
  display:block
  }
  
  .notification-header {
  align-items:center;
  border-bottom:1px solid var(--border-subtle);
  display:flex;
  justify-content:space-between;
  padding:16px 20px
  }
  
  .notification-title {
  color:var(--text-primary);
  font-size:16px;
  font-weight:700
  }
  
  .notification-mark-read {
  background:none;
  border:none;
  color:var(--text-muted);
  cursor:pointer;
  font-size:13px;
  font-weight:500;
  transition:color .2s ease
  }
  
  .notification-mark-read:hover {
  color:var(--text-secondary)
  }
  
  .notification-list {
  max-height:400px;
  overflow-y:auto
  }
  
  .notification-item {
  border-bottom:1px solid var(--border-subtle);
  display:block;
  padding:16px 20px;
  text-decoration:none;
  transition:background .2s ease
  }
  
  .notification-item:hover {
  background:#ffffff0d
  }
  
  .notification-item.unread {
  background:#ffffff08
  }
  
  .notification-item.unread:hover {
  background:#ffffff0f
  }
  
  .notification-item-header {
  align-items:center;
  display:flex;
  justify-content:space-between;
  margin-bottom:6px
  }
  
  .notification-item-date {
  color:var(--text-muted);
  font-size:12px
  }
  
  .notification-comment-badge {
  align-items:center;
  background:#ffffff14;
  border-radius:10px;
  color:var(--text-muted);
  display:inline-flex;
  font-size:11px;
  gap:4px;
  padding:2px 8px
  }
  
  .notification-comment-badge svg {
  opacity:.7
  }
  
  .notification-item-title {
  color:var(--text-primary);
  font-size:14px;
  font-weight:600;
  margin-bottom:6px
  }
  
  .notification-item-text {
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  color:var(--text-secondary);
  display:-webkit-box;
  font-size:13px;
  line-height:1.5;
  overflow:hidden
  }
  
  .notification-read-more {
  color:var(--text-muted);
  font-style:italic
  }
  
  .notification-empty span {
  font-size:14px
  }
  
  .notification-spinner {
  animation:spin 1s linear infinite
  }
  
  .notification-empty,.notification-loading {
  align-items:center;
  color:var(--text-muted);
  display:flex;
  flex-direction:column;
  gap:12px;
  justify-content:center;
  padding:40px 20px
  }
  
  @keyframes spin {
  from {
  transform:rotate(0deg)
  }
  
  to {
  transform:rotate(360deg)
  }
  }
  
  @media (max-width: 640px) {
  .notification-dropdown {
  left:50%;
  position:fixed;
  right:auto;
  top:70px;
  transform:translateX(-50%);
  width:calc(100vw - 32px)
  }
  }
  
  .helpdesk-section {
  min-height:calc(100vh - 80px - 250px);
  padding:40px 0
  }
  
  .helpdesk-container {
  margin:0 auto;
  max-width:1400px;
  padding:0 24px
  }
  
  .helpdesk-hero {
  margin-bottom:40px;
  text-align:center
  }
  
  .helpdesk-hero h1 {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  background-clip:text;
  display:inline-block;
  font-size:48px;
  font-weight:800;
  margin-bottom:16px
  }
  
  .helpdesk-hero p {
  color:var(--text-secondary,#ffffffb3);
  font-size:16px;
  margin:0
  }
  
  .helpdesk-grid {
  align-items:start;
  display:grid;
  gap:24px;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)
  }
  
  .helpdesk-card {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(to bottom,#ffffff24,#ffffff14) border-box;
  border:2px solid transparent;
  border-radius:12px;
  min-width:0;
  overflow:hidden;
  padding:32px
  }
  
  .helpdesk-card-header {
  align-items:center;
  display:flex;
  justify-content:space-between;
  margin-bottom:24px
  }
  
  .helpdesk-card-title {
  color:var(--text-primary,#fffffff2);
  font-size:20px;
  font-weight:700
  }
  
  .helpdesk-alert {
  align-items:center;
  background:linear-gradient(175deg,#fa556026 -94.09%,#fa55600d 154.53%);
  border:1px solid #fa55604d;
  border-radius:12px;
  color:var(--text-primary,#ffffffe6);
  display:flex;
  font-size:14px;
  gap:12px;
  margin-bottom:24px;
  padding:16px 20px
  }
  
  .helpdesk-form-group {
  margin-bottom:20px
  }
  
  .helpdesk-form-group label {
  color:var(--text-primary,#ffffffe6);
  display:block;
  font-size:14px;
  font-weight:600;
  margin-bottom:8px
  }
  
  .helpdesk-form-row {
  display:flex;
  gap:16px
  }
  
  .helpdesk-form-row .helpdesk-form-group {
  flex:1
  }
  
  .helpdesk-select {
  background-color:var(--color-input-bg,#111116);
  border:1px solid var(--border-subtle,#ffffff1a);
  border-radius:8px;
  color:var(--text-primary,#efefef);
  cursor:pointer;
  padding:10px 12px;
  transition:all .1s ease-in-out;
  width:100%
  }
  
  .helpdesk-card .duckier-input-text {
  background-color:var(--color-input-bg,#111116)!important;
  border:1px solid var(--border-subtle,#ffffff1a)!important
  }
  
  .helpdesk-card .duckier-input-text:hover,.helpdesk-card .duckier-input-text:focus {
  border-color:var(--border-subtle)!important
  }
  
  .helpdesk-select option[value="low"] {
  color:#64b4ffff
  }
  
  .helpdesk-select option[value="medium"] {
  color:#fab455ff
  }
  
  .helpdesk-select option[value="high"] {
  color:#fa5560ff
  }
  
  .helpdesk-select.priority-low {
  border-color:#64b4ff4d;
  color:#64b4ffff
  }
  
  .helpdesk-select.priority-medium {
  border-color:#fab4554d;
  color:#fab455ff
  }
  
  .helpdesk-select.priority-high {
  border-color:#fa55604d;
  color:#fa5560ff
  }
  
  .helpdesk-textarea {
  background-color:var(--color-input-bg,#111116);
  border:1px solid var(--border-subtle,#ffffff1a);
  border-radius:8px;
  color:var(--text-primary,#efefef);
  font-family:inherit;
  min-height:120px;
  padding:12px;
  resize:vertical;
  transition:all .1s ease-in-out;
  width:100%
  }
  
  .helpdesk-textarea::placeholder {
  color:var(--text-tertiary,#fff6)
  }
  
  .helpdesk-submit-btn {
  align-items:center;
  background:#ffffff1a;
  border:1px solid var(--border-subtle);
  border-radius:8px;
  color:var(--text-primary,#fff);
  cursor:pointer;
  display:inline-flex;
  font-size:14px;
  font-weight:600;
  justify-content:center;
  padding:10px 24px;
  transition:all .2s ease
  }
  
  .helpdesk-submit-btn:hover {
  background:#ffffff26;
  border-color:var(--border-subtle)
  }
  
  .ticket-list {
  display:flex;
  flex-direction:column;
  gap:12px
  }
  
  .ticket-item {
  align-items:center;
  background:var(--color-bg-subtle,#ffffff08);
  border:1px solid var(--border-subtle);
  border-radius:12px;
  color:inherit;
  display:flex;
  justify-content:space-between;
  padding:16px 20px;
  text-decoration:none;
  transition:all .2s ease
  }
  
  .ticket-item:hover {
  background:#ffffff0f;
  border-color:var(--border-subtle)
  }
  
  .ticket-info {
  flex:1;
  min-width:0;
  overflow:hidden
  }
  
  .ticket-subject {
  color:var(--text-primary,#fffffff2);
  font-size:15px;
  font-weight:600;
  margin-bottom:4px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
  }
  
  .ticket-meta {
  color:var(--text-tertiary,#ffffff80);
  font-size:12px
  }
  
  .ticket-badges {
  align-items:center;
  display:flex;
  flex-shrink:0;
  gap:8px;
  margin-left:12px
  }
  
  .ticket-status {
  align-items:center;
  border-radius:20px;
  display:inline-flex;
  font-size:11px;
  font-weight:600;
  letter-spacing:.5px;
  padding:4px 10px;
  text-transform:uppercase
  }
  
  .ticket-status.open {
  background:#fab45526;
  border:1px solid #fab4554d;
  color:#fab455ff
  }
  
  .ticket-status.answered {
  background:#55fa9626;
  border:1px solid #55fa964d;
  color:#55fa96ff
  }
  
  .ticket-status.closed {
  background:#ffffff1a;
  border:1px solid var(--border-subtle);
  color:var(--text-tertiary,#ffffff80)
  }
  
  .ticket-priority {
  align-items:center;
  border-radius:12px;
  display:inline-flex;
  font-size:10px;
  font-weight:600;
  padding:4px 10px;
  text-transform:uppercase
  }
  
  .ticket-priority.low {
  background:#64b4ff26;
  color:#64b4ffff
  }
  
  .ticket-priority.medium {
  background:#fab45526;
  color:#fab455ff
  }
  
  .ticket-priority.high {
  background:#fa556026;
  color:#fa5560ff
  }
  
  .empty-state {
  align-items:center;
  color:var(--text-tertiary,#ffffff80);
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:48px 24px;
  text-align:center
  }
  
  .empty-state svg {
  height:64px;
  margin-bottom:16px;
  opacity:.5;
  width:64px
  }
  
  .empty-state p {
  font-size:15px;
  margin:0
  }
  
  .ticket-count {
  color:var(--text-tertiary,#ffffff80);
  font-size:13px;
  font-weight:400
  }
  
  .paging,.pagination {
  align-items:center;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  margin-top:20px
  }
  
  .paging a,.pagination a,.paging span,.pagination span {
  align-items:center;
  background:var(--color-bg-element,#ffffff0d);
  border:1px solid var(--border-subtle,#ffffff1a);
  border-radius:8px;
  color:var(--text-secondary,#ffffffb3);
  display:inline-flex;
  font-size:13px;
  font-weight:500;
  height:36px;
  justify-content:center;
  min-width:36px;
  padding:0 12px;
  text-decoration:none;
  transition:all .2s
  }
  
  .paging a:hover,.pagination a:hover {
  background:#ffffff1a;
  border-color:var(--border-subtle);
  color:var(--text-primary,#fff)
  }
  
  .paging .current,.pagination .current,.paging span.current,.pagination span.current {
  background:linear-gradient(81.02deg,#fa5560cc -23.47%,#b14bf4cc 45.52%,#4d91ffcc 114.8%);
  border-color:transparent;
  color:var(--text-primary,#fff)
  }
  
  .paging .total,.pagination .total {
  background:transparent;
  border:none;
  color:var(--text-tertiary,#fff6);
  font-size:12px
  }
  
  .helpdesk-select:hover,.helpdesk-select:focus,.helpdesk-textarea:hover,.helpdesk-textarea:focus {
  border-color:var(--border-subtle);
  outline:none
  }
  
  @media (max-width: 900px) {
  .helpdesk-grid {
  grid-template-columns:1fr
  }
  
  .helpdesk-hero h1 {
  font-size:36px
  }
  
  .helpdesk-card {
  padding:24px
  }
  
  .helpdesk-form-row {
  flex-direction:column;
  gap:0
  }
  
  .ticket-item {
  align-items:flex-start;
  flex-direction:column;
  gap:12px
  }
  
  .ticket-badges {
  margin-left:0
  }
  }
  
  .helpdesk-section {
  min-height:calc(100vh - 80px - 250px);
  padding:40px 0
  }
  
  .helpdesk-container {
  margin:0 auto;
  max-width:900px;
  padding:0 24px
  }
  
  .helpdesk-breadcrumb {
  margin-bottom:24px
  }
  
  .helpdesk-breadcrumb a {
  color:var(--text-muted,#fff9);
  font-size:14px;
  text-decoration:none;
  transition:color .2s
  }
  
  .helpdesk-breadcrumb a:hover {
  color:#c66bd5
  }
  
  .back-btn {
  align-items:center;
  background:var(--color-bg-element,#ffffff0d);
  border:1px solid var(--border-subtle,#ffffff1a);
  border-radius:8px;
  color:var(--text-secondary,#ffffffb3);
  display:inline-flex;
  font-size:14px;
  font-weight:500;
  gap:8px;
  padding:10px 16px;
  text-decoration:none;
  transition:all .2s
  }
  
  .back-btn:hover {
  background:#ffffff1a;
  border-color:var(--border-subtle);
  color:var(--text-primary,#fff)
  }
  
  .helpdesk-breadcrumb span {
  color:var(--text-tertiary,#fff6);
  margin:0 8px
  }
  
  .helpdesk-card {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(to bottom,#ffffff24,#ffffff14) border-box;
  border:2px solid transparent;
  border-radius:12px;
  margin-bottom:24px;
  padding:32px
  }
  
  .ticket-header {
  border-bottom:1px solid var(--border-subtle,#ffffff1a);
  display:flex;
  flex-direction:column;
  gap:16px;
  margin-bottom:24px;
  padding-bottom:24px
  }
  
  .ticket-title {
  color:var(--text-primary,#fffffff2);
  font-size:24px;
  font-weight:700;
  margin:0
  }
  
  .ticket-info-row {
  align-items:center;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:space-between
  }
  
  .ticket-meta {
  color:var(--text-tertiary,#ffffff80);
  font-size:13px
  }
  
  .ticket-actions {
  align-items:center;
  display:flex;
  flex-wrap:wrap;
  gap:10px
  }
  
  .ticket-status {
  align-items:center;
  border-radius:20px;
  display:inline-flex;
  font-size:12px;
  font-weight:600;
  justify-content:center;
  letter-spacing:.5px;
  padding:8px 16px;
  text-transform:uppercase;
  white-space:nowrap
  }
  
  .ticket-status.answered {
  background:#55fa9626;
  border:1px solid #55fa964d;
  color:#55fa96ff
  }
  
  .ticket-status.closed {
  background:#ffffff1a;
  border:1px solid var(--border-subtle);
  color:var(--text-tertiary,#ffffff80)
  }
  
  .ticket-priority {
  align-items:center;
  border-radius:20px;
  display:inline-flex;
  font-size:12px;
  font-weight:600;
  justify-content:center;
  padding:8px 16px;
  text-transform:uppercase;
  white-space:nowrap
  }
  
  .ticket-priority.low {
  background:#64b4ff26;
  border:1px solid #64b4ff4d;
  color:#64b4ffff
  }
  
  .ticket-priority.high {
  background:#fa556026;
  border:1px solid #fa55604d;
  color:#fa5560ff
  }
  
  .close-btn {
  align-items:center;
  background:var(--color-bg-element,#ffffff0d);
  border:1px solid var(--border-subtle);
  border-radius:20px;
  color:var(--text-secondary,#ffffffb3);
  display:inline-flex;
  font-size:12px;
  font-weight:600;
  justify-content:center;
  padding:8px 16px;
  text-decoration:none;
  transition:all .2s;
  white-space:nowrap
  }
  
  .close-btn:hover {
  background:#fa556026;
  border-color:#fa55604d;
  color:#fa5560ff
  }
  
  .messages-list {
  display:flex;
  flex-direction:column;
  gap:20px
  }
  
  .message-item {
  background:var(--color-bg-subtle,#ffffff08);
  border:1px solid var(--border-subtle);
  border-radius:16px;
  padding:20px
  }
  
  .message-item.admin {
  background:linear-gradient(175deg,#55c88214 -94.09%,#55c88205 154.53%);
  border:1px solid #55c88233
  }
  
  .message-header {
  align-items:center;
  display:flex;
  justify-content:space-between;
  margin-bottom:12px
  }
  
  .message-author {
  align-items:center;
  display:flex;
  gap:10px
  }
  
  .message-avatar {
  align-items:center;
  background:linear-gradient(81.02deg,#fa556080 -23.47%,#b14bf480 45.52%,#4d91ff80 114.8%);
  border-radius:50%;
  color:var(--text-primary,white);
  display:flex;
  font-size:14px;
  font-weight:600;
  height:36px;
  justify-content:center;
  width:36px
  }
  
  .message-item.admin .message-avatar {
  background:linear-gradient(81.02deg,#55c882ff -23.47%,#64b4a0ff 114.8%)
  }
  
  .message-name {
  color:var(--text-primary,#ffffffe6);
  font-size:14px;
  font-weight:600
  }
  
  .message-item.admin .message-name {
  color:#55c882ff
  }
  
  .message-badge {
  background:#55c88233;
  border-radius:10px;
  color:#55c882ff;
  font-size:10px;
  font-weight:600;
  margin-left:8px;
  padding:2px 8px;
  text-transform:uppercase
  }
  
  .message-date {
  color:var(--text-tertiary,#fff6);
  font-size:12px
  }
  
  .message-content {
  color:var(--text-primary,#ffffffd9);
  font-size:14px;
  line-height:1.7
  }
  
  .reply-card {
  background:#ffffff05;
  border:1px solid var(--border-subtle);
  border-radius:16px;
  padding:24px
  }
  
  .reply-title {
  color:var(--text-primary,#ffffffe6);
  font-size:16px;
  font-weight:600;
  margin-bottom:16px
  }
  
  .helpdesk-textarea {
  background-color:var(--color-input-bg,#111116);
  border:1px solid var(--border-subtle,#ffffff1a);
  border-radius:8px;
  color:var(--text-primary,#efefef);
  font-family:inherit;
  margin-bottom:16px;
  min-height:100px;
  padding:12px;
  resize:vertical;
  transition:all .1s ease-in-out;
  width:100%
  }
  
  .helpdesk-textarea:hover,.helpdesk-textarea:focus {
  border-color:var(--border-subtle);
  outline:none
  }
  
  .helpdesk-submit-btn {
  align-items:center;
  background:#ffffff1a;
  border:1px solid var(--border-subtle);
  border-radius:8px;
  color:var(--text-primary,#fff);
  cursor:pointer;
  display:inline-flex;
  font-size:14px;
  font-weight:600;
  justify-content:center;
  padding:10px 24px;
  transition:all .2s ease
  }
  
  .helpdesk-submit-btn:hover {
  background:#ffffff26;
  border-color:var(--border-subtle)
  }
  
  .helpdesk-textarea::placeholder {
  color:var(--text-tertiary,#fff6)
  }
  
  .helpdesk-alert {
  background:linear-gradient(175deg,#55fa9626 -94.09%,#55fa960d 154.53%);
  border:1px solid #55fa964d;
  border-radius:12px;
  color:var(--text-primary,#ffffffe6);
  font-size:14px;
  margin-bottom:24px;
  padding:16px 20px
  }
  
  .closed-notice {
  color:var(--text-tertiary,#ffffff80);
  font-size:14px;
  padding:20px;
  text-align:center
  }
  
  .modal-overlay {
  align-items:center;
  background:#000c;
  bottom:0;
  display:none;
  justify-content:center;
  left:0;
  padding:20px;
  position:fixed;
  right:0;
  top:0;
  z-index:1000
  }
  
  .modal-overlay.active {
  display:flex
  }
  
  .modal-box {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(to bottom,#ffffff24,#ffffff14) border-box;
  border:2px solid transparent;
  border-radius:16px;
  max-width:400px;
  padding:32px;
  text-align:center;
  width:100%
  }
  
  .modal-icon {
  align-items:center;
  background:#fa556026;
  border-radius:50%;
  display:flex;
  height:64px;
  justify-content:center;
  margin:0 auto 20px;
  width:64px
  }
  
  .modal-icon svg {
  height:32px;
  stroke:#fa5560;
  width:32px
  }
  
  .modal-title {
  color:var(--text-primary,#fff);
  font-size:20px;
  font-weight:700;
  margin-bottom:12px
  }
  
  .modal-text {
  color:var(--text-muted,#fff9);
  font-size:14px;
  line-height:1.6;
  margin-bottom:24px
  }
  
  .modal-buttons {
  display:flex;
  gap:12px;
  justify-content:center
  }
  
  .modal-btn {
  align-items:center;
  border-radius:8px;
  cursor:pointer;
  display:inline-flex;
  font-size:14px;
  font-weight:600;
  justify-content:center;
  padding:12px 24px;
  text-decoration:none;
  transition:all .2s
  }
  
  .modal-btn-cancel {
  background:#ffffff1a;
  border:1px solid var(--border-subtle);
  color:var(--text-primary,#fff)
  }
  
  .modal-btn-cancel:hover {
  background:#ffffff26
  }
  
  .modal-btn-confirm {
  background:linear-gradient(90deg,#fa5560,#b14bf4);
  border:none;
  color:var(--text-primary,#fff)
  }
  
  .modal-btn-confirm:hover {
  opacity:.9
  }
  
  .ticket-status.open,.ticket-priority.medium {
  background:#fab45526;
  border:1px solid #fab4554d;
  color:#fab455ff
  }
  
  @media (max-width: 768px) {
  .helpdesk-card {
  padding:24px
  }
  
  .ticket-header {
  flex-direction:column;
  gap:16px
  }
  
  .ticket-actions {
  flex-wrap:wrap
  }
  
  .ticket-title {
  font-size:20px
  }
  }
  
  .internal-error-page {
  background:#fff;
  border-radius:16px;
  box-shadow:0 4px 24px #0000001a;
  margin:100px auto;
  max-width:600px;
  padding:40px;
  text-align:center
  }
  
  .internal-error-page h1 {
  color:#fa5560;
  font-size:32px;
  margin-bottom:16px
  }
  
  .internal-error-page p {
  color:#4a4d5e;
  font-size:16px;
  line-height:1.6
  }
  
  .toast-container {
  display:flex;
  flex-direction:column;
  gap:12px;
  pointer-events:none;
  position:fixed;
  right:24px;
  top:24px;
  z-index:9999
  }
  
  .toast {
  align-items:center;
  animation:toastIn .3s ease;
  border-radius:12px;
  box-shadow:0 10px 40px #0006;
  color:var(--text-primary);
  display:flex;
  font-size:14px;
  font-weight:500;
  gap:12px;
  max-width:400px;
  padding:16px 20px;
  pointer-events:auto
  }
  
  .toast.toast-out {
  animation:toastOut .3s ease forwards
  }
  
  .toast-success {
  background:linear-gradient(135deg,#10b981f2 0%,#059669f2 100%);
  border:1px solid #10b98180
  }
  
  .toast-error {
  background:linear-gradient(135deg,#ef4444f2 0%,#dc2626f2 100%);
  border:1px solid #ef444480
  }
  
  .toast-icon {
  flex-shrink:0
  }
  
  .toast-close {
  background:none;
  border:none;
  color:#fff;
  cursor:pointer;
  display:flex;
  margin-left:auto;
  opacity:.7;
  padding:4px;
  transition:opacity .2s
  }
  
  .toast-close:hover {
  opacity:1
  }
  
  @keyframes toastIn {
  from {
  opacity:0;
  transform:translateX(100px)
  }
  
  to {
  opacity:1;
  transform:translateX(0)
  }
  }
  
  @keyframes toastOut {
  from {
  opacity:1;
  transform:translateX(0)
  }
  
  to {
  opacity:0;
  transform:translateX(100px)
  }
  }
  
  .field-error {
  align-items:center;
  animation:fieldErrorIn .2s ease;
  color:#f87171;
  display:flex;
  font-size:13px;
  gap:6px;
  margin-top:8px
  }
  
  .field-error svg {
  flex-shrink:0
  }
  
  @keyframes fieldErrorIn {
  from {
  opacity:0;
  transform:translateY(-4px)
  }
  
  to {
  opacity:1;
  transform:translateY(0)
  }
  }
  
  .input-error {
  border-color:#ef4444!important
  }
  
  .input-error:focus {
  border-color:#ef4444!important;
  box-shadow:0 0 0 3px #ef444426!important
  }
  
  .login-section {
  align-items:center;
  display:flex;
  justify-content:center;
  min-height:calc(100vh - 80px - 250px);
  padding:40px 0
  }
  
  .login-hero {
  margin-bottom:40px;
  text-align:center
  }
  
  .login-hero h1 {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  background-clip:text;
  display:inline-block;
  font-size:48px;
  font-weight:800;
  margin-bottom:16px
  }
  
  .login-hero p {
  color:var(--text-secondary,#ffffffb3);
  font-size:16px;
  margin:0
  }
  
  .login-container {
  margin:0 auto;
  max-width:500px;
  padding:0 24px;
  width:100%
  }
  
  .login-card {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%) border-box;
  border:2px solid transparent;
  border-radius:24px;
  padding:48px
  }
  
  .login-alert {
  align-items:center;
  background:linear-gradient(175deg,#fa556026 -94.09%,#fa55600d 154.53%);
  border:1px solid #fa55604d;
  border-radius:12px;
  color:var(--text-primary,#ffffffe6);
  display:flex;
  font-size:14px;
  gap:12px;
  margin-bottom:24px;
  padding:16px 20px
  }
  
  .login-alert svg {
  color:#fa5560ff;
  flex-shrink:0
  }
  
  .login-form-group {
  margin-bottom:24px
  }
  
  .login-form-group label {
  color:var(--text-primary,#ffffffe6);
  display:block;
  font-size:14px;
  font-weight:600;
  margin-bottom:8px
  }
  
  .captcha_code,input.captcha_code {
  background-color:var(--color-input-bg,#111)!important;
  border:1px solid #242c3e!important;
  border-radius:8px!important;
  box-shadow:none!important;
  color:var(--text-primary,#efefef)!important;
  flex-grow:1;
  font-family:inherit!important;
  padding:10px 12px!important;
  transition:all .1s ease-in-out!important;
  width:100%!important
  }
  
  .captcha_code:hover,.captcha_code:focus,.captcha_code:focus-visible,input.captcha_code:hover,input.captcha_code:focus,input.captcha_code:focus-visible {
  border-color:var(--color-duckier-border)!important;
  outline:none!important
  }
  
  .captcha_code::placeholder,input.captcha_code::placeholder {
  color:var(--text-tertiary,#fff6)!important
  }
  
  .login-forgot {
  margin-bottom:24px;
  text-align:center
  }
  
  .login-forgot a {
  color:var(--text-secondary,#ffffffb3);
  font-size:14px;
  font-weight:500;
  text-decoration:none;
  transition:color .3s ease
  }
  
  .login-forgot a:hover {
  color:#c66bd5
  }
  
  .login-divider {
  align-items:center;
  display:flex;
  gap:16px;
  margin:32px 0
  }
  
  .login-divider::before,.login-divider::after {
  background:linear-gradient(to right,transparent,var(--border-subtle,#ffffff1a),transparent);
  content:'';
  flex:1;
  height:1px
  }
  
  .login-divider span {
  color:var(--text-tertiary,#ffffff80);
  font-size:14px;
  font-weight:500
  }
  
  .login-social {
  align-items:center;
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  justify-content:center
  }
  
  .login-social-btn {
  align-items:center;
  background:linear-gradient(175deg,#ffffff0d -94.09%,#ffffff05 154.53%);
  border:1px solid var(--border-subtle,#ffffff1a);
  border-radius:12px;
  display:flex;
  height:48px;
  justify-content:center;
  transition:all .3s ease;
  width:48px
  }
  
  .login-social-btn:hover {
  background:linear-gradient(175deg,#ffffff1a -94.09%,#ffffff0d 154.53%);
  border-color:#c66bd5;
  transform:translateY(-2px)
  }
  
  .login-social-btn img {
  height:24px;
  width:24px
  }
  
  .login-signup {
  border-top:1px solid var(--border-subtle,#ffffff1a);
  color:var(--text-secondary,#ffffffb3);
  font-size:14px;
  margin-top:32px;
  padding-top:32px;
  text-align:center
  }
  
  .login-signup a {
  color:#c66bd5;
  font-weight:600;
  text-decoration:none;
  transition:color .3s ease
  }
  
  .login-signup a:hover {
  color:#d88be5
  }
  
  @media (max-width: 768px) {
  .login-hero h1 {
  font-size:36px
  }
  
  .login-card {
  padding:32px 24px
  }
  
  .login-section {
  min-height:calc(100vh - 150px);
  padding:40px 0
  }
  }
  
  @media (max-width: 400px) {
  .login-card {
  padding:24px 16px
  }
  
  .login-container {
  padding:0 12px
  }
  }
  
  .cf-turnstile,[class*="turnstile"],[class*="captcha"] {
  display:flex!important;
  justify-content:center!important;
  overflow:visible!important;
  width:100%!important
  }
  
  @media (max-width: 360px) {
  .cf-turnstile,[class*="turnstile"],[class*="captcha"] {
  transform:scale(0.9);
  transform-origin:center center
  }
  }
  
  html,body {
  background-color:var(--color-background);
  color:var(--text-primary);
  margin:0;
  min-height:100vh;
  padding:0
  }
  
  body {
  line-height:1.5;
  visibility:hidden
  }
  
  body.ready {
  visibility:visible
  }
  
  .flex {
  display:flex
  }
  
  .flex-col {
  flex-direction:column
  }
  
  .min-h-screen {
  min-height:100vh
  }
  
  .flex-grow {
  flex-grow:1
  }
  
  div[class*="captcha"],div[class*="turnstile"],div[class*="cf-turnstile"],.cf-turnstile {
  display:flex!important;
  justify-content:center!important;
  margin:0 auto!important;
  max-width:100%!important;
  overflow:visible!important
  }
  
  div[class*="captcha"] > div,div[class*="captcha"] iframe,div[class*="turnstile"] > div,div[class*="turnstile"] iframe,div[class*="cf-turnstile"] > div,div[class*="cf-turnstile"] iframe,.cf-turnstile > div,.cf-turnstile iframe {
  max-width:100%!important
  }
  
  @media (max-width: 350px) {
  div[class*="captcha"],div[class*="turnstile"],div[class*="cf-turnstile"],.cf-turnstile {
  transform:scale(0.9);
  transform-origin:center center
  }
  }
  
  @media (max-width: 320px) {
  div[class*="captcha"],div[class*="turnstile"],div[class*="cf-turnstile"],.cf-turnstile {
  transform:scale(0.85);
  transform-origin:center center
  }
  }
  
  body.navpanel-collapsed .navpanel {
  width:88px!important
  }
  
  body.navpanel-collapsed main {
  padding-left:88px!important
  }
  
  body.navpanel-collapsed .sidebar-edge-toggle {
  left:88px!important
  }
  
  .earnings-section {
  padding:40px 0
  }
  
  .earnings-hero {
  margin-bottom:60px;
  text-align:center
  }
  
  .earnings-hero h1 {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  background-clip:text;
  display:inline-block;
  font-size:48px;
  font-weight:800;
  margin-bottom:16px
  }
  
  .earnings-hero p {
  color:var(--text-secondary);
  font-size:18px;
  margin:0 auto;
  max-width:600px
  }
  
  .earnings-container {
  margin:0 auto;
  max-width:1200px;
  padding:0 24px
  }
  
  .earnings-table-wrapper {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%) border-box;
  border:2px solid transparent;
  border-radius:24px;
  margin-bottom:40px;
  overflow-x:auto;
  padding:40px
  }
  
  .earnings-table-title {
  color:var(--text-primary);
  font-size:24px;
  font-weight:700;
  margin-bottom:24px;
  text-align:center
  }
  
  #tier_tbl {
  background:transparent;
  border-collapse:separate;
  border-spacing:0;
  margin:0;
  width:100%
  }
  
  #tier_tbl thead th {
  background:linear-gradient(175deg,#ffffff1a -94.09%,#ffffff0d 154.53%);
  border:none;
  color:var(--text-primary);
  font-size:14px;
  font-weight:600;
  padding:16px 12px
  }
  
  #tier_tbl thead th:first-child {
  border-top-left-radius:12px
  }
  
  #tier_tbl thead th:last-child {
  border-top-right-radius:12px
  }
  
  #tier_tbl tbody tr {
  transition:all .3s ease
  }
  
  #tier_tbl tbody tr:hover {
  background:linear-gradient(175deg,#ffffff14 -94.09%,#ffffff05 154.53%)
  }
  
  #tier_tbl tbody td {
  border-bottom:1px solid var(--border-subtle);
  color:var(--text-secondary);
  font-size:15px;
  padding:20px 12px
  }
  
  #tier_tbl tbody tr:last-child td {
  border-bottom:none
  }
  
  #tier_tbl tbody tr:last-child td:first-child {
  border-bottom-left-radius:12px
  }
  
  #tier_tbl tbody tr:last-child td:last-child {
  border-bottom-right-radius:12px
  }
  
  .tier-label {
  display:flex;
  flex-direction:column;
  gap:8px
  }
  
  .tier-name {
  font-size:24px;
  font-weight:700
  }
  
  .tier-countries {
  font-size:13px;
  font-weight:500;
  opacity:.8
  }
  
  .tier-primary {
  color:#4d91ff
  }
  
  .tier-success {
  color:#10b981
  }
  
  .tier-danger {
  color:#fa5560
  }
  
  .tier-warning {
  color:#f59e0b
  }
  
  .amount-cell {
  color:var(--text-primary);
  font-size:18px;
  font-weight:600
  }
  
  .rules-section {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(to bottom,#ffffff24,#ffffff14) border-box;
  border:2px solid transparent;
  border-radius:24px;
  margin-bottom:40px;
  padding:40px
  }
  
  .rules-title {
  align-items:center;
  color:var(--text-primary);
  display:flex;
  font-size:24px;
  font-weight:700;
  gap:16px;
  margin-bottom:24px
  }
  
  .rules-title .title-icon {
  align-items:center;
  background:linear-gradient(135deg,#fa5560ff 0%,#b14bf4ff 50%,#4d91ffff 100%);
  border-radius:50%;
  display:flex;
  flex-shrink:0;
  height:48px;
  justify-content:center;
  width:48px
  }
  
  .rules-title .title-icon svg {
  color:#fff
  }
  
  .rules-list {
  display:grid;
  gap:16px;
  list-style:none;
  margin:0;
  padding:0
  }
  
  .rules-list li {
  align-items:flex-start;
  background:linear-gradient(175deg,#ffffff0d -94.09%,#ffffff05 154.53%);
  border-radius:12px;
  color:var(--text-primary);
  display:flex;
  font-size:15px;
  gap:16px;
  line-height:1.6;
  padding:16px;
  transition:all .3s ease
  }
  
  .rules-list li:hover {
  background:linear-gradient(175deg,#ffffff14 -94.09%,#ffffff0a 154.53%);
  transform:translateX(8px)
  }
  
  .rules-list li svg {
  color:#c66bd5;
  flex-shrink:0;
  margin-top:2px
  }
  
  .rules-list li b {
  color:var(--text-primary);
  font-weight:600
  }
  
  .cta-section {
  background:linear-gradient(var(--color-primary-light),var(--color-primary-light)) padding-box,linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%) border-box;
  border:2px solid transparent;
  border-radius:24px;
  padding:48px 40px;
  text-align:center
  }
  
  .cta-title {
  color:var(--text-primary);
  font-size:28px;
  font-weight:800;
  margin-bottom:16px
  }
  
  .cta-description {
  color:var(--text-secondary);
  font-size:16px;
  margin-bottom:32px;
  margin-left:auto;
  margin-right:auto;
  max-width:600px
  }
  
  .cta-button {
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  border:none;
  border-radius:12px;
  color:#fff;
  cursor:pointer;
  display:inline-block;
  font-size:16px;
  font-weight:700;
  padding:16px 48px;
  text-decoration:none;
  transition:all .3s ease
  }
  
  .cta-button:hover {
  box-shadow:0 8px 24px #b14bf466;
  transform:translateY(-2px)
  }
  
  @media (max-width: 768px) {
  .earnings-hero h1 {
  font-size:36px
  }
  
  .earnings-table-wrapper,.rules-section,.cta-section {
  padding:24px 20px
  }
  
  .earnings-table-title,.rules-title,.cta-title {
  font-size:20px
  }
  
  #tier_tbl {
  font-size:13px
  }
  
  .tier-name {
  font-size:18px
  }
  
  .amount-cell {
  font-size:16px
  }
  
  #tier_tbl thead th,#tier_tbl tbody td {
  padding:12px 8px
  }
  }
  
  @media (max-width: 767px) {
  .duckier-block {
  max-width:100%;
  overflow:hidden
  }
  
  .duckier-block * {
  box-sizing:border-box;
  max-width:100%
  }
  
  .settings-grid {
  margin:0!important;
  max-width:100%!important;
  overflow:hidden!important;
  padding:0!important;
  width:100%!important
  }
  
  .settings-column {
  max-width:100%!important;
  min-width:0!important;
  overflow:hidden!important;
  padding:0!important;
  width:100%!important
  }
  
  .config-section {
  border:1px solid var(--border-subtle)!important;
  border-radius:12px!important;
  margin-left:-8px!important;
  margin-right:-8px!important;
  max-width:calc(100% + 16px)!important;
  min-width:0!important;
  overflow:hidden!important;
  width:calc(100% + 16px)!important
  }
  
  .config-row {
  flex-wrap:wrap;
  max-width:100%!important;
  width:100%!important
  }
  
  .duckier-input-group {
  flex-wrap:nowrap!important;
  max-width:100%!important;
  min-width:0!important;
  width:100%!important
  }
  
  .duckier-card,.duckier-block-inner {
  max-width:100%!important;
  overflow:hidden!important;
  width:100%!important
  }
  
  .tab-content,.duckier-tab-content {
  max-width:100%!important;
  overflow-x:hidden!important;
  width:100%!important
  }
  
  body,html {
  overflow-x:hidden!important
  }
  
  .config-value,.input-wrapper,.copy-url-container {
  max-width:100%!important;
  min-width:0!important;
  width:100%!important
  }
  
  .copy-url-input,.duckier-input-group input {
  flex:1 1 0!important;
  min-width:0!important;
  width:0!important
  }
  }
  
  .duckier-confirm-overlay {
  align-items:center;
  backdrop-filter:blur(4px);
  background:#000000b3;
  bottom:0;
  display:flex;
  justify-content:center;
  left:0;
  opacity:0;
  position:fixed;
  right:0;
  top:0;
  transition:opacity .3s ease;
  z-index:10001
  }
  
  .duckier-confirm-overlay.show {
  opacity:1
  }
  
  .duckier-confirm-dialog {
  background:linear-gradient(135deg,#1e1f2efa 0%,#141523fa 100%);
  border:1px solid var(--border-subtle);
  border-radius:16px;
  box-shadow:0 20px 60px #00000080;
  max-width:400px;
  padding:32px;
  text-align:center;
  transform:scale(0.9) translateY(-20px);
  transition:transform .3s cubic-bezier(0.34,1.56,0.64,1);
  width:90%
  }
  
  .duckier-confirm-overlay.show .duckier-confirm-dialog {
  transform:scale(1) translateY(0)
  }
  
  .duckier-confirm-icon {
  align-items:center;
  border-radius:50%;
  display:flex;
  height:64px;
  justify-content:center;
  margin:0 auto 20px;
  width:64px
  }
  
  .duckier-confirm-icon.regenerate {
  background:linear-gradient(135deg,#b14bf433 0%,#fa556033 100%);
  border:1px solid #b14bf44d;
  color:#b14bf4
  }
  
  .duckier-confirm-title {
  color:var(--text-primary);
  font-size:1.25rem;
  font-weight:600;
  margin:0 0 12px
  }
  
  .duckier-confirm-message {
  color:var(--text-secondary);
  font-size:.95rem;
  line-height:1.5;
  margin:0 0 28px
  }
  
  .duckier-confirm-buttons {
  display:flex;
  gap:12px
  }
  
  .duckier-confirm-btn {
  border:none;
  border-radius:10px;
  cursor:pointer;
  flex:1;
  font-size:.9rem;
  font-weight:600;
  padding:12px 20px;
  transition:all .2s ease
  }
  
  .duckier-confirm-cancel {
  background:#ffffff1a;
  border:1px solid var(--border-subtle);
  color:var(--text-primary)
  }
  
  .duckier-confirm-cancel:hover {
  background:#ffffff26;
  border-color:var(--text-faint)
  }
  
  .duckier-confirm-regenerate {
  background:linear-gradient(135deg,#b14bf4 0%,#fa5560 100%);
  color:var(--text-primary)
  }
  
  .duckier-confirm-regenerate:hover {
  box-shadow:0 4px 15px #b14bf466;
  transform:translateY(-2px)
  }
  
  .info-tooltip {
  align-items:center;
  color:var(--text-muted);
  cursor:help;
  display:inline-flex;
  height:16px;
  justify-content:center;
  margin-left:6px;
  position:relative;
  transition:color .2s;
  width:16px
  }
  
  .info-tooltip:hover {
  color:#b14bf4
  }
  
  .info-tooltip .tooltip-text {
  background:linear-gradient(135deg,#1e1f2efa 0%,#141523fa 100%);
  border:1px solid #b14bf44d;
  border-radius:8px;
  box-shadow:0 8px 24px #0006;
  color:var(--text-primary);
  font-size:12px;
  font-weight:400;
  left:50%;
  line-height:1.4;
  max-width:320px;
  min-width:220px;
  opacity:0;
  padding:10px 14px;
  position:absolute;
  text-align:left;
  top:calc(100% + 8px);
  transform:translateX(-50%);
  transition:opacity 0.2s,visibility .2s;
  visibility:hidden;
  white-space:normal;
  width:max-content;
  z-index:1000
  }
  
  .info-tooltip .tooltip-text::after {
  border:6px solid transparent;
  border-bottom-color:#b14bf44d;
  bottom:100%;
  content:'';
  left:50%;
  position:absolute;
  transform:translateX(-50%)
  }
  
  .info-tooltip:hover .tooltip-text {
  opacity:1;
  visibility:visible
  }
  
  .input-error {
  border-color:#ef4444!important
  }
  
  .input-error:focus {
  border-color:#ef4444!important;
  box-shadow:0 0 0 3px #ef444426!important
  }
  
  .input-success {
  border-color:#10b981!important
  }
  
  .input-success:focus {
  border-color:#10b981!important;
  box-shadow:0 0 0 3px #10b98126!important
  }
  
  .field-error {
  align-items:center;
  animation:fieldErrorIn .2s ease;
  color:#f87171;
  display:flex;
  font-size:12px;
  gap:6px;
  margin-top:8px
  }
  
  .field-error svg {
  flex-shrink:0
  }
  
  @keyframes fieldErrorIn {
  from {
  opacity:0;
  transform:translateY(-4px)
  }
  
  to {
  opacity:1;
  transform:translateY(0)
  }
  }
  
  .field-success {
  align-items:center;
  animation:fieldErrorIn .2s ease;
  color:#10b981;
  display:flex;
  font-size:12px;
  gap:6px;
  margin-top:8px
  }
  
  .field-success svg {
  flex-shrink:0
  }
  
  .password-requirements-inline {
  align-items:center;
  color:var(--text-muted);
  display:flex;
  font-size:11px;
  gap:6px;
  margin-top:8px
  }
  
  .password-requirements-inline svg {
  flex-shrink:0;
  opacity:.6
  }
  
  .api-mini-btn {
  align-items:center;
  background:#ffffff0d;
  border:1px solid var(--border-subtle);
  border-radius:6px;
  color:var(--text-secondary);
  display:inline-flex;
  font-size:11px;
  font-weight:500;
  gap:5px;
  padding:6px 10px;
  text-decoration:none;
  transition:all .2s ease
  }
  
  .api-mini-btn:hover {
  background:#b14bf426;
  border-color:#b14bf466;
  color:var(--text-primary);
  text-decoration:none
  }
  
  .api-mini-btn svg {
  opacity:.7
  }
  
  .api-mini-btn:hover svg {
  opacity:1
  }
  
  .settings-toggle {
  height:24px;
  position:relative;
  width:44px
  }
  
  .settings-toggle input {
  height:0;
  opacity:0;
  width:0
  }
  
  .settings-toggle .toggle-slider {
  background:#ffffff1a;
  border:1px solid var(--border-subtle);
  border-radius:24px;
  bottom:0;
  cursor:pointer;
  left:0;
  position:absolute;
  right:0;
  top:0;
  transition:all .3s ease
  }
  
  .settings-toggle .toggle-slider:before {
  background:#ffffff80;
  border-radius:50%;
  bottom:2px;
  content:"";
  height:18px;
  left:2px;
  position:absolute;
  transition:all .3s ease;
  width:18px
  }
  
  .settings-toggle input:checked + .toggle-slider {
  background:#ffffff4d;
  border-color:var(--text-muted)
  }
  
  .settings-toggle input:checked + .toggle-slider:before {
  background:#fff;
  box-shadow:0 1px 3px #0003;
  transform:translateX(20px)
  }
  
  .settings-toggle:hover .toggle-slider {
  border-color:var(--text-faint)
  }
  
  .settings-toggle:hover .toggle-slider:before {
  background:#ffffffb3
  }
  
  .settings-toggle input:checked:hover + .toggle-slider:before {
  background:#fff
  }
  
  .copy-url-container {
  align-items:center;
  background:#0000004d;
  border:1px solid var(--border-subtle);
  border-radius:8px;
  cursor:pointer;
  display:flex;
  max-width:100%;
  overflow:hidden;
  transition:all .2s ease
  }
  
  .copy-url-container:hover {
  background:#0006;
  border-color:#b14bf466
  }
  
  .copy-url-container.copied {
  background:#b14bf41a;
  border-color:#b14bf499
  }
  
  .copy-url-input {
  background:transparent;
  border:none;
  color:var(--text-secondary);
  cursor:pointer;
  flex:1;
  font-family:monospace;
  font-size:13px;
  min-width:0;
  outline:none;
  padding:12px 14px;
  pointer-events:none
  }
  
  .copy-url-btn {
  align-items:center;
  background:transparent;
  border:none;
  border-left:1px solid var(--border-subtle);
  color:var(--text-secondary);
  cursor:pointer;
  display:inline-flex;
  justify-content:center;
  padding:0 12px;
  transition:color .2s ease
  }
  
  .copy-url-btn:hover {
  color:#b14bf4
  }
  
  .copy-url-btn.copied {
  color:#10b981
  }
  
  .config-section .duckier-input-text,.config-section select.duckier-input-text {
  background-color:#111116!important;
  border:1px solid var(--border-subtle)!important;
  width:100%
  }
  
  @media (max-width: 767px) {
  .config-row {
  align-items:center;
  flex-direction:column;
  gap:8px
  }
  
  .config-row .config-label {
  justify-content:center;
  text-align:center
  }
  
  .config-row .config-value {
  display:flex;
  justify-content:center;
  width:100%!important
  }
  
  .config-row .config-value .input-wrapper {
  width:100%!important
  }
  
  .config-row .config-value .settings-toggle {
  margin:0 auto
  }
  
  .config-section .duckier-input-text,.config-section select.duckier-input-text,.config-section input[type="text"],.config-section input[type="password"] {
  box-sizing:border-box!important;
  flex:none!important;
  max-width:100%!important;
  min-width:0!important;
  width:100%!important
  }
  
  .config-section {
  overflow:hidden
  }
  }
  
  @media (min-width: 768px) {
  .config-section .duckier-input-text,.config-section select.duckier-input-text {
  flex:none!important;
  min-width:250px!important;
  width:250px!important
  }
  }
  
  .config-section .duckier-input-text:hover,.config-section .duckier-input-text:focus,.config-section select.duckier-input-text:hover,.config-section select.duckier-input-text:focus {
  border-color:#b14bf466!important
  }
  
  .config-section select.duckier-input-text option {
  background-color:#111116;
  color:#efefef
  }
  
  #premium_key_input {
  background:#0000004d;
  border:1px solid var(--border-subtle)
  }
  
  #premium_key_input:hover,#premium_key_input:focus {
  background:#0006;
  border-color:#b14bf466
  }
  
  #premium_key_input + .duckier-input-btn {
  background:#ffffff1a;
  border:1px solid var(--border-subtle);
  border-left:none;
  color:var(--text-primary)
  }
  
  #premium_key_input + .duckier-input-btn:hover {
  background:#ffffff2e;
  border-color:var(--border-subtle)
  }
  
  .couponique-modal {
  align-items:center;
  animation:fadeIn .2s ease;
  backdrop-filter:blur(4px);
  background:#000c;
  display:none;
  height:100%;
  justify-content:center;
  left:0;
  position:fixed;
  top:0;
  width:100%;
  z-index:10000
  }
  
  .couponique-modal.active {
  display:flex
  }
  
  .couponique-modal-content {
  animation:slideUp .3s ease;
  background:linear-gradient(135deg,#1e1e28fa 0%,#14141efa 100%);
  border:1px solid #b14bf44d;
  border-radius:16px;
  box-shadow:0 20px 60px #00000080 0 0 40px #b14bf41a;
  max-width:800px;
  padding:32px;
  position:relative;
  width:90%
  }
  
  @keyframes slideUp {
  from {
  opacity:0;
  transform:translateY(20px)
  }
  
  to {
  opacity:1;
  transform:translateY(0)
  }
  }
  
  .couponique-modal-close {
  align-items:center;
  background:#ffffff1a;
  border:none;
  border-radius:50%;
  color:var(--text-secondary);
  cursor:pointer;
  display:flex;
  font-size:24px;
  height:36px;
  justify-content:center;
  position:absolute;
  right:16px;
  top:16px;
  transition:all .2s;
  width:36px
  }
  
  .couponique-modal-close:hover {
  background:#fff3;
  color:var(--text-primary)
  }
  
  .couponique-modal-header {
  align-items:center;
  display:flex;
  gap:12px;
  margin-bottom:12px
  }
  
  .couponique-modal-header span {
  color:var(--text-primary);
  font-size:1.25rem;
  font-weight:700
  }
  
  .couponique-modal-desc {
  color:var(--text-secondary);
  font-size:14px;
  margin-bottom:24px
  }
  
  .couponique-grid {
  display:grid;
  gap:12px;
  grid-template-columns:repeat(3,1fr)
  }
  
  @media (max-width: 768px) {
  .couponique-grid {
  grid-template-columns:1fr
  }
  }
  
  .couponique-btn {
  align-items:center;
  background:#ffffff08;
  border:1px solid var(--border-subtle);
  border-radius:12px;
  display:flex;
  gap:12px;
  padding:16px 20px;
  text-decoration:none;
  transition:all .3s ease
  }
  
  .couponique-btn:hover {
  background:#b14bf426;
  border-color:#b14bf480;
  box-shadow:0 4px 16px #b14bf433;
  text-decoration:none;
  transform:translateY(-2px)
  }
  
  .couponique-logo {
  flex-shrink:0;
  height:56px;
  object-fit:contain;
  width:80px
  }
  
  .couponique-content {
  flex:1;
  text-align:center
  }
  
  .couponique-days {
  color:var(--text-primary);
  font-size:1.1rem;
  font-weight:700;
  margin-bottom:2px
  }
  
  .couponique-price {
  color:var(--text-secondary);
  font-size:.85rem
  }
  
  .duckier-toast {
  backdrop-filter:blur(10px);
  background:linear-gradient(135deg,#1e1e28f2 0%,#14141ef2 100%);
  border:1px solid var(--border-subtle);
  border-radius:12px;
  box-shadow:0 10px 40px #0006 0 0 20px #b14bf41a;
  max-width:420px;
  min-width:320px;
  opacity:0;
  padding:16px 20px;
  position:fixed;
  right:20px;
  top:20px;
  transform:translateX(100%);
  transition:all .4s cubic-bezier(0.68,-0.55,0.265,1.55);
  z-index:10000
  }
  
  .duckier-toast.show {
  opacity:1;
  transform:translateX(0)
  }
  
  .duckier-toast-header {
  align-items:center;
  display:flex;
  gap:10px;
  margin-bottom:8px
  }
  
  .duckier-toast-icon {
  align-items:center;
  border-radius:50%;
  display:flex;
  height:24px;
  justify-content:center;
  width:24px
  }
  
  .duckier-toast-icon.warning {
  background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%)
  }
  
  .duckier-toast-icon.success {
  background:linear-gradient(135deg,#10b981 0%,#059669 100%)
  }
  
  .duckier-toast-icon.error {
  background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%)
  }
  
  .duckier-toast-icon.info {
  background:linear-gradient(135deg,#b14bf4 0%,#fa5560 100%)
  }
  
  .duckier-toast-title {
  color:var(--text-primary);
  font-size:14px;
  font-weight:600
  }
  
  .duckier-toast-message {
  color:var(--text-secondary);
  font-size:13px;
  line-height:1.5
  }
  
  .duckier-toast-close {
  background:none;
  border:none;
  color:var(--text-muted);
  cursor:pointer;
  padding:4px;
  position:absolute;
  right:12px;
  top:12px;
  transition:color .2s
  }
  
  .duckier-toast-close:hover {
  color:var(--text-secondary)
  }
  
  .duckier-toast-progress {
  animation:toastProgress 4s linear forwards;
  background:linear-gradient(90deg,#b14bf4,#fa5560);
  border-radius:0 0 12px 12px;
  bottom:0;
  height:3px;
  left:0;
  position:absolute
  }
  
  @keyframes toastProgress {
  from {
  width:100%
  }
  
  to {
  width:0
  }
  }
  
  .profit-mode-grid {
  display:grid;
  gap:16px;
  grid-template-columns:repeat(3,1fr);
  margin:0 auto;
  max-width:900px
  }
  
  @media (max-width: 768px) {
  .profit-mode-grid {
  grid-template-columns:1fr
  }
  }
  
  .profit-mode-card {
  cursor:pointer;
  position:relative
  }
  
  .profit-mode-card-inner {
  align-items:center;
  background:#ffffff08;
  border:2px solid var(--border-subtle);
  border-radius:16px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:220px;
  padding:24px 16px;
  text-align:center;
  transition:all .3s ease
  }
  
  .profit-mode-card:hover .profit-mode-card-inner {
  background:#b14bf40d;
  border-color:#b14bf466;
  box-shadow:0 8px 24px #0000004d;
  transform:translateY(-4px)
  }
  
  .profit-mode-card-inner.selected {
  background:linear-gradient(135deg,#b14bf433 0%,#fa556033 100%);
  border-color:#b14bf499;
  box-shadow:0 8px 32px #b14bf440
  }
  
  .profit-mode-card-inner.selected .profit-mode-icon {
  color:#b14bf4;
  opacity:1
  }
  
  .profit-mode-card-inner.selected .profit-mode-rate {
  background:#b14bf44d;
  color:var(--text-primary)
  }
  
  .profit-mode-icon {
  color:var(--text-secondary);
  margin-bottom:16px;
  opacity:.6
  }
  
  .profit-mode-title {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(135deg,#b14bf4 0%,#fa5560 100%);
  background-clip:text;
  font-size:1.5rem;
  font-weight:700;
  margin-bottom:8px
  }
  
  .profit-mode-desc {
  color:var(--text-muted);
  font-size:13px;
  margin-bottom:16px
  }
  
  .profit-mode-rate {
  background:#ffffff1a;
  border-radius:50px;
  color:var(--text-secondary);
  font-size:12px;
  font-weight:600;
  padding:8px 16px
  }
  
  .profit-modal {
  align-items:center;
  backdrop-filter:blur(4px);
  background:#000c;
  display:none;
  height:100%;
  justify-content:center;
  left:0;
  position:fixed;
  top:0;
  width:100%;
  z-index:10000
  }
  
  .profit-modal.active {
  display:flex
  }
  
  .profit-modal-content {
  animation:slideUp .3s ease;
  background:linear-gradient(135deg,#1e1e28fa 0%,#14141efa 100%);
  border:1px solid #b14bf44d;
  border-radius:16px;
  box-shadow:0 20px 60px #00000080 0 0 40px #b14bf41a;
  max-width:900px;
  padding:32px;
  position:relative;
  width:95%
  }
  
  .profit-modal-close {
  align-items:center;
  background:#ffffff1a;
  border:none;
  border-radius:50%;
  color:var(--text-secondary);
  cursor:pointer;
  display:flex;
  font-size:24px;
  height:36px;
  justify-content:center;
  position:absolute;
  right:16px;
  top:16px;
  transition:all .2s;
  width:36px
  }
  
  .profit-modal-close:hover {
  background:#fff3;
  color:var(--text-primary)
  }
  
  .profit-modal-header {
  margin-bottom:24px;
  text-align:center
  }
  
  .profit-modal-header h3 {
  color:var(--text-primary);
  font-size:1.5rem;
  font-weight:700;
  margin-bottom:8px
  }
  
  .profit-modal-header p {
  color:var(--text-secondary);
  font-size:14px
  }
  
  .profit-mode-btn {
  align-items:center;
  background:linear-gradient(135deg,#b14bf41a 0%,#fa55601a 100%);
  border:1px solid #b14bf44d;
  border-radius:12px;
  cursor:pointer;
  display:inline-flex;
  gap:20px;
  padding:16px 24px;
  position:relative;
  transition:all .3s ease
  }
  
  .profit-mode-btn:hover {
  background:linear-gradient(135deg,#b14bf433 0%,#fa556033 100%);
  border-color:#b14bf480;
  transform:translateY(-2px)
  }
  
  .profit-mode-btn::after {
  background:#14141ef2;
  border:1px solid #b14bf44d;
  border-radius:6px;
  bottom:calc(100% + 10px);
  color:var(--text-primary);
  content:'Click to change Profit Mode';
  font-size:12px;
  font-weight:500;
  left:50%;
  opacity:0;
  padding:8px 12px;
  pointer-events:none;
  position:absolute;
  transform:translateX(-50%) translateY(5px);
  transition:all .2s ease;
  visibility:hidden;
  white-space:nowrap;
  z-index:100
  }
  
  .profit-mode-btn::before {
  border:6px solid transparent;
  border-top-color:#b14bf44d;
  bottom:calc(100% + 4px);
  content:'';
  left:50%;
  opacity:0;
  position:absolute;
  transform:translateX(-50%);
  transition:all .2s ease;
  visibility:hidden;
  z-index:100
  }
  
  .profit-mode-btn:hover::after,.profit-mode-btn:hover::before {
  opacity:1;
  transform:translateX(-50%) translateY(0);
  visibility:visible
  }
  
  .profit-mode-btn:hover::before {
  transform:translateX(-50%)
  }
  
  @media (max-width: 767px) {
  .profit-mode-btn {
  box-sizing:border-box!important;
  display:flex!important;
  justify-content:center!important;
  max-width:100%!important;
  width:100%!important
  }
  
  .profit-mode-wrapper {
  display:block!important;
  max-width:100%!important;
  width:100%!important
  }
  
  .config-section .profit-mode-wrapper,.config-section > div > .profit-mode-wrapper {
  width:100%!important
  }
  }
  
  .premium-badge {
  align-items:center;
  background:linear-gradient(135deg,#b14bf44d 0%,#fa55604d 100%);
  border:1px solid #b14bf466;
  border-radius:12px;
  color:var(--text-primary);
  display:inline-flex;
  font-size:10px;
  font-weight:600;
  gap:4px;
  letter-spacing:.5px;
  margin-left:8px;
  padding:2px 8px;
  text-decoration:none;
  text-transform:uppercase;
  transition:all .2s ease
  }
  
  .premium-badge:hover {
  background:linear-gradient(135deg,#b14bf473 0%,#fa556073 100%);
  border-color:#b14bf499;
  color:var(--text-primary)
  }
  
  .settings-toggle.disabled {
  cursor:not-allowed;
  opacity:.5
  }
  
  .settings-toggle.disabled .toggle-slider {
  cursor:not-allowed
  }
  
  .profit-mode-btn-info {
  align-items:center;
  display:flex;
  gap:12px
  }
  
  .profit-mode-btn-icon {
  align-items:center;
  background:linear-gradient(135deg,#b14bf44d 0%,#fa55604d 100%);
  border-radius:10px;
  color:#b14bf4;
  display:flex;
  height:40px;
  justify-content:center;
  width:40px
  }
  
  .profit-mode-btn-text {
  text-align:left
  }
  
  .profit-mode-btn-label {
  color:var(--text-primary);
  font-size:15px;
  font-weight:600;
  margin-bottom:2px
  }
  
  .profit-mode-btn-current {
  color:var(--text-muted);
  font-size:13px
  }
  
  .profit-mode-btn-current span {
  color:#b14bf4;
  font-weight:600
  }
  
  .profit-mode-btn-arrow {
  color:var(--text-muted)
  }
  
  .profit-mode-wrapper {
  align-items:center;
  display:flex;
  gap:0
  }
  
  .affiliate-info-link {
  align-items:center;
  background:#ffffff14;
  border:1px solid var(--border-subtle);
  border-radius:8px;
  color:var(--text-secondary);
  display:inline-flex;
  font-size:13px;
  font-weight:500;
  gap:8px;
  opacity:0;
  padding:10px 16px;
  pointer-events:none;
  text-decoration:none;
  transform:translateX(-20px);
  transition:all .3s ease;
  white-space:nowrap
  }
  
  .profit-mode-wrapper:hover .affiliate-info-link {
  margin-left:16px;
  opacity:1;
  pointer-events:auto;
  transform:translateX(0)
  }
  
  .affiliate-info-link:hover {
  background:#ffffff1f;
  border-color:var(--text-faint);
  color:var(--text-primary)
  }
  
  .settings-grid {
  align-items:start;
  display:grid;
  gap:16px;
  grid-template-columns:1fr 1fr
  }
  
  .settings-column {
  display:flex;
  flex-direction:column;
  gap:16px
  }
  
  @media (max-width: 1024px) {
  .settings-grid {
  grid-template-columns:1fr
  }
  }
  
  .settings-grid .config-section:last-child {
  margin-bottom:0
  }
  
  .settings-full-width {
  grid-column:1 / -1
  }
  
  .config-section {
  background:#ffffff05;
  border:1px solid var(--border-subtle);
  border-radius:12px;
  margin-bottom:0;
  padding:20px
  }
  
  .config-section-title {
  border-bottom:1px solid var(--border-subtle);
  color:var(--text-muted);
  font-size:12px;
  font-weight:600;
  letter-spacing:.5px;
  margin-bottom:16px;
  padding-bottom:8px;
  text-transform:uppercase
  }
  
  .config-row {
  align-items:center;
  border-bottom:1px solid var(--border-subtle);
  display:flex;
  justify-content:space-between;
  padding:12px 0
  }
  
  .config-row:last-child {
  border-bottom:none
  }
  
  .config-label {
  align-items:center;
  color:var(--text-secondary);
  display:flex;
  font-size:14px;
  gap:10px
  }
  
  .config-icon {
  flex-shrink:0;
  opacity:.5
  }
  
  .config-value {
  align-items:center;
  display:flex;
  gap:12px;
  justify-content:flex-end
  }
  
  .config-value .duckier-input-text,.config-value .input-wrapper {
  max-width:300px!important;
  width:300px!important
  }
  
  .account-tabs {
  background:#ffffff05;
  border-bottom:none!important;
  border-radius:10px;
  gap:6px!important;
  margin-bottom:8px;
  padding:4px
  }
  
  .account-tabs li {
  border-bottom:none!important;
  border-radius:6px;
  padding:10px 16px!important;
  transition:all .2s ease
  }
  
  .account-tabs li:hover {
  background:#ffffff0d
  }
  
  .account-tabs li.duckier-tab-active {
  background:#ffffff0a;
  color:var(--text-primary)
  }
  
  a[name="request_money"].duckier-btn-secondary {
  background:#ffffff1a!important;
  border:1px solid var(--border-subtle)!important;
  box-shadow:none!important
  }
  
  a[name="request_money"].duckier-btn-secondary::before,a[name="request_money"].duckier-btn-secondary::after {
  display:none!important
  }
  
  a[name="request_money"].duckier-btn-secondary:hover {
  background:#ffffff2e!important;
  border-color:var(--text-faint)!important
  }
  
  .upgrade-premium-btn {
  align-items:center;
  background:linear-gradient(135deg,#b14bf426 0%,#fa556026 100%);
  border:1px solid #b14bf44d;
  border-radius:20px;
  color:var(--text-primary);
  display:inline-flex;
  font-size:13px;
  font-weight:600;
  gap:8px;
  padding:8px 16px;
  text-decoration:none;
  transition:all .3s ease
  }
  
  .upgrade-premium-btn:hover {
  background:linear-gradient(135deg,#b14bf440 0%,#fa556040 100%);
  border-color:#b14bf480;
  box-shadow:0 4px 12px #b14bf433;
  color:var(--text-primary);
  transform:translateY(-1px)
  }
  
  .traffic-progress-bar-styled {
  background:var(--color-duckier-gradient,linear-gradient(90deg,#fa5560,#b14bf4,#4d91ff));
  transition:width .5s ease
  }
  
  .progress-percentage {
  color:var(--text-primary);
  font-size:10px;
  font-weight:600;
  position:absolute;
  right:8px;
  text-shadow:0 1px 2px #0000004d;
  top:50%;
  transform:translateY(-50%)
  }
  
  .duckier-toast {
  background:linear-gradient(135deg,#1e1f2efa 0%,#141523fa 100%);
  border:1px solid var(--border-subtle);
  border-radius:12px;
  box-shadow:0 10px 40px #0006;
  max-width:420px;
  min-width:320px;
  opacity:0;
  padding:16px 20px;
  position:fixed;
  right:20px;
  top:20px;
  transform:translateX(100%);
  transition:all .4s cubic-bezier(0.68,-0.55,0.265,1.55);
  z-index:10000
  }
  
  .duckier-toast.show {
  opacity:1;
  transform:translateX(0)
  }
  
  .duckier-toast-header {
  align-items:center;
  display:flex;
  gap:10px;
  margin-bottom:8px
  }
  
  .duckier-toast-icon {
  align-items:center;
  border-radius:50%;
  display:flex;
  height:24px;
  justify-content:center;
  width:24px
  }
  
  .duckier-toast-icon.warning {
  background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%)
  }
  
  .duckier-toast-icon.success {
  background:linear-gradient(135deg,#10b981 0%,#059669 100%)
  }
  
  .duckier-toast-icon.error {
  background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%)
  }
  
  .duckier-toast-icon.info {
  background:linear-gradient(135deg,#b14bf4 0%,#fa5560 100%)
  }
  
  .duckier-toast-title {
  color:var(--text-primary);
  font-size:14px;
  font-weight:600
  }
  
  .duckier-toast-message {
  color:var(--text-secondary);
  font-size:13px;
  line-height:1.5
  }
  
  .duckier-toast-close {
  background:none;
  border:none;
  color:var(--text-muted);
  cursor:pointer;
  padding:4px;
  position:absolute;
  right:12px;
  top:12px;
  transition:color .2s
  }
  
  .duckier-toast-close:hover {
  color:var(--text-secondary)
  }
  
  .duckier-toast-progress {
  animation:toastProgress 4s linear forwards;
  background:linear-gradient(90deg,#b14bf4,#fa5560);
  border-radius:0 0 12px 12px;
  bottom:0;
  height:3px;
  left:0;
  position:absolute
  }
  
  @keyframes toastProgress {
  from {
  width:100%
  }
  
  to {
  width:0
  }
  }
  
  .duckier-confirm-overlay {
  align-items:center;
  backdrop-filter:blur(4px);
  background:#000000b3;
  bottom:0;
  display:flex;
  justify-content:center;
  left:0;
  opacity:0;
  position:fixed;
  right:0;
  top:0;
  transition:opacity .3s ease;
  z-index:10001
  }
  
  .duckier-confirm-overlay.show {
  opacity:1
  }
  
  .duckier-confirm-dialog {
  background:linear-gradient(135deg,#1e1f2efa 0%,#141523fa 100%);
  border:1px solid var(--border-subtle);
  border-radius:16px;
  box-shadow:0 20px 60px #00000080;
  max-width:400px;
  padding:32px;
  text-align:center;
  transform:scale(0.9) translateY(-20px);
  transition:transform .3s cubic-bezier(0.34,1.56,0.64,1);
  width:90%
  }
  
  .duckier-confirm-overlay.show .duckier-confirm-dialog {
  transform:scale(1) translateY(0)
  }
  
  .duckier-confirm-icon {
  align-items:center;
  background:linear-gradient(135deg,#ef444433 0%,#dc262633 100%);
  border:1px solid #ef44444d;
  border-radius:50%;
  color:#ef4444;
  display:flex;
  height:64px;
  justify-content:center;
  margin:0 auto 20px;
  width:64px
  }
  
  .duckier-confirm-title {
  color:var(--text-primary);
  font-size:1.25rem;
  font-weight:600;
  margin:0 0 12px
  }
  
  .duckier-confirm-message {
  color:var(--text-secondary);
  font-size:.95rem;
  line-height:1.5;
  margin:0 0 28px
  }
  
  .duckier-confirm-buttons {
  display:flex;
  gap:12px
  }
  
  .duckier-confirm-btn {
  border:none;
  border-radius:10px;
  cursor:pointer;
  flex:1;
  font-size:.9rem;
  font-weight:600;
  padding:12px 20px;
  transition:all .2s ease
  }
  
  .duckier-confirm-delete {
  background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%);
  color:var(--text-primary)
  }
  
  .duckier-confirm-delete:hover {
  box-shadow:0 4px 15px #ef444466;
  transform:translateY(-2px)
  }
  
  .duckier-confirm-icon.move {
  background:linear-gradient(135deg,#3b82f633 0%,#2563eb33 100%);
  border:1px solid #3b82f64d;
  color:#3b82f6
  }
  
  .duckier-confirm-move {
  background:linear-gradient(135deg,#3b82f6 0%,#2563eb 100%);
  color:var(--text-primary)
  }
  
  .duckier-confirm-move:hover {
  box-shadow:0 4px 15px #3b82f666;
  transform:translateY(-2px)
  }
  
  .duckier-confirm-icon.copy {
  background:linear-gradient(135deg,#10b98133 0%,#05966933 100%);
  border:1px solid #10b9814d;
  color:#10b981
  }
  
  .duckier-confirm-copy {
  background:linear-gradient(135deg,#10b981 0%,#059669 100%);
  color:var(--text-primary)
  }
  
  .duckier-confirm-copy:hover {
  box-shadow:0 4px 15px #10b98166;
  transform:translateY(-2px)
  }
  
  .fm-container {
  width:100%
  }
  
  .fm-files-container::-webkit-scrollbar,.table-responsive::-webkit-scrollbar {
  height:8px;
  width:8px
  }
  
  .fm-files-container::-webkit-scrollbar-track,.table-responsive::-webkit-scrollbar-track {
  background:#ffffff0d;
  border-radius:4px
  }
  
  .fm-files-container::-webkit-scrollbar-thumb,.table-responsive::-webkit-scrollbar-thumb {
  background:#ffffff4d;
  border-radius:4px
  }
  
  .fm-files-container::-webkit-scrollbar-thumb:hover,.table-responsive::-webkit-scrollbar-thumb:hover {
  background:#ffffff80
  }
  
  .fm-files-container,.table-responsive {
  scrollbar-color:var(--text-faint) #ffffff0d;
  scrollbar-width:thin
  }
  
  .fm-header {
  background:#ffffff08;
  border:1px solid var(--border-subtle);
  border-radius:16px;
  margin-bottom:1.5rem;
  overflow:visible;
  padding:1.5rem 2rem
  }
  
  .fm-header-top {
  align-items:center;
  display:flex;
  justify-content:space-between;
  margin-bottom:1rem
  }
  
  .fm-title-icon {
  align-items:center;
  background:#ffffff14;
  border-radius:12px;
  display:flex;
  height:48px;
  justify-content:center;
  width:48px
  }
  
  .fm-title-icon svg {
  color:var(--text-primary);
  height:24px;
  width:24px
  }
  
  .fm-title-text h1 {
  color:var(--text-primary);
  font-size:1.5rem;
  font-weight:700;
  margin:0
  }
  
  .fm-title-text p {
  color:var(--text-secondary);
  font-size:.9rem;
  margin:4px 0 0
  }
  
  .fm-stat-badge {
  align-items:center;
  background:#ffffff1a;
  border:1px solid var(--border-subtle);
  border-radius:10px;
  display:flex;
  gap:10px;
  padding:10px 16px
  }
  
  .fm-stat-badge svg {
  color:var(--text-secondary)
  }
  
  .fm-stat-badge span {
  color:var(--text-primary);
  font-size:.9rem;
  white-space:nowrap
  }
  
  .fm-breadcrumb {
  align-items:center;
  background:#ffffff0d;
  border:1px solid var(--border-subtle);
  border-radius:10px;
  display:flex;
  gap:8px;
  padding:12px 16px
  }
  
  .fm-breadcrumb a,.fm-breadcrumb span {
  align-items:center;
  color:var(--text-secondary);
  display:flex;
  font-size:.9rem;
  gap:6px;
  text-decoration:none;
  transition:all .2s
  }
  
  .fm-breadcrumb .current {
  color:var(--text-primary);
  font-weight:600
  }
  
  .fm-breadcrumb .separator {
  color:var(--text-faint)
  }
  
  .fm-toolbar {
  overflow:visible;
  padding:1rem 1.5rem
  }
  
  .fm-toolbar-row {
  align-items:center;
  display:flex;
  flex-wrap:wrap;
  gap:12px
  }
  
  .fm-toolbar-left {
  align-items:center;
  display:flex;
  flex:1;
  flex-wrap:wrap;
  gap:12px
  }
  
  .fm-search-box {
  align-items:stretch;
  display:flex
  }
  
  .fm-search-box input {
  background:#ffffff0d;
  border:1px solid var(--border-subtle);
  border-radius:8px 0 0 8px;
  border-right:none;
  color:var(--text-primary);
  font-size:.9rem;
  outline:none;
  padding:10px 14px;
  transition:all .2s;
  width:180px
  }
  
  .fm-search-box input:focus {
  background:#b14bf41a;
  border-color:#b14bf4
  }
  
  .fm-search-box input::placeholder {
  color:var(--text-muted)
  }
  
  .fm-search-box button {
  background:linear-gradient(135deg,#f33f5b 0%,#b14bf4 100%);
  border:none;
  border-radius:0 8px 8px 0;
  cursor:pointer;
  padding:10px 16px;
  transition:all .2s
  }
  
  .fm-search-box button:hover {
  opacity:.9;
  transform:translateY(-1px)
  }
  
  .fm-search-box button svg {
  color:var(--text-primary);
  height:18px;
  width:18px
  }
  
  .fm-btn {
  align-items:center;
  border:none;
  border-radius:8px;
  cursor:pointer;
  display:inline-flex;
  font-size:.85rem;
  font-weight:600;
  gap:8px;
  padding:10px 16px;
  text-decoration:none;
  transition:all .2s;
  white-space:nowrap
  }
  
  .fm-btn svg {
  height:16px;
  width:16px
  }
  
  .fm-btn-primary {
  background:linear-gradient(135deg,#f33f5b 0%,#b14bf4 100%);
  color:var(--text-primary)
  }
  
  .fm-btn-primary:hover {
  box-shadow:0 4px 15px #b14bf466;
  transform:translateY(-2px)
  }
  
  .fm-btn-danger {
  background:#dc3545cc;
  border:1px solid #dc3545ff;
  color:var(--text-primary)
  }
  
  .fm-btn-danger:hover {
  background:#dc3545ff
  }
  
  .fm-btn-success {
  background:#28a74533;
  border:1px solid #28a74566;
  color:#5dd879
  }
  
  .fm-btn-success:hover {
  background:#28a7454d
  }
  
  .fm-select {
  background:#ffffff0d;
  border:1px solid var(--border-subtle);
  border-radius:8px;
  color:var(--text-primary);
  cursor:pointer;
  font-size:.85rem;
  min-width:180px;
  outline:none;
  padding:10px 14px
  }
  
  .fm-select:focus {
  border-color:var(--text-muted)
  }
  
  .fm-select option {
  background:#1a1b26;
  color:var(--text-primary)
  }
  
  .fm-more-actions {
  overflow:visible;
  position:relative
  }
  
  .fm-more-btn {
  align-items:center;
  background:#ffffff1a;
  border:1px solid var(--border-subtle);
  border-radius:8px;
  color:var(--text-primary);
  cursor:pointer;
  display:flex;
  font-size:.85rem;
  font-weight:600;
  gap:8px;
  padding:10px 14px;
  transition:all .2s
  }
  
  .fm-more-btn:hover {
  background:#ffffff26
  }
  
  .fm-dropdown {
  background:#1e1f2e;
  border:1px solid var(--border-subtle);
  border-radius:12px;
  box-shadow:0 10px 40px #00000080;
  min-width:220px;
  opacity:0;
  padding:8px;
  position:fixed;
  transform:translateY(-10px);
  transition:opacity 0.2s,visibility 0.2s,transform .2s;
  visibility:hidden;
  z-index:9999
  }
  
  .fm-dropdown-item {
  align-items:center;
  background:none;
  border:none;
  border-radius:8px;
  color:var(--text-secondary);
  cursor:pointer;
  display:flex;
  font-size:.85rem;
  gap:10px;
  padding:10px 14px;
  text-align:left;
  transition:all .15s;
  width:100%
  }
  
  .fm-dropdown-item:hover {
  background:#b14bf433;
  color:var(--text-primary)
  }
  
  .fm-dropdown-item svg {
  height:16px;
  opacity:.7;
  width:16px
  }
  
  .fm-public-link-wrapper {
  position:relative
  }
  
  .fm-public-link-dropdown {
  background:#1e1f2e;
  border:1px solid var(--border-subtle);
  border-radius:12px;
  box-shadow:0 10px 40px #00000080;
  min-width:320px;
  opacity:0;
  padding:16px;
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  transform:translateY(-10px);
  transition:all .2s;
  visibility:hidden;
  z-index:10000
  }
  
  .fm-public-link-dropdown input {
  background:#ffffff0d;
  border:1px solid var(--border-subtle);
  border-radius:8px;
  color:var(--text-primary);
  font-family:monospace;
  font-size:.85rem;
  margin-bottom:12px;
  padding:12px;
  width:100%
  }
  
  .fm-public-link-dropdown input:focus {
  border-color:#b14bf4;
  outline:none
  }
  
  .fm-link-actions {
  display:flex;
  gap:8px
  }
  
  .fm-link-actions button,.fm-link-actions a {
  align-items:center;
  border-radius:8px;
  cursor:pointer;
  display:flex;
  flex:1;
  font-size:.85rem;
  font-weight:600;
  gap:6px;
  justify-content:center;
  padding:10px;
  text-decoration:none;
  transition:all .2s
  }
  
  .fm-copy-btn {
  background:#ffffff1a;
  border:1px solid var(--border-subtle);
  color:var(--text-primary)
  }
  
  .fm-copy-btn.copied {
  background:#28a7454d;
  border-color:#28a74580
  }
  
  .fm-open-btn {
  background:linear-gradient(135deg,#b14bf44d 0%,#fa55604d 100%);
  border:1px solid #b14bf466;
  color:var(--text-primary)
  }
  
  .fm-open-btn:hover {
  background:linear-gradient(135deg,#b14bf480 0%,#fa556080 100%);
  border-color:#b14bf499;
  color:var(--text-primary)
  }
  
  .fm-files-container {
  background:#ffffff05;
  border:1px solid var(--border-subtle);
  border-radius:12px;
  overflow:hidden
  }
  
  .fm-pagination {
  border-top:1px solid var(--border-subtle);
  display:flex;
  justify-content:center;
  padding:1rem 1.5rem
  }
  
  .premium-star {
  color:#FFD700;
  filter:drop-shadow(0 0 3px #ffd70080)
  }
  
  .duckier-confirm-cancel,.fm-btn-secondary {
  background:#ffffff1a;
  border:1px solid var(--border-subtle);
  color:var(--text-primary)
  }
  
  .duckier-confirm-cancel:hover,.fm-btn-secondary:hover,.fm-copy-btn:hover {
  background:#ffffff26;
  border-color:var(--text-faint)
  }
  
  .fm-title,.fm-header-actions {
  align-items:center;
  display:flex;
  gap:12px
  }
  
  .fm-stat-badge strong,.fm-breadcrumb a:hover {
  color:var(--text-primary)
  }
  
  .fm-dropdown.active,.fm-public-link-dropdown.active {
  opacity:1;
  transform:translateY(0);
  visibility:visible
  }
  
  @media (max-width: 992px) {
  .fm-header-top {
  align-items:flex-start;
  flex-direction:column;
  gap:1rem
  }
  
  .fm-header-actions {
  flex-wrap:wrap;
  width:100%
  }
  
  .fm-toolbar-row {
  align-items:stretch;
  flex-direction:column
  }
  
  .fm-toolbar-left {
  justify-content:flex-start;
  width:100%
  }
  
  .fm-search-box {
  flex:1;
  max-width:100%
  }
  
  .fm-search-box input {
  width:100%
  }
  }
  
  @media (max-width: 768px) {
  .fm-header {
  padding:1rem
  }
  
  .fm-header-actions {
  display:grid;
  gap:8px;
  grid-template-columns:repeat(2,1fr)
  }
  
  .fm-public-link-wrapper {
  position:static
  }
  
  .fm-public-link-dropdown {
  bottom:16px;
  left:16px;
  max-width:none;
  min-width:auto;
  position:fixed;
  right:16px;
  top:auto;
  width:auto
  }
  
  .fm-public-link-dropdown input {
  font-size:.8rem;
  padding:10px
  }
  
  .fm-link-actions {
  flex-direction:row
  }
  
  .fm-link-actions button,.fm-link-actions a {
  font-size:.8rem;
  padding:10px 12px
  }
  
  .fm-toolbar {
  padding:.75rem 1rem
  }
  
  .fm-toolbar-row {
  gap:8px
  }
  
  .fm-toolbar-left {
  display:grid;
  gap:8px;
  grid-template-columns:1fr auto
  }
  
  .fm-search-box {
  grid-column:1 / -1
  }
  
  .fm-select {
  flex:1;
  font-size:.75rem;
  min-width:auto;
  padding:8px 10px
  }
  
  .fm-toolbar-left .fm-btn {
  padding:8px 10px
  }
  
  .fm-stat-badge,.fm-btn {
  border-radius:8px;
  font-size:.75rem;
  padding:6px 10px
  }
  
  .fm-stat-badge svg,.fm-btn svg {
  height:14px;
  width:14px
  }
  
  .fm-header-actions > *,.fm-header-actions .fm-public-link-wrapper,.fm-more-actions {
  width:100%
  }
  
  .fm-header-actions .fm-btn,.fm-header-actions .fm-stat-badge,.fm-more-btn {
  justify-content:center;
  width:100%
  }
  }
  
  @media (max-width: 480px) {
  .fm-header {
  padding:.75rem
  }
  
  .fm-title-icon {
  height:40px;
  width:40px
  }
  
  .fm-title-icon svg {
  height:20px;
  width:20px
  }
  
  .fm-title-text h1 {
  font-size:1.25rem
  }
  
  .fm-title-text p {
  font-size:.8rem
  }
  
  .fm-stat-badge,.fm-btn {
  font-size:.7rem;
  gap:4px;
  padding:5px 8px
  }
  
  .fm-stat-badge svg,.fm-btn svg {
  height:12px;
  width:12px
  }
  
  .fm-stat-badge span {
  align-items:center;
  display:flex;
  gap:4px
  }
  
  .fm-breadcrumb {
  font-size:.8rem;
  overflow-x:auto;
  padding:8px 12px
  }
  }
  
  @keyframes spin {
  from {
  transform:rotate(0deg)
  }
  
  to {
  transform:rotate(360deg)
  }
  }
  
  .paging:empty {
  display:none
  }
  
  .edit-modal-overlay {
  align-items:center;
  backdrop-filter:blur(4px);
  background:#000000bf;
  bottom:0;
  display:none;
  justify-content:center;
  left:0;
  padding:20px;
  position:fixed;
  right:0;
  top:0;
  z-index:10000
  }
  
  .edit-modal-overlay.show {
  display:flex
  }
  
  .edit-modal-box {
  animation:editModalSlideUp .25s ease;
  background:linear-gradient(135deg,#1e1e28fa 0%,#14141efa 100%);
  border:1px solid var(--border-subtle);
  border-radius:16px;
  box-shadow:0 20px 60px #00000080;
  max-width:420px;
  width:100%
  }
  
  @keyframes editModalSlideUp {
  from {
  opacity:0;
  transform:translateY(20px)
  }
  
  to {
  opacity:1;
  transform:translateY(0)
  }
  }
  
  .edit-modal-header {
  align-items:center;
  border-bottom:1px solid var(--border-subtle);
  display:flex;
  justify-content:space-between;
  padding:18px 22px
  }
  
  .edit-modal-header h2 {
  color:var(--text-primary);
  font-size:1.1rem;
  font-weight:600;
  margin:0
  }
  
  .edit-modal-close {
  align-items:center;
  background:#ffffff1a;
  border:none;
  border-radius:50%;
  color:var(--text-secondary);
  cursor:pointer;
  display:flex;
  height:32px;
  justify-content:center;
  transition:all .2s;
  width:32px
  }
  
  .edit-modal-close:hover {
  background:#fff3;
  color:var(--text-primary)
  }
  
  .edit-modal-body {
  padding:22px
  }
  
  .edit-modal-field {
  margin-bottom:16px
  }
  
  .edit-modal-field:last-child {
  margin-bottom:0
  }
  
  .edit-modal-field label {
  color:var(--text-secondary);
  display:block;
  font-size:.85rem;
  margin-bottom:6px
  }
  
  .edit-modal-field input,.edit-modal-field textarea {
  width:100%
  }
  
  .edit-modal-toggle {
  align-items:center;
  display:flex;
  justify-content:space-between;
  padding:8px 0
  }
  
  .edit-modal-toggle span {
  color:var(--text-primary);
  font-size:.9rem
  }
  
  .edit-modal-footer {
  border-top:1px solid var(--border-subtle);
  display:flex;
  gap:10px;
  justify-content:flex-end;
  padding:16px 22px
  }
  
  .deleted-files-container {
  background:#ffffff08;
  border:1px solid var(--border-subtle);
  border-radius:12px;
  margin:2rem auto;
  max-width:1600px;
  padding:1.5rem
  }
  
  @media (max-width: 768px) {
  .deleted-files-container {
  border-radius:8px;
  margin:1rem;
  padding:1rem
  }
  
  .deleted-files-container h2 {
  font-size:1.4rem
  }
  
  .deleted-files-table {
  -webkit-overflow-scrolling:touch;
  display:block;
  overflow-x:auto
  }
  
  .deleted-files-table th,.deleted-files-table td {
  font-size:12px;
  padding:10px 8px;
  white-space:nowrap
  }
  
  .file-code {
  font-size:10px;
  padding:3px 6px
  }
  
  .filter-btn {
  font-size:12px;
  padding:.5rem .8rem
  }
  
  .info-box {
  padding:.6rem 1rem
  }
  
  .info-box p {
  font-size:12px
  }
  }
  
  .deleted-files-container h2 {
  color:var(--text-primary);
  font-size:1.8rem;
  font-weight:600;
  margin-bottom:1.5rem;
  text-align:center
  }
  
  .hide-button-wrapper {
  margin-bottom:1.5rem;
  text-align:center
  }
  
  .btn-hide {
  align-items:center;
  background:#ffffff1a;
  border:1px solid var(--border-subtle);
  border-radius:8px;
  color:var(--text-secondary);
  cursor:pointer;
  display:inline-flex;
  font-size:14px;
  font-weight:600;
  gap:8px;
  padding:12px 28px;
  transition:all .2s ease
  }
  
  .btn-hide:hover {
  background:#ef444433;
  border-color:#ef444466;
  color:var(--text-primary)
  }
  
  .info-box {
  background:#ff8c001a;
  border-left:4px solid #ff8c00;
  border-radius:6px;
  margin:1.5rem auto;
  max-width:700px;
  padding:.75rem 1.25rem
  }
  
  .info-box .icon {
  display:inline-block;
  font-size:16px;
  margin-right:8px
  }
  
  .info-box p {
  color:var(--text-secondary);
  font-size:13px;
  font-weight:500;
  line-height:1.5;
  margin:0
  }
  
  .deleted-files-table {
  background:#ffffff05;
  border-collapse:collapse;
  border-radius:8px;
  overflow:hidden;
  width:100%
  }
  
  .deleted-files-table th {
  border-bottom:1px solid var(--border-subtle);
  color:var(--text-secondary);
  font-size:14px;
  font-weight:600;
  letter-spacing:.5px;
  padding:14px 12px;
  text-align:left;
  text-transform:uppercase
  }
  
  .deleted-files-table td {
  border-bottom:1px solid var(--border-subtle);
  color:var(--text-secondary);
  font-size:13px;
  padding:12px
  }
  
  .file-code {
  background:#ffffff1a;
  border:1px solid var(--border-subtle);
  border-radius:4px;
  color:var(--text-primary);
  font-family:'Courier New',monospace;
  font-size:12px;
  padding:4px 8px
  }
  
  .deleted-ago {
  color:#ff9696cc;
  font-weight:500
  }
  
  .reason-text {
  color:var(--text-muted);
  font-size:13px;
  font-style:italic
  }
  
  .filter-container {
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  justify-content:center;
  margin:1.5rem 0
  }
  
  .filter-btn {
  background:#ffffff0d;
  border:1px solid var(--border-subtle);
  border-radius:6px;
  color:var(--text-secondary);
  cursor:pointer;
  display:inline-block;
  font-size:14px;
  font-weight:500;
  padding:.6rem 1.2rem;
  text-decoration:none;
  transition:all .2s ease
  }
  
  .filter-btn:hover {
  background:#ffffff1a;
  border-color:var(--text-muted);
  color:var(--text-primary)
  }
  
  .filter-btn.active {
  background:#ffffff26;
  border-color:var(--text-faint);
  color:var(--text-primary);
  font-weight:600
  }
  
  .filter-btn .icon {
  margin-right:5px
  }
  
  .pagination-wrapper {
  align-items:center;
  display:flex;
  flex-wrap:wrap;
  gap:.25rem;
  justify-content:center;
  margin-top:2rem;
  margin-top:1rem;
  padding:1rem;
  padding:.5rem 0;
  text-align:center
  }
  
  .pagination-wrapper a,.pagination-wrapper span,.pagination-wrapper b {
  align-items:center;
  background:#ffffff0d;
  background:#ffffff0d;
  border:1px solid var(--border-subtle);
  border:1px solid var(--border-subtle);
  border-radius:5px;
  border-radius:5px;
  color:var(--text-secondary);
  color:var(--text-secondary);
  display:inline-block;
  display:inline-flex;
  font-size:.95rem;
  font-size:.85rem;
  font-weight:500;
  font-weight:500;
  justify-content:center;
  line-height:1;
  margin:0 .2rem;
  min-width:40px;
  min-width:32px;
  padding:.6rem .9rem;
  padding:.35rem .6rem;
  text-align:center;
  text-align:center;
  text-decoration:none;
  text-decoration:none;
  transition:all .15s ease;
  transition:all .15s ease;
  vertical-align:middle;
  white-space:nowrap
  }
  
  .pagination-wrapper a:hover {
  background:#ffffff26;
  background:linear-gradient(81.02deg,#f33f5b -23.47%,#b14bf4 45.52%,#3b82f6 114.8%);
  border-color:var(--text-faint);
  border-color:transparent;
  color:var(--text-primary);
  color:#fff!important
  }
  
  .pagination-wrapper b {
  background:#fff3;
  background:linear-gradient(81.02deg,#f33f5b -23.47%,#b14bf4 45.52%,#3b82f6 114.8%);
  border-color:var(--text-faint);
  border-color:transparent;
  color:var(--text-primary);
  color:#fff!important;
  font-weight:600;
  font-weight:600
  }
  
  .pagination-wrapper span {
  border:none;
  border:none;
  color:var(--text-muted);
  color:var(--text-faint);
  padding:.6rem .4rem;
  padding:.35rem .3rem
  }
  
  .pagination-wrapper span.disabled {
  background:#ffffff05;
  background:#ffffff05;
  border:1px solid var(--border-subtle);
  border:1px solid var(--border-subtle);
  color:var(--text-faint);
  color:var(--text-muted);
  cursor:not-allowed;
  cursor:not-allowed
  }
  
  .confirm-modal-overlay {
  align-items:center;
  backdrop-filter:blur(4px);
  background:#000000b3;
  bottom:0;
  display:none;
  justify-content:center;
  left:0;
  position:fixed;
  right:0;
  top:0;
  z-index:10000
  }
  
  .confirm-modal {
  background:#1e1f2e;
  border:1px solid var(--border-subtle);
  border-radius:16px;
  box-shadow:0 20px 60px #00000080;
  max-width:400px;
  padding:2rem;
  text-align:center;
  width:90%
  }
  
  .confirm-modal-title {
  align-items:center;
  color:var(--text-primary);
  display:flex;
  font-size:1.25rem;
  gap:10px;
  justify-content:center;
  margin:0 0 .75rem
  }
  
  .confirm-modal-title svg {
  color:#ef4444cc
  }
  
  .confirm-modal p {
  color:var(--text-secondary);
  font-size:.9rem;
  line-height:1.5;
  margin:0 0 1.5rem
  }
  
  .confirm-modal-actions {
  display:flex;
  gap:12px
  }
  
  .confirm-btn-cancel,.confirm-btn-confirm {
  border-radius:8px;
  cursor:pointer;
  flex:1;
  font-size:.9rem;
  font-weight:600;
  padding:12px 20px;
  transition:all .2s
  }
  
  .confirm-btn-cancel {
  background:#ffffff1a;
  border:1px solid var(--border-subtle);
  color:var(--text-secondary)
  }
  
  .confirm-btn-cancel:hover {
  background:#ffffff26;
  color:var(--text-primary)
  }
  
  .confirm-btn-confirm {
  align-items:center;
  background:#ef444433;
  border:1px solid #ef444466;
  color:var(--text-primary);
  display:inline-flex;
  gap:6px;
  justify-content:center
  }
  
  .confirm-btn-confirm:hover {
  background:#ef44444d;
  border-color:#ef444499
  }
  
  .quick-date-buttons {
  align-items:center;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem
  }
  
  .btn-quick-date {
  background:#ffffff0d;
  border:1px solid var(--border-subtle);
  border-radius:6px;
  color:var(--text-secondary);
  cursor:pointer;
  font-size:.85rem;
  font-weight:600;
  padding:10px 16px;
  transition:all .2s
  }
  
  .btn-quick-date:hover {
  background:linear-gradient(81.02deg,#f33f5b -23.47%,#b14bf4 45.52%,#3b82f6 114.8%);
  border-color:transparent;
  color:#fff
  }
  
  .chart-toggle-label {
  align-items:center;
  background:#ffffff0d;
  border:1px solid var(--border-subtle);
  border-radius:6px;
  color:var(--text-secondary);
  cursor:pointer;
  display:flex;
  font-size:.85rem;
  font-weight:600;
  gap:8px;
  padding:10px 16px;
  transition:all .2s
  }
  
  .chart-toggle-label:hover {
  background:#ffffff1a;
  border-color:var(--border-subtle)
  }
  
  .stat-cards {
  display:grid;
  gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  margin-bottom:1.5rem
  }
  
  .stat-card {
  background:var(--border-subtle);
  border:1px solid var(--border-subtle);
  border-radius:12px;
  padding:1.25rem;
  transition:all .2s
  }
  
  .stat-card:hover {
  border-color:#b14bf44d;
  transform:translateY(-2px)
  }
  
  .stat-card-title {
  color:var(--text-primary);
  font-size:.9rem;
  font-weight:600;
  letter-spacing:.5px;
  margin-bottom:.5rem;
  text-transform:uppercase
  }
  
  .stat-card-value {
  color:var(--text-primary);
  font-size:1.75rem;
  font-weight:700
  }
  
  .stat-card-subtitle {
  color:var(--text-secondary);
  font-size:.9rem;
  margin-top:.25rem
  }
  
  .payout-section {
  align-items:center;
  display:flex;
  flex-wrap:wrap;
  gap:.75rem
  }
  
  .pending-badge {
  align-items:center;
  background:#b14bf426;
  border:1px solid #b14bf44d;
  border-radius:6px;
  color:var(--text-primary);
  display:inline-flex;
  font-size:.875rem;
  font-weight:600;
  gap:6px;
  padding:.5rem 1rem
  }
  
  .pending-badge-zero {
  align-items:center;
  background:#ffffff0d;
  border-radius:6px;
  color:var(--text-faint);
  display:inline-flex;
  font-size:.875rem;
  font-weight:600;
  gap:6px;
  padding:.5rem 1rem
  }
  
  .payout-btn {
  align-items:center;
  background:linear-gradient(135deg,#10b981 0%,#059669 100%);
  border:none;
  border-radius:6px;
  color:#fff;
  cursor:pointer;
  display:inline-flex;
  font-size:.875rem;
  font-weight:600;
  gap:6px;
  padding:.5rem 1rem;
  text-decoration:none;
  transition:all .2s
  }
  
  .payout-btn:hover {
  box-shadow:0 4px 12px #10b98159;
  color:#fff;
  transform:translateY(-2px)
  }
  
  .sortable {
  cursor:pointer;
  transition:all .2s;
  user-select:none
  }
  
  .sortable:hover {
  color:#b14bf4
  }
  
  .sortable a {
  align-items:center;
  color:inherit;
  display:flex;
  gap:5px;
  text-decoration:none
  }
  
  .sort-icon {
  font-size:.7rem;
  opacity:.4
  }
  
  .sortable.active .sort-icon {
  color:#b14bf4;
  opacity:1
  }
  
  .chart-wrapper {
  height:300px;
  position:relative;
  width:100%
  }
  
  .custom-legend {
  display:flex;
  flex-wrap:wrap;
  gap:15px;
  justify-content:center;
  margin-top:15px
  }
  
  .legend-item {
  align-items:center;
  background:#ffffff0d;
  border-radius:6px;
  cursor:pointer;
  display:flex;
  gap:8px;
  padding:6px 12px;
  transition:all .2s;
  user-select:none
  }
  
  .legend-item:hover {
  background:#ffffff1a
  }
  
  .legend-item.disabled {
  opacity:.4
  }
  
  .legend-item.disabled .legend-label {
  text-decoration:line-through
  }
  
  .legend-color {
  border-radius:3px;
  height:14px;
  width:14px
  }
  
  .legend-label {
  color:var(--text-secondary);
  font-size:.85rem;
  font-weight:600
  }
  
  .date-selector-modal {
  align-items:center;
  background:#000000b3;
  display:none;
  height:100%;
  justify-content:center;
  left:0;
  position:fixed;
  top:0;
  width:100%;
  z-index:9999
  }
  
  .date-selector-popup {
  background:linear-gradient(135deg,#1e1e28fa 0%,#14141efa 100%);
  border:1px solid var(--border-subtle);
  border-radius:12px;
  box-shadow:0 10px 40px #00000080;
  max-width:500px;
  padding:30px;
  position:relative;
  width:90%
  }
  
  .date-selector-close {
  background:transparent;
  border:none;
  color:var(--text-muted);
  cursor:pointer;
  font-size:24px;
  position:absolute;
  right:15px;
  top:15px
  }
  
  .date-selector-close:hover {
  color:#fff
  }
  
  .date-selector-title {
  color:var(--text-primary);
  font-size:1.2rem;
  font-weight:700;
  margin-bottom:20px
  }
  
  .deleted-files-table thead,.deleted-files-table tbody tr:hover {
  background:#ffffff0d
  }
  
  .confirm-modal-overlay.active,.date-selector-modal.active {
  display:flex
  }
  
  .chart-toggle-label input,.legend-checkbox {
  cursor:pointer;
  height:16px;
  width:16px
  }
  
  @media (max-width: 768px) {
  .quick-date-buttons {
  display:grid;
  grid-template-columns:repeat(2,1fr)
  }
  
  .stat-cards {
  grid-template-columns:repeat(2,1fr)
  }
  
  .payout-section {
  justify-content:center;
  width:100%
  }
  
  .chart-wrapper {
  height:250px
  }
  }
  
  #ui-datepicker-div {
  background:linear-gradient(135deg,#1e1e28fa 0%,#14141efa 100%);
  border:1px solid var(--border-subtle);
  border-radius:12px;
  box-shadow:0 10px 40px #00000080;
  font-family:inherit;
  padding:15px;
  z-index:10001!important
  }
  
  .ui-datepicker-header {
  background:transparent!important;
  border:none!important;
  padding:10px 0 15px!important
  }
  
  .ui-datepicker-title {
  color:#fff!important;
  font-size:1.1rem!important;
  font-weight:700!important
  }
  
  .ui-datepicker-prev,.ui-datepicker-next {
  background:#ffffff1a!important;
  border-radius:6px!important;
  cursor:pointer!important;
  top:8px!important;
  transition:all .2s
  }
  
  .ui-datepicker-prev span,.ui-datepicker-next span {
  filter:invert(1)
  }
  
  .ui-datepicker th {
  color:var(--text-muted)!important;
  font-size:.8rem!important;
  font-weight:600!important;
  padding:8px 0!important
  }
  
  .ui-datepicker td {
  padding:2px!important
  }
  
  .ui-datepicker td a,.ui-datepicker td span {
  background:#ffffff0d!important;
  border:none!important;
  border-radius:6px!important;
  color:var(--text-secondary)!important;
  padding:8px!important;
  text-align:center!important;
  transition:all .15s
  }
  
  .ui-datepicker td a:hover {
  background:linear-gradient(81.02deg,#f33f5b -23.47%,#b14bf4 45.52%,#3b82f6 114.8%)!important;
  color:#fff!important
  }
  
  .ui-datepicker td.ui-datepicker-today a {
  background:#b14bf44d!important;
  color:#fff!important
  }
  
  .ui-datepicker td.ui-datepicker-current-day a,.ui-datepicker td .ui-state-active {
  background:linear-gradient(81.02deg,#f33f5b -23.47%,#b14bf4 45.52%,#3b82f6 114.8%)!important;
  color:#fff!important;
  font-weight:600!important
  }
  
  .ui-datepicker td.ui-datepicker-unselectable span {
  background:transparent!important;
  color:var(--text-faint)!important
  }
  
  .ui-datepicker .ui-datepicker-buttonpane {
  background:transparent!important;
  border-top:1px solid var(--border-subtle)!important;
  margin-top:10px!important;
  padding-top:10px!important
  }
  
  .ui-datepicker .ui-datepicker-buttonpane button {
  background:#ffffff1a!important;
  border:none!important;
  border-radius:6px!important;
  color:#fff!important;
  cursor:pointer!important;
  font-weight:600!important;
  padding:8px 16px!important;
  transition:all .2s
  }
  
  .pagination-wrapper {
  align-items:center;
  display:flex;
  flex-wrap:wrap;
  gap:.25rem;
  justify-content:center;
  margin-top:1rem;
  padding:.5rem 0
  }
  
  .pagination-wrapper a,.pagination-wrapper span,.pagination-wrapper b {
  align-items:center;
  background:#ffffff0d;
  border:1px solid var(--border-subtle);
  border-radius:5px;
  color:var(--text-secondary);
  display:inline-flex;
  font-size:.85rem;
  font-weight:500;
  justify-content:center;
  min-width:32px;
  padding:.35rem .6rem;
  text-align:center;
  text-decoration:none;
  transition:all .15s ease;
  white-space:nowrap
  }
  
  .pagination-wrapper a:hover {
  background:linear-gradient(81.02deg,#f33f5b -23.47%,#b14bf4 45.52%,#3b82f6 114.8%);
  border-color:transparent;
  color:#fff!important
  }
  
  .pagination-wrapper b {
  background:linear-gradient(81.02deg,#f33f5b -23.47%,#b14bf4 45.52%,#3b82f6 114.8%);
  border-color:transparent;
  color:#fff!important;
  font-weight:600
  }
  
  .pagination-wrapper span {
  border:none;
  color:var(--text-faint);
  padding:.35rem .3rem
  }
  
  .pagination-wrapper span.disabled {
  background:#ffffff05;
  border:1px solid var(--border-subtle);
  color:var(--text-muted);
  cursor:not-allowed
  }
  
  .badge-premium {
  background:linear-gradient(135deg,#10b981 0%,#059669 100%);
  background:linear-gradient(135deg,#10b981 0%,#059669 100%);
  border-radius:4px;
  border-radius:4px;
  color:#fff;
  color:#fff;
  font-size:.75rem;
  font-size:.75rem;
  font-weight:600;
  font-weight:600;
  padding:4px 10px;
  padding:4px 10px
  }
  
  .badge-free {
  background:#ffffff1a;
  border-radius:4px;
  color:var(--text-secondary);
  font-size:.75rem;
  font-weight:600;
  padding:4px 10px
  }
  
  .amount-badge {
  background:linear-gradient(81.02deg,#f33f5b -23.47%,#b14bf4 45.52%,#3b82f6 114.8%);
  background:linear-gradient(81.02deg,#f33f5b -23.47%,#b14bf4 45.52%,#3b82f6 114.8%);
  background:linear-gradient(81.02deg,#f33f5b -23.47%,#b14bf4 45.52%,#3b82f6 114.8%);
  border-radius:4px;
  border-radius:4px;
  border-radius:4px;
  color:#fff;
  color:#fff;
  color:#fff;
  font-size:.85rem;
  font-size:.85rem;
  font-size:.85rem;
  font-weight:600;
  font-weight:600;
  font-weight:600;
  padding:4px 10px;
  padding:4px 10px;
  padding:4px 10px
  }
  
  .status-badge {
  border-radius:4px;
  font-size:.75rem;
  font-weight:600;
  padding:4px 10px
  }
  
  .status-paid {
  background:#10b98133;
  color:#10b981
  }
  
  .status-unpaid {
  background:#f59e0b33;
  color:#f59e0b
  }
  
  .detail-header {
  align-items:center;
  align-items:center;
  align-items:center;
  align-items:center;
  display:flex;
  display:flex;
  display:flex;
  display:flex;
  flex-wrap:wrap;
  flex-wrap:wrap;
  flex-wrap:wrap;
  flex-wrap:wrap;
  gap:1rem;
  gap:1rem;
  gap:1rem;
  gap:1rem;
  justify-content:space-between;
  justify-content:space-between;
  justify-content:space-between;
  justify-content:space-between;
  margin-bottom:1.5rem;
  margin-bottom:1.5rem;
  margin-bottom:1.5rem;
  margin-bottom:1.5rem
  }
  
  .btn-back {
  align-items:center;
  align-items:center;
  align-items:center;
  align-items:center;
  background:#ffffff1a;
  background:#ffffff1a;
  background:#ffffff1a;
  background:#ffffff1a;
  border:1px solid var(--border-subtle);
  border:1px solid var(--border-subtle);
  border:1px solid var(--border-subtle);
  border:1px solid var(--border-subtle);
  border-radius:6px;
  border-radius:6px;
  border-radius:6px;
  border-radius:6px;
  color:var(--text-secondary);
  color:var(--text-secondary);
  color:var(--text-secondary);
  color:var(--text-secondary);
  display:inline-flex;
  display:inline-flex;
  display:inline-flex;
  display:inline-flex;
  font-size:.9rem;
  font-size:.9rem;
  font-size:.9rem;
  font-size:.9rem;
  font-weight:600;
  font-weight:600;
  font-weight:600;
  font-weight:600;
  gap:8px;
  gap:8px;
  gap:8px;
  gap:8px;
  padding:10px 20px;
  padding:10px 20px;
  padding:10px 20px;
  padding:10px 20px;
  text-decoration:none;
  text-decoration:none;
  text-decoration:none;
  text-decoration:none;
  transition:all .2s;
  transition:all .2s;
  transition:all .2s;
  transition:all .2s
  }
  
  .btn-back:hover {
  background:linear-gradient(81.02deg,#f33f5b -23.47%,#b14bf4 45.52%,#3b82f6 114.8%);
  background:linear-gradient(81.02deg,#f33f5b -23.47%,#b14bf4 45.52%,#3b82f6 114.8%);
  background:linear-gradient(81.02deg,#f33f5b -23.47%,#b14bf4 45.52%,#3b82f6 114.8%);
  background:linear-gradient(81.02deg,#f33f5b -23.47%,#b14bf4 45.52%,#3b82f6 114.8%);
  border-color:transparent;
  border-color:transparent;
  border-color:transparent;
  border-color:transparent;
  color:#fff;
  color:#fff;
  color:#fff;
  color:#fff
  }
  
  .user-badge {
  background:#6366f133;
  background:#6366f133;
  border-radius:4px;
  border-radius:4px;
  color:#818cf8;
  color:#818cf8;
  font-size:.8rem;
  font-size:.8rem;
  font-weight:600;
  font-weight:600;
  padding:4px 10px;
  padding:4px 10px
  }
  
  .id-badge {
  background:#ffffff1a;
  background:#ffffff1a;
  border-radius:4px;
  border-radius:4px;
  color:var(--text-secondary);
  color:var(--text-secondary);
  font-family:monospace;
  font-family:monospace;
  font-size:.8rem;
  font-size:.8rem;
  font-weight:600;
  font-weight:600;
  padding:4px 10px;
  padding:4px 10px
  }
  
  .ip-badge {
  background:#ffffff0d;
  border-radius:4px;
  color:var(--text-secondary);
  font-family:monospace;
  font-size:.75rem;
  padding:4px 8px
  }
  
  .navpanel .navpanel-menu .nav-item .nav-link,.navpanel .navpanel-menu .nav-link,.navpanel-menu .nav-link {
  border-radius:12px!important;
  margin:2px 8px!important
  }
  
  .navpanel .navpanel-menu .nav-item .nav-link:hover,.navpanel .navpanel-menu .nav-item .nav-link.active,.navpanel .navpanel-menu .nav-link:hover,.navpanel .navpanel-menu .nav-link.active,.navpanel-menu .nav-link:hover,.navpanel-menu .nav-link.active {
  border-radius:12px!important
  }
  
  .navpanel .navpanel-submenu,.navpanel-submenu {
  border-radius:12px!important;
  margin:4px 8px!important
  }
  
  .navpanel .navpanel-submenu .nav-link,.navpanel-submenu .nav-link {
  border-radius:8px!important;
  margin:2px 4px!important
  }
  
  .navpanel-logo-wrapper {
  align-items:center;
  display:flex;
  height:74px;
  justify-content:center;
  margin-bottom:.5rem
  }
  
  .logo-hover {
  text-decoration:none
  }
  
  .logo-hover .logo-img {
  transition:transform .25s ease
  }
  
  .logo-hover .duckier-logo-text {
  transition:transform .25s ease,letter-spacing .25s ease
  }
  
  .logo-hover:hover .logo-img {
  transform:scale(1.08) rotate(-3deg)
  }
  
  .logo-hover:hover .duckier-logo-text {
  letter-spacing:.5px;
  transform:scale(1.03)
  }
  
  .nav-upgrade-wrapper {
  display:flex;
  justify-content:center;
  margin-bottom:8px;
  padding:8px 12px
  }
  
  .nav-upgrade-btn {
  align-items:center;
  background:linear-gradient(135deg,#b14bf426 0%,#fa556026 100%);
  border:1px solid #b14bf44d;
  border-radius:20px;
  color:var(--text-primary);
  display:inline-flex;
  font-size:13px;
  font-weight:600;
  gap:8px;
  padding:10px 18px;
  text-decoration:none;
  transition:all .3s ease
  }
  
  .nav-upgrade-btn:hover {
  background:linear-gradient(135deg,#b14bf440 0%,#fa556040 100%);
  border-color:#b14bf480;
  box-shadow:0 4px 12px #b14bf433;
  color:var(--text-primary);
  transform:translateY(-1px)
  }
  
  .submenu-icon {
  flex-shrink:0;
  margin-right:8px;
  opacity:.6;
  vertical-align:middle
  }
  
  .navpanel-submenu .nav-link {
  align-items:center;
  display:flex
  }
  
  .ui-datepicker-prev:hover,.ui-datepicker-next:hover,.ui-datepicker .ui-datepicker-buttonpane button:hover {
  background:linear-gradient(81.02deg,#f33f5b -23.47%,#b14bf4 45.52%,#3b82f6 114.8%)!important
  }
  
  .amount-badge-zero,.amount-badge-refund {
  background:#dc354533;
  border-radius:4px;
  color:#dc3545;
  font-size:.85rem;
  font-weight:600;
  padding:4px 10px
  }
  
  .navpanel-submenu .nav-link:hover .submenu-icon,.navpanel-submenu .nav-link.nav-link-active .submenu-icon {
  opacity:1
  }
  
  @media (max-width: 1023px) {
  .navpanel-logo-wrapper {
  display:none!important
  }
  
  .navpanel {
  padding-top:56px!important
  }
  
  .navpanel-close {
  right:10px!important;
  top:10px!important
  }
  }
  
  .panel-content {
  display:none
  }
  
  .panel-content.active {
  display:block
  }
  
  .nav-lang-mobile {
  border-top:1px solid var(--border-subtle);
  display:none;
  margin-top:16px;
  padding-top:16px
  }
  
  @media (max-width: 1023px) {
  .nav-lang-mobile {
  display:block
  }
  }
  
  .nav-lang-flag {
  border-radius:3px;
  height:20px;
  object-fit:cover;
  width:20px
  }
  
  .nav-lang-current {
  text-transform:capitalize
  }
  
  .submenu-lang-flag {
  border-radius:2px;
  height:18px;
  margin-right:8px;
  object-fit:cover;
  width:18px
  }
  
  .sidebar-edge-toggle {
  align-items:center;
  background:#ffffff0d;
  border:none;
  border-radius:0 6px 6px 0;
  color:var(--text-muted);
  cursor:pointer;
  display:flex;
  height:48px;
  justify-content:center;
  left:300px;
  padding:0;
  position:fixed;
  top:50%;
  transform:translateY(-50%);
  transition:all .2s ease;
  width:24px;
  z-index:1002
  }
  
  .sidebar-edge-toggle:hover {
  background:#ffffff1a;
  color:var(--text-secondary)
  }
  
  .sidebar-toggle-arrow {
  transition:transform .3s ease
  }
  
  body.navpanel-collapsed .sidebar-edge-toggle {
  left:104px
  }
  
  body.navpanel-collapsed .sidebar-toggle-arrow {
  transform:rotate(180deg)
  }
  
  @media (max-width: 1023px) {
  .sidebar-edge-toggle {
  display:none
  }
  }
  
  @media (min-width: 1024px) {
  .navpanel {
  display:flex;
  flex-direction:column;
  transition:width .3s cubic-bezier(0.4,0,0.2,1)
  }
  
  .panel-wrapper {
  flex:1;
  overflow-x:hidden;
  overflow-y:auto
  }
  
  body.navpanel-collapsed .navpanel {
  overflow-x:hidden;
  overflow-y:hidden;
  padding-left:1rem;
  padding-right:1rem;
  scrollbar-gutter:auto;
  width:88px
  }
  
  body.navpanel-collapsed .navpanel-logo-wrapper {
  height:74px;
  margin-bottom:.5rem;
  overflow:visible;
  padding:0
  }
  
  body.navpanel-collapsed .navpanel-logo-wrapper .logo {
  gap:0;
  justify-content:center
  }
  
  body.navpanel-collapsed .navpanel-logo-wrapper .logo-img {
  height:56px!important;
  max-width:none!important;
  width:auto!important
  }
  
  body.navpanel-collapsed .nav-item.nav-upgrade-wrapper {
  display:block!important;
  margin:0!important;
  padding:0!important;
  text-align:center!important
  }
  
  body.navpanel-collapsed .nav-upgrade-btn {
  align-items:center!important;
  border-radius:14px!important;
  display:inline-flex!important;
  font-size:0!important;
  gap:0!important;
  height:48px!important;
  justify-content:center!important;
  left:50%!important;
  margin:4px 0!important;
  padding:0!important;
  position:relative!important;
  transform:translateX(-50%)!important;
  width:48px!important
  }
  
  body.navpanel-collapsed .nav-upgrade-btn svg {
  height:20px!important;
  width:20px!important
  }
  
  body.navpanel-collapsed .navpanel-menu .nav-link {
  align-items:center;
  border-radius:14px!important;
  display:flex;
  font-size:0;
  height:48px;
  justify-content:center;
  margin:4px auto!important;
  padding:0;
  width:48px
  }
  
  body.navpanel-collapsed .navpanel-icon {
  align-items:center;
  display:flex;
  height:48px;
  justify-content:center;
  margin:0;
  min-width:auto;
  width:48px
  }
  
  body.navpanel-collapsed .navpanel-icon svg {
  height:20px;
  width:20px
  }
  
  body.navpanel-collapsed .navpanel-submenu {
  display:none!important
  }
  
  body.navpanel-collapsed .header .w-full.px-8 {
  padding-left:1rem!important
  }
  
  body.navpanel-collapsed .navpanel-logo-wrapper .duckier-logo-text,body.navpanel-collapsed .panel-switcher,body.navpanel-collapsed .navpanel-menu .nav-link.has-submenu:after,body.navpanel-collapsed .nav-lang-mobile {
  display:none
  }
  
  main,.header {
  transition:padding-left .3s cubic-bezier(0.4,0,0.2,1)
  }
  
  body.navpanel-collapsed main,body.navpanel-collapsed .header {
  padding-left:88px!important
  }
  }
  
  .panel-switcher {
  background:#ffffff0d;
  border-radius:8px;
  display:flex;
  margin-bottom:16px;
  padding:4px
  }
  
  .panel-switcher-btn {
  background:transparent;
  border:none;
  border-radius:6px;
  color:var(--text-secondary);
  cursor:pointer;
  flex:1;
  font-size:13px;
  font-weight:500;
  padding:8px 12px;
  transition:all .2s ease
  }
  
  .panel-switcher-btn:hover {
  color:var(--text-secondary)
  }
  
  .panel-switcher-btn.active {
  background:linear-gradient(135deg,#b14bf44d 0%,#fa55604d 100%);
  color:var(--text-primary)
  }
  
  .tippy-box[data-theme~='duckier'] {
  background:#1e1e28f2;
  border:1px solid var(--border-subtle);
  border-radius:6px;
  box-shadow:0 4px 12px #0000004d;
  color:var(--text-primary);
  font-size:13px;
  font-weight:500
  }
  
  .tippy-box[data-theme~='duckier'] .tippy-arrow::before {
  border-right-color:#1e1e28f2
  }
  
  .tippy-box[data-theme~='duckier'] .tippy-content {
  padding:6px 10px
  }
  
  .tippy-box[data-theme~='duckier-flyout'],.tippy-box[data-theme~='duckier-flyout'] .tippy-content,.tippy-box[data-theme~='duckier-flyout'] .tippy-content > div {
  border-radius:4px!important
  }
  
  .tippy-box[data-theme~='duckier-flyout'] {
  background:#0d0f14!important;
  border:1px solid var(--border-subtle)!important;
  box-shadow:0 4px 24px #0009!important;
  overflow:hidden!important
  }
  
  .tippy-box[data-theme~='duckier-flyout'] .tippy-content {
  padding:0!important
  }
  
  .flyout-menu {
  border-radius:0!important;
  min-width:200px!important;
  padding:8px!important
  }
  
  .flyout-title {
  border-radius:0!important;
  color:var(--text-muted)!important;
  font-size:11px!important;
  font-weight:600!important;
  letter-spacing:.5px!important;
  margin:0!important;
  padding:8px 12px!important;
  text-transform:uppercase!important
  }
  
  .flyout-item {
  align-items:center!important;
  border-radius:4px!important;
  color:var(--text-secondary)!important;
  display:flex!important;
  font-size:14px!important;
  font-weight:500!important;
  gap:10px!important;
  padding:10px 12px!important;
  text-decoration:none!important;
  transition:background .15s ease!important
  }
  
  .flyout-item:hover {
  background:#ffffff1a!important;
  color:var(--text-primary)!important
  }
  
  .flyout-item svg {
  flex-shrink:0!important;
  height:16px!important;
  opacity:.6!important;
  width:16px!important
  }
  
  .flyout-item:hover svg {
  opacity:1!important
  }
  
  .news-section {
  padding:40px 0
  }
  
  .news-hero {
  margin-bottom:60px;
  text-align:center
  }
  
  .news-hero h1 {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  background-clip:text;
  display:inline-block;
  font-size:48px;
  font-weight:800;
  margin-bottom:16px
  }
  
  .news-hero p {
  color:var(--text-secondary);
  font-size:18px;
  line-height:1.6;
  margin:0 auto;
  max-width:800px
  }
  
  .news-container {
  margin:0 auto;
  max-width:1000px;
  padding:0 24px
  }
  
  .news-grid {
  display:grid;
  gap:24px;
  margin-bottom:40px
  }
  
  .news-card {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(to bottom,#ffffff24,#ffffff14) border-box;
  border:2px solid transparent;
  border-radius:20px;
  cursor:pointer;
  display:block;
  padding:32px;
  position:relative;
  text-decoration:none;
  transition:all .3s ease
  }
  
  .news-card:hover {
  background:linear-gradient(var(--color-primary-light),var(--color-primary-light)) padding-box,linear-gradient(81.02deg,#fa5560cc -23.47%,#b14bf4cc 45.52%,#4d91ffcc 114.8%) border-box;
  transform:translateY(-4px)
  }
  
  .news-card-title {
  margin-bottom:16px
  }
  
  .news-card-title h3 {
  color:var(--text-primary);
  font-size:24px;
  font-weight:700;
  margin:0
  }
  
  .news-card-content {
  color:var(--text-secondary);
  font-size:15px;
  line-height:1.7;
  margin-bottom:16px
  }
  
  .news-card-content.truncated {
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  display:-webkit-box;
  line-clamp:3;
  overflow:hidden
  }
  
  .news-read-more {
  align-items:center;
  color:#c66bd5;
  display:inline-flex;
  font-size:15px;
  font-weight:600;
  gap:6px;
  margin-bottom:24px;
  transition:all .3s ease
  }
  
  .news-read-more svg {
  flex-shrink:0;
  transition:transform .3s ease
  }
  
  .news-card:hover .news-read-more svg {
  transform:translateX(4px)
  }
  
  .news-card-footer {
  align-items:center;
  border-top:1px solid var(--border-subtle);
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  padding-top:20px
  }
  
  .paging-centered {
  display:flex;
  justify-content:center;
  margin-top:40px
  }
  
  .news-card-date,.news-card-comments {
  align-items:center;
  color:var(--text-secondary);
  display:flex;
  font-size:14px;
  font-weight:500;
  gap:8px
  }
  
  .news-card-date svg,.news-card-comments svg {
  color:#c66bd5;
  flex-shrink:0
  }
  
  @media (max-width: 768px) {
  .news-hero h1 {
  font-size:36px
  }
  
  .news-hero p {
  font-size:16px
  }
  
  .news-card {
  padding:24px 20px
  }
  
  .news-card-title a {
  font-size:20px
  }
  
  .news-card-content {
  font-size:14px
  }
  
  .news-card-footer {
  gap:16px
  }
  }
  
  .news-detail-section {
  padding:40px 0
  }
  
  .news-detail-container {
  margin:0 auto;
  max-width:1100px;
  padding:0 24px
  }
  
  .news-detail-card {
  background:var(--border-subtle);
  border:1px solid var(--border-subtle);
  border-radius:16px;
  margin-bottom:40px;
  padding:40px
  }
  
  .news-detail-header {
  border-bottom:1px solid var(--border-subtle);
  margin-bottom:24px;
  padding-bottom:20px
  }
  
  .news-detail-title {
  color:var(--text-primary);
  font-size:32px;
  font-weight:700;
  line-height:1.3;
  margin:0
  }
  
  .news-detail-content {
  color:var(--text-primary);
  font-size:16px;
  line-height:1.8
  }
  
  .news-detail-content p {
  margin:0 0 20px
  }
  
  .news-detail-content p:last-child {
  margin-bottom:0
  }
  
  .news-detail-content a {
  color:#4d91ff;
  font-weight:600;
  text-decoration:none;
  transition:all .3s ease
  }
  
  .news-detail-content a:hover {
  color:#c66bd5;
  text-decoration:underline
  }
  
  .news-detail-content h2 {
  color:var(--text-primary);
  font-size:28px;
  font-weight:700;
  margin:32px 0 16px
  }
  
  .news-detail-content h3 {
  color:var(--text-primary);
  font-size:22px;
  font-weight:700;
  margin:24px 0 12px
  }
  
  .news-detail-content ul,.news-detail-content ol {
  margin:0 0 20px;
  padding-left:24px
  }
  
  .news-detail-content li {
  margin-bottom:8px
  }
  
  .news-detail-content strong {
  color:var(--text-primary);
  font-weight:600
  }
  
  .news-detail-content code {
  background:#ffffff1a;
  border-radius:4px;
  color:#c66bd5;
  font-family:'Monaco','Courier New',monospace;
  font-size:14px;
  padding:2px 8px
  }
  
  .news-detail-content pre {
  background:#ffffff0d;
  border-radius:12px;
  margin:20px 0;
  overflow-x:auto;
  padding:20px
  }
  
  .news-detail-content pre code {
  background:none;
  color:var(--text-primary);
  padding:0
  }
  
  .news-detail-content img {
  border-radius:12px;
  height:auto;
  margin:24px 0;
  max-width:100%
  }
  
  .news-detail-content blockquote {
  background:linear-gradient(175deg,#ffffff0d -94.09%,#ffffff05 154.53%);
  border-image:linear-gradient(to bottom,#fa5560ff,#b14bf4ff,#4d91ffff) 1;
  border-left:4px solid;
  border-radius:0 12px 12px 0;
  color:var(--text-primary);
  font-style:italic;
  margin:24px 0;
  padding:20px 24px
  }
  
  .comments-section {
  margin-top:40px
  }
  
  @media (max-width: 768px) {
  .news-detail-container {
  padding:0 16px
  }
  
  .news-detail-card {
  padding:24px 20px
  }
  
  .news-detail-title {
  font-size:24px
  }
  
  .news-detail-content {
  font-size:15px
  }
  
  .news-detail-content h2 {
  font-size:22px
  }
  
  .news-detail-content h3 {
  font-size:18px
  }
  }
  
  .payment-failed-container {
  margin:40px auto;
  max-width:550px;
  padding:0 20px
  }
  
  .payment-failed-card {
  background:linear-gradient(var(--color-primary-dark,#181920),var(--color-primary-dark,#181920)) padding-box,linear-gradient(to bottom,#ffffff24,#ffffff14) border-box;
  border:1px solid transparent;
  border-radius:16px;
  overflow:hidden
  }
  
  .payment-failed-header {
  background:linear-gradient(135deg,#dc354533 0%,#c8233333 100%);
  border-bottom:1px solid #dc35454d;
  padding:30px 25px;
  text-align:center
  }
  
  .payment-failed-icon {
  align-items:center;
  background:linear-gradient(135deg,#dc3545 0%,#c82333 100%);
  border-radius:50%;
  box-shadow:0 4px 12px #dc354566;
  display:flex;
  height:70px;
  justify-content:center;
  margin:0 auto 15px;
  width:70px
  }
  
  .payment-failed-icon svg {
  color:#fff;
  height:32px;
  width:32px
  }
  
  .payment-failed-header h1 {
  color:#ff6b6b;
  font-size:1.6rem;
  font-weight:700;
  margin:0 0 8px
  }
  
  .payment-failed-header p {
  color:var(--text-secondary);
  font-size:.95rem;
  margin:0
  }
  
  .payment-failed-content {
  padding:25px
  }
  
  .payment-error-box {
  background:#dc35451a;
  border:1px solid #dc35454d;
  border-left:4px solid #dc3545;
  border-radius:8px;
  color:var(--text-primary);
  margin-bottom:20px;
  padding:15px
  }
  
  .payment-error-box strong {
  align-items:center;
  color:#ff6b6b;
  display:flex;
  font-size:1rem;
  gap:.5rem;
  margin-bottom:10px
  }
  
  .payment-info-box {
  background:var(--border-subtle);
  border:1px solid var(--border-subtle);
  border-radius:10px;
  margin-bottom:20px;
  padding:15px
  }
  
  .payment-info-row {
  align-items:center;
  border-bottom:1px solid var(--border-subtle);
  display:flex;
  padding:10px 0
  }
  
  .payment-info-row:last-child {
  border-bottom:none;
  padding-bottom:0
  }
  
  .payment-info-label {
  color:var(--text-secondary);
  flex:0 0 120px;
  font-size:.9rem
  }
  
  .payment-info-value {
  color:var(--text-primary);
  font-size:.95rem;
  font-weight:600
  }
  
  .help-section {
  background:#b14bf41a;
  border-left:4px solid #b14bf4;
  border-radius:8px;
  margin-bottom:20px;
  padding:18px
  }
  
  .help-section h4 {
  align-items:center;
  color:#c66bd5;
  display:flex;
  font-size:1rem;
  gap:.5rem;
  margin:0 0 12px
  }
  
  .help-section ul {
  color:var(--text-secondary);
  font-size:.9rem;
  margin:0;
  padding-left:20px
  }
  
  .help-section li {
  line-height:1.5;
  margin-bottom:8px
  }
  
  .payment-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  margin-top:25px;
  text-align:center
  }
  
  .payment-btn {
  align-items:center;
  border-radius:50px;
  color:#fff;
  display:inline-flex;
  font-size:.95rem;
  font-weight:600;
  gap:.5rem;
  justify-content:center;
  padding:14px 28px;
  text-decoration:none;
  transition:all .3s
  }
  
  .payment-btn svg {
  height:18px;
  width:18px
  }
  
  .payment-btn-primary {
  background:linear-gradient(81.02deg,#fa5560 -23.47%,#b14bf4 45.52%,#4d91ff 114.8%);
  box-shadow:0 4px 12px #b14bf44d
  }
  
  .payment-btn-primary:hover {
  box-shadow:0 6px 20px #b14bf466;
  color:#fff;
  transform:translateY(-2px)
  }
  
  .payment-btn-secondary {
  background:#ffffff1a;
  border:1px solid var(--border-subtle)
  }
  
  .payment-btn-secondary:hover {
  background:#ffffff26;
  color:#fff;
  transform:translateY(-2px)
  }
  
  .payment-footer {
  background:#ffffff05;
  border-top:1px solid var(--border-subtle);
  color:var(--text-muted);
  font-size:.8rem;
  padding:14px;
  text-align:center
  }
  
  @media (max-width: 480px) {
  .payment-failed-container {
  margin:20px auto;
  padding:0 15px
  }
  
  .payment-failed-header {
  padding:20px
  }
  
  .payment-failed-header h1 {
  font-size:1.4rem
  }
  
  .payment-info-row {
  align-items:flex-start;
  flex-direction:column;
  gap:4px
  }
  
  .payment-info-label {
  flex:none
  }
  
  .payment-actions {
  flex-direction:column
  }
  
  .payment-btn {
  width:100%
  }
  }
  
  .payment-success-container {
  margin:40px auto;
  max-width:550px;
  padding:0 20px
  }
  
  .payment-success-card {
  background:linear-gradient(var(--color-primary-dark,#181920),var(--color-primary-dark,#181920)) padding-box,linear-gradient(to bottom,#ffffff24,#ffffff14) border-box;
  border:1px solid transparent;
  border-radius:16px;
  overflow:hidden
  }
  
  .payment-success-header {
  background:linear-gradient(81.02deg,#fa556026 -23.47%,#b14bf426 45.52%,#4d91ff26 114.8%);
  border-bottom:1px solid #b14bf433;
  padding:30px 25px;
  text-align:center
  }
  
  .payment-success-icon {
  align-items:center;
  background:linear-gradient(135deg,#10b981 0%,#059669 100%);
  border-radius:50%;
  box-shadow:0 4px 12px #10b98166;
  display:flex;
  height:70px;
  justify-content:center;
  margin:0 auto 15px;
  width:70px
  }
  
  .payment-success-icon svg {
  color:#fff;
  height:36px;
  width:36px
  }
  
  .payment-success-header h1 {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560 -23.47%,#b14bf4 45.52%,#4d91ff 114.8%);
  background-clip:text;
  font-size:1.6rem;
  font-weight:700;
  margin:0 0 8px
  }
  
  .payment-success-header p {
  color:var(--text-secondary);
  font-size:.95rem;
  margin:0
  }
  
  .payment-success-content {
  padding:25px
  }
  
  .payment-info-box {
  background:var(--border-subtle);
  border:1px solid var(--border-subtle);
  border-radius:10px;
  margin-bottom:15px;
  padding:15px
  }
  
  .payment-info-row {
  align-items:center;
  border-bottom:1px solid var(--border-subtle);
  display:flex;
  padding:10px 0
  }
  
  .payment-info-row:last-child {
  border-bottom:none;
  padding-bottom:0
  }
  
  .payment-info-label {
  color:var(--text-secondary);
  flex:0 0 100px;
  font-size:.9rem
  }
  
  .payment-info-value {
  color:var(--text-primary);
  font-size:.95rem;
  font-weight:600
  }
  
  .premium-expires {
  background:linear-gradient(81.02deg,#fa556033 -23.47%,#b14bf433 45.52%,#4d91ff33 114.8%);
  border:1px solid #b14bf44d;
  border-radius:10px;
  margin-bottom:15px;
  padding:18px;
  text-align:center
  }
  
  .premium-expires-label {
  color:var(--text-secondary);
  font-size:.85rem;
  margin-bottom:8px
  }
  
  .premium-expires-time {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560 -23.47%,#b14bf4 45.52%,#4d91ff 114.8%);
  background-clip:text;
  font-size:1.5rem;
  font-weight:700;
  margin:0
  }
  
  .success-message {
  color:#10b981;
  font-size:1.1rem;
  font-weight:500;
  padding:20px;
  text-align:center
  }
  
  .payment-actions {
  margin-top:20px;
  text-align:center
  }
  
  .payment-btn {
  align-items:center;
  background:linear-gradient(81.02deg,#fa5560 -23.47%,#b14bf4 45.52%,#4d91ff 114.8%);
  border-radius:50px;
  box-shadow:0 4px 12px #b14bf44d;
  color:#fff;
  display:inline-flex;
  font-size:.95rem;
  font-weight:600;
  gap:.5rem;
  justify-content:center;
  padding:14px 32px;
  text-decoration:none;
  transition:all .3s
  }
  
  .payment-btn:hover {
  box-shadow:0 6px 20px #b14bf466;
  color:#fff;
  transform:translateY(-2px)
  }
  
  .payment-btn svg {
  height:18px;
  width:18px
  }
  
  .payment-footer {
  background:#ffffff05;
  border-top:1px solid var(--border-subtle);
  color:var(--text-muted);
  font-size:.8rem;
  padding:14px;
  text-align:center
  }
  
  @media (max-width: 480px) {
  .payment-success-container {
  margin:20px auto;
  padding:0 15px
  }
  
  .payment-success-header {
  padding:20px
  }
  
  .payment-success-header h1 {
  font-size:1.4rem
  }
  
  .payment-info-row {
  align-items:flex-start;
  flex-direction:column;
  gap:4px
  }
  
  .payment-info-label {
  flex:none
  }
  }
  
  .current-premium-wrapper {
  display:flex;
  justify-content:center;
  margin-top:24px
  }
  
  .current-premium-info {
  align-items:center;
  background:#b14bf41f;
  border-radius:20px;
  color:var(--text-secondary);
  display:inline-flex;
  font-size:13px;
  gap:6px;
  padding:8px 16px
  }
  
  .current-premium-info svg {
  flex-shrink:0
  }
  
  .current-premium-info strong {
  color:#c66bd5
  }
  
  .pricing-section {
  padding:40px 0
  }
  
  .pricing-hero {
  margin-bottom:60px;
  text-align:center
  }
  
  .pricing-hero h1 {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  align-items:center;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  background-clip:text;
  display:inline-flex;
  font-size:48px;
  font-weight:800;
  gap:16px;
  margin-bottom:16px
  }
  
  .pricing-hero h1 .premium-star {
  display:inline-flex;
  flex-shrink:0
  }
  
  .pricing-hero h1 .premium-star svg {
  animation:starPulse 2s ease-in-out infinite;
  filter:drop-shadow(0 0 12px #b14bf480)
  }
  
  @keyframes starPulse {
  0%,100% {
  filter:drop-shadow(0 0 12px #b14bf480);
  transform:scale(1)
  }
  
  50% {
  filter:drop-shadow(0 0 20px #b14bf4cc);
  transform:scale(1.1)
  }
  }
  
  .pricing-hero p {
  color:var(--text-secondary);
  font-size:18px;
  margin:0 auto;
  max-width:600px
  }
  
  .billing-toggle {
  background:#ffffff0d;
  border:1px solid var(--border-subtle);
  border-radius:999px;
  display:inline-flex;
  gap:4px;
  margin-top:24px;
  padding:4px
  }
  
  .billing-option {
  background:transparent;
  border:none;
  border-radius:999px;
  color:var(--text-secondary);
  cursor:pointer;
  font-weight:600;
  padding:10px 18px;
  transition:all .2s ease
  }
  
  .billing-option span {
  font-size:12px;
  margin-left:4px;
  opacity:.8
  }
  
  .billing-option.active {
  background:linear-gradient(135deg,#fa556026,#b14bf426);
  color:var(--text-primary)
  }
  
  .pricing-cards {
  display:grid;
  gap:32px;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  margin:0 auto;
  max-width:1200px;
  padding:0 24px
  }
  
  .pricing-card {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(to bottom,#ffffff24,#ffffff14) border-box;
  border:2px solid transparent;
  border-radius:24px;
  display:flex;
  flex-direction:column;
  padding:40px 32px;
  position:relative;
  transition:all .3s ease
  }
  
  .pricing-card:hover {
  transform:translateY(-8px)
  }
  
  .pricing-card.featured {
  background:linear-gradient(var(--color-primary-light),var(--color-primary-light)) padding-box,linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%) border-box;
  border:2px solid transparent;
  transform:scale(1.05)
  }
  
  .pricing-card.featured:hover {
  transform:scale(1.05) translateY(-8px)
  }
  
  .pricing-badge {
  background:linear-gradient(#1e1e32cc,#1e1e32cc) padding-box,linear-gradient(to right,#fd941366,#ff69b4aa,#b14bf4cc,#ac65cbaa,#3aafd388) border-box;
  border:1px solid transparent;
  border-radius:100px;
  backdrop-filter:blur(12px) saturate(180%);
  -webkit-backdrop-filter:blur(12px) saturate(180%);
  color:var(--text-secondary);
  font-size:14px;
  font-weight:700;
  left:50%;
  letter-spacing:.5px;
  padding:8px 24px;
  position:absolute;
  text-transform:uppercase;
  top:-16px;
  transform:translateX(-50%)
  }
  
  .pricing-duration {
  align-items:center;
  color:var(--text-primary);
  display:inline-flex;
  font-size:18px;
  font-weight:600;
  gap:8px;
  margin-bottom:16px
  }
  
  .pricing-amount {
  margin-bottom:24px
  }
  
  .pricing-amount .currency {
  color:var(--text-primary);
  font-size:32px;
  font-weight:700;
  vertical-align:top
  }
  
  .pricing-amount .price {
  color:var(--text-primary);
  font-size:64px;
  font-weight:800;
  line-height:1
  }
  
  .pricing-amount .period {
  color:var(--text-secondary);
  font-size:18px;
  margin-left:4px
  }
  
  .pricing-subtext {
  color:var(--text-secondary);
  font-size:15px;
  margin:8px 0 24px
  }
  
  .pricing-savings {
  background:#c66bd526;
  border:1px solid #c66bd54d;
  border-radius:12px;
  color:#c66bd5ff;
  font-size:14px;
  font-weight:600;
  margin-bottom:32px;
  padding:12px 16px;
  text-align:center
  }
  
  .pricing-features {
  flex-grow:1;
  list-style:none;
  margin:0;
  padding:0
  }
  
  .pricing-features li {
  align-items:flex-start;
  color:var(--text-secondary);
  display:flex;
  font-size:15px;
  gap:12px;
  line-height:1.6;
  padding:12px 0
  }
  
  .pricing-features li svg {
  flex-shrink:0;
  margin-top:2px
  }
  
  .plan-cta {
  margin-bottom:20px
  }

  .benefits-section {
  margin:80px auto 0;
  max-width:1200px;
  padding:0 24px
  }
  
  .benefits-title {
  color:var(--text-primary);
  font-size:36px;
  font-weight:800;
  margin-bottom:48px;
  text-align:center
  }
  
  .benefits-grid {
  display:grid;
  gap:32px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))
  }
  
  .feature-card {
  background:radial-gradient(circle at 30% 30%,var(--feature-accent-soft),transparent 60%),linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(to bottom,#ffffff14,#ffffff0a) border-box;
  border:1px solid transparent;
  border-radius:24px;
  padding:40px 32px;
  text-align:center;
  transition:all .4s cubic-bezier(0.4,0,0.2,1);
  --feature-accent:#fa5560;
  --feature-accent-soft:#fa55601f
  }
  
  .feature-card[data-theme="blue"] {
  --feature-accent:#4d91ff;
  --feature-accent-soft:#4d91ff26
  }
  
  .feature-card[data-theme="teal"] {
  --feature-accent:#2fd1b2;
  --feature-accent-soft:#2fd1b22e
  }
  
  .feature-card[data-theme="amber"] {
  --feature-accent:#ffb347;
  --feature-accent-soft:#ffb3472e
  }
  
  .feature-card[data-theme="violet"] {
  --feature-accent:#c66bd5;
  --feature-accent-soft:#c66bd533
  }
  
  .feature-card[data-theme="indigo"] {
  --feature-accent:#6a6bff;
  --feature-accent-soft:#6a6bff2e
  }
  
  .feature-badge {
  align-items:center;
  background:var(--feature-accent-soft);
  border:none;
  border-radius:999px;
  color:var(--feature-accent);
  display:inline-flex;
  font-size:12px;
  font-weight:700;
  justify-content:center;
  letter-spacing:.08em;
  margin-bottom:16px;
  padding:6px 14px;
  text-transform:uppercase
  }
  
  .feature-card:hover {
  box-shadow:0 20px 40px #00000059;
  transform:translateY(-8px)
  }
  
  .feature-icon-wrapper {
  align-items:center;
  background:linear-gradient(135deg,var(--feature-accent),#b14bf4ff);
  border-radius:50%;
  display:flex;
  height:64px;
  justify-content:center;
  margin:0 auto 24px;
  width:64px
  }
  
  .feature-icon-wrapper svg {
  color:var(--text-primary);
  stroke:#fff
  }
  
  .feature-title {
  color:var(--text-primary);
  font-size:22px;
  font-weight:700;
  margin:0 0 12px
  }
  
  .feature-description {
  color:var(--text-secondary);
  font-size:15px;
  line-height:1.7;
  margin:0
  }
  
  .feature-footer {
  margin-top:20px
  }
  
  .feature-link {
  color:var(--feature-accent);
  font-size:14px;
  font-weight:600;
  text-decoration:none
  }
  
  .feature-link:hover {
  text-decoration:underline
  }
  
  .payment-methods-container {
  display:none;
  margin:80px auto 0;
  max-width:1200px;
  opacity:0;
  padding:0 24px;
  transform:translateY(-20px);
  transition:all .5s ease
  }
  
  .payment-methods-container.show {
  display:block;
  opacity:1;
  transform:translateY(0)
  }
  
  .payment-methods-box {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%) border-box;
  border:2px solid transparent;
  border-radius:24px;
  padding:48px 40px;
  position:relative
  }
  
  .payment-methods-header {
  margin-bottom:40px;
  text-align:center
  }
  
  .payment-methods-header h3 {
  color:var(--text-primary);
  font-size:28px;
  font-weight:800;
  margin-bottom:12px
  }
  
  .payment-methods-header p {
  color:var(--text-secondary);
  font-size:16px
  }
  
  .payment-methods-grid {
  display:grid;
  gap:1rem;
  grid-template-columns:repeat(4,1fr);
  margin-bottom:24px
  }
  
  .payment-method-btn {
  align-items:center;
  background:#fff;
  border:2px solid #e2e8f0;
  border-radius:12px;
  cursor:pointer;
  display:flex;
  justify-content:center;
  min-height:180px;
  padding:1rem;
  position:relative;
  text-decoration:none;
  transition:all .3s
  }
  
  .payment-method-btn:hover {
  border-color:#b14bf4;
  box-shadow:0 4px 12px #b14bf426;
  transform:translateY(-2px)
  }
  
  .payment-method-btn img {
  max-height:140px;
  max-width:170px;
  object-fit:contain
  }
  
  .close-payment-methods {
  align-items:center;
  background:#ffffff1a;
  border:none;
  border-radius:50%;
  color:var(--text-primary);
  cursor:pointer;
  display:flex;
  height:36px;
  justify-content:center;
  position:absolute;
  right:20px;
  top:20px;
  transition:all .3s ease;
  width:36px
  }
  
  .close-payment-methods:hover {
  background:#fff3;
  transform:rotate(90deg)
  }
  
  @media (max-width: 768px) {
  .pricing-hero h1 {
  flex-direction:column;
  font-size:36px;
  gap:12px
  }
  
  .pricing-hero h1 .premium-star {
  margin-bottom:8px
  }
  
  .pricing-cards {
  gap:48px;
  grid-template-columns:1fr
  }
  
  .pricing-card.featured {
  transform:scale(1)
  }
  
  .pricing-card.featured:hover {
  transform:translateY(-8px)
  }
  
  .pricing-amount .price {
  font-size:48px
  }
  
  .benefits-title {
  font-size:28px
  }
  
  .payment-methods-box {
  padding:32px 24px
  }
  
  .payment-methods-grid {
  gap:1rem;
  grid-template-columns:repeat(2,1fr)
  }
  
  .payment-method-btn {
  min-height:140px;
  padding:2rem 1.5rem
  }
  
  .payment-method-btn img {
  max-height:110px;
  max-width:130px
  }
  }
  
  @media (max-width: 640px) {
  .payment-methods-grid {
  gap:1rem;
  grid-template-columns:1fr
  }
  
  .payment-method-btn {
  min-height:120px;
  padding:1.5rem 1rem
  }
  
  .payment-method-btn img {
  max-height:90px;
  max-width:100%;
  width:auto
  }
  }
  
  .guest-email-dialog {
  align-items:center;
  backdrop-filter:blur(6px);
  background:#000000b3;
  bottom:0;
  display:none;
  justify-content:center;
  left:0;
  padding:20px;
  position:fixed;
  right:0;
  top:0;
  z-index:10000
  }
  
  .guest-email-dialog.active {
  display:flex
  }
  
  .guest-email-card {
  animation:guestEmailSlideIn .25s ease;
  background:#12141a;
  border:1px solid var(--border-subtle);
  border-radius:16px;
  box-shadow:0 20px 40px #0006;
  max-width:440px;
  overflow:hidden;
  width:100%
  }
  
  @keyframes guestEmailSlideIn {
  from {
  opacity:0;
  transform:translateY(-20px)
  }
  
  to {
  opacity:1;
  transform:translateY(0)
  }
  }
  
  .guest-email-header {
  align-items:center;
  background:#ffffff08;
  border-bottom:1px solid var(--border-subtle);
  display:flex;
  justify-content:space-between;
  padding:20px 24px
  }
  
  .guest-email-header h3 {
  align-items:center;
  color:var(--text-primary);
  display:flex;
  font-size:1.1rem;
  font-weight:600;
  gap:10px;
  margin:0
  }
  
  .guest-email-header h3 svg {
  stroke:#ffffff80
  }
  
  .guest-email-close {
  align-items:center;
  background:transparent;
  border:none;
  border-radius:8px;
  color:var(--text-muted);
  cursor:pointer;
  display:flex;
  height:32px;
  justify-content:center;
  transition:all .2s;
  width:32px
  }
  
  .guest-email-close:hover {
  background:#ffffff1a;
  color:var(--text-primary)
  }
  
  .guest-email-content {
  padding:24px
  }
  
  .guest-email-label {
  color:var(--text-secondary);
  display:block;
  font-size:.9rem;
  font-weight:500;
  margin-bottom:10px
  }
  
  .guest-email-input {
  background:#ffffff0d;
  border:1px solid var(--border-subtle);
  border-radius:10px;
  box-sizing:border-box;
  color:var(--text-primary);
  font-size:1rem;
  padding:14px 16px;
  transition:all .2s;
  width:100%
  }
  
  .guest-email-input:focus {
  background:#ffffff14;
  border-color:var(--text-faint);
  outline:none
  }
  
  .guest-email-input::placeholder {
  color:var(--text-faint)
  }
  
  .guest-email-note {
  align-items:flex-start;
  background:#ffffff0a;
  border-radius:8px;
  color:var(--text-muted);
  display:flex;
  font-size:.8rem;
  gap:10px;
  line-height:1.5;
  margin-top:16px;
  padding:12px 14px
  }
  
  .guest-email-note svg {
  color:var(--text-muted);
  flex-shrink:0;
  margin-top:1px
  }
  
  .guest-email-actions {
  display:flex;
  gap:12px;
  padding:0 24px 24px
  }
  
  .guest-email-btn {
  align-items:center;
  border:none;
  border-radius:10px;
  cursor:pointer;
  display:flex;
  flex:1;
  font-size:.9rem;
  font-weight:600;
  gap:8px;
  justify-content:center;
  padding:14px 20px;
  transition:all .2s
  }
  
  .guest-email-btn-primary {
  background:#fff;
  color:#12141a
  }
  
  .guest-email-btn-primary:hover:not(:disabled) {
  background:#ffffffe6
  }
  
  .guest-email-btn-primary:disabled {
  cursor:not-allowed;
  opacity:.3
  }
  
  .guest-email-btn-secondary {
  background:#ffffff14;
  color:var(--text-secondary)
  }
  
  .guest-email-btn-secondary:hover {
  background:#ffffff1f;
  color:var(--text-primary)
  }
  
  @media (max-width: 520px) {
  .guest-email-card {
  margin:15px
  }
  
  .guest-email-header,.guest-email-content {
  padding:18px
  }
  
  .guest-email-actions {
  flex-direction:column;
  padding:0 18px 18px
  }
  
  .guest-email-btn {
  width:100%
  }
  }
  
  .toast-container {
  display:flex;
  flex-direction:column;
  gap:12px;
  pointer-events:none;
  position:fixed;
  right:24px;
  top:24px;
  z-index:9999
  }
  
  .toast {
  align-items:center;
  animation:toastIn .3s ease;
  border-radius:12px;
  box-shadow:0 10px 40px #0006;
  color:var(--text-primary);
  display:flex;
  font-size:14px;
  font-weight:500;
  gap:12px;
  max-width:400px;
  padding:16px 20px;
  pointer-events:auto
  }
  
  .toast.toast-out {
  animation:toastOut .3s ease forwards
  }
  
  .toast-success {
  background:linear-gradient(135deg,#10b981f2 0%,#059669f2 100%);
  border:1px solid #10b98180
  }
  
  .toast-error {
  background:linear-gradient(135deg,#ef4444f2 0%,#dc2626f2 100%);
  border:1px solid #ef444480
  }
  
  .toast-icon {
  flex-shrink:0
  }
  
  .toast-close {
  background:none;
  border:none;
  color:#fff;
  cursor:pointer;
  display:flex;
  margin-left:auto;
  opacity:.7;
  padding:4px;
  transition:opacity .2s
  }
  
  .toast-close:hover {
  opacity:1
  }
  
  @keyframes toastIn {
  from {
  opacity:0;
  transform:translateX(100px)
  }
  
  to {
  opacity:1;
  transform:translateX(0)
  }
  }
  
  @keyframes toastOut {
  from {
  opacity:1;
  transform:translateX(0)
  }
  
  to {
  opacity:0;
  transform:translateX(100px)
  }
  }
  
  .field-error {
  align-items:center;
  animation:fieldErrorIn .2s ease;
  color:#f87171;
  display:flex;
  font-size:13px;
  gap:6px;
  margin-top:8px
  }
  
  .field-error svg {
  flex-shrink:0
  }
  
  @keyframes fieldErrorIn {
  from {
  opacity:0;
  transform:translateY(-4px)
  }
  
  to {
  opacity:1;
  transform:translateY(0)
  }
  }
  
  .input-error {
  border-color:#ef4444!important
  }
  
  .input-error:focus {
  border-color:#ef4444!important;
  box-shadow:0 0 0 3px #ef444426!important
  }
  
  .input-success {
  border-color:#10b981!important
  }
  
  .input-success:focus {
  border-color:#10b981!important;
  box-shadow:0 0 0 3px #10b98126!important
  }
  
  .field-success {
  align-items:center;
  animation:fieldErrorIn .2s ease;
  color:#10b981;
  display:flex;
  font-size:13px;
  gap:6px;
  margin-top:8px
  }
  
  .field-success svg {
  flex-shrink:0
  }
  
  .password-requirements {
  align-items:center;
  color:var(--text-tertiary,#ffffff80);
  display:flex;
  font-size:13px;
  gap:8px;
  margin-bottom:24px;
  margin-top:-16px
  }
  
  .password-requirements svg {
  flex-shrink:0;
  opacity:.7
  }
  
  .register-section {
  align-items:center;
  display:flex;
  justify-content:center;
  min-height:calc(100vh - 80px - 250px);
  padding:40px 0
  }
  
  .register-hero {
  margin-bottom:40px;
  text-align:center
  }
  
  .register-hero h1 {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  background-clip:text;
  display:inline-block;
  font-size:48px;
  font-weight:800;
  margin-bottom:16px
  }
  
  .register-hero p {
  color:var(--text-secondary,#ffffffb3);
  font-size:16px;
  margin:0
  }
  
  .register-container {
  margin:0 auto;
  max-width:680px;
  padding:0 24px;
  width:100%
  }
  
  .register-card {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%) border-box;
  border:2px solid transparent;
  border-radius:24px;
  padding:48px
  }
  
  .register-alert {
  align-items:center;
  background:linear-gradient(175deg,#fa556026 -94.09%,#fa55600d 154.53%);
  border:1px solid #fa55604d;
  border-radius:12px;
  color:var(--text-primary,#ffffffe6);
  display:flex;
  font-size:14px;
  gap:12px;
  margin-bottom:24px;
  padding:16px 20px
  }
  
  .register-alert svg {
  color:#fa5560ff;
  flex-shrink:0
  }
  
  .register-form-group {
  margin-bottom:24px
  }
  
  .register-form-group label {
  color:var(--text-primary,#ffffffe6);
  display:block;
  font-size:14px;
  font-weight:600;
  margin-bottom:8px
  }
  
  .captcha_code,input.captcha_code {
  background-color:var(--color-input-bg,#111)!important;
  border:1px solid #242c3e!important;
  border-radius:8px!important;
  box-shadow:none!important;
  color:var(--text-primary,#efefef)!important;
  flex-grow:1;
  font-family:inherit!important;
  padding:10px 12px!important;
  transition:all .1s ease-in-out!important;
  width:100%!important
  }
  
  .captcha_code:hover,.captcha_code:focus,.captcha_code:focus-visible,input.captcha_code:hover,input.captcha_code:focus,input.captcha_code:focus-visible {
  border-color:var(--color-duckier-border)!important;
  outline:none!important
  }
  
  .captcha_code::placeholder,input.captcha_code::placeholder {
  color:var(--text-tertiary,#fff6)!important
  }
  
  .register-divider {
  align-items:center;
  display:flex;
  gap:16px;
  margin:32px 0
  }
  
  .register-divider::before,.register-divider::after {
  background:linear-gradient(to right,transparent,var(--border-subtle,#ffffff1a),transparent);
  content:'';
  flex:1;
  height:1px
  }
  
  .register-divider span {
  color:var(--text-tertiary,#ffffff80);
  font-size:14px;
  font-weight:500
  }
  
  .register-social {
  align-items:center;
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  justify-content:center
  }
  
  .register-social-btn {
  align-items:center;
  background:linear-gradient(175deg,#ffffff0d -94.09%,#ffffff05 154.53%);
  border:1px solid var(--border-subtle,#ffffff1a);
  border-radius:12px;
  display:flex;
  height:48px;
  justify-content:center;
  transition:all .3s ease;
  width:48px
  }
  
  .register-social-btn:hover {
  background:linear-gradient(175deg,#ffffff1a -94.09%,#ffffff0d 154.53%);
  border-color:#c66bd5;
  transform:translateY(-2px)
  }
  
  .register-social-btn img {
  height:24px;
  width:24px
  }
  
  .register-login {
  border-top:1px solid var(--border-subtle,#ffffff1a);
  color:var(--text-secondary,#ffffffb3);
  font-size:14px;
  margin-top:32px;
  padding-top:32px;
  text-align:center
  }
  
  .register-login a {
  color:#c66bd5;
  font-weight:600;
  text-decoration:none;
  transition:color .3s ease
  }
  
  .register-login a:hover {
  color:#d88be5
  }
  
  @media (max-width: 768px) {
  .register-hero h1 {
  font-size:36px
  }
  
  .register-card {
  padding:32px 24px
  }
  
  .register-section {
  min-height:calc(100vh - 150px);
  padding:40px 0
  }
  }
  
  @media (max-width: 400px) {
  .register-card {
  padding:24px 16px
  }
  
  .register-container {
  padding:0 12px
  }
  }
  
  .cf-turnstile,[class*="turnstile"],[class*="captcha"] {
  display:flex!important;
  justify-content:center!important;
  overflow:visible!important;
  width:100%!important
  }
  
  @media (max-width: 360px) {
  .cf-turnstile,[class*="turnstile"],[class*="captcha"] {
  transform:scale(0.9);
  transform-origin:center center
  }
  }
  
  .rm-pagination-bar {
  align-items:center;
  display:flex;
  gap:8px;
  justify-content:center;
  margin:24px 0
  }
  
  .rm-pagination-bar .page-btn {
  background:var(--color-surface,#ffffff0d);
  border:1px solid var(--border-subtle,#ffffff1a);
  border-radius:8px;
  color:var(--text-primary,#ffffffd9);
  cursor:pointer;
  font-size:14px;
  font-weight:500;
  padding:8px 16px;
  text-decoration:none;
  transition:all .2s ease
  }
  
  .rm-pagination-bar .page-btn:hover {
  background:var(--color-surface,#ffffff14);
  border-color:#b14bf44d
  }
  
  .rm-pagination-bar .page-btn.active {
  background:linear-gradient(81.02deg,#fa5560 -23.47%,#b14bf4 45.52%,#4d91ff 114.8%);
  border-color:transparent;
  color:#fff;
  font-weight:700
  }
  
  .rm-pagination-bar .page-btn.disabled {
  cursor:not-allowed;
  opacity:.4;
  pointer-events:none
  }
  
  .rm-status-badge {
  align-items:center;
  border-radius:100px;
  display:inline-flex;
  font-size:12px;
  font-weight:600;
  gap:6px;
  letter-spacing:.5px;
  padding:4px 12px;
  text-transform:uppercase
  }
  
  .rm-status-badge.pending {
  background:#f6b05d26;
  color:#f6b05d
  }
  
  .rm-status-badge.approved {
  background:#22c55e26;
  color:#22c55e
  }
  
  .rm-status-badge.rejected {
  background:#fa556026;
  color:#fa5560
  }
  
  .rm-status-badge.processing {
  background:#4d91ff26;
  color:#4d91ff
  }
  
  .rm-status-dot {
  background:currentColor;
  border-radius:50%;
  height:6px;
  width:6px
  }
  
  .rm-pdf-download-btn {
  align-items:center;
  background:linear-gradient(81.02deg,#fa556026 -23.47%,#b14bf426 45.52%,#4d91ff26 114.8%);
  border:1px solid #b14bf433;
  border-radius:10px;
  color:var(--text-primary,#ffffffd9);
  cursor:pointer;
  display:inline-flex;
  font-size:14px;
  font-weight:600;
  gap:8px;
  padding:10px 20px;
  text-decoration:none;
  transition:all .3s ease
  }
  
  .rm-pdf-download-btn:hover {
  background:linear-gradient(81.02deg,#fa556040 -23.47%,#b14bf440 45.52%,#4d91ff40 114.8%);
  border-color:#b14bf466;
  box-shadow:0 8px 24px #b14bf426;
  transform:translateY(-2px)
  }
  
  .rm-pdf-download-btn svg {
  color:#b14bf4
  }
  
  .request-money-toast {
  border-radius:12px;
  box-shadow:0 8px 32px #0000004d;
  font-size:14px;
  font-weight:600;
  padding:16px 24px;
  position:fixed;
  right:20px;
  top:20px;
  transform:translateX(120%);
  transition:transform .4s cubic-bezier(0.34,1.56,0.64,1);
  z-index:10000
  }
  
  .request-money-toast.show {
  transform:translateX(0)
  }
  
  .request-money-toast.success {
  background:linear-gradient(135deg,#22c55e33,#22c55e1a);
  border:1px solid #22c55e4d;
  color:#22c55e
  }
  
  .request-money-toast.error {
  background:linear-gradient(135deg,#fa556033,#fa55601a);
  border:1px solid #fa55604d;
  color:#fa5560
  }
  
  @media (max-width: 768px) {
  .rm-pagination-bar {
  flex-wrap:wrap
  }
  
  .request-money-toast {
  left:20px;
  right:20px
  }
  }
  
  .login-section {
  align-items:center;
  display:flex;
  justify-content:center;
  min-height:100vh;
  padding:40px 20px
  }
  
  .login-card {
  background:linear-gradient(var(--color-primary-dark,#0d1017),var(--color-primary-dark,#0d1017)) padding-box,linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%) border-box;
  border:2px solid transparent;
  border-radius:24px;
  max-width:480px;
  padding:48px;
  text-align:center;
  width:100%
  }
  
  .sms-icon-circle {
  align-items:center;
  background:linear-gradient(135deg,#fa556026,#b14bf426,#4d91ff26);
  border-radius:50%;
  display:flex;
  height:80px;
  justify-content:center;
  margin:0 auto 24px;
  width:80px
  }
  
  .sms-icon-circle svg {
  color:#b14bf4
  }
  
  .login-card h2 {
  color:var(--text-primary,#fff);
  font-size:28px;
  font-weight:800;
  margin-bottom:8px
  }
  
  .login-card .login-subtitle {
  color:var(--text-muted,#ffffff80);
  font-size:15px;
  line-height:1.6;
  margin-bottom:32px
  }
  
  .sms-code-input {
  background:var(--color-surface,#ffffff0d);
  border:1.5px solid var(--border-subtle,#ffffff1a);
  border-radius:14px;
  box-sizing:border-box;
  color:var(--text-primary,#fff);
  font-size:18px;
  font-weight:600;
  letter-spacing:8px;
  outline:none;
  padding:16px 20px;
  text-align:center;
  transition:border-color 0.3s,box-shadow .3s;
  width:100%
  }
  
  .sms-code-input:focus {
  border-color:#b14bf480;
  box-shadow:0 0 0 4px #b14bf41a
  }
  
  .sms-code-input::placeholder {
  color:var(--text-faint,#ffffff4d);
  letter-spacing:normal
  }
  
  .login-btn {
  background:linear-gradient(81.02deg,#fa5560 -23.47%,#b14bf4 45.52%,#4d91ff 114.8%);
  border:none;
  border-radius:14px;
  color:#fff;
  cursor:pointer;
  font-size:16px;
  font-weight:700;
  margin-top:16px;
  padding:16px;
  transition:all .3s ease;
  width:100%
  }
  
  .login-btn:hover {
  box-shadow:0 8px 24px #b14bf466;
  transform:translateY(-2px)
  }
  
  .sms-resend {
  color:var(--text-muted,#ffffff80);
  font-size:14px;
  margin-top:24px
  }
  
  .sms-resend a {
  color:#b14bf4;
  font-weight:600;
  text-decoration:none
  }
  
  .sms-resend a:hover {
  text-decoration:underline
  }
  
  .login-back {
  align-items:center;
  color:var(--text-muted,#ffffff80);
  display:inline-flex;
  font-size:14px;
  gap:8px;
  margin-top:24px;
  text-decoration:none;
  transition:color .3s
  }
  
  .login-back:hover {
  color:var(--text-primary,#fff)
  }
  
  @media (max-width: 768px) {
  .login-card {
  padding:32px 24px
  }
  
  .login-card h2 {
  font-size:24px
  }
  }
  
  :root {
  --accent-blue:#4d91ff;
  --accent-pink:#fa5560;
  --accent-purple:#b14bf4;
  --container-max:1400px;
  --hero-height:calc(100vh - 80px);
  --section-padding:120px;
  --security-radar-size:400px
  }
  
  html {
  scroll-behavior:smooth
  }
  
  .hero-section {
  align-items:flex-start;
  background:linear-gradient(180deg,var(--color-background) 0%,#0a0d15 100%);
  display:flex;
  min-height:var(--hero-height);
  overflow:hidden;
  padding:100px 0 80px;
  position:relative
  }
  
  .hero-grid-bg {
  background-image:linear-gradient(#b14bf408 1px,transparent 1px),linear-gradient(90deg,#b14bf408 1px,transparent 1px);
  background-size:100px 100px;
  inset:0;
  mask-image:radial-gradient(ellipse 80% 50% at 50% 40%,black 40%,transparent 100%);
  position:absolute
  }
  
  .hero-particles {
  inset:0;
  mix-blend-mode:screen;
  opacity:.6;
  position:absolute
  }
  
  .hero-container {
  align-items:start;
  display:grid;
  gap:80px;
  grid-template-columns:1.2fr 1fr;
  margin:0 auto;
  max-width:var(--container-max);
  min-height:var(--hero-height);
  padding:0 40px;
  position:relative;
  z-index:1
  }
  
  .hero-content {
  align-items:flex-start;
  animation:fadeInUp .8s ease-out;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding-top:40px
  }
  
  .hero-content-center {
  display:flex;
  flex:1;
  flex-direction:column;
  justify-content:center;
  min-height:0
  }
  
  .hero-download-bottom {
  align-items:center;
  display:flex;
  flex-direction:row;
  gap:16px;
  margin-top:8px;
  width:100%
  }
  
  .hero-download-bottom .duckier-btn {
  font-size:18px;
  padding:20px 40px
  }
  
  .hero-badge {
  align-items:center;
  background:linear-gradient(81.02deg,#fa556033 -23.47%,#b14bf433 45.52%,#4d91ff33 114.8%);
  border:1px solid var(--border-subtle);
  border-radius:100px;
  color:var(--splash-heading);
  display:inline-flex;
  font-size:14px;
  font-weight:500;
  gap:8px;
  margin-bottom:32px;
  padding:8px 20px
  }
  
  .badge-dot {
  animation:pulse-dot 2s ease-in-out infinite;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  border-radius:50%;
  height:6px;
  width:6px
  }
  
  .hero-title {
  color:var(--splash-heading);
  font-size:86px;
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.1;
  margin:0 0 24px
  }
  
  .gradient-text {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  background-clip:text;
  display:block
  }
  
  .hero-title-sub {
  -webkit-text-fill-color:var(--splash-heading);
  color:var(--splash-heading);
  display:block;
  font-size:36px;
  font-weight:500;
  letter-spacing:0;
  line-height:1.3;
  margin-bottom:8px
  }
  
  .hero-title .gradient-text {
  white-space:nowrap
  }
  
  .hero-description br {
  display:none
  }
  
  .hero-description {
  color:var(--splash-text);
  font-size:20px;
  line-height:1.7;
  margin:0 0 40px;
  max-width:600px
  }
  
  .hero-cta-group {
  display:flex;
  gap:16px;
  margin-bottom:24px
  }
  
  .hero-scroll-arrow {
  animation:bounceArrow 2s ease-in-out infinite;
  color:var(--splash-text-faint);
  display:none;
  justify-content:center;
  margin-bottom:20px;
  text-decoration:none;
  transition:color .2s
  }
  
  .hero-scroll-arrow:hover {
  color:var(--splash-heading)
  }
  
  .hero-platforms-label {
  color:var(--splash-text-muted);
  display:none;
  font-size:13px;
  font-weight:500;
  letter-spacing:.05em;
  margin-bottom:10px;
  text-align:center;
  text-transform:uppercase
  }
  
  .hero-platforms-row {
  display:none;
  gap:12px;
  justify-content:center;
  margin-bottom:16px
  }
  
  .hero-platform-icon {
  align-items:center;
  background:#ffffff0d;
  border:1px solid var(--splash-card-border);
  border-radius:12px;
  color:var(--splash-text);
  display:flex;
  height:44px;
  justify-content:center;
  text-decoration:none;
  transition:all .2s ease;
  width:44px
  }
  
  .hero-platform-icon:hover {
  background:#b14bf426;
  border-color:#b14bf466;
  color:#c66bd5;
  transform:translateY(-2px)
  }
  
  .hero-platform-icon svg {
  height:22px;
  width:22px
  }
  
  .hero-visual {
  animation:fadeIn 1s ease-out .3s both;
  height:600px;
  position:relative;
  scroll-margin-top:100px
  }
  
  @media (min-width: 769px) {
  .hero-visual {
  align-self:center;
  margin-top:-150px
  }
  }
  
  .security-radar {
  align-items:center;
  border-radius:50%;
  display:flex;
  filter:drop-shadow(0 20px 45px #05020fa6);
  height:clamp(260px,45vw,var(--security-radar-size));
  inset:0;
  justify-content:center;
  margin:auto;
  overflow:visible;
  pointer-events:none;
  position:absolute;
  width:clamp(260px,45vw,var(--security-radar-size));
  z-index:1
  }
  
  .radar-gradient {
  background:radial-gradient(circle at 50% 50%,#b14bf480,#0a0d1500);
  border-radius:50%;
  filter:blur(30px);
  inset:-90px;
  opacity:.7;
  position:absolute;
  z-index:0
  }
  
  .radar-ring {
  animation:ringDrift 26s linear infinite;
  border:1px solid var(--splash-card-border);
  border-radius:50%;
  box-shadow:0 0 40px #b14bf41f;
  mix-blend-mode:screen;
  position:absolute;
  z-index:1
  }
  
  .ring-xl {
  height:100%;
  width:100%
  }
  
  .ring-lg {
  animation-duration:32s;
  height:78%;
  width:78%
  }
  
  .ring-md {
  animation-duration:20s;
  height:56%;
  width:56%
  }
  
  .ring-sm {
  animation-duration:16s;
  height:34%;
  width:34%
  }
  
  .radar-pulse {
  animation:radarPulse 4.5s ease-out infinite;
  border:1px solid #b14bf466;
  border-radius:50%;
  height:45%;
  position:absolute;
  width:45%;
  z-index:2
  }
  
  .pulse-two {
  animation-delay:1.2s;
  height:65%;
  width:65%
  }
  
  .radar-sweep {
  animation:radarSweep 8s linear infinite;
  background:conic-gradient(from 0deg,#4d91ff73,#b14bf466,transparent 65%);
  border-radius:50%;
  filter:blur(12px);
  height:100%;
  mix-blend-mode:screen;
  opacity:.5;
  position:absolute;
  width:100%;
  z-index:1
  }
  
  .sweep-two {
  animation-delay:-3s;
  animation-duration:12s;
  opacity:.3
  }
  
  .radar-dot {
  animation:orbit var(--duration) linear infinite;
  background:linear-gradient(135deg,var(--accent-pink),var(--accent-blue));
  border-radius:50%;
  box-shadow:0 0 20px #b14bf4cc;
  height:var(--size);
  left:50%;
  position:absolute;
  top:50%;
  width:var(--size);
  z-index:3;
  --duration:14s;
  --radius:150px;
  --size:10px
  }
  
  .dot-one {
  --duration:18s;
  --radius:180px;
  --size:12px
  }
  
  .dot-two {
  animation-delay:-2s;
  --duration:14s;
  --radius:130px;
  --size:10px
  }
  
  .dot-three {
  animation-direction:reverse;
  --duration:10s;
  --radius:90px;
  --size:9px
  }
  
  .radar-core {
  align-items:center;
  animation:glowPulse 6s ease-in-out infinite;
  background:radial-gradient(circle at 30% 30%,#4d91ff73,#0a0d15f2);
  border:1px solid var(--splash-card-border);
  border-radius:40px;
  box-shadow:0 35px 70px #05020fbf inset 0 0 40px #b14bf459;
  display:flex;
  height:clamp(180px,32vw,220px);
  justify-content:center;
  position:relative;
  width:clamp(180px,32vw,220px);
  z-index:4
  }
  
  .radar-core-inner {
  align-items:center;
  background:linear-gradient(135deg,#fa556033,#b14bf426,#4d91ff40);
  border:1px solid var(--splash-card-border);
  border-radius:32px;
  box-shadow:inset 0 0 25px #b14bf466;
  color:var(--text-primary);
  display:flex;
  height:75%;
  justify-content:center;
  overflow:hidden;
  position:relative;
  width:75%
  }
  
  .radar-core-inner::after {
  background:radial-gradient(circle at 50% 20%,#ffffff59,#0a0d15cc);
  border-radius:24px;
  content:'';
  inset:12px;
  opacity:.8;
  position:absolute;
  z-index:0
  }
  
  .radar-core-inner svg {
  color:var(--text-primary);
  filter:drop-shadow(0 0 18px #b14bf4e6);
  height:72px;
  position:relative;
  stroke:currentColor;
  width:72px;
  z-index:1
  }
  
  .floating-card {
  animation:float 6s ease-in-out infinite;
  backdrop-filter:blur(10px);
  background:linear-gradient(var(--color-primary-light),var(--color-primary-light)) padding-box,linear-gradient(to bottom,#ffffff24,#ffffff14) border-box;
  border:2px solid transparent;
  border-radius:20px;
  padding:24px;
  position:absolute;
  z-index:2
  }
  
  .card-1 {
  animation-delay:0s;
  left:50px;
  top:50px;
  width:280px
  }
  
  .card-2 {
  animation-delay:-2s;
  right:80px;
  top:200px;
  width:260px
  }
  
  .card-3 {
  animation-delay:-4s;
  bottom:80px;
  left:100px;
  width:240px
  }
  
  .card-header {
  align-items:center;
  display:flex;
  gap:12px;
  margin-bottom:16px
  }
  
  .card-icon {
  align-items:center;
  background:linear-gradient(135deg,#fa5560ff 0%,#b14bf4ff 50%,#4d91ffff 100%);
  border-radius:50%;
  display:flex;
  flex-shrink:0;
  height:48px;
  justify-content:center;
  width:48px
  }
  
  .card-info {
  flex:1
  }
  
  .card-title {
  color:var(--splash-heading);
  font-size:16px;
  font-weight:700;
  margin-bottom:4px
  }
  
  .card-subtitle {
  color:var(--splash-text-muted);
  font-size:13px
  }
  
  .card-progress {
  display:flex;
  flex-direction:column;
  gap:8px
  }
  
  .progress-bar {
  background:#ffffff1a;
  border-radius:100px;
  height:6px;
  overflow:hidden
  }
  
  .progress-fill {
  animation:progress-animate 2s ease-in-out infinite;
  background:linear-gradient(90deg,#fa5560ff,#b14bf4ff,#4d91ffff);
  border-radius:100px;
  height:100%
  }
  
  .progress-text {
  color:var(--splash-text);
  font-size:12px;
  font-weight:600
  }
  
  .card-servers {
  display:flex;
  gap:6px
  }
  
  .server-dot {
  background:#ffffff26;
  border-radius:100px;
  height:6px;
  transition:all .3s ease;
  width:32px
  }
  
  .server-dot.active {
  background:linear-gradient(90deg,#fa5560ff,#b14bf4ff)
  }
  
  .speed-indicator {
  align-items:flex-end;
  display:flex;
  gap:4px;
  height:40px
  }
  
  .speed-bar {
  animation:speed-bar 1s ease-in-out infinite;
  background:linear-gradient(180deg,#b14bf4ff,#fa5560ff);
  border-radius:4px;
  flex:1
  }
  
  .speed-bar:nth-child(1) {
  animation-delay:0s;
  height:60%
  }
  
  .speed-bar:nth-child(2) {
  animation-delay:.1s;
  height:80%
  }
  
  .speed-bar:nth-child(3) {
  animation-delay:.2s;
  height:100%
  }
  
  .speed-bar:nth-child(4) {
  animation-delay:.3s;
  height:70%
  }
  
  .hero-circle {
  animation:rotate 20s linear infinite;
  border:2px solid #b14bf41a;
  border-radius:50%;
  position:absolute
  }
  
  .circle-1 {
  animation-duration:25s;
  height:200px;
  right:10%;
  top:10%;
  width:200px
  }
  
  .circle-2 {
  animation-direction:reverse;
  animation-duration:35s;
  bottom:5%;
  height:300px;
  right:5%;
  width:300px
  }
  
  .circle-3 {
  animation-duration:30s;
  height:150px;
  right:30%;
  top:50%;
  width:150px
  }
  
  .section-container {
  margin:0 auto;
  max-width:var(--container-max);
  padding:0 40px
  }
  
  .section-header-center {
  margin-bottom:80px;
  text-align:center
  }
  
  .section-badge {
  background:linear-gradient(81.02deg,#fa55601f -23.47%,#b14bf41f 45.52%,#4d91ff1f 114.8%);
  border:1px solid #b14bf440;
  border-radius:100px;
  display:inline-block;
  font-size:13px;
  font-weight:600;
  letter-spacing:.5px;
  margin-bottom:20px;
  padding:6px 16px;
  text-transform:uppercase
  }

  .section-badge span {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560 -23.47%,#b14bf4 45.52%,#4d91ff 114.8%);
  background-clip:text
  }
  
  .section-title {
  color:var(--splash-heading);
  font-size:72px;
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.1;
  margin:0 0 20px;
  text-align:left
  }

  .section-header-center .section-title {
  text-align:center
  }
  
  .section-scroll-down {
  align-items:center;
  animation:bounceArrow 2s ease-in-out infinite;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:50%;
  backdrop-filter:blur(12px) saturate(180%);
  -webkit-backdrop-filter:blur(12px) saturate(180%);
  color:var(--splash-text);
  display:flex;
  height:48px;
  justify-content:center;
  margin:-10px auto 0;
  position:relative;
  text-decoration:none;
  transition:all .4s ease;
  width:48px;
  z-index:2;
  box-shadow:0 0 20px rgba(255,255,255,0.05),0 6px 24px rgba(0,0,0,0.2),inset 0 1px 1px rgba(255,255,255,0.15),inset 0 -1px 1px rgba(0,0,0,0.3)
  }
  
  .section-description {
  color:var(--splash-text);
  font-size:20px;
  line-height:1.6;
  margin:0 auto;
  max-width:700px
  }
  
  .section-description-left {
  color:var(--splash-text);
  font-size:18px;
  line-height:1.7;
  margin-bottom:32px
  }
  
  .global-network-section {
  background:radial-gradient(ellipse at 80% 50%,#fa55604d 0%,transparent 50%),radial-gradient(ellipse at 20% 80%,#b14bf44d 0%,transparent 50%),radial-gradient(ellipse at 50% 30%,#4d91ff4d 0%,transparent 50%),linear-gradient(135deg,#1e3a8a4d 0%,#3b1e5f4d 30%,#7c2d5e4d 60%,#1a1f3a4d 100%);
  overflow:hidden;
  padding:var(--section-padding) 0;
  position:relative;
  scroll-margin-top:120px
  }
  
  .global-network-section::after {
  background:linear-gradient(180deg,var(--color-background) 0%,transparent 20%,transparent 80%,var(--color-background) 100%);
  content:'';
  inset:0;
  pointer-events:none;
  position:absolute;
  z-index:0
  }
  
  .global-network-layout {
  align-items:center;
  display:grid;
  gap:60px;
  grid-template-columns:1fr 1fr
  }
  
  .global-network-text {
  text-align:left;
  }
  
  .global-network-text .section-description-left {
  color:var(--splash-text);
  font-size:16px;
  line-height:1.6
  }
  
  .world-map-container {
    position: relative;
    max-width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: stretch;
  }
  
  .world-map-shell {
    position: relative;
    border-radius: 32px;
    padding: 2px;
    background: linear-gradient(135deg, rgba(250, 85, 96, 0.5), rgba(177, 75, 244, 0.35), rgba(77, 145, 255, 0.45));
    perspective: 1400px;
  }
  
  .world-map-panel {
  background:#070b19eb;
  border:1px solid var(--splash-card-border);
  border-radius:16px;
  box-shadow:0 30px 65px #03050cb3;
  overflow:hidden;
  padding:32px;
  position:relative;
  transform:rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-style:preserve-3d;
  transition:transform .4s ease,box-shadow .4s ease,filter .4s ease;
  --tilt-x:0;
  --tilt-y:0
  }
  
  .world-map-grid {
  animation:gridPulse 6s ease-in-out infinite;
  background-image:linear-gradient(#ffffff0a 1px,transparent 1px),linear-gradient(90deg,#ffffff0a 1px,transparent 1px);
  background-size:80px 80px;
  inset:0;
  mix-blend-mode:screen;
  opacity:.4;
  position:absolute
  }
  
  .map-axis-label {
  color:var(--splash-text-faint);
  font-size:9px;
  font-weight:600;
  letter-spacing:.06em;
  position:absolute;
  text-transform:uppercase;
  z-index:2
  }
  
  .map-axis-label-top-left {
  left:16px;
  top:12px
  }
  
  .map-axis-label-top-right {
  right:16px;
  top:12px
  }
  
  .map-axis-label-bottom-left {
  bottom:12px;
  left:16px
  }
  
  .map-axis-label-bottom-right {
  bottom:12px;
  right:16px
  }
  
  .map-axis-label-middle-left {
  left:12px;
  top:50%;
  transform:rotate(-90deg) translateY(-50%);
  transform-origin:left center
  }
  
  .map-axis-label-middle-right {
  right:12px;
  top:50%;
  transform:rotate(90deg) translateY(-50%);
  transform-origin:right center
  }
  
  .world-map {
  display:block;
  filter:saturate(0.8);
  height:auto;
  opacity:.45;
  width:100%
  }
  
  .map-points {
  inset:0;
  position:absolute;
  z-index:3
  }
  
  .map-point-wrapper {
  cursor:pointer;
  display:flex;
  filter:drop-shadow(0 0 12px #b14bf480);
  height:14px;
  position:absolute;
  transition:transform .2s ease,opacity .2s ease;
  width:14px
  }
  
  .map-point-wrapper:hover,.map-point-wrapper:focus-visible {
  outline:none;
  transform:scale(1.1)
  }
  
  .map-point-wrapper.dimmed {
  filter:grayscale(0.4);
  opacity:.25
  }
  
  .map-point-wrapper .duckier-map-point,.map-point-wrapper .duckier-map-point-inner {
  pointer-events:none
  }
  
  .map-point-label {
  color:var(--splash-text);
  font-size:9px;
  font-weight:600;
  left:50%;
  letter-spacing:.04em;
  position:absolute;
  text-transform:uppercase;
  top:-22px;
  transform:translateX(-50%);
  white-space:nowrap
  }
  
  .map-point-wrapper.active .map-point-label {
  color:var(--splash-heading)
  }
  
  .map-spotlight-card {
  backdrop-filter:blur(12px);
  background:#0a0f1ce6;
  border:1px solid var(--splash-card-border);
  border-radius:12px;
  box-shadow:0 8px 24px #03050c99;
  max-width:200px;
  min-width:160px;
  opacity:0;
  padding:10px 12px;
  pointer-events:none;
  position:absolute;
  transform:translate(-50%,20%);
  transition:opacity .25s ease,transform .25s ease;
  z-index:4
  }
  
  .map-spotlight-card.visible {
  opacity:1;
  pointer-events:auto
  }
  
  .spotlight-meta {
  margin-bottom:6px
  }
  
  .spotlight-region {
  color:var(--splash-text-muted);
  font-size:10px;
  letter-spacing:.1em;
  margin:0 0 2px;
  text-transform:uppercase
  }
  
  .spotlight-location {
  color:var(--splash-heading);
  font-size:13px;
  font-weight:700;
  margin:0
  }
  
  .spotlight-stats {
  display:flex;
  flex-wrap:wrap;
  gap:6px 12px
  }
  
  .spotlight-label {
  color:var(--splash-text-muted);
  display:block;
  font-size:9px;
  letter-spacing:.08em;
  margin-bottom:2px;
  text-transform:uppercase
  }
  
  .spotlight-value {
  color:var(--splash-heading);
  font-size:12px;
  font-weight:700
  }
  
  .world-map-panel.spotlight-locked .world-map,.world-map-panel.spotlight-locked .world-map-grid {
  filter:blur(2px) brightness(0.8)
  }
  
  .map-region-tabs {
  clear:both;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  margin-top:40px;
  width:100%
  }
  
  .region-chip {
  background:#080c18cc;
  border:1px solid var(--splash-card-border);
  border-radius:999px;
  color:var(--splash-text);
  cursor:pointer;
  font-size:13px;
  font-weight:600;
  letter-spacing:.04em;
  padding:10px 20px;
  text-transform:uppercase;
  transition:all .2s ease
  }
  
  .region-chip.active {
  background:linear-gradient(135deg,#fa556026,#b14bf426);
  border-color:#b14bf480;
  box-shadow:0 8px 24px #00000059;
  color:var(--splash-heading)
  }
  
  .map-region-meta {
  text-align:center
  }
  
  .map-region-meta-primary {
  color:var(--splash-heading);
  font-size:22px;
  font-weight:700;
  margin-bottom:6px
  }
  
  .map-region-meta-secondary {
  color:var(--splash-text);
  font-size:15px
  }
  
  .features-section {
  background:var(--color-background);
  overflow:hidden;
  padding:var(--section-padding) 0;
  position:relative;
  scroll-margin-top:10px
  }

  .features-section .section-header-center {
  margin-bottom:50px
  }
  
  .features-grid {
  display:grid;
  gap:32px;
  grid-template-columns:repeat(3,1fr)
  }
  
  .feature-card {
  background:radial-gradient(circle at 30% 30%,var(--feature-accent-soft),transparent 60%),linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(to bottom,#ffffff14,#ffffff0a) border-box;
  border:1px solid transparent;
  border-radius:24px;
  padding:40px 32px;
  text-align:center;
  transition:all .4s cubic-bezier(0.4,0,0.2,1);
  --feature-accent:#fa5560;
  --feature-accent-soft:#fa55601f
  }
  
  .feature-card[data-theme="blue"] {
  --feature-accent:#4d91ff;
  --feature-accent-soft:#4d91ff26
  }
  
  .feature-card[data-theme="teal"] {
  --feature-accent:#2fd1b2;
  --feature-accent-soft:#2fd1b22e
  }
  
  .feature-card[data-theme="amber"] {
  --feature-accent:#ffb347;
  --feature-accent-soft:#ffb3472e
  }
  
  .feature-card[data-theme="violet"] {
  --feature-accent:#c66bd5;
  --feature-accent-soft:#c66bd533
  }
  
  .feature-card[data-theme="indigo"] {
  --feature-accent:#6a6bff;
  --feature-accent-soft:#6a6bff2e
  }
  
  .feature-badge {
  align-items:center;
  background:var(--feature-accent-soft);
  border:none;
  border-radius:999px;
  color:var(--feature-accent);
  display:inline-flex;
  display:inline-flex;
  font-size:12px;
  font-weight:700;
  justify-content:center;
  letter-spacing:.08em;
  margin-bottom:16px;
  padding:6px 14px;
  text-transform:uppercase
  }
  
  .feature-card:hover {
  box-shadow:0 20px 40px #00000059;
  transform:translateY(-8px)
  }
  
  .feature-icon-wrapper {
  align-items:center;
  background:linear-gradient(135deg,var(--feature-accent),#b14bf4ff);
  border-radius:50%;
  display:flex;
  height:64px;
  justify-content:center;
  margin:0 auto 24px;
  width:64px
  }
  
  .feature-title {
  color:var(--splash-heading);
  font-size:22px;
  font-weight:700;
  margin:0 0 12px
  }
  
  .feature-description {
  color:var(--splash-text);
  font-size:15px;
  line-height:1.7;
  margin:0
  }
  
  .feature-footer {
  margin-top:20px
  }
  
  .feature-link {
  color:var(--feature-accent);
  font-size:14px;
  font-weight:600;
  text-decoration:none
  }
  
  .feature-link:hover {
  text-decoration:underline
  }
  
  .how-section {
  background:linear-gradient(135deg,#080a12ff 0%,#0e1020ff 50%,#121224ff 100%);
  overflow:hidden;
  padding:var(--section-padding) 0;
  position:relative
  }
  
  .how-section::before {
  background:radial-gradient(circle at 20% 20%,#b14bf426,transparent 50%),radial-gradient(circle at 80% 80%,#4d91ff1f,transparent 55%);
  content:'';
  inset:0;
  opacity:.7;
  pointer-events:none;
  position:absolute
  }
  
  .how-grid {
  display:grid;
  gap:48px;
  grid-template-columns:repeat(3,1fr);
  margin-top:60px;
  position:relative
  }
  
  .how-grid::before {
  background:linear-gradient(90deg,#fa556000,#fa556066,#4d91ff00);
  content:'';
  height:2px;
  left:10%;
  position:absolute;
  right:10%;
  top:72px;
  z-index:0
  }
  
  .how-card {
  backdrop-filter:blur(8px);
  background:#0f121eb3;
  border:1px solid var(--splash-card-border);
  border-radius:24px;
  box-shadow:0 15px 35px #05060c99;
  padding:32px 24px;
  position:relative;
  text-align:center;
  z-index:1
  }
  
  .how-card::after {
  background:linear-gradient(135deg,#fa5560ff,#b14bf4ff);
  border-radius:50%;
  box-shadow:0 0 15px #b14bf4cc;
  content:'';
  height:12px;
  left:50%;
  position:absolute;
  top:80px;
  transform:translateX(-50%);
  width:12px
  }
  
  .how-card:last-child::after {
  background:linear-gradient(135deg,#b14bf4ff,#4d91ffff)
  }
  
  .how-icon {
  height:96px;
  margin:0 auto 24px;
  position:relative;
  width:96px
  }
  
  .how-icon-inner {
  align-items:center;
  background:linear-gradient(135deg,#fa556033,#b14bf433,#4d91ff4d);
  border:1px solid var(--splash-card-border);
  border-radius:24px;
  box-shadow:inset 0 0 25px #b14bf440;
  display:flex;
  height:100%;
  justify-content:center;
  position:relative;
  width:100%
  }
  
  .how-icon-inner svg {
  color:var(--text-primary);
  stroke:currentColor
  }
  
  .how-icon-step {
  align-items:center;
  background:linear-gradient(135deg,#4d91ffff,#b14bf4ff);
  border:2px solid #080a12ff;
  border-radius:50%;
  bottom:-8px;
  box-shadow:0 10px 25px #0a0d1599;
  color:var(--text-primary);
  display:inline-flex;
  font-size:15px;
  font-weight:700;
  height:38px;
  justify-content:center;
  position:absolute;
  right:-8px;
  width:38px
  }
  
  .how-title {
  color:var(--splash-heading);
  font-size:24px;
  font-weight:700;
  margin:0 0 12px
  }
  
  .how-description {
  color:var(--splash-text);
  font-size:16px;
  line-height:1.6;
  margin:0
  }
  
  .how-cta-row {
  align-items:center;
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  justify-content:center;
  margin-top:48px
  }
  
  .how-trust-chip {
  align-items:center;
  background:#ffffff0a;
  border:1px solid var(--splash-card-border);
  border-radius:999px;
  color:var(--splash-heading);
  display:inline-flex;
  font-size:14px;
  font-weight:600;
  gap:8px;
  padding:10px 18px
  }
  
  .how-trust-chip svg {
  color:#b14bf4ff
  }
  
  .how-cta-btn {
  font-size:16px;
  padding:14px 28px;
  width:fit-content
  }
  
  .how-platforms-row {
  align-items:center;
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  justify-content:center;
  margin-top:32px
  }
  
  .how-platforms-label {
  color:var(--splash-text-muted);
  font-size:14px;
  font-weight:500
  }
  
  .how-platforms-icons {
  align-items:center;
  display:flex;
  gap:12px
  }
  
  .how-platform-icon {
  align-items:center;
  background:#ffffff0d;
  border:1px solid var(--splash-card-border);
  border-radius:12px;
  color:var(--splash-text);
  display:flex;
  height:44px;
  justify-content:center;
  transition:all .2s ease;
  width:44px
  }
  
  .how-platform-icon:hover {
  background:#b14bf426;
  border-color:#b14bf466;
  color:#c66bd5;
  transform:translateY(-2px)
  }
  
  .how-platform-icon svg {
  height:22px;
  width:22px
  }
  
  .card-icon svg,.feature-icon-wrapper svg {
  color:var(--text-primary);
  stroke:#fff
  }
  
  .mobile-br,.carousel-arrow,.carousel-dots,.features-scroll-down {
  display:none
  }
  
  .global-network-section .section-container,.how-section .section-container {
  position:relative;
  z-index:1
  }
  
  @media (max-width: 1280px) {
  .how-grid {
  gap:36px;
  grid-template-columns:1fr;
  margin-left:auto;
  margin-right:auto;
  max-width:540px
  }
  
  .how-grid::before {
  background:linear-gradient(180deg,#fa556000,#fa556073,#b14bf400);
  bottom:90px;
  height:auto;
  left:calc(50% - 1px);
  right:auto;
  top:90px;
  width:2px
  }
  
  .how-card {
  margin:0 auto;
  max-width:500px
  }
  
  .how-card::after {
  top:90px
  }
  }
  
  .stats-showcase-section {
  background:radial-gradient(ellipse at 80% 50%,#fa55604d 0%,transparent 50%),radial-gradient(ellipse at 20% 80%,#b14bf44d 0%,transparent 50%),radial-gradient(ellipse at 50% 30%,#4d91ff4d 0%,transparent 50%),linear-gradient(135deg,#1e3a8a4d 0%,#3b1e5f4d 30%,#7c2d5e4d 60%,#1a1f3a4d 100%);
  overflow:hidden;
  padding:var(--section-padding) 0;
  position:relative
  }
  
  .stats-showcase-section::after {
  background:linear-gradient(180deg,var(--color-background) 0%,transparent 20%,transparent 80%,var(--color-background) 100%);
  content:'';
  inset:0;
  pointer-events:none;
  position:absolute;
  z-index:0
  }
  
  .stats-showcase-section .section-container {
  position:relative;
  z-index:1
  }
  
  .stats-showcase-content .duckier-btn {
  margin-top:20px
  }
  
  .stats-showcase-items {
  display:grid;
  gap:24px;
  grid-template-columns:repeat(2,1fr)
  }
  
  .stat-showcase-card {
  backdrop-filter:blur(10px);
  background:radial-gradient(circle at 30% 40%,#b14bf414,transparent 50%),radial-gradient(circle at 70% 60%,#4d91ff0f,transparent 50%),#1c212a99;
  border:1px solid var(--splash-card-border);
  border-radius:24px;
  box-shadow:0 8px 32px #0000004d;
  overflow:hidden;
  padding:32px 24px;
  position:relative;
  text-align:center
  }
  
  .stat-showcase-number {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  background-clip:text
  }
  
  .stat-showcase-label {
  color:var(--splash-text);
  font-size:15px;
  font-weight:500;
  margin-top:12px
  }
  
  .pricing-section {
  background:var(--color-primary-dark);
  padding:var(--section-padding) 0;
  scroll-margin-top:20px
  }
  
  .pricing-hero {
  margin-bottom:60px;
  text-align:center
  }
  
  .pricing-hero h1 {
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%);
  background-clip:text;
  display:inline-block;
  font-size:48px;
  font-weight:800;
  margin-bottom:16px
  }
  
  .pricing-hero p {
  color:var(--splash-text);
  font-size:18px;
  margin:0 auto;
  max-width:600px
  }
  
  .billing-toggle {
  background:#ffffff0d;
  border:1px solid var(--splash-card-border);
  border-radius:999px;
  display:inline-flex;
  gap:4px;
  margin-top:24px;
  padding:4px
  }
  
  .billing-option {
  background:transparent;
  border:none;
  border-radius:999px;
  color:var(--splash-text);
  cursor:pointer;
  font-weight:600;
  padding:10px 18px;
  transition:all .2s ease
  }
  
  .billing-option span {
  font-size:12px;
  margin-left:4px;
  opacity:.8
  }
  
  .billing-option.active {
  background:linear-gradient(135deg,#fa556026,#b14bf426);
  color:var(--text-primary)
  }
  
  .pricing-cards {
  display:grid;
  gap:32px;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  margin:0 auto;
  max-width:1200px;
  padding:0 24px
  }
  
  .pricing-card {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(to bottom,#ffffff24,#ffffff14) border-box;
  border:2px solid transparent;
  border-radius:24px;
  display:flex;
  flex-direction:column;
  padding:40px 32px;
  position:relative;
  transition:all .3s ease!important
  }
  
  .pricing-card:hover {
  transform:translateY(-8px)!important
  }
  
  .pricing-card.featured {
  background:linear-gradient(var(--color-primary-light),var(--color-primary-light)) padding-box,linear-gradient(81.02deg,#fa5560ff -23.47%,#b14bf4ff 45.52%,#4d91ffff 114.8%) border-box;
  border:2px solid transparent;
  transform:scale(1.05)!important
  }
  
  .pricing-card.featured:hover {
  transform:scale(1.05) translateY(-8px)!important
  }
  
  .pricing-badge {
  background:linear-gradient(#1e1e32cc,#1e1e32cc) padding-box,linear-gradient(to right,#fd941366,#ff69b4aa,#b14bf4cc,#ac65cbaa,#3aafd388) border-box;
  border:1px solid transparent;
  border-radius:100px;
  backdrop-filter:blur(12px) saturate(180%);
  -webkit-backdrop-filter:blur(12px) saturate(180%);
  color:var(--text-secondary);
  font-size:14px;
  font-weight:700;
  left:50%;
  letter-spacing:.5px;
  padding:8px 24px;
  position:absolute;
  text-transform:uppercase;
  top:-16px;
  transform:translateX(-50%)
  }
  
  .pricing-duration {
  color:var(--splash-heading);
  font-size:18px;
  font-weight:600;
  margin-bottom:16px
  }
  
  .pricing-amount {
  margin-bottom:24px
  }
  
  .pricing-amount .currency {
  color:var(--splash-heading);
  font-size:32px;
  font-weight:700;
  vertical-align:top
  }
  
  .pricing-amount .price {
  color:var(--splash-heading);
  font-size:64px;
  font-weight:800;
  line-height:1
  }
  
  .pricing-amount .period {
  color:var(--splash-text);
  font-size:18px;
  margin-left:4px
  }
  
  .pricing-subtext {
  color:var(--splash-text);
  font-size:15px;
  margin:8px 0 24px
  }
  
  .pricing-savings {
  background:#c66bd526;
  border:1px solid #c66bd54d;
  border-radius:12px;
  color:#c66bd5ff;
  font-size:14px;
  font-weight:600;
  margin-bottom:32px;
  padding:12px 16px;
  text-align:center
  }
  
  .pricing-features {
  flex-grow:1;
  list-style:none;
  margin:0;
  padding:0
  }
  
  .pricing-features li {
  align-items:flex-start;
  color:var(--splash-heading);
  display:flex;
  font-size:15px;
  gap:12px;
  line-height:1.6;
  padding:12px 0
  }
  
  .pricing-features li svg {
  flex-shrink:0;
  margin-top:2px
  }
  
  .plan-cta {
  margin-bottom:20px
  }
  
  .security-modern-section {
  background:var(--color-background);
  padding:var(--section-padding) 0;
  scroll-margin-top:0
  }
  
  .security-modern-visual {
  align-items:center;
  display:flex;
  height:500px;
  justify-content:center;
  position:relative
  }
  
  .security-features-list {
  display:flex;
  flex-direction:column;
  gap:24px;
  margin-bottom:32px
  }
  
  .security-list-item {
  border-bottom:1px solid var(--splash-card-border);
  display:flex;
  gap:16px;
  padding:20px 0
  }
  
  .security-list-item:last-child {
  border-bottom:none
  }
  
  .security-list-icon {
  align-items:center;
  background:linear-gradient(135deg,#fa5560ff 0%,#b14bf4ff 50%,#4d91ffff 100%);
  border-radius:50%;
  display:flex;
  flex-shrink:0;
  height:48px;
  justify-content:center;
  width:48px
  }
  
  .security-list-icon svg {
  color:var(--text-primary);
  stroke:#fff
  }
  
  .security-list-title {
  color:var(--splash-heading);
  font-size:18px;
  font-weight:700;
  margin-bottom:4px
  }
  
  .security-list-desc {
  color:var(--splash-text-muted);
  font-size:14px
  }
  
  .cta-modern-section {
  background:linear-gradient(180deg,var(--color-primary-dark) 0%,#0a0d15 100%);
  overflow:hidden;
  padding:150px 0;
  position:relative
  }
  
  .cta-modern-section::before {
  background:radial-gradient(ellipse 100% 100% at 50% 50%,#b14bf414 0%,transparent 70%);
  content:'';
  inset:0;
  position:absolute
  }
  
  .cta-modern-container {
  margin:0 auto;
  max-width:900px;
  padding:0 40px;
  position:relative;
  z-index:1
  }
  
  .cta-modern-content {
  text-align:center
  }
  
  .cta-modern-title {
  color:var(--splash-heading);
  font-size:64px;
  font-weight:900;
  letter-spacing:-.02em;
  line-height:1.15;
  margin:0 0 24px
  }
  
  .cta-modern-description {
  color:var(--splash-text);
  font-size:22px;
  line-height:1.6;
  margin:0 0 40px
  }
  
  .cta-modern-buttons {
  display:flex;
  justify-content:center;
  margin-bottom:24px
  }
  
  .cta-btn-large {
  align-items:center;
  display:inline-flex;
  font-size:18px;
  font-weight:700;
  gap:10px;
  padding:20px 48px
  }
  
  .cta-modern-note {
  color:var(--splash-text-faint);
  font-size:14px
  }
  
  .stats-showcase-grid,.security-modern-grid {
  align-items:center;
  display:grid;
  gap:80px;
  grid-template-columns:1fr 1fr
  }
  
  .stat-showcase-value,.stat-showcase-suffix {
  display:inline;
  font-size:56px;
  font-weight:900;
  line-height:1
  }
  
  @media (min-width: 769px) {
  .fade-in-section {
  opacity:0;
  transform:translateY(40px);
  transition:all .8s cubic-bezier(0.4,0,0.2,1)
  }
  
  .fade-in-item {
  opacity:0;
  transform:translateY(30px);
  transition:all .6s cubic-bezier(0.4,0,0.2,1);
  transition-delay:var(--delay,0s)
  }
  
  .fade-in-section.visible,.fade-in-section.visible .fade-in-item {
  opacity:1;
  transform:translateY(0)
  }
  }
  
  @keyframes fadeInUp {
  from {
  opacity:0;
  transform:translateY(30px)
  }
  
  to {
  opacity:1;
  transform:translateY(0)
  }
  }
  
  @keyframes fadeIn {
  from {
  opacity:0
  }
  
  to {
  opacity:1
  }
  }
  
  @keyframes gridPulse {
  0%,100% {
  opacity:.25
  }
  
  50% {
  opacity:.5
  }
  }
  
  @keyframes float {
  0%,100% {
  transform:translateY(0)
  }
  
  50% {
  transform:translateY(-20px)
  }
  }
  
  @keyframes bounceArrow {
  0%,100% {
  transform:translateY(0)
  }
  
  50% {
  transform:translateY(10px)
  }
  }
  
  @keyframes pulse-dot {
  0%,100% {
  opacity:1;
  transform:scale(1)
  }
  
  50% {
  opacity:.6;
  transform:scale(0.9)
  }
  }
  
  @keyframes rotate {
  from {
  transform:rotate(0deg)
  }
  
  to {
  transform:rotate(360deg)
  }
  }
  
  @keyframes progress-animate {
  0%,100% {
  opacity:1
  }
  
  50% {
  opacity:.7
  }
  }
  
  @keyframes speed-bar {
  0%,100% {
  opacity:1;
  transform:scaleY(1)
  }
  
  50% {
  opacity:.6;
  transform:scaleY(0.5)
  }
  }
  
  @keyframes radarPulse {
  0% {
  opacity:.7;
  transform:scale(0.5)
  }
  
  70% {
  opacity:0
  }
  
  100% {
  opacity:0;
  transform:scale(1.35)
  }
  }
  
  @keyframes radarSweep {
  from {
  transform:rotate(0deg)
  }
  
  to {
  transform:rotate(360deg)
  }
  }
  
  @keyframes orbit {
  from {
  transform:translate(-50%,-50%) rotate(0deg) translateX(var(--radius,140px)) rotate(0deg)
  }
  
  to {
  transform:translate(-50%,-50%) rotate(360deg) translateX(var(--radius,140px)) rotate(-360deg)
  }
  }
  
  @keyframes glowPulse {
  0%,100% {
  box-shadow:0 35px 70px #05020fbf inset 0 0 40px #b14bf459
  }
  
  50% {
  box-shadow:0 45px 90px #05020fd9 inset 0 0 55px #4d91ff73
  }
  }
  
  @keyframes ringDrift {
  0% {
  transform:rotate(0deg)
  }
  
  50% {
  transform:rotate(180deg)
  }
  
  100% {
  transform:rotate(360deg)
  }
  }
  
  @media (max-width: 1200px) {
  .hero-visual {
  display:none
  }
  
  .features-grid {
  grid-template-columns:repeat(2,1fr)
  }
  
  .world-map-panel {
  padding:24px
  }
  
  .hero-container,.stats-showcase-grid,.security-modern-grid {
  gap:60px;
  grid-template-columns:1fr
  }
  }
  
  @media (max-width: 768px) {
  :root {
  --section-padding:80px;
  --security-radar-size:200px
  }
  
  .section-title {
  text-align:center
  }

  .security-modern-section {
  scroll-margin-top:20px
  }

  .security-modern-content {
  text-align:center
  }

  .security-modern-content .security-features-list {
  text-align:left
  }

  .security-modern-visual {
  display:none;
  height:280px
  }

  .security-radar {
  height:200px;
  height:200px;
  width:200px;
  width:200px
  }
  
  .radar-gradient {
  filter:blur(20px);
  inset:-40px
  }
  
  .radar-core-inner svg {
  height:44px;
  width:44px
  }
  
  .hero-section {
  align-items:stretch;
  min-height:auto;
  padding:40px 0 0
  }
  
  .hero-content {
  align-items:center;
  display:flex;
  flex-direction:column;
  min-height:calc(100dvh - 80px);
  overflow:visible;
  padding-top:0;
  text-align:center
  }
  
  .hero-content-center {
  align-items:center;
  justify-content:flex-start;
  padding-top:90px
  }
  
  .mobile-br {
  display:inline
  }
  
  .section-scroll-down {
  align-items:center;
  animation:bounceArrow 2s ease-in-out infinite;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:50%;
  backdrop-filter:blur(12px) saturate(180%);
  -webkit-backdrop-filter:blur(12px) saturate(180%);
  color:var(--splash-text);
  display:flex;
  height:48px;
  justify-content:center;
  margin:-80px auto 0;
  margin-bottom:24px;
  position:relative;
  text-decoration:none;
  transition:all .4s ease;
  width:48px;
  z-index:2;
  box-shadow:0 0 20px rgba(255,255,255,0.05),0 6px 24px rgba(0,0,0,0.2),inset 0 1px 1px rgba(255,255,255,0.15),inset 0 -1px 1px rgba(0,0,0,0.3)
  }
  
  .hero-download-bottom {
  align-items:center;
  flex-direction:column;
  margin-top:60px;
  padding-bottom:32px
  }
  
  .hero-description {
  font-size:14px;
  font-size:15px;
  margin-left:auto;
  margin-right:auto
  }
  
  .hero-scroll-arrow {
  display:flex;
  margin-top:36px
  }
  
  .hero-scroll-arrow svg {
  height:56px;
  width:56px
  }
  
  .hero-platforms-row {
  display:flex
  }
  
  .hero-title {
  font-size:44px;
  line-height:1.05
  }
  
  .hero-title-sub {
  font-size:28px
  }
  
  .hero-title .gradient-text {
  white-space:normal
  }
  
  .global-network-section {
  display:flex;
  flex-direction:column;
  height:100vh;
  height:100dvh;
  justify-content:space-between;
  overflow:hidden;
  scroll-margin-top:0
  }
  
  .global-network-section .section-container {
  display:flex;
  flex:1;
  flex-direction:column;
  justify-content:center
  }
  
  .global-network-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
  }

  .global-network-text {
  text-align:center
  }
  
  .hero-description,.section-description,.cta-modern-description {
  font-size:18px
  }
  
  .hero-cta-group {
  flex-direction:column;
  margin-bottom:0
  }
  
  .hero-download-bottom .duckier-btn {
  font-size:17px!important;
  justify-content:center;
  max-width:340px;
  padding:16px 28px;
  text-align:center;
  width:100%
  }
  
  .how-grid,.pricing-cards,.stats-showcase-items {
  grid-template-columns:1fr
  }
  
  .features-section {
  display:flex;
  flex-direction:column;
  height:calc(100vh - 92px);
  height:calc(100dvh - 92px);
  justify-content:flex-start;
  overflow:hidden;
  padding:16px 0 0;
  scroll-margin-top:92px;
  scroll-snap-align:start
  }
  
  .features-section .section-container {
  max-width:100vw;
  overflow:hidden;
  padding-left:0;
  padding-right:0;
  position:relative
  }
  
  .features-section .section-header-center {
  margin-bottom:4px;
  padding:0 24px
  }
  
  .features-scroll-down {
  align-items:center;
  animation:bounceArrow 2s ease-in-out infinite;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:50%;
  backdrop-filter:blur(12px) saturate(180%);
  -webkit-backdrop-filter:blur(12px) saturate(180%);
  color:var(--splash-text);
  display:flex;
  height:48px;
  justify-content:center;
  margin:-110px auto 0;
  position:relative;
  text-decoration:none;
  transition:all .4s ease;
  width:48px;
  z-index:10;
  box-shadow:0 0 20px rgba(255,255,255,0.05),0 6px 24px rgba(0,0,0,0.2),inset 0 1px 1px rgba(255,255,255,0.15),inset 0 -1px 1px rgba(0,0,0,0.3)
  }
  
  .features-grid {
  display:flex;
  gap:0;
  margin:0;
  padding:0;
  transition:transform .6s cubic-bezier(0.16,1,0.3,1);
  will-change:transform
  }
  
  .features-grid.is-dragging {
  transition:none
  }
  
  .features-grid .feature-card {
  box-sizing:border-box;
  flex-shrink:0;
  margin:0 24px;
  max-width:calc(100vw - 48px);
  min-width:calc(100vw - 48px);
  padding:28px 20px
  }
  
  .carousel-dots {
  align-items:center;
  display:flex;
  gap:8px;
  justify-content:center;
  padding:14px 0 0
  }
  
  .carousel-dot {
  background:#fff3;
  border:none;
  border-radius:50%;
  cursor:pointer;
  height:8px;
  padding:0;
  transition:all .3s cubic-bezier(0.4,0,0.2,1);
  width:8px
  }
  
  .carousel-dot.active {
  background:linear-gradient(135deg,#fa5560,#b14bf4);
  box-shadow:0 0 10px #fa556066;
  transform:scale(1.3)
  }
  
  .how-grid {
  gap:32px
  }
  
  .how-grid::before {
  bottom:80px;
  left:calc(50% - 1px);
  top:80px;
  width:2px
  }
  
  .how-card {
  max-width:100%
  }
  
  .how-card::after {
  top:80px
  }
  
  .hero-visual {
  height:400px
  }
  
  .card-1 {
  left:20px;
  top:30px;
  width:260px
  }
  
  .card-2 {
  right:20px;
  top:150px;
  width:240px
  }
  
  .card-3 {
  bottom:50px;
  left:40px;
  width:220px
  }
  
  .pricing-hero h1 {
  font-size:36px
  }
  
  .pricing-card.featured {
  transform:scale(1)
  }
  
  .pricing-card.featured:hover {
  transform:translateY(-8px)
  }
  
  .world-map-panel {
  padding:20px
  }
  
  .map-region-tabs {
  justify-content:center
  }
  
  .spotlight-stats {
  grid-template-columns:repeat(2,minmax(0,1fr));
  row-gap:8px
  }
  
  .hero-platforms-label,.hero-description br {
  display:block
  }
  
  .global-network-map,.stats-showcase-section,.features-section .section-title,.features-section .section-description,.carousel-arrow,.map-axis-label-middle-left,.map-axis-label-middle-right {
  display:none
  }
  
  .section-title,.cta-modern-title,.pricing-amount .price {
  font-size:48px
  }
  }
  
  @media (max-width: 640px) {
  :root {
  --security-radar-size:160px
  }
  
  .security-radar {
  height:160px;
  width:160px
  }
  
  .security-modern-visual {
  height:240px
  }
  
  .floating-card {
  animation:none;
  bottom:auto;
  left:auto;
  margin:0 auto;
  max-width:320px;
  position:relative;
  right:auto;
  top:auto;
  transform:none;
  width:100%
  }
  
  .card-1,.card-2,.card-3 {
  max-width:320px;
  width:100%
  }
  
  .hero-visual,.hero-circle {
  display:none
  }
  }
  
  @media (max-width: 480px) {
  :root {
  --security-radar-size:140px
  }
  
  .security-radar {
  height:140px;
  width:140px
  }
  
  .security-modern-visual {
  height:220px
  }
  
  .section-container,.hero-container,.cta-modern-container {
  padding:0 24px
  }
  
  .hero-title-sub {
  font-size:18px
  }
  
  .hero-platform-icon {
  border-radius:10px;
  height:38px;
  width:38px
  }
  
  .hero-platform-icon svg {
  height:18px;
  width:18px
  }
  
  .stat-showcase-value,.stat-showcase-suffix {
  font-size:40px
  }
  
  .pricing-amount .price {
  font-size:48px
  }
  
  .map-region-tabs {
  flex-wrap:wrap;
  justify-content:center
  }
  
  .map-spotlight-card {
  min-width:140px
  }
  
  .hero-title,.section-title,.cta-modern-title,.pricing-hero h1 {
  font-size:36px
  }
  }
  
  @media (max-width: 400px) {
  :root {
  --security-radar-size:120px
  }
  
  .security-radar {
  height:120px;
  width:120px
  }
  
  .security-modern-visual {
  height:200px
  }
  }
  
  .form-switcher {
  align-items:center;
  display:inline-flex;
  gap:8px
  }
  
  .form-switcher label {
  color:var(--text-secondary);
  font-size:13px;
  order:-1
  }
  
  .form-switcher input[type="checkbox"] {
  -webkit-appearance:none!important;
  appearance:none!important;
  background:#ffffff1a!important;
  border:1px solid var(--border-subtle)!important;
  border-radius:24px!important;
  cursor:pointer;
  height:24px!important;
  min-width:44px!important;
  position:relative;
  transition:all .3s ease!important;
  width:44px!important
  }
  
  .form-switcher input[type="checkbox"]::before {
  background:var(--text-muted)!important;
  border-radius:50%!important;
  content:""!important;
  height:18px!important;
  left:2px!important;
  position:absolute!important;
  top:2px!important;
  transition:all .3s ease!important;
  width:18px!important
  }
  
  .form-switcher input[type="checkbox"]:checked {
  background:#ffffff4d!important;
  border-color:var(--text-faint)!important
  }
  
  .form-switcher input[type="checkbox"]:checked::before {
  background:#fff!important;
  box-shadow:0 1px 3px #0003!important;
  transform:translateX(20px)!important
  }
  
  .form-switcher input[type="checkbox"]:hover {
  border-color:var(--border-subtle)!important
  }
  
  .modal-content {
  background:var(--color-primary-dark)!important;
  border:1px solid var(--border-subtle)!important
  }
  
  .modal-header {
  background:var(--color-primary-dark)!important;
  border-bottom:1px solid var(--border-subtle)!important
  }
  
  .modal-footer {
  background:var(--color-primary-dark)!important;
  border-top:1px solid var(--border-subtle)!important
  }
  
  .modal-backdrop {
  backdrop-filter:none!important;
  background-color:#0009!important
  }
  
  .duckier-block.max-w-4xl {
  max-width:1200px!important
  }
  
  .duckier-btn-danger {
  color:#fff!important
  }
  
  .button-separator {
  background:var(--border-subtle);
  height:24px;
  width:1px
  }
  
  textarea::-webkit-scrollbar,.duckier-block::-webkit-scrollbar {
  height:8px;
  width:8px
  }
  
  textarea::-webkit-scrollbar-track,.duckier-block::-webkit-scrollbar-track {
  background:#ffffff0d;
  border-radius:4px
  }
  
  textarea::-webkit-scrollbar-thumb,.duckier-block::-webkit-scrollbar-thumb {
  background:#ffffff4d;
  border-radius:4px
  }
  
  textarea::-webkit-scrollbar-thumb:hover,.duckier-block::-webkit-scrollbar-thumb:hover {
  background:#ffffff80
  }
  
  textarea,.duckier-block {
  scrollbar-color:#ffffff4d #ffffff0d;
  scrollbar-width:thin
  }
  
  .codes-textarea {
  position:relative
  }
  
  .codes-textarea textarea {
  cursor:pointer;
  transition:all .2s ease
  }
  
  .codes-textarea textarea:hover {
  background:#b14bf40d!important;
  border-color:#b14bf466!important
  }
  
  .copy-feedback {
  align-items:center;
  animation:fadeInOut 1.5s ease forwards;
  background:#28a745f2;
  border-radius:8px;
  color:var(--text-primary);
  display:flex;
  font-size:14px;
  font-weight:600;
  gap:8px;
  left:50%;
  padding:10px 20px;
  pointer-events:none;
  position:absolute;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:10
  }
  
  .form-switcher input[type="checkbox"]::after,.codes-textarea .btn.icon-btn {
  display:none!important
  }
  
  .block[ng-if="fileUploader.uploadStarted && fileUploader.uploadedCount >= 1"],.duckier-tab-content {
  overflow:visible!important
  }
  
  @keyframes fadeInOut {
  0% {
  opacity:0;
  transform:translate(-50%,-50%) scale(0.8)
  }
  
  15% {
  opacity:1;
  transform:translate(-50%,-50%) scale(1)
  }
  
  70% {
  opacity:1
  }
  
  100% {
  opacity:0
  }
  }
  
  #div_file {
  display:inline-block;
  position:relative
  }
  
  .spinner {
  display:none;
  max-width:32px;
  position:absolute;
  right:3px;
  top:3px
  }
  
  .public-container {
  margin:0 auto;
  max-width:1400px;
  padding:2rem 1rem
  }
  
  .public-header {
  background:var(--color-primary-dark);
  border:1px solid var(--border-subtle);
  border-radius:16px;
  margin-bottom:1.5rem;
  padding:2rem 2.5rem
  }
  
  .public-header h1 {
  align-items:center;
  color:var(--text-primary);
  display:flex;
  font-size:2rem;
  font-weight:700;
  gap:1rem;
  margin:0
  }
  
  .public-header h1 i {
  color:var(--text-primary);
  font-size:2rem
  }
  
  .breadcrumb-nav {
  align-items:center;
  background:var(--color-primary-dark);
  border:1px solid var(--border-subtle);
  border-radius:10px;
  display:flex;
  font-size:.9rem;
  gap:.75rem;
  margin-bottom:1.5rem;
  padding:.75rem 1.25rem
  }
  
  .breadcrumb-nav a {
  align-items:center;
  color:var(--text-secondary);
  display:flex;
  gap:.4rem;
  text-decoration:none;
  transition:color .2s
  }
  
  .breadcrumb-nav a:hover {
  color:var(--text-primary)
  }
  
  .breadcrumb-nav i.separator {
  color:var(--text-muted);
  font-size:.8rem
  }
  
  .stats-wrapper {
  margin-bottom:1.5rem
  }
  
  .stats-header {
  align-items:center;
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(to bottom,#ffffff24,#ffffff14) border-box;
  border:2px solid transparent;
  border-radius:12px;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  padding:1rem 1.25rem;
  transition:all .3s
  }
  
  .stats-header:hover {
  box-shadow:0 4px 16px #0000004d
  }
  
  .stats-header-title {
  align-items:center;
  color:var(--text-primary);
  display:flex;
  font-size:1rem;
  font-weight:600;
  gap:.5rem
  }
  
  .stats-toggle-icon {
  color:var(--text-muted);
  transition:transform .3s
  }
  
  .stats-toggle-icon.collapsed {
  transform:rotate(-90deg)
  }
  
  .stats-bar {
  display:grid;
  gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  margin-top:0;
  max-height:0;
  opacity:0;
  overflow:hidden;
  pointer-events:none;
  transition:opacity .4s ease,max-height .4s ease,margin-top .4s ease
  }
  
  .stats-bar.expanded {
  margin-top:1rem;
  max-height:500px;
  opacity:1;
  pointer-events:auto
  }
  
  .stat-item {
  align-items:center;
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(to bottom,#ffffff24,#ffffff14) border-box;
  border:2px solid transparent;
  border-radius:12px;
  display:flex;
  gap:1rem;
  padding:1.25rem;
  transition:all .3s ease
  }
  
  .stat-item:hover {
  box-shadow:0 8px 24px #0000004d;
  transform:translateY(-3px)
  }
  
  .stat-item i {
  color:var(--text-primary);
  font-size:1.8rem
  }
  
  .stat-item .stat-info {
  display:flex;
  flex-direction:column
  }
  
  .stat-value {
  color:var(--text-primary);
  font-size:1.5rem;
  font-weight:700
  }
  
  .stat-label {
  color:var(--text-muted);
  font-size:.8rem;
  letter-spacing:.5px;
  text-transform:uppercase
  }
  
  .filter-bar {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(to bottom,#ffffff24,#ffffff14) border-box;
  border:2px solid transparent;
  border-radius:12px;
  margin-bottom:1.5rem;
  padding:1.25rem
  }
  
  .filter-buttons {
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  justify-content:center
  }
  
  .filter-btn {
  align-items:center;
  background:#ffffff08;
  border:1px solid var(--border-subtle);
  border-radius:8px;
  color:var(--text-secondary);
  cursor:pointer;
  display:flex;
  font-size:.9rem;
  font-weight:500;
  gap:.5rem;
  padding:.65rem 1.25rem;
  transition:all .2s
  }
  
  .filter-btn:hover {
  background:#ffffff1a;
  border-color:var(--text-faint);
  color:var(--text-primary);
  transform:translateY(-2px)
  }
  
  .filter-btn.active {
  background:#ffffff26;
  border-color:var(--text-faint);
  box-shadow:0 4px 12px #0003;
  color:var(--text-primary)
  }
  
  .filter-btn i {
  font-size:1rem
  }
  
  .controls-bar {
  align-items:center;
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(to bottom,#ffffff24,#ffffff14) border-box;
  border:2px solid transparent;
  border-radius:12px;
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  margin-bottom:1.5rem;
  padding:1.25rem
  }
  
  .search-box {
  flex:1;
  min-width:250px;
  position:relative
  }
  
  .search-box input {
  background:#ffffff08;
  border:1px solid var(--border-subtle);
  border-radius:8px;
  color:var(--text-primary);
  font-size:.95rem;
  padding:.75rem 1rem .75rem 2.75rem;
  transition:all .2s;
  width:100%
  }
  
  .search-box input:focus {
  background:#ffffff0d;
  border-color:var(--text-faint);
  outline:none
  }
  
  .search-box i {
  color:var(--text-muted);
  left:1rem;
  position:absolute;
  top:50%;
  transform:translateY(-50%)
  }
  
  .sort-box {
  min-width:200px;
  position:relative
  }
  
  .sort-box i {
  color:var(--text-muted);
  left:1rem;
  pointer-events:none;
  position:absolute;
  top:50%;
  transform:translateY(-50%)
  }
  
  .sort-box select {
  appearance:none;
  background:#ffffff08;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-position:right 1rem center;
  background-repeat:no-repeat;
  border:1px solid var(--border-subtle);
  border-radius:8px;
  color:var(--text-primary);
  cursor:pointer;
  font-size:.95rem;
  padding:.75rem 2.5rem;
  transition:all .2s;
  width:100%
  }
  
  .sort-box select:focus {
  border-color:var(--text-faint);
  outline:none
  }
  
  .sort-box select option {
  background:#1a1a1f;
  color:var(--text-primary)
  }
  
  .view-btn {
  background:#ffffff08;
  border:1px solid var(--border-subtle);
  border-radius:8px;
  color:var(--text-muted);
  cursor:pointer;
  padding:.75rem;
  transition:all .2s
  }
  
  .view-btn:hover {
  border-color:var(--text-faint);
  color:var(--text-primary)
  }
  
  .view-btn.active {
  background:#ffffff26;
  border-color:var(--text-faint);
  color:var(--text-primary)
  }
  
  .content-grid {
  display:grid;
  gap:1.5rem;
  grid-template-columns:280px 1fr
  }
  
  .folders-section {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(to bottom,#ffffff24,#ffffff14) border-box;
  border:2px solid transparent;
  border-radius:12px;
  height:fit-content;
  padding:1.25rem
  }
  
  .public-container .section-title {
  align-items:center;
  border-bottom:1px solid var(--border-subtle);
  color:var(--text-primary);
  display:flex;
  font-size:1rem;
  font-weight:600;
  gap:.5rem;
  margin-bottom:1rem;
  padding-bottom:.75rem
  }
  
  .folder-item {
  align-items:center;
  border-radius:8px;
  color:var(--text-secondary);
  cursor:pointer;
  display:flex;
  gap:.75rem;
  margin-bottom:.5rem;
  padding:.75rem 1rem;
  text-decoration:none;
  transition:all .2s
  }
  
  .folder-item:hover {
  background:#ffffff0d;
  color:var(--text-primary);
  transform:translateX(4px)
  }
  
  .folder-item i {
  color:#FC6;
  font-size:1.2rem
  }
  
  .folder-name {
  flex:1;
  font-weight:500;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
  }
  
  .folder-count {
  background:#ffffff1a;
  border-radius:10px;
  color:var(--text-secondary);
  font-size:.75rem;
  font-weight:500;
  min-width:20px;
  padding:.2rem .5rem;
  text-align:center
  }
  
  .empty-folders {
  color:var(--text-muted);
  padding:2rem 1rem;
  text-align:center
  }
  
  .empty-folders i {
  font-size:3rem;
  margin-bottom:.75rem;
  opacity:.3
  }
  
  .folders-pagination {
  align-items:center;
  display:flex;
  flex-wrap:wrap;
  gap:.2rem;
  justify-content:center;
  margin-top:1rem;
  padding:.5rem 0
  }
  
  .folders-pagination a,.folders-pagination span,.folders-pagination b {
  border-radius:4px;
  font-size:.75rem;
  min-width:28px;
  padding:.25rem .4rem;
  white-space:nowrap
  }
  
  .folders-pagination a[href*="folder_page"] {
  padding:.25rem .5rem
  }
  
  .files-section {
  background:linear-gradient(var(--color-primary-dark),var(--color-primary-dark)) padding-box,linear-gradient(to bottom,#ffffff24,#ffffff14) border-box;
  border:2px solid transparent;
  border-radius:12px;
  padding:1.25rem
  }
  
  .files-grid {
  display:grid;
  gap:1.25rem;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr))
  }
  
  .files-list {
  display:flex;
  flex-direction:column;
  gap:.75rem
  }
  
  .file-card {
  background:#ffffff08;
  border:1px solid var(--border-subtle);
  border-radius:12px;
  display:flex;
  flex-direction:column;
  padding:1rem;
  transition:all .3s ease
  }
  
  .file-card:hover {
  border-color:var(--text-faint);
  box-shadow:0 8px 24px #0000004d;
  transform:translateY(-4px)
  }
  
  .file-preview {
  align-items:center;
  aspect-ratio:1;
  background:#ffffff05;
  border-radius:8px;
  display:flex;
  justify-content:center;
  margin-bottom:.75rem;
  overflow:hidden;
  position:relative;
  width:100%
  }
  
  .file-preview img {
  height:100%;
  object-fit:cover;
  width:100%
  }
  
  .file-preview .file-icon {
  font-size:4rem
  }
  
  .file-preview .file-type-badge {
  background:#ffffff26;
  border:1px solid var(--border-subtle);
  border-radius:4px;
  bottom:8px;
  color:var(--text-primary);
  font-size:.7rem;
  font-weight:600;
  padding:4px 8px;
  position:absolute;
  right:8px;
  text-transform:uppercase
  }
  
  .file-info {
  flex:1
  }
  
  .file-name {
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  color:var(--text-primary);
  display:-webkit-box;
  font-size:.9rem;
  font-weight:600;
  margin-bottom:.5rem;
  overflow:hidden;
  word-break:break-word
  }
  
  .file-meta {
  color:var(--text-muted);
  font-size:.8rem;
  margin-bottom:.25rem
  }
  
  .file-meta i {
  margin-right:4px;
  width:14px
  }
  
  .file-actions {
  display:flex;
  gap:.5rem;
  margin-top:.75rem
  }
  
  .btn-download {
  align-items:center;
  background:#ffffff1a;
  border:1px solid var(--border-subtle);
  border-radius:8px;
  color:var(--text-primary);
  display:inline-flex;
  flex:1;
  font-size:.85rem;
  font-weight:600;
  gap:.4rem;
  justify-content:center;
  padding:.6rem 1rem;
  text-align:center;
  text-decoration:none;
  transition:all .3s ease
  }
  
  .btn-download:hover {
  background:#fff3;
  border-color:var(--text-muted);
  box-shadow:0 4px 16px #0003;
  color:var(--text-primary)
  }
  
  .btn-add {
  background:#35d4a226;
  border:1px solid #35d4a24d;
  border-radius:8px;
  color:#35d4a2;
  cursor:pointer;
  padding:.6rem;
  transition:all .2s
  }
  
  .btn-add:hover {
  background:#35d4a240;
  border-color:#35d4a280
  }
  
  .added-badge {
  color:#35d4a2;
  font-size:.85rem;
  font-weight:600
  }
  
  .file-list-item {
  align-items:center;
  background:#ffffff08;
  border:1px solid var(--border-subtle);
  border-radius:10px;
  display:flex;
  gap:1rem;
  padding:1rem;
  transition:all .2s
  }
  
  .file-list-item:hover {
  border-color:var(--text-faint);
  box-shadow:0 4px 12px #0003
  }
  
  .file-list-icon {
  font-size:2.5rem;
  min-width:60px;
  text-align:center
  }
  
  .file-list-info {
  flex:1;
  min-width:0
  }
  
  .file-list-name {
  color:var(--text-primary);
  font-weight:600;
  margin-bottom:.5rem;
  word-break:break-word
  }
  
  .file-list-meta {
  color:var(--text-muted);
  display:flex;
  flex-wrap:wrap;
  font-size:.85rem;
  gap:1.5rem
  }
  
  .file-list-meta span {
  align-items:center;
  display:flex;
  gap:.25rem
  }
  
  .icon-video {
  color:#e74c3c!important
  }
  
  .icon-audio {
  color:#9b59b6!important
  }
  
  .icon-image {
  color:#27ae60!important
  }
  
  .icon-archive {
  color:#f39c12!important
  }
  
  .icon-document {
  color:#3498db!important
  }
  
  .icon-code {
  color:#16a085!important
  }
  
  .icon-pdf {
  color:#c0392b!important
  }
  
  .empty-state {
  color:var(--text-muted);
  grid-column:1 / -1;
  padding:3rem 1rem;
  text-align:center
  }
  
  .empty-state i {
  font-size:4rem;
  margin-bottom:1rem;
  opacity:.3
  }
  
  .pagination-wrapper {
  align-items:center;
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
  justify-content:center;
  margin-top:1.5rem;
  padding:1rem
  }
  
  .pagination-wrapper a,.pagination-wrapper span,.pagination-wrapper b {
  align-items:center;
  background:#ffffff0d;
  border:1px solid var(--border-subtle);
  border-radius:6px;
  color:var(--text-secondary);
  display:inline-flex;
  font-size:.9rem;
  font-weight:500;
  justify-content:center;
  min-width:36px;
  padding:.5rem .75rem;
  text-align:center;
  text-decoration:none;
  transition:all .15s ease;
  white-space:nowrap
  }
  
  .pagination-wrapper a:hover {
  background:#ffffff26;
  border-color:var(--text-faint);
  color:var(--text-primary)!important
  }
  
  .pagination-wrapper b {
  background:#ffffff26;
  border-color:var(--text-faint);
  color:var(--text-primary)!important;
  font-weight:600
  }
  
  .pagination-wrapper span {
  border:none;
  color:var(--text-muted);
  padding:.5rem .4rem
  }
  
  .pagination-wrapper span.disabled {
  background:#ffffff05;
  border:1px solid var(--border-subtle);
  color:var(--text-faint);
  cursor:not-allowed
  }
  
  .search-box input::placeholder,.folder-item.back-folder i {
  color:var(--text-muted)
  }
  
  .view-toggle,.file-list-actions {
  display:flex;
  gap:.5rem
  }
  
  .file-name a,.file-list-name a {
  color:inherit;
  text-decoration:none
  }
  
  .file-name a:hover,.file-list-name a:hover,.pagination-wrapper a {
  color:var(--text-secondary)
  }
  
  @media (max-width: 900px) {
  .content-grid {
  grid-template-columns:1fr
  }
  
  .folders-section {
  order:-1
  }
  
  .controls-bar {
  align-items:stretch;
  flex-direction:column
  }
  
  .search-box,.sort-box {
  min-width:100%
  }
  }
  
  @media (max-width: 600px) {
  .public-header {
  padding:1.5rem
  }
  
  .public-header h1 {
  font-size:1.5rem
  }
  
  .files-grid {
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr))
  }
  
  .stats-bar {
  grid-template-columns:1fr
  }
  
  .stat-item {
  flex-direction:row;
  justify-content:flex-start
  }
  
  .filter-buttons {
  justify-content:center
  }
  
  .filter-btn {
  flex:1;
  font-size:.8rem;
  justify-content:center;
  min-width:100px;
  padding:.5rem .75rem
  }
  
  .file-list-meta {
  flex-direction:column;
  gap:.25rem
  }
  
  .folder-item {
  margin-left:0!important;
  margin-right:0!important;
  padding:.6rem .25rem!important
  }

  .public-container .section-title {
  margin-left:0!important;
  padding-left:0!important
  }

  .public-container,.folders-section,.files-section,.controls-bar,.filter-bar {
  padding:1rem .5rem!important
  }
  }
  
  .duckier-btn:disabled {
  cursor:not-allowed;
  opacity:.5;
  pointer-events:none
  }
  
  .vpnconnect-alert {
  border-radius:10px;
  font-size:14px;
  font-weight:500;
  margin-bottom:16px;
  padding:12px 20px
  }
  
  .vpnconnect-alert.alert-danger {
  background:#fa55601f;
  border:1px solid #fa556040;
  color:#fa5560
  }
  
  .vpnconnect-alert.alert-success {
  background:#22c55e1f;
  border:1px solid #22c55e40;
  color:#22c55e
  }
  
  .vpnconnect-success-msg {
  padding:48px 24px;
  text-align:center
  }
  
  .vpnconnect-success-msg .success-icon {
  align-items:center;
  background:linear-gradient(135deg,#22c55e33,#22c55e1a);
  border-radius:50%;
  color:#22c55e;
  display:flex;
  height:64px;
  justify-content:center;
  margin:0 auto 20px;
  width:64px
  }
  
  .vpnconnect-success-msg h2 {
  color:var(--text-primary,#fff);
  font-size:24px;
  font-weight:700;
  margin-bottom:12px
  }
  
  .vpnconnect-success-msg p {
  color:var(--text-secondary,#ffffffb3);
  font-size:15px;
  line-height:1.6
  }
  
  .vpnverify-device-info {
  background:var(--color-surface,#ffffff0d);
  border:1px solid var(--border-subtle,#ffffff1a);
  border-radius:16px;
  margin-bottom:24px;
  padding:24px
  }
  
  .vpnverify-device-info .device-row {
  display:flex;
  font-size:14px;
  justify-content:space-between;
  padding:8px 0
  }
  
  .vpnverify-device-info .device-label {
  color:var(--text-muted,#ffffff80)
  }
  
  .vpnverify-device-info .device-value {
  color:var(--text-primary,#ffffffd9);
  font-weight:600
  }
  
  .vpnverify-actions {
  display:flex;
  gap:12px;
  margin-top:24px
  }
  
  .vpnverify-btn-confirm {
  background:linear-gradient(81.02deg,#fa5560 -23.47%,#b14bf4 45.52%,#4d91ff 114.8%);
  border:none;
  border-radius:12px;
  color:#fff;
  cursor:pointer;
  flex:1;
  font-size:15px;
  font-weight:700;
  padding:14px 24px;
  transition:all .3s ease
  }
  
  .vpnverify-btn-confirm:hover {
  box-shadow:0 8px 24px #b14bf44d;
  transform:translateY(-2px)
  }
  
  .vpnverify-btn-deny {
  background:var(--color-surface,#ffffff0d);
  border:1px solid #fa55604d;
  border-radius:12px;
  color:#fa5560;
  cursor:pointer;
  flex:1;
  font-size:15px;
  font-weight:700;
  padding:14px 24px;
  transition:all .3s ease
  }
  
  .vpnverify-btn-deny:hover {
  background:#fa55601a;
  border-color:#fa556080
  }
  
  @media (max-width: 768px) {
  .vpnverify-actions {
  flex-direction:column
  }
  }