/* ===== Base64 Layout ===== */
.base64-layout { display:flex; flex-direction:column; gap:0; }
.base64-tabs { display:flex; gap:0; border-bottom:3px solid var(--border); margin-bottom:1.25rem; }
.base64-tab { flex:1; padding:0.75rem 1rem; font-size:0.925rem; font-weight:600; border:none; background:var(--bg-alt); color:var(--text-secondary); cursor:pointer; transition:all 0.15s; border-radius:var(--radius-sm) var(--radius-sm) 0 0; position:relative; bottom:-3px; border:3px solid transparent; border-bottom:none; }
.base64-tab:hover { background:var(--bg-card); color:var(--text); }
.base64-tab.active { background:var(--bg-card); color:var(--accent); border-color:var(--border); border-bottom-color:var(--bg-card); z-index:1; }
.base64-tab:focus-visible { outline:3px solid var(--accent); outline-offset:-3px; }
.base64-panel { display:flex; flex-direction:column; gap:0.75rem; }
.base64-textarea { width:100%; height:150px; resize:vertical; min-height:120px; max-height:400px; padding:0.75rem 0.875rem; font-family:'Courier New',Courier,monospace; font-size:0.875rem; line-height:1.55; border:2px solid var(--border); border-radius:var(--radius-sm); background:var(--bg); color:var(--text); transition:border-color 0.15s,box-shadow 0.15s; outline:none; box-sizing:border-box; }
.base64-textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-light); }
.base64-textarea[readonly] { background:var(--bg-alt); cursor:default; opacity:0.95; }
.base64-textarea[aria-invalid="true"] { border-color:#e53935; box-shadow:0 0 0 3px rgba(229,57,53,0.15); }
.base64-textarea-footer { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; flex-wrap:wrap; margin-top:0.25rem; }
.char-count { font-size:0.75rem; color:var(--text-tertiary); font-weight:500; }
.char-count.warning { color:#e65100; font-weight:600; }
.base64-textarea-actions { display:flex; gap:0.375rem; }
.btn-sm { padding:0.35rem 0.65rem; font-size:0.775rem; font-weight:600; border:2px solid var(--border); border-radius:var(--radius-sm); background:var(--bg); color:var(--text-secondary); cursor:pointer; transition:all 0.15s; display:inline-flex; align-items:center; gap:0.25rem; white-space:nowrap; }
.btn-sm:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-light); }
.btn-sm:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.base64-dropzone { border:3px dashed var(--border); border-radius:var(--radius); padding:1.5rem; text-align:center; transition:all 0.2s; cursor:pointer; background:var(--bg-alt); margin-bottom:0.5rem; }
.base64-dropzone.dragover { border-color:var(--accent); background:var(--accent-light); box-shadow:0 0 20px var(--accent-glow); }
.base64-dropzone-text { font-size:0.9rem; color:var(--text-secondary); font-weight:500; }
.base64-dropzone-icon { font-size:2rem; display:block; margin-bottom:0.5rem; }
.base64-img-preview { display:none; margin-top:0.75rem; padding:1rem; background:var(--bg-card); border:2px solid var(--border); border-radius:var(--radius-sm); text-align:center; }
.base64-img-preview.show { display:block; }
.base64-img-preview img { max-width:100%; max-height:300px; border-radius:var(--radius-sm); border:1px solid var(--border); }
.base64-checksum { display:flex; align-items:center; gap:0.75rem; margin-top:0.5rem; padding:0.625rem 0.875rem; background:var(--bg-alt); border:2px solid var(--border); border-radius:var(--radius-sm); font-size:0.75rem; flex-wrap:wrap; }
.base64-checksum-label { font-weight:700; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.05em; font-size:0.68rem; white-space:nowrap; }
.base64-checksum-value { font-family:'Courier New',monospace; color:var(--text); font-weight:600; word-break:break-all; flex:1; min-width:0; }
.base64-checksum-copy { padding:3px 10px; font-size:0.68rem; font-weight:600; border:2px solid var(--border); border-radius:100px; background:var(--bg); color:var(--text-secondary); cursor:pointer; transition:all 0.15s; font-family:var(--font); flex-shrink:0; }
.base64-checksum-copy:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-light); }
.base64-file-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.base64-options { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; padding:0.625rem 0.875rem; background:var(--bg-alt); border:2px solid var(--border); border-radius:var(--radius-sm); }
.option-group { display:flex; align-items:center; gap:0.5rem; }
.option-group label { font-size:0.8rem; font-weight:600; color:var(--text-secondary); }
.option-group select { padding:0.35rem 0.5rem; font-size:0.8rem; font-weight:500; border:2px solid var(--border); border-radius:var(--radius-sm); background:var(--bg); color:var(--text); cursor:pointer; outline:none; }
.option-group select:focus { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-light); }
.checkbox-label { cursor:pointer; user-select:none; display:flex !important; align-items:center; gap:0.4rem; }
.checkbox-label input[type="checkbox"] { width:1.05rem; height:1.05rem; accent-color:var(--accent); cursor:pointer; flex-shrink:0; }
.checkbox-label span { font-size:0.8rem; font-weight:500; color:var(--text); }
#btnProcess.encode-mode { background:#1b5e20; border:2px solid #2e7d32; box-shadow:0 4px 16px rgba(27,94,32,0.35); }
#btnProcess.encode-mode:hover:not(:disabled) { box-shadow:0 6px 24px rgba(27,94,32,0.5); }
#btnProcess.decode-mode { background:#b71c1c; border:2px solid #c62828; box-shadow:0 4px 16px rgba(183,28,28,0.35); }
#btnProcess.decode-mode:hover:not(:disabled) { box-shadow:0 6px 24px rgba(183,28,28,0.5); }
.processing-overlay { position:relative; }
.processing-overlay::after { content:''; position:absolute; inset:0; background:rgba(255,255,255,0.4); border-radius:var(--radius-sm); z-index:5; display:flex; align-items:center; justify-content:center; }
.processing-spinner { display:flex; align-items:center; justify-content:center; gap:0.5rem; padding:0.5rem; font-size:0.85rem; font-weight:600; color:var(--accent); min-height:40px; }
.processing-spinner .spinner-dot { width:8px; height:8px; border-radius:50%; background:var(--accent); animation:base64-bounce 0.5s ease-in-out infinite alternate; }
.processing-spinner .spinner-dot:nth-child(2) { animation-delay:0.15s; }
.processing-spinner .spinner-dot:nth-child(3) { animation-delay:0.3s; }
@keyframes base64-bounce { from { transform:translateY(0); opacity:0.4; } to { transform:translateY(-8px); opacity:1; } }
@media (max-width:800px) { .base64-tab { font-size:0.85rem; padding:0.6rem 0.75rem; } .base64-textarea { font-size:0.82rem; height:130px; min-height:100px; } .base64-options { flex-direction:column; align-items:flex-start } }
@media (max-width:480px) { .base64-tab { font-size:0.8rem; padding:0.5rem 0.5rem; } .base64-textarea-footer { flex-direction:column; align-items:flex-start; } .btn-sm { font-size:0.72rem; padding:0.3rem 0.5rem; } .base64-options { padding:0.5rem 0.625rem; } .option-group select { font-size:0.75rem; } .checkbox-label span { font-size:0.75rem; } }