:root {
      --bg-color: #0f172a;
      --text-color: #f8fafc;
      --accent-color: #34d399;
      --card-bg: rgba(255,255,255,0.05);
      --border-color: rgba(255,255,255,0.15);
    }
    .light {
      --bg-color: #f8fafc;
      --text-color: #1e293b;
      --accent-color: #3b82f6;
      --card-bg: #ffffff;
      --border-color: #ccc;
    }
  body {
     margin: 0;
  font-family: 'Open Sans', sans-serif;
    background: var(--bg-color);
    color: var(--text-color);
    transition: background 0.3s ease, color 0.3s ease;
 
}

.card1{
    background:var(--panel);
    border:1px solid #222632; border-radius:var(--radius);
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    padding:24px 22px;
  }
  .title{font-size:20px; font-weight:700; margin:2px 0 16px}
  .row{display:flex; gap:16px; flex-wrap:wrap; align-items:flex-start}
  .field{flex:1 1 280px; display:flex; gap:10px; align-items:center}
  .label{font-weight:600; color:#cdd6e0}
  .input{
    flex:1; height:46px; border-radius:12px; padding:0 14px;
    border:1px solid #293041; background:#0e1117; color:var(--text);
    outline:0; font-weight:600; letter-spacing:.5px;
  }
  .input:focus{border-color:var(--accent); box-shadow:0 0 0 4px var(--ring)}
  .btn{
    height:46px; padding:0 16px; border-radius:12px; border:1px solid #2b3242;
    background:#10141c; color:var(--text); cursor:pointer; font-weight:700;
  }
  .btn.primary{background:linear-gradient(180deg,#60a5fa,#3b82f6); border:none}
  .btn.primary:hover{filter:brightness(1.05)}
  .error{color:var(--danger); font-weight:600; min-height:1.2em}
  .error[hidden]{display:block; visibility:hidden}
  .preview{
    flex: 0 0 240px; border-radius:16px; overflow:hidden;
    border:1px solid #2a3142; background:#111318;
  }
  .swatch{height:160px; display:grid; place-items:center}
  .swatch .big{font-size:18px; font-weight:800; text-transform:uppercase}
  .meta{padding:12px 14px; display:grid; gap:6px; background:#0f131b}
  .kv{display:flex; justify-content:space-between; gap:12px; color:var(--muted)}
  .kv b{color:var(--text)}
  .help{margin-top:12px; color:var(--muted); font-size:14px}



#donateQR[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  right: 0;
  background: #111;
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  font-size: 0.75rem;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  transform: translateY(-6px);
  opacity: 1;
  transition: opacity 0.3s, transform 0.3s;
  z-index: 10000;
}

#donateQR::after {
  content: '';
  opacity: 0;
}
.pick-image-btn {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 15px;
  background-color: #C11D54;
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.3s ease;
}
.pick-image-btn:hover {
  background-color: #a01046;
  color:#fff;
}
a:visited {
  color: #eeeeee;
}

a:hover {
  color: #C11D54;
}

a:active {
  color: #C11D54;

}
  
.bubbles {
  position: fixed; /* Use fixed to cover the full viewport */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 0; /* Make sure it's behind main content */
  pointer-events: none;
}


.bubbles span {
  position: absolute;
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  animation-name: rise;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  bottom: -50px;
  opacity: 0.2;
}


/* Add color variations */
.bubbles span:nth-child(1) { left: 60%; background: rgba(0,206,209,0.3); animation-delay: 0.9s; animation-duration: 25s; }
.bubbles span:nth-child(2) { left: 52%; background: rgba(255,140,0,0.3); animation-delay: 4.6s; animation-duration: 19s; }
.bubbles span:nth-child(3) { left: 76%; background: rgba(255,140,0,0.3); animation-delay: 3.2s; animation-duration: 14s; }
.bubbles span:nth-child(4) { left: 36%; background: rgba(0,255,127,0.3); animation-delay: 3.5s; animation-duration: 15s; }
.bubbles span:nth-child(5) { left: 40%; background: rgba(0,255,127,0.3); animation-delay: 1.3s; animation-duration: 19s; }
.bubbles span:nth-child(6) { left: 30%; background: rgba(0,128,128,0.3); animation-delay: 1.5s; animation-duration: 15s; }
.bubbles span:nth-child(7) { left: 67%; background: rgba(255,255,255,0.15); animation-delay: 4.0s; animation-duration: 15s; }
.bubbles span:nth-child(8) { left: 19%; background: rgba(0,128,128,0.3); animation-delay: 3.6s; animation-duration: 24s; }
.bubbles span:nth-child(9) { left: 55%; background: rgba(255,20,147,0.3); animation-delay: 4.6s; animation-duration: 13s; }
.bubbles span:nth-child(10) { left: 72%; background: rgba(0,128,128,0.3); animation-delay: 2.4s; animation-duration: 20s; }
.bubbles span:nth-child(11) { left: 94%; background: rgba(0,191,255,0.3); animation-delay: 0.7s; animation-duration: 16s; }
.bubbles span:nth-child(12) { left: 7%; background: rgba(144,238,144,0.3); animation-delay: 0.0s; animation-duration: 19s; }
.bubbles span:nth-child(13) { left: 60%; background: rgba(173,216,230,0.3); animation-delay: 2.0s; animation-duration: 17s; }
.bubbles span:nth-child(14) { left: 49%; background: rgba(0,255,127,0.3); animation-delay: 5.4s; animation-duration: 20s; }
.bubbles span:nth-child(15) { left: 44%; background: rgba(193,29,84,0.3); animation-delay: 1.2s; animation-duration: 15s; }
.bubbles span:nth-child(16) { left: 17%; background: rgba(255,99,71,0.3); animation-delay: 3.0s; animation-duration: 24s; }
.bubbles span:nth-child(17) { left: 37%; background: rgba(255,192,203,0.3); animation-delay: 2.3s; animation-duration: 18s; }
.bubbles span:nth-child(18) { left: 84%; background: rgba(193,29,84,0.3); animation-delay: 3.7s; animation-duration: 22s; }
.bubbles span:nth-child(19) { left: 10%; background: rgba(144,238,144,0.3); animation-delay: 1.8s; animation-duration: 21s; }
.bubbles span:nth-child(20) { left: 24%; background: rgba(0,128,128,0.3); animation-delay: 0.4s; animation-duration: 17s; }
.bubbles span:nth-child(21) { left: 85%; background: rgba(255,0,255,0.2); animation-delay: 5.2s; animation-duration: 13s; }
.bubbles span:nth-child(22) { left: 33%; background: rgba(255,215,0,0.3); animation-delay: 0.6s; animation-duration: 22s; }
.bubbles span:nth-child(23) { left: 63%; background: rgba(255,140,0,0.3); animation-delay: 4.3s; animation-duration: 16s; }
.bubbles span:nth-child(24) { left: 89%; background: rgba(30,144,255,0.3); animation-delay: 5.7s; animation-duration: 18s; }
.bubbles span:nth-child(25) { left: 28%; background: rgba(0,255,127,0.3); animation-delay: 2.6s; animation-duration: 15s; }
.bubbles span:nth-child(26) { left: 4%; background: rgba(255,215,0,0.3); animation-delay: 1.7s; animation-duration: 23s; }
.bubbles span:nth-child(27) { left: 79%; background: rgba(0,206,209,0.3); animation-delay: 0.1s; animation-duration: 19s; }
.bubbles span:nth-child(28) { left: 69%; background: rgba(255,105,180,0.3); animation-delay: 4.8s; animation-duration: 20s; }
.bubbles span:nth-child(29) { left: 13%; background: rgba(255,255,255,0.15); animation-delay: 2.9s; animation-duration: 14s; }
.bubbles span:nth-child(30) { left: 26%; background: rgba(173,216,230,0.3); animation-delay: 3.3s; animation-duration: 25s; }
/* ... repeat this structure up to 70 */
.bubbles span:nth-child(31) { left: 41%; background: rgba(240,128,128,0.3); animation-delay: 3.2s; animation-duration: 24s; }
.bubbles span:nth-child(32) { left: 93%; background: rgba(0,128,128,0.3); animation-delay: 5.7s; animation-duration: 20s; }
.bubbles span:nth-child(33) { left: 12%; background: rgba(193,29,84,0.3); animation-delay: 5.3s; animation-duration: 16s; }
.bubbles span:nth-child(34) { left: 3%; background: rgba(255,192,203,0.3); animation-delay: 3.9s; animation-duration: 16s; }
.bubbles span:nth-child(35) { left: 71%; background: rgba(144,238,144,0.3); animation-delay: 1.8s; animation-duration: 13s; }
.bubbles span:nth-child(36) { left: 89%; background: rgba(255,105,180,0.3); animation-delay: 0.9s; animation-duration: 12s; }
.bubbles span:nth-child(37) { left: 34%; background: rgba(186,85,211,0.3); animation-delay: 2.1s; animation-duration: 25s; }
.bubbles span:nth-child(38) { left: 13%; background: rgba(255,99,71,0.3); animation-delay: 5.1s; animation-duration: 24s; }
.bubbles span:nth-child(39) { left: 24%; background: rgba(255,0,255,0.2); animation-delay: 4.2s; animation-duration: 21s; }
.bubbles span:nth-child(40) { left: 98%; background: rgba(255,255,255,0.15); animation-delay: 1.0s; animation-duration: 22s; }
.bubbles span:nth-child(41) { left: 96%; background: rgba(255,20,147,0.3); animation-delay: 5.6s; animation-duration: 16s; }
.bubbles span:nth-child(42) { left: 16%; background: rgba(0,191,255,0.3); animation-delay: 4.2s; animation-duration: 21s; }
.bubbles span:nth-child(43) { left: 44%; background: rgba(138,43,226,0.3); animation-delay: 4.5s; animation-duration: 13s; }
.bubbles span:nth-child(44) { left: 30%; background: rgba(138,43,226,0.3); animation-delay: 3.5s; animation-duration: 21s; }
.bubbles span:nth-child(45) { left: 53%; background: rgba(221,160,221,0.3); animation-delay: 3.1s; animation-duration: 17s; }
.bubbles span:nth-child(46) { left: 51%; background: rgba(144,238,144,0.3); animation-delay: 3.9s; animation-duration: 23s; }
.bubbles span:nth-child(47) { left: 54%; background: rgba(30,144,255,0.3); animation-delay: 0.5s; animation-duration: 12s; }
.bubbles span:nth-child(48) { left: 10%; background: rgba(255,0,255,0.2); animation-delay: 0.3s; animation-duration: 22s; }
.bubbles span:nth-child(49) { left: 51%; background: rgba(173,216,230,0.3); animation-delay: 3.3s; animation-duration: 18s; }
.bubbles span:nth-child(50) { left: 14%; background: rgba(0,255,127,0.3); animation-delay: 5.2s; animation-duration: 16s; }
.bubbles span:nth-child(51) { left: 39%; background: rgba(138,43,226,0.3); animation-delay: 0.2s; animation-duration: 22s; }
.bubbles span:nth-child(52) { left: 71%; background: rgba(138,43,226,0.3); animation-delay: 1.1s; animation-duration: 25s; }
.bubbles span:nth-child(53) { left: 2%; background: rgba(240,128,128,0.3); animation-delay: 1.2s; animation-duration: 21s; }
.bubbles span:nth-child(54) { left: 19%; background: rgba(240,128,128,0.3); animation-delay: 0.0s; animation-duration: 12s; }
.bubbles span:nth-child(55) { left: 36%; background: rgba(255,105,180,0.3); animation-delay: 1.2s; animation-duration: 20s; }
.bubbles span:nth-child(56) { left: 52%; background: rgba(138,43,226,0.3); animation-delay: 2.5s; animation-duration: 12s; }
.bubbles span:nth-child(57) { left: 97%; background: rgba(138,43,226,0.3); animation-delay: 5.4s; animation-duration: 22s; }
.bubbles span:nth-child(58) { left: 3%; background: rgba(240,128,128,0.3); animation-delay: 1.4s; animation-duration: 23s; }
.bubbles span:nth-child(59) { left: 37%; background: rgba(255,255,255,0.15); animation-delay: 2.0s; animation-duration: 12s; }
.bubbles span:nth-child(60) { left: 38%; background: rgba(0,206,209,0.3); animation-delay: 0.2s; animation-duration: 14s; }
.bubbles span:nth-child(61) { left: 64%; background: rgba(255,105,180,0.3); animation-delay: 2.2s; animation-duration: 22s; }
.bubbles span:nth-child(62) { left: 4%; background: rgba(255,215,0,0.3); animation-delay: 5.9s; animation-duration: 25s; }
.bubbles span:nth-child(63) { left: 29%; background: rgba(144,238,144,0.3); animation-delay: 3.5s; animation-duration: 25s; }
.bubbles span:nth-child(64) { left: 22%; background: rgba(30,144,255,0.3); animation-delay: 2.4s; animation-duration: 20s; }
.bubbles span:nth-child(65) { left: 29%; background: rgba(255,140,0,0.3); animation-delay: 1.5s; animation-duration: 22s; }
.bubbles span:nth-child(66) { left: 93%; background: rgba(255,99,71,0.3); animation-delay: 5.8s; animation-duration: 22s; }
.bubbles span:nth-child(67) { left: 27%; background: rgba(255,215,0,0.3); animation-delay: 1.6s; animation-duration: 17s; }
.bubbles span:nth-child(68) { left: 5%; background: rgba(255,99,71,0.3); animation-delay: 4.1s; animation-duration: 18s; }
.bubbles span:nth-child(69) { left: 20%; background: rgba(255,140,0,0.3); animation-delay: 4.4s; animation-duration: 13s; }
.bubbles span:nth-child(70) { left: 88%; background: rgba(255,255,255,0.15); animation-delay: 3.6s; animation-duration: 19s; }



@keyframes rise {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.3;
  }
  100% {
    transform: translateY(-110vh) scale(1.3);
    opacity: 0;
  }
}



    
 nav {
      background: #0f172a;
      padding: 1rem 2rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      backdrop-filter: blur(10px);
   
 }
.main-menu {
  background-color: #0f172a;
  font-family: 'Open Sans', sans-serif;
  font-size:14px;
}

.main-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.main-menu li {
  margin: 0;
  font-size:14px;
}

.main-menu a {
  display: block;
  font-size:14px;
  padding: 15px 20px;
  text-decoration: none;
  color: #fff;
  transition: background-color 0.3s;
}

.main-menu a:hover {
  color: #C11D54;
}
.main-menu a:active {
  color: #C11D54;
}

nav a:active {
  color: #C11D54;
}
    .logo {
      width: 270px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Courier New', monospace;
    }

    .nav-links {
      display: flex;
      align-items: center;
    }
    .nav-links a {
      color: #fff;
      text-decoration: none;
      font-weight: 600;
      font-family: 'Inter', sans-serif;
      letter-spacing: 0.3px;
    font-size:14px;
      transition: color 0.3s;
    }
    .nav-links a:hover {
      color: #C11D54;
    }
    .nav-links a:active {
      color: #C11D54;
    }
    .dropdown {
      position: relative;
    }
    .dropdown-menu {
      display: none;
      position: absolute;
      top: 2.5rem;
      right: 0;
      background: #1e293b;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
      flex-direction: column;
      min-width: 180px;
      padding: 0.5rem 0;
      z-index: 200;
    }
    .dropdown.open .dropdown-menu {
      display: flex;
    }
    
    .dropdown-menu a {
      padding: 0.75rem 1rem;
      display: block;
      color: #f8fafc;
      font-family: 'Inter', sans-serif;
    }
    .dropdown-menu a:hover {
      color: #C11D54;
    }
    .dropdown:hover .dropdown-menu {
      display: flex;
    }
    .toggle-mode,
    .menu-toggle {
      background: none;
      border: none;
      color: #f8fafc;
      font-size: 1.2rem;
      cursor: pointer;
      font-family: 'Inter', sans-serif;
    }
    .menu-toggle {
      display: none;
      font-size: 1.5rem;
    }
    .dropdown-menu a img {
  margin-right: 8px;
  vertical-align: middle;
  width: 16px;
  height: 12px;
  border-radius: 2px;
}

    @media (max-width: 768px) {
      .nav-links {
        display: none;
        position: absolute;
        top: 60px;
        right: 20px;
        background: #1e293b;
        border-radius: 12px;
        flex-direction: column;
        padding: 1rem;
        width: 220px;
        box-shadow: 0 8px 20px rgba(0,0,0,0.3);
      }
      .nav-links.active {
        display: flex;
      }
      .menu-toggle {
        display: block;
      }
    }
    /* Tool Panel */
    .tool-panel {
      background: var(--card-bg);
      border: 1px solid var(--border-color);
      max-width: 1000px;
      margin: 4rem auto 2rem;
      padding: 2rem;
      border-radius: 16px;
    }

    .circle-picker {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      border: none;
      background: none;
      appearance: none;
      -webkit-appearance: none;
      cursor: pointer;
    }

    input[type="color"]::-webkit-color-swatch-wrapper {
      padding: 0;
      border-radius: 50%;
    }

    input[type="color"]::-webkit-color-swatch {
      border: none;
      border-radius: 50%;
    }

    .format-box {
      background: var(--card-bg);
      border: 1px solid var(--border-color);
      border-radius: 10px;
      padding: 0.75rem 1rem;
      margin-bottom: 0.8rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-family: monospace;
    }
    .label {
      display: flex;
      align-items: center;
      gap: 0.4rem;
    }
    .copy-btn {
      cursor: pointer;
      background: #334155;
      border-radius: 6px;
      padding: 2px 6px;
      color: white;
      font-size: 0.85rem;
    }

    .palette-bar {
      display: flex;
      gap: 0.5rem;
      margin-top: 1rem;
      justify-content: center;
      flex-wrap: wrap;
    }

    .palette-color {
      height: 60px;
      min-width: 100px;
      flex: 1;
      border-radius: 8px;
      text-align: center;
      line-height: 60px;
      font-weight: bold;
    }

    .tool-buttons {
      margin-top: 1.5rem;
      text-align: center;
    }

    .tool-buttons button {
      background: #3b82f6;
      border: none;
      color: white;
      padding: 0.6rem 1.2rem;
      border-radius: 8px;
      cursor: pointer;
      margin: 0.5rem;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(-10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes fadeOut {
      from { opacity: 1; transform: translateY(0); }
      to { opacity: 0; transform: translateY(-10px); }
    }

    footer {
      background: #1e293b;
      color: #94a3b8;
      padding: 2rem 1rem;
      text-align: center;
      font-family: 'Inter', sans-serif;
      font-size: 0.95rem;
      margin-top: 4rem;
    }

/* Converted Inline Styles */
.custom-style-0 { font-size: 14px; font-weight: 700; font-family: 'Courier New', monospace; display:flex; align-items:center; justify-content:center; gap:5px; }
.custom-style-1 { color:#ef4444; font-size: 2.6rem; }
.custom-style-2 { letter-spacing:0.5px; }
.custom-style-3 { color:#3b82f6; font-size: 2.6rem; }
.custom-style-4 { text-align: center; margin-top: 4rem; font-size:32px; }
.custom-style-5 { max-width: 800px; margin: 1rem auto; font-size: 1.05rem; line-height: 1.8; text-align: center; color: #cbd5e1; }
.custom-style-6 { max-width: 1100px; margin: 3rem auto; text-align: center; }
.custom-style-7 { font-size: 30px; color: #f8fafc; margin-bottom: 1.5rem; }
.custom-style-8 { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.custom-style-9 { width: 60px; height: 60px; border-radius: 50%; background: #ff5733; cursor: pointer; transition: transform 0.3s, box-shadow 0.3s; }
.custom-style-10 { width: 60px; height: 60px; border-radius: 50%; background: #3498db; cursor: pointer; transition: transform 0.3s, box-shadow 0.3s; }
.custom-style-11 { width: 60px; height: 60px; border-radius: 50%; background: #1abc9c; cursor: pointer; transition: transform 0.3s, box-shadow 0.3s; }
.custom-style-12 { width: 60px; height: 60px; border-radius: 50%; background: #9b59b6; cursor: pointer; transition: transform 0.3s, box-shadow 0.3s; }
.custom-style-13 { width: 60px; height: 60px; border-radius: 50%; background: #f1c40f; cursor: pointer; transition: transform 0.3s, box-shadow 0.3s; }
.custom-style-14 { width: 60px; height: 60px; border-radius: 50%; background: #e74c3c; cursor: pointer; transition: transform 0.3s, box-shadow 0.3s; }
.custom-style-15 { width: 60px; height: 60px; border-radius: 50%; background: #2ecc71; cursor: pointer; transition: transform 0.3s, box-shadow 0.3s; }
.custom-style-16 { width: 60px; height: 60px; border-radius: 50%; background: #34495e; cursor: pointer; transition: transform 0.3s, box-shadow 0.3s; }
.custom-style-17 { width: 60px; height: 60px; border-radius: 50%; background: #ff69b4; cursor: pointer; transition: transform 0.3s, box-shadow 0.3s; }
.custom-style-18 { width: 60px; height: 60px; border-radius: 50%; background: #8e44ad; cursor: pointer; transition: transform 0.3s, box-shadow 0.3s; }
.custom-style-19 { width: 60px; height: 60px; border-radius: 50%; background: #27ae60; cursor: pointer; transition: transform 0.3s, box-shadow 0.3s; }
.custom-style-20 { width: 60px; height: 60px; border-radius: 50%; background: #16a085; cursor: pointer; transition: transform 0.3s, box-shadow 0.3s; }
.custom-style-21 { width: 60px; height: 60px; border-radius: 50%; background: #d35400; cursor: pointer; transition: transform 0.3s, box-shadow 0.3s; }
.custom-style-22 { width: 60px; height: 60px; border-radius: 50%; background: #2980b9; cursor: pointer; transition: transform 0.3s, box-shadow 0.3s; }
.custom-style-23 { width: 60px; height: 60px; border-radius: 50%; background: #c0392b; cursor: pointer; transition: transform 0.3s, box-shadow 0.3s; }
.custom-style-24 { width: 60px; height: 60px; border-radius: 50%; background: #7f8c8d; cursor: pointer; transition: transform 0.3s, box-shadow 0.3s; }
.custom-style-25 { width: 60px; height: 60px; border-radius: 50%; background: #ecf0f1; cursor: pointer; transition: transform 0.3s, box-shadow 0.3s; }
.custom-style-26 { width: 60px; height: 60px; border-radius: 50%; background: #e67e22; cursor: pointer; transition: transform 0.3s, box-shadow 0.3s; }
.custom-style-27 { width: 60px; height: 60px; border-radius: 50%; background: #bdc3c7; cursor: pointer; transition: transform 0.3s, box-shadow 0.3s; }
.custom-style-28 { width: 60px; height: 60px; border-radius: 50%; background: #2c3e50; cursor: pointer; transition: transform 0.3s, box-shadow 0.3s; }
.custom-style-29 { display:flex;flex-wrap:wrap;gap:2rem;justify-content:center; }
.custom-style-30 { flex:1;min-width:300px;display:flex;flex-direction:column;align-items:center; }
.custom-style-31 { margin-top: 1rem; background: rgba(255,255,255,0.07); color: #f8fafc; padding: 0.75rem 1rem; border-left: 4px solid #34d399; border-radius: 8px; font-size: 0.95rem; display: flex; align-items: center; gap: 0.6rem; animation: fadeIn 0.4s ease; max-width: 320px; box-shadow: 0 0 10px rgba(0,0,0,0.2); }
.custom-style-32 { font-size: 1.2rem; }
.custom-style-33 { width:100%;max-width:300px;height:60px;border-radius:12px;margin-top:1rem; }
.custom-style-34 { width:100%;max-width:300px;margin-top:1rem; }
.custom-style-35 { flex:1;min-width:300px; }
.custom-style-36 { text-align:; max-width: 1100px; margin: 2rem auto 0; padding: 1rem 2rem; font-size: 1.25rem; color: #f1f5f9; line-height: 1.7; }
.custom-style-37 { font-size: 1.5rem; margin-bottom: 1rem; color: #C11D54; }
.custom-style-38 { max-width: 1100px; margin: 4rem auto; padding: 2rem; background: var(--card-bg); border-radius: 16px; }
.custom-style-39 { text-align: center; color: #f8fafc; font-size: 1.8rem; margin-bottom: 1.5rem; }
.custom-style-40 { max-width: 1000px; margin: 4rem auto; padding: 2rem; background: #0f172a; color: #f1f5f9; border-radius: 12px; }
.custom-style-41 { text-align: ; color: #FFF; font-size: 2rem; }
.custom-style-42 { margin-top: 1.5rem; line-height: 1.8; font-size: 1.05rem; }
.custom-style-43 { margin-top: 1rem; line-height: 1.8; font-size: 1.05rem; }
.custom-style-44 { background: #1e293b; padding: 1rem; border-radius: 8px; font-size: 0.95rem; overflow-x: auto; }
.custom-style-45 { text-align: ; font-size: 2rem; color: #FFFFFF; }
.custom-style-46 { font-size: 1.8rem; margin-bottom: 1rem; color: #C11D54; }
.custom-style-47 { line-height: 2; padding-left: 1rem; }
.custom-style-48 { display:inline-block;width:20px;height:20px;background:#FF0000;border-radius:4px;margin-left:10px; }
.custom-style-49 { display:inline-block;width:20px;height:20px;background:#00FF00;border-radius:4px;margin-left:10px; }
.custom-style-50 { display:inline-block;width:20px;height:20px;background:#0000FF;border-radius:4px;margin-left:10px; }
.custom-style-51 { display:inline-block;width:20px;height:20px;background:#FFFF00;border-radius:4px;margin-left:10px; }
.custom-style-52 { display:inline-block;width:20px;height:20px;background:#CCEEFF;border-radius:4px;margin-left:10px;border:1px solid #94a3b8; }
.custom-style-53 { max-width: 1100px; margin: 4rem auto; padding: 2rem; }
.custom-style-54 { text-align:center; font-size: 2rem; color:#FFF; }
.custom-style-55 { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; margin-top: 2rem; }
.custom-style-56 { background: #1e293b; padding: 2rem 1rem; }
.custom-style-57 { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.custom-style-58 { color:#C11D54; font-size: 2rem; }
.custom-style-59 { color:#C11D54; font-size: 1.2rem; }
.custom-style-60 { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; font-size: 0.95rem; }
.custom-style-61 { color: #94a3b8; text-decoration: none; transition: color 0.3s; }
.custom-style-62 { margin-top: 1rem; color: #64748b; font-size: 0.85rem; }