/* Shared visual polish for LW Tools. Loaded after page-local styles. */
:root {
    --lw-ink: #f8fafc;
    --lw-muted: #c7d2e3;
    --lw-line: rgba(148, 163, 184, 0.20);
    --lw-line-strong: rgba(148, 163, 184, 0.36);
    --lw-glass: rgba(11, 18, 32, 0.72);
    --lw-glass-strong: rgba(15, 23, 42, 0.86);
    --lw-focus: rgba(45, 212, 191, 0.22);
    --lw-shadow: 0 22px 60px rgba(0, 0, 0, 0.32);
    --lw-radius: 8px;
}

[data-theme="light"] {
    --lw-ink: #0f172a;
    --lw-muted: #526078;
    --lw-line: rgba(15, 23, 42, 0.12);
    --lw-line-strong: rgba(15, 23, 42, 0.24);
    --lw-glass: rgba(255, 255, 255, 0.78);
    --lw-glass-strong: rgba(255, 255, 255, 0.94);
    --lw-focus: rgba(20, 184, 166, 0.20);
    --lw-shadow: 0 20px 50px rgba(15, 23, 42, 0.12);
}

html {
    scroll-behavior: smooth;
}

body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.35;
    background-image:
        linear-gradient(115deg, transparent 0 18%, rgba(45, 212, 191, 0.10) 18% 19%, transparent 19% 52%, rgba(251, 191, 36, 0.08) 52% 53%, transparent 53%),
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 100% 100%, 100% 4px;
    mix-blend-mode: screen;
}

[data-theme="light"] body::after {
    opacity: 0.22;
    mix-blend-mode: multiply;
}

nav,
.nav {
    border-bottom-color: var(--lw-line) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 14px 36px rgba(0, 0, 0, 0.14);
}

.nav-logo,
.brand-logo {
    box-shadow: 0 10px 24px rgba(45, 212, 191, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.14) inset;
}

.nav-brand-name,
.nav-title,
.brand-mark span:last-child {
    letter-spacing: 0;
}

.theme-toggle,
.logout-btn,
.back-btn,
.nav-back,
.reset-btn,
.file-remove,
button,
a[role="button"] {
    border-radius: var(--lw-radius) !important;
}

.theme-toggle,
.logout-btn,
.back-btn,
.nav-back {
    min-height: 36px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset;
}

.theme-toggle:focus-visible,
.logout-btn:focus-visible,
.back-btn:focus-visible,
.nav-back:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 4px var(--lw-focus) !important;
}

.card,
.tool-card,
.stat-card,
.chart-card,
.hero-panel,
.login-shell,
.upload-zone,
.file-info,
.text-preview,
.page-table-scroll,
.preview-card,
.settings-card,
.server-card,
.modal-content,
.result-card,
.operation-card,
.form-card {
    border-radius: var(--lw-radius) !important;
}

.card,
.tool-card,
.chart-card,
.hero-panel,
.login-shell,
.preview-card,
.settings-card,
.server-card,
.modal-content,
.result-card,
.operation-card,
.form-card {
    border-color: var(--lw-line) !important;
    box-shadow: var(--lw-shadow);
}

.card,
.tool-card,
.chart-card,
.hero-panel,
.login-shell,
.preview-card,
.settings-card,
.server-card,
.modal-content,
.result-card,
.operation-card,
.form-card {
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.card:hover,
.tool-card:hover,
.chart-card:hover,
.preview-card:hover,
.settings-card:hover,
.server-card:hover,
.result-card:hover,
.operation-card:hover,
.form-card:hover {
    border-color: var(--lw-line-strong) !important;
}

.tool-card {
    isolation: isolate;
}

.tool-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--card-accent, var(--accent, #38bdf8)) 14%, transparent), transparent 42%),
        radial-gradient(circle at 92% 14%, color-mix(in srgb, var(--card-accent, var(--accent, #38bdf8)) 18%, transparent), transparent 28%);
    opacity: 0;
    transition: opacity 180ms ease;
}

.tool-card:hover::after {
    opacity: 1;
}

.tool-icon-wrap,
.file-icon,
.stat-icon,
.login-hint-icon {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.10) inset;
}

.tool-arrow,
.file-remove {
    flex-shrink: 0;
}

.tool-tag,
.tool-badge,
.hero-chip,
.hero-kicker,
.brand-pill,
.section-label,
.stat-label {
    letter-spacing: 0 !important;
}

.page-header h1,
.hero h1,
.brand-copy h1,
.header h1 {
    letter-spacing: 0 !important;
}

input,
select,
textarea {
    border-radius: var(--lw-radius) !important;
}

input,
select,
textarea,
.form-input {
    border-color: var(--lw-line) !important;
}

input:focus,
select:focus,
textarea:focus,
.form-input:focus {
    border-color: color-mix(in srgb, var(--accent, #14b8a6) 70%, white) !important;
}

.upload-zone {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--accent, #14b8a6) 10%, transparent), transparent 42%),
        var(--lw-glass);
    border-color: color-mix(in srgb, var(--accent, #14b8a6) 34%, var(--lw-line)) !important;
}

.upload-zone:hover,
.upload-zone.drag-over {
    transform: translateY(-2px);
    box-shadow: 0 18px 42px color-mix(in srgb, var(--accent, #14b8a6) 16%, transparent);
}

.submit-btn,
.login-btn,
.primary-btn,
.action-btn,
.download-btn {
    border-radius: var(--lw-radius) !important;
    box-shadow: 0 14px 30px color-mix(in srgb, var(--accent, #14b8a6) 18%, transparent);
}

.submit-btn:hover,
.login-btn:hover,
.primary-btn:hover,
.action-btn:hover,
.download-btn:hover {
    filter: saturate(1.06) brightness(1.02);
}

table {
    border-spacing: 0;
}

th,
td {
    vertical-align: middle;
}

.page-table-scroll,
.text-preview {
    border-color: var(--lw-line) !important;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.34) !important;
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: content-box !important;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.54) !important;
    background-clip: content-box !important;
}

@media (max-width: 760px) {
    nav,
    .nav {
        padding-left: 16px !important;
        padding-right: 16px !important;
        gap: 12px;
    }

    .nav-left,
    .nav-actions {
        min-width: 0;
    }

    .nav-current,
    .nav-title,
    .nav-brand-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    main,
    .container,
    .page {
        padding-left: 16px;
        padding-right: 16px;
    }

    .card,
    .tool-card,
    .chart-card,
    .hero-panel,
    .login-panel,
    .brand-panel,
    .preview-card,
    .settings-card,
    .server-card,
    .result-card,
    .operation-card,
    .form-card {
        padding: min(24px, 5vw) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
    }
}

/* 2026 workspace redesign layer: one shared visual language across every tool page. */
:root,
body[data-theme="dark"] {
    --lw-page-bg: #101318;
    --lw-page-bg-2: #181c20;
    --lw-surface: rgba(28, 32, 38, 0.88);
    --lw-surface-strong: rgba(36, 41, 48, 0.96);
    --lw-surface-soft: rgba(255, 255, 255, 0.065);
    --lw-field: rgba(13, 16, 19, 0.48);
    --lw-ink: #f4f0e8;
    --lw-muted: #c6c9c3;
    --lw-subtle: #8f9795;
    --lw-line: rgba(232, 236, 232, 0.16);
    --lw-line-strong: rgba(232, 236, 232, 0.3);
    --lw-focus: rgba(45, 212, 191, 0.24);
    --lw-accent: var(--accent, #2dd4bf);
    --lw-accent-2: var(--accent2, #f2c14e);
    --lw-danger: #e85d75;
    --lw-ok: #7fb069;
    --lw-shadow: 0 24px 70px rgba(0, 0, 0, 0.36);
    --lw-shadow-soft: 0 12px 36px rgba(0, 0, 0, 0.22);
    --lw-radius: 8px;
    --lw-font: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", "Segoe UI", sans-serif;
}

[data-theme="light"],
body[data-theme="light"] {
    --lw-page-bg: #f6f3ed;
    --lw-page-bg-2: #e9ece7;
    --lw-surface: rgba(255, 252, 244, 0.9);
    --lw-surface-strong: rgba(255, 252, 244, 0.98);
    --lw-surface-soft: rgba(20, 23, 27, 0.055);
    --lw-field: rgba(255, 255, 255, 0.74);
    --lw-ink: #15181d;
    --lw-muted: #4f5858;
    --lw-subtle: #747d7a;
    --lw-line: rgba(20, 23, 27, 0.13);
    --lw-line-strong: rgba(20, 23, 27, 0.26);
    --lw-focus: rgba(15, 159, 143, 0.2);
    --lw-shadow: 0 22px 55px rgba(20, 23, 27, 0.13);
    --lw-shadow-soft: 0 10px 28px rgba(20, 23, 27, 0.1);
}

html {
    background: var(--lw-page-bg);
}

body {
    min-width: 320px;
    background:
        linear-gradient(120deg, color-mix(in srgb, var(--lw-accent) 13%, transparent), transparent 34%),
        linear-gradient(235deg, rgba(232, 93, 117, 0.1), transparent 38%),
        linear-gradient(180deg, var(--lw-page-bg), var(--lw-page-bg-2)) !important;
    color: var(--lw-ink) !important;
    font-family: var(--lw-font) !important;
    letter-spacing: 0 !important;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent 0 23px, color-mix(in srgb, var(--lw-line) 48%, transparent) 24px, transparent 25px),
        linear-gradient(transparent 0 23px, color-mix(in srgb, var(--lw-line) 48%, transparent) 24px, transparent 25px);
    background-size: 48px 48px;
    mask-image: linear-gradient(to bottom, black 0 58%, transparent 94%);
}

body::after {
    opacity: 0.24;
    background-image:
        linear-gradient(115deg, transparent 0 20%, color-mix(in srgb, var(--lw-accent) 10%, transparent) 20% 21%, transparent 21% 54%, rgba(242, 193, 78, 0.075) 54% 55%, transparent 55%),
        linear-gradient(rgba(255, 255, 255, 0.032) 1px, transparent 1px);
    background-size: 100% 100%, 100% 4px;
}

[data-theme="light"] body::after,
body[data-theme="light"]::after {
    opacity: 0.16;
}

main,
.container,
.page,
.shell {
    position: relative;
}

.container,
.page,
main:not(.login-shell) {
    width: min(1220px, calc(100% - 40px));
    max-width: 1220px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.container .container {
    width: 100%;
    max-width: none;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

nav,
.nav {
    position: sticky;
    top: 0;
    z-index: 30;
    min-height: 68px;
    border: 1px solid var(--lw-line) !important;
    border-left: 0 !important;
    border-right: 0 !important;
    background: color-mix(in srgb, var(--lw-surface-strong) 84%, transparent) !important;
    color: var(--lw-ink) !important;
    backdrop-filter: blur(18px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 16px 42px rgba(0, 0, 0, 0.14) !important;
}

.nav {
    border-radius: var(--lw-radius) !important;
    border-left: 1px solid var(--lw-line) !important;
    border-right: 1px solid var(--lw-line) !important;
}

.nav-left,
.nav-actions,
.nav-brand,
.nav-brand-home,
.brand,
.brand-mark,
.logo {
    min-width: 0;
}

.nav-brand,
.nav-brand-home,
.brand,
.logo {
    color: var(--lw-ink) !important;
    text-decoration: none !important;
}

.nav-logo,
.brand-logo,
.logo::before {
    border: 1px solid color-mix(in srgb, var(--lw-accent) 42%, white 12%) !important;
    background:
        linear-gradient(135deg, var(--lw-accent), #f2c14e) !important;
    color: #111418 !important;
    font-weight: 900 !important;
}

.nav-title,
.nav-current,
.nav-brand-name,
.logo span,
.brand span,
.brand-copy h1,
.page-header h1,
.header h1,
.card h2,
.settings-card h2,
.server-card h2 {
    color: var(--lw-ink) !important;
    letter-spacing: 0 !important;
}

.nav-current {
    color: var(--lw-muted) !important;
}

.nav-sep {
    color: var(--lw-subtle) !important;
}

.nav-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex: 0 0 auto;
}

nav .theme-toggle,
.nav .theme-toggle,
nav .nav-btn {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    flex: 0 0 38px;
    line-height: 1 !important;
    text-align: center;
}

nav .logout-btn,
.nav .logout-btn {
    width: auto !important;
    min-width: 76px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 12px !important;
    flex: 0 0 auto;
    white-space: nowrap;
}

.page-header,
.header {
    position: relative;
    overflow: hidden;
    margin: 28px 0 20px !important;
    padding: clamp(22px, 4vw, 38px) !important;
    border: 1px solid var(--lw-line);
    border-radius: var(--lw-radius);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--lw-accent) 13%, transparent), transparent 46%),
        var(--lw-surface);
    box-shadow: var(--lw-shadow-soft);
}

.page-header::before,
.header::before {
    content: "";
    position: absolute;
    inset: 14px;
    border: 1px dashed color-mix(in srgb, var(--lw-line-strong) 70%, transparent);
    border-radius: var(--lw-radius);
    pointer-events: none;
}

.page-header > *,
.header > * {
    position: relative;
}

.page-header h1,
.header h1 {
    margin-top: 0 !important;
    font-size: clamp(2rem, 4vw, 3.75rem) !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
}

.page-header p,
.header p,
.brand-copy p,
.login-header p,
.card p,
.upload-zone p,
.upload-section p,
.upload-hint,
.tool-desc,
.empty-state,
.empty-state-small,
.footer-text {
    color: var(--lw-muted) !important;
    letter-spacing: 0 !important;
}

.tool-badge,
.brand-pill,
.hero-kicker,
.hero-chip,
.section-label,
.stat-label,
.tool-tag,
.ai-status-pill,
.server-status,
.result-badge {
    border-color: color-mix(in srgb, var(--lw-accent) 30%, var(--lw-line)) !important;
    background: color-mix(in srgb, var(--lw-accent) 10%, transparent) !important;
    color: var(--lw-ink) !important;
    letter-spacing: 0 !important;
}

.card,
.tool-card,
.stat-card,
.chart-card,
.hero-panel,
.ops-panel,
.login-shell,
.brand-panel,
.login-panel,
.upload-zone,
.upload-area,
.upload-section,
.configs-section,
.config-item,
.file-info,
.text-preview,
.page-table-scroll,
.preview-card,
.preview-section,
.settings-card,
.server-card,
.alert-card,
.modal-content,
.editor-container,
.result-card,
.result-item,
.operation-card,
.form-card,
.option-group,
.info-item,
.server-item,
.server-selector,
.results-area,
.logs-area,
.ai-assistant,
.ai-response,
.resource-dashboard,
.task-progress,
.server-progress-item {
    border: 1px solid var(--lw-line) !important;
    border-radius: var(--lw-radius) !important;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--lw-accent) 8%, transparent), transparent 44%),
        var(--lw-surface) !important;
    color: var(--lw-ink) !important;
    box-shadow: var(--lw-shadow-soft) !important;
}

.card,
.settings-card,
.server-card,
.alert-card,
.operation-card,
.form-card,
.preview-card,
.configs-section,
.upload-section,
.upload-zone,
.upload-area {
    position: relative;
    overflow: hidden;
}

.card::before,
.settings-card::before,
.server-card::before,
.operation-card::before,
.form-card::before,
.preview-card::before,
.configs-section::before,
.upload-section::before,
.upload-zone::before,
.upload-area::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--lw-accent), transparent);
    pointer-events: none;
}

.card > *,
.settings-card > *,
.server-card > *,
.operation-card > *,
.form-card > *,
.preview-card > *,
.configs-section > *,
.upload-section > *,
.upload-zone > *,
.upload-area > * {
    position: relative;
}

.card:hover,
.tool-card:hover,
.chart-card:hover,
.preview-card:hover,
.settings-card:hover,
.server-card:hover,
.result-card:hover,
.operation-card:hover,
.form-card:hover,
.upload-section:hover,
.upload-zone:hover,
.upload-area:hover {
    border-color: color-mix(in srgb, var(--lw-accent) 45%, var(--lw-line-strong)) !important;
    box-shadow: var(--lw-shadow) !important;
}

.stats-panel,
.stats-grid,
.stats-grid-3,
.preview-info,
.options-grid,
.grid,
.main-grid,
.settings-grid,
.tool-grid {
    gap: 14px !important;
}

.stat-card,
.info-item {
    min-height: 104px;
    align-items: center;
}

.stat-icon,
.file-icon,
.upload-icon,
.login-hint-icon,
.modal-icon,
.empty-state-icon {
    color: var(--lw-accent) !important;
    filter: saturate(0.95);
}

.stat-value,
.value,
.ops-number,
.hero-panel-value {
    color: var(--lw-ink) !important;
    font-weight: 900 !important;
}

.stat-label,
.label,
.form-label,
.form-group label,
label {
    color: var(--lw-muted) !important;
    letter-spacing: 0 !important;
}

input,
select,
textarea,
.form-input,
.form-select,
.config-name-input,
.editor-textarea {
    border: 1px solid var(--lw-line) !important;
    border-radius: var(--lw-radius) !important;
    background: var(--lw-field) !important;
    color: var(--lw-ink) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset !important;
}

input::placeholder,
textarea::placeholder,
.form-input::placeholder {
    color: var(--lw-subtle) !important;
    opacity: 1 !important;
}

input:focus,
select:focus,
textarea:focus,
.form-input:focus,
.form-select:focus,
.config-name-input:focus,
.editor-textarea:focus {
    outline: 0 !important;
    border-color: color-mix(in srgb, var(--lw-accent) 72%, white) !important;
    box-shadow: 0 0 0 4px var(--lw-focus), 0 1px 0 rgba(255, 255, 255, 0.05) inset !important;
}

select option {
    background: var(--lw-page-bg-2) !important;
    color: var(--lw-ink) !important;
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--lw-accent);
}

button,
.btn,
.nav-btn,
.theme-toggle,
.logout-btn,
.back-btn,
.nav-back,
.reset-btn,
.file-remove,
.submit-btn,
.login-btn,
.primary-btn,
.action-btn,
.download-btn,
.btn-refresh,
.btn-save,
.btn-test,
.btn-ai,
.refresh-btn,
.file-input-btn,
.modal-btn,
.editor-close {
    min-height: 38px;
    border-radius: var(--lw-radius) !important;
    border: 1px solid var(--lw-line) !important;
    background: var(--lw-surface-soft) !important;
    color: var(--lw-ink) !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset !important;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, filter 180ms ease !important;
}

button:hover,
.btn:hover,
.nav-btn:hover,
.theme-toggle:hover,
.logout-btn:hover,
.back-btn:hover,
.nav-back:hover,
.reset-btn:hover,
.file-remove:hover,
.submit-btn:hover,
.login-btn:hover,
.primary-btn:hover,
.action-btn:hover,
.download-btn:hover,
.btn-refresh:hover,
.btn-save:hover,
.btn-test:hover,
.btn-ai:hover,
.refresh-btn:hover,
.file-input-btn:hover,
.modal-btn:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--lw-accent) 44%, var(--lw-line-strong)) !important;
    background: color-mix(in srgb, var(--lw-accent) 12%, var(--lw-surface-soft)) !important;
    box-shadow: var(--lw-shadow-soft) !important;
}

.submit-btn,
.login-btn,
.primary-btn,
.action-btn,
.download-btn,
.btn-primary,
.btn.primary,
.btn-save,
.file-input-btn,
.btn-copy,
.modal-btn-primary {
    border-color: transparent !important;
    background: linear-gradient(135deg, var(--lw-accent), #f2c14e) !important;
    color: #111418 !important;
}

.btn-danger,
.btn-delete,
.result-badge.error,
.alert-error {
    border-color: color-mix(in srgb, var(--lw-danger) 44%, var(--lw-line)) !important;
    background: color-mix(in srgb, var(--lw-danger) 12%, transparent) !important;
    color: color-mix(in srgb, var(--lw-danger) 82%, white) !important;
}

.alert-success,
.result-badge.success,
.server-status.online,
.success {
    border-color: color-mix(in srgb, var(--lw-ok) 42%, var(--lw-line)) !important;
    background: color-mix(in srgb, var(--lw-ok) 12%, transparent) !important;
}

.upload-zone,
.upload-area,
.upload-section {
    border-style: dashed !important;
    min-height: 220px;
    align-content: center;
}

.upload-zone.drag-over,
.upload-area.dragover,
.upload-section.dragover {
    border-color: var(--lw-accent) !important;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--lw-accent) 16%, transparent), transparent 44%),
        var(--lw-surface-strong) !important;
}

.file-info,
.config-item,
.server-item,
.result-item,
.server-progress-item,
.checkbox-wrapper,
.sub-options,
.multi-select,
.result-output,
.ai-response,
.resource-dashboard,
.logs-area,
.results-area,
.table-wrapper,
.page-table-scroll,
.text-preview,
.preview-content,
.editor-textarea {
    background: var(--lw-field) !important;
    border-color: var(--lw-line) !important;
}

table {
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

th {
    background: color-mix(in srgb, var(--lw-accent) 12%, var(--lw-surface-strong)) !important;
    color: var(--lw-ink) !important;
}

td {
    color: var(--lw-muted) !important;
}

th,
td {
    border-color: var(--lw-line) !important;
}

.preview-tab,
.tab,
.operation-tab,
.mode-tab {
    border-radius: var(--lw-radius) !important;
    border: 1px solid var(--lw-line) !important;
    background: var(--lw-surface-soft) !important;
    color: var(--lw-muted) !important;
}

.preview-tab.active,
.tab.active,
.operation-tab.active,
.mode-tab.active {
    border-color: color-mix(in srgb, var(--lw-accent) 48%, var(--lw-line)) !important;
    background: color-mix(in srgb, var(--lw-accent) 14%, transparent) !important;
    color: var(--lw-ink) !important;
}

.modal-content,
.editor-container {
    backdrop-filter: blur(18px);
}

.editor-modal,
.modal {
    background: rgba(8, 10, 13, 0.62) !important;
    backdrop-filter: blur(8px);
}

.spinner {
    border-top-color: var(--lw-accent) !important;
}

.progress-bar,
.progress-fill {
    background: linear-gradient(90deg, var(--lw-accent), #f2c14e) !important;
}

code,
pre,
.result-output,
.logs-area,
.text-preview,
.editor-textarea {
    font-family: "Cascadia Mono", "Consolas", "Microsoft YaHei", monospace !important;
}

@media (max-width: 860px) {
    .container,
    .page,
    main:not(.login-shell) {
        width: min(100% - 28px, 1220px);
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    nav,
    .nav {
        min-height: 62px;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .page-header,
    .header {
        margin-top: 20px !important;
        padding: 22px !important;
    }

    .page-header h1,
    .header h1 {
        font-size: 2.1rem !important;
    }

    .card,
    .tool-card,
    .chart-card,
    .hero-panel,
    .ops-panel,
    .login-panel,
    .brand-panel,
    .preview-card,
    .settings-card,
    .server-card,
    .result-card,
    .operation-card,
    .form-card,
    .alert-card,
    .upload-section,
    .upload-zone,
    .upload-area {
        padding: min(22px, 5vw) !important;
    }
}