/* 勤保ERP學習中心 v2：沿用正式ERP深藍、青綠與同一份Q形Logo。 */
:root{--ink:#132b49;--muted:#596d83;--paper:#f3f6fb;--line:#dae4ef;--green:#087f72;--orange:#a55426}
body{color:#263c54;font-family:"Segoe UI","Microsoft JhengHei","PingFang TC",sans-serif;font-size:15px;line-height:1.8;background:radial-gradient(ellipse at 90% 0,#e7f1f5,transparent 55%),var(--paper)}
h1,h2,h3{color:var(--ink)}
.sidebar{width:260px;padding:29px 17px;background:linear-gradient(160deg,#163551,#10273f 75%);border:0;color:#f1f7ff;box-shadow:5px 0 25px #132b4910}
.brand{padding:0 10px 31px;gap:12px;font-size:23px;letter-spacing:.2px;color:white}
.brand-icon{background:#f5fafb;border-radius:15px;width:60px;height:60px;flex-shrink:0;box-shadow:0 3px 15px #031c2829}
.brand-icon img{width:54px;height:54px;object-fit:contain}
.brand small{font-size:11px;letter-spacing:2px;color:#b6cbdc;margin-top:2px}
.nav-label{font-size:10px;letter-spacing:2px;color:#a0b7cc;padding:7px 14px 20px;border-top:1px solid #ffffff14}
nav{gap:7px}nav a{font-size:14px;padding:13px 15px;min-height:50px;color:#bfd0e0;border-radius:9px;position:relative}
nav a>span{width:21px;height:23px;display:inline-flex;align-items:center}nav a svg{width:21px;height:21px}
nav a:hover{background:#ffffff0d;color:white}nav a[aria-current]{background:#ffffff13;color:#fff;box-shadow:inset 3px 0 #51d6bc}
nav a[aria-current] svg{color:#69e0c8}nav b{background:#51d6bc;color:#0b3c3c;border-radius:4px;font-size:10px}
.side-bottom{padding:25px 13px 0}.tiny-label,.side-bottom p{color:#b3c5d7}.tiny-label{font-size:12px}.side-bottom a{border-color:#ffffff24;color:#d5e5f2;font-size:12px}.side-bottom a:hover{color:#75e8d0}
progress{background:#ffffff14}progress::-webkit-progress-bar{background:#ffffff14}progress::-webkit-progress-value{background:#51d6bc}progress::-moz-progress-bar{background:#51d6bc}
.workspace{margin-left:260px}.topbar{height:83px;background:#ffffffdb;border-bottom:1px solid #d9e3ed;padding:0 42px;font-size:12px;backdrop-filter:blur(12px)}
.topbar>span{font-weight:500;color:#687c93}#crumb{color:#19354f}.search{background:#f3f7fb;border-color:#dae4ef;border-radius:8px;padding:9px 13px}.search input{width:215px;font-size:12px}.edition{color:#5f748a;letter-spacing:.5px;font-size:11px}
main{padding:34px 42px 55px;max-width:1540px}h1{font-weight:680;letter-spacing:-1px}h1 em{font-style:normal;color:#087f72}.eyebrow{color:#087f72;letter-spacing:2px;font-size:11px;font-weight:650}.eyebrow .dot{background:#20a990;box-shadow:0 0 0 4px #17a58713}
.hero{background:#fff;border:1px solid #dde7ef;box-shadow:0 10px 36px #132b4908;border-radius:17px;padding:35px 33px;grid-template-columns:1.03fr 1fr;gap:25px;min-height:348px;position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;top:0;left:0;width:150px;height:3px;background:linear-gradient(90deg,#51d6bc,#0c8577);pointer-events:none}
.hero h1{font-size:38px;line-height:1.48;letter-spacing:-1.6px;margin-bottom:17px}.hero p{font-size:14px;line-height:1.95;max-width:470px;margin-bottom:25px}.hero-visual{margin:0;position:relative;align-self:stretch;min-width:0;border-radius:12px;overflow:hidden;background:#e8eef1}.hero-img{width:100%;height:100%;min-height:280px;object-fit:cover;mix-blend-mode:normal;display:block;border-radius:0}.hero-visual:after{content:"";position:absolute;inset:40% 0 0;background:linear-gradient(transparent,#0e2c42c4);pointer-events:none}.hero-visual figcaption{position:absolute;z-index:1;bottom:20px;left:23px;right:20px;color:#fff;font-size:12px;line-height:1.8}.hero-visual figcaption b{display:block;font-size:9px;letter-spacing:2px;color:#b8e8e1;margin-top:5px;font-weight:500}
.button,.primary{background:#132b49;border-color:#132b49;border-radius:7px;padding:11px 18px;font-size:13px;box-shadow:0 4px 10px #132b4912}.button:hover,.primary:hover{background:#1e4262;border-color:#1e4262;transform:translateY(-1px)}.secondary{border-radius:7px;border-color:#c5d5e2;color:#24425e;background:#fff}.secondary:hover{background:#eaf4f5;border-color:#8dc4ba}
.intro-strip{background:#132b49;border:0;border-radius:11px;margin:24px 0 32px;padding:19px 0;box-shadow:0 5px 18px #132b490b}.intro-strip>div,.intro-strip>div:first-child{padding:0 25px;color:#cad7e5;display:flex;align-items:center;gap:8px;font-size:12px;border-color:#ffffff20}.intro-strip strong{color:#7be1ce;font-size:25px;font-family:"Segoe UI",sans-serif;font-weight:500;letter-spacing:-.8px;white-space:nowrap}
.section-top{margin:30px 0 19px}.section-top h2{font-size:22px;letter-spacing:-.5px}.section-top p{font-size:12px}.feature-grid{gap:14px}.feature{border-color:#d9e4ee;border-radius:10px;min-height:166px;padding:20px;background:#fff;box-shadow:0 3px 7px #132b4903;transition:transform .15s,box-shadow .15s,background .15s}.feature:hover{background:#f5fbfa;border-color:#80bdb4;transform:translateY(-3px);box-shadow:0 10px 24px #132b490b}.feature.selected{border-color:#079684;background:#ecf8f5;box-shadow:0 0 0 1px #07968425}.feature-symbol{display:grid;place-items:center;width:38px;height:38px;color:#127f75;background:#edf6f5;border-radius:9px;margin-bottom:15px}.feature-symbol svg{width:22px;height:22px}.feature.selected .feature-symbol{background:#087f72;color:white}.feature .num{position:absolute;right:19px;top:14px;font-family:"Segoe UI",sans-serif;font-weight:500;font-size:13px;color:#7d92a7}.feature .arrow{top:auto;bottom:16px;font-size:16px;color:#8ca3b3}.feature strong{font-size:15px;color:#1b3751}.feature small{font-size:11px;color:#596f82;max-width:90%}
.detail-panel{border-radius:12px;background:linear-gradient(110deg,#163752,#104d54);padding:28px 32px;margin-top:21px;gap:35px;border:1px solid #214a5e;color:#deedf5;box-shadow:0 6px 20px #132b490b}.detail-panel h3{color:white;margin-top:12px;font-size:23px}.detail-panel p{color:#c8dce9;font-size:13px;line-height:1.9}.detail-panel ol{font-size:13px;line-height:2.1;color:#e2edf4}.detail-panel .text-btn{color:#81e4cf;border-color:#75c4b4}.detail-panel .tag.orange{background:#51d6bc1f;color:#8ee9d8;border:1px solid #51d6bc36}
.note{background:#edf3f8;border-left-color:#7499b5;color:#4e657b;line-height:1.9;border-radius:0 7px 7px 0}.note.warn{background:#fff4e7;color:#86542d;border-color:#c68d42}.text-btn{color:#087f72;border-color:#84b7ae;font-weight:600}.tag{background:#e8f5f0;color:#147364;letter-spacing:.2px;padding:4px 9px;border-radius:4px}.tag.orange{background:#ecf5fb;color:#2a648e}.tag.gray{background:#eff3f6;color:#5a6e80}
.page-head{margin:6px 0 30px}.page-head .eyebrow{font-size:10px;letter-spacing:2.3px;margin-bottom:11px}.page-head h1{font-size:36px;line-height:1.5;margin-bottom:12px}.page-head p{font-size:14px;max-width:760px;line-height:1.95}
.panel{border-color:#dbe5ee;border-radius:12px;padding:28px;box-shadow:0 3px 13px #132b4904}.panel p{font-size:14px;line-height:1.9}.panel h2{font-size:24px}.fields input[type=number]{border-color:#cbd9e5;background:#f8fafc;border-radius:7px;padding:11px 13px}.fields input[type=number]:focus{border-color:#139885;background:#fff}.check-inline input,.delivery-card input{accent-color:#087f72}.cash-state{border-radius:8px;background:#eaf7f1;border:1px solid #d3ebe1}.cash-state.warning,.cash-state.gap{background:#fff2e6;border-color:#f2d5b3;color:#97521f}.cash-state.incomplete,.cash-state.no-payments{background:#f0f3f7;border-color:#dce3ed;color:#50637a}.cash-state strong{font-size:25px}.metric-row{gap:30px;padding:8px 0}.metric-row b{color:#132b49;font-size:25px}.chart polyline{stroke:#0c8b7b}.chart circle{fill:#c37937}.rule-grid .panel{position:relative;border-top:3px solid #9adacb}.rule-grid h3{font-size:16px}.presets{margin:25px 0}.chip{border-color:#cbd9e5;color:#365269;padding:8px 14px;font-size:12px;border-radius:7px}.chip:hover{background:#edf8f4;border-color:#83bfb2}.chip.active{background:#0f7d70;color:white;border-color:#0f7d70}
.cards{gap:20px}.lesson-card{position:relative;min-height:285px;padding:24px;border-radius:12px;border-color:#dce5ee;box-shadow:0 3px 12px #132b4904}.lesson-card:hover{border-color:#93b8c1;box-shadow:0 10px 25px #132b490a}.lesson-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.lesson-index{font-size:30px;color:#8aa6be;font-weight:300;line-height:1}.lesson-icon{width:37px;height:37px;display:grid;place-items:center;border-radius:9px;background:#edf5f8;color:#286e80}.lesson-icon svg{width:23px;height:23px}.lesson-card h2{font-size:20px;margin:15px 0 10px}.lesson-card p{font-size:13px;line-height:1.9;margin-bottom:24px}.lesson-card .card-bottom{padding-top:15px;border-top:1px solid #e7edf2;font-size:11px}.lesson-card:has(.card-bottom span:first-child:not(:empty)){transition:border-color .15s,box-shadow .15s}
.learn-layout{grid-template-columns:235px 1fr;gap:25px}.step-list{gap:12px}.step-button{border-radius:9px;padding:15px 16px;border-color:#d8e3ed;min-height:58px;color:#446078;display:flex;align-items:center;gap:5px;line-height:1.5}.step-button:hover{border-color:#9dbbbf;background:#f4faf8}.step-button[aria-current]{background:#e7f5f1;border-color:#0b8b78;color:#075e53;font-weight:600}.step-number{background:#edf2f7;color:#56758f;flex-shrink:0}.step-button[aria-current] .step-number{background:#087f72;color:#fff}.step-detail{padding:33px;min-height:390px}.step-detail h2{font-size:28px}.step-detail p{font-size:16px;line-height:2}.step-detail .note{font-size:14px}.quiz-choice{border-color:#d7e3ed;border-radius:8px;padding:14px 18px;font-size:14px}.quiz-choice:hover{background:#eaf7f3;border-color:#60ad9c}.quiz-choice[aria-pressed=true]{background:#e4f5ed;border-color:#0b8b78}.feedback{border-radius:8px;background:#e9f7ef;color:#23634a;font-size:14px;border:1px solid #c8e9d5}.feedback.incorrect{background:#fff3e9;border-color:#efd6bb;color:#8d5428}.question legend{font-size:19px;line-height:1.8}.step-footer{gap:15px}
.role-tabs{gap:10px;margin:26px 0}.role-content{grid-template-columns:.85fr 1.4fr;gap:28px}.role-overview{background:linear-gradient(150deg,#173b58,#12324a 70%,#12535a);color:white;border:0;position:relative;overflow:hidden}.role-overview h2{color:white;font-size:27px}.role-overview h3{color:#83e4ce;font-size:14px;margin-top:28px}.role-overview p{color:#d0e2ee;font-size:14px}.role-title{font-size:75px;color:#8adfce;font-weight:300;margin-bottom:21px;font-family:"Segoe UI",sans-serif;line-height:1.1}.role-overview .note{background:#ffffff0d;color:#f3e6ce;border-color:#d5b579;font-size:13px}.role-path{gap:13px}.role-path a{padding:20px 23px;border-color:#d8e4ed;border-radius:9px;background:#fff;box-shadow:0 2px 8px #132b4903}.role-path a:hover{background:#edf8f4;border-color:#82baa9}.role-path a small{font-weight:600;color:#258b7b;margin-right:12px}.role-path a>span:last-child{color:#168675;font-size:18px}
.delivery-card{border-color:#d9e4ee;border-radius:10px;padding:23px 25px;margin-bottom:14px;gap:15px}.delivery-card h2{font-size:17px;color:#173a55}.delivery-card p{font-size:13px;line-height:1.9}.delivery-card small{color:#60768b;font-size:12px}.delivery-card .owner{background:#edf4f9;color:#3c6786;border:1px solid #dbe8f0;padding:5px 10px;border-radius:5px}.delivery-card.done{background:#edf8f3;border-color:#97c9b9}.filter-bar{gap:9px;margin:24px 0}.filter-bar span{font-size:12px;color:#59738b}
details{border-color:#dbe5ee;border-radius:10px;box-shadow:0 2px 7px #132b4903;margin-bottom:14px;padding:0 25px}summary{padding:21px 0;font-size:15px;color:#21425e}details[open]{border-color:#9cbbcc}details[open] summary{color:#087f72}details p{font-size:14px;padding-bottom:4px}.scope-table{border:1px solid #dce5ed;font-size:14px;border-radius:10px;overflow:hidden}.scope-table th{background:#e8f0f7;color:#355771;font-size:12px}.scope-table td{padding:18px;line-height:1.85;vertical-align:top}.scope-table td:first-child{color:#163d59;font-weight:600;min-width:130px}.scope-table td:last-child{color:#64798b}.scope-table tbody tr:nth-child(even){background:#f8fafc}.source-links a{color:#087f72}footer{color:#627a91;background:#f5f8fb;border-color:#dce5ee}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #0a9e88;outline-offset:4px}.skip{color:#132b49;border:2px solid #0a9e88;border-radius:5px;left:280px}#main:focus{outline:none}
@media(min-width:1600px){main{padding:40px 54px 60px}.hero{padding:40px;min-height:390px;gap:40px}.hero h1{font-size:44px}.hero-img{min-height:320px}.hero p{font-size:15px}.feature{min-height:179px}.feature strong{font-size:16px}.feature small{font-size:12px}}
@media(max-width:1280px){.sidebar{width:234px;padding:25px 13px}.workspace{margin-left:234px}.brand{font-size:21px;gap:8px}.brand-icon{width:51px;height:51px}.brand-icon img{width:46px;height:46px}.hero{padding:27px;grid-template-columns:1fr 1fr;gap:20px}.hero h1{font-size:31px;letter-spacing:-1.2px}.hero p{font-size:13px}.hero .btn-row{gap:8px}.hero .button,.hero .secondary{font-size:12px;padding:10px 12px;gap:10px}.intro-strip>div,.intro-strip>div:first-child{padding:0 19px;font-size:11px}.intro-strip strong{font-size:23px}.edition{display:none}.page-head h1{font-size:32px}.feature-grid{gap:12px}.feature{padding:18px}.feature strong{font-size:14px}.role-content{grid-template-columns:1fr 1.35fr}}
@media(max-width:1150px){main{padding:26px}.topbar{padding:0 26px}.hero{padding:25px;grid-template-columns:1.05fr 1fr}.hero h1{font-size:29px}.hero .btn-row{display:grid;grid-template-columns:1fr}.hero .button,.hero .secondary{width:fit-content}.hero-img{min-height:300px}.feature-grid{grid-template-columns:repeat(2,1fr)}.feature{min-height:158px}.detail-panel{grid-template-columns:1fr;gap:15px}.cards{grid-template-columns:repeat(2,1fr)}.learn-layout{grid-template-columns:200px 1fr}.step-button{padding:13px}.step-detail{padding:25px}.step-detail p{font-size:15px}.role-content{grid-template-columns:1fr 1.2fr}.metric-row{gap:18px}.metric-row b{font-size:22px}}
@media(max-width:800px){.sidebar{position:relative;width:100%;padding:20px}.brand{padding-bottom:20px}.nav-label,.side-bottom{display:none}nav{gap:6px}nav a{padding:8px 10px;min-height:40px;font-size:12px;color:#dce7f0}.workspace{margin:0}.topbar{height:auto;padding:14px 18px}.hero{grid-template-columns:1fr;padding:25px}.hero .btn-row{display:flex}.hero h1{font-size:32px}.hero-img{min-height:250px}.hero-visual{height:250px}.hero-visual figcaption{font-size:11px}.intro-strip>div,.intro-strip>div:first-child{padding:0 12px;display:block;font-size:10px}.intro-strip strong{display:block;font-size:23px}.cards,.role-content,.learn-layout{grid-template-columns:1fr}.step-list{grid-template-columns:1fr 1fr}.page-head h1{font-size:29px}.role-overview{padding:25px}.feature-symbol{width:32px;height:32px}.feature{padding:17px;min-height:160px}.feature .num{font-size:12px}.feature strong{font-size:14px}.feature small{font-size:11px}.delivery-card{padding:20px}.scope-table td{padding:13px 9px;font-size:12px}.scope-table td:first-child{min-width:85px}.skip{left:15px}}
@media print{.hero{box-shadow:none}.hero-visual{height:220px}.hero-img{min-height:0}.intro-strip{background:#eef4f7}.intro-strip strong{color:#132b49}.intro-strip>div{color:#365269}.detail-panel,.role-overview{background:#eef4f7;color:#132b49}.detail-panel h3,.detail-panel p,.detail-panel ol,.role-overview h2,.role-overview h3,.role-overview p{color:#132b49}.feature,.lesson-card,.panel{box-shadow:none}.feature:hover{transform:none}}