/* Scoped additions for the student and parent prototype. */
.portal { display: block; line-height: 1.5; color: #242541; font-size: 16px; }
.portal button, .portal select, .portal input { font: inherit; }
.portal button, .portal a { -webkit-tap-highlight-color: transparent; }
.portal button { cursor: pointer; }
.portal button:disabled { cursor: default; }
.portal h1, .portal h2, .portal h3 { font-family: Inter, sans-serif; letter-spacing: -.035em; }
.portal h1 { font-size: clamp(28px, 3vw, 36px); line-height: 1.2; }
.portal h2 { font-size: 21px; line-height: 1.3; }
.portal h3 { font-size: 17px; line-height: 1.4; }
.portal p { margin: 0; }
.portal-header {
  max-width: 1280px; margin: 16px auto 0; padding: 16px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  border-radius: 24px; color: #f6f8ff; background: rgba(3, 12, 37, .84);
  border: 1px solid rgba(191, 207, 255, .2); box-shadow: 0 12px 30px #10234818;
  backdrop-filter: blur(20px); position: sticky; top: 12px; z-index: 8;
}
.portal-logo { width: 140px; display: block; }
.portal-logo img { width: 100%; filter: brightness(0) invert(1); }
.portal-header-label { font-size: 14px; color: #c7d3e9; margin-right: auto; }
.portal-role-links { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: #ffffff0b; }
.portal-role-links a { padding: 7px 13px; border-radius: 9px; font-size: 14px; }
.portal-role-links a[aria-current="page"] { background: #fff; color: #323051; }
.portal-avatar { display: grid; place-items: center; background: #e2d9ff; color: #49397b; width: 38px; height: 38px; border-radius: 12px; font-size: 14px; font-weight: 700; flex-shrink: 0; }
.portal-shell { max-width: 1280px; margin: 30px auto 60px; display: grid; grid-template-columns: 214px minmax(0, 1fr); gap: 30px; align-items: start; }
.portal-sidebar { position: sticky; top: 110px; border: 1px solid #ffffffbf; background: #ffffffbd; border-radius: 22px; padding: 20px 12px; backdrop-filter: blur(18px); }
.portal-sidebar-label { font-size: 12px; color: #77758c; letter-spacing: .1em; padding: 0 14px 14px; }
.portal-nav { display: flex; flex-direction: column; gap: 6px; }
.portal-nav a { padding: 12px 14px; border-radius: 12px; color: #69677f; display: flex; align-items: center; gap: 10px; font-size: 14px; white-space: nowrap; }
.portal-nav a[aria-current="page"] { background: #152349; color: #fff; box-shadow: 0 5px 14px #17244c20; }
.portal-nav-icon { width: 20px; display: inline-flex; }
.portal-nav svg { width: 20px; height: 20px; }
.portal-nav-count { margin-left: auto; border-radius: 6px; padding: 0 6px; background: #7657ca; color: #fff; font-size: 12px; }
.portal-student { margin: 22px 6px 0; padding-top: 18px; border-top: 1px solid #deddeb; font-size: 14px; }
.portal-student strong { display: block; color: #34314e; }
.portal-muted { color: #716d85; font-size: 14px; }
.portal-main { min-width: 0; }
.portal-heading { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-bottom: 26px; }
.portal-heading p { color: #6d6781; margin-top: 8px; font-size: 14px; }
.portal-label { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; font-weight: 500; color: #756b93; }
.portal-chip { padding: 8px 12px; background: #ffffffaa; border: 1px solid #ffffff; border-radius: 100px; color: #685b8e; font-size: 13px; white-space: nowrap; }
.portal-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }
.portal-stat { background: #fffffff0; border: 1px solid #fff; padding: 20px; border-radius: 18px; box-shadow: 0 10px 28px #281e4f06; }
.portal-stat.featured { background: linear-gradient(130deg, #152548, #313763); color: #fff; border-color: #ffffff30; }
.portal-stat-label { font-size: 13px; color: #716d85; }
.portal-stat.featured .portal-stat-label { color: #d0d6ee; }
.portal-stat-number { font-family: Inter, sans-serif; font-size: 32px; font-weight: 700; margin: 10px 0 4px; letter-spacing: -.06em; line-height: 1.2; }
.portal-stat-number small { font: 14px gotham, sans-serif; color: #88829a; letter-spacing: 0; }
.portal-stat.featured small { color: #c0c9e2; }
.portal-stat-foot { font-size: 12px; color: #7b738e; }
.portal-stat.featured .portal-stat-foot { color: #c8e7e1; }
.portal-panel { background: #ffffffed; border: 1px solid #fff; padding: 24px; border-radius: 22px; box-shadow: 0 12px 40px #25244308; }
.portal-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.portal-panel-head a, .portal-text-button { color: #7046b8; font-size: 14px; border: 0; background: none; padding: 0; }
.portal-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(270px, 1fr); gap: 20px; margin-bottom: 20px; }
.portal-stack { display: grid; gap: 20px; }
.portal-survey-banner { background: linear-gradient(110deg, #f0e8ff, #e9ecff); border: 1px solid #dcd5f4; border-radius: 18px; padding: 19px 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.portal-survey-banner h2 { font-size: 17px; margin: 5px 0; }
.portal-survey-banner p { font-size: 13px; color: #706783; }
.portal-btn { display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 10px; padding: 10px 16px; background: #6845b9; color: white; font-size: 14px; font-weight: 500; text-align: center; line-height: 1.4; }
.portal-btn:hover { background: #54359f; }
.portal-btn.secondary { color: #4d416b; background: #f0edf8; border-color: #e3ddef; }
.portal-btn:disabled { background: #e9e6f0; color: #7f788d; }
.portal-task-row { display: flex; align-items: center; gap: 12px; padding: 15px 0; border-top: 1px solid #eeedf4; }
.portal-task-row:first-child { border-top: 0; padding-top: 0; }
.portal-subject-icon { flex-shrink: 0; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: #f0eafb; color: #7450bd; font-family: Inter, sans-serif; font-size: 18px; }
.portal-subject-icon.history { color: #a77332; background: #fcf2e2; }
.portal-subject-icon.geo { color: #367c76; background: #e5f4f0; }
.portal-task-info { min-width: 0; flex: 1; }
.portal-task-info strong { display: block; font-size: 14px; line-height: 1.4; }
.portal-task-info p { font-size: 12px; color: #80768f; margin-top: 4px; }
.portal-task-action { flex-shrink: 0; border: 1px solid #e3dbee; color: #67459f; background: #f9f6ff; border-radius: 8px; padding: 7px 10px; font-size: 12px; }
.portal-task-action.done { color: #31746e; background: #eef8f4; border-color: #dcf0e8; }
.portal-chart { display: flex; align-items: flex-end; gap: 16px; height: 155px; margin-top: 14px; padding-top: 18px; }
.portal-chart-col { flex: 1; height: 100%; display: flex; align-items: center; justify-content: flex-end; flex-direction: column; gap: 8px; min-width: 0; }
.portal-chart-bar { width: 100%; max-width: 36px; border-radius: 7px 7px 3px 3px; background: #e2dcf6; min-height: 5px; position: relative; }
.portal-chart-col:last-child .portal-chart-bar { background: linear-gradient(#a17ce1, #6744b6); }
.portal-chart-value { position: absolute; top: -22px; width: 100%; text-align: center; font-size: 12px; color: #81708f; }
.portal-chart-col:last-child .portal-chart-value { color: #604299; font-weight: 700; }
.portal-chart-label { font-size: 11px; color: #8b8298; white-space: nowrap; }
.portal-progress { width: 100%; height: 7px; background: #ede9f5; border-radius: 20px; overflow: hidden; margin: 10px 0; }
.portal-progress span { display: block; height: 100%; background: linear-gradient(90deg, #7550c0, #ae86e2); border-radius: inherit; }
.portal-subject-progress { margin-top: 17px; }
.portal-subject-progress > div:first-child { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.portal-leader { display: flex; gap: 12px; align-items: center; padding: 11px 10px; border-radius: 10px; font-size: 14px; }
.portal-leader.current { background: #eee9f9; color: #5e3c9d; font-weight: 500; }
.portal-leader-rank { width: 20px; text-align: center; color: #8a809b; }
.portal-leader-name { flex: 1; }
.portal-leader-score { font-family: Inter, sans-serif; font-weight: 700; }
.portal-months, .portal-weeks { display: flex; flex-wrap: wrap; gap: 8px; }
.portal-months button, .portal-weeks button { border: 1px solid #e4ddef; padding: 9px 16px; border-radius: 10px; background: #ffffffb0; color: #726484; font-size: 14px; }
.portal-months button[aria-selected="true"] { background: #172648; color: white; border-color: #172648; }
.portal-weeks { margin: 20px 0 24px; }
.portal-weeks button { flex: 1; min-width: 100px; text-align: left; background: #ffffffb8; }
.portal-weeks button[aria-selected="true"] { background: #ece5fa; color: #5a379b; border-color: #af91d8; }
.portal-weeks small { display: block; font-size: 12px; margin-top: 3px; }
.portal-task-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.portal-assignment { background: #ffffffed; border: 1px solid #fff; border-radius: 18px; padding: 22px; }
.portal-assignment-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 16px; }
.portal-badge { font-size: 12px; border-radius: 6px; padding: 4px 8px; background: #f0edf5; color: #756785; }
.portal-badge.done { background: #e6f3ed; color: #32705d; }
.portal-assignment h3 { margin-bottom: 8px; }
.portal-assignment p { font-size: 14px; color: #80758b; }
.portal-assignment-foot { margin-top: 22px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.portal-assignment-foot span { color: #81748c; font-size: 12px; }
.portal-table { width: 100%; border-collapse: collapse; font-size: 14px; text-align: left; }
.portal-table th { color: #85798f; font-weight: 400; font-size: 12px; padding: 12px; border-bottom: 1px solid #ece8f3; }
.portal-table td { padding: 15px 12px; border-bottom: 1px solid #f1edf7; }
.portal-table tr.current { background: #eee9f9; color: #5d3c9c; }
.portal-table-scroll { overflow-x: auto; }
.portal-definition { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.portal-definition dt { color: #887b92; font-size: 13px; margin-bottom: 5px; }
.portal-definition dd { font-size: 15px; color: #39324e; line-height: 1.5; }
.portal-profile-head { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; }
.portal-profile-head .portal-avatar { width: 62px; height: 62px; font-size: 22px; border-radius: 18px; }
.portal-profile-head p { margin-top: 4px; color: #85748e; font-size: 14px; }
.portal-poll-card { display: flex; align-items: center; gap: 22px; justify-content: space-between; padding: 22px 0; border-top: 1px solid #ece8f3; }
.portal-poll-card:first-child { padding-top: 0; border: 0; }
.portal-poll-card h3 { margin: 7px 0; }
.portal-poll-card p { color: #84768d; font-size: 14px; }
.portal-dialog { width: min(580px, calc(100% - 32px)); border: 1px solid #e4dcee; border-radius: 24px; padding: 30px; color: #302b47; background: #fcfaff; max-height: calc(100dvh - 40px); box-shadow: 0 24px 100px #0a132a4d; }
.portal-dialog::backdrop { background: #081026a8; backdrop-filter: blur(7px); }
.portal-dialog-top { display: flex; gap: 18px; justify-content: space-between; align-items: start; margin-bottom: 22px; }
.portal-dialog-close { border: 0; background: #eee8f7; color: #6f568e; border-radius: 9px; width: 32px; height: 32px; font-size: 22px; flex-shrink: 0; }
.portal-dialog h2 { font-size: 23px; }
.portal-dialog p { color: #7a6c89; font-size: 14px; line-height: 1.6; margin-top: 8px; }
.portal-dialog fieldset { border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }
.portal-dialog legend { margin-bottom: 12px; font-size: 15px; font-weight: 500; }
.portal-option { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #e1d8ed; border-radius: 10px; margin-bottom: 8px; font-size: 15px; cursor: pointer; }
.portal-option:has(input:checked) { background: #eee6fc; border-color: #9a73cf; }
.portal-option input { accent-color: #7550bc; width: 17px; height: 17px; }
.portal-dialog form > .portal-btn { width: 100%; }
.portal-result-score { font-size: 60px; font-family: Inter, sans-serif; color: #6843b1; font-weight: 700; text-align: center; margin: 12px 0; letter-spacing: -.06em; }
.portal-result-score small { font-size: 20px; color: #a396b3; }
.portal-feedback { padding: 14px; margin: 10px 0; border-radius: 12px; background: #f1edf8; font-size: 14px; line-height: 1.6; }
.portal-feedback.correct { background: #eaf6ef; color: #316b50; }
.portal-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: #172648; color: white; padding: 12px 22px; border-radius: 12px; box-shadow: 0 6px 28px #18294a30; z-index: 100; font-size: 14px; max-width: calc(100% - 32px); text-align: center; }
.portal-toast:empty { display: none; }
.portal-note { font-size: 13px; color: #83748e; margin-top: 18px; line-height: 1.6; }
.portal-empty { padding: 35px 0; text-align: center; color: #82758c; }
.portal-access-links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: -22px 0 22px; }
.portal-access-links a { display: block; border: 1px solid #ffffff35; background: #ffffff0c; color: #d5ddff; border-radius: 10px; text-align: center; padding: 12px 10px; font-size: 14px; line-height: 1.4; }
.portal-access-links a:hover { background: #ffffff1c; }
.portal-entry { max-width: 1240px; margin: 26px auto 0; padding: 0 16px; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.portal-entry a { display: flex; align-items: center; gap: 10px; padding: 11px 18px; color: #56437a; border: 1px solid #ffffff; background: #ffffffbd; border-radius: 100px; font-size: 14px; box-shadow: 0 5px 20px #30245407; }
.portal-entry a:hover { background: #eee5ff; }
@media (max-width: 1340px) { .portal-header, .portal-shell { margin-left: 20px; margin-right: 20px; } }
@media (max-width: 1050px) {
  .portal-shell { grid-template-columns: 180px minmax(0, 1fr); gap: 22px; }
  .portal-stats { grid-template-columns: repeat(2, 1fr); }
  .portal-grid { grid-template-columns: 1fr; }
  .portal-task-grid { grid-template-columns: 1fr; }
  .portal-header-label { display: none; }
}
@media (max-width: 760px) {
  .portal-header { margin: 10px 12px 0; padding: 12px 14px; border-radius: 20px; top: 10px; gap: 12px; }
  .portal-logo { width: 110px; }
  .portal-role-links a { padding: 6px 9px; font-size: 12px; }
  .portal-header .portal-avatar { display: none; }
  .portal-shell { display: block; margin: 18px 14px 40px; }
  .portal-sidebar { position: static; padding: 8px; margin-bottom: 24px; border-radius: 16px; }
  .portal-sidebar-label, .portal-student, .portal-nav-count { display: none; }
  .portal-nav { flex-direction: row; gap: 4px; overflow-x: auto; }
  .portal-nav a { padding: 10px 12px; font-size: 12px; gap: 6px; }
  .portal-nav-icon { display: none; }
  .portal-heading { align-items: start; gap: 10px; }
  .portal-heading .portal-chip { display: none; }
  .portal-stats { gap: 10px; }
  .portal-stat { padding: 17px 15px; border-radius: 16px; }
  .portal-stat-number { font-size: 30px; }
  .portal-survey-banner { flex-direction: column; align-items: stretch; padding: 18px; gap: 12px; }
  .portal-survey-banner .portal-btn { align-self: start; }
  .portal-panel { padding: 20px 17px; }
  .portal-panel-head h2 { font-size: 18px; }
  .portal-task-row { gap: 9px; }
  .portal-subject-icon { width: 35px; height: 35px; font-size: 16px; }
  .portal-task-action { padding: 7px; }
  .portal-chart { gap: 12px; }
  .portal-definition { grid-template-columns: 1fr; gap: 18px; }
  .portal-poll-card { align-items: start; flex-direction: column; gap: 14px; }
  .portal-dialog { padding: 22px; }
  .portal-weeks button { min-width: calc(50% - 8px); }
  .portal-entry { gap: 8px; margin-top: 22px; }
  .portal-entry a { padding: 10px 13px; font-size: 12px; }
}