/* Portal-aligned document cards */
.header-actions { display: flex; align-items: center; gap: .65rem; }
.source-link { display: inline-flex; align-items: center; gap: .45rem; padding: .48rem .7rem; border: 1px solid var(--line); color: var(--cyan); font: 500 .58rem var(--mono); letter-spacing: .08em; clip-path: polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px); }
.source-link span { color: var(--pink); }
.source-link:hover { color: #0a0616; background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 14px rgba(180,85,255,.2); }
.source-link:hover span { color: #0a0616; }
.classroom-link { display: inline-flex; align-items: center; gap: .45rem; padding: .48rem .7rem; background: var(--acid); color: #0a0616; font: 700 .58rem var(--mono); letter-spacing: .08em; clip-path: polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px); }
.classroom-link:hover { box-shadow: 0 0 16px rgba(255,176,0,.25); }
.course-main { max-width: 940px; }
.doc-status { margin-bottom: 1rem; }
.resource-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0 0 2.4rem; }
.resource-nav a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .5rem; padding: .7rem .75rem; background: rgba(180,85,255,.025); border: 1px solid var(--line); color: #9a91b5; font: 500 .6rem var(--mono); text-transform: uppercase; clip-path: polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px); }
.resource-nav a b { font-size: .48rem; color: var(--pink); }
.resource-nav a i { font-style: normal; color: #574b6e; }
.resource-nav a:hover,.resource-nav a.active { background: var(--cyan); border-color: var(--cyan); color: #0a0616; box-shadow: 0 0 16px rgba(180,85,255,.18); }
.resource-nav a:hover b,.resource-nav a:hover i,.resource-nav a.active b,.resource-nav a.active i { color: #0a0616; }
.week-nav { position: sticky; top: 78px; z-index: 8; display: flex; align-items: center; gap: 1rem; margin: -1rem 0 2rem; padding: .65rem .75rem; border: 1px solid rgba(180,85,255,.2); background: rgba(16,10,30,.94); backdrop-filter: blur(14px); box-shadow: 0 10px 24px rgba(10,6,22,.55); }
.week-nav-label { flex: 0 0 auto; color: var(--pink); font: 500 .54rem var(--mono); letter-spacing: .12em; }
.week-nav-links { display: grid; grid-template-columns: repeat(10,minmax(32px,1fr)); gap: 4px; width: 100%; }
.week-nav-links a { display: grid; min-height: 32px; place-items: center; border: 1px solid transparent; color: #7e7598; font: 500 .58rem var(--mono); }
.week-nav-links a:hover { border-color: var(--cyan); color: var(--cyan); background: rgba(180,85,255,.06); }
.week-nav-links a.active { background: var(--pink); color: #1a0a20; box-shadow: 0 0 14px rgba(255,43,214,.25); }
.lesson-pagination { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 2rem; }
.lesson-pagination.only-next a { grid-column: 2; }
.lesson-pagination a { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; border: 1px solid var(--line); background: rgba(180,85,255,.025); color: var(--white); }
.lesson-pagination a:hover { border-color: var(--cyan); background: rgba(180,85,255,.07); }
.lesson-pagination .lesson-next { justify-content: flex-end; text-align: right; }
.lesson-pagination i { color: var(--cyan); font: normal 1.1rem var(--mono); }
.lesson-pagination span { display: grid; font: 600 .75rem var(--sans); }
.lesson-pagination small { margin-bottom: .15rem; color: #756c8e; font: 500 .5rem var(--mono); letter-spacing: .1em; }
.code-frame { margin: 1.8rem 0; border: 1px solid rgba(180,85,255,.24); background: #0d0816; box-shadow: 8px 8px 0 rgba(180,85,255,.035); }
.code-toolbar { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 1rem; min-height: 54px; padding: .55rem .65rem .55rem 1rem; border-bottom: 1px solid var(--line); background: linear-gradient(90deg,rgba(180,85,255,.07),rgba(255,43,214,.035)); }
.code-window-controls { display: flex; gap: 6px; }
.code-window-controls i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; box-shadow: 0 0 7px rgba(255,95,87,.25); }
.code-window-controls i:nth-child(2) { background: #febc2e; box-shadow: 0 0 7px rgba(254,188,46,.2); }
.code-window-controls i:nth-child(3) { background: #ff8a00; box-shadow: 0 0 7px rgba(255,138,0,.2); }
.code-meta { display: flex; min-width: 0; align-items: center; gap: .7rem; }
.code-title { display: grid; min-width: 0; gap: .15rem; }
.code-meta strong { overflow: hidden; color: var(--white); font: 600 .64rem var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.code-title small { overflow: hidden; color: #867da0; font: 400 .54rem var(--sans); text-overflow: ellipsis; white-space: nowrap; }
.code-meta span { flex: 0 0 auto; padding: .15rem .35rem; border: 1px solid rgba(255,43,214,.35); color: var(--pink); font: 500 .47rem var(--mono); }
.code-copy { flex: 0 0 auto; padding: .52rem .7rem; border: 1px solid var(--cyan); background: transparent; color: var(--cyan); font: 500 .54rem var(--mono); letter-spacing: .06em; cursor: pointer; }
.code-copy:hover,.code-copy:focus-visible { background: var(--cyan); color: #0a0616; outline: none; }
.code-copy.copied { border-color: var(--acid); background: rgba(255,176,0,.1); color: var(--acid); }
.code-body { display: grid; grid-template-columns: auto minmax(0,1fr); max-height: 680px; overflow: auto; background: #0d0816; }
.code-line-numbers { position: sticky; left: 0; z-index: 2; min-width: 48px; margin: 0; padding: 1.2rem .75rem 1.2rem 0; border-right: 1px solid rgba(139,130,166,.13); background: #100a1e; color: #4a3a5f; font: 400 .78rem/1.75 var(--mono); text-align: right; list-style-position: inside; user-select: none; }
.code-line-numbers li { height: 1.75em; padding: 0; color: inherit; font-size: inherit; }
.markdown-body .code-frame pre { min-width: max-content; margin: 0; padding: 1.2rem 1.35rem; border: 0; box-shadow: none; background: transparent; }
.markdown-body .code-frame pre code { display: block; color: #cfc6e0; font-size: .78rem; line-height: 1.75; tab-size: 4; }
.code-frame .highlight { background: transparent; }
.code-frame .c,.code-frame .c1,.code-frame .cm { color: #7e7598; font-style: italic; }
.code-frame .cp,.code-frame .cpf { color: #ff7ab2; }
.code-frame .k,.code-frame .kd,.code-frame .kn,.code-frame .kr { color: #ff7ab2; font-weight: 500; }
.code-frame .kt,.code-frame .nc { color: #a78bfa; }
.code-frame .nf,.code-frame .fm { color: #d2a8ff; }
.code-frame .s,.code-frame .s1,.code-frame .s2,.code-frame .sc { color: #c4b5fd; }
.code-frame .m,.code-frame .mi,.code-frame .mf { color: #8b5cf6; }
.code-frame .o,.code-frame .ow { color: #ff7ab2; }
.code-frame .nb,.code-frame .bp { color: #ffa657; }
.code-frame .p { color: #a79fc0; }
.code-description-source { display: none; }
.doc-hero { position: relative; padding: clamp(1.5rem,4vw,3rem); margin-bottom: 1rem; background: linear-gradient(135deg,rgba(20,13,36,.98),rgba(13,8,24,.98)); border: 1px solid var(--line); clip-path: polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px); }
.doc-hero::before { content: "COURSE_DOCUMENT"; display: block; margin-bottom: 1.2rem; color: var(--pink); font: 500 .55rem var(--mono); letter-spacing: .2em; }
.doc-hero::after { content: ""; position: absolute; left: 20px; top: 0; width: 110px; height: 2px; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.doc-section { position: relative; margin: 12px 0; padding: clamp(1.3rem,3vw,2.4rem); background: linear-gradient(145deg,rgba(18,12,32,.9),rgba(10,6,22,.94)); border: 1px solid rgba(180,85,255,.13); clip-path: polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px); }
.doc-section:hover { border-color: rgba(180,85,255,.3); }
.doc-section::before { content: ""; position: absolute; left: 12px; top: 0; width: 42px; height: 1px; background: var(--pink); box-shadow: 0 0 8px var(--pink); }
.markdown-body .doc-section h2 { font-size: clamp(1.45rem,3vw,2.15rem); margin: 0 0 1.2rem; }
@media (max-width:800px) { .resource-nav { grid-template-columns: repeat(2,1fr); } .week-nav { align-items: flex-start; flex-direction: column; } .week-nav-links { grid-template-columns: repeat(5,1fr); } }
@media (max-width:620px) { .classroom-link { font-size: 0; } .classroom-link span { font-size: .72rem; } }
@media (max-width:520px) { .resource-nav a { padding: .65rem .55rem; } .doc-hero,.doc-section { clip-path: none; } .header-actions { gap: .4rem; } .source-link { padding: .45rem .55rem; } .lesson-pagination { grid-template-columns: 1fr; } .lesson-pagination.only-next a { grid-column: 1; } .code-toolbar { grid-template-columns: minmax(0,1fr) auto; } .code-window-controls,.code-title small { display: none; } .code-meta { gap: .4rem; } .code-copy { padding: .48rem .55rem; font-size: .48rem; } }