:root {
    --bg-main: #f4f8ff;
    --bg-soft: #eef5ff;
    --bg-mist: rgba(225, 237, 255, 0.72);
    --card-bg: rgba(255, 255, 255, 0.78);
    --card-bg-strong: rgba(255, 255, 255, 0.92);
    --card-bg-solid: #ffffff;
    --border-soft: rgba(111, 139, 181, 0.18);
    --border-strong: rgba(79, 141, 247, 0.36);
    --text-main: #10213f;
    --text-muted: #667895;
    --text-soft: #8190a9;
    --primary: #4f8df7;
    --primary-strong: #2f73e7;
    --primary-soft: #e8f1ff;
    --cyan-soft: #e8fbff;
    --purple-soft: #f3efff;
    --green-soft: #eaf8f1;
    --orange-soft: #fff4e5;
    --success: #39b980;
    --warning: #f3a13b;
    --danger: #ef5b6b;
    --danger-soft: #fff0f2;
    --radius-xl: 24px;
    --radius-lg: 20px;
    --radius-md: 14px;
    --shadow-soft: 0 18px 45px rgba(70, 100, 150, 0.13);
    --shadow-card: 0 8px 24px rgba(70, 100, 150, 0.10);
    --shadow-hover: 0 16px 36px rgba(70, 100, 150, 0.16);
}

* {
    box-sizing: border-box;
}

html {
    color-scheme: light !important;
    scrollbar-color: rgba(79, 141, 247, 0.42) rgba(255, 255, 255, 0.45);
}

body {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(circle at 12% 8%, rgba(177, 211, 255, 0.62), transparent 31%),
        radial-gradient(circle at 82% 5%, rgba(216, 204, 255, 0.46), transparent 28%),
        radial-gradient(circle at 74% 78%, rgba(190, 243, 245, 0.38), transparent 30%),
        linear-gradient(145deg, #fbfdff 0%, var(--bg-main) 48%, #edf6ff 100%) !important;
    background-attachment: fixed !important;
    color: var(--text-main) !important;
    font-family: "Microsoft YaHei", "PingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    line-height: 1.56;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0.42), transparent 28%, rgba(255, 255, 255, 0.32) 62%, transparent),
        radial-gradient(ellipse at 50% -10%, rgba(255, 255, 255, 0.86), transparent 42%);
    opacity: 0.92;
}

body .container,
body .page-container,
body .main-wrap {
    width: 100%;
    max-width: 1480px;
    margin-inline: auto;
    padding: 30px clamp(18px, 3vw, 46px) 54px !important;
}

body h1,
body h2,
body h3,
body h4 {
    color: var(--text-main) !important;
    letter-spacing: 0 !important;
}

body h1 {
    font-size: clamp(27px, 3vw, 38px) !important;
    font-weight: 850 !important;
    line-height: 1.18 !important;
}

body h2,
body .section-title {
    font-size: clamp(20px, 2vw, 26px) !important;
    font-weight: 820 !important;
}

body a {
    color: var(--primary-strong);
}

body a:hover {
    color: #245fc5;
}

/* Top navigation */
body .global-top-nav {
    position: sticky;
    top: 0;
    z-index: 900;
    min-height: 62px !important;
    padding: 10px clamp(16px, 3vw, 42px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.72) !important;
    background: rgba(255, 255, 255, 0.68) !important;
    box-shadow: 0 10px 30px rgba(95, 125, 170, 0.11) !important;
    backdrop-filter: blur(22px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(160%) !important;
}

body .global-top-nav__brand {
    color: var(--text-main) !important;
    font-weight: 850 !important;
}

body .global-top-nav__brand-icon {
    border: 1px solid rgba(79, 141, 247, 0.22) !important;
    border-radius: 14px !important;
    background: linear-gradient(145deg, #ffffff, #dcecff) !important;
    color: var(--primary-strong) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88), 0 8px 18px rgba(79, 141, 247, 0.16) !important;
}

body .global-top-nav__item {
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    color: #526680 !important;
    background: transparent !important;
    font-weight: 760 !important;
}

body .global-top-nav__item:hover {
    border-color: rgba(79, 141, 247, 0.18) !important;
    background: rgba(232, 241, 255, 0.78) !important;
    color: var(--primary-strong) !important;
    box-shadow: none !important;
}

body .global-top-nav__item.is-active {
    border-color: rgba(79, 141, 247, 0.22) !important;
    background: linear-gradient(135deg, #5b9afa, #3f7eea) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(79, 141, 247, 0.24) !important;
}

/* Page framing */
body .page-top,
body .stats-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 18px !important;
    margin-bottom: 24px !important;
    flex-wrap: wrap !important;
}

body .current-path,
body .breadcrumb {
    max-width: min(920px, 100%) !important;
    padding: 9px 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.58) !important;
    color: var(--text-muted) !important;
    box-shadow: 0 8px 20px rgba(70, 100, 150, 0.07) !important;
    text-align: left !important;
    line-height: 1.45 !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}

body .current-path a,
body .breadcrumb a {
    color: #456fbd !important;
    text-decoration: none !important;
}

body .current-path a:hover,
body .breadcrumb a:hover {
    color: var(--primary-strong) !important;
    text-decoration: none !important;
}

body .current-path .sep,
body .breadcrumb .sep,
body .sep {
    color: #94a6bf !important;
}

/* Buttons */
button,
input[type="submit"],
.btn,
body .tool-btn,
body .nav-btn,
body .action-btn,
body .detail-btn,
body .directory-link,
body .folder-action-btn,
body .danger-btn,
body .confirm-btn,
body .cancel-btn,
body .submit-btn,
body .clear-btn,
body .fix-btn,
body .preview-edit-btn,
body .preview-save-btn,
body .preview-cancel-btn,
body .readonly-modal-copy,
body .copy-btn,
body .close-btn,
body .download-btn,
body .rename-btn,
body .edit-btn,
body .tag-btn,
body .prompt-btn,
body .history-btn {
    min-height: 36px;
    border: 1px solid rgba(79, 141, 247, 0.18) !important;
    border-radius: 999px !important;
    padding: 9px 15px !important;
    background: rgba(255, 255, 255, 0.76) !important;
    color: var(--primary-strong) !important;
    box-shadow: 0 8px 18px rgba(80, 110, 160, 0.09) !important;
    font: inherit !important;
    font-weight: 760 !important;
    line-height: 1.25 !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease, color 0.16s ease !important;
}

button:hover,
input[type="submit"]:hover,
.btn:hover,
body .tool-btn:hover,
body .action-btn:hover,
body .detail-btn:hover,
body .directory-link:hover,
body .folder-action-btn:hover,
body .submit-btn:hover,
body .clear-btn:hover,
body .fix-btn:hover,
body .preview-edit-btn:hover,
body .preview-save-btn:hover,
body .preview-cancel-btn:hover,
body .readonly-modal-copy:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(79, 141, 247, 0.34) !important;
    background: #ffffff !important;
    box-shadow: 0 12px 26px rgba(80, 110, 160, 0.14) !important;
    filter: none !important;
}

body .tool-btn,
body .submit-btn,
body .detail-btn,
body .directory-link,
body .action-btn,
body .folder-action-btn,
body .btn-primary,
body .preview-edit-btn,
body .readonly-modal-copy {
    background: linear-gradient(135deg, #64a1ff, var(--primary)) !important;
    color: #ffffff !important;
    border-color: rgba(79, 141, 247, 0.18) !important;
}

body .danger-btn,
body .delete-btn,
body .folder-delete-btn,
body .batch-delete-btn,
body .action-btn.danger,
body .danger,
body .btn-danger,
body .clear-tags-btn,
body .readonly-modal-close {
    background: var(--danger-soft) !important;
    color: #cf3d50 !important;
    border-color: rgba(239, 91, 107, 0.24) !important;
}

body .confirm-btn,
body .btn-success,
body .preview-save-btn,
body .action-btn.success {
    background: linear-gradient(135deg, #51c997, var(--success)) !important;
    color: #ffffff !important;
    border-color: rgba(57, 185, 128, 0.2) !important;
}

body .cancel-btn,
body .clear-btn,
body .secondary,
body .batch-clear-btn,
body .batch-cancel-btn,
body .btn-muted,
body .action-btn.secondary,
body .preview-cancel-btn {
    background: rgba(241, 245, 251, 0.94) !important;
    color: #526680 !important;
    border-color: rgba(111, 139, 181, 0.2) !important;
}

body .rename-btn,
body .action-btn.rename,
body .btn-warning {
    background: var(--purple-soft) !important;
    color: #6d5bbd !important;
    border-color: rgba(132, 105, 212, 0.2) !important;
}

body .download-btn,
body .action-btn.download {
    background: var(--cyan-soft) !important;
    color: #1686a4 !important;
    border-color: rgba(44, 174, 197, 0.2) !important;
}

button:disabled,
body .action-btn:disabled,
body .readonly-modal-copy:disabled {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* Forms */
input[type="text"],
input[type="number"],
input[type="search"],
input[type="file"],
select,
textarea {
    border: 1px solid rgba(111, 139, 181, 0.24) !important;
    border-radius: var(--radius-md) !important;
    background: rgba(255, 255, 255, 0.86) !important;
    color: var(--text-main) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="file"]:focus,
select:focus,
textarea:focus {
    border-color: rgba(79, 141, 247, 0.58) !important;
    outline: none !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(79, 141, 247, 0.14) !important;
}

textarea,
pre,
body .preview-content,
body .preview-editor,
body #promptText {
    font-family: "Microsoft YaHei", "PingFang SC", "SFMono-Regular", Consolas, monospace !important;
}

/* Cards and panels */
body .cards,
body .grid,
body .asset-grid,
body .folder-grid,
body .file-grid,
body .result-grid,
body .preview-grid,
body .quick-grid,
body .recent-grid,
body .dashboard,
body .stats-grid,
body .version-grid {
    gap: 18px !important;
}

body .card,
body .folder-card,
body .asset-card,
body .file-card,
body .entry-card,
body .stat-card,
body .quick-card,
body .recent-card,
body .result-card,
body .version-card,
body .section-box,
body .search-panel,
body .global-search,
body .file-search-panel,
body .filter-panel,
body .current-panel,
body .workspace-panel,
body .status-panel,
body .record-table-wrap,
body .recent-table-wrap,
body .result-table-wrap,
body .table-wrap,
body .add-box,
body .expand-box,
body .upload-box,
body .form-section,
body .description,
body .folder-description,
body .notice-box,
body .notice,
body .empty-tip {
    border: 1px solid var(--border-soft) !important;
    border-radius: var(--radius-lg) !important;
    background: var(--card-bg) !important;
    color: var(--text-main) !important;
    box-shadow: var(--shadow-card) !important;
    backdrop-filter: blur(18px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(145%) !important;
}

body .card:hover,
body .folder-card:hover,
body .asset-card:hover,
body .file-card:hover,
body .entry-card:hover,
body .quick-card:hover,
body .recent-card:hover,
body .result-card:hover,
body .version-card:hover {
    transform: translateY(-2px) !important;
    border-color: var(--border-strong) !important;
    box-shadow: var(--shadow-hover) !important;
}

body .card {
    min-height: 104px !important;
    padding: 22px !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(241, 247, 255, 0.76)) !important;
}

body .card h2,
body .quick-card h3,
body .recent-card strong,
body .file-name,
body .entry-name,
body .result-name,
body .record-name,
body .version-card,
body .folder-main {
    color: var(--text-main) !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
}

body .quick-card,
body .recent-card,
body .episode-entry,
body .folder-main {
    color: var(--text-main) !important;
    text-decoration: none !important;
}

body .quick-card p,
body .recent-card p,
body .episode-entry p,
body .file-meta,
body .meta,
body .hint,
body .upload-hint,
body .page-description,
body .count,
body .folder-description,
body .readonly-hint,
body .result-path,
body .result-time,
body .filter-hint,
body .group-empty {
    color: var(--text-muted) !important;
}

body .stat-card h3 {
    color: var(--primary-strong) !important;
}

body .stat-card.warning h3,
body .warning-number,
body .missing {
    color: var(--warning) !important;
}

body .found {
    color: var(--success) !important;
}

body .workspace-panel,
body .status-panel,
body .form-section {
    padding: 22px !important;
}

body .status-item,
body .radio-option {
    border: 1px solid rgba(111, 139, 181, 0.18) !important;
    border-radius: var(--radius-md) !important;
    background: rgba(255, 255, 255, 0.62) !important;
    color: var(--text-main) !important;
}

body .radio-option input,
body .folder-checkbox,
body .asset-checkbox,
body .version-checkbox,
body .batch-check,
body .delete-check {
    accent-color: var(--primary);
}

body .form-section.is-highlighted {
    border-color: rgba(79, 141, 247, 0.44) !important;
    box-shadow: 0 0 0 4px rgba(79, 141, 247, 0.12), var(--shadow-card) !important;
}

/* File center and lists */
body .folder-main {
    background: transparent !important;
}

body .folder-main:hover {
    background: rgba(232, 241, 255, 0.74) !important;
}

body .file-meta span:first-child,
body .meta span:first-child,
body .file-type-badge,
body .tag-pill,
body .card-tag,
body .library-tag,
body .filter-pill,
body .active-filter-pill {
    display: inline-flex;
    align-items: center;
    width: max-content;
    max-width: 100%;
    padding: 5px 10px !important;
    border: 1px solid rgba(79, 141, 247, 0.18) !important;
    border-radius: 999px !important;
    background: rgba(232, 241, 255, 0.82) !important;
    color: #456fbd !important;
    font-size: 12px !important;
    font-weight: 760 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    white-space: normal !important;
}

body .card-tags,
body .tag-list {
    gap: 7px !important;
}

body .card-tag-empty {
    color: var(--text-soft) !important;
}

body .file-card.readonly-preview-card:hover {
    background: rgba(255, 255, 255, 0.9) !important;
}

body.select-mode .card-wrap,
body.select-mode .file-card,
body.delete-mode .folder-card,
body.delete-mode .file-card,
body.delete-mode .entry-card,
body.delete-mode .result-card {
    outline: 2px dashed rgba(79, 141, 247, 0.48) !important;
    outline-offset: 4px !important;
}

/* Tables */
body table {
    color: var(--text-main) !important;
}

body .result-table,
body .recent-table,
body .record-table,
body .stats-table,
body .preview-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: rgba(255, 255, 255, 0.54) !important;
}

body .result-table th,
body .recent-table th,
body .record-table th,
body .stats-table th,
body .preview-table th {
    background: rgba(232, 241, 255, 0.92) !important;
    color: #456fbd !important;
    border-bottom: 1px solid rgba(111, 139, 181, 0.18) !important;
}

body .result-table td,
body .recent-table td,
body .record-table td,
body .stats-table td,
body .preview-table td {
    color: var(--text-main) !important;
    border-bottom: 1px solid rgba(111, 139, 181, 0.14) !important;
}

body .result-table tr:hover td,
body .recent-table tr:hover td,
body .record-table tr:hover td,
body .stats-table tr:hover td {
    background: rgba(244, 248, 255, 0.86) !important;
}

/* Images and assets */
body .preview-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(430px, 100%), 1fr)) !important;
}

body .asset-image,
body .preview-grid .file-card img,
body .result-image,
body .preview-image {
    border: 1px solid rgba(111, 139, 181, 0.16) !important;
    border-radius: 16px !important;
    background: #f8fbff !important;
}

body .preview-grid .file-card img,
body .asset-image {
    width: 100% !important;
    height: clamp(240px, 32vw, 360px) !important;
    object-fit: contain !important;
}

body .result-image {
    object-fit: cover !important;
}

body .asset-actions,
body .file-actions,
body .folder-actions,
body .card-actions,
body .record-actions,
body .recent-actions,
body .result-actions,
body .build-actions,
body .modal-actions,
body .default-toolbar-actions,
body .delete-actions,
body .batch-delete-actions,
body .toolbar {
    gap: 10px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

body .asset-actions {
    padding-top: 14px !important;
    border-top: 1px solid rgba(111, 139, 181, 0.14) !important;
}

/* Preview panels and modals */
body .preview-panel,
body .modal-card,
body .modal-box,
body .readonly-modal-card,
body #promptPopup {
    border: 1px solid rgba(111, 139, 181, 0.22) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    color: var(--text-main) !important;
    box-shadow: 0 28px 80px rgba(65, 92, 135, 0.22) !important;
}

body .preview-panel {
    min-height: 520px !important;
    max-height: none !important;
}

body .preview-header,
body .readonly-modal-header,
body .modal-header,
body .popup-header {
    border-bottom: 1px solid rgba(111, 139, 181, 0.14) !important;
    background: rgba(255, 255, 255, 0.64) !important;
    color: var(--text-main) !important;
}

body .preview-body,
body .readonly-modal-body,
body #promptText {
    border: 1px solid rgba(111, 139, 181, 0.18) !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    color: var(--text-main) !important;
}

body .preview-body pre,
body .preview-content,
body .readonly-modal-body pre,
body #promptText {
    color: #132747 !important;
    font-size: 14px !important;
    line-height: 1.72 !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
}

body .preview-edit-textarea,
body .preview-editor,
body .preview-body textarea,
body #editContent {
    min-height: 280px;
    background: #ffffff !important;
    color: #132747 !important;
    line-height: 1.72 !important;
}

body .preview-message,
body .readonly-modal-message,
body .message,
body .warning-list,
body .mode-warning {
    color: #a16615 !important;
}

body .readonly-modal,
body .modal-backdrop,
body .modal,
body #imageModal {
    background: rgba(82, 105, 140, 0.34) !important;
    backdrop-filter: blur(16px) saturate(135%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(135%) !important;
}

body .readonly-modal-card,
body .modal-card {
    width: min(1180px, calc(100vw - 32px)) !important;
    height: min(880px, calc(100vh - 32px)) !important;
    padding: 20px !important;
}

body .readonly-modal-body,
body .modal-card .preview-editor {
    flex: 1 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: auto !important;
}

body .readonly-modal-close,
body .preview-close,
body .close-preview,
body .close-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
}

body .pdf-preview-frame,
body .pdf-frame,
body .readonly-modal-body iframe,
body .readonly-modal-body video {
    min-height: 62vh !important;
    border-radius: 14px !important;
    background: #ffffff !important;
}

body #imageModal img {
    border-radius: 18px !important;
    box-shadow: 0 28px 80px rgba(20, 40, 70, 0.32) !important;
}

/* Prompt workspace */
body .record-gpt2 .record-name,
body .record-gpt2 .record-type {
    color: #b86b20 !important;
}

body .record-gpt3 .record-name,
body .record-gpt3 .record-type {
    color: #197d99 !important;
}

body .record-preview-btn {
    color: inherit !important;
    box-shadow: none !important;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    min-height: 0 !important;
}

body .message {
    background: #fff5f5 !important;
    border-color: rgba(239, 91, 107, 0.18) !important;
    color: #b33b4a !important;
}

/* Utility states */
body .success-notice {
    background: rgba(234, 248, 241, 0.94) !important;
    border-color: rgba(57, 185, 128, 0.22) !important;
    color: #247c58 !important;
}

body .error-notice {
    background: rgba(255, 240, 242, 0.94) !important;
    border-color: rgba(239, 91, 107, 0.24) !important;
    color: #b33b4a !important;
}

body .upload-notice,
body .notice-box,
body .notice {
    background: rgba(255, 250, 240, 0.88) !important;
    border-color: rgba(243, 161, 59, 0.24) !important;
    color: #9a6417 !important;
}

body .empty-tip {
    color: var(--text-muted) !important;
}

body .back-button,
body .back-link {
    border: 1px solid rgba(111, 139, 181, 0.18) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.72) !important;
    color: #526680 !important;
    box-shadow: 0 8px 18px rgba(80, 110, 160, 0.09) !important;
}

@media (max-width: 820px) {
    body .global-top-nav {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    body .global-top-nav__links {
        width: 100%;
        overflow-x: auto;
    }

    body .page-top,
    body .stats-header {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    body .current-path {
        border-radius: 16px !important;
        max-width: 100% !important;
    }

    body .global-search-form,
    body .file-search-form,
    body .form-actions,
    body .expand-box form {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    body .file-grid,
    body .folder-grid,
    body .grid,
    body .result-grid,
    body .preview-grid,
    body .quick-grid,
    body .recent-grid {
        grid-template-columns: 1fr !important;
    }

    body .readonly-modal,
    body .modal-backdrop,
    body .modal {
        padding: 10px !important;
    }

    body .readonly-modal-card,
    body .modal-card,
    body .modal-box {
        width: 100% !important;
        height: calc(100vh - 20px) !important;
        max-height: calc(100vh - 20px) !important;
    }
}

/* Liquid Glass preview system */
body .readonly-modal,
body .readonly-preview-modal,
body .preview-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100vw !important;
    height: 100vh !important;
    padding: 32px !important;
    background:
        radial-gradient(circle at 20% 20%, rgba(120, 170, 255, 0.22), transparent 32%),
        radial-gradient(circle at 80% 10%, rgba(190, 210, 255, 0.20), transparent 28%),
        rgba(21, 38, 70, 0.34) !important;
    backdrop-filter: blur(18px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(130%) !important;
}

body .readonly-modal.open,
body .readonly-modal.show,
body .readonly-modal.active,
body .readonly-preview-modal.open,
body .readonly-preview-modal.show,
body .readonly-preview-modal.active,
body .preview-modal.open,
body .preview-modal.show,
body .preview-modal.active {
    display: flex !important;
}

body .readonly-modal[style*="display: block"],
body .readonly-preview-modal[style*="display: block"],
body .preview-modal[style*="display: block"] {
    display: flex !important;
}

body .readonly-modal-card,
body .readonly-preview-dialog,
body .preview-modal-dialog,
body .modal-dialog {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: min(1120px, calc(100vw - 64px)) !important;
    height: auto !important;
    max-height: calc(100vh - 72px) !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 28px !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(245, 249, 255, 0.72)),
        rgba(255, 255, 255, 0.72) !important;
    box-shadow:
        0 28px 80px rgba(35, 70, 125, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 0 rgba(130, 160, 210, 0.16) !important;
    backdrop-filter: blur(28px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(150%) !important;
}

body .readonly-modal-card::before,
body .readonly-preview-dialog::before,
body .preview-modal-dialog::before,
body .modal-dialog::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.75), transparent 28%),
        radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.85), transparent 24%);
    opacity: 0.75;
}

body .readonly-modal-header,
body .readonly-preview-header,
body .preview-modal-header,
body .modal-header,
body .popup-header {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    min-height: 0 !important;
    padding: 26px 32px 18px !important;
    border-bottom: 1px solid rgba(120, 150, 190, 0.16) !important;
    background: transparent !important;
}

body .readonly-modal-title h2,
body .readonly-preview-title h2,
body .preview-modal-title,
body .modal-title,
body .popup-title {
    margin: 0 !important;
    color: #10213f !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    line-height: 1.25 !important;
}

body .readonly-modal-title p,
body .readonly-preview-path,
body .preview-modal-path {
    margin: 8px 44px 0 0 !important;
    color: #667895 !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    word-break: break-word !important;
}

body .readonly-modal-close,
body .readonly-preview-close,
body .modal-close,
body #promptPopup .close-btn {
    position: absolute !important;
    top: 22px !important;
    right: 24px !important;
    z-index: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    border: 1px solid rgba(239, 91, 107, 0.22) !important;
    border-radius: 999px !important;
    background: rgba(255, 240, 242, 0.78) !important;
    color: #e5485d !important;
    box-shadow: 0 8px 20px rgba(239, 91, 107, 0.12) !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease !important;
}

body .readonly-modal-close:hover,
body .readonly-preview-close:hover,
body .modal-close:hover,
body #promptPopup .close-btn:hover {
    transform: translateY(-1px) scale(1.03) !important;
    background: rgba(255, 225, 230, 0.95) !important;
    box-shadow: 0 12px 28px rgba(239, 91, 107, 0.18) !important;
}

body .readonly-modal-body,
body .readonly-preview-content,
body .preview-content,
body .preview-body,
body .modal-body,
body #promptText {
    position: relative !important;
    z-index: 1 !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - 250px) !important;
    margin: 18px 32px 22px !important;
    padding: 22px 24px !important;
    overflow: auto !important;
    border: 1px solid rgba(120, 150, 190, 0.18) !important;
    border-radius: 18px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(250, 253, 255, 0.92)) !important;
    color: #10213f !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 8px 28px rgba(70, 100, 150, 0.08) !important;
    font-size: 14px !important;
    line-height: 1.75 !important;
}

body .readonly-modal-body pre,
body .readonly-preview-content pre,
body .preview-content,
body .preview-body pre,
body .modal-body pre,
body #promptText {
    margin: 0 !important;
    color: #10213f !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", "Microsoft YaHei", monospace !important;
    font-size: 14px !important;
    line-height: 1.75 !important;
}

body .readonly-modal-body::-webkit-scrollbar,
body .readonly-preview-content::-webkit-scrollbar,
body .preview-content::-webkit-scrollbar,
body .preview-body::-webkit-scrollbar,
body .modal-body::-webkit-scrollbar,
body #promptText::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

body .readonly-modal-body::-webkit-scrollbar-thumb,
body .readonly-preview-content::-webkit-scrollbar-thumb,
body .preview-content::-webkit-scrollbar-thumb,
body .preview-body::-webkit-scrollbar-thumb,
body .modal-body::-webkit-scrollbar-thumb,
body #promptText::-webkit-scrollbar-thumb {
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 999px;
    background: rgba(79, 141, 247, 0.38);
}

body .readonly-modal-body::-webkit-scrollbar-track,
body .readonly-preview-content::-webkit-scrollbar-track,
body .preview-content::-webkit-scrollbar-track,
body .preview-body::-webkit-scrollbar-track,
body .modal-body::-webkit-scrollbar-track,
body #promptText::-webkit-scrollbar-track {
    background: transparent;
}

body .readonly-modal-actions,
body .readonly-preview-footer,
body .preview-modal-footer,
body .modal-footer {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    flex: 0 0 auto !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    padding: 0 32px 28px !important;
}

body .readonly-modal-copy,
body .copy-preview-btn,
body .copy-content-btn,
body .preview-copy-btn,
body #promptPopup .copy-btn {
    border: 0 !important;
    border-radius: 999px !important;
    padding: 10px 18px !important;
    background: linear-gradient(135deg, #4f8df7, #6aa6ff) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 24px rgba(79, 141, 247, 0.28) !important;
    font-weight: 800 !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease !important;
}

body .readonly-modal-copy:hover,
body .copy-preview-btn:hover,
body .copy-content-btn:hover,
body .preview-copy-btn:hover,
body #promptPopup .copy-btn:hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.04) !important;
    box-shadow: 0 14px 34px rgba(79, 141, 247, 0.34) !important;
}

body .readonly-modal-body img,
body .readonly-preview-content img,
body .preview-content img,
body .preview-body img,
body .preview-image {
    display: block !important;
    max-width: 100% !important;
    max-height: calc(100vh - 260px) !important;
    margin: 0 auto !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 32px rgba(30, 60, 110, 0.16) !important;
}

body .readonly-modal-body video,
body .readonly-preview-content video,
body .readonly-modal-body iframe,
body .readonly-preview-content iframe,
body .preview-content video,
body .preview-content iframe,
body .preview-body video,
body .preview-body iframe,
body .pdf-preview-frame,
body .pdf-frame {
    width: 100% !important;
    max-width: 100% !important;
    min-height: min(62vh, 620px) !important;
    max-height: calc(100vh - 260px) !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: #ffffff !important;
}

body .preview-panel {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: min(680px, calc(100vh - 180px)) !important;
    max-height: calc(100vh - 120px) !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.68) !important;
    border-radius: 28px !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.84), rgba(245, 249, 255, 0.72)),
        rgba(255, 255, 255, 0.72) !important;
    box-shadow:
        0 24px 62px rgba(35, 70, 125, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(24px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(145%) !important;
}

body .preview-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.70), transparent 30%),
        radial-gradient(circle at 18% 0%, rgba(150, 190, 255, 0.24), transparent 28%);
    opacity: 0.82;
}

body .preview-header {
    position: relative !important;
    z-index: 1 !important;
    padding: 22px 26px 16px !important;
    border-bottom: 1px solid rgba(120, 150, 190, 0.16) !important;
}

body .preview-header h2 {
    color: #10213f !important;
    font-size: 22px !important;
    line-height: 1.3 !important;
}

body .preview-panel .preview-close,
body .close-preview {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 auto !important;
    border: 1px solid rgba(239, 91, 107, 0.22) !important;
    border-radius: 999px !important;
    background: rgba(255, 240, 242, 0.78) !important;
    color: #e5485d !important;
    box-shadow: 0 8px 20px rgba(239, 91, 107, 0.12) !important;
}

body #imageModal {
    background:
        radial-gradient(circle at 20% 20%, rgba(120, 170, 255, 0.20), transparent 32%),
        rgba(21, 38, 70, 0.40) !important;
    backdrop-filter: blur(18px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(130%) !important;
}

body #imageModal img {
    max-width: min(92vw, 1180px) !important;
    max-height: calc(100vh - 72px) !important;
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, 0.72) !important;
    box-shadow: 0 28px 80px rgba(35, 70, 125, 0.28) !important;
}

body #promptPopup {
    border: 1px solid rgba(255, 255, 255, 0.70) !important;
    border-radius: 24px !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(245, 249, 255, 0.76)),
        rgba(255, 255, 255, 0.76) !important;
    box-shadow:
        0 24px 68px rgba(35, 70, 125, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(24px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(145%) !important;
}

body #promptPopup .popup-tools {
    padding-right: 42px !important;
}

body #promptPopup #promptText {
    height: calc(100% - 88px) !important;
    max-height: none !important;
    margin: 18px 24px 24px !important;
}

@media (max-width: 768px) {
    body .readonly-modal,
    body .readonly-preview-modal,
    body .preview-modal {
        padding: 12px !important;
    }

    body .readonly-modal-card,
    body .readonly-preview-dialog,
    body .preview-modal-dialog,
    body .modal-dialog {
        width: calc(100vw - 24px) !important;
        max-height: calc(100vh - 24px) !important;
        border-radius: 20px !important;
    }

    body .readonly-modal-header,
    body .readonly-preview-header,
    body .preview-modal-header,
    body .modal-header {
        padding: 22px 20px 14px !important;
    }

    body .readonly-modal-title h2,
    body .readonly-preview-title h2,
    body .preview-modal-title,
    body .modal-title,
    body .popup-title,
    body .preview-header h2 {
        font-size: 19px !important;
    }

    body .readonly-modal-body,
    body .readonly-preview-content,
    body .preview-content,
    body .preview-body,
    body .modal-body {
        max-height: calc(100vh - 230px) !important;
        margin: 14px 20px 18px !important;
        padding: 18px !important;
    }

    body .readonly-modal-actions,
    body .readonly-preview-footer,
    body .preview-modal-footer,
    body .modal-footer {
        padding: 0 20px 22px !important;
    }

    body .preview-panel {
        min-height: 420px !important;
        max-height: none !important;
        border-radius: 20px !important;
    }

    body #promptPopup {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        height: calc(100vh - 48px) !important;
        max-height: calc(100vh - 48px) !important;
        left: 12px !important;
        top: 24px !important;
    }
}

/* Project detail page scoped fixes */
body.project-detail-page .project-detail-container {
    max-width: 1240px !important;
    padding-top: 28px !important;
}

body.project-detail-page .project-hero {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    margin-bottom: 22px !important;
}

body.project-detail-page .project-heading {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

body.project-detail-page .project-title-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

body.project-detail-page .project-title-row h1 {
    margin: 0 !important;
}

body.project-detail-page .project-title-row .back-button-wrap {
    display: inline-flex !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
}

body.project-detail-page .project-title-row .back-btn {
    min-height: 34px !important;
    border: 1px solid rgba(79, 141, 247, 0.24) !important;
    border-radius: 999px !important;
    padding: 8px 16px !important;
    background: rgba(255, 255, 255, 0.86) !important;
    color: #2f6fe8 !important;
    box-shadow: 0 8px 18px rgba(80, 110, 160, 0.10) !important;
}

body.project-detail-page .project-title-row .back-btn:hover {
    transform: translateY(-1px) !important;
    background: #ffffff !important;
    border-color: rgba(79, 141, 247, 0.42) !important;
}

body.project-detail-page .current-path {
    align-self: flex-start;
    max-width: 100% !important;
    background: rgba(255, 255, 255, 0.66) !important;
    color: #667895 !important;
}

body.project-detail-page .global-search {
    padding: 18px !important;
    margin-bottom: 28px !important;
}

body.project-detail-page .global-search-form input {
    background: rgba(255, 255, 255, 0.92) !important;
    color: #10213f !important;
}

body.project-detail-page .global-search-form button,
body.project-detail-page .action-btn,
body.project-detail-page .episode-entry span {
    border: 1px solid rgba(79, 141, 247, 0.22) !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #67a3ff, #4f8df7) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(79, 141, 247, 0.20) !important;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease !important;
}

body.project-detail-page .global-search-form button:hover,
body.project-detail-page .action-btn:hover,
body.project-detail-page .episode-entry:hover span {
    transform: translateY(-1px) !important;
    box-shadow: 0 14px 28px rgba(79, 141, 247, 0.25) !important;
}

body.project-detail-page .download-btn {
    background: rgba(232, 251, 255, 0.92) !important;
    color: #1686a4 !important;
    border-color: rgba(44, 174, 197, 0.24) !important;
    box-shadow: 0 8px 18px rgba(80, 110, 160, 0.09) !important;
}

body.project-detail-page .dashboard {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
    gap: 16px !important;
    margin-bottom: 34px !important;
}

body.project-detail-page .stat-card {
    min-height: 122px !important;
    padding: 20px !important;
    border: 1px solid rgba(111, 139, 181, 0.18) !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.90), rgba(242, 247, 255, 0.74)) !important;
    box-shadow: 0 8px 24px rgba(70, 100, 150, 0.10) !important;
}

body.project-detail-page .stat-card h3 {
    margin: 0 0 8px !important;
    color: #2f6fe8 !important;
    font-size: 34px !important;
    line-height: 1.05 !important;
}

body.project-detail-page .stat-card p {
    margin: 0 !important;
    color: #53657f !important;
    font-weight: 760 !important;
}

body.project-detail-page .stat-card .warning-number {
    color: #f3a13b !important;
}

body.project-detail-page h2 {
    margin: 26px 0 14px !important;
}

body.project-detail-page .episode-entry {
    display: block;
    margin-bottom: 34px !important;
    padding: 24px !important;
    border: 1px solid rgba(111, 139, 181, 0.18) !important;
    border-radius: 20px !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(238, 245, 255, 0.76)) !important;
    color: #10213f !important;
    box-shadow: 0 8px 24px rgba(70, 100, 150, 0.10) !important;
}

body.project-detail-page .episode-entry:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(79, 141, 247, 0.34) !important;
    box-shadow: 0 16px 36px rgba(70, 100, 150, 0.16) !important;
}

body.project-detail-page .episode-entry h3,
body.project-detail-page .quick-card h3,
body.project-detail-page .recent-card strong,
body.project-detail-page .result-name {
    color: #10213f !important;
}

body.project-detail-page .episode-entry p,
body.project-detail-page .quick-card p,
body.project-detail-page .recent-card p,
body.project-detail-page .search-summary {
    color: #667895 !important;
}

body.project-detail-page .quick-card,
body.project-detail-page .recent-card,
body.project-detail-page .result-table-wrap,
body.project-detail-page .empty-tip {
    border: 1px solid rgba(111, 139, 181, 0.18) !important;
    background: rgba(255, 255, 255, 0.78) !important;
    color: #10213f !important;
    box-shadow: 0 8px 24px rgba(70, 100, 150, 0.10) !important;
}

body.project-detail-page .quick-card,
body.project-detail-page .recent-card {
    min-height: 126px;
    padding: 18px !important;
}

body.project-detail-page .result-table th {
    background: rgba(232, 241, 255, 0.96) !important;
    color: #456fbd !important;
}

body.project-detail-page .result-table td {
    color: #10213f !important;
}

body.project-detail-page .empty-tip {
    color: #667895 !important;
}

/* Readonly preview modal placement and readability */
body .readonly-modal,
body .readonly-preview-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100vw !important;
    height: 100vh !important;
    padding: clamp(14px, 3vw, 34px) !important;
    background: rgba(82, 105, 140, 0.34) !important;
    backdrop-filter: blur(16px) saturate(135%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(135%) !important;
}

body .readonly-modal.open,
body .readonly-preview-modal.open {
    display: flex !important;
}

body .readonly-modal-card,
body .readonly-preview-dialog {
    display: flex !important;
    flex-direction: column !important;
    width: min(1120px, calc(100vw - 48px)) !important;
    height: min(860px, calc(100vh - 48px)) !important;
    max-height: calc(100vh - 48px) !important;
    margin: auto !important;
    overflow: hidden !important;
    border: 1px solid rgba(111, 139, 181, 0.22) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 28px 80px rgba(65, 92, 135, 0.24) !important;
}

body .readonly-modal-header {
    flex: 0 0 auto !important;
    padding: 18px 20px !important;
}

body .readonly-modal-title h2 {
    margin: 0 0 4px !important;
    color: #10213f !important;
}

body .readonly-modal-title p {
    margin: 0 !important;
    color: #667895 !important;
}

body .readonly-modal-body,
body .readonly-preview-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    margin: 18px 20px !important;
    padding: 18px !important;
    overflow: auto !important;
    background: #ffffff !important;
    color: #132747 !important;
}

body .readonly-modal-body pre {
    margin: 0 !important;
    color: #132747 !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
}

body .readonly-modal-body img,
body .readonly-modal-body video,
body .readonly-modal-body iframe {
    max-width: 100% !important;
}

body .readonly-modal-actions {
    flex: 0 0 auto !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    padding: 0 20px 20px !important;
}

@media (max-width: 820px) {
    body.project-detail-page .project-title-row {
        align-items: flex-start;
        flex-direction: column;
    }

    body.project-detail-page .project-title-row .back-button-wrap {
        align-self: flex-start;
    }

    body .readonly-modal-card,
    body .readonly-preview-dialog {
        width: calc(100vw - 20px) !important;
        height: calc(100vh - 20px) !important;
        max-height: calc(100vh - 20px) !important;
    }

    body .readonly-modal-body,
    body .readonly-preview-content {
        margin: 12px !important;
        padding: 14px !important;
    }
}

/* Liquid Glass final modal overrides: keep these last. */
body .readonly-modal,
body .readonly-preview-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 32px !important;
    background:
        radial-gradient(circle at 20% 20%, rgba(120, 170, 255, 0.22), transparent 32%),
        radial-gradient(circle at 80% 10%, rgba(190, 210, 255, 0.20), transparent 28%),
        rgba(21, 38, 70, 0.34) !important;
    backdrop-filter: blur(18px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(130%) !important;
}

body .readonly-modal.open,
body .readonly-modal.show,
body .readonly-modal.active,
body .readonly-preview-modal.open,
body .readonly-preview-modal.show,
body .readonly-preview-modal.active,
body .readonly-modal[style*="display: block"],
body .readonly-preview-modal[style*="display: block"] {
    display: flex !important;
}

body .readonly-modal-card,
body .readonly-preview-dialog {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: min(1120px, calc(100vw - 64px)) !important;
    height: auto !important;
    max-height: calc(100vh - 72px) !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 28px !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(245, 249, 255, 0.72)),
        rgba(255, 255, 255, 0.72) !important;
    box-shadow:
        0 28px 80px rgba(35, 70, 125, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 0 rgba(130, 160, 210, 0.16) !important;
    backdrop-filter: blur(28px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(150%) !important;
}

body .readonly-modal-card::before,
body .readonly-preview-dialog::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.75), transparent 28%),
        radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.85), transparent 24%);
    opacity: 0.75;
}

body .readonly-modal-header,
body .readonly-preview-header {
    position: relative !important;
    z-index: 1 !important;
    padding: 26px 32px 18px !important;
    border-bottom: 1px solid rgba(120, 150, 190, 0.16) !important;
    background: transparent !important;
}

body .readonly-modal-title h2,
body .readonly-preview-title h2 {
    margin: 0 !important;
    color: #10213f !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
}

body .readonly-modal-title p,
body .readonly-preview-path {
    margin: 8px 44px 0 0 !important;
    color: #667895 !important;
    font-size: 14px !important;
}

body .readonly-modal-body,
body .readonly-preview-content {
    position: relative !important;
    z-index: 1 !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - 250px) !important;
    margin: 18px 32px 22px !important;
    padding: 22px 24px !important;
    overflow: auto !important;
    border: 1px solid rgba(120, 150, 190, 0.18) !important;
    border-radius: 18px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(250, 253, 255, 0.92)) !important;
    color: #10213f !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 8px 28px rgba(70, 100, 150, 0.08) !important;
    line-height: 1.75 !important;
}

body .readonly-modal-actions,
body .readonly-preview-footer {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    padding: 0 32px 28px !important;
}

@media (max-width: 768px) {
    body .readonly-modal,
    body .readonly-preview-modal {
        padding: 12px !important;
    }

    body .readonly-modal-card,
    body .readonly-preview-dialog {
        width: calc(100vw - 24px) !important;
        max-height: calc(100vh - 24px) !important;
        border-radius: 20px !important;
    }

    body .readonly-modal-header,
    body .readonly-preview-header {
        padding: 22px 20px 14px !important;
    }

    body .readonly-modal-body,
    body .readonly-preview-content {
        max-height: calc(100vh - 230px) !important;
        margin: 14px 20px 18px !important;
        padding: 18px !important;
    }

    body .readonly-modal-actions,
    body .readonly-preview-footer {
        padding: 0 20px 22px !important;
    }
}

/* Button hover visibility fix: keep blue buttons blue and text readable. */
body .btn-primary,
body .primary-btn,
body .action-btn,
body .action-btn.primary,
body .tool-btn,
body .nav-btn,
body .folder-action-btn,
body .file-action-btn,
body .card-action-btn,
body .submit-btn,
body .batch-select-btn,
body .search-btn,
body .upload-btn,
body .preview-btn,
body .preview-edit-btn,
body .preview-save-btn,
body .edit-btn,
body .enter-btn,
body .directory-link,
body .detail-btn,
body .confirm-btn,
body .fix-btn,
body .copy-preview-btn,
body .copy-content-btn,
body .preview-copy-btn,
body .readonly-modal-copy,
body .copy-btn,
body #promptPopup .copy-btn,
body button.primary,
body a.primary-btn {
    border: 1px solid rgba(79, 141, 247, 0.28);
    background: linear-gradient(135deg, #4f8df7, #6aa6ff) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 24px rgba(79, 141, 247, 0.22);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease, background 0.18s ease, color 0.18s ease;
}

body .btn-primary:hover,
body .primary-btn:hover,
body .action-btn:hover,
body .action-btn.primary:hover,
body .tool-btn:hover,
body .nav-btn:hover,
body .folder-action-btn:hover,
body .file-action-btn:hover,
body .card-action-btn:hover,
body .submit-btn:hover,
body .batch-select-btn:hover,
body .search-btn:hover,
body .upload-btn:hover,
body .preview-btn:hover,
body .preview-edit-btn:hover,
body .preview-save-btn:hover,
body .edit-btn:hover,
body .enter-btn:hover,
body .directory-link:hover,
body .detail-btn:hover,
body .confirm-btn:hover,
body .fix-btn:hover,
body .copy-preview-btn:hover,
body .copy-content-btn:hover,
body .preview-copy-btn:hover,
body .readonly-modal-copy:hover,
body .copy-btn:hover,
body #promptPopup .copy-btn:hover,
body button.primary:hover,
body a.primary-btn:hover {
    background: linear-gradient(135deg, #5b97ff, #7ab2ff) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    filter: brightness(1.03);
    box-shadow: 0 14px 32px rgba(79, 141, 247, 0.30);
}

body .secondary-btn,
body .glass-btn,
body .download-btn,
body .action-btn.download,
body .action-btn.secondary,
body .cancel-btn,
body .clear-btn,
body .preview-cancel-btn,
body .batch-clear-btn,
body .batch-cancel-btn,
body .btn-muted,
body a.glass-btn,
body button.secondary {
    border: 1px solid rgba(79, 141, 247, 0.20);
    background: rgba(232, 241, 255, 0.86) !important;
    color: #2f6fe8 !important;
    box-shadow: 0 8px 18px rgba(80, 110, 160, 0.09);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}

body .secondary-btn:hover,
body .glass-btn:hover,
body .download-btn:hover,
body .action-btn.download:hover,
body .action-btn.secondary:hover,
body .cancel-btn:hover,
body .clear-btn:hover,
body .preview-cancel-btn:hover,
body .batch-clear-btn:hover,
body .batch-cancel-btn:hover,
body .btn-muted:hover,
body a.glass-btn:hover,
body button.secondary:hover {
    background: rgba(216, 232, 255, 0.96) !important;
    color: #1f5fd8 !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(79, 141, 247, 0.18);
}

body .rename-btn,
body .action-btn.rename,
body .btn-warning,
body .tag-btn,
body .prompt-btn,
body .history-btn {
    background: rgba(243, 239, 255, 0.92) !important;
    color: #6654b8 !important;
    border-color: rgba(132, 105, 212, 0.22);
}

body .rename-btn:hover,
body .action-btn.rename:hover,
body .btn-warning:hover,
body .tag-btn:hover,
body .prompt-btn:hover,
body .history-btn:hover {
    background: rgba(232, 225, 255, 0.98) !important;
    color: #5845a8 !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(132, 105, 212, 0.18);
}

body .btn-success,
body .action-btn.success {
    background: linear-gradient(135deg, #51c997, #39b980) !important;
    color: #ffffff !important;
    border-color: rgba(57, 185, 128, 0.22);
    box-shadow: 0 10px 24px rgba(57, 185, 128, 0.18);
}

body .btn-success:hover,
body .action-btn.success:hover {
    background: linear-gradient(135deg, #5fd3a2, #45c98d) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(57, 185, 128, 0.24);
}

body .danger-btn,
body .delete-btn,
body .folder-delete-btn,
body .batch-delete-btn,
body .btn-danger,
body .action-btn.danger,
body .danger,
body .clear-tags-btn,
body .close-btn,
body button.danger {
    border: 1px solid rgba(239, 91, 107, 0.22);
    background: rgba(255, 240, 242, 0.92) !important;
    color: #e5485d !important;
    box-shadow: 0 8px 18px rgba(239, 91, 107, 0.10);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}

body .danger-btn:hover,
body .delete-btn:hover,
body .folder-delete-btn:hover,
body .batch-delete-btn:hover,
body .btn-danger:hover,
body .action-btn.danger:hover,
body .danger:hover,
body .clear-tags-btn:hover,
body .close-btn:hover,
body button.danger:hover {
    background: linear-gradient(135deg, #ef5b6b, #ff7a88) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(239, 91, 107, 0.24);
}

body button:not([class]):hover,
body input[type="submit"]:hover {
    background: rgba(216, 232, 255, 0.96) !important;
    color: #1f5fd8 !important;
}

body button:disabled,
body .btn:disabled,
body .primary-btn:disabled,
body .secondary-btn:disabled,
body .glass-btn:disabled,
body .action-btn:disabled,
body .readonly-modal-copy:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

body button:disabled:hover,
body .btn:disabled:hover,
body .primary-btn:disabled:hover,
body .secondary-btn:disabled:hover,
body .glass-btn:disabled:hover,
body .action-btn:disabled:hover,
body .readonly-modal-copy:disabled:hover {
    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
}

/* Project file center header fixes */
body.project-file-center-page .file-center-hero {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    margin-bottom: 12px !important;
}

body.project-file-center-page .file-center-heading {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

body.project-file-center-page .file-center-title-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

body.project-file-center-page .file-center-title-row h1 {
    margin: 0 !important;
}

body.project-file-center-page .file-center-title-row .back-button-wrap {
    position: static !important;
    display: inline-flex !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.project-file-center-page .file-center-title-row .back-btn,
body.project-file-center-page .back-button,
body.project-file-center-page .file-center-back-inline {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(79, 141, 247, 0.22) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.82) !important;
    color: #2f6fe8 !important;
    box-shadow: 0 8px 20px rgba(70, 100, 150, 0.10) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease !important;
}

body.project-file-center-page .file-center-title-row .back-btn:hover,
body.project-file-center-page .back-button:hover,
body.project-file-center-page .file-center-back-inline:hover {
    transform: translateY(-1px) !important;
    background: rgba(232, 241, 255, 0.96) !important;
    color: #1f5fd8 !important;
    box-shadow: 0 12px 26px rgba(79, 141, 247, 0.16) !important;
}

body.project-file-center-page .file-center-subtitle,
body.project-file-center-page .page-subtitle,
body.project-file-center-page .hero-subtitle {
    margin: 0 0 22px !important;
    color: #667895 !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    font-weight: 500 !important;
    opacity: 1 !important;
}

body.project-file-center-page .file-center-heading .current-path {
    align-self: flex-start;
    max-width: 100% !important;
}

@media (max-width: 768px) {
    body.project-file-center-page .file-center-title-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

body.project-file-center-page .file-center-heading {
        gap: 10px;
    }
}

/* Writing import center scoped UI fixes */
body.writing-import-page .writing-import-hero {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    margin-bottom: 12px !important;
}

body.writing-import-page .writing-import-heading {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

body.writing-import-page .writing-import-title-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

body.writing-import-page .title-left {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

body.writing-import-page .writing-import-title-row h1 {
    margin: 0 !important;
}

body.writing-import-page .writing-import-back-btn {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 18px;
    border: 1px solid rgba(79, 141, 247, 0.22);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.84);
    color: #2f6fe8 !important;
    box-shadow: 0 8px 20px rgba(70, 100, 150, 0.10);
    font-weight: 800;
    line-height: 1;
    text-decoration: none !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}

body.writing-import-page .writing-import-back-btn:hover {
    transform: translateY(-1px);
    background: rgba(232, 241, 255, 0.98);
    color: #1f5fd8 !important;
    box-shadow: 0 12px 26px rgba(79, 141, 247, 0.16);
}

body.writing-import-page .page-description {
    color: #667895 !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
    font-weight: 500 !important;
    opacity: 1 !important;
}

body.writing-import-page .form-section {
    border: 1px solid rgba(111, 139, 181, 0.18) !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.90), rgba(242, 247, 255, 0.74)) !important;
    color: #10213f !important;
}

body.writing-import-page .form-section h2 {
    color: #10213f !important;
}

body.writing-import-page label,
body.writing-import-page .form-label,
body.writing-import-page .field-label,
body.writing-import-page .field label,
body.writing-import-page .section-label {
    color: #344867 !important;
    font-weight: 700 !important;
    opacity: 1 !important;
}

body.writing-import-page .form-hint,
body.writing-import-page .help-text,
body.writing-import-page .field-help,
body.writing-import-page .muted-text,
body.writing-import-page .field small,
body.writing-import-page .page-description,
body.writing-import-page .mode-warning {
    color: #667895 !important;
    font-weight: 500 !important;
    opacity: 1 !important;
}

body.writing-import-page .radio-option {
    border: 1px solid rgba(120, 150, 190, 0.22) !important;
    background: rgba(255, 255, 255, 0.72) !important;
    color: #344867 !important;
    font-weight: 600 !important;
}

body.writing-import-page .radio-option input {
    accent-color: #4f8df7;
}

body.writing-import-page input[type="text"],
body.writing-import-page input[type="number"],
body.writing-import-page input:not([type]),
body.writing-import-page .field input,
body.writing-import-page textarea,
body.writing-import-page select {
    border: 1px solid rgba(120, 150, 190, 0.26) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.88) !important;
    color: #10213f !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        0 8px 22px rgba(70, 100, 150, 0.06) !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
}

body.writing-import-page input[type="text"]::placeholder,
body.writing-import-page input[type="number"]::placeholder,
body.writing-import-page input:not([type])::placeholder,
body.writing-import-page .field input::placeholder,
body.writing-import-page textarea::placeholder {
    color: #7a8aa3 !important;
    opacity: 1 !important;
}

body.writing-import-page input[type="text"]:focus,
body.writing-import-page input[type="number"]:focus,
body.writing-import-page input:not([type]):focus,
body.writing-import-page .field input:focus,
body.writing-import-page textarea:focus,
body.writing-import-page select:focus {
    border-color: rgba(79, 141, 247, 0.55) !important;
    outline: none !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow:
        0 0 0 4px rgba(79, 141, 247, 0.12),
        0 10px 28px rgba(70, 100, 150, 0.10) !important;
}

body.writing-import-page textarea {
    min-height: 300px;
    line-height: 1.75 !important;
    resize: vertical;
}

body.writing-import-page .script-textarea,
body.writing-import-page .storyboard-textarea,
body.writing-import-page .asset-prompt-textarea {
    min-height: 260px;
}

body.writing-import-page .handoff-textarea {
    min-height: 220px;
}

body.writing-import-page .form-section.is-highlighted {
    border-color: rgba(79, 141, 247, 0.44) !important;
    box-shadow: 0 0 0 4px rgba(79, 141, 247, 0.12), var(--shadow-card) !important;
}

body.writing-import-page .current-path {
    align-self: flex-start;
    max-width: 100% !important;
}

@media (max-width: 768px) {
    body.writing-import-page .writing-import-title-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }
}

/* Prompt workspace scoped UI fixes */
body.prompt-workspace-page .prompt-workspace-hero {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    margin-bottom: 16px !important;
}

body.prompt-workspace-page .prompt-workspace-heading {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

body.prompt-workspace-page .prompt-workspace-title-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

body.prompt-workspace-page .prompt-workspace-title-row h1 {
    margin: 0 !important;
}

body.prompt-workspace-page .prompt-workspace-title-row .back-button-wrap {
    position: static !important;
    display: inline-flex !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.prompt-workspace-page .prompt-workspace-title-row .back-btn,
body.prompt-workspace-page .back-button,
body.prompt-workspace-page .prompt-workspace-back-btn {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 18px !important;
    border: 1px solid rgba(79, 141, 247, 0.24) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.86) !important;
    color: #2f6fe8 !important;
    box-shadow: 0 10px 24px rgba(70, 100, 150, 0.12) !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease !important;
}

body.prompt-workspace-page .prompt-workspace-title-row .back-btn:hover,
body.prompt-workspace-page .back-button:hover,
body.prompt-workspace-page .prompt-workspace-back-btn:hover {
    transform: translateY(-1px) !important;
    background: rgba(232, 241, 255, 0.98) !important;
    color: #1f5fd8 !important;
    box-shadow: 0 14px 30px rgba(79, 141, 247, 0.18) !important;
}

body.prompt-workspace-page .prompt-workspace-heading .current-path {
    align-self: flex-start;
    max-width: 100% !important;
}

body.prompt-workspace-page .workspace-panel label,
body.prompt-workspace-page .workspace-meta,
body.prompt-workspace-page .prompt-workspace-meta,
body.prompt-workspace-page .current-project-text,
body.prompt-workspace-page .form-hint,
body.prompt-workspace-page .muted-text {
    color: #53657f !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    opacity: 1 !important;
}

body.prompt-workspace-page .episode-select {
    border: 1px solid rgba(120, 150, 190, 0.26) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.90) !important;
    color: #10213f !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        0 8px 22px rgba(70, 100, 150, 0.06) !important;
}

body.prompt-workspace-page .episode-select:focus {
    border-color: rgba(79, 141, 247, 0.55) !important;
    outline: none !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow:
        0 0 0 4px rgba(79, 141, 247, 0.12),
        0 10px 28px rgba(70, 100, 150, 0.10) !important;
}

body.prompt-workspace-page .status-panel,
body.prompt-workspace-page .workspace-panel {
    border: 1px solid rgba(120, 150, 190, 0.18) !important;
    background: rgba(255, 255, 255, 0.82) !important;
    color: #10213f !important;
}

body.prompt-workspace-page .stat-card,
body.prompt-workspace-page .metric-card,
body.prompt-workspace-page .workspace-stat-card,
body.prompt-workspace-page .prompt-stat-card,
body.prompt-workspace-page .summary-card,
body.prompt-workspace-page .status-item {
    border: 1px solid rgba(120, 150, 190, 0.18) !important;
    background: rgba(255, 255, 255, 0.82) !important;
    color: #10213f !important;
    box-shadow: 0 8px 22px rgba(70, 100, 150, 0.08) !important;
}

body.prompt-workspace-page .stat-card *,
body.prompt-workspace-page .metric-card *,
body.prompt-workspace-page .workspace-stat-card *,
body.prompt-workspace-page .prompt-stat-card *,
body.prompt-workspace-page .summary-card *,
body.prompt-workspace-page .status-item * {
    opacity: 1 !important;
}

body.prompt-workspace-page .status-item strong,
body.prompt-workspace-page .card-title,
body.prompt-workspace-page .card-label,
body.prompt-workspace-page .stat-label,
body.prompt-workspace-page .metric-label,
body.prompt-workspace-page .card-desc,
body.prompt-workspace-page .card-muted {
    color: #53657f !important;
    font-weight: 700 !important;
    opacity: 1 !important;
}

body.prompt-workspace-page .status-item span,
body.prompt-workspace-page .card-value,
body.prompt-workspace-page .stat-value,
body.prompt-workspace-page .metric-value,
body.prompt-workspace-page .stat-number {
    color: #2f6fe8 !important;
    font-weight: 800 !important;
    opacity: 1 !important;
}

body.prompt-workspace-page .status-item .found {
    color: #249d70 !important;
}

body.prompt-workspace-page .status-item .missing {
    color: #c97b17 !important;
}

@media (max-width: 768px) {
    body.prompt-workspace-page .prompt-workspace-title-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }
}