/* ===== 骨架泳道 · Excel 行式画布 (v2) ===== */

.lanes-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding: 10px 14px;
    background: var(--bg-input, #f5f5f5);
    border-radius: 12px;
}
.lanes-zoom { display: flex; align-items: center; gap: 6px; }
.lanes-zoom #lane-zoom-label { min-width: 44px; text-align: center; font-size: 0.85rem; color: var(--text-muted, #888); }
.lanes-add { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lanes-tip { font-size: 0.78rem; color: var(--text-muted, #888); }

/* 画布视口：裁剪 + 平移缩放 */
.lane-canvas-viewport {
    position: relative;
    overflow: hidden;
    height: 68vh;
    min-height: 420px;
    background:
        linear-gradient(90deg, rgba(124,58,237,0.04) 1px, transparent 1px) 0 0 / 24px 24px,
        linear-gradient(rgba(124,58,237,0.04) 1px, transparent 1px) 0 0 / 24px 24px,
        var(--bg-card, #fff);
    border: 1px solid var(--border-color, #e5e5e5);
    border-radius: 12px;
    cursor: default;
}
.lane-canvas-viewport.panning { cursor: grabbing; }
.lane-canvas-content {
    position: absolute;
    top: 0; left: 0;
    transform-origin: 0 0;
    padding: 16px;
    will-change: transform;
}

/* 网格：表头 + 行共享列宽 → Excel 对齐 */
.lane-grid { display: inline-block; }
.lane-header-row {
    display: grid;
    gap: 10px;
    margin-bottom: 10px;
    position: sticky;
    top: 0;
}
.lane-hcell {
    font-weight: 600;
    font-size: 0.85rem;
    padding: 6px 10px;
    background: var(--bg-input, #f0f0f4);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.hcell-remove { margin-left: auto; cursor: pointer; opacity: 0.5; font-size: 0.75rem; }
.hcell-remove:hover { opacity: 1; color: #ef4444; }

.lane-rows { display: flex; flex-direction: column; gap: 10px; }

/* 每个主线剧情 = 一整行（Excel 行），从线卡片被约束在本行内 */
.lane-row {
    display: grid;
    gap: 10px;
    align-items: stretch;
    padding: 8px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-color, #e8e8ef);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.lane-row-ghost { opacity: 0.5; background: #7c3aed11; }

.lane-cell {
    min-height: 84px;
    display: flex;
    flex-direction: column;
    min-width: 0;            /* 防止内容撑破列，超出即裁剪，不串到别的剧情 */
    overflow: hidden;
}
.lane-cell-time {
    align-items: stretch;
    gap: 6px;
    background: linear-gradient(180deg, #7c3aed0d, transparent);
    border-radius: 8px;
    padding: 6px;
}
.row-drag-handle {
    cursor: grab;
    text-align: center;
    color: var(--text-muted, #aaa);
    font-weight: 700;
    letter-spacing: 2px;
    user-select: none;
    padding: 2px 0;
}
.row-drag-handle:active { cursor: grabbing; }
.time-input {
    flex: 1;
    resize: none;
    border: 1px dashed var(--border-color, #ddd);
    border-radius: 6px;
    background: transparent;
    padding: 4px 6px;
    font-size: 0.8rem;
    color: var(--text-color, #333);
}

.slave-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-height: 40px;
}

/* 卡片 */
.lane-card {
    position: relative;
    background: var(--bg-input, #fafafa);
    border-radius: 8px;
    padding: 8px 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    transition: box-shadow 0.15s, transform 0.15s;
}
.lane-card:hover { box-shadow: 0 3px 10px rgba(0,0,0,0.12); }
.lane-card-master { background: linear-gradient(135deg, #7c3aed0f, var(--bg-input, #fafafa)); flex: 1; }
.lane-card-slave { cursor: grab; }
.lane-card-slave:active { cursor: grabbing; }
.lane-card-ghost { opacity: 0.5; }
.lane-card-title { font-weight: 600; font-size: 0.88rem; margin-bottom: 3px; cursor: pointer; word-break: break-word; }
.lane-card-summary { font-size: 0.78rem; color: var(--text-muted, #888); cursor: pointer; word-break: break-word; }
.lane-card-tags { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 4px; }
.lane-tag { font-size: 0.7rem; padding: 1px 7px; border-radius: 10px; background: #7c3aed18; color: #7c3aed; }
.lc-meta { font-size: 0.72rem; color: var(--text-muted, #999); margin-top: 4px; }

.lane-card-actions {
    position: absolute;
    top: 4px; right: 4px;
    display: none;
    gap: 2px;
}
.lane-card:hover .lane-card-actions { display: flex; }
.lc-btn {
    border: none;
    background: rgba(0,0,0,0.05);
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.75rem;
    padding: 2px 5px;
    line-height: 1;
}
.lc-btn:hover { background: rgba(0,0,0,0.12); }
.lc-btn-del:hover { background: #ef444422; }

.add-card-btn {
    margin-top: 8px;
    border: 1px dashed;
    background: transparent;
    border-radius: 8px;
    padding: 5px;
    cursor: pointer;
    font-size: 0.8rem;
    width: 100%;
}
.add-card-btn:hover { background: rgba(0,0,0,0.03); }

/* 编辑弹窗表单（复用全局 modal 样式，仅补 form-input） */
#lane-edit-modal .form-group { margin-bottom: 12px; }
#lane-edit-modal .form-group label { display: block; font-size: 0.82rem; color: var(--text-muted, #888); margin-bottom: 4px; }
#lane-edit-modal .form-input {
    width: 100%;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 0.9rem;
    background: var(--bg-input, #fff);
    color: var(--text-color, #333);
    box-sizing: border-box;
}
.btn-danger { background: #ef4444; color: #fff; border: none; }
.btn-danger:hover { background: #dc2626; }

.empty-state { text-align: center; padding: 48px 16px; color: var(--text-muted, #888); }
.empty-state-icon { font-size: 2.4rem; margin-bottom: 8px; }

/* ===== 卡片左侧竖向线类型标签 ===== */
.lane-card { padding-left: 22px; }
.lane-card-linebadge {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 0.62rem;
    letter-spacing: 2px;
    color: #fff;
    border-radius: 8px 0 0 8px;
    user-select: none;
    font-weight: 600;
    opacity: 0.92;
}
.lc-nodelink { cursor: pointer; color: #7c3aed; font-weight: 600; }
.lc-nodelink:hover { text-decoration: underline; }

/* ===== 二级页面（剧情节点 + 各线卡片） ===== */
.pp-wrap { padding: 4px; }
.pp-topbar { display: flex; gap: 8px; margin-bottom: 12px; }
.pp-header { padding: 12px 16px; background: linear-gradient(135deg, #7c3aed12, transparent); border-radius: 12px; margin-bottom: 16px; }
.pp-header h2 { margin: 6px 0; }
.pp-time { font-size: 0.8rem; color: #7c3aed; font-weight: 600; }
.pp-summary { color: var(--text-muted, #666); font-size: 0.9rem; }
.pp-body { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; align-items: start; }
.pp-section-title { font-weight: 600; margin-bottom: 10px; font-size: 0.95rem; }
.pp-node { border: 1px solid var(--border-color, #eee); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; background: var(--bg-card, #fff); }
.pp-node-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.pp-node-num { font-size: 0.72rem; background: #7c3aed18; color: #7c3aed; padding: 1px 8px; border-radius: 10px; }
.pp-node-title { font-weight: 600; }
.pp-node-desc { font-size: 0.85rem; color: var(--text-color, #444); }
.pp-node-extra { font-size: 0.8rem; color: var(--text-muted, #777); margin-top: 4px; }
.pp-line { margin-bottom: 14px; }
.pp-line-head { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 6px; }
.pp-line-cards { display: flex; flex-direction: column; gap: 8px; }
.pp-card { position: relative; background: var(--bg-input, #fafafa); border-radius: 8px; padding: 8px 10px; }
.pp-card-actions { position: absolute; top: 4px; right: 4px; display: none; gap: 2px; }
.pp-card:hover .pp-card-actions { display: flex; }
.pp-card-title { font-weight: 600; font-size: 0.85rem; }
.pp-card-summary { font-size: 0.78rem; color: var(--text-muted, #888); }
@media (max-width: 900px) { .pp-body { grid-template-columns: 1fr; } }

/* ===== 二级页泳道化（与一级同构） + 简化按钮 ===== */
.pp-num-label {
    text-align: center;
    font-size: 0.78rem;
    font-weight: 600;
    color: #7c3aed;
    background: #7c3aed14;
    border-radius: 8px;
    padding: 4px 6px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pp-slave-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-height: 40px;
}
.pp-row-unassigned {
    border-style: dashed;
    background: repeating-linear-gradient(45deg, transparent, transparent 12px, rgba(124,58,237,0.02) 12px, rgba(124,58,237,0.02) 24px), var(--bg-card, #fff);
}
.pp-unassigned-hint { display: flex; align-items: center; opacity: 0.75; }
.btn-simplify { white-space: nowrap; }
.btn-simplify:disabled { opacity: 0.6; cursor: wait; }