/* [project]/src/app/globals.css [app-client] (css) */
:root {
  --ink: #202321;
  --muted: #777d79;
  --green: #465b4d;
  --green-dark: #34463a;
  --border: #e4e6e4;
  --surface: #f3f4f3;
  --sage: #e8ebe8;
  --radius: 14px;
}

* {
  box-sizing: border-box;
}

body {
  background: var(--surface);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  margin: 0;
  font-family: Inter, Segoe UI, PingFang SC, Microsoft YaHei, sans-serif;
  font-size: 14px;
}

a {
  color: inherit;
  text-decoration: none;
}

button, input, textarea, select {
  font: inherit;
}

button, a, input, select, textarea {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: wait;
  opacity: .6;
}

:focus-visible {
  outline-offset: 4px;
  outline: 3px solid #88a47b;
}

h1, h2, h3, p {
  margin-top: 0;
}

h1 {
  letter-spacing: -1px;
  overflow-wrap: anywhere;
  margin-bottom: 10px;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.4;
}

h2 {
  letter-spacing: -.3px;
  font-size: 18px;
  font-weight: 600;
}

h3 {
  font-size: 15px;
  font-weight: 600;
}

.skip-link {
  z-index: 100;
  background: var(--green);
  color: #fff;
  border-radius: 8px;
  padding: 12px;
  position: fixed;
  top: -70px;
  left: 15px;
}

.skip-link:focus {
  top: 10px;
}

.app-shell {
  min-height: 100vh;
  display: flex;
}

.sidebar {
  border-right: 1px solid var(--border);
  z-index: 20;
  background: #fafbfa;
  flex-direction: column;
  width: 236px;
  padding: 31px 20px 18px;
  display: flex;
  position: fixed;
  inset: 0 auto 0 0;
}

.wordmark {
  letter-spacing: -1.2px;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  font-size: 28px;
  font-weight: 650;
  display: flex;
}

.brand-symbol {
  background: var(--green);
  color: #e2edcc;
  border-radius: 9px;
  place-items: center;
  width: 31px;
  height: 31px;
  display: grid;
}

.brand-dot {
  color: #8d9b62;
  margin-left: -9px;
}

.workspace-switch {
  border: 1px solid var(--border);
  background: #f6f7f3;
  border-radius: 10px;
  align-items: center;
  gap: 10px;
  margin: 32px 0 20px;
  padding: 12px 10px;
  font-size: 12px;
  display: flex;
}

.workspace-avatar, .user-avatar {
  color: #59614a;
  background: #e9e9dc;
  border-radius: 8px;
  flex-shrink: 0;
  place-items: center;
  width: 30px;
  height: 30px;
  font-weight: 600;
  display: grid;
}

.workspace-switch small, .sidebar-user small {
  color: var(--muted);
  margin-top: 4px;
  font-size: 10px;
  display: block;
}

.button {
  border: 1px solid #0000;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 11px 17px;
  font-size: 12px;
  font-weight: 550;
  transition: background .15s, transform .15s;
  display: inline-flex;
}

.button-primary {
  background: var(--green);
  color: #fff;
}

.button-primary:hover {
  background: var(--green-dark);
}

.button-dark {
  color: #fff;
  background: #2c3a2e;
}

.button-dark:hover {
  background: #1c291e;
}

.button-secondary {
  color: var(--green);
  background: #fff;
  border-color: #dce1d6;
}

.button-secondary:hover {
  background: #f0f3ec;
}

.sidebar-create {
  width: 100%;
}

.nav-caption {
  color: #a2a69e;
  letter-spacing: .5px;
  margin: 29px 10px 11px;
  font-size: 10px;
}

.nav-link {
  color: #7b817a;
  border-radius: 8px;
  align-items: center;
  gap: 13px;
  min-height: 44px;
  margin-bottom: 5px;
  padding: 11px 13px;
  font-size: 12px;
  display: flex;
}

.nav-link:hover {
  background: #f6f8f3;
}

.nav-link.active {
  color: #3a5743;
  background: #edf2e9;
  font-weight: 600;
}

.sidebar-note {
  margin-top: auto;
  padding: 35px 12px 27px;
}

.eyebrow {
  letter-spacing: 1.5px;
  color: #859178;
  margin-bottom: 12px;
  font-size: 9px;
  font-weight: 600;
}

.sidebar-note .eyebrow {
  letter-spacing: 1px;
  font-size: 8px;
}

.sidebar-note p {
  color: #8e9687;
  margin: 12px 0;
  font-size: 12px;
  line-height: 1.9;
}

.sidebar-note a {
  color: #65765b;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  display: flex;
}

.sidebar-user {
  border-top: 1px solid var(--border);
  align-items: center;
  gap: 10px;
  padding: 18px 8px 0;
  font-size: 10px;
  display: flex;
}

.user-avatar {
  background: #f0e9da;
}

.main-shell {
  flex-direction: column;
  width: calc(100% - 236px);
  min-width: 0;
  margin-left: 236px;
  display: flex;
}

.topbar {
  border-bottom: 1px solid var(--border);
  color: #81877d;
  background: #fcfcf9;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 70px;
  padding: 0 42px;
  font-size: 10px;
  display: flex;
}

.breadcrumb-slash {
  color: #c7ccc1;
  margin: 0 12px;
}

.topbar > span a {
  color: inherit;
}

.topbar > span a:hover {
  color: var(--ink);
}

.preview-badge {
  white-space: nowrap;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  display: inline-flex;
}

.preview-badge > span {
  background: #8d9e6f;
  border-radius: 50%;
  width: 5px;
  height: 5px;
}

.topbar-actions {
  align-items: center;
  gap: 22px;
  display: flex;
}

.theme-control {
  border: 1px solid var(--border);
  background: #f0f2f0;
  border-radius: 9px;
  align-items: center;
  gap: 3px;
  min-width: 0;
  margin: 0;
  padding: 3px;
  display: inline-flex;
}

.theme-control button {
  width: 28px;
  height: 27px;
  color: var(--ink);
  opacity: .62;
  background: none;
  border: 0;
  border-radius: 6px;
  place-items: center;
  transition: background-color .15s, color .15s, opacity .15s;
  display: grid;
}

.theme-control button:hover {
  opacity: 1;
}

.theme-control button[aria-pressed="true"] {
  color: var(--green-dark);
  opacity: 1;
  background: #fff;
  box-shadow: 0 1px 3px #17221912;
}

.theme-control button:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 1px;
}

main {
  flex: 1;
}

.page-container {
  max-width: 1450px;
  margin: auto;
  padding: 39px 42px 45px;
}

.page-heading {
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 31px;
  display: flex;
}

.page-description {
  color: var(--muted);
  margin: 0;
  font-size: 12px;
  line-height: 1.9;
}

.hero-panel {
  border-radius: var(--radius);
  background: #e9eddf;
  border: 1px solid #e2e8d7;
  grid-template-columns: 1fr 1.12fr;
  min-height: 340px;
  display: grid;
  overflow: hidden;
}

.hero-copy {
  z-index: 1;
  padding: 34px 35px 28px;
  position: relative;
}

.hero-kicker {
  letter-spacing: 1.5px;
  color: #718460;
  align-items: center;
  gap: 7px;
  margin-bottom: 17px;
  font-size: 9px;
  display: flex;
}

.hero-copy h2 {
  letter-spacing: -1px;
  color: #354632;
  margin-bottom: 12px;
  font-size: 31px;
  font-weight: 550;
  line-height: 1.5;
}

.hero-copy p {
  color: #859176;
  margin-bottom: 23px;
  font-size: 11px;
  line-height: 1.9;
}

.hero-footnote {
  color: #859176;
  margin-top: 12px;
  font-size: 9px;
  display: block;
}

.hero-composition {
  min-height: 340px;
  position: relative;
  overflow: hidden;
}

.composition-grid {
  background-image: linear-gradient(#7483600b 1px, #0000 1px), linear-gradient(90deg, #7483600b 1px, #0000 1px);
  background-size: 30px 30px;
  position: absolute;
  inset: 0;
  -webkit-mask-image: radial-gradient(#000, #0000 75%);
  mask-image: radial-gradient(#000, #0000 75%);
}

.floating-label {
  color: #919b82;
  letter-spacing: 2px;
  font-size: 8px;
  position: absolute;
}

.label-top {
  top: 29px;
  right: 30px;
}

.poster {
  border-radius: 4px;
  width: 171px;
  height: 258px;
  padding: 20px;
  position: absolute;
  overflow: hidden;
  box-shadow: 0 14px 25px #34422b19;
}

.poster-back {
  background: #eedace;
  top: 53px;
  right: 30px;
  transform: rotate(9deg);
}

.poster-back > span {
  color: #8b5f48;
  letter-spacing: -1.5px;
  font-size: 25px;
  font-weight: 700;
  line-height: .95;
}

.poster-back > small {
  letter-spacing: 1.1px;
  color: #9b7965;
  font-size: 5px;
  position: absolute;
  bottom: 13px;
  left: 14px;
}

.bottle {
  background: linear-gradient(95deg, #94683f, #d2a46e 30%, #d5ac7a 60%, #94623b);
  border-radius: 6px 6px 12px 12px;
  width: 57px;
  height: 112px;
  position: absolute;
  top: 112px;
  left: 60px;
  transform: rotate(-7deg);
  box-shadow: 8px 12px 13px #74502b24;
}

.bottle-cap {
  background: linear-gradient(90deg, #bfae8f, #e6dcc2, #c4b597);
  border-radius: 3px 3px 1px 1px;
  width: 46px;
  height: 23px;
  position: absolute;
  top: -20px;
  left: 5px;
}

.bottle > span {
  text-align: center;
  color: #795b3b;
  background: #f5e8c7;
  height: 69px;
  margin: 22px 5px 0;
  padding-top: 11px;
  font-size: 9px;
  line-height: 1.1;
  display: block;
}

.bottle small {
  letter-spacing: 1px;
  margin-top: 8px;
  font-size: 4px;
  display: block;
}

.poster-front {
  background: #faf4e4;
  top: 38px;
  left: 13px;
  transform: rotate(-7deg);
}

.poster-eyebrow {
  letter-spacing: 1.4px;
  color: #91926c;
  font-size: 5px;
}

.poster-front strong {
  color: #565c39;
  z-index: 1;
  margin-top: 13px;
  font-family: Georgia, serif;
  font-size: 36px;
  font-weight: 400;
  line-height: .95;
  display: block;
  position: relative;
}

.poster-front strong i {
  font-weight: 400;
}

.poster-front > small {
  color: #7d8262;
  letter-spacing: 1px;
  font-size: 5px;
  position: absolute;
  bottom: 14px;
}

.tote {
  background: linear-gradient(95deg, #c6bb8e, #e2d8af 35%, #d8ce9f 85%, #bfb383);
  border-radius: 3px 3px 15px 13px;
  width: 102px;
  height: 104px;
  position: absolute;
  bottom: 25px;
  right: 0;
  transform: rotate(-12deg);
  box-shadow: 5px 10px 18px #776d4b1f;
}

.tote:before {
  content: "";
  border: 7px solid #c8bd96;
  border-bottom: none;
  border-radius: 20px 20px 0 0;
  width: 42px;
  height: 61px;
  position: absolute;
  top: -46px;
  left: 27px;
}

.tote > span {
  text-align: center;
  color: #736c45;
  margin-top: 40px;
  font-family: Georgia, serif;
  font-size: 12px;
  display: block;
}

.creative-tag {
  color: #627151;
  background: #fffffff0;
  border: 1px solid #e0e5d8;
  border-radius: 8px;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  font-size: 9px;
  display: flex;
  position: absolute;
  bottom: 18px;
  right: 64px;
  transform: rotate(-2deg);
  box-shadow: 0 5px 16px #49533609;
}

.section-block {
  margin-top: 31px;
}

.workspace-pulse {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  padding: 22px;
}

.workspace-pulse .section-heading > div > .eyebrow {
  margin: 0 0 5px;
}

.overview-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

.overview-metric {
  border: 1px solid var(--border);
  border-radius: 10px;
  grid-template-columns: 1fr auto;
  align-content: space-between;
  gap: 5px 12px;
  min-height: 101px;
  padding: 15px 17px;
  display: grid;
}

.overview-metric > span {
  color: var(--muted);
  font-size: 11px;
}

.overview-metric > strong {
  letter-spacing: -1px;
  grid-area: 1 / 2 / span 2;
  align-self: center;
  font-size: 27px;
  font-weight: 550;
}

.overview-metric > small {
  color: var(--muted);
  font-size: 10px;
}

.workflow-progress {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 15px 0;
  display: grid;
}

.workflow-progress-step {
  background: var(--surface);
  border-radius: 9px;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 11px 12px;
  display: flex;
  position: relative;
}

.workflow-progress-icon, .workspace-empty > span {
  width: 34px;
  height: 34px;
  color: var(--green-dark);
  background: var(--sage);
  border-radius: 9px;
  flex: none;
  place-items: center;
  display: grid;
}

.workflow-progress-step > div {
  gap: 4px;
  min-width: 0;
  display: grid;
}

.workflow-progress-step strong {
  font-size: 10px;
  font-weight: 550;
}

.workflow-progress-step small {
  color: var(--muted);
  font-size: 9px;
}

.workflow-progress-line {
  z-index: 1;
  background: var(--border);
  width: 10px;
  height: 1px;
  position: absolute;
  right: -10px;
}

.todo-panel {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.todo-heading {
  border-bottom: 1px solid var(--border);
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 13px 15px;
  display: flex;
}

.todo-heading > div {
  align-items: center;
  gap: 8px;
  display: flex;
}

.todo-heading h3 {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
}

.todo-heading > span {
  color: var(--muted);
  font-size: 9px;
}

.todo-row {
  border-bottom: 1px solid var(--border);
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
  transition: background .15s;
  display: flex;
}

.todo-row:last-child {
  border-bottom: 0;
}

.todo-row:hover {
  background: var(--surface);
}

.todo-row > svg {
  color: var(--muted);
  flex: none;
}

.todo-step {
  width: 25px;
  height: 25px;
  color: var(--green-dark);
  background: var(--sage);
  border-radius: 50%;
  flex: none;
  place-items: center;
  font-size: 10px;
  display: grid;
}

.todo-copy {
  flex: 1;
  gap: 4px;
  min-width: 0;
  display: grid;
}

.todo-copy strong {
  font-size: 10px;
  font-weight: 600;
}

.todo-copy small {
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  overflow: hidden;
}

.todo-example {
  background: var(--surface);
  color: var(--muted);
  border-radius: 5px;
  flex: none;
  padding: 4px 6px;
  font-size: 9px;
}

.todo-complete {
  color: var(--green-dark);
  align-items: center;
  gap: 9px;
  padding: 15px;
  font-size: 10px;
  display: flex;
}

.todo-more {
  border-top: 1px solid var(--border);
  color: var(--muted);
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 11px;
  font-size: 10px;
  display: flex;
}

.overview-disclaimer {
  color: var(--muted);
  align-items: center;
  gap: 6px;
  margin: 13px 0 0;
  font-size: 9px;
  display: flex;
}

.workspace-empty {
  border: 1px dashed var(--border);
  border-radius: 10px;
  align-items: center;
  gap: 13px;
  padding: 16px;
  display: flex;
}

.workspace-empty > div {
  flex: 1;
}

.workspace-empty strong {
  font-size: 11px;
}

.workspace-empty p {
  color: var(--muted);
  margin: 5px 0 0;
  font-size: 10px;
  line-height: 1.7;
}

.workspace-empty .button {
  flex: none;
}

.section-heading {
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-bottom: 17px;
  display: flex;
}

.section-heading h2 {
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 15px;
  display: flex;
}

.subtle {
  color: #9a9f95;
  font-size: 10px;
}

.format-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
  display: grid;
}

.format-card {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 10px;
  align-items: center;
  gap: 13px;
  padding: 20px 17px;
  transition: border-color .15s, transform .15s, box-shadow .15s;
  display: flex;
}

.format-card:hover {
  border-color: #aab99d;
  transform: translateY(-2px);
}

.format-icon {
  border-radius: 10px;
  flex-shrink: 0;
  place-items: center;
  width: 43px;
  height: 43px;
  display: inline-grid;
}

.sage {
  color: #7b8f63;
  background: #edf2e5;
}

.peach {
  color: #b18b64;
  background: linen;
}

.lavender {
  color: #9b88b2;
  background: #f0ecf5;
}

.format-card h3 {
  margin: 0 0 7px;
  font-size: 12px;
}

.format-card p {
  color: #92988b;
  margin: 0;
  font-size: 9px;
  line-height: 1.6;
}

.format-card > svg {
  color: #a8afa0;
  flex-shrink: 0;
  margin-left: auto;
}

.text-link {
  color: #7f8c70;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  display: flex;
}

.count {
  color: #8b9481;
  background: #eef0e9;
  border-radius: 5px;
  padding: 3px 7px;
  font-size: 10px;
  font-weight: 400;
}

.project-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  display: grid;
}

.project-card {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 11px;
  min-width: 0;
  transition: border-color .15s, transform .15s;
  overflow: hidden;
}

.project-card:hover {
  border-color: #b6c0aa;
  transform: translateY(-2px);
}

.project-art {
  place-items: center;
  height: 164px;
  display: grid;
  position: relative;
  overflow: hidden;
}

.art-sand {
  color: #9a8f6c;
  background: #eee7d8;
}

.art-rose {
  color: #b58e78;
  background: #f0e2da;
}

.art-sage {
  color: #849875;
  background: #e4ecdf;
}

.art-label {
  color: #7e806f;
  background: #ffffff8a;
  border-radius: 4px;
  padding: 5px 7px;
  font-size: 8px;
  position: absolute;
  top: 13px;
  left: 13px;
}

.art-orbit {
  border: 1px solid #ffffff70;
  border-radius: 50%;
  width: 180px;
  height: 180px;
  position: absolute;
  transform: translate(45px, 38px);
}

.product-line {
  filter: drop-shadow(6px 10px 7px #4a3b2514);
  transform: rotate(-9deg);
}

.art-category {
  letter-spacing: 1.4px;
  opacity: .7;
  font-size: 7px;
  position: absolute;
  bottom: 12px;
  left: 14px;
}

.project-arrow {
  background: #ffffff8c;
  border-radius: 50%;
  place-items: center;
  width: 26px;
  height: 26px;
  display: grid;
  position: absolute;
  bottom: 11px;
  right: 12px;
}

.project-card-body {
  padding: 16px;
}

.project-card-meta {
  color: #9a9e93;
  justify-content: space-between;
  margin-bottom: 11px;
  font-size: 9px;
  display: flex;
}

.status-dot {
  align-items: center;
  gap: 4px;
  display: flex;
}

.status-dot:before {
  content: "";
  background: #b99a62;
  border-radius: 50%;
  width: 4px;
  height: 4px;
}

.status-dot.status-ready {
  color: #66816a;
}

.status-dot.status-ready:before {
  background: #66816a;
}

.project-card h3 {
  overflow-wrap: anywhere;
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.6;
}

.project-card p {
  color: #a0a395;
  overflow-wrap: anywhere;
  margin: 0;
  font-size: 9px;
}

.new-project-card {
  text-align: center;
  background: #fafbf7;
  border: 1px dashed #d8dfcd;
  border-radius: 11px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 263px;
  display: flex;
}

.new-project-card:hover {
  background: #f0f4e9;
}

.new-project-card > span {
  color: #8d9c77;
  background: #eff2e9;
  border-radius: 50%;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 15px;
  display: grid;
}

.new-project-card h3 {
  color: #7f8a70;
  margin-bottom: 9px;
  font-size: 12px;
  font-weight: 500;
}

.new-project-card p {
  color: #a9b09f;
  font-size: 10px;
}

.app-footer {
  color: #a3a99a;
  justify-content: space-between;
  gap: 15px;
  padding: 16px 42px 23px;
  font-size: 9px;
  display: flex;
}

.narrow-container {
  max-width: 1040px;
}

.back-link {
  color: #7a8b70;
  align-items: center;
  gap: 7px;
  margin-bottom: 27px;
  font-size: 11px;
  display: inline-flex;
}

.stepper {
  gap: 40px;
  margin: 0 0 25px;
  padding: 0;
  list-style: none;
  display: flex;
}

.stepper li {
  color: #9ba391;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  display: flex;
}

.stepper li > span {
  background: #edf0e7;
  border-radius: 50%;
  place-items: center;
  width: 25px;
  height: 25px;
  font-size: 11px;
  display: grid;
}

.stepper .current, .stepper .complete {
  color: var(--green);
}

.stepper .current > span, .stepper .complete > span {
  background: var(--green);
  color: #fff;
}

.form-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  padding: 29px;
}

.form-panel h2 {
  margin-bottom: 20px;
  font-size: 17px;
}

.format-choices {
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 28px;
  display: grid;
}

.format-choice {
  border: 1px solid var(--border);
  color: #7b8474;
  background: #fff;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  min-height: 65px;
  font-size: 12px;
  display: flex;
}

.format-choice.selected {
  color: #46603a;
  background: #f0f5e9;
  border-color: #799366;
}

.field {
  min-width: 0;
  margin-bottom: 21px;
}

.field label {
  margin-bottom: 9px;
  font-size: 12px;
  font-weight: 500;
  display: block;
}

.optional-label {
  color: #9ca591;
  margin-left: 5px;
  font-size: 10px;
  font-weight: 400;
}

.field input, .field select, .field textarea {
  width: 100%;
  color: var(--ink);
  background: #fdfefb;
  border: 1px solid #dfe5d7;
  border-radius: 7px;
  padding: 11px 12px;
  font-size: 12px;
  line-height: 1.6;
}

.field input::placeholder, .field textarea::placeholder {
  color: #a3aa9a;
}

.field small {
  color: #969f8d;
  margin-top: 7px;
  font-size: 10px;
  line-height: 1.7;
  display: block;
}

.field textarea {
  resize: vertical;
  min-height: 100px;
}

.field-row {
  grid-template-columns: 1fr 1fr;
  gap: 19px;
  display: grid;
}

.form-actions {
  border-top: 1px solid var(--border);
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding-top: 23px;
  display: flex;
}

.panel-description {
  color: #8a957d;
  margin-bottom: 22px;
  font-size: 12px;
  line-height: 1.9;
}

.review-list {
  margin: 0 0 25px;
}

.review-list > div {
  border-bottom: 1px solid #edf0e7;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 0;
  display: grid;
}

.review-list dt {
  color: #929c87;
  font-size: 12px;
}

.review-list dd {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  margin: 0;
  font-size: 12px;
  line-height: 1.8;
}

.checkbox-field {
  align-items: flex-start;
  gap: 10px;
  margin: 24px 0;
  font-size: 12px;
  line-height: 1.8;
  display: flex;
}

.checkbox-field input {
  accent-color: var(--green);
  margin-top: 5px;
}

.notice {
  color: #7b8b6b;
  background: #f1f5eb;
  border-radius: 7px;
  padding: 13px 15px;
  font-size: 11px;
  line-height: 1.9;
}

.error-message {
  color: #a14f3c;
  background: #fff0eb;
  border-radius: 7px;
  padding: 13px 15px;
  font-size: 12px;
  line-height: 1.8;
}

.workflow-list {
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 0 0 20px;
  display: grid;
}

.workflow-step {
  border: 1px solid var(--border);
  color: #a3aa99;
  text-align: center;
  border-radius: 8px;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px 12px;
  font-size: 11px;
  display: flex;
}

.workflow-step.complete {
  color: #698251;
  background: #f5f8ef;
  border-color: #cad8bd;
}

.form-panel > .notice {
  margin-bottom: 27px;
}

.planned-panel {
  padding: 35px;
}

.module-card-heading {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 23px;
  display: flex;
}

.module-card-heading .format-icon {
  margin: 0;
}

.planned-panel h2 {
  margin-bottom: 10px;
}

.workspace-pulse .section-heading {
  margin-bottom: 18px;
}

.workspace-pulse .section-heading h2 {
  font-size: 18px;
}

.planned-panel .panel-description {
  max-width: 660px;
}

.planned-list {
  color: #77856a;
  margin-bottom: 28px;
  padding-left: 20px;
  font-size: 12px;
  line-height: 2.1;
}

.planned-list li {
  margin: 8px 0;
  padding-left: 4px;
}

@media (min-width: 1450px) {
  .hero-panel {
    grid-template-columns: 1fr 1fr;
  }

  .hero-composition {
    max-width: 500px;
  }

  .poster-front {
    left: 65px;
  }

  .poster-back {
    right: 56px;
  }
}

@media (max-width: 1150px) {
  .sidebar {
    width: 204px;
    padding-inline: 15px;
  }

  .main-shell {
    width: calc(100% - 204px);
    margin-left: 204px;
  }

  .page-container {
    padding: 30px 28px;
  }

  .topbar, .app-footer {
    padding-inline: 28px;
  }

  .format-card {
    gap: 9px;
    padding: 15px 12px;
  }

  .format-card > svg {
    display: none;
  }

  .format-icon {
    width: 35px;
    height: 35px;
  }

  .hero-copy {
    padding: 30px 25px;
  }

  .hero-copy h2 {
    font-size: 28px;
  }

  .poster {
    width: 145px;
    height: 239px;
  }

  .poster-front {
    top: 49px;
    left: 2px;
  }

  .poster-back {
    top: 60px;
    right: 9px;
  }

  .hero-composition {
    min-height: 340px;
  }
}

@media (max-width: 900px) {
  .hero-panel {
    grid-template-columns: 1fr 1fr;
  }

  .hero-composition .poster-back {
    display: none;
  }

  .hero-composition .poster-front {
    left: 30px;
  }

  .creative-tag {
    bottom: 23px;
    right: 13px;
  }

  .format-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .format-card > svg {
    display: block;
  }

  .format-card p {
    font-size: 11px;
  }

  .format-card h3 {
    font-size: 13px;
  }

  .project-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-footer {
    flex-direction: column;
    gap: 7px;
  }

  .workflow-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .sidebar-note {
    padding-top: 20px;
  }

  .workflow-progress-step {
    gap: 7px;
    padding: 10px 8px;
  }

  .workflow-progress-icon {
    width: 30px;
    height: 30px;
  }
}

@media (max-width: 680px) {
  .app-shell {
    display: block;
  }

  .sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--border);
    width: 100%;
    padding: 17px 20px 11px;
    display: block;
    position: relative;
  }

  .wordmark {
    width: max-content;
    padding: 0;
    font-size: 25px;
  }

  .workspace-switch, .sidebar-note, .sidebar-user, .nav-caption {
    display: none;
  }

  .sidebar-create {
    width: auto;
    min-height: 35px;
    padding: 8px 12px;
    position: absolute;
    top: 16px;
    right: 20px;
  }

  .sidebar nav {
    gap: 5px;
    margin-top: 18px;
    display: flex;
    overflow-x: auto;
  }

  .nav-link {
    flex-shrink: 0;
    gap: 6px;
    min-height: 36px;
    margin: 0;
    padding: 9px;
    font-size: 10px;
  }

  .nav-link svg {
    width: 14px;
    height: 14px;
  }

  .main-shell {
    width: 100%;
    margin-left: 0;
  }

  .topbar {
    min-height: 45px;
    padding: 0 20px;
    font-size: 9px;
  }

  .preview-badge {
    font-size: 8px;
  }

  .page-container {
    padding: 25px 20px;
  }

  .workspace-pulse {
    padding: 16px 13px;
  }

  .overview-metrics {
    gap: 7px;
  }

  .overview-metric {
    gap: 4px;
    min-height: 89px;
    padding: 11px 9px;
  }

  .overview-metric > span, .overview-metric > small {
    font-size: 8px;
  }

  .overview-metric > strong {
    font-size: 22px;
  }

  .workflow-progress {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin: 10px 0;
  }

  .workflow-progress-step {
    gap: 8px;
    padding: 9px;
  }

  .workflow-progress-line {
    display: none;
  }

  .todo-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    padding: 11px;
  }

  .todo-row {
    gap: 8px;
    padding: 11px 9px;
  }

  .todo-copy small {
    max-width: 50vw;
  }

  .todo-example {
    display: none;
  }

  .overview-disclaimer {
    align-items: flex-start;
    line-height: 1.7;
  }

  .workspace-empty {
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 12px;
  }

  .workspace-empty .button {
    margin-left: 47px;
  }

  h1 {
    font-size: 25px;
  }

  .page-heading {
    margin-bottom: 24px;
  }

  .page-heading > .button {
    display: none;
  }

  .hero-panel {
    min-height: 0;
    display: block;
    position: relative;
  }

  .hero-copy {
    padding: 26px 23px;
  }

  .hero-copy h2 {
    font-size: 27px;
  }

  .hero-composition {
    opacity: .32;
    pointer-events: none;
    min-height: 0;
    position: absolute;
    inset: 0 0 0 45%;
  }

  .hero-composition .poster-front {
    top: 55px;
    left: 5px;
  }

  .hero-copy {
    z-index: 2;
  }

  .hero-copy p {
    color: #6f805f;
  }

  .hero-footnote {
    max-width: 210px;
  }

  .creative-tag, .label-top {
    display: none;
  }

  .hero-copy .button {
    position: relative;
  }

  .section-heading > .subtle {
    display: none;
  }

  .project-grid {
    gap: 13px;
  }

  .project-art {
    height: 140px;
  }

  .project-card-body {
    padding: 12px;
  }

  .project-card h3 {
    font-size: 11px;
  }

  .new-project-card {
    min-height: 245px;
    padding: 12px;
  }

  .new-project-card p {
    font-size: 9px;
    line-height: 1.8;
  }

  .app-footer {
    padding: 12px 20px 23px;
    font-size: 8px;
  }

  .form-panel {
    padding: 22px 18px;
  }

  .format-choices {
    gap: 7px;
  }

  .format-choice {
    flex-direction: column;
    gap: 7px;
    padding: 10px 4px;
    font-size: 11px;
  }

  .field-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .review-list > div {
    grid-template-columns: 78px minmax(0, 1fr);
  }

  .form-actions {
    flex-wrap: wrap;
    align-items: flex-end;
  }

  .form-actions > .button {
    margin-left: auto;
  }

  .form-actions > .button-secondary {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .button, .format-card, .project-card {
    transition: none;
  }
}

/* [project]/src/app/studio.css [app-client] (css) */
.studio-container {
  max-width: 1390px;
}

.studio-heading {
  margin-bottom: 22px;
}

.studio-context {
  color: #64745c;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 23px;
  margin-bottom: 25px;
  font-size: 11px;
  display: flex;
}

.studio-context > span {
  align-items: center;
  gap: 7px;
  display: flex;
}

.studio-context .context-note {
  color: #8f9886;
  margin-left: auto;
}

.studio-tabs {
  border-bottom: 1px solid #dfe5d8;
  gap: 8px;
  margin-bottom: 25px;
  display: flex;
  overflow-x: auto;
}

.studio-tabs button {
  color: #8a9480;
  background: none;
  border: 0;
  border-bottom: 2px solid #0000;
  flex-shrink: 0;
  align-items: center;
  gap: 9px;
  padding: 15px 19px;
  font-size: 12px;
  display: flex;
}

.studio-tabs button[aria-pressed="true"] {
  color: #38593f;
  border-bottom-color: #54744c;
  font-weight: 600;
}

.tab-index {
  opacity: .65;
  font-size: 10px;
}

.studio-panel {
  padding: 28px;
  transition: border-color .15s, box-shadow .15s;
}

.panel-heading {
  justify-content: space-between;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 24px;
  display: flex;
}

.panel-heading h2 {
  margin: 0 0 9px;
  font-size: 18px;
}

.panel-heading p {
  color: #87947c;
  margin: 0;
  font-size: 12px;
  line-height: 1.8;
}

.pill {
  color: #7c8771;
  background: #f0f2ec;
  border-radius: 5px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: max-content;
  padding: 5px 8px;
  font-size: 10px;
  line-height: 1.4;
  display: inline-flex;
}

.pill-approved {
  color: #4c6c42;
  background: #eaf2e5;
}

.pill-pending {
  color: #987b44;
  background: #f7f1e3;
}

.pill-rejected {
  color: #ac6752;
  background: #faede8;
}

.action-group {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  display: flex;
}

.success-message {
  color: #4e7045;
  background: #eef5e8;
  border: 1px solid #e1ebd8;
  border-radius: 8px;
  padding: 12px 15px;
  font-size: 12px;
  line-height: 1.8;
}

.studio-panel .field label {
  font-size: 13px;
}

.studio-panel .form-actions .subtle {
  max-width: 45%;
  line-height: 1.8;
}

.studio-bottom {
  color: #939d87;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-top: 23px;
  font-size: 11px;
  display: flex;
}

.text-button {
  color: #567249;
  cursor: pointer;
  background: none;
  border: 0;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  gap: 7px;
  padding: 8px 0;
  font-size: 12px;
  display: inline-flex;
}

.upload-zone {
  text-align: center;
  color: #7f956a;
  cursor: pointer;
  background: #f7f9f2;
  border: 1px dashed #c6d2b8;
  border-radius: 11px;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  padding: 34px 20px;
  display: flex;
  position: relative;
}

.upload-zone strong {
  color: #617752;
  font-size: 14px;
  font-weight: 500;
}

.upload-zone > span {
  color: #929e85;
  font-size: 11px;
  line-height: 1.8;
}

.upload-zone input {
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.upload-zone:focus-within {
  outline-offset: 4px;
  outline: 3px solid #9ab18a;
}

.upload-zone:hover {
  background: #f1f5e9;
}

.upload-zone.is-disabled {
  opacity: .65;
  cursor: wait;
}

.helper-copy {
  color: #8d9881;
  margin: 13px 0 23px;
  font-size: 11px;
  line-height: 1.9;
}

.asset-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 23px;
  display: grid;
}

.asset-card {
  background: #fff;
  border: 1px solid #e5eadd;
  border-radius: 10px;
  min-width: 0;
  transition: border-color .15s, transform .15s, box-shadow .15s;
  overflow: hidden;
}

.asset-card:hover {
  transform: translateY(-2px);
}

.asset-preview {
  background: #f3f4ee;
  border: 0;
  width: 100%;
  height: 200px;
  padding: 0;
  display: block;
  position: relative;
  overflow: hidden;
}

.asset-preview img {
  object-fit: contain;
  width: 100%;
  height: 100%;
  padding: 9px;
}

.asset-preview > span:not(.image-loading) {
  color: #6c7d5e;
  background: #fffd;
  border-radius: 6px;
  place-items: center;
  width: 28px;
  height: 28px;
  display: grid;
  position: absolute;
  bottom: 12px;
  right: 12px;
}

.asset-preview:hover {
  background: #ecefe5;
}

.asset-card-body {
  padding: 15px;
}

.asset-title-row {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  display: flex;
}

.asset-title-row h3 {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  margin: 0;
  font-size: 12px;
  overflow: hidden;
}

.asset-card-body > p {
  color: #949c8a;
  overflow-wrap: anywhere;
  margin: 9px 0 12px;
  font-size: 10px;
  line-height: 1.8;
}

.asset-actions {
  border-top: 1px solid #edf0e8;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  padding-top: 12px;
  display: flex;
}

.small-button {
  color: #6c8059;
  background: #fafcf7;
  border: 1px solid #e2e8d9;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 7px 8px;
  font-size: 10px;
  display: inline-flex;
}

.small-button:hover {
  background: #eff4e8;
}

.icon-button {
  color: #8c9980;
  background: none;
  border: 1px solid #0000;
  border-radius: 5px;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 5px;
  display: inline-grid;
}

.icon-button:hover {
  background: #f6f8f1;
  border-color: #e0e6d8;
}

.danger {
  color: #ae6d59;
}

.inline-confirm {
  background: #fff8ef;
  border-radius: 6px;
  margin-top: 12px;
  padding: 12px;
}

.inline-confirm p {
  color: #9b8060;
  margin-bottom: 10px;
  font-size: 11px;
  line-height: 1.8;
}

.image-dialog {
  width: min(900px, 90vw);
  max-height: 90vh;
  color: var(--ink);
  border: 1px solid #e0e5d8;
  border-radius: 12px;
  padding: 20px;
  overflow: auto;
}

.image-dialog::backdrop {
  background: #17251ad4;
}

.dialog-heading {
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  display: flex;
}

.dialog-heading h2 {
  overflow-wrap: anywhere;
  margin: 0;
  font-size: 14px;
}

.image-dialog > img {
  object-fit: contain;
  background: #f4f6ef;
  width: 100%;
  max-height: 65vh;
  margin-top: 16px;
}

.image-dialog > p {
  color: #8a967e;
  margin: 12px 0 0;
  font-size: 11px;
}

.image-loading {
  color: #9ba68e;
  place-items: center;
  height: 100%;
  font-size: 11px;
  display: grid;
}

.studio-empty {
  text-align: center;
  color: #99a78c;
  background: #fbfcf8;
  border: 1px dashed #e0e6d7;
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 13px;
  min-height: 210px;
  margin-top: 20px;
  padding: 35px 20px;
  display: flex;
}

.studio-empty h2, .studio-empty h3 {
  color: #7b8e6c;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
}

.studio-empty p {
  color: #97a18d;
  max-width: 430px;
  margin: 0;
  font-size: 12px;
  line-height: 1.9;
}

.creative-toolbar {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  display: flex;
}

.creative-history {
  background: #fafbf9;
  border: 1px solid #e2e6df;
  border-radius: 10px;
  margin: 0 0 22px;
  overflow: hidden;
}

.creative-history > summary {
  color: #56635a;
  cursor: pointer;
  align-items: center;
  gap: 9px;
  padding: 13px 15px;
  font-size: 12px;
  list-style: none;
  display: flex;
}

.creative-history > summary::-webkit-details-marker {
  display: none;
}

.creative-history > summary span {
  color: #89918b;
  margin-left: auto;
  font-size: 10px;
}

.creative-history[open] > summary {
  border-bottom: 1px solid #e2e6df;
}

.version-history-layout {
  grid-template-columns: minmax(190px, .75fr) minmax(0, 1.25fr);
  gap: 20px;
  padding: 16px;
  display: grid;
}

.version-list {
  align-content: start;
  gap: 7px;
  display: grid;
}

.version-option {
  color: #303832;
  text-align: left;
  background: none;
  border: 1px solid #0000;
  border-radius: 8px;
  gap: 5px;
  width: 100%;
  padding: 11px 12px;
  display: grid;
}

.version-option[aria-pressed="true"] {
  background: #f0f3f0;
  border-color: #dce2dc;
}

.version-option strong {
  font-size: 11px;
}

.version-option span, .version-option small {
  color: #78817a;
  font-size: 10px;
}

.version-comparison {
  background: #fff;
  border: 1px solid #e2e6df;
  border-radius: 9px;
  padding: 17px 18px;
}

.version-comparison .eyebrow {
  margin-bottom: 6px;
  display: block;
}

.version-comparison h3 {
  margin: 0;
}

.version-comparison ul {
  flex-wrap: wrap;
  gap: 7px;
  margin: 16px 0 12px;
  padding: 0;
  list-style: none;
  display: flex;
}

.version-comparison li {
  color: #606b63;
  background: #f5f7f5;
  border: 1px solid #e2e6df;
  border-radius: 6px;
  padding: 6px 9px;
  font-size: 10px;
}

.version-comparison p, .empty-history {
  color: #7e8780;
  font-size: 11px;
  line-height: 1.8;
}

.empty-history {
  margin: 0;
  padding: 14px 16px;
}

.segmented-control {
  background: #f0f3ea;
  border: 0;
  border-radius: 8px;
  gap: 3px;
  min-width: 0;
  margin: 0;
  padding: 4px;
  display: inline-flex;
}

.segmented-control button {
  color: #93a084;
  background: none;
  border: 0;
  border-radius: 5px;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  font-size: 11px;
  display: flex;
}

.segmented-control button[aria-pressed="true"] {
  color: #58744a;
  background: #fff;
  box-shadow: 0 1px 5px #3851230c;
}

.storyboard-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  display: grid;
}

.script-list {
  flex-direction: column;
  gap: 16px;
  display: flex;
}

.shot-card {
  background: #fdfefb;
  border: 1px solid #e4e9dc;
  border-radius: 10px;
  min-width: 0;
  overflow: hidden;
}

.shot-body {
  padding: 22px;
}

.shot-heading {
  border-bottom: 1px solid #e8ecdf;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  display: flex;
}

.shot-heading > strong {
  overflow-wrap: anywhere;
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
}

.shot-heading .action-group {
  flex-shrink: 0;
  gap: 2px;
  margin-left: auto;
}

.shot-number {
  color: #869974;
  background: #edf2e6;
  border-radius: 6px;
  flex-shrink: 0;
  place-items: center;
  width: 27px;
  height: 27px;
  font-size: 10px;
  display: grid;
}

.shot-fields {
  grid-template-columns: minmax(0, 1fr) 125px;
  gap: 15px;
  display: grid;
}

.shot-body .field:last-child {
  margin-bottom: 0;
}

.shot-body .field label {
  color: #8c997e;
  font-size: 11px;
}

.shot-body .field input, .shot-body .field textarea, .shot-body .field select {
  background: #fff;
  font-size: 12px;
}

.shot-body .field textarea {
  min-height: 70px;
}

.shot-reference {
  background: #f1f3e9;
  height: 220px;
  position: relative;
  overflow: hidden;
}

.shot-reference img {
  object-fit: contain;
  width: 100%;
  height: 100%;
  padding: 12px;
}

.shot-time {
  color: #76876a;
  background: #ffffffdf;
  border-radius: 5px;
  padding: 6px 8px;
  font-size: 10px;
  position: absolute;
  bottom: 12px;
  left: 12px;
}

.shot-no-reference {
  color: #a2af93;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
  height: 100%;
  font-size: 12px;
  display: flex;
}

.add-shot {
  color: #82966e;
  background: #f8faf3;
  border: 1px dashed #d6e0c9;
  border-radius: 8px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 9px;
  width: 100%;
  margin: 18px 0 25px;
  padding: 17px;
  font-size: 12px;
  display: flex;
}

.add-shot > span {
  opacity: .75;
  margin-left: 10px;
  font-size: 10px;
}

.script-summary {
  color: #77896a;
  background: #f8faf4;
  border: 1px solid #e8ecdf;
  border-radius: 8px;
  margin-bottom: 23px;
  padding: 15px;
  font-size: 12px;
}

.script-summary summary {
  cursor: pointer;
}

.script-summary p {
  white-space: pre-wrap;
  color: #6d7a60;
  margin: 18px 0 0;
  font-size: 13px;
  line-height: 2;
}

.generation-layout {
  grid-template-columns: 1.05fr 1fr;
  align-items: start;
  gap: 22px;
  display: grid;
}

.generation-summary {
  border-block: 1px solid #edf0e7;
  align-items: center;
  gap: 14px;
  padding: 20px 0;
  display: flex;
}

.generation-summary h3 {
  margin-bottom: 8px;
  font-size: 13px;
}

.generation-summary p {
  color: #939f86;
  margin: 0;
  font-size: 11px;
}

.quote-summary {
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 15px;
  margin: 23px 0;
  display: flex;
}

.quote-summary dt {
  color: #a1aa97;
  margin-bottom: 9px;
  font-size: 10px;
}

.quote-summary dd {
  color: #627653;
  margin: 0;
  font-size: 12px;
}

.prerequisite {
  color: #a58b59;
  background: #faf4e8;
  border-radius: 7px;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 23px;
  padding: 15px;
  display: flex;
}

.prerequisite p {
  flex: 1;
  margin: 0;
  font-size: 11px;
  line-height: 1.9;
}

.prerequisite .small-button {
  background: #fffaf1;
  border-color: #eae0c8;
  width: 100%;
}

.task-list {
  flex-direction: column;
  gap: 15px;
  display: flex;
}

.task-card {
  background: #fbfcf9;
  border: 1px solid #e5eadc;
  border-radius: 9px;
  padding: 18px;
}

.task-title {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}

.task-title strong {
  font-size: 13px;
  font-weight: 500;
}

.task-card > p {
  color: #939f87;
  margin: 12px 0;
  font-size: 11px;
  line-height: 1.8;
}

.task-progress {
  background: #e8edde;
  border-radius: 5px;
  height: 5px;
  margin-top: 18px;
  overflow: hidden;
}

.task-progress > span {
  background: #88a26b;
  border-radius: 5px;
  height: 100%;
  display: block;
}

.task-card .task-note {
  align-items: center;
  gap: 7px;
  font-size: 10px;
  display: flex;
}

.task-card .task-outdated {
  color: #a38a59;
  background: #f8efdf;
  border-radius: 5px;
  padding: 8px 10px;
  font-size: 10px;
}

.task-footer {
  border-top: 1px solid #e9eddf;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  display: flex;
}

.task-footer code {
  color: #9ba78f;
  font-size: 10px;
}

.library-toolbar {
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin: 0 0 23px;
  display: flex;
}

.library-toolbar > span {
  color: #96a089;
  flex-shrink: 0;
  font-size: 11px;
}

.search-field {
  color: #a1ac94;
  background: #fff;
  border: 1px solid #e3e8db;
  border-radius: 8px;
  align-items: center;
  gap: 10px;
  width: min(420px, 100%);
  padding: 11px 13px;
  display: flex;
}

.search-input {
  color: #53654a;
  outline-offset: 8px;
  background: none;
  border: 0;
  width: 100%;
  min-width: 0;
  font-size: 12px;
}

.catalog-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  display: grid;
}

.catalog-card {
  background: #fff;
  border: 1px solid #e2e8da;
  border-radius: 12px;
  align-items: flex-start;
  gap: 16px;
  padding: 22px;
  transition: border-color .15s, transform .15s, box-shadow .15s;
  display: flex;
}

.catalog-card:hover {
  border-color: #aabb98;
  transform: translateY(-2px);
}

.catalog-card-main {
  flex: 1;
  min-width: 0;
}

.catalog-meta {
  color: #9aa58c;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 17px;
  font-size: 10px;
  display: flex;
}

.catalog-card h2 {
  overflow-wrap: anywhere;
  margin: 0 0 9px;
  font-size: 14px;
  line-height: 1.8;
}

.catalog-card p {
  color: #88977a;
  margin: 0 0 12px;
  font-size: 11px;
}

.catalog-card small {
  color: #a2ac97;
  overflow-wrap: anywhere;
  font-size: 10px;
}

.catalog-card > svg {
  color: #a0ad93;
  flex-shrink: 0;
  margin-top: 4px;
}

.library-image {
  height: 220px;
}

@media (max-width: 1150px) {
  .asset-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .studio-panel {
    padding: 23px;
  }

  .studio-tabs button {
    padding-inline: 13px;
  }

  .generation-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .storyboard-grid, .catalog-grid {
    grid-template-columns: 1fr;
  }

  .studio-tabs {
    gap: 0;
  }

  .studio-tabs button {
    gap: 6px;
    padding: 14px 12px;
    font-size: 11px;
  }

  .tab-index {
    display: none;
  }

  .studio-context .context-note {
    width: 100%;
    margin-left: 0;
  }

  .studio-panel .form-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .studio-panel .form-actions .subtle {
    max-width: 100%;
  }

  .studio-panel .form-actions .action-group {
    justify-content: flex-end;
  }
}

@media (max-width: 680px) {
  .studio-heading > .button {
    padding: 9px;
    font-size: 10px;
    display: inline-flex;
  }

  .studio-heading {
    align-items: flex-start;
  }

  .studio-heading h1 {
    font-size: 22px;
  }

  .studio-tabs button {
    padding: 12px 9px;
    font-size: 10px;
  }

  .studio-tabs button svg {
    width: 14px;
  }

  .studio-context {
    gap: 12px;
    font-size: 10px;
  }

  .studio-panel {
    padding: 21px 17px;
  }

  .panel-heading h2 {
    font-size: 16px;
    line-height: 1.6;
  }

  .panel-heading p {
    font-size: 11px;
  }

  .asset-grid {
    grid-template-columns: 1fr;
  }

  .asset-preview {
    height: 230px;
  }

  .studio-bottom {
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
  }

  .studio-bottom > span {
    align-self: flex-start;
    font-size: 10px;
  }

  .creative-toolbar {
    align-items: stretch;
  }

  .creative-toolbar > .button, .segmented-control {
    width: 100%;
  }

  .segmented-control button {
    flex: 1;
    justify-content: center;
  }

  .shot-body {
    padding: 17px 14px;
  }

  .shot-heading {
    gap: 7px;
  }

  .shot-fields {
    grid-template-columns: minmax(0, 1fr) 100px;
    gap: 10px;
  }

  .shot-heading > strong {
    font-size: 12px;
  }

  .shot-heading .icon-button {
    width: 25px;
  }

  .shot-number {
    width: 23px;
    height: 23px;
  }

  .shot-reference {
    height: 210px;
  }

  .library-toolbar {
    flex-wrap: wrap;
  }

  .search-field {
    width: 100%;
  }

  .catalog-card {
    gap: 11px;
    padding: 18px 15px;
  }

  .catalog-card > .format-icon {
    width: 30px;
    height: 30px;
  }

  .catalog-card h2 {
    font-size: 13px;
  }

  .task-card {
    padding: 15px;
  }

  .generation-summary {
    gap: 10px;
  }

  .generation-summary h3, .generation-summary p {
    line-height: 1.8;
  }
}

.preview-layout {
  grid-template-columns: minmax(260px, .95fr) minmax(320px, 1fr);
  align-items: start;
  gap: 34px;
  display: grid;
}

.preview-stage-column {
  width: 100%;
  min-width: 0;
  max-width: 510px;
  margin: 0 auto;
}

.preview-stage-wrap {
  background: radial-gradient(#edf0e8, #e4e8df 72%);
  border-radius: 15px;
  justify-content: center;
  align-items: center;
  min-height: 530px;
  padding: 20px;
  display: flex;
}

.ad-preview-stage {
  isolation: isolate;
  aspect-ratio: 9 / 16;
  color: #fff;
  background: linear-gradient(150deg, #e8e8dd, #c9d0bc 52%, #8c9c7e);
  border-radius: 14px;
  justify-content: center;
  align-items: center;
  width: min(100%, 310px);
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 40px #33412b2b;
}

.ad-preview-stage.aspect-1-1 {
  aspect-ratio: 1;
  width: min(100%, 390px);
}

.ad-preview-stage.aspect-4-5 {
  aspect-ratio: 4 / 5;
  width: min(100%, 340px);
}

.ad-preview-image {
  z-index: -2;
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.ad-preview-shade {
  z-index: -1;
  background: linear-gradient(#10190b66, #0000 26% 48%, #10190b9c 100%);
  position: absolute;
  inset: 0;
}

.ad-preview-placeholder {
  text-align: center;
  color: #374530;
  flex-direction: column;
  align-items: center;
  padding: 28px;
  display: flex;
}

.ad-preview-placeholder > span {
  color: #6b795f;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 10px;
}

.ad-preview-placeholder strong {
  margin: 15px 0 6px;
  font-size: 23px;
}

.ad-preview-placeholder p, .ad-preview-placeholder small {
  font-size: 11px;
  line-height: 1.8;
}

.ad-preview-placeholder small {
  color: #6b795f;
  margin-top: 18px;
}

.ad-preview-logo, .ad-preview-subtitle, .ad-preview-cta, .ad-preview-demo-tag {
  z-index: 1;
  text-shadow: 0 1px 5px #0008;
  position: absolute;
}

.ad-preview-logo {
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: calc(100% - 36px);
  font-size: 12px;
  font-weight: 650;
  top: 22px;
  left: 18px;
  overflow: hidden;
}

.ad-preview-brand-logo {
  z-index: 1;
  object-fit: contain;
  background: #fff;
  border-radius: 6px;
  width: auto;
  max-width: calc(100% - 32px);
  height: 34px;
  padding: 4px 7px;
  position: absolute;
  top: 17px;
  left: 16px;
}

.ad-preview-subtitle {
  text-align: center;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.55;
  bottom: 64px;
  left: 14px;
  right: 14px;
}

.ad-preview-cta {
  color: #38563a;
  text-align: center;
  min-width: 112px;
  text-shadow: none;
  background: #f7f6ed;
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 11px;
  font-weight: 650;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.ad-preview-demo-tag {
  color: #ffffffb8;
  font-size: 8px;
  bottom: 8px;
  right: 10px;
}

.preview-playback {
  color: #788371;
  align-items: center;
  gap: 10px;
  padding: 13px 3px;
  font-size: 10px;
  display: flex;
}

.preview-playback input[type="range"] {
  accent-color: #59724d;
  flex: 1;
  min-width: 50px;
}

.preview-shot-strip {
  border: 0;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding-bottom: 7px;
  display: flex;
  overflow-x: auto;
}

.preview-shot-strip button {
  color: #66705f;
  cursor: pointer;
  text-align: left;
  background: #fbfcf8;
  border: 1px solid #e2e6dc;
  border-radius: 8px;
  grid-template-columns: 1fr auto;
  gap: 5px;
  min-width: 112px;
  padding: 10px;
  display: grid;
}

.preview-shot-strip button[aria-pressed="true"] {
  background: #f0f4eb;
  border-color: #829677;
}

.preview-shot-strip button span, .preview-shot-strip button small {
  color: #8c9683;
  font-size: 9px;
}

.preview-shot-strip button strong {
  grid-column: 1 / -1;
  font-size: 10px;
  font-weight: 550;
}

.preview-controls {
  flex-direction: column;
  gap: 23px;
  display: flex;
}

.preview-setting-group {
  border: 0;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 0;
  display: flex;
}

.preview-setting-group legend {
  color: #34432f;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 650;
}

.preview-aspect-options {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  display: grid;
}

.preview-aspect-options button {
  color: #687362;
  cursor: pointer;
  background: #fbfcf8;
  border: 1px solid #e1e6dc;
  border-radius: 8px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 76px;
  font-size: 10px;
  display: flex;
}

.preview-aspect-options button[aria-pressed="true"] {
  color: #3f5c3c;
  background: #f1f5ed;
  border-color: #839777;
}

.aspect-icon {
  border: 1.5px solid;
  border-radius: 3px;
  width: 17px;
  height: 27px;
  display: block;
}

.aspect-icon-1-1 {
  width: 22px;
  height: 22px;
}

.aspect-icon-4-5 {
  width: 20px;
  height: 25px;
}

.preview-toggle {
  color: #596451;
  cursor: pointer;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  display: flex;
}

.studio-panel .preview-toggle > input {
  accent-color: #54744c;
}

.preview-text-field {
  margin-top: 4px;
}

.studio-panel .preview-text-field > span {
  color: #798371;
  margin-bottom: 6px;
  font-size: 10px;
}

.studio-panel .preview-text-field input {
  min-height: 39px;
  padding: 8px 10px;
  font-size: 11px;
}

.preview-actions {
  margin-top: 24px;
}

.studio-panel .preview-actions .subtle {
  color: #929b89;
  font-size: 10px;
}

.preview-editor .sr-only {
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

@media (max-width: 900px) {
  .preview-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 23px;
  }

  .preview-stage-column {
    max-width: 480px;
  }

  .preview-stage-wrap {
    min-height: 440px;
  }
}

@media (max-width: 680px) {
  .preview-stage-wrap {
    min-height: 390px;
    padding: 12px;
  }

  .ad-preview-stage {
    width: min(100%, 230px);
  }

  .ad-preview-stage.aspect-1-1 {
    width: min(100%, 320px);
  }

  .ad-preview-stage.aspect-4-5 {
    width: min(100%, 280px);
  }

  .ad-preview-subtitle {
    font-size: 13px;
  }

  .preview-aspect-options {
    gap: 6px;
  }

  .preview-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .preview-actions > .button {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .version-history-layout {
    grid-template-columns: 1fr;
  }
}

.campaign-prototype {
  gap: 18px;
  display: grid;
}

.campaign-progress {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
  margin: 0 0 3px;
  padding: 0;
  list-style: none;
  display: grid;
}

.campaign-progress-step {
  color: #7f8781;
  background: #fafbfa;
  border: 1px solid #e1e4e1;
  border-radius: 9px;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 11px 13px;
  font-size: 11px;
  display: flex;
}

.campaign-progress-step > span {
  color: #727b74;
  background: #edf0ed;
  border-radius: 50%;
  flex: 0 0 23px;
  place-items: center;
  width: 23px;
  height: 23px;
  font-size: 9px;
  display: grid;
}

.campaign-progress-step.is-done > span {
  color: #465b4d;
  background: #e4ebe5;
}

.campaign-setup-grid {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: start;
  gap: 16px;
  display: grid;
}

.campaign-card {
  border-radius: 12px;
  min-width: 0;
  padding: 23px;
}

.campaign-card-heading {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 17px;
  display: flex;
}

.campaign-icon {
  color: #58675d;
  background: #f0f2f0;
  border: 1px solid #e2e6e2;
  border-radius: 10px;
  place-items: center;
  width: 38px;
  height: 38px;
  display: grid;
}

.campaign-card h2 {
  margin: 0 0 8px;
  font-size: 15px;
}

.campaign-card > p {
  color: #7d857f;
  margin: 0 0 17px;
  font-size: 11px;
  line-height: 1.8;
}

.demo-account-summary {
  color: #68726b;
  background: #f7f8f7;
  border: 1px solid #e1e4e1;
  border-radius: 9px;
  gap: 8px;
  padding: 14px;
  font-size: 10px;
  line-height: 1.7;
  display: grid;
}

.demo-account-summary strong {
  color: #303832;
  font-size: 12px;
}

.demo-account-summary .text-button {
  justify-self: start;
  padding: 3px 0;
}

.campaign-note {
  color: #89918b;
  align-items: flex-start;
  gap: 8px;
  margin-top: 16px;
  font-size: 10px;
  line-height: 1.7;
  display: flex;
}

.campaign-note svg {
  flex: none;
  margin-top: 1px;
}

.campaign-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 12px;
  display: grid;
}

.campaign-fields .field:first-child {
  grid-column: 1 / -1;
}

.campaign-fields .field label, .campaign-review-fields .field label, .campaign-project-field > label {
  font-size: 10px;
}

.campaign-fields .field input, .campaign-fields .field select, .campaign-review-fields .field input, .campaign-project-field select {
  min-height: 38px;
  font-size: 11px;
}

.budget-estimate {
  color: #7b847d;
  background: #f7f8f7;
  border: 1px solid #e2e6e2;
  border-radius: 8px;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 3px 10px;
  margin: 2px 0 14px;
  padding: 12px 14px;
  font-size: 10px;
  display: grid;
}

.budget-estimate strong {
  color: #303832;
  font-size: 13px;
}

.budget-estimate small {
  color: #8c948e;
  grid-column: 1 / -1;
  font-size: 9px;
}

.budget-snapshot-summary {
  color: #727c75;
  margin: 0 0 14px;
  font-size: 9px;
  line-height: 1.7;
}

.budget-card > .button {
  min-height: 36px;
  padding: 8px 12px;
  font-size: 10px;
}

.inline-warning {
  color: #987b44;
  margin: 0 0 12px;
  font-size: 10px;
  line-height: 1.7;
}

.prototype-footnote {
  color: #8b938d;
  margin-top: 12px;
  font-size: 9px;
  line-height: 1.7;
  display: block;
}

.approval-card {
  padding: 25px;
}

.campaign-project-field {
  max-width: 580px;
  margin: 0 0 17px;
}

.campaign-project-field small, .campaign-review-fields .field small {
  color: #818a83;
  margin-top: 6px;
  font-size: 10px;
  line-height: 1.7;
  display: block;
}

.campaign-blocker {
  color: #777162;
  background: #f8f6f0;
  border: 1px solid #e5e1d5;
  border-radius: 8px;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin: 0 0 17px;
  padding: 11px 13px;
  font-size: 10px;
  line-height: 1.7;
  display: flex;
}

.campaign-blocker svg {
  flex: none;
}

.campaign-blocker a {
  color: #53685a;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  display: inline-flex;
}

.campaign-review-grid {
  border-top: 1px solid #e5e8e5;
  border-bottom: 1px solid #e5e8e5;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 17px;
  padding: 16px 0;
  display: grid;
}

.campaign-review-checks {
  align-content: start;
  gap: 10px;
  display: grid;
}

.review-check {
  color: #818982;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  display: flex;
}

.review-check svg {
  flex: none;
}

.review-check.is-done {
  color: #53675a;
}

.campaign-review-fields .field {
  margin-bottom: 10px;
}

.campaign-review-fields .field input {
  width: 100%;
}

.campaign-claims-check {
  margin: 10px 0 0;
  font-size: 10px;
}

.campaign-claims-check input {
  accent-color: var(--green);
}

.campaign-package-copy {
  grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(180px, 1fr));
  align-items: start;
  gap: 0 14px;
  display: grid;
}

.campaign-package-copy .field:first-child {
  grid-row: span 2;
}

.campaign-package-copy textarea, .campaign-package-copy input, .campaign-package-copy select {
  width: 100%;
}

.campaign-package-copy small {
  color: var(--campaign-placement-muted, #818a83);
  margin-top: 5px;
  font-size: 10px;
  display: block;
}

.campaign-placement-list {
  border: 1px solid var(--campaign-placement-border, #e2e6e2);
  color: var(--campaign-placement-text, #303832);
  border-radius: 10px;
  gap: 9px;
  margin: 5px 0 0;
  padding: 16px;
  display: grid;
}

.campaign-placement-list legend {
  padding: 0 6px;
  font-size: 12px;
  font-weight: 600;
}

.campaign-placement-list > p {
  color: var(--campaign-placement-muted, #7d857f);
  margin: 0 0 4px;
  font-size: 10px;
  line-height: 1.7;
}

.campaign-placement-row {
  border: 1px solid var(--campaign-placement-border, #e2e6e2);
  background: var(--campaign-placement-bg, #f7f8f7);
  min-width: 0;
  color: var(--campaign-placement-text, #303832);
  border-radius: 8px;
  grid-template-columns: minmax(180px, .8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 14px;
  padding: 12px;
  display: grid;
}

.campaign-placement-select {
  cursor: pointer;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
  display: flex;
}

.campaign-placement-select input {
  accent-color: var(--green);
  margin: 3px 0 0;
}

.campaign-placement-select span, .campaign-video-file > span {
  gap: 4px;
  min-width: 0;
  display: grid;
}

.campaign-placement-select strong, .campaign-video-file strong {
  overflow-wrap: anywhere;
  color: var(--campaign-placement-strong, #303832);
  font-size: 11px;
}

.campaign-placement-select small, .campaign-video-file small {
  color: var(--campaign-placement-muted, #818a83);
  font-size: 10px;
}

.campaign-placement-file {
  min-width: 0;
}

.campaign-video-upload {
  color: #68726b;
  cursor: pointer;
  gap: 7px;
  font-size: 10px;
  display: grid;
}

.campaign-video-upload input {
  border: 1px dashed var(--campaign-placement-border, #cbd2cb);
  background: var(--campaign-placement-bg, #fff);
  width: 100%;
  min-height: 36px;
  color: var(--campaign-placement-text, inherit);
  border-radius: 7px;
  padding: 6px;
  font-size: 10px;
}

.campaign-video-file {
  border: 1px solid var(--campaign-placement-border, #dce3dc);
  background: var(--campaign-placement-bg, #fff);
  min-width: 0;
  color: var(--campaign-placement-text, #303832);
  border-radius: 7px;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  font-size: 10px;
  display: flex;
}

.campaign-delivery-grid {
  grid-template-columns: minmax(0, 1.5fr) minmax(240px, .8fr);
  gap: 14px;
  margin-top: 14px;
  display: grid;
}

.campaign-preview-panel, .campaign-handoff-card {
  border: 1px solid var(--campaign-placement-border, #e2e6e2);
  background: var(--campaign-placement-bg, #f7f8f7);
  min-width: 0;
  color: var(--campaign-placement-text, #303832);
  border-radius: 10px;
  padding: 15px;
}

.campaign-preview-heading {
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  display: flex;
}

.campaign-preview-heading h3, .campaign-handoff-card h3 {
  color: var(--campaign-placement-strong, #303832);
  margin: 0;
  font-size: 13px;
}

.campaign-preview-heading p, .campaign-handoff-card > p {
  color: var(--campaign-placement-muted, #818a83);
  margin: 5px 0 0;
  font-size: 10px;
  line-height: 1.65;
}

.campaign-preview-heading > span {
  background: var(--campaign-placement-bg, #fff);
  color: var(--campaign-placement-muted, #818a83);
  border-radius: 999px;
  flex: none;
  padding: 4px 7px;
  font-size: 9px;
}

.campaign-preview-tabs {
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 9px;
  display: flex;
}

.campaign-preview-tabs button {
  border: 1px solid var(--campaign-placement-border, #dce3dc);
  background: var(--campaign-placement-bg, #fff);
  color: var(--campaign-placement-text, #303832);
  cursor: pointer;
  border-radius: 7px;
  padding: 6px 9px;
  font-size: 10px;
}

.campaign-preview-tabs button[aria-pressed="true"] {
  border-color: var(--green);
  background: color-mix(in srgb, var(--green) 12%, var(--campaign-placement-bg, #fff));
}

.campaign-ad-preview {
  border: 1px solid var(--campaign-placement-border, #e2e6e2);
  background: var(--campaign-placement-bg, #fff);
  border-radius: 9px;
  grid-template-columns: minmax(90px, .85fr) minmax(150px, 1fr);
  max-width: 520px;
  margin: 0 auto;
  display: grid;
  overflow: hidden;
}

.campaign-ad-preview.is-vertical {
  max-width: 400px;
}

.campaign-ad-preview-media {
  color: #d4d7da;
  background: #111319;
  place-items: center;
  min-height: 135px;
  display: grid;
  overflow: hidden;
}

.campaign-ad-preview.is-vertical .campaign-ad-preview-media {
  aspect-ratio: 9 / 16;
}

.campaign-ad-preview.is-feed .campaign-ad-preview-media {
  aspect-ratio: 4 / 5;
}

.campaign-ad-preview.is-square .campaign-ad-preview-media {
  aspect-ratio: 1;
}

.campaign-ad-preview-media video {
  object-fit: contain;
  width: 100%;
  height: 100%;
  display: block;
}

.campaign-ad-preview-media > p {
  color: #aeb4b8;
  text-align: center;
  max-width: 180px;
  margin: 12px;
  font-size: 10px;
}

.campaign-ad-preview-copy {
  color: var(--campaign-placement-text, #303832);
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 12px;
  display: flex;
}

.campaign-ad-preview-copy > span, .campaign-ad-preview-copy > p {
  color: var(--campaign-placement-muted, #818a83);
  margin: 0;
  font-size: 9px;
  line-height: 1.6;
}

.campaign-ad-preview-copy > strong {
  color: var(--campaign-placement-strong, #303832);
  font-size: 12px;
}

.campaign-ad-preview-copy > b {
  background: var(--green);
  color: #fff;
  border-radius: 6px;
  margin-top: auto;
  padding: 6px 9px;
  font-size: 9px;
}

.campaign-preview-file, .campaign-handoff-status {
  color: var(--campaign-placement-muted, #818a83);
  overflow-wrap: anywhere;
  margin: 8px 0 0;
  font-size: 9px;
}

.campaign-handoff-card {
  flex-direction: column;
  align-items: flex-start;
  display: flex;
}

.campaign-handoff-card ul {
  color: var(--campaign-placement-text, #303832);
  gap: 7px;
  margin: 12px 0 15px;
  padding-left: 17px;
  font-size: 10px;
  line-height: 1.55;
  display: grid;
}

.campaign-handoff-card .button:disabled {
  cursor: not-allowed;
}

.campaign-card > p.campaign-package-note {
  color: var(--campaign-placement-muted, #818a83);
  margin: 12px 0 0;
  font-size: 10px;
}

p.campaign-asset-summary {
  color: #727c75;
  margin: 12px 0 0;
  font-size: 10px;
}

.approval-pending-box {
  color: #68726b;
  background: #f7f8f7;
  border: 1px solid #e2e6e2;
  border-radius: 8px;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-top: 15px;
  padding: 13px;
  font-size: 10px;
  line-height: 1.7;
  display: flex;
}

.approval-pending-box .button {
  flex: none;
  min-height: 34px;
  padding: 7px 10px;
  font-size: 10px;
}

.final-publish-confirm {
  background: #f5f8f5;
  border: 1px solid #dce4dc;
  border-radius: 9px;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 18px;
  margin: 16px 0 0;
  padding: 13px 15px;
  display: flex;
}

.final-publish-confirm legend {
  color: #5f6f63;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 600;
}

.final-publish-confirm .checkbox-field {
  flex: 1;
  margin: 0;
  font-size: 10px;
}

.final-publish-confirm > .button {
  min-height: 35px;
  padding: 8px 12px;
  font-size: 10px;
}

.approval-actions {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 15px;
  display: flex;
}

.approval-actions > span {
  color: #818a83;
  font-size: 10px;
  line-height: 1.7;
}

.approval-actions .button {
  min-height: 36px;
  padding: 8px 12px;
  font-size: 10px;
}

.section-insights {
  max-width: 1220px;
}

.insights-workspace {
  gap: 16px;
  display: grid;
}

.visually-hidden {
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

.insights-source-panel {
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 20px 23px;
  display: flex;
}

.insights-source-copy, .insights-panel-heading {
  align-items: flex-start;
  gap: 13px;
  display: flex;
}

.insights-source-copy h2, .insights-panel-heading h2 {
  margin: 0 0 5px;
  font-size: 14px;
}

.insights-source-copy p, .insights-panel-heading p {
  color: #7b827d;
  margin: 0;
  font-size: 10px;
  line-height: 1.8;
}

.insights-icon, .insights-empty-icon {
  color: #53665a;
  background: #edf0ed;
  border-radius: 10px;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  display: grid;
}

.insights-source-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  display: flex;
}

.insights-source-actions .button {
  min-height: 36px;
  padding: 8px 11px;
  font-size: 10px;
}

.insights-empty {
  justify-items: start;
  gap: 13px;
  padding: 34px;
  display: grid;
}

.insights-empty-icon {
  width: 48px;
  height: 48px;
}

.insights-empty .eyebrow {
  color: #89918b;
  letter-spacing: 1.2px;
  margin: 2px 0 -8px;
  font-size: 9px;
}

.insights-empty h2 {
  margin: 0;
  font-size: 18px;
}

.insights-empty > p:not(.eyebrow) {
  color: #747d76;
  max-width: 640px;
  margin: 0;
  font-size: 11px;
  line-height: 1.9;
}

.insights-empty-steps {
  color: #677169;
  flex-wrap: wrap;
  gap: 9px 20px;
  margin: 2px 0 4px;
  font-size: 10px;
  display: flex;
}

.insights-empty-steps span {
  align-items: center;
  gap: 6px;
  display: flex;
}

.insights-empty-steps b {
  color: #89968c;
  font-size: 9px;
}

.insights-empty > small {
  color: #89918b;
  font-size: 9px;
}

.insights-filter-bar {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 11px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 15px 17px;
  display: grid;
}

.insights-filter-bar .field {
  margin: 0;
}

.insights-filter-bar .field span {
  color: #78817a;
  margin: 0 0 6px;
  font-size: 9px;
  display: block;
}

.insights-filter-bar input, .insights-filter-bar select {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  color: var(--ink);
  background: #fafbfa;
  border: 1px solid #e1e4e1;
  border-radius: 7px;
  padding: 7px 9px;
  font-size: 10px;
}

.insights-warning, .insights-data-note {
  color: #766b54;
  background: #faf8f2;
  border: 1px solid #e9e1ce;
  border-radius: 8px;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 11px 13px;
  font-size: 10px;
  line-height: 1.7;
  display: flex;
}

.insights-warning svg, .insights-data-note svg {
  flex: none;
  margin-top: 1px;
}

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

.insights-kpi {
  gap: 8px;
  padding: 17px 18px;
  display: grid;
}

.insights-kpi > span {
  color: #747d76;
  font-size: 10px;
}

.insights-kpi strong {
  overflow-wrap: anywhere;
  letter-spacing: -.5px;
  font-size: 21px;
  font-weight: 600;
}

.insights-kpi small {
  color: #89918b;
  min-height: 15px;
  font-size: 9px;
}

.insights-panel-grid {
  grid-template-columns: minmax(0, 1.4fr) minmax(240px, .8fr);
  gap: 12px;
  display: grid;
}

.insights-chart-panel, .insights-table-panel {
  min-width: 0;
  padding: 19px;
}

.insights-panel-heading {
  justify-content: space-between;
  margin-bottom: 18px;
}

.insights-panel-heading > svg {
  color: #829086;
}

.spend-chart {
  border-bottom: 1px solid var(--border);
  align-items: flex-end;
  gap: 7px;
  height: 160px;
  padding: 12px 2px 0;
  display: flex;
  overflow-x: auto;
}

.spend-chart-column {
  flex-direction: column;
  flex: 1 0 24px;
  justify-content: flex-end;
  align-items: center;
  gap: 7px;
  height: 100%;
  display: flex;
}

.spend-chart-column > span {
  background: linear-gradient(#788b7d, #52685a);
  border-radius: 5px 5px 2px 2px;
  width: min(100%, 32px);
  min-height: 3px;
  display: block;
}

.spend-chart-column small {
  color: #858d87;
  white-space: nowrap;
  font-size: 8px;
}

.insights-chart-footnote {
  color: #89918b;
  margin-top: 10px;
  font-size: 9px;
}

.insights-roas-panel > strong {
  letter-spacing: -1px;
  margin: 26px 0 12px;
  font-size: 34px;
  display: block;
}

.insights-roas-panel > p, .insights-roas-panel > small {
  color: #747d76;
  font-size: 10px;
  line-height: 1.8;
}

.insights-roas-panel > small {
  color: #89918b;
  margin-top: 20px;
  display: block;
}

.insights-no-results {
  color: #858d87;
  text-align: center;
  justify-items: center;
  margin: 0;
  padding: 28px 10px;
  font-size: 10px;
  display: grid;
}

.insights-no-results .text-button {
  margin: 0;
  font-size: 10px;
}

.insights-table-wrap {
  overflow-x: auto;
}

.insights-table-wrap table {
  border-collapse: collapse;
  text-align: left;
  white-space: nowrap;
  width: 100%;
}

.insights-table-wrap th {
  border-bottom: 1px solid var(--border);
  color: #858d87;
  padding: 10px 9px;
  font-size: 9px;
  font-weight: 500;
}

.insights-table-wrap td {
  border-bottom: 1px solid var(--border);
  color: #59635c;
  padding: 11px 9px;
  font-size: 10px;
}

.insights-table-wrap td:first-child {
  white-space: normal;
  min-width: 145px;
}

.insights-table-wrap td strong, .insights-table-wrap td small {
  display: block;
}

.insights-table-wrap td strong {
  color: var(--ink);
  font-size: 10px;
}

.insights-table-wrap td small {
  color: #89918b;
  margin-top: 4px;
  font-size: 8px;
}

.insights-data-note {
  border-color: var(--border);
  color: #858d87;
  background: none;
}

.brand-page {
  max-width: 1180px;
}

.brand-editor-layout {
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, .75fr);
  align-items: start;
  gap: 16px;
  display: grid;
}

.brand-form-column {
  gap: 13px;
  min-width: 0;
  display: grid;
}

.brand-section {
  padding: 22px;
}

.brand-section-heading {
  color: #738179;
  justify-content: space-between;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 17px;
  display: flex;
}

.brand-section-heading h2 {
  color: var(--ink);
  margin: 0 0 5px;
  font-size: 14px;
}

.brand-section-heading p {
  color: #818a83;
  margin: 0;
  font-size: 10px;
  line-height: 1.8;
}

.brand-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 14px;
  display: grid;
}

.brand-logo-row {
  border: 1px solid var(--border);
  border-radius: 9px;
  align-items: center;
  gap: 12px;
  margin-bottom: 17px;
  padding: 12px;
  display: flex;
}

.brand-logo-row > img, .brand-logo-placeholder {
  object-fit: contain;
  background: #f1f2ef;
  border-radius: 9px;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  display: grid;
}

.brand-logo-placeholder {
  color: #fff;
  background: #405849;
  font-size: 18px;
}

.brand-logo-row > div {
  flex: 1;
  gap: 4px;
  display: grid;
}

.brand-logo-row > div strong {
  color: var(--ink);
  font-size: 10px;
}

.brand-logo-row > div small {
  color: #858d87;
  font-size: 8px;
  line-height: 1.7;
}

.brand-logo-row .button {
  min-height: 34px;
  padding: 7px 10px;
  font-size: 9px;
}

.brand-fields .field, .brand-section > .field {
  margin-bottom: 13px;
}

.brand-fields .field span, .brand-section > .field span {
  color: #78817a;
  margin-bottom: 6px;
  font-size: 10px;
  display: block;
}

.brand-fields .field input, .brand-section > .field textarea {
  width: 100%;
  min-height: 39px;
  color: var(--ink);
  background: #fafbfa;
  border: 1px solid #e1e4e1;
  border-radius: 7px;
  padding: 9px 11px;
  font-size: 11px;
}

.brand-section > .field textarea {
  resize: vertical;
  min-height: 78px;
}

.brand-color-fields {
  flex-wrap: wrap;
  gap: 12px;
  display: flex;
}

.brand-color-field {
  border: 1px solid var(--border);
  color: #737d75;
  border-radius: 8px;
  align-items: center;
  gap: 10px;
  min-width: 190px;
  padding: 10px 12px;
  font-size: 10px;
  display: flex;
}

.brand-color-field input {
  border: 1px solid var(--border);
  background: none;
  border-radius: 6px;
  width: 33px;
  height: 29px;
  padding: 2px;
}

.brand-color-field code {
  color: var(--ink);
  margin-left: auto;
  font-size: 10px;
}

.brand-actions {
  align-items: center;
  gap: 12px;
}

.brand-actions > span {
  color: #858d87;
  font-size: 9px;
}

.brand-actions > div, .creative-export-actions {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.brand-actions .button, .creative-export-actions .button {
  min-height: 36px;
  padding: 8px 11px;
  font-size: 10px;
}

.brand-live-preview {
  gap: 17px;
  padding: 22px;
  display: grid;
  position: sticky;
  top: 90px;
}

.brand-live-preview > .eyebrow {
  color: #858d87;
  letter-spacing: 1px;
  margin: 0;
  font-size: 9px;
}

.brand-preview-card {
  background: #fafbfa;
  border: 1px solid;
  border-radius: 10px;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 16px 13px;
  display: flex;
}

.brand-preview-mark {
  color: #fff;
  border-radius: 10px;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  font-size: 15px;
  font-weight: 600;
  display: grid;
}

.brand-preview-image {
  object-fit: contain;
  background: #fff;
  border-radius: 8px;
  flex: none;
}

.brand-preview-card > div {
  min-width: 0;
}

.brand-preview-card strong {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 12px;
  display: block;
}

.brand-preview-card p {
  overflow-wrap: anywhere;
  color: #858d87;
  margin: 3px 0 0;
  font-size: 9px;
}

.brand-preview-accent {
  border-radius: 5px;
  flex: none;
  width: 9px;
  height: 34px;
  margin-left: auto;
}

.brand-preview-copy {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  gap: 6px;
  padding: 13px 0;
  display: grid;
}

.brand-preview-copy span {
  color: #858d87;
  font-size: 9px;
}

.brand-preview-copy p {
  color: var(--ink);
  margin: 0 0 7px;
  font-size: 11px;
}

.brand-preview-copy strong {
  color: var(--ink);
  font-size: 12px;
}

.brand-preview-note {
  color: #858d87;
  align-items: flex-start;
  gap: 7px;
  margin: 0;
  font-size: 9px;
  line-height: 1.8;
  display: flex;
}

.brand-preview-note svg {
  flex: none;
  margin-top: 1px;
}

.creative-export-panel {
  border: 1px solid var(--border);
  background: #fafbfa;
  border-radius: 10px;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 17px 19px;
  display: flex;
}

.creative-export-panel strong {
  color: var(--ink);
  font-size: 11px;
}

.creative-export-panel p {
  color: #747d76;
  margin: 5px 0 3px;
  font-size: 9px;
  line-height: 1.8;
}

.creative-export-panel small {
  color: #89918b;
  font-size: 8px;
}

.creative-export-actions {
  flex: none;
}

@media (max-width: 900px) {
  .brand-editor-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .brand-live-preview {
    position: static;
  }

  .insights-filter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .insights-panel-grid, .campaign-setup-grid, .campaign-package-copy {
    grid-template-columns: 1fr;
  }

  .campaign-package-copy .field:first-child {
    grid-row: auto;
  }

  .campaign-placement-row, .campaign-delivery-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .brand-section, .brand-live-preview {
    padding: 17px;
  }

  .brand-fields {
    grid-template-columns: 1fr;
  }

  .brand-logo-row {
    flex-wrap: wrap;
  }

  .brand-logo-row > div {
    min-width: calc(100% - 70px);
  }

  .brand-actions, .brand-actions > div {
    flex-direction: column;
    align-items: stretch;
  }

  .brand-actions .button {
    justify-content: center;
    width: 100%;
  }

  .creative-export-panel {
    flex-direction: column;
    align-items: stretch;
    padding: 15px;
  }

  .creative-export-actions > * {
    flex: auto;
    justify-content: center;
  }

  .insights-source-panel {
    flex-direction: column;
    align-items: flex-start;
    padding: 17px;
  }

  .insights-source-actions {
    justify-content: flex-start;
    width: 100%;
  }

  .insights-source-actions .button {
    flex: auto;
  }

  .insights-empty {
    padding: 22px;
  }

  .insights-empty-steps {
    flex-direction: column;
    gap: 8px;
  }

  .insights-filter-bar, .insights-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .insights-kpi {
    min-width: 0;
    padding: 14px;
  }

  .insights-kpi strong {
    font-size: 18px;
  }

  .insights-chart-panel, .insights-table-panel {
    padding: 15px;
  }

  .insights-table-wrap {
    margin: 0 -4px;
  }

  .campaign-progress {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .campaign-progress-step {
    padding: 9px;
    font-size: 9px;
  }

  .campaign-card, .approval-card {
    padding: 17px;
  }

  .campaign-review-grid, .campaign-package-copy {
    grid-template-columns: 1fr;
  }

  .campaign-package-copy .field:first-child {
    grid-row: auto;
  }

  .campaign-placement-row, .campaign-delivery-grid {
    grid-template-columns: 1fr;
  }

  .campaign-ad-preview {
    grid-template-columns: minmax(85px, .8fr) minmax(0, 1fr);
  }

  .approval-pending-box, .final-publish-confirm, .approval-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .final-publish-confirm > .button {
    width: 100%;
  }
}

/* [project]/src/app/theme.css [app-client] (css) */
:root[data-theme="dark"] {
  --lightningcss-light: ;
  --lightningcss-dark: initial;
  color-scheme: dark;
  --ink: #e7e8e9;
  --muted: #999ca1;
  --green: #526b59;
  --green-dark: #607b66;
  --border: #292b30;
  --surface: #08090b;
  --sage: #1d1f23;
  --campaign-placement-bg: #15171b;
  --campaign-placement-border: #292b30;
  --campaign-placement-text: #c0c3c7;
  --campaign-placement-strong: #e0e1e3;
  --campaign-placement-muted: #999da3;
}

html[data-theme="dark"] body {
  background: var(--surface);
  color: var(--ink);
}

html[data-theme="dark"] .sidebar, html[data-theme="dark"] .topbar, html[data-theme="dark"] .form-panel, html[data-theme="dark"] .format-card, html[data-theme="dark"] .workspace-pulse, html[data-theme="dark"] .project-card, html[data-theme="dark"] .new-project-card, html[data-theme="dark"] .asset-card, html[data-theme="dark"] .shot-card, html[data-theme="dark"] .task-card, html[data-theme="dark"] .catalog-card, html[data-theme="dark"] .search-field, html[data-theme="dark"] .image-dialog {
  border-color: var(--border);
  color: var(--ink);
  background-color: #111316;
}

html[data-theme="dark"] .topbar {
  background: #0c0d10;
}

html[data-theme="dark"] .workspace-switch, html[data-theme="dark"] .workflow-progress-step, html[data-theme="dark"] .todo-example, html[data-theme="dark"] .format-choice, html[data-theme="dark"] .new-project-card > span, html[data-theme="dark"] .count, html[data-theme="dark"] .stepper li > span, html[data-theme="dark"] .segmented-control, html[data-theme="dark"] .asset-preview, html[data-theme="dark"] .shot-reference, html[data-theme="dark"] .image-dialog > img {
  color: #bfc1c5;
  background-color: #191b1f;
  border-color: #303238;
}

html[data-theme="dark"] .format-choice.selected, html[data-theme="dark"] .nav-link.active, html[data-theme="dark"] .new-project-card:hover, html[data-theme="dark"] .small-button, html[data-theme="dark"] .add-shot, html[data-theme="dark"] .script-summary, html[data-theme="dark"] .studio-empty, html[data-theme="dark"] .preview-shot-strip button, html[data-theme="dark"] .preview-aspect-options button {
  color: #d0d1d4;
  background-color: #1d1f23;
  border-color: #383a40;
}

html[data-theme="dark"] .workspace-pulse .overview-metric, html[data-theme="dark"] .todo-panel, html[data-theme="dark"] .workspace-empty {
  border-color: var(--border);
}

html[data-theme="dark"] .workflow-progress-step, html[data-theme="dark"] .todo-row:hover {
  background: #191b1f;
}

html[data-theme="dark"] .todo-row, html[data-theme="dark"] .todo-heading, html[data-theme="dark"] .todo-more {
  border-color: var(--border);
}

html[data-theme="dark"] .status-dot.status-ready {
  color: #adc0ac;
}

html[data-theme="dark"] .status-dot.status-ready:before {
  background: #adc0ac;
}

html[data-theme="dark"] .workspace-switch, html[data-theme="dark"] .nav-link, html[data-theme="dark"] .back-link, html[data-theme="dark"] .text-link, html[data-theme="dark"] .text-button, html[data-theme="dark"] .button-secondary, html[data-theme="dark"] .format-choice, html[data-theme="dark"] .format-card p, html[data-theme="dark"] .project-card-meta, html[data-theme="dark"] .project-card p, html[data-theme="dark"] .new-project-card h3, html[data-theme="dark"] .new-project-card p, html[data-theme="dark"] .studio-context, html[data-theme="dark"] .studio-context .context-note, html[data-theme="dark"] .studio-tabs button, html[data-theme="dark"] .panel-heading p, html[data-theme="dark"] .helper-copy, html[data-theme="dark"] .studio-bottom, html[data-theme="dark"] .shot-body .field label, html[data-theme="dark"] .task-card > p, html[data-theme="dark"] .catalog-meta, html[data-theme="dark"] body .library-toolbar > span, html[data-theme="dark"] .preview-playback, html[data-theme="dark"] body .preview-text-field > span, html[data-theme="dark"] .preview-actions .subtle {
  color: #a7a7aa;
}

html[data-theme="dark"] .nav-link:hover, html[data-theme="dark"] .button-secondary:hover, html[data-theme="dark"] .small-button:hover, html[data-theme="dark"] .icon-button:hover, html[data-theme="dark"] .asset-preview:hover {
  background-color: #25272c;
}

html[data-theme="dark"] .nav-link.active, html[data-theme="dark"] .studio-tabs button[aria-pressed="true"], html[data-theme="dark"] .text-button, html[data-theme="dark"] .back-link, html[data-theme="dark"] .format-choice.selected, html[data-theme="dark"] .catalog-meta strong, html[data-theme="dark"] .preview-shot-strip button[aria-pressed="true"], html[data-theme="dark"] .preview-aspect-options button[aria-pressed="true"] {
  color: #e0e0e2;
}

html[data-theme="dark"] .button-secondary, html[data-theme="dark"] .small-button, html[data-theme="dark"] .preview-shot-strip button, html[data-theme="dark"] .preview-aspect-options button {
  background-color: #191b1f;
  border-color: #33353b;
}

html[data-theme="dark"] .theme-picker select, html[data-theme="dark"] .field input, html[data-theme="dark"] .field select, html[data-theme="dark"] .field textarea, html[data-theme="dark"] .shot-body .field input, html[data-theme="dark"] .shot-body .field textarea, html[data-theme="dark"] .shot-body .field select, html[data-theme="dark"] .search-input {
  color: var(--ink);
  background-color: #0c0d10;
  border-color: #303238;
}

html[data-theme="dark"] .field input::placeholder, html[data-theme="dark"] .field textarea::placeholder {
  color: #858589;
}

html[data-theme="dark"] .hero-panel {
  background: #191b1f;
  border-color: #303238;
}

html[data-theme="dark"] .hero-kicker, html[data-theme="dark"] .hero-copy h2, html[data-theme="dark"] .hero-copy p, html[data-theme="dark"] .hero-footnote, html[data-theme="dark"] .planned-list, html[data-theme="dark"] .page-description, html[data-theme="dark"] .section-heading, html[data-theme="dark"] .review-list dt, html[data-theme="dark"] .panel-description, html[data-theme="dark"] .workflow-step, html[data-theme="dark"] .optional-label {
  color: #c0c0c3;
}

html[data-theme="dark"] .format-icon.sage, html[data-theme="dark"] .shot-number {
  color: #c9c9cb;
  background-color: #303134;
}

html[data-theme="dark"] .format-icon.peach {
  color: #d2ad82;
  background-color: #3c3026;
}

html[data-theme="dark"] .format-icon.lavender {
  color: #c0aad6;
  background-color: #332d3a;
}

html[data-theme="dark"] .stepper .current > span, html[data-theme="dark"] .stepper .complete > span {
  background: var(--green);
  color: #fff;
}

html[data-theme="dark"] .form-actions, html[data-theme="dark"] .review-list > div, html[data-theme="dark"] .generation-summary, html[data-theme="dark"] .task-footer, html[data-theme="dark"] .asset-actions, html[data-theme="dark"] .shot-heading {
  border-color: #333437;
}

html[data-theme="dark"] .notice, html[data-theme="dark"] .workflow-step.complete, html[data-theme="dark"] .pill-approved, html[data-theme="dark"] .success-message {
  color: #c2d1be;
  background-color: #222924;
  border-color: #39433b;
}

html[data-theme="dark"] .pill-pending, html[data-theme="dark"] .prerequisite, html[data-theme="dark"] .inline-confirm, html[data-theme="dark"] .task-card .task-outdated {
  color: #d4bc83;
  background-color: #352f22;
  border-color: #52452c;
}

html[data-theme="dark"] .error-message, html[data-theme="dark"] .pill-rejected {
  color: #e1a092;
  background-color: #392522;
  border-color: #5c3730;
}

html[data-theme="dark"] .studio-tabs, html[data-theme="dark"] .shot-card, html[data-theme="dark"] .asset-card, html[data-theme="dark"] .task-card, html[data-theme="dark"] .catalog-card, html[data-theme="dark"] .form-panel, html[data-theme="dark"] .format-card, html[data-theme="dark"] .project-card {
  border-color: var(--border);
}

html[data-theme="dark"] .segmented-control button[aria-pressed="true"] {
  color: #ededee;
  background: #292b30;
}

html[data-theme="dark"] .search-field, html[data-theme="dark"] .search-input {
  color: #c2c2c4;
}

html[data-theme="dark"] .ad-preview-placeholder {
  color: #27282a;
}

html[data-theme="dark"] .preview-stage-wrap {
  background: radial-gradient(#292a2d, #1c1d20 72%);
}

html[data-theme="dark"] .preview-aspect-options button[aria-pressed="true"], html[data-theme="dark"] .preview-shot-strip button[aria-pressed="true"] {
  background: #292b30;
}

html[data-theme="dark"] .app-footer, html[data-theme="dark"] .sidebar-note p, html[data-theme="dark"] .sidebar-user small, html[data-theme="dark"] .workspace-switch small, html[data-theme="dark"] .eyebrow, html[data-theme="dark"] .sidebar-note a {
  color: #88898d;
}

html[data-theme="dark"] body .page-container .field label {
  color: #c0c0c3;
}

html[data-theme="dark"] body .page-container .subtle {
  color: #88898d;
}

:root[data-theme="light"] {
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
  --ink: #202321;
  --muted: #747a76;
  --green: #465b4d;
  --green-dark: #34463a;
  --border: #e1e4e1;
  --surface: #f3f4f3;
  --sage: #e8ebe8;
}

html[data-theme="light"] body {
  background: var(--surface);
  color: var(--ink);
}

html[data-theme="light"] body .app-shell .sidebar, html[data-theme="light"] body .app-shell .topbar, html[data-theme="light"] body .app-shell .form-panel, html[data-theme="light"] body .app-shell .format-card, html[data-theme="light"] body .app-shell .catalog-card, html[data-theme="light"] body .app-shell .project-card, html[data-theme="light"] body .app-shell .new-project-card, html[data-theme="light"] body .app-shell .asset-card, html[data-theme="light"] body .app-shell .shot-card, html[data-theme="light"] body .app-shell .task-card, html[data-theme="light"] body .app-shell .catalog-card, html[data-theme="light"] body .app-shell .search-field, html[data-theme="light"] body .app-shell .image-dialog {
  border-color: var(--border);
  color: var(--ink);
  background-color: #fafbfa;
}

html[data-theme="light"] body .app-shell .topbar {
  background-color: #f8f9f8;
}

html[data-theme="light"] body .app-shell .workspace-switch, html[data-theme="light"] body .app-shell .format-choice, html[data-theme="light"] body .app-shell .new-project-card > span, html[data-theme="light"] body .app-shell .count, html[data-theme="light"] body .app-shell .stepper li > span, html[data-theme="light"] body .app-shell .segmented-control, html[data-theme="light"] body .app-shell .asset-preview, html[data-theme="light"] body .app-shell .shot-reference {
  background-color: #f0f2f0;
  border-color: #e2e5e2;
}

html[data-theme="light"] body .app-shell .format-choice.selected, html[data-theme="light"] body .app-shell .nav-link.active, html[data-theme="light"] body .app-shell .new-project-card:hover, html[data-theme="light"] body .app-shell .small-button, html[data-theme="light"] body .app-shell .add-shot, html[data-theme="light"] body .app-shell .script-summary, html[data-theme="light"] body .app-shell .studio-empty, html[data-theme="light"] body .app-shell .preview-shot-strip button, html[data-theme="light"] body .app-shell .preview-aspect-options button {
  background-color: #edf0ed;
  border-color: #dce1dc;
}

html[data-theme="light"] body .app-shell .field input, html[data-theme="light"] body .app-shell .field select, html[data-theme="light"] body .app-shell .field textarea, html[data-theme="light"] body .app-shell .shot-body .field input, html[data-theme="light"] body .app-shell .shot-body .field textarea, html[data-theme="light"] body .app-shell .shot-body .field select, html[data-theme="light"] body .app-shell .search-input {
  background-color: #fff;
  border-color: #dfe3df;
}

html[data-theme="dark"] body .app-shell .theme-control {
  background-color: #0c0d10;
  border-color: #292b30;
}

html[data-theme="dark"] body .app-shell .theme-control button {
  color: #a7a9ae;
}

html[data-theme="dark"] body .app-shell .theme-control button[aria-pressed="true"] {
  color: #e7e8e9;
  background: #25272c;
  box-shadow: 0 1px 5px #0007;
}

html[data-theme="dark"] body .app-shell .project-card, html[data-theme="dark"] body .app-shell .asset-card, html[data-theme="dark"] body .app-shell .studio-panel {
  border-color: #25272c;
  box-shadow: 0 4px 16px #0002;
}

html[data-theme="dark"] body .app-shell .project-card:hover, html[data-theme="dark"] body .app-shell .asset-card:hover, html[data-theme="dark"] body .app-shell .studio-panel:hover {
  border-color: #3a3d44;
  box-shadow: 0 12px 32px #0005;
}

html[data-theme="dark"] body .app-shell .asset-preview {
  background: linear-gradient(145deg, #1b1d21, #141619);
}

html[data-theme="dark"] body .app-shell .asset-actions, html[data-theme="dark"] body .app-shell .studio-tabs {
  border-color: #292b30;
}

html[data-theme="dark"] body .app-shell .studio-tabs button[aria-pressed="true"] {
  background: #191b1f;
  border-radius: 7px 7px 0 0;
}

html[data-theme="dark"] body .app-shell .studio-context {
  color: #aeb1b6;
}

html[data-theme="dark"] body .app-shell .project-card:focus-visible, html[data-theme="dark"] body .app-shell .asset-preview:focus-visible, html[data-theme="dark"] body .app-shell .studio-tabs button:focus-visible {
  outline-color: #737b6f;
}

html[data-theme="light"] body .app-shell .theme-control {
  background-color: #edf0ed;
  border-color: #e1e4e1;
}

html[data-theme="light"] body .app-shell .theme-control button[aria-pressed="true"] {
  color: #34463a;
  background: #fff;
  box-shadow: 0 1px 4px #17221914;
}

html[data-theme="light"] body .app-shell .project-card, html[data-theme="light"] body .app-shell .asset-card, html[data-theme="light"] body .app-shell .studio-panel {
  border-color: #e1e4e1;
  box-shadow: 0 3px 12px #17221908;
}

html[data-theme="light"] body .app-shell .project-card:hover, html[data-theme="light"] body .app-shell .asset-card:hover, html[data-theme="light"] body .app-shell .studio-panel:hover {
  border-color: #c7d0c8;
  box-shadow: 0 10px 28px #17221912;
}

html[data-theme="light"] body .app-shell .asset-preview {
  background: linear-gradient(145deg, #f1f3f1, #e9edea);
}

html[data-theme="light"] body .app-shell .asset-actions, html[data-theme="light"] body .app-shell .studio-tabs {
  border-color: #e1e4e1;
}

html[data-theme="light"] body .app-shell .studio-tabs button[aria-pressed="true"] {
  background: #edf0ed;
  border-radius: 7px 7px 0 0;
}

html[data-theme="light"] body .app-shell .studio-context {
  color: #626c65;
}

html[data-theme="dark"] body .app-shell .catalog-card, html[data-theme="dark"] body .app-shell .planned-panel {
  border-color: #25272c;
  box-shadow: 0 4px 16px #0002;
}

html[data-theme="dark"] body .app-shell .catalog-card:hover {
  border-color: #3a3d44;
  box-shadow: 0 12px 32px #0005;
}

html[data-theme="dark"] body .app-shell .module-card-heading .format-icon {
  color: #c4c7cb;
  background: #1d1f23;
}

html[data-theme="dark"] body .app-shell .module-card-heading .pill {
  color: #aeb1b6;
  background: #191b1f;
  border: 1px solid #303238;
}

html[data-theme="dark"] body .app-shell .planned-list {
  color: #b4b7bc;
}

html[data-theme="light"] body .app-shell .catalog-card, html[data-theme="light"] body .app-shell .planned-panel {
  border-color: #e1e4e1;
  box-shadow: 0 3px 12px #17221908;
}

html[data-theme="light"] body .app-shell .catalog-card:hover {
  border-color: #c7d0c8;
  box-shadow: 0 10px 28px #17221912;
}

html[data-theme="light"] body .app-shell .catalog-card .format-icon.sage, html[data-theme="light"] body .app-shell .module-card-heading .format-icon {
  color: #5c6b60;
  background: #edf0ed;
}

html[data-theme="light"] body .app-shell .module-card-heading .pill {
  color: #737b75;
  background: #f0f2f0;
  border: 1px solid #e1e4e1;
}

html[data-theme="light"] body .app-shell .planned-list {
  color: #626c65;
}

html[data-theme="dark"] body .app-shell .creative-history {
  background: #111316;
  border-color: #292b30;
}

html[data-theme="dark"] body .app-shell .creative-history[open] > summary, html[data-theme="dark"] body .app-shell .version-comparison {
  border-color: #292b30;
}

html[data-theme="dark"] body .app-shell .creative-history > summary, html[data-theme="dark"] body .app-shell .version-option {
  color: #d4d5d8;
}

html[data-theme="dark"] body .app-shell .creative-history > summary span, html[data-theme="dark"] body .app-shell .version-option span, html[data-theme="dark"] body .app-shell .version-option small, html[data-theme="dark"] body .app-shell .version-comparison p, html[data-theme="dark"] body .app-shell .empty-history {
  color: #a1a4a9;
}

html[data-theme="dark"] body .app-shell .version-option[aria-pressed="true"], html[data-theme="dark"] body .app-shell .version-comparison {
  background: #191b1f;
}

html[data-theme="dark"] body .app-shell .version-comparison li {
  color: #c1c3c7;
  background: #202226;
  border-color: #303238;
}

html[data-theme="light"] body .app-shell .creative-history {
  background: #fafbfa;
  border-color: #e1e4e1;
}

html[data-theme="light"] body .app-shell .creative-history[open] > summary, html[data-theme="light"] body .app-shell .version-comparison {
  border-color: #e1e4e1;
}

html[data-theme="light"] body .app-shell .version-option[aria-pressed="true"] {
  background: #eef1ee;
  border-color: #dce2dc;
}

html[data-theme="light"] body .app-shell .version-comparison {
  background: #fff;
}

html[data-theme="light"] body .app-shell .version-comparison li {
  background: #f5f7f5;
  border-color: #e2e6df;
}

html[data-theme="dark"] body .app-shell .campaign-progress-step, html[data-theme="dark"] body .app-shell .demo-account-summary, html[data-theme="dark"] body .app-shell .budget-estimate, html[data-theme="dark"] body .app-shell .approval-pending-box {
  color: #b0b3b8;
  background: #15171b;
  border-color: #292b30;
}

html[data-theme="dark"] body .app-shell .campaign-progress-step > span, html[data-theme="dark"] body .app-shell .campaign-icon {
  color: #c0c3c7;
  background: #202226;
  border-color: #303238;
}

html[data-theme="dark"] body .app-shell .campaign-progress-step.is-done > span {
  color: #c4d3c4;
  background: #263029;
}

html[data-theme="dark"] body .app-shell .demo-account-summary strong, html[data-theme="dark"] body .app-shell .budget-estimate strong {
  color: #e0e1e3;
}

html[data-theme="dark"] body .app-shell .demo-account-summary span, html[data-theme="dark"] body .app-shell .budget-estimate small, html[data-theme="dark"] body .app-shell .prototype-footnote, html[data-theme="dark"] body .app-shell .campaign-note, html[data-theme="dark"] body .app-shell .campaign-review-fields small, html[data-theme="dark"] body .app-shell .approval-actions > span {
  color: #999da3;
}

html[data-theme="dark"] body .app-shell .campaign-blocker {
  color: #d0bd91;
  background: #211e19;
  border-color: #3b3528;
}

html[data-theme="dark"] body .app-shell .campaign-blocker a, html[data-theme="dark"] body .app-shell .review-check.is-done {
  color: #c4d3c4;
}

html[data-theme="dark"] body .app-shell .campaign-review-grid {
  border-color: #292b30;
}

html[data-theme="dark"] body .app-shell .review-check {
  color: #9fa2a7;
}

html[data-theme="dark"] body .app-shell .final-publish-confirm {
  background: #15181b;
  border-color: #303238;
}

html[data-theme="dark"] body .app-shell .final-publish-confirm legend {
  color: #c0c3c7;
}

html[data-theme="dark"] body .app-shell p.campaign-asset-summary {
  color: #aeb1b6;
}

html[data-theme="light"] body .app-shell .campaign-progress-step, html[data-theme="light"] body .app-shell .demo-account-summary, html[data-theme="light"] body .app-shell .budget-estimate, html[data-theme="light"] body .app-shell .approval-pending-box {
  color: #68726b;
  background: #f7f8f7;
  border-color: #e1e4e1;
}

html[data-theme="light"] body .app-shell .campaign-icon, html[data-theme="light"] body .app-shell .campaign-progress-step > span {
  color: #58675d;
  background: #f0f2f0;
  border-color: #e2e6e2;
}

html[data-theme="light"] body .app-shell .campaign-progress-step.is-done > span {
  color: #465b4d;
  background: #e4ebe5;
}

html[data-theme="light"] body .app-shell .campaign-blocker {
  color: #777162;
  background: #f8f6f0;
  border-color: #e5e1d5;
}

html[data-theme="light"] body .app-shell .campaign-review-grid {
  border-color: #e5e8e5;
}

html[data-theme="light"] body .app-shell .final-publish-confirm {
  background: #f5f8f5;
  border-color: #dce4dc;
}

html[data-theme="dark"] body .app-shell .budget-snapshot-summary {
  color: #aeb1b6;
}

html[data-theme="dark"] body .app-shell .insights-filter-bar {
  background: #111316;
  border-color: #292b30;
}

html[data-theme="dark"] body .app-shell .insights-filter-bar .field span, html[data-theme="dark"] body .app-shell .insights-kpi > span, html[data-theme="dark"] body .app-shell .insights-table-wrap th, html[data-theme="dark"] body .app-shell .insights-table-wrap td, html[data-theme="dark"] body .app-shell .insights-source-copy p, html[data-theme="dark"] body .app-shell .insights-panel-heading p, html[data-theme="dark"] body .app-shell .insights-roas-panel > p, html[data-theme="dark"] body .app-shell .insights-empty > p:not(.eyebrow) {
  color: #a1a4a9;
}

html[data-theme="dark"] body .app-shell .insights-filter-bar input, html[data-theme="dark"] body .app-shell .insights-filter-bar select {
  color: #e0e1e3;
  background: #0c0d10;
  border-color: #303238;
}

html[data-theme="dark"] body .app-shell .insights-icon, html[data-theme="dark"] body .app-shell .insights-empty-icon {
  color: #c0c3c7;
  background: #202226;
}

html[data-theme="dark"] body .app-shell .insights-warning {
  color: #d0bd91;
  background: #211e19;
  border-color: #3b3528;
}

html[data-theme="dark"] body .app-shell .insights-table-wrap td strong, html[data-theme="dark"] body .app-shell .insights-kpi strong, html[data-theme="dark"] body .app-shell .insights-roas-panel > strong {
  color: #e0e1e3;
}

html[data-theme="dark"] body .app-shell .insights-table-wrap td small, html[data-theme="dark"] body .app-shell .insights-chart-footnote, html[data-theme="dark"] body .app-shell .spend-chart-column small, html[data-theme="dark"] body .app-shell .insights-roas-panel > small, html[data-theme="dark"] body .app-shell .insights-kpi small, html[data-theme="dark"] body .app-shell .insights-empty > small {
  color: #999da3;
}

html[data-theme="dark"] body .app-shell .spend-chart {
  border-color: #292b30;
}

html[data-theme="dark"] body .app-shell .insights-data-note {
  color: #a1a4a9;
  border-color: #292b30;
}

html[data-theme="light"] body .app-shell .insights-filter-bar {
  background: #fff;
  border-color: #e1e4e1;
}

html[data-theme="light"] body .app-shell .insights-warning {
  color: #766b54;
  background: #faf8f2;
  border-color: #e9e1ce;
}

html[data-theme="dark"] body .app-shell .brand-fields .field span, html[data-theme="dark"] body .app-shell .brand-section > .field span, html[data-theme="dark"] body .app-shell .brand-section-heading p, html[data-theme="dark"] body .app-shell .brand-preview-card p, html[data-theme="dark"] body .app-shell .brand-preview-copy span, html[data-theme="dark"] body .app-shell .brand-preview-note, html[data-theme="dark"] body .app-shell .brand-actions > span, html[data-theme="dark"] body .app-shell .creative-export-panel p, html[data-theme="dark"] body .app-shell .creative-export-panel small {
  color: #a1a4a9;
}

html[data-theme="dark"] body .app-shell .brand-fields .field input, html[data-theme="dark"] body .app-shell .brand-section > .field textarea {
  color: #e0e1e3;
  background: #0c0d10;
  border-color: #303238;
}

html[data-theme="dark"] body .app-shell .brand-color-field, html[data-theme="dark"] body .app-shell .brand-preview-card, html[data-theme="dark"] body .app-shell .creative-export-panel {
  background: #15171b;
  border-color: #292b30;
}

html[data-theme="dark"] body .app-shell .brand-section-heading h2, html[data-theme="dark"] body .app-shell .brand-color-field code {
  color: #e0e1e3;
}

html[data-theme="dark"] body .app-shell .brand-preview-copy {
  border-color: #292b30;
}

html[data-theme="light"] body .app-shell .brand-fields .field input, html[data-theme="light"] body .app-shell .brand-section > .field textarea, html[data-theme="light"] body .app-shell .brand-preview-card, html[data-theme="light"] body .app-shell .creative-export-panel {
  background: #fafbfa;
  border-color: #e1e4e1;
}

/*# sourceMappingURL=src_app_136qah86ovymi._.css.map*/