/* =====================================================================
   Building Tasks — mobile-first UI
   ===================================================================== */

:root {
  --bg:          #f6f7f9;
  --surface:     #ffffff;
  --surface-2:   #f1f3f7;
  --border:      #e3e7ee;
  --text:        #0f172a;
  --text-muted:  #64748b;
  --text-faint:  #94a3b8;
  --primary:     #4f46e5;
  --primary-ink: #ffffff;
  --primary-soft:#eef2ff;
  --success:     #16a34a;
  --warning:     #f59e0b;
  --danger:      #dc2626;
  --shadow-sm:   0 1px 2px rgba(15, 23, 42, .06);
  --shadow:      0 4px 16px rgba(15, 23, 42, .08);
  --shadow-lg:   0 12px 32px rgba(15, 23, 42, .16);
  --radius:      14px;
  --radius-sm:   10px;
  --radius-lg:   20px;
  --tabbar-h:    58px;

  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg:          #0b1020;
  --surface:     #151b2d;
  --surface-2:   #1d2438;
  --border:      #2a3350;
  --text:        #e8ecf6;
  --text-muted:  #98a3bd;
  --text-faint:  #6b7899;
  --primary:     #7c83ff;
  --primary-ink: #0b1020;
  --primary-soft:#232a4a;
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, .4);
  --shadow:      0 4px 16px rgba(0, 0, 0, .45);
  --shadow-lg:   0 12px 32px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #0b1020;
    --surface:     #151b2d;
    --surface-2:   #1d2438;
    --border:      #2a3350;
    --text:        #e8ecf6;
    --text-muted:  #98a3bd;
    --text-faint:  #6b7899;
    --primary:     #7c83ff;
    --primary-ink: #0b1020;
    --primary-soft:#232a4a;
    --shadow-sm:   0 1px 2px rgba(0, 0, 0, .4);
    --shadow:      0 4px 16px rgba(0, 0, 0, .45);
    --shadow-lg:   0 12px 32px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
}

/* Stop iOS zooming when a field is focused. */
input, select, textarea, button { font-family: inherit; font-size: 16px; }

a { color: var(--primary); text-decoration: none; }

h1, h2, h3, h4 { margin: 0 0 .5rem; line-height: 1.25; font-weight: 650; }
h1 { font-size: 1.4rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p  { margin: 0 0 .75rem; }

/* ---------- Shell ---------- */

.app-shell { min-height: 100dvh; display: flex; flex-direction: column; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
  padding-top: var(--safe-top);
}

.topbar-inner {
  height: 52px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

.brand { display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 700; }
.brand-mark { width: 30px; height: 30px; border-radius: 8px; display: block; }
.brand-name { font-size: 1rem; letter-spacing: -.01em; }

.topbar-actions { display: flex; align-items: center; gap: 8px; }

.icon-btn {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 50%;
  cursor: pointer;
  font-size: 15px;
  padding: 0;
}
.icon-btn:active { transform: scale(.94); }

:root[data-theme="dark"] .theme-icon-dark,
.theme-icon-light { display: none; }
:root[data-theme="dark"] .theme-icon-light { display: inline; }
.theme-icon-dark { display: inline; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-icon-dark  { display: none; }
  :root:not([data-theme="light"]) .theme-icon-light { display: inline; }
}

.avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--avatar-color, var(--primary));
  color: #fff;
  display: grid; place-items: center;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .02em;
  flex-shrink: 0;
}

.main {
  flex: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 14px calc(var(--tabbar-h) + var(--safe-bottom) + 78px);
}

/* ---------- Tab bar ---------- */

.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 45;
  display: flex;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-top: 1px solid var(--border);
  padding-bottom: var(--safe-bottom);
}

.tab {
  flex: 1;
  min-width: 0;
  height: var(--tabbar-h);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px;
  color: var(--text-faint);
  font-size: .64rem;
  font-weight: 600;
  -webkit-tap-highlight-color: transparent;
}
.tab-icon  { font-size: 1.18rem; line-height: 1; }
.tab-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.tab.is-active { color: var(--primary); }
.tab:active { background: var(--surface-2); }

/* ---------- Floating action button ---------- */

.fab {
  position: fixed;
  right: 16px;
  bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 16px);
  z-index: 46;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--primary-ink);
  display: grid; place-items: center;
  font-size: 1.75rem;
  font-weight: 300;
  box-shadow: var(--shadow-lg);
  border: none;
  line-height: 1;
  padding-bottom: 3px;
}
.fab:active { transform: scale(.93); }

/* ---------- Cards & surfaces ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 14px;
  margin-bottom: 12px;
}
.card-tight { padding: 10px 12px; }
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
}
.card-head h2, .card-head h3 { margin: 0; }

.section-title {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-faint);
  font-weight: 700;
  margin: 18px 2px 8px;
}

/* ---------- KPI grid ---------- */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 6px;
}
@media (min-width: 640px) { .kpi-grid { grid-template-columns: repeat(4, 1fr); } }

.kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  min-width: 0;
}
.kpi::after {
  content: "";
  position: absolute; inset: 0 auto 0 0;
  width: 3px;
  background: var(--kpi-color, var(--primary));
}
.kpi-label {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-faint); font-weight: 700;
  display: flex; align-items: center; gap: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpi-value {
  font-size: 1.65rem; font-weight: 700; line-height: 1.15;
  margin-top: 4px;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.kpi-sub { font-size: .72rem; color: var(--text-muted); margin-top: 1px; }

/* Progress ring */
.ring-wrap { display: flex; align-items: center; gap: 14px; }
.ring { flex-shrink: 0; }
.ring-track { stroke: var(--surface-2); }
.ring-fill  { stroke: var(--success); transition: stroke-dasharray .8s cubic-bezier(.22,1,.36,1); }
.ring-text  { font-size: 15px; font-weight: 700; fill: var(--text); }

/* Bars */
.bar-row { margin-bottom: 9px; }
.bar-row:last-child { margin-bottom: 0; }
.bar-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .8rem; margin-bottom: 4px; gap: 8px;
}
.bar-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.bar-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-count { color: var(--text-muted); font-weight: 600; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.bar-track { height: 7px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.bar-fill  { height: 100%; border-radius: 99px; transition: width .7s cubic-bezier(.22,1,.36,1); }

/* Trend chart */
.trend { display: flex; align-items: stretch; gap: 6px; height: 120px; padding-top: 8px; }
/* The column must be full height so the bars' percentage heights have a basis. */
.trend-col { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.trend-bars { flex: 1; min-height: 0; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.trend-bar {
  width: 46%; border-radius: 4px 4px 0 0; min-height: 3px;
  transition: height .7s cubic-bezier(.22,1,.36,1);
}
.trend-bar.created { background: var(--primary); opacity: .45; }
.trend-bar.done    { background: var(--success); }
.trend-label { font-size: .64rem; color: var(--text-faint); font-weight: 600; }
.legend { display: flex; gap: 14px; font-size: .72rem; color: var(--text-muted); margin-top: 8px; }
.legend-item { display: flex; align-items: center; gap: 5px; }
.legend-dot { width: 9px; height: 9px; border-radius: 3px; }

/* ---------- Badges & chips ---------- */

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: .7rem;
  font-weight: 650;
  white-space: nowrap;
  background: color-mix(in srgb, var(--badge-color, var(--primary)) 15%, transparent);
  color: var(--badge-color, var(--primary));
  border: 1px solid color-mix(in srgb, var(--badge-color, var(--primary)) 30%, transparent);
}
.badge-solid { background: var(--badge-color); color: #fff; border-color: transparent; }

.chip-row { display: flex; gap: 7px; overflow-x: auto; padding: 2px 0 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.chip-row::-webkit-scrollbar { display: none; }
.chip {
  flex-shrink: 0;
  padding: 6px 13px;
  border-radius: 99px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.chip.is-active { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }

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

.job-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--job-color, var(--primary));
  border-radius: var(--radius-sm);
  padding: 11px 12px;
  margin-bottom: 9px;
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
.job-card:active { background: var(--surface-2); }
.job-title { font-weight: 640; font-size: .93rem; margin-bottom: 4px; line-height: 1.35; }
.job-meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px 10px;
  font-size: .72rem; color: var(--text-muted);
}
.job-meta-item { display: flex; align-items: center; gap: 4px; }
.job-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }

/* ---------- Kanban ---------- */

.board-scroll {
  display: flex;
  gap: 11px;
  overflow-x: auto;
  padding-bottom: 10px;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.board-col {
  flex: 0 0 82vw;
  max-width: 320px;
  scroll-snap-align: start;
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: 9px;
  min-height: 130px;
  border: 1px solid transparent;
  transition: border-color .15s, background .15s;
}
@media (min-width: 760px) { .board-col { flex: 0 0 270px; } }
.board-col.drop-target { border-color: var(--primary); background: var(--primary-soft); }
.board-col-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 4px 9px;
  font-size: .78rem; font-weight: 700;
}
.board-col-count {
  background: var(--surface); color: var(--text-muted);
  border-radius: 99px; padding: 1px 8px; font-size: .7rem;
  border: 1px solid var(--border);
}
.board-card { cursor: grab; touch-action: manipulation; }
.board-card.dragging { opacity: .45; }
.board-empty {
  text-align: center; color: var(--text-faint);
  font-size: .76rem; padding: 18px 8px;
}

/* ---------- Calendar ---------- */

.cal-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px; gap: 8px;
}
.cal-title { font-weight: 700; font-size: 1.02rem; }
.cal-nav { display: flex; gap: 6px; }

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.cal-dow {
  text-align: center; font-size: .64rem; font-weight: 700;
  color: var(--text-faint); padding: 4px 0; text-transform: uppercase;
}
.cal-day {
  aspect-ratio: 1;
  border-radius: 9px;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 3px;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  min-width: 0;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.cal-day.other-month { opacity: .35; }
.cal-day.is-today { border-color: var(--primary); border-width: 2px; }
.cal-day.is-selected { background: var(--primary-soft); border-color: var(--primary); }
.cal-day.drop-target { background: var(--primary-soft); border-color: var(--primary); border-style: dashed; }
.cal-daynum { font-size: .72rem; font-weight: 650; }
.cal-dots { display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; }
.cal-dot { width: 5px; height: 5px; border-radius: 50%; }
.cal-more { font-size: .55rem; color: var(--text-faint); font-weight: 700; }

/* ---------- Forms ---------- */

.field { margin-bottom: 13px; }
.field label, .label {
  display: block;
  font-size: .78rem;
  font-weight: 650;
  margin-bottom: 5px;
  color: var(--text-muted);
}
.input, .select, .textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}
.textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hint { font-size: .72rem; color: var(--text-faint); margin-top: 4px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 17px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-weight: 650;
  font-size: .9rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  text-align: center;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.btn-danger  { background: var(--danger);  border-color: var(--danger);  color: #fff; }
.btn-ghost   { background: transparent; border-color: transparent; color: var(--primary); }
.btn-block   { display: flex; width: 100%; }
.btn-sm      { padding: 7px 12px; font-size: .8rem; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.btn-row { display: flex; gap: 9px; flex-wrap: wrap; }
.btn-row .btn { flex: 1; min-width: 120px; }

/* Segmented control */
.segmented {
  display: flex;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 3px;
}
.segmented button {
  flex: 1;
  padding: 8px 6px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: 8px;
  font-weight: 650;
  font-size: .8rem;
  cursor: pointer;
  min-width: 0;
}
.segmented button.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

/* Status picker */
.status-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.status-opt {
  display: flex; align-items: center; gap: 7px;
  padding: 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text);
  text-align: left;
}
.status-opt.is-active {
  border-color: var(--opt-color);
  background: color-mix(in srgb, var(--opt-color) 12%, transparent);
  color: var(--opt-color);
}

/* ---------- Photos ---------- */

.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.photo-thumb {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-remove {
  position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .62);
  color: #fff; border: none;
  font-size: 13px; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
  padding: 0;
}
.photo-phase {
  position: absolute; left: 4px; bottom: 4px;
  background: rgba(0, 0, 0, .62); color: #fff;
  font-size: .58rem; font-weight: 700;
  padding: 1px 6px; border-radius: 99px;
  text-transform: uppercase; letter-spacing: .03em;
}
.photo-add {
  aspect-ratio: 1;
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-muted);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  cursor: pointer;
  font-size: .68rem; font-weight: 600;
}
.photo-add span:first-child { font-size: 1.4rem; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0, 0, 0, .93);
  display: none; align-items: center; justify-content: center;
  padding: 20px;
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 100%; max-height: 88vh; border-radius: 8px; }
.lightbox-close {
  position: absolute;
  top: calc(var(--safe-top) + 14px); right: 14px;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255, 255, 255, .16); color: #fff;
  border: none; font-size: 20px; cursor: pointer;
}

/* ---------- Comments & timeline ---------- */

.comment { display: flex; gap: 9px; margin-bottom: 13px; }
.comment-body { flex: 1; min-width: 0; }
.comment-head { display: flex; align-items: baseline; gap: 7px; margin-bottom: 2px; flex-wrap: wrap; }
.comment-author { font-weight: 650; font-size: .83rem; }
.comment-time { font-size: .68rem; color: var(--text-faint); }
.comment-text { font-size: .87rem; white-space: pre-wrap; overflow-wrap: anywhere; }

.timeline { border-left: 2px solid var(--border); padding-left: 13px; margin-left: 5px; }
.timeline-item { position: relative; padding-bottom: 12px; font-size: .78rem; color: var(--text-muted); }
.timeline-item::before {
  content: ""; position: absolute;
  left: -19px; top: 6px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--border);
}

/* ---------- Checklist ---------- */

.check-item {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.check-item:last-child { border-bottom: none; }
.check-item input[type="checkbox"] { width: 19px; height: 19px; margin-top: 1px; flex-shrink: 0; accent-color: var(--primary); }
.check-item.done label { text-decoration: line-through; color: var(--text-faint); }
.check-item label { flex: 1; font-size: .87rem; cursor: pointer; overflow-wrap: anywhere; }

/* ---------- Misc ---------- */

.empty {
  text-align: center;
  padding: 44px 20px;
  color: var(--text-muted);
}
.empty-icon { font-size: 2.6rem; margin-bottom: 10px; opacity: .55; }

.flash {
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  font-size: .87rem;
  font-weight: 600;
  border: 1px solid;
}
.flash-success { background: color-mix(in srgb, var(--success) 12%, transparent); border-color: color-mix(in srgb, var(--success) 32%, transparent); color: var(--success); }
.flash-error   { background: color-mix(in srgb, var(--danger) 12%, transparent);  border-color: color-mix(in srgb, var(--danger) 32%, transparent);  color: var(--danger); }
.flash-info    { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }

.toast-host {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 78px);
  z-index: 90;
  display: flex; flex-direction: column; gap: 7px;
  width: max-content; max-width: 92vw;
  pointer-events: none;
}
.toast {
  background: var(--text); color: var(--bg);
  padding: 10px 16px; border-radius: 99px;
  font-size: .83rem; font-weight: 600;
  box-shadow: var(--shadow-lg);
  animation: toast-in .22s ease;
}
.toast.err { background: var(--danger); color: #fff; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }

.sheet-backdrop {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(15, 23, 42, .55);
  display: none;
}
.sheet-backdrop.is-open { display: block; }
.sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 81;
  background: var(--surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 16px 14px calc(16px + var(--safe-bottom));
  max-height: 86dvh; overflow-y: auto;
  transform: translateY(100%);
  transition: transform .26s cubic-bezier(.22, 1, .36, 1);
  box-shadow: var(--shadow-lg);
}
.sheet.is-open { transform: translateY(0); }
.sheet-handle {
  width: 38px; height: 4px;
  background: var(--border);
  border-radius: 99px;
  margin: 0 auto 13px;
}

.list-row {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.list-row:last-child { border-bottom: none; }
.list-row-main { flex: 1; min-width: 0; }
.list-row-title { font-weight: 620; font-size: .9rem; }
.list-row-sub { font-size: .74rem; color: var(--text-muted); }
.list-row-chevron { color: var(--text-faint); flex-shrink: 0; }

.stack > * + * { margin-top: 10px; }
.muted { color: var(--text-muted); }
.small { font-size: .78rem; }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spacer { flex: 1; }
.hidden { display: none !important; }

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; border-collapse: collapse; font-size: .84rem; }
table.data th, table.data td { padding: 9px 8px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
table.data th { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); font-weight: 700; }

/* ---------- Auth pages ---------- */

.auth-wrap {
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: calc(24px + var(--safe-top)) 18px calc(24px + var(--safe-bottom));
}
.auth-card { width: 100%; max-width: 400px; }
.auth-logo { text-align: center; margin-bottom: 22px; }
.auth-back { display: inline-block; margin-bottom: 18px; font-size: .9rem; color: var(--text-muted); }
.auth-logo-mark { width: 76px; height: 76px; display: block; margin: 0 auto;
  filter: drop-shadow(0 10px 24px rgba(79, 70, 229, .35)); }
.auth-logo h1 { margin: 6px 0 2px; font-size: 1.35rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}