sidebud 0.1.0

package/src/manage/manage.css

@@ -0,0 +1,1246 @@
+/*
+ * Sidebud palette (docs/brand.md): charcoal #151718, ivory #FEF3E1, amber #FEB93E.
+ * Dark mirrors the phone (apps/mobile-app/src/constants/theme.ts) and is the default;
+ * light sets charcoal on ivory. Amber fills carry charcoal ink in both themes;
+ * `--amber-text` is amber that stays readable as text on the background.
+ */
+:root,
+[data-theme='dark'] {
+  color-scheme: dark;
+  --bg: #151718;
+  --sidebar: #101213;
+  --surface: #1f2223;
+  --raised: #292d2e;
+  --hover: #313637;
+  --border: #353a3b;
+  --border-soft: #25292a;
+  --text: #fef3e1;
+  --muted: #aba496;
+  --faint: #8a857a;
+  --amber: #feb93e;
+  --amber-hover: #ffc95f;
+  --amber-ink: #151718;
+  --amber-text: #feb93e;
+  --amber-soft: #feb93e1a;
+  --amber-line: #feb93e59;
+  --green: #7fd0a0;
+  --green-soft: #7fd0a01f;
+  --red: #ff7a68;
+  --red-soft: #ff7a681f;
+  --code-bg: #0e1011;
+  --code-text: #fef3e1;
+  --shadow: 0 1px 0 #fef3e108 inset, 0 8px 24px #00000033;
+  --focus: 0 0 0 3px #feb93e40;
+}
+[data-theme='light'] {
+  color-scheme: light;
+  --bg: #fdf8ef;
+  --sidebar: #f6eddc;
+  --surface: #fffdf9;
+  --raised: #f8f1e4;
+  --hover: #f1e7d4;
+  --border: #e3d7c1;
+  --border-soft: #ede3d0;
+  --text: #151718;
+  --muted: #5f5a50;
+  --faint: #8d8577;
+  --amber: #feb93e;
+  --amber-hover: #f5a91f;
+  --amber-ink: #151718;
+  --amber-text: #9a5f00;
+  --amber-soft: #feb93e29;
+  --amber-line: #d99a2a80;
+  --green: #1f7a52;
+  --green-soft: #1f7a521a;
+  --red: #b83d2e;
+  --red-soft: #b83d2e14;
+  --code-bg: #151718;
+  --code-text: #fef3e1;
+  --shadow: 0 1px 2px #15171808, 0 6px 18px #1517180d;
+  --focus: 0 0 0 3px #feb93e59;
+}
+:root {
+  font:
+    14.5px/1.55 -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    system-ui,
+    sans-serif;
+  color: var(--text);
+  background: var(--bg);
+  -webkit-font-smoothing: antialiased;
+}
+* {
+  box-sizing: border-box;
+}
+body {
+  margin: 0;
+  min-height: 100vh;
+}
+svg {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.8;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+::selection {
+  background: var(--amber-line);
+}
+
+/* Shell */
+.shell {
+  display: grid;
+  grid-template-columns: 250px minmax(0, 1fr);
+  min-height: 100vh;
+  /* Paint the sidebar column on the shell so it spans the full page height. */
+  background: linear-gradient(
+    to right,
+    var(--sidebar) 249px,
+    var(--border-soft) 249px 250px,
+    transparent 250px
+  );
+}
+.sidebar {
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  gap: 28px;
+  padding: 26px 16px 18px;
+}
+.content {
+  width: 100%;
+  max-width: 1360px;
+  padding: 44px 48px 64px;
+}
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 0 8px;
+}
+.mark {
+  flex: 0 0 auto;
+  width: 40px;
+  height: 40px;
+  border-radius: 11px;
+  /* The icon's square is charcoal; a hairline keeps it distinct on either theme. */
+  box-shadow: 0 0 0 1px var(--border);
+}
+.brand h1 {
+  font-size: 17px;
+  letter-spacing: -0.01em;
+  margin: 0;
+}
+.brand small {
+  color: var(--amber-text);
+}
+h1 {
+  font-size: 15px;
+  line-height: 1.2;
+  margin: 2px 0 0;
+  font-weight: 650;
+}
+h2 {
+  font-size: 26px;
+  line-height: 1.2;
+  letter-spacing: -0.015em;
+  margin: 0 0 6px;
+  font-weight: 700;
+}
+h3 {
+  font-size: 15.5px;
+  line-height: 1.35;
+  margin: 0 0 4px;
+  font-weight: 650;
+}
+small {
+  font-size: 10.5px;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--faint);
+}
+nav {
+  display: grid;
+  gap: 2px;
+}
+nav a {
+  display: flex;
+  align-items: center;
+  gap: 11px;
+  padding: 9px 10px;
+  border-radius: 9px;
+  color: var(--muted);
+  text-decoration: none;
+  font-weight: 550;
+  white-space: nowrap;
+  transition:
+    background 0.12s,
+    color 0.12s;
+}
+nav a svg {
+  width: 18px;
+  height: 18px;
+  flex: 0 0 auto;
+}
+nav a:hover {
+  background: var(--raised);
+  color: var(--text);
+}
+nav a.nav-end {
+  margin-top: 12px;
+  position: relative;
+}
+nav a.nav-end::before {
+  content: '';
+  position: absolute;
+  top: -7px;
+  left: 10px;
+  right: 10px;
+  border-top: 1px solid var(--border-soft);
+}
+nav a.active {
+  background: var(--amber-soft);
+  color: var(--amber-text);
+  box-shadow: inset 0 0 0 1px var(--amber-line);
+}
+.sidebar-footer {
+  margin-top: auto;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding-top: 16px;
+  border-top: 1px solid var(--border-soft);
+}
+.local {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 4px 8px;
+}
+.local strong,
+.local span:not(.dot) {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.local strong {
+  font-size: 13px;
+  font-weight: 600;
+}
+.local span:not(.dot) {
+  font-size: 12px;
+  color: var(--faint);
+}
+.dot {
+  flex: 0 0 auto;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--green);
+  box-shadow: 0 0 0 3px var(--green-soft);
+}
+.local-text {
+  flex: 1;
+  min-width: 0;
+}
+button.icon-button {
+  flex: 0 0 auto;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  display: grid;
+  place-items: center;
+  color: var(--faint);
+  background: transparent;
+  border-color: transparent;
+}
+button.icon-button:hover {
+  color: var(--text);
+  background: var(--raised);
+}
+.icon-button svg {
+  width: 15px;
+  height: 15px;
+}
+.local input.rename {
+  width: 100%;
+  padding: 4px 7px;
+  font-size: 13px;
+  font-weight: 600;
+}
+.local .rename-hint {
+  font-size: 11px;
+}
+button.theme-toggle {
+  flex: 0 0 auto;
+  width: 34px;
+  height: 34px;
+  padding: 0;
+  display: grid;
+  place-items: center;
+  color: var(--muted);
+}
+.theme-toggle svg {
+  width: 17px;
+  height: 17px;
+}
+[data-theme='dark'] .icon-moon,
+[data-theme='light'] .icon-sun {
+  display: none;
+}
+
+/* Page content */
+.section {
+  display: grid;
+  gap: 18px;
+}
+.section > div:first-child {
+  margin-bottom: 10px;
+}
+.section > div:first-child + div > h3:first-child {
+  margin-top: 0;
+}
+.section > div:not(.card):not(.grid):not(.default-agent) > h3 {
+  margin-top: 14px;
+}
+.lede {
+  color: var(--muted);
+  margin: 0;
+  max-width: 64ch;
+}
+.card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  padding: 22px 24px;
+  box-shadow: var(--shadow);
+}
+.card.muted {
+  border-style: dashed;
+  background: transparent;
+  box-shadow: none;
+  text-align: center;
+  padding: 28px;
+}
+.row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+.row > h3 {
+  margin: 0;
+}
+.stack {
+  display: grid;
+  gap: 14px;
+}
+.stack > h3 {
+  margin: 0;
+}
+.stack > button {
+  justify-self: start;
+}
+.stack > h3 + .hint {
+  margin-top: -10px;
+}
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 16px;
+}
+.grid > .card {
+  display: flex;
+  flex-direction: column;
+}
+.grid > .card > .actions {
+  margin-top: auto;
+  padding-top: 16px;
+}
+.muted {
+  color: var(--muted);
+}
+.hint {
+  font-size: 13px;
+  color: var(--muted);
+  margin: 4px 0 0;
+}
+.error-text,
+.hint.error-text {
+  color: var(--red);
+}
+.badge {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1;
+  padding: 6px 10px;
+  border-radius: 999px;
+  background: var(--raised);
+  color: var(--muted);
+  white-space: nowrap;
+}
+.badge::before {
+  content: '';
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: currentColor;
+  opacity: 0.8;
+}
+.badge.good {
+  background: var(--green-soft);
+  color: var(--green);
+}
+.badge.warn {
+  background: var(--amber-soft);
+  color: var(--amber-text);
+}
+.badge.bad {
+  background: var(--red-soft);
+  color: var(--red);
+}
+
+/* Forms */
+label {
+  display: grid;
+  gap: 7px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--muted);
+}
+input,
+select,
+textarea {
+  font: inherit;
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: var(--raised);
+  color: var(--text);
+  font-size: 14px;
+  font-weight: 400;
+  transition:
+    border-color 0.12s,
+    box-shadow 0.12s;
+}
+input::placeholder,
+textarea::placeholder {
+  color: var(--faint);
+}
+input:focus,
+select:focus,
+textarea:focus {
+  outline: none;
+  border-color: var(--amber-line);
+  box-shadow: var(--focus);
+}
+select {
+  appearance: none;
+  padding-right: 36px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a939e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 11px center;
+  background-size: 16px;
+  cursor: pointer;
+}
+input[type='checkbox'],
+input[type='radio'] {
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  padding: 0;
+  accent-color: var(--amber-text);
+  cursor: pointer;
+}
+input[type='checkbox']:focus {
+  box-shadow: none;
+}
+textarea {
+  min-height: 100px;
+  resize: vertical;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 13px;
+}
+button {
+  font: inherit;
+  font-size: 13.5px;
+  font-weight: 600;
+  cursor: pointer;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: var(--raised);
+  color: var(--text);
+  padding: 8px 14px;
+  white-space: nowrap;
+  transition:
+    background 0.12s,
+    border-color 0.12s,
+    color 0.12s;
+}
+button:hover {
+  background: var(--hover);
+}
+button:focus-visible,
+nav a:focus-visible,
+summary:focus-visible {
+  outline: none;
+  box-shadow: var(--focus);
+}
+button.primary {
+  background: var(--amber);
+  border-color: var(--amber-text);
+  color: var(--amber-ink);
+}
+button.primary:hover {
+  background: var(--amber-hover);
+  border-color: var(--amber-hover);
+}
+button.danger {
+  background: transparent;
+  color: var(--red);
+  border-color: var(--border);
+}
+button.danger:hover {
+  background: var(--red-soft);
+  border-color: var(--red-soft);
+}
+button:disabled,
+button:disabled:hover {
+  opacity: 0.5;
+  cursor: default;
+  background: var(--raised);
+}
+button.primary:disabled {
+  background: var(--amber);
+}
+.actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-top: 16px;
+}
+.stack > .actions,
+.setup-form .actions {
+  margin-top: 0;
+}
+.actions > input {
+  flex: 1 1 260px;
+  width: auto;
+}
+.divider {
+  border-top: 1px solid var(--border-soft);
+  margin: 18px 0;
+}
+.line {
+  border-top: 1px solid var(--border-soft);
+  padding: 14px 0;
+}
+.line:first-child {
+  border-top: 0;
+  padding-top: 0;
+}
+.pill {
+  display: inline-block;
+  font-size: 11.5px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 6px;
+  background: var(--raised);
+  color: var(--muted);
+  margin: 2px 3px 2px 0;
+}
+.code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  background: var(--raised);
+  border: 1px solid var(--border-soft);
+  color: var(--text);
+  border-radius: 6px;
+  padding: 1px 6px;
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+pre {
+  overflow: auto;
+  margin: 4px 0;
+  background: var(--code-bg);
+  color: var(--code-text);
+  border: 1px solid var(--border-soft);
+  border-radius: 10px;
+  padding: 14px 16px;
+  font-size: 12.5px;
+  line-height: 1.7;
+}
+
+/* Status message */
+#message:not(:empty) {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 16px;
+  margin-bottom: 28px;
+  border-radius: 12px;
+  border: 1px solid var(--green-soft);
+  background: var(--green-soft);
+  color: var(--green);
+  font-weight: 550;
+}
+#message:not(:empty)::before {
+  content: '';
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: currentColor;
+  flex: 0 0 auto;
+}
+#message.error {
+  border-color: var(--red-soft);
+  background: var(--red-soft);
+  color: var(--red);
+}
+footer {
+  color: var(--faint);
+  font-size: 12px;
+  margin-top: 44px;
+  padding-top: 18px;
+  border-top: 1px solid var(--border-soft);
+}
+
+/* Disclosure */
+.check {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.check[hidden] {
+  display: none;
+}
+.check label {
+  display: inline;
+  color: var(--text);
+  font-weight: 500;
+  font-size: 14px;
+}
+label.check {
+  color: var(--muted);
+  font-weight: 500;
+}
+details {
+  border-top: 1px solid var(--border-soft);
+  padding-top: 14px;
+  margin-top: 6px;
+}
+.section > details {
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 14px 18px;
+  margin: 0;
+  background: var(--surface);
+}
+summary {
+  cursor: pointer;
+  font-weight: 600;
+  color: var(--text);
+  list-style: none;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border-radius: 6px;
+}
+summary::-webkit-details-marker {
+  display: none;
+}
+summary::before {
+  content: '';
+  width: 7px;
+  height: 7px;
+  border-right: 1.8px solid var(--faint);
+  border-bottom: 1.8px solid var(--faint);
+  transform: rotate(-45deg);
+  transition: transform 0.15s;
+  margin: 0 3px;
+}
+details[open] > summary::before {
+  transform: rotate(45deg);
+}
+details[open] > summary {
+  margin-bottom: 12px;
+}
+details p strong {
+  font-weight: 600;
+}
+
+/* Connection */
+.pairing-qr {
+  width: min(240px, 100%);
+  height: auto;
+  padding: 12px;
+  background: #fff;
+  border-radius: 14px;
+  image-rendering: pixelated;
+}
+
+/* Phone layouts */
+.tiles {
+  margin-top: 14px;
+}
+.tile {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 130px auto auto;
+  align-items: center;
+  gap: 12px;
+  border-top: 1px solid var(--border-soft);
+  padding: 11px 0;
+}
+.tile .hint {
+  margin: 0;
+  font-size: 12px;
+}
+.tile select {
+  padding-top: 7px;
+  padding-bottom: 7px;
+}
+.tile > div:last-child {
+  display: flex;
+  gap: 4px;
+}
+.tile button {
+  width: 34px;
+  padding: 6px 0;
+}
+.executor-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  border-top: 1px solid var(--border-soft);
+  padding-top: 12px;
+}
+
+/* Execution */
+.default-agent {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  padding: 24px 26px;
+  border-radius: 16px;
+  border: 1px solid var(--amber-line);
+  background:
+    radial-gradient(
+      120% 140% at 0% 0%,
+      var(--amber-soft),
+      transparent 60%
+    ),
+    var(--surface);
+  box-shadow: var(--shadow);
+}
+.default-agent small {
+  color: var(--amber-text);
+}
+.default-agent h3 {
+  font-size: 24px;
+  letter-spacing: -0.01em;
+  margin: 6px 0 2px;
+}
+.default-agent p {
+  margin: 0;
+  color: var(--muted);
+}
+.section > .row {
+  margin-top: 8px;
+}
+.provider-tabs {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  gap: 8px;
+}
+button.provider-tab {
+  min-width: 0;
+  white-space: normal;
+  display: grid;
+  text-align: left;
+  gap: 3px;
+  padding: 12px 16px;
+  border-radius: 12px;
+  background: var(--surface);
+  color: var(--text);
+}
+.provider-tab span {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--faint);
+}
+button.provider-tab.selected {
+  border-color: var(--amber-line);
+  background: var(--amber-soft);
+  box-shadow: inset 0 0 0 1px var(--amber-line);
+}
+.provider-tab.selected strong,
+.provider-tab.selected span {
+  color: var(--amber-text);
+}
+/* Agent rows flow into columns on wide screens instead of one long list. */
+.agent-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
+  column-gap: 40px;
+}
+.agent-choice {
+  min-width: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+  padding: 13px 0;
+  border-top: 1px solid var(--border-soft);
+}
+.agent-choice > div {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+.agent-choice .hint {
+  margin-top: 2px;
+}
+.agent-choice.chosen strong {
+  color: var(--amber-text);
+}
+.agent-choice button {
+  flex-shrink: 0;
+  font-size: 12.5px;
+  padding: 6px 12px;
+  opacity: 0.85;
+}
+.agent-choice:hover button {
+  opacity: 1;
+}
+.empty-agents {
+  padding: 18px 0 4px;
+  margin: 0;
+  color: var(--muted);
+}
+.instance-status {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 13px;
+  font-weight: 550;
+}
+.setup-form {
+  display: grid;
+  gap: 14px;
+  max-width: 560px;
+  padding-top: 4px;
+}
+.setup-form button {
+  justify-self: start;
+}
+.voice-preview {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.voice-preview audio {
+  height: 36px;
+  max-width: 100%;
+}
+
+@media (max-width: 860px) {
+  .shell {
+    grid-template-columns: minmax(0, 1fr);
+    background: none;
+  }
+  .sidebar {
+    position: sticky;
+    z-index: 2;
+    height: auto;
+    gap: 14px;
+    padding: 14px 14px 10px;
+    background: var(--sidebar);
+    border-bottom: 1px solid var(--border-soft);
+  }
+  .brand {
+    padding: 0;
+  }
+  .brand small {
+    display: none;
+  }
+  nav {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    padding-right: 44px;
+  }
+  .agent-list {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  nav a {
+    padding: 7px 11px;
+  }
+  .sidebar-footer {
+    position: absolute;
+    top: 14px;
+    right: 14px;
+    margin: 0;
+    padding: 0;
+    border: 0;
+  }
+  .local {
+    display: none;
+  }
+  .content {
+    padding: 26px 16px 44px;
+  }
+  h2 {
+    font-size: 22px;
+  }
+  .card {
+    padding: 18px;
+  }
+  .row,
+  .default-agent,
+  .agent-choice {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+  .tile {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+}
+
+/* Keep form fields readable when the content column is wide. */
+.stack > label,
+.stack > .check,
+.card > label {
+  max-width: 640px;
+}
+.empty-agents {
+  grid-column: 1 / -1;
+}
+.agent-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+.optional {
+  font-weight: 500;
+  color: var(--faint);
+}
+textarea.prompt-text,
+#profile-prompt {
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 1.55;
+}
+textarea.prompt-text {
+  min-height: 220px;
+}
+.stack > label:has(.prompt-text) {
+  max-width: none;
+}
+
+/* "…" menu for secondary card actions. */
+details.menu {
+  position: relative;
+  border-top: 0;
+  padding-top: 0;
+  margin: 0 0 0 auto;
+}
+/* Pack cards: the agent button on its own row, then Share and the "…" menu. */
+.pack-actions > button.primary {
+  flex: 1 0 100%;
+}
+details.menu > summary {
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: var(--raised);
+  padding: 8px 12px;
+  line-height: 1;
+  font-size: 15px;
+}
+details.menu > summary::before {
+  display: none;
+}
+details.menu[open] > summary {
+  margin-bottom: 0;
+}
+details.menu .menu-list {
+  position: absolute;
+  z-index: 20;
+  bottom: calc(100% + 6px);
+  right: 0;
+  min-width: 200px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 6px;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: var(--surface);
+  box-shadow: var(--shadow);
+}
+details.menu .menu-list button {
+  border: 0;
+  background: transparent;
+  text-align: left;
+  padding: 8px 10px;
+}
+details.menu .menu-list button:hover:not(:disabled) {
+  background: var(--raised);
+}
+
+
+/* Banners (pending restart, unfinished setup) */
+.banner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 18px;
+  padding: 14px 18px;
+  border: 1px solid var(--amber-line);
+  border-radius: 14px;
+  background: var(--amber-soft);
+}
+.banner .hint {
+  margin: 2px 0 0;
+}
+a.button {
+  display: inline-block;
+  font-size: 13.5px;
+  font-weight: 600;
+  border-radius: 10px;
+  padding: 8px 14px;
+  background: var(--amber);
+  color: var(--amber-ink);
+  text-decoration: none;
+  white-space: nowrap;
+}
+a.button:hover {
+  background: var(--amber-hover);
+}
+
+/* Setup */
+.setup-steps {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.setup-steps button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: transparent;
+  border-color: var(--border-soft);
+  color: var(--muted);
+}
+.setup-steps button.current {
+  border-color: var(--amber-line);
+  background: var(--amber-soft);
+  color: var(--text);
+}
+.step-mark {
+  display: inline-grid;
+  place-items: center;
+  width: 22px;
+  height: 22px;
+  flex: none;
+  border-radius: 50%;
+  background: var(--raised);
+  font-size: 12px;
+}
+.done > .step-mark {
+  background: var(--green-soft);
+  color: var(--green);
+}
+.setup-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 16px;
+}
+.download-qr {
+  width: min(200px, 100%);
+  height: auto;
+  padding: 10px;
+  background: #fff;
+  border-radius: 14px;
+  image-rendering: pixelated;
+}
+.plain-steps {
+  margin: 0;
+  padding-left: 20px;
+}
+.plain-steps li + li {
+  margin-top: 8px;
+}
+.setup-nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding-top: 4px;
+}
+.setup-nav .actions {
+  margin: 0;
+}
+.integration-options {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 10px;
+}
+.integration-option {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 12px 14px;
+  border: 1px solid var(--border-soft);
+  border-radius: 12px;
+  background: var(--raised);
+  cursor: pointer;
+}
+.integration-option input {
+  margin-top: 4px;
+}
+.integration-option.unavailable {
+  opacity: 0.65;
+  cursor: default;
+}
+.setup-summary {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.setup-summary li {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 0;
+  border-bottom: 1px solid var(--border-soft);
+}
+.setup-summary li button {
+  margin-left: auto;
+}
+.setup-grid > .card {
+  align-content: start;
+}
+.content a:not(.button) {
+  color: var(--amber-text);
+}
+button.link { background: none; border: none; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; }
+#voice-endpoint:empty {
+  display: none;
+}
+
+/* Setup finished */
+.setup-complete .row {
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: 16px;
+}
+.setup-complete p {
+  margin: 6px 0 0;
+}
+.done-badge {
+  display: inline-grid;
+  place-items: center;
+  width: 44px;
+  height: 44px;
+  flex: none;
+  border-radius: 50%;
+  background: var(--green-soft);
+  color: var(--green);
+  font-size: 22px;
+  font-weight: 700;
+}
+.manage-links {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 10px;
+}
+.content a.manage-link {
+  display: grid;
+  gap: 4px;
+  padding: 12px 14px;
+  border: 1px solid var(--border-soft);
+  border-radius: 12px;
+  background: var(--raised);
+  color: var(--text);
+  text-decoration: none;
+}
+.content a.manage-link:hover {
+  background: var(--hover);
+}
+
+/* Settings */
+.account-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.account-row .hint {
+  margin: 0;
+}
+.avatar {
+  flex: 0 0 auto;
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  background: var(--amber);
+  color: var(--amber-ink);
+  font-weight: 700;
+}
+.device-code {
+  display: grid;
+  gap: 2px;
+  justify-items: start;
+  padding: 14px 18px;
+  border: 1px dashed var(--amber-line);
+  border-radius: 12px;
+  background: var(--amber-soft);
+}
+.device-code strong {
+  font: 700 26px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
+  letter-spacing: 0.14em;
+  color: var(--amber-text);
+}
+ol.steps {
+  margin: 0;
+  padding-left: 20px;
+}
+.segmented {
+  display: inline-flex;
+  gap: 4px;
+  padding: 3px;
+  border: 1px solid var(--border);
+  border-radius: 11px;
+  background: var(--raised);
+  justify-self: start;
+}
+.segmented button {
+  border-color: transparent;
+  background: transparent;
+  padding: 6px 16px;
+}
+.segmented button[aria-pressed='true'] {
+  background: var(--amber);
+  color: var(--amber-ink);
+}