*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#0f1117;color:#e1e4e8}
header{background:#161b22;border-bottom:1px solid #30363d;padding:10px 20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
header h1{font-size:18px;font-weight:600;color:#58a6ff}
header select{background:#21262d;color:#c9d1d9;border:1px solid #30363d;padding:6px 12px;border-radius:6px;font-size:13px;cursor:pointer}
header select:focus{outline:none;border-color:#58a6ff}
.tabs{display:flex;gap:4px;margin-left:8px}
.tab{padding:6px 14px;border-radius:6px;font-size:13px;cursor:pointer;background:#21262d;color:#8b949e;border:1px solid #30363d;transition:all .15s}
.tab:hover{color:#c9d1d9}
.tab.active{background:#1f6feb;color:#fff;border-color:#1f6feb}
.stats{font-size:13px;color:#8b949e;margin-left:auto}
main{display:flex;height:calc(100vh - 53px)}
#sidebar{width:220px;background:#161b22;border-right:1px solid #30363d;padding:14px;overflow-y:auto;flex-shrink:0}
#sidebar h3{font-size:12px;text-transform:uppercase;color:#8b949e;margin-bottom:10px;letter-spacing:.5px}
.layer-toggle{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:4px;cursor:pointer;font-size:12px;transition:background .15s}
.layer-toggle:hover{background:#21262d}
.layer-toggle input{accent-color:#58a6ff}
.layer-toggle .dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
#view-container{flex:1;position:relative;overflow:hidden}
#view-container svg{width:100%;height:100%}
.tooltip{position:fixed;background:#21262d;border:1px solid #30363d;border-radius:6px;padding:8px 12px;font-size:12px;pointer-events:none;opacity:0;transition:opacity .15s;max-width:280px;z-index:100}
.tooltip .name{font-weight:600;color:#f0f6fc}
.tooltip .meta{color:#8b949e;margin-top:4px}
.legend{position:fixed;bottom:14px;left:234px;background:#161b22ee;border:1px solid #30363d;border-radius:8px;padding:8px 12px;font-size:11px;z-index:50}
.legend-item{display:flex;align-items:center;gap:6px;margin:2px 0}
.legend-dot{width:10px;height:10px;border-radius:50%}
.loading{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);color:#8b949e;font-size:14px;z-index:60;pointer-events:none}

/* Block view */
.block-column{flex-shrink:0;background:#161b22;border:1px solid #30363d;border-radius:8px;width:20rem;max-width:20rem;margin-right:16px}
.block-header{padding:10px 14px;font-weight:600;font-size:14px;border-bottom:1px solid #30363d}
.block-desc{padding:6px 14px;font-size:11px;color:#8b949e;border-bottom:1px solid #30363d;line-height:1.4}
.block-course{padding:8px 14px;border-bottom:1px solid #21262d;font-size:12px;cursor:pointer;transition:background .1s;display:flex;align-items:center;gap:8px}
.block-course:hover{background:#21262d}
.block-course .c-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.block-course .c-creds{color:#8b949e;font-size:11px;margin-left:auto}

/* Itinerario view */
.itin-group{margin:16px}
.itin-group h4{font-size:14px;margin-bottom:8px;color:#58a6ff}
.itin-row{display:flex;gap:8px;flex-wrap:wrap}
.itin-course{padding:6px 12px;border-radius:6px;font-size:12px;border:1px solid #30363d;background:#161b22}
.itin-course .i-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px}

/* Malla grid */
.malla-period{border:1px solid #30363d;border-radius:8px;margin-bottom:12px;overflow:hidden}
.malla-pheader{padding:10px 16px;font-weight:600;font-size:14px;background:#161b22;border-bottom:1px solid #30363d;display:flex;align-items:center;gap:12px}
.malla-pheader .p-name{color:#58a6ff}
.malla-pheader .p-meta{color:#8b949e;font-size:12px;margin-left:auto}
.malla-courses{display:flex;flex-wrap:wrap;gap:8px;padding:12px}
.malla-course{width:180px;padding:10px 12px;border-radius:6px;border:1px solid #30363d;background:#21262d;font-size:12px;cursor:pointer;transition:all .15s;position:relative}
.malla-course:hover{border-color:#58a6ff;transform:translateY(-1px)}
.malla-course .m-name{font-weight:500;margin-bottom:4px;line-height:1.3}
.malla-course .m-meta{color:#8b949e;font-size:10px;display:flex;gap:6px;flex-wrap:wrap}
.malla-course .m-tag{background:#30363d33;padding:1px 6px;border-radius:3px;font-size:10px}
.malla-course .m-stripe{position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:6px 0 0 6px}
.malla-course .m-prereq{font-size:10px;color:#f0883e;margin-top:4px}