.main-content {

    padding-bottom: 60px; /* 为固定底部备案栏留出空间 */

}



:root {

    --primary: #8b5cf6;

    --primary-light: #a78bfa;

    --primary-dark: #7c3aed;

    --secondary: #06b6d4;

    --accent: #f59e0b;

    --info: #3b82f6;

    --bg-main: #f8f9fe;

    --bg-card: #ffffff;

    --bg-input: #f1f0fb;

    --text: #1e1b4b;

    --text-light: #6b7280;

    --text-muted: #9ca3af;

    --border: #e5e7eb;

    --success: #10b981;

    --warning: #f59e0b;

    --danger: #ef4444;

    --shadow: 0 4px 6px -1px rgba(0,0,0,0.07);

    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08);

    /* Sidebar dark theme */

    --sidebar-bg: #1a1a2e;

    --sidebar-section: #a0a0b8;

    --sidebar-item: #c8c8d8;

    --sidebar-hover: rgba(255,255,255,0.08);

    --sidebar-active: rgba(139,92,246,0.25);

    --sidebar-active-text: #ffffff;

    --sidebar-divider: rgba(255,255,255,0.08);

}



* { margin: 0; padding: 0; box-sizing: border-box; }



body {

    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;

    background: var(--bg-main);

    color: var(--text);

    min-height: 100vh;

    display: flex;

    flex-direction: column;

}



/* ========== Top Navbar ========== */

.navbar {

    background: rgba(255,255,255,0.85);

    backdrop-filter: blur(12px);

    border-bottom: 1px solid var(--border);

    position: sticky;

    top: 0;

    z-index: 1000;

}



.nav-container {

    max-width: 100%;

    margin: 0 auto;

    padding: 0 24px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    height: 56px;

}



.logo {

    font-size: 1.4rem;

    font-weight: 800;

    background: linear-gradient(135deg, var(--primary), var(--secondary));

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    text-decoration: none;

}



.nav-links {

    display: flex;

    gap: 20px;

    align-items: center;

}



.nav-link {

    color: var(--text-light);

    text-decoration: none;

    font-weight: 500;

    font-size: 0.9rem;

    transition: color 0.2s;

}



.nav-link:hover { color: var(--primary); }



.nav-user {

    color: var(--primary);

    font-weight: 600;

    font-size: 0.9rem;

}



/* ========== Footer ========== */

.footer {

    background: var(--bg-card);

    border-top: 1px solid var(--border);

    padding: 12px 20px;

    text-align: center;

    position: fixed;

    bottom: 0;

    left: 0;

    right: 0;

    z-index: 100;

}



/* ========== Card & Common ========== */

.card {

    background: var(--bg-card);

    border-radius: 16px;

    border: 1px solid var(--border);

    padding: 24px;

    margin-bottom: 20px;

    box-shadow: var(--shadow);

}



.btn {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 10px 20px;

    border-radius: 10px;

    border: none;

    cursor: pointer;

    font-size: 0.95rem;

    font-weight: 600;

    transition: all 0.2s;

    user-select: none;

}



.btn:active {

    transform: scale(0.97);

}



.btn-primary {

    background: linear-gradient(135deg, var(--primary), var(--primary-dark));

    color: white;

    box-shadow: 0 2px 8px rgba(139,92,246,0.3);

}



.btn-primary:hover {

    transform: translateY(-1px);

    box-shadow: 0 4px 12px rgba(139,92,246,0.4);

}



.btn-secondary {

    background: var(--bg-card);

    color: var(--text);

    border: 1px solid var(--border);

}



.btn-secondary:hover {

    border-color: var(--primary-light);

    color: var(--primary);

}



.btn-small {

    padding: 6px 14px;

    font-size: 0.85rem;

}



.btn-danger {

    background: rgba(239,68,68,0.1);

    color: var(--danger);

    border: 1px solid rgba(239,68,68,0.2);

}



.btn-danger:hover {

    background: var(--danger);

    color: white;

}



.form-group { margin-bottom: 20px; }



.form-label {

    display: block;

    margin-bottom: 8px;

    color: var(--text);

    font-weight: 500;

    font-size: 0.9rem;

}



.form-input {

    width: 100%;

    padding: 12px 16px;

    background: var(--bg-input);

    border: 1px solid var(--border);

    border-radius: 10px;

    color: var(--text);

    font-size: 1rem;

    transition: all 0.2s;

}



.form-input:focus {

    outline: none;

    border-color: var(--primary-light);

    box-shadow: 0 0 0 3px rgba(139,92,246,0.1);

}



textarea.form-input {

    min-height: 120px;

    resize: vertical;

    font-family: inherit;

}



select.form-input {

    appearance: none;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");

    background-repeat: no-repeat;

    background-position: right 12px center;

    padding-right: 36px;

}



.form-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 0 20px;

}



.tag {

    display: inline-flex;

    padding: 4px 10px;

    border-radius: 8px;

    font-size: 0.8rem;

    font-weight: 500;

}



.tag-primary {

    background: rgba(139,92,246,0.1);

    color: var(--primary);

}



.tag-success {

    background: rgba(16,185,129,0.1);

    color: var(--success);

}



/* ========== Novel Grid (Index) ========== */

.novel-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

    gap: 20px;

}



.novel-card {

    background: var(--bg-card);

    border: 1px solid var(--border);

    border-radius: 16px;

    padding: 24px;

    cursor: pointer;

    transition: all 0.2s;

}



.novel-card:hover {

    border-color: var(--primary-light);

    transform: translateY(-2px);

    box-shadow: var(--shadow-lg);

}



.novel-card-title {

    font-size: 1.2rem;

    font-weight: 700;

    margin-bottom: 8px;

}



.novel-card-meta {

    color: var(--text-muted);

    font-size: 0.85rem;

}



.novel-card-stats {

    display: flex;

    gap: 16px;

    margin-top: 12px;

    padding-top: 12px;

    border-top: 1px solid var(--border);

    flex-wrap: wrap;

}



.novel-card-stat {

    display: flex;

    align-items: center;

    gap: 4px;

    color: var(--text-muted);

    font-size: 0.8rem;

}



.novel-card-stat strong {

    color: var(--text);

}



/* ========== Loading / Empty / Toast ========== */

.loading {

    display: flex;

    justify-content: center;

    padding: 60px;

}



.spinner {

    width: 40px;

    height: 40px;

    border: 3px solid var(--border);

    border-top-color: var(--primary);

    border-radius: 50%;

    animation: spin 0.8s linear infinite;

}



@keyframes spin { to { transform: rotate(360deg); } }



.empty-state {

    text-align: center;

    padding: 60px 20px;

    color: var(--text-muted);

}



.empty-state-icon {

    font-size: 3.5rem;

    margin-bottom: 16px;

}



.toast {

    position: fixed;

    bottom: 100px;

    right: 24px;

    max-width: 320px;

    padding: 14px 22px;

    border-radius: 12px;

    color: white;

    font-size: 0.9rem;

    font-weight: 500;

    z-index: 10001;

    animation: slideIn 0.3s ease;

    box-shadow: var(--shadow-lg);

    word-wrap: break-word;

}



.toast-success { background: var(--success); }

.toast-error { background: var(--danger); }

.toast-info { background: var(--info); }



@keyframes slideIn {

    from { transform: translateY(20px); opacity: 0; }

    to { transform: translateY(0); opacity: 1; }

}



/* ========== Auth Pages ========== */

.auth-container {

    max-width: 420px;

    margin: 60px auto;

}



.auth-container h1 {

    text-align: center;

    margin-bottom: 32px;

    font-size: 2rem;

    background: linear-gradient(135deg, var(--primary), var(--secondary));

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}



.auth-footer {

    text-align: center;

    margin-top: 20px;

    color: var(--text-muted);

}



.auth-footer a { color: var(--primary); font-weight: 500; }



/* ========== Novel Detail Layout ========== */

.novel-layout {

    display: flex;

    height: calc(100vh - 56px - 44px);

    overflow: hidden;

}



/* ========== Sidebar ========== */

.sidebar {

    width: 220px;

    min-width: 220px;

    background: var(--sidebar-bg);

    overflow-y: auto;

    overflow-anchor: none;

    display: flex;

    flex-direction: column;

    scrollbar-width: thin;

    scrollbar-color: rgba(255,255,255,0.15) transparent;

    overscroll-behavior: contain;

}



.sidebar::-webkit-scrollbar { width: 4px; }

.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }



.sidebar-brand {

    padding: 20px 18px 16px;

    border-bottom: 1px solid var(--sidebar-divider);

}



.sidebar-brand a {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    color: var(--sidebar-item);

    text-decoration: none;

    font-size: 0.85rem;

    transition: color 0.2s;

}



.sidebar-brand a:hover { color: #fff; }



.sidebar-brand h2 {

    font-size: 0.95rem;

    margin-top: 10px;

    color: #fff;

    line-height: 1.4;

    word-break: break-all;

    font-weight: 600;

}



.sidebar-section {

    padding: 12px 0 4px;

    margin-top: 2px;

}



.sidebar-section:first-of-type {

    padding-top: 8px;

}



.sidebar-section-title {

    font-size: 0.86rem;

    font-weight: 600;

    letter-spacing: 0;

    text-transform: none;

    color: var(--sidebar-item);

    margin: 0;

    padding: 9px 18px 9px 14px;

    border-bottom: none;

    opacity: 1;

    display: flex;

    align-items: center;

    gap: 10px;

    cursor: pointer;

    user-select: none;

    border-radius: 6px;

    transition: background 0.15s, color 0.15s;

}

.sidebar-section-title .sec-icon {

    width: 22px;

    flex-shrink: 0;

    text-align: center;

    font-size: 0.95rem;

    line-height: 1;

}

.sidebar-section-title::after {

    content: '\25BE';

    margin-left: auto;

    font-size: 0.7rem;

    color: var(--sidebar-section);

    transition: transform 0.2s ease;

}

.sidebar-section.collapsed .sidebar-section-title::after {

    transform: rotate(-90deg);

}

.sidebar-section.collapsed .sidebar-item {

    display: none;

}



.sidebar-section-title:hover {

    background: var(--sidebar-hover);

    color: #fff;

}



.sidebar-section-title:active {

    background: var(--sidebar-active);

    color: var(--sidebar-active-text);

}



.sidebar-item {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 9px 18px 9px 46px;

    cursor: pointer;

    color: var(--sidebar-item);

    font-size: 0.86rem;

    font-weight: 500;

    transition: all 0.15s;

    border-left: 3px solid transparent;

    user-select: none;

}



.sidebar-item .item-icon {

    display: none;

}



.sidebar-item:hover {

    background: var(--sidebar-hover);

    color: #fff;

}



.sidebar-item.active {

    background: var(--sidebar-active);

    color: var(--sidebar-active-text);

    border-left-color: var(--primary);

    font-weight: 600;

}



.sidebar-item .item-icon {

    font-size: 1rem;

    width: 20px;

    text-align: center;

}



.sidebar-bottom {

    margin-top: auto;

    padding: 12px 18px;

    border-top: 1px solid var(--sidebar-divider);

}



/* ========== Main Content ========== */

.main-area {

    flex: 1;

    overflow-y: auto;

    background: var(--bg-main);

    padding: 28px 32px;

}



/* ========== Section Panels ========== */

.section-panel {

    display: none;

    animation: fadeIn 0.2s ease;

}



.section-panel.active {

    display: block;

}



/* ========== Sub-tab Panels (secondary tabs) ========== */

.sub-tab-content {

    display: none;

}

.sub-tab-content.active {

    display: block;

}



@keyframes fadeIn {

    from { opacity: 0; transform: translateY(6px); }

    to { opacity: 1; transform: translateY(0); }

}



/* ========== Section Header ========== */

.section-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 24px;

    flex-wrap: wrap;

    gap: 12px;

}



.section-header h2 {

    font-size: 1.3rem;

    font-weight: 700;

}



.section-header p {

    color: var(--text-light);

    font-size: 0.9rem;

    margin-top: 4px;

}



/* ========== Stats Cards ========== */

.stats-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));

    gap: 16px;

    margin-bottom: 28px;

}



.stat-card {

    background: var(--bg-card);

    border: 1px solid var(--border);

    border-radius: 14px;

    padding: 20px;

    text-align: center;

    transition: all 0.2s;

}



.stat-card:hover {

    transform: translateY(-2px);

    box-shadow: var(--shadow);

}



.stat-card-value {

    font-size: 1.8rem;

    font-weight: 800;

    background: linear-gradient(135deg, var(--primary), var(--secondary));

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}



.stat-card-label {

    color: var(--text-muted);

    font-size: 0.85rem;

    margin-top: 4px;

}



/* ========== Dashboard ========== */

.dashboard-header {

    margin-bottom: 24px;

}



.dashboard-header h1 {

    font-size: 1.8rem;

    margin-bottom: 8px;

    background: linear-gradient(135deg, var(--primary), var(--secondary));

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}



.dashboard-header p {

    color: var(--text-light);

    line-height: 1.6;

}



.quick-actions {

    display: flex;

    gap: 12px;

    flex-wrap: wrap;

    margin-top: 20px;

}



/* ========== Outline Cards ========== */

.outline-group {

    margin-bottom: 28px;

}



.outline-group-title {

    font-size: 1rem;

    font-weight: 700;

    margin-bottom: 12px;

    display: flex;

    align-items: center;

    gap: 10px;

}



.outline-type-badge {

    display: inline-flex;

    padding: 3px 10px;

    border-radius: 6px;

    font-size: 0.75rem;

    font-weight: 600;

}



.outline-type-main_plot {

    background: rgba(139, 92, 246, 0.1);

    color: var(--primary);

}



.outline-type-sub_plot {

    background: rgba(6, 182, 212, 0.1);

    color: var(--secondary);

}



.outline-type-theme {

    background: rgba(245, 158, 11, 0.1);

    color: var(--accent);

}



.outline-type-worldbuilding {

    background: rgba(16, 185, 129, 0.1);

    color: var(--success);

}



.outline-type-character_arc {

    background: rgba(236, 72, 153, 0.1);

    color: #ec4899;

}



.outline-card {

    background: var(--bg-card);

    border: 1px solid var(--border);

    border-radius: 12px;

    padding: 16px 20px;

    margin-bottom: 10px;

    transition: all 0.2s;

}



.outline-card:hover {

    box-shadow: var(--shadow);

}



.outline-card-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    margin-bottom: 8px;

    gap: 12px;

}



.outline-card-header h4 {

    font-size: 0.95rem;

    font-weight: 600;

}



.outline-card-content {

    color: var(--text-light);

    line-height: 1.7;

    font-size: 0.9rem;

    white-space: pre-wrap;

    max-height: 200px;

    overflow-y: auto;

}



/* ========== Chapter Tree ========== */

.chapter-tree { }



.volume-group {

    margin-bottom: 16px;

    background: var(--bg-card);

    border: 1px solid var(--border);

    border-radius: 14px;

    overflow: hidden;

}



.volume-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 14px 20px;

    cursor: pointer;

    transition: background 0.2s;

    user-select: none;

}



.volume-header:hover {

    background: rgba(139, 92, 246, 0.04);

}



.volume-header-left {

    display: flex;

    align-items: center;

    gap: 10px;

}



.volume-header-left .toggle-icon {

    transition: transform 0.3s;

    color: var(--text-muted);

    font-size: 0.8rem;

}



.volume-header-left .toggle-icon.expanded {

    transform: rotate(90deg);

}



.volume-header h3 {

    font-size: 0.95rem;

    font-weight: 600;

}



.volume-header .volume-meta {

    color: var(--text-muted);

    font-size: 0.8rem;

}



.volume-body {

    max-height: 0;

    overflow: hidden;

    transition: max-height 0.3s ease;

}



.volume-body.expanded {

    max-height: 5000px;

}



.volume-chapters {

    padding: 4px 16px 16px;

}



.chapter-item {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 10px 12px;

    border-radius: 8px;

    cursor: pointer;

    transition: background 0.2s;

}



.chapter-item:hover {

    background: var(--bg-input);

}



.chapter-item-info {

    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 0;

}



.chapter-number {

    font-weight: 700;

    color: var(--primary);

    font-size: 0.85rem;

    min-width: 36px;

}



.chapter-title {

    font-weight: 500;

    font-size: 0.9rem;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}



.chapter-meta {

    display: flex;

    align-items: center;

    gap: 10px;

    color: var(--text-muted);

    font-size: 0.8rem;

    flex-shrink: 0;

}



/* ========== Character Cards ========== */

.char-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

    gap: 16px;

}



.char-card {

    background: var(--bg-card);

    border: 1px solid var(--border);

    border-radius: 14px;

    padding: 20px;

    transition: all 0.2s;

    border-left: 4px solid var(--primary);

}



.char-card:hover {

    box-shadow: var(--shadow-lg);

    transform: translateY(-2px);

}



.char-card-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 12px;

}



.char-card-name {

    font-size: 1.1rem;

    font-weight: 700;

}



.char-card-detail {

    color: var(--text-light);

    font-size: 0.9rem;

    line-height: 1.6;

    margin-bottom: 6px;

}



.char-card-detail strong {

    color: var(--text);

}



.char-card-actions {

    display: flex;

    gap: 8px;

    margin-top: 12px;

    padding-top: 12px;

    border-top: 1px solid var(--border);

}



/* ========== Location Cards ========== */

.location-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

    gap: 16px;

}



.location-card {

    background: var(--bg-card);

    border: 1px solid var(--border);

    border-radius: 14px;

    padding: 20px;

    transition: all 0.2s;

    border-top: 3px solid var(--secondary);

}



.location-card:hover {

    box-shadow: var(--shadow-lg);

    transform: translateY(-2px);

}



/* ========== Relationship Graph ========== */

.relationship-graph-container {

    background: var(--bg-card);

    border-radius: 14px;

    border: 1px solid var(--border);

    min-height: 500px;

    overflow: hidden;

    position: relative;

}



/* ========== Timeline ========== */

.timeline {

    position: relative;

    padding-left: 40px;

}



.timeline-line {

    position: absolute;

    left: 15px;

    top: 0;

    bottom: 0;

    width: 3px;

    background: linear-gradient(180deg, var(--primary), var(--secondary));

    border-radius: 2px;

}



.timeline-item {

    position: relative;

    margin-bottom: 20px;

    background: var(--bg-card);

    border: 1px solid var(--border);

    border-radius: 14px;

    padding: 18px 20px;

    transition: all 0.2s;

}



.timeline-item:hover {

    box-shadow: var(--shadow-lg);

}



.timeline-item::before {

    content: '';

    position: absolute;

    left: -33px;

    top: 22px;

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background: var(--primary);

    border: 3px solid var(--bg-main);

    box-shadow: 0 0 0 2px var(--primary);

}



.timeline-item.high::before {

    background: var(--danger);

    box-shadow: 0 0 0 2px var(--danger);

}



.timeline-item.medium::before {

    background: var(--warning);

    box-shadow: 0 0 0 2px var(--warning);

}



.timeline-item.low::before {

    background: #6b7280;

    box-shadow: 0 0 0 2px #6b7280;

}



.timeline-item-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    margin-bottom: 8px;

    gap: 12px;

}



.timeline-item-name {

    font-weight: 700;

    font-size: 1rem;

}



.timeline-item-time {

    color: var(--text-muted);

    font-size: 0.85rem;

    flex-shrink: 0;

}



.timeline-item-desc {

    color: var(--text-light);

    line-height: 1.6;

    font-size: 0.9rem;

}



.timeline-item-footer {

    display: flex;

    gap: 8px;

    align-items: center;

    margin-top: 10px;

    flex-wrap: wrap;

}



.timeline-item-actions {

    margin-left: auto;

    display: flex;

    gap: 6px;

}



/* ========== Status Badges ========== */

.badge {

    display: inline-flex;

    padding: 3px 10px;

    border-radius: 6px;

    font-size: 0.75rem;

    font-weight: 600;

    white-space: nowrap;

}



.badge-draft {

    background: rgba(107, 114, 128, 0.1);

    color: #6b7280;

}



.badge-pending {

    background: rgba(245, 158, 11, 0.15);

    color: #b45309;

    font-weight: 600;

}



.badge-writing {

    background: rgba(59, 130, 246, 0.1);

    color: #3b82f6;

}



.badge-revised {

    background: rgba(139, 92, 246, 0.1);

    color: var(--primary);

}



.badge-final {

    background: rgba(16, 185, 129, 0.1);

    color: var(--success);

}



.badge-outline {

    background: rgba(99, 102, 241, 0.1);

    color: #6366f1;

}



.badge-skeleton {

    background: rgba(124, 58, 237, 0.15);

    color: #7c3aed;

}



.badge-queued {

    background: rgba(245, 158, 11, 0.1);

    color: #f59e0b;

}



.badge-generating {

    background: rgba(59, 130, 246, 0.15);

    color: #3b82f6;

    animation: pulse-badge 1.5s ease-in-out infinite;

}



@keyframes pulse-badge {

    0%, 100% { opacity: 1; }

    50% { opacity: 0.6; }

}



.badge-review_needed {

    background: rgba(245, 158, 11, 0.15);

    color: #d97706;

}



.badge-error {

    background: rgba(239, 68, 68, 0.1);

    color: #ef4444;

}



.badge-importance-high {

    background: rgba(239, 68, 68, 0.1);

    color: var(--danger);

}



.badge-importance-medium {

    background: rgba(245, 158, 11, 0.1);

    color: var(--warning);

}



.badge-importance-low {

    background: rgba(107, 114, 128, 0.1);

    color: #6b7280;

}



.badge-planted {

    background: rgba(245, 158, 11, 0.15);

    color: #d97706;

}



.badge-unresolved {

    background: rgba(239, 68, 68, 0.1);

    color: var(--danger);

}



.badge-resolved {

    background: rgba(16, 185, 129, 0.1);

    color: var(--success);

}



.badge-abandoned {

    background: rgba(107, 114, 128, 0.1);

    color: #6b7280;

}



/* ========== Foreshadowing Table ========== */

.foreshadowing-table-wrap {

    background: var(--bg-card);

    border: 1px solid var(--border);

    border-radius: 14px;

    overflow: hidden;

}



.foreshadowing-table {

    width: 100%;

    border-collapse: collapse;

}



.foreshadowing-table th {

    background: var(--bg-input);

    padding: 12px 16px;

    text-align: left;

    font-weight: 600;

    font-size: 0.85rem;

    color: var(--text-light);

    border-bottom: 1px solid var(--border);

    white-space: nowrap;

}



.foreshadowing-table td {

    padding: 12px 16px;

    border-bottom: 1px solid var(--border);

    font-size: 0.9rem;

    vertical-align: middle;

}



.foreshadowing-table tr:last-child td {

    border-bottom: none;

}



.foreshadowing-table tr:hover td {

    background: rgba(139, 92, 246, 0.03);

}



/* ========== Writing Style ========== */

.style-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

    gap: 16px;

    margin-bottom: 24px;

}



.style-item {

    background: var(--bg-card);

    border: 1px solid var(--border);

    border-radius: 12px;

    padding: 16px;

}



.style-item-label {

    color: var(--text-muted);

    font-size: 0.8rem;

    margin-bottom: 4px;

}



.style-item-value {

    font-weight: 600;

    color: var(--text);

    font-size: 0.95rem;

}



/* ========== Module Tabs ========== */

.module-tabs {

    display: flex;

    gap: 4px;

    background: var(--bg-input);

    border-radius: 12px;

    padding: 4px;

    margin-bottom: 20px;

    flex-wrap: wrap;

}



.module-tab {

    padding: 10px 16px;

    border-radius: 10px;

    cursor: pointer;

    color: var(--text-light);

    font-weight: 500;

    transition: all 0.2s;

    font-size: 0.9rem;

}



.module-tab.active {

    background: var(--bg-card);

    color: var(--primary);

    box-shadow: 0 1px 3px rgba(0,0,0,0.1);

}



.module-content {

    background: var(--bg-card);

    border-radius: 16px;

    border: 1px solid var(--border);

    padding: 24px;

    min-height: 400px;

}



.section-title {

    font-size: 1.1rem;

    font-weight: 700;

    margin-bottom: 16px;

    display: flex;

    align-items: center;

    gap: 10px;

}



.section-title::before {

    content: '';

    width: 4px;

    height: 22px;

    background: linear-gradient(180deg, var(--primary), var(--secondary));

    border-radius: 2px;

}



.graph-container {

    background: var(--bg-input);

    border-radius: 14px;

    border: 1px solid var(--border);

    min-height: 400px;

    overflow: hidden;

}



.world-tree-node { cursor: pointer; }

.world-tree-node:hover circle { stroke-width: 4; }



/* ========== Modal ========== */

.modal-overlay {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: rgba(0,0,0,0.5);

    z-index: 2000;

    justify-content: center;

    align-items: center;

    padding: 20px;

}



.modal-overlay.open {

    display: flex;

}



.modal-card {

    background: var(--bg-card);

    border-radius: 16px;

    width: 100%;

    max-height: 90vh;

    overflow-y: auto;

    padding: 24px;

    box-shadow: var(--shadow-lg);

    animation: modalIn 0.2s ease;

}



@keyframes modalIn {

    from { opacity: 0; transform: scale(0.95); }

    to { opacity: 1; transform: scale(1); }

}



.modal-card.modal-sm { max-width: 480px; }

.modal-card.modal-md { max-width: 600px; }

.modal-card.modal-lg { max-width: 800px; }

.modal-card.modal-xl { max-width: 1000px; }



.modal-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 20px;

}



.modal-header h2 {

    font-size: 1.2rem;

    font-weight: 700;

}



.modal-close {

    cursor: pointer;

    font-size: 1.5rem;

    color: var(--text-muted);

    background: none;

    border: none;

    line-height: 1;

    transition: color 0.2s;

    width: 32px;

    height: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 8px;

}



.modal-close:hover {

    color: var(--text);

    background: var(--bg-input);

}



/* ========== 持久错误弹窗 ========== */

.error-modal-card {

    max-width: 640px;

    border: 1px solid var(--danger, #ef4444);

}

.error-modal-header h2 {

    color: var(--danger, #ef4444);

}

.error-modal-pre {

    background: #1e1e2e;

    color: #f8f8f8;

    padding: 14px 16px;

    border-radius: 10px;

    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    font-size: 0.82rem;

    line-height: 1.6;

    white-space: pre-wrap;

    word-break: break-word;

    max-height: 50vh;

    overflow-y: auto;

    margin: 0;

}

.error-modal-footer {

    display: flex;

    justify-content: flex-end;

    gap: 10px;

    margin-top: 18px;

}



/* ========== Mobile Hamburger Button ========== */

.nav-hamburger {

    display: none;

    width: 44px;

    height: 44px;

    border: none;

    background: none;

    font-size: 1.4rem;

    cursor: pointer;

    color: var(--text);

    border-radius: 10px;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    -webkit-tap-highlight-color: transparent;

}

.nav-hamburger:active { background: var(--bg-input); }



/* ========== Mobile Bottom Nav ========== */

.mobile-bottom-nav {

    display: none;

    position: fixed;

    bottom: 0;

    left: 0;

    right: 0;

    height: 60px;

    background: rgba(255,255,255,0.95);

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    border-top: 1px solid var(--border);

    z-index: 1400;

    padding-bottom: env(safe-area-inset-bottom, 0);

    justify-content: space-around;

    align-items: center;

}



.mobile-bottom-nav .nav-item {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 2px;

    min-width: 56px;

    height: 56px;

    padding: 4px 8px;

    border: none;

    background: none;

    color: var(--text-muted);

    font-size: 0.65rem;

    font-weight: 500;

    cursor: pointer;

    border-radius: 10px;

    transition: all 0.15s;

    -webkit-tap-highlight-color: transparent;

    text-decoration: none;

}



.mobile-bottom-nav .nav-item .nav-icon {

    font-size: 1.3rem;

    line-height: 1;

}



.mobile-bottom-nav .nav-item:active {

    transform: scale(0.92);

}



.mobile-bottom-nav .nav-item.active {

    color: var(--primary);

    font-weight: 600;

}



.mobile-bottom-nav .nav-item.active .nav-icon {

    transform: scale(1.1);

}



/* ========== Responsive ========== */

@media (max-width: 768px) {

    /* Show hamburger in navbar */

    .nav-hamburger { display: flex; }



    /* Hide desktop nav links, keep logo */

    .nav-links { display: none; }



    .nav-container {

        padding: 0 12px;

    }



    /* Show bottom nav */

    .mobile-bottom-nav { display: flex; }



    .novel-grid { grid-template-columns: 1fr; }



    /* Sidebar becomes left drawer */

    .sidebar {

        position: fixed;

        left: -280px;

        top: 0;

        width: 280px;

        height: 100vh;

        height: 100dvh;

        z-index: 1600;

        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    }



    .sidebar.open { left: 0; }



    .sidebar-overlay {

        display: none;

        position: fixed;

        top: 0;

        left: 0;

        right: 0;

        bottom: 0;

        background: rgba(0,0,0,0.45);

        z-index: 1500;

        -webkit-backdrop-filter: blur(2px);

        backdrop-filter: blur(2px);

    }



    .sidebar-overlay.open { display: block; }



    /* Hide old floating toggle (replaced by hamburger) */

    .sidebar-toggle { display: none !important; }



    /* Main area: account for bottom nav + safe area */

    .main-area {

        padding: 16px 14px;

        padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));

    }



    .novel-layout {

        height: calc(100vh - 56px);

        height: calc(100dvh - 56px);

    }



    /* Grid adjustments */

    .stats-grid { grid-template-columns: repeat(2, 1fr); }

    .char-grid { grid-template-columns: 1fr; }

    .location-grid { grid-template-columns: 1fr; }

    .form-grid { grid-template-columns: 1fr; }



    .foreshadowing-table-wrap { overflow-x: auto; }



    .section-header {

        flex-direction: column;

        align-items: flex-start;

        gap: 8px;

    }



    .section-header .btn { width: 100%; justify-content: center; }



    .timeline { padding-left: 30px; }

    .timeline-line { left: 10px; }

    .timeline-item::before { left: -28px; }

    .timeline-item-header { flex-direction: column; }



    /* Card touch targets */

    .char-card, .location-card, .result-item {

        min-height: 44px;

    }



    /* Modal full screen on mobile */

    .modal-content {

        width: 95vw !important;

        max-height: 85vh;

        margin: auto 2.5vw;

        border-radius: 16px 16px 0 0;

    }



    /* Proposal comparison stacking */

    .proposal-compare {

        flex-direction: column !important;

    }

    .proposal-compare > div { width: 100% !important; }



    /* Pipeline bar scrollable */

    .pipeline-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; }



    /* Footer hidden on novel page (bottom nav replaces it) */

    .novel-layout ~ .footer { display: none; }



    /* Touch-friendly form elements */

    input[type="text"], input[type="number"], textarea, select {

        font-size: 16px !important; /* Prevent iOS zoom */

        min-height: 44px;

    }

}



/* Small phones */

@media (max-width: 380px) {

    .mobile-bottom-nav .nav-item {

        min-width: 48px;

        font-size: 0.6rem;

        padding: 4px 4px;

    }

    .mobile-bottom-nav .nav-item .nav-icon { font-size: 1.15rem; }

    .stats-grid { grid-template-columns: 1fr; }

}



/* Desktop: hide mobile elements */

@media (min-width: 769px) {

    .sidebar-toggle { display: none; }

    .sidebar-overlay { display: none !important; }

    .mobile-bottom-nav { display: none !important; }

    .nav-hamburger { display: none !important; }

}



/* Safe area for modern phones */

@supports (padding-bottom: env(safe-area-inset-bottom)) {

    .mobile-bottom-nav {

        padding-bottom: env(safe-area-inset-bottom);

        height: calc(60px + env(safe-area-inset-bottom));

    }

}



/* ========== AI Indicator on Sidebar ========== */

.sidebar-item .ai-badge {

    font-size: 0.6rem;

    padding: 1px 5px;

    border-radius: 4px;

    background: rgba(139,92,246,0.2);

    color: var(--primary-light);

    margin-left: auto;

    font-weight: 600;

    letter-spacing: 0.5px;

}



.sidebar-item .manual-badge {

    font-size: 0.6rem;

    padding: 1px 5px;

    border-radius: 4px;

    background: rgba(6,182,212,0.15);

    color: var(--secondary);

    margin-left: auto;

    font-weight: 600;

    letter-spacing: 0.5px;

}



.sidebar-item .has-data-dot {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: var(--success);

    margin-left: auto;

    flex-shrink: 0;

}



/* ========== Analysis Result ========== */

.result-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

    gap: 12px;

    margin: 20px 0;

}



.result-item {

    background: var(--bg-input);

    border-radius: 12px;

    padding: 16px;

    text-align: center;

    cursor: pointer;

    transition: all 0.2s;

    border: 1px solid transparent;

}



.result-item:hover {

    border-color: var(--primary-light);

    transform: translateY(-2px);

    box-shadow: var(--shadow);

}



.result-item-value {

    font-size: 1.6rem;

    font-weight: 800;

    background: linear-gradient(135deg, var(--primary), var(--secondary));

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}



.result-item-label {

    color: var(--text-light);

    font-size: 0.85rem;

    margin-top: 4px;

}



.result-item-detail {

    color: var(--text-muted);

    font-size: 0.75rem;

    margin-top: 4px;

}



/* Override main-content for novel layout */

.main-content:has(.novel-layout) {

    max-width: none;

    padding: 0;

    margin: 0;

    width: 100%;

}



/* 一句话创作页：与 novel 页同款，让内容容器占满宽度以居中卡片 */

.main-content:has(.quick-start-wrapper) {

    max-width: none;

    width: 100%;

}



/* ========== Toggle Switch ========== */

.toggle-switch {

    position: relative;

    display: inline-block;

    width: 44px;

    height: 24px;

    flex-shrink: 0;

}

.toggle-switch input { opacity: 0; width: 0; height: 0; }

.toggle-slider {

    position: absolute;

    cursor: pointer;

    top: 0; left: 0; right: 0; bottom: 0;

    background: var(--border);

    border-radius: 24px;

    transition: all 0.3s ease;

}

.toggle-slider::before {

    content: '';

    position: absolute;

    height: 18px;

    width: 18px;

    left: 3px;

    bottom: 3px;

    background: white;

    border-radius: 50%;

    transition: all 0.3s ease;

    box-shadow: 0 1px 3px rgba(0,0,0,0.15);

}

.toggle-switch input:checked + .toggle-slider {

    background: linear-gradient(135deg, var(--primary), var(--primary-dark));

}

.toggle-switch input:checked + .toggle-slider::before {

    transform: translateX(20px);

}



/* ========== 增强编辑器 ========== */

.editor-wrapper {

    display: flex;

    border: 1px solid var(--border-color);

    border-radius: 10px;

    overflow: hidden;

    background: var(--bg-card);

    transition: border-color 0.2s;

}

.editor-wrapper:focus-within {

    border-color: var(--primary-light);

    box-shadow: 0 0 0 3px rgba(139,92,246,0.1);

}

.editor-line-numbers {

    width: 48px;

    min-width: 48px;

    background: var(--bg-input);

    color: var(--text-muted);

    font-family: 'Menlo', 'Monaco', 'Consolas', monospace;

    font-size: 0.82rem;

    line-height: 1.8;

    padding: 12px 4px 12px 8px;

    text-align: right;

    user-select: none;

    overflow: hidden;

    border-right: 1px solid var(--border-color);

}

.editor-line-numbers div {

    padding-right: 4px;

}

.editor-textarea {

    flex: 1;

    border: none !important;

    outline: none !important;

    box-shadow: none !important;

    resize: vertical;

    min-height: 400px;

    font-family: 'Menlo', 'Monaco', 'Consolas', 'PingFang SC', 'Microsoft YaHei', monospace;

    font-size: 0.92rem;

    line-height: 1.8;

    padding: 12px 16px;

    background: var(--bg-card);

    color: var(--text);

    tab-size: 4;

}

.editor-toolbar {

    display: flex;

    gap: 6px;

    padding: 8px 12px;

    background: var(--bg-input);

    border-bottom: 1px solid var(--border-color);

    flex-wrap: wrap;

    align-items: center;

}

.editor-toolbar .toolbar-btn {

    padding: 4px 10px;

    font-size: 0.8rem;

    border: 1px solid var(--border-color);

    border-radius: 6px;

    background: var(--bg-card);

    color: var(--text);

    cursor: pointer;

    transition: all 0.15s;

    white-space: nowrap;

}

.editor-toolbar .toolbar-btn:hover {

    background: var(--primary);

    color: #fff;

    border-color: var(--primary);

}

.editor-toolbar .toolbar-sep {

    width: 1px;

    height: 20px;

    background: var(--border-color);

    margin: 0 4px;

}

.editor-status-bar {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 8px 12px;

    background: var(--bg-input);

    border-top: 1px solid var(--border-color);

    font-size: 0.8rem;

    color: var(--text-muted);

    gap: 12px;

    flex-wrap: wrap;

}

.editor-status-bar .word-target {

    display: flex;

    align-items: center;

    gap: 8px;

}

.editor-status-bar .word-target .target-bar {

    width: 80px;

    height: 6px;

    background: var(--bg-card);

    border-radius: 3px;

    overflow: hidden;

}

.editor-status-bar .word-target .target-bar-fill {

    height: 100%;

    border-radius: 3px;

    transition: width 0.3s, background 0.3s;

}



/* ========== Pipeline Progress Bar ========== */

.pipeline-bar {

    display: flex;

    align-items: center;

    padding: 10px 16px;

    background: var(--bg-card, #1a1a2e);

    border-bottom: 1px solid var(--border-color, #2a2a4a);

    overflow-x: auto;

    gap: 0;

    flex-shrink: 0;

    scrollbar-width: thin;

}

.pipeline-bar::-webkit-scrollbar { height: 4px; }

.pipeline-bar::-webkit-scrollbar-thumb { background: var(--border-color, #2a2a4a); border-radius: 2px; }



.pipeline-step {

    display: flex;

    align-items: center;

    gap: 6px;

    padding: 6px 12px;

    border-radius: 20px;

    font-size: 0.78rem;

    cursor: pointer;

    white-space: nowrap;

    transition: all 0.2s;

    position: relative;

}

.pipeline-step:hover {

    background: rgba(255,255,255,0.08);

    transform: translateY(-1px);

}



.step-dot {

    width: 10px;

    height: 10px;

    border-radius: 50%;

    flex-shrink: 0;

    transition: all 0.3s;

}



/* Pipeline step states */

.pipeline-step.completed .step-dot {

    background: #10b981;

    box-shadow: 0 0 6px rgba(16,185,129,0.5);

}

.pipeline-step.completed {

    color: #10b981;

}

.pipeline-step.current .step-dot {

    background: #3b82f6;

    box-shadow: 0 0 8px rgba(59,130,246,0.6);

    animation: pulse-dot 2s infinite;

}

.pipeline-step.current {

    color: #3b82f6;

    font-weight: 700;

    background: rgba(59,130,246,0.12);

    animation: pulse-glow 2.5s ease-in-out infinite;

    border: 1px solid rgba(59,130,246,0.3);

}

.pipeline-step.recommended .step-dot {

    background: #f59e0b;

    box-shadow: 0 0 6px rgba(245,158,11,0.4);

}

.pipeline-step.recommended {

    color: #f59e0b;

}

.pipeline-step.available .step-dot {

    background: #6366f1;

    opacity: 0.5;

}

.pipeline-step.available {

    color: #818cf8;

    cursor: pointer;

}

.pipeline-step.available:hover {

    color: #a5b4fc;

    background: rgba(99,102,241,0.12);

    transform: translateY(-1px);

    border-color: rgba(99,102,241,0.3);

}

.pipeline-step.available:hover .step-dot {

    opacity: 0.8;

}

/* Modified/downstream state: upstream changed, this stage needs refresh */

.pipeline-step.modified .step-dot {

    background: #f97316;

    box-shadow: 0 0 6px rgba(249,115,22,0.5);

    animation: pulse-orange 2s infinite;

}

.pipeline-step.modified {

    color: #fb923c;

    background: rgba(249,115,22,0.08);

    border: 1px dashed rgba(249,115,22,0.4);

}

.pipeline-step.modified:hover {

    background: rgba(249,115,22,0.15);

    color: #fdba74;

}

@keyframes pulse-orange {

    0%, 100% { box-shadow: 0 0 4px rgba(249,115,22,0.3); }

    50% { box-shadow: 0 0 12px rgba(249,115,22,0.7); }

}



/* Pipeline connectors */

.pipeline-connector {

    width: 24px;

    height: 2px;

    background: var(--border-color, #2a2a4a);

    flex-shrink: 0;

    transition: background 0.3s;

}

.pipeline-connector.completed {

    background: #10b981;

}

.pipeline-connector.active {

    background: linear-gradient(90deg, #10b981, #3b82f6);

}



@keyframes pulse-dot {

    0%, 100% { box-shadow: 0 0 6px rgba(59,130,246,0.4); }

    50% { box-shadow: 0 0 14px rgba(59,130,246,0.8); }

}

@keyframes pulse-glow {

    0%, 100% { box-shadow: 0 0 8px rgba(59,130,246,0.4), inset 0 0 8px rgba(59,130,246,0.1); }

    50% { box-shadow: 0 0 20px rgba(59,130,246,0.7), 0 0 40px rgba(59,130,246,0.2), inset 0 0 12px rgba(59,130,246,0.15); }

}

/* Floating current-stage badge */

.current-stage-badge {

    position: fixed;

    top: 16px;

    left: 50%;

    right: auto;

    bottom: auto;

    transform: translateX(-50%);

    z-index: 9999;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 8px 18px 8px 14px;

    border-radius: 30px;

    background: linear-gradient(135deg, rgba(30,30,60,0.95), rgba(20,20,50,0.98));

    border: 1px solid rgba(59,130,246,0.4);

    box-shadow: 0 4px 20px rgba(0,0,0,0.4), 0 0 15px rgba(59,130,246,0.15);

    font-size: 0.8rem;

    color: #e5e7eb;

    backdrop-filter: blur(12px);

    pointer-events: none;

    transition: opacity 0.3s, transform 0.3s;

}

.current-stage-badge .badge-emoji {

    font-size: 1.1rem;

}

.current-stage-badge .badge-label {

    font-weight: 600;

    color: #60a5fa;

}

.current-stage-badge .badge-progress {

    display: flex;

    align-items: center;

    gap: 6px;

    font-size: 0.72rem;

    color: #9ca3af;

    padding-left: 10px;

    border-left: 1px solid rgba(255,255,255,0.12);

}

.current-stage-badge .badge-progress-bar {

    width: 48px;

    height: 4px;

    border-radius: 2px;

    background: rgba(255,255,255,0.1);

    overflow: hidden;

}

.current-stage-badge .badge-progress-fill {

    height: 100%;

    border-radius: 2px;

    background: linear-gradient(90deg, #3b82f6, #60a5fa);

    transition: width 0.4s ease;

}

/* Stage Action Banner */

/* stage-action-banner removed - UI noise cleaned */

.stage-action-banner::before {

    content: '';

    position: absolute;

    top: 0; left: 0; right: 0;

    height: 3px;

    border-radius: 14px 14px 0 0;

}

.stage-action-banner.banner-foundation {

    background: linear-gradient(135deg, rgba(59,130,246,0.12), rgba(99,102,241,0.08));

    border-color: rgba(59,130,246,0.3);

}

.stage-action-banner.banner-foundation::before { background: linear-gradient(90deg, #3b82f6, #6366f1); }

.stage-action-banner.banner-structure {

    background: linear-gradient(135deg, rgba(139,92,246,0.12), rgba(168,85,247,0.08));

    border-color: rgba(139,92,246,0.3);

}

.stage-action-banner.banner-structure::before { background: linear-gradient(90deg, #8b5cf6, #a855f7); }

.stage-action-banner.banner-execution {

    background: linear-gradient(135deg, rgba(16,185,129,0.12), rgba(52,211,153,0.08));

    border-color: rgba(16,185,129,0.3);

}

.stage-action-banner.banner-execution::before { background: linear-gradient(90deg, #10b981, #34d399); }

.stage-action-banner.banner-review {

    background: linear-gradient(135deg, rgba(245,158,11,0.12), rgba(251,191,36,0.08));

    border-color: rgba(245,158,11,0.3);

}

.stage-action-banner.banner-review::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }

.stage-action-banner.banner-utils {

    background: linear-gradient(135deg, rgba(107,114,128,0.10), rgba(156,163,175,0.06));

    border-color: rgba(107,114,128,0.25);

}

.stage-action-banner.banner-utils::before { background: linear-gradient(90deg, #6b7280, #9ca3af); }

.banner-row { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }

.banner-emoji { font-size: 2.2rem; line-height: 1; }

.banner-title-area h3 { margin: 0; font-size: 1.25rem; color: #f3f4f6; }

.banner-status { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 0.78rem; font-weight: 600; padding: 2px 10px; border-radius: 12px; }

.banner-status.status-current { background: rgba(59,130,246,0.2); color: #60a5fa; }

.banner-status.status-recommended { background: rgba(245,158,11,0.2); color: #fbbf24; }

.banner-status.status-completed { background: rgba(16,185,129,0.2); color: #34d399; }

.banner-status.status-available { background: rgba(107,114,128,0.2); color: #9ca3af; }

.banner-details { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }

@media (max-width: 640px) { .banner-details { grid-template-columns: 1fr; } }

.banner-card { background: rgba(0,0,0,0.18); border-radius: 8px; padding: 10px 14px; }

.banner-card-label { font-size: 0.72rem; color: #9ca3af; margin-bottom: 4px; font-weight: 600; }

.banner-card-value { font-size: 0.85rem; color: #d1d5db; line-height: 1.5; }

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

.banner-action-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 16px; border-radius: 18px; font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: all 0.2s; border: none; }

.banner-action-btn.btn-primary { background: rgba(59,130,246,0.2); color: #60a5fa; }

.banner-action-btn.btn-primary:hover { background: rgba(59,130,246,0.35); }

.banner-action-btn.btn-next { background: rgba(16,185,129,0.2); color: #34d399; }

.banner-action-btn.btn-next:hover { background: rgba(16,185,129,0.35); }



/* ========== Sidebar State Indicators ========== */

.state-indicator {

    width: 10px;

    height: 10px;

    border-radius: 50%;

    margin-left: auto;

    flex-shrink: 0;

    transition: all 0.3s;

    position: relative;

}

.state-indicator.state-completed {

    background: #10b981;

    box-shadow: 0 0 6px rgba(16,185,129,0.5);

}

.state-indicator.state-completed::after {

    content: '✓';

    position: absolute;

    top: -1px;

    left: 1px;

    font-size: 7px;

    color: white;

    font-weight: 900;

}

.state-indicator.state-current {

    background: #3b82f6;

    box-shadow: 0 0 8px rgba(59,130,246,0.6);

    animation: pulse-dot 2s infinite;

    width: 12px;

    height: 12px;

}

.state-indicator.state-recommended {

    background: #f59e0b;

    box-shadow: 0 0 6px rgba(245,158,11,0.5);

    animation: pulse-amber 2.5s infinite;

}

.state-indicator.state-available {

    background: #6366f1;

    opacity: 0.45;

}

.state-indicator.state-modified {

    background: #f97316;

    box-shadow: 0 0 6px rgba(249,115,22,0.5);

    animation: pulse-orange 2s infinite;

}

@keyframes pulse-amber {

    0%, 100% { box-shadow: 0 0 4px rgba(245,158,11,0.3); }

    50% { box-shadow: 0 0 10px rgba(245,158,11,0.7); }

}



/* Sidebar item workflow highlights */

.sidebar-item.workflow-current {

    border-left: 3px solid #3b82f6 !important;

    background: rgba(59,130,246,0.08) !important;

}

.sidebar-item.workflow-recommended {

    border-left: 3px solid #f59e0b !important;

    background: rgba(245,158,11,0.06) !important;

}

.sidebar-item.workflow-modified {

    border-left: 3px solid #f97316 !important;

    background: rgba(249,115,22,0.06) !important;

}

.sidebar-item.workflow-modified::after {

    content: '需刷新';

    position: absolute;

    right: 10px;

    font-size: 0.55rem;

    color: #fb923c;

    font-weight: 700;

    background: rgba(249,115,22,0.15);

    padding: 1px 5px;

    border-radius: 4px;

}



/* ========== Stage Context Panel (top of each section) ========== */

.stage-context-panel {

    border-radius: 12px;

    padding: 16px 20px;

    margin-bottom: 20px;

    border: 1px solid;

    animation: fadeSlideIn 0.3s ease;

}

@keyframes fadeSlideIn {

    from { opacity: 0; transform: translateY(-8px); }

    to { opacity: 1; transform: translateY(0); }

}



.stage-context-panel.stage-foundation {

    background: linear-gradient(135deg, rgba(59,130,246,0.08), rgba(99,102,241,0.06));

    border-color: rgba(59,130,246,0.25);

}

.stage-context-panel.stage-structure {

    background: linear-gradient(135deg, rgba(139,92,246,0.08), rgba(168,85,247,0.06));

    border-color: rgba(139,92,246,0.25);

}

.stage-context-panel.stage-execution {

    background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(52,211,153,0.06));

    border-color: rgba(16,185,129,0.25);

}

.stage-context-panel.stage-review {

    background: linear-gradient(135deg, rgba(245,158,11,0.08), rgba(251,191,36,0.06));

    border-color: rgba(245,158,11,0.25);

}

.stage-context-panel.stage-utils {

    background: linear-gradient(135deg, rgba(107,114,128,0.08), rgba(156,163,175,0.06));

    border-color: rgba(107,114,128,0.2);

}



.stage-context-header {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 12px;

}

.stage-emoji {

    font-size: 1.8rem;

    line-height: 1;

}

.stage-text h3 {

    margin: 0;

    font-size: 1.1rem;

    color: var(--text-primary, #e5e7eb);

}

.stage-tag {

    display: inline-block;

    font-size: 0.7rem;

    padding: 2px 8px;

    border-radius: 10px;

    background: rgba(255,255,255,0.1);

    color: var(--text-secondary, #9ca3af);

    margin-top: 2px;

}



.stage-context-body {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;

    margin-bottom: 12px;

}

@media (max-width: 640px) {

    .stage-context-body { grid-template-columns: 1fr; }

}



.stage-context-card {

    background: rgba(0,0,0,0.15);

    border-radius: 8px;

    padding: 10px 14px;

}

.sc-label {

    font-size: 0.72rem;

    color: var(--text-muted, #6b7280);

    margin-bottom: 4px;

    font-weight: 600;

}

.sc-value {

    font-size: 0.85rem;

    color: var(--text-secondary, #d1d5db);

    line-height: 1.5;

}



.stage-context-tips {

    display: flex;

    gap: 10px;

    flex-wrap: wrap;

}

.stage-tip {

    display: inline-flex;

    align-items: center;

    gap: 4px;

    font-size: 0.78rem;

    padding: 4px 12px;

    border-radius: 16px;

    font-weight: 500;

}

.stage-tip.current {

    background: rgba(59,130,246,0.15);

    color: #60a5fa;

}

.stage-tip.recommended {

    background: rgba(16,185,129,0.15);

    color: #34d399;

    cursor: pointer;

    transition: background 0.2s;

}

.stage-tip.recommended:hover {

    background: rgba(16,185,129,0.25);

}



/* ========== Stage Guide (from workflow API) ========== */

.stage-guide {

    display: flex;

    gap: 14px;

    padding: 14px 18px;

    border-radius: 10px;

    margin-bottom: 16px;

    border: 1px solid;

    align-items: flex-start;

}

.stage-guide.guide-completed {

    background: rgba(16,185,129,0.06);

    border-color: rgba(16,185,129,0.2);

}

.stage-guide.guide-current {

    background: rgba(59,130,246,0.08);

    border-color: rgba(59,130,246,0.3);

}

.stage-guide.guide-recommended {

    background: rgba(245,158,11,0.06);

    border-color: rgba(245,158,11,0.2);

}

.stage-guide.guide-available {

    background: rgba(107,114,128,0.06);

    border-color: rgba(107,114,128,0.15);

}



.stage-guide-icon {

    font-size: 1.6rem;

    line-height: 1;

    flex-shrink: 0;

}

.stage-guide-body h3 {

    margin: 0 0 4px 0;

    font-size: 0.95rem;

    color: var(--text-primary, #e5e7eb);

}

.guide-desc {

    font-size: 0.82rem;

    color: var(--text-secondary, #9ca3af);

    margin: 0 0 8px 0;

    line-height: 1.4;

}

.guide-actions {

    display: flex;

    gap: 8px;

    flex-wrap: wrap;

}

.guide-tag {

    font-size: 0.72rem;

    padding: 3px 10px;

    border-radius: 12px;

    font-weight: 500;

}

.tag-status-completed {

    background: rgba(16,185,129,0.15);

    color: #34d399;

}

.tag-status-current {

    background: rgba(59,130,246,0.15);

    color: #60a5fa;

}

.tag-action {

    background: rgba(139,92,246,0.12);

    color: #a78bfa;

}

.tag-timing {

    background: rgba(245,158,11,0.12);

    color: #fbbf24;

}

.tag-intervene {

    background: rgba(16,185,129,0.1);

    color: #6ee7b7;

}



/* ========== Current Stage Banner (persistent top indicator) ========== */

.current-stage-banner {

    background: linear-gradient(135deg, rgba(139,92,246,0.1), rgba(6,182,212,0.1));

    border: 2px solid rgba(139,92,246,0.3);

    border-radius: 14px;

    padding: 14px 20px;

    margin-bottom: 20px;

    display: flex;

    align-items: center;

    gap: 16px;

    position: relative;

    overflow: hidden;

    animation: bannerGlow 3s ease-in-out infinite;

}

.current-stage-banner::before {

    content: '';

    position: absolute;

    top: 0; left: 0; right: 0;

    height: 3px;

    background: linear-gradient(90deg, var(--primary), var(--secondary), var(--primary));

    background-size: 200% 100%;

    animation: shimmer 2s linear infinite;

}

@keyframes shimmer {

    0% { background-position: -200% 0; }

    100% { background-position: 200% 0; }

}

@keyframes bannerGlow {

    0%, 100% { box-shadow: 0 0 0 0 rgba(139,92,246,0.15); }

    50% { box-shadow: 0 0 0 6px rgba(139,92,246,0.06); }

}

.current-stage-banner .csb-icon {

    font-size: 2rem;

    flex-shrink: 0;

    line-height: 1;

}

.current-stage-banner .csb-body {

    flex: 1;

    min-width: 0;

}

.current-stage-banner .csb-title {

    font-size: 1rem;

    font-weight: 700;

    color: var(--text);

    margin-bottom: 2px;

}

.current-stage-banner .csb-desc {

    font-size: 0.82rem;

    color: var(--text-light);

    line-height: 1.4;

}

.current-stage-banner .csb-action {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    background: linear-gradient(135deg, var(--primary), var(--primary-dark));

    color: white;

    padding: 8px 16px;

    border-radius: 8px;

    font-size: 0.85rem;

    font-weight: 600;

    cursor: pointer;

    border: none;

    transition: all 0.2s;

    white-space: nowrap;

    flex-shrink: 0;

}

.current-stage-banner .csb-action:hover {

    transform: translateY(-1px);

    box-shadow: 0 4px 12px rgba(139,92,246,0.3);

}



/* Sidebar current label */

.sidebar-item.workflow-current::after {

    content: '当前';

    position: absolute;

    right: 10px;

    font-size: 0.6rem;

    color: #60a5fa;

    font-weight: 700;

    letter-spacing: 0.5px;

    text-transform: uppercase;

    background: rgba(59,130,246,0.15);

    padding: 1px 6px;

    border-radius: 4px;

}

.sidebar-item {

    position: relative;

}



/* Pipeline step tooltip on hover */

.pipeline-step[data-tooltip] {

    position: relative;

}

.pipeline-step[data-tooltip]:hover::after {

    content: attr(data-tooltip);

    position: absolute;

    bottom: calc(100% + 8px);

    left: 50%;

    transform: translateX(-50%);

    background: var(--text);

    color: var(--bg-card);

    padding: 6px 12px;

    border-radius: 8px;

    font-size: 0.75rem;

    white-space: nowrap;

    z-index: 100;

    pointer-events: none;

    box-shadow: 0 4px 12px rgba(0,0,0,0.2);

}

.pipeline-step[data-tooltip]:hover::before {

    content: '';

    position: absolute;

    bottom: calc(100% + 2px);

    left: 50%;

    transform: translateX(-50%);

    border: 5px solid transparent;

    border-top-color: var(--text);

    z-index: 100;

    pointer-events: none;

}



/* Pipeline step current badge */

.pipeline-step.current::after {

    content: '◀ 你在这里';

    font-size: 0.65rem;

    font-weight: 700;

    color: #3b82f6;

    margin-left: 6px;

    letter-spacing: 0.3px;

}



/* Module quick-info tooltip (on sidebar hover) */

.sidebar-item .module-quick-tip {

    display: none;

    position: absolute;

    left: calc(100% + 8px);

    top: 50%;

    transform: translateY(-50%);

    background: var(--text);

    color: var(--bg-card);

    padding: 8px 14px;

    border-radius: 10px;

    font-size: 0.78rem;

    max-width: 220px;

    line-height: 1.4;

    z-index: 200;

    pointer-events: none;

    box-shadow: 0 4px 16px rgba(0,0,0,0.25);

    white-space: normal;

}

.sidebar-item:hover .module-quick-tip {

    display: block;

}



/* ========== Prerequisite Warning Card ========== */

.stage-prereq-card {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    background: rgba(245,158,11,0.1);

    border: 1px solid rgba(245,158,11,0.3);

    border-left: 4px solid #f59e0b;

    border-radius: 10px;

    padding: 12px 16px;

    margin-bottom: 14px;

    animation: fadeSlideIn 0.3s ease;

}

.prereq-icon {

    font-size: 1.3rem;

    flex-shrink: 0;

    line-height: 1;

    margin-top: 2px;

}

.prereq-body {

    flex: 1;

    min-width: 0;

}

.prereq-title {

    font-size: 0.9rem;

    font-weight: 700;

    color: #d97706;

    margin-bottom: 4px;

}

.prereq-desc {

    font-size: 0.82rem;

    color: #92400e;

    line-height: 1.5;

}

.prereq-desc strong {

    color: #b45309;

}



/* ========== Completed Banner (has data) ========== */

.completed-banner {

    display: flex;

    align-items: center;

    gap: 8px;

    background: rgba(16,185,129,0.1);

    border: 1px solid rgba(16,185,129,0.3);

    border-left: 4px solid #10b981;

    border-radius: 10px;

    padding: 10px 16px;

    margin-bottom: 14px;

    animation: fadeSlideIn 0.3s ease;

}

.completed-icon {

    font-size: 1.1rem;

    flex-shrink: 0;

}

.completed-text {

    font-size: 0.85rem;

    color: #065f46;

    font-weight: 500;

}



/* Pipeline available stage — slightly muted but still interactive */

.pipeline-step.available {

    cursor: pointer;

}



/* ========== Node Data Badge (green tag on sidebar) ========== */

/* node-data-badge removed - badges cleaned from templates */



/* ========== Pipeline Groups ========== */

.pipeline-group {

    display: flex;

    flex-direction: column;

    gap: 4px;

    margin-bottom: 6px;

}

.pipeline-group-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 6px 10px;

    border-radius: 8px;

    cursor: pointer;

    font-size: 0.8rem;

    font-weight: 600;

    color: var(--text-secondary);

    background: var(--bg-input);

    transition: all 0.2s;

    user-select: none;

}

.pipeline-group-header:hover {

    background: var(--bg-hover);

}

.pipeline-group-header.active {

    color: #7c3aed;

    background: rgba(124, 58, 237, 0.08);

}

.pipeline-group-header.completed {

    color: #10b981;

    background: rgba(16, 185, 129, 0.08);

}

.pipeline-group-items {

    display: none;

    flex-direction: column;

    gap: 4px;

    padding-left: 8px;

}

.group-toggle {

    font-size: 0.65rem;

    transition: transform 0.2s;

}



/* ========== Pipeline Mode Toggle ========== */

.mode-toggle {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    margin-left: auto;

    padding: 5px 14px;

    border-radius: 16px;

    font-size: 0.75rem;

    font-weight: 600;

    cursor: pointer;

    border: 1px solid rgba(139,92,246,0.3);

    background: rgba(139,92,246,0.08);

    color: #a78bfa;

    transition: all 0.2s;

    white-space: nowrap;

    user-select: none;

}

.mode-toggle:hover {

    background: rgba(139,92,246,0.15);

    border-color: rgba(139,92,246,0.5);

    transform: translateY(-1px);

}

.mode-toggle .mode-icon { font-size: 0.9rem; }



/* Pipeline fork badge */

.pipeline-fork-badge {

    font-size: 0.55rem;

    font-weight: 700;

    padding: 1px 5px;

    border-radius: 4px;

    margin-left: 4px;

    letter-spacing: 0.3px;

}

.pipeline-fork-badge.fork-auto {

    background: rgba(16,185,129,0.15);

    color: #34d399;

}

.pipeline-fork-badge.fork-confirm {

    background: rgba(245,158,11,0.2);

    color: #fbbf24;

}



/* Sidebar fork badge */

.sidebar-fork-badge {

    font-size: 0.55rem;

    font-weight: 700;

    padding: 1px 5px;

    border-radius: 4px;

    margin-left: 3px;

    letter-spacing: 0.3px;

}

.sidebar-fork-badge.fork-auto {

    background: rgba(16,185,129,0.15);

    color: #34d399;

}

.sidebar-fork-badge.fork-confirm {

    background: rgba(245,158,11,0.2);

    color: #fbbf24;

}



/* ========== View Tabs ========== */

.view-tabs {

    display: flex;

    gap: 8px;

    padding: 12px 24px;

    background: var(--bg-secondary);

    border-bottom: 1px solid var(--border);

}

.view-tab {

    padding: 8px 16px;

    border: 1px solid var(--border);

    border-radius: 8px;

    background: var(--bg-primary);

    color: var(--text);

    cursor: pointer;

    font-size: 0.9rem;

    transition: all 0.2s;

}

.view-tab:hover {

    background: var(--bg-secondary);

    border-color: var(--primary);

}

.view-tab.active {

    background: var(--primary);

    color: #fff;

    border-color: var(--primary);

}



/* ========== Layout Body ========== */

.layout-body {

    display: flex;

    min-height: calc(100vh - 200px);

}



/* ========== Entity Sidebar ========== */

.entity-sidebar {

    width: 220px;

    min-width: 220px;

    background: var(--bg-secondary);

    border-right: 1px solid var(--border);

    padding: 16px;

    overflow-y: auto;

}

.entity-group {

    margin-bottom: 16px;

}

.entity-group h4 {

    font-size: 0.85rem;

    font-weight: 600;

    color: var(--text-muted);

    margin-bottom: 8px;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}

.entity-group ul {

    list-style: none;

    padding: 0;

    margin: 0;

}

.entity-group ul li {

    padding: 6px 10px;

    margin-bottom: 4px;

    border-radius: 6px;

    font-size: 0.9rem;

    cursor: pointer;

    color: var(--text);

    transition: background 0.2s;

}

.entity-group ul li:hover {

    background: rgba(124, 58, 237, 0.1);

    color: var(--primary);

}



/* ===== 世界观：分类分框 ===== */

.wv-category-card {

    background: var(--bg-card);

    border: 1px solid var(--border);

    border-radius: 12px;

    padding: 16px 18px;

    margin-bottom: 14px;

}

.wv-category-title {

    font-size: 1rem;

    font-weight: 600;

    color: var(--text);

    margin-bottom: 10px;

    padding-bottom: 8px;

    border-bottom: 1px solid rgba(124,58,237,0.12);

}

.wv-text-box {

    background: var(--bg-input);

    border: 1px solid var(--border);

    border-radius: 10px;

    padding: 12px 14px;

    color: var(--text-light);

    line-height: 1.8;

    font-size: 0.94rem;

}

.wv-list {

    color: var(--text-light);

    padding-left: 20px;

    margin: 0;

    line-height: 1.8;

    font-size: 0.94rem;

}

.wv-list li { margin-bottom: 6px; }



/* ===== 8块重构：一级导航双螺旋条 ===== */

.double-helix-bar {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 5px 12px;

    margin-bottom: 0;

    background: linear-gradient(90deg, rgba(124,58,237,0.08), rgba(6,182,212,0.08));

    border: 1px solid rgba(124,58,237,0.25);

    border-radius: 16px;

    flex-shrink: 0;

}

.double-helix-bar .dh-label {

    font-size: 0.78rem;

    font-weight: 600;

    color: var(--text);

    white-space: nowrap;

}

.double-helix-bar .dh-hint {

    font-size: 0.7rem;

    color: var(--text-muted);

    white-space: nowrap;

}

.double-helix-bar button,

.double-helix-bar .btn {

    padding: 4px 10px;

    font-size: 0.75rem;

    border-radius: 12px;

    line-height: 1.3;

}



/* ===== 生成按钮：加载动画 + 确认弹窗 + 实时状态 ===== */

.gen-spinner {

    display: inline-block;

    width: 13px; height: 13px;

    border: 2px solid rgba(255,255,255,0.4);

    border-top-color: #ffffff;

    border-radius: 50%;

    animation: genSpin 0.7s linear infinite;

    vertical-align: -2px;

    margin-right: 6px;

}

.btn-secondary .gen-spinner { border-color: rgba(124,58,237,0.3); border-top-color: #7c3aed; }

@keyframes genSpin { to { transform: rotate(360deg); } }

.gen-status {

    font-size: 0.82rem;

    color: var(--text-muted);

    margin-top: 10px;

    display: flex;

    align-items: center;

    gap: 8px;

}

.modal-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 20px; }

/* 顶部：流水线条 + 双螺旋条 同行右对齐 */

.topbar-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.topbar-row .pipeline-bar { flex: 1; min-width: 240px; }

.double-helix-bar { margin-left: auto; margin-bottom: 0; flex-shrink: 0; }

@media (max-width: 768px) {

    .double-helix-bar { margin-left: 0; justify-content: center; }

}



/* ===== 8块重构：大纲按卷分框 ===== */

.outline-volume-card {

    background: var(--bg-card);

    border: 1px solid var(--border);

    border-radius: 14px;

    padding: 16px 18px;

    margin-bottom: 16px;

    box-shadow: 0 1px 3px rgba(0,0,0,0.04);

}

.outline-volume-title {

    font-size: 1.05rem;

    font-weight: 700;

    color: var(--primary);

    margin-bottom: 12px;

    padding-bottom: 8px;

    border-bottom: 2px dashed rgba(124,58,237,0.25);

}

.outline-node-card {

    background: var(--bg-input);

    border: 1px solid var(--border, #e5e7eb);

    border-radius: 10px;

    padding: 12px 14px;

    margin-bottom: 10px;

}

.outline-node-card .on-title {

    font-weight: 600;

}

.node-index-badge {

    flex-shrink: 0;

    width: 28px;

    height: 28px;

    border-radius: 50%;

    background: linear-gradient(135deg, var(--primary), var(--primary-dark));

    color: #fff;

    font-size: 0.85rem;

    font-weight: 700;

    line-height: 1;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    box-shadow: 0 2px 6px rgba(124,58,237,0.35);

    user-select: none;

}



/* ===== 8块重构：大纲左右布局（左侧剧情设计 + 右侧节点/方案） ===== */

.outline-layout {

    display: flex;

    gap: 20px;

    align-items: flex-start;

}

.outline-left {

    width: 340px;

    flex-shrink: 0;

    position: sticky;

    top: 76px;

    max-height: calc(100vh - 96px);

    overflow-y: auto;

}

.outline-left .plot-edit-card {

    padding: 16px;

}

.outline-left .plot-edit-card .section-title {

    margin-bottom: 12px;

    font-size: 1rem;

}

.timeline-editor label {

    display: block;

    font-size: 0.85rem;

    color: var(--text-muted);

    margin-bottom: 6px;

}

.timeline-editor .form-input {

    margin-bottom: 0;

}

.timeline-edit-row {

    background: var(--bg-input);

    border: 1px solid var(--border);

    border-radius: 10px;

    padding: 10px 12px;

    margin-bottom: 10px;

    transition: border-color 0.15s ease;

}

.timeline-edit-row:focus-within {

    border-color: var(--color-primary);

}

.timeline-edit-row .btn-danger {

    padding: 4px 8px;

    font-size: 0.8rem;

    line-height: 1;

}

.outline-right {

    flex: 1;

    min-width: 0;

}

@media (max-width: 992px) {

    .outline-layout {

        flex-direction: column;

    }

    .outline-left {

        width: 100%;

        position: static;

        max-height: none;

    }

}



/* ========== Right-side Operation Log Panel ========== */

.log-panel {

    position: fixed;

    top: 56px; /* navbar height */

    right: 0;

    width: 360px;

    max-width: 90vw;

    height: calc(100vh - 56px - 48px); /* minus footer approx */

    background: var(--bg-card);

    border-left: 1px solid var(--border);

    box-shadow: -4px 0 20px rgba(0,0,0,0.08);

    display: flex;

    flex-direction: column;

    z-index: 900;

    transition: transform 0.25s ease;

}



.log-panel.collapsed {

    transform: translateX(100%);

}



.log-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 12px 16px;

    border-bottom: 1px solid var(--border);

    background: var(--bg-input);

}



.log-title {

    font-weight: 700;

    font-size: 0.95rem;

    color: var(--text);

}



.log-actions {

    display: flex;

    gap: 8px;

}



.log-btn {

    background: transparent;

    border: 1px solid var(--border);

    border-radius: 6px;

    padding: 4px 10px;

    font-size: 0.8rem;

    color: var(--text-light);

    cursor: pointer;

    transition: all 0.2s;

}



.log-btn:hover {

    border-color: var(--primary-light);

    color: var(--primary);

    background: rgba(139,92,246,0.08);

}



.log-body {

    flex: 1;

    overflow-y: auto;

    padding: 12px 14px;

    display: flex;

    flex-direction: column;

    gap: 10px;

}



.log-entry {

    display: flex;

    flex-direction: column;

    gap: 4px;

    padding: 10px 12px;

    border-radius: 10px;

    font-size: 0.85rem;

    background: var(--bg-input);

    border: 1px solid var(--border);

}



.log-entry.error {

    background: rgba(239,68,68,0.06);

    border-color: rgba(239,68,68,0.25);

}



.log-entry.success {

    background: rgba(16,185,129,0.06);

    border-color: rgba(16,185,129,0.25);

}



.log-entry.warning {

    background: rgba(245,158,11,0.06);

    border-color: rgba(245,158,11,0.25);

}



.log-entry.info {

    background: rgba(59,130,246,0.06);

    border-color: rgba(59,130,246,0.25);

}



.log-entry-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 8px;

}



.log-entry-main {

    display: flex;

    align-items: center;

    gap: 8px;

    flex-wrap: wrap;

    flex: 1;

    min-width: 0;

}



.log-entry-time {

    font-size: 0.75rem;

    color: var(--text-muted);

    white-space: nowrap;

}



.log-entry-status {

    font-weight: 700;

    font-size: 0.75rem;

    display: inline-flex;

    align-items: center;

    gap: 4px;

    white-space: nowrap;

}



.log-entry-status.error { color: var(--danger); }

.log-entry-status.success { color: var(--success); }

.log-entry-status.warning { color: var(--accent); }

.log-entry-status.info { color: var(--info); }



.log-entry-op {

    color: var(--text);

    font-weight: 500;

    line-height: 1.4;

    word-break: break-word;

    flex: 1;

}



.log-entry-duration {

    font-size: 0.75rem;

    color: var(--text-muted);

    background: var(--bg-card);

    border: 1px solid var(--border);

    border-radius: 999px;

    padding: 1px 8px;

    white-space: nowrap;

}



.log-entry-toggle {

    background: transparent;

    border: 1px solid var(--border);

    border-radius: 6px;

    padding: 2px 8px;

    font-size: 0.72rem;

    color: var(--text-light);

    cursor: pointer;

    white-space: nowrap;

    transition: all 0.2s;

}



.log-entry-toggle:hover {

    border-color: var(--primary-light);

    color: var(--primary);

    background: rgba(139,92,246,0.08);

}



.log-entry-detail {

    color: var(--text-light);

    font-size: 0.78rem;

    line-height: 1.5;

    max-height: 120px;

    overflow-y: auto;

    white-space: pre-wrap;

    word-break: break-word;

    background: rgba(255,255,255,0.5);

    border-radius: 6px;

    padding: 6px 8px;

    transition: max-height 0.2s ease, padding 0.2s ease, opacity 0.2s ease;

}



.log-entry-detail.collapsed {

    display: none;

}



.log-toggle {

    position: fixed;

    right: 16px;

    bottom: 64px; /* above footer */

    width: 44px;

    height: 44px;

    border-radius: 50%;

    border: none;

    background: linear-gradient(135deg, var(--primary), var(--primary-dark));

    color: white;

    font-size: 1.1rem;

    box-shadow: 0 4px 12px rgba(139,92,246,0.35);

    cursor: pointer;

    z-index: 899;

    transition: transform 0.2s, opacity 0.2s;

    display: flex;

    align-items: center;

    justify-content: center;

}



.log-toggle:hover {

    transform: translateY(-2px);

}



.log-toggle.hidden {

    opacity: 0;

    pointer-events: none;

}



/* When log panel is open, push main content slightly left on wide screens */

@media (min-width: 1200px) {

    .log-panel:not(.collapsed) ~ .main-content,

    .log-panel:not(.collapsed) ~ main.main-content {

        margin-right: 360px;

    }

}



@media (max-width: 768px) {

    .log-panel {

        width: 100vw;

        max-width: 100vw;

    }

    .log-toggle {

        right: 12px;

        bottom: 58px;

    }

}



/* Toast close button for persistent errors */

.toast {
    position: fixed;
    bottom: 100px;
    right: 24px;
    max-width: 420px;
    max-height: 200px;
    overflow-y: auto;
    padding: 14px 18px;
    border-radius: 12px;
    color: white;
    font-size: 0.9rem;
    font-weight: 500;
    z-index: 10001;
    animation: slideIn 0.3s ease;
    transition: opacity 0.2s ease, bottom 0.3s ease;
    box-shadow: var(--shadow-lg);
    word-wrap: break-word;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}



.toast-msg {

    flex: 1;

    line-height: 1.5;

}



.toast-close {

    background: rgba(255,255,255,0.25);

    border: none;

    color: white;

    width: 22px;

    height: 22px;

    border-radius: 50%;

    cursor: pointer;

    font-size: 0.8rem;

    line-height: 22px;

    flex-shrink: 0;

    transition: background 0.2s;

}



.toast-close:hover {

    background: rgba(255,255,255,0.4);

}



/* 世界观左侧导航 */

.worldview-layout {

    display: flex;

    gap: 24px;

    align-items: flex-start;

}



.worldview-nav {

    position: sticky;

    top: 76px;

    width: 170px;

    flex-shrink: 0;

    max-height: calc(100vh - 96px);

    overflow-y: auto;

    padding: 4px;

    border-radius: 12px;

    background: var(--bg-card);

    border: 1px solid var(--border);

    box-shadow: var(--shadow-sm);

}



.worldview-nav-item {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 9px 12px;

    border-radius: 8px;

    cursor: pointer;

    color: var(--text-light);

    font-size: 0.85rem;

    transition: all 0.2s;

    white-space: nowrap;

}



.worldview-nav-item:hover {

    background: var(--bg-input);

    color: var(--text);

}



.worldview-nav-item.active {

    background: rgba(139,92,246,0.12);

    color: var(--primary);

    font-weight: 600;

}



.worldview-content {

    flex: 1;

    min-width: 0;

}



@media (max-width: 768px) {

    .worldview-layout {

        flex-direction: column;

    }

    .worldview-nav {

        position: relative;

        top: auto;

        width: 100%;

        max-height: none;

        display: flex;

        flex-wrap: wrap;

        gap: 6px;

    }

    .worldview-nav-item {

        flex: 1;

        min-width: 120px;

        justify-content: center;

    }

}