body, html { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; font-family: 'Segoe UI', sans-serif; background-color: #f8fafc; }
#viewport { width: 100%; height: 100%; cursor: grab; background-image: radial-gradient(#cbd5e1 1px, transparent 1px); background-size: 20px 20px; }
#world { position: absolute; transform-origin: 0 0; display: flex; padding: 100px; gap: 120px; pointer-events: none; }
.semester-column { pointer-events: auto; width: 280px; flex-shrink: 0; background: rgba(255, 255, 255, 0.95); border-radius: 16px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); backdrop-filter: blur(8px); border: 1px solid #e2e8f0; display: flex; flex-direction: column; z-index: 10; }
.subject-card { transition: all 0.2s; border-left: 5px solid transparent; user-select: none; z-index: 20; background: white; margin-bottom: 12px; border: 1px solid #f1f5f9; padding: 12px; border-radius: 8px; }
.subject-card:hover { transform: scale(1.05); z-index: 100; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); }
.type-DC { border-left-color: #64748b; } .badge-DC { background: #f1f5f9; color: #475569; }
.type-CSN { border-left-color: #3b82f6; } .badge-CSN { background: #dbeafe; color: #1e40af; }
.type-CN { border-left-color: #8b5cf6; } .badge-CN { background: #ede9fe; color: #5b21b6; }
.type-CNTC { border-left-color: #14b8a6; } .badge-CNTC { background: #ccfbf1; color: #0f766e; }
.type-DA, .type-TTTN, .type-KLTN { border-left-color: #ef4444; } .badge-DA, .badge-TTTN, .badge-KLTN { background: #fee2e2; color: #991b1b; }
.highlight-target { box-shadow: 0 0 0 3px #ef4444 !important; }
.highlight-source { box-shadow: 0 0 0 3px #3b82f6 !important; }
#connections-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; overflow: visible; }
.connection-line { fill: none; stroke-width: 2px; transition: all 0.3s; opacity: 0.2; }
.connection-line.active { opacity: 1; stroke-width: 4px; z-index: 100; }
#subject-tooltip { position: fixed; background: white; border: 1px solid #e2e8f0; padding: 12px; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); z-index: 1000; max-width: 280px; pointer-events: none; }
.tooltip-title { font-weight: 700; color: #1e293b; border-bottom: 1px solid #f1f5f9; padding-bottom: 4px; }
.tooltip-info { font-size: 11px; color: #64748b; margin: 4px 0 8px; }
.pre-item { display: block; background: #eff6ff; color: #2563eb; padding: 2px 6px; border-radius: 4px; margin: 2px 0; font-size: 10px; border: 1px solid #dbeafe; }
#legend, #controls { position: fixed; z-index: 1000; background: white; padding: 15px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
#legend { top: 20px; left: 20px; } #controls { bottom: 20px; right: 20px; display: flex; gap: 10px; }
.control-btn { width: 40px; height: 40px; border-radius: 8px; border: 1px solid #e2e8f0; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s; }
.control-btn:hover { background: #f8fafc; }