@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.barcode-generator-page{min-height:100vh;background:linear-gradient(135deg,var(--primary-50) 0%,var(--gray-50) 100%);padding:var(--spacing-2xl) var(--spacing-md)}.generator-container{max-width:1400px;margin:0 auto}.generator-header{text-align:center;margin-bottom:var(--spacing-3xl);padding:var(--spacing-2xl) var(--spacing-md)}.header-badge{display:inline-flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-lg);background:linear-gradient(135deg,var(--primary-500),var(--primary-600));color:var(--white);border-radius:100px;font-size:var(--font-size-sm);font-weight:600;margin-bottom:var(--spacing-lg);box-shadow:var(--shadow-md)}.generate-btn svg,.header-badge svg{width:20px;height:20px}.generator-header h1{font-size:var(--font-size-4xl);font-weight:700;color:var(--gray-800);margin:0 0 var(--spacing-md);line-height:1.2}.generator-header p{font-size:var(--font-size-lg);color:var(--gray-600);max-width:600px;margin:0 auto;line-height:1.6}.generator-layout{display:flex;gap:32px;align-items:flex-start}.generator-panel{flex:1;background:var(--white);border-radius:var(--radius-xl);padding:40px;box-shadow:var(--shadow-lg);transition:var(--transition)}.generator-panel:hover{box-shadow:var(--shadow-xl)}.panel-section{margin-bottom:40px}.panel-section:last-of-type{margin-bottom:0}.panel-section h3{font-size:20px;font-weight:700;color:var(--gray-800);margin:0 0 20px;display:flex;align-items:center;gap:10px}.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.section-header h3{margin:0}.show-more-arrow{font-size:16px;color:var(--primary-500);cursor:pointer;transition:transform .3s ease;flex-shrink:0}.barcode-type-btn:hover span,.show-more-arrow:hover{color:var(--primary-600)}.show-more-arrow.expanded{transform:rotate(180deg)}.barcode-type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.barcode-type-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:20px 16px;background:var(--gray-50);border:2px solid var(--gray-200);border-radius:var(--radius-lg);cursor:pointer;transition:var(--transition);text-align:center}.barcode-type-btn span{font-size:15px;font-weight:700;color:var(--gray-700)}.barcode-type-btn small{font-size:12px;color:var(--gray-500);font-weight:500}.barcode-type-btn:hover{background:var(--primary-50);border-color:var(--primary-500);transform:translateY(-2px);box-shadow:var(--shadow-sm)}.barcode-type-btn.active{background:linear-gradient(135deg,var(--primary-500),var(--primary-600));border-color:var(--primary-600);box-shadow:var(--shadow-md)}.barcode-type-btn.active small,.barcode-type-btn.active span{color:#fff}.barcode-type-hidden{display:none;animation:fadeIn .3s ease-in}.barcode-input{width:100%;padding:16px 20px;font-size:16px;border:2px solid var(--gray-300);border-radius:var(--radius-lg);background:var(--gray-50);color:var(--gray-800);transition:var(--transition);font-family:inherit}.barcode-input:focus,.display-select:focus,.size-input:focus{outline:0;border-color:var(--primary-500);background:#fff;box-shadow:0 0 0 4px rgba(14,165,233,.1)}.barcode-input::placeholder{color:var(--gray-400)}.input-hint{margin-top:var(--spacing-sm);font-size:var(--font-size-sm);color:var(--gray-500)}.customization-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-bottom:24px}.custom-group{display:flex;flex-direction:column;gap:10px}.custom-group label{font-size:14px;font-weight:600;color:var(--gray-600)}.display-select,.size-input{width:100%;padding:12px 16px;font-size:16px;border:2px solid var(--gray-300);border-radius:var(--radius-lg);background:var(--gray-50);color:var(--gray-800);transition:var(--transition);font-family:inherit}.display-select{cursor:pointer}.color-options{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:24px}.color-picker{width:100%;height:50px;border:0;border-radius:var(--radius-lg);cursor:pointer;transition:var(--transition);box-shadow:0 2px 8px rgba(0,0,0,.1)}.color-picker:hover{box-shadow:0 4px 12px rgba(0,0,0,.15);transform:translateY(-2px)}.gradient-section{margin-top:24px;padding-top:24px;border-top:1px solid var(--gray-200)}.gradient-header{margin-bottom:16px}.gradient-toggle-label{display:flex;align-items:center;gap:12px;cursor:pointer;font-size:16px;font-weight:600;color:var(--gray-700);user-select:none;position:relative}.gradient-toggle{width:20px;height:20px;cursor:pointer;accent-color:var(--primary-500)}.gradient-arrow{margin-left:auto;color:var(--gray-500);font-size:14px;transition:transform .3s ease}.gradient-toggle-label:has(.gradient-toggle:checked) .gradient-arrow,.gradient-toggle:checked~.gradient-arrow{transform:rotate(180deg)}.gradient-options{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;animation:fadeIn .3s ease}.gradient-options .custom-group:last-child{grid-column:1/-1}.generate-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:12px;padding:18px 32px;font-size:18px;font-weight:700;background:linear-gradient(135deg,var(--primary-500),var(--primary-600));color:#fff;border:0;border-radius:var(--radius-lg);cursor:pointer;transition:var(--transition);box-shadow:var(--shadow-md);margin-top:32px}.generate-btn:hover{background:linear-gradient(135deg,var(--primary-600),var(--primary-700));box-shadow:var(--shadow-lg);transform:translateY(-2px)}.generate-btn:active{transform:translateY(0)}.preview-panel{flex:0 0 480px;background:var(--white);border-radius:var(--radius-xl);padding:40px;box-shadow:var(--shadow-lg);position:sticky;top:120px;transition:var(--transition)}.preview-panel:hover{box-shadow:var(--shadow-xl)}.preview-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.preview-header h3{font-size:20px;font-weight:700;color:var(--gray-800);margin:0}.preview-badges{display:flex;gap:8px}.badge{padding:6px 14px;background:var(--success-500);color:#fff;border-radius:100px;font-size:13px;font-weight:600}.barcode-preview-container{margin-bottom:32px}.barcode-display{min-height:300px;background:var(--gray-50);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;padding:40px;border:2px dashed var(--gray-300);transition:var(--transition)}.barcode-display:has(#barcode-svg[style*="display: block"]){background:#fff;border-style:solid;box-shadow:var(--shadow-sm)}#barcode-svg{max-width:100%;height:auto}.placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--gray-400)}.placeholder svg{margin-bottom:16px;opacity:.3}.placeholder p{font-size:16px;font-weight:500;margin:0;color:var(--gray-500)}.download-section{margin-bottom:32px}.download-section h4{font-size:16px;font-weight:700;color:var(--gray-800);margin:0 0 16px}.download-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.download-btn{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 12px;background:var(--gray-50);border:2px solid var(--gray-300);border-radius:var(--radius-lg);color:var(--gray-600);font-size:14px;font-weight:600;cursor:pointer;transition:var(--transition)}.download-btn:hover{background:linear-gradient(135deg,var(--primary-500),var(--primary-600));color:#fff;border-color:var(--primary-600);box-shadow:var(--shadow-md);transform:translateY(-2px)}.download-btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.download-btn svg{width:20px;height:20px}.barcode-info{display:flex;flex-direction:column;gap:12px;padding:20px;background:var(--primary-50);border-radius:var(--radius-lg)}.info-item{display:flex;justify-content:space-between;align-items:center}.info-label,.info-value{font-size:14px;font-weight:600;color:var(--gray-600)}.info-value{font-weight:700;color:var(--primary-600)}@media (max-width:1200px){.generator-layout{flex-direction:column}.preview-panel{flex:1;width:100%;position:static;max-width:600px;margin:0 auto}}@media (max-width:768px){.barcode-generator-page{padding:var(--spacing-lg) var(--spacing-sm)}.generator-header h1{font-size:var(--font-size-3xl)}.generator-header p{font-size:var(--font-size-base)}.generator-panel,.preview-panel{padding:24px;border-radius:var(--radius-lg)}.barcode-type-grid{grid-template-columns:repeat(2,1fr)}.color-options,.customization-grid,.download-grid{grid-template-columns:1fr}.barcode-display{min-height:250px;padding:var(--spacing-xl)}}@media (max-width:480px){.generator-panel,.preview-panel{padding:20px}.panel-section{margin-bottom:32px}.barcode-type-grid{grid-template-columns:1fr}.generator-header h1{font-size:var(--font-size-2xl)}}.help-content{width:100%;background:#fff;padding:60px 20px;margin-top:40px}.help-container{max-width:1200px;margin:0 auto}.faq-section>h3,.help-intro{text-align:center;margin-bottom:50px}.help-intro h2{font-size:32px;font-weight:700;color:#1f2937;margin-bottom:20px;line-height:1.3}.help-intro p{font-size:18px;color:#6b7280;line-height:1.7;max-width:900px;margin:0 auto}.faq-section{margin-bottom:50px}.faq-section>h3{font-size:28px;font-weight:700;color:#1f2937;margin-bottom:30px}.faq-item{background:#f9fafb;border-radius:12px;padding:30px;margin-bottom:20px;border-left:4px solid #667eea;transition:all .3s ease}.faq-item:hover{box-shadow:0 8px 24px rgba(102,126,234,.1);transform:translateX(4px)}.faq-item h4{font-size:22px;font-weight:600;color:#1f2937;margin:0 0 15px;line-height:1.4}.faq-item p{font-size:16px;color:#4b5563;line-height:1.8;margin-bottom:15px}.faq-item p:last-child,.help-footer p:last-child{margin-bottom:0}.faq-item ul{margin:15px 0;padding-left:20px}.faq-item ul li{font-size:16px;color:#4b5563;line-height:1.8;margin-bottom:12px;position:relative}.faq-item ul li strong{color:#1f2937;font-weight:600}.faq-item ul li::marker{color:#667eea}.help-footer{background:linear-gradient(135deg,#667eea 0,#764ba2 100%);border-radius:16px;padding:40px;text-align:center;color:#fff}.help-footer h3{font-size:28px;font-weight:700;margin:0 0 20px;color:#fff}.help-footer p{font-size:16px;line-height:1.8;margin-bottom:15px;opacity:.95}@media (max-width:768px){.help-content{padding:40px 15px}.help-intro h2{font-size:26px}.help-intro p{font-size:16px}.faq-section>h3,.help-footer h3{font-size:24px}.faq-item{padding:20px}.faq-item h4{font-size:19px}.faq-item p,.faq-item ul li,.help-footer p{font-size:15px}.help-footer{padding:30px 20px}}@media (max-width:480px){.help-intro h2{font-size:22px}.faq-item h4{font-size:17px}.faq-item{padding:15px}}