/*
 * Sorry Studio workspace
 *
 * The visual composition is adapted from the GeFei ChatLLM template's
 * focused tool-workspace pattern. Product behaviour intentionally remains
 * in app.js: all generation, account and billing requests stay same-origin.
 */
:root {
  --studio-navy: #0d1020;
  --studio-panel: #151a2e;
  --studio-paper: #fbfbfe;
  --studio-wash: #f0f2f8;
  --studio-line: #dce1ee;
  --studio-muted: #67708a;
  --studio-accent: #6f5cf4;
  --studio-accent-soft: #eeebff;
}

body { background: var(--studio-wash); color: #13182a; }
.site-header.template-header,
.site-header {
  height: 72px;
  border-bottom-color: var(--studio-line);
  background: rgba(251, 251, 254, .91);
  box-shadow: 0 1px 0 rgba(21, 26, 46, .03);
}
.brand-mark { background: var(--studio-navy); color: #f3ef70; border-radius: 8px; }
.site-header nav { color: #4d556d; margin-left: 34px; }
.header-account {
  font-size: 14px;
  font-weight: 650;
  color: #4d556d;
  margin-left: auto;
  margin-right: 14px;
}
.header-cta { background: var(--studio-navy); padding: 11px 17px; }

.template-hero.hero {
  min-height: 500px;
  gap: 5vw;
  padding-top: 66px;
  padding-bottom: 54px;
  background:
    radial-gradient(circle at 86% 13%, rgba(111, 92, 244, .14), transparent 30%),
    radial-gradient(circle at 8% 15%, rgba(129, 191, 255, .13), transparent 23%),
    var(--studio-paper);
}
.template-hero .eyebrow { color: var(--studio-accent); font-weight: 700; }
.template-hero .pulse { background: var(--studio-accent); box-shadow: 0 0 0 5px #e7e3ff; }
.template-hero h1 { font-size: clamp(48px, 6.6vw, 94px); line-height: .91; letter-spacing: -.078em; }
.template-hero h1 em { color: var(--studio-accent); font-family: inherit; font-style: normal; }
.template-hero .hero-description { color: #576078; max-width: 530px; }
.template-hero .microcopy { color: #8a92a8; }
.template-hero .button-primary { background: var(--studio-accent); box-shadow: 0 10px 24px rgba(111, 92, 244, .2); }
.template-hero .text-link { color: #4c566f; }
.template-hero .hero-cards { filter: drop-shadow(0 26px 25px rgba(16, 20, 43, .11)); }
.template-hero .mini-card { box-shadow: 0 14px 26px rgba(20, 25, 48, .18); border: 1px solid rgba(255,255,255,.45); }

.template-brief {
  max-width: 1160px;
  margin: -9px auto 0;
  padding: 0 clamp(20px, 5vw, 86px);
}
.template-brief-inner {
  display: grid;
  grid-template-columns: 1.15fr repeat(3, .75fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--studio-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 14px 35px rgba(31, 38, 68, .06);
}
.template-brief-intro,
.template-brief-step { padding: 19px 20px; }
.template-brief-intro { background: #f8f7ff; }
.template-brief-intro strong,
.template-brief-step strong { display: block; font-size: 14px; letter-spacing: -.02em; }
.template-brief-intro p,
.template-brief-step p { margin: 4px 0 0; color: var(--studio-muted); font-size: 12px; line-height: 1.45; }
.template-brief-step { border-left: 1px solid var(--studio-line); }
.template-brief-step span { display: block; color: var(--studio-accent); font: 700 10px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; margin-bottom: 6px; }

.generator-section { padding-top: 82px; background: var(--studio-wash); }
.generator-section .section-heading { max-width: 720px; }
.generator-section .section-heading h2 { font-size: clamp(36px, 4.2vw, 62px); color: #12172a; }
.generator-section .section-heading > p:last-child { color: #687189; }
.generator-shell {
  max-width: 1380px;
  border: 1px solid var(--studio-line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 22px 50px rgba(29, 36, 62, .10);
}
.studio-workspace {
  grid-template-columns: 170px minmax(280px, .92fr) minmax(350px, 1.2fr) minmax(250px, .8fr);
  min-height: 610px;
  background: #fff;
}
.workspace-rail {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px 15px;
  color: #cbd3ed;
  background: var(--studio-navy);
}
.workspace-rail-brand {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  color: #11162a;
  background: #eef16b;
  font-weight: 900;
  text-decoration: none;
}
.workspace-rail-label {
  color: #8994b7;
  font: 700 9px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em;
}
.workspace-steps { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.workspace-steps li { display: grid; grid-template-columns: 26px 1fr; gap: 2px 8px; padding: 11px 8px; border-radius: 10px; }
.workspace-steps li.active { color: #11162a; background: #f5f6ff; }
.workspace-steps span { grid-row: 1 / span 2; color: #9e95ff; font: 700 10px ui-monospace, SFMono-Regular, Menlo, monospace; }
.workspace-steps .active span { color: var(--studio-accent); }
.workspace-steps strong { font-size: 12px; line-height: 1.2; }
.workspace-steps small { color: #8994b7; font-size: 10px; line-height: 1.25; }
.workspace-steps .active small { color: #6d7792; }
.workspace-rail-note { margin: auto 4px 0; color: #8c97b8; font-size: 10px; line-height: 1.5; }
.controls,
.editor { padding: 26px; border-color: var(--studio-line); background: #fff; }
.preview-area { background: var(--studio-navy); padding: 18px; }
.preview-bar { color: #b9c1db; border-bottom: 1px solid rgba(212, 220, 255, .13); padding-bottom: 14px; }
.preview-bar:before { content: 'LIVE CANVAS'; color: #8478ff; font-weight: 700; margin-right: 8px; }
.preview-bar > span { color: transparent; width: 0; overflow: hidden; }
.step-label { margin-bottom: 14px; }
.step-label span { width: 27px; height: 27px; background: #eae7ff; color: #5442d8; border-radius: 8px; font-weight: 800; }
.step-label p { color: #3a4258; font-weight: 800; }
.upload-zone { height: 166px; background: #fafaff; border-color: #b7b0e2; border-radius: 13px; }
.upload-zone.drag,
.upload-zone:hover { background: var(--studio-accent-soft); border-color: var(--studio-accent); }
.upload-icon { color: var(--studio-accent); }
.template-grid { gap: 8px; }
.template { min-height: 42px; border-radius: 9px; border-color: var(--studio-line); color: #444d64; }
.template:hover,
.template.active { color: #5140d7; background: var(--studio-accent-soft); border-color: var(--studio-accent); }
.custom-idea input,
.custom-idea select,
.editor textarea { border-color: var(--studio-line); background: #fcfcff; border-radius: 9px; }
.generate { background: var(--studio-accent); box-shadow: 0 9px 19px rgba(111,92,244,.2); }
.generator-status { color: #717b91; }
.slide-stage { min-height: 448px; }
.slide-slide { box-shadow: 0 20px 44px rgba(0,0,0,.34); }
.round-button { border-color: #6e7593; }
.editor { background: #fcfcff; }
.editor-note { color: #737d93; }
.text-button { color: #5847d9; }
.download-group .button-primary { background: var(--studio-accent); }

.story-strip { background: var(--studio-navy); color: #f9faff; }
.story-strip .eyebrow,
.story-strip li p { color: #bac4df; }
.story-strip li { border-top-color: rgba(220, 226, 255, .25); }
.story-strip li span { color: #978cff; }
.trend-copy { background: #e8ebf7; }
.examples-section { background: #f8f9fd; }
.benefits-section { background: #eef0f8; }
.example-grid article,
.benefit-grid article { border-color: var(--studio-line); background: #fff; }
.faq { background: var(--studio-paper); }
footer { background: var(--studio-navy); }

@media (max-width: 1040px) {
  .template-brief-inner { grid-template-columns: 1fr 1fr; }
  .template-brief-intro { grid-column: 1 / -1; }
  .template-brief-step:nth-child(2) { border-left: 0; }
  .studio-workspace { grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1fr); }
  .studio-workspace .editor { grid-column: 2 / -1; border-left: 1px solid var(--studio-line); border-top: 1px solid var(--studio-line); }
}
@media (max-width: 720px) {
  .site-header { height: 64px; }
  .site-header nav { margin-left: 0; }
  .header-account { margin-left: auto; margin-right: 10px; font-size: 12px; }
  .template-hero.hero { min-height: auto; padding-top: 56px; }
  .template-brief { padding: 0 16px; }
  .template-brief-inner { grid-template-columns: 1fr; }
  .template-brief-intro { grid-column: auto; }
  .template-brief-step { border-left: 0; border-top: 1px solid var(--studio-line); }
  .generator-section { padding-top: 64px; }
  .studio-workspace { grid-template-columns: 1fr; }
  .workspace-rail { display: none; }
  .studio-workspace .editor { grid-column: auto; border-left: 0; }
}

/* witch-gallery-photos */

.example-grid--photos article,
.example-grid--photos article:nth-child(1),
.example-grid--photos article:nth-child(2),
.example-grid--photos article:nth-child(3),
.example-grid--photos article:nth-child(4) {
  background: #fff;
  color: var(--ink, #17151e);
  padding: 0;
  overflow: hidden;
}
.example-grid--photos img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 17px 17px 0 0;
}
.example-grid--photos span {
  display: block;
  padding: 12px 16px 0;
  color: #7a8196;
}
.example-grid--photos strong {
  display: block;
  margin: 8px 16px 6px;
  color: var(--ink, #17151e);
}
.example-grid--photos p {
  padding: 0 16px 16px;
  margin: 0;
  color: #7a8196;
}