:root {
      --bg-color: #12151c;
      --header-bg: #000000;
      --yellow-main: #fce404;
      --yellow-dark: #d4c000;
      --text-main: #ffffff;
      --text-muted: #88929e;
      --card-bg: #080a0f;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Inter', sans-serif; }
    body { background-color: var(--bg-color); color: var(--text-main); -webkit-font-smoothing: antialiased; }
    
    .app-container {
      max-width: 480px; margin: 0 auto; background-color: var(--bg-color); 
      min-height: 100vh; position: relative; padding-bottom: 80px; 
      box-shadow: 0 0 20px rgba(0,0,0,0.5); overflow-x: hidden;
    }

    /* Header */
    .header { background-color: var(--header-bg); height: 60px; display: flex; justify-content: space-between; align-items: center; padding: 0 16px; position: sticky; top: 0; z-index: 50; border-bottom: 1px solid #283345; }
    .logo { font-size: 20px; font-weight: 900; letter-spacing: 0.5px; }
    .menu-btn { background: none; border: none; color: white; cursor: pointer; font-size: 24px; }

    /* Hero */
    .hero-banner { position: relative; width: 100%; }
    .hero-img { width: 100%; height: 380px; object-fit: cover; object-position: center 30%; display: block; }
    .hero-content { position: absolute; bottom: 40px; left: 0; padding: 16px; background: linear-gradient(to top, rgba(0,0,0,0.9), transparent); width: 100%; }
    .badge { background: rgba(252, 228, 4, 0.2); color: var(--yellow-main); padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: bold; margin-bottom: 8px; display: inline-block; border: 1px solid rgba(252, 228, 4, 0.4); }
    .hero-content h1 { font-size: 18px; line-height: 1.3; margin-bottom: 4px; text-shadow: 1px 1px 3px rgba(0,0,0,0.8); font-weight: 800; }
    .hero-content p { font-size: 11px; color: #bbb; }
    .my-tickets-btn { width: 100%; padding: 14px; background-color: #212529; color: white; border: none; display: flex; justify-content: center; align-items: center; font-size: 14px; font-weight: 600; cursor: pointer; border-top: 1px solid #333; }

    /* Price Tag & Awards */
    .price-tag-section { display: flex; justify-content: center; align-items: center; gap: 12px; padding: 16px; background-color: #1b212c; }
    .price-label { font-size: 14px; font-weight: 600; }
    .price-value { background-color: #000; padding: 4px 10px; border-radius: 6px; font-weight: 900; font-size: 18px; color: var(--yellow-main); }
    .awards-banner { background-color: #6c7a89; color: #1f2832; margin: 0 16px 16px; padding: 8px; border-radius: 6px; display: flex; justify-content: center; align-items: center; font-weight: 800; font-size: 14px; cursor: pointer; }

    /* Urgency */
    .urgency-section { background-color: var(--yellow-main); color: #000; margin: 0 16px 24px; border-radius: 8px; padding: 20px 16px; text-align: center; box-shadow: 0 4px 12px rgba(252, 228, 4, 0.15); }
    .urgency-section h2 { font-size: 15px; font-weight: 900; line-height: 1.3; margin-bottom: 16px; }
    .countdown { font-size: 15px; margin-bottom: 12px; }
    .countdown-timer { background: rgba(0,0,0,0.1); padding: 2px 8px; border-radius: 4px; font-family: monospace; font-size: 16px; font-weight: 900; }
    .urgency-msg { font-size: 15px; font-weight: 900; color: #d32f2f; margin-bottom: 10px; }

    /* Grid & Selectors */
    .ticket-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 16px; margin-bottom: 16px; }
    .ticket-card { background-color: var(--header-bg); border: 1px solid #1f2832; border-radius: 12px; padding: 16px 10px; text-align: center; cursor: pointer; position: relative; color: #fff; }
    .ticket-card.active { background-color: var(--yellow-main); color: #000; border: 2px solid var(--yellow-main); }
    .popular-badge { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); background-color: var(--yellow-main); color: #000; font-size: 10px; font-weight: 900; padding: 2px 6px; border-radius: 12px; }
    .ticket-qty { font-size: 26px; font-weight: 900; }
    .ticket-price { font-size: 12px; margin: 2px 0 8px; opacity: 0.9; font-weight: 600; }
    .ticket-action { font-size: 11px; font-weight: 800; }

    .manual-selector { display: flex; align-items: center; justify-content: center; margin: 0 16px 20px; background-color: #1b212c; border-radius: 8px; border: 1px solid #283345; padding: 4px; }
    .qty-btn { background: none; border: none; color: var(--text-muted); width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; cursor: pointer; font-size: 24px; }
    .qty-display { flex: 1; text-align: center; font-size: 20px; font-weight: 800; }

    /* Button Main */
    .checkout-section { padding: 0 16px; margin-bottom: 24px; }
    .btn-participate { background-color: var(--yellow-main); color: #000; width: 100%; border: none; border-radius: 12px; padding: 16px 20px; display: flex; align-items: center; font-size: 18px; font-weight: 900; cursor: pointer; box-shadow: 0 4px 14px rgba(252, 228, 4, 0.2); transition: transform 0.1s; justify-content: center; }
    .btn-participate:active { transform: scale(0.98); }
    
    /* Modals */
    .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.85); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 20px; animation: fadeIn 0.3s; }
    .modal-content { background: var(--card-bg); border: 1px solid #283345; border-radius: 16px; padding: 24px; width: 100%; max-width: 380px; text-align: center; position: relative; }
    .modal-input { width: 100%; padding: 14px; border-radius: 8px; background: #151a22; border: 1px solid #3f4e5e; color: #fff; font-size: 16px; margin-bottom: 20px; outline: none; }
    
    .screen { display: none; min-height: 100vh; }
    .screen.active { display: block; }
    
    /* PIX Steps */
    .pix-step { display: flex; gap: 16px; margin-bottom: 24px; text-align: left; }
    .step-number { width: 32px; height: 32px; background: var(--yellow-main); color: #000; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 18px; flex-shrink: 0; }
    
    @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(1.2); } }
    @keyframes pulse-text { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }

    .pulse-dot-anim { width: 12px; height: 12px; background-color: var(--yellow-main); border-radius: 50%; animation: pulse-dot 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

    /* Menu Overlay */
    .menu-overlay-nav {
      position: fixed; top: 0; left: 0; right: 0; bottom: 0;
      background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px);
      z-index: 2000; display: none; justify-content: flex-end;
    }
    .menu-content-nav {
      width: 280px; height: 100%; background-color: var(--bg-color);
      box-shadow: -4px 0 24px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column;
      transform: translateX(100%); transition: transform 0.3s ease-out;
    }
    .menu-overlay-nav.active { display: flex; }
    .menu-overlay-nav.active .menu-content-nav { transform: translateX(0); }

    .menu-header-nav { padding: 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
    .close-menu-nav { background: none; border: none; color: var(--text-muted); font-size: 24px; cursor: pointer; }
    .menu-nav-links { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
    .menu-link-nav { display: flex; align-items: center; gap: 12px; padding: 14px 16px; color: #fff; text-decoration: none; font-weight: 600; border-radius: 8px; transition: background 0.2s; cursor: pointer; }
    .menu-link-nav:hover { background-color: rgba(255, 255, 255, 0.05); }
    .admin-link-nav { margin-top: auto; color: var(--text-muted); font-size: 14px; border: 1px dashed rgba(255, 255, 255, 0.1); }
    .admin-link-nav:hover { color: var(--yellow-main); border-color: var(--yellow-main); }