* { margin: 0; padding: 0; box-sizing: border-box; }
        body {
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
          background: linear-gradient(135deg, #667eea 0%, #6373F7 100%);
          min-height: 100vh;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 20px;
        }
        .container {
          max-width: 520px;
          width: 100%;
          background: #fff;
          border-radius: 24px;
          box-shadow: 0 20px 60px rgba(0,0,0,0.3);
          overflow: hidden;
        }
        .header {
          background: linear-gradient(135deg, #667eea 0%, #6373F7 100%);
          color: #fff;
          padding: 32px 24px;
          text-align: center;
        }
        .header h1 {
          font-size: 28px;
          font-weight: 700;
          margin-bottom: 8px;
        }
        .header p {
          font-size: 14px;
          opacity: 0.9;
        }
        .form-content {
          padding: 32px 24px;
        }
        .form-group {
          margin-bottom: 24px;
        }
        .form-label {
          display: block;
          font-size: 14px;
          font-weight: 600;
          color: #333;
          margin-bottom: 8px;
        }
        .form-input,
        .form-select {
          width: 100%;
          padding: 14px 16px;
          font-size: 16px;
          border: 2px solid #e0e0e0;
          border-radius: 12px;
          transition: all 0.3s ease;
          background: #fff;
        }
        .form-input:focus,
        .form-select:focus {
          outline: none;
          border-color: #667eea;
          box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
        }
        .form-select {
          cursor: pointer;
          appearance: none;
          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='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
          background-repeat: no-repeat;
          background-position: right 16px center;
          background-color: #fff;
          padding-right: 40px;
        }
        .helper-text {
          font-size: 13px;
          color: #666;
          margin-top: 6px;
        }
        
        /* Locked field styling */
        .locked-field {
          background: #f0f9ff !important;
          border-color: #0ea5a4 !important;
          color: #333 !important;
          cursor: not-allowed !important;
          font-weight: 500;
        }
        .locked-field:focus {
          border-color: #0ea5a4 !important;
          box-shadow: 0 0 0 4px rgba(14, 165, 164, 0.1) !important;
        }
        
        /* Country card selection */
        .country-cards {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 12px;
          margin-top: 8px;
        }
        .country-card {
          position: relative;
          border: 2px solid #e0e0e0;
          border-radius: 12px;
          padding: 20px 12px;
          cursor: pointer;
          transition: all 0.3s ease;
          background: #fafafa;
          text-align: center;
        }
        .country-card:hover {
          border-color: #667eea;
          background: #f9fafb;
          transform: translateY(-2px);
        }
        .country-card input[type="radio"] {
          position: absolute;
          opacity: 0;
          pointer-events: none;
        }
        .country-card.selected {
          border-color: #667eea;
          background: #f0f4ff;
          box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
        }
        .country-flag {
          font-size: 48px;
          margin-bottom: 12px;
          line-height: 1;
        }
        .country-name {
          font-weight: 700;
          color: #333;
          margin-bottom: 4px;
          font-size: 16px;
        }
        .country-desc {
          font-size: 12px;
          color: #666;
          line-height: 1.3;
        }
        .country-checkmark {
          display: none;
          position: absolute;
          top: 12px;
          right: 12px;
          width: 28px;
          height: 28px;
          background: #667eea;
          border-radius: 50%;
          color: #fff;
          font-size: 16px;
          line-height: 28px;
          text-align: center;
          font-weight: 700;
        }
        .country-card.selected .country-checkmark {
          display: block;
        }
        
        .channels-section {
          display: none;
          margin-top: 8px;
        }
        .channels-section.active {
          display: block;
        }
        .channels-label {
          font-size: 14px;
          font-weight: 600;
          color: #333;
          margin-bottom: 12px;
          display: flex;
          align-items: center;
          gap: 8px;
        }
        .channels-grid {
          display: grid;
          grid-template-columns: 1fr;
          gap: 12px;
          max-width: 280px;
          margin: 0 auto;
        }
        .channel-card {
          position: relative;
          border: 2px solid #e0e0e0;
          border-radius: 12px;
          padding: 16px 12px;
          cursor: pointer;
          transition: all 0.3s ease;
          background: #fafafa;
          text-align: center;
        }
        .channel-card:hover {
          border-color: #667eea;
          background: #f9fafb;
        }
        .channel-card input[type="radio"] {
          position: absolute;
          opacity: 0;
          pointer-events: none;
        }
        .channel-card input[type="radio"]:checked + .channel-content {
          border-color: #667eea;
        }
        .channel-card input[type="radio"]:checked ~ .channel-checkmark {
          display: block;
        }
        .channel-card.selected {
          border-color: #667eea;
          background: #f0f4ff;
          box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
        }
        .channel-icon {
          width: 56px;
          height: 56px;
          margin: 0 auto 12px;
          background: #fff;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 700;
          font-size: 16px;
          color: #667eea;
          box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        }
        .channel-name {
          font-weight: 600;
          color: #333;
          margin-bottom: 4px;
          font-size: 14px;
        }
        .channel-desc {
          font-size: 11px;
          color: #666;
          line-height: 1.3;
        }
        .channel-checkmark {
          display: none;
          position: absolute;
          top: 8px;
          right: 8px;
          width: 24px;
          height: 24px;
          background: #667eea;
          border-radius: 50%;
          color: #fff;
          font-size: 14px;
          line-height: 24px;
          text-align: center;
        }
        .submit-btn {
          width: 100%;
          padding: 16px;
          font-size: 16px;
          font-weight: 700;
          color: #fff;
          background: linear-gradient(135deg, #667eea 0%, #6373F7 100%);
          border: none;
          border-radius: 12px;
          cursor: pointer;
          transition: all 0.3s ease;
          margin-top: 8px;
        }
        .submit-btn:hover:not(:disabled) {
          transform: translateY(-2px);
          box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
        }
        .submit-btn:disabled {
          opacity: 0.5;
          cursor: not-allowed;
        }
        
        /* EON Preview Card */
        .eon-preview-card {
          background: linear-gradient(135deg, #667eea 0%, #6373F7 100%);
          border-radius: 16px;
          padding: 24px;
          margin: 24px 0;
          box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
          animation: slideIn 0.5s ease-out;
        }
        
        @keyframes slideIn {
          from {
            opacity: 0;
            transform: translateY(20px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
        
        .eon-preview-header {
          display: flex;
          align-items: center;
          gap: 8px;
          margin-bottom: 16px;
        }
        
        .eon-icon {
          font-size: 24px;
          animation: pulse 2s ease-in-out infinite;
        }
        
        @keyframes pulse {
          0%, 100% { transform: scale(1); }
          50% { transform: scale(1.1); }
        }
        
        .eon-title {
          color: rgba(255, 255, 255, 0.9);
          font-size: 14px;
          font-weight: 600;
          text-transform: uppercase;
          letter-spacing: 0.5px;
        }
        
        .eon-amount-display {
          display: flex;
          align-items: baseline;
          gap: 8px;
          margin-bottom: 20px;
        }
        
        .eon-value {
          font-size: 48px;
          font-weight: 800;
          color: #fff;
          line-height: 1;
          text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        }
        
        .eon-label {
          font-size: 24px;
          font-weight: 700;
          color: rgba(255, 255, 255, 0.8);
        }
        
        .eon-breakdown {
          background: rgba(255, 255, 255, 0.15);
          border-radius: 12px;
          padding: 16px;
          margin-bottom: 16px;
          backdrop-filter: blur(10px);
        }
        
        .breakdown-row {
          display: flex;
          justify-content: space-between;
          align-items: center;
          color: #fff;
          font-size: 13px;
          margin-bottom: 8px;
        }
        
        .breakdown-row:last-child {
          margin-bottom: 0;
        }
        
        .breakdown-row span:first-child {
          opacity: 0.9;
        }
        
        .breakdown-row span:last-child {
          font-weight: 700;
        }
        
        .eon-note {
          display: flex;
          align-items: center;
          gap: 8px;
          color: rgba(255, 255, 255, 0.8);
          font-size: 12px;
          padding: 12px;
          background: rgba(255, 255, 255, 0.1);
          border-radius: 8px;
        }
        
        .note-icon {
          font-size: 16px;
        }
        
        .divider {
          height: 1px;
          background: #e5e7eb;
          margin: 24px 0;
        }
        
        /* EON Preview Card */
        .eon-preview-card {
          background: linear-gradient(135deg, #667eea 0%, #6373F7 100%);
          border-radius: 16px;
          padding: 24px;
          margin: 24px 0;
          color: #fff;
          box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
          transition: all 0.3s ease;
        }
        .eon-preview-card:hover {
          transform: translateY(-2px);
          box-shadow: 0 12px 32px rgba(102, 126, 234, 0.4);
        }
        .eon-preview-header {
          display: flex;
          align-items: center;
          gap: 8px;
          margin-bottom: 16px;
          font-size: 14px;
          opacity: 0.9;
        }
        .eon-icon {
          font-size: 20px;
          animation: pulse 2s ease-in-out infinite;
        }
        @keyframes pulse {
          0%, 100% { transform: scale(1); opacity: 1; }
          50% { transform: scale(1.1); opacity: 0.8; }
        }
        .eon-title {
          font-weight: 600;
          text-transform: uppercase;
          letter-spacing: 0.5px;
        }
        .eon-amount-display {
          display: flex;
          align-items: baseline;
          gap: 12px;
          margin-bottom: 16px;
        }
        .eon-value {
          font-size: 48px;
          font-weight: 700;
          line-height: 1;
          text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
          min-width: 100px;
          transition: all 0.3s ease;
        }
        .eon-value.loading {
          animation: blink 1.5s ease-in-out infinite;
        }
        @keyframes blink {
          0%, 100% { opacity: 1; }
          50% { opacity: 0.5; }
        }
        .eon-label {
          font-size: 24px;
          font-weight: 600;
          opacity: 0.9;
        }
        .eon-breakdown {
          background: rgba(255, 255, 255, 0.15);
          border-radius: 12px;
          padding: 12px 16px;
          margin-bottom: 12px;
          backdrop-filter: blur(10px);
        }
        .breakdown-row {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 6px 0;
          font-size: 13px;
        }
        .breakdown-row:not(:last-child) {
          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        .breakdown-row span:first-child {
          opacity: 0.8;
        }
        .breakdown-row span:last-child {
          font-weight: 600;
        }
        .eon-note {
          display: flex;
          align-items: center;
          gap: 6px;
          font-size: 11px;
          opacity: 0.7;
        }
        .note-icon {
          font-size: 14px;
        }
        
        @media (max-width: 480px) {
          .header h1 { font-size: 24px; }
          .form-content { padding: 24px 20px; }
          .channels-grid { grid-template-columns: 1fr; }
        }