.course-comment{background:#fff;box-shadow:0 4px 16px #0000001a;border-radius:16px;border:1px solid rgba(0,0,0,.06);padding:1.5rem;margin-bottom:1.5rem;transition:all .3s ease}.course-comment:hover{box-shadow:0 8px 32px #0000001f}.course-comment .comment-header{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}.course-comment .username{font-family:Outfit,Noto Sans TC,system-ui,-apple-system,sans-serif;font-weight:600;font-size:clamp(1rem,.9rem + .5vw,1.125rem);color:#8b2252}.course-comment .date{font-family:Outfit,Noto Sans TC,system-ui,-apple-system,sans-serif;font-size:clamp(.875rem,.8rem + .35vw,1rem);color:#6b7280}.course-comment .grade{width:48px;height:48px;background:linear-gradient(135deg,#8b2252,#6b1a3f);border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;font-family:JetBrains Mono,SF Mono,Fira Code,monospace;font-weight:700;font-size:clamp(1.125rem,1rem + .625vw,1.25rem);box-shadow:0 2px 8px #00000014}.course-comment .comment-body p{font-family:Outfit,Noto Sans TC,system-ui,-apple-system,sans-serif;font-size:clamp(1rem,.9rem + .5vw,1.125rem);line-height:1.625;color:#1a1d23;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.course-comment hr{border:none;border-top:1px solid #e5e7eb;margin:1rem 0}.course-comment .comment-meta{display:flex;gap:1.5rem;flex-wrap:wrap}.course-comment .comment-meta .meta-item{font-family:Outfit,Noto Sans TC,system-ui,-apple-system,sans-serif;font-size:clamp(.875rem,.8rem + .35vw,1rem);color:#6b7280}.course-comment .comment-meta .meta-item strong{font-weight:600;color:#1a1d23}.course-comment .comment-actions{display:flex;gap:1rem;margin-top:1rem}.course-comment .comment-actions button{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem 1rem;font-family:Outfit,Noto Sans TC,system-ui,-apple-system,sans-serif;font-size:clamp(.875rem,.8rem + .35vw,1rem);font-weight:500;color:#6b7280;background:transparent;border:1px solid #e5e7eb;border-radius:8px;cursor:pointer;transition:all .25s ease}.course-comment .comment-actions button:hover{background:#8b22521a;color:#8b2252;border-color:#8b22521a}.course-comment .comment-actions button.active{background:#8b2252;color:#fff;border-color:#8b2252}.course-comments{background:linear-gradient(180deg,#f5f6f8,#fafbfc);padding-top:3rem;padding-bottom:4rem}.course-comments h3{font-family:"DM Serif Display","Noto Serif TC",Georgia,serif;font-weight:700;color:#8b2252;font-size:clamp(1.875rem,1.5rem + 1.875vw,2.5rem);letter-spacing:-.025em;margin-bottom:2rem}@media screen and (max-width:768px){.course-comments h3{font-size:clamp(1.5rem,1.25rem + 1.25vw,2rem)}}.course-comments .sort-image{opacity:.6;transition:opacity .2s ease}.course-comments .sort-image:hover{opacity:1}@media(max-width:640px){.course-comments .sort-image{width:22px;height:22px}}.course-comments .dropdown{position:relative;cursor:pointer}.course-comments .dropdown .chosen-type{background:#fff;border-radius:12px;box-shadow:0 2px 8px #00000014;border:1px solid #e5e7eb;padding:.625rem 1rem;font-family:Outfit,Noto Sans TC,system-ui,-apple-system,sans-serif;font-weight:500;font-size:clamp(.875rem,.8rem + .35vw,1rem);transition:all .25s ease}.course-comments .dropdown .chosen-type:hover{border-color:#8b2252;box-shadow:0 4px 16px #0000001a}.course-comments .dropdown .arrow{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #6b7280;transition:transform .25s ease}.course-comments .dropdown:hover .arrow{border-top-color:#8b2252}.course-comments .dropdown ul{position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%);background:#fff;border-radius:12px;box-shadow:0 8px 32px #0000001f;border:1px solid #e5e7eb;z-index:10;display:none;min-width:150px;padding:.5rem 0;opacity:0;transition:opacity .2s ease}.course-comments .dropdown ul li{cursor:pointer;padding:.625rem 1rem;font-family:Outfit,Noto Sans TC,system-ui,-apple-system,sans-serif;font-size:clamp(.875rem,.8rem + .35vw,1rem);transition:background .2s ease}.course-comments .dropdown ul li:hover{background:#8b22521a}.course-comments .dropdown ul li:hover p{color:#8b2252}.course-comments .dropdown ul li p{transition:color .2s ease}.course-comments .dropdown ul.active{display:block;opacity:1}.course-comments .comment-card{background:#fff;border-radius:16px;box-shadow:0 2px 8px #00000014;border:1px solid rgba(0,0,0,.06);padding:1.5rem;transition:all .3s ease}.course-comments .comment-card:hover{box-shadow:0 4px 16px #0000001a}.course-comments .pagination{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:2.5rem;padding-top:2rem;border-top:1px solid #e5e7eb}@media screen and (max-width:640px){.course-comments .pagination{gap:.25rem}}.course-comments .pagination-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:#fff;border:1px solid #e5e7eb;cursor:pointer;transition:all .25s ease}@media screen and (max-width:640px){.course-comments .pagination-btn{width:38px;height:38px;border-radius:10px}}.course-comments .pagination-btn:hover:not(:disabled){background:#8b2252;border-color:#8b2252}.course-comments .pagination-btn:hover:not(:disabled) .arrow-left,.course-comments .pagination-btn:hover:not(:disabled) .arrow-right{border-color:#fff}.course-comments .pagination-btn:disabled{opacity:.4;cursor:not-allowed}.course-comments .pagination-btn .arrow-left,.course-comments .pagination-btn .arrow-right{width:8px;height:8px;border:solid #6b7280;border-width:0 2px 2px 0;transition:border-color .25s ease}.course-comments .pagination-btn .arrow-left{transform:rotate(135deg);margin-left:2px}.course-comments .pagination-btn .arrow-right{transform:rotate(-45deg);margin-right:2px}.course-comments .pagination-pages{display:flex;align-items:center;gap:.25rem}@media screen and (max-width:640px){.course-comments .pagination-pages{gap:.125rem}}.course-comments .pagination-page{display:flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 .5rem;border-radius:12px;background:#fff;border:1px solid #e5e7eb;font-family:Outfit,Noto Sans TC,system-ui,-apple-system,sans-serif;font-size:clamp(.875rem,.8rem + .35vw,1rem);font-weight:500;color:#6b7280;cursor:pointer;transition:all .25s ease}@media screen and (max-width:640px){.course-comments .pagination-page{min-width:38px;height:38px;border-radius:10px;font-size:clamp(.75rem,.7rem + .25vw,.875rem)}}.course-comments .pagination-page:hover:not(.active){border-color:#8b2252;color:#8b2252}.course-comments .pagination-page.active{background:#8b2252;border-color:#8b2252;color:#fff;font-weight:600;box-shadow:0 4px 12px #8b225240}.course-comments .pagination-ellipsis{display:flex;align-items:center;justify-content:center;min-width:32px;height:44px;font-family:Outfit,Noto Sans TC,system-ui,-apple-system,sans-serif;font-size:clamp(.875rem,.8rem + .35vw,1rem);color:#9ca3af;letter-spacing:.1em}@media screen and (max-width:640px){.course-comments .pagination-ellipsis{min-width:24px;height:38px}}.course-assess .assess-title{font-family:Outfit,Noto Sans TC,system-ui,-apple-system,sans-serif;font-weight:600;color:#1a1d23;font-size:clamp(1.125rem,1rem + .625vw,1.25rem);margin-bottom:.75rem}.course-assess .assess-items{display:flex;flex-wrap:wrap;gap:.5rem}.course-assess .tick .assess-text{font-family:Outfit,Noto Sans TC,system-ui,-apple-system,sans-serif;font-size:clamp(.875rem,.8rem + .35vw,1rem);font-weight:500;color:#10b981}.course-assess .tick .icon{height:18px;width:18px;position:relative;float:left;margin-right:.25rem}.course-assess .tick .icon .line-1{position:absolute;bottom:5px;left:5px;width:12px;height:2px;background-color:#10b981;transform:rotate(310deg);border-radius:1px}.course-assess .tick .icon .line-2{position:absolute;bottom:3px;left:2px;width:7px;height:2px;background-color:#10b981;transform:rotate(45deg);border-radius:1px}.course-assess .cross .assess-text{font-family:Outfit,Noto Sans TC,system-ui,-apple-system,sans-serif;font-size:clamp(.875rem,.8rem + .35vw,1rem);font-weight:500;color:#9ca3af}.course-assess .cross .icon{height:18px;width:18px;position:relative;float:left;margin-right:.25rem}.course-assess .cross .icon .line-1{position:absolute;top:50%;left:50%;width:14px;height:2px;background-color:#9ca3af;transform:translate(-50%,-50%) rotate(45deg);border-radius:1px}.course-assess .cross .icon .line-2{position:absolute;top:50%;left:50%;width:14px;height:2px;background-color:#9ca3af;transform:translate(-50%,-50%) rotate(-45deg);border-radius:1px}.course-assess.alt .assess-title{font-size:clamp(1.25rem,1.1rem + .75vw,1.5rem);margin-bottom:1rem}.course-assess.alt .assess-items>div{margin-bottom:.5rem}@media(min-width:1024px){.course-assess.alt .assess-items>div{width:100%}}.result-chart{height:300px;position:relative}.result-chart canvas{border-radius:8px}#chartjs-tooltip{background:#1a1d23!important;border-radius:8px!important;padding:.5rem .75rem!important;font-family:Outfit,Noto Sans TC,system-ui,-apple-system,sans-serif!important;font-size:clamp(.875rem,.8rem + .35vw,1rem)!important;box-shadow:0 8px 32px #0000001f!important}#chartjs-tooltip:before{border-bottom-color:#1a1d23!important}.course-detail{background:linear-gradient(180deg,#f5f6f8,#fafbfc)}.course-detail h3{font-family:"DM Serif Display","Noto Serif TC",Georgia,serif;font-weight:700;color:#8b2252;letter-spacing:-.025em}.course-detail .course-bs{background:#fff;box-shadow:0 4px 16px #0000001a;border-radius:16px;border:1px solid rgba(0,0,0,.06);transition:all .3s ease}.course-detail .course-bs:hover{box-shadow:0 8px 32px #0000001f}.course-detail .course-bs p.text-2xl{font-family:Outfit,Noto Sans TC,system-ui,-apple-system,sans-serif;font-weight:600;font-size:clamp(1.125rem,1rem + .625vw,1.25rem);color:#1a1d23}@media screen and (max-width:768px){.course-detail .course-bs p.text-2xl{font-size:clamp(1rem,.9rem + .5vw,1.125rem)}}.course-detail .course-bs ul li p{font-family:JetBrains Mono,SF Mono,Fira Code,monospace;font-weight:500;color:#6b7280}.course-detail .circular-load-chart{width:120px;height:95px;position:relative;overflow:hidden}.course-detail .circular-load-chart .chart-detail{position:absolute;top:18px;left:-2.5px}.course-detail .circular-load-chart .chart-detail .load-text{font-family:JetBrains Mono,SF Mono,Fira Code,monospace;font-size:clamp(1.5rem,1.25rem + 1.25vw,2rem);line-height:1;color:#8b2252;font-weight:700}.course-detail .circular-load-chart .chart-detail .load-limit{font-family:JetBrains Mono,SF Mono,Fira Code,monospace;font-size:clamp(1.125rem,1rem + .625vw,1.25rem);color:#9ca3af;font-weight:500}.course-detail .circular-load-chart .load-circle{transform:rotate(150deg)}.course-detail .circular-load-chart .load-circle circle{fill:none;stroke-width:5;stroke:#f5f6f8;transform:translate(5px,5px);stroke-dasharray:345;stroke-dashoffset:345;stroke-linecap:round}.course-detail .circular-load-chart .load-circle circle:nth-child(1){stroke:#f5f6f8;stroke-dashoffset:116}.course-detail .circular-load-chart .load-circle circle:nth-child(2){stroke:#8b2252;transition:stroke-dashoffset 1s cubic-bezier(.4,0,.2,1)}.course-detail .loading-container{height:300px;display:flex;justify-content:center;align-items:center}.course-detail .loading-container img{height:60px;animation:pulse 1.5s ease-in-out infinite}.course-detail .bar-chart-total{font-family:Outfit,Noto Sans TC,system-ui,-apple-system,sans-serif;font-weight:600;color:#8b2252}.course-detail .text-lg.md\:text-2xl{font-family:Outfit,Noto Sans TC,system-ui,-apple-system,sans-serif;font-weight:600}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.95)}}body,html{height:100%;font-size:16px;background-color:#fafbfc;color:#1a1d23}body{margin:0;line-height:1.5;overflow:auto;overflow-x:hidden;font-family:Outfit,Noto Sans TC,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body input:focus,body textarea:focus,body select:focus{outline:none}body h1,body .h1{font-family:"DM Serif Display","Noto Serif TC",Georgia,serif;font-size:clamp(3rem,2rem + 5vw,4.5rem);font-weight:700;line-height:1.25;letter-spacing:-.025em}body h2,body .h2{font-family:"DM Serif Display","Noto Serif TC",Georgia,serif;font-size:clamp(2.25rem,1.75rem + 2.5vw,3rem);font-weight:700;line-height:1.25;letter-spacing:-.025em}body h3,body .h3{font-family:"DM Serif Display","Noto Serif TC",Georgia,serif;font-size:clamp(1.875rem,1.5rem + 1.875vw,2.5rem);font-weight:600;line-height:1.375}body h4,body .h4{font-family:Outfit,Noto Sans TC,system-ui,-apple-system,sans-serif;font-size:clamp(1.5rem,1.25rem + 1.25vw,2rem);font-weight:600;line-height:1.375}body h5,body .h5{font-family:Outfit,Noto Sans TC,system-ui,-apple-system,sans-serif;font-size:clamp(1.25rem,1.1rem + .75vw,1.5rem);font-weight:500;line-height:1.5}body p,body span,body div{font-family:Outfit,Noto Sans TC,system-ui,-apple-system,sans-serif}body blockquote{font-family:"DM Serif Display","Noto Serif TC",Georgia,serif;font-style:italic}body img{max-width:100%;height:auto}body .course-code{font-family:JetBrains Mono,SF Mono,Fira Code,monospace;font-weight:700;letter-spacing:.025em}body a,body button{transition:all .25s cubic-bezier(.4,0,.2,1)}body a{color:#8b2252;text-decoration:none}body a:hover{color:#a8466f}.in-development{display:none!important}.btn{display:inline-flex;align-items:center;justify-content:center;padding:.75rem 1.5rem;font-family:Outfit,Noto Sans TC,system-ui,-apple-system,sans-serif;font-weight:600;font-size:clamp(.875rem,.8rem + .35vw,1rem);border-radius:10px;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);border:none}.btn-primary{background:#8b2252;color:#fff}.btn-primary:hover{background:#a8466f;transform:translateY(-2px);box-shadow:0 4px 16px #0000001a}.btn-primary:active{transform:translateY(0)}.btn-secondary{background:transparent;color:#8b2252;border:2px solid #8b2252}.btn-secondary:hover{background:#8b22521a;transform:translateY(-2px)}.btn-ghost{background:transparent;color:#1a1d23}.btn-ghost:hover{background:#0000000d}.input{width:100%;padding:.875rem 1rem;font-family:Outfit,Noto Sans TC,system-ui,-apple-system,sans-serif;font-size:clamp(1rem,.9rem + .5vw,1.125rem);background:#fff;border:2px solid #e5e7eb;border-radius:10px;transition:all .25s cubic-bezier(.4,0,.2,1)}.input::-moz-placeholder{color:#9ca3af}.input::placeholder{color:#9ca3af}.input:focus{border-color:#8b2252;box-shadow:0 0 0 4px #8b22521a}.input:hover:not(:focus){border-color:#9ca3af}.card{background:#fff;border-radius:16px;box-shadow:0 2px 8px #00000014;border:1px solid rgba(0,0,0,.06);transition:all .3s cubic-bezier(.4,0,.2,1)}.card:hover{box-shadow:0 4px 16px #0000001a;transform:translateY(-4px)}.card-elevated{box-shadow:0 4px 16px #0000001a}.card-elevated:hover{box-shadow:0 8px 32px #0000001f}.course-hero{background:linear-gradient(135deg,#fdf5f7,#fff);padding-top:3rem;padding-bottom:3rem;position:relative}.course-hero:before{content:"";position:absolute;top:0;right:0;width:50%;height:100%;background:radial-gradient(circle at 80% 20%,rgba(139,34,82,.05) 0%,transparent 50%);pointer-events:none}.course-hero .course-content{position:relative;z-index:1}.course-hero .course-content .course-head{margin-bottom:2rem}.course-hero .course-content .course-head .course-code{font-family:JetBrains Mono,SF Mono,Fira Code,monospace;font-weight:700;font-size:clamp(3rem,2rem + 5vw,4.5rem);letter-spacing:.025em;color:#8b2252;line-height:1;margin-bottom:.75rem}@media screen and (max-width:768px){.course-hero .course-content .course-head .course-code{font-size:clamp(2.25rem,1.75rem + 2.5vw,3rem)}}.course-hero .course-content .course-head .course-title{font-family:Outfit,Noto Sans TC,system-ui,-apple-system,sans-serif;font-size:clamp(1.5rem,1.25rem + 1.25vw,2rem);font-weight:500;color:#8b2252;line-height:1.375}@media screen and (max-width:768px){.course-hero .course-content .course-head .course-title{font-size:clamp(1.25rem,1.1rem + .75vw,1.5rem)}}.course-hero .course-content .course-info{background:transparent}.course-hero .course-content .course-info p{font-family:Outfit,Noto Sans TC,system-ui,-apple-system,sans-serif;font-size:clamp(1rem,.9rem + .5vw,1.125rem);color:#1a1d23;line-height:1.625}.course-hero .related-links li{background:#fff;box-shadow:0 4px 16px #0000001a;border-radius:12px;border:1px solid rgba(0,0,0,.06);transition:all .3s ease}.course-hero .related-links li:hover{transform:translateY(-2px);box-shadow:0 8px 32px #0000001f}.course-hero .related-links li a{font-family:Outfit,Noto Sans TC,system-ui,-apple-system,sans-serif;font-weight:500}