:root {
  --bg: #f4f6f6;
  --surface: #ffffff;
  --surface-2: #f7faf9;
  --ink: #17211e;
  --muted: #62706c;
  --line: #d9e1de;
  --accent: #0f766e;
  --accent-dark: #10413d;
  --accent-2: #c27b2d;
  --blue: #2563eb;
  --warn: #946200;
  --bad: #b4233a;
  --good: #177245;
  --shadow: 0 12px 32px rgba(23, 33, 30, 0.07);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  letter-spacing: 0;
}

.join-page {
  min-height: 100vh;
  background: #f4f6f6;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: wait;
  opacity: 0.65;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  font-size: 20px;
  line-height: 1.2;
}

h2 {
  font-size: 15px;
  line-height: 1.25;
}

h3 {
  font-size: 13px;
  line-height: 1.25;
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 22px;
  background: #14221f;
  color: #fff;
  border-bottom: 3px solid var(--accent-2);
}

.brand {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 12px;
}

.brand img {
  flex: 0 0 auto;
}

.brand p,
.panel-head p {
  color: var(--muted);
  margin-top: 3px;
}

.brand p {
  color: rgba(255, 255, 255, 0.72);
  overflow-wrap: anywhere;
}

.header-actions,
.button-row,
.device-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.button-row {
  justify-content: flex-end;
}

.button-row.tight {
  gap: 6px;
}

.icon-button,
.text-button,
.primary-button,
.danger-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  min-height: 36px;
  padding: 0 12px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}

.icon-button {
  width: 38px;
  padding: 0;
  font-size: 18px;
}

.primary-button {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 650;
}

.text-button,
.primary-button,
.danger-button {
  white-space: nowrap;
}

.danger-button {
  background: #fff;
  border-color: #e7a7b2;
  color: var(--bad);
  font-weight: 650;
}

.shell {
  width: min(1520px, 100%);
  margin: 0 auto;
  padding: 18px;
}

.join-shell {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 18px;
}

.join-card {
  display: grid;
  gap: 14px;
  width: min(560px, 100%);
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.join-card h1 {
  margin-top: 4px;
  font-size: 24px;
}

.join-card p {
  color: var(--muted);
  line-height: 1.55;
}

.join-status {
  width: max-content;
  max-width: 100%;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #e7f4ef;
  color: var(--good);
  font-weight: 700;
}

.join-details {
  display: grid;
  gap: 8px;
  margin: 0;
}

.join-details > div {
  display: grid;
  gap: 4px;
  padding: 9px;
  border: 1px solid #dfe8e5;
  border-radius: 8px;
  background: #f7faf9;
}

.join-details dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.join-details dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.join-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.join-note {
  font-size: 12px;
}

.token-panel {
  display: grid;
  grid-template-columns: auto minmax(200px, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 12px;
  background: #fff8e6;
  border: 1px solid #edd490;
  border-radius: 8px;
}

.token-panel small {
  grid-column: 2 / -1;
  color: #7c4d12;
  font-size: 12px;
}

.locked-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid #efc0a3;
  border-left: 4px solid #b45309;
  border-radius: 8px;
  background: #fff7ed;
  color: #73370d;
}

.locked-notice span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.locked-memory-gate {
  display: grid;
  gap: 10px;
  grid-column: 1 / -1;
  padding: 18px;
  border: 1px solid rgba(180, 83, 9, 0.32);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 248, 230, 0.96), rgba(255, 255, 255, 0.82)),
    var(--surface);
  box-shadow: 0 18px 50px rgba(92, 57, 18, 0.12);
}

.locked-memory-gate strong {
  color: var(--ink);
  font-size: clamp(20px, 2vw, 28px);
}

.locked-memory-gate p {
  max-width: 680px;
  margin: 0;
  color: #7c4d12;
}

.locked-memory-gate .primary-button {
  justify-self: start;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.access-passport {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) auto minmax(260px, 0.8fr);
  gap: 12px;
  align-items: stretch;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid #c9d9d5;
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  background: #fbfdfc;
  box-shadow: var(--shadow);
}

.access-passport-main,
.access-passport-current {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
}

.access-passport-main h2 {
  font-size: 17px;
}

.access-passport code,
.passport-join-item code {
  display: block;
  width: 100%;
  padding: 9px 10px;
  border-radius: 6px;
  background: #edf4f3;
  color: #123c38;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.access-passport-main p,
.access-passport-current small {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.access-passport-actions {
  display: grid;
  align-content: center;
  gap: 8px;
  min-width: 180px;
}

.passport-join-links {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.passport-join-item {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.passport-tailnet-setup {
  grid-column: 1 / -1;
  background: #f5faf9;
  border-color: #b8d8d1;
}

.passport-join-item > div:first-child {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.passport-join-item p,
.passport-join-item small {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.compact-steps {
  margin: 0;
  padding-left: 20px;
  color: #243834;
  font-size: 13px;
  line-height: 1.5;
}

.metric-card,
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.metric-card {
  min-width: 0;
  padding: 13px 14px;
}

.metric-card strong {
  display: block;
  margin-top: 2px;
  font-size: 18px;
  overflow-wrap: anywhere;
}

.metric-card small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
}

.workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.75fr);
  gap: 14px;
  margin-top: 14px;
}

.panel {
  min-width: 0;
  padding: 14px;
}

.panel.wide {
  grid-column: 1 / -1;
}

.primary-panel {
  min-height: 540px;
}

.super-panel {
  background: #fbfcfc;
}

.auth-panel {
  background: #fbfcfb;
}

.home-panel {
  background: #fcfcfb;
}

.monitor-panel {
  background: #fbfcfd;
}

.access-fabric-panel {
  background: #fbfdfc;
}

.brain-panel {
  background: #fbfcfb;
  border-top: 3px solid var(--accent-2);
}

.quality-panel {
  background: #fcfcfb;
}

.super-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.super-chip {
  min-width: 0;
  padding: 10px;
  border: 1px solid #dfe8e5;
  border-radius: 8px;
  background: #f2f7f6;
}

.super-chip span,
.super-item span,
.super-item small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.super-chip strong {
  display: block;
  margin-top: 4px;
  font-size: 18px;
  overflow-wrap: anywhere;
}

.super-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.extended-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: 14px;
}

.mini-head {
  margin-bottom: 8px;
}

.super-list {
  display: grid;
  gap: 8px;
}

.device-access-list {
  display: grid;
  gap: 10px;
}

.device-access-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.device-access-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.device-access-head strong,
.device-access-head span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.device-access-head span,
.device-access-card small {
  color: var(--muted);
  font-size: 12px;
}

.device-access-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.device-access-columns ul {
  display: grid;
  gap: 6px;
  margin: 7px 0 0;
  padding: 0;
  list-style: none;
}

.device-access-columns li {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 8px;
  border: 1px solid #e0e8e6;
  border-radius: 6px;
  background: #f9fbfa;
}

.device-access-columns li strong,
.device-access-columns li span,
.device-access-columns li code {
  min-width: 0;
  overflow-wrap: anywhere;
}

.device-access-columns li span {
  color: var(--muted);
  font-size: 12px;
}

.device-access-columns li code {
  padding: 6px 7px;
  border-radius: 6px;
  background: #edf4f3;
  color: #143c39;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
}

.auth-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 10px;
}

.required-auth-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.auth-item {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.required-auth-item {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid #d7e1de;
  border-left: 3px solid var(--accent-2);
  border-radius: 8px;
  background: #fff;
}

.required-auth-item.ready {
  border-left-color: var(--accent);
  background: #f7fbfa;
}

.auth-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.auth-item-head strong,
.auth-item p,
.auth-item small {
  overflow-wrap: anywhere;
}

.auth-item-head span,
.auth-item small {
  color: var(--muted);
  font-size: 12px;
}

.auth-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.auth-links a {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 3px 8px;
  border: 1px solid #cfdedb;
  border-radius: 6px;
  color: #114f49;
  text-decoration: none;
}

.auth-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

.auth-columns ul {
  margin: 6px 0 0;
  padding-left: 18px;
  color: #33423f;
  font-size: 13px;
  line-height: 1.45;
}

.home-control-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: 12px;
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 10px;
}

.home-item {
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.home-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.home-item-head strong,
.home-item p,
.home-item small {
  overflow-wrap: anywhere;
}

.home-item-head span,
.home-item small {
  color: var(--muted);
  font-size: 12px;
}

.home-action-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(150px, 0.8fr);
  gap: 8px;
}

.home-action-buttons {
  grid-column: 1 / -1;
}

.monitor-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 12px;
}

.monitor-list {
  display: grid;
  gap: 8px;
}

.monitor-item {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.monitor-item > div:first-child {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.monitor-item p,
.monitor-item code,
.monitor-item strong,
.access-item small {
  overflow-wrap: anywhere;
}

.monitor-item p,
.access-item small {
  color: var(--muted);
  font-size: 12px;
}

.monitor-item code {
  display: block;
  padding: 7px 8px;
  border-radius: 6px;
  background: #edf4f3;
  color: #143c39;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}

.mobile-usable {
  border-color: #b9dccd;
}

.mobile-blocked {
  border-color: #ead6a3;
}

.brain-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.brain-list {
  display: grid;
  gap: 8px;
}

.brain-item {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 10px;
  border: 1px solid #dce6e2;
  border-radius: 8px;
  background: #fff;
}

.brain-item > div:first-child {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.brain-item strong,
.brain-item p,
.brain-item small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.brain-item p {
  color: #33423f;
  font-size: 13px;
  line-height: 1.45;
}

.brain-item small,
.brain-item span {
  color: var(--muted);
  font-size: 12px;
}

.identity-card {
  border-left: 3px solid var(--accent-2);
}

.prediction-item {
  border-left: 3px solid var(--accent);
}

.compact-brain-item {
  padding: 9px;
}

.brain-maturity {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.maturity-meter {
  position: relative;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e2eae7;
}

.maturity-meter span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

.score-0 { width: 0%; }
.score-5 { width: 5%; }
.score-10 { width: 10%; }
.score-15 { width: 15%; }
.score-20 { width: 20%; }
.score-25 { width: 25%; }
.score-30 { width: 30%; }
.score-35 { width: 35%; }
.score-40 { width: 40%; }
.score-45 { width: 45%; }
.score-50 { width: 50%; }
.score-55 { width: 55%; }
.score-60 { width: 60%; }
.score-65 { width: 65%; }
.score-70 { width: 70%; }
.score-75 { width: 75%; }
.score-80 { width: 80%; }
.score-85 { width: 85%; }
.score-90 { width: 90%; }
.score-95 { width: 95%; }
.score-100 { width: 100%; }

.maturity-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.maturity-columns ul {
  display: grid;
  gap: 6px;
  margin: 7px 0 0;
  padding-left: 18px;
  color: #33423f;
  font-size: 13px;
  line-height: 1.45;
}

.quality-layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.quality-list {
  display: grid;
  gap: 8px;
}

.quality-item {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.quality-item.passed {
  border-color: #cfe4d9;
}

.quality-item.failed {
  border-color: #ead6a3;
}

.quality-item > div:first-child {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.quality-item strong,
.quality-item p {
  min-width: 0;
  overflow-wrap: anywhere;
}

.quality-item p {
  color: var(--muted);
  font-size: 12px;
}

.super-item {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.super-item > div:first-child {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.super-item strong,
.super-item p {
  min-width: 0;
  overflow-wrap: anywhere;
}

.super-item p {
  color: #33423f;
  font-size: 13px;
  line-height: 1.45;
}

.connector-item,
.app-item,
.safety-item {
  border-color: #d7e3e0;
}

.boundary-line {
  color: #8a3d32 !important;
}

.side-stack {
  display: grid;
  align-content: start;
  gap: 14px;
}

.panel-head,
.device-card-top,
.access-item > div,
.event-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.panel-head {
  margin-bottom: 12px;
}

.compact-head {
  margin-bottom: 9px;
}

.label {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  padding: 9px 10px;
}

textarea {
  min-height: 92px;
  resize: vertical;
}

.stack {
  display: grid;
  gap: 9px;
}

.access-list,
.join-links,
.device-grid,
.events {
  display: grid;
  gap: 9px;
}

.events {
  max-height: 620px;
  overflow: auto;
  padding-right: 2px;
}

.access-item,
.device-card,
.event-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}

.access-item {
  display: grid;
  gap: 6px;
  padding: 10px;
}

.join-links {
  margin-top: 10px;
}

.join-link-item {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #cfdedb;
  border-radius: 8px;
  background: #ffffff;
}

.join-link-item > div:first-child {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.join-link-item a {
  color: #114f49;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.join-link-item small {
  color: var(--muted);
}

.access-item p {
  color: #34423f;
  font-size: 13px;
  line-height: 1.45;
}

.access-item code,
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.access-item code {
  display: block;
  padding: 7px 8px;
  border-radius: 6px;
  background: #edf4f3;
  color: #143c39;
}

.device-grid {
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}

.device-card {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.device-route {
  padding: 8px;
  border-radius: 6px;
  background: #eef5f4;
}

.device-actions {
  justify-content: flex-end;
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.pill,
.status-pill,
.event-type {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #edf2f0;
  color: #30403d;
  font-size: 12px;
  white-space: nowrap;
}

.status-pill.home-base,
.status-pill.reachable,
.status-pill.local,
.status-pill.indexed,
.status-pill.active,
.status-pill.online,
.status-pill.protected,
.status-pill.ready,
.status-pill.ok,
.status-pill.primary-mobile-route,
.status-pill.usable-from-network-if-policy-allows,
.status-pill.usable-from-lan,
.status-pill.ready-to-auth,
.status-pill.connected-or-data-seen,
.status-pill.manual-export-ready,
.status-pill.configured,
.status-pill.tailnet-route,
.status-pill.data-seen,
.status-pill.active-if-uploaded,
.status-pill.reference-only,
.status-pill.high,
.status-pill.auto-safe,
.status-pill.guarded-auto,
.status-pill.codex-reviewed,
.status-pill.operationally-complete-with-continuous-review {
  background: #daf3e7;
  color: var(--good);
}

.status-pill.unreachable,
.status-pill.offline,
.status-pill.failed {
  background: #fae2e7;
  color: var(--bad);
}

.status-pill.needs-device-action,
.status-pill.planned,
.status-pill.partial,
.status-pill.unconfigured,
.status-pill.unknown,
.status-pill.waiting-for-data,
.status-pill.waiting-for-feed,
.status-pill.waiting-for-events,
.status-pill.waiting-for-sources,
.status-pill.blocked-on-device-action,
.status-pill.installed,
.status-pill.optional,
.status-pill.needs-service,
.status-pill.needs-official-export,
.status-pill.needs-api-or-export,
.status-pill.needs-export,
.status-pill.needs-device-permission,
.status-pill.ready-to-connect,
.status-pill.needs-pc-tailscale-ip {
  background: #fff0c7;
  color: var(--warn);
}

.status-pill.not-for-iphone,
.status-pill.not-phone-primary-port,
.status-pill.blocked-by-security-mode,
.status-pill.pc-only,
.status-pill.blocked,
.status-pill.warning,
.status-pill.medium,
.status-pill.not-perfect-yet {
  background: #fff0c7;
  color: var(--warn);
}

.status-pill.needs-credentials,
.status-pill.needs-app-review-or-oauth,
.status-pill.low {
  background: #fff0c7;
  color: var(--warn);
}

.status-pill.metadata-only,
.status-pill.read {
  background: #e1ebff;
  color: var(--blue);
}

.status-pill.ask,
.status-pill.private {
  background: #eee7ff;
  color: #6040a7;
}

.event-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 10px;
  padding: 10px;
}

.event-row input {
  width: auto;
  margin-top: 4px;
}

.event-title {
  align-items: center;
  font-weight: 720;
}

.event-title span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.event-type {
  background: #e7f2f1;
  color: #14534d;
  font-weight: 600;
}

.event-meta {
  color: var(--muted);
  font-size: 12px;
  margin-top: 3px;
}

.event-body {
  margin-top: 6px;
  color: #333f3c;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.collection-row {
  align-items: start;
}

.collection-card {
  display: grid;
  gap: 10px;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid #cddbd7;
  border-radius: 8px;
  background: #fbfdfc;
}

.collection-head,
.collection-dashboard {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.collection-head strong,
.collection-dashboard strong {
  display: block;
  overflow-wrap: anywhere;
}

.collection-head span,
.collection-dashboard span:last-child {
  color: var(--muted);
  font-size: 12px;
}

.collection-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 7px;
}

.disk-metrics {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.collection-metric {
  min-width: 0;
  padding: 8px;
  border: 1px solid #dfe8e5;
  border-radius: 6px;
  background: #f2f7f6;
}

.collection-metric span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.collection-metric strong {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.collection-dashboard {
  align-items: center;
  padding: 8px;
  border-left: 3px solid var(--accent-2);
  border-radius: 6px;
  background: #fff9ed;
}

.browser-memory {
  display: grid;
  gap: 7px;
  padding: 8px;
  border-radius: 6px;
  background: #eef5f4;
}

.collection-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.collection-columns ul {
  display: grid;
  gap: 6px;
  margin: 7px 0 0;
  padding: 0;
  list-style: none;
}

.tech-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.collection-columns li,
.tech-list li {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid #e0e8e6;
  border-radius: 6px;
  background: #fff;
}

.collection-columns li strong,
.collection-columns li span,
.collection-columns li em,
.tech-list li strong,
.tech-list li span,
.tech-list li em {
  min-width: 0;
  overflow-wrap: anywhere;
}

.collection-columns li span,
.collection-columns li em,
.tech-list li span,
.tech-list li em,
.collection-empty {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.collection-empty {
  margin-top: 7px;
  padding: 8px;
  border: 1px dashed var(--line);
  border-radius: 6px;
}

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

th {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(14, 22, 20, 0.52);
}

.modal {
  width: min(860px, 100%);
  max-height: min(860px, calc(100vh - 36px));
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(16, 24, 22, 0.28);
  padding: 16px;
}

.modal.small {
  width: min(680px, 100%);
}

.modal.auth-modal {
  width: min(760px, 100%);
}

.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.modal-head p {
  color: var(--muted);
  margin-top: 3px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.form-grid label,
.provision-grid label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.form-grid label input,
.form-grid label select,
.form-grid label textarea,
.provision-grid label input,
.provision-grid label select {
  color: var(--ink);
  font-size: 14px;
  font-weight: 400;
}

.span-2 {
  grid-column: span 2;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
}

.modal-actions .danger-button {
  margin-right: auto;
}

.auth-modal-body {
  display: grid;
  gap: 12px;
}

.auth-modal-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.auth-modal-card p,
.auth-modal-card small {
  color: var(--muted);
  line-height: 1.45;
}

.auth-setup-card .button-row {
  justify-content: flex-end;
}

.auth-redirect-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.auth-step-list {
  display: grid;
  gap: 6px;
  margin: 6px 0 0;
  padding-left: 20px;
  color: var(--muted);
  line-height: 1.45;
}

.auth-url-box {
  display: block;
  max-height: 150px;
  overflow: auto;
  padding: 10px;
  border: 1px solid #dfe8e5;
  border-radius: 8px;
  background: #f5faf9;
  color: var(--ink);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.auth-modal-output:empty {
  display: none;
}

.split-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: 16px;
}

.llm-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  gap: 10px;
}

.llm-layout textarea,
.llm-layout .output {
  grid-column: 1 / -1;
}

.llm-layout button {
  grid-column: 2;
}

.output {
  min-height: 180px;
  margin: 0;
  padding: 12px;
  border-radius: 8px;
  background: #17201d;
  color: #dce8e0;
  white-space: pre-wrap;
  overflow: auto;
}

.output.compact {
  min-height: 150px;
  margin-top: 10px;
}

.provision-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 1fr) 130px;
  gap: 10px;
}

.token-table {
  margin-top: 12px;
}

.empty {
  color: var(--muted);
  padding: 12px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}

.daily-grid,
.project-memory-list,
.diary-list,
.photo-access-list,
.photo-library-days {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.project-memory-card,
.diary-entry,
.photo-root-card,
.photo-item,
.photo-day-card,
.photo-manage-item,
.google-photos-panel {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}

.project-memory-card ul,
.diary-entry ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
}

.diary-summary-text {
  font-size: 14px;
  line-height: 1.55;
  color: #1f312d;
}

.diary-chapters {
  display: grid;
  gap: 8px;
}

.diary-chapter {
  display: grid;
  gap: 4px;
  padding: 9px;
  border-left: 3px solid #5b8a7f;
  background: #f7faf9;
}

.diary-chapter p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.activity-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.activity-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid #cfdedb;
  border-radius: 999px;
  background: #fff;
  color: #24423d;
  font-size: 12px;
}

.activity-chip span {
  color: var(--muted);
}

.media-strip {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.media-thumb {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid #d5e1de;
  border-radius: 8px;
  background: #fff;
}

.media-thumb img,
.media-thumb video {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #e8efed;
}

.media-thumb-link {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.setup-advanced {
  grid-column: 1 / -1;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.72);
  border-radius: 8px;
  background: rgba(255,255,255,0.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.70);
}

.setup-advanced > summary {
  cursor: pointer;
  font-weight: 700;
  color: #182621;
}

.setup-advanced > * + * {
  margin-top: 12px;
}

.compact-day-card {
  padding: 12px;
}

.compact-day-card .device-access-head span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.media-thumb figcaption {
  display: grid;
  gap: 3px;
  padding: 7px;
  font-size: 11px;
}

.media-thumb figcaption strong,
.media-thumb figcaption span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-thumb figcaption span {
  color: var(--muted);
}

.media-thumb figcaption small {
  overflow-wrap: anywhere;
  color: #24423d;
}

.memory-photo-collage {
  position: relative;
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(6, 46px);
  min-height: 292px;
  margin: 2px 0 6px;
  padding: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.78);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.62), rgba(231,241,255,0.34)),
    linear-gradient(90deg, rgba(52,94,201,0.10), rgba(255,144,118,0.12));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.92), 0 18px 38px rgba(30,42,55,0.10);
}

.memory-photo-collage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(35,50,68,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35,50,68,0.045) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), rgba(0,0,0,0.45));
}

.memory-photo-card {
  position: relative;
  z-index: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 4px solid rgba(255,255,255,0.90);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 30px rgba(22,32,46,0.18), inset 0 1px 0 rgba(255,255,255,0.9);
  transform: rotate(var(--tilt, 0deg));
}

.memory-photo-card img,
.memory-photo-card video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #eef3f2;
}

.memory-photo-card figcaption {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  padding: 5px 7px;
  overflow: hidden;
  border-radius: 7px;
  background: rgba(255,255,255,0.76);
  color: #1f312d;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.memory-photo-card.stack-0 {
  grid-area: 1 / 1 / 5 / 6;
  --tilt: -3.5deg;
}

.memory-photo-card.stack-1 {
  z-index: 3;
  grid-area: 2 / 5 / 7 / 10;
  --tilt: 2.4deg;
}

.memory-photo-card.stack-2 {
  grid-area: 1 / 9 / 4 / 13;
  --tilt: -1.8deg;
}

.memory-photo-card.stack-3 {
  z-index: 2;
  grid-area: 4 / 1 / 7 / 5;
  --tilt: 2.8deg;
}

.memory-photo-card.stack-4 {
  grid-area: 4 / 9 / 7 / 13;
  --tilt: -2.6deg;
}

.memory-photo-card.stack-5 {
  z-index: 4;
  grid-area: 1 / 6 / 4 / 10;
  --tilt: 4deg;
}

.memory-photo-card.stack-6 {
  z-index: 1;
  grid-area: 3 / 3 / 6 / 8;
  --tilt: -5deg;
}

.music-strip {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.music-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(232,255,241,0.72), rgba(255,255,255,0.48));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
  color: inherit;
  text-decoration: none;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.music-card.playable {
  cursor: pointer;
}

.music-card.playable:hover,
.music-card.playable:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(29,185,84,0.42);
  background: linear-gradient(145deg, rgba(229,255,239,0.86), rgba(255,255,255,0.62));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.78), 0 12px 28px rgba(20,93,54,0.12);
  outline: none;
}

.music-card img,
.music-fallback {
  width: 54px;
  height: 54px;
  border-radius: 8px;
  object-fit: cover;
  background: #d9f4e3;
}

.music-fallback {
  display: grid;
  place-items: center;
  color: #17643a;
  font-size: 12px;
  font-weight: 800;
}

.music-card div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.music-card strong,
.music-card span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.music-card span {
  color: var(--muted);
  font-size: 11px;
}

.music-card a {
  width: fit-content;
  color: #17643a;
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
}

.spotify-card-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.spotify-card-link:hover,
.spotify-card-link:focus-visible {
  border-color: rgba(29,185,84,0.42);
  outline: none;
}

.life-memory-strip {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.life-memory-card {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(255,255,255,0.66), rgba(229,240,255,0.46));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), 0 16px 30px rgba(34,44,74,0.08);
}

.life-memory-card > span {
  width: fit-content;
  padding: 3px 7px;
  border: 1px solid rgba(255,255,255,0.72);
  border-radius: 999px;
  background: rgba(255,255,255,0.48);
  color: #426178;
  font-size: 10px;
  font-weight: 800;
}

.life-memory-card strong,
.life-memory-card small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.life-memory-card strong {
  color: var(--ink);
  font-size: 13px;
}

.life-memory-card small {
  color: var(--muted);
  font-size: 11px;
}

.life-memory-card a {
  width: fit-content;
  color: #245e90;
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
}

.photo-recent-grid {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.photo-day-card {
  align-content: start;
}

.photo-manage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
}

.photo-manage-item {
  background: #fff;
}

.photo-manage-item.favorite {
  border-color: #d8b45c;
  background: #fffaf0;
}

.photo-manage-item > span {
  color: var(--muted);
  font-size: 12px;
}

.google-photos-panel {
  grid-column: 1 / -1;
  margin-top: 4px;
  background: #f8fbff;
}

.google-photos-panel code {
  overflow-wrap: anywhere;
}

.google-sync-detail {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.72);
  border-radius: 8px;
  background: linear-gradient(150deg, rgba(255,255,255,0.64), rgba(255,255,255,0.28));
}

.google-sync-detail > span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.photo-access-list.compact {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}

.life-connectors {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(280px, 1fr);
  gap: 12px;
  margin-top: 12px;
}

.life-connectors > section {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f9fbfa;
}

.compact-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.connector-missing {
  grid-column: 1 / -1;
  padding: 8px;
  border: 1px solid #edd490;
  border-radius: 8px;
  background: #fff8e6;
  color: #6b4a00;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.memory-need-list {
  display: grid;
  gap: 8px;
}

.memory-need {
  display: grid;
  gap: 6px;
  padding: 9px;
  border: 1px solid #dbe5e2;
  border-left: 3px solid var(--accent-2);
  border-radius: 8px;
  background: #fff;
}

.memory-need > div {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.memory-need p,
.memory-need small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.life-calendar-wrap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.life-month {
  min-width: 0;
  overflow-x: auto;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.life-month-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.life-month-head span {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.life-weekdays,
.life-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  min-width: 560px;
}

.life-weekdays span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

.life-day-cell {
  display: grid;
  align-content: start;
  gap: 4px;
  min-height: 126px;
  padding: 6px;
  border: 1px solid #dfe8e5;
  border-radius: 8px;
  background: #f7faf9;
}

.life-day-cell.outside {
  opacity: 0.5;
  background: #f1f4f3;
}

.life-day-cell.has-items {
  border-color: #b8d8d1;
  background: #fbfdfc;
}

.life-day-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  min-height: 18px;
}

.life-day-top strong {
  font-size: 12px;
}

.life-day-top span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
}

.life-cell-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
  background: #e8efed;
}

.life-day-items {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  min-width: 0;
}

.life-day-chip {
  max-width: 100%;
  min-height: 18px;
  padding: 2px 5px;
  border-radius: 5px;
  background: #e7f4ef;
  color: #123c38;
  font-size: 10px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.life-day-chip.calendar {
  background: #e8f0ff;
  color: #1b4ca3;
}

.life-day-chip.youtube-like {
  background: #fdecec;
  color: #982324;
}

.life-day-chip.spotify-play,
.life-day-chip.spotify-liked,
.life-day-chip.spotify-top {
  background: #e6f7ed;
  color: #17643a;
}

.life-day-chip.sports-schedule {
  background: #fff3dc;
  color: #7a4b00;
}

.life-day-chip.photo-day {
  background: #eef2ff;
  color: #38439a;
}

.life-calendar-wrap {
  grid-template-columns: 1fr;
}

.life-scrap-month {
  position: relative;
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.74);
  border-radius: 8px;
  background:
    linear-gradient(120deg, rgba(255,255,255,0.82), rgba(247,250,246,0.52)),
    repeating-linear-gradient(0deg, rgba(49,64,77,0.055) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(49,64,77,0.055) 0 1px, transparent 1px 24px);
  box-shadow: 0 22px 48px rgba(32, 47, 58, 0.12), inset 0 1px 0 rgba(255,255,255,0.8);
}

.life-scrap-month::before,
.life-scrap-month::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
}

.life-scrap-month::before {
  width: 148px;
  height: 26px;
  top: 12px;
  left: 38%;
  transform: rotate(-3deg);
  background: rgba(238, 225, 202, 0.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.65);
}

.life-scrap-month::after {
  width: 110px;
  height: 110px;
  right: -28px;
  bottom: -30px;
  border: 16px solid rgba(74, 105, 186, 0.12);
}

.scrap-month-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  padding: 4px 2px 0;
}

.scrap-month-head span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.scrap-month-head h3 {
  margin: 0;
  color: #13161d;
  font-size: 34px;
  line-height: 1;
}

.scrap-month-head p {
  margin: 0;
  color: #42505a;
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.life-scrap-paper {
  position: relative;
  z-index: 1;
  min-width: 0;
  overflow-x: auto;
  padding: 12px;
  border: 1px solid rgba(42, 51, 61, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(rgba(255,255,255,0.56), rgba(255,255,255,0.56)),
    repeating-linear-gradient(0deg, rgba(30,42,54,0.07) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(30,42,54,0.07) 0 1px, transparent 1px 22px),
    #fbf3e7;
}

.life-scrap-weekdays,
.life-scrap-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(92px, 1fr));
  gap: 8px;
  min-width: 760px;
}

.life-scrap-weekdays {
  margin-bottom: 8px;
}

.life-scrap-weekdays span {
  color: #2c3540;
  font-size: 11px;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

.life-scrap-day {
  position: relative;
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 154px;
  padding: 8px;
  border: 1px solid rgba(32,42,52,0.12);
  border-radius: 6px;
  background: rgba(255,255,255,0.76);
  box-shadow: 0 10px 20px rgba(38,49,60,0.09);
}

.life-scrap-day.has-items {
  background: linear-gradient(145deg, rgba(255,255,255,0.92), rgba(246,248,252,0.72));
}

.life-scrap-day.outside {
  opacity: 0.42;
  box-shadow: none;
}

.life-scrap-day.tilt-1,
.day-polaroid.tilt-1 {
  transform: rotate(-1deg);
}

.life-scrap-day.tilt-2,
.day-polaroid.tilt-2 {
  transform: rotate(1deg);
}

.life-scrap-day.tilt-3,
.day-polaroid.tilt-3 {
  transform: rotate(-0.6deg);
}

.life-scrap-day.tilt-4,
.day-polaroid.tilt-4 {
  transform: rotate(0.8deg);
}

.life-scrap-day.tilt-5,
.life-scrap-day.tilt-6 {
  transform: rotate(-0.4deg);
}

.scrap-date-pin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-height: 24px;
}

.scrap-date-pin strong {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #1b2130;
  color: #fff;
  font-size: 13px;
}

.scrap-date-pin span {
  color: #596169;
  font-size: 10px;
  font-weight: 900;
}

.scrap-day-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 5px solid #fff;
  border-bottom-width: 14px;
  border-radius: 4px;
  background: #e8efed;
  box-shadow: 0 9px 18px rgba(22,31,40,0.16);
}

.scrap-day-blank {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px dashed rgba(33,45,55,0.22);
  border-radius: 6px;
  color: #758087;
  font-size: 11px;
  font-weight: 800;
  background: rgba(255,255,255,0.35);
}

.scrap-day-notes {
  display: grid;
  gap: 6px;
}

.scrap-day-notes p {
  margin: 0;
  color: #17202a;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.scrap-day-notes > div,
.scrap-sticker-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.scrap-sticker {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  min-height: 22px;
  padding: 3px 7px;
  border: 1px solid rgba(20,29,38,0.12);
  border-radius: 999px;
  color: #19312d;
  background: #e8f6ef;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

.scrap-sticker strong,
.scrap-sticker em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
}

.scrap-sticker.calendar,
.scrap-sticker.gmail-message {
  background: #e7efff;
  color: #1b4ca3;
}

.scrap-sticker.photo-day,
.scrap-sticker.diary {
  background: #f0edff;
  color: #48408f;
}

.scrap-sticker.sports-schedule {
  background: #fff2d8;
  color: #7a4b00;
}

.scrap-sticker.spotify-play,
.scrap-sticker.spotify-liked,
.scrap-sticker.spotify-top {
  background: #e4f7ed;
  color: #17643a;
}

.life-day-pages {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.life-day-page {
  position: relative;
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(29,38,47,0.12);
  border-radius: 8px;
  background:
    linear-gradient(155deg, rgba(255,255,255,0.92), rgba(250,245,236,0.72)),
    repeating-linear-gradient(0deg, rgba(30,42,54,0.05) 0 1px, transparent 1px 20px);
  box-shadow: 0 14px 28px rgba(37,49,61,0.12);
}

.life-day-page::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 28px;
  width: 72px;
  height: 20px;
  transform: rotate(-5deg);
  border-radius: 4px;
  background: rgba(236, 219, 187, 0.68);
}

.life-day-page.tape-1::before {
  left: auto;
  right: 32px;
  transform: rotate(4deg);
}

.life-day-page.tape-2::before {
  left: 42%;
  transform: rotate(1deg);
}

.life-day-page-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.life-day-page-head span,
.life-day-page-head em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.life-day-page-head strong {
  display: block;
  margin-top: 2px;
  font-size: 20px;
}

.life-day-collage {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(70px, auto);
  gap: 8px;
  min-height: 90px;
}

.day-polaroid {
  grid-column: span 3;
  margin: 0;
  padding: 7px 7px 20px;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 12px 22px rgba(22,31,40,0.16);
}

.day-polaroid:nth-child(3n + 1) {
  grid-column: span 4;
}

.day-polaroid:nth-child(4n) {
  grid-column: span 2;
}

.day-polaroid img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 3px;
  background: #e8efed;
}

.day-polaroid figcaption {
  margin-top: 5px;
  color: #58636d;
  font-size: 10px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.day-paper-note {
  grid-column: 1 / -1;
  padding: 14px;
  border: 1px dashed rgba(31,42,52,0.22);
  border-radius: 8px;
  color: #4f5b64;
  background: rgba(255,255,255,0.5);
  font-size: 12px;
  line-height: 1.45;
}

.life-day-writing {
  display: grid;
  gap: 10px;
}

.memory-sentence {
  margin: 0;
  color: #26323c;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.55;
}

.life-day-writing ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.life-day-writing li {
  display: grid;
  gap: 2px;
  padding-left: 12px;
  border-left: 3px solid rgba(49, 80, 154, 0.36);
}

.life-day-writing li strong {
  color: #1d2630;
  font-size: 11px;
  text-transform: uppercase;
}

.life-day-writing li span {
  color: #59636b;
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  .life-scrap-month {
    padding: 12px;
  }

  .scrap-month-head {
    align-items: start;
    flex-direction: column;
  }

  .scrap-month-head h3 {
    font-size: 28px;
  }

  .scrap-month-head p {
    text-align: left;
  }

  .life-scrap-weekdays,
  .life-scrap-grid {
    grid-template-columns: repeat(7, minmax(76px, 1fr));
    min-width: 650px;
  }

  .life-scrap-day {
    min-height: 132px;
    padding: 7px;
  }

  .life-day-pages {
    grid-template-columns: 1fr;
  }

  .life-day-collage {
    grid-template-columns: repeat(4, 1fr);
  }

  .day-polaroid,
  .day-polaroid:nth-child(3n + 1),
  .day-polaroid:nth-child(4n) {
    grid-column: span 2;
  }
}

/* TarsBrain IA refresh: clear feature map, sync health, and calmer glass hierarchy. */
:root {
  --tb-ink: #16201f;
  --tb-muted: #62716f;
  --tb-line: rgba(255,255,255,0.72);
  --tb-glass: rgba(255,255,255,0.58);
  --tb-blue: #2457d6;
  --tb-teal: #1b8f83;
  --tb-coral: #d96f5d;
  --tb-gold: #b98912;
  --tb-lilac: #725ad8;
}

html {
  scroll-behavior: smooth;
}

body {
  color: var(--tb-ink);
  background:
    linear-gradient(180deg, #eef4f3 0%, #e8eef8 38%, #f4efea 100%);
}

.app-topbar {
  position: sticky;
  top: 10px;
  z-index: 20;
  min-height: 70px;
  padding: 10px 12px;
  border-radius: 8px;
}

.brand h1 {
  letter-spacing: 0;
}

.app-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 5px;
  border-radius: 8px;
}

.app-nav a {
  min-height: 34px;
  padding: 8px 11px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
}

.app-nav a:hover,
.app-nav a:focus-visible {
  background: rgba(255,255,255,0.72);
  color: var(--tb-ink);
}

.command-center {
  align-items: stretch;
  border-radius: 8px;
}

.feature-map {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.feature-tile {
  display: grid;
  gap: 7px;
  min-height: 118px;
  padding: 12px;
  overflow: hidden;
  border: 1px solid var(--tb-line);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.70), rgba(255,255,255,0.36));
  color: var(--tb-ink);
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.92), 0 12px 28px rgba(31,43,54,0.08);
}

.feature-tile span {
  width: fit-content;
  padding: 4px 7px;
  border-radius: 8px;
  background: rgba(255,255,255,0.72);
  color: var(--tb-muted);
  font-size: 11px;
  font-weight: 800;
}

.feature-tile strong {
  align-self: end;
  font-size: 18px;
  line-height: 1.12;
}

.feature-tile small {
  color: var(--tb-muted);
  font-size: 12px;
  line-height: 1.3;
}

.feature-tile.diary {
  background: linear-gradient(145deg, rgba(255,239,229,0.82), rgba(255,255,255,0.38));
}

.feature-tile.photos {
  background: linear-gradient(145deg, rgba(218,242,235,0.86), rgba(255,255,255,0.38));
}

.feature-tile.calendar {
  background: linear-gradient(145deg, rgba(220,233,255,0.86), rgba(255,255,255,0.38));
}

.feature-tile.connect {
  background: linear-gradient(145deg, rgba(236,229,255,0.86), rgba(255,255,255,0.38));
}

.feature-tile.devices {
  background: linear-gradient(145deg, rgba(255,244,211,0.86), rgba(255,255,255,0.38));
}

.feature-tile.system {
  background: linear-gradient(145deg, rgba(232,238,240,0.90), rgba(255,255,255,0.40));
}

.feature-tile:hover,
.feature-tile:focus-visible {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.94), 0 18px 36px rgba(31,43,54,0.12);
}

.panel {
  scroll-margin-top: 96px;
  border-radius: 8px;
}

.panel-head {
  align-items: start;
  gap: 12px;
}

.panel-head h2 {
  font-size: 20px;
  letter-spacing: 0;
}

.diary-panel {
  border-left: 4px solid rgba(217,111,93,0.72);
}

.photos-panel,
.local-roots-panel {
  border-left: 4px solid rgba(27,143,131,0.72);
}

.life-calendar-panel {
  border-left: 4px solid rgba(36,87,214,0.72);
}

.auth-panel {
  border-left: 4px solid rgba(114,90,216,0.72);
}

.access-fabric-panel,
.devices-panel,
.provisioning-panel {
  border-left: 4px solid rgba(185,137,18,0.72);
}

.quality-panel,
.monitor-panel,
.super-panel {
  border-left: 4px solid rgba(70,83,88,0.72);
}

.overview-card.stale {
  background:
    linear-gradient(145deg, rgba(255,225,216,0.86), rgba(255,255,255,0.36)),
    linear-gradient(320deg, rgba(217,111,93,0.18), rgba(255,255,255,0));
}

.overview-card.aging {
  background:
    linear-gradient(145deg, rgba(255,243,203,0.86), rgba(255,255,255,0.36)),
    linear-gradient(320deg, rgba(185,137,18,0.16), rgba(255,255,255,0));
}

.overview-card.fresh {
  background:
    linear-gradient(145deg, rgba(219,246,237,0.88), rgba(255,255,255,0.36)),
    linear-gradient(320deg, rgba(27,143,131,0.14), rgba(255,255,255,0));
}

.photo-sync-health,
.google-sync-diagnosis {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1.4fr) minmax(220px, 0.8fr);
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.76);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(255,255,255,0.66), rgba(255,255,255,0.32));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 12px 28px rgba(31,43,54,0.08);
}

.photo-sync-health.stale,
.google-sync-diagnosis.stale {
  background:
    linear-gradient(145deg, rgba(255,228,221,0.86), rgba(255,255,255,0.36));
}

.photo-sync-health strong,
.google-sync-diagnosis strong {
  display: block;
  margin: 4px 0 6px;
  font-size: 18px;
}

.photo-sync-health p,
.google-sync-diagnosis p {
  margin: 0;
  color: var(--tb-muted);
  line-height: 1.45;
}

.google-sync-repair-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.google-sync-repair-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.72);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.72), rgba(255,255,255,0.34)),
    radial-gradient(circle at top left, rgba(72,126,255,0.12), rgba(255,255,255,0));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.92), 0 10px 24px rgba(31,43,54,0.08);
}

.google-sync-repair-card > div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.google-sync-repair-card code {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--tb-ink);
}

.google-sync-repair-card small {
  color: var(--tb-muted);
  line-height: 1.35;
}

.photo-sync-health dl {
  display: grid;
  gap: 7px;
  margin: 0;
}

.photo-sync-health dl div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.photo-sync-health dt {
  color: var(--tb-muted);
  font-size: 11px;
  font-weight: 800;
}

.photo-sync-health dd {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 750;
}

.google-sync-diagnosis small {
  align-self: center;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--tb-muted);
}

.section-break {
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.70), rgba(255,255,255,0.22));
}

@media (max-width: 1180px) {
  .feature-map {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .app-topbar {
    position: static;
  }

  .app-nav {
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  .app-nav a {
    flex: 0 0 auto;
  }

  .feature-map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .feature-tile {
    min-height: 104px;
  }

  .photo-sync-health,
  .google-sync-diagnosis {
    grid-template-columns: 1fr;
  }
}

.life-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.life-item-image {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 6px;
  background: #e8efed;
}

.life-item strong,
.life-item span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.life-item span {
  color: var(--muted);
  font-size: 12px;
}

.photo-item code,
.photo-root-card code {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.quick-template-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.form-note {
  min-height: 18px;
  color: var(--muted);
}

.join-capture {
  display: grid;
  gap: 10px;
  width: 100%;
}

.join-capture[hidden] {
  display: none;
}

@media (max-width: 1040px) {
  .summary-grid,
  .access-passport,
  .passport-join-links,
  .workspace-grid,
  .collection-columns,
  .auth-columns,
  .home-control-layout,
  .monitor-layout,
  .brain-layout,
  .device-access-columns,
  .maturity-columns,
  .quality-layout,
  .super-grid,
  .super-summary,
  .required-auth-grid,
  .daily-grid,
  .project-memory-list,
  .diary-list,
  .life-connectors,
  .life-calendar-wrap,
  .photo-access-list,
  .photo-library-days,
  .split-panel {
    grid-template-columns: 1fr;
  }

  .panel.wide {
    grid-column: span 1;
  }

  .passport-join-links {
    grid-column: span 1;
  }
}

@media (max-width: 720px) {
  .app-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .panel-head {
    flex-direction: column;
  }

  .header-actions,
  .button-row {
    width: 100%;
    justify-content: flex-start;
  }

  .button-row .primary-button,
  .button-row .text-button,
  .button-row .danger-button {
    flex: 1 1 140px;
  }

  .shell {
    padding: 12px;
  }

  .summary-grid,
  .access-passport,
  .passport-join-links,
  .device-grid,
  .form-grid,
  .provision-grid,
  .llm-layout,
  .home-action-grid,
  .quick-template-row,
  .token-panel,
  .locked-notice {
    grid-template-columns: 1fr;
  }

  .locked-notice {
    align-items: flex-start;
    flex-direction: column;
  }

  .span-2,
  .home-action-buttons,
  .llm-layout button {
    grid-column: span 1;
  }

  .event-row {
    grid-template-columns: 20px minmax(0, 1fr);
  }

  .event-row > .status-pill {
    grid-column: 2;
    justify-self: start;
  }

  .modal-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .modal-actions .danger-button {
    margin-right: 0;
  }

  .auth-redirect-row {
    grid-template-columns: 1fr;
  }
}

/* TarsBrain 1.37: premium glass board, denser memory-first dashboard. */
:root {
  --glass-line: rgba(255, 255, 255, 0.76);
  --glass-strong: rgba(255, 255, 255, 0.68);
  --glass-mid: rgba(255, 255, 255, 0.46);
  --glass-soft: rgba(255, 255, 255, 0.30);
  --ink-soft: #273234;
  --accent-blue: #1557e6;
  --accent-mint: #2f9b8f;
  --accent-coral: #e87961;
}

body {
  color: var(--ink-soft);
  background:
    linear-gradient(115deg, rgba(246, 250, 252, 0.96) 0%, rgba(225, 236, 237, 0.92) 34%, rgba(245, 235, 229, 0.90) 66%, rgba(231, 234, 248, 0.94) 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.25) 0 1px, rgba(255,255,255,0) 1px 72px),
    repeating-linear-gradient(0deg, rgba(40,52,60,0.035) 0 1px, rgba(40,52,60,0) 1px 72px);
}

body::before {
  background:
    linear-gradient(120deg, rgba(255,255,255,0.76) 0%, rgba(255,255,255,0.20) 28%, rgba(255,255,255,0.56) 48%, rgba(255,255,255,0.16) 76%, rgba(255,255,255,0.52) 100%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.24) 0 1px, rgba(255,255,255,0) 1px 22px);
  opacity: 0.72;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(165deg, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0) 22%),
    linear-gradient(20deg, rgba(70,139,190,0.10) 0%, rgba(70,139,190,0) 42%),
    linear-gradient(340deg, rgba(232,121,97,0.12) 0%, rgba(232,121,97,0) 44%);
}

.app-topbar,
.command-center,
.panel,
.auth-modal,
.token-panel,
.locked-notice {
  border: 1px solid var(--glass-line);
  background:
    linear-gradient(145deg, var(--glass-strong) 0%, var(--glass-mid) 54%, var(--glass-soft) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.92),
    inset 0 -1px 0 rgba(255,255,255,0.28),
    0 34px 110px rgba(37, 47, 58, 0.16),
    0 2px 12px rgba(37, 47, 58, 0.07);
  backdrop-filter: saturate(184%) blur(30px);
  -webkit-backdrop-filter: saturate(184%) blur(30px);
}

.app-topbar,
.command-center,
.panel {
  position: relative;
  overflow: hidden;
}

.app-topbar::before,
.command-center::before,
.panel::before,
.overview-card::before,
.metric-card::before,
.access-passport::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(150deg, rgba(255,255,255,0.76) 0%, rgba(255,255,255,0.18) 18%, rgba(255,255,255,0) 40%),
    linear-gradient(330deg, rgba(255,255,255,0.32) 0%, rgba(255,255,255,0) 36%);
}

.app-topbar > *,
.command-center > *,
.panel > *,
.overview-card > *,
.metric-card > *,
.access-passport > * {
  position: relative;
}

.app-topbar {
  width: min(1160px, calc(100% - 40px));
  margin-top: 20px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.74), rgba(255,255,255,0.38));
}

.brand {
  min-width: 220px;
}

.brand img {
  background: rgba(255,255,255,0.58);
  border: 1px solid rgba(255,255,255,0.82);
}

.product-kicker,
.label,
.metric-card .label,
.overview-card .label {
  color: rgba(39,50,52,0.62);
  font-weight: 750;
}

.app-nav {
  background: rgba(255,255,255,0.32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.78);
}

.app-nav a {
  color: rgba(39,50,52,0.72);
}

.app-nav a:first-child {
  background: rgba(31, 38, 67, 0.92);
  color: #fff;
}

.app-shell {
  width: min(1160px, 100%);
}

.command-center {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  background:
    linear-gradient(142deg, rgba(255,255,255,0.62), rgba(255,255,255,0.34) 56%, rgba(255,255,255,0.24)),
    linear-gradient(25deg, rgba(21,87,230,0.06), rgba(232,121,97,0.08));
}

.command-copy {
  grid-column: span 4;
  min-height: 150px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.68), rgba(255,255,255,0.28)),
    linear-gradient(315deg, rgba(47,155,143,0.10), rgba(21,87,230,0.04));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.92), 0 18px 48px rgba(36,47,58,0.09);
}

.command-copy h2 {
  max-width: 10em;
  font-size: 22px;
  line-height: 1.12;
}

.command-copy p,
.panel-head p,
.section-break p,
.access-passport-main p,
.access-passport-current,
.passport-join-links {
  display: none !important;
}

.command-actions {
  grid-column: span 2;
  display: grid;
  align-content: stretch;
  gap: 8px;
}

.command-actions .primary-button,
.command-actions .text-button {
  min-height: 46px;
}

.overview-deck {
  grid-column: span 6;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.overview-card {
  min-height: 150px;
  padding: 13px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.80);
  background:
    linear-gradient(148deg, rgba(255,255,255,0.70), rgba(255,255,255,0.30)),
    linear-gradient(25deg, rgba(21,87,230,0.08), rgba(47,155,143,0.04));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.94),
    0 18px 48px rgba(36,47,58,0.10);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
}

.overview-card strong {
  margin-top: 12px;
  font-size: 25px;
}

.overview-card small {
  color: rgba(39,50,52,0.58);
  line-height: 1.28;
}

.overview-card-primary {
  color: #fff;
  background:
    linear-gradient(145deg, rgba(20,85,229,0.96), rgba(29,45,88,0.92)),
    linear-gradient(330deg, rgba(255,255,255,0.26), rgba(255,255,255,0));
}

.pastel-blue {
  background:
    linear-gradient(145deg, rgba(214,234,255,0.82), rgba(255,255,255,0.32)),
    linear-gradient(330deg, rgba(21,87,230,0.12), rgba(255,255,255,0));
}

.pastel-peach {
  background:
    linear-gradient(145deg, rgba(255,219,207,0.80), rgba(255,255,255,0.34)),
    linear-gradient(330deg, rgba(232,121,97,0.14), rgba(255,255,255,0));
}

.pastel-lilac {
  background:
    linear-gradient(145deg, rgba(231,225,255,0.80), rgba(255,255,255,0.34)),
    linear-gradient(330deg, rgba(47,155,143,0.12), rgba(255,255,255,0));
}

.command-center .summary-grid {
  grid-column: span 6;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.command-center .access-passport {
  grid-column: span 6;
}

.metric-card,
.access-passport,
.super-chip,
.life-connectors > section,
.brain-focus,
.brain-layout > section,
.daily-grid > section,
.auth-item,
.required-auth-item,
.home-item,
.monitor-item,
.device-card,
.event-row,
.photo-day-card,
.google-photos-panel,
.life-day-cell,
.memory-need,
.project-memory-item,
.diary-entry {
  position: relative;
  border: 1px solid rgba(255,255,255,0.72);
  background:
    linear-gradient(150deg, rgba(255,255,255,0.62), rgba(255,255,255,0.28));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.86), 0 14px 36px rgba(36,47,58,0.08);
  backdrop-filter: saturate(170%) blur(18px);
  -webkit-backdrop-filter: saturate(170%) blur(18px);
}

.metric-card {
  min-height: 90px;
  padding: 11px;
}

.metric-card strong {
  font-size: 20px;
}

.access-passport {
  min-height: 90px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: 11px 12px;
}

.access-passport-main h2 {
  margin: 2px 0 6px;
  font-size: 15px;
}

.access-passport code,
.passport-join-item code,
.auth-url-box {
  border: 1px solid rgba(255,255,255,0.70);
  background: rgba(246, 252, 255, 0.62);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.78);
}

.primary-button,
.text-button,
.icon-button {
  border-color: rgba(255,255,255,0.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72), 0 10px 24px rgba(36,47,58,0.08);
}

.primary-button {
  background: linear-gradient(145deg, var(--accent-blue), #113eaa);
}

.text-button,
.icon-button {
  background: rgba(255,255,255,0.50);
}

.workspace-grid.app-sections {
  gap: 10px;
}

.section-break {
  display: flex;
  align-items: end;
  justify-content: space-between;
  min-height: 36px;
  padding: 16px 4px 0;
  border-top: 1px solid rgba(255,255,255,0.48);
}

.section-break h2 {
  margin: 0;
  font-size: 15px;
}

.panel {
  padding: 14px;
}

.panel-head {
  margin-bottom: 10px;
}

.panel-head h2 {
  font-size: 16px;
}

.super-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.compact-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.super-chip {
  min-height: 70px;
  padding: 10px;
}

.super-chip strong {
  font-size: 20px;
}

.photo-day-card,
.diary-entry,
.project-memory-item,
.event-row {
  border-radius: 8px;
}

.output.compact {
  display: none !important;
}

.auth-modal-card {
  border: 1px solid rgba(255,255,255,0.72);
  background:
    linear-gradient(150deg, rgba(255,255,255,0.66), rgba(255,255,255,0.34));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.90), 0 16px 40px rgba(36,47,58,0.10);
  backdrop-filter: saturate(170%) blur(18px);
  -webkit-backdrop-filter: saturate(170%) blur(18px);
}

@media (max-width: 1180px) {
  .command-copy,
  .command-actions,
  .overview-deck,
  .command-center .summary-grid,
  .command-center .access-passport {
    grid-column: 1 / -1;
  }

  .overview-deck,
  .command-center .summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .command-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .app-topbar {
    width: calc(100% - 20px);
  }

  .command-center {
    gap: 8px;
    padding: 9px;
  }

  .command-copy h2 {
    max-width: none;
    font-size: 19px;
  }

  .overview-deck,
  .command-center .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .overview-card {
    min-height: 118px;
  }

  .overview-card strong,
  .metric-card strong,
  .super-chip strong {
    font-size: 18px;
  }

  .access-passport {
    grid-template-columns: 1fr;
  }

  .super-summary,
  .compact-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .memory-photo-collage {
    grid-template-rows: repeat(6, 34px);
    min-height: 220px;
    padding: 10px;
  }

  .memory-photo-card {
    border-width: 3px;
  }

  .memory-photo-card.stack-0 {
    grid-area: 1 / 1 / 5 / 7;
  }

  .memory-photo-card.stack-1 {
    grid-area: 2 / 6 / 7 / 13;
  }

  .memory-photo-card.stack-2 {
    grid-area: 1 / 8 / 4 / 13;
  }

  .memory-photo-card.stack-3 {
    grid-area: 4 / 1 / 7 / 6;
  }

  .memory-photo-card.stack-4 {
    grid-area: 4 / 8 / 7 / 13;
  }
}

/* TarsBrain 1.41: value-first surface with autopilot verification. */
.benefit-board {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.1fr 1.45fr minmax(170px, 0.72fr);
  gap: 8px;
  align-items: stretch;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.76);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.64), rgba(255,255,255,0.30)),
    linear-gradient(35deg, rgba(47,155,143,0.12), rgba(21,87,230,0.07));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.92), 0 20px 54px rgba(36,47,58,0.10);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
}

.benefit-main,
.benefit-item {
  border: 1px solid rgba(255,255,255,0.70);
  border-radius: 8px;
  background: linear-gradient(150deg, rgba(255,255,255,0.58), rgba(255,255,255,0.24));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.84);
}

.benefit-main {
  display: grid;
  align-content: center;
  gap: 7px;
  padding: 12px;
}

.benefit-main h2 {
  font-size: 18px;
  line-height: 1.16;
}

.benefit-main p {
  color: rgba(39,50,52,0.66);
  font-size: 12px;
  line-height: 1.35;
}

.benefit-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.benefit-item {
  display: grid;
  gap: 5px;
  min-height: 86px;
  padding: 10px;
}

.benefit-item strong {
  font-size: 14px;
  line-height: 1.22;
}

.benefit-item span {
  color: rgba(39,50,52,0.64);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.benefit-actions {
  display: grid;
  gap: 8px;
  align-content: stretch;
}

.benefit-actions button {
  min-height: 38px;
  width: 100%;
}

.autopilot-strip {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(280px, 1.2fr);
  gap: 12px;
  align-items: stretch;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.72);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255,255,255,0.72), rgba(238,246,255,0.46));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.78), 0 16px 36px rgba(44,63,87,0.12);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

.autopilot-strip strong {
  display: block;
  margin-top: 4px;
  color: #172033;
  font-size: 18px;
  line-height: 1.08;
}

.autopilot-strip small {
  display: block;
  margin-top: 7px;
  color: rgba(39,50,52,0.66);
  line-height: 1.45;
}

.autopilot-signals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-content: stretch;
}

.autopilot-signals span {
  min-height: 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 10px 11px;
  border: 1px solid rgba(255,255,255,0.66);
  border-radius: 8px;
  background: rgba(255,255,255,0.58);
  color: #2e3f55;
  font-size: 12px;
  line-height: 1.22;
  overflow: hidden;
}

.autopilot-signals strong {
  margin: 0;
  font-size: 11px;
  line-height: 1;
  color: #65748a;
  text-transform: uppercase;
}

@media (max-width: 1180px) {
  .benefit-board {
    grid-template-columns: 1fr;
  }

  .benefit-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .autopilot-strip {
    grid-template-columns: 1fr;
  }

  .autopilot-signals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .benefit-list,
  .benefit-actions {
    grid-template-columns: 1fr;
  }

  .benefit-main h2 {
    font-size: 16px;
  }

  .autopilot-signals {
    grid-template-columns: 1fr;
  }
}

/* TarsBrain 1.36: denser premium glass, less repeated status furniture. */
body {
  background:
    linear-gradient(145deg, #d9e2e7 0%, #ece6dd 42%, #d9d3e6 100%);
}

body::before {
  background:
    linear-gradient(115deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.14) 34%, rgba(255,255,255,0.36) 70%, rgba(255,255,255,0.16) 100%);
}

.app-topbar,
.command-center,
.panel {
  border-color: rgba(255,255,255,0.78);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.66), rgba(255,255,255,0.34));
  box-shadow:
    0 30px 90px rgba(33, 43, 54, 0.16),
    0 1px 0 rgba(255,255,255,0.82) inset,
    0 -1px 0 rgba(255,255,255,0.28) inset;
  backdrop-filter: saturate(165%) blur(26px);
}

.app-topbar {
  grid-template-columns: minmax(190px, 0.7fr) minmax(360px, 1fr) auto;
  min-height: 54px;
  margin-top: 18px;
}

.brand p {
  max-width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.command-center {
  grid-template-columns: 1.05fr 0.95fr;
  gap: 10px;
  padding: 12px;
}

.command-copy {
  grid-column: 1;
  min-height: 0;
  padding: 14px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.68), rgba(255,255,255,0.3));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.92);
}

.command-copy h2 {
  max-width: 520px;
  font-size: 22px;
  line-height: 1.16;
}

.command-copy p {
  max-width: 560px;
  font-size: 13px;
}

.command-actions {
  grid-column: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.overview-deck {
  grid-column: 2;
  grid-row: 1 / span 3;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.overview-card {
  min-height: 112px;
  padding: 13px;
  border-color: rgba(255,255,255,0.82);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.78), rgba(255,255,255,0.34));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 18px 36px rgba(39, 49, 62, 0.12);
  backdrop-filter: saturate(170%) blur(24px);
}

.overview-card strong {
  font-size: 22px;
}

.overview-card-primary {
  background:
    linear-gradient(145deg, rgba(22, 79, 231, 0.92), rgba(32, 94, 230, 0.68)),
    linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0.02));
}

.pastel-blue {
  background:
    linear-gradient(145deg, rgba(219, 237, 255, 0.86), rgba(255,255,255,0.34));
}

.pastel-peach {
  background:
    linear-gradient(145deg, rgba(255, 223, 212, 0.86), rgba(255,255,255,0.34));
}

.pastel-lilac {
  background:
    linear-gradient(145deg, rgba(231, 224, 255, 0.86), rgba(255,255,255,0.34));
}

.command-center .summary-grid {
  grid-column: 1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.command-center .metric-card {
  display: grid;
  align-content: center;
  min-height: 54px;
  padding: 8px 9px;
  background: rgba(255,255,255,0.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.82);
}

.command-center .metric-card .label {
  font-size: 10px;
}

.command-center .metric-card strong {
  margin-top: 1px;
  font-size: 14px;
  line-height: 1.05;
}

.command-center .metric-card small {
  margin-top: 1px;
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.command-center .access-passport {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  min-height: 58px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.78);
}

.access-passport-main {
  gap: 3px;
}

.access-passport-main h2 {
  display: none;
}

.access-passport-main p {
  display: none;
}

.access-passport code {
  min-height: 30px;
  padding: 6px 8px;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.access-passport-current {
  display: none;
}

.passport-join-links {
  display: none;
}

.access-passport-actions {
  display: flex;
  min-width: 0;
}

.access-passport-actions .primary-button,
.access-passport-actions .text-button {
  min-height: 30px;
  padding: 0 10px;
}

.section-break {
  padding-top: 14px;
}

.section-break p {
  font-size: 13px;
}

.panel {
  padding: 14px;
}

.panel-head {
  margin-bottom: 10px;
}

.panel-head p {
  display: none;
}

.super-summary {
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}

.super-chip {
  min-height: 62px;
  padding: 8px;
}

.super-chip strong {
  font-size: 17px;
}

.output.compact {
  display: none;
}

@media (max-width: 920px) {
  .app-topbar {
    grid-template-columns: 1fr;
  }

  .command-center {
    grid-template-columns: 1fr;
  }

  .command-copy,
  .command-actions,
  .overview-deck,
  .command-center .summary-grid,
  .command-center .access-passport {
    grid-column: 1;
    grid-row: auto;
  }

  .overview-deck {
    order: 2;
  }

  .command-actions {
    order: 3;
  }

  .command-center .summary-grid {
    order: 4;
  }

  .command-center .access-passport {
    order: 5;
  }
}

@media (max-width: 720px) {
  .command-center .summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .command-center .access-passport {
    grid-template-columns: 1fr;
  }

  .access-passport-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* TarsBrain 1.34: product-grade command center redesign. */
:root {
  --bg: #f6f5f1;
  --surface: #ffffff;
  --surface-2: #f8f7f2;
  --surface-3: #eef4f2;
  --ink: #121817;
  --muted: #5d6965;
  --line: #d8ded9;
  --line-strong: #b8c3bd;
  --accent: #0b6f69;
  --accent-dark: #0d3836;
  --accent-2: #a35d21;
  --blue: #2458d3;
  --warn: #805400;
  --bad: #a9283a;
  --good: #157a43;
  --shadow: 0 1px 2px rgba(18, 24, 23, 0.05), 0 10px 28px rgba(18, 24, 23, 0.07);
  --section-shadow: 0 1px 0 rgba(18, 24, 23, 0.05);
  --radius: 8px;
  --tight-radius: 6px;
  --content-max: 1640px;
}

html {
  scroll-behavior: smooth;
}

body {
  background:
    linear-gradient(180deg, #fbfaf6 0, #f6f5f1 420px, #f1f3f0 100%);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
}

.app-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(420px, 1.4fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 66px;
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--section-shadow);
  backdrop-filter: blur(14px);
}

.brand {
  gap: 10px;
}

.brand img {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.product-kicker {
  display: block;
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.brand h1 {
  margin-top: 2px;
  font-size: 18px;
}

.brand p {
  color: var(--muted);
  font-size: 12px;
}

.app-nav {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #f2f4f0;
}

.app-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 10px;
  border-radius: var(--tight-radius);
  color: #293634;
  font-size: 13px;
  font-weight: 720;
  text-decoration: none;
  white-space: nowrap;
}

.app-nav a:hover,
.app-nav a:focus-visible {
  background: #fff;
  color: var(--accent-dark);
  outline: 1px solid var(--line-strong);
}

.header-actions {
  justify-content: flex-end;
}

.app-shell {
  width: min(var(--content-max), 100%);
  padding: 18px 20px 28px;
}

.command-center {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(220px, 0.45fr);
  gap: 14px;
  align-items: start;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
  box-shadow: var(--shadow);
}

.command-copy {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.command-copy h2 {
  max-width: 920px;
  font-size: 28px;
  line-height: 1.13;
}

.command-copy p {
  max-width: 900px;
  color: #394744;
  font-size: 14px;
}

.command-actions {
  display: grid;
  gap: 8px;
  align-content: start;
}

.command-center .summary-grid,
.command-center .access-passport {
  grid-column: 1 / -1;
}

.summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 4px;
}

.metric-card {
  min-height: 92px;
  padding: 12px;
  border-color: #dbe3de;
  box-shadow: none;
}

.metric-card strong {
  font-size: 20px;
}

.access-passport {
  grid-template-columns: minmax(0, 1.2fr) minmax(180px, 0.35fr) minmax(260px, 0.65fr);
  margin-top: 0;
  border-left: 1px solid var(--line);
  background: #f8fbfa;
  box-shadow: none;
}

.workspace-grid.app-sections {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: 16px;
}

.section-break {
  grid-column: 1 / -1;
  display: grid;
  gap: 5px;
  padding: 18px 2px 6px;
}

.section-break h2 {
  font-size: 22px;
}

.section-break p {
  max-width: 820px;
  color: var(--muted);
}

.memory-break { order: 1; }
.daily-panel { order: 2; }
.life-calendar-panel { order: 3; }
.diary-panel { order: 4; }
.photos-panel { order: 5; }
.local-roots-panel { order: 6; }
.memory-panel { order: 7; }
.connections-break { order: 20; }
.auth-panel { order: 21; }
.home-panel { order: 22; }
.devices-break { order: 40; }
.access-fabric-panel { order: 41; }
.side-stack { order: 42; }
.devices-panel { order: 43; }
.provisioning-panel { order: 44; }
.sources-panel { order: 45; }
.system-break { order: 60; }
.brain-panel { order: 61; }
.super-panel { order: 62; }
.quality-panel { order: 63; }
.monitor-panel { order: 64; }
.inbox-panel { order: 65; }

.panel,
.metric-card,
.access-item,
.device-card,
.event-row,
.super-item,
.brain-item,
.quality-item,
.auth-item,
.required-auth-item,
.home-item,
.monitor-item,
.project-memory-card,
.diary-entry,
.photo-root-card,
.photo-item,
.photo-day-card,
.photo-manage-item,
.google-photos-panel {
  border-radius: var(--radius);
}

.panel {
  padding: 16px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.panel.wide {
  grid-column: 1 / -1;
}

.panel-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  margin-bottom: 14px;
}

.panel-head h2 {
  font-size: 18px;
}

.panel-head p {
  max-width: 780px;
  color: var(--muted);
  font-size: 13px;
}

.button-row {
  align-items: center;
}

.icon-button,
.text-button,
.primary-button,
.danger-button {
  min-height: 34px;
  border-radius: var(--tight-radius);
  font-size: 13px;
  font-weight: 720;
}

.primary-button {
  background: var(--accent);
  border-color: var(--accent);
}

.primary-button:hover,
.primary-button:focus-visible {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
}

.text-button {
  background: #fff;
}

.super-summary {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px;
}

.super-chip {
  min-height: 72px;
  padding: 10px;
  background: #f7faf8;
}

.super-chip strong {
  font-size: 19px;
}

.daily-grid,
.project-memory-list,
.diary-list,
.photo-access-list,
.photo-library-days {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.life-connectors {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.life-connectors > section {
  background: #fbfcfb;
}

.side-stack {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(320px, 1fr) minmax(320px, 1fr);
  gap: 12px;
}

.primary-panel {
  min-height: 0;
}

.events {
  max-height: 460px;
}

.output.compact {
  min-height: 0;
  max-height: 104px;
  font-size: 12px;
}

.output.compact:empty,
.output.auth-modal-output:empty {
  display: none;
}

.google-photos-panel {
  background: #f6f9ff;
}

.local-roots-panel {
  background: #fbfaf6;
}

.auth-panel {
  background: #fbfcfb;
}

.brain-panel,
.quality-panel,
.super-panel,
.monitor-panel {
  background: #fbfcfb;
  border-top: 1px solid var(--line);
}

.table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

table {
  min-width: 760px;
}

th {
  background: #f7f8f4;
}

.modal {
  border-radius: var(--radius);
}

.modal-backdrop {
  backdrop-filter: blur(8px);
}

@media (max-width: 1180px) {
  .app-topbar {
    grid-template-columns: minmax(220px, 1fr) auto;
  }

  .app-nav {
    grid-column: 1 / -1;
  }

  .command-center,
  .access-passport,
  .home-control-layout,
  .monitor-layout,
  .brain-layout,
  .quality-layout,
  .split-panel,
  .side-stack {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  body {
    font-size: 14px;
  }

  .app-topbar {
    position: static;
    display: grid;
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .app-nav {
    grid-template-columns: repeat(5, max-content);
    overflow-x: auto;
    justify-content: start;
  }

  .header-actions {
    justify-content: flex-start;
  }

  .app-shell {
    padding: 10px;
  }

  .command-center,
  .panel {
    padding: 12px;
  }

  .command-copy h2 {
    font-size: 22px;
  }

  .summary-grid,
  .access-passport,
  .passport-join-links,
  .super-summary,
  .daily-grid,
  .project-memory-list,
  .diary-list,
  .photo-access-list,
  .photo-library-days,
  .life-connectors,
  .device-grid,
  .form-grid,
  .provision-grid,
  .llm-layout,
  .home-action-grid,
  .quick-template-row,
  .token-panel,
  .locked-notice {
    grid-template-columns: 1fr;
  }

  .panel-head {
    grid-template-columns: 1fr;
  }

  .button-row,
  .command-actions,
  .access-passport-actions {
    justify-content: stretch;
  }

  .button-row .primary-button,
  .button-row .text-button,
  .button-row .danger-button,
  .command-actions .primary-button,
  .command-actions .text-button,
  .access-passport-actions .primary-button,
  .access-passport-actions .text-button {
    width: 100%;
  }

  .section-break h2 {
    font-size: 19px;
  }
}

/* TarsBrain 1.35: glass dashboard styling requested from reference boards. */
body {
  min-height: 100vh;
  background:
    linear-gradient(135deg, #dce7ec 0%, #ece7df 46%, #dcd7e9 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.42), rgba(255,255,255,0.12)),
    linear-gradient(180deg, rgba(255,255,255,0.36), rgba(255,255,255,0.08));
  pointer-events: none;
}

.app-topbar {
  position: static;
  width: min(1120px, calc(100% - 32px));
  min-height: 58px;
  margin: 24px auto 14px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: 0 20px 70px rgba(41, 49, 59, 0.14), inset 0 1px 0 rgba(255,255,255,0.82);
}

.app-shell {
  width: min(1120px, 100%);
  padding: 0 16px 36px;
}

.brand img {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.88), 0 8px 18px rgba(22, 36, 33, 0.12);
}

.app-nav {
  border-color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.34);
}

.app-nav a:first-child {
  background: #211946;
  color: #fff;
  box-shadow: 0 9px 18px rgba(33, 25, 70, 0.2);
}

.header-actions .text-button,
.header-actions .icon-button {
  background: rgba(255,255,255,0.64);
  border-color: rgba(255,255,255,0.7);
}

.command-center {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 28px 90px rgba(44, 54, 66, 0.16), inset 0 1px 0 rgba(255,255,255,0.86);
  backdrop-filter: blur(18px);
}

.command-copy {
  grid-column: span 5;
  min-height: 154px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.72);
  border-radius: 8px;
  background: rgba(255,255,255,0.58);
}

.command-copy h2 {
  font-size: 25px;
}

.command-actions {
  grid-column: span 2;
  align-content: stretch;
}

.overview-deck {
  grid-column: span 5;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.overview-card {
  display: grid;
  align-content: space-between;
  min-height: 122px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.72);
  border-radius: 8px;
  background: rgba(255,255,255,0.64);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 14px 32px rgba(50, 58, 68, 0.1);
}

.overview-card strong {
  display: block;
  margin-top: 8px;
  font-size: 24px;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.overview-card small {
  color: var(--muted);
  font-size: 12px;
}

.overview-card-primary {
  color: #fff;
  background: linear-gradient(135deg, #1c63d5 0%, #0b47f0 100%);
}

.overview-card-primary .label,
.overview-card-primary small {
  color: rgba(255,255,255,0.82);
}

.pastel-blue {
  background: linear-gradient(135deg, rgba(209,231,255,0.86), rgba(244,248,255,0.72));
}

.pastel-peach {
  background: linear-gradient(135deg, rgba(255,213,199,0.86), rgba(255,248,243,0.72));
}

.pastel-lilac {
  background: linear-gradient(135deg, rgba(225,218,255,0.86), rgba(249,247,255,0.72));
}

.command-center .summary-grid {
  grid-column: 1 / span 5;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0;
}

.command-center .access-passport {
  grid-column: 6 / -1;
}

.metric-card,
.access-passport,
.panel,
.super-chip,
.life-connectors > section,
.auth-item,
.required-auth-item,
.home-item,
.monitor-item,
.device-card,
.event-row,
.photo-day-card,
.google-photos-panel {
  border-color: rgba(255,255,255,0.72);
  background-color: rgba(255,255,255,0.58);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.82), 0 14px 34px rgba(44, 54, 66, 0.1);
  backdrop-filter: blur(14px);
}

.metric-card {
  min-height: 104px;
  background: rgba(255,255,255,0.5);
}

.metric-card strong {
  font-size: 23px;
}

.access-passport {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-content: start;
  padding: 12px;
}

.access-passport-current,
.passport-join-links {
  grid-column: 1 / -1;
}

.access-passport code,
.passport-join-item code {
  background: rgba(234, 245, 247, 0.7);
}

.workspace-grid.app-sections {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
}

.section-break {
  grid-column: 1 / -1;
  padding: 18px 8px 2px;
}

.section-break h2 {
  font-size: 21px;
}

.daily-panel,
.memory-panel,
.diary-panel,
.photos-panel,
.auth-panel,
.access-fabric-panel,
.brain-panel,
.quality-panel {
  grid-column: span 6;
}

.life-calendar-panel,
.local-roots-panel,
.home-panel,
.super-panel,
.monitor-panel,
.inbox-panel,
.devices-panel,
.provisioning-panel,
.sources-panel {
  grid-column: 1 / -1;
}

.side-stack {
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.panel {
  background: rgba(255,255,255,0.52);
}

.panel-head h2 {
  font-size: 17px;
}

.super-summary,
.photo-library-days,
.diary-list,
.project-memory-list,
.daily-grid {
  gap: 10px;
}

.super-chip {
  min-height: 82px;
  background: rgba(255,255,255,0.46);
}

.super-chip strong {
  font-size: 22px;
}

.life-calendar-grid {
  gap: 8px;
}

.life-day-cell {
  background: rgba(255,255,255,0.52);
}

.output.compact {
  max-height: 72px;
  opacity: 0.84;
}

/* TarsBrain 1.46: diary becomes an edited memory surface, not a log list. */
.diary-editorial-hero {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(260px, 0.95fr) minmax(320px, 1.35fr);
  gap: 14px;
  min-height: 360px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.74);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.78), rgba(255,255,255,0.38)),
    linear-gradient(115deg, rgba(214,230,255,0.62), rgba(255,238,226,0.56) 48%, rgba(216,242,232,0.62));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.94), 0 28px 70px rgba(31,43,54,0.13);
}

.diary-editorial-copy {
  display: grid;
  align-content: center;
  gap: 12px;
  min-width: 0;
}

.diary-editorial-copy .label {
  width: fit-content;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,0.72);
  border-radius: 8px;
  background: rgba(255,255,255,0.54);
  color: var(--tb-muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0;
}

.diary-editorial-copy h3 {
  margin: 0;
  max-width: 14ch;
  color: var(--tb-ink);
  font-size: 32px;
  line-height: 1.08;
  letter-spacing: 0;
}

.diary-editorial-copy p {
  margin: 0;
  color: #314540;
  font-size: 14px;
  line-height: 1.75;
}

.diary-editorial-visuals {
  display: grid;
  min-width: 0;
}

.diary-editorial-visuals .memory-photo-collage {
  min-height: 330px;
  margin: 0;
}

.diary-entry {
  border-color: rgba(255,255,255,0.72);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.70), rgba(255,255,255,0.42)),
    rgba(255,255,255,0.50);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.88), 0 18px 42px rgba(30,42,55,0.08);
}

.diary-entry .memory-photo-collage {
  min-height: 236px;
  grid-template-rows: repeat(6, 36px);
}

.diary-entry .device-access-head strong {
  font-size: 16px;
}

.diary-summary-text {
  margin: 0;
}

.diary-chapter {
  border-left-color: rgba(56,109,199,0.62);
  border-radius: 8px;
  background: rgba(255,255,255,0.50);
}

.photo-day-card .device-access-head span {
  line-height: 1.45;
}

@media (max-width: 900px) {
  .diary-editorial-hero {
    grid-template-columns: 1fr;
  }

  .diary-editorial-copy h3 {
    max-width: 18ch;
    font-size: 26px;
  }
}

@media (max-width: 720px) {
  .diary-editorial-hero {
    padding: 12px;
    min-height: auto;
  }

  .diary-editorial-visuals .memory-photo-collage,
  .diary-entry .memory-photo-collage {
    min-height: 250px;
  }
}

@media (max-width: 1180px) {
  .command-copy,
  .overview-deck,
  .command-actions,
  .command-center .summary-grid,
  .command-center .access-passport {
    grid-column: 1 / -1;
  }

  .command-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .app-topbar {
    width: calc(100% - 20px);
    margin: 10px auto;
    padding: 10px;
  }

  .app-shell {
    padding: 0 10px 28px;
  }

  .app-nav {
    grid-template-columns: repeat(5, minmax(88px, 1fr));
  }

  .command-center {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 10px;
  }

  .command-copy,
  .overview-deck,
  .command-actions,
  .command-center .summary-grid,
  .command-center .access-passport {
    grid-column: 1 / -1;
  }

  .command-copy h2 {
    font-size: 20px;
  }

  .overview-deck,
  .summary-grid,
  .command-center .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .overview-card {
    min-height: 112px;
    padding: 12px;
  }

  .overview-card strong,
  .metric-card strong,
  .super-chip strong {
    font-size: 19px;
  }

  .workspace-grid.app-sections {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .section-break,
  .panel,
  .panel.wide,
  .daily-panel,
  .memory-panel,
  .diary-panel,
  .photos-panel,
  .auth-panel,
  .access-fabric-panel,
  .brain-panel,
  .quality-panel,
  .life-calendar-panel,
  .local-roots-panel,
  .home-panel,
  .super-panel,
  .monitor-panel,
  .inbox-panel,
  .devices-panel,
  .provisioning-panel,
  .sources-panel,
  .side-stack {
    grid-column: 1 / -1;
  }

  .side-stack,
  .access-passport,
  .passport-join-links,
  .device-grid,
  .form-grid,
  .provision-grid,
  .llm-layout,
  .home-action-grid,
  .token-panel,
  .locked-notice {
    grid-template-columns: 1fr;
  }
}

/* TarsBrain 1.37 final cascade: keep this after older dashboard blocks. */
body {
  color: var(--ink-soft);
  background:
    linear-gradient(115deg, rgba(246, 250, 252, 0.96) 0%, rgba(225, 236, 237, 0.92) 34%, rgba(245, 235, 229, 0.90) 66%, rgba(231, 234, 248, 0.94) 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.25) 0 1px, rgba(255,255,255,0) 1px 72px),
    repeating-linear-gradient(0deg, rgba(40,52,60,0.035) 0 1px, rgba(40,52,60,0) 1px 72px);
}

body::before {
  background:
    linear-gradient(120deg, rgba(255,255,255,0.76) 0%, rgba(255,255,255,0.20) 28%, rgba(255,255,255,0.56) 48%, rgba(255,255,255,0.16) 76%, rgba(255,255,255,0.52) 100%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.24) 0 1px, rgba(255,255,255,0) 1px 22px);
  opacity: 0.72;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(165deg, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0) 22%),
    linear-gradient(20deg, rgba(70,139,190,0.10) 0%, rgba(70,139,190,0) 42%),
    linear-gradient(340deg, rgba(232,121,97,0.12) 0%, rgba(232,121,97,0) 44%);
}

.app-topbar,
.command-center,
.panel,
.auth-modal,
.token-panel,
.locked-notice {
  border: 1px solid var(--glass-line);
  background:
    linear-gradient(145deg, var(--glass-strong) 0%, var(--glass-mid) 54%, var(--glass-soft) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.92),
    inset 0 -1px 0 rgba(255,255,255,0.28),
    0 34px 110px rgba(37, 47, 58, 0.16),
    0 2px 12px rgba(37, 47, 58, 0.07);
  backdrop-filter: saturate(184%) blur(30px);
  -webkit-backdrop-filter: saturate(184%) blur(30px);
}

.app-topbar,
.command-center,
.panel,
.overview-card,
.metric-card,
.access-passport {
  position: relative;
  overflow: hidden;
}

.app-topbar::before,
.command-center::before,
.panel::before,
.overview-card::before,
.metric-card::before,
.access-passport::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(150deg, rgba(255,255,255,0.76) 0%, rgba(255,255,255,0.18) 18%, rgba(255,255,255,0) 40%),
    linear-gradient(330deg, rgba(255,255,255,0.32) 0%, rgba(255,255,255,0) 36%);
}

.app-topbar > *,
.command-center > *,
.panel > *,
.overview-card > *,
.metric-card > *,
.access-passport > * {
  position: relative;
}

.app-topbar {
  width: min(1160px, calc(100% - 40px));
  margin-top: 20px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.74), rgba(255,255,255,0.38));
}

.brand {
  min-width: 220px;
}

.brand img {
  background: rgba(255,255,255,0.58);
  border: 1px solid rgba(255,255,255,0.82);
}

.product-kicker,
.label,
.metric-card .label,
.overview-card .label {
  color: rgba(39,50,52,0.62);
  font-weight: 750;
}

.app-nav {
  background: rgba(255,255,255,0.32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.78);
}

.app-nav a {
  color: rgba(39,50,52,0.72);
}

.app-nav a:first-child {
  background: rgba(31, 38, 67, 0.92);
  color: #fff;
}

.app-shell {
  width: min(1160px, 100%);
}

.command-center {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  background:
    linear-gradient(142deg, rgba(255,255,255,0.62), rgba(255,255,255,0.34) 56%, rgba(255,255,255,0.24)),
    linear-gradient(25deg, rgba(21,87,230,0.06), rgba(232,121,97,0.08));
}

.command-copy {
  grid-column: span 4;
  min-height: 150px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.68), rgba(255,255,255,0.28)),
    linear-gradient(315deg, rgba(47,155,143,0.10), rgba(21,87,230,0.04));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.92), 0 18px 48px rgba(36,47,58,0.09);
}

.command-copy h2 {
  max-width: 10em;
  font-size: 22px;
  line-height: 1.12;
}

.command-copy p,
.panel-head p,
.section-break p,
.access-passport-main p,
.access-passport-current,
.passport-join-links {
  display: none !important;
}

.command-actions {
  grid-column: span 2;
  display: grid;
  align-content: stretch;
  gap: 8px;
}

.command-actions .primary-button,
.command-actions .text-button {
  min-height: 46px;
}

.overview-deck {
  grid-column: span 6;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.overview-card {
  min-height: 150px;
  padding: 13px;
  border: 1px solid rgba(255,255,255,0.80);
  background:
    linear-gradient(148deg, rgba(255,255,255,0.70), rgba(255,255,255,0.30)),
    linear-gradient(25deg, rgba(21,87,230,0.08), rgba(47,155,143,0.04));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.94),
    0 18px 48px rgba(36,47,58,0.10);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
}

.overview-card strong {
  margin-top: 12px;
  font-size: 25px;
}

.overview-card small {
  color: rgba(39,50,52,0.58);
  line-height: 1.28;
}

.overview-card-primary {
  color: #fff;
  background:
    linear-gradient(145deg, rgba(20,85,229,0.96), rgba(29,45,88,0.92)),
    linear-gradient(330deg, rgba(255,255,255,0.26), rgba(255,255,255,0));
}

.pastel-blue {
  background:
    linear-gradient(145deg, rgba(214,234,255,0.82), rgba(255,255,255,0.32)),
    linear-gradient(330deg, rgba(21,87,230,0.12), rgba(255,255,255,0));
}

.pastel-peach {
  background:
    linear-gradient(145deg, rgba(255,219,207,0.80), rgba(255,255,255,0.34)),
    linear-gradient(330deg, rgba(232,121,97,0.14), rgba(255,255,255,0));
}

.pastel-lilac {
  background:
    linear-gradient(145deg, rgba(231,225,255,0.80), rgba(255,255,255,0.34)),
    linear-gradient(330deg, rgba(47,155,143,0.12), rgba(255,255,255,0));
}

.command-center .summary-grid {
  grid-column: span 6;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.command-center .access-passport {
  grid-column: span 6;
}

.metric-card,
.access-passport,
.super-chip,
.life-connectors > section,
.brain-focus,
.brain-layout > section,
.daily-grid > section,
.auth-item,
.required-auth-item,
.home-item,
.monitor-item,
.device-card,
.event-row,
.photo-day-card,
.google-photos-panel,
.life-day-cell,
.memory-need,
.project-memory-item,
.diary-entry {
  border: 1px solid rgba(255,255,255,0.72);
  background:
    linear-gradient(150deg, rgba(255,255,255,0.62), rgba(255,255,255,0.28));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.86), 0 14px 36px rgba(36,47,58,0.08);
  backdrop-filter: saturate(170%) blur(18px);
  -webkit-backdrop-filter: saturate(170%) blur(18px);
}

.metric-card {
  min-height: 90px;
  padding: 11px;
}

.metric-card strong {
  font-size: 20px;
}

.access-passport {
  min-height: 90px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: 11px 12px;
}

.access-passport-main h2 {
  margin: 2px 0 6px;
  font-size: 15px;
}

.access-passport code,
.passport-join-item code,
.auth-url-box {
  border: 1px solid rgba(255,255,255,0.70);
  background: rgba(246, 252, 255, 0.62);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.78);
}

.workspace-grid.app-sections {
  gap: 10px;
}

.section-break {
  display: flex;
  align-items: end;
  justify-content: space-between;
  min-height: 36px;
  padding: 16px 4px 0;
  border-top: 1px solid rgba(255,255,255,0.48);
}

.section-break h2 {
  margin: 0;
  font-size: 15px;
}

.panel {
  padding: 14px;
}

.panel-head {
  margin-bottom: 10px;
}

.panel-head h2 {
  font-size: 16px;
}

.super-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.compact-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.super-chip {
  min-height: 70px;
  padding: 10px;
}

.super-chip strong {
  font-size: 20px;
}

.output.compact {
  display: none !important;
}

@media (max-width: 1180px) {
  .command-copy,
  .command-actions,
  .overview-deck,
  .command-center .summary-grid,
  .command-center .access-passport {
    grid-column: 1 / -1;
  }

  .overview-deck,
  .command-center .summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .command-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .app-topbar {
    width: calc(100% - 20px);
  }

  .command-center {
    gap: 8px;
    padding: 9px;
  }

  .command-copy h2 {
    max-width: none;
    font-size: 19px;
  }

  .overview-deck,
  .command-center .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .overview-card {
    min-height: 118px;
  }

  .overview-card strong,
  .metric-card strong,
  .super-chip strong {
    font-size: 18px;
  }

  .access-passport {
    grid-template-columns: 1fr;
  }

  .super-summary,
  .compact-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .photo-sync-health,
  .google-sync-diagnosis,
  .google-sync-repair-grid {
    grid-template-columns: 1fr;
  }
}

/* Top setup dock: one place for external URLs, auth, photo sync, and home control. */
.setup-dock {
  display: grid;
  grid-template-columns: minmax(300px, 0.82fr) minmax(0, 2.1fr);
  gap: 10px;
  align-items: stretch;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.84);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(236, 246, 252, 0.50)),
    rgba(255, 255, 255, 0.42);
  box-shadow: 0 24px 70px rgba(31, 44, 54, 0.13);
  backdrop-filter: blur(30px) saturate(1.25);
}

.setup-hero {
  display: grid;
  align-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(232, 243, 247, 0.42)),
    rgba(255, 255, 255, 0.54);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.80);
}

.setup-hero h2 {
  font-size: 20px;
}

.setup-hero p,
.setup-card p {
  color: #5f6d70;
  line-height: 1.45;
}

.setup-hero-actions,
.setup-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.setup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}

.setup-card {
  display: grid;
  align-content: space-between;
  gap: 10px;
  min-width: 0;
  min-height: 150px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.72), rgba(244,249,250,0.42)),
    rgba(255, 255, 255, 0.52);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.74),
    0 12px 34px rgba(33, 44, 54, 0.08);
  backdrop-filter: blur(20px) saturate(1.15);
}

.setup-card.primary {
  background:
    linear-gradient(155deg, rgba(234, 244, 255, 0.78), rgba(255, 255, 255, 0.66)),
    rgba(255, 255, 255, 0.58);
}

.setup-card.ready {
  border-color: rgba(52, 120, 92, 0.28);
}

.setup-card.needs-auth {
  border-color: rgba(48, 95, 166, 0.28);
}

.setup-card.needs-keys {
  border-color: rgba(176, 116, 36, 0.28);
}

.setup-card.blocked {
  border-color: rgba(183, 54, 77, 0.30);
}

.setup-card-kicker {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  min-height: 24px;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(16, 65, 61, 0.08);
  color: #335552;
  font-size: 12px;
  font-weight: 700;
}

.setup-card strong {
  font-size: 16px;
}

.setup-card .text-button,
.setup-card .primary-button {
  min-height: 34px;
}

.google-photos-panel .super-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.google-photos-panel .super-chip {
  min-height: 86px;
  background: rgba(255, 255, 255, 0.64);
}

.google-sync-detail {
  gap: 8px;
}

.sync-technical-details {
  margin-top: 6px;
}

.sync-technical-details summary {
  width: max-content;
  max-width: 100%;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid rgba(151, 169, 169, 0.42);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.62);
  color: #405654;
  cursor: pointer;
  font-weight: 700;
}

.sync-technical-details[open] summary {
  margin-bottom: 8px;
}

.rclone-auth-card {
  gap: 12px;
}

.rclone-command-row {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.rclone-command-row > span {
  color: #506260;
  font-size: 12px;
  font-weight: 750;
}

@media (max-width: 1180px) {
  .setup-dock {
    grid-template-columns: 1fr;
  }

  .setup-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .setup-dock {
    padding: 8px;
  }

  .setup-grid,
  .google-photos-panel .super-summary {
    grid-template-columns: 1fr;
  }

  .setup-card {
    min-height: 150px;
  }

  .setup-hero-actions,
  .setup-card-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}

/* TarsBrain 1.62.5: unified liquid glass interface. */
:root {
  --liquid-ink: #181d1c;
  --liquid-muted: rgba(24, 29, 28, 0.62);
  --liquid-line: rgba(255, 255, 255, 0.58);
  --liquid-line-dark: rgba(255, 255, 255, 0.22);
  --liquid-glass: rgba(255, 255, 255, 0.48);
  --liquid-glass-strong: rgba(255, 255, 255, 0.70);
  --liquid-glass-soft: rgba(255, 255, 255, 0.28);
  --liquid-dark: rgba(44, 45, 42, 0.62);
  --liquid-dark-strong: rgba(34, 35, 33, 0.78);
  --liquid-orange: #ff8a34;
  --liquid-orange-soft: rgba(255, 138, 52, 0.22);
  --liquid-blue: #3f8fd8;
  --liquid-green: #64bf5a;
  --liquid-pink: #e64f79;
  --liquid-shadow: 0 30px 90px rgba(30, 34, 36, 0.22), 0 8px 24px rgba(30, 34, 36, 0.10);
  --liquid-card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), 0 18px 46px rgba(34, 38, 40, 0.12);
  --radius: 26px;
  --tight-radius: 18px;
  --content-max: 1640px;
}

html {
  background: #d5d0c4;
}

body {
  min-height: 100vh;
  color: var(--liquid-ink);
  background:
    radial-gradient(circle at 11% 75%, rgba(255, 244, 214, 0.80) 0 7%, rgba(255, 244, 214, 0) 21%),
    radial-gradient(circle at 84% 17%, rgba(207, 226, 231, 0.78) 0 10%, rgba(207, 226, 231, 0) 26%),
    radial-gradient(circle at 55% 55%, rgba(255, 255, 255, 0.66) 0 12%, rgba(255, 255, 255, 0) 34%),
    linear-gradient(112deg, rgba(93, 86, 76, 0.16) 0 14%, rgba(255,255,255,0) 14% 48%, rgba(91, 72, 55, 0.16) 48% 56%, rgba(255,255,255,0) 56%),
    linear-gradient(180deg, #d9d7cf 0%, #c9c4b7 48%, #a79c8b 100%);
  font-size: 14px;
  line-height: 1.45;
  overflow-x: hidden;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body::before {
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(86, 72, 58, 0.22) 0 2px, transparent 2px 34px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.15) 0 1px, transparent 1px 36px),
    radial-gradient(ellipse at 50% -5%, rgba(255, 255, 255, 0.64), rgba(255,255,255,0) 42%);
  filter: blur(0.2px);
  opacity: 0.55;
}

body::after {
  z-index: -1;
  background:
    radial-gradient(circle at 29% 38%, rgba(255, 255, 255, 0.40), rgba(255,255,255,0) 14%),
    radial-gradient(circle at 73% 70%, rgba(255, 138, 52, 0.12), rgba(255,138,52,0) 19%),
    linear-gradient(180deg, rgba(255,255,255,0.30), rgba(255,255,255,0.06));
  mix-blend-mode: screen;
}

button,
a,
summary {
  -webkit-tap-highlight-color: transparent;
}

.app-topbar {
  position: sticky;
  top: 18px;
  z-index: 30;
  width: min(1180px, calc(100% - 52px));
  min-height: 72px;
  margin: 18px auto 0;
  padding: 12px 14px 12px 18px;
  border: 1px solid var(--liquid-line);
  border-radius: 999px;
  color: #fff;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.28), rgba(255,255,255,0.08)),
    rgba(48, 48, 45, 0.48);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.52),
    inset 0 -1px 0 rgba(255,255,255,0.12),
    0 22px 70px rgba(23, 26, 27, 0.24);
  backdrop-filter: blur(30px) saturate(170%);
  -webkit-backdrop-filter: blur(30px) saturate(170%);
}

.app-topbar::before {
  content: "";
  position: absolute;
  inset: 1px;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(115deg, rgba(255,255,255,0.46), rgba(255,255,255,0.06) 33%, rgba(255,255,255,0.24) 64%, rgba(255,255,255,0.06)),
    radial-gradient(circle at 18% 20%, rgba(255,255,255,0.32), transparent 22%);
}

.app-topbar > * {
  position: relative;
}

.brand {
  min-width: 210px;
}

.brand img {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,0.52);
  border-radius: 15px;
  background: rgba(255,255,255,0.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.70), 0 10px 20px rgba(0,0,0,0.12);
}

.brand h1 {
  color: #fff;
  font-size: 18px;
  font-weight: 820;
}

.product-kicker,
.label {
  color: rgba(255, 138, 52, 0.92);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.brand p {
  max-width: 250px;
  color: rgba(255,255,255,0.70);
  font-size: 12px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.app-nav {
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 999px;
  background: rgba(255,255,255,0.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.32);
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
}

.app-nav a {
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: rgba(255,255,255,0.78);
  font-size: 12px;
  font-weight: 780;
  transition: background 140ms ease, color 140ms ease, transform 140ms ease, border-color 140ms ease;
}

.app-nav a:first-child,
.app-nav a:hover,
.app-nav a:focus-visible {
  color: #fff;
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.25);
  outline: none;
  transform: translateY(-1px);
}

.header-actions {
  flex-wrap: nowrap;
}

.shell.app-shell {
  position: relative;
  width: min(var(--content-max), calc(100% - 52px));
  margin: 26px auto 48px;
  padding: 24px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.42);
  border-radius: 38px;
  background:
    linear-gradient(128deg, rgba(255,255,255,0.32), rgba(255,255,255,0.13) 54%, rgba(255,255,255,0.22)),
    rgba(74, 74, 68, 0.30);
  box-shadow: var(--liquid-shadow);
  backdrop-filter: blur(36px) saturate(168%);
  -webkit-backdrop-filter: blur(36px) saturate(168%);
}

.app-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(125deg, rgba(255,255,255,0.48) 0%, rgba(255,255,255,0.12) 25%, rgba(255,255,255,0) 42%),
    radial-gradient(circle at 48% 9%, rgba(255,255,255,0.35), rgba(255,255,255,0) 24%),
    radial-gradient(circle at 84% 84%, rgba(255, 138, 52, 0.13), rgba(255,138,52,0) 22%);
}

.app-shell > * {
  position: relative;
  z-index: 1;
}

.setup-dock,
.command-center,
.panel,
.token-panel,
.locked-notice,
.join-card {
  border: 1px solid var(--liquid-line);
  border-radius: 30px;
  background:
    linear-gradient(146deg, var(--liquid-glass-strong), var(--liquid-glass-soft)),
    rgba(255,255,255,0.38);
  box-shadow: var(--liquid-card-shadow);
  backdrop-filter: blur(28px) saturate(165%);
  -webkit-backdrop-filter: blur(28px) saturate(165%);
}

.setup-dock,
.command-center {
  padding: 16px;
}

.setup-dock {
  gap: 12px;
  margin-bottom: 14px;
}

.setup-hero,
.command-copy {
  border: 1px solid rgba(255,255,255,0.54);
  border-radius: 26px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.56), rgba(255,255,255,0.23)),
    linear-gradient(330deg, rgba(255, 138, 52, 0.10), rgba(63, 143, 216, 0.08));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.76);
}

.setup-hero h2,
.command-copy h2 {
  color: #1b211f;
  font-size: clamp(22px, 2.2vw, 34px);
  letter-spacing: 0;
}

.setup-hero p,
.command-copy p,
.panel-head p,
.section-break p,
.setup-card p,
.feature-tile small,
.diary-summary-text,
.diary-chapter p,
.photo-sync-health p,
.memory-need p,
.memory-need small {
  color: var(--liquid-muted);
  min-width: 0;
  overflow-wrap: anywhere;
}

.setup-grid,
.feature-map,
.summary-grid,
.overview-deck,
.super-summary {
  gap: 10px;
}

.setup-card,
.feature-tile,
.overview-card,
.metric-card,
.super-chip,
.access-item,
.device-card,
.event-row,
.super-item,
.brain-item,
.quality-item,
.auth-item,
.required-auth-item,
.home-item,
.monitor-item,
.project-memory-card,
.photo-root-card,
.photo-item,
.photo-day-card,
.photo-manage-item,
.google-photos-panel,
.daily-grid > section,
.brain-layout > section,
.life-connectors > section,
.brain-focus,
.memory-need,
.diary-entry,
.life-day-cell,
.life-calendar-month,
.memory-calendar-card,
.memory-day-card {
  border: 1px solid rgba(255,255,255,0.62);
  border-radius: 24px;
  background:
    linear-gradient(148deg, rgba(255,255,255,0.70), rgba(255,255,255,0.30)),
    rgba(255,255,255,0.42);
  box-shadow: var(--liquid-card-shadow);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
}

.setup-card {
  min-height: 168px;
  min-width: 0;
  padding: 16px;
  overflow-wrap: anywhere;
}

.setup-card.primary {
  background:
    linear-gradient(148deg, rgba(255,255,255,0.76), rgba(255,255,255,0.30)),
    radial-gradient(circle at 86% 14%, rgba(255,138,52,0.24), rgba(255,138,52,0) 40%);
}

.setup-card-kicker,
.feature-tile span {
  border: 1px solid rgba(255,255,255,0.52);
  border-radius: 999px;
  background: rgba(255,255,255,0.36);
  color: rgba(25, 30, 29, 0.66);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.60);
}

.setup-card strong,
.feature-tile strong {
  color: #171c1b;
  font-weight: 820;
  min-width: 0;
  overflow-wrap: anywhere;
}

.setup-card > *,
.setup-card-actions,
.setup-card-actions > * {
  min-width: 0;
  max-width: 100%;
}

.feature-map {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.feature-tile {
  --tile-accent: var(--liquid-orange);
  position: relative;
  min-height: 120px;
  padding: 15px;
  overflow: hidden;
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.feature-tile::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tile-accent) 72%, white 28%);
  box-shadow: 0 14px 28px color-mix(in srgb, var(--tile-accent) 28%, transparent);
  opacity: 0.30;
}

.feature-tile.diary { --tile-accent: #f06d59; }
.feature-tile.photos { --tile-accent: #28a88f; }
.feature-tile.calendar { --tile-accent: #3f8fd8; }
.feature-tile.connect { --tile-accent: #8a73df; }
.feature-tile.devices { --tile-accent: #ffb13d; }
.feature-tile.system { --tile-accent: #697579; }

.feature-tile:hover,
.feature-tile:focus-visible {
  transform: translateY(-2px);
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.90),
    0 24px 54px rgba(30, 35, 37, 0.16);
}

.overview-card {
  min-height: 128px;
  padding: 16px;
}

.overview-card strong {
  color: #141a19;
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 850;
}

.overview-card small,
.metric-card small,
.super-chip small {
  color: var(--liquid-muted);
}

.overview-card-primary,
.benefit-board,
.access-passport,
.setup-advanced {
  color: #fff;
  border-color: var(--liquid-line-dark);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.20), rgba(255,255,255,0.05)),
    linear-gradient(180deg, var(--liquid-dark), var(--liquid-dark-strong));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    0 24px 60px rgba(20, 22, 22, 0.20);
}

.overview-card-primary strong,
.benefit-board h2,
.benefit-board strong,
.access-passport h2,
.access-passport code,
.setup-advanced summary {
  color: #fff;
}

.overview-card-primary small,
.benefit-board p,
.benefit-board small,
.access-passport p,
.access-passport small,
.setup-advanced,
.setup-advanced .super-chip small {
  color: rgba(255,255,255,0.70);
}

.pastel-blue {
  background:
    linear-gradient(145deg, rgba(224, 239, 255, 0.80), rgba(255,255,255,0.28)),
    radial-gradient(circle at 82% 20%, rgba(63, 143, 216, 0.22), transparent 38%);
}

.pastel-peach {
  background:
    linear-gradient(145deg, rgba(255, 230, 216, 0.82), rgba(255,255,255,0.28)),
    radial-gradient(circle at 82% 20%, rgba(255, 138, 52, 0.24), transparent 38%);
}

.pastel-lilac {
  background:
    linear-gradient(145deg, rgba(235, 229, 255, 0.78), rgba(255,255,255,0.28)),
    radial-gradient(circle at 82% 20%, rgba(138, 115, 223, 0.24), transparent 38%);
}

.benefit-board {
  border-radius: 30px;
  padding: 18px;
}

.autopilot-strip,
.benefit-list > *,
.benefit-actions > * {
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16);
}

.panel {
  padding: 18px;
}

.panel-head {
  margin-bottom: 12px;
}

.panel-head h2,
.section-break h2 {
  color: #171c1b;
  font-size: clamp(20px, 1.6vw, 28px);
  letter-spacing: 0;
}

.section-break {
  min-height: 54px;
  padding: 18px 8px 4px;
  border-top: 1px solid rgba(255,255,255,0.34);
}

.section-break .label {
  color: rgba(255,255,255,0.78);
}

.section-break h2,
.section-break p {
  color: rgba(255,255,255,0.92);
}

.metric-card {
  min-height: 86px;
}

.metric-card .label,
.overview-card .label {
  color: rgba(24,29,28,0.56);
}

.metric-card strong,
.super-chip strong {
  color: #141a19;
  font-weight: 850;
}

.access-passport {
  border-radius: 28px;
}

.access-passport code,
.passport-join-item code,
.auth-url-box,
.output,
pre,
code {
  display: inline-block;
  width: auto;
  border-color: rgba(255,255,255,0.34);
  border-radius: 16px;
  background: rgba(255,255,255,0.16);
  color: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.24);
  min-width: 0;
  max-width: 100%;
  white-space: normal !important;
  word-break: break-all;
  line-break: anywhere;
  overflow: hidden;
  overflow-wrap: anywhere !important;
}

pre,
pre code {
  display: block;
  width: 100%;
}

/* TarsBrain 1.63.0: room-backed liquid glass, no flat white canvas. */
:root {
  --liquid-ink: rgba(248, 251, 252, 0.94);
  --liquid-muted: rgba(233, 242, 245, 0.68);
  --liquid-line: rgba(255, 255, 255, 0.28);
  --liquid-line-dark: rgba(255, 255, 255, 0.18);
  --liquid-glass: rgba(255, 255, 255, 0.12);
  --liquid-glass-strong: rgba(255, 255, 255, 0.18);
  --liquid-glass-soft: rgba(255, 255, 255, 0.06);
  --liquid-dark: rgba(11, 13, 14, 0.38);
  --liquid-dark-strong: rgba(8, 10, 11, 0.58);
  --liquid-orange: #bde9ff;
  --liquid-orange-soft: rgba(189, 233, 255, 0.14);
  --liquid-blue: #bde9ff;
  --liquid-green: #a8e9d5;
  --liquid-pink: #e9ddcf;
  --liquid-shadow: 0 34px 110px rgba(0, 0, 0, 0.42), 0 10px 32px rgba(0, 0, 0, 0.24);
  --liquid-card-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 22px 60px rgba(0, 0, 0, 0.26);
}

html {
  background: #070909;
}

body {
  color: var(--liquid-ink);
  background:
    linear-gradient(180deg, rgba(5, 8, 9, 0.28), rgba(5, 8, 9, 0.44)),
    url("/liquid-room-bg.png?v=1.63.0") center center / cover fixed no-repeat,
    #070909;
}

body::before {
  z-index: -2;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,0.18), rgba(255,255,255,0) 28%),
    radial-gradient(circle at 10% 80%, rgba(140, 216, 255, 0.13), rgba(140, 216, 255, 0) 25%),
    linear-gradient(90deg, rgba(0,0,0,0.32), rgba(0,0,0,0.02) 44%, rgba(0,0,0,0.42));
  opacity: 1;
}

body::after {
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.01) 42%, rgba(0,0,0,0.34)),
    radial-gradient(ellipse at 50% -4%, rgba(255,255,255,0.22), rgba(255,255,255,0) 42%),
    radial-gradient(ellipse at 72% 84%, rgba(179, 228, 255, 0.10), rgba(179,228,255,0) 34%);
  mix-blend-mode: normal;
}

.app-topbar {
  color: #fff;
  border-color: rgba(255,255,255,0.22);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.18), rgba(255,255,255,0.055)),
    rgba(9, 11, 12, 0.36);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    inset 0 -1px 0 rgba(255,255,255,0.08),
    0 26px 90px rgba(0,0,0,0.36);
  backdrop-filter: blur(34px) saturate(165%) contrast(1.04);
  -webkit-backdrop-filter: blur(34px) saturate(165%) contrast(1.04);
}

.app-topbar::before {
  background:
    linear-gradient(116deg, rgba(255,255,255,0.24), rgba(255,255,255,0.035) 36%, rgba(255,255,255,0.16) 74%, rgba(255,255,255,0.04)),
    radial-gradient(circle at 18% 20%, rgba(210,242,255,0.20), transparent 24%);
}

.brand img {
  border-color: rgba(255,255,255,0.24);
  background: rgba(255,255,255,0.14);
}

.brand h1,
.panel-head h2,
.section-break h2,
.setup-hero h2,
.command-copy h2,
.setup-card strong,
.feature-tile strong,
.overview-card strong,
.metric-card strong,
.super-chip strong,
.diary-entry h3,
.photo-day-card h3,
.memory-day-card h3,
.access-passport h2,
.benefit-board h2,
.benefit-board strong,
.life-connectors > section h3 {
  color: rgba(250, 253, 255, 0.96);
  text-shadow: 0 1px 20px rgba(0,0,0,0.22);
}

.product-kicker,
.label,
.metric-card .label,
.overview-card .label {
  color: rgba(215, 240, 250, 0.78);
}

.brand p,
.setup-hero p,
.command-copy p,
.panel-head p,
.section-break p,
.setup-card p,
.feature-tile small,
.overview-card small,
.metric-card small,
.super-chip small,
.diary-summary-text,
.diary-chapter p,
.photo-sync-health p,
.memory-need p,
.memory-need small {
  color: var(--liquid-muted);
}

.app-nav {
  border-color: rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.09);
}

.app-nav a {
  color: rgba(241, 248, 250, 0.70);
}

.app-nav a:first-child,
.app-nav a:hover,
.app-nav a:focus-visible {
  color: #fff;
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.22);
}

.shell.app-shell {
  border-color: rgba(255,255,255,0.18);
  background:
    linear-gradient(128deg, rgba(255,255,255,0.10), rgba(255,255,255,0.028) 46%, rgba(255,255,255,0.07)),
    rgba(7, 9, 10, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(255,255,255,0.045),
    0 42px 130px rgba(0,0,0,0.42);
  backdrop-filter: blur(30px) saturate(150%);
  -webkit-backdrop-filter: blur(30px) saturate(150%);
}

.app-shell::before {
  background:
    linear-gradient(124deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.045) 26%, rgba(255,255,255,0) 45%),
    radial-gradient(circle at 55% 7%, rgba(210,242,255,0.12), rgba(255,255,255,0) 28%),
    radial-gradient(circle at 88% 84%, rgba(190,226,238,0.08), rgba(190,226,238,0) 24%);
}

.setup-dock,
.command-center,
.panel,
.token-panel,
.locked-notice,
.join-card {
  color: var(--liquid-ink);
  border-color: rgba(255,255,255,0.20);
  background:
    linear-gradient(146deg, rgba(255,255,255,0.15), rgba(255,255,255,0.045)),
    rgba(9, 11, 12, 0.22);
  box-shadow: var(--liquid-card-shadow);
  backdrop-filter: blur(28px) saturate(145%) contrast(1.03);
  -webkit-backdrop-filter: blur(28px) saturate(145%) contrast(1.03);
}

.setup-hero,
.command-copy,
.setup-card,
.feature-tile,
.overview-card,
.metric-card,
.super-chip,
.access-item,
.device-card,
.event-row,
.super-item,
.brain-item,
.quality-item,
.auth-item,
.required-auth-item,
.home-item,
.monitor-item,
.project-memory-card,
.photo-root-card,
.photo-item,
.photo-day-card,
.photo-manage-item,
.google-photos-panel,
.daily-grid > section,
.brain-layout > section,
.life-connectors > section,
.brain-focus,
.memory-need,
.diary-entry,
.life-day-cell,
.life-calendar-month,
.memory-calendar-card,
.memory-day-card,
.diary-chapter,
.photo-sync-health,
.autopilot-strip,
.benefit-list > *,
.benefit-actions > * {
  color: var(--liquid-ink);
  border-color: rgba(255,255,255,0.18);
  background:
    linear-gradient(148deg, rgba(255,255,255,0.16), rgba(255,255,255,0.045)),
    rgba(7, 10, 12, 0.20);
  box-shadow: var(--liquid-card-shadow);
  backdrop-filter: blur(24px) saturate(142%);
  -webkit-backdrop-filter: blur(24px) saturate(142%);
}

.setup-card.primary,
.pastel-blue,
.pastel-peach,
.pastel-lilac,
.overview-card-primary,
.benefit-board,
.access-passport,
.setup-advanced,
.life-connectors > section:nth-child(3),
.life-day-cell.has-items,
.memory-day-card.has-items,
.spotify-card-link {
  color: var(--liquid-ink);
  border-color: rgba(255,255,255,0.20);
  background:
    linear-gradient(145deg, rgba(235,248,255,0.17), rgba(255,255,255,0.045)),
    radial-gradient(circle at 86% 18%, rgba(185,232,255,0.12), transparent 40%),
    rgba(7, 10, 12, 0.22);
}

.feature-tile::after {
  background: rgba(207, 239, 250, 0.26);
  box-shadow: 0 18px 42px rgba(177, 224, 242, 0.14);
}

.feature-tile.diary,
.feature-tile.photos,
.feature-tile.calendar,
.feature-tile.connect,
.feature-tile.devices,
.feature-tile.system {
  --tile-accent: #d4edf8;
}

.setup-card-kicker,
.feature-tile span,
.join-status {
  color: rgba(235, 248, 252, 0.78);
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.10);
}

.primary-button,
.text-button,
.icon-button,
.danger-button,
.sync-technical-details summary {
  color: rgba(250,253,255,0.94);
  border-color: rgba(255,255,255,0.22);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.18), rgba(255,255,255,0.055)),
    rgba(8, 11, 12, 0.26);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    0 18px 38px rgba(0,0,0,0.24);
}

.primary-button {
  background:
    linear-gradient(145deg, rgba(203, 240, 255, 0.28), rgba(105, 154, 176, 0.16)),
    rgba(9, 12, 13, 0.32);
  border-color: rgba(214, 244, 255, 0.34);
}

.primary-button:hover,
.text-button:hover,
.icon-button:hover,
.danger-button:hover,
.sync-technical-details summary:hover,
.primary-button:focus-visible,
.text-button:focus-visible,
.icon-button:focus-visible,
.danger-button:focus-visible {
  background:
    linear-gradient(145deg, rgba(236, 250, 255, 0.24), rgba(255,255,255,0.075)),
    rgba(10, 13, 14, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.34),
    0 24px 50px rgba(0,0,0,0.30);
}

.access-passport code,
.passport-join-item code,
.auth-url-box,
.output,
pre,
code,
input,
select,
textarea {
  color: rgba(245, 252, 255, 0.90);
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
}

.memory-photo-collage {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.13), rgba(255,255,255,0.035)),
    rgba(8, 10, 11, 0.16);
}

.memory-photo-card {
  border-color: rgba(255,255,255,0.30);
  box-shadow: 0 22px 46px rgba(0,0,0,0.34);
}

@media (min-width: 1280px) {
  .app-nav {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.05)),
      rgba(7, 10, 11, 0.28);
  }
}

@media (max-width: 920px) {
  body {
    background:
      linear-gradient(180deg, rgba(5, 8, 9, 0.26), rgba(5, 8, 9, 0.54)),
      url("/liquid-room-bg.png?v=1.63.0") center center / cover fixed no-repeat,
      #070909;
  }
}

.primary-button,
.text-button,
.icon-button,
.danger-button,
.sync-technical-details summary {
  min-height: 38px;
  border: 1px solid rgba(255,255,255,0.44);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 12px 24px rgba(26, 31, 32, 0.11);
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.primary-button {
  color: #fff;
  background: linear-gradient(145deg, #ff9a44, #f37024);
  border-color: rgba(255, 180, 99, 0.64);
}

.text-button,
.icon-button,
.danger-button,
.sync-technical-details summary {
  color: #1c2422;
  background: rgba(255,255,255,0.48);
}

.benefit-board .text-button,
.benefit-board .icon-button,
.access-passport .text-button,
.access-passport .icon-button,
.setup-advanced .text-button,
.setup-advanced .icon-button {
  color: #fff;
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.22);
}

.primary-button:hover,
.text-button:hover,
.icon-button:hover,
.danger-button:hover,
.sync-technical-details summary:hover,
.primary-button:focus-visible,
.text-button:focus-visible,
.icon-button:focus-visible,
.danger-button:focus-visible {
  transform: translateY(-1px);
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.68), 0 18px 34px rgba(25, 30, 31, 0.15);
}

.icon-button {
  width: 42px;
  min-width: 42px;
  padding: 0;
}

.text-button,
.primary-button,
.danger-button {
  white-space: normal;
  text-align: center;
}

.life-connectors {
  gap: 10px;
}

.life-connectors > section {
  padding: 14px;
}

.life-connectors > section:nth-child(3) {
  background:
    linear-gradient(145deg, rgba(40, 42, 39, 0.62), rgba(31, 33, 31, 0.70)),
    radial-gradient(circle at 85% 20%, rgba(100, 191, 90, 0.24), transparent 32%);
  color: #fff;
}

.life-connectors > section:nth-child(3) .super-chip {
  color: #fff;
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.18);
}

.life-connectors > section:nth-child(3) .super-chip strong,
.life-connectors > section:nth-child(3) h3 {
  color: #fff;
}

.life-connectors > section:nth-child(3) .super-chip small {
  color: rgba(255,255,255,0.68);
}

.diary-list,
.photo-library-days,
.photo-recent-grid {
  gap: 14px;
}

.diary-entry {
  padding: 18px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.78), rgba(255,255,255,0.32)),
    radial-gradient(circle at 92% 10%, rgba(255, 138, 52, 0.16), transparent 36%);
}

.diary-entry h3,
.photo-day-card h3,
.memory-day-card h3 {
  color: #171c1b;
  font-size: 20px;
}

.diary-chapter {
  border-color: rgba(255,255,255,0.50);
  border-radius: 20px;
  background: rgba(255,255,255,0.35);
}

.memory-photo-collage {
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.34), rgba(255,255,255,0.12)),
    radial-gradient(circle at 14% 22%, rgba(255,138,52,0.18), transparent 26%);
}

.memory-photo-collage::before {
  opacity: 0.52;
}

.memory-photo-card {
  border: 1px solid rgba(255,255,255,0.80);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 18px 34px rgba(22, 25, 26, 0.18);
}

.memory-photo-card img,
.memory-photo-card video,
.photo-day-card img,
.photo-item img,
.photo-manage-item img {
  border-radius: 20px;
}

.memory-photo-card figcaption {
  display: none;
}

.photo-day-card,
.photo-root-card,
.photo-item,
.photo-manage-item {
  overflow: hidden;
}

.photo-sync-health {
  border-color: rgba(255,255,255,0.58);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.62), rgba(255,255,255,0.24)),
    radial-gradient(circle at 86% 20%, rgba(63,143,216,0.16), transparent 38%);
}

.life-calendar-wrap,
.memory-calendar-shell {
  border-color: rgba(255,255,255,0.52);
  border-radius: 28px;
  background: rgba(255,255,255,0.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.48);
}

.life-calendar-grid,
.memory-calendar-grid {
  gap: 8px;
}

.life-day-cell,
.memory-day-card {
  min-height: 112px;
  border-radius: 20px;
}

.life-day-cell.has-items,
.memory-day-card.has-items {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.78), rgba(255,255,255,0.34)),
    radial-gradient(circle at 86% 16%, rgba(255,138,52,0.20), transparent 34%);
}

.spotify-card-link {
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(29, 185, 84, 0.16), rgba(255,255,255,0.30));
}

.spotify-card-link:hover,
.spotify-card-link:focus-visible {
  transform: translateY(-1px);
  outline: none;
}

.output.compact {
  display: none;
}

input,
select,
textarea {
  border-color: rgba(255,255,255,0.48);
  border-radius: 16px;
  background: rgba(255,255,255,0.42);
  color: var(--liquid-ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.58);
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid rgba(255, 138, 52, 0.40);
  outline-offset: 2px;
}

@media (min-width: 1280px) {
  body {
    padding-left: 98px;
  }

  .app-nav {
    position: fixed;
    left: 26px;
    top: 160px;
    z-index: 35;
    display: grid;
    grid-template-columns: 1fr;
    width: 72px;
    max-height: calc(100vh - 190px);
    padding: 12px 8px;
    overflow-y: auto;
    border-radius: 999px;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.30), rgba(255,255,255,0.12)),
      rgba(52, 52, 48, 0.42);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.40),
      0 22px 60px rgba(23, 26, 27, 0.22);
  }

  .app-nav a {
    width: 54px;
    min-height: 50px;
    padding: 0 6px;
    white-space: normal;
    line-height: 1.12;
  }

  .app-topbar {
    grid-template-columns: minmax(240px, 0.7fr) auto;
  }

  .header-actions {
    grid-column: 2;
  }
}

@media (max-width: 1180px) {
  .feature-map {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 920px) {
  .app-topbar {
    width: calc(100% - 24px);
    top: 10px;
    margin-top: 10px;
    border-radius: 28px;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .app-nav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 6px;
  }

  .app-nav a {
    flex: 0 0 auto;
    min-width: 72px;
  }

  .header-actions {
    justify-content: flex-start;
  }

  .shell.app-shell {
    width: calc(100% - 20px);
    margin-top: 14px;
    padding: 14px;
    border-radius: 30px;
  }

  .feature-map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  body {
    padding-left: 0;
  }

  .app-topbar {
    padding: 12px;
  }

  .brand {
    min-width: 0;
  }

  .brand p {
    white-space: normal;
  }

  .setup-dock,
  .command-center,
  .panel {
    border-radius: 24px;
    padding: 12px;
  }

  .setup-hero,
  .command-copy,
  .setup-card,
  .feature-tile,
  .overview-card,
  .metric-card,
  .super-chip,
  .diary-entry,
  .photo-day-card,
  .life-connectors > section {
    border-radius: 20px;
  }

  .feature-map,
  .overview-deck,
  .summary-grid,
  .command-center .summary-grid {
    grid-template-columns: 1fr;
  }

  .overview-card,
  .feature-tile {
    min-height: 104px;
  }

  .button-row,
  .setup-hero-actions,
  .setup-card-actions,
  .command-actions,
  .access-passport-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .primary-button,
  .text-button,
  .danger-button {
    width: 100%;
  }
}

/* TarsBrain 1.63.1: final room-backed liquid override. This block stays last. */
body {
  color: rgba(248, 251, 252, 0.94) !important;
  background:
    linear-gradient(180deg, rgba(5, 8, 9, 0.24), rgba(5, 8, 9, 0.54)),
    url("/liquid-room-bg.png?v=1.63.1") center center / cover fixed no-repeat,
    #070909 !important;
}

body::before {
  background:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,0.16), rgba(255,255,255,0) 28%),
    radial-gradient(circle at 10% 80%, rgba(140, 216, 255, 0.12), rgba(140, 216, 255, 0) 25%),
    linear-gradient(90deg, rgba(0,0,0,0.34), rgba(0,0,0,0.02) 44%, rgba(0,0,0,0.44)) !important;
  opacity: 1 !important;
}

body::after {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.01) 42%, rgba(0,0,0,0.36)),
    radial-gradient(ellipse at 50% -4%, rgba(255,255,255,0.20), rgba(255,255,255,0) 42%),
    radial-gradient(ellipse at 72% 84%, rgba(179, 228, 255, 0.10), rgba(179,228,255,0) 34%) !important;
  mix-blend-mode: normal !important;
}

.app-topbar,
.setup-dock,
.command-center,
.panel,
.token-panel,
.locked-notice,
.join-card {
  color: rgba(248, 251, 252, 0.94) !important;
  border-color: rgba(255,255,255,0.20) !important;
  background:
    linear-gradient(146deg, rgba(255,255,255,0.15), rgba(255,255,255,0.045)),
    rgba(9, 11, 12, 0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    inset 0 -1px 0 rgba(255,255,255,0.08),
    0 30px 86px rgba(0,0,0,0.34) !important;
  backdrop-filter: blur(30px) saturate(145%) contrast(1.03) !important;
  -webkit-backdrop-filter: blur(30px) saturate(145%) contrast(1.03) !important;
}

.shell.app-shell {
  color: rgba(248, 251, 252, 0.94) !important;
  border-color: rgba(255,255,255,0.16) !important;
  background:
    linear-gradient(128deg, rgba(255,255,255,0.09), rgba(255,255,255,0.024) 46%, rgba(255,255,255,0.065)),
    rgba(7, 9, 10, 0.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(255,255,255,0.045),
    0 42px 130px rgba(0,0,0,0.42) !important;
  backdrop-filter: blur(30px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(150%) !important;
}

.setup-hero,
.command-copy,
.setup-card,
.setup-card.primary,
.feature-tile,
.feature-tile.diary,
.feature-tile.photos,
.feature-tile.calendar,
.feature-tile.connect,
.feature-tile.devices,
.feature-tile.system,
.overview-card,
.overview-card-primary,
.pastel-blue,
.pastel-peach,
.pastel-lilac,
.metric-card,
.super-chip,
.access-passport,
.benefit-board,
.setup-advanced,
.access-item,
.device-card,
.event-row,
.super-item,
.brain-item,
.quality-item,
.auth-item,
.required-auth-item,
.home-item,
.monitor-item,
.project-memory-card,
.photo-root-card,
.photo-item,
.photo-day-card,
.photo-manage-item,
.google-photos-panel,
.daily-grid > section,
.brain-layout > section,
.life-connectors > section,
.life-connectors > section:nth-child(3),
.brain-focus,
.memory-need,
.diary-entry,
.diary-chapter,
.life-day-cell,
.life-day-cell.has-items,
.life-calendar-month,
.memory-calendar-card,
.memory-day-card,
.memory-day-card.has-items,
.photo-sync-health,
.spotify-card-link,
.autopilot-strip,
.benefit-list > *,
.benefit-actions > * {
  color: rgba(248, 251, 252, 0.94) !important;
  border-color: rgba(255,255,255,0.18) !important;
  background:
    linear-gradient(148deg, rgba(255,255,255,0.16), rgba(255,255,255,0.045)),
    radial-gradient(circle at 86% 18%, rgba(185,232,255,0.10), transparent 40%),
    rgba(7, 10, 12, 0.20) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.26),
    inset 0 -1px 0 rgba(255,255,255,0.07),
    0 22px 60px rgba(0,0,0,0.28) !important;
  backdrop-filter: blur(24px) saturate(142%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(142%) !important;
}

.brand h1,
.panel-head h2,
.section-break h2,
.setup-hero h2,
.command-copy h2,
.setup-card strong,
.feature-tile strong,
.overview-card strong,
.metric-card strong,
.super-chip strong,
.diary-entry h3,
.photo-day-card h3,
.memory-day-card h3,
.access-passport h2,
.benefit-board h2,
.benefit-board strong,
.life-connectors > section h3 {
  color: rgba(250,253,255,0.96) !important;
  text-shadow: 0 1px 20px rgba(0,0,0,0.24);
}

.product-kicker,
.label,
.metric-card .label,
.overview-card .label,
.setup-card-kicker,
.feature-tile span,
.join-status {
  color: rgba(215,240,250,0.78) !important;
}

.brand p,
.setup-hero p,
.command-copy p,
.panel-head p,
.section-break p,
.setup-card p,
.feature-tile small,
.overview-card small,
.metric-card small,
.super-chip small,
.diary-summary-text,
.diary-chapter p,
.photo-sync-health p,
.memory-need p,
.memory-need small {
  color: rgba(233,242,245,0.68) !important;
}

.app-nav {
  border-color: rgba(255,255,255,0.16) !important;
  background: rgba(255,255,255,0.09) !important;
}

.app-nav a {
  color: rgba(241,248,250,0.72) !important;
}

.app-nav a:first-child,
.app-nav a:hover,
.app-nav a:focus-visible {
  color: #fff !important;
  background: rgba(255,255,255,0.18) !important;
  border-color: rgba(255,255,255,0.22) !important;
}

.feature-tile::after {
  background: rgba(207,239,250,0.24) !important;
  box-shadow: 0 18px 42px rgba(177,224,242,0.14) !important;
}

.primary-button,
.text-button,
.icon-button,
.danger-button,
.sync-technical-details summary {
  color: rgba(250,253,255,0.94) !important;
  border-color: rgba(255,255,255,0.22) !important;
  background:
    linear-gradient(145deg, rgba(203,240,255,0.22), rgba(255,255,255,0.055)),
    rgba(8, 11, 12, 0.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    0 18px 38px rgba(0,0,0,0.24) !important;
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid rgba(203,240,255,0.34) !important;
}

/* TarsBrain 1.63.2: two-layer liquid design: room background + one content plane. */
body {
  color: rgba(249, 252, 253, 0.94) !important;
  background: url("/liquid-room-bg.png?v=1.63.2") center center / cover fixed no-repeat, #070909 !important;
}

body::before,
body::after,
.app-topbar::before,
.app-shell::before,
.command-center::before,
.panel::before,
.overview-card::before,
.metric-card::before,
.access-passport::before,
.memory-photo-collage::before,
.feature-tile::after {
  display: none !important;
}

.app-topbar {
  color: rgba(249, 252, 253, 0.94) !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.brand img {
  border-color: rgba(255,255,255,0.18) !important;
  background: rgba(8, 11, 12, 0.16) !important;
  box-shadow: none !important;
}

.app-nav {
  border-color: rgba(255,255,255,0.14) !important;
  background: rgba(8, 11, 12, 0.16) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.app-nav a {
  color: rgba(241, 248, 250, 0.74) !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.app-nav a:first-child,
.app-nav a:hover,
.app-nav a:focus-visible {
  color: #fff !important;
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.12) !important;
}

.shell.app-shell {
  color: rgba(249, 252, 253, 0.94) !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  background: rgba(7, 10, 12, 0.42) !important;
  box-shadow: 0 42px 130px rgba(0,0,0,0.46) !important;
  backdrop-filter: blur(26px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(145%) !important;
}

.setup-dock,
.command-center,
.panel,
.token-panel,
.locked-notice,
.join-card,
.setup-hero,
.command-copy,
.setup-card,
.setup-card.primary,
.feature-tile,
.feature-tile.diary,
.feature-tile.photos,
.feature-tile.calendar,
.feature-tile.connect,
.feature-tile.devices,
.feature-tile.system,
.overview-card,
.overview-card-primary,
.pastel-blue,
.pastel-peach,
.pastel-lilac,
.metric-card,
.super-chip,
.access-passport,
.benefit-board,
.setup-advanced,
.access-item,
.device-card,
.event-row,
.super-item,
.brain-item,
.quality-item,
.auth-item,
.required-auth-item,
.home-item,
.monitor-item,
.project-memory-card,
.photo-root-card,
.photo-item,
.photo-day-card,
.photo-manage-item,
.google-photos-panel,
.daily-grid > section,
.brain-layout > section,
.life-connectors > section,
.life-connectors > section:nth-child(3),
.brain-focus,
.memory-need,
.diary-entry,
.diary-chapter,
.life-day-cell,
.life-day-cell.has-items,
.life-calendar-month,
.memory-calendar-card,
.memory-day-card,
.memory-day-card.has-items,
.photo-sync-health,
.spotify-card-link,
.autopilot-strip,
.benefit-list > *,
.benefit-actions > * {
  color: rgba(249, 252, 253, 0.94) !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.setup-dock,
.command-center,
.panel,
.benefit-board,
.access-passport,
.setup-advanced {
  border: 1px solid rgba(255,255,255,0.12) !important;
}

.setup-hero,
.command-copy,
.setup-card,
.feature-tile,
.overview-card,
.metric-card,
.super-chip,
.access-item,
.device-card,
.event-row,
.super-item,
.brain-item,
.quality-item,
.auth-item,
.required-auth-item,
.home-item,
.monitor-item,
.project-memory-card,
.photo-root-card,
.photo-item,
.photo-day-card,
.photo-manage-item,
.google-photos-panel,
.daily-grid > section,
.brain-layout > section,
.life-connectors > section,
.brain-focus,
.memory-need,
.diary-entry,
.diary-chapter,
.life-day-cell,
.life-calendar-month,
.memory-calendar-card,
.memory-day-card,
.photo-sync-health,
.autopilot-strip,
.benefit-list > *,
.benefit-actions > * {
  border: 1px solid rgba(255,255,255,0.10) !important;
}

.overview-card,
.metric-card,
.setup-card,
.feature-tile,
.super-chip {
  min-height: 92px;
}

.brand h1,
.panel-head h2,
.section-break h2,
.setup-hero h2,
.command-copy h2,
.setup-card strong,
.feature-tile strong,
.overview-card strong,
.metric-card strong,
.super-chip strong,
.diary-entry h3,
.photo-day-card h3,
.memory-day-card h3,
.access-passport h2,
.benefit-board h2,
.benefit-board strong,
.life-connectors > section h3 {
  color: rgba(250,253,255,0.96) !important;
  text-shadow: 0 1px 18px rgba(0,0,0,0.24);
}

.product-kicker,
.label,
.metric-card .label,
.overview-card .label,
.setup-card-kicker,
.feature-tile span,
.join-status {
  color: rgba(218, 241, 248, 0.76) !important;
  background: transparent !important;
  border-color: rgba(255,255,255,0.12) !important;
  box-shadow: none !important;
}

.brand p,
.setup-hero p,
.command-copy p,
.panel-head p,
.section-break p,
.setup-card p,
.feature-tile small,
.overview-card small,
.metric-card small,
.super-chip small,
.diary-summary-text,
.diary-chapter p,
.photo-sync-health p,
.memory-need p,
.memory-need small {
  color: rgba(231, 241, 244, 0.66) !important;
}

.primary-button,
.text-button,
.icon-button,
.danger-button,
.sync-technical-details summary,
input,
select,
textarea,
.access-passport code,
.passport-join-item code,
.auth-url-box,
.output,
pre,
code {
  color: rgba(249, 252, 253, 0.92) !important;
  border-color: rgba(255,255,255,0.16) !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.primary-button {
  border-color: rgba(218, 241, 248, 0.34) !important;
}

.primary-button:hover,
.text-button:hover,
.icon-button:hover,
.danger-button:hover,
.sync-technical-details summary:hover,
.primary-button:focus-visible,
.text-button:focus-visible,
.icon-button:focus-visible,
.danger-button:focus-visible {
  background: rgba(255,255,255,0.08) !important;
  box-shadow: none !important;
}

.memory-photo-card {
  border-color: rgba(255,255,255,0.22) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,0.24) !important;
}

@media (min-width: 1280px) {
  .app-nav {
    background: rgba(8, 11, 12, 0.16) !important;
  }
}

/* TarsBrain 1.63.3: keep navigation on the content plane, not in another glass pill. */
.app-nav {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.app-nav a,
.app-nav a:first-child,
.app-nav a:hover,
.app-nav a:focus-visible {
  background: transparent !important;
  box-shadow: none !important;
}

@media (min-width: 1280px) {
  .app-nav {
    background: transparent !important;
  }
}

/* TarsBrain 1.63.4: no background layer, no shell layer; content is the only surface. */
body {
  color: rgba(245, 249, 250, 0.94) !important;
  background: #090c0e !important;
}

body::before,
body::after,
.app-shell::before,
.app-topbar::before,
.command-center::before,
.panel::before,
.overview-card::before,
.metric-card::before,
.access-passport::before {
  display: none !important;
}

.shell.app-shell,
.app-topbar,
.app-nav {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.shell.app-shell {
  width: min(var(--content-max), calc(100% - 32px));
  margin: 16px auto 40px;
  padding: 0;
}

.setup-dock,
.command-center,
.panel,
.token-panel,
.locked-notice,
.join-card {
  color: rgba(245, 249, 250, 0.94) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.setup-hero,
.command-copy,
.setup-card,
.setup-card.primary,
.feature-tile,
.feature-tile.diary,
.feature-tile.photos,
.feature-tile.calendar,
.feature-tile.connect,
.feature-tile.devices,
.feature-tile.system,
.overview-card,
.overview-card-primary,
.pastel-blue,
.pastel-peach,
.pastel-lilac,
.metric-card,
.super-chip,
.access-passport,
.benefit-board,
.setup-advanced,
.daily-grid > section,
.brain-layout > section,
.life-connectors > section,
.brain-focus,
.diary-editorial-hero,
.diary-entry,
.photo-day-card,
.google-photos-panel,
.photo-sync-health,
.memory-photo-collage {
  color: rgba(245, 249, 250, 0.94) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  background: rgba(255, 255, 255, 0.075) !important;
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.26) !important;
  backdrop-filter: blur(22px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(145%) !important;
}

.panel,
.diary-panel {
  padding: 0 !important;
}

.diary-panel > .panel-head,
.daily-panel > .panel-head,
.life-calendar-panel > .panel-head,
.photos-panel > .panel-head,
.memory-panel > .panel-head,
.brain-panel > .panel-head,
.quality-panel > .panel-head,
.monitor-panel > .panel-head,
.super-panel > .panel-head,
.auth-panel > .panel-head,
.devices-panel > .panel-head,
.home-panel > .panel-head {
  padding: 16px 2px 10px;
}

.diary-entry,
.diary-editorial-hero {
  border-radius: 28px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.14), rgba(255,255,255,0.055)),
    rgba(255,255,255,0.07) !important;
}

.memory-photo-collage {
  min-height: 320px;
  border-radius: 26px !important;
  background: rgba(255,255,255,0.06) !important;
}

.memory-photo-card {
  border: 1px solid rgba(255,255,255,0.34) !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,0.08) !important;
  box-shadow: 0 22px 48px rgba(0,0,0,0.32) !important;
}

.memory-photo-card img,
.memory-photo-card video {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.primary-button,
.text-button,
.icon-button,
.danger-button,
.sync-technical-details summary,
input,
select,
textarea,
.access-passport code,
.passport-join-item code,
.auth-url-box,
.output,
pre,
code {
  color: rgba(245, 249, 250, 0.92) !important;
  border-color: rgba(255,255,255,0.18) !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

@media (max-width: 920px) {
  .shell.app-shell {
    width: calc(100% - 20px);
  }
}

/* TarsBrain 1.63.5: diary photos must be visible immediately. */
.memory-photo-card img,
.memory-photo-card video {
  opacity: 1 !important;
  visibility: visible !important;
}

/* TarsBrain 1.63.6: unified room-backed glass craft. */
:root {
  --glass-ink: rgba(247, 251, 252, 0.94);
  --glass-muted: rgba(225, 238, 242, 0.68);
  --glass-line: rgba(255, 255, 255, 0.20);
  --glass-fill: rgba(255, 255, 255, 0.105);
  --glass-fill-soft: rgba(255, 255, 255, 0.060);
  --glass-fill-strong: rgba(255, 255, 255, 0.150);
  --glass-blue: rgba(203, 240, 255, 0.72);
  --glass-shadow: 0 24px 80px rgba(0, 0, 0, 0.34);
  --glass-inner: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}

body {
  color: var(--glass-ink) !important;
  background:
    linear-gradient(180deg, rgba(5, 8, 9, 0.22), rgba(5, 8, 9, 0.50)),
    radial-gradient(ellipse at 50% 18%, rgba(255, 255, 255, 0.12), rgba(255,255,255,0) 42%),
    url("/liquid-room-bg.png?v=1.63.6") center center / cover fixed no-repeat,
    #080b0c !important;
}

body::before {
  display: block !important;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.42), rgba(0,0,0,0.02) 44%, rgba(0,0,0,0.38)),
    radial-gradient(circle at 76% 74%, rgba(198, 232, 245, 0.10), rgba(198,232,245,0) 30%) !important;
  opacity: 1 !important;
}

body::after,
.app-shell::before,
.command-center::before,
.panel::before,
.overview-card::before,
.metric-card::before,
.access-passport::before,
.memory-photo-collage::before,
.feature-tile::after {
  display: none !important;
}

.shell.app-shell {
  width: min(var(--content-max), calc(100% - 40px));
  margin: 18px auto 44px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 34px;
  background: rgba(7, 10, 12, 0.16) !important;
  box-shadow: 0 36px 120px rgba(0,0,0,0.30) !important;
  backdrop-filter: blur(14px) saturate(126%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(126%) !important;
}

.app-topbar {
  color: var(--glass-ink) !important;
  border-color: rgba(255,255,255,0.16) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.13), rgba(255,255,255,0.040)),
    rgba(7, 10, 12, 0.20) !important;
  box-shadow: var(--glass-inner), 0 18px 58px rgba(0,0,0,0.24) !important;
  backdrop-filter: blur(24px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(140%) !important;
}

.app-nav {
  border-color: rgba(255,255,255,0.12) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.10), rgba(255,255,255,0.030)),
    rgba(7, 10, 12, 0.18) !important;
  box-shadow: var(--glass-inner) !important;
  backdrop-filter: blur(18px) saturate(138%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(138%) !important;
}

.app-nav a,
.app-nav a:first-child,
.app-nav a:hover,
.app-nav a:focus-visible {
  color: rgba(241,248,250,0.80) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.app-nav a:first-child,
.app-nav a:hover,
.app-nav a:focus-visible {
  color: #fff !important;
  border-color: rgba(255,255,255,0.18) !important;
  background: rgba(255,255,255,0.09) !important;
}

.setup-dock,
.command-center,
.panel,
.token-panel,
.locked-notice,
.join-card,
.setup-hero,
.command-copy,
.setup-card,
.setup-card.primary,
.feature-tile,
.feature-tile.diary,
.feature-tile.photos,
.feature-tile.calendar,
.feature-tile.connect,
.feature-tile.devices,
.feature-tile.system,
.overview-card,
.overview-card-primary,
.pastel-blue,
.pastel-peach,
.pastel-lilac,
.metric-card,
.super-chip,
.access-passport,
.benefit-board,
.setup-advanced,
.access-item,
.device-card,
.event-row,
.super-item,
.brain-item,
.quality-item,
.auth-item,
.required-auth-item,
.home-item,
.monitor-item,
.project-memory-card,
.photo-root-card,
.photo-item,
.photo-day-card,
.photo-manage-item,
.google-photos-panel,
.daily-grid > section,
.brain-layout > section,
.life-connectors > section,
.life-connectors > section:nth-child(3),
.brain-focus,
.memory-need,
.diary-editorial-hero,
.diary-entry,
.diary-chapter,
.life-day-cell,
.life-day-cell.has-items,
.life-calendar-month,
.memory-calendar-card,
.memory-day-card,
.memory-day-card.has-items,
.photo-sync-health,
.spotify-card-link,
.autopilot-strip,
.benefit-list > *,
.benefit-actions > * {
  color: var(--glass-ink) !important;
  border: 1px solid var(--glass-line) !important;
  background:
    linear-gradient(145deg, var(--glass-fill-strong), var(--glass-fill-soft)),
    rgba(7, 10, 12, 0.18) !important;
  box-shadow: var(--glass-inner), var(--glass-shadow) !important;
  backdrop-filter: blur(22px) saturate(145%) contrast(1.02) !important;
  -webkit-backdrop-filter: blur(22px) saturate(145%) contrast(1.02) !important;
}

.setup-dock,
.command-center,
.panel,
.benefit-board,
.access-passport,
.setup-advanced {
  border-radius: 30px !important;
}

.setup-hero,
.command-copy,
.setup-card,
.feature-tile,
.overview-card,
.metric-card,
.super-chip,
.daily-grid > section,
.brain-layout > section,
.life-connectors > section,
.diary-entry,
.diary-editorial-hero,
.photo-day-card,
.google-photos-panel {
  border-radius: 24px !important;
}

.panel,
.diary-panel {
  padding: 16px !important;
}

.diary-panel > .panel-head,
.daily-panel > .panel-head,
.life-calendar-panel > .panel-head,
.photos-panel > .panel-head,
.memory-panel > .panel-head,
.brain-panel > .panel-head,
.quality-panel > .panel-head,
.monitor-panel > .panel-head,
.super-panel > .panel-head,
.auth-panel > .panel-head,
.devices-panel > .panel-head,
.home-panel > .panel-head {
  padding: 0 0 12px !important;
}

.brand h1,
.panel-head h2,
.section-break h2,
.setup-hero h2,
.command-copy h2,
.diary-editorial-copy h3,
.setup-card strong,
.feature-tile strong,
.overview-card strong,
.metric-card strong,
.super-chip strong,
.diary-entry .device-access-head strong,
.diary-entry h3,
.photo-day-card h3,
.memory-day-card h3,
.access-passport h2,
.benefit-board h2,
.benefit-board strong,
.life-connectors > section h3 {
  color: rgba(250,253,255,0.98) !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.20),
    0 8px 22px rgba(0,0,0,0.42),
    0 0 26px rgba(203,240,255,0.16) !important;
  transform: translateY(-1px);
}

.panel-head h2,
.section-break h2,
.diary-editorial-copy h3 {
  filter: drop-shadow(0 16px 24px rgba(0,0,0,0.28));
}

.product-kicker,
.label,
.metric-card .label,
.overview-card .label,
.setup-card-kicker,
.feature-tile span,
.join-status {
  color: rgba(216, 239, 247, 0.78) !important;
  background: rgba(255,255,255,0.060) !important;
  border: 1px solid rgba(255,255,255,0.13) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -1px 0 rgba(0,0,0,0.16) !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.10),
    0 -1px 0 rgba(0,0,0,0.28) !important;
}

.brand p,
.setup-hero p,
.command-copy p,
.panel-head p,
.section-break p,
.setup-card p,
.feature-tile small,
.overview-card small,
.metric-card small,
.super-chip small,
.diary-summary-text,
.diary-chapter p,
.photo-sync-health p,
.memory-need p,
.memory-need small {
  color: var(--glass-muted) !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.08),
    0 -1px 0 rgba(0,0,0,0.34) !important;
}

.primary-button,
.text-button,
.icon-button,
.danger-button,
.sync-technical-details summary,
input,
select,
textarea,
.access-passport code,
.passport-join-item code,
.auth-url-box,
.output,
pre,
code {
  color: rgba(246, 251, 252, 0.94) !important;
  border-color: rgba(255,255,255,0.18) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.11), rgba(255,255,255,0.035)),
    rgba(7, 10, 12, 0.14) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.14) !important;
  backdrop-filter: blur(16px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(135%) !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.08),
    0 -1px 0 rgba(0,0,0,0.24) !important;
}

.primary-button {
  border-color: rgba(203,240,255,0.36) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 12px 34px rgba(93, 161, 190, 0.12) !important;
}

.diary-entry,
.diary-editorial-hero {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.16), rgba(255,255,255,0.055)),
    rgba(7, 10, 12, 0.20) !important;
}

.memory-photo-collage {
  min-height: 320px;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 26px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.035)),
    rgba(7, 10, 12, 0.16) !important;
  box-shadow: var(--glass-inner), 0 18px 54px rgba(0,0,0,0.28) !important;
  backdrop-filter: blur(18px) saturate(136%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(136%) !important;
}

.memory-photo-card {
  border: 1px solid rgba(255,255,255,0.34) !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,0.08) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 22px 48px rgba(0,0,0,0.34) !important;
}

.memory-photo-card img,
.memory-photo-card video {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

@media (min-width: 1280px) {
  .app-nav {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.11), rgba(255,255,255,0.035)),
      rgba(7, 10, 12, 0.16) !important;
  }
}

@media (max-width: 920px) {
  .shell.app-shell {
    width: calc(100% - 20px);
    padding: 10px;
  }
}

/* TarsBrain 1.63.7: one room scene, one liquid content layer, crafted text depth. */
:root {
  --bg: #070908;
  --surface: rgba(238, 246, 246, 0.11);
  --surface-2: rgba(238, 246, 246, 0.07);
  --ink: rgba(249, 252, 252, 0.96);
  --muted: rgba(226, 240, 241, 0.68);
  --line: rgba(255, 255, 255, 0.19);
  --accent: rgba(197, 232, 241, 0.92);
  --accent-dark: rgba(84, 118, 126, 0.82);
  --accent-2: rgba(221, 236, 238, 0.58);
  --blue: rgba(181, 219, 232, 0.94);
  --warn: rgba(239, 217, 173, 0.86);
  --bad: rgba(245, 166, 176, 0.82);
  --good: rgba(173, 226, 199, 0.86);
  --shadow: 0 24px 74px rgba(0, 0, 0, 0.34);
  --liquid-edge: rgba(255, 255, 255, 0.24);
  --liquid-edge-soft: rgba(255, 255, 255, 0.10);
  --liquid-fill-a: rgba(255, 255, 255, 0.145);
  --liquid-fill-b: rgba(255, 255, 255, 0.050);
  --liquid-veil: rgba(6, 9, 10, 0.18);
  --liquid-inner: inset 0 1px 0 rgba(255, 255, 255, 0.30), inset 0 -1px 0 rgba(0, 0, 0, 0.22);
  --liquid-shadow: 0 26px 78px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.08);
  --text-etched: 0 1px 0 rgba(255, 255, 255, 0.12), 0 -1px 1px rgba(0, 0, 0, 0.50);
  --title-float: 0 1px 0 rgba(255, 255, 255, 0.32), 0 12px 26px rgba(0, 0, 0, 0.55), 0 0 30px rgba(225, 246, 255, 0.18);
}

html {
  min-height: 100%;
  background: #070908 !important;
}

body {
  min-height: 100vh;
  color: var(--ink) !important;
  background:
    linear-gradient(180deg, rgba(4, 6, 6, 0.12) 0%, rgba(4, 6, 6, 0.34) 58%, rgba(4, 6, 6, 0.50) 100%),
    url("/liquid-room-bg.png?v=1.63.7") center center / cover fixed no-repeat,
    #070908 !important;
}

body::before,
body::after,
.app-shell::before,
.app-shell::after,
.command-center::before,
.panel::before,
.overview-card::before,
.metric-card::before,
.access-passport::before,
.memory-photo-collage::before,
.feature-tile::before,
.feature-tile::after {
  display: none !important;
}

.shell.app-shell {
  width: min(var(--content-max), calc(100% - 40px));
  margin: 18px auto 44px;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.app-topbar,
.app-nav,
.setup-dock,
.command-center,
.panel,
.token-panel,
.locked-notice,
.join-card,
.setup-hero,
.command-copy,
.setup-card,
.feature-tile,
.overview-card,
.metric-card,
.super-chip,
.access-passport,
.benefit-board,
.setup-advanced,
.access-item,
.device-card,
.event-row,
.super-item,
.brain-item,
.quality-item,
.auth-item,
.required-auth-item,
.home-item,
.monitor-item,
.project-memory-card,
.photo-root-card,
.photo-item,
.photo-day-card,
.photo-manage-item,
.google-photos-panel,
.daily-grid > section,
.brain-layout > section,
.life-connectors > section,
.brain-focus,
.memory-need,
.diary-editorial-hero,
.diary-entry,
.diary-chapter,
.life-day-cell,
.life-calendar-month,
.memory-calendar-card,
.memory-day-card,
.photo-sync-health,
.spotify-card-link,
.autopilot-strip,
.benefit-list > *,
.benefit-actions > * {
  position: relative;
  overflow: hidden;
  color: var(--ink) !important;
  border: 1px solid var(--liquid-edge) !important;
  background:
    linear-gradient(145deg, var(--liquid-fill-a), var(--liquid-fill-b)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.010)),
    var(--liquid-veil) !important;
  box-shadow: var(--liquid-inner), var(--liquid-shadow) !important;
  backdrop-filter: blur(24px) saturate(150%) contrast(1.05) !important;
  -webkit-backdrop-filter: blur(24px) saturate(150%) contrast(1.05) !important;
}

.app-topbar::before,
.app-nav::before,
.setup-dock::before,
.command-center::before,
.panel::before,
.setup-hero::before,
.command-copy::before,
.setup-card::before,
.feature-tile::before,
.overview-card::before,
.metric-card::before,
.super-chip::before,
.access-passport::before,
.benefit-board::before,
.setup-advanced::before,
.device-card::before,
.event-row::before,
.project-memory-card::before,
.photo-day-card::before,
.google-photos-panel::before,
.diary-editorial-hero::before,
.diary-entry::before,
.memory-calendar-card::before,
.memory-day-card::before,
.photo-sync-health::before,
.spotify-card-link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(116deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.070) 28%, rgba(255, 255, 255, 0.018) 54%, rgba(255, 255, 255, 0.10) 100%),
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 34%);
  opacity: 0.56;
}

.app-topbar > *,
.app-nav > *,
.setup-dock > *,
.command-center > *,
.panel > *,
.setup-hero > *,
.command-copy > *,
.setup-card > *,
.feature-tile > *,
.overview-card > *,
.metric-card > *,
.super-chip > *,
.access-passport > *,
.benefit-board > *,
.setup-advanced > *,
.device-card > *,
.event-row > *,
.project-memory-card > *,
.photo-day-card > *,
.google-photos-panel > *,
.diary-editorial-hero > *,
.diary-entry > *,
.memory-calendar-card > *,
.memory-day-card > *,
.photo-sync-health > *,
.spotify-card-link > * {
  position: relative;
  z-index: 1;
}

.setup-dock,
.command-center,
.panel,
.benefit-board,
.access-passport,
.setup-advanced {
  border-radius: 30px !important;
}

.app-topbar {
  width: min(var(--content-max), calc(100% - 40px));
  margin: 18px auto 0;
  border-radius: 30px !important;
}

.app-nav {
  border-radius: 999px !important;
}

.setup-hero,
.command-copy,
.setup-card,
.feature-tile,
.overview-card,
.metric-card,
.super-chip,
.daily-grid > section,
.brain-layout > section,
.life-connectors > section,
.diary-entry,
.diary-editorial-hero,
.photo-day-card,
.google-photos-panel,
.memory-day-card,
.memory-calendar-card {
  border-radius: 24px !important;
}

.overview-card-primary,
.setup-card.primary,
.feature-tile.diary,
.feature-tile.photos,
.feature-tile.calendar,
.feature-tile.connect,
.feature-tile.devices,
.feature-tile.system,
.pastel-blue,
.pastel-peach,
.pastel-lilac {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.055)),
    rgba(7, 10, 12, 0.18) !important;
}

.brand h1,
.panel-head h2,
.section-break h2,
.setup-hero h2,
.command-copy h2,
.diary-editorial-copy h3,
.setup-card strong,
.feature-tile strong,
.overview-card strong,
.metric-card strong,
.super-chip strong,
.diary-entry .device-access-head strong,
.diary-entry h3,
.photo-day-card h3,
.memory-day-card h3,
.access-passport h2,
.benefit-board h2,
.benefit-board strong,
.life-connectors > section h3 {
  color: rgba(252, 254, 255, 0.99) !important;
  letter-spacing: 0 !important;
  text-shadow: var(--title-float) !important;
  filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.30));
  transform: translateY(-1px);
}

.brand p,
.setup-hero p,
.command-copy p,
.panel-head p,
.section-break p,
.setup-card p,
.feature-tile small,
.overview-card small,
.metric-card small,
.super-chip small,
.diary-summary-text,
.diary-chapter p,
.photo-sync-health p,
.memory-need p,
.memory-need small,
.event-row span,
.device-card span,
.auth-item span,
.required-auth-item span,
.home-item span,
.monitor-item span,
.spotify-card-link small {
  color: rgba(228, 242, 243, 0.72) !important;
  text-shadow: var(--text-etched) !important;
}

.product-kicker,
.label,
.metric-card .label,
.overview-card .label,
.setup-card-kicker,
.feature-tile span,
.join-status,
.status-pill,
.connection-pill {
  color: rgba(230, 244, 247, 0.80) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.025)),
    rgba(7, 10, 12, 0.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.20) !important;
  text-shadow: var(--text-etched) !important;
}

.primary-button,
.text-button,
.icon-button,
.danger-button,
.sync-technical-details summary,
input,
select,
textarea,
.access-passport code,
.passport-join-item code,
.auth-url-box,
.output,
pre,
code {
  color: rgba(249, 253, 253, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.19) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.035)),
    rgba(7, 10, 12, 0.16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), inset 0 -1px 0 rgba(0,0,0,0.20), 0 12px 32px rgba(0,0,0,0.18) !important;
  backdrop-filter: blur(16px) saturate(138%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(138%) !important;
  text-shadow: var(--text-etched) !important;
}

.primary-button {
  border-color: rgba(225, 246, 255, 0.36) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.18), rgba(255,255,255,0.050)),
    rgba(22, 34, 38, 0.22) !important;
}

.app-nav a,
.app-nav a:first-child,
.app-nav a:hover,
.app-nav a:focus-visible {
  color: rgba(240, 250, 251, 0.82) !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: var(--text-etched) !important;
}

.app-nav a:first-child,
.app-nav a:hover,
.app-nav a:focus-visible {
  color: rgba(255, 255, 255, 0.98) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  background: rgba(255, 255, 255, 0.080) !important;
}

.diary-panel > .panel-head,
.daily-panel > .panel-head,
.life-calendar-panel > .panel-head,
.photos-panel > .panel-head,
.memory-panel > .panel-head,
.brain-panel > .panel-head,
.quality-panel > .panel-head,
.monitor-panel > .panel-head,
.super-panel > .panel-head,
.auth-panel > .panel-head,
.devices-panel > .panel-head,
.home-panel > .panel-head {
  padding: 0 0 12px !important;
}

.memory-photo-collage {
  min-height: 320px;
  border: 1px solid rgba(255, 255, 255, 0.21) !important;
  border-radius: 26px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.13), rgba(255,255,255,0.040)),
    rgba(7, 10, 12, 0.15) !important;
  box-shadow: var(--liquid-inner), 0 22px 64px rgba(0,0,0,0.31) !important;
  backdrop-filter: blur(20px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
}

.memory-photo-card {
  border: 1px solid rgba(255, 255, 255, 0.36) !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, 0.075) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 22px 52px rgba(0,0,0,0.36) !important;
}

.memory-photo-card img,
.memory-photo-card video,
.photo-day-card img,
.photo-day-card video {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  object-fit: cover !important;
  filter: saturate(1.04) contrast(1.02);
}

@media (max-width: 920px) {
  .app-topbar,
  .shell.app-shell {
    width: calc(100% - 20px);
  }

  .shell.app-shell {
    padding: 0;
  }

  body {
    background:
      linear-gradient(180deg, rgba(4, 6, 6, 0.18) 0%, rgba(4, 6, 6, 0.44) 100%),
      url("/liquid-room-bg.png?v=1.63.7") center center / cover scroll no-repeat,
      #070908 !important;
  }
}

/* TarsBrain 1.63.8: final specificity pass for top navigation and glass parity. */
body {
  background:
    linear-gradient(180deg, rgba(4, 6, 6, 0.12) 0%, rgba(4, 6, 6, 0.34) 58%, rgba(4, 6, 6, 0.50) 100%),
    url("/liquid-room-bg.png?v=1.63.8") center center / cover fixed no-repeat,
    #070908 !important;
}

.app-topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  min-height: 0 !important;
  padding: 14px 18px !important;
}

.app-topbar .brand {
  flex: 0 0 auto !important;
  min-width: 210px;
}

.app-topbar .header-actions {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.app-nav {
  display: flex !important;
  flex: 1 1 auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: auto !important;
  max-width: none !important;
  min-height: 46px !important;
  padding: 6px !important;
}

.app-nav a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
}

.setup-card.primary,
.feature-tile.diary,
.feature-tile.photos,
.feature-tile.calendar,
.feature-tile.connect,
.feature-tile.devices,
.feature-tile.system,
.overview-card-primary,
.pastel-blue,
.pastel-peach,
.pastel-lilac,
.life-connectors > section:nth-child(3),
.life-day-cell.has-items,
.memory-day-card.has-items {
  color: var(--ink) !important;
  border: 1px solid var(--liquid-edge) !important;
  background:
    linear-gradient(145deg, var(--liquid-fill-a), var(--liquid-fill-b)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.010)),
    var(--liquid-veil) !important;
  box-shadow: var(--liquid-inner), var(--liquid-shadow) !important;
  backdrop-filter: blur(24px) saturate(150%) contrast(1.05) !important;
  -webkit-backdrop-filter: blur(24px) saturate(150%) contrast(1.05) !important;
}

.setup-card.primary::before,
.feature-tile.diary::before,
.feature-tile.photos::before,
.feature-tile.calendar::before,
.feature-tile.connect::before,
.feature-tile.devices::before,
.feature-tile.system::before,
.overview-card-primary::before,
.life-connectors > section:nth-child(3)::before,
.life-day-cell.has-items::before,
.memory-day-card.has-items::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(116deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.070) 28%, rgba(255, 255, 255, 0.018) 54%, rgba(255, 255, 255, 0.10) 100%),
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 34%);
  opacity: 0.56;
}

.setup-card.primary > *,
.feature-tile.diary > *,
.feature-tile.photos > *,
.feature-tile.calendar > *,
.feature-tile.connect > *,
.feature-tile.devices > *,
.feature-tile.system > *,
.overview-card-primary > *,
.life-connectors > section:nth-child(3) > *,
.life-day-cell.has-items > *,
.memory-day-card.has-items > * {
  position: relative;
  z-index: 1;
}

.setup-card p,
.feature-tile small,
.overview-card small,
.metric-card small,
.diary-entry p,
.diary-chapter p,
.photo-day-card p,
.memory-day-card p,
.life-day-cell,
.event-row,
.auth-item,
.required-auth-item,
.home-item,
.monitor-item {
  text-shadow: var(--text-etched) !important;
}

@media (max-width: 920px) {
  body {
    background:
      linear-gradient(180deg, rgba(4, 6, 6, 0.18) 0%, rgba(4, 6, 6, 0.44) 100%),
      url("/liquid-room-bg.png?v=1.63.8") center center / cover scroll no-repeat,
      #070908 !important;
  }

  .app-topbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 14px !important;
  }

  .app-topbar .brand,
  .app-topbar .header-actions,
  .app-nav {
    width: 100% !important;
  }

  .app-nav {
    justify-content: flex-start !important;
    overflow-x: auto !important;
  }
}

/* TarsBrain 1.63.9: remove leftover sidebar offsets from older dashboard shells. */
body {
  padding: 0 !important;
  background:
    linear-gradient(180deg, rgba(4, 6, 6, 0.12) 0%, rgba(4, 6, 6, 0.34) 58%, rgba(4, 6, 6, 0.50) 100%),
    url("/liquid-room-bg.png?v=1.63.9") center center / cover fixed no-repeat,
    #070908 !important;
}

.app-header,
.app-topbar,
.app-topbar .brand,
.app-topbar .header-actions,
.app-nav {
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
}

.app-topbar {
  margin: 18px auto 0 !important;
}

.app-nav {
  position: relative !important;
  margin: 0 !important;
}

@media (max-width: 920px) {
  body {
    padding: 0 !important;
    background:
      linear-gradient(180deg, rgba(4, 6, 6, 0.18) 0%, rgba(4, 6, 6, 0.44) 100%),
      url("/liquid-room-bg.png?v=1.63.9") center center / cover scroll no-repeat,
      #070908 !important;
  }

  .app-topbar {
    margin: 12px auto 0 !important;
  }
}

/* TarsBrain 1.63.12: compact etched labels instead of stretched outline bars. */
body {
  background:
    linear-gradient(180deg, rgba(4, 6, 6, 0.12) 0%, rgba(4, 6, 6, 0.34) 58%, rgba(4, 6, 6, 0.50) 100%),
    url("/liquid-room-bg.png?v=1.63.12") center center / cover fixed no-repeat,
    #070908 !important;
}

.product-kicker,
.label,
.metric-card .label,
.overview-card .label,
.setup-card-kicker,
.feature-tile span,
.join-status,
.status-pill,
.connection-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  max-width: 100% !important;
  min-height: 0 !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

.brand .product-kicker {
  display: block !important;
  width: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(235, 245, 247, 0.72) !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
  text-shadow: var(--text-etched) !important;
}

@media (max-width: 920px) {
  body {
    background:
      linear-gradient(180deg, rgba(4, 6, 6, 0.18) 0%, rgba(4, 6, 6, 0.44) 100%),
      url("/liquid-room-bg.png?v=1.63.12") center center / cover scroll no-repeat,
      #070908 !important;
  }
}

/* TarsBrain 1.63.7 polish: dynamic content receives the same liquid treatment. */
.modal,
.auth-modal,
.auth-modal-card,
.collection-card,
.life-memory-card,
.life-item,
.music-card,
.browser-memory,
.google-sync-repair-card,
.empty,
.output,
.auth-modal-output,
.photo-access-list > *,
.home-control-layout > *,
.home-action-grid,
.source-card,
.source-item,
.device-access-list > *,
.photo-access-list.compact > * {
  position: relative;
  overflow: hidden;
  color: var(--ink) !important;
  border: 1px solid var(--liquid-edge) !important;
  background:
    linear-gradient(145deg, var(--liquid-fill-a), var(--liquid-fill-b)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.010)),
    var(--liquid-veil) !important;
  box-shadow: var(--liquid-inner), var(--liquid-shadow) !important;
  backdrop-filter: blur(24px) saturate(150%) contrast(1.05) !important;
  -webkit-backdrop-filter: blur(24px) saturate(150%) contrast(1.05) !important;
}

.setup-dock::before,
.app-topbar::before,
.app-nav::before,
.setup-hero::before,
.command-copy::before,
.setup-card::before,
.feature-tile::before,
.overview-card::before,
.metric-card::before,
.super-chip::before,
.benefit-board::before,
.setup-advanced::before,
.device-card::before,
.event-row::before,
.project-memory-card::before,
.photo-day-card::before,
.google-photos-panel::before,
.diary-editorial-hero::before,
.diary-entry::before,
.memory-calendar-card::before,
.memory-day-card::before,
.photo-sync-health::before,
.spotify-card-link::before,
.modal::before,
.auth-modal-card::before,
.collection-card::before,
.life-memory-card::before,
.life-item::before,
.music-card::before,
.google-sync-repair-card::before,
.empty::before {
  display: block !important;
  content: "" !important;
}

.modal > *,
.auth-modal-card > *,
.collection-card > *,
.life-memory-card > *,
.life-item > *,
.music-card > *,
.google-sync-repair-card > *,
.empty > * {
  position: relative;
  z-index: 1;
}

.modal-head h2,
.auth-modal-card strong,
.collection-card strong,
.life-memory-card strong,
.life-item strong,
.music-card strong,
.google-sync-repair-card strong {
  color: rgba(252, 254, 255, 0.99) !important;
  letter-spacing: 0 !important;
  text-shadow: var(--title-float) !important;
  filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.30));
}

.modal p,
.modal small,
.auth-modal-card p,
.auth-modal-card small,
.collection-card p,
.life-memory-card p,
.life-item p,
.music-card small,
.google-sync-repair-card p,
.google-sync-repair-card small,
.empty {
  color: rgba(228, 242, 243, 0.72) !important;
  text-shadow: var(--text-etched) !important;
}

.diary-editorial-hero.no-visual {
  grid-template-columns: 1fr !important;
  min-height: 230px;
}

.diary-editorial-hero.no-visual .diary-editorial-copy {
  max-width: 760px;
}

/* TarsBrain 1.63.13: keep etched diary copy readable on glass. */
body {
  background:
    linear-gradient(180deg, rgba(4, 6, 6, 0.12) 0%, rgba(4, 6, 6, 0.34) 58%, rgba(4, 6, 6, 0.50) 100%),
    url("/liquid-room-bg.png?v=1.63.13") center center / cover fixed no-repeat,
    #070908 !important;
}

.diary-editorial-copy p,
.diary-entry p,
.diary-summary-text {
  color: rgba(232, 244, 245, 0.76) !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.11),
    0 -1px 1px rgba(0, 0, 0, 0.46) !important;
}

@media (max-width: 920px) {
  body {
    background:
      linear-gradient(180deg, rgba(4, 6, 6, 0.18) 0%, rgba(4, 6, 6, 0.44) 100%),
      url("/liquid-room-bg.png?v=1.63.13") center center / cover scroll no-repeat,
      #070908 !important;
  }
}