.decoder-page{padding:var(--space-xl) 0 var(--space-4xl)}.decoder-layout{max-width:800px;margin:0 auto}.upload-zone{border:2px dashed var(--border-default);border-radius:var(--radius-xl);padding:var(--space-3xl);text-align:center;cursor:pointer;transition:all var(--transition-base);background:var(--bg-secondary);position:relative}.upload-zone:hover,.upload-zone.drag-over{border-color:var(--accent-primary);box-shadow:var(--shadow-glow);background:#7c6af608}.upload-zone.drag-over{border-style:solid;transform:scale(1.01)}.upload-zone input[type=file]{opacity:0;cursor:pointer;position:absolute;inset:0}.upload-icon{width:64px;height:64px;margin:0 auto var(--space-lg);color:var(--text-tertiary);transition:color var(--transition-base)}.upload-zone:hover .upload-icon{color:var(--accent-primary)}.upload-zone h3{font-size:var(--text-lg);margin-bottom:var(--space-sm)}.upload-zone p{font-size:var(--text-sm);color:var(--text-secondary)}.upload-formats{justify-content:center;gap:var(--space-sm);margin-top:var(--space-md);display:flex}.upload-format-badge{background:var(--bg-tertiary);border-radius:var(--radius-sm);font-size:var(--text-xs);font-family:var(--font-mono);color:var(--text-tertiary);padding:3px 8px}.paste-section{align-items:center;gap:var(--space-md);margin-top:var(--space-md);display:flex}.paste-divider{font-size:var(--text-sm);color:var(--text-tertiary);font-weight:500}.paste-divider:before,.paste-divider:after{content:"";background:var(--border-default);vertical-align:middle;width:40px;height:1px;margin:0 var(--space-sm);display:inline-block}.decode-image-preview{margin-top:var(--space-lg);background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);overflow:hidden}.decode-image-preview img{object-fit:contain;background:var(--bg-tertiary);width:100%;max-height:400px}.decode-image-footer{padding:var(--space-md) var(--space-lg);border-top:1px solid var(--border-subtle);justify-content:space-between;align-items:center;display:flex}.decode-image-name{font-size:var(--text-sm);color:var(--text-secondary);font-family:var(--font-mono)}.decode-results{margin-top:var(--space-lg)}.decode-result-card{background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-lg);align-items:flex-start;gap:var(--space-md);margin-bottom:var(--space-md);animation:.3s fadeInUp;display:flex}.decode-result-icon{border-radius:var(--radius-md);background:var(--success-bg);width:40px;height:40px;color:var(--success);flex-shrink:0;justify-content:center;align-items:center;display:flex}.decode-result-icon svg{width:20px;height:20px}.decode-result-content{flex:1;min-width:0}.decode-result-type{font-size:var(--text-xs);color:var(--accent-primary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px;font-weight:600}.decode-result-value{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text-primary);word-break:break-all;background:var(--bg-tertiary);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm);margin-top:var(--space-sm);line-height:1.5}.decode-result-actions{gap:var(--space-sm);flex-shrink:0;display:flex}.batch-page{padding:var(--space-xl) 0 var(--space-4xl)}.batch-layout{gap:var(--space-xl);grid-template-columns:1fr 1fr;align-items:start;display:grid}.batch-input-section{position:sticky;top:80px}.batch-textarea{min-height:250px;font-family:var(--font-mono);font-size:var(--text-sm);line-height:1.6}.batch-options{align-items:center;gap:var(--space-md);margin-top:var(--space-md);flex-wrap:wrap;display:flex}.batch-preview-grid{gap:var(--space-md);grid-template-columns:repeat(auto-fill,minmax(200px,1fr));display:grid}.batch-preview-item{background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);transition:all var(--transition-fast);overflow:hidden}.batch-preview-item:hover{border-color:var(--border-accent)}.batch-preview-barcode{padding:var(--space-md);background:#fff;justify-content:center;align-items:center;min-height:80px;display:flex}.batch-preview-barcode svg,.batch-preview-barcode canvas{max-width:100%;height:auto}.batch-preview-label{padding:var(--space-sm) var(--space-md);font-size:var(--text-xs);font-family:var(--font-mono);color:var(--text-secondary);border-top:1px solid var(--border-subtle);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.history-page{padding:var(--space-xl) 0 var(--space-4xl)}.history-toolbar{justify-content:space-between;align-items:center;gap:var(--space-md);margin-bottom:var(--space-lg);flex-wrap:wrap;display:flex}.history-search{flex:1;min-width:200px;max-width:400px}.history-filters{align-items:center;gap:var(--space-sm);display:flex}.history-tabs{background:var(--bg-tertiary);border-radius:var(--radius-md);gap:2px;padding:2px;display:flex}.history-tab{border-radius:var(--radius-sm);font-size:var(--text-sm);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);padding:8px 16px;font-weight:500}.history-tab:hover{color:var(--text-primary)}.history-tab.active{background:var(--bg-secondary);color:var(--text-primary);box-shadow:var(--shadow-sm)}.history-stats{gap:var(--space-lg);margin-bottom:var(--space-lg);display:flex}.history-stat-card{background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-lg);flex:1}.history-stat-value{font-size:var(--text-3xl);background:var(--accent-gradient);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-weight:800}.history-stat-label{font-size:var(--text-sm);color:var(--text-secondary);margin-top:4px}.storage-bar{background:var(--bg-tertiary);border-radius:var(--radius-full);height:6px;margin-top:var(--space-sm);overflow:hidden}.storage-bar-fill{background:var(--accent-gradient);border-radius:var(--radius-full);height:100%;transition:width var(--transition-base)}@media (width<=1024px){.batch-layout{grid-template-columns:1fr}.batch-input-section{position:static}}@media (width<=768px){.history-toolbar{flex-direction:column;align-items:stretch}.history-search{max-width:100%}.history-stats{flex-direction:column}}