:root{--ink:#183f36;--line:#dce3dd;--paper:#fffefa;--muted:#53685e}*{box-sizing:border-box}body{margin:0;background:#f7f4ee;color:var(--ink);font-family:"Microsoft JhengHei",sans-serif;line-height:1.7}.wrap{max-width:920px;margin:auto;padding:28px 18px 60px}.wrap>header,section{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:26px;margin-bottom:22px}.wrap>header{background:#eef2ec;border-top:5px solid #b69a60}h1{font-size:clamp(27px,5vw,38px);margin:8px 0}h2{font-size:23px;margin:0 0 16px}.eyebrow,.note,.page-footer{color:var(--muted)}.note{font-size:14px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}label{display:block;font-weight:700;margin:16px 0 6px}input:not([type=file]),textarea,select{width:100%;font:inherit;padding:12px;border:1px solid #bccac1;border-radius:7px;background:white}textarea{min-height:95px;resize:vertical}.resource-links,.actions{display:flex;gap:10px;flex-wrap:wrap}.resource-links a{background:#eef2ec;padding:12px;border-radius:6px}a{color:#245f4d;text-underline-offset:3px}.record{border-top:4px solid #b69a60}.example{padding:12px;background:#eef2ec;font-size:14px}.attachments{list-style:none;padding:0}.attachments li{padding:10px;border-bottom:1px solid var(--line);overflow-wrap:anywhere}.attachments img{display:block;max-width:220px;max-height:160px;margin:10px 0}.attachments button{margin-left:10px}.actions button,.button,.attachments button{font:inherit;padding:10px 16px;min-height:44px;border:0;border-radius:6px;cursor:pointer;background:#245f4d;color:white}.secondary{background:#eef2ec!important;color:var(--ink)!important}.button{margin:0}input[type=file]{max-width:100%;font:inherit}.page-footer{text-align:center;font-size:13px}#status{min-height:28px;font-weight:700}:focus-visible{outline:3px solid #b69a60;outline-offset:3px}button:disabled{opacity:.55;cursor:wait}@media(max-width:600px){.grid{grid-template-columns:1fr}.wrap{padding:18px 12px}section,.wrap>header{padding:20px 16px}.resource-links a{width:100%}.actions>*{flex:1 1 140px}}@media print{.brand-header,.pp-breadcrumb,.resources,.actions,input[type=file],.attachments button,.controls>a{display:none!important}body{background:white}.wrap{padding:0}section{break-inside:avoid}textarea{height:auto;overflow:visible}.record{page-break-inside:avoid}.note{color:#333}a{color:#183f36}}
:where(#records .record:nth-child(1)){--card-accent:#326789;--card-soft:#edf5fb}
:where(#records .record:nth-child(2)){--card-accent:#377052;--card-soft:#eff7f0}
:where(#records .record:nth-child(3)){--card-accent:#78558e;--card-soft:#f6f0fa}
body.pp-site[data-page=learning-passbook] #records .record{border-top:5px solid var(--card-accent);background:var(--card-soft)}
#records .record h2{color:var(--card-accent)}
#records .record .example{background:#fffefa;border-left:4px solid var(--card-accent)}