:root { --storyos-header-height: 50px; }

        .storyos-board-wrapper {
    position: fixed; top: 0; left: 240px; right: 0; bottom: 0; 
    z-index: 9999; display: flex; flex-direction: column; background-color: var(--bg-gray);
    font-family: 'DM Sans', sans-serif !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

        .board-header { 
            flex: 0 0 var(--storyos-header-height); height: var(--storyos-header-height); 
            background: var(--bg-white); border-bottom: 1px solid var(--border-light); 
            display: flex; justify-content: space-between; align-items: center; padding: 0 32px; box-sizing: border-box; z-index: 10;
        }
        
        .header-left { display: flex; align-items: center; height: 100%; gap: 16px; }
.board-title { font-size: 16px; font-weight: 800; color: var(--text-primary); margin: 0; line-height: 1; letter-spacing: 0; }
        .thread-filter-group { display: flex; align-items: center; gap: 8px; padding-left: 16px; border-left: 1px solid var(--border); height: 14px; }
        .filter-label { font-size: 11px; font-weight: 700; color: var(--text-muted); margin: 0; letter-spacing: 0.5px;}
        .filter-dot { width: 14px; height: 14px; border-radius: 50%; cursor: pointer; transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); opacity: 0.5; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1); }
        .filter-dot:hover { opacity: 0.9; transform: scale(1.15); }
        .filter-dot.active { opacity: 1; transform: scale(1.2); box-shadow: 0 0 0 2px var(--bg-white), 0 0 0 3px var(--text-secondary); }

        .header-actions { display: flex; align-items: center; gap: 8px; }

        .btn-ai-doctor, .btn-export, .btn-close-board { 
            display: inline-flex; align-items: center; gap: 4px; background: transparent !important; border: none !important; 
            height: 28px !important; padding: 0 8px !important; font-size: 12px !important; font-weight: 700 !important; color: var(--text-secondary) !important;
            cursor: pointer; transition: color 0.2s ease !important; box-shadow: none !important; margin: 0; border-radius: 6px !important;
        }
        .btn-ai-doctor:hover, .btn-export:hover, .btn-close-board:hover { background: var(--bg-gray) !important; color: var(--text-primary) !important; }
        .btn-ai-doctor svg, .btn-export svg, .btn-close-board svg { width: 13px; height: 13px; stroke: currentColor !important; stroke-width: 2.0 !important; }

        .btn-save-script {
            display: inline-flex; align-items: center; justify-content: center; height: 28px; 
            background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-hover) 100%) !important; 
            color: white !important; border: none !important; border-radius: 6px !important; padding: 0 16px !important; 
            font-size: 12px !important; font-weight: 800 !important; letter-spacing: 0.5px !important;
            cursor: pointer; transition: all 0.2s ease !important; box-shadow: 0 2px 8px rgba(112, 131, 223, 0.2) !important; margin: 0 0 0 4px;
        }
        .btn-save-script:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(112, 131, 223, 0.3) !important; }

        .board-doc-save-indicator { display: none; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; transition: 0.2s; color: var(--text-muted); min-width: 50px; margin-left: 8px;}
        .board-doc-save-indicator.saved { color: var(--green-dark); }

        .vertical-timeline-track { position: absolute; top: var(--storyos-header-height); left: 0; bottom: 0; width: 3px; z-index: 100; pointer-events: none; }
        .vertical-color-timeline { width: 100%; height: 100%; display: flex; flex-direction: column; background: rgba(0,0,0,0.03); border-right: 1px solid var(--border-light); }
        .v-timeline-segment { flex: 1; width: 100%; transition: background 0.3s ease; cursor: crosshair; position: relative; pointer-events: auto; }
        .v-timeline-segment:hover { filter: brightness(0.85); }
        
        .v-timeline-segment::after {
    content: attr(data-tooltip); position: absolute; left: 10px; top: 50%; transform: translateY(-50%) translateX(5px);
    background: #2a1f31; color: #fff; padding: 6px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; white-space: nowrap; opacity: 0; pointer-events: none; transition: 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); z-index: 100; box-shadow: 0 4px 12px rgba(5,0,56,0.18);
}
        .v-timeline-segment::before { content: ''; position: absolute; left: 6px; top: 50%; transform: translateY(-50%) translateX(5px); border-width: 4px 4px 4px 0; border-style: solid; border-color: transparent #2a1f31 transparent transparent; opacity: 0; pointer-events: none; transition: 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); z-index: 100; }
        .v-timeline-segment:hover::after, .v-timeline-segment:hover::before { opacity: 1; transform: translateY(-50%) translateX(0); }

        .board-main-area { flex: 1; position: relative; overflow-y: auto; padding: 0 32px 100px 32px; background-image: linear-gradient(to right, rgba(5,0,56,0.035) 1px, transparent 1px), linear-gradient(to bottom, rgba(5,0,56,0.035) 1px, transparent 1px); background-size: 20px 20px; }
       .board-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
    margin-top: 32px;
}

        .story-card {
    box-sizing: border-box;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-left: 6px solid var(--border);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 1px 3px rgba(5,0,56,0.08), 0 1px 2px rgba(5,0,56,0.06);
    transition: border-left-width 0.15s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s, transform 0.3s, opacity 0.3s, filter 0.3s;
    cursor: grab;
    position: relative;
    overflow: visible;
    z-index: 1;
}

.story-card:hover {
    box-shadow: 0 4px 16px rgba(5,0,56,0.10);
    transform: translateY(-2px);
}

.story-card.dimmed {
    opacity: 0.15;
    filter: grayscale(100%);
    pointer-events: none;
}

.story-card.active-menu {
    z-index: 1000 !important;
}

.story-card.dragging {
    opacity: 0.4;
    transform: scale(0.98) translateZ(0);
}

.story-card.drop-before,
.story-card.drop-after {
    border-top-color: var(--brand-light) !important;
    border-right-color: var(--brand-light) !important;
    border-bottom-color: var(--brand-light) !important;
    border-left-width: 14px !important;
    border-left-color: inherit;
    box-shadow: 0 0 0 3px rgba(112, 131, 223, 0.10), 0 4px 16px rgba(5,0,56,0.10) !important;
}

        .sc-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--border-light); }
        .sc-badge-group { display: flex; flex-direction: row; gap: 8px; align-items: center; }
        .sc-badge { background: var(--active-bg); color: var(--brand-primary); padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.sc-beat-tag { background: var(--bg-gray); color: var(--text-muted); padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; border: 1px solid var(--border); cursor: pointer; display: flex; align-items: center; gap: 4px; transition: 0.2s; height: 26px; box-sizing: border-box; }
.sc-beat-tag:hover { background: var(--bg-white); border-color: var(--brand-primary); color: var(--brand-primary); }
.sc-beat-tag.active { background: var(--active-bg); color: var(--brand-primary); border-color: transparent; }

.beat-selector-menu { position: absolute; top: 54px; left: 20px; background: var(--bg-white); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 40px rgba(5,0,56,0.14); z-index: 9999 !important; padding: 8px; width: 210px; display: none; cursor: default; }
.beat-custom-row { padding: 4px; border-bottom: 1px solid var(--border-light); margin-bottom: 6px; }
.beat-custom-input { width: 100%; border: 1px dashed var(--text-muted); border-radius: 6px; padding: 6px 10px; font-size: 12px; font-weight: 700; outline: none; transition: 0.2s; box-sizing: border-box; color: var(--text-primary); background: transparent; }
.beat-custom-input:focus { border-color: var(--brand-primary); background: var(--active-bg); }
.beat-options-list { max-height: 240px; overflow-y: auto; padding-right: 4px; }

.beat-option { padding: 8px 12px; font-size: 12px; font-weight: 700; color: var(--text-secondary); cursor: pointer; border-radius: 6px; transition: 0.15s; display: flex; justify-content: space-between; align-items: center; }
        .beat-option:hover { background: var(--bg-gray); color: var(--brand-primary); }
        .beat-option .del-btn { opacity: 0; color: var(--text-muted); font-size: 14px; padding: 0 4px; border-radius: 4px; transition: 0.2s; }
        .beat-option:hover .del-btn { opacity: 1; }
        .beat-option .del-btn:hover { background: var(--border-light); color: var(--red); }
        .beat-option.clear { color: var(--red); border-top: 1px solid var(--border-light); margin-top: 6px; padding-top: 10px; font-weight: 700; }

        .sc-color-picker { display: flex; gap: 6px; opacity: 0; transition: opacity 0.2s; }
        .story-card:hover .sc-color-picker { opacity: 1; }
        .sc-color-dot { width: 14px; height: 14px; border-radius: 50%; cursor: pointer; border: 2px solid var(--bg-white); box-shadow: 0 0 0 1px var(--border); }

.sc-content-textarea { width: 100%; height: 140px; background: var(--bg-gray); border: 1px solid transparent; border-radius: 8px; padding: 12px; font-size: 14px; font-weight: 700; line-height: 1.6; color: var(--text-secondary); resize: none; outline: none; transition: 0.2s; }
.sc-content-textarea:focus { background: var(--bg-white); border-color: var(--brand-light); color: var(--text-primary); }
.sc-content-textarea::placeholder { color: var(--text-placeholder); }
        .sc-header-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
        .sc-header-sep { width: 1px; height: 12px; background: var(--border); flex-shrink: 0; }
        .sc-mode-tabs { display: flex; align-items: center; gap: 10px; }
        .sc-mode-tab { font-size: 12px; font-weight: 600; color: var(--text-muted); padding-bottom: 2px; cursor: pointer; border-bottom: 1.5px solid transparent; transition: color .15s ease; user-select: none; }
        .sc-mode-tab.active { color: #7083df; font-weight: 700; border-bottom-color: #7083df; }
        .sc-mode-tab:hover:not(.active) { color: var(--text-primary); }

.sc-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border-light); padding-top: 12px; }
.sc-meta { font-size: 11px; font-weight: 700; color: var(--text-muted); font-family: 'DM Mono', monospace; letter-spacing: 0; }
        .btn-enter-ep { font-size: 12px; font-weight: 700; color: var(--brand-primary); cursor: pointer; transition: all 0.2s ease; padding: 4px 8px; border-radius: 6px; }
        .btn-enter-ep:hover { background: var(--brand-light); color: var(--brand-hover); }

        /* ==========================================
           🚀 剧本老中医 (AI 诊断抽屉) 精装样式
           ========================================== */
        .ai-doctor-drawer { position: fixed; top: 0; right: -500px; width: 440px; height: 100%; background: rgba(255, 255, 255, 0.98); border-left: 1px solid var(--border); box-shadow: -10px 0 40px rgba(5,0,56,0.10); z-index: 10000; transition: right 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); display: flex; flex-direction: column; }
.ai-doctor-drawer.open { right: 0; transform: translateZ(0); }
.ai-drawer-header { padding: 20px 24px; border-bottom: 1px solid var(--border-light); display: flex; justify-content: space-between; align-items: center; background: var(--bg-gray); }
.ai-drawer-title { font-size: 16px; font-weight: 800; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
.ai-close-btn { background: var(--border-light); border: none; color: var(--text-muted); cursor: pointer; padding: 4px 6px; border-radius: 8px; transition: 0.2s; display: flex; align-items: center;}
.ai-close-btn svg { width: 18px; height: 18px; }
.ai-close-btn:hover { background: var(--red); color: #fff; transform: scale(1.05); }
.ai-drawer-body { flex: 1; overflow-y: auto; padding: 24px; font-size: 14px; font-weight: 700; line-height: 1.65; color: var(--text-secondary); background: var(--bg-white); }

.ai-loading-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--text-secondary); text-align: center; }
.ai-spinner { width: 36px; height: 36px; border: 3px solid var(--border); border-top-color: var(--brand-primary); border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 16px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 雷达图与健康评分组件 */
.doc-score-container { display: flex; align-items: center; gap: 16px; background: var(--bg-gray); padding: 16px; border-radius: 12px; margin-bottom: 24px; border: 1px solid var(--border); transition: 0.3s; }
.doc-score-circle { width: 64px; height: 64px; border-radius: 50%; background: conic-gradient(var(--brand-primary) 82%, var(--border) 0); display: flex; align-items: center; justify-content: center; position: relative; flex-shrink: 0; }
.doc-score-circle::after { content: ''; position: absolute; inset: 6px; background: var(--bg-white); border-radius: 50%; transition: 0.3s;}
.doc-score-value { position: relative; z-index: 1; font-size: 20px; font-weight: 800; color: var(--text-primary); }
.doc-score-text { flex: 1; }
.doc-score-text h4 { margin: 0 0 4px 0; font-size: 14px; font-weight: 700; color: var(--text-primary); }
.doc-score-text p { margin: 0; font-size: 12px; font-weight: 700; color: var(--text-muted); line-height: 1.5; }

.doc-radar-wrapper { position: relative; width: 100%; height: 220px; margin-bottom: 20px; }

.doc-alert-card { padding: 14px 16px; border-radius: 10px; margin-bottom: 12px; border-left: 4px solid; display: flex; gap: 12px; background: var(--bg-white); box-shadow: 0 4px 15px rgba(5,0,56,0.04); transition: 0.3s; border-top: 1px solid var(--border); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.doc-alert-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(5,0,56,0.08); }
.doc-alert-card.warning { border-left-color: #f59e0b; }
.doc-alert-card.danger { border-left-color: var(--red); }
.doc-alert-icon { font-size: 18px; margin-top: 2px; }
.doc-alert-content h5 { margin: 0 0 6px 0; font-size: 14px; font-weight: 800; color: var(--text-primary); }
.doc-alert-content p { margin: 0; font-size: 12px; font-weight: 700; color: var(--text-secondary); line-height: 1.6; }

        html.dark-mode .doc-score-circle::after { background: var(--bg-gray); }
        html.dark-mode .doc-alert-card { background: var(--bg-gray); border-color: var(--border); }

        body.board-active .editor-toolbar, body.board-active .document-mode-switch, body.board-active #quill-editor-container { display: none !important; }