/* Signed-in workspace. Styling only; data and actions remain owned by app.js. */
body.workspace-active .intro.hero { display: none; }
body.workspace-active .page-shell { padding-top: 34px; }

#app { gap: 24px; }
#app .workspace-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  padding: 4px 2px 0;
}
#app .workspace-heading h1 {
  margin: 0 0 7px;
  font-size: clamp(2.25rem, 4.5vw, 3.7rem);
  line-height: 1.05;
}
#app .workspace-heading p:last-child { margin: 0; font-size: .95rem; }
#app .workspace-private {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin-bottom: 6px;
  padding: 9px 12px;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-card);
  font-size: .72rem;
  font-weight: 750;
}
#app .workspace-private::before {
  width: 7px;
  height: 7px;
  background: var(--success);
  border-radius: 50%;
  content: "";
  box-shadow: 0 0 0 4px rgba(6, 118, 71, .1);
}

#app .app-tabs {
  top: 82px;
  width: 100%;
  padding: 6px;
  background: rgba(255, 248, 242, .94);
  border-color: #ead5c5;
  border-radius: 17px;
}
#app .app-tab {
  flex: 1 1 0;
  min-height: 44px;
  border-radius: 11px;
  font-size: .83rem;
}
#app .app-tab.active {
  color: #fff8f2;
  background: linear-gradient(135deg, #b94b19, #8f3215);
  box-shadow: 0 8px 20px rgba(115, 41, 16, .2);
}
#app .app-tab.active::after { display: none; }

#app #create-view { gap: 18px; }
#app .create-workflow {
  gap: 16px;
  padding: 19px 22px;
  background: linear-gradient(130deg, rgba(255, 252, 249, .98), rgba(255, 238, 226, .9));
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
}
#app .create-workflow li { gap: 12px; }
#app .create-workflow li:not(:last-child)::after {
  right: 8px;
  width: 18px;
  background: #dca789;
}
#app .create-workflow-number {
  width: 38px;
  height: 38px;
  color: #a74017;
  background: #fff5ec;
  border-color: #eabda0;
  border-radius: 12px;
  font-size: .7rem;
}
#app .create-workflow strong { font-size: .8rem; }
#app .create-workflow small { font-size: .7rem; }

#app .card {
  border-color: #e9d7c8;
  box-shadow: 0 15px 45px rgba(80, 38, 18, .07), 0 2px 7px rgba(80, 38, 18, .035);
}
#app .setup-card {
  min-height: 156px;
  background: linear-gradient(115deg, #fffaf5, #fff0e3 65%, #ffe8d6);
  border-color: #efc9ac;
}
#app .setup-card .card-copy p { max-width: 590px; }
#app .step-number {
  width: 44px;
  height: 44px;
  background: linear-gradient(145deg, #d85d22, #963913);
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(150, 57, 19, .2);
  font-size: .9rem;
}
#app .job-card { align-items: start; background: var(--surface); }
#app .job-card .card-copy p { max-width: 650px; }
#app .job-form { gap: 11px; margin-top: 4px; }
#app .job-form label:not(.rights-field) { color: var(--ink-soft); }
#app textarea {
  min-height: 170px;
  background: #fffaf6;
  border-color: #dfc7b8;
  line-height: 1.62;
}
#app select { background-color: #fffaf6; }
#app .credit-quote {
  margin-top: 13px;
  padding: 18px;
  background: linear-gradient(135deg, #fff8f1, #ffede0);
  border-color: #edcfb7;
}
#app .credit-quote-grid div { padding: 13px; border-color: #ead5c5; }
#app .credit-quote-grid strong { font-size: 1rem; }
#app .submit-button { min-height: 48px; margin-top: 9px; }

#app .result-card {
  background: linear-gradient(135deg, #fffcf9, #fff4eb);
  border-color: #eacbb7;
}
#app .job-progress { padding: 8px 0; }
#app .job-progress-step.is-active .job-progress-dot {
  box-shadow: 0 0 0 5px #fff8f1, 0 0 0 10px rgba(229, 99, 40, .15);
}
#app .job-meta div { padding: 16px; background: #fffaf5; }

#app .history-card,
#app .billing-card,
#app .costs-card { gap: 22px; padding: 30px; }
#app .history-heading {
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
#app .history-heading h2 { font-size: 1.45rem; }
#app .history-item,
#app .purchase-item { padding: 18px; background: #fffbf7; }
#app .history-item:hover,
#app .purchase-item:hover { background: #fff5ec; }

#app .subscription-summary-card {
  padding: 22px;
  background: linear-gradient(145deg, #fffaf5, #fff0e4);
  border-color: #edceb8;
  border-radius: 16px;
}
#app .subscription-facts > div { padding: 13px; }
#app .billing-balance > div {
  min-height: 110px;
  padding: 18px;
  background: linear-gradient(145deg, #fff9f3, #ffe9d9);
  border-color: #edcbb3;
}
#app .billing-balance strong { font-size: 1.35rem; }
#app .billing-product { min-height: 235px; padding: 21px; }
#app .billing-product.current { border-width: 2px; }
#app .cost-summary div { padding: 19px; }

:root[data-theme="dark"] #app .workspace-private {
  background: #2b1d17;
}
:root[data-theme="dark"] #app .app-tabs {
  background: rgba(45, 29, 22, .95);
  border-color: #654638;
}
:root[data-theme="dark"] #app .app-tab.active {
  color: #fff7ef;
  background: linear-gradient(135deg, #a6431c, #78301b);
}
:root[data-theme="dark"] #app .create-workflow {
  background: linear-gradient(130deg, #291c17, #392419);
  border-color: #654638;
}
:root[data-theme="dark"] #app .create-workflow-number {
  color: #ffb88d;
  background: #43281b;
  border-color: #815038;
}
:root[data-theme="dark"] #app .card { border-color: #523a2f; }
:root[data-theme="dark"] #app .setup-card {
  background: linear-gradient(115deg, #2a1c16, #3e2519 65%, #4d2c1b);
  border-color: #79513a;
}
:root[data-theme="dark"] #app .job-card { background: #231914; }
:root[data-theme="dark"] #app textarea,
:root[data-theme="dark"] #app select { background: #1c130f; border-color: #654738; }
:root[data-theme="dark"] #app .credit-quote {
  background: linear-gradient(135deg, #302017, #43291c);
  border-color: #785039;
}
:root[data-theme="dark"] #app .credit-quote-grid div,
:root[data-theme="dark"] #app .job-meta div { background: #291c16; border-color: #523a2f; }
:root[data-theme="dark"] #app .result-card {
  background: linear-gradient(135deg, #291b15, #392319);
  border-color: #684632;
}
:root[data-theme="dark"] #app .history-item,
:root[data-theme="dark"] #app .purchase-item { background: #2a1d17; }
:root[data-theme="dark"] #app .history-item:hover,
:root[data-theme="dark"] #app .purchase-item:hover { background: #37251b; }
:root[data-theme="dark"] #app .subscription-summary-card {
  background: linear-gradient(145deg, #2c1e18, #402719);
  border-color: #75503b;
}
:root[data-theme="dark"] #app .billing-balance > div {
  background: linear-gradient(145deg, #38251b, #4b2b1d);
  border-color: #76503a;
}
@media (max-width: 700px) {
  body.workspace-active .page-shell { padding-top: 24px; }
  #app .workspace-heading { align-items: start; flex-direction: column; gap: 10px; }
  #app .workspace-heading h1 { font-size: 2.4rem; }
  #app .app-tabs { top: 74px; }
  #app .create-workflow { gap: 8px; padding: 14px 10px; }
  #app .create-workflow li { gap: 7px; }
  #app .create-workflow li:not(:last-child)::after { right: -9px; }
  #app .history-card,
  #app .billing-card,
  #app .costs-card { padding: 20px; }
}
@media (max-width: 480px) {
  #app .app-tabs { top: 72px; padding: 4px; }
  #app .app-tab { min-width: 0; padding: 8px 6px; font-size: .74rem; }
  #app .create-workflow { padding: 12px 8px; }
  #app .create-workflow-number { width: 32px; height: 32px; }
  #app .create-workflow strong { font-size: .7rem; }
  #app .create-workflow li:not(:last-child)::after { top: 16px; }
}