/**
 * Coherent Sky — Fabio skin  v3  (PC2-003-PREVIEW3-PIXELPERFECT)
 * Presentation-only. No functional selectors, [hidden], or data-cs-* states modified.
 * Reference: https://coherskyview-me3wnew6.manus.space/preview3
 */

/* ─── Keyframes ──────────────────────────────────────────────────────────── */

@keyframes cs-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cs-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes cs-orb-breathe {
  0%,100% { opacity: .55; box-shadow: 0 0 70px rgba(0,191,255,.12); }
  50%     { opacity: .72; box-shadow: 0 0 110px rgba(0,191,255,.24); }
}

/* ─── Root tokens (scoped) ───────────────────────────────────────────────── */

.cs-shell,
.cs-ticket-shell {
  --p3-cyan:    #00bfff;
  --p3-blue:    #1e90ff;
  --p3-green:   #32cd32;
  --p3-dark:    #0a1428;
  --p3-navy:    rgba(5,15,40,.55);
  --p3-glass:   rgba(8,20,58,.44);
  --p3-line:    rgba(255,255,255,.18);
  --p3-shadow:  0 20px 60px rgba(0,10,30,.40);
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
}

.cs-shell *,
.cs-ticket-shell * { box-sizing: border-box; }

/* ─── Shell: real sky photo background ──────────────────────────────────── */

.cs-shell {
  width: min(1440px, 100%);
  min-height: 100svh;
  padding: clamp(16px, 3.6vw, 52px);
  overflow: hidden;
  /* Exact overlay from Preview3.tsx line 25–31 */
  background:
    linear-gradient(180deg,
      rgba(10,20,40,.35) 0%,
      rgba(26,42,74,.15) 50%,
      rgba(10,20,40,.45) 100%),
    url("../images/sky-background-trails.webp") center / cover no-repeat;
  background-color: #1a5cb8; /* bright-blue fallback while photo loads */
  animation: cs-fade-in .5s ease-out both;
}

/* Suppress grid overlay from skin layer — not in mockup */
.cs-shell::before { display: none; }

/* ─── Header / Hero ──────────────────────────────────────────────────────── */

.cs-shell__header {
  position: relative;
  min-height: clamp(200px, 24vw, 310px);
  align-items: center;
  margin-bottom: 28px;
  padding: clamp(24px, 5vw, 60px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 24px;
  background: var(--p3-navy);
  box-shadow: var(--p3-shadow), inset 0 1px rgba(255,255,255,.10);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  animation: cs-fade-up .65s .05s ease-out both;
}

.cs-shell__header > div:first-child { position: relative; z-index: 2; }

.cs-shell__eyebrow {
  margin-bottom: 10px;
  color: rgba(255,255,255,.60);
  font-size: .70rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* Large hero title — matches mockup 56 px / weight 700 */
.cs-shell__header h2 {
  width: fit-content;
  max-width: 100%;
  margin: 0 0 16px;
  color: #fff;
  font-size: clamp(2.8rem, 8vw, 6.5rem);
  font-weight: 700;
  line-height: .92;
  letter-spacing: -.055em;
  text-shadow: 0 10px 32px rgba(0,15,50,.30);
  white-space: nowrap;
}

/* Cyan accent on <span> inside h2 */
.cs-shell__header h2 span,
.cs-ticket-hero h1 span { color: var(--p3-cyan); }

.cs-shell__header h2 .cs-title-accent,
.cs-ticket-hero h1 .cs-title-accent { color: var(--p3-cyan); }

.cs-shell .cs-title-accent,
.cs-ticket-shell .cs-title-accent { color: var(--p3-cyan); }

/* Lead text: 16 px / line-height 1.8 */
.cs-shell__lead {
  max-width: 600px;
  color: rgba(255,255,255,.82);
  font-size: clamp(.95rem, 2vw, 1.15rem);
  line-height: 1.78;
}

.cs-shell__header-tools {
  width: auto;
  max-width: 100%;
  min-width: 0;
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.cs-shell__badge,
.cs-admin-toggle,
.cs-admin-chip {
  border-color: rgba(255,255,255,.22);
  background: rgba(5,15,40,.50);
  box-shadow: inset 0 1px rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ─── Sky orb ────────────────────────────────────────────────────────────── */

.cs-sky-orb {
  right: clamp(80px, 14vw, 220px);
  border-color: rgba(0,191,255,.38);
  animation: cs-orb-breathe 7s ease-in-out infinite;
}
.cs-sky-orb i   { border-color: rgba(255,255,255,.18); }
.cs-sky-orb i:nth-child(2) { border-color: rgba(0,191,255,.46); }
.cs-sky-orb i:nth-child(3) { border-color: rgba(50,205,50,.40); }
.cs-sky-orb b   { color: rgba(255,255,255,.68); }

/* ─── Session progress timeline ──────────────────────────────────────────── */

.cs-session-progress {
  margin: 0 0 28px;
  padding: 0 clamp(2px, 2vw, 16px);
  animation: cs-fade-up .6s .15s ease-out both;
}

.cs-session-progress li {
  color: rgba(255,255,255,.50);
  font-size: .70rem;
  letter-spacing: .01em;
  transition: color .2s;
}

.cs-session-progress li::before {
  width: 14px; height: 14px;
  border-color: rgba(255,255,255,.28);
  background: rgba(5,15,45,.80);
}

.cs-session-progress li:not(:last-child)::after {
  background: rgba(255,255,255,.20);
}

.cs-session-progress li[data-state="active"]::before {
  border-color: #88e8ff;
  background: var(--p3-blue);
  box-shadow: 0 0 0 5px rgba(0,191,255,.10), 0 0 22px rgba(0,191,255,.70);
}

.cs-session-progress li[data-state="completed"]::before {
  border-color: #6be678;
  background: var(--p3-green);
}

/* ─── Glass panels ───────────────────────────────────────────────────────── */

.cs-shell__main,
.cs-shell__sidebar { gap: 16px; }

.cs-panel {
  padding: clamp(20px, 3.2vw, 32px);
  border: 1px solid var(--p3-line);
  border-radius: 20px;
  background: var(--p3-glass);
  box-shadow: var(--p3-shadow), inset 0 1px rgba(255,255,255,.09);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  animation: cs-fade-up .6s .22s ease-out both;
  transition: border-color .20s ease, box-shadow .20s ease;
}

.cs-panel:nth-child(2) { animation-delay: .30s; }
.cs-panel:nth-child(3) { animation-delay: .37s; }
.cs-panel:nth-child(4) { animation-delay: .44s; }

.cs-panel:hover {
  border-color: rgba(0,191,255,.32);
  box-shadow: var(--p3-shadow), 0 0 30px rgba(0,191,255,.07), inset 0 1px rgba(255,255,255,.11);
}

.cs-panel__heading {
  grid-template-columns: 40px minmax(0,1fr);
  gap: 14px;
  margin-bottom: 20px;
}

.cs-panel__step {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--p3-blue), var(--p3-cyan));
  box-shadow: 0 8px 22px rgba(0,191,255,.26);
}

.cs-panel h3 {
  margin-bottom: 5px;
  color: #fff;
  font-size: clamp(1.08rem, 2vw, 1.28rem);
  font-weight: 700;
}

.cs-panel p { color: rgba(255,255,255,.74); }

/* ─── Ticket / admin inputs ──────────────────────────────────────────────── */

.cs-ticket input {
  min-height: 52px;
  border-color: rgba(255,255,255,.24);
  border-radius: 14px;
  background: rgba(5,12,35,.50);
  color: #fff;
  box-shadow: inset 0 1px rgba(255,255,255,.06);
  transition: border-color .18s, box-shadow .18s;
}

.cs-admin-form input,
.cs-admin-form select {
  border-color: rgba(255,255,255,.24);
  border-radius: 10px;
  background: rgba(5,12,35,.50);
  color: #fff;
  box-shadow: inset 0 1px rgba(255,255,255,.06);
}

.cs-ticket input:focus,
.cs-admin-form input:focus,
.cs-admin-form select:focus {
  border-color: var(--p3-cyan);
  box-shadow: 0 0 0 4px rgba(0,191,255,.14);
}

.cs-ticket-help a,
.cs-session-complete__actions > a:not(.cs-button) { color: #80eaff; }

/* ─── Buttons ────────────────────────────────────────────────────────────── */

.cs-button {
  min-height: 54px;
  border-radius: 14px;
  font-size: 1rem;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

/* Primary = solid blue gradient (mockup btn-primary) */
.cs-button--primary {
  width: 100%;
  border-color: rgba(255,255,255,.14);
  background: linear-gradient(110deg, var(--p3-blue), var(--p3-cyan));
  box-shadow: 0 12px 32px rgba(0,130,230,.32), inset 0 1px rgba(255,255,255,.18);
  font-weight: 700;
  letter-spacing: .06em;
}

.cs-button--primary:hover:not(:disabled) {
  background: linear-gradient(110deg, #1e90ff, #00c8ff);
  box-shadow: 0 18px 42px rgba(0,160,255,.42);
  transform: translateY(-2px);
}

.cs-button--primary:disabled {
  border-color: rgba(255,255,255,.10);
  background: linear-gradient(110deg, rgba(30,80,175,.54), rgba(0,120,190,.50));
  color: rgba(255,255,255,.56);
  opacity: .74;
}

.cs-button--secondary,
.cs-inline-button {
  border-color: rgba(255,255,255,.26);
  background: rgba(5,15,45,.40);
  color: #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* RUN panel — taller button, larger text */
.cs-panel[data-cs-region="run-controls"] {
  padding-block: clamp(26px, 4vw, 40px);
}

.cs-panel[data-cs-region="run-controls"] .cs-button--primary {
  min-height: 68px;
  border-radius: 16px;
  font-size: 1.22rem;
  font-weight: 800;
  letter-spacing: .16em;
  box-shadow: 0 18px 44px rgba(0,140,240,.36), inset 0 1px rgba(255,255,255,.20);
}

/* ─── Phone mockup (media section) ──────────────────────────────────────── */

.cs-phone-mockup {
  display: flex;
  justify-content: center;
  padding: 4px 0 22px;
}

.cs-phone-mockup__frame {
  width: 240px;
  background: #111;
  border-radius: 36px;
  border: 8px solid #222;
  box-shadow:
    0 28px 70px rgba(0,0,0,.72),
    0 0 0 1px rgba(255,255,255,.05);
  overflow: hidden;
}

.cs-phone-mockup__screen {
  width: 100%;
  aspect-ratio: 9 / 16;
  background-image: url("../images/sky-phone-display.webp");
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px 14px 0;
  position: relative;
}

/* Gradient overlay inside phone */
.cs-phone-mockup__screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.26) 0%,
    rgba(30,144,255,.10) 40%,
    rgba(0,0,0,.18) 100%
  );
  pointer-events: none;
}

.cs-phone-mockup__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  position: relative;
  z-index: 2;
}

.cs-phone-mockup__tabs {
  display: flex;
  justify-content: center;
  gap: 18px;
  font-size: 10px;
  color: rgba(255,255,255,.80);
  position: relative;
  z-index: 2;
  padding-bottom: 10px;
}

.cs-phone-tab--active {
  color: var(--p3-cyan);
  font-weight: 700;
  border-bottom: 2px solid var(--p3-cyan);
  padding-bottom: 2px;
}

.cs-phone-mockup__controls {
  background: #000;
  padding: 11px 16px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.cs-phone-mockup__btn {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: rgba(30,144,255,.28);
}

.cs-phone-mockup__btn--photo { background: rgba(30,144,255,.28); }

.cs-phone-mockup__btn::after {
  content: "🎨";
  display: grid;
  place-items: center;
  width: 100%; height: 100%;
  font-size: 15px;
}

.cs-phone-mockup__btn--photo::after { content: "📸"; }

.cs-phone-mockup__shutter {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  border: 2px solid rgba(255,255,255,.30);
}

/* Hide phone mockup once media is acquired (JS sets this attribute) */
.cs-panel[data-cs-media-acquired="true"] .cs-phone-mockup { display: none; }

/* ─── Upload / camera zone ───────────────────────────────────────────────── */

.cs-upload {
  min-height: clamp(120px, 20vw, 200px);
  padding: clamp(22px, 4vw, 48px) 20px;
  border: 2px dashed rgba(0,191,255,.72);
  border-radius: 20px;
  background: rgba(0,50,130,.20);
  box-shadow: inset 0 0 36px rgba(0,120,200,.06);
  transition: border-color .18s, background .18s;
}

.cs-upload::before {
  content: "📷";
  display: block;
  margin-bottom: 12px;
  font-size: clamp(1.8rem, 4.5vw, 2.8rem);
  line-height: 1;
}

.cs-upload strong {
  color: #fff;
  font-size: clamp(1.05rem, 2.2vw, 1.40rem);
  font-weight: 700;
}

.cs-upload span {
  max-width: 560px;
  color: rgba(255,255,255,.68);
  font-size: .92rem;
  line-height: 1.52;
}

.cs-upload:hover {
  border-color: #50d8ff;
  background: rgba(0,80,170,.26);
}

/* Media preview stage */
.cs-media-stage {
  min-height: clamp(280px, 48vw, 580px);
  border-color: rgba(255,255,255,.18);
  border-radius: 20px;
  background: rgba(4,12,32,.60);
  box-shadow: inset 0 0 60px rgba(0,10,36,.28), 0 16px 40px rgba(0,10,36,.18);
}

.cs-media-stage__placeholder span {
  border-color: rgba(255,255,255,.20);
  background: rgba(4,16,44,.60);
}

.cs-video-grid-overlay { border-color: rgba(0,191,255,.40); }

/* ─── Runner / Timer ─────────────────────────────────────────────────────── */

.cs-run-timer {
  gap: 12px;
  margin: 10px 0 20px;
  padding: clamp(28px, 5.5vw, 56px) 20px;
  border: 1px solid rgba(0,191,255,.38);
  border-radius: 20px;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(0,191,255,.12), transparent 58%),
    rgba(4,12,32,.60);
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 16px 40px rgba(0,10,32,.20);
  text-align: center;
}

.cs-run-timer span {
  color: rgba(255,255,255,.60);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* Timer digits: green, monospace — exact mockup "1h 44m" style */
.cs-run-timer strong {
  color: var(--p3-green);
  font-family: "SF Mono", "Fira Code", "Cascadia Code", Monaco, "Courier New", monospace;
  font-size: clamp(3.4rem, 10vw, 6.8rem);
  font-weight: 700;
  line-height: .92;
  letter-spacing: -.01em;
  text-shadow: 0 0 32px rgba(50,205,50,.44);
}

/* Progress bar */
.cs-progress {
  height: 8px;
  margin: 16px 0 10px;
  background: rgba(255,255,255,.14);
  border-radius: 99px;
  overflow: hidden;
}

.cs-progress span {
  background: linear-gradient(90deg, var(--p3-blue), var(--p3-cyan));
  box-shadow: 0 0 16px rgba(0,191,255,.44);
  transition: width .4s ease;
}

/* ─── Status banners ─────────────────────────────────────────────────────── */

.cs-shell__status,
.cs-ticket-verification,
.cs-ticket-verified,
.cs-media-ready,
.cs-session-authorized-summary {
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(0,80,110,.38);
  color: #d8ffea !important;
}

/* Green override for media-ready — must follow the grouped teal rule */
.cs-media-ready {
  border-color: rgba(50,205,50,.44);
  background: rgba(28,150,65,.18);
}

/* ─── Runner contract ────────────────────────────────────────────────────── */

.cs-runner-contract div {
  border-color: rgba(255,255,255,.14);
  border-radius: 13px;
  background: rgba(4,12,32,.42);
}

/* ─── Result cards (white / light — matches mockup) ──────────────────────── */

.cs-result-grid {
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}

.cs-result-card {
  min-height: 148px;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 20px 12px;
  border: 0;
  border-radius: 18px;
  background: rgba(255,255,255,.96);
  color: #0a1428;
  box-shadow: 0 14px 36px rgba(0,15,45,.24);
  text-align: center;
  transition: transform .16s ease, box-shadow .16s ease;
}

.cs-result-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 46px rgba(0,15,45,.32);
}

.cs-result-card span {
  color: rgba(10,20,40,.54);
  font-size: .70rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.cs-result-card strong {
  margin-top: 10px;
  color: #0a1428;
  font-size: clamp(1.2rem, 3vw, 1.9rem);
  line-height: 1.1;
}

/* ─── Completion screen ──────────────────────────────────────────────────── */

.cs-session-complete {
  min-height: 500px;
  border-color: rgba(100,232,120,.24);
  background:
    radial-gradient(ellipse at 50% 18%, rgba(50,205,50,.13), transparent 42%),
    rgba(8,20,58,.52);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.cs-session-complete__mark {
  border-color: rgba(100,242,122,.60);
  background: rgba(30,180,65,.22);
  color: #80ff90;
}

.cs-session-complete__field {
  border-color: rgba(0,191,255,.38);
  background: rgba(4,12,32,.54);
}

/* Field countdown timer — same green monospace as run timer */
.cs-session-complete__field strong {
  color: var(--p3-green);
  font-family: "SF Mono", "Fira Code", Monaco, "Courier New", monospace;
  font-size: clamp(2.2rem, 7vw, 4.2rem);
  font-weight: 700;
  letter-spacing: -.01em;
  text-shadow: 0 0 22px rgba(50,205,50,.38);
}

/* ─── Admin view ─────────────────────────────────────────────────────────── */

.cs-shell[data-cs-admin-view="true"] .cs-shell__layout {
  grid-template-columns: minmax(0,1fr) minmax(320px,.60fr);
  gap: clamp(18px, 3vw, 32px);
}

.cs-health,
.cs-control-card,
.cs-diagnostics {
  background: rgba(10,22,60,.46);
}

.cs-health__grid { gap: 10px; }

.cs-health__item {
  min-height: 74px;
  border-color: rgba(255,255,255,.13);
  border-radius: 13px;
  background: rgba(4,12,32,.40);
}

.cs-control-stack { gap: 10px; }

.cs-control-card > summary {
  min-height: 76px;
  padding: 14px 15px;
}

.cs-summary-copy small {
  color: rgba(255,255,255,.58);
  line-height: 1.42;
  white-space: normal;
}

.cs-facts div { border-color: rgba(255,255,255,.10); }
.cs-shell__sidebar .cs-panel--compact { padding: 18px; }

/* ─── Ticket shell ───────────────────────────────────────────────────────── */

.cs-ticket-shell {
  width: 100%;
  min-height: 100svh;
  padding: clamp(18px, 5vw, 68px);
  overflow: hidden;
  background:
    linear-gradient(180deg,
      rgba(10,20,40,.38) 0%,
      rgba(26,42,74,.16) 50%,
      rgba(10,20,40,.48) 100%),
    url("../images/sky-background-trails.webp") center / cover no-repeat;
  background-color: #1a5cb8;
}

.cs-ticket-hero {
  width: min(1100px,100%);
  margin: 0 auto 38px;
  padding: clamp(26px, 6vw, 72px) 0;
  animation: cs-fade-up .65s .08s ease-out both;
}

.cs-ticket-hero h1 {
  width: fit-content;
  max-width: 100%;
  color: #fff;
  font-size: clamp(3.4rem, 11vw, 8rem);
  font-weight: 700;
  letter-spacing: -.06em;
  text-shadow: 0 10px 36px rgba(0,15,50,.30);
  white-space: nowrap;
}

.cs-ticket-hero > p:not(.cs-shell__eyebrow) { color: rgba(255,255,255,.78); }
.cs-ticket-existing { color: #80eaff; }

.cs-ticket-shell > .cs-panel {
  width: min(780px,100%);
  border-radius: 22px;
  background: rgba(8,20,58,.50);
}

.cs-ticket-result {
  border-color: rgba(0,191,255,.44);
  background: rgba(4,12,32,.52);
}

/* ─── Responsive: 1100 px ────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .cs-shell[data-cs-admin-view="true"] .cs-shell__layout { grid-template-columns: 1fr; }
  .cs-shell__sidebar { position: static; max-height: none; overflow: visible; }
  .cs-result-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ─── Responsive: 700 px (mobile — primary target) ──────────────────────── */

@media (max-width: 900px) {
  .cs-shell__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .cs-shell__header > div:first-child,
  .cs-shell__header-tools {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .cs-shell__header-tools {
    justify-content: flex-end;
  }
}

@media (max-width: 700px) {
  .cs-shell { padding: 10px 10px 28px; }

  .cs-shell__header {
    min-height: 250px;
    display: grid;
    align-content: space-between;
    gap: 16px;
    padding: 26px 18px;
    border-radius: 20px;
    margin-bottom: 20px;
  }

  .cs-shell__header h2,
  .cs-ticket-hero h1 {
    width: fit-content;
    max-width: 100%;
    font-size: clamp(2.3rem, 11vw, 4.8rem);
    line-height: .95;
    letter-spacing: -.065em;
    white-space: nowrap;
  }
  .cs-shell__header-tools {
    width: 100%;
    justify-content: flex-end;
    justify-items: end;
    align-self: end;
  }
  .cs-shell__badge,
  .cs-admin-toggle {
    min-width: 0;
    max-width: 100%;
    padding: 7px 9px;
    font-size: clamp(.68rem, 2.8vw, .78rem);
  }
  .cs-sky-orb { right: -32px; bottom: -28px; width: 176px; opacity: .26; }

  .cs-session-progress {
    grid-template-columns: repeat(5, minmax(0,1fr));
    gap: 0;
    padding-inline: 0;
    margin-bottom: 18px;
  }
  .cs-session-progress li { padding-inline: 1px; }
  .cs-session-progress li span { font-size: clamp(.46rem, 2.4vw, .62rem); }

  .cs-panel { padding: 18px 14px; border-radius: 18px; }
  .cs-panel__heading { grid-template-columns: 38px minmax(0,1fr); gap: 12px; }
  .cs-panel__step { width: 38px; height: 38px; border-radius: 11px; }

  /* Phone mockup smaller on mobile */
  .cs-phone-mockup__frame { width: 210px; }

  .cs-upload { min-height: 100px; padding: 26px 14px; border-radius: 18px; }
  .cs-media-stage { min-height: min(100vw, 480px); border-radius: 18px; }

  .cs-button--primary, .cs-button--secondary { width: 100%; }
  .cs-shell__actions { grid-template-columns: 1fr; }

  .cs-run-timer { padding: 32px 12px; }
  .cs-run-timer strong { font-size: clamp(3.2rem, 17vw, 5rem); }

  .cs-result-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
  .cs-result-card { min-height: 120px; padding: 14px 9px; border-radius: 15px; }

  .cs-session-complete { min-height: 420px; }
  .cs-session-complete__field strong { font-size: clamp(2rem, 14vw, 3.4rem); }

  .cs-health__grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .cs-ticket-shell { padding: 12px 10px 28px; }
  .cs-ticket-hero { padding: 32px 4px 18px; }
  .cs-ticket-shell > .cs-panel { padding: 22px 16px; border-radius: 18px; }
}

/* ─── Responsive: 390 px ─────────────────────────────────────────────────── */

@media (max-width: 390px) {
  .cs-result-grid { grid-template-columns: 1fr; }
  .cs-health__grid { grid-template-columns: 1fr; }
  .cs-phone-mockup__frame { width: 190px; }
}

/* ─── Reduced motion ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .cs-shell,
  .cs-shell__header,
  .cs-session-progress,
  .cs-panel,
  .cs-ticket-hero { animation: none !important; }
  .cs-sky-orb { animation: none !important; }
  .cs-panel, .cs-result-card, .cs-button { transition: none !important; }
  .cs-shell *, .cs-ticket-shell * { scroll-behavior: auto !important; }
}

/* ─── No backdrop-filter fallback ────────────────────────────────────────── */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cs-panel,
  .cs-shell__header,
  .cs-shell__badge,
  .cs-admin-toggle,
  .cs-admin-chip { background-color: rgba(8,18,55,.96); }
}

/* ════════════════════════════════════════════════════════════════════════
   CoherentSky — CSS Override Grafico v2.2  |  Variante Preview 5
   ════════════════════════════════════════════════════════════════════════

   CONCETTO VISIVO:
   - Background: cielo azzurro con nuvole cumulus bianche e definite
   - Cellulare (Sky preview): mostra chemtrails (scie di condensazione)
   - Pannelli: glassmorphism semi-trasparente per far vedere il cielo
════════════════════════════════════════════════════════════════════════ */
/* ── 1. BACKGROUND — nuvole cumulus su cielo azzurro ──────────────────── */
.cs-shell {
  background:
    linear-gradient(
      to bottom,
      rgba(4, 25, 58, 0.70) 0%,
      rgba(4, 24, 54, 0.64) 40%,
      rgba(4, 16, 36, 0.78) 75%,
      rgba(3, 8, 18, 0.90) 100%
    ),
    url('https://coherentsky.org/wp-content/uploads/2026/07/BBB.png')
    center top / cover no-repeat !important;
  border-radius: 16px !important;
  margin: 24px auto !important;
  max-width: 1100px !important;
}

/* Azzera il ::before del plugin (gradiente/SVG originale) */
.cs-shell::before {
  display: none !important;
}

/* ── 2. LOGO — C e Sky in azzurro ─────────────────────────────────────── */
.cs-shell__header h2 span {
  color: #00bfff !important;
}

/* ── 3. HEADER — trasparente per far vedere le nuvole ─────────────────── */
.cs-shell__header {
  background: rgba(5, 12, 28, 0.34) !important;
  backdrop-filter: blur(10px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
}

/* Elementi figli sopra i layer di sfondo */
.cs-shell > *:not([style*="position: absolute"]) {
  position: relative !important;
  z-index: 2 !important;
}

/* ── 4. PANNELLI — glassmorphism semi-trasparente ─────────────────────── */
.cs-panel {
  background: rgba(5, 14, 34, 0.30) !important;
  backdrop-filter: blur(16px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* ── 5. BOTTONE RUN — glow pulse quando attivo ────────────────────────── */
.cs-button--primary:not(:disabled) {
  background: linear-gradient(135deg, #1e90ff 0%, #0055cc 100%) !important;
  animation: cs-run-glow 2.4s ease-in-out infinite !important;
  will-change: transform, box-shadow !important;
  letter-spacing: 0.06em !important;
  font-weight: 700 !important;
}

.cs-button--primary:not(:disabled):hover {
  transform: scale(1.04) translateY(-1px) !important;
  box-shadow: 0 8px 32px rgba(30, 144, 255, 0.65),
              0 0 0 3px rgba(0, 191, 255, 0.2) !important;
  animation: none !important;
}

.cs-button--primary:not(:disabled):active {
  transform: scale(0.96) !important;
}
@keyframes cs-run-glow {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(30, 144, 255, 0.4),
                0 0 0 0 rgba(30, 144, 255, 0.3);
  }
  50% {
    box-shadow: 0 4px 32px rgba(30, 144, 255, 0.7),
                0 0 0 10px rgba(30, 144, 255, 0);
  }
}

/* ── 6. PROGRESS BAR — step attivi in azzurro ─────────────────────────── */
.cs-session-progress li[data-state="active"] {
  border-color: rgba(0, 191, 255, 0.9) !important;
  background: rgba(0, 191, 255, 0.2) !important;
  box-shadow: 0 0 14px rgba(0, 191, 255, 0.28) !important;
  color: #fff !important;
}

.cs-session-progress li[data-state="completed"] {
  border-color: rgba(40, 200, 130, 0.65) !important;
  background: rgba(40, 200, 130, 0.15) !important;
}

/* ── 7. BADGE "Session not open" ──────────────────────────────────────── */
.cs-shell__badge {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: blur(12px) !important;
}
/* ── 8. UPLOAD BOX — bordo tratteggiato azzurro ───────────────────────── */
.cs-upload {
  border: 1.5px dashed rgba(0, 191, 255, 0.38) !important;
  background: rgba(0, 191, 255, 0.04) !important;
  border-radius: 10px !important;
  transition: border-color 0.22s, background 0.22s, box-shadow 0.22s !important;
  cursor: pointer !important;
}

.cs-upload:hover {
  border-color: rgba(0, 191, 255, 0.72) !important;
  background: rgba(0, 191, 255, 0.09) !important;
  box-shadow: 0 0 0 3px rgba(0, 191, 255, 0.1) !important;
}
/* ── 9. STEP NUMBER — gradiente blu ───────────────────────────────────── */
.cs-panel__step {
  background: linear-gradient(135deg, #1e90ff, #00bfff) !important;
  box-shadow: 0 2px 12px rgba(0, 191, 255, 0.3) !important;
}
/* ── 10. INPUT TICKET — bordo azzurro al focus ────────────────────────── */
.cs-ticket input {
  border: 1px solid rgba(0, 191, 255, 0.3) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.cs-ticket input:focus {
  border-color: rgba(0, 191, 255, 0.75) !important;
  box-shadow: 0 0 0 3px rgba(0, 191, 255, 0.12) !important;
  outline: none !important;
}
/* ── 11. SKY ORB — opacità ridotta ────────────────────────────────────── */
.cs-sky-orb {
  opacity: 0.75 !important;
}
/* ── 12. BOTTONE SECONDARY (Open Session) ─────────────────────────────── */
.cs-button--secondary {
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(10px) !important;
  transition: background 0.18s, border-color 0.18s, transform 0.16s !important;
}

.cs-button--secondary:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  transform: translateY(-1px) !important;
}

.cs-button--secondary:active {
  transform: scale(0.97) !important;
}

/* ── 13. MEDIA STAGE — rimuove il verde, sfondo neutro ───────────────── */
.cs-media-stage img {
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.cs-media-ready {
  background: rgba(8, 20, 45, 0.45) !important;
  border-color: rgba(0, 191, 255, 0.35) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(14px) !important;
}

.cs-media-stage,
.cs-media-stage.cs-media-ready {
  background: rgba(8, 20, 45, 0.30) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
/* ── 14. LAYOUT — centra la colonna principale ────────────────────────── */
/* Scoped to the non-admin (single column) view only: applied unscoped, this
   forced the admin sidebar into a side-by-side flex row on every viewport,
   breaking the grid's <1100px stacking and causing the mobile overlaps. */
.cs-shell[data-cs-admin-view="false"] .cs-shell__layout {
  display: flex !important;
  justify-content: center !important;
}

.cs-shell[data-cs-admin-view="false"] .cs-shell__main {
  width: 100% !important;
  max-width: 600px !important;
  margin: 0 auto !important;
}

/* Ticket acquisition shares the app background; no ticket-specific sky art. */
.cs-ticket-shell {
  background:
    linear-gradient(
      to bottom,
      rgba(4, 25, 58, 0.70) 0%,
      rgba(4, 24, 54, 0.64) 40%,
      rgba(4, 16, 36, 0.78) 75%,
      rgba(3, 8, 18, 0.90) 100%
    ),
    url('https://coherentsky.org/wp-content/uploads/2026/07/BBB.png')
    center top / cover no-repeat !important;
}

/* Keep live-region feedback available without rendering an empty status bar. */
.cs-ticket-shell [data-cs-ticket-status]:empty,
.cs-shell [data-cs-output="status"]:empty {
  display: none;
}

/* The Engine may populate its waiting copy after boot; keep it out of landing. */
.cs-shell[data-cs-session-phase="landing"] [data-cs-output="status"] {
  display: none;
}