:root {
  --ink: #2d261f;
  --muted: #746b62;
  --paper: #fbf8f3;
  --cream: #f4eee6;
  --card: rgba(255, 252, 248, 0.92);
  --line: #dfd2c3;
  --accent: #c96931;
  --accent-dark: #9f4821;
  --sage: #71805c;
  --sage-soft: #e3ead8;
  --amber: #b87a1f;
  --amber-soft: #fbecd1;
  --red: #a64c3f;
  --red-soft: #f5ded8;
  --blue: #4d6a7a;
  --shadow: 0 18px 50px rgba(83, 61, 43, 0.10);
  --radius: 24px;
}

* { box-sizing: border-box; }
html { max-width: 100%; overflow-x: hidden; scrollbar-gutter: stable; background: var(--cream); }
body {
  width: 100%;
  max-width: 100%;
  margin: 0;
  overflow-x: hidden;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.92), transparent 34%),
    linear-gradient(135deg, #f6f0e8 0%, #ede2d5 100%);
  font: 15px/1.5 Inter, "Segoe UI", Arial, sans-serif;
}
button, input, select, textarea { min-width: 0; max-width: 100%; font: inherit; }
button { color: inherit; overflow-wrap: anywhere; }
button:disabled { cursor: not-allowed; opacity: .5; transform: none !important; }
.hidden { display: none !important; }
.ambient { position: fixed; border-radius: 999px; filter: blur(2px); pointer-events: none; opacity: .5; }
.ambient-one { width: 400px; height: 400px; background: rgba(224,183,143,.25); right: -150px; top: 80px; }
.ambient-two { width: 320px; height: 320px; background: rgba(139,151,113,.17); left: -160px; bottom: 10%; }

h1, h2, h3 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-weight: 500; line-height: 1.12; }
h1 { font-size: clamp(30px, 4vw, 52px); }
h2 { font-size: 27px; }
h3 { font-size: 21px; }
p { margin: 0; }
.eyebrow { margin-bottom: 8px; color: var(--accent-dark); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.muted { color: var(--muted); }

.login-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(520px, 100%); padding: 42px; border: 1px solid var(--line); border-radius: 32px; background: var(--card); box-shadow: var(--shadow); }
.login-card h1 { margin-bottom: 16px; }
.login-card > p:not(.eyebrow) { color: var(--muted); }
.callout { margin-top: 24px; padding: 16px; border-radius: 16px; background: var(--cream); word-break: break-word; }
.brand-mark { width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: 24px; border-radius: 18px; color: white; background: var(--ink); font-family: Georgia, serif; font-size: 20px; }
.brand-mark.small { width: 42px; height: 42px; margin: 0; border-radius: 14px; font-size: 15px; }

.topbar { position: sticky; z-index: 20; top: 0; height: 76px; display: flex; align-items: center; justify-content: space-between; padding: 0 max(24px, calc((100vw - 1320px) / 2)); border-bottom: 1px solid rgba(178,156,134,.35); background: rgba(248,243,236,.86); backdrop-filter: blur(18px); }
.brand, .topbar-actions, .identity { display: flex; align-items: center; gap: 12px; }
.brand strong, .brand span, .identity strong, .identity span { display: block; }
.brand strong { font-family: Georgia, serif; font-size: 21px; }
.brand span, .identity span { color: var(--muted); font-size: 12px; }
.connection-dot { width: 9px; height: 9px; border-radius: 50%; background: #b9aa9c; box-shadow: 0 0 0 4px rgba(185,170,156,.18); }
.connection-dot.online { background: #70865b; box-shadow: 0 0 0 4px rgba(112,134,91,.18); }

.shell { position: relative; z-index: 1; width: min(1320px, calc(100% - 48px)); margin: 0 auto; padding: 52px 0 90px; }
.hero { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 0 8px 34px; }
.hero h1 { max-width: 720px; }
.hero #hero-copy { max-width: 680px; margin-top: 14px; color: var(--muted); font-size: 17px; }
.primary-button, .secondary-button, .danger-button, .ghost-button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 9px 18px; border-radius: 14px; border: 1px solid transparent; cursor: pointer; font-weight: 700; line-height: 1.2; text-align: center; white-space: normal; transition: .18s ease; }
.primary-button { color: white; background: var(--accent); box-shadow: 0 8px 24px rgba(201,105,49,.22); }
.primary-button:hover { background: var(--accent-dark); transform: translateY(-1px); }
.secondary-button { border-color: #a8b294; background: var(--sage-soft); }
.danger-button { border-color: #d7a69e; background: var(--red-soft); color: #7d3329; }
.ghost-button { border-color: var(--line); background: rgba(255,255,255,.45); }
.wide { width: 100%; }
.icon-button { width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.5); cursor: pointer; font-size: 22px; }

.tabs { display: flex; gap: 6px; margin-bottom: 26px; padding: 6px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.43); width: fit-content; }
.tab { padding: 10px 18px; border: 0; border-radius: 12px; background: transparent; cursor: pointer; font-weight: 700; }
.tab.active { color: white; background: var(--ink); }
.resource-tabs { margin-bottom: 10px; border-style: dashed; background: rgba(255,255,255,.28); }
.resource-tabs .tab { color: var(--accent-dark); }
.resource-tabs .tab.active { color: white; }
.period-tabs { margin-bottom: 14px; }
.status-tabs { display: grid; grid-template-columns: repeat(5, minmax(120px, 1fr)); gap: 8px; margin-bottom: 20px; }
.status-tab { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.58); cursor: pointer; font-weight: 800; }
.status-tab strong { min-width: 28px; min-height: 28px; display: grid; place-items: center; padding: 2px 7px; border-radius: 99px; background: var(--cream); }
.status-tab.active { box-shadow: inset 0 0 0 2px currentColor; }
.status-created { color: #725c49; }
.status-assigned { color: #486c82; }
.status-progress { color: #986119; }
.status-completed { color: #4d6739; }
.status-all { color: var(--ink); }
.page { display: none; }
.page.active { display: block; }
.summary-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.summary-card { min-height: 126px; padding: 20px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); box-shadow: 0 10px 30px rgba(83,61,43,.05); }
.summary-card strong { display: block; margin-top: 7px; font-family: Georgia, serif; font-size: 34px; font-weight: 500; }
.summary-card span { color: var(--muted); }
.summary-card.attention { border-color: #d8a59c; background: linear-gradient(150deg, #fffaf7, #f4ddd7); }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin: 46px 6px 18px; }
.section-heading.compact { margin-top: 56px; }
.task-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.task-card { position: relative; overflow: hidden; min-height: 320px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); cursor: pointer; transition: .2s ease; }
.task-card:hover { transform: translateY(-3px); box-shadow: 0 22px 55px rgba(83,61,43,.15); }
.task-card.status-card-created { border-left: 5px solid #aa9681; }
.task-card.status-card-assigned { border-left: 5px solid #6f91a4; }
.task-card.status-card-progress { border-left: 5px solid var(--amber); }
.task-card.status-card-completed { border-left: 5px solid var(--sage); }
.task-card.offered-card { border-color: #d4a150; background: linear-gradient(110deg, #fff8e9, rgba(255,252,248,.94)); box-shadow: 0 15px 40px rgba(184,122,31,.17); }
.task-card.unassigned-urgent { border-color: #c96a5d; background: linear-gradient(110deg, #fff6f3, #f7ddd7); box-shadow: 0 15px 40px rgba(166,76,63,.16); }
.task-card.unassigned-urgent .cleaning-assignee { color: #7d3329; background: #f4cfc7; }
.task-photo { height: 130px; background: #ded3c7 center/cover no-repeat; }
.task-photo::after { content: ""; display: block; height: 100%; background: linear-gradient(0deg, rgba(38,29,22,.35), transparent 70%); }
.task-content { padding: 18px; }
.task-content h3 { margin: 9px 0 6px; }
.task-topline, .task-meta, .progress-line, .task-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.task-meta { justify-content: flex-start; flex-wrap: wrap; margin-top: 16px; color: var(--muted); font-size: 13px; }
.task-meta span { padding-right: 10px; border-right: 1px solid var(--line); }
.task-meta span:last-child { border: 0; }
.task-footer { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.badge { display: inline-flex; align-items: center; min-height: 27px; padding: 3px 9px; border-radius: 999px; background: var(--cream); font-size: 12px; font-weight: 800; }
.badge.created { background: #eee5da; color: #6f5b49; }
.badge.assigned { background: #dce9f0; color: #355a70; }
.badge.offered, .badge.accepted { background: var(--amber-soft); color: #80520e; }
.badge.en_route, .badge.in_progress { background: #dce8ed; color: #355465; }
.badge.ready { background: var(--sage-soft); color: #4c6337; }
.badge.escalated, .badge.rework, .badge.at_risk { background: var(--red-soft); color: #82372d; }
.badge.demo { background: #eee4f3; color: #6d4c7d; }
.deadline { color: var(--accent-dark); font-weight: 800; }
.progress { height: 7px; overflow: hidden; margin-top: 13px; border-radius: 99px; background: #eee6de; }
.progress > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--sage), #a3af83); }
.empty-state { grid-column: 1 / -1; padding: 48px 24px; border: 1px dashed #cdbbaa; border-radius: 24px; text-align: center; color: var(--muted); background: rgba(255,255,255,.35); }
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.filter-chip { padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.55); cursor: pointer; }
.filter-chip.active { color: white; border-color: var(--ink); background: var(--ink); }

.schedule-heading { align-items: center; }
.schedule-controls { display: flex; align-items: center; gap: 8px; }
.schedule-controls select { width: auto; min-width: 112px; margin: 0; }
.schedule-help { margin: -6px 6px 14px; color: var(--muted); }
.cleaning-schedule { --schedule-days: 14; border: 1px solid var(--line); border-radius: 22px; background: rgba(255,252,248,.78); box-shadow: var(--shadow); overflow: hidden; }
.schedule-scroll { width: 100%; overflow: auto; overscroll-behavior-inline: contain; }
.schedule-grid { display: grid; grid-template-columns: 240px repeat(var(--schedule-days), minmax(116px, 1fr)); min-width: calc(240px + var(--schedule-days) * 116px); }
.schedule-corner, .schedule-day, .schedule-object, .schedule-cell { min-height: 78px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.48); }
.schedule-corner { position: sticky; z-index: 4; left: 0; top: 0; display: grid; align-content: center; padding: 12px 16px; background: #f7f0e8; }
.schedule-corner strong, .schedule-corner span, .schedule-day strong, .schedule-day span, .schedule-object strong, .schedule-object span, .schedule-task strong, .schedule-task span, .schedule-task small { display: block; }
.schedule-corner span, .schedule-day span, .schedule-object span { color: var(--muted); font-size: 11px; }
.schedule-day { position: sticky; z-index: 3; top: 0; display: grid; place-content: center; text-align: center; background: #f7f0e8; }
.schedule-day.today { color: var(--accent-dark); background: #f7dfcd; }
.schedule-row { display: contents; }
.schedule-object { position: sticky; z-index: 2; left: 0; display: grid; align-content: center; gap: 4px; padding: 12px 14px; background: #fbf7f1; }
.schedule-object strong { font-family: Georgia, "Times New Roman", serif; font-size: 15px; line-height: 1.15; }
.schedule-cell { border-top: 0; border-left: 0; }
.schedule-cell.today { background: rgba(247,223,205,.35); }
.schedule-task { width: 100%; display: grid; align-content: center; gap: 3px; padding: 9px; color: var(--ink); text-align: left; cursor: pointer; background: var(--amber-soft); transition: .16s ease; }
.schedule-task:hover { position: relative; z-index: 1; box-shadow: inset 0 0 0 2px var(--accent); }
.schedule-task strong { font-size: 13px; }
.schedule-task span { overflow: hidden; font-size: 12px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.schedule-task small { color: var(--muted); font-size: 10px; }
.schedule-task.ready { background: var(--sage-soft); }
.schedule-task.in_progress, .schedule-task.en_route { background: #dce8ed; }
.schedule-task.attention { color: #7d3329; background: var(--red-soft); box-shadow: inset 4px 0 0 var(--red); }

.object-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.object-card { border: 1px solid var(--line); border-radius: 22px; background: var(--card); }
.object-card .object-body { padding: 22px; }
.object-card h3 { margin: 7px 0 10px; }
.object-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.object-edit-button { margin-top: 14px; }
.fact { padding: 10px; border-radius: 12px; background: var(--cream); }
.fact span, .fact strong { display: block; }
.fact span { color: var(--muted); font-size: 11px; }
.cleaner-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cleaner-card { padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); }
.cleaner-card .secondary-button { margin-top: 14px; }
.avatar { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 14px; border-radius: 50%; background: var(--sage-soft); font-family: Georgia, serif; font-size: 20px; }
.contact-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.contact-chips span { padding: 4px 8px; border-radius: 99px; color: #3f5b30; background: var(--sage-soft); font-size: 11px; font-weight: 800; }
.contact-chips .missing { color: #7d3329; background: var(--red-soft); }

.earnings-strip { margin-bottom: 14px; }
.earnings-strip button { width: 100%; display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 14px; padding: 15px 18px; border: 1px solid #b9c5a5; border-radius: 18px; color: var(--ink); background: var(--sage-soft); cursor: pointer; text-align: left; }
.earnings-strip strong { font: 700 24px/1 Georgia, serif; }
.earnings-strip b { color: #486036; }
.accrual-heading { align-items: center; }
.accrual-heading .filter-row { margin: 0; }
.accrual-summary { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 18px; }
.accrual-summary > div, .kpi-grid > div { display: grid; gap: 4px; padding: 14px; border-radius: 15px; background: var(--cream); }
.accrual-summary span, .kpi-grid span { color: var(--muted); font-size: 12px; }
.accrual-summary strong, .kpi-grid strong { font-size: 19px; }
.accrual-summary .due, .kpi-grid .due { color: #7c4d0c; background: var(--amber-soft); }
.accrual-cleaners { display: grid; gap: 14px; }
.accrual-card { padding: 20px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); box-shadow: 0 10px 28px rgba(83,61,43,.06); }
.accrual-card-head { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 12px; }
.accrual-card-head .avatar { margin: 0; }
.kpi-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 16px; }
.kpi-grid small { color: var(--muted); line-height: 1.25; }
.payout-button { margin-top: 14px; }
.accrual-details { margin-top: 14px; border-top: 1px solid var(--line); }
.accrual-details summary { padding: 14px 0 2px; cursor: pointer; font-weight: 800; }
.accrual-task-list { display: grid; gap: 7px; margin-top: 12px; }
.accrual-task-row { display: grid; grid-template-columns: minmax(220px, 1.4fr) minmax(150px, .8fr) minmax(110px, .5fr) auto; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 13px; background: var(--cream); }
.accrual-task-row div { display: grid; }
.accrual-task-row span { color: var(--muted); font-size: 11px; }
.compact-empty { padding: 18px; border-radius: 14px; }

dialog { max-width: none; max-height: none; padding: 0; color: var(--ink); border: 0; background: transparent; }
dialog::backdrop { background: rgba(42,32,25,.5); backdrop-filter: blur(5px); }
.task-dialog { position: fixed; inset: 0 0 0 auto; width: min(900px, 100%); height: 100dvh; max-height: 100dvh; margin: 0; box-sizing: border-box; overflow: hidden; background: var(--paper); box-shadow: -20px 0 60px rgba(30,20,15,.2); }
.task-dialog[open] { display: grid; grid-template-rows: 74px minmax(0, 1fr); }
.dialog-bar { position: relative; z-index: 4; height: 74px; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 14px; padding: 0 22px; border-bottom: 1px solid var(--line); background: rgba(248,243,236,.94); backdrop-filter: blur(16px); }
.dialog-heading { min-width: 0; }
.dialog-heading strong, .dialog-heading span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dialog-heading span { margin-top: 2px; color: var(--muted); font-size: 11px; }
.task-detail { min-height: 0; padding-bottom: 80px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.detail-hero { min-height: 265px; display: flex; align-items: end; padding: 26px; color: white; background: #756454 center/cover; position: relative; }
.detail-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(29,20,14,.82), rgba(29,20,14,.08)); }
.detail-hero > div { position: relative; z-index: 1; }
.detail-hero h1 { font-size: clamp(30px, 5vw, 44px); }
.detail-hero p { margin-top: 8px; }
.detail-layout { display: grid; grid-template-columns: 1fr 290px; gap: 22px; padding: 22px; }
.detail-main, .detail-aside { display: flex; flex-direction: column; gap: 16px; }
.detail-section { padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: white; }
.detail-section h3 { margin-bottom: 14px; }
.detail-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.action-row { display: flex; flex-wrap: wrap; gap: 8px; }
.action-row > button, .action-row > a { min-width: 0; flex: 1 1 160px; }
.check-item { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 12px 0; border-bottom: 1px solid #eee5dd; cursor: pointer; }
.check-item:last-child { border: 0; }
.check-item input { width: 20px; height: 20px; accent-color: var(--sage); }
.check-item.done .check-label { color: var(--muted); text-decoration: line-through; }
.check-section-title { margin: 20px 0 4px; color: var(--accent-dark); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.check-block { position: relative; min-height: 78px; display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 13px; margin: 10px 0; padding: 14px; border: 2px solid var(--line); border-radius: 17px; background: var(--paper); cursor: pointer; }
.check-block input { position: absolute; opacity: 0; pointer-events: none; }
.check-block-mark { width: 34px; height: 34px; display: grid; place-items: center; border: 2px solid #b7a594; border-radius: 11px; color: white; font-size: 21px; font-weight: 900; }
.check-block strong, .check-block small { display: block; }
.check-block strong { font-size: 18px; }
.check-block small { margin-top: 4px; color: var(--muted); font-weight: 500; line-height: 1.35; }
.check-block.done { border-color: #99aa80; background: var(--sage-soft); }
.check-block.done .check-block-mark { border-color: var(--sage); background: var(--sage); }
.supply-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid #eee5dd; }
.supply-row select { max-width: 170px; }
.simple-help { margin-bottom: 14px; padding: 12px; border-radius: 13px; color: var(--muted); background: var(--cream); }
.supply-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.supply-toggle { position: relative; min-height: 64px; display: flex; align-items: center; margin: 0; padding: 11px 13px; border: 2px solid #ded4c9; border-radius: 15px; background: #faf8f4; cursor: pointer; }
.supply-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.supply-toggle strong, .supply-toggle small { display: block; }
.supply-toggle strong { font-size: 16px; }
.supply-toggle small { color: var(--sage); font-size: 14px; }
.supply-toggle.reorder { border-color: #d89383; background: var(--red-soft); }
.supply-toggle.reorder small { color: var(--red); font-weight: 800; }
select, input, textarea { width: 100%; min-height: 44px; padding: 10px 12px; color: var(--ink); border: 1px solid #cdbdad; border-radius: 12px; background: white; }
textarea { min-height: 90px; resize: vertical; }
label { display: grid; gap: 7px; margin: 14px 0; font-weight: 700; }
.check-line { grid-template-columns: 22px 1fr; align-items: center; }
.check-line input { width: 18px; min-height: auto; }
.photo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.photo-slot { position: relative; min-height: 120px; overflow: hidden; display: grid; place-items: center; padding: 10px; border: 1px dashed #c4ad99; border-radius: 14px; background: var(--cream); text-align: center; cursor: pointer; }
.photo-slot.complete { color: white; border-style: solid; background: var(--sage); }
.photo-slot input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.photo-batch-button { position: relative; min-height: 58px; display: grid; place-items: center; margin-bottom: 16px; font-size: 18px; text-align: center; }
.photo-batch-button input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.photo-batch ul { margin: 7px 0 14px; padding-left: 21px; color: var(--muted); }
.photo-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.photo-chip { padding: 6px 9px; border-radius: 99px; color: #496036; background: var(--sage-soft); font-size: 12px; }
.incident-card { margin-top: 10px; padding: 12px; border: 1px solid #e0aaa0; border-radius: 14px; background: var(--red-soft); }
.incident-card.closed { border-color: #b7c5a5; background: var(--sage-soft); }
.incident-card strong, .incident-card span { display: block; }
.media-links, .market-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.media-links a, .market-links a { min-height: 42px; display: inline-flex; align-items: center; padding: 0 13px; border: 1px solid #b8a58f; border-radius: 12px; color: var(--ink); background: white; font-weight: 800; text-decoration: none; }
.meter-ok, .meter-wait { padding: 15px; border-radius: 15px; background: var(--sage-soft); }
.meter-wait { background: var(--amber-soft); }
.simple-list { display: grid; gap: 14px; }
.simple-card { display: grid; grid-template-columns: minmax(240px, 1fr) auto auto; align-items: center; gap: 18px; padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); box-shadow: 0 10px 28px rgba(83,61,43,.06); }
.simple-card h3 { margin: 8px 0 4px; }
.simple-card small { color: var(--muted); }
.repair-card { grid-template-columns: minmax(260px, 1fr) minmax(260px, .85fr) auto; align-items: start; }
.repair-assign-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.repair-assign-form label, .vendor-form label { margin: 0; }
.repair-assign-form button { grid-column: 1 / -1; }
.quick-add summary { margin-top: 12px; cursor: pointer; color: var(--accent-dark); font-weight: 800; }
.vendor-form { display: grid; gap: 8px; margin-top: 10px; }
.order-preview pre { max-width: 420px; margin: 0 0 10px; white-space: pre-wrap; font: 14px/1.45 Inter, sans-serif; }
.gaps { padding: 13px; border-radius: 14px; background: var(--amber-soft); color: #6e480d; font-size: 13px; }
.access-section summary { cursor: pointer; font: 700 22px/1.2 Georgia,serif; }
.access-section[open] summary { margin-bottom: 14px; }
.access-facts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.access-facts > div { min-width: 0; display: grid; gap: 3px; padding: 11px; border-radius: 12px; background: var(--cream); }
.access-facts span { color: var(--muted); font-size: 11px; }
.access-facts strong { overflow-wrap: anywhere; }
.modal-dialog { width: min(660px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; overflow: visible; }
.modal-card { width: 100%; max-width: 100%; max-height: calc(100dvh - 32px); padding: 25px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; border-radius: 26px; background: var(--paper); box-shadow: var(--shadow); }
.modal-heading { display: flex; justify-content: space-between; gap: 20px; }
.modal-heading > div { min-width: 0; }
.modal-heading h2, .modal-heading p { overflow-wrap: anywhere; }
.toast { position: fixed; z-index: 100; left: 50%; bottom: 28px; max-width: min(520px, calc(100% - 32px)); padding: 13px 18px; color: white; border-radius: 14px; background: var(--ink); box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: .2s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { background: #893f35; }
.mobile-nav { display: none; }

html.modal-open, body.modal-scroll-locked { overflow: hidden; overscroll-behavior: none; }
.heading-actions { display: flex; align-items: center; gap: 12px; }
.task-grid { grid-template-columns: 1fr; gap: 12px; }
.task-card { min-height: 0; display: grid; grid-template-columns: 120px minmax(280px, 1fr) 170px 210px; align-items: center; gap: 18px; padding: 18px 20px; overflow: visible; }
.task-card:hover { transform: translateY(-1px); }
.cleaning-time { display: grid; gap: 3px; padding-right: 18px; border-right: 1px solid var(--line); }
.cleaning-time strong { font: 700 30px/1 Georgia, "Times New Roman", serif; }
.cleaning-time span { color: var(--muted); font-size: 12px; }
.cleaning-time em { width: fit-content; margin-top: 5px; padding: 5px 8px; border-radius: 999px; color: #41602e; background: var(--sage-soft); font-size: 11px; font-style: normal; font-weight: 800; }
.cleaning-main h3 { margin: 7px 0 4px; font-size: 22px; }
.cleaning-main > p { color: var(--muted); font-size: 13px; }
.cleaning-assignee { display: grid; gap: 4px; padding: 12px; border-radius: 14px; background: var(--cream); }
.cleaning-assignee span { color: var(--muted); font-size: 11px; }
.cleaning-actions { display: grid; gap: 7px; }
.cleaning-actions button { min-height: 42px; }
.detail-hero { min-height: 0; padding: 24px; color: var(--ink); background: var(--cream); }
.detail-hero::before { display: none; }
.detail-hero > div { position: static; }
.meter-form-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(110px, 1fr)); gap: 10px; }
.meter-form-grid label { margin: 0; }
.meter-form-grid label > span { min-height: 34px; display: flex; align-items: end; gap: 5px; color: var(--muted); font-size: 13px; }
.meter-form-grid label > span strong { color: var(--ink); font-size: 16px; }
.meter-form-grid button { grid-column: 1 / -1; }
.meter-values { display: flex; flex-wrap: wrap; gap: 7px; }
.meter-values span { padding: 8px 10px; border-radius: 10px; background: var(--cream); }
.meter-card-button { width: 100%; color: var(--ink); text-align: left; cursor: pointer; }
.meter-card-button:hover { border-color: #bca58f; box-shadow: 0 14px 34px rgba(83,61,43,.11); }
.meter-card-title { display: block; margin: 8px 0 4px; font-family: Georgia, "Times New Roman", serif; font-size: 21px; line-height: 1.12; }
.meter-open { min-height: 44px; display: grid; place-items: center; padding: 0 18px; border: 1px solid var(--line); border-radius: 14px; background: white; font-weight: 800; }
.meter-detail-layout { display: grid; gap: 16px; padding: 22px; }
.meter-values-large { display: grid; grid-template-columns: repeat(5, 1fr); }
.meter-values-large span { display: grid; gap: 3px; padding: 14px; }
.meter-values-large strong { font-size: 21px; }
.meter-note { margin-top: 13px; padding: 12px; border-radius: 12px; background: var(--cream); }
.meter-photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.meter-photo { overflow: hidden; padding: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--cream); cursor: pointer; text-align: left; }
.meter-photo img { width: 100%; aspect-ratio: 4 / 3; display: block; object-fit: cover; background: #e7ddd2; }
.meter-photo span { display: block; overflow: hidden; padding: 9px; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.meter-photo-empty, .meter-warning { padding: 13px; border-radius: 12px; color: var(--muted); background: var(--cream); }
.meter-warning { margin-top: 10px; color: #7d3329; background: var(--red-soft); }
.meter-history-section { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.meter-history-section summary { cursor: pointer; font-size: 18px; font-weight: 800; }
.meter-history-grid { display: grid; gap: 10px; margin-top: 14px; }
.meter-history-card { display: grid; grid-template-columns: minmax(220px, 1fr) auto auto; align-items: center; gap: 14px; padding: 15px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.meter-history-card > div:first-child { display: grid; gap: 3px; }
.meter-history-card > div:first-child span, .meter-history-card small { color: var(--muted); }
.meter-detail-form { display: grid; gap: 12px; }
.meter-detail-form label { margin: 0; }
.normative-form { width: 100%; max-width: 100%; }
.normative-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.owner-message { margin: 0 0 14px; padding: 16px; border-radius: 14px; background: var(--cream); white-space: pre-wrap; font: 15px/1.55 Inter, "Segoe UI", sans-serif; }
.order-grid { display: grid; gap: 14px; }
.order-status-tabs { margin-bottom: 14px; }
.supply-basket { grid-template-columns: minmax(220px, .7fr) minmax(300px, 1.15fr) minmax(230px, .75fr); align-items: start; }
.basket-items { display: grid; gap: 7px; }
.basket-items > div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.basket-items span { display: grid; gap: 3px; }
.basket-items small { display: block; }
.basket-items em { color: var(--muted); font-size: 12px; }
.basket-items a { color: var(--accent-dark); font-weight: 800; }
.basket-total { display: flex; justify-content: space-between; padding: 12px 0; border-top: 2px solid var(--line); font-size: 18px; }
.supply-order-form, .repair-complete-form { display: grid; gap: 8px; }
.supply-order-form label, .repair-complete-form label { margin: 0; }
.qr-upload { position: relative; overflow: hidden; text-align: center; }
.qr-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.completion-note { padding: 14px; border-radius: 14px; background: var(--sage-soft); }

@media (max-width: 1020px) {
  .summary-grid { grid-template-columns: repeat(3, 1fr); }
  .task-grid, .object-grid { grid-template-columns: repeat(2, 1fr); }
  .detail-layout { grid-template-columns: 1fr; }
  .detail-aside { order: -1; }
  .task-card { grid-template-columns: 105px 1fr 160px; }
  .cleaning-actions { grid-column: 2 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .meter-form-grid { grid-template-columns: repeat(3, 1fr); }
  .meter-values-large { grid-template-columns: repeat(3, 1fr); }
  .repair-card { grid-template-columns: 1fr; }
  .supply-basket { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .accrual-task-row { grid-template-columns: 1fr 1fr auto; }
  .accrual-task-row > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  body { padding-bottom: 74px; }
  .topbar { height: 66px; padding: 0 14px; }
  .brand span, .identity span { display: none; }
  .identity { gap: 7px; }
  .identity strong { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
  .shell { width: calc(100% - 24px); padding: 30px 0 40px; }
  .hero { align-items: stretch; flex-direction: column; padding: 0 3px 24px; }
  .hero #hero-copy { font-size: 15px; }
  .tabs { display: none; }
  .tabs { display: flex; width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .resource-tabs { margin-bottom: 8px; }
  .status-tabs { display: flex; overflow-x: auto; padding-bottom: 3px; scrollbar-width: none; }
  .status-tabs::-webkit-scrollbar { display: none; }
  .status-tab { flex: 0 0 auto; min-width: 132px; }
  .summary-grid { grid-template-columns: repeat(2, 1fr); gap: 9px; }
  .summary-card { min-height: 102px; padding: 15px; border-radius: 18px; }
  .summary-card strong { font-size: 29px; }
  .section-heading { margin-top: 34px; }
  .schedule-heading { align-items: stretch; flex-direction: column; }
  .schedule-controls { display: grid; grid-template-columns: 52px 1fr 112px 52px; }
  .schedule-controls .ghost-button { padding: 0 10px; }
  .schedule-controls select { min-width: 0; }
  .schedule-help { font-size: 13px; }
  .cleaning-schedule { margin-inline: -4px; border-radius: 16px; }
  .schedule-grid { grid-template-columns: 155px repeat(var(--schedule-days), 108px); min-width: calc(155px + var(--schedule-days) * 108px); }
  .schedule-corner, .schedule-day, .schedule-object, .schedule-cell { min-height: 72px; }
  .schedule-object { padding: 10px; }
  .schedule-object strong { font-size: 13px; }
  .task-grid, .object-grid, .cleaner-grid { grid-template-columns: 1fr; }
  .task-card { min-height: 0; grid-template-columns: 82px 1fr; gap: 12px; padding: 15px; }
  .cleaning-time { padding-right: 10px; }
  .cleaning-time strong { font-size: 24px; }
  .cleaning-assignee { grid-column: 1 / -1; }
  .cleaning-actions { grid-column: 1 / -1; grid-template-columns: 1fr; }
  .task-meta { gap: 6px; margin-top: 10px; }
  .heading-actions { align-items: stretch; flex-direction: column; }
  .meter-form-grid { grid-template-columns: 1fr 1fr; }
  .meter-values-large { grid-template-columns: 1fr 1fr; }
  .meter-photo-grid { grid-template-columns: 1fr 1fr; }
  .normative-form-grid { grid-template-columns: 1fr; }
  .supply-basket { grid-template-columns: 1fr; }
  .earnings-strip button { grid-template-columns: 1fr auto; }
  .earnings-strip button span:nth-of-type(2) { grid-column: 1 / -1; }
  .accrual-heading { align-items: stretch; flex-direction: column; }
  .accrual-summary { grid-template-columns: 1fr 1fr; }
  .accrual-summary > div:first-child { grid-column: 1 / -1; }
  .accrual-card { padding: 15px; }
  .accrual-card-head { grid-template-columns: 44px 1fr; }
  .accrual-card-head > button { grid-column: 1 / -1; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .accrual-task-row { grid-template-columns: 1fr; }
  .accrual-task-row > div:first-child { grid-column: auto; }
  .mobile-nav { position: fixed; z-index: 30; left: 10px; right: 10px; bottom: 10px; display: flex; justify-content: space-around; padding: 7px; padding-bottom: max(7px, env(safe-area-inset-bottom)); border: 1px solid var(--line); border-radius: 20px; background: rgba(252,249,245,.94); box-shadow: 0 14px 45px rgba(50,35,25,.2); backdrop-filter: blur(16px); }
  .mobile-tab { flex: 1; display: grid; place-items: center; gap: 1px; padding: 5px; border: 0; border-radius: 13px; background: transparent; color: var(--muted); font-size: 11px; }
  .mobile-tab span { font-size: 19px; }
  .mobile-tab.active { color: var(--ink); background: var(--cream); }
  .task-dialog { width: 100%; }
  .dialog-bar { grid-template-columns: 42px minmax(0, 1fr) 42px; gap: 8px; padding: 0 12px; }
  .detail-hero { min-height: 235px; padding: 20px; }
  .detail-layout { padding: 12px; }
  .detail-section { padding: 16px; }
  .detail-facts { grid-template-columns: repeat(2, 1fr); }
  .photo-grid { grid-template-columns: 1fr 1fr; }
  .supply-row { grid-template-columns: 1fr; }
  .supply-row select { max-width: none; }
  .supply-grid { grid-template-columns: 1fr; }
  .simple-card, .repair-card { grid-template-columns: 1fr; }
  .repair-assign-form { grid-template-columns: 1fr; }
  .primary-button, .secondary-button, .danger-button, .ghost-button { min-height: 52px; font-size: 16px; }
  .mobile-nav { overflow-x: auto; justify-content: flex-start; }
  .mobile-tab { min-width: 74px; }
  .tab { flex: 0 0 auto; min-height: 46px; }
  .mobile-nav { display: none; }
  .modal-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  .modal-card { max-height: calc(100dvh - 16px); padding: 18px; border-radius: 20px; }
  .action-row > button, .action-row > a { flex-basis: 100%; width: 100%; }
}

@media (max-width: 430px) {
  .meter-form-grid, .meter-values-large, .meter-photo-grid, .object-facts, .detail-facts { grid-template-columns: 1fr; }
  .access-facts { grid-template-columns: 1fr; }
  .meter-history-card { grid-template-columns: 1fr; }
  .modal-heading { gap: 10px; }
}

.object-context-gallery { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 280px); gap: 10px; overflow-x: auto; padding: 4px 0 12px; }
.object-context-gallery img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; }
.object-context-copy { display: grid; gap: 8px; margin-bottom: 12px; white-space: pre-line; }
.object-context-copy p { margin: 0; }