/* Webpage Text Extractor (.wte-*) */ .wte-card { padding: 16px 18px; margin-bottom: 14px; } /* Mode */
.wte-mode-row { display: flex; gap: 4px; background: var(--yst-bg-subtle); border-radius: 8px; padding: 4px; margin-bottom: 14px; width: fit-content;
}
.wte-mode-btn { background: transparent; border: 1px solid transparent; border-radius: 5px; padding: 7px 16px; font: 600 12px var(--yst-font); color: var(--yst-text-muted); cursor: pointer; transition: all .15s; letter-spacing: var(--yst-letter-spacing);
}
.wte-mode-btn:hover { color: var(--yst-brand); }
.wte-mode-btn.active { background: var(--yst-brand); border-color: var(--yst-brand); color: #fff; } .wte-label { display: block; font: 600 12px var(--yst-font); color: var(--yst-text-muted); text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 6px;
} /* Input */
.wte-input-wrapper { display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.wte-protocol { width: 110px; flex-shrink: 0; }
.wte-url-input { flex: 1; min-width: 220px; }
.wte-submit-btn { height: 44px !important; padding: 0 22px !important; flex-shrink: 0; } .wte-html-wrapper { flex-direction: column; align-items: stretch; }
.wte-html-input { width: 100%; font-family: var(--yst-font-mono, monospace); margin-bottom: 8px; min-height: 220px; } .wte-hint { display: flex; flex-direction: column; gap: 3px; font: 12px var(--yst-font); color: var(--yst-text-muted); margin: 8px 0 0;
}
.wte-shortcut { font: 11px var(--yst-font-mono, monospace); color: var(--yst-text-light);
} /* Result */
.wte-result { margin-top: 18px; background: var(--yst-bg-subtle); border: 1px solid var(--yst-border); border-radius: 8px; padding: 14px 18px;
}
.wte-result-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--yst-border); flex-wrap: wrap; gap: 8px;
}
.wte-result-title { font: 700 16px var(--yst-font); color: var(--yst-text); margin: 0;
}
.wte-result-actions { display: flex; gap: 6px;
} .wte-result-content { background: #fff; border: 1px solid var(--yst-border); border-radius: 6px; padding: 14px 16px; max-height: 500px; overflow-y: auto; font: 13px/1.7 var(--yst-font); color: var(--yst-text); white-space: pre-wrap; word-break: break-word;
}
.wte-result-meta { margin-top: 10px; display: flex; gap: 16px; flex-wrap: wrap; font: 12px var(--yst-font); color: var(--yst-text-muted);
} /* Error */
.wte-error { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; border-radius: 8px; padding: 12px 16px; margin-top: 14px;
}
.wte-error-msg { margin: 0; font: 13px var(--yst-font); } /* Toast */
.wte-toast { position: fixed; top: 24px; left: 50%; transform: translateX(-50%) translateY(-100px); background: var(--yst-text); color: #fff; padding: 10px 18px; border-radius: 6px; font: 13px var(--yst-font); z-index: 9999; transition: transform .25s; box-shadow: 0 4px 16px rgba(0, 0, 0, .15); opacity: 0;
}
.wte-toast.show { transform: translateX(-50%) translateY(0); opacity: 1; } @media (max-width: 768px) { .wte-input-wrapper { flex-direction: column; align-items: stretch; } .wte-protocol, .wte-url-input, .wte-submit-btn { width: 100%; }
}