:root {
  color-scheme: dark;
  --ink: #281b30;
  --muted: #766e7b;
  --green: #663b88;
  --lime: #f4d7e1;
  --paper: #faf7fc;
  --white: #fff;
  --line: #e9e1ed;
  --shadow: 0 16px 45px #281b3014;
  --brand-gradient: linear-gradient(135deg, #f26b78 0%, #bc58ae 42%, #648cdd 72%, #55c7b4 100%);
}
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f1eaf5;
  --muted: #b7aabd;
  --green: #795097;
  --lime: #f1b9cc;
  --paper: #17111f;
  --line: #3b2e45;
  --white: #241b2d;
  --shadow: 0 16px 45px #0005;
}
html[data-theme="dark"] body { background-color: var(--paper); color: var(--ink); }
html[data-theme="dark"] .topbar { border-color: var(--line); }
html[data-theme="dark"] .exam,
html[data-theme="dark"] .group-card,
html[data-theme="dark"] .professor-card,
html[data-theme="dark"] .home-card,
html[data-theme="dark"] .chat-panel,
html[data-theme="dark"] .chat-composer,
html[data-theme="dark"] .search,
html[data-theme="dark"] .search-panel,
html[data-theme="dark"] .empty,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .auth-card { background: var(--white); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .search input,
html[data-theme="dark"] .search-panel input,
html[data-theme="dark"] .search-panel select,
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field select,
html[data-theme="dark"] .field textarea { background: #19211d; color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .exam .meta span,
html[data-theme="dark"] .tags span { background: #29332d; color: var(--muted); border-color: var(--line); }
html[data-theme="dark"] .schedule,
html[data-theme="dark"] .note,
html[data-theme="dark"] .privacy,
html[data-theme="dark"] .community { background: #26352c; color: #c4d7c9; }
html[data-theme="dark"] .notice { background: #382e22; border-color: #594833; color: #ead3b1; }
html[data-theme="dark"] .close,
html[data-theme="dark"] .subtabs button { background: #29332d; color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .subtabs button.active { background: var(--green); color: #fff; }
html[data-theme="dark"] .brand-icon,
html[data-theme="dark"] .toplinks .primary,
html[data-theme="dark"] .submit { background: #245c45; color: #fff; }
html[data-theme="dark"] .toplinks a.active { background: #293a2e; }
html[data-theme="dark"] .toplinks a,
html[data-theme="dark"] .toplinks button:not(.primary),
html[data-theme="dark"] .footer button,
html[data-theme="dark"] .switch { color: #a5d3b6; }
html[data-theme="dark"] .toplinks button.profile-button { border: 1px solid #506856; background: #293a2e; color: #b8e3c5; }
html[data-theme="dark"] .hero h1 span { color: #a5d3b6; }
html[data-theme="dark"] .home-icon { background: #293a2e; color: #b8e3c5; }
html[data-theme="dark"] .home-card strong { color: #a5d3b6; }
html[data-theme="dark"] .chat-notice { background: #26352c; color: #c4d7c9; }
html[data-theme="dark"] .chat-notice b { color: #b8e3c5; }
html[data-theme="dark"] .chat-author { color: #a5d3b6; }
html[data-theme="dark"] .chat-message.own .chat-author { color: #ffd36f; }
html[data-theme="dark"] .chat-report { color: #ffc08a; }
html[data-theme="dark"] .chat-removed { color: var(--muted); }
html[data-theme="dark"] .chat-bar,
html[data-theme="dark"] .chat-composer { border-color: var(--line); }
html[data-theme="dark"] .chat-composer textarea { background: #19211d; color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .chat-composer textarea::placeholder { color: #91a198; }
html[data-theme="dark"] .preview-file-select { background: #19211d; color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .keep-report { background: #294332; color: #b8e3c5; }
html[data-theme="dark"] .remove-message { background: #462f28; color: #ffc0a7; }
html[data-theme="dark"] .action-secondary { background: #202824; color: #b8e3c5; border-color: #46534b; }
html[data-theme="dark"] .exam-title:hover { color: #a5d3b6; }
html[data-theme="dark"] .preview-body { background: #202824; }
html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .pill { background: #293a2e; color: #b8e3c5; }
html[data-theme="dark"] .download,
html[data-theme="dark"] .report-button { color: #a5d3b6; }
html[data-theme="dark"] .searchbox { color: #bdc9c2; }
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #91a198; opacity: 1; }
html[data-theme="dark"] .search button,
html[data-theme="dark"] .search-panel .searchbtn { background: #c8e584; color: #1a241e; }
html[data-theme="dark"] .file-icon { background: #422f25; color: #ffc49c; }
html[data-theme="dark"] .review-item p,
html[data-theme="dark"] .pending p,
html[data-theme="dark"] .chat-body { color: #d3ddd7; }
html[data-theme="dark"] .rating-picker button { background: #202824; color: #9daaa2; border-color: #46534b; }
html[data-theme="dark"] .rating-picker button.selected,
html[data-theme="dark"] .rating-picker button[aria-pressed="true"] { background: #3c3424; color: #ffd36f; border-color: #77623b; }
html[data-theme="dark"] .approve { background: #294332; color: #b8e3c5; }
html[data-theme="dark"] .reject { background: #462f28; color: #ffc0a7; }
html[data-theme="dark"] .status { color: #ffad94; }
html[data-theme="dark"] .status.success { color: #a8ddb8; }
html[data-theme="dark"] .art-card { color: #18241f; }
html[data-theme="dark"] .auth-card { box-shadow: 0 24px 80px #0005; }
html[data-theme="dark"] body:has(.auth-card) { background: linear-gradient(145deg, #151b18, #202b24); }

.profile-button { white-space: nowrap; }
.brand-logo { object-fit: cover; flex: none; border-radius: 12px; background: #160b21; }
html[data-theme="dark"] .brand-logo { background: #160b21; }
.footer-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer-recommendation { border: 0; padding: 0; background: transparent; color: #245c45; font: inherit; font-weight: 850; cursor: pointer; }
.recommendation-invite { display: grid; grid-template-columns: 54px minmax(0,1fr) auto; align-items: center; gap: 18px; margin: -28px 0 54px; padding: 23px 25px; border: 1px solid #dce5d6; border-radius: 19px; background: linear-gradient(115deg, #f0f5e9 0%, #fff 72%); box-shadow: 0 14px 38px #17231c0c; }
.recommendation-invite-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: #245c45; color: #d8ed83; font-size: 24px; box-shadow: 0 8px 18px #245c452b; }
.recommendation-kicker { color: #527253; font-size: 10px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.recommendation-invite-copy h2 { margin: 5px 0 5px; color: var(--ink); font-size: clamp(18px,2vw,23px); letter-spacing: -.6px; }
.recommendation-invite-copy p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.recommendation-invite-button { display: inline-flex; align-items: center; justify-content: center; gap: 17px; min-height: 46px; padding: 0 17px; border: 0; border-radius: 11px; background: #245c45; color: #fff; font-size: 12px; font-weight: 850; white-space: nowrap; cursor: pointer; box-shadow: 0 8px 18px #245c4526; }
.recommendation-invite-button span:last-child { color: #d8ed83; font-size: 17px; transition: transform 180ms ease; }
.recommendation-invite-button:hover span:last-child { transform: translateX(3px); }
.recommendation-invite-button:hover { background: #1b4d39; box-shadow: 0 11px 24px #245c4533; }
.recommendation-invite-button:focus-visible { outline: 3px solid #b3d87a; outline-offset: 3px; }
.recommendation-overlay { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; padding: 18px; background: #101812b3; }
.recommendation-overlay.open { display: flex; animation: overlay-enter 220ms ease-out both; }
.recommendation-modal { width: min(540px, 100%); max-height: 92vh; overflow: auto; padding: 24px; border: 1px solid var(--line); border-radius: 17px; background: var(--white, #fff); color: var(--ink); box-shadow: 0 24px 70px #0004; animation: modal-enter 320ms cubic-bezier(.18,.82,.25,1) both; }
.recommendation-form { display: grid; gap: 9px; }
.recommendation-form label { margin-top: 8px; font-size: 12px; font-weight: 800; }
.recommendation-form input, .recommendation-form select, .recommendation-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 11px 12px; background: var(--white, #fff); color: var(--ink); font: inherit; font-size: 13px; }
.recommendation-form textarea { resize: vertical; }
.recommendation-form .profile-save { margin-top: 0; }
.recommendation-status { min-height: 1.4em; margin: 3px 0 0; color: var(--muted); font-size: 12px; }
html[data-theme="dark"] .footer-recommendation { color: #a5d3b6; }
html[data-theme="dark"] .recommendation-invite { border-color: #39473c; background: linear-gradient(115deg, #202d24 0%, #202824 72%); box-shadow: 0 14px 38px #0003; }
html[data-theme="dark"] .recommendation-kicker { color: #b8d7a7; }
html[data-theme="dark"] .recommendation-invite-button { background: #2d7254; color: #fff; }
html[data-theme="dark"] .recommendation-form input, html[data-theme="dark"] .recommendation-form select, html[data-theme="dark"] .recommendation-form textarea { background: #19211d; color: var(--ink); border-color: var(--line); }
.brand-link { color: inherit; text-decoration: none; }
.profile-overlay { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; padding: 18px; background: #101812b3; }
.profile-overlay.open { display: flex; }
.profile-modal { width: min(490px, 100%); max-height: 92vh; overflow: auto; padding: 24px; border: 1px solid var(--line); border-radius: 17px; background: var(--white, #fff); color: var(--ink); box-shadow: 0 24px 70px #0004; }
.profile-head { display: flex; justify-content: space-between; align-items: start; gap: 16px; margin-bottom: 19px; }
.profile-head h2 { margin: 0; font-size: 22px; }
.profile-head p { margin: 6px 0 0; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.profile-close { width: 32px; height: 32px; border: 0; border-radius: 8px; background: #eef1eb; color: #18241f; font-size: 20px; cursor: pointer; }
.profile-back { border: 0; padding: 7px 0; background: transparent; color: #245c45; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.profile-section { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 16px; }
.profile-section h3 { margin: 0 0 10px; font-size: 14px; }
.profile-section label { display: block; margin: 11px 0 6px; font-size: 12px; font-weight: 750; }
.profile-section input, .profile-section select { width: 100%; border: 1px solid var(--line); border-radius: 9px; background: var(--white, #fff); color: var(--ink); padding: 11px 12px; font: inherit; font-size: 13px; }
.profile-help, .profile-status { color: var(--muted); font-size: 11px; line-height: 1.5; }
.profile-status { min-height: 1.5em; margin: 9px 0 0; }
.profile-save, .profile-signout { width: 100%; margin-top: 10px; padding: 12px; border: 0; border-radius: 9px; background: #245c45; color: #fff; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.profile-save:disabled, .profile-signout:disabled { opacity: .6; cursor: wait; }
.profile-signout { background: #f3e8e3; color: #9b492e; }
.chat-author { border: 0; padding: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.chat-author:hover { text-decoration: underline; }
.friend-results { display: grid; gap: 10px; }
.friend-card { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--white, #fff); }
.friend-card strong { font-size: 13px; overflow-wrap: anywhere; }
.friend-card p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.friend-card-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.friend-secondary, .friend-accept { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: #eef1eb; color: var(--ink); font: inherit; font-size: 11px; font-weight: 750; cursor: pointer; }
.friend-accept { border-color: transparent; background: #245c45; color: #fff; }
.friend-actions { display: flex; gap: 8px; }
.friend-actions .profile-save { margin-top: 0; }
.profile-section > .profile-save + .profile-save { margin-top: 8px; }
.private-chat-messages { display: flex; flex-direction: column; gap: 9px; min-height: 220px; max-height: 45vh; overflow: auto; padding: 12px 2px; }
.private-message { align-self: flex-start; max-width: 88%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px 12px 12px 3px; background: #eef1eb; }
.private-message.own { align-self: flex-end; border-color: transparent; border-radius: 12px 12px 3px 12px; background: #245c45; color: #fff; }
.private-message strong, .private-message time { display: block; font-size: 10px; opacity: .8; }
.private-message p { margin: 5px 0; font-size: 12px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.private-chat-form { display: flex; align-items: end; gap: 9px; border-top: 1px solid var(--line); padding-top: 12px; }
.private-chat-form textarea { flex: 1; min-height: 45px; max-height: 110px; resize: vertical; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--white, #fff); color: var(--ink); font: inherit; font-size: 12px; }
.private-chat-form .profile-save { width: auto; min-width: 78px; margin: 0; }
.private-chat-form button:disabled { opacity: .6; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
html[data-theme="dark"] .friend-card { background: #19211d; border-color: var(--line); }
html[data-theme="dark"] .friend-secondary { background: #29332d; color: var(--ink); border-color: #46534b; }
html[data-theme="dark"] .friend-accept { background: #245c45; color: #fff; }
html[data-theme="dark"] .private-message:not(.own) { background: #29332d; border-color: var(--line); color: var(--ink); }
html[data-theme="dark"] .private-chat-form textarea { background: #19211d; color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .profile-close { background: #29332d; color: var(--ink); }
html[data-theme="dark"] .profile-back { color: #a5d3b6; }
html[data-theme="dark"] .profile-signout { background: #452d27; color: #f3b8a4; }

/* Shared motion language for page changes, dialogs and interactive content. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: page-leave 180ms ease-in both; }
::view-transition-new(root) { animation: page-enter 340ms cubic-bezier(.2,.75,.25,1) both; }
.hero, .features, .content, .chat-panel, .section-head, .recommendation-invite, .shell.footer { animation: content-enter 480ms cubic-bezier(.2,.75,.25,1) both; }
.hero { animation-delay: 35ms; }
.feature-grid > *, .grid > *, .items > *, .friend-results > * { animation: card-enter 360ms cubic-bezier(.2,.75,.25,1) both; }
.feature-grid > :nth-child(2), .grid > :nth-child(2), .items > :nth-child(2) { animation-delay: 35ms; }
.feature-grid > :nth-child(3), .grid > :nth-child(3), .items > :nth-child(3) { animation-delay: 70ms; }
.feature-grid > :nth-child(4), .grid > :nth-child(4), .items > :nth-child(4) { animation-delay: 105ms; }
a, button, input, textarea, select, .exam, .group-card, .professor-card, .home-card, .modal, .preview-modal, .profile-modal, .chat-panel, .friend-card {
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 220ms ease, transform 220ms cubic-bezier(.2,.75,.25,1), opacity 180ms ease;
}
.toplinks a:hover, .toplinks button:hover, .profile-back:hover { transform: translateY(-1px); }
.home-card:hover, .exam:hover, .group-card:hover, .professor-card:hover, .friend-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px #17231c18; }
button:not(:disabled):hover { filter: brightness(1.045); }
button:not(:disabled):active { transform: translateY(1px) scale(.985); }
.profile-overlay.open { animation: overlay-enter 220ms ease-out both; }
.profile-overlay.open .profile-modal { animation: modal-enter 340ms cubic-bezier(.18,.82,.25,1) both; }
.overlay.open .modal, .preview-overlay.open .preview-modal { animation: modal-enter 320ms cubic-bezier(.18,.82,.25,1) both; }
.profile-view-enter { animation: content-enter 260ms cubic-bezier(.2,.75,.25,1) both; }
.private-message { animation: card-enter 240ms ease-out both; }
.toast.show, .chat-toast.show { animation: toast-enter 260ms cubic-bezier(.18,.82,.25,1) both; }
@keyframes page-enter { from { opacity: .75; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes page-leave { to { opacity: .75; transform: translateY(-5px); } }
@keyframes content-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes card-enter { from { opacity: 0; transform: translateY(9px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes overlay-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-enter { from { opacity: 0; transform: translateY(18px) scale(.975); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes toast-enter { from { opacity: 0; transform: translate(-50%, 12px) scale(.97); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  @view-transition { navigation: none; }
}
@media (max-width: 620px) {
  .topbar { height: auto !important; min-height: 65px; padding-top: 8px; padding-bottom: 8px; gap: 8px; }
  .toplinks { flex-wrap: wrap; justify-content: flex-end; }
  .profile-button { padding: 8px 7px !important; font-size: 10px !important; }
  .profile-modal { padding: 20px; }
  .recommendation-invite { grid-template-columns: 44px minmax(0,1fr); gap: 13px; margin: -15px 0 40px; padding: 18px; }
  .recommendation-invite-icon { width: 44px; height: 44px; border-radius: 13px; font-size: 20px; }
  .recommendation-invite-copy h2 { font-size: 18px; }
  .recommendation-invite-copy p { font-size: 11px; }
  .recommendation-invite-button { grid-column: 1 / -1; width: 100%; }
}

/* Logo-inspired colors: violet foundation with small coral and aqua accents. */
.toplinks a.active, .toplinks a:hover, .eyebrow, .art-tag, .pill, .home-icon, .action-secondary,
.subtabs button.active, .tabs button.active, .section-head button,
.note, .community, .chat-notice, .privacy, .schedule {
  background-color: #f1e9f6;
  color: #5b3777;
}
.hero-art { background: linear-gradient(135deg, #27152f 0%, #603982 65%, #466f9e 100%); }
.hero-art:before, .art-sun { background: linear-gradient(135deg, #f36d78, #cc5eaa 52%, #65a7dd); }
.art-note, .art-label { color: #f0deef; }
.home-icon { background-color: #f1e9f6; }
.profile-save, .friend-accept, .recommendation-invite-icon,
.recommendation-invite-button, .private-message.own {
  background: var(--green);
}
.recommendation-invite { border-color: #e6d9ec; background: linear-gradient(115deg, #f5eef8 0%, #fff 72%); }
.recommendation-kicker { color: #70488c; }
.recommendation-invite-button span:last-child { color: #f3b6cb; }
.profile-back, .footer-recommendation { color: #663b88; }
.chat-author { color: #663b88; }
.chat-report, .report-button { color: #bd5d72; }

html[data-theme="dark"] .toplinks a.active,
html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .art-tag,
html[data-theme="dark"] .pill,
html[data-theme="dark"] .home-icon,
html[data-theme="dark"] .action-secondary,
html[data-theme="dark"] .subtabs button,
html[data-theme="dark"] .section-head button,
html[data-theme="dark"] .note,
html[data-theme="dark"] .community,
html[data-theme="dark"] .chat-notice,
html[data-theme="dark"] .privacy,
html[data-theme="dark"] .schedule,
html[data-theme="dark"] .friend-secondary,
html[data-theme="dark"] .private-message:not(.own) {
  background: #33263d;
  color: #e5d3ef;
  border-color: #493953;
}
html[data-theme="dark"] .toplinks a,
html[data-theme="dark"] .toplinks button:not(.primary),
html[data-theme="dark"] .footer button,
html[data-theme="dark"] .switch,
html[data-theme="dark"] .profile-back,
html[data-theme="dark"] .download,
html[data-theme="dark"] .chat-author { color: #d2afe9; }
html[data-theme="dark"] .hero-art { background: linear-gradient(135deg, #1d1426 0%, #412858 65%, #294664 100%); }
html[data-theme="dark"] .art-note, html[data-theme="dark"] .art-label { color: #f0deef; }
html[data-theme="dark"] .hero h1 span, html[data-theme="dark"] .home-card strong { color: #d2afe9; }
html[data-theme="dark"] .recommendation-invite { border-color: #493953; background: linear-gradient(115deg, #2b2034 0%, #241b2d 72%); }
html[data-theme="dark"] .recommendation-kicker { color: #d3b3e7; }
html[data-theme="dark"] .search button,
html[data-theme="dark"] .search-panel .searchbtn { background: var(--lime); color: #281b30; }
html[data-theme="dark"] .brand-icon:not(.brand-logo),
html[data-theme="dark"] .toplinks .primary,
html[data-theme="dark"] .submit,
html[data-theme="dark"] .profile-save,
html[data-theme="dark"] .friend-accept,
html[data-theme="dark"] .recommendation-invite-button { background: #795097; color: #fff; }
html[data-theme="dark"] .private-message.own { background: #795097; color: #fff; }
html[data-theme="dark"] .approve, html[data-theme="dark"] .keep-report { background: #342741; color: #c9a7e0; }
html[data-theme="dark"] .reject, html[data-theme="dark"] .remove-message { background: #432932; color: #f2adbf; }
html[data-theme="dark"] .search input,
html[data-theme="dark"] .search-panel input,
html[data-theme="dark"] .search-panel select,
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field select,
html[data-theme="dark"] .field textarea,
html[data-theme="dark"] .chat-composer textarea,
html[data-theme="dark"] .recommendation-form input,
html[data-theme="dark"] .recommendation-form select,
html[data-theme="dark"] .recommendation-form textarea,
html[data-theme="dark"] .private-chat-form textarea {
  background: #1d1625;
  color: var(--ink);
  border-color: var(--line);
}
html[data-theme="dark"] .close, html[data-theme="dark"] .profile-close { background: #33263d; color: var(--ink); }
html[data-theme="dark"] .toplinks button.profile-button { border-color: #59446a; background: #33263d; color: #d2afe9; }
html[data-theme="dark"] .art-card { color: #281b30; }

/* Shared professor lists */
.professor-card-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.professor-list-badge { display:inline-flex; align-items:center; gap:5px; flex:0 0 auto; border-radius:999px; padding:6px 10px; font-size:10px; font-weight:850; letter-spacing:.01em; }
.gold-badge { color:#674600; background:linear-gradient(120deg,#fff9dc 0%,#f9e79e 18%,#e7bd55 43%,#fff2b8 67%,#d39a24 100%); border:1px solid #c99a2c; box-shadow:inset 0 1px 0 #ffffffc9,0 3px 12px #c99a2c45; }
.black-badge { color:#f3e7f5; background:radial-gradient(ellipse at 18% 0%,#70466588,transparent 45%),linear-gradient(135deg,#443044 0%,#241927 42%,#120e17 100%); border:1px solid #8b647f; box-shadow:inset 0 1px 0 #f1d9f02b,0 4px 16px #160d1d66,0 0 10px #6e3b6640; }
.professor-card.is-gold, .group-card.is-gold { border:1px solid #c99a2c; box-shadow:0 0 0 2px #c99a2c35,0 10px 28px #b7872520; }
.professor-card.is-black, .group-card.is-black { border:1px solid #65586e; box-shadow:0 0 0 2px #65586e38,0 10px 28px #0002; }
.professor-list-controls { display:flex; flex-wrap:wrap; gap:7px; margin:11px 0 13px; }
.list-toggle { border:1px solid var(--line); border-radius:999px; padding:7px 10px; color:var(--muted); background:transparent; font-size:10px; font-weight:800; transition:transform .18s ease,background .18s ease,border-color .18s ease; }
.list-toggle:hover { transform:translateY(-1px); }
.list-toggle.gold-toggle.selected { color:#674600; background:linear-gradient(120deg,#fff9dc 0%,#f9e79e 18%,#e7bd55 43%,#fff2b8 67%,#d39a24 100%); border-color:#c99a2c; box-shadow:inset 0 1px 0 #ffffffc9,0 3px 12px #c99a2c35; }
.list-toggle.black-toggle.selected { color:#f3e7f5; background:radial-gradient(ellipse at 18% 0%,#70466588,transparent 45%),linear-gradient(135deg,#443044 0%,#241927 42%,#120e17 100%); border-color:#8b647f; box-shadow:inset 0 1px 0 #f1d9f02b,0 4px 14px #160d1d66,0 0 9px #6e3b6640; }
.optional-list-note { margin:7px 0 0; color:var(--muted); font-size:11px; line-height:1.5; }
html[data-theme="dark"] .professor-card.is-gold, html[data-theme="dark"] .group-card.is-gold { border-color:#c99a2c; box-shadow:0 0 0 2px #c99a2c45,0 10px 28px #0003; }
html[data-theme="dark"] .professor-card.is-black, html[data-theme="dark"] .group-card.is-black { border-color:#8d7c98; box-shadow:0 0 0 2px #8d7c9840,0 10px 28px #0003; }
html[data-theme="dark"] .list-toggle.gold-toggle.selected { color:#ffedb0; background:linear-gradient(120deg,#715522 0%,#574016 25%,#a97d22 50%,#70541e 74%,#4f3912 100%); border-color:#c99a2c; box-shadow:inset 0 1px 0 #fff6c255,0 3px 12px #c99a2c35; }
html[data-theme="dark"] .list-toggle.black-toggle.selected { color:#f5e7f5; background:radial-gradient(ellipse at 18% 0%,#86577a99,transparent 48%),linear-gradient(135deg,#4a3349 0%,#241927 44%,#100c14 100%); border-color:#a47c9a; box-shadow:inset 0 1px 0 #f1d9f040,0 4px 16px #0008,0 0 12px #80527755; }
@media(max-width:580px) { .professor-card-heading { align-items:flex-start; } .professor-list-badge { font-size:9px; padding:5px 8px; } }

/* Keep yellow information notices visually consistent across pages. */
.notice { margin:0 0 20px; padding:13px 15px; background:#fff5e9; border:1px solid #f3dfc8; color:#70553f; border-radius:12px; font-size:12px; line-height:1.55; }
html[data-theme="dark"] .notice { background:#382e22; border-color:#594833; color:#ead3b1; }
.search-filterbar { display:flex; flex-wrap:wrap; align-items:center; gap:9px; }
.search-filterbar input { flex:1 1 250px; min-width:0; }
.filter-menu { position:relative; flex:0 0 auto; }
.filter-trigger { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:44px; padding:0 15px; border:1px solid var(--line); border-radius:10px; background:var(--white); color:var(--ink); font-size:12px; font-weight:800; box-shadow:0 3px 10px #281b300d; transition:transform .18s ease,border-color .18s ease,background .18s ease; }
.search .filter-trigger { border:1px solid var(--line); background:var(--white); color:var(--ink); padding:0 15px; }
.filter-trigger:hover, .filter-trigger[aria-expanded="true"] { transform:translateY(-1px); border-color:#9d78b5; background:#f5eff8; }
.filter-trigger > span:first-child { color:#795097; font-size:18px; line-height:1; }
.filter-count { display:grid; place-items:center; min-width:19px; height:19px; padding:0 5px; border-radius:999px; background:#795097; color:#fff; font-size:10px; }
.filter-panel { position:absolute; z-index:12; top:calc(100% + 10px); right:0; display:grid; gap:8px; width:min(340px,calc(100vw - 38px)); padding:16px; border:1px solid var(--line); border-radius:14px; background:var(--white); color:var(--ink); box-shadow:0 18px 45px #170d2050; animation:filter-panel-enter .16s ease-out both; }
.filter-panel[hidden] { display:none !important; }
.filter-panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:2px; }
.filter-panel-head strong { font-size:13px; }
.filter-panel label { margin-top:3px; color:var(--muted); font-size:11px; font-weight:750; }
.custom-select { position:relative; width:100%; }
.native-filter-select { display:none !important; }
.custom-select-trigger { display:flex; width:100%; min-height:42px; align-items:center; justify-content:space-between; gap:10px; padding:0 12px; border:1px solid var(--line); border-radius:11px; background:var(--paper); color:var(--ink); font-size:12px; text-align:left; transition:border-color .18s ease,background .18s ease,box-shadow .18s ease; }
.custom-select-trigger:hover, .custom-select-trigger[aria-expanded="true"] { border-color:#9d78b5; background:#f8f3fa; box-shadow:0 0 0 3px #79509718; }
.custom-select-value { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.custom-select-caret { color:#795097; font-size:18px; line-height:1; transition:transform .18s ease; }
.custom-select-trigger[aria-expanded="true"] .custom-select-caret { transform:rotate(180deg); }
.custom-select-menu { position:absolute; z-index:18; top:calc(100% + 6px); left:0; width:100%; max-height:230px; overflow:auto; padding:5px; border:1px solid var(--line); border-radius:13px; background:var(--white); box-shadow:0 14px 32px #170d2038; }
.custom-select-menu[hidden] { display:none !important; }
.custom-select-option { display:block; width:100%; padding:10px 11px; border:0; border-radius:8px; background:transparent; color:var(--ink); font-size:12px; text-align:left; cursor:pointer; }
.custom-select-option:hover, .custom-select-option:focus-visible { outline:none; background:#f1e9f6; color:#5b3777; }
.custom-select-option[aria-selected="true"] { background:#f5eff8; color:#5b3777; font-weight:800; }
.custom-select-option[disabled] { opacity:.5; cursor:not-allowed; }
.custom-select-option.list-option-gold, .custom-select-option.list-option-gold[aria-selected="true"] { position:relative; overflow:hidden; border:1px solid #c99a2c; background:linear-gradient(110deg,#fff9dc 0%,#f8e496 17%,#d8a52e 43%,#fff4bf 66%,#c99120 100%); color:#523900; font-weight:850; text-shadow:0 1px 0 #fff8d8; box-shadow:inset 0 1px 0 #ffffffd9,inset 0 -1px 0 #a9741238,0 2px 8px #bd8a2633; }
.custom-select-option.list-option-gold::after { position:absolute; top:-40%; bottom:-40%; left:-48%; width:34%; background:linear-gradient(90deg,transparent,#ffffffb8,transparent); content:""; transform:skewX(-20deg); transition:left .55s ease; pointer-events:none; }
.custom-select-option.list-option-gold:hover::after, .custom-select-option.list-option-gold:focus-visible::after { left:118%; }
.custom-select-option.list-option-gold:hover, .custom-select-option.list-option-gold:focus-visible { border-color:#b57f17; background:linear-gradient(110deg,#fffce9 0%,#ffed9c 17%,#e6b83e 43%,#fff8cf 66%,#d6a02b 100%); color:#493100; box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 #a9741238,0 3px 13px #bd8a2655; }
.custom-select-option.list-option-black, .custom-select-option.list-option-black[aria-selected="true"] { position:relative; overflow:hidden; border:1px solid #8b647f; background:radial-gradient(ellipse at 18% 0%,#70466588,transparent 45%),linear-gradient(135deg,#443044 0%,#241927 42%,#120e17 100%); color:#f3e7f5; font-weight:850; text-shadow:0 1px 3px #000; box-shadow:inset 0 1px 0 #f1d9f02b,0 3px 10px #160d1d66,0 0 8px #6e3b6633; }
.custom-select-option.list-option-black::after { position:absolute; top:-40%; bottom:-40%; left:-48%; width:34%; background:linear-gradient(90deg,transparent,#e9c6e766,transparent); content:""; transform:skewX(-20deg); transition:left .6s ease; pointer-events:none; }
.custom-select-option.list-option-black:hover::after, .custom-select-option.list-option-black:focus-visible::after { left:118%; }
.custom-select-option.list-option-black:hover, .custom-select-option.list-option-black:focus-visible { border-color:#b17fa2; background:radial-gradient(ellipse at 18% 0%,#9a648c99,transparent 48%),linear-gradient(135deg,#54384f 0%,#2b1e31 44%,#151019 100%); color:#fff7ff; box-shadow:inset 0 1px 0 #f1d9f055,0 4px 14px #160d1d88,0 0 12px #80527766; }
.custom-select-trigger[data-value="gold"] { border-color:#c99a2c; background:linear-gradient(110deg,#fff9dc 0%,#f8e496 20%,#dfb13f 48%,#fff4bf 72%,#c99120 100%); color:#523900; box-shadow:inset 0 1px 0 #ffffffd9,0 2px 8px #bd8a2633; }
.custom-select-trigger[data-value="black"] { border-color:#8b647f; background:radial-gradient(ellipse at 18% 0%,#70466588,transparent 45%),linear-gradient(135deg,#443044 0%,#241927 42%,#120e17 100%); color:#f3e7f5; box-shadow:inset 0 1px 0 #f1d9f02b,0 3px 10px #160d1d66,0 0 8px #6e3b6633; }
.group-card-actions { display:flex; justify-content:flex-end; margin-top:13px; padding-top:9px; border-top:1px solid var(--line); }
.group-report-button { border:0; border-radius:8px; padding:7px 9px; background:transparent; color:#bd5d72; font-size:10px; font-weight:800; transition:background .18s ease,color .18s ease; }
.group-report-button:hover { background:#fbeaf0; color:#963e58; }
html[data-theme="dark"] .custom-select-trigger { background:#1d1625; color:var(--ink); border-color:var(--line); }
html[data-theme="dark"] .custom-select-trigger:hover, html[data-theme="dark"] .custom-select-trigger[aria-expanded="true"] { background:#33263d; border-color:#795097; }
html[data-theme="dark"] .custom-select-caret { color:#d2afe9; }
html[data-theme="dark"] .custom-select-menu { background:#241b2d; border-color:var(--line); box-shadow:0 14px 32px #0007; }
html[data-theme="dark"] .custom-select-option:hover, html[data-theme="dark"] .custom-select-option:focus-visible,
html[data-theme="dark"] .custom-select-option[aria-selected="true"] { background:#3a2c45; color:#eadcf3; }
html[data-theme="dark"] .custom-select-option.list-option-gold, html[data-theme="dark"] .custom-select-option.list-option-gold[aria-selected="true"] { border-color:#aa812b; background:linear-gradient(110deg,#715522 0%,#574016 25%,#a97d22 50%,#70541e 74%,#4f3912 100%); color:#ffedb0; text-shadow:0 1px 0 #33240a; box-shadow:inset 0 1px 0 #fff6c255,0 2px 8px #0004; }
html[data-theme="dark"] .custom-select-option.list-option-gold:hover, html[data-theme="dark"] .custom-select-option.list-option-gold:focus-visible { border-color:#d0a446; background:linear-gradient(110deg,#8a692c 0%,#694e1b 25%,#bd9237 50%,#8b6a29 74%,#634818 100%); color:#fff6d5; box-shadow:inset 0 1px 0 #fff8d888,0 3px 12px #0005; }
html[data-theme="dark"] .custom-select-option.list-option-black, html[data-theme="dark"] .custom-select-option.list-option-black[aria-selected="true"] { border-color:#a47c9a; background:radial-gradient(ellipse at 18% 0%,#86577a99,transparent 48%),linear-gradient(135deg,#4a3349 0%,#241927 44%,#100c14 100%); color:#f5e7f5; text-shadow:0 1px 3px #000; box-shadow:inset 0 1px 0 #f1d9f040,0 3px 12px #0008,0 0 10px #80527744; }
html[data-theme="dark"] .custom-select-option.list-option-black:hover, html[data-theme="dark"] .custom-select-option.list-option-black:focus-visible { border-color:#c194b2; background:radial-gradient(ellipse at 18% 0%,#a8759bba,transparent 50%),linear-gradient(135deg,#60445e 0%,#302237 44%,#151019 100%); color:#fff7ff; box-shadow:inset 0 1px 0 #f1d9f077,0 4px 14px #0009,0 0 13px #97668c77; }
html[data-theme="dark"] .custom-select-trigger[data-value="gold"] { border-color:#aa812b; background:linear-gradient(110deg,#715522 0%,#574016 25%,#a97d22 50%,#70541e 74%,#4f3912 100%); color:#ffedb0; box-shadow:inset 0 1px 0 #fff6c255,0 2px 8px #0004; }
html[data-theme="dark"] .custom-select-trigger[data-value="black"] { border-color:#a47c9a; background:radial-gradient(ellipse at 18% 0%,#86577a99,transparent 48%),linear-gradient(135deg,#4a3349 0%,#241927 44%,#100c14 100%); color:#f5e7f5; box-shadow:inset 0 1px 0 #f1d9f040,0 3px 12px #0008,0 0 10px #80527744; }
html[data-theme="dark"] .group-card-actions { border-color:var(--line); }
html[data-theme="dark"] .group-report-button { color:#f2adbf; }
html[data-theme="dark"] .group-report-button:hover { background:#432932; color:#ffd3df; }
.filter-panel .filter-reset { min-height:auto; padding:7px 10px; border:0; border-radius:8px; background:#5b3777; color:#fff; font-size:11px; font-weight:850; }
.filter-panel .filter-reset:hover { background:#42245a; color:#fff; }
html[data-theme="dark"] .filter-trigger { background:#241b2d; color:var(--ink); border-color:var(--line); box-shadow:0 3px 10px #0003; }
html[data-theme="dark"] .search .filter-trigger { background:#241b2d; color:var(--ink); border-color:var(--line); }
html[data-theme="dark"] .filter-trigger:hover, html[data-theme="dark"] .filter-trigger[aria-expanded="true"] { background:#33263d; border-color:#795097; }
html[data-theme="dark"] .filter-panel .filter-reset { background:#795097; color:#fff; }
html[data-theme="dark"] .filter-panel .filter-reset:hover { background:#623d7e; color:#fff; }
@keyframes filter-panel-enter { from { opacity:0; transform:translateY(-5px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } }
@media(max-width:580px) { .search-filterbar input { flex-basis:100%; width:100%; } .filter-menu { width:100%; } .filter-trigger { width:100%; } .filter-panel { right:auto; left:0; } }

/* Search bar on the exam library, aligned with the shared Utesianos search style. */
.exam-search {
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border-radius:18px;
  border-color:color-mix(in srgb, var(--line) 78%, #a87bc3 22%);
  background:var(--white);
  box-shadow:0 12px 32px #281b3010;
}
.exam-search .searchbox {
  flex:1 1 300px;
  min-width:0;
  gap:11px;
  padding:0 14px;
  border:1px solid var(--line);
  border-radius:13px;
  background:#f8f4fa;
  color:#795097;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.exam-search .searchbox:focus-within {
  border-color:#a77ac0;
  background:var(--white);
  box-shadow:0 0 0 3px #9b70b51c;
}
.exam-search .searchbox > span { font-size:21px; line-height:1; }
.exam-search .searchbox input {
  min-width:0;
  height:46px;
  border:0;
  background:transparent;
  color:var(--ink);
  outline:0;
}
.exam-search .searchbox input::placeholder { color:var(--muted); opacity:.9; }
.exam-search > .custom-select {
  flex:0 1 205px;
  width:auto;
  min-width:160px;
}
.exam-search .custom-select-trigger { width:100%; min-height:46px; border-radius:13px; }
.exam-search .custom-select-menu { max-height:min(300px,55vh); overflow-y:auto; }
.exam-search select {
  flex:0 1 205px;
  min-width:160px;
  height:46px;
  padding:0 34px 0 13px;
  border:1px solid var(--line);
  border-radius:13px;
  background-color:#f8f4fa;
  color:var(--ink);
  cursor:pointer;
  outline:0;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.exam-search select:focus-visible { border-color:#a77ac0; box-shadow:0 0 0 3px #9b70b51c; }
.exam-search .searchbtn {
  flex:0 0 auto;
  min-height:46px;
  padding:0 19px;
  border:1px solid #6e468a;
  border-radius:13px;
  background:linear-gradient(135deg,#795097,#623b7d);
  color:#fff;
  font-size:12px;
  font-weight:850;
  box-shadow:0 5px 14px #60387828;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.exam-search .searchbtn:hover { transform:translateY(-1px); filter:brightness(1.07); box-shadow:0 8px 18px #60387835; }
.exam-search .searchbtn:focus-visible { outline:3px solid #b991d0; outline-offset:2px; }
html[data-theme="dark"] .exam-search { border-color:var(--line); box-shadow:0 12px 32px #0003; }
html[data-theme="dark"] .exam-search .searchbox,
html[data-theme="dark"] .exam-search select { background:#1d1625; border-color:#493953; color:var(--ink); }
html[data-theme="dark"] .exam-search .searchbox:focus-within,
html[data-theme="dark"] .exam-search select:focus-visible { background:#241b2d; border-color:#9a72b5; }
html[data-theme="dark"] .exam-search .searchbox > span { color:#d2afe9; }
html[data-theme="dark"] .exam-search .searchbtn { background:linear-gradient(135deg,#8d63a8,#70478c); border-color:#9b75b4; color:#fff; }
@media(max-width:800px) {
  .exam-search .searchbox { flex-basis:100%; }
  .exam-search > .custom-select { flex:1 1 180px; }
  .exam-search .searchbtn { flex:1 1 180px; }
}
@media(max-width:580px) {
  .exam-search { gap:8px; padding:9px; }
  .exam-search .searchbox { flex-basis:100%; }
  .exam-search > .custom-select,.exam-search .searchbtn { flex:1 1 100%; width:100%; }
}

/* Compact collapsible site navigation for phones and narrow tablets. */
.menu-toggle { display:none; }
.profile-button.has-notifications,
.menu-toggle.has-notifications { position:relative; }
.profile-button.has-notifications::after,
.menu-toggle.has-notifications::after {
  content:"";
  position:absolute;
  top:4px;
  right:5px;
  width:10px;
  height:10px;
  border:2px solid var(--white);
  border-radius:50%;
  background:#ef3340;
  box-shadow:0 0 0 2px #ef334033, 0 2px 7px #ef334088;
  pointer-events:none;
}
html[data-theme="dark"] .profile-button.has-notifications::after,
html[data-theme="dark"] .menu-toggle.has-notifications::after { border-color:#241b2d; }
@media(max-width:760px) {
  .topbar {
    position:relative;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    min-height:66px;
    height:auto !important;
    gap:8px;
    padding-top:8px;
    padding-bottom:8px;
  }
  .menu-toggle {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:40px;
    padding:0 13px;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--white);
    color:var(--ink);
    font-size:12px;
    font-weight:850;
    box-shadow:0 4px 14px #281b3010;
  }
  .menu-toggle > span { color:#795097; font-size:17px; line-height:1; }
  .menu-toggle[aria-expanded="true"] { border-color:#a77ac0; background:#f5eff8; }
  .topbar .toplinks { display:none; grid-column:1/-1; width:100%; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:5px; margin-top:3px; padding:10px; border:1px solid var(--line); border-radius:15px; background:var(--white); box-shadow:0 14px 30px #281b3018; }
  .topbar.nav-open .toplinks { display:flex; }
  .topbar .toplinks > a,
  .topbar .toplinks > button { width:100%; min-height:40px; display:flex; align-items:center; justify-content:flex-start; padding:9px 12px !important; border-radius:10px; text-align:left; font-size:12px !important; }
  .topbar .toplinks > a.active,
  .topbar .toplinks > a:hover { background:#f3edf7; color:#623b7d; }
  .topbar .toplinks > button { justify-content:center; }
  html[data-theme="dark"] .menu-toggle { background:#241b2d; color:var(--ink); border-color:var(--line); box-shadow:0 4px 14px #0003; }
  html[data-theme="dark"] .menu-toggle > span { color:#d2afe9; }
  html[data-theme="dark"] .menu-toggle[aria-expanded="true"] { background:#33263d; border-color:#795097; }
  html[data-theme="dark"] .topbar .toplinks { background:#241b2d; border-color:var(--line); box-shadow:0 14px 30px #0006; }
  html[data-theme="dark"] .topbar .toplinks > a.active,
  html[data-theme="dark"] .topbar .toplinks > a:hover { background:#3a2c45; color:#eadcf3; }
}
.chat-report-context { margin:0 0 12px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:#f5eff8; color:#623b7d; font-size:12px; line-height:1.5; }
.chat-ban-controls { margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
.chat-ban-controls > label { display:block; margin-bottom:7px; color:var(--muted); font-size:11px; font-weight:800; }
.chat-ban-controls .actions { align-items:center; }
.chat-ban-controls select { min-height:36px; padding:0 30px 0 10px; border:1px solid var(--line); border-radius:9px; background:var(--white); color:var(--ink); font-size:11px; }
.chat-ban-controls button { min-height:36px; }
html[data-theme="dark"] .chat-report-context { border-color:#59446a; background:#33263d; color:#e4ccef; }
html[data-theme="dark"] .chat-ban-controls { border-color:var(--line); }
html[data-theme="dark"] .chat-ban-controls select { border-color:var(--line); background:#1d1625; color:var(--ink); }
@media(max-width:580px) { .chat-ban-controls .actions { align-items:stretch; flex-direction:column; } .chat-ban-controls select,.chat-ban-controls button { width:100%; } }