.base64-page{max-width:1200px;margin:3rem auto;padding:0 2rem}.base64-header{text-align:center;margin-bottom:2rem}.base64-header h2{font-size:2.5rem;font-weight:700;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-hover) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.5rem}.base64-header p{font-size:1.125rem;color:var(--text-secondary)}.tabs{display:flex;gap:1rem;margin-bottom:2rem;border-bottom:2px solid var(--border-color)}.batch-toggle{margin-bottom:1rem}.batch-toggle label{display:flex;align-items:center;gap:.5rem;font-weight:600;cursor:pointer}.batch-toggle input[type=checkbox]{width:1.25rem;height:1.25rem;cursor:pointer}.tab{display:flex;align-items:center;gap:.5rem;padding:1rem 2rem;background:none;border:none;color:var(--text-secondary);font-weight:600;cursor:pointer;position:relative;transition:var(--transition);-webkit-tap-highlight-color:transparent}.tab:hover,.tab.active{color:var(--primary)}.tab.active:after{content:"";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:var(--primary)}.base64-content{display:grid;grid-template-columns:400px 1fr;gap:2rem}.base64-controls{background:var(--bg-secondary);border-radius:1rem;padding:2rem;box-shadow:var(--shadow-lg);border:1px solid var(--border-color);display:flex;flex-direction:column;gap:1.5rem;height:fit-content}.base64-result{background:var(--bg-secondary);border-radius:1rem;padding:2rem;box-shadow:var(--shadow-lg);border:1px solid var(--border-color);min-height:400px;display:flex;flex-direction:column}.form-group{display:flex;flex-direction:column;gap:.5rem}.form-group label{font-weight:600;color:var(--text-primary)}.form-group input,.form-group select,.form-group textarea{width:100%;padding:.75rem;border:2px solid var(--border-color);border-radius:.5rem;background:var(--bg-primary);color:var(--text-primary);font-family:inherit;transition:var(--transition)}.form-group textarea{resize:vertical;min-height:120px}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px var(--primary-light)}.checkbox-group{display:flex;flex-direction:column;gap:.75rem}.checkbox-group label,.checkbox-inline{display:flex;align-items:center;gap:.5rem;color:var(--text-secondary);cursor:pointer;position:relative;font-weight:600}.info-tooltip-wrapper{position:relative;display:inline-flex;align-items:center;margin-left:auto}.info-icon{color:var(--text-secondary);cursor:help;transition:var(--transition)}.info-icon:hover{color:var(--primary)}.info-tooltip{position:fixed;background:var(--bg-primary);color:var(--text-primary);padding:.5rem .75rem;border-radius:.5rem;font-size:.875rem;box-shadow:0 4px 12px #00000026;border:1px solid var(--border-color);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:10000;max-width:min(350px,calc(100vw - 2rem));min-width:280px;white-space:normal;text-align:left;line-height:1.5}.info-tooltip:after{content:"";position:absolute;top:100%;right:1rem;border:6px solid transparent;border-top-color:var(--bg-primary)}.info-tooltip-wrapper:hover .info-tooltip{opacity:1;pointer-events:auto}.btn-primary,.btn-secondary,.btn-add,.btn-danger,.btn-remove,.btn-copy{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:1rem;border-radius:.5rem;font-weight:600;cursor:pointer;transition:var(--transition);border:none;-webkit-tap-highlight-color:transparent;-webkit-transform:translateZ(0);transform:translateZ(0)}.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-hover));color:#fff;box-shadow:0 4px 12px #2563eb4d}.btn-primary:hover:not(:disabled){transform:translate3d(0,-2px,0);box-shadow:0 6px 20px #2563eb66}.btn-primary:disabled{opacity:.6;cursor:not-allowed}.btn-secondary{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-color)}.btn-secondary:hover{background:var(--primary-light);border-color:var(--primary);color:var(--primary)}.btn-add{background:var(--bg-tertiary);color:var(--text-primary);border:2px dashed var(--border-color)}.btn-add:hover{border-color:var(--primary);color:var(--primary)}.btn-danger{background:var(--error);color:#fff}.btn-danger:hover{opacity:.9}.btn-remove{width:40px;height:40px;background:var(--error);color:#fff;padding:0;border-radius:.375rem}.btn-remove:hover:not(:disabled){opacity:.8}.btn-remove:disabled{opacity:.5;cursor:not-allowed}.btn-copy{padding:.5rem 1rem;background:var(--primary);color:#fff;font-size:.875rem}.btn-copy:hover{background:var(--primary-hover)}.spinning{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.batch-toolbar{display:flex;flex-direction:column;gap:.75rem}.batch-list{display:flex;flex-direction:column;gap:.75rem;max-height:400px;overflow-y:auto}.base64-page .batch-item{display:grid;grid-template-columns:30px 1fr 40px;gap:.5rem;align-items:start;padding:1rem;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:.5rem}.batch-number{background:var(--primary);color:#fff;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.875rem;font-weight:600}.batch-fields{display:flex;flex-direction:column;gap:.75rem}.batch-fields textarea{min-height:80px;border:2px solid var(--border-color);border-radius:.5rem;padding:.75rem;background:var(--bg-primary);color:var(--text-primary);font-family:inherit;resize:vertical;transition:var(--transition)}.batch-fields textarea:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px var(--primary-light)}.batch-options{display:flex;flex-direction:column;gap:.5rem}.result-display{display:flex;flex-direction:column;gap:1.5rem}.result-header{display:flex;justify-content:space-between;align-items:center}.result-header h3{font-size:1.5rem;font-weight:700;color:var(--text-primary);margin:0}.result-content{display:flex;flex-direction:column;gap:1rem}.result-row{display:flex;flex-direction:column;gap:.5rem;padding:1rem;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:.5rem;width:100%;min-width:0;box-sizing:border-box}.result-label{font-weight:600;color:var(--text-primary);font-size:.875rem}.result-value{font-family:Courier New,monospace;font-size:.938rem;color:var(--text-primary);word-break:break-all;background:var(--bg-secondary);padding:.5rem;border-radius:.375rem}.empty-state{min-height:200px;background:var(--bg-primary);border-radius:.75rem;border:2px dashed var(--border-color);display:flex;align-items:center;justify-content:center;color:var(--text-secondary);padding:1.5rem;text-align:center}.error-message{padding:1rem;background:linear-gradient(135deg,#ef44441a,#dc26261a);border:1px solid rgba(239,68,68,.3);border-radius:.5rem;color:#ef4444;font-weight:500;text-align:center;margin-bottom:1.5rem;grid-column:1 / -1}.batch-results{display:flex;flex-direction:column;gap:1.5rem;width:100%}.result-actions{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.summary{display:flex;gap:1rem;font-weight:600;font-size:.875rem}.summary .success{color:var(--success)}.summary .failed{color:var(--error)}.result-list{display:grid;gap:1rem;max-height:500px;overflow-y:auto}.result-item{border-radius:.75rem;padding:1.25rem;background:var(--bg-primary);border:1px solid var(--border-color);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:.75rem;width:100%;min-width:0;box-sizing:border-box}.result-item.success{border-color:#22c55e66}.result-item.failed{border-color:#ef444466}.result-item-header{display:flex;justify-content:space-between;align-items:center;font-weight:600;gap:1rem;flex-wrap:wrap}.result-index{color:var(--primary);font-size:1rem}.result-status{font-size:.875rem;padding:.25rem .75rem;border-radius:999px}.result-status.success{background:#22c55e1a;color:var(--success)}.result-status.failed{background:#ef44441a;color:var(--error)}.result-item-content{display:flex;flex-direction:column;gap:.75rem;padding:.75rem;font-size:1rem;width:100%;min-width:0}.result-item-content .result-row{padding:.75rem;margin:0;font-size:1rem;word-break:break-all;overflow-wrap:break-word;max-width:100%;min-width:0;width:100%;box-sizing:border-box;flex:1}.result-item-content .result-label{font-size:1rem;font-weight:600;word-break:break-word}.result-item-content .result-value{font-size:1rem;word-break:break-all;overflow-wrap:break-word;max-width:100%;display:block}.result-error{font-size:.95rem;line-height:1.6}.result-error pre{margin-top:.5rem;background:#ef444414;border-radius:.5rem;padding:.75rem;white-space:pre-wrap;word-break:break-word;border:1px solid rgba(239,68,68,.25)}@media(max-width:1200px){.base64-content{grid-template-columns:1fr}.base64-result{order:2}}@media(max-width:768px){.base64-page{padding:0 1rem;margin:2rem auto}.base64-header h2{font-size:1.875rem}.tabs{gap:.5rem}.tab{padding:.75rem 1rem;font-size:.875rem}.base64-controls{padding:1.5rem}.batch-item{grid-template-columns:30px 1fr 40px}.batch-fields .form-row{grid-template-columns:1fr}}@media(max-width:480px){.base64-page{padding:0 .75rem;margin:1.5rem auto}.base64-header h2{font-size:1.5rem}.tab{padding:.625rem .75rem}.base64-controls{padding:1.25rem}.batch-toolbar{flex-direction:column}.btn-primary,.btn-secondary,.btn-add,.btn-danger{width:100%}.result-actions{flex-direction:column;align-items:stretch}.summary{width:100%;justify-content:space-between}}