/* ==================== 基础重置 ==================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary: #FE2C55;
    --secondary: #FF6B9D;
    /* 黑暗主题（默认）*/
    --bg-dark: #1a1a2e;
    --bg-light: #16213e;
    --bg-deeper: #12121f;
    --bg-preview: #0d0d1a;
    --text-light: #eaeaea;
    --text-dim: #555;
    --text-muted: #aaa;
    --border-color: #333;
    --editor-caret: #FE2C55;
    --scrollbar-thumb: #333;
}

/* 日光主题 */
body.theme-light {
    --bg-dark: #f5f7fa;
    --bg-light: #ffffff;
    --bg-deeper: #eff1f5;
    --bg-preview: #e4e8f0;
    --text-light: #2c2c3a;
    --text-dim: #c0c4cc;
    --text-muted: #888;
    --border-color: #dde1e9;
    --editor-caret: #FE2C55;
    --scrollbar-thumb: #ccc;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: var(--bg-dark);
    color: var(--text-light);
    height: 100vh;
    overflow: hidden;
    transition: background 0.25s, color 0.25s;
}

/* ==================== 布局 ==================== */
.app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: visible;
}

.toolbar {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: var(--bg-light);
    border-bottom: 1px solid var(--border-color);
    gap: 15px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.toolbar-left, .toolbar-center, .toolbar-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.top-work-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    background: var(--bg-dark);
    color: var(--text-muted);
    font-size: 0.86em;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.top-work-link:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, var(--bg-dark));
}

.top-user-center {
    position: relative;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--primary) 58%, var(--border-color));
    background: color-mix(in srgb, var(--bg-light) 78%, var(--primary) 12%);
    color: color-mix(in srgb, var(--primary) 82%, var(--text-light));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    cursor: pointer;
    text-decoration: none;
    font-size: 0.86em;
    font-weight: 800;
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent),
        0 8px 20px rgba(254, 44, 85, 0.14);
    transition: transform 0.15s, box-shadow 0.15s, background 0.15s, color 0.15s;
}

.top-user-center::after {
    content: "";
    position: absolute;
    right: 1px;
    bottom: 1px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 2px solid var(--bg-light);
    background: var(--text-muted);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--border-color) 70%, transparent);
}

.top-user-center.is-logged-in::after {
    background: #22c55e;
}

.top-user-center.is-wechat-bound::after {
    background: #16a34a;
}

.top-user-center:hover {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--bg-light) 68%, var(--primary) 20%);
    color: var(--primary);
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent),
        0 10px 24px rgba(254, 44, 85, 0.2);
}

.top-user-center span {
    line-height: 1;
}

.top-user-center span.has-avatar,
.top-user-center span.has-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: inherit;
}

.top-user-center span.has-avatar img {
    object-fit: cover;
}

.top-personal-center,
.top-personal-center.dropdown {
    position: relative;
    z-index: 5000;
    display: flex;
    justify-content: center;
    width: 100%;
}

.dropdown-menu.personal-center-menu {
    position: fixed;
    right: auto;
    left: 50px;
    top: auto;
    bottom: 12px;
    width: 292px;
    min-width: 292px;
    max-height: min(720px, calc(100vh - 24px));
    padding: 12px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border-color));
    background: color-mix(in srgb, var(--bg-light) 92%, var(--primary) 4%);
    box-shadow: 0 18px 42px rgba(0,0,0,0.22);
    overflow: visible;
    z-index: 7000;
}

.personal-center-menu a.dropdown-item {
    text-decoration: none;
}

.personal-center-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 2px 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
}

.personal-center-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--primary) 58%, var(--border-color));
    background: color-mix(in srgb, var(--bg-light) 72%, var(--primary) 18%);
    color: var(--primary);
    font-weight: 800;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
}

.personal-center-head strong {
    display: block;
    color: var(--text-light);
    font-size: 0.94em;
}

.personal-center-head span {
    display: block;
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 0.76em;
}

.personal-center-section {
    margin: 10px 2px 6px;
    color: var(--text-muted);
    font-size: 0.74em;
    font-weight: 800;
}

.personal-center-status-row {
    display: flex;
    gap: 6px;
    padding: 10px 2px 0;
    flex-wrap: wrap;
}

.personal-status-chip {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 8px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-muted);
    background: var(--bg-dark);
    font-size: 0.72em;
    font-weight: 800;
}

.personal-status-chip[data-state="ok"] {
    border-color: rgba(34, 197, 94, 0.36);
    color: #16a34a;
    background: rgba(34, 197, 94, 0.08);
}

.personal-link-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.personal-link-grid a,
.personal-link-grid button,
.personal-publish-list button {
    min-width: 0;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background: var(--bg-dark);
    color: var(--text-light);
    cursor: pointer;
    text-decoration: none;
    font: inherit;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.personal-link-grid a,
.personal-link-grid button {
    min-height: 56px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 5px;
    padding: 8px 9px;
}

.personal-link-grid b {
    font-size: 1.05em;
    line-height: 1;
}

.personal-link-grid span {
    font-size: 0.8em;
    font-weight: 700;
}

.personal-publish-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.personal-publish-list button {
    min-height: 30px;
    padding: 0 10px;
    text-align: left;
    font-size: 0.8em;
}

.personal-link-grid a:hover,
.personal-link-grid button:hover,
.personal-publish-list button:hover {
    border-color: color-mix(in srgb, var(--primary) 42%, var(--border-color));
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, var(--bg-dark));
}

.personal-link-grid .personal-action-primary {
    border-color: color-mix(in srgb, var(--primary) 42%, var(--border-color));
    background: color-mix(in srgb, var(--primary) 10%, var(--bg-dark));
    color: var(--primary);
}

.personal-publish-list .personal-sync-entry {
    border-color: color-mix(in srgb, var(--primary) 40%, var(--border-color));
    color: var(--primary);
}

.account-center-modal {
    max-height: 88vh;
    overflow: auto;
}

.account-center-shell {
    display: grid;
    grid-template-columns: minmax(190px, 0.38fr) minmax(0, 1fr);
    gap: 14px;
    min-height: 520px;
}

.account-profile-panel,
.account-main-panel,
.account-card {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-dark);
}

.account-profile-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    min-width: 0;
}

.account-profile-avatar {
    width: 54px;
    height: 54px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--primary) 18%, var(--bg-medium));
    color: var(--primary);
    font-weight: 800;
    font-size: 1.35rem;
    overflow: hidden;
}

.personal-center-avatar.has-avatar,
.account-profile-avatar.has-avatar,
#accountAvatarPreview.has-avatar {
    padding: 0;
    color: transparent;
}

.personal-center-avatar.has-avatar img,
.account-profile-avatar.has-avatar img,
#accountAvatarPreview.has-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: inherit;
}

.account-profile-name {
    color: var(--text-light);
    font-weight: 700;
    word-break: break-word;
}

.account-profile-meta {
    color: var(--text-muted);
    font-size: 0.82em;
    line-height: 1.5;
    word-break: break-word;
}

.account-badges,
.account-status-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.account-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 8px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--bg-medium) 70%, transparent);
    font-size: 0.76em;
    line-height: 1;
}

.account-badge.ok {
    border-color: rgba(34, 197, 94, 0.38);
    color: #86efac;
    background: rgba(34, 197, 94, 0.1);
}

.account-badge.warn {
    border-color: rgba(245, 158, 11, 0.4);
    color: #facc15;
    background: rgba(245, 158, 11, 0.1);
}

.account-badge.muted {
    opacity: 0.82;
}

.account-quick-actions {
    display: grid;
    gap: 8px;
    margin-top: auto;
}

.account-main-panel {
    padding: 12px;
    min-width: 0;
}

.account-tabs {
    display: flex;
    gap: 6px;
    padding: 4px;
    margin-bottom: 12px;
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-medium) 70%, transparent);
}

.account-tabs button {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 11px;
    border: 0;
    border-radius: 6px;
    color: var(--text-muted);
    background: transparent;
    cursor: pointer;
    white-space: nowrap;
}

.account-tabs button.active {
    color: var(--text-light);
    background: color-mix(in srgb, var(--primary) 16%, var(--bg-dark));
}

.account-panel {
    display: none;
}

.account-overview-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border-color));
    border-radius: 8px;
    background: color-mix(in srgb, var(--primary) 8%, var(--bg-dark));
}

.account-overview-kicker {
    display: block;
    margin-bottom: 6px;
    color: var(--primary);
    font-size: 0.72em;
    font-weight: 800;
    letter-spacing: 0;
}

.account-overview-hero h4 {
    margin: 0;
    color: var(--text-light);
    font-size: 1.04em;
}

.account-overview-hero p {
    margin: 7px 0 0;
    color: var(--text-muted);
    font-size: 0.84em;
    line-height: 1.55;
}

.account-overview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.account-overview-card {
    min-height: 128px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    padding: 13px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-dark);
    color: var(--text-light);
    text-align: left;
    cursor: pointer;
    font: inherit;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
}

.account-overview-card:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--primary) 42%, var(--border-color));
    background: color-mix(in srgb, var(--primary) 6%, var(--bg-dark));
}

.account-overview-card span {
    color: var(--text-muted);
    font-size: 0.76em;
    font-weight: 800;
}

.account-overview-card strong {
    color: var(--text-light);
    font-size: 0.92em;
    line-height: 1.35;
    word-break: break-word;
}

.account-overview-card em {
    margin-top: auto;
    color: var(--text-muted);
    font-size: 0.76em;
    font-style: normal;
    line-height: 1.45;
}

.account-overview-actions {
    justify-content: flex-start;
}

.account-overview-actions .btn:disabled {
    opacity: 0.48;
    cursor: not-allowed;
}

.account-card-grid,
.account-form-grid,
.account-storage-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.account-card {
    padding: 13px;
    min-width: 0;
}

.account-card + .account-card,
.account-card-flat {
    margin-top: 12px;
}

.account-card-title {
    margin-bottom: 12px;
    color: var(--text-light);
    font-weight: 700;
    font-size: 0.92em;
}

.account-subtitle {
    margin-bottom: 10px;
    color: var(--text-light);
    font-size: 0.84em;
    font-weight: 800;
}

.account-section-nav {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    gap: 6px;
    margin: 0 0 12px;
    padding: 6px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-light) 86%, transparent);
}

.account-section-nav button {
    min-height: 30px;
    padding: 0 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font: inherit;
    font-size: 0.8em;
}

.account-section-nav button.active,
.account-section-nav button:hover {
    background: color-mix(in srgb, var(--primary) 12%, var(--bg-dark));
    color: var(--primary);
}

.account-section {
    scroll-margin-top: 72px;
}

.account-section + .account-section {
    margin-top: 12px;
}

.account-auth-signed-in {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border: 1px solid color-mix(in srgb, #22c55e 28%, var(--border-color));
    border-radius: 8px;
    background: rgba(34, 197, 94, 0.08);
    color: var(--text-muted);
}

.account-auth-signed-in strong,
.account-auth-signed-in span {
    display: block;
}

.account-auth-signed-in strong {
    color: var(--text-light);
}

.account-auth-section[data-account-session="logged-in"] .account-auth-signed-in {
    display: flex;
}

.account-auth-section[data-account-session="logged-in"] .account-auth-forms {
    display: none;
}

.account-auth-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.account-auth-pane {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-medium) 48%, transparent);
}

.account-auth-pane-wide {
    grid-column: 1 / -1;
}

.account-profile-edit-layout {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.account-avatar-editor {
    min-width: 0;
}

.account-avatar-upload {
    width: 132px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    text-align: center;
    font: inherit;
}

.account-avatar-upload span {
    width: 92px;
    height: 92px;
    margin: 0 auto 8px;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border-color));
    border-radius: 16px;
    background: color-mix(in srgb, var(--primary) 12%, var(--bg-dark));
    color: var(--primary);
    font-size: 1.8rem;
    font-weight: 900;
    overflow: hidden;
}

.account-avatar-upload em {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-dark);
    color: var(--text-light);
    font-size: 0.78em;
    font-style: normal;
    font-weight: 800;
}

.account-avatar-upload:hover em {
    border-color: color-mix(in srgb, var(--primary) 42%, var(--border-color));
    color: var(--primary);
}

.account-avatar-editor p {
    margin: 10px 0 0;
    color: var(--text-muted);
    font-size: 0.78em;
    line-height: 1.5;
}

.account-bind-state,
.account-bind-bridge {
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border-color));
    border-radius: 8px;
    background: color-mix(in srgb, var(--primary) 7%, var(--bg-dark));
    color: var(--text-muted);
    font-size: 0.82em;
    line-height: 1.5;
}

.account-email-bind-card .account-bind-state {
    margin-bottom: 8px;
}

.account-bind-bridge {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    align-items: center;
    margin-top: 12px;
}

.account-bind-bridge strong,
.account-bind-bridge span {
    display: block;
}

.account-bind-bridge strong {
    color: var(--text-light);
}

.account-bind-bridge span {
    color: var(--text-muted);
    font-size: 0.92em;
}

.account-bind-bridge .btn {
    grid-row: 1 / span 2;
    grid-column: 2;
}

.account-bind-bridge[data-state="ok"] {
    border-color: rgba(34, 197, 94, 0.28);
    background: rgba(34, 197, 94, 0.08);
}

.account-field-hint {
    color: var(--text-muted);
    font-size: 0.78em;
    font-style: normal;
    line-height: 1.45;
}

.account-field input[readonly] {
    cursor: default;
    opacity: 0.86;
}

.account-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.account-field-wide {
    grid-column: 1 / -1;
}

.account-inline-fields {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.account-inline-fields input {
    flex: 1 1 0;
    min-width: 0;
}

.account-code-hint {
    min-height: 18px;
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 0.78em;
    line-height: 1.45;
}

.account-wechat-qr {
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 10px;
    border: 1px dashed color-mix(in srgb, var(--primary) 45%, var(--border-color));
    border-radius: 8px;
    background: color-mix(in srgb, var(--primary) 8%, var(--bg-dark));
}

.account-wechat-qr-box {
    flex: 0 0 auto;
    width: 132px;
    height: 132px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
}

.account-wechat-qr-box img {
    width: 122px;
    height: 122px;
    display: block;
}

.account-wechat-qr-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.account-wechat-qr-text {
    color: var(--text-light);
    font-size: 0.82em;
    line-height: 1.45;
}

.account-field span,
.account-wechat-state,
.account-storage-card span {
    color: var(--text-muted);
    font-size: 0.82em;
    line-height: 1.5;
}

.account-field input,
.account-inline-fields input,
.my-images-modal #myImagesSearch {
    width: 100%;
    min-width: 0;
    padding: 10px 11px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-dark);
    color: var(--text-light);
    outline: none;
}

.account-field input:focus,
.account-inline-fields input:focus,
.my-images-modal #myImagesSearch:focus {
    border-color: var(--primary);
}

.account-actions-row {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.account-center-current,
.account-center-notice {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 12px;
    background: var(--bg-dark);
    color: var(--text-muted);
    font-size: 0.86em;
    line-height: 1.6;
}

.account-center-current {
    margin-top: 12px;
}

.account-center-notice {
    margin-bottom: 12px;
}

.account-center-notice[data-type="error"] {
    border-color: rgba(239, 68, 68, 0.35);
    background: rgba(239, 68, 68, 0.08);
    color: #fecaca;
}

.account-center-notice[data-type="success"] {
    border-color: rgba(34, 197, 94, 0.35);
    background: rgba(34, 197, 94, 0.08);
    color: #bbf7d0;
}

.account-center-notice[data-type="info"] {
    border-color: color-mix(in srgb, var(--primary) 36%, var(--border-color));
    background: color-mix(in srgb, var(--primary) 9%, var(--bg-dark));
    color: var(--text-light);
}

.account-storage-card {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-medium) 70%, transparent);
}

.account-storage-card strong {
    color: var(--text-light);
}

.account-model-card {
    padding: 0;
    overflow: hidden;
}

.account-model-card .account-card-title {
    margin: 0;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
}

.account-model-layout {
    display: grid;
    grid-template-columns: minmax(180px, 0.34fr) minmax(0, 1fr);
    min-height: 420px;
}

.account-model-provider-list {
    padding: 14px;
    border-right: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
    background: color-mix(in srgb, var(--bg-medium) 42%, transparent);
}

.account-model-provider-list span {
    display: block;
    margin-bottom: 8px;
    color: var(--text-muted);
    font-size: 0.78em;
    font-weight: 800;
}

.account-model-provider-list select,
.account-model-form select {
    width: 100%;
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-dark);
    color: var(--text-light);
}

.account-model-provider-list p {
    margin: 12px 0 0;
    color: var(--text-muted);
    font-size: 0.78em;
    line-height: 1.55;
}

.account-model-form {
    padding: 14px;
    min-width: 0;
}

.account-model-health {
    margin-top: 2px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--border-color) 74%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-medium) 52%, transparent);
    color: var(--text-muted);
    font-size: 0.8em;
    line-height: 1.55;
}

.account-model-health[data-type="success"] {
    border-color: rgba(34, 197, 94, 0.35);
    background: rgba(34, 197, 94, 0.08);
    color: #16a34a;
}

.account-model-health[data-type="error"] {
    border-color: rgba(239, 68, 68, 0.35);
    background: rgba(239, 68, 68, 0.08);
    color: #dc2626;
}

.my-images-modal #myImagesSearch {
    flex: 1 1 220px;
}

.btn-danger-lite {
    border-color: rgba(239, 68, 68, 0.42) !important;
    color: #fecaca !important;
}

.my-images-quota {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 8px 0 12px;
    color: var(--text-muted);
    font-size: 0.82em;
}

.my-images-quota-bar {
    height: 7px;
    border-radius: 999px;
    overflow: hidden;
    background: color-mix(in srgb, var(--border-color) 62%, transparent);
}

.my-images-quota-bar span {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--primary), #f59e0b);
    transition: width 0.2s ease;
}

@media (max-width: 760px) {
    .account-center-shell,
    .account-card-grid,
    .account-form-grid,
    .account-storage-grid,
    .account-auth-grid,
    .account-profile-edit-layout,
    .account-model-layout,
    .account-overview-grid {
        grid-template-columns: 1fr;
    }

    .account-section-nav {
        overflow-x: auto;
    }

    .account-auth-signed-in {
        align-items: flex-start;
        flex-direction: column;
    }

    .account-auth-pane-wide {
        grid-column: auto;
    }

    .account-overview-hero {
        flex-direction: column;
    }

    .account-model-provider-list {
        border-right: 0;
        border-bottom: 1px solid var(--border-color);
    }

    .account-inline-fields {
        flex-direction: column;
    }

    .account-bind-bridge {
        grid-template-columns: 1fr;
    }

    .account-bind-bridge .btn {
        grid-row: auto;
        grid-column: auto;
        justify-self: start;
    }

    .account-wechat-qr {
        align-items: stretch;
        flex-direction: column;
    }
}

.account-settings-modal {
    --account-setting-bg: color-mix(in srgb, var(--bg-light) 92%, #f8dbe6 8%);
    --account-setting-sidebar: color-mix(in srgb, var(--bg-dark) 74%, #f5d9e6 26%);
    --account-setting-panel: color-mix(in srgb, var(--bg-light) 95%, #f7dce8 5%);
    --account-setting-surface: color-mix(in srgb, var(--bg-light) 82%, #f3dbe8 18%);
    --account-setting-soft: color-mix(in srgb, var(--primary) 13%, #f8e3ef 87%);
    --account-setting-input: color-mix(in srgb, var(--bg-light) 88%, #f4ddea 12%);
    --account-setting-text: var(--text-light);
    --account-setting-muted: var(--text-muted);
    --account-setting-line: color-mix(in srgb, var(--border-color) 78%, transparent);
    --account-setting-primary: var(--primary);
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: 100%;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--account-setting-line);
    border-radius: 18px;
    background: var(--account-setting-bg);
    color: var(--account-setting-text);
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.28);
    pointer-events: auto;
}

#accountCenterModal {
    inset: calc(var(--unified-top-toolbar-height, 49px) + 8px) auto auto 50%;
    width: min(1560px, calc(100vw - 24px));
    height: min(930px, calc(100vh - var(--unified-top-toolbar-height, 49px) - 20px));
    padding: 0;
    z-index: 3900;
    align-items: stretch;
    justify-content: stretch;
    background: transparent;
    backdrop-filter: none;
    transform: translateX(-50%);
    pointer-events: none;
}

#accountCenterModal .account-settings-modal {
    width: 100%;
    max-width: none;
}

#accountCenterModal[data-account-mode="auth"] {
    width: min(480px, calc(100vw - 24px));
    height: auto;
    max-height: calc(100vh - var(--unified-top-toolbar-height, 49px) - 20px);
    align-items: flex-start;
    justify-content: center;
}

#accountCenterModal[data-account-mode="auth"] .account-settings-modal {
    width: 100%;
    height: auto;
    max-height: calc(100vh - var(--unified-top-toolbar-height, 49px) - 20px);
}

.account-settings-modal.account-auth-only-modal .account-center-shell {
    display: block;
    height: auto;
}

.account-settings-modal.account-auth-only-modal .account-settings-sidebar,
.account-settings-modal.account-auth-only-modal .account-section-tabs,
.account-settings-modal.account-auth-only-modal [data-account-panel]:not([data-account-panel="account"]) {
    display: none !important;
}

.account-settings-modal.account-auth-only-modal .account-main-panel {
    min-height: 0;
    background: var(--account-setting-panel);
}

.account-settings-modal.account-auth-only-modal .account-content-header {
    display: block;
    position: relative;
    padding: 38px 48px 14px;
    text-align: center;
}

.account-settings-modal.account-auth-only-modal .account-content-eyebrow {
    display: none;
}

.account-settings-modal.account-auth-only-modal .account-settings-close {
    position: absolute;
    top: 18px;
    right: 24px;
}

.account-settings-modal.account-auth-only-modal .account-content-scroll {
    max-height: calc(100vh - var(--unified-top-toolbar-height, 49px) - 132px);
    padding: 0 48px 34px;
}

.account-settings-modal.account-auth-only-modal .account-panel-account {
    display: block !important;
}

.account-settings-modal.account-auth-only-modal .account-panel-account > .account-section:not([data-account-section="login"]) {
    display: none !important;
}

.account-settings-modal.account-auth-only-modal .account-auth-section {
    display: block !important;
    max-width: 384px;
    margin: 0 auto;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.account-settings-modal.account-auth-only-modal .account-section-heading {
    display: none;
    margin-bottom: 12px;
}

.account-settings-modal.account-auth-only-modal .account-section-heading p {
    margin-top: 8px;
    max-width: none;
    font-size: 0.84em;
}

.account-settings-modal.account-auth-only-modal .account-auth-forms {
    padding: 0;
    border: 0;
    background: transparent;
}

.account-settings-modal.account-auth-only-modal .account-auth-card {
    display: grid;
    gap: 16px;
}

.account-settings-modal.account-auth-only-modal .account-auth-pane,
.account-settings-modal.account-auth-only-modal .account-auth-pane-wide {
    grid-column: auto;
    display: grid;
    gap: 16px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.account-settings-modal.account-auth-only-modal .account-inline-fields {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.account-settings-modal.account-auth-only-modal .account-auth-switch {
    display: flex;
    gap: 6px;
    padding: 4px;
    border: 1px solid var(--account-setting-line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 8%, var(--bg-dark));
}

.account-settings-modal.account-auth-only-modal .account-auth-switch button {
    flex: 1;
    min-height: 30px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #6b7280;
    font: inherit;
    font-size: 0.82em;
    font-weight: 700;
    cursor: pointer;
}

.account-settings-modal.account-auth-only-modal .account-auth-switch button.active {
    background: var(--bg-light);
    color: var(--primary);
    box-shadow: 0 1px 5px color-mix(in srgb, var(--primary) 16%, transparent);
}

.account-settings-modal.account-auth-only-modal .account-field {
    display: block;
}

.account-settings-modal.account-auth-only-modal .account-field span {
    display: none;
}

.account-settings-modal.account-auth-only-modal .account-field input,
.account-settings-modal.account-auth-only-modal .account-inline-fields input,
.account-settings-modal.account-auth-only-modal .account-auth-pane > input {
    width: 100%;
    height: 38px;
    padding: 0 14px;
    border-radius: 0;
    border: 1px solid var(--border-color);
    background: var(--bg-light);
    color: var(--text-light);
    font-size: 0.92em;
    box-shadow: none;
}

.account-settings-modal.account-auth-only-modal .account-field input:focus,
.account-settings-modal.account-auth-only-modal .account-inline-fields input:focus,
.account-settings-modal.account-auth-only-modal .account-auth-pane > input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 16%, transparent);
}

.account-settings-modal.account-auth-only-modal .account-auth-submit {
    width: 100%;
    height: 38px;
    border-radius: 2px;
    background: var(--primary);
    color: #fff;
    font-size: 1em;
    font-weight: 800;
}

.account-settings-modal.account-auth-only-modal .account-auth-link {
    width: max-content;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--primary);
    font: inherit;
    font-size: 0.86em;
    cursor: pointer;
}

.account-settings-modal.account-auth-only-modal .account-auth-helper-row {
    display: flex;
    justify-content: flex-start;
    min-height: 20px;
}

.account-settings-modal.account-auth-only-modal .account-inline-fields .btn {
    height: 38px;
    border-radius: 2px;
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-light);
    white-space: nowrap;
}

.account-settings-modal.account-auth-only-modal .account-auth-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 2px -48px -34px;
    padding: 14px 24px;
    background: color-mix(in srgb, var(--primary) 6%, var(--bg-dark));
    color: var(--text-light);
    font-size: 0.86em;
}

.account-settings-modal.account-auth-only-modal .account-auth-footer a,
.account-settings-modal.account-auth-only-modal .account-auth-footer button {
    border: 0;
    background: transparent;
    color: var(--primary);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.account-settings-modal.account-auth-only-modal .account-code-hint {
    min-height: 20px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-muted);
}

.account-settings-modal.account-auth-only-modal .account-policy-body {
    display: grid;
    gap: 10px;
    max-height: 260px;
    overflow: auto;
    padding: 14px;
    border: 1px solid var(--border-color);
    background: var(--bg-light);
    color: var(--text-light);
    font-size: 0.9em;
    line-height: 1.65;
}

.account-settings-modal.account-auth-only-modal .account-policy-body strong {
    color: var(--primary);
    font-size: 1.05em;
}

.account-settings-modal.account-auth-only-modal .account-policy-body p {
    margin: 0;
}

.account-settings-modal .account-center-shell {
    grid-template-columns: 292px minmax(0, 1fr);
    gap: 0;
    min-height: 0;
    height: 100%;
}

.account-settings-modal .account-settings-sidebar {
    min-width: 0;
    padding: 18px 12px;
    border: 0;
    border-right: 1px solid var(--account-setting-line);
    border-radius: 0;
    background: var(--account-setting-sidebar);
    overflow-y: auto;
}

.account-settings-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 38px;
    padding: 0 10px;
    color: var(--account-setting-text);
}

.account-settings-brand span {
    display: block;
    color: var(--account-setting-muted);
    font-size: 0.78em;
    line-height: 1.2;
}

.account-settings-brand strong {
    display: block;
    margin-top: 2px;
    color: var(--account-setting-text);
    font-size: 0.98em;
}

.account-settings-search {
    position: relative;
    display: block;
    margin: 12px 0 14px;
}

.account-settings-search span {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--account-setting-muted);
    font-size: 0.82em;
    pointer-events: none;
}

.account-settings-search input {
    width: 100%;
    min-height: 39px;
    padding: 0 12px 0 48px;
    border: 1px solid var(--account-setting-line);
    border-radius: 10px;
    background: var(--account-setting-input);
    color: var(--account-setting-text);
    outline: none;
}

.account-settings-search input:focus {
    border-color: color-mix(in srgb, var(--account-setting-primary) 48%, var(--account-setting-line));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--account-setting-primary) 14%, transparent);
}

.account-profile-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid var(--account-setting-line);
    border-radius: 8px;
    background: var(--account-setting-surface);
}

.account-settings-modal .account-profile-avatar {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: var(--account-setting-soft);
    color: var(--account-setting-primary);
    font-size: 1.08rem;
}

.account-profile-copy {
    min-width: 0;
}

.account-settings-modal .account-profile-name {
    color: var(--account-setting-text);
    font-size: 0.92em;
}

.account-settings-modal .account-profile-meta {
    color: var(--account-setting-muted);
    font-size: 0.76em;
}

.account-settings-modal .account-badges {
    padding: 0 2px 12px;
}

.account-settings-modal .account-badge {
    min-height: 22px;
    border-color: var(--account-setting-line);
    background: var(--account-setting-surface);
    color: var(--account-setting-muted);
}

.account-settings-modal .account-badge.ok {
    border-color: rgba(22, 163, 74, 0.22);
    background: rgba(34, 197, 94, 0.1);
    color: #15803d;
}

.account-settings-modal .account-badge.warn {
    border-color: rgba(217, 119, 6, 0.22);
    background: rgba(245, 158, 11, 0.1);
    color: #b45309;
}

.account-settings-sidebar .account-tabs {
    display: grid;
    gap: 8px;
    padding: 0;
    margin: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.account-settings-sidebar .account-tabs button {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 58px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--account-setting-text);
    text-align: left;
}

.account-settings-sidebar .account-tabs button[hidden] {
    display: none;
}

.account-settings-sidebar .account-tabs button:hover {
    border-color: color-mix(in srgb, var(--account-setting-primary) 22%, var(--account-setting-line));
    background: var(--account-setting-soft);
}

.account-settings-sidebar .account-tabs button.active {
    border-color: color-mix(in srgb, var(--account-setting-primary) 30%, var(--account-setting-line));
    background: var(--account-setting-surface);
    color: var(--account-setting-text);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.account-tab-icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--account-setting-soft);
    color: var(--account-setting-primary);
    font-size: 0.78em;
    font-weight: 800;
}

.account-tab-copy {
    min-width: 0;
}

.account-tab-copy strong,
.account-tab-copy em {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-tab-copy strong {
    color: var(--account-setting-text);
    font-size: 0.92em;
}

.account-tab-copy em {
    margin-top: 2px;
    color: var(--account-setting-muted);
    font-size: 0.72em;
    font-style: normal;
}

.account-settings-modal .account-main-panel {
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--account-setting-panel);
}

.account-content-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 28px 14px;
}

.account-content-header h3 {
    margin: 0;
    color: var(--account-setting-text);
    font-size: 1.22rem;
    font-weight: 800;
}

.account-content-header p {
    margin: 6px 0 0;
    color: var(--account-setting-muted);
    font-size: 0.84em;
}

.account-settings-close {
    color: var(--account-setting-muted);
    background: transparent;
}

.account-content-scroll {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 28px 24px;
    overflow: auto;
}

.account-settings-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 28px 20px;
    border-top: 1px solid var(--account-setting-line);
    background: color-mix(in srgb, var(--account-setting-panel) 92%, var(--account-setting-sidebar) 8%);
}

.account-settings-modal .account-overview-hero,
.account-settings-modal .account-card {
    border: 0;
    border-radius: 0;
    background: transparent;
}

.account-settings-modal .account-overview-hero {
    align-items: center;
    padding: 18px 0 20px;
    border-bottom: 1px solid var(--account-setting-line);
}

.account-settings-modal .account-overview-kicker {
    color: var(--account-setting-primary);
}

.account-settings-modal .account-overview-hero h4,
.account-settings-modal .account-card-title,
.account-settings-modal .account-storage-card strong {
    color: var(--account-setting-text);
}

.account-settings-modal .account-overview-hero p,
.account-settings-modal .account-field span,
.account-settings-modal .account-wechat-state,
.account-settings-modal .account-storage-card span,
.account-settings-modal .account-code-hint,
.account-settings-modal .account-center-current {
    color: var(--account-setting-muted);
}

.account-settings-modal .account-overview-grid {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 0;
}

.account-settings-modal .account-overview-card {
    min-height: 92px;
    display: grid;
    grid-template-columns: minmax(128px, 0.24fr) minmax(0, 1fr);
    gap: 8px 18px;
    padding: 18px 0;
    border: 0;
    border-bottom: 1px solid var(--account-setting-line);
    border-radius: 0;
    background: transparent;
    color: var(--account-setting-text);
    transform: none;
}

.account-settings-modal .account-overview-card:hover {
    transform: none;
    background: var(--account-setting-soft);
}

.account-settings-modal .account-overview-card span {
    color: var(--account-setting-text);
    font-size: 0.92em;
}

.account-settings-modal .account-overview-card strong {
    color: var(--account-setting-text);
    font-size: 0.96em;
}

.account-settings-modal .account-overview-card .my-images-quota-bar,
.account-settings-modal .account-overview-card em {
    grid-column: 2;
}

.account-settings-modal .account-overview-card em,
.account-settings-modal .account-model-provider-list p {
    color: var(--account-setting-muted);
}

.account-settings-modal .account-card {
    padding: 20px 0;
    border-bottom: 1px solid var(--account-setting-line);
}

.account-settings-modal .account-card + .account-card,
.account-settings-modal .account-card-flat {
    margin-top: 0;
}

.account-settings-modal .account-card-title {
    font-size: 1rem;
}

.account-settings-modal .account-field input,
.account-settings-modal .account-inline-fields input,
.account-settings-modal .account-field select,
.account-settings-modal .account-model-provider-list select,
.account-settings-modal .account-model-form select {
    border-color: var(--account-setting-line);
    background: var(--account-setting-input);
    color: var(--account-setting-text);
}

.account-settings-modal .account-field input:focus,
.account-settings-modal .account-inline-fields input:focus,
.account-settings-modal .account-field select:focus,
.account-settings-modal .account-model-provider-list select:focus,
.account-settings-modal .account-model-form select:focus {
    border-color: color-mix(in srgb, var(--account-setting-primary) 48%, var(--account-setting-line));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--account-setting-primary) 14%, transparent);
}

.account-settings-modal .account-center-notice,
.account-settings-modal .account-center-current,
.account-settings-modal .account-storage-card,
.account-settings-modal .account-publish-tile,
.account-settings-modal .account-section-nav,
.account-settings-modal .account-auth-pane,
.account-settings-modal .account-bind-state,
.account-settings-modal .account-bind-bridge,
.account-settings-modal .account-model-health {
    border-color: var(--account-setting-line);
    background: var(--account-setting-surface);
    color: var(--account-setting-muted);
}

.account-settings-modal .account-avatar-upload span {
    border-color: color-mix(in srgb, var(--account-setting-primary) 34%, var(--account-setting-line));
    background: var(--account-setting-soft);
    color: var(--account-setting-primary);
}

.account-settings-modal .account-avatar-upload em,
.account-settings-modal .account-section-nav button.active,
.account-settings-modal .account-section-nav button:hover {
    border-color: color-mix(in srgb, var(--account-setting-primary) 34%, var(--account-setting-line));
    background: var(--account-setting-soft);
    color: var(--account-setting-primary);
}

.account-settings-modal .account-bind-bridge strong,
.account-settings-modal .account-subtitle,
.account-settings-modal .account-field-hint {
    color: var(--account-setting-text);
}

.account-settings-modal .account-avatar-editor p,
.account-settings-modal .account-bind-bridge span {
    color: var(--account-setting-muted);
}

.account-settings-modal .account-tab-group-label {
    grid-column: 1 / -1;
    margin: 10px 10px 3px;
    color: color-mix(in srgb, var(--account-setting-muted) 82%, var(--account-setting-text) 18%);
    font-size: 0.72em;
    font-weight: 800;
}

.account-content-eyebrow,
.account-panel-kicker {
    display: block;
    color: var(--account-setting-primary);
    font-size: 0.74em;
    font-weight: 800;
}

.account-content-eyebrow {
    margin-bottom: 6px;
}

.account-settings-modal .account-panel-account .account-card {
    border: 1px solid var(--account-setting-line);
    border-radius: 10px;
    background: color-mix(in srgb, var(--account-setting-surface) 72%, var(--account-setting-panel) 28%);
    padding: 18px;
}

.account-settings-modal .account-panel-account .account-card + .account-card {
    margin-top: 14px;
}

.account-settings-modal .account-section-nav {
    top: -1px;
    gap: 8px;
    margin-bottom: 14px;
    padding: 8px;
    border-radius: 12px;
    backdrop-filter: blur(14px);
}

.account-settings-modal .account-section-nav button {
    flex: 1 1 0;
    min-width: 112px;
    min-height: 50px;
    padding: 7px 10px;
    text-align: left;
}

.account-settings-modal .account-section-nav button strong,
.account-settings-modal .account-section-nav button em {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-settings-modal .account-section-nav button strong {
    color: inherit;
    font-size: 0.9em;
}

.account-settings-modal .account-section-nav button em {
    margin-top: 3px;
    color: var(--account-setting-muted);
    font-size: 0.72em;
    font-style: normal;
}

.account-settings-modal .account-section-nav button.active em,
.account-settings-modal .account-section-nav button:hover em {
    color: color-mix(in srgb, var(--account-setting-primary) 72%, var(--account-setting-text) 28%);
}

.account-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

.account-section-heading span,
.account-section-heading strong {
    display: block;
}

.account-section-heading span {
    color: var(--account-setting-primary);
    font-size: 0.74em;
    font-weight: 800;
}

.account-section-heading strong {
    margin-top: 5px;
    color: var(--account-setting-text);
    font-size: 1rem;
}

.account-section-heading p {
    max-width: 420px;
    margin: 0;
    color: var(--account-setting-muted);
    font-size: 0.82em;
    line-height: 1.55;
}

.account-setting-card {
    min-width: 0;
}

.account-segment-strip {
    display: inline-flex;
    gap: 4px;
    margin: 12px 0 16px;
    padding: 4px;
    border: 1px solid var(--account-setting-line);
    border-radius: 999px;
    background: var(--account-setting-surface);
}

.account-segment-strip span {
    min-width: 64px;
    padding: 6px 12px;
    border-radius: 999px;
    color: var(--account-setting-muted);
    font-size: 0.82em;
    text-align: center;
}

.account-segment-strip span.active {
    background: var(--account-setting-soft);
    color: var(--account-setting-primary);
    font-weight: 800;
}

.account-setting-list {
    border-top: 1px solid var(--account-setting-line);
}

.account-setting-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    min-height: 78px;
    padding: 16px 0;
    border-bottom: 1px solid var(--account-setting-line);
    cursor: pointer;
}

.account-setting-row.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.account-setting-copy strong,
.account-setting-copy em {
    display: block;
}

.account-setting-copy strong {
    color: var(--account-setting-text);
    font-size: 0.96em;
}

.account-setting-copy em {
    margin-top: 5px;
    color: var(--account-setting-muted);
    font-size: 0.82em;
    font-style: normal;
    line-height: 1.5;
}

.account-setting-switch {
    width: 42px;
    height: 24px;
    appearance: none;
    border: 1px solid var(--account-setting-line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--account-setting-muted) 22%, transparent);
    cursor: pointer;
    position: relative;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.account-setting-switch::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--account-setting-panel);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    transition: transform 0.2s ease;
}

.account-setting-switch:checked {
    border-color: var(--account-setting-primary);
    background: var(--account-setting-primary);
}

.account-setting-switch:checked::after {
    transform: translateX(18px);
}

.account-mode-grid,
.account-tool-grid,
.account-about-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.account-mode-button,
.account-tool-tile,
.account-system-pill {
    min-width: 0;
    min-height: 112px;
    padding: 16px;
    border: 1px solid var(--account-setting-line);
    border-radius: 8px;
    background: var(--account-setting-surface);
    color: var(--account-setting-text);
    text-align: left;
    font: inherit;
}

.account-mode-button,
.account-tool-tile {
    cursor: pointer;
}

.account-mode-button:hover,
.account-tool-tile:hover {
    border-color: color-mix(in srgb, var(--account-setting-primary) 30%, var(--account-setting-line));
    background: var(--account-setting-soft);
}

.account-mode-button.active {
    border-color: var(--account-setting-primary);
    box-shadow: inset 0 0 0 1px var(--account-setting-primary);
}

.account-mode-button span,
.account-tool-tile span,
.account-system-pill span {
    display: block;
    color: var(--account-setting-primary);
    font-size: 0.78em;
    font-weight: 800;
}

.account-mode-button strong,
.account-tool-tile strong,
.account-system-pill strong {
    display: block;
    margin-top: 8px;
    overflow-wrap: anywhere;
    color: var(--account-setting-text);
    font-size: 0.98em;
}

.account-mode-button em,
.account-tool-tile em {
    display: block;
    margin-top: 8px;
    color: var(--account-setting-muted);
    font-size: 0.78em;
    font-style: normal;
    line-height: 1.5;
}

.account-theme-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 14px;
    padding: 14px 16px;
    border: 1px solid var(--account-setting-line);
    border-radius: 8px;
    background: var(--account-setting-surface);
    color: var(--account-setting-muted);
    font-size: 0.86em;
}

.account-theme-swatches {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
}

.account-theme-swatches i {
    width: 22px;
    height: 22px;
    border: 1px solid var(--account-setting-line);
    border-radius: 50%;
}

.account-shortcut-list {
    display: grid;
    gap: 0;
    margin-top: 12px;
    border-top: 1px solid var(--account-setting-line);
}

.account-shortcut-row {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr) minmax(130px, auto);
    gap: 14px;
    align-items: center;
    min-height: 58px;
    border-bottom: 1px solid var(--account-setting-line);
    color: var(--account-setting-muted);
}

.account-shortcut-row span {
    color: var(--account-setting-primary);
    font-size: 0.78em;
    font-weight: 800;
}

.account-shortcut-row strong {
    color: var(--account-setting-text);
    font-size: 0.92em;
}

.account-shortcut-row kbd {
    justify-self: end;
    max-width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--account-setting-line);
    border-radius: 6px;
    background: var(--account-setting-input);
    color: var(--account-setting-text);
    font-size: 0.82em;
    white-space: normal;
}

.account-system-pill {
    min-height: 96px;
}

.account-advanced-card {
    min-width: 0;
}

.account-advanced-disclosure {
    margin-top: 16px;
    border: 1px solid var(--account-setting-line);
    border-radius: 12px;
    background: var(--account-setting-surface);
    overflow: hidden;
}

.account-advanced-disclosure summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 16px;
    align-items: center;
    min-height: 78px;
    padding: 16px 18px;
    color: var(--account-setting-text);
    cursor: pointer;
    list-style: none;
}

.account-advanced-disclosure summary::-webkit-details-marker {
    display: none;
}

.account-advanced-disclosure summary::after {
    content: '+';
    grid-column: 2;
    grid-row: 1 / span 3;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--account-setting-soft);
    color: var(--account-setting-primary);
    font-weight: 800;
}

.account-advanced-disclosure[open] summary::after {
    content: '-';
}

.account-advanced-disclosure summary span,
.account-advanced-disclosure summary strong,
.account-advanced-disclosure summary em {
    display: block;
    min-width: 0;
}

.account-advanced-disclosure summary span {
    color: var(--account-setting-primary);
    font-size: 0.76em;
    font-weight: 800;
}

.account-advanced-disclosure summary strong {
    color: var(--account-setting-text);
    font-size: 1rem;
}

.account-advanced-disclosure summary em {
    grid-column: 1;
    color: var(--account-setting-muted);
    font-size: 0.8em;
    font-style: normal;
    line-height: 1.5;
}

.account-advanced-disclosure-body {
    padding: 0 18px 18px;
    border-top: 1px solid var(--account-setting-line);
}

.account-settings-modal .account-advanced-disclosure-body.account-model-card {
    padding: 0 18px 18px;
}

.account-reduce-motion .account-settings-modal *,
.account-reduce-motion .account-settings-modal *::before,
.account-reduce-motion .account-settings-modal *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
}

.account-publish-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.account-publish-tile {
    min-height: 118px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border: 1px solid var(--account-setting-line);
    border-radius: 8px;
    color: var(--account-setting-text);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    font: inherit;
}

.account-publish-tile:hover {
    background: var(--account-setting-soft);
}

.account-publish-tile span {
    color: var(--account-setting-primary);
    font-size: 0.78em;
    font-weight: 800;
}

.account-publish-tile strong {
    color: var(--account-setting-text);
    font-size: 0.96em;
}

.account-publish-tile em {
    margin-top: auto;
    color: var(--account-setting-muted);
    font-size: 0.78em;
    font-style: normal;
}

.account-publish-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.account-settings-modal .account-model-card {
    padding: 0;
}

.account-settings-modal .account-model-card .account-card-title {
    padding: 18px 0 14px;
    border-bottom: 1px solid var(--account-setting-line);
}

.account-settings-modal .account-model-layout {
    grid-template-columns: minmax(188px, 0.28fr) minmax(0, 1fr);
    min-height: 0;
}

.account-settings-modal .account-model-provider-list {
    padding: 18px 18px 18px 0;
    border-right: 1px solid var(--account-setting-line);
    background: transparent;
}

.account-settings-modal .account-model-provider-list span {
    color: var(--account-setting-text);
}

.account-settings-modal .account-model-form {
    padding: 18px 0 0 18px;
}

.account-settings-modal .my-images-quota-bar {
    background: color-mix(in srgb, var(--account-setting-muted) 18%, transparent);
}

.account-settings-modal .my-images-quota-bar span {
    background: linear-gradient(90deg, var(--account-setting-primary), color-mix(in srgb, var(--account-setting-primary) 55%, var(--text-light) 45%));
}

.account-settings-modal .btn-primary {
    border-color: var(--account-setting-primary);
    background: var(--account-setting-primary);
    color: #fff;
}

.account-settings-modal .btn:not(.btn-primary) {
    border-color: color-mix(in srgb, var(--account-setting-primary) 18%, var(--account-setting-line));
    background: var(--account-setting-soft);
    color: var(--account-setting-primary);
}

.account-settings-modal .btn:disabled {
    opacity: 0.46;
    cursor: not-allowed;
}

.account-settings-modal {
    --account-setting-bg: #ffffff;
    --account-setting-sidebar: #fdf5f6;
    --account-setting-panel: #ffffff;
    --account-setting-surface: #ffffff;
    --account-setting-soft: #f5f3ff;
    --account-setting-input: #fdfafb;
    --account-setting-text: #1f2937;
    --account-setting-muted: #8a8993;
    --account-setting-line: #f1e9ed;
    --account-setting-primary: #6d28d9;
    border-radius: 16px;
    background: var(--account-setting-bg);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

#accountCenterModal {
    inset: calc(var(--unified-top-toolbar-height, 49px) + 16px) auto auto 50%;
    width: min(980px, calc(100vw - 40px));
    height: min(640px, calc(100vh - var(--unified-top-toolbar-height, 49px) - 34px));
}

.account-settings-modal .account-center-shell {
    grid-template-columns: 210px minmax(0, 1fr);
}

.account-settings-modal .account-settings-sidebar {
    padding: 20px 12px;
    background: var(--account-setting-sidebar);
}

.account-settings-brand {
    min-height: 34px;
    padding: 0 12px 10px;
    color: var(--account-setting-muted);
}

.account-settings-brand span {
    color: var(--account-setting-muted);
    font-size: 0.82em;
    font-weight: 800;
}

.account-settings-brand strong {
    color: var(--account-setting-muted);
    font-size: 0.82em;
    font-weight: 700;
}

.account-settings-search {
    margin: 0 0 12px;
}

.account-profile-card,
.account-settings-modal .account-badges {
    display: none;
}

.account-settings-sidebar .account-tabs {
    gap: 2px;
}

.account-settings-sidebar .account-tabs button {
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 10px;
    min-height: 34px;
    padding: 8px 14px;
    border: 0;
    border-radius: 10px;
    color: #4b5563;
}

.account-settings-sidebar .account-tabs button:hover {
    border-color: transparent;
    background: rgba(0, 0, 0, 0.025);
}

.account-settings-sidebar .account-tabs button.active {
    border-color: transparent;
    background: #ffffff;
    color: #000000;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.035);
}

.account-tab-icon {
    width: 18px;
    height: 18px;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-size: 0.9em;
}

.account-tab-copy strong {
    font-size: 0.86em;
    font-weight: 650;
}

.account-tab-copy em {
    display: none;
}

.account-settings-modal .account-tab-group-label {
    margin: 12px 0 4px 12px;
    color: var(--account-setting-muted);
    font-size: 0.72em;
    letter-spacing: 0;
    text-transform: uppercase;
}

.account-content-header {
    padding: 26px 32px 4px;
}

.account-content-eyebrow {
    display: none;
}

.account-content-header h3 {
    font-size: 1.12rem;
}

.account-content-scroll {
    padding: 16px 32px 0;
    overflow-x: hidden;
}

.account-settings-footer {
    padding: 12px 32px 20px;
    background: #ffffff;
}

.account-settings-modal .account-card,
.account-settings-modal .account-panel-account .account-card {
    max-width: 100%;
    border: 1px solid var(--account-setting-line);
    border-radius: 16px;
    background: #ffffff;
    padding: 22px;
    margin: 0 0 16px;
}

.account-settings-modal .account-card + .account-card {
    margin-top: 0;
}

.account-section-heading {
    margin-bottom: 16px;
}

.account-settings-modal .account-section-nav {
    flex-wrap: wrap;
    overflow-x: hidden;
}

.account-settings-modal .account-section-nav button {
    min-width: 0;
}

.account-settings-modal .account-section-tabs {
    position: static;
    display: inline-flex;
    width: auto;
    max-width: 100%;
    flex-wrap: nowrap;
    gap: 0;
    margin: 0 0 16px;
    padding: 4px;
    border: 0;
    border-radius: 999px;
    background: #f0dced;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    backdrop-filter: none;
    scrollbar-width: none;
}

.account-settings-modal .account-section-tabs::-webkit-scrollbar {
    display: none;
}

.account-settings-modal .account-section-tabs button[hidden] {
    display: none !important;
}

.account-settings-modal .account-section-tabs button {
    flex: 0 0 auto;
    min-width: 0;
    min-height: 34px;
    padding: 0 18px;
    border-radius: 999px;
    text-align: center;
    color: color-mix(in srgb, var(--account-setting-primary) 72%, var(--account-setting-muted) 28%);
}

.account-settings-modal .account-section-tabs button.active,
.account-settings-modal .account-section-tabs button:hover {
    background: #fff;
    color: var(--account-setting-primary);
    box-shadow: 0 1px 6px rgba(89, 60, 143, 0.12);
}

.account-settings-modal .account-panel-account > .account-section {
    display: none;
}

.account-settings-modal .account-panel-account > .account-section.is-active {
    display: block;
}

.account-settings-modal .account-auth-grid,
.account-settings-modal .account-form-grid,
.account-settings-modal .account-storage-grid,
.account-settings-modal .account-publish-grid,
.account-settings-modal .account-tool-grid,
.account-settings-modal .account-about-grid {
    max-width: 100%;
}

.account-settings-modal .account-single-grid {
    grid-template-columns: minmax(0, 1fr);
}

.account-section-heading span,
.account-panel-kicker,
.account-overview-kicker {
    color: var(--account-setting-primary);
}

.account-settings-modal .account-storage-card,
.account-settings-modal .account-publish-tile,
.account-settings-modal .account-auth-pane,
.account-settings-modal .account-bind-state,
.account-settings-modal .account-bind-bridge,
.account-settings-modal .account-model-health,
.account-setting-row,
.account-mode-button,
.account-tool-tile,
.account-system-pill,
.account-advanced-disclosure {
    border-radius: 10px;
    background: #fdfafb;
}

.account-settings-modal .account-publish-tile:hover,
.account-mode-button:hover,
.account-tool-tile:hover {
    background: var(--account-setting-soft);
}

.account-settings-modal .account-model-card .account-card-title {
    padding-top: 0;
}

#accountCenterModal[data-account-mode="auth"] .account-settings-modal {
    display: block;
    gap: 0;
    padding: 0;
    border-radius: 2px;
}

#accountCenterModal[data-account-mode="auth"] .account-main-panel {
    display: block;
    height: auto;
}

#accountCenterModal[data-account-mode="auth"] .account-content-scroll {
    flex: 0 0 auto;
    height: auto;
    max-height: calc(100vh - var(--unified-top-toolbar-height, 49px) - 132px);
    overflow: auto;
}

#accountCenterModal[data-account-mode="auth"] .account-auth-section.account-card {
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

#accountCenterModal[data-account-mode="auth"] .account-auth-pane {
    border-radius: 0;
    background: transparent;
}

#accountCenterModal[data-account-mode="auth"] .account-center-current {
    display: none !important;
}

#accountCenterModal[data-account-mode="auth"] .account-settings-footer {
    display: none;
}

@media (max-width: 760px) {
    .account-settings-modal {
        border-radius: 14px;
    }

    #accountCenterModal {
        inset: 60px auto auto 50%;
        width: calc(100vw - 16px);
        height: calc(100vh - 76px);
        padding: 0;
    }

    .account-settings-modal .account-center-shell {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr);
    }

    .account-settings-modal .account-settings-sidebar {
        max-height: 38vh;
        border-right: 0;
        border-bottom: 1px solid var(--account-setting-line);
    }

    .account-settings-modal .account-section-nav {
        overflow-x: auto;
    }

    .account-section-heading {
        flex-direction: column;
        gap: 8px;
    }

    .account-section-heading p {
        max-width: none;
    }

    .account-settings-sidebar .account-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .account-content-header,
    .account-content-scroll,
    .account-settings-footer {
        padding-left: 18px;
        padding-right: 18px;
    }

    .account-settings-modal .account-overview-card {
        grid-template-columns: 1fr;
    }

    .account-publish-grid {
        grid-template-columns: 1fr;
    }

    .account-mode-grid,
    .account-tool-grid,
    .account-about-grid {
        grid-template-columns: 1fr;
    }

    .account-theme-preview {
        align-items: stretch;
        flex-direction: column;
    }

    .account-setting-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .account-shortcut-row {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 12px 0;
    }

    .account-shortcut-row kbd {
        justify-self: start;
    }

    .account-settings-modal .account-overview-card .my-images-quota-bar,
    .account-settings-modal .account-overview-card em {
        grid-column: 1;
    }

    .account-settings-modal .account-model-provider-list {
        padding-right: 0;
        border-right: 0;
    }

    .account-settings-modal .account-model-form {
        padding-left: 0;
    }
}

.mobile-home,
.mobile-back-home {
    display: none;
}

.personal-sub-menu {
    position: relative;
}

.personal-media-menu {
    left: calc(100% + 8px);
    right: auto;
    top: -4px;
}

.logo {
    font-size: 1.05em;
    color: var(--primary);
    white-space: nowrap;
}

.import-btn {
    padding: 6px 12px;
    background: var(--bg-dark);
    color: var(--text-light);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.85em;
    cursor: pointer;
}

.import-btn:hover {
    border-color: var(--primary);
}

/* ==================== Markdown 工具栏 ==================== */
.md-toolbar {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 6px 15px;
    background: var(--bg-deeper);
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
    flex-shrink: 0;
    transition: background 0.25s;
}

.md-toolbar button {
    padding: 5px 10px;
    border: none;
    background: var(--bg-light);
    color: var(--text-light);
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.8em;
}

.md-toolbar button:hover {
    background: var(--primary);
}

.toolbar-divider {
    width: 1px;
    height: 20px;
    background: var(--border-color);
    margin: 0 5px;
}

.btn-template {
    background: var(--primary) !important;
    font-weight: bold;
}

.page-estimate {
    font-size: 0.8em;
    color: #888;
    margin-right: 10px;
    padding: 3px 10px;
    background: var(--bg-dark);
    border-radius: 10px;
}

/* ==================== 选择器 ==================== */
.style-selector, .layout-selector, .palette-selector, .image-border-toggle, .watermark-controls, .preview-primary-controls, .preview-extra-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

.style-selector label, .layout-selector label, .palette-selector label, .image-border-toggle label, .watermark-controls label {
    font-size: 0.85em;
    color: #aaa;
}

.image-border-toggle input {
    accent-color: var(--primary);
}

.watermark-controls {
    padding-left: 4px;
    flex-wrap: wrap;
    min-width: 0;
}

/* 水印面板：浮层弹出 */
.preview-watermark-controls {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 500;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.22);
    padding: 10px 14px 10px;
    flex: unset;
    justify-content: flex-start;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-dark) 64%, transparent);
}

.preview-primary-controls,
.preview-extra-controls {
    flex: 1 1 520px;
    justify-content: center;
    flex-wrap: wrap;
    padding: 6px 8px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-dark) 64%, transparent);
}

.preview-extra-controls {
    flex: 0 1 auto;
}

.preview-primary-controls {
    flex: 1 1 560px;
}

.preview-primary-controls select {
    max-width: 170px;
}

.preview-compact-dropdown {
    position: relative;
    flex: 0 0 auto;
}

/* ==================== 卡片专用主题（不影响文章/手机/电脑预览） ==================== */
.card-theme-picker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    color: var(--text-muted);
    font-size: 12px;
}

.card-theme-picker select {
    min-height: 32px;
    padding: 0 8px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    background: var(--bg-dark);
    color: var(--text-light);
    font-size: 12px;
}

body .xhs-card.pixel-page.card-theme-social {
    border: 1px solid rgba(15, 20, 25, 0.08) !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    color: #202124 !important;
    box-shadow: 0 18px 46px rgba(15, 20, 25, 0.13) !important;
}

.card-theme-topline {
    position: absolute;
    z-index: 4;
    pointer-events: none;
}

.card-theme-bottomline {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-social-actions {
    position: absolute;
    z-index: 6;
    right: 18px;
    left: 18px;
    bottom: 7px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
    min-height: 25px;
    padding-top: 7px;
    border-top: 1px solid #e7ecf0;
    color: #536471;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
    display: none !important;
}

.card-social-actions span {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 3px;
    min-width: 0;
}

.card-social-actions b {
    font-size: 7px;
    font-weight: 650;
}

.card-social-actions small {
    color: #7a8a97;
    font-size: 7px;
}

body .xhs-card.pixel-page.card-theme-social .preview-content {
    top: 84px !important;
    height: calc(var(--pixel-content-h, 356px) - 112px) !important;
    color: #4b5563 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif !important;
}

body .xhs-card.pixel-page.card-theme-social.card-social-profile-hidden .preview-content {
    top: 38px !important;
    height: calc(var(--pixel-content-h, 356px) - 72px) !important;
}

.card-social-profile {
    position: absolute;
    z-index: 8;
    top: 18px;
    right: 23px;
    left: 23px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    color: #202124;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
}

.card-social-avatar {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #e8edf2;
    border-radius: 50%;
    background: #f4ead8;
    color: #202124;
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(15, 20, 25, .10);
}

.card-social-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-social-author {
    min-width: 0;
    display: grid;
    line-height: 1.2;
}

.card-social-author b {
    overflow: hidden;
    color: #202124;
    font-size: 14px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-social-author b em {
    display: inline-grid;
    place-items: center;
    width: 13px;
    height: 13px;
    margin-left: 3px;
    border-radius: 50%;
    background: #0b7cff;
    color: #fff;
    font-size: 9px;
    font-style: normal;
    line-height: 1;
    font-style: normal;
}

.card-social-author small {
    overflow: hidden;
    color: #70757d;
    font-size: 10px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-social-more {
    display: none;
}

.card-identity-toggle {
    width: auto !important;
    white-space: nowrap;
}

.card-decoration-toggle {
    width: auto !important;
    white-space: nowrap;
}

.card-settings-toggle {
    width: auto !important;
    white-space: nowrap;
}

.card-settings-toggle.active,
.card-settings-toggle[aria-expanded="true"] {
    border-color: color-mix(in srgb, var(--primary) 55%, var(--border-color));
    background: color-mix(in srgb, var(--primary) 18%, var(--bg-dark));
    color: var(--primary);
}

.card-identity-panel,
.card-decoration-panel {
    position: absolute;
    z-index: 120;
    top: calc(100% + 6px);
    right: 0;
    width: min(430px, calc(100vw - 32px));
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    align-items: end;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-light);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .2);
}

.card-identity-panel[hidden],
.card-decoration-panel[hidden] { display: none; }

.card-identity-panel label,
.card-decoration-panel label {
    min-width: 0;
    display: grid;
    gap: 3px;
    color: var(--text-muted);
    font-size: 10px;
}

.card-identity-panel input,
.card-identity-panel select,
.card-identity-panel > button:not(.card-identity-avatar-button),
.card-decoration-panel input,
.card-decoration-panel select,
.card-decoration-panel > button {
    min-width: 0;
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-dark);
    color: var(--text-light);
}

.card-identity-avatar-button {
    width: 34px !important;
    height: 34px;
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 50% !important;
}

.card-identity-avatar-button img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-identity-panel label:nth-of-type(3) {
    grid-column: 2 / 3;
}

.card-identity-panel > button:not(.card-identity-avatar-button) {
    grid-column: 3 / 4;
}

.card-decoration-panel {
    width: min(720px, calc(100vw - 32px));
    grid-template-columns: minmax(180px, 1.7fr) minmax(110px, .65fr) minmax(180px, 1.7fr) minmax(110px, .65fr) minmax(130px, .8fr) auto;
}

.card-decoration-panel-heading {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    color: var(--text-light);
}

.card-decoration-panel-heading span {
    color: var(--text-muted);
    font-size: 11px;
}

.card-decoration-panel > button {
    white-space: nowrap;
}

.card-settings-panel {
    position: absolute;
    z-index: 140;
    top: calc(100% + 6px);
    right: 0;
    width: min(980px, calc(100vw - 32px));
    max-height: min(72vh, 680px);
    overflow: auto;
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: color-mix(in srgb, var(--bg-light) 94%, #fff 6%);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .24);
}

.card-settings-panel[hidden] {
    display: none;
}

.card-settings-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
}

.card-settings-panel-heading > div {
    display: grid;
    gap: 3px;
}

.card-settings-panel-heading strong,
.card-settings-section-title strong {
    color: var(--text-light);
}

.card-settings-panel-heading span,
.card-settings-section-title span {
    color: var(--text-muted);
    font-size: 11px;
}

.card-settings-panel-heading button {
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-dark);
    color: var(--text-muted);
}

.card-settings-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr);
    gap: 12px;
}

.card-settings-section {
    min-width: 0;
    display: grid;
    gap: 10px;
    align-content: start;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--border-color) 85%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-dark) 58%, transparent);
}

.card-settings-watermark {
    grid-column: 1 / -1;
}

.card-settings-section-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.card-settings-fields {
    display: grid;
    gap: 8px;
}

.card-settings-decoration-fields {
    grid-template-columns: minmax(170px, 1.4fr) minmax(96px, .7fr) minmax(190px, 1.6fr) minmax(96px, .7fr) minmax(120px, .8fr) auto;
}

.card-settings-identity-fields {
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
}

.card-settings-fields label {
    min-width: 0;
    display: grid;
    gap: 3px;
    color: var(--text-muted);
    font-size: 10px;
}

.card-settings-fields input,
.card-settings-fields select,
.card-settings-fields > button:not(.card-identity-avatar-button) {
    min-width: 0;
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-dark);
    color: var(--text-light);
}

.card-settings-fields > button:not(.card-identity-avatar-button) {
    white-space: nowrap;
}

.card-settings-watermark-mount .preview-watermark-controls {
    position: static;
    z-index: auto;
    width: 100%;
    margin: 0;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--bg-dark) 72%, transparent);
    box-shadow: none;
}

.card-settings-watermark-panel {
    display: flex !important;
}

.card-settings-watermark-mount .watermark-panel-close {
    display: none;
}

.card-settings-watermark-mount .watermark-preset-list {
    max-width: 100%;
    flex-basis: 100%;
}

@media (max-width: 1120px) {
    .card-identity-panel,
    .card-decoration-panel {
        right: -6px;
    }

    .card-decoration-panel {
        grid-template-columns: minmax(150px, 1fr) minmax(100px, .55fr) minmax(150px, 1fr);
    }

    .card-settings-panel {
        right: -6px;
        width: min(720px, calc(100vw - 24px));
    }

    .card-settings-grid,
    .card-settings-decoration-fields,
    .card-settings-identity-fields {
        grid-template-columns: 1fr 1fr;
    }

    .card-settings-watermark,
    .card-settings-decoration-fields button,
    .card-settings-identity-fields button:last-child {
        grid-column: 1 / -1;
    }
}

body .xhs-card.pixel-page.card-theme-social:not(.page-type-cover) .card-theme-topline {
    top: 29px;
    right: 25px;
    left: auto;
    max-width: 92px;
    color: #8b8f97;
    font: 650 11px/1.1 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
    letter-spacing: .04em;
    text-align: right;
}

.xhs-card.pixel-page.card-theme-social .preview-content h1,
.xhs-card.pixel-page.card-theme-social .preview-content h2,
.xhs-card.pixel-page.card-theme-social .cover-title {
    color: #202124 !important;
    border: 0 !important;
    background: transparent !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Noto Sans SC", sans-serif !important;
    font-size: 26px !important;
    font-weight: 900 !important;
    line-height: 1.16 !important;
    text-align: left !important;
    letter-spacing: -.035em !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
}

.xhs-card.pixel-page.card-theme-social .preview-content h2 {
    font-size: 23px !important;
}

.xhs-card.pixel-page.card-theme-social .preview-content h2::after { display: none !important; }
.xhs-card.pixel-page.card-theme-social .pixel-page-footer {
    left: 0 !important;
    right: 0 !important;
    bottom: 8px !important;
    height: 24px !important;
    justify-content: center !important;
    border-top: 1px solid rgba(15, 20, 25, 0.08);
    color: #a0a4aa !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .05em;
}

.xhs-card.pixel-page.card-theme-social .card-theme-bottomline {
    max-width: calc(100% - 44px);
    text-align: center;
}

.xhs-card.pixel-page.card-theme-social .preview-content p,
.xhs-card.pixel-page.card-theme-social .preview-content li {
    color: #4b5563 !important;
    font-size: 15.5px !important;
    line-height: 1.55 !important;
    letter-spacing: -.02em;
}

.xhs-card.pixel-page.card-theme-social .preview-content p {
    margin: 0 0 16px !important;
}

.xhs-card.pixel-page.card-theme-social .preview-content ul,
.xhs-card.pixel-page.card-theme-social .preview-content ol {
    padding-left: 18px !important;
    margin: 8px 0 0 !important;
}

.xhs-card.pixel-page.card-theme-social .preview-content li {
    padding-left: 3px !important;
    margin: 8px 0 !important;
}

.xhs-card.pixel-page.card-theme-social .preview-content li::marker {
    color: #59616d;
    font-size: .8em;
}

.xhs-card.pixel-page.card-theme-social .preview-content strong {
    display: inline;
    padding: 0 .12em;
    border-radius: 4px;
    background: linear-gradient(180deg, transparent 24%, rgba(9, 124, 255, .10) 24%, rgba(9, 124, 255, .10) 88%, transparent 88%) !important;
    color: #0877e8 !important;
    font-weight: 900 !important;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.xhs-card.pixel-page.card-theme-social .preview-content blockquote {
    margin: 14px 0 !important;
    padding: 0 0 0 10px !important;
    border-left: 3px solid #0877e8 !important;
    background: transparent !important;
    color: #4b5563 !important;
}

/* v60: restore the original tweet-card feel; keep editable top/bottom/social elements. */
body .xhs-card.pixel-page.card-theme-social {
    border: 2px solid #f7dce4 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    color: #0f1419 !important;
    box-shadow: 0 16px 42px rgba(15, 20, 25, 0.16) !important;
}

body .xhs-card.pixel-page.card-theme-social .preview-content {
    top: 68px !important;
    height: calc(var(--pixel-content-h, 356px) - 42px) !important;
    color: #0f1419 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif !important;
}

body .xhs-card.pixel-page.card-theme-social.card-social-profile-hidden .preview-content {
    top: 24px !important;
    height: calc(var(--pixel-content-h, 356px) - 54px) !important;
}

body .xhs-card.pixel-page.card-theme-social:not(.page-type-cover) .card-theme-topline {
    top: 20px;
    right: 18px;
    left: auto;
    max-width: 92px;
    color: #536471;
    font: 650 8px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
    letter-spacing: .03em;
    text-align: right;
}

.xhs-card.pixel-page.card-theme-social .preview-content h1,
.xhs-card.pixel-page.card-theme-social .preview-content h2,
.xhs-card.pixel-page.card-theme-social .cover-title {
    color: #0f1419 !important;
    border: 0 !important;
    background: transparent !important;
    font-family: Georgia, "Noto Serif SC", "Songti SC", serif !important;
    font-size: 23px !important;
    font-weight: 900 !important;
    line-height: 1.34 !important;
    text-align: left !important;
    letter-spacing: -.02em !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
}

.xhs-card.pixel-page.card-theme-social .preview-content h2 {
    font-size: 21px !important;
}

.xhs-card.pixel-page.card-theme-social .preview-content p,
.xhs-card.pixel-page.card-theme-social .preview-content li {
    color: #0f1419 !important;
    font-size: 13px !important;
    line-height: 1.58 !important;
    letter-spacing: 0 !important;
}

.xhs-card.pixel-page.card-theme-social .preview-content p {
    margin: 0 0 10px !important;
}

.xhs-card.pixel-page.card-theme-social .preview-content ul,
.xhs-card.pixel-page.card-theme-social .preview-content ol {
    padding-left: 17px !important;
    margin: 8px 0 0 !important;
}

.xhs-card.pixel-page.card-theme-social .preview-content li {
    padding-left: 2px !important;
    margin: 6px 0 !important;
}

.xhs-card.pixel-page.card-theme-social .preview-content li::marker {
    color: #536471;
    font-size: .86em;
}

.xhs-card.pixel-page.card-theme-social .preview-content strong {
    display: inline !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #0f1419 !important;
    font-weight: 850 !important;
    box-decoration-break: initial;
    -webkit-box-decoration-break: initial;
}

.xhs-card.pixel-page.card-theme-social .preview-content blockquote {
    margin: 12px 0 !important;
    padding: 0 0 0 10px !important;
    border-left: 3px solid #536471 !important;
    background: transparent !important;
    color: #536471 !important;
}

.xhs-card.pixel-page.card-theme-social .pixel-page-footer {
    left: 18px !important;
    right: 18px !important;
    bottom: 34px !important;
    height: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-top: 0 !important;
    color: #536471 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
    font-size: 8px;
    font-weight: 650;
    letter-spacing: .02em;
}

.xhs-card.pixel-page.card-theme-social .card-theme-bottomline {
    max-width: calc(100% - 48px);
    text-align: left;
}

.xhs-card.pixel-page.card-theme-social .page-number {
    color: #536471 !important;
    font-size: 8px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif !important;
}

.card-theme-social .card-social-profile {
    top: 13px;
    right: 18px;
    left: 18px;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 8px;
    color: #0f1419;
}

.card-theme-social .card-social-avatar {
    border: 1px solid #d8e2e8;
    background: #eaf4e2;
    color: #294636;
    box-shadow: none;
}

.card-theme-social .card-social-author b {
    color: #0f1419;
    font-size: 11px;
    font-weight: 850;
}

.card-theme-social .card-social-author b em {
    display: inline;
    width: auto;
    height: auto;
    margin-left: 3px;
    border-radius: 0;
    background: transparent;
    color: #1d9bf0;
    font-size: 10px;
    font-style: normal;
    line-height: 1;
}

.card-theme-social .card-social-author b .card-social-platform {
    display: inline-grid;
    place-items: center;
    width: 14px;
    height: 14px;
    margin-left: 4px;
    border-radius: 4px;
    color: #fff;
    font: 800 8px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    vertical-align: 1px;
    overflow: hidden;
}

.card-theme-social .card-social-platform img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
}

.card-social-platform-wechat,
.card-social-platform-channels,
.card-social-platform-xiaohongshu,
.card-social-platform-weibo,
.card-social-platform-zhihu,
.card-social-platform-douyin { background: transparent !important; }

.xhs-card.pixel-page.card-theme-social .pixel-page-footer,
.xhs-card.pixel-page.card-theme-social .card-social-actions {
    display: none !important;
}

/* v67: premium, content-adaptive card theme system. */
.xhs-card.pixel-page.card-theme-memo:not(.page-type-cover) .preview-content,
.xhs-card.pixel-page.card-theme-clinical:not(.page-type-cover) .preview-content,
.xhs-card.pixel-page.card-theme-journal:not(.page-type-cover) .preview-content,
.xhs-card.pixel-page.card-theme-research:not(.page-type-cover) .preview-content,
.xhs-card.pixel-page.card-theme-visual:not(.page-type-cover) .preview-content,
.xhs-card.pixel-page.card-theme-lecture:not(.page-type-cover) .preview-content {
    left: 18px !important;
    right: 18px !important;
}

body .xhs-card.pixel-page.card-theme-memo {
    border: 1px solid #dfd2bb !important;
    border-radius: 14px !important;
    background-color: #fbf5e9 !important;
    background-image:
        linear-gradient(rgba(110, 88, 57, .065) 1px, transparent 1px),
        linear-gradient(90deg, rgba(110, 88, 57, .065) 1px, transparent 1px),
        radial-gradient(circle at 88% 10%, rgba(191, 137, 76, .10), transparent 28%) !important;
    background-size: 20px 20px, 20px 20px, auto !important;
    box-shadow: 0 20px 48px rgba(88, 67, 40, .18) !important;
}

.xhs-card.pixel-page.card-theme-memo .preview-content h2 {
    margin-bottom: 10px !important;
    padding: 4px 0 5px 12px !important;
    border-left: 4px solid #a06f38 !important;
    font-size: 19px !important;
    letter-spacing: .035em !important;
}

.xhs-card.pixel-page.card-theme-memo .preview-content blockquote {
    border: 0 !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, .58) !important;
    box-shadow: inset 0 0 0 1px rgba(126, 99, 63, .12) !important;
}

body .xhs-card.pixel-page.card-theme-clinical {
    border: 1px solid #b9d4da !important;
    border-radius: 10px !important;
    background:
        linear-gradient(180deg, #0e6675 0 45px, #f7fbfc 45px 100%) !important;
    box-shadow: 0 20px 48px rgba(10, 75, 89, .20) !important;
}

body .xhs-card.pixel-page.card-theme-clinical:not(.page-type-cover) .card-theme-topline {
    color: #f1fcff !important;
}

.xhs-card.pixel-page.card-theme-clinical .preview-content h2 {
    padding: 0 0 8px !important;
    border-bottom: 1px solid #9ec7cf !important;
    color: #0b5967 !important;
    font-size: 19px !important;
}

.xhs-card.pixel-page.card-theme-clinical .preview-content h2::after {
    width: 38px !important;
    height: 4px !important;
    margin-top: 7px !important;
    background: #df3f61 !important;
}

.xhs-card.pixel-page.card-theme-clinical .preview-content blockquote,
.xhs-card.pixel-page.card-theme-clinical .preview-content table {
    border: 1px solid #c8e0e4 !important;
    border-radius: 8px !important;
    background: #edf6f7 !important;
}

body .xhs-card.pixel-page.card-theme-journal {
    border: 1px solid #d2c9bb !important;
    border-radius: 4px !important;
    background:
        linear-gradient(90deg, rgba(164, 43, 39, .06), transparent 18%),
        #f9f5ed !important;
    box-shadow: 0 22px 48px rgba(52, 45, 35, .20) !important;
}

.xhs-card.pixel-page.card-theme-journal .preview-content h2 {
    padding: 0 0 9px !important;
    border-bottom: 2px solid #282724 !important;
    font-size: 21px !important;
    line-height: 1.28 !important;
}

.xhs-card.pixel-page.card-theme-journal .preview-content h2::after {
    width: 38px !important;
    height: 5px !important;
    margin-top: 8px !important;
    background: #a92d2a !important;
}

.xhs-card.pixel-page.card-theme-journal .preview-content p::first-letter {
    color: #a92d2a;
}

body .xhs-card.pixel-page.card-theme-research {
    border: 1px solid rgba(25, 70, 46, .24) !important;
    border-radius: 14px !important;
    background:
        radial-gradient(circle at 88% 10%, rgba(236, 164, 100, .25), transparent 24%),
        linear-gradient(145deg, #eff4ea, #dce8dd 68%, #d1dfd5) !important;
    box-shadow: 0 22px 54px rgba(38, 70, 48, .25) !important;
}

.xhs-card.pixel-page.card-theme-research .preview-content h2 {
    padding-bottom: 8px !important;
    color: #173928 !important;
    font-size: 20px !important;
}

.xhs-card.pixel-page.card-theme-research .preview-content blockquote,
.xhs-card.pixel-page.card-theme-research .preview-content pre,
.xhs-card.pixel-page.card-theme-research .preview-content table {
    border: 1px solid rgba(37, 83, 55, .13) !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, .55) !important;
    box-shadow: 0 5px 16px rgba(38, 70, 48, .06) !important;
}

body .xhs-card.pixel-page.card-theme-visual {
    border: 1px solid #d8dde1 !important;
    border-radius: 16px !important;
    background:
        radial-gradient(circle at 90% 12%, rgba(67, 197, 177, .14), transparent 25%),
        linear-gradient(145deg, #f4f6f7, #e9edef) !important;
    box-shadow: 0 22px 50px rgba(42, 52, 59, .20) !important;
}

.xhs-card.pixel-page.card-theme-visual .preview-content h2 {
    padding: 11px 12px !important;
    border: 1px solid rgba(42, 52, 59, .08) !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, .90) !important;
    box-shadow: 0 8px 22px rgba(42, 52, 59, .08) !important;
    font-size: 19px !important;
}

.xhs-card.pixel-page.card-theme-visual .preview-content blockquote,
.xhs-card.pixel-page.card-theme-visual .preview-content pre,
.xhs-card.pixel-page.card-theme-visual .preview-content table {
    border-radius: 10px !important;
    background: rgba(255, 255, 255, .82) !important;
    box-shadow: 0 7px 20px rgba(42, 52, 59, .07) !important;
}

body .xhs-card.pixel-page.card-theme-lecture {
    border: 1px solid #24435c !important;
    border-radius: 14px !important;
    background:
        linear-gradient(rgba(109, 205, 244, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(109, 205, 244, .045) 1px, transparent 1px),
        radial-gradient(circle at 84% 12%, rgba(49, 184, 232, .22), transparent 28%),
        radial-gradient(circle at 15% 88%, rgba(244, 185, 66, .10), transparent 30%),
        linear-gradient(145deg, #07111f, #0c2438) !important;
    background-size: 24px 24px, 24px 24px, auto, auto, auto !important;
    box-shadow: 0 24px 56px rgba(2, 12, 27, .42) !important;
}

.xhs-card.pixel-page.card-theme-lecture .preview-content h2 {
    padding: 0 0 9px !important;
    border-bottom: 1px solid rgba(125, 211, 252, .42) !important;
    color: #8bdcff !important;
    font-size: 20px !important;
    text-shadow: 0 0 18px rgba(56, 189, 248, .18);
}

.xhs-card.pixel-page.card-theme-lecture .preview-content blockquote,
.xhs-card.pixel-page.card-theme-lecture .preview-content pre {
    border: 1px solid rgba(125, 211, 252, .16) !important;
    border-radius: 9px !important;
    background: rgba(255, 255, 255, .055) !important;
}

.card-theme-social .card-social-author small {
    color: #536471;
    font-size: 9px;
    font-weight: 600;
}

.card-theme-social .card-social-more {
    display: inline-flex;
    align-items: center;
    color: #536471;
    font-size: 8px;
    font-weight: 650;
    letter-spacing: .04em;
}

.card-theme-social .card-social-actions {
    display: grid !important;
    bottom: 7px;
    border-top: 1px solid #e7ecf0;
}

body .xhs-card.pixel-page.card-theme-memo {
    border: 1px solid #d8ccb9 !important;
    background-color: #f7f1e6 !important;
    background-image:
        linear-gradient(rgba(83, 72, 56, .075) 1px, transparent 1px),
        linear-gradient(90deg, rgba(83, 72, 56, .075) 1px, transparent 1px) !important;
    background-size: 18px 18px !important;
    color: #3f392f !important;
    box-shadow: 0 20px 50px rgba(74, 62, 43, .20) !important;
}

body .xhs-card.pixel-page.card-theme-memo:not(.page-type-cover) .card-theme-topline {
    top: 15px;
    left: 18px;
    padding-bottom: 7px;
    border-bottom: 1px solid rgba(63, 57, 47, .42);
    color: #5e5547;
    font: 700 8px/1.2 "SFMono-Regular", Consolas, monospace;
    letter-spacing: .13em;
}

body .xhs-card.pixel-page.card-theme-memo:not(.page-type-cover) .preview-content {
    top: 52px !important;
    height: calc(var(--pixel-content-h, 356px) - 34px) !important;
    color: #3f392f !important;
    font-family: "Source Han Serif SC", "Noto Serif SC", "Songti SC", serif !important;
}

.xhs-card.pixel-page.card-theme-memo .preview-content h1,
.xhs-card.pixel-page.card-theme-memo .preview-content h2,
.xhs-card.pixel-page.card-theme-memo .cover-title {
    color: #332d25 !important;
    border: 0 !important;
    background: transparent !important;
    font-family: "Source Han Serif SC", "Noto Serif SC", "Songti SC", serif !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1.42 !important;
    text-align: left !important;
}

.xhs-card.pixel-page.card-theme-memo .preview-content h2 {
    padding-left: 10px !important;
    border-left: 3px solid #8d775a !important;
}
.xhs-card.pixel-page.card-theme-memo .preview-content h2::after { display: none !important; }
.xhs-card.pixel-page.card-theme-memo .preview-content strong { color: #765b37 !important; }
.xhs-card.pixel-page.card-theme-memo .pixel-page-footer { color: rgba(63, 57, 47, .62) !important; }

body .xhs-card.pixel-page.card-theme-clinical {
    border: 1px solid #b9d0d8 !important;
    background:
        linear-gradient(180deg, #e8f3f5 0 43px, #f9fcfc 43px 100%) !important;
    box-shadow: 0 18px 46px rgba(14, 76, 91, .18) !important;
}

body .xhs-card.pixel-page.card-theme-clinical:not(.page-type-cover) .card-theme-topline {
    top: 15px;
    left: 18px;
    color: #0b5967;
    font: 800 9px/1 "SFMono-Regular", Consolas, monospace;
    letter-spacing: .16em;
}

body .xhs-card.pixel-page.card-theme-clinical .card-theme-bottomline {
    color: #62818a;
    font: 700 6.5px/1 "SFMono-Regular", Consolas, monospace;
    letter-spacing: .08em;
}

body .xhs-card.pixel-page.card-theme-clinical:not(.page-type-cover) .preview-content {
    top: 56px !important;
    height: calc(var(--pixel-content-h, 356px) - 42px) !important;
    color: #183c45 !important;
    font-family: "Source Han Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif !important;
}

.xhs-card.pixel-page.card-theme-clinical .preview-content h1,
.xhs-card.pixel-page.card-theme-clinical .preview-content h2,
.xhs-card.pixel-page.card-theme-clinical .cover-title {
    color: #0b5967 !important;
    border: 0 !important;
    border-bottom: 1px solid #8bb8c0 !important;
    background: transparent !important;
    text-align: left !important;
}

.xhs-card.pixel-page.card-theme-clinical .preview-content h2::after {
    width: 42px !important;
    height: 3px !important;
    background: #de4762 !important;
}

.xhs-card.pixel-page.card-theme-clinical .preview-content blockquote {
    border: 0 !important;
    border-radius: 6px !important;
    background: #e6f2f3 !important;
}
.xhs-card.pixel-page.card-theme-clinical .preview-content strong { color: #b82f4b !important; }
.xhs-card.pixel-page.card-theme-clinical .pixel-page-footer { color: #4e7d92 !important; }

body .xhs-card.pixel-page.card-theme-journal {
    border: 1px solid #d6d0c6 !important;
    background: #f7f4ee !important;
    color: #20201e !important;
    box-shadow: 0 20px 50px rgba(43, 39, 33, .20) !important;
}

body .xhs-card.pixel-page.card-theme-journal:not(.page-type-cover) .card-theme-topline {
    top: 14px;
    right: 18px;
    left: 18px;
    padding: 0 0 8px;
    border-bottom: 3px double #272724;
    color: #272724;
    font: 700 7px/1.2 Georgia, serif;
    letter-spacing: .13em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body .xhs-card.pixel-page.card-theme-journal:not(.page-type-cover) .preview-content {
    top: 54px !important;
    height: calc(var(--pixel-content-h, 356px) - 36px) !important;
    color: #20201e !important;
    font-family: Georgia, "Noto Serif SC", "Source Han Serif SC", serif !important;
}

.xhs-card.pixel-page.card-theme-journal .preview-content h1,
.xhs-card.pixel-page.card-theme-journal .preview-content h2,
.xhs-card.pixel-page.card-theme-journal .cover-title {
    color: #20201e !important;
    border: 0 !important;
    border-bottom: 1px solid #918b80 !important;
    background: transparent !important;
    font-family: Georgia, "Noto Serif SC", "Source Han Serif SC", serif !important;
    text-align: left !important;
}

.xhs-card.pixel-page.card-theme-journal .preview-content h2::after {
    width: 32px !important;
    height: 4px !important;
    background: #bd302d !important;
}

.xhs-card.pixel-page.card-theme-journal .preview-content p { line-height: 1.72 !important; }
.xhs-card.pixel-page.card-theme-journal .preview-content strong { color: #a52624 !important; }
.xhs-card.pixel-page.card-theme-journal .pixel-page-footer { color: #6c665c !important; }

body .xhs-card.pixel-page.card-theme-research {
    border: 0 !important;
    background:
        radial-gradient(circle at 88% 12%, rgba(185, 223, 178, .54), transparent 25%),
        radial-gradient(circle at 12% 88%, rgba(58, 101, 76, .20), transparent 34%),
        linear-gradient(145deg, #e8efe5, #cdddcf) !important;
    color: #183226 !important;
    box-shadow: 0 22px 56px rgba(33, 65, 45, .28) !important;
}

body .xhs-card.pixel-page.card-theme-research:not(.page-type-cover) .card-theme-topline {
    top: 17px;
    left: 20px;
    padding: 4px 7px;
    border-radius: 999px;
    background: rgba(20, 51, 35, .88);
    color: #f4f8f1;
    font: 800 7px/1 "SFMono-Regular", Consolas, monospace;
    letter-spacing: .13em;
}

body .xhs-card.pixel-page.card-theme-research:not(.page-type-cover) .preview-content {
    top: 58px !important;
    height: calc(var(--pixel-content-h, 356px) - 40px) !important;
    color: #183226 !important;
    font-family: "Source Han Sans SC", "Noto Sans CJK SC", sans-serif !important;
}

.xhs-card.pixel-page.card-theme-research .preview-content h1,
.xhs-card.pixel-page.card-theme-research .preview-content h2,
.xhs-card.pixel-page.card-theme-research .cover-title {
    color: #10291c !important;
    border: 0 !important;
    background: transparent !important;
    font-family: Georgia, "Noto Serif SC", serif !important;
    font-size: 22px !important;
    line-height: 1.28 !important;
    text-align: left !important;
}

.xhs-card.pixel-page.card-theme-research .preview-content h2::after {
    width: 48px !important;
    height: 3px !important;
    background: #e06b43 !important;
}
.xhs-card.pixel-page.card-theme-research .preview-content blockquote {
    border: 0 !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, .44) !important;
}
.xhs-card.pixel-page.card-theme-research .preview-content strong { color: #b74626 !important; }
.xhs-card.pixel-page.card-theme-research .pixel-page-footer { color: #446451 !important; }
.xhs-card.pixel-page.card-theme-research .card-theme-bottomline {
    font: 700 6.5px/1 "SFMono-Regular", Consolas, monospace;
    letter-spacing: .08em;
}

body .xhs-card.pixel-page.card-theme-visual {
    border: 1px solid #cfd5da !important;
    background: #eef0f1 !important;
    color: #222b31 !important;
    box-shadow: 0 20px 52px rgba(42, 52, 59, .24) !important;
}

body .xhs-card.pixel-page.card-theme-visual:not(.page-type-cover) .card-theme-topline {
    top: 0;
    right: 0;
    left: 0;
    height: 38px;
    padding: 14px 18px 0;
    background: #343b40;
    color: #ffffff;
    font: 800 8px/1 "SFMono-Regular", Consolas, monospace;
    letter-spacing: .15em;
}

body .xhs-card.pixel-page.card-theme-visual:not(.page-type-cover) .preview-content {
    top: 52px !important;
    height: calc(var(--pixel-content-h, 356px) - 36px) !important;
    color: #222b31 !important;
    font-family: "Source Han Sans SC", "Noto Sans CJK SC", sans-serif !important;
}

.xhs-card.pixel-page.card-theme-visual .preview-content h1,
.xhs-card.pixel-page.card-theme-visual .preview-content h2,
.xhs-card.pixel-page.card-theme-visual .cover-title {
    color: #252d32 !important;
    border: 0 !important;
    background: #ffffff !important;
    border-radius: 7px !important;
    padding: 9px 10px !important;
    box-shadow: 0 2px 0 rgba(31, 41, 47, .08) !important;
    text-align: left !important;
}

.xhs-card.pixel-page.card-theme-visual .preview-content h2::after { display: none !important; }
.xhs-card.pixel-page.card-theme-visual .preview-content blockquote,
.xhs-card.pixel-page.card-theme-visual .preview-content pre,
.xhs-card.pixel-page.card-theme-visual .preview-content table {
    padding: 9px 10px !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: rgba(255, 255, 255, .78) !important;
}
.xhs-card.pixel-page.card-theme-visual .preview-content p {
    padding: 0 2px !important;
}
.xhs-card.pixel-page.card-theme-visual .preview-content strong { color: #cf3155 !important; }
.xhs-card.pixel-page.card-theme-visual .pixel-page-footer { color: #68757d !important; }

body .xhs-card.pixel-page.card-theme-lecture {
    border: 1px solid #23364a !important;
    background:
        linear-gradient(rgba(125, 211, 252, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(125, 211, 252, .045) 1px, transparent 1px),
        radial-gradient(circle at 84% 12%, rgba(56, 189, 248, .16), transparent 26%),
        linear-gradient(145deg, #07111f, #10283f) !important;
    background-size: 22px 22px, 22px 22px, auto, auto !important;
    color: #e6f3ff !important;
    box-shadow: 0 20px 52px rgba(2, 12, 27, .38) !important;
}

body .xhs-card.pixel-page.card-theme-lecture:not(.page-type-cover) .card-theme-topline {
    top: 16px;
    left: 18px;
    color: #7dd3fc;
    font: 800 7.5px/1 "SFMono-Regular", Consolas, monospace;
    letter-spacing: .14em;
}

body .xhs-card.pixel-page.card-theme-lecture .preview-content,
.xhs-card.pixel-page.card-theme-lecture .preview-content p,
.xhs-card.pixel-page.card-theme-lecture .preview-content li,
.xhs-card.pixel-page.card-theme-lecture .preview-content blockquote {
    color: #dbeafe !important;
    font-family: "Source Han Sans SC", "Microsoft YaHei", sans-serif !important;
}

body .xhs-card.pixel-page.card-theme-lecture:not(.page-type-cover) .preview-content {
    top: 50px !important;
    height: calc(var(--pixel-content-h, 356px) - 32px) !important;
}

.xhs-card.pixel-page.card-theme-lecture .preview-content h1,
.xhs-card.pixel-page.card-theme-lecture .preview-content h2,
.xhs-card.pixel-page.card-theme-lecture .preview-content h3,
.xhs-card.pixel-page.card-theme-lecture .cover-title {
    color: #7dd3fc !important;
    border-color: #38bdf8 !important;
    background: transparent !important;
    text-align: left !important;
}

.xhs-card.pixel-page.card-theme-lecture .preview-content h2::after { background: #22d3ee !important; }
.xhs-card.pixel-page.card-theme-lecture .preview-content strong { color: #fbbf24 !important; }
.xhs-card.pixel-page.card-theme-lecture .preview-content blockquote,
.xhs-card.pixel-page.card-theme-lecture .preview-content pre { background: rgba(255, 255, 255, .07) !important; }
.xhs-card.pixel-page.card-theme-lecture .pixel-page-footer { color: #8fc4dd !important; }
.xhs-card.pixel-page.card-theme-lecture .card-theme-bottomline {
    font: 700 6.5px/1 "SFMono-Regular", Consolas, monospace;
    letter-spacing: .08em;
}

/* 卡片主题细节统一补强：让每个主题有独立质感，同时保持导出稳定 */
.xhs-card.pixel-page.card-theme-memo .preview-content p,
.xhs-card.pixel-page.card-theme-memo .preview-content li,
.xhs-card.pixel-page.card-theme-clinical .preview-content p,
.xhs-card.pixel-page.card-theme-clinical .preview-content li,
.xhs-card.pixel-page.card-theme-journal .preview-content p,
.xhs-card.pixel-page.card-theme-journal .preview-content li,
.xhs-card.pixel-page.card-theme-research .preview-content p,
.xhs-card.pixel-page.card-theme-research .preview-content li,
.xhs-card.pixel-page.card-theme-visual .preview-content p,
.xhs-card.pixel-page.card-theme-visual .preview-content li,
.xhs-card.pixel-page.card-theme-lecture .preview-content p,
.xhs-card.pixel-page.card-theme-lecture .preview-content li {
    font-size: 12.6px !important;
}

.xhs-card.pixel-page.card-theme-memo .preview-content h1,
.xhs-card.pixel-page.card-theme-memo .preview-content h2,
.xhs-card.pixel-page.card-theme-clinical .preview-content h1,
.xhs-card.pixel-page.card-theme-clinical .preview-content h2,
.xhs-card.pixel-page.card-theme-journal .preview-content h1,
.xhs-card.pixel-page.card-theme-journal .preview-content h2,
.xhs-card.pixel-page.card-theme-research .preview-content h1,
.xhs-card.pixel-page.card-theme-research .preview-content h2,
.xhs-card.pixel-page.card-theme-visual .preview-content h1,
.xhs-card.pixel-page.card-theme-visual .preview-content h2,
.xhs-card.pixel-page.card-theme-lecture .preview-content h1,
.xhs-card.pixel-page.card-theme-lecture .preview-content h2 {
    margin-top: 0 !important;
    margin-bottom: 9px !important;
}

body .xhs-card.pixel-page.card-theme-memo {
    border-radius: 14px !important;
}

.xhs-card.pixel-page.card-theme-memo .preview-content blockquote {
    border-left: 0 !important;
    border-radius: 10px !important;
    background: rgba(255, 251, 240, .62) !important;
    box-shadow: inset 3px 0 0 rgba(141, 119, 90, .58);
}

.xhs-card.pixel-page.card-theme-memo .preview-content code {
    background: rgba(117, 91, 55, .10) !important;
    color: #6b4b26 !important;
}

body .xhs-card.pixel-page.card-theme-clinical {
    border-radius: 16px !important;
}

body .xhs-card.pixel-page.card-theme-clinical::before {
    content: "";
    position: absolute;
    inset: 43px 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(11, 89, 103, .24), transparent);
    pointer-events: none;
}

.xhs-card.pixel-page.card-theme-clinical .preview-content ul,
.xhs-card.pixel-page.card-theme-clinical .preview-content ol {
    padding-left: 18px !important;
}

.xhs-card.pixel-page.card-theme-clinical .preview-content li::marker {
    color: #0b5967;
    font-weight: 800;
}

body .xhs-card.pixel-page.card-theme-journal {
    border-radius: 10px !important;
}

body .xhs-card.pixel-page.card-theme-journal::after {
    content: "";
    position: absolute;
    inset: 10px auto 10px 10px;
    width: 1px;
    background: rgba(39, 39, 36, .14);
    pointer-events: none;
}

.xhs-card.pixel-page.card-theme-journal .preview-content blockquote {
    margin: 10px 0 !important;
    border-left: 2px solid #bd302d !important;
    background: rgba(255, 255, 255, .32) !important;
}

body .xhs-card.pixel-page.card-theme-research {
    border-radius: 18px !important;
}

body .xhs-card.pixel-page.card-theme-research::after {
    content: "";
    position: absolute;
    right: 16px;
    bottom: 18px;
    width: 72px;
    height: 72px;
    border: 1px solid rgba(24, 50, 38, .16);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.24), transparent 62%);
    pointer-events: none;
}

.xhs-card.pixel-page.card-theme-research .preview-content strong {
    padding: 0 .1em;
    border-radius: 4px;
    background: rgba(224, 107, 67, .10) !important;
}

body .xhs-card.pixel-page.card-theme-visual {
    border-radius: 16px !important;
}

.xhs-card.pixel-page.card-theme-visual .preview-content strong {
    padding: 0 .18em;
    border-radius: 5px;
    background: rgba(207, 49, 85, .10) !important;
}

.xhs-card.pixel-page.card-theme-visual .preview-content ul,
.xhs-card.pixel-page.card-theme-visual .preview-content ol {
    padding-left: 18px !important;
}

body .xhs-card.pixel-page.card-theme-lecture {
    border-radius: 18px !important;
}

body .xhs-card.pixel-page.card-theme-lecture::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(125, 211, 252, .12), transparent 34%),
        radial-gradient(circle at 88% 82%, rgba(251, 191, 36, .12), transparent 28%);
    pointer-events: none;
}

.xhs-card.pixel-page.card-theme-lecture .preview-content code {
    border: 1px solid rgba(125, 211, 252, .18) !important;
    background: rgba(2, 12, 27, .40) !important;
    color: #a5f3fc !important;
}

.xhs-card.pixel-page.card-theme-lecture .preview-content strong {
    text-shadow: 0 0 14px rgba(251, 191, 36, .24);
}

body .xhs-card.pixel-page.card-theme-case {
    border: 1px solid #b7d8cf !important;
    border-radius: 18px !important;
    background:
        linear-gradient(180deg, #e8f6f1 0 44px, #fbfefd 44px 100%) !important;
    color: #173b34 !important;
    box-shadow: 0 20px 52px rgba(15, 118, 110, .18) !important;
}

body .xhs-card.pixel-page.card-theme-case:not(.page-type-cover) .card-theme-topline {
    top: 15px;
    left: 18px;
    color: #0f766e;
    font: 850 8px/1 "SFMono-Regular", Consolas, monospace;
    letter-spacing: .16em;
}

body .xhs-card.pixel-page.card-theme-case .card-theme-bottomline {
    color: #4f7f76;
    font: 700 6.5px/1 "SFMono-Regular", Consolas, monospace;
    letter-spacing: .08em;
}

body .xhs-card.pixel-page.card-theme-case:not(.page-type-cover) .preview-content {
    top: 56px !important;
    height: calc(var(--pixel-content-h, 356px) - 42px) !important;
    color: #173b34 !important;
    font-family: "Source Han Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif !important;
}

.xhs-card.pixel-page.card-theme-case .preview-content h1,
.xhs-card.pixel-page.card-theme-case .preview-content h2,
.xhs-card.pixel-page.card-theme-case .cover-title {
    color: #0b5f55 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(15, 118, 110, .34) !important;
    background: transparent !important;
    text-align: left !important;
}

.xhs-card.pixel-page.card-theme-case .preview-content h2::after {
    width: 40px !important;
    height: 3px !important;
    background: #f97316 !important;
}

.xhs-card.pixel-page.card-theme-case .preview-content blockquote {
    border-left: 3px solid #0f766e !important;
    border-radius: 9px !important;
    background: #ecfdf5 !important;
    color: #24564d !important;
}

.xhs-card.pixel-page.card-theme-case .preview-content li::marker,
.xhs-card.pixel-page.card-theme-case .preview-content strong {
    color: #0f766e !important;
}

body .xhs-card.pixel-page.card-theme-atlas {
    border: 1px solid #d6c8fb !important;
    border-radius: 18px !important;
    background:
        linear-gradient(90deg, rgba(124, 58, 237, .08) 0 1px, transparent 1px 16px),
        linear-gradient(180deg, rgba(124, 58, 237, .06) 0 1px, transparent 1px 16px),
        linear-gradient(145deg, #fbfaff, #f1edff) !important;
    color: #2b2144 !important;
    box-shadow: 0 22px 54px rgba(76, 29, 149, .20) !important;
}

body .xhs-card.pixel-page.card-theme-atlas:not(.page-type-cover) .card-theme-topline {
    top: 0;
    right: 0;
    left: 0;
    height: 40px;
    padding: 14px 18px 0;
    background: #2e2551;
    color: #ffffff;
    font: 850 8px/1 "SFMono-Regular", Consolas, monospace;
    letter-spacing: .15em;
}

body .xhs-card.pixel-page.card-theme-atlas:not(.page-type-cover) .preview-content {
    top: 54px !important;
    height: calc(var(--pixel-content-h, 356px) - 38px) !important;
    color: #2b2144 !important;
    font-family: "Source Han Sans SC", "Noto Sans CJK SC", sans-serif !important;
}

.xhs-card.pixel-page.card-theme-atlas .preview-content h1,
.xhs-card.pixel-page.card-theme-atlas .preview-content h2,
.xhs-card.pixel-page.card-theme-atlas .cover-title {
    color: #2e2551 !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: rgba(255, 255, 255, .82) !important;
    padding: 9px 10px !important;
    box-shadow: 0 2px 0 rgba(76, 29, 149, .10) !important;
    text-align: left !important;
}

.xhs-card.pixel-page.card-theme-atlas .preview-content h2::after { display: none !important; }

.xhs-card.pixel-page.card-theme-atlas .preview-content .img-figure,
.xhs-card.pixel-page.card-theme-atlas .preview-content blockquote,
.xhs-card.pixel-page.card-theme-atlas .preview-content table {
    border: 1px solid rgba(124, 58, 237, .16) !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, .78) !important;
    box-shadow: 0 8px 22px rgba(76, 29, 149, .08) !important;
}

.xhs-card.pixel-page.card-theme-atlas .preview-content li::marker,
.xhs-card.pixel-page.card-theme-atlas .preview-content strong {
    color: #7c3aed !important;
}

.xhs-card.pixel-page.card-theme-atlas .card-theme-bottomline,
.xhs-card.pixel-page.card-theme-atlas .pixel-page-footer {
    color: #6d5d93 !important;
}

body .xhs-card.pixel-page.card-theme-protocol {
    border: 1px solid #b8d7e8 !important;
    border-radius: 14px !important;
    background:
        linear-gradient(90deg, #e0f2fe 0 42px, #f8fbfd 42px 100%) !important;
    color: #173047 !important;
    box-shadow: 0 20px 50px rgba(3, 105, 161, .18) !important;
}

body .xhs-card.pixel-page.card-theme-protocol::before {
    content: "";
    position: absolute;
    top: 46px;
    bottom: 44px;
    left: 40px;
    width: 1px;
    background: rgba(3, 105, 161, .28);
    pointer-events: none;
}

body .xhs-card.pixel-page.card-theme-protocol:not(.page-type-cover) .card-theme-topline {
    top: 15px;
    left: 18px;
    color: #0369a1;
    font: 850 8px/1 "SFMono-Regular", Consolas, monospace;
    letter-spacing: .16em;
}

body .xhs-card.pixel-page.card-theme-protocol:not(.page-type-cover) .preview-content {
    top: 54px !important;
    height: calc(var(--pixel-content-h, 356px) - 40px) !important;
    color: #173047 !important;
    font-family: "Source Han Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif !important;
}

.xhs-card.pixel-page.card-theme-protocol .preview-content h1,
.xhs-card.pixel-page.card-theme-protocol .preview-content h2,
.xhs-card.pixel-page.card-theme-protocol .cover-title {
    color: #075985 !important;
    border: 0 !important;
    border-left: 4px solid #0284c7 !important;
    background: rgba(224, 242, 254, .70) !important;
    border-radius: 8px !important;
    padding: 8px 10px !important;
    text-align: left !important;
}

.xhs-card.pixel-page.card-theme-protocol .preview-content h2::after { display: none !important; }

.xhs-card.pixel-page.card-theme-protocol .preview-content ol {
    padding-left: 22px !important;
}

.xhs-card.pixel-page.card-theme-protocol .preview-content li::marker {
    color: #0369a1 !important;
    font-weight: 900 !important;
}

.xhs-card.pixel-page.card-theme-protocol .preview-content blockquote,
.xhs-card.pixel-page.card-theme-protocol .preview-content pre {
    border: 1px solid rgba(3, 105, 161, .16) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, .72) !important;
}

.xhs-card.pixel-page.card-theme-protocol .preview-content strong {
    color: #0369a1 !important;
}

.xhs-card.pixel-page.card-theme-protocol .card-theme-bottomline,
.xhs-card.pixel-page.card-theme-protocol .pixel-page-footer {
    color: #4b7895 !important;
}

.xhs-card.pixel-page.card-theme-social .page-number,
.xhs-card.pixel-page.card-theme-memo .page-number,
.xhs-card.pixel-page.card-theme-clinical .page-number,
.xhs-card.pixel-page.card-theme-journal .page-number,
.xhs-card.pixel-page.card-theme-research .page-number,
.xhs-card.pixel-page.card-theme-visual .page-number,
.xhs-card.pixel-page.card-theme-lecture .page-number,
.xhs-card.pixel-page.card-theme-case .page-number,
.xhs-card.pixel-page.card-theme-atlas .page-number,
.xhs-card.pixel-page.card-theme-protocol .page-number { color: inherit !important; }

.preview-mode-switcher {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
    padding: 3px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 10%, var(--bg-dark));
}

.preview-mode-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.preview-mode-button svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.preview-mode-button:hover,
.preview-mode-button:focus-visible {
    color: var(--primary);
    background: color-mix(in srgb, var(--bg-light) 68%, transparent);
    outline: none;
}

.preview-mode-button.active {
    color: var(--primary);
    background: var(--bg-light);
    box-shadow: 0 1px 5px rgba(21, 25, 36, 0.14);
}

.preview-compact-dropdown > select,
.preview-hidden-control {
    display: none !important;
}

.preview-compact-toggle {
    min-height: 32px;
    padding: 5px 13px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-dark);
    color: var(--text-light);
    font-size: 0.82em;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
}

.preview-compact-toggle:hover,
.preview-compact-toggle:focus-visible {
    border-color: var(--primary);
    color: var(--primary);
    outline: none;
}

.preview-compact-menu {
    left: 0;
    right: auto;
    min-width: 186px;
    max-height: min(60vh, 360px);
    overflow-y: auto;
}

.preview-more-menu {
    left: auto;
    right: 0;
    min-width: 150px;
}

.preview-tool-btn {
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-dark);
    color: var(--text-light);
    font-size: 0.82em;
    cursor: pointer;
}

.preview-tool-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.preview-tool-btn-watermark.watermark-active {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(254, 44, 85, 0.08);
}

.preview-share-toggle {
    border-color: color-mix(in srgb, var(--primary) 42%, var(--border-color));
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, var(--bg-dark));
}

.preview-share-toggle:hover,
.preview-share-toggle:focus-visible {
    background: color-mix(in srgb, var(--primary) 13%, var(--bg-dark));
}

/* 水印面板内的关闭按钮 */
.watermark-panel-close {
    position: absolute;
    top: 6px;
    right: 8px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.9em;
    cursor: pointer;
    padding: 2px 5px;
    border-radius: 4px;
    line-height: 1;
}

.watermark-panel-close:hover {
    background: var(--bg-dark);
    color: var(--text-light);
}

.watermark-controls input[type="text"] {
    width: 86px;
    padding: 6px 9px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-dark);
    color: var(--text-light);
    font-size: 0.85em;
    outline: none;
}

.watermark-controls input[type="text"]:focus {
    border-color: var(--primary);
}

.watermark-controls #watermarkPresetSelect {
    width: 128px;
    max-width: 128px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.watermark-preset-btn {
    min-height: 30px;
    padding: 5px 8px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-dark);
    color: var(--text-light);
    font-size: 0.8em;
    cursor: pointer;
}

.watermark-preset-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.watermark-preset-list {
    display: none !important;
}

.watermark-preset-chip {
    min-height: 26px;
    max-width: 136px;
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-dark);
    color: var(--text-light);
    cursor: pointer;
    font: inherit;
    font-size: 0.78em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.watermark-preset-chip:hover,
.watermark-preset-chip.active {
    border-color: var(--primary);
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, var(--bg-dark));
}

.watermark-avatar-btn {
    width: 34px;
    height: 34px;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: var(--bg-dark);
    color: var(--text-muted);
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    font-size: 10px !important;
    line-height: 1;
}

.watermark-avatar-btn:hover {
    border-color: var(--primary);
    color: var(--text-light);
}

.watermark-avatar-btn input {
    display: none;
}

#watermarkAvatarPreview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-align: center;
}

#watermarkAvatarPreview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.watermark-clear-btn {
    width: 24px;
    height: 24px;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: var(--bg-dark);
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;
}

.watermark-clear-btn:hover {
    border-color: var(--primary);
    color: var(--text-light);
}

.watermark-tuning {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.watermark-tuning label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-muted);
    font-size: 0.76em !important;
    white-space: nowrap;
}

.watermark-tuning input[type="range"] {
    width: 54px;
    accent-color: var(--primary);
}

select {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-dark);
    color: var(--text-light);
    font-size: 0.85em;
    cursor: pointer;
}

/* ==================== 按钮 ==================== */
.btn {
    padding: 6px 12px;
    border-radius: 6px;
    border: none;
    font-size: 0.85em;
    cursor: pointer;
}

.btn-primary {
    background: var(--primary);
    color: white;
}

.btn-primary:hover {
    background: var(--secondary);
}

.btn-theme {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 0.85em;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn-theme:hover {
    border-color: var(--primary);
    color: var(--text-light);
}

.top-doc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 10px;
    border-radius: 7px;
    border: 1px solid var(--border-color);
    background: var(--bg-dark);
    color: var(--text-muted);
    font-size: 0.86em;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.top-doc-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, var(--bg-dark));
}

.export-group {
    display: flex;
    gap: 6px;
}

/* ==================== 主内容区 ==================== */
.main-content {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

body.share-preview-mode .main-content {
    padding-top: 0;
}

body.share-preview-mode .editor-panel,
body.share-preview-mode .panel-resizer,
body.share-preview-mode .file-tree-sidebar,
body.share-preview-mode .file-tree-rail,
body.share-preview-mode .app-sidebar,
body.share-preview-mode .preview-settings-panel,
body.share-preview-mode .preview-settings-sidebar {
    display: none !important;
}

body.share-preview-mode .preview-panel {
    flex: 1 1 100%;
    width: 100%;
}

body.share-preview-mode .preview-panel > .panel-header,
body.share-preview-mode .preview-extra-controls,
body.share-preview-mode .card-preview-toolbar {
    display: none !important;
}

body.share-preview-mode .preview-wrapper {
    padding: 0 230px 42px 0;
    background: #ffffff;
}

body.share-preview-mode .preview-desktop.active {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    min-height: 100%;
}

body.share-preview-desktop .desktop-frame {
    width: min(800px, 100%);
    margin: 0 auto 0 calc(max(12px, (100vw - 980px) / 2));
    padding-top: 18px;
    border-radius: 0;
    box-shadow: none;
}

body.share-preview-mobile .main-content {
    padding-top: 0;
}

body.share-preview-mobile .preview-wrapper {
    padding: 0;
    background: #ffffff;
}

body.share-preview-mobile .desktop-frame {
    width: 100%;
    max-width: none;
    min-height: 100dvh;
    margin: 0;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    background: #ffffff;
}

body.share-preview-mobile .desktop-frame .preview-content.wechat-article {
    width: 100%;
    max-width: 100%;
    min-height: 100dvh;
    margin: 0 auto;
    padding: 0 14px 26px;
    box-sizing: border-box;
}

.share-preview-article-head {
    padding: 0 14px 14px;
    background: #ffffff;
}

.share-preview-article-head h1 {
    margin: 0 0 10px;
    color: #111827;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0;
}

.share-preview-article-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    color: #9ca3af;
    font-size: 15px;
    line-height: 1.3;
}

.share-preview-author,
.share-preview-article-meta button {
    color: #315c9c;
}

.share-preview-article-meta button {
    border: 0;
    padding: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.share-preview-side-qr {
    position: fixed;
    top: 24px;
    right: 0;
    z-index: 11900;
    display: flex;
    align-items: flex-start;
    gap: 0;
    width: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: center;
}

.share-preview-side-qr .share-preview-side-toggle {
    min-width: 36px;
    min-height: 86px;
    padding: 10px 7px;
    border: 1px solid #f05a40;
    border-right: 0;
    border-radius: 12px 0 0 12px;
    background: #ffffff;
    color: #d9462f;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.08em;
    writing-mode: vertical-rl;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.12);
}

.share-preview-side-qr .share-preview-side-panel {
    display: none;
    width: 190px;
    min-height: 0;
    padding: 14px;
    border: 1px solid #f05a40;
    border-radius: 14px 0 0 14px;
    background: #ffffff;
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.08);
}

.share-preview-side-qr.is-open .share-preview-side-panel {
    display: block;
}

.share-preview-side-qr img {
    width: 126px;
    height: 126px;
    display: block;
    margin: 0 auto 14px;
    image-rendering: pixelated;
}

.share-preview-side-qr span {
    display: block;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.45;
}

.share-preview-tool-group {
    padding: 10px 0 12px;
    border-bottom: 1px solid #f2d6cd;
}

.share-preview-tool-action {
    width: 100%;
    min-height: 34px;
    margin-top: 8px;
    border: 1px solid #e8d6ce;
    border-radius: 8px;
    background: #fffaf7;
    color: #d9462f;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.share-preview-tool-action:hover {
    background: #fff1ea;
}

.share-preview-modal {
    position: static;
    width: auto;
    max-width: calc(100vw - 24px);
    display: flex;
    align-items: flex-start;
    color: #1f2937;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    text-align: center;
}

#sharePreviewModal.share-editor-toolbar-host {
    position: fixed;
    inset: auto 0 auto auto;
    top: 96px;
    right: 10px;
    z-index: 9100;
    width: auto;
    height: auto;
    min-height: 0;
    padding: 0;
    display: none;
    align-items: flex-start;
    justify-content: flex-end;
    background: transparent;
    backdrop-filter: none;
    pointer-events: none;
}

#sharePreviewModal.share-editor-toolbar-host .share-preview-modal {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    pointer-events: auto;
}

#sharePreviewModal.share-editor-toolbar-host .share-preview-side-panel {
    display: none;
    position: static;
    width: 190px;
    min-height: 0;
    padding: 0 14px 14px;
    border: 1px solid #f05a40;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 18px 56px rgba(15, 23, 42, 0.18);
    overflow: hidden;
}

#sharePreviewModal.share-editor-toolbar-host.is-open .share-preview-side-panel {
    display: block;
}

.share-preview-modal-title {
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #f2d6cd;
    font-size: 14px;
    font-weight: 700;
    color: #374151;
}

.share-preview-qr-wrap {
    padding: 18px 0 10px;
}

.share-preview-qr-wrap img {
    width: 126px;
    height: 126px;
    display: block;
    margin: 0 auto;
    image-rendering: pixelated;
}

.share-preview-link-row {
    width: 148px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 38px;
    border: 1px solid #d6d9de;
    border-radius: 2px;
    overflow: hidden;
    background: #fff;
}

.share-preview-link-row input {
    width: 100%;
    height: 36px;
    border: 0;
    padding: 0 8px;
    color: #b4bac4;
    font-size: 12px;
    outline: none;
}

.share-preview-link-row button {
    border: 0;
    border-left: 1px solid #d6d9de;
    background: #fff;
    color: #4b5563;
    font-size: 20px;
    cursor: pointer;
}

.share-preview-valid {
    padding: 10px 0 6px;
    font-size: 12px;
    color: #374151;
}

.share-preview-actions {
    display: grid;
    justify-content: center;
    gap: 6px;
    padding: 6px 0 12px;
}

.share-preview-actions button {
    border: 0;
    background: transparent;
    font-size: 13px;
    cursor: pointer;
}

.share-preview-update {
    color: #1677ff;
}

.share-preview-close-share {
    color: #ff4d4f;
}

@media (max-width: 860px) {
    body.share-preview-mode .preview-wrapper {
        padding: 0;
    }

    body.share-preview-desktop .desktop-frame {
        margin: 0;
        width: 100%;
    }

    .share-preview-side-qr {
        top: auto;
        right: 10px;
        bottom: 12px;
    }

    .share-preview-side-qr .share-preview-side-toggle {
        min-height: 38px;
        min-width: 58px;
        padding: 8px 10px;
        border: 1px solid #f05a40;
        border-radius: 999px;
        writing-mode: horizontal-tb;
        letter-spacing: 0;
    }

    .share-preview-side-qr .share-preview-side-panel {
        position: absolute;
        right: 0;
        bottom: calc(100% + 8px);
        width: 172px;
        min-height: 0;
        padding: 14px 12px;
        border-radius: 12px;
    }

    .share-preview-side-qr img {
        width: 112px;
        height: 112px;
    }

    .share-preview-modal {
        width: auto;
    }

    #sharePreviewModal.share-editor-toolbar-host {
        top: auto;
        right: 10px;
        bottom: 68px;
    }

    #sharePreviewModal.share-editor-toolbar-host .share-preview-side-panel {
        position: static;
        width: 172px;
        border-radius: 12px;
    }
}

.app-sidebar {
    width: 42px;
    flex: 0 0 42px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 5px;
    background: var(--bg-light);
    border-right: 1px solid var(--border-color);
    min-height: 0;
    z-index: 2;
    transition: width 0.18s, flex-basis 0.18s, padding 0.18s;
}

body.file-tree-collapsed .app-sidebar {
    width: 42px;
    flex-basis: 42px;
    padding-left: 5px;
    padding-right: 5px;
}

.app-rail-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.app-sidebar-toggle {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-dark);
    color: var(--text-muted);
    cursor: pointer;
}

body.file-tree-collapsed .app-sidebar-toggle::after {
    left: auto;
    right: 8px;
}

.app-rail-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.app-rail-icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    font: inherit;
}

.app-rail-icon:hover {
    border-color: color-mix(in srgb, var(--primary) 30%, var(--border-color));
    background: color-mix(in srgb, var(--primary) 8%, transparent);
    color: var(--text-light);
}

.app-rail-icon span {
    width: 20px;
    flex: 0 0 20px;
    text-align: center;
    font-family: "Noto Color Emoji", "Android Emoji", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
    line-height: 1;
}

.app-nav-bottom {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.app-nav-bottom {
    margin-top: auto;
}

.app-nav-bottom .top-user-center {
    width: 32px;
    height: 32px;
    font-size: 0.8em;
    box-shadow: 0 6px 16px rgba(254, 44, 85, 0.2);
}

.app-nav-item {
    width: 100%;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    text-decoration: none;
    cursor: pointer;
    font: inherit;
    font-size: 0.82em;
    white-space: nowrap;
}

.app-nav-item:hover {
    border-color: color-mix(in srgb, var(--primary) 30%, var(--border-color));
    background: color-mix(in srgb, var(--primary) 8%, transparent);
    color: var(--text-light);
}

.app-nav-item span {
    width: 20px;
    flex: 0 0 20px;
    text-align: center;
    font-family: "Noto Color Emoji", "Android Emoji", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
    line-height: 1;
}

.app-nav-item em {
    display: none;
    font-style: normal;
}

body.file-tree-collapsed .app-nav-item {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
    gap: 0;
}

body.file-tree-collapsed .app-nav-item em {
    display: none;
}

body.file-tree-collapsed .app-rail-top {
    flex-direction: column;
}


.file-tree-sidebar {
    width: 252px;
    flex: 0 0 252px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 9px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--bg-light) 94%, var(--primary) 3%), var(--bg-light) 72%),
        var(--bg-light);
    border-right: 1px solid var(--border-color);
    min-height: 0;
    overflow: hidden;
    transition: width 0.18s, flex-basis 0.18s, padding 0.18s;
}

.panel-resizer {
    flex: 0 0 7px;
    width: 7px;
    cursor: col-resize;
    background: var(--bg-dark);
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    position: relative;
    z-index: 50;
    touch-action: none;
}

/* mdnice 式单一 Navbar：编辑与预览共用同一条真实工具栏。 */
.workspace-shell {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.workspace-split {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    display: flex;
    overflow: hidden;
}

.workspace-docked-panel {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 clamp(320px, 29vw, 410px);
    width: clamp(320px, 29vw, 410px);
    min-width: 320px;
    height: 100%;
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
    overflow: hidden;
    border-left: 1px solid var(--border-color);
    background: var(--bg-light);
    backdrop-filter: none;
    z-index: 80;
}

.workspace-docked-panel > .modal-box {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    min-height: 0;
    padding: 18px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: auto;
}

.workspace-docked-panel .image-bed-header,
.workspace-docked-panel .typography-modal-header {
    position: sticky;
    top: -18px;
    z-index: 8;
    margin: -18px -18px 12px;
    padding: 15px 18px 12px;
    border-bottom: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--bg-light) 96%, transparent);
    backdrop-filter: blur(12px);
}

.workspace-docked-panel .image-bed-header > span,
.workspace-docked-panel .typography-modal-header p {
    display: none;
}

.workspace-docked-panel .ai-image-tabs {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.workspace-docked-panel .ai-image-tabs button {
    min-width: 0;
    padding-inline: 6px;
}

.workspace-docked-panel .ai-image-grid,
.workspace-docked-panel .typography-base-controls,
.workspace-docked-panel .typography-quick-presets,
.workspace-docked-panel .typography-preset-primary {
    grid-template-columns: 1fr;
}

.workspace-docked-panel .ai-reference-row {
    grid-template-columns: 1fr 1fr;
}

.workspace-docked-panel .ai-reference-list {
    grid-column: 1 / -1;
}

.workspace-docked-panel .typography-tabs {
    top: 42px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.workspace-docked-panel .typography-panel-intro {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
}

.workspace-docked-panel .typography-common-actions,
.workspace-docked-panel .typography-preset-secondary {
    align-items: stretch;
    flex-direction: column;
}

.workspace-docked-panel .typography-modal > .modal-actions {
    bottom: -18px;
    margin: 18px -18px -18px;
}

.workspace-panel-trigger-active,
.app-rail-icon.workspace-panel-trigger-active,
.preview-settings-group button.workspace-panel-trigger-active {
    color: var(--primary) !important;
    background: color-mix(in srgb, var(--primary) 14%, var(--bg-dark)) !important;
}

.workspace-view-menu {
    min-width: 176px;
}

.workspace-view-menu .workspace-view-check {
    width: 16px;
    color: var(--primary);
    font-style: normal;
    font-weight: 800;
    text-align: center;
}

body.workspace-editor-hidden .workspace-split > .editor-panel,
body.workspace-preview-hidden .workspace-split > .preview-panel {
    display: none !important;
}

body.workspace-editor-hidden .workspace-split > .panel-resizer,
body.workspace-preview-hidden .workspace-split > .panel-resizer {
    display: none !important;
}

body.workspace-editor-hidden:not(.workspace-preview-hidden) .workspace-split > .preview-panel,
body.workspace-preview-hidden:not(.workspace-editor-hidden) .workspace-split > .editor-panel {
    flex: 1 1 auto !important;
    width: auto !important;
}

@media (max-width: 1120px) {
    .workspace-docked-panel {
        flex-basis: 320px;
        width: 320px;
    }
}

.workspace-toolbar {
    position: relative;
    z-index: 4000;
    flex: 0 0 44px;
    min-width: 0;
    display: flex;
    align-items: center;
    padding: 0 8px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-light);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
    overflow: visible;
}

.workspace-toolbar-title,
.workspace-toolbar-menus,
.workspace-toolbar-actions,
.workspace-toolbar-meta {
    min-width: 0;
    display: flex;
    align-items: center;
}

.workspace-toolbar-title {
    flex: 0 1 220px;
    padding-right: 6px;
}

.workspace-toolbar-menus { flex: 0 0 auto; }
.workspace-toolbar-actions {
    flex: 1 1 auto;
    justify-content: flex-end;
    border-left: 1px solid var(--border-color);
    margin-left: 4px;
    padding-left: 4px;
}
.workspace-toolbar-meta { flex: 0 0 auto; margin-left: 6px; }

body.workspace-toolbar-ready .editor-panel > .panel-header,
body.workspace-toolbar-ready .preview-panel > .panel-header {
    display: none;
}

body.workspace-toolbar-ready .panel-resizer::before { display: none; }

.workspace-toolbar .editor-title-area {
    width: 100%;
    max-width: none;
}

.workspace-toolbar .editor-brand-title { font-size: 13px; }
.workspace-toolbar .editor-document-title { max-width: 150px; }
.workspace-toolbar .editor-tools,
.workspace-toolbar .preview-primary-controls,
.workspace-toolbar .editor-stats {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    width: auto;
    margin: 0;
    gap: 0;
}

.workspace-toolbar .editor-tools { overflow: visible; }
.workspace-toolbar .dropdown.dropdown-open {
    z-index: 4100;
}
.workspace-toolbar .dropdown-menu {
    z-index: 4200;
}
.workspace-toolbar #importDropdown { order: 0; }
.workspace-toolbar #fmtDropdown { order: 1; }
.workspace-toolbar #mdniceFunctionDropdown { order: 2; }
.workspace-toolbar #workspaceViewDropdown { order: 3; }
.workspace-toolbar #toolbarThemeDropdown { order: 4; }
.workspace-toolbar #styleSettingsDropdown { order: 5; }
.workspace-toolbar #mdniceTutorialDropdown { order: 6; }
.workspace-toolbar .ai-image-tab-btn { order: 7; }
.workspace-toolbar .preview-primary-controls { justify-self: auto; }
.workspace-toolbar .preview-primary-controls { padding: 0; }
.workspace-toolbar .editor-stats { font-size: 11px; gap: 6px; }
.workspace-toolbar .editor-stats .read-time { display: none; }

.workspace-toolbar .preview-mode-switcher {
    margin: 0 5px;
}

.workspace-toolbar .btn-fmt-toggle,
.workspace-toolbar .preview-compact-toggle {
    min-height: 43px;
    height: 43px;
    padding: 0 9px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-light);
    font-size: 13px;
    font-weight: 400;
}

.workspace-toolbar .btn-fmt-toggle:hover,
.workspace-toolbar .preview-compact-toggle:hover,
.workspace-toolbar .dropdown-open > .dropdown-toggle {
    color: var(--text-light);
    background: color-mix(in srgb, var(--primary) 11%, transparent);
}

.workspace-toolbar .toolbar-theme-current { display: none; }
.workspace-toolbar .zoom-control { display: none; }
.workspace-toolbar .preview-share-toggle { color: var(--primary); }
.workspace-toolbar .preview-publish-toggle { font-weight: 600; }

.preview-context-toolbar {
    position: relative;
    z-index: 30;
    display: block;
    width: 100%;
    flex: 0 0 auto;
    background: var(--bg-light);
}

.preview-context-toolbar > .preview-watermark-controls {
    position: static;
    top: auto;
    right: auto;
    z-index: 520;
    width: 100%;
    max-width: 100%;
    max-height: min(190px, 28dvh);
    margin: 0;
    overflow-y: auto;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.12);
}

.preview-context-toolbar .preview-extra-controls:has(#cardPreviewToolbar:empty) { display: none; }

@media (max-width: 1180px) {
    .workspace-toolbar-title { flex-basis: 160px; }
    .workspace-toolbar .editor-brand-title { display: none; }
    .workspace-toolbar .editor-stats .char-count,
    .workspace-toolbar .editor-stats .word-count { display: none; }
}

@media (max-width: 920px) {
    body.workspace-toolbar-ready .main-content { flex-direction: row; }
    body.workspace-toolbar-ready .file-tree-sidebar,
    body.workspace-toolbar-ready .file-tree-rail { display: none; }
    body.workspace-toolbar-ready .workspace-split .editor-panel,
    body.workspace-toolbar-ready .workspace-split .preview-panel {
        height: auto;
        border-bottom: 0;
    }
    .workspace-toolbar-title { flex-basis: 110px; }
    .workspace-toolbar .editor-document-title { max-width: 105px; }
    .workspace-toolbar-meta { display: none; }
    .workspace-toolbar .btn-fmt-toggle,
    .workspace-toolbar .preview-compact-toggle { padding: 0 6px; font-size: 12px; }
    .workspace-toolbar .preview-mode-button { width: 32px; }
    .workspace-toolbar .ai-image-tab-btn {
        display: inline-flex;
        align-items: center;
        white-space: nowrap;
    }
}

/* 顶部工具栏视觉上保持连续，分栏拖动线只从工具栏下方开始。 */
.panel-resizer::before {
    content: '';
    position: absolute;
    z-index: 2;
    top: -1px;
    left: -2px;
    right: -2px;
    height: calc(var(--unified-top-toolbar-height, 49px) + 1px);
    background: var(--bg-light);
    border-bottom: 1px solid var(--border-color);
    pointer-events: none;
}

.panel-resizer::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 42px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--text-muted) 38%, transparent);
    transform: translate(-50%, -50%);
    z-index: 3;
}

.panel-resizer:hover,
body.panel-resizing .panel-resizer {
    background: color-mix(in srgb, var(--primary) 10%, var(--bg-dark));
}

body.file-tree-collapsed .file-tree-sidebar {
    width: 0;
    flex-basis: 0;
    padding-left: 0;
    padding-right: 0;
    border-right: 0;
}

body.file-tree-collapsed .file-tree-sidebar > * {
    display: none;
}

.file-tree-rail {
    display: none;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    border: 0;
    border-right: 1px solid var(--border-color);
    background: var(--bg-light);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0;
}

body.file-tree-collapsed .file-tree-rail {
    display: none;
}

.file-tree-header {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 0;
}

.sidebar-toggle-icon {
    position: relative;
}

.sidebar-toggle-icon::before {
    content: '';
    width: 16px;
    height: 14px;
    border: 1.5px solid currentColor;
    border-radius: 4px;
    box-sizing: border-box;
    opacity: 0.82;
}

.sidebar-toggle-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 1.5px;
    height: 9px;
    border-radius: 2px;
    background: currentColor;
    opacity: 0.72;
    transform: translateY(-50%);
}

.file-tree-collapse.sidebar-toggle-icon::after {
    left: 8px;
}

.file-tree-rail.sidebar-toggle-icon::after {
    right: 10px;
}

.preview-settings-sidebar {
    width: 42px;
    flex: 0 0 42px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 5px;
    background: var(--bg-light);
    border-left: 1px solid var(--border-color);
    min-height: 0;
    z-index: 2;
}

.preview-settings-toggle {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-dark);
    color: var(--text-muted);
    cursor: pointer;
}

.preview-settings-toggle.sidebar-toggle-icon::after {
    left: 8px;
}

body.preview-settings-collapsed .preview-settings-toggle.sidebar-toggle-icon::after {
    left: auto;
    right: 8px;
}

.preview-settings-panel {
    width: 114px;
    flex: 0 0 114px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 9px 6px;
    background: var(--bg-light);
    border-left: 1px solid var(--border-color);
    min-height: 0;
    overflow: visible;
    transition: width 0.18s, flex-basis 0.18s, padding 0.18s;
}

body.preview-settings-collapsed .preview-settings-panel {
    width: 0;
    flex-basis: 0;
    padding-left: 0;
    padding-right: 0;
    border-left: 0;
}

body.preview-settings-collapsed .preview-settings-panel > * {
    display: none;
}

.preview-settings-title {
    min-height: 28px;
    display: flex;
    align-items: center;
    padding: 0 6px;
    border: 1px solid color-mix(in srgb, var(--primary) 38%, var(--border-color));
    border-radius: 8px;
    background: color-mix(in srgb, var(--primary) 8%, var(--bg-dark));
    color: var(--text-light);
    font-size: 0.76em;
    font-weight: 700;
}

.preview-settings-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.preview-settings-group span {
    padding: 0 4px;
    color: var(--text-muted);
    font-size: 0.72em;
    font-weight: 700;
}

.preview-settings-group button {
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    padding: 0 6px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-dark);
    color: var(--text-light);
    cursor: pointer;
    font: inherit;
    font-size: 0.74em;
    text-align: left;
}

.preview-settings-export {
    position: relative;
}

.preview-settings-export > button {
    width: 100%;
}

.preview-settings-export-menu {
    left: auto;
    right: 0;
    min-width: 150px;
}

.right-rail-export {
    position: relative;
    width: 100%;
}

.right-rail-export .app-nav-item span {
    color: var(--primary);
    font-size: 0.82em;
    font-weight: 800;
}

.right-rail-export-menu {
    top: auto;
    bottom: calc(100% + 8px);
    right: 0;
    min-width: 158px;
}

.theme-rail-toggle {
    width: 34px;
    height: 62px;
    min-height: 62px;
    margin: 3px auto 0;
    flex-direction: column;
    gap: 3px;
    padding: 3px;
    border-color: color-mix(in srgb, var(--primary) 52%, var(--border-color));
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-light) 76%, var(--primary) 10%);
    color: var(--text-light);
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--primary) 13%, transparent),
        0 8px 18px rgba(254, 44, 85, 0.12);
}

.theme-rail-toggle:hover {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--bg-light) 68%, var(--primary) 18%);
    color: var(--primary);
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent),
        0 10px 22px rgba(254, 44, 85, 0.18);
}

.theme-rail-toggle span {
    width: 100%;
    flex: 1 1 0;
    min-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    color: var(--text-muted);
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.theme-rail-toggle em {
    display: none;
}

.theme-rail-toggle.is-light .theme-option-light,
.theme-rail-toggle.is-dark .theme-option-dark {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 4px 10px rgba(254, 44, 85, 0.24);
}

.preview-settings-group button:hover {
    border-color: color-mix(in srgb, var(--primary) 42%, var(--border-color));
    background: color-mix(in srgb, var(--primary) 8%, var(--bg-dark));
    color: var(--primary);
}

.file-tree-top-folder {
    flex: 1;
    min-width: 0;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 0 9px;
    border: 1px solid color-mix(in srgb, var(--primary) 42%, var(--border-color));
    border-radius: 8px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, var(--bg-dark)), var(--bg-dark));
    color: var(--text-light);
    cursor: pointer;
    font-size: 0.8em;
    font-weight: 650;
    white-space: nowrap;
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent);
}

.file-tree-top-folder:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 13%, var(--bg-dark));
}

.file-tree-header-icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 20px;
}

.file-tree-header-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
}

.google-emoji {
    font-family: "Noto Color Emoji", "Android Emoji", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
    font-weight: 400;
    line-height: 1;
}

.file-tree-header strong {
    display: block;
    color: var(--text-light);
    max-width: 152px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9em;
    line-height: 1.2;
}

.file-tree-header em {
    display: block;
    max-width: 152px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
    font-size: 0.72em;
    font-style: normal;
    font-weight: 500;
}

.file-tree-quickbar {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
}

.file-tree-quickbar button {
    height: 30px;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--border-color) 76%, transparent);
    border-radius: 7px;
    background: color-mix(in srgb, var(--bg-dark) 88%, var(--bg-light));
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
}

.file-tree-quickbar button:hover,
.file-tree-quickbar button:focus-visible {
    border-color: color-mix(in srgb, var(--primary) 52%, var(--border-color));
    background: color-mix(in srgb, var(--primary) 10%, var(--bg-dark));
    color: var(--primary);
    outline: none;
}

.file-tree-action-icon,
.file-tree-symbol,
.file-tree-toggle-icon {
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    color: currentColor;
    box-sizing: border-box;
}

.file-tree-sidebar {
    --file-tree-icon-folder: #b7791f;
    --file-tree-icon-file: #2f6fb3;
    --file-tree-icon-cloud: #087f8c;
    --file-tree-icon-local: #5f6f86;
    --file-tree-icon-lock: #9a6412;
    --file-tree-icon-action: var(--primary);
}

.file-tree-symbol {
    border-radius: 6px;
}

.file-tree-symbol-folder {
    color: var(--file-tree-icon-folder);
    background: color-mix(in srgb, var(--file-tree-icon-folder) 13%, transparent);
}

.file-tree-symbol-file {
    color: var(--file-tree-icon-file);
    background: color-mix(in srgb, var(--file-tree-icon-file) 12%, transparent);
}

.file-tree-symbol-cloud {
    color: var(--file-tree-icon-cloud);
    background: color-mix(in srgb, var(--file-tree-icon-cloud) 12%, transparent);
}

.file-tree-symbol-local {
    color: var(--file-tree-icon-local);
    background: color-mix(in srgb, var(--file-tree-icon-local) 13%, transparent);
}

.file-tree-symbol-lock {
    color: var(--file-tree-icon-lock);
    background: color-mix(in srgb, var(--file-tree-icon-lock) 13%, transparent);
}

.file-tree-symbol-new-doc,
.file-tree-symbol-plus {
    color: var(--file-tree-icon-action);
    background: color-mix(in srgb, var(--file-tree-icon-action) 11%, transparent);
}

.file-tree-symbol-more {
    color: color-mix(in srgb, var(--text-muted) 86%, transparent);
}

.file-tree-action-new-doc {
    color: var(--file-tree-icon-file);
}

.file-tree-action-new-folder {
    color: var(--file-tree-icon-folder);
}

.file-tree-action-expand,
.file-tree-action-collapse {
    color: var(--file-tree-icon-local);
}

.file-tree-action-refresh {
    color: var(--file-tree-icon-cloud);
}

.file-tree-action-icon::before,
.file-tree-action-icon::after,
.file-tree-symbol::before,
.file-tree-symbol::after,
.file-tree-toggle-icon::before,
.file-tree-toggle-icon::after {
    content: '';
    position: absolute;
    box-sizing: border-box;
}

.file-tree-action-new-doc::before,
.file-tree-symbol-file::before,
.file-tree-symbol-new-doc::before {
    left: 3px;
    top: 2px;
    width: 10px;
    height: 12px;
    border: 1.5px solid currentColor;
    border-radius: 2px;
}

.file-tree-action-new-doc::after,
.file-tree-symbol-new-doc::after {
    right: 0;
    bottom: 0;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background:
        linear-gradient(currentColor, currentColor) center / 6px 1.5px no-repeat,
        linear-gradient(currentColor, currentColor) center / 1.5px 6px no-repeat,
        color-mix(in srgb, var(--bg-dark) 86%, var(--bg-light));
    box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 55%, transparent);
}

.file-tree-symbol-file::after {
    right: 3px;
    top: 2px;
    width: 4px;
    height: 4px;
    border-left: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    border-radius: 0 0 0 1px;
}

.file-tree-action-new-folder::before,
.file-tree-symbol-folder::before {
    left: 2px;
    top: 6px;
    width: 12px;
    height: 8px;
    border: 1.5px solid currentColor;
    border-radius: 2px;
}

.file-tree-action-new-folder::after,
.file-tree-symbol-folder::after {
    left: 3px;
    top: 3px;
    width: 7px;
    height: 4px;
    border: 1.5px solid currentColor;
    border-bottom: 0;
    border-radius: 2px 2px 0 0;
}

.file-tree-action-new-folder {
    overflow: visible;
    background:
        linear-gradient(currentColor, currentColor) 10px 12px / 6px 1.5px no-repeat,
        linear-gradient(currentColor, currentColor) 12.25px 9.75px / 1.5px 6px no-repeat;
}

.file-tree-symbol-cloud::before {
    left: 1px;
    top: 8px;
    width: 14px;
    height: 6px;
    border: 1.5px solid currentColor;
    border-top: 0;
    border-radius: 0 0 999px 999px;
}

.file-tree-symbol-cloud::after {
    left: 4px;
    top: 4px;
    width: 8px;
    height: 8px;
    border: 1.5px solid currentColor;
    border-bottom-color: transparent;
    border-radius: 999px;
}

.file-tree-symbol-local::before {
    left: 2px;
    top: 3px;
    width: 12px;
    height: 9px;
    border: 1.5px solid currentColor;
    border-radius: 2px;
}

.file-tree-symbol-local::after {
    left: 5px;
    bottom: 1px;
    width: 6px;
    height: 3px;
    border-top: 1.5px solid currentColor;
    box-shadow: 0 2px 0 -0.5px currentColor;
}

.file-tree-symbol-more::before {
    top: 6.5px;
    left: 2.5px;
    width: 3px;
    height: 3px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 5px 0 0 currentColor, 10px 0 0 currentColor;
}

.file-tree-symbol-plus::before,
.file-tree-symbol-plus::after {
    left: 4px;
    top: 7px;
    width: 8px;
    height: 1.6px;
    border-radius: 2px;
    background: currentColor;
}

.file-tree-symbol-plus::after {
    transform: rotate(90deg);
}

.file-tree-symbol-lock::before {
    left: 3px;
    top: 7px;
    width: 10px;
    height: 7px;
    border: 1.5px solid currentColor;
    border-radius: 2px;
}

.file-tree-symbol-lock::after {
    left: 5px;
    top: 2px;
    width: 6px;
    height: 7px;
    border: 1.5px solid currentColor;
    border-bottom: 0;
    border-radius: 999px 999px 0 0;
}

.file-tree-toggle-icon::before {
    left: 5px;
    top: 4px;
    width: 7px;
    height: 7px;
    border-right: 1.7px solid currentColor;
    border-bottom: 1.7px solid currentColor;
    border-radius: 1px;
    transform-origin: 50% 50%;
    transition: transform 0.14s ease;
}

.file-tree-toggle-icon.expanded::before {
    transform: rotate(45deg);
}

.file-tree-toggle-icon.collapsed::before {
    transform: rotate(-45deg);
}

.file-tree-toggle-icon.disabled::before {
    left: 5px;
    top: 7px;
    width: 6px;
    height: 1.5px;
    border: 0;
    border-radius: 2px;
    background: currentColor;
    transform: none;
    opacity: 0.45;
}

.file-tree-action-expand::before,
.file-tree-action-expand::after,
.file-tree-action-collapse::before,
.file-tree-action-collapse::after {
    left: 4px;
    width: 8px;
    height: 8px;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    border-radius: 1px;
}

.file-tree-action-expand::before {
    top: 1px;
    transform: rotate(45deg);
}

.file-tree-action-expand::after {
    top: 6px;
    transform: rotate(45deg);
    opacity: 0.62;
}

.file-tree-action-collapse::before {
    top: 1px;
    transform: rotate(-135deg);
    opacity: 0.62;
}

.file-tree-action-collapse::after {
    top: 6px;
    transform: rotate(-135deg);
}

.file-tree-action-refresh::before {
    left: 3px;
    top: 3px;
    width: 10px;
    height: 10px;
    border: 1.6px solid currentColor;
    border-right-color: transparent;
    border-radius: 999px;
}

.file-tree-action-refresh::after {
    right: 1px;
    top: 3px;
    width: 5px;
    height: 5px;
    border-top: 1.6px solid currentColor;
    border-right: 1.6px solid currentColor;
    transform: rotate(28deg);
}

/* codex v151: expressive file-tree icons with emoji-like color cues and action badges. */
body,
.file-tree-sidebar {
    --file-tree-icon-folder: #d88716;
    --file-tree-icon-folder-bg: #fff2bf;
    --file-tree-icon-file: #2563eb;
    --file-tree-icon-file-bg: #dcecff;
    --file-tree-icon-cloud: #0891b2;
    --file-tree-icon-cloud-bg: #d9fbff;
    --file-tree-icon-local: #6d5bd0;
    --file-tree-icon-local-bg: #ebe6ff;
    --file-tree-icon-lock: #b7791f;
    --file-tree-icon-lock-bg: #fff4cf;
    --file-tree-icon-action: var(--primary);
}

.file-tree-action-icon,
.file-tree-symbol,
.file-tree-toggle-icon {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    border-radius: 7px;
    border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
    background:
        linear-gradient(145deg, rgba(255,255,255,.86), rgba(255,255,255,.18)),
        color-mix(in srgb, currentColor 10%, transparent);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.58),
        0 1px 2px rgba(15, 23, 42, .08);
}

.file-tree-action-icon::before,
.file-tree-symbol::before,
.file-tree-toggle-icon::before {
    position: static !important;
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    transform: none !important;
    color: inherit;
    font-family: "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    font-size: 13px;
    line-height: 1;
    filter: drop-shadow(0 1px 0 rgba(255,255,255,.55));
}

.file-tree-action-icon::after,
.file-tree-symbol::after,
.file-tree-toggle-icon::after {
    display: none;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

.file-tree-symbol-folder,
.file-tree-action-new-folder {
    color: var(--file-tree-icon-folder);
    border-color: color-mix(in srgb, var(--file-tree-icon-folder) 28%, transparent);
    background:
        linear-gradient(145deg, rgba(255,255,255,.70), rgba(255,255,255,.08)),
        var(--file-tree-icon-folder-bg, #fff2bf);
}

.file-tree-symbol-file,
.file-tree-action-new-doc {
    color: var(--file-tree-icon-file);
    border-color: color-mix(in srgb, var(--file-tree-icon-file) 24%, transparent);
    background:
        linear-gradient(145deg, rgba(255,255,255,.76), rgba(255,255,255,.12)),
        var(--file-tree-icon-file-bg, #dcecff);
}

.file-tree-symbol-cloud,
.file-tree-action-refresh {
    color: var(--file-tree-icon-cloud);
    border-color: color-mix(in srgb, var(--file-tree-icon-cloud) 28%, transparent);
    background:
        linear-gradient(145deg, rgba(255,255,255,.80), rgba(255,255,255,.10)),
        var(--file-tree-icon-cloud-bg, #d9fbff);
}

.file-tree-symbol-local,
.file-tree-action-expand,
.file-tree-action-collapse {
    color: var(--file-tree-icon-local);
    border-color: color-mix(in srgb, var(--file-tree-icon-local) 26%, transparent);
    background:
        linear-gradient(145deg, rgba(255,255,255,.80), rgba(255,255,255,.10)),
        var(--file-tree-icon-local-bg, #ebe6ff);
}

.file-tree-symbol-lock {
    color: var(--file-tree-icon-lock);
    border-color: color-mix(in srgb, var(--file-tree-icon-lock) 28%, transparent);
    background:
        linear-gradient(145deg, rgba(255,255,255,.78), rgba(255,255,255,.10)),
        var(--file-tree-icon-lock-bg, #fff4cf);
}

.file-tree-symbol-new-doc,
.file-tree-symbol-plus {
    color: var(--file-tree-icon-action);
    border-color: color-mix(in srgb, var(--file-tree-icon-action) 26%, transparent);
    background:
        linear-gradient(145deg, rgba(255,255,255,.76), rgba(255,255,255,.10)),
        color-mix(in srgb, var(--file-tree-icon-action) 13%, var(--bg-light));
}

.file-tree-symbol-folder::before,
.file-tree-action-new-folder::before { content: "📁" !important; }

.file-tree-symbol-file::before { content: "📄" !important; }
.file-tree-action-new-doc::before,
.file-tree-symbol-new-doc::before { content: "📝" !important; }
.file-tree-symbol-cloud::before { content: "☁️" !important; }
.file-tree-symbol-local::before { content: "💻" !important; }
.file-tree-symbol-lock::before { content: "🔒" !important; }
.file-tree-symbol-plus::before { content: "＋" !important; font-family: inherit; font-weight: 900; }
.file-tree-symbol-more::before { content: "⋯" !important; font-family: inherit; font-size: 16px; font-weight: 900; letter-spacing: -1px; }
.file-tree-action-expand::before { content: "⇲" !important; font-family: inherit; font-size: 14px; font-weight: 900; }
.file-tree-action-collapse::before { content: "⇱" !important; font-family: inherit; font-size: 14px; font-weight: 900; }
.file-tree-action-refresh::before { content: "↻" !important; font-family: inherit; font-size: 14px; font-weight: 900; }

.file-tree-action-new-doc::after,
.file-tree-action-new-folder::after {
    content: "+";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--bg-light) 84%, white);
    background: #22c55e !important;
    color: white;
    font: 900 8px/1 "Inter", "Microsoft YaHei", sans-serif;
    box-shadow: 0 1px 3px rgba(34, 197, 94, .36);
}

.file-tree-toggle-icon {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
    border-radius: 999px;
}

.file-tree-toggle-icon.expanded {
    color: #0f766e;
    border-color: rgba(15, 118, 110, .22);
    background:
        linear-gradient(145deg, rgba(255,255,255,.82), rgba(255,255,255,.16)),
        #d9fbe8;
}

.file-tree-toggle-icon.collapsed {
    color: #4f46e5;
    border-color: rgba(79, 70, 229, .20);
    background:
        linear-gradient(145deg, rgba(255,255,255,.82), rgba(255,255,255,.16)),
        #e8e7ff;
}

.file-tree-toggle-icon.disabled {
    color: color-mix(in srgb, var(--text-muted) 72%, transparent);
    border-color: color-mix(in srgb, var(--border-color) 45%, transparent);
    background: color-mix(in srgb, var(--bg-dark) 84%, var(--bg-light));
}

.file-tree-toggle-icon.expanded::before { content: "▾" !important; font-family: inherit; font-size: 13px; font-weight: 900; transform: translateY(-1px) !important; }
.file-tree-toggle-icon.collapsed::before { content: "▸" !important; font-family: inherit; font-size: 12px; font-weight: 900; transform: translateX(1px) !important; }
.file-tree-toggle-icon.disabled::before { content: "•" !important; font-family: inherit; font-size: 10px; font-weight: 900; opacity: .5; }

.file-tree-folder-toggle:hover .file-tree-toggle-icon,
.file-tree-actions button:hover .file-tree-action-icon,
.file-tree-quickbar button:hover .file-tree-action-icon,
.app-rail-icon:hover .file-tree-action-icon {
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.66),
        0 4px 10px color-mix(in srgb, currentColor 18%, transparent);
}

.file-tree-folder-title.current .file-tree-item-icon,
.file-tree-doc.active .file-tree-item-icon {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.64),
        0 3px 10px color-mix(in srgb, currentColor 24%, transparent);
}

.file-tree-item-icon.file-tree-symbol-folder {
    color: var(--file-tree-icon-folder);
    background:
        linear-gradient(145deg, rgba(255,255,255,.70), rgba(255,255,255,.08)),
        var(--file-tree-icon-folder-bg, #fff2bf);
}

.file-tree-item-icon.file-tree-symbol-file {
    color: var(--file-tree-icon-file);
    background:
        linear-gradient(145deg, rgba(255,255,255,.76), rgba(255,255,255,.12)),
        var(--file-tree-icon-file-bg, #dcecff);
}

.file-tree-item-icon.file-tree-symbol-cloud {
    color: var(--file-tree-icon-cloud);
    background:
        linear-gradient(145deg, rgba(255,255,255,.80), rgba(255,255,255,.10)),
        var(--file-tree-icon-cloud-bg, #d9fbff);
}

.file-tree-item-icon.file-tree-symbol-local {
    color: var(--file-tree-icon-local);
    background:
        linear-gradient(145deg, rgba(255,255,255,.80), rgba(255,255,255,.10)),
        var(--file-tree-icon-local-bg, #ebe6ff);
}

.file-tree-collapse,
.file-tree-header-menu,
.file-tree-actions button,
.file-tree-doc-action {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-dark);
    color: var(--text-muted);
    cursor: pointer;
}

.file-tree-collapse {
    width: 30px;
    height: 38px;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    line-height: 1;
    border: 0;
    background: transparent;
}

.file-tree-header-menu {
    width: 28px;
    height: 28px;
    margin-left: auto;
}

.file-tree-search {
    position: relative;
}

.file-tree-search input {
    width: 100%;
    height: 34px;
    padding: 0 30px 0 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-dark);
    color: var(--text-light);
    font-size: 0.8em;
    outline: none;
}

.file-tree-search input:focus {
    border-color: color-mix(in srgb, var(--primary) 62%, var(--border-color));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}

.file-tree-search-clear {
    position: absolute;
    top: 50%;
    right: 5px;
    width: 24px;
    height: 24px;
    display: none;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transform: translateY(-50%);
}

.file-tree-search-clear.visible {
    display: inline-flex;
}

.file-tree-search-clear:hover {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
}

.file-tree-status {
    min-height: 16px;
    padding: 0 3px;
    color: color-mix(in srgb, var(--text-muted) 86%, transparent);
    font-size: 0.72em;
    line-height: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-tree-actions {
    display: block;
}

.file-tree-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 28px;
    padding: 0 9px;
    font-size: 0.8em;
    white-space: nowrap;
    gap: 5px;
}

.file-tree-collapse:hover,
.file-tree-actions button:hover,
.file-tree-doc-action:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.file-tree-list {
    flex: 1;
    overflow: auto;
    padding: 2px 3px 6px 0;
    scrollbar-width: thin;
}

.file-tree-folder {
    margin: 1px 0;
}

.local-workspace-root,
.server-workspace-root {
    margin: 2px 0 6px;
    padding-bottom: 5px;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 36%, transparent);
}

.local-workspace-root > .file-tree-folder-title,
.server-workspace-root > .file-tree-folder-title {
    color: var(--text-light);
}

.file-tree-server-root {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) 26px;
    align-items: center;
    gap: 5px;
    min-height: 28px;
    margin: 1px 0 2px;
    padding: 1px 4px;
    border-radius: 7px;
    color: var(--text-muted);
    font-size: 0.78em;
    font-weight: 600;
    cursor: pointer;
}

.file-tree-server-root.current {
    color: var(--text-light);
    background: color-mix(in srgb, var(--primary) 6%, transparent);
    box-shadow: inset 2px 0 0 color-mix(in srgb, var(--primary) 72%, transparent);
}

.file-tree-server-root > span:first-child {
    text-align: center;
}

.file-tree-server-root > span:nth-child(2) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-tree-server-root .file-tree-menu-btn {
    justify-self: end;
    opacity: 0.78;
}

.file-tree-server-root:hover .file-tree-menu-btn {
    opacity: 1;
}

.local-workspace-root > .file-tree-folder-title .file-tree-root-settings,
.server-workspace-root > .file-tree-folder-title .file-tree-root-settings {
    justify-self: end;
}

.file-tree-local-hint {
    padding: 4px 5px;
    color: var(--text-muted);
    font-size: 0.76em;
}

.file-tree-folder-title {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 4px;
    min-height: 36px;
    padding: 3px 4px;
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 0.78em;
    font-weight: 600;
    outline: none;
    transition: background 0.12s, color 0.12s, box-shadow 0.12s;
}

.file-tree-folder-title:hover,
.file-tree-folder-title:focus-visible {
    color: var(--text-light);
    background: color-mix(in srgb, var(--primary) 5%, transparent);
}

.file-tree-folder-title.current {
    color: var(--text-light);
    background: color-mix(in srgb, var(--primary) 9%, transparent);
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--primary) 78%, transparent);
}

.file-tree-folder-toggle {
    width: 20px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    line-height: 1;
    font-size: 0.78em;
    opacity: 0.62;
    padding: 0;
}

.file-tree-folder-toggle.is-expanded,
.file-tree-folder-toggle.is-collapsed {
    opacity: 0.72;
}

.file-tree-folder-toggle.is-disabled {
    cursor: default;
    opacity: 0.34;
}

.file-tree-folder-toggle:hover {
    background: var(--bg-dark);
    color: var(--primary);
}

.file-tree-folder-name {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
}

.file-tree-item-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 18px;
    color: color-mix(in srgb, var(--text-muted) 88%, transparent);
}

.file-tree-folder-title.current .file-tree-item-icon,
.file-tree-doc.active .file-tree-item-icon {
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent),
        0 2px 6px color-mix(in srgb, currentColor 10%, transparent);
}

.file-tree-name-stack {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    line-height: 1.15;
}

.file-tree-name-stack.single-line {
    gap: 0;
}

.file-tree-primary {
    min-width: 0;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-tree-name-stack small {
    min-width: 0;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: color-mix(in srgb, var(--text-muted) 78%, transparent);
    font-size: 0.84em;
    font-weight: 500;
}

.file-tree-folder-title > span:nth-child(2) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-tree-folder-title .file-tree-menu-btn {
    justify-self: end;
}

.file-tree-folder-children {
    margin-left: 10px;
    border-left: 1px solid color-mix(in srgb, var(--border-color) 48%, transparent);
    padding-left: 7px;
}

.file-tree-folder.collapsed > .file-tree-folder-children {
    display: none;
}

.file-tree-new-file {
    width: 100%;
    min-height: 30px;
    margin: 2px 0 3px;
    padding: 0 8px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    text-align: left;
    font-size: 0.76em;
    opacity: 0.7;
}

.file-tree-new-file .file-tree-symbol {
    margin-right: 4px;
    vertical-align: -3px;
}

.file-tree-new-file:hover {
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, transparent);
    opacity: 1;
}

.file-tree-doc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24px;
    align-items: center;
    gap: 4px;
    width: 100%;
    min-height: 36px;
    padding: 3px 4px 3px 6px;
    border-radius: 8px;
    color: var(--text-muted);
    outline: none;
    transition: background 0.12s, color 0.12s, box-shadow 0.12s;
}

.file-tree-doc:hover,
.file-tree-doc:focus-visible {
    color: var(--text-light);
    background: color-mix(in srgb, var(--primary) 5%, transparent);
}

.file-tree-doc.active {
    color: var(--text-light);
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--primary) 80%, transparent);
}

.file-tree-doc.dirty .file-tree-doc-main::after {
    content: '●';
    color: var(--primary);
    font-size: 0.72em;
    margin-left: 2px;
}

.file-tree-doc-main {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    min-height: 30px;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    text-align: left;
    font-size: 0.8em;
}

.file-tree-doc-main .file-tree-primary {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-tree-doc-actions {
    display: inline-flex;
    justify-content: flex-end;
    gap: 1px;
    opacity: 0;
    transition: opacity 0.12s;
}

.file-tree-doc:hover .file-tree-doc-actions,
.file-tree-doc:focus-within .file-tree-doc-actions,
.file-tree-doc.active .file-tree-doc-actions,
.file-tree-folder-title:hover .file-tree-menu-btn,
.file-tree-folder-title:focus-within .file-tree-menu-btn {
    opacity: 1;
}

.file-tree-folder.dragging,
.file-tree-doc.dragging {
    opacity: 0.48;
}

.file-tree-drop-target {
    background: color-mix(in srgb, var(--primary) 9%, transparent);
    outline: 1px dashed color-mix(in srgb, var(--primary) 62%, transparent);
    outline-offset: 1px;
}

.file-tree-drop-before,
.file-tree-drop-after {
    position: relative;
}

.file-tree-drop-inside {
    background: color-mix(in srgb, var(--primary) 13%, transparent);
    outline: 1px solid color-mix(in srgb, var(--primary) 70%, transparent);
    outline-offset: 2px;
}

.file-tree-drop-before::before,
.file-tree-drop-after::after {
    content: '';
    position: absolute;
    left: 6px;
    right: 6px;
    height: 2px;
    border-radius: 2px;
    background: var(--primary);
}

.file-tree-drop-before::before {
    top: -2px;
}

.file-tree-drop-after::after {
    bottom: -2px;
}

.file-tree-doc-action {
    width: 24px;
    height: 24px;
    font-size: 0.75em;
}

.file-tree-menu-btn {
    width: 23px;
    height: 23px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0.35;
}

.file-tree-menu-btn:hover {
    background: var(--bg-dark);
    color: var(--primary);
}

.file-tree-root-settings {
    width: 24px;
    height: 24px;
    border: 1px solid color-mix(in srgb, var(--primary) 34%, var(--border-color));
    border-radius: 7px;
    background: color-mix(in srgb, var(--primary) 9%, var(--bg-dark));
    color: var(--primary);
    opacity: 0.9;
    font-size: 0.88em;
}

.file-tree-folder-settings {
    width: 24px;
    height: 24px;
    border: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
    border-radius: 6px;
    background: color-mix(in srgb, var(--bg-dark) 72%, transparent);
    opacity: 0.5;
    font-size: 0.78em;
}

.file-tree-file-settings {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: transparent;
    color: color-mix(in srgb, var(--text-muted) 86%, transparent);
    opacity: 0.42;
    font-size: 1.05em;
    line-height: 1;
}

.file-tree-root-settings:hover,
.file-tree-folder-settings:hover,
.file-tree-file-settings:hover {
    opacity: 1;
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 12%, var(--bg-dark));
    color: var(--primary);
}

.file-tree-context-menu {
    position: fixed;
    z-index: 9200;
    min-width: 148px;
    padding: 6px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-light);
    box-shadow: 0 14px 36px rgba(0,0,0,0.24);
}

.file-tree-context-menu button {
    display: block;
    width: 100%;
    min-height: 30px;
    padding: 6px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-light);
    text-align: left;
    cursor: pointer;
    font-size: 0.86em;
}

.file-tree-context-menu button:hover {
    background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.file-tree-context-menu button.disabled {
    color: var(--text-muted);
    cursor: not-allowed;
    opacity: 0.55;
}

.file-tree-context-menu button.danger {
    color: #ff3b5f;
}

.file-tree-move-picker-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(0, 0, 0, 0.34);
}

.file-tree-prompt-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(0, 0, 0, 0.34);
}

.file-tree-prompt {
    width: min(380px, 92vw);
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-light);
    box-shadow: 0 18px 48px rgba(0,0,0,0.32);
}

.file-tree-prompt-input {
    width: 100%;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-dark);
    color: var(--text-light);
    outline: none;
}

.file-tree-prompt-input:focus {
    border-color: var(--primary);
}

.file-tree-move-picker {
    width: min(360px, 92vw);
    max-height: min(560px, 82vh);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-light);
    box-shadow: 0 18px 48px rgba(0,0,0,0.32);
}

.file-tree-move-title {
    color: var(--text-light);
    font-weight: 800;
    font-size: 0.96em;
}

.file-tree-move-subtitle {
    color: var(--text-muted);
    font-size: 0.78em;
    white-space: pre-line;
}

@media (max-width: 720px) {
    .editor-search-main {
        grid-template-columns: 28px minmax(80px, 1fr) auto repeat(3, 30px);
    }

    #editorSearchCaseBtn,
    #editorSearchWordBtn {
        display: none;
    }

    .document-history-layout {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(150px, 34%) minmax(0, 1fr);
    }
}

/* v67 final cascade: keep premium card themes authoritative in preview and export. */
html body .xhs-card.pixel-page.card-theme-memo {
    border: 1px solid #dfd2bb !important;
    border-radius: 14px !important;
    background-color: #fbf5e9 !important;
    background-image:
        linear-gradient(rgba(110, 88, 57, .065) 1px, transparent 1px),
        linear-gradient(90deg, rgba(110, 88, 57, .065) 1px, transparent 1px),
        radial-gradient(circle at 88% 10%, rgba(191, 137, 76, .10), transparent 28%) !important;
    background-size: 20px 20px, 20px 20px, auto !important;
    box-shadow: 0 20px 48px rgba(88, 67, 40, .18) !important;
}

html body .xhs-card.pixel-page.card-theme-clinical {
    border: 1px solid #b9d4da !important;
    border-radius: 10px !important;
    background: linear-gradient(180deg, #0e6675 0 45px, #f7fbfc 45px 100%) !important;
    box-shadow: 0 20px 48px rgba(10, 75, 89, .20) !important;
}

html body .xhs-card.pixel-page.card-theme-clinical:not(.page-type-cover) .card-theme-topline {
    color: #f1fcff !important;
}

html body .xhs-card.pixel-page.card-theme-clinical .preview-content blockquote,
html body .xhs-card.pixel-page.card-theme-clinical .preview-content table {
    border: 1px solid #c8e0e4 !important;
    border-radius: 8px !important;
    background: #edf6f7 !important;
}

html body .xhs-card.pixel-page.card-theme-journal {
    border: 1px solid #d2c9bb !important;
    border-radius: 4px !important;
    background:
        linear-gradient(90deg, rgba(164, 43, 39, .06), transparent 18%),
        #f9f5ed !important;
    box-shadow: 0 22px 48px rgba(52, 45, 35, .20) !important;
}

html body .xhs-card.pixel-page.card-theme-research {
    border: 1px solid rgba(25, 70, 46, .24) !important;
    border-radius: 14px !important;
    background:
        radial-gradient(circle at 88% 10%, rgba(236, 164, 100, .25), transparent 24%),
        linear-gradient(145deg, #eff4ea, #dce8dd 68%, #d1dfd5) !important;
    box-shadow: 0 22px 54px rgba(38, 70, 48, .25) !important;
}

html body .xhs-card.pixel-page.card-theme-research .preview-content blockquote,
html body .xhs-card.pixel-page.card-theme-research .preview-content pre,
html body .xhs-card.pixel-page.card-theme-research .preview-content table {
    border: 1px solid rgba(37, 83, 55, .13) !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, .55) !important;
    box-shadow: 0 5px 16px rgba(38, 70, 48, .06) !important;
}

html body .xhs-card.pixel-page.card-theme-visual {
    border: 1px solid #d8dde1 !important;
    border-radius: 16px !important;
    background:
        radial-gradient(circle at 90% 12%, rgba(67, 197, 177, .14), transparent 25%),
        linear-gradient(145deg, #f4f6f7, #e9edef) !important;
    box-shadow: 0 22px 50px rgba(42, 52, 59, .20) !important;
}

html body .xhs-card.pixel-page.card-theme-lecture {
    border: 1px solid #24435c !important;
    border-radius: 14px !important;
    background:
        linear-gradient(rgba(109, 205, 244, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(109, 205, 244, .045) 1px, transparent 1px),
        radial-gradient(circle at 84% 12%, rgba(49, 184, 232, .22), transparent 28%),
        radial-gradient(circle at 15% 88%, rgba(244, 185, 66, .10), transparent 30%),
        linear-gradient(145deg, #07111f, #0c2438) !important;
    background-size: 24px 24px, 24px 24px, auto, auto, auto !important;
    box-shadow: 0 24px 56px rgba(2, 12, 27, .42) !important;
}

html body .xhs-card.pixel-page.card-theme-lecture .preview-content blockquote,
html body .xhs-card.pixel-page.card-theme-lecture .preview-content pre {
    border: 1px solid rgba(125, 211, 252, .16) !important;
    border-radius: 9px !important;
    background: rgba(255, 255, 255, .055) !important;
}

.file-tree-move-list {
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 2px 0;
}

.file-tree-move-list button,
.file-tree-move-actions button {
    min-height: 32px;
    display: flex;
    align-items: center;
    gap: 7px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-light);
    cursor: pointer;
    padding: 6px 8px;
    text-align: left;
}

.file-tree-move-actions button.primary {
    background: var(--primary);
    color: #fff;
}

.file-tree-move-actions button.danger {
    background: #ff3b5f;
    color: #fff;
}

.file-tree-move-list button:hover,
.file-tree-move-list button.current {
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary);
}

.file-tree-move-actions {
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid var(--border-color);
    padding-top: 8px;
}

.file-tree-empty {
    color: var(--text-muted);
    font-size: 0.82em;
    text-align: center;
    padding: 18px 4px;
}

.editor-panel, .preview-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.editor-panel {
    flex: 0 0 var(--editor-panel-basis, 50%);
    border-right: 0;
    container-type: inline-size;
    container-name: editor-panel;
}

.preview-panel {
    flex: 1 1 0;
    container-type: inline-size;
    container-name: preview-panel;
    position: relative;
}

.panel-header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--bg-light);
    font-size: 0.85em;
    color: #aaa;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    gap: 10px;
}

.editor-brand-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-light);
    font-weight: 700;
    white-space: nowrap;
}

.editor-title-area {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: 360px;
    white-space: nowrap;
}

.editor-document-title {
    min-width: 0;
    max-width: 180px;
    height: 28px;
    padding: 0 6px;
    border: 0;
    background: transparent;
    color: var(--text-light);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.editor-document-title:hover,
.editor-document-title:focus-visible {
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, transparent);
    box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--primary) 42%, transparent);
    outline: none;
}

.editor-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-right: auto;
}

.editor-panel .panel-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    min-height: 48px;
    flex-wrap: nowrap;
    overflow: visible;
    z-index: 30;
    pointer-events: auto;
}

.editor-panel .editor-tools {
    min-width: 0;
    flex-wrap: nowrap;
    margin-right: 0;
    overflow: visible;
    position: relative;
    z-index: 31;
    pointer-events: auto;
}

.editor-panel .editor-tools .dropdown,
.editor-panel .editor-tools .btn-fmt-toggle {
    flex: 0 0 auto;
    pointer-events: auto;
}

.editor-panel .editor-tools .dropdown.dropdown-open {
    z-index: 4100;
}

.editor-panel .dropdown-menu {
    z-index: 4000;
}

.editor-panel .editor-stats {
    justify-self: end;
    flex: 0 0 auto;
    min-width: max-content;
    white-space: nowrap;
}

.preview-panel .panel-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px 12px;
}

.preview-primary-controls {
    grid-column: 1 / -1;
    width: min(100%, 800px);
    justify-self: center;
}

.preview-header-top {
    grid-column: 1 / 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.preview-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.preview-extra-controls {
    grid-column: 1 / 2;
    justify-content: center;
    position: relative;
}

.zoom-control {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    align-self: center;
    justify-self: end;
}

.card-preview-toolbar {
    display: none;
    flex: 0 0 auto;
    position: relative;
    width: auto;
    height: auto;
    overflow: visible;
    z-index: 30;
}

body.card-workspace-active .card-preview-toolbar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.card-preview-toolbar-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 32px;
    padding: 0 11px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-dark);
    color: var(--text-light);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.card-preview-toolbar-trigger small {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 650;
}

.card-preview-toolbar-chevron {
    color: var(--text-muted);
    font-size: 10px;
    transition: transform .16s ease;
}

.card-preview-toolbar.card-toolbar-open .card-preview-toolbar-chevron {
    transform: rotate(180deg);
}

.card-preview-toolbar.card-toolbar-open .card-preview-toolbar-trigger {
    border-color: color-mix(in srgb, var(--primary) 54%, var(--border-color));
    background: color-mix(in srgb, var(--primary) 9%, var(--bg-dark));
    color: var(--primary);
}

.preview-export-dropdown {
    flex: 0 0 auto;
}

.preview-export-dropdown .dropdown-menu {
    left: auto;
    right: 0;
}

@container editor-panel (max-width: 860px) {
    .editor-panel .panel-header {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px 8px;
    }

    .editor-panel .editor-brand-title {
        display: none;
    }

    .editor-panel .editor-tools {
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .editor-panel .editor-tools::-webkit-scrollbar {
        display: none;
    }

    .editor-panel .editor-tools:has(.dropdown-open) {
        overflow: visible;
    }

    .editor-panel .editor-stats {
        gap: 8px;
        font-size: 0.92em;
    }

    .editor-panel .read-time {
        display: none;
    }
}

@container editor-panel (max-width: 640px) {
    .editor-panel .editor-stats {
        display: none;
    }
}

@container preview-panel (max-width: 760px) {
    .preview-panel .panel-header {
        padding: 7px 8px;
        gap: 6px;
    }

    .preview-panel .preview-primary-controls {
        width: 100%;
        max-width: 100%;
        justify-self: stretch;
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 5px;
        padding: 4px 0;
        border: 0;
        background: transparent;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .preview-panel .preview-primary-controls::-webkit-scrollbar {
        display: none;
    }

    .preview-panel .preview-primary-controls:has(.dropdown-open) {
        overflow: visible;
        flex-wrap: wrap;
        padding-bottom: 6px;
    }

    .preview-panel .preview-compact-toggle {
        min-height: 31px;
        padding: 5px 10px;
    }

    .preview-panel .zoom-control {
        display: none;
    }
}

@container preview-panel (max-width: 620px) {
    .preview-panel .preview-compact-toggle {
        padding-left: 8px;
        padding-right: 8px;
    }

    .preview-panel .preview-share-toggle,
    .preview-panel .preview-publish-toggle {
        min-width: 54px;
    }
}

.char-count, .zoom-control {
    display: flex;
    align-items: center;
    gap: 6px;
}

.editor-stats {
    display: flex;
    align-items: center;
    gap: 12px;
}

.word-count, .read-time {
    color: #888;
    font-size: 0.85em;
}

.save-indicator {
    color: #38b26b;
    font-size: 0.85em;
}

.ai-model-select {
    width: 120px;
    flex-shrink: 0;
}

.ai-custom-row {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}

.ai-custom-row input {
    flex: 1;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-dark);
    color: var(--text-light);
    font-size: 0.85em;
}

.zoom-control button {
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    color: var(--text-light);
    width: 24px;
    height: 24px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8em;
}

/* ==================== 预览 Tab ==================== */
.preview-tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.tab-btn {
    padding: 5px 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-dark);
    color: #888;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.8em;
}

.tab-btn:hover {
    border-color: var(--primary);
}

.tab-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* ==================== 编辑器 ==================== */
.editor-wrapper {
    flex: 1;
    display: flex;
    position: relative;
    overflow: hidden;
    background: var(--bg-dark);
    min-height: 0;
    transition: background 0.25s;
}

.line-numbers {
    padding: 12px 8px;
    background: var(--bg-deeper);
    color: var(--text-dim);
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 15px;
    line-height: 1.6;
    text-align: right;
    user-select: none;
    overflow-y: auto;
    min-width: 40px;
    white-space: pre;
    transition: background 0.25s, color 0.25s;
}

#editor {
    flex: 1;
    padding: 12px 15px;
    background: var(--bg-dark);
    color: var(--text-light);
    border: none;
    resize: none;
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 15px;
    line-height: 1.6;
    outline: none;
    overflow-y: auto;
    caret-color: var(--editor-caret);
    transition: background 0.25s, color 0.25s;
}

#editor::placeholder {
    color: var(--text-dim);
}

.editor-search-panel {
    position: absolute;
    z-index: 12;
    top: 10px;
    right: 12px;
    width: min(560px, calc(100% - 24px));
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: color-mix(in srgb, var(--bg-card) 96%, transparent);
    box-shadow: 0 10px 28px rgba(15, 23, 42, .16);
    backdrop-filter: blur(10px);
}

.editor-search-panel[hidden],
.editor-replace-row[hidden] {
    display: none !important;
}

body.share-preview-mode .workspace-toolbar { display: none !important; }

.editor-search-main,
.editor-replace-row {
    display: grid;
    grid-template-columns: 28px minmax(120px, 1fr) auto repeat(5, 30px);
    gap: 6px;
    align-items: center;
}

.editor-replace-row {
    grid-template-columns: 28px minmax(120px, 1fr) auto auto;
    margin-top: 7px;
}

.editor-search-panel input {
    min-width: 0;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    background: var(--bg-dark);
    color: var(--text-primary);
    outline: none;
}

.editor-search-panel input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent);
}

.editor-search-panel button {
    height: 30px;
    min-width: 30px;
    padding: 0 7px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    background: var(--bg-card);
    color: var(--text-muted);
    cursor: pointer;
}

.editor-search-panel button:hover,
.editor-search-panel button.active {
    border-color: var(--primary);
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, var(--bg-card));
}

.editor-search-count {
    min-width: 46px;
    color: var(--text-muted);
    font-size: 12px;
    text-align: center;
    white-space: nowrap;
}

/* ==================== 预览区 ==================== */
.preview-wrapper {
    flex: 1;
    overflow: auto;
    background: var(--bg-preview);
    padding: 15px;
    min-height: 0;
    transition: background 0.25s;
}

.image-upload-progress {
    position: absolute;
    top: 58px;
    right: 18px;
    z-index: 160;
    width: min(340px, calc(100% - 36px));
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border-color));
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-light) 94%, transparent);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.18);
    color: var(--text-light);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.image-upload-progress.visible {
    opacity: 1;
    transform: translateY(0);
}

.image-upload-progress-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
}

.image-upload-progress-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 14%, transparent);
}

.image-upload-progress.uploading .image-upload-progress-dot {
    animation: image-upload-pulse 1.1s infinite ease-in-out;
}

.image-upload-progress.success .image-upload-progress-dot {
    background: #16a34a;
    box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.14);
}

.image-upload-progress.error .image-upload-progress-dot {
    background: #dc2626;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.14);
}

.image-upload-progress-title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;
}

.image-upload-progress-count {
    color: var(--text-muted);
    font-size: 12px;
    white-space: nowrap;
}

.image-upload-progress-message {
    font-size: 13px;
    color: var(--text-light);
    line-height: 1.45;
}

.image-upload-progress-bar {
    height: 6px;
    margin-top: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--border-color) 58%, transparent);
}

.image-upload-progress-bar span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--primary);
    transition: width 0.2s ease;
}

.image-upload-progress.success .image-upload-progress-bar span {
    background: #16a34a;
}

.image-upload-progress.error .image-upload-progress-bar span {
    background: #dc2626;
}

.image-upload-progress-detail {
    margin-top: 7px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.35;
    word-break: break-all;
}

@keyframes image-upload-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.72); opacity: 0.62; }
}

.preview-mode {
    display: none;
}

.preview-mode.active {
    display: flex;
}

/* 手机预览 */
.preview-phone {
    justify-content: center;
    align-items: flex-start;
    min-height: 100%;
    width: 100%;
    box-sizing: border-box;
}

.phone-frame {
    --phone-preview-width: 390px;
    --phone-preview-height: 844px;
    display: flex;
    flex-direction: column;
    width: min(var(--phone-preview-width), 100%);
    height: min(var(--phone-preview-height), max(520px, calc(100dvh - 150px)));
    min-height: 0;
    max-height: none;
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-sizing: border-box;
    overflow: visible;
    box-shadow: none;
    flex-shrink: 0;
}

.phone-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    background: white;
    border-radius: 0;
    margin-top: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.phone-content.image-export-phone-content {
    width: var(--phone-preview-width);
    height: auto;
    min-height: var(--phone-preview-height);
    overflow: visible;
}

.phone-content .xhs-card {
    border-radius: 0;
    flex: 0 0 auto;
    width: 100%;
    min-height: 100%;
    height: auto;
    position: relative;
    overflow: visible;
    box-sizing: border-box;
}

/* 机壳内正文可纵向撑开，不限制区块高度 */
.phone-content .xhs-card .preview-content {
    min-height: 0;
    max-height: none;
    overflow: visible;
}

.phone-content .xhs-card .preview-content h1 {
    font-size: 1.35em;
    line-height: 1.38;
    margin: 0 0 14px;
    padding: 8px 0;
    border-top: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    text-align: center;
    letter-spacing: 0;
}

.phone-content .xhs-card .preview-content p {
    text-align: justify;
    text-align-last: left;
    text-justify: inter-ideograph;
}

.phone-content .xhs-card .preview-content .img-caption {
    text-align: center;
    text-align-last: center;
    text-justify: auto;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.phone-content .xhs-card .preview-content .img-caption.caption-multi-line {
    text-align: justify !important;
    text-align-last: left !important;
    text-justify: inter-ideograph !important;
}

.phone-content .xhs-card .preview-content .img-caption.caption-single-line {
    text-align: center;
    text-align-last: center;
}

.preview-cover {
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    min-height: 0;
}

.cover-settings-panel {
    width: min(820px, 100%);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cover-settings-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.cover-targets {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 9px 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-light) 88%, transparent);
    color: var(--text-muted);
    font-size: 0.88em;
}

.cover-targets label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.cover-targets input {
    accent-color: var(--primary);
}

.cover-caption-field {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    font-size: 0.88em;
}

.cover-caption-field input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-dark);
    color: var(--text-light);
    outline: none;
}

.cover-caption-field input:focus {
    border-color: var(--primary);
}

.cover-caption-field input:disabled {
    opacity: 0.58;
    cursor: not-allowed;
}

.cover-settings-stage {
    min-height: 420px;
    padding: 18px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: color-mix(in srgb, var(--bg-light) 92%, #ffffff 8%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.cover-settings-empty {
    color: var(--text-muted);
    font-size: 0.92em;
}

.cover-settings-preview {
    width: min(320px, 100%);
    aspect-ratio: 3 / 4;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    background: #f5f6fa;
    box-shadow: 0 18px 42px rgba(0,0,0,0.2);
}

.cover-settings-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(var(--cover-image-scale, 1));
    transform-origin: center;
    display: block;
}

.cover-settings-caption {
    color: var(--text-muted);
    font-size: 0.86em;
    text-align: center;
}

.inline-cover-figure {
    margin-top: 0 !important;
}

/* 电脑预览 */
.preview-desktop {
    justify-content: center;
}

.desktop-frame {
    width: 100%;
    max-width: 800px;
    background: white;
    border-radius: 10px;
    padding: 30px;
    position: relative;
    overflow: hidden;
}

.desktop-frame .preview-content {
    color: #333;
    font-size: 15px;
    line-height: 1.8;
}

/* 卡片预览 */
.preview-card {
    justify-content: center;
    align-items: flex-start;
    overflow-y: auto;
    padding: 20px;
}

.card-preview-split {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) minmax(260px, 320px);
    align-items: start;
    gap: 14px;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
}

.cards-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    width: 100%;
    transform-origin: top center;
}

.card-settings-dock {
    position: sticky;
    top: 0;
    display: none;
    min-width: 0;
    max-height: calc(100dvh - 118px);
    overflow: auto;
    scrollbar-width: thin;
}

.card-settings-dock.active {
    display: block;
}

.card-settings-dock > .page-toolbar {
    position: static;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 0 12px;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-light) 97%, #fff 3%);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .13);
}

.card-settings-dock > .page-toolbar .card-toolbar-group {
    width: 100%;
}

body.card-workspace-active .workspace-split .editor-panel {
    flex: 0 0 32% !important;
    width: 32% !important;
}

body.card-workspace-active .workspace-split .preview-panel {
    flex: 1 1 68% !important;
    width: auto !important;
}

.card-settings-dock .card-settings-panel {
    position: static;
    width: 100%;
    max-height: none;
    overflow: visible;
    padding: 12px;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .16);
}

.card-settings-dock .card-settings-grid,
.card-settings-dock .card-settings-decoration-fields,
.card-settings-dock .card-settings-identity-fields {
    grid-template-columns: 1fr;
}

.card-settings-dock .card-settings-section {
    padding: 10px;
}

.card-settings-dock .card-settings-panel-heading span,
.card-settings-dock .card-settings-section-title span {
    line-height: 1.4;
}

body.card-workspace-active .editor-panel {
    flex: 0 0 38%;
}

body.card-workspace-active .preview-panel {
    flex: 1 1 62%;
}

body.card-workspace-active .preview-wrapper {
    padding: 16px 20px 34px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--bg-preview) 82%, #ffffff 18%) 0%, var(--bg-preview) 100%);
}

body.card-workspace-active .preview-card {
    justify-content: flex-start;
    align-items: stretch;
}

body.card-workspace-active .cards-container {
    width: 100%;
    margin: 0 auto;
    padding-top: 8px;
    gap: 28px;
}

body.card-workspace-active .card-preview-toolbar:empty {
    display: none !important;
}

@container preview-panel (max-width: 570px) {
    .card-preview-split {
        grid-template-columns: 1fr;
        max-width: 760px;
    }

    .card-settings-dock {
        position: static;
        max-height: none;
        order: -1;
    }
}

.card-page-summary {
    width: min(300px, 100%);
    padding: 9px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-light) 88%, transparent);
    color: var(--text-muted);
    text-align: center;
    font-size: 12px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.16);
}

/* 预览内容通用样式 */
.preview-content {
    padding: 20px;
    color: #333;
    font-size: 14px;
    line-height: 1.8;
}

.preview-content h1, .preview-content h2, .preview-content h3 {
    margin: 15px 0 10px 0;
    line-height: 1.3;
}

.preview-content h1 {
    font-size: 1.8em;
    text-align: center;
}
.preview-content h2 { font-size: 1.5em; }
.preview-content h3 { font-size: 1.2em; }

.preview-content p {
    margin: 10px 0;
    text-align: justify;
    text-align-last: left;
    text-justify: inter-ideograph;
}

.preview-content .math-formula {
    color: inherit;
    font-size: 1.04em;
}

.preview-content .math-formula-inline {
    display: inline-block;
    max-width: 100%;
    vertical-align: -0.12em;
}

.preview-content .math-formula-block {
    display: block;
    max-width: 100%;
    margin: 16px 0;
    padding: 12px 16px;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, currentColor 4%, transparent);
    text-align: center;
    line-height: 1.5;
}

.preview-content .math-formula-fallback {
    font-family: 'Times New Roman', serif;
    font-style: italic;
}

.preview-content .math-formula .katex-display {
    margin: 0;
}

.preview-content ul, .preview-content ol {
    margin: 10px 0;
    padding-left: 25px;
}

.preview-content li { margin: 5px 0; }

.preview-content blockquote {
    border-left: 4px solid var(--primary);
    padding-left: 15px;
    margin: 15px 0;
    color: #666;
    font-style: italic;
}

.preview-content code {
    background: #f0f0f0;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 0.9em;
}

.preview-content pre {
    background: #1a1a2e;
    color: #eaeaea;
    padding: 15px;
    border-radius: 10px;
    overflow-x: auto;
    margin: 15px 0;
}

.preview-content pre code {
    background: none;
    padding: 0;
    color: inherit;
}

.preview-content img {
    max-width: 100%;
    border-radius: 10px;
    margin: 10px 0;
}

/* 图片容器及失败占位 */
.preview-content .img-wrapper {
    display: block;
    width: 100%;
}
.preview-content .img-fallback {
    display: none;
}
.preview-content .img-wrapper.img-failed img {
    display: none;
}
.preview-content .img-wrapper.img-failed .img-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 20px;
    background: #f5f5f5;
    border: 1px dashed #ccc;
    border-radius: 10px;
    color: #999;
    font-size: 12px;
    text-align: center;
    margin: 10px 0;
}
.preview-content .img-wrapper.img-failed .img-fallback a {
    color: var(--primary);
    font-size: 11px;
}

.preview-content a { color: var(--primary); text-decoration: none; }

.preview-content hr {
    border: none;
    border-top: 2px dashed #ddd;
    margin: 20px 0;
}

.preview-content table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.preview-content th, .preview-content td {
    border: 1px solid #ddd;
    padding: 8px 12px;
    text-align: left;
    word-break: break-word;
}

.preview-content th { background: #f5f5f5; }

/* 跨页续表标签 */
.table-cont-label {
    font-size: 11px;
    color: #888;
    text-align: right;
    margin: 0 0 2px;
    font-style: italic;
    line-height: 1.4;
    padding-right: 2px;
}

/* 手机/普通卡片预览 - 紧凑+横滑 */
.xhs-card:not(.pixel-page) .preview-content table {
    font-size: 12px;
    margin: 10px 0;
    white-space: nowrap;
}
.xhs-card:not(.pixel-page) .preview-content th,
.xhs-card:not(.pixel-page) .preview-content td {
    padding: 5px 8px;
    font-size: 12px;
    white-space: normal;
    word-break: break-word;
    min-width: 52px;
    max-width: 160px;
}

/* ==================== 卡片风格主题 ==================== */

.style-cute { background: linear-gradient(135deg, #FFF5F7, #FFE4EC); }
.style-cute .preview-content { color: #8B4513; }
.style-cute h1, .style-cute h2, .style-cute h3 { color: #D4508A; }

.style-fresh { background: linear-gradient(135deg, #F0FFF4, #E8F5E9); }
.style-fresh .preview-content { color: #2E5A3C; }
.style-fresh h1, .style-fresh h2, .style-fresh h3 { color: #4CAF50; }

.style-warm { background: linear-gradient(135deg, #FFF8E7, #FFE4B5); }
.style-warm .preview-content { color: #8B4513; }
.style-warm h1, .style-warm h2, .style-warm h3 { color: #FF9800; }

.style-bold { background: linear-gradient(135deg, #1a1a2e, #16213e); }
.style-bold .preview-content { color: #fff; }
.style-bold h1, .style-bold h2, .style-bold h3 { color: #FF6B6B; }
.style-bold blockquote { border-color: #FF6B6B; color: #FFB4B4; }

.style-minimal { background: linear-gradient(135deg, #FAFAFA, #F5F5F5); border: 1px solid #e0e0e0; }
.style-minimal .preview-content { color: #333; }
.style-minimal h1, .style-minimal h2, .style-minimal h3 { color: #000; }

.style-retro { background: linear-gradient(135deg, #F5DEB3, #DEB887); }
.style-retro .preview-content { color: #5D4037; }

.style-pop { background: linear-gradient(135deg, #FF9A9E, #FECFEF); }
.style-pop .preview-content { color: #C71585; }
.style-pop h1, .style-pop h2, .style-pop h3 { color: #FF1493; }

.style-notion { background: #FFFFFF; border: 2px solid #e0e0e0; }
.style-notion .preview-content { color: #333; }

.style-chalkboard { background: linear-gradient(135deg, #2D3436, #636E72); }
.style-chalkboard .preview-content { color: #fff; }
.style-chalkboard h1, .style-chalkboard h2, .style-chalkboard h3 { color: #FFD93D; }

.style-study-notes { background: linear-gradient(135deg, #FFFDE7, #FFF9C4); }
.style-study-notes .preview-content { color: #5D4037; }

.style-screen-print { background: linear-gradient(135deg, #E1BEE7, #CE93D8); }
.style-screen-print .preview-content { color: #4A148C; }

.style-sketch-notes { background: linear-gradient(135deg, #E8F5E9, #C8E6C9); border: 2px solid #4CAF50; }
.style-sketch-notes .preview-content { color: #1B5E20; }

.palette-macaron { background: linear-gradient(135deg, #FFD1DC, #B8E6FF, #D4FFD4, #FFE4B5) !important; }
.palette-warm { background: linear-gradient(135deg, #FFB347, #FF6B6B, #FFD93D) !important; }
.palette-warm .preview-content, .palette-warm h1, .palette-warm h2, .palette-warm h3 { color: #fff !important; }
.palette-neon { background: linear-gradient(135deg, #00FFFF, #FF00FF, #FFFF00) !important; }

/* ==================== 图注（通用）==================== */
.img-figure {
    margin: 4px 0 6px;
    display: block;
}

.img-caption {
    display: block;
    text-align: center;
    text-align-last: center;
    font-size: 0.75em;
    color: #888;
    font-style: italic;
    margin-top: 5px;
    line-height: 1.4;
}

.img-caption.caption-multi-line {
    text-align: justify;
    text-align-last: left;
    text-justify: inter-ideograph;
    overflow-wrap: anywhere;
}

.preview-content .mermaid-diagram {
    width: 100%;
    margin: 18px 0;
    padding: 14px;
    overflow: auto;
    box-sizing: border-box;
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border-color));
    border-radius: 10px;
    background: color-mix(in srgb, var(--bg-card) 92%, white 8%);
    text-align: center;
}

.preview-content .mermaid-diagram svg {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.preview-content .mermaid-error {
    padding: 10px;
    border-radius: 7px;
    background: rgba(239, 68, 68, .1);
    color: #b91c1c;
    font-size: 12px;
    text-align: left;
}

.preview-content blockquote.markdown-alert {
    position: relative;
    margin: 16px 0;
    padding: 12px 15px;
    border-left: 0 !important;
    border-radius: 9px;
    font-style: normal;
}

.preview-content .markdown-alert-title {
    margin-bottom: 5px;
    color: inherit;
    font-weight: 700;
    letter-spacing: .02em;
}

.preview-content .markdown-alert p:last-child {
    margin-bottom: 0;
}

.preview-content .markdown-alert-note {
    background: rgba(59, 130, 246, .08);
}

.preview-content .markdown-alert-tip {
    background: rgba(16, 185, 129, .08);
}

.preview-content .markdown-alert-important {
    background: rgba(139, 92, 246, .09);
}

.preview-content .markdown-alert-warning {
    background: rgba(245, 158, 11, .1);
}

.preview-content .markdown-alert-caution {
    background: rgba(239, 68, 68, .09);
}

.img-caption.caption-single-line {
    text-align: center;
    text-align-last: center;
}

/* ==================== academic - 学术文献笔记 ==================== */
.xhs-card.layout-academic {
    background: #ffffff;
    border: 1px solid #d8dee8;
    font-family: 'Georgia', 'Palatino', serif;
}

.xhs-card.layout-academic .preview-content {
    color: #1a202c;
    font-size: 13.5px;
    line-height: 1.85;
    padding: 24px 22px;
    counter-reset: section figure-count;
}

/* 论文标题 */
.xhs-card.layout-academic .preview-content h1 {
    font-size: 1.35em;
    color: #1a202c;
    font-weight: 700;
    text-align: center;
    border-bottom: 2px solid #2b6cb0;
    padding-bottom: 10px;
    margin: 0 0 16px;
    line-height: 1.4;
    letter-spacing: 0.01em;
}

/* 章节标题（自动编号）*/
.xhs-card.layout-academic .preview-content h2 {
    font-size: 1.05em;
    color: #2b6cb0;
    font-weight: 700;
    border-left: 4px solid #2b6cb0;
    padding-left: 10px;
    margin: 18px 0 8px;
    counter-increment: section;
    line-height: 1.4;
}

.xhs-card.layout-academic .preview-content h2::before {
    content: counter(section) ". ";
    color: #2b6cb0;
}

/* 小节标题 */
.xhs-card.layout-academic .preview-content h3 {
    font-size: 0.95em;
    color: #4a5568;
    font-weight: 600;
    margin: 12px 0 5px;
    font-style: italic;
}

/* 正文段落 */
.xhs-card.layout-academic .preview-content p {
    margin: 7px 0;
    text-align: justify;
    text-indent: 0;
}

/* 摘要/关键引用 - 蓝色区块 */
.xhs-card.layout-academic .preview-content blockquote {
    background: #ebf8ff;
    border-left: 4px solid #3182ce;
    border-radius: 0 6px 6px 0;
    padding: 10px 14px;
    margin: 12px 0;
    color: #2c5282;
    font-style: normal;
    font-size: 0.9em;
    line-height: 1.7;
}

.xhs-card.layout-academic .preview-content blockquote strong {
    color: #2b6cb0;
}

/* 关键词 / 术语 */
.xhs-card.layout-academic .preview-content code {
    background: #fff5f5;
    border: 1px solid #fed7d7;
    border-radius: 3px;
    padding: 1px 5px;
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 0.82em;
    color: #c53030;
}

/* 代码块（公式/数据）*/
.xhs-card.layout-academic .preview-content pre {
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 12px 14px;
    margin: 10px 0;
    overflow-x: auto;
}

.xhs-card.layout-academic .preview-content pre code {
    background: none;
    border: none;
    color: #2d3748;
    font-size: 0.85em;
    padding: 0;
}

/* 有序列表（研究步骤）*/
.xhs-card.layout-academic .preview-content ol {
    padding-left: 0;
    list-style: none;
    counter-reset: ol-counter;
    margin: 8px 0;
}

.xhs-card.layout-academic .preview-content ol li {
    counter-increment: ol-counter;
    padding: 5px 0 5px 30px;
    position: relative;
    border-bottom: 1px solid #edf2f7;
    color: #2d3748;
}

.xhs-card.layout-academic .preview-content ol li::before {
    content: counter(ol-counter);
    position: absolute;
    left: 0;
    top: 6px;
    width: 20px;
    height: 20px;
    background: #2b6cb0;
    color: white;
    border-radius: 50%;
    font-size: 11px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: sans-serif;
}

/* 无序列表（要点）*/
.xhs-card.layout-academic .preview-content ul {
    padding-left: 0;
    list-style: none;
    margin: 8px 0;
}

.xhs-card.layout-academic .preview-content ul li {
    padding: 4px 0 4px 18px;
    position: relative;
    color: #2d3748;
}

.xhs-card.layout-academic .preview-content ul li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: #3182ce;
    font-size: 0.9em;
}

/* 数据表格 */
.xhs-card.layout-academic .preview-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 0.82em;
    font-family: -apple-system, sans-serif;
}

.xhs-card.layout-academic .preview-content thead th {
    background: #2b6cb0;
    color: #ffffff;
    padding: 7px 10px;
    text-align: left;
    font-weight: 600;
    font-size: 0.88em;
    letter-spacing: 0.03em;
}

.xhs-card.layout-academic .preview-content tbody td {
    border: 1px solid #e2e8f0;
    padding: 6px 10px;
    color: #2d3748;
    vertical-align: top;
}

.xhs-card.layout-academic .preview-content tbody tr:nth-child(even) td {
    background: #f7fafc;
}

.xhs-card.layout-academic .preview-content tbody tr:hover td {
    background: #ebf8ff;
}

/* 图片 */
.xhs-card.layout-academic .preview-content img {
    max-width: 100%;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
    display: block;
    margin: 0 auto;
}

/* 显示图注 */
.xhs-card.layout-academic .img-caption {
    display: block;
    counter-increment: figure-count;
}

.xhs-card.layout-academic .img-caption::before {
    content: '图 ' counter(figure-count) '  ';
    font-weight: 600;
    color: #4a5568;
    font-style: normal;
}

/* 分割线 */
.xhs-card.layout-academic .preview-content hr {
    border: none;
    height: 1px;
    background: linear-gradient(to right, transparent, #cbd5e0, transparent);
    margin: 16px 0;
}

/* 加粗/关键词强调 */
.xhs-card.layout-academic .preview-content strong {
    color: #2b6cb0;
    font-weight: 700;
}

.xhs-card.layout-academic .preview-content em {
    color: #744210;
    font-style: italic;
}

/* ==================== 布局样式 ==================== */

/* sparse - 封面金句：居中大字 */
.xhs-card.layout-sparse .preview-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 220px;
    padding: 40px 30px;
}
.xhs-card.layout-sparse .preview-content h1 { font-size: 2em; margin-bottom: 16px; }
.xhs-card.layout-sparse .preview-content p { font-size: 1.1em; line-height: 1.9; }

/* dense - 知识卡片：紧凑 */
.xhs-card.layout-dense .preview-content { font-size: 12px; line-height: 1.5; }
.xhs-card.layout-dense .preview-content h1 { font-size: 1.3em; margin: 8px 0 5px; }
.xhs-card.layout-dense .preview-content h2 { font-size: 1.1em; margin: 6px 0 4px; }
.xhs-card.layout-dense .preview-content p { margin: 4px 0; }

/* list - 清单排行：美化列表 */
.xhs-card.layout-list .preview-content ul,
.xhs-card.layout-list .preview-content ol {
    list-style: none;
    padding-left: 0;
    counter-reset: list-counter;
}
.xhs-card.layout-list .preview-content li {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.xhs-card.layout-list .preview-content ol li::before {
    counter-increment: list-counter;
    content: counter(list-counter);
    background: var(--primary, #FE2C55);
    color: white;
    min-width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: bold;
    flex-shrink: 0;
}
.xhs-card.layout-list .preview-content ul li::before {
    content: '✦';
    color: var(--primary, #FE2C55);
    flex-shrink: 0;
}

/* comparison - 双栏对比 */
.xhs-card.layout-comparison .preview-content ul,
.xhs-card.layout-comparison .preview-content ol {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    list-style: none;
    padding-left: 0;
}
.xhs-card.layout-comparison .preview-content li {
    padding: 10px 8px;
    background: rgba(0,0,0,0.04);
    border-radius: 8px;
    font-size: 0.9em;
}

/* flow - 流程时间线 */
.xhs-card.layout-flow .preview-content ol {
    list-style: none;
    padding-left: 0;
    counter-reset: flow-counter;
    position: relative;
}
.xhs-card.layout-flow .preview-content ol::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    background: rgba(254, 44, 85, 0.25);
}
.xhs-card.layout-flow .preview-content ol li {
    padding-left: 38px;
    margin: 12px 0;
    position: relative;
    counter-increment: flow-counter;
}
.xhs-card.layout-flow .preview-content ol li::before {
    content: counter(flow-counter);
    position: absolute;
    left: 4px;
    top: 0;
    width: 18px;
    height: 18px;
    background: #FE2C55;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: bold;
}

/* mindmap - 思维导图风格 */
.xhs-card.layout-mindmap .preview-content h2 {
    text-align: center;
    border-bottom: 2px solid currentColor;
    padding-bottom: 6px;
    margin-bottom: 12px;
}
.xhs-card.layout-mindmap .preview-content ul {
    list-style: none;
    padding-left: 0;
}
.xhs-card.layout-mindmap .preview-content > .preview-content > ul > li,
.xhs-card.layout-mindmap .preview-content ul > li {
    border-left: 3px solid var(--primary, #FE2C55);
    padding: 4px 10px;
    margin: 6px 0;
    font-weight: bold;
}
.xhs-card.layout-mindmap .preview-content ul li ul li {
    font-weight: normal;
    font-size: 0.9em;
    border-left: 1px dashed #ddd;
    margin-left: 12px;
}

/* quadrant - 四象限 */
.xhs-card.layout-quadrant .preview-content ul,
.xhs-card.layout-quadrant .preview-content ol {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    list-style: none;
    padding-left: 0;
}
.xhs-card.layout-quadrant .preview-content li {
    padding: 10px;
    border-radius: 8px;
    font-size: 0.85em;
    background: rgba(0,0,0,0.04);
}
.xhs-card.layout-quadrant .preview-content li:nth-child(1) { background: rgba(254,44,85,0.1); }
.xhs-card.layout-quadrant .preview-content li:nth-child(2) { background: rgba(76,175,80,0.1); }
.xhs-card.layout-quadrant .preview-content li:nth-child(3) { background: rgba(33,150,243,0.1); }
.xhs-card.layout-quadrant .preview-content li:nth-child(4) { background: rgba(255,152,0,0.1); }

/* ==================== AI 创作面板 ==================== */
.ai-panel {
    background: var(--bg-light);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    transition: background 0.25s;
}

.ai-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 16px;
    cursor: pointer;
    font-size: 0.85em;
    color: var(--text-muted);
    user-select: none;
    transition: color 0.15s;
}

.ai-panel-header:hover { color: var(--primary); }

.ai-panel-body {
    display: none;
    padding: 12px 16px 14px;
    border-top: 1px solid var(--border-color);
    flex-direction: column;
    gap: 10px;
}

.ai-panel-body.open { display: flex; }

.ai-api-row {
    display: flex;
    gap: 6px;
    align-items: center;
}

.ai-api-row input {
    flex: 1;
    padding: 6px 10px;
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-light);
    font-size: 0.82em;
    outline: none;
    transition: border-color 0.15s;
}

.ai-api-row input:focus { border-color: var(--primary); }

.ai-api-row button {
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-dark);
    color: var(--text-muted);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.82em;
    white-space: nowrap;
    transition: all 0.15s;
}

.ai-api-row button:hover { border-color: var(--primary); color: var(--primary); }

.ai-skills-section { display: flex; flex-direction: column; gap: 8px; }

.ai-skills-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8em;
    color: var(--text-muted);
}

.btn-add-skill {
    padding: 3px 10px;
    border: 1px dashed var(--primary);
    background: transparent;
    color: var(--primary);
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.8em;
    transition: all 0.15s;
}

.btn-add-skill:hover { background: var(--primary); color: white; }

.ai-skills-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.skill-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 12px;
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    min-width: 72px;
    transition: all 0.15s;
    text-align: center;
}

.skill-card:hover { border-color: var(--primary); }

.skill-card.selected {
    border-color: var(--primary);
    background: rgba(254,44,85,0.1);
}

.skill-icon { font-size: 1.4em; line-height: 1; }
.skill-name { font-size: 0.78em; color: var(--text-light); margin-top: 3px; font-weight: 500; }
.skill-desc { font-size: 0.68em; color: var(--text-muted); margin-top: 1px; white-space: nowrap; }

.skill-delete {
    position: absolute;
    top: 2px;
    right: 4px;
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    padding: 1px 3px;
    border-radius: 3px;
    display: none;
}

.skill-card:hover .skill-delete { display: block; }
.skill-delete:hover { background: var(--primary); color: white; }

.ai-prompt-row {
    display: flex;
    gap: 8px;
}

.ai-prompt-row input {
    flex: 1;
    padding: 8px 12px;
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-light);
    font-size: 0.85em;
    outline: none;
    transition: border-color 0.15s;
}

.ai-prompt-row input:focus { border-color: var(--primary); }

.ai-generate-btn {
    padding: 8px 18px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85em;
    font-weight: bold;
    white-space: nowrap;
    transition: all 0.15s;
}

.ai-generate-btn:hover { background: var(--secondary); transform: translateY(-1px); }
.ai-generate-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* ==================== 技能弹窗 ==================== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9000;
    backdrop-filter: blur(2px);
}

.modal-overlay[style*="display:none"],
.modal-overlay[style*="display: none"] {
    pointer-events: none !important;
}

.modal-box {
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 24px 28px;
    width: 460px;
    max-width: 95vw;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}

.article-setup-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9500;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.38);
}

.article-setup-modal {
    width: min(628px, calc(100vw - 24px));
    background: var(--bg-light);
    color: var(--text-light);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

.article-setup-head,
.article-setup-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
}

.article-setup-head h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
}

.article-setup-close {
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
}

.article-setup-body {
    padding: 22px 32px 28px;
    display: grid;
    gap: 24px;
}

.article-setup-row {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    font-size: 16px;
}

.article-setup-row > span:first-child {
    color: var(--text-light);
}

.article-setup-folder,
.article-setup-title-input {
    width: 100%;
    height: 38px;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    background: var(--bg-dark);
    color: var(--text-light);
    padding: 0 12px;
    font-size: 15px;
    outline: none;
}

.article-setup-folder:focus,
.article-setup-title-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent);
}

.article-setup-title-wrap {
    position: relative;
}

.article-setup-title-input {
    padding-right: 72px;
}

.article-setup-count {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-style: normal;
    color: var(--text-muted);
    font-size: 14px;
}

.article-theme-segment {
    display: inline-flex;
    align-items: center;
}

.article-theme-segment button {
    min-width: 86px;
    height: 38px;
    padding: 0 18px;
    border: 1px solid var(--border-color);
    background: var(--bg-dark);
    color: var(--text-light);
    cursor: pointer;
    font-size: 15px;
}

.article-theme-segment button + button {
    margin-left: -1px;
}

.article-theme-segment button.active {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 12%, var(--bg-dark));
    color: var(--primary);
    position: relative;
    z-index: 1;
}

.article-setup-foot {
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid var(--border-color);
    border-bottom: 0;
    background: color-mix(in srgb, var(--bg-dark) 40%, transparent);
}

.article-setup-cancel,
.article-setup-submit {
    height: 40px;
    min-width: 76px;
    border-radius: 3px;
    font-size: 16px;
    cursor: pointer;
}

.article-setup-cancel {
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    color: var(--text-light);
}

.article-setup-submit {
    border: 1px solid var(--primary);
    background: var(--primary);
    color: #fff;
    font-weight: 700;
}

@media (max-width: 640px) {
    .article-setup-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .article-setup-body {
        padding: 18px;
    }

    .article-theme-segment {
        width: 100%;
    }

    .article-theme-segment button {
        flex: 1;
        padding: 0 10px;
    }
}

.modal-box-wide {
    width: min(760px, 95vw);
}

.image-bed-modal {
    max-height: 88vh;
}

.markdown-doc-modal {
    max-height: 88vh;
}

.markdown-doc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}

.markdown-doc-header h3 {
    margin: 0;
    font-size: 1.05em;
    color: var(--text-light);
}

.markdown-doc-header span,
.markdown-doc-current,
.markdown-doc-folder {
    color: var(--text-muted);
    font-size: 0.82em;
}

.markdown-doc-folder {
    padding: 8px 10px;
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-dark) 86%, transparent);
}

.markdown-doc-toolbar {
    display: grid;
    grid-template-columns: repeat(5, auto) minmax(180px, 1fr);
    gap: 8px;
    align-items: center;
}

.markdown-doc-toolbar input {
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-dark);
    color: var(--text-light);
    outline: none;
}

.markdown-doc-toolbar input:focus {
    border-color: var(--primary);
}

.markdown-doc-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: auto;
    padding-right: 3px;
}

.markdown-doc-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    padding: 11px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-dark) 92%, transparent);
}

.markdown-doc-item.active {
    border-color: color-mix(in srgb, var(--primary) 70%, var(--border-color));
    box-shadow: inset 3px 0 0 var(--primary);
}

.markdown-doc-title {
    color: var(--text-light);
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.markdown-doc-meta,
.markdown-doc-preview,
.markdown-doc-empty {
    color: var(--text-muted);
    font-size: 0.82em;
}

.markdown-doc-preview {
    margin-top: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.markdown-doc-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.markdown-doc-actions button {
    padding: 5px 8px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-light);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.82em;
}

.markdown-doc-actions button:hover {
    border-color: var(--primary);
    color: var(--primary);
}

@media (max-width: 900px) {
    .markdown-doc-toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .markdown-doc-toolbar input {
        grid-column: 1 / -1;
    }
}

.image-bed-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}

.image-bed-header h3 {
    margin: 0;
    font-size: 1.05em;
    color: var(--text-light);
}

.image-bed-header span {
    color: var(--text-muted);
    font-size: 0.82em;
    flex: 1;
    text-align: right;
}

.image-bed-close {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-dark);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.2em;
    line-height: 1;
    transition: all 0.15s;
}

.image-bed-close:hover {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

.image-bed-tools {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.image-bed-config {
    border: 1px solid var(--border-color);
    background: var(--bg-dark);
    border-radius: 8px;
    padding: 16px;
}

.image-bed-config-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.image-bed-config-row label {
    color: var(--text-muted);
    font-size: 0.78em;
}

.image-bed-config-row select {
    width: 220px;
    margin-top: 0;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    background: var(--bg-light);
    color: var(--text-light);
    outline: none;
}

.image-bed-config-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.image-bed-config-form label {
    display: grid;
    grid-template-columns: 150px 1fr;
    align-items: center;
    gap: 14px;
    color: var(--text-light);
    font-size: 0.88em;
}

.image-bed-config-form label span {
    text-align: right;
    white-space: nowrap;
}

.image-bed-config-form label span:first-child::first-letter {
    color: var(--primary);
}

.image-bed-config-form input {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-light);
    color: var(--text-light);
    outline: none;
    font-size: 0.96em;
}

.image-bed-config-form input:focus {
    border-color: var(--primary);
}

.image-bed-switch-row input[type="checkbox"] {
    width: 50px;
    height: 28px;
    appearance: none;
    background: rgba(255,255,255,0.16);
    border: none;
    border-radius: 999px;
    position: relative;
    cursor: pointer;
    transition: background 0.2s ease;
}

.image-bed-switch-row input[type="checkbox"]::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s ease;
}

.image-bed-switch-row input[type="checkbox"]:checked {
    background: var(--primary);
}

.image-bed-switch-row input[type="checkbox"]:checked::after {
    transform: translateX(22px);
}

.image-bed-config-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.image-bed-config-actions span {
    color: var(--text-muted);
    font-size: 0.76em;
}

.image-bed-error {
    border: 1px solid rgba(239, 68, 68, 0.35);
    background: rgba(239, 68, 68, 0.08);
    color: #fecaca;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.82em;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

.image-bed-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 50vh;
    overflow-y: auto;
    padding-right: 4px;
}

.image-bed-row {
    display: grid;
    grid-template-columns: 68px 1fr;
    gap: 12px;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-dark);
}

.image-bed-thumb {
    width: 68px;
    height: 68px;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 0.78em;
}

.image-bed-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-bed-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.image-bed-name {
    color: var(--text-light);
    font-weight: 600;
    font-size: 0.9em;
}

.image-bed-path {
    color: var(--text-muted);
    font-size: 0.76em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.image-bed-meta {
    color: var(--text-muted);
    font-size: 0.72em;
    opacity: 0.8;
}

.image-bed-url {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    background: var(--bg-light);
    color: var(--text-light);
    outline: none;
}

.image-bed-url:focus {
    border-color: var(--primary);
}

.image-bed-row-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.image-bed-row-actions button {
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    border-radius: 6px;
    padding: 5px 8px;
    cursor: pointer;
    font-size: 0.76em;
}

.image-bed-row-actions button:hover {
    color: var(--text-light);
    border-color: var(--primary);
}

.yxyz-publisher-modal {
    max-height: 86vh;
}

.yxyz-platform-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 46vh;
    overflow-y: auto;
}

.yxyz-toolbar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.yxyz-toolbar button {
    border: 1px solid var(--border-color);
    background: var(--bg-dark);
    color: var(--text-muted);
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
}

.yxyz-toolbar button:hover {
    color: var(--text-light);
    border-color: var(--primary);
}

.yxyz-selected-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px;
    border: 1px solid rgba(34, 197, 94, 0.28);
    background: rgba(34, 197, 94, 0.08);
    border-radius: 8px;
    color: var(--text-light);
}

.yxyz-selected-bar strong {
    margin-right: 2px;
}

.yxyz-chip {
    border: 1px solid rgba(34, 197, 94, 0.35);
    background: rgba(34, 197, 94, 0.12);
    color: #86efac;
    border-radius: 999px;
    padding: 4px 9px;
    cursor: pointer;
}

.yxyz-platform-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.yxyz-section-title {
    border: none;
    background: transparent;
    color: var(--text-light);
    font-weight: 700;
    padding: 4px 2px;
    text-align: left;
    cursor: pointer;
}

.yxyz-section-title small {
    color: var(--text-muted);
    font-weight: 400;
}

.yxyz-section-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.yxyz-platform-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-dark);
    border-radius: 8px;
    padding: 10px 12px;
    color: var(--text-light);
    cursor: pointer;
    min-width: 0;
}

.yxyz-platform-main {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    width: 100%;
}

.yxyz-platform-item input {
    accent-color: var(--primary);
    flex: 0 0 auto;
}

.yxyz-platform-item img {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    object-fit: contain;
    flex: 0 0 auto;
}

.yxyz-platform-name {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.yxyz-platform-item small,
.yxyz-login-status {
    color: var(--text-muted);
    font-size: 0.7em;
    flex: 0 0 auto;
    max-width: 96px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.yxyz-login-status {
    border: 0;
    background: transparent;
    padding: 2px 0;
    border-radius: 4px;
    line-height: 1.4;
    cursor: pointer;
    font-family: inherit;
}

.yxyz-login-status:hover {
    color: var(--primary);
    text-decoration: underline;
}

.yxyz-login-status.logged-in {
    color: #16a34a;
}

.yxyz-platform-item.logged-in {
    border-color: rgba(34, 197, 94, 0.35);
}

.yxyz-publish-status {
    margin-left: 34px;
    color: var(--text-muted);
    font-size: 0.72em;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.yxyz-publish-status.pending {
    color: #2563eb;
}

.yxyz-publish-status.success {
    color: #16a34a;
}

.yxyz-publish-status.error {
    color: #dc2626;
}

.image-bed-empty {
    color: var(--text-muted);
    background: var(--bg-dark);
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    padding: 18px;
    text-align: center;
}

.ai-image-modal {
    max-height: 90vh;
    overflow: auto;
}

.ai-image-tab-btn {
    border-color: color-mix(in srgb, var(--primary) 45%, var(--border-color));
    color: var(--primary);
}

.ai-image-tabs {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    flex-wrap: wrap;
    padding: 3px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-dark);
}

.ai-image-tabs button {
    min-width: 82px;
    padding: 7px 14px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.86em;
}

.ai-image-tabs button.active {
    background: var(--primary);
    color: #fff;
}

.ai-image-tab-panel {
    display: none;
    flex-direction: column;
    gap: 12px;
}

.ai-image-tab-panel.active {
    display: flex;
}

.ai-image-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.ai-image-grid label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--text-muted);
    font-size: 0.82em;
}

.ai-image-grid input,
.ai-image-grid select,
.ai-image-prompt-field textarea {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    background: var(--bg-dark);
    color: var(--text-light);
    outline: none;
}

.ai-image-grid input:focus,
.ai-image-grid select:focus,
.ai-image-prompt-field textarea:focus {
    border-color: var(--primary);
}

.ai-image-grid select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.ai-image-prompt-field {
    margin: 0;
}

.ai-draft-field textarea {
    min-height: 180px;
    resize: vertical;
}

.ai-image-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.ai-image-actions .btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.ai-reference-row {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: 8px;
    align-items: center;
}

.ai-reference-list {
    min-height: 34px;
    padding: 7px 9px;
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    background: var(--bg-dark);
    color: var(--text-muted);
    font-size: 0.82em;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.ai-reference-list span {
    max-width: 210px;
    padding: 3px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 12%, var(--bg-light));
    color: var(--text-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-image-result {
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-dark);
    color: var(--text-muted);
    font-size: 0.86em;
    white-space: pre-wrap;
}

.ai-image-result.result-success {
    border-color: rgba(34, 197, 94, 0.45);
    color: #86efac;
}

.ai-image-result.result-error {
    border-color: rgba(239, 68, 68, 0.45);
    color: #fca5a5;
}

.ai-image-preview {
    min-height: 240px;
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    background: var(--bg-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ai-image-preview-empty {
    padding: 24px;
    color: var(--text-muted);
    text-align: center;
}

.ai-image-preview-card {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(180px, 280px) 1fr;
    gap: 16px;
    align-items: center;
    padding: 14px;
    animation: aiImageFadeIn 0.28s ease both;
}

.ai-image-preview-card img {
    width: 100%;
    max-height: 360px;
    object-fit: contain;
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
}

.ai-image-preview-zoom {
    border: none;
    padding: 0;
    background: transparent;
    cursor: zoom-in;
}

.ai-image-preview-zoom img {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.ai-image-preview-zoom:hover img {
    transform: scale(1.01);
    box-shadow: 0 14px 34px rgba(0,0,0,0.18);
}

.ai-image-preview-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--text-light);
}

.ai-image-preview-meta span {
    color: var(--text-muted);
    font-size: 0.85em;
}

.ai-image-loading {
    width: 100%;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 24px;
    animation: aiImageFadeIn 0.35s ease both;
}

.ai-image-loading-frame {
    width: min(240px, 70%);
    aspect-ratio: 3 / 4;
    position: relative;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--primary) 38%, var(--border-color));
    border-radius: 12px;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.12), transparent 34%),
        linear-gradient(160deg, var(--bg-light), var(--bg-dark));
    box-shadow: 0 16px 40px rgba(0,0,0,0.28);
}

.ai-image-loading-glow {
    position: absolute;
    inset: 18%;
    border-radius: 50%;
    background: color-mix(in srgb, var(--primary) 50%, transparent);
    filter: blur(28px);
    opacity: 0.35;
    animation: aiImagePulse 2.2s ease-in-out infinite;
}

.ai-image-loading-scan {
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 0%, transparent 38%, rgba(255,255,255,0.28) 48%, transparent 58%, transparent 100%);
    transform: translateX(-120%);
    animation: aiImageScan 1.8s ease-in-out infinite;
}

.ai-image-loading-dots {
    position: absolute;
    left: 50%;
    bottom: 22px;
    display: flex;
    gap: 7px;
    transform: translateX(-50%);
}

.ai-image-loading-dots span {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--primary);
    opacity: 0.45;
    animation: aiImageDot 1.1s ease-in-out infinite;
}

.ai-image-loading-dots span:nth-child(2) {
    animation-delay: 0.15s;
}

.ai-image-loading-dots span:nth-child(3) {
    animation-delay: 0.3s;
}

.ai-image-loading-copy {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    color: var(--text-light);
}

.ai-image-loading-copy span {
    color: var(--text-muted);
    font-size: 0.82em;
}

@keyframes aiImageFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes aiImageScan {
    0% { transform: translateX(-120%); }
    58%, 100% { transform: translateX(120%); }
}

@keyframes aiImagePulse {
    0%, 100% { transform: scale(0.92); opacity: 0.28; }
    50% { transform: scale(1.12); opacity: 0.48; }
}

@keyframes aiImageDot {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.35; }
    40% { transform: translateY(-7px); opacity: 1; }
}

.ai-image-history-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--text-muted);
    font-size: 0.86em;
}

.ai-image-history {
    display: grid;
    gap: 14px;
}

.ai-history-section {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 10px;
}

.ai-history-section-title {
    grid-column: 1 / -1;
    color: var(--text-muted);
    font-size: 0.78em;
    font-weight: 800;
}

.ai-chat-session-history-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-dark);
}

.ai-chat-session-history-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ai-chat-session-history-main strong,
.ai-chat-session-history-main span,
.ai-chat-session-history-main small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-chat-session-history-main strong {
    color: var(--text-light);
    font-size: 0.9em;
}

.ai-chat-session-history-main span,
.ai-chat-session-history-main small {
    color: var(--text-muted);
    font-size: 0.75em;
}

.ai-chat-session-history-item button {
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-light);
    color: var(--text-light);
    cursor: pointer;
    font-size: 0.78em;
}

.ai-chat-session-history-item button:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.ai-image-history-item {
    display: grid;
    grid-template-columns: 82px 1fr;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-dark);
}

.ai-image-history-thumb {
    width: 82px;
    height: 110px;
    border: none;
    padding: 0;
    border-radius: 7px;
    background: rgba(255,255,255,0.04);
    overflow: hidden;
    cursor: pointer;
}

.ai-image-history-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ai-image-history-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ai-image-history-info strong,
.ai-image-history-info span,
.ai-image-history-info small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-image-history-info strong {
    color: var(--text-light);
    font-size: 0.9em;
}

.ai-image-history-info span,
.ai-image-history-info small {
    color: var(--text-muted);
    font-size: 0.75em;
}

.ai-image-history-info button {
    margin: 4px 4px 0 0;
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background: var(--bg-light);
    color: var(--text-light);
    cursor: pointer;
    font-size: 0.76em;
}

.ai-image-history-info button:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* codex v114: make the AI helper calmer: chat first, tools as a secondary workbench. */
.ai-chat-modal {
    width: min(1280px, 96vw);
    height: min(840px, 92vh);
    max-height: 92vh;
    padding: 0;
    overflow: hidden;
    background: var(--bg-light);
}

.ai-chat-shell {
    min-height: 0;
    height: 100%;
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    overflow: hidden;
}

.ai-chat-sidebar {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 16px 10px;
    border-right: 1px solid var(--border-color);
    background: var(--bg-dark);
}

.ai-chat-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    text-align: center;
}

.ai-chat-orb,
.ai-chat-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 999px;
    color: #fff;
    background:
        radial-gradient(circle at 28% 24%, rgba(255,255,255,0.45), transparent 28%),
        linear-gradient(135deg, var(--primary), #7c3aed);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--primary) 26%, transparent);
    font-weight: 800;
    letter-spacing: -0.03em;
}

.ai-chat-orb {
    width: 42px;
    height: 42px;
}

.ai-chat-avatar {
    width: 30px;
    height: 30px;
    font-size: 0.78em;
}

.ai-chat-brand strong {
    display: block;
    color: var(--text-light);
    font-size: 0.82em;
    line-height: 1.2;
}

.ai-chat-brand span,
.ai-chat-sidebar-card span,
.ai-chat-sidebar-card p {
    color: var(--text-muted);
    font-size: 0.78em;
}

.ai-chat-nav.ai-image-tabs {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0;
    border: 0;
    background: transparent;
}

.ai-chat-nav.ai-image-tabs button {
    width: 100%;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 12px;
    text-align: left;
    color: var(--text-muted);
    background: transparent;
    font-size: 0.9em;
}

.ai-chat-nav.ai-image-tabs button:hover {
    border-color: color-mix(in srgb, var(--primary) 34%, var(--border-color));
    background: color-mix(in srgb, var(--primary) 7%, transparent);
    color: var(--text-light);
}

.ai-chat-nav.ai-image-tabs button.active {
    border-color: color-mix(in srgb, var(--primary) 42%, var(--border-color));
    background: color-mix(in srgb, var(--primary) 14%, var(--bg-light));
    color: var(--primary);
    box-shadow: inset 3px 0 0 var(--primary);
}

.ai-chat-sidebar-card {
    display: none;
    margin-top: auto;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border-color));
    border-radius: 14px;
    background: color-mix(in srgb, var(--primary) 7%, transparent);
}

.ai-chat-sidebar-card span {
    display: block;
    margin-bottom: 6px;
    color: var(--text-light);
    font-weight: 700;
}

.ai-chat-sidebar-card p {
    margin: 0;
    line-height: 1.55;
}

.ai-chat-main {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 132px;
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "header header"
        "messages tools"
        "input input";
    background: color-mix(in srgb, var(--bg-light) 94%, var(--bg-dark));
    overflow: hidden;
}

.ai-chat-main:has(.ai-chat-workbench:not(.ai-chat-tools-collapsed)) {
    grid-template-columns: minmax(420px, 1fr) minmax(360px, 42%);
}

.ai-chat-header.image-bed-header {
    grid-area: header;
    padding: 16px 18px 14px;
    border-bottom: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--bg-light) 94%, transparent);
}

.ai-chat-header.image-bed-header > div {
    min-width: 0;
}

.ai-chat-header.image-bed-header h3 {
    font-size: 1.15em;
}

.ai-chat-header.image-bed-header span {
    display: block;
    margin-top: 3px;
    text-align: left;
    flex: initial;
}

.ai-chat-header-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
}

.ai-chat-header-actions .btn {
    min-height: 30px;
    padding: 0 10px;
    font-size: 0.78em;
}

.ai-chat-tool-row.ai-image-tabs {
    grid-area: tools;
    width: auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 14px 12px;
    border: 0;
    border-left: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
    background: color-mix(in srgb, var(--bg-light) 92%, transparent);
    overflow: auto;
    scrollbar-width: thin;
}

.ai-chat-tool-row.ai-image-tabs button {
    flex: 0 0 auto;
    width: 100%;
    min-height: 34px;
    padding: 0 13px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-dark);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.82em;
    font-weight: 700;
    white-space: nowrap;
}

.ai-chat-tool-row.ai-image-tabs button:hover {
    border-color: color-mix(in srgb, var(--primary) 38%, var(--border-color));
    color: var(--text-light);
    background: color-mix(in srgb, var(--primary) 8%, var(--bg-dark));
}

.ai-chat-tool-row.ai-image-tabs button.active {
    border-color: color-mix(in srgb, var(--primary) 54%, var(--border-color));
    background: color-mix(in srgb, var(--primary) 14%, var(--bg-light));
    color: var(--primary);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--primary) 14%, transparent);
}

.ai-chat-tool-row .ai-chat-tool-settings {
    margin: auto 0 0;
}

.ai-chat-main:has(.ai-chat-workbench:not(.ai-chat-tools-collapsed)) .ai-chat-tool-row.ai-image-tabs {
    height: auto;
    min-height: 57px;
    flex-direction: row;
    align-items: center;
    padding: 10px 14px;
    border-left: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
    overflow-x: auto;
    overflow-y: hidden;
}

.ai-chat-main:has(.ai-chat-workbench:not(.ai-chat-tools-collapsed)) .ai-chat-tool-row.ai-image-tabs button {
    width: auto;
    border-radius: 999px;
    white-space: nowrap;
}

.ai-chat-main:has(.ai-chat-workbench:not(.ai-chat-tools-collapsed)) .ai-chat-tool-row .ai-chat-tool-settings {
    margin: 0 0 0 auto;
}

.ai-chat-messages {
    grid-area: messages;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: auto;
    background: color-mix(in srgb, var(--bg-light) 96%, var(--bg-dark));
}

.ai-chat-thread {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px clamp(18px, 4vw, 52px);
}

.ai-chat-message {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    max-width: 760px;
}

.ai-chat-message-user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.ai-chat-message-user .ai-chat-avatar {
    background:
        radial-gradient(circle at 28% 24%, rgba(255,255,255,0.42), transparent 28%),
        linear-gradient(135deg, #64748b, #0f172a);
    box-shadow: 0 10px 28px rgba(15,23,42,0.16);
}

.ai-chat-message-user .ai-chat-bubble {
    border-top-left-radius: 16px;
    border-top-right-radius: 6px;
    background: color-mix(in srgb, var(--primary) 12%, var(--bg-light));
}

.ai-chat-bubble,
.ai-chat-status {
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    border-top-left-radius: 6px;
    background: color-mix(in srgb, var(--bg-dark) 62%, var(--bg-light));
    color: var(--text-light);
    box-shadow: 0 10px 28px rgba(0,0,0,0.08);
}

.ai-chat-bubble strong {
    display: block;
    margin-bottom: 4px;
}

.ai-chat-bubble p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.55;
}

.ai-chat-loading {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 6px;
}

.ai-chat-loading span {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--primary);
    opacity: 0.45;
    animation: aiImageDot 1.1s ease-in-out infinite;
}

.ai-chat-loading span:nth-child(2) { animation-delay: 0.15s; }
.ai-chat-loading span:nth-child(3) { animation-delay: 0.3s; }

.ai-chat-markdown-preview {
    max-height: 220px;
    margin: 8px 0 10px;
    padding: 10px 12px;
    overflow: auto;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-dark);
    color: var(--text-light);
    font: 12px/1.55 'Monaco', 'Menlo', Consolas, monospace;
    white-space: pre-wrap;
}

.ai-chat-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 8px;
}

.ai-chat-card-actions button {
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-light);
    color: var(--text-light);
    cursor: pointer;
    font-size: 0.78em;
}

.ai-chat-card-actions button:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.ai-chat-image-card {
    width: min(240px, 100%);
    display: block;
    padding: 0;
    margin: 8px 0 10px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--bg-dark);
    cursor: zoom-in;
}

.ai-chat-image-card img {
    width: 100%;
    max-height: 260px;
    display: block;
    object-fit: contain;
}

.ai-chat-status.ai-image-result {
    width: fit-content;
    max-width: min(760px, 100%);
    margin-left: 40px;
    border-radius: 14px;
    border-top-left-radius: 6px;
}

.ai-chat-input-panel {
    grid-area: input;
    padding: 10px clamp(18px, 4vw, 52px) 18px;
    border-top: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
    background: color-mix(in srgb, var(--bg-light) 94%, transparent);
}

.ai-chat-context-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 0 0;
    color: var(--text-muted);
    font-size: 0.76em;
}

.ai-chat-context-row span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-chat-context-row button,
.ai-chat-suggestion-row button {
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--bg-dark) 70%, var(--bg-light));
    color: var(--text-muted);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.ai-chat-context-row button {
    flex: 0 0 auto;
    min-height: 26px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 0.94em;
}

.ai-chat-suggestion-row {
    display: flex;
    gap: 6px;
    padding: 0 0 8px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.ai-chat-suggestion-row button {
    flex: 0 0 auto;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 0.76em;
    white-space: nowrap;
}

.ai-chat-context-row button:hover,
.ai-chat-suggestion-row button:hover {
    border-color: color-mix(in srgb, var(--primary) 42%, var(--border-color));
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, var(--bg-dark));
}

.ai-chat-mode-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 0 8px;
}

.ai-chat-mode-row button {
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-dark);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.78em;
}

.ai-chat-mode-row button.active {
    border-color: color-mix(in srgb, var(--primary) 50%, var(--border-color));
    background: color-mix(in srgb, var(--primary) 12%, var(--bg-light));
    color: var(--primary);
}

.ai-chat-input-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border-color));
    border-radius: 18px;
    background: var(--bg-dark);
    box-shadow: 0 14px 34px rgba(0,0,0,0.1);
}

.ai-chat-input-box textarea {
    width: 100%;
    min-height: 54px;
    max-height: 150px;
    padding: 6px 4px;
    resize: none;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--text-light);
    line-height: 1.55;
}

.ai-chat-input-actions {
    display: flex;
    gap: 7px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.ai-chat-input-actions .btn {
    min-height: 34px;
}

.ai-chat-send-hint {
    color: var(--text-muted);
    font-size: 0.72em;
    white-space: nowrap;
}

#aiChatSendBtn:disabled {
    opacity: 0.68;
    cursor: wait;
}

.ai-chat-workbench {
    grid-area: tools;
    align-self: stretch;
    min-height: 0;
    max-height: none;
    height: calc(100% - 57px);
    margin-top: 57px;
    padding: 14px;
    overflow: auto;
    border-left: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
    border-bottom: 0;
    background: color-mix(in srgb, var(--bg-light) 94%, transparent);
}

.ai-chat-workbench.ai-chat-tools-collapsed {
    display: none;
}

.ai-chat-workbench .ai-image-tab-panel {
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-light) 88%, var(--bg-dark));
    box-shadow: none;
}

.ai-chat-section-title {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 4px;
}

.ai-chat-section-title strong {
    color: var(--text-light);
    font-size: 1em;
}

.ai-chat-section-title span {
    color: var(--text-muted);
    font-size: 0.82em;
    text-align: right;
}

.ai-chat-composer textarea,
.ai-chat-answer textarea {
    border-radius: 14px;
    line-height: 1.6;
}

.ai-chat-composer textarea {
    min-height: 142px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--bg-dark) 88%, transparent), var(--bg-dark));
}

.ai-chat-answer textarea {
    min-height: 188px;
}

.ai-chat-modal .ai-image-preview {
    min-height: 210px;
    border-radius: 16px;
}

.workspace-docked-panel .ai-chat-modal {
    height: 100%;
    width: 100%;
    padding: 0;
}

.workspace-docked-panel .ai-chat-shell {
    grid-template-columns: 1fr;
}

.workspace-docked-panel .ai-chat-sidebar {
    display: none;
}

.workspace-docked-panel .ai-chat-tool-row.ai-image-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    height: auto;
    padding: 8px 12px;
    border-left: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
    overflow-x: auto;
}

.workspace-docked-panel .ai-chat-tool-row.ai-image-tabs button {
    width: auto;
    padding: 8px 6px;
    text-align: center;
    font-size: 0.78em;
    border-radius: 999px;
}

.workspace-docked-panel .ai-chat-tool-row .ai-chat-tool-settings {
    margin: 0;
}

.workspace-docked-panel .ai-chat-main:has(.ai-chat-workbench:not(.ai-chat-tools-collapsed)) .ai-chat-tool-row .ai-chat-tool-settings {
    margin: 0;
}

.workspace-docked-panel .ai-chat-tool-row.ai-image-tabs button.active {
    box-shadow: inset 0 -3px 0 var(--primary);
}

.workspace-docked-panel .ai-chat-main {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(0, auto) minmax(120px, 1fr) auto;
    grid-template-areas:
        "header"
        "tools"
        "workbench"
        "messages"
        "input";
}

.workspace-docked-panel .ai-chat-header.image-bed-header {
    position: static;
    margin: 0;
    padding: 12px;
}

.workspace-docked-panel .ai-chat-header-actions .btn {
    display: none;
}

.workspace-docked-panel .ai-chat-messages {
    max-height: none;
}

.workspace-docked-panel .ai-chat-thread {
    padding: 14px 12px;
}

.workspace-docked-panel .ai-chat-input-panel {
    padding: 0 12px 12px;
}

.workspace-docked-panel .ai-chat-context-row {
    align-items: flex-start;
}

.workspace-docked-panel .ai-chat-context-row span {
    white-space: normal;
    line-height: 1.35;
}

.workspace-docked-panel .ai-chat-mode-row {
    padding-top: 8px;
}

.workspace-docked-panel .ai-chat-input-box {
    grid-template-columns: 1fr;
    border-radius: 16px;
}

.workspace-docked-panel .ai-chat-input-actions {
    justify-content: space-between;
}

.workspace-docked-panel .ai-chat-workbench {
    grid-area: workbench;
    height: auto;
    max-height: min(300px, 36vh);
    margin-top: 0;
    padding: 10px 12px;
    border-left: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
}

.workspace-docked-panel .ai-chat-workbench .ai-image-tab-panel {
    padding: 12px;
    border-radius: 8px;
}

.workspace-docked-panel .ai-chat-suggestion-row {
    padding-bottom: 6px;
}

.workspace-docked-panel .ai-chat-suggestion-row button,
.workspace-docked-panel .ai-chat-mode-row button {
    min-height: 26px;
    padding-inline: 9px;
}

.workspace-docked-panel .ai-chat-input-box textarea {
    min-height: 44px;
    max-height: 112px;
}

.workspace-docked-panel .ai-chat-send-hint {
    display: none;
}

@media (max-width: 880px) {
    .ai-chat-modal {
        height: min(860px, 94vh);
    }

    .ai-chat-shell {
        grid-template-columns: 1fr;
    }

    .ai-chat-sidebar {
        display: none;
    }

    .ai-chat-main,
    .ai-chat-main:has(.ai-chat-workbench:not(.ai-chat-tools-collapsed)) {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto minmax(0, auto) minmax(0, 1fr) auto;
        grid-template-areas:
            "header"
            "tools"
            "workbench"
            "messages"
            "input";
    }

    .ai-chat-tool-row.ai-image-tabs {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        width: 100%;
        height: auto;
        padding: 8px 12px;
        border-left: 0;
        border-bottom: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
    }

    .ai-chat-tool-row.ai-image-tabs button {
        width: auto;
        text-align: center;
        padding-inline: 6px;
        border-radius: 999px;
    }

    .ai-chat-workbench {
        grid-area: workbench;
        height: auto;
        max-height: min(300px, 36vh);
        margin-top: 0;
        padding: 10px 12px;
        border-left: 0;
        border-bottom: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
    }

    .ai-chat-thread,
    .ai-chat-input-panel {
        padding-inline: 14px;
    }
}

/* codex v115: implement the AI planning board layout in the real assistant panel. */
.ai-chat-modal {
    width: min(1280px, 96vw);
    height: min(840px, 92vh);
    border-radius: 8px;
}

.ai-chat-shell {
    grid-template-columns: 76px minmax(0, 1fr);
}

.ai-chat-sidebar {
    padding: 16px 8px;
}

.ai-chat-main {
    grid-template-columns: minmax(0, 1fr) 132px;
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "header tools"
        "messages tools"
        "input input";
}

.ai-chat-main:has(.ai-chat-workbench:not(.ai-chat-tools-collapsed)) {
    grid-template-columns: minmax(420px, 1fr) minmax(360px, 42%);
}

.ai-chat-header.image-bed-header {
    min-height: 62px;
    padding: 13px 18px;
}

.ai-chat-tool-row.ai-image-tabs {
    height: 100%;
    padding: 14px 10px;
    background: color-mix(in srgb, var(--bg-light) 96%, var(--bg-dark));
}

.ai-chat-main:has(.ai-chat-workbench:not(.ai-chat-tools-collapsed)) .ai-chat-tool-row.ai-image-tabs {
    min-height: 56px;
    padding: 10px 14px;
}

.ai-chat-workbench {
    height: calc(100% - 56px);
    margin-top: 56px;
    padding: 14px;
}

.ai-chat-workbench .ai-image-tab-panel {
    gap: 12px;
}

.ai-chat-messages {
    background: var(--bg-light);
}

.ai-chat-thread {
    padding: 24px clamp(22px, 4vw, 52px);
}

.ai-chat-input-panel {
    padding: 10px clamp(22px, 4vw, 52px) 14px;
}

.ai-chat-input-box {
    border-radius: 8px;
}

.ai-chat-bubble,
.ai-chat-status,
.ai-chat-markdown-preview,
.ai-chat-image-card,
.ai-chat-card-actions button,
.ai-chat-workbench .ai-image-tab-panel,
.ai-chat-modal .ai-image-preview {
    border-radius: 8px;
}

.workspace-docked-panel .ai-chat-modal {
    border-radius: 0;
}

.workspace-docked-panel .ai-chat-shell {
    grid-template-columns: 1fr;
}

.workspace-docked-panel .ai-chat-main {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
        "header"
        "tools"
        "messages"
        "input";
}

.workspace-docked-panel .ai-chat-main:has(.ai-chat-workbench:not(.ai-chat-tools-collapsed)) {
    grid-template-columns: 1fr;
    grid-template-rows: auto 48px minmax(132px, 24vh) minmax(0, 1fr) auto;
    grid-template-areas:
        "header"
        "tools"
        "workbench"
        "messages"
        "input";
}

.workspace-docked-panel .ai-chat-header.image-bed-header {
    min-height: 58px;
    padding: 10px 12px;
}

.workspace-docked-panel .ai-chat-header,
.workspace-docked-panel .ai-chat-tool-row,
.workspace-docked-panel .ai-chat-workbench,
.workspace-docked-panel .ai-chat-messages,
.workspace-docked-panel .ai-chat-input-panel {
    min-width: 0;
    width: 100%;
    max-width: 100%;
}

.workspace-docked-panel .ai-chat-header.image-bed-header h3 {
    font-size: 1em;
}

.workspace-docked-panel .ai-chat-header.image-bed-header span {
    display: block;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.76em;
}

.workspace-docked-panel .ai-chat-header-actions .btn[data-ai-chat-tools-toggle] {
    display: inline-flex;
    min-width: 48px;
    justify-content: center;
}

.workspace-docked-panel .ai-chat-tool-row.ai-image-tabs {
    grid-area: tools;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    gap: 6px;
    min-height: 48px;
    height: 48px;
    padding: 6px 10px;
    border-left: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
    background: color-mix(in srgb, var(--bg-light) 96%, var(--bg-dark));
    overflow: hidden;
}

.workspace-docked-panel .ai-chat-tool-row.ai-image-tabs button,
.workspace-docked-panel .ai-chat-main:has(.ai-chat-workbench:not(.ai-chat-tools-collapsed)) .ai-chat-tool-row.ai-image-tabs button {
    width: auto;
    min-width: 0;
    min-height: 34px;
    padding: 0 8px;
    border-radius: 999px;
    text-align: center;
    font-size: 0.76em;
}

.workspace-docked-panel .ai-chat-tool-row .ai-chat-tool-settings,
.workspace-docked-panel .ai-chat-main:has(.ai-chat-workbench:not(.ai-chat-tools-collapsed)) .ai-chat-tool-row .ai-chat-tool-settings {
    margin: 0;
}

.workspace-docked-panel .ai-chat-workbench {
    grid-area: workbench;
    height: auto;
    max-height: none;
    margin-top: 0;
    padding: 8px 10px;
    border-left: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
    overflow: auto;
}

.workspace-docked-panel .ai-chat-workbench.ai-chat-tools-collapsed {
    display: none;
}

.workspace-docked-panel .ai-chat-workbench .ai-image-tab-panel {
    gap: 8px;
    padding: 10px;
    border-radius: 8px;
    box-shadow: none;
}

.workspace-docked-panel .ai-chat-section-title {
    align-items: flex-start;
    padding-bottom: 0;
}

.workspace-docked-panel .ai-chat-section-title strong {
    font-size: 0.9em;
}

.workspace-docked-panel .ai-chat-section-title span {
    display: none;
}

.workspace-docked-panel .ai-image-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.workspace-docked-panel .ai-image-grid label {
    gap: 4px;
    font-size: 0.74em;
}

.workspace-docked-panel .ai-image-grid input,
.workspace-docked-panel .ai-image-grid select,
.workspace-docked-panel .ai-image-prompt-field textarea {
    padding: 7px 8px;
    border-radius: 7px;
    font-size: 0.86em;
}

.workspace-docked-panel .ai-chat-composer textarea {
    min-height: 74px;
    max-height: 116px;
}

.workspace-docked-panel .ai-draft-field textarea {
    min-height: 86px;
}

.workspace-docked-panel .ai-chat-answer textarea {
    min-height: 92px;
}

.workspace-docked-panel .ai-reference-row {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.workspace-docked-panel .ai-reference-list {
    grid-column: 1 / -1;
    min-height: 30px;
    padding: 5px 7px;
}

.workspace-docked-panel .ai-image-actions {
    gap: 6px;
}

.workspace-docked-panel .ai-image-actions .btn {
    min-height: 30px;
    padding: 0 9px;
    font-size: 0.76em;
}

.workspace-docked-panel .ai-chat-modal .ai-image-preview {
    min-height: 112px;
}

.workspace-docked-panel .ai-image-preview-card {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px;
}

.workspace-docked-panel .ai-image-preview-card img {
    max-height: 148px;
}

.workspace-docked-panel .ai-chat-messages {
    min-height: 0;
    max-height: none;
    background: var(--bg-light);
}

.workspace-docked-panel .ai-chat-thread {
    gap: 10px;
    padding: 14px 12px;
}

.workspace-docked-panel .ai-chat-message {
    max-width: 100%;
    width: 100%;
    min-width: 0;
}

.workspace-docked-panel .ai-chat-avatar {
    width: 28px;
    height: 28px;
    font-size: 0.72em;
}

.workspace-docked-panel .ai-chat-bubble {
    min-width: 0;
    max-width: calc(100% - 38px);
    padding: 10px 12px;
    line-height: 1.52;
    overflow-wrap: anywhere;
}

.workspace-docked-panel .ai-chat-bubble p {
    line-height: 1.52;
}

.workspace-docked-panel .ai-chat-input-panel {
    padding: 8px 10px 10px;
}

.workspace-docked-panel .ai-chat-context-row {
    gap: 8px;
    padding: 0;
    font-size: 0.72em;
}

.workspace-docked-panel .ai-chat-context-row span {
    max-height: 32px;
    overflow: hidden;
    line-height: 1.35;
}

.workspace-docked-panel .ai-chat-context-row button {
    min-height: 24px;
    padding: 0 7px;
    font-size: 0.86em;
}

.workspace-docked-panel .ai-chat-mode-row {
    gap: 5px;
    padding: 6px 0 5px;
}

.workspace-docked-panel .ai-chat-suggestion-row {
    gap: 5px;
    max-height: 30px;
    padding: 0 0 6px;
}

.workspace-docked-panel .ai-chat-suggestion-row button,
.workspace-docked-panel .ai-chat-mode-row button {
    min-height: 24px;
    padding: 0 8px;
    font-size: 0.72em;
}

.workspace-docked-panel .ai-chat-input-box {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: end;
    padding: 8px;
    border-radius: 8px;
}

.workspace-docked-panel .ai-chat-input-box textarea {
    min-height: 46px;
    max-height: 92px;
    padding: 4px 2px;
    line-height: 1.48;
}

.workspace-docked-panel .ai-chat-input-actions {
    flex-wrap: nowrap;
    gap: 6px;
    justify-content: flex-end;
}

.workspace-docked-panel .ai-chat-input-actions .btn {
    min-height: 34px;
    padding: 0 10px;
}

.workspace-docked-panel .ai-chat-send-hint {
    display: none;
}

.workspace-docked-panel .ai-image-history {
    grid-template-columns: 1fr;
}

/* codex v116: integrate draft/image controls into the chat composer. */
.ai-chat-main {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "header"
        "messages"
        "input";
}

.ai-chat-main:has(.ai-chat-workbench:not(.ai-chat-tools-collapsed)) {
    grid-template-columns: minmax(420px, 1fr) minmax(360px, 42%);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "header workbench"
        "messages workbench"
        "input input";
}

.ai-chat-tool-row.ai-image-tabs,
.ai-chat-main:has(.ai-chat-workbench:not(.ai-chat-tools-collapsed)) .ai-chat-tool-row.ai-image-tabs {
    display: none;
}

.ai-chat-workbench,
.ai-chat-main:has(.ai-chat-workbench:not(.ai-chat-tools-collapsed)) .ai-chat-workbench {
    grid-area: workbench;
    height: auto;
    margin-top: 0;
    max-height: none;
    align-self: stretch;
    border-left: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
    border-bottom: 0;
}

.ai-chat-input-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ai-chat-preflight {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 12px;
    min-width: 0;
    padding: 7px 0 0;
    border-top: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
}

.ai-chat-preflight .ai-chat-mode-row {
    flex: 1 1 190px;
    min-width: 0;
    padding: 0;
}

.ai-chat-preflight-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1 1 360px;
    min-width: 0;
    gap: 6px;
    flex-wrap: wrap;
}

.ai-chat-preflight-actions button {
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-dark);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.74em;
    font-weight: 700;
    white-space: nowrap;
}

.ai-chat-preflight-actions button:hover {
    border-color: color-mix(in srgb, var(--primary) 38%, var(--border-color));
    color: var(--text-light);
    background: color-mix(in srgb, var(--primary) 8%, var(--bg-dark));
}

.ai-chat-preflight-actions button.active {
    border-color: color-mix(in srgb, var(--primary) 52%, var(--border-color));
    background: color-mix(in srgb, var(--primary) 14%, var(--bg-light));
    color: var(--primary);
}

.workspace-docked-panel .ai-chat-main {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "header"
        "messages"
        "input";
}

.workspace-docked-panel .ai-chat-main:has(.ai-chat-workbench:not(.ai-chat-tools-collapsed)) {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(132px, 25vh) minmax(0, 1fr) auto;
    grid-template-areas:
        "header"
        "workbench"
        "messages"
        "input";
}

.workspace-docked-panel .ai-chat-tool-row.ai-image-tabs,
.workspace-docked-panel .ai-chat-main:has(.ai-chat-workbench:not(.ai-chat-tools-collapsed)) .ai-chat-tool-row.ai-image-tabs {
    display: none;
}

.workspace-docked-panel .ai-chat-workbench,
.workspace-docked-panel .ai-chat-main:has(.ai-chat-workbench:not(.ai-chat-tools-collapsed)) .ai-chat-workbench {
    grid-area: workbench;
    height: auto;
    margin-top: 0;
    max-height: min(270px, 34vh);
    border-left: 0;
}

.workspace-docked-panel .ai-chat-input-panel {
    gap: 6px;
}

.workspace-docked-panel .ai-chat-preflight {
    gap: 6px;
    padding-top: 6px;
}

.workspace-docked-panel .ai-chat-preflight .ai-chat-mode-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    flex: 1 1 100%;
    gap: 5px;
    padding: 0;
}

.workspace-docked-panel .ai-chat-preflight-actions {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    flex: 1 1 100%;
    gap: 5px;
}

.workspace-docked-panel .ai-chat-preflight-actions button {
    min-width: 0;
    min-height: 25px;
    padding: 0 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.68em;
}

/* codex v117: ChatGPT-style compact composer with progressive tool disclosure. */
.ai-chat-input-box.ai-chatgpt-composer {
    position: relative;
    display: flex;
    grid-template-columns: none;
    flex-direction: column;
    gap: 9px;
    padding: 12px 12px 10px;
    border-radius: 18px;
    border-color: color-mix(in srgb, var(--border-color) 86%, var(--primary));
    background: color-mix(in srgb, var(--bg-light) 96%, var(--bg-dark));
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
}

.ai-chatgpt-composer textarea {
    min-height: 54px;
    max-height: 150px;
    padding: 4px 6px;
    border: 0;
    background: transparent;
    color: var(--text-light);
    line-height: 1.55;
    resize: none;
}

.ai-chatgpt-composer textarea:focus {
    outline: none;
}

.ai-chat-composer-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.ai-chat-composer-left,
.ai-chat-composer-right {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 7px;
}

.ai-chat-composer-left {
    flex: 1 1 auto;
}

.ai-chat-composer-right {
    flex: 0 0 auto;
    justify-content: flex-end;
}

.ai-chat-icon-button,
.ai-chat-action-pill {
    border: 1px solid var(--border-color);
    background: var(--bg-dark);
    color: var(--text-muted);
    cursor: pointer;
    font-weight: 700;
}

.ai-chat-icon-button {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    padding: 0;
    border-radius: 999px;
    font-size: 1.25em;
    line-height: 1;
}

.ai-chat-icon-button:hover,
.ai-chat-icon-button.active,
.ai-chat-action-pill:hover {
    border-color: color-mix(in srgb, var(--primary) 42%, var(--border-color));
    background: color-mix(in srgb, var(--primary) 10%, var(--bg-dark));
    color: var(--text-light);
}

.ai-chat-action-pill {
    min-height: 32px;
    padding: 0 11px;
    border-radius: 999px;
    font-size: 0.78em;
    white-space: nowrap;
}

.ai-chatgpt-composer .ai-chat-mode-row {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    padding: 0;
    gap: 5px;
    overflow: hidden;
}

.ai-chatgpt-composer .ai-chat-mode-row button {
    min-height: 31px;
    padding: 0 11px;
    border-radius: 999px;
    font-size: 0.76em;
    white-space: nowrap;
}

.ai-chat-send-button {
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
}

.ai-chat-tool-menu {
    position: absolute;
    left: 12px;
    bottom: 54px;
    z-index: 20;
    width: min(340px, calc(100% - 24px));
    max-height: min(420px, 58vh);
    padding: 8px;
    border: 1px solid color-mix(in srgb, var(--border-color) 88%, var(--primary));
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-light) 98%, var(--bg-dark));
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.18);
    overflow: auto;
}

.ai-chat-tool-menu-section {
    display: grid;
    gap: 4px;
}

.ai-chat-tool-menu-section + .ai-chat-tool-menu-section {
    margin-top: 7px;
    padding-top: 7px;
    border-top: 1px solid color-mix(in srgb, var(--border-color) 68%, transparent);
}

.ai-chat-tool-menu button {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    width: 100%;
    min-height: 42px;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-light);
    text-align: left;
    cursor: pointer;
}

.ai-chat-tool-menu button:hover,
.ai-chat-tool-menu button.active {
    background: color-mix(in srgb, var(--primary) 10%, var(--bg-dark));
}

.ai-chat-tool-menu button span {
    color: var(--text-muted);
    font-size: 0.78em;
    font-weight: 500;
}

.ai-chat-tool-menu-suggestions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ai-chat-tool-menu-suggestions button {
    min-height: 32px;
    padding: 7px 9px;
    font-size: 0.8em;
    text-align: center;
}

.workspace-docked-panel .ai-chat-input-panel {
    gap: 6px;
}

.workspace-docked-panel .ai-chat-context-row {
    display: none;
}

.workspace-docked-panel .ai-chat-input-box.ai-chatgpt-composer {
    gap: 7px;
    padding: 9px;
    border-radius: 16px;
}

.workspace-docked-panel .ai-chatgpt-composer textarea {
    min-height: 50px;
    max-height: 92px;
    padding: 3px 5px;
}

.workspace-docked-panel .ai-chat-composer-footer {
    align-items: flex-end;
}

.workspace-docked-panel .ai-chat-composer-left {
    flex-wrap: wrap;
    gap: 6px;
}

.workspace-docked-panel .ai-chat-composer-right {
    gap: 6px;
}

.workspace-docked-panel .ai-chat-icon-button {
    width: 31px;
    height: 31px;
    flex-basis: 31px;
}

.workspace-docked-panel .ai-chat-action-pill,
.workspace-docked-panel .ai-chatgpt-composer .ai-chat-mode-row button {
    min-height: 29px;
    padding: 0 9px;
    font-size: 0.72em;
}

.workspace-docked-panel .ai-chatgpt-composer .ai-chat-mode-row {
    display: flex;
    flex: 1 1 155px;
    gap: 4px;
}

.workspace-docked-panel .ai-chatgpt-composer .ai-chat-mode-row button {
    flex: 1 1 0;
}

.workspace-docked-panel .ai-chat-send-button {
    min-height: 31px;
    padding: 0 12px;
}

.workspace-docked-panel .ai-chat-tool-menu {
    left: 9px;
    bottom: 48px;
    width: calc(100% - 18px);
    max-height: 330px;
}

.workspace-docked-panel .ai-chat-tool-menu-suggestions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* codex v118: bottom-triggered tools drawer occupies the area above the composer. */
.ai-chat-header-actions .btn[data-ai-chat-tools-toggle] {
    display: none;
}

.ai-chat-main:has(.ai-chat-tool-drawer:not([hidden])) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    grid-template-areas:
        "header"
        "messages"
        "drawer"
        "input";
}

.ai-chat-main:has(.ai-chat-workbench:not(.ai-chat-tools-collapsed)):has(.ai-chat-tool-drawer:not([hidden])) {
    grid-template-columns: minmax(420px, 1fr) minmax(360px, 42%);
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    grid-template-areas:
        "header workbench"
        "messages workbench"
        "drawer drawer"
        "input input";
}

.ai-chat-tool-drawer {
    grid-area: drawer;
    min-width: 0;
    max-height: min(340px, 42vh);
    margin: 0 clamp(22px, 4vw, 52px) 0;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--border-color) 82%, var(--primary));
    border-radius: 14px;
    background: color-mix(in srgb, var(--bg-light) 98%, var(--bg-dark));
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.12);
    overflow: auto;
}

.ai-chat-tool-drawer[hidden] {
    display: none;
}

.ai-chat-tool-drawer .ai-chat-tool-menu-section:first-child {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ai-chat-tool-drawer .ai-chat-tool-menu-section + .ai-chat-tool-menu-section {
    margin-top: 8px;
    padding-top: 8px;
}

.ai-chat-tool-drawer button {
    min-width: 0;
}

.ai-chat-tool-menu {
    position: static;
    width: auto;
    max-height: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.workspace-docked-panel .ai-chat-main:has(.ai-chat-tool-drawer:not([hidden])) {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr) minmax(110px, auto) auto;
    grid-template-areas:
        "header"
        "messages"
        "drawer"
        "input";
}

.workspace-docked-panel .ai-chat-main:has(.ai-chat-workbench:not(.ai-chat-tools-collapsed)):has(.ai-chat-tool-drawer:not([hidden])) {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(132px, 25vh) minmax(0, 1fr) minmax(110px, auto) auto;
    grid-template-areas:
        "header"
        "workbench"
        "messages"
        "drawer"
        "input";
}

.workspace-docked-panel .ai-chat-tool-drawer {
    width: auto;
    max-height: min(260px, 38vh);
    margin: 0 10px;
    padding: 8px;
    border-radius: 12px;
}

.workspace-docked-panel .ai-chat-tool-drawer .ai-chat-tool-menu-section:first-child {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.workspace-docked-panel .ai-chat-tool-drawer .ai-chat-tool-menu-suggestions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 880px) {
    .ai-chat-main,
    .ai-chat-main:has(.ai-chat-workbench:not(.ai-chat-tools-collapsed)) {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto minmax(0, auto) minmax(0, 1fr) auto;
        grid-template-areas:
            "header"
            "tools"
            "workbench"
            "messages"
            "input";
    }

    .ai-chat-tool-row.ai-image-tabs {
        height: 48px;
        min-height: 48px;
    }

    .ai-chat-workbench {
        height: auto;
        max-height: min(300px, 36vh);
        margin-top: 0;
    }
}

@media (max-width: 880px) {
    .ai-chat-main {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "header"
            "messages"
            "input";
    }

    .ai-chat-main:has(.ai-chat-workbench:not(.ai-chat-tools-collapsed)) {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(132px, 30vh) minmax(0, 1fr) auto;
        grid-template-areas:
            "header"
            "workbench"
            "messages"
            "input";
    }
}

/* codex v119: plus menu stays in the composer; selected tools open as a floating full chat-area panel. */
.ai-chat-main {
    position: relative;
}

.ai-chat-main:has(.ai-chat-workbench:not(.ai-chat-tools-collapsed)),
.ai-chat-main:has(.ai-chat-workbench:not(.ai-chat-tools-collapsed)):has(.ai-chat-tool-drawer:not([hidden])) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "header"
        "messages"
        "input";
}

.ai-chat-workbench,
.ai-chat-main:has(.ai-chat-workbench:not(.ai-chat-tools-collapsed)) .ai-chat-workbench {
    grid-area: messages;
}

.ai-chat-workbench:not(.ai-chat-tools-collapsed),
.ai-chat-main:has(.ai-chat-workbench:not(.ai-chat-tools-collapsed)) .ai-chat-workbench:not(.ai-chat-tools-collapsed) {
    z-index: 35;
    align-self: stretch;
    min-height: 0;
    height: auto;
    max-height: none;
    margin: 12px clamp(18px, 3.4vw, 42px);
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--border-color) 82%, var(--primary));
    border-radius: 14px;
    background: color-mix(in srgb, var(--bg-light) 98%, var(--bg-dark));
    box-shadow: 0 24px 58px rgba(15, 23, 42, 0.18);
    overflow: auto;
}

.ai-chat-workbench.ai-chat-tools-collapsed {
    display: none;
}

.ai-chat-workbench:not(.ai-chat-tools-collapsed) .ai-image-tab-panel {
    min-height: 100%;
}

.ai-chat-header-actions .btn[data-ai-chat-tools-toggle] {
    display: none !important;
}

.ai-chatgpt-composer .ai-chat-tool-menu,
.workspace-docked-panel .ai-chatgpt-composer .ai-chat-tool-menu {
    position: absolute;
    left: 12px;
    bottom: 54px;
    z-index: 45;
    width: min(340px, calc(100% - 24px));
    max-height: min(420px, 58vh);
    padding: 8px;
    border: 1px solid color-mix(in srgb, var(--border-color) 88%, var(--primary));
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-light) 98%, var(--bg-dark));
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.18);
    overflow: auto;
}

.ai-chatgpt-composer .ai-chat-tool-menu[hidden] {
    display: none;
}

.workspace-docked-panel .ai-chat-main:has(.ai-chat-workbench:not(.ai-chat-tools-collapsed)),
.workspace-docked-panel .ai-chat-main:has(.ai-chat-workbench:not(.ai-chat-tools-collapsed)):has(.ai-chat-tool-drawer:not([hidden])) {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "header"
        "messages"
        "input";
}

.workspace-docked-panel .ai-chat-workbench:not(.ai-chat-tools-collapsed),
.workspace-docked-panel .ai-chat-main:has(.ai-chat-workbench:not(.ai-chat-tools-collapsed)) .ai-chat-workbench:not(.ai-chat-tools-collapsed) {
    grid-area: messages;
    margin: 8px 10px;
    padding: 10px;
    max-height: none;
    border-left: 1px solid color-mix(in srgb, var(--border-color) 82%, var(--primary));
    border-radius: 12px;
}

.workspace-docked-panel .ai-chatgpt-composer .ai-chat-tool-menu {
    left: 9px;
    bottom: 48px;
    width: calc(100% - 18px);
    max-height: 330px;
}

/* codex v120: never show the legacy top tabs; tools are selected from the bottom plus menu. */
/* codex v121: draft settings are folded into the composer context and no longer open a panel. */
/* codex v122: image settings are folded into the composer; prompt text can drive ratio and output stays in chat. */
/* codex v123: plus tool menu removed; history is an inline composer action. */
/* codex v124: chat header chrome is hidden so the conversation starts directly at the message area. */
/* codex v125: advanced entry is renamed API config and the floating config area has its own close button. */
/* codex v126: API model configuration moved to personal center with common provider presets. */
/* codex v127: hidden chat header no longer owns close; a floating close button stays available. */
/* codex v128: chat composer no longer shows an API config button; models live in personal center. */
/* codex v129: chat sessions archive to history on close and reopen as a fresh chat. */
.ai-chat-header.image-bed-header,
.workspace-docked-panel .ai-chat-header.image-bed-header {
    display: none !important;
}

.ai-chat-floating-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 70;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: color-mix(in srgb, var(--bg-light) 96%, var(--bg-dark));
    color: var(--text-muted);
    font-size: 1.2em;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.12);
}

.ai-chat-floating-close:hover {
    border-color: color-mix(in srgb, var(--primary) 48%, var(--border-color));
    color: var(--primary);
}

.ai-chat-workbench-close {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 30px;
    margin: 0 0 8px auto;
    padding: 0 12px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-light) 96%, var(--bg-dark));
    color: var(--text-muted);
    font: inherit;
    font-size: 0.82em;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}

.ai-chat-workbench-close:hover {
    border-color: color-mix(in srgb, var(--primary) 48%, var(--border-color));
    color: var(--primary);
}

.ai-chat-tool-row.ai-image-tabs,
.ai-chat-main .ai-chat-tool-row.ai-image-tabs,
.ai-chat-main:has(.ai-chat-workbench:not(.ai-chat-tools-collapsed)) .ai-chat-tool-row.ai-image-tabs,
.workspace-docked-panel .ai-chat-tool-row.ai-image-tabs,
.workspace-docked-panel .ai-chat-main:has(.ai-chat-workbench:not(.ai-chat-tools-collapsed)) .ai-chat-tool-row.ai-image-tabs {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.ai-image-lightbox-modal {
    width: min(980px, 96vw);
    max-height: 92vh;
}

.ai-image-lightbox-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
}

.ai-image-lightbox-toolbar #aiImageLightboxZoomLabel {
    min-width: 56px;
    text-align: center;
    font-size: 0.86em;
    color: var(--text-light);
}

.ai-image-lightbox-stage {
    min-height: 320px;
    max-height: 68vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.05), transparent 42%),
        var(--bg-dark);
    overflow: auto;
    cursor: zoom-in;
}

.ai-image-lightbox-stage img {
    max-width: 100%;
    max-height: 62vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 16px 42px rgba(0,0,0,0.25);
    transform-origin: center center;
    transition: transform 0.16s ease;
    will-change: transform;
}

@media (max-width: 720px) {
    .ai-image-grid {
        grid-template-columns: 1fr;
    }

    .ai-image-preview-card {
        grid-template-columns: 1fr;
    }
}

/* CSS 主题弹窗 - 两栏宽屏布局 */
.modal-box-css {
    width: min(1100px, 96vw);
    max-height: 92vh;
    padding: 20px 24px 18px;
    gap: 12px;
}

.css-modal-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.css-modal-header h3 {
    font-size: 1.05em;
    color: var(--text-light);
    margin: 0;
    white-space: nowrap;
}

.css-modal-hint {
    font-size: 0.78em;
    color: var(--text-muted);
}

/* CSS 弹窗工具栏（预置主题行 + mdnice 提示）*/
.css-modal-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 6px 0 4px;
    border-bottom: 1px solid var(--border-color);
}

.css-preset-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.document-history-modal {
    width: min(1080px, 94vw);
    height: min(760px, 88vh);
    display: flex;
    flex-direction: column;
}

.platform-preflight {
    margin: 12px 0;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-dark);
}

.platform-preflight-head,
.platform-preflight-item > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.platform-preflight-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.platform-preflight-item {
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 12px;
}

.platform-preflight-item.ok {
    border-color: rgba(34, 197, 94, .35);
    background: rgba(34, 197, 94, .07);
}

.platform-preflight-item.warn {
    border-color: rgba(245, 158, 11, .38);
    background: rgba(245, 158, 11, .08);
}

.platform-preflight-item strong {
    color: var(--text-primary);
}

.platform-preflight-item em {
    color: inherit;
    font-style: normal;
    font-weight: 700;
}

.platform-preflight-item ul {
    margin: 7px 0 0;
    padding-left: 18px;
    line-height: 1.6;
}

.platform-preflight-empty {
    color: var(--text-muted);
    font-size: 12px;
}

@media (max-width: 720px) {
    .platform-preflight-list {
        grid-template-columns: 1fr;
    }
}

.document-history-header,
.document-history-toolbar,
.document-history-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.document-history-header h3 {
    margin: 0 0 3px;
}

.document-history-header span,
.document-history-toolbar span {
    color: var(--text-muted);
    font-size: 12px;
}

.document-history-toolbar {
    justify-content: flex-start;
    margin: 14px 0 12px;
}

.document-history-layout {
    min-height: 0;
    flex: 1;
    display: grid;
    grid-template-columns: minmax(220px, 30%) minmax(0, 1fr);
    gap: 12px;
}

.document-history-list,
.document-history-preview {
    min-height: 0;
    overflow: auto;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-dark);
}

.document-history-item {
    width: 100%;
    padding: 12px;
    border: 0;
    border-bottom: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
}

.document-history-item:hover,
.document-history-item.active {
    background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.document-history-item strong,
.document-history-item span,
.document-history-item small {
    display: block;
}

.document-history-item span,
.document-history-item small {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 12px;
}

.document-history-preview {
    display: flex;
    flex-direction: column;
}

.document-history-preview-head {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
}

.document-history-preview-head > div {
    display: flex;
    gap: 8px;
}

#documentHistoryPreviewContent {
    flex: 1;
    min-height: 0;
    margin: 0;
    padding: 16px;
    overflow: auto;
    color: var(--text-primary);
    font: 13px/1.7 ui-monospace, SFMono-Regular, Consolas, monospace;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.history-diff-add {
    color: #15803d;
    background: rgba(34, 197, 94, .12);
}

.history-diff-remove {
    color: #b91c1c;
    background: rgba(239, 68, 68, .12);
}

.history-diff-same {
    color: var(--text-muted);
}

.css-saved-theme-row {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    flex: 1 1 520px;
}

.css-preset-label {
    font-size: 0.78em;
    color: var(--text-muted);
    white-space: nowrap;
}

.css-preset-select {
    padding: 5px 10px;
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 7px;
    color: var(--text-light);
    font-size: 0.82em;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s;
    max-width: 200px;
}

.css-preset-select:focus,
.css-preset-select:hover {
    border-color: var(--primary);
}

.css-theme-name-input {
    min-width: 120px;
    max-width: 180px;
    padding: 5px 9px;
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 7px;
    color: var(--text-light);
    font-size: 0.82em;
    outline: none;
    transition: border-color 0.15s;
}

.css-theme-name-input:focus {
    border-color: var(--primary);
}

.css-theme-library-btn {
    min-height: 29px;
    padding: 4px 9px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    background: var(--bg-dark);
    color: var(--text-light);
    font-size: 0.78em;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.css-theme-library-btn:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, var(--bg-dark));
}

.css-theme-library-btn-danger:hover:not(:disabled) {
    border-color: #ef4444;
    color: #ef4444;
    background: color-mix(in srgb, #ef4444 8%, var(--bg-dark));
}

.css-theme-library-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.css-compat-tip {
    font-size: 0.76em;
    color: var(--text-muted);
    background: rgba(254, 44, 85, 0.06);
    border: 1px solid rgba(254, 44, 85, 0.18);
    padding: 4px 10px;
    border-radius: 6px;
    white-space: nowrap;
}

.css-compat-tip code {
    background: var(--bg-dark);
    padding: 1px 5px;
    border-radius: 3px;
    font-family: monospace;
    color: var(--primary);
    font-size: 0.95em;
}

.css-modal-body {
    display: flex;
    gap: 14px;
    flex: 1;
    min-height: 0;
    height: 55vh;
}

.css-editor-col,
.css-preview-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
    min-height: 0;
}

.css-col-label {
    font-size: 0.75em;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.custom-css-input {
    flex: 1;
    min-height: 0;
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-light);
    font-family: 'Monaco', 'Menlo', Consolas, monospace;
    font-size: 0.83em;
    line-height: 1.6;
    outline: none;
    resize: none;
    transition: border-color 0.15s;
}

.custom-css-input:focus {
    border-color: var(--primary);
}

.css-live-preview-wrap {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #fff;
}

.css-live-preview {
    padding: 20px 24px;
    color: #333;
    font-size: 15px;
    line-height: 1.8;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.css-live-preview h1 {
    font-size: 1.7em;
    margin: 0 0 14px;
    font-weight: 700;
    text-align: center;
}
.css-live-preview h2 { font-size: 1.3em; margin: 18px 0 10px; font-weight: 700; }
.css-live-preview h3 { font-size: 1.1em; margin: 14px 0 8px; font-weight: 600; }
.css-live-preview p  { margin: 0 0 12px; }
.css-live-preview ul { margin: 0 0 12px; padding-left: 22px; }
.css-live-preview li { margin: 4px 0; }
.css-live-preview blockquote { border-left: 4px solid #ccc; padding: 8px 14px; margin: 12px 0; color: #666; font-style: italic; }
.css-live-preview code { background: #f3f4f6; padding: 2px 6px; border-radius: 4px; font-family: monospace; font-size: 0.88em; }
.css-live-preview pre  { background: #1e2030; color: #c0caf5; padding: 14px; border-radius: 8px; overflow-x: auto; margin: 12px 0; }
.css-live-preview pre code { background: none; color: inherit; }

@media (max-width: 820px) {
    .css-saved-theme-row {
        flex-wrap: wrap;
        flex-basis: 100%;
    }

    .css-theme-name-input {
        flex: 1 1 150px;
        max-width: none;
    }
}

.modal-box h3 {
    font-size: 1.05em;
    color: var(--text-light);
    margin: 0;
}

.modal-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.modal-field-row {
    flex-direction: row;
    gap: 12px;
}

.modal-field label {
    font-size: 0.8em;
    color: var(--text-muted);
}

.modal-field input,
.modal-field textarea {
    padding: 8px 10px;
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 7px;
    color: var(--text-light);
    font-size: 0.85em;
    outline: none;
    resize: vertical;
    transition: border-color 0.15s;
}

.modal-field input:focus,
.modal-field textarea:focus { border-color: var(--primary); }

.modal-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* ==================== 公众号助手弹窗 ==================== */

.btn-wechat {
    background: var(--bg-dark);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85em;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.btn-wechat:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, var(--bg-dark));
}

.modal-box-wechat {
    width: min(640px, 96vw);
    padding: 0;
    gap: 0;
    overflow: hidden;
}

.wechat-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px 12px;
    border-bottom: 1px solid var(--border-color);
}

.wechat-modal-header h3 {
    font-size: 1.05em;
    color: var(--text-light);
    margin: 0;
}

.wechat-modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.1em;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.15s;
}

.wechat-modal-close:hover {
    background: var(--bg-dark);
    color: var(--text-light);
}

.wechat-tabs {
    display: flex;
    gap: 0;
    padding: 0 24px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-deeper);
}

.wechat-tab-btn {
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text-muted);
    padding: 12px 18px;
    cursor: pointer;
    font-size: 0.87em;
    font-weight: 500;
    transition: color 0.15s, border-color 0.15s;
    margin-bottom: -1px;
}

.wechat-tab-btn.active {
    color: #07C160;
    border-bottom-color: #07C160;
}

.wechat-tab-btn:hover:not(.active) {
    color: var(--text-light);
}

.wechat-experimental-tab {
    opacity: 0.72;
    font-size: 0.82em;
}

.wechat-experimental-tab.active {
    opacity: 1;
}

.wechat-experimental-banner {
    padding: 10px 12px;
    border: 1px dashed rgba(245, 158, 11, 0.45);
    background: rgba(245, 158, 11, 0.08);
    color: #fbbf24;
    border-radius: 8px;
    font-size: 0.84em;
    line-height: 1.6;
    margin-bottom: 12px;
}

.wechat-tab-panel {
    display: none;
    padding: 20px 24px 22px;
    max-height: 72vh;
    overflow-y: auto;
}

.wechat-tab-panel.active {
    display: block;
}

.wechat-steps {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wechat-step {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.wechat-step-num {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    background: #07C160;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85em;
    font-weight: 700;
    margin-top: 2px;
}

.wechat-step-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.wechat-step-title {
    font-size: 0.9em;
    font-weight: 600;
    color: var(--text-light);
}

.wechat-step-desc {
    font-size: 0.82em;
    color: var(--text-muted);
    line-height: 1.6;
}

.wechat-step-desc a {
    color: #07C160;
    text-decoration: none;
}

.wechat-action-btn {
    margin-top: 8px;
    font-size: 0.85em;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
    align-self: flex-start;
    white-space: nowrap;
}

.wechat-action-btn:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

/* API 推送 Tab */
.wechat-api-intro {
    margin-bottom: 16px;
}

.wechat-api-intro p {
    font-size: 0.85em;
    color: var(--text-muted);
    line-height: 1.65;
    margin-bottom: 10px;
}

.wechat-api-intro code {
    background: var(--bg-dark);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.9em;
    color: var(--primary);
}

.wechat-api-tip {
    background: rgba(255, 200, 50, 0.08);
    border: 1px solid rgba(255, 200, 50, 0.3);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.82em;
    color: var(--text-muted);
    line-height: 1.6;
}

.wechat-api-tip strong {
    color: #FBBF24;
}

.wechat-api-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wechat-api-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.wechat-api-row label {
    font-size: 0.8em;
    color: var(--text-muted);
    font-weight: 500;
}

.wechat-api-row label small a {
    color: #07C160;
    text-decoration: none;
}

.wechat-api-row input {
    padding: 9px 12px;
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-light);
    font-size: 0.85em;
    outline: none;
    transition: border-color 0.15s;
    font-family: 'Monaco', 'Menlo', monospace;
}

.wechat-api-row input:focus {
    border-color: #07C160;
}

.wechat-api-row-actions {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}

.wechat-api-result {
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 0.82em;
    font-family: 'Monaco', 'Menlo', monospace;
    color: var(--text-light);
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 180px;
    overflow-y: auto;
}

.wechat-api-result.result-success {
    border-color: #07C160;
    color: #07C160;
}

.wechat-api-result.result-error {
    border-color: #EF4444;
    color: #EF4444;
}

.wechat-api-result.result-info {
    border-color: #3B82F6;
    color: #93C5FD;
}

/* ==================== 下拉菜单 ==================== */
.dropdown {
    position: relative;
}

.dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.25);
    z-index: 2000;
    min-width: 160px;
    overflow: hidden;
    animation: dropIn 0.15s ease;
}

.dropdown-menu.open {
    display: block;
}

@keyframes dropIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: 9px 16px;
    text-align: left;
    background: none;
    border: none;
    color: var(--text-light);
    font-size: 0.85em;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}

.dropdown-item:hover {
    background: var(--bg-dark);
    color: var(--primary);
}

.menu-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25em;
    margin-right: 0.4em;
    line-height: 1;
    vertical-align: middle;
}

.menu-item-text {
    vertical-align: middle;
}

.dropdown-divider {
    height: 1px;
    background: var(--border-color);
    margin: 4px 0;
}

/* 文件菜单 */
.file-menu { min-width: 180px; }
.import-menu {
    left: 0;
    right: auto;
    min-width: 170px;
}

/* 格式面板 */
.fmt-panel {
    right: auto;
    left: 0;
    width: 360px;
    max-height: min(680px, calc(100vh - 92px));
    padding: 12px;
    overflow: auto;
    display: none;
    flex-direction: column;
    gap: 10px;
}

.fmt-panel.open { display: flex; }

.fmt-group {
    padding: 6px 0;
    border-bottom: 1px solid var(--border-color);
}

.fmt-group-last { border-bottom: none; }

.fmt-label {
    display: block;
    font-size: 0.72em;
    color: var(--text-muted);
    margin-bottom: 5px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.fmt-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 2px 8px;
    border-bottom: 1px solid var(--border-color);
}

.fmt-panel-head > div {
    display: grid;
    gap: 2px;
}

.fmt-panel-head strong { font-size: 14px; }
.fmt-panel-head span { color: var(--text-muted); font-size: 11px; }

.fmt-panel-head .fmt-layout-entry {
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid color-mix(in srgb, var(--primary) 42%, var(--border-color));
    border-radius: 6px;
    background: color-mix(in srgb, var(--primary) 9%, var(--bg-dark));
    color: var(--primary);
    cursor: pointer;
}

.fmt-quick-bar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.fmt-quick-bar button {
    height: 34px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-dark);
    color: var(--text-light);
    cursor: pointer;
}

.fmt-quick-bar button:hover,
.fmt-more-grid button:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.fmt-core-group {
    padding: 2px 0 10px;
}

.fmt-action-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.fmt-group .fmt-action-grid button {
    display: grid;
    justify-items: start;
    gap: 3px;
    min-height: 52px;
    margin: 0;
    padding: 7px 9px;
}

.fmt-action-grid button b { font-size: 13px; }
.fmt-action-grid button span { color: var(--text-muted); font-size: 11px; }
.fmt-action-grid button:hover span { color: inherit; }

.fmt-more-section {
    border: 1px solid var(--border-color);
    border-radius: 7px;
    background: var(--bg-dark);
    overflow: hidden;
}

.fmt-more-section summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 38px;
    padding: 0 11px;
    color: var(--text-light);
    font-size: 12px;
    cursor: pointer;
}

.fmt-more-section summary span { color: var(--text-muted); font-size: 10px; }
.fmt-more-section[open] summary { border-bottom: 1px solid var(--border-color); }

.fmt-more-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 8px;
}

.fmt-more-grid button {
    min-height: 32px;
    padding: 5px 8px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background: var(--bg-deeper);
    color: var(--text-light);
    text-align: left;
    cursor: pointer;
}

.fmt-typography-group {
    display: grid;
    grid-template-columns: 1fr 108px;
    gap: 7px;
}

.fmt-typography-group > .fmt-label {
    grid-column: 1 / -1;
    margin-bottom: 0;
}

.fmt-select-field {
    display: grid;
    gap: 4px;
    color: var(--text-muted);
    font-size: 0.72em;
}

.fmt-select-field select {
    width: 100%;
    min-width: 0;
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background: var(--bg-dark);
    color: var(--text-light);
    font-size: 12px;
    outline: none;
}

.fmt-select-field select:focus {
    border-color: var(--primary);
}

.typography-modal {
    width: min(920px, calc(100vw - 32px));
    max-height: min(820px, calc(100vh - 32px));
    overflow: auto;
}

.typography-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.typography-modal-header h3 {
    margin: 0 0 4px;
}

.typography-modal-header p,
.typography-future-note {
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
}

.typography-tabs {
    position: sticky;
    top: -20px;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    padding: 5px;
    margin-bottom: 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-deeper);
}

.typography-tabs button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.typography-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--primary) 14%, var(--bg-dark));
    color: var(--primary);
    font-size: 10px;
    line-height: 1;
}

.typography-tab-count[hidden] { display: none; }

.typography-tabs button:hover { color: var(--text-light); }
.typography-tabs button.active {
    background: var(--bg-light);
    color: var(--primary);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    font-weight: 600;
}

.typography-panel { display: none; }
.typography-panel.active { display: block; }

.typography-panel-intro {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
}

.typography-panel-intro strong { color: var(--text-light); font-size: 14px; }
.typography-panel-intro span { color: var(--text-muted); font-size: 11px; }
.typography-panel-intro-spaced { margin-top: 18px; }

.typography-quick-presets {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.typography-quick-presets button {
    display: grid;
    gap: 5px;
    min-height: 76px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-dark);
    color: var(--text-light);
    text-align: left;
    cursor: pointer;
}

.typography-quick-presets button span { color: var(--text-muted); font-size: 11px; line-height: 1.5; }
.typography-quick-presets button:hover { border-color: var(--primary); }
.typography-quick-presets button:hover b { color: var(--primary); }

.typography-common-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--primary) 7%, var(--bg-dark));
    color: var(--text-muted);
    font-size: 11px;
}

.typography-common-actions button {
    flex: 0 0 auto;
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background: var(--bg-deeper);
    color: var(--text-muted);
    cursor: pointer;
}

.typography-common-actions button:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.typography-element-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.typography-element-filter input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-dark);
    color: var(--text-light);
    outline: none;
}

.typography-element-filter input[type="search"]:focus { border-color: var(--primary); }

.typography-element-filter label {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-muted);
    font-size: 11px;
    cursor: pointer;
}

.typography-filter-empty {
    padding: 28px 12px;
    color: var(--text-muted);
    text-align: center;
    font-size: 12px;
}

.typography-modal > .modal-actions {
    position: sticky;
    bottom: -20px;
    z-index: 4;
    margin: 18px -20px -20px;
    padding: 12px 20px;
    border-top: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--bg-light) 94%, transparent);
    backdrop-filter: blur(10px);
}

.typography-preset-controls {
    display: grid;
    gap: 8px;
    padding: 12px;
    margin-bottom: 14px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-dark);
}

.typography-preset-primary {
    display: grid;
    grid-template-columns: minmax(170px, 1fr) minmax(170px, 1fr) auto auto;
    gap: 8px;
}

.typography-preset-secondary {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.typography-preset-secondary select {
    width: auto;
    min-width: 112px;
}

.typography-preset-pack {
    display: grid;
    grid-template-columns: auto minmax(150px, 220px) auto;
    align-items: center;
    justify-content: start;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
}

.typography-preset-pack > span {
    color: var(--text-muted);
    font-size: 12px;
}

.typography-preset-controls select,
.typography-preset-controls input {
    width: 100%;
    min-width: 0;
    height: 34px;
    padding: 0 9px;
    color: var(--text-light);
    background: var(--bg-deeper);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    outline: none;
}

.typography-preset-controls button {
    height: 34px;
    padding: 0 11px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    color: var(--text-light);
    background: var(--bg-deeper);
    cursor: pointer;
}

.typography-preset-controls button:hover,
.typography-preset-controls select:focus,
.typography-preset-controls input:focus {
    border-color: var(--primary);
}

.typography-base-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 160px;
    gap: 12px;
    padding: 14px;
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    margin-bottom: 14px;
}

.typography-base-controls label,
.typography-property-grid > label,
.typography-target-controls > label {
    display: grid;
    gap: 6px;
    color: var(--text-muted);
    font-size: 12px;
}

.typography-base-controls select,
.typography-property-grid select,
.typography-target-row select {
    width: 100%;
    min-width: 0;
    height: 34px;
    padding: 0 9px;
    color: var(--text-light);
    background: var(--bg-deeper);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    outline: none;
}

.typography-base-controls select:focus,
.typography-property-grid select:focus,
.typography-target-row select:focus {
    border-color: var(--primary);
}

.typography-property-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 14px;
    margin-bottom: 14px;
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.typography-target-list {
    display: grid;
    gap: 10px;
}

.typography-target-row {
    display: block;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-dark);
    overflow: hidden;
}

.typography-target-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    padding: 0 12px;
    margin-bottom: 0;
    cursor: pointer;
    list-style: none;
}

.typography-target-title::-webkit-details-marker { display: none; }
.typography-target-row[open] .typography-target-title { border-bottom: 1px solid var(--border-color); }
.typography-target-title > span { display: flex; align-items: baseline; gap: 8px; }
.typography-target-title small { color: var(--text-muted); font-size: 10px; font-weight: 400; }

.typography-target-title strong {
    font-size: 13px;
    color: var(--text-light);
}

.typography-target-title button {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background: var(--bg-dark);
    color: var(--text-muted);
    cursor: pointer;
}

.typography-target-title button:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.typography-target-controls {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
}

.typography-color-control {
    display: grid;
    grid-template-columns: 18px 36px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 8px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background: var(--bg-deeper);
}

.typography-color-control input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
}

.typography-color-control input[type="color"] {
    width: 34px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
}

.typography-color-control input[type="color"]:disabled {
    opacity: 0.28;
}

.typography-color-control span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.article-appearance-controls {
    margin-top: 18px;
}

.typography-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
}

.typography-section-heading > div {
    display: grid;
    gap: 3px;
}

.typography-section-heading strong {
    color: var(--text-light);
    font-size: 14px;
}

.typography-section-heading span {
    color: var(--text-muted);
    font-size: 11px;
}

.typography-section-heading button {
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background: var(--bg-dark);
    color: var(--text-muted);
    cursor: pointer;
}

.typography-section-heading button:hover {
    color: var(--primary);
    border-color: var(--primary);
}

.appearance-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.appearance-card {
    min-width: 0;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-dark);
    overflow: hidden;
}

.appearance-card summary {
    min-height: 42px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    color: var(--text-light);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}

.appearance-card summary:hover {
    color: var(--primary);
}

.appearance-card[open] summary {
    border-bottom: 1px solid var(--border-color);
}

.appearance-control-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
}

.appearance-control-grid > label {
    min-width: 0;
    display: grid;
    gap: 6px;
    color: var(--text-muted);
    font-size: 12px;
}

.appearance-control-grid select,
.appearance-control-grid .appearance-text-input {
    width: 100%;
    min-width: 0;
    height: 34px;
    padding: 0 9px;
    color: var(--text-light);
    background: var(--bg-deeper);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    outline: none;
}

.appearance-control-grid select:focus,
.appearance-control-grid .appearance-text-input:focus {
    border-color: var(--primary);
}

.wechat-article .footnotes {
    clear: both;
    margin-top: 24px;
    font-size: 13px;
    color: #64748b;
}

.wechat-article .footnotes-title {
    margin: 0 0 8px;
    color: #334155;
    font-size: 14px;
    font-weight: 700;
}

.wechat-article .footnotes-sep {
    height: auto;
    margin: 0 0 14px;
    border: 0;
    border-top: 1px solid #cbd5e1;
}

.wechat-article .footnotes-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wechat-article .footnote-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 6px;
    margin: 0;
}

.wechat-article .footnote-num {
    font-variant-numeric: tabular-nums;
    color: #2563eb;
}

.wechat-article .footnote-content,
.wechat-article .footnote-content p {
    min-width: 0;
    margin: 0;
    line-height: 1.65;
}

.wechat-article .footnote-ref {
    margin: 0 2px;
    font-size: 0.75em;
    line-height: 1;
    vertical-align: super;
}

.wechat-article .footnote-ref a,
.wechat-article .footnote-backref {
    color: #2563eb;
    text-decoration: none;
}

.wechat-article .footnote-backref {
    display: inline-flex;
    gap: 1px;
    align-items: baseline;
    margin-left: 4px;
    white-space: nowrap;
}

.wechat-article .footnote-backref span {
    font-size: 0.75em;
}

@media (max-width: 640px) {
    .typography-preset-primary,
    .typography-preset-pack {
        grid-template-columns: 1fr 1fr;
    }

    .typography-preset-primary select,
    .typography-preset-primary input,
    .typography-preset-pack > span {
        grid-column: 1 / -1;
    }

    .typography-preset-secondary {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .typography-preset-secondary select {
        width: 100%;
    }

    .typography-base-controls {
        grid-template-columns: 1fr;
    }

    .typography-quick-presets {
        grid-template-columns: 1fr;
    }

    .typography-common-actions,
    .typography-element-filter {
        align-items: stretch;
        flex-direction: column;
    }

    .typography-property-grid,
    .typography-target-controls {
        grid-template-columns: 1fr;
    }

    .typography-target-row {
        padding: 0;
    }

    .typography-section-heading {
        align-items: flex-start;
    }

    .appearance-card-grid,
    .appearance-control-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 420px) {
    .fmt-panel {
        width: min(360px, calc(100vw - 18px));
    }

    .fmt-action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.fmt-group button {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    margin: 2px;
    border: 1px solid var(--border-color);
    background: var(--bg-dark);
    color: var(--text-light);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.82em;
    transition: all 0.15s;
}

.fmt-group button:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.btn-template-full {
    display: block !important;
    width: calc(100% - 4px) !important;
    text-align: center !important;
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: white !important;
    font-weight: bold;
    padding: 7px 10px !important;
}

/* 格式工具栏触发按钮 */
.btn-fmt-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 5px 14px;
    border: 1px solid var(--border-color);
    background: var(--bg-light);
    color: var(--text-light);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85em;
    line-height: 1.2;
    white-space: nowrap;
    transition: all 0.15s;
}

.btn-fmt-toggle:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* 直接采用 mdnice Pattern 菜单的信息结构：单列、状态位、名称、快捷键。 */
.workspace-toolbar .fmt-panel {
    left: 0;
    right: auto;
    width: 268px;
    max-height: min(720px, calc(100vh - 58px));
    padding: 4px 0;
    gap: 0;
    border-radius: 0 0 5px 5px;
    overflow-y: auto;
}

.nice-format-item {
    width: 100%;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 5px 12px 5px 6px;
    border: 0;
    background: transparent;
    color: var(--text-light);
    text-align: left;
    font-size: 13px;
    cursor: pointer;
}

.nice-format-item > span { display: inline-flex; align-items: center; }
.nice-format-item i {
    width: 16px;
    display: inline-flex;
    justify-content: center;
    margin-right: 2px;
    color: var(--primary);
    font-style: normal;
}

.nice-format-item kbd {
    color: var(--text-muted);
    background: transparent;
    border: 0;
    box-shadow: none;
    font-family: inherit;
    font-size: 11px;
    white-space: nowrap;
}

.nice-format-item:hover {
    background: color-mix(in srgb, var(--primary) 10%, var(--bg-dark));
    color: var(--primary);
}

.nice-format-divider {
    height: 1px;
    margin: 4px 0;
    background: var(--border-color);
}

.nice-format-more {
    border-top: 0;
}

.nice-format-more summary {
    min-height: 32px;
    display: flex;
    align-items: center;
    padding: 5px 12px 5px 24px;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
}

.nice-format-more > div {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
    padding: 6px 10px 10px;
}

.nice-format-more button {
    min-height: 28px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-dark);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 11px;
}

.nice-format-more button:hover { border-color: var(--primary); color: var(--primary); }

.nice-code-theme-menu {
    left: 0;
    right: auto;
    width: 190px;
    padding: 4px 0;
    border-radius: 0 0 5px 5px;
}

.mdnice-style-menu {
    left: 0;
    right: auto;
    width: 276px;
    padding: 4px 0;
    border-radius: 0 0 5px 5px;
}

.mdnice-style-control {
    min-height: 36px;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    color: var(--text-light);
    font-size: 13px;
}

.mdnice-style-control select,
.mdnice-style-control input[type="color"] {
    width: 100%;
    min-width: 0;
    height: 28px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-dark);
    color: var(--text-light);
}

.mdnice-style-control input[type="color"] {
    padding: 2px;
    cursor: pointer;
}

.mdnice-style-code-title {
    padding: 7px 12px 4px 24px;
    color: var(--text-muted);
    font-size: 11px;
}

.nice-function-menu {
    left: 0;
    right: auto;
    width: 210px;
    padding: 4px 0;
    border-radius: 0 0 5px 5px;
}

.nice-code-theme-item {
    width: 100%;
    min-height: 32px;
    display: flex;
    align-items: center;
    padding: 5px 12px 5px 6px;
    border: 0;
    background: transparent;
    color: var(--text-light);
    text-align: left;
    font-size: 13px;
    cursor: pointer;
}

.nice-code-theme-item span { display: inline-flex; align-items: center; }
.nice-code-theme-item i {
    width: 16px;
    display: inline-flex;
    justify-content: center;
    margin-right: 2px;
    font-size: 11px;
    font-style: normal;
}

.nice-code-theme-item:hover {
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, var(--bg-dark));
}

.mdnice-tutorial-menu {
    left: auto;
    right: 0;
    width: 248px;
    max-height: min(620px, calc(100vh - 58px));
    padding: 4px 0;
    overflow-y: auto;
    border-radius: 0 0 5px 5px;
}

.mdnice-tutorial-menu .nice-tutorial-guide {
    font-weight: 600;
}

.mdnice-tutorial-modal { width: min(720px, calc(100vw - 32px)); }

.editor-link-modal { width: min(520px, calc(100vw - 32px)); }

.editor-link-fields {
    display: grid;
    gap: 14px;
    margin: 18px 0 4px;
}

.editor-link-fields label {
    display: grid;
    gap: 7px;
    color: var(--text-muted);
    font-size: 12px;
}

.editor-link-fields input {
    width: 100%;
    min-height: 38px;
    padding: 8px 11px;
    box-sizing: border-box;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-dark);
    color: var(--text-light);
    outline: none;
}

.editor-link-fields input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 15%, transparent);
}

.mdnice-sitdown-modal { width: min(620px, calc(100vw - 32px)); }

.mdnice-sitdown-field {
    display: grid;
    gap: 7px;
    margin-bottom: 14px;
    color: var(--text-muted);
    font-size: 12px;
}

.mdnice-sitdown-field select,
.mdnice-sitdown-field textarea {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background: var(--bg-deeper);
    color: var(--text-light);
    outline: none;
    resize: vertical;
}

.mdnice-sitdown-field select { height: 38px; padding-top: 0; padding-bottom: 0; }
.mdnice-sitdown-field select:focus,
.mdnice-sitdown-field textarea:focus { border-color: var(--primary); }

.mdnice-tutorial-picture {
    display: block;
    width: 100%;
    max-height: 430px;
    object-fit: contain;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background: #fff;
}

.mdnice-tutorial-live-preview {
    min-height: 180px;
    max-height: 430px;
    padding: 22px 28px;
    overflow: auto;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background: #fff;
    color: #333;
}

.mdnice-tutorial-markdown {
    max-height: 150px;
    margin: 12px 0 0;
    padding: 10px 12px;
    overflow: auto;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background: var(--bg-deeper);
    color: var(--text-muted);
    font-size: 12px;
    white-space: pre-wrap;
}

/* mdnice 风格的顶部主题入口：主题选择与 CSS 管理保持在编辑器主工具栏。 */
.toolbar-theme-dropdown {
    position: relative;
}

.toolbar-theme-toggle {
    max-width: 190px;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, var(--bg-light));
}

.toolbar-theme-toggle span {
    max-width: 126px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.toolbar-theme-menu {
    left: 0;
    right: auto;
    min-width: 300px;
    max-height: min(70vh, 520px);
    padding: 4px 0;
    overflow-y: auto;
    border-radius: 0 0 5px 5px;
}

.toolbar-theme-menu-title {
    display: none;
}

.toolbar-theme-options {
    display: grid;
    gap: 0;
}

.toolbar-theme-option {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    width: 100%;
    min-height: 34px;
    padding: 5px 12px 5px 6px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-light);
    text-align: left;
    cursor: pointer;
}

.toolbar-theme-option:hover,
.toolbar-theme-option.active {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
}

.toolbar-theme-option.active {
    color: var(--primary);
}

.toolbar-theme-check {
    width: 18px;
    font-weight: 800;
    text-align: center;
}

.toolbar-theme-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.toolbar-theme-meta {
    color: var(--text-muted);
    font-size: 0.74rem;
}

.toolbar-theme-actions {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--border-color);
}

.toolbar-theme-actions button {
    min-height: 32px;
    padding: 5px 12px 5px 24px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-light);
    text-align: left;
    cursor: pointer;
}

.toolbar-theme-actions button + button { border-top: 1px solid var(--border-color); }

.toolbar-theme-actions button:hover {
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, var(--bg-dark));
}

.xhs-card.unified-theme-card .card-theme-content {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

/* ==================== 像素精确分页卡片 ==================== */
.page-toolbar {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 6px;
    justify-content: flex-start;
    width: 86px;
    margin: 0;
}

body.card-workspace-active .page-toolbar {
    width: 86px;
    padding: 10px 8px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-light) 92%, transparent);
    box-shadow: 0 12px 30px rgba(0,0,0,0.2);
    backdrop-filter: blur(10px);
}

.card-preview-toolbar .page-toolbar {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    margin: 0;
    width: 252px;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    padding: 7px 8px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: color-mix(in srgb, var(--bg-light) 97%, #fff 3%);
    box-shadow: 0 18px 42px rgba(0,0,0,.24);
    z-index: 150;
}

.card-preview-toolbar:not(.card-toolbar-open) .page-toolbar,
.card-preview-toolbar:not(.card-toolbar-open) .card-settings-panel {
    display: none !important;
}

.card-preview-toolbar .card-settings-panel {
    top: calc(100% + 8px);
    right: 260px;
    z-index: 149;
}

.card-preview-toolbar .page-toolbar-horizontal {
    gap: 6px;
}

.card-toolbar-group {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 6px;
    width: 100%;
    min-height: 0;
    padding: 24px 2px 8px;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.card-toolbar-group:last-child {
    border-bottom: 0;
    padding-bottom: 2px;
}

.card-toolbar-group::before {
    content: attr(data-group-title);
    position: absolute;
    top: 6px;
    left: 4px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .08em;
}

.card-toolbar-theme-group {
    grid-template-columns: minmax(0, 1fr) auto;
}

.card-toolbar-page-group {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card-toolbar-action-group {
    margin-left: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card-preview-toolbar .page-toolbar .page-toolbar-current {
    min-height: 28px;
    width: 100%;
    min-width: 0;
    grid-column: 1 / -1;
    order: -1;
}

.card-preview-toolbar .page-toolbar button {
    width: 100%;
    white-space: nowrap;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 6px;
    background: transparent;
    box-shadow: none;
}

.card-preview-toolbar .page-toolbar .page-toolbar-label {
    width: 100%;
    min-width: 0;
    padding: 0 8px;
    white-space: nowrap;
}

body.card-workspace-active .card-preview-toolbar .page-toolbar-horizontal {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 252px !important;
    min-width: 252px !important;
    max-width: 252px !important;
    padding: 7px 8px !important;
    gap: 0 !important;
}

body.card-workspace-active .card-preview-toolbar:not(.card-toolbar-open) .page-toolbar-horizontal,
body.card-workspace-active .card-preview-toolbar:not(.card-toolbar-open) .card-settings-panel {
    display: none !important;
}

body.card-workspace-active .card-preview-toolbar .page-toolbar-horizontal button,
body.card-workspace-active .card-preview-toolbar .page-toolbar-horizontal .page-toolbar-label {
    width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}

body.card-workspace-active .card-preview-toolbar .page-toolbar-horizontal .page-toolbar-current {
    min-width: 0 !important;
}

.page-toolbar button {
    border: 1px solid var(--border-color);
    background: var(--bg-dark);
    color: var(--text-light);
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 12px;
    cursor: pointer;
    width: 100%;
    transition: border-color 0.16s, color 0.16s, background 0.16s, transform 0.16s;
}

.card-preview-toolbar .page-toolbar button {
    min-height: 30px;
    padding: 0 10px;
    border-radius: 6px;
    font-weight: 650;
}

.card-preview-toolbar .page-toolbar button[data-action="first"],
.card-preview-toolbar .page-toolbar button[data-action="last"] {
    color: var(--text-muted);
}

.page-toolbar button:not(:disabled):hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-1px);
}

.page-toolbar button.primary {
    background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 72%, #ff8ba3));
    border-color: var(--primary);
    color: white;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--primary) 22%, transparent);
}

.page-toolbar button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.page-toolbar-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    width: 100%;
    padding: 0 4px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-light);
    color: var(--text-muted);
    font-size: 12px;
    text-align: center;
    line-height: 1.25;
    white-space: normal;
}

.page-toolbar-current {
    min-height: 38px;
}

.card-preview-toolbar .page-toolbar-current,
.card-preview-toolbar .page-toolbar-selected {
    min-height: 30px;
    border-radius: 6px;
    border-color: transparent;
    background: color-mix(in srgb, var(--primary) 7%, var(--bg-light));
    color: color-mix(in srgb, var(--primary) 76%, var(--text-light));
    font-weight: 750;
}

.card-preview-toolbar .page-toolbar-selected::before {
    content: none;
    display: none;
}

.card-format-picker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    color: var(--text-muted);
    font-size: 12px;
}

.card-theme-picker span,
.card-format-picker span {
    padding-left: 4px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
}

.card-format-picker select {
    min-height: 32px;
    padding: 0 8px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    background: var(--bg-dark);
    color: var(--text-light);
    font-size: 12px;
}

.card-theme-picker select,
.card-format-picker select {
    min-width: 118px;
    border-radius: 999px;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--bg-dark) 84%, rgba(255,255,255,.06)),
            var(--bg-dark));
    font-weight: 650;
}

.page-render-status {
    width: 300px;
    padding: 16px;
    color: var(--text-muted);
    text-align: center;
}

.cards-container .xhs-card.pixel-page,
.xhs-card.pixel-page {
    width: var(--pixel-card-w, 300px) !important;
    height: var(--pixel-card-h, 400px) !important;
    min-height: var(--pixel-card-h, 400px) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    position: relative !important;
    display: block !important;
    box-sizing: border-box !important;
    box-shadow:
        0 18px 48px rgba(0, 0, 0, 0.24),
        0 2px 8px rgba(0, 0, 0, 0.12) !important;
    background:
        linear-gradient(
            var(--mdia-card-theme-surface, #ffffff),
            var(--mdia-card-theme-surface, #ffffff)
        ),
        #ffffff !important;
    transition: opacity 0.16s, outline-color 0.16s, transform 0.16s, box-shadow 0.16s !important;
}

body.card-workspace-active .cards-container .xhs-card.pixel-page:hover {
    transform: translateY(-2px);
    box-shadow:
        0 24px 58px rgba(0, 0, 0, 0.3),
        0 4px 12px rgba(0, 0, 0, 0.16) !important;
}

.xhs-card.pixel-page.current-preview-page {
    outline: 2px solid color-mix(in srgb, var(--primary) 86%, #fff);
    outline-offset: 6px;
    box-shadow:
        0 26px 68px rgba(0, 0, 0, 0.30),
        0 0 0 8px color-mix(in srgb, var(--primary) 9%, transparent) !important;
}

.xhs-card.pixel-page .page-select {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 20;
    width: 22px;
    height: 22px;
    margin: 0;
    appearance: none;
    border: 1px solid rgba(255,255,255,.78);
    border-radius: 7px;
    background: rgba(255,255,255,.72);
    box-shadow:
        0 6px 14px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,.65);
    cursor: pointer;
    transition: transform .16s, background .16s, border-color .16s;
}

.xhs-card.pixel-page .page-select:hover {
    transform: scale(1.06);
}

.xhs-card.pixel-page .page-select:checked {
    border-color: var(--primary);
    background: var(--primary);
}

.xhs-card.pixel-page .page-select:checked::after {
    content: "✓";
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
}

.xhs-card.pixel-page[data-selected="false"] {
    opacity: 0.55;
    filter: saturate(.74);
}

.cards-container .xhs-card.pixel-page .preview-content,
.xhs-card.pixel-page .preview-content {
    position: absolute !important;
    top: var(--pixel-content-top, 20px) !important;
    left: var(--pixel-content-side, 12px) !important;
    right: var(--pixel-content-side, 12px) !important;
    bottom: var(--pixel-footer-h, 24px) !important;
    width: auto !important;
    height: var(--pixel-content-h, 356px) !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    color: #333;
    font-size: 13px !important;
    line-height: 1.65 !important;
    background: transparent !important;
}

/* v61: article cards inherit the active built-in theme instead of card fallback typography. */
.xhs-card.pixel-page:not(.card-theme-article) .preview-content h1 {
    font-size: 16px !important;
    line-height: 1.4 !important;
    margin: 0 0 8px !important;
    padding: 5px 0 !important;
    border-top: 2px solid currentColor !important;
    border-bottom: 2px solid currentColor !important;
    text-align: center !important;
}

.xhs-card.pixel-page:not(.card-theme-article) .preview-content h2 {
    font-size: 16px !important;
    line-height: 1.4 !important;
    margin: 0 0 9px !important;
    padding: 0 0 5px !important;
    border-bottom: 1px solid currentColor !important;
    text-align: left !important;
}

.xhs-card.pixel-page:not(.card-theme-article) .preview-content h2::after {
    content: "" !important;
    display: block !important;
    width: 44px !important;
    height: 2px !important;
    margin-top: 5px !important;
    margin-bottom: -5px !important;
    background: currentColor;
    line-height: 0 !important;
}

.xhs-card.pixel-page:not(.card-theme-article) .preview-content h3 {
    font-size: 14px !important;
    line-height: 1.4 !important;
    margin: 0 0 6px !important;
    text-align: left !important;
}

.xhs-card.pixel-page:not(.card-theme-article) .preview-content h4,
.xhs-card.pixel-page:not(.card-theme-article) .preview-content h5,
.xhs-card.pixel-page:not(.card-theme-article) .preview-content h6 {
    max-width: 100% !important;
    margin: 2px 0 5px !important;
    padding: 0 !important;
    line-height: 1.45 !important;
    text-align: left !important;
    overflow-wrap: anywhere !important;
    font-style: normal !important;
    font-weight: 700 !important;
}

.xhs-card.pixel-page:not(.card-theme-article) .preview-content h4 { font-size: 13px !important; }
.xhs-card.pixel-page:not(.card-theme-article) .preview-content h5 { font-size: 12.5px !important; }
.xhs-card.pixel-page:not(.card-theme-article) .preview-content h6 { font-size: 12px !important; }

.xhs-card.pixel-page .preview-content.wechat-article,
.xhs-card.pixel-page .preview-content.wechat-article * {
    box-sizing: border-box;
}

.xhs-card.pixel-page .preview-content.wechat-article > * {
    max-width: 100% !important;
}

.xhs-card.pixel-page .preview-content.wechat-article a,
.xhs-card.pixel-page .preview-content.wechat-article code {
    overflow-wrap: anywhere;
}

/* codex v99: themed cards already have their own top markers; keep H2 titles clean. */
.xhs-card.pixel-page:not(.card-theme-article) .preview-content.wechat-article h2[data-card-section-label]::before,
.xhs-card.pixel-page:not(.card-theme-article) .preview-content.wechat-article h2::before {
    content: none !important;
    display: none !important;
}

/* codex v100: normalize themed card heading rules after global H2 fallbacks. */
body .xhs-card.pixel-page.card-theme-article { --card-heading-rule-color: #a3262f; --card-footer-theme-color: #888888; }
body .xhs-card.pixel-page.card-theme-social { --card-heading-rule-color: #1d9bf0; --card-footer-theme-color: #536471; }
body .xhs-card.pixel-page.card-theme-memo { --card-heading-rule-color: #8d775a; --card-footer-theme-color: rgba(63, 57, 47, .62); }
body .xhs-card.pixel-page.card-theme-clinical { --card-heading-rule-color: #0b5967; --card-footer-theme-color: #4e7d92; }
body .xhs-card.pixel-page.card-theme-journal { --card-heading-rule-color: #bd302d; --card-footer-theme-color: #6c665c; }
body .xhs-card.pixel-page.card-theme-research { --card-heading-rule-color: #e06b43; --card-footer-theme-color: #446451; }
body .xhs-card.pixel-page.card-theme-visual { --card-heading-rule-color: #343b40; --card-footer-theme-color: #68757d; }
body .xhs-card.pixel-page.card-theme-lecture { --card-heading-rule-color: #22d3ee; --card-footer-theme-color: #8fc4dd; }
body .xhs-card.pixel-page.card-theme-case { --card-heading-rule-color: #0f766e; --card-footer-theme-color: #4f746d; }
body .xhs-card.pixel-page.card-theme-atlas { --card-heading-rule-color: #7c3aed; --card-footer-theme-color: #6d5d93; }
body .xhs-card.pixel-page.card-theme-protocol { --card-heading-rule-color: #0369a1; --card-footer-theme-color: #4b7895; }

/* codex v137: card pages are independent .wechat-article roots, so article-theme counters need the global Markdown section label. */
body .xhs-card.pixel-page.card-theme-article .preview-content.wechat-article h2[data-card-section-label]::before {
    content: attr(data-card-section-label) !important;
    color: var(--card-heading-rule-color, #a3262f) !important;
}

body .xhs-card.pixel-page .preview-content.wechat-article h2 {
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    box-shadow: none !important;
}

body .xhs-card.pixel-page.card-theme-article .preview-content.wechat-article h2,
body .xhs-card.pixel-page.card-theme-memo .preview-content.wechat-article h2,
body .xhs-card.pixel-page.card-theme-clinical .preview-content.wechat-article h2,
body .xhs-card.pixel-page.card-theme-journal .preview-content.wechat-article h2,
body .xhs-card.pixel-page.card-theme-research .preview-content.wechat-article h2,
body .xhs-card.pixel-page.card-theme-lecture .preview-content.wechat-article h2,
body .xhs-card.pixel-page.card-theme-case .preview-content.wechat-article h2 {
    padding: 0 0 4px !important;
    background: transparent !important;
    border-radius: 0 !important;
}

body .xhs-card.pixel-page.card-theme-visual .preview-content.wechat-article h2,
body .xhs-card.pixel-page.card-theme-atlas .preview-content.wechat-article h2,
body .xhs-card.pixel-page.card-theme-protocol .preview-content.wechat-article h2 {
    padding: 8px 10px !important;
}

body .xhs-card.pixel-page .preview-content.wechat-article h2::after {
    content: "" !important;
    display: block !important;
    width: 36px !important;
    height: 2px !important;
    margin: 6px 0 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--card-heading-rule-color, currentColor) !important;
    line-height: 0 !important;
}

body .xhs-card.pixel-page.card-theme-journal::after,
body .xhs-card.pixel-page.card-theme-protocol::before {
    display: none !important;
}

body .xhs-card.pixel-page .pixel-page-footer,
body .xhs-card.pixel-page .card-theme-bottomline,
body .xhs-card.pixel-page .page-number {
    color: var(--card-footer-theme-color, currentColor) !important;
}

body .xhs-card.pixel-page.card-theme-bottomline-hidden .pixel-page-footer {
    visibility: hidden !important;
    pointer-events: none !important;
}

/* codex v102: cards should not inherit drop-cap or first-letter decorations. */
body .xhs-card.pixel-page .preview-content.wechat-article p::first-letter,
body .xhs-card.pixel-page .preview-content.wechat-article li::first-letter,
body .xhs-card.pixel-page .preview-content.wechat-article blockquote::first-letter,
body .xhs-card.pixel-page .preview-content p::first-letter,
body .xhs-card.pixel-page .preview-content li::first-letter,
body .xhs-card.pixel-page .preview-content blockquote::first-letter {
    color: inherit !important;
    background: transparent !important;
    font: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    text-transform: none !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

.xhs-card.pixel-page:not(.card-theme-article) .preview-content p {
    font-size: 13px !important;
    line-height: 1.65 !important;
    margin: 0 0 6px !important;
    text-align: justify !important;
    text-align-last: left !important;
    text-justify: auto !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    line-break: strict !important;
}

.xhs-card.pixel-page .preview-content p.pagination-has-continuation,
.xhs-card.pixel-page .preview-content li.pagination-has-continuation,
.xhs-card.pixel-page .preview-content blockquote.pagination-has-continuation {
    margin-bottom: 0 !important;
}

/* codex v139: justify the last visible line only when a card paragraph continues on the next page. */
body .xhs-card.pixel-page .preview-content p.pagination-has-continuation,
body .xhs-card.pixel-page .preview-content li.pagination-has-continuation,
body .xhs-card.pixel-page .preview-content blockquote.pagination-has-continuation {
    text-align: justify !important;
    text-align-last: justify !important;
    text-justify: inter-ideograph !important;
}

.xhs-card.pixel-page .preview-content p.pagination-has-continuation::after,
.xhs-card.pixel-page .preview-content li.pagination-has-continuation::after,
.xhs-card.pixel-page .preview-content blockquote.pagination-has-continuation::after {
    content: none;
    display: none;
    color: currentColor;
    opacity: 0.72;
    font-weight: 700;
}

.xhs-card.pixel-page .preview-content p.pagination-continuation,
.xhs-card.pixel-page .preview-content li.pagination-continuation,
.xhs-card.pixel-page .preview-content blockquote.pagination-continuation {
    margin-top: -1px !important;
}

.xhs-card.pixel-page .preview-content p.pagination-continuation::before,
.xhs-card.pixel-page .preview-content li.pagination-continuation::before,
.xhs-card.pixel-page .preview-content blockquote.pagination-continuation::before {
    content: none;
    display: none;
    color: currentColor;
    opacity: 0.72;
    font-weight: 700;
}

/* codex v103: card pagination keeps continuation classes without printing visible continuation markers. */
body .xhs-card.pixel-page .preview-content p.pagination-has-continuation::after,
body .xhs-card.pixel-page .preview-content li.pagination-has-continuation::after,
body .xhs-card.pixel-page .preview-content blockquote.pagination-has-continuation::after,
body .xhs-card.pixel-page .preview-content p.pagination-continuation::before,
body .xhs-card.pixel-page .preview-content li.pagination-continuation::before,
body .xhs-card.pixel-page .preview-content blockquote.pagination-continuation::before {
    content: none !important;
    display: none !important;
}

/* codex v104: make visual abstract and image atlas headers lighter and hierarchy-consistent. */
body .xhs-card.pixel-page.card-theme-visual:not(.page-type-cover) .card-theme-topline,
body .xhs-card.pixel-page.card-theme-atlas:not(.page-type-cover) .card-theme-topline {
    top: 16px !important;
    right: 18px !important;
    left: 18px !important;
    height: auto !important;
    padding: 0 0 7px !important;
    background: transparent !important;
    border-bottom: 1px solid currentColor !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--card-heading-rule-color, currentColor) !important;
    font: 800 7.5px/1.15 "SFMono-Regular", Consolas, monospace !important;
    letter-spacing: .15em !important;
    text-transform: uppercase !important;
}

body .xhs-card.pixel-page.card-theme-visual:not(.page-type-cover) .card-theme-topline::before,
body .xhs-card.pixel-page.card-theme-atlas:not(.page-type-cover) .card-theme-topline::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 2px;
    margin: 0 7px 2px 0;
    border-radius: 999px;
    background: currentColor;
    vertical-align: middle;
}

body .xhs-card.pixel-page.card-theme-visual:not(.page-type-cover) .preview-content,
body .xhs-card.pixel-page.card-theme-atlas:not(.page-type-cover) .preview-content {
    top: 44px !important;
    height: calc(var(--pixel-content-h, 356px) - 26px) !important;
}

body .xhs-card.pixel-page.card-theme-visual .preview-content.wechat-article h1,
body .xhs-card.pixel-page.card-theme-atlas .preview-content.wechat-article h1 {
    margin: 0 0 10px !important;
    padding: 0 0 7px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #222b31 !important;
    font-family: "Source Han Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    line-height: 1.34 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
}

body .xhs-card.pixel-page.card-theme-atlas .preview-content.wechat-article h1 {
    color: #2e2551 !important;
}

body .xhs-card.pixel-page.card-theme-visual .preview-content.wechat-article h1::after,
body .xhs-card.pixel-page.card-theme-atlas .preview-content.wechat-article h1::after {
    content: "" !important;
    display: block !important;
    width: 34px !important;
    height: 2px !important;
    margin: 6px 0 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--card-heading-rule-color, currentColor) !important;
    line-height: 0 !important;
}

.xhs-card.pixel-page .preview-content .no-break {
    display: inline-block !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
}

.xhs-card.pixel-page .preview-content p,
.xhs-card.pixel-page .preview-content li,
.xhs-card.pixel-page .preview-content blockquote,
.xhs-card.pixel-page .preview-content pre,
.xhs-card.pixel-page .preview-content .img-figure {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
}

.xhs-card.pixel-page:not(.card-theme-article) .preview-content ul,
.xhs-card.pixel-page:not(.card-theme-article) .preview-content ol {
    margin: 0 0 6px !important;
    padding-left: 16px !important;
    text-align: left !important;
}

.xhs-card.pixel-page:not(.card-theme-article) .preview-content li {
    display: list-item !important;
    list-style-position: outside !important;
    font-size: 13px !important;
    line-height: 1.65 !important;
    margin: 0 0 3px !important;
    text-align: left !important;
}

.xhs-card.pixel-page:not(.card-theme-article) .preview-content ul {
    list-style-type: disc !important;
}

.xhs-card.pixel-page:not(.card-theme-article) .preview-content ol {
    list-style-type: decimal !important;
}

.xhs-card.pixel-page:not(.card-theme-article) .preview-content li > ul,
.xhs-card.pixel-page:not(.card-theme-article) .preview-content li > ol {
    margin-top: 4px !important;
    margin-bottom: 0 !important;
}

.xhs-card.pixel-page:not(.card-theme-article) .preview-content blockquote {
    font-size: 13px !important;
    text-align: left !important;
    line-height: 1.65 !important;
    margin: 0 0 6px !important;
    padding: 7px 10px 7px 12px !important;
    border-left: 3px solid var(--primary) !important;
}

.xhs-card.pixel-page:not(.card-theme-article) .preview-content blockquote.markdown-alert {
    border-left: 0 !important;
    border-radius: 9px !important;
}

.xhs-card.pixel-page:not(.card-theme-article) .preview-content pre {
    font-size: 11px !important;
    line-height: 1.5 !important;
    margin: 0 0 6px !important;
    padding: 9px !important;
    border-radius: 4px !important;
    overflow-x: auto !important;
}

.xhs-card.pixel-page:not(.card-theme-article) .preview-content pre code {
    font-size: 11px !important;
    line-height: 1.5 !important;
}

.xhs-card.pixel-page:not(.card-theme-article) .preview-content table {
    display: table !important;
    width: 100% !important;
    table-layout: auto !important;
    border-collapse: collapse !important;
    margin: 0 0 6px !important;
    font-size: 11px !important;
    line-height: 1.32 !important;
    overflow-x: visible !important;
    break-inside: auto !important;
    page-break-inside: auto !important;
}

.xhs-card.pixel-page:not(.card-theme-article) .preview-content th {
    padding: 4px 5px !important;
    font-size: 11px !important;
    line-height: 1.32 !important;
    vertical-align: top !important;
    word-break: break-word !important;
}

.xhs-card.pixel-page:not(.card-theme-article) .preview-content td {
    padding: 3px 5px !important;
    font-size: 11px !important;
    line-height: 1.32 !important;
    vertical-align: top !important;
    word-break: break-word !important;
}

.xhs-card.pixel-page:not(.card-theme-article) .preview-content th:first-child,
.xhs-card.pixel-page:not(.card-theme-article) .preview-content td:first-child {
    width: auto !important;
}

.xhs-card.pixel-page:not(.card-theme-article) .preview-content th:not(:first-child),
.xhs-card.pixel-page:not(.card-theme-article) .preview-content td:not(:first-child) {
    width: auto !important;
}

.xhs-card.pixel-page:not(.card-theme-article) .preview-content table.table-width-synced {
    table-layout: fixed !important;
}

.xhs-card.pixel-page .preview-content .img-figure {
    margin: 1px 0 3px !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.xhs-card.pixel-page .preview-content .img-figure .img-wrapper,
.xhs-card.pixel-page .preview-content .img-figure .img-stage {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    line-height: 0 !important;
    font-size: 0 !important;
}

.xhs-card.pixel-page .preview-content img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: var(--inline-img-content-max-h, none) !important;
    margin: 0 auto !important;
    border-radius: 0 !important;
    object-fit: contain !important;
}

.xhs-card.image-border-on .preview-content .img-figure {
    box-shadow: none !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.xhs-card.image-border-on .preview-content .img-figure .img-wrapper,
.xhs-card.image-border-on .preview-content .img-figure .img-stage {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(60, 72, 88, 0.22) !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.36) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04) !important;
}

.xhs-card.image-border-on .preview-content .img-figure img {
    border-radius: 8px !important;
}

.xhs-card.pixel-page .preview-content .img-stage .img-fallback {
    display: none;
}

.xhs-card.pixel-page .preview-content .img-stage.img-failed img {
    display: none !important;
}

.xhs-card.pixel-page .preview-content .img-stage.img-failed .img-fallback {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.xhs-card.pixel-page .preview-content .img-caption {
    display: block !important;
    width: 100% !important;
    margin: 2px 0 0 !important;
    color: rgba(40, 52, 70, 0.72) !important;
    font-size: 10px !important;
    font-style: normal !important;
    line-height: 1.35 !important;
    text-align: center !important;
    text-align-last: center !important;
    text-justify: auto !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
}

.xhs-card.pixel-page .preview-content .img-caption.caption-multi-line {
    text-align: justify !important;
    text-align-last: left !important;
    text-justify: inter-ideograph !important;
}

.xhs-card.pixel-page .preview-content .img-caption.caption-single-line {
    text-align: center !important;
    text-align-last: center !important;
}

.xhs-card.pixel-page:not(.card-theme-article) .preview-content hr {
    margin: 8px 0 !important;
    border: 0 !important;
    border-top: 1px solid currentColor !important;
}

.cards-container .xhs-card.pixel-page.page-type-cover .preview-content,
.xhs-card.pixel-page.page-type-cover .preview-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    height: var(--pixel-content-h, 356px) !important;
    max-height: var(--pixel-content-h, 356px) !important;
    overflow: hidden !important;
}

.xhs-card.pixel-page.page-type-cover .cover-page-content {
    padding: 20px !important;
    gap: 0 !important;
    z-index: 2;
}

.xhs-card.pixel-page.page-type-cover .cover-page-content:has(.standalone-cover-fill) {
    padding: 0 !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    overflow: hidden !important;
}

.xhs-card.pixel-page.page-type-cover:has(.standalone-cover-fill)::before {
    display: none !important;
}

.standalone-cover-fill {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #f5f6fa;
}

.standalone-cover-fill img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(var(--cover-image-scale, 1));
    transform-origin: center;
    display: block;
    border-radius: 0 !important;
    margin: 0 !important;
}

/* 封面内层：由 JS 在溢出时整体 scale，仍占满单卡安全区 */
.xhs-card.pixel-page.page-type-cover .pixel-cover-scale-inner {
    width: 100% !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 100% !important;
    position: static !important;
    z-index: 2 !important;
}

.xhs-card.pixel-page.page-type-cover::before {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 1;
}

.xhs-card.pixel-page.page-type-cover::before {
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.62) 0 1px, transparent 1px 100%),
        linear-gradient(0deg, rgba(255,255,255,0.42) 0 1px, transparent 1px 100%);
    background-size: 26px 26px;
    opacity: 0.18;
}

.xhs-card.pixel-page.page-type-cover .cover-check {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    width: 21px;
    height: 21px;
    border-radius: 4px;
    background: var(--primary);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 900;
    line-height: 1;
}

.xhs-card.pixel-page.page-type-cover:has(.page-select) .cover-check {
    display: none;
}

.xhs-card.pixel-page.page-type-cover .cover-image-figure {
    width: 100% !important;
    max-height: 140px !important;
    margin: 0 !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
}

.xhs-card.pixel-page.page-type-cover .cover-image-figure .img-wrapper,
.xhs-card.pixel-page.page-type-cover .cover-image-figure .img-stage {
    width: 100% !important;
    max-height: 140px !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.xhs-card.pixel-page.page-type-cover .cover-image-figure img {
    width: 100% !important;
    max-height: 140px !important;
    object-fit: contain !important;
    border-radius: 0 !important;
}

.xhs-card.pixel-page.page-type-cover .cover-image-figure + .img-caption {
    width: 100% !important;
    margin: 7px 0 0 !important;
    color: currentColor !important;
    opacity: 0.68;
    font-size: var(--cover-caption-font-size, 8px) !important;
    line-height: 1.32 !important;
    text-align: justify !important;
    text-align-last: auto !important;
    display: block !important;
    overflow: visible !important;
    max-height: none !important;
}

.xhs-card.pixel-page.page-type-cover .cover-title {
    width: 100%;
    color: currentColor;
    font-size: 16px;
    font-weight: 900;
    line-height: 1.36;
    text-align: center;
    word-break: normal;
    overflow-wrap: anywhere;
    padding: 8px 0 7px;
    border-top: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
}

.xhs-card.pixel-page.page-type-cover .cover-visual {
    width: 100%;
    margin-top: 9px;
    padding-top: 0;
}

.xhs-card.pixel-page.page-type-cover .preview-content h1 {
    font-size: 23px !important;
    margin: 0 !important;
    width: 100% !important;
    text-align: center !important;
    line-height: 1.32 !important;
    overflow: hidden !important;
    white-space: normal !important;
    word-break: break-word !important;
    align-self: stretch !important;
}

.xhs-card.pixel-page.page-type-cover .preview-content p,
.xhs-card.pixel-page.page-type-cover .preview-content ul,
.xhs-card.pixel-page.page-type-cover .preview-content ol,
.xhs-card.pixel-page.page-type-cover .preview-content blockquote {
    text-align: center !important;
}

.xhs-card.pixel-page .image-page-content {
    display: grid !important;
    grid-template-rows: 1fr auto !important;
    align-items: stretch !important;
    gap: 8px !important;
}

.cards-container .xhs-card.pixel-page > .preview-content.image-page-content {
    overflow: hidden !important;
    height: var(--pixel-content-h, 356px) !important;
}

.xhs-card.pixel-page .image-page-figure {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    box-sizing: border-box;
    border: none;
    border-radius: 0;
    background: transparent;
    overflow: hidden;
}

.xhs-card.pixel-page .preview-content .image-page-figure .img-wrapper,
.xhs-card.pixel-page .preview-content .image-page-figure .img-stage {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.xhs-card.pixel-page .image-page-figure img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: var(--inline-img-content-max-h, none) !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    display: block !important;
}

.xhs-card.pixel-page .image-page-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 8px;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 8px;
    background: rgba(255,255,255,0.7);
    font-size: 10px;
    line-height: 1.25;
    overflow: visible !important;
}

.xhs-card.pixel-page .pixel-page-footer {
    position: absolute;
    left: 20px;
    right: 15px;
    bottom: 0;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #888;
    font-size: 11px;
    line-height: 1;
    z-index: 14;
}

.xhs-card.pixel-page .card-theme-bottomline {
    font-weight: 700;
    letter-spacing: .035em;
}

.xhs-card.pixel-page .preview-content,
.xhs-card.pixel-page .pixel-page-footer,
.xhs-card.pixel-page .card-theme-topline {
    z-index: 3;
}

.xhs-card.pixel-page .page-number {
    min-width: 34px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.xhs-card.pixel-page .pixel-watermark-layer {
    position: absolute;
    inset: 0;
    z-index: 999;
    pointer-events: none;
    --wm-offset-x: 0px;
    --wm-offset-y: 0px;
    --wm-opacity: 0.72;
    --wm-gap: 22px;
    --wm-angle: -18deg;
    opacity: var(--wm-opacity);
}

.xhs-card.pixel-page .pixel-watermark {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 168px;
    padding: 4px 7px 4px 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.62);
    color: rgba(42, 42, 52, 0.62);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(6px);
    font-size: 10px;
    line-height: 1;
    white-space: nowrap;
}

.xhs-card.pixel-page .pixel-watermark span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.xhs-card.pixel-page .pixel-watermark-avatar {
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
}

.xhs-card.pixel-page .pixel-watermark-pos-top-left .pixel-watermark,
.xhs-card.pixel-page .pixel-watermark-pos-top-center .pixel-watermark,
.xhs-card.pixel-page .pixel-watermark-pos-top-right .pixel-watermark,
.xhs-card.pixel-page .pixel-watermark-pos-bottom-left .pixel-watermark,
.xhs-card.pixel-page .pixel-watermark-pos-bottom-center .pixel-watermark,
.xhs-card.pixel-page .pixel-watermark-pos-bottom-right .pixel-watermark {
    position: absolute;
}

.xhs-card.pixel-page .pixel-watermark-pos-top-left .pixel-watermark {
    left: calc(14px + var(--wm-offset-x));
    top: calc(12px + var(--wm-offset-y));
}

.xhs-card.pixel-page .pixel-watermark-pos-top-center .pixel-watermark {
    left: calc(50% + var(--wm-offset-x));
    top: calc(12px + var(--wm-offset-y));
    transform: translateX(-50%);
}

.xhs-card.pixel-page .pixel-watermark-pos-top-right .pixel-watermark {
    right: calc(14px - var(--wm-offset-x));
    top: calc(12px + var(--wm-offset-y));
}

.xhs-card.pixel-page .pixel-watermark-pos-bottom-left .pixel-watermark {
    left: calc(14px + var(--wm-offset-x));
    bottom: calc(12px - var(--wm-offset-y));
}

.xhs-card.pixel-page .pixel-watermark-pos-bottom-center .pixel-watermark {
    left: calc(50% + var(--wm-offset-x));
    bottom: calc(12px - var(--wm-offset-y));
    transform: translateX(-50%);
}

.xhs-card.pixel-page .pixel-watermark-pos-bottom-right .pixel-watermark {
    right: calc(14px - var(--wm-offset-x));
    bottom: calc(24px - var(--wm-offset-y));
}

.xhs-card.pixel-page .pixel-watermark-full {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-content: space-around;
    gap: var(--wm-gap) 12px;
    padding: 34px 18px;
    transform: rotate(var(--wm-angle)) scale(1.03);
    transform-origin: center;
}

.xhs-card.pixel-page .pixel-watermark-full .pixel-watermark {
    justify-self: center;
    max-width: 120px;
    background: rgba(255, 255, 255, 0.35);
    box-shadow: none;
}

.xhs-card.pixel-page .pixel-watermark-full .pixel-watermark-avatar {
    width: 16px !important;
    height: 16px !important;
}

.xhs-card.pixel-page .page-number {
    position: static !important;
    margin-left: auto;
    font-size: 11px !important;
    color: #999 !important;
}

.xhs-card:not(.pixel-page) .pixel-watermark-layer,
.desktop-frame .pixel-watermark-layer,
.cover-settings-preview .pixel-watermark-layer {
    position: absolute;
    inset: 0;
    z-index: 999;
    pointer-events: none;
    --wm-offset-x: 0px;
    --wm-offset-y: 0px;
    --wm-opacity: 0.72;
    --wm-gap: 22px;
    --wm-angle: -18deg;
    opacity: var(--wm-opacity);
}

.xhs-card:not(.pixel-page) .pixel-watermark,
.desktop-frame .pixel-watermark,
.cover-settings-preview .pixel-watermark {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 168px;
    padding: 4px 7px 4px 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.62);
    color: rgba(42, 42, 52, 0.62);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(6px);
    font-size: 10px;
    line-height: 1;
    white-space: nowrap;
}

.xhs-card:not(.pixel-page) .pixel-watermark span,
.desktop-frame .pixel-watermark span,
.cover-settings-preview .pixel-watermark span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.xhs-card:not(.pixel-page) .pixel-watermark-avatar,
.desktop-frame .pixel-watermark-avatar,
.cover-settings-preview .pixel-watermark-avatar {
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
}

.xhs-card:not(.pixel-page) .pixel-watermark-pos-top-left .pixel-watermark,
.xhs-card:not(.pixel-page) .pixel-watermark-pos-top-center .pixel-watermark,
.xhs-card:not(.pixel-page) .pixel-watermark-pos-top-right .pixel-watermark,
.xhs-card:not(.pixel-page) .pixel-watermark-pos-bottom-left .pixel-watermark,
.xhs-card:not(.pixel-page) .pixel-watermark-pos-bottom-center .pixel-watermark,
.xhs-card:not(.pixel-page) .pixel-watermark-pos-bottom-right .pixel-watermark,
.desktop-frame .pixel-watermark-pos-top-left .pixel-watermark,
.desktop-frame .pixel-watermark-pos-top-center .pixel-watermark,
.desktop-frame .pixel-watermark-pos-top-right .pixel-watermark,
.desktop-frame .pixel-watermark-pos-bottom-left .pixel-watermark,
.desktop-frame .pixel-watermark-pos-bottom-center .pixel-watermark,
.desktop-frame .pixel-watermark-pos-bottom-right .pixel-watermark,
.cover-settings-preview .pixel-watermark-pos-top-left .pixel-watermark,
.cover-settings-preview .pixel-watermark-pos-top-center .pixel-watermark,
.cover-settings-preview .pixel-watermark-pos-top-right .pixel-watermark,
.cover-settings-preview .pixel-watermark-pos-bottom-left .pixel-watermark,
.cover-settings-preview .pixel-watermark-pos-bottom-center .pixel-watermark,
.cover-settings-preview .pixel-watermark-pos-bottom-right .pixel-watermark {
    position: absolute;
}

.xhs-card:not(.pixel-page) .pixel-watermark-pos-top-left .pixel-watermark,
.desktop-frame .pixel-watermark-pos-top-left .pixel-watermark,
.cover-settings-preview .pixel-watermark-pos-top-left .pixel-watermark {
    left: calc(14px + var(--wm-offset-x));
    top: calc(12px + var(--wm-offset-y));
}

.xhs-card:not(.pixel-page) .pixel-watermark-pos-top-center .pixel-watermark,
.desktop-frame .pixel-watermark-pos-top-center .pixel-watermark,
.cover-settings-preview .pixel-watermark-pos-top-center .pixel-watermark {
    left: calc(50% + var(--wm-offset-x));
    top: calc(12px + var(--wm-offset-y));
    transform: translateX(-50%);
}

.xhs-card:not(.pixel-page) .pixel-watermark-pos-top-right .pixel-watermark,
.desktop-frame .pixel-watermark-pos-top-right .pixel-watermark,
.cover-settings-preview .pixel-watermark-pos-top-right .pixel-watermark {
    right: calc(14px - var(--wm-offset-x));
    top: calc(12px + var(--wm-offset-y));
}

.xhs-card:not(.pixel-page) .pixel-watermark-pos-bottom-left .pixel-watermark,
.desktop-frame .pixel-watermark-pos-bottom-left .pixel-watermark,
.cover-settings-preview .pixel-watermark-pos-bottom-left .pixel-watermark {
    left: calc(14px + var(--wm-offset-x));
    bottom: calc(12px - var(--wm-offset-y));
}

.xhs-card:not(.pixel-page) .pixel-watermark-pos-bottom-center .pixel-watermark,
.desktop-frame .pixel-watermark-pos-bottom-center .pixel-watermark,
.cover-settings-preview .pixel-watermark-pos-bottom-center .pixel-watermark {
    left: calc(50% + var(--wm-offset-x));
    bottom: calc(12px - var(--wm-offset-y));
    transform: translateX(-50%);
}

.xhs-card:not(.pixel-page) .pixel-watermark-pos-bottom-right .pixel-watermark,
.desktop-frame .pixel-watermark-pos-bottom-right .pixel-watermark,
.cover-settings-preview .pixel-watermark-pos-bottom-right .pixel-watermark {
    right: calc(14px - var(--wm-offset-x));
    bottom: calc(24px - var(--wm-offset-y));
}

.xhs-card:not(.pixel-page) .pixel-watermark-full,
.desktop-frame .pixel-watermark-full,
.cover-settings-preview .pixel-watermark-full {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-content: space-around;
    gap: var(--wm-gap) 12px;
    padding: 34px 18px;
    transform: rotate(var(--wm-angle)) scale(1.03);
    transform-origin: center;
}

.xhs-card:not(.pixel-page) .pixel-watermark-full .pixel-watermark,
.desktop-frame .pixel-watermark-full .pixel-watermark,
.cover-settings-preview .pixel-watermark-full .pixel-watermark {
    justify-self: center;
    max-width: 120px;
    background: rgba(255, 255, 255, 0.35);
    box-shadow: none;
}

.xhs-card:not(.pixel-page) .pixel-watermark-full .pixel-watermark-avatar,
.desktop-frame .pixel-watermark-full .pixel-watermark-avatar,
.cover-settings-preview .pixel-watermark-full .pixel-watermark-avatar {
    width: 16px !important;
    height: 16px !important;
}

/* ==================== 电脑版主题系统 ==================== */

/* --- 电脑版基础排版（覆盖旧的简单规则）--- */
.desktop-frame {
    --dt-accent: #FE2C55;
    --dt-list-marker: #a3262f;
    --dt-heading: #111827;
    --dt-body: #374151;
    --dt-muted: #6B7280;
    --dt-border: #E5E7EB;
    --dt-bg: #ffffff;
    --dt-bg-code: #F3F4F6;
    --dt-bg-quote: #F9FAFB;
    --dt-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --dt-font-heading: inherit;
    background: var(--dt-bg);
    transition: background 0.3s, color 0.3s;
}

.desktop-frame .preview-content {
    color: var(--dt-body);
    font-size: 16px;
    line-height: 1.85;
    font-family: var(--dt-font-body);
}

.desktop-frame .preview-content h1 {
    font-family: var(--dt-font-heading);
    font-size: 1.85em;
    font-weight: 700;
    color: var(--dt-heading);
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 3px solid var(--dt-accent);
    line-height: 1.3;
    letter-spacing: -0.01em;
    text-align: center;
}

.desktop-frame .preview-content h2 {
    font-family: var(--dt-font-heading);
    font-size: 1.4em;
    font-weight: 700;
    color: var(--dt-heading);
    margin: 28px 0 12px;
    padding-left: 12px;
    border-left: 4px solid var(--dt-accent);
    line-height: 1.4;
}

.desktop-frame .preview-content h3 {
    font-family: var(--dt-font-heading);
    font-size: 1.15em;
    font-weight: 600;
    color: var(--dt-heading);
    margin: 20px 0 8px;
    line-height: 1.4;
}

.desktop-frame .preview-content h4,
.desktop-frame .preview-content h5,
.desktop-frame .preview-content h6 {
    font-weight: 600;
    color: var(--dt-heading);
    margin: 14px 0 6px;
}

.desktop-frame .preview-content p {
    margin: 0 0 14px;
    line-height: 1.85;
}

.desktop-frame .preview-content ul,
.desktop-frame .preview-content ol {
    margin: 0 0 14px;
    padding-left: 26px;
}

.desktop-frame .preview-content li {
    margin: 6px 0;
    line-height: 1.75;
}

.desktop-frame .preview-content ul li::marker {
    color: var(--dt-list-marker, var(--dt-accent));
}

.desktop-frame .preview-content ol li::marker {
    color: var(--dt-list-marker, var(--dt-accent));
    font-weight: 600;
}

.preview-content ul li,
.phone-content .xhs-card .preview-content ul li,
.xhs-card .preview-content ul li,
.xhs-card.pixel-page .preview-content ul li,
.desktop-frame .preview-content ul li,
.css-live-preview ul li {
    text-align: justify !important;
    text-align-last: left !important;
    text-justify: inter-ideograph !important;
}

.desktop-frame .preview-content blockquote {
    margin: 16px 0;
    padding: 12px 18px;
    border-left: 4px solid var(--dt-accent);
    background: var(--dt-bg-quote);
    color: var(--dt-muted);
    font-style: italic;
    border-radius: 0 8px 8px 0;
}

.desktop-frame .preview-content blockquote p {
    margin: 0;
}

.desktop-frame .preview-content code {
    background: var(--dt-bg-code);
    color: var(--dt-accent);
    padding: 2px 7px;
    border-radius: 5px;
    font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
    font-size: 0.87em;
    border: 1px solid var(--dt-border);
}

.desktop-frame .preview-content pre {
    background: #1e2030;
    color: #c0caf5;
    padding: 18px 20px;
    border-radius: 10px;
    overflow-x: auto;
    margin: 14px 0;
    font-size: 0.88em;
    line-height: 1.65;
}

.desktop-frame .preview-content pre code {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    font-size: inherit;
}

.desktop-frame .preview-content table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 0.93em;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.desktop-frame .preview-content th {
    background: #374151;
    color: #fff;
    padding: 10px 14px;
    text-align: left;
    font-weight: 600;
}

.desktop-frame .preview-content td {
    padding: 9px 14px;
    border-bottom: 1px solid var(--dt-border);
}

.desktop-frame .preview-content tr:nth-child(even) td {
    background: var(--dt-bg-quote);
}

.desktop-frame .preview-content a {
    color: var(--dt-accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
}

.desktop-frame .preview-content a:hover {
    border-bottom-color: var(--dt-accent);
}

.desktop-frame .preview-content hr {
    border: none;
    border-top: 2px solid var(--dt-border);
    margin: 24px 0;
}

.desktop-frame .preview-content img {
    max-width: 100%;
    border-radius: 8px;
    margin: 10px 0;
    display: block;
}

.desktop-frame .preview-content strong {
    color: var(--dt-heading);
    font-weight: 700;
}

/* 手机预览复用电脑端公众号主题，只保留手机壳尺寸。 */
.phone-content .phone-desktop-theme {
    width: 100%;
    max-width: none;
    min-height: 100%;
    height: auto;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
}

.phone-content .phone-desktop-theme .preview-content.wechat-article {
    min-height: 100%;
    max-height: none;
    overflow: visible;
}

.phone-content .phone-desktop-theme .preview-content table {
    font-size: 0.93em;
    margin: 16px 0;
    white-space: normal;
}

.phone-content .phone-desktop-theme .preview-content th,
.phone-content .phone-desktop-theme .preview-content td {
    padding: 9px 14px;
    font-size: inherit;
    white-space: normal;
    min-width: 0;
    max-width: none;
}

.phone-content .phone-desktop-theme .preview-content .img-caption.caption-multi-line {
    text-align: justify !important;
    text-align-last: left !important;
    text-justify: inter-ideograph !important;
}

/* ==================== 响应式 ==================== */
@media (max-width: 900px) {
    .main-content { flex-direction: column; }
    .editor-panel { border-right: none; border-bottom: 1px solid var(--border-color); height: 45%; }
    .preview-panel { height: 55%; }
    .preview-settings-panel,
    .preview-settings-sidebar { display: none; }
    .toolbar { padding: 8px 10px; }
    .toolbar-center { order: 3; width: 100%; justify-content: center; }
    .editor-panel .panel-header {
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .editor-panel .editor-tools {
        grid-column: 1 / -1;
        overflow-x: auto;
        padding-bottom: 2px;
    }
    .editor-panel .editor-stats {
        justify-self: end;
    }
    .preview-primary-controls,
    .preview-extra-controls { order: 3; flex-basis: 100%; }
    .preview-watermark-controls { order: 3; flex-basis: 100%; }
    .watermark-tuning input[type="range"] { width: 46px; }
    .phone-frame { width: min(680px, 100%); min-height: min(720px, calc(100dvh - 150px)); height: 100%; max-height: none; }
}

@media (max-width: 720px) {
    body {
        overflow: hidden;
    }

    .toolbar {
        display: none;
    }

    .app {
        height: 100dvh;
    }

    .top-personal-center {
        display: none;
    }

    body:not(.mobile-workspace-open) .main-content {
        display: none;
    }

    body.share-preview-mode {
        overflow: auto;
        background: #ffffff;
    }

    body.share-preview-mode .app {
        height: auto;
        min-height: 100dvh;
        overflow: visible;
    }

    body.share-preview-mode .main-content {
        display: flex !important;
        height: auto;
        min-height: 100dvh;
        overflow: visible;
    }

    body.share-preview-mode .mobile-home {
        display: none !important;
    }

    body.share-preview-mode .preview-panel {
        display: flex !important;
        min-height: 100dvh;
        overflow: visible;
    }

    body.share-preview-mode .preview-wrapper {
        min-height: 100dvh;
        overflow: visible;
    }

    .mobile-home {
        display: flex;
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        flex-direction: column;
        gap: 18px;
        padding: 14px 14px 18px;
        background:
            linear-gradient(180deg, color-mix(in srgb, var(--bg-light) 94%, #ffffff 6%), var(--bg-dark));
    }

    body.mobile-workspace-open .mobile-home {
        display: none;
    }

    .mobile-home-top {
        min-height: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .mobile-home-brand {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-size: 1.05em;
        font-weight: 800;
        color: var(--text-light);
    }

    .mobile-home-user,
    .mobile-back-home {
        width: 34px;
        height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--border-color);
        border-radius: 999px;
        background: var(--bg-light);
        color: var(--text-light);
        font-weight: 700;
        box-shadow: 0 8px 20px rgba(0,0,0,0.10);
    }

    .mobile-home-main {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
        align-items: center;
        padding: 6px 0 2px;
    }

    .mobile-home-copy {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .mobile-home-kicker {
        width: fit-content;
        padding: 4px 9px;
        border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border-color));
        border-radius: 999px;
        color: var(--primary);
        background: color-mix(in srgb, var(--primary) 7%, transparent);
        font-size: 0.74em;
        font-weight: 700;
    }

    .mobile-home-copy h2 {
        margin: 0;
        color: var(--text-light);
        font-size: 2.1em;
        line-height: 1.08;
        letter-spacing: 0;
    }

    .mobile-home-copy p {
        margin: 0;
        color: var(--text-muted);
        font-size: 0.96em;
        line-height: 1.7;
        text-align: justify;
    }

    .mobile-home-phone {
        width: min(100%, 260px);
        aspect-ratio: 9 / 13;
        margin: 4px auto 0;
        padding: 17px 16px;
        border: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
        border-radius: 22px;
        background: var(--bg-light);
        box-shadow: 0 18px 45px rgba(0,0,0,0.18);
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .mobile-phone-bar {
        width: 42px;
        height: 4px;
        border-radius: 999px;
        margin: 0 auto 4px;
        background: color-mix(in srgb, var(--text-muted) 48%, transparent);
    }

    .mobile-phone-title {
        width: 70%;
        height: 18px;
        border-radius: 6px;
        background: color-mix(in srgb, var(--primary) 24%, var(--bg-dark));
    }

    .mobile-phone-line {
        width: 82%;
        height: 8px;
        border-radius: 999px;
        background: color-mix(in srgb, var(--text-muted) 20%, transparent);
    }

    .mobile-phone-line.long {
        width: 100%;
    }

    .mobile-phone-line.short {
        width: 56%;
    }

    .mobile-phone-image {
        flex: 1;
        min-height: 116px;
        border-radius: 12px;
        border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border-color));
        background:
            linear-gradient(135deg, color-mix(in srgb, var(--primary) 18%, var(--bg-dark)), color-mix(in srgb, #24b8a3 24%, var(--bg-light)));
    }

    .mobile-home-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
        margin-top: auto;
    }

    .mobile-home-actions button {
        min-height: 42px;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        background: var(--bg-light);
        color: var(--text-light);
        font-weight: 700;
        font-size: 0.92em;
    }

    .mobile-home-actions .mobile-home-primary {
        grid-column: 1 / -1;
        border-color: var(--primary);
        background: var(--primary);
        color: #fff;
    }

    body.mobile-workspace-open .mobile-back-home {
        position: fixed;
        right: 10px;
        top: 10px;
        z-index: 6100;
        display: inline-flex;
        width: auto;
        min-width: 44px;
        padding: 0 9px;
        border-radius: 999px;
        font-size: 0.78em;
    }

    body.mobile-workspace-open .main-content {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: 38px auto minmax(0, 1fr);
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
    }

    body.mobile-workspace-open .app-sidebar {
        grid-column: 1 / -1;
        grid-row: 1;
        width: 100%;
        flex: none;
        min-height: 38px;
        flex-direction: row;
        align-items: center;
        padding: 4px 52px 4px 6px;
        border-right: 0;
        border-bottom: 1px solid var(--border-color);
    }

    body.mobile-workspace-open .app-rail-actions,
    body.mobile-workspace-open .app-nav-bottom {
        flex-direction: row;
        margin-left: 0;
    }

    body.mobile-workspace-open .file-tree-sidebar {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        flex: none;
        height: min(30dvh, 220px);
        min-height: 160px;
        border-right: 0;
        border-bottom: 1px solid var(--border-color);
    }

    body.mobile-workspace-open.file-tree-collapsed .file-tree-sidebar {
        display: none;
    }

    body.mobile-workspace-open.file-tree-collapsed .editor-panel,
    body.mobile-workspace-open.file-tree-collapsed .preview-panel {
        grid-row: 2 / 4;
    }

    body.mobile-workspace-open .editor-panel,
    body.mobile-workspace-open .preview-panel {
        min-width: 0;
        min-height: 0;
        height: auto;
        border-bottom: 0;
    }

    body.mobile-workspace-open .editor-panel {
        grid-column: 1;
        grid-row: 3;
        border-right: 1px solid var(--border-color);
    }

    body.mobile-workspace-open .preview-panel {
        grid-column: 2;
        grid-row: 3;
        position: relative;
        flex-direction: column;
    }

    body.mobile-workspace-open .panel-resizer {
        display: none;
    }

    body.mobile-workspace-open .editor-panel .panel-header {
        min-height: 40px;
        padding: 6px 8px;
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    body.mobile-workspace-open .editor-brand-title,
    body.mobile-workspace-open .editor-stats {
        display: none;
    }

    body.mobile-workspace-open .editor-tools {
        flex-wrap: nowrap;
        overflow-x: auto;
        width: 100%;
    }

    body.mobile-workspace-open #editor {
        padding: 10px;
        font-size: 13px;
        line-height: 1.55;
    }

    body.mobile-workspace-open .preview-wrapper {
        order: 1;
        flex: 1 1 auto;
        min-height: 0;
        padding: 8px;
        padding-bottom: 62px;
    }

    body.mobile-workspace-open .preview-panel .panel-header {
        order: 2;
        position: absolute;
        left: 6px;
        right: 6px;
        bottom: 6px;
        z-index: 20;
        display: flex;
        align-items: center;
        gap: 6px;
        min-height: 46px;
        max-height: 46px;
        padding: 6px;
        border: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
        border-radius: 10px;
        background: color-mix(in srgb, var(--bg-light) 92%, transparent);
        box-shadow: 0 12px 32px rgba(0,0,0,0.18);
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    body.mobile-workspace-open .preview-header-top {
        display: contents;
    }

    body.mobile-workspace-open .preview-tabs {
        flex: 0 0 auto;
        flex-wrap: nowrap;
        gap: 4px;
    }

    body.mobile-workspace-open .preview-panel .tab-btn,
    body.mobile-workspace-open .preview-panel .preview-tool-btn,
    body.mobile-workspace-open .preview-compact-toggle {
        min-height: 32px;
        padding: 5px 8px;
        white-space: nowrap;
        font-size: 0.78em;
    }

    body.mobile-workspace-open .preview-primary-controls,
    body.mobile-workspace-open .preview-extra-controls {
        flex: 0 0 auto;
        width: auto;
        padding: 0;
        border: 0;
        background: transparent;
        flex-wrap: nowrap;
        gap: 4px;
    }

    body.mobile-workspace-open .preview-primary-controls label,
    body.mobile-workspace-open .image-border-toggle,
    body.mobile-workspace-open .preview-tool-btn-watermark,
    body.mobile-workspace-open #cardPreviewToolbar {
        display: none !important;
    }

    body.mobile-workspace-open .preview-primary-controls select {
        display: none !important;
    }

    body.mobile-workspace-open .preview-compact-menu {
        top: auto;
        bottom: calc(100% + 8px);
        max-height: 55vh;
    }

    body.mobile-workspace-open .zoom-control {
        flex: 0 0 auto;
        margin-left: auto;
        gap: 4px;
    }

    body.mobile-workspace-open .zoom-control button {
        width: 28px;
        height: 28px;
        padding: 0;
    }

    body.mobile-workspace-open .zoom-control span {
        min-width: 42px;
        font-size: 0.76em;
    }

    body.mobile-workspace-open .preview-export-dropdown .dropdown-menu {
        top: auto;
        bottom: calc(100% + 8px);
        right: 0;
        left: auto;
    }

    body.mobile-workspace-open .phone-frame {
        width: min(100%, 680px);
        height: calc(100dvh - 152px);
        min-height: 300px;
        max-height: none;
        border-radius: 0;
        padding: 0;
    }

    body.mobile-workspace-open .phone-content {
        border-radius: 0;
        margin-top: 0;
    }
}

@media (max-width: 720px) {
    .mobile-home {
        gap: 0;
        padding: 16px;
        background: #f5f7fb;
        color: #16202f;
    }

    body:not(.theme-light) .mobile-home {
        background: #0e1118;
        color: #edf2fb;
    }

    .mobile-home::before {
        content: '';
        position: fixed;
        inset: 0;
        pointer-events: none;
        background:
            linear-gradient(180deg, rgba(255,255,255,0.88), rgba(245,247,251,0.62) 42%, rgba(229,235,247,0.94)),
            linear-gradient(135deg, rgba(254,44,85,0.10), rgba(20,184,166,0.10));
    }

    body:not(.theme-light) .mobile-home::before {
        background:
            linear-gradient(180deg, rgba(18,22,32,0.94), rgba(14,17,24,0.78) 48%, rgba(8,10,15,0.96)),
            linear-gradient(135deg, rgba(254,44,85,0.18), rgba(58,134,255,0.14));
    }

    .mobile-home-top,
    .mobile-home-main,
    .mobile-home-actions {
        position: relative;
        z-index: 1;
    }

    .mobile-home-top {
        padding: 4px 0 22px;
    }

    .mobile-home-brand {
        color: currentColor;
        font-size: 1em;
        letter-spacing: 0;
    }

    .mobile-home-theme {
        min-width: 58px;
        height: 34px;
        border: 1px solid rgba(22,32,47,0.12);
        border-radius: 999px;
        background: rgba(255,255,255,0.74);
        color: #344054;
        font-size: 0.82em;
        font-weight: 700;
        box-shadow: 0 12px 30px rgba(16,24,40,0.08);
    }

    body:not(.theme-light) .mobile-home-theme {
        border-color: rgba(255,255,255,0.12);
        background: rgba(255,255,255,0.08);
        color: #edf2fb;
    }

    .mobile-home-main {
        min-height: calc(100dvh - 190px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 24px;
        padding-bottom: 18px;
    }

    .mobile-home-copy {
        gap: 13px;
    }

    .mobile-home-kicker {
        padding: 5px 10px;
        border-color: rgba(254,44,85,0.22);
        background: rgba(254,44,85,0.08);
        color: #c91d42;
    }

    body:not(.theme-light) .mobile-home-kicker {
        border-color: rgba(254,44,85,0.34);
        background: rgba(254,44,85,0.14);
        color: #ff6b8a;
    }

    .mobile-home-copy h2 {
        max-width: 7em;
        color: currentColor;
        font-size: 2.45em;
        line-height: 1.02;
        font-weight: 850;
    }

    .mobile-home-copy p {
        max-width: 22em;
        color: rgba(52,64,84,0.78);
        font-size: 0.98em;
        line-height: 1.85;
    }

    body:not(.theme-light) .mobile-home-copy p {
        color: rgba(237,242,251,0.72);
    }

    .mobile-home-orbit {
        position: relative;
        width: min(100%, 300px);
        height: 254px;
        margin: 0 auto;
    }

    .mobile-orbit-card {
        position: absolute;
        border: 1px solid rgba(22,32,47,0.10);
        background: rgba(255,255,255,0.82);
        box-shadow: 0 26px 70px rgba(16,24,40,0.16);
        backdrop-filter: blur(14px);
    }

    body:not(.theme-light) .mobile-orbit-card {
        border-color: rgba(255,255,255,0.10);
        background: rgba(24,29,42,0.82);
        box-shadow: 0 28px 72px rgba(0,0,0,0.38);
    }

    .mobile-orbit-card-main {
        inset: 8px 24px 0 8px;
        border-radius: 18px;
        padding: 18px;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .mobile-orbit-card-side {
        right: 0;
        top: 36px;
        width: 92px;
        height: 122px;
        border-radius: 14px;
        padding: 13px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .mobile-orbit-card-side span,
    .mobile-orbit-line,
    .mobile-orbit-mark {
        display: block;
        border-radius: 999px;
        background: rgba(52,64,84,0.16);
    }

    body:not(.theme-light) .mobile-orbit-card-side span,
    body:not(.theme-light) .mobile-orbit-line,
    body:not(.theme-light) .mobile-orbit-mark {
        background: rgba(237,242,251,0.18);
    }

    .mobile-orbit-mark {
        width: 48px;
        height: 8px;
        background: rgba(254,44,85,0.68);
    }

    .mobile-orbit-line {
        width: 72%;
        height: 9px;
    }

    .mobile-orbit-line.long {
        width: 92%;
    }

    .mobile-orbit-image {
        flex: 1;
        min-height: 116px;
        border-radius: 14px;
        border: 1px solid rgba(254,44,85,0.18);
        background:
            linear-gradient(145deg, rgba(254,44,85,0.22), rgba(20,184,166,0.18)),
            #eef3f8;
    }

    body:not(.theme-light) .mobile-orbit-image {
        border-color: rgba(254,44,85,0.28);
        background:
            linear-gradient(145deg, rgba(254,44,85,0.28), rgba(58,134,255,0.22)),
            #171d2a;
    }

    .mobile-orbit-card-side span {
        width: 100%;
        height: 8px;
    }

    .mobile-orbit-card-side span:nth-child(2) {
        width: 74%;
    }

    .mobile-orbit-card-side span:nth-child(3) {
        width: 48%;
        background: rgba(254,44,85,0.52);
    }

    .mobile-home-actions {
        grid-template-columns: 1fr;
        margin-top: 0;
        padding-bottom: 4px;
    }

    .mobile-home-actions .mobile-home-primary {
        min-height: 50px;
        border: 0;
        border-radius: 999px;
        background: #111827;
        color: #fff;
        font-size: 1em;
        box-shadow: 0 18px 40px rgba(17,24,39,0.20);
    }

    body:not(.theme-light) .mobile-home-actions .mobile-home-primary {
        background: #fff;
        color: #111827;
        box-shadow: 0 18px 42px rgba(255,255,255,0.12);
    }

    .mobile-home-pc-note,
    .mobile-home-sections {
        position: relative;
        z-index: 1;
    }

    .mobile-home-pc-note {
        display: flex;
        gap: 12px;
        align-items: flex-start;
        margin: 16px 0 10px;
        padding: 15px;
        border: 1px solid rgba(17,24,39,0.10);
        border-radius: 14px;
        background: rgba(255,255,255,0.72);
        box-shadow: 0 18px 44px rgba(16,24,40,0.10);
    }

    body:not(.theme-light) .mobile-home-pc-note {
        border-color: rgba(255,255,255,0.10);
        background: rgba(255,255,255,0.07);
        box-shadow: 0 18px 48px rgba(0,0,0,0.30);
    }

    .mobile-home-pc-note > .google-emoji {
        flex: 0 0 auto;
        font-size: 1.18em;
        line-height: 1.3;
    }

    .mobile-home-pc-note strong {
        display: block;
        color: currentColor;
        font-size: 0.96em;
        margin-bottom: 5px;
    }

    .mobile-home-pc-note p {
        margin: 0;
        color: rgba(52,64,84,0.72);
        font-size: 0.84em;
        line-height: 1.7;
        text-align: justify;
    }

    body:not(.theme-light) .mobile-home-pc-note p {
        color: rgba(237,242,251,0.68);
    }

    .mobile-home-sections {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 8px 0 18px;
    }

    .mobile-home-info {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 4px 12px;
        padding: 15px 14px;
        border: 1px solid rgba(17,24,39,0.08);
        border-radius: 14px;
        background: rgba(255,255,255,0.58);
        box-shadow: 0 12px 32px rgba(16,24,40,0.07);
    }

    body:not(.theme-light) .mobile-home-info {
        border-color: rgba(255,255,255,0.09);
        background: rgba(255,255,255,0.055);
        box-shadow: 0 14px 36px rgba(0,0,0,0.22);
    }

    .mobile-home-info > span {
        grid-row: 1 / span 2;
        display: inline-flex;
        align-items: flex-start;
        justify-content: center;
        padding-top: 2px;
        color: rgba(254,44,85,0.72);
        font-size: 0.76em;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
    }

    .mobile-home-info h3 {
        margin: 0;
        color: currentColor;
        font-size: 1em;
        line-height: 1.3;
    }

    .mobile-home-info p {
        margin: 0;
        color: rgba(52,64,84,0.70);
        font-size: 0.86em;
        line-height: 1.75;
        text-align: justify;
    }

    body:not(.theme-light) .mobile-home-info p {
        color: rgba(237,242,251,0.66);
    }
}
/* codex v88: safe upgrades extracted from v78-v80 backups. */
body .xhs-card.pixel-page.card-theme-social .card-social-profile {
    top: 17px !important;
    left: var(--pixel-content-side, 12px) !important;
    right: 54px !important;
    min-height: 30px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    gap: 8px !important;
}

body .xhs-card.pixel-page.card-theme-social .card-social-avatar {
    width: 30px !important;
    height: 30px !important;
    border: 0 !important;
    box-shadow: none !important;
}

body .xhs-card.pixel-page.card-theme-social .card-social-more,
body .xhs-card.pixel-page.card-theme-social .card-social-actions {
    display: none !important;
}

/* codex v91: social profile avatar follows the reference layout, while the avatar image stays user-customizable. */
body .xhs-card.pixel-page.card-theme-social .card-social-profile {
    align-items: center !important;
}

body .xhs-card.pixel-page.card-theme-social .card-social-avatar {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    border-radius: 50% !important;
    color: #172033 !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
}

body .xhs-card.pixel-page.card-theme-social .card-social-avatar-placeholder {
    border: 2px solid #a9d878 !important;
    background: #d9f1b8 !important;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.68) !important;
}

body .xhs-card.pixel-page.card-theme-social .card-social-avatar-custom {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body .xhs-card.pixel-page.card-theme-social .card-social-avatar-custom img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

body .xhs-card.pixel-page.card-theme-social .card-social-author {
    gap: 2px !important;
}

body .xhs-card.pixel-page.card-theme-social .card-social-author b {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
}

body .xhs-card.pixel-page.card-theme-social .card-social-author small {
    margin-top: 0 !important;
}

.card-identity-avatar-button.is-placeholder {
    border: 2px solid #a9d878 !important;
    background: #d9f1b8 !important;
    color: #172033 !important;
}

.card-identity-avatar-button.has-avatar {
    border: 0 !important;
    background: transparent !important;
}

/* codex v92: use the screenshot-style verified platform tail badge instead of external platform icons. */
body .xhs-card.pixel-page.card-theme-social .card-social-author b .card-social-platform {
    position: relative !important;
    display: inline-grid !important;
    place-items: center !important;
    flex: 0 0 auto !important;
    width: 14px !important;
    height: 14px !important;
    margin-left: 5px !important;
    border-radius: 50% !important;
    background: #1d9bf0 !important;
    color: #fff !important;
    font: 900 9px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    letter-spacing: 0 !important;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.86),
        0 1px 3px rgba(29,155,240,.28) !important;
    transform: translateY(1px) !important;
    overflow: visible !important;
}

body .xhs-card.pixel-page.card-theme-social .card-social-author b .card-social-platform img {
    display: none !important;
}

body .xhs-card.pixel-page.card-theme-social .card-social-profile {
    grid-template-columns: 30px minmax(0, 1fr) auto !important;
    right: var(--pixel-content-side, 12px) !important;
}

body .xhs-card.pixel-page.card-theme-social .card-social-more {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: end !important;
    width: 22px !important;
    height: 18px !important;
    color: #8f98a8 !important;
    font: 900 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    letter-spacing: 1.2px !important;
    transform: translateY(-5px) !important;
    opacity: .92 !important;
}

/* codex v93: Twitter/X-style verified badge, rendered inline so export keeps the mark. */
body .xhs-card.pixel-page.card-theme-social .card-social-author b .card-social-platform-verified {
    width: 16px !important;
    height: 16px !important;
    margin-left: 5px !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: translateY(1px) !important;
}

body .xhs-card.pixel-page.card-theme-social .card-social-platform-icon {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
}

body .xhs-card.pixel-page.card-theme-social .card-social-platform-badge {
    fill: #1d9bf0 !important;
}

body .xhs-card.pixel-page.card-theme-social .card-social-platform-check {
    fill: #fff !important;
}

/* codex v96: platform tail mark defaults to Twitter/X verified blue badge; other platforms keep their own usable marks. */
body .xhs-card.pixel-page.card-theme-social .card-social-author b .card-social-platform {
    position: relative !important;
    display: inline-grid !important;
    place-items: center !important;
    flex: 0 0 auto !important;
    width: 16px !important;
    height: 16px !important;
    margin-left: 5px !important;
    border-radius: 4px !important;
    background: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
    transform: translateY(2px) !important;
    overflow: visible !important;
}

body .xhs-card.pixel-page.card-theme-social .card-social-author b .card-social-platform-twitter {
    border-radius: 0 !important;
}

body .xhs-card.pixel-page.card-theme-social .card-social-platform-icon {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    overflow: visible !important;
}

body .xhs-card.pixel-page.card-theme-social .card-social-platform-twitter .card-social-platform-badge {
    fill: #1d9bf0 !important;
}

body .xhs-card.pixel-page.card-theme-social .card-social-platform-twitter .card-social-platform-check {
    fill: #fff !important;
}

.card-settings-dock {
    top: 8px !important;
    z-index: 30;
    align-self: start;
    max-height: calc(100dvh - 96px) !important;
}

.card-settings-dock > .page-toolbar {
    padding: 10px !important;
}

#watermarkVisibility {
    min-width: 86px;
    height: 32px;
}

.preview-watermark-controls {
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.preview-watermark-controls #watermarkPresetList {
    display: none !important;
}

.preview-watermark-controls .watermark-tuning {
    flex-wrap: wrap;
    min-width: min(100%, 360px);
}

.preview-watermark-controls .watermark-tuning label {
    min-width: 68px;
}

/* codex v79 final: stable completion of the screenshot-approved workflow. */
.card-preview-split {
    grid-template-columns: minmax(332px, 1fr) minmax(232px, 320px);
    gap: 12px;
}

body.card-workspace-active .preview-card {
    overflow: visible;
}

.card-settings-dock .card-toolbar-theme-group {
    grid-template-columns: minmax(0, 1fr);
}

.card-settings-dock .card-theme-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-height: 246px;
    padding: 2px 2px 4px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.card-settings-dock .card-theme-preview-button {
    position: relative;
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    min-height: 72px !important;
    padding: 7px !important;
    border: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent) !important;
    border-radius: 10px !important;
    background: color-mix(in srgb, var(--bg-dark) 62%, transparent) !important;
    color: var(--text-light) !important;
    text-align: left;
    overflow: hidden;
}

.card-settings-dock .card-theme-preview-button::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--card-theme-preview-accent, var(--primary));
}

.card-settings-dock .card-theme-preview-button:hover {
    border-color: color-mix(in srgb, var(--primary) 55%, var(--border-color)) !important;
    background: color-mix(in srgb, var(--card-theme-preview-accent, var(--primary)) 8%, var(--bg-dark)) !important;
}

.card-settings-dock .card-theme-preview-button.active {
    border-color: var(--primary) !important;
    background: color-mix(in srgb, var(--primary) 10%, var(--bg-dark) 90%) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 16%, transparent);
}

.card-theme-preview-window {
    position: relative;
    display: block;
    width: 58px;
    height: 58px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
    border-radius: 9px;
    background: var(--card-theme-preview-surface, var(--bg-preview));
}

.card-theme-preview-card.xhs-card.pixel-page {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 300px !important;
    height: 400px !important;
    min-height: 400px !important;
    transform: scale(.145);
    transform-origin: top left;
    pointer-events: none;
    box-shadow: none !important;
}

.card-theme-preview-card .preview-content {
    overflow: hidden !important;
}

.card-theme-preview-card .preview-content h2 {
    margin-bottom: 12px !important;
}

.card-theme-preview-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.card-theme-preview-name {
    min-width: 0;
    overflow: hidden;
    color: inherit;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-theme-preview-meta {
    min-width: 0;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 650;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-theme-toolbar-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 8px;
}

.card-theme-toolbar-actions .card-settings-toggle {
    min-height: 30px;
    white-space: nowrap;
}

.card-preview-page-shell {
    display: grid;
    grid-template-columns: minmax(0, 300px) 44px;
    align-items: start;
    gap: 8px;
    width: min(352px, 100%);
}

.card-preview-page-selection {
    display: inline-flex;
    flex-direction: column;
    grid-column: 2;
    grid-row: 1;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 42px;
    min-height: 58px;
    padding: 4px 3px;
    border: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-light) 96%, transparent);
    color: var(--text-muted);
    font-size: 0;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 5px 14px rgba(15, 23, 42, .08);
    cursor: default;
}

.card-preview-page-shell > .xhs-card.pixel-page {
    grid-column: 1;
    grid-row: 1;
}

.card-preview-page-selection .page-select {
    position: static !important;
    inset: auto !important;
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px;
}

.card-preview-page-download {
    width: 36px;
    min-height: 22px;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--primary) 26%, var(--border-color));
    border-radius: 7px;
    background: color-mix(in srgb, var(--primary) 7%, var(--bg-light));
    color: var(--primary);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}

.card-preview-page-download:hover,
.card-preview-page-download:focus-visible {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

@container preview-panel (max-width: 570px) {
    .card-preview-split {
        grid-template-columns: 1fr;
    }
}

/* codex v94: top slot for card pagination/batch controls; watermark toolbar replaces it in the same place. */
.card-preview-top-slot {
    display: none;
    width: 100%;
    flex: 0 0 auto;
    padding: 6px 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
    background: color-mix(in srgb, var(--bg-light) 96%, transparent);
}

body.card-workspace-active .card-preview-top-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
}

body.card-workspace-active .card-preview-top-slot #cardPreviewToolbar {
    display: flex !important;
    width: min(100%, 900px);
    min-width: 0;
    justify-content: center;
}

body.card-workspace-active .card-preview-top-slot.watermark-open #cardPreviewToolbar {
    display: none !important;
}

body.card-workspace-active #cardPreviewToolbar .card-top-controls-toolbar {
    position: static !important;
    top: auto !important;
    right: auto !important;
    display: grid !important;
    grid-template-columns: minmax(330px, 1fr) auto !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

body.card-workspace-active #cardPreviewToolbar .card-top-controls-toolbar .card-toolbar-group {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    width: auto !important;
    min-height: 32px !important;
    padding: 0 !important;
    border: 0 !important;
}

body.card-workspace-active #cardPreviewToolbar .card-top-controls-toolbar .card-toolbar-group::before {
    display: none !important;
    content: none !important;
}

body.card-workspace-active #cardPreviewToolbar .card-top-controls-toolbar button,
body.card-workspace-active #cardPreviewToolbar .card-top-controls-toolbar .page-toolbar-label {
    width: auto !important;
    min-width: 0 !important;
    min-height: 30px !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}

body.card-workspace-active #cardPreviewToolbar .card-top-controls-toolbar .page-toolbar-current {
    order: 0 !important;
    min-width: 104px !important;
    grid-column: auto !important;
}

body.card-workspace-active #cardPreviewToolbar .card-top-controls-toolbar .page-toolbar-selected {
    min-width: 58px !important;
}

body.card-workspace-active #cardPreviewToolbar .card-top-controls-toolbar .card-toolbar-action-group {
    justify-content: flex-end !important;
}

body.card-workspace-active .card-preview-top-slot > .preview-watermark-controls {
    position: static !important;
    top: auto !important;
    right: auto !important;
    width: min(100%, 900px) !important;
    max-width: 900px !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    border: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent) !important;
    border-radius: 10px !important;
    background: color-mix(in srgb, var(--bg-light) 97%, #fff 3%) !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .10) !important;
    overflow: visible !important;
}

@container preview-panel (max-width: 760px) {
    body.card-workspace-active #cardPreviewToolbar .card-top-controls-toolbar {
        grid-template-columns: 1fr !important;
    }

    body.card-workspace-active #cardPreviewToolbar .card-top-controls-toolbar .card-toolbar-action-group {
        justify-content: flex-start !important;
    }
}

/* codex v95: keep the top slot as a compact single strip; watermark and controls are mutually exclusive visually. */
body.card-workspace-active #cardPreviewToolbar .card-top-controls-toolbar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: thin;
}

body.card-workspace-active #cardPreviewToolbar .card-top-controls-toolbar .card-toolbar-group {
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
}

body.card-workspace-active #cardPreviewToolbar .card-top-controls-toolbar .card-toolbar-action-group {
    margin-left: auto !important;
}

body.card-workspace-active .card-preview-top-slot > .preview-watermark-controls[style*="display: none"] {
    display: none !important;
}

/* codex v97: rebuild the card watermark toolbar so avatar/buttons keep their size and controls wrap cleanly. */
body.card-workspace-active .card-preview-top-slot > .preview-watermark-controls {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px 10px !important;
    width: min(100%, 1080px) !important;
    max-width: calc(100% - 12px) !important;
    min-height: 56px !important;
    padding: 8px 44px 8px 12px !important;
    overflow: visible !important;
}

body.card-workspace-active .card-preview-top-slot > .preview-watermark-controls > label:first-child {
    flex: 0 0 auto !important;
    min-width: auto !important;
    white-space: nowrap !important;
    writing-mode: horizontal-tb !important;
    letter-spacing: 0 !important;
}

body.card-workspace-active .card-preview-top-slot > .preview-watermark-controls input[type="text"],
body.card-workspace-active .card-preview-top-slot > .preview-watermark-controls select,
body.card-workspace-active .card-preview-top-slot > .preview-watermark-controls button:not(.watermark-panel-close) {
    flex: 0 0 auto !important;
    height: 34px !important;
    min-height: 34px !important;
    white-space: nowrap !important;
}

body.card-workspace-active .card-preview-top-slot > .preview-watermark-controls #watermarkName {
    width: 132px !important;
    max-width: 150px !important;
}

body.card-workspace-active .card-preview-top-slot > .preview-watermark-controls #watermarkPresetSelect {
    width: 154px !important;
    max-width: 154px !important;
}

body.card-workspace-active .card-preview-top-slot > .preview-watermark-controls .watermark-preset-btn {
    min-width: 42px !important;
    padding: 0 10px !important;
    line-height: 32px !important;
    text-align: center !important;
}

body.card-workspace-active .card-preview-top-slot > .preview-watermark-controls #watermarkVisibility {
    width: 112px !important;
    min-width: 112px !important;
}

body.card-workspace-active .card-preview-top-slot > .preview-watermark-controls #watermarkPosition {
    width: 84px !important;
    min-width: 84px !important;
}

body.card-workspace-active .card-preview-top-slot > .preview-watermark-controls .watermark-avatar-btn {
    flex: 0 0 32px !important;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
}

body.card-workspace-active .card-preview-top-slot > .preview-watermark-controls #watermarkAvatarPreview {
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
}

body.card-workspace-active .card-preview-top-slot > .preview-watermark-controls .watermark-clear-btn {
    flex: 0 0 24px !important;
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    padding: 0 !important;
}

body.card-workspace-active .card-preview-top-slot > .preview-watermark-controls .watermark-tuning {
    flex: 1 1 300px !important;
    min-width: 260px !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px 10px !important;
    flex-wrap: wrap !important;
    padding-left: 10px !important;
    border-left: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent) !important;
}

body.card-workspace-active .card-preview-top-slot > .preview-watermark-controls .watermark-tuning label {
    flex: 0 0 auto !important;
    min-width: auto !important;
    height: 28px !important;
    white-space: nowrap !important;
}

body.card-workspace-active .card-preview-top-slot > .preview-watermark-controls .watermark-tuning input[type="range"] {
    flex: 0 0 58px !important;
    width: 58px !important;
}

body.card-workspace-active .card-preview-top-slot > .preview-watermark-controls .watermark-panel-close {
    top: 8px !important;
    right: 10px !important;
}

/* codex v98: preview blocks can jump back to their Markdown source in the editor. */
.preview-source-link {
    cursor: pointer;
}

.preview-source-link:hover {
    outline: 1px solid color-mix(in srgb, var(--primary) 36%, transparent);
    outline-offset: 3px;
    border-radius: 6px;
}

.preview-source-active {
    animation: preview-source-locate-flash 1.2s ease-out;
}

#editor.editor-source-located {
    outline: 2px solid color-mix(in srgb, var(--primary) 58%, transparent) !important;
    outline-offset: -2px;
    box-shadow:
        inset 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent),
        0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent) !important;
}

/* codex v99: preview-to-editor locating now also highlights the editor and has text fallback. */

/* codex v100: guard card mode against the watermark panel falling back to the old right-side floating layout. */
body.card-workspace-active #watermarkPanel.preview-watermark-controls {
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    writing-mode: horizontal-tb !important;
    flex-direction: row !important;
    align-items: center !important;
    width: min(100%, 1080px) !important;
    max-width: calc(100% - 12px) !important;
    min-height: 56px !important;
    margin: 0 auto !important;
}

/* codex v101: keep the card top slot as one full-width strip; watermark replaces the normal toolbar instead of squeezing beside it. */
body.card-workspace-active .card-preview-top-slot {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

body.card-workspace-active .card-preview-top-slot:has(> #watermarkPanel.preview-watermark-controls:not([style*="display: none"]):not([style*="display:none"])) #cardPreviewToolbar {
    display: none !important;
}

body.card-workspace-active .card-preview-top-slot > #watermarkPanel.preview-watermark-controls:not([style*="display: none"]) {
    flex: 0 0 auto !important;
    align-self: center !important;
    width: min(100%, 1080px) !important;
    max-width: calc(100% - 12px) !important;
    height: auto !important;
    min-height: 56px !important;
}

/* codex v102: preview-to-editor locating should snap quickly instead of drifting through panel transitions. */
body.preview-source-locating .workspace-split,
body.preview-source-locating .editor-panel,
body.preview-source-locating .preview-panel,
body.preview-source-locating .file-tree-sidebar,
body.preview-source-locating .preview-settings-panel,
body.preview-source-locating #cardsContainer,
body.preview-source-locating #editor {
    scroll-behavior: auto !important;
    transition-duration: 0.04s !important;
}

/* codex v103: card mode enters with only the screenshot-style pagination/batch strip visible. */
body.card-workspace-active .card-preview-split:not(:has(.card-settings-dock.active)) {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: 1140px !important;
}

body.card-workspace-active .card-preview-split:not(:has(.card-settings-dock.active)) .cards-container {
    grid-column: 1 / -1;
}

body.card-workspace-active .card-preview-top-slot {
    min-height: 56px !important;
    padding: 8px 0 !important;
    background: color-mix(in srgb, var(--bg-light) 98%, #fff 2%) !important;
}

body.card-workspace-active .card-preview-top-slot #cardPreviewToolbar {
    width: min(100%, 1136px) !important;
    max-width: 1136px !important;
    padding: 0 2px !important;
}

body.mobile-workspace-open.card-workspace-active .card-preview-top-slot #cardPreviewToolbar {
    display: flex !important;
}

body.card-workspace-active #cardPreviewToolbar .card-top-controls-toolbar {
    width: 100% !important;
    min-height: 40px !important;
    gap: 10px !important;
    overflow: visible !important;
}

body.card-workspace-active #cardPreviewToolbar .card-top-controls-toolbar .card-toolbar-page-group,
body.card-workspace-active #cardPreviewToolbar .card-top-controls-toolbar .card-toolbar-action-group {
    gap: 8px !important;
}

body.card-workspace-active #cardPreviewToolbar .card-top-controls-toolbar button,
body.card-workspace-active #cardPreviewToolbar .card-top-controls-toolbar .page-toolbar-label {
    min-height: 36px !important;
    padding: 0 15px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    background: color-mix(in srgb, var(--bg-dark) 82%, #fff 18%) !important;
}

body.card-workspace-active #cardPreviewToolbar .card-top-controls-toolbar .page-toolbar-current,
body.card-workspace-active #cardPreviewToolbar .card-top-controls-toolbar .page-toolbar-selected {
    min-width: 124px !important;
    border-color: transparent !important;
    background: color-mix(in srgb, var(--primary) 9%, var(--bg-light)) !important;
    color: var(--primary) !important;
}

body.card-workspace-active #cardPreviewToolbar .card-top-controls-toolbar .page-toolbar-selected {
    min-width: 92px !important;
}

body.card-workspace-active #cardPreviewToolbar .card-top-controls-toolbar button.primary {
    min-width: 84px !important;
    color: #fff !important;
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 22%, transparent) !important;
}

body.card-workspace-active #cardPreviewToolbar .card-top-controls-toolbar button:disabled {
    color: var(--text-muted) !important;
    background: color-mix(in srgb, var(--bg-dark) 62%, #fff 38%) !important;
    opacity: .62 !important;
}

/* codex v104: inline-hidden watermark must stay hidden on card entry so the pagination strip remains visible. */
body.card-workspace-active .card-preview-top-slot > #watermarkPanel.preview-watermark-controls[style*="display: none"],
body.card-workspace-active .card-preview-top-slot > #watermarkPanel.preview-watermark-controls[style*="display:none"] {
    display: none !important;
}

/* codex v105: exported card images should not include preview/theme outer borders or selection chrome. */
body .xhs-card.pixel-page.export-clean-card {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

body .xhs-card.pixel-page.export-clean-card .page-select,
body .xhs-card.pixel-page.export-clean-card .card-preview-page-selection,
body .xhs-card.pixel-page.export-clean-card .cover-check {
    display: none !important;
}

/* codex v106: keep social profile platform tail badges complete and inline, without the legacy blue button frame. */
body .card-theme-social .card-social-author b .card-social-platform,
body .xhs-card.card-theme-social .card-social-author b .card-social-platform,
body .xhs-card.pixel-page.card-theme-social .card-social-author b .card-social-platform {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: .92em !important;
    height: .92em !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin-left: .18em !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
    line-height: 1 !important;
    vertical-align: -.08em !important;
    transform: none !important;
    overflow: visible !important;
}

body .card-theme-social .card-social-author b .card-social-platform svg.card-social-platform-icon,
body .xhs-card.card-theme-social .card-social-author b .card-social-platform svg.card-social-platform-icon,
body .xhs-card.pixel-page.card-theme-social .card-social-author b .card-social-platform svg.card-social-platform-icon {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

body .card-theme-social .card-social-author b .card-social-platform-twitter .card-social-platform-badge,
body .xhs-card.card-theme-social .card-social-author b .card-social-platform-twitter .card-social-platform-badge,
body .xhs-card.pixel-page.card-theme-social .card-social-author b .card-social-platform-twitter .card-social-platform-badge {
    fill: #1d9bf0 !important;
}

body .card-theme-social .card-social-author b .card-social-platform-twitter .card-social-platform-check,
body .xhs-card.card-theme-social .card-social-author b .card-social-platform-twitter .card-social-platform-check,
body .xhs-card.pixel-page.card-theme-social .card-social-author b .card-social-platform-twitter .card-social-platform-check {
    fill: #fff !important;
}

/* codex v115: enlarge the social profile platform tail badge so the verified mark stays readable on card export. */
body .card-theme-social .card-social-author b .card-social-platform,
body .xhs-card.card-theme-social .card-social-author b .card-social-platform,
body .xhs-card.pixel-page.card-theme-social .card-social-author b .card-social-platform {
    width: 1.22em !important;
    height: 1.22em !important;
    margin-left: .24em !important;
    vertical-align: -.16em !important;
}

body .card-theme-social .card-social-author b .card-social-platform svg.card-social-platform-icon,
body .xhs-card.card-theme-social .card-social-author b .card-social-platform svg.card-social-platform-icon,
body .xhs-card.pixel-page.card-theme-social .card-social-author b .card-social-platform svg.card-social-platform-icon {
    width: 1.22em !important;
    height: 1.22em !important;
}

/* codex v117: match the reference social profile ratio: larger avatar, readable verified tail mark, right-aligned more dots. */
body .xhs-card.pixel-page.card-theme-social .card-social-profile,
body .xhs-card.card-theme-social .card-social-profile,
body .card-theme-social .card-social-profile {
    top: 18px !important;
    left: var(--pixel-content-side, 18px) !important;
    right: var(--pixel-content-side, 18px) !important;
    min-height: 42px !important;
    grid-template-columns: 42px minmax(0, 1fr) 28px !important;
    gap: 10px !important;
    align-items: center !important;
}

body .xhs-card.pixel-page.card-theme-social .card-social-avatar,
body .xhs-card.card-theme-social .card-social-avatar,
body .card-theme-social .card-social-avatar {
    width: 42px !important;
    height: 42px !important;
    font-size: 14px !important;
}

body .xhs-card.pixel-page.card-theme-social .card-social-author,
body .xhs-card.card-theme-social .card-social-author,
body .card-theme-social .card-social-author {
    gap: 2px !important;
    line-height: 1.15 !important;
}

body .xhs-card.pixel-page.card-theme-social .card-social-author b,
body .xhs-card.card-theme-social .card-social-author b,
body .card-theme-social .card-social-author b {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    font-size: 15px !important;
    font-weight: 850 !important;
    line-height: 1.12 !important;
}

body .xhs-card.pixel-page.card-theme-social .card-social-author small,
body .xhs-card.card-theme-social .card-social-author small,
body .card-theme-social .card-social-author small {
    font-size: 11.5px !important;
    font-weight: 500 !important;
    line-height: 1.18 !important;
    color: #64717f !important;
}

body .xhs-card.pixel-page.card-theme-social .card-social-author b .card-social-platform,
body .xhs-card.card-theme-social .card-social-author b .card-social-platform,
body .card-theme-social .card-social-author b .card-social-platform {
    width: 15px !important;
    height: 15px !important;
    margin-left: 5px !important;
    vertical-align: -.12em !important;
    transform: translateY(.5px) !important;
}

body .xhs-card.pixel-page.card-theme-social .card-social-author b .card-social-platform svg.card-social-platform-icon,
body .xhs-card.card-theme-social .card-social-author b .card-social-platform svg.card-social-platform-icon,
body .card-theme-social .card-social-author b .card-social-platform svg.card-social-platform-icon {
    width: 15px !important;
    height: 15px !important;
}

body .xhs-card.pixel-page.card-theme-social .card-social-more,
body .xhs-card.card-theme-social .card-social-more,
body .card-theme-social .card-social-more {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    justify-self: end !important;
    width: 28px !important;
    height: 22px !important;
    color: #9aa3af !important;
    font: 900 17px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    letter-spacing: 2px !important;
    transform: translateY(-3px) !important;
    opacity: .95 !important;
}

/* codex v140: make the social profile block lighter; avatar scales down more than the text. */
body .xhs-card.pixel-page.card-theme-social .card-social-profile,
body .xhs-card.card-theme-social .card-social-profile,
body .card-theme-social .card-social-profile {
    min-height: 36px !important;
    grid-template-columns: 34px minmax(0, 1fr) 24px !important;
    gap: 8px !important;
}

body .xhs-card.pixel-page.card-theme-social .card-social-avatar,
body .xhs-card.card-theme-social .card-social-avatar,
body .card-theme-social .card-social-avatar {
    width: 34px !important;
    height: 34px !important;
    font-size: 12px !important;
}

body .xhs-card.pixel-page.card-theme-social .card-social-author b,
body .xhs-card.card-theme-social .card-social-author b,
body .card-theme-social .card-social-author b {
    font-size: 14px !important;
    line-height: 1.1 !important;
}

body .xhs-card.pixel-page.card-theme-social .card-social-author small,
body .xhs-card.card-theme-social .card-social-author small,
body .card-theme-social .card-social-author small {
    font-size: 10.8px !important;
    line-height: 1.14 !important;
}

body .xhs-card.pixel-page.card-theme-social .card-social-author b .card-social-platform,
body .xhs-card.card-theme-social .card-social-author b .card-social-platform,
body .card-theme-social .card-social-author b .card-social-platform {
    width: 13.5px !important;
    height: 13.5px !important;
    margin-left: 4px !important;
    transform: translateY(.5px) !important;
}

body .xhs-card.pixel-page.card-theme-social .card-social-author b .card-social-platform svg.card-social-platform-icon,
body .xhs-card.card-theme-social .card-social-author b .card-social-platform svg.card-social-platform-icon,
body .card-theme-social .card-social-author b .card-social-platform svg.card-social-platform-icon {
    width: 13.5px !important;
    height: 13.5px !important;
}

body .xhs-card.pixel-page.card-theme-social .card-social-more,
body .xhs-card.card-theme-social .card-social-more,
body .card-theme-social .card-social-more {
    width: 24px !important;
    height: 18px !important;
    font-size: 15px !important;
    transform: translateY(-2px) !important;
}

@keyframes preview-source-locate-flash {
    0% {
        background: color-mix(in srgb, var(--primary) 18%, transparent);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
    }
    100% {
        background: transparent;
        box-shadow: 0 0 0 0 transparent;
    }
}

/* codex v107: floating toolbar for formatting selected editor text. */
.editor-selection-toolbar {
    position: fixed;
    z-index: 9800;
    left: 16px;
    top: 16px;
    display: inline-flex;
    align-items: center;
    align-content: center;
    gap: 4px;
    row-gap: 5px;
    width: min(460px, calc(100vw - 20px));
    max-width: calc(100vw - 20px);
    min-height: 42px;
    max-height: 88px;
    padding: 6px 8px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.98);
    color: #374151;
    box-shadow: 0 12px 34px rgba(15, 23, 42, 0.16), 0 2px 8px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(12px);
    user-select: none;
    flex-wrap: wrap;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
}

.editor-selection-toolbar::-webkit-scrollbar {
    display: none;
}

.editor-selection-toolbar[hidden] {
    display: none !important;
}

.editor-selection-toolbar button,
.editor-selection-toolbar select,
.editor-selection-color {
    flex: 0 0 auto;
    height: 31px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #4b5563;
    font: 600 14px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
}

.editor-selection-toolbar button {
    min-width: 31px;
    padding: 0 8px;
    cursor: pointer;
}

.editor-selection-toolbar button:hover,
.editor-selection-toolbar select:hover,
.editor-selection-color:hover {
    background: #f1f5f9;
    color: #111827;
}

.editor-selection-toolbar button:active {
    transform: translateY(1px);
}

.editor-selection-ai {
    min-width: 88px !important;
    padding: 0 10px !important;
    color: #111827 !important;
    font-weight: 700 !important;
}

.editor-selection-divider {
    flex: 0 0 auto;
    width: 1px;
    height: 22px;
    margin: 0 3px;
    background: #e5e7eb;
}

.editor-selection-strike {
    display: inline-block;
    text-decoration: line-through;
}

.editor-selection-toolbar select {
    min-width: 70px;
    max-width: 110px;
    padding: 0 8px;
    border: 1px solid transparent;
    outline: none;
    cursor: pointer;
}

.editor-selection-toolbar select:focus {
    border-color: rgba(37, 99, 235, 0.35);
    background: #eff6ff;
}

.editor-selection-color {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 44px;
    padding: 0 7px;
    cursor: pointer;
}

.editor-selection-color span {
    font-size: 13px;
    font-weight: 800;
}

.editor-selection-color input {
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1px solid #d1d5db;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    overflow: hidden;
}

.editor-selection-color input::-webkit-color-swatch-wrapper {
    padding: 0;
}

.editor-selection-color input::-webkit-color-swatch {
    border: 0;
    border-radius: 50%;
}

.editor-selection-bg span {
    color: #92400e;
}

/* codex v109: explicit highlight format for editor selection toolbar and format menu. */
.editor-selection-toolbar .editor-selection-highlight mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 20px;
    padding: 0 4px;
    border-radius: 5px;
    background: #fde047;
    color: #111827;
    font-weight: 900;
    line-height: 1;
}

.editor-selection-toolbar .editor-selection-highlight:hover mark {
    background: #facc15;
}

/* codex v112: highlighted text must keep the selected foreground color even inside card themes that force strong colors. */
.preview-content mark[style] {
    color: inherit;
}

.preview-content mark[style] strong,
.desktop-frame .preview-content mark[style] strong,
.xhs-card.pixel-page .preview-content mark[style] strong,
.xhs-card .preview-content mark[style] strong {
    color: inherit !important;
}

body.theme-light .editor-selection-toolbar {
    background: rgba(255, 255, 255, 0.98);
}

/* codex v108: allow editor select controls to open and add social-media color presets. */
.editor-selection-toolbar .editor-selection-preset {
    min-width: 96px;
    max-width: 128px;
    color: #334155;
    background: #f8fafc;
    border-color: #e2e8f0;
}

.editor-selection-toolbar .editor-selection-preset:hover,
.editor-selection-toolbar .editor-selection-preset:focus {
    color: #0f172a;
    background: #eef2ff;
    border-color: rgba(99, 102, 241, 0.32);
}

.editor-selection-toolbar .editor-selection-save-preset {
    min-width: 48px;
    padding: 0 7px;
    color: #2563eb;
    background: #eff6ff;
    font-size: 12px;
    font-weight: 800;
}

.editor-selection-toolbar .editor-selection-save-preset:hover {
    color: #1d4ed8;
    background: #dbeafe;
}

/* codex v118: add a full-document inline-style clear action while keeping Markdown emphasis syntax. */
.editor-selection-toolbar .editor-selection-clear-all {
    position: absolute;
    right: 10px;
    bottom: -34px;
    display: none;
    align-items: center;
    justify-content: center;
    height: 28px;
    min-width: 132px;
    padding: 0 10px;
    color: #475569;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}

.editor-selection-toolbar:hover .editor-selection-clear-all,
.editor-selection-toolbar:focus-within .editor-selection-clear-all {
    display: inline-flex;
}

.editor-selection-toolbar .editor-selection-clear-all {
    font-size: 0;
}

.editor-selection-toolbar .editor-selection-clear-all::after {
    content: "清除全文行内格式";
    color: #475569;
    font-size: 12px;
    line-height: 1;
}

.editor-selection-toolbar .editor-selection-clear-all:hover {
    color: #be123c;
    background: #fff1f2;
    border-color: #fecdd3;
}

/* codex v121: remove visual/atlas title boxes and align body copy with headings. */
html body .xhs-card.pixel-page.card-theme-visual .preview-content.wechat-article h1,
html body .xhs-card.pixel-page.card-theme-visual .preview-content.wechat-article h2,
html body .xhs-card.pixel-page.card-theme-atlas .preview-content.wechat-article h1,
html body .xhs-card.pixel-page.card-theme-atlas .preview-content.wechat-article h2,
html body .xhs-card.pixel-page.card-theme-visual .cover-title,
html body .xhs-card.pixel-page.card-theme-atlas .cover-title,
html body .xhs-card.pixel-page.card-theme-visual .preview-content.wechat-article h1 .content,
html body .xhs-card.pixel-page.card-theme-visual .preview-content.wechat-article h2 .content,
html body .xhs-card.pixel-page.card-theme-atlas .preview-content.wechat-article h1 .content,
html body .xhs-card.pixel-page.card-theme-atlas .preview-content.wechat-article h2 .content {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body .xhs-card.pixel-page.card-theme-visual .preview-content.wechat-article h1,
html body .xhs-card.pixel-page.card-theme-atlas .preview-content.wechat-article h1 {
    padding: 0 0 7px !important;
}

html body .xhs-card.pixel-page.card-theme-visual .preview-content.wechat-article h2,
html body .xhs-card.pixel-page.card-theme-atlas .preview-content.wechat-article h2 {
    margin: 0 0 9px !important;
    padding: 0 0 5px !important;
    text-align: left !important;
}

html body .xhs-card.pixel-page.card-theme-visual .preview-content.wechat-article p,
html body .xhs-card.pixel-page.card-theme-atlas .preview-content.wechat-article p,
html body .xhs-card.pixel-page.card-theme-visual .preview-content.wechat-article li,
html body .xhs-card.pixel-page.card-theme-atlas .preview-content.wechat-article li {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

html body .xhs-card.pixel-page.card-theme-visual .preview-content.wechat-article > p,
html body .xhs-card.pixel-page.card-theme-atlas .preview-content.wechat-article > p,
html body .xhs-card.pixel-page.card-theme-visual .preview-content.wechat-article > ul,
html body .xhs-card.pixel-page.card-theme-visual .preview-content.wechat-article > ol,
html body .xhs-card.pixel-page.card-theme-atlas .preview-content.wechat-article > ul,
html body .xhs-card.pixel-page.card-theme-atlas .preview-content.wechat-article > ol {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* codex v120: refine visual-summary, image-atlas, and social-tweet card title furniture. */
html body .xhs-card.pixel-page.card-theme-visual,
html body .xhs-card.pixel-page.card-theme-atlas {
    --card-visual-top-color: #4e5a62;
    --card-visual-top-mark: #cf3155;
}

html body .xhs-card.pixel-page.card-theme-atlas {
    --card-visual-top-color: #51447d;
    --card-visual-top-mark: #7c3aed;
}

html body .xhs-card.pixel-page.card-theme-visual:not(.page-type-cover) .card-theme-topline,
html body .xhs-card.pixel-page.card-theme-atlas:not(.page-type-cover) .card-theme-topline {
    top: 15px !important;
    left: var(--pixel-content-side, 18px) !important;
    right: auto !important;
    width: auto !important;
    max-width: calc(100% - (var(--pixel-content-side, 18px) + var(--pixel-content-side, 18px))) !important;
    height: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--card-visual-top-color) !important;
    font-family: "SFMono-Regular", Consolas, monospace !important;
    font-size: 7.5px !important;
    font-weight: 850 !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    text-transform: uppercase !important;
}

html body .xhs-card.pixel-page.card-theme-visual:not(.page-type-cover) .card-theme-topline::before,
html body .xhs-card.pixel-page.card-theme-atlas:not(.page-type-cover) .card-theme-topline::before {
    content: "" !important;
    flex: 0 0 auto !important;
    display: inline-block !important;
    width: 7px !important;
    height: 7px !important;
    margin: 0 !important;
    border: 1px solid var(--card-visual-top-mark) !important;
    border-radius: 2px !important;
    background: transparent !important;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--card-visual-top-mark) 20%, transparent) !important;
    vertical-align: middle !important;
}

html body .xhs-card.pixel-page.card-theme-visual:not(.page-type-cover) .preview-content,
html body .xhs-card.pixel-page.card-theme-atlas:not(.page-type-cover) .preview-content {
    top: 42px !important;
    height: calc(var(--pixel-content-h, 356px) - 24px) !important;
}

html body .xhs-card.pixel-page.card-theme-visual .preview-content.wechat-article h1,
html body .xhs-card.pixel-page.card-theme-atlas .preview-content.wechat-article h1,
html body .xhs-card.pixel-page.card-theme-visual .preview-content.wechat-article h1 .content,
html body .xhs-card.pixel-page.card-theme-atlas .preview-content.wechat-article h1 .content {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body .xhs-card.pixel-page.card-theme-visual .preview-content.wechat-article h1,
html body .xhs-card.pixel-page.card-theme-atlas .preview-content.wechat-article h1 {
    margin: 0 0 11px !important;
    padding: 0 0 7px !important;
    color: #20282e !important;
    font-family: "Source Han Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    line-height: 1.34 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
}

html body .xhs-card.pixel-page.card-theme-atlas .preview-content.wechat-article h1 {
    color: #2e2551 !important;
}

html body .xhs-card.pixel-page.card-theme-visual .preview-content.wechat-article h1::after,
html body .xhs-card.pixel-page.card-theme-atlas .preview-content.wechat-article h1::after {
    content: "" !important;
    display: block !important;
    width: 36px !important;
    height: 2px !important;
    margin: 7px 0 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--card-visual-top-mark) !important;
    line-height: 0 !important;
}

html body .xhs-card.pixel-page.card-theme-social .preview-content.wechat-article h1,
html body .xhs-card.pixel-page.card-theme-social .preview-content.wechat-article h2,
html body .xhs-card.pixel-page.card-theme-social .cover-title {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    letter-spacing: 0 !important;
}

html body .xhs-card.pixel-page.card-theme-social .preview-content.wechat-article h1::before,
html body .xhs-card.pixel-page.card-theme-social .preview-content.wechat-article h1::after,
html body .xhs-card.pixel-page.card-theme-social .preview-content.wechat-article h2::before,
html body .xhs-card.pixel-page.card-theme-social .preview-content.wechat-article h2::after,
html body .xhs-card.pixel-page.card-theme-social .cover-title::before,
html body .xhs-card.pixel-page.card-theme-social .cover-title::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.editor-selection-toolbar .editor-selection-clear-all:hover::after {
    color: #be123c;
}

/* codex v110: narrow two-line selection toolbar and de-duplicated inline style updates. */
.editor-selection-toolbar {
    overscroll-behavior: contain;
}

/* codex v111: single-font definitions and user-saved highlight color presets. */
.editor-selection-toolbar {
    max-height: 94px;
}

/* codex v119: keep full-document Tx visible but compact, and add custom-preset deletion. */
.editor-selection-toolbar {
    width: min(540px, calc(100vw - 20px));
    max-height: 96px;
}

.editor-selection-toolbar .editor-selection-delete-preset {
    min-width: 30px;
    padding: 0 7px;
    color: #64748b;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    font-size: 12px;
    font-weight: 800;
}

.editor-selection-toolbar .editor-selection-delete-preset:hover {
    color: #be123c;
    background: #fff1f2;
    border-color: #fecdd3;
}

.editor-selection-toolbar .editor-selection-clear-all {
    position: static;
    right: auto;
    bottom: auto;
    display: inline-flex;
    height: 31px;
    min-width: 48px;
    padding: 0 8px;
    color: #475569;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    box-shadow: none;
    font-size: 0;
    font-weight: 800;
}

.editor-selection-toolbar:hover .editor-selection-clear-all,
.editor-selection-toolbar:focus-within .editor-selection-clear-all {
    display: inline-flex;
}

.editor-selection-toolbar .editor-selection-clear-all::after {
    content: "全文Tx";
    color: #475569;
    font-size: 12px;
    line-height: 1;
}

.editor-selection-toolbar .editor-selection-clear-all:hover {
    color: #be123c;
    background: #fff1f2;
    border-color: #fecdd3;
}