:root {
  /* iOS dark system palette */
  --bg: #000000;
  --bg-2: #1c1c1e;
  --bg-3: #2c2c2e;
  --bg-4: #3a3a3c;
  --fg: #ffffff;
  --fg-dim: rgba(235, 235, 245, 0.6);
  --fg-faint: rgba(235, 235, 245, 0.3);
  --accent: #0a84ff;
  --accent-2: #30d158;
  --warn: #ff9f0a;
  --danger: #ff453a;
  --purple: #bf5af2;
  --teal: #64d2ff;
  --border: rgba(84, 84, 88, 0.45);
  --glass: rgba(22, 22, 24, 0.72);
  --radius: 22px;
  --radius-sm: 14px;
  /* spring curves (CSS linear() approximations of UIKit springs) */
  --spring: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%,
                   0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001);
  --spring-bouncy: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121,
                          1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%,
                          0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1);
  --ease-out: cubic-bezier(0.2, 0.9, 0.3, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px;
}

h1 { margin: 0 0 24px; font-weight: 600; font-size: 24px; }
h2 { margin: 32px 0 12px; font-weight: 500; font-size: 16px; color: var(--fg-dim); text-transform: uppercase; letter-spacing: 0.05em; }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  text-decoration: none;
  color: inherit;
  display: block;
}

a.card:hover { border-color: var(--accent); }

.card .num {
  font-size: 32px;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.card .label { color: var(--fg); font-size: 13px; margin-top: 4px; }
.card .sub { color: var(--fg-dim); font-size: 11px; margin-top: 4px; }

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

@media (max-width: 768px) {
  .grid-2 { grid-template-columns: 1fr; }
  main { padding: 16px; }
}

table.simple {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

table.simple td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}

table.simple a { color: var(--accent); text-decoration: none; }
table.simple a:hover { text-decoration: underline; }

.num-cell { text-align: right; font-variant-numeric: tabular-nums; color: var(--fg-dim); }

.bar { width: 100%; min-width: 100px; }
.bar-fill {
  height: 8px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 4px;
  min-width: 4px;
}

.note { color: var(--warn); font-size: 12px; margin-top: 8px; }

/* === Tasks === */

.filters {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  align-items: center;
}
.filters span:first-child { color: var(--fg-dim); margin-right: 4px; }
.filters .spacer { flex: 1; }

.filters a {
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--fg-dim);
  padding: 4px 12px;
  border-radius: 16px;
  text-decoration: none;
  font-size: 12px;
}

.filters a.active { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.filters a.toggle { background: transparent; border: none; color: var(--fg-dim); }
.filters a:hover { color: var(--fg); }

.task-group { margin-bottom: 24px; }
.task-group h2 { display: flex; align-items: center; gap: 8px; }
.counter { background: var(--bg-3); color: var(--fg-dim); padding: 2px 8px; border-radius: 12px; font-size: 12px; font-weight: normal; }

.task-list { list-style: none; padding: 0; margin: 0; }

.task {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 4px;
  border-left: 3px solid var(--border);
}

.task-main {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
}

.task.status-done { opacity: 0.5; border-left-color: var(--accent-2); }
.task.status-done .title { text-decoration: line-through; }
.task.status-in_progress { border-left-color: var(--accent); }
.task.status-waiting { border-left-color: var(--warn); }
.task.status-cancelled { opacity: 0.4; border-left-color: var(--danger); }
.task.status-cancelled .title { text-decoration: line-through; }

.task-expand { flex-shrink: 0; }
.expand-btn {
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--fg-dim);
  cursor: pointer;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 12px;
  list-style: none;
  user-select: none;
}
.expand-btn::-webkit-details-marker { display: none; }
.expand-btn:hover { color: var(--fg); border-color: var(--accent); }
details[open] .expand-btn { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.task-detail { padding: 12px; border-top: 1px solid var(--border); margin-top: 8px; }
.loading { color: var(--fg-dim); font-size: 12px; padding: 4px; }

.assignee-claude { background: rgba(255,165,0,0.15); color: #ffa500; padding: 2px 8px; border-radius: 10px; font-size: 10px; }
.assignee-user { background: rgba(110,168,254,0.15); color: var(--accent); padding: 2px 8px; border-radius: 10px; font-size: 10px; }
.task.unread { border-left-color: #ffa500; box-shadow: 0 0 0 1px rgba(255,165,0,0.3); }

.note-by-claude { background: rgba(255,165,0,0.08) !important; border-left: 2px solid #ffa500; }
.note-by-user { background: var(--bg-3); }
.author { color: var(--fg-dim); font-size: 11px; min-width: 80px; }

/* === Action form (unified note + status + assign) === */
.action-form {
  background: var(--bg-3);
  padding: 10px;
  border-radius: 6px;
  margin-bottom: 12px;
}
.action-form textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--fg);
  padding: 8px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
  margin-bottom: 8px;
}
.action-form textarea:focus { outline: none; border-color: var(--accent); }

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.action-group {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.action-group .label {
  color: var(--fg-dim);
  font-size: 11px;
  min-width: 50px;
}
.action-btn {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--fg-dim);
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  font-family: inherit;
}
.action-btn:hover { color: var(--fg); border-color: var(--accent); }
.action-btn.primary { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.action-btn.primary:hover { background: var(--accent-2); }
.action-btn.active.status-open { background: var(--bg-2); color: var(--fg); border-color: var(--fg-dim); }
.action-btn.active.status-in_progress { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.action-btn.active.status-waiting { background: var(--warn); color: var(--bg); border-color: var(--warn); }
.action-btn.active.status-done { background: var(--accent-2); color: var(--bg); border-color: var(--accent-2); }
.action-btn.active.status-cancelled { background: var(--danger); color: var(--bg); border-color: var(--danger); }
.assignee-claude-btn { background: rgba(255,165,0,0.1); color: #ffa500; }
.assignee-claude-btn.active { background: #ffa500; color: var(--bg); border-color: #ffa500; }
.assignee-user-btn { background: rgba(110,168,254,0.1); color: var(--accent); }
.assignee-user-btn.active { background: var(--accent); color: var(--bg); border-color: var(--accent); }

/* === Toast === */
#toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 100;
  pointer-events: none;
}
.toast-msg {
  background: var(--bg-3);
  border: 1px solid var(--accent);
  color: var(--fg);
  padding: 12px 18px;
  border-radius: 6px;
  font-size: 13px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  animation: toast-in 0.2s ease-out;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.status-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: lowercase;
  letter-spacing: 0.02em;
  font-weight: 500;
}
.status-badge.status-open { background: var(--bg-3); color: var(--fg-dim); }
.status-badge.status-in_progress { background: rgba(110,168,254,0.15); color: var(--accent); }
.status-badge.status-waiting { background: rgba(231,196,108,0.15); color: var(--warn); }
.status-badge.status-done { background: rgba(92,217,164,0.15); color: var(--accent-2); }
.status-badge.status-cancelled { background: rgba(231,110,110,0.15); color: var(--danger); }

.notes-pill {
  background: var(--bg-3);
  color: var(--fg-dim);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
}

.detail-inner .label { color: var(--fg-dim); font-size: 12px; margin-right: 8px; }

.status-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.status-btn {
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--fg-dim);
  padding: 4px 10px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 11px;
  text-transform: lowercase;
}
.status-btn:hover { color: var(--fg); border-color: var(--accent); }
.status-btn.active.status-open { background: var(--bg); color: var(--fg); border-color: var(--fg-dim); }
.status-btn.active.status-in_progress { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.status-btn.active.status-waiting { background: var(--warn); color: var(--bg); border-color: var(--warn); }
.status-btn.active.status-done { background: var(--accent-2); color: var(--bg); border-color: var(--accent-2); }
.status-btn.active.status-cancelled { background: var(--danger); color: var(--bg); border-color: var(--danger); }

.notes-section { margin-bottom: 12px; }
.notes { list-style: none; padding: 0; margin: 8px 0 0; }
.notes li {
  background: var(--bg-3);
  padding: 8px 10px;
  border-radius: 4px;
  margin-bottom: 4px;
  font-size: 13px;
  display: flex;
  gap: 12px;
}
.notes .ts { color: var(--fg-dim); font-family: 'SF Mono', Menlo, monospace; font-size: 11px; min-width: 100px; }
.notes .note-text { flex: 1; white-space: pre-wrap; }

.note-form {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-bottom: 8px;
}
.note-form textarea {
  flex: 1;
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--fg);
  padding: 8px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
}
.note-form textarea:focus { outline: none; border-color: var(--accent); }
.note-form button {
  background: var(--accent);
  color: var(--bg);
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
}
.note-form button:hover { background: var(--accent-2); }

.history { margin-top: 12px; font-size: 12px; }
.history summary { color: var(--fg-dim); cursor: pointer; padding: 4px 0; }
.history ul { list-style: none; padding-left: 12px; margin: 4px 0; color: var(--fg-dim); }
.history .ts { font-family: 'SF Mono', Menlo, monospace; min-width: 100px; display: inline-block; }
.history code { background: var(--bg-3); padding: 1px 4px; border-radius: 2px; font-size: 11px; }

.new-task {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}
.new-task input {
  flex: 1;
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--fg);
  padding: 10px 14px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
}
.new-task input:focus { outline: none; border-color: var(--accent); }
.new-task button {
  background: var(--accent);
  color: var(--bg);
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
}
.new-task button:hover { background: var(--accent-2); }

.check-form { margin: 0; }

.check {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg-dim);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  padding: 0;
}

.check:hover { border-color: var(--accent); color: var(--accent); }
.check.checked { background: var(--accent-2); color: var(--bg); border-color: var(--accent-2); }

.task .title { flex: 1; }
.task .src { color: var(--fg-dim); font-size: 11px; font-family: 'SF Mono', Menlo, monospace; text-decoration: none; }
.task .src:hover { color: var(--accent); }

.badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.badge.prio-high { background: var(--danger); color: var(--bg); }

/* === Clients === */

table.clients {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

table.clients th, table.clients td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

table.clients th { color: var(--fg-dim); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
table.clients tr.archived { opacity: 0.7; }
table.clients td.notes { color: var(--fg-dim); font-size: 12px; max-width: 300px; }

.empty { color: var(--fg-dim); padding: 48px; text-align: center; }

/* === Products page === */

.subtitle {
  color: var(--fg-dim);
  font-size: 13px;
  margin: -16px 0 24px;
}

.updated-badge {
  font-size: 11px;
  font-weight: normal;
  color: var(--fg-dim);
  background: var(--bg-3);
  padding: 3px 10px;
  border-radius: 10px;
  margin-left: 8px;
  vertical-align: middle;
}

table.products {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}

table.products th {
  color: var(--fg-dim);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 8px 10px;
  text-align: left;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
}

table.products td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

table.products tr:hover {
  background: rgba(110,168,254,0.04);
}

table.products tr.row-inactive {
  opacity: 0.5;
}

table.products tr.b2b-margin-row {
  background: var(--bg-2);
  font-size: 12px;
}

table.products tr.b2b-margin-row td {
  border-bottom: 2px solid var(--border);
  padding: 4px 10px;
}

.pkg-name strong {
  color: var(--fg);
  font-weight: 600;
}

.pkg-desc {
  color: var(--fg-dim);
  font-size: 11px;
  margin-top: 2px;
}

td.desc {
  color: var(--fg-dim);
  font-size: 12px;
}

/* Edit cell — inline editable input */
.edit-cell {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
}

.edit-cell input[type="text"] {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--fg);
  padding: 4px 8px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  width: 80px;
  text-align: right;
  transition: border-color 0.15s, background 0.15s;
}

.edit-cell input[type="text"]:hover {
  border-color: var(--fg-dim);
  background: var(--bg-2);
}

.edit-cell input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-2);
  box-shadow: 0 0 0 2px rgba(110,168,254,0.2);
}

.edit-cell input[type="text"]:placeholder-shown,
.edit-cell input[type="text"][value=""] {
  color: var(--fg-dim);
}

.edit-cell .suffix {
  color: var(--fg-dim);
  font-size: 12px;
}

/* Margins — coloured by health */
.margin-ok { color: var(--accent-2); font-weight: 500; }
.margin-warn { color: var(--warn); font-weight: 500; }
.margin-bad { color: var(--danger); font-weight: 500; }
.dim { color: var(--fg-dim); }

/* Pills */
.pill {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: lowercase;
  letter-spacing: 0.02em;
  font-weight: 500;
  display: inline-block;
}
.pill-ok { background: rgba(92,217,164,0.15); color: var(--accent-2); }
.pill-dim { background: var(--bg-3); color: var(--fg-dim); }
.pill-warn { background: rgba(231,196,108,0.15); color: var(--warn); }

/* Calc boxes */
.calc-box {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
}

.calc-box h3 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  display: flex;
  align-items: center;
  gap: 8px;
}

table.calc {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}

table.calc td {
  padding: 5px 0;
  border-bottom: 1px dashed var(--border);
}

table.calc td.num-cell {
  text-align: right;
  font-feature-settings: 'tnum';
}

table.calc tr.total td {
  border-bottom: 1px solid var(--fg-dim);
  padding-top: 8px;
  padding-bottom: 8px;
}

table.calc tr.margin-row td {
  font-size: 14px;
  padding-top: 10px;
  border-bottom: none;
}

/* Category blocks */
.category-block {
  margin-bottom: 32px;
}

.category-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 32px 0 8px;
}

.category-header .counter {
  background: var(--bg-3);
  color: var(--fg-dim);
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: normal;
  text-transform: none;
  letter-spacing: 0;
}

.cat-stat {
  margin-left: auto;
  color: var(--fg-dim);
  font-size: 12px;
  font-weight: normal;
  text-transform: none;
  letter-spacing: 0;
}

.cat-stat strong {
  color: var(--accent-2);
  font-variant-numeric: tabular-nums;
}

/* Toggle active button */
.toggle-form {
  margin: 0;
  display: inline-block;
}

.toggle-pill {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  transition: all 0.15s;
}

.toggle-pill.pill-ok {
  background: rgba(92,217,164,0.15);
  color: var(--accent-2);
}
.toggle-pill.pill-ok:hover {
  background: rgba(92,217,164,0.28);
}

.toggle-pill.pill-dim {
  background: var(--bg-3);
  color: var(--fg-dim);
}
.toggle-pill.pill-dim:hover {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  padding: 1px 7px;
}

/* === Agents === */

.page-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.page-head h1 { margin: 0; }
.page-head .action-btn { margin-left: auto; font-size: 12px; padding: 6px 12px; }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline; }

.spacer { flex: 1; }
.small { font-size: 11px; }
.bad-text { color: var(--danger) !important; }
.warn-text { color: var(--warn) !important; }

.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; background: var(--fg-dim); }
.lvl-ok .dot { background: var(--accent-2); box-shadow: 0 0 0 3px rgba(92,217,164,0.15); }
.lvl-warn .dot { background: var(--warn); box-shadow: 0 0 0 3px rgba(231,196,108,0.15); }
.lvl-down .dot { background: var(--danger); box-shadow: 0 0 0 3px rgba(231,110,110,0.2); animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(231,110,110,0); } }

.agents-summary, .agents-strip { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.agents-strip { margin: -8px 0 24px; }
.lvl-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 16px;
  padding: 4px 12px; font-size: 12px; color: var(--fg); text-decoration: none;
}
a.lvl-chip:hover { border-color: var(--accent); }
.lvl-chip.lvl-warn { border-color: rgba(231,196,108,0.4); }
.lvl-chip.lvl-down { border-color: rgba(231,110,110,0.5); }

.agent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 12px; }
.host-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 12px; }
@media (max-width: 480px) { .agent-grid, .host-grid { grid-template-columns: 1fr; } }

.agent-card, .host-card {
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.agent-card { border-top: 3px solid var(--border); }
.agent-card.lvl-ok { border-top-color: var(--accent-2); }
.agent-card.lvl-warn { border-top-color: var(--warn); }
.agent-card.lvl-down { border-top-color: var(--danger); }

.agent-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.agent-head h3 { margin: 0; font-size: 16px; font-weight: 600; }
.lvl-pill { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: var(--bg-3); color: var(--fg-dim); }
.lvl-ok .lvl-pill { background: rgba(92,217,164,0.12); color: var(--accent-2); }
.lvl-warn .lvl-pill { background: rgba(231,196,108,0.14); color: var(--warn); }
.lvl-down .lvl-pill { background: rgba(231,110,110,0.15); color: var(--danger); }
.host-chip { margin-left: auto; font-size: 11px; color: var(--fg-dim); }
.agent-role { margin: 0; color: var(--fg-dim); font-size: 12px; }

.agent-stats { display: flex; gap: 18px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.agent-stats div { display: flex; flex-direction: column; }
.agent-stats span { font-size: 10px; color: var(--fg-dim); text-transform: uppercase; letter-spacing: 0.05em; }
.agent-stats b { font-weight: 500; font-size: 13px; }

.agent-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 6px; }
.metric { background: var(--bg-3); border-radius: 6px; padding: 8px 10px; }
.metric .num { font-size: 22px; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1.2; }
.metric .label { font-size: 11px; color: var(--fg-dim); }
.metric-bad { background: rgba(231,110,110,0.12); box-shadow: inset 0 0 0 1px rgba(231,110,110,0.35); }
.metric-bad .num { color: var(--danger); }

.agent-last { margin: 0; font-size: 12px; }
.agent-error { margin: 0; font-size: 12px; color: var(--danger); word-break: break-word; }

.agent-details summary { cursor: pointer; font-size: 12px; color: var(--fg-dim); padding: 2px 0; }
.agent-details summary:hover { color: var(--fg); }
.feed { list-style: none; margin: 6px 0 0; padding: 0; max-height: 280px; overflow-y: auto; }
.feed li { display: flex; gap: 8px; font-size: 12px; padding: 5px 0; border-bottom: 1px solid var(--border); }
.feed .ts { color: var(--fg-dim); font-family: 'SF Mono', Menlo, monospace; font-size: 11px; min-width: 76px; }
.feed .who { color: var(--accent); min-width: 60px; font-size: 11px; }
.feed .text { flex: 1; min-width: 0; word-break: break-word; }
.feed.errors .text { font-family: 'SF Mono', Menlo, monospace; font-size: 11px; color: var(--danger); }

.agent-actions { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; border-top: 1px solid var(--border); }
.agent-actions code { font-size: 11px; }
.danger-btn:hover { color: var(--danger); border-color: var(--danger); }

.meter-row { display: grid; grid-template-columns: 40px 1fr 130px; align-items: center; gap: 10px; font-size: 12px; }
.meter-row span { color: var(--fg-dim); }
.meter-row b { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.meter { height: 8px; background: var(--bg-3); border-radius: 4px; overflow: hidden; }
.meter-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 4px; }
.meter-fill.meter-warn { background: var(--warn); }
.host-line { margin: 0; font-size: 12px; word-break: break-word; }

/* ════════════════════════════════════════════════════════════════════════
   iOS layer — glass chrome, springs, view transitions
   ════════════════════════════════════════════════════════════════════════ */

html, body { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
body { background: var(--bg); min-height: 100vh; }
::selection { background: rgba(10,132,255,0.4); }

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 0.32s var(--ease-out) both; }
::view-transition-new(root) { animation: vt-in 0.5s var(--spring) both; }
@keyframes vt-out { to { opacity: 0; transform: scale(0.97); filter: blur(2px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px) scale(1.01); } }
::view-transition-group(*) { animation-duration: 0.55s; animation-timing-function: var(--spring); }
::view-transition-group(tabbar), ::view-transition-group(topbar) { animation: none; }

/* top bar */
header.topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
  border-bottom: 0.5px solid var(--border);
  padding: 10px 24px;
  view-transition-name: topbar;
}
.topbar nav { display: flex; align-items: center; gap: 4px; max-width: 1280px; margin: 0 auto; }
.topbar .brand { font-weight: 700; font-size: 17px; letter-spacing: -0.02em; margin-right: 18px; color: var(--fg); text-decoration: none; }
.topbar nav a.tab {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--fg-dim); text-decoration: none; font-weight: 500; font-size: 14px;
  padding: 7px 14px; border-radius: 999px; border: none;
  transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out), transform 0.4s var(--spring);
}
.topbar nav a.tab svg { width: 18px; height: 18px; }
.topbar nav a.tab:hover { color: var(--fg); background: rgba(255,255,255,0.06); }
.topbar nav a.tab.active { color: var(--fg); background: rgba(255,255,255,0.12); }
.topbar nav a.tab:active { transform: scale(0.94); }
.topbar .tab-badge { background: var(--danger); color: #fff; font-size: 10px; font-weight: 600; min-width: 17px; height: 17px;
  border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }

main { padding: 28px 24px 120px; }
h1 { font-size: 34px; font-weight: 700; letter-spacing: -0.025em; margin: 4px 0 20px; }
h2 { font-size: 13px; font-weight: 600; color: var(--fg-dim); letter-spacing: 0.02em; text-transform: uppercase; margin: 34px 0 10px 4px; }

/* mobile: tab bar at the bottom like iOS */
@media (max-width: 760px) {
  header.topbar { position: fixed; top: auto; bottom: 12px; left: 12px; right: 12px; border-radius: 28px;
    border: 0.5px solid var(--border); padding: 6px; box-shadow: 0 10px 40px rgba(0,0,0,0.55); view-transition-name: tabbar; }
  .topbar .brand { display: none; }
  .topbar nav { justify-content: space-around; gap: 0; overflow: visible; }
  .topbar nav a.tab { flex-direction: column; gap: 2px; font-size: 10px; padding: 6px 4px; flex: 1; border-radius: 22px; }
  .topbar nav a.tab svg { width: 23px; height: 23px; }
  .topbar nav a.tab.active { color: var(--accent); background: rgba(255,255,255,0.08); }
  main { padding: 20px 16px 120px; }
  h1 { font-size: 30px; }
}

/* surfaces */
.card, .agent-card, .host-card, .calc-box { border-radius: var(--radius); border: 0.5px solid var(--border); background: var(--bg-2); }
.agent-card { border-top: 0.5px solid var(--border); }

.pressable { transition: transform 0.45s var(--spring), background 0.2s; }
.pressable:active { transform: scale(0.975); }
a.card-link { color: inherit; text-decoration: none; display: flex; flex-direction: column; gap: 10px; }
.agent-card.linked:hover, .host-card.linked:hover { background: #222225; }

/* staggered entrance */
.rise { animation: rise 0.6s var(--spring) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes rise { from { opacity: 0; transform: translateY(16px) scale(0.985); } }

/* status glow on agent cards */
.agent-card { position: relative; overflow: hidden; }
.agent-card::before { content: ''; position: absolute; inset: -1px; pointer-events: none; border-radius: inherit; opacity: 0.55;
  background: radial-gradient(120% 60% at 0% 0%, var(--glow, transparent), transparent 55%); }
.agent-card.lvl-ok { --glow: rgba(48,209,88,0.13); }
.agent-card.lvl-warn { --glow: rgba(255,159,10,0.16); }
.agent-card.lvl-down { --glow: rgba(255,69,58,0.2); }
.agent-card > * { position: relative; }
.agent-icon { width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; background: var(--bg-3); flex-shrink: 0; }
.alert-count { font-size: 11px; font-weight: 600; color: var(--warn); }
.lvl-down .alert-count { color: var(--danger); }
.chev { color: var(--fg-faint); font-size: 18px; margin-left: 4px; }

/* ─── Detail pages (agent / server) ─── */
.back { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); text-decoration: none; font-size: 16px; margin-bottom: 8px; }
.back:active { opacity: 0.5; }
.hero { display: flex; gap: 18px; align-items: center; margin-bottom: 8px; }
.hero .agent-icon { width: 72px; height: 72px; border-radius: 20px; font-size: 38px; }
.hero h1 { margin: 0; }
.hero-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.hero-meta a { color: var(--accent); text-decoration: none; font-size: 13px; }
.hero p { margin: 6px 0 0; color: var(--fg-dim); font-size: 14px; max-width: 720px; }

.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 0 20px; align-items: start; }
@media (max-width: 760px) { .cols { grid-template-columns: 1fr; } }

/* inset grouped list, iOS Settings style */
.group { background: var(--bg-2); border-radius: var(--radius-sm); overflow: hidden; }
.group .row { display: flex; align-items: flex-start; gap: 12px; padding: 11px 16px; min-height: 44px; position: relative; font-size: 14px; }
.group .row + .row::before { content: ''; position: absolute; top: 0; left: 16px; right: 0; height: 0.5px; background: var(--border); }
.group .row .k { color: var(--fg-dim); min-width: 120px; flex-shrink: 0; }
.group .row .v { flex: 1; min-width: 0; word-break: break-word; text-align: right; }
.group .row .v.left { text-align: left; }
.group .row code, .group code { font-family: 'SF Mono', Menlo, monospace; font-size: 12px; color: var(--teal); }
.group a.row { color: inherit; text-decoration: none; }
.group a.row:hover { background: rgba(255,255,255,0.03); }
.group a.row:active { background: rgba(255,255,255,0.07); }
.group .empty-row { padding: 14px 16px; color: var(--fg-faint); font-size: 13px; }
.group-foot { color: var(--fg-faint); font-size: 12px; margin: 6px 4px 0; }

/* alerts (notifications) */
.alerts { display: flex; flex-direction: column; gap: 8px; margin: 18px 0 4px; }
.alert { display: flex; gap: 12px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--bg-2);
  border: 0.5px solid var(--border); animation: rise 0.55s var(--spring) both; animation-delay: calc(var(--i, 0) * 60ms); }
.alert .ic { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.alert.down .ic { background: var(--danger); }
.alert.warn .ic { background: var(--warn); }
.alert.info .ic { background: var(--bg-4); }
.alert b { display: block; font-weight: 600; font-size: 14px; }
.alert span { color: var(--fg-dim); font-size: 12.5px; }
.alert.down { background: linear-gradient(90deg, rgba(255,69,58,0.12), var(--bg-2) 60%); }
.alert.warn { background: linear-gradient(90deg, rgba(255,159,10,0.1), var(--bg-2) 60%); }
.all-good { display: flex; gap: 10px; align-items: center; color: var(--accent-2); font-size: 14px; margin: 18px 0 4px; }

/* links / connections */
.dir { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex-shrink: 0; }
.dir-in { background: rgba(10,132,255,0.18); color: var(--accent); }
.dir-out { background: rgba(48,209,88,0.16); color: var(--accent-2); }
.dir-data { background: rgba(191,90,242,0.18); color: var(--purple); }
.dir-host { background: rgba(100,210,255,0.16); color: var(--teal); }
.link-body b { font-weight: 600; }
.link-body small { display: block; color: var(--fg-dim); font-size: 12.5px; margin-top: 1px; }
.node-chip { display: inline-block; margin-top: 4px; font-size: 11px; color: var(--purple); background: rgba(191,90,242,0.12);
  padding: 1px 8px; border-radius: 8px; }

.node-body { background: var(--bg-2); border-radius: var(--radius-sm); padding: 6px 18px 12px; font-size: 14px; color: var(--fg); }
.node-body h3, .node-body h4, .node-body h5 { margin: 14px 0 6px; font-size: 14px; color: var(--fg-dim); font-weight: 600; }
.node-body h3 { font-size: 16px; color: var(--fg); }
.node-body p { margin: 4px 0; }
.node-body ul { margin: 4px 0; padding-left: 18px; }
.node-body .wikilink { color: var(--purple); }

.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.btn { appearance: none; border: none; text-decoration: none; display: inline-block; border-radius: 12px; padding: 10px 16px; font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; background: var(--bg-3); color: var(--accent); transition: transform 0.45s var(--spring), background 0.2s, opacity 0.2s; }
.btn:hover { background: var(--bg-4); }
.btn:active { transform: scale(0.95); }
.btn.primary { background: var(--accent); color: #fff; }
.btn.primary:hover { background: #2b95ff; }
.btn.danger { color: var(--danger); }
.btn.small { padding: 6px 12px; font-size: 13px; border-radius: 10px; }
.btn.htmx-request { opacity: 0.5; pointer-events: none; }

/* metric tiles reuse .metric, tune for iOS */
.metric { border-radius: 12px; background: var(--bg-3); }
.metric .num { letter-spacing: -0.02em; }

/* ─── To-do (Reminders) ─── */
.todo-wrap { max-width: 760px; }
.todo-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.todo-head .sub { color: var(--fg-dim); font-size: 15px; }
.todo-add { display: flex; align-items: center; gap: 12px; background: var(--bg-2); border-radius: var(--radius-sm); padding: 6px 8px 6px 14px;
  margin-bottom: 22px; border: 0.5px solid var(--border); transition: box-shadow 0.3s var(--ease-out); }
.todo-add:focus-within { box-shadow: 0 0 0 3px rgba(10,132,255,0.35); }
.todo-add .plus { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; display: flex;
  align-items: center; justify-content: center; font-size: 18px; font-weight: 500; flex-shrink: 0; }
.todo-add input { flex: 1; background: transparent; border: none; outline: none; color: var(--fg); font: inherit; font-size: 16px; padding: 10px 0; }
.todo-add input::placeholder { color: var(--fg-faint); }

.todo-list { list-style: none; margin: 0; padding: 0; background: var(--bg-2); border-radius: var(--radius-sm); overflow: hidden; }
.todo { position: relative; animation: todo-in 0.55s var(--spring) both; }
.todo + .todo::before { content: ''; position: absolute; top: 0; left: 52px; right: 0; height: 0.5px; background: var(--border); }
@keyframes todo-in { from { opacity: 0; transform: translateY(-10px) scale(0.98); } }
.todo-main { display: flex; align-items: flex-start; gap: 14px; padding: 12px 14px; }
.todo-text { flex: 1; min-width: 0; padding-top: 2px; font-size: 16px; line-height: 1.4; cursor: pointer; word-break: break-word; }
.todo.is-done .todo-text { color: var(--fg-faint); text-decoration: line-through; text-decoration-color: var(--fg-faint); }
.todo-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; font-size: 12.5px; color: var(--fg-dim); }

/* round checkbox with pop + check draw */
.check-btn { appearance: none; border: none; background: none; padding: 0; cursor: pointer; flex-shrink: 0; width: 26px; height: 26px; margin-top: 1px; }
.check-btn .ring { width: 24px; height: 24px; border-radius: 50%; border: 1.6px solid var(--fg-faint); display: flex; align-items: center;
  justify-content: center; transition: background 0.25s, border-color 0.25s, transform 0.5s var(--spring-bouncy); }
.check-btn:hover .ring { border-color: var(--accent); }
.check-btn:active .ring { transform: scale(0.82); }
.check-btn svg { width: 14px; height: 14px; stroke: #fff; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 22; stroke-dashoffset: 22; }
.todo.is-done .check-btn .ring { background: var(--accent); border-color: var(--accent); animation: pop 0.5s var(--spring-bouncy); }
.todo.is-done .check-btn svg { stroke-dashoffset: 0; transition: stroke-dashoffset 0.35s 0.08s var(--ease-out); }
@keyframes pop { 0% { transform: scale(0.7); } 100% { transform: scale(1); } }

.agent-tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 7px; border-radius: 999px; font-size: 12px;
  font-weight: 500; background: var(--bg-3); color: var(--fg); }
.agent-tag.st-running, .agent-tag.st-sent { color: var(--teal); background: rgba(100,210,255,0.12); }
.agent-tag.st-waiting { color: var(--warn); background: rgba(255,159,10,0.14); }
.agent-tag.st-queued { color: var(--purple); background: rgba(191,90,242,0.14); }
.agent-tag.st-done { color: var(--accent-2); background: rgba(48,209,88,0.12); }
.agent-tag.st-failed, .agent-tag.st-cancelled { color: var(--danger); background: rgba(255,69,58,0.12); }
.agent-tag.st-running .spin { width: 10px; height: 10px; border-radius: 50%; border: 1.6px solid currentColor; border-right-color: transparent;
  animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.shimmer { background: linear-gradient(90deg, var(--fg-dim) 0%, var(--fg) 50%, var(--fg-dim) 100%); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 1.6s linear infinite; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

.todo-side { display: flex; gap: 6px; align-items: center; flex-shrink: 0; opacity: 0; transition: opacity 0.2s; }
.todo:hover .todo-side, .todo:focus-within .todo-side { opacity: 1; }
@media (hover: none) { .todo-side { opacity: 1; } }
.send-btn { appearance: none; border: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; color: var(--accent);
  background: rgba(10,132,255,0.14); padding: 6px 12px; border-radius: 999px; transition: transform 0.45s var(--spring), background 0.2s; }
.send-btn:hover { background: rgba(10,132,255,0.24); }
.send-btn:active { transform: scale(0.92); }
.icon-btn { appearance: none; border: none; background: none; color: var(--fg-faint); cursor: pointer; font-size: 15px; padding: 6px; border-radius: 8px; }
.icon-btn:hover { color: var(--danger); background: rgba(255,69,58,0.1); }

.todo-detail { margin: 10px 0 2px; padding: 10px 12px; background: var(--bg-3); border-radius: 12px; font-size: 13px; }
.todo-detail .result { white-space: pre-wrap; line-height: 1.45; }
.todo-detail .hist { color: var(--fg-faint); font-size: 11.5px; margin-top: 8px; }
.todo-detail .hist div { margin-top: 2px; }
.todo-edit { width: 100%; background: transparent; border: none; outline: none; color: var(--fg); font: inherit; font-size: 16px; padding: 0; }

.done-toggle { margin-top: 26px; }
.done-toggle summary { list-style: none; cursor: pointer; color: var(--accent); font-size: 15px; padding: 4px; }
.done-toggle summary::-webkit-details-marker { display: none; }
.done-toggle[open] summary { margin-bottom: 10px; }
.empty-state { text-align: center; padding: 56px 20px; color: var(--fg-faint); }
.empty-state .big { font-size: 46px; margin-bottom: 8px; }

/* bottom action sheet (dialog) */
dialog.sheet { border: none; padding: 0; background: transparent; color: var(--fg); max-width: 520px; width: calc(100% - 24px);
  margin: auto auto 12px; overflow: visible; }
dialog.sheet::backdrop { background: rgba(0,0,0,0.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: opacity 0.3s, display 0.3s allow-discrete, overlay 0.3s allow-discrete; opacity: 0; }
dialog.sheet[open]::backdrop { opacity: 1; }
@starting-style { dialog.sheet[open]::backdrop { opacity: 0; } }
dialog.sheet { transition: transform 0.55s var(--spring), opacity 0.25s, display 0.55s allow-discrete, overlay 0.55s allow-discrete;
  transform: translateY(110%); opacity: 0.6; }
dialog.sheet[open] { transform: translateY(0); opacity: 1; }
@starting-style { dialog.sheet[open] { transform: translateY(110%); opacity: 0.6; } }
.sheet-card { background: rgba(44,44,46,0.88); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  border-radius: 18px; overflow: hidden; }
.sheet-title { text-align: center; padding: 14px 18px 12px; font-size: 13px; color: var(--fg-dim); }
.sheet-title b { display: block; color: var(--fg); font-size: 14px; margin-bottom: 3px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sheet-opt { display: flex; align-items: center; gap: 14px; width: 100%; appearance: none; border: none; background: none; color: var(--fg);
  font: inherit; text-align: left; padding: 14px 18px; cursor: pointer; border-top: 0.5px solid var(--border); }
.sheet-opt:hover { background: rgba(255,255,255,0.05); }
.sheet-opt:active { background: rgba(255,255,255,0.1); }
.sheet-opt .agent-icon { width: 36px; height: 36px; }
.sheet-opt b { display: block; font-size: 17px; font-weight: 500; color: var(--accent); }
.sheet-opt small { color: var(--fg-dim); font-size: 12.5px; }
.sheet-cancel { margin-top: 8px; width: 100%; appearance: none; border: none; border-radius: 18px; padding: 16px; font: inherit;
  font-size: 17px; font-weight: 600; color: var(--accent); background: rgba(44,44,46,0.95); cursor: pointer; }
.sheet-cancel:active { background: var(--bg-4); }

/* Dynamic-Island-style toast */
#toast { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); bottom: auto; right: auto; z-index: 200; pointer-events: none; }
.toast-msg { background: #000; color: #fff; border: 0.5px solid rgba(255,255,255,0.14); border-radius: 999px; padding: 10px 20px;
  font-size: 14px; font-weight: 500; box-shadow: 0 12px 40px rgba(0,0,0,0.6); white-space: nowrap;
  animation: island 0.6s var(--spring-bouncy) both; }
@keyframes island { from { opacity: 0; transform: scale(0.4, 0.5) translateY(-10px); filter: blur(4px); } }
@media (max-width: 760px) { .toast-msg { white-space: normal; max-width: 86vw; text-align: center; } }

/* host inventory */
.inv-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.inv-table td { padding: 8px 16px; border-top: 0.5px solid var(--border); vertical-align: top; }
.inv-table tr:first-child td { border-top: none; }
.inv-table td.mono { font-family: 'SF Mono', Menlo, monospace; font-size: 12px; color: var(--teal); white-space: nowrap; }
.inv-table td.dim { color: var(--fg-dim); }
.pill-tag { font-size: 11px; padding: 1px 8px; border-radius: 8px; background: var(--bg-3); color: var(--fg-dim); margin: 2px 4px 2px 0; display: inline-block; }
.pill-tag.agent { background: rgba(10,132,255,0.15); color: var(--accent); text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; }
  @view-transition { navigation: none; }
}

/* ─── To-do v2: smart lists, composer, pills ─── */
.smart-lists { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 4px 0 18px; }
@media (max-width: 760px) { .smart-lists { grid-template-columns: repeat(2, 1fr); } .smart-lists .sl-all { grid-column: span 2; } }
.smart { position: relative; background: var(--bg-2); border-radius: var(--radius-sm); padding: 12px 14px; text-decoration: none; color: var(--fg);
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 6px 10px; align-items: center;
  border: 0.5px solid var(--border); transition: transform 0.45s var(--spring), background 0.2s, box-shadow 0.3s; }
.smart:hover { background: #232326; }
.smart:active { transform: scale(0.96); }
.smart .sl-icon { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; background: var(--sl, var(--bg-4)); }
.smart .sl-count { justify-self: end; font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.smart .sl-label { grid-column: span 2; font-size: 13px; font-weight: 600; color: var(--fg-dim); }
.smart .sl-label em { font-style: normal; color: var(--danger); }
.smart.active { box-shadow: 0 0 0 2px var(--sl, var(--accent)); }
.sl-all { --sl: #636366; } .sl-urgent { --sl: var(--danger); } .sl-today { --sl: var(--accent); }
.sl-agents { --sl: #0e8a9a; } .sl-ideas { --sl: #c7a100; }

.tag-row { display: flex; gap: 6px; flex-wrap: wrap; margin: -6px 0 16px; }
.tag-chip { font-size: 13px; padding: 4px 11px; border-radius: 999px; background: var(--bg-2); color: var(--fg-dim); text-decoration: none;
  border: 0.5px solid var(--border); transition: transform 0.4s var(--spring); }
.tag-chip span { color: var(--fg-faint); margin-left: 2px; }
.tag-chip:active { transform: scale(0.94); }
.tag-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.tag-chip.active span { color: rgba(255,255,255,0.7); }
.tag-chip.clear { color: var(--danger); }

.composer { margin-bottom: 22px; }
.composer .todo-add { margin-bottom: 0; }
.composer-opts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.composer > .composer-opts, .composer-hint { max-height: 0; opacity: 0; overflow: hidden; margin: 0;
  transition: max-height 0.5s var(--spring), opacity 0.25s, margin 0.4s var(--spring); }
.composer:focus-within > .composer-opts, .composer:hover > .composer-opts { max-height: 140px; opacity: 1; margin-top: 10px; overflow: visible; }
.composer:focus-within .composer-hint { max-height: 40px; opacity: 1; margin-top: 8px; }
.composer-hint { color: var(--fg-faint); font-size: 12px; padding-left: 4px; }
.composer-hint code { color: var(--fg-dim); background: var(--bg-3); padding: 1px 6px; border-radius: 6px; font-size: 11.5px; }

.segmented { display: inline-flex; background: var(--bg-3); border-radius: 10px; padding: 2px; gap: 2px; flex-wrap: wrap; }
.segmented label { cursor: pointer; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span { display: block; padding: 5px 11px; border-radius: 8px; font-size: 13px; color: var(--fg-dim); transition: background 0.3s var(--spring), color 0.2s; }
.segmented input:checked + span { background: var(--bg-4); color: var(--fg); box-shadow: 0 2px 8px rgba(0,0,0,0.35); }
.chip-toggle { cursor: pointer; }
.chip-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.chip-toggle span { display: inline-block; padding: 6px 12px; border-radius: 999px; font-size: 13px; background: var(--bg-3); color: var(--fg-dim);
  transition: background 0.25s, color 0.25s, transform 0.45s var(--spring-bouncy); }
.chip-toggle input:checked + span { background: rgba(255,69,58,0.2); color: var(--danger); transform: scale(1.04); }
.chip-input { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-3); border-radius: 999px; padding: 3px 12px; font-size: 13px; color: var(--fg-dim); }
.chip-input input { background: transparent; border: none; outline: none; color: var(--fg); font: inherit; font-size: 13px; width: 130px; color-scheme: dark; }

.todo-text summary { list-style: none; }
.todo-text summary::-webkit-details-marker { display: none; }
.kind-icon { margin-right: 6px; }
.todo.is-urgent .check-btn .ring { border-color: var(--danger); }
.pill-urgent, .pill-kind, .pill-due, .pill-tag-link { font-size: 12px; padding: 1px 8px; border-radius: 999px; text-decoration: none; }
.pill-urgent { background: rgba(255,69,58,0.15); color: var(--danger); font-weight: 600; }
.pill-kind { background: rgba(199,161,0,0.16); color: #ffd60a; }
.pill-due { background: var(--bg-3); color: var(--fg-dim); }
.pill-due.due-overdue { background: rgba(255,69,58,0.15); color: var(--danger); font-weight: 600; }
.pill-due.due-today { background: rgba(10,132,255,0.16); color: var(--accent); font-weight: 600; }
.pill-due.due-soon { color: var(--fg); }
.pill-tag-link { color: var(--accent); padding: 1px 2px; }
.pill-tag-link:hover { text-decoration: underline; }
.todo-detail .result { white-space: pre-wrap; line-height: 1.45; margin-top: 12px; padding-top: 10px; border-top: 0.5px solid var(--border); }
.todo-list + h2 { margin-top: 26px; }

/* agent "voice" digest */
.voice { background: var(--bg-2); border-radius: var(--radius); padding: 14px 18px 12px; margin: 18px 0 4px; border: 0.5px solid var(--border);
  animation: rise 0.6s var(--spring) both; }
.voice-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.voice-head .agent-icon { width: 28px; height: 28px; font-size: 15px; border-radius: 8px; }
.voice-head b { font-size: 14px; }
.voice p { margin: 5px 0; font-size: 14.5px; line-height: 1.45; padding-left: 14px; position: relative; }
.voice p::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--fg-faint); }
.voice .vl-ok::before { background: var(--accent-2); }
.voice .vl-warn { color: #ffd38a; } .voice .vl-warn::before { background: var(--warn); }
.voice .vl-bad { color: #ff9b94; } .voice .vl-bad::before { background: var(--danger); }
.voice .vl-dim { color: var(--fg-dim); }

/* ─── Home ─── */
.today-line { color: var(--fg-dim); margin: -14px 0 18px 2px; font-size: 15px; }
.today-line::first-letter { text-transform: uppercase; }
.home-status { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--radius); background: var(--bg-2);
  border: 0.5px solid var(--border); }
.home-status b { display: block; font-size: 18px; letter-spacing: -0.01em; }
.home-status span { color: var(--fg-dim); font-size: 13px; }
.hs-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.st-ok { background: linear-gradient(100deg, rgba(48,209,88,0.14), var(--bg-2) 55%); } .st-ok .hs-dot { background: var(--accent-2); box-shadow: 0 0 0 5px rgba(48,209,88,0.18); }
.st-warn { background: linear-gradient(100deg, rgba(255,159,10,0.14), var(--bg-2) 55%); } .st-warn .hs-dot { background: var(--warn); box-shadow: 0 0 0 5px rgba(255,159,10,0.18); }
.st-bad { background: linear-gradient(100deg, rgba(255,69,58,0.16), var(--bg-2) 55%); } .st-bad .hs-dot { background: var(--danger); animation: pulse 1.6s infinite; }
.alert-mini { width: 24px; text-align: center; flex-shrink: 0; }
.task-stats { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--bg-2); border-radius: var(--radius-sm); overflow: hidden;
  text-decoration: none; color: var(--fg); gap: 0.5px; border: 0.5px solid var(--border); }
.ts-cell { background: var(--bg-2); padding: 12px 14px; outline: 0.5px solid var(--border); }
.ts-cell b { display: block; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ts-cell span { font-size: 12px; color: var(--fg-dim); }
.ts-bad b { color: var(--danger); }
.digest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
@media (max-width: 480px) { .digest-grid { grid-template-columns: 1fr; } }
.digest-card { display: block; text-decoration: none; color: var(--fg); background: var(--bg-2); border-radius: var(--radius); padding: 14px 18px 10px;
  border: 0.5px solid var(--border); position: relative; overflow: hidden; }
.digest-card::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.55;
  background: radial-gradient(120% 60% at 0% 0%, var(--glow, transparent), transparent 55%); }
.digest-card.lvl-ok { --glow: rgba(48,209,88,0.12); } .digest-card.lvl-warn { --glow: rgba(255,159,10,0.15); } .digest-card.lvl-down { --glow: rgba(255,69,58,0.18); }
.digest-card:hover { background: #222225; }
.digest-card header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; position: relative; }
.digest-card header .agent-icon { width: 30px; height: 30px; font-size: 16px; border-radius: 9px; }
.digest-card header b { font-size: 16px; }
.voice-lines { position: relative; }
.voice-lines p { margin: 5px 0; font-size: 14px; line-height: 1.42; padding-left: 14px; position: relative; }
.voice-lines p::before { content: ''; position: absolute; left: 0; top: 0.58em; width: 6px; height: 6px; border-radius: 50%; background: var(--fg-faint); }
.voice-lines .vl-ok::before { background: var(--accent-2); }
.voice-lines .vl-warn { color: #ffd38a; } .voice-lines .vl-warn::before { background: var(--warn); }
.voice-lines .vl-bad { color: #ff9b94; } .voice-lines .vl-bad::before { background: var(--danger); }
.voice-lines .vl-dim { color: var(--fg-dim); }
.todo-text[open] ~ .todo-side { display: none; }

/* ─── Phone / home-screen app ─── */
html { -webkit-text-size-adjust: 100%; }
body { padding-top: env(safe-area-inset-top); -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; }
a, button, summary, label { touch-action: manipulation; }

.fab { position: fixed; right: 22px; bottom: 26px; z-index: 60; width: 56px; height: 56px; border-radius: 50%; border: none;
  background: var(--accent); color: #fff; font-size: 30px; font-weight: 300; line-height: 1; cursor: pointer;
  box-shadow: 0 10px 30px rgba(10,132,255,0.45), 0 2px 8px rgba(0,0,0,0.5); transition: transform 0.5s var(--spring-bouncy), box-shadow 0.3s; }
.fab:hover { box-shadow: 0 12px 36px rgba(10,132,255,0.6), 0 2px 8px rgba(0,0,0,0.5); }
.fab:active { transform: scale(0.88); }
.quick-card { padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 10px; }
.quick-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 0 2px; }
.quick-head b { font-size: 17px; }
.quick-card textarea { width: 100%; background: rgba(0,0,0,0.35); border: 0.5px solid var(--border); border-radius: 12px; color: var(--fg);
  font: inherit; font-size: 17px; padding: 12px; resize: none; outline: none; }
.quick-card textarea:focus { border-color: var(--accent); }
.quick-card .chip-toggle input[type=radio]:checked + span { background: rgba(10,132,255,0.22); color: var(--accent); }
.quick-submit { width: 100%; padding: 13px; font-size: 17px; border-radius: 14px; }

@media (max-width: 760px) {
  header.topbar { bottom: calc(10px + env(safe-area-inset-bottom)); }
  main { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
  .fab { right: 18px; bottom: calc(96px + env(safe-area-inset-bottom)); width: 54px; height: 54px; }
  dialog.sheet { margin-bottom: calc(10px + env(safe-area-inset-bottom)); }
  /* iOS zooms into inputs smaller than 16px */
  input, textarea, select, .chip-input input, .todo-edit { font-size: 16px !important; }
  /* comfortable tap targets */
  .check-btn { width: 44px; height: 44px; margin: -9px -9px -9px -9px; display: flex; align-items: center; justify-content: center; }
  .todo-main { padding: 12px 12px 12px 14px; gap: 10px; }
  .todo-side { display: none; }
  .group .row { min-height: 50px; }
  .btn { padding: 11px 16px; }
  .smart { padding: 12px; }
  .composer-hint { display: none; }
  .smart { padding: 10px 12px; gap: 2px 10px; }
  .smart .sl-icon { width: 28px; height: 28px; font-size: 14px; }
  .smart .sl-count { font-size: 22px; }
  .smart-lists { gap: 8px; }
  .smart-lists .sl-all { grid-column: auto; }
  .smart-lists { grid-template-columns: repeat(3, 1fr); }
  .smart .sl-label { font-size: 12px; }
  .chip-input input { width: 120px; }
  .agent-grid, .host-grid { gap: 10px; }
  .hero .agent-icon { width: 60px; height: 60px; font-size: 32px; border-radius: 16px; }
}
/* standalone (added to Home Screen): no browser chrome, so keep content clear of the status bar */
@media (display-mode: standalone) {
  main { padding-top: 12px; }
}

/* ─── Login ─── */
.login-body { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: radial-gradient(80% 50% at 20% 10%, rgba(10,132,255,0.22), transparent 60%),
              radial-gradient(70% 50% at 90% 90%, rgba(48,209,88,0.16), transparent 60%), #000; }
.login-card { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 12px; align-items: stretch; text-align: center;
  background: rgba(28,28,30,0.7); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  border: 0.5px solid var(--border); border-radius: 28px; padding: 32px 24px 22px; }
.login-logo { width: 76px; height: 76px; border-radius: 18px; align-self: center; box-shadow: 0 10px 30px rgba(10,132,255,0.35); }
.login-card h1 { margin: 6px 0 8px; font-size: 26px; }
.login-card input[type=password] { background: rgba(0,0,0,0.4); border: 0.5px solid var(--border); border-radius: 14px; color: var(--fg);
  font: inherit; font-size: 17px; padding: 14px 16px; outline: none; text-align: center; }
.login-card input[type=password]:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(10,132,255,0.3); }
.login-card .btn { padding: 14px; font-size: 17px; border-radius: 14px; }
.login-error { color: var(--danger); margin: 0; font-size: 14px; animation: shake 0.4s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* ─── Finance (Krabs reports) ─── */
:root { --series-1: #3987e5; --series-2: #d95926; }  /* dataviz palette, dark slots 1–2, validated on #1c1c1e */
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 760px) { .fin-kpis { grid-template-columns: repeat(2, 1fr); } }
.kpi { background: var(--bg-2); border: 0.5px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.kpi span { font-size: 12px; color: var(--fg-dim); }
.kpi b { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kpi small { font-size: 12px; color: var(--fg-dim); }
.kpi em { font-style: normal; font-weight: 600; }
.kpi em.up { color: var(--accent-2); } .kpi em.down { color: var(--danger); }
.kpi-owe b { color: #ffd38a; }

.chart-card { background: var(--bg-2); border: 0.5px solid var(--border); border-radius: var(--radius); padding: 14px 16px 10px; }
.legend { display: flex; gap: 16px; font-size: 12px; color: var(--fg-dim); margin-bottom: 10px; }
.legend i, .tip i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.bars { position: relative; height: 220px; margin-top: 18px; display: flex; align-items: stretch; gap: 6px; padding: 0 0 22px 52px; }
.gridline { position: absolute; left: 52px; right: 0; height: 0; border-top: 0.5px solid var(--border); pointer-events: none; }
.gridline span { position: absolute; left: -52px; top: -8px; width: 46px; text-align: right; font-size: 10.5px; color: var(--fg-faint); font-variant-numeric: tabular-nums; }
.bar-group { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; outline: none; cursor: default; }
.bar-pair { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; border-radius: 8px; transition: background 0.2s; }
.bar-group:hover .bar-pair, .bar-group:focus .bar-pair { background: rgba(255,255,255,0.04); }
.fbar { width: min(22px, 32%); border-radius: 4px 4px 0 0; min-height: 2px; transform-origin: bottom; animation: grow 0.8s var(--spring) both; }
.bar-group:nth-child(4) .fbar { animation-delay: 0.04s; } .bar-group:nth-child(5) .fbar { animation-delay: 0.08s; }
.bar-group:nth-child(6) .fbar { animation-delay: 0.12s; } .bar-group:nth-child(7) .fbar { animation-delay: 0.16s; }
.bar-group:nth-child(8) .fbar { animation-delay: 0.2s; } .bar-group:nth-child(9) .fbar { animation-delay: 0.24s; }
@keyframes grow { from { transform: scaleY(0); } }
.b-rev { background: var(--series-1); } .b-pro { background: var(--series-2); }
.bar-label { position: absolute; bottom: -20px; font-size: 11.5px; color: var(--fg-dim); }
.is-current .bar-label { color: var(--fg); font-weight: 600; }
.tip { position: absolute; bottom: calc(100% - 30px); left: 50%; transform: translate(-50%, 6px) scale(0.96); opacity: 0; pointer-events: none;
  background: rgba(44,44,46,0.95); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 0.5px solid var(--border);
  border-radius: 12px; padding: 9px 11px; font-size: 12px; white-space: nowrap; z-index: 5; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  transition: opacity 0.15s, transform 0.35s var(--spring); }
.tip b { display: block; margin-bottom: 4px; }
.tip div { display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.tip em { font-style: normal; margin-left: auto; padding-left: 14px; font-variant-numeric: tabular-nums; color: var(--fg); }
.tip-muted { color: var(--fg-dim); }
.bar-group:hover .tip, .bar-group:focus .tip { opacity: 1; transform: translate(-50%, 0) scale(1); }
.bar-group.first .tip { left: 0; transform: translate(0, 6px); } .bar-group.first:hover .tip, .bar-group.first:focus .tip { transform: none; }
.bar-group:last-child .tip { left: auto; right: 0; transform: translate(0, 6px); } .bar-group:last-child:hover .tip, .bar-group:last-child:focus .tip { transform: none; }
.table-view { margin-top: 8px; font-size: 13px; }
.table-view summary { cursor: pointer; color: var(--accent); font-size: 13px; padding: 4px 0; }
.split-row { align-items: center; }
.split-bar { width: 70px; height: 6px; background: var(--bg-3); border-radius: 3px; overflow: hidden; flex-shrink: 0; }
.split-bar i { display: block; height: 100%; background: var(--series-1); border-radius: 3px; }
.fin-table td { vertical-align: middle; }
@media (max-width: 760px) { .tab-desktop { display: none !important; } }

/* ─── Clients (live CRM) ─── */
.seg-link { display: inline-block; padding: 6px 14px; border-radius: 8px; font-size: 14px; color: var(--fg-dim); text-decoration: none;
  transition: background 0.3s var(--spring), color 0.2s; }
.seg-link small { color: var(--fg-faint); margin-left: 3px; }
.seg-link.on { background: var(--bg-4); color: var(--fg); box-shadow: 0 2px 8px rgba(0,0,0,0.35); }
.client-row summary { list-style: none; cursor: pointer; align-items: center; }
.client-row summary::-webkit-details-marker { display: none; }
.client-row + .client-row summary::before { content: ''; position: absolute; top: 0; left: 16px; right: 0; height: 0.5px; background: var(--border); }
.client-detail { padding: 2px 16px 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; font-size: 13px; }
@media (max-width: 760px) { .client-detail { grid-template-columns: 1fr; } }
.client-detail span { display: block; color: var(--fg-dim); font-size: 11.5px; }
.client-detail b { font-weight: 500; word-break: break-word; }