:root{--ink:#1d1d1f;--muted:#6e6e73;--green:#0071e3;--bg:#f5f5f7;--line:#e4e7ec;--gold:#64748b}
body{font:14px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}
a{text-decoration:none}a:hover{text-decoration:underline}button,input,select,textarea{border-radius:8px;transition:border-color .16s,background .16s}button{font-weight:500}button:hover{background:#f0f6ff;border-color:#a8c9ef}button.primary{background:#0071e3;border-color:#0071e3}button.primary:hover{background:#0062c5}button:disabled{opacity:.45;cursor:not-allowed}input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{outline:3px solid #0071e326;outline-offset:2px;border-color:#0071e3}button[hidden]{display:none}
header{background:#fff;color:var(--ink);padding:0 24px;border-bottom:1px solid var(--line)}.header-inner{max-width:1280px;margin:auto}.site-nav{height:64px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #f0f0f2}.site-nav>a:last-child{font-size:13px;color:var(--muted)}.brand{font-size:18px;font-weight:700;color:#1d1d1f;letter-spacing:-.5px}.brand span{font-weight:400;color:#6e6e73;margin-left:8px}.page-heading{display:flex;justify-content:space-between;align-items:center;padding:28px 0 30px}.page-heading small{font-size:10px;letter-spacing:2px;color:#0071e3;font-weight:650}h1{font-size:30px;font-weight:650;letter-spacing:-1px;margin:5px 0 4px}header p{font-size:13px;color:var(--muted)}.trial-tag{padding:4px 10px;border:1px solid #cce1fa;border-radius:6px;color:#0071e3;background:#f1f7ff;font-size:12px}
.wrap{max-width:1328px;padding:24px 24px 40px}.toolbar{margin:0;box-shadow:none;border-radius:12px;padding:18px 20px;gap:10px 14px}.toolbar label{margin-bottom:5px;font-size:11px}.toolbar input,.toolbar select{background:#fafbfc}.save{color:#6e6e73;font-size:11px}.panel{border-radius:12px;padding:20px;box-shadow:none}.sync-panel{margin:12px 0 0;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 20px;background:#fff}.sync-info{display:flex;align-items:center;gap:16px}.sync-info strong{font-size:13px;white-space:nowrap}.sync-info p{margin:0;font-size:12px;color:var(--muted)}.sync-actions{display:flex;gap:8px;flex-wrap:wrap}.sync-actions button{font-size:12px;padding:7px 12px}#cloud-versions:empty{display:none}#cloud-versions{width:100%}
.stats{gap:14px;margin:20px 0}.stat{border-radius:12px;padding:20px 22px;position:relative}.stat:first-child{background:#eef5ff;border-color:#dce9fa}.stat strong{font-size:32px;letter-spacing:-1px;font-weight:650;color:#1d1d1f}.stat:first-child strong{color:#0071e3}.stat span{font-size:12px}.main{grid-template-columns:280px minmax(0,1fr);gap:20px}h2{font-size:16px;font-weight:650}h3{font-weight:600}.rule{padding:13px 0}.bar{height:5px;background:#edf0f5}.flag{color:#526075;background:#f1f4f8;padding:4px 8px}.warn{color:#866020;background:#fff8e9;border:1px solid #f1e3c9}.sub{line-height:1.7}.workspace{margin:0 0 12px;border:1px solid var(--line);border-radius:12px;background:#fff}.workspace>summary{padding:16px 20px;font-size:14px;color:#424245}.workspace[open]>summary{border-bottom:1px solid var(--line)}.workspace>.panel{border:0;margin:0;border-radius:0 0 12px 12px}.side button{font-size:12px;margin-bottom:12px}.filters{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px;gap:8px}.filters input,.filters select{border-color:transparent;background:#f5f5f7;font-size:13px}.course{border-radius:10px;padding:18px;background:#fff}.course.passed{border-left:3px solid #0071e3}.course.planned,.course.taking{border-left:3px solid #94a3b8}.course h3{font-size:15px;line-height:1.5}.code{color:#0071e3;letter-spacing:.6px;font-weight:600}.orig{color:#85858c}.course .controls{gap:6px}.controls select{background:#fafbfc}.eng-box.active{background:#eef5ff;border-color:#0071e3}.eng-step{background:#fafbfc}.english-table th{color:#6e6e73;font-size:12px}.english-table td,.english-table th{padding:10px 6px}footer{padding-top:18px;border-top:1px solid var(--line);font-size:11px}.toast{background:#1d1d1f;border-radius:8px;font-size:13px}
@media(max-width:950px){.main{grid-template-columns:1fr}.side{grid-template-columns:1fr 1fr}.sync-info{flex-wrap:wrap;gap:4px 12px}}
@media(max-width:650px){header{padding:0 16px}.site-nav{height:54px}.page-heading{padding:23px 0}h1{font-size:25px}.wrap{padding:16px 12px 28px}.toolbar{padding:14px;gap:10px}.toolbar>div:has(#name),.toolbar>div:has(#program){flex:1;min-width:130px}.toolbar #name,.toolbar #program{width:100%!important}.toolbar input,.toolbar select{font-size:13px}.toolbar>button{font-size:12px;padding:7px 10px}.sync-panel{padding:14px;gap:12px}.sync-info{display:block}.sync-info p{margin-top:3px}.sync-actions{width:100%}.sync-actions button{flex:1;white-space:nowrap}.stats{gap:10px;margin:16px 0}.stat{padding:15px}.stat strong{font-size:28px}.stat span{font-size:11px}.side,.courses{grid-template-columns:1fr}.panel{padding:16px}.workspace>.panel{padding:14px}.filters input{min-width:100%;}.filters select{flex:1;min-width:0}.row{flex-wrap:wrap}footer{display:flex;flex-direction:column;gap:12px}footer button{align-self:flex-start}}
@media print{.site-nav,.sync-panel,.trial-tag{display:none}header{border:0}.page-heading{padding:0}.wrap{padding:0}.workspace:not([open]){display:none}.stat:first-child{background:white}}
/* Task-focused workspace: choose courses first, inspect details on demand. */
.site-nav{justify-content:flex-start;gap:22px;height:56px}.site-nav>a:nth-child(2){margin-left:auto;font-size:12px;color:var(--muted)}.page-heading{padding:18px 0 20px}.page-heading small{display:none}h1{font-size:25px;margin:0 0 3px}.page-heading p{font-size:12px}.wrap{padding-top:14px}.toolbar{padding:0 0 14px;border:0;border-radius:0;background:transparent;gap:12px;align-items:center}.toolbar>div>label{display:none}.toolbar select{background:white;font-size:13px;padding:8px 12px}.toolbar .save{font-size:11px}.more-menu,.account-menu{position:relative;margin:0}.more-menu>summary,.account-menu>summary{list-style:none;font-size:12px;font-weight:500;cursor:pointer;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:#fff}.more-menu>summary::-webkit-details-marker,.account-menu>summary::-webkit-details-marker{display:none}.more-menu>summary:focus-visible,.account-menu>summary:focus-visible{outline:3px solid #0071e326}.more-content,#account-content{position:absolute;right:0;top:calc(100% + 8px);z-index:30;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px #18243b1a}.more-content{width:215px;padding:12px;display:flex;flex-direction:column;gap:8px}.more-content>div{padding-bottom:8px}.more-content label{display:block}.more-content #name{width:100%!important}.more-content button{text-align:left;font-size:12px;float:none!important;margin:0}.more-content #reset{color:#ba3a35;border-color:#f0dddd;font-size:11px!important}#account-content{width:340px;max-width:calc(100vw - 32px)}.sync-panel{border:0;margin:0;padding:18px;background:none}.sync-info{display:block}.sync-info p{margin-top:7px}.sync-actions{width:100%}.sync-actions button{flex:1;white-space:nowrap}
.stats{display:flex;align-items:center;gap:0;margin:0;padding:10px 0 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}.stat,.stat:first-child{display:flex;align-items:baseline;gap:7px;padding:0 22px 0 0;margin-right:22px;border:0;border-right:1px solid var(--line);border-radius:0;background:none}.stat:last-child{border-right:0;margin-right:0;padding-right:0}.stat strong{font-size:18px;letter-spacing:-.5px;line-height:1.5;white-space:nowrap}.stat strong small{font-size:12px!important}.stat span{font-size:11px;color:var(--muted)}.stat:nth-child(2){display:none}
.planner-tabs{display:flex;gap:28px;margin:0 0 22px;border-bottom:1px solid var(--line)}.planner-tabs button{border:0;border-radius:0;padding:16px 2px 13px;background:none;font-size:14px;color:var(--muted);position:relative}.planner-tabs button[aria-selected=true]{color:#0071e3;font-weight:650}.planner-tabs button[aria-selected=true]:after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:3px;background:#0071e3;border-radius:3px 3px 0 0}.planner-pane[hidden]{display:none!important}.planner-pane>.panel{margin-bottom:18px}.filters{padding:0;border:0;background:none;gap:10px;margin-bottom:12px}.filters input,.filters select{border:1px solid var(--line);background:#fff;padding:10px 12px}.filters input{min-width:200px}.planner-pane>label{display:inline-block;font-size:12px;color:var(--muted);margin:0!important}#count{float:right;margin:4px 0 12px;font-size:12px}.courses{clear:both;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.course{box-shadow:none}.course h3{font-size:14px}.course .pre{font-size:11px}.course .orig{font-size:11px}.course .controls{flex-wrap:wrap}.course .controls select{flex:1;min-width:0}#pane-progress{display:grid;grid-template-columns:1fr 1fr;gap:18px}#pane-progress>.panel{margin:0}#english-workspace,#pane-progress>.panel:last-child{grid-column:1/-1}#pane-plan>.panel:first-child{background:transparent;border:0;padding:0 0 18px;border-bottom:1px solid var(--line);border-radius:0}footer{margin-top:32px;display:block}.source-notes{margin:0 0 14px}.source-notes summary{font-weight:500;font-size:12px}.source-notes p{max-width:900px}
@media(max-width:1050px){.courses{grid-template-columns:repeat(2,minmax(0,1fr))}.stat{margin-right:14px;padding-right:14px}.stat span{font-size:10px}}
@media(max-width:650px){.site-nav{height:52px;gap:12px}.brand{font-size:16px}.brand span{margin-left:4px}.site-nav>a:nth-child(2){font-size:11px}.account-menu>summary{padding:6px 8px;font-size:11px}.page-heading{padding:14px 0 16px}h1{font-size:23px}.wrap{padding-top:12px}.toolbar{gap:8px;padding-bottom:12px;flex-wrap:wrap}.toolbar>div:has(#program){flex:1;min-width:130px}.toolbar>div:has(#identity){flex:0 1 auto}.toolbar .grow{display:none}.toolbar .save{display:none}.toolbar select{padding:8px;font-size:12px}.toolbar .more-menu{margin-left:auto}.more-menu>summary{padding:8px;font-size:12px}.stats{padding:3px 0 12px;gap:9px}.stat,.stat:first-child{border:0;margin:0;padding:0;gap:5px}.stat strong{font-size:16px}.stat span{font-size:10px}.stat:nth-child(4){display:none}.stat:nth-child(3){margin-left:auto}.planner-tabs{gap:0;margin-bottom:16px;justify-content:space-between}.planner-tabs button{flex:1;font-size:13px;padding:13px 0}.planner-tabs button[aria-selected=true]:after{left:20%;right:20%}.filters{gap:8px}.filters input{min-width:100%;padding:10px;font-size:13px}.filters select{font-size:12px;padding:8px}.courses{grid-template-columns:1fr;gap:10px}.course{padding:15px}#count{float:none;margin:5px 0 12px}#pane-progress{grid-template-columns:1fr;gap:14px}#pane-progress>.panel{grid-column:auto}.planner-pane>label{font-size:11px}footer{margin-top:24px}}
@media print{.planner-tabs,.more-menu,.account-menu{display:none}.planner-pane[hidden]{display:block!important}#pane-progress{display:block}.stats{display:flex}.courses{grid-template-columns:1fr 1fr}}
/* Rounded controls and softly separated workspaces. */
:root{--line:#e5e9f0}
button,input,select,textarea,.more-menu>summary,.account-menu>summary{border-radius:12px}
.panel,.course,.workspace,.more-content,#account-content{border-radius:18px}
.panel,.course{box-shadow:0 3px 16px rgb(30 50 80 / 4%)}
.flag,.trial-tag,.toast{border-radius:999px}
.eng-box,.eng-step,.plan-row,.warn{border-radius:14px}
.planner-tabs{gap:6px;padding:5px;margin:12px 0 20px;border:1px solid #e5e9f0;border-radius:17px;background:#e9edf3;width:fit-content;max-width:100%}
.planner-tabs button{border-radius:12px;padding:10px 22px;transition:background .18s,color .18s,box-shadow .18s}
.planner-tabs button:hover{background:#f5f8fc}
.planner-tabs button[aria-selected=true]{background:#fff;color:#0067ce;box-shadow:0 2px 7px rgb(30 50 80 / 9%)}
.planner-tabs button[aria-selected=true]:after{display:none}
#pane-plan>#study-workspace{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px}
.eng-actions button{border-radius:999px}
.english-table{border-collapse:separate;border-spacing:0}
.english-table thead th{background:#f5f7fb}
.english-table thead th:first-child{border-top-left-radius:12px}
.english-table thead th:last-child{border-top-right-radius:12px}
@media(max-width:650px){.planner-tabs{width:100%;box-sizing:border-box;gap:4px}.planner-tabs button{padding:10px 6px;white-space:nowrap}.panel,.course{border-radius:16px}#pane-plan>#study-workspace{padding:14px;border-radius:16px}}
@media(prefers-reduced-motion:reduce){button,input,select,textarea,.planner-tabs button{transition:none}}
/* 2026-10-13 polish: UPMHub brand mark, status-tinted cards, controls aligned to card bottom. */
.brand{display:inline-flex;align-items:center;gap:10px}
.brand:before{content:'U';display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#0071e3;color:#fff;font-size:15px;font-weight:700;box-shadow:inset 0 1px 0 rgb(255 255 255 / 20%)}
.brand span{margin-left:0}
.brand:hover{text-decoration:none}
header{background:linear-gradient(180deg,#fff 0,#fbfcfe 100%)}
.page-heading{align-items:flex-end}
h1{letter-spacing:-.8px}
.trial-tag{font-weight:550;padding:5px 12px}
.courses{align-items:stretch}
.course{display:flex;flex-direction:column;border:1px solid #edf0f4;transition:border-color .18s,box-shadow .18s,background .18s}
.course:hover{border-color:#d6e4f5;box-shadow:0 8px 24px rgb(30 50 80 / 7%)}
.course .row{align-items:center}
.course .code{font-size:12px}
.course .flag{font-size:11px;padding:3px 9px}
.course h3{margin:10px 0 2px;font-size:15px}
.course details{margin-top:8px}
.course .controls{margin-top:auto;padding-top:14px}
.course .pre{margin-top:4px}
.course.passed,.course.planned,.course.taking{border-left-width:1px}
.course.passed{background:linear-gradient(180deg,#f3f8ff,#fff 70%);border-color:#bcd7f6}
.course.taking{border-color:#cfe0f5}
.course.planned{border-color:#dfe5ee;border-style:dashed}
.course.passed .controls select[data-field=status]{color:#0067ce;border-color:#bcd7f6;background:#f3f8ff;font-weight:550}
.planner-tabs button{font-weight:500}
@media(max-width:650px){.brand:before{width:26px;height:26px;font-size:13px;border-radius:8px}.brand{gap:8px}.course h3{font-size:14px}}
@media(prefers-reduced-motion:reduce){.course{transition:none}}