.app-replica, .app-replica * { box-sizing: border-box; }
.app-replica { margin: 0; padding: 0; }
.app-replica {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
  font-weight: var(--text-body--font-weight);
  -webkit-font-smoothing: antialiased;
}
.app-replica a { color: var(--accent); text-decoration: none; }
.app-replica a:hover { text-decoration: underline; }

.app-replica h1, .app-replica h2, .app-replica h3 { margin: 0; }
.app-replica h1 { font-size: var(--text-title-lg); line-height: var(--text-title-lg--line-height); letter-spacing: var(--text-title-lg--letter-spacing); font-weight: var(--text-title-lg--font-weight); }
.app-replica h2 { font-size: var(--text-body-strong); line-height: var(--text-body-strong--line-height); font-weight: var(--text-body-strong--font-weight); }
.app-replica h3 { font-size: var(--text-label); line-height: var(--text-label--line-height); letter-spacing: var(--text-label--letter-spacing); font-weight: var(--text-label--font-weight); text-transform: var(--text-label--text-transform); color: var(--text-muted); }
.app-replica p { margin: 0 0 var(--s2); }

.app-replica :focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); border-radius: var(--radius); }

.app-replica .stack { display: flex; flex-direction: column; gap: var(--s4); }
.app-replica .row { display: flex; flex-direction: row; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.app-replica .spread { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.app-replica .muted { color: var(--text-muted); }
.app-replica .mono { font-family: var(--font-mono); font-size: var(--text-mono); line-height: var(--text-mono--line-height); font-weight: var(--text-mono--font-weight); }

.app-replica .reading { font-size: var(--text-reading); line-height: var(--text-reading--line-height); font-weight: var(--text-reading--font-weight); }
.app-replica .prewrap { white-space: pre-wrap; }
.app-replica .flush { margin-bottom: 0; }
.app-replica .tight { margin-bottom: var(--s1); }

.app-replica .error { color: var(--red); }

.app-replica .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.app-replica .shell { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 100vh; }

.app-replica .shell-main { min-width: 0; }

.app-replica .content { padding: var(--s6); max-width: 1180px; }

.app-replica .rail {
  display: flex; flex-direction: column;
  border-right: 1px solid var(--border); background: var(--surface);
  padding: var(--s4) var(--s3);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.app-replica .rail-brand { display: flex; align-items: baseline; gap: var(--s2); padding: 0 var(--s2) var(--s4); }

.app-replica .rail-name { font-size: var(--text-title-lg); line-height: var(--text-title-lg--line-height); letter-spacing: var(--text-title-lg--letter-spacing); font-weight: var(--text-title-lg--font-weight); color: var(--text); }
.app-replica .rail-version { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-mono); line-height: var(--text-mono--line-height); font-weight: var(--text-mono--font-weight); }
.app-replica .rail-group { display: flex; flex-direction: column; }
.app-replica .rail-group + .rail-group { margin-top: var(--s4); }
.app-replica .rail-label { padding: 0 var(--s2) var(--s1); color: var(--text-muted); font-size: var(--text-label); line-height: var(--text-label--line-height); letter-spacing: var(--text-label--letter-spacing); font-weight: var(--text-label--font-weight); text-transform: var(--text-label--text-transform); }
.app-replica .rail-foot { margin-top: auto; padding: var(--s4) var(--s2) 0; color: var(--text-muted); font-size: var(--text-caption); line-height: var(--text-caption--line-height); font-weight: var(--text-caption--font-weight); }

.app-replica .nav-item { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: var(--s2); border-radius: var(--radius); color: var(--text-muted); transition: background var(--transition-fast), color var(--transition-fast); }
.app-replica .nav-item:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.app-replica .nav-item[aria-current="page"] { background: var(--surface-2); color: var(--text); }
.app-replica .nav-text { display: flex; align-items: center; gap: var(--s2); min-width: 0; }

.app-replica .nav-icon { flex: none; width: 16px; height: 16px; }
.app-replica .nav-meta { display: flex; align-items: center; gap: var(--s1); flex-wrap: nowrap; }
.app-replica .nav-key { font-family: var(--font-mono); font-size: var(--text-mono); line-height: var(--text-mono--line-height); font-weight: var(--text-mono--font-weight); color: var(--text-muted); }

.app-replica .nav-badge { background: var(--accent); color: var(--accent-ink); border-radius: 999px; padding: 0 var(--s1); font-size: var(--text-label); line-height: var(--text-label--line-height); letter-spacing: var(--text-label--letter-spacing); font-weight: var(--text-label--font-weight); text-transform: var(--text-label--text-transform); }

.app-replica .nav-badge.unknown { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--border-control); }

.app-replica button.nav-item { min-height: var(--s6); border: 0; background: transparent; text-align: left; }
.app-replica button.nav-item:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }

@media (forced-colors: active) {
  .app-replica .nav-item[aria-current="page"] { outline: var(--focus-width) solid; outline-offset: calc(-1 * var(--focus-width)); }
  .app-replica button.nav-item:hover:not(:disabled):not(:focus-visible) { outline: var(--focus-width) dashed; outline-offset: calc(-1 * var(--focus-width)); }
}

@media (max-width: 820px) {
  .app-replica .shell { grid-template-columns: minmax(0, 1fr); }
  .app-replica .rail { flex-direction: row; align-items: center; gap: var(--s3); height: auto; position: static; overflow-x: auto; padding: var(--s2) var(--s3); border-right: 0; border-bottom: 1px solid var(--border); }
  .app-replica .rail-brand { padding: 0 var(--s2); }
  .app-replica .rail-group { flex-direction: row; }
  .app-replica .rail-group + .rail-group { margin-top: 0; }
  .app-replica .rail-label, .app-replica .rail-foot { display: none; }
  .app-replica .content { padding: var(--s6) var(--s4); }
}

.app-replica .page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.app-replica .page-title { min-width: 0; }
.app-replica .page-sub { margin: var(--s1) 0 0; color: var(--text-muted); max-width: 68ch; }

.app-replica .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s4); }
.app-replica .cards { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.app-replica .card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s3); }

.app-replica .card-head:has(> p) { flex-wrap: wrap; row-gap: var(--s1); }
.app-replica .card-head > p { flex: 1 0 100%; margin: 0; color: var(--text-muted); }
.app-replica .card-body { display: flex; flex-direction: column; gap: var(--s4); }
.app-replica .card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--border); }

.app-replica .panel { display: flex; flex-direction: column; gap: var(--s2); }
.app-replica .panel > h2 { margin: 0; }

.app-replica .inset { display: flex; flex-direction: column; gap: var(--s1); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s2) var(--s3); }

.app-replica .tiles { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.app-replica .tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s3); display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.app-replica .tile.changed { background: var(--accent-soft); border-color: var(--accent); }

.app-replica .tile.dashed, .app-replica .card.dashed { border-style: dashed; border-color: var(--border-control); }
.app-replica .tile-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.app-replica .tile-label { margin: 0; font-size: var(--text-body-strong); line-height: var(--text-body-strong--line-height); font-weight: var(--text-body-strong--font-weight); color: var(--text); }
.app-replica .tile-main { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; min-width: 0; }

.app-replica .tile-figure { font-family: var(--font-mono); font-size: var(--text-figure); line-height: var(--text-figure--line-height); font-weight: var(--text-figure--font-weight); }
.app-replica .tile-words { color: var(--text); overflow-wrap: anywhere; }
.app-replica .tile-words.alone { font-weight: var(--text-body-strong--font-weight); }
.app-replica .tile-detail { margin: 0; color: var(--text-muted); font-size: var(--text-caption); line-height: var(--text-caption--line-height); font-weight: var(--text-caption--font-weight); }
.app-replica .tile-foot { margin: auto 0 0; color: var(--text-muted); font-size: var(--text-caption); line-height: var(--text-caption--line-height); font-weight: var(--text-caption--font-weight); }
.app-replica .tile.changed .tile-foot { color: var(--text); }


.app-replica button, .app-replica .btn { font: inherit; text-align: center; color: var(--text); background: var(--surface-2); border: 1px solid var(--border-control); border-radius: var(--radius); padding: var(--s1) var(--s3); min-height: var(--density-control-h); cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast); }

.app-replica button.quiet, .app-replica .btn.quiet { background: transparent; }
.app-replica button:hover:not(:disabled), .app-replica .btn:hover { background: color-mix(in srgb, var(--surface-2) 80%, var(--text)); text-decoration: none; }
.app-replica button:disabled { opacity: 0.5; cursor: not-allowed; }
.app-replica .btn { display: inline-flex; align-items: center; justify-content: center; }
.app-replica button.primary, .app-replica .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: var(--text-body-strong--font-weight); }
.app-replica button.primary:hover:not(:disabled), .app-replica .btn.primary:hover { background: var(--accent-hover); }
.app-replica button.danger, .app-replica .btn.danger { color: var(--destructive); border-color: color-mix(in srgb, var(--destructive) 45%, var(--border)); font-weight: var(--text-body-strong--font-weight); }

.app-replica button.danger:hover:not(:disabled), .app-replica .btn.danger:hover { background: color-mix(in srgb, var(--destructive) 12%, var(--surface-2)); border-color: var(--destructive); color: var(--text); }


.app-replica .icon-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--s1); flex: none; min-width: var(--density-control-h); min-height: var(--density-control-h); padding: 0 var(--s1); border: 0; background: transparent; color: var(--text-muted); transition: background var(--transition-fast), color var(--transition-fast); }
.app-replica .icon-button.small { min-width: var(--s6); min-height: var(--s6); }
.app-replica .icon-button > svg { flex: none; width: var(--s4); height: var(--s4); }
.app-replica .icon-button:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }

.app-replica .icon-button[aria-pressed="true"] { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--border-control); }

@media (forced-colors: active) {
  .app-replica .icon-button[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .app-replica .icon-button[aria-pressed="true"]:focus-visible { outline-color: CanvasText; }
  .app-replica .icon-button:hover:not(:disabled):not(:focus-visible) { outline: var(--focus-width) dashed; outline-offset: calc(-1 * var(--focus-width)); }
}

.app-replica .plain-button { display: inline-flex; align-items: center; min-height: var(--s6); padding: 0; border: 0; background: transparent; color: inherit; text-align: inherit; text-decoration: underline; transition: color var(--transition-fast); }

.app-replica .plain-button:hover:not(:disabled) { background: transparent; color: var(--text); text-decoration: underline; text-decoration-thickness: var(--focus-width); }

.app-replica .pill { display: inline-flex; align-items: center; gap: var(--s1); border-radius: 999px; padding: 0 var(--s2); font-size: var(--text-caption); line-height: var(--text-caption--line-height); font-weight: var(--text-caption--font-weight); border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted); white-space: nowrap; }

.app-replica .pill.green { color: var(--green); background: var(--green-soft); border-color: transparent; }
.app-replica .pill.amber { color: var(--amber); background: var(--amber-soft); border-color: transparent; }
.app-replica .pill.red { color: var(--red); background: var(--red-soft); border-color: transparent; }
.app-replica .pill.accent { color: var(--accent); background: var(--accent-soft); border-color: transparent; }

.app-replica .pill.overdue { color: var(--state-overdue); background: var(--red-soft); border-color: transparent; }
.app-replica button.pill { border-color: var(--border-control); }

.app-replica .notice { display: flex; align-items: flex-start; gap: var(--s2); padding: var(--s2) var(--s3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); color: var(--text); }
.app-replica .notice.info { background: var(--accent-soft); border-color: var(--accent); }
.app-replica .notice.warn { background: var(--amber-soft); border-color: var(--amber); }
.app-replica .notice.danger { background: var(--red-soft); border-color: var(--red); }
.app-replica .notice-icon { flex: none; width: 16px; height: 16px; margin-top: calc((var(--text-body--line-height) - 16px) / 2); }

.app-replica .notice.info .notice-icon { color: var(--accent); }
.app-replica .notice.warn .notice-icon { color: var(--amber); }
.app-replica .notice.danger .notice-icon { color: var(--red); }
.app-replica .notice-body { flex: 1; min-width: 0; }
.app-replica .notice-body > p:last-child { margin-bottom: 0; }

.app-replica table { border-collapse: collapse; width: 100%; }
.app-replica th, .app-replica td { text-align: left; padding: var(--s2); border-bottom: 1px solid var(--border); vertical-align: top; }
.app-replica th { color: var(--text-muted); font-size: var(--text-label); line-height: var(--text-label--line-height); letter-spacing: var(--text-label--letter-spacing); font-weight: var(--text-label--font-weight); text-transform: var(--text-label--text-transform); }
.app-replica tbody tr:hover { background: var(--surface-2); }
.app-replica .num { text-align: right; font-family: var(--font-mono); }


.app-replica input, .app-replica select, .app-replica textarea { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--border-control); border-radius: var(--radius); padding: var(--s1) var(--s2); }
.app-replica input:not([type="checkbox"]):not([type="radio"]), .app-replica select { min-height: var(--density-control-h); }
.app-replica input:hover, .app-replica select:hover { border-color: color-mix(in srgb, var(--border-control) 70%, var(--text)); }

.app-replica input[aria-invalid="true"], .app-replica select[aria-invalid="true"], .app-replica textarea[aria-invalid="true"] { border-color: var(--red); }
.app-replica textarea { padding: var(--s2); background: var(--surface); color: inherit; resize: vertical; }

.app-replica input::placeholder, .app-replica textarea::placeholder { color: var(--text-muted); }
.app-replica input:disabled, .app-replica select:disabled, .app-replica textarea:disabled { background: var(--surface-raised); color: var(--text-muted); cursor: not-allowed; }

.app-replica label, .app-replica .field-label { display: flex; flex-direction: column; gap: var(--s1); font-size: var(--text-caption); line-height: var(--text-caption--line-height); font-weight: var(--text-caption--font-weight); color: var(--text-muted); }
.app-replica .field { display: flex; flex-direction: column; gap: var(--s1); }
.app-replica .field > input, .app-replica .field > select, .app-replica .field > textarea { width: 100%; }
.app-replica .hint { margin: 0; color: var(--text-muted); font-size: var(--text-caption); line-height: var(--text-caption--line-height); font-weight: var(--text-caption--font-weight); }
.app-replica .field-error { margin: 0; color: var(--red); font-size: var(--text-caption); line-height: var(--text-caption--line-height); font-weight: var(--text-caption--font-weight); }

.app-replica .empty, .app-replica .first-run { color: var(--text-muted); text-align: center; padding: var(--s6) var(--s4); border: 1px dashed var(--border); border-radius: var(--radius); }
.app-replica .empty-title, .app-replica .empty > b, .app-replica .first-run > b { display: block; color: var(--text); margin-bottom: var(--s1); }
.app-replica .empty-title { font-weight: var(--text-body-strong--font-weight); }
.app-replica .empty-action { margin: var(--s3) 0 0; font-weight: var(--text-body-strong--font-weight); }
.app-replica .loading { color: var(--text-muted); }


.app-replica .model { border-left: 3px solid var(--accent); background: var(--accent-soft); padding: var(--s2) var(--s3); border-radius: var(--radius); margin: var(--s2) 0; }
.app-replica .model-label { font-size: var(--text-caption); line-height: var(--text-caption--line-height); text-transform: uppercase; opacity: 0.7; margin-bottom: var(--s1); }
.app-replica .model-body { white-space: pre-wrap; font: inherit; margin: 0; }
.app-replica .model-attachments { margin: var(--s2) 0 0; padding-left: var(--s4); }