.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; padding: 5px 10px; margin-bottom: 10px; border-radius: 20px; color: #f1d7f6; background: #a744bf24; font-weight: 700; }
.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; }
.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}