:root {
  color-scheme: dark;

  /* ── Surfaces ── */
  --page:        #13151b;
  --page-2:      #191c23;
  --card:        #1f2229;
  --card-soft:   #272b33;
  --card-raised: #2e333d;

  /* ── Ink ── */
  --ink:         #e8eaed;
  --ink-2:       #b0b4bc;
  --muted:       #6b7280;
  --quiet:       #3f4450;

  /* ── Lines ── */
  --line:        rgba(255 255 255 / 0.06);
  --line-strong: rgba(255 255 255 / 0.10);

  /* ── Accent  (soft teal) ── */
  --accent:      #2dd4bf;
  --accent-dim:  rgba(45 212 191 / 0.14);
  --accent-text: #0f766e;

  /* ── Semantic ── */
  --green:       #34d399;
  --green-soft:  rgba(52 211 153 / 0.13);
  --red:         #f87171;
  --red-soft:    rgba(248 113 113 / 0.12);
  --yellow:      #fbbf24;
  --yellow-soft: rgba(251 191 36 / 0.13);
  --blue:        #60a5fa;
  --blue-soft:   rgba(96 165 250 / 0.13);

  /* ── Shape ── */
  --radius:      16px;
  --radius-sm:   11px;
  --shadow:      0 8px 32px rgba(0 0 0 / 0.45);
  --shadow-soft: 0 2px 10px rgba(0 0 0 / 0.28);

  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", sans-serif;
}

/* ── Reset ── */
* { box-sizing: border-box; }
html, body { min-height: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.1; }
h2 { margin: 0 0 6px; font-size: 18px; font-weight: 600; line-height: 1.15; }
h3 { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.3; }

.muted { color: var(--muted); }
.eyebrow {
  margin: 0 0 5px;
  color: var(--quiet);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* ── Install modal ── */
.install-modal {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center;
  padding: 20px;
  background: rgba(0 0 0 / 0.68);
  backdrop-filter: blur(14px);
}
.install-card {
  width: min(340px, 100%);
  padding: 22px;
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.install-icon, .brand-mark {
  display: inline-grid; place-items: center;
  width: 42px; height: 42px;
  margin-bottom: 14px;
  border-radius: 13px;
  background: var(--accent);
  color: #fff;
  font-weight: 900; font-size: 12px;
}
.brand-dot {
  display: inline-grid; place-items: center;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--accent);
}
.install-steps { display: grid; gap: 6px; margin: 14px 0; }
.install-steps p {
  margin: 0; padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--card-soft); color: var(--muted);
}
.install-steps strong { color: var(--ink); }

/* ── Auth ── */
.auth-view {
  min-height: 100vh;
  display: grid; place-items: center;
  padding: 20px;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(45 212 191 / 0.06) 0%, transparent 56%),
    var(--page);
}
.auth-panel {
  width: min(400px, 100%);
  padding: 24px;
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.auth-panel h1 { max-width: 280px; }

/* ── Flex rows ── */
.auth-tabs, .filter-row, .chip-list, .topbar-actions, .field-row {
  display: flex; gap: 8px; align-items: center;
}
.auth-tabs {
  margin: 18px 0 12px; padding: 4px;
  border-radius: 14px; background: var(--card-soft);
}

/* ── Forms ── */
.auth-form, .surface-form, .detail-form, .sheet-form {
  display: grid; gap: 10px;
}
label {
  display: grid; gap: 5px;
  color: var(--muted);
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
}
input, select, textarea {
  width: 100%; min-height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--card-soft);
  color: var(--ink); padding: 10px 12px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
input[readonly] { color: var(--muted); }
textarea { min-height: 80px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--quiet); }
input:focus, select:focus, textarea:focus {
  border-color: rgba(45 212 191 / 0.50);
  box-shadow: 0 0 0 3px rgba(45 212 191 / 0.10);
}

/* ── Buttons ── */
.primary, .ghost, .soft, .icon-button, .filter, .chip, .seg, .nav-item {
  min-height: 40px; padding: 9px 14px;
  border: 0; border-radius: var(--radius-sm);
  transition: opacity .12s;
}
.primary { background: var(--accent); color: #fff; font-weight: 700; }
.primary:active { opacity: .85; }
.primary.compact, .ghost.compact { min-height: 34px; padding: 7px 10px; }

.ghost, .soft, .filter, .chip, .seg {
  background: var(--card-soft); color: var(--ink);
}
.soft.strong, .seg.active, .chip.active {
  background: var(--accent); color: #fff; font-weight: 700;
}
.filter.active { background: var(--accent); color: #fff; border-color: transparent; }
.seg { flex: 1; color: var(--muted); }
.danger-text { color: var(--red); }

.auth-error, .issued-login {
  margin: 10px 0 0; padding: 10px 12px; border-radius: var(--radius-sm);
}
.auth-error  { background: var(--red-soft);  color: #fca5a5; }
.issued-login{ background: var(--accent-dim); color: var(--ink); }

/* ── App shell ── */
.app-view { min-height: 100vh; display: block; }
.side-nav { display: none; }
.workbench {
  width: min(100%, 430px); min-height: 100vh;
  margin: 0 auto; padding: 12px 12px 90px;
}

/* ── Top bar ── */
.topbar {
  display: flex; align-items: center;
  justify-content: space-between; gap: 10px;
  margin: 0 0 14px;
}
.topbar h1 { font-size: 20px; }
.topbar-actions { gap: 6px; }
.topbar .primary.compact { display: none; }

.icon-button {
  width: 38px; min-width: 38px; padding: 0;
  display: inline-grid; place-items: center;
  background: var(--card-soft); color: var(--muted);
  border: 1px solid var(--line);
}

.install-strip { display: none; }

/* ── Content grid ── */
.content-grid, .content-grid.single {
  display: grid; grid-template-columns: 1fr; gap: 10px;
}
.list-pane, .wide-pane, .flight-pane { display: grid; gap: 10px; min-width: 0; }

.wide-pane, .settings-card, .surface-form, .project-row, .flight-row {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-soft);
}
.wide-pane { padding: 12px; }

/* ── Task hero — compact stat row ── */
.task-hero {
  display: flex; align-items: center;
  justify-content: space-between; gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}
.task-hero h2 {
  font-size: 30px; line-height: 1; margin: 0;
  color: var(--ink);
}
.task-hero p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }

.hero-top { display: flex; align-items: center; gap: 8px; }
.hero-top span {
  color: var(--quiet); font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.hero-refresh {
  width: 30px; height: 30px; border: 0; border-radius: 9px;
  background: var(--card-soft); color: var(--muted);
}
.hero-metrics { display: flex; gap: 5px; flex-wrap: wrap; }
.hero-metrics span {
  padding: 5px 9px; border-radius: 999px;
  background: var(--card-soft); color: var(--muted); font-size: 11px;
}
.hero-metrics strong { color: var(--ink); }

/* ── Flight hero ── */
.flight-hero {
  display: grid; grid-template-columns: minmax(0,1fr) auto;
  align-items: end; gap: 12px;
  min-height: 110px; padding: 16px;
  border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}
.flight-hero h2 { margin: 8px 0 0; font-size: 34px; line-height: 0.95; }
.flight-hero p:not(.eyebrow) { margin: 0; color: var(--muted); }
.flight-hero .primary { min-width: 96px; }

/* ── Quick add ── */
.quick-add { display: grid; gap: 7px; }
.quick-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.quick-head > span { color: var(--muted); font-size: 12px; font-weight: 600; }
.quick-private {
  min-height: 32px; padding: 0 11px; border: 0; border-radius: 10px;
  background: var(--card-soft); color: var(--muted); font-size: 12px; font-weight: 600;
}
.quick-input {
  min-height: 76px; width: 100%;
  display: grid;
  grid-template-columns: minmax(0,1fr) 36px;
  grid-template-rows: 1fr auto;
  align-items: center; gap: 2px 10px;
  padding: 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--card); color: var(--ink);
  text-align: left; box-shadow: var(--shadow-soft);
}
.quick-input span  { grid-column: 1; align-self: end; font-size: 14px; font-weight: 600; }
.quick-input small { grid-column: 1; color: var(--muted); font-size: 11px; }
.quick-input strong {
  grid-column: 2; grid-row: 1 / span 2;
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 12px;
  background: var(--accent); color: #fff; font-size: 20px; line-height: 1;
}

/* ── Toolbar / search / filters ── */
.summary-band { display: none; }
.toolbar { display: grid; gap: 7px; min-width: 0; }

.search {
  min-height: 42px;
  background: var(--card-soft);
  border: 1px solid var(--line);
}

.filter-row {
  width: 100%; flex-wrap: nowrap; overflow-x: auto;
  padding-bottom: 2px; scrollbar-width: none;
  gap: 5px;
}
.filter-row::-webkit-scrollbar { display: none; }

.filter {
  min-height: 30px; padding: 6px 12px;
  white-space: nowrap; flex-shrink: 0;
  color: var(--muted); font-size: 12px;
  background: var(--card-soft); border: 1px solid var(--line);
  border-radius: 999px;
}

/* ── Task list ── */
.task-list, .project-list, .flight-list { display: grid; gap: 7px; }

.task-row {
  display: grid; grid-template-columns: 20px minmax(0,1fr);
  gap: 10px; padding: 12px 12px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  cursor: pointer;
  transition: border-color .12s;
}
.task-row:hover    { border-color: var(--line-strong); }
.task-row.active   { border-color: rgba(45 212 191 / 0.35); }

.check {
  width: 20px; height: 20px; margin-top: 2px;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%; background: var(--card-soft);
  flex-shrink: 0;
}
.check.done {
  border-color: var(--green);
  background: var(--green);
  box-shadow: inset 0 0 0 4px var(--card);
}

.task-main { min-width: 0; }
.task-title-row {
  display: grid; grid-template-columns: minmax(0,1fr) auto;
  gap: 8px; align-items: start;
}
.task-title-row h3, .task-main p { overflow-wrap: anywhere; }
.task-main p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }

.task-tags {
  grid-column: 2; display: flex; gap: 4px;
  justify-content: start; flex-wrap: wrap; margin-top: 7px;
}

/* ── Pills / tags ── */
.pill, .tag {
  display: inline-flex; align-items: center;
  min-height: 20px; border-radius: 999px;
  padding: 2px 7px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.03em;
}
.pill   { background: var(--card-soft); color: var(--muted); }

.pill.private, .tag.private  { color: var(--blue);   background: var(--blue-soft); }
.pill.team                   { color: var(--green);  background: var(--green-soft); }

.tag   { background: var(--card-soft); color: var(--muted); }
.tag.priority-p1, .tag.danger { color: var(--red);    background: var(--red-soft); }
.tag.priority-p2, .tag.priority-p3 { color: var(--green);  background: var(--green-soft); }

.status-work { color: var(--green);  background: var(--green-soft); }
.status-hold { color: var(--yellow); background: var(--yellow-soft); }
.status-done { color: var(--muted);  background: var(--card-soft); }

/* ── Sheets ── */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(0 0 0 / 0.58); backdrop-filter: blur(6px);
}
.create-sheet, .task-detail-sheet {
  position: fixed; z-index: 41;
  left: 50%; bottom: 8px;
  width: min(430px, calc(100vw - 16px));
  max-height: calc(100vh - 24px);
  overflow: auto;
  transform: translateX(-50%);
  padding: 16px;
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.detail-head, .section-line, .sheet-topline {
  display: flex; align-items: center;
  justify-content: space-between; gap: 10px; margin-bottom: 12px;
}
.task-detail-sheet h2 { margin-bottom: 6px; }
.sheet-form { border: 0; background: transparent; box-shadow: none; padding: 0; }
.sheet-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px;
}
.sheet-submit { min-height: 46px; }

.action-grid.segmented {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 3px; margin: 12px 0; padding: 4px;
  border-radius: 14px; background: var(--card-soft);
}
.action-grid.segmented .soft {
  min-height: 34px; padding: 7px 5px;
  background: transparent; color: var(--muted); font-size: 12px;
}
.action-grid.segmented .soft.strong { background: var(--accent); color: #fff; }

.detail-form {
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 8px; margin-bottom: 12px;
}
.detail-form button { width: 100%; }
.field-row { align-items: stretch; margin-bottom: 12px; }
.field-row label { flex: 1; }
.assignees, .subtasks { padding-top: 12px; border-top: 1px solid var(--line); }
.chip-list { display: flex; flex-wrap: wrap; gap: 5px; }

.subtask {
  display: flex; justify-content: space-between; gap: 8px;
  margin: 0 0 5px; padding: 9px 10px;
  background: var(--card-soft); border-radius: var(--radius-sm);
}
.archive-inline { width: 100%; margin-top: 8px; }

/* ── Surface form ── */
.surface-form { grid-template-columns: 1fr; gap: 9px; padding: 12px; margin-bottom: 8px; }
.flight-create-sheet .surface-form {
  padding: 0; margin: 0; border: 0; border-radius: 0;
  background: transparent; box-shadow: none;
}
.flight-form { gap: 8px; }
.flight-form input, .flight-form select { min-height: 42px; }
.flight-form textarea { min-height: 68px; }
.flight-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; }
.surface-form textarea, .surface-form button { grid-column: 1 / -1; }

/* ── Project / flight cards ── */
.project-row, .flight-row, .settings-card { padding: 13px; }
.project-row p, .flight-row p { margin-bottom: 0; color: var(--muted); }
.flight-note {
  margin-top: 7px; padding: 8px 10px;
  border-radius: var(--radius-sm); background: var(--card-soft);
}
.project-meta, .flight-stats {
  display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px;
  color: var(--muted); font-size: 11px;
}
.project-meta span, .flight-stats span {
  padding: 4px 8px; border-radius: 999px; background: var(--card-soft);
}

/* ── Media ── */
.media-strip { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.media-chip {
  width: 50px; height: 40px; overflow: hidden;
  display: grid; place-items: center;
  border-radius: var(--radius-sm); background: var(--card-soft);
  color: var(--muted); font-size: 10px; font-weight: 700; text-decoration: none;
}
.media-chip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-chip.video { background: var(--card-raised); color: var(--accent); }
.media-upload {
  position: relative; min-height: 72px; padding: 11px;
  border: 1px dashed var(--line-strong); border-radius: 16px; background: var(--card-soft);
}
.media-upload strong {
  width: max-content; padding: 6px 11px; border-radius: 999px;
  background: var(--accent); color: #fff;
}
.media-upload small { color: var(--muted); }
.media-upload input {
  position: absolute; width: 1px; height: 1px; min-height: 0;
  padding: 0; border: 0; opacity: 0; pointer-events: none;
}

/* ── Settings / admin ── */
.settings-pane { display: grid; gap: 10px; }
.admin-pane    { display: grid; gap: 11px; }

.admin-hero {
  min-height: 100px; padding: 16px;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--card); box-shadow: var(--shadow-soft);
}
.admin-hero h2 { margin: 8px 0 0; font-size: 34px; line-height: 1; }
.admin-hero p:not(.eyebrow) { margin: 0; color: var(--muted); }
.admin-section { display: grid; gap: 8px; }

.approval-card, .user-card {
  display: grid; gap: 8px; padding: 13px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); box-shadow: var(--shadow-soft);
}
.approval-card p, .user-card p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.admin-controls, .admin-actions {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px;
}
.admin-controls select { min-height: 40px; }
.empty-state {
  padding: 22px 12px;
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
  color: var(--muted); text-align: center;
}

/* ── Bottom nav ── */
.mobile-nav {
  position: fixed; left: 50%; bottom: 10px; z-index: 30;
  width: min(340px, calc(100vw - 28px)); transform: translateX(-50%);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
  gap: 2px; padding: 5px;
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  background: rgba(31 34 41 / 0.96);
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px);
}
.mobile-nav .nav-item {
  min-height: 44px; display: grid; place-items: center;
  padding: 4px; background: transparent; color: var(--muted);
}
.mobile-nav .nav-item span {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%; font-size: 16px;
}
.mobile-nav .nav-item strong { display: none; }
.mobile-nav .nav-item.active span { background: var(--accent); color: #fff; }

/* ── Toast / boot error ── */
.toast, .boot-error {
  position: fixed; z-index: 90;
  left: 50%; bottom: 76px; transform: translateX(-50%);
  max-width: min(370px, calc(100vw - 24px));
  padding: 11px 14px;
  border: 1px solid var(--line-strong); border-radius: 14px;
  background: var(--card); color: var(--ink); box-shadow: var(--shadow);
  font-size: 13px;
}
.boot-error { display: grid; gap: 8px; }

/* ── Desktop ── */
@media (min-width: 900px) {
  body { display: grid; place-items: start center; }
  .app-view { width: 100%; }
  .workbench { padding-top: 24px; }
}

@media (max-width: 390px) {
  .workbench { padding-inline: 10px; }
  h1 { font-size: 20px; }
  .sheet-grid, .detail-form, .field-row { grid-template-columns: 1fr; }
  .field-row { display: grid; }
}