.learning-path-root{min-height:100%;background:#18191c;color:#e8eaee;font-family:system-ui,-apple-system,'Microsoft YaHei',sans-serif;color-scheme:dark}
.path-page{width:100%;max-width:none;margin:auto;padding:20px clamp(16px,2vw,32px) 32px;box-sizing:border-box}
.path-heading,.path-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.path-heading{margin-bottom:14px}.path-heading h1{font-size:25px;margin:2px 0 5px;color:#f3f5f7}
.path-heading p{margin:0;color:#a7b2c0;font-size:12px}.path-heading .path-kicker{color:#81a9d5;font-size:10px;letter-spacing:.15em;font-weight:700}
#path-refresh{border:1px solid #52606b;border-radius:9px;background:#282d33;color:#e1ebf3;padding:8px 13px;cursor:pointer;white-space:nowrap;font-size:12px}
#path-refresh:hover{background:#36404b}.path-summary{margin:0 0 15px;font-size:12px;color:#b7d0dc}
.path-layout{display:grid;grid-template-columns:minmax(0,1fr) clamp(255px,22%,340px);align-items:stretch;gap:18px}
.path-card{background:#25272c;border:1px solid #363b43;border-radius:13px;box-shadow:0 5px 22px rgba(0,0,0,.12)}
.path-graph-section{min-width:0;padding:18px 18px 12px}.path-section-head h2{font-size:16px;color:#f0f3f7;margin:0 0 6px}
.path-section-head p{font-size:11px;line-height:1.5;color:#a4afbb;margin:0}
.path-legend{display:flex;flex-wrap:wrap;gap:10px;font-size:11px;color:#d2dce6;white-space:nowrap}
.path-legend span{display:inline-flex;align-items:center;gap:5px}.path-legend span:before{content:"";width:11px;height:11px;border-radius:50%;display:inline-block}
.path-legend-learned:before{background:#21af97;border:2px solid #c4ffec}.path-legend-unlearned:before{background:#3c4755;border:2px solid #a1aab7}
.path-graph-wrap{height:clamp(620px,78vh,920px);min-height:420px;position:relative;border:1px solid #3b424b;background:radial-gradient(circle at 50% 45%,#2d333b 0,#1c2025 68%);border-radius:10px;margin-top:16px;overflow:hidden}
#path-chart{width:100%;height:100%}#path-empty{position:absolute;inset:0;display:grid;place-items:center;padding:26px;text-align:center;color:#bdcbd8;font-size:13px;pointer-events:none}
#path-empty[hidden]{display:none}.path-hint,.path-quality,.path-status{font-size:11px;color:#a5afba;line-height:1.7}.path-hint{margin:10px 0 0}
.path-recommend{display:flex;flex-direction:column;min-height:0;max-height:1030px;padding:18px 0 0;overflow:hidden}
.path-recommend .path-section-head{padding:0 17px 15px;flex:none;border-bottom:1px solid #3c414a}
#path-recommendations{overflow-y:auto;min-height:0;flex:1;margin:0;padding:6px 13px 15px 17px;list-style:none;overscroll-behavior:contain}
#path-recommendations::-webkit-scrollbar{width:7px}#path-recommendations::-webkit-scrollbar-thumb{background:#596673;border-radius:5px}
.path-rec{display:flex;align-items:flex-start;gap:11px;padding:12px 3px;border-bottom:1px solid #373d44}.path-rank{color:#8cbed5;font-size:13px;font-variant-numeric:tabular-nums;line-height:20px}
.path-rec-content{display:grid;gap:5px;min-width:0}.path-rec-content strong{font-size:12px;font-weight:600;color:#edf3f6;overflow-wrap:anywhere}
.path-rec-content span{font-size:11px;color:#a8b5c1}.path-rec-empty{padding:15px;color:#aab8c7;font-size:12px}
.path-quality{margin:15px 2px 0}.path-status{margin:6px 2px 0}
body:has(#learning-path-root) .learning-path-link{background:#303030}
@media(max-width:980px){.path-layout{grid-template-columns:1fr}.path-recommend{max-height:350px}.path-graph-wrap{height:460px}}
@media(max-width:650px){.path-page{padding:20px 15px}.path-graph-section{padding:14px}.path-graph-wrap{height:430px}.path-section-head{align-items:flex-start;flex-direction:column}}