:root {
  --ink: #1d2926;
  --muted: #687772;
  --line: #dbe3de;
  --paper: #f4f6f2;
  --panel: #ffffff;
  --green: #176b52;
  --green-dark: #0f513d;
  --green-soft: #e7f2ec;
  --blue-soft: #eaf2f7;
  --coral: #b85f45;
  --shadow: 0 18px 50px rgba(28, 53, 46, 0.1);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: radial-gradient(circle at 85% -12%, #e4eee7 0, transparent 32%), var(--paper); }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(23, 107, 82, 0.23); outline-offset: 2px; }
h1, h2, h3, p { margin-top: 0; }

.topbar { height: 72px; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.9); backdrop-filter: blur(14px); position: sticky; top: 0; z-index: 60; }
.brand { display: flex; gap: 13px; align-items: center; color: inherit; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; color: #fff; background: var(--green); font-weight: 850; font-size: 12px; letter-spacing: .08em; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 15px; }
.brand small { color: var(--muted); margin-top: 2px; font-size: 11px; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.status-pill { padding: 7px 10px; border-radius: 999px; background: #edf0ed; color: var(--muted); font-size: 11px; font-weight: 750; }
.status-pill.live { color: var(--green-dark); background: var(--green-soft); }
.status-pill.preview { color: #825f17; background: #fff4d8; }

.calendar-bar { min-height: 88px; padding: 10px 28px; border-bottom: 1px solid var(--line); background: rgba(249,250,248,.94); display: flex; align-items: center; gap: 24px; position: sticky; top: 72px; z-index: 55; }
.date-controls { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.date-field input { height: 38px; border: 1px solid var(--line); border-radius: 10px; background: white; color: var(--ink); padding: 0 10px; font-size: 12px; font-weight: 700; }
.plan-source { margin-left: 5px; padding: 7px 9px; border-radius: 8px; color: var(--muted); background: #edf0ed; font-size: 10px; font-weight: 800; }
.plan-source.override { color: #8a4d35; background: #fff0e9; }
.week-strip { display: grid; grid-template-columns: repeat(7, minmax(60px, 1fr)); gap: 6px; width: min(680px, 100%); margin-left: auto; }
.week-day { min-width: 0; border: 1px solid transparent; border-radius: 11px; background: transparent; color: var(--muted); padding: 6px 8px; display: grid; grid-template-columns: auto auto; align-items: center; text-align: left; }
.week-day span { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.week-day strong { justify-self: end; color: var(--ink); font-size: 13px; }
.week-day small { grid-column: 1 / -1; margin-top: 3px; font-size: 9px; }
.week-day:hover { background: white; border-color: var(--line); }
.week-day.selected { color: var(--green-dark); background: white; border-color: #a8c6b8; box-shadow: 0 3px 10px rgba(25,70,55,.08); }
.week-day.override::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #dd8262; position: absolute; }
.week-day.override { position: relative; }

.shell { display: grid; grid-template-columns: 276px minmax(0, 1fr); gap: 18px; max-width: 1760px; min-height: calc(100vh - 160px); margin: 0 auto; padding: 18px 22px 28px; }
.shell.admin-open { grid-template-columns: 250px minmax(0, 1fr) 340px; max-width: 1920px; }
.directory-panel, .map-panel, .admin-panel { background: rgba(255,255,255,.94); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 5px 24px rgba(28,53,46,.045); }
.directory-panel { padding: 20px 14px; overflow: hidden; display: flex; flex-direction: column; max-height: calc(100vh - 194px); position: sticky; top: 178px; }
.panel-heading { padding: 0 6px 15px; }
.eyebrow { display: block; color: var(--green); text-transform: uppercase; font-size: 9px; font-weight: 850; letter-spacing: .15em; }
h1 { font-size: 23px; line-height: 1.1; margin: 7px 0 9px; letter-spacing: -.025em; }
.panel-heading p, .login-dialog p { color: var(--muted); font-size: 12px; line-height: 1.55; margin-bottom: 0; }
.search-field { height: 42px; border: 1px solid var(--line); background: #fafbf9; border-radius: 11px; display: flex; align-items: center; gap: 8px; padding: 0 11px; }
.search-field:focus-within { border-color: var(--green); background: white; box-shadow: 0 0 0 3px rgba(23,107,82,.09); }
.search-field svg { width: 17px; fill: none; stroke: var(--muted); stroke-width: 1.7; }
.search-field input { border: 0; outline: 0; background: transparent; min-width: 0; width: 100%; color: var(--ink); font-size: 12px; }
.roster-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 9px 1px 0; }
.roster-filters button { min-width: 0; height: 30px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; display: flex; align-items: center; justify-content: space-between; color: var(--muted); background: #fafbf9; font-size: 8px; font-weight: 800; }
.roster-filters button strong { color: var(--ink); font-size: 9px; }
.roster-filters button[aria-pressed="true"] { color: var(--green-dark); border-color: #a8c6b8; background: var(--green-soft); }
.people-list { margin-top: 12px; padding-right: 3px; overflow: auto; }
.roster-group-heading { height: 29px; padding: 7px 8px 4px; display: flex; justify-content: space-between; color: var(--muted); font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.roster-group-heading strong { color: var(--ink); }
.person-row { width: 100%; border: 0; background: transparent; border-radius: 11px; padding: 9px 8px; display: grid; grid-template-columns: 32px minmax(0,1fr) auto; gap: 8px; align-items: center; text-align: left; color: var(--ink); }
.person-row:hover { background: #f2f5f1; }
.person-avatar { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: var(--green-dark); background: var(--green-soft); font-size: 10px; font-weight: 850; }
.person-row.remote .person-avatar { color: #516d78; background: var(--blue-soft); }
.person-row strong { display: block; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-row small { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-desk { min-width: 39px; padding: 5px 6px; border-radius: 7px; text-align: center; color: var(--green-dark); background: #edf5f1; font-size: 9px; font-weight: 850; }
.person-desk.remote { color: #526d79; background: var(--blue-soft); }
.person-desk.needs-seat { color: #9a4d36; background: #fff0ea; }
.admin-directory-list { max-height: 250px; overflow: auto; margin-top: 7px; border-top: 1px solid #edf0ed; }
.admin-directory-person { width: 100%; min-height: 45px; padding: 6px 4px; border: 0; border-bottom: 1px solid #edf0ed; background: transparent; color: var(--ink); display: grid; grid-template-columns: 30px minmax(0,1fr) 16px; gap: 7px; align-items: center; text-align: left; cursor: grab; }
.admin-directory-person:hover { background: #f3f6f3; }
.admin-directory-person.in-plan { background: var(--green-soft); }
.admin-directory-person.dragging { opacity: .45; }
.admin-directory-person strong, .admin-directory-person small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-directory-person strong { font-size: 9px; }
.admin-directory-person small { margin-top: 2px; color: var(--muted); font-size: 7px; }
.admin-directory-person .drag-handle { color: #8da199; font-size: 11px; letter-spacing: -3px; }
.desk.person-drop-zone { transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease; }
.desk.person-drag-over { border-color: var(--green) !important; box-shadow: 0 0 0 4px rgba(38,125,95,.18); transform: rotate(var(--rotation)) scale(1.04); }
.empty-list { padding: 25px 8px; text-align: center; color: var(--muted); font-size: 11px; line-height: 1.5; }

.map-panel { min-width: 0; align-self: start; overflow: hidden; }
.map-toolbar { min-height: 64px; padding: 11px 17px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.floor-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 11px; background: #f0f3ef; }
.floor-tab { border: 0; padding: 8px 14px; border-radius: 8px; color: var(--muted); background: transparent; font-size: 11px; font-weight: 780; }
.floor-tab[aria-selected="true"] { color: var(--ink); background: white; box-shadow: 0 2px 8px rgba(24,47,40,.1); }
.stat-row { display: flex; justify-content: flex-end; gap: 13px; flex-wrap: wrap; color: var(--muted); font-size: 9px; }
.stat-row strong { color: var(--ink); font-size: 14px; margin-right: 3px; }
.stat-row .attention, .stat-row .attention strong { color: #9a4d36; }
.selection-bar { min-height: 60px; padding: 10px 17px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #fbfcfa; }
.selection-bar[hidden] { display: none; }
.selection-bar > div { min-width: 0; }
.selection-bar strong, .selection-bar small { display: block; }
.selection-bar strong { margin-top: 3px; font-size: 13px; }
.selection-bar small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.map-scroll { overflow: auto; padding: 18px; background: #eef1ec; }
.floor-map { position: relative; width: max(880px, 100%); aspect-ratio: var(--floor-aspect, 1.58); overflow: hidden; border: 1px solid #d4ddd7; border-radius: 18px; background: #fbfcfa; box-shadow: var(--shadow); }
.floor-map::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(#d5ddd7 .8px, transparent .8px); background-size: 20px 20px; opacity: .25; pointer-events: none; }
.loading-state { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 12px; }

.area { position: absolute; z-index: 1; border: 1px solid; border-radius: 16px; padding: 10px 12px; transition: opacity .2s, box-shadow .2s; }
.area.circle { border-radius: 50%; display: grid; place-items: center; padding: 7px; text-align: center; }
.area.sage { background: rgba(207,226,213,.25); border-color: #b9ccbf; color: #617a68; }
.area.sand { background: rgba(238,221,185,.28); border-color: #d8c99e; color: #806f46; }
.area.slate { background: rgba(216,222,220,.32); border-color: #c0cbc7; color: #667570; }
.area.sky { background: rgba(208,226,231,.26); border-color: #b9d0d6; color: #58757c; }
.area.coral { background: rgba(240,206,190,.34); border-color: #dea78b; color: #8f583f; }
.area.zone { background-color: rgba(241,246,242,.72); }
.area.corridor { border-style: solid; border-radius: 5px; background: linear-gradient(rgba(255,255,255,.28), rgba(255,255,255,.28)), repeating-linear-gradient(90deg, rgba(216,222,220,.24) 0 28px, rgba(248,249,247,.54) 28px 56px); box-shadow: inset 0 0 0 5px rgba(255,255,255,.35); }
.area.stairs { border-radius: 6px; background-color: rgba(216,222,220,.34); background-image: repeating-linear-gradient(0deg, transparent 0 13px, rgba(74,94,86,.18) 13px 15px); box-shadow: inset 0 0 0 5px rgba(255,255,255,.38); }
.area.phone-booth, .area.conference { border-width: 1.5px; box-shadow: inset 0 0 0 5px rgba(255,255,255,.45); }
.area.equipment { border-radius: 8px; }
.area.wall { z-index: 2; padding: 0; border: 0; border-radius: 2px; background: #82918b; opacity: .28; }
.area.wall .area-label { display: none; }
.area-label { font-size: 8px; letter-spacing: .11em; text-transform: uppercase; font-weight: 850; }
.area.admin-selectable { cursor: pointer; }
.area.selected { box-shadow: 0 0 0 3px rgba(23,107,82,.24); }
.floor-map.layout-editing .area.admin-selectable,
.floor-map.layout-editing .desk { cursor: grab; }
.floor-map.layout-editing .area.admin-selectable:hover { box-shadow: 0 0 0 3px rgba(23,107,82,.14); }
.floor-map.layout-editing .area.selected { z-index: 12; box-shadow: 0 0 0 4px rgba(23,107,82,.24); }
.snap-guide { position: absolute; z-index: 30; pointer-events: none; background: rgba(23,107,82,.48); box-shadow: 0 0 0 1px rgba(255,255,255,.55); }
.snap-guide.vertical { top: 0; bottom: 0; width: 1px; }
.snap-guide.horizontal { right: 0; left: 0; height: 1px; }

.desk { position: absolute; z-index: 5; border: 0; padding: 0; background: transparent; transform: rotate(var(--rotation, 0deg)); transform-origin: center; }
.desk-shell { width: 100%; height: 100%; position: relative; border: 1px solid #c7d1cc; border-radius: 9px; background: #fafbf9; box-shadow: 0 3px 8px rgba(35,59,51,.08); display: flex; align-items: center; justify-content: center; transition: transform .16s, border-color .16s, opacity .16s, box-shadow .16s; }
.desk-shell::before { content: ""; position: absolute; top: 8px; left: 50%; width: 20px; height: 8px; transform: translateX(-50%); border: 1px solid #b9c5c0; border-radius: 2px; background: #eef2ef; box-shadow: 0 4px 0 -3px #9eada7; opacity: .72; }
.desk-shell::after { content: ""; position: absolute; width: 44%; height: 7px; left: 28%; bottom: -8px; border: 1px solid #c7d1cc; border-top: 0; border-radius: 0 0 7px 7px; background: white; }
.desk[data-facing="south"] .desk-shell::before { top: auto; bottom: 8px; box-shadow: 0 -4px 0 -3px #9eada7; }
.desk[data-facing="south"] .desk-shell::after { top: -8px; bottom: auto; border-top: 1px solid #c7d1cc; border-bottom: 0; border-radius: 7px 7px 0 0; }
.desk[data-facing="east"] .desk-shell::before,
.desk[data-facing="west"] .desk-shell::before { top: 50%; width: 8px; height: 20px; transform: translateY(-50%); box-shadow: none; }
.desk[data-facing="east"] .desk-shell::before { right: 7px; left: auto; }
.desk[data-facing="west"] .desk-shell::before { right: auto; left: 7px; }
.desk[data-facing="east"] .desk-shell::after,
.desk[data-facing="west"] .desk-shell::after { top: 28%; bottom: auto; width: 7px; height: 44%; border: 1px solid #c7d1cc; background: white; }
.desk[data-facing="east"] .desk-shell::after { right: auto; left: -8px; border-right: 0; border-radius: 7px 0 0 7px; }
.desk[data-facing="west"] .desk-shell::after { right: -8px; left: auto; border-left: 0; border-radius: 0 7px 7px 0; }
.desk.assigned .desk-shell { border-color: #72a68f; background: #f0f7f3; }
.desk.assigned .desk-shell::before { border-color: #88ad9c; background: #dbeae2; }
.desk.open .desk-shell { border-style: dashed; color: var(--muted); background: rgba(255,255,255,.8); }
.desk:hover .desk-shell, .desk:focus-visible .desk-shell { transform: translateY(-2px); border-color: var(--green); box-shadow: 0 9px 18px rgba(23,107,82,.15); }
.desk.selected .desk-shell, .desk.search-match .desk-shell { border-color: var(--green); box-shadow: 0 0 0 4px rgba(23,107,82,.17), 0 8px 18px rgba(23,107,82,.15); }
.desk.search-muted { opacity: .18; }
.desk-content { max-width: 92%; transform: rotate(calc(var(--rotation, 0deg) * -1)); line-height: 1.12; text-align: center; pointer-events: none; }
.desk[data-facing="east"] .desk-content,
.desk[data-facing="west"] .desk-content { max-width: 72%; }
.desk-code { display: block; color: var(--muted); font-size: 7px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; margin-bottom: 4px; }
.desk-person { display: block; color: var(--ink); font-size: clamp(7px, .65vw, 10px); font-weight: 780; line-height: 1.08; overflow: hidden; white-space: nowrap; }
.desk-person > span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.desk.open .desk-person { color: var(--muted); font-weight: 650; }
.desk.dragging, .area.dragging { z-index: 20; cursor: grabbing; }
.desk.resizing, .area.resizing { z-index: 22; }
.desk.dragging .desk-shell { box-shadow: 0 14px 28px rgba(23,107,82,.24); }
.resize-handle { position: absolute; z-index: 35; width: 11px; height: 11px; border: 2px solid white; border-radius: 50%; background: var(--green); box-shadow: 0 1px 5px rgba(20,70,55,.32); touch-action: none; }
.resize-handle.nw { top: -6px; left: -6px; cursor: nwse-resize; }
.resize-handle.ne { top: -6px; right: -6px; cursor: nesw-resize; }
.resize-handle.sw { bottom: -6px; left: -6px; cursor: nesw-resize; }
.resize-handle.se { right: -6px; bottom: -6px; cursor: nwse-resize; }
.map-footer { min-height: 52px; display: flex; justify-content: space-between; align-items: center; padding: 11px 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; }
.legend { display: flex; gap: 13px; flex-wrap: wrap; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.legend-dot.assigned { background: #72a68f; }
.legend-dot.open { background: white; border: 1px dashed #9aa8a3; }
.legend-dot.remote { background: #8fa9b4; }
.legend-outline { width: 13px; height: 9px; border: 1px solid #b7c6bf; border-radius: 3px; }

.admin-panel { align-self: start; max-height: calc(100vh - 194px); position: sticky; top: 178px; overflow: auto; padding: 17px; }
.admin-heading { display: flex; justify-content: space-between; align-items: start; }
.admin-heading h2 { font-size: 19px; margin: 5px 0 0; }
.icon-button, .dialog-close { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 9px; background: #f4f6f3; color: var(--muted); font-size: 20px; line-height: 1; }
.admin-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 17px 0 13px; background: #eef1ed; border-radius: 10px; }
.admin-tabs button { height: 34px; border: 0; border-radius: 7px; color: var(--muted); background: transparent; font-size: 10px; font-weight: 800; }
.admin-tabs button[aria-selected="true"] { color: var(--ink); background: white; box-shadow: 0 2px 7px rgba(25,50,41,.08); }
.plan-card { padding: 14px; border: 1px solid #c8dbd1; border-radius: 13px; background: #f2f8f4; }
.plan-card strong { display: block; margin: 5px 0 4px; font-size: 13px; }
.plan-card p { margin-bottom: 10px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.plan-card input { width: 100%; height: 36px; margin: 2px 0 9px; border: 1px solid var(--line); border-radius: 8px; padding: 0 9px; background: white; font-size: 11px; }
.plan-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.plan-actions .button { flex: 1 1 auto; }
.admin-actions { display: grid; gap: 7px; margin: 14px 0; }
.layout-help { margin: 0 1px 3px; padding: 10px; border-radius: 9px; color: var(--green-dark) !important; background: var(--green-soft); }
.split-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.admin-section { padding: 14px 0; border-top: 1px solid var(--line); }
.plan-card + .admin-section { border-top: 0; }
.admin-section h3 { margin-bottom: 10px; font-size: 11px; }
.admin-section p { color: var(--muted); font-size: 10px; line-height: 1.5; }
.admin-section label, .login-dialog label { display: grid; gap: 5px; color: var(--muted); font-size: 9px; font-weight: 780; margin: 8px 0; }
.admin-section input, .admin-section select, .login-dialog input { width: 100%; height: 37px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); padding: 0 9px; font-size: 10px; }
.admin-section textarea { width: 100%; resize: vertical; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); padding: 8px 9px; font: inherit; font-size: 10px; line-height: 1.45; }
.bulk-add, .copy-plan { margin-top: 9px; padding: 9px; border: 1px solid var(--line); border-radius: 9px; background: #fafbf9; }
.bulk-add summary, .copy-plan summary { color: var(--ink); font-size: 9px; font-weight: 800; cursor: pointer; }
.bulk-add p, .copy-plan p { margin: 8px 0; }
.bulk-add textarea { margin-bottom: 7px; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 7px; }
.section-heading-row { display: flex; align-items: center; justify-content: space-between; }
.section-heading-row span { min-width: 24px; padding: 3px 6px; border-radius: 999px; color: var(--green-dark); background: var(--green-soft); text-align: center; font-size: 9px; font-weight: 850; }
.selected-desk-heading { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.selected-desk-heading strong { font-size: 14px; }
.selected-desk-heading span { color: var(--muted); font-size: 9px; }
.admin-roster { max-height: 250px; overflow: auto; }
.admin-roster-row, .manual-person-row { min-height: 42px; padding: 7px 2px; border-bottom: 1px solid #edf0ed; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.admin-roster-row strong { display: block; font-size: 10px; }
.admin-roster-row small { display: block; margin-top: 2px; color: var(--muted); font-size: 8px; }
.row-remove, .manual-person-row button { border: 0; background: transparent; color: #a25243; font-size: 8px; font-weight: 750; }
.manual-people-list { max-height: 180px; margin-top: 10px; overflow: auto; }
.manual-person-row span { font-size: 9px; }
.button { min-height: 36px; border: 1px solid transparent; border-radius: 9px; padding: 7px 12px; font-weight: 780; font-size: 10px; }
.button.compact { min-height: 34px; padding: 6px 10px; }
.button.primary { background: var(--green); color: white; }
.button.primary:hover { background: var(--green-dark); }
.button.secondary { color: var(--ink); background: #f5f7f4; border-color: var(--line); }
.button.secondary:hover { border-color: #b5c3bd; background: white; }
.button.danger { color: #934339; background: #fff1ef; border-color: #efc5bd; }
.button.full { width: 100%; }
.button.active { color: white; background: var(--green); border-color: var(--green); }
.button:disabled { cursor: not-allowed; opacity: .48; }
.button.unsaved { color: #8a4d35; border-color: #e1b8a8; background: #fff0e9; }
.admin-footer { position: sticky; top: -17px; z-index: 4; margin: 0 -17px 13px; padding: 10px 17px 12px; border-bottom: 1px solid var(--line); display: grid; gap: 8px; background: rgba(255,255,255,.97); box-shadow: 0 10px 24px rgba(29,41,38,.06); }
.admin-footer-actions { display: grid; grid-template-columns: .8fr 1.2fr; gap: 7px; }
.admin-footer > span { color: var(--muted); font-size: 9px; text-align: center; }
.admin-footer > span.dirty { color: #966d12; }
.text-button { border: 0; background: transparent; color: var(--muted); font-size: 9px; text-decoration: underline; }
.admin-exit { width: 100%; margin-top: 14px; }

.login-dialog { width: min(410px, calc(100vw - 32px)); border: 0; border-radius: 19px; padding: 0; box-shadow: 0 30px 80px rgba(22,42,36,.28); }
.login-dialog::backdrop { background: rgba(24,39,35,.44); backdrop-filter: blur(4px); }
.login-dialog form { position: relative; padding: 29px; }
.login-dialog h2 { margin: 7px 0 9px; font-size: 23px; }
.dialog-close { position: absolute; top: 14px; right: 14px; }
.form-error { min-height: 18px; color: #9e4136 !important; font-size: 10px !important; }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 60; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; padding: 10px 15px; border-radius: 10px; color: white; background: #20302c; box-shadow: var(--shadow); font-size: 10px; transition: .2s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 1280px) {
  .shell, .shell.admin-open { grid-template-columns: 230px minmax(0,1fr); }
  .admin-panel { position: fixed; z-index: 45; right: 14px; top: 0; bottom: auto; width: 340px; height: calc(100vh - 14px); max-height: calc(100vh - 14px); overflow-y: auto; overscroll-behavior: contain; padding: 177px 17px 17px; box-shadow: 0 22px 70px rgba(22,42,36,.25); }
}
@media (max-width: 900px) {
  .calendar-bar { align-items: stretch; flex-direction: column; gap: 7px; position: static; }
  .week-strip { width: 100%; margin: 0; }
  .directory-panel { top: 90px; }
  .admin-panel { padding-top: 89px; }
}
@media (max-width: 760px) {
  .topbar { height: 64px; padding: 0 14px; }
  .brand small, .status-pill, .plan-source { display: none; }
  .calendar-bar { padding: 9px 12px; }
  .date-controls { justify-content: center; }
  .week-strip { overflow-x: auto; grid-template-columns: repeat(7, 62px); justify-content: start; }
  .shell, .shell.admin-open { display: block; padding: 9px; min-height: calc(100vh - 64px); }
  .directory-panel { position: static; max-height: 290px; margin-bottom: 9px; padding: 14px; }
  .panel-heading p { display: none; }
  .map-toolbar { align-items: start; flex-direction: column; }
  .map-scroll { padding: 9px; }
  .map-footer { align-items: start; gap: 8px; flex-direction: column; }
  .admin-panel { right: 9px; bottom: 9px; width: calc(100vw - 18px); padding-top: 81px; }
}