:root {
  --op-green: #174a3b;
  --op-green-2: #22634f;
  --op-green-soft: #e2eee9;
  --op-ivory: #f4f1e9;
  --op-sand: #dfd2bf;
  --op-bronze: #a47b53;
  --op-ink: #1e2926;
  --op-muted: #72807b;
  --op-line: #dde4e0;
  --op-surface: #ffffff;
  --op-bg: #f4f6f4;
  --op-blue: #3578b8;
  --op-red: #c74f4f;
  --op-amber: #e49b36;
  --op-yellow: #e6c95c;
  --op-purple: #7a648d;
  --op-gray: #8d9995;
  --op-shadow: 0 16px 42px rgba(26, 48, 40, .08);
  --op-radius: 20px;
}

.op-app, .op-app * { box-sizing: border-box; }
.op-app { color: var(--op-ink); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; line-height: 1.45; }
.op-app button, .op-app input, .op-app select, .op-app textarea { font: inherit; }
.op-app button { color: inherit; }
.op-shell { display: grid; grid-template-columns: 238px minmax(0, 1fr); min-height: min(920px, calc(100vh - 32px)); max-width: 1680px; margin: 0 auto; background: var(--op-bg); border: 1px solid var(--op-line); border-radius: 26px; overflow: hidden; box-shadow: var(--op-shadow); }
.op-wp-admin-wrap { margin: 16px 20px 0 0 !important; }
.op-sidebar { display: flex; flex-direction: column; min-height: 100%; padding: 26px 18px 20px; color: #fff; background: var(--op-green); }
.op-brand { display: flex; align-items: center; gap: 11px; padding: 0 8px 28px; border-bottom: 1px solid rgba(255,255,255,.13); }
.op-brand-mark { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; }
.op-brand-mark::before, .op-brand-mark::after { content: ""; position: absolute; width: 7px; height: 7px; background: var(--op-green); bottom: -1px; }
.op-brand-mark::before { left: 6px; }.op-brand-mark::after { right: 6px; }
.op-brand-mark i { width: 18px; height: 22px; border: 3px solid var(--op-sand); border-bottom: 0; border-radius: 12px 12px 0 0; transform: rotate(180deg); }
.op-brand strong { display: block; font-family: Georgia, serif; font-size: 17px; letter-spacing: .12em; line-height: 1; }
.op-brand small { display: block; margin-top: 5px; color: rgba(255,255,255,.58); font-size: 9px; letter-spacing: .25em; }
.op-nav { display: grid; gap: 6px; padding: 22px 0; }
.op-nav-button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 13px; border: 0; border-radius: 12px; color: rgba(255,255,255,.68); background: transparent; cursor: pointer; text-align: left; transition: .18s ease; }
.op-nav-button:hover { color: #fff; background: rgba(255,255,255,.08); }
.op-nav-button.is-active { color: #fff; background: rgba(255,255,255,.14); box-shadow: inset 3px 0 0 var(--op-sand); }
.op-nav-button svg { width: 20px; height: 20px; fill: currentColor; }
.op-nav-button span { font-weight: 650; }
.op-sidebar-actions { display: grid; gap: 9px; margin-top: auto; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.13); }
.op-user { display: flex; align-items: center; gap: 10px; margin-top: 20px; padding: 15px 7px 0; border-top: 1px solid rgba(255,255,255,.13); }
.op-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--op-green); background: var(--op-sand); font-size: 11px; font-weight: 800; }
.op-user strong, .op-user small { display: block; max-width: 135px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-user strong { font-size: 12px; }.op-user small { margin-top: 2px; color: rgba(255,255,255,.55); font-size: 10px; }
.op-main { min-width: 0; padding: 0 30px 34px; }
.op-topbar { display: flex; align-items: center; justify-content: space-between; min-height: 98px; gap: 20px; }
.op-topbar h1 { margin: 3px 0 0; color: var(--op-ink); font-family: Georgia, "Times New Roman", serif; font-size: clamp(25px, 2.2vw, 34px); font-weight: 500; line-height: 1.15; }
.op-eyebrow { margin: 0; color: var(--op-muted); font-size: 10px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
.op-topbar-tools { display: flex; align-items: center; gap: 9px; }
.op-global-search, .op-table-search { display: flex; align-items: center; gap: 8px; min-width: 200px; padding: 0 12px; border: 1px solid var(--op-line); border-radius: 12px; background: #fff; }
.op-global-search button { display: grid; place-items: center; flex: 0 0 auto; width: 26px; height: 32px; padding: 0; border: 0; color: var(--op-muted); background: transparent; cursor: pointer; }
.op-global-search svg, .op-table-search svg { flex: 0 0 auto; width: 18px; height: 18px; fill: var(--op-muted); }
.op-global-search input, .op-table-search input { width: 100%; min-height: 42px; border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; }
.op-icon-button { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--op-line); border-radius: 12px; background: #fff; cursor: pointer; font-size: 21px; transition: .18s ease; }
.op-icon-button:hover { border-color: #bdcac5; transform: translateY(-1px); }
.op-icon-button svg { width: 19px; height: 19px; fill: currentColor; }
.op-view { min-width: 0; }
.op-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.op-metric { position: relative; display: flex; flex-direction: column; min-height: 142px; padding: 20px; overflow: hidden; border: 1px solid var(--op-line); border-radius: var(--op-radius); background: #fff; }
.op-metric::after { content: ""; position: absolute; right: -22px; bottom: -30px; width: 92px; height: 92px; border: 18px solid currentColor; border-radius: 50%; opacity: .06; }
.op-metric span { color: var(--op-muted); font-size: 11px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.op-metric strong { margin-top: 13px; font-family: Georgia, serif; font-size: clamp(25px, 2.2vw, 35px); font-weight: 500; line-height: 1; }
.op-metric small { margin-top: auto; color: var(--op-muted); font-size: 11px; }
.op-metric--green { color: var(--op-green); background: var(--op-green-soft); border-color: transparent; }
.op-metric--blue { color: #285f90; background: #e8f0f7; border-color: transparent; }
.op-metric--ivory { color: #795f3f; background: var(--op-ivory); border-color: transparent; }
.op-metric--dark { color: #fff; background: var(--op-green); border-color: transparent; }
.op-metric--dark span, .op-metric--dark small { color: rgba(255,255,255,.66); }
.op-dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, .8fr); gap: 14px; margin-top: 14px; }
.op-dashboard-grid--bottom { grid-template-columns: minmax(0, 1.55fr) minmax(300px, .65fr); }
.op-panel { min-width: 0; padding: 20px; border: 1px solid var(--op-line); border-radius: var(--op-radius); background: #fff; box-shadow: 0 7px 25px rgba(37,56,49,.035); }
.op-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.op-panel h2, .op-modal h2, .op-quick-panel h2 { margin: 3px 0 0; font-family: Georgia, serif; font-size: 21px; font-weight: 500; line-height: 1.2; }
.op-text-button { display: flex; align-items: center; gap: 5px; padding: 7px; border: 0; color: var(--op-green-2); background: transparent; cursor: pointer; font-size: 12px; font-weight: 700; }
.op-text-button svg, .op-quick-action > svg, .op-alert-row > svg { width: 16px; height: 16px; fill: currentColor; }
.op-counter { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 7px; border-radius: 20px; color: var(--op-red); background: #fce7e7; font-weight: 800; }
.op-occupancy-content { display: grid; grid-template-columns: 180px minmax(0, 1fr); align-items: center; gap: 30px; min-height: 225px; }
.op-ring { --value: 0deg; display: grid; place-items: center; width: 164px; height: 164px; margin: 0 auto; border-radius: 50%; background: conic-gradient(var(--op-green) 0 var(--value), #e6ece9 var(--value) 360deg); }
.op-ring::before { content: ""; grid-area: 1/1; width: 124px; height: 124px; border-radius: 50%; background: #fff; }
.op-ring div { z-index: 1; grid-area: 1/1; text-align: center; }
.op-ring strong { display: block; font-family: Georgia, serif; font-size: 31px; font-weight: 500; }.op-ring span { color: var(--op-muted); font-size: 11px; }
.op-legend-list { display: grid; gap: 11px; }
.op-legend-list > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 9px; border-bottom: 1px solid #eef2ef; }
.op-legend-list span { display: flex; align-items: center; gap: 9px; color: var(--op-muted); }.op-legend-list strong { font-size: 15px; }
.op-dot { display: inline-block; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--op-gray); }
.op-dot--free { background: #31a776; }.op-dot--reserved { background: #18a7a0; }.op-dot--active { background: var(--op-blue); }.op-dot--expiring { background: var(--op-amber); }.op-dot--overdue { background: var(--op-red); }.op-dot--incomplete { background: var(--op-yellow); }.op-dot--owner { background: var(--op-gray); }.op-dot--other { background: var(--op-purple); }.op-dot--missing { background: #26332f; }.op-dot--leak { background: #20a9d6; }
.op-alert-list { display: grid; }
.op-alert-row { display: grid; grid-template-columns: 10px minmax(0,1fr) 16px; align-items: center; gap: 11px; padding: 12px 0; border: 0; border-bottom: 1px solid #edf1ef; background: transparent; cursor: pointer; text-align: left; }
.op-alert-row:hover strong { color: var(--op-green-2); }.op-alert-row:last-child { border-bottom: 0; }
.op-alert-row strong, .op-alert-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.op-alert-row strong { font-size: 12px; }.op-alert-row small { margin-top: 3px; color: var(--op-muted); font-size: 10px; }
.op-table-wrap { width: 100%; overflow-x: auto; }
.op-table { width: 100%; border-collapse: collapse; }
.op-table th { padding: 10px 12px; color: var(--op-muted); border-bottom: 1px solid var(--op-line); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.op-table td { padding: 13px 12px; border-bottom: 1px solid #edf1ef; color: #43514c; font-size: 12px; vertical-align: middle; }
.op-table tbody tr:last-child td { border-bottom: 0; }.op-table tbody tr:hover td { background: #fbfcfb; }
.op-table td strong, .op-table td small { display: block; }.op-table td strong { color: var(--op-ink); font-size: 12px; }.op-table td small { max-width: 250px; margin-top: 3px; overflow: hidden; color: var(--op-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.op-align-right { text-align: right !important; }.op-place-link { padding: 4px 7px; border: 0; border-radius: 7px; color: var(--op-green); background: var(--op-green-soft); cursor: pointer; font-weight: 800; }
.op-method { display: inline-flex; padding: 4px 8px; border-radius: 30px; color: #5d6a66; background: #f0f3f1; font-size: 10px; font-weight: 700; }
.op-quick-panel { display: flex; flex-direction: column; }
.op-quick-panel h2 { margin-bottom: 12px; }
.op-quick-action { display: grid; grid-template-columns: 40px minmax(0,1fr) 18px; align-items: center; gap: 11px; width: 100%; padding: 13px 3px; border: 0; border-bottom: 1px solid #edf1ef; background: transparent; cursor: pointer; text-align: left; }
.op-quick-action:last-child { border-bottom: 0; }.op-quick-action:hover strong { color: var(--op-green-2); }
.op-quick-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; color: var(--op-green); background: var(--op-green-soft); }
.op-quick-icon svg, .op-callout-icon svg, .op-payment-icon svg, .op-audit-icon svg { width: 19px; height: 19px; fill: currentColor; }
.op-quick-action strong, .op-quick-action small { display: block; }.op-quick-action strong { font-size: 12px; }.op-quick-action small { margin-top: 3px; color: var(--op-muted); font-size: 10px; }
.op-toolbar { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 14px; padding: 14px; border: 1px solid var(--op-line); border-radius: 16px; background: #fff; }
.op-toolbar--table { align-items: center; }.op-toolbar .op-map-search { margin-left: auto; }
.op-segmented { display: inline-flex; padding: 3px; border-radius: 11px; background: #edf1ef; }
.op-segmented button { min-height: 37px; padding: 0 13px; border: 0; border-radius: 8px; color: var(--op-muted); background: transparent; cursor: pointer; font-size: 11px; font-weight: 750; white-space: nowrap; }
.op-segmented button.is-active { color: var(--op-green); background: #fff; box-shadow: 0 2px 8px rgba(29,50,42,.08); }.op-segmented b { margin-left: 5px; }
.op-field { display: flex; flex-direction: column; gap: 6px; }
.op-field > span, .op-field > label { color: #53615c; font-size: 10px; font-weight: 750; letter-spacing: .03em; }
.op-field input, .op-field select, .op-field textarea { width: 100%; min-height: 43px; padding: 9px 11px; border: 1px solid var(--op-line) !important; border-radius: 10px !important; outline: 0; color: var(--op-ink); background: #fff !important; box-shadow: none !important; transition: .18s ease; }
.op-date-field input[type="date"] { min-height: 48px; font-size: 14px; font-variant-numeric: tabular-nums; cursor: pointer; }
.op-date-shortcuts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.op-date-shortcuts button { min-height: 30px; padding: 5px 9px; border: 1px solid var(--op-line); border-radius: 999px; color: var(--op-green); background: #f8faf9; font-size: 9px; font-weight: 750; cursor: pointer; }
.op-date-shortcuts button:hover { border-color: var(--op-green); background: var(--op-green-soft); }
.op-field textarea { resize: vertical; }.op-field input:focus, .op-field select:focus, .op-field textarea:focus { border-color: var(--op-green-2) !important; box-shadow: 0 0 0 3px rgba(34,99,79,.09) !important; }
.op-field--compact { min-width: 170px; }.op-field--compact input, .op-field--compact select { min-height: 39px; padding-top: 7px; padding-bottom: 7px; font-size: 12px; }
.op-map-legend { display: flex; flex-wrap: wrap; gap: 8px 15px; margin: -2px 0 13px; padding: 0 3px; }.op-map-legend span { display: flex; align-items: center; gap: 6px; color: var(--op-muted); font-size: 10px; }
.op-map-layout { display: grid; gap: 14px; align-items: start; }
.op-plan-panel { min-height: 490px; padding: 14px; overflow: hidden; background: #fbfcfb; }
.op-plan-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.op-plan-head h2 { margin-top: 3px; }
.op-level-switch { display: inline-flex; gap: 3px; margin-top: 4px; padding: 3px; border-radius: 10px; background: #edf1ef; }
.op-level-switch button { display: flex; align-items: baseline; gap: 6px; min-height: 34px; padding: 5px 10px; border: 0; border-radius: 8px; color: var(--op-muted); background: transparent; cursor: pointer; }
.op-level-switch button b { font-size: 11px; white-space: nowrap; }.op-level-switch button small { font-size: 8px; white-space: nowrap; }
.op-level-switch button.is-active { color: var(--op-green); background: #fff; box-shadow: 0 2px 8px rgba(29,50,42,.08); }
.op-zoom-controls { display: flex; align-items: center; gap: 5px; }
.op-zoom-controls button { min-height: 32px; padding: 0 10px; border: 1px solid var(--op-line); border-radius: 8px; color: var(--op-green); background: #fff; cursor: pointer; font-size: 11px; font-weight: 800; }
.op-zoom-controls button:first-child, .op-zoom-controls button:nth-child(3) { width: 32px; padding: 0; font-size: 18px; }
.op-zoom-controls span { min-width: 45px; color: var(--op-muted); font-size: 10px; font-weight: 800; text-align: center; }
.op-plan-scroll { width: 100%; max-height: 72vh; overflow: auto; border: 1px solid #d8dfdc; border-radius: 13px; background: #fff; scrollbar-color: #a7b5b0 #eef2f0; }
.op-plan-canvas { position: relative; min-width: 100%; aspect-ratio: 1030 / 465; transform-origin: top left; }
.op-plan-canvas > img, .op-plan-overlay { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.op-plan-canvas > img { max-width: none; object-fit: fill; user-select: none; }
.op-plan-overlay { display: grid; place-items: center; }
.op-plan-overlay > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.op-map-spot { fill: #26332f; stroke: rgba(255,255,255,.93); stroke-width: 1.35; vector-effect: non-scaling-stroke; cursor: pointer; transition: opacity .16s ease, fill .16s ease, stroke-width .16s ease; }
.op-map-spot:hover, .op-map-spot:focus { opacity: 1 !important; stroke: #10231d; stroke-width: 3.2; outline: none; filter: drop-shadow(0 2px 2px rgba(0,0,0,.28)); }
.op-map-spot--free { fill: #21ae77; }.op-map-spot--reserved { fill: #18a7a0; }.op-map-spot--active { fill: #2b77ba; }.op-map-spot--expiring { fill: #ed9e2b; }.op-map-spot--overdue { fill: #cc3434; }.op-map-spot--incomplete { fill: #eac93e; }.op-map-spot--owner { fill: #66716d; }.op-map-spot--other { fill: #775392; }.op-map-spot--missing { fill: #26332f; }
.op-map-spot.has-leak { stroke: #00bde8; stroke-width: 4; stroke-dasharray: 6 3; }
.op-map-spot.op-map-layer-neutral { fill: #e4e9e7; stroke: #fff; opacity: .58; }
.op-map-spot.op-map-layer-debt { fill: #cc3434; opacity: 1; }.op-map-spot.op-map-layer-leak { fill: #00a8cf; opacity: 1; }.op-map-spot.op-map-layer-owner { fill: #66716d; opacity: 1; }.op-map-spot.op-map-layer-moto { fill: #775392; opacity: 1; }.op-map-spot.op-map-layer-free { fill: #21ae77; opacity: 1; }
.op-map-spot.is-selected { fill: #163f32 !important; stroke: #fff !important; stroke-width: 4 !important; opacity: 1 !important; filter: drop-shadow(0 0 4px rgba(22,63,50,.55)); }
.op-place-cell.is-selected { color: #fff; border-color: #163f32; background: #163f32; box-shadow: 0 0 0 2px rgba(22,63,50,.18); }
.op-map-label { pointer-events: none; fill: #fff; stroke: rgba(14,35,28,.7); stroke-width: .85px; paint-order: stroke fill; font-family: Arial, sans-serif; font-weight: 800; text-anchor: middle; dominant-baseline: central; }
.op-map-label.is-selected { fill: #fff6c7; }.op-map-label.is-neutral { fill: #52605b; stroke: rgba(255,255,255,.75); }.op-map-label.is-muted { opacity: .08; }
.op-layer-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--op-gray); }.op-layer-dot--debt { background: #cc3434; }.op-layer-dot--leak { background: #00a8cf; }.op-layer-dot--owner { background: #66716d; }.op-layer-dot--moto { background: #775392; }.op-layer-dot--free { background: #21ae77; }.op-layer-dot--neutral { background: #d9dfdc; }
.op-map-spot.is-muted { opacity: .06; pointer-events: none; }
.op-map-spot.is-found { opacity: 1; stroke: #081b15; stroke-width: 5; filter: drop-shadow(0 0 5px rgba(255,255,255,.95)); animation: opMapFound 1s ease-in-out infinite alternate; }
.op-map-unassigned { fill: transparent; stroke: transparent; pointer-events: none; }
@keyframes opMapFound { to { stroke: #fff; stroke-width: 7; } }
.op-plan-help { margin: 10px 2px 0; color: var(--op-muted); font-size: 10px; }
.op-map-select-toggle { align-self: flex-end; white-space: nowrap; }
.op-map-selection-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 14px; padding: 13px 15px; border: 1px solid #b8d1c8; border-radius: 14px; background: var(--op-green-soft); }.op-map-selection-bar > div:first-child { min-width: 0; }.op-map-selection-bar strong, .op-map-selection-bar span { display: block; }.op-map-selection-bar span { max-width: 620px; margin-top: 3px; overflow: hidden; color: var(--op-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.op-map-selection-bar > div:last-child { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }.op-map-selection-bar .op-button { min-height: 36px; }
.op-map-fullscreen-open { overflow: hidden !important; }.op-plan-panel.is-fullscreen { position: fixed; z-index: 1000001; inset: 0; display: flex; flex-direction: column; min-height: 100vh; margin: 0; padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom)); border: 0; border-radius: 0; background: #f8faf9; }.op-plan-panel.is-fullscreen .op-plan-scroll { flex: 1; max-height: none; }.op-plan-panel.is-fullscreen .op-plan-help { display: none; }.op-map-fullscreen-select { display: none !important; }.op-plan-panel.is-fullscreen .op-map-fullscreen-select { display: inline-flex !important; }.op-plan-panel.is-fullscreen > .op-map-selection-bar { flex: 0 0 auto; margin-bottom: 10px; }
.op-plan-error { padding: 15px; border-radius: 10px; color: #962f2f; background: #fae2e2; font-size: 11px; }
.op-index-panel { padding: 0; overflow: hidden; }
.op-index-panel summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; }
.op-index-panel summary::-webkit-details-marker { display: none; }
.op-index-panel summary strong, .op-index-panel summary small { display: block; }.op-index-panel summary small { margin-top: 2px; color: var(--op-muted); font-size: 9px; }
.op-index-panel .op-place-grid { padding: 0 15px 15px; grid-template-columns: repeat(24, minmax(0, 1fr)); }
.op-place-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px; }
.op-place-cell { position: relative; aspect-ratio: 1.45; min-height: 19px; padding: 0; border: 0; border-radius: 3px; color: #fff; background: var(--op-gray); cursor: pointer; font-size: clamp(7px, .7vw, 10px); font-weight: 800; transition: .14s ease; }
.op-place-cell:hover { z-index: 2; transform: scale(1.18); box-shadow: 0 4px 12px rgba(20,40,32,.25); }.op-place-cell.is-muted { opacity: .13; }.op-place-cell.is-found { z-index: 3; outline: 3px solid var(--op-ink); transform: scale(1.13); box-shadow: 0 6px 14px rgba(20,40,32,.26); }
.op-place-cell.has-leak::after { content: ""; position: absolute; z-index: 2; top: -2px; right: -2px; width: 8px; height: 8px; border: 2px solid #fff; border-radius: 50%; background: #20a9d6; box-shadow: 0 1px 4px rgba(0,69,102,.35); }
.op-leak-dot { display: inline-block; width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; background: #20a9d6; box-shadow: 0 0 0 1px #20a9d6; }
.op-place-cell--free { background: #31a776; }.op-place-cell--reserved { background: #18a7a0; }.op-place-cell--active { background: var(--op-blue); }.op-place-cell--expiring { background: var(--op-amber); }.op-place-cell--overdue { background: var(--op-red); }.op-place-cell--incomplete { color: #463f22; background: var(--op-yellow); }.op-place-cell--owner { background: var(--op-gray); }.op-place-cell--other { background: var(--op-purple); }.op-place-cell--missing { background: #26332f; }
.op-table-total { display: flex; gap: 18px; color: var(--op-muted); font-size: 11px; }.op-table-total strong { color: var(--op-ink); }
.op-table-search { flex: 1; max-width: 360px; margin-left: auto; }.op-table-search input { min-height: 39px; font-size: 12px; }
.op-table-panel { padding: 4px 8px; }.op-table--leases { min-width: 1060px; }.op-menu-button { width: 34px; height: 30px; border: 0; border-radius: 8px; background: #eff3f1; cursor: pointer; letter-spacing: 1px; }.op-row-button { min-height: 34px; padding: 6px 11px; font-size: 10px; white-space: nowrap; }
.op-status-pill { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border-radius: 30px; color: #59635f; background: #edf1ef; font-size: 9px; font-weight: 800; white-space: nowrap; }
.op-status-pill--free { color: #187554; background: #dff2e9; }.op-status-pill--reserved { color: #08716d; background: #d8f3f1; }.op-status-pill--active { color: #285f90; background: #e5eef7; }.op-status-pill--expiring { color: #885712; background: #fbeacf; }.op-status-pill--overdue { color: #962f2f; background: #fae2e2; }.op-status-pill--incomplete { color: #6b5915; background: #f8efc6; }.op-status-pill--owner { color: #5e6965; background: #e8ecea; }.op-status-pill--other { color: #5d466e; background: #eee8f2; }
.op-success-text { color: #22815f !important; }.op-danger-text { color: var(--op-red) !important; }
.op-callout { display: flex; align-items: center; gap: 15px; margin-bottom: 14px; padding: 18px; border-radius: 16px; color: #fff; background: var(--op-green); }.op-callout-icon { display: grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; color: var(--op-green); background: var(--op-sand); }.op-callout strong { display: block; }.op-callout p { margin: 3px 0 0; color: rgba(255,255,255,.68); font-size: 11px; }
.op-audit-list { padding: 5px 20px; }.op-audit-row { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 13px; padding: 16px 0; border-bottom: 1px solid #edf1ef; }.op-audit-row:last-child { border-bottom: 0; }.op-audit-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; color: var(--op-green); background: var(--op-green-soft); }.op-audit-row strong, .op-audit-row span { display: block; }.op-audit-row span { margin-top: 3px; color: var(--op-muted); font-size: 10px; }.op-audit-meta { text-align: right; }.op-audit-meta strong { font-size: 11px; }
.op-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 15px; border: 1px solid transparent; border-radius: 11px; cursor: pointer; font-size: 11px; font-weight: 800; transition: .18s ease; }
.op-button:hover { transform: translateY(-1px); }.op-button svg { width: 17px; height: 17px; fill: currentColor; }.op-button--wide { width: 100%; }
.op-button--primary { color: #fff !important; background: var(--op-green-2); }.op-button--light { color: var(--op-ink); border-color: var(--op-line); background: #fff; }.op-sidebar .op-button--light { color: #fff; border-color: rgba(255,255,255,.19); background: rgba(255,255,255,.07); }.op-button--danger { color: #fff; background: var(--op-red); }.op-button--danger-light { color: var(--op-red); background: #fbe8e8; }
.op-modal-open { overflow: hidden; }.op-modal-backdrop { position: fixed; z-index: 1000010; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(16,29,25,.55); backdrop-filter: blur(5px); }.op-modal { width: min(680px, 100%); max-height: min(900px, calc(100vh - 48px)); padding: 25px; overflow-y: auto; border-radius: 23px; color: var(--op-ink); background: #fff; box-shadow: 0 28px 80px rgba(8,28,21,.28); animation: opModalIn .2s ease both; }
.op-modal--place { width: min(620px, 100%); }
@keyframes opModalIn { from { opacity: 0; transform: translateY(10px) scale(.985); } }
.op-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 21px; }.op-modal-head .op-icon-button { flex: 0 0 auto; }
.op-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }.op-field--span-2 { grid-column: 1 / -1; }
.op-check { display: flex; align-items: flex-start; gap: 10px; padding: 13px; border: 1px solid var(--op-line); border-radius: 12px; background: #fafbf9; cursor: pointer; }.op-check input { flex: 0 0 auto; width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--op-green); }.op-check strong, .op-check small { display: block; }.op-check strong { font-size: 11px; }.op-check small { margin-top: 3px; color: var(--op-muted); font-size: 9px; }
.op-quote { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(170px, 1.3fr); gap: 8px; margin-top: 16px; padding: 13px; border-radius: 14px; background: var(--op-ivory); }.op-quote > div { padding: 8px; }.op-quote span, .op-quote strong, .op-quote small { display: block; }.op-quote span { color: var(--op-muted); font-size: 9px; }.op-quote strong { margin-top: 5px; font-size: 13px; }.op-quote-total { border-left: 1px solid #d7cbb7; }.op-quote-total strong { color: var(--op-green); font-family: Georgia, serif; font-size: 20px; font-weight: 500; }.op-quote-total small { margin-top: 3px; color: var(--op-muted); font-size: 9px; }
.op-modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 20px; padding-top: 17px; border-top: 1px solid var(--op-line); }
.op-payment-intro { display: flex; align-items: center; gap: 12px; margin-bottom: 17px; padding: 13px; border-radius: 13px; color: var(--op-green); background: var(--op-green-soft); }.op-payment-icon { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; color: #fff; background: var(--op-green); }.op-payment-intro p { margin: 0; font-size: 11px; font-weight: 650; }
.op-place-hero { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding: 17px; border-radius: 14px; background: #f2f4f3; }.op-place-hero > span:last-child { margin-left: auto; color: var(--op-muted); }.op-place-hero--free { background: #e6f3ed; }.op-place-hero--reserved { background: #def4f2; }.op-place-hero--overdue { background: #fbe8e8; }.op-place-hero--active { background: #e8f0f7; }.op-place-hero--incomplete { background: #faf2ce; }

.op-allocation-list { display: grid; gap: 8px; margin-top: 10px; }.op-allocation-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border: 1px solid var(--op-line); border-radius: 12px; background: #fafbfa; }.op-allocation-row span { display: grid; gap: 3px; }.op-allocation-row small { color: var(--op-muted); font-size: 10px; }.op-allocation-row input { width: 140px; min-height: 40px; padding: 8px 10px; border: 1px solid var(--op-line); border-radius: 9px; text-align: right; font-weight: 750; background: #fff; }.op-allocation-total { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 11px 14px; border-radius: 10px; font-size: 11px; }.op-allocation-total.is-ok { color: #176d4e; background: #e2f4eb; }.op-allocation-total.is-warning { color: #8b5711; background: #fbecd2; }.op-client-operational { display: grid; gap: 3px; margin: 14px 0; padding: 12px; border-radius: 11px; background: #f5f7f6; }.op-client-operational span { color: var(--op-muted); font-size: 10px; }
.op-client-picker { position: relative; min-width: 0; }
.op-client-options { display: grid; max-height: 290px; margin-top: 7px; overflow-y: auto; border: 1px solid var(--op-line); border-radius: 12px; background: #fff; box-shadow: 0 12px 34px rgba(20,45,36,.11); }
.op-client-options:empty { display: none; }
.op-client-option { display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-bottom: 1px solid #edf1ef; background: #fff; cursor: pointer; text-align: left; }
.op-client-option:last-child { border-bottom: 0; }.op-client-option:hover { background: var(--op-green-soft); }
.op-client-option > span:last-child { min-width: 0; }.op-client-option strong, .op-client-option small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-client-option strong { font-size: 11px; }.op-client-option small { margin-top: 3px; color: var(--op-muted); font-size: 9px; }
.op-client-option-empty { padding: 16px; color: var(--op-muted); text-align: center; font-size: 11px; }
.op-telegram-admin-connect { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px; border: 1px solid var(--op-line); border-radius: 14px; background: var(--op-green-soft); }.op-telegram-admin-connect > div { min-width: 0; }.op-telegram-admin-connect strong, .op-telegram-admin-connect small { display: block; }.op-telegram-admin-connect strong { margin-top: 8px; }.op-telegram-admin-connect small { margin-top: 4px; color: var(--op-muted); font-size: 10px; }.op-telegram-admin-connect .op-button { flex: 0 0 auto; }
.op-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--op-line); border-radius: 14px; background: var(--op-line); }.op-detail-grid > div { padding: 13px; background: #fff; }.op-detail-grid span, .op-detail-grid strong { display: block; }.op-detail-grid span { color: var(--op-muted); font-size: 9px; }.op-detail-grid strong { margin-top: 5px; font-size: 12px; }
.op-detail-grid .op-detail-span { grid-column: 1 / -1; }
.op-leak-warning { display: flex; align-items: flex-start; gap: 12px; margin-top: 14px; padding: 13px; border: 1px solid #b9e5f3; border-radius: 13px; color: #176782; background: #e7f7fc; }.op-leak-warning > span { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; color: #fff; background: #20a9d6; }.op-leak-warning svg { width: 18px; height: 18px; fill: currentColor; }.op-leak-warning strong { display: block; }.op-leak-warning p { margin: 3px 0 0; color: #467d8f; font-size: 10px; }
.op-selected-places { display: flex; flex-wrap: wrap; gap: 6px; margin: -7px 0 16px; }.op-selected-places span { padding: 5px 9px; border-radius: 999px; color: var(--op-green); background: var(--op-green-soft); font-size: 10px; font-weight: 800; }
.op-place-history { margin-top: 14px; overflow: hidden; border: 1px solid var(--op-line); border-radius: 13px; background: #fff; }.op-place-history summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; cursor: pointer; font-size: 11px; font-weight: 800; list-style: none; }.op-place-history summary::-webkit-details-marker { display: none; }.op-place-history summary b { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; color: var(--op-green); background: var(--op-green-soft); font-size: 9px; }.op-place-history > div { padding: 0 14px 5px; }.op-place-history p { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin: 0; padding: 10px 0; border-top: 1px solid #edf1ef; }.op-place-history p span, .op-place-history p strong, .op-place-history p small { display: block; }.op-place-history p small { margin-top: 3px; color: var(--op-muted); font-size: 9px; }.op-place-history time { flex: 0 0 auto; color: var(--op-muted); font-size: 9px; white-space: nowrap; }
.op-form-section { grid-column: 1 / -1; margin-top: 4px; padding-top: 13px; border-top: 1px solid var(--op-line); }.op-form-section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.op-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }.op-settings-fields { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 13px; }.op-settings-fields--three { grid-template-columns: repeat(3, minmax(0,1fr)); }.op-settings-cap { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) 180px; align-items: center; gap: 30px; }.op-settings-cap h2 { margin: 3px 0 7px; }.op-settings-cap p:not(.op-eyebrow) { margin: 0; color: var(--op-muted); font-size: 11px; }.op-settings-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.op-muted { color: var(--op-muted); }.op-action-sheet { display: grid; }
.op-empty, .op-empty-small { display: grid; place-items: center; min-height: 160px; padding: 30px; color: var(--op-muted); text-align: center; }.op-empty-small { min-height: 110px; }.op-empty strong, .op-empty span, .op-empty-small strong, .op-empty-small span { display: block; }.op-empty strong, .op-empty-small strong { color: var(--op-ink); }.op-empty span, .op-empty-small span { margin-top: 5px; font-size: 11px; }
.op-error, .op-login { max-width: 540px; margin: 50px auto; padding: 30px; border: 1px solid var(--op-line); border-radius: 18px; background: #fff; text-align: center; }.op-error strong { font-size: 20px; }.op-error p { color: var(--op-muted); }
.op-boot { display: flex; align-items: center; justify-content: center; gap: 11px; min-height: 300px; color: var(--op-muted); }.op-spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid rgba(23,74,59,.2); border-top-color: var(--op-green); border-radius: 50%; animation: opSpin .7s linear infinite; }@keyframes opSpin { to { transform: rotate(360deg); } }
.op-toast-root { position: fixed; z-index: 1000020; right: 24px; bottom: 24px; }.op-toast { display: flex; align-items: center; gap: 10px; min-width: 260px; padding: 13px 16px; border-radius: 13px; color: #fff; background: var(--op-green); box-shadow: 0 14px 40px rgba(15,35,28,.22); animation: opToast .2s ease both; }.op-toast--error { background: var(--op-red); }.op-toast--loading { background: var(--op-ink); }.op-toast--loading .op-spinner { border-color: rgba(255,255,255,.25); border-top-color: #fff; }@keyframes opToast { from { opacity: 0; transform: translateY(8px); } }.op-toast strong { font-size: 11px; }
.op-mobile-nav { display: none; }

@media (max-width: 1180px) {
  .op-shell { grid-template-columns: 200px minmax(0, 1fr); }.op-main { padding: 0 20px 28px; }.op-sidebar { padding-left: 12px; padding-right: 12px; }
  .op-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }.op-dashboard-grid, .op-dashboard-grid--bottom { grid-template-columns: 1fr; }.op-map-layout { grid-template-columns: 1fr; }.op-index-panel { max-width: none; }.op-place-grid { grid-template-columns: repeat(16, minmax(0, 1fr)); }.op-place-cell { aspect-ratio: 1.2; }
}

@media (max-width: 782px) {
  .op-wp-admin-wrap { margin: 10px 10px 0 0 !important; }.op-shell { display: block; min-height: 100vh; border: 0; border-radius: 0; box-shadow: none; }.op-sidebar { display: none; }.op-main { padding: 0 14px 88px; }.op-topbar { min-height: 84px; }.op-topbar-tools .op-icon-button { display: none; }.op-global-search { min-width: 0; width: 122px; }.op-global-search input { font-size: 12px; }.op-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }.op-metric { min-height: 125px; padding: 15px; border-radius: 16px; }.op-metric strong { font-size: 25px; }.op-dashboard-grid { gap: 9px; margin-top: 9px; }.op-panel { padding: 15px; border-radius: 16px; }.op-occupancy-content { grid-template-columns: 130px minmax(0, 1fr); gap: 15px; }.op-ring { width: 125px; height: 125px; }.op-ring::before { width: 94px; height: 94px; }.op-ring strong { font-size: 25px; }.op-toolbar { flex-wrap: wrap; align-items: stretch; }.op-toolbar .op-map-search { width: 100%; margin-left: 0; }.op-field--compact { flex: 1; min-width: 135px; }.op-segmented { max-width: 100%; overflow-x: auto; }.op-map-layout { gap: 9px; }.op-plan-panel { min-height: 270px; }.op-place-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }.op-place-cell { aspect-ratio: 1.4; font-size: 8px; }.op-table-search { order: 3; flex-basis: 100%; max-width: none; margin-left: 0; }.op-table-total { flex: 1; flex-direction: column; gap: 2px; }.op-toolbar--table .op-button { margin-left: auto; }.op-form-grid { grid-template-columns: 1fr; }.op-field--span-2 { grid-column: auto; }.op-quote { grid-template-columns: repeat(3, 1fr); }.op-quote-total { grid-column: 1 / -1; border-top: 1px solid #d7cbb7; border-left: 0; }.op-modal-backdrop { align-items: end; padding: 0; }.op-modal { width: 100%; max-height: 92vh; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; }.op-modal-actions { position: sticky; bottom: -20px; margin-left: -16px; margin-right: -16px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); background: #fff; }.op-detail-grid { grid-template-columns: 1fr; }.op-audit-row { grid-template-columns: 38px minmax(0,1fr); }.op-audit-meta { grid-column: 2; text-align: left; }.op-mobile-nav { position: fixed; z-index: 9990; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(6, 1fr); align-items: end; height: calc(68px + env(safe-area-inset-bottom)); padding: 8px 5px env(safe-area-inset-bottom); border-top: 1px solid var(--op-line); background: rgba(255,255,255,.96); backdrop-filter: blur(12px); }.op-mobile-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 50px; padding: 0; border: 0; color: var(--op-muted); background: transparent; font-size: 8px; font-weight: 700; }.op-mobile-nav button.is-active { color: var(--op-green); }.op-mobile-nav svg { width: 19px; height: 19px; fill: currentColor; }.op-mobile-nav .op-mobile-add { align-self: start; width: 48px; height: 48px; margin: -18px auto 0; border-radius: 50%; color: #fff; background: var(--op-green); box-shadow: 0 8px 24px rgba(23,74,59,.28); }.op-mobile-nav .op-mobile-add svg { width: 23px; height: 23px; }
}

@media (max-width: 782px) {
  .op-table-panel { padding: 0; border: 0; background: transparent; box-shadow: none; }
  .op-table-wrap { overflow: visible; }
  .op-table--leases, .op-table--payments { display: block; min-width: 0; }
  .op-table--leases thead, .op-table--payments thead { display: none; }
  .op-table--leases tbody, .op-table--payments tbody { display: grid; gap: 10px; }
  .op-table--leases tr, .op-table--payments tr { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 13px 16px; padding: 15px; border: 1px solid var(--op-line); border-radius: 16px; background: #fff; box-shadow: 0 5px 18px rgba(37,56,49,.035); }
  .op-table--leases td, .op-table--payments td { display: block; min-width: 0; padding: 0; border: 0 !important; text-align: left !important; background: transparent !important; }
  .op-table--leases td::before, .op-table--payments td::before { content: attr(data-label); display: block; margin-bottom: 4px; color: var(--op-muted); font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
  .op-table--leases td.op-mobile-wide, .op-table--payments td.op-mobile-wide, .op-table--leases td.op-mobile-actions, .op-table--payments td.op-mobile-actions { grid-column: 1 / -1; }
  .op-table--leases td.op-mobile-actions:empty, .op-table--payments td.op-mobile-actions:empty { display: none; }
  .op-table--leases td.op-mobile-actions::before, .op-table--payments td.op-mobile-actions::before { display: none; }
  .op-table--leases .op-row-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .op-table--leases .op-row-button { width: 100%; min-height: 42px; white-space: normal; }
  .op-table--leases td small, .op-table--payments td small { max-width: 100%; white-space: normal; }
  .op-table--payments .op-method { max-width: 100%; white-space: normal; }
  .op-client-options { max-height: 230px; }
  .op-index-panel .op-place-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; padding: 0 14px 16px; }
  .op-index-panel .op-place-cell { aspect-ratio: auto; min-height: 34px; overflow: hidden; border-radius: 7px; font-size: 11px; font-variant-numeric: tabular-nums; line-height: 1; }
  .op-modal-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .op-modal-actions .op-button { width: 100%; min-width: 0; min-height: 48px; height: auto; padding: 9px 10px; white-space: normal; line-height: 1.25; text-align: center; }
  .op-modal-actions > :only-child { grid-column: 1 / -1; }
  .op-place-actions { position: static; bottom: auto; margin-bottom: -20px; }
  .op-place-actions > .op-button--primary:first-child { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .op-plan-head { align-items: flex-start; flex-direction: column; }
  .op-plan-head > div:first-child, .op-level-switch { width: 100%; }
  .op-level-switch button { flex: 1; justify-content: center; min-height: 31px; padding: 4px 7px; }
  .op-zoom-controls { width: 100%; }
  .op-zoom-controls button:last-child { margin-left: auto; }
  .op-plan-scroll { max-height: 64vh; }
}

@media (max-width: 480px) {
  .op-allocation-row { align-items: stretch; flex-direction: column; }.op-allocation-row input { width: 100%; }.op-allocation-total { flex-direction: column; }
  .op-main { padding-left: 10px; padding-right: 10px; }.op-topbar h1 { font-size: 25px; }.op-eyebrow { font-size: 8px; }.op-global-search { width: 108px; }.op-metrics { grid-template-columns: 1fr 1fr; }.op-metric { min-height: 113px; padding: 13px; }.op-metric span { font-size: 9px; }.op-metric strong { font-size: 21px; }.op-metric small { font-size: 9px; }.op-occupancy-content { grid-template-columns: 1fr; }.op-legend-list { width: 100%; }.op-panel-head { align-items: flex-start; }.op-text-button { font-size: 10px; }.op-map-legend { max-height: 42px; overflow: hidden; }.op-place-cell { min-height: 21px; }.op-toolbar--table .op-button { width: 100%; }.op-table-total { flex-direction: row; justify-content: space-between; width: 100%; }.op-quote { grid-template-columns: 1fr 1fr; }.op-quote > div:nth-child(3) { grid-column: 1 / -1; }.op-place-hero { flex-wrap: wrap; }.op-place-hero > span:last-child { width: 100%; margin-left: 0; }.op-telegram-admin-connect { align-items: stretch; flex-direction: column; }.op-telegram-admin-connect .op-button { width: 100%; }
}

@media (max-width: 782px) {
  .op-detail-grid .op-detail-span { grid-column: auto; }
  .op-modal--place { max-height: 88vh; }
  .op-modal--place .op-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .op-modal--place .op-detail-grid > div { padding: 10px; }
  .op-modal--place .op-place-hero { margin-bottom: 12px; padding: 13px; }
  .op-map-selection-bar { align-items: stretch; flex-direction: column; gap: 10px; }
  .op-map-selection-bar > div:last-child { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .op-map-selection-bar .op-button { width: 100%; min-width: 0; padding: 7px 8px; white-space: normal; }
  .op-plan-panel.is-fullscreen { padding: max(10px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)); }
  .op-plan-panel.is-fullscreen .op-plan-head { margin-bottom: 8px; }
  .op-plan-panel.is-fullscreen .op-zoom-controls { flex-wrap: wrap; }
  .op-place-history p { align-items: stretch; flex-direction: column; gap: 5px; }
  .op-place-history time { white-space: normal; }
  .op-settings-grid { grid-template-columns: 1fr; }
  .op-settings-fields--three { grid-template-columns: 1fr; }
  .op-settings-cap { grid-column: auto; grid-template-columns: 1fr; gap: 14px; }
  .op-settings-actions { grid-column: auto; }
}

.op-cad-details { margin: 16px 0 0; padding: 12px 14px; border: 1px solid var(--op-line); border-radius: 14px; background: #f7f5ef; }
.op-cad-details summary { cursor: pointer; font-weight: 700; color: var(--op-green); }
.op-cad-details p { margin: 8px 0 12px; color: var(--op-muted); font-size: 11px; }
.op-cad-details img { width: 100%; max-height: 560px; object-fit: contain; background: #fff; border-radius: 10px; }
.op-client-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.op-client-card { padding: 20px; }
.op-client-head { display: flex; align-items: center; gap: 12px; }
.op-client-head > div { flex: 1; min-width: 0; }
.op-client-head h3 { margin: 0 0 4px; font-size: 17px; }
.op-client-head > div > span { color: var(--op-muted); font-size: 10px; }
.op-client-places { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0; }
.op-client-places button { padding: 7px 10px; border: 0; border-radius: 999px; color: var(--op-green); background: var(--op-green-soft); font-weight: 750; cursor: pointer; }
.op-row-actions { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.op-table tr.is-reversed { opacity: .55; text-decoration: line-through; }
.op-table tr.is-reversed button { text-decoration: none; }
.op-table tr.is-pending { background: #fff9e8; }
.op-table tr.is-pending td:first-child small { color: #936d16; }
.op-inbox-panel { margin-top: 14px; }
.op-inbox-list { display: grid; gap: 8px; margin-top: 14px; }
.op-inbox-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid var(--op-line); }
.op-inbox-row strong, .op-inbox-row small { display: block; }
.op-inbox-row small { max-width: 720px; margin-top: 4px; color: var(--op-muted); }
.op-integrations-form, .op-class-tariffs-form { margin-top: 14px; }
.op-class-tariff-scope { margin: 16px 0; }
.op-settings-wide { grid-column: 1 / -1; }
.op-integration-note { margin-top: 14px; padding: 12px; border-radius: 12px; color: var(--op-muted); background: var(--op-ivory); font-size: 10px; }
.op-integration-note code { color: var(--op-green); }
.op-client-notify { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--op-line); }
.op-metrics--six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.op-metrics--eight { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.op-tariff-history { display: grid; gap: 5px; padding: 12px 14px; border: 1px solid var(--op-line); border-radius: 12px; background: #fafbf9; }
.op-tariff-history > strong { margin-bottom: 3px; font-size: 10px; }
.op-tariff-history > span { color: var(--op-muted); font-size: 10px; }
.op-field small { display: block; margin-top: 5px; color: var(--op-muted); font-size: 9px; }
.op-max-webhook-state .op-status-pill { align-self: flex-start; }
.op-map-spot.is-moto { stroke-dasharray: 5 2; }
.op-place-cell.is-moto { box-shadow: inset 0 0 0 2px rgba(255,255,255,.7); }
.op-place-hero.is-moto { box-shadow: inset 4px 0 0 #754ea0; }
.op-allocation-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.op-allocation-head .op-eyebrow { margin: 0; }
.op-callout--warning { color: #604313; background: #fff0ce; }
.op-callout--warning p { color: #7e622d; }
.op-phone-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.op-phone-card { display: grid; align-content: start; gap: 9px; padding: 15px; }
.op-phone-card[hidden], #op-phone-empty[hidden] { display: none !important; }
.op-phone-card--clickable { cursor: pointer; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.op-phone-card--clickable:hover { transform: translateY(-2px); border-color: #b9ccc4; box-shadow: 0 12px 30px rgba(28,61,49,.08); }
.op-contact-open { display: inline-flex; align-items: center; gap: 5px; justify-self: start; }.op-contact-open svg { width: 14px; height: 14px; fill: currentColor; }
.op-contact-links { display: grid; gap: 8px; margin-top: 4px; }
.op-contact-links a, .op-contact-links span { color: var(--op-muted); text-decoration: none; }
.op-contact-links .op-contact-phone { color: var(--op-ink); font-size: 17px; font-weight: 760; line-height: 1.2; }
.op-contact-links a.op-contact-phone:hover { color: var(--op-green); }
.op-messenger-links { display: flex; flex-wrap: wrap; gap: 6px; }
.op-messenger-link { display: inline-flex; align-items: center; min-height: 30px; padding: 5px 9px; border: 1px solid var(--op-line); border-radius: 999px; background: #fff; font-size: 9px; font-weight: 750; }
.op-messenger-link:hover { border-color: var(--op-green); color: var(--op-green); text-decoration: none; }
.op-messenger-link.is-connected::before { content: ""; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #21ae77; }
.op-bot-status { display: flex; flex-wrap: wrap; gap: 7px; }
.op-bot-status--large { margin: 12px 0; }
.op-bot-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 5px 9px; border-radius: 999px; color: #65736e; background: #edf1ef; font-size: 9px; font-weight: 800; }
.op-bot-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #9ba5a1; }
.op-bot-badge.is-connected { color: #17664c; background: #e1f2eb; }.op-bot-badge.is-connected::before { background: #1fa873; }
.op-contact-email { margin-top: 7px; }.op-contact-email a { color: var(--op-muted); font-size: 10px; text-decoration: none; }.op-contact-email a:hover { color: var(--op-green); text-decoration: underline; }
.op-contact-roles { display: flex; flex-wrap: wrap; gap: 6px; }
.op-contact-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 7px; }
.op-contact-status-row { display: flex; flex: 1 1 auto; align-items: center; justify-content: flex-end; gap: 8px; }
.op-contact-debt { margin-left: auto; white-space: nowrap; color: var(--op-muted); font-size: 10px; font-weight: 800; }
.op-contact-debt.has-debt { color: var(--op-red); }
.op-contact-phone--plain { cursor: default; }
.op-contact-places { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 7px; padding-top: 8px; border-top: 1px solid var(--op-line); }
.op-contact-places > span, .op-contact-meta span { color: var(--op-muted); font-size: 9px; }
.op-contact-places > div { display: flex; flex-wrap: wrap; gap: 6px; }
.op-contact-places button { padding: 6px 9px; border: 0; border-radius: 999px; color: var(--op-green); background: var(--op-green-soft); font-size: 10px; font-weight: 750; cursor: pointer; }
.op-contact-places button.is-moto { color: #67428e; background: #f0e9f8; }
.op-contact-meta { display: grid; gap: 4px; }
.op-contact-meta strong { font-size: 11px; }
.op-contact-profile { margin-bottom: 18px; padding: 16px; border-radius: 16px; background: #f5f8f6; }
.op-contact-profile > a { color: var(--op-green); }
.op-contact-finance { margin-bottom: 18px; }
.op-contact-section { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--op-line); }
.op-contact-section h3 { margin: 2px 0 0; }
.op-contact-lease { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 5px 12px; padding: 12px 0; border-bottom: 1px solid #edf1ef; }
.op-contact-lease > div { display: flex; align-items: center; gap: 12px; }.op-contact-lease small { grid-column: 1 / -1; color: var(--op-muted); }
.op-pass-register, .op-inbox-list { display: grid; gap: 9px; }
.op-pass-row, .op-contact-activity { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--op-line); border-radius: 13px; background: #fafcfb; }
.op-pass-row strong, .op-pass-row small, .op-contact-activity strong, .op-contact-activity small { display: block; }.op-pass-row small, .op-contact-activity small { margin-top: 3px; color: var(--op-muted); font-size: 9px; }
.op-contact-activity { grid-template-columns: minmax(0,1fr) auto; }.op-contact-activity > span { color: var(--op-muted); font-size: 9px; }
.op-review-panel { margin-bottom: 18px; border-color: #e8cf91; background: #fffdfa; }
.op-inbox-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--op-line); border-radius: 13px; background: #fff; }
.op-inbox-row strong, .op-inbox-row small { display: block; }.op-inbox-row small { margin-top: 4px; color: var(--op-muted); }

@media (max-width: 1180px) { .op-metrics--eight { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .op-client-grid, .op-phone-grid { grid-template-columns: 1fr; }.op-row-actions { flex-direction: column; align-items: flex-end; }.op-metrics--six, .op-metrics--eight { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .op-allocation-head { align-items: stretch; flex-direction: column; }.op-allocation-head .op-button { width: 100%; }.op-phone-grid { gap: 9px; }.op-pass-row, .op-inbox-row { grid-template-columns: 1fr; }.op-pass-row .op-text-button, .op-inbox-row .op-row-actions { justify-self: start; }.op-contact-lease { grid-template-columns: 1fr; }.op-contact-lease .op-status-pill { justify-self: start; } }

.op-incident-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; margin-top: 20px; }
.op-incident-card { padding: 24px; }
.op-incident-card > p { white-space: pre-wrap; line-height: 1.5; }
.op-incident-photo { display: block; width: 100%; max-height: 260px; object-fit: cover; border-radius: 18px; margin: 14px 0; }
.op-reconciliation { margin: 20px 0; padding: 24px; }
.op-reconciliation-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.op-reconciliation-grid > div { display: flex; flex-direction: column; gap: 5px; padding: 14px; border-radius: 14px; background: #f4f7f5; }
.op-payment-warning, .op-payment-mismatch { color: #a33f38 !important; font-weight: 700; }
.op-client-access { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border-top: 1px solid var(--op-line); padding-top: 14px; }
.op-client-access span { width: 100%; color: var(--op-muted); }
.op-client-access button { border: 1px solid var(--op-line); border-radius: 999px; background: #fff; padding: 7px 11px; cursor: pointer; }
.op-client-access button:disabled { opacity: .45; cursor: not-allowed; }
.op-client-access small { display: block; margin-top: 5px; color: #a33f38; }
.op-modal--wide { width: min(820px, 100%); }
.op-merge-list { display: grid; gap: 12px; margin-top: 14px; }
.op-merge-card { display: grid; gap: 11px; padding: 14px; border: 1px solid var(--op-line); border-radius: 15px; background: #fafcfb; }
.op-merge-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.op-merge-head strong, .op-merge-head small { display: block; }
.op-merge-head small { margin-top: 3px; color: var(--op-muted); font-size: 9px; }
.op-merge-head > span { color: var(--op-muted); font-size: 10px; }
.op-merge-members { display: grid; gap: 7px; }
.op-merge-members label { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: start; gap: 9px; padding: 10px; border: 1px solid var(--op-line); border-radius: 11px; background: #fff; cursor: pointer; }
.op-merge-members input { margin-top: 3px; }
.op-merge-members b, .op-merge-members small { display: block; }
.op-merge-members small { margin-top: 2px; color: var(--op-muted); font-size: 9px; }
.op-radio-group { display: grid; gap: 8px; margin: 0; padding: 12px; border: 1px solid var(--op-line); border-radius: 14px; }
.op-radio-group legend { padding: 0 6px; color: var(--op-muted); font-size: 10px; font-weight: 750; }
.op-radio-group label { display: flex; align-items: flex-start; gap: 9px; padding: 10px; border-radius: 10px; background: #f7f9f8; cursor: pointer; }
.op-radio-group label span, .op-radio-group label b, .op-radio-group label small { display: block; }
.op-health-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-top: 18px; }
.op-health-card { padding: 20px; border-left: 5px solid var(--op-line); }
.op-health-card > div { display: flex; align-items: center; gap: 8px; }
.op-health-card h3 { margin: 0; }
.op-health-card > strong { display: block; margin: 12px 0 6px; }
.op-health-card > p { margin: 0; color: var(--op-muted); }
.op-health-card--ok { border-left-color: #2b8a66; }.op-health-card--warning { border-left-color: #d39a2c; }.op-health-card--error { border-left-color: #c6554e; }.op-health-card--off { opacity: .7; }
.op-health-dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.op-pwa-card { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 16px; padding: 24px; }
.op-pwa-card p { margin: 7px 0; color: var(--op-muted); }
.op-dashboard-grid--control { margin-top: 16px; }
.op-control-panel { padding: 22px; }
.op-anomaly-panel { margin-top: 16px; }
.op-control-list { display: grid; gap: 0; }
.op-control-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--op-line); }
.op-control-row strong, .op-control-row small { display: block; }
.op-control-row small { margin-top: 3px; color: var(--op-muted); font-size: 9px; }
.op-control-list--modal { max-height: min(68vh, 700px); overflow: auto; }
.op-quality-dot { width: 9px; height: 9px; border-radius: 50%; background: #d49a2b; }
.op-quality-dot--error { background: #cf554f; }
.op-quality-dot--warning { background: #d49a2b; }
.op-contact-quick, .op-contact-lease-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.op-contact-quick { padding-top: 8px; border-top: 1px solid var(--op-line); }
.op-contact-quick button, .op-contact-lease-actions button { padding: 6px 10px; border: 1px solid var(--op-line); border-radius: 999px; color: var(--op-green); background: #fff; font-size: 9px; font-weight: 750; cursor: pointer; }
.op-contact-lease-actions { grid-column: 1 / -1; }
.op-contact-lease .op-tariff-history { grid-column: 1 / -1; display: block; padding: 9px 11px; }
.op-tariff-history summary { cursor: pointer; color: var(--op-green); font-size: 9px; font-weight: 750; }
.op-tariff-history ul { display: grid; gap: 7px; margin: 9px 0 0; padding: 0; list-style: none; }
.op-tariff-history li { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 3px 10px; }
.op-tariff-history li span, .op-tariff-history li small { color: var(--op-muted); font-size: 8px; }
.op-tariff-history li small { grid-column: 2; }
.op-contact-archive { margin-top: 20px; border: 1px solid var(--op-line); border-radius: 15px; overflow: hidden; }
.op-contact-archive > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; cursor: pointer; list-style: none; background: #f5f7f6; }
.op-contact-archive > summary::-webkit-details-marker { display: none; }
.op-contact-archive > summary span, .op-contact-archive > summary b, .op-contact-archive > summary small { display: block; }
.op-contact-archive > summary small { margin-top: 3px; color: var(--op-muted); font-size: 9px; }
.op-contact-archive > summary svg { width: 16px; height: 16px; fill: currentColor; }
.op-contact-archive-body { padding: 0 14px 14px; }
.op-contact-archive-body h4 { margin: 18px 0 8px; }
@media (max-width: 782px) { .op-incident-grid, .op-reconciliation-grid { grid-template-columns: 1fr; }.op-incident-card { padding: 18px; } }
@media (max-width: 900px) { .op-health-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .op-health-grid { grid-template-columns: 1fr; }.op-pwa-card { align-items: stretch; flex-direction: column; }.op-pwa-card .op-button { width: 100%; } }

@media (max-width: 782px) {
  .op-app input, .op-app select, .op-app textarea { font-size: 16px; }
  .op-main { padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
  .op-mobile-nav { width: 100vw; max-width: 100vw; min-height: calc(72px + env(safe-area-inset-bottom)); height: auto; box-sizing: border-box; padding-right: max(5px, env(safe-area-inset-right)); padding-bottom: max(6px, env(safe-area-inset-bottom)); padding-left: max(5px, env(safe-area-inset-left)); box-shadow: 0 -8px 24px rgba(26,48,40,.08); }
  .op-mobile-nav button { min-width: 0; }
  .op-view > :last-child { margin-bottom: 8px; }
  .op-phone-card { grid-template-columns: 1fr; gap: 7px; padding: 12px; }
  .op-phone-card .op-client-head { align-items: flex-start; gap: 9px; }
  .op-phone-card .op-client-head .op-avatar { width: 30px; height: 30px; }
  .op-phone-card .op-client-head h3 { margin-bottom: 1px; font-size: 16px; line-height: 1.15; }
  .op-phone-card .op-contact-links { gap: 4px; margin-top: 2px; }
  .op-phone-card .op-contact-links .op-contact-phone { font-size: 14px; }
  .op-phone-card .op-messenger-links { display: none; }
  .op-phone-card .op-contact-summary { justify-content: flex-start; }
  .op-phone-card .op-contact-status-row { width: 100%; justify-content: space-between; }
  .op-phone-card .op-contact-debt { font-size: 9px; }
  .op-phone-card .op-status-pill, .op-phone-card .op-bot-badge { min-height: 23px; padding: 3px 7px; font-size: 8px; }
  .op-phone-card .op-contact-places { grid-template-columns: 72px minmax(0,1fr); padding-top: 6px; }
  .op-phone-card .op-contact-places button { padding: 4px 7px; font-size: 9px; }
  .op-phone-card .op-contact-meta { display: none; }
  .op-phone-card .op-contact-open { justify-self: end; margin-top: -2px; padding: 3px 0; }
  .op-dashboard-grid--control { grid-template-columns: 1fr; }
  .op-control-panel { padding: 16px; }
  .op-control-row { grid-template-columns: auto minmax(0,1fr); }
  .op-control-row > .op-text-button, .op-control-row > .op-button { grid-column: 2; justify-self: start; }
  .op-contact-quick { margin-top: 2px; }
  .op-merge-card { padding: 11px; }
}

@media print {
  .op-sidebar, .op-topbar-tools, .op-mobile-nav, .op-toolbar, .op-modal-backdrop { display: none !important; }.op-shell { display: block; border: 0; box-shadow: none; }.op-main { padding: 0; }.op-panel { break-inside: avoid; box-shadow: none; }
}

/* Review tables stay inside the dialog on narrow screens. */
.op-ledger-scroll { overflow-x: auto; max-height: 55vh; overscroll-behavior: contain; margin: 16px 0; }
.op-review-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.op-review-table th, .op-review-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #dce5e1; vertical-align: top; }
.op-review-table th { position: sticky; top: 0; background: #eef4f1; }
.op-review-table td:not(:nth-child(2)) { white-space: nowrap; }

/* 4.5: compact operational layout */
#otrada-parking-app [hidden] { display:none !important; }
#otrada-parking-app .op-topbar {gap:16px;margin-bottom:20px;}
#otrada-parking-app .op-topbar h1 {font-size:clamp(25px,3vw,36px);line-height:1.15;}
#otrada-parking-app .op-global-search {width: min(380px,45vw);}
#otrada-parking-app .op-panel {padding:20px;}
#otrada-parking-app .op-panel h2 {font-size:26px;}
#otrada-parking-app .op-metric {min-height:145px;padding:22px;}
#otrada-parking-app .op-phone-grid {display:flex;flex-direction:column;gap:8px;}
#otrada-parking-app .op-phone-card {display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px 18px;margin:0;min-height:86px;border-radius:18px;}
#otrada-parking-app .op-phone-card .op-avatar {height:38px;width:38px;font-size:14px;}
#otrada-parking-app .op-phone-card h3 {font-size:17px;margin:0 0 3px;line-height:1.25;overflow-wrap:anywhere;}
#otrada-parking-app .op-contact-row-main {min-width:0;display:flex;flex-direction:column;gap:3px;}
#otrada-parking-app .op-contact-row-main small {font-size:12px;color:#60716b;overflow-wrap:anywhere;}
#otrada-parking-app .op-contact-phone--plain {font-size:14px;font-weight:400;color:#60716b;}
#otrada-parking-app .op-contact-row-end {display:flex;align-items:center;gap:14px;}
#otrada-parking-app .op-bot-badge {font-size:11px;padding:5px 8px;}
#otrada-parking-app .op-contact-debt {font-size:13px;white-space:normal;text-align:right;}
#otrada-parking-app .op-contact-tabs {display:flex;gap:4px;margin:14px 0;background:#eef3f0;border-radius:14px;padding:4px;}
#otrada-parking-app .op-contact-tabs button {flex:1;padding:11px 5px;border:0;background:transparent;border-radius:11px;color:#60716b;cursor:pointer;}
#otrada-parking-app .op-contact-tabs button.is-active {background:white;color:#184c3c;font-weight:700;box-shadow:0 1px 4px #0001;}
#otrada-parking-app .op-modal--contact {max-width:850px;}
#otrada-parking-app .op-contact-sticky {position:sticky;top:-24px;background:white;z-index:3;padding-top:8px;}
#otrada-parking-app .op-contact-sticky h2 {font-size:25px;}
#otrada-parking-app .op-contact-finance {margin:16px 0;}
#otrada-parking-app .op-contact-footer {position:sticky;bottom:-24px;background:white;padding:12px 0;margin-top:20px;z-index:4;}
#otrada-parking-app .op-search-result {display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;padding:14px;text-align:left;background:#f3f7f4;border:1px solid #dee7e1;border-radius:12px;margin:8px 0;cursor:pointer;}
#otrada-parking-app .op-search-result small {color:#68786f;}
#otrada-parking-app .op-pagination {display:flex;align-items:center;justify-content:center;gap:16px;padding:12px;}
#otrada-parking-app .op-pagination button {border:1px solid #dbe4de;border-radius:10px;background:white;padding:9px 14px;cursor:pointer;}
#otrada-parking-app .op-pagination button:disabled {opacity:.4;cursor:default;}
#otrada-parking-app .op-more-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:20px;}
#otrada-parking-app .op-more-grid button {background:white;border-radius:16px;border:1px solid #dbe4de;padding:20px;}
#otrada-parking-app .op-more-grid svg {width:25px;height:25px;fill:currentColor;}
#otrada-parking-app .op-today {margin-bottom:16px;}
#otrada-parking-app .op-today-actions {display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-bottom:16px;}
#otrada-parking-app .op-today-actions button {background:#f1f5f2;color:#234c3d;border:1px solid #dee7e1;border-radius:12px;padding:14px;text-align:left;cursor:pointer;}
#otrada-parking-app .op-today-actions strong {font-size:23px;display:block;}
#otrada-parking-app .op-plan-panel:not(.is-fullscreen) {position:relative;}
#otrada-parking-app .op-map-peek {position:sticky;bottom:8px;z-index:10;display:flex;align-items:center;gap:12px;background:white;border:1px solid #b5ccbf;border-radius:16px;padding:12px;box-shadow:0 6px 24px #0002;margin:8px;}
#otrada-parking-app .op-map-peek>div {flex:1;min-width:0;}
#otrada-parking-app .op-map-peek small {display:block;margin-top:5px;}
#otrada-parking-app .op-map-selection-bar {position:sticky;bottom:8px;z-index:9;}
#otrada-parking-app .op-status-pill--incomplete {background:#f6edcf;color:#806616;}
@media(min-width:783px) {
 #otrada-parking-app .op-table-panel {padding:0;}
 #otrada-parking-app table th,#otrada-parking-app table td {padding:12px 16px;}
}
@media(max-width:782px) {
 #otrada-parking-app .op-mobile-nav {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;padding:6px 4px calc(6px + env(safe-area-inset-bottom));min-height:62px;}
 #otrada-parking-app .op-mobile-nav button {width:auto;margin:0;min-width:0;position:static;border-radius:0;background:transparent;box-shadow:none;padding:6px 2px;}
 #otrada-parking-app .op-mobile-nav button svg {width:23px;height:23px;}
 #otrada-parking-app .op-mobile-nav button span {font-size:10px;}
 #otrada-parking-app .op-main {padding:14px 12px calc(90px + env(safe-area-inset-bottom));}
 #otrada-parking-app .op-topbar {flex-direction:column;align-items:stretch;gap:12px;}
 #otrada-parking-app .op-topbar-tools {width:100%;}
 #otrada-parking-app .op-global-search {width:100%;flex:1;}
 #otrada-parking-app .op-phone-card {grid-template-columns:30px minmax(0,1fr);gap:8px;padding:12px;}
 #otrada-parking-app .op-phone-card .op-avatar {width:30px;height:30px;align-self:start;}
 #otrada-parking-app .op-contact-row-end {grid-column:2;justify-content:space-between;gap:6px;}
 #otrada-parking-app .op-contact-row-main h3 {font-size:16px;}
 #otrada-parking-app .op-contact-row-end .op-bot-status {gap:4px;}
 #otrada-parking-app .op-contact-debt {font-size:12px;}
 #otrada-parking-app .op-panel {padding:16px;}
 #otrada-parking-app .op-phone-card {padding:12px;}
 #otrada-parking-app .op-panel h2 {font-size:23px;}
 #otrada-parking-app .op-contact-sticky {top:-16px;}
 #otrada-parking-app .op-contact-footer {bottom:-16px;}
 #otrada-parking-app .op-map-peek {gap:6px;padding:10px;margin:4px;}
 #otrada-parking-app .op-map-peek .op-button {padding:9px;font-size:12px;min-height:40px;}
 #otrada-parking-app .op-map-peek small {font-size:12px;}
 #otrada-parking-app .op-today-actions {grid-template-columns:1fr 1fr;}
 #otrada-parking-app .op-contact-tabs button {font-size:13px;}
}
#otrada-parking-app .op-modal {box-sizing:border-box;max-width:100%;padding:20px;}
#otrada-parking-app .op-modal--contact {width:min(850px,100%);}
#otrada-parking-app .op-map-peek {position:absolute;left:8px;right:8px;bottom:8px;}
@media(max-width:782px) {
 #otrada-parking-app .op-modal-backdrop {padding:12px;align-items:end;}
 #otrada-parking-app .op-modal {width:100%;padding:16px;max-height:calc(100dvh - 24px);border-radius:20px;}
 #otrada-parking-app .op-toolbar--table {gap:10px;}
 #otrada-parking-app .op-table-total {flex-wrap:wrap;gap:6px 14px;}
 #otrada-parking-app .op-toast-root {bottom:calc(80px + env(safe-area-inset-bottom));}
}

/* 4.6.4 — client card: places first, separate scrolling body. */
#otrada-parking-app .op-modal--contact {display:flex;flex-direction:column;overflow:hidden;width:min(880px,100%);max-height:calc(100dvh - 64px);padding:0;border-radius:24px;}
#otrada-parking-app .op-modal--contact h2,#otrada-parking-app .op-modal--contact h3 {font-family:inherit;letter-spacing:-.025em;}
#otrada-parking-app .op-modal--contact .op-contact-sticky {position:static;flex-shrink:0;padding:24px 24px 0;background:#fff;border-bottom:1px solid var(--op-line);}
#otrada-parking-app .op-contact-heading {min-width:0;}
#otrada-parking-app .op-contact-sticky h2 {font-size:24px;line-height:1.2;font-weight:650;overflow-wrap:anywhere;margin:0 0 8px;}
#otrada-parking-app .op-contact-role {margin:0 0 7px;color:var(--op-muted);font-size:12px;font-weight:650;}
#otrada-parking-app .op-contact-edit {padding:0;min-height:28px;font-size:12px;}
#otrada-parking-app .op-contact-sticky .op-modal-head {align-items:flex-start;margin-bottom:12px;}
#otrada-parking-app .op-contact-sticky .op-icon-button {flex-shrink:0;}
#otrada-parking-app .op-contact-sticky .op-contact-links {margin:0;gap:12px;flex-wrap:wrap;}
#otrada-parking-app .op-contact-tabs {margin:16px 0 12px;gap:3px;}
#otrada-parking-app .op-contact-tabs button {min-width:0;min-height:42px;white-space:nowrap;font-size:13px;}
#otrada-parking-app .op-contact-body {min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:22px 24px;scrollbar-gutter:stable;}
#otrada-parking-app .op-contact-body [hidden] {display:none!important;}
#otrada-parking-app .op-contact-section-title {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;}
#otrada-parking-app .op-contact-section-title h3 {margin:0;font-size:17px;font-weight:650;}
#otrada-parking-app .op-contact-section-title h3>span {margin-left:5px;color:var(--op-muted);font-weight:450;font-size:14px;}
#otrada-parking-app .op-client-place-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
#otrada-parking-app .op-client-place {display:flex;flex-direction:column;gap:9px;min-width:0;padding:18px;border:1px solid var(--op-line);border-radius:18px;background:#f8faf9;}
#otrada-parking-app .op-client-place--owner {background:#f8f7f3;}
#otrada-parking-app .op-client-place-top {display:flex;align-items:center;justify-content:space-between;gap:8px;}
#otrada-parking-app .op-client-place-number {padding:0;border:0;background:none;color:var(--op-green);font-size:25px;font-weight:700;text-align:left;cursor:pointer;}
#otrada-parking-app .op-client-place>strong {font-size:19px;font-weight:650;}
#otrada-parking-app .op-client-place small {color:var(--op-muted);font-size:12px;font-weight:400;overflow-wrap:anywhere;}
#otrada-parking-app .op-client-place small:empty {display:none;}
#otrada-parking-app .op-client-place-actions {display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:auto;padding-top:8px;}
#otrada-parking-app .op-client-place-actions .op-button {min-height:40px;padding:9px 14px;}
#otrada-parking-app .op-client-place-note {font-size:12px;color:#8b621f;margin:0;}
#otrada-parking-app .op-client-balance {display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;padding:14px 16px;background:var(--op-green-soft);border-radius:14px;margin-bottom:22px;}
#otrada-parking-app .op-client-balance>span {font-size:13px;}
#otrada-parking-app .op-client-balance strong {font-size:20px;margin-left:auto;}
#otrada-parking-app .op-client-balance small {flex-basis:100%;color:var(--op-muted);font-size:12px;}
#otrada-parking-app .op-contact-details {border-top:1px solid var(--op-line);margin-top:20px;padding-top:6px;}
#otrada-parking-app .op-contact-details>summary {cursor:pointer;font-weight:600;font-size:13px;padding:13px 0;}
#otrada-parking-app .op-contact-details .op-contact-finance {margin-top:4px;}
#otrada-parking-app .op-contact-empty {padding:22px;background:var(--op-bg);border-radius:16px;}
#otrada-parking-app .op-contact-empty p {margin:6px 0 0;color:var(--op-muted);}
#otrada-parking-app .op-modal--contact .op-contact-footer {position:static;flex-shrink:0;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:14px 24px;border-top:1px solid var(--op-line);background:#fff;}
#otrada-parking-app .op-contact-footer .op-button {min-height:42px;}
#otrada-parking-app .op-contact-footer [data-action="close-modal"] {margin-left:auto;}
#otrada-parking-app .op-contact-body [data-contact-panel="access"]>h3 {font-size:16px;margin:24px 0 12px;}
#otrada-parking-app .op-contact-body .op-client-access {padding-top:0;border:0;}
#otrada-parking-app .op-contact-body .op-bot-status {margin-bottom:12px;}
@media(max-width:600px) {
 #otrada-parking-app .op-modal--contact {max-height:calc(100dvh - 24px);border-radius:20px;}
 #otrada-parking-app .op-modal--contact .op-contact-sticky {padding:18px 16px 0;}
 #otrada-parking-app .op-contact-sticky h2 {font-size:20px;}
 #otrada-parking-app .op-contact-tabs {gap:2px;margin-top:12px;}
 #otrada-parking-app .op-contact-tabs button {font-size:12px;padding:9px 4px;}
 #otrada-parking-app .op-contact-body {padding:18px 16px;}
 #otrada-parking-app .op-client-place-grid {grid-template-columns:1fr;}
 #otrada-parking-app .op-client-place {padding:16px;gap:8px;}
 #otrada-parking-app .op-modal--contact .op-contact-footer {padding:12px 16px max(12px,env(safe-area-inset-bottom));}
 #otrada-parking-app .op-contact-footer .op-button {flex:1;font-size:12px;padding:10px;}
 #otrada-parking-app .op-client-balance strong {font-size:18px;}
}

.op-parking-switch{min-width:150px;margin:0}.op-apart-plan{display:block;width:100%;height:auto}.op-apart-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-top:20px}.op-apart-place{border:1px solid #d6e2da;border-radius:16px;padding:18px 12px;display:flex;flex-direction:column;gap:8px;cursor:pointer;text-align:left}.op-apart-place strong{font-size:23px}.op-apart-place span,.op-apart-place small{font-size:12px}.op-parking-switch select{max-width:190px}
/* 4.8: compact daily operations, shared typography and mobile controls. */
#otrada-parking-app {font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:#21342c;--op-radius:18px;}
#otrada-parking-app h1,#otrada-parking-app h2,#otrada-parking-app h3,.op-modal h1,.op-modal h2,.op-modal h3 {font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;letter-spacing:-.035em;line-height:1.2;}
#otrada-parking-app h1 {font-size:28px;} #otrada-parking-app h2,.op-modal h2 {font-size:23px;}
#otrada-parking-app .op-panel {border-radius:18px;padding:22px;box-shadow:0 2px 8px #18352804;}
.op-site-cards {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:18px;}
.op-site-card {text-align:left;display:grid;gap:10px;border:1px solid #dae3dd;border-radius:18px;background:#fff;padding:20px;color:#354c41;cursor:pointer;}
.op-site-card.is-active {border-color:#2c6851;box-shadow:inset 0 0 0 1px #2c6851;background:#f3f8f5;}
.op-site-card>strong {font-size:27px;} .op-site-card small {font-size:13px;font-weight:400;color:#586e61;}
.op-occupancy-track {height:5px;overflow:hidden;background:#e0e9e3;border-radius:10px;}.op-occupancy-track i {display:block;height:100%;background:#3c8060;border-radius:10px;}
.op-operations {margin-bottom:20px;}.op-wait-panel {grid-column:1/-1;}
.op-countdown {font-variant-numeric:tabular-nums;color:#765009;font-size:16px;white-space:nowrap;}
.op-hold-banner,.op-review-summary,.op-contact-balance {display:flex;flex-wrap:wrap;gap:12px;align-items:center;border-radius:14px;background:#f4f6ed;padding:16px;margin:12px 0;}
.op-contact-balance {background:#edf5f0;}.op-contact-balance>span,.op-contact-balance>small {flex-basis:100%;}
.op-map-filters {margin-bottom:14px;background:#fff;border:1px solid #dae3dd;border-radius:14px;padding:12px;}
.op-map-filters summary {cursor:pointer;font-weight:600;min-height:30px;align-content:center;}.op-map-filters .op-toolbar {margin:14px 0 0;}
.op-modal--place .op-place-actions {position:sticky;bottom:0;background:#fff;border-top:1px solid #e5ece7;padding:14px 0;margin-bottom:0;z-index:2;}
#otrada-parking-app .op-map-peek {flex-wrap:wrap;}#otrada-parking-app .op-map-peek>div {flex-basis:45%;}
#otrada-parking-app button:focus-visible,.op-modal button:focus-visible {outline:3px solid #398368;outline-offset:3px;}
@media(min-width:1000px){.op-map-filters:not([open]) summary::after {content:' · статус, тип и номер';font-weight:400;color:#64766b;}}
@media(max-width:782px){
 #otrada-parking-app h1 {font-size:24px;}#otrada-parking-app h2,.op-modal h2 {font-size:21px;}
 #otrada-parking-app .op-panel {padding:16px;}.op-site-cards {gap:10px;}.op-site-card {padding:14px;gap:8px;}.op-site-card>span:first-child{font-size:15px;font-weight:600;}
 .op-site-card>strong{font-size:23px;}.op-site-card>strong small{display:block;margin-top:3px;}
 #otrada-parking-app .op-metrics {gap:10px;}#otrada-parking-app .op-metric {padding:16px;}
 #otrada-parking-app .op-map-page .op-plan-panel {padding:10px;}#otrada-parking-app .op-plan-head {gap:10px;}
 #otrada-parking-app .op-plan-head h3 {font-size:17px;margin:3px 0;}
 #otrada-parking-app .op-map-peek {position:sticky;bottom:6px;margin-top:8px;left:auto;right:auto;border-radius:14px;box-shadow:0 3px 16px #12332318;}
 #otrada-parking-app .op-map-peek>div {flex-basis:100%;}#otrada-parking-app .op-map-peek .op-icon-button {position:absolute;right:8px;top:8px;}
 #otrada-parking-app .op-map-peek>div>strong {display:block;padding-right:32px;}
 .op-modal--place .op-place-actions {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding-bottom:calc(10px + env(safe-area-inset-bottom));}
 .op-modal--place .op-place-actions .op-button {min-height:44px;padding:10px;font-size:13px;}
 .op-control-row {flex-wrap:wrap;}.op-control-row>div {min-width:130px;}
}

/* Fullscreen must win over the normal panel and mobile card rules. */
#otrada-parking-app .op-map-page .op-plan-panel.is-fullscreen {
 position:fixed;inset:0;z-index:1000001;box-sizing:border-box;
 width:100%;height:100vh;height:100dvh;min-height:0;max-height:none;
 display:flex;flex-direction:column;margin:0;border:0;border-radius:0;
 padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));
}
#otrada-parking-app .op-plan-panel.is-fullscreen .op-plan-head {flex:0 0 auto;}
#otrada-parking-app .op-plan-panel.is-fullscreen .op-plan-scroll {flex:1 1 0;min-height:0;max-height:none;}
#otrada-parking-app .op-plan-panel.is-fullscreen .op-map-peek {position:relative;inset:auto;flex:0 0 auto;margin:8px 0 0;}
body.op-map-fullscreen-open #otrada-parking-app .op-mobile-nav {display:none;}

/* 4.12.6: keep all place actions inside the modal, including desktop/zoom. */
.op-modal--place .op-place-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.op-modal--place .op-place-actions > .op-button {
  width: 100%; min-width: 0; min-height: 44px; height: auto;
  padding: 10px; white-space: normal; overflow-wrap: anywhere; line-height: 1.3;
}
.op-modal--place .op-place-actions > .op-button--primary:first-child { grid-column: 1 / -1; }
.op-payment-discount-note { padding: 12px; border-radius: 10px; background: #edf5f0; color: #244b3e; line-height: 1.5; }
.op-payment-discount-note.is-warning { background: #fff3d8; color: #694600; }
@media (max-width: 400px) {
  .op-modal--place .op-place-actions { position: static; }
}

.op-period-details { padding: 14px; margin: 14px 0; border: 1px solid var(--op-line); border-radius: 12px; }
.op-period-details summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.op-period-details p { line-height: 1.5; overflow-wrap: anywhere; }

/* A payment is one operation; its allocations are disclosed on demand. */
.op-payment-list{display:grid;gap:12px;padding:16px}
.op-payment-card{border:1px solid var(--op-line);border-radius:16px;padding:16px;background:var(--op-surface);min-width:0}
.op-payment-card.is-reversed{background:#f6f7f6;color:#69746d}
.op-payment-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.op-payment-payer{font-size:17px;overflow-wrap:anywhere;min-width:0}
.op-payment-amount{font-size:20px;white-space:nowrap;flex-shrink:0}
.op-payment-meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:13px;color:#64736c;margin-top:5px}
.op-payment-distribution{margin-top:8px;border-top:1px solid #e8edea}
.op-payment-card summary{cursor:pointer;min-height:44px;display:list-item;align-content:center;color:#274d3f;padding:10px 0;line-height:1.4;font-size:14px}
.op-payment-card summary:focus-visible,.op-payment-card button:focus-visible{outline:3px solid #276852;outline-offset:3px}
.op-payment-distribution ul{list-style:none;padding:0;margin:0}
.op-payment-distribution li{display:flex;justify-content:space-between;gap:12px;border-top:1px solid #eef1ef;padding:8px 0;align-items:center}
.op-payment-distribution li>div{min-width:0}.op-payment-distribution li>strong{white-space:nowrap}
.op-payment-card .op-place-link,.op-payment-card .op-text-button{min-height:44px;white-space:normal}
.op-payment-card small{display:block;font-size:13px;line-height:1.4;color:#64736c}
.op-payment-card .op-payment-caution{color:#825213}
.op-payment-single{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin-top:5px}
.op-payment-period{margin:0;font-size:13px;color:#64736c}
.op-payment-actions,.op-payment-comment{font-size:14px}.op-payment-comment p{overflow-wrap:anywhere}
.op-payment-actions .op-text-button{margin:0 0 4px}
.op-payment-reverse-list{padding-left:22px;line-height:1.7}
@media(max-width:600px){.op-payment-list{padding:10px;gap:10px}.op-payment-card{padding:12px;border-radius:14px}.op-payment-amount{font-size:18px}.op-payment-payer{font-size:16px}.op-payment-card-head{gap:8px}}