:root {
  --green: #0f6e56;
  --primary: #0f6e56;
  --green-2: #12473a;
  --saffron: #f58220;
  --blue: #2377c7;
  --red: #d94c43;
  --paper: #eef3ef;
  --surface: #ffffff;
  --surface-2: #f4f7f5;
  --surface-3: #e8f0ec;
  --ink: #142c25;
  --muted: #65736d;
  --line: #dfe7e2;
  --sidebar-bg: #10251f;
  --sidebar-ink: #eef8f3;
  --sidebar-muted: #9fb6ad;
  --shadow: 0 18px 52px rgba(20, 44, 37, .11);
  --soft-shadow: 0 8px 24px rgba(20, 44, 37, .08);
}

html[data-theme="dark"] {
  --paper: #0f1412;
  --surface: #19211d;
  --surface-2: #111a16;
  --surface-3: #223129;
  --ink: #eef6f1;
  --muted: #b8c5bf;
  --line: #304039;
  --sidebar-bg: #0a110f;
  --sidebar-ink: #eef6f1;
  --sidebar-muted: #91a39b;
  --shadow: 0 16px 46px rgba(0, 0, 0, .34);
  --soft-shadow: 0 8px 26px rgba(0, 0, 0, .24);
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  min-height: 100%;
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
.hidden { display: none !important; }

.app-shell {
  min-height: 100svh;
  display: grid;
  grid-template-columns: 292px minmax(0, 1fr);
}

body.prelogin .app-shell {
  grid-template-columns: minmax(0, 1fr);
}

body.prelogin .sidebar {
  display: none;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100svh;
  border-right: 1px solid rgba(255, 255, 255, .08);
  background: var(--sidebar-bg);
  color: var(--sidebar-ink);
  padding: 20px 14px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 18px;
  color: var(--sidebar-ink);
  font-size: 20px;
  font-weight: 900;
}

.nav {
  display: grid;
  gap: 5px;
  scrollbar-width: none;
}

.nav::-webkit-scrollbar {
  display: none;
}

.nav button {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--sidebar-muted);
  padding: 10px 12px;
  font-weight: 800;
  text-align: left;
}

.nav button.active {
  background: rgba(255, 255, 255, .10);
  color: #fff;
}

.nav button:hover {
  background: rgba(255, 255, 255, .07);
  color: var(--sidebar-ink);
}

.main {
  min-width: 0;
  padding: 22px clamp(16px, 3vw, 34px) 40px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
}

.sync-kicker {
  margin: 0 0 4px;
  color: var(--green);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

h1, h2, h3, p { margin-top: 0; }
h1 {
  margin-bottom: 0;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.05;
  letter-spacing: 0;
}

.top-actions, .strip-actions, .row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.icon-button, .mini-button, .secondary-button, .primary-button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  padding: 9px 12px;
  font-size: 14px;
  font-weight: 850;
}

a.mini-button,
a.secondary-button,
a.primary-button {
  text-decoration: none;
}

.mini-button.disabled {
  cursor: not-allowed;
  opacity: .45;
}

.mini-button.danger {
  color: var(--red);
}

button:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.icon-button {
  width: 42px;
  padding: 0;
}

.primary-button {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}

.secondary-button:hover, .mini-button.active {
  border-color: rgba(15, 110, 86, .34);
  background: rgba(15, 110, 86, .10);
  color: var(--green);
}

.offline-button {
  width: calc(100% - 20px);
  min-height: 42px;
  margin: 10px;
  border: 1px solid rgba(15, 110, 86, .28);
  border-radius: 8px;
  background: rgba(15, 110, 86, .10);
  color: var(--green);
  font-size: 14px;
  font-weight: 900;
}

.login-panel {
  min-height: min(650px, calc(100svh - 120px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 460px);
  align-items: center;
  gap: clamp(24px, 5vw, 70px);
}

.login-copy h2 {
  max-width: 680px;
  margin-bottom: 18px;
  font-size: clamp(36px, 7vw, 76px);
  line-height: .98;
  letter-spacing: 0;
}

.login-copy p {
  max-width: 620px;
  color: var(--muted);
  font-size: 19px;
  line-height: 1.65;
}

.auth-card, .auth-form, .status-strip, .panel, .metric, .record-dialog form {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.auth-card {
  padding: 10px;
}

.auth-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}

.auth-tabs button {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--muted);
  font-weight: 900;
}

.auth-tabs button.active {
  border-color: rgba(15, 110, 86, .38);
  background: rgba(15, 110, 86, .12);
  color: var(--green);
}

.auth-form {
  display: grid;
  gap: 16px;
  padding: 22px;
  box-shadow: none;
}

.auth-form h3 {
  margin: 0;
  font-size: 20px;
}

.email-check {
  text-align: left;
}

.mail-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(15, 110, 86, .14);
  color: var(--green);
  font-size: 24px;
  font-weight: 950;
}

.email-check-actions {
  display: grid;
  gap: 8px;
}

.auth-form p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.mode-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 760px;
  margin-top: 24px;
}

.mode-cards article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 16px;
}

.mode-cards article.recommended {
  border-color: rgba(15, 110, 86, .44);
  background: linear-gradient(135deg, rgba(15, 110, 86, .12), rgba(35, 119, 199, .08));
}

.mode-cards span {
  display: inline-block;
  margin-bottom: 9px;
  color: var(--green);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.mode-cards h3 {
  margin: 0 0 8px;
  font-size: 19px;
}

.mode-cards p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

label span {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

input, select, textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  padding: 9px 10px;
}

textarea { min-height: 84px; resize: vertical; }

input[type="file"] {
  padding: 8px;
}

input[type="file"]::file-selector-button {
  min-height: 34px;
  margin-right: 10px;
  border: 1px solid rgba(15, 110, 86, .32);
  border-radius: 8px;
  background: rgba(15, 110, 86, .10);
  color: var(--green);
  font: inherit;
  font-size: 13px;
  font-weight: 900;
}

.error { color: var(--red); font-weight: 800; }
.helper { color: var(--muted); font-size: 13px; line-height: 1.45; }

.status-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  margin-bottom: 18px;
  box-shadow: var(--soft-shadow);
}

.status-strip p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.status-dot {
  width: 9px;
  height: 9px;
  display: inline-block;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--saffron);
}
.status-dot.ok { background: var(--green); }

.grid {
  display: grid;
  gap: 14px;
}
.metrics { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.two-col { grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); }
.three-col { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.ring-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.ring-card {
  min-height: 118px;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 16px;
  box-shadow: var(--shadow);
}

.ring {
  --p: 0;
  width: 74px;
  height: 74px;
  flex: 0 0 74px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, var(--surface) 0 55%, transparent 56%),
    conic-gradient(var(--green) calc(var(--p) * 1%), rgba(15, 110, 86, .12) 0);
}

.ring span {
  color: var(--green);
  font-size: 15px;
  font-weight: 950;
}

.ring-card strong,
.ring-card small {
  display: block;
}

.ring-card strong {
  margin-bottom: 6px;
  font-size: 16px;
}

.ring-card small {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.metric, .panel {
  padding: 16px;
}

.metric {
  min-width: 0;
  min-height: 104px;
  display: grid;
  align-content: space-between;
  box-shadow: var(--soft-shadow);
}

.metric span, .panel-title span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.metric strong {
  display: block;
  min-width: 0;
  max-width: 100%;
  margin-top: 8px;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.metric.metric-code strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 17px;
  line-height: 1.25;
  white-space: normal;
}

.panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.panel-title h2, .panel-title h3 { margin: 0; }

.profile-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  padding: 12px;
  margin-bottom: 14px;
}

.profile-head strong,
.profile-head span {
  display: block;
}

.profile-head strong {
  margin-bottom: 4px;
  font-size: 18px;
}

.profile-head div > span {
  color: var(--muted);
  font-size: 13px;
}

.profile-section {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.profile-section h3 {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.profile-field.wide {
  grid-column: 1 / -1;
}

.profile-actions {
  margin-top: 16px;
}

.settings-stack {
  display: grid;
  gap: 14px;
}

.settings-panel {
  box-shadow: var(--shadow);
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.settings-field,
.settings-fieldset {
  min-width: 0;
}

.settings-field small,
.settings-check small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.settings-fieldset {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.settings-fieldset.wide {
  grid-column: 1 / -1;
}

.settings-fieldset legend {
  padding: 0 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.settings-check-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.settings-check {
  min-height: 42px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 10px;
}

.settings-check.wide {
  grid-column: 1 / -1;
}

.settings-check.disabled {
  opacity: .65;
}

.settings-check input {
  width: auto;
  min-height: 0;
  margin-top: 3px;
}

.settings-check span {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
}

.settings-check strong {
  display: block;
}

.settings-summary {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.settings-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  padding: 10px 12px;
}

.settings-summary-row span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
  min-width: 0;
  overflow-wrap: anywhere;
}

.settings-summary-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: right;
}

.sync-map-panel {
  align-self: stretch;
}

.sync-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.sync-group {
  min-height: 112px;
  display: grid;
  align-content: space-between;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--ink);
  padding: 12px;
  text-align: left;
  box-shadow: none;
}

.sync-group:hover {
  border-color: rgba(15, 110, 86, .34);
  background: rgba(15, 110, 86, .08);
}

.sync-group span,
.sync-group small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.sync-group strong {
  font-size: 28px;
  line-height: 1;
}

.record-note {
  margin-top: 14px;
  border-left: 3px solid var(--blue);
  border-radius: 8px;
  background: color-mix(in srgb, var(--blue) 8%, var(--surface));
  color: var(--muted);
  padding: 12px 13px;
  font-size: 13px;
  line-height: 1.45;
}

.settings-actions,
.settings-submit {
  margin-top: 14px;
}

.settings-note {
  margin: 12px 0 0;
}

.tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 10px;
}
.tabs button {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  padding: 9px 11px;
  font-weight: 850;
}
.tabs button.active {
  color: var(--green);
  border-color: rgba(15, 110, 86, .34);
  background: rgba(15, 110, 86, .10);
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}
table {
  width: 100%;
  border-collapse: collapse;
  min-width: 680px;
}

.compact-table table {
  min-width: 100%;
}

.compact-table th:first-child,
.compact-table td:first-child {
  white-space: nowrap;
}

.compact-table td {
  min-width: 0;
}

th, td {
  border-bottom: 1px solid var(--line);
  padding: 11px 12px;
  text-align: left;
  vertical-align: top;
  font-size: 14px;
  overflow-wrap: anywhere;
}
th {
  color: var(--muted);
  background: var(--surface-2);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}
tr:last-child td { border-bottom: 0; }

.list {
  display: grid;
  gap: 9px;
}
.list-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 12px;
}
.list-row small { color: var(--muted); }

.chart {
  height: 170px;
  display: flex;
  align-items: end;
  gap: 8px;
  border-left: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 12px 4px 0;
}
.bar {
  flex: 1;
  min-width: 18px;
  border-radius: 7px 7px 0 0;
  background: linear-gradient(180deg, var(--green), var(--blue));
}

.labelled-chart {
  align-items: stretch;
  padding: 10px 4px 22px;
}

.bar-wrap {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
}

.bar-wrap .bar {
  flex: 0 0 auto;
  min-width: 10px;
  width: 100%;
}

.bar-wrap small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.detail-panel {
  padding: 0;
}

.detail-panel summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  cursor: pointer;
}

.detail-panel summary span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.detail-panel > :not(summary) {
  margin-left: 16px;
  margin-right: 16px;
}

.detail-panel > :last-child {
  margin-bottom: 16px;
}

.climb-total-panel {
  border-color: rgba(245, 130, 32, .38);
  background: color-mix(in srgb, var(--saffron) 8%, var(--surface));
}

.climb-total {
  display: grid;
  gap: 6px;
}

.climb-total strong {
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1;
}

.climb-total span {
  color: var(--muted);
  font-weight: 850;
}

.tool-command {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(180px, 240px) minmax(180px, 240px);
  gap: 12px;
  margin-top: 14px;
  padding: 14px;
}

.tool-layout {
  display: grid;
  grid-template-columns: minmax(320px, .92fr) minmax(0, 1.08fr);
  gap: 14px;
  margin-top: 14px;
  align-items: start;
}

.tool-list {
  position: sticky;
  top: 16px;
  max-height: calc(100svh - 230px);
  overflow: auto;
}

.tool-cards {
  display: grid;
  gap: 8px;
}

.tool-card {
  width: 100%;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  padding: 10px;
  text-align: left;
}

.tool-card:hover,
.tool-card.selected {
  border-color: rgba(15, 110, 86, .38);
  background: rgba(15, 110, 86, .08);
}

.tool-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--tool-color, var(--green)) 16%, transparent);
  color: var(--tool-color, var(--green));
  font-size: 13px;
  font-weight: 950;
}

.tool-card-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.tool-card-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tool-card-copy small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 8px;
  padding: 4px 7px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.status-pill.surface {
  background: rgba(15, 110, 86, .12);
  color: var(--green);
}

.status-pill.runner {
  background: rgba(245, 130, 32, .14);
  color: #9a4a00;
}

.status-pill.native {
  background: rgba(217, 76, 67, .12);
  color: var(--red);
}

.status-pill.mapped {
  background: rgba(35, 119, 199, .12);
  color: var(--blue);
}

.tool-detail {
  display: grid;
  gap: 16px;
}

.tool-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.tool-detail-head span,
.tool-detail h3 {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.tool-detail-head h2 {
  margin: 5px 0 8px;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.04;
}

.tool-detail p,
.tool-checklists li {
  color: var(--muted);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.tool-checklists {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.tool-checklists ol,
.tool-checklists ul {
  margin: 8px 0 0;
  padding-left: 20px;
}

.tool-checklists.single {
  grid-template-columns: 1fr;
}

.tool-runner {
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.tool-form {
  margin-bottom: 14px;
}

.tool-form .wide {
  grid-column: 1 / -1;
}

.tool-result {
  display: grid;
  gap: 14px;
}

.tasks-tool-live {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.tasks-tool-panel {
  display: grid;
  gap: 12px;
}

.task-tool-row {
  background: color-mix(in srgb, var(--surface) 92%, var(--primary) 8%);
}

.notes-tool-live,
.notes-tool-panel,
.note-folder-grid {
  display: grid;
  gap: 14px;
}

.notes-tool-grid {
  align-items: start;
}

.note-tool-row {
  background: color-mix(in srgb, var(--surface) 93%, var(--saffron) 7%);
}

.note-tool-row.deleted strong,
.note-tool-row.deleted small {
  color: var(--muted);
  text-decoration: line-through;
}

.muted-flag {
  background: var(--surface-2);
  color: var(--muted);
}

.note-folder-card {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 10px;
}

.note-folder-card div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.note-folder-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.countdowns-tool-live,
.countdowns-tool-panel {
  display: grid;
  gap: 14px;
}

.countdown-tool-row {
  background: color-mix(in srgb, var(--surface) 90%, var(--countdown-color, var(--purple)) 10%);
  border-color: color-mix(in srgb, var(--countdown-color, var(--purple)) 28%, var(--line));
}

.countdown-tool-icon {
  background: var(--countdown-color, var(--purple));
  color: #fff;
}

.travel-log-live,
.travel-log-panel {
  display: grid;
  gap: 14px;
}

.travel-log-row {
  align-items: flex-start;
}

.travel-log-icon {
  background: linear-gradient(135deg, var(--green), var(--blue));
  color: #fff;
}

.travel-log-timeline {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.travel-log-timeline > div {
  align-items: center;
  background: color-mix(in srgb, var(--surface) 86%, var(--green) 14%);
  border: 1px solid color-mix(in srgb, var(--green) 18%, var(--line));
  border-radius: 8px;
  display: grid;
  gap: 4px;
  grid-template-columns: minmax(86px, .3fr) minmax(0, 1fr) auto;
  padding: 8px;
}

.travel-log-timeline span {
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.travel-log-timeline small {
  color: var(--muted);
  min-width: 0;
  overflow-wrap: anywhere;
}

.empty-mini {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.government-days-live,
.government-days-panel {
  display: grid;
  gap: 14px;
}

.government-day-icon {
  background: linear-gradient(135deg, #0ea5a4, #2563eb);
  color: #fff;
  font-size: 12px;
}

.government-day-row {
  background: color-mix(in srgb, var(--surface) 90%, #0ea5a4 10%);
}

.government-day-row .task-meta a {
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.weight-management-live,
.weight-log-panel {
  display: grid;
  gap: 14px;
}

.weight-management-grid {
  align-items: stretch;
}

.weight-chart-panel,
.weight-goal-panel {
  min-width: 0;
}

.weight-goal-panel .list-row span {
  overflow-wrap: anywhere;
}

.weight-chart-wrap {
  min-height: 220px;
  overflow: hidden;
}

.weight-trend-chart {
  display: block;
  width: 100%;
  height: auto;
  min-height: 220px;
}

.weight-trend-chart text {
  fill: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.weight-axis {
  stroke: var(--line);
  stroke-width: 2;
}

.weight-trend-line {
  fill: none;
  stroke: var(--green);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 5;
}

.weight-trend-chart circle {
  fill: var(--surface);
  stroke: var(--green);
  stroke-width: 4;
}

.weight-entry-row {
  background: color-mix(in srgb, var(--surface) 90%, var(--green) 10%);
}

.weight-entry-row.warn-row {
  border-color: rgba(217, 76, 67, .28);
  background: color-mix(in srgb, var(--surface) 88%, var(--red) 12%);
}

.weight-entry-icon {
  background: linear-gradient(135deg, var(--green), var(--accent));
  color: #fff;
}

.ok-flag {
  background: rgba(15, 110, 86, .12);
  color: var(--green);
}

.warn-flag {
  background: rgba(217, 76, 67, .12);
  color: var(--red);
}

.official-tour-live,
.activity-fit-live,
.online-portal-live {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.official-tour-grid,
.activity-fit-grid {
  align-items: stretch;
}

.official-tour-live .panel,
.activity-fit-live .panel,
.online-portal-live .panel,
.official-tour-live .panel-title,
.activity-fit-live .panel-title,
.online-portal-live .panel-title {
  min-width: 0;
}

.official-tour-live .panel-title,
.activity-fit-live .panel-title,
.online-portal-live .panel-title {
  align-items: flex-start;
  flex-wrap: wrap;
}

.activity-fit-live .ring-grid {
  margin: 0;
}

.handoff-code {
  background: color-mix(in srgb, var(--surface) 92%, var(--primary) 8%);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  max-height: 360px;
  overflow: auto;
  padding: 12px;
  white-space: pre-wrap;
  word-break: break-word;
}

.local-profile-live {
  display: grid;
  gap: 14px;
}

.local-profile-grid {
  align-items: stretch;
}

.local-profile-grid .settings-summary-row strong {
  overflow-wrap: anywhere;
}

.local-profile-grid .panel-title {
  align-items: flex-start;
  flex-wrap: wrap;
}

.local-profile-grid .panel-title span {
  overflow-wrap: anywhere;
}

.four-col {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.leave-management-live {
  display: grid;
  gap: 14px;
}

.leave-planning-live {
  display: grid;
  gap: 14px;
}

.leave-planning-live .panel,
.leave-planning-live .panel-title,
.leave-planning-live .list {
  min-width: 0;
}

.leave-planning-live .panel-title {
  align-items: flex-start;
  flex-wrap: wrap;
}

.leave-planning-live .panel-title span,
.leave-planning-live .list-row span {
  overflow-wrap: anywhere;
}

.leave-projection-panel {
  min-width: 0;
}

.calendar-cluster-live {
  display: grid;
  gap: 14px;
  margin-top: 14px;
  min-width: 0;
}

.calendar-cluster-live .panel,
.calendar-cluster-live .panel-title,
.calendar-cluster-live .task-row,
.calendar-day-inline {
  min-width: 0;
}

.calendar-cluster-live .panel-title {
  align-items: flex-start;
  flex-wrap: wrap;
}

.calendar-cluster-live .panel-title span,
.calendar-agenda-item p {
  overflow-wrap: anywhere;
}

.calendar-month-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar-day-card {
  aspect-ratio: 1 / 1.05;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
  padding: 8px;
}

.calendar-day-card.muted {
  opacity: .46;
}

.calendar-day-card.today {
  border-color: var(--primary);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 50%, transparent);
}

.calendar-day-head {
  align-items: baseline;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px;
  min-width: 0;
}

.calendar-day-head strong {
  font-size: 18px;
}

.calendar-day-head span,
.calendar-more {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.calendar-day-head span {
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: right;
}

.calendar-day-items,
.calendar-agenda-list {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.calendar-day-items {
  align-content: start;
  overflow: hidden;
}

.calendar-source-pill {
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  display: block;
  font-size: 11px;
  font-weight: 800;
  min-width: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  padding: 3px 6px;
  white-space: normal;
}

.calendar-source-pill.holiday { background: color-mix(in srgb, var(--saffron) 16%, var(--surface)); }
.calendar-source-pill.task { background: color-mix(in srgb, var(--primary) 12%, var(--surface)); }
.calendar-source-pill.countdown { background: color-mix(in srgb, var(--red) 10%, var(--surface)); }
.calendar-source-pill.leave { background: color-mix(in srgb, var(--green) 12%, var(--surface)); }
.calendar-source-pill.travel { background: color-mix(in srgb, var(--blue) 12%, var(--surface)); }
.calendar-source-pill.service { background: color-mix(in srgb, var(--saffron) 12%, var(--surface)); }
.calendar-source-pill.activity { background: color-mix(in srgb, var(--green) 12%, var(--surface)); }

@media (max-width: 640px) {
  .calendar-month-grid {
    gap: 4px;
  }

  .calendar-day-card {
    aspect-ratio: 1 / 1.18;
    padding: 5px;
  }

  .calendar-day-head {
    display: block;
  }

  .calendar-day-head strong {
    display: block;
    font-size: 13px;
    line-height: 1;
  }

  .calendar-day-head span {
    display: none;
  }

  .calendar-source-pill {
    font-size: 9px;
    line-height: 1.15;
    padding: 2px 3px;
    word-break: break-word;
  }
}

.leave-management-grid .panel {
  min-width: 0;
}

.leave-balance-strip {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.leave-balance-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 0;
  padding: 12px;
}

.leave-balance-card span,
.leave-balance-card small {
  color: var(--muted);
  display: block;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.leave-balance-card strong {
  color: var(--text);
  display: block;
  font-size: 30px;
  line-height: 1;
  margin: 4px 0;
}

.tool-fieldset {
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 0;
  padding: 12px;
}

.tool-fieldset legend {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  padding: 0 6px;
}

.inline-check {
  align-self: stretch;
}

.compact-actions {
  flex-wrap: wrap;
  gap: 6px;
}

.encrypted-backup-live {
  display: grid;
  gap: 14px;
}

.encrypted-backup-grid {
  align-items: stretch;
}

.encrypted-backup-grid .panel,
.encrypted-backup-grid .settings-summary,
.encrypted-backup-grid .settings-summary-row,
.encrypted-backup-grid .panel-title {
  min-width: 0;
}

.encrypted-backup-grid .panel-title {
  align-items: flex-start;
  flex-wrap: wrap;
}

.encrypted-backup-grid .settings-summary-row strong,
.encrypted-backup-grid .panel-title span {
  overflow-wrap: anywhere;
}

.backup-manifest-list {
  display: grid;
  gap: 8px;
}

.backup-manifest-list > div {
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding: 9px 10px;
}

.backup-manifest-list strong,
.backup-manifest-list span {
  overflow-wrap: anywhere;
}

.backup-manifest-list span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-align: right;
}

.leave-rules-reference {
  display: grid;
  gap: 14px;
}

.leave-rules-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .85fr);
  gap: 14px;
  align-items: start;
}

.leave-rules-intro h3 {
  margin: 0 0 6px;
  font-size: 20px;
  line-height: 1.15;
}

.leave-rules-intro p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.leave-rule-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.leave-rules-grid {
  display: grid;
  grid-template-columns: minmax(240px, .76fr) minmax(0, 1.24fr);
  gap: 14px;
  align-items: start;
}

.leave-rule-list {
  display: grid;
  gap: 8px;
}

.leave-rule-card {
  width: 100%;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  padding: 10px;
  text-align: left;
}

.leave-rule-card:hover,
.leave-rule-card.active {
  border-color: rgba(15, 110, 86, .4);
  background: rgba(15, 110, 86, .08);
}

.leave-rule-code {
  width: 46px;
  min-height: 42px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(15, 110, 86, .12);
  color: var(--green);
  font-size: 12px;
  font-weight: 950;
}

.leave-rule-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.leave-rule-copy strong {
  font-size: 15px;
  line-height: 1.2;
}

.leave-rule-copy small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.leave-rule-detail-card,
.leave-combo-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 14px;
}

.leave-rule-detail-card {
  display: grid;
  gap: 12px;
}

.leave-rule-detail-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}

.leave-rule-detail-head span:first-child {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
}

.leave-rule-detail-head h3 {
  margin: 4px 0 0;
  font-size: 22px;
  line-height: 1.12;
}

.leave-rule-section {
  display: grid;
  gap: 4px;
}

.leave-rule-section-title {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: var(--green);
}

.leave-rule-section p {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.52;
}

.leave-rule-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.leave-rule-source {
  display: grid;
  gap: 4px;
  border-radius: 8px;
  background: var(--surface-2);
  padding: 10px;
}

.leave-rule-source span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.leave-combo-panel {
  display: grid;
  gap: 10px;
}

.leave-combo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.leave-combo-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  padding: 10px;
}

.leave-combo-row strong,
.leave-combo-row span:last-child {
  display: block;
}

.leave-combo-row span:last-child {
  color: var(--muted);
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.4;
}

.app-lock-summary {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.app-lock-keys {
  overflow-wrap: anywhere;
}

.local-share-library {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.local-share-output {
  display: grid;
  gap: 6px;
}

.handoff-code {
  min-height: 170px;
  max-width: 100%;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow: auto;
}

.local-share-contact {
  align-items: start;
}

.official-contact-directory {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.official-contact-critical {
  margin: 0;
}

.official-emergency-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
}

.official-emergency-strip a {
  min-height: 84px;
  display: grid;
  align-content: center;
  gap: 5px;
  border: 1px solid rgba(217, 76, 67, .22);
  border-radius: 8px;
  background: rgba(217, 76, 67, .08);
  color: var(--red);
  padding: 11px;
  text-decoration: none;
}

.official-emergency-strip strong {
  font-size: 14px;
  line-height: 1.15;
}

.official-emergency-strip span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

.official-contact-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.official-contact-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 14px;
}

.official-contact-card.favorite {
  border-color: rgba(15, 110, 86, .28);
  background: linear-gradient(180deg, rgba(15, 110, 86, .07), var(--surface) 42%);
}

.official-contact-topline {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: start;
}

.official-contact-avatar {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(15, 110, 86, .10);
  color: var(--green);
  font-size: 13px;
  font-weight: 950;
}

.official-contact-topline h3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.2;
}

.official-contact-topline p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.official-contact-flags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  max-width: 190px;
}

.official-contact-flags span {
  border: 1px solid rgba(15, 110, 86, .20);
  border-radius: 8px;
  background: rgba(15, 110, 86, .08);
  color: var(--green);
  padding: 5px 7px;
  font-size: 11px;
  font-weight: 900;
}

.official-contact-lines {
  display: grid;
  gap: 4px;
}

.official-contact-lines p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.official-contact-lines strong {
  color: var(--ink);
}

.official-contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.official-contact-actions .mini-button {
  min-height: 34px;
  padding: 7px 9px;
  font-size: 12px;
}

.official-contact-link-row {
  align-items: flex-start;
}

.official-trusted-list {
  display: grid;
  gap: 9px;
  margin-top: 14px;
}

.official-trusted-list h3 {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.wellness-library {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.habit-template-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
}

.habit-template-row button {
  min-height: 86px;
  display: grid;
  align-content: center;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  padding: 10px;
  text-align: left;
}

.habit-template-row button:hover {
  border-color: rgba(15, 110, 86, .28);
  background: rgba(15, 110, 86, .07);
}

.habit-template-row strong {
  font-size: 13px;
  line-height: 1.25;
}

.habit-template-row span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.wellness-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.wellness-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--habit-color, var(--green));
  border-radius: 8px;
  background: var(--surface);
  padding: 14px;
}

.wellness-card-head {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: start;
  gap: 11px;
}

.habit-emoji {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--habit-color, var(--green)) 12%, var(--surface));
  color: var(--habit-color, var(--green));
  font-size: 22px;
}

.wellness-card h3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.2;
}

.wellness-card p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.habit-stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.habit-stat-row span {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  padding: 8px;
}

.habit-stat-row strong,
.habit-stat-row small {
  display: block;
}

.habit-stat-row strong {
  font-size: 20px;
  line-height: 1;
}

.habit-stat-row small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.habit-dot-row {
  display: grid;
  grid-template-columns: repeat(21, minmax(5px, 1fr));
  gap: 4px;
}

.habit-dot-row span {
  height: 10px;
  border-radius: 99px;
  background: var(--surface-3);
}

.habit-dot-row .done {
  background: var(--habit-color, var(--green));
}

.habit-dot-row .due {
  background: rgba(217, 76, 67, .28);
}

.habit-dot-row .off,
.habit-dot-row .before {
  opacity: .45;
}

.wellness-actions {
  gap: 7px;
}

.wellness-actions .mini-button {
  min-height: 34px;
  padding: 7px 9px;
  font-size: 12px;
}

.meditation-library .two-col {
  align-items: start;
}

.meditation-awards {
  display: grid;
  gap: 9px;
}

.meditation-awards h4 {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.meditation-award {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  padding: 10px;
}

.meditation-award strong,
.meditation-award span {
  overflow-wrap: anywhere;
}

.meditation-award span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.meditation-award i {
  height: 7px;
  overflow: hidden;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--green) var(--p), rgba(15, 110, 86, .12) var(--p));
}

.meditation-session-list {
  display: grid;
  gap: 9px;
}

.meditation-session-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 10px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 10px;
}

.meditation-session-row strong,
.meditation-session-row span {
  display: block;
}

.meditation-session-row span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.journal-live-grid {
  align-items: start;
}

.journal-collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 8px;
}

.journal-collection-card {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  padding: 10px;
}

.journal-collection-card strong,
.journal-collection-card span {
  display: block;
}

.journal-collection-card strong {
  font-size: 13px;
}

.journal-collection-card span {
  color: var(--green);
  font-size: 22px;
  font-weight: 950;
  line-height: 1;
}

.journal-mini-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.journal-entry-list {
  display: grid;
  gap: 9px;
}

.journal-entry-preview {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 11px;
}

.journal-entry-preview strong,
.journal-entry-preview span,
.journal-entry-preview small {
  display: block;
}

.journal-entry-preview span,
.journal-entry-preview small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.journal-entry-preview p {
  margin: 8px 0 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
}

.ai-scan-library,
.ai-report-sections {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.ai-scan-result {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.ai-scan-preview {
  width: 148px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}

.ai-scan-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.ai-scan-result h3 {
  margin: 10px 0 4px;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.02;
}

.ai-scan-result p,
.ai-report-sections p {
  color: var(--muted);
  line-height: 1.5;
}

.ai-scan-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ai-scan-metric {
  min-height: 142px;
}

.ai-scan-metric small {
  color: var(--muted);
  line-height: 1.35;
}

.ai-scan-bar {
  height: 7px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(15, 110, 86, .12);
}

.ai-scan-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green), var(--saffron));
}

.tool-fieldset h4 {
  margin: 0 0 8px;
  color: var(--ink);
}

.tool-fieldset small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-weight: 850;
}

.parking-metrics,
.scan-metrics,
.vault-metrics,
.inventory-metrics {
  margin: 14px 0;
}

.scan-library {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 14px;
  align-items: start;
}

.scan-side,
.scan-doc-list {
  display: grid;
  gap: 9px;
}

.scan-side h3,
.scan-library-head h3 {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.scan-side h3:not(:first-child) {
  margin-top: 14px;
}

.scan-library-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.scan-library-head small {
  color: var(--muted);
  font-weight: 850;
}

.scan-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px;
}

.scan-chip span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.scan-chip strong,
.scan-chip small {
  overflow-wrap: anywhere;
}

.scan-chip small {
  color: var(--muted);
}

.scan-doc-row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  align-items: start;
}

.scan-thumb {
  width: 76px;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}

.scan-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.scan-thumb.filter-grey img {
  filter: grayscale(1);
}

.scan-thumb.filter-blackWhite img {
  filter: grayscale(1) contrast(1.85) brightness(1.05);
}

.scan-thumb.filter-colorOptimised img {
  filter: saturate(1.2) contrast(1.12);
}

.scan-doc-main {
  min-width: 0;
}

.scan-doc-main p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.scan-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
  max-width: 240px;
}

.parking-lists {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.parking-lists h3 {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.parking-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: start;
}

.parking-row.archived {
  opacity: .78;
}

.parking-photo {
  width: 72px;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}

.parking-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.empty-photo {
  display: grid;
  place-items: center;
  color: var(--green);
  font-weight: 950;
}

.parking-row-main {
  min-width: 0;
}

.parking-row-main p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.parking-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
  max-width: 280px;
}

.inventory-library {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.inventory-list {
  display: grid;
  gap: 9px;
}

.inventory-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: start;
}

.inventory-row.dimmed {
  opacity: .7;
}

.inventory-thumb {
  width: 72px;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}

.inventory-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.inventory-row-main {
  min-width: 0;
}

.inventory-row-main p {
  margin: 7px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.inventory-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.inventory-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 3px 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.inventory-chip.ok {
  background: rgba(15, 110, 86, .1);
  color: var(--green);
  border-color: rgba(15, 110, 86, .24);
}

.inventory-chip.warn {
  background: rgba(217, 119, 6, .12);
  color: #b45309;
  border-color: rgba(217, 119, 6, .28);
}

.inventory-chip.danger {
  background: rgba(185, 28, 28, .1);
  color: #b91c1c;
  border-color: rgba(185, 28, 28, .28);
}

.inventory-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
  max-width: 260px;
}

.vault-library {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.vault-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}

.vault-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background:
    linear-gradient(135deg, rgba(15, 110, 86, .08), rgba(35, 119, 199, .08)),
    var(--surface);
}

.vault-card-top {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.vault-card-top span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.vault-card-top strong {
  color: var(--ink);
  overflow-wrap: anywhere;
}

.vault-number {
  min-height: 40px;
  border: 1px solid rgba(15, 110, 86, .18);
  border-radius: 8px;
  padding: 9px 10px;
  background: rgba(255, 255, 255, .74);
  color: var(--green);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.vault-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.vault-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}

.pdf-pack-summary {
  margin-top: 14px;
}

.pdf-pack-result {
  display: grid;
  grid-template-columns: minmax(160px, 260px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-2);
}

.pdf-pack-result strong {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
}

.pdf-pack-result p {
  margin: 0 0 12px;
  color: var(--muted);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.pdf-pack-preview {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.pdf-pack-preview img {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: contain;
}

.tool-note {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--muted);
  padding: 12px 13px;
  line-height: 1.5;
}

.tool-note.ok {
  border-color: rgba(15, 110, 86, .22);
  background: rgba(15, 110, 86, .08);
  color: var(--green);
}

.tool-note.warn,
.tool-note.danger,
.error-box {
  border-color: rgba(217, 76, 67, .22);
  background: rgba(217, 76, 67, .08);
  color: var(--red);
}

.tool-fieldset {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  padding: 13px;
}

.tool-fieldset legend {
  padding: 0 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.ltc-preference-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.ltc-chip-check,
.ltc-inline-check {
  cursor: pointer;
}

.ltc-chip-check input,
.ltc-inline-check input {
  flex: 0 0 auto;
  width: 18px;
  min-height: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  accent-color: var(--green);
}

.ltc-chip-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-weight: 850;
  font-size: 12px;
}

.ltc-chip-check:has(input:checked) {
  border-color: rgba(15, 110, 86, .32);
  background: rgba(15, 110, 86, .08);
  color: var(--green);
}

.ltc-inline-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  padding: 12px 13px;
  color: var(--muted);
  line-height: 1.45;
}

.ltc-planner-live {
  display: grid;
  gap: 14px;
}

.ltc-rec-grid {
  display: grid;
  gap: 14px;
}

.ltc-rec-card {
  display: grid;
  gap: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 15px;
}

.ltc-rec-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.ltc-rec-head span,
.ltc-detail-section h4,
.ltc-checklist span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.ltc-rec-head h3 {
  margin: 4px 0 0;
  font-size: 21px;
  line-height: 1.15;
}

.ltc-score {
  display: grid;
  place-items: center;
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  border: 1px solid rgba(15, 110, 86, .28);
  border-radius: 999px;
  background: rgba(15, 110, 86, .08);
  color: var(--green);
  line-height: 1;
}

.ltc-score strong {
  font-size: 26px;
  font-weight: 950;
}

.ltc-score span {
  font-size: 11px;
  font-weight: 900;
}

.ltc-rec-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.ltc-badges,
.ltc-source-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.ltc-badges span,
.ltc-source-list a {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  padding: 6px 9px;
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
}

.ltc-drafts-table table {
  min-width: 520px;
}

.ltc-drafts-table th:nth-child(3),
.ltc-drafts-table th:nth-child(4),
.ltc-drafts-table th:nth-child(5),
.ltc-drafts-table td:nth-child(3),
.ltc-drafts-table td:nth-child(4),
.ltc-drafts-table td:nth-child(5) {
  white-space: nowrap;
}

.ltc-mini-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr 1fr;
  gap: 8px;
}

.ltc-mini-grid .metric {
  min-height: 84px;
}

.ltc-mini-grid .metric strong {
  font-size: 18px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.ltc-reasons {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.ltc-reasons div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  padding: 11px 12px;
}

.ltc-reasons strong {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
}

.ltc-reasons ul {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.45;
}

.ltc-rec-detail {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  overflow: hidden;
}

.ltc-rec-detail summary {
  cursor: pointer;
  padding: 12px 13px;
  font-weight: 900;
}

.ltc-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0 13px 13px;
}

.ltc-detail-section {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
}

.ltc-detail-section h4 {
  margin: 0 0 10px;
}

.ltc-route-list,
.ltc-itinerary,
.ltc-checklist,
.ltc-planning-list,
.ltc-cost-list {
  display: grid;
  gap: 8px;
}

.ltc-route-list {
  margin: 0;
  padding-left: 19px;
}

.ltc-route-list li,
.ltc-itinerary div,
.ltc-checklist div {
  color: var(--muted);
  line-height: 1.45;
}

.ltc-route-list strong,
.ltc-itinerary strong,
.ltc-checklist strong {
  display: block;
  color: var(--text);
}

.ltc-itinerary span {
  display: block;
  color: var(--green);
  font-size: 12px;
  font-weight: 900;
}

.ltc-itinerary small {
  color: var(--muted);
  font-weight: 750;
}

.ltc-cost-list div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  padding: 9px 10px;
}

.ltc-cost-list strong {
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.25;
}

.ltc-cost-list span {
  color: var(--green);
  font-weight: 950;
  line-height: 1.2;
}

.tool-check-option {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 8px 0 0;
  color: var(--ink);
  font-weight: 800;
}

.tool-check-option input {
  width: 18px;
  height: 18px;
  accent-color: var(--green);
}

.tarot-result {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.tarot-card-art {
  aspect-ratio: .66;
  border-radius: 12px;
  background: linear-gradient(145deg, #f9d56e, #0f6e56);
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: var(--shadow);
  padding: 10px;
  transform-origin: center;
}

.tarot-card-art.reversed {
  transform: rotate(180deg);
}

.tarot-card-art img,
.tarot-fallback {
  width: 100%;
  height: 100%;
  border-radius: 9px;
}

.tarot-card-art img {
  object-fit: cover;
  display: block;
}

.tarot-fallback {
  display: grid;
  place-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, .9);
  color: var(--green);
  padding: 14px;
  text-align: center;
}

.tarot-fallback strong,
.tarot-fallback span {
  display: block;
}

.tarot-reading-copy {
  display: grid;
  gap: 12px;
}

.tarot-reading-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.service-blog-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 14px;
  align-items: stretch;
  border: 1px solid color-mix(in srgb, var(--accent, var(--green)) 34%, var(--line));
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--soft-shadow);
  overflow: hidden;
}

.service-blog-preview > div {
  padding: 16px;
}

.service-blog-preview span {
  color: var(--accent, var(--green));
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.service-blog-preview h3 {
  margin: 7px 0;
  color: var(--ink);
  font-size: 24px;
  line-height: 1.08;
}

.service-blog-preview p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.service-blog-preview img {
  width: 100%;
  height: 100%;
  min-height: 150px;
  object-fit: cover;
  background: var(--surface-3);
}

.two-metric {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.muted {
  color: var(--muted);
}

.task-workspace .wide {
  grid-column: 1 / -1;
}

.editable-form .wide {
  grid-column: 1 / -1;
}

.compact-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
  margin-bottom: 12px;
}

.compact-form:has(label:nth-of-type(3)) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.compact-form button {
  min-height: 42px;
}

.task-tree {
  display: grid;
  gap: 10px;
}

.tree-block,
.project-chip,
.task-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.tree-block {
  padding: 10px;
}

.tree-head,
.project-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tree-head {
  margin-bottom: 8px;
}

.tree-head small,
.project-chip small,
.task-meta,
.task-row p {
  color: var(--muted);
}

.project-chip {
  padding: 9px 10px;
  margin-top: 7px;
}

.project-chip.done strong,
.task-row.done .task-title-line strong {
  color: var(--muted);
  text-decoration: line-through;
}

.task-list {
  display: grid;
  gap: 9px;
}

.task-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 10px;
}

.task-check .icon-button {
  width: 38px;
  min-height: 38px;
}

.task-title-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.task-title-line strong {
  font-size: 16px;
}

.task-row p {
  margin: 5px 0 0;
  line-height: 1.45;
}

.task-meta,
.task-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
  font-size: 12px;
}

.task-meta span,
.task-tags span,
.task-flag {
  border-radius: 8px;
  background: var(--surface-2);
  padding: 4px 7px;
  font-weight: 800;
}

.task-flag {
  background: rgba(245, 130, 32, .16);
  color: #9a4a00;
  font-size: 11px;
}

.universal-tags-live {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.universal-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.universal-tag-cloud span {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  min-width: 116px;
  padding: 9px 10px;
  font-size: 12px;
  font-weight: 900;
}

.universal-tag-cloud span.active {
  border-color: rgba(14, 119, 94, .45);
  background: rgba(14, 119, 94, .10);
  color: var(--primary);
}

.universal-tag-cloud strong {
  font-size: 18px;
  line-height: 1;
}

.universal-tag-cloud small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.universal-tag-results {
  display: grid;
  gap: 9px;
}

.universal-tag-result {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
}

.universal-tag-result.done {
  opacity: .72;
}

.universal-tag-icon {
  align-items: center;
  background: rgba(14, 119, 94, .11);
  border-radius: 8px;
  color: var(--primary);
  display: flex;
  font-size: 18px;
  font-weight: 900;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.universal-tag-title {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.universal-tag-title strong {
  font-size: 15px;
}

.universal-tag-title span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.universal-tag-result p {
  margin: 5px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.trust-certificate-live {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.trust-hero-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.trust-hero-media {
  background: var(--surface-3);
  min-height: 260px;
}

.trust-hero-media img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.trust-hero-copy {
  align-content: end;
  display: grid;
  gap: 10px;
  padding: 18px;
}

.trust-generated {
  align-self: start;
  background: rgba(14, 119, 94, .11);
  border-radius: 999px;
  color: var(--primary);
  display: inline-flex;
  font-size: 11px;
  font-weight: 950;
  padding: 6px 10px;
  width: fit-content;
}

.trust-hero-copy h3 {
  font-size: 28px;
  line-height: 1.05;
  margin: 0;
}

.trust-hero-copy p {
  color: var(--muted);
  line-height: 1.45;
  margin: 0;
}

.trust-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.trust-chip-row span {
  background: rgba(14, 119, 94, .10);
  border: 1px solid rgba(14, 119, 94, .18);
  border-radius: 999px;
  color: var(--primary);
  font-size: 11px;
  font-weight: 950;
  padding: 6px 9px;
}

.trust-chip-row.danger span {
  background: rgba(217, 76, 67, .10);
  border-color: rgba(217, 76, 67, .18);
  color: var(--red);
}

.trust-section-grid {
  align-items: start;
}

.trust-cert-section {
  border-top: 1px solid var(--line);
  padding: 12px 0 0;
}

.trust-cert-section:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.trust-cert-section h4 {
  margin: 0 0 8px;
}

.trust-cert-section ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
}

.trust-cert-section li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  color: var(--muted);
  line-height: 1.35;
}

.trust-cert-section li::before {
  color: var(--primary);
  content: "✓";
  font-weight: 950;
}

.trust-flow-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: 34px minmax(0, 1fr);
  margin-bottom: 9px;
  padding: 10px;
}

.trust-flow-row > span {
  align-items: center;
  border-radius: 8px;
  display: flex;
  font-size: 18px;
  font-weight: 950;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.trust-flow-row.green { background: rgba(14, 119, 94, .07); }
.trust-flow-row.green > span { background: rgba(14, 119, 94, .12); color: var(--primary); }
.trust-flow-row.amber { background: rgba(245, 130, 32, .08); }
.trust-flow-row.amber > span { background: rgba(245, 130, 32, .14); color: #9a4a00; }
.trust-flow-row.rose { background: rgba(217, 76, 67, .07); }
.trust-flow-row.rose > span { background: rgba(217, 76, 67, .14); color: var(--red); }

.trust-flow-row p,
.trust-proof-grid p {
  color: var(--muted);
  line-height: 1.4;
  margin: 4px 0 0;
}

.trust-copy-panel textarea {
  min-height: 360px;
  white-space: pre-wrap;
}

.trust-proof-grid {
  display: grid;
  gap: 14px;
}

.trust-proof-steps {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.trust-proof-steps span {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-weight: 850;
  padding: 9px 10px;
}

.emergency-reset-live {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.emergency-reset-hero {
  align-items: center;
  background:
    linear-gradient(135deg, rgba(217, 76, 67, .10), rgba(245, 130, 32, .07)),
    var(--surface);
  border: 1px solid rgba(217, 76, 67, .18);
  border-radius: 8px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 16px;
  grid-template-columns: 72px minmax(0, 1fr);
  padding: 18px;
}

.emergency-reset-icon {
  align-items: center;
  background: rgba(217, 76, 67, .12);
  border: 1px solid rgba(217, 76, 67, .24);
  border-radius: 50%;
  color: var(--red);
  display: flex;
  font-size: 36px;
  font-weight: 950;
  height: 72px;
  justify-content: center;
  width: 72px;
}

.emergency-reset-hero h3 {
  color: var(--red);
  font-size: 30px;
  line-height: 1;
  margin: 4px 0 8px;
}

.emergency-reset-hero .eyebrow {
  color: var(--red);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.emergency-reset-hero p {
  color: var(--muted);
  line-height: 1.45;
  margin: 0 0 12px;
}

.emergency-reset-grid {
  align-items: start;
}

.emergency-reset-steps {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.emergency-reset-steps li {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 4px;
  padding: 10px;
}

.emergency-reset-steps strong {
  color: var(--text);
}

.emergency-reset-steps span {
  color: var(--muted);
  line-height: 1.4;
}

.emergency-reset-steps code {
  background: rgba(217, 76, 67, .10);
  border-radius: 5px;
  color: var(--red);
  font-weight: 900;
  padding: 1px 5px;
}

.emergency-reset-key-list .summary-row {
  align-items: start;
}

.appearance-settings-live {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.appearance-hero {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) 150px;
  padding: 18px;
}

.appearance-hero > div:first-child > span {
  color: var(--primary);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.appearance-hero h3 {
  font-size: 28px;
  line-height: 1;
  margin: 5px 0 8px;
}

.appearance-hero p {
  color: var(--muted);
  line-height: 1.45;
  margin: 0;
}

.appearance-swatch {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  padding: 12px;
}

.appearance-swatch span {
  border-radius: 7px;
  display: block;
  height: 24px;
}

.appearance-swatch span:nth-child(1) { background: var(--primary); }
.appearance-swatch span:nth-child(2) { background: var(--surface); border: 1px solid var(--line); }
.appearance-swatch span:nth-child(3) { background: var(--surface-3); border: 1px solid var(--line); }
.appearance-swatch.dark { background: #0e251f; border-color: rgba(255, 255, 255, .12); }
.appearance-swatch.dark span:nth-child(2) { background: #17352d; border-color: rgba(255, 255, 255, .12); }
.appearance-swatch.dark span:nth-child(3) { background: #24443b; border-color: rgba(255, 255, 255, .12); }
.appearance-swatch.light { background: #f7fbf8; }

.appearance-choice-grid {
  align-items: start;
}

.appearance-choice-card {
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  padding: 10px 11px;
}

.appearance-choice-card.selected {
  background: rgba(14, 119, 94, .08);
  border-color: rgba(14, 119, 94, .22);
}

.appearance-choice-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.bottom-custom-live {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.bottom-custom-hero {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) minmax(220px, .72fr);
  padding: 18px;
}

.bottom-custom-hero > div:first-child > span {
  color: var(--green);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.bottom-custom-hero h3 {
  font-size: 28px;
  line-height: 1;
  margin: 5px 0 8px;
}

.bottom-custom-hero p {
  color: var(--muted);
  line-height: 1.45;
  margin: 0;
}

.bottom-phone-preview {
  background: var(--sidebar-bg);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 8px;
  padding: 10px;
}

.bottom-preview-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bottom-chip {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 2px;
  min-width: 88px;
  padding: 8px 9px;
}

.bottom-phone-preview .bottom-chip {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .13);
  color: var(--sidebar-ink);
}

.bottom-chip.tab {
  border-color: rgba(15, 110, 86, .24);
}

.bottom-chip.tool {
  border-color: rgba(245, 130, 32, .24);
}

.bottom-chip strong {
  font-size: 12px;
  line-height: 1.15;
}

.bottom-chip small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.bottom-phone-preview .bottom-chip small {
  color: var(--sidebar-muted);
}

.bottom-custom-grid {
  align-items: start;
}

.bottom-tool-list {
  max-height: 520px;
  overflow: auto;
  padding-right: 4px;
}

.bottom-tool-row {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) 112px;
  margin-bottom: 8px;
  padding: 9px 10px;
}

.bottom-tool-main,
.bottom-tool-pin {
  align-items: center;
  display: flex;
  gap: 9px;
  min-width: 0;
}

.bottom-tool-main input,
.bottom-tool-pin input {
  flex: 0 0 auto;
  min-height: 0;
  width: auto;
}

.bottom-tool-main span {
  display: grid;
  gap: 2px;
  margin: 0;
  min-width: 0;
  color: var(--ink);
}

.bottom-tool-main strong {
  line-height: 1.2;
  overflow-wrap: anywhere;
  white-space: normal;
}

.bottom-tool-main small,
.bottom-tool-pin span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  margin: 0;
}

.task-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.empty {
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  padding: 18px;
}

.record-dialog {
  width: min(760px, calc(100% - 26px));
  border: 0;
  padding: 0;
  background: transparent;
}
.record-dialog::backdrop { background: rgba(6, 14, 11, .55); }
.record-dialog form { padding: 16px; }
.record-dialog header, .record-dialog footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.dialog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0;
}
.dialog-grid .wide { grid-column: 1 / -1; }

.toast {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 80;
  max-width: min(420px, calc(100vw - 32px));
  border-radius: 8px;
  background: var(--green-2);
  color: #fff;
  padding: 12px 14px;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.toast.show { opacity: 1; transform: translateY(0); }

@media print {
  .sidebar, .topbar, .status-strip, .tabs, .row-actions, .toast, .login-panel { display: none !important; }
  .app-shell { display: block; }
  .main { padding: 0; }
  .panel { box-shadow: none; border-color: #999; break-inside: avoid; }
  body { background: #fff; color: #000; }
}

@media (max-width: 980px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 50;
    height: 74px;
    border-top: 1px solid var(--line);
    border-right: 0;
    padding: 6px 7px;
  }
  .brand { display: none; }
  .nav {
    display: flex;
    overflow-x: auto;
    gap: 6px;
    height: 100%;
  }
  .nav button {
    min-width: 82px;
    height: 58px;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 6px;
    font-size: 11px;
    text-align: center;
  }
  .main { padding: 14px 12px 94px; }
  body.prelogin .main { padding-bottom: 24px; }
  .topbar { align-items: flex-start; }
  .login-panel { grid-template-columns: 1fr; min-height: auto; padding-top: 18px; }
  .login-copy h2 { font-size: clamp(34px, 12vw, 56px); }
  .mode-cards { grid-template-columns: 1fr; }
  .metrics, .two-col, .three-col, .four-col, .ring-grid, .two-metric, .tool-command, .tool-layout, .tool-checklists, .leave-balance-strip, .leave-rules-intro, .leave-rule-stats, .leave-rules-grid, .leave-combo-grid, .settings-grid, .tarot-result, .service-blog-preview, .scan-library, .ai-scan-result, .ai-scan-mini-grid, .official-contact-list, .official-emergency-strip, .habit-template-row, .wellness-card-grid, .meditation-session-row, .official-tour-grid, .activity-fit-grid, .trust-hero-panel, .emergency-reset-hero, .appearance-hero, .bottom-custom-hero, .bottom-tool-row { grid-template-columns: 1fr; }
  .trust-hero-media { min-height: 220px; }
  .ai-scan-preview {
    width: 100%;
    max-width: 260px;
  }
  .scan-doc-row { grid-template-columns: 58px minmax(0, 1fr); }
  .scan-thumb { width: 58px; }
  .scan-actions { grid-column: 1 / -1; justify-content: flex-start; max-width: none; }
  .official-contact-topline { grid-template-columns: 42px minmax(0, 1fr); }
  .official-contact-flags { grid-column: 2; justify-content: flex-start; max-width: none; }
  .parking-row { grid-template-columns: 56px minmax(0, 1fr); }
  .parking-photo { width: 56px; }
  .parking-actions { grid-column: 1 / -1; justify-content: flex-start; max-width: none; }
  .inventory-row { grid-template-columns: 56px minmax(0, 1fr); }
  .inventory-thumb { width: 56px; }
  .inventory-actions { grid-column: 1 / -1; justify-content: flex-start; max-width: none; }
  .pdf-pack-result { grid-template-columns: 1fr; }
  .pdf-pack-preview img { max-height: 220px; }
  .compact-form, .compact-form:has(label:nth-of-type(3)), .task-row { grid-template-columns: 1fr; }
  .tree-head, .project-chip { align-items: stretch; flex-direction: column; }
  .task-actions { justify-content: flex-start; }
  .tool-list { position: static; max-height: none; }
  .tool-card { grid-template-columns: 42px minmax(0, 1fr); }
  .tool-card .status-pill { grid-column: 2; justify-self: start; }
  .leave-rule-card { grid-template-columns: 46px minmax(0, 1fr); }
  .leave-rule-card .status-pill { grid-column: 2; justify-self: start; }
  .leave-combo-row { grid-template-columns: 1fr; }
  .ltc-preference-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ltc-mini-grid,
  .ltc-reasons,
  .ltc-detail-grid { grid-template-columns: 1fr; }
  .ltc-rec-head { align-items: stretch; }
  .ltc-score { width: 64px; height: 64px; flex-basis: 64px; }
  .dialog-grid { grid-template-columns: 1fr; }
  .profile-grid { grid-template-columns: 1fr; }
  .settings-check-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric strong { font-size: 28px; }
  .tarot-card-art { width: min(168px, 60vw); }
}

@media (max-width: 520px) {
  .topbar { flex-direction: column; }
  .top-actions { width: 100%; }
  .top-actions button { flex: 1 1 auto; }
  .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .tool-command {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
    margin-bottom: 82px;
    padding: 10px;
  }
  .tool-command label:first-child {
    grid-column: 1 / -1;
  }
  .tool-command label span {
    font-size: 10px;
  }
  .tool-command input,
  .tool-command select {
    min-height: 38px;
    padding: 8px 10px;
    font-size: 13px;
  }
  .metric {
    min-height: 82px;
    padding: 11px;
  }
  .metric strong {
    margin-top: 6px;
    font-size: 22px;
  }
  .metric.metric-code strong {
    font-size: 14px;
  }
  .strip-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .strip-actions #registerPasskeyBtn { grid-column: 1 / -1; }
  .profile-head { flex-direction: column; }
  .auth-tabs { grid-template-columns: 1fr; }
  .list-row { display: grid; }
  .settings-check-grid { grid-template-columns: 1fr; }
  .settings-summary-row { display: grid; }
  .settings-summary-row strong { text-align: left; }
  table { min-width: 600px; }
  .ltc-preference-grid { grid-template-columns: 1fr; }
  .ltc-rec-card { padding: 12px; }
  .ltc-rec-head { display: grid; grid-template-columns: 1fr 62px; }
  .ltc-score { width: 62px; height: 62px; flex-basis: auto; }
  .ltc-detail-grid { padding: 0 10px 10px; }
  .compact-table {
    overflow-x: visible;
  }
  .compact-table table,
  .compact-table thead,
  .compact-table tbody,
  .compact-table tr,
  .compact-table th,
  .compact-table td {
    display: block;
    min-width: 0;
    width: 100%;
  }
  .compact-table thead {
    display: none;
  }
  .compact-table tbody {
    display: grid;
    gap: 8px;
    padding: 8px;
  }
  .compact-table tr {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    overflow: hidden;
  }
  .compact-table td {
    display: grid;
    grid-template-columns: minmax(92px, .42fr) minmax(0, 1fr);
    gap: 10px;
    border-bottom: 1px solid var(--line);
    padding: 9px 10px;
    font-size: 12px;
    line-height: 1.35;
    overflow-wrap: anywhere;
    white-space: normal;
  }
  .compact-table td:last-child {
    border-bottom: 0;
  }
  .compact-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .05em;
  }
  .compact-table td:first-child {
    white-space: normal;
    font-weight: 850;
  }
}