.b64img{display:flex;flex-direction:column;gap:16px}.b64img__toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;padding:8px 0}.b64img__seg{display:inline-flex;gap:4px}.b64img__dropzone{border:2px dashed var(--color-border, #d1d5db);border-radius:8px;padding:48px 24px;text-align:center;cursor:pointer;transition:border-color .2s,background-color .2s;background:var(--color-bg-soft, #f9fafb)}.b64img__dropzone:hover,.b64img__dropzone--active{border-color:var(--color-primary, #3b82f6);background:var(--color-bg-hover, #eff6ff)}.b64img__dropzone-icon{font-size:48px;margin-bottom:12px}.b64img__dropzone-title{font-size:16px;font-weight:600;margin:0 0 8px;color:var(--color-text, #111827)}.b64img__dropzone-hint{font-size:13px;color:var(--color-text-soft, #6b7280);margin:0 0 8px}.b64img__dropzone-formats{font-size:12px;color:var(--color-text-mute, #9ca3af);margin:0}.b64img__dropzone kbd{padding:1px 6px;border:1px solid var(--color-border, #d1d5db);border-radius:3px;background:var(--color-bg, #fff);font-size:12px;font-family:monospace}.b64img__file-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0,0,0,0)}.b64img__result{display:flex;flex-direction:column;gap:16px}.b64img__preview{border:1px solid var(--color-border, #e5e7eb);border-radius:8px;padding:16px;background:var(--color-bg-soft, #f9fafb);text-align:center;background-image:linear-gradient(45deg,#e5e7eb 25%,transparent 25%),linear-gradient(-45deg,#e5e7eb 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e5e7eb 75%),linear-gradient(-45deg,transparent 75%,#e5e7eb 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}.b64img__preview-img{max-width:100%;max-height:400px;object-fit:contain}.b64img__info{list-style:none;padding:0;margin:0;border:1px solid var(--color-border, #e5e7eb);border-radius:8px;overflow:hidden}.b64img__info-row{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1px solid var(--color-border, #f3f4f6);gap:12px}.b64img__info-row:last-child{border-bottom:none}.b64img__info-label{color:var(--color-text-soft, #6b7280);font-size:13px;flex-shrink:0}.b64img__info-value{color:var(--color-text, #111827);font-size:13px;text-align:right;word-break:break-all}.b64img__section-title{font-size:14px;font-weight:600;margin:0 0 8px;color:var(--color-text, #111827)}.b64img__convert-bar{display:flex;align-items:center;flex-wrap:wrap;gap:12px}.b64img__field{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--color-text-soft, #6b7280)}.b64img__field select,.b64img__field input[type=range]{margin:0;cursor:pointer}.b64img__copy-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px}.b64img__copy-btn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 12px;text-align:left;position:relative}.b64img__copy-label{font-weight:600;font-size:13px}.b64img__copy-desc{font-size:11px;color:var(--color-text-mute, #9ca3af)}.b64img__copied{color:#10b981;font-size:11px;font-weight:600}.b64img__input-area{display:flex;flex-direction:column;gap:8px}.b64img__label{font-size:13px;color:var(--color-text-soft, #6b7280)}.b64img__textarea{width:100%;min-height:120px;padding:10px 12px;border:1px solid var(--color-border, #d1d5db);border-radius:6px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:13px;resize:vertical;background:var(--color-bg, #fff);color:var(--color-text, #111827)}.b64img__textarea:focus{outline:none;border-color:var(--color-primary, #3b82f6);box-shadow:0 0 0 2px #3b82f61a}.b64img__decode-actions{display:flex;align-items:center;gap:12px}.b64img__input-stat{font-size:12px;color:var(--color-text-mute, #9ca3af)}.b64img__error{padding:10px 12px;border-radius:6px;background:#fef2f2;border:1px solid #fecaca;color:#991b1b;font-size:13px;display:flex;gap:8px;align-items:center}.b64img__status{font-size:13px;color:var(--color-text-soft, #6b7280)}.b64img__notice{color:#059669;font-weight:500}.b64img__hint{color:var(--color-text-mute, #9ca3af)}@media(prefers-color-scheme:dark){.b64img__dropzone{background:var(--color-bg-soft, #1f2937);border-color:var(--color-border, #374151)}.b64img__dropzone:hover,.b64img__dropzone--active{background:var(--color-bg-hover, #1e3a5f);border-color:var(--color-primary, #60a5fa)}.b64img__dropzone-title{color:var(--color-text, #f9fafb)}.b64img__dropzone kbd{background:var(--color-bg, #111827);border-color:var(--color-border, #374151)}.b64img__preview{background-color:var(--color-bg-soft, #1f2937);background-image:linear-gradient(45deg,#374151 25%,transparent 25%),linear-gradient(-45deg,#374151 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#374151 75%),linear-gradient(-45deg,transparent 75%,#374151 75%)}.b64img__info{border-color:var(--color-border, #374151)}.b64img__info-row{border-bottom-color:var(--color-border, #374151)}.b64img__info-label{color:var(--color-text-soft, #9ca3af)}.b64img__info-value,.b64img__section-title{color:var(--color-text, #f9fafb)}.b64img__field{color:var(--color-text-soft, #9ca3af)}.b64img__textarea{background:var(--color-bg, #111827);color:var(--color-text, #f9fafb);border-color:var(--color-border, #374151)}.b64img__error{background:#7f1d1d;border-color:#991b1b;color:#fecaca}.b64img__notice{color:#34d399}.b64img__hint{color:var(--color-text-mute, #6b7280)}}@media(max-width:768px){.b64img__dropzone{padding:32px 16px}.b64img__dropzone-icon{font-size:36px}.b64img__convert-bar{flex-direction:column;align-items:stretch}.b64img__field{width:100%;justify-content:space-between}.b64img__info-row{flex-direction:column;align-items:flex-start;gap:2px}.b64img__info-value{text-align:left}}@media(max-width:414px){.b64img__copy-grid{grid-template-columns:1fr}.b64img__preview-img{max-height:240px}}