/* ============================================================
   Base64 编解码 —— 页面私有样式（/devtools/base64-tool）
   通用结构复用 devtools.css，颜色只用 --c-* 变量，自动适配黑夜模式
   ============================================================ */

[hidden] { display: none; }

/* 左右两栏等高 */
.bt-pane {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.bt-pane .dt-textarea,
.bt-pane .dt-output-wrap { flex: 1; }

.bt-pane .dt-output {
    white-space: pre-wrap;
    word-break: break-all;
    font-size: inherit;
}

/* ---------- 图片拖拽区 ---------- */
.bt-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 22px 18px;
    border: 2px dashed var(--c-border);
    border-radius: 14px;
    background: var(--c-bg-soft);
    text-align: center;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
}

.bt-drop:hover,
.bt-drop.is-over {
    border-color: var(--c-primary);
    background: var(--c-bg-card);
}

.bt-drop-icon { font-size: 26px; line-height: 1; }

.bt-drop-text {
    font-size: 14px;
    font-weight: 700;
    color: var(--c-text);
}

.bt-drop-hint { font-size: 12.5px; color: var(--c-text-muted); line-height: 1.7; }

/* ---------- 图片结果区 ---------- */
.bt-img-out {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}

.bt-img-preview {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 12px;
    border: 1px solid var(--c-border);
    border-radius: 12px;
    background: var(--c-bg-soft);
}

.bt-img-preview img {
    max-width: 120px;
    max-height: 120px;
    border-radius: 8px;
    border: 1px solid var(--c-border);
    /* 图片本身可能是透明 PNG，给一层棋盘感底色，暗色下也能看清边界 */
    background: var(--c-bg-card);
}

.bt-img-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bt-img-info b { font-size: 13.5px; color: var(--c-text); }
.bt-img-info span { font-size: 12.5px; color: var(--c-text-muted); }

.bt-img-code {
    max-height: 170px;
    overflow: auto;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    background: var(--c-bg-soft);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--c-text-sub);
    white-space: pre-wrap;
    word-break: break-all;
}

@media (max-width: 640px) {
    .bt-img-preview img { max-width: 84px; max-height: 84px; }
}