:root {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #24252d;
  background: #f7f8fa;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --ink: #24252d;
  --muted: #898b96;
  --line: #ececf0;
  --purple: #7658d6;
  --purple-dark: #6546c4;
  --sidebar-width: 248px;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; }
.sidebar { width: var(--sidebar-width); background: #fff; border-right: 1px solid #efeff2; position: fixed; inset: 0 auto 0 0; display: flex; flex-direction: column; padding: 27px 15px 17px; z-index: 4; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #24252d; font: 800 24px Manrope, sans-serif; letter-spacing: -1.3px; padding: 0 11px 29px; }
.brand-mark { width: 25px; height: 25px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; transform: rotate(-8deg); }
.brand-mark span { display: block; border-radius: 4px; background: #7658d6; }
.brand-mark span:nth-child(2) { background: #ad97f2; border-radius: 4px 8px 4px 4px; }
.brand-mark span:nth-child(3) { background: #d3c8fa; }
.workspace-label, .nav-label { color: #a4a5ae; font-size: 9px; font-weight: 700; letter-spacing: 1.05px; padding: 0 12px 9px; }
.workspace-picker { display: flex; align-items: center; width: 100%; gap: 10px; border: 1px solid #eeeeF1; border-radius: 9px; background: #fff; padding: 10px; text-align: left; margin-bottom: 32px; }
.workspace-avatar { width: 31px; height: 31px; border-radius: 9px; background: #f3edff; color: #795bd7; display: grid; place-items: center; font-weight: 700; }
.workspace-copy, .profile-copy { display: grid; gap: 2px; min-width: 0; flex: 1; }
.workspace-copy strong, .profile-copy strong { font-size: 11px; font-weight: 600; }
.workspace-copy small, .profile-copy small { color: #9697a1; font-size: 10px; }
.chevron { color: #999aa4; font-size: 17px; }
.nav-label { padding-bottom: 8px; }
.main-nav { display: grid; gap: 4px; margin-bottom: 26px; }
.nav-item { width: 100%; height: 39px; display: flex; gap: 13px; align-items: center; border: 0; border-radius: 7px; color: #6e707b; background: transparent; padding: 0 12px; text-align: left; font-size: 12px; position: relative; }
.nav-item:hover { background: #f8f7fb; color: #4b3b82; }
.nav-item.active { background: #f2effb; color: #6c4dc6; font-weight: 600; }
.nav-icon { width: 17px; text-align: center; font-size: 16px; }
.nav-count { margin-left: auto; font-size: 10px; background: #ece8f8; padding: 2px 6px; border-radius: 8px; }
.unread-dot { width: 6px; height: 6px; background: #e97878; border-radius: 50%; margin-left: auto; }
.tools-label { margin-top: 1px; }
.sidebar-bottom { margin-top: auto; }
.help-card { border-radius: 10px; background: #faf8fe; padding: 13px 13px 14px; margin: 0 2px 15px; }
.help-icon { width: 23px; height: 23px; display: grid; place-items: center; color: #7658d6; background: #eee8ff; border-radius: 7px; margin-bottom: 10px; }
.help-card strong { font-size: 11px; }
.help-card p { color: #888995; font-size: 10px; line-height: 1.5; margin: 5px 0 10px; }
.help-link { border: 0; background: transparent; padding: 0; color: #7354d1; font-size: 10px; font-weight: 600; }
.help-link span { font-size: 13px; margin-left: 3px; }
.profile-button { width: 100%; background: #fff; border: 0; border-top: 1px solid #f0f0f3; display: flex; align-items: center; gap: 10px; padding: 14px 5px 2px; text-align: left; }
.profile-avatar, .top-avatar { width: 31px; height: 31px; background: #dce9e7; color: #3e665e; display: grid; place-items: center; border-radius: 50%; font-size: 10px; font-weight: 700; flex-shrink: 0; }
.more { color: #9798a1; letter-spacing: 1px; font-size: 12px; }
.main-area { margin-left: var(--sidebar-width); min-height: 100vh; }
.topbar { height: 62px; display: flex; align-items: center; justify-content: space-between; padding: 0 42px; border-bottom: 1px solid #ededf0; background: rgba(255,255,255,.82); }
.breadcrumbs { display: flex; gap: 11px; align-items: center; color: #93949e; font-size: 11px; }
.breadcrumbs strong { color: #44454e; font-weight: 600; }
.crumb-slash { color: #d0d0d6; }
.top-actions { display: flex; align-items: center; gap: 17px; }
.sync-status { color: #8d8e98; font-size: 10px; }
.sync-dot, .live-pill span { display: inline-block; width: 6px; height: 6px; background: #55b991; border-radius: 50%; margin-right: 5px; }
.icon-button { border: 0; background: transparent; color: #737580; font-size: 18px; position: relative; padding: 4px; }
.notification-dot { width: 5px; height: 5px; border-radius: 50%; background: #eb817c; position: absolute; top: 3px; right: 3px; }
.top-avatar { border: 0; width: 29px; height: 29px; }
.content { max-width: 1370px; padding: 32px 42px 15px; margin: 0 auto; }
.page-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 25px; }
.eyebrow { color: #9c9da7; font-size: 9px; font-weight: 700; letter-spacing: 1px; margin: 0 0 8px; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 7px; font: 700 24px Manrope, sans-serif; letter-spacing: -.75px; }
.wave { color: #edb861; font-size: 18px; }
.page-subtitle { color: #8e909a; font-size: 12px; margin-bottom: 0; }
.primary-button { background: var(--purple); border: 1px solid var(--purple); color: #fff; border-radius: 7px; height: 36px; padding: 0 14px; font-size: 11px; font-weight: 600; box-shadow: 0 2px 5px #7658d61c; }
.primary-button:hover, .add-shift-button:hover { background: var(--purple-dark); }
.primary-button span { font-size: 14px; margin-right: 5px; }
.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-bottom: 29px; }
.summary-card { background: #fff; border: 1px solid #ededef; border-radius: 9px; padding: 14px 16px 13px; min-height: 108px; }
.summary-top { display: flex; align-items: center; justify-content: space-between; color: #777984; font-size: 10px; }
.summary-icon { width: 25px; height: 25px; border-radius: 7px; display: grid; place-items: center; font-size: 13px; }
.purple { color: #785ad3; background: #f0ebff; }.peach { color: #d58a53; background: #fff0e4; }.green { color: #49a27e; background: #e6f5ee; }.blue { color: #548dcc; background: #eaf3ff; }
.summary-value { color: #292a33; font: 700 23px Manrope, sans-serif; letter-spacing: -.5px; margin: 7px 0 5px; }
.value-unit { font-size: 15px; }
.summary-foot { color: #9b9ca5; font-size: 9px; }
.trend { font-weight: 600; margin-right: 3px; }.trend.up { color: #49a67f; }.trend.neutral { color: #777984; }
.section-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; gap: 14px; }
.section-title { display: flex; align-items: center; gap: 10px; }
h2 { color: #30313a; font: 700 14px Manrope, sans-serif; letter-spacing: -.2px; margin-bottom: 0; }
.live-pill { color: #53a27e; background: #eaf7f0; border-radius: 12px; padding: 4px 8px; font-size: 9px; font-weight: 600; }.live-pill span { width: 5px; height: 5px; }
.schedule-actions { display: flex; align-items: center; gap: 5px; }
.date-nav, .week-button, .today-button, .filter-button { height: 30px; border: 1px solid #e8e8ec; background: #fff; color: #686a74; border-radius: 6px; font-size: 10px; }
.date-nav { width: 27px; padding: 0; font-size: 17px; color: #8a8b94; }
.week-button { min-width: 155px; padding: 0 9px; text-align: left; }.week-button span { float: right; color: #a6a7af; }
.today-button { padding: 0 10px; }
.toolbar-divider { width: 1px; height: 19px; background: #e9e9ed; margin: 0 5px; }
.filter-button { padding: 0 9px; }.filter-button span:first-child { margin-right: 4px; font-size: 13px; }
.filter-badge { display: none; width: 5px; height: 5px; background: #785ad3; border-radius: 50%; margin-left: 4px; vertical-align: 1px; }.filter-badge.visible { display: inline-block; }
.add-shift-button { height: 30px; padding: 0 11px; border: 1px solid var(--purple); background: var(--purple); color: #fff; border-radius: 6px; font-size: 10px; font-weight: 600; margin-left: 3px; }
.add-shift-button span { font-size: 15px; vertical-align: -1px; }
.schedule-card, .panel { background: #fff; border: 1px solid #ededef; border-radius: 9px; overflow: hidden; }
.schedule-scroll { overflow-x: auto; }
.schedule-grid { min-width: 790px; display: grid; grid-template-columns: 145px repeat(7, minmax(84px, 1fr)); }
.grid-cell { min-width: 0; border-right: 1px solid #f0f0f2; border-bottom: 1px solid #f0f0f2; }
.grid-cell:nth-child(8n) { border-right: 0; }
.grid-head { min-height: 49px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3px; color: #8c8e98; font-size: 9px; }
.grid-head:first-child { align-items: flex-start; padding-left: 14px; color: #777984; font-weight: 600; }
.grid-head strong { color: #50515a; font-size: 11px; font-weight: 600; }
.grid-head.today strong { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #7658d6; color: #fff; }
.employee-cell { padding: 0 9px; display: flex; gap: 8px; align-items: center; min-height: 67px; }
.employee-avatar { width: 27px; height: 27px; display: grid; place-items: center; flex-shrink: 0; border-radius: 50%; font-size: 9px; font-weight: 700; color: #6c6179; background: #f2e9dc; }
.employee-avatar.tone-1 { background: #dfece7; color: #50756b; }.employee-avatar.tone-2 { background: #e8e3f5; color: #71608f; }.employee-avatar.tone-3 { background: #f5e4e6; color: #a3656b; }.employee-avatar.tone-4 { background: #e4ecf7; color: #5b7395; }
.employee-copy { min-width: 0; display: grid; gap: 4px; }.employee-copy strong { color: #43444d; font-size: 9px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.employee-copy small { color: #a2a3ac; font-size: 8px; }
.shift-cell { min-height: 67px; padding: 6px 4px; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.shift-chip { border-radius: 5px; padding: 5px 5px 5px 7px; min-height: 34px; font-size: 8px; line-height: 1.45; position: relative; cursor: grab; border-left: 2px solid; user-select: none; transition: transform .12s, box-shadow .12s; }
.shift-chip:hover { transform: translateY(-1px); box-shadow: 0 3px 8px #22222212; }.shift-chip:active { cursor: grabbing; }.shift-chip.dragging { opacity: .4; }
.shift-chip.morning { color: #66518d; background: #f3effc; border-color: #9c83df; }.shift-chip.afternoon { color: #9a6d40; background: #fff5e9; border-color: #edb764; }.shift-chip.evening { color: #507f73; background: #eaf6f0; border-color: #7bc2a5; }
.shift-chip strong { display: block; font-size: 8px; font-weight: 600; }.shift-chip span { display: block; color: inherit; opacity: .78; font-size: 7px; }
.empty-cell { min-height: 67px; border: 0; background: transparent; }
.schedule-footer { min-height: 38px; display: flex; align-items: center; gap: 16px; padding: 0 13px; color: #888a94; font-size: 9px; }
.legend { display: flex; align-items: center; gap: 5px; }.legend-dot { width: 7px; height: 7px; border-radius: 50%; }.legend-dot.morning { background: #9c83df; }.legend-dot.afternoon { background: #edb764; }.legend-dot.evening { background: #7bc2a5; }.drag-hint { margin-left: auto; color: #aaaab2; }
.bottom-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 14px; margin-top: 19px; }
.panel { padding: 15px 16px 6px; }.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 8px; }.panel-heading h2 { margin-bottom: 4px; }.panel-heading p { color: #999aa4; font-size: 9px; margin-bottom: 0; }
.text-button { color: #7153cf; background: transparent; border: 0; font-size: 9px; padding: 3px 0; font-weight: 600; }.text-button span { font-size: 13px; margin-left: 3px; }
.task-row { display: flex; align-items: center; gap: 10px; min-height: 42px; border-top: 1px solid #f1f1f3; }
.task-check { width: 15px; height: 15px; border: 1.3px solid #d5d5dc; border-radius: 4px; background: #fff; flex-shrink: 0; display: grid; place-items: center; color: #fff; font-size: 10px; padding: 0; }
.task-check.done { background: #6eaf8c; border-color: #6eaf8c; }.task-copy { min-width: 0; flex: 1; }.task-copy strong { display: block; color: #4d4e57; font-size: 9px; font-weight: 500; }.task-copy small { display: block; color: #a1a2ab; font-size: 8px; margin-top: 3px; }.task-row.completed .task-copy strong { color: #a4a5ad; text-decoration: line-through; }
.task-due { color: #d58b57; background: #fff4e9; padding: 4px 6px; border-radius: 5px; font-size: 8px; white-space: nowrap; }.task-due.normal { color: #92939d; background: #f4f4f6; }
.activity-list { display: grid; }
.activity-row { position: relative; display: flex; align-items: flex-start; gap: 9px; min-height: 44px; padding: 8px 0; border-top: 1px solid #f1f1f3; }
.activity-avatar { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; font-size: 8px; font-weight: 700; color: #56796c; background: #e1eee8; flex-shrink: 0; }.activity-avatar.purple-tone { color: #75659b; background: #eee9f8; }.activity-avatar.orange-tone { color: #9d7250; background: #f8ebdd; }
.activity-copy { color: #777983; font-size: 8px; line-height: 1.5; }.activity-copy strong { color: #4e5059; font-weight: 600; }.activity-copy small { display: block; color: #a5a6ae; font-size: 8px; margin-top: 2px; }
.page-footer { display: flex; justify-content: space-between; align-items: center; color: #a3a4ad; font-size: 8px; padding: 20px 2px 5px; }.footer-heart { color: #dc8886; }
.toast-region { position: fixed; bottom: 20px; right: 22px; z-index: 10; display: grid; gap: 8px; }.toast { background: #292832; color: white; padding: 11px 15px; border-radius: 8px; font-size: 11px; box-shadow: 0 8px 28px #24232d30; animation: toast-in .18s ease-out; }.toast.success::before { content: '✓'; color: #8ee0b6; margin-right: 8px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.shift-dialog { border: 0; border-radius: 13px; padding: 23px; width: min(440px, calc(100vw - 28px)); box-shadow: 0 20px 70px #29253230; color: var(--ink); }.shift-dialog::backdrop { background: #24232e66; backdrop-filter: blur(2px); }.dialog-heading { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }.dialog-heading h2 { font-size: 19px; }.dialog-close { border: 0; background: transparent; color: #888995; font-size: 24px; line-height: 1; }.shift-dialog label { display: grid; gap: 7px; color: #666873; font-size: 10px; margin-bottom: 14px; }.shift-dialog input, .shift-dialog select { height: 36px; border: 1px solid #e6e5eb; border-radius: 6px; background: #fff; padding: 0 10px; color: #44454e; font-size: 11px; outline: none; }.shift-dialog input:focus, .shift-dialog select:focus { border-color: #9b86dc; box-shadow: 0 0 0 3px #7658d61a; }.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 21px; }.secondary-button { height: 36px; border: 1px solid #e5e5e9; background: #fff; color: #666873; border-radius: 7px; padding: 0 13px; font-size: 11px; }
.alternate-view { min-height: 270px; margin-bottom: 20px; }
.alternate-panel { padding: 18px; }
.alternate-task-list { margin-top: 12px; }
.alternate-task-list .task-row { min-height: 56px; }
.team-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.team-card { min-height: 105px; padding: 16px; display: grid; grid-template-columns: 35px 1fr auto; align-items: center; gap: 0 11px; }
.team-card .employee-avatar { width: 35px; height: 35px; font-size: 10px; }
.team-person h2 { font-size: 11px; margin: 0 0 4px; }.team-person p { margin: 0; font-size: 9px; color: #9798a1; }
.team-stats { grid-column: 2; display: flex; gap: 12px; color: #999aa4; font-size: 8px; margin-top: 8px; }.team-stats strong { color: #555660; font-weight: 600; }
.team-status { grid-column: 3; grid-row: 1 / span 2; align-self: center; color: #52a17d; background: #edf7f1; padding: 5px 7px; border-radius: 10px; font-size: 8px; white-space: nowrap; }.team-status i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #55b991; margin-right: 4px; }
.report-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.report-card { min-height: 130px; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.report-card > strong { font: 700 25px Manrope, sans-serif; color: #30313a; }.report-card > span:not(.summary-icon) { font-size: 10px; color: #62646e; }.report-card small { font-size: 8px; color: #999aa4; }
.report-note { grid-column: 1 / -1; padding: 17px; }.report-note p { max-width: 470px; color: #858691; font-size: 10px; line-height: 1.6; margin: 8px 0 12px; }
.messages-panel { max-width: 800px; min-height: 350px; padding: 17px; }
.message-list { display: grid; gap: 2px; padding: 10px 0; }.message-row { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid #f1f1f3; }.message-row > div { min-width: 0; }.message-row strong { color: #50515a; font-size: 9px; }.message-row p { margin: 4px 0; color: #777984; font-size: 10px; line-height: 1.5; }.message-row small { color: #a0a1aa; font-size: 8px; }
.message-form { border-top: 1px solid #f0f0f3; padding-top: 13px; display: flex; gap: 8px; }.message-form input { flex: 1; min-width: 0; height: 36px; border: 1px solid #e7e7eb; border-radius: 6px; padding: 0 10px; outline: none; font-size: 10px; }.message-form input:focus { border-color: #9b86dc; }.message-form .primary-button { height: 36px; }.message-form .primary-button span { margin: 0 0 0 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.nav-item[hidden], [hidden] { display: none !important; }
.staff-change-card { display: flex; align-items: center; gap: 12px; padding: 13px 15px; margin-top: 12px; border: 1px solid #ede9f7; border-radius: 9px; background: #fcfbff; }
.change-icon { width: 29px; height: 29px; border-radius: 8px; display: grid; place-items: center; color: #7658d6; background: #eee9fb; flex-shrink: 0; }
.change-copy { display: grid; gap: 5px; flex: 1; min-width: 0; }.change-copy strong { color: #454650; font-size: 10px; }.change-copy span { color: #898a95; font-size: 9px; }.change-copy b { padding: 0 4px; color: #b0a7c8; }
.change-actions { display: flex; gap: 6px; align-items: center; }.change-actions .secondary-button, .change-actions .primary-button { height: 30px; padding: 0 9px; font-size: 9px; }.change-status { color: #52a17d; font-size: 9px; padding: 5px 8px; background: #edf7f1; border-radius: 12px; }
.mobile-nav { display: none; }
@media (min-width: 1500px) { .content { padding-top: 40px; }.summary-card { min-height: 116px; }.schedule-grid { grid-template-columns: 165px repeat(7, minmax(90px, 1fr)); }.shift-chip { padding: 6px 7px; } }
@media (max-width: 1120px) { :root { --sidebar-width: 215px; }.topbar { padding: 0 27px; }.content { padding: 27px 27px 15px; }.schedule-grid { grid-template-columns: 130px repeat(7, minmax(76px, 1fr)); }.schedule-actions { gap: 4px; }.week-button { min-width: 135px; }.filter-button { padding: 0 7px; }.bottom-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 850px) { :root { --sidebar-width: 68px; }.sidebar { padding: 20px 10px 12px; align-items: center; }.brand { padding: 0 0 34px; }.brand > span:last-child, .workspace-label, .workspace-copy, .workspace-picker .chevron, .nav-label, .nav-item:not(.active) .nav-count, .nav-item:not(.active) .unread-dot, .help-card, .profile-copy, .more { display: none; }.workspace-picker { justify-content: center; padding: 7px; margin-bottom: 24px; border: 0; }.main-nav { width: 100%; }.nav-item { justify-content: center; padding: 0; font-size: 0; }.nav-icon { font-size: 17px; }.nav-item.active::after { content: ''; position: absolute; right: -10px; width: 3px; height: 22px; border-radius: 3px 0 0 3px; background: #7658d6; }.profile-button { justify-content: center; padding: 13px 0 2px; }.topbar { padding: 0 20px; }.content { padding: 25px 20px 14px; }.summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }.summary-card { min-height: 99px; }.section-toolbar { align-items: flex-start; flex-direction: column; }.schedule-actions { width: 100%; }.bottom-grid { grid-template-columns: 1fr; }.team-grid { grid-template-columns: 1fr; }.page-heading { margin-bottom: 20px; } }
@media (max-width: 560px) { :root { --sidebar-width: 0px; }.sidebar { display: none; }.main-area { margin-left: 0; padding-bottom: 57px; }.topbar { height: 53px; padding: 0 16px; }.sync-status { display: none; }.top-actions { gap: 10px; }.content { padding: 23px 14px 12px; }.page-heading { align-items: flex-start; gap: 10px; }.page-heading h1 { font-size: 20px; }.page-heading .primary-button { font-size: 0; width: 36px; flex-shrink: 0; padding: 0; }.page-heading .primary-button span { font-size: 16px; margin: 0; }.eyebrow { font-size: 8px; }.page-subtitle { font-size: 10px; line-height: 1.5; }.summary-grid { gap: 8px; margin-bottom: 23px; }.summary-card { padding: 11px; min-height: 92px; }.summary-top { font-size: 9px; }.summary-icon { width: 22px; height: 22px; }.summary-value { font-size: 20px; }.summary-foot { font-size: 8px; }.schedule-actions { display: grid; grid-template-columns: 27px 1fr 27px auto; row-gap: 8px; }.date-nav:nth-of-type(3) { grid-column: 3; }.week-button { min-width: auto; }.today-button { grid-column: 4; }.toolbar-divider { display: none; }.filter-button { grid-column: 1 / 3; }.add-shift-button { grid-column: 3 / 5; margin: 0; }.schedule-grid { grid-template-columns: 112px repeat(7, 76px); }.schedule-footer { padding: 0 10px; gap: 10px; }.drag-hint { display: none; }.panel { padding: 13px 12px 5px; }.page-footer { gap: 12px; font-size: 7px; }.page-footer span:nth-child(2) { display: none; }.team-card { padding: 13px 11px; }.team-status { padding: 5px; font-size: 7px; }.report-grid { grid-template-columns: 1fr 1fr; gap: 8px; }.report-card { min-height: 116px; padding: 11px; }.report-card > strong { font-size: 21px; }.report-card > span:not(.summary-icon) { font-size: 9px; }.report-note { grid-column: 1 / -1; }.messages-panel { padding: 13px 11px 8px; }.message-form .primary-button { padding: 0 9px; }.staff-change-card { align-items: flex-start; flex-wrap: wrap; }.change-copy { flex-basis: calc(100% - 44px); }.change-actions { width: 100%; justify-content: flex-end; }.change-actions .secondary-button, .change-actions .primary-button { padding: 0 7px; font-size: 8px; }.mobile-nav { position: fixed; z-index: 5; display: flex; inset: auto 0 0; height: 57px; justify-content: space-around; background: #fff; border-top: 1px solid #ededf0; padding-bottom: env(safe-area-inset-bottom); }.mobile-nav button { border: 0; background: transparent; color: #858691; display: grid; place-items: center; gap: 1px; font-size: 8px; padding: 5px 10px; }.mobile-nav button span { font-size: 17px; }.mobile-nav button.active { color: #7658d6; font-weight: 600; } }