.portal-nav { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; padding:12px 20px; background:#fffef9; border-bottom:1px solid #e1e7d5; }
.portal-nav button { display:flex; align-items:center; justify-content:center; gap:8px; padding:9px 20px; min-height:46px; border:1px solid #dce5cc; border-radius:12px; color:#6b8052; background:#fafbf4; font-size:20px; }
.portal-nav button[aria-current] { background:#eaf0dd; border-color:#9fb77c; color:#486638; font-weight:600; }
.portal-nav>span { color:#82916e; font-size:18px; }
.portal-nav .icon { width:22px; height:22px; }
.portal-screen { max-width:1320px; margin:0 auto; padding-bottom:40px; }
.portal-screen .text-btn { font-size:20px; min-height:46px; }
.portal-welcome { display:grid; grid-template-columns:1fr 280px; gap:30px; align-items:center; padding:36px 44px; background:linear-gradient(125deg,#edf2de,#fffaf0); border:1px solid #dce5c9; border-radius:26px; }
.portal-kicker { display:block; color:#859965; font-size:18px; margin-bottom:12px; }
.portal-welcome h1,.subject-welcome h1 { color:#476536; font-size:42px; line-height:1.5; margin:0 0 14px; }
.portal-welcome p,.subject-welcome p { font-size:23px; color:#7b8b64; line-height:1.9; margin:0 0 22px; }
.portal-hero-actions { display:flex; flex-wrap:wrap; gap:14px; }
.portal-hero-actions .btn { font-size:23px; min-height:60px; }
.portal-character { width:250px; height:260px; object-fit:contain; }
.portal-mascot { display:grid; place-items:center; }
.portal-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin:22px 0 34px; }
.portal-metrics article { min-width:0; padding:22px; border:1px solid #dde5ce; border-radius:17px; background:#fffef9; }
.portal-metrics article>span { font-size:20px; color:#7a8b62; }
.portal-metrics strong { display:block; color:#597a3e; font-size:40px; font-weight:500; margin-top:9px; line-height:1.5; }
.portal-metrics small { font-size:18px; margin-left:8px; font-weight:400; }
.portal-section { margin-top:32px; }
.portal-section-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.portal-section h2,.portal-bottom h2,.subject-note h2 { font-size:28px; color:#4d6b39; margin:0; line-height:1.8; }
.portal-section-heading p { margin:0; font-size:20px; color:#83916e; }
.subject-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.subject-card { --subject-color:#879f64; --subject-bg:#edf2df; position:relative; min-width:0; min-height:285px; padding:24px; background:#fffef9; border:1px solid #dce5cc; border-radius:20px; text-align:left; }
.subject-card.peach { --subject-color:#bb8f6d; --subject-bg:#f4eae0; }
.subject-card.blue { --subject-color:#7897a2; --subject-bg:#e7eff1; }
.subject-card.yellow { --subject-color:#ad9b5e; --subject-bg:#f6f1df; }
.subject-symbol { display:grid; place-items:center; width:54px; height:54px; border-radius:16px; background:var(--subject-bg); color:var(--subject-color); }
.subject-symbol .icon { width:30px; height:30px; }
.subject-status { position:absolute; top:24px; right:20px; font-size:16px; color:#7a8b63; }
.subject-card h3 { font-size:29px; color:#4e693b; margin:20px 0 2px; line-height:1.8; }
.subject-card p { font-size:19px; line-height:1.8; color:#82916e; margin:10px 0; }
.subject-card .subject-subtitle { color:#6c8254; font-size:21px; margin:0; }
.subject-progress { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-top:20px; color:#71884e; font-size:18px; }
button.subject-card { border:2px solid #a8bd86; box-shadow:0 8px 24px #667c3610; }
button.subject-card:hover { background:#f8faee; }
.subject-card.planned { background:#f8f8f1; }
.subject-card.planned h3 { color:#79856c; }
.activity-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.activity-card { position:relative; min-width:0; padding:22px; display:flex; flex-direction:column; align-items:flex-start; text-align:left; background:#fffef9; border:1px solid #dce5cc; border-radius:18px; }
.activity-card:hover { border-color:#a5ba83; background:#f7faef; }
.activity-icon { display:grid; place-items:center; width:45px; height:45px; border-radius:13px; background:#edf3df; color:#7c9757; }
.activity-icon .icon { width:25px; height:25px; }
.activity-card h3 { font-size:24px; color:#536e3e; line-height:1.8; margin:15px 0 6px; }
.activity-card p { font-size:20px; line-height:1.9; color:#81916d; margin:0 0 18px; }
.activity-arrow { align-self:flex-end; margin-top:auto; color:#99ab7d; }
.portal-bottom { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:32px; }
.portal-bottom .panel { min-width:0; padding:26px; }
.portal-bottom p,.subject-note p { color:#7b8b64; font-size:20px; line-height:1.9; }
.portal-week-days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; margin-top:20px; }
.portal-day { display:flex; flex-direction:column; align-items:center; gap:12px; padding:12px 3px; border:1px solid #e5e9da; border-radius:12px; color:#a7af9a; background:#fafbf5; }
.portal-day>span { font-size:18px; }
.portal-day .icon { width:24px; height:24px; }
.portal-day small { font-size:16px; }
.portal-day.has-activity { background:#edf3df; border-color:#d1dfb9; color:#80975b; }
.portal-day.is-today { border-color:#a4bb7c; }
.portal-parent-icon { display:inline-grid; place-items:center; width:42px; height:42px; color:#91a46e; margin-bottom:12px; }
.portal-parent-links { display:flex; flex-wrap:wrap; align-items:center; gap:16px; }
.subject-welcome { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:28px 34px; background:#eff3e3; border:1px solid #dce5cc; border-radius:22px; }
.subject-welcome>div { min-width:0; }
.subject-character { width:180px; height:195px; object-fit:contain; flex-shrink:0; }
.subject-summary { display:flex; flex-wrap:wrap; gap:12px; }
.subject-summary>span { padding:8px 14px; border-radius:12px; border:1px solid #dce5cb; background:#fffef9; color:#7b8b64; font-size:18px; }
.subject-note { padding:26px; margin-top:28px; }
.writing-launch { padding:26px; }
.writing-launch form { display:grid; grid-template-columns:1fr 1fr auto; align-items:end; gap:20px; }
.writing-launch form label { display:flex; flex-direction:column; gap:12px; font-size:23px; color:#667e4b; margin:0; min-width:0; }
.writing-launch select { font-size:25px; min-height:56px; width:100%; }
.writing-launch .btn { min-height:56px; font-size:23px; }
.writing-launch-empty { text-align:center; padding:15px; }
.writing-launch-empty .empty-mascot { width:150px; height:160px; object-fit:contain; }
.writing-launch-empty h2 { font-size:28px; color:#5d793f; }
.writing-launch-empty p { font-size:22px; color:#7e8e69; }
.writing-work-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-bottom:20px; }
.writing-work-card { min-width:0; padding:24px; border:1px solid #dce5cc; border-radius:18px; background:#fffef9; }
.writing-work-kind { color:#93a578; font-size:18px; }
.writing-work-card p { font-size:25px; color:#59713f; line-height:2; overflow-wrap:anywhere; white-space:pre-wrap; }
.writing-work-card time { display:block; font-size:16px; color:#9aa68b; margin-bottom:14px; }
.writing-empty-works { padding:30px; text-align:center; font-size:23px; color:#93a181; border:1px dashed #cddbb6; border-radius:18px; }
body[data-full-zhuyin="true"] .portal-screen h1 { line-height:2.3; }
body[data-full-zhuyin="true"] .portal-screen p,body[data-full-zhuyin="true"] .portal-screen h2,body[data-full-zhuyin="true"] .portal-screen h3 { line-height:2.7; }
body[data-full-zhuyin="true"] .portal-metrics article>span { line-height:2.5; }
body[data-full-zhuyin="true"] .subject-status { position:static; display:block; margin-top:15px; }
body[data-full-zhuyin="true"] .subject-card h3 { margin-top:10px; }
body[data-full-zhuyin="true"] .portal-nav button { line-height:2.5; min-width:0; }
@media(max-width:1050px) {
 .subject-grid,.activity-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .writing-work-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .portal-bottom { grid-template-columns:1fr; }
}
@media(max-width:700px) {
 .portal-nav { padding:9px 14px; gap:10px; }
 .portal-nav button { font-size:18px; padding:8px 12px; }
 .portal-nav>span { display:none; }
 .portal-welcome { grid-template-columns:1fr 100px; padding:22px 18px; gap:8px; border-radius:20px; }
 .portal-welcome h1,.subject-welcome h1 { font-size:29px; }
 .portal-welcome p,.subject-welcome p { font-size:20px; }
 .portal-character { width:105px; height:150px; }
 .portal-hero-actions .btn { font-size:20px; min-height:54px; padding:10px 15px; }
 .portal-kicker { font-size:16px; }
 .portal-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:16px 0 26px; }
 .portal-metrics article { padding:17px 15px; }
 .portal-metrics article>span { font-size:19px; }
 .portal-metrics strong { font-size:34px; }
 .portal-section { margin-top:26px; }
 .portal-section h2,.portal-bottom h2,.subject-note h2 { font-size:25px; }
 .subject-grid,.activity-grid { gap:12px; }
 .subject-card { padding:18px 14px; min-height:285px; }
 .subject-status { position:static; display:block; margin-top:14px; }
 .subject-card h3 { font-size:25px; margin-top:12px; }
 .subject-card p { font-size:18px; }
 .subject-card .subject-subtitle { font-size:20px; }
 .activity-card { padding:18px 14px; }
 .activity-card h3 { font-size:23px; }
 .activity-card p { font-size:19px; }
 .portal-bottom .panel { padding:20px 15px; }
 .subject-welcome { padding:22px 18px; flex-wrap:wrap; }
 .subject-character { width:110px; height:125px; margin-left:auto; }
 .subject-summary { gap:8px; }
 .subject-summary>span { font-size:17px; padding:8px 10px; }
 .writing-launch { padding:20px; }
 .writing-launch form { grid-template-columns:1fr; }
 .writing-work-grid { grid-template-columns:1fr; }
 body[data-full-zhuyin="true"] .portal-welcome { grid-template-columns:1fr; }
 body[data-full-zhuyin="true"] .portal-mascot { display:none; }
 body[data-full-zhuyin="true"] .portal-metrics article>span { font-size:18px; }
 body[data-full-zhuyin="true"] .activity-card h3 { font-size:22px; }
}