:root {
  --ink: #182126; --ink-soft: #657178; --muted: #8e999e; --line: #e6e8e6; --paper: #f8f8f6; --card: #ffffff;
  --navy: #10191e; --navy-2: #1d2a2f; --teal: #2d8889; --teal-light: #e1f2ef; --gold: #bf7b3f; --gold-light: #fbefdf;
  --purple: #77649d; --purple-light: #eeeaf7; --red: #bd6258; --red-light: #fae9e7; --blue: #4c77a1; --blue-light: #e8f0f7;
  --shadow: 0 12px 34px rgba(25, 35, 40, .06); --shadow-lg: 0 24px 70px rgba(25, 35, 40, .14);
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 14px/1.45 'DM Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; border: 0; }
a { color: inherit; text-decoration: none; }
.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 248px; flex: 0 0 248px; display: flex; flex-direction: column; background: var(--navy); color: #e8efed; padding: 26px 14px 15px; }
.sidebar-top { padding: 0 10px; }
.brand-lockup { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.sidebar .brand-lockup, .brand-lockup.light { color: #fff; }
.brand-mark { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; background: var(--gold); color: #fff; font: 600 12px/1 'DM Mono', monospace; letter-spacing: -1px; }
.brand-lockup strong { display: block; font-size: 13px; line-height: 1; letter-spacing: 2.5px; }
.brand-lockup small { display: block; margin-top: 4px; opacity: .6; font: 9px/1 'DM Mono', monospace; letter-spacing: 2px; }
.location-switcher { display: flex; align-items: center; gap: 9px; width: 100%; padding: 14px 2px 12px; margin-top: 28px; color: #e8efed; background: transparent; border-top: 1px solid rgba(255,255,255,.11); border-bottom: 1px solid rgba(255,255,255,.11); text-align: left; }
.location-pin { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; color: #e9b784; }
.location-switcher b, .location-switcher small { display: block; }
.location-switcher b { font-size: 12px; }
.location-switcher small { margin-top: 1px; color: rgba(255,255,255,.5); font-size: 10px; }
.chevron { margin-left: auto; color: #93a09e; font-size: 16px; }
.main-nav { padding-top: 28px; }
.nav-section-label { display: block; padding: 0 13px 10px; color: #76827f; font: 10px 'DM Mono', monospace; letter-spacing: 1.2px; }
.nav-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 13px; margin: 3px 0; border-radius: 7px; color: #9ba8a6; background: transparent; text-align: left; font-size: 13px; transition: .18s ease; }
.nav-item:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav-item.active { color: #fff; background: #2b3d40; box-shadow: inset 3px 0 0 var(--gold); }
.nav-glyph { width: 17px; color: #8f9f9b; font-size: 17px; line-height: 1; text-align: center; }
.nav-item.active .nav-glyph { color: #edba82; }
.nav-item em { margin-left: auto; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #bd6e53; color: #fff; font-size: 10px; font-style: normal; }
.sidebar-bottom { margin-top: auto; }
.booking-link, .help-link, .user-chip { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; color: #c7d0cc; background: transparent; text-align: left; border-radius: 7px; }
.booking-link { margin-bottom: 5px; border: 1px solid rgba(255,255,255,.12); }
.booking-link > span:first-child { color: #e9b784; font-size: 17px; }
.booking-link b, .booking-link small, .help-link b, .help-link small, .user-chip b, .user-chip small { display: block; }
.booking-link b, .help-link b, .user-chip b { font-size: 11px; font-weight: 600; }
.booking-link small, .help-link small, .user-chip small { margin-top: 2px; color: #84908d; font-size: 10px; }
.help-link { margin-top: 8px; }
.help-dot { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid #778580; border-radius: 50%; color: #bac3c0; }
.user-chip { padding: 12px 4px 0; margin-top: 13px; border-top: 1px solid rgba(255,255,255,.11); border-radius: 0; }
.user-chip .more { margin-left: auto; color: #91a09a; letter-spacing: 2px; }
.avatar { display: inline-grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; background: var(--avatar, #b76f45); color: #fff; font: 600 10px 'DM Mono', monospace; }
.avatar-user { background: #b87745; }
.avatar-muted { background: #e1e9e6; color: #60716d; }
.avatar-xl { width: 60px; height: 60px; flex-basis: 60px; font-size: 17px; }
.avatar-lg { width: 48px; height: 48px; flex-basis: 48px; font-size: 14px; }
.main-content { min-width: 0; flex: 1; background: var(--paper); }
.topbar { display: flex; justify-content: space-between; align-items: center; padding: 27px 44px 19px; background: var(--paper); }
.crumb { margin: 0 0 4px; color: #8d9898; font-size: 11px; }
.crumb span { margin: 0 5px; color: #bdc3c1; }
.topbar h1 { margin: 0; font: 700 28px/1.15 'Playfair Display', serif; letter-spacing: -.6px; }
.top-actions { display: flex; align-items: center; gap: 18px; }
.icon-button, .top-user { background: transparent; color: var(--ink); }
.notification-button { position: relative; font-size: 23px; color: #516067; }
.notification-button span { position: absolute; width: 6px; height: 6px; top: 1px; right: 1px; border: 1px solid var(--paper); border-radius: 50%; background: var(--gold); }
.top-user { display: flex; align-items: center; gap: 8px; padding: 2px 0 2px 10px; border-left: 1px solid var(--line); text-align: left; }
.top-user b, .top-user small { display: block; }
.top-user b { font-size: 11px; }
.top-user small { margin-top: 1px; color: var(--muted); font-size: 10px; }
.content-wrap { padding: 0 44px 52px; max-width: 1600px; }
.page-header { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 17px 0 26px; }
.eyebrow { margin: 0 0 8px; color: #a36d43; font: 500 10px 'DM Mono', monospace; letter-spacing: 1.2px; }
.page-header h2 { margin: 0; font: 700 25px/1.15 'Playfair Display', serif; letter-spacing: -.3px; }
.page-subtitle { margin: 7px 0 0; color: var(--ink-soft); font-size: 13px; }
.header-actions { display: flex; align-items: center; gap: 9px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 0 16px; border: 1px solid transparent; border-radius: 6px; font-size: 12px; font-weight: 600; transition: .17s ease; }
.btn.primary { color: #fff; background: var(--navy-2); box-shadow: 0 4px 10px rgba(16,25,30,.12); }
.btn.primary:hover { background: #293e43; transform: translateY(-1px); }
.btn.secondary { color: #4f5f62; background: #fff; border-color: #dfe3e1; }
.btn.secondary:hover, .btn.ghost:hover { border-color: #abbab5; background: #f3f6f4; }
.btn.ghost { color: #526266; background: transparent; border-color: #dfe3e1; }
.btn.small { min-height: 32px; padding: 0 12px; font-size: 11px; }
.btn.tiny { min-height: 28px; padding: 0 9px; font-size: 10px; }
.text-button { padding: 0; color: #527c7d; background: transparent; font-size: 11px; font-weight: 600; }
.text-button:hover { color: #1f5b5c; }
.metric-grid { display: grid; grid-template-columns: 1.25fr repeat(3, 1fr); gap: 14px; }
.metric-card, .panel { border: 1px solid var(--line); border-radius: 8px; background: var(--card); box-shadow: var(--shadow); }
.metric-card { position: relative; min-height: 157px; padding: 18px 19px; overflow: hidden; }
.metric-card.featured { color: #fff; border-color: #26383d; background: var(--navy-2); }
.metric-top { display: flex; justify-content: space-between; align-items: center; color: #758183; font-size: 11px; }
.featured .metric-top { color: #d3ddda; }
.metric-icon { display: inline-grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; font: 600 13px 'DM Mono', monospace; }
.metric-icon.gold { color: #a86b3e; background: var(--gold-light); }
.metric-icon.blue { color: #4c77a1; background: var(--blue-light); }
.metric-icon.purple { color: #77649d; background: var(--purple-light); }
.metric-icon.green { color: #367e78; background: var(--teal-light); }
.metric-card > strong { display: block; margin-top: 14px; font-size: 28px; letter-spacing: -.8px; }
.metric-trend { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; color: #3f8b77; font-size: 10px; font-weight: 600; }
.metric-trend span { color: #899391; font-weight: 400; }
.metric-trend.neutral { color: #a36d43; }
.featured .metric-trend { color: #79c3ab; }
.featured .metric-trend span { color: #adbfba; }
.metric-foot { margin: 15px 0 0; color: #86908f; font-size: 10px; }
.metric-foot b { color: #4e5a5a; font-weight: 600; }
.featured .metric-foot { color: #a8b7b3; }
.sparkline { display: flex; align-items: end; gap: 4px; position: absolute; right: 18px; bottom: 20px; width: 83px; height: 35px; opacity: .65; }
.sparkline i { flex: 1; display: block; border-radius: 2px 2px 0 0; background: #d69d6d; }
.dashboard-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; margin-top: 14px; }
.dashboard-grid.lower { grid-template-columns: 1fr 1fr; }
.panel { min-width: 0; padding: 20px; }
.panel-heading { display: flex; justify-content: space-between; align-items: start; gap: 15px; margin-bottom: 17px; }
.panel-heading .eyebrow { margin-bottom: 4px; }
.panel-heading h3, .panel h3 { margin: 0; font-size: 16px; letter-spacing: -.2px; }
.select, .filter-button, .date-button, .square-button { color: #5f6d6d; background: #fff; border: 1px solid #dde3e0; border-radius: 5px; }
.select { height: 32px; padding: 0 10px; font-size: 11px; }
.select.compact { min-width: 102px; }
.chart-summary { display: flex; align-items: center; gap: 10px; margin: -3px 0 18px; }
.chart-summary strong { font-size: 23px; letter-spacing: -.7px; }
.chart-summary small { margin-left: auto; color: #9aa29f; font-size: 10px; }
.bar-chart { display: flex; align-items: end; height: 151px; gap: 15px; padding-top: 17px; border-bottom: 1px solid #eef0ed; }
.bar-col { display: flex; flex: 1; flex-direction: column; align-items: center; height: 100%; gap: 7px; }
.bar-value { visibility: hidden; color: #7f8b89; font: 9px 'DM Mono', monospace; }
.bar-col:hover .bar-value { visibility: visible; }
.bar-track { display: flex; align-items: end; width: 100%; height: 100%; }
.bar-track i { display: block; width: 100%; min-height: 8px; border-radius: 4px 4px 0 0; background: #dbece7; transition: .2s ease; }
.bar-col:last-of-type .bar-track i, .bar-col:hover .bar-track i { background: #b76f45; }
.bar-col small { color: #929b9b; font-size: 10px; }
.activity-list { display: flex; flex-direction: column; }
.activity-row { display: grid; grid-template-columns: 11px 1fr auto; gap: 10px; align-items: start; padding: 10px 0; border-bottom: 1px solid #eff1ef; }
.activity-row:last-child { border-bottom: 0; }
.activity-mark { display: block; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 3px #e5f3ef; }
.activity-mark.gold { background: var(--gold); box-shadow: 0 0 0 3px #fbefdf; }.activity-mark.blue { background: var(--blue); box-shadow: 0 0 0 3px #e8f0f7; }.activity-mark.red { background: var(--red); box-shadow: 0 0 0 3px #fae9e7; }.activity-mark.purple { background: var(--purple); box-shadow: 0 0 0 3px #eeeaf7; }
.activity-row b { display: block; font-size: 11px; }.activity-row p, .activity-row time { color: #8a9694; font-size: 10px; }.activity-row p { margin: 2px 0 0; }.activity-row time { white-space: nowrap; }
.pulse-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.pulse-item { display: flex; align-items: center; gap: 8px; padding: 10px 7px; border-radius: 7px; background: #f7f8f6; }.pulse-ring { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; font-size: 14px; }.pulse-ring.teal { color: #40837d; background: var(--teal-light); }.pulse-ring.purple { color: #77649d; background: var(--purple-light); }.pulse-ring.gold { color: #a86b3e; background: var(--gold-light); }.pulse-ring.blue { color: #4c77a1; background: var(--blue-light); }
.pulse-item b, .pulse-item small { display: block; }.pulse-item b { font-size: 13px; }.pulse-item small { color: #909a98; font-size: 9px; white-space: nowrap; }
.progress-list { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 19px; }.progress-list > div { display: grid; grid-template-columns: 1fr auto; gap: 5px; font-size: 10px; color: #798583; }.progress-list b { color: #465653; }.progress-list i { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: #eaf0ed; overflow: hidden; }.progress-list i em, .staff-performance > i em { display: block; height: 100%; border-radius: 3px; background: #6fa99c; }.purple-fill { background: #806faa !important; }
.barber-list { display: flex; flex-direction: column; gap: 10px; }.barber-row { display: grid; grid-template-columns: 32px 1fr 70px 42px; gap: 9px; align-items: center; }.barber-info b, .barber-info small { display: block; }.barber-info b { font-size: 11px; }.barber-info small { color: #909a98; font-size: 9px; }.mini-progress { height: 4px; border-radius: 3px; background: #edf0ee; overflow: hidden; }.mini-progress i { display: block; height: 100%; border-radius: 3px; background: #b76f45; }.barber-row > strong { text-align: right; font-size: 11px; }
.floor-summary { display: flex; align-items: center; gap: 30px; padding: 13px 17px; margin-bottom: 16px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow); }.floor-summary > div { display: flex; align-items: center; gap: 6px; }.floor-summary > div:first-child { gap: 8px; padding-right: 15px; border-right: 1px solid var(--line); }.floor-summary b { font-size: 13px; }.floor-summary small { color: #8a9694; font-size: 10px; }.floor-filter { margin-left: auto; gap: 4px !important; }.filter-chip { padding: 7px 10px; border-radius: 5px; color: #7b8785; background: transparent; font-size: 10px; }.filter-chip.active { color: var(--ink); background: #edf2ef; font-weight: 600; }.live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #52a68b; box-shadow: 0 0 0 4px #e2f3ed; }
.chair-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }.chair-card { min-height: 286px; padding: 15px; border: 1px solid var(--line); border-top: 3px solid #cfd9d5; border-radius: 8px; background: #fff; box-shadow: var(--shadow); }.chair-card.busy { border-top-color: #b76f45; }.chair-head { display: flex; justify-content: space-between; align-items: start; gap: 8px; }.chair-head > div { display: flex; align-items: center; gap: 8px; }.chair-head b, .chair-head small { display: block; }.chair-head b { font-size: 12px; }.chair-head small { color: #8c9695; font-size: 9px; }.chair-state { font-size: 9px; white-space: nowrap; }.state-busy { color: #a76c40; }.state-free { color: #529081; }.current-guest { padding: 22px 7px 13px; }.guest-label { color: #9aa29f; font: 9px 'DM Mono', monospace; letter-spacing: .8px; }.current-guest h3 { margin: 5px 0 2px; font: 600 21px 'Playfair Display', serif; }.current-guest p { margin: 0; color: #73807f; font-size: 10px; }.guest-actions { display: flex; gap: 6px; margin-top: 16px; }.available-chair { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 163px; text-align: center; }.chair-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 9px; border-radius: 50%; color: #508d83; background: #e8f4f0; font-size: 20px; }.available-chair b { font-size: 13px; }.available-chair p { margin: 3px 0 5px; color: #899492; font-size: 10px; }.next-guest { display: flex; flex-direction: column; gap: 2px; padding-top: 10px; border-top: 1px solid #eff1ef; }.next-guest span { color: #abb4b1; font: 9px 'DM Mono', monospace; }.next-guest b { font-size: 10px; }.next-guest small { color: #87928f; font-size: 9px; }.today-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }.queue-list, .appointment-row { display: flex; flex-direction: column; }.queue-row { display: grid; grid-template-columns: 23px 1.4fr 1fr 45px auto; gap: 8px; align-items: center; min-height: 54px; border-bottom: 1px solid #eff1ef; }.queue-row:last-child { border: 0; }.queue-number { display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid #d8e2dd; border-radius: 50%; color: #5e8c80; font: 10px 'DM Mono', monospace; }.queue-person { display: flex; align-items: center; gap: 7px; min-width: 0; }.queue-person b, .queue-person small { display: block; }.queue-person b { overflow: hidden; text-overflow: ellipsis; font-size: 11px; white-space: nowrap; }.queue-person small { color: #8c9794; font-size: 9px; }.queue-assigned { display: flex; align-items: center; gap: 4px; color: #657473; font-size: 10px; }.queue-assigned .avatar { width: 21px; height: 21px; flex-basis: 21px; font-size: 7px; }.unassigned { color: #a47757; font-size: 9px; }.wait-time { color: #a36d43; font: 10px 'DM Mono', monospace; }.row-actions { display: flex; align-items: center; justify-content: end; gap: 3px; }.more-button { padding: 5px 3px; color: #9da7a4; background: transparent; letter-spacing: 2px; }.appointment-row { display: grid; grid-template-columns: 64px 27px 1fr 60px auto 18px; align-items: center; gap: 8px; min-height: 52px; border-bottom: 1px solid #eff1ef; }.appointment-row:last-child { border: 0; }.appointment-time { color: #596967; font: 10px 'DM Mono', monospace; }.appointment-person b, .appointment-person small { display: block; }.appointment-person b { font-size: 11px; }.appointment-person small { color: #8b9693; font-size: 9px; }.appointment-barber { color: #7a8783; font-size: 10px; }.status { display: inline-flex; align-items: center; gap: 4px; width: fit-content; padding: 4px 6px; border-radius: 4px; color: #5a7973; background: #e8f3ef; font-size: 9px; white-space: nowrap; }.status i { width: 5px; height: 5px; border-radius: 50%; background: #65a491; }.status-booked { color: #617ca0; background: #ebf1f7; }.status-booked i { background: #6b91b8; }.status-checkedin { color: #a17142; background: #fbf0e1; }.status-checkedin i { background: #c78b3f; }.status-inchair, .status-finishing { color: #9b693d; background: #f8eadc; }.status-inchair i, .status-finishing i { background: #c0793e; }.status-cancelled, .status-noshow { color: #aa645d; background: #fae9e7; }.status-cancelled i, .status-noshow i { background: #c17169; }.status-warning { color: #a46b3d; background: #faefdf; }.status-success { color: #4f8776; background: #e7f2ed; }
.calendar-toolbar { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; }.square-button { width: 32px; height: 32px; font-size: 18px; }.date-button { display: flex; flex-direction: column; align-items: start; gap: 1px; min-height: 32px; padding: 5px 11px; text-align: left; }.date-button b { font-size: 11px; }.date-button span { color: #8f9a97; font-size: 9px; }.calendar-spacer { flex: 1; }.legend { display: flex; align-items: center; gap: 7px; color: #899491; font-size: 10px; }.legend-dot { width: 7px; height: 7px; border-radius: 50%; }.legend-dot.teal { background: #65a491; }.legend-dot.purple { background: #8471aa; margin-left: 7px; }.legend-dot.gray { background: #bbc4c0; margin-left: 7px; }.segmented { display: flex; padding: 2px; border: 1px solid #dfe5e1; border-radius: 5px; background: #fff; }.segmented button { padding: 7px 10px; color: #899391; background: transparent; font-size: 10px; }.segmented button.active { color: #364a4b; border-radius: 4px; background: #edf2ef; font-weight: 600; }.calendar-board { min-height: 600px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow); }.calendar-head, .calendar-body { display: grid; grid-template-columns: 75px repeat(4, 1fr); }.calendar-head { border-bottom: 1px solid #e9edeb; background: #fafbf9; }.time-head { padding: 13px 10px; color: #9aa49f; font: 9px 'DM Mono', monospace; }.barber-head { display: flex; align-items: center; gap: 7px; padding: 11px 10px; border-left: 1px solid #edf0ee; }.barber-head b, .barber-head small { display: block; }.barber-head b { font-size: 11px; }.barber-head small { color: #8c9894; font-size: 9px; }.barber-head .avatar { width: 26px; height: 26px; flex-basis: 26px; font-size: 8px; }.calendar-body { min-height: 560px; }.time-axis { position: relative; padding-top: 4px; }.time-axis span { display: block; height: 56px; padding: 0 9px; color: #a0a9a5; font: 9px 'DM Mono', monospace; transform: translateY(-5px); }.calendar-column { position: relative; border-left: 1px solid #edf0ee; }.grid-lines { position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, transparent 0, transparent 55px, #edf0ee 56px); }.calendar-event { position: absolute; left: 5px; right: 5px; z-index: 1; display: flex; flex-direction: column; gap: 2px; overflow: hidden; padding: 7px 8px; border-left: 3px solid #6fa99c; border-radius: 4px; background: #e4f2ee; color: #3b5e5c; cursor: pointer; font-size: 9px; }.calendar-event b { font-size: 9px; }.calendar-event span { opacity: .78; }.calendar-event.event-in-chair { border-color: #b76f45; background: #fbecde; color: #895d3c; }.calendar-event.event-checked-in { border-color: #c78b3f; background: #fbf0df; }.calendar-event.event-cancelled { border-color: #bb8178; background: #fae9e7; text-decoration: line-through; }.calendar-event em { width: fit-content; margin-top: 3px; padding: 2px 4px; border-radius: 3px; color: #fff; background: #b76f45; font: 8px 'DM Mono', monospace; font-style: normal; }.calendar-footer { display: flex; gap: 35px; padding: 13px 18px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 8px 8px; background: #fff; color: #8a9591; font-size: 10px; }.calendar-footer b { color: var(--ink); font-size: 12px; }
.queue-hero { display: flex; align-items: center; gap: 48px; padding: 24px 28px; border-radius: 8px; color: #eef3ef; background: var(--navy-2); box-shadow: var(--shadow); }.queue-hero > div:first-child { flex: 1; }.queue-hero .eyebrow { color: #b9c8c1; }.queue-hero h2 { margin: 0; font: 700 29px 'Playfair Display', serif; }.queue-hero p { margin: 5px 0 0; color: #adbbb6; font-size: 11px; }.queue-hero p b { color: #f0c18e; }.queue-hero-stat { display: flex; align-items: center; gap: 9px; padding-left: 25px; border-left: 1px solid rgba(255,255,255,.15); }.queue-hero-stat strong { color: #e8b27e; font: 700 31px 'Playfair Display', serif; }.queue-hero-stat span { color: #afbbb8; font-size: 10px; line-height: 1.3; }.queue-layout { display: grid; grid-template-columns: 1.55fr 1fr; gap: 14px; margin-top: 14px; }.queue-tabs { display: flex; gap: 3px; }.queue-tabs button { padding: 6px 9px; border-radius: 4px; color: #899491; background: transparent; font-size: 10px; }.queue-tabs button.active { color: #385d5a; background: #e8f2ee; font-weight: 600; }.health-stat { display: flex; align-items: center; gap: 10px; padding: 13px 0; border-bottom: 1px solid #eef0ee; }.health-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-size: 16px; }.health-icon.teal { color: #428a80; background: var(--teal-light); }.health-icon.purple { color: #77649d; background: var(--purple-light); }.health-icon.gold { color: #a86b3e; background: var(--gold-light); }.health-stat b, .health-stat small { display: block; }.health-stat b { font-size: 13px; }.health-stat small { margin-top: 1px; color: #8b9793; font-size: 10px; }.health-stat .metric-trend { margin-left: auto; font-size: 9px; }.queue-tip { padding: 14px; margin-top: 17px; border-radius: 6px; background: #fcf3e7; }.queue-tip > span { color: #b97942; font-size: 16px; }.queue-tip b { display: block; margin-top: 3px; font-size: 11px; }.queue-tip p { margin: 5px 0 0; color: #8e755f; font-size: 10px; }.kiosk-promo { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; background: #f1f5f2; }.kiosk-promo h3 { margin-top: -1px; }.kiosk-promo p:not(.eyebrow) { margin: 5px 0 0; color: #7e8986; font-size: 11px; }
.client-layout { display: grid; grid-template-columns: 340px 1fr; gap: 14px; align-items: start; }.client-list-panel { min-height: 695px; padding: 0; overflow: hidden; }.client-search { display: flex; align-items: center; gap: 8px; padding: 13px 15px; border-bottom: 1px solid #e9edeb; }.client-search > span { color: #899593; font-size: 22px; }.client-search input { min-width: 0; flex: 1; padding: 2px 0; border: 0; outline: 0; color: var(--ink); font-size: 11px; }.client-search input::placeholder { color: #a1aba8; }.client-search kbd { padding: 3px 5px; color: #a2aaa7; border: 1px solid #e3e8e5; border-radius: 3px; font: 9px 'DM Mono', monospace; }.client-list-head { display: flex; justify-content: space-between; align-items: center; padding: 13px 16px 8px; color: #909a97; font-size: 10px; }.filter-button { padding: 7px 9px; font-size: 10px; }.client-list { max-height: 600px; overflow: auto; }.client-row { display: grid; grid-template-columns: 32px 1fr auto; gap: 9px; align-items: center; width: 100%; padding: 10px 15px; border-left: 2px solid transparent; color: var(--ink); background: #fff; text-align: left; }.client-row:hover { background: #f7faf8; }.client-row.selected { border-left-color: var(--gold); background: #f4f6f3; }.client-row > span:nth-child(2) { min-width: 0; }.client-row b, .client-row small { display: block; }.client-row b { overflow: hidden; text-overflow: ellipsis; font-size: 11px; white-space: nowrap; }.client-row small { margin-top: 2px; color: #929c99; font-size: 9px; }.client-spend { text-align: right; font-size: 10px; }.client-spend small { text-align: right; }.client-profile { min-height: 695px; padding: 26px 28px; }.profile-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; }.profile-identity { display: flex; align-items: center; gap: 14px; }.profile-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }.profile-name-row h2 { margin: 0; font: 700 24px 'Playfair Display', serif; }.profile-identity p { margin: 5px 0 2px; color: #71807c; font-size: 11px; }.profile-identity small { color: #9ca5a2; font-size: 10px; }.profile-actions { display: flex; align-items: center; gap: 8px; }.tag { padding: 4px 6px; border-radius: 4px; color: #527f74; background: #e8f3ef; font-size: 9px; }.tag.vip, .tag.high-spender { color: #a26c40; background: #faeedf; }.tag.at-risk { color: #a4615b; background: #fae9e7; }.tag.new { color: #617ca0; background: #eaf0f7; }.profile-stats { display: grid; grid-template-columns: repeat(5, 1fr); margin: 28px 0; border: 1px solid #e8edeb; border-radius: 6px; }.profile-stats > div { padding: 13px 12px; border-right: 1px solid #e8edeb; }.profile-stats > div:last-child { border: 0; }.profile-stats b, .profile-stats small { display: block; }.profile-stats b { font-size: 17px; }.profile-stats small { margin-top: 3px; color: #8c9794; font-size: 9px; }.profile-columns { display: grid; grid-template-columns: 1.25fr 1fr; gap: 30px; }.section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; }.section-title h3 { font-size: 13px; }.visit-history { border-top: 1px solid #e9edeb; }.visit-row { display: grid; grid-template-columns: 39px 1fr auto; gap: 9px; align-items: center; padding: 11px 0; border-bottom: 1px solid #eff1ef; }.visit-date { display: flex; flex-direction: column; align-items: center; padding: 4px 0; border-radius: 5px; background: #f2f5f2; }.visit-date b { font-size: 14px; }.visit-date small { color: #8f9996; font-size: 9px; }.visit-row b, .visit-row small { display: block; }.visit-row b { font-size: 11px; }.visit-row small { margin-top: 2px; color: #8d9895; font-size: 9px; }.visit-row > span:last-child { text-align: right; font-size: 11px; }.visit-row > span:last-child small { color: #5a9a82; }.notes-card { display: flex; gap: 8px; padding: 12px; border-radius: 6px; background: #fbf4e8; }.notes-card > span { color: #af7748; }.notes-card p { margin: 0; color: #755f4c; font-size: 10px; }.preference-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #edf0ee; color: #909b98; font-size: 10px; }.preference-row b { color: #465654; font-weight: 600; }
.staff-summary, .service-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 14px; }.service-summary { grid-template-columns: repeat(4, 1fr); }.staff-snapshot, .service-summary > div { display: flex; align-items: center; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow); }.staff-snapshot > div b, .staff-snapshot > div small, .service-summary > div b, .service-summary > div small { display: block; }.staff-snapshot > div b, .service-summary > div b { font-size: 18px; }.staff-snapshot > div small, .service-summary > div small { margin-top: 2px; color: #8d9895; font-size: 10px; }.staff-snapshot .metric-trend { margin-left: auto; }.staff-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }.staff-card { padding: 18px; }.staff-card-head { display: flex; align-items: start; gap: 11px; }.staff-card-head > div { flex: 1; }.staff-card-head h3 { margin: 2px 0 2px; font: 600 17px 'Playfair Display', serif; }.staff-card-head p { margin: 0; color: #899490; font-size: 10px; }.staff-status { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; color: #55907c; font-size: 9px; }.staff-status i { width: 5px; height: 5px; border-radius: 50%; background: #61a48d; }.staff-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 16px 0 12px; margin-top: 13px; border-top: 1px solid #edf0ee; border-bottom: 1px solid #edf0ee; }.staff-stat-row b, .staff-stat-row small { display: block; }.staff-stat-row b { font-size: 14px; }.staff-stat-row small { margin-top: 2px; color: #8e9996; font-size: 9px; }.staff-performance { padding: 14px 0; }.staff-performance > div:first-child { display: flex; justify-content: space-between; color: #75827f; font-size: 10px; }.staff-performance > div:first-child b { color: #3d504d; }.staff-performance > i { display: block; height: 5px; margin-top: 8px; border-radius: 3px; background: #edf1ee; overflow: hidden; }.staff-meta { display: flex; justify-content: space-between; margin-top: 6px; color: #9aa39f; font-size: 9px; }.staff-card-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 11px; color: #86908e; font-size: 9px; border-top: 1px solid #edf0ee; }.staff-card-foot b { color: #515f5d; }.rent-panel { margin-top: 14px; } table { width: 100%; border-collapse: collapse; text-align: left; } th { padding: 8px 10px; color: #9ba5a1; border-bottom: 1px solid #e9edeb; font: 9px 'DM Mono', monospace; letter-spacing: .4px; } td { padding: 12px 10px; color: #66736f; border-bottom: 1px solid #eff1ef; font-size: 10px; } tr:last-child td { border-bottom: 0; } td b { color: #3f4e4b; }.td-avatar { display: inline-flex; align-items: center; gap: 6px; }
.service-panel { padding: 0; overflow: hidden; }.service-table-head { display: flex; align-items: end; justify-content: space-between; padding: 20px 20px 10px; }.table-tools { display: flex; gap: 7px; }.service-name { display: flex; align-items: center; gap: 8px; }.service-name b, .service-name small { display: block; }.service-name b { color: #3f4d4b; }.service-name small { margin-top: 3px; color: #9ba4a1; font-size: 9px; }.service-dot { display: block; width: 8px; height: 8px; border-radius: 50%; }.dot-0 { background: #b76f45; }.dot-1 { background: #62a08f; }.dot-2 { background: #7865a0; }.dot-3 { background: #c78b3f; }.dot-4 { background: #6686a6; }.category-pill { padding: 4px 6px; border-radius: 4px; color: #6e7e79; background: #f0f3f1; font-size: 9px; }.booked-cell { display: flex; align-items: center; gap: 7px; }.booked-cell i { display: block; width: 45px; height: 4px; border-radius: 3px; background: #edf1ee; overflow: hidden; }.booked-cell em { display: block; height: 100%; background: #7ba99c; }
.report-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }.report-kpi { padding: 16px 18px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow); }.report-kpi span, .report-kpi small { display: block; color: #83908d; font-size: 10px; }.report-kpi b { display: block; margin-top: 8px; font-size: 22px; letter-spacing: -.7px; }.report-kpi small { margin-top: 7px; }.reports-grid, .reports-bottom { display: grid; grid-template-columns: 1.35fr 1fr; gap: 14px; margin-top: 14px; }.report-chart { min-height: 350px; }.chart-legend { display: flex; align-items: center; gap: 5px; color: #8a9693; font-size: 9px; }.chart-legend i, .purple-dot { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: #b76f45; }.purple-dot { margin-left: 8px; background: #806eaa; }.line-chart { margin-top: 25px; }.line-chart svg { display: block; width: 100%; height: 210px; overflow: visible; background: repeating-linear-gradient(to bottom, transparent 0, transparent 51px, #edf1ee 52px); }.chart-axis { display: flex; justify-content: space-between; margin-top: 10px; color: #a0a9a6; font: 9px 'DM Mono', monospace; }.rank-list { display: flex; flex-direction: column; gap: 16px; padding-top: 5px; }.rank-row { display: grid; grid-template-columns: 24px 1fr 70px; gap: 8px; align-items: center; }.rank-number { color: #b5bfbb; font: 11px 'DM Mono', monospace; }.rank-row b, .rank-row small { display: block; }.rank-row b { font-size: 11px; }.rank-row small { margin-top: 2px; color: #929d99; font-size: 9px; }.rank-bar { height: 5px; border-radius: 3px; background: #edf1ef; overflow: hidden; }.rank-bar i { display: block; height: 100%; border-radius: 3px; background: #b76f45; }.reports-bottom { margin-top: 14px; }.compact-table td { padding: 9px 10px; }.compact-table td:first-child { display: flex; align-items: center; gap: 6px; }.compact-table .avatar { width: 24px; height: 24px; flex-basis: 24px; font-size: 8px; }.insight-card { position: relative; min-height: 200px; background: #f8f0e5; border-color: #f0dfc6; }.insight-icon { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 16px; border-radius: 50%; color: #a66c3f; background: #f4dfc5; }.insight-card h3 { max-width: 280px; margin: 0; font: 600 20px 'Playfair Display', serif; }.insight-card > p:not(.eyebrow) { max-width: 340px; margin: 8px 0 15px; color: #816d58; font-size: 11px; }
.segment-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }.segment-card { display: grid; grid-template-columns: 36px 1fr; gap: 10px; padding: 15px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow); }.segment-icon { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 50%; font-size: 16px; }.segment-icon.teal { color: #418b80; background: var(--teal-light); }.segment-icon.gold { color: #ac7241; background: var(--gold-light); }.segment-icon.purple { color: #7c69a0; background: var(--purple-light); }.segment-icon.blue { color: #5b7fa0; background: var(--blue-light); }.segment-card > div b, .segment-card > div small { display: block; }.segment-card > div b { font-size: 19px; }.segment-card > div small { color: #8e9995; font-size: 10px; }.segment-card .text-button { grid-column: 1 / -1; padding-top: 9px; margin-top: 3px; border-top: 1px solid #edf0ee; text-align: left; }.marketing-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; margin-top: 14px; }.campaign-row { display: grid; grid-template-columns: 34px 1fr 65px 55px 70px; gap: 8px; align-items: center; padding: 13px 0; border-bottom: 1px solid #eef1ef; }.campaign-row:last-child { border-bottom: 0; }.campaign-icon { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; color: #8066a0; background: #eeeaf7; }.campaign-row b, .campaign-row small { display: block; }.campaign-row b { font-size: 11px; }.campaign-row small { margin-top: 2px; color: #929c99; font-size: 9px; }.campaign-count { text-align: right; }.campaign-date { color: #8d9894; text-align: right; font-size: 9px; }.rating-hero { display: flex; align-items: center; gap: 12px; padding: 10px 0 18px; }.rating-hero > strong { font: 700 38px 'Playfair Display', serif; }.rating-hero > div { display: flex; flex-direction: column; gap: 3px; }.stars { color: #c78b3f; letter-spacing: 2px; }.rating-hero small { color: #929d99; font-size: 10px; }.rating-bars { display: flex; flex-direction: column; gap: 6px; }.rating-bars > div { display: grid; grid-template-columns: 30px 1fr 25px; gap: 7px; align-items: center; color: #8d9894; font-size: 9px; }.rating-bars i { display: block; height: 5px; border-radius: 3px; background: #edf1ee; overflow: hidden; }.rating-bars em { display: block; height: 100%; border-radius: 3px; background: #c78b3f; }.review-request { display: flex; align-items: center; gap: 9px; width: 100%; padding: 12px 0 0; margin-top: 17px; border-top: 1px solid #edf0ee; color: var(--ink); background: transparent; text-align: left; }.review-request > span:first-child { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #a56d3f; background: #faefdf; }.review-request div { flex: 1; }.review-request b, .review-request small { display: block; }.review-request b { font-size: 11px; }.review-request small { margin-top: 2px; color: #8e9995; font-size: 9px; }.review-request > span:last-child { color: #5b8f84; }
.settings-layout { display: grid; grid-template-columns: 180px 1fr; gap: 14px; align-items: start; }.settings-nav { display: flex; flex-direction: column; gap: 3px; }.settings-nav button { padding: 10px 12px; border-radius: 5px; color: #81908b; background: transparent; text-align: left; font-size: 11px; }.settings-nav button.active { color: #324e4b; background: #e6f0ec; font-weight: 600; }.settings-panel { padding: 27px 30px; }.settings-heading { display: flex; justify-content: space-between; align-items: start; }.settings-heading h3 { font-size: 17px; }.settings-heading p:not(.eyebrow) { margin: 5px 0 0; color: #899592; font-size: 10px; }.logo-upload { display: flex; align-items: center; gap: 9px; }.logo-upload .brand-mark { width: 46px; height: 46px; font-size: 15px; }.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-top: 23px; }.form-grid label, .modal label, .booking-card label { display: flex; flex-direction: column; gap: 6px; color: #6d7a76; font-size: 10px; font-weight: 600; }.form-grid input, .form-grid select, .form-grid textarea, .modal input, .modal select, .modal textarea, .booking-card input, .booking-card select { width: 100%; min-height: 37px; padding: 8px 10px; color: #394846; border: 1px solid #dfe5e1; border-radius: 5px; outline: 0; background: #fff; font-size: 11px; font-weight: 400; }.form-grid input:focus, .form-grid select:focus, .modal input:focus, .modal select:focus, .modal textarea:focus, .booking-card input:focus, .booking-card select:focus { border-color: #8caaa2; box-shadow: 0 0 0 3px #e8f2ee; }.form-grid textarea, .modal textarea { min-height: 72px; resize: vertical; }.full { grid-column: 1 / -1; }.settings-divider { height: 1px; margin: 30px 0; background: #ebefed; }.tip-presets { display: flex; gap: 5px; }.tip-presets button { flex: 1; padding: 9px 4px; color: #75827e; border: 1px solid #dfe5e1; border-radius: 4px; background: #fff; font-size: 10px; }.tip-presets button.selected { color: #477b70; border-color: #a8c7bc; background: #e6f2ed; }.settings-note { display: flex; align-items: center; gap: 10px; padding: 14px 16px; margin-top: 14px; border: 1px solid #dcece7; border-radius: 7px; background: #edf7f3; }.settings-note > span { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; color: #fff; background: #63a38e; }.settings-note b, .settings-note p { display: block; }.settings-note b { font-size: 11px; }.settings-note p { margin: 2px 0 0; color: #67817a; font-size: 10px; }.settings-note .text-button { margin-left: auto; }
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 240px; text-align: center; }.empty-state > span { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 10px; border-radius: 50%; color: #5b9285; background: #e8f3ef; font-size: 18px; }.empty-state b { font-size: 13px; }.empty-state p { margin: 4px 0 0; color: #8c9894; font-size: 10px; }.empty-state.compact { min-height: 130px; }
.modal-backdrop { position: fixed; z-index: 10; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(17, 27, 31, .54); backdrop-filter: blur(5px); }.modal { position: relative; width: min(540px, 100%); max-height: calc(100vh - 40px); overflow: auto; padding: 27px 29px 23px; border: 1px solid rgba(255,255,255,.3); border-radius: 10px; background: #fbfcfa; box-shadow: var(--shadow-lg); }.modal-close { position: absolute; top: 14px; right: 17px; color: #91a09b; background: transparent; font-size: 24px; line-height: 1; }.modal h2 { margin: 0; font: 700 25px 'Playfair Display', serif; }.modal-subtitle { margin: 5px 0 22px; color: #7f8b87; font-size: 11px; }.modal .form-grid { margin-top: 0; }.modal-actions { display: flex; justify-content: end; gap: 8px; padding-top: 21px; margin-top: 20px; border-top: 1px solid #e9eeeb; }.conflict-hint { padding: 10px 11px; margin-top: 15px; border-radius: 5px; color: #6b867d; background: #e8f3ef; font-size: 10px; }.checkout-items { padding: 10px 12px; border: 1px solid #e4eae7; border-radius: 6px; background: #fff; }.checkout-items > div { display: flex; justify-content: space-between; }.checkout-items b, .checkout-items small { display: block; }.checkout-items b { font-size: 12px; }.checkout-items small { margin-top: 2px; color: #8c9894; font-size: 9px; }.add-line { padding: 13px 0 1px; color: #588b80; background: transparent; font-size: 10px; }.checkout-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }.checkout-total { padding-top: 14px; margin-top: 14px; border-top: 1px solid #e7ece9; }.checkout-total > div { display: flex; justify-content: space-between; padding: 4px 0; color: #84908c; font-size: 10px; }.checkout-total .total-line { padding-top: 12px; margin-top: 7px; border-top: 1px solid #e9eeeb; color: #354a47; font-size: 12px; }.checkout-total strong { font-size: 20px; }.campaign-compose { display: flex; flex-direction: column; gap: 15px; }.channel-choice { display: flex; gap: 15px; }.channel-choice label { display: flex; flex-direction: row; align-items: center; gap: 5px; font-weight: 400; }.channel-choice input { min-height: 0; width: auto; }.message-preview { padding: 13px; border: 1px solid #e6ebe8; border-radius: 6px; background: #f4f7f4; }.message-preview span { color: #929c99; font: 9px 'DM Mono', monospace; }.message-preview p { margin: 6px 0 0; color: #5b6965; font-size: 11px; }.message-preview b { color: #4c8c7d; }.help-list { display: flex; flex-direction: column; margin-top: 17px; }.help-list button { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; padding: 11px 0; border-bottom: 1px solid #edf0ee; color: #3f514d; background: transparent; text-align: left; }.help-list button > span:first-child { color: #6c9a8c; }.help-list small { display: block; grid-column: 2; margin-top: -6px; color: #97a19e; font-size: 9px; }
.toast { position: fixed; z-index: 20; right: 26px; bottom: 24px; display: flex; align-items: center; gap: 9px; padding: 12px 15px; border: 1px solid #d8e9e2; border-radius: 7px; color: #335e56; background: #eff8f4; box-shadow: var(--shadow-lg); font-size: 12px; }.toast > span { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; color: #fff; background: #61a08d; font-size: 11px; }.toast-error { color: #89514c; border-color: #f1d8d5; background: #fff2f0; }.toast-error > span { background: #bb6b62; }
.login-page { display: grid; grid-template-columns: 43% 57%; min-height: 100vh; background: #f8f8f6; }.login-art { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; padding: 54px 58px; overflow: hidden; color: #eff5f1; background: var(--navy); }.login-art::before { position: absolute; top: -120px; right: -130px; width: 520px; height: 520px; border: 1px solid rgba(233,184,130,.2); border-radius: 50%; box-shadow: 0 0 0 70px rgba(233,184,130,.04), 0 0 0 140px rgba(233,184,130,.03), 0 0 0 210px rgba(233,184,130,.025); content: ''; }.login-art::after { position: absolute; right: -20%; bottom: -33%; width: 700px; height: 700px; background: radial-gradient(circle, rgba(87,145,130,.17), transparent 67%); content: ''; }.login-quote { position: relative; z-index: 1; max-width: 390px; margin: auto 0; }.login-quote span, .login-quote strong { display: block; }.login-quote span { color: #d5a271; font: 12px 'DM Mono', monospace; letter-spacing: 3px; }.login-quote strong { margin-top: 3px; font: 700 clamp(44px, 5vw, 72px)/.94 'Playfair Display', serif; letter-spacing: -3px; }.login-quote p { max-width: 270px; margin-top: 24px; color: #9eafaa; font-size: 13px; line-height: 1.7; }.art-stats { position: relative; z-index: 1; display: flex; gap: 45px; }.art-stats b, .art-stats small { display: block; }.art-stats b { color: #f0bd88; font: 700 24px 'Playfair Display', serif; }.art-stats small { margin-top: 3px; color: #95a39e; font-size: 10px; }.login-panel { display: flex; flex-direction: column; justify-content: center; max-width: 520px; width: 100%; padding: 50px 12%; }.login-panel .mobile-brand { display: none; }.login-heading { margin-bottom: 28px; }.login-heading h1 { margin: 0; font: 700 38px 'Playfair Display', serif; letter-spacing: -1px; }.login-heading > p:last-child { margin: 7px 0 0; color: #85918e; font-size: 13px; }.demo-accounts { display: flex; flex-direction: column; gap: 9px; }.role-card { display: grid; grid-template-columns: 38px 1fr auto; gap: 11px; align-items: center; padding: 13px; border: 1px solid #e3e8e5; border-radius: 7px; color: var(--ink); background: #fff; text-align: left; box-shadow: 0 3px 10px rgba(30,50,45,.025); transition: .18s ease; }.role-card:hover { border-color: #a9c4bb; transform: translateX(3px); box-shadow: 0 8px 20px rgba(30,50,45,.08); }.role-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #a96f41; background: #faefdf; font-size: 17px; }.role-card:nth-child(2) .role-icon { color: #507f9e; background: #e8f0f7; }.role-card:nth-child(3) .role-icon { color: #75629d; background: #eeeaf7; }.role-card:nth-child(4) .role-icon { color: #4c8c7c; background: #e6f2ed; }.role-card b, .role-card small { display: block; }.role-card b { font-size: 12px; }.role-card small { margin-top: 3px; color: #8d9895; font-size: 10px; }.arrow { color: #8ea099; font-size: 19px; }.login-foot { padding-top: 25px; margin-top: 25px; border-top: 1px solid #e9eeeb; color: #8e9996; font-size: 10px; }.login-foot .live-dot { margin-right: 7px; vertical-align: -1px; }.login-links { display: flex; justify-content: space-between; margin-top: 15px; }.login-links a, .login-links button { color: #5d9182; background: transparent; font-size: 10px; }.login-links button { color: #9ca7a3; }
.booking-page { min-height: 100vh; color: var(--ink); background: #f8f8f6; }.booking-header { display: flex; align-items: center; padding: 21px 6vw; border-bottom: 1px solid #e4e9e5; background: rgba(255,255,255,.74); }.booking-location { margin-left: 50px; color: #82908b; font-size: 11px; }.booking-location span { margin: 0 6px; color: #c0c8c4; }.booking-staff-link { margin-left: auto; color: #5a8e81; font-size: 11px; font-weight: 600; }.booking-main { display: grid; grid-template-columns: minmax(280px, .86fr) minmax(400px, 1fr); align-items: center; gap: 9vw; width: min(1060px, 88%); min-height: calc(100vh - 100px); margin: 0 auto; padding: 60px 0 75px; }.booking-intro { max-width: 425px; }.booking-intro h1 { margin: 0; font: 700 clamp(38px, 5vw, 61px)/.98 'Playfair Display', serif; letter-spacing: -2px; }.booking-intro > p:not(.eyebrow) { max-width: 320px; margin: 18px 0 26px; color: #81908b; font-size: 14px; line-height: 1.7; }.booking-perks { display: flex; flex-direction: column; gap: 8px; color: #69817a; font-size: 10px; }.booking-card { padding: 29px; border: 1px solid #e0e6e2; border-radius: 10px; background: #fff; box-shadow: var(--shadow-lg); }.booking-progress { display: flex; align-items: center; gap: 8px; margin-bottom: 28px; }.booking-progress span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #9aa59f; border: 1px solid #dbe4df; font: 10px 'DM Mono', monospace; }.booking-progress span.active { color: #fff; border-color: var(--teal); background: var(--teal); }.booking-progress i { width: 29px; height: 1px; background: #dfe7e2; }.booking-progress small { margin-left: auto; color: #9ba5a1; font-size: 10px; }.booking-card form { display: flex; flex-direction: column; gap: 15px; }.booking-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.booking-divider { height: 1px; margin: 3px 0; background: #edf0ee; }.form-label { margin: 0 -0px -4px; color: #596b66; font-size: 11px; font-weight: 600; }.optional { color: #a7b0ad; font-weight: 400; }.check-label { display: flex !important; flex-direction: row !important; align-items: center; gap: 7px !important; color: #788883 !important; font-weight: 400 !important; }.check-label input { width: auto; min-height: 0; accent-color: var(--teal); }.full-button { width: 100%; min-height: 44px; margin-top: 5px; }.full-button span { margin-left: auto; font-size: 18px; }.booking-fine { margin: -4px 0 0; color: #a0aaa6; text-align: center; font-size: 9px; }.booking-footer { display: flex; justify-content: space-between; padding: 16px 6vw; color: #a0aaa6; border-top: 1px solid #e5eae6; font-size: 9px; }.booking-success { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100vh - 78px); padding: 40px 20px; text-align: center; }.success-check { display: grid; place-items: center; width: 55px; height: 55px; margin-bottom: 20px; border-radius: 50%; color: #fff; background: #62a28e; font-size: 26px; }.booking-success h1 { max-width: 600px; margin: 0; font: 700 48px/1.03 'Playfair Display', serif; letter-spacing: -1.4px; }.booking-success > p:not(.eyebrow) { max-width: 470px; margin: 15px 0 28px; color: #84918c; font-size: 13px; line-height: 1.7; }.booking-confirm-card { display: flex; padding: 17px 28px; border: 1px solid #e0e7e2; border-radius: 7px; background: #fff; box-shadow: var(--shadow); }.booking-confirm-card > div { min-width: 140px; padding: 0 21px; border-right: 1px solid #e9eeeb; }.booking-confirm-card > div:last-child { border: 0; }.booking-confirm-card span, .booking-confirm-card b { display: block; }.booking-confirm-card span { color: #9aa5a0; font: 9px 'DM Mono', monospace; }.booking-confirm-card b { margin-top: 5px; font-size: 11px; }.success-actions { display: flex; gap: 8px; margin-top: 24px; }
@media (max-width: 1120px) { .sidebar { width: 215px; flex-basis: 215px; }.topbar, .content-wrap { padding-left: 28px; padding-right: 28px; }.metric-grid { grid-template-columns: repeat(2, 1fr); }.metric-card.featured { grid-column: span 2; }.chair-grid { grid-template-columns: repeat(2, 1fr); }.calendar-event { font-size: 8px; }.booking-main { gap: 5vw; } }
@media (max-width: 820px) { .sidebar { width: 65px; flex-basis: 65px; padding: 18px 8px 10px; }.sidebar .brand-lockup div, .location-switcher > span:not(.location-pin), .nav-section-label, .nav-item > span:not(.nav-glyph), .nav-item em, .booking-link > span:not(:first-child), .help-link > span:not(.help-dot), .user-chip > span:not(.avatar), .sidebar .chevron { display: none; }.sidebar-top { padding: 0; }.sidebar .brand-mark { margin: 0 auto; }.location-switcher { justify-content: center; padding: 14px 0; }.location-pin { margin: 0; }.nav-item { justify-content: center; padding: 12px 0; }.nav-glyph { font-size: 20px; }.booking-link, .help-link, .user-chip { justify-content: center; padding: 10px 0; }.booking-link { border: 0; }.topbar { padding: 22px 18px 15px; }.content-wrap { padding: 0 18px 40px; }.topbar h1 { font-size: 24px; }.top-user span:not(.avatar), .top-user .chevron { display: none; }.dashboard-grid, .dashboard-grid.lower, .today-bottom, .queue-layout, .reports-grid, .reports-bottom, .marketing-grid { grid-template-columns: 1fr; }.client-layout { grid-template-columns: 1fr; }.client-list-panel { min-height: auto; }.client-list { max-height: 330px; }.client-profile { min-height: 0; }.staff-grid { grid-template-columns: 1fr; }.settings-layout { grid-template-columns: 1fr; }.settings-nav { flex-direction: row; overflow: auto; }.settings-nav button { white-space: nowrap; }.page-header { align-items: start; flex-direction: column; }.header-actions { width: 100%; flex-wrap: wrap; }.queue-hero { gap: 20px; padding: 20px; }.floor-summary { gap: 12px; overflow: auto; }.floor-summary > div:first-child { padding-right: 8px; }.floor-filter { display: none !important; }.calendar-board { overflow-x: auto; }.calendar-head, .calendar-body { min-width: 750px; }.booking-main { grid-template-columns: 1fr; width: min(600px, 90%); padding-top: 42px; }.booking-intro { text-align: center; }.booking-intro > p:not(.eyebrow) { margin-left: auto; margin-right: auto; }.booking-perks { align-items: center; }.booking-location { display: none; }.booking-header { padding: 16px 5%; }.booking-success h1 { font-size: 38px; }.booking-confirm-card { flex-direction: column; gap: 14px; width: min(360px, 100%); }.booking-confirm-card > div { padding: 0; border: 0; }.booking-footer { display: none; } }
@media (max-width: 560px) { .topbar { padding-top: 17px; }.crumb { font-size: 10px; }.topbar h1 { font-size: 21px; }.metric-grid { gap: 8px; }.metric-card { min-height: 140px; padding: 14px; }.metric-card > strong { font-size: 24px; }.metric-card.featured { grid-column: span 2; }.pulse-grid { grid-template-columns: repeat(2, 1fr); }.chair-grid { grid-template-columns: 1fr; }.chair-card { min-height: 245px; }.queue-row { grid-template-columns: 23px 1fr auto; padding: 7px 0; }.queue-assigned, .wait-time { display: none; }.row-actions { grid-column: 2 / -1; justify-content: start; }.appointment-row { grid-template-columns: 55px 27px 1fr auto; }.appointment-barber { display: none; }.profile-stats { grid-template-columns: repeat(3, 1fr); }.profile-stats > div:nth-child(4), .profile-stats > div:nth-child(5) { margin-top: -1px; border-top: 1px solid #e8edeb; }.profile-stats > div:nth-child(3) { border-right: 0; }.profile-columns { grid-template-columns: 1fr; gap: 23px; }.report-kpis { grid-template-columns: repeat(2, 1fr); }.service-summary { grid-template-columns: repeat(2, 1fr); }.service-table-head { align-items: start; flex-direction: column; gap: 10px; }.service-panel { overflow-x: auto; }.service-panel table { min-width: 650px; }.campaign-row { grid-template-columns: 34px 1fr 60px; }.campaign-row .status, .campaign-date { display: none; }.settings-panel { padding: 20px 16px; }.form-grid { grid-template-columns: 1fr; }.full { grid-column: auto; }.settings-note { align-items: start; flex-wrap: wrap; }.settings-note .text-button { margin-left: 33px; }.modal { padding: 23px 18px 18px; }.checkout-fields { grid-template-columns: 1fr; }.booking-card { padding: 22px 17px; }.booking-fields { grid-template-columns: 1fr; }.login-page { display: block; }.login-art { display: none; }.login-panel { min-height: 100vh; max-width: none; padding: 33px 22px; }.login-panel .mobile-brand { display: inline-flex; margin-bottom: 60px; }.login-heading h1 { font-size: 34px; } }

.auth-form { display: flex; flex-direction: column; gap: 15px; }
.auth-form label { display: flex; flex-direction: column; gap: 7px; color: #596b66; font-size: 11px; font-weight: 600; }
.auth-form input { width: 100%; min-height: 43px; padding: 10px 12px; border: 1px solid #dfe6e2; border-radius: 6px; color: var(--ink); background: #fff; font: inherit; font-size: 12px; outline: none; }
.auth-form input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(98,162,142,.12); }
.form-error { margin: 0; color: #9a5a3d; font-size: 11px; line-height: 1.45; }
.auth-resend { margin-left: auto; }

.week-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; margin-bottom: 12px; }
.week-day { display: flex; flex-direction: column; gap: 3px; padding: 10px; border: 1px solid var(--line); border-radius: 7px; color: #74827e; background: #fff; text-align: left; }
.week-day b { color: var(--ink); font: 700 18px 'Playfair Display', serif; }
.week-day span, .week-day small { font-size: 9px; }
.week-day.active { border-color: #a7c7bc; background: #e9f3ef; }
.inventory-panel { overflow-x: auto; }
.inventory-panel table { min-width: 760px; }
.close-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 14px; margin-top: 14px; }
.close-lines { display: flex; flex-direction: column; gap: 2px; }
.close-lines > div { display: flex; justify-content: space-between; padding: 10px 0; color: #73817d; font-size: 11px; border-bottom: 1px solid #edf0ee; }
.close-lines .total-line { padding-top: 14px; margin-top: 7px; color: var(--ink); font-size: 13px; border-top: 1px solid #dfe7e2; }
.close-lines strong { font-size: 19px; }
.close-callout { display: flex; gap: 9px; padding: 12px; margin-top: 16px; border-radius: 6px; color: #7c6652; background: #fcf2e5; font-size: 10px; }
.close-callout > span { display: grid; place-items: center; width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%; color: #fff; background: #c78b3f; }
.close-callout p { margin: 2px 0 0; }
.payment-mix { display: flex; flex-direction: column; gap: 18px; margin-top: 22px; }
.payment-mix > div { display: grid; grid-template-columns: 1fr auto; gap: 7px; color: #73817d; font-size: 11px; }
.payment-mix b { color: var(--ink); }
.payment-mix i { grid-column: 1 / -1; height: 7px; overflow: hidden; border-radius: 4px; background: #edf1ee; }
.payment-mix em { display: block; height: 100%; border-radius: 4px; background: #6fa99c; }
.close-tip { padding: 13px; margin-top: 24px; border-radius: 6px; background: #f1f5f2; }
.close-tip b { font-size: 11px; }
.close-tip p { margin: 4px 0 0; color: #7d8985; font-size: 10px; line-height: 1.5; }
.location-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 22px; }
.location-card { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.location-card.selected { border-color: #a7c7bc; box-shadow: 0 0 0 3px #e8f2ee; }
.location-card b { font-size: 13px; }
.location-card span { color: #84908c; font-size: 10px; }
.location-card .text-button { align-self: start; margin-top: 8px; }
.hours-list { display: flex; flex-direction: column; gap: 9px; margin-top: 22px; }
.hours-list label { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 12px; color: #61716d; font-size: 10px; }
.hours-list input { min-height: 35px; padding: 7px 9px; border: 1px solid #dfe5e1; border-radius: 5px; font-size: 11px; }
.notification-preferences { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 22px; }
.notification-preferences label { display: grid; grid-template-columns: 18px 1fr; gap: 4px; padding: 11px; border: 1px solid #e5ebe7; border-radius: 6px; color: #53635f; background: #fff; font-size: 10px; }
.notification-preferences input { grid-row: span 2; accent-color: var(--teal); }
.notification-preferences small { grid-column: 2; color: #97a19e; font-size: 9px; }
.onboarding-steps { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.onboarding-steps > div { display: grid; grid-template-columns: 28px 1fr auto; gap: 9px; align-items: center; padding: 9px; border: 1px solid #e8edea; border-radius: 6px; background: #fff; }
.onboarding-steps span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #4d887b; background: #e6f2ed; font: 10px 'DM Mono', monospace; }
.onboarding-steps b { font-size: 10px; }.onboarding-steps small { color: #91a09a; font-size: 9px; }
.help-article { padding: 15px; border-radius: 6px; color: #6e7d78; background: #f2f6f3; font-size: 11px; line-height: 1.6; }
.support-active { border-color: #b9c9f5; background: #f4f7ff; }.support-summary-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; }.support-summary-grid div { padding: 14px; border-radius: 7px; background: #fff; }.support-summary-grid b,.support-summary-grid span { display: block; }.support-summary-grid b { color: #2d5cdb; font: 700 22px 'Playfair Display',serif; }.support-summary-grid span { margin-top: 4px; color: #71809a; font-size: 9px; }
.help-article p { margin: 0; }.help-checklist { display: grid; grid-template-columns: 20px 1fr; gap: 7px; align-items: center; margin-top: 14px; color: #4d766b; font-size: 10px; }
@media (max-width: 820px) { .close-grid, .location-cards, .notification-preferences { grid-template-columns: 1fr; } .week-strip { overflow-x: auto; grid-template-columns: repeat(7, 105px); } }

/* App Owner HQ: dense, operational, and deliberately distinct from a shop workspace. */
.platform-shell { display: flex; min-height: 100vh; color: #192238; background: #f5f7fb; }
.platform-sidebar { display: flex; flex: 0 0 254px; flex-direction: column; background: #111c2d; color: #aab5c7; }
.platform-brand { display: flex; align-items: center; gap: 11px; height: 78px; padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,.08); color: #fff; }
.platform-brand strong, .platform-brand small { display: block; }.platform-brand strong { font-size: 13px; letter-spacing: -.2px; }.platform-brand small { margin-top: 4px; color: #7e8ca4; font-size: 9px; }
.platform-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #fff; background: linear-gradient(145deg,#4674eb,#293f98); font-weight: 800; font-size: 11px; }
.platform-sidebar nav { display: flex; flex: 1; flex-direction: column; gap: 3px; padding: 19px 10px; }.platform-sidebar nav > small { padding: 0 12px 9px; color: #62728d; font: 9px 'DM Mono',monospace; letter-spacing: 1.5px; }
.platform-nav-item { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 8px; color: #aab5c7; background: transparent; text-align: left; font-size: 11px; }.platform-nav-item:hover { color: #fff; background: rgba(255,255,255,.07); }.platform-nav-item.active { color: #fff; background: #25365f; box-shadow: inset 3px 0 #4e70ed; font-weight: 700; }.platform-nav-item .nav-glyph { width: 18px; color: #8394ad; text-align: center; font-size: 16px; }.platform-nav-item.active .nav-glyph { color: #c9d5ff; }.platform-nav-item em { min-width: 19px; padding: 2px 5px; margin-left: auto; border-radius: 8px; color: #fff; background: #c85b4a; text-align: center; font: 9px 'DM Mono',monospace; }
.platform-side-foot { padding: 14px 10px 18px; border-top: 1px solid rgba(255,255,255,.08); }.platform-side-foot > button:first-child { display: grid; grid-template-columns: 32px 1fr auto; gap: 8px; align-items: center; width: 100%; padding: 8px 5px; color: #dce4f2; background: transparent; text-align: left; }.platform-side-foot b,.platform-side-foot small { display: block; }.platform-side-foot b { font-size: 10px; }.platform-side-foot small { margin-top: 3px; color: #7887a0; font-size: 9px; }.platform-logout { padding: 12px 5px 0; color: #7887a0; background: transparent; font-size: 10px; }
.platform-main { min-width: 0; flex: 1; }.platform-topbar { display: flex; align-items: center; justify-content: space-between; height: 59px; padding: 0 32px; border-bottom: 1px solid #e3e8f1; background: #fff; }.platform-kicker { color: #8190a6; font: 9px 'DM Mono',monospace; letter-spacing: 1.3px; }.platform-live { margin-left: 17px; color: #71809a; font-size: 10px; }.platform-live i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #39a880; box-shadow: 0 0 0 3px #e3f5ef; }.platform-top-actions { display: flex; align-items: center; gap: 12px; }.platform-top-actions button { color: #627492; background: transparent; font-size: 13px; }.platform-top-actions b { display: inline-grid; place-items: center; width: 17px; height: 17px; margin-left: 2px; border-radius: 50%; color: #fff; background: #c65c4b; font: 9px 'DM Mono',monospace; }
.platform-content { width: min(1240px, calc(100% - 64px)); margin: 0 auto; padding: 38px 0 70px; }.platform-page-head { display: flex; align-items: end; justify-content: space-between; margin-bottom: 25px; }.platform-page-head h1 { margin: 0; color: #141d31; font: 700 31px/1.05 'Playfair Display',serif; letter-spacing: -.9px; }.platform-page-head p:not(.eyebrow) { margin: 7px 0 0; color: #6e7d96; font-size: 11px; }.platform-page-head .eyebrow { margin-bottom: 6px; color: #2d60dc; }.platform-kpi-grid,.platform-summary-strip,.platform-billing-kpis { display: grid; grid-template-columns: repeat(6,1fr); gap: 12px; margin-bottom: 14px; }.platform-summary-strip,.platform-billing-kpis { grid-template-columns: repeat(4,1fr); }.platform-metric { min-height: 86px; padding: 18px 20px; border: 1px solid #dce3ef; border-radius: 9px; background: #fff; box-shadow: 0 4px 14px rgba(35,56,92,.035); }.platform-metric strong,.platform-metric span { display: block; }.platform-metric strong { color: #17223b; font: 700 25px 'Inter',sans-serif; letter-spacing: -1px; }.platform-metric span { margin-top: 6px; color: #66758e; font-size: 10px; }.platform-metric.blue strong { color: #2c5be1; }.platform-metric.green strong { color: #159c7d; }.platform-metric.gold strong { color: #aa7c31; }.platform-metric.red strong { color: #c54d40; }
.platform-grid-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }.platform-panel { padding: 21px 22px; margin-bottom: 14px; border: 1px solid #dce3ed; border-radius: 10px; background: #fff; box-shadow: 0 5px 16px rgba(35,56,92,.035); }.platform-panel-head { display: flex; align-items: start; justify-content: space-between; gap: 15px; margin-bottom: 17px; }.platform-panel-head h2 { margin: 0; color: #1d2940; font-size: 15px; letter-spacing: -.2px; }.platform-panel-head p { margin: 5px 0 0; color: #7a879c; font-size: 10px; }.platform-panel-head button,.platform-period { color: #2d60dc; background: transparent; font-size: 10px; }.platform-section-label { display: block; margin-bottom: 6px; color: #8392ab; font: 9px 'DM Mono',monospace; letter-spacing: 1px; }.platform-period { color: #7f8ca2; }
.platform-alert-list { display: flex; flex-direction: column; gap: 2px; }.platform-alert-row { display: grid; grid-template-columns: 25px 1fr auto; gap: 10px; align-items: start; padding: 12px 0; border-bottom: 1px solid #edf0f5; }.platform-alert-row:last-child { border-bottom: 0; }.platform-alert-row > span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: #b07d2d; background: #fff5df; font-weight: 700; }.platform-alert-row.error > span { color: #c75043; background: #fff0ee; }.platform-alert-row b,.platform-alert-row p { display: block; }.platform-alert-row b { font-size: 11px; }.platform-alert-row p { margin: 3px 0 0; color: #728097; font-size: 10px; }.platform-alert-row small { color: #9aa6b8; font-size: 9px; }.platform-alert-row button { color: #8794a8; background: transparent; font-size: 17px; }
.platform-chart { height: 153px; padding: 10px 0 0; }.platform-chart-line { height: 120px; border-bottom: 3px solid #315bdd; background: linear-gradient(145deg, transparent 0 28%, #dfe8ff 28% 31%, transparent 31% 39%, #dfe8ff 39% 42%, transparent 42% 48%, #dfe8ff 48% 51%, transparent 51% 100%); clip-path: polygon(0 85%, 10% 71%, 18% 78%, 27% 45%, 36% 57%, 44% 23%, 51% 46%, 62% 31%, 70% 43%, 78% 21%, 87% 29%, 95% 12%, 100% 19%, 100% 100%, 0 100%); background-color: #edf2ff; }.platform-chart.filled .platform-chart-line { height: 235px; }.platform-axis { display: flex; justify-content: space-between; padding-top: 7px; color: #8c9ab0; font: 9px 'DM Mono',monospace; }.platform-table { display: flex; flex-direction: column; }.platform-table-row { display: grid; grid-template-columns: 32px minmax(180px,1fr) 120px 120px 80px; gap: 13px; align-items: center; min-height: 59px; padding: 8px 0; border-bottom: 1px solid #edf0f5; }.platform-table-row:last-child { border-bottom: 0; }.platform-table-row > b { color: #22304b; font-size: 11px; }.platform-table-row > button { color: #2d60dc; background: transparent; text-align: right; font-size: 10px; }.platform-avatar { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 8px; color: #315bdd; background: #e8edff; font-size: 9px; font-weight: 700; }.platform-org-name b,.platform-org-name small { display: block; }.platform-org-name b { color: #29364e; font-size: 11px; }.platform-org-name small { margin-top: 3px; color: #8290a3; font-size: 9px; }.platform-status { display: inline-flex; align-items: center; justify-self: start; gap: 5px; padding: 5px 9px; border-radius: 13px; color: #2b61da; background: #e8efff; font-size: 9px; }.platform-status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }.platform-trialing { color: #a87822; background: #fff5e1; }.platform-past_due,.platform-suspended { color: #c34e43; background: #fff0ed; }.platform-comped { color: #667894; background: #eef1f7; }
.platform-search { display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 15px; margin-bottom: 15px; border: 1px solid #dbe3ed; border-radius: 9px; background: #fff; }.platform-search span { color: #73819a; font-size: 20px; }.platform-search input { min-width: 0; flex: 1; border: 0; outline: 0; color: #26334c; font-size: 11px; }.platform-search button { padding: 8px 12px; border-radius: 6px; color: #2d60dc; background: #edf2ff; font-size: 10px; }.platform-org-list { display: flex; flex-direction: column; gap: 12px; }.platform-org-card { padding: 20px 22px; border: 1px solid #dce3ed; border-radius: 10px; background: #fff; box-shadow: 0 4px 15px rgba(35,56,92,.035); }.platform-org-top { display: flex; align-items: start; justify-content: space-between; gap: 15px; }.platform-org-top h2 { margin: 0; color: #19253d; font-size: 15px; }.platform-org-top p { margin: 6px 0 0; color: #7e8ca1; font-size: 10px; }.platform-org-meta { display: flex; flex-wrap: wrap; gap: 9px 20px; padding: 14px 0; color: #68768e; font-size: 10px; }.plan-tag { color: #315bdd; font-weight: 700; text-transform: capitalize; }.platform-org-actions { display: flex; flex-wrap: wrap; gap: 7px; padding-top: 13px; border-top: 1px solid #edf0f5; }.platform-org-actions button { padding: 8px 11px; border: 1px solid #cad6ed; border-radius: 6px; color: #324665; background: #f6f8fc; font-size: 10px; }.platform-org-actions button:hover { border-color: #7396eb; color: #234bc3; }.platform-org-actions button.danger { color: #b94d45; border-color: #f0c1bb; background: #fff7f5; }.platform-empty { padding: 40px; color: #7c8aa0; background: #fff; text-align: center; }
.price-list { display: flex; flex-direction: column; gap: 0; }.price-list div { display: flex; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid #edf0f5; color: #4d5d77; font-size: 12px; }.price-list div:last-child { border-bottom: 0; }.price-list strong { color: #2d60dc; }.usage-card { margin-bottom: 12px; }.usage-line { display: grid; grid-template-columns: 1fr auto; gap: 7px; margin-top: 14px; color: #65748d; font-size: 10px; }.usage-line b { color: #2c5be1; font-size: 10px; }.usage-line i { grid-column: 1 / -1; height: 6px; overflow: hidden; border-radius: 6px; background: #e5eaf2; }.usage-line em,.storage-row + i em { display: block; height: 100%; border-radius: inherit; background: #315bdd; }.usage-line em.purple-fill { background: #7a67c2; }.usage-line em.gold-fill { background: #b58a39; }.platform-users-summary { display: flex; align-items: center; gap: 11px; padding-bottom: 15px; margin-bottom: 8px; border-bottom: 1px solid #edf0f5; }.platform-users-summary strong { color: #2d5cdf; font: 700 29px 'Playfair Display',serif; }.platform-users-summary span { flex: 1; color: #718099; font-size: 10px; }.platform-users-summary button { color: #2d60dc; background: transparent; font-size: 10px; }.user-school { color: #63728b; font-size: 10px; }.storage-total { display: flex; align-items: center; justify-content: space-between; }.storage-total strong,.storage-total small { display: block; }.storage-total strong { margin-top: 6px; font: 700 28px 'Playfair Display',serif; }.storage-total small { color: #75849b; font-size: 10px; }.storage-total > b { color: #2d60dc; font-size: 14px; }.storage-row { display: flex; align-items: center; justify-content: space-between; }.storage-row strong { font: 700 20px 'Playfair Display',serif; }.storage-row span { color: #2d60dc; font-size: 10px; }.storage-row + i { display: block; height: 6px; overflow: hidden; margin-top: 13px; border-radius: 4px; background: #e7ebf2; }.push-summary { display: flex; align-items: center; gap: 22px; }.push-ring { display: grid; place-items: center; width: 94px; height: 94px; border: 10px solid #dbe4ef; border-right-color: #c95a48; border-radius: 50%; color: #1a2942; font-size: 19px; font-weight: 700; }.push-summary strong { font-size: 14px; }.push-summary p { max-width: 450px; margin: 7px 0 0; color: #728098; font-size: 10px; }.health-lines { display: flex; flex-direction: column; }.health-lines div { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid #edf0f5; color: #60708b; font-size: 11px; }.health-lines div:last-child { border-bottom: 0; }.full-alerts { padding: 0 8px; border: 1px solid #dce3ed; border-radius: 9px; background: #fff; }.support-shop-list { display: flex; flex-direction: column; }.support-shop-list button { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 13px 4px; border-bottom: 1px solid #edf0f5; color: #33425d; background: transparent; text-align: left; }.support-shop-list button:last-child { border-bottom: 0; }.support-shop-list b,.support-shop-list small { display: block; }.support-shop-list b { font-size: 11px; }.support-shop-list small { margin-top: 3px; color: #8390a5; font-size: 9px; }.audit-dot { color: #2d60dc; font-size: 22px; }.report-options { padding: 0 20px; }.report-options button { display: grid; grid-template-columns: 30px 1fr auto; gap: 11px; align-items: center; width: 100%; padding: 17px 0; border-bottom: 1px solid #edf0f5; color: #33425d; background: transparent; text-align: left; }.report-options button:last-child { border-bottom: 0; }.report-options button > span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 7px; color: #2d60dc; background: #e9efff; font: 10px 'DM Mono',monospace; }.report-options b,.report-options small { display: block; }.report-options b { font-size: 11px; }.report-options small { margin-top: 4px; color: #7d8ba0; font-size: 9px; }.report-options i { color: #8d9bb0; font-size: 20px; }.platform-primary-action { width: 100%; padding: 14px; border-radius: 7px; color: #fff; background: #315bdd; font-size: 12px; }.platform-plan-editor { display: flex; flex-direction: column; }.platform-plan-editor label { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 13px 0; border-bottom: 1px solid #edf0f5; }.platform-plan-editor b,.platform-plan-editor small { display: block; }.platform-plan-editor b { color: #2b3b57; font-size: 11px; text-transform: capitalize; }.platform-plan-editor small { margin-top: 3px; color: #8290a4; font-size: 9px; }.platform-plan-editor input { width: 110px; padding: 8px; border: 1px solid #dbe3ed; border-radius: 5px; color: #2d60dc; font-size: 10px; text-align: right; }.outreach-hero { display: grid; grid-template-columns: 1fr auto; gap: 18px; }.outreach-hero h2 { margin: 0; font-size: 16px; }.outreach-hero p { margin: 4px 0 0; color: #738199; font-size: 10px; }.outreach-hero > button { justify-self: start; padding: 8px 0; color: #a07c37; background: transparent; font-size: 11px; }.outreach-stats { display: flex; grid-column: 1 / -1; gap: 39px; padding: 19px 0 8px; border-top: 1px solid #edf0f5; }.outreach-stats b,.outreach-stats small { display: block; }.outreach-stats b { font-size: 19px; }.outreach-stats small { margin-top: 4px; color: #7c899e; font-size: 8px; text-transform: uppercase; }.funnel-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; }.funnel-grid div { padding: 16px; border-radius: 7px; background: #f0f4ff; }.funnel-grid b,.funnel-grid span { display: block; }.funnel-grid b { color: #1e3157; font: 700 22px 'Playfair Display',serif; }.funnel-grid span { margin-top: 5px; color: #72819b; font-size: 9px; text-transform: uppercase; }.outreach-funnel { grid-template-columns: repeat(5,1fr); }.outreach-note { padding: 15px; border-radius: 7px; color: #61718a; background: #f3f6fb; font-size: 10px; }.outreach-note b { color: #2b3a55; }.outreach-note p { margin: 5px 0 0; line-height: 1.6; }
@media (max-width: 900px) { .platform-sidebar { flex-basis: 68px; }.platform-brand div,.platform-sidebar nav > small,.platform-nav-item span:not(.nav-glyph),.platform-nav-item em,.platform-side-foot span:not(.avatar),.platform-logout { display: none; }.platform-brand { justify-content: center; padding: 12px 8px; }.platform-nav-item { justify-content: center; padding: 11px 0; }.platform-content { width: calc(100% - 32px); padding-top: 25px; }.platform-kpi-grid { grid-template-columns: repeat(3,1fr); }.platform-grid-two { grid-template-columns: 1fr; }.platform-table-row { grid-template-columns: 32px minmax(125px,1fr) 90px 75px; }.platform-table-row > button { display: none; }.platform-org-meta { gap: 8px 13px; }.outreach-stats { gap: 15px; overflow-x: auto; }.funnel-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .platform-topbar { padding: 0 16px; }.platform-live { display: none; }.platform-page-head { align-items: start; flex-direction: column; }.platform-page-head h1 { font-size: 26px; }.platform-kpi-grid,.platform-summary-strip,.platform-billing-kpis { grid-template-columns: repeat(2,1fr); }.platform-metric { min-height: 70px; padding: 14px; }.platform-metric strong { font-size: 21px; }.platform-table-row { grid-template-columns: 30px 1fr 85px; }.platform-table-row > :nth-child(4) { display: none; }.platform-org-card { padding: 16px; }.platform-org-actions button { flex: 1 0 auto; }.storage-total { align-items: start; flex-direction: column; gap: 12px; }.outreach-hero { display: block; }.outreach-hero > .platform-status { margin-top: 12px; }.outreach-stats { display: grid; grid-template-columns: repeat(2,1fr); }.outreach-funnel { grid-template-columns: repeat(2,1fr); } }