.lr-container { max-width: 1000px; margin: 0 auto; padding: 2rem 1rem; }
    .lr-card { background: #fff; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); overflow: hidden; border: 1px solid #e9ecef; }
    .lr-header { background: #f8f9fa; padding: 2rem; text-align: center; border-bottom: 1px solid #e9ecef; }
    .lr-body { display: flex; flex-wrap: wrap; }
    .lr-col { flex: 1 1 50%; padding: 2rem; box-sizing: border-box; }
    .lr-col-left { border-right: 1px solid #e9ecef; }
    @media(max-width: 768px) { .lr-col-left { border-right: none; border-bottom: 1px solid #e9ecef; } }
    
    .form-group { margin-bottom: 1.5rem; }
    .form-label { display: block; font-weight: 600; margin-bottom: 0.5rem; color: #343a40; }
    .form-control { width: 100%; padding: 0.75rem; border: 1px solid #ced4da; border-radius: 4px; font-family: inherit; }
    .form-text { font-size: 0.85rem; color: #6c757d; margin-top: 0.25rem; }
    
    .btn-primary { background: #0d6efd; color: #fff; border: none; padding: 0.75rem 1.5rem; border-radius: 4px; font-weight: bold; cursor: pointer; width: 100%; transition: background 0.2s; }
    .btn-primary:hover { background: #0b5ed7; }
    .btn-success { background: #198754; color: #fff; border: none; padding: 0.75rem 1.5rem; border-radius: 4px; font-weight: bold; cursor: pointer; width: 100%; }
    
    .preview-box { background: #f8f9fa; border: 2px dashed #dee2e6; border-radius: 4px; padding: 2rem; text-align: center; min-height: 100px; display: flex; align-items: center; justify-content: center; }
    .code-output { width: 100%; height: 180px; background: #212529; color: #20c997; font-family: monospace; padding: 1rem; border-radius: 4px; border: none; resize: vertical; font-size: 0.9rem; }
    
    .google-forms-banner { background: #e0f2fe; border-left: 4px solid #0284c7; padding: 1.5rem; border-radius: 4px; margin-top: 2rem; }