:root { color-scheme: light; }

body.mode-home,
body.mode-auth {
  display: block;
  overflow: auto;
  height: auto;
  min-height: 100%;
}
body.mode-home .sidebar,
body.mode-home main,
body.mode-auth .sidebar,
body.mode-auth main,
body.mode-auth #home,
body.mode-work #home,
body.mode-work #authScreen,
body.mode-home #authScreen {
  display: none !important;
}
body.mode-work {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}
body.mode-work .sidebar { display: none !important; }
body.mode-work main { flex: 1; width: 100%; }
#authScreen { display: none; min-height: 100%; }
body.mode-auth #authScreen {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--bg);
}

.auth-card, .card-form, .obj-card, .draft-banner, .sheet, .entry, .block-note {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
}
.auth-card {
  width: min(420px, 100%);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.auth-card .brand { margin-bottom: 8px; color: var(--text); }
.auth-card .brand-name { color: var(--text); }
.auth-card .brand-sub { color: var(--text-secondary); }

.home-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 28px;
  background: var(--dark);
  color: var(--on-dark);
}
.home-top .brand { margin-bottom: 0; align-items: center; }
.home-top .brand-logo {
  height: 64px;
  width: auto;
  display: block;
  filter: invert(1);
}
.home-top-actions { display: flex; align-items: center; gap: 12px; }
.home-top .muted { color: var(--on-dark-muted); }
.home-body { padding: 28px; max-width: 1100px; }
.home-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 16px;
}
.home-tools-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.home-top-actions button {
  background: transparent;
  color: var(--on-dark);
  border-color: rgba(255, 255, 255, 0.28);
}
.home-top-actions button:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--on-dark);
  border-color: rgba(255, 255, 255, 0.45);
}
.staff-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.staff-head h2 { margin: 0 0 6px; }
.staff-head .lead { margin: 0; }
body[data-smeta="0"] .nav-btn[data-tab="calc"],
body[data-smeta="0"] .nav-btn[data-tab="smeta"],
body[data-smeta="0"] .nav-btn[data-tab="price"],
body[data-smeta="0"] .section-tab[data-tab="calc"],
body[data-smeta="0"] .section-tab[data-tab="smeta"],
body[data-smeta="0"] .section-tab[data-tab="price"],
body[data-smeta="0"] .hub-tile[data-go="estimate"] { display: none !important; }
.staff-dialog-card { width: min(360px, 100%); }
.staff-dialog-card .row-actions { margin-top: 4px; }
#catalogSearch { min-width: 220px; flex: 1; }
.catalog-tools {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--bg);
  padding: 4px 0 12px;
}
.catalog-table { margin-bottom: 28px; }
.catalog-menu {
  position: fixed;
  z-index: 40;
  display: flex;
  flex-direction: column;
  min-width: 180px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.catalog-menu[hidden] { display: none !important; }
.catalog-menu button {
  border: 0;
  background: transparent;
  text-align: left;
  padding: 8px 10px;
  border-radius: 7px;
  color: var(--text);
  font-size: 14px;
}
.catalog-menu button:hover { background: var(--surface-secondary); }
#catalogBody tr.is-menu-target td { background: var(--selected); }
.card-form, .draft-banner, .edit-object {
  padding: 16px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.card-form[hidden],
.draft-banner[hidden],
.edit-object[hidden],
#setupBox[hidden],
#staffBox[hidden],
#objectForm[hidden],
#objectsPane[hidden],
#settingsPane[hidden],
#catalogPane[hidden],
#openSettings[hidden],
#authScreen[hidden] {
  display: none !important;
}
.card-form label, .edit-object label, .auth-card label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--text-secondary);
}
.card-form input, .card-form textarea, .edit-object input, .auth-card input {
  padding: 8px 10px;
  font-size: 15px;
}
.inline-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); align-items: end; }
#taskForm {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
#taskForm label {
  flex: 1 1 120px;
  min-width: 0;
  gap: 2px;
  font-size: 12px;
}
#taskForm label:has([name="title"]),
#taskForm label:has([name="note"]) { flex: 1 1 150px; }
#taskForm label:has([name="assignee_id"]) { flex: 0 1 150px; }
#taskForm label:has([name="due"]) { flex: 0 0 124px; }
#taskForm label:has([name="due_time"]) { flex: 0 0 84px; }
#taskForm input,
#taskForm select {
  height: 28px;
  padding: 0 8px;
  font-size: 14px;
  border-radius: 10px;
}
#taskForm .primary {
  flex: 0 0 auto;
  height: 28px;
  padding: 0 14px;
}
#taskForm .form-error { flex: 1 0 100%; }
.inline-form select {
  width: 100%;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: inherit;
  padding: 0 10px;
}
.row-actions { display: flex; gap: 8px; }
.form-error { color: #8A4A3A; margin: 0; font-size: 13px; }
.lead { margin: 0 0 14px; color: var(--text-secondary); max-width: 640px; line-height: 1.45; }
.draft-banner { display: flex; justify-content: space-between; gap: 12px; align-items: center; }

.obj-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.obj-list.is-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.obj-card {
  padding: 16px;
  text-align: left;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 10px;
  cursor: pointer;
}
.obj-drag {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 8px;
  color: var(--text-secondary);
  touch-action: none;
  cursor: grab;
}
.obj-drag:active { cursor: grabbing; }
.obj-drag span {
  display: block;
  width: 10px;
  height: 10px;
  margin: 0 auto;
  background:
    radial-gradient(circle, currentColor 1.1px, transparent 1.3px) 0 0 / 5px 5px;
}
.obj-card.is-dragging { opacity: 0.45; }
.obj-title { grid-column: 2; grid-row: 1; align-self: center; }
.obj-lines, .obj-by, .obj-card-foot { grid-column: 1 / -1; }
.obj-list.is-rows .obj-card {
  grid-template-columns: auto minmax(140px, 220px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 16px;
  padding: 10px 14px;
}
.obj-list.is-rows .obj-title,
.obj-list.is-rows .obj-lines,
.obj-list.is-rows .obj-card-foot {
  grid-column: auto;
  grid-row: auto;
}
.obj-list.is-rows .obj-title { font-size: 20px; }
.obj-list.is-rows .obj-lines {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px 16px;
}
.obj-list.is-rows .obj-line {
  display: flex;
  gap: 6px;
  align-items: baseline;
}
.obj-list.is-rows .obj-by { display: none; }
.obj-list.is-rows .obj-card-foot { margin-top: 0; justify-content: flex-end; }
.obj-card:hover { border-color: var(--accent); }
.obj-title {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.12;
}
.obj-card .muted { color: var(--text-secondary); font-size: 13px; }
.obj-lines { display: flex; flex-direction: column; gap: 5px; }
.obj-line {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  font-size: 13px;
  line-height: 1.35;
}
.obj-line span {
  color: var(--text-secondary);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.obj-line b { font-weight: 500; min-width: 0; }
.obj-by { color: var(--text-secondary); font-size: 12px; line-height: 1.35; }
.obj-card-foot { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-top: 4px; }
button.quiet {
  border-color: transparent;
  background: transparent;
  color: #8A4A3A;
  padding: 4px 8px;
}

.object-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px 0;
  flex-shrink: 0;
}
.hub-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  max-width: 880px;
}
.hub-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 980px; }
.hub-tile {
  width: 100%;
  text-align: left;
  white-space: normal;
  min-height: 132px;
  padding: 22px 20px;
  border-radius: 14px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.hub-tile:hover { border-color: var(--accent); }
.hub-title {
  font-family: var(--display);
  font-size: 32px;
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.08;
}
.hub-sub {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.35;
}
.hub-tile-wide { grid-column: 1 / -1; min-height: 96px; }
.view-line {
  display: none;
  position: relative;
  align-items: center;
  margin: 14px 28px 0;
  min-height: 34px;
  flex-shrink: 0;
}
body[data-view="calc"] .view-line,
body[data-view="smeta"] .view-line,
body[data-view="price"] .view-line { display: grid; grid-template-columns: 1fr auto 1fr; }
.section-switch {
  display: none;
  grid-column: 2;
  justify-self: center;
  width: fit-content;
  margin: 0;
  padding: 3px;
  gap: 2px;
  background: var(--surface-secondary);
  border-radius: 8px;
}
.history-tools {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 4px;
}
.history-tools button {
  padding: 2px 8px;
  font-size: 11px;
  line-height: 1.2;
  border-radius: 8px;
  font-weight: 500;
}
.section-tab {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  border-radius: 6px;
  padding: 6px 18px;
  line-height: 1.2;
}
.section-tab:hover { color: var(--text); background: rgba(255, 255, 255, 0.45); }
.section-tab.active {
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
}
body[data-view="calc"] .section-switch,
body[data-view="smeta"] .section-switch,
body[data-view="price"] .section-switch,
body[data-view="masters"] .section-switch { display: flex; }
.section-tab.masters-pane { display: none; }
body[data-view="masters"] .view-line { display: grid; grid-template-columns: 1fr auto 1fr; }
body[data-view="masters"] .section-tab[data-tab] { display: none; }
body[data-view="masters"] .section-tab.masters-pane { display: inline-block; }
body[data-view="masters"] .history-tools { visibility: hidden; }
.estimate-tools {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 28px 0;
  flex-shrink: 0;
}
body[data-view="calc"] #estimateTools,
body[data-view="smeta"] #estimateTools,
body[data-view="price"] #estimateTools { display: flex; }
#panel-hub, #panel-estimate { overflow: auto; }
#panel-hub {
  gap: 14px;
  padding: 18px 22px 18px;
  background: var(--bg);
}
.dash-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  padding: 22px 26px 20px;
  border-radius: 24px;
  background: var(--dark);
  color: var(--on-dark);
  border: 0;
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
}
.dash-hero::after {
  content: "";
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 0;
  height: 1px;
  background: var(--accent);
  pointer-events: none;
}
.dash-hero-main { position: relative; z-index: 1; min-width: 0; }
.dash-hero-side {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  min-width: 0;
}
.dash-hero #editObjectBtn {
  background: transparent;
  color: var(--on-dark);
  border-color: rgba(255, 255, 255, 0.35);
}
.dash-hero #editObjectBtn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--accent);
  color: var(--on-dark);
}
.dash-kicker {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
#cardComplex {
  display: block;
  font-family: var(--display);
  font-size: 48px;
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--on-dark);
}
.object-facts {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  max-width: 560px;
}
.fact {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 112px;
  padding: 9px 12px 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--on-dark);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.15;
}
.fact i {
  font-style: normal;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}
.fact-phone {
  background: var(--accent);
  color: var(--dark);
  border-color: transparent;
}
.fact-phone i { color: rgba(41, 40, 36, 0.62); }
.fact-phone { white-space: nowrap; }
.fact-phone:hover { background: #b89564; color: var(--dark); }
.msg-links { display: inline-flex; gap: 6px; align-items: center; }
.msg-link {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 12px;
  border-radius: 12px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}
.msg-tg { background: #2AABEE; }
.msg-tg:hover { background: #1a96d4; color: #fff; }
.contact-reach {
  grid-area: phone;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.contact-call { grid-area: auto; }
.file-queue {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
}
.file-queue[hidden] { display: none; }
.file-queue-row {
  display: grid;
  grid-template-columns: minmax(140px, 0.7fr) minmax(180px, 1fr);
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
  font-size: 14px;
}
.file-queue-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-queue-actions { display: flex; gap: 8px; }
.file-caption {
  color: var(--text);
  font-size: 14px;
  line-height: 1.35;
}
.object-phone {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--accent-dark);
}
.object-phone:hover { color: var(--accent-dark); }
.object-stats {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  min-height: 0;
}
.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 16px 13px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  min-height: 112px;
}
.stat-sum {
  background: var(--dark);
  color: var(--on-dark);
  border-color: transparent;
}
.stat-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  line-height: 1.3;
}
.stat-sum .stat-label { color: var(--on-dark-muted); }
.stat strong {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat strong small {
  font-size: 0.55em;
  font-weight: 500;
  margin-left: 3px;
  color: var(--text-muted);
}
.stat-sum strong small { color: var(--accent); }
.stat-bar {
  flex: 0 0 auto;
  width: 100%;
  height: 6px;
  border-radius: 99px;
  background: var(--surface-secondary);
  overflow: hidden;
}
.stat-sum .stat-bar { background: rgba(255, 255, 255, 0.12); }
.stat-bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--accent-dark);
}
#panel-hub .hub-blocks {
  flex: 1;
  min-height: 220px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}
.hub-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
}
.hub-block h2 {
  margin: 0;
  padding: 2px 4px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.hub-block h2::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: var(--accent);
}
#panel-hub .hub-grid {
  flex: 1;
  max-width: none;
  gap: 8px;
  align-content: stretch;
}
#panel-hub .hub-grid-work {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
#panel-hub .hub-grid-work .hub-tile:last-child { grid-column: 1 / -1; }
#panel-hub .hub-grid-office {
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(0, 1fr);
}
#panel-hub .hub-journal-tile {
  grid-column: 1 / -1;
  height: auto;
  min-height: 72px;
  align-self: start;
}
.hub-remind {
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 2px;
}
.hub-remind-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 4px 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.hub-remind-empty {
  margin: 8px 4px;
  color: var(--text-secondary);
  font-size: 13px;
}
.hub-remind-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: var(--bg);
  color: inherit;
  cursor: pointer;
}
.hub-remind-item:hover { border-color: var(--accent); }
.hub-remind-item.overdue {
  background: #f6e2dc;
  border-color: #e2b5a8;
}
.hub-remind-item.overdue:hover { border-color: #8A4A3A; }
.hub-remind-item.soon {
  background: #e4f3e8;
  border-color: #b5d6c0;
}
.hub-remind-item.soon:hover { border-color: #2f6b4f; }
.hub-remind-title {
  font-size: 14px;
  font-weight: 550;
}
.hub-remind-when,
.hub-remind-who {
  font-size: 12px;
  color: var(--text-secondary);
}
.hub-remind-item.overdue .hub-remind-when,
.hub-remind-item.overdue .hub-remind-who { color: #8A4A3A; }
.hub-remind-item.soon .hub-remind-when,
.hub-remind-item.soon .hub-remind-who { color: #2f6b4f; }
.hub-journal-tile .hub-mark {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0;
}
#panel-hub .hub-tile {
  height: 100%;
  min-height: 72px;
  padding: 12px 14px;
  gap: 12px;
  border-radius: 12px;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  background: var(--bg);
  border-color: transparent;
}
#panel-hub .hub-tile:hover {
  background: var(--surface);
  border-color: var(--accent);
}
.hub-mark {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  font-family: var(--display);
  font-size: 18px;
  letter-spacing: 0.04em;
  color: var(--accent-dark);
}
#panel-hub .hub-tile:hover .hub-mark {
  background: var(--dark);
  color: var(--on-dark);
  border-color: var(--dark);
}
.hub-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
#panel-hub .hub-title {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.2;
}
#panel-hub .hub-sub { font-size: 12px; }
#panel-hub .hub-sub em {
  font-style: normal;
  font-weight: 650;
  color: #8A4A3A;
}
#panel-hub .hub-tile.hub-alert {
  background: #f8efe8;
  border-color: #e2c8bc;
}
#panel-hub .hub-tile.hub-alert .hub-mark {
  background: #8A4A3A;
  color: #fff;
  border-color: #8A4A3A;
}
.hub-go {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-right: 1.5px solid var(--text-muted);
  border-top: 1.5px solid var(--text-muted);
  transform: rotate(45deg);
  margin-right: 4px;
}
#panel-hub .hub-tile-wide { grid-column: auto; min-height: 0; }
.object-bar-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
body[data-view="journal"] .object-bar-text { flex: 0 1 auto; }
.bar-view-title {
  margin: 0;
  font-family: var(--display);
  font-size: 36px;
  letter-spacing: -0.035em;
  font-weight: 300;
  line-height: 1.05;
}
.bar-view-title[hidden] { display: none !important; }
body[data-view="journal"] #toObjectBtn { margin-left: auto; }
body.office-split main {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
}
body.office-split #objectBar { grid-column: 1 / -1; }
body.office-split .panel.active { grid-column: 2; grid-row: 2; min-width: 0; }
.office-nav {
  display: none;
  grid-column: 1;
  grid-row: 2;
  min-height: 0;
  margin: 14px 0 16px 22px;
  padding: 14px;
  flex-direction: column;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: auto;
  align-self: start;
  max-height: calc(100% - 30px);
}
body.office-split .office-nav { display: flex; }
.office-nav h2 {
  margin: 0;
  padding: 2px 4px 4px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.office-link {
  width: 100%;
  text-align: left;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--bg);
  border: 1px solid transparent;
}
.office-link:hover { background: var(--surface-secondary); border-color: var(--accent); }
.office-link.active {
  background: var(--surface);
  border-color: var(--dark);
}
.office-link .hub-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 16px;
}
.office-link .hub-title {
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
}
.office-link .hub-sub { font-size: 12px; color: var(--text-secondary); }
.office-link .hub-sub em { font-style: normal; font-weight: 650; color: #8A4A3A; }
.office-link.hub-alert { background: #f8efe8; border-color: #e2c8bc; }
.office-link.hub-alert .hub-mark { background: #8A4A3A; color: #fff; border-color: #8A4A3A; }
body.office-split #panel-journal { padding: 14px 22px 16px 16px; }
body[data-view="hub"] .object-bar-text { display: none; }
body[data-view="hub"] #backToObjects { margin-left: auto; }
body[data-view="smeta"] .object-bar {
  padding: 6px 16px 0;
  gap: 8px;
}
body[data-view="smeta"] .object-bar-text strong { font-size: 20px; }
body[data-view="smeta"] .object-bar-text span { font-size: 12px; line-height: 1.2; }
.object-bar-text strong {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.object-bar-text span { color: var(--text-secondary); font-size: 13px; }
.edit-object { margin: 8px 28px 0; }
.edit-object input[readonly] {
  background: var(--surface-secondary);
  color: var(--text);
}
.edit-object:not([hidden]) { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); align-items: end; }
main .panel { height: auto; flex: 1; min-height: 0; }
#panel-masters, #panel-tasks, #panel-contacts, #panel-files, #panel-changes { overflow: auto; }

.nav { flex: 1; overflow: auto; min-height: 0; }
.nav-group { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.nav-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  padding: 8px 12px 4px;
}
.nav-btn em {
  font-style: normal;
  background: var(--accent);
  color: var(--dark);
  border-radius: 99px;
  padding: 0 6px;
  margin-left: 6px;
  font-size: 11px;
}

.coeff-field input { width: 88px; }
.master-act .piece { display: block; width: 100%; }
.master-act .sheet {
  width: 100%;
  table-layout: fixed;
}
.master-act .sheet th:nth-child(n+2),
.master-act .sheet td:nth-child(n+2) {
  width: 124px;
  text-align: center;
}
.sheet { width: 100%; border-collapse: collapse; margin-top: 8px; }
.sheet th, .sheet td { text-align: left; padding: 0 10px; border-bottom: 1px solid var(--border); font-size: 13px; vertical-align: middle; }
.sheet th {
  height: 28px;
  background: var(--surface-secondary);
  color: var(--text);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: uppercase;
}
.sheet td { height: 28px; }
.sheet td.num, .sheet th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.piece-title { margin: 18px 0 6px; }
.master-total {
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--dark);
  color: var(--on-dark);
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.master-act {
  margin-top: 16px;
  padding: 14px 16px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
}
.master-act-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}
.master-act-head h2 {
  margin: 0;
  font-size: 18px;
  flex: 1 1 220px;
}
.master-act .master-total { margin-top: 12px; }
#panel-contacts {
  gap: 14px;
  overflow: auto;
  background: var(--bg);
}
#panel-contacts .contacts-head { align-items: center; margin-bottom: 0; }
.contacts-tools { display: flex; align-items: center; gap: 12px; }
.contact-dialog-card { width: min(420px, 100%); }
.change-dialog-card { width: min(520px, 100%); }
.change-dialog-card textarea { padding: 8px 10px; font-size: 15px; min-height: 88px; }
.contact-dialog-card .row-actions { margin-top: 4px; }
.contacts-count {
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--dark);
  color: var(--accent);
  font-family: var(--display);
  font-size: 24px;
  letter-spacing: 0.04em;
  line-height: 1;
}
.contacts-count:empty { display: none; }
.contact-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
  align-content: start;
}
.contact-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 36px minmax(0, max-content) auto;
  grid-template-areas:
    "avatar id del"
    "avatar phone del"
    "avatar note del";
  gap: 4px 10px;
  align-items: center;
  width: max-content;
  max-width: 100%;
}
.contact-avatar {
  grid-area: avatar;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--dark);
  color: var(--accent);
  font-family: var(--display);
  font-size: 16px;
  letter-spacing: 0.04em;
  align-self: start;
}
.contact-id {
  grid-area: id;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}
.contact-id strong {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
}
.contact-role {
  font-size: 12px;
  line-height: 1.2;
  color: var(--text-secondary);
  background: var(--bg);
  border-radius: 99px;
  padding: 4px 8px;
}
.contact-call {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  height: 28px;
  text-decoration: none;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  color: var(--dark);
  background: var(--accent);
  border-radius: 10px;
  padding: 0 10px;
}
.contact-card .msg-link {
  height: 28px;
  border-radius: 10px;
}
.contact-call:hover { background: #b89564; color: var(--dark); }
.contact-note {
  grid-area: note;
  margin: 0;
  min-width: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.3;
}
button.quiet.contact-del {
  grid-area: del;
  align-self: start;
  color: var(--text-muted);
  padding: 2px 0;
}
button.quiet.contact-del:hover {
  color: #8A4A3A;
  background: transparent;
  border-color: transparent;
}
.contact-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 28px 18px;
  border: 1px dashed var(--border-strong);
  border-radius: 16px;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.55);
}
.entry {
  padding: 12px 14px;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.entry.done .entry-title { text-decoration: line-through; color: var(--text-muted); }
.entry.overdue .entry-due { color: #8A4A3A; }
.entry-title { font-weight: 500; }
.entry-meta { color: var(--text-secondary); font-size: 13px; margin-top: 4px; white-space: pre-wrap; }
.dropzone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  padding: 16px;
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  margin-bottom: 12px;
}
.file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.file-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.file-card img, .file-card video { width: 100%; height: 140px; object-fit: cover; background: #111; }
.file-card .file-meta { padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.staff-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.smeta-readonly-note { display: none; margin: 0 0 12px; color: var(--text-secondary); }
.empty-note { color: var(--text-secondary); }

body.is-phone .view-line,
body.is-phone .section-switch { display: none !important; }
body.is-phone[data-view="masters"] .view-line {
  display: flex !important;
  justify-content: center;
  margin: 10px 16px 0;
}
body.is-phone[data-view="masters"] .section-switch { display: flex !important; }
body.is-phone[data-view="masters"] .history-tools { display: none !important; }
body.is-phone .phone-hide,
body.is-phone #estimateTools,
body.is-phone #panel-smeta .smeta-toolbar { display: none !important; }
body.is-phone .smeta-readonly-note { display: block; }
body.is-phone #panel-smeta input,
body.is-phone #panel-smeta select,
body.is-phone #panel-smeta textarea,
body.is-phone #checkAll {
  pointer-events: none;
}
body.is-phone.mode-work {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
body.is-phone .hub-grid,
body.is-phone .hub-grid-3 { grid-template-columns: 1fr; }
body.is-phone .hub-tile-wide { grid-column: auto; }
body.is-phone .hub-title { font-size: 34px; }
body.is-phone .dash-hero { flex-direction: column; align-items: flex-start; padding: 18px 16px; }
body.is-phone .dash-hero-side { align-items: flex-start; width: 100%; }
body.is-phone #cardComplex { font-size: 52px; }
body.is-phone .object-facts { justify-content: flex-start; max-width: none; }
body.is-phone .object-stats { width: 100%; grid-template-columns: 1fr 1fr; }
body.is-phone .stat { min-height: 96px; }
body.is-phone .stat strong { font-size: 26px; }
body.is-phone #panel-hub .hub-blocks { grid-template-columns: 1fr; }
body.is-phone #panel-hub .hub-grid-work,
body.is-phone #panel-hub .hub-grid-office {
  grid-template-columns: 1fr;
  grid-template-rows: none;
}
body.is-phone #panel-hub .hub-grid-work .hub-tile:last-child { grid-column: auto; }
body.is-phone #panel-hub .hub-title { font-size: 16px; }
body.is-phone #panel-hub .hub-tile-wide { grid-column: 1 / -1; }
body.is-phone main { flex: 1; min-height: 0; }
body.is-phone .panel { padding: 14px 14px 24px; }
body.is-phone.office-split main { display: flex; flex-direction: column; }
body.is-phone.office-split .office-nav {
  flex-direction: row;
  margin: 8px 14px 0;
  padding: 8px;
  overflow-x: auto;
}
body.is-phone.office-split .office-nav h2,
body.is-phone.office-split .office-link .hub-sub { display: none; }
body.is-phone.office-split .office-link { width: auto; flex: 0 0 auto; padding: 8px 10px; }
body.is-phone.office-split .panel.active { flex: 1; min-height: 0; }
body.is-phone h1 { font-size: 32px; }
body.is-phone #taskForm { flex-direction: column; align-items: stretch; }
body.is-phone #taskForm label,
body.is-phone #taskForm .primary { flex: none; width: 100%; max-width: none; }
body.is-phone .contact-grid { display: grid; grid-template-columns: 1fr; }
body.is-phone .contact-card {
  width: 100%;
  grid-template-columns: 36px minmax(0, 1fr);
  grid-template-areas:
    "avatar id"
    "phone phone"
    "note note"
    "del del";
}
body.is-phone .object-bar { padding: 10px 14px 0; flex-wrap: wrap; align-items: center; }
body.is-phone .object-bar > button { flex: 0 0 auto; }
body.is-phone:not([data-view="hub"]) .object-bar { flex-wrap: nowrap; }
body.is-phone:not([data-view="hub"]) .object-bar-text { min-width: 0; }
body.is-phone:not([data-view="hub"]) .object-bar-text span { display: none; }
body.is-phone:not([data-view="hub"]) .object-bar-text strong {
  font-size: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.is-phone input, body.is-phone select, body.is-phone textarea { font-size: 16px; }
body.is-phone #panel-act input.cell { min-height: 36px; }
body.is-phone .home-top {
  flex-wrap: wrap;
  align-items: center;
  padding: 14px 16px;
  gap: 10px 12px;
}
body.is-phone .home-top-actions { flex-wrap: wrap; gap: 8px; }
body.is-phone .home-body { padding: 16px; }
body.is-phone .home-tools { flex-wrap: wrap; align-items: center; }
body.is-phone .obj-list.is-rows .obj-card {
  grid-template-columns: auto minmax(0, 1fr);
}
body.is-phone .obj-list.is-rows .obj-lines,
body.is-phone .obj-list.is-rows .obj-card-foot {
  grid-column: 1 / -1;
}
body.is-phone .obj-list.is-rows .obj-card-foot { justify-content: space-between; }
body.is-phone .staff-head { flex-direction: column; }
body.is-phone #catalogSearch { min-width: 0; width: 100%; }
body.is-phone .stat strong {
  font-size: clamp(18px, 6.2vw, 26px);
  max-width: 100%;
}
body.is-phone #panel-hub .hub-blocks {
  flex: 0 0 auto;
  min-height: 0;
  height: auto;
}
body.is-phone #panel-hub .hub-block {
  min-height: auto;
  overflow: visible;
}
body.is-phone #panel-hub .hub-grid { flex: 0 0 auto; }
body.is-phone #panel-hub .hub-tile { height: auto; }
body.is-phone #panel-hub .hub-grid-office { grid-template-rows: auto auto; }
body.is-phone .hub-remind { overflow: visible; }
body.is-phone .panel-head {
  flex-direction: column;
  align-items: stretch;
}
body.is-phone .panel-head .toolbar { justify-content: flex-start; }
body.is-phone .act-layout,
body.is-phone .act-col,
body.is-phone #panel-smeta,
body.is-phone #panel-smeta .table-wrap,
body.is-phone #panel-act .table-wrap,
body.is-phone .piece {
  min-width: 0;
  max-width: 100%;
}
body.is-phone #panel-smeta .table-wrap,
body.is-phone #panel-act .table-wrap,
body.is-phone .piece { overflow: auto; }
body.is-phone .smeta-grid,
body.is-phone .act-grid {
  width: 520px;
  max-width: none;
  table-layout: fixed;
}
body.is-phone .smeta-grid .c-check,
body.is-phone .act-grid .c-check { width: 28px; }
body.is-phone .smeta-grid .c-work,
body.is-phone .act-grid .c-work { width: 168px; }
body.is-phone .smeta-grid .c-unit,
body.is-phone .act-grid .c-unit { width: 42px; }
body.is-phone .smeta-grid .c-num,
body.is-phone .act-grid .c-num { width: 72px; }
body.is-phone #panel-act .act-grid .c-vol { width: 96px; }
body.is-phone .smeta-grid .c-price,
body.is-phone .act-grid .c-price { width: 76px; }
body.is-phone .smeta-grid .c-sum,
body.is-phone .act-grid .c-sum { width: 88px; }
body.is-phone .act-grid .c-act { width: 36px; }
body.is-phone table.grid td.c-work,
body.is-phone table.grid th.c-work,
body.is-phone #panel-act td {
  white-space: normal;
  overflow: hidden;
  text-overflow: unset;
  line-height: 1.25;
  vertical-align: middle;
}
body.is-phone #panel-act td.c-num,
body.is-phone #panel-act td.c-unit,
body.is-phone #panel-act th.c-num,
body.is-phone #panel-act th.c-unit,
body.is-phone #panel-smeta td.c-num,
body.is-phone #panel-smeta td.c-unit,
body.is-phone #panel-smeta th.c-num,
body.is-phone #panel-smeta th.c-unit { white-space: nowrap; }
body.is-phone #actAvailBody tr.work td:nth-child(1),
body.is-phone #actAvailBody tr.work td:nth-child(2),
body.is-phone #actBody tr.work td:first-child {
  position: sticky;
  z-index: 1;
  background: var(--surface);
}
body.is-phone #actAvailBody tr.work td:nth-child(1) { left: 0; }
body.is-phone #actAvailBody tr.work td:nth-child(2) { left: 28px; }
body.is-phone #actBody tr.work td:first-child { left: 0; }
body.is-phone #panel-smeta tbody tr,
body.is-phone #panel-smeta tbody tr td,
body.is-phone #panel-act tbody tr,
body.is-phone #panel-act tbody tr td { height: auto; }
body.is-phone #panel-smeta tbody tr.work .cell,
body.is-phone #panel-act .cell {
  height: auto;
  min-height: 28px;
  max-height: none;
  line-height: 1.3;
}
body.is-phone .smeta-grid .c-check,
body.is-phone .act-grid .c-check,
body.is-phone .smeta-grid .c-work,
body.is-phone .act-grid .c-work {
  position: sticky;
  z-index: 1;
  background: var(--surface);
}
body.is-phone .smeta-grid .c-check,
body.is-phone .act-grid .c-check { left: 0; }
body.is-phone .smeta-grid .c-check + .c-work,
body.is-phone .act-grid .c-check + .c-work { left: 28px; }
body.is-phone .act-grid th.c-work:first-child,
body.is-phone .act-grid td.c-work:first-child { left: 0; }
body.is-phone .smeta-grid thead th.c-check,
body.is-phone .smeta-grid thead th.c-work,
body.is-phone .act-grid thead th.c-check,
body.is-phone .act-grid thead th.c-work {
  z-index: 3;
  background: var(--surface-secondary);
}
body.is-phone .smeta-grid tr.section td.c-check,
body.is-phone .smeta-grid tr.section td.c-work,
body.is-phone .act-grid tr.section td.c-check,
body.is-phone .act-grid tr.section td.c-work { background: var(--dark); }
body.is-phone .smeta-grid tr.category td.c-check,
body.is-phone .smeta-grid tr.category td.c-work,
body.is-phone .act-grid tr.category td.c-check,
body.is-phone .act-grid tr.category td.c-work { background: var(--cat-row); }
body.is-phone .smeta-grid tr.work.checked td.c-check,
body.is-phone .smeta-grid tr.work.checked td.c-work,
body.is-phone .act-grid tr.work.checked td.c-check,
body.is-phone .act-grid tr.work.checked td.c-work { background: var(--row-pick); }
body.is-phone #panel-act.panel { overflow: auto; }
body.is-phone .act-layout {
  flex: none;
  grid-template-rows: auto auto;
}
body.is-phone .act-col { height: auto; }
body.is-phone .act-col .table-wrap.grow {
  flex: none;
  height: 320px;
}
body.is-phone .sheet { min-width: 520px; }
body.is-phone .sheet td:first-child,
body.is-phone .sheet th:first-child {
  white-space: normal;
  min-width: 150px;
}
body.is-phone .master-total { flex-wrap: wrap; }
body.is-phone .file-queue-row { grid-template-columns: 1fr; }
body.is-phone .row-sticky {
  position: sticky;
  left: 10px;
  display: inline-block;
  max-width: calc(100vw - 108px);
  white-space: normal;
  vertical-align: top;
}

#panel-journal {
  overflow: hidden;
  gap: 0;
  padding-top: 14px;
}
#panel-journal .panel-head { margin-bottom: 8px; }
#panel-journal .lead { margin-bottom: 0; }
.journal-feed {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 4px 2px 12px;
}
.journal-empty {
  margin: 8px 0 0;
  padding: 28px 18px;
  border: 1px dashed var(--border-strong);
  border-radius: 16px;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.55);
}
.journal-day { margin: 0 0 18px; }
.journal-day-title {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0 0 8px;
  padding: 6px 2px;
  background: linear-gradient(var(--bg) 70%, rgba(245, 242, 237, 0));
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.journal-list { position: relative; display: flex; flex-direction: column; gap: 8px; }
.journal-list::before {
  content: "";
  position: absolute;
  left: 62px;
  top: 20px;
  bottom: 12px;
  width: 1px;
  background: var(--border);
}
.journal-item {
  display: grid;
  grid-template-columns: 46px 16px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}
.journal-item time {
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  padding-top: 12px;
  text-align: right;
}
.journal-dot {
  width: 9px;
  height: 9px;
  border-radius: 99px;
  background: var(--accent);
  margin: 15px auto 0;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 3px var(--bg);
}
.kind-task .journal-dot { background: var(--accent-dark); }
.kind-task-done .journal-dot { background: #2f6b4f; }
.kind-file .journal-dot { background: var(--dark); }
.kind-contact .journal-dot { background: #8A4A3A; }
.kind-change .journal-dot { background: var(--text-muted); }
.journal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.journal-item.overdue .journal-card {
  background: #f8efe8;
  border-color: #e2c8bc;
}
.journal-card-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}
.journal-kind {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.journal-card strong { font-size: 15px; line-height: 1.3; }
.journal-note { color: var(--text-secondary); font-size: 13px; white-space: pre-wrap; }
.journal-reach { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.journal-check { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.journal-media { max-width: 280px; }
.journal-media img, video.journal-media {
  width: 100%;
  max-height: 180px;
  object-fit: cover;
  border-radius: 10px;
  background: #111;
  display: block;
}
.journal-composer {
  flex: 0 0 auto;
  margin: 0 0 12px;
  padding: 8px 12px 12px;
  background: var(--surface-secondary);
  border: 1px solid var(--border);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.journal-composer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.journal-kinds {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  width: fit-content;
  max-width: 100%;
  padding: 3px;
  background: #E7E4DE;
  border-radius: 999px;
}
.journal-kind-thumb {
  position: absolute;
  top: 3px;
  left: 0;
  height: calc(100% - 6px);
  width: 0;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(17, 19, 19, 0.12);
  transition: transform 180ms ease, width 180ms ease;
  pointer-events: none;
}
.journal-kinds button {
  position: relative;
  z-index: 1;
  border: none;
  background: transparent;
  border-radius: 999px;
  padding: 6px 14px;
  color: var(--text-secondary);
}
.journal-kinds button.active {
  color: var(--text);
  font-weight: 650;
}
.journal-composer .form-error { margin: 0; }
.journal-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  align-items: end;
}
.journal-fields[hidden] { display: none !important; }
.journal-fields label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--text-secondary);
}
.journal-fields input, .journal-fields textarea, .journal-fields select { width: 100%; }
.journal-fields input, .journal-fields select {
  height: 28px;
  padding: 0 10px;
  border-radius: 10px;
  line-height: 26px;
}
.journal-fields .span-2 { grid-column: span 2; }
.journal-fields .span-all { grid-column: 1 / -1; }
.journal-file-btn { align-self: end; justify-content: center; min-height: 40px; }
.journal-file-name {
  align-self: center;
  color: var(--text-secondary);
  font-size: 13px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.is-phone .journal-fields { grid-template-columns: 1fr; }
body.is-phone .journal-fields .span-2,
body.is-phone .journal-fields .span-all { grid-column: auto; }
body.is-phone .journal-kinds { width: 100%; overflow-x: auto; }
body.is-phone .journal-kinds button {
  flex: 0 0 auto;
  text-align: center;
  padding: 6px 12px;
  white-space: nowrap;
}
body.is-phone .journal-list::before { left: 54px; }
body.is-phone .journal-item { grid-template-columns: 38px 16px minmax(0, 1fr); }
body.is-phone .journal-composer-top { align-items: stretch; flex-direction: column; }
body.is-phone .journal-composer-top .primary { width: 100%; }
.date-pop, .time-pop {
  position: fixed;
  z-index: 60;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(17, 19, 19, 0.14);
  padding: 10px;
}
.date-pop[hidden], .time-pop[hidden] { display: none !important; }
.date-pop { width: 280px; }
.date-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.date-pop-head strong {
  font-size: 14px;
  font-weight: 650;
  text-transform: capitalize;
}
.date-pop-head button, .date-pop-grid button, .time-pop button {
  border: none;
  background: transparent;
  border-radius: 8px;
  min-width: 32px;
  height: 32px;
  padding: 0;
}
.date-pop-head button { font-size: 20px; line-height: 1; }
.date-pop-head button:hover, .date-pop-grid button:hover, .time-pop button:hover { background: var(--surface-secondary); }
.date-pop-week, .date-pop-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
}
.date-pop-week {
  margin-bottom: 4px;
  color: var(--text-muted);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.date-pop-grid button.is-today { box-shadow: inset 0 0 0 1px var(--accent-dark); }
.date-pop-grid button.is-selected, .time-pop button.is-selected {
  background: var(--dark);
  color: var(--on-dark);
}
.date-pop-grid button.is-selected:hover, .time-pop button.is-selected:hover {
  background: var(--dark);
  color: var(--on-dark);
}
.time-pop { width: 168px; }
.time-pop-title {
  margin: 0 4px 8px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.time-pop-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.time-pop-cols > div {
  max-height: 220px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.time-pop button { width: 100%; }