/* Portal Guru: the parts Portal Admin does not have. styles.css and theme.css (copied from Portal Admin 5.0)
   carry everything else, so both portals look and behave the same. */

/* Sidebar: Laman Utama and the pages, as in Portal Staf (staf-look.css). */
.tab-lock { font-size: 13px !important; opacity: .7; }
.topic-tab[data-locked], .nav-item[data-locked] { opacity: .78; }

/* Sidebar card: today's classes (guru) or what this portal is for (staf). */
.side-middle { align-items: stretch; justify-content: flex-end; }
.pg-side-card { display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 14px; border-radius: 12px; background: #ffffff0a; box-shadow: inset 0 0 0 1px var(--line); }
.pg-side-title { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: #95ad98; }
.pg-side-title .ph { font-size: 15px; color: var(--gold); }
.pg-side-text { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--gray-11); }
.pg-side-codes { display: flex; flex-wrap: wrap; gap: 4px; }
.pg-today { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pg-today li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 12.5px; color: var(--gray-12); }
.pg-today-time { font-variant-numeric: tabular-nums; color: #cfdbb2; font-weight: 600; }
.pg-today-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pg-today .code, .pg-side-codes .code { min-width: 0; height: 18px; font-size: 10px; }

/* Jadual: the branch in the corner of a class (instead of Portal Admin's student count), today's row and the time now. */
.tl-block .tl-time .code { min-width: 0; height: 16px; padding: 0 4px; font-size: 9.5px; }
.tl-row.is-today .tl-day { background: color-mix(in srgb, var(--gold) 16%, var(--panel)); }
.tl-row.is-today .tl-day-count { color: var(--gray-12); font-weight: 600; }
.tl-now { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--red-9); pointer-events: none; z-index: 3; }
.tl-now::before { content: ""; position: absolute; top: -3px; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--red-9); }
.pg-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--gray-11); }
.pg-legend > span { display: inline-flex; align-items: center; gap: 6px; }

/* Tiles: a good number in green (Portal Admin has is-alert in red). */
.by-tile.is-good .by-tile-num { color: var(--green-11); }
.by-tile-num .code { vertical-align: middle; }

/* Tables of this portal: a class with its branch, notes under a status, long text that wraps. */
.pg-table td { vertical-align: top; }
.pg-kelas { display: inline-flex; align-items: center; gap: 8px; }
.pg-note { margin-top: 3px; font-size: 12px; line-height: 1.4; color: var(--gray-10); }
/* Pengguna: each operasi account's access per function, coloured by level */
.pg-akses { min-width: 104px; height: 34px; padding: 4px 8px; font-size: 13px; font-weight: 600; }
.pg-akses.is-ubah, .pg-akses-text.is-ubah { color: var(--green-11); }
.pg-akses.is-lihat, .pg-akses-text.is-lihat { color: var(--blue-11, #2b6cb0); }
.pg-akses.is-tiada, .pg-akses-text.is-tiada { color: var(--gray-9); }
.pg-akses-text { font-weight: 600; font-size: 13px; }
.view .pg-akses-table th, .view .pg-akses-table td { text-align: center; vertical-align: middle; }
.pg-akses { text-align: center; text-align-last: center; }
.card:has(.pg-akses-table) .card-foot { justify-content: center; text-align: center; }
/* Pengguna: the Mesej Kongsi template, shown like a WhatsApp message */
.pg-kongsi-body { padding: 4px 20px 20px; }
.pg-kongsi-label { margin: 0 0 10px; font-size: 12px; color: var(--gray-10); text-align: center; }
.pg-kongsi-msg { max-width: 560px; margin: 0 auto; padding: 14px 16px; border-radius: 4px 14px 14px 14px; background: #e7f6dd; color: #1f2d1f;
  font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: 0 1px 2px #0000001a; }
:root[data-theme="dark"] .pg-kongsi-msg { background: #1f3b2a; color: #e6f2e8; }
.pg-kongsi .card-foot { justify-content: center; text-align: center; }
/* Pengguna: the three groups (Superadmin, Operasi, Tutor) */
.pg-group-title { display: flex; align-items: center; gap: 8px; margin: 10px 0 -4px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gray-11); }
.pg-wrap { min-width: 180px; max-width: 360px; overflow-wrap: anywhere; }
.pg-clip { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
td.pg-clip { display: table-cell; }
.pg-table tr.is-today td { background: color-mix(in srgb, var(--gold) 10%, var(--panel)); }
.pg-table tr.pg-click { cursor: pointer; }
@media (hover: hover) { .pg-table tr.pg-click:hover td { background: var(--gray-2); } }
.pg-search { flex: 1 1 260px; max-width: 420px; }
.pg-status-select { min-height: 32px; height: 32px; font-size: 13px; }
.pg-inline-check { min-height: 0; padding: 0; background: none !important; }

/* Payroll: locked until the tutor types their password again. */
.pg-lock { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 520px; width: 100%; margin: 12px auto 0; padding: 36px 24px; text-align: center; }
.pg-lock-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--gray-3); color: var(--gray-12); }
.pg-lock-title { margin: 4px 0 0; font-family: var(--heading-font); font-size: 20px; font-weight: 700; color: var(--gray-12); }
.pg-lock-text { margin: 0 0 6px; font-size: 13.5px; line-height: 1.5; color: var(--gray-11); }
.pg-lock-row { display: flex; gap: 8px; width: 100%; max-width: 380px; }
.pg-lock-row .input { flex: 1; min-width: 0; }
.pg-lock .form-msg { width: 100%; max-width: 380px; margin: 0; }

/* Dialog bits: a details list, a class's sessions, and the "Sulit" message. */
.pg-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px 16px; margin: 0; }
.pg-dl dt { margin-bottom: 3px; font-size: 12px; color: var(--gray-10); }
.pg-dl dd { margin: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; font-weight: 500; color: var(--gray-12); overflow-wrap: anywhere; }
.pg-sesi-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pg-sesi-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 10px; border-radius: 8px; background: var(--gray-2); font-size: 13px; }
.pg-sesi-list li > span:first-child { min-width: 120px; font-weight: 500; color: var(--gray-12); }
.pg-sesi-list small { flex-basis: 100%; color: var(--gray-10); font-size: 12px; }
.pg-sulit { display: flex; gap: 14px; align-items: flex-start; }
.pg-sulit > .ph { flex-shrink: 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--amber-3); color: var(--amber-11); }
.pg-sulit p { margin: 0 0 6px; font-size: 14px; line-height: 1.5; color: var(--gray-11); }
.pg-sulit strong { color: var(--gray-12); }
#cred-msg { font-size: 13px; }

/* Recruitment: a candidate's page. The five steps of the process (left), the candidate's details (right). */
.rk-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 1100px) { .rk-layout { grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); } }
.rk-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.rk-steps { display: flex; flex-direction: column; margin: 0; padding: 4px 16px 6px; list-style: none; }
.rk-step { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; padding-bottom: 18px; }
.rk-step:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 36px; bottom: 4px; width: 2px; border-radius: 2px; background: var(--line); }
.rk-step[data-state="done"]:not(:last-child)::before { background: color-mix(in srgb, var(--green-9) 55%, transparent); }
.rk-dot { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-size: 13px; font-weight: 700; background: var(--gray-3); color: var(--gray-11); }
.rk-step[data-state="now"] .rk-dot { background: var(--gray-12); color: var(--gray-1); box-shadow: 0 0 0 4px var(--gray-3); }
.rk-step[data-state="done"] .rk-dot { background: var(--green-3); color: var(--green-11); }
.rk-step[data-state="off"] { opacity: .45; }
.rk-body { min-width: 0; padding-top: 5px; }
.rk-step[data-state="now"] .rk-body { padding: 12px 14px; border-radius: 12px; background: var(--gray-2); box-shadow: inset 0 0 0 1px var(--line); }
.rk-title { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--gray-12); }
.rk-step[data-state="todo"] .rk-title, .rk-step[data-state="off"] .rk-title { color: var(--gray-10); font-weight: 500; }
.rk-text { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--gray-11); }
.rk-info { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 13px; font-weight: 500; color: var(--gray-12); }
.rk-log { display: flex; flex-direction: column; gap: 2px; margin: 6px 0 0; padding: 0; list-style: none; font-size: 12px; color: var(--gray-10); }
.rk-log .ph { margin-right: 5px; color: var(--green-11); }
.rk-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.rk-dl { padding: 0 16px 16px; }
.rk-cw { display: inline-flex; align-items: center; gap: 6px; margin-right: 10px; white-space: nowrap; }
.rk-para { padding: 0 16px 16px; }
.rk-para .label { margin-bottom: 4px; }
.rk-para p:last-child { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--gray-12); white-space: pre-line; overflow-wrap: anywhere; }
.rk-scores { display: flex; flex-direction: column; margin: 0; padding: 0 16px 16px; list-style: none; }
.rk-scores li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--gray-11); }
.rk-scores li:last-child { border-bottom: 0; }
.rk-scores strong { font-weight: 600; color: var(--gray-12); white-space: nowrap; }
.rk-confirm { margin: 0; font-size: 14px; line-height: 1.5; color: var(--gray-11); }

/* Borang Maklumat Calon: the form's tables as rows of four fields. */
.bm-intro { display: flex; gap: 8px; margin: 0; }
.bm-sec { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.bm-sec:first-of-type { padding-top: 0; border-top: 0; }
.bm-title { margin: 0 0 4px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gray-12); }
.bm-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.bm-head span { font-size: 11.5px; font-weight: 600; color: var(--gray-10); }
.bm-grid .input { min-height: 36px; font-size: 13.5px; }
@media (max-width: 599px) { .bm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bm-head { display: none; } }

/* Recruitment: the four stages as a switch above each stage page (also in the sidebar). */
.rk-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 12px; background: var(--gray-3); }
.rk-tabs a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 6px 10px; border-radius: 9px; font-size: 13.5px; font-weight: 500; color: var(--gray-11); text-decoration: none; }
.rk-tabs a[aria-current="page"] { background: var(--panel); color: var(--gray-12); box-shadow: 0 1px 3px #0000001a; }
.rk-tab-n { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-weight: 700; background: var(--gray-5); color: var(--gray-12); }
.rk-tabs a[aria-current="page"] .rk-tab-n { background: var(--gray-12); color: var(--gray-1); }
@media (hover: hover) { .rk-tabs a:not([aria-current]):hover { color: var(--gray-12); background: color-mix(in srgb, var(--panel) 50%, transparent); } }
@media (max-width: 599px) { .rk-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nav-group-items { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 6px 20px; padding-left: 8px; border-left: 1px solid var(--line); }
.nav-group-items .nav-item { min-height: 32px; font-size: 12px; }

/* Saringan 1: a tick per item, with the day it was done. */
.rk-c { text-align: center; }
.rk-tick-btn { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; min-width: 44px; padding: 4px 6px; border: 0; border-radius: 8px; background: none; color: var(--gray-8); cursor: default; }
button.rk-tick-btn { cursor: pointer; }
@media (hover: hover) { button.rk-tick-btn:hover { background: var(--gray-3); } }
.rk-tick.is-on { color: var(--green-11); }
.rk-tick-at { font-size: 11px; color: var(--gray-10); }
.rk-video { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 12px; }
td .rk-video { display: block; margin: 2px auto 0; }
.rk-meter { display: inline-block; width: 46px; height: 6px; border-radius: 3px; background: var(--gray-4); vertical-align: middle; overflow: hidden; }
.rk-meter > span { display: block; height: 100%; width: calc(var(--p) * 100%); border-radius: 3px; background: var(--green-9); }
.rk-wa { color: #1f9d55; }
.rk-wa.is-sent { opacity: .55; }
.pg-table td.act .btn + .btn { margin-left: 4px; }
/* On a candidate's page: the three Saringan 1 items. */
.rk-ticks { display: flex; flex-direction: column; gap: 2px; margin: 8px 0 0; padding: 0; list-style: none; }
.rk-tick-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 8px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 13.5px; color: var(--gray-11); text-align: left; }
button.rk-tick-row { cursor: pointer; }
@media (hover: hover) { button.rk-tick-row:hover { background: var(--gray-3); } }
.rk-tick-row .ph { color: var(--gray-8); }
.rk-tick-row.is-on { color: var(--gray-12); }
.rk-tick-row.is-on .ph { color: var(--green-11); }
.rk-tick-row small { margin-left: auto; font-size: 11.5px; color: var(--gray-10); }
.rk-step[data-state="fail"] .rk-dot { background: var(--red-3); color: var(--red-11); }
.rk-more { border-top: 1px solid var(--line); padding-top: 10px; }
.rk-more summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--gray-11); margin-bottom: 10px; }
.pg-table .wa-link { white-space: nowrap; }
.pg-table td:has(> a.cell-strong) { min-width: 170px; }

/* Recruitment flow: a column per stage, side by side; cards move right as candidates pass. */
.rk-toolbar { align-items: center; }
/* Fasa 2's total marks in the result dialog, and Fasa 3's "a) Training" label */
.rk-jumlah { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--gray-2); font-size: 13.5px; }
.rk-jumlah strong { font-size: 16px; color: var(--green-11); }
.rk-sub { margin: 0; font-size: 12px; font-weight: 600; color: var(--gray-11); }
/* Recruitment's month: the label opens a picker; months with applicants glow and show their count */
.rk-month-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; border-radius: 8px; }
.rk-month-btn:hover { background: var(--gray-3); }
.rk-months { display: flex; flex-direction: column; gap: 14px; padding: 16px; }
.rk-mo-year { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 10px; }
.rk-mo-y { font-weight: 700; color: var(--gray-12); }
.rk-mo-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; }
.rk-mo { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); color: var(--gray-10); font: inherit; font-size: 12.5px; cursor: pointer; }
.rk-mo span { min-width: 18px; padding: 0 5px; border-radius: 6px; font-size: 10.5px; font-weight: 700; background: var(--green-3); color: var(--green-11); }
.rk-mo.is-ada { color: var(--gray-12); font-weight: 600; border-color: color-mix(in srgb, var(--green-9) 45%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-9) 14%, transparent), 0 0 12px color-mix(in srgb, var(--green-9) 30%, transparent); }
.rk-mo[aria-pressed="true"] { color: #fff; background: var(--green-9); border-color: var(--green-9); }
.rk-mo[aria-pressed="true"] span { background: #ffffff33; color: #fff; }
.rk-mo:hover { border-color: var(--line-strong); }
.rk-mo-top { display: flex; flex-wrap: wrap; gap: 8px; }
.rk-mo-all { padding: 6px 14px; }
.rk-mo.is-none { visibility: hidden; }
@media (max-width: 1023px) { .rk-mo-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 479px) { .rk-mo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .rk-mo-year { grid-template-columns: 1fr; } }
.rk-show-stop { min-height: 0; padding: 0; font-size: 13px; background: none !important; }
.rk-board { display: grid; grid-auto-flow: column; grid-template-columns: repeat(3, minmax(240px, 1fr)); gap: 12px; align-items: start; padding-bottom: 8px; }
.rk-col { position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 260px; padding: 10px; border-radius: 14px; background: color-mix(in srgb, var(--gray-3) 75%, transparent); box-shadow: inset 0 0 0 1px var(--line); }
/* An arrow between columns: the way candidates move. */
.rk-col:not(:last-child)::after { content: ""; position: absolute; top: 18px; right: -11px; width: 10px; height: 10px; border-top: 2px solid var(--gray-8); border-right: 2px solid var(--gray-8); transform: rotate(45deg); opacity: .6; }
.rk-col-head { display: flex; align-items: center; gap: 8px; padding: 2px 4px; }
.rk-col-n { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--gray-12); color: var(--gray-1); font-size: 11.5px; font-weight: 700; }
.rk-col-title { margin: 0; font-family: var(--heading-font); font-size: 14px; font-weight: 700; color: var(--gray-12); }
.rk-col-count { margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--panel); font-size: 12px; font-weight: 600; text-align: center; color: var(--gray-11); }
.rk-col-list { display: flex; flex-direction: column; gap: 8px; }
.rk-col-empty { margin: 4px; font-size: 12.5px; color: var(--gray-10); }
.rk-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 11px 12px; border-radius: 11px; background: var(--panel); box-shadow: var(--shadow-card, 0 1px 3px #0001); }
.rk-card.is-stopped { opacity: .62; }
.rk-card-top { display: flex; align-items: flex-start; gap: 8px; }
.rk-card-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--gray-12); text-decoration: none; overflow-wrap: anywhere; }
@media (hover: hover) { .rk-card-name:hover { text-decoration: underline; text-underline-offset: 3px; } }
/* Red flag: Tiada respon or Tidak hadir temu duga, under the name on a card and beside it elsewhere */
.rk-flag { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; vertical-align: middle; font-weight: 700; }
.rk-card.has-flag { box-shadow: inset 3px 0 0 var(--red-9, #e5484d), var(--shadow-card, 0 1px 3px #0001); }
.rk-card-job { padding: 1px 6px; border-radius: 5px; background: var(--gray-3); font-size: 10.5px; font-weight: 700; color: var(--gray-11); }
.rk-card-meta { margin: 0; font-size: 12px; color: var(--gray-10); }
.rk-card-meta .wa-link { font-size: 12.5px; }
.rk-card-when { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin: 2px 0 0; font-size: 12.5px; color: var(--gray-12); }
.rk-card-when.is-none { color: var(--amber-11); }
.rk-card-note { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin: 0; font-size: 12px; color: var(--gray-11); }
.rk-card-acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 2px; padding-top: 8px; border-top: 1px solid var(--line); }
.rk-card-acts .btn-sm { height: 30px; padding: 0 10px; font-size: 12.5px; }
.rk-card-acts .btn-icon { width: 30px; height: 30px; min-width: 30px; }
.rk-pills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.rk-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border: 0; border-radius: 999px; background: var(--gray-3); font: inherit; font-size: 11.5px; font-weight: 500; color: var(--gray-10); }
button.rk-pill { cursor: pointer; }
.rk-pill.is-on { background: color-mix(in srgb, var(--green-9) 15%, var(--panel)); color: var(--green-11); }
@media (hover: hover) { button.rk-pill:hover { box-shadow: inset 0 0 0 1px var(--line-strong); } }
.rk-card-when { flex-wrap: nowrap; align-items: flex-start; }
.rk-card-when > .ph { flex-shrink: 0; margin-top: 2px; }
.rk-card-when > span { min-width: 0; }
.rk-board { scroll-snap-type: x proximity; }
.rk-col { scroll-snap-align: start; }
.rk-pill.is-off { background: color-mix(in srgb, var(--red-9, #e5484d) 14%, var(--panel)); color: var(--red-11); }
.rk-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
button.rk-pill:disabled, .rk-card-acts .btn:disabled { opacity: .45; cursor: not-allowed; }
/* Import: the preview of what will be added. */
.freelance-section { padding: 24px; margin-bottom: 20px; }
.freelance-section h2 { font-size: 1.15rem; margin: 0 0 20px; }
.freelance-section select { width: 100%; max-width: 440px; }
.freelance-section table { width: 100%; border-collapse: collapse; text-align: left; }
.freelance-section th, .freelance-section td { padding: 12px; white-space: nowrap; }
@media (max-width: 600px) { .freelance-section { padding: 16px; } }

/* The MyTuition A+ logo in the sidebar: flat gold on the cream sidebar (Cerah), glowing gold on a dark sidebar
   (Gelap, and the tutor pages' navy sidebar). The flat one has black lettering, so it never shows on dark. */
.brand-link:has(.brand-logo) { display: block; min-width: 0; flex: 1; }
.brand-logo { display: block; width: 100%; max-width: 200px; height: auto; }
.brand-logo.is-emas { display: none; }
:root[data-theme="dark"] .brand-logo.is-cerah, body.tutor-theme .brand-logo.is-cerah { display: none; }
:root[data-theme="dark"] .brand-logo.is-emas, body.tutor-theme .brand-logo.is-emas { display: block; }