:root {
  --dash-blue: #3157f6;
  --dash-violet: #7657ff;
  --dash-green: #36d6a3;
  --dash-card: rgba(255,255,255,.88);
  --dash-shadow: 0 18px 55px rgba(30,47,91,.1);
  --dash-shadow-soft: 0 8px 28px rgba(30,47,91,.07);
}
html[data-theme=dark] {
  --dash-card: rgba(23,31,46,.88);
  --dash-shadow: 0 22px 70px rgba(0,0,0,.3);
  --dash-shadow-soft: 0 10px 32px rgba(0,0,0,.2);
}
body {
  min-height: 100dvh;
  background: radial-gradient(circle at 8% 5%,rgba(78,118,255,.1),transparent 25rem),radial-gradient(circle at 92% 18%,rgba(112,82,255,.08),transparent 28rem),var(--bg);
}
.app-header {
  position: sticky;
  top: 0;
  z-index: 50;
  max-width: none;
  min-height: 74px;
  padding: 14px clamp(24px,3vw,54px);
  border-bottom: 1px solid color-mix(in srgb,var(--line) 72%,transparent);
  background: color-mix(in srgb,var(--surface) 88%,transparent);
  box-shadow: 0 1px 0 rgba(255,255,255,.45),0 10px 32px rgba(28,40,74,.045);
  backdrop-filter: blur(20px) saturate(160%);
}
html[data-theme=dark] .app-header { box-shadow: 0 12px 36px rgba(0,0,0,.16); }
.app-header .brand { color: var(--ink); font-size: 28px; letter-spacing: -2.1px; }
.app-header .brand span { color: var(--dash-blue); }
.app-header .app-nav { gap: 5px; }
.nav-icon,.nav-mobile,.mobile-account { display: none; }
.header-tools { display: flex; align-items: center; gap: 8px; }
.app-header .app-nav > a,.app-header .app-nav > form .quiet {
  position: relative;
  min-height: 40px;
  padding: 9px 13px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--muted);
  font-weight: 650;
  line-height: 1;
  transition: color .18s ease,background .18s ease,border-color .18s ease,transform .18s ease;
}
.app-header .app-nav > a:hover,.app-header .app-nav > a.active { color: var(--ink); background: var(--surface-soft); }
.app-header .app-nav > a.active::after {
  content: "";
  position: absolute;
  right: 13px;
  bottom: 5px;
  left: 13px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg,var(--dash-blue),var(--dash-violet));
}
.app-header .app-nav > form .quiet { background: transparent; border-color: var(--line); color: var(--ink); }
.app-header .app-nav > form .quiet:hover { background: var(--surface-soft); border-color: color-mix(in srgb,var(--dash-blue) 30%,var(--line)); }
.app-header .theme-switch { width: 64px; min-height: 36px; margin-left: 10px; padding: 4px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
body > main { width: 100%; max-width: 1536px; min-height: calc(100dvh - 145px); padding: 0 clamp(24px,3.2vw,56px); }
body > footer { max-width: none; padding: 24px clamp(24px,3vw,54px); background: color-mix(in srgb,var(--surface) 74%,transparent); }
.dashboard-shell { padding: 30px 0 46px; }
.dashboard-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(430px,.9fr);
  gap: clamp(28px,4vw,64px);
  align-items: center;
  min-height: 360px;
  padding: clamp(34px,4vw,58px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 28px;
  color: #fff;
  background: radial-gradient(circle at 76% 12%,rgba(106,224,255,.26),transparent 28%),radial-gradient(circle at 98% 90%,rgba(135,91,255,.38),transparent 34%),linear-gradient(125deg,#101a41 0%,#172a71 46%,#3158ef 100%);
  box-shadow: 0 28px 80px rgba(30,57,148,.24);
  isolation: isolate;
}
.dashboard-hero::before,.dashboard-hero::after { content: ""; position: absolute; z-index: -1; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; }
.dashboard-hero::before { width: 430px; height: 430px; right: -150px; top: -245px; }
.dashboard-hero::after { width: 240px; height: 240px; right: 29%; bottom: -195px; }
.hero-copy { min-width: 0; }
.dashboard-hero .eyebrow { display: flex; gap: 10px; align-items: center; margin: 0 0 17px; color: rgba(255,255,255,.72); letter-spacing: .15em; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #6cf3c3; box-shadow: 0 0 0 5px rgba(108,243,195,.14),0 0 18px rgba(108,243,195,.8); }
.dashboard-hero h1 { max-width: 780px; margin: 0; color: #fff; font-size: clamp(38px,4.25vw,66px); font-weight: 710; line-height: .98; letter-spacing: -.055em; }
.dashboard-hero h1 span { display: block; color: #a9bcff; background: linear-gradient(90deg,#abc0ff,#e1dcff 62%,#a9ecff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.dashboard-hero .hero-lede { max-width: 650px; margin: 22px 0 0; color: rgba(237,243,255,.72); font-size: 15px; line-height: 1.7; }
.dashboard-hero .page-actions { justify-content: flex-start; margin-top: 28px; }
.dashboard-hero .button { min-height: 48px; padding: 13px 19px; border-radius: 12px; font-weight: 720; box-shadow: none; }
.dashboard-hero .hero-primary { color: #182452; background: #fff; box-shadow: 0 12px 28px rgba(6,14,48,.22); }
.dashboard-hero .hero-primary:hover { background: #eef2ff; transform: translateY(-1px); }
.dashboard-hero .hero-secondary { color: #fff; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22); }
.dashboard-hero .hero-secondary:hover { background: rgba(255,255,255,.16); }
.pipeline-card { position: relative; min-width: 0; padding: 24px; border: 1px solid rgba(255,255,255,.17); border-radius: 22px; background: linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.07)); box-shadow: inset 0 1px 0 rgba(255,255,255,.14),0 24px 55px rgba(5,13,45,.18); backdrop-filter: blur(18px); }
.pipeline-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; padding-bottom: 21px; border-bottom: 1px solid rgba(255,255,255,.13); }
.pipeline-head div { display: grid; gap: 4px; }
.pipeline-head small { color: rgba(255,255,255,.54); font-size: 9px; font-weight: 750; letter-spacing: .16em; }
.pipeline-head strong { color: #fff; font-size: 17px; }
.pipeline-live { display: inline-flex; gap: 7px; align-items: center; padding: 6px 10px; border: 1px solid rgba(112,247,198,.22); border-radius: 999px; background: rgba(78,220,169,.1); color: #aaf7db; font-size: 10px; font-weight: 700; }
.pipeline-live i { width: 6px; height: 6px; border-radius: 50%; background: #69efbe; box-shadow: 0 0 10px #69efbe; }
.pipeline-flow { display: grid; gap: 0; margin-top: 20px; }
.pipeline-step { display: grid; grid-template-columns: 39px 1fr; gap: 13px; align-items: center; min-width: 0; padding: 8px; border-radius: 12px; text-decoration: none; transition: background .18s ease,transform .18s ease; }
.pipeline-step:hover { background: rgba(255,255,255,.08); transform: translateX(3px); }
.pipeline-step > span:last-child { display: grid; min-width: 0; }
.pipeline-step strong { color: #fff; font-size: 13px; }
.pipeline-step small { overflow: hidden; color: rgba(255,255,255,.58); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.step-icon { display: grid; place-items: center; width: 39px; height: 39px; border: 1px solid rgba(255,255,255,.16); border-radius: 11px; color: rgba(255,255,255,.7); background: rgba(255,255,255,.07); font-size: 10px; font-weight: 800; }
.pipeline-step.complete .step-icon { color: #102a22; border-color: transparent; background: #75efc4; }
.pipeline-line { width: 1px; height: 10px; margin-left: 27px; background: linear-gradient(rgba(255,255,255,.24),rgba(255,255,255,.06)); }
.dashboard-shell > .metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin: 20px 0; }
.dashboard-shell > .metrics article { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: center; min-width: 0; min-height: 138px; padding: 22px; overflow: hidden; border: 1px solid color-mix(in srgb,var(--line) 84%,transparent); border-radius: 18px; background: var(--dash-card); box-shadow: var(--dash-shadow-soft); backdrop-filter: blur(12px); transition: transform .2s ease,box-shadow .2s ease,border-color .2s ease; }
.dashboard-shell > .metrics article::after { content: ""; position: absolute; right: -32px; bottom: -43px; width: 96px; height: 96px; border-radius: 50%; background: color-mix(in srgb,var(--dash-blue) 8%,transparent); }
.dashboard-shell > .metrics article:hover { transform: translateY(-3px); border-color: color-mix(in srgb,var(--dash-blue) 28%,var(--line)); box-shadow: var(--dash-shadow); }
.dashboard-shell > .metrics article > div { min-width: 0; }
.dashboard-shell > .metrics article > div > span { display: block; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .045em; text-transform: uppercase; }
.dashboard-shell > .metrics article strong { display: block; margin: 3px 0 0; color: var(--ink); font-size: clamp(28px,2.4vw,38px); font-weight: 720; line-height: 1.1; letter-spacing: -.04em; }
.dashboard-shell > .metrics article strong em { color: var(--muted); font-size: 13px; font-style: normal; letter-spacing: 0; }
.dashboard-shell > .metrics article small { display: block; margin-top: 7px; overflow: visible; color: var(--muted); font-size: 11px; line-height: 1.35; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }
.dashboard-shell > .metrics article small a { color: var(--dash-blue); font-weight: 700; text-decoration: none; }
.metric-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; }
.metric-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.media-icon { color: #375df5 !important; background: rgba(55,93,245,.1); }
.queue-icon { color: #8d58f4 !important; background: rgba(141,88,244,.1); }
.ready-icon { color: #12a87c !important; background: rgba(18,168,124,.1); }
.storage-icon { color: #df7b2a !important; background: rgba(223,123,42,.1); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0,1.75fr) minmax(330px,.75fr); gap: 20px; align-items: stretch; }
.dashboard-grid > .panel { min-width: 0; margin: 0; padding: 28px; overflow: hidden; border: 1px solid color-mix(in srgb,var(--line) 84%,transparent); border-radius: 20px; background: var(--dash-card); box-shadow: var(--dash-shadow-soft); backdrop-filter: blur(12px); }
.section-heading { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; }
.section-heading h2 { margin: 2px 0 0; color: var(--ink); font-size: 20px; font-weight: 720; letter-spacing: -.035em; }
.section-heading > a { display: inline-flex; gap: 6px; align-items: center; min-height: 36px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: var(--surface-soft); font-size: 11px; font-weight: 700; text-decoration: none; }
.section-heading > a:hover { color: var(--dash-blue); border-color: color-mix(in srgb,var(--dash-blue) 32%,var(--line)); }
.section-kicker { margin: 0; color: var(--dash-blue); font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.render-panel .table-wrap { margin-top: 22px; }
.render-panel table { font-size: 12px; }
.render-panel th { padding-top: 12px; color: var(--muted); font-size: 9px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.render-panel td { color: var(--muted); }
.render-panel td strong { color: var(--ink); }
.render-panel .badge { font-weight: 750; letter-spacing: .04em; }
.status-ready { color: #0b9269; border-color: rgba(11,146,105,.2); background: rgba(11,146,105,.08); }
.status-failed,.status-cancelled,.status-expired,.status-removed { color: #d64f5f; border-color: rgba(214,79,95,.2); background: rgba(214,79,95,.08); }
.status-rendering,.status-queued { color: #7251dd; border-color: rgba(114,81,221,.2); background: rgba(114,81,221,.08); }
.empty-renders { display: grid; grid-template-columns: 180px 1fr; gap: clamp(26px,4vw,48px); align-items: center; min-height: 290px; padding: 34px 20px; }
.empty-renders h3 { margin: 6px 0 8px; color: var(--ink); font-size: 24px; letter-spacing: -.035em; }
.empty-renders p:not(.section-kicker) { max-width: 520px; margin: 0; font-size: 13px; }
.empty-visual { position: relative; display: grid; place-items: center; width: 170px; height: 150px; }
.empty-frame { position: relative; display: block; width: 128px; height: 116px; transform: rotate(-5deg); border: 1px solid color-mix(in srgb,var(--dash-blue) 24%,var(--line)); border-radius: 18px; background: linear-gradient(145deg,color-mix(in srgb,var(--dash-blue) 10%,var(--surface)),var(--surface)); box-shadow: 12px 16px 0 color-mix(in srgb,var(--dash-violet) 7%,var(--surface-soft)); }
.empty-frame i { position: absolute; right: 17px; left: 17px; height: 8px; border-radius: 999px; background: color-mix(in srgb,var(--dash-blue) 13%,var(--surface-soft)); }
.empty-frame i:nth-child(1) { top: 23px; width: 50%; }
.empty-frame i:nth-child(2) { top: 43px; }
.empty-frame i:nth-child(3) { top: 63px; width: 65%; }
.empty-play { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; padding-left: 3px; border: 5px solid color-mix(in srgb,var(--surface) 90%,transparent); border-radius: 50%; color: #fff; background: linear-gradient(135deg,var(--dash-blue),var(--dash-violet)); box-shadow: 0 12px 28px rgba(55,93,245,.3); font-size: 13px; }
.empty-actions { display: flex; gap: 15px; align-items: center; margin-top: 20px; }
.empty-actions .button { min-height: 42px; padding: 10px 15px; border-radius: 10px; font-weight: 700; }
.empty-actions > a:not(.button) { color: var(--dash-blue); font-size: 12px; font-weight: 700; text-decoration: none; }
.progress-ring { display: grid; place-items: center; width: 48px; height: 48px; border: 4px solid var(--surface-soft); border-top-color: var(--dash-blue); border-right-color: var(--dash-violet); border-radius: 50%; color: var(--muted); font-size: 9px; }
.progress-ring b { margin-bottom: -6px; color: var(--ink); font-size: 14px; line-height: 1; }
.checklist { display: grid; gap: 8px; margin-top: 24px; }
.check-item { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; min-width: 0; padding: 12px; border: 1px solid transparent; border-radius: 12px; text-decoration: none; transition: background .18s ease,border-color .18s ease,transform .18s ease; }
.check-item:hover { transform: translateX(3px); border-color: var(--line); background: var(--surface-soft); }
.check-item > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--dash-blue); background: color-mix(in srgb,var(--dash-blue) 9%,var(--surface)); font-size: 11px; font-weight: 800; }
.check-item.done > span { color: #087c58; background: rgba(54,214,163,.14); }
.check-item > div { display: grid; min-width: 0; }
.check-item strong { color: var(--ink); font-size: 12px; }
.check-item small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.check-item > b { color: var(--muted); font-size: 20px; font-weight: 400; }
.batch-callout { display: grid; grid-template-columns: 42px 1fr; gap: 13px; margin-top: 22px; padding: 16px; border: 1px solid color-mix(in srgb,var(--dash-blue) 16%,var(--line)); border-radius: 14px; background: linear-gradient(135deg,color-mix(in srgb,var(--dash-blue) 7%,var(--surface)),color-mix(in srgb,var(--dash-violet) 6%,var(--surface))); }
.batch-callout > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: #fff; background: linear-gradient(135deg,var(--dash-blue),var(--dash-violet)); font-size: 23px; }
.batch-callout strong { color: var(--ink); font-size: 12px; }
.batch-callout p { margin: 3px 0 0; font-size: 10px; line-height: 1.5; }
.form-card,.columns > .panel,body > main > .panel { border-radius: 18px; box-shadow: var(--dash-shadow-soft); }
.small-heading { color: var(--ink); }
.page-heading .eyebrow { color: var(--dash-blue); }
.button,button { font-weight: 680; }
.notice { border: 1px solid color-mix(in srgb,var(--dash-green) 30%,var(--line)); }
@media (max-width:1180px) {
  .dashboard-hero { grid-template-columns: minmax(0,1fr) minmax(360px,.8fr); }
  .dashboard-grid { grid-template-columns: minmax(0,1.5fr) minmax(300px,.85fr); }
  .dashboard-shell > .metrics article { grid-template-columns: 42px 1fr; gap: 12px; padding: 18px; }
  .metric-icon { width: 42px; height: 42px; }
}
@media (max-width:980px) {
  .dashboard-hero { grid-template-columns: 1fr; }
  .pipeline-flow { grid-template-columns: repeat(7,auto); align-items: center; }
  .pipeline-step { grid-template-columns: 39px; justify-items: center; padding: 8px 4px; text-align: center; }
  .pipeline-step > span:last-child { margin-top: 5px; }
  .pipeline-step small { max-width: 105px; }
  .pipeline-line { width: clamp(15px,4vw,46px); height: 1px; margin: -28px 0 0; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-shell > .metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (min-width:721px) and (max-width:900px) {
  .app-header { display: grid; grid-template-columns: 1fr auto; gap: 10px 18px; padding-top: 14px; padding-bottom: 12px; }
  .app-header > .brand { grid-column: 1; grid-row: 1; }
  .app-header > .header-tools { grid-column: 2; grid-row: 1; margin: 0; justify-self: end; }
  .app-header > .app-nav { grid-column: 1/-1; grid-row: 2; justify-content: center; }
}
@media (max-width:720px) {
  .app-header { position: relative; min-height: 0; }
  .app-header .app-nav > a.active::after { display: none; }
  .app-header .app-nav > a.active { color: var(--accent-ink); border-color: transparent; background: var(--lime); }
  body > main { padding: 0 16px; }
  .dashboard-shell { padding: 16px 0 30px; }
  .dashboard-hero { gap: 20px; min-height: 0; padding: 24px 20px; border-radius: 22px; }
  .dashboard-hero h1 { font-size: clamp(34px,9.4vw,46px); line-height: 1.01; }
  .dashboard-hero .hero-lede { margin-top: 15px; font-size: 12px; line-height: 1.6; }
  .dashboard-hero .page-actions { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); margin-top: 20px; gap: 8px; }
  .dashboard-hero .button { min-height: 44px; padding: 10px 9px; font-size: 11px; }
  .pipeline-card { padding: 15px 13px; border-radius: 17px; }
  .pipeline-head { padding-bottom: 14px; }
  .pipeline-head strong { font-size: 15px; }
  .pipeline-flow { margin-top: 12px; }
  .pipeline-flow { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .pipeline-line { display: none; }
  .pipeline-step { grid-template-columns: 34px 1fr; justify-items: stretch; padding: 9px; text-align: left; background: rgba(255,255,255,.055); }
  .pipeline-step > span:last-child { margin: 0; }
  .step-icon { width: 34px; height: 34px; }
  .pipeline-step small { max-width: none; }
  .dashboard-shell > .metrics { gap: 10px; margin: 12px 0; }
  .dashboard-shell > .metrics article { min-height: 120px; padding: 16px; border-radius: 15px; }
  .dashboard-shell > .metrics article strong { font-size: 29px; }
  .dashboard-shell > .metrics article small { white-space: normal; }
  .dashboard-grid { gap: 12px; }
  .dashboard-grid > .panel { padding: 20px; border-radius: 16px; }
  .empty-renders { grid-template-columns: 1fr; gap: 8px; min-height: 0; padding: 26px 2px 12px; }
  .empty-visual { margin: auto; }
  .empty-actions { flex-wrap: wrap; }
  .render-panel .table-wrap { margin-top: 16px; }
  .render-panel td[data-label="Status"] .render-state { grid-column: 1/-1; max-width: none; margin-top: 0; }
  .render-panel td[data-label="Status"] .output-countdown { max-width: none; }
}
@media (max-width:460px) {
  .dashboard-hero .page-actions { grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr); }
  .dashboard-shell > .metrics { grid-template-columns: 1fr 1fr; }
  .dashboard-shell > .metrics article { display: block; min-height: 134px; }
  .metric-icon { width: 38px; height: 38px; margin-bottom: 12px; }
  .metric-icon svg { width: 20px; height: 20px; }
  .dashboard-shell > .metrics article > div > span { font-size: 9px; }
  .dashboard-shell > .metrics article strong { font-size: 27px; }
  .section-heading > a { display: none; }
  .check-item { padding: 10px 7px; }
}
.output-countdown { display: inline-grid; grid-template-columns: auto auto auto; gap: 7px; align-items: center; width: max-content; max-width: 100%; padding: 5px 9px; border: 1px solid color-mix(in srgb,#ef8b22 32%,var(--line)); border-radius: 9px; background: color-mix(in srgb,#ef8b22 10%,var(--surface)); color: color-mix(in srgb,#a94f00 88%,var(--ink)); line-height: 1.1; white-space: nowrap; box-shadow: inset 0 1px 0 color-mix(in srgb,#fff 38%,transparent); }
.output-countdown::before { content: "◷"; font-size: 15px; line-height: 1; }
.output-countdown-label { margin-left: -3px; font-size: 8px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.output-countdown-value { min-width: 63px; font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size: 12px; font-variant-numeric: tabular-nums; letter-spacing: .035em; text-align: right; }
.output-countdown.is-due { color: #b42336; border-color: color-mix(in srgb,#d64f5f 38%,var(--line)); background: color-mix(in srgb,#d64f5f 10%,var(--surface)); }
.output-deadline { display: block; margin-top: 6px; }
.output-expiry-notice { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.output-expiry-notice > span:last-child { flex: 1 1 320px; }
@media (max-width:600px) {
  .output-expiry-notice { align-items: flex-start; }
  .output-expiry-notice .output-countdown { flex: 0 0 auto; }
  .output-expiry-notice > span:last-child { flex-basis: 100%; }
}
@media (prefers-reduced-motion:reduce) { .dashboard-shell *,.app-header * { animation: none !important; transition: none !important; } }