/* Echotrace pale blue-white skin. Loaded last so it can soften older page styles. */
:root {
    --bg: #eef3f9;
    --card: #f8fbff;
    --border: rgba(116, 137, 160, .16);
    --border-light: rgba(116, 137, 160, .10);
    --text: #40536b;
    --text-sec: #64748b;
    --text-muted: #8797aa;
    --accent: #5d83b3;
    --accent-hover: #3f668f;
    --accent-bg: #e7eff8;
    --accent-border: rgba(93, 131, 179, .28);
    --green: #547d70;
    --green-bg: #e6f1ee;
    --red: #a3525d;
    --red-bg: #f6e8eb;
    --red-border: rgba(163, 82, 93, .22);
    --radius: 14px;
    --radius-sm: 10px;
    --neo-bg: #eef3f9;
    --neo-panel: #eef3f9;
    --neo-surface: #f8fbff;
    --neo-surface-soft: #edf3fa;
    --neo-text: #40536b;
    --neo-muted: #8797aa;
    --neo-blue: #5d83b3;
    --neo-blue-deep: #3f668f;
    --neo-shadow: rgba(68, 88, 112, .16);
    --neo-shadow-soft: rgba(68, 88, 112, .10);
    --neo-inset: rgba(68, 88, 112, .13);
}

html,
body {
    background: var(--neo-bg) !important;
    color: var(--neo-text) !important;
}

.nav,
.app-sidebar,
.topbar,
.sidebar,
.input-area,
.param-bar,
.details-drawer,
.panel,
.card,
.modal,
.dialog,
.drawer,
.batch-bar,
.provider-row,
.model-row,
.task-card,
.event-item,
.log-row,
.usage-card,
.heatmap-card {
    background: var(--neo-surface) !important;
    border-color: transparent !important;
    color: var(--neo-text) !important;
    box-shadow: 0 12px 28px var(--neo-shadow-soft) !important;
}

.with-app-sidebar,
.main,
.page,
main,
.container-xl,
.diagnostic-head {
    background: var(--neo-bg) !important;
}

.app-sidebar,
.sidebar {
    background: var(--neo-panel) !important;
    box-shadow: 10px 0 26px rgba(68, 88, 112, .10) !important;
}

body.with-app-sidebar .app-sidebar,
body.with-app-sidebar > .nav {
    background: var(--neo-panel) !important;
    border-color: rgba(116, 137, 160, .14) !important;
}

body.with-app-sidebar .app-sidebar {
    box-shadow: 10px 0 26px rgba(68, 88, 112, .10) !important;
}

body.with-app-sidebar .app-sidebar-head {
    border-color: rgba(116, 137, 160, .14) !important;
}

body.with-app-sidebar .app-sidebar-brand,
body.with-app-sidebar .app-sidebar-links a,
body.with-app-sidebar > .nav .nav-links a {
    color: var(--neo-text) !important;
}

body.with-app-sidebar .app-sidebar-toggle {
    border: 0 !important;
    background: var(--neo-surface) !important;
    color: var(--neo-text) !important;
    box-shadow: 0 8px 18px rgba(68, 88, 112, .16) !important;
}

body.with-app-sidebar .app-sidebar-links a:hover,
body.with-app-sidebar .app-sidebar-links a.active,
body.with-app-sidebar > .nav .nav-links a.active,
body.with-app-sidebar > .nav .nav-links a:hover {
    background: var(--neo-surface) !important;
    color: var(--neo-blue-deep) !important;
    box-shadow: inset 0 3px 9px rgba(68, 88, 112, .13) !important;
}

.nav {
    background: var(--neo-panel) !important;
    box-shadow: 0 8px 20px rgba(68, 88, 112, .08) !important;
}

.nav-brand,
.app-sidebar-brand,
.card-title,
h1,
h2,
h3,
.title,
.page-title,
.modal h2,
.details-title,
.topbar-win,
.topbar-info,
.window-row-title,
.memory-card-title {
    color: var(--neo-text) !important;
}

.nav-links a,
.app-sidebar-links a,
.sidebar-footer a,
.subtitle,
.card-subtitle,
.form-hint,
.hint,
.text-secondary,
.meta,
.muted,
.window-row-meta,
.modal-sub,
.status-line,
small {
    color: var(--neo-muted) !important;
}

.nav-links a:hover,
.nav-links a.active,
.app-sidebar-links a:hover,
.app-sidebar-links a.active,
.sidebar-footer a:hover {
    background: var(--neo-surface) !important;
    color: var(--neo-blue-deep) !important;
    box-shadow: inset 0 3px 9px rgba(68, 88, 112, .13) !important;
}

button,
.btn,
.btn-sm,
.icon-btn,
.icon-button,
.app-sidebar-toggle,
.sidebar-toggle,
.param-toggle,
.details-close,
.msg-act,
.variant-btn,
.tag-chip,
.pill,
.tab,
.segmented button,
.memory-card-switch,
.btn-cancel,
.btn-outline,
.window-card button,
.action-button {
    border: 0 !important;
    background: var(--neo-surface) !important;
    color: var(--neo-text) !important;
    box-shadow: 0 8px 18px rgba(68, 88, 112, .16) !important;
}

button:hover:not(:disabled),
.btn:hover,
.icon-btn:hover,
.icon-button:hover,
.tag-chip:hover,
.pill:hover,
.segmented button:hover,
.window-card button:hover {
    background: #fbfdff !important;
    color: var(--neo-blue-deep) !important;
    border-color: transparent !important;
}

button:active:not(:disabled),
.tag-chip.active,
.pill.active,
.tab.active,
.segmented button.active,
.memory-card-switch.on {
    box-shadow: inset 0 3px 9px rgba(68, 88, 112, .16) !important;
}

.primary,
.btn-primary,
button.primary,
.btn-confirm,
.send-btn,
.btn-new-chat {
    border: 0 !important;
    background: linear-gradient(145deg, #6f96c3, #4f78a7) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(68, 88, 112, .20) !important;
}

.danger,
.btn-danger {
    color: #a3525d !important;
}

input,
textarea,
select,
.input,
.search-input,
.memory-search-mini,
.tag-editor,
pre,
code,
table,
.token-bar,
.token-pop,
.side-card pre {
    border-color: transparent !important;
    background: var(--neo-surface-soft) !important;
    color: var(--neo-text) !important;
    box-shadow: inset 0 3px 10px var(--neo-inset) !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: transparent !important;
    box-shadow: inset 0 3px 10px var(--neo-inset), 0 0 0 3px rgba(93, 131, 179, .14) !important;
}

table,
th,
td {
    border-color: rgba(116, 137, 160, .14) !important;
}

th {
    background: #e7eff8 !important;
    color: var(--neo-text) !important;
}

.badge,
.status,
.chip,
.card-tag,
.selected-tag,
.memory-tag {
    border: 0 !important;
    background: #edf3fa !important;
    color: #64748b !important;
    box-shadow: inset 0 2px 7px rgba(68, 88, 112, .10) !important;
}

.toast,
.confirm-box,
.detail-card,
.meta-box,
.empty,
.window-card,
.memory-card {
    border-color: transparent !important;
    background: var(--neo-surface) !important;
    box-shadow: 0 12px 28px rgba(68, 88, 112, .14) !important;
}

.overlay,
.confirm-mask,
dialog::backdrop {
    background: rgba(43, 59, 78, .28) !important;
    backdrop-filter: blur(2px);
}

@media (max-width: 640px) {
    .nav,
    .topbar,
    .input-area {
        box-shadow: 0 8px 18px rgba(68, 88, 112, .08) !important;
    }
}