.is-hidden { display: none !important; }

.demo-window { margin: 1.5rem 0 .75rem; overflow: hidden; border: 1px solid rgba(255,92,122,.38); background: #090e18; box-shadow: 0 20px 60px rgba(0,0,0,.28); }
.demo-toolbar { display: flex; align-items: center; gap: .75rem; min-height: 3.8rem; padding: .7rem 1rem; border-bottom: 1px solid rgba(255,92,122,.25); background: #111927; }
.demo-toolbar > span:nth-child(2) { display: grid; gap: .15rem; }
.demo-toolbar small { color: #8fa1b9; font: .75rem 'Share Tech Mono',monospace; text-transform: uppercase; }
.demo-toolbar strong { color: #eef4fb; font-size: .95rem; }
.jenkins-mark { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border: 1px solid rgba(255,92,122,.58); border-radius: 50%; color: #ff7a92; font: 700 1rem 'Share Tech Mono',monospace; }
.demo-tag { margin-left: auto; padding: .34rem .55rem; border: 1px solid rgba(0,255,150,.35); color: #00ff96; font: .72rem 'Share Tech Mono',monospace; letter-spacing: .04em; text-transform: uppercase; }

.job-switch { display: grid; grid-template-columns: auto auto 1fr; gap: .65rem; align-items: center; padding: .85rem 1rem; border-bottom: 1px solid rgba(174,187,208,.18); background: #0d1420; }
.job-switch p { margin: 0 0 0 .35rem; color: #91a1b6; font-size: .875rem; line-height: 1.45; }
.job-choice { min-height: 2.45rem; padding: .5rem .8rem; border: 1px solid rgba(174,187,208,.35); border-radius: 2px; background: transparent; color: #b9c6d5; font-weight: 700; cursor: pointer; }
.job-choice.selected { border-color: #00d4ff; background: rgba(0,212,255,.1); color: #e9faff; }
.job-choice:focus-visible { outline: 2px solid #eef4fb; outline-offset: 2px; }
.job-choice:disabled { opacity: .5; cursor: not-allowed; }

.demo-layout { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(22rem,.95fr); min-height: 34rem; }
.demo-form { padding: 1.35rem; }
.form-intro { margin: 0 0 1rem; color: #9cadc1; font-size: .95rem; line-height: 1.55; }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.demo-field { display: grid; gap: .38rem; color: #eef4fb; }
.demo-field > span { color: #dfe9f5; font: .8rem 'Share Tech Mono',monospace; letter-spacing: .045em; }
.demo-field > small { color: #8fa1b9; font-size: .8rem; line-height: 1.4; }
.demo-field input,
.demo-field select { width: 100%; min-height: 2.7rem; padding: .6rem .75rem; border: 1px solid rgba(174,187,208,.32); border-radius: 2px; background: #0f1724; color: #eef4fb; font-size: .95rem; }
.demo-field input:focus,
.demo-field select:focus { outline: 2px solid #00d4ff; outline-offset: 1px; border-color: transparent; }
.demo-field input:disabled,
.demo-field select:disabled { opacity: .58; cursor: not-allowed; }
.destructive-note { margin: 1.1rem 0 0; padding: 1rem; border-left: 4px solid #ff5c7a; background: rgba(255,92,122,.07); }
.destructive-note strong { color: #ff98aa; }
.destructive-note p { margin: .35rem 0 0; color: #aebbd0; font-size: .875rem; line-height: 1.5; }
.build-row { display: flex; align-items: center; gap: .8rem; margin-top: 1rem; }
.build-row > span { color: #8294ab; font-size: .8rem; line-height: 1.45; }
.demo-button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.55rem; padding: .58rem .9rem; border: 1px solid #00d4ff; border-radius: 2px; background: #00d4ff; color: #061019; font-size: .875rem; font-weight: 700; cursor: pointer; }
.demo-button:hover { filter: brightness(1.08); }
.demo-button:focus-visible { outline: 2px solid #eef4fb; outline-offset: 2px; }
.demo-button:disabled { opacity: .5; cursor: not-allowed; }
.demo-button.danger { border-color: #d73555; background: #c72f4d; color: #fff; }
.demo-button.secondary { border-color: rgba(174,187,208,.42); background: transparent; color: #cdd8e6; }

.run-panel { display: flex; flex-direction: column; min-width: 0; border-left: 1px solid rgba(255,92,122,.24); background: #070b13; }
.run-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; border-bottom: 1px solid rgba(174,187,208,.16); }
.run-head > span:first-child { display: grid; gap: .25rem; }
.run-head small { color: #ff7a92; font: .75rem 'Share Tech Mono',monospace; text-transform: uppercase; }
.run-head strong { color: #e8f0fa; font-size: .875rem; }
.run-status { display: inline-block; padding: .3rem .5rem; border: 1px solid rgba(174,187,208,.3); color: #aebbd0; font: .72rem 'Share Tech Mono',monospace; text-transform: uppercase; }
.run-status.running,
.run-status.approval { color: #ffd166; border-color: rgba(255,209,102,.45); }
.run-status.passed { color: #00ff96; border-color: rgba(0,255,150,.4); }
.run-status.failed,
.run-status.aborted { color: #ff7a92; border-color: rgba(255,92,122,.42); }
.console { flex: 1; min-height: 17rem; max-height: 32rem; overflow: auto; padding: 1rem; font: .78rem/1.6 'Share Tech Mono',monospace; }
.console p { margin: 0 0 .22rem; color: #c3cfdd; overflow-wrap: anywhere; }
.console .console-muted { color: #708197; }
.console-line::before { content: attr(data-line); display: inline-block; width: 2.15rem; color: #506078; user-select: none; }
.console-line.good { color: #00ff96; }
.console-line.bad { color: #ff7a92; }
.console-line.warn { color: #ffd166; }

.email-gate { margin: 0 1rem 1rem; border: 1px solid #d9a4ae; background: #f5f7fa; color: #19212d; }
.email-chrome { display: grid; grid-template-columns: 1fr 1fr auto; gap: .6rem; padding: .6rem .75rem; border-bottom: 1px solid #d3dae3; background: #e8ecf2; font-size: .72rem; }
.email-chrome .email-time { color: #687484; }
.email-body { padding: .9rem; }
.email-body > span,
.approval-gate > span { color: #a9233e; font: .72rem 'Share Tech Mono',monospace; letter-spacing: .06em; text-transform: uppercase; }
.email-body h4 { margin: .35rem 0 .45rem; color: #15202d; font-size: 1.1rem; }
.email-body p { margin: 0 0 .7rem; color: #4a5665; font-size: .8rem; line-height: 1.45; }
.email-body dl { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; margin: 0 0 .8rem; }
.email-body dl div { padding: .45rem; background: #e9edf2; }
.email-body dt { color: #687484; font-size: .68rem; text-transform: uppercase; }
.email-body dd { margin: .18rem 0 0; color: #202a37; font-size: .78rem; }
.approval-gate { margin: 0 1rem 1rem; padding: .95rem; border: 1px solid rgba(255,92,122,.5); background: rgba(255,92,122,.075); }
.approval-gate strong { display: block; margin: .35rem 0; color: #eef4fb; }
.approval-gate p { margin: 0 0 .75rem; color: #aebbd0; font-size: .82rem; line-height: 1.45; }
.approval-gate > div { display: flex; flex-wrap: wrap; gap: .6rem; }
.reset-button { align-self: flex-start; margin: 0 1rem 1rem; }
.demo-note { margin: .7rem 0 1.6rem; color: #8fa1b9; font-size: .9rem; line-height: 1.55; }

@media (max-width: 900px) {
  .demo-layout { grid-template-columns: 1fr; }
  .run-panel { border-top: 1px solid rgba(255,92,122,.24); border-left: 0; }
}

@media (max-width: 650px) {
  .demo-toolbar { align-items: flex-start; }
  .demo-tag { width: .65rem; height: .65rem; padding: 0; border-radius: 50%; background: #00ff96; font-size: 0; }
  .job-switch { grid-template-columns: 1fr 1fr; }
  .job-switch p { grid-column: 1 / -1; margin-left: 0; }
  .build-row { align-items: flex-start; flex-direction: column; }
  .email-body dl { grid-template-columns: 1fr; }
}