/* ============================================================================
   Butla — interactive theme (single source of truth)
   Light  = white ground, near-black ink.  Dark = warm charcoal ground.
   Palette matches the marketing site's design system (static/css/bt-system.css).
   Every body[theme="dark"] / body[theme="light"] rule lives in this file.
   Components carry structural CSS only. Do not add theme rules elsewhere.
   ============================================================================ */

@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600&display=swap');

:root,
body[theme="light"] {
    --bg: #fafafa;
    --surface: #ffffff;
    --surface-2: #f5f5f5;
    --band: #f5f5f5;
    --border: #e5e5e5;
    --border-strong: #d4d4d4;
    --text: #171717;
    --text-sub: #404040;
    --text-muted: #737373;
    --ink: #0a0a0a;
    --line: #737373;
    --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --serif: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
    --sans: 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --primary: #7f00ff;
    --primary-hover: #6600cc;
    --on-primary: #ffffff;
    --primary-weak: rgba(127, 0, 255, 0.10);
    --primary-weaker: rgba(127, 0, 255, 0.05);
    --primary-ring: rgba(127, 0, 255, 0.20);
    --ok: #17845a;
    --warn: #a06a1e;
    --err: #b3402f;
    --shadow: rgba(10, 10, 10, 0.10);
    --scrim: rgba(10, 10, 10, 0.38);
}

body[theme="dark"] {
    --bg: #262320;
    --surface: #302c27;
    --surface-2: #38332c;
    --band: #2d2a25;
    --border: rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.16);
    --text: rgba(246, 241, 233, 0.92);
    --text-sub: rgba(246, 241, 233, 0.60);
    --text-muted: rgba(246, 241, 233, 0.42);
    --primary: #b98cff;
    --primary-hover: #cbaaff;
    --on-primary: #1c1710;
    --primary-weak: rgba(185, 140, 255, 0.16);
    --primary-weaker: rgba(185, 140, 255, 0.08);
    --primary-ring: rgba(185, 140, 255, 0.30);
    --ok: #57c79a;
    --warn: #e0b45f;
    --err: #e88a76;
    --shadow: rgba(0, 0, 0, 0.35);
    --scrim: rgba(0, 0, 0, 0.55);
    --ink: rgba(246, 241, 233, 0.92);
    --line: rgba(246, 241, 233, 0.38);
}
/* 10.5px mono at 0.42 alpha sits under AA on this ground */
body[theme="dark"] .bt-meta { color: rgba(246, 241, 233, 0.60); }

/* Element UI renders the modal backdrop as a body-level .v-modal at a
   hardcoded #000 / opacity .5, which reads cold and grey over warm paper.
   Specificity (0,2,1) beats Element's (0,1,0) regardless of load order. */
body[theme="light"] .v-modal,
body[theme="dark"] .v-modal {
    background: var(--scrim);
    opacity: 1;
}

/* ═══════════════════════════════ DARK THEME ═══════════════════════════════ */

/* ── assets/css/user.css ── */
@media (max-width: 767px) {
    body[theme="dark"] .canvas-mobile-trigger:hover {
        background: rgba(246, 241, 233, 0.08);
    }

    body[theme="dark"] .canvas-mobile-sheet::before {
        background-color: #262320;
        background-image: linear-gradient(rgba(246, 241, 233, 0.35), rgba(246, 241, 233, 0.35));
    }

    /* Theme paint for the sheet — kept inside the query so desktop
       rendering of the underlying col is unaffected. */
    body[theme="dark"] .canvas-mobile-sheet {
        background: #262320;
        color: rgba(246, 241, 233, 0.92);
    }
}

body[theme="dark"] {
    background-color: #262320 !important;
    color: rgba(246, 241, 233, .88) !important;
}

body[theme="dark"] header {
    background-color: #262320 !important;
    border-bottom: 1px solid rgba(246, 241, 233, 0.07) !important;
}

body[theme="dark"] .web-content-body,
body[theme="dark"] .user-dp,
body[theme="dark"] .el-avatar,
body[theme="dark"] .message-input-container,
body[theme="dark"] .el-step__icon {
    background-color: rgba(246, 241, 233, 0.03) !important;
    color: rgba(246, 241, 233, .88) !important;
}

body[theme="dark"] .bg-gray {
    background-color: #262320 !important;
}

body[theme="dark"] .el-step__icon.is-text {
    color: rgba(246, 241, 233, .6) !important;
}

body[theme="dark"] .el-step__title.is-wait {
    color: rgba(246, 241, 233, .45) !important;
}

body[theme="dark"] .el-step__title.is-process {
    color: #f4efe6 !important;
}

body[theme="dark"] .text-sub-heading {
    color: rgba(246, 241, 233, .9) !important;
}

body[theme="dark"] .el-form--label-top .el-form-item__label {
    color: rgba(246, 241, 233, .6) !important;
}

body[theme="dark"] .divider {
    border-bottom: 1px solid rgba(246, 241, 233, 0.07) !important;
}

body[theme="dark"] .el-collapse-item__header {
    border-bottom: 1px solid rgba(246, 241, 233, 0.07) !important;
}

body[theme="dark"] .border-1 {
    border: 1px solid rgba(246, 241, 233, 0.07) !important;
}

body[theme="dark"] .active-content {
    background-color: rgba(246, 241, 233, 0.05) !important;
}

body[theme="dark"] .hexagon-outer {
    background-color: rgba(246, 241, 233, 0.03);
}

body[theme="dark"] .list-view-loader-item {
    background-color: rgba(246, 241, 233, 0.03) !important;
    background: rgba(246, 241, 233, 0.03) !important;
}

body[theme="dark"] .interaction-shortcut {
    background-color: #262320 !important;
}

body[theme="dark"] .interaction-shortcut .shortcut {
    background-color: rgba(246, 241, 233, 0.05) !important;
}

body[theme="dark"] .el-radio.is-bordered,
body[theme="dark"] .el-checkbox.is-bordered {
    border: 1px solid rgba(246, 241, 233, 0.07) !important;
}

body[theme="dark"] #or::before,
body[theme="dark"] #or::after {
    background-color: rgba(246, 241, 233, 0.07) !important;
}

body[theme="dark"] .el-popover {
    background-color: #262320 !important;
    border-color: rgba(246, 241, 233, 0.07) !important;
    color: rgba(246, 241, 233, .88) !important;
}

body[theme="dark"] .el-popover .popper__arrow::after {
    border-bottom-color: #262320 !important;
}

body[theme="dark"] .el-popover .popper__arrow {
    border-bottom-color: rgba(246, 241, 233, 0.07) !important;
}

body[theme="dark"] .chat-empty-title {
    color: rgba(246, 241, 233, 0.95);
}

body[theme="dark"] .chat-empty-subtitle {
    color: rgba(246, 241, 233, 0.5);
}

body[theme="dark"] .chat-empty-card {
    background: rgba(246, 241, 233, 0.03);
}

body[theme="dark"] .chat-empty-card::after {
    border-color: rgba(246, 241, 233, 0.22);
}

body[theme="dark"] .chat-empty-card:hover {
    background: rgba(246, 241, 233, 0.06);
}

body[theme="dark"] .chat-empty-card:hover::after {
    border-color: rgba(246, 241, 233, 0.45);
}

body[theme="dark"] .chat-empty-card-icon {
    background: rgba(246, 241, 233, 0.04);
    box-shadow: inset 0 0 0 1px rgba(246, 241, 233, 0.22);
}

body[theme="dark"] .chat-empty-card-title {
    color: rgba(246, 241, 233, 0.95);
}

body[theme="dark"] .chat-empty-card-desc {
    color: rgba(246, 241, 233, 0.5);
}

body[theme="dark"] .pc-bubble,
.pc-bubble {
    background: #302c27;
    border: 1px solid #3a352d;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    color: #f2ede4;
}

body[theme="dark"] .pc-bubble-entity,
.pc-bubble-entity {
    border-bottom: 1px solid #3a352d;
}

body[theme="dark"] .pc-bubble-entity-meta,
.pc-bubble-entity-meta {
    color: rgba(241, 241, 241, 0.45);
}

body[theme="dark"] .pc-bubble-actions button,
.pc-bubble-actions button {
    background: rgba(246, 241, 233, 0.06);
    color: rgba(241, 241, 241, 0.7);
}

body[theme="dark"] .pc-bubble-actions button:hover,
.pc-bubble-actions button:hover {
    background: rgba(185, 140, 255, 0.2);
    color: #b98cff;
}

body[theme="dark"] .pc-bubble-loading,
.pc-bubble-loading {
    color: rgba(241, 241, 241, 0.5);
}

body[theme="dark"] .acp-drawer .el-drawer {
    background: #302c27 !important;
    color: #f2ede4 !important;
}

body[theme="dark"] .jc-bubble {
    background: #302c27 !important;
    border: 1px solid #3a352d !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
    color: #f2ede4 !important;
}

body[theme="dark"] .jc-bubble-entity {
    border-bottom: 1px solid #3a352d !important;
}

body[theme="dark"] .jc-bubble-entity-meta {
    color: rgba(241, 241, 241, 0.45) !important;
}

body[theme="dark"] .jc-bubble-actions button {
    background: rgba(246, 241, 233, 0.06) !important;
    color: rgba(241, 241, 241, 0.7) !important;
}

body[theme="dark"] .jc-bubble-actions button:hover {
    background: rgba(185, 140, 255, 0.2) !important;
    color: #b98cff !important;
}

body[theme="dark"] .jc-bubble-loading {
    color: rgba(241, 241, 241, 0.5) !important;
}

body[theme="dark"] .action-detail-drawer {
    background: #262320 !important;
    color: rgba(246, 241, 233, .88) !important;
}

body[theme="dark"] .action-detail-drawer .el-drawer__body {
    background: #262320 !important;
}

body[theme="dark"] .action-detail-icon {
    background: rgba(246, 241, 233, 0.05);
}

body[theme="dark"] .action-detail-title {
    color: rgba(246, 241, 233, .88);
}

body[theme="dark"] .action-detail-desc {
    color: rgba(246, 241, 233, .45);
}

body[theme="dark"] .action-detail-section-label {
    color: rgba(246, 241, 233, .35);
}

body[theme="dark"] .action-detail-tag {
    background: rgba(246, 241, 233, 0.05) !important;
    border-color: rgba(246, 241, 233, 0.07) !important;
    color: rgba(246, 241, 233, .88) !important;
}

body[theme="dark"] .action-detail-tag:hover {
    border-color: rgba(246, 241, 233, 0.2) !important;
    background: rgba(246, 241, 233, 0.08) !important;
    color: #f4efe6 !important;
}

body[theme="dark"] .action-detail-go {
    border: 1px solid rgba(246, 241, 233, 0.07);
    background: rgba(246, 241, 233, 0.05);
    color: rgba(246, 241, 233, .88);
}

body[theme="dark"] .action-detail-go:hover {
    border-color: rgba(246, 241, 233, 0.2);
    background: rgba(246, 241, 233, 0.08);
}

body[theme="dark"] {
    --shell-bg: #302c27;
    --shell-surface: #3a352d;
    --shell-border: rgba(246, 241, 233, 0.1);
    --shell-hover: rgba(246, 241, 233, 0.05);
    --shell-hover-accent: rgba(185, 140, 255, 0.18);
    --shell-text: #f2ede4;
    --shell-text-sub: rgba(241, 241, 241, 0.55);
}

body[theme="dark"] .app-canvas-drawer .el-drawer {
    background: #302c27 !important;
    color: #f2ede4 !important;
}

body[theme="dark"] .el-drawer.pc-task-drawer {
    background: #262320 !important;
    color: rgba(246, 241, 233, .88) !important;
}

body[theme="dark"] .app-canvas-v3-drawer .el-drawer {
    background: #262320 !important;
    color: rgba(246, 241, 233, .88) !important;
}

body[theme="dark"] .chat-search-fixed-inner {
    background: rgba(27, 27, 27, 0.92);
    border: 1px solid rgba(246, 241, 233, 0.07);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    color: rgba(246, 241, 233, .88);
}

body[theme="dark"] .fcm-dialog {
    background: #262320 !important;
}

body[theme="dark"] .fcm-dialog .el-dialog__body {
    background: #262320 !important;
}

body[theme="dark"] .fcm-content {
    color: rgba(246, 241, 233, .88);
}

body[theme="dark"] .fcm-icon-wrap {
    background: rgba(185, 140, 255, 0.1);
    color: #b98cff;
}

body[theme="dark"] .fcm-desc {
    color: rgba(246, 241, 233, .45);
}

body[theme="dark"] .fcm-btn-skip {
    color: rgba(246, 241, 233, .45);
}

body[theme="dark"] .fcm-btn-skip:hover {
    color: rgba(246, 241, 233, .7);
}

body[theme="dark"] .p-chat-hint {
    background: rgba(246, 241, 233, 0.05);
    border: 1px solid rgba(246, 241, 233, 0.07);
    color: rgba(246, 241, 233, .88);
}

body[theme="dark"] .p-chat-hint-btn {
    background: rgba(185, 140, 255, 0.12);
    color: #b98cff;
}

body[theme="dark"] .p-chat-hint-btn:hover {
    background: rgba(185, 140, 255, 0.2);
}

body[theme="dark"] .lm-moment--month {
    background: linear-gradient(155deg, rgba(185, 140, 255, 0.10) 0%, rgba(185, 140, 255, 0.04) 60%, rgba(185, 140, 255, 0.02) 100%);
    border: 1px solid rgba(185, 140, 255, 0.14);
}

body[theme="dark"] .lm-moment--month .lm-moment-eyebrow {
    color: #cbaaff;
}

body[theme="dark"] .lm-moment--year {
    background: linear-gradient(155deg, rgba(110, 231, 183, 0.10) 0%, rgba(110, 231, 183, 0.04) 60%, rgba(110, 231, 183, 0.02) 100%);
    border: 1px solid rgba(110, 231, 183, 0.14);
}

body[theme="dark"] .lm-moment--year .lm-moment-eyebrow {
    color: #6ee7b7;
}

body[theme="dark"] .lm-moment-pill {
    background: rgba(246, 241, 233, 0.05);
    border-color: rgba(246, 241, 233, 0.06);
    color: rgba(246, 241, 233, 0.8);
}

body[theme="dark"] .lm-moment-pill:hover:not([disabled]) {
    background: rgba(246, 241, 233, 0.08);
}

body[theme="dark"] .lm-cover {
    background: linear-gradient(155deg, rgba(185, 140, 255, 0.10) 0%, rgba(185, 140, 255, 0.04) 60%, rgba(185, 140, 255, 0.02) 100%);
    border: 1px solid rgba(185, 140, 255, 0.14);
}

body[theme="dark"] .lm-cover-eyebrow.el-tag {
    color: #cbaaff !important;
    background-color: rgba(185, 140, 255, 0.10) !important;
    border-color: rgba(185, 140, 255, 0.22) !important;
}

body[theme="dark"] .lm-cover-pill {
    background: rgba(246, 241, 233, 0.05);
    border-color: rgba(246, 241, 233, 0.06);
    color: rgba(246, 241, 233, 0.8);
}

body[theme="dark"] .lm-cover-pill:hover {
    border-color: rgba(185, 140, 255, 0.3);
    background: rgba(185, 140, 255, 0.10);
    color: #cbaaff;
}

body[theme="dark"] .lm-cover-pill.is-on {
    background: rgba(185, 140, 255, 0.18);
    border-color: rgba(185, 140, 255, 0.35);
    color: #cbaaff;
}

body[theme="dark"] .lm-cover-public-url {
    background: rgba(246, 241, 233, 0.04);
    border: 1px solid rgba(246, 241, 233, 0.06);
}

body[theme="dark"] .lm-cover-public-url-copy:hover {
    background: rgba(246, 241, 233, 0.06);
}

body[theme="dark"] .el-drawer.lm-visibility-drawer {
    background: #2d2a25 !important;
    color: rgba(246, 241, 233, .88) !important;
}

body[theme="dark"] .el-drawer.lm-visibility-drawer .el-drawer__body {
    background: #2d2a25 !important;
}

body[theme="dark"] .lm-visibility-btn {
    background: rgba(246, 241, 233, 0.05);
    border-color: rgba(246, 241, 233, 0.06);
    color: rgba(246, 241, 233, 0.8);
}

body[theme="dark"] .lm-visibility-btn:hover:not([disabled]) {
    background: rgba(246, 241, 233, 0.08);
}

body[theme="dark"] .lm-visibility-btn--primary {
    background: rgba(185, 140, 255, 0.15) !important;
    border-color: rgba(185, 140, 255, 0.30) !important;
    color: #cbaaff !important;
}

body[theme="dark"] .lm-visibility-btn--primary:hover:not([disabled]) {
    background: rgba(185, 140, 255, 0.25) !important;
}

body[theme="dark"] .lm-visibility-btn--ghost {
    background: transparent;
}

body[theme="dark"] .lm-visibility-chip {
    background: rgba(246, 241, 233, 0.04);
    border-color: rgba(246, 241, 233, 0.08);
    color: rgba(246, 241, 233, 0.65);
}

body[theme="dark"] .lm-visibility-chip:hover {
    background: rgba(246, 241, 233, 0.07);
}

body[theme="dark"] .lm-visibility-chip.is-on {
    background: rgba(185, 140, 255, 0.16);
    border-color: rgba(185, 140, 255, 0.32);
    color: #cbaaff;
}

body[theme="dark"] .lm-visibility-chip.is-on:hover {
    background: rgba(185, 140, 255, 0.22);
}

body[theme="dark"] .lm-username-row {
    background: rgba(246, 241, 233, 0.04);
    border: 1px solid rgba(246, 241, 233, 0.10);
}

body[theme="dark"] .lm-username-row:focus-within {
    border-color: rgba(185, 140, 255, 0.40);
}

body[theme="dark"] .lm-username-error {
    color: #f87171;
}

body[theme="dark"] .lm-compass {
    background: rgba(246, 241, 233, 0.03);
    border: 1px solid rgba(246, 241, 233, 0.06);
}

body[theme="dark"] .lm-listening {
    background: rgba(246, 241, 233, 0.03);
    border: 1px solid rgba(246, 241, 233, 0.06);
}

body[theme="dark"] .lm-compass-axis--social .lm-compass-dot {
    background: #5eead4;
    box-shadow: 0 0 0 2px rgba(94, 234, 212, 0.40);
}

body[theme="dark"] .lm-compass-axis--motion .lm-compass-dot {
    background: #6ee7b7;
    box-shadow: 0 0 0 2px rgba(110, 231, 183, 0.40);
}

body[theme="dark"] .lm-compass-axis--spontaneous .lm-compass-dot {
    background: #f9a8d4;
    box-shadow: 0 0 0 2px rgba(244, 114, 182, 0.40);
}

body[theme="dark"] .lm-compass-axis--generous .lm-compass-dot {
    background: rgba(246, 241, 233, 0.75);
    box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.45);
}

body[theme="dark"] .lm-dyk {
    background: rgba(246, 241, 233, 0.03);
    border: 1px solid rgba(246, 241, 233, 0.06);
}

body[theme="dark"] .lm-noticed {
    background: rgba(185, 140, 255, 0.06);
    border: 1px solid rgba(185, 140, 255, 0.12);
}

body[theme="dark"] .lm-chapter--food {
    background: rgba(251, 191, 36, 0.06);
}

body[theme="dark"] .lm-chapter--health {
    background: rgba(110, 231, 183, 0.06);
}

body[theme="dark"] .lm-chapter--home {
    background: rgba(251, 146, 60, 0.06);
}

body[theme="dark"] .lm-chapter--finance {
    background: rgba(148, 163, 184, 0.06);
}

body[theme="dark"] .lm-chapter--work {
    background: rgba(129, 140, 248, 0.06);
}

body[theme="dark"] .lm-chapter--learning {
    background: rgba(185, 140, 255, 0.06);
}

body[theme="dark"] .lm-chapter--people {
    background: rgba(251, 113, 133, 0.06);
}

body[theme="dark"] .lm-chapter--recreation {
    background: rgba(94, 234, 212, 0.06);
}

body[theme="dark"] .lm-chapter--travel {
    background: rgba(244, 114, 182, 0.06);
}

body[theme="dark"] .lm-chapter--spiritual {
    background: rgba(125, 211, 252, 0.06);
}

body[theme="dark"] .lm-chapter--shopping {
    background: rgba(232, 121, 249, 0.06);
}

body[theme="dark"] .lm-chapter--general {
    background: rgba(156, 163, 175, 0.06);
}

body[theme="dark"] .lm-listening-chip:hover {
    border-color: rgba(185, 140, 255, 0.5);
    color: #cbaaff;
}

body[theme="dark"] .lm-recommend {
    background: rgba(246, 241, 233, 0.03);
    border: 1px solid rgba(246, 241, 233, 0.06);
}

body[theme="dark"] .lm-recommend-btn {
    background: rgba(185, 140, 255, 0.10);
    border-color: rgba(185, 140, 255, 0.22);
    color: #cbaaff;
}

body[theme="dark"] .lm-recommend-btn:hover {
    background: rgba(185, 140, 255, 0.18);
    border-color: rgba(185, 140, 255, 0.35);
}

body[theme="dark"] .el-drawer.lm-invite-drawer {
    background: #2d2a25 !important;
    color: rgba(246, 241, 233, .88) !important;
}

body[theme="dark"] .el-drawer.lm-invite-drawer .el-drawer__body {
    background: #2d2a25 !important;
}

body[theme="dark"] .lm-invite-input {
    background: rgba(246, 241, 233, 0.04);
    border: 1px solid rgba(246, 241, 233, 0.10);
    color: rgba(246, 241, 233, 0.92);
}

body[theme="dark"] .lm-invite-input:focus {
    outline: none;
    border-color: rgba(185, 140, 255, 0.40);
}

body[theme="dark"] .lm-invite-card {
    background: rgba(185, 140, 255, 0.06);
    border: 1px solid rgba(185, 140, 255, 0.14);
}

body[theme="dark"] .lm-invite-btn {
    background: rgba(246, 241, 233, 0.05);
    border-color: rgba(246, 241, 233, 0.06);
    color: rgba(246, 241, 233, 0.8);
}

body[theme="dark"] .lm-invite-btn:hover:not([disabled]) {
    background: rgba(246, 241, 233, 0.08);
}

body[theme="dark"] .lm-invite-btn--primary {
    background: rgba(185, 140, 255, 0.15) !important;
    border-color: rgba(185, 140, 255, 0.30) !important;
    color: #cbaaff !important;
}

body[theme="dark"] .lm-invite-btn--primary:hover:not([disabled]) {
    background: rgba(185, 140, 255, 0.25) !important;
}

body[theme="dark"] .lm-invite-btn--ghost {
    background: transparent;
}

body[theme="dark"] .lm-alert--warning {
    background: rgba(248, 113, 113, 0.06);
    border: 1px solid rgba(248, 113, 113, 0.15);
}

body[theme="dark"] .lm-alert--warning>i {
    color: #f87171;
}

body[theme="dark"] .lm-alert--info {
    background: rgba(96, 165, 250, 0.06);
    border: 1px solid rgba(96, 165, 250, 0.15);
}

body[theme="dark"] .lm-alert--info>i {
    color: #60a5fa;
}

body[theme="dark"] .lm-alert-cta {
    background: rgba(185, 140, 255, 0.12);
    color: #b98cff;
}

body[theme="dark"] .lm-alert-cta:hover {
    background: rgba(185, 140, 255, 0.20);
}

body[theme="dark"] .nav-bottom-bar {
    background: #262320 !important;
    border-top: 1px solid rgba(246, 241, 233, 0.07);
}

body[theme="dark"] .el-drawer.lm-detail-drawer {
    background: #2d2a25 !important;
    color: rgba(246, 241, 233, .88) !important;
}

body[theme="dark"] .el-drawer.lm-detail-drawer .el-drawer__body {
    background: #2d2a25 !important;
}

body[theme="dark"] .lm-detail {
    color: rgba(246, 241, 233, .88);
}

body[theme="dark"] .lm-detail-domain {
    color: rgba(246, 241, 233, .4);
}

body[theme="dark"] .lm-detail-meta {
    border-top: 1px solid rgba(246, 241, 233, .07);
}

body[theme="dark"] .lm-detail-meta-label {
    color: rgba(246, 241, 233, .35);
}

body[theme="dark"] .lm-detail-btn {
    background: rgba(246, 241, 233, .06);
    color: rgba(246, 241, 233, .7);
    border: 1px solid rgba(246, 241, 233, .08);
}

body[theme="dark"] .lm-detail-btn:hover {
    background: rgba(246, 241, 233, .1);
}

body[theme="dark"] .lm-detail-btn-primary {
    background: rgba(185, 140, 255, .15) !important;
    color: #b98cff !important;
    border-color: rgba(185, 140, 255, .2) !important;
}

body[theme="dark"] .chat-notif-alert {
    background: rgba(251, 191, 36, .08);
    border: 1px solid rgba(251, 191, 36, .15);
}

body[theme="dark"] .chat-notif-alert-icon {
    color: #fbbf24;
}

body[theme="dark"] .chat-notif-alert-title {
    color: rgba(246, 241, 233, .88);
}

body[theme="dark"] .chat-notif-alert-btn {
    background: rgba(251, 191, 36, .15);
    color: #fbbf24;
}

body[theme="dark"] .chat-notif-alert-btn:hover {
    background: rgba(251, 191, 36, .25);
}

body[theme="dark"] .chat-pwa-alert {
    background: rgba(96, 165, 250, .08);
    border: 1px solid rgba(96, 165, 250, .15);
}

body[theme="dark"] .chat-pwa-alert-icon {
    color: #60a5fa;
}

body[theme="dark"] .chat-pwa-alert-title {
    color: rgba(246, 241, 233, .88);
}

body[theme="dark"] .chat-pwa-alert-btn {
    background: rgba(96, 165, 250, .15);
    color: #60a5fa;
}

body[theme="dark"] .chat-pwa-alert-btn:hover {
    background: rgba(96, 165, 250, .25);
}

body[theme="dark"] .el-drawer.a2hs-drawer {
    background: #2d2a25 !important;
    color: rgba(246, 241, 233, .88) !important;
}

body[theme="dark"] .el-drawer.a2hs-drawer .el-drawer__body {
    background: #2d2a25 !important;
}

body[theme="dark"] .a2hs-step-num {
    background: rgba(246, 241, 233, .08);
    color: rgba(246, 241, 233, .6);
}

body[theme="dark"] .a2hs-native-note {
    background: rgba(185, 140, 255, .1);
    color: #b98cff;
}

body[theme="dark"] .a2hs-done-btn {
    background: rgba(246, 241, 233, .08);
    color: rgba(246, 241, 233, .7);
}

body[theme="dark"] .a2hs-done-btn:hover {
    background: rgba(246, 241, 233, .12);
}

body[theme="dark"] .msg-upgrade-title {
    color: rgba(246, 241, 233, 0.95);
}

body[theme="dark"] .msg-upgrade-sub {
    color: rgba(246, 241, 233, 0.5);
}

body[theme="dark"] .msg-upgrade-arrow {
    color: rgba(246, 241, 233, 0.5);
}

body[theme="dark"] .msg-file-card {
    background: rgba(185, 140, 255, .08);
    border: 1px solid rgba(185, 140, 255, .15);
}

body[theme="dark"] .msg-file-card-icon {
    color: #b98cff;
}

body[theme="dark"] .msg-file-card-btn {
    background: rgba(246, 241, 233, .06);
    color: rgba(246, 241, 233, .5);
}

body[theme="dark"] .msg-file-card-btn:hover {
    background: rgba(185, 140, 255, .15);
    color: #b98cff;
}

body[theme="dark"] .msg-file-card-download {
    background: rgba(185, 140, 255, .12);
    color: #b98cff;
}

body[theme="dark"] .msg-file-card-download:hover {
    background: rgba(185, 140, 255, .25);
}

body[theme="dark"] .app-file-viewer {
    background: #262320;
    color: rgba(246, 241, 233, .88);
    border-left-color: rgba(246, 241, 233, .06);
}

body[theme="dark"] .app-file-viewer-topbar {
    border-bottom-color: rgba(246, 241, 233, .06);
}

body[theme="dark"] .app-file-viewer-btn:hover {
    background: rgba(246, 241, 233, .08);
}

body[theme="dark"] .app-file-viewer-fallback-btn {
    background: rgba(185, 140, 255, .15);
    color: #b98cff;
}

body[theme="dark"] .el-drawer.app-file-viewer-mobile,
body[theme="dark"] .el-drawer.app-split-panel-mobile {
    background: #262320 !important;
    color: rgba(246, 241, 233, .88) !important;
}

body[theme="dark"] .el-drawer.app-file-viewer-mobile .el-drawer__body,
body[theme="dark"] .el-drawer.app-split-panel-mobile .el-drawer__body {
    background: #262320 !important;
    padding: 0 !important;
}

body[theme="dark"] .sk-card {
    background: rgba(246, 241, 233, .03);
    border: 1px solid rgba(246, 241, 233, .06);
}

body[theme="dark"] .sk-card:hover {
    background: rgba(185, 140, 255, .05);
    border-color: rgba(185, 140, 255, .15);
}

body[theme="dark"] .sk-card-icon {
    color: #b98cff;
}

body[theme="dark"] .el-drawer.sk-detail-drawer {
    background: #2d2a25 !important;
    color: rgba(246, 241, 233, .88) !important;
}

body[theme="dark"] .el-drawer.sk-detail-drawer .el-drawer__body {
    background: #2d2a25 !important;
}

body[theme="dark"] .sk-detail-meta {
    border-top: 1px solid rgba(246, 241, 233, .07);
    padding-top: 12px;
}

body[theme="dark"] .sk-detail-btn-run {
    background: rgba(185, 140, 255, .15);
    color: #b98cff;
}

body[theme="dark"] .sk-detail-btn-run:hover {
    background: rgba(185, 140, 255, .25);
}

body[theme="dark"] .sk-detail-btn-edit {
    background: rgba(246, 241, 233, .06);
    color: rgba(246, 241, 233, .7);
}

body[theme="dark"] .sk-detail-btn-edit:hover {
    background: rgba(246, 241, 233, .1);
}

body[theme="dark"] .sk-detail-btn-delete {
    background: rgba(248, 113, 113, .08);
    color: #f87171;
}

body[theme="dark"] .sk-detail-btn-delete:hover {
    background: rgba(248, 113, 113, .15);
}

body[theme="dark"] .ai-bubble {
    background: #302c27;
    border: 1px solid rgba(246, 241, 233, .1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .4);
}

body[theme="dark"] .ai-bubble-loading {
    color: rgba(246, 241, 233, .5);
}

body[theme="dark"] .ai-bubble-loading i {
    color: #b98cff;
}

body[theme="dark"] .ai-bubble-btn {
    background: rgba(246, 241, 233, .06);
    color: rgba(246, 241, 233, .7);
}

body[theme="dark"] .ai-bubble-btn:hover {
    background: rgba(185, 140, 255, .2);
    color: #b98cff;
}

body[theme="dark"] .ai-bubble-commerce-row {
    background: linear-gradient(135deg, rgba(185, 140, 255, .1), rgba(185, 140, 255, .08));
    border-bottom: 1px solid rgba(185, 140, 255, .1);
    color: #b98cff;
}

body[theme="dark"] .ai-bubble-commerce-row:hover {
    background: linear-gradient(135deg, rgba(185, 140, 255, .18), rgba(185, 140, 255, .12));
}

body[theme="dark"] .ai-bubble-commerce {
    background: rgba(185, 140, 255, .08);
    border: 1px solid rgba(185, 140, 255, .15);
    color: #b98cff;
}

body[theme="dark"] .ai-bubble-commerce:hover {
    background: rgba(185, 140, 255, .15);
}

body[theme="dark"] .ai-bubble-reply-text {
    color: rgba(246, 241, 233, .8);
}

body[theme="dark"] .ai-bubble-reply-text strong {
    color: rgba(246, 241, 233, .95);
}

body[theme="dark"] .ai-bubble-reply-foot {
    border-top: 1px solid rgba(246, 241, 233, .06);
}

body[theme="dark"] .ai-bubble-entity {
    border-bottom: 1px solid rgba(246, 241, 233, .06);
}

body[theme="dark"] .ai-bubble-link-item:hover {
    background: rgba(246, 241, 233, .05);
}

body[theme="dark"] .mini-chat {
    background: #302c27;
    border: 1px solid #3a352d;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, .4);
}

body[theme="dark"] .mini-chat-header {
    border-bottom: 1px solid rgba(246, 241, 233, .06);
}

body[theme="dark"] .mini-chat-msg--user {
    background: rgba(185, 140, 255, .15);
    color: rgba(246, 241, 233, .9);
}

body[theme="dark"] .mini-chat-msg--ai {
    background: rgba(246, 241, 233, .05);
    color: rgba(246, 241, 233, .8);
}

body[theme="dark"] .mini-chat-msg-text code {
    background: rgba(246, 241, 233, .08);
}

body[theme="dark"] .mini-chat-input-row {
    border-top: 1px solid rgba(246, 241, 233, .06);
}

body[theme="dark"] .mini-chat-input {
    background: rgba(246, 241, 233, .05);
    color: rgba(246, 241, 233, .9);
}

body[theme="dark"] .mini-chat-send {
    color: #b98cff;
}

body[theme="dark"] .canvas-orders-count {
    background: rgba(246, 241, 233, .08);
}

body[theme="dark"] .canvas-order-item {
    border: 1px solid rgba(246, 241, 233, .05);
}

body[theme="dark"] .canvas-marketplace-count {
    background: rgba(246, 241, 233, .08);
}

body[theme="dark"] .canvas-marketplace-item {
    border: 1px solid rgba(246, 241, 233, .05);
}

body[theme="dark"] .canvas-marketplace-item:hover {
    background: rgba(185, 140, 255, .08);
    border-color: rgba(185, 140, 255, .2);
}

body[theme="dark"] .canvas-marketplace-item-icon {
    background: rgba(185, 140, 255, .12);
    color: #b98cff;
}

body[theme="dark"] .canvas-marketplace-item-cta {
    background: rgba(185, 140, 255, .1);
    color: #b98cff;
}

body[theme="dark"] .canvas-marketplace-item-cta:hover {
    background: rgba(185, 140, 255, .2);
}

body[theme="dark"] .canvas-marketplace-item-cta--book {
    background: rgba(52, 211, 153, .1);
    color: #34d399;
}

body[theme="dark"] .canvas-marketplace-item-cta--book:hover {
    background: rgba(52, 211, 153, .2);
}

body[theme="dark"] .pc-mini-chat-toggle {
    color: #b98cff;
}

body[theme="dark"] .pc-mini-chat-toggle:hover {
    background: rgba(185, 140, 255, .1);
}

body[theme="dark"] .ltv-wrap {
    border: 1px solid rgba(185, 140, 255, .2);
    background: rgba(185, 140, 255, .05);
}

body[theme="dark"] .ltv-wrap:hover {
    border-color: rgba(185, 140, 255, .45);
    background: rgba(185, 140, 255, .09);
}

body[theme="dark"] .ltv-icon {
    background: rgba(185, 140, 255, .15);
    color: #b98cff;
}

body[theme="dark"] .ltv-open-btn {
    color: #b98cff;
    border: 1px solid rgba(185, 140, 255, .3);
}

body[theme="dark"] .ltv-wrap:hover .ltv-open-btn {
    background: rgba(185, 140, 255, .12);
}

body[theme="dark"] .ltv-more {
    color: #b98cff;
}

body[theme="dark"] .voice-mode-drawer,
body[theme="dark"] .voice-mode-drawer .el-drawer__body {
    background: radial-gradient(ellipse at top, #262320 0%, #221f1c 100%) !important;
}

body[theme="dark"] .voice-mode-root {
    color: #f4efe6;
}

body[theme="dark"] .voice-header-avatar {
    background: rgba(246, 241, 233, 0.1);
}

body[theme="dark"] .voice-header-name {
    color: rgba(246, 241, 233, 0.9);
}

body[theme="dark"] .voice-close {
    background: rgba(246, 241, 233, 0.08);
    color: #f4efe6;
}

body[theme="dark"] .voice-close:hover {
    background: rgba(246, 241, 233, 0.15);
}

body[theme="dark"] .voice-status {
    color: rgba(246, 241, 233, 0.7);
}

body[theme="dark"] .voice-transcript-user {
    color: rgba(246, 241, 233, 0.5);
}

body[theme="dark"] .voice-transcript-ai {
    color: rgba(246, 241, 233, 0.9);
}

body[theme="dark"] .voice-transcript-ai strong {
    color: #f4efe6;
    font-weight: 600;
}

body[theme="dark"] .voice-transcript-ai h1,
body[theme="dark"] .voice-transcript-ai h2,
body[theme="dark"] .voice-transcript-ai h3 {
    color: #f4efe6;
}

body[theme="dark"] .voice-transcript-ai code {
    background: rgba(246, 241, 233, 0.08);
}

body[theme="dark"] .voice-btn-mute {
    background: rgba(246, 241, 233, 0.1);
    color: white;
}

body[theme="dark"] .voice-btn-mute:hover {
    background: rgba(246, 241, 233, 0.2);
}

body[theme="dark"] .voice-btn-mute.muted {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

body[theme="dark"] .topbar-voice-btn {
    color: rgba(246, 241, 233, 0.7);
}

body[theme="dark"] .topbar-voice-btn:hover {
    background: rgba(246, 241, 233, 0.06);
    color: #f4efe6;
}

body[theme="dark"] .chat-empty-tip {
    background: rgba(251, 207, 232, 0.04);
    border: 1px solid rgba(251, 207, 232, 0.12);
}

body[theme="dark"] .chat-empty-tip:hover {
    background: rgba(251, 207, 232, 0.08);
    border-color: rgba(251, 207, 232, 0.25);
}

body[theme="dark"] .chat-empty-tip-icon {
    background: rgba(251, 207, 232, 0.1);
    color: #fbcfe8;
}

body[theme="dark"] .chat-empty-tip-label {
    color: #f0abfc;
}

body[theme="dark"] .chat-empty-tip-title {
    color: rgba(246, 241, 233, 0.95);
}

body[theme="dark"] .chat-empty-tip-text {
    color: rgba(246, 241, 233, 0.6);
}

body[theme="dark"] .chat-empty-tip-dismiss {
    color: rgba(246, 241, 233, 0.5);
}

body[theme="dark"] .chat-empty-tip-dismiss:hover {
    background: rgba(246, 241, 233, 0.1);
}

body[theme="dark"] .up-page {
    background: #262320;
    color: rgba(246, 241, 233, 0.92);
    min-height: 100vh;
}

body[theme="dark"] .up-cover {
    background: linear-gradient(155deg, rgba(185, 140, 255, 0.10) 0%, rgba(185, 140, 255, 0.04) 60%, rgba(185, 140, 255, 0.02) 100%);
    border: 1px solid rgba(185, 140, 255, 0.14);
}

body[theme="dark"] .up-cover-eyebrow.el-tag {
    color: #cbaaff !important;
    background-color: rgba(185, 140, 255, 0.10) !important;
    border-color: rgba(185, 140, 255, 0.22) !important;
}

body[theme="dark"] .up-compass {
    background: rgba(246, 241, 233, 0.03);
    border: 1px solid rgba(246, 241, 233, 0.06);
}

body[theme="dark"] .up-compass-axis--social .up-compass-dot {
    background: #5eead4;
    box-shadow: 0 0 0 2px rgba(94, 234, 212, 0.40);
}

body[theme="dark"] .up-compass-axis--motion .up-compass-dot {
    background: #6ee7b7;
    box-shadow: 0 0 0 2px rgba(110, 231, 183, 0.40);
}

body[theme="dark"] .up-compass-axis--spontaneous .up-compass-dot {
    background: #f9a8d4;
    box-shadow: 0 0 0 2px rgba(244, 114, 182, 0.40);
}

body[theme="dark"] .up-compass-axis--generous .up-compass-dot {
    background: rgba(246, 241, 233, 0.75);
    box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.45);
}

body[theme="dark"] .up-chapter--food {
    background: rgba(251, 191, 36, 0.06);
}

body[theme="dark"] .up-chapter--health {
    background: rgba(110, 231, 183, 0.06);
}

body[theme="dark"] .up-chapter--home {
    background: rgba(251, 146, 60, 0.06);
}

body[theme="dark"] .up-chapter--finance {
    background: rgba(148, 163, 184, 0.06);
}

body[theme="dark"] .up-chapter--work {
    background: rgba(129, 140, 248, 0.06);
}

body[theme="dark"] .up-chapter--learning {
    background: rgba(185, 140, 255, 0.06);
}

body[theme="dark"] .up-chapter--people {
    background: rgba(251, 113, 133, 0.06);
}

body[theme="dark"] .up-chapter--recreation {
    background: rgba(94, 234, 212, 0.06);
}

body[theme="dark"] .up-chapter--travel {
    background: rgba(244, 114, 182, 0.06);
}

body[theme="dark"] .up-chapter--spiritual {
    background: rgba(125, 211, 252, 0.06);
}

body[theme="dark"] .up-chapter--shopping {
    background: rgba(232, 121, 249, 0.06);
}

body[theme="dark"] .up-chapter--general {
    background: rgba(156, 163, 175, 0.06);
}

body[theme="dark"] .up-cta {
    background: rgba(185, 140, 255, 0.12);
    border-color: rgba(185, 140, 255, 0.25);
    color: #cbaaff;
}

body[theme="dark"] .up-cta:hover {
    background: rgba(185, 140, 255, 0.20);
}

body[theme="dark"] .chat-goto-bottom {
    background: rgba(27, 27, 27, 0.92);
    border: 1px solid rgba(246, 241, 233, 0.10);
    color: rgba(246, 241, 233, 0.85);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

body[theme="dark"] .chat-goto-bottom:hover {
    background: rgba(38, 38, 38, 0.96);
    color: #f4efe6;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55);
}

body[theme="dark"] .app-offline-banner {
    background: rgba(38, 30, 30, 0.96);
    border: 1px solid rgba(248, 113, 113, 0.35);
    color: rgba(255, 210, 210, 0.95);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

body[theme="dark"] .fy-dropdown {
    background: #262320;
    color: rgba(246, 241, 233, 0.92);
    border: 1px solid rgba(246, 241, 233, 0.08);
}

body[theme="dark"] .fy-tab-count {
    background: rgba(246, 241, 233, 0.08);
    color: rgba(246, 241, 233, 0.65);
}

body[theme="dark"] .fy-card,
body[theme="dark"] .fy-row,
body[theme="dark"] .fy-rail-card,
body[theme="dark"] .fy-listening-chip {
    background: rgba(246, 241, 233, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
    color: rgba(246, 241, 233, 0.92);
}

body[theme="dark"] .fy-card:hover,
body[theme="dark"] .fy-row:hover,
body[theme="dark"] .fy-rail-card:hover,
body[theme="dark"] .fy-listening-chip:hover {
    background: rgba(246, 241, 233, 0.06);
    border-color: rgba(246, 241, 233, 0.14);
}

body[theme="dark"] .fy-card--suggestion,
body[theme="dark"] .fy-row--suggestion {
    /* one step of elevation off the dark ground so the CTAs read as cards */
    background: var(--surface);
    border-color: rgba(246, 241, 233, 0.12);
    color: rgba(246, 241, 233, 0.92);
}

body[theme="dark"] .fy-card--suggestion:hover,
body[theme="dark"] .fy-row--suggestion:hover {
    background: var(--surface-2);
    border-color: rgba(246, 241, 233, 0.18);
}

body[theme="dark"] .fy-tip-banner {
    background: transparent;
    border-color: transparent;
    color: rgba(246, 241, 233, 0.92);
}

body[theme="dark"] .fy-tip-banner-icon {
    color: #cbaaff;
}

body[theme="dark"] .fy-tip-cta {
    color: #cbaaff;
    background: rgba(185, 140, 255, 0.10);
    border-color: rgba(185, 140, 255, 0.22);
}

body[theme="dark"] .fy-tip-cta:hover {
    background: rgba(185, 140, 255, 0.18);
    border-color: rgba(185, 140, 255, 0.36);
    color: #f4efe6;
}

body[theme="dark"] .sttv-source-card,
body[theme="dark"] .sttv-source-more {
    background: rgba(246, 241, 233, 0.04);
    border-color: rgba(246, 241, 233, 0.10);
    color: rgba(246, 241, 233, 0.92);
}

body[theme="dark"] .sttv-source-card:hover,
body[theme="dark"] .sttv-source-more:hover {
    background: rgba(246, 241, 233, 0.07);
    border-color: rgba(246, 241, 233, 0.16);
}

body[theme="dark"] .mtv-card {
    background: #262320;
    border-color: rgba(246, 241, 233, 0.06);
    color: rgba(246, 241, 233, 0.92);
}

body[theme="dark"] .mtv-card:hover {
    border-color: rgba(185, 140, 255, 0.35);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32);
}

body[theme="dark"] .mtv-thumb {
    background: rgba(246, 241, 233, 0.04);
}

body[theme="dark"] .mtv-thumb-fallback {
    color: rgba(246, 241, 233, 0.45);
}

body[theme="dark"] .mtv-vendor {
    color: rgba(246, 241, 233, 0.55);
}

body[theme="dark"] .mtv-amount {
    color: rgba(246, 241, 233, 0.95);
}

body[theme="dark"] .mtv-amount-local {
    color: rgba(246, 241, 233, 0.55);
}

body[theme="dark"] .mtv-empty {
    background: rgba(246, 241, 233, 0.03);
    border: 1px solid rgba(246, 241, 233, 0.06);
    color: rgba(246, 241, 233, 0.6);
}

body[theme="dark"] .mtv-pending-pill {
    background: rgba(248, 113, 113, 0.15);
    color: #f87171;
    border: 1px solid rgba(248, 113, 113, 0.35);
}

body[theme="dark"] .mtv-drawer {
    background: #262320 !important;
    color: rgba(246, 241, 233, 0.88) !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 78vh;
}

body[theme="dark"] .mtv-drawer .el-drawer__body {
    background: #262320 !important;
    padding: 0 !important;
    overflow-y: auto;
}

body[theme="dark"] .mtv-detail-vendor {
    color: rgba(246, 241, 233, 0.55);
}

body[theme="dark"] .mtv-carousel-frame {
    background: rgba(246, 241, 233, 0.04);
}

body[theme="dark"] .mtv-detail-price-btla {
    color: rgba(246, 241, 233, 0.95);
}

body[theme="dark"] .mtv-detail-price-local {
    color: rgba(246, 241, 233, 0.55);
}

body[theme="dark"] .mtv-detail-body-text {
    color: rgba(246, 241, 233, 0.78);
}

body[theme="dark"] .mtv-drawer .mtv-detail-btn {
    border: 1px solid rgba(246, 241, 233, 0.07) !important;
    background: rgba(246, 241, 233, 0.05) !important;
    color: rgba(246, 241, 233, 0.88) !important;
}

body[theme="dark"] .mtv-drawer .mtv-detail-btn:hover {
    border-color: rgba(185, 140, 255, 0.30) !important;
    background: rgba(185, 140, 255, 0.06) !important;
}

body[theme="dark"] .mtv-drawer .mtv-detail-btn.mtv-detail-btn--primary {
    border-color: rgba(185, 140, 255, 0.30) !important;
    background: rgba(185, 140, 255, 0.10) !important;
    color: #cbaaff !important;
}

body[theme="dark"] .mtv-drawer .mtv-detail-btn.mtv-detail-btn--primary:hover {
    border-color: rgba(185, 140, 255, 0.50) !important;
    background: rgba(185, 140, 255, 0.16) !important;
    color: #3f3557 !important;
}

body[theme="dark"] .mtv-drawer .mtv-detail-btn:disabled,
body[theme="dark"] .mtv-drawer .mtv-detail-btn.mtv-detail-btn--primary:disabled {
    border-color: rgba(246, 241, 233, 0.06) !important;
    background: rgba(246, 241, 233, 0.03) !important;
    color: rgba(246, 241, 233, 0.35) !important;
}

body[theme="dark"] .ptv-cta {
    border-color: rgba(246, 241, 233, 0.07);
    background: rgba(246, 241, 233, 0.05);
    color: rgba(246, 241, 233, 0.88);
}

body[theme="dark"] .ptv-cta:hover {
    border-color: rgba(185, 140, 255, 0.30);
    background: rgba(185, 140, 255, 0.06);
}

body[theme="dark"] .ptv-cta--primary {
    border-color: rgba(185, 140, 255, 0.30);
    background: rgba(185, 140, 255, 0.10);
    color: #cbaaff;
}

body[theme="dark"] .ptv-cta--primary:hover {
    border-color: rgba(185, 140, 255, 0.50);
    background: rgba(185, 140, 255, 0.16);
    color: #3f3557;
}

body[theme="dark"] .ptv-checkout-drawer {
    background: #262320 !important;
    color: rgba(246, 241, 233, 0.92) !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 80vh;
}

body[theme="dark"] .ptv-checkout-drawer .el-drawer__body {
    background: #262320 !important;
    padding: 0 !important;
    overflow-y: auto;
}

body[theme="dark"] .ptv-checkout-sub {
    color: rgba(246, 241, 233, 0.55);
}

body[theme="dark"] .ptv-checkout-amount-btla {
    color: rgba(246, 241, 233, 0.95);
}

body[theme="dark"] .ptv-checkout-amount-local {
    color: rgba(246, 241, 233, 0.55);
}

body[theme="dark"] .ptv-checkout-summary {
    background: rgba(246, 241, 233, 0.04);
    border: 1px solid rgba(246, 241, 233, 0.06);
}

body[theme="dark"] .ptv-checkout-summary-row {
    color: rgba(246, 241, 233, 0.85);
}

body[theme="dark"] .ptv-checkout-balance {
    background: rgba(246, 241, 233, 0.03);
    border: 1px solid rgba(246, 241, 233, 0.06);
}

body[theme="dark"] .ptv-checkout-balance-label {
    color: rgba(246, 241, 233, 0.55);
}

body[theme="dark"] .ptv-checkout-balance-value {
    color: #6ee7b7;
}

body[theme="dark"] .ptv-checkout-balance.ptv-checkout-balance--low .ptv-checkout-balance-value {
    color: #f87171;
}

body[theme="dark"] .ptv-checkout-pin-label {
    color: rgba(246, 241, 233, 0.55);
}

body[theme="dark"] .ptv-otp-input {
    background: rgba(246, 241, 233, 0.04);
    border-color: rgba(246, 241, 233, 0.10);
    color: rgba(246, 241, 233, 0.92);
}

body[theme="dark"] .ptv-otp-input:focus {
    border-color: rgba(185, 140, 255, 0.55);
    background: rgba(246, 241, 233, 0.06);
}

body[theme="dark"] .ptv-checkout-insufficient {
    background: rgba(248, 113, 113, 0.06);
    border: 1px solid rgba(248, 113, 113, 0.25);
    color: #fca5a5;
}

body[theme="dark"] .ptv-checkout-insufficient i {
    color: #f87171;
}

body[theme="dark"] .ptv-checkout-insufficient-sub a {
    color: #cbaaff;
}

body[theme="dark"] .ptv-checkout-error {
    background: rgba(248, 113, 113, 0.08);
    border: 1px solid rgba(248, 113, 113, 0.30);
    color: #fca5a5;
}

body[theme="dark"] .ptv-checkout-error i {
    color: #f87171;
}

body[theme="dark"] .ptv-checkout-cta:disabled {
    border-color: rgba(246, 241, 233, 0.06);
    background: rgba(246, 241, 233, 0.03);
    color: rgba(246, 241, 233, 0.40);
    cursor: not-allowed;
}

body[theme="dark"] .ptv-success-drawer {
    background: #262320 !important;
    color: rgba(246, 241, 233, 0.92) !important;
    border-radius: 0 !important;
}

body[theme="dark"] .ptv-success-drawer .el-drawer__body {
    background: #262320 !important;
    padding: 0 !important;
    overflow-y: auto;
}

body[theme="dark"] .ptv-success-checkmark {
    background: rgba(52, 211, 153, 0.10);
    box-shadow: 0 0 0 8px rgba(52, 211, 153, 0.04);
}

body[theme="dark"] .ptv-success-circle {
    stroke: #34d399;
}

body[theme="dark"] .ptv-success-tick {
    stroke: #6ee7b7;
}

body[theme="dark"] .ptv-success-headline {
    color: rgba(246, 241, 233, 0.95);
}

body[theme="dark"] .ptv-success-sub {
    color: rgba(246, 241, 233, 0.6);
}

body[theme="dark"] .ptv-success-receipt {
    background: rgba(246, 241, 233, 0.04);
    border: 1px solid rgba(246, 241, 233, 0.07);
}

body[theme="dark"] .ptv-success-receipt-label {
    color: rgba(246, 241, 233, 0.55);
}

body[theme="dark"] .ptv-success-receipt-value {
    color: rgba(246, 241, 233, 0.92);
}

body[theme="dark"] .ptv-success-receipt-mono {
    color: #cbaaff;
}

body[theme="dark"] .ptv-success-dismiss {
    color: rgba(246, 241, 233, 0.4);
}

body[theme="dark"] .ptv-success-dismiss:hover {
    color: rgba(246, 241, 233, 0.7);
}

body[theme="dark"] .app-sidebar {
    background: #262320;
    border-right-color: rgba(246, 241, 233, 0.06);
}

@media (max-width: 991.98px) {
    body[theme="dark"] .app-sidebar {
        background: #262320;
    }
}

body[theme="dark"] .app-sidebar-overlay {
    background: rgba(0, 0, 0, 0.5);
}

body[theme="dark"] .sidebar-item {
    color: rgba(246, 241, 233, 0.6);
}

body[theme="dark"] .sidebar-item:hover {
    background: rgba(246, 241, 233, 0.06);
    color: rgba(246, 241, 233, 0.95);
}

body[theme="dark"] .sidebar-item-active {
    background: rgba(185, 140, 255, 0.12);
    color: #b98cff;
}

body[theme="dark"] .sidebar-divider {
    background: rgba(246, 241, 233, 0.06);
}

body[theme="dark"] .app-topbar {
    border-bottom-color: rgba(246, 241, 233, 0.06);
    color: rgba(246, 241, 233, 0.9);
}

body[theme="dark"] .cc2-topbar {
    border-bottom: 1px solid rgba(246, 241, 233, 0.06);
}

body[theme="dark"] .cc2-icon-btn {
    color: rgba(246, 241, 233, 0.7);
}

body[theme="dark"] .cc2-icon-btn:hover {
    background: rgba(246, 241, 233, 0.08);
    color: rgba(246, 241, 233, 1);
}

body[theme="dark"] .cc2-title {
    color: rgba(246, 241, 233, 0.95);
}

body[theme="dark"] .oo-section-header {
    color: rgba(246, 241, 233, 0.55);
}

body[theme="dark"] .oo-card {
    border: 1px solid rgba(246, 241, 233, 0.08);
    background: rgba(246, 241, 233, 0.02);
}

body[theme="dark"] .oo-card:hover {
    border-color: rgba(185, 140, 255, 0.3);
    background: rgba(185, 140, 255, 0.05);
}

body[theme="dark"] .oo-card--active {
    border-left-color: #b98cff;
}

body[theme="dark"] .oo-card-title {
    color: rgba(246, 241, 233, 0.95);
}

body[theme="dark"] .oo-card-subtitle {
    color: rgba(246, 241, 233, 0.5);
}

body[theme="dark"] .oo-card-icon-fallback {
    color: rgba(246, 241, 233, 0.55);
}

body[theme="dark"] .oo-amount {
    color: rgba(246, 241, 233, 0.95);
}

body[theme="dark"] .oo-date {
    color: rgba(246, 241, 233, 0.4);
}

body[theme="dark"] .oo-reorder-cta {
    color: #b98cff;
}

body[theme="dark"] .oo-status--active {
    background: rgba(185, 140, 255, 0.15);
    color: #cbaaff;
}

body[theme="dark"] .oo-list-item:hover {
    background: rgba(246, 241, 233, 0.04);
}

body[theme="dark"] .oo-list-icon-fallback {
    color: rgba(246, 241, 233, 0.5);
}

body[theme="dark"] .oo-list-title {
    color: rgba(246, 241, 233, 0.9);
}

body[theme="dark"] .oo-list-meta {
    color: rgba(246, 241, 233, 0.5);
}

body[theme="dark"] .oo-list-amount {
    color: rgba(246, 241, 233, 0.85);
}

body[theme="dark"] .oo-list-chev {
    color: rgba(246, 241, 233, 0.4);
}

body[theme="dark"] .oo-empty-glyph {
    color: rgba(246, 241, 233, 0.6);
}

body[theme="dark"] .oo-empty-title {
    color: rgba(246, 241, 233, 0.95);
}

body[theme="dark"] .oo-empty-subtitle {
    color: rgba(246, 241, 233, 0.55);
}

body[theme="dark"] .oo-starter-btn {
    border: 1px solid rgba(246, 241, 233, 0.1);
    background: rgba(246, 241, 233, 0.04);
    color: rgba(246, 241, 233, 0.8);
}

body[theme="dark"] .oo-starter-btn:hover {
    background: rgba(185, 140, 255, 0.1);
    border-color: rgba(185, 140, 255, 0.3);
    color: #b98cff;
}

body[theme="dark"] .oo-loading i {
    color: rgba(246, 241, 233, 0.4);
}

body[theme="dark"] .oo-detail-drawer {
    background: #262320 !important;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
}

body[theme="dark"] .oo-detail-drawer .el-drawer__body {
    background: #262320 !important;
    color: rgba(246, 241, 233, 0.92);
    padding: 0;
}

body[theme="dark"] .oo-detail-footer {
    border-top: 1px solid rgba(246, 241, 233, 0.08);
}

body[theme="dark"] .oo-detail-btn {
    border: 1px solid rgba(246, 241, 233, 0.1);
    background: rgba(246, 241, 233, 0.04);
    color: rgba(246, 241, 233, 0.85);
}

body[theme="dark"] .oo-detail-btn:hover {
    background: rgba(246, 241, 233, 0.08);
    color: rgba(246, 241, 233, 1);
}

body[theme="dark"] .oo-detail-btn--primary {
    background: rgba(185, 140, 255, 0.18);
    border-color: rgba(185, 140, 255, 0.35);
    color: #cbaaff;
}

body[theme="dark"] .oo-detail-btn--primary:hover {
    background: rgba(185, 140, 255, 0.28);
    color: #3f3557;
}

body[theme="dark"] .dl-tag {
    border: 1px solid rgba(246, 241, 233, 0.08);
    background: rgba(246, 241, 233, 0.02);
    color: rgba(246, 241, 233, 0.92);
}

body[theme="dark"] .dl-tag:hover {
    border-color: rgba(185, 140, 255, 0.35);
    background: rgba(185, 140, 255, 0.07);
}

body[theme="dark"] .dl-tag-icon-fallback {
    color: rgba(246, 241, 233, 0.55);
}

body[theme="dark"] .dl-tag-label {
    color: rgba(246, 241, 233, 0.95);
}

body[theme="dark"] .dl-tag-value {
    color: rgba(246, 241, 233, 0.55);
}

body[theme="dark"] .dl-add-tag {
    border: 1px dashed rgba(185, 140, 255, 0.4);
    background: transparent;
    color: rgba(185, 140, 255, 0.95);
}

body[theme="dark"] .dl-add-tag:hover {
    background: rgba(185, 140, 255, 0.08);
    border-color: rgba(185, 140, 255, 0.6);
}

body[theme="dark"] .dl-add-glyph {
    background: rgba(185, 140, 255, 0.18);
    color: #cbaaff;
}

body[theme="dark"] .dl-add-drawer {
    background: #262320 !important;
}

body[theme="dark"] .dl-add-drawer .el-drawer__body {
    background: #262320 !important;
    color: rgba(246, 241, 233, 0.92);
}

body[theme="dark"] .dl-add-title {
    color: rgba(246, 241, 233, 0.95);
}

body[theme="dark"] .dl-add-sub {
    color: rgba(246, 241, 233, 0.55);
}

body[theme="dark"] .dl-add-form .el-form-item__label {
    color: rgba(246, 241, 233, 0.55);
}

body[theme="dark"] .dl-add-form .el-input__inner,
body[theme="dark"] .dl-add-form .el-textarea__inner {
    background: rgba(246, 241, 233, 0.04);
    border: 1px solid rgba(246, 241, 233, 0.1);
    color: rgba(246, 241, 233, 0.95);
}

body[theme="dark"] .dl-add-form .el-input__inner:focus,
body[theme="dark"] .dl-add-form .el-textarea__inner:focus {
    border-color: rgba(185, 140, 255, 0.5);
    background: rgba(246, 241, 233, 0.06);
}

body[theme="dark"] .dl-add-error {
    color: #f87171;
}

body[theme="dark"] .dl-add-error i {
    color: #f87171;
}

body[theme="dark"] .dl-add-btn {
    border: 1px solid rgba(246, 241, 233, 0.1);
    background: rgba(246, 241, 233, 0.04);
    color: rgba(246, 241, 233, 0.85);
}

body[theme="dark"] .dl-add-btn:not([disabled]):hover {
    background: rgba(246, 241, 233, 0.08);
    color: rgba(246, 241, 233, 1);
}

body[theme="dark"] .dl-add-btn--primary {
    background: rgba(185, 140, 255, 0.18);
    border-color: rgba(185, 140, 255, 0.35);
    color: #cbaaff;
}

body[theme="dark"] .dl-add-btn--primary:not([disabled]):hover {
    background: rgba(185, 140, 255, 0.28);
    color: #3f3557;
}

body[theme="dark"] .dl-add-spinner {
    color: #cbaaff;
}

/* ── interactive/pages/auth/canvas-reset.vue ── */
body[theme="dark"] .canvas-auth {
    --auth-bg: #302c27;
    --auth-card: #3a352d;
    --auth-text: #f2ede4;
    --auth-text-sub: rgba(241, 241, 241, 0.65);
    --auth-border: rgba(246, 241, 233, 0.1);
    --auth-input: rgba(246, 241, 233, 0.06);
}

/* ── interactive/pages/auth/canvas-verify.vue ── */
body[theme="dark"] .canvas-auth {
    --auth-bg: #302c27;
    --auth-card: #3a352d;
    --auth-text: #f2ede4;
    --auth-text-sub: rgba(241, 241, 241, 0.65);
    --auth-border: rgba(246, 241, 233, 0.1);
}

/* ── interactive/pages/billing/index.vue ── */
body[theme="dark"] .billing-tabs {
    background: var(--surface);
    border-color: var(--border);
}

body[theme="dark"] .billing-tab {
    color: var(--text-muted);
}

body[theme="dark"] .billing-tab:hover {
    color: var(--text);
    background: var(--surface-2);
}

body[theme="dark"] .billing-tab--active {
    background: var(--primary-weak);
    color: var(--primary);
}

/* Current plan: tinted inner panel, so it reads apart from the plan cards. */
body[theme="dark"] .account-sub__banner {
    background: var(--surface);
}

body[theme="dark"] .account-sub__banner::before {
    background: var(--primary-weaker);
}

body[theme="dark"] .account-sub__banner::after {
    border-color: var(--primary-ring);
}

body[theme="dark"] .account-sub__badge {
    background: var(--surface);
}

body[theme="dark"] .account-sub__badge--active {
    color: var(--ok);
}

body[theme="dark"] .account-sub__badge--cancelled {
    color: var(--err);
}

body[theme="dark"] .account-sub__badge--past_due {
    color: var(--warn);
}

/* subscription.vue colours the cancel link and the active label inline,
   which is why these two carry !important. */
body[theme="dark"] .account-sub__banner .ms-3 {
    color: var(--err) !important;
}

body[theme="dark"] .account-sub__plan-row > div:last-child > span:last-child:not(:first-child) {
    color: var(--ok) !important;
}

body[theme="dark"] .account-sub__bar,
body[theme="dark"] .account-usage__bar {
    background: var(--border);
}

body[theme="dark"] .account-sub__bar-fill,
body[theme="dark"] .account-usage__bar-fill {
    background: var(--primary);
}

/* Plan and usage cards: the ring stays quiet until hover, and the plan in
   force takes the primary ring. */
body[theme="dark"] .account-sub__plan-row,
body[theme="dark"] .account-sub__plan-row--active,
body[theme="dark"] .account-usage__card {
    background: var(--surface);
}

body[theme="dark"] .account-sub__plan-row::before,
body[theme="dark"] .account-usage__card::before {
    background: var(--surface-2);
}

body[theme="dark"] .account-sub__plan-row::after,
body[theme="dark"] .account-usage__card::after {
    border-color: var(--border-strong);
}

body[theme="dark"] .account-sub__plan-row:hover::after {
    border-color: var(--line);
}

body[theme="dark"] .account-sub__plan-row--active::before {
    background: var(--primary-weaker);
}

body[theme="dark"] .account-sub__plan-row--active::after {
    border-color: var(--primary);
}

body[theme="dark"] .account-sub__popular {
    background: var(--primary-weak);
    color: var(--primary);
}

body[theme="dark"] .account-sub__plan-row .el-button {
    background: var(--surface);
    border-color: var(--border-strong);
    color: var(--text);
}

body[theme="dark"] .account-sub__plan-row .el-button:hover,
body[theme="dark"] .account-sub__plan-row .el-button:focus {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
}

body[theme="dark"] .account-sub__plan-row .el-button--primary {
    background: var(--surface);
    border-color: var(--primary-ring);
    color: var(--primary);
    box-shadow: inset 0 0 11px 0 var(--primary-weak);
}

body[theme="dark"] .account-sub__plan-row .el-button--primary:hover,
body[theme="dark"] .account-sub__plan-row .el-button--primary:focus {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
    box-shadow: none;
}

/* Upgrade drawer */
body[theme="dark"] .account-sub__benefit {
    border-bottom-color: var(--border);
}

body[theme="dark"] .account-sub__benefit:not(.account-sub__benefit--off) .account-sub__benefit-icon {
    color: var(--ok);
}

body[theme="dark"] .account-sub__chip {
    border-color: var(--border-strong);
    color: var(--text-sub);
}

body[theme="dark"] .account-sub__chip--active {
    border-color: var(--primary);
    color: var(--primary);
}

body[theme="dark"] .account-sub .small-title,
body[theme="dark"] .account-usage .small-title,
body[theme="dark"] .account-sub .row + div {
    color: var(--text-muted);
}

body[theme="dark"] .account-usage__callout {
    color: var(--text-sub);
}

body[theme="dark"] .account-usage__callout--warn {
    color: var(--err);
}

body[theme="dark"] .account-sub a,
body[theme="dark"] .account-usage a {
    color: var(--primary);
}

/* inline opacity on these rows multiplies the token back down below AA; the token already carries the intent */
body[theme="dark"] .account-sub__banner > div:last-of-type { opacity: 1 !important; color: var(--text-muted); }
body[theme="dark"] .account-sub__banner .ms-3 { opacity: 1 !important; color: var(--err) !important; }
body[theme="dark"] .account-sub .row + div { opacity: 1 !important; color: var(--text-muted); }
body[theme="dark"] .account-usage__callout { opacity: 1 !important; color: var(--text-sub); }
body[theme="dark"] .account-sub__plan-row > div:first-child > div > div:last-child { opacity: 1 !important; color: var(--text-sub); }

/* ── interactive/pages/hm/index.vue ── */
body[theme="dark"] .ld-brief-greeting {
    color: var(--text);
}

body[theme="dark"] .ld-brief-subtitle {
    color: var(--text-sub);
}

body[theme="dark"] .ld-nextup-cta-text {
    color: var(--text);
}

body[theme="dark"] .ld-nextup-cta-arrow {
    color: var(--text-muted);
}

body[theme="dark"] .ld-nextup-cta:hover .ld-nextup-cta-text,
body[theme="dark"] .ld-nextup-cta:hover .ld-nextup-cta-arrow {
    color: var(--primary);
}

body[theme="dark"] .ld-brief-card {
    background: var(--surface);
    border-color: var(--border);
}

body[theme="dark"] .ld-brief-card-tag {
    color: var(--text-muted);
}

body[theme="dark"] .ld-brief-card-item + .ld-brief-card-item {
    border-top-color: var(--border);
}

body[theme="dark"] .ld-brief-card-item-mark {
    color: var(--text-muted);
}

body[theme="dark"] .ld-brief-card-item-text {
    color: var(--text);
}

body[theme="dark"] .ld-brief-card-empty {
    color: var(--text-muted);
}

body[theme="dark"] .ld-brief-card-toggle {
    color: var(--text-muted);
}

body[theme="dark"] .ld-brief-card-toggle:hover {
    color: var(--text);
}

body[theme="dark"] .ld-brief-card-actions {
    border-top-color: var(--border);
}

body[theme="dark"] .ld-brief-card-act {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--text-sub);
}

body[theme="dark"] .ld-brief-card-act:hover {
    border-color: var(--primary-ring);
    color: var(--primary);
}

/* The one action in the row that reveals instead of navigating. */
body[theme="dark"] .ld-brief-card-act--surprise {
    color: var(--primary);
}

body[theme="dark"] .ld-surprise {
    background: var(--surface-2);
    border-color: var(--border);
}

body[theme="dark"] .ld-surprise-eyebrow {
    color: var(--text-muted);
}

body[theme="dark"] .ld-surprise-text {
    color: var(--text);
}

body[theme="dark"] .ld-surprise-foot span {
    color: var(--text-muted);
}

body[theme="dark"] .ld-surprise-foot span:hover {
    color: var(--text);
}

/* The recap ground has to stay opaque: html2canvas captures it as a PNG. */
body[theme="dark"] .ld-recap {
    background: var(--surface);
    border-color: var(--border);
}

body[theme="dark"] .ld-recap-eyebrow {
    color: var(--text-muted);
}

body[theme="dark"] .ld-recap-week {
    color: var(--text-sub);
}

body[theme="dark"] .ld-recap-chevron {
    color: var(--text-muted);
}

body[theme="dark"] .ld-recap-eyebrow--clickable:hover .ld-recap-chevron {
    color: var(--text);
}

body[theme="dark"] .ld-recap-text {
    color: var(--text);
}

body[theme="dark"] .ld-recap-toggle {
    color: var(--text-muted);
}

body[theme="dark"] .ld-recap-toggle:hover {
    color: var(--text);
}

body[theme="dark"] .ld-recap-highlights,
body[theme="dark"] .ld-recap-highlight + .ld-recap-highlight,
body[theme="dark"] .ld-recap-actions,
body[theme="dark"] .ld-recap.is-capturing .ld-recap-watermark {
    border-top-color: var(--border);
}

body[theme="dark"] .ld-recap-highlight-when {
    color: var(--text-muted);
}

body[theme="dark"] .ld-recap-highlight-text {
    color: var(--text-sub);
}

body[theme="dark"] .ld-recap-act {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--text-sub);
}

body[theme="dark"] .ld-recap-act:hover:not([disabled]) {
    border-color: var(--primary-ring);
    color: var(--primary);
}

body[theme="dark"] .ld-recap-act--ghost {
    background: none;
    color: var(--text-muted);
}

body[theme="dark"] .ld-recap-watermark span {
    color: var(--text-muted);
}

body[theme="dark"] .ld-section-title {
    color: var(--text-muted);
}

body[theme="dark"] .ld-section-title::after {
    background: var(--border);
}

body[theme="dark"] .ld-view-toggle {
    border-color: var(--border);
    color: var(--text-muted);
}

body[theme="dark"] .ld-view-toggle:hover {
    border-color: var(--border-strong);
    color: var(--text);
}

body[theme="dark"] .ld-score-row + .ld-score-row,
body[theme="dark"] .ld-record-item + .ld-record-item {
    border-top-color: var(--border);
}

body[theme="dark"] .ld-score-label,
body[theme="dark"] .ld-score-num {
    color: var(--text);
}

body[theme="dark"] .ld-score-trend.is-up {
    color: var(--ok);
}

body[theme="dark"] .ld-score-trend.is-down {
    color: var(--err);
}

body[theme="dark"] .ld-record-label {
    color: var(--text-sub);
}

body[theme="dark"] .ld-record-best {
    color: var(--text);
}

body[theme="dark"] .ld-record-current {
    color: var(--text-muted);
}

body[theme="dark"] .ld-epg-bar {
    border-color: var(--border);
}

body[theme="dark"] .ld-epg-bar:hover {
    border-color: var(--primary-ring);
}

body[theme="dark"] .ld-epg-bar-label {
    color: var(--text-sub);
}

body[theme="dark"] .ld-epg-bar-arrow {
    color: var(--text-muted);
}

body[theme="dark"] .ld-feed-card {
    background: var(--surface);
    border-color: var(--border);
}

body[theme="dark"] .ld-feed-card:hover {
    border-color: var(--primary-ring);
}

body[theme="dark"] .ld-feed-card-mark,
body[theme="dark"] .ld-feed-card-desc,
body[theme="dark"] .ld-feed-card-arrow,
body[theme="dark"] .ld-feed-card-dismiss {
    color: var(--text-muted);
}

body[theme="dark"] .ld-feed-card-title {
    color: var(--text);
}

body[theme="dark"] .ld-feed-card-dismiss:hover {
    background: var(--surface-2);
    color: var(--err);
}

body[theme="dark"] .ld-feed-drawer {
    background: var(--surface) !important;
    color: var(--text) !important;
}

body[theme="dark"] .ld-feed-drawer .el-drawer__body {
    background: var(--surface) !important;
}

body[theme="dark"] .ld-feed-detail-mark {
    color: var(--text-muted);
}

body[theme="dark"] .ld-feed-detail-title {
    color: var(--text);
}

body[theme="dark"] .ld-feed-detail-body {
    color: var(--text-sub);
}

body[theme="dark"] .ld-feed-detail-btn {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--text);
}

body[theme="dark"] .ld-feed-detail-btn:hover {
    border-color: var(--primary-ring);
    color: var(--primary);
}

body[theme="dark"] .ld-feed-detail-dismiss {
    color: var(--err);
}

body[theme="dark"] .ld-feed-detail-dismiss:hover {
    border-color: var(--err);
    color: var(--err);
}

body[theme="dark"] .ld-people-card {
    border-color: var(--border);
}

body[theme="dark"] .ld-people-card:hover {
    border-color: var(--primary-ring);
}

body[theme="dark"] .ld-people-avatar {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--text);
}

body[theme="dark"] .ld-people-name {
    color: var(--text);
}

body[theme="dark"] .ld-people-note,
body[theme="dark"] .ld-people-add-avatar,
body[theme="dark"] .ld-people-add-label {
    color: var(--text-muted);
}

body[theme="dark"] .ld-spending-card {
    background: var(--surface);
    border-color: var(--border);
}

body[theme="dark"] .ld-spending-total {
    color: var(--text);
}

/* Spending below last month reads as the good direction. */
body[theme="dark"] .ld-spending-change.is-lower {
    color: var(--ok);
}

body[theme="dark"] .ld-spending-change.is-higher {
    color: var(--err);
}

body[theme="dark"] .ld-spending-top,
body[theme="dark"] .ld-spending-labels span {
    color: var(--text-muted);
}

body[theme="dark"] .ld-spending-bar {
    background: var(--primary-ring);
}

body[theme="dark"] .ld-wishlist-item {
    border-color: var(--border);
}

body[theme="dark"] .ld-wishlist-item > i,
body[theme="dark"] .ld-wishlist-status {
    color: var(--text-muted);
}

body[theme="dark"] .ld-wishlist-name,
body[theme="dark"] .ld-wishlist-price {
    color: var(--text);
}

body[theme="dark"] .ld-mood-summary {
    color: var(--text-sub);
}

body[theme="dark"] .ld-stat-card {
    border-top-color: var(--border);
}

body[theme="dark"] .ld-stat-value {
    color: var(--text);
}

body[theme="dark"] .ld-stat-label {
    color: var(--text-muted);
}

body[theme="dark"] .ld-activity-item + .ld-activity-item {
    border-top-color: var(--border);
}

body[theme="dark"] .ld-activity-icon,
body[theme="dark"] .ld-activity-time,
body[theme="dark"] .ld-activity-arrow {
    color: var(--text-muted);
}

body[theme="dark"] .ld-activity-title {
    color: var(--text);
}

body[theme="dark"] .ld-activity-item:hover .ld-activity-title {
    color: var(--primary);
}

body[theme="dark"] .ld-empty-hint {
    color: var(--text-muted);
}

body[theme="dark"] .ld-upgrade-link {
    color: var(--primary);
}

body[theme="dark"] .ld-guest-title {
    color: var(--text);
}

body[theme="dark"] .ld-guest-desc {
    color: var(--text-sub);
}

body[theme="dark"] .el-drawer.ld-pulse-drawer {
    background: var(--surface) !important;
    color: var(--text) !important;
}

body[theme="dark"] .el-drawer.ld-pulse-drawer .el-drawer__body {
    background: var(--surface) !important;
}

body[theme="dark"] .ld-pulse-next {
    background: var(--surface-2);
    border-color: var(--border);
}

body[theme="dark"] .ld-pulse-next:hover {
    border-color: var(--primary-ring);
}

body[theme="dark"] .ld-pulse-next-mark,
body[theme="dark"] .ld-pulse-next-label,
body[theme="dark"] .ld-pulse-next-arrow {
    color: var(--text-muted);
}

body[theme="dark"] .ld-pulse-next-text {
    color: var(--text);
}

body[theme="dark"] .ld-pulse-streaks-title {
    color: var(--text-muted);
}

body[theme="dark"] .ld-pulse-streak-card {
    border-top-color: var(--border);
}

body[theme="dark"] .ld-pulse-streak-value {
    color: var(--text);
}

body[theme="dark"] .ld-pulse-streak-label {
    color: var(--text-muted);
}

/* 10-10.5px mono at --text-muted sits under AA on this ground, same
   reason .bt-meta is bumped for dark. */
body[theme="dark"] .ld-section-title,
body[theme="dark"] .ld-brief-card-tag,
body[theme="dark"] .ld-brief-card-toggle,
body[theme="dark"] .ld-surprise-eyebrow,
body[theme="dark"] .ld-surprise-foot span,
body[theme="dark"] .ld-recap-eyebrow,
body[theme="dark"] .ld-recap-toggle,
body[theme="dark"] .ld-recap-highlight-when,
body[theme="dark"] .ld-recap-watermark span,
body[theme="dark"] .ld-view-toggle,
body[theme="dark"] .ld-record-current,
body[theme="dark"] .ld-people-note,
body[theme="dark"] .ld-people-add-label,
body[theme="dark"] .ld-spending-top,
body[theme="dark"] .ld-spending-labels span,
body[theme="dark"] .ld-wishlist-status,
body[theme="dark"] .ld-stat-label,
body[theme="dark"] .ld-activity-time,
body[theme="dark"] .ld-pulse-next-label,
body[theme="dark"] .ld-pulse-streaks-title,
body[theme="dark"] .ld-pulse-streak-label {
    color: var(--text-sub);
}

/* ── interactive/pages/journal/public/_id/index.vue ── */
/* custom.css forces Satoshi on every h-tag with !important, so the title has
   to insist on the display face. */
body[theme="dark"] .jp-title.bt-display {
    font-family: var(--serif) !important;
    font-weight: 340 !important;
}

body[theme="dark"] .jp-root {
    background: #262320;
    color: rgba(246, 241, 233, .88);
}

body[theme="dark"] .jp-state-icon,
body[theme="dark"] .jp-state-msg {
    color: var(--text-muted);
}

body[theme="dark"] .jp-header {
    border-bottom: 1px solid rgba(246, 241, 233, 0.07);
}

body[theme="dark"] .jp-brand {
    color: rgba(246, 241, 233, .88) !important;
}

/* custom.css paints every anchor Element blue with !important, so the public
   page's links have to out-shout it. */
body[theme="dark"] .jp-footer a,
body[theme="dark"] .jp-content a {
    color: var(--primary) !important;
}

body[theme="dark"] .jp-content a {
    text-decoration: underline !important;
}

body[theme="dark"] .jp-masthead {
    border-bottom: 1px solid var(--border);
}

body[theme="dark"] .jp-publisher-avatar {
    border: 3px solid rgba(246, 241, 233, 0.15);
}

body[theme="dark"] .jp-publisher-name {
    color: var(--text);
}

body[theme="dark"] .jp-publisher-dot {
    background: var(--border-strong);
}

/* Body copy keeps the full text weight: this page is read, not scanned. */
body[theme="dark"] .jp-content,
body[theme="dark"] .jp-content h1,
body[theme="dark"] .jp-content h2,
body[theme="dark"] .jp-content h3 {
    color: var(--text);
}

body[theme="dark"] .jp-content blockquote {
    border-left-color: var(--primary-ring);
    color: var(--text-sub);
}

body[theme="dark"] .jp-content th,
body[theme="dark"] .jp-content td {
    border-color: var(--border);
}

body[theme="dark"] .jp-content th {
    background: var(--surface-2);
    color: var(--text-muted);
}

body[theme="dark"] .jp-content img {
    border: 1px solid var(--border);
}

body[theme="dark"] .jp-content pre,
body[theme="dark"] .jp-content code {
    font-family: var(--mono);
    background: var(--surface-2);
    color: var(--text);
}

body[theme="dark"] .jp-content hr {
    border-top-color: var(--border);
}

body[theme="dark"] .jp-content mark {
    background: var(--primary-weak);
    color: var(--text);
}

body[theme="dark"] .editor-mention {
    background: var(--primary-weak);
    color: var(--primary);
}

body[theme="dark"] .editor-comment-mark {
    background: var(--primary-weaker);
    border-bottom-color: var(--warn);
}

body[theme="dark"] .jp-comment-popover {
    background: #262320;
    border: 1px solid rgba(246, 241, 233, 0.08);
    color: rgba(246, 241, 233, .88);
    box-shadow: 0 8px 24px var(--shadow);
}

body[theme="dark"] .jp-popover-close {
    color: var(--text-muted);
}

body[theme="dark"] .jp-popover-row {
    border-bottom-color: var(--border);
}

body[theme="dark"] .jp-popover-author {
    color: var(--primary);
}

body[theme="dark"] .jp-popover-text {
    color: var(--text-sub);
}

body[theme="dark"] .jp-footer {
    border-top: 1px solid rgba(246, 241, 233, 0.06);
    color: var(--text-muted);
}

/* ── interactive/pages/onboarding/index.vue ── */
/* custom.css forces Satoshi on every h-tag with !important, so the display
   face has to insist here. */
body[theme="dark"] .onb-page .bt-display {
    font-family: var(--serif) !important;
    font-weight: 340 !important;
}

body[theme="dark"] .onb-page {
    --onb-text: #f2ede4;
    --onb-text-muted: rgba(241, 241, 241, 0.62);
    --onb-text-faint: rgba(241, 241, 241, 0.42);
    --onb-border: rgba(246, 241, 233, 0.10);
    --onb-border-hover: rgba(246, 241, 233, 0.22);
    --onb-tile-bg: rgba(246, 241, 233, 0.03);
    --onb-tile-bg-hover: rgba(246, 241, 233, 0.05);
    --onb-accent: #8a00fc;
    --onb-accent-soft: rgba(185, 140, 255, 0.16);
    --onb-accent-text: #f4efe6;
    --onb-firstwords-bg: rgba(185, 140, 255, 0.08);
    --onb-error: #f56c6c;
    --onb-step-dot: rgba(246, 241, 233, 0.18);
    --onb-step-dot-on: #8a00fc;
    background: var(--bg);
    color: var(--text);
}

body[theme="dark"] .onb-subtitle,
body[theme="dark"] .onb-ack {
    color: var(--text-sub);
}

body[theme="dark"] .onb-step-dot {
    background: var(--border);
}

body[theme="dark"] .onb-step-dot.active {
    background: var(--line);
}

body[theme="dark"] .onb-step-dot.current {
    background: var(--primary);
}

/* Option cards keep the frame ring quiet until hover or selection, so a
   grid of fifteen tiles does not read as fifteen outlines. */
body[theme="dark"] .onb-archetype.bt-frame::after,
body[theme="dark"] .onb-grid-item.bt-frame::after {
    border-color: var(--border);
}

body[theme="dark"] .onb-archetype.bt-frame:hover::after,
body[theme="dark"] .onb-grid-item.bt-frame:hover::after {
    border-color: var(--border-strong);
}

body[theme="dark"] .onb-archetype.bt-frame.selected::after,
body[theme="dark"] .onb-grid-item.bt-frame.selected::after {
    border-color: var(--primary);
}

body[theme="dark"] .onb-archetype:hover .bt-frame__in,
body[theme="dark"] .onb-grid-item:hover .bt-frame__in {
    background: var(--primary-weaker);
}

body[theme="dark"] .onb-archetype.selected .bt-frame__in,
body[theme="dark"] .onb-grid-item.selected .bt-frame__in {
    background: var(--primary-weak);
}

body[theme="dark"] .onb-grid-item:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

body[theme="dark"] .onb-archetype-name,
body[theme="dark"] .onb-grid-label {
    color: var(--text);
}

body[theme="dark"] .onb-archetype-desc,
body[theme="dark"] .onb-archetype-sample {
    color: var(--text-sub);
}

body[theme="dark"] .onb-grid-icon {
    color: var(--text-muted);
}

body[theme="dark"] .onb-grid-item.selected .onb-grid-icon,
body[theme="dark"] .onb-grid-check {
    color: var(--primary);
}

body[theme="dark"] .onb-fine-tune {
    background: var(--surface);
    border: 1px solid var(--border);
}

body[theme="dark"] .onb-fine-tune > summary i {
    color: var(--text-muted);
}

body[theme="dark"] .onb-slider-label {
    color: var(--text);
}

body[theme="dark"] .onb-slider input[type="range"] {
    accent-color: var(--primary);
}

body[theme="dark"] .onb-glyph-cell.bt-ico {
    background: var(--surface);
    color: var(--text-sub);
}

body[theme="dark"] .onb-glyph-cell.bt-ico::after {
    border-color: var(--border);
}

body[theme="dark"] .onb-glyph-cell.bt-ico:hover {
    background: var(--primary-weaker);
    color: var(--text);
}

body[theme="dark"] .onb-glyph-cell.bt-ico:hover::after {
    border-color: var(--border-strong);
}

body[theme="dark"] .onb-glyph-cell.bt-ico.selected {
    background: var(--primary-weak);
    color: var(--primary);
}

body[theme="dark"] .onb-glyph-cell.bt-ico.selected::after {
    border-color: var(--primary);
}

/* The swatch carries the accent itself, so selection reads as a gap ring in
   the page ground followed by an ink ring. */
body[theme="dark"] .onb-color-swatch {
    border: 2px solid transparent;
    box-shadow: 0 0 0 1px var(--border-strong);
}

body[theme="dark"] .onb-color-swatch.selected {
    border-color: var(--bg);
    box-shadow: 0 0 0 2px var(--ink);
}

body[theme="dark"] .onb-firstwords.bt-frame::after {
    border-color: var(--border-strong);
}

body[theme="dark"] .onb-firstwords .bt-frame__in {
    background: var(--primary-weaker);
}

body[theme="dark"] .onb-firstwords-mark.bt-ico {
    background: var(--surface);
}

body[theme="dark"] .onb-firstwords-mark.bt-ico::after {
    border-color: var(--border);
}

body[theme="dark"] .onb-firstwords-from.bt-meta {
    color: var(--text-sub);
}

body[theme="dark"] .onb-firstwords-line {
    color: var(--text);
}

body[theme="dark"] .onb-error {
    color: var(--err);
}

/* Element renders the name and first-message fields, so their treatment is
   mirrored here rather than hung off the shared vocabulary. */
body[theme="dark"] .onb-page .el-input__inner,
body[theme="dark"] .onb-page .el-textarea__inner {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    color: var(--text);
}

body[theme="dark"] .onb-page .el-input__inner::placeholder,
body[theme="dark"] .onb-page .el-textarea__inner::placeholder {
    color: var(--text-muted);
}

body[theme="dark"] .onb-page .el-input__inner:focus,
body[theme="dark"] .onb-page .el-textarea__inner:focus {
    border-color: var(--primary);
}

body[theme="dark"] .onb-page .el-input__count,
body[theme="dark"] .onb-page .el-input__count-inner {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    background: transparent;
    color: var(--text-muted);
}

/* ── interactive/pages/plan/public/_id/index.vue ── */
/* custom.css forces Satoshi on every h-tag with !important, so the title has
   to insist on the display face. */
body[theme="dark"] .pp-title.bt-display {
    font-family: var(--serif) !important;
    font-weight: 340 !important;
}

body[theme="dark"] .pp-root {
    background: #262320;
    color: rgba(246, 241, 233, .88);
}

body[theme="dark"] .pp-state-icon,
body[theme="dark"] .pp-state-msg {
    color: var(--text-muted);
}

body[theme="dark"] .pp-header {
    border-bottom: 1px solid rgba(246, 241, 233, 0.07);
}

body[theme="dark"] .pp-brand {
    color: rgba(246, 241, 233, .88) !important;
}

/* custom.css paints every anchor Element blue with !important, so the public
   page's links have to out-shout it. */
body[theme="dark"] .pp-footer a,
body[theme="dark"] .pp-content a {
    color: var(--primary) !important;
}

body[theme="dark"] .pp-content a {
    text-decoration: underline !important;
}

body[theme="dark"] .pp-masthead {
    border-bottom: 1px solid var(--border);
}

body[theme="dark"] .pp-publisher-avatar {
    border: 3px solid rgba(246, 241, 233, 0.15);
}

body[theme="dark"] .pp-publisher-name {
    color: var(--text);
}

body[theme="dark"] .pp-publisher-dot {
    background: var(--border-strong);
}

body[theme="dark"] .pp-progress-bar {
    background: rgba(246, 241, 233, 0.06);
    box-shadow: inset 0 0 0 1px var(--border);
}

body[theme="dark"] .pp-progress-fill {
    background: linear-gradient(90deg, var(--primary-ring), var(--primary));
}

/* Body copy keeps the full text weight: this page is read, not scanned. */
body[theme="dark"] .pp-content,
body[theme="dark"] .pp-content h1,
body[theme="dark"] .pp-content h2,
body[theme="dark"] .pp-content h3 {
    color: var(--text);
}

/* Plan blocks sit on the frame's --surface-2 ground, so their fill is
   --surface to stay one step apart from it. */
body[theme="dark"] .pp-content [data-plan-block="milestone"] {
    border-left-color: var(--primary);
    background: var(--primary-weaker);
    color: var(--primary);
}

body[theme="dark"] .pp-content [data-plan-block="task"] {
    border-left-color: var(--ok);
    background: var(--surface);
    color: var(--text);
}

body[theme="dark"] .pp-content [data-plan-block="task"][data-status="done"] {
    border-left-color: var(--border-strong);
    color: var(--text-muted);
}

body[theme="dark"] .pp-content [data-plan-block="task"][data-status="in_progress"] {
    border-left-color: var(--primary);
}

body[theme="dark"] .pp-content [data-plan-block="task"][data-status="blocked"] {
    border-left-color: var(--err);
}

body[theme="dark"] .pp-content [data-plan-block="deadline"] {
    border-left-color: var(--err);
    background: var(--surface);
    color: var(--err);
}

body[theme="dark"] .pp-content th,
body[theme="dark"] .pp-content td {
    border-color: var(--border);
}

body[theme="dark"] .pp-content th {
    background: var(--surface);
    color: var(--text-muted);
}

body[theme="dark"] .pp-content img {
    border: 1px solid var(--border);
}

body[theme="dark"] .pp-content pre,
body[theme="dark"] .pp-content code {
    font-family: var(--mono);
    background: var(--surface);
    color: var(--text);
}

body[theme="dark"] .pp-content hr {
    border-top-color: var(--border);
}

body[theme="dark"] .pp-content mark {
    background: var(--primary-weak);
    color: var(--text);
}

body[theme="dark"] .pp-comment-popover {
    background: #262320;
    border: 1px solid rgba(246, 241, 233, 0.08);
    color: rgba(246, 241, 233, .88);
    box-shadow: 0 8px 24px var(--shadow);
}

body[theme="dark"] .pp-popover-close {
    color: var(--text-muted);
}

body[theme="dark"] .pp-popover-row {
    border-bottom-color: var(--border);
}

body[theme="dark"] .pp-popover-author {
    color: var(--primary);
}

body[theme="dark"] .pp-popover-text {
    color: var(--text-sub);
}

body[theme="dark"] .pp-footer {
    border-top: 1px solid rgba(246, 241, 233, 0.06);
    color: var(--text-muted);
}

/* ── interactive/pages/research/public/_id/index.vue ── */
/* custom.css forces Satoshi on every h-tag with !important, so the title has
   to insist on the display face. */
body[theme="dark"] .rp-title.bt-display {
    font-family: var(--serif) !important;
    font-weight: 340 !important;
}

body[theme="dark"] .rp-root {
    background: var(--bg);
    color: var(--text);
}

body[theme="dark"] .rp-state-icon,
body[theme="dark"] .rp-state-msg {
    color: var(--text-muted);
}

body[theme="dark"] .rp-header {
    border-bottom: 1px solid var(--border);
}

body[theme="dark"] .rp-brand {
    color: var(--text) !important;
}

body[theme="dark"] .rp-masthead {
    border-bottom: 1px solid var(--border);
}

body[theme="dark"] .rp-publisher-avatar {
    border: 1px solid var(--border-strong);
}

body[theme="dark"] .rp-avatar-placeholder {
    background: var(--primary-weak);
    color: var(--primary);
}

body[theme="dark"] .rp-publisher-name {
    color: var(--text);
}

body[theme="dark"] .rp-publisher-dot {
    background: var(--border-strong);
}

/* Body copy keeps the full text weight: this page is read, not scanned. */
body[theme="dark"] .rp-prose,
body[theme="dark"] .rp-prose h2,
body[theme="dark"] .rp-prose h3 {
    color: var(--text);
}

/* custom.css paints every anchor Element blue with !important, so the public
   page's links have to out-shout it. */
body[theme="dark"] .rp-prose a {
    color: var(--primary) !important;
    text-decoration: underline !important;
}

body[theme="dark"] .rp-prose blockquote {
    border-left-color: var(--primary-ring);
    color: var(--text-sub);
}

/* Research blocks sit on the frame's --surface-2 ground, so their fill is
   --surface to stay one step apart from it. */
body[theme="dark"] .rp-prose [data-research-block="summary"] {
    background: var(--surface);
    border-color: var(--border);
}

body[theme="dark"] .rp-prose [data-research-block="finding"] {
    border-left-color: var(--primary);
    background: var(--primary-weaker);
}

body[theme="dark"] .rp-prose [data-research-block="methodology"] {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text-sub);
}

body[theme="dark"] .rp-prose [data-research-block="conclusion"] {
    border-top-color: var(--border-strong);
}

body[theme="dark"] .rp-prose th,
body[theme="dark"] .rp-prose td {
    border-color: var(--border);
}

body[theme="dark"] .rp-prose th {
    background: var(--surface);
    color: var(--text-muted);
}

body[theme="dark"] .rp-prose img {
    border: 1px solid var(--border);
}

body[theme="dark"] .rp-prose pre,
body[theme="dark"] .rp-prose code {
    font-family: var(--mono);
    background: var(--surface);
    color: var(--text);
}

body[theme="dark"] .rp-prose hr {
    border-top-color: var(--border);
}

body[theme="dark"] .rp-prose mark {
    background: var(--primary-weak);
    color: var(--text);
}

/* custom.css forces Satoshi on every h-tag with !important, so the mono
   section label has to insist. */
body[theme="dark"] h3.rp-citations-title.bt-meta {
    font-family: var(--mono) !important;
    font-weight: 400 !important;
    color: var(--text-muted);
}

body[theme="dark"] .rp-citations-section {
    border-top-color: var(--border);
}

body[theme="dark"] .rp-citation-card {
    border-bottom-color: var(--border);
}

body[theme="dark"] .rp-citation-title {
    color: var(--primary) !important;
}

/* custom.css strips every anchor underline with !important. */
body[theme="dark"] .rp-citation-title:hover {
    text-decoration: underline !important;
}

body[theme="dark"] .rp-citation-snippet {
    color: var(--text-sub);
}

body[theme="dark"] .rp-footer {
    border-top: 1px solid var(--border);
    color: var(--text-muted);
}

/* The footer mark reads as a wordmark, not an accent link. */
body[theme="dark"] .rp-footer-brand {
    color: var(--text) !important;
}

/* ═══════════════════════════════ LIGHT THEME ═══════════════════════════════ */

/* ── assets/css/user.css ── */
@media (max-width: 767px) {
    body[theme="light"] .canvas-mobile-trigger:hover {
        background: rgba(10, 10, 10, 0.05);
    }

    body[theme="light"] .canvas-mobile-sheet::before {
        background-color: #fafafa;
        background-image: linear-gradient(rgba(10, 10, 10, 0.3), rgba(10, 10, 10, 0.3));
    }

    body[theme="light"] .canvas-mobile-sheet {
        background: #fafafa;
        color: rgba(10, 10, 10, 0.88);
    }
}

body[theme="light"] {
    background-color: #fafafa !important;
    color: rgba(10, 10, 10, .85) !important;
}

body[theme="light"] header {
    background-color: #fafafa !important;
    border-bottom: 1px solid rgba(10, 10, 10, 0.06) !important;
}

body[theme="light"] .message-input-container {
    background-color: #ffffff !important;
}

body[theme="light"] .bg-gray {
    background-color: #fafafa !important;
}

body[theme="light"] .ai-interactive-container .message-body,
body[theme="light"] .ai-interactive-container .user-dp,
body[theme="light"] .ai-interactive-container .el-avatar {
    background-color: rgba(127, 0, 255, 0.04) !important;
    color: rgba(10, 10, 10, .85) !important;
}

body[theme="light"] .user-interactive-container .message-body,
body[theme="light"] .user-interactive-container .user-dp,
body[theme="light"] .user-interactive-container .el-avatar,
body[theme="light"] .el-step__icon {
    background-color: rgba(10, 10, 10, 0.03) !important;
    color: rgba(10, 10, 10, .85) !important;
}

body[theme="light"] .el-step__icon {
    color: rgba(10, 10, 10, .7) !important;
}

body[theme="light"] .text-sub-heading {
    color: rgba(10, 10, 10, .9) !important;
}

body[theme="light"] .divider {
    border-bottom: 1px solid rgba(10, 10, 10, 0.06) !important;
}

body[theme="light"] .border-1 {
    border-bottom: 1px solid rgba(10, 10, 10, 0.08) !important;
}

body[theme="light"] .el-collapse-item__header {
    border-bottom: 1px solid rgba(10, 10, 10, 0.06) !important;
}

body[theme="light"] .active-content {
    background-color: rgba(127, 0, 255, 0.04) !important;
}

body[theme="light"] .hexagon-outer {
    background-color: rgba(10, 10, 10, 0.02);
}

body[theme="light"] .list-view-loader-item {
    background-color: rgba(10, 10, 10, 0.03) !important;
    background: rgba(10, 10, 10, 0.03) !important;
}

body[theme="light"] .interaction-shortcut {
    background-color: #fafafa !important;
}

body[theme="light"] .interaction-shortcut .shortcut {
    background-color: rgba(10, 10, 10, 0.03) !important;
}

body[theme="light"] #or::before,
body[theme="light"] #or::after {
    background-color: rgba(10, 10, 10, 0.08) !important;
}

body[theme="light"] .el-popover {
    background-color: #ffffff !important;
    border-color: rgba(10, 10, 10, 0.08) !important;
    color: rgba(10, 10, 10, .85) !important;
}

body[theme="light"] .dc-item {
    border-bottom-color: rgba(10, 10, 10, .06);
}

body[theme="light"] .dc-item-title {
    color: rgba(10, 10, 10, .9);
}

body[theme="light"] .dc-item-desc {
    color: rgba(10, 10, 10, .5);
}

body[theme="light"] .dc-item-count {
    color: #7f00ff;
    background: rgba(127, 0, 255, .08);
}

body[theme="light"] .dc-post-card {
    border-color: rgba(10, 10, 10, .08);
}

body[theme="light"] .dc-post-card:hover {
    background: rgba(127, 0, 255, .04);
    border-color: rgba(127, 0, 255, .25);
}

body[theme="light"] .dc-post-title {
    color: rgba(10, 10, 10, .9);
}

body[theme="light"] .dc-post-snippet {
    color: rgba(10, 10, 10, .55);
}

body[theme="light"] .dc-product-card {
    border-color: rgba(10, 10, 10, .08);
}

body[theme="light"] .dc-product-card:hover {
    background: rgba(127, 0, 255, .04);
    border-color: rgba(127, 0, 255, .25);
}

body[theme="light"] .dc-product-thumb {
    background: rgba(10, 10, 10, .04);
}

body[theme="light"] .dc-product-name {
    color: rgba(10, 10, 10, .9);
}

body[theme="light"] .dc-product-desc {
    color: rgba(10, 10, 10, .55);
}

body[theme="light"] .dc-product-price {
    color: #7f00ff;
}

body[theme="light"] .dc-chip {
    background: rgba(10, 10, 10, .03);
    border-color: rgba(10, 10, 10, .08);
    color: rgba(10, 10, 10, .7);
}

body[theme="light"] .dc-chip:hover {
    background: rgba(127, 0, 255, .06);
    border-color: rgba(127, 0, 255, .25);
    color: #7f00ff;
}

body[theme="light"] .account-dropdown-popover.el-popover {
    background: rgba(255, 253, 249, 0.98);
    border-color: rgba(10, 10, 10, 0.08);
    box-shadow: 0 12px 40px rgba(10, 10, 10, 0.12);
}

body[theme="light"] .chat-list-popover.el-popover {
    background: rgba(255, 253, 249, 0.98);
    border-color: rgba(10, 10, 10, 0.08);
    box-shadow: 0 12px 40px rgba(10, 10, 10, 0.12);
}

body[theme="light"] .drawer-divider {
    background: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .drawer-account-section .divider {
    border-color: rgba(10, 10, 10, 0.07);
}

body[theme="light"] .apps-pagination-btn {
    border-color: rgba(127, 0, 255, 0.28);
    color: #7f00ff;
}

body[theme="light"] .chat-empty-title {
    color: rgba(10, 10, 10, 0.9);
}

body[theme="light"] .chat-empty-subtitle {
    color: rgba(10, 10, 10, 0.5);
}

body[theme="light"] .chat-empty-card {
    background: var(--surface-2);
}

body[theme="light"] .chat-empty-card::after {
    border-color: var(--border-strong);
}

body[theme="light"] .chat-empty-card:hover {
    background: var(--surface);
}

body[theme="light"] .chat-empty-card:hover::after {
    border-color: var(--line);
}

body[theme="light"] .chat-empty-card-icon {
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--border-strong);
}

body[theme="light"] .chat-empty-card-title {
    color: rgba(10, 10, 10, 0.9);
}

body[theme="light"] .chat-empty-card-desc {
    color: rgba(10, 10, 10, 0.5);
}

body[theme="light"] .ssv-overlay {
    background: rgba(10, 10, 10, 0.45);
}

body[theme="light"] .ssv-container {
    background: #ffffff;
    box-shadow: 0 24px 80px rgba(10, 10, 10, 0.15);
}

body[theme="light"] .ssv-header {
    background: #fafafa;
    border-bottom-color: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .ssv-url {
    color: rgba(10, 10, 10, 0.5);
}

body[theme="light"] .ssv-close {
    color: rgba(10, 10, 10, 0.5);
}

body[theme="light"] .ssv-close:hover {
    color: #171717;
    background: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .ssv-loading {
    color: rgba(10, 10, 10, 0.5);
}

body[theme="light"] .ssv-spinner {
    border-color: rgba(10, 10, 10, 0.08);
    border-top-color: #7f00ff;
}

body[theme="light"] .ssv-bubble-inner {
    background: #ffffff;
    border-color: rgba(127, 0, 255, 0.3);
    box-shadow: 0 8px 32px rgba(10, 10, 10, 0.12);
}

body[theme="light"] .ssv-bubble-coords {
    color: rgba(10, 10, 10, 0.4);
}

body[theme="light"] .ssv-bubble-input {
    background: rgba(10, 10, 10, 0.03);
    border-color: rgba(10, 10, 10, 0.1);
    color: #171717;
}

body[theme="light"] .ssv-bubble-input::placeholder {
    color: rgba(10, 10, 10, 0.3);
}

body[theme="light"] .ssv-bubble-btn--click {
    background: rgba(127, 0, 255, 0.08);
    color: #6600cc;
}

body[theme="light"] .ssv-bubble-btn--click:hover {
    background: rgba(127, 0, 255, 0.14);
}

body[theme="light"] .ssv-bubble-btn--close {
    background: rgba(10, 10, 10, 0.04);
    color: rgba(10, 10, 10, 0.5);
}

body[theme="light"] .pc-loading-overlay,
body[theme="light"] .jc-loading-overlay {
    background: rgba(250, 250, 250, 0.7) !important;
    color: rgba(10, 10, 10, .5) !important;
}

body[theme="light"] .pc-block--milestone {
    background: rgba(127, 0, 255, 0.04);
}

body[theme="light"] .pc-block--milestone .pc-block-icon {
    color: #7f00ff;
}

body[theme="light"] .pc-block--milestone .pc-block-title {
    color: #7f00ff;
}

body[theme="light"] .pc-block--task {
    background: rgba(5, 150, 105, 0.03);
}

body[theme="light"] .pc-block--task:hover {
    background: rgba(5, 150, 105, 0.07);
}

body[theme="light"] .pc-block-check {
    color: rgba(10, 10, 10, 0.2);
}

body[theme="light"] .pc-block-check:hover {
    color: #059669;
}

body[theme="light"] .pc-block-due {
    color: rgba(10, 10, 10, 0.4);
    background: rgba(10, 10, 10, 0.04);
}

body[theme="light"] .pc-block--deadline {
    background: rgba(220, 38, 38, 0.03);
}

body[theme="light"] .pc-block--deadline .pc-block-icon {
    color: #dc2626;
}

body[theme="light"] .pc-block--deadline .pc-block-text {
    color: #dc2626;
}

body[theme="light"] .pc-block--in_progress {
    background: rgba(59, 130, 246, 0.04);
}

body[theme="light"] .pc-block--blocked {
    background: rgba(220, 38, 38, 0.04);
}

body[theme="light"] .pc-bubble {
    background: #ffffff !important;
    border: 1px solid rgba(10, 10, 10, 0.08) !important;
    box-shadow: 0 8px 24px rgba(10, 10, 10, 0.1) !important;
    color: #171717 !important;
}

body[theme="light"] .pc-bubble-entity {
    border-bottom: 1px solid rgba(10, 10, 10, 0.06) !important;
}

body[theme="light"] .pc-bubble-entity-meta {
    color: rgba(10, 10, 10, 0.45) !important;
}

body[theme="light"] .pc-bubble-actions button {
    background: rgba(10, 10, 10, 0.04) !important;
    color: rgba(10, 10, 10, 0.65) !important;
}

body[theme="light"] .pc-bubble-actions button:hover {
    background: rgba(127, 0, 255, 0.1) !important;
    color: #7f00ff !important;
}

body[theme="light"] .pc-bubble-loading {
    color: rgba(10, 10, 10, 0.4) !important;
}

body[theme="light"] .pc-root {
    color: rgba(10, 10, 10, .85);
}

body[theme="light"] .pc-topbar {
    border-bottom-color: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .pc-title-input {
    background: rgba(10, 10, 10, 0.03);
    border-color: rgba(10, 10, 10, 0.08);
}

body[theme="light"] .pc-icon-btn:hover {
    background: rgba(10, 10, 10, 0.05);
}

body[theme="light"] .pc-icon-btn.active {
    background: rgba(127, 0, 255, 0.08);
    color: #7f00ff;
}

body[theme="light"] .pc-stat-pill {
    background: rgba(52, 211, 153, 0.08);
    border-color: rgba(52, 211, 153, 0.15);
}

body[theme="light"] .pc-toggle {
    background: rgba(10, 10, 10, 0.04);
}

body[theme="light"] .pc-toggle-btn.active {
    background: rgba(10, 10, 10, 0.08);
}

body[theme="light"] .pc-toolbar {
    border-bottom-color: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .pc-toolbar-sep {
    background: rgba(10, 10, 10, 0.08);
}

body[theme="light"] .pc-toolbar-btn:hover {
    background: rgba(10, 10, 10, 0.05);
}

body[theme="light"] .pc-toolbar-btn.active {
    background: rgba(127, 0, 255, 0.08);
    color: #7f00ff;
}

body[theme="light"] .pc-insert-btn {
    background: rgba(10, 10, 10, 0.03);
    border-color: rgba(10, 10, 10, 0.08);
    color: rgba(10, 10, 10, .6);
}

body[theme="light"] .pc-insert-btn:hover {
    background: rgba(10, 10, 10, 0.06);
    color: rgba(10, 10, 10, .85);
}

body[theme="light"] .pc-paper {
    background: #ffffff;
    border-color: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .pc-paper-title {
    color: rgba(10, 10, 10, .85);
}

body[theme="light"] .pc-preview-inner {
    color: rgba(10, 10, 10, .85);
}

body[theme="light"] .pc-progress-bar {
    background: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .pc-suggestions-col {
    border-left-color: rgba(10, 10, 10, 0.06) !important;
}

body[theme="light"] .pc-sugg-header {
    border-bottom-color: rgba(10, 10, 10, 0.06) !important;
}

body[theme="light"] .pc-sugg-prompt-input {
    background: rgba(10, 10, 10, 0.03) !important;
    border: 1px solid rgba(10, 10, 10, 0.08) !important;
    color: rgba(10, 10, 10, .85) !important;
}

body[theme="light"] .pc-sugg-prompt-btn {
    color: #7f00ff !important;
}

body[theme="light"] .pc-sugg-card {
    border: 1px solid rgba(10, 10, 10, 0.06) !important;
    background: #ffffff !important;
}

body[theme="light"] .pc-sugg-card:hover {
    border-color: rgba(127, 0, 255, 0.3) !important;
    background: rgba(127, 0, 255, 0.04) !important;
}

body[theme="light"] .pc-sugg-loading,
body[theme="light"] .pc-sugg-empty {
    color: rgba(10, 10, 10, .4) !important;
}

body[theme="light"] .pc-epg-chip {
    background: rgba(10, 10, 10, 0.03) !important;
    border: 1px solid rgba(10, 10, 10, 0.08) !important;
    color: rgba(10, 10, 10, .75) !important;
}

body[theme="light"] .pc-epg-chip:hover {
    background: rgba(127, 0, 255, 0.08) !important;
    border-color: rgba(127, 0, 255, 0.25) !important;
    color: #7f00ff !important;
}

body[theme="light"] .pc-epg-neutral {
    border-color: rgba(10, 10, 10, .1) !important;
    color: rgba(10, 10, 10, .6) !important;
}

body[theme="light"] .pc-routine-card {
    color: rgba(10, 10, 10, .65) !important;
    background: rgba(10, 10, 10, .03) !important;
}

body[theme="light"] .pc-sugg-tabs {
    border-bottom: 1px solid rgba(10, 10, 10, .08) !important;
}

body[theme="light"] .pc-sugg-tab {
    color: rgba(10, 10, 10, .4) !important;
    background: none !important;
}

body[theme="light"] .pc-sugg-tab.active {
    background: rgba(10, 10, 10, .06) !important;
    color: rgba(10, 10, 10, .85) !important;
}

body[theme="light"] .pc-sugg-tab--context.active {
    background: rgba(16, 185, 129, .1) !important;
    color: #059669 !important;
}

body[theme="light"] .pc-history-card {
    border: 1px solid rgba(10, 10, 10, .08) !important;
    background: rgba(10, 10, 10, .02) !important;
}

body[theme="light"] .pc-history-label {
    color: rgba(10, 10, 10, .45) !important;
}

body[theme="light"] .pc-history-text {
    color: rgba(10, 10, 10, .85) !important;
}

body[theme="light"] .pc-history-divider {
    border-top: 1px solid rgba(10, 10, 10, .06) !important;
}

body[theme="light"] .acp-drawer .el-drawer {
    background: #fafafa !important;
    color: #171717 !important;
}

body[theme="light"] .jc-bubble {
    background: #ffffff !important;
    border: 1px solid rgba(10, 10, 10, 0.08) !important;
    box-shadow: 0 8px 24px rgba(10, 10, 10, 0.1) !important;
    color: #171717 !important;
}

body[theme="light"] .jc-bubble-entity {
    border-bottom: 1px solid rgba(10, 10, 10, 0.06) !important;
}

body[theme="light"] .jc-bubble-entity-header {
    color: #171717 !important;
}

body[theme="light"] .jc-bubble-entity-meta {
    color: rgba(10, 10, 10, 0.45) !important;
}

body[theme="light"] .jc-bubble-actions button {
    background: rgba(10, 10, 10, 0.04) !important;
    color: rgba(10, 10, 10, 0.65) !important;
}

body[theme="light"] .jc-bubble-actions button:hover {
    background: rgba(127, 0, 255, 0.1) !important;
    color: #7f00ff !important;
}

body[theme="light"] .jc-bubble-loading {
    color: rgba(10, 10, 10, 0.4) !important;
}

body[theme="light"] .jc-root {
    color: rgba(10, 10, 10, .85);
}

body[theme="light"] .jc-topbar {
    border-bottom-color: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .jc-title-input {
    background: rgba(10, 10, 10, 0.03);
    border-color: rgba(10, 10, 10, 0.08);
}

body[theme="light"] .jc-icon-btn:hover {
    background: rgba(10, 10, 10, 0.05);
}

body[theme="light"] .jc-icon-btn.active {
    background: rgba(127, 0, 255, 0.08);
    color: #7f00ff;
}

body[theme="light"] .jc-stat-pill {
    background: rgba(10, 10, 10, 0.03);
    border-color: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .jc-toggle {
    background: rgba(10, 10, 10, 0.04);
}

body[theme="light"] .jc-toggle-btn.active {
    background: rgba(10, 10, 10, 0.08);
}

body[theme="light"] .jc-toolbar {
    border-bottom-color: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .jc-toolbar-sep {
    background: rgba(10, 10, 10, 0.08);
}

body[theme="light"] .jc-toolbar-btn:hover {
    background: rgba(10, 10, 10, 0.05);
}

body[theme="light"] .jc-toolbar-btn.active {
    background: rgba(127, 0, 255, 0.08);
    color: #7f00ff;
}

body[theme="light"] .jc-topbar-divider {
    background: rgba(10, 10, 10, 0.08);
}

body[theme="light"] .jc-topbar-share-btn {
    background: rgba(10, 10, 10, 0.03);
    border-color: rgba(10, 10, 10, 0.08);
    color: rgba(10, 10, 10, .6);
}

body[theme="light"] .jc-topbar-share-btn:hover {
    background: rgba(10, 10, 10, 0.06);
    color: rgba(10, 10, 10, .85);
}

body[theme="light"] .jc-paper {
    background: #ffffff;
    border-color: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .jc-paper-title {
    color: rgba(10, 10, 10, .85);
}

body[theme="light"] .jc-preview-inner {
    color: rgba(10, 10, 10, .85);
}

body[theme="light"] .jc-suggestions-col {
    border-left-color: rgba(10, 10, 10, 0.06) !important;
}

body[theme="light"] .jc-sugg-header {
    border-bottom-color: rgba(10, 10, 10, 0.06) !important;
}

body[theme="light"] .jc-sugg-tabs {
    border-bottom: 1px solid rgba(10, 10, 10, .08) !important;
}

body[theme="light"] .jc-sugg-tab {
    color: rgba(10, 10, 10, .4) !important;
    background: none !important;
}

body[theme="light"] .jc-sugg-tab.active {
    background: rgba(10, 10, 10, .06) !important;
    color: rgba(10, 10, 10, .85) !important;
}

body[theme="light"] .jc-sugg-tab--context.active {
    background: rgba(16, 185, 129, .1) !important;
    color: #059669 !important;
}

body[theme="light"] .jc-sugg-prompt-input {
    background: rgba(10, 10, 10, 0.03) !important;
    border-color: rgba(10, 10, 10, 0.08) !important;
    color: rgba(10, 10, 10, .85) !important;
}

body[theme="light"] .jc-sugg-prompt-btn {
    color: #7f00ff !important;
}

body[theme="light"] .jc-sugg-card {
    border-color: rgba(10, 10, 10, 0.06) !important;
    background: #ffffff !important;
}

body[theme="light"] .jc-sugg-card:hover {
    border-color: rgba(127, 0, 255, 0.3) !important;
    background: rgba(127, 0, 255, 0.04) !important;
}

body[theme="light"] .jc-sugg-loading,
body[theme="light"] .jc-sugg-empty {
    color: rgba(10, 10, 10, .4) !important;
}

body[theme="light"] .jc-epg-chip {
    background: rgba(10, 10, 10, 0.03) !important;
    border-color: rgba(10, 10, 10, 0.08) !important;
    color: rgba(10, 10, 10, .75) !important;
}

body[theme="light"] .jc-epg-chip:hover {
    background: rgba(127, 0, 255, 0.08) !important;
    border-color: rgba(127, 0, 255, 0.25) !important;
    color: #7f00ff !important;
}

body[theme="light"] .jc-epg-like {
    color: #059669 !important;
    border-color: rgba(5, 150, 105, 0.25) !important;
}

body[theme="light"] .jc-epg-dislike {
    color: #dc2626 !important;
    border-color: rgba(220, 38, 38, 0.25) !important;
}

body[theme="light"] .jc-epg-allergy {
    color: #dc2626 !important;
    border-color: rgba(220, 38, 38, 0.4) !important;
    background: rgba(220, 38, 38, 0.05) !important;
}

body[theme="light"] .jc-epg-intolerance {
    color: #d97706 !important;
    border-color: rgba(217, 119, 6, 0.25) !important;
}

body[theme="light"] .jc-epg-neutral {
    color: rgba(10, 10, 10, .45) !important;
    border-color: rgba(10, 10, 10, 0.08) !important;
}

body[theme="light"] .wfc-commerce-cta {
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.05), rgba(127, 0, 255, 0.05));
    border-color: rgba(248, 113, 113, 0.2);
}

body[theme="light"] .wfc-commerce-cta:hover {
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.1), rgba(127, 0, 255, 0.1));
}

body[theme="light"] .schema-preview {
    border-color: rgba(14, 165, 233, 0.25);
    background: rgba(14, 165, 233, 0.04);
}

body[theme="light"] .schema-preview-header {
    border-bottom-color: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .schema-preview-status--cancelled {
    color: rgba(10, 10, 10, 0.5);
    background: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .schema-preview-code {
    background: rgba(10, 10, 10, 0.04);
}

body[theme="light"] .schema-preview-pill {
    background: rgba(14, 165, 233, 0.1);
    color: #0369a1;
}

body[theme="light"] .schema-preview-btn--ghost {
    background: rgba(10, 10, 10, 0.05);
    color: rgba(10, 10, 10, 0.75);
}

body[theme="light"] .schema-preview-btn--ghost:hover:not(:disabled) {
    background: rgba(10, 10, 10, 0.08);
}

body[theme="light"] .schema-preview-footer-msg--cancelled {
    color: rgba(10, 10, 10, 0.5);
}

body[theme="light"] .pctv-wrap {
    /*
    border-color: rgba(10, 10, 10, 0.06);
    background: rgba(10, 10, 10, 0.02);
    */
    background: rgba(124, 58, 237, .05);
    border: 1px solid rgba(167, 139, 250, .2);
}

body[theme="light"] .pctv-wrap:hover {
    border-color: rgba(127, 0, 255, 0.25);
    background: rgba(127, 0, 255, 0.03);
}

body[theme="light"] .pctv-progress-bar {
    background: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .action-detail-drawer {
    background: #fafafa !important;
    color: rgba(10, 10, 10, .85) !important;
}

body[theme="light"] .action-detail-drawer .el-drawer__body {
    background: #fafafa !important;
}

body[theme="light"] .action-detail-icon {
    background: rgba(127, 0, 255, 0.04);
}

body[theme="light"] .action-detail-title {
    color: rgba(10, 10, 10, .85);
}

body[theme="light"] .action-detail-desc {
    color: rgba(10, 10, 10, .5);
}

body[theme="light"] .action-detail-section-label {
    color: rgba(10, 10, 10, .4);
}

body[theme="light"] .action-detail-tag {
    background: rgba(10, 10, 10, 0.03) !important;
    border-color: rgba(10, 10, 10, 0.06) !important;
    color: rgba(10, 10, 10, .85) !important;
}

body[theme="light"] .action-detail-tag:hover {
    border-color: rgba(127, 0, 255, 0.3) !important;
    background: rgba(127, 0, 255, 0.04) !important;
    color: rgba(10, 10, 10, .85) !important;
}

body[theme="light"] .action-detail-go {
    border: 1px solid rgba(10, 10, 10, 0.06);
    background: rgba(10, 10, 10, 0.03);
    color: rgba(10, 10, 10, .85);
}

body[theme="light"] .action-detail-go:hover {
    border-color: rgba(127, 0, 255, 0.3);
    background: rgba(127, 0, 255, 0.04);
}

body[theme="light"] .logic-preview {
    border-color: rgba(5, 150, 105, 0.25);
    background: rgba(5, 150, 105, 0.04);
}

body[theme="light"] .logic-preview-header {
    border-bottom-color: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .logic-preview-status--cancelled {
    color: rgba(10, 10, 10, 0.5);
    background: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .logic-preview-code {
    background: rgba(10, 10, 10, 0.04);
}

body[theme="light"] .logic-preview-pill {
    background: rgba(5, 150, 105, 0.1);
    color: #047857;
}

body[theme="light"] .logic-preview-btn--ghost {
    background: rgba(10, 10, 10, 0.05);
    color: rgba(10, 10, 10, 0.75);
}

body[theme="light"] .logic-preview-btn--ghost:hover:not(:disabled) {
    background: rgba(10, 10, 10, 0.08);
}

body[theme="light"] .logic-preview-footer-msg--cancelled {
    color: rgba(10, 10, 10, 0.5);
}

body[theme="light"] .trigger-preview {
    border-color: rgba(127, 0, 255, 0.25);
    background: rgba(127, 0, 255, 0.04);
}

body[theme="light"] .trigger-preview-header {
    border-bottom-color: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .trigger-preview-status--cancelled {
    color: rgba(10, 10, 10, 0.5);
    background: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .trigger-preview-code {
    background: rgba(10, 10, 10, 0.05);
}

body[theme="light"] .trigger-preview-filter-block,
body[theme="light"] .trigger-preview-action-block {
    background: rgba(10, 10, 10, 0.04);
}

body[theme="light"] .trigger-preview-footer {
    border-top-color: rgba(10, 10, 10, 0.06);
    background: rgba(10, 10, 10, 0.015);
}

body[theme="light"] .trigger-preview-btn {
    border-color: rgba(10, 10, 10, 0.12);
}

body[theme="light"] .trigger-preview-btn--ghost:hover {
    background: rgba(10, 10, 10, 0.04);
}

body[theme="light"] .trigger-preview-footer-msg {
    border-top-color: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .trigger-preview-footer-msg--cancelled {
    color: rgba(10, 10, 10, 0.5);
}

body[theme="light"] .trigger-preview-link {
    color: #7f00ff;
}

body[theme="light"] .chat-palette-inner {
    background: #ffffff;
    border-color: #e5e5e5;
    box-shadow: 0 8px 24px rgba(10, 10, 10, 0.08);
}

body[theme="light"] .chat-md-preview .md-pre,
body[theme="light"] .chat-md-preview .md-code {
    background: rgba(10, 10, 10, 0.05);
}

body[theme="light"] .msg-user-bubble {
    background: rgba(10, 10, 10, 0.05);
}

body[theme="light"] .ai-msg-tool-btn {
    color: rgba(10, 10, 10, 0.45);
}

body[theme="light"] .ai-msg-tool-btn:hover {
    background: rgba(10, 10, 10, 0.06);
    color: rgba(10, 10, 10, 0.85);
}

body[theme="light"] .ai-msg-tool-btn.active {
    color: #7f00ff;
    background: rgba(127, 0, 255, 0.1);
}

body[theme="light"] .follow-up-section {
    border-top-color: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .follow-up-label {
    color: rgba(10, 10, 10, 0.5);
}

body[theme="light"] .follow-up-chip {
    border-color: rgba(10, 10, 10, 0.08);
    color: rgba(10, 10, 10, 0.75);
}

body[theme="light"] .follow-up-chip:hover {
    background: rgba(127, 0, 255, 0.04);
    border-color: rgba(127, 0, 255, 0.25);
    color: rgba(10, 10, 10, 0.95);
}

body[theme="light"] .follow-up-chip:hover i {
    color: #7f00ff;
}

body[theme="light"] .msg-file-attachment {
    background: rgba(37, 99, 235, 0.06);
    border-color: rgba(37, 99, 235, 0.15);
}

body[theme="light"] .wf-tag-card {
    border-color: rgba(10, 10, 10, 0.06);
    background: rgba(10, 10, 10, 0.02);
}

body[theme="light"] .wf-tag-card:hover {
    border-color: rgba(220, 38, 38, 0.25);
    background: rgba(220, 38, 38, 0.03);
}

body[theme="light"] .msg-table-wrap {
    border-color: rgba(10, 10, 10, 0.1);
}

body[theme="light"] .msg-table th {
    background: rgba(10, 10, 10, 0.03);
    opacity: 1;
    color: rgba(10, 10, 10, 0.6);
}

body[theme="light"] .msg-table th,
body[theme="light"] .msg-table td {
    border-bottom-color: rgba(10, 10, 10, 0.08);
}

body[theme="light"] .msg-table td {
    color: rgba(10, 10, 10, 0.8);
}

body[theme="light"] .msg-inline-code {
    background: rgba(10, 10, 10, 0.05);
    border-color: rgba(10, 10, 10, 0.1);
    color: #171717;
}

body[theme="light"] .msg-hr {
    border-top-color: rgba(10, 10, 10, 0.1);
}

body[theme="light"] .report-reason-chip {
    border-color: #e5e5e5;
}

body[theme="light"] .epg-provenance-chip {
    background: rgba(185, 140, 255, 0.06);
    border-color: rgba(185, 140, 255, 0.22);
    color: #333;
}

body[theme="light"] .chat-account-status {
    border-top-color: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .chat-file-pill {
    background: rgba(10, 10, 10, 0.04);
    border-color: rgba(10, 10, 10, 0.08);
}

body[theme="light"] .chat-trigger-edit-pill {
    background: rgba(127, 0, 255, 0.06);
    border-color: rgba(127, 0, 255, 0.28);
    color: #7f00ff;
}

body[theme="light"] .chat-database-edit-pill {
    background: rgba(14, 165, 233, 0.06);
    border-color: rgba(14, 165, 233, 0.28);
    color: #0369a1;
}

body[theme="light"] .chat-logic-edit-pill {
    background: rgba(5, 150, 105, 0.06);
    border-color: rgba(5, 150, 105, 0.28);
    color: #047857;
}

body[theme="light"] .wf-approval-card {
    border-color: rgba(220, 38, 38, 0.15);
    background: rgba(220, 38, 38, 0.02);
}

body[theme="light"] .chat-history-search-toggle {
    border-color: #e5e5e5;
}

body[theme="light"] .editor-placeholder::before {
    color: rgba(10, 10, 10, .2);
}

body[theme="light"] .slash-menu {
    background: #ffffff;
    border-color: rgba(10, 10, 10, 0.08);
    box-shadow: 0 8px 30px rgba(10, 10, 10, 0.12);
}

body[theme="light"] .slash-menu-item:hover,
body[theme="light"] .slash-menu-item--active {
    background: rgba(10, 10, 10, 0.04);
}

body[theme="light"] .slash-menu-icon {
    background: rgba(10, 10, 10, 0.04);
    color: rgba(10, 10, 10, 0.5);
}

body[theme="light"] .slash-menu-item[data-ai="true"] .slash-menu-icon {
    background: rgba(127, 0, 255, 0.08);
    color: #7f00ff;
}

body[theme="light"] .slash-menu-label {
    color: rgba(10, 10, 10, .85);
}

body[theme="light"] .slash-menu-desc {
    color: rgba(10, 10, 10, .4);
}

body[theme="light"] .ProseMirror th,
body[theme="light"] .ProseMirror td,
body[theme="light"] .pc-prose th,
body[theme="light"] .pc-prose td,
body[theme="light"] .jc-preview-inner th,
body[theme="light"] .jc-preview-inner td {
    border-color: rgba(10, 10, 10, 0.08);
}

body[theme="light"] .ProseMirror th,
body[theme="light"] .pc-prose th,
body[theme="light"] .jc-preview-inner th {
    background: rgba(10, 10, 10, 0.03);
}

body[theme="light"] .ProseMirror .selectedCell {
    background: rgba(127, 0, 255, 0.08);
}

body[theme="light"] .editor-upload-progress {
    background: rgba(10, 10, 10, 0.04);
}

body[theme="light"] .ProseMirror a {
    color: #7f00ff;
}

body[theme="light"] .ProseMirror pre {
    background: rgba(10, 10, 10, 0.03);
}

body[theme="light"] .ProseMirror code {
    background: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .ProseMirror hr {
    border-top-color: rgba(10, 10, 10, 0.08);
}

body[theme="light"] .editor-mention {
    background: rgba(127, 0, 255, 0.1);
    color: #7f00ff;
}

body[theme="light"] .mention-menu {
    background: #ffffff;
    border-color: rgba(10, 10, 10, 0.08);
    box-shadow: 0 8px 24px rgba(10, 10, 10, 0.1);
}

body[theme="light"] .mention-menu-item {
    color: rgba(10, 10, 10, .8);
}

body[theme="light"] .mention-menu-item:hover,
body[theme="light"] .mention-menu-item--active {
    background: rgba(10, 10, 10, 0.04);
}

body[theme="light"] .editor-comment-mark {
    background: rgba(245, 158, 11, 0.12);
    border-bottom-color: rgba(245, 158, 11, 0.3);
}

body[theme="light"] .editor-eureka-mark[data-eureka-type="eureka"] {
    background: rgba(217, 119, 6, 0.1);
    border-bottom-color: rgba(217, 119, 6, 0.4);
}

body[theme="light"] .editor-eureka-mark[data-eureka-type="correlation"] {
    background: rgba(37, 99, 235, 0.1);
    border-bottom-color: rgba(37, 99, 235, 0.3);
}

body[theme="light"] .editor-eureka-mark[data-eureka-type="supporting"] {
    background: rgba(5, 150, 105, 0.1);
    border-bottom-color: rgba(5, 150, 105, 0.3);
}

body[theme="light"] .editor-eureka-mark[data-eureka-type="contradicting"] {
    background: rgba(220, 38, 38, 0.1);
    border-bottom-color: rgba(220, 38, 38, 0.3);
}

body[theme="light"] .editor-eureka-mark:hover {
    box-shadow: 0 0 12px rgba(217, 119, 6, 0.15);
}

body[theme="light"] .pc-comment-popover,
body[theme="light"] .jc-comment-popover {
    background: #ffffff;
    border-color: rgba(10, 10, 10, 0.08);
    box-shadow: 0 8px 24px rgba(10, 10, 10, 0.1);
}

body[theme="light"] .pc-comment-popover-header {
    border-bottom-color: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .pc-comment-text,
body[theme="light"] .jc-comment-text {
    color: rgba(10, 10, 10, .8);
}

body[theme="light"] .pc-comment-author,
body[theme="light"] .jc-comment-author {
    color: #7f00ff;
}

body[theme="light"] .pc-comment-input,
body[theme="light"] .jc-comment-input {
    background: rgba(10, 10, 10, 0.03);
    border-color: rgba(10, 10, 10, 0.08);
}

body[theme="light"] .editor-help-tip {
    color: rgba(10, 10, 10, .6);
}

body[theme="light"] .editor-help-key {
    background: rgba(10, 10, 10, 0.05);
    color: rgba(10, 10, 10, .8);
}

body[theme="light"] .editor-collab-avatar {
    border-color: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .rc-node-summary {
    background: rgba(37, 99, 235, 0.04);
    border-color: rgba(37, 99, 235, 0.12);
}

body[theme="light"] .rc-node-finding {
    border-left-color: #2563eb;
    background: rgba(37, 99, 235, 0.03);
}

body[theme="light"] .rc-node-methodology {
    background: rgba(10, 10, 10, 0.02);
    border-color: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .rc-node-conclusion {
    border-top-color: rgba(37, 99, 235, 0.15);
}

body[theme="light"] .rc-node-citation-block {
    background: rgba(37, 99, 235, 0.03);
}

body[theme="light"] .rc-node-citation-block::before {
    background: rgba(37, 99, 235, 0.1);
    color: #2563eb;
}

body[theme="light"] .rc-citation-ref {
    background: rgba(37, 99, 235, 0.1);
    color: #2563eb;
}

body[theme="light"] .rc-citation-ref:hover {
    background: rgba(37, 99, 235, 0.2);
}

body[theme="light"] .account-dropdown-trigger:hover,
body[theme="light"] .account-dropdown-trigger--open {
    background: rgba(10, 10, 10, 0.05);
}

body[theme="light"] .account-dropdown-dot {
    border-color: #ffffff;
}

body[theme="light"] .account-dropdown-header-name,
body[theme="light"] .account-dropdown-header-email {
    color: #171717;
}

body[theme="light"] .account-dropdown-divider {
    background: rgba(10, 10, 10, 0.07);
}

body[theme="light"] .account-dropdown-item {
    color: #404040;
}

body[theme="light"] .account-dropdown-item:hover {
    background: rgba(127, 0, 255, 0.08);
    color: #171717;
}

body[theme="light"] .account-dropdown-item--danger {
    color: #b3402f;
}

body[theme="light"] .account-dropdown-item--danger:hover {
    background: rgba(179, 64, 47, 0.10);
    color: #b3402f;
}

body[theme="light"] .account-dropdown-item--danger:hover i {
    color: #b3402f;
}

body[theme="light"] .account-dropdown-item--invite {
    color: #9a6a1e;
    background: rgba(154, 106, 30, 0.07);
}

body[theme="light"] .account-dropdown-item--invite:hover {
    background: rgba(154, 106, 30, 0.14);
    color: #9a6a1e;
}

body[theme="light"] .account-dropdown-item--invite i {
    color: #9a6a1e;
}

body[theme="light"] .account-dropdown-pill {
    background: rgba(154, 106, 30, 0.16);
    color: #9a6a1e;
}

body[theme="light"] .chat-list-new-btn {
    color: rgba(10, 10, 10, 0.5);
}

body[theme="light"] .chat-list-new-btn:hover {
    background: rgba(127, 0, 255, 0.08);
    color: #7f00ff;
}

body[theme="light"] .chat-list-search {
    background: rgba(10, 10, 10, 0.03);
    border-color: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .chat-list-search-input::placeholder {
    color: rgba(10, 10, 10, 0.3);
}

body[theme="light"] .chat-list-item {
    color: rgba(10, 10, 10, 0.65);
}

body[theme="light"] .chat-list-item:hover {
    background: rgba(10, 10, 10, 0.05);
    color: rgba(10, 10, 10, 0.95);
}

body[theme="light"] .chat-list-item--active {
    background: rgba(127, 0, 255, 0.08);
    color: #7f00ff;
}

body[theme="light"] .chat-list-item-menu-btn {
    color: rgba(10, 10, 10, 0.4);
}

body[theme="light"] .chat-list-item-menu-btn:hover {
    background: rgba(10, 10, 10, 0.06);
    color: rgba(10, 10, 10, 0.9);
}

body[theme="light"] .chat-list-popover-item {
    color: #404040;
}

body[theme="light"] .chat-list-popover-item:hover {
    background: rgba(127, 0, 255, 0.08);
    color: #171717;
}

body[theme="light"] .topbar-cart {
    color: rgba(10, 10, 10, 0.65);
}

body[theme="light"] .topbar-cart:hover {
    background: rgba(10, 10, 10, 0.05);
    color: rgba(10, 10, 10, 0.95);
}

body[theme="light"] .topbar-tab,
body[theme="light"] .fy-tab {
    color: rgba(10, 10, 10, 0.5);
}

body[theme="light"] .topbar-tab:hover,
body[theme="light"] .fy-tab:hover {
    color: rgba(10, 10, 10, 0.85);
}

body[theme="light"] .topbar-tab-active,
body[theme="light"] .fy-tab-active {
    color: #171717;
}

body[theme="light"] .topbar-tab-active::after,
body[theme="light"] .fy-tab-active::after {
    background: #7f00ff;
}

body[theme="light"] .topbar-greeting {
    color: #000;
}

body[theme="light"] {
    --shell-bg: #fafafa;
    --shell-surface: #f5f5f5;
    --shell-border: #e5e5e5;
    --shell-hover: rgba(10, 10, 10, 0.04);
    --shell-hover-accent: rgba(127, 0, 255, 0.08);
    --shell-text: #171717;
    --shell-text-sub: rgba(10, 10, 10, 0.55);
}

body[theme="light"] .app-canvas-drawer .el-drawer {
    background: #fafafa !important;
    color: #171717 !important;
}

body[theme="light"] .el-drawer.pc-task-drawer {
    background: #fafafa !important;
    color: rgba(10, 10, 10, .85) !important;
}

body[theme="light"] .pc-wf-step-connector {
    background: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .pc-wf-status-chip {
    border-color: rgba(10, 10, 10, 0.08);
    color: rgba(10, 10, 10, 0.4);
}

body[theme="light"] .pc-wf-status-chip:hover {
    border-color: rgba(10, 10, 10, 0.2);
    color: rgba(10, 10, 10, 0.7);
}

body[theme="light"] .pc-wf-status-chip--active {
    background: rgba(10, 10, 10, 0.03);
}

body[theme="light"] .pc-task-config-section {
    border-color: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .pc-task-config-footer {
    border-top-color: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .el-drawer.pc-task-drawer .el-input__inner {
    background-color: rgba(10, 10, 10, 0.03) !important;
    border-color: rgba(10, 10, 10, 0.08) !important;
    color: rgba(10, 10, 10, .85) !important;
}

body[theme="light"] .pc-task-due {
    background: rgba(10, 10, 10, 0.04);
    color: rgba(10, 10, 10, 0.4);
}

body[theme="light"] .pc-prose [data-plan-block="milestone"] {
    background: rgba(127, 0, 255, 0.04);
    color: #7f00ff;
}

body[theme="light"] .pc-prose [data-plan-block="task"] {
    background: rgba(5, 150, 105, 0.04);
    color: rgba(10, 10, 10, .85);
}

body[theme="light"] .pc-task-checkbox {
    color: rgba(10, 10, 10, 0.2);
}

body[theme="light"] .pc-task-checkbox:hover {
    color: #059669;
}

body[theme="light"] .pc-task-config-btn {
    color: rgba(10, 10, 10, 0.1);
}

body[theme="light"] .pc-task-config-btn:hover {
    color: rgba(10, 10, 10, 0.5);
}

body[theme="light"] [data-plan-block="task"]:hover .pc-task-config-btn {
    color: rgba(10, 10, 10, 0.2);
}

body[theme="light"] .pc-prose [data-plan-block="task"]:hover {
    background: rgba(5, 150, 105, 0.08);
}

body[theme="light"] .pc-prose [data-plan-block="task"][data-status="in_progress"] {
    background: rgba(59, 130, 246, 0.04);
}

body[theme="light"] .pc-prose [data-plan-block="task"][data-status="blocked"] {
    background: rgba(220, 38, 38, 0.04);
}

body[theme="light"] .pc-prose [data-plan-block="deadline"] {
    background: rgba(220, 38, 38, 0.04);
    color: #dc2626;
}

body[theme="light"] .pc-bubble-links {
    border-top-color: rgba(10, 10, 10, 0.06) !important;
}

body[theme="light"] .pc-bubble-link-item:hover {
    background: rgba(10, 10, 10, 0.04) !important;
}

body[theme="dark"] .rc-bubble,
body[theme="dark"] .rc-bubble-entity,
body[theme="dark"] .rc-bubble-entity-meta,
body[theme="dark"] .rc-bubble-actions button,
body[theme="dark"] .rc-bubble-actions button:hover,
body[theme="dark"] .rc-bubble-loading,
body[theme="light"] .rc-bubble {
    background: #ffffff;
    border: 1px solid #e5e5e5;
    box-shadow: 0 8px 24px rgba(10, 10, 10, 0.1);
    color: #171717;
}

body[theme="light"] .rc-bubble-entity {
    border-bottom: 1px solid #f5f5f5;
}

body[theme="light"] .rc-bubble-entity-header {
    color: #171717;
}

body[theme="light"] .rc-bubble-entity-meta {
    color: rgba(10, 10, 10, 0.45);
}

body[theme="light"] .rc-bubble-actions button {
    background: rgba(10, 10, 10, 0.04);
    color: rgba(10, 10, 10, 0.65);
}

body[theme="light"] .rc-bubble-actions button:hover {
    background: rgba(37, 99, 235, 0.1);
    color: #2563eb;
}

body[theme="light"] .rc-bubble-loading {
    color: rgba(10, 10, 10, 0.4);
}

body[theme="light"] .el-drawer.rc-sim-drawer {
    background: #fafafa !important;
    color: rgba(10, 10, 10, .85) !important;
}

body[theme="light"] .rc-sim-header {
    border-bottom-color: rgba(10, 10, 10, .06);
}

body[theme="light"] .rc-sim-refine {
    border-top-color: rgba(10, 10, 10, .06);
}

body[theme="light"] .rc-sim-input {
    background: rgba(10, 10, 10, .03);
    border-color: rgba(10, 10, 10, .08);
    color: #171717;
}

body[theme="light"] .rc-eureka-popover {
    background: #ffffff;
    border-color: rgba(217, 119, 6, 0.2);
    box-shadow: 0 8px 24px rgba(10, 10, 10, 0.1);
    color: #171717;
}

body[theme="light"] .rc-eureka-accept {
    background: rgba(217, 119, 6, 0.1);
    border-color: rgba(217, 119, 6, 0.25);
    color: #d97706;
}

body[theme="light"] .rc-root {
    color: rgba(10, 10, 10, .85);
}

body[theme="light"] .rc-topbar {
    border-bottom-color: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .rc-title-input {
    background: rgba(10, 10, 10, 0.03);
    border-color: rgba(10, 10, 10, 0.08);
}

body[theme="light"] .rc-icon-btn:hover {
    background: rgba(10, 10, 10, 0.05);
}

body[theme="light"] .rc-icon-btn.active {
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
}

body[theme="light"] .rc-stat-pill {
    background: rgba(10, 10, 10, 0.03);
    border-color: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .rc-toggle {
    background: rgba(10, 10, 10, 0.04);
}

body[theme="light"] .rc-toggle-btn.active {
    background: rgba(10, 10, 10, 0.08);
}

body[theme="light"] .rc-toolbar {
    border-bottom-color: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .rc-toolbar-sep {
    background: rgba(10, 10, 10, 0.08);
}

body[theme="light"] .rc-toolbar-btn:hover {
    background: rgba(10, 10, 10, 0.05);
}

body[theme="light"] .rc-toolbar-btn.active {
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
}

body[theme="light"] .rc-toolbar-insert {
    color: #2563eb;
}

body[theme="light"] .rc-toolbar-insert:hover {
    background: rgba(37, 99, 235, 0.08);
}

body[theme="light"] .rc-topbar-divider {
    background: rgba(10, 10, 10, 0.08);
}

body[theme="light"] .rc-similar-btn {
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.25);
    color: #2563eb;
}

body[theme="light"] .rc-similar-btn:hover:not(:disabled) {
    background: rgba(37, 99, 235, 0.15);
    border-color: rgba(37, 99, 235, 0.4);
}

body[theme="light"] .rc-similar-panel {
    background: rgba(37, 99, 235, 0.02);
    border-bottom-color: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .rc-similar-header {
    color: #2563eb;
}

body[theme="light"] .rc-similar-card {
    background: #ffffff;
    border-color: rgba(10, 10, 10, 0.08);
}

body[theme="light"] .rc-similar-link {
    color: #2563eb;
}

body[theme="light"] .rc-paper {
    background: #ffffff;
    border-color: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .rc-paper-title {
    color: rgba(10, 10, 10, .85);
}

body[theme="light"] .rc-preview-inner {
    color: rgba(10, 10, 10, .85);
}

body[theme="light"] .rc-suggestions-col {
    border-left-color: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .rc-sugg-header {
    border-bottom-color: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .rc-sugg-card {
    border-color: rgba(10, 10, 10, 0.06);
    background: #ffffff;
}

body[theme="light"] .rc-sugg-card:hover {
    border-color: rgba(37, 99, 235, 0.3);
    background: rgba(37, 99, 235, 0.04);
}

body[theme="light"] .rc-source-card {
    background: #ffffff;
    border-color: rgba(10, 10, 10, 0.08);
}

body[theme="light"] .rc-source-card:hover {
    border-color: rgba(37, 99, 235, 0.25);
}

body[theme="light"] .rc-source-link {
    color: #2563eb;
}

body[theme="light"] .rc-quality-high {
    background: rgba(5, 150, 105, 0.1);
    color: #059669;
}

body[theme="light"] .rc-quality-medium {
    background: rgba(217, 119, 6, 0.1);
    color: #d97706;
}

body[theme="light"] .rc-quality-low {
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
}

body[theme="light"] .rc-epg-chip {
    background: rgba(10, 10, 10, 0.03);
    border-color: rgba(10, 10, 10, 0.08);
    color: rgba(10, 10, 10, .75);
}

body[theme="light"] .rc-epg-chip:hover {
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.25);
    color: #2563eb;
}

body[theme="light"] .rc-epg-like {
    color: #059669;
    border-color: rgba(5, 150, 105, 0.25);
}

body[theme="light"] .rc-epg-dislike {
    color: #dc2626;
    border-color: rgba(220, 38, 38, 0.25);
}

body[theme="light"] .rc-epg-allergy {
    color: #dc2626;
    border-color: rgba(220, 38, 38, 0.4);
    background: rgba(220, 38, 38, 0.05);
}

body[theme="light"] .rc-epg-intolerance {
    color: #d97706;
    border-color: rgba(217, 119, 6, 0.25);
}

body[theme="light"] .rc-epg-neutral {
    color: rgba(10, 10, 10, .45);
    border-color: rgba(10, 10, 10, 0.08);
}

body[theme="light"] .rc-commerce-cta {
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.05), rgba(37, 99, 235, 0.05));
    border-color: rgba(248, 113, 113, 0.2);
}

body[theme="light"] .rc-commerce-cta:hover {
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.1), rgba(37, 99, 235, 0.1));
}

body[theme="light"] .rc-bubble-links {
    border-top-color: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .rc-bubble-link-item:hover {
    background: rgba(10, 10, 10, 0.04);
}

body[theme="light"] .app-canvas-v3-drawer .el-drawer {
    background: #ffffff !important;
    color: rgba(10, 10, 10, .85) !important;
}

body[theme="light"] .v3-page-bind-panel {
    border-bottom-color: rgba(10, 10, 10, 0.04);
    background: rgba(14, 165, 233, 0.04);
}

body[theme="light"] .v3-page-bind-panel code {
    background: rgba(14, 165, 233, 0.12);
    color: #0369a1;
}

body[theme="light"] .v3-repeater-block summary,
body[theme="light"] .v3-bind-block summary {
    color: #0369a1;
}

body[theme="light"] .v3-logic-block summary {
    color: #047857;
}

body[theme="light"] .v3-logic-describe {
    background: rgba(5, 150, 105, 0.06);
    border-color: rgba(5, 150, 105, 0.32);
    color: #047857;
}

body[theme="light"] .v3-root {
    background: #ffffff;
    color: rgba(10, 10, 10, 0.85);
}

body[theme="light"] .v3-bar {
    background: #ffffff;
    border-bottom-color: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .v3-icon-btn {
    color: rgba(10, 10, 10, 0.7);
}

body[theme="light"] .v3-icon-btn:hover {
    background: rgba(10, 10, 10, 0.05);
}

body[theme="light"] .v3-icon-btn.active {
    background: rgba(127, 0, 255, 0.08);
    color: #7f00ff;
}

body[theme="light"] .v3-title {
    color: rgba(10, 10, 10, 0.85);
}

body[theme="light"] .v3-title:hover {
    background: rgba(10, 10, 10, 0.04);
}

body[theme="light"] .v3-title-input {
    background: rgba(10, 10, 10, 0.03);
    border-color: rgba(10, 10, 10, 0.08);
    color: rgba(10, 10, 10, 0.85);
}

body[theme="light"] .v3-bar-btn {
    background: rgba(10, 10, 10, 0.03);
    border-color: rgba(10, 10, 10, 0.08);
    color: rgba(10, 10, 10, 0.7);
}

body[theme="light"] .v3-bar-btn:hover:not(:disabled) {
    background: rgba(10, 10, 10, 0.06);
    border-color: rgba(10, 10, 10, 0.12);
    color: rgba(10, 10, 10, 0.85);
}

body[theme="light"] .v3-bar-divider {
    background: rgba(10, 10, 10, 0.08);
}

body[theme="light"] .v3-pages-frame {
    background: #fafafa;
    border-left-color: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .v3-pages-header {
    color: rgba(10, 10, 10, 0.5);
    border-bottom-color: rgba(10, 10, 10, 0.05);
}

body[theme="light"] .v3-pages-count {
    background: rgba(10, 10, 10, 0.05);
}

body[theme="light"] .v3-page-row {
    color: rgba(10, 10, 10, 0.85);
}

body[theme="light"] .v3-page-row:hover {
    background: rgba(10, 10, 10, 0.04);
}

body[theme="light"] .v3-page-row.active {
    background: rgba(127, 0, 255, 0.08);
    border-color: rgba(127, 0, 255, 0.25);
}

body[theme="light"] .v3-page-name-input {
    background: rgba(10, 10, 10, 0.03);
    border-color: rgba(127, 0, 255, 0.4);
    color: rgba(10, 10, 10, 0.85);
}

body[theme="light"] .v3-bubble {
    background: #ffffff;
    border-color: rgba(10, 10, 10, 0.08);
    box-shadow: 0 16px 40px rgba(10, 10, 10, 0.12);
}

body[theme="light"] .v3-bubble-context {
    color: rgba(10, 10, 10, 0.55);
    border-bottom-color: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .v3-bubble-tag {
    color: #7f00ff;
}

body[theme="light"] .v3-bubble-id {
    color: rgba(10, 10, 10, 0.4);
}

body[theme="light"] .v3-bubble-close {
    color: rgba(10, 10, 10, 0.5);
}

body[theme="light"] .v3-bubble-action {
    color: rgba(10, 10, 10, 0.65);
}

body[theme="light"] .v3-bubble-action:hover {
    background: rgba(10, 10, 10, 0.04);
    color: rgba(10, 10, 10, 0.85);
}

body[theme="light"] .v3-bubble-action.active {
    background: rgba(127, 0, 255, 0.1);
    color: #7f00ff;
}

body[theme="light"] .v3-bubble-action-danger:hover {
    background: rgba(245, 108, 108, 0.1);
    color: #e11d48;
}

body[theme="light"] .v3-bubble-panel {
    border-top-color: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .v3-style-label {
    color: rgba(10, 10, 10, 0.55);
}

body[theme="light"] .v3-style-input {
    background: rgba(10, 10, 10, 0.03);
    border-color: rgba(10, 10, 10, 0.08);
    color: rgba(10, 10, 10, 0.85);
}

body[theme="light"] .v3-style-input:focus {
    border-color: rgba(127, 0, 255, 0.55);
}

body[theme="light"] .v3-segment {
    background: rgba(10, 10, 10, 0.03);
    border-color: rgba(10, 10, 10, 0.06);
    color: rgba(10, 10, 10, 0.65);
}

body[theme="light"] .v3-segment:hover {
    background: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .v3-segment.active {
    background: rgba(127, 0, 255, 0.12);
    border-color: rgba(127, 0, 255, 0.4);
    color: #7f00ff;
}

body[theme="light"] .v3-style-source summary {
    color: rgba(10, 10, 10, 0.5);
}

body[theme="light"] .v3-style-html {
    background: rgba(10, 10, 10, 0.03);
    border-color: rgba(10, 10, 10, 0.08);
    color: rgba(10, 10, 10, 0.85);
}

body[theme="light"] .v3-replace-card {
    background: rgba(10, 10, 10, 0.03);
    border-color: rgba(10, 10, 10, 0.06);
    color: rgba(10, 10, 10, 0.7);
}

body[theme="light"] .v3-replace-card:hover {
    background: rgba(127, 0, 255, 0.08);
    border-color: rgba(127, 0, 255, 0.3);
    color: #7f00ff;
}

body[theme="light"] .v3-edit-input {
    background: rgba(10, 10, 10, 0.03);
    border-color: rgba(10, 10, 10, 0.08);
    color: rgba(10, 10, 10, 0.85);
}

body[theme="light"] .v3-edit-input:focus {
    border-color: rgba(127, 0, 255, 0.55);
}

body[theme="light"] .v3-edit-hint {
    color: rgba(10, 10, 10, 0.4);
}

body[theme="light"] .v3-pane {
    background: #ffffff;
    border-right-color: rgba(10, 10, 10, 0.08);
    box-shadow: 8px 0 24px rgba(10, 10, 10, 0.08);
}

body[theme="light"] .v3-pane-header {
    border-bottom-color: rgba(10, 10, 10, 0.06);
    color: rgba(10, 10, 10, 0.85);
}

body[theme="light"] .v3-pane-close {
    color: rgba(10, 10, 10, 0.5);
}

body[theme="light"] .v3-pane-label {
    color: rgba(10, 10, 10, 0.5);
}

body[theme="light"] .v3-pane-tag,
body[theme="light"] .v3-pane-id {
    background: rgba(10, 10, 10, 0.04);
}

body[theme="light"] .v3-pane-section {
    border-top-color: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .v3-pane-section-title {
    color: rgba(10, 10, 10, 0.55);
}

body[theme="light"] .v3-pane-input {
    background: rgba(10, 10, 10, 0.03);
    border-color: rgba(10, 10, 10, 0.08);
    color: rgba(10, 10, 10, 0.85);
}

body[theme="light"] .v3-pane-input:focus {
    border-color: rgba(127, 0, 255, 0.55);
}

body[theme="light"] .v3-pane-hint {
    color: rgba(10, 10, 10, 0.5);
}

body[theme="light"] .v3-pane-field-name {
    background: rgba(10, 10, 10, 0.04);
    color: rgba(10, 10, 10, 0.85);
}

body[theme="light"] .v3-pane-html {
    background: rgba(10, 10, 10, 0.03);
    border-color: rgba(10, 10, 10, 0.08);
    color: rgba(10, 10, 10, 0.85);
}

body[theme="light"] .v3-subtabs {
    background: rgba(10, 10, 10, 0.04);
}

body[theme="light"] .v3-subtab {
    color: rgba(10, 10, 10, 0.55);
}

body[theme="light"] .v3-subtab:hover {
    background: rgba(10, 10, 10, 0.06);
    color: rgba(10, 10, 10, 0.85);
}

body[theme="light"] .v3-subtab.active {
    background: rgba(127, 0, 255, 0.1);
    border-color: rgba(127, 0, 255, 0.3);
    color: #7f00ff;
}

body[theme="light"] .v3-option-trash {
    border-color: rgba(10, 10, 10, 0.08);
    color: rgba(10, 10, 10, 0.55);
}

body[theme="light"] .v3-option-add {
    border-color: rgba(10, 10, 10, 0.15);
    color: rgba(10, 10, 10, 0.55);
}

body[theme="light"] .v3-option-add:hover {
    border-color: rgba(127, 0, 255, 0.4);
    color: #7f00ff;
}

body[theme="light"] .v3-readonly-code {
    background: rgba(10, 10, 10, 0.04);
    border-color: rgba(10, 10, 10, 0.08);
    color: #7f00ff;
}

body[theme="light"] .v3-replace-search {
    background: rgba(10, 10, 10, 0.04);
    border-color: rgba(10, 10, 10, 0.08);
}

body[theme="light"] .v3-replace-search-input {
    color: rgba(10, 10, 10, 0.8);
}

body[theme="light"] .v3-replace-search-input::placeholder {
    color: rgba(10, 10, 10, 0.4);
}

body[theme="light"] .v3-replace-pager-btn {
    background: rgba(10, 10, 10, 0.04);
    border-color: rgba(10, 10, 10, 0.08);
    color: rgba(10, 10, 10, 0.7);
}

body[theme="light"] .v3-replace-pager-info {
    color: rgba(10, 10, 10, 0.55);
}

body[theme="light"] .v3-pages-frame {
    border-bottom-color: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .jc-bubble-links {
    border-top-color: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .jc-bubble-link-item:hover {
    background: rgba(10, 10, 10, 0.04);
}

body[theme="light"] .wfc-root {
    color: rgba(10, 10, 10, .85);
}

body[theme="light"] .wfc-topbar {
    border-bottom-color: rgba(10, 10, 10, .06);
}

body[theme="light"] .wfc-icon-btn:hover {
    background: rgba(10, 10, 10, .06);
}

body[theme="light"] .wfc-stat-pill {
    background: rgba(10, 10, 10, .04);
}

body[theme="light"] .wfc-progress-col {
    border-right-color: rgba(10, 10, 10, .06);
}

body[theme="light"] .wfc-step--in_progress {
    background: rgba(37, 99, 235, 0.04);
}

body[theme="light"] .wfc-step-icon {
    background: rgba(10, 10, 10, .04);
}

body[theme="light"] .wfc-chat-bar {
    border-top-color: rgba(10, 10, 10, .06);
}

body[theme="light"] .wfc-chat-input {
    background: rgba(10, 10, 10, .03);
    border-color: rgba(10, 10, 10, .08);
    color: #171717;
}

body[theme="light"] .wfc-artifact-iframe {
    background: #ffffff;
}

body[theme="light"] .wfc-table th {
    background: rgba(111, 0, 204, 0.06);
}

body[theme="light"] .wfc-table td {
    border-bottom-color: rgba(10, 10, 10, 0.04);
}

body[theme="light"] .wfc-table tr:hover td {
    background: rgba(10, 10, 10, 0.02);
}

body[theme="light"] .wfc-summary-prose {
    color: rgba(10, 10, 10, .75);
}

body[theme="light"] .wfc-summary-prose h2,
body[theme="light"] .wfc-summary-prose h3,
body[theme="light"] .wfc-summary-prose h4 {
    color: rgba(10, 10, 10, .85);
}

body[theme="light"] .wfc-summary-prose strong {
    color: rgba(10, 10, 10, .9);
}

body[theme="light"] .wfc-cred-input {
    background: rgba(10, 10, 10, .03);
    border-color: rgba(10, 10, 10, .08);
    color: #171717;
}

body[theme="light"] .wfc-cred-item:hover {
    background: rgba(10, 10, 10, .03);
}

body[theme="light"] .wfc-bubble {
    background: #ffffff;
    border-color: #e5e5e5;
    box-shadow: 0 8px 24px rgba(10, 10, 10, 0.1);
    color: #171717;
}

body[theme="light"] .wfc-bubble-actions button {
    background: rgba(10, 10, 10, 0.04);
    color: rgba(10, 10, 10, 0.65);
}

body[theme="light"] .wfc-bubble-actions button:hover {
    background: rgba(248, 113, 113, 0.1);
    color: #f87171;
}

body[theme="light"] .wfc-bubble-loading {
    color: rgba(10, 10, 10, 0.4);
}

body[theme="light"] .wfc-toolbar {
    border-bottom-color: rgba(10, 10, 10, .06);
}

body[theme="light"] .wfc-toolbar-btn:hover {
    background: rgba(10, 10, 10, .06);
}

body[theme="light"] .wfc-toolbar-btn.active {
    background: rgba(248, 113, 113, 0.1);
}

body[theme="light"] .wfc-toolbar-sep {
    background: rgba(10, 10, 10, .08);
}

body[theme="light"] .wfc-summary-prose pre {
    background: rgba(10, 10, 10, .04);
}

body[theme="light"] .wfc-summary-prose a {
    color: #2563eb;
}

body[theme="light"] .wfc-summary-prose hr {
    border-top-color: rgba(10, 10, 10, .1);
}

body[theme="light"] .wfc-md-table th {
    background: rgba(111, 0, 204, 0.06);
    color: rgba(10, 10, 10, .85);
}

body[theme="light"] .wfc-md-table td {
    border-bottom-color: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .wfc-md-table tr:hover td {
    background: rgba(10, 10, 10, 0.02);
}

body[theme="light"] .wfc-prose {
    color: rgba(10, 10, 10, .75);
}

body[theme="light"] .wfc-prose h1,
body[theme="light"] .wfc-prose h2,
body[theme="light"] .wfc-prose h3,
body[theme="light"] .wfc-prose h4 {
    color: rgba(10, 10, 10, .85);
}

body[theme="light"] .wfc-prose strong {
    color: rgba(10, 10, 10, .9);
}

body[theme="light"] .wfc-prose blockquote {
    border-left-color: rgba(111, 0, 204, 0.2);
}

body[theme="light"] .wfc-prose pre {
    background: rgba(10, 10, 10, .04);
}

body[theme="light"] .wfc-prose a {
    color: #2563eb;
}

body[theme="light"] .wfc-prose hr {
    border-top-color: rgba(10, 10, 10, .1);
}

body[theme="light"] .wfc-prose th {
    background: rgba(111, 0, 204, 0.06);
    color: rgba(10, 10, 10, .85);
}

body[theme="light"] .wfc-prose td {
    border-bottom-color: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .wfc-prose tr:hover td {
    background: rgba(10, 10, 10, 0.02);
}

body[theme="light"] .wfc-prose mark {
    background: rgba(250, 204, 21, 0.4);
}

body[theme="light"] .cc2-topbar {
    border-bottom-color: rgba(10, 10, 10, .06);
}

body[theme="light"] .cc2-icon-btn:hover {
    background: rgba(10, 10, 10, .06);
}

body[theme="light"] .cc2-stat-pill {
    background: rgba(10, 10, 10, .04);
}

body[theme="light"] .cc2-section-header {
    color: rgba(10, 10, 10, .55);
}

body[theme="light"] .cc2-card {
    background: rgba(10, 10, 10, .02);
    border-color: rgba(10, 10, 10, .08);
}

body[theme="light"] .cc2-card:hover {
    background: rgba(127, 0, 255, .04);
    border-color: rgba(127, 0, 255, .25);
}

body[theme="light"] .cc2-card-title {
    color: rgba(10, 10, 10, .9);
}

body[theme="light"] .cc2-card-subtitle {
    color: rgba(10, 10, 10, .5);
}

body[theme="light"] .cc2-amount {
    color: rgba(10, 10, 10, .95);
}

body[theme="light"] .cc2-list-item:hover {
    background: rgba(10, 10, 10, .03);
}

body[theme="light"] .cc2-list-title {
    color: rgba(10, 10, 10, .85);
}

body[theme="light"] .cc2-starter-btn {
    background: rgba(10, 10, 10, .03);
    border-color: rgba(10, 10, 10, .1);
    color: rgba(10, 10, 10, .7);
}

body[theme="light"] .cc2-starter-btn:hover {
    background: rgba(127, 0, 255, .06);
    border-color: rgba(127, 0, 255, .25);
    color: #7f00ff;
}

body[theme="light"] .cc-root {
    color: rgba(10, 10, 10, .85);
}

body[theme="light"] .cc-topbar {
    border-bottom-color: rgba(10, 10, 10, .06);
}

body[theme="light"] .cc-icon-btn:hover {
    background: rgba(10, 10, 10, .06);
}

body[theme="light"] .cc-stat-pill {
    background: rgba(10, 10, 10, .04);
}

body[theme="light"] .cc-status--pending {
    background: rgba(10, 10, 10, .05);
    color: rgba(10, 10, 10, .35);
}

body[theme="light"] .cc-title-input {
    border-color: rgba(185, 140, 255, 0.4);
    color: #171717;
}

body[theme="light"] .cc-sidebar {
    border-right-color: rgba(10, 10, 10, .06);
}

body[theme="light"] .cc-sidebar-header {
    border-bottom-color: rgba(10, 10, 10, .04);
}

body[theme="light"] .cc-module-header:hover {
    background: rgba(10, 10, 10, .03);
}

body[theme="light"] .cc-module-fraction {
    background: rgba(10, 10, 10, .04);
}

body[theme="light"] .cc-lesson-item:hover {
    background: rgba(10, 10, 10, .03);
}

body[theme="light"] .cc-lesson-item--active {
    background: rgba(185, 140, 255, 0.08);
    border-right-color: #7f00ff;
}

body[theme="light"] .cc-lesson-status-icon {
    color: rgba(10, 10, 10, .2) !important;
}

body[theme="light"] .cc-lesson-item--active .cc-lesson-status-icon,
body[theme="light"] .cc-lesson-score {
    color: #34d399 !important;
}

body[theme="light"] .cc-lesson-heading {
    color: rgba(10, 10, 10, .9);
}

body[theme="light"] .cc-lesson-body {
    color: rgba(10, 10, 10, .75);
}

body[theme="light"] .cc-objectives {
    background: rgba(185, 140, 255, 0.04);
    border-color: rgba(185, 140, 255, 0.1);
}

body[theme="light"] .cc-objective-pill {
    background: rgba(185, 140, 255, 0.08);
    color: #7f00ff;
}

body[theme="light"] .cc-playground {
    border-color: rgba(10, 10, 10, .08);
}

body[theme="light"] .cc-playground-header {
    background: rgba(10, 10, 10, .02);
    border-bottom-color: rgba(10, 10, 10, .06);
}

body[theme="light"] .cc-playground-instructions {
    background: rgba(10, 10, 10, .01);
    border-bottom-color: rgba(10, 10, 10, .04);
}

body[theme="light"] .cc-playground-code {
    background: #0a0a0a;
    color: #e5e5e5;
}

body[theme="light"] .cc-playground-output {
    background: #0a0a0a;
}

body[theme="light"] .cc-playground-solution {
    background: rgba(52, 211, 153, 0.04);
}

body[theme="light"] .cc-playground-btn--secondary {
    background: rgba(10, 10, 10, .05);
    color: rgba(10, 10, 10, .6);
}

body[theme="light"] .cc-quiz {
    border-color: rgba(10, 10, 10, .08);
}

body[theme="light"] .cc-quiz-q {
    color: rgba(10, 10, 10, .85);
}

body[theme="light"] .cc-quiz-option {
    border-color: rgba(10, 10, 10, .1);
}

body[theme="light"] .cc-quiz-option:hover {
    background: rgba(10, 10, 10, .02);
    border-color: rgba(10, 10, 10, .15);
}

body[theme="light"] .cc-quiz-option--selected {
    background: rgba(185, 140, 255, 0.06);
    border-color: rgba(185, 140, 255, 0.25);
}

body[theme="light"] .cc-quiz-option-marker {
    background: rgba(10, 10, 10, .05);
}

body[theme="light"] .cc-quiz-explanation {
    background: rgba(245, 158, 11, 0.06);
    color: rgba(10, 10, 10, .65);
}

body[theme="light"] .cc-lesson-nav {
    border-top-color: rgba(10, 10, 10, .06);
    border-bottom-color: rgba(10, 10, 10, .06);
}

body[theme="light"] .cc-nav-btn {
    border-color: rgba(10, 10, 10, .1);
    color: rgba(10, 10, 10, .6);
}

body[theme="light"] .cc-nav-btn:hover {
    background: rgba(10, 10, 10, .04);
    color: #171717;
}

body[theme="light"] .cc-nav-btn--complete {
    background: rgba(185, 140, 255, 0.06);
    border-color: rgba(185, 140, 255, 0.15);
    color: #7f00ff;
}

body[theme="light"] .cc-nav-btn--completed {
    background: rgba(52, 211, 153, 0.06);
    border-color: rgba(52, 211, 153, 0.15);
    color: #059669;
}

body[theme="light"] .cc-audio-gen,
body[theme="light"] .cc-video-gen {
    border-color: rgba(10, 10, 10, .1);
    color: rgba(10, 10, 10, .25);
}

body[theme="light"] .cc-lesson-body h1,
body[theme="light"] .cc-lesson-body h2,
body[theme="light"] .cc-lesson-body h3,
body[theme="light"] .cc-lesson-body h4 {
    color: rgba(10, 10, 10, .85);
}

body[theme="light"] .cc-lesson-body strong {
    color: rgba(10, 10, 10, .9);
}

body[theme="light"] .cc-lesson-body pre {
    background: rgba(10, 10, 10, .04);
}

body[theme="light"] .cc-lesson-body code {
    background: rgba(10, 10, 10, .04);
}

body[theme="light"] .cc-lesson-body blockquote {
    border-left-color: rgba(185, 140, 255, 0.3);
}

body[theme="light"] .cc-lesson-body a {
    color: #2563eb;
}

body[theme="light"] .cc-lesson-body hr {
    border-top-color: rgba(10, 10, 10, .1);
}

body[theme="light"] .cc-lesson-body table th {
    background: rgba(185, 140, 255, 0.06);
    color: rgba(10, 10, 10, .85);
}

body[theme="light"] .cc-lesson-body table td {
    border-bottom-color: rgba(10, 10, 10, .06);
}

body[theme="light"] .cc-commerce-cta {
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.05), rgba(127, 0, 255, 0.05));
    border-color: rgba(248, 113, 113, 0.18);
}

body[theme="light"] .cc-commerce-cta:hover {
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.1), rgba(127, 0, 255, 0.1));
}

body[theme="light"] .cc-prose {
    color: rgba(10, 10, 10, .75);
}

body[theme="light"] .cc-prose h1,
body[theme="light"] .cc-prose h2,
body[theme="light"] .cc-prose h3,
body[theme="light"] .cc-prose h4 {
    color: rgba(10, 10, 10, .85);
}

body[theme="light"] .cc-prose strong {
    color: rgba(10, 10, 10, .9);
}

body[theme="light"] .cc-prose pre {
    background: rgba(10, 10, 10, .04);
}

body[theme="light"] .cc-prose th {
    background: rgba(185, 140, 255, 0.06);
    color: rgba(10, 10, 10, .85);
}

body[theme="light"] .cc-prose td {
    border-bottom-color: rgba(10, 10, 10, .06);
}

body[theme="light"] .cc-bubble {
    background: #ffffff;
    border-color: #e5e5e5;
    box-shadow: 0 8px 24px rgba(10, 10, 10, 0.1);
    color: #171717;
}

body[theme="light"] .cc-bubble-actions button {
    background: rgba(10, 10, 10, 0.04);
    color: rgba(10, 10, 10, 0.65);
}

body[theme="light"] .cc-bubble-actions button:hover {
    background: rgba(185, 140, 255, 0.1);
    color: #7f00ff;
}

body[theme="light"] .rctv-wrap {
    border-color: rgba(10, 10, 10, 0.06);
    background: rgba(10, 10, 10, 0.02);
}

body[theme="light"] .rctv-wrap:hover {
    border-color: rgba(37, 99, 235, 0.25);
    background: rgba(37, 99, 235, 0.03);
}

body[theme="light"] .rctv-quality-bar {
    background: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .rctv-citation-chip {
    background: rgba(10, 10, 10, 0.03);
}

body[theme="light"] .chat-search-fixed-inner {
    background: rgba(250, 250, 250, 0.92);
    border: 1px solid rgba(10, 10, 10, 0.06);
    box-shadow: 0 4px 20px rgba(10, 10, 10, 0.08);
    color: rgba(10, 10, 10, .85);
}

body[theme="light"] .fcm-dialog {
    background: #ffffff !important;
}

body[theme="light"] .fcm-dialog .el-dialog__body {
    background: #ffffff !important;
}

body[theme="light"] .fcm-content {
    color: rgba(10, 10, 10, .85);
}

body[theme="light"] .fcm-icon-wrap {
    background: rgba(127, 0, 255, 0.06);
    color: #7f00ff;
}

body[theme="light"] .fcm-desc {
    color: rgba(10, 10, 10, .5);
}

body[theme="light"] .fcm-btn-skip {
    color: rgba(10, 10, 10, .4);
}

body[theme="light"] .fcm-btn-skip:hover {
    color: rgba(10, 10, 10, .7);
}

body[theme="light"] .p-chat-hint {
    background: rgba(10, 10, 10, 0.03);
    border: 1px solid rgba(10, 10, 10, 0.06);
    color: rgba(10, 10, 10, .85);
}

body[theme="light"] .p-chat-hint-btn {
    background: rgba(127, 0, 255, 0.08);
    color: #7f00ff;
}

body[theme="light"] .p-chat-hint-btn:hover {
    background: rgba(127, 0, 255, 0.14);
}

body[theme="light"] .lm-moment--month {
    background: linear-gradient(155deg, rgba(127, 0, 255, 0.07) 0%, rgba(127, 0, 255, 0.02) 60%, rgba(127, 0, 255, 0.01) 100%);
    border: 1px solid rgba(127, 0, 255, 0.12);
}

body[theme="light"] .lm-moment--month .lm-moment-eyebrow {
    color: #6600cc;
}

body[theme="light"] .lm-moment--year {
    background: linear-gradient(155deg, rgba(16, 185, 129, 0.07) 0%, rgba(16, 185, 129, 0.02) 60%, rgba(16, 185, 129, 0.01) 100%);
    border: 1px solid rgba(16, 185, 129, 0.14);
}

body[theme="light"] .lm-moment--year .lm-moment-eyebrow {
    color: #047857;
}

body[theme="light"] .lm-moment-pill {
    background: rgba(10, 10, 10, 0.04);
    border-color: rgba(10, 10, 10, 0.06);
    color: rgba(10, 10, 10, 0.78);
}

body[theme="light"] .lm-moment-pill:hover:not([disabled]) {
    background: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .lm-cover {
    background: linear-gradient(155deg, rgba(127, 0, 255, 0.07) 0%, rgba(127, 0, 255, 0.02) 60%, rgba(127, 0, 255, 0.01) 100%);
    border: 1px solid rgba(127, 0, 255, 0.12);
}

body[theme="light"] .lm-cover-eyebrow.el-tag {
    color: #6600cc !important;
    background-color: rgba(127, 0, 255, 0.08) !important;
    border-color: rgba(127, 0, 255, 0.18) !important;
}

body[theme="light"] .lm-cover-pill {
    background: rgba(10, 10, 10, 0.04);
    border-color: rgba(10, 10, 10, 0.06);
    color: rgba(10, 10, 10, 0.78);
}

body[theme="light"] .lm-cover-pill:hover {
    border-color: rgba(127, 0, 255, 0.25);
    background: rgba(127, 0, 255, 0.06);
    color: #6600cc;
}

body[theme="light"] .lm-cover-pill.is-on {
    background: rgba(127, 0, 255, 0.12);
    border-color: rgba(127, 0, 255, 0.30);
    color: #6600cc;
}

body[theme="light"] .lm-cover-public-url {
    background: rgba(10, 10, 10, 0.03);
    border: 1px solid rgba(10, 10, 10, 0.06);
}

body[theme="light"] .lm-cover-public-url-copy:hover {
    background: rgba(10, 10, 10, 0.04);
}

body[theme="light"] .el-drawer.lm-visibility-drawer {
    background: #ffffff !important;
    color: #171717 !important;
}

body[theme="light"] .el-drawer.lm-visibility-drawer .el-drawer__body {
    background: #ffffff !important;
}

body[theme="light"] .lm-visibility-btn {
    background: rgba(10, 10, 10, 0.04);
    border-color: rgba(10, 10, 10, 0.06);
    color: rgba(10, 10, 10, 0.78);
}

body[theme="light"] .lm-visibility-btn:hover:not([disabled]) {
    background: rgba(10, 10, 10, 0.07);
}

body[theme="light"] .lm-visibility-btn--primary {
    background: rgba(127, 0, 255, 0.10) !important;
    border-color: rgba(127, 0, 255, 0.25) !important;
    color: #6600cc !important;
}

body[theme="light"] .lm-visibility-btn--primary:hover:not([disabled]) {
    background: rgba(127, 0, 255, 0.16) !important;
}

body[theme="light"] .lm-visibility-btn--ghost {
    background: transparent;
}

body[theme="light"] .lm-visibility-chip {
    background: rgba(10, 10, 10, 0.04);
    border-color: rgba(10, 10, 10, 0.08);
    color: rgba(10, 10, 10, 0.55);
}

body[theme="light"] .lm-visibility-chip:hover {
    background: rgba(10, 10, 10, 0.07);
}

body[theme="light"] .lm-visibility-chip.is-on {
    background: rgba(127, 0, 255, 0.10);
    border-color: rgba(127, 0, 255, 0.30);
    color: #6600cc;
}

body[theme="light"] .lm-visibility-chip.is-on:hover {
    background: rgba(127, 0, 255, 0.16);
}

body[theme="light"] .lm-username-row {
    background: #ffffff;
    border: 1px solid rgba(10, 10, 10, 0.10);
}

body[theme="light"] .lm-username-row:focus-within {
    border-color: rgba(127, 0, 255, 0.40);
}

body[theme="light"] .lm-username-error {
    color: #b91c1c;
}

body[theme="light"] .lm-compass {
    background: rgba(10, 10, 10, 0.02);
    border: 1px solid rgba(10, 10, 10, 0.05);
}

body[theme="light"] .lm-listening {
    background: rgba(10, 10, 10, 0.02);
    border: 1px solid rgba(10, 10, 10, 0.05);
}

body[theme="light"] .lm-compass-axis--social .lm-compass-dot {
    background: #0d9488;
    box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.30);
}

body[theme="light"] .lm-compass-axis--motion .lm-compass-dot {
    background: #059669;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.30);
}

body[theme="light"] .lm-compass-axis--spontaneous .lm-compass-dot {
    background: #be185d;
    box-shadow: 0 0 0 2px rgba(190, 24, 93, 0.30);
}

body[theme="light"] .lm-compass-axis--generous .lm-compass-dot {
    background: #404040;
    box-shadow: 0 0 0 2px rgba(71, 85, 105, 0.30);
}

body[theme="light"] .lm-dyk {
    background: rgba(10, 10, 10, 0.02);
    border: 1px solid rgba(10, 10, 10, 0.05);
}

body[theme="light"] .lm-noticed {
    background: rgba(127, 0, 255, 0.04);
    border: 1px solid rgba(127, 0, 255, 0.10);
}

body[theme="light"] .lm-chapter--food {
    background: rgba(251, 191, 36, 0.08);
}

body[theme="light"] .lm-chapter--health {
    background: rgba(16, 185, 129, 0.05);
}

body[theme="light"] .lm-chapter--home {
    background: rgba(234, 88, 12, 0.05);
}

body[theme="light"] .lm-chapter--finance {
    background: rgba(71, 85, 105, 0.05);
}

body[theme="light"] .lm-chapter--work {
    background: rgba(79, 70, 229, 0.04);
}

body[theme="light"] .lm-chapter--learning {
    background: rgba(127, 0, 255, 0.04);
}

body[theme="light"] .lm-chapter--people {
    background: rgba(225, 29, 72, 0.04);
}

body[theme="light"] .lm-chapter--recreation {
    background: rgba(20, 184, 166, 0.05);
}

body[theme="light"] .lm-chapter--travel {
    background: rgba(236, 72, 153, 0.05);
}

body[theme="light"] .lm-chapter--spiritual {
    background: rgba(14, 165, 233, 0.04);
}

body[theme="light"] .lm-chapter--shopping {
    background: rgba(192, 38, 211, 0.04);
}

body[theme="light"] .lm-chapter--general {
    background: rgba(107, 114, 128, 0.05);
}

body[theme="light"] .lm-listening-chip:hover {
    border-color: rgba(127, 0, 255, 0.4);
    color: #6600cc;
}

body[theme="light"] .lm-recommend {
    background: rgba(10, 10, 10, 0.02);
    border: 1px solid rgba(10, 10, 10, 0.05);
}

body[theme="light"] .lm-recommend-btn {
    background: rgba(127, 0, 255, 0.08);
    border-color: rgba(127, 0, 255, 0.18);
    color: #6600cc;
}

body[theme="light"] .lm-recommend-btn:hover {
    background: rgba(127, 0, 255, 0.14);
    border-color: rgba(127, 0, 255, 0.28);
}

body[theme="light"] .el-drawer.lm-invite-drawer {
    background: #ffffff !important;
    color: #171717 !important;
}

body[theme="light"] .el-drawer.lm-invite-drawer .el-drawer__body {
    background: #ffffff !important;
}

body[theme="light"] .lm-invite-input {
    background: #ffffff;
    border: 1px solid rgba(10, 10, 10, 0.10);
    color: rgba(10, 10, 10, 0.92);
}

body[theme="light"] .lm-invite-input:focus {
    outline: none;
    border-color: rgba(127, 0, 255, 0.40);
}

body[theme="light"] .lm-invite-card {
    background: rgba(127, 0, 255, 0.04);
    border: 1px solid rgba(127, 0, 255, 0.12);
}

body[theme="light"] .lm-invite-btn {
    background: rgba(10, 10, 10, 0.04);
    border-color: rgba(10, 10, 10, 0.06);
    color: rgba(10, 10, 10, 0.78);
}

body[theme="light"] .lm-invite-btn:hover:not([disabled]) {
    background: rgba(10, 10, 10, 0.07);
}

body[theme="light"] .lm-invite-btn--primary {
    background: rgba(127, 0, 255, 0.10) !important;
    border-color: rgba(127, 0, 255, 0.25) !important;
    color: #6600cc !important;
}

body[theme="light"] .lm-invite-btn--primary:hover:not([disabled]) {
    background: rgba(127, 0, 255, 0.16) !important;
}

body[theme="light"] .lm-invite-btn--ghost {
    background: transparent;
}

body[theme="light"] .lm-alert--warning {
    background: rgba(248, 113, 113, 0.04);
    border: 1px solid rgba(248, 113, 113, 0.12);
}

body[theme="light"] .lm-alert--warning>i {
    color: #dc2626;
}

body[theme="light"] .lm-alert--info {
    background: rgba(96, 165, 250, 0.04);
    border: 1px solid rgba(96, 165, 250, 0.12);
}

body[theme="light"] .lm-alert--info>i {
    color: #2563eb;
}

body[theme="light"] .lm-alert-cta {
    background: rgba(127, 0, 255, 0.08);
    color: #7f00ff;
}

body[theme="light"] .lm-alert-cta:hover {
    background: rgba(127, 0, 255, 0.14);
}

body[theme="light"] .nav-bottom-bar {
    background: #fafafa !important;
    border-top: 1px solid rgba(10, 10, 10, 0.06);
}

body[theme="light"] .el-drawer.lm-detail-drawer {
    background: #ffffff !important;
    color: #171717 !important;
}

body[theme="light"] .el-drawer.lm-detail-drawer .el-drawer__body {
    background: #ffffff !important;
}

body[theme="light"] .lm-detail {
    color: #171717;
}

body[theme="light"] .lm-detail-domain {
    color: rgba(10, 10, 10, .4);
}

body[theme="light"] .lm-detail-meta {
    border-top: 1px solid rgba(10, 10, 10, .07);
}

body[theme="light"] .lm-detail-meta-label {
    color: rgba(10, 10, 10, .35);
}

body[theme="light"] .lm-detail-btn {
    background: rgba(10, 10, 10, .04);
    color: rgba(10, 10, 10, .6);
    border: 1px solid rgba(10, 10, 10, .08);
}

body[theme="light"] .lm-detail-btn:hover {
    background: rgba(10, 10, 10, .07);
}

body[theme="light"] .lm-detail-btn-primary {
    background: rgba(127, 0, 255, .08) !important;
    color: #7f00ff !important;
    border-color: rgba(127, 0, 255, .15) !important;
}

body[theme="light"] .chat-notif-alert {
    background: rgba(217, 119, 6, .06);
    border: 1px solid rgba(217, 119, 6, .12);
}

body[theme="light"] .chat-notif-alert-icon {
    color: #d97706;
}

body[theme="light"] .chat-notif-alert-title {
    color: #171717;
}

body[theme="light"] .chat-notif-alert-btn {
    background: rgba(217, 119, 6, .1);
    color: #d97706;
}

body[theme="light"] .chat-notif-alert-btn:hover {
    background: rgba(217, 119, 6, .18);
}

body[theme="light"] .chat-pwa-alert {
    background: rgba(59, 130, 246, .06);
    border: 1px solid rgba(59, 130, 246, .12);
}

body[theme="light"] .chat-pwa-alert-icon {
    color: #3b82f6;
}

body[theme="light"] .chat-pwa-alert-title {
    color: #171717;
}

body[theme="light"] .chat-pwa-alert-btn {
    background: rgba(59, 130, 246, .1);
    color: #3b82f6;
}

body[theme="light"] .chat-pwa-alert-btn:hover {
    background: rgba(59, 130, 246, .18);
}

body[theme="light"] .el-drawer.a2hs-drawer {
    background: #ffffff !important;
    color: #171717 !important;
}

body[theme="light"] .el-drawer.a2hs-drawer .el-drawer__body {
    background: #ffffff !important;
}

body[theme="light"] .a2hs-step-num {
    background: rgba(10, 10, 10, .06);
    color: rgba(10, 10, 10, .5);
}

body[theme="light"] .a2hs-native-note {
    background: rgba(127, 0, 255, .06);
    color: #7f00ff;
}

body[theme="light"] .a2hs-done-btn {
    background: rgba(10, 10, 10, .06);
    color: rgba(10, 10, 10, .6);
}

body[theme="light"] .a2hs-done-btn:hover {
    background: rgba(10, 10, 10, .1);
}

body[theme="light"] .msg-upgrade-title {
    color: rgba(10, 10, 10, 0.9);
}

body[theme="light"] .msg-upgrade-sub {
    color: rgba(10, 10, 10, 0.5);
}

body[theme="light"] .msg-upgrade-arrow {
    color: rgba(10, 10, 10, 0.5);
}

body[theme="light"] .msg-file-card {
    background: rgba(127, 0, 255, .05);
    border: 1px solid rgba(127, 0, 255, .12);
}

body[theme="light"] .msg-file-card-icon {
    color: #7f00ff;
}

body[theme="light"] .msg-file-card-btn {
    background: rgba(10, 10, 10, .04);
    color: rgba(10, 10, 10, .4);
}

body[theme="light"] .msg-file-card-btn:hover {
    background: rgba(127, 0, 255, .08);
    color: #7f00ff;
}

body[theme="light"] .msg-file-card-download {
    background: rgba(127, 0, 255, .08);
    color: #7f00ff;
}

body[theme="light"] .msg-file-card-download:hover {
    background: rgba(127, 0, 255, .18);
}

body[theme="light"] .app-file-viewer {
    background: #ffffff;
    color: #171717;
    border-left-color: rgba(10, 10, 10, .07);
}

body[theme="light"] .app-file-viewer-topbar {
    border-bottom-color: rgba(10, 10, 10, .07);
}

body[theme="light"] .app-file-viewer-btn:hover {
    background: rgba(10, 10, 10, .06);
}

body[theme="light"] .app-file-viewer-fallback-btn {
    background: rgba(127, 0, 255, .08);
    color: #7f00ff;
}

body[theme="light"] .el-drawer.app-file-viewer-mobile,
body[theme="light"] .el-drawer.app-split-panel-mobile {
    background: #ffffff !important;
    color: #171717 !important;
}

body[theme="light"] .el-drawer.app-file-viewer-mobile .el-drawer__body,
body[theme="light"] .el-drawer.app-split-panel-mobile .el-drawer__body {
    background: #ffffff !important;
    padding: 0 !important;
}

body[theme="light"] .sk-card {
    background: rgba(10, 10, 10, .02);
    border: 1px solid rgba(10, 10, 10, .06);
}

body[theme="light"] .sk-card:hover {
    background: rgba(127, 0, 255, .03);
    border-color: rgba(127, 0, 255, .12);
}

body[theme="light"] .sk-card-icon {
    color: #7f00ff;
}

body[theme="light"] .el-drawer.sk-detail-drawer {
    background: #ffffff !important;
    color: #171717 !important;
}

body[theme="light"] .el-drawer.sk-detail-drawer .el-drawer__body {
    background: #ffffff !important;
}

body[theme="light"] .sk-detail-meta {
    border-top: 1px solid rgba(10, 10, 10, .07);
    padding-top: 12px;
}

body[theme="light"] .sk-detail-btn-run {
    background: rgba(127, 0, 255, .08);
    color: #7f00ff;
}

body[theme="light"] .sk-detail-btn-run:hover {
    background: rgba(127, 0, 255, .15);
}

body[theme="light"] .sk-detail-btn-edit {
    background: rgba(10, 10, 10, .04);
    color: rgba(10, 10, 10, .6);
}

body[theme="light"] .sk-detail-btn-edit:hover {
    background: rgba(10, 10, 10, .07);
}

body[theme="light"] .sk-detail-btn-delete {
    background: rgba(239, 68, 68, .06);
    color: #ef4444;
}

body[theme="light"] .sk-detail-btn-delete:hover {
    background: rgba(239, 68, 68, .12);
}

body[theme="light"] .ltv-wrap {
    border: 1px solid rgba(127, 0, 255, .15);
    background: rgba(127, 0, 255, .03);
}

body[theme="light"] .ltv-wrap:hover {
    border-color: rgba(127, 0, 255, .35);
    background: rgba(127, 0, 255, .07);
}

body[theme="light"] .ltv-icon {
    background: rgba(127, 0, 255, .1);
    color: #7f00ff;
}

body[theme="light"] .ltv-open-btn {
    color: #7f00ff;
    border: 1px solid rgba(127, 0, 255, .25);
}

body[theme="light"] .ltv-wrap:hover .ltv-open-btn {
    background: rgba(127, 0, 255, .08);
}

body[theme="light"] .ltv-more {
    color: #7f00ff;
}

body[theme="light"] .ai-bubble {
    background: #ffffff;
    border: 1px solid rgba(10, 10, 10, .1);
    box-shadow: 0 4px 16px rgba(10, 10, 10, .12);
}

body[theme="light"] .ai-bubble-loading {
    color: rgba(10, 10, 10, .4);
}

body[theme="light"] .ai-bubble-loading i {
    color: #7f00ff;
}

body[theme="light"] .ai-bubble-btn {
    background: rgba(10, 10, 10, .04);
    color: rgba(10, 10, 10, .65);
}

body[theme="light"] .ai-bubble-btn:hover {
    background: rgba(127, 0, 255, .1);
    color: #7f00ff;
}

body[theme="light"] .ai-bubble-actions-border {
    border-top-color: rgba(10, 10, 10, .06);
}

body[theme="light"] .ai-bubble-secondary {
    border-top-color: rgba(10, 10, 10, .04);
}

body[theme="light"] .ai-bubble-commerce-row {
    background: linear-gradient(135deg, rgba(127, 0, 255, .06), rgba(127, 0, 255, .04));
    border-bottom: 1px solid rgba(127, 0, 255, .08);
    color: #7f00ff;
}

body[theme="light"] .ai-bubble-commerce-row:hover {
    background: linear-gradient(135deg, rgba(127, 0, 255, .1), rgba(127, 0, 255, .07));
}

body[theme="light"] .ai-bubble-commerce {
    background: rgba(127, 0, 255, .05);
    border: 1px solid rgba(127, 0, 255, .12);
    color: #7f00ff;
}

body[theme="light"] .ai-bubble-commerce:hover {
    background: rgba(127, 0, 255, .1);
}

body[theme="light"] .ai-bubble-reply-text {
    color: rgba(10, 10, 10, .7);
}

body[theme="light"] .ai-bubble-reply-text strong {
    color: rgba(10, 10, 10, .9);
}

body[theme="light"] .ai-bubble-reply-foot {
    border-top: 1px solid rgba(10, 10, 10, .06);
}

body[theme="light"] .ai-bubble-entity {
    border-bottom: 1px solid rgba(10, 10, 10, .06);
}

body[theme="light"] .ai-bubble-entity-meta {
    color: rgba(10, 10, 10, .45);
}

body[theme="light"] .ai-bubble-link-item:hover {
    background: rgba(10, 10, 10, .04);
}

body[theme="light"] .mini-chat {
    background: #ffffff;
    border: 1px solid rgba(10, 10, 10, .1);
    box-shadow: 0 -4px 24px rgba(10, 10, 10, .1);
}

body[theme="light"] .mini-chat-header {
    border-bottom: 1px solid rgba(10, 10, 10, .06);
}

body[theme="light"] .mini-chat-msg--user {
    background: rgba(127, 0, 255, .08);
    color: rgba(10, 10, 10, .85);
}

body[theme="light"] .mini-chat-msg--ai {
    background: rgba(10, 10, 10, .03);
    color: rgba(10, 10, 10, .8);
}

body[theme="light"] .mini-chat-msg-text code {
    background: rgba(10, 10, 10, .05);
}

body[theme="light"] .mini-chat-input-row {
    border-top: 1px solid rgba(10, 10, 10, .06);
}

body[theme="light"] .mini-chat-input {
    background: rgba(10, 10, 10, .03);
    color: rgba(10, 10, 10, .85);
}

body[theme="light"] .mini-chat-send {
    color: #7f00ff;
}

body[theme="light"] .canvas-orders-count {
    background: rgba(10, 10, 10, .06);
}

body[theme="light"] .canvas-order-item {
    border: 1px solid rgba(10, 10, 10, .06);
}

body[theme="light"] .canvas-marketplace-count {
    background: rgba(10, 10, 10, .06);
}

body[theme="light"] .canvas-marketplace-item {
    border: 1px solid rgba(10, 10, 10, .06);
}

body[theme="light"] .canvas-marketplace-item:hover {
    background: rgba(127, 0, 255, .04);
    border-color: rgba(127, 0, 255, .15);
}

body[theme="light"] .canvas-marketplace-item-icon {
    background: rgba(127, 0, 255, .08);
    color: #7f00ff;
}

body[theme="light"] .canvas-marketplace-item-cta {
    background: rgba(127, 0, 255, .06);
    color: #7f00ff;
}

body[theme="light"] .canvas-marketplace-item-cta:hover {
    background: rgba(127, 0, 255, .12);
}

body[theme="light"] .canvas-marketplace-item-cta--book {
    background: rgba(5, 150, 105, .06);
    color: #059669;
}

body[theme="light"] .canvas-marketplace-item-cta--book:hover {
    background: rgba(5, 150, 105, .12);
}

body[theme="light"] .pc-mini-chat-toggle {
    color: #7f00ff;
}

body[theme="light"] .pc-mini-chat-toggle:hover {
    background: rgba(127, 0, 255, .06);
}

body[theme="light"] .pc-routine-card {
    color: rgba(10, 10, 10, .65) !important;
    background: rgba(10, 10, 10, .03) !important;
}

body[theme="light"] .voice-mode-drawer,
body[theme="light"] .voice-mode-drawer .el-drawer__body {
    background: radial-gradient(ellipse at top, #f5f5f5 0%, #e5e5e5 100%) !important;
}

body[theme="light"] .voice-mode-root {
    color: #171717;
}

body[theme="light"] .voice-header-avatar {
    background: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .voice-header-name {
    color: rgba(10, 10, 10, 0.85);
}

body[theme="light"] .voice-close {
    background: rgba(10, 10, 10, 0.06);
    color: #171717;
}

body[theme="light"] .voice-close:hover {
    background: rgba(10, 10, 10, 0.12);
}

body[theme="light"] .voice-status {
    color: rgba(10, 10, 10, 0.6);
}

body[theme="light"] .voice-transcript-user {
    color: rgba(10, 10, 10, 0.5);
}

body[theme="light"] .voice-transcript-ai {
    color: rgba(10, 10, 10, 0.85);
}

body[theme="light"] .voice-transcript-ai strong {
    color: #171717;
    font-weight: 600;
}

body[theme="light"] .voice-transcript-ai h1,
body[theme="light"] .voice-transcript-ai h2,
body[theme="light"] .voice-transcript-ai h3 {
    color: #171717;
}

body[theme="light"] .voice-transcript-ai code {
    background: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .voice-btn-mute {
    background: rgba(10, 10, 10, 0.06);
    color: #171717;
}

body[theme="light"] .voice-btn-mute:hover {
    background: rgba(10, 10, 10, 0.12);
}

body[theme="light"] .voice-btn-mute.muted {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

body[theme="light"] .topbar-voice-btn {
    color: rgba(10, 10, 10, 0.6);
}

body[theme="light"] .topbar-voice-btn:hover {
    background: rgba(10, 10, 10, 0.05);
    color: rgba(10, 10, 10, 0.85);
}

body[theme="light"] .chat-empty-tip {
    background: rgba(190, 24, 93, 0.03);
    border: 1px solid rgba(190, 24, 93, 0.1);
}

body[theme="light"] .chat-empty-tip:hover {
    background: rgba(190, 24, 93, 0.06);
    border-color: rgba(190, 24, 93, 0.2);
}

body[theme="light"] .chat-empty-tip-icon {
    background: rgba(190, 24, 93, 0.08);
    color: #be185d;
}

body[theme="light"] .chat-empty-tip-label,
body[theme="dark"] .chat-empty-tip-label {
    font-family: var(--mono);
    font-weight: 300;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

body[theme="light"] .chat-empty-tip-label {
    color: #be185d;
}

body[theme="light"] .chat-empty-tip-title {
    color: rgba(10, 10, 10, 0.85);
}

body[theme="light"] .chat-empty-tip-text {
    color: rgba(10, 10, 10, 0.6);
}

body[theme="light"] .chat-empty-tip-dismiss {
    color: rgba(10, 10, 10, 0.4);
}

body[theme="light"] .chat-empty-tip-dismiss:hover {
    background: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .up-page {
    background: #fafafa;
    color: rgba(10, 10, 10, 0.86);
    min-height: 100vh;
}

body[theme="light"] .up-cover {
    background: linear-gradient(155deg, rgba(127, 0, 255, 0.07) 0%, rgba(127, 0, 255, 0.02) 60%, rgba(127, 0, 255, 0.01) 100%);
    border: 1px solid rgba(127, 0, 255, 0.12);
}

body[theme="light"] .up-cover-eyebrow.el-tag {
    color: #6600cc !important;
    background-color: rgba(127, 0, 255, 0.08) !important;
    border-color: rgba(127, 0, 255, 0.18) !important;
}

body[theme="light"] .up-compass {
    background: rgba(10, 10, 10, 0.02);
    border: 1px solid rgba(10, 10, 10, 0.05);
}

body[theme="light"] .up-compass-axis--social .up-compass-dot {
    background: #0d9488;
    box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.30);
}

body[theme="light"] .up-compass-axis--motion .up-compass-dot {
    background: #059669;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.30);
}

body[theme="light"] .up-compass-axis--spontaneous .up-compass-dot {
    background: #be185d;
    box-shadow: 0 0 0 2px rgba(190, 24, 93, 0.30);
}

body[theme="light"] .up-compass-axis--generous .up-compass-dot {
    background: #404040;
    box-shadow: 0 0 0 2px rgba(71, 85, 105, 0.30);
}

body[theme="light"] .up-chapter--food {
    background: rgba(251, 191, 36, 0.08);
}

body[theme="light"] .up-chapter--health {
    background: rgba(16, 185, 129, 0.05);
}

body[theme="light"] .up-chapter--home {
    background: rgba(234, 88, 12, 0.05);
}

body[theme="light"] .up-chapter--finance {
    background: rgba(71, 85, 105, 0.05);
}

body[theme="light"] .up-chapter--work {
    background: rgba(79, 70, 229, 0.04);
}

body[theme="light"] .up-chapter--learning {
    background: rgba(127, 0, 255, 0.04);
}

body[theme="light"] .up-chapter--people {
    background: rgba(225, 29, 72, 0.04);
}

body[theme="light"] .up-chapter--recreation {
    background: rgba(20, 184, 166, 0.05);
}

body[theme="light"] .up-chapter--travel {
    background: rgba(236, 72, 153, 0.05);
}

body[theme="light"] .up-chapter--spiritual {
    background: rgba(14, 165, 233, 0.04);
}

body[theme="light"] .up-chapter--shopping {
    background: rgba(192, 38, 211, 0.04);
}

body[theme="light"] .up-chapter--general {
    background: rgba(107, 114, 128, 0.05);
}

body[theme="light"] .up-cta {
    background: rgba(127, 0, 255, 0.08);
    border-color: rgba(127, 0, 255, 0.18);
    color: #6600cc;
}

body[theme="light"] .up-cta:hover {
    background: rgba(127, 0, 255, 0.14);
}

body[theme="light"] .chat-goto-bottom {
    background: rgba(250, 250, 250, 0.92);
    border: 1px solid rgba(10, 10, 10, 0.10);
    color: rgba(10, 10, 10, 0.7);
    box-shadow: 0 6px 18px rgba(10, 10, 10, 0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

body[theme="light"] .chat-goto-bottom:hover {
    background: rgba(255, 253, 249, 0.98);
    color: #171717;
    box-shadow: 0 8px 22px rgba(10, 10, 10, 0.18);
}

body[theme="light"] .app-offline-banner {
    background: rgba(255, 247, 247, 0.97);
    border: 1px solid rgba(220, 38, 38, 0.30);
    color: rgba(127, 29, 29, 0.95);
    box-shadow: 0 8px 22px rgba(10, 10, 10, 0.14);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

body[theme="light"] .fy-dropdown {
    background: #ffffff;
    color: rgba(10, 10, 10, 0.85);
    border: 1px solid rgba(10, 10, 10, 0.08);
}

body[theme="light"] .fy-tab-count {
    background: rgba(10, 10, 10, 0.06);
    color: rgba(10, 10, 10, 0.55);
}

body[theme="light"] .fy-card,
body[theme="light"] .fy-row,
body[theme="light"] .fy-rail-card,
body[theme="light"] .fy-listening-chip {
    background: rgba(10, 10, 10, 0.02);
    border-color: rgba(10, 10, 10, 0.08);
    color: rgba(10, 10, 10, 0.85);
}

body[theme="light"] .fy-card:hover,
body[theme="light"] .fy-row:hover,
body[theme="light"] .fy-rail-card:hover,
body[theme="light"] .fy-listening-chip:hover {
    background: rgba(10, 10, 10, 0.04);
    border-color: rgba(10, 10, 10, 0.16);
}

body[theme="light"] .fy-card--suggestion,
body[theme="light"] .fy-row--suggestion {
    /* Solid one-step elevation off the light section base (#fafafa);
       border matches the items card baseline. */
    background: rgba(10, 10, 10, 0.02);
    border-color: rgba(10, 10, 10, 0.08);
    color: rgba(10, 10, 10, 0.85);
}

body[theme="light"] .fy-card--suggestion:hover,
body[theme="light"] .fy-row--suggestion:hover {
    background: #ffffff;
    border-color: rgba(10, 10, 10, 0.08);
    box-shadow: 0 2px 8px rgba(10, 10, 10, 0.06);
}

body[theme="light"] .fy-tip-banner {
    background: transparent;
    border-color: transparent;
    color: rgba(10, 10, 10, 0.85);
}

body[theme="light"] .fy-tip-banner-icon {
    color: #6600cc;
}

body[theme="light"] .fy-tip-cta {
    color: #6600cc;
    background: rgba(127, 0, 255, 0.08);
    border-color: rgba(127, 0, 255, 0.18);
}

body[theme="light"] .fy-tip-cta:hover {
    background: rgba(127, 0, 255, 0.14);
    border-color: rgba(127, 0, 255, 0.32);
    color: #4c1d95;
}

body[theme="light"] .sttv-source-card,
body[theme="light"] .sttv-source-more {
    background: rgba(10, 10, 10, 0.02);
    border-color: rgba(10, 10, 10, 0.08);
    color: rgba(10, 10, 10, 0.85);
}

body[theme="light"] .sttv-source-card:hover,
body[theme="light"] .sttv-source-more:hover {
    background: rgba(10, 10, 10, 0.04);
    border-color: rgba(10, 10, 10, 0.14);
}

body[theme="light"] .mtv-card {
    background: #ffffff;
    border-color: rgba(10, 10, 10, 0.08);
    color: rgba(10, 10, 10, 0.86);
}

body[theme="light"] .mtv-card:hover {
    border-color: rgba(127, 0, 255, 0.32);
    box-shadow: 0 6px 18px rgba(10, 10, 10, 0.08);
}

body[theme="light"] .mtv-thumb {
    background: rgba(10, 10, 10, 0.03);
}

body[theme="light"] .mtv-thumb-fallback {
    color: rgba(10, 10, 10, 0.4);
}

body[theme="light"] .mtv-vendor {
    color: rgba(10, 10, 10, 0.55);
}

body[theme="light"] .mtv-amount {
    color: rgba(10, 10, 10, 0.95);
}

body[theme="light"] .mtv-amount-local {
    color: rgba(10, 10, 10, 0.55);
}

body[theme="light"] .mtv-empty {
    background: rgba(10, 10, 10, 0.02);
    border: 1px solid rgba(10, 10, 10, 0.06);
    color: rgba(10, 10, 10, 0.55);
}

body[theme="light"] .mtv-pending-pill {
    background: rgba(248, 113, 113, 0.10);
    color: #b91c1c;
    border: 1px solid rgba(248, 113, 113, 0.30);
}

body[theme="light"] .mtv-drawer {
    background: #fafafa !important;
    color: rgba(10, 10, 10, 0.85) !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 78vh;
}

body[theme="light"] .mtv-drawer .el-drawer__body {
    background: #fafafa !important;
    padding: 0 !important;
    overflow-y: auto;
}

body[theme="light"] .mtv-detail-vendor {
    color: rgba(10, 10, 10, 0.55);
}

body[theme="light"] .mtv-carousel-frame {
    background: rgba(10, 10, 10, 0.03);
}

body[theme="light"] .mtv-detail-price-btla {
    color: rgba(10, 10, 10, 0.95);
}

body[theme="light"] .mtv-detail-price-local {
    color: rgba(10, 10, 10, 0.55);
}

body[theme="light"] .mtv-detail-body-text {
    color: rgba(10, 10, 10, 0.72);
}

body[theme="light"] .mtv-drawer .mtv-detail-btn {
    border: 1px solid rgba(10, 10, 10, 0.06) !important;
    background: rgba(10, 10, 10, 0.03) !important;
    color: rgba(10, 10, 10, 0.78) !important;
}

body[theme="light"] .mtv-drawer .mtv-detail-btn:hover {
    border-color: rgba(127, 0, 255, 0.30) !important;
    background: rgba(127, 0, 255, 0.04) !important;
}

body[theme="light"] .mtv-drawer .mtv-detail-btn.mtv-detail-btn--primary {
    border-color: rgba(127, 0, 255, 0.30) !important;
    background: rgba(127, 0, 255, 0.06) !important;
    color: #6600cc !important;
}

body[theme="light"] .mtv-drawer .mtv-detail-btn.mtv-detail-btn--primary:hover {
    border-color: rgba(127, 0, 255, 0.50) !important;
    background: rgba(127, 0, 255, 0.10) !important;
    color: #6600cc !important;
}

body[theme="light"] .mtv-drawer .mtv-detail-btn:disabled,
body[theme="light"] .mtv-drawer .mtv-detail-btn.mtv-detail-btn--primary:disabled {
    border-color: rgba(10, 10, 10, 0.05) !important;
    background: rgba(10, 10, 10, 0.02) !important;
    color: rgba(10, 10, 10, 0.35) !important;
}

body[theme="light"] .ptv-cta {
    border-color: rgba(10, 10, 10, 0.06);
    background: rgba(10, 10, 10, 0.03);
    color: rgba(10, 10, 10, 0.78);
}

body[theme="light"] .ptv-cta:hover {
    border-color: rgba(127, 0, 255, 0.30);
    background: rgba(127, 0, 255, 0.04);
}

body[theme="light"] .ptv-cta--primary {
    border-color: rgba(127, 0, 255, 0.30);
    background: rgba(127, 0, 255, 0.06);
    color: #6600cc;
}

body[theme="light"] .ptv-cta--primary:hover {
    border-color: rgba(127, 0, 255, 0.50);
    background: rgba(127, 0, 255, 0.10);
    color: #6600cc;
}

body[theme="light"] .ptv-checkout-drawer {
    background: #fafafa !important;
    color: rgba(10, 10, 10, 0.86) !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 80vh;
}

body[theme="light"] .ptv-checkout-drawer .el-drawer__body {
    background: #fafafa !important;
    padding: 0 !important;
    overflow-y: auto;
}

body[theme="light"] .ptv-checkout-sub {
    color: rgba(10, 10, 10, 0.55);
}

body[theme="light"] .ptv-checkout-amount-btla {
    color: rgba(10, 10, 10, 0.95);
}

body[theme="light"] .ptv-checkout-amount-local {
    color: rgba(10, 10, 10, 0.55);
}

body[theme="light"] .ptv-checkout-summary {
    background: rgba(10, 10, 10, 0.03);
    border: 1px solid rgba(10, 10, 10, 0.06);
}

body[theme="light"] .ptv-checkout-summary-row {
    color: rgba(10, 10, 10, 0.78);
}

body[theme="light"] .ptv-checkout-balance {
    background: rgba(10, 10, 10, 0.02);
    border: 1px solid rgba(10, 10, 10, 0.05);
}

body[theme="light"] .ptv-checkout-balance-label {
    color: rgba(10, 10, 10, 0.55);
}

body[theme="light"] .ptv-checkout-balance-value {
    color: #047857;
}

body[theme="light"] .ptv-checkout-balance.ptv-checkout-balance--low .ptv-checkout-balance-value {
    color: #b91c1c;
}

body[theme="light"] .ptv-checkout-pin-label {
    color: rgba(10, 10, 10, 0.55);
}

body[theme="light"] .ptv-otp-input {
    background: #ffffff;
    border-color: rgba(10, 10, 10, 0.12);
    color: rgba(10, 10, 10, 0.92);
}

body[theme="light"] .ptv-otp-input:focus {
    border-color: rgba(127, 0, 255, 0.55);
    background: #ffffff;
}

body[theme="light"] .ptv-checkout-insufficient {
    background: rgba(220, 38, 38, 0.05);
    border: 1px solid rgba(220, 38, 38, 0.20);
    color: #991b1b;
}

body[theme="light"] .ptv-checkout-insufficient i {
    color: #b91c1c;
}

body[theme="light"] .ptv-checkout-insufficient-sub a {
    color: #6600cc;
}

body[theme="light"] .ptv-checkout-error {
    background: rgba(220, 38, 38, 0.06);
    border: 1px solid rgba(220, 38, 38, 0.22);
    color: #991b1b;
}

body[theme="light"] .ptv-checkout-error i {
    color: #b91c1c;
}

body[theme="light"] .ptv-checkout-cta:disabled {
    border-color: rgba(10, 10, 10, 0.05);
    background: rgba(10, 10, 10, 0.02);
    color: rgba(10, 10, 10, 0.40);
    cursor: not-allowed;
}

body[theme="light"] .ptv-success-drawer {
    background: #fafafa !important;
    color: rgba(10, 10, 10, 0.86) !important;
    border-radius: 0 !important;
}

body[theme="light"] .ptv-success-drawer .el-drawer__body {
    background: #fafafa !important;
    padding: 0 !important;
    overflow-y: auto;
}

body[theme="light"] .ptv-success-checkmark {
    background: rgba(5, 150, 105, 0.10);
    box-shadow: 0 0 0 8px rgba(5, 150, 105, 0.04);
}

body[theme="light"] .ptv-success-circle {
    stroke: #059669;
}

body[theme="light"] .ptv-success-tick {
    stroke: #047857;
}

body[theme="light"] .ptv-success-headline {
    color: rgba(10, 10, 10, 0.92);
}

body[theme="light"] .ptv-success-sub {
    color: rgba(10, 10, 10, 0.62);
}

body[theme="light"] .ptv-success-receipt {
    background: #ffffff;
    border: 1px solid rgba(10, 10, 10, 0.07);
}

body[theme="light"] .ptv-success-receipt-label {
    color: rgba(10, 10, 10, 0.55);
}

body[theme="light"] .ptv-success-receipt-value {
    color: rgba(10, 10, 10, 0.88);
}

body[theme="light"] .ptv-success-receipt-mono {
    color: #6600cc;
}

body[theme="light"] .ptv-success-dismiss {
    color: rgba(10, 10, 10, 0.45);
}

body[theme="light"] .ptv-success-dismiss:hover {
    color: rgba(10, 10, 10, 0.75);
}

body[theme="light"] .app-sidebar {
    background: rgba(10, 10, 10, 0.02);
    border-right-color: rgba(10, 10, 10, 0.08);
}

@media (max-width: 991.98px) {
    body[theme="light"] .app-sidebar {
        background: #fafafa;
    }

    body[theme="light"] .app-sidebar-overlay {
        background: rgba(10, 10, 10, 0.3);
    }
}

body[theme="light"] .app-sidebar-overlay {
    background: rgba(10, 10, 10, 0.3);
}

body[theme="light"] .sidebar-item {
    color: rgba(10, 10, 10, 0.6);
}

body[theme="light"] .sidebar-item:hover {
    background: rgba(10, 10, 10, 0.05);
    color: rgba(10, 10, 10, 0.9);
}

body[theme="light"] .sidebar-item-active {
    background: rgba(127, 0, 255, 0.08);
    color: #7f00ff;
}

body[theme="light"] .sidebar-divider {
    background: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .app-topbar {
    border-bottom-color: rgba(10, 10, 10, 0.08);
    color: rgba(10, 10, 10, 0.85);
}

body[theme="light"] .cc2-topbar {
    border-bottom: 1px solid rgba(10, 10, 10, 0.08);
}

body[theme="light"] .cc2-icon-btn {
    color: rgba(10, 10, 10, 0.6);
}

body[theme="light"] .cc2-icon-btn:hover {
    background: rgba(10, 10, 10, 0.05);
    color: rgba(10, 10, 10, 0.9);
}

body[theme="light"] .cc2-title {
    color: rgba(10, 10, 10, 0.9);
}

body[theme="light"] .oo-section-header {
    color: rgba(10, 10, 10, 0.55);
}

body[theme="light"] .oo-card {
    border: 1px solid rgba(10, 10, 10, 0.08);
    background: rgba(10, 10, 10, 0.015);
}

body[theme="light"] .oo-card:hover {
    border-color: rgba(127, 0, 255, 0.3);
    background: rgba(127, 0, 255, 0.04);
}

body[theme="light"] .oo-card--active {
    border-left-color: #7f00ff;
}

body[theme="light"] .oo-card-title {
    color: rgba(10, 10, 10, 0.9);
}

body[theme="light"] .oo-card-subtitle {
    color: rgba(10, 10, 10, 0.5);
}

body[theme="light"] .oo-card-icon-fallback {
    color: rgba(10, 10, 10, 0.5);
}

body[theme="light"] .oo-amount {
    color: rgba(10, 10, 10, 0.9);
}

body[theme="light"] .oo-date {
    color: rgba(10, 10, 10, 0.4);
}

body[theme="light"] .oo-reorder-cta {
    color: #7f00ff;
}

body[theme="light"] .oo-status--active {
    background: rgba(127, 0, 255, 0.1);
    color: #6600cc;
}

body[theme="light"] .oo-list-item:hover {
    background: rgba(10, 10, 10, 0.04);
}

body[theme="light"] .oo-list-icon-fallback {
    color: rgba(10, 10, 10, 0.5);
}

body[theme="light"] .oo-list-title {
    color: rgba(10, 10, 10, 0.9);
}

body[theme="light"] .oo-list-meta {
    color: rgba(10, 10, 10, 0.5);
}

body[theme="light"] .oo-list-amount {
    color: rgba(10, 10, 10, 0.85);
}

body[theme="light"] .oo-list-chev {
    color: rgba(10, 10, 10, 0.35);
}

body[theme="light"] .oo-empty-glyph {
    color: rgba(10, 10, 10, 0.4);
}

body[theme="light"] .oo-empty-title {
    color: rgba(10, 10, 10, 0.9);
}

body[theme="light"] .oo-empty-subtitle {
    color: rgba(10, 10, 10, 0.55);
}

body[theme="light"] .oo-starter-btn {
    border: 1px solid rgba(10, 10, 10, 0.08);
    background: rgba(10, 10, 10, 0.02);
    color: rgba(10, 10, 10, 0.7);
}

body[theme="light"] .oo-starter-btn:hover {
    background: rgba(127, 0, 255, 0.08);
    border-color: rgba(127, 0, 255, 0.3);
    color: #7f00ff;
}

body[theme="light"] .oo-loading i {
    color: rgba(10, 10, 10, 0.35);
}

body[theme="light"] .oo-detail-drawer {
    background: #fafafa !important;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
}

body[theme="light"] .oo-detail-drawer .el-drawer__body {
    background: #fafafa !important;
    color: rgba(10, 10, 10, 0.9);
    padding: 0;
}

body[theme="light"] .oo-detail-footer {
    border-top: 1px solid rgba(10, 10, 10, 0.08);
}

body[theme="light"] .oo-detail-btn {
    border: 1px solid rgba(10, 10, 10, 0.08);
    background: rgba(10, 10, 10, 0.02);
    color: rgba(10, 10, 10, 0.8);
}

body[theme="light"] .oo-detail-btn:hover {
    background: rgba(10, 10, 10, 0.05);
    color: rgba(10, 10, 10, 0.95);
}

body[theme="light"] .oo-detail-btn--primary {
    background: rgba(127, 0, 255, 0.1);
    border-color: rgba(127, 0, 255, 0.3);
    color: #6600cc;
}

body[theme="light"] .oo-detail-btn--primary:hover {
    background: rgba(127, 0, 255, 0.16);
    color: #6600cc;
}

body[theme="light"] .dl-tag {
    border: 1px solid rgba(10, 10, 10, 0.08);
    background: rgba(10, 10, 10, 0.015);
    color: rgba(10, 10, 10, 0.9);
}

body[theme="light"] .dl-tag:hover {
    border-color: rgba(127, 0, 255, 0.35);
    background: rgba(127, 0, 255, 0.06);
}

body[theme="light"] .dl-tag-icon-fallback {
    color: rgba(10, 10, 10, 0.5);
}

body[theme="light"] .dl-tag-label {
    color: rgba(10, 10, 10, 0.9);
}

body[theme="light"] .dl-tag-value {
    color: rgba(10, 10, 10, 0.5);
}

body[theme="light"] .dl-add-tag {
    border: 1px dashed rgba(127, 0, 255, 0.45);
    background: transparent;
    color: #6600cc;
}

body[theme="light"] .dl-add-tag:hover {
    background: rgba(127, 0, 255, 0.06);
    border-color: rgba(127, 0, 255, 0.7);
}

body[theme="light"] .dl-add-glyph {
    background: rgba(127, 0, 255, 0.1);
    color: #6600cc;
}

body[theme="light"] .dl-add-drawer {
    background: #fafafa !important;
}

body[theme="light"] .dl-add-drawer .el-drawer__body {
    background: #fafafa !important;
    color: rgba(10, 10, 10, 0.9);
}

body[theme="light"] .dl-add-title {
    color: rgba(10, 10, 10, 0.9);
}

body[theme="light"] .dl-add-sub {
    color: rgba(10, 10, 10, 0.55);
}

body[theme="light"] .dl-add-form .el-form-item__label {
    color: rgba(10, 10, 10, 0.55);
}

body[theme="light"] .dl-add-form .el-input__inner,
body[theme="light"] .dl-add-form .el-textarea__inner {
    background: rgba(10, 10, 10, 0.02);
    border: 1px solid rgba(10, 10, 10, 0.1);
    color: rgba(10, 10, 10, 0.9);
}

body[theme="light"] .dl-add-form .el-input__inner:focus,
body[theme="light"] .dl-add-form .el-textarea__inner:focus {
    border-color: rgba(127, 0, 255, 0.5);
    background: rgba(10, 10, 10, 0.03);
}

body[theme="light"] .dl-add-error {
    color: #b91c1c;
}

body[theme="light"] .dl-add-error i {
    color: #b91c1c;
}

body[theme="light"] .dl-add-btn {
    border: 1px solid rgba(10, 10, 10, 0.08);
    background: rgba(10, 10, 10, 0.02);
    color: rgba(10, 10, 10, 0.8);
}

body[theme="light"] .dl-add-btn:not([disabled]):hover {
    background: rgba(10, 10, 10, 0.05);
    color: rgba(10, 10, 10, 0.95);
}

body[theme="light"] .dl-add-btn--primary {
    background: rgba(127, 0, 255, 0.1);
    border-color: rgba(127, 0, 255, 0.3);
    color: #6600cc;
}

body[theme="light"] .dl-add-btn--primary:not([disabled]):hover {
    background: rgba(127, 0, 255, 0.16);
    color: #6600cc;
}

body[theme="light"] .dl-add-spinner {
    color: #6600cc;
}

/* ── interactive/components/cart/order-chat-view.vue ── */
body[theme="light"] .bc-msg--theirs .bc-msg-bubble {
    background: rgba(10, 10, 10, 0.05);
    color: #171717;
}

body[theme="light"] .bc-composer {
    border-top-color: rgba(10, 10, 10, 0.08);
}

/* ── interactive/components/interaction/canvas/marketplace-section.vue ── */
body[theme="light"] .canvas-marketplace-item-cta--ticket {
    background: rgba(37, 99, 235, 0.1);
    color: #2563eb;
}

body[theme="light"] .canvas-marketplace-toggle {
    color: rgba(10, 10, 10, 0.55);
}

body[theme="light"] .canvas-marketplace-toggle:hover {
    color: rgba(10, 10, 10, 0.9);
}

/* ── interactive/components/interaction/canvas/plan-calendar.vue ── */
body[theme="light"] .pcal-month {
    border-color: rgba(10, 10, 10, 0.08);
    background: rgba(10, 10, 10, 0.015);
}

body[theme="light"] .pcal-month-header {
    border-bottom-color: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .pcal-weekdays {
    border-bottom-color: rgba(10, 10, 10, 0.05);
}

body[theme="light"] .pcal-cell {
    border-right-color: rgba(10, 10, 10, 0.05);
    border-bottom-color: rgba(10, 10, 10, 0.05);
}

body[theme="light"] .pcal-cell--has {
    background: rgba(185, 140, 255, 0.05);
}

/* ── interactive/components/interaction/canvas/plan-empty-state.vue ── */
body[theme="light"] .pes-root {
    border-color: rgba(10, 10, 10, 0.12);
    color: rgba(10, 10, 10, 0.55);
}

/* ── interactive/components/interaction/canvas/plan-itinerary.vue ── */
body[theme="light"] .pi-day-jump {
    background: linear-gradient(to bottom, rgba(250, 250, 250, 0.96) 70%, rgba(250, 250, 250, 0));
}

body[theme="light"] .pi-day-jump-pill {
    border-color: rgba(10, 10, 10, 0.08);
    background: rgba(10, 10, 10, 0.025);
}

body[theme="light"] .pi-day-jump-pill--active {
    color: #6600cc;
}

body[theme="light"] .pi-day {
    border-color: rgba(10, 10, 10, 0.08);
    background: rgba(10, 10, 10, 0.015);
}

body[theme="light"] .pi-day-header {
    border-bottom-color: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .pi-slot {
    border-bottom-color: rgba(10, 10, 10, 0.05);
}

/* ── interactive/components/interaction/canvas/plan-kanban.vue ── */
body[theme="light"] .pkb-col {
    border-color: rgba(10, 10, 10, 0.08);
    background: rgba(10, 10, 10, 0.015);
}

body[theme="light"] .pkb-col-header {
    border-bottom-color: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .pkb-card {
    border-color: rgba(10, 10, 10, 0.08);
    background: rgba(10, 10, 10, 0.025);
}

/* ── interactive/components/interaction/canvas/plan-milestone-road.vue ── */
body[theme="light"] .pmr-card {
    border-color: rgba(10, 10, 10, 0.08);
    background: rgba(10, 10, 10, 0.015);
}

body[theme="light"] .pmr-card-header {
    border-bottom-color: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .pmr-task {
    border-bottom-color: rgba(10, 10, 10, 0.05);
}

/* ── interactive/components/interaction/canvas/plan-swimlane.vue ── */
body[theme="light"] .psw-grid {
    background: rgba(10, 10, 10, 0.08);
    border-color: rgba(10, 10, 10, 0.08);
}

body[theme="light"] .psw-corner,
body[theme="light"] .psw-time-header,
body[theme="light"] .psw-lane-label,
body[theme="light"] .psw-cell {
    background: #fafafa;
}

/* ── interactive/components/interaction/canvas/plan-tile-grid.vue ── */
body[theme="light"] .ptg-tile {
    border-color: rgba(10, 10, 10, 0.08);
    background: rgba(10, 10, 10, 0.015);
}

body[theme="light"] .ptg-tile-header {
    border-bottom-color: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .ptg-tile-item {
    border-bottom-color: rgba(10, 10, 10, 0.05);
}

/* ── interactive/components/interaction/canvas/plan-tree-node.vue ── */
body[theme="light"] .ptn-row {
    background: rgba(10, 10, 10, 0.025);
    border-color: rgba(10, 10, 10, 0.06);
}

/* ── interactive/components/interaction/canvas/planner-drawer.vue ── */
body[theme="light"] .pc-relevant-fact {
    background: rgba(10, 10, 10, 0.025);
    border-color: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .pc-images-thumb {
    border-color: rgba(10, 10, 10, 0.08);
    background: rgba(10, 10, 10, 0.03);
}

body[theme="light"] .canvas-hl {
    background: rgba(245, 158, 11, 0.12);
    border-bottom-color: rgba(245, 158, 11, 0.5);
}

body[theme="light"] .canvas-hl:hover {
    background: rgba(245, 158, 11, 0.22);
}

/* ── interactive/components/interaction/file-viewer.vue ── */
body[theme="light"] .app-file-viewer {
    background: #fafafa;
    border-left-color: rgba(10, 10, 10, 0.08);
}

body[theme="light"] .app-fv-topbar {
    border-bottom-color: rgba(10, 10, 10, 0.08);
}

body[theme="light"] .app-fv-epg-banner {
    color: rgba(10, 10, 10, 0.55);
    background: rgba(127, 0, 255, 0.05);
    border-bottom-color: rgba(10, 10, 10, 0.04);
}

body[theme="light"] .app-fv-epg-facts {
    background: rgba(127, 0, 255, 0.03);
    border-bottom-color: rgba(10, 10, 10, 0.04);
}

body[theme="light"] .app-fv-epg-chip {
    background: rgba(127, 0, 255, 0.08);
    color: rgba(10, 10, 10, 0.6);
}

body[theme="light"] .app-fv-annotations-bar {
    color: rgba(10, 10, 10, 0.45);
    background: rgba(127, 0, 255, 0.03);
    border-bottom-color: rgba(10, 10, 10, 0.04);
}

body[theme="light"] .app-fv-annotations-bar:hover {
    background: rgba(127, 0, 255, 0.05);
}

body[theme="light"] .app-fv-annotations-list {
    border-bottom-color: rgba(10, 10, 10, 0.04);
}

body[theme="light"] .app-fv-annotation {
    border-bottom-color: rgba(10, 10, 10, 0.03);
}

body[theme="light"] .app-fv-annotation-text {
    color: rgba(10, 10, 10, 0.35);
}

body[theme="light"] .app-fv-annotation-reply {
    color: rgba(10, 10, 10, 0.6);
}

body[theme="light"] .app-fv-annotation-reply strong {
    color: rgba(10, 10, 10, 0.8);
}

body[theme="light"] .app-fv-annotation-reply-scroll::-webkit-scrollbar-thumb {
    background: rgba(127, 0, 255, 0.1);
}

body[theme="light"] .app-fv-annotation-meta {
    color: rgba(10, 10, 10, 0.2);
}

body[theme="light"] .app-fv-bubble-loading {
    color: rgba(10, 10, 10, 0.4);
}

body[theme="light"] .app-fv-bubble-loading i {
    color: #7f00ff;
}

body[theme="light"] .app-fv-bubble-actions-border {
    border-top-color: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .app-fv-bubble-secondary {
    border-top-color: rgba(10, 10, 10, 0.04);
}

body[theme="light"] .app-fv-bubble-commerce {
    background: rgba(127, 0, 255, 0.05);
    border-color: rgba(127, 0, 255, 0.12);
    color: #7f00ff;
}

body[theme="light"] .app-fv-bubble-commerce:hover {
    background: rgba(127, 0, 255, 0.1);
}

body[theme="light"] .app-fv-bubble-reply-text {
    color: rgba(10, 10, 10, 0.7);
}

body[theme="light"] .app-fv-bubble-reply-text strong {
    color: rgba(10, 10, 10, 0.85);
}

body[theme="light"] .app-fv-bubble-reply-actions {
    border-top-color: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .app-fv-bubble-reply-scroll::-webkit-scrollbar-thumb {
    background: rgba(127, 0, 255, 0.15);
}

body[theme="light"] .fv-bubble-li::before {
    background: #7f00ff;
}

body[theme="light"] .app-fv-bubble {
    background: #ffffff;
    border-color: rgba(10, 10, 10, 0.1);
    box-shadow: 0 4px 16px rgba(10, 10, 10, 0.12);
}

body[theme="light"] .app-fv-bubble-btn {
    color: rgba(10, 10, 10, 0.6);
}

body[theme="light"] .app-fv-bubble-btn:hover {
    background: rgba(127, 0, 255, 0.08);
    color: #7f00ff;
}

body[theme="light"] .app-fv-recs {
    border-top-color: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .app-fv-recs-header {
    color: rgba(10, 10, 10, 0.75);
}

body[theme="light"] .app-fv-recs-header:hover {
    background: rgba(10, 10, 10, 0.02);
}

body[theme="light"] .app-fv-rec-item {
    border-bottom-color: rgba(10, 10, 10, 0.04);
}

body[theme="light"] .app-fv-rec-icon {
    color: #7f00ff;
}

body[theme="light"] .app-fv-rec-text {
    color: rgba(10, 10, 10, 0.65);
}

body[theme="light"] .app-fv-rec-action {
    color: #7f00ff;
}

/* ── interactive/components/interaction/for-you-panel.vue ── */
body[theme="light"] .fy-list-item {
    border-bottom-color: rgba(10, 10, 10, 0.08);
}

body[theme="light"] .fy-list-toggle {
    color: rgba(10, 10, 10, 0.55);
}

body[theme="light"] .fy-list-toggle:hover {
    color: rgba(10, 10, 10, 0.9);
}

/* ── interactive/components/interaction/message.vue ── */
body[theme="light"] .epg-provenance-chip {
    background: rgba(127, 0, 255, 0.06);
    border-color: rgba(127, 0, 255, 0.12);
}

body[theme="light"] .epg-confirm {
    background: rgba(127, 0, 255, 0.03);
    border-color: rgba(127, 0, 255, 0.08);
}

body[theme="light"] .msg-bubble-loading {
    color: rgba(10, 10, 10, 0.4);
}

body[theme="light"] .msg-bubble-loading i {
    color: #7f00ff;
}

body[theme="light"] .msg-bubble-commerce-row {
    background: linear-gradient(135deg, rgba(127, 0, 255, 0.06), rgba(127, 0, 255, 0.04));
    border-bottom-color: rgba(127, 0, 255, 0.08);
    color: #7f00ff;
}

body[theme="light"] .msg-bubble-commerce-row:hover {
    background: linear-gradient(135deg, rgba(127, 0, 255, 0.1), rgba(127, 0, 255, 0.07));
}

body[theme="light"] .msg-bubble-secondary {
    border-top-color: rgba(10, 10, 10, 0.04);
}

body[theme="light"] .msg-bubble-commerce {
    background: rgba(127, 0, 255, 0.05);
    border-color: rgba(127, 0, 255, 0.12);
    color: #7f00ff;
}

body[theme="light"] .msg-bubble-commerce:hover {
    background: rgba(127, 0, 255, 0.1);
}

body[theme="light"] .msg-bubble {
    background: #ffffff;
    border-color: rgba(10, 10, 10, 0.1);
    box-shadow: 0 4px 16px rgba(10, 10, 10, 0.12);
}

body[theme="light"] .msg-bubble-btn {
    color: rgba(10, 10, 10, 0.6);
}

body[theme="light"] .msg-bubble-btn:hover {
    background: rgba(127, 0, 255, 0.08);
    color: #7f00ff;
}

body[theme="light"] .msg-bubble-actions-border {
    border-top-color: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .msg-bubble-reply-text {
    color: rgba(10, 10, 10, 0.7);
}

body[theme="light"] .msg-bubble-reply-text strong {
    color: rgba(10, 10, 10, 0.85);
}

body[theme="light"] .msg-bubble-reply-foot {
    border-top-color: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .msg-bubble-reply-scroll::-webkit-scrollbar-thumb {
    background: rgba(127, 0, 255, 0.15);
}

body[theme="light"] .msg-bubble-li::before {
    background: #7f00ff;
}

body[theme="light"] .msg-hl {
    background: rgba(245, 158, 11, 0.10);
    border-bottom-color: rgba(245, 158, 11, 0.4);
}

body[theme="light"] .msg-hl:hover {
    background: rgba(245, 158, 11, 0.18);
}

/* ── interactive/components/interaction/split-panel.vue ── */
body[theme="light"] .app-split-panel {
    background: #fafafa;
    border-left-color: rgba(10, 10, 10, 0.08);
}

body[theme="light"] .app-sp-topbar {
    border-bottom-color: rgba(10, 10, 10, 0.08);
}

/* ── interactive/components/notification/nudge-manager.vue ── */
body[theme="light"] .nudge-toast {
    background: #ffffff !important;
    border-color: rgba(127, 0, 255, 0.1) !important;
    box-shadow: 0 8px 32px rgba(10, 10, 10, 0.08) !important;
}

body[theme="light"] .nudge-toast .el-notification__title {
    color: rgba(10, 10, 10, 0.85) !important;
}

body[theme="light"] .nudge-toast .el-notification__content {
    color: rgba(10, 10, 10, 0.5) !important;
}

body[theme="light"] .nudge-toast .el-notification__closeBtn {
    color: rgba(10, 10, 10, 0.2) !important;
}

body[theme="light"] .nudge-toast .el-notification__closeBtn:hover {
    color: rgba(10, 10, 10, 0.4) !important;
}

body[theme="light"] .nudge-action-cta {
    color: #7f00ff;
}

body[theme="light"] .nudge-action-cta:hover {
    color: #6600cc;
}

body[theme="light"] .nudge-mute-btn {
    color: rgba(10, 10, 10, 0.45);
    border-color: rgba(10, 10, 10, 0.12);
}

body[theme="light"] .nudge-mute-btn:hover {
    color: rgba(10, 10, 10, 0.75);
    border-color: rgba(10, 10, 10, 0.22);
    background: rgba(10, 10, 10, 0.03);
}

body[theme="dark"] .nudge-toast {
    background: #302c27 !important;
    border-color: rgba(185, 140, 255, 0.18) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important;
}

body[theme="dark"] .nudge-toast .el-notification__title {
    color: rgba(246, 241, 233, 0.92) !important;
}

body[theme="dark"] .nudge-toast .el-notification__content {
    color: rgba(246, 241, 233, 0.6) !important;
}

body[theme="dark"] .nudge-toast .el-notification__closeBtn {
    color: rgba(246, 241, 233, 0.3) !important;
}

body[theme="dark"] .nudge-toast .el-notification__closeBtn:hover {
    color: rgba(246, 241, 233, 0.55) !important;
}

body[theme="dark"] .nudge-action-cta {
    color: #b98cff;
}

body[theme="dark"] .nudge-action-cta:hover {
    color: #cbaaff;
}

body[theme="dark"] .nudge-mute-btn {
    color: rgba(246, 241, 233, 0.45);
    border-color: rgba(246, 241, 233, 0.14);
}

body[theme="dark"] .nudge-mute-btn:hover {
    color: rgba(246, 241, 233, 0.75);
    border-color: rgba(246, 241, 233, 0.24);
    background: rgba(246, 241, 233, 0.05);
}

/* ── interactive/pages/apps/index.vue ── */
body[theme="light"] .apps-page-intro {
    color: rgba(10, 10, 10, 0.65);
}

body[theme="light"] .apps-page-link {
    color: #7f00ff;
}

body[theme="light"] .apps-page-card {
    background: rgba(10, 10, 10, 0.02);
    border-color: rgba(10, 10, 10, 0.07);
}

/* ── interactive/pages/auth/canvas-reset.vue ── */
body[theme="light"] .canvas-auth {
    --auth-bg: #fafafa;
    --auth-card: #f5f5f5;
    --auth-text: #171717;
    --auth-text-sub: rgba(10, 10, 10, 0.65);
    --auth-border: #e5e5e5;
    --auth-input: rgba(10, 10, 10, 0.04);
}

/* ── interactive/pages/auth/canvas-verify.vue ── */
body[theme="light"] .canvas-auth {
    --auth-bg: #fafafa;
    --auth-card: #f5f5f5;
    --auth-text: #171717;
    --auth-text-sub: rgba(10, 10, 10, 0.65);
    --auth-border: #e5e5e5;
}

/* ── interactive/pages/billing/index.vue ── */
body[theme="light"] .billing-tabs {
    background: var(--surface);
    border-color: var(--border);
}

body[theme="light"] .billing-tab {
    color: var(--text-muted);
}

body[theme="light"] .billing-tab:hover {
    color: var(--text);
    background: var(--surface-2);
}

body[theme="light"] .billing-tab--active {
    background: var(--primary-weak);
    color: var(--primary);
}

/* Current plan: tinted inner panel, so it reads apart from the plan cards. */
body[theme="light"] .account-sub__banner {
    background: var(--surface);
}

body[theme="light"] .account-sub__banner::before {
    background: var(--primary-weaker);
}

body[theme="light"] .account-sub__banner::after {
    border-color: var(--primary-ring);
}

body[theme="light"] .account-sub__badge {
    background: var(--surface);
}

body[theme="light"] .account-sub__badge--active {
    color: var(--ok);
}

body[theme="light"] .account-sub__badge--cancelled {
    color: var(--err);
}

body[theme="light"] .account-sub__badge--past_due {
    color: var(--warn);
}

/* subscription.vue colours the cancel link and the active label inline,
   which is why these two carry !important. */
body[theme="light"] .account-sub__banner .ms-3 {
    color: var(--err) !important;
}

body[theme="light"] .account-sub__plan-row > div:last-child > span:last-child:not(:first-child) {
    color: var(--ok) !important;
}

body[theme="light"] .account-sub__bar,
body[theme="light"] .account-usage__bar {
    background: var(--border);
}

body[theme="light"] .account-sub__bar-fill,
body[theme="light"] .account-usage__bar-fill {
    background: var(--primary);
}

/* Plan and usage cards: the ring stays quiet until hover, and the plan in
   force takes the primary ring. */
body[theme="light"] .account-sub__plan-row,
body[theme="light"] .account-sub__plan-row--active,
body[theme="light"] .account-usage__card {
    background: var(--surface);
}

body[theme="light"] .account-sub__plan-row::before,
body[theme="light"] .account-usage__card::before {
    background: var(--surface-2);
}

body[theme="light"] .account-sub__plan-row::after,
body[theme="light"] .account-usage__card::after {
    border-color: var(--border-strong);
}

body[theme="light"] .account-sub__plan-row:hover::after {
    border-color: var(--line);
}

body[theme="light"] .account-sub__plan-row--active::before {
    background: var(--primary-weaker);
}

body[theme="light"] .account-sub__plan-row--active::after {
    border-color: var(--primary);
}

body[theme="light"] .account-sub__popular {
    background: var(--primary-weak);
    color: var(--primary);
}

body[theme="light"] .account-sub__plan-row .el-button {
    background: var(--surface);
    border-color: var(--border-strong);
    color: var(--text);
}

body[theme="light"] .account-sub__plan-row .el-button:hover,
body[theme="light"] .account-sub__plan-row .el-button:focus {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
}

body[theme="light"] .account-sub__plan-row .el-button--primary {
    background: var(--surface);
    border-color: var(--primary-ring);
    color: var(--primary);
    box-shadow: inset 0 0 11px 0 var(--primary-weak);
}

body[theme="light"] .account-sub__plan-row .el-button--primary:hover,
body[theme="light"] .account-sub__plan-row .el-button--primary:focus {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
    box-shadow: none;
}

/* Upgrade drawer */
body[theme="light"] .account-sub__benefit {
    border-bottom-color: var(--border);
}

body[theme="light"] .account-sub__benefit:not(.account-sub__benefit--off) .account-sub__benefit-icon {
    color: var(--ok);
}

body[theme="light"] .account-sub__chip {
    border-color: var(--border-strong);
    color: var(--text-sub);
}

body[theme="light"] .account-sub__chip--active {
    border-color: var(--primary);
    color: var(--primary);
}

body[theme="light"] .account-sub .small-title,
body[theme="light"] .account-usage .small-title,
body[theme="light"] .account-sub .row + div {
    color: var(--text-muted);
}

body[theme="light"] .account-usage__callout {
    color: var(--text-sub);
}

body[theme="light"] .account-usage__callout--warn {
    color: var(--err);
}

body[theme="light"] .account-sub a,
body[theme="light"] .account-usage a {
    color: var(--primary);
}

/* inline opacity on these rows multiplies the token back down below AA; the token already carries the intent */
body[theme="light"] .account-sub__banner > div:last-of-type { opacity: 1 !important; color: var(--text-muted); }
body[theme="light"] .account-sub__banner .ms-3 { opacity: 1 !important; color: var(--err) !important; }
body[theme="light"] .account-sub .row + div { opacity: 1 !important; color: var(--text-muted); }
body[theme="light"] .account-usage__callout { opacity: 1 !important; color: var(--text-sub); }
body[theme="light"] .account-sub__plan-row > div:first-child > div > div:last-child { opacity: 1 !important; color: var(--text-sub); }

/* ── interactive/pages/d/index.vue ── */
body[theme="light"] .marketplace-header {
    border-bottom-color: rgba(10, 10, 10, 0.06);
}

body[theme="light"] .marketplace-title {
    color: rgba(10, 10, 10, 0.9);
}

body[theme="light"] .marketplace-subtitle {
    color: rgba(10, 10, 10, 0.5);
}

body[theme="light"] .marketplace-section-header {
    color: rgba(10, 10, 10, 0.55);
    border-bottom-color: rgba(10, 10, 10, 0.04);
}

/* ── interactive/pages/hm/index.vue ── */
body[theme="light"] .ld-brief-greeting {
    color: var(--text);
}

body[theme="light"] .ld-brief-subtitle {
    color: var(--text-sub);
}

body[theme="light"] .ld-nextup-cta-text {
    color: var(--text);
}

body[theme="light"] .ld-nextup-cta-arrow {
    color: var(--text-muted);
}

body[theme="light"] .ld-nextup-cta:hover .ld-nextup-cta-text,
body[theme="light"] .ld-nextup-cta:hover .ld-nextup-cta-arrow {
    color: var(--primary);
}

body[theme="light"] .ld-brief-card {
    background: var(--surface);
    border-color: var(--border);
}

body[theme="light"] .ld-brief-card-tag {
    color: var(--text-muted);
}

body[theme="light"] .ld-brief-card-item + .ld-brief-card-item {
    border-top-color: var(--border);
}

body[theme="light"] .ld-brief-card-item-mark {
    color: var(--text-muted);
}

body[theme="light"] .ld-brief-card-item-text {
    color: var(--text);
}

body[theme="light"] .ld-brief-card-empty {
    color: var(--text-muted);
}

body[theme="light"] .ld-brief-card-toggle {
    color: var(--text-muted);
}

body[theme="light"] .ld-brief-card-toggle:hover {
    color: var(--text);
}

body[theme="light"] .ld-brief-card-actions {
    border-top-color: var(--border);
}

body[theme="light"] .ld-brief-card-act {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--text-sub);
}

body[theme="light"] .ld-brief-card-act:hover {
    border-color: var(--primary-ring);
    color: var(--primary);
}

/* The one action in the row that reveals instead of navigating. */
body[theme="light"] .ld-brief-card-act--surprise {
    color: var(--primary);
}

body[theme="light"] .ld-surprise {
    background: var(--surface-2);
    border-color: var(--border);
}

body[theme="light"] .ld-surprise-eyebrow {
    color: var(--text-muted);
}

body[theme="light"] .ld-surprise-text {
    color: var(--text);
}

body[theme="light"] .ld-surprise-foot span {
    color: var(--text-muted);
}

body[theme="light"] .ld-surprise-foot span:hover {
    color: var(--text);
}

/* The recap ground has to stay opaque: html2canvas captures it as a PNG. */
body[theme="light"] .ld-recap {
    background: var(--surface);
    border-color: var(--border);
}

body[theme="light"] .ld-recap-eyebrow {
    color: var(--text-muted);
}

body[theme="light"] .ld-recap-week {
    color: var(--text-sub);
}

body[theme="light"] .ld-recap-chevron {
    color: var(--text-muted);
}

body[theme="light"] .ld-recap-eyebrow--clickable:hover .ld-recap-chevron {
    color: var(--text);
}

body[theme="light"] .ld-recap-text {
    color: var(--text);
}

body[theme="light"] .ld-recap-toggle {
    color: var(--text-muted);
}

body[theme="light"] .ld-recap-toggle:hover {
    color: var(--text);
}

body[theme="light"] .ld-recap-highlights,
body[theme="light"] .ld-recap-highlight + .ld-recap-highlight,
body[theme="light"] .ld-recap-actions,
body[theme="light"] .ld-recap.is-capturing .ld-recap-watermark {
    border-top-color: var(--border);
}

body[theme="light"] .ld-recap-highlight-when {
    color: var(--text-muted);
}

body[theme="light"] .ld-recap-highlight-text {
    color: var(--text-sub);
}

body[theme="light"] .ld-recap-act {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--text-sub);
}

body[theme="light"] .ld-recap-act:hover:not([disabled]) {
    border-color: var(--primary-ring);
    color: var(--primary);
}

body[theme="light"] .ld-recap-act--ghost {
    background: none;
    color: var(--text-muted);
}

body[theme="light"] .ld-recap-watermark span {
    color: var(--text-muted);
}

body[theme="light"] .ld-section-title {
    color: var(--text-muted);
}

body[theme="light"] .ld-section-title::after {
    background: var(--border);
}

body[theme="light"] .ld-view-toggle {
    border-color: var(--border);
    color: var(--text-muted);
}

body[theme="light"] .ld-view-toggle:hover {
    border-color: var(--border-strong);
    color: var(--text);
}

body[theme="light"] .ld-score-row + .ld-score-row,
body[theme="light"] .ld-record-item + .ld-record-item {
    border-top-color: var(--border);
}

body[theme="light"] .ld-score-label,
body[theme="light"] .ld-score-num {
    color: var(--text);
}

body[theme="light"] .ld-score-trend.is-up {
    color: var(--ok);
}

body[theme="light"] .ld-score-trend.is-down {
    color: var(--err);
}

body[theme="light"] .ld-record-label {
    color: var(--text-sub);
}

body[theme="light"] .ld-record-best {
    color: var(--text);
}

body[theme="light"] .ld-record-current {
    color: var(--text-muted);
}

body[theme="light"] .ld-epg-bar {
    border-color: var(--border);
}

body[theme="light"] .ld-epg-bar:hover {
    border-color: var(--primary-ring);
}

body[theme="light"] .ld-epg-bar-label {
    color: var(--text-sub);
}

body[theme="light"] .ld-epg-bar-arrow {
    color: var(--text-muted);
}

body[theme="light"] .ld-feed-card {
    background: var(--surface);
    border-color: var(--border);
}

body[theme="light"] .ld-feed-card:hover {
    border-color: var(--primary-ring);
}

body[theme="light"] .ld-feed-card-mark,
body[theme="light"] .ld-feed-card-desc,
body[theme="light"] .ld-feed-card-arrow,
body[theme="light"] .ld-feed-card-dismiss {
    color: var(--text-muted);
}

body[theme="light"] .ld-feed-card-title {
    color: var(--text);
}

body[theme="light"] .ld-feed-card-dismiss:hover {
    background: var(--surface-2);
    color: var(--err);
}

body[theme="light"] .ld-feed-drawer {
    background: var(--surface) !important;
    color: var(--text) !important;
}

body[theme="light"] .ld-feed-drawer .el-drawer__body {
    background: var(--surface) !important;
}

body[theme="light"] .ld-feed-detail-mark {
    color: var(--text-muted);
}

body[theme="light"] .ld-feed-detail-title {
    color: var(--text);
}

body[theme="light"] .ld-feed-detail-body {
    color: var(--text-sub);
}

body[theme="light"] .ld-feed-detail-btn {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--text);
}

body[theme="light"] .ld-feed-detail-btn:hover {
    border-color: var(--primary-ring);
    color: var(--primary);
}

body[theme="light"] .ld-feed-detail-dismiss {
    color: var(--err);
}

body[theme="light"] .ld-feed-detail-dismiss:hover {
    border-color: var(--err);
    color: var(--err);
}

body[theme="light"] .ld-people-card {
    border-color: var(--border);
}

body[theme="light"] .ld-people-card:hover {
    border-color: var(--primary-ring);
}

body[theme="light"] .ld-people-avatar {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--text);
}

body[theme="light"] .ld-people-name {
    color: var(--text);
}

body[theme="light"] .ld-people-note,
body[theme="light"] .ld-people-add-avatar,
body[theme="light"] .ld-people-add-label {
    color: var(--text-muted);
}

body[theme="light"] .ld-spending-card {
    background: var(--surface);
    border-color: var(--border);
}

body[theme="light"] .ld-spending-total {
    color: var(--text);
}

/* Spending below last month reads as the good direction. */
body[theme="light"] .ld-spending-change.is-lower {
    color: var(--ok);
}

body[theme="light"] .ld-spending-change.is-higher {
    color: var(--err);
}

body[theme="light"] .ld-spending-top,
body[theme="light"] .ld-spending-labels span {
    color: var(--text-muted);
}

body[theme="light"] .ld-spending-bar {
    background: var(--primary-ring);
}

body[theme="light"] .ld-wishlist-item {
    border-color: var(--border);
}

body[theme="light"] .ld-wishlist-item > i,
body[theme="light"] .ld-wishlist-status {
    color: var(--text-muted);
}

body[theme="light"] .ld-wishlist-name,
body[theme="light"] .ld-wishlist-price {
    color: var(--text);
}

body[theme="light"] .ld-mood-summary {
    color: var(--text-sub);
}

body[theme="light"] .ld-stat-card {
    border-top-color: var(--border);
}

body[theme="light"] .ld-stat-value {
    color: var(--text);
}

body[theme="light"] .ld-stat-label {
    color: var(--text-muted);
}

body[theme="light"] .ld-activity-item + .ld-activity-item {
    border-top-color: var(--border);
}

body[theme="light"] .ld-activity-icon,
body[theme="light"] .ld-activity-time,
body[theme="light"] .ld-activity-arrow {
    color: var(--text-muted);
}

body[theme="light"] .ld-activity-title {
    color: var(--text);
}

body[theme="light"] .ld-activity-item:hover .ld-activity-title {
    color: var(--primary);
}

body[theme="light"] .ld-empty-hint {
    color: var(--text-muted);
}

body[theme="light"] .ld-upgrade-link {
    color: var(--primary);
}

body[theme="light"] .ld-guest-title {
    color: var(--text);
}

body[theme="light"] .ld-guest-desc {
    color: var(--text-sub);
}

body[theme="light"] .el-drawer.ld-pulse-drawer {
    background: var(--surface) !important;
    color: var(--text) !important;
}

body[theme="light"] .el-drawer.ld-pulse-drawer .el-drawer__body {
    background: var(--surface) !important;
}

body[theme="light"] .ld-pulse-next {
    background: var(--surface-2);
    border-color: var(--border);
}

body[theme="light"] .ld-pulse-next:hover {
    border-color: var(--primary-ring);
}

body[theme="light"] .ld-pulse-next-mark,
body[theme="light"] .ld-pulse-next-label,
body[theme="light"] .ld-pulse-next-arrow {
    color: var(--text-muted);
}

body[theme="light"] .ld-pulse-next-text {
    color: var(--text);
}

body[theme="light"] .ld-pulse-streaks-title {
    color: var(--text-muted);
}

body[theme="light"] .ld-pulse-streak-card {
    border-top-color: var(--border);
}

body[theme="light"] .ld-pulse-streak-value {
    color: var(--text);
}

body[theme="light"] .ld-pulse-streak-label {
    color: var(--text-muted);
}

/* ── interactive/pages/journal/public/_id/index.vue ── */
/* custom.css forces Satoshi on every h-tag with !important, so the title has
   to insist on the display face. */
body[theme="light"] .jp-title.bt-display {
    font-family: var(--serif) !important;
    font-weight: 340 !important;
}

body[theme="light"] .jp-root {
    background: var(--bg);
    color: var(--text);
}

body[theme="light"] .jp-state-icon,
body[theme="light"] .jp-state-msg {
    color: var(--text-muted);
}

body[theme="light"] .jp-header {
    border-bottom: 1px solid var(--border);
}

body[theme="light"] .jp-brand {
    color: var(--text) !important;
}

/* custom.css paints every anchor Element blue with !important, so the public
   page's links have to out-shout it. */
body[theme="light"] .jp-footer a,
body[theme="light"] .jp-content a {
    color: var(--primary) !important;
}

body[theme="light"] .jp-content a {
    text-decoration: underline !important;
}

body[theme="light"] .jp-masthead {
    border-bottom: 1px solid var(--border);
}

body[theme="light"] .jp-publisher-avatar {
    border: 1px solid var(--border-strong);
}

body[theme="light"] .jp-publisher-name {
    color: var(--text);
}

body[theme="light"] .jp-publisher-dot {
    background: var(--border-strong);
}

/* Body copy keeps the full text weight: this page is read, not scanned. */
body[theme="light"] .jp-content,
body[theme="light"] .jp-content h1,
body[theme="light"] .jp-content h2,
body[theme="light"] .jp-content h3 {
    color: var(--text);
}

body[theme="light"] .jp-content blockquote {
    border-left-color: var(--primary-ring);
    color: var(--text-sub);
}

body[theme="light"] .jp-content th,
body[theme="light"] .jp-content td {
    border-color: var(--border);
}

body[theme="light"] .jp-content th {
    background: var(--surface-2);
    color: var(--text-muted);
}

body[theme="light"] .jp-content img {
    border: 1px solid var(--border);
}

body[theme="light"] .jp-content pre,
body[theme="light"] .jp-content code {
    font-family: var(--mono);
    background: var(--surface-2);
    color: var(--text);
}

body[theme="light"] .jp-content hr {
    border-top-color: var(--border);
}

body[theme="light"] .jp-content mark {
    background: var(--primary-weak);
    color: var(--text);
}

body[theme="light"] .editor-mention {
    background: var(--primary-weak);
    color: var(--primary);
}

body[theme="light"] .editor-comment-mark {
    background: var(--primary-weaker);
    border-bottom-color: var(--warn);
}

body[theme="light"] .jp-comment-popover {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    color: var(--text);
    box-shadow: 0 8px 24px var(--shadow);
}

body[theme="light"] .jp-popover-close {
    color: var(--text-muted);
}

body[theme="light"] .jp-popover-row {
    border-bottom-color: var(--border);
}

body[theme="light"] .jp-popover-author {
    color: var(--primary);
}

body[theme="light"] .jp-popover-text {
    color: var(--text-sub);
}

body[theme="light"] .jp-footer {
    border-top: 1px solid var(--border);
    color: var(--text-muted);
}

/* ── interactive/pages/onboarding/index.vue ── */
/* custom.css forces Satoshi on every h-tag with !important, so the display
   face has to insist here. */
body[theme="light"] .onb-page .bt-display {
    font-family: var(--serif) !important;
    font-weight: 340 !important;
}

body[theme="light"] .onb-page {
    --onb-text: #171717;
    --onb-text-muted: rgba(10, 10, 10, 0.62);
    --onb-text-faint: rgba(10, 10, 10, 0.42);
    --onb-border: rgba(10, 10, 10, 0.08);
    --onb-border-hover: rgba(10, 10, 10, 0.18);
    --onb-tile-bg: rgba(10, 10, 10, 0.015);
    --onb-tile-bg-hover: rgba(10, 10, 10, 0.03);
    --onb-accent: #7f00ff;
    --onb-accent-soft: rgba(127, 0, 255, 0.10);
    --onb-accent-text: #ffffff;
    --onb-firstwords-bg: rgba(127, 0, 255, 0.05);
    --onb-error: #e11d48;
    --onb-step-dot: rgba(10, 10, 10, 0.14);
    --onb-step-dot-on: #7f00ff;
    background: var(--bg);
    color: var(--text);
}

body[theme="light"] .onb-subtitle,
body[theme="light"] .onb-ack {
    color: var(--text-sub);
}

body[theme="light"] .onb-step-dot {
    background: var(--border);
}

body[theme="light"] .onb-step-dot.active {
    background: var(--line);
}

body[theme="light"] .onb-step-dot.current {
    background: var(--primary);
}

/* Option cards keep the frame ring quiet until hover or selection, so a
   grid of fifteen tiles does not read as fifteen outlines. */
body[theme="light"] .onb-archetype.bt-frame::after,
body[theme="light"] .onb-grid-item.bt-frame::after {
    border-color: var(--border);
}

body[theme="light"] .onb-archetype.bt-frame:hover::after,
body[theme="light"] .onb-grid-item.bt-frame:hover::after {
    border-color: var(--border-strong);
}

body[theme="light"] .onb-archetype.bt-frame.selected::after,
body[theme="light"] .onb-grid-item.bt-frame.selected::after {
    border-color: var(--primary);
}

body[theme="light"] .onb-archetype:hover .bt-frame__in,
body[theme="light"] .onb-grid-item:hover .bt-frame__in {
    background: var(--primary-weaker);
}

body[theme="light"] .onb-archetype.selected .bt-frame__in,
body[theme="light"] .onb-grid-item.selected .bt-frame__in {
    background: var(--primary-weak);
}

body[theme="light"] .onb-grid-item:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

body[theme="light"] .onb-archetype-name,
body[theme="light"] .onb-grid-label {
    color: var(--text);
}

body[theme="light"] .onb-archetype-desc,
body[theme="light"] .onb-archetype-sample {
    color: var(--text-sub);
}

body[theme="light"] .onb-grid-icon {
    color: var(--text-muted);
}

body[theme="light"] .onb-grid-item.selected .onb-grid-icon,
body[theme="light"] .onb-grid-check {
    color: var(--primary);
}

body[theme="light"] .onb-fine-tune {
    background: var(--surface);
    border: 1px solid var(--border);
}

body[theme="light"] .onb-fine-tune > summary i {
    color: var(--text-muted);
}

body[theme="light"] .onb-slider-label {
    color: var(--text);
}

body[theme="light"] .onb-slider input[type="range"] {
    accent-color: var(--primary);
}

body[theme="light"] .onb-glyph-cell.bt-ico {
    background: var(--surface);
    color: var(--text-sub);
}

body[theme="light"] .onb-glyph-cell.bt-ico::after {
    border-color: var(--border);
}

body[theme="light"] .onb-glyph-cell.bt-ico:hover {
    background: var(--primary-weaker);
    color: var(--text);
}

body[theme="light"] .onb-glyph-cell.bt-ico:hover::after {
    border-color: var(--border-strong);
}

body[theme="light"] .onb-glyph-cell.bt-ico.selected {
    background: var(--primary-weak);
    color: var(--primary);
}

body[theme="light"] .onb-glyph-cell.bt-ico.selected::after {
    border-color: var(--primary);
}

/* The swatch carries the accent itself, so selection reads as a gap ring in
   the page ground followed by an ink ring. */
body[theme="light"] .onb-color-swatch {
    border: 2px solid transparent;
    box-shadow: 0 0 0 1px var(--border-strong);
}

body[theme="light"] .onb-color-swatch.selected {
    border-color: var(--bg);
    box-shadow: 0 0 0 2px var(--ink);
}

body[theme="light"] .onb-firstwords.bt-frame::after {
    border-color: var(--border-strong);
}

body[theme="light"] .onb-firstwords .bt-frame__in {
    background: var(--primary-weaker);
}

body[theme="light"] .onb-firstwords-mark.bt-ico {
    background: var(--surface);
}

body[theme="light"] .onb-firstwords-mark.bt-ico::after {
    border-color: var(--border);
}

body[theme="light"] .onb-firstwords-from.bt-meta {
    color: var(--text-sub);
}

body[theme="light"] .onb-firstwords-line {
    color: var(--text);
}

body[theme="light"] .onb-error {
    color: var(--err);
}

/* Element renders the name and first-message fields, so their treatment is
   mirrored here rather than hung off the shared vocabulary. */
body[theme="light"] .onb-page .el-input__inner,
body[theme="light"] .onb-page .el-textarea__inner {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    color: var(--text);
}

body[theme="light"] .onb-page .el-input__inner::placeholder,
body[theme="light"] .onb-page .el-textarea__inner::placeholder {
    color: var(--text-muted);
}

body[theme="light"] .onb-page .el-input__inner:focus,
body[theme="light"] .onb-page .el-textarea__inner:focus {
    border-color: var(--primary);
}

body[theme="light"] .onb-page .el-input__count,
body[theme="light"] .onb-page .el-input__count-inner {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    background: transparent;
    color: var(--text-muted);
}

/* ── interactive/pages/org/index.vue ── */
body[theme="light"] .org-dialog.el-dialog {
    background-color: #ffffff !important;
    border-color: rgba(10, 10, 10, 0.08);
    box-shadow: 0 12px 40px rgba(10, 10, 10, 0.12);
}

body[theme="light"] .org-dialog .el-dialog__header,
body[theme="light"] .org-dialog .el-dialog__body {
    background-color: #ffffff !important;
    color: #171717;
}

body[theme="light"] .org-dialog .el-dialog__header {
    border-bottom-color: rgba(10, 10, 10, 0.07);
}

body[theme="light"] .org-dialog .el-dialog__title {
    color: #171717;
}

body[theme="light"] .org-dialog .el-dialog__close {
    color: rgba(10, 10, 10, 0.5) !important;
}

body[theme="light"] .org-dialog .el-dialog__close:hover {
    color: #171717 !important;
}

/* ── interactive/pages/p/index.vue ── */
body[theme="light"] .p-epg-card {
    border-color: rgba(127, 0, 255, 0.1);
}

body[theme="light"] .p-epg-chip {
    background: rgba(127, 0, 255, 0.06);
    color: rgba(10, 10, 10, 0.55);
}

body[theme="light"] .p-epg-more {
    background: rgba(127, 0, 255, 0.04);
    color: #7f00ff;
}

/* ── interactive/pages/plan/public/_id/index.vue ── */
/* custom.css forces Satoshi on every h-tag with !important, so the title has
   to insist on the display face. */
body[theme="light"] .pp-title.bt-display {
    font-family: var(--serif) !important;
    font-weight: 340 !important;
}

body[theme="light"] .pp-root {
    background: var(--bg);
    color: var(--text);
}

body[theme="light"] .pp-state-icon,
body[theme="light"] .pp-state-msg {
    color: var(--text-muted);
}

body[theme="light"] .pp-header {
    border-bottom: 1px solid var(--border);
}

body[theme="light"] .pp-brand {
    color: var(--text) !important;
}

/* custom.css paints every anchor Element blue with !important, so the public
   page's links have to out-shout it. */
body[theme="light"] .pp-footer a,
body[theme="light"] .pp-content a {
    color: var(--primary) !important;
}

body[theme="light"] .pp-content a {
    text-decoration: underline !important;
}

body[theme="light"] .pp-masthead {
    border-bottom: 1px solid var(--border);
}

body[theme="light"] .pp-publisher-avatar {
    border: 1px solid var(--border-strong);
}

body[theme="light"] .pp-publisher-name {
    color: var(--text);
}

body[theme="light"] .pp-publisher-dot {
    background: var(--border-strong);
}

body[theme="light"] .pp-progress-bar {
    background: var(--surface-2);
    box-shadow: inset 0 0 0 1px var(--border);
}

body[theme="light"] .pp-progress-fill {
    background: linear-gradient(90deg, var(--primary-ring), var(--primary));
}

/* Body copy keeps the full text weight: this page is read, not scanned. */
body[theme="light"] .pp-content,
body[theme="light"] .pp-content h1,
body[theme="light"] .pp-content h2,
body[theme="light"] .pp-content h3 {
    color: var(--text);
}

/* Plan blocks sit on the frame's --surface-2 ground, so their fill is
   --surface to stay one step apart from it. */
body[theme="light"] .pp-content [data-plan-block="milestone"] {
    border-left-color: var(--primary);
    background: var(--primary-weaker);
    color: var(--primary);
}

body[theme="light"] .pp-content [data-plan-block="task"] {
    border-left-color: var(--ok);
    background: var(--surface);
    color: var(--text);
}

body[theme="light"] .pp-content [data-plan-block="task"][data-status="done"] {
    border-left-color: var(--border-strong);
    color: var(--text-muted);
}

body[theme="light"] .pp-content [data-plan-block="task"][data-status="in_progress"] {
    border-left-color: var(--primary);
}

body[theme="light"] .pp-content [data-plan-block="task"][data-status="blocked"] {
    border-left-color: var(--err);
}

body[theme="light"] .pp-content [data-plan-block="deadline"] {
    border-left-color: var(--err);
    background: var(--surface);
    color: var(--err);
}

body[theme="light"] .pp-content th,
body[theme="light"] .pp-content td {
    border-color: var(--border);
}

body[theme="light"] .pp-content th {
    background: var(--surface);
    color: var(--text-muted);
}

body[theme="light"] .pp-content img {
    border: 1px solid var(--border);
}

body[theme="light"] .pp-content pre,
body[theme="light"] .pp-content code {
    font-family: var(--mono);
    background: var(--surface);
    color: var(--text);
}

body[theme="light"] .pp-content hr {
    border-top-color: var(--border);
}

body[theme="light"] .pp-content mark {
    background: var(--primary-weak);
    color: var(--text);
}

body[theme="light"] .pp-comment-popover {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    color: var(--text);
    box-shadow: 0 8px 24px var(--shadow);
}

body[theme="light"] .pp-popover-close {
    color: var(--text-muted);
}

body[theme="light"] .pp-popover-row {
    border-bottom-color: var(--border);
}

body[theme="light"] .pp-popover-author {
    color: var(--primary);
}

body[theme="light"] .pp-popover-text {
    color: var(--text-sub);
}

body[theme="light"] .pp-footer {
    border-top: 1px solid var(--border);
    color: var(--text-muted);
}

/* ── interactive/pages/repo/index.vue ── */
body[theme="light"] .repo-search-input {
    border-color: rgba(10, 10, 10, 0.08);
}

body[theme="light"] .repo-search-input:focus {
    border-color: rgba(127, 0, 255, 0.4);
}

body[theme="light"] .repo-filter-btn {
    border-color: rgba(10, 10, 10, 0.06);
    color: rgba(10, 10, 10, .4);
}

body[theme="light"] .repo-filter-btn:hover {
    border-color: rgba(10, 10, 10, 0.12);
    color: rgba(10, 10, 10, .7);
}

body[theme="light"] .repo-filter-btn.active {
    background: rgba(127, 0, 255, 0.06);
    border-color: rgba(127, 0, 255, 0.2);
    color: #7f00ff;
}

body[theme="light"] .repo-card {
    border-color: rgba(10, 10, 10, 0.06);
    background: rgba(10, 10, 10, 0.01);
}

body[theme="light"] .repo-card:hover {
    border-color: rgba(127, 0, 255, 0.2);
    background: rgba(127, 0, 255, 0.02);
}

body[theme="light"] .repo-card-stat {
    background: rgba(10, 10, 10, 0.04);
}

/* ── interactive/pages/research/public/_id/index.vue ── */
/* custom.css forces Satoshi on every h-tag with !important, so the title has
   to insist on the display face. */
body[theme="light"] .rp-title.bt-display {
    font-family: var(--serif) !important;
    font-weight: 340 !important;
}

body[theme="light"] .rp-root {
    background: var(--bg);
    color: var(--text);
}

body[theme="light"] .rp-state-icon,
body[theme="light"] .rp-state-msg {
    color: var(--text-muted);
}

body[theme="light"] .rp-header {
    border-bottom: 1px solid var(--border);
}

body[theme="light"] .rp-brand {
    color: var(--text) !important;
}

body[theme="light"] .rp-masthead {
    border-bottom: 1px solid var(--border);
}

body[theme="light"] .rp-publisher-avatar {
    border: 1px solid var(--border-strong);
}

body[theme="light"] .rp-avatar-placeholder {
    background: var(--primary-weak);
    color: var(--primary);
}

body[theme="light"] .rp-publisher-name {
    color: var(--text);
}

body[theme="light"] .rp-publisher-dot {
    background: var(--border-strong);
}

/* Body copy keeps the full text weight: this page is read, not scanned. */
body[theme="light"] .rp-prose,
body[theme="light"] .rp-prose h2,
body[theme="light"] .rp-prose h3 {
    color: var(--text);
}

/* custom.css paints every anchor Element blue with !important, so the public
   page's links have to out-shout it. */
body[theme="light"] .rp-prose a {
    color: var(--primary) !important;
    text-decoration: underline !important;
}

body[theme="light"] .rp-prose blockquote {
    border-left-color: var(--primary-ring);
    color: var(--text-sub);
}

/* Research blocks sit on the frame's --surface-2 ground, so their fill is
   --surface to stay one step apart from it. */
body[theme="light"] .rp-prose [data-research-block="summary"] {
    background: var(--surface);
    border-color: var(--border);
}

body[theme="light"] .rp-prose [data-research-block="finding"] {
    border-left-color: var(--primary);
    background: var(--primary-weaker);
}

body[theme="light"] .rp-prose [data-research-block="methodology"] {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text-sub);
}

body[theme="light"] .rp-prose [data-research-block="conclusion"] {
    border-top-color: var(--border-strong);
}

body[theme="light"] .rp-prose th,
body[theme="light"] .rp-prose td {
    border-color: var(--border);
}

body[theme="light"] .rp-prose th {
    background: var(--surface);
    color: var(--text-muted);
}

body[theme="light"] .rp-prose img {
    border: 1px solid var(--border);
}

body[theme="light"] .rp-prose pre,
body[theme="light"] .rp-prose code {
    font-family: var(--mono);
    background: var(--surface);
    color: var(--text);
}

body[theme="light"] .rp-prose hr {
    border-top-color: var(--border);
}

body[theme="light"] .rp-prose mark {
    background: var(--primary-weak);
    color: var(--text);
}

/* custom.css forces Satoshi on every h-tag with !important, so the mono
   section label has to insist. */
body[theme="light"] h3.rp-citations-title.bt-meta {
    font-family: var(--mono) !important;
    font-weight: 400 !important;
    color: var(--text-muted);
}

body[theme="light"] .rp-citations-section {
    border-top-color: var(--border);
}

body[theme="light"] .rp-citation-card {
    border-bottom-color: var(--border);
}

body[theme="light"] .rp-citation-title {
    color: var(--primary) !important;
}

/* custom.css strips every anchor underline with !important. */
body[theme="light"] .rp-citation-title:hover {
    text-decoration: underline !important;
}

body[theme="light"] .rp-citation-snippet {
    color: var(--text-sub);
}

body[theme="light"] .rp-footer {
    border-top: 1px solid var(--border);
    color: var(--text-muted);
}

/* The footer mark reads as a wordmark, not an accent link. */
body[theme="light"] .rp-footer-brand {
    color: var(--text) !important;
}

/* ── interactive/pages/triggers/index.vue ── */
body[theme="light"] .triggers-intro {
    color: rgba(10, 10, 10, 0.65);
}

body[theme="light"] .triggers-link {
    color: #7f00ff;
}

body[theme="light"] .triggers-empty {
    background: rgba(10, 10, 10, 0.02);
    border-color: rgba(10, 10, 10, 0.12);
}

body[theme="light"] .trigger-card {
    background: rgba(10, 10, 10, 0.02);
    border-color: rgba(10, 10, 10, 0.07);
}

body[theme="light"] .trigger-delete-btn {
    color: rgba(10, 10, 10, 0.4);
}

body[theme="light"] .triggers-templates-btn {
    border-color: rgba(127, 0, 255, 0.28);
    background: rgba(127, 0, 255, 0.05);
    color: #7f00ff;
}

body[theme="light"] .triggers-rail-browse-all {
    color: #7f00ff;
}

body[theme="light"] .triggers-rail-card {
    background: rgba(127, 0, 255, 0.04);
    border-color: rgba(127, 0, 255, 0.18);
}

body[theme="light"] .triggers-rail-btn {
    border-color: rgba(127, 0, 255, 0.28);
}

body[theme="light"] .triggers-soft-empty {
    background: rgba(10, 10, 10, 0.02);
    border-color: rgba(10, 10, 10, 0.08);
}

body[theme="light"] .triggers-template-dialog.el-dialog {
    background-color: #ffffff !important;
    border-color: rgba(10, 10, 10, 0.08);
    box-shadow: 0 12px 40px rgba(10, 10, 10, 0.12);
}

body[theme="light"] .triggers-template-dialog .el-dialog__header,
body[theme="light"] .triggers-template-dialog .el-dialog__body {
    background-color: #ffffff !important;
    color: #171717;
}

body[theme="light"] .triggers-template-dialog .el-dialog__header {
    border-bottom-color: rgba(10, 10, 10, 0.07);
}

body[theme="light"] .triggers-template-dialog .el-dialog__title {
    color: #171717;
}

body[theme="light"] .triggers-template-dialog .el-dialog__close {
    color: rgba(10, 10, 10, 0.5) !important;
}

body[theme="light"] .triggers-template-dialog .el-dialog__close:hover {
    color: #171717 !important;
}

body[theme="light"] .triggers-template-card {
    border-color: rgba(10, 10, 10, 0.08);
    background: rgba(10, 10, 10, 0.015);
}

body[theme="light"] .triggers-template-tag {
    background: rgba(127, 0, 255, 0.08);
    color: #7f00ff;
}

body[theme="light"] .triggers-template-btn {
    border-color: rgba(10, 10, 10, 0.12);
}

body[theme="light"] .triggers-template-btn--ghost:hover {
    background: rgba(10, 10, 10, 0.04);
}

body[theme="light"] .triggers-link {
    color: #7f00ff;
}

/* ── chat input bar: command palette + file preview (completes both-theme coverage) ── */
body[theme="dark"] .chat-palette-inner {
    background: #302c27;
    border-color: rgba(255, 255, 255, 0.10);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

body[theme="dark"] .chat-palette-header {
    color: rgba(246, 241, 233, 0.5);
}

body[theme="dark"] .chat-palette-item {
    color: rgba(246, 241, 233, 0.85);
}

body[theme="dark"] .chat-palette-item:hover {
    background: rgba(185, 140, 255, 0.14);
}

body[theme="dark"] .chat-palette-item-key {
    color: #b98cff;
}

body[theme="dark"] .chat-palette-item-desc {
    color: rgba(246, 241, 233, 0.6);
}

body[theme="dark"] .chat-palette-empty {
    color: rgba(246, 241, 233, 0.45);
}

body[theme="dark"] .chat-file-pill {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.10);
}

body[theme="dark"] .chat-file-name {
    color: rgba(246, 241, 233, 0.9);
}

body[theme="dark"] .chat-file-size {
    color: rgba(246, 241, 233, 0.5);
}

body[theme="dark"] .chat-file-remove {
    color: rgba(246, 241, 233, 0.5);
}

body[theme="dark"] .chat-file-remove:hover {
    color: #e88a76;
}

body[theme="light"] .chat-palette-header {
    color: #737373;
}

body[theme="light"] .chat-palette-item {
    color: #171717;
}

body[theme="light"] .chat-palette-item:hover {
    background: rgba(127, 0, 255, 0.08);
}

body[theme="light"] .chat-palette-item-key {
    color: #7f00ff;
}

body[theme="light"] .chat-palette-item-desc {
    color: #404040;
}

body[theme="light"] .chat-palette-empty {
    color: #737373;
}

body[theme="light"] .chat-file-name {
    color: #171717;
}

body[theme="light"] .chat-file-size {
    color: #737373;
}

body[theme="light"] .chat-file-remove {
    color: #737373;
}

body[theme="light"] .chat-file-remove:hover {
    color: #b3402f;
}

/* ============================================================================
   SHARED PRIMITIVES (bt-*)
   The marketing site's vocabulary at app scale, so a surface can opt in without
   restyling its component. Full patterns (bento, rails, ring box) belong to the
   marketing-shaped surfaces only: onboarding, empty states, billing, public pages.
   Tokens above drive every colour, so both themes follow automatically.
   ============================================================================ */

.bt-pill {
    position: relative; display: inline-flex; align-items: center; gap: 10px;
    padding: 7px 18px; border-radius: 103px; background: var(--surface);
    font-family: var(--mono); font-weight: 300; font-size: 12px; line-height: 12px;
    letter-spacing: 0.02em; text-transform: uppercase; color: var(--text); white-space: nowrap;
}
.bt-pill::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--line); border-radius: inherit; pointer-events: none; }

.bt-meta { font-family: var(--mono); font-weight: 300; font-size: 10.5px; line-height: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }

.bt-display { font-family: var(--serif); font-weight: 340; letter-spacing: -0.03em; line-height: 1.04; color: var(--text); }
.bt-display--xl { font-size: clamp(32px, 4vw, 51px); }
.bt-display--lg { font-size: clamp(26px, 3vw, 34px); }
.bt-display--sm { font-family: var(--serif); font-weight: 420; font-size: 20px; line-height: 20px; letter-spacing: -0.5px; color: var(--text); }

.bt-frame { position: relative; padding: 10px; background: var(--surface); }
.bt-frame::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--line); pointer-events: none; }
.bt-frame__in { position: relative; border-radius: 12px; background: var(--surface-2); overflow: hidden; }

.bt-ico { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--surface); color: var(--primary); flex-shrink: 0; }
.bt-ico::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--border-strong); border-radius: inherit; pointer-events: none; }
.bt-ico i { font-size: 18px; line-height: 1; }


.bt-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-weight: 300; font-size: 11.5px; line-height: 12px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--primary); text-decoration: none; }
.bt-link i { font-size: 15px; line-height: 1; transition: transform 0.2s ease; }
.bt-link:hover i { transform: translateX(3px); }

.bt-pixels { height: 12px; background: repeating-linear-gradient(90deg, #e8d5b5 0 12px, #b98cff 12px 24px, #ff8a5c 24px 36px, #bfd3e6 36px 48px, #f5f5f5 48px 60px, #371a5b 60px 72px, #ead9ff 72px 84px, #4a6b94 84px 96px); }

/* ============================================================================
   TYPOGRAPHY — marketing-site faces in the app
   Headings take Newsreader, body copy takes General Sans, labels and meta keep
   JetBrains Mono. custom.css is shared with the marketing site and sets
   Instrument Sans on html/body plus Satoshi on h1-h6 with !important, so the
   override belongs here and needs !important to land.
   Unplug: delete this block and the General Sans @import at the top of the file.
   ============================================================================ */
html,
body {
    font-family: var(--sans) !important;
}

h1, h2, h3, h4, h5, h6,
.text-heading-primary {
    font-family: var(--serif) !important;
    font-optical-sizing: auto;
}

h1, h2,
.text-heading-primary {
    font-weight: 340 !important;
    letter-spacing: -0.02em;
}

h3, h4, h5, h6 {
    font-weight: 440 !important;
}

/* form controls do not inherit the body face on their own */
button,
input,
select,
textarea,
.el-button,
.el-input__inner,
.el-textarea__inner,
.el-select-dropdown__item,
.el-message-box,
.el-notification {
    font-family: var(--sans) !important;
}