:root{--ink:#20344e;--teal:#568b87;--muted:#697f93;--line:#dce5eb}*{box-sizing:border-box}body{margin:0;background:#f5f8fa;color:var(--ink);font-family:system-ui,"Microsoft JhengHei",sans-serif;line-height:1.75}a{color:#477e81;text-decoration:none}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}[hidden]{display:none!important}header{background:white;padding:22px 5%;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:24px}.brand{display:grid;line-height:1.4}.brand span{font-size:17px;font-weight:700;color:#477e81}.brand strong{font-size:23px;color:var(--ink)}nav{display:flex;align-items:center;gap:24px;font-size:15px}.tag{background:#edf5f4;color:#477e81;padding:6px 15px;border-radius:24px}nav button{border:0;background:none;color:#477e81;padding:6px}main{max-width:1280px;margin:0 auto;padding:48px 32px}.eyebrow{font-size:14px;letter-spacing:2px;font-weight:750;color:#477e81}h1{font-size:40px;margin:10px 0 16px}.subtitle{color:var(--muted)}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:32px 0}.metric{background:white;border:1px solid var(--line);border-radius:16px;padding:22px 26px;display:grid;gap:5px}.metric strong{font-size:34px;color:#477e81}.metric span{color:var(--muted);font-size:15px}.program-stack{display:grid;gap:28px}.learner-program{border:1px solid var(--line);border-radius:18px;background:white;overflow:hidden}.program-card{padding:30px 32px}.program-card h2{font-size:25px;margin:12px 0}.program-card p{color:var(--muted);margin-bottom:24px}.status{float:right;background:#edf5f4;color:#477e81;padding:5px 15px;border-radius:22px;font-size:14px}.bar{width:100%;height:8px;border:0;border-radius:8px;overflow:hidden;display:block;margin:22px 0;background:#e6eeed}.bar::-webkit-progress-bar{background:#e6eeed}.bar::-webkit-progress-value{background:var(--teal)}.bar::-moz-progress-bar{background:var(--teal)}.table-scroll{overflow:auto}table{border-collapse:collapse;width:100%;font-size:15px;text-align:left}th{background:#f5f8fa;color:#657b8f;font-weight:650;padding:17px 20px;border-top:1px solid var(--line)}td{padding:21px 20px;border-top:1px solid var(--line);vertical-align:middle}th:first-child{width:8%}th:nth-child(2){width:34%}th:nth-child(3){width:16%}.state{display:inline-block;background:#edf5f4;color:#477e81;border-radius:24px;padding:6px 13px;white-space:nowrap;font-size:13px}.state.wait{background:#f0f2f5;color:#7c8899}.row-actions{display:flex;gap:8px;white-space:nowrap}.row-action{display:inline-block;border:1px solid #c7dadb;color:#477e81;background:white;border-radius:7px;padding:7px 12px;font-size:14px}.row-action:hover{background:#eff6f5}.pending{background:#f3f5f7;border:1px solid #e0e5e9;border-radius:7px;padding:7px 12px;color:#87939f;font-size:13px;white-space:nowrap}footer{font-size:13px;color:#76899a;margin:30px 0 0;border-top:1px solid var(--line);padding-top:20px}.login-layout{display:grid;grid-template-columns:1.25fr 1fr;align-items:center;gap:80px;min-height:650px}.welcome h1{font-size:46px;line-height:1.55;letter-spacing:1px;margin:36px 0}.welcome em{font-style:normal;color:var(--teal)}.welcome>p{color:var(--muted)}.notice{margin-top:38px;background:#ffffffa8;padding:22px 25px;border-left:4px solid var(--teal);font-size:15px}.notice p{margin-bottom:0;color:var(--muted)}.login-card{border-radius:22px;background:white;border:1px solid var(--line);padding:36px;box-shadow:0 15px 60px #20344e08}.login-card h2{margin-top:8px;font-size:26px}label{display:block;font-weight:650;margin:24px 0}input{display:block;width:100%;padding:15px 17px;border:1px solid #c8d8df;border-radius:9px;margin-top:9px;color:var(--ink)}input:focus{outline:2px solid #8db7b1;outline-offset:2px}.primary{background:var(--teal);color:white;border:0;border-radius:9px;padding:14px 22px;width:100%;font-weight:650}.hint{font-size:13px;color:var(--muted);margin-top:23px}#message{color:#943a29}@media(max-width:900px){.login-layout{gap:35px;grid-template-columns:1fr;min-height:0}.welcome h1{font-size:34px}.metrics{grid-template-columns:repeat(2,1fr)}main{padding:30px 18px}header{padding:18px;align-items:flex-start}.brand strong{font-size:18px}.brand span{font-size:14px}nav{gap:10px;flex-wrap:wrap;justify-content:flex-end;font-size:13px}.program-card{padding:24px}table{min-width:870px}h1{font-size:32px}.login-card{padding:26px}}@media(max-width:550px){nav>a{display:none}.welcome h1{font-size:30px}.metric{padding:18px}.metric strong{font-size:28px}.program-card h2{font-size:21px}}