/* Aurora components (same classes as the Design System artifact) */
.kicker { font: 500 12px/16px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-subtle); }
.timecode { font: 500 13px/20px var(--font-mono); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; color: var(--text-subtle); }
.row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* Button */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 44px; padding: 0 22px; border: 1px solid transparent; border-radius: var(--radius-pill); font: 600 15px/1 var(--font-sans); color: var(--text); background: transparent; white-space: nowrap; transition: transform 150ms var(--ease), box-shadow 250ms var(--ease), background 150ms var(--ease), border-color 150ms var(--ease), color 150ms; }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.btn:active { transform: scale(0.98); }
.btn-primary { color: var(--on-brand); background: linear-gradient(135deg, var(--brand), var(--brand-deep)); border-color: rgba(167, 139, 250, 0.6); box-shadow: var(--glow-brand); }
.btn-primary:hover { box-shadow: var(--glow-brand), var(--glow-cyan); }
.btn-glass { background: var(--glass); border-color: var(--line-strong); backdrop-filter: blur(12px); }
.btn-glass:hover { background: var(--surface-3); }
.btn-ghost { color: var(--text-muted); }
.btn-ghost:hover { color: var(--text); background: var(--surface-3); }
.btn-danger { color: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: rgba(251, 113, 133, 0.12); }
.btn-sm { height: 34px; padding: 0 16px; font-size: 13px; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; box-shadow: none; transform: none; }
.btn .spin { width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; border-radius: 50%; animation: spin 700ms linear infinite; }
.btn .check { animation: pop 400ms var(--spring); }
@keyframes spin { to { transform: rotate(360deg); } }
.icon-btn { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; background: var(--glass); color: var(--text-muted); transition: color 150ms, background 150ms, transform 150ms var(--ease); }
.icon-btn:hover { color: var(--text); background: var(--surface-3); }
.icon-btn:active { transform: scale(0.94); }
.icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* Segmented: JS adds .js and a sliding .seg-thumb */
.seg { position: relative; display: inline-flex; padding: 4px; gap: 2px; background: var(--surface-3); border: 1px solid var(--line); border-radius: var(--radius-pill); }
.seg label { position: relative; z-index: 1; }
.seg input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.seg span { display: block; padding: 7px 16px; border-radius: var(--radius-pill); font: 600 13px/20px var(--font-sans); color: var(--text-muted); white-space: nowrap; transition: color 150ms var(--ease), background 250ms var(--ease); }
.seg input:checked + span { color: var(--on-brand); background: linear-gradient(135deg, var(--brand), var(--brand-deep)); box-shadow: 0 4px 16px rgba(109, 74, 255, 0.45); }
.seg.js input:checked + span { background: none; box-shadow: none; }
.seg input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 2px; }
.seg input:disabled + span { opacity: 0.45; cursor: not-allowed; }
.seg-thumb { position: absolute; z-index: 0; top: 4px; left: 0; height: calc(100% - 8px); border-radius: var(--radius-pill); background: linear-gradient(135deg, var(--brand), var(--brand-deep)); box-shadow: 0 4px 16px rgba(109, 74, 255, 0.45); transition: transform 350ms var(--spring), width 350ms var(--ease); }
.seg-label { display: block; margin-bottom: 8px; }

/* Tabs */
.tabs { position: relative; display: flex; gap: var(--space-6); border-bottom: 1px solid var(--line); }
.tab { position: relative; padding: 12px 2px; background: none; border: 0; font: 600 14px/20px var(--font-sans); color: var(--text-muted); transition: color 150ms var(--ease); }
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--violet); }
.tabs-ind { position: absolute; left: 0; bottom: -1px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--brand), var(--cyan)); transition: transform 350ms var(--ease), width 350ms var(--ease); }
.tab-panels { position: relative; overflow: hidden; transition: height 350ms var(--ease); }
.tab-panel { animation: panel-in 350ms var(--ease) both; }
.tab-panel.from-left { animation-name: panel-in-left; }
@keyframes panel-in { from { opacity: 0; transform: translateX(24px); } }
@keyframes panel-in-left { from { opacity: 0; transform: translateX(-24px); } }

/* Card */
.card { position: relative; padding: var(--space-6); background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius-lg); backdrop-filter: blur(20px); box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.06); transition: transform 250ms var(--ease), box-shadow 250ms var(--ease), border-color 250ms var(--ease); }
.card.spot::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 250ms var(--ease); background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(124, 92, 255, 0.22), transparent 60%); }
.card.spot:hover::before { opacity: 1; }
.card.lift:hover { transform: translateY(-2px); border-color: rgba(34, 211, 238, 0.45); box-shadow: var(--shadow-card), var(--glow-cyan), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.card h3 { margin: 0 0 var(--space-1); font: 600 18px/26px var(--font-sans); letter-spacing: -0.01em; }
.card p { margin: 0; color: var(--text-muted); font-size: 14px; line-height: 22px; }

/* Badge */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-pill); border: 1px solid currentColor; font: 500 12px/16px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-info { color: var(--cyan-soft); }
.badge-success { color: var(--success); }
.badge-warn { color: var(--warn); }
.badge-danger { color: var(--danger); }
.badge-live::before { animation: pulse 1.4s var(--ease) infinite; }
@keyframes pulse { 50% { opacity: 0.25; transform: scale(1.6); } }

/* StageRail */
.rail { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.rail li { flex: 1 1 72px; min-width: 72px; }
.rail .bar { position: relative; height: 4px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.rail .bar::after { content: ""; position: absolute; inset: 0; transform: scaleX(0); transform-origin: 0 50%; background: var(--cyan); transition: transform 700ms var(--ease); }
.rail .label { display: block; margin-top: 8px; font: 500 12px/16px var(--font-sans); color: var(--text-subtle); transition: color 250ms; }
.rail .done .bar::after { transform: scaleX(1); }
.rail .done .label { color: var(--text-muted); }
.rail .active .bar::after { transform: scaleX(1); background: linear-gradient(90deg, var(--brand), var(--cyan), var(--brand)); background-size: 200% 100%; animation: flow 1.6s linear infinite; }
.rail .active .label { color: var(--cyan-soft); }
.rail .failed .bar::after { transform: scaleX(1); background: var(--danger); }
.rail .failed .label { color: var(--danger); }
@keyframes flow { to { background-position: -200% 0; } }

/* Fields */
.field { display: grid; gap: 6px; }
.field label, .field .lab { font: 600 13px/20px var(--font-sans); color: var(--text-muted); }
.input { width: 100%; height: 44px; padding: 0 14px; background: var(--surface-3); color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--radius-md); font: 400 15px/24px var(--font-sans); transition: box-shadow 250ms var(--ease), border-color 150ms var(--ease); }
.input::placeholder { color: var(--text-subtle); }
.input:focus { outline: none; border-color: var(--cyan); box-shadow: var(--glow-cyan); }
.chip { padding: 6px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: transparent; font: 500 13px/20px var(--font-sans); color: var(--text-muted); transition: color 150ms, background 150ms, border-color 150ms, transform 250ms var(--spring); }
.chip:hover { color: var(--text); background: var(--surface-3); border-color: var(--violet); transform: translateY(-1px); }

/* Skeleton, empty, magnetic */
.skeleton { position: relative; overflow: hidden; border-radius: var(--radius-md); background: var(--surface-2); }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent); animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
.empty { display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-12) var(--space-6); border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); text-align: center; color: var(--text-muted); }
.empty svg { width: 36px; height: 36px; fill: none; stroke: var(--violet); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.empty p { margin: 0; max-width: 40ch; }
.empty.error { border-color: var(--danger); }
.magnetic { will-change: transform; transition: transform 250ms var(--ease), box-shadow 250ms var(--ease); }

/* Shared form bits */
.stack { display: grid; gap: var(--space-3); }
.form-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
textarea.input { height: auto; padding: 10px 14px; resize: vertical; }
select.input { appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a3a9c2' stroke-width='2' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; }
.color-field { display: grid; gap: 6px; }
.color-field input { width: 64px; height: 40px; padding: 2px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-3); }
.switch { display: inline-flex; align-items: center; gap: 12px; font-weight: 600; }
.switch input { position: absolute; opacity: 0; }
.switch-track { position: relative; width: 46px; height: 26px; border-radius: 13px; border: 1px solid var(--line-strong); background: var(--surface-3); transition: background 250ms var(--ease), border-color 250ms; }
.switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--text-muted); transition: transform 350ms var(--spring), background 250ms; }
.switch input:checked + .switch-track { background: linear-gradient(135deg, var(--brand), var(--brand-deep)); border-color: var(--violet); }
.switch input:checked + .switch-track::after { transform: translateX(20px); background: #fff; }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--cyan); outline-offset: 2px; }