.extension-demo-time {
  display: inline-flex;
  padding: 0.7rem 1rem;
  color: #e5ebff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
}

.extension-demo-workspace {
  min-height: 0;
}

.extension-demo-guide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding: 1.25rem 1.5rem;
  color: var(--ink);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-left: 0.35rem solid var(--blue);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.extension-demo-guide .mini-label,
.extension-demo-guide h2,
.extension-demo-guide p:last-child {
  margin: 0;
}

.extension-demo-guide h2 {
  margin-top: 0.2rem;
  font-size: clamp(1.2rem, 2.5vw, 1.65rem);
  letter-spacing: -0.025em;
}

.extension-demo-guide p:last-child {
  margin-top: 0.25rem;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.extension-demo-guide-arrow {
  color: var(--blue);
  font-size: 2rem;
  font-weight: 800;
}

.extension-demo-window {
  overflow: hidden;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: 1.15rem;
  box-shadow: var(--shadow-lg);
}

.extension-demo-window [hidden] {
  display: none !important;
}

.extension-demo-titlebar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 2.65rem;
  padding: 0 1rem;
  color: var(--ink-soft);
  background: var(--surface-muted);
  border-bottom: 1px solid var(--line);
  font-size: 0.75rem;
  font-weight: 700;
}

.extension-demo-window-dots {
  display: flex;
  gap: 0.4rem;
}

.extension-demo-window-dots i {
  width: 0.7rem;
  height: 0.7rem;
  background: #ff605c;
  border-radius: 50%;
}

.extension-demo-window-dots i:nth-child(2) { background: #ffbd44; }
.extension-demo-window-dots i:nth-child(3) { background: #00ca4e; }

.extension-demo-browserbar {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 3.8rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--line);
}

.extension-demo-browser-controls {
  color: var(--ink-soft);
  font-size: 1.5rem;
  line-height: 1;
  white-space: nowrap;
}

.extension-demo-address {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  padding: 0.55rem 0.9rem;
  color: var(--ink-soft);
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.extension-demo-toolbar-button {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 2.55rem;
  height: 2.55rem;
  padding: 0;
  color: #fff;
  background: var(--blue);
  border: 0;
  border-radius: 0.6rem;
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 900;
}

.extension-demo-step-tag {
  position: absolute;
  right: calc(100% + 0.7rem);
  padding: 0.2rem 0.45rem;
  color: var(--blue-deep);
  background: var(--blue-soft);
  border-radius: 0.35rem;
  font-size: 0.7rem;
  white-space: nowrap;
}

.extension-demo-next {
  animation: extension-demo-pulse 1.8s ease-in-out infinite;
  box-shadow: 0 0 0 0.2rem var(--focus), 0 10px 24px rgba(32, 49, 95, 0.22);
}

@keyframes extension-demo-pulse {
  50% { box-shadow: 0 0 0 0.33rem var(--focus), 0 12px 28px rgba(32, 49, 95, 0.25); }
}

.extension-demo-screen {
  position: relative;
  min-height: 32rem;
  background: var(--surface);
}

.extension-demo-job-header {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem clamp(1.15rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line);
}

.extension-demo-restaurant-mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  color: #fff;
  background: #8d3f2e;
  border-radius: 0.7rem;
  font-size: 0.74rem;
  font-weight: 900;
}

.extension-demo-job-header div {
  display: grid;
  line-height: 1.2;
}

.extension-demo-job-header div span {
  margin-top: 0.25rem;
  color: var(--ink-soft);
  font-size: 0.72rem;
}

.extension-demo-jobs-label {
  margin-left: auto;
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-weight: 700;
}

.extension-demo-job-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 12.5rem;
  padding: 1.5rem clamp(1.15rem, 4vw, 3rem);
  color: #fff9ef;
  background: linear-gradient(115deg, #743226, #ad5f38 68%, #c48246);
}

.extension-demo-job-banner > div:first-child { max-width: 36rem; }
.extension-demo-job-banner h2 { margin: 0.1rem 0; font-size: clamp(2.25rem, 5vw, 3.8rem); line-height: 1; }
.extension-demo-job-banner p:last-child { margin: 0.55rem 0 0; }
.extension-demo-kicker { margin: 0; font-size: 0.72rem; font-weight: 850; letter-spacing: 0.1em; text-transform: uppercase; }

.extension-demo-bowl {
  position: relative;
  width: 7.5rem;
  height: 7.5rem;
  flex: none;
  background: #f6d18e;
  border: 0.8rem solid #fff1d1;
  border-radius: 50%;
  box-shadow: 0 0.7rem 1rem rgba(46, 20, 16, 0.2);
}

.extension-demo-bowl span {
  position: absolute;
  inset: 1.25rem 0.7rem;
  border-block: 0.35rem solid #b85c31;
  border-radius: 50%;
  transform: rotate(-28deg);
}

.extension-demo-job-copy {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding: clamp(1.5rem, 4vw, 3rem);
}

.extension-demo-job-copy .extension-demo-kicker { color: #a65338; }
.extension-demo-job-copy h3 { margin: 0.4rem 0; font-size: 1.25rem; }
.extension-demo-job-copy p:not(.extension-demo-kicker) { margin: 0; color: var(--ink-soft); font-size: 0.88rem; line-height: 1.7; }
.extension-demo-job-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.extension-demo-job-chips span { padding: 0.3rem 0.55rem; color: var(--ink-soft); background: var(--surface-soft); border: 1px solid var(--line); border-radius: 999px; font-size: 0.72rem; font-weight: 700; }

.extension-demo-popup {
  position: absolute;
  z-index: 1;
  top: 0.75rem;
  right: 1rem;
  width: min(22rem, calc(100% - 2rem));
  padding: 1.3rem;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  box-shadow: var(--shadow-lg);
}

.extension-demo-popup-heading { display: flex; align-items: center; gap: 0.55rem; font-size: 0.82rem; }
.extension-demo-popup-icon,
.extension-demo-tracker-mark { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; color: #fff; background: var(--blue); border-radius: 0.4rem; font-size: 0.65rem; font-weight: 900; }
.extension-demo-popup h2 { margin: 1.3rem 0 0.3rem; font-size: 1.45rem; }
.extension-demo-popup > p { margin: 0; color: var(--ink-soft); font-size: 0.86rem; }
.extension-demo-popup-note { display: grid; gap: 0.2rem; margin: 1.2rem 0; padding: 0.8rem; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 0.6rem; font-size: 0.76rem; }
.extension-demo-popup-note span { color: var(--ink-soft); }
.extension-demo-popup .button { width: 100%; }

.extension-demo-tracker-bar { display: flex; align-items: center; gap: 0.65rem; padding: 0.8rem clamp(1.15rem, 4vw, 3rem); border-bottom: 1px solid var(--line); font-size: 0.82rem; }
.extension-demo-tracker-bar > span:last-child { margin-left: auto; color: var(--ink-soft); font-size: 0.74rem; }
.extension-demo-review-body,
.extension-demo-saved-body { max-width: 42rem; margin-inline: auto; padding: clamp(1.5rem, 4vw, 3rem); }
.extension-demo-review-body .extension-demo-kicker,
.extension-demo-saved-body .extension-demo-kicker { color: var(--blue-deep); }
.extension-demo-review-body h2,
.extension-demo-saved-body h2 { margin: 0.25rem 0; font-size: clamp(1.7rem, 4vw, 2.5rem); letter-spacing: -0.04em; }
.extension-demo-review-body > p:not(.extension-demo-kicker),
.extension-demo-saved-body > p:not(.extension-demo-kicker) { margin: 0.4rem 0 1.4rem; color: var(--ink-soft); }
.extension-demo-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem; }
.extension-demo-fields div,
.extension-demo-description-preview { display: grid; gap: 0.25rem; padding: 0.7rem 0.85rem; background: var(--surface-muted); border: 1px solid var(--line); border-radius: 0.65rem; }
.extension-demo-fields span,
.extension-demo-description-preview > span { color: var(--ink-soft); font-size: 0.7rem; font-weight: 750; }
.extension-demo-fields strong { font-size: 0.88rem; }
.extension-demo-description-preview { margin: 0.65rem 0 1.3rem; }
.extension-demo-description-preview p { margin: 0; font-size: 0.84rem; }

.extension-demo-saved-body { text-align: center; }
.extension-demo-success-icon { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin: 0 auto 0.7rem; color: var(--green); background: var(--green-soft); border-radius: 50%; font-size: 1.9rem; font-weight: 800; }
.extension-demo-saved-card { display: grid; gap: 0.15rem; max-width: 23rem; margin: 1.5rem auto; padding: 1rem; background: var(--surface-muted); border: 1px solid var(--line); border-radius: 0.7rem; text-align: left; }
.extension-demo-saved-card span { color: var(--ink-soft); font-size: 0.76rem; }
.extension-demo-saved-card strong { font-size: 1.2rem; }
.extension-demo-saved-card small { color: var(--ink-soft); }
.extension-demo-footnote { margin: 1rem 0 0; color: var(--ink-soft); font-size: 0.78rem; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .extension-demo-next { animation: none; }
}

@media (max-width: 46rem) {
  .extension-demo-time { white-space: normal; }
  .extension-demo-titlebar { grid-template-columns: auto 1fr; gap: 0.8rem; }
  .extension-demo-titlebar-spacer { display: none; }
  .extension-demo-browser-controls { display: none; }
  .extension-demo-step-tag { display: none; }
  .extension-demo-bowl { width: 5rem; height: 5rem; border-width: 0.5rem; }
  .extension-demo-job-copy { grid-template-columns: 1fr; }
}

@media (max-width: 32rem) {
  .extension-demo-guide { padding: 1rem; }
  .extension-demo-guide-arrow { display: none; }
  .extension-demo-job-banner { align-items: flex-start; }
  .extension-demo-bowl { display: none; }
  .extension-demo-fields { grid-template-columns: 1fr; }
}