tabwright 1.0.0

package/dist/extension/assets/options-CYH96Lcx.css

@@ -0,0 +1,1349 @@
+:root {
+  color-scheme: light dark;
+  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
+  color: #1d1d1f;
+  background: #f5f5f7;
+  --canvas: #f5f5f7;
+  --toolbar: rgba(255, 255, 255, 0.78);
+  --surface: rgba(255, 255, 255, 0.86);
+  --surface-solid: #ffffff;
+  --surface-raised: #ffffff;
+  --surface-muted: rgba(118, 118, 128, 0.08);
+  --control: rgba(118, 118, 128, 0.12);
+  --control-hover: rgba(118, 118, 128, 0.18);
+  --separator: rgba(60, 60, 67, 0.16);
+  --separator-strong: rgba(60, 60, 67, 0.24);
+  --text: #1d1d1f;
+  --text-secondary: #6e6e73;
+  --text-tertiary: #8e8e93;
+  --accent: #007aff;
+  --accent-hover: #006ee6;
+  --accent-soft: rgba(0, 122, 255, 0.11);
+  --green: #248a3d;
+  --green-soft: rgba(52, 199, 89, 0.12);
+  --amber: #a05a00;
+  --amber-soft: rgba(255, 159, 10, 0.13);
+  --red: #d70015;
+  --red-soft: rgba(255, 59, 48, 0.11);
+  --focus-ring: rgba(0, 122, 255, 0.38);
+  --shadow-popover: 0 12px 36px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    color: #f5f5f7;
+    background: #1c1c1e;
+    --canvas: #1c1c1e;
+    --toolbar: rgba(44, 44, 46, 0.78);
+    --surface: rgba(44, 44, 46, 0.84);
+    --surface-solid: #2c2c2e;
+    --surface-raised: #363638;
+    --surface-muted: rgba(118, 118, 128, 0.14);
+    --control: rgba(118, 118, 128, 0.24);
+    --control-hover: rgba(118, 118, 128, 0.32);
+    --separator: rgba(255, 255, 255, 0.12);
+    --separator-strong: rgba(255, 255, 255, 0.2);
+    --text: #f5f5f7;
+    --text-secondary: #aeaeb2;
+    --text-tertiary: #8e8e93;
+    --accent: #0a84ff;
+    --accent-hover: #409cff;
+    --accent-soft: rgba(10, 132, 255, 0.18);
+    --green: #30d158;
+    --green-soft: rgba(48, 209, 88, 0.15);
+    --amber: #ffb340;
+    --amber-soft: rgba(255, 159, 10, 0.16);
+    --red: #ff453a;
+    --red-soft: rgba(255, 69, 58, 0.16);
+    --focus-ring: rgba(10, 132, 255, 0.48);
+    --shadow-popover: 0 14px 42px rgba(0, 0, 0, 0.48), 0 2px 8px rgba(0, 0, 0, 0.28);
+  }
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  min-height: 100%;
+}
+
+body {
+  margin: 0;
+  min-width: 760px;
+  overflow: hidden;
+  background: var(--canvas);
+  color: var(--text);
+  -webkit-font-smoothing: antialiased;
+}
+
+button,
+input {
+  font: inherit;
+}
+
+button {
+  border: 0;
+  border-radius: 8px;
+  color: var(--text);
+  cursor: pointer;
+}
+
+button:focus-visible,
+input:focus-visible,
+summary:focus-visible {
+  outline: 3px solid var(--focus-ring);
+  outline-offset: 1px;
+}
+
+h1,
+h2,
+h3,
+p {
+  margin: 0;
+}
+
+h1 {
+  font-size: 16px;
+  font-weight: 650;
+  letter-spacing: -0.01em;
+  line-height: 1.2;
+}
+
+h2 {
+  font-size: 20px;
+  font-weight: 650;
+  letter-spacing: -0.02em;
+  line-height: 1.22;
+}
+
+h3 {
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.app-shell {
+  display: grid;
+  grid-template-rows: 64px auto minmax(0, 1fr);
+  height: 100vh;
+  overflow: hidden;
+}
+
+.toolbar {
+  position: relative;
+  z-index: 10;
+  display: grid;
+  grid-template-columns: minmax(190px, 1fr) auto minmax(420px, 1fr);
+  gap: 16px;
+  align-items: center;
+  min-width: 0;
+  border-bottom: 1px solid var(--separator);
+  padding: 0 18px;
+  background: var(--toolbar);
+  backdrop-filter: saturate(180%) blur(24px);
+  -webkit-backdrop-filter: saturate(180%) blur(24px);
+}
+
+.brand-block {
+  display: grid;
+  grid-template-columns: 34px minmax(0, 1fr);
+  gap: 10px;
+  align-items: center;
+  min-width: 0;
+}
+
+.brand-mark {
+  display: grid;
+  width: 34px;
+  height: 34px;
+  place-items: center;
+  border: 1px solid var(--separator);
+  border-radius: 10px;
+  background: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(224, 255, 236, 0.78));
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+}
+
+@media (prefers-color-scheme: dark) {
+  .brand-mark {
+    background: linear-gradient(145deg, rgba(72, 72, 74, 0.96), rgba(37, 78, 53, 0.82));
+  }
+
+  .brand-mark img {
+    filter: invert(1);
+  }
+}
+
+.brand-mark img {
+  width: 20px;
+  height: 20px;
+}
+
+.brand-block p {
+  margin-top: 2px;
+  overflow: hidden;
+  color: var(--text-secondary);
+  font-size: 11px;
+  line-height: 1.3;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tabs,
+.language-switch {
+  display: inline-flex;
+  align-items: center;
+  padding: 3px;
+  border: 1px solid var(--separator);
+  border-radius: 9px;
+  background: var(--control);
+  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.12);
+}
+
+.tabs {
+  justify-self: center;
+}
+
+.tab-button,
+.language-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 28px;
+  padding: 0 11px;
+  background: transparent;
+  color: var(--text-secondary);
+  font-size: 12px;
+  font-weight: 550;
+  white-space: nowrap;
+}
+
+.tab-button:hover,
+.language-button:hover {
+  color: var(--text);
+}
+
+.tab-button.active,
+.language-button.active {
+  background: var(--surface-raised);
+  color: var(--text);
+  box-shadow:
+    0 1px 3px rgba(0, 0, 0, 0.12),
+    inset 0 0 0 0.5px var(--separator);
+}
+
+.count-pill {
+  display: inline-flex;
+  min-width: 18px;
+  height: 17px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  padding: 0 5px;
+  background: var(--control);
+  color: var(--text-secondary);
+  font-size: 10px;
+  font-weight: 600;
+}
+
+.toolbar-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  align-items: center;
+  min-width: 0;
+}
+
+.search-field {
+  display: block;
+  min-width: 150px;
+  width: clamp(150px, 18vw, 240px);
+}
+
+.search-field input {
+  width: 100%;
+  height: 32px;
+  border: 1px solid var(--separator);
+  border-radius: 9px;
+  padding: 0 10px 0 30px;
+  background:
+    linear-gradient(45deg, transparent 48%, var(--text-tertiary) 49% 54%, transparent 55%) 18px 19px / 7px 7px no-repeat,
+    radial-gradient(circle at center, transparent 42%, var(--text-tertiary) 45% 56%, transparent 58%) 9px 8px / 12px
+      12px no-repeat,
+    var(--surface-muted);
+  color: var(--text);
+  font-size: 12px;
+  outline: 0;
+}
+
+.search-field input:focus {
+  border-color: var(--accent);
+  background-color: var(--surface-solid);
+}
+
+.search-field input::placeholder {
+  color: var(--text-tertiary);
+}
+
+.status-pill {
+  display: flex;
+  max-width: 210px;
+  height: 30px;
+  align-items: center;
+  gap: 7px;
+  border-radius: 8px;
+  padding: 0 9px;
+  background: var(--surface-muted);
+  color: var(--text-secondary);
+  font-size: 11px;
+}
+
+.status-dot {
+  width: 7px;
+  height: 7px;
+  flex: 0 0 auto;
+  border-radius: 999px;
+  background: var(--green);
+  box-shadow: 0 0 0 3px var(--green-soft);
+}
+
+#status-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.icon-button {
+  display: grid;
+  width: 32px;
+  height: 32px;
+  place-items: center;
+  background: transparent;
+  color: var(--text-secondary);
+  font-size: 20px;
+  line-height: 1;
+}
+
+.icon-button:hover {
+  background: var(--control-hover);
+  color: var(--text);
+}
+
+.language-switch {
+  flex: 0 0 auto;
+}
+
+.language-button {
+  min-height: 25px;
+  padding: 0 8px;
+  font-size: 11px;
+}
+
+.relay-review-warning {
+  z-index: 4;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px;
+  border-bottom: 1px solid rgba(255, 159, 10, 0.28);
+  padding: 10px 18px;
+  background: var(--amber-soft);
+  color: var(--amber);
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+.relay-review-warning[hidden] {
+  display: none;
+}
+
+.relay-review-warning p {
+  margin-top: 2px;
+}
+
+.relay-review-warning code {
+  flex: 0 1 auto;
+  color: var(--text-secondary);
+  font:
+    10px/1.4 ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace;
+  text-align: right;
+}
+
+.workspace {
+  display: grid;
+  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.collection-panel,
+.detail-panel {
+  min-width: 0;
+  min-height: 0;
+}
+
+.collection-panel {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  overflow: hidden;
+  border-right: 1px solid var(--separator);
+  background: var(--surface);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+}
+
+.collection-header {
+  padding: 20px 18px 16px;
+  border-bottom: 1px solid var(--separator);
+}
+
+.eyebrow {
+  color: var(--text-tertiary);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  line-height: 1.2;
+  text-transform: uppercase;
+}
+
+.collection-header h2,
+.detail-header h2 {
+  margin-top: 5px;
+}
+
+.collection-header p:not(.eyebrow) {
+  margin-top: 6px;
+  color: var(--text-secondary);
+  font-size: 12px;
+  line-height: 1.45;
+}
+
+.list-view,
+.list-body {
+  min-height: 0;
+}
+
+.list-view {
+  display: flex;
+  flex-direction: column;
+}
+
+.list-body {
+  flex: 1;
+  overflow: auto;
+  padding: 8px;
+}
+
+.recording-item {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 6px;
+  align-items: center;
+  border-radius: 10px;
+}
+
+.recording-select,
+.skill-item {
+  display: grid;
+  width: 100%;
+  gap: 5px;
+  min-width: 0;
+  padding: 10px;
+  background: transparent;
+  text-align: left;
+}
+
+.skill-item {
+  border-radius: 10px;
+}
+
+.recording-item + .recording-item,
+.skill-item + .skill-item {
+  margin-top: 2px;
+}
+
+.recording-item:hover,
+.skill-item:hover {
+  background: var(--surface-muted);
+}
+
+.recording-item.active,
+.skill-item.active {
+  background: var(--accent-soft);
+  box-shadow: inset 2px 0 0 var(--accent);
+}
+
+.recording-title,
+.skill-title {
+  overflow: hidden;
+  color: var(--text);
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.35;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.recording-meta,
+.skill-meta,
+.detail-meta,
+.field-value {
+  color: var(--text-secondary);
+  font-size: 11px;
+  line-height: 1.4;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.recording-meta,
+.skill-meta {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.recording-actions,
+.skill-actions,
+.badge-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  align-items: center;
+}
+
+.recording-actions {
+  opacity: 0;
+  padding-right: 6px;
+  transition: opacity 120ms ease;
+}
+
+.recording-item:hover .recording-actions,
+.recording-item:focus-within .recording-actions,
+.recording-item.active .recording-actions {
+  opacity: 1;
+}
+
+.recording-actions button,
+.skill-actions button,
+.replay-controls button,
+.lifecycle-command button {
+  min-height: 28px;
+  padding: 0 10px;
+  background: var(--control);
+  color: var(--text);
+  font-size: 11px;
+  font-weight: 550;
+}
+
+.recording-actions button:hover,
+.skill-actions button:hover,
+.replay-controls button:hover,
+.lifecycle-command button:hover {
+  background: var(--control-hover);
+}
+
+.skill-actions button {
+  background: var(--accent);
+  color: #ffffff;
+}
+
+.skill-actions button:hover {
+  background: var(--accent-hover);
+}
+
+.detail-panel {
+  overflow: hidden;
+  background: var(--canvas);
+}
+
+.detail-header {
+  display: flex;
+  min-height: 68px;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--separator);
+  padding: 14px 22px;
+  background: var(--surface);
+}
+
+.replay-view {
+  display: grid;
+  grid-template-rows: auto minmax(260px, 1fr) auto auto;
+  height: 100%;
+  min-height: 0;
+}
+
+.replay-player {
+  position: relative;
+  display: grid;
+  min-height: 0;
+  margin: 18px 22px 0;
+  place-items: center;
+  overflow: hidden;
+  border: 1px solid var(--separator-strong);
+  border-radius: 14px;
+  background:
+    linear-gradient(45deg, rgba(255, 255, 255, 0.025) 25%, transparent 25%),
+    linear-gradient(-45deg, rgba(255, 255, 255, 0.025) 25%, transparent 25%), #202124;
+  background-size: 20px 20px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+}
+
+.replay-player .empty-state {
+  max-width: 280px;
+  border: 1px solid rgba(255, 255, 255, 0.11);
+  border-radius: 10px;
+  padding: 13px 16px;
+  background: rgba(255, 255, 255, 0.07);
+  color: rgba(255, 255, 255, 0.86);
+  text-align: center;
+}
+
+.replay-player .replayer-wrapper {
+  position: absolute;
+  left: 0;
+  top: 0;
+  transform-origin: top left;
+  will-change: transform;
+}
+
+.replay-player iframe {
+  border: 0;
+  background: #ffffff;
+}
+
+.replay-controls {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+  min-height: 50px;
+  margin: 0 22px;
+  padding: 10px 0;
+}
+
+.replay-controls input[type='range'] {
+  min-width: 0;
+  flex: 1;
+  accent-color: var(--accent);
+}
+
+.replay-time {
+  min-width: 84px;
+  color: var(--text-secondary);
+  font:
+    11px/1 ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace;
+  text-align: right;
+}
+
+.replay-warning {
+  flex-basis: 100%;
+  border-radius: 8px;
+  padding: 8px 10px;
+  background: var(--amber-soft);
+  color: var(--amber);
+  font-size: 11px;
+  line-height: 1.4;
+}
+
+.recording-technical {
+  max-height: 150px;
+  margin: 0 22px 18px;
+  overflow: auto;
+  border-top: 1px solid var(--separator);
+}
+
+.recording-technical summary {
+  padding: 12px 0;
+  color: var(--text-secondary);
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 550;
+}
+
+.recording-details {
+  padding: 0 0 12px;
+  color: var(--text-secondary);
+  font:
+    11px/1.5 ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+
+.skill-detail {
+  height: 100%;
+  min-height: 0;
+  overflow: auto;
+  padding: 26px clamp(24px, 4vw, 52px) 42px;
+}
+
+.skill-detail > * {
+  width: min(100%, 980px);
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.skill-header {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 10px 18px;
+  align-items: start;
+  padding-bottom: 22px;
+  border-bottom: 1px solid var(--separator);
+}
+
+.skill-header h2,
+.skill-header .detail-meta,
+.skill-header .badge-row {
+  grid-column: 1;
+}
+
+.skill-header .skill-actions {
+  grid-column: 2;
+  grid-row: 1 / span 3;
+}
+
+.detail-meta {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.badge-row {
+  margin-top: 2px;
+}
+
+.badge {
+  display: inline-flex;
+  min-height: 20px;
+  align-items: center;
+  border-radius: 999px;
+  padding: 0 7px;
+  background: var(--control);
+  color: var(--text-secondary);
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 1;
+}
+
+.badge-trusted,
+.badge-read,
+.badge-ready {
+  background: var(--green-soft);
+  color: var(--green);
+}
+
+.badge-draft,
+.badge-drafted,
+.badge-write {
+  background: var(--amber-soft);
+  color: var(--amber);
+}
+
+.badge-disabled,
+.badge-drifted,
+.badge-dangerous,
+.badge-blocked {
+  background: var(--red-soft);
+  color: var(--red);
+}
+
+.badge-validated {
+  background: var(--accent-soft);
+  color: var(--accent);
+}
+
+.auth-card {
+  display: grid;
+  gap: 12px;
+  margin-top: 22px;
+  border: 1px solid rgba(0, 122, 255, 0.24);
+  border-radius: 14px;
+  padding: 16px;
+  background: var(--accent-soft);
+}
+
+.auth-card[data-status='expired'] {
+  border-color: rgba(255, 69, 58, 0.28);
+  background: var(--red-soft);
+}
+
+.auth-card[data-status='expiring'],
+.auth-card[data-status='missing'],
+.auth-card[data-status='unknown'] {
+  border-color: rgba(255, 159, 10, 0.3);
+  background: var(--amber-soft);
+}
+
+.auth-error {
+  margin: 0;
+  padding: 10px 12px;
+  border-radius: 10px;
+  background: var(--red-soft);
+  color: var(--red);
+  font-size: 11px;
+  line-height: 1.5;
+}
+
+.auth-heading,
+.auth-detail,
+.auth-meta {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.auth-heading {
+  justify-content: space-between;
+}
+
+.auth-description,
+.auth-privacy {
+  color: var(--text-secondary);
+  font-size: 11px;
+  line-height: 1.5;
+}
+
+.auth-detail {
+  align-items: flex-start;
+  font-size: 11px;
+}
+
+.auth-detail strong {
+  flex: 0 0 auto;
+}
+
+.auth-detail span {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  color: var(--text-secondary);
+}
+
+.auth-meta {
+  flex-wrap: wrap;
+  color: var(--text-secondary);
+  font-size: 10px;
+}
+
+.auth-action {
+  justify-self: start;
+  min-height: 32px;
+  padding: 0 12px;
+  background: var(--accent);
+  color: #fff;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.auth-action:hover {
+  background: var(--accent-hover);
+}
+
+.auth-action:disabled {
+  cursor: wait;
+  opacity: 0.66;
+}
+
+.auth-dialog {
+  width: min(440px, calc(100vw - 32px));
+  border: 1px solid var(--separator-strong);
+  border-radius: 16px;
+  padding: 0;
+  background: var(--surface-solid);
+  color: var(--text);
+  box-shadow: var(--shadow-popover);
+}
+
+.auth-dialog::backdrop {
+  background: rgba(0, 0, 0, 0.38);
+  backdrop-filter: blur(3px);
+}
+
+.auth-dialog-content {
+  display: grid;
+  gap: 14px;
+  padding: 22px;
+}
+
+.auth-dialog-content > p {
+  color: var(--text-secondary);
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.auth-domain-list {
+  display: grid;
+  gap: 6px;
+}
+
+.auth-domain-list code {
+  border-radius: 7px;
+  padding: 7px 9px;
+  background: var(--surface-muted);
+  color: var(--text);
+  font:
+    11px/1.4 ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace;
+  overflow-wrap: anywhere;
+}
+
+.auth-dialog-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 4px;
+}
+
+.auth-dialog-actions button {
+  min-height: 34px;
+  padding: 0 13px;
+  background: var(--control);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.auth-dialog-actions button.primary {
+  background: var(--accent);
+  color: #fff;
+}
+
+.lifecycle-card {
+  display: grid;
+  gap: 14px;
+  min-width: 0;
+  max-width: 100%;
+  margin-top: 22px;
+  border: 1px solid var(--separator);
+  border-radius: 14px;
+  padding: 16px;
+  background: var(--surface-raised);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+}
+
+.lifecycle-card[data-stage='drifted'],
+.lifecycle-card[data-stage='disabled'] {
+  border-color: rgba(255, 69, 58, 0.28);
+  background: var(--red-soft);
+}
+
+.lifecycle-heading,
+.lifecycle-summary,
+.lifecycle-command {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.lifecycle-heading,
+.lifecycle-summary {
+  justify-content: space-between;
+}
+
+.lifecycle-steps {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.lifecycle-step {
+  position: relative;
+  display: grid;
+  justify-items: center;
+  gap: 6px;
+  color: var(--text-tertiary);
+  font-size: 10px;
+  font-weight: 550;
+  text-align: center;
+}
+
+.lifecycle-step:not(:last-child)::after {
+  position: absolute;
+  z-index: 0;
+  top: 6px;
+  left: calc(50% + 10px);
+  width: calc(100% - 20px);
+  height: 2px;
+  background: var(--separator-strong);
+  content: '';
+}
+
+.lifecycle-marker {
+  z-index: 1;
+  width: 14px;
+  height: 14px;
+  border: 2px solid var(--separator-strong);
+  border-radius: 999px;
+  background: var(--surface-raised);
+}
+
+.lifecycle-step[data-state='done'],
+.lifecycle-step[data-state='current'] {
+  color: var(--accent);
+}
+
+.lifecycle-step[data-state='done'] .lifecycle-marker,
+.lifecycle-step[data-state='current'] .lifecycle-marker {
+  border-color: var(--accent);
+  background: var(--accent);
+}
+
+.lifecycle-step[data-state='done']::after {
+  background: var(--accent);
+}
+
+.lifecycle-step[data-state='blocked'] {
+  color: var(--red);
+}
+
+.lifecycle-step[data-state='blocked'] .lifecycle-marker {
+  border-color: var(--red);
+  background: var(--red);
+}
+
+.lifecycle-summary {
+  flex-wrap: wrap;
+  color: var(--text-secondary);
+  font-size: 11px;
+}
+
+.lifecycle-summary strong {
+  color: var(--text);
+  font-size: 12px;
+}
+
+.lifecycle-command code {
+  width: 0;
+  min-width: 0;
+  max-width: 100%;
+  flex: 1 1 0;
+  overflow: hidden;
+  border-radius: 8px;
+  padding: 8px 10px;
+  background: var(--surface-muted);
+  color: var(--text-secondary);
+  font:
+    10px/1.4 ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.lifecycle-warning {
+  border-radius: 8px;
+  padding: 9px 10px;
+  background: rgba(255, 255, 255, 0.42);
+  color: var(--red);
+  font-size: 11px;
+  line-height: 1.45;
+  white-space: pre-wrap;
+}
+
+.field-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0 28px;
+  margin-top: 22px;
+}
+
+.field {
+  min-width: 0;
+  border-bottom: 1px solid var(--separator);
+  padding: 13px 0;
+}
+
+.field.full {
+  grid-column: 1 / -1;
+}
+
+.field h3 {
+  color: var(--text-secondary);
+}
+
+.field-value {
+  margin-top: 5px;
+  color: var(--text);
+  font-size: 12px;
+  white-space: pre-wrap;
+}
+
+.advanced-details {
+  margin-top: 18px;
+  border-top: 1px solid var(--separator);
+  padding-top: 4px;
+}
+
+.advanced-details summary {
+  padding: 12px 0;
+  color: var(--text-secondary);
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 550;
+  list-style-position: inside;
+}
+
+.advanced-details .field-grid {
+  margin-top: 0;
+}
+
+.empty-state {
+  padding: 18px;
+  color: var(--text-secondary);
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.empty-state-warning {
+  color: var(--amber);
+  white-space: pre-line;
+}
+
+.toast {
+  position: fixed;
+  z-index: 30;
+  right: 20px;
+  bottom: 20px;
+  max-width: min(360px, calc(100vw - 40px));
+  border: 1px solid var(--separator);
+  border-radius: 12px;
+  padding: 10px 14px;
+  background: var(--surface-raised);
+  box-shadow: var(--shadow-popover);
+  color: var(--text);
+  font-size: 12px;
+  animation: toast-in 160ms ease-out;
+}
+
+@keyframes toast-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+[hidden] {
+  display: none !important;
+}
+
+@media (max-width: 1120px) {
+  .toolbar {
+    grid-template-columns: auto auto minmax(300px, 1fr);
+  }
+
+  .brand-block p,
+  .status-pill {
+    display: none;
+  }
+
+  .search-field {
+    width: min(220px, 20vw);
+  }
+}
+
+@media (max-width: 820px) {
+  body {
+    min-width: 0;
+    overflow: auto;
+  }
+
+  .app-shell {
+    grid-template-rows: auto auto auto;
+    height: auto;
+    min-height: 100vh;
+  }
+
+  .toolbar {
+    grid-template-columns: auto minmax(0, 1fr);
+    grid-template-rows: 48px 44px;
+    gap: 0 12px;
+    padding: 0 12px 8px;
+  }
+
+  .brand-block {
+    grid-column: 1;
+  }
+
+  .tabs {
+    grid-column: 2;
+    justify-self: end;
+  }
+
+  .toolbar-actions {
+    grid-column: 1 / -1;
+    grid-row: 2;
+  }
+
+  .search-field {
+    width: auto;
+    flex: 1;
+  }
+
+  .workspace {
+    grid-template-columns: 1fr;
+    grid-template-rows: minmax(360px, 46vh) minmax(520px, auto);
+    overflow: visible;
+  }
+
+  .collection-panel {
+    border-right: 0;
+    border-bottom: 1px solid var(--separator);
+  }
+
+  .detail-panel {
+    min-height: 520px;
+  }
+
+  .skill-detail {
+    overflow: visible;
+  }
+}
+
+@media (max-width: 560px) {
+  .brand-block > div:last-child {
+    display: none;
+  }
+
+  .brand-block {
+    grid-template-columns: 34px;
+  }
+
+  .language-switch {
+    display: none;
+  }
+
+  .field-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .skill-header {
+    grid-template-columns: 1fr;
+  }
+
+  .skill-header .skill-actions {
+    grid-column: 1;
+    grid-row: auto;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    scroll-behavior: auto !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+.replayer-wrapper {
+  position: relative;
+}
+.replayer-mouse {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  transition: left 0.05s linear, top 0.05s linear;
+  background-size: contain;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-image: url('data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjMDAwMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0iTGF5ZXIgMSIgdmlld0JveD0iMCAwIDUwIDUwIiB4PSIwcHgiIHk9IjBweCI+PHRpdGxlPkRlc2lnbl90bnA8L3RpdGxlPjxwYXRoIGQ9Ik00OC43MSw0Mi45MUwzNC4wOCwyOC4yOSw0NC4zMywxOEExLDEsMCwwLDAsNDQsMTYuMzlMMi4zNSwxLjA2QTEsMSwwLDAsMCwxLjA2LDIuMzVMMTYuMzksNDRhMSwxLDAsMCwwLDEuNjUuMzZMMjguMjksMzQuMDgsNDIuOTEsNDguNzFhMSwxLDAsMCwwLDEuNDEsMGw0LjM4LTQuMzhBMSwxLDAsMCwwLDQ4LjcxLDQyLjkxWm0tNS4wOSwzLjY3TDI5LDMyYTEsMSwwLDAsMC0xLjQxLDBsLTkuODUsOS44NUwzLjY5LDMuNjlsMzguMTIsMTRMMzIsMjcuNThBMSwxLDAsMCwwLDMyLDI5TDQ2LjU5LDQzLjYyWiI+PC9wYXRoPjwvc3ZnPg==');
+  border-color: transparent;  /* otherwise we transition from black when .touch-device class is added */
+}
+.replayer-mouse::after {
+  content: '';
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  background: rgb(73, 80, 246);
+  border-radius: 100%;
+  transform: translate(-50%, -50%);
+  opacity: 0.3;
+}
+.replayer-mouse.active::after {
+  animation: click 0.2s ease-in-out 1;
+}
+.replayer-mouse.touch-device {
+  background-image: none;  /* there's no passive cursor on touch-only screens */
+  width: 70px;
+  height: 70px;
+  border-width: 4px;
+  border-style: solid;
+  border-radius: 100%;
+  margin-left: -37px;
+  margin-top: -37px;
+  border-color: rgba(73, 80, 246, 0);
+  transition: left 0s linear, top 0s linear, border-color 0.2s ease-in-out;
+}
+.replayer-mouse.touch-device.touch-active {
+  border-color: rgba(73, 80, 246, 1);
+  transition: left 0.25s linear, top 0.25s linear, border-color 0.2s ease-in-out;
+}
+.replayer-mouse.touch-device::after {
+  opacity: 0;  /* there's no passive cursor on touch-only screens */
+}
+.replayer-mouse.touch-device.active::after {
+  animation: touch-click 0.2s ease-in-out 1;
+}
+.replayer-mouse-tail {
+  position: absolute;
+  pointer-events: none;
+}
+
+@keyframes click {
+  0% {
+    opacity: 0.3;
+    width: 20px;
+    height: 20px;
+  }
+  50% {
+    opacity: 0.5;
+    width: 10px;
+    height: 10px;
+  }
+}
+
+@keyframes touch-click {
+  0% {
+    opacity: 0;
+    width: 20px;
+    height: 20px;
+  }
+  50% {
+    opacity: 0.5;
+    width: 10px;
+    height: 10px;
+  }
+}