.barcode_container{display:grid;grid-template-columns:1fr 1fr;gap:20px;min-height:650px;align-items:stretch;max-width:100%;box-sizing:border-box}@media (max-width:1024px){.barcode_container{grid-template-columns:1fr 1fr;gap:20px}}@media (max-width:768px){.barcode_container{grid-template-columns:1fr;gap:15px;max-width:calc(100vw - 10px);box-sizing:border-box}.barcode_main,.barcode_output{max-width:100%;box-sizing:border-box;overflow:hidden;width:100%}.barcode_textarea{min-height:200px;max-width:100%;box-sizing:border-box}.barcode_values_header{flex-direction:column;align-items:flex-start;gap:10px}.barcode_header_buttons{flex-wrap:wrap;gap:5px;width:100%;justify-content:center}.barcode_btn_icon{min-width:70px;font-size:11px;padding:8px 10px;flex:1;max-width:calc(50% - 2.5px)}.barcode_input_group{grid-template-columns:1fr;text-align:left}.barcode_input_group label{text-align:left;margin-bottom:5px}.barcode_preview_area{height:350px;padding:15px}.barcode_preview_canvas{max-width:100%}.barcode_preview_item{max-width:100%;overflow:hidden}}.barcode_main{background-color:var(--comment-bg);border:1px solid var(--border-sidebar-color);border-radius:12px;padding:25px}.barcode_output{background-color:var(--comment-bg);border:1px solid var(--border-sidebar-color);border-radius:12px;padding:20px;box-sizing:border-box;overflow:hidden}.barcode_section_title{font-size:16px;font-weight:600;color:var(--text-color);margin-bottom:15px;display:flex;align-items:center;gap:8px}.barcode_values_header{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}.barcode_header_buttons{display:flex;gap:8px;justify-content:center;flex:1;margin-left:20px}.barcode_btn_icon{padding:10px 12px;border:1px solid var(--border-sidebar-color);border-radius:6px;background-color:var(--card-bg);color:var(--text-color);cursor:pointer;transition:all 0.2s ease;font-size:12px;height:40px;display:flex;align-items:center;justify-content:center;min-width:80px}.barcode_btn_icon:hover{background-color:var(--primary-color);color:white}.barcode_textarea{width:100%;min-height:280px;padding:15px;border:1px solid var(--border-sidebar-color);border-radius:8px;background-color:var(--card-bg);color:var(--text-color);font-family:monospace;font-size:14px;resize:vertical;margin-bottom:20px}.barcode_options_section{margin-top:20px}.barcode_toggle_switch{position:relative;width:50px;height:24px;background-color:#ccc;border-radius:12px;cursor:pointer;transition:background-color 0.3s ease}.barcode_toggle_switch.active{background-color:#4caf50}.barcode_toggle_switch::before{content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;background-color:white;border-radius:50%;transition:transform 0.3s ease}.barcode_toggle_switch.active::before{transform:translateX(26px)}.barcode_input_group{display:grid;grid-template-columns:140px 1fr;align-items:center;gap:15px;margin-bottom:15px}.barcode_input_group label{font-size:14px;color:var(--text-color);text-align:right}.barcode_input_group input{padding:8px 12px;border:1px solid var(--border-sidebar-color);border-radius:6px;background-color:var(--card-bg);color:var(--text-color)}.barcode_preview_area{height:400px;border:2px dashed var(--border-sidebar-color);border-radius:8px;padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;margin-bottom:20px;background-color:var(--card-bg);overflow-y:auto}.barcode_preview_area::-webkit-scrollbar{width:8px}.barcode_preview_area::-webkit-scrollbar-track{background:#2a2a2a;border-radius:4px}.barcode_preview_area::-webkit-scrollbar-thumb{background:#555;border-radius:4px}.barcode_preview_area::-webkit-scrollbar-thumb:hover{background:#777}.barcode_preview_area{scrollbar-width:thin;scrollbar-color:#555 #2a2a2a}.barcode_preview_item{margin-bottom:40px;text-align:center;max-width:100%;overflow:visible;padding:15px;border:1px solid var(--border-sidebar-color);border-radius:8px;background-color:var(--card-bg);min-height:auto;display:flex;flex-direction:column;align-items:center;justify-content:center}.barcode_preview_canvas{border:1px solid #ddd;border-radius:4px;background-color:white;margin-bottom:10px;max-width:100%;display:block;margin:0 auto 10px auto}.barcode_function_section{margin-bottom:15px;padding:15px;background-color:var(--url-bg);border-radius:8px;border:1px solid var(--border-sidebar-color);transition:all 0.2s ease;box-sizing:border-box;overflow:hidden}.barcode_function_section:hover{box-shadow:0 2px 8px rgba(0,0,0,0.1);border-color:#ccc}.barcode_print_controls{display:flex;align-items:center;gap:10px;justify-content:center;flex-wrap:wrap}.barcode_download_controls{display:flex;align-items:center;gap:10px;justify-content:center;flex-wrap:wrap}.barcode_copy_download_controls{display:flex;align-items:center;gap:10px;justify-content:center;flex-wrap:wrap}.barcode_format_select{padding:12px;border:1px solid var(--border-sidebar-color);border-radius:6px;background-color:var(--card-bg);color:var(--text-color);font-size:14px;min-width:50px;height:40px;box-sizing:border-box;max-width:100%}.barcode_layout_select{padding:12px;border:1px solid var(--border-sidebar-color);border-radius:6px;background-color:var(--card-bg);color:var(--text-color);font-size:14px;min-width:90px;height:40px;box-sizing:border-box;max-width:100%}@media (max-width:1024px) and (min-width:769px){.barcode_print_controls,.barcode_download_controls,.barcode_copy_download_controls{justify-content:center;gap:8px}.normal-button{min-width:80px;font-size:12px;padding:10px 12px}}@media (max-width:768px){.barcode_print_controls{flex-direction:column;gap:10px;align-items:stretch}.barcode_download_controls{flex-direction:column;gap:10px;align-items:stretch}.barcode_copy_download_controls{flex-direction:column;gap:10px;align-items:stretch}.barcode_print_controls button,.barcode_download_controls button,.barcode_copy_download_controls button{width:100% !important;min-width:auto !important;max-width:none !important;margin:0 !important;flex:none !important}.barcode_print_controls select,.barcode_download_controls select,.barcode_copy_download_controls select{width:100% !important;margin:0 !important}}.barcode_btn_action{padding:12px 15px;border:none;border-radius:8px;cursor:pointer;font-size:13px;font-weight:500;transition:all 0.2s ease;display:flex;align-items:center;justify-content:center;gap:5px}.barcode_modal_overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.7);z-index:1000;animation:fadeIn 0.3s ease}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.barcode_modal{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--card-bg);border-radius:12px;padding:30px;max-width:500px;width:90%;max-height:80%;overflow-y:auto;animation:slideIn 0.3s ease}@keyframes slideIn{from{transform:translate(-50%,-60%);opacity:0}to{transform:translate(-50%,-50%);opacity:1}}.barcode_modal_header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.barcode_modal_title{font-size:18px;font-weight:600;color:var(--text-color)}.barcode_modal_nav{display:flex;gap:10px}.barcode_nav_btn{padding:8px 12px;border:1px solid var(--border-sidebar-color);border-radius:6px;background-color:var(--card-bg);color:var(--text-color);cursor:pointer;font-size:12px}.barcode_modal_close{background:none;border:none;font-size:24px;cursor:pointer;color:var(--text-color);padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center}.barcode_modal_content{text-align:center}.barcode_modal_image{max-width:100%;margin-bottom:20px;border:1px solid #ddd;border-radius:4px;background-color:white;display:block;margin-left:auto;margin-right:auto}.barcode_copy_buttons{display:flex;flex-direction:column;gap:15px;margin-bottom:25px}.barcode_copy_option{padding:15px;border:1px solid var(--border-sidebar-color);background-color:var(--card-bg);border-radius:8px;cursor:pointer;text-align:left;transition:all 0.2s ease;position:relative}.barcode_copy_option:hover{background-color:var(--comment-bg)}.barcode_copy_option:active{transform:scale(0.98);background-color:#e3f2fd}.barcode_copy_option_title{font-weight:600;margin-bottom:5px;color:var(--primary-color)}.barcode_copy_option_desc{color:var(--description-color);font-size:13px;line-height:1.4}.barcode_link_section{}.barcode_link_input_group{display:flex;gap:10px;margin-top:10px}.barcode_link_input{flex:1;padding:10px 12px;border:1px solid var(--border-sidebar-color);border-radius:6px;background-color:var(--url-bg);color:var(--text-color);font-size:13px}.barcode_empty_state{text-align:center;color:#999;font-style:italic;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;width:100%}.file-upload-input{position:absolute;opacity:0;width:100%;height:100%;cursor:pointer}.upload-btn{position:relative;overflow:hidden;height:40px;display:flex;align-items:center;justify-content:center;min-width:80px;cursor:pointer}.normal-button{min-width:90px;max-width:180px;width:auto;flex:0 0 auto;padding:12px 16px;white-space:nowrap;box-sizing:border-box}