:root { --ink:#17221d; --muted:#6b7771; --line:#dfe7e2; --canvas:#f5f8f6; --green:#176b4a; --green-soft:#dcefe6; --blue:#3d7188; --blue-soft:#e1eff4; --gold:#a66d10; --gold-soft:#f8edcf; --coral:#c94b36; --coral-soft:#fae4df; font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif; color:var(--ink); }
*{box-sizing:border-box} body{margin:0;background:var(--canvas)} button,select,input{font:inherit} button{cursor:pointer}
.portal-shell{min-height:100vh;display:grid;grid-template-columns:248px minmax(0,1fr)}
.portal-sidebar{background:#153a2c;color:#fff;padding:22px 16px;display:flex;flex-direction:column}.brand{display:flex;gap:11px;align-items:center;padding:0 8px 24px;border-bottom:1px solid rgba(255,255,255,.15)}.brand-mark{width:40px;height:40px;border-radius:8px;background:#f0c766;color:#153a2c;display:grid;place-items:center;font-weight:800;font-size:20px}.brand strong,.brand span{display:block}.brand strong{font-size:17px}.brand span{margin-top:4px;color:rgba(255,255,255,.66);font-size:12px}.portal-nav{display:grid;gap:7px;padding-top:20px}.portal-nav a{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:7px;color:rgba(255,255,255,.75);text-decoration:none}.portal-nav a.active,.portal-nav a:hover{background:#fff;color:#153a2c;font-weight:700}.portal-nav svg{width:18px;height:18px}.demo-note{margin-top:auto;padding:12px;border-radius:7px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.7);font-size:12px;line-height:1.5}.demo-note strong{display:block;color:#fff;margin-bottom:4px}
.portal-main{min-width:0}.portal-topbar{background:#fff;border-bottom:1px solid var(--line);padding:22px 32px;display:flex;justify-content:space-between;align-items:center;gap:18px}.eyebrow{color:var(--muted);font-size:12px}.portal-topbar h1{margin:4px 0 0;font-size:25px}.role-badge{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border-radius:999px;font-size:12px;font-weight:700}.role-badge.student{background:var(--blue-soft);color:var(--blue)}.role-badge.parent{background:var(--gold-soft);color:var(--gold)}.account-select{border:1px solid var(--line);border-radius:6px;background:#fff;padding:9px 12px;color:var(--ink)}
.portal-content{padding:28px 32px 48px;max-width:1320px;margin:auto}.portal-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.stat-card,.panel,.task-card,.report-card{background:#fff;border:1px solid var(--line);border-radius:8px}.stat-card{padding:17px;min-height:116px}.stat-card span{display:block;color:var(--muted);font-size:12px}.stat-card strong{display:block;margin-top:15px;font-size:27px}.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:15px;margin:30px 0 12px}.section-head h2{margin:0;font-size:18px}.section-head p{margin:5px 0 0;color:var(--muted);font-size:12px}.panel{padding:18px}.goal-layout{display:grid;grid-template-columns:120px 1fr;gap:22px;align-items:center}.progress-ring{width:108px;height:108px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--green) calc(var(--progress)*1%),#e8efeb 0);position:relative}.progress-ring:before{content:"";position:absolute;width:81px;height:81px;border-radius:50%;background:#fff}.progress-ring strong{position:relative;font-size:23px}.goal-layout h3{margin:0 0 6px;font-size:16px}.goal-layout p{margin:0;color:var(--muted);font-size:13px;line-height:1.6}.goal-list{margin:13px 0 0;padding:0;list-style:none;display:grid;gap:7px}.goal-list li{font-size:12px;color:var(--muted)}.goal-list li:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin:0 8px 1px 0}.task-grid,.report-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.task-card,.report-card{padding:16px}.task-card-head,.report-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.task-card h3,.report-card h3{margin:0;font-size:14px;line-height:1.45}.task-card p,.report-card p{color:var(--muted);font-size:12px;line-height:1.6;margin:10px 0}.meta{color:var(--muted);font-size:11px}.tag{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap}.tag.done{background:var(--green-soft);color:var(--green)}.tag.pending{background:var(--gold-soft);color:var(--gold)}.tag.risk{background:var(--coral-soft);color:var(--coral)}.task-actions{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px}.task-actions button,.primary-btn{border:0;border-radius:6px;background:var(--green);color:#fff;padding:9px 12px;font-weight:700;font-size:12px}.task-actions button.secondary{background:#fff;border:1px solid var(--line);color:var(--ink)}.task-actions button:disabled{opacity:.55;cursor:default}.report-card{padding:0;overflow:hidden}.report-banner{background:#153a2c;color:#fff;padding:16px}.report-banner strong{font-size:15px}.report-body{padding:16px}.report-block{padding:11px 0;border-bottom:1px solid #edf1ee}.report-block:last-child{border-bottom:0}.report-block h4{margin:0 0 6px;font-size:12px}.report-block p{margin:0}.notice{padding:13px 15px;border-radius:7px;background:#eef5f1;color:#416053;font-size:12px;line-height:1.6}.empty{padding:36px;text-align:center;color:var(--muted);font-size:13px}.switcher{display:flex;gap:8px;flex-wrap:wrap}.switcher a{color:var(--muted);font-size:12px;text-decoration:none}.switcher a:hover{color:var(--green)}
@media(max-width:900px){.portal-shell{display:block}.portal-sidebar{position:relative;padding:15px 16px}.portal-nav{display:flex;overflow:auto;padding-top:14px}.portal-nav a{white-space:nowrap}.demo-note{display:none}.portal-topbar{padding:18px 16px;align-items:flex-start;flex-direction:column}.portal-content{padding:20px 16px 36px}.portal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.task-grid,.report-grid{grid-template-columns:1fr}}
@media(max-width:520px){.portal-grid{grid-template-columns:1fr 1fr}.goal-layout{grid-template-columns:1fr;text-align:center}.goal-list{text-align:left}.progress-ring{margin:auto}}

.service-summary{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:16px;padding:18px 20px;background:#153a2c;color:#fff;border-radius:8px}.service-summary strong,.service-summary p,.service-summary span{display:block}.service-summary strong{margin-top:5px;font-size:18px}.service-summary p{margin:7px 0 0;color:rgba(255,255,255,.72);font-size:12px}.service-summary .eyebrow{color:rgba(255,255,255,.62);font-size:11px}.service-progress{text-align:right}.service-progress strong{margin:0;color:#f0c766;font-size:27px}.service-progress span{margin-top:4px;color:rgba(255,255,255,.72);font-size:11px}
@media(max-width:900px){.service-summary{align-items:flex-start;flex-direction:column}.service-progress{text-align:left}}
.task-submit-form { display: grid; gap: 12px; padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--line); }
.task-submit-form label { display: grid; gap: 8px; font-size: 12px; }
.task-submit-form input { width: 100%; min-width: 0; height: 40px; border: 1px solid var(--line); border-radius: 6px; padding: 0 10px; }
.task-submit-form > div { display: flex; justify-content: flex-end; gap: 8px; }
.task-submit-form button { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 6px; background: var(--green); color: #fff; padding: 9px 12px; font-size: 12px; }
.task-submit-form button.secondary { border: 1px solid var(--line); background: #fff; color: var(--ink); }
.task-submit-form svg { width: 15px; height: 15px; }
.task-card { min-width: 0; overflow-wrap: anywhere; }
.task-card-head { flex-wrap: wrap; }