:root{
      --brand:#ff4d6d;
      --brand-2:#f784a5;
      --soft:#fff5f7;
      --bg-main: #fff;
      --bg-card: #fff;
      --text-primary: #212529;
      --text-muted: #6c757d;
      --border-color: #dee2e6;
      --shadow: 0 10px 30px rgba(255,77,109,.12);
    }

    [data-bs-theme="dark"] {
      --bg-main: #0b0b0c;
      --bg-card: #121214;
      --text-primary: #e9ecef;
      --text-muted: #9aa0a6;
      --border-color: #2a2a2f;
      --shadow: 0 10px 30px rgba(0,0,0,.3);
      --soft: #1d1d20;
    }

    * {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    body{
      background: var(--bg-main);
      color: var(--text-primary);
      font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial;
      overflow-x: hidden;
    }

    .hero{
      background: radial-gradient(1000px 400px at 50% -200px, #ffe3ea 0%, transparent 60%), 
                  linear-gradient(180deg, var(--bg-main) 0%, var(--bg-main) 100%);
      position: relative;
    }

    [data-bs-theme="dark"] .hero {
      background: radial-gradient(1000px 400px at 50% -200px, #2a1a1f 0%, transparent 60%), 
                  linear-gradient(180deg, var(--bg-main) 0%, var(--bg-main) 100%);
    }

    .brand-text{color:var(--brand)}
    
    .counter-card{
      border:0; 
      border-radius:1.5rem; 
      box-shadow: var(--shadow);
      background: var(--bg-card);
      backdrop-filter: blur(10px);
      position: relative;
      overflow: hidden;
    }

    .counter-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--brand), var(--brand-2));
    }

    .avatar{
      width:80px;
      height:80px;
      border-radius:50%;
      object-fit:cover;
      border:4px solid #fff;
      box-shadow:0 8px 20px rgba(0,0,0,.15);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .avatar:hover {
      transform: scale(1.05);
      box-shadow: 0 12px 28px rgba(0,0,0,.2);
    }

    [data-bs-theme="dark"] .avatar {
      border-color: var(--bg-card);
    }

    .name{font-weight:700; font-size: 1.1rem;}
    .timer{font-variant-numeric:tabular-nums}
    .form-help{font-size:.9rem;color:var(--text-muted)}
    
    .badge-soft{
      background:var(--soft);
      color:#991010;
      border:1px solid #ffd0dc;
      font-weight: 500;
    }

    [data-bs-theme="dark"] .badge-soft {
      background: var(--soft);
      color: #ff8fb3;
      border: 1px solid var(--border-color);
    }

    .milestone{
      border-left:4px solid var(--brand);
      padding-left:.75rem;
      background: linear-gradient(90deg, rgba(255,77,109,0.05), transparent);
      border-radius: 0 8px 8px 0;
    }
    
    .sticky-cta{
      position:sticky;
      bottom:0;
      z-index:5;
      background: var(--bg-card);
      border-top:1px solid var(--border-color);
      backdrop-filter: blur(10px);
    }

    .dark-toggle{
      cursor:pointer;
      padding: 8px;
      border-radius: 50%;
      background: transparent;
      border: none;
      color: var(--text-muted);
      transition: all 0.3s ease;
    }

    .dark-toggle:hover {
      background: var(--soft);
      color: var(--brand);
      transform: scale(1.1);
    }

    .collapsible-section {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .section-toggle {
      cursor: pointer;
      user-select: none;
      border-radius: 12px;
      padding: 12px 16px;
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      transition: all 0.3s ease;
    }

    .section-toggle:hover {
      background: var(--soft);
      transform: translateY(-2px);
      box-shadow: var(--shadow);
    }

    .section-toggle i {
      transition: transform 0.3s ease;
    }

    .section-toggle[aria-expanded="true"] i {
      transform: rotate(180deg);
    }

    .milestone-card {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
    }

    .milestone-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow);
    }

    .milestone-card.achieved::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, #28a745, #20c997);
    }

    .fullscreen-mode {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: var(--bg-main);
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    .fullscreen-counter {
      text-align: center;
      max-width: 600px;
      width: 100%;
    }

    .fullscreen-counter .display-1 {
      font-size: clamp(2rem, 8vw, 6rem);
      font-weight: 800;
      background: linear-gradient(45deg, var(--brand), var(--brand-2));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-bottom: 1rem;
    }

    .fullscreen-counter .lead {
      font-size: clamp(1.2rem, 3vw, 2rem);
      color: var(--text-muted);
      margin-bottom: 2rem;
    }

    .fullscreen-avatars {
      display: flex;
      justify-content: center;
      gap: 2rem;
      margin-bottom: 2rem;
    }

    .fullscreen-avatars .avatar {
      width: 120px;
      height: 120px;
      border-width: 6px;
    }

    .exit-fullscreen {
      position: absolute;
      top: 20px;
      right: 20px;
      background: rgba(0,0,0,0.1);
      border: none;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-primary);
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .exit-fullscreen:hover {
      background: rgba(0,0,0,0.2);
      transform: scale(1.1);
    }

    .floating-hearts {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      overflow: hidden;
    }

    .heart {
      position: absolute;
      font-size: 20px;
      color: var(--brand);
      animation: float-up 6s infinite linear;
      opacity: 0;
    }

    @keyframes float-up {
      0% {
        opacity: 0;
        transform: translateY(100vh) rotate(0deg);
      }
      10% {
        opacity: 1;
      }
      90% {
        opacity: 1;
      }
      100% {
        opacity: 0;
        transform: translateY(-10vh) rotate(360deg);
      }
    }

    .btn {
      border-radius: 12px;
      font-weight: 500;
      transition: all 0.3s ease;
    }

    .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

    .card {
      border: 1px solid var(--border-color);
      background: var(--bg-card);
      border-radius: 16px;
      box-shadow: var(--shadow);
    }

    .form-control, .form-select {
      border-radius: 12px;
      border: 1px solid var(--border-color);
      background: var(--bg-card);
      color: var(--text-primary);
    }

    .form-control:focus, .form-select:focus {
      border-color: var(--brand);
      box-shadow: 0 0 0 0.2rem rgba(255, 77, 109, 0.25);
    }

    /* Smooth animations */
    /*.fade-in {
      animation: fadeIn 0.6s ease-out;
    }*/

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

    .scale-in {
      animation: scaleIn 0.4s ease-out;
    }

    @keyframes scaleIn {
      from {
        opacity: 0;
        transform: scale(0.9);
      }
      to {
        opacity: 1;
        transform: scale(1);
      }
    }