:root {
  color-scheme: light;
  --ink: #172c38;
  --muted: #71818a;
  --line: #e1e8eb;
  --surface: #ffffff;
  --page: #f4f7f8;
  --teal: #147c7a;
  --teal-dark: #0b6263;
  --green: #23845f;
  --green-bg: #e9f5ef;
  --amber: #a76a16;
  --amber-bg: #fff3df;
  --red: #b4554d;
  --red-bg: #fbecea;
  font-family: Inter, "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; }
button { color: inherit; }

.topbar {
  height: 70px;
  padding: 0 max(28px, calc((100vw - 1440px) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: inherit;
}

.brand-mark {
  width: 37px;
  height: 37px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #fff;
  background: var(--teal);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -.4px;
}

.brand-copy { display: grid; gap: 2px; }
.brand-copy strong { font-size: 14px; letter-spacing: -.2px; }
.brand-copy span { color: var(--muted); font-size: 11px; }
.topbar-right { display: flex; align-items: center; gap: 17px; }

.theme-toggle { width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; background: transparent; cursor: pointer; }
.theme-toggle:focus-visible { outline: 2px solid #73aead; outline-offset: 2px; }
.theme-toggle-track { width: 40px; height: 24px; position: relative; display: block; border: 1px solid #dbe4e7; border-radius: 12px; background: #edf2f3; transition: background .18s, border-color .18s; }
.theme-toggle-thumb { width: 18px; height: 18px; position: absolute; top: 2px; left: 2px; border-radius: 50%; background: white; box-shadow: 0 1px 3px #19343b2b; transition: transform .18s, background .18s; }
.theme-icon { width: 13px; height: 13px; position: absolute; top: 5px; z-index: 1; stroke: #9a7221; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.theme-icon-sun { left: 4px; }
.theme-icon-moon { right: 4px; display: none; }
.theme-toggle:hover .theme-toggle-track { border-color: #b8cdcf; }

.user-badge { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 50%; background: #e8f1f2; color: #37666b; font-size: 11px; font-weight: 750; }
.staff-email { max-width: 240px; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.connection-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; padding: 12px 14px; border: 1px solid #f0dfc3; border-radius: 7px; background: #fff6e7; color: #805a22; font-size: 12px; }
.page-shell { width: min(1440px, 100%); margin: 0 auto; padding: 27px 32px 30px; }
.page-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.eyebrow { margin: 0 0 8px; color: #7b8c94; font-size: 10px; line-height: 1.2; font-weight: 750; letter-spacing: 1.15px; }
.eyebrow span { margin: 0 5px; color: #b5c1c5; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 5px; font-size: 27px; line-height: 1.2; letter-spacing: -.8px; }
.page-description { margin: 0; color: var(--muted); font-size: 13px; }
.primary-button { min-height: 39px; padding: 0 15px; border: 0; border-radius: 6px; color: white; background: var(--teal); font-size: 12px; font-weight: 650; cursor: pointer; transition: background .15s, transform .15s; }
.primary-button:hover { background: var(--teal-dark); }
.primary-button:active { transform: translateY(1px); }
.primary-button span { margin-right: 7px; font-size: 18px; vertical-align: -1px; font-weight: 400; }

.date-toolbar { display: flex; justify-content: space-between; align-items: center; min-height: 61px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.date-range { display: flex; align-items: center; gap: 13px; }
.date-range label { display: grid; gap: 3px; }
.field-label { color: #87969c; font-size: 9px; font-weight: 750; letter-spacing: .7px; }
.date-range input { width: 139px; border: 0; outline: none; color: var(--ink); background: transparent; font-size: 12px; font-weight: 600; }
.date-arrow { margin: 10px 0 0; color: #94a3a9; }
.search-field { width: 245px; height: 36px; display: flex; align-items: center; gap: 9px; padding: 0 9px; background: #f8fafb; border: 1px solid var(--line); border-radius: 6px; }
.search-field:focus-within { border-color: #8abbb9; box-shadow: 0 0 0 3px #e6f3f2; }
.search-icon { width: 13px; height: 13px; position: relative; border: 1.6px solid #82949b; border-radius: 50%; }
.search-icon::after { content: ""; position: absolute; width: 5px; height: 1.5px; right: -4px; bottom: -2px; transform: rotate(45deg); background: #82949b; }
.search-field input { min-width: 0; flex: 1; border: 0; outline: none; background: transparent; color: var(--ink); font-size: 12px; }
.search-field input::placeholder { color: #91a0a6; }
kbd { padding: 2px 5px; border: 1px solid #dce4e7; border-radius: 3px; background: white; color: #87969c; font-family: inherit; font-size: 10px; }

.summary-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 14px 0; }
.summary-card { min-height: 69px; display: flex; align-items: center; gap: 12px; padding: 11px 15px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.summary-card > div { display: grid; gap: 4px; }
.summary-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; font-size: 15px; font-weight: 750; }
.total-icon { color: #44747a; background: #eaf2f3; }
.available-icon, .booked-icon, .restricted-icon { position: relative; }
.available-icon { background: var(--green-bg); }
.available-icon::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #3c9b71; }
.booked-icon { background: var(--red-bg); }
.booked-icon::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #c96860; }
.restricted-icon { color: #a36a1d; background: var(--amber-bg); }
.summary-label { color: #84939a; font-size: 9px; font-weight: 750; letter-spacing: .65px; }
.summary-card strong { font-size: 18px; line-height: 1; letter-spacing: -.4px; }

.workspace { display: grid; grid-template-columns: minmax(0, 1fr) 292px; align-items: stretch; gap: 14px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.map-panel { min-width: 0; padding: 16px 17px 12px; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.panel-heading h2, .detail-panel h2 { margin: 0; font-size: 15px; line-height: 1.3; letter-spacing: -.25px; }
.panel-heading p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.map-heading-controls { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.map-mode-toggle { display: inline-flex; padding: 3px; border: 1px solid #e1e8eb; border-radius: 6px; background: #f5f8f9; }
.map-mode-button { min-height: 25px; padding: 0 9px; border: 0; border-radius: 4px; background: transparent; color: #71818a; font-size: 10px; font-weight: 650; cursor: pointer; }
.map-mode-button.is-active { background: white; color: var(--teal-dark); box-shadow: 0 1px 3px #193b421c; }
.map-mode-button:focus-visible { outline: 2px solid #73aead; outline-offset: 2px; }
.map-date { margin-top: 1px; color: #61747b; font-size: 11px; font-weight: 650; }
.map-legend { display: flex; align-items: center; gap: 17px; margin: 14px 0 9px; color: #6e7f86; font-size: 10px; }
.map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend-dot { width: 8px; height: 8px; display: inline-block; border-radius: 50%; }
.legend-dot.available { background: #3c9b71; }
.legend-dot.booked { background: #c96860; }
.legend-dot.priority { background: #d18e30; }
.legend-dot.restricted { background: #d69a3f; }
.map-viewport { width: 100%; overflow: hidden; border: 1px solid #e2e8e5; border-radius: 5px; background: #d7e5e3; }
.map-canvas { position: relative; width: 100%; aspect-ratio: 1415 / 985; }
.wharf-map { width: 100%; height: 100%; display: block; object-fit: contain; }
.revamped-map { background: #e5f0ee; }
.map-markers { position: absolute; inset: 0; }
.map-marker { position: absolute; width: 23px; height: 23px; display: grid; place-items: center; padding: 0; transform: translate(-50%, -50%); border: 2px solid #fff; border-radius: 50%; box-shadow: 0 1px 5px #18333b55; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.map-marker::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: white; }
.map-marker.available { background: #399a6e; }
.map-marker.booked { background: #c9645c; }
.map-marker.priority, .map-marker.restricted { background: #d18e30; }
.map-marker:hover, .map-marker:focus-visible { z-index: 2; transform: translate(-50%, -50%) scale(1.23); outline: 2px solid white; outline-offset: 1px; }
.map-marker.is-selected { z-index: 1; box-shadow: 0 0 0 3px #fff, 0 0 0 5px #176d70, 0 2px 8px #18333b66; }
.map-canvas.is-revamped .map-marker { width: auto; min-width: 34px; height: 24px; padding: 0 6px; border-radius: 6px; color: white; font-size: 9px; font-weight: 750; white-space: nowrap; }
.map-canvas.is-revamped .map-marker::after { display: none; }
.map-footnote { display: flex; align-items: center; gap: 7px; margin-top: 10px; color: #71818a; font-size: 10px; }
.info-icon { width: 14px; height: 14px; display: grid; place-items: center; flex: 0 0 14px; border: 1px solid #93a4aa; border-radius: 50%; color: #758990; font-size: 9px; font-weight: 700; }

.detail-panel { display: flex; flex-direction: column; min-width: 0; padding: 19px 17px 14px; }
.detail-kicker { display: flex; align-items: center; gap: 7px; color: #87969c; font-size: 9px; font-weight: 750; letter-spacing: .85px; }
.detail-pin { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
.detail-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; }
.detail-panel h2 { font-size: 23px; letter-spacing: -.5px; }
.status-badge { padding: 5px 8px; border-radius: 4px; font-size: 10px; font-weight: 650; }
.status-badge.available { color: #277753; background: var(--green-bg); }
.status-badge.booked { color: #a84f49; background: var(--red-bg); }
.status-badge.priority, .status-badge.restricted { color: #966018; background: var(--amber-bg); }
.detail-subtitle { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.detail-divider { height: 1px; margin: 16px 0 14px; background: var(--line); }
.detail-section h3 { margin: 0 0 5px; font-size: 11px; font-weight: 700; }
.date-caption { margin: 0; color: var(--muted); font-size: 10px; }
.booking-card { margin-top: 13px; padding: 12px; border: 1px solid #f0d9d5; border-radius: 7px; background: #fffaf9; }
.booking-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.booking-symbol { width: 21px; height: 21px; display: grid; place-items: center; border-radius: 5px; background: var(--red-bg); color: #ac5b54; font-size: 12px; }
.booking-tag { color: #ac625b; font-size: 8px; font-weight: 750; letter-spacing: .6px; }
.booking-card > strong { display: block; margin-bottom: 3px; font-size: 12px; }
.booking-card > span { display: block; color: var(--muted); font-size: 10px; }
.booking-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; margin-top: 12px; padding-top: 9px; border-top: 1px solid #f0e3e1; }
.booking-dates span { color: #9a8a88; font-size: 8px; font-weight: 700; letter-spacing: .45px; }
.booking-dates strong { font-size: 10px; }
.availability-card, .restriction-card { display: flex; gap: 9px; margin-top: 13px; padding: 11px; border: 1px solid #dcece3; border-radius: 7px; background: #f5faf7; }
.availability-check { width: 20px; height: 20px; display: grid; place-items: center; flex: 0 0 20px; border-radius: 50%; color: #277753; background: #e1f1e8; font-size: 11px; font-weight: 800; }
.availability-card strong, .restriction-card strong { display: block; margin: 2px 0 4px; font-size: 10px; }
.availability-card p, .restriction-card p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.restriction-card { border-color: #f0e2ca; background: #fffaf1; }
.restriction-symbol { width: 20px; height: 20px; display: grid; place-items: center; flex: 0 0 20px; border-radius: 50%; color: #98621c; background: #faedda; font-size: 11px; font-weight: 800; }
.secondary-button { width: 100%; min-height: 35px; display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding: 0 10px; border: 1px solid #dce5e7; border-radius: 5px; background: white; color: #415960; font-size: 10px; font-weight: 650; cursor: pointer; }
.secondary-button:hover { border-color: #95b8b9; background: #f7fbfb; }
.secondary-button[hidden] { display: none; }
.detail-disclaimer { margin: 9px 0 0; color: #93a0a5; font-size: 9px; text-align: center; }

.berth-list-panel { margin-top: 14px; padding: 15px 17px 11px; }
.list-heading { align-items: center; margin-bottom: 12px; }
.list-heading h2 span { color: #84949b; font-size: 11px; font-weight: 500; }
.text-button { border: 0; background: transparent; color: var(--teal); font-size: 11px; font-weight: 650; cursor: pointer; }
.berth-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
.berth-list-item { min-width: 0; min-height: 41px; display: grid; grid-template-columns: 9px minmax(70px, .65fr) minmax(90px, 1fr) auto; align-items: center; gap: 9px; padding: 5px 8px; border: 0; border-top: 1px solid #edf1f2; background: transparent; text-align: left; cursor: pointer; }
.berth-list-item:hover, .berth-list-item.is-selected { border-radius: 4px; background: #f4f9f9; }
.list-status { width: 7px; height: 7px; border-radius: 50%; }
.list-status.available { background: #399a6e; }
.list-status.booked { background: #c9645c; }
.list-status.priority, .list-status.restricted { background: #d18e30; }
.list-berth-name { overflow: hidden; color: #30464f; font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.list-berth-type { overflow: hidden; color: #839198; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.list-status-label { color: #708088; font-size: 9px; }
.empty-search { margin: 12px 8px; color: var(--muted); font-size: 11px; }
.page-footer { padding: 17px 0 2px; color: #8b989d; font-size: 10px; text-align: center; }
.page-footer span { margin: 0 4px; color: #c1cbce; }

.booking-dialog { width: min(420px, calc(100% - 32px)); padding: 25px; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 16px 50px #132e3c33; color: var(--ink); }
.booking-dialog::backdrop { background: #19323c66; backdrop-filter: blur(2px); }
.auth-dialog { width: min(400px, calc(100% - 32px)); padding: 25px; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 16px 50px #132e3c33; color: var(--ink); }
.auth-dialog::backdrop { background: #19323c88; backdrop-filter: blur(2px); }
.auth-dialog h2 { margin-bottom: 8px; font-size: 22px; letter-spacing: -.5px; }
.auth-dialog form label { display: grid; gap: 6px; margin-bottom: 13px; color: #53676f; font-size: 10px; font-weight: 650; }
.auth-dialog input { width: 100%; height: 37px; padding: 0 9px; border: 1px solid #dce5e7; border-radius: 5px; color: var(--ink); background: white; font-size: 11px; }
.auth-dialog input:focus { border-color: #79aaa9; outline: 3px solid #e6f3f2; }
.auth-dialog form button:disabled, .booking-dialog form button:disabled { opacity: .6; cursor: wait; }
.auth-dialog form button + .form-feedback { margin-top: 12px; }
.dialog-close-form { position: absolute; top: 12px; right: 12px; }
.dialog-close { width: 28px; height: 28px; border: 0; border-radius: 50%; background: #f2f6f7; color: #667981; font-size: 20px; line-height: 1; cursor: pointer; }
.booking-dialog h2 { margin-bottom: 8px; font-size: 22px; letter-spacing: -.5px; }
.dialog-description { margin-bottom: 18px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.booking-dialog form label { display: grid; gap: 6px; color: #53676f; font-size: 10px; font-weight: 650; }
.booking-dialog form > label { margin-bottom: 13px; }
.booking-dialog input { width: 100%; height: 37px; padding: 0 9px; border: 1px solid #dce5e7; border-radius: 5px; color: var(--ink); background: white; font-size: 11px; }
.booking-dialog input:focus { border-color: #79aaa9; outline: 3px solid #e6f3f2; }
.form-date-row { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-bottom: 16px; }
.form-submit { width: 100%; }
.form-feedback { margin: 12px 0 0; padding: 9px; border-radius: 5px; color: #8b5c19; background: #fff6e7; font-size: 11px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e6eef1;
  --muted: #9eafb7;
  --line: #34474f;
  --surface: #1d2b32;
  --page: #131e24;
  --teal: #55b5af;
  --teal-dark: #3d9995;
  --green: #69c293;
  --green-bg: #203c34;
  --amber: #e3b366;
  --amber-bg: #403426;
  --red: #e28a80;
  --red-bg: #422d2e;
}

:root[data-theme="dark"] .theme-toggle-track { border-color: #476168; background: #294047; }
:root[data-theme="dark"] .theme-toggle-thumb { transform: translateX(16px); background: #78c9c3; }
:root[data-theme="dark"] .theme-icon-sun { display: none; }
:root[data-theme="dark"] .theme-icon-moon { display: block; stroke: #164c4f; }
:root[data-theme="dark"] .user-badge { background: #294148; color: #a6d9d4; }
:root[data-theme="dark"] .connection-status { border-color: #5c4930; background: #352c20; color: #e7c27e; }
:root[data-theme="dark"] .eyebrow { color: #a4b5bb; }
:root[data-theme="dark"] .eyebrow span { color: #62757d; }
:root[data-theme="dark"] .field-label,
:root[data-theme="dark"] .summary-label,
:root[data-theme="dark"] .detail-kicker { color: #9eafb7; }
:root[data-theme="dark"] .date-arrow,
:root[data-theme="dark"] .map-legend,
:root[data-theme="dark"] .map-footnote { color: #a0b0b7; }
:root[data-theme="dark"] .search-field { background: #17242a; }
:root[data-theme="dark"] .search-field:focus-within { box-shadow: 0 0 0 3px #24504f; }
:root[data-theme="dark"] kbd { border-color: #3b4c53; background: #24343b; color: #a0afb6; }
:root[data-theme="dark"] .total-icon { color: #a9d2d2; background: #294047; }
:root[data-theme="dark"] .restricted-icon { color: #e3b366; }
:root[data-theme="dark"] .map-mode-toggle { border-color: #3b4c53; background: #17242a; }
:root[data-theme="dark"] .map-mode-button { color: #a2b0b6; }
:root[data-theme="dark"] .map-mode-button.is-active { background: #30434a; color: #a6e0da; box-shadow: 0 1px 3px #07101466; }
:root[data-theme="dark"] .map-mode-button:focus-visible { outline-color: #71c4be; }
:root[data-theme="dark"] .map-date { color: #b1c0c5; }
:root[data-theme="dark"] .map-viewport { border-color: #40545a; background: #253b3e; }
:root[data-theme="dark"] .info-icon { border-color: #71858a; color: #b1c0c5; }
:root[data-theme="dark"] .booking-card { border-color: #563b3b; background: #2c2426; }
:root[data-theme="dark"] .booking-tag { color: #e59a92; }
:root[data-theme="dark"] .booking-dates { border-top-color: #493536; }
:root[data-theme="dark"] .booking-dates span { color: #b7a3a2; }
:root[data-theme="dark"] .availability-card { border-color: #345444; background: #1d3029; }
:root[data-theme="dark"] .availability-check { color: #9de0b9; background: #2b493a; }
:root[data-theme="dark"] .restriction-card { border-color: #59472e; background: #30291f; }
:root[data-theme="dark"] .restriction-symbol { color: #e8c17e; background: #493a27; }
:root[data-theme="dark"] .secondary-button { border-color: #40535a; background: #24343b; color: #d3e0e3; }
:root[data-theme="dark"] .secondary-button:hover { border-color: #5d9997; background: #293d43; }
:root[data-theme="dark"] .berth-list-item { border-top-color: #34464d; }
:root[data-theme="dark"] .berth-list-item:hover,
:root[data-theme="dark"] .berth-list-item.is-selected { background: #26383e; }
:root[data-theme="dark"] .list-berth-name { color: #d9e5e8; }
:root[data-theme="dark"] .list-berth-type,
:root[data-theme="dark"] .list-status-label { color: #a0afb6; }
:root[data-theme="dark"] .list-heading h2 span,
:root[data-theme="dark"] .page-footer { color: #a0afb6; }
:root[data-theme="dark"] .page-footer span { color: #60737a; }
:root[data-theme="dark"] .booking-dialog,
:root[data-theme="dark"] .auth-dialog { border-color: var(--line); background: var(--surface); }
:root[data-theme="dark"] .auth-dialog form label,
:root[data-theme="dark"] .booking-dialog form label { color: #c1cdd1; }
:root[data-theme="dark"] .auth-dialog input,
:root[data-theme="dark"] .booking-dialog input { border-color: #40535a; background: #17242a; }
:root[data-theme="dark"] .auth-dialog input:focus,
:root[data-theme="dark"] .booking-dialog input:focus { border-color: #63aaa6; outline-color: #294b4c; }
:root[data-theme="dark"] .dialog-close { background: #2a3b42; color: #c1cdd1; }
:root[data-theme="dark"] .form-feedback { color: #e7c27e; background: #352c20; }

@media (min-width: 1450px) {
  .topbar { padding-right: calc((100vw - 1440px) / 2); padding-left: calc((100vw - 1440px) / 2); }
}

@media (max-width: 1050px) {
  .page-shell { padding-right: 22px; padding-left: 22px; }
  .workspace { grid-template-columns: minmax(0, 1fr) 260px; gap: 11px; }
  .map-panel { padding-right: 12px; padding-left: 12px; }
  .berth-list-item { grid-template-columns: 9px minmax(60px, .55fr) minmax(80px, 1fr) auto; gap: 7px; }
}

@media (max-width: 760px) {
  .topbar { height: 60px; padding: 0 16px; }
  .brand-mark { width: 34px; height: 34px; }
  .topbar-right { gap: 9px; }
  .staff-email { max-width: 125px; font-size: 9px; }
  .user-badge { width: 29px; height: 29px; }
  .page-shell { padding: 22px 14px 24px; }
  .page-heading { align-items: flex-start; gap: 12px; }
  h1 { font-size: 24px; }
  .page-description { max-width: 410px; font-size: 12px; line-height: 1.45; }
  .page-heading .primary-button { flex: 0 0 auto; padding: 0 11px; font-size: 11px; }
  .date-toolbar { align-items: stretch; gap: 10px; padding: 11px; }
  .date-range { flex: 1; justify-content: space-between; gap: 5px; }
  .date-range input { width: 121px; font-size: 11px; }
  .search-field { width: 190px; flex: 0 0 190px; }
  .summary-row { grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 10px 0; }
  .summary-card { min-height: 60px; padding: 8px 10px; }
  .summary-icon { width: 27px; height: 27px; }
  .summary-label { font-size: 8px; }
  .workspace { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .map-panel { padding: 13px 12px 10px; }
  .detail-panel { min-height: 310px; }
  .berth-list-panel { margin-top: 10px; }
}

@media (max-width: 520px) {
  .staff-email { display: none; }
  .page-shell { padding-right: 10px; padding-left: 10px; }
  .page-heading { align-items: flex-end; }
  .page-heading .primary-button { min-height: 35px; font-size: 10px; }
  .page-description { max-width: 250px; }
  .date-toolbar { display: grid; }
  .date-range { justify-content: flex-start; gap: 12px; }
  .date-range input { width: 135px; }
  .search-field { width: 100%; }
  .map-heading { align-items: flex-start; }
  .map-heading-controls { gap: 5px; }
  .map-legend { gap: 12px; font-size: 9px; }
  .map-marker { width: 19px; height: 19px; }
  .map-marker::after { width: 6px; height: 6px; }
  .map-canvas.is-revamped .map-marker { width: 18px; min-width: 18px; height: 18px; padding: 0; border-radius: 50%; font-size: 0; }
  .map-canvas.is-revamped .map-marker::after { display: block; width: 6px; height: 6px; }
  .map-canvas.is-revamped .map-marker.is-selected { width: auto; min-width: 34px; height: 22px; padding: 0 5px; border-radius: 5px; font-size: 8px; }
  .map-canvas.is-revamped .map-marker.is-selected::after { display: none; }
  .map-footnote { align-items: flex-start; line-height: 1.4; }
  .berth-list-panel { padding-right: 11px; padding-left: 11px; }
  .berth-list { grid-template-columns: minmax(0, 1fr); }
  .berth-list-item { grid-template-columns: 9px minmax(76px, .7fr) minmax(90px, 1fr) auto; }
  .page-footer { font-size: 9px; }
}