.nav {
  max-height: calc(100vh - 170px);
  overflow-y: auto;
  padding-bottom: 84px;
  scrollbar-width: thin;
}
.nav button {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr) 9px;
  align-items: center;
  column-gap: 12px;
  direction: rtl;
  min-height: 54px;
  padding: 10px 14px;
}
.nav .ico {
  display: grid;
  place-items: center;
  width: 25px !important;
  height: 25px;
  margin: 0 !important;
}
.nav .ico svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-label { text-align: right; }
.nav-status { width: 9px; height: 9px; display: grid; place-items: center; }
.nav-status i { display: block; width: 8px; height: 8px; border-radius: 50%; background: #ff637e; box-shadow: 0 0 0 3px #ff637e20; }
.nav-status:empty { visibility: hidden; }
[dir="ltr"] .nav button { direction: ltr; }
[dir="ltr"] .nav-label { text-align: left; }
[dir="ltr"] .side { border-left: 0; border-right: 1px solid #ffffff0c; }
[dir="ltr"] .side-bottom { right: 18px; left: 18px; }
.private-note-card { border-color: #bb7bcb5c; background: linear-gradient(145deg, #30213aee, #1b1a29ee); }
.private-note-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.private-lock { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; color: #e4a4f3; background: #b748d525; font-size: 22px; }
.private-note-head h3 { margin: 0; }
.private-note-head p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.private-badge { margin-inline-start: auto; color: #e9c6f0; background: #a74db426; border: 1px solid #d697e04a; border-radius: 20px; padding: 5px 10px; font-size: 12px; }
.private-note-label textarea { min-height: 150px; resize: vertical; line-height: 1.8; background: #13121d; border-color: #81518e; }
.private-note-footer { display: flex; align-items: center; gap: 12px; margin-top: 10px; color: var(--muted); font-size: 12px; }
.private-note-footer #privateNoteSaved { flex: 1; }
.trainee-account-picker { min-width: 190px; align-self: center; }
.trainee-account-picker select { width: 100%; }
.coach-plan-text { margin-top: 14px; padding: 14px; border-radius: 15px; border: 1px solid #ffffff1d; background: #11111b80; }
.coach-plan-text.has-plan { border-color: #ca77dc65; background: linear-gradient(135deg, #a442bd1b, #eaa44a0b); }
.coach-plan-label { display: flex; align-items: center; gap: 8px; color: #e5b8ee; font-size: 13px; margin-bottom: 8px; }
.coach-plan-text strong { display: block; font-size: 15px; }
.coach-plan-text p { color: #d0c8d5; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.8; margin: 6px 0 0; font-size: 13px; }
.coach-plan-text:not(.has-plan) p { color: var(--muted); }
.coach-trainee-report { margin-top: 14px; border-color: #bd79ce50; }
.report-trainee-name { display: inline-flex; align-items: center; gap: 8px; box-sizing: border-box; max-width: 100%; min-width: 0; padding: 5px 10px; margin-bottom: 10px; border-radius: 20px; color: #f1d7f6; background: #a744bf24; font-weight: 700; overflow: hidden; }
.report-trainee-name .profile-card-name { display: block; min-width: 0; max-width: min(65vw, 360px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adherence-status { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 13px; }
.adherence-status.checked { color: #a5f0cd; background: #36b98520; }
.adherence-status.unchecked { color: #d1c8d6; background: #ffffff08; }
.adherence-status span { font-size: 20px; font-weight: 900; }
.trainee-daily-note { margin: 12px 0; padding: 12px 14px; border-right: 3px solid #ce83df; border-radius: 9px 0 0 9px; background: #ffffff08; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
[dir="ltr"] .trainee-daily-note { border-right: 0; border-left: 3px solid #ce83df; border-radius: 0 9px 9px 0; }
.report-time { color: var(--muted); font-size: 11px; }
.traineeRoster .person, #traineeList .person { cursor: pointer; }
#traineeList .person:hover, #traineeList .person:focus-visible { background: #ffffff0a; outline: 1px solid #b766ca55; border-radius: 12px; }
#traineeList .person { min-width: 0; max-width: 100%; overflow: hidden; }
#traineeList .person-info { min-width: 0; overflow: hidden; }
#traineeList .person-info b, #traineeList .person-info small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#traineeList .person-info small { direction: ltr; text-align: right; unicode-bidi: plaintext; }
.trainee-message-compose { display: flex; gap: 8px; }
.trainee-message-compose input { flex: 1; min-width: 0; background: #12121c; color: var(--text); border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; }
.trainee-message-compose button { white-space: nowrap; }
.avatar img.profile-photo { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.trainee-header-avatar { width: 50px; height: 50px; flex: 0 0 50px; box-shadow: 0 0 0 3px #ffffff12; }
#traineeView .headrow > div:first-child { display: flex; align-items: center; gap: 12px; min-width: 0; }
.trainee-greeting { min-width: 0; }
.profile-card-avatar { width: 30px; height: 30px; flex: 0 0 30px; font-size: 13px; }
.profile-card-name { align-self: center; }
.account-photo-card .file-field { margin-top: 8px; }
.gallery-filters { display: flex; gap: 8px; }
.gallery-filters .selected { border-color: #d789e7; background: #a846c12b; }
.incoming-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.inbox-image { width: 100%; height: 230px; object-fit: cover; border-radius: 15px; border: 1px solid #ffffff24; }
.empty-gallery { grid-column: 1 / -1; text-align: center; padding: 42px 18px; color: var(--muted); }
.empty-gallery span { font-size: 40px; color: #d98de8; }
.file-field { position: relative !important; display: block !important; border: 1px dashed #b86dca !important; border-radius: 17px !important; padding: 10px !important; background: linear-gradient(140deg, #a746c51a, #eaa44a0b) !important; overflow: hidden; }
.file-field input[type="file"] { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; opacity: 0 !important; z-index: 3; cursor: pointer; }
.upload-zone { min-height: 76px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; pointer-events: none; }
.upload-zone .up-ico { font-size: 24px; color: #d98de8; }
.upload-zone .up-ico { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 13px; background: #ad52ce1c; border: 1px solid #d98de82a; }
.file-field:hover, .file-field.is-dragover { border-color: #e4a4f3 !important; background: linear-gradient(140deg, #a746c535, #eaa44a19) !important; box-shadow: 0 0 0 3px #bd45d71a; }
.file-field:focus-within { outline: 2px solid #d98de8; outline-offset: 2px; }
.upload-zone small { font-size: 11px; color: var(--muted); }
.upload-previews { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 7px; }
.upload-previews img { width: 58px; height: 58px; object-fit: cover; border-radius: 10px; }
.upload-previews.inside-plan-upload { display: none; }
.payment-choice { display: flex; align-items: center; gap: 10px; text-align: right; color: var(--text); font: inherit; }
.trainee-preview-link { border-color: #d385e5 !important; background: #a33fc21a !important; }
html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
.shell, .main, .view, .card, .grid2 > *, .stats > * { min-width: 0; }
.main img, .file-field, .upload-box, .incoming-photo { max-width: 100%; }
.top-actions { flex-wrap: wrap; justify-content: flex-end; }
.top-actions > button, .top-actions select { flex: 0 0 auto; }
[dir="ltr"] .top-actions { flex-direction: row; }
[dir="ltr"] .private-note-head { flex-direction: row; }
[dir="ltr"] .private-note-label { text-align: left; }
@media (max-width: 650px) {
  .top { align-items: flex-start; gap: 12px; }
  .top-actions { max-width: 100%; gap: 6px; }
  .top-actions .trainee-preview-link { white-space: nowrap; font-size: 12px; padding: 8px 10px; }
  .main { padding-inline: 14px; }
  .headrow { gap: 10px; }
  .trainee-account-picker { width: 100%; margin: 10px 0; }
  .file-field { padding: 8px !important; }
  .upload-zone { min-height: 68px; }
  .incoming-grid { grid-template-columns: 1fr; }
  .gallery-filters { gap: 4px; }
  .gallery-filters .btn-quiet { padding: 6px 8px !important; }
  .private-note-footer { flex-wrap: wrap; }
}
@media (max-width: 420px) {
  .top { flex-wrap: wrap; }
  .top-actions { width: 100%; justify-content: space-between; }
  .top-actions .btn-quiet { padding: 8px 10px; }
  .icon-btn { width: 38px; height: 38px; }
  .payment-options { grid-template-columns: 1fr !important; }
  .chat-send { flex-wrap: wrap; }
  .chat-send input { min-width: 100%; }
  .chat-send button { width: 100%; }
  .trainee-message-compose { flex-direction: column; }
  .trainee-message-compose button { width: 100%; }
}
.package-manager,.subscription-reviews{grid-column:1/-1}.package-form{margin:14px 0}.package-list{display:grid;gap:8px;margin-top:12px}.package-row{display:flex;align-items:center;gap:12px;justify-content:space-between;border:1px solid #ffffff18;border-radius:13px;padding:11px 13px;background:#ffffff06}.package-row small{display:block;color:var(--muted);margin-top:3px}.soft-rule{border:0;border-top:1px solid #ffffff18;margin:20px 0}.trainee-packages{display:grid;gap:9px}.trainee-package{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid #ffffff20;border-radius:15px;background:#ffffff06;cursor:pointer}.trainee-package:has(input:checked){border-color:#d27ce0;background:#a543c31c;box-shadow:0 0 0 2px #bd45d720}.trainee-package input{accent-color:#c54dde}.trainee-package span{flex:1}.trainee-package small{display:block;color:var(--muted)}.active-membership{margin-top:16px;border-color:#55d5a155}.subscription-payment[hidden],#activeSubscription[hidden]{display:none!important}.subscription-payment .payment-options{grid-template-columns:1fr 1fr}.subscription-payment .payment-choice{flex-wrap:wrap}.subscription-payment .payment-choice span:last-child{width:100%;font-size:13px}.subscription-payment .file-field{margin:14px 0}.subscription-payment #sendSubscriptionRequest:disabled{opacity:.5;cursor:not-allowed}.proof-preview{width:52px;height:52px;object-fit:cover;border-radius:10px;border:1px solid #ffffff30;cursor:zoom-in}.proof-modal{position:fixed;inset:0;z-index:50;background:#080810e8;display:grid;place-items:center;padding:18px}.proof-modal img{max-width:min(900px,95vw);max-height:82vh;border-radius:15px}.proof-modal button{position:absolute;top:18px;right:18px}.package-form .full{grid-column:1/-1}@media(max-width:620px){.package-form{grid-template-columns:1fr}.package-form .full{grid-column:auto}.subscription-payment .payment-options{grid-template-columns:1fr}.package-row{align-items:flex-start}.trainee-package{gap:8px;padding:12px}}

/* Form and navigation fixes from the compact screen review */
.side{display:flex;flex-direction:column;overflow:hidden;height:100vh;height:100dvh;min-height:0}
.nav{flex:1 1 auto;min-height:0;max-height:none!important;overflow-y:auto;padding-bottom:8px!important;margin-bottom:12px;overscroll-behavior:contain}
.side-bottom{position:static!important;inset:auto!important;flex:0 0 auto;margin-top:auto;padding-top:8px}
.profile-mini{min-width:0;overflow:hidden}.profile-mini>div:last-child{min-width:0;overflow-wrap:anywhere}.profile-mini b,.profile-mini small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
select,select option{color:var(--text);background-color:#1b1b29;color-scheme:dark}select:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #c66adb;outline-offset:2px}
.field{min-width:0;line-height:1.55}.field input,.field textarea,.field select{width:100%;min-width:0;line-height:1.55}.field textarea,.coach-note textarea{display:block;width:100%;min-width:0;min-height:135px;resize:vertical;line-height:1.8;background:#12121c;color:var(--text);border:1px solid var(--line);border-radius:14px;padding:13px 14px;overflow-wrap:anywhere}
.chat-layout{grid-template-columns:minmax(180px,.8fr) minmax(260px,1.4fr) minmax(220px,1fr)!important;align-items:start}.chat-layout>.card{min-width:0}.coach-note{min-width:0}.coach-note textarea{min-height:150px}
.chat-send{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;gap:10px}.chat-send input.field{display:block;width:100%;min-width:0;min-height:48px;background:#12121c;color:var(--text);border:1px solid var(--line);border-radius:13px;padding:11px 14px;outline:none}.chat-send input.field::placeholder{color:#9d96aa;opacity:1}.chat-send button{min-width:88px;white-space:nowrap;align-self:stretch}
.approval-row{display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:12px;align-items:center}.approval-row .person-info{min-width:0;overflow-wrap:anywhere}.approval-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.approval-actions button{min-width:76px}.subscription-divider{display:flex;align-items:center;gap:10px;margin:16px 0;color:var(--muted);font-size:13px}.subscription-divider:before,.subscription-divider:after{content:"";height:1px;flex:1;background:#ffffff20}.free-code-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end;padding:14px;border:1px solid #ffffff18;border-radius:16px;background:#ffffff05}.free-code-form .field{margin:0}.free-code-form input{direction:ltr;text-align:left;letter-spacing:.06em;text-transform:uppercase}.code{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;overflow-wrap:anywhere}.code small{color:#77dfb6;white-space:nowrap}.code small:where(:not(:empty)){font-family:Cairo,Arial,sans-serif}
.payment-settings,.voucher-panel,#adminPanel{grid-column:1/-1}.package-manager{grid-row:1}.voucher-panel{grid-row:2}.subscription-reviews{grid-row:3}.payment-settings{grid-row:4}#adminPanel{grid-row:5}
@media(max-width:900px){.chat-layout{grid-template-columns:minmax(0,1fr)!important}.chat-layout>.coach-note{grid-column:1/-1}}
@media(max-width:650px){.free-code-form{grid-template-columns:1fr}.free-code-form button{width:100%}.approval-row{grid-template-columns:44px minmax(0,1fr);gap:9px}.approval-row .proof-preview,.approval-row .proof-thumb{grid-column:1;grid-row:1}.approval-row .person-info{grid-column:2;grid-row:1}.approval-actions{grid-column:1/-1;justify-content:stretch}.approval-actions button{flex:1}.chat-send{grid-template-columns:minmax(0,1fr) auto}.chat-send input.field{min-width:0!important}.chat-send button{width:auto!important;min-width:76px}.profile-mini{padding:10px}.side-bottom{padding-bottom:env(safe-area-inset-bottom)}}

/* Profile photo cropper: round Instagram-style preview with touch-friendly controls. */
.crop-modal{position:fixed;inset:0;z-index:60;background:#090811d9;backdrop-filter:blur(10px);display:grid;place-items:center;padding:16px}.crop-card{width:min(430px,100%);background:linear-gradient(145deg,#30233b,#171723);border:1px solid #ffffff2a;border-radius:24px;padding:20px;box-shadow:0 25px 90px #0009}.crop-card .field{margin:12px 0}.crop-card input[type=range]{accent-color:#bd45d7;padding:0}.crop-circle{width:min(68vw,250px);height:min(68vw,250px);border-radius:50%;overflow:hidden;margin:14px auto 20px;border:3px solid #e0a1ee;box-shadow:0 0 0 6px #bd45d733,0 10px 30px #0008;background:#111}.crop-circle img{width:100%;height:100%;object-fit:cover;transform-origin:center;display:block}.crop-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}.crop-close{flex:0 0 42px}.profile-photo{border-radius:50%!important;object-fit:cover;object-position:center;width:100%;height:100%;display:block}
.auth-login-prompt{margin:14px 0 0;text-align:center;color:var(--muted);font-size:14px}
.auth-login-link{border:0;background:none;color:#e6a0f1;text-decoration:underline;text-underline-offset:3px;font-weight:800;padding:4px 6px}
.auth-login-link:hover{color:#fff}

/* Keep the layout usable on narrow phones, tablets, and wide desktop screens. */
.toast{width:max-content;max-width:min(520px,calc(100vw - 32px));white-space:normal;overflow-wrap:anywhere;line-height:1.65}
.auth-cover{overflow-y:auto;overscroll-behavior:contain}
.auth-card{max-height:calc(100dvh - 36px);overflow-y:auto;overscroll-behavior:contain}
.main,.card,.hero,.grid2>*{min-width:0}
.grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
.stats{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chat-layout{grid-template-columns:minmax(0,1fr)!important}
}
@media(max-width:650px){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  .main{padding-inline:14px}
  .top{align-items:center;flex-wrap:wrap}
  .top-actions{width:100%;justify-content:flex-start}
  .grid2,.stats,.form{grid-template-columns:minmax(0,1fr)!important}
  .field.full{grid-column:auto}
  .auth-cover{place-items:start center;padding:10px}
  .auth-card{width:100%;max-height:calc(100dvh - 20px);padding:18px;border-radius:20px}
  .auth-switch{position:sticky;top:-18px;z-index:2;padding:8px 0;background:#211b2b}
  #dashboard .headrow .title{font-size:clamp(19px,5.5vw,25px);overflow-wrap:anywhere}
  .toast{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));width:auto;max-width:none}
  table{display:block;width:100%;max-width:100%;overflow-x:auto}
  .chat-layout>*{min-width:0}
}
@media(min-width:1400px){.main{max-width:1320px}.shell{grid-template-columns:270px minmax(0,1fr)}}

/* Glass finish for the native app scroll areas and form controls. */
* {
  scrollbar-width: thin;
  scrollbar-color: #a85cbb9c #ffffff0b;
}
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track {
  border: 1px solid #ffffff0b;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff0a, #ffffff04);
}
*::-webkit-scrollbar-thumb {
  min-height: 34px;
  border: 2px solid #15121dbd;
  border-radius: 999px;
  background: linear-gradient(180deg, #d17ade, #9145bd 58%, #d69b67);
  background-clip: padding-box;
  box-shadow: inset 0 0 0 1px #ffffff26, 0 0 12px #bd45d733;
}
*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #e3a0ec, #a657cf 58%, #f0b477);
  background-clip: padding-box;
}
*::-webkit-scrollbar-button { width: 0; height: 0; display: none; }

select {
  color-scheme: dark;
  accent-color: var(--pink);
}
select option {
  color: var(--text);
  background: #241d31;
}

/* Cohesive visual system for the full coaching dashboard. */
:root {
  color-scheme: dark;
  --bg: #101018;
  --panel: #191923;
  --panel2: #22212e;
  --line: #343241;
  --text: #f8f6fb;
  --muted: #aaa5b5;
  --pink: #c45bdb;
  --purple: #8b4ac3;
  --gold: #edaa51;
  --green: #61d6a4;
  --radius: 20px;
  --surface: linear-gradient(145deg, #1d1c28 0%, #181821 100%);
  --surface-raised: linear-gradient(145deg, #242230 0%, #1b1a25 100%);
  --focus-ring: 0 0 0 3px #c45bdb35;
}

body {
  background:
    radial-gradient(ellipse at 88% 0%, #52265f38 0, transparent 34%),
    radial-gradient(ellipse at 0% 75%, #8d5a3215 0, transparent 32%),
    var(--bg);
  color: var(--text);
  line-height: 1.65;
}

button, input, textarea, select { font-family: inherit; }
button { transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid #d587e7;
  outline-offset: 3px;
  box-shadow: var(--focus-ring);
}

.shell { grid-template-columns: 258px minmax(0, 1fr); }
.side {
  padding: 25px 17px;
  background: #14131cef;
  border-color: #ffffff12;
  box-shadow: 12px 0 50px #08070c1c;
}
.brand { margin-bottom: 30px; letter-spacing: -.035em; }
.logo {
  border-radius: 15px;
  background: linear-gradient(145deg, #a946c4, #7641ad 58%, #df9950);
  box-shadow: 0 7px 20px #a946c433, inset 0 1px #ffffff50;
}
.nav { gap: 5px; }
.nav button {
  min-height: 48px;
  border: 1px solid transparent;
  border-radius: 13px;
  color: #b5afbf;
}
.nav button:hover { background: #ffffff09; color: #f5e9fa; }
.nav button.active {
  color: #f2d6f8;
  border-color: #c45bdb28;
  background: linear-gradient(100deg, #a348c22c, #ffffff05);
  box-shadow: inset -2px 0 #d27cdf;
}
.nav .ico { color: #d191de; }
.profile-mini { border-radius: 15px; background: #ffffff08; }
.profile-mini .avatar, .avatar {
  background: linear-gradient(145deg, #a946c4, #7546a0 58%, #d7904b);
  box-shadow: inset 0 1px #ffffff55;
}

.main { padding: 28px 38px 56px; }
.top { min-height: 46px; margin-bottom: 28px; }
.date { color: #d6a0e1; }
.title { letter-spacing: -.035em; line-height: 1.35; }
.subtitle { color: #b5afbf; line-height: 1.8; }
.headrow { margin: 24px 0 20px; gap: 18px; }
.hero {
  min-height: 190px;
  padding: 30px 32px;
  border-radius: 24px;
  border-color: #d27cdf35;
  background:
    radial-gradient(circle at 8% 110%, #b74bdc35, transparent 38%),
    linear-gradient(112deg, #392246 0%, #302137 54%, #49303a 100%);
  box-shadow: inset 0 1px #ffffff15, 0 18px 44px #08070d35;
}
.hero h2 { letter-spacing: -.025em; }
.hero p { color: #e0d1e5; line-height: 1.8; }

.card {
  border: 1px solid #ffffff14;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: inset 0 1px #ffffff0b, 0 12px 32px #07070d26;
  padding: 19px;
}
.stats, .grid2 { gap: 15px; }
.stats { margin-bottom: 22px; }
.stat-top { color: #d7d1de; }
.stat-icon { background: #a348c222; color: #e0a2ec; }
.stat-num { letter-spacing: -.04em; }
.section-head { gap: 12px; }
.section-head h3 { letter-spacing: -.015em; }
.person, .chatline, .schedule { border-color: #ffffff0e; }

.btn-primary {
  border-radius: 13px;
  padding: 11px 19px;
  background: linear-gradient(105deg, #a546c4, #8441ba 58%, #cc854d);
  box-shadow: 0 8px 22px #9c43bf30, inset 0 1px #ffffff38;
}
.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.1); box-shadow: 0 11px 25px #9c43bf3d, inset 0 1px #ffffff45; }
.btn-quiet, .rolebtn {
  border: 1px solid #ffffff1c;
  border-radius: 12px;
  background: #ffffff08;
  color: #e6deeb;
}
.btn-quiet:hover, .rolebtn:hover, .icon-btn:hover, .lang:hover { border-color: #c45bdb65; background-color: #a348c21a; }
.icon-btn, .lang { border-color: #ffffff1c; background: #ffffff08; }

.field { color: #c3bdcb; gap: 6px; }
.field input, .field textarea, .field select, .chat-send input.field, .trainee-message-compose input {
  border: 1px solid #ffffff1b;
  border-radius: 13px;
  background: #12121a;
  color: var(--text);
}
.field input:hover, .field textarea:hover, .field select:hover { border-color: #ffffff35; }
.field input:focus, .field textarea:focus, .field select:focus, .chat-send input.field:focus { border-color: #c45bdb9c; box-shadow: var(--focus-ring); }
.field input::placeholder, .field textarea::placeholder { color: #827b8d; }
.chatbox { border-radius: 16px; background: #12121a70; }
.bubble { background: #34243d; line-height: 1.7; }
.bubble.me { background: linear-gradient(135deg, #8545a0, #69377f); }
.toast { border-color: #ffffff20; background: #24212e; box-shadow: 0 16px 40px #0006; }
.auth-card, .crop-card {
  border-color: #ffffff27;
  background: linear-gradient(145deg, #292332, #171720);
  box-shadow: 0 25px 90px #0009;
}
.proof-modal { backdrop-filter: blur(10px); }
.intro { background: #101018; }
.intro span { background-image: linear-gradient(90deg, #c85de0, #f2b35d); }

@media (max-width: 1100px) {
  .main { padding-inline: 26px; }
  .shell { grid-template-columns: 236px minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .side { background: #15141df7; }
  .side.open { box-shadow: -20px 0 70px #0008; }
  .main { padding: 20px 22px 42px; }
}
@media (max-width: 650px) {
  .main { padding: 16px 15px calc(30px + env(safe-area-inset-bottom)); }
  .top { margin-bottom: 20px; }
  .headrow { margin: 20px 0 16px; }
  .hero { min-height: 0; padding: 22px 20px; border-radius: 20px; }
  .card { padding: 16px; border-radius: 17px; }
  .section-head { align-items: flex-start; }
  .title { font-size: clamp(22px, 6vw, 28px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
select option:checked,
select option:hover {
  color: #fff;
  background: #73358d;
}
.glass-select {
  position: relative;
  width: 100%;
  min-width: 0;
}
.glass-select-source {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip-path: inset(50%);
}
.glass-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid #ffffff2b;
  border-radius: 14px;
  color: var(--text);
  text-align: start;
  font: inherit;
  background: linear-gradient(135deg, #ffffff16, #ffffff07), radial-gradient(ellipse at 12% 0, #bd45d72c, transparent 68%);
  box-shadow: inset 0 1px #ffffff1c, 0 8px 24px #07060d40;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: border-color .18s, box-shadow .18s, background .18s;
  cursor: pointer;
}
.glass-select-trigger:hover,
.glass-select.is-open .glass-select-trigger {
  border-color: #d995e8a8;
  box-shadow: inset 0 1px #ffffff24, 0 0 0 3px #bd45d71b, 0 10px 26px #07060d55;
}
.glass-select-trigger:focus-visible {
  outline: 2px solid #d894e8;
  outline-offset: 2px;
}
.glass-select-value.is-placeholder { color: #b7adbf; }
.glass-select-chevron {
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  border-right: 2px solid #e2b2ec;
  border-bottom: 2px solid #e2b2ec;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .18s;
}
.glass-select.is-open .glass-select-chevron { transform: rotate(225deg) translate(-2px, -1px); }
.glass-select-menu {
  position: absolute;
  z-index: 80;
  inset-inline: 0;
  top: calc(100% + 8px);
  display: grid;
  gap: 4px;
  max-height: min(230px, 34dvh);
  overflow-y: auto;
  padding: 7px;
  border: 1px solid #ffffff2e;
  border-radius: 16px;
  background: linear-gradient(145deg, #352640eF, #1b1826f2), radial-gradient(ellipse at 10% 0, #bd45d74d, transparent 75%);
  box-shadow: inset 0 1px #ffffff20, 0 18px 46px #05040bb3, 0 0 26px #bd45d721;
  backdrop-filter: blur(22px) saturate(135%);
  -webkit-backdrop-filter: blur(22px) saturate(135%);
  transform-origin: top center;
  animation: glass-menu-in .16s ease-out both;
}
.glass-select-menu[hidden] { display: none; }
.glass-select-option {
  display: block;
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #eee7f3;
  background: transparent;
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: background .16s, border-color .16s, color .16s;
}
.glass-select-option:hover,
.glass-select-option:focus-visible {
  outline: none;
  color: #fff;
  border-color: #ffffff20;
  background: linear-gradient(100deg, #bd45d746, #883bd424 62%, #f3aa4817);
}
.glass-select-option[aria-selected="true"] {
  color: #fff;
  border-color: #db9ae747;
  background: linear-gradient(100deg, #bd45d738, #883bd42a 62%, #f3aa481d);
  box-shadow: inset 0 1px #ffffff12;
}
.account-menu > .glass-select { width: 100%; flex: 1 1 100%; }
.account-menu > .glass-select .glass-select-trigger { min-height: 40px; padding: 7px 11px; border-radius: 12px; }
.account-menu > .glass-select .glass-select-menu { min-width: 138px; inset-inline-start: auto; inset-inline-end: 0; }
@keyframes glass-menu-in {
  from { opacity: 0; transform: translateY(-5px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media(max-width:620px){.account-menu > .glass-select .glass-select-trigger{min-height:37px;padding:6px 9px}}

.payment-methods{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:10px;margin-top:12px}.payment-method{display:flex;align-items:flex-start;gap:10px;padding:14px;border:1px solid #ffffff20;border-radius:15px;background:linear-gradient(135deg,#ffffff12,#ffffff05);backdrop-filter:blur(14px);cursor:pointer}.payment-method:has(input:checked){border-color:#d27ce0;background:linear-gradient(135deg,#a543c333,#ffffff08);box-shadow:0 0 0 2px #bd45d720}.payment-method input{margin-top:4px;accent-color:#c54dde}.payment-method span{display:grid;gap:7px;min-width:0}.payment-method b{overflow-wrap:anywhere;color:var(--muted);font-weight:600}.delete-trainee{margin:4px 0 14px;color:#ffb8c0;border-color:#ff7c8c45}.delete-trainee:hover{background:#ff54631a}

/* Strong, consistent styling for dynamically rendered trainee account rows. */
.person{width:100%;display:flex;align-items:center;gap:12px;text-align:right;direction:rtl;color:var(--text);background:#ffffff08;border:1px solid #ffffff16;border-radius:14px;padding:12px 14px;font-weight:400;white-space:normal}
.person-info{flex:1;min-width:0;text-align:right;color:var(--text)}
.person-info b{display:block;color:#f7f4fb;font-weight:800;overflow-wrap:anywhere}
.person-info small{display:block;color:#c2bdce}
.subscription-request{display:grid;gap:10px;margin:12px 0}
.subscription-request .section-head{margin:0}
.subscription-request h4{margin:0}
.subscription-request .receipt-link{justify-self:start;color:#e5a6f3;font-weight:800;text-decoration:underline;text-underline-offset:3px}
.subscription-actions{display:flex;gap:8px;flex-wrap:wrap}
.subscription-actions button{min-width:120px}
#adminCount{margin:8px 0}
@media(max-width:600px){.subscription-actions{display:grid;grid-template-columns:1fr 1fr}.subscription-actions button{min-width:0}}

/* Keep Arabic navigation labels clear, consistent, and on a single line. */
.nav button {
  grid-template-columns: 24px minmax(0, 1fr) 8px;
  column-gap: 10px;
  min-height: 50px;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 13px;
  font-size: 15px;
  line-height: 1.45;
  white-space: nowrap;
}
.nav .ico {
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  flex: 0 0 24px;
}
.nav .ico svg { width: 20px; height: 20px; }
.nav-label {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav button:not(.active) { color: #c4bdce; }
.nav button:hover:not(.active) { background: #ffffff0b; color: #f5e8f7; }
.nav button.active {
  border-color: #d595e441;
  background: linear-gradient(110deg, #9e46b22e, #c767cf35);
  color: #f8e7fb;
  box-shadow: inset 0 1px #ffffff0c;
}
[dir="ltr"] .nav button { direction: ltr; }
[dir="ltr"] .nav-label { text-align: left; }
.auth-reset-link {
  display: block;
  margin: 2px 0 8px auto;
  padding: 4px 2px;
  border: 0;
  background: transparent;
  color: #d69ae4;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.auth-reset-link:hover { color: #fff; }
.auth-reset-link:disabled { opacity: .65; cursor: wait; }

/* Compact account popover and polished header actions. */
.top-actions{position:relative;gap:9px}
.account-menu{position:absolute;top:calc(100% + 11px);inset-inline-end:0;z-index:25;width:220px;padding:11px;display:grid;gap:8px;border:1px solid #ffffff24;border-radius:18px;background:linear-gradient(150deg,#252034f7,#181723fa);box-shadow:0 18px 48px #08060d55;backdrop-filter:blur(20px);animation:account-menu-in .18s ease both}
.account-menu[hidden]{display:none!important}
.account-language-label{padding:4px 3px 0;color:var(--muted);font-size:12px;font-weight:800}
.account-menu .lang,.account-menu .glass-select-trigger,.account-menu button{width:100%;min-height:40px;border:1px solid var(--line);border-radius:12px;background:#ffffff08;color:var(--text);font-weight:750;text-align:start}
.account-menu .account-profile-link{display:flex;align-items:center;gap:9px;padding:0 11px;cursor:pointer}
.account-menu .account-link-icon{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:#bd45d71d;color:#e5a2f0}
.account-menu .account-signout{padding:0 11px;cursor:pointer}
.account-menu .account-signout.is-signed-in{color:#ffc0c7;border-color:#ed728041;background:#ee546010}
.account-menu .account-signout.is-signed-in:hover{background:#ee546020;border-color:#ed728080}
@keyframes account-menu-in{from{opacity:0;transform:translateY(-5px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.top-actions .icon-btn{display:grid;place-items:center;overflow:hidden;transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease}
.top-actions .icon-btn:hover{transform:translateY(-2px);border-color:#d89be6;background:#bd45d71a;box-shadow:0 7px 20px #bd45d726}
.top-actions .icon-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#themeToggle{width:46px;height:46px;border-radius:16px;color:#ffe09a;background:linear-gradient(145deg,#bd45d726,#f3aa481a);border-color:#f3aa4844}
#themeToggle:hover{box-shadow:0 0 0 4px #f3aa4814,0 8px 24px #f3aa4838}
#themeToggle svg{position:absolute;transition:opacity .22s ease,transform .32s cubic-bezier(.2,.8,.2,1)}
#themeToggle .theme-moon{opacity:1;transform:rotate(0) scale(1)}
#themeToggle .theme-sun{opacity:0;transform:rotate(-50deg) scale(.55)}
.theme-light #themeToggle .theme-moon{opacity:0;transform:rotate(50deg) scale(.55)}
.theme-light #themeToggle .theme-sun{opacity:1;transform:rotate(0) scale(1)}
.top-actions .profile-trigger{width:46px;height:46px;border-radius:16px;padding:0;color:#f7f1ff;background:linear-gradient(145deg,#8d4bc6,#cf69a0 52%,#eda95e);border:0;box-shadow:0 7px 18px #8946ae35}
.top-actions .profile-trigger:hover{box-shadow:0 0 0 4px #c76bd326,0 8px 22px #8c49b64a}
.top-actions .profile-trigger svg{width:26px;height:26px;stroke-width:1.65}
.top-actions .profile-trigger .profile-ring{fill:#ffffff22;stroke:#ffffffac}
.top-actions .profile-trigger .profile-head,.top-actions .profile-trigger .profile-body{fill:#fff;stroke:#fff}
.top-actions .profile-trigger .profile-body{stroke-width:1.1}
.side-bottom{padding-top:10px}
.profile-mini{border-color:#ffffff19;box-shadow:inset 0 1px #ffffff0c}
.profile-mini .avatar{position:relative;overflow:hidden;box-shadow:0 0 0 3px #bd45d722,0 4px 14px #0b091233}

/* Warm porcelain and plum light theme with fresh lilac/amber accents. */
body.theme-light{--bg:#f6f3f8;--panel:#ffffff;--panel2:#f4eef8;--line:#e5ddeb;--text:#282233;--muted:#746c7e;--pink:#a93bb9;--purple:#7044bf;--gold:#c47b22;--green:#208d68;background:radial-gradient(ellipse at 85% 3%,#e7cff04f,transparent 38%),radial-gradient(ellipse at 4% 84%,#ffdda83b,transparent 30%),#f6f3f8;color:var(--text);color-scheme:light}
body.theme-light .side{background:linear-gradient(180deg,#fffdfd,#f4eff8);border-color:#e8dfed;box-shadow:8px 0 30px #3924490b}
body.theme-light .card,body.theme-light .profile-mini{background:linear-gradient(145deg,#fff,#fcfaff);border-color:#e8e0ed;box-shadow:0 10px 30px #3620440d,inset 0 1px #ffffff}
body.theme-light .icon-btn,body.theme-light .lang{background:#fff;border-color:#e4dbea;color:#554461}
body.theme-light .account-menu{background:linear-gradient(150deg,#fff,#f8f3fb);border-color:#e7ddec;box-shadow:0 18px 48px #33213c26}
body.theme-light .account-menu button,body.theme-light .account-menu .glass-select-trigger{background:#fff;border-color:#e5dbea;color:#584461}
body.theme-light .account-menu .account-signout.is-signed-in{color:#a14657;background:#fff5f4;border-color:#f1d6d6}
body.theme-light .account-menu .account-link-icon{background:#f2e5f6;color:#8b4a9e}
body.theme-light .top-actions .icon-btn:not(.profile-trigger){color:#6c4b82}
body.theme-light .date{color:#89539b}
body.theme-light .title,body.theme-light .section-head h3,body.theme-light .stat-num,body.theme-light .profile-mini b{color:#2b2335}
body.theme-light .stat-top,body.theme-light .person .person-info b{color:#43364d}
body.theme-light .stat-icon{background:#efe3f5;color:#8c50a6}
body.theme-light .nav button{color:#766d80}
body.theme-light .nav button:not(.active){color:#71697a}
body.theme-light .nav button:hover:not(.active){background:#f0e8f5;color:#74438a}
body.theme-light .nav button.active{border-color:#ead9f0;background:linear-gradient(110deg,#f2e5f8,#f9eedf);color:#754188;box-shadow:inset 0 1px #fff}
body.theme-light .hero{background:radial-gradient(circle at 10% 120%,#bd74d254,transparent 38%),linear-gradient(110deg,#6e3d7d,#704b85 62%,#92614c);border-color:#a568b35c;box-shadow:0 14px 32px #633c7020}
body.theme-light .hero h2{color:#fff}
body.theme-light .hero p{color:#f5eafb}
body.theme-light .btn-primary{background:linear-gradient(105deg,#9653b8,#d18a43);color:#fff;box-shadow:0 8px 22px #8850a52b}
body.theme-light .btn-quiet{background:#fff;color:#584461;border-color:#e4dbea}
body.theme-light .field,body.theme-light .notice,body.theme-light .subtitle,body.theme-light .profile-mini small{color:var(--muted)}
body.theme-light .field input,body.theme-light .field textarea,body.theme-light .field select,body.theme-light .coach-note textarea{background:#fff;color:#30273a;border-color:#e3d9e9}
body.theme-light .field input:focus,body.theme-light .field textarea:focus,body.theme-light .field select:focus{border-color:#bc80c9;box-shadow:0 0 0 3px #b968c31a}
body.theme-light .person{background:#fff;border-color:#eee6f1;color:#30273a}
body.theme-light .person-info b{color:#30273a}
body.theme-light .person-info small,body.theme-light .chattext small,body.theme-light .schedule small{color:#81778b}
body.theme-light .chatline,body.theme-light .schedule{border-color:#eee8f1}
body.theme-light .chatline:hover{background:#f8f3fa}
body.theme-light .bubble{background:#efe4f4;color:#3c3045}
body.theme-light .bubble.me{background:#9b63ad;color:white}
body.theme-light .toast{background:#fff;color:#30273a;border-color:#e4dbea;box-shadow:0 12px 36px #30203a20}
body.theme-light .upload-box,body.theme-light .file-field{background:#faf6fc!important;border-color:#d5b6df!important}
body.theme-light .upload-zone,body.theme-light .upload-zone small{color:#71647a}
body.theme-light .payment-method,body.theme-light .payment-choice{background:#fff;border-color:#e5dbea;color:#392f42}
body.theme-light .payment-method b,body.theme-light .payment-choice small{color:#766d80}
body.theme-light .code{background:#f6f1f8;color:#644075;border-color:#e8dceb}
body.theme-light .sample-pic{box-shadow:inset 0 1px #ffffff38}
body.theme-light .rolebtn{background:#fff;color:#624071;border-color:#e5d9eb}
body.theme-light .auth-card{background:linear-gradient(145deg,#fff,#f7f1fa);color:#2c2334;border-color:#e9dfee;box-shadow:0 25px 90px #2d20364d}
body.theme-light .auth-card .btn-quiet{color:#594465}
body.theme-light .profile-mini .avatar{box-shadow:0 0 0 3px #b15fc42a,0 4px 14px #60436a20}
body.theme-light .private-note-card{background:linear-gradient(145deg,#fff9ff,#f5ecf9);border-color:#ead8ef}
body.theme-light .private-note-head p,body.theme-light .private-note-footer{color:#766c7f}
body.theme-light .private-badge{color:#75488a;background:#f0e2f5;border-color:#e2cce9}
body.theme-light .private-note-label textarea{background:#fff;border-color:#dcc6e3}
body.theme-light .glass-select-trigger{background:linear-gradient(140deg,#fff,#faf6fc);color:#4a3c52;border-color:#e4dbea;box-shadow:inset 0 1px #fff}
body.theme-light .glass-select-value.is-placeholder{color:#81758a}
body.theme-light .glass-select-chevron{border-color:#8e609d}
body.theme-light .glass-select-menu{background:linear-gradient(145deg,#fff,#f8f3fb);border-color:#e7ddec;box-shadow:0 18px 44px #37234426}
body.theme-light .glass-select-option{color:#51455b}
body.theme-light .glass-select-option:hover,body.theme-light .glass-select-option:focus-visible{color:#633d76;border-color:#eadbef;background:linear-gradient(100deg,#f2e5f8,#fbf1e4)}
body.theme-light .glass-select-option[aria-selected="true"]{color:#633d76;border-color:#e6d1ed;background:linear-gradient(100deg,#f2e5f8,#fbf1e4);box-shadow:inset 0 1px #fff}
body.theme-light .free-code-form{background:#fff;border-color:#e8e0ed}
body.theme-light .subscription-divider:before,body.theme-light .subscription-divider:after{background:#e8dfed}
@media(max-width:620px){.account-menu{width:min(220px,calc(100vw - 28px))}}

/* Refined cool light palette: porcelain surfaces, ink text, and a single violet accent. */
body.theme-light{
  --bg:#f5f7fc;--panel:#ffffff;--panel2:#eef1fb;--line:#e0e5f0;--text:#20283b;--muted:#68738a;
  --pink:#7353d6;--purple:#5944c7;--gold:#e1a33f;--green:#16866c;
  background:radial-gradient(ellipse at 84% 0,#dfe6ff73,transparent 36%),radial-gradient(ellipse at 8% 85%,#e9e4ff52,transparent 32%),#f5f7fc;
  color:var(--text);color-scheme:light
}
body.theme-light .side{background:linear-gradient(180deg,#fff,#f8f9fd);border-color:#e5e9f2;box-shadow:8px 0 28px #2634500b}
body.theme-light .card,body.theme-light .profile-mini{background:#fff;border-color:#e5e9f2;box-shadow:0 8px 24px #2634500a,inset 0 1px #fff}
body.theme-light .title,body.theme-light .section-head h3,body.theme-light .stat-num,body.theme-light .profile-mini b{color:#20283b}
body.theme-light .subtitle,body.theme-light .notice,body.theme-light .field,body.theme-light .profile-mini small{color:#68738a}
body.theme-light .date{color:#6650bd}
body.theme-light .stat-top{color:#46516a}
body.theme-light .stat-icon{background:#f0edff;color:#6750c5}
body.theme-light .nav button:not(.active){color:#647087}
body.theme-light .nav button:hover:not(.active){background:#f2f3fb;color:#53459b}
body.theme-light .nav button.active{border-color:#dedaf8;background:linear-gradient(105deg,#eeebff,#f3f5ff);color:#51449c;box-shadow:inset 0 1px #fff}
body.theme-light .hero{background:radial-gradient(circle at 10% 120%,#9d8bff4a,transparent 38%),linear-gradient(110deg,#433b88,#514ba2 66%,#5969a6);border-color:#8982d580;box-shadow:0 14px 30px #373d7922}
body.theme-light .hero h2{color:#fff}
body.theme-light .hero p{color:#e8eaff}
body.theme-light .btn-primary{background:linear-gradient(105deg,#6551d3,#8065df);color:#fff!important;text-shadow:0 1px 2px #30245c44;box-shadow:0 7px 19px #6250c52c}
body.theme-light .btn-primary:hover{filter:brightness(1.05);box-shadow:0 9px 22px #6250c53b}
body.theme-light .btn-quiet{background:#fff;color:#4c5570;border-color:#dfe4ef}
body.theme-light .icon-btn,body.theme-light .lang{background:#fff;border-color:#dfe4ef;color:#58647d}
body.theme-light .top-actions .profile-trigger{background:linear-gradient(145deg,#7158d4,#7c69de 58%,#6f7cdb);box-shadow:0 6px 16px #5c51b72e}
body.theme-light .top-actions .profile-trigger:hover{box-shadow:0 0 0 4px #7564da1c,0 8px 22px #6250c53b}
body.theme-light .field input,body.theme-light .field textarea,body.theme-light .field select,body.theme-light .coach-note textarea{background:#fff;color:#283149;border-color:#dfe4ef}
body.theme-light .field input:focus,body.theme-light .field textarea:focus,body.theme-light .field select:focus{border-color:#8978df;box-shadow:0 0 0 3px #7663d71c}
body.theme-light .person{background:#fff;border-color:#e7eaf2;color:#283149}
body.theme-light .person-info b{color:#283149}
body.theme-light .person-info small,body.theme-light .chattext small,body.theme-light .schedule small{color:#737e93}
body.theme-light .chatline,body.theme-light .schedule{border-color:#edf0f6}
body.theme-light .chatline:hover{background:#f7f8fc}
body.theme-light .bubble{background:#eeeffa;color:#333b56}
body.theme-light .bubble.me{background:#6654c8;color:#fff}
body.theme-light .toast{background:#fff;color:#283149;border-color:#e0e5f0;box-shadow:0 12px 36px #25304a20}
body.theme-light .upload-box,body.theme-light .file-field{background:#fafaff!important;border-color:#d9d8f1!important}
body.theme-light .upload-zone,body.theme-light .upload-zone small{color:#68738a}
body.theme-light .payment-method,body.theme-light .payment-choice{background:#fff;border-color:#e1e6f0;color:#303951}
body.theme-light .payment-method b,body.theme-light .payment-choice small{color:#68738a}
body.theme-light .private-note-card{background:linear-gradient(145deg,#fff,#f8f7ff);border-color:#e2def7}
body.theme-light .private-note-head p,body.theme-light .private-note-footer{color:#68738a}
body.theme-light .private-badge{color:#5749a5;background:#f0edff;border-color:#ded9f8}
body.theme-light .private-note-label textarea{background:#fff;border-color:#ded9f2}
body.theme-light .code{background:#f6f7fc;color:#51439a;border-color:#e3e6f0}
body.theme-light .free-code-form{background:#fff;border-color:#e5e9f2}
body.theme-light .subscription-divider:before,body.theme-light .subscription-divider:after{background:#e4e8f1}
body.theme-light .account-menu{background:linear-gradient(150deg,#fff,#f7f8fd);border-color:#e1e6f0;box-shadow:0 18px 44px #26345020}
body.theme-light .account-menu button,body.theme-light .account-menu .glass-select-trigger{background:#fff;border-color:#e1e6f0;color:#3e4962}
body.theme-light .account-menu .account-signout.is-signed-in{color:#a43d53;background:#fff5f6;border-color:#f0d9df}
body.theme-light .glass-select-trigger{background:linear-gradient(140deg,#fff,#f8f9fd);color:#3e4962;border-color:#dfe4ef;box-shadow:inset 0 1px #fff}
body.theme-light .glass-select-menu{background:linear-gradient(145deg,#fff,#f8f9fd);border-color:#e1e6f0;box-shadow:0 18px 44px #26345020}
body.theme-light .glass-select-option{color:#46516a}
body.theme-light .glass-select-option:hover,body.theme-light .glass-select-option:focus-visible,body.theme-light .glass-select-option[aria-selected="true"]{color:#51449c;border-color:#e2def7;background:linear-gradient(100deg,#f0edff,#f4f6ff);box-shadow:inset 0 1px #fff}
body.theme-light .auth-card{background:linear-gradient(145deg,#fff,#f7f8fe);color:#20283b;border-color:#e1e6f0;box-shadow:0 25px 90px #26345038}

/* Profile editor, shared by coach and trainee accounts. */
.logo{font-size:16px;letter-spacing:-1.25px;font-weight:900}
.home-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.home-btn{color:#d8b3e5}
.profile-editor-card{display:grid;gap:22px;padding:24px;max-width:920px}
.profile-photo-stage{display:grid;justify-items:center;gap:12px;padding:24px 16px 18px;border:1px solid #ffffff12;border-radius:20px;background:radial-gradient(ellipse at 50% 0,#b148c51c,transparent 68%),#ffffff04}
.profile-editor-avatar{display:grid;place-items:center;width:132px;height:132px;flex:0 0 132px;border:4px solid #24202c;box-shadow:0 0 0 3px #b95bd25c,0 12px 30px #08070c55;font-size:42px;overflow:hidden}
.profile-editor-avatar .profile-photo{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.profile-photo-action{position:relative;overflow:hidden;min-width:150px;justify-content:center;display:inline-flex;align-items:center;gap:8px}
.profile-photo-action input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.profile-photo-stage .notice{margin:0;text-align:center}
.profile-editor-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.profile-editor-form .field{margin:0}
.profile-editor-form .full{grid-column:1/-1}
.profile-editor-form .btn-primary{min-height:50px}
body.theme-light .logo{background:linear-gradient(145deg,#6654d3,#7565dc 62%,#7984d8);box-shadow:0 7px 18px #6250c52d,inset 0 1px #ffffff75}
body.theme-light .home-btn{color:#5749a5}
body.theme-light .profile-photo-stage{border-color:#e4e7f1;background:radial-gradient(ellipse at 50% 0,#eae7ff,transparent 72%),#f8f9fd}
body.theme-light .profile-editor-avatar{border-color:#fff;box-shadow:0 0 0 3px #8170dc55,0 12px 28px #38417420}
body.theme-light .profile-photo-action{background:#fff;color:#51449c;border-color:#dedaf5}
@media(max-width:650px){.profile-editor-card{padding:16px;gap:17px}.profile-photo-stage{padding:20px 12px 15px}.profile-editor-avatar{width:116px;height:116px;flex-basis:116px}.profile-editor-form{grid-template-columns:1fr;gap:13px}.profile-editor-form .full{grid-column:auto}}
/* Restore consistent account identity and contrast across cached and fresh themes. */
.profile-nav-link{min-height:58px!important}
.nav-profile-avatar{width:30px!important;height:30px!important;flex:0 0 30px;border-radius:10px!important;font-size:13px}
.nav-profile-copy,.account-link-copy{display:grid;gap:1px;min-width:0;overflow:hidden}
.nav-profile-copy b,.account-link-copy b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:850}
.nav-profile-copy small,.account-link-copy small{display:block;color:#aaa5b8;font-size:10px;font-weight:650;line-height:1.2}
.nav button.profile-nav-link{grid-template-columns:30px minmax(0,1fr) 8px;gap:10px}
.nav button.profile-nav-link.active .nav-profile-copy small{color:#e6c3f1}
.profile-trigger-avatar{width:36px!important;height:36px!important;flex:0 0 36px;border-radius:11px!important;font-size:15px}
.account-link-avatar{width:28px;height:28px;flex:0 0 28px;border-radius:9px;font-size:12px}
.account-menu .account-profile-link{min-height:52px;gap:10px}
.account-link-copy b{color:inherit;font-size:13px}
.account-link-copy small{color:var(--muted)}
/* Keep vector controls outlined even if a previous global icon rule is cached. */
#themeToggle svg,#themeToggle svg path,#themeToggle svg circle,.home-btn svg,.home-btn svg path,[data-goto="chat"] svg,[data-goto="chat"] svg path,[data-goto="chat"] svg rect{fill:none!important;stroke:currentColor!important}
#themeToggle svg,.home-btn svg,[data-goto="chat"] svg{stroke-width:1.8!important;stroke-linecap:round;stroke-linejoin:round}
#profileMenuToggle .profile-trigger-avatar .profile-photo{width:100%;height:100%;object-fit:cover}
/* Force readable roster rows on dark surfaces; the light theme has its own contrast pair. */
.person,#traineePreview .person,#traineeList .person{appearance:none!important;color:#f7f4fb!important;background:linear-gradient(120deg,#ffffff0b,#ffffff04)!important;border:1px solid #ffffff18!important;border-radius:14px!important}
.person .person-info b,#traineePreview .person-info b,#traineeList .person-info b{color:#f7f4fb!important}
.person .person-info small,#traineePreview .person-info small,#traineeList .person-info small{color:#c2bdce!important}
body.theme-light .person,body.theme-light #traineePreview .person,body.theme-light #traineeList .person{color:#283149!important;background:linear-gradient(120deg,#fff,#f7f8fc)!important;border-color:#e2e6f0!important}
body.theme-light .person .person-info b,body.theme-light #traineePreview .person-info b,body.theme-light #traineeList .person-info b{color:#283149!important}
body.theme-light .person .person-info small,body.theme-light #traineePreview .person-info small,body.theme-light #traineeList .person-info small{color:#737e93!important}
.auth-reset-link{appearance:none!important;color:#e6b3f2!important;background:transparent!important;border:0!important;box-shadow:none!important;text-shadow:none!important;min-height:30px}
.auth-reset-link:hover{color:#fff!important;background:transparent!important}
body.theme-light .auth-reset-link{color:#51449c!important}
body.theme-light .auth-reset-link:hover{color:#372a82!important}

/* Header branding and chat selection surfaces. */
.top-brand-group{display:flex;align-items:center;gap:12px;min-width:0}
.header-brand{display:inline-flex;align-items:center;gap:12px;padding:0;border:0;background:transparent;color:var(--text);font:inherit;font-weight:900;cursor:pointer;white-space:nowrap}
.header-brand-name{font-size:18px;letter-spacing:-.035em}
.header-brand-logo{width:42px;height:42px;border-radius:15px;box-shadow:0 7px 20px #a946c433,inset 0 1px #ffffff50}
body.theme-light .header-brand{color:#20283b}
body.theme-light .header-brand-logo{background:linear-gradient(145deg,#6654d3,#7565dc 62%,#7984d8)}
.chat-layout{grid-template-columns:minmax(220px,.82fr) minmax(0,1.6fr)!important;align-items:stretch}
.chat-layout>.chat-thread-card{display:flex;flex-direction:column;gap:12px}
.chat-layout>.coach-note{grid-column:1/-1}
html[data-account-role="trainee"] .coach-note{display:none!important}
.chat-thread-head{align-items:center;gap:15px;flex-wrap:wrap;margin:0}
.chat-picker-label{display:grid;gap:5px;min-width:min(245px,100%);color:var(--muted);font-size:12px;font-weight:750}
.chat-picker-label select{width:100%;min-width:0;height:43px;border:1px solid var(--line);border-radius:12px;background:#171621;color:var(--text);padding:0 12px}
.chat-conversations-card #chatList{display:grid;gap:8px;max-height:min(58vh,620px);overflow-y:auto}
#chatList .chatline{width:100%;padding:10px 12px;border:1px solid #ffffff14;border-radius:14px;background:#ffffff06;text-align:start;color:var(--text);cursor:pointer;transition:.18s ease}
#chatList .chatline:hover,#chatList .chatline.selected{border-color:#aa6dc4;background:#a14fbd1c}
#chatList .chatline.selected{box-shadow:inset 3px 0 #9c66d8}
.chat-list-empty{margin:0;padding:22px 12px;border:1px dashed #ffffff22;border-radius:14px;text-align:center}
.chatbox{height:clamp(320px,48vh,560px);min-height:320px;border:1px solid #ffffff13;background:linear-gradient(155deg,#171722,#1d1b2b 70%,#211b2b);overscroll-behavior:contain}
.chatbox .chat-empty-state{max-width:370px;margin:auto;text-align:center;line-height:1.8}
.chat-send input.field{flex:1}
body.theme-light #chat .card{background:linear-gradient(145deg,#fff,#fafaff);border-color:#e1e6f0;box-shadow:0 10px 28px #38456d0b}
body.theme-light .chatbox{background:linear-gradient(155deg,#f7f8fd,#f2f1fb);border-color:#e0e4ef}
body.theme-light #chatList .chatline{color:#273149;background:linear-gradient(130deg,#fff,#f8f9fd);border-color:#e2e6f0}
body.theme-light #chatList .chatline:hover,body.theme-light #chatList .chatline.selected{background:linear-gradient(110deg,#f0edff,#f9f6ff);border-color:#b9afea}
body.theme-light #chatList .chatline.selected{box-shadow:inset 3px 0 #7565d6,0 4px 12px #51449c10}
body.theme-light #chatList .chattext b{color:#273149}
body.theme-light #chatList .chattext small{color:#707b91}
body.theme-light .chat-picker-label{color:#5d6880}
body.theme-light .chat-picker-label select,body.theme-light .chat-picker-label select option{color:#273149;background:#fff;border-color:#dfe4ef;color-scheme:light}
body.theme-light .chat-send input.field{background:#fff;color:#283149;border-color:#dfe4ef;box-shadow:inset 0 1px 2px #26345008}
body.theme-light .chat-send input.field::placeholder{color:#7c879b}
body.theme-light .chatbox .bubble{background:#e9e8f7;color:#333956}
body.theme-light .chatbox .bubble.me{background:linear-gradient(135deg,#6654c8,#7868d7);color:#fff}
body.theme-light .chat-list-empty{border-color:#dce1ed;color:#657087}
@media(max-width:900px){.chat-layout{grid-template-columns:minmax(0,1fr)!important}.chat-layout>.chat-thread-card{grid-row:1}.chat-layout>.chat-conversations-card{grid-row:2}.chat-layout>.coach-note{grid-row:3}}
@media(max-width:650px){.top-brand-group{gap:8px}.header-brand{gap:7px}.header-brand-name{font-size:15px}.header-brand-logo{width:36px;height:36px;border-radius:12px;font-size:14px}.chat-thread-head{align-items:stretch}.chat-picker-label{width:100%;min-width:100%}.chatbox{height:48vh;min-height:280px}.chat-send{grid-template-columns:minmax(0,1fr) auto}}

/* Coach roster detail drawer */
.trainee-detail-drawer{position:fixed;inset:0;z-index:1000;visibility:hidden;pointer-events:none}
.trainee-detail-drawer.open{visibility:visible;pointer-events:auto}
.drawer-backdrop{position:absolute;inset:0;border:0;background:#070711a8;opacity:0;transition:opacity .22s}
.trainee-detail-drawer.open .drawer-backdrop{opacity:1}
.drawer-panel{position:absolute;inset-block:0;inset-inline-end:0;width:min(440px,94vw);overflow:auto;padding:24px;background:var(--surface,#1b1b27);border-inline-start:1px solid var(--line);box-shadow:0 20px 65px #0005;transform:translateX(105%);transition:transform .26s ease}
html[dir="rtl"] .drawer-panel{transform:translateX(-105%)}
.trainee-detail-drawer.open .drawer-panel{transform:translateX(0)}
.drawer-close{display:grid;place-items:center;margin-inline-start:auto;width:38px;height:38px;border:1px solid var(--line);border-radius:12px;background:transparent;color:var(--text);font-size:24px;cursor:pointer}
.drawer-person{display:flex;align-items:center;gap:14px;padding:20px 0 24px;border-bottom:1px solid var(--line)}
.drawer-person .avatar{width:62px;height:62px;font-size:22px;overflow:hidden}.drawer-person h2{margin:0;font-size:20px}.drawer-person p,.drawer-extra p{margin:5px 0 0;color:var(--muted)}
.drawer-fields{display:grid;gap:10px;padding-top:18px}.drawer-field{display:grid;gap:6px;padding:13px 14px;border:1px solid var(--line);border-radius:14px;background:#ffffff05}.drawer-field small{color:var(--muted)}.drawer-field b{overflow-wrap:anywhere;font-weight:650}
.drawer-extra{margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}.drawer-extra h3{margin:0}.drawer-extra code{display:block;overflow-wrap:anywhere;color:var(--muted);font-size:11px}
body.theme-light .drawer-panel{background:#fff;color:#20283b}.theme-light .drawer-field{background:#f6f7fc;border-color:#e1e5ef}
.chat-conversations-card,.chat-thread-card{border:1px solid var(--line);box-shadow:0 12px 34px #09091412}
.chatline{transition:background .18s,border-color .18s,transform .18s}.chatline:hover{transform:translateY(-1px);background:#a64bc312;border-color:#b368ce66}
.chatline.selected{background:linear-gradient(110deg,#a84ac51d,#8266d31b);border-color:#b85fd4}
.chat-thread-head{gap:16px}.chat-thread-head .notice{margin:.45em 0 0}.chatbox{border:1px solid var(--line);background:linear-gradient(160deg,#171722,#211b2c)}.theme-light .chatbox{background:linear-gradient(160deg,#f5f6fb,#fff);border-color:#e0e4ef}
.theme-light .chat-send input,.theme-light #message{background:#fff;color:#20283b;border:1px solid #dfe3ed}.theme-light .chatline{background:#fff;border-color:#e4e6ef;color:#20283b}.theme-light .chatline.selected{background:#f7effb;border-color:#b46bc8}.theme-light .chat-empty-state{color:#71788d}
@media(max-width:900px){.drawer-panel{width:min(440px,94vw)}}

/* Account quick actions live in one thumb-friendly bottom rail. */
.app-bottom-nav{display:none;align-items:center;justify-content:space-around;gap:6px;position:fixed;z-index:30;inset-inline:50% auto;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(50%);width:min(520px,calc(100% - 28px));padding:8px;border:1px solid #ffffff20;border-radius:22px;background:linear-gradient(135deg,#211c30ef,#302138eb);box-shadow:0 16px 48px #08071155,inset 0 1px #ffffff15;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
html[dir="ltr"] .app-bottom-nav{transform:translateX(-50%)}
html[data-account-role="staff"] .app-bottom-nav,html[data-account-role="trainee"] .app-bottom-nav{display:flex}
.app-bottom-nav button{position:relative;display:grid;justify-items:center;align-content:center;gap:4px;flex:1;min-width:0;min-height:52px;padding:5px 4px;border:0;border-radius:15px;background:transparent;color:#e7dbea;font-size:10px;font-weight:750;white-space:nowrap;transition:background .18s,color .18s,transform .18s}
.app-bottom-nav button:hover,.app-bottom-nav button:focus-visible{background:#ffffff12;color:#fff;transform:translateY(-1px);outline:none}
.app-bottom-nav button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.app-bottom-nav #bottomTheme{padding-top:24px}.app-bottom-nav #bottomTheme svg{position:absolute;top:5px;transition:opacity .2s,transform .25s}.app-bottom-nav #bottomTheme .theme-moon{opacity:1;transform:rotate(0) scale(1)}.app-bottom-nav #bottomTheme .theme-sun{opacity:0;transform:rotate(-45deg) scale(.65)}.theme-light .app-bottom-nav #bottomTheme .theme-moon{opacity:0;transform:rotate(45deg) scale(.65)}.theme-light .app-bottom-nav #bottomTheme .theme-sun{opacity:1;transform:rotate(0) scale(1)}
.app-bottom-nav button[hidden]{display:none!important}
html[data-account-role="staff"] .top-actions>#themeToggle,html[data-account-role="staff"] .top-actions>.home-btn,html[data-account-role="staff"] .top-actions>[data-goto="chat"],html[data-account-role="trainee"] .top-actions>#themeToggle,html[data-account-role="trainee"] .top-actions>.home-btn,html[data-account-role="trainee"] .top-actions>[data-goto="chat"]{display:none!important}
html[data-account-role="trainee"] .top-actions>.hamb{display:none!important}
html[data-account-role="staff"] .main,html[data-account-role="trainee"] .main{padding-bottom:calc(112px + env(safe-area-inset-bottom))}
.admin-roster-modal[hidden]{display:none!important}
.admin-roster-modal{position:fixed;inset:0;z-index:1100;display:grid;place-items:end center;padding:18px}
.admin-roster-backdrop{position:absolute;inset:0;border:0;background:#080711a8;backdrop-filter:blur(4px)}
.admin-roster-panel{position:relative;width:min(470px,100%);max-height:min(72vh,620px);overflow:auto;padding:24px;border:1px solid #ffffff20;border-radius:24px;background:linear-gradient(145deg,#272033,#191822);box-shadow:0 24px 70px #0007;animation:pagein .22s ease both}
.admin-roster-panel h2{margin:0}.admin-roster-close{position:absolute;inset-block-start:14px;inset-inline-end:14px;width:36px;height:36px;border:1px solid var(--line);border-radius:12px;background:#ffffff0b;color:var(--text);font-size:22px}
.admin-roster-list{display:grid;gap:9px;margin-top:18px}.admin-roster-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #ffffff18;border-radius:15px;background:#ffffff08}.admin-roster-item>div{display:grid;gap:3px;min-width:0}.admin-roster-item small{color:var(--muted);overflow-wrap:anywhere}
body.theme-light{--bg:#faf6fb;--panel:#fff;--panel2:#f5eff8;--line:#eadfeb;--text:#30243a;--muted:#796a82;--pink:#a454bb;--purple:#7b4d9e;--gold:#d99250;--green:#20836c;background:radial-gradient(ellipse at 85% 0,#edd9f478,transparent 38%),radial-gradient(ellipse at 8% 86%,#f8e4ce70,transparent 35%),#faf6fb;color:var(--text)}
body.theme-light .btn-primary{background:linear-gradient(105deg,#8252ad,#b45f9e 62%,#d89350);box-shadow:0 8px 20px #8c58a329}
body.theme-light .app-bottom-nav{background:linear-gradient(120deg,#fffefaF2,#fbf5fff2);border-color:#e7d9eb;box-shadow:0 14px 38px #5c3b6426,inset 0 1px #fff}
body.theme-light .app-bottom-nav button{color:#72577e}body.theme-light .app-bottom-nav button:hover,body.theme-light .app-bottom-nav button:focus-visible{background:linear-gradient(115deg,#f3e8f7,#fff0df);color:#684079}
body.theme-light .admin-roster-panel{background:linear-gradient(145deg,#fff,#fbf5fc);border-color:#e8ddeb;box-shadow:0 24px 70px #47334b30}
body.theme-light .admin-roster-item{background:linear-gradient(120deg,#fff,#fbf5fc);border-color:#eadfeb}
@media(max-width:650px){.app-bottom-nav{width:calc(100% - 24px);bottom:max(10px,env(safe-area-inset-bottom));border-radius:19px}.app-bottom-nav button{min-height:50px;font-size:9px}.app-bottom-nav button svg{width:20px;height:20px}.admin-roster-modal{padding:12px}.admin-roster-panel{padding:21px;max-height:80vh}}

/* Mobile-first interaction and layout finish: narrow screens, safe areas and thumb-sized controls. */
@media (max-width: 650px) {
  .shell { display: block; min-height: 100svh; }
  .side { position: fixed; z-index: 100; inset-block: 0; inset-inline-start: 0; width: min(290px, 86vw); height: 100vh; height: 100dvh; transform: translateX(110%); transition: transform .22s ease; box-shadow: 0 16px 50px #05050c70; }
  [dir="ltr"] .side { transform: translateX(-110%); }
  .side.open { transform: translateX(0); }
  .side[hidden] { display: none !important; }
  .hamb { display: inline-grid; place-items: center; width: 42px; height: 42px; }
  .main { width: 100%; padding: 14px 12px calc(116px + env(safe-area-inset-bottom)); }
  html:not([data-account-role="guest"]) .main { padding-bottom: calc(124px + env(safe-area-inset-bottom)); }
  .top { align-items: center; gap: 8px; min-width: 0; }
  .top-brand-group { min-width: 0; }
  .header-brand-name { font-size: clamp(13px, 4vw, 16px); }
  .top-actions { width: auto; flex: 0 0 auto; gap: 6px; }
  .top-actions .profile-trigger { width: 42px; height: 42px; }
  .headrow { align-items: flex-start; flex-wrap: wrap; }
  .headrow > .btn-primary, .headrow > button { max-width: 100%; }
  .hero { align-items: flex-start; flex-direction: column; gap: 16px; padding: 20px 17px; }
  .hero .btn-primary { white-space: normal; }
  .stats, .grid2, .form { grid-template-columns: minmax(0,1fr) !important; }
  .form .field.full, .profile-editor-form .full { grid-column: auto; }
  .card { padding: 14px; }
  .chat-layout { display: flex !important; flex-direction: column; }
  .chat-layout > .chat-thread-card { order: 0; width: 100%; }
  .chat-layout > .chat-conversations-card { order: 1; width: 100%; }
  .chatbox { height: min(48svh, 430px); min-height: 250px; }
  .chat-thread-head { flex-direction: column; }
  .chat-picker-label { width: 100%; min-width: 0; }
  .chat-send { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px; }
  .chat-send input.field { min-width: 0 !important; min-height: 46px; }
  .chat-send button { min-width: 68px; min-height: 46px; padding-inline: 12px; }
  .app-bottom-nav { width: calc(100% - 20px); bottom: max(8px, env(safe-area-inset-bottom)); padding: 6px; }
  .app-bottom-nav button { min-height: 50px; }
  .admin-roster-modal { place-items: end center; padding: 10px 10px max(10px, env(safe-area-inset-bottom)); }
  .admin-roster-panel { width: 100%; max-height: 82svh; border-radius: 22px; }
  .profile-editor-card { grid-template-columns: 1fr; }
  .profile-photo-stage { min-width: 0; }
  .drawer-panel { width: min(100%, 440px); }
  input, select, textarea, button { touch-action: manipulation; }
}
@media (max-width: 380px) {
  .main { padding-inline: 9px; }
  .header-brand { gap: 5px; }
  .header-brand-name { font-size: 12px; }
  .header-brand-logo { width: 34px; height: 34px; }
  .hamb { width: 38px; height: 38px; }
  .app-bottom-nav button { font-size: 8px; }
  .app-bottom-nav button svg { width: 18px; height: 18px; }
}
/* Trainee bottom destinations and meal capture surface. */
html[data-account-role="trainee"] .app-bottom-nav .staff-only,
html[data-account-role="trainee"] .app-bottom-nav #bottomAdminBtn,
html[data-account-role="staff"] .app-bottom-nav .trainee-only { display:none !important; }
html[data-account-role="guest"] .app-bottom-nav { display:none !important; }
.app-bottom-nav button.is-active { background:linear-gradient(130deg,#9b58bc35,#e0a35c20);color:#fff;box-shadow:inset 0 0 0 1px #cd8bda42; }
body.theme-light .app-bottom-nav button.is-active { color:#57356f;background:linear-gradient(130deg,#eedcf5,#fff0d9);box-shadow:inset 0 0 0 1px #d2b4dc; }
.trainee-feature-view .trainee-feature-content { display:grid;gap:14px;max-width:900px;margin-inline:auto; }
.trainee-feature-view .trainee-feature-content > .card { width:100%; }
.trainee-meal-card { display:grid;gap:15px; }
.meal-capture-zone { min-height:190px;display:grid;place-content:center;justify-items:center;gap:8px;padding:22px;border:1.5px dashed #bd78cf;border-radius:20px;background:radial-gradient(circle at 50% 0,#a54ec31c,transparent 70%),#ffffff04;text-align:center;cursor:pointer;transition:border-color .2s,background .2s,transform .2s; }
.meal-capture-zone:hover,.meal-capture-zone:focus-within { border-color:#d294e3;background-color:#a54ec312;transform:translateY(-1px); }
.meal-capture-zone input { position:absolute;width:1px;height:1px;opacity:0;pointer-events:none; }
.meal-capture-zone small { color:var(--muted); }
.meal-capture-icon { display:grid;place-items:center;width:54px;height:54px;border-radius:18px;background:linear-gradient(135deg,#a84ccc,#7661cc 70%,#d39154);color:#fff;font-size:32px;line-height:1;box-shadow:0 9px 24px #8e50b633; }
.trainee-meal-preview { width:min(100%,520px);max-height:440px;object-fit:contain;justify-self:center;border:1px solid var(--line);border-radius:18px;background:#11111b; }
.trainee-meal-preview[hidden] { display:none !important; }
body.theme-light .meal-capture-zone { background:radial-gradient(circle at 50% 0,#a854bd12,transparent 70%),#fbf8fd;border-color:#d9c5df; }
body.theme-light .trainee-meal-preview { background:#f4f2f8;border-color:#e1d8e7; }
html[data-account-role="trainee"] .app-bottom-nav { gap:3px;padding:6px; }
html[data-account-role="trainee"] .app-bottom-nav button { padding-inline:2px;font-size:9px; }
html[data-account-role="trainee"] .top-brand-group>.hamb { display:none!important; }
html[data-account-role="trainee"] .trainee-account-picker { display:none!important; }
html[data-account-role="trainee"] .trainee-header-avatar img.profile-photo { width:100%;height:100%;object-fit:cover;border-radius:inherit; }
.checkin-commitment>span { display:flex;align-items:center;gap:10px;color:var(--text);font-weight:750; }
.checkin-commitment input[type="checkbox"] { width:21px;height:21px;accent-color:#a34fc0; }
@media(max-width:380px){html[data-account-role="trainee"] .app-bottom-nav button{font-size:8px}.meal-capture-zone{min-height:160px;padding:16px}}
.meal-capture-zone { position:relative;overflow:hidden; }
.meal-capture-zone input { position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;pointer-events:auto; }
/* Non-staff accounts do not render the coach sidebar, so let their main view use the full grid width. */
html:not([data-account-role="staff"]) .shell { display:block;width:100%;max-width:none; }
html:not([data-account-role="staff"]) .main { display:block;width:min(100%,1200px);max-width:1200px;margin-inline:auto; }
html:not([data-account-role="staff"]) #traineeView,
html:not([data-account-role="staff"]) #traineeWorkouts,
html:not([data-account-role="staff"]) #traineeNutrition,
html:not([data-account-role="staff"]) #traineeMealUpload,
html:not([data-account-role="staff"]) #traineeInbodyUpload,
html:not([data-account-role="staff"]) #traineeChat { width:100%; }
html[data-account-role="trainee"] #traineeView.active:not([hidden]) { display:block!important;visibility:visible!important; }

/* Keep the coach layout in its original top navigation and let its desktop sidebar scroll with the document. */
html[data-account-role="staff"] .app-bottom-nav { display:none !important; }
html[data-account-role="staff"] .main { padding-bottom:24px; }
/* Keep Home as a separate round shortcut at the end of the trainee navigation row. */
html[data-account-role="trainee"] .app-bottom-nav #bottomHome {
  display:grid !important;
  flex:0 0 44px;
  width:44px;
  min-width:44px;
  min-height:44px;
  aspect-ratio:1;
  margin-inline:auto;
  padding:0;
  border:1px solid #d69be8a8;
  border-radius:50%;
  background:linear-gradient(145deg,#a64acb,#7147a9);
  color:#fff;
  box-shadow:0 5px 16px #8d42b955,inset 0 1px #ffffff55;
}
html[data-account-role="trainee"] .app-bottom-nav #bottomHome svg { width:22px;height:22px; }
html[data-account-role="trainee"] .app-bottom-nav #bottomHome:hover,
html[data-account-role="trainee"] .app-bottom-nav #bottomHome:focus-visible { background:linear-gradient(145deg,#bb60da,#8056bb);transform:translateY(-1px); }
html[data-account-role="trainee"] body.theme-light .app-bottom-nav #bottomHome { background:linear-gradient(145deg,#9252ad,#7653a6);color:#fff; }

/* Keep install/help toasts visible above the trainee's fixed mobile controls. */
#toast{z-index:1200;max-width:min(460px,calc(100vw - 32px));text-align:center;overflow-wrap:anywhere;background:linear-gradient(130deg,#282238f5,#382341f5)!important;border:1px solid #bd78d766!important;color:var(--text);box-shadow:0 14px 36px #07070d88,0 0 18px #a44bc221;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
@media(max-width:650px){
  html[data-account-role="trainee"] #toast{inset-inline:16px;width:auto;bottom:calc(112px + env(safe-area-inset-bottom))}
  html[data-account-role="staff"] #toast{inset-inline:16px;width:auto;bottom:max(20px,env(safe-area-inset-bottom))}
}
/* The account picker is for coach plan editing, not for the trainee home screen. */
#traineeView.active .trainee-account-picker { display:none !important; }
/* A calmer light palette with clearer contrast and a consistent violet accent. */
body.theme-light {
  --bg:#f6f5fb;
  --panel:#fff;
  --panel2:#f0eef8;
  --line:#e5e1ef;
  --text:#29243a;
  --muted:#706a80;
  --pink:#9a55bd;
  --purple:#7056bd;
  --gold:#d58b54;
  background:radial-gradient(ellipse at 88% 0,#e9e4fa 0,transparent 38%),radial-gradient(ellipse at 5% 92%,#faeee5 0,transparent 35%),var(--bg);
  color:var(--text);
}
body.theme-light .hero {
  border-color:#8070d966;
  background:radial-gradient(circle at 12% 110%,#e7a66b55,transparent 38%),linear-gradient(110deg,#5d4bb1,#7160bf 62%,#8068bc);
  box-shadow:0 16px 38px #5947a21c;
}
body.theme-light .card {
  background:linear-gradient(145deg,#fff,#fbfaff);
  border-color:#e5e1ef;
  box-shadow:0 9px 28px #4435680b;
}
body.theme-light .btn-primary {
  background:linear-gradient(105deg,#7554bd,#a458ae 68%,#d58b54);
  color:#fff;
  box-shadow:0 8px 20px #7953b52b;
}
body.theme-light .top-actions .icon-btn,
body.theme-light .top-actions .home-btn,
body.theme-light .top-actions #themeToggle {
  background:#fff;
  border-color:#e3deef;
  color:#574397;
  box-shadow:0 5px 16px #49386e10;
}
body.theme-light .field input,
body.theme-light .field textarea,
body.theme-light .field select {
  background:#fff;
  border-color:#ded9e9;
  color:#29243a;
}
body.theme-light .subtitle,
body.theme-light .notice,
body.theme-light .stat-note { color:#706a80; }
body.theme-light .stat-top { color:#514a63; }
body.theme-light .app-bottom-nav {
  background:linear-gradient(125deg,#fffefaF5,#f6f2fff5);
  border-color:#e1daee;
  box-shadow:0 14px 38px #45366020,inset 0 1px #fff;
}
.admin-roster-item > div { flex:1; }
.admin-remove-button {
  flex:0 0 auto;
  border:1px solid #e88998;
  border-radius:10px;
  padding:8px 12px;
  background:#a8384c;
  color:#fff;
  font:inherit;
  font-size:12px;
  font-weight:750;
  cursor:pointer;
}
.admin-remove-button:disabled { opacity:.6;cursor:wait; }
.plan-pdf-preview,.plan-pdf-link {
  display:flex;
  align-items:center;
  gap:9px;
  width:max-content;
  max-width:100%;
  margin-top:8px;
  padding:10px 13px;
  border:1px solid #b878ce70;
  border-radius:12px;
  background:#9c4bbc18;
  color:#f2d8fa;
  font-size:13px;
  font-weight:700;
  text-decoration:none;
  overflow-wrap:anywhere;
}
.plan-pdf-preview:hover,.plan-pdf-link:hover { background:#9c4bbc2b; }
body.theme-light .admin-remove-button { border-color:#edc8ce;background:#fff1f2;color:#a4374b; }
body.theme-light .plan-pdf-preview,body.theme-light .plan-pdf-link { border-color:#d8c9ee;background:#f3effb;color:#5b468d; }
.workout-tracker { display:grid;gap:20px; }
.workout-tracker .section-head { gap:12px; }
.workout-tracker .section-head h2,.workout-tracker .section-head h3 { margin:0; }
.workout-tracker-stats { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px; }
.workout-stat { display:grid;gap:4px;padding:13px;border:1px solid var(--line);border-radius:15px;background:#ffffff08;text-align:center; }
.workout-stat b { font-size:24px;color:#d797e8; }
.workout-stat span { color:var(--muted);font-size:12px; }
.workout-log-form { display:grid;grid-template-columns:1fr 1fr;gap:13px;padding:16px;border:1px solid var(--line);border-radius:17px;background:#ffffff05; }
.workout-weight-field,.workout-save-button { grid-column:1/-1; }
.workout-weight-field>span:first-child { display:flex;justify-content:space-between;align-items:center;color:var(--text);font-weight:750; }
.workout-weight-field input[type=range] { width:100%;accent-color:#a351c2;padding:0; }
.workout-range-labels { display:flex;justify-content:space-between;color:var(--muted); }
.workout-reps-fields { display:grid;grid-template-columns:1fr 1fr;gap:10px; }
.workout-save-button { justify-self:start; }
.workout-history-section { display:grid;gap:12px; }
.workout-history-section .section-head { margin:0; }
.workout-progress-picker { display:grid;gap:5px;min-width:min(190px,45%);color:var(--muted);font-size:12px; }
.workout-progress-picker select { min-height:40px;padding:8px 30px 8px 10px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--text); }
.workout-progress-summary { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px; }
.workout-progress-summary>div { display:grid;gap:5px;padding:12px 8px;border:1px solid var(--line);border-radius:14px;background:#ffffff05;text-align:center; }
.workout-progress-summary b { color:#d797e8;font-size:20px; }
.workout-progress-summary span { color:var(--muted);font-size:11px; }
.workout-progress-chart { display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;min-height:190px;padding:14px 10px 8px;border:1px solid var(--line);border-radius:15px;background:#ffffff05; }
.workout-progress-day { display:grid;grid-template-rows:24px 1fr 24px;justify-items:center;gap:5px;min-width:0; }
.workout-progress-value { color:var(--muted);font-size:10px;white-space:nowrap; }
.workout-progress-track { display:flex;align-items:end;justify-content:center;width:min(34px,75%);height:100%;overflow:hidden;border-radius:10px;background:#ffffff08; }
.workout-progress-track i { width:100%;min-height:5px;border-radius:10px;background:linear-gradient(180deg,#c275d8,#7659c4); }
.workout-progress-day small { align-self:end;color:var(--muted);font-size:10px;white-space:nowrap; }
.workout-week-chart { display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;min-height:115px;padding:14px 10px 8px;border:1px solid var(--line);border-radius:15px;background:#ffffff05; }
.workout-day-column { display:grid;grid-template-rows:18px 1fr 20px;justify-items:center;gap:5px;min-width:0; }
.workout-day-count { color:var(--muted);font-size:11px; }
.workout-day-track { display:flex;align-items:end;justify-content:center;width:min(25px,70%);height:100%;overflow:hidden;border-radius:10px;background:#ffffff08; }
.workout-day-track i { width:100%;min-height:0;border-radius:10px;background:linear-gradient(180deg,#c275d8,#7659c4); }
.workout-day-column small { color:var(--muted);font-size:10px;white-space:nowrap; }
.workout-history-list { display:grid;gap:8px; }
.workout-history-row { display:flex;align-items:center;gap:11px;padding:11px 12px;border:1px solid var(--line);border-radius:14px;background:#ffffff05; }
.workout-history-icon { display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border-radius:12px;background:#a653c21c;font-size:18px; }
.workout-history-main { display:grid;gap:3px;flex:1;min-width:0; }
.workout-history-main b { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);font-size:13px; }
.workout-history-main small,.workout-history-result small { color:var(--muted);font-size:11px; }
.workout-history-result { display:grid;gap:3px;text-align:left;white-space:nowrap; }
.workout-history-result b { color:#d797e8;font-size:13px; }
body.theme-light .workout-stat,body.theme-light .workout-log-form,body.theme-light .workout-week-chart,body.theme-light .workout-progress-chart,body.theme-light .workout-progress-summary>div,body.theme-light .workout-history-row { background:linear-gradient(140deg,#fff,#faf9fe);border-color:#e5e1ef; }
body.theme-light .workout-stat b,body.theme-light .workout-history-result b,body.theme-light .workout-progress-summary b { color:#7354b1; }
body.theme-light .workout-day-track { background:#ebe7f5; }
body.theme-light .workout-progress-track { background:#ebe7f5; }
@media(max-width:480px) {
  .workout-tracker-stats { gap:6px; }
  .workout-stat { padding:10px 5px; }
  .workout-stat b { font-size:20px; }
  .workout-stat span { font-size:10px; }
  .workout-progress-picker { min-width:120px; }
  .workout-progress-summary { gap:5px; }
  .workout-progress-summary>div { padding:9px 4px; }
  .workout-progress-summary b { font-size:15px; }
  .workout-progress-summary span { font-size:9px; }
  .workout-progress-chart { min-height:165px;gap:4px;padding-inline:5px; }
  .workout-progress-value,.workout-progress-day small { font-size:8px; }
  .workout-log-form { grid-template-columns:1fr; }
  .workout-weight-field,.workout-save-button { grid-column:auto; }
  .workout-save-button { width:100%; }
}
@media (min-width:651px) {
  html[data-account-role="staff"] .side { position:static; height:auto; min-height:100%; overflow:visible; align-self:stretch; }
  html[data-account-role="staff"] .side .nav { overflow:visible; }
  html[data-account-role="staff"] .side .side-bottom { margin-top:24px; }
}
@media (max-width:650px) {
  html[data-account-role="staff"] .main { padding-bottom:24px; }
}

html[data-account-role="staff"] .top-brand-group>.header-brand { display:none!important; }
html[data-account-role="staff"] .top-actions>#themeToggle,
html[data-account-role="staff"] .top-actions>.home-btn,
html[data-account-role="staff"] .top-actions>[data-goto="chat"] { display:inline-grid!important; }
.sidebar-brand { width:100%; justify-content:flex-start; margin:0 0 22px; direction:ltr; }
.sidebar-brand .header-brand-logo { flex:0 0 52px; width:52px; height:52px; border-radius:18px; }
.sidebar-brand .header-brand-name { font-size:18px; }
@media(max-width:650px){ html[data-account-role="staff"] .sidebar-brand { display:flex!important; } }

.coach-admin-menu-button { display:block; }
.coach-admin-menu-button[hidden] { display:none!important; }
#adminRosterModal .admin-roster-panel { display:grid; gap:12px; }
#adminRosterModal #adminPanel { display:block; width:100%; margin:0; grid-row:auto; grid-column:1/-1; }
html[data-account-role="staff"] .top-brand-group>.header-brand { display:inline-flex!important; }
html[data-account-role="staff"] #sidebar>.sidebar-brand { display:none!important; }
html[data-account-role="staff"] .side .nav { align-content:start; }
@media (min-width:651px) {
  html[data-account-role="staff"] .side { position:sticky; top:16px; height:max-content; min-height:0; max-height:calc(100dvh - 32px); overflow:visible; align-self:start; }
  html[data-account-role="staff"] .side .nav { flex:0 0 auto; overflow:visible; }
  html[data-account-role="staff"] .side .side-bottom { margin-top:20px; }
}
@media (min-width:651px) and (max-width:900px) {
  html[data-account-role="staff"] .shell { display:grid!important; grid-template-columns:210px minmax(0,1fr)!important; align-items:start; }
  html[data-account-role="staff"] .side { width:auto; }
  html[data-account-role="staff"] .main { min-width:0; width:auto; max-width:none; padding:18px 16px 24px; }
}

/* Compact coach pages at the top of the screen instead of vertically centering them. */
html[data-account-role="staff"] .main { margin-block:0;align-self:start; }
html:not([data-account-role="staff"]) #weights { display:none!important; }
.coach-gallery-empty { min-height:220px;display:grid;align-content:center;justify-items:center;gap:5px;border:1px dashed var(--line);border-radius:17px;background:#ffffff04; }
.coach-gallery-empty h3,.coach-gallery-empty p { margin:0; }
.coach-gallery-empty h3 { color:var(--text);font-size:16px; }
.coach-gallery-empty p { max-width:420px;line-height:1.8; }
.upload-box .upload-previews.inside-plan-upload { display:flex; }
.upload-pdf-preview { display:inline-flex;align-items:center;max-width:100%;padding:8px 11px;border:1px solid #b86dca66;border-radius:11px;background:#a746c51a;color:var(--text);font-size:12px;overflow-wrap:anywhere; }
.upload-pdf-preview:hover { border-color:#d789e7; }
.hero-brand-kicker { display:inline-block;margin-bottom:9px;font-family:Cairo,Arial,sans-serif;font-size:clamp(13px,2vw,18px);font-weight:900;letter-spacing:.12em;line-height:1.35;color:#f4d6ff;text-shadow:0 2px 0 #48135d,0 4px 16px #130919a6;-webkit-text-stroke:.35px #fff8; }
#traineeView .grid2 { grid-template-columns:minmax(0,1fr); }
.coach-weights-view { display:grid;gap:14px; }
.coach-weights-view .headrow { margin-top:10px; }
.coach-weights-picker-card { padding:16px 18px; }
.coach-weights-picker-card .field { display:grid;grid-template-columns:auto minmax(220px,360px);align-items:center;gap:14px;margin:0;color:var(--text);font-weight:800; }
.coach-weights-picker-card select { min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface,#171722);color:var(--text); }
.coach-weight-stats { margin:0 0 2px; }
.coach-weight-progress,.coach-weight-history { display:grid;gap:14px; }
.coach-weight-progress h2,.coach-weight-history h2 { margin:0;font-size:18px; }
.chat-send.chat-composer-grid { grid-template-columns:42px 42px minmax(0,1fr) auto;align-items:stretch; }
.chat-send .chat-media-button { display:grid;place-items:center;min-width:42px;width:42px;height:48px;padding:0;border:1px solid var(--line);border-radius:13px;background:#ffffff0a;color:var(--text);font-size:23px;line-height:1; }
.chat-send .chat-media-button:hover,.chat-send .chat-media-button:focus-visible { border-color:#c77bdb;background:#a84ccc25; }
.chat-send .chat-voice-button { font-size:18px; }
.chat-send .chat-voice-button.is-recording { color:#fff;background:#d84263;border-color:#ff8298;box-shadow:0 0 0 3px #e64c6c36; }
.chat-attachment-image-link { display:block;margin-top:7px; }
.chat-attachment-image { display:block;width:min(100%,320px);max-height:300px;object-fit:contain;border:1px solid #ffffff2b;border-radius:12px; }
.chat-attachment-audio { display:block;width:min(300px,70vw);height:42px;margin-top:6px; }
.chatbox .bubble.has-audio { width:min(360px,100%);max-width:100%;min-width:0;padding:9px 10px; }
.chatbox .bubble.has-audio .chat-attachment-audio { width:100%;max-width:100%;min-width:0;height:42px;margin:0; }
body.theme-light .chat-send .chat-media-button { background:#fff;border-color:#dfe4ef;color:#51436f; }
body.theme-light .chat-send .chat-voice-button.is-recording { background:#d84263;color:#fff;border-color:#ff8298; }
body.theme-light .chat-attachment-image { border-color:#dce1ed; }
@media(max-width:650px) {
  .chat-send.chat-composer-grid { grid-template-columns:40px 40px minmax(0,1fr) auto!important;gap:6px; }
  .chat-send .chat-media-button { min-width:40px;width:40px;height:46px; }
  .coach-weights-picker-card .field { grid-template-columns:1fr;gap:7px; }
  .coach-gallery-empty { min-height:180px;padding:22px 14px; }
}
html[data-account-role="trainee"] #weights,
html[data-account-role="trainee"] .nav button[data-view="weights"],
#traineeView.active ~ #weights,
main:has(#traineeView.active) #weights { display:none!important; }
.workout-progress-chart { display:block;min-height:0;padding:10px 8px; }
.workout-progress-svg { display:block;width:100%;height:clamp(200px,32vw,290px);overflow:visible;direction:ltr; }
.weight-chart-grid { stroke:var(--line);stroke-width:1; }
.weight-chart-axis-label,.weight-chart-day-label { fill:var(--muted);font:12px Cairo,Arial,sans-serif; }
.weight-chart-line { fill:none;stroke:#bb70d1;stroke-width:3;stroke-linecap:round;stroke-linejoin:round; }
.weight-chart-dot { fill:#bb70d1;stroke:var(--panel);stroke-width:3; }
.weight-chart-point-label { fill:var(--text);font:700 11px Cairo,Arial,sans-serif; }
.weight-chart-empty-label { fill:var(--muted);font:14px Cairo,Arial,sans-serif; }
.workout-progress-chat { justify-self:start; }
.workout-history-load-error{display:grid;justify-items:start;gap:10px;padding:14px;border:1px solid #bd78d744;border-radius:14px;background:linear-gradient(130deg,#28223888,#38234166)}
body.theme-light .weight-chart-dot { stroke:#fff; }
@media(max-width:650px) { .workout-progress-svg { height:220px; } }
/* Keep the trainee bottom bar centered and readable in both RTL and English. */
@media(max-width:650px){
  html[data-account-role="trainee"] .app-bottom-nav{
    inset-inline:10px;
    inset-block-end:calc(env(safe-area-inset-bottom, 0px) + 8px);
    transform:none;
    width:min(520px,calc(100% - 20px));
    margin-inline:auto;
    display:grid;
    grid-template-columns:repeat(7,minmax(0,1fr));
    align-items:stretch;
    gap:4px;
    padding:6px;
    border-radius:20px;
  }
  html[data-account-role="trainee"] .app-bottom-nav button{
    min-width:0;
    min-height:58px;
    padding:6px 2px;
    gap:4px;
    font-size:clamp(9px,2.5vw,10px);
    line-height:1.15;
    white-space:normal;
    overflow-wrap:normal;
    text-wrap:balance;
    border-radius:15px;
    transform:none;
  }
  html[data-account-role="trainee"] .app-bottom-nav button span{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    max-width:100%;
    overflow:hidden;
  }
  html[data-account-role="trainee"] .app-bottom-nav button svg{
    flex:none;
    width:21px;
    height:21px;
  }
  html[data-account-role="trainee"] .app-bottom-nav #bottomTheme{padding-top:25px}
  html[data-account-role="trainee"] .app-bottom-nav #bottomTheme svg{position:absolute;top:6px}
  html[data-account-role="trainee"] .app-bottom-nav #bottomHome{flex:0 0 40px;width:40px;min-width:0;min-height:40px;margin:auto;aspect-ratio:1}
  html[data-account-role="trainee"] .main{padding-bottom:calc(112px + env(safe-area-inset-bottom))}
}
@media(max-width:380px){html[data-account-role="trainee"] .app-bottom-nav button{font-size:8px}html[data-account-role="trainee"] .app-bottom-nav button svg{width:18px;height:18px}html[data-account-role="trainee"] .app-bottom-nav #bottomHome{width:36px;min-height:36px}}

/* Dashboard "latest messages": the rows are <button>s, so reset the browser's grey button look
   and style them like the conversation list. */
#chatPreview .chatline{display:flex;align-items:center;gap:10px;width:100%;margin:0 0 8px;padding:10px 12px;border:1px solid #ffffff14;border-radius:14px;background:#ffffff06;color:var(--text);font:inherit;text-align:start;cursor:pointer;-webkit-appearance:none;appearance:none}
#chatPreview .chatline:last-child{margin-bottom:0}
#chatPreview .chatline:hover{border-color:#aa6dc4;background:#a14fbd1c}
#chatPreview .chatline .chattext{flex:1;min-width:0}
#chatPreview .chatline .chattext b{display:block;font-size:14px}
#chatPreview .chatline .chattext small{display:block;color:var(--muted);font-size:12px}
body.theme-light #chatPreview .chatline{color:#273149;background:linear-gradient(130deg,#fff,#f8f9fd);border-color:#e2e6f0}
body.theme-light #chatPreview .chatline:hover{background:linear-gradient(110deg,#f0edff,#f9f6ff);border-color:#b9afea}