:root {
  --bg: var(--tg-theme-bg-color, #fff);
  --text: var(--tg-theme-text-color, #1a1a1a);
  --hint: var(--tg-theme-hint-color, #707579);
  --link: var(--tg-theme-link-color, #2481cc);
  --button: var(--tg-theme-button-color, #2481cc);
  --button-text: var(--tg-theme-button-text-color, #fff);
  --secondary-bg: var(--tg-theme-secondary-bg-color, #f4f4f5);
  --section-bg: var(--tg-theme-section-bg-color, #fff);
  --separator: var(--tg-theme-section-separator-color, #e7e7e7);
  --radius: 10px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  font-size: 16px; line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
}
body { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
main#app { max-width: 600px; margin: 0 auto; padding: .5rem .75rem 1rem; }

a, a:visited, a:active, a:hover { color: inherit; text-decoration: none; }
button { font-family: inherit; }

.muted, .hint { color: var(--hint); }
.error { color: #e53935; padding: 1rem; }

/* ---------- page header ---------- */

.page-header {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem 0 .75rem;
}
.page-title-wrap { flex: 1; min-width: 0; }
.page-title {
  font-size: 1.25rem; font-weight: 600; margin: 0;
  line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.page-subtitle {
  font-size: .85rem; color: var(--hint);
  margin-top: .15rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.page-action {
  flex: 0 0 auto; width: 36px; height: 36px;
  border: 1px solid var(--separator); border-radius: 50%;
  background: var(--secondary-bg); color: var(--link);
  font-size: 1.1rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.page-action:active { background: var(--separator); }

/* ---------- search + filter ---------- */

.search-row { display: flex; gap: .35rem; margin: 0 0 .5rem; align-items: stretch; }
.search-row .search { margin: 0; flex: 1; }
.search-row .page-action { width: 40px; height: auto; }
.search {
  width: 100%; padding: .55rem .8rem; margin: 0 0 .5rem;
  background: var(--secondary-bg); color: var(--text);
  border: 1px solid transparent; border-radius: var(--radius);
  font-size: 1rem; outline: none;
  -webkit-appearance: none;
}
.search::placeholder { color: var(--hint); }
.search:focus { border-color: var(--button); background: var(--bg); }

.form-actions { display: flex; gap: .5rem; padding: 1rem 0; }
.primary-btn {
  flex: 1; padding: .75rem 1rem;
  background: var(--button); color: var(--button-text);
  border: 0; border-radius: var(--radius);
  font-size: 1rem; font-weight: 600; cursor: pointer;
}
.primary-btn:active { opacity: .85; }

.filter-row { display: flex; gap: .35rem; padding: 0 0 .75rem; }
.filter-row button {
  background: var(--secondary-bg); color: var(--text);
  border: 0; padding: .45rem 1rem; border-radius: 999px;
  font-size: .85rem; cursor: pointer; flex: 1;
  transition: background-color .12s;
}
.filter-row button:active { background: var(--separator); }
.filter-row button.active { background: var(--button); color: var(--button-text); }

/* ---------- cards ---------- */

.card {
  background: var(--section-bg);
  border: 1px solid var(--separator);
  border-radius: var(--radius); padding: .7rem .85rem; margin: .4rem 0;
  transition: background-color .12s;
}
.card:active { background: var(--secondary-bg); }
.card-row { display: flex; align-items: center; gap: .5rem; }
.card-name { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-sub { color: var(--hint); font-size: .85rem; margin-top: .15rem; }
.card-foot { display: flex; gap: .5rem; align-items: center; margin-top: 1rem; padding: .5rem 0; font-size: .85rem; color: var(--link); justify-content: center; }

/* ---------- pills ---------- */

.pill {
  display: inline-block; padding: .15rem .55rem; border-radius: 999px;
  font-size: .72rem; font-weight: 500; letter-spacing: .01em;
  border: 1px solid transparent;
  white-space: nowrap;
}
.pill-new           { background: rgba( 33,150,243,.15); color: #2196f3; border-color: rgba( 33,150,243,.3); }
.pill-contacted     { background: rgba(255,152,  0,.15); color: #ff9800; border-color: rgba(255,152,  0,.3); }
.pill-in-conversation { background: rgba( 76,175, 80,.15); color: #4caf50; border-color: rgba( 76,175, 80,.3); }
.pill-quoted        { background: rgba(126, 87,194,.15); color: #9575cd; border-color: rgba(126, 87,194,.3); }
.pill-active        { background: rgba(  0,188,212,.15); color: #00bcd4; border-color: rgba(  0,188,212,.3); }
.pill-won           { background: rgba( 56,142, 60,.18); color: #4caf50; border-color: rgba( 56,142, 60,.35); }
.pill-lost          { background: rgba(244, 67, 54,.15); color: #f44336; border-color: rgba(244, 67, 54,.3); }
.pill-dormant       { background: rgba(120,144,156,.18); color: #90a4ae; border-color: rgba(120,144,156,.35); }
.pill-overdue       { background: rgba(244, 67, 54,.18); color: #f44336; border-color: rgba(244, 67, 54,.35); }

/* ---------- detail ---------- */

.detail-section { margin: 1.25rem 0; }
.detail-section h3 {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--hint); margin: 0 0 .5rem; font-weight: 600;
}
.detail-grid { display: grid; grid-template-columns: 1fr; gap: .4rem; }
.field {
  background: var(--section-bg); border: 1px solid var(--separator);
  border-radius: var(--radius); padding: .55rem .75rem;
  border-left-width: 3px;
}
.field-label { font-size: .72rem; color: var(--hint); margin-bottom: .15rem; }
.field input, .field select, .field textarea {
  width: 100%; border: 0; background: transparent; color: var(--text);
  font-size: 1rem; font-family: inherit; padding: 0; outline: none;
}
.field textarea { min-height: 4em; resize: vertical; }
.field.dirty { border-color: var(--button); }
.field.invalid { border-color: #f44336; border-left-color: #f44336; }

/* Status field: colored left stripe matching the current status pill */
.field[data-status="new"]              { border-left-color: #2196f3; }
.field[data-status="contacted"]        { border-left-color: #ff9800; }
.field[data-status="in-conversation"]  { border-left-color: #4caf50; }
.field[data-status="quoted"]           { border-left-color: #9575cd; }
.field[data-status="active"]           { border-left-color: #00bcd4; }
.field[data-status="won"]              { border-left-color: #4caf50; }
.field[data-status="lost"]             { border-left-color: #f44336; }
.field[data-status="dormant"]          { border-left-color: #90a4ae; }

.field-with-action { display: flex; align-items: center; gap: .4rem; }
.field-with-action input { flex: 1; }
.field-link.hidden { display: none; }

.page-footer {
  margin-top: 1.5rem; padding: .75rem 0;
  text-align: center; font-size: .75rem; color: var(--hint);
  border-top: 1px solid var(--separator);
}

/* ---------- touches ---------- */

.touch { padding: .55rem 0; border-bottom: 1px solid var(--separator); }
.touch:last-child { border-bottom: 0; }
.touch-meta {
  font-size: .72rem; color: var(--hint);
  display: flex; gap: .5rem; margin-bottom: .15rem; flex-wrap: wrap;
}

/* ---------- actions ---------- */

.action {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem 0; border-bottom: 1px solid var(--separator);
}
.action:last-child { border-bottom: 0; }
.action-body { flex: 1; min-width: 0; }
.action-row { display: flex; align-items: center; gap: .5rem; }
.action-desc { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.action-meta { font-size: .72rem; color: var(--hint); margin-top: .15rem; }
.action-done, .action-cancel {
  flex: 0 0 auto; width: 36px; height: 36px;
  border: 1px solid var(--separator); border-radius: 50%;
  background: var(--secondary-bg); color: var(--text);
  font-size: 1.1rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.action-done { color: #4caf50; }
.action-cancel { color: var(--hint); font-size: 1.3rem; }
.action-done:active { background: rgba(76,175,80,.15); }
.action-cancel:active { background: var(--separator); }
.action-closing { opacity: .4; pointer-events: none; transition: opacity .15s; }

/* ---------- empty ---------- */

.empty { text-align: center; padding: 2rem 1rem; color: var(--hint); }