.change-course-shell {
    --planner-ink: #17263b;
    --planner-muted: #5c6c80;
    --planner-border: rgba(23, 38, 59, 0.12);
    --planner-paper: #fffdf7;
    --planner-accent-strong: #8f3511;
    --planner-diff-before: rgba(203, 92, 43, 0.14);
    --planner-diff-before-strong: #b45309;
    --planner-diff-after: rgba(15, 118, 110, 0.14);
    --planner-diff-after-strong: #0f766e;
    display: grid;
    gap: 1.5rem;
    padding-bottom: 2rem;
}

.planner-loading-state {
    min-height: 6rem;
    display: grid;
    place-items: center;
    color: var(--planner-muted);
    font-weight: 600;
}

.change-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at top right, rgba(203, 92, 43, 0.18), transparent 28%),
        radial-gradient(circle at bottom left, rgba(15, 118, 110, 0.14), transparent 30%),
        linear-gradient(140deg, #fffaf1 0%, #f8edd9 52%, #eef5f0 100%);
    border: 1px solid rgba(203, 92, 43, 0.18);
}

.change-hero h1,
.planner-empty-state h2,
.participant-card h3,
.step-preview-card h3 {
    font-family: 'Noto Serif TC', serif;
}

.planner-hero-stats {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.planner-stat-card {
    padding: 1rem;
    border-radius: 1.1rem;
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(23, 38, 59, 0.08);
    display: grid;
    gap: 0.3rem;
}

.planner-stat-card span {
    color: var(--planner-muted);
    font-size: 0.92rem;
}

.planner-stat-card strong {
    color: var(--planner-ink);
    font-size: 2rem;
    line-height: 1;
}

.planner-filter-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: end;
}

.planner-filter-grid label {
    display: grid;
    gap: 0.45rem;
    color: var(--planner-ink);
    font-weight: 600;
}

.planner-control-actions {
    display: flex;
    gap: 0.75rem;
    align-items: end;
}

.planner-control-actions.wide-actions {
    grid-column: span 2;
}

.planner-teacher-field {
    grid-column: span 2;
}

.planner-inline-note {
    margin-top: 1rem;
}

.planner-grid-layout {
    display: grid;
    gap: 1.1rem;
    grid-template-columns: minmax(0, 2.35fr) minmax(16.5rem, 0.72fr);
}

.planner-board-header,
.participant-card-header,
.selection-banner,
.step-card,
.planner-summary-row {
    display: flex;
    gap: 0.9rem;
    justify-content: space-between;
    align-items: flex-start;
}

.planner-board-meta {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.selection-banner {
    border-radius: 1rem;
    border: 1px solid var(--planner-border);
    padding: 0.9rem 1rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, rgba(255, 248, 236, 0.9), rgba(246, 250, 248, 0.92));
}

.selection-banner.is-active {
    border-color: rgba(203, 92, 43, 0.3);
    background: linear-gradient(135deg, rgba(255, 240, 229, 0.95), rgba(255, 250, 246, 0.92));
}

.selection-banner.is-passive {
    color: var(--planner-muted);
}

.selection-banner strong {
    color: var(--planner-ink);
    display: block;
    margin-bottom: 0.25rem;
}

.selection-banner span {
    color: var(--planner-muted);
}

.selection-banner-meta {
    display: grid;
    gap: 0.55rem;
    text-align: right;
    justify-items: end;
}

.planner-selection-hint,
.planner-loading-banner {
    margin-bottom: 1rem;
    border-radius: 0.9rem;
    padding: 0.8rem 1rem;
}

.planner-selection-hint {
    color: var(--planner-ink);
    background: rgba(15, 118, 110, 0.1);
}

.planner-loading-banner {
    color: var(--planner-accent-strong);
    background: rgba(203, 92, 43, 0.1);
}

.interactive-grid-shell {
    overflow-x: auto;
    border-radius: 1.25rem;
    border: 1px solid rgba(23, 38, 59, 0.08);
    background: linear-gradient(180deg, #fffefb 0%, #fffaf1 100%);
    padding: 0.45rem;
}

.interactive-schedule-grid {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0.3rem;
    min-width: 0;
}

.interactive-schedule-grid th,
.interactive-schedule-grid td {
    vertical-align: top;
    text-align: center;
}

.interactive-schedule-grid thead th {
    border: 0;
    color: var(--planner-ink);
    font-size: 0.88rem;
    text-align: center;
    padding: 0.45rem 0.25rem;
}

.interactive-schedule-grid.is-right-to-left .planner-slot,
.interactive-schedule-grid.is-right-to-left .planner-empty-slot,
.interactive-schedule-grid.is-right-to-left .planner-course-card {
    text-align: center;
}

.interactive-schedule-grid.is-right-to-left .schedule-label-group {
    justify-content: center;
}

.period-col,
.time-col {
    width: 4.6rem;
    text-align: center;
}

.period-col small,
.period-time {
    color: var(--planner-muted);
    font-weight: 500;
}

.period-time {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.08rem;
    line-height: 1.1;
}

.period-time-line,
.period-time-divider {
    display: block;
    white-space: nowrap;
}

.period-time-divider {
    font-weight: 700;
}

.planner-slot {
    min-width: 0;
    min-height: 6.9rem;
    border-radius: 0.9rem;
    border: 1px solid rgba(23, 38, 59, 0.08);
    background: #fffef9;
    padding: 0.15rem;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.planner-slot:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 30px rgba(23, 38, 59, 0.08);
}

.planner-slot.is-empty {
    background: linear-gradient(180deg, #fffdf7 0%, #faf4e8 100%);
}

.planner-slot.is-target {
    border-style: dashed;
    border-color: rgba(203, 92, 43, 0.45);
    background: linear-gradient(180deg, rgba(255, 236, 225, 0.95) 0%, rgba(255, 247, 240, 0.98) 100%);
}

.planner-slot.has-availability-hint {
    border-color: rgba(15, 118, 110, 0.22);
    background: linear-gradient(180deg, rgba(239, 251, 247, 0.96) 0%, rgba(250, 252, 245, 0.98) 100%);
}

.planner-slot.is-selected-source {
    border-color: rgba(15, 118, 110, 0.42);
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}

.planner-slot.has-moved-course {
    background: linear-gradient(180deg, #fff7ef 0%, #fff1e4 100%);
}

.planner-empty-slot,
.planner-course-card {
    min-height: 6.2rem;
    border-radius: 0.78rem;
    padding: 0.7rem 0.6rem;
    display: grid;
    gap: 0.35rem;
}

.planner-empty-slot {
    align-content: center;
    text-align: center;
    color: var(--planner-muted);
}

.planner-empty-slot strong + span {
    color: var(--planner-ink);
    font-weight: 600;
}

.slot-empty-label {
    font-weight: 700;
    letter-spacing: 0.04em;
}

.slot-target-label {
    color: var(--planner-accent-strong);
    font-size: 0.92rem;
}

.planner-course-card {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(247, 240, 227, 0.94));
    border: 1px solid rgba(23, 38, 59, 0.08);
    box-shadow: 0 12px 24px rgba(23, 38, 59, 0.06);
    cursor: grab;
    text-align: center;
    justify-items: center;
}

.planner-course-card strong {
    color: var(--planner-ink);
    font-size: 0.94rem;
    line-height: 1.35;
}

.planner-course-card span {
    color: var(--planner-muted);
    font-size: 0.84rem;
    line-height: 1.35;
}

.planner-course-card.is-moved {
    border-color: rgba(203, 92, 43, 0.28);
    background: linear-gradient(160deg, rgba(255, 245, 236, 0.98), rgba(255, 237, 225, 0.92));
}

.planner-course-card.is-selected {
    cursor: grabbing;
    border-color: rgba(15, 118, 110, 0.3);
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12), 0 18px 28px rgba(15, 118, 110, 0.08);
}

.course-move-note {
    color: var(--planner-accent-strong);
    font-weight: 700;
}

.lunch-break-row td {
    padding: 0;
}

.lunch-break-cell {
    text-align: center;
    border-radius: 999px;
    padding: 0.5rem 1rem;
    color: var(--planner-accent-strong);
    background: rgba(203, 92, 43, 0.08);
    font-weight: 700;
}

.planner-sidebar {
    display: grid;
    gap: 1rem;
}

.planner-step-empty,
.planner-note-stack,
.planner-empty-state {
    display: grid;
    gap: 0.7rem;
}

.planner-step-list {
    display: grid;
    gap: 0.85rem;
}

.step-card {
    border-radius: 1rem;
    border: 1px solid rgba(23, 38, 59, 0.08);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(248, 244, 236, 0.95));
    padding: 0.8rem;
}

.step-card.is-selected {
    border-color: rgba(15, 118, 110, 0.32);
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);
}

.step-card.is-invalid {
    border-color: rgba(203, 92, 43, 0.28);
    background: linear-gradient(160deg, rgba(255, 242, 236, 0.98), rgba(255, 249, 245, 0.95));
}

.step-index {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 50%;
    background: rgba(23, 38, 59, 0.08);
    color: var(--planner-ink);
    font-weight: 800;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.step-copy-stack {
    flex: 1;
    display: grid;
    gap: 0.35rem;
}

.step-copy-stack strong {
    color: var(--planner-ink);
}

.step-copy-stack span {
    color: var(--planner-muted);
    font-size: 0.86rem;
    line-height: 1.4;
}

.step-actions {
    display: grid;
    gap: 0.4rem;
}

.step-action,
.ghost-button.small-button {
    border: 0;
    border-radius: 999px;
    padding: 0.45rem 0.8rem;
    font-size: 0.84rem;
    background: rgba(23, 38, 59, 0.08);
    color: var(--planner-ink);
}

.step-action.danger-action {
    background: rgba(203, 92, 43, 0.12);
    color: var(--planner-accent-strong);
}

.planner-summary-row span,
.planner-note-stack p {
    color: var(--planner-muted);
}

.planner-export-actions {
    display: grid;
    gap: 0.75rem;
}

.step-preview-grid {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

.participant-schedule-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

.step-preview-card,
.participant-schedule-panel {
    display: grid;
    gap: 0.45rem;
}

.step-preview-card {
    min-width: 0;
    overflow: hidden;
}

.step-preview-card .schedule-shell,
.participant-schedule-panel .schedule-shell {
    overflow: hidden;
    border-radius: 0.95rem;
    min-width: 0;
}

.step-preview-card .schedule-grid,
.participant-schedule-panel .schedule-grid {
    width: 100%;
    table-layout: fixed;
    font-size: 0.7rem;
}

.step-preview-card .schedule-grid th,
.step-preview-card .schedule-grid td,
.participant-schedule-panel .schedule-grid th,
.participant-schedule-panel .schedule-grid td {
    padding: 0.28rem 0.18rem;
}

.step-preview-card .schedule-grid thead th,
.step-preview-card .period-col,
.participant-schedule-panel .schedule-grid thead th,
.participant-schedule-panel .period-col {
    font-size: 0.72rem;
}

.step-preview-card .schedule-grid .period-col,
.participant-schedule-panel .schedule-grid .period-col {
    width: 2.8rem;
    min-width: 2.8rem;
}

.step-preview-card .schedule-grid .time-col,
.participant-schedule-panel .schedule-grid .time-col {
    width: 3.35rem;
    min-width: 3.35rem;
    white-space: normal;
    font-size: 0.64rem;
    line-height: 1.15;
}

.step-preview-card .schedule-grid td,
.participant-schedule-panel .schedule-grid td {
    min-width: 0;
}

.step-preview-card .schedule-slot-cell,
.participant-schedule-panel .schedule-slot-cell {
    transition: background-color 0.18s ease;
}

.step-preview-card .schedule-slot-cell.is-changed-before,
.participant-schedule-panel .schedule-slot-cell.is-changed-before {
    background: linear-gradient(180deg, rgba(255, 245, 236, 0.74), rgba(255, 255, 255, 0.98));
}

.step-preview-card .schedule-slot-cell.is-changed-after,
.participant-schedule-panel .schedule-slot-cell.is-changed-after {
    background: linear-gradient(180deg, rgba(236, 251, 245, 0.74), rgba(255, 255, 255, 0.98));
}

.step-preview-card .schedule-card,
.participant-schedule-panel .schedule-card {
    gap: 0.12rem;
    border-radius: 0.68rem;
    padding: 0.34rem 0.3rem;
    margin-bottom: 0.16rem;
    border: 1px solid transparent;
    box-shadow: none;
}

.step-preview-card .schedule-card strong,
.participant-schedule-panel .schedule-card strong {
    font-size: 0.71rem;
    line-height: 1.15;
    word-break: break-word;
}

.step-preview-card .schedule-card span,
.step-preview-card .schedule-card small,
.step-preview-card .schedule-meta,
.step-preview-card .schedule-empty,
.step-preview-card .period-time,
.participant-schedule-panel .schedule-card span,
.participant-schedule-panel .schedule-card small,
.participant-schedule-panel .schedule-meta,
.participant-schedule-panel .schedule-empty,
.participant-schedule-panel .period-time {
    font-size: 0.62rem;
    line-height: 1.15;
    word-break: break-word;
}

.step-preview-card .schedule-empty,
.participant-schedule-panel .schedule-empty {
    min-height: 2.85rem;
    border-radius: 0.68rem;
    border: 1px dashed rgba(23, 38, 59, 0.08);
    background: rgba(255, 255, 255, 0.82);
    padding: 0.24rem;
    text-align: center;
}

.step-preview-card .schedule-card.is-changed-before,
.participant-schedule-panel .schedule-card.is-changed-before,
.step-preview-card .schedule-empty.is-changed-before,
.participant-schedule-panel .schedule-empty.is-changed-before {
    border-color: rgba(203, 92, 43, 0.28);
    background: linear-gradient(180deg, rgba(255, 245, 236, 0.98), rgba(255, 238, 228, 0.96));
    color: var(--planner-diff-before-strong);
}

.step-preview-card .schedule-card.is-changed-after,
.participant-schedule-panel .schedule-card.is-changed-after,
.step-preview-card .schedule-empty.is-changed-after,
.participant-schedule-panel .schedule-empty.is-changed-after {
    border-color: rgba(15, 118, 110, 0.24);
    background: linear-gradient(180deg, rgba(236, 251, 245, 0.98), rgba(228, 247, 239, 0.96));
    color: var(--planner-diff-after-strong);
}

.step-preview-card h3,
.participant-schedule-panel h4 {
    margin: 0;
    color: var(--planner-ink);
    font-size: 0.92rem;
}

.participant-card-grid {
    display: grid;
    gap: 1rem;
}

.participant-card {
    border-radius: 1.15rem;
    border: 1px solid rgba(23, 38, 59, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 249, 241, 0.95));
    padding: 0.9rem;
    display: grid;
    gap: 0.85rem;
}

.planner-empty-state h2,
.planner-empty-state p {
    margin: 0;
}

.planner-empty-state p {
    max-width: 52rem;
    color: var(--planner-muted);
}

@media (max-width: 1280px) {
    .planner-grid-layout {
        gap: 1rem;
        grid-template-columns: minmax(0, 2.6fr) minmax(15rem, 0.62fr);
    }

    .planner-filter-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .planner-control-actions.wide-actions,
    .planner-teacher-field {
        grid-column: span 4;
    }
}

@media (min-width: 1680px) {
    .step-preview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .participant-schedule-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1080px) {
    .planner-grid-layout,
    .step-preview-grid,
    .participant-schedule-grid,
    .planner-hero-stats {
        grid-template-columns: 1fr;
    }

    .planner-sidebar {
        order: -1;
    }
}

@media (max-width: 720px) {
    .planner-filter-grid {
        grid-template-columns: 1fr;
    }

    .planner-control-actions,
    .planner-control-actions.wide-actions,
    .planner-teacher-field {
        grid-column: span 1;
        flex-wrap: wrap;
    }

    .selection-banner,
    .step-card,
    .participant-card-header {
        flex-direction: column;
    }

    .selection-banner-meta {
        justify-items: start;
        text-align: left;
    }
}