:root {
  color-scheme: light;
  --ink: #172536;
  --muted: #778595;
  --muted-dark: #586879;
  --line: #e5eaf0;
  --surface: #ffffff;
  --surface-soft: #f7f9fb;
  --page: #f4f6f8;
  --green: #18795d;
  --green-dark: #12634c;
  --green-bright: #35aa83;
  --green-pale: #e7f6ef;
  --amber: #d89647;
  --red: #bd5c59;
  --shadow: 0 12px 34px rgba(25, 43, 60, .055), 0 1px 3px rgba(25, 43, 60, .035);
  font-family: 'DM Sans', 'Segoe UI', sans-serif;
  background: var(--page);
  color: var(--ink);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--page); }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
.app-shell { max-width: 1600px; margin: 0 auto; padding: 0 36px 0; }
.topbar { min-height: 75px; border-bottom: 1px solid #e7ebef; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: #23384a; text-decoration: none; font: 800 17px 'Manrope', sans-serif; letter-spacing: -.65px; }
.brand-light { font-weight: 500; color: #678073; }
.brand-mark { width: 25px; height: 25px; display: grid; grid-template-columns: repeat(2,1fr); gap: 3px; transform: rotate(-8deg); }
.brand-mark i { background: #1a8464; border-radius: 4px 4px 2px 4px; }
.brand-mark i:nth-child(2) { opacity: .66; border-radius: 4px 4px 4px 2px; }
.brand-mark i:nth-child(3) { opacity: .48; border-radius: 4px 2px 4px 4px; }
.brand-mark i:nth-child(4) { opacity: .82; border-radius: 2px 4px 4px 4px; }
.topbar-right { display: flex; align-items: center; gap: 7px; }
.save-state { display: inline-flex; align-items: center; gap: 7px; color: #738293; font-size: 11px; margin-right: 5px; }
.save-dot { width: 7px; height: 7px; background: #42a47c; border-radius: 50%; box-shadow: 0 0 0 3px #e1f4ea; }
.quiet-button { border: 0; background: transparent; color: #68798a; cursor: pointer; font-size: 11px; font-weight: 600; padding: 8px 10px; border-radius: 7px; }
.quiet-button:hover { background: #e9eef1; color: var(--ink); }
.import-backup { position: relative; overflow: hidden; }
.import-backup input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
main { padding-bottom: 10px; }
.intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 37px 2px 25px; }
.eyebrow { color: #55806e; font-size: 9px; line-height: 1.2; font-weight: 700; letter-spacing: 1.45px; text-transform: uppercase; margin: 0 0 8px; }
h1,h2,h3,p { margin-top: 0; }
h1,h2,h3 { font-family: 'Manrope', 'DM Sans', sans-serif; }
h1 { font-size: clamp(29px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -1.8px; margin: 0 0 9px; font-weight: 700; }
.intro-text { color: #758392; font-size: 13px; margin: 0; letter-spacing: .01em; }
.intro-badge { display: flex; align-items: center; gap: 9px; color: #80908a; font-size: 10px; padding: 9px 12px; border: 1px solid #e4e9e8; border-radius: 99px; margin: 0 3px 1px 0; white-space: nowrap; }
.badge-icon { color: #268664; font-size: 17px; line-height: 1; }
.control-panel { display: grid; grid-template-columns: 1.08fr 1.1fr 1.05fr .87fr; gap: 18px; padding: 17px 19px 15px; background: var(--surface); border: 1px solid #e9edf1; border-radius: 11px; box-shadow: 0 3px 9px rgba(25,43,60,.025); margin-bottom: 23px; }
.control-field { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.control-field label, .person-editor-bar label { color: #68798a; font-size: 10px; font-weight: 700; letter-spacing: .25px; }
.control-field input, .control-field select, .person-editor-bar input { height: 34px; min-width: 0; border: 1px solid #e4e9ee; border-radius: 6px; padding: 0 10px; color: #233548; font-size: 12px; font-weight: 600; outline: none; background: #fff; }
.control-field input:focus, .control-field select:focus, .person-editor-bar input:focus, .search-box:focus-within { border-color: #75b79d; box-shadow: 0 0 0 3px rgba(42,143,106,.09); }
.control-field small { color: #9aa5b0; font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.control-field .zone-help, .person-editor-bar .zone-help { color: #9aa5b0; font-size: 8px; line-height: 1.35; white-space: normal; }
.input-with-icon { display: flex; align-items: center; position: relative; }
.input-with-icon > span { color: #53846d; position: absolute; left: 10px; z-index: 1; font-size: 14px; pointer-events: none; }
.input-with-icon input { width: 100%; padding-left: 31px; }
.duration-field select { font-size: 13px; color: var(--green-dark); font-weight: 700; }

.main-layout { display: grid; grid-template-columns: minmax(245px, 278px) minmax(0, 1fr); gap: 21px; align-items: start; }
.panel { background: var(--surface); border: 1px solid #e8edf1; border-radius: 10px; box-shadow: var(--shadow); }
.people-panel { overflow: hidden; padding: 18px 14px 12px; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.people-heading { align-items: center; padding: 0 3px; }
.panel-heading h2 { font-size: 18px; line-height: 1.2; letter-spacing: -.55px; margin: 0; font-weight: 700; }
.people-heading .eyebrow { margin-bottom: 4px; }
.count-pill { display: inline-flex; vertical-align: 2px; align-items: center; justify-content: center; min-width: 20px; height: 19px; padding: 0 5px; background: #edf4f0; color: #50816b; font: 700 10px 'DM Sans', sans-serif; border-radius: 20px; margin-left: 4px; }
.icon-button { display: inline-grid; place-items: center; border: 0; width: 29px; height: 29px; color: white; font-size: 21px; line-height: 1; cursor: pointer; background: #218466; border-radius: 7px; box-shadow: 0 3px 7px rgba(26,119,88,.18); }
.icon-button:hover { background: #176e52; transform: translateY(-1px); }
.people-summary { padding: 12px 4px 10px; color: #93a09e; font-size: 10px; border-bottom: 1px solid #f0f2f4; }
.people-summary span { font-weight: 700; color: #36795e; }
.search-box { margin: 11px 1px 9px; height: 34px; border: 1px solid #e8edf0; border-radius: 6px; display: flex; align-items: center; gap: 7px; padding: 0 9px; color: #98a4ad; transition: border .15s,box-shadow .15s; }
.search-box > span { font-size: 18px; line-height: 1; transform: rotate(-20deg); }
.search-box input { width: 100%; min-width: 0; border: 0; outline: 0; font-size: 11px; color: var(--ink); background: transparent; }
.search-box input::placeholder { color: #a5afb8; }
.people-list { display: flex; flex-direction: column; gap: 4px; max-height: 430px; overflow-y: auto; padding-right: 2px; scrollbar-color: #dce4e6 transparent; scrollbar-width: thin; }
.person-row { display: grid; grid-template-columns: minmax(0,1fr) 24px; align-items: center; padding: 2px 4px; border: 1px solid transparent; border-radius: 7px; min-height: 46px; }
.person-row.leader-controls { grid-template-columns: minmax(0,1fr) 24px auto; }
.person-row:hover { background: #f7faf8; }
.person-row.selected { background: #eef7f2; border-color: #dbeee3; }
.person-select { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 4px 0; background: transparent; border: 0; text-align: left; cursor: pointer; }
.avatar { display: inline-grid; flex: 0 0 29px; place-items: center; width: 29px; height: 29px; border-radius: 50%; color: #3e7863; font: 700 10px 'Manrope',sans-serif; background: #e6f1ea; }
.avatar.color-1 { color: #856c4b; background: #f4eee2; }
.avatar.color-2 { color: #5e6f97; background: #e9edf7; }
.avatar.color-3 { color: #8b6275; background: #f4e9ef; }
.avatar.color-4 { color: #4f7880; background: #e7f0f1; }
.avatar.color-5 { color: #756995; background: #efebf5; }
.person-copy { display: flex; flex-direction: column; min-width: 0; gap: 3px; }
.person-name { color: #344559; font-size: 11px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-meta { display: -webkit-box; color: #9aa5ae; font-size: 9px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.person-row.selected .person-name { color: #256c53; }
.include-check { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; height: 25px; }
.include-check input { position: absolute; opacity: 0; pointer-events: none; }
.include-box { width: 14px; height: 14px; border: 1.5px solid #cbd5d8; border-radius: 4px; background: white; display: inline-grid; place-items: center; color: white; font-size: 10px; line-height: 1; }
.include-check input:checked + .include-box { background: #288365; border-color: #288365; }
.include-check input:checked + .include-box::after { content: '✓'; }
.include-check input:focus-visible + .include-box { outline: 3px solid #cae7d8; }
.person-invite-button { border: 1px solid #dce7e1; background: #f5faf7; color: #39795f; font-size: 9px; font-weight: 700; padding: 5px 7px; border-radius: 5px; cursor: pointer; }
.person-invite-button:hover { border-color: #a9cfba; background: #eef7f2; }
.person-invite-button:disabled { opacity: .55; cursor: wait; }
.person-self-tag { color: #438064; font-size: 8px; font-weight: 800; letter-spacing: .06em; }
.person-row { min-height: 52px; }
.person-row.no-match, .no-people-results { color: #9ba7b0; font-size: 11px; padding: 17px 8px; text-align: center; }
.list-footnote { color: #a1acb5; font-size: 9px; min-height: 12px; margin: 5px 4px 7px; }
.bulk-add { border-top: 1px solid #edf0f2; padding: 11px 4px 0; }
.bulk-add summary { color: #527c69; font-size: 10px; font-weight: 700; cursor: pointer; list-style-position: inside; }
.bulk-add p { margin: 9px 0 6px; color: #84919d; font-size: 9px; line-height: 1.45; }
.bulk-add textarea { display: block; resize: vertical; width: 100%; min-height: 76px; border: 1px solid #e5eaed; border-radius: 5px; padding: 8px; color: #425365; font-size: 10px; outline: none; }
.bulk-add textarea:focus { border-color: #75b79d; }
.bulk-add small { display: block; color: #a0aab3; font-size: 8px; margin-top: 7px; line-height: 1.4; }
.subtle-button { border: 1px solid #dce7e1; background: #f5faf7; color: #39795f; font-size: 10px; font-weight: 700; padding: 7px 10px; border-radius: 5px; cursor: pointer; }
.subtle-button:hover { border-color: #badbc9; background: #eaf6ef; }
.people-footer { border-top: 1px solid #edf0f2; margin-top: 12px; padding: 11px 3px 0; color: #9aa6ae; font-size: 9px; }
.mini-check { display: inline-grid; place-items: center; width: 14px; height: 14px; margin-right: 4px; border-radius: 50%; color: #378563; font-size: 9px; background: #e6f4eb; }

.work-panel { min-width: 0; }
.view-switch { display: inline-flex; align-items: center; gap: 3px; padding: 3px; margin: -2px 0 10px 3px; background: #e9edf0; border-radius: 7px; }
.view-tab { border: 0; padding: 7px 13px; color: #798694; background: transparent; font-size: 10px; font-weight: 700; border-radius: 5px; cursor: pointer; }
.view-tab:hover { color: #435264; }
.view-tab.active { background: white; color: #2e7357; box-shadow: 0 1px 4px rgba(28,47,59,.1); }
.tab-spark { margin-left: 3px; color: #d39c48; }
.overlap-view, .edit-view { padding: 20px 20px 16px; }
.map-heading { align-items: flex-end; margin-bottom: 16px; }
.map-heading h2, .edit-heading h2 { font-size: 20px; margin-bottom: 5px; letter-spacing: -.7px; }
.map-heading .eyebrow, .edit-heading .eyebrow { margin-bottom: 5px; }
.section-subtitle { color: #96a1ac; margin: 0; font-size: 10px; }
.map-legend { display: flex; gap: 12px; align-items: center; padding: 0 0 2px; white-space: nowrap; }
.map-legend span, .editor-legend span { display: inline-flex; align-items: center; gap: 5px; color: #8b97a2; font-size: 9px; }
.legend-dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.legend-dot.low { background: #dfe9e4; }
.legend-dot.mid { background: #87c6a7; }
.legend-dot.high { background: #228463; }
.heatmap-scroll, .editor-scroll { width: 100%; max-height: 564px; overflow: auto; border: 1px solid #e9eef1; border-radius: 7px; scrollbar-color: #d7e2df #f8fafb; scrollbar-width: thin; }
.heatmap-grid { display: grid; grid-template-columns: 48px repeat(7, minmax(44px,1fr)); min-width: 510px; }
.heat-head { position: sticky; top: 0; z-index: 5; background: #fafcfc; height: 40px; display: flex; align-items: center; justify-content: center; color: #70808d; border-bottom: 1px solid #e9eef1; font-size: 9px; font-weight: 700; box-shadow: 0 1px 2px rgba(35,53,70,.025); }
.heat-head:first-child { left: 0; z-index: 7; background: #fafcfc; }
.heat-head span { display: block; text-align: center; line-height: 1.3; }
.heat-head b { display: block; color: #a3adb6; font-weight: 500; font-size: 8px; }
.time-label { position: sticky; left: 0; z-index: 2; display: flex; align-items: flex-start; justify-content: center; padding-top: 1px; height: 14px; color: #9aa6b0; background: #fff; border-right: 1px solid #edf0f2; font-size: 8px; }
.interval-15 .time-label { height: 13px; }
.interval-60 .time-label { height: 34px; padding-top: 5px; }
.heat-cell { border: 0; margin: 1px; border-radius: 2px; min-width: 0; padding: 0; background: #f0f3f4; position: relative; height: 13px; cursor: default; transition: filter .1s, transform .1s; }
.heat-cell:hover { z-index: 1; filter: brightness(.94); outline: 1px solid #84998f; }
.interval-60 .heat-cell { height: 34px; margin: 2px 2px; border-radius: 3px; }
.heat-cell.gap { background: repeating-linear-gradient(135deg,#f8f9fa,#f8f9fa 3px,#e9edf0 3px,#e9edf0 5px) !important; }
.heat-cell.everyone { box-shadow: inset 0 0 0 1px #207956; }
.heat-cell > span { display: none; }
.interval-60 .heat-cell > span { display: block; color: rgba(28,68,53,.68); font-size: 8px; font-weight: 700; }
.map-keyline { display: flex; justify-content: space-between; gap: 10px; padding: 9px 2px 0; color: #a0aab2; font-size: 8px; }
.key-swatch { vertical-align: -1px; display: inline-block; width: 10px; height: 9px; border-radius: 2px; margin-right: 4px; background: #6bb791; }
.overlap-view-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: -4px 0 12px; }
.schedule-mode-switch { display: inline-flex; align-items: center; gap: 3px; padding: 3px; background: #eef2f1; border-radius: 7px; }
.schedule-mode-button { border: 0; padding: 7px 11px; color: #798694; background: transparent; font-size: 9px; font-weight: 700; border-radius: 5px; cursor: pointer; }
.schedule-mode-button:hover { color: #435264; }
.schedule-mode-button.active { color: #2e7357; background: #fff; box-shadow: 0 1px 4px rgba(28,47,59,.1); }
.day-date-control { display: flex; align-items: center; gap: 7px; color: #87938f; font-size: 9px; font-weight: 600; }
.day-date-control input { height: 32px; padding: 0 8px; border: 1px solid #e4ebe7; border-radius: 5px; color: #53645c; background: #fff; font: inherit; }
.day-compare-scroll { width: 100%; max-height: 564px; overflow: auto; border: 1px solid #e9eef1; border-radius: 7px; scrollbar-color: #d7e2df #f8fafb; scrollbar-width: thin; }
.day-compare-grid { min-width: 790px; padding: 0 10px; }
.day-axis-row, .day-person-row { display: grid; grid-template-columns: minmax(125px, 145px) minmax(600px, 1fr); gap: 8px; align-items: center; min-width: 770px; }
.day-axis-row { position: sticky; top: 0; z-index: 5; min-height: 37px; background: #fafcfc; border-bottom: 1px solid #e9eef1; }
.day-person-row { min-height: 46px; border-bottom: 1px solid #f0f3f2; }
.day-person-label { position: sticky; left: 0; z-index: 2; display: flex; min-width: 0; flex-direction: column; gap: 2px; padding: 4px 6px; background: #fff; }
.day-axis-name { z-index: 7; color: #86938f; background: #fafcfc; font-size: 8px; font-weight: 700; }
.day-person-label strong { overflow: hidden; color: #42534b; font-size: 9px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.day-person-label small { overflow: hidden; color: #9ba6a1; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.day-axis-track { position: relative; height: 36px; }
.day-hour-label { position: absolute; top: 11px; transform: translateX(2px); color: #86938f; font-size: 8px; white-space: nowrap; }
.day-time-track { position: relative; height: 28px; overflow: hidden; border-radius: 4px; background-color: #fafcfc; background-image: linear-gradient(to right, #e7ece9 1px, transparent 1px); }
.day-time-range { position: absolute; top: 5px; bottom: 5px; min-width: 1px; border-radius: 3px; background: #72bd94; }
.everyone-track { background-color: #f7faf8; }
.everyone-track .day-time-range { background: #207956; }
.day-overlap-row { background: #fbfdfb; border-bottom-color: #e7eee9; }
.day-overlap-row .day-person-label, .day-overlap-row .day-axis-name { background: #fbfdfb; }
.day-overlap-row .day-person-label strong { color: #267555; }
.day-person-row.excluded .day-person-label strong { color: #9ca5a0; }
.person-track .day-time-range { opacity: .82; }
.day-person-row.excluded .day-time-range { opacity: .28; }
.day-view-note { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 9px 2px 0; color: #99a59f; font-size: 8px; }
.everyone-key { background: #207956; }
.empty-group { padding: 22px; margin: 5px 0 12px; border: 1px dashed #dce5e4; border-radius: 7px; color: #85938f; background: #f9fbfa; font-size: 11px; text-align: center; }
.results-section { margin-top: 23px; border-top: 1px solid #edf0f2; padding-top: 17px; }
.results-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.results-heading .eyebrow { margin-bottom: 4px; }
.results-heading h3 { margin: 0; font-size: 15px; letter-spacing: -.35px; }
.result-count { color: #7f8c98; background: #f2f5f5; border-radius: 99px; padding: 5px 9px; font-size: 9px; font-weight: 700; white-space: nowrap; }
.result-count.has-results { color: #277456; background: #e8f5ed; }
.window-results { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.window-card { border: 1px solid #e5eee8; background: linear-gradient(110deg,#f8fcf9,#fff); border-radius: 7px; padding: 10px 11px; min-width: 0; }
.window-card-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 5px; }
.window-date { color: #55806a; font-size: 9px; font-weight: 700; }
.window-length { color: #87948e; font-size: 8px; white-space: nowrap; }
.window-time { color: #263d37; font: 700 12px 'Manrope',sans-serif; letter-spacing: -.2px; overflow-wrap: anywhere; }
.window-time small { font: 500 9px 'DM Sans',sans-serif; color: #798c82; }
.empty-results { display: flex; align-items: flex-start; gap: 11px; padding: 13px; background: #fbfaf7; border: 1px solid #f0ece3; border-radius: 7px; }
.empty-results .empty-icon { color: #bd8c4d; font-size: 15px; }
.empty-results strong { display: block; margin-bottom: 4px; color: #5c5549; font-size: 10px; }
.empty-results p { margin: 0; color: #928a7e; line-height: 1.5; font-size: 9px; }
.more-results { grid-column: 1 / -1; color: #94a09d; font-size: 9px; margin: 2px 1px; }
.timezone-note { margin: 13px 0 0; padding: 10px 11px; border-radius: 6px; background: #f6f8f9; color: #8c99a3; font-size: 9px; }
.timezone-note > span { color: #629176; font-size: 12px; margin-right: 4px; }
.timezone-note strong { color: #5f7469; font-weight: 600; }

.edit-heading { margin-bottom: 18px; }
.person-editor-bar { display: grid; grid-template-columns: minmax(120px,1fr) minmax(210px,1.3fr) auto; gap: 12px; align-items: end; padding: 13px; background: #f8faf9; border: 1px solid #edf1ef; border-radius: 7px; }
.person-editor-bar > div:not(.editor-actions) { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.person-editor-bar input { width: 100%; height: 33px; font-size: 11px; }
.profile-fields { display: grid; grid-template-columns: minmax(120px,.35fr) minmax(0,1fr); gap: 12px; align-items: stretch; margin: 10px 0; }
.prestige-field { display: flex; flex-direction: column; gap: 6px; color: #68798a; font-size: 10px; font-weight: 700; }
.prestige-field input { width: 100%; height: 34px; border: 1px solid #e4e9ee; border-radius: 6px; padding: 0 10px; color: #233548; font: 600 11px 'Manrope',sans-serif; outline: none; }
.prestige-field input:focus { border-color: #75b79d; box-shadow: 0 0 0 3px rgba(42,143,106,.09); }
.role-selector { min-width: 0; margin: 0; padding: 8px 10px 10px; border: 1px solid #e9eef1; border-radius: 7px; }
.role-selector legend { padding: 0 5px; color: #68798a; font-size: 10px; font-weight: 700; }
.role-choice-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px 8px; }
.role-option { display: inline-flex; align-items: center; gap: 5px; min-width: 0; color: #596c79; font-size: 9px; cursor: pointer; }
.role-option input { width: 13px; height: 13px; margin: 0; accent-color: #288365; }
.request-role-selector { margin-bottom: 16px; }
.editor-actions { display: flex; align-items: center; gap: 6px; }
.danger-button { background: transparent; border: 1px solid transparent; border-radius: 5px; color: #b17875; font-size: 9px; padding: 7px 8px; cursor: pointer; }
.danger-button:hover { color: #a84945; background: #fcf0ef; border-color: #f3dddb; }
.editor-hint { display: flex; align-items: center; gap: 8px; margin: 13px 2px; color: #8a969f; font-size: 9px; }
.editor-hint strong { color: #567765; }
.hint-sun { display: inline-grid; place-items: center; width: 19px; height: 19px; color: #a98247; background: #fbf4e8; border-radius: 50%; font-size: 12px; }
.editor-legend { display: flex; align-items: center; justify-content: space-between; margin: 14px 2px 8px; }
.edit-available { display: inline-block; width: 10px; height: 9px; border-radius: 2px; background: #60b58b; }
.editor-grid { display: grid; grid-template-columns: 48px repeat(7,minmax(44px,1fr)); min-width: 510px; touch-action: none; user-select: none; }
.editor-head { position: sticky; top: 0; z-index: 5; display: grid; place-items: center; height: 36px; color: #71828e; background: #fafcfc; border-bottom: 1px solid #e9eef1; font-size: 9px; font-weight: 700; }
.editor-head:first-child { left: 0; z-index: 7; }
.editor-time { position: sticky; left: 0; z-index: 2; display: flex; justify-content: center; padding-top: 1px; height: 13px; color: #9ca8b0; background: white; border-right: 1px solid #edf0f2; font-size: 8px; }
.interval-60.editor-grid .editor-time { height: 32px; padding-top: 5px; }
.availability-cell { border: 0; padding: 0; min-width: 0; height: 13px; margin: 1px; border-radius: 2px; background: #f0f3f4; cursor: crosshair; touch-action: none; }
.availability-cell:hover { background: #dcebe2; }
.availability-cell.on { background: #63b78d; box-shadow: inset 0 0 0 1px rgba(36,124,82,.1); }
.availability-cell.on:hover { background: #4ca77b; }
.interval-60.editor-grid .availability-cell { height: 32px; margin: 2px; border-radius: 3px; }
.editor-footer { display: flex; justify-content: space-between; gap: 12px; padding: 11px 2px 0; color: #9ba7ae; font-size: 9px; }
.editor-footer span:first-child { color: #4a8066; font-weight: 700; }
.editor-empty { min-height: 210px; display: grid; place-items: center; color: #92a09b; font-size: 11px; text-align: center; }
.editor-empty div { max-width: 260px; }
.page-footer { display: flex; justify-content: space-between; padding: 20px 2px 15px; color: #a3adb3; font-size: 8px; letter-spacing: .15px; }
.page-footer span:first-child { color: #7e9889; font-weight: 700; letter-spacing: 1.4px; }
[hidden] { display: none !important; }

@media (min-width: 1440px) {
  .app-shell { padding-left: 54px; padding-right: 54px; }
  .control-panel { gap: 24px; padding-left: 24px; padding-right: 24px; }
  .overlap-view,.edit-view { padding-left: 25px; padding-right: 25px; }
  .heatmap-grid,.editor-grid { grid-template-columns: 54px repeat(7,minmax(50px,1fr)); }
  .heat-cell, .interval-15 .time-label, .availability-cell, .editor-time { height: 15px; }
}
@media (max-width: 950px) {
  .app-shell { padding-left: 20px; padding-right: 20px; }
  .control-panel { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .main-layout { grid-template-columns: 225px minmax(0,1fr); gap: 14px; }
  .people-panel { padding-left: 10px; padding-right: 10px; }
  .overlap-view,.edit-view { padding: 16px 14px 14px; }
  .map-legend { gap: 7px; }
}
@media (max-width: 690px) {
  .app-shell { padding: 0 12px; }
  .topbar { min-height: 61px; padding: 8px 0; flex-wrap: wrap; }
  .brand { font-size: 15px; }
  .topbar-right { gap: 2px; flex-wrap: wrap; justify-content: flex-end; }
  .save-state { font-size: 0; margin: 0 7px 0 0; }
  .quiet-button { font-size: 9px; padding: 7px 5px; }
  .intro { padding: 26px 2px 19px; align-items: flex-start; }
  h1 { font-size: 30px; letter-spacing: -1.25px; }
  .intro-text { max-width: 450px; line-height: 1.5; font-size: 11px; }
  .intro-badge { display: none; }
  .control-panel { gap: 12px; padding: 13px; margin-bottom: 15px; }
  .control-field small { font-size: 8px; }
  .main-layout { display: flex; flex-direction: column; }
  .people-panel { width: 100%; }
  .people-list { max-height: 200px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .work-panel { width: 100%; }
  .view-switch { margin-top: 0; }
  .window-results { grid-template-columns: 1fr; }
  .map-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
  .map-legend { padding-bottom: 0; }
  .person-editor-bar { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .editor-actions { justify-content: flex-end; grid-column: 1 / -1; }
  .page-footer { font-size: 7px; }
}
@media (max-width: 420px) {
  .control-panel { grid-template-columns: 1fr 1fr; gap: 11px 9px; }
  .control-field label { font-size: 9px; }
  .control-field input,.control-field select { height: 32px; font-size: 10px; padding-left: 7px; padding-right: 5px; }
  .input-with-icon input { padding-left: 27px; }
  .control-field small { white-space: normal; min-height: 20px; }
  .people-list { grid-template-columns: 1fr; }
  .overlap-view,.edit-view { padding: 14px 10px 12px; }
  .map-keyline { flex-direction: column; gap: 4px; }
  .person-editor-bar { grid-template-columns: 1fr; }
  .editor-actions { grid-column: auto; }
}

.modal-dialog { width: min(760px, calc(100vw - 24px)); max-width: 760px; max-height: min(92vh, 900px); padding: 0; border: 1px solid #e3eae6; border-radius: 13px; color: var(--ink); background: #fff; box-shadow: 0 24px 80px rgba(20,38,30,.22); }
.modal-dialog::backdrop { background: rgba(26,39,34,.42); backdrop-filter: blur(2px); }
.modal-card { padding: 21px; max-height: min(92vh, 900px); overflow-y: auto; }
.modal-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 17px; }
.modal-heading .eyebrow { margin: 0 0 5px; }
.modal-heading h2 { margin: 0; font-size: 20px; letter-spacing: -.4px; }
.modal-heading p:not(.eyebrow) { margin: 7px 0 0; max-width: 570px; color: #7d8b94; font-size: 11px; line-height: 1.5; }
.modal-close { flex: 0 0 30px; width: 30px; height: 30px; border: 0; border-radius: 6px; color: #708079; background: #f3f6f4; font-size: 22px; line-height: 1; cursor: pointer; }
.request-fields { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; margin: 14px 0 18px; }
.request-fields label,.request-grid-heading label { display: flex; flex-direction: column; gap: 6px; color: #68798a; font-size: 10px; font-weight: 700; }
.request-fields input,.request-grid-heading select { width: 100%; height: 35px; border: 1px solid #e4e9ee; border-radius: 6px; padding: 0 10px; color: #233548; background: #fff; font: 600 11px 'Manrope',sans-serif; outline: none; }
.request-fields input:focus,.request-grid-heading select:focus { border-color: #75b79d; box-shadow: 0 0 0 3px rgba(42,143,106,.09); }
.request-grid-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; color: #425365; font-size: 11px; }
.request-grid-heading > div { display: flex; flex-direction: column; gap: 4px; }
.request-grid-heading small { color: #98a5ad; font-size: 9px; font-weight: 500; }
.request-grid-heading label { flex: 0 0 100px; }
.request-grid-scroll { max-height: 310px; overflow: auto; border: 1px solid #e9eef1; border-radius: 7px; scrollbar-color: #d7e2df #f8fafb; scrollbar-width: thin; }
.request-grid-scroll .editor-grid { min-width: 490px; }
.modal-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; margin-top: 14px; }
.modal-status { flex: 1; min-width: 0; color: #708079; font-size: 10px; }
.primary-action { border-color: #288365; color: #fff; background: #288365; }
.primary-action:hover { background: #176e52; }
.request-list { display: flex; flex-direction: column; gap: 10px; }
.request-empty { padding: 24px 12px; border: 1px dashed #dfe8e3; border-radius: 8px; color: #7d8b84; text-align: center; font-size: 11px; }
.request-item { padding: 13px; border: 1px solid #e7eeea; border-radius: 9px; background: #fbfcfb; }
.request-item-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.request-item h3 { margin: 0; color: #344559; font-size: 13px; }
.request-item-meta { margin-top: 4px; color: #8c9a9e; font-size: 9px; }
.request-overlap { margin: 10px 0 12px; padding: 9px 10px; border-radius: 6px; background: #eef7f2; color: #3c7058; font-size: 10px; line-height: 1.5; }
.request-overlap.no-fit { color: #916e3b; background: #fbf5e8; }
.request-item-actions { display: flex; justify-content: flex-end; gap: 8px; }
.request-item-actions button { font-size: 9px; }
.request-decline { border: 1px solid #eee0da; color: #986c5a; background: #fffaf8; }
@media (max-width: 540px) {
  .modal-card { padding: 16px; }
  .request-fields { grid-template-columns: 1fr; gap: 9px; }
  .profile-fields { grid-template-columns: 1fr; gap: 10px; }
  .request-grid-scroll { max-height: 260px; }
  .request-item-actions { justify-content: stretch; }
  .request-item-actions button { flex: 1; }
}