/* === module: topic_arrange === */
      /* ===== Topic Schedule Overlay ===== */
      .schedule-overlay {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 906;
        background: rgba(2, 2, 8, 0.9);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        justify-content: center;
        align-items: center;
        padding: 24px;
      }
      .schedule-overlay.visible { display: flex; }

      /* module-panel variant: anchored inside the main screen area, not fullscreen */
      .schedule-overlay.module-panel {
        position: absolute;
        inset: 0;
        z-index: 20;
        background: rgba(10, 10, 18, 0.82);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        padding: 16px;
      }
      .schedule-overlay.module-panel .schedule-panel {
        max-width: 100%;
        max-height: 100%;
        width: 100%;
        overflow: auto;
        position: relative;
      }
      .module-panel-close {
        position: absolute;
        top: 8px;
        right: 10px;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.08);
        color: #aaa;
        border: 1px solid rgba(255, 255, 255, 0.1);
        font-size: 13px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
        transition: background 0.15s, color 0.15s;
      }
      .module-panel-close:hover {
        background: rgba(255, 255, 255, 0.15);
        color: #fff;
      }
      .schedule-panel {
        background: #12121a;
        border: 1px solid #2a2a3a;
        border-radius: 16px;
        max-width: 780px;
        width: 100%;
        animation: panelSlideIn 0.35s ease;
      }
      .schedule-header {
        padding: 24px 28px 16px;
        border-bottom: 1px solid #222;
        text-align: center;
      }
      .schedule-header h2 { font-size: 18px; font-weight: 700; color: #e0e0e0; margin: 0 0 4px; }
      .schedule-header p { font-size: 12px; color: #777; margin: 0; }
      .schedule-slots {
        display: flex;
        gap: 8px;
        padding: 20px 24px 12px;
        justify-content: center;
      }
      .schedule-slot {
        flex: 1;
        min-height: 72px;
        background: #1a1a26;
        border: 2px dashed #333;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: default;
        transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
        padding: 8px;
        position: relative;
      }
      .schedule-slot.filled {
        border-style: solid;
        border-color: #4a6fa5;
        background: #1a2236;
      }
      /* Drag & Drop states */
      .schedule-slot.drag-over {
        border-color: #5a8fc5;
        background: #1a2842;
        box-shadow: 0 0 12px #5a8fc530;
      }
      .schedule-slot.drag-invalid {
        border-color: #c92a2a;
        background: #2a1a1a;
        box-shadow: 0 0 12px #c92a2a30;
      }
      .schedule-slot .slot-label {
        font-size: 10px;
        color: #666;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 4px;
      }
      .schedule-slot .slot-topic {
        font-size: 13px;
        color: #ddd;
        font-weight: 600;
        cursor: grab;
        padding: 4px 8px;
        border-radius: 6px;
        transition: background 0.15s;
      }
      .schedule-slot .slot-topic:hover {
        background: #ffffff10;
      }
      .schedule-slot .slot-topic:active {
        cursor: grabbing;
      }
      .schedule-slot .slot-empty {
        font-size: 12px;
        color: #444;
      }
      .schedule-slot .slot-hint {
        font-size: 9px;
        color: #666;
        margin-top: 2px;
        opacity: 0;
        transition: opacity 0.2s;
      }
      .schedule-slot.filled:hover .slot-hint {
        opacity: 1;
      }
      .schedule-pool-label {
        padding: 0 28px;
        font-size: 11px;
        color: #666;
        margin-bottom: 6px;
      }
      .schedule-pool {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 0 24px 16px;
      }
      .topic-card {
        background: #1a1a26;
        border: 1px solid #2a2a3a;
        border-radius: 8px;
        padding: 10px 14px;
        cursor: grab;
        transition: border-color 0.15s, transform 0.1s, opacity 0.2s, box-shadow 0.2s;
        min-width: 110px;
        position: relative;
      }
      .topic-card:hover { border-color: #555; transform: translateY(-1px); }
      .topic-card:active { cursor: grabbing; }
      .topic-card.dragging {
        opacity: 0.4;
        transform: scale(0.95);
      }
      .topic-card.used {
        opacity: 0.5;
        cursor: not-allowed;
      }
      .topic-card.locked {
        opacity: 0.35;
        cursor: not-allowed;
      }
      .topic-card.selected {
        border-color: #00e0ff;
        box-shadow: 0 0 12px rgba(0, 224, 255, 0.4);
        transform: scale(1.03);
      }
      .schedule-slot.slot-accepting {
        border-color: #00e0ff;
        border-style: solid;
        animation: slotPulse 1s ease infinite;
      }
      @keyframes slotPulse {
        0%, 100% { box-shadow: 0 0 4px rgba(0, 224, 255, 0.2); }
        50% { box-shadow: 0 0 12px rgba(0, 224, 255, 0.5); }
      }
      .topic-card .tc-name { font-size: 13px; font-weight: 600; color: #ddd; }
      .topic-card .tc-meta {
        font-size: 11px; color: #777; margin-top: 3px;
        display: flex; gap: 8px;
      }
      .topic-card .tc-effect { font-size: 11px; color: #999; margin-top: 4px; }
      .topic-card .tc-used-badge {
        position: absolute;
        top: 4px;
        right: 4px;
        font-size: 9px;
        padding: 2px 6px;
        border-radius: 4px;
        background: #4a6fa5;
        color: #fff;
      }
      /* Visual feedback during dragging */
      .schedule-panel.dragging-active .schedule-slot.droppable {
        border-color: #4a6fa560;
      }
      .schedule-footer {
        padding: 14px 28px 20px;
        text-align: center;
        border-top: 1px solid #222;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 16px;
      }
      .schedule-slots-remaining {
        font-size: 12px;
        color: #777;
      }
      .schedule-confirm-btn {
        background: #333;
        color: #666;
        border: none;
        padding: 10px 32px;
        border-radius: 8px;
        font-size: 14px;
        cursor: not-allowed;
        transition: background 0.2s, color 0.2s;
      }
      .schedule-confirm-btn.active {
        background: #4a6fa5;
        color: #fff;
        cursor: pointer;
        font-weight: 700;
      }
      .schedule-confirm-btn.active:hover { background: #5a8fc5; }

/* === end module: topic_arrange === */