viveworker 0.1.0

package/web/app.css

@@ -0,0 +1,2303 @@
+:root {
+  color-scheme: dark;
+  --font-ui: "Avenir Next", "SF Pro Rounded", "SF Pro Text", "Helvetica Neue", sans-serif;
+  --bg: #091015;
+  --bg-soft: #0f1921;
+  --panel: rgba(17, 27, 35, 0.94);
+  --panel-strong: rgba(13, 21, 28, 0.98);
+  --card: rgba(20, 31, 40, 0.96);
+  --card-soft: rgba(25, 38, 48, 0.82);
+  --text: #f5fbff;
+  --muted: #9cb5c5;
+  --line: rgba(156, 181, 197, 0.16);
+  --line-strong: rgba(156, 181, 197, 0.24);
+  --accent: #2f8f67;
+  --accent-soft: rgba(47, 143, 103, 0.18);
+  --danger: #c85c5c;
+  --danger-soft: rgba(200, 92, 92, 0.16);
+  --choice: #4f83d8;
+  --choice-soft: rgba(79, 131, 216, 0.16);
+  --completion: #d2aa63;
+  --completion-soft: rgba(210, 170, 99, 0.14);
+  --radius-shell: 28px;
+  --radius-card: 22px;
+  --radius-pill: 999px;
+  --shadow-shell: 0 24px 60px rgba(0, 0, 0, 0.22);
+  --shadow-card: 0 18px 44px rgba(0, 0, 0, 0.18);
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  background: var(--bg);
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  overflow-x: hidden;
+  font-family: var(--font-ui);
+  color: var(--text);
+  background:
+    radial-gradient(circle at top, rgba(47, 143, 103, 0.22), transparent 28%),
+    radial-gradient(circle at bottom right, rgba(79, 131, 216, 0.12), transparent 24%),
+    linear-gradient(180deg, #081015 0%, var(--bg) 100%);
+}
+
+a {
+  color: #8fd7ff;
+}
+
+button,
+input {
+  font: inherit;
+}
+
+code {
+  padding: 0.18rem 0.38rem;
+  border-radius: 8px;
+  background: rgba(156, 181, 197, 0.12);
+}
+
+.app-shell {
+  min-height: 100vh;
+  padding:
+    max(1rem, env(safe-area-inset-top))
+    1rem
+    calc(8.6rem + env(safe-area-inset-bottom))
+    1rem;
+}
+
+.app-shell--mobile:not(.app-shell--detail)::after {
+  content: "";
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: calc(9.5rem + env(safe-area-inset-bottom));
+  z-index: 15;
+  pointer-events: none;
+  background:
+    linear-gradient(
+      180deg,
+      rgba(9, 16, 21, 0) 0%,
+      rgba(9, 16, 21, 0.14) 18%,
+      rgba(9, 16, 21, 0.34) 42%,
+      rgba(9, 16, 21, 0.72) 100%
+    );
+  -webkit-backdrop-filter: blur(30px) saturate(1.08);
+  backdrop-filter: blur(30px) saturate(1.08);
+  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 34%, rgba(0, 0, 0, 1) 100%);
+  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 34%, rgba(0, 0, 0, 1) 100%);
+}
+
+.app-shell--detail {
+  padding-bottom: max(1rem, env(safe-area-inset-bottom));
+}
+
+.app-header {
+  display: grid;
+  gap: 0.9rem;
+  margin-bottom: 1.2rem;
+}
+
+.mobile-topbar {
+  display: flex;
+  align-items: center;
+  gap: 0.85rem;
+  min-height: 3.1rem;
+  margin-top: 0.8rem;
+  margin-bottom: 1.2rem;
+}
+
+.mobile-topbar--detail {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: 0.75rem;
+  position: sticky;
+  top: 0;
+  z-index: 24;
+  margin:
+    calc(-1 * max(1rem, env(safe-area-inset-top)))
+    -0.78rem
+    0.75rem;
+  padding:
+    max(0.7rem, env(safe-area-inset-top))
+    0.78rem
+    0.8rem;
+  background:
+    linear-gradient(180deg, rgba(9, 16, 21, 0.92), rgba(9, 16, 21, 0.72)),
+    rgba(9, 16, 21, 0.6);
+  -webkit-backdrop-filter: blur(22px) saturate(1.06);
+  backdrop-filter: blur(22px) saturate(1.06);
+  border-bottom: 1px solid rgba(156, 181, 197, 0.12);
+  margin-bottom: 0.6rem;
+}
+
+.mobile-topbar__heading {
+  min-width: 0;
+  display: grid;
+  gap: 0.62rem;
+}
+
+.mobile-topbar__heading--detail {
+  gap: 0.2rem;
+  flex: 1 1 auto;
+}
+
+.mobile-topbar__title {
+  margin: 0;
+  font-size: 1.55rem;
+  line-height: 1.05;
+  letter-spacing: -0.03em;
+}
+
+.mobile-topbar__title--detail {
+  font-size: 1rem;
+  line-height: 1.2;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.mobile-topbar__eyebrow {
+  color: var(--muted);
+  font-size: 0.78rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.mobile-topbar__eyebrow--kind {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.38rem;
+}
+
+.mobile-topbar__eyebrow-icon {
+  width: 0.95rem;
+  height: 0.95rem;
+  display: inline-flex;
+}
+
+.mobile-topbar__back {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  min-height: 2.55rem;
+  min-width: 2.55rem;
+  padding: 0.55rem 0.82rem;
+  flex-shrink: 0;
+  white-space: nowrap;
+  border: 1px solid rgba(156, 181, 197, 0.16);
+  border-radius: 16px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04)),
+    rgba(255, 255, 255, 0.03);
+  color: var(--text);
+  font-weight: 700;
+  line-height: 1;
+  -webkit-backdrop-filter: blur(16px) saturate(1.02);
+  backdrop-filter: blur(16px) saturate(1.02);
+  box-shadow:
+    0 10px 22px rgba(0, 0, 0, 0.14),
+    inset 0 1px 0 rgba(255, 255, 255, 0.05);
+}
+
+.mobile-topbar__back-icon {
+  width: 0.95rem;
+  height: 0.95rem;
+  display: inline-flex;
+}
+
+.mobile-topbar__back-label {
+  display: inline-block;
+  transform: translateY(-0.01em);
+}
+
+.mobile-topbar__back-icon svg,
+.mobile-topbar__eyebrow-icon svg,
+.tab-icon svg,
+.item-card__chevron svg,
+.type-pill__icon svg,
+.item-card__intent-icon svg,
+.detail-intent__icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.brand-lockup {
+  display: grid;
+  gap: 0.7rem;
+}
+
+.brand-copy {
+  display: grid;
+  gap: 0.35rem;
+}
+
+.brand-title,
+.hero-title,
+.screen-title,
+.detail-title {
+  margin: 0;
+  letter-spacing: -0.03em;
+}
+
+.brand-title {
+  font-size: clamp(1.5rem, 4vw, 1.9rem);
+}
+
+.brand-subtitle,
+.screen-copy,
+.hero-copy,
+.muted {
+  color: var(--muted);
+}
+
+.brand-subtitle,
+.hero-copy,
+.screen-copy {
+  margin: 0;
+  line-height: 1.55;
+}
+
+.eyebrow-pill,
+.type-pill,
+.status-pill,
+.count-chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 1.9rem;
+  padding: 0.32rem 0.7rem;
+  border-radius: var(--radius-pill);
+  font-size: 0.78rem;
+  font-weight: 700;
+  letter-spacing: 0.03em;
+}
+
+.type-pill {
+  gap: 0.38rem;
+}
+
+.type-pill__icon {
+  width: 0.92rem;
+  height: 0.92rem;
+  display: inline-flex;
+  flex: 0 0 auto;
+}
+
+.eyebrow-pill {
+  width: fit-content;
+  color: #eaf7ff;
+  background: rgba(156, 181, 197, 0.16);
+}
+
+.eyebrow-pill--quiet {
+  font-size: 0.74rem;
+  min-height: 1.65rem;
+  padding: 0.24rem 0.6rem;
+}
+
+.type-pill--approval {
+  background: var(--accent-soft);
+  color: #c7f5de;
+}
+
+.type-pill--plan {
+  background: rgba(143, 173, 255, 0.18);
+  color: #d9e4ff;
+}
+
+.type-pill--choice {
+  background: var(--choice-soft);
+  color: #dbe8ff;
+}
+
+.type-pill--completion {
+  background: var(--completion-soft);
+  color: #faebcb;
+}
+
+.type-pill--neutral {
+  background: rgba(156, 181, 197, 0.14);
+  color: #edf7ff;
+}
+
+.status-pill--pending {
+  background: rgba(255, 255, 255, 0.08);
+  color: #edf7ff;
+}
+
+.status-pill--completed {
+  background: rgba(255, 255, 255, 0.08);
+  color: #d8e7f1;
+}
+
+.count-chip {
+  min-width: 2.2rem;
+  background: rgba(255, 255, 255, 0.08);
+  color: #edf7ff;
+}
+
+.install-banner,
+.surface,
+.surface-card,
+.onboarding-card,
+.detail-empty {
+  border: 1px solid var(--line);
+  border-radius: var(--radius-card);
+  background: var(--panel);
+  box-shadow: var(--shadow-card);
+}
+
+.install-banner {
+  display: grid;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+  padding: 0.9rem 0.95rem 0.98rem;
+  background:
+    linear-gradient(180deg, rgba(47, 143, 103, 0.18), rgba(15, 25, 33, 0.92)),
+    var(--panel);
+}
+
+.install-banner--push {
+  background:
+    linear-gradient(180deg, rgba(79, 131, 216, 0.18), rgba(15, 25, 33, 0.92)),
+    var(--panel);
+}
+
+.install-banner__copy {
+  display: grid;
+  gap: 0.28rem;
+}
+
+.install-banner__copy p {
+  margin: 0;
+}
+
+.install-banner__actions {
+  display: grid;
+  grid-template-columns: 1fr;
+}
+
+.app-main {
+  display: grid;
+  gap: 1rem;
+  min-width: 0;
+  padding-bottom: 0.35rem;
+}
+
+.screen-block,
+.screen-shell,
+.detail-shell,
+.settings-stack,
+.stack,
+.choice-stack {
+  display: grid;
+  gap: 1rem;
+}
+
+.detail-shell,
+.choice-stack {
+  align-content: start;
+}
+
+.stack--tight {
+  gap: 0.85rem;
+}
+
+.screen-block--detail {
+  min-height: calc(100dvh - 8rem);
+}
+
+.surface,
+.surface-card {
+  padding: 1rem;
+}
+
+.surface-card--accent {
+  background:
+    linear-gradient(180deg, rgba(47, 143, 103, 0.14), rgba(17, 27, 35, 0.96)),
+    var(--panel);
+}
+
+.settings-screen,
+.settings-page {
+  display: grid;
+  gap: 1rem;
+  align-content: start;
+  align-items: start;
+}
+
+.settings-page-header {
+  display: grid;
+  gap: 0.9rem;
+}
+
+.settings-page-copy {
+  margin: 0;
+  padding: 0 0.2rem;
+  line-height: 1.55;
+}
+
+.settings-inline-back {
+  width: fit-content;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.settings-inline-back svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.settings-group {
+  display: grid;
+  gap: 0.38rem;
+}
+
+.settings-group__title {
+  margin: 0 0.45rem;
+  font-size: 0.74rem;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: rgba(205, 220, 231, 0.5);
+}
+
+.settings-list,
+.settings-action-panel,
+.settings-copy-block {
+  align-self: start;
+  overflow: hidden;
+  border: 1px solid rgba(156, 181, 197, 0.08);
+  border-radius: 18px;
+  background: rgba(22, 28, 35, 0.96);
+  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
+}
+
+.settings-nav-row,
+.settings-info-row,
+.settings-choice-row {
+  width: 100%;
+  display: grid;
+  gap: 0.85rem;
+  align-items: center;
+  padding: 0.95rem 1rem;
+  background: transparent;
+  color: var(--text);
+  border: 0;
+  text-align: left;
+}
+
+.settings-nav-row,
+.settings-choice-row {
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.settings-nav-row {
+  grid-template-columns: auto minmax(0, 1fr) auto auto;
+}
+
+.settings-info-row {
+  grid-template-columns: minmax(0, 1fr) auto;
+}
+
+.settings-info-row--stacked {
+  grid-template-columns: minmax(0, 1fr);
+  align-items: flex-start;
+  gap: 0.48rem;
+}
+
+.settings-choice-row {
+  grid-template-columns: minmax(0, 1fr) auto;
+}
+
+.settings-nav-row + .settings-nav-row,
+.settings-info-row + .settings-info-row,
+.settings-choice-row + .settings-choice-row {
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.settings-nav-row:active,
+.settings-choice-row:active {
+  background: rgba(255, 255, 255, 0.035);
+}
+
+.settings-row__icon {
+  width: 1.95rem;
+  height: 1.95rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 11px;
+  background: rgba(123, 195, 255, 0.12);
+  color: #e9f7ff;
+}
+
+.settings-row__icon svg,
+.settings-row__chevron svg,
+.settings-choice-row__check svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.settings-row__body {
+  min-width: 0;
+  display: grid;
+  gap: 0.18rem;
+}
+
+.settings-row__title,
+.settings-info-row__label {
+  font-size: 1rem;
+  line-height: 1.3;
+}
+
+.settings-row__subtitle {
+  color: var(--muted);
+  font-size: 0.84rem;
+  line-height: 1.35;
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
+
+.settings-row__value,
+.settings-info-row__value {
+  color: rgba(231, 243, 250, 0.68);
+  font-size: 0.88rem;
+  text-align: right;
+  overflow-wrap: anywhere;
+}
+
+.settings-info-row--stacked .settings-info-row__value {
+  text-align: left;
+}
+
+.settings-info-row__value--mono {
+  font-family: ui-monospace, SFMono-Regular, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 0.82rem;
+  line-height: 1.45;
+  word-break: break-all;
+}
+
+.settings-row__chevron {
+  width: 0.95rem;
+  height: 0.95rem;
+  color: rgba(236, 248, 255, 0.32);
+}
+
+.settings-choice-row__check {
+  width: 1.15rem;
+  height: 1.15rem;
+  color: #79c4ff;
+}
+
+.settings-copy-block {
+  padding: 0.95rem 1rem;
+}
+
+.settings-copy-block--compact {
+  padding: 0.78rem 0.9rem;
+}
+
+.settings-copy-block--stacked {
+  display: grid;
+  gap: 0.9rem;
+}
+
+.settings-copy-block p {
+  margin: 0;
+}
+
+.settings-action-panel {
+  padding: 1rem;
+}
+
+.settings-list--compact .settings-info-row,
+.settings-list--compact .settings-choice-row {
+  padding-top: 0.78rem;
+  padding-bottom: 0.78rem;
+}
+
+.settings-list--compact .settings-info-row:last-child,
+.settings-list--compact .settings-choice-row:last-child {
+  padding-bottom: 0.56rem;
+}
+
+.settings-command-card {
+  display: grid;
+  gap: 0.35rem;
+  padding: 0.85rem 0.95rem;
+  border: 1px solid rgba(156, 181, 197, 0.12);
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.035);
+}
+
+.settings-command-card__label {
+  color: var(--muted);
+  font-size: 0.8rem;
+  line-height: 1.35;
+}
+
+.settings-command-card__value {
+  display: block;
+  font-family: ui-monospace, SFMono-Regular, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 0.86rem;
+  line-height: 1.5;
+  color: var(--text);
+  overflow-wrap: anywhere;
+}
+
+.device-list {
+  display: grid;
+  gap: 0.8rem;
+}
+
+.device-card {
+  padding: 0.95rem;
+  border: 1px solid rgba(156, 181, 197, 0.08);
+  border-radius: 18px;
+  background: rgba(22, 28, 35, 0.96);
+  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
+}
+
+.device-card__header {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.75rem;
+  align-items: flex-start;
+}
+
+.device-card__title-wrap {
+  min-width: 0;
+  display: grid;
+  gap: 0.34rem;
+}
+
+.device-card__headline {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+  min-width: 0;
+}
+
+.device-card__icon {
+  width: 1.9rem;
+  height: 1.9rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 11px;
+  background: rgba(123, 195, 255, 0.12);
+  color: #e9f7ff;
+  flex: 0 0 auto;
+}
+
+.device-card__icon svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.device-card__title {
+  margin: 0;
+  font-size: 1rem;
+  line-height: 1.3;
+  overflow-wrap: anywhere;
+}
+
+.device-card__subtitle {
+  margin: 0;
+  color: rgba(231, 243, 250, 0.62);
+  font-size: 0.78rem;
+  line-height: 1.45;
+  font-family: ui-monospace, SFMono-Regular, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  overflow-wrap: anywhere;
+}
+
+.device-card__badge {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 1.75rem;
+  padding: 0.2rem 0.68rem;
+  border-radius: 999px;
+  border: 1px solid rgba(121, 196, 255, 0.24);
+  background: rgba(121, 196, 255, 0.12);
+  color: #dcf1ff;
+  font-size: 0.78rem;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.device-card__meta {
+  margin-top: 0.85rem;
+  display: grid;
+  gap: 0.48rem;
+}
+
+.device-card__meta-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 0.75rem;
+  align-items: start;
+}
+
+.device-card__meta-label {
+  color: var(--muted);
+  font-size: 0.82rem;
+  line-height: 1.35;
+}
+
+.device-card__meta-value {
+  color: rgba(231, 243, 250, 0.9);
+  font-size: 0.84rem;
+  line-height: 1.35;
+  text-align: right;
+  overflow-wrap: anywhere;
+}
+
+.device-card__actions {
+  margin-top: 0.95rem;
+}
+
+.screen-header {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  align-items: flex-start;
+  margin-bottom: 0.35rem;
+}
+
+.screen-eyebrow {
+  margin: 0 0 0.5rem;
+  font-size: 0.82rem;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+.screen-title {
+  font-size: clamp(1.5rem, 5vw, 1.95rem);
+}
+
+.screen-shell--mobile {
+  gap: 0.85rem;
+}
+
+.screen-header--mobile {
+  align-items: center;
+}
+
+.screen-header--mobile .screen-copy {
+  max-width: 72%;
+  font-size: 0.94rem;
+}
+
+.screen-copy--mobile-intro {
+  font-size: 0.94rem;
+  line-height: 1.5;
+}
+
+.card-list {
+  display: grid;
+  gap: 0.85rem;
+}
+
+.item-card {
+  width: 100%;
+  display: grid;
+  gap: 0.8rem;
+  padding: 0.95rem;
+  border: 1px solid var(--line);
+  border-radius: 20px;
+  background: var(--card);
+  box-shadow: var(--shadow-card);
+  color: var(--text);
+  text-align: left;
+  cursor: pointer;
+}
+
+.item-card__header {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.8rem;
+  align-items: center;
+}
+
+.item-card__header-right {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.55rem;
+  min-width: fit-content;
+}
+
+.item-card__header--completion-readonly {
+  justify-content: flex-end;
+  gap: 0.55rem;
+}
+
+.item-card__meta,
+.detail-pills {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.55rem;
+}
+
+.item-card__content {
+  display: grid;
+  gap: 0.38rem;
+}
+
+.item-card__intent,
+.detail-intent {
+  margin: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.42rem;
+  color: rgba(236, 248, 255, 0.86);
+  font-size: 0.84rem;
+  line-height: 1.35;
+}
+
+.item-card__intent {
+  color: #d7e8f3;
+}
+
+.item-card__intent-icon,
+.detail-intent__icon {
+  width: 0.98rem;
+  height: 0.98rem;
+  display: inline-flex;
+  flex: 0 0 auto;
+  color: rgba(236, 248, 255, 0.88);
+}
+
+.item-card__title {
+  margin: 0;
+  font-size: 1.08rem;
+  line-height: 1.35;
+  overflow-wrap: anywhere;
+}
+
+.item-card__summary {
+  margin: 0;
+  color: var(--muted);
+  line-height: 1.45;
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow-wrap: anywhere;
+}
+
+.item-card__thread {
+  margin: 0;
+  color: var(--muted);
+  font-size: 0.82rem;
+  line-height: 1.35;
+}
+
+.item-card__timestamp {
+  color: var(--muted);
+  font-size: 0.84rem;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.item-card__status-note {
+  margin: 0;
+  color: var(--muted);
+  font-size: 0.84rem;
+}
+
+.item-card__chevron {
+  width: 1rem;
+  height: 1rem;
+  flex: 0 0 auto;
+  color: rgba(236, 248, 255, 0.7);
+}
+
+.item-card--approval {
+  background:
+    linear-gradient(180deg, rgba(47, 143, 103, 0.12), rgba(20, 31, 40, 0.96)),
+    var(--card);
+}
+
+.item-card--plan {
+  background:
+    linear-gradient(180deg, rgba(143, 173, 255, 0.12), rgba(20, 31, 40, 0.96)),
+    var(--card);
+}
+
+.item-card--choice {
+  background:
+    linear-gradient(180deg, rgba(79, 131, 216, 0.12), rgba(20, 31, 40, 0.96)),
+    var(--card);
+}
+
+.item-card--completion {
+  background:
+    linear-gradient(180deg, rgba(210, 170, 99, 0.1), rgba(20, 31, 40, 0.96)),
+    var(--card);
+}
+
+.item-card--completion-readonly .item-card__content {
+  gap: 0.4rem;
+}
+
+.item-card--completion-readonly .item-card__title {
+  font-size: 1.03rem;
+  line-height: 1.55;
+  font-weight: 500;
+}
+
+.timeline-shell {
+  gap: 0.9rem;
+}
+
+.timeline-thread-filter {
+  display: grid;
+  gap: 0.38rem;
+}
+
+.timeline-thread-filter__label {
+  color: var(--muted);
+  font-size: 0.8rem;
+  line-height: 1.3;
+}
+
+.timeline-thread-select-wrap {
+  position: relative;
+}
+
+.timeline-thread-select {
+  width: 100%;
+  appearance: none;
+  -webkit-appearance: none;
+  border: 1px solid rgba(156, 181, 197, 0.14);
+  border-radius: 15px;
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--text);
+  min-height: 2.7rem;
+  padding: 0.72rem 2.75rem 0.72rem 0.92rem;
+  font-size: 0.92rem;
+  font-weight: 600;
+}
+
+.timeline-thread-select__chevron {
+  position: absolute;
+  right: 0.92rem;
+  top: 50%;
+  width: 1rem;
+  height: 1rem;
+  color: rgba(236, 248, 255, 0.72);
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+
+.timeline-list {
+  display: grid;
+  gap: 0.72rem;
+}
+
+.timeline-entry {
+  width: 100%;
+  display: grid;
+  gap: 0.55rem;
+  padding: 0.92rem;
+  border: 1px solid var(--line);
+  border-radius: 20px;
+  background: rgba(18, 28, 36, 0.9);
+  box-shadow: var(--shadow-card);
+  color: var(--text);
+  text-align: left;
+  cursor: pointer;
+}
+
+.timeline-entry__meta {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 0.75rem;
+  align-items: center;
+}
+
+.timeline-entry__meta-right {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  min-width: 0;
+}
+
+.timeline-entry__kind {
+  min-width: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.42rem;
+  color: #edf8ff;
+  font-size: 0.8rem;
+  font-weight: 700;
+}
+
+.timeline-entry__kind-icon {
+  width: 0.98rem;
+  height: 0.98rem;
+  display: inline-flex;
+  flex: 0 0 auto;
+  color: rgba(236, 248, 255, 0.84);
+}
+
+.timeline-entry__time,
+.timeline-entry__status,
+.timeline-entry__thread {
+  color: var(--muted);
+}
+
+.timeline-entry__time,
+.timeline-entry__status {
+  font-size: 0.78rem;
+  line-height: 1.3;
+}
+
+.timeline-entry__thread {
+  margin: 0;
+  font-size: 0.82rem;
+  line-height: 1.35;
+}
+
+.timeline-entry__body {
+  display: grid;
+  gap: 0.34rem;
+}
+
+.timeline-entry__title,
+.timeline-entry__summary {
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+.timeline-entry__title {
+  font-size: 1rem;
+  line-height: 1.45;
+}
+
+.timeline-entry__summary {
+  color: var(--muted);
+  line-height: 1.5;
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+
+.timeline-entry__footer {
+  display: flex;
+  align-items: center;
+  gap: 0.7rem;
+}
+
+.timeline-entry__chevron {
+  width: 1rem;
+  height: 1rem;
+  flex: 0 0 auto;
+  color: rgba(236, 248, 255, 0.66);
+}
+
+.timeline-entry--message .timeline-entry__title {
+  font-size: 1.03rem;
+  line-height: 1.55;
+  color: #f2fbff;
+}
+
+.timeline-entry--message .timeline-entry__footer {
+  padding-top: 0.1rem;
+}
+
+.timeline-entry--kind-user-message {
+  background:
+    linear-gradient(180deg, rgba(156, 181, 197, 0.1), rgba(20, 31, 40, 0.96)),
+    var(--card);
+}
+
+.timeline-entry--kind-assistant-commentary {
+  background:
+    linear-gradient(180deg, rgba(143, 173, 255, 0.12), rgba(20, 31, 40, 0.96)),
+    var(--card);
+}
+
+.timeline-entry--kind-assistant-final {
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(20, 31, 40, 0.96)),
+    var(--card);
+}
+
+.timeline-entry--approval {
+  background:
+    linear-gradient(180deg, rgba(47, 143, 103, 0.12), rgba(20, 31, 40, 0.96)),
+    var(--card);
+}
+
+.timeline-entry--plan {
+  background:
+    linear-gradient(180deg, rgba(143, 173, 255, 0.12), rgba(20, 31, 40, 0.96)),
+    var(--card);
+}
+
+.timeline-entry--choice {
+  background:
+    linear-gradient(180deg, rgba(79, 131, 216, 0.12), rgba(20, 31, 40, 0.96)),
+    var(--card);
+}
+
+.timeline-entry--completion {
+  background:
+    linear-gradient(180deg, rgba(210, 170, 99, 0.1), rgba(20, 31, 40, 0.96)),
+    var(--card);
+}
+
+.detail-shell {
+  border: 1px solid var(--line);
+  border-radius: var(--radius-card);
+  background: var(--panel);
+  box-shadow: var(--shadow-card);
+  padding: 1rem;
+}
+
+.detail-shell--mobile {
+  display: grid;
+  grid-template-rows: minmax(0, 1fr) auto;
+  min-height: calc(100dvh - 5.6rem);
+  align-content: start;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+  overflow: hidden;
+}
+
+.mobile-detail-screen {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  min-height: calc(100dvh - 5.6rem);
+}
+
+.mobile-detail-scroll {
+  min-height: 0;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  padding: 0 0.42rem 0.78rem;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  align-content: flex-start;
+  gap: 0.42rem;
+}
+
+.mobile-detail-scroll--detail {
+  gap: 0.14rem;
+}
+
+.detail-action-bar {
+  display: grid;
+  gap: 0.75rem;
+  padding: 0.78rem 0.52rem calc(0.78rem + env(safe-area-inset-bottom));
+  border-top: 1px solid rgba(156, 181, 197, 0.14);
+  background:
+    linear-gradient(180deg, rgba(11, 18, 24, 0.72), rgba(11, 18, 24, 0.9)),
+    rgba(9, 16, 21, 0.78);
+  -webkit-backdrop-filter: blur(22px) saturate(1.08);
+  backdrop-filter: blur(22px) saturate(1.08);
+}
+
+.detail-hero {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.detail-meta-row {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.75rem;
+  align-items: center;
+}
+
+.detail-meta-row__left {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.36rem;
+  align-items: center;
+}
+
+.detail-meta-row--mobile {
+  padding-top: 0;
+}
+
+.detail-meta-row .type-pill,
+.detail-meta-row .status-pill {
+  min-height: 1.72rem;
+  padding: 0.24rem 0.62rem;
+}
+
+.detail-meta-row__time {
+  color: var(--muted);
+  font-size: 0.84rem;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.detail-title {
+  font-size: clamp(1.5rem, 5vw, 2.1rem);
+  line-height: 1.15;
+  overflow-wrap: anywhere;
+  margin: 0;
+}
+
+.detail-title--mobile {
+  font-size: clamp(1.62rem, 7vw, 2.18rem);
+  line-height: 1.06;
+  letter-spacing: -0.045em;
+}
+
+.detail-title--desktop {
+  font-size: clamp(1.28rem, 2.3vw, 1.72rem);
+  line-height: 1.15;
+  letter-spacing: -0.03em;
+}
+
+.detail-body {
+  overflow-wrap: anywhere;
+  width: 100%;
+}
+
+.detail-card--body .detail-body {
+  padding: 0.18rem 0.16rem 0.12rem;
+}
+
+.detail-card--message-body .detail-body {
+  padding: 0.82rem 0.86rem 0.74rem;
+}
+
+.detail-card--message-body.detail-card--mobile .detail-body {
+  padding: 0.74rem 0.76rem 0.68rem;
+}
+
+.detail-body.markdown {
+  line-height: 1.62;
+  color: #f3fbff;
+}
+
+.detail-body--message.markdown {
+  line-height: 1.72;
+}
+
+.detail-body.markdown > * {
+  margin-top: 0;
+  margin-bottom: 0.6rem;
+}
+
+.detail-body.markdown > :last-child {
+  margin-bottom: 0;
+}
+
+.detail-body.markdown h1,
+.detail-body.markdown h2,
+.detail-body.markdown h3,
+.detail-body.markdown h4,
+.detail-body.markdown h5,
+.detail-body.markdown h6 {
+  line-height: 1.18;
+}
+
+.detail-body.markdown h1 {
+  font-size: clamp(1.28rem, 5vw, 1.72rem);
+}
+
+.detail-body.markdown h2 {
+  font-size: clamp(1.12rem, 4.2vw, 1.34rem);
+}
+
+.detail-body.markdown h3 {
+  font-size: clamp(1rem, 3.5vw, 1.12rem);
+}
+
+.detail-body.markdown pre {
+  overflow: auto;
+  padding: 0.82rem 0.88rem;
+  border: 1px solid var(--line);
+  border-radius: 16px;
+  background: var(--panel-strong);
+}
+
+.detail-body.markdown table {
+  display: block;
+  overflow-x: auto;
+}
+
+.detail-card {
+  border: 1px solid rgba(156, 181, 197, 0.12);
+  border-radius: 18px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)),
+    rgba(16, 26, 33, 0.9);
+  box-shadow:
+    0 12px 24px rgba(0, 0, 0, 0.14),
+    inset 0 1px 0 rgba(255, 255, 255, 0.03);
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 0.52rem;
+  width: 100%;
+  align-self: start;
+  padding: 0.68rem 0.78rem;
+}
+
+.detail-card--mobile {
+  padding: 0.42rem 0.5rem;
+  gap: 0.4rem;
+}
+
+.detail-loading {
+  display: grid;
+  gap: 0.58rem;
+  width: 100%;
+}
+
+.detail-loading__copy {
+  margin: 0;
+  color: var(--muted);
+  font-size: 0.9rem;
+  line-height: 1.45;
+}
+
+.detail-loading__lines {
+  display: grid;
+  gap: 0.46rem;
+}
+
+.detail-loading__line {
+  display: block;
+  width: 100%;
+  height: 0.78rem;
+  border-radius: 999px;
+  background:
+    linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08)),
+    rgba(255, 255, 255, 0.08);
+  background-size: 200% 100%;
+  animation: detail-loading-pulse 1.25s ease-in-out infinite;
+}
+
+.detail-loading__line--long {
+  width: 100%;
+}
+
+.detail-loading__line--mid {
+  width: 74%;
+}
+
+.detail-loading__line--short {
+  width: 52%;
+}
+
+.detail-card--body {
+  margin-top: 0.28rem;
+}
+
+.detail-card--context {
+  margin-top: 0.28rem;
+  gap: 0.42rem;
+  background:
+    linear-gradient(180deg, rgba(156, 181, 197, 0.06), rgba(255, 255, 255, 0.02)),
+    rgba(14, 22, 29, 0.84);
+}
+
+.detail-card--reply {
+  margin-top: 0.32rem;
+  gap: 0.72rem;
+}
+
+.detail-context-card__header {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 0.72rem;
+  align-items: center;
+}
+
+.detail-context-card__eyebrow {
+  min-width: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.42rem;
+  color: rgba(236, 248, 255, 0.78);
+  font-size: 0.76rem;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+
+.detail-context-card__icon {
+  width: 0.92rem;
+  height: 0.92rem;
+  flex: 0 0 auto;
+  opacity: 0.88;
+}
+
+.detail-context-card__time {
+  color: var(--muted);
+  font-size: 0.76rem;
+  line-height: 1.3;
+}
+
+.detail-context-card__kind {
+  margin: 0;
+  color: rgba(236, 248, 255, 0.62);
+  font-size: 0.84rem;
+  line-height: 1.4;
+}
+
+.detail-body--context {
+  color: rgba(243, 251, 255, 0.88);
+}
+
+.detail-body--context.markdown {
+  font-size: 0.95rem;
+  line-height: 1.58;
+}
+
+.detail-lead {
+  margin: 0;
+  display: flex;
+  gap: 0.48rem;
+  align-items: flex-start;
+  color: var(--muted);
+  font-size: 0.88rem;
+  line-height: 1.46;
+}
+
+.detail-lead__icon {
+  width: 0.98rem;
+  height: 0.98rem;
+  flex: 0 0 auto;
+  opacity: 0.9;
+}
+
+.reply-composer {
+  display: grid;
+  gap: 0.78rem;
+}
+
+.reply-composer__copy {
+  display: grid;
+  gap: 0.34rem;
+}
+
+.reply-composer__title {
+  margin: 0;
+  font-size: 1rem;
+  line-height: 1.28;
+}
+
+.reply-composer__description {
+  margin: 0;
+}
+
+.reply-composer__form {
+  display: grid;
+  gap: 0.8rem;
+}
+
+.reply-field {
+  gap: 0.5rem;
+}
+
+.reply-field__input {
+  width: 100%;
+  min-height: 7.4rem;
+  padding: 0.9rem 1rem;
+  border-radius: 18px;
+  border: 1px solid var(--line);
+  background: rgba(7, 12, 16, 0.96);
+  color: var(--text);
+  resize: vertical;
+  font: inherit;
+  line-height: 1.58;
+}
+
+.reply-field__input::placeholder {
+  color: rgba(205, 220, 231, 0.42);
+}
+
+.reply-mode-switch {
+  display: grid;
+  grid-template-columns: auto auto minmax(0, 1fr);
+  gap: 0.78rem;
+  align-items: center;
+  padding: 0.82rem 0.92rem;
+  border: 1px solid rgba(156, 181, 197, 0.1);
+  border-radius: 18px;
+  background: rgba(255, 255, 255, 0.035);
+  cursor: pointer;
+}
+
+.reply-mode-switch__input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.reply-mode-switch__track {
+  width: 2.9rem;
+  height: 1.8rem;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(156, 181, 197, 0.16);
+  padding: 0.14rem;
+  display: flex;
+  align-items: center;
+  transition: background 160ms ease, border-color 160ms ease;
+}
+
+.reply-mode-switch__thumb {
+  width: 1.22rem;
+  height: 1.22rem;
+  border-radius: 999px;
+  background: rgba(236, 248, 255, 0.94);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
+  transform: translateX(0);
+  transition: transform 160ms ease;
+}
+
+.reply-mode-switch__input:checked + .reply-mode-switch__track {
+  background: rgba(67, 160, 255, 0.28);
+  border-color: rgba(121, 196, 255, 0.34);
+}
+
+.reply-mode-switch__input:checked + .reply-mode-switch__track .reply-mode-switch__thumb {
+  transform: translateX(1.06rem);
+}
+
+.reply-mode-switch__copy {
+  min-width: 0;
+  display: grid;
+  gap: 0.16rem;
+}
+
+.reply-mode-switch__title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.65rem;
+  font-size: 0.94rem;
+  font-weight: 700;
+  line-height: 1.25;
+}
+
+.reply-mode-switch__state {
+  color: rgba(121, 196, 255, 0.92);
+  font-size: 0.78rem;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.reply-mode-switch__hint {
+  color: var(--muted);
+  font-size: 0.83rem;
+  line-height: 1.45;
+}
+
+@keyframes detail-loading-pulse {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: -100% 0;
+  }
+}
+
+.detail-intent--featured {
+  padding: 0.72rem 0.78rem;
+  border: 1px solid rgba(156, 181, 197, 0.12);
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.05);
+  color: #edf8ff;
+}
+
+.detail-empty,
+.empty-state {
+  padding: 1.4rem;
+}
+
+.empty-state {
+  display: grid;
+  gap: 0.4rem;
+  padding: 0.5rem 0.1rem 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+.empty-state__title {
+  margin: 0;
+  color: rgba(236, 248, 255, 0.84);
+  font-size: 0.98rem;
+  font-weight: 600;
+}
+
+.empty-state .muted {
+  margin: 0;
+  line-height: 1.55;
+}
+
+.choice-form,
+.choice-question {
+  display: grid;
+  gap: 0.9rem;
+}
+
+.choice-question {
+  margin: 0;
+  padding: 0.72rem;
+  border: 1px solid rgba(156, 181, 197, 0.12);
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.choice-question legend {
+  padding: 0 0.4rem;
+  color: var(--muted);
+  font-size: 0.88rem;
+  font-weight: 700;
+}
+
+.choice-question p {
+  margin: 0;
+}
+
+.choice-question__prompt {
+  line-height: 1.45;
+}
+
+.choice-question__hint {
+  color: var(--muted);
+  font-size: 0.84rem;
+  line-height: 1.45;
+}
+
+.choice-options {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.choice-option {
+  display: flex;
+  gap: 0.75rem;
+  align-items: flex-start;
+  padding: 0.9rem;
+  border: 1px solid rgba(156, 181, 197, 0.1);
+  border-radius: 18px;
+  background: rgba(255, 255, 255, 0.045);
+}
+
+.choice-option__content {
+  display: grid;
+  gap: 0.2rem;
+}
+
+.choice-option__label,
+.choice-option__description {
+  overflow-wrap: anywhere;
+}
+
+.choice-option__label {
+  color: var(--text);
+}
+
+.choice-option__description {
+  color: var(--muted);
+  font-size: 0.84rem;
+  line-height: 1.4;
+}
+
+.status-list {
+  display: grid;
+  gap: 0.6rem;
+}
+
+.status-row {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  align-items: flex-start;
+  padding: 0.78rem 0.9rem;
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(156, 181, 197, 0.12);
+}
+
+.status-row__label {
+  color: var(--muted);
+}
+
+.status-row__value {
+  max-width: 55%;
+  text-align: right;
+  overflow-wrap: anywhere;
+}
+
+.settings-disclosure {
+  display: grid;
+  gap: 0.8rem;
+}
+
+.settings-disclosure summary {
+  cursor: pointer;
+  font-weight: 700;
+  list-style: none;
+}
+
+.settings-disclosure summary::-webkit-details-marker {
+  display: none;
+}
+
+.settings-disclosure__body {
+  display: grid;
+  gap: 0.85rem;
+}
+
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+
+.actions--stack {
+  display: grid;
+  grid-template-columns: 1fr;
+}
+
+.actions--sticky {
+  gap: 0.65rem;
+}
+
+.primary,
+.secondary,
+.danger,
+.ghost {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 3rem;
+  padding: 0.9rem 1rem;
+  border-radius: 18px;
+  border: 0;
+  font-weight: 700;
+  cursor: pointer;
+  text-align: center;
+}
+
+.primary--wide,
+.secondary--wide,
+.danger--wide {
+  width: 100%;
+}
+
+.primary {
+  background: var(--accent);
+  color: #fff;
+}
+
+.secondary {
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--text);
+}
+
+.danger {
+  background: var(--danger);
+  color: #fff;
+}
+
+.ghost {
+  background: transparent;
+  color: var(--muted);
+  border: 1px solid rgba(156, 181, 197, 0.16);
+}
+
+button:disabled {
+  opacity: 0.48;
+  cursor: not-allowed;
+}
+
+.inline-alert {
+  margin: 0;
+  padding: 0.88rem 0.95rem;
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.04);
+  color: #eef8ff;
+}
+
+.inline-alert--success {
+  background: var(--accent-soft);
+  color: #d8f8e8;
+}
+
+.inline-alert--danger {
+  background: var(--danger-soft);
+  color: #ffd8d8;
+}
+
+.inline-alert--warning {
+  background: rgba(214, 171, 96, 0.14);
+  color: #ffe7b8;
+}
+
+.reply-warning {
+  display: grid;
+  gap: 0.38rem;
+}
+
+.reply-warning__title,
+.reply-warning__copy,
+.reply-warning__meta {
+  margin: 0;
+}
+
+.reply-warning__title {
+  font-weight: 700;
+  color: #fff4d8;
+}
+
+.reply-warning__copy {
+  color: #ffe9c1;
+}
+
+.reply-warning__meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.45rem 0.7rem;
+  font-size: 0.83rem;
+  color: rgba(255, 236, 193, 0.8);
+}
+
+.reply-sent-summary {
+  display: grid;
+  gap: 0.85rem;
+}
+
+.reply-sent-summary__preview {
+  display: grid;
+  gap: 0.38rem;
+  padding: 0.9rem 0.95rem;
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.reply-sent-summary__label,
+.reply-sent-summary__text {
+  margin: 0;
+}
+
+.reply-sent-summary__label {
+  font-size: 0.8rem;
+  color: var(--muted);
+}
+
+.reply-sent-summary__text {
+  line-height: 1.55;
+  color: #eef8ff;
+  overflow-wrap: anywhere;
+}
+
+.segmented-nav {
+  display: none;
+}
+
+.bottom-nav {
+  position: fixed;
+  left: 1rem;
+  right: 1rem;
+  bottom: calc(0.45rem + env(safe-area-inset-bottom));
+  z-index: 20;
+  isolation: isolate;
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 0.4rem;
+  padding: 0.5rem;
+  border: 1px solid var(--line);
+  border-radius: 24px;
+  background: rgba(9, 16, 21, 0.68);
+  -webkit-backdrop-filter: blur(22px) saturate(1.24);
+  backdrop-filter: blur(22px) saturate(1.24);
+  box-shadow:
+    0 20px 48px rgba(0, 0, 0, 0.26),
+    inset 0 1px 0 rgba(255, 255, 255, 0.05);
+}
+
+.bottom-nav::before {
+  content: "";
+  position: absolute;
+  inset: -0.55rem -0.35rem calc(-1rem - env(safe-area-inset-bottom)) -0.35rem;
+  z-index: -1;
+  pointer-events: none;
+  border-radius: 30px 30px 0 0;
+  background:
+    linear-gradient(180deg, rgba(11, 18, 24, 0.08) 0%, rgba(11, 18, 24, 0.34) 40%, rgba(11, 18, 24, 0.56) 100%);
+  -webkit-backdrop-filter: blur(30px) saturate(1.1);
+  backdrop-filter: blur(30px) saturate(1.1);
+  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.95) 68%, rgba(0, 0, 0, 0) 100%);
+  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.95) 68%, rgba(0, 0, 0, 0) 100%);
+}
+
+.bottom-nav__button,
+.segmented-nav__button {
+  border: 0;
+  border-radius: 18px;
+  background: transparent;
+  color: var(--muted);
+  min-height: 3.35rem;
+  min-width: 0;
+  padding: 0.35rem 0.2rem;
+  font-weight: 700;
+  text-align: center;
+  transition:
+    background 160ms ease,
+    color 160ms ease,
+    transform 160ms ease,
+    box-shadow 160ms ease,
+    opacity 160ms ease;
+}
+
+.bottom-nav__button {
+  display: grid;
+  justify-items: center;
+  align-content: center;
+  gap: 0.2rem;
+}
+
+.bottom-nav__button span,
+.segmented-nav__button span {
+  display: block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 1.15;
+}
+
+.tab-icon {
+  width: 1.05rem;
+  height: 1.05rem;
+  display: inline-flex;
+  opacity: 0.86;
+  transition:
+    opacity 160ms ease,
+    transform 160ms ease;
+}
+
+.tab-label {
+  font-size: 0.74rem;
+}
+
+.bottom-nav__button.is-active,
+.segmented-nav__button.is-active {
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
+  color: #fff;
+  transform: translateY(-1px);
+  box-shadow:
+    0 10px 20px rgba(0, 0, 0, 0.18),
+    inset 0 1px 0 rgba(255, 255, 255, 0.08);
+}
+
+.bottom-nav__button.is-active .tab-icon {
+  opacity: 1;
+  transform: scale(1.06);
+}
+
+.bottom-nav__button:active {
+  transform: translateY(0);
+}
+
+.onboarding-shell {
+  min-height: 100vh;
+  display: grid;
+  place-items: center;
+  padding:
+    max(1.2rem, env(safe-area-inset-top))
+    1rem
+    max(1.2rem, env(safe-area-inset-bottom))
+    1rem;
+}
+
+.onboarding-card {
+  width: min(32rem, 100%);
+  display: grid;
+  gap: 1rem;
+  padding: 1.25rem;
+}
+
+.hero-title {
+  font-size: clamp(2rem, 8vw, 3rem);
+}
+
+.pair-form,
+.field {
+  display: grid;
+  gap: 0.55rem;
+}
+
+.field-label {
+  color: var(--muted);
+  font-size: 0.88rem;
+}
+
+.field input {
+  width: 100%;
+  min-height: 3.25rem;
+  padding: 0.9rem 1rem;
+  border-radius: 18px;
+  border: 1px solid var(--line);
+  background: rgba(7, 12, 16, 0.96);
+  color: var(--text);
+}
+
+.helper-card {
+  display: grid;
+  gap: 0.8rem;
+  padding: 0.9rem;
+  border: 1px solid var(--line);
+  border-radius: 20px;
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.helper-copy {
+  display: grid;
+  gap: 0.35rem;
+}
+
+.helper-copy p {
+  margin: 0;
+}
+
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 40;
+  display: grid;
+  place-items: end center;
+  padding: 1rem;
+  background: rgba(3, 7, 10, 0.7);
+  backdrop-filter: blur(16px);
+}
+
+.modal-card {
+  width: min(34rem, 100%);
+  padding: 1.1rem;
+  border-radius: 24px;
+  border: 1px solid var(--line-strong);
+  background: var(--panel-strong);
+  box-shadow: var(--shadow-shell);
+}
+
+.modal-card--confirm {
+  display: grid;
+  gap: 0.9rem;
+}
+
+.logout-option {
+  display: grid;
+  gap: 0.8rem;
+  padding: 0.95rem;
+  border: 1px solid rgba(156, 181, 197, 0.12);
+  border-radius: 18px;
+  background: rgba(255, 255, 255, 0.035);
+}
+
+.logout-option--danger {
+  border-color: rgba(255, 138, 138, 0.18);
+  background: rgba(145, 57, 57, 0.08);
+}
+
+.logout-option__copy {
+  display: grid;
+  gap: 0.24rem;
+}
+
+.logout-option__copy p {
+  margin: 0;
+}
+
+.install-steps {
+  margin: 0;
+  padding-left: 1.15rem;
+  line-height: 1.65;
+}
+
+@media (min-width: 980px) {
+  .app-shell {
+    padding:
+      1.5rem
+      1.5rem
+      2rem
+      1.5rem;
+  }
+
+  .app-header {
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: end;
+  }
+
+  .brand-lockup {
+    grid-template-columns: auto minmax(0, 1fr);
+    align-items: start;
+    gap: 1rem;
+  }
+
+  .install-banner {
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: center;
+  }
+
+  .install-banner__actions {
+    grid-template-columns: auto auto;
+  }
+
+  .desktop-workspace {
+    display: grid;
+    grid-template-columns: minmax(20rem, 26rem) minmax(0, 1fr);
+    gap: 1rem;
+    align-items: start;
+  }
+
+  .surface {
+    min-height: calc(100vh - 12rem);
+  }
+
+  .surface--detail {
+    padding: 1.25rem 1.35rem;
+  }
+
+  .detail-shell--mobile {
+    min-height: min(46rem, calc(100dvh - 7.75rem));
+    border: 1px solid var(--line);
+    border-radius: var(--radius-card);
+    background: var(--panel);
+    box-shadow: var(--shadow-card);
+  }
+
+  .mobile-detail-screen {
+    min-height: auto;
+  }
+
+  .mobile-detail-scroll {
+    padding: 1rem;
+    gap: 1rem;
+  }
+
+  .segmented-nav {
+    display: grid;
+    grid-auto-flow: column;
+    gap: 0.5rem;
+    padding: 0.35rem;
+    border: 1px solid var(--line);
+    border-radius: 20px;
+    background: rgba(255, 255, 255, 0.04);
+  }
+
+  .segmented-nav__button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 6rem;
+    padding: 0 1rem;
+  }
+
+  .bottom-nav {
+    display: none;
+  }
+
+  .card-list--desktop {
+    gap: 0.75rem;
+  }
+
+  .timeline-list--desktop .timeline-entry__summary {
+    display: block;
+    overflow: visible;
+    -webkit-line-clamp: unset;
+  }
+
+  .item-card__summary {
+    display: block;
+    overflow: visible;
+    -webkit-line-clamp: unset;
+  }
+
+  .actions--stack {
+    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
+  }
+
+  .status-row__value {
+    max-width: 65%;
+  }
+
+  .modal-backdrop {
+    place-items: center;
+  }
+}
+
+@media (max-width: 390px) {
+  .mobile-topbar--detail {
+    gap: 0.6rem;
+    margin-left: -0.72rem;
+    margin-right: -0.72rem;
+    padding-left: 0.72rem;
+    padding-right: 0.72rem;
+  }
+
+  .mobile-topbar__back {
+    padding: 0;
+    border-radius: 999px;
+  }
+
+  .mobile-topbar__back-label {
+    display: none;
+  }
+
+  .bottom-nav {
+    left: 0.8rem;
+    right: 0.8rem;
+    gap: 0.32rem;
+    padding: 0.42rem;
+  }
+
+  .bottom-nav__button {
+    min-height: 3.15rem;
+    padding: 0.28rem 0.15rem;
+  }
+
+  .bottom-nav__button span {
+    font-size: 0.72rem;
+  }
+
+  .detail-title--mobile {
+    font-size: 1.48rem;
+  }
+
+  .detail-card--mobile {
+    padding: 0.4rem 0.46rem;
+  }
+}