:root {
  color-scheme: light;
  --bg: #fbfbfc;
  --surface: #ffffff;
  --surface-muted: #f6f7f9;
  --surface-hover: #f0f2f5;
  --ink: #171a22;
  --muted: #6f7788;
  --faint: #a3abba;
  --line: #e3e6eb;
  --line-strong: #d3d8e0;
  --accent: #ff3d45;
  --accent-hover: #e92e37;
  --accent-soft: #fff0f1;
  --success: #14b86e;
  --danger: #cf2730;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-dialog: 0 24px 70px rgb(20 25 35 / 18%);
  font-family: Inter, "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
}

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

button {
  color: inherit;
}

h1, h2, h3, h4, h5, h6,
.brand, .onboarding-brand, .row-title, strong {
  font-family: "Plus Jakarta Sans", Inter, sans-serif;
}

.app-shell {
  display: grid;
  grid-template-rows: 72px minmax(0, 1fr);
  width: 100%;
  height: 100%;
  background: var(--surface);
}

.compact .app-shell {
  grid-template-rows: 72px minmax(0, 1fr) 42px;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 22px;
  min-width: 0;
  padding: 0 22px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.topbar .primary-nav{flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}.topbar .primary-nav::-webkit-scrollbar{display:none}.topbar .global-search{flex:0 1 280px}

.brand {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--accent);
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.018em;
  cursor: pointer;
}

.brand span,
.onboarding-brand span {
  color: var(--ink);
}

.language-control {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 8px;
  color: var(--muted);
  background: var(--surface);
}
.language-control select { border: 0; outline: 0; background: transparent; color: var(--ink); font-weight: 700; }

.onboarding-dialog {
  width: min(620px, calc(100vw - 32px));
  max-width: none;
  border: 0;
  border-radius: 20px;
  padding: 0;
  background: transparent;
  color: var(--ink);
  box-shadow: var(--shadow-dialog);
}

.onboarding-dialog::backdrop {
  background: rgb(23 26 34 / 58%);
  backdrop-filter: blur(6px);
}

.onboarding-card {
  border: 1px solid rgb(255 255 255 / 70%);
  border-radius: 20px;
  padding: 30px;
  background:
    radial-gradient(circle at 100% 0, rgb(255 61 69 / 12%), transparent 34%),
    var(--surface);
}

.onboarding-brand {
  color: var(--accent);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.015em;
}

.onboarding-progress {
  display: flex;
  gap: 6px;
  margin: 34px 0 26px;
}

.onboarding-progress span {
  width: 28px;
  height: 4px;
  border-radius: 99px;
  background: var(--line);
  transition: background 160ms ease;
}

.onboarding-progress span.active {
  background: var(--accent);
}

.onboarding-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 20px;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 25px;
}

.onboarding-card h1 {
  max-width: 520px;
  margin: 7px 0 12px;
  font-size: clamp(27px, 4vw, 38px);
  line-height: 1.06;
  letter-spacing: -0.022em;
}

.onboarding-copy {
  max-width: 520px;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.onboarding-card ul {
  display: grid;
  gap: 10px;
  margin: 23px 0 34px;
  padding: 0;
  list-style: none;
}

.onboarding-card li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 650;
}

.onboarding-card li i {
  color: var(--success);
  font-size: 18px;
}

.onboarding-actions,
.onboarding-actions > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.onboarding-actions {
  justify-content: space-between;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.onboarding-actions [hidden] {
  display: none;
}

.primary-nav {
  display: flex;
  align-self: stretch;
  gap: 6px;
}

.nav-item {
  position: relative;
  border: 0;
  padding: 2px 13px 0;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
}

.nav-item:hover {
  color: var(--ink);
}

.nav-item.active {
  color: var(--accent);
}

.nav-item.active::after {
  position: absolute;
  right: 12px;
  bottom: 0;
  left: 12px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--accent);
  content: "";
}

.global-search {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: end;
  width: min(100%, 285px);
  height: 40px;
  padding: 0 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
}

.global-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.global-search input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
}

.search-shortcut {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 3px 6px;
  background: var(--surface-muted);
  color: var(--muted);
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.1;
  cursor: pointer;
}

.search-shortcut:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.command-palette {
  width: min(720px, calc(100vw - 32px));
  max-height: min(720px, calc(100vh - 40px));
  border: 0;
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-dialog);
}

.command-palette::backdrop {
  background: rgb(24 27 35 / 48%);
  backdrop-filter: blur(4px);
}

.command-palette > section {
  display: flex;
  max-height: min(720px, calc(100vh - 40px));
  flex-direction: column;
}

.command-palette-search {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}

.command-palette-search > i {
  color: var(--accent);
  font-size: 22px;
}

.command-palette-search h2 {
  margin: 0 0 4px;
  font-size: 13px;
  letter-spacing: .02em;
}

.command-palette-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 19px;
}

.command-palette-results {
  display: grid;
  gap: 4px;
  overflow: auto;
  min-height: 180px;
  padding: 9px;
}

.command-palette-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 10px;
}

.command-palette-row.active {
  border-color: rgb(235 76 48 / 28%);
  background: var(--accent-soft);
}

.command-palette-main {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  min-width: 0;
  border: 0;
  padding: 10px 12px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.command-palette-main > i {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--surface);
  color: var(--accent);
  font-size: 18px;
  box-shadow: inset 0 0 0 1px var(--line);
}

.command-palette-main span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.command-palette-main strong,
.command-palette-main small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.command-palette-main strong { font-size: 13px; }
.command-palette-main small { color: var(--muted); font-size: 11px; }

.command-palette-context,
.command-palette-favorite {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.command-palette-context:hover,
.command-palette-favorite:hover,
.command-palette-favorite.active {
  background: var(--surface);
  color: var(--accent);
}

.command-palette-empty {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  min-height: 200px;
  color: var(--muted);
  text-align: center;
}

.command-palette-empty > i { color: var(--accent); font-size: 26px; }
.command-palette-empty strong { color: var(--ink); }
.command-palette-empty span { max-width: 360px; font-size: 12px; }

.command-palette-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 11px 16px;
  border-top: 1px solid var(--line);
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 10px;
}

.command-palette-footer span { display: inline-flex; align-items: center; gap: 4px; }
.command-palette-footer kbd { border: 1px solid var(--line-strong); border-radius: 4px; padding: 2px 5px; background: var(--surface); color: var(--ink); }

.workflow-prepare-dialog {
  width: min(1040px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  border: 0;
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-dialog);
}

.workflow-prepare-dialog::backdrop {
  background: rgb(24 27 35 / 48%);
  backdrop-filter: blur(4px);
}

.workflow-prepare-dialog form {
  display: flex;
  max-height: calc(100vh - 40px);
  flex-direction: column;
}

.workflow-prepare-header,
.workflow-prepare-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 20px;
}

.workflow-prepare-header { border-bottom: 1px solid var(--line); }
.workflow-prepare-header h2 { margin: 2px 0 0; font-size: 20px; }
.workflow-prepare-header .eyebrow { margin: 0; }

.workflow-prepare-body {
  display: grid;
  grid-template-columns: minmax(300px, .82fr) minmax(380px, 1.18fr);
  min-height: 380px;
  overflow: hidden;
}

.workflow-prepare-settings,
.workflow-output {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 15px;
  overflow: auto;
  padding: 20px;
}

.workflow-prepare-settings { border-right: 1px solid var(--line); }
.workflow-output { background: var(--surface-muted); }
.workflow-output > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.workflow-output h3,
.workflow-variable-fields h3 { margin: 0; font-size: 13px; }
.workflow-output small { color: var(--muted); font-size: 10px; }

.workflow-output pre {
  flex: 1;
  min-height: 300px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
  overflow: auto;
  background: var(--surface);
  color: var(--ink);
  font: 11px/1.65 ui-monospace, SFMono-Regular, Consolas, monospace;
  white-space: pre-wrap;
}

.workflow-prepare-project,
.workflow-context-toggle,
.workflow-no-variables {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: var(--surface-muted);
}

.workflow-prepare-project span,
.workflow-no-variables span { display: flex; align-items: center; gap: 8px; }
.workflow-prepare-project i,
.workflow-no-variables > i { color: var(--accent); font-size: 18px; }
.workflow-prepare-project small,
.workflow-no-variables small { color: var(--muted); font-size: 10px; }
.workflow-no-variables span { display: grid; gap: 2px; }

.workflow-variable-fields { display: grid; gap: 11px; }
.workflow-variable-fields .field span { font-size: 11px; font-weight: 700; }
.workflow-variable-fields .field em { color: var(--accent); font-size: 9px; font-style: normal; font-weight: 650; }

.workflow-context-toggle {
  justify-content: flex-start;
  cursor: pointer;
}

.workflow-context-toggle input {
  width: 17px;
  height: 17px;
  accent-color: var(--accent);
}

.workflow-context-toggle span { display: grid; gap: 2px; }
.workflow-context-toggle small { color: var(--muted); font-size: 10px; }

.workflow-context-check {
  display: grid;
  gap: 9px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.workflow-context-check > div { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; }
.workflow-context-check > div span,
.workflow-context-check p { color: var(--muted); }
.workflow-context-check ul { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.workflow-context-check li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 7px; border-radius: 7px; padding: 7px 8px; background: var(--surface-muted); font-size: 10px; }
.workflow-context-check li.ready i { color: #25945b; }
.workflow-context-check li.missing i,
.workflow-context-check li.missing small { color: #c65335; }

.workflow-prepare-actions {
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.workflow-prepare-actions > span { color: var(--muted); font-size: 11px; }
.workflow-prepare-actions > span.warning { color: #b84a31; font-weight: 700; }
.workflow-prepare-actions > div { display: flex; gap: 8px; }

.field-hint {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: -5px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.field-hint i { color: var(--accent); font-size: 15px; }
.field-hint code { border-radius: 4px; padding: 1px 4px; background: var(--surface-muted); color: var(--ink); }

@media (max-width: 760px) {
  .image-style-grid, .cinema-summary, .sync-preview-groups, .image-direction-rules { grid-template-columns: 1fr; }
  .workflow-prepare-body { grid-template-columns: 1fr; overflow: auto; }
  .workflow-prepare-settings { border-right: 0; border-bottom: 1px solid var(--line); overflow: visible; }
  .workflow-output { overflow: visible; }
  .workflow-output pre { min-height: 240px; }
  .workflow-prepare-actions { align-items: flex-start; flex-direction: column; }
  .workflow-prepare-actions > div { width: 100%; }
  .workflow-prepare-actions button { flex: 1; }
}

.chatgpt-status {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.chatgpt-status.ready {
  color: var(--ink);
}

.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--faint);
}

.ready .status-dot {
  background: var(--success);
  box-shadow: 0 0 0 4px rgb(20 184 110 / 10%);
}

.primary-button,
.secondary-button,
.quiet-button,
.danger-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  border-radius: var(--radius-sm);
  padding: 0 14px;
  font-size: 13px;
  font-weight: 680;
  cursor: pointer;
}

.primary-button {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
}

.primary-button:hover {
  border-color: var(--accent-hover);
  background: var(--accent-hover);
}

.secondary-button {
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
}

.secondary-button:hover,
.quiet-button:hover {
  background: var(--surface-hover);
}

.quiet-button {
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
}

.danger-button {
  border: 1px solid #ffd4d7;
  background: #fff6f6;
  color: var(--danger);
}

.icon-button {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.icon-button:hover {
  border-color: var(--line);
  background: var(--surface-hover);
  color: var(--ink);
}

.main-content {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: var(--surface);
}
.main-content > .view-guide { flex: 0 0 auto; margin: 14px 18px; }
.main-content > .prompt-layout,
.main-content > .three-column,
.main-content > .layout-workspace { flex: 1 1 auto; height: auto; min-height: 0; }

.three-column {
  display: grid;
  grid-template-columns: 225px minmax(370px, 1fr) minmax(330px, 0.95fr);
  height: 100%;
  min-height: 0;
}
.three-column.resizable-panes { grid-template-columns: var(--left-pane, 225px) 6px minmax(370px, 1fr) 6px var(--right-pane, 360px); }
.pane-splitter { position: relative; z-index: 5; min-width: 6px; cursor: col-resize; background: transparent; outline: none; }
.pane-splitter::after { content: ""; position: absolute; inset: 0 2px; background: var(--line); transition: background .15s ease, inset .15s ease; }
.pane-splitter:hover::after, .pane-splitter:focus-visible::after { inset-inline: 1px; background: var(--accent); }

.column {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  border-right: 1px solid var(--line);
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

.column:last-child {
  border-right: 0;
}

.column-inner {
  padding: 22px;
}

.sidebar-heading,
.content-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.sidebar-heading h2,
.content-heading h1,
.preview-header h2 {
  margin: 0;
  color: var(--ink);
  letter-spacing: -0.012em;
}

.sidebar-heading h2 {
  font-size: 16px;
}

.content-heading h1,
.preview-header h2 {
  font-size: 21px;
}

.subheading,
.meta,
.empty-copy {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.brand-list,
.category-list,
.prompt-list,
.file-groups,
.layout-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.brand-row,
.category-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 12px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.brand-row:hover,
.category-row:hover {
  background: var(--surface-muted);
}

.brand-row.active,
.category-row.active {
  border-color: #ffe1e3;
  background: var(--accent-soft);
}

.category-row {
  padding: 5px 6px;
}

.category-main {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
  flex: 1;
  padding: 7px 6px;
  text-align: left;
}

.category-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 17px;
}

.category-row.active .category-icon {
  background: var(--surface);
  color: var(--accent);
}

.category-row .row-title,
.category-row .row-subtitle {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  line-height: 1.28;
}

.row-title {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row-subtitle {
  display: block;
  overflow: hidden;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.heading-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.file-group {
  border-top: 1px solid var(--line);
}

.file-group:first-child {
  border-top: 0;
}

.group-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 3px 8px;
  font-size: 12px;
  font-weight: 750;
}

.group-count {
  margin-left: 7px;
  color: var(--faint);
  font-weight: 600;
}

.file-row,
.prompt-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 11px 10px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.file-row:hover,
.prompt-row:hover {
  background: var(--surface-muted);
}

.file-row.active,
.prompt-row.active {
  border-color: #ffe0e2;
  background: var(--accent-soft);
}

.file-row.placeholder {
  color: var(--faint);
}

.file-row.placeholder .row-title,
.file-row.placeholder .row-subtitle {
  color: var(--faint);
}

.file-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 18px;
}

.active .file-icon {
  background: #fff;
  color: var(--accent);
}

.row-date {
  color: var(--faint);
  font-size: 11px;
  white-space: nowrap;
}

.preview-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.preview-header {
  padding: 22px 22px 14px;
  border-bottom: 1px solid var(--line);
}

.eyebrow {
  margin: 0 0 7px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 16px;
}

.preview-body {
  min-height: 0;
  flex: 1;
  overflow: auto;
  padding: 20px 22px 28px;
}

.document-preview,
.prompt-preview {
  color: #2a2e37;
  font-size: 13px;
  line-height: 1.65;
  white-space: normal;
}

.document-preview > :first-child,
.visual-document > :first-child:not(.visual-document-badge) { margin-top: 0; }
.document-preview > :last-child,
.visual-document > :last-child { margin-bottom: 0; }
  .document-preview h1, .document-preview h2, .document-preview h3, .document-preview h4,
  .visual-document h1, .visual-document h2, .visual-document h3, .visual-document h4 { margin: 1.30em 0 .30em; color: var(--ink); line-height: 1.18; letter-spacing: -.025em; }
.document-preview h1, .visual-document h1 { font-size: 28px; }
.document-preview h2, .visual-document h2 { font-size: 22px; }
.document-preview h3, .visual-document h3 { font-size: 17px; }
.document-preview h4, .visual-document h4 { font-size: 14px; }
.document-preview p, .visual-document p { max-width: 78ch; margin: .75em 0; line-height: 1.72; }
.document-preview strong, .visual-document strong { color: var(--ink); font-weight: 750; }
.document-preview ul, .document-preview ol, .visual-document ul, .visual-document ol { display: grid; gap: .42em; max-width: 78ch; margin: .8em 0 1em; padding-left: 1.5em; }
.document-preview blockquote, .visual-document blockquote { max-width: 78ch; margin: 1.1em 0; border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; padding: 10px 14px; background: var(--accent-soft); color: var(--muted); }
.document-preview blockquote p, .visual-document blockquote p { margin: 0; }
.document-preview hr, .visual-document hr { height: 1px; margin: 24px 0; border: 0; background: var(--line); }
.document-preview code, .visual-document code { border-radius: 5px; padding: 2px 5px; background: var(--surface-muted); font: 11px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; }
.document-preview pre, .visual-document pre, .markdown-fallback { max-width: 100%; overflow: auto; border: 1px solid var(--line); border-radius: 11px; padding: 14px; background: #181b22; color: #f6f7fa; font: 11px/1.65 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre; }
.document-preview pre code, .visual-document pre code { padding: 0; background: transparent; color: inherit; }
.document-preview table, .visual-document table { width: 100%; margin: 15px 0; border-collapse: collapse; font-size: 11px; }
.document-preview th, .document-preview td, .visual-document th, .visual-document td { border: 1px solid var(--line); padding: 9px 10px; text-align: left; vertical-align: top; }
.document-preview th, .visual-document th { background: var(--surface-muted); color: var(--ink); font-weight: 750; }
.document-preview a, .visual-document a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.document-preview input[type="checkbox"], .visual-document input[type="checkbox"] { margin-right: 7px; accent-color: var(--accent); }

.document-preview.json {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px;
  background: var(--surface-muted);
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: 12px;
  tab-size: 2;
}

.empty-state {
  display: grid;
  place-items: center;
  height: 100%;
  padding: 30px;
  text-align: center;
}

.empty-state-inner {
  max-width: 320px;
}

.empty-state i {
  color: var(--faint);
  font-size: 42px;
}

.empty-state h2 {
  margin: 12px 0 6px;
  font-size: 18px;
}

.empty-state .primary-button {
  margin-top: 15px;
}

.prompt-layout {
  display: grid;
  grid-template-columns: 240px minmax(520px, 1fr) minmax(340px, 0.78fr);
  height: 100%;
  min-height: 0;
}

.prompt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  align-content: start;
  gap: 12px;
}

.prompt-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 14px;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 10px;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.filter-chip:hover,
.filter-chip.active {
  border-color: #ffb8bd;
  background: var(--accent-soft);
  color: var(--accent);
}

.prompt-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0;
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.prompt-card:hover,
.prompt-card.active {
  transform: translateY(-1px);
  border-color: #ffb8bd;
  box-shadow: 0 8px 24px rgb(20 25 35 / 7%);
}

.prompt-card.active {
  box-shadow: 0 0 0 2px var(--accent-soft), 0 8px 24px rgb(20 25 35 / 7%);
}

.prompt-card-media,
.prompt-card-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 8;
  overflow: hidden;
  background: linear-gradient(135deg, #fff0f1, #f3f4f7);
}

.prompt-card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.prompt-card-media.asset-image {
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.prompt-card-media.loaded > i {
  display: none;
}

.prompt-card-media > span {
  position: absolute;
  right: 8px;
  bottom: 8px;
  border-radius: 999px;
  padding: 4px 7px;
  background: rgb(23 26 34 / 72%);
  color: #fff;
  font-size: 8px;
  font-weight: 750;
  backdrop-filter: blur(6px);
}

.prompt-card-icon {
  aspect-ratio: 16 / 5;
  color: var(--accent);
  font-size: 31px;
}

.prompt-card-body {
  display: block;
  min-width: 0;
  padding: 12px 13px 8px;
}

.prompt-card-body .row-title,
.prompt-card-body .row-subtitle {
  display: block;
}

.prompt-card-body .row-title {
  display: -webkit-box;
  overflow: hidden;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.3;
}

.prompt-card-body .row-subtitle {
  margin-top: 5px;
  line-height: 1.4;
  white-space: normal;
}

.prompt-command {
  display: block;
  margin-top: 4px;
  color: var(--accent);
  font: 700 9px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.preview-command {
  display: inline-flex;
  margin: 5px 0 1px;
  border-radius: 999px;
  padding: 4px 7px;
  background: var(--accent-soft);
  color: var(--accent);
  font: 700 9px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.prompt-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 13px 12px;
}

.prompt-card-footer .tag {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 9px;
}

.prompt-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 17px;
}

.prompt-gallery figure {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
}

.chatgpt-status select {
  max-width: 220px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 650;
  outline: none;
  text-overflow: ellipsis;
}

.ai-site-list { display: grid; gap: 8px; margin-top: 12px; }
.ai-site-toggle { display: flex; gap: 9px; align-items: flex-start; cursor: pointer; }
.ai-site-toggle span { display: grid; gap: 2px; }
.ai-site-toggle small { color: var(--muted); overflow-wrap: anywhere; }
.ai-site-toggle .permission-state { display: flex; align-items: center; gap: 4px; color: var(--faint); font-size: 10px; }
.ai-site-toggle .permission-state.granted { color: var(--success); }

.asset-library-intro { margin-bottom: 18px; }
.asset-library-intro h3 { margin: 0 0 6px; }
.asset-library-intro p { margin: 0; color: var(--muted); }
.asset-slot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.asset-slot {
  min-height: 190px;
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: 16px;
  background: var(--surface);
  color: inherit;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.asset-slot > i { font-size: 30px; color: var(--accent); }
.asset-slot small { color: var(--muted); }
.asset-slot.filled { justify-content: flex-start; border-style: solid; }
.asset-slot.filled > div { margin-top: auto; display: flex; gap: 6px; }
.asset-slot-preview { width: 100%; aspect-ratio: 16 / 10; border-radius: 10px; background: var(--surface-muted) center/contain no-repeat; display: grid; place-items: center; }
.asset-slot-preview.loaded > i { display: none; }

.file-order { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 5px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 11px; }
.template-preview { display: grid; gap: 16px; }
.template-purpose,
.template-prompt,
.template-drop-zone { border: 1px solid var(--line); border-radius: 14px; padding: 16px; background: var(--surface); }
.template-purpose h3,
.template-prompt h3,
.template-drop-zone h3 { margin: 0 0 6px; }
.template-purpose p,
.template-drop-zone p { color: var(--muted); margin: 0; line-height: 1.55; }
.template-prompt pre { white-space: pre-wrap; max-height: 310px; overflow: auto; padding: 12px; border-radius: 10px; background: var(--surface-muted); font: 12px/1.55 ui-monospace, "Cascadia Code", monospace; }
.template-drop-zone { border-style: dashed; text-align: center; display: grid; justify-items: center; gap: 8px; transition: .16s ease; }
.template-drop-zone > i { font-size: 30px; color: var(--accent); }
.template-drop-zone.drag-active,
.file-row.drag-active { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px rgb(255 61 69 / 10%); }

.prompt-context-panel { display: grid; gap: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(135deg, var(--accent-soft), var(--surface)); }
.prompt-context-panel h3 { margin: 1px 0 3px; }
.prompt-context-panel p { margin: 0; color: var(--muted); }
.context-file-list { display: flex; flex-wrap: wrap; gap: 7px; }
.context-file-list span { display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 11px; }
.context-file-list .ready { color: var(--success); }
.context-file-list .missing { color: var(--muted); border-style: dashed; }

.workspace-view { height: 100%; overflow: auto; padding: 34px; background: var(--surface-muted); }
.workspace-intro { max-width: 760px; margin-bottom: 24px; }
.workspace-intro h1 { margin: 4px 0 8px; font-size: 34px; }
.workspace-intro p { color: var(--muted); line-height: 1.55; }
.ai-dock-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.ai-dock-card { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.ai-dock-card > i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); font-size: 24px; }
.ai-dock-card h2 { margin: 2px 0 4px; }
.ai-dock-card p { margin: 0 0 5px; color: var(--muted); }
.ai-dock-card small { color: var(--faint); }
.ai-dock-card button { grid-column: 1 / -1; }
.workspace-note { display: flex; gap: 12px; max-width: 900px; margin-top: 18px; padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.workspace-note > i { color: var(--success); font-size: 24px; }
.workspace-note p { margin: 5px 0 0; color: var(--muted); }

.planner-view { height: 100%; overflow: auto; padding: 28px; background: var(--surface-muted); }
.planner-header { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; margin-bottom: 20px; }
.planner-header h1 { margin: 3px 0 6px; }
.planner-header p { margin: 0; color: var(--muted); }

/* Product guidance and sales-readiness layer */
.view-guide {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
  margin: 0 0 18px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(135deg, #fff 0%, #fff8f7 100%);
}
.view-guide-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; color: var(--accent); background: var(--accent-soft); font-size: 22px; }
.view-guide-copy h1 { margin: 2px 0 6px; font-size: clamp(25px, 3vw, 36px); }
.view-guide-copy > p:last-of-type { margin: 0; color: var(--muted); line-height: 1.55; max-width: 820px; }
.view-guide-copy ul { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 0; margin: 14px 0 0; list-style: none; }
.view-guide-copy li { display: flex; gap: 6px; align-items: center; color: var(--ink); font-size: 13px; }
.view-guide-copy li i { color: var(--success); }
.view-guide-actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 165px; }
.view-guide-actions .quiet-button { font-size: 12px; }
.view-help-button { position: relative; z-index: 2; float: right; margin: 12px 18px -48px 0; border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 8px 12px; }
.prompt-layout + .view-help-button { float: none; }

.help-dialog, .create-menu-dialog { width: min(760px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 18px; box-shadow: var(--shadow-dialog); }
.help-dialog::backdrop, .create-menu-dialog::backdrop { background: rgb(20 25 35 / 42%); backdrop-filter: blur(3px); }
.help-dialog > section, .create-menu-dialog > section { background: #fff; }
.help-dialog-body { padding: 22px 26px; }
.help-lead { margin-top: 0; font-size: 18px; line-height: 1.55; }
.help-dialog-body ol { display: grid; gap: 10px; padding-left: 24px; }
.help-privacy { display: flex; gap: 12px; padding: 14px; border-radius: 12px; background: #edf8f1; color: var(--ink); }
.help-privacy i { color: var(--success); font-size: 22px; }
.help-privacy p { margin: 0; line-height: 1.5; }
.create-menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 24px; }
.create-menu-grid > button { display: flex; text-align: left; align-items: flex-start; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.create-menu-grid > button:hover { border-color: var(--accent); background: var(--accent-soft); }
.create-menu-grid > button > i { font-size: 24px; color: var(--accent); }
.create-menu-grid span { display: grid; gap: 5px; }
.create-menu-grid small { color: var(--muted); line-height: 1.4; }

.project-meaning { display: flex; gap: 8px; flex-direction: column; margin: 14px 0; padding: 12px 14px; border-radius: 10px; background: var(--surface-muted); }
.project-meaning span { color: var(--muted); }
.file-knowledge-intro { display: flex; gap: 10px; margin-bottom: 16px; padding: 14px; border-radius: 12px; background: #f7f8fb; color: var(--muted); line-height: 1.5; }
.file-knowledge-intro i { color: var(--accent); font-size: 20px; }
.file-knowledge-intro p { margin: 0; }
.file-status { justify-self: end; padding: 5px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: #edf8f1; color: #197146; }
.status-draft, .status-review { background: #fff5dd; color: #8b5a00; }
.status-approved { background: #e8f3ff; color: #145b9c; }
.document-tabs { overflow-x: auto; }
.document-overview-card { padding: 18px; border: 1px solid var(--line); border-radius: 14px; }
.document-overview-card h3 { margin-top: 0; }
.document-overview-card dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.document-overview-card dl div { padding: 10px; border-radius: 9px; background: var(--surface-muted); }
.document-overview-card dt { color: var(--muted); font-size: 11px; text-transform: uppercase; }
.document-overview-card dd { margin: 4px 0 0; font-weight: 700; }
.workspace-steps { margin: -4px 0 22px; padding: 12px 16px; border-radius: 11px; background: #17191f; color: #fff; font-weight: 700; }
.workspace-note summary { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.layout-detection-note, .layout-toggle-note { display: flex; gap: 8px; line-height: 1.45; color: var(--muted); }
.layout-run-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.monitor-preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.monitor-preview span { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
.monitor-preview b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; color: #fff; background: var(--accent); }
.repair-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.repair-comparison section { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.repair-comparison pre { max-height: 260px; overflow: auto; white-space: pre-wrap; font-size: 11px; }
.repair-confirm { width: 100%; margin-top: 16px; }
.update-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.update-summary span { display: grid; padding: 14px; text-align: center; border-radius: 11px; background: var(--surface-muted); }
.update-summary strong { font-size: 24px; }
.planner-panel-heading > div p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.planner-empty > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }

@media (max-width: 900px) {
  .view-guide { grid-template-columns: 42px 1fr; }
  .view-guide-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .create-menu-grid, .repair-comparison { grid-template-columns: 1fr; }
}
.planner-grid { display: grid; grid-template-columns: minmax(300px, var(--planner-pane, 420px)) 6px minmax(400px, 1fr); gap: 12px; align-items: start; }
.planner-panel { min-width: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; }
.planner-panel-heading { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.planner-panel-heading h2 { margin: 0; }
.planner-panel-heading span { color: var(--muted); }
.planner-list { display: grid; }
.planner-list:has(> .task-row, > .review-task-group) { gap: 9px; padding: 10px; background: var(--surface-soft); }
.planner-file { display: grid; grid-template-columns: 26px 22px 1fr; gap: 9px; align-items: start; width: 100%; padding: 13px 16px; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; cursor: pointer; }
.planner-file:hover { background: var(--surface-hover); }
.planner-file > span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 700; }
.planner-file > i { margin-top: 3px; color: var(--muted); }
.planner-file.done > i { color: var(--success); }
.planner-file strong,
.planner-file small { display: block; }
.planner-file small { margin-top: 3px; color: var(--muted); line-height: 1.35; }
.task-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 11px; align-items: start; margin: 0; padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.task-row.drag-active { border-color: var(--accent); background: var(--accent-soft); }
.task-row.today-task { border-color: #f0b34c; box-shadow: inset 3px 0 0 #f0b34c; }
.task-row.top-priority { background: linear-gradient(90deg, #fff9ed, #fff 28%); }
.task-row.done { opacity: .58; }
.task-row.done strong { text-decoration: line-through; }
.task-check { border: 0; background: transparent; color: var(--accent); font-size: 22px; padding: 0; cursor: pointer; }
.task-row small { display: block; margin-top: 3px; color: var(--muted); }
.task-row p { max-width: 70ch; margin: 6px 0 0; color: var(--muted); line-height: 1.55; }
.task-content { min-width: 0; }
.task-title-line { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.task-focus-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 999px; background: #fff0c9; color: #785000; font-size: 9px; font-weight: 800; }
.task-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.task-meta span { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 999px; background: var(--surface-soft); color: var(--muted); font-size: 9px; font-weight: 700; }
.task-meta .priority-high { background: #fff0f0; color: #b6222b; }
.task-meta .priority-medium { background: #fff8df; color: #7a5700; }
.task-meta .priority-low { background: #eef7ff; color: #285f89; }
.task-description { max-width: 70ch; margin-top: 8px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.task-description > :first-child { margin-top: 0; }
.task-description > :last-child { margin-bottom: 0; }
.task-subtasks { display: grid; gap: 4px; max-width: 70ch; margin-top: 10px; }
.task-subtasks > strong { margin-bottom: 2px; font-size: 10px; }
.task-subtask { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px; align-items: start; width: 100%; padding: 6px 8px; border: 0; border-radius: 8px; background: var(--surface-soft); color: var(--ink); text-align: left; cursor: pointer; }
.task-subtask i { margin-top: 1px; color: var(--accent); font-size: 15px; }
.task-subtask.done { opacity: .6; }
.task-subtask.done span { text-decoration: line-through; }
.task-actions { display: flex; flex-wrap: wrap; gap: 2px; justify-content: flex-end; }
.task-file-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.task-file-chips button { display: inline-flex; align-items: center; gap: 5px; min-width: 0; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); }
.task-file-chips button.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.task-file-chips span { max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-drop-hint { display: none; margin-top: 9px; padding: 8px; border: 1px dashed var(--line-strong); border-radius: 8px; color: var(--muted); font-size: 10px; }
.task-row:hover .task-drop-hint, .task-row.drag-active .task-drop-hint { display: block; }
.planner-empty { padding: 48px 22px; text-align: center; color: var(--muted); }
.planner-empty > i { font-size: 34px; color: var(--accent); }
@media (max-width: 1100px) { .planner-grid { grid-template-columns: 1fr; } .planner-grid > .pane-splitter { display: none; } .planner-header { flex-direction: column; } }

.prompt-gallery figure:first-child:last-child {
  grid-column: 1 / -1;
}

.prompt-gallery-image {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface-muted) center / contain no-repeat;
  color: var(--faint);
}

.prompt-gallery-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.prompt-gallery-image.loaded > i {
  display: none;
}

.prompt-gallery figcaption {
  padding: 8px 9px;
}

.prompt-gallery figcaption button,
.prompt-gallery figcaption span {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  overflow: hidden;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--muted);
  font-size: 9px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prompt-gallery figcaption button {
  color: var(--accent);
  cursor: pointer;
}

.prompt-preview-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  border-radius: 15px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 30px;
}

.prompt-image-editor {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 12px;
  background: var(--surface-muted);
}

.prompt-image-editor-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.prompt-image-editor-heading strong,
.prompt-image-editor-heading small {
  display: block;
}

.prompt-image-editor-heading strong {
  font-size: 12px;
}

.prompt-image-editor-heading small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
}

.prompt-image-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px dashed var(--line-strong);
  border-radius: 9px;
  padding: 13px;
  background: #fff;
  color: var(--muted);
  font-size: 10px;
}

.prompt-image-empty i {
  color: var(--accent);
  font-size: 20px;
}

.prompt-image-editor-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.prompt-image-editor-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
}

.prompt-image-editor-card > img,
.prompt-image-editor-card > .asset-image {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--surface-muted) center / cover no-repeat;
}

.prompt-image-editor-card > span:not(.asset-image) {
  display: block;
  overflow: hidden;
  padding: 7px;
  color: var(--muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prompt-image-editor-card > button {
  position: absolute;
  top: 5px;
  right: 5px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: rgb(23 26 34 / 72%);
  color: #fff;
  cursor: pointer;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 13px 0 0;
}

.tag {
  border-radius: 999px;
  padding: 5px 8px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
}

.section-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  margin: -4px 0 14px;
  border-bottom: 1px solid var(--line);
}

.section-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  border-bottom: 2px solid transparent;
  justify-content: center;
  min-width: 0;
  padding: 10px 4px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.section-tab.active {
  border-bottom-color: var(--accent);
  color: var(--accent);
}

.section-tab span {
  border-radius: 999px;
  padding: 2px 6px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 10px;
}

.brand-toolbar,
.inspiration-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
}

.readiness-strip {
  display: grid;
  grid-template-columns: auto minmax(150px, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
  border: 1px solid #ffd5d8;
  border-radius: 12px;
  padding: 12px 13px;
  background: linear-gradient(135deg, #fff7f7, #fff);
}

.readiness-score {
  display: grid;
  min-width: 64px;
}

.readiness-score strong {
  color: var(--accent);
  font-size: 21px;
  line-height: 1;
}

.readiness-score span,
.readiness-copy span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 9px;
}

.readiness-main,
.readiness-copy {
  display: grid;
  min-width: 0;
}

.readiness-copy strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.progress-track {
  height: 5px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 99px;
  background: #eceef2;
}

.progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff6a4b, var(--accent));
}

.readiness-alert,
.readiness-ok {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 8px;
  padding: 8px 9px;
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
}

.readiness-alert {
  border: 1px solid #ffb8bd;
  background: #fff;
  color: var(--accent);
  cursor: pointer;
}

.readiness-ok {
  color: #087947;
  background: #eaf9f1;
}

.sync-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--faint);
  font-size: 10px;
  text-align: right;
}

/* Portfolio management */
.portfolio-empty { min-height: 360px; display: grid; place-items: center; align-content: center; gap: 10px; padding: 32px; text-align: center; color: var(--muted); }
.portfolio-empty > i { font-size: 42px; color: var(--accent); }
.portfolio-empty h3, .portfolio-empty p { margin: 0; }
.portfolio-empty p { max-width: 520px; line-height: 1.55; }
.portfolio-panel-head, .portfolio-stage-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.portfolio-panel-head { margin-bottom: 14px; }
.portfolio-panel-head h3, .portfolio-stage-head h3 { margin: 0; }
.portfolio-project-list { display: grid; gap: 8px; }
.portfolio-project-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); text-align: left; cursor: pointer; }
.portfolio-project-row:hover, .portfolio-project-row.active { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--accent-soft); }
.portfolio-project-row > span:first-child { display: grid; gap: 4px; min-width: 0; }
.portfolio-project-row strong, .portfolio-project-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portfolio-project-row small, .portfolio-counts { color: var(--muted); }
.portfolio-counts { flex: none; font-size: 12px; }
.portfolio-counts b { color: var(--text); }
.portfolio-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.portfolio-meta span { display: grid; gap: 2px; padding: 7px 9px; border-radius: 9px; background: var(--surface-muted); font-size: 11px; }
.portfolio-meta b { color: var(--muted); font-weight: 600; }
.portfolio-preview { display: grid; gap: 18px; }
.portfolio-summary { margin: 0; line-height: 1.6; }
.portfolio-stage { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; }
.portfolio-stage-head p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.portfolio-drop-zone { min-height: 130px; border: 1.5px dashed var(--line-strong); border-radius: 14px; padding: 10px; transition: .15s ease; }
.portfolio-drop-zone.drag-active { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); }
.portfolio-drop-empty { min-height: 108px; display: grid; place-items: center; align-content: center; gap: 5px; color: var(--muted); }
.portfolio-drop-empty i { font-size: 28px; color: var(--accent); }
.portfolio-image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 9px; }
.portfolio-image-card { position: relative; display: grid; gap: 6px; min-width: 0; }
.portfolio-image-card .asset-image { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 10px; background: var(--surface-muted) center/contain no-repeat; }
.portfolio-image-card small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portfolio-image-card .icon-button { position: absolute; top: 5px; right: 5px; background: rgba(255,255,255,.92); }

.expert-profile-card { display: grid; gap: 10px; padding: 15px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 15px; background: var(--accent-soft); }
.expert-profile-card h3, .expert-profile-card p { margin: 0; }
.expert-profile-card > div { display: grid; gap: 5px; }
.expert-profile-card > span { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
.expert-profile-card > span i { color: var(--accent); font-size: 17px; }
.expert-profile-picker { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 13px; }
.expert-profile-picker > div:first-child { display: grid; gap: 3px; }
.expert-profile-picker small { color: var(--muted); }
.expert-profile-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; max-height: 190px; overflow: auto; }
.expert-profile-options label { display: flex; align-items: center; gap: 7px; padding: 8px; border-radius: 9px; background: var(--surface-muted); font-size: 12px; }
.portfolio-parse-notice, .document-validation { display: flex; align-items: flex-start; gap: 10px; padding: 12px; margin: 10px 0; border: 1px solid #efb84b66; border-radius: 12px; background: #fff8e8; color: #6c4a00; }
.portfolio-parse-notice.ready, .document-validation.ready { border-color: #2b9b6660; background: #effaf4; color: #17603f; }
.document-validation.error { border-color: #cf3d3d55; background: #fff0f0; color: #8d2424; }
.portfolio-parse-notice > span, .document-validation > span, .document-validation > div { display: grid; gap: 3px; }
.portfolio-parse-notice small, .document-validation small { line-height: 1.4; }
.document-validation ul { margin: 4px 0 0; padding-left: 18px; }
.document-validation p { margin: 2px 0 6px; line-height: 1.45; }
.document-revisions { display: grid; gap: 8px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.document-revisions h3 { margin: 0; }
.document-revisions button { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); text-align: left; }
.document-revisions button span { display: grid; gap: 2px; }
.document-revisions small { color: var(--muted); }
.portfolio-workspace-tabs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 14px; }
.portfolio-workspace-tabs button { padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 11px; }
.portfolio-workspace-tabs button.active { border-color: var(--accent); background: var(--accent); color: white; }
.production-overview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.production-overview article { display: grid; gap: 4px; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
.production-overview i { color: var(--accent); font-size: 22px; }
.production-overview strong { font-size: 20px; }
.production-overview span { color: var(--muted); font-size: 11px; }
.project-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.project-detail-grid > div { padding: 12px; border-radius: 12px; background: var(--surface-muted); }
.project-detail-grid small { color: var(--muted); }
.project-detail-grid p { margin: 5px 0 0; line-height: 1.45; }
.production-empty { min-height: 320px; display: grid; place-items: center; align-content: center; gap: 9px; padding: 28px; text-align: center; }
.production-empty > i { color: var(--accent); font-size: 40px; }
.production-empty h3, .production-empty p { margin: 0; }
.production-empty p { max-width: 520px; color: var(--muted); line-height: 1.5; }
.asset-recipe-list, .section-production-list { display: grid; gap: 10px; }
.asset-recipe-card { display: grid; grid-template-columns: 42px 1fr; gap: 13px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.asset-recipe-index { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--accent-soft); color: var(--accent); font-weight: 800; }
.asset-recipe-card h3, .asset-recipe-card p { margin: 4px 0; }
.asset-recipe-card p, .asset-recipe-card small { color: var(--muted); line-height: 1.45; }
.recipe-status { display: inline-block; color: var(--accent); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.recipe-actions, .viewport-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.recipe-actions button, .viewport-actions button { min-height: 32px; padding: 7px 9px; font-size: 11px; }
.section-production-card { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.section-production-card > div:first-child { display: grid; gap: 4px; min-width: 0; }
.section-production-card span { color: var(--accent); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.section-production-card h3, .section-production-card p { margin: 0; }
.section-production-card p { color: var(--muted); line-height: 1.45; }
.prototype-preview { display: grid; gap: 10px; margin-top: 16px; }
.prototype-preview h3 { margin: 0; }
.prototype-preview iframe { width: 100%; height: 520px; border: 1px solid var(--line); border-radius: 15px; background: white; }

@media (max-width: 760px) {
  .expert-profile-options, .project-detail-grid { grid-template-columns: 1fr; }
  .production-overview { grid-template-columns: 1fr; }
  .section-production-card { display: grid; }
}

/* Guided file questionnaires */
.questionnaire { display: grid; gap: 14px; margin-top: 18px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.questionnaire-head { display: flex; justify-content: space-between; gap: 16px; }
.questionnaire-head h3, .questionnaire-head p { margin: 0; }
.questionnaire-head p:not(.eyebrow) { margin-top: 6px; color: var(--muted); line-height: 1.45; }
.questionnaire-progress { height: fit-content; padding: 6px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 700; white-space: nowrap; }
.questionnaire-fields { display: grid; gap: 10px; }
.questionnaire-fields label { display: grid; gap: 6px; }
.questionnaire-fields label > span { font-size: 12px; font-weight: 650; }
.questionnaire-fields textarea { width: 100%; resize: vertical; min-height: 76px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-muted); color: var(--text); font: inherit; line-height: 1.4; }
.questionnaire-fields textarea:focus { outline: 2px solid color-mix(in srgb, var(--accent) 25%, transparent); border-color: var(--accent); }
.questionnaire-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.legal-notice { display: flex; gap: 9px; padding: 10px; border-radius: 10px; background: #fff7e8; color: #7c5110; font-size: 12px; line-height: 1.45; }
.legal-notice i { flex: none; font-size: 18px; }

.inspiration-actions {
  justify-content: flex-start;
}

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

.inspiration-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 0;
  background: var(--surface);
  text-align: left;
  cursor: pointer;
}

.inspiration-card:hover,
.inspiration-card.active {
  border-color: #ffb8bd;
  box-shadow: 0 6px 20px rgb(20 25 35 / 7%);
}

.inspiration-thumb {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  background: var(--surface-muted) center / cover no-repeat;
  color: var(--faint);
  font-size: 26px;
}

.inspiration-thumb.loaded > i,
.preview-image.loaded > i {
  display: none;
}

.link-thumb {
  gap: 4px;
  background: linear-gradient(135deg, #fff0f1, #f7f7fa);
  color: var(--accent);
}

.link-thumb small {
  max-width: 90%;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inspiration-card-copy {
  display: block;
  padding: 11px 12px 12px;
}

.inspiration-card-copy strong,
.inspiration-card-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inspiration-card-copy strong {
  font-size: 12px;
}

.inspiration-card-copy small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
}

.inspiration-drop {
  display: grid;
  justify-items: center;
  border: 1px dashed var(--line-strong);
  border-radius: 14px;
  padding: 42px 24px;
  background: var(--surface-muted);
  text-align: center;
}

.inspiration-drop > i {
  color: var(--accent);
  font-size: 40px;
}

.inspiration-drop h3 {
  margin: 12px 0 4px;
}

.inspiration-drop p {
  max-width: 420px;
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.preview-image {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 280px;
  border-radius: 12px;
  background: var(--surface-muted) center / contain no-repeat;
  color: var(--faint);
  font-size: 44px;
}

.link-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  background: var(--accent-soft);
  color: var(--accent);
}

.link-preview strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inspiration-note {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.preview-switch {
  display: inline-flex;
  gap: 3px;
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 3px;
  background: var(--surface-muted);
}

.preview-switch button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  border-radius: 6px;
  padding: 6px 9px;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.preview-switch button.active {
  background: var(--surface);
  color: var(--accent);
  box-shadow: 0 1px 3px rgb(20 25 35 / 10%);
}

.visual-document,
.token-dashboard,
.sitemap-visual,
.page-map,
.content-model-visual,
.legal-dashboard,
.checklist-dashboard,
.redirect-dashboard {
  display: grid;
  gap: 14px;
}

.visual-document-badge {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 6px;
  border-radius: 999px;
  padding: 6px 9px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.legal-notice,
.legal-score {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 12px;
  padding: 13px;
}

.legal-notice {
  border: 1px solid #ffd6ac;
  background: #fff8ec;
  color: #9a5500;
}

.legal-notice > i {
  flex: 0 0 auto;
  font-size: 24px;
}

.legal-notice strong,
.legal-notice small,
.legal-score strong,
.legal-score small,
.legal-area strong,
.legal-area small {
  display: block;
}

.legal-notice strong,
.legal-score > span > strong {
  font-size: 11px;
}

.legal-notice small,
.legal-score small,
.legal-area small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.4;
}

.legal-score {
  border: 1px solid var(--line);
  background: var(--surface);
}

.legal-score-ring {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: radial-gradient(circle at center, #fff 57%, transparent 59%), conic-gradient(var(--accent) calc(var(--score) * 1%), #eceef2 0);
}

.legal-score-ring strong {
  color: var(--accent);
  font-size: 13px;
}

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

.legal-area {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  background: var(--surface-muted);
  color: var(--faint);
}

.legal-area.complete {
  border-color: #c8eddc;
  background: #f2fbf6;
  color: var(--success);
}

.legal-area > i:first-child {
  font-size: 19px;
}

.legal-area strong {
  color: var(--ink);
  font-size: 10px;
}

.checklist-card {
  display: grid;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px;
  background: var(--surface);
}

.checklist-card h3 {
  margin: 2px 4px 8px;
  font-size: 12px;
}

.check-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border-radius: 7px;
  padding: 7px 8px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.check-row.done {
  background: #f1faf5;
  color: #087947;
}

.check-row i {
  margin-top: 1px;
  font-size: 15px;
}

.checklist-summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.checklist-summary strong {
  color: var(--accent);
  font-size: 28px;
}

.checklist-summary span {
  color: var(--muted);
  font-size: 11px;
}

.progress-track.large {
  height: 8px;
  margin: -5px 0 0;
}

.redirect-list {
  display: grid;
  gap: 8px;
}

.redirect-row {
  display: grid;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px;
}

.redirect-row > span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.redirect-row code {
  overflow: hidden;
  border-radius: 6px;
  padding: 6px;
  background: var(--surface-muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.redirect-row small {
  justify-self: start;
  border-radius: 99px;
  padding: 3px 6px;
  background: #fff2db;
  color: #9a5500;
  font-size: 9px;
}

.redirect-row small.tested {
  background: #eaf9f1;
  color: #087947;
}

.token-section {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  background: var(--surface);
}

.image-direction-section { display: grid; gap: 13px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); border-radius: 16px; padding: 16px; background: linear-gradient(145deg, #fff, #fff8f7); }
.image-direction-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.image-direction-head h3, .image-direction-head p { margin: 0; }
.image-direction-head > span { border-radius: 999px; padding: 5px 8px; background: var(--accent-soft); color: var(--accent); font-size: 10px; font-weight: 800; }
.cinema-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cinema-summary article { display: flex; align-items: flex-start; gap: 9px; min-width: 0; border: 1px solid var(--line); border-radius: 11px; padding: 10px; background: var(--surface); }
.cinema-summary i { flex: none; color: var(--accent); font-size: 20px; }
.cinema-summary span { display: grid; gap: 3px; min-width: 0; }
.cinema-summary small { color: var(--muted); font-size: 9px; text-transform: uppercase; }
.cinema-summary strong { display: -webkit-box; overflow: hidden; font-size: 10px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.image-style-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.image-style-card { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; padding: 13px; background: var(--surface); }
.image-style-card::before { position: absolute; inset: 0 0 auto; height: 4px; content: ""; background: linear-gradient(90deg, var(--accent), #ff9d70); }
.image-style-card.style-2::before { background: linear-gradient(90deg, #2f8664, #8dc4a9); }
.image-style-card.style-3::before { background: linear-gradient(90deg, #5d4fe0, #ff5964); }
.image-style-number { align-self: end; color: var(--faint); font-size: 10px; font-weight: 800; }
.image-style-card h4, .image-style-card p { margin: 0; }
.image-style-card h4 { font-size: 14px; }
.image-style-card p { color: var(--muted); font-size: 10px; line-height: 1.45; }
.image-style-card dl { display: grid; gap: 7px; margin: 0; }
.image-style-card dl > div { display: grid; gap: 2px; }
.image-style-card dt { color: var(--faint); font-size: 8px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.image-style-card dd { margin: 0; font-size: 9px; line-height: 1.4; }
.image-style-card button { margin-top: auto; justify-content: center; }
.image-direction-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.image-direction-rules > div { border-radius: 10px; padding: 10px; background: var(--surface-muted); }
.image-direction-rules p { margin: 4px 0 0; color: var(--muted); font-size: 9px; line-height: 1.45; }

.sync-dialog { width: min(840px, calc(100vw - 32px)); max-height: min(760px, calc(100vh - 32px)); border: 0; border-radius: 18px; padding: 0; box-shadow: 0 28px 80px rgb(20 25 35 / 24%); }
.sync-dialog::backdrop { background: rgb(20 25 35 / 42%); backdrop-filter: blur(3px); }
.sync-dialog > section { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: inherit; background: var(--surface); }
.sync-dialog-body { display: grid; gap: 13px; overflow: auto; padding: 18px 20px; }
.sync-authority { display: flex; align-items: flex-start; gap: 10px; border: 1px solid #c8eddc; border-radius: 12px; padding: 12px; background: #effaf4; color: #17603f; }
.sync-authority i { font-size: 22px; }
.sync-authority p { margin: 0; line-height: 1.5; }
.sync-preview-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.sync-preview-group { min-width: 0; border: 1px solid var(--line); border-radius: 12px; padding: 11px; }
.sync-preview-group header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 7px; }
.sync-preview-group header i { color: var(--accent); font-size: 18px; }
.sync-preview-group header span { border-radius: 99px; padding: 3px 6px; background: var(--surface-muted); font-size: 9px; font-weight: 800; }
.sync-preview-group ul { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.sync-preview-group li { display: grid; gap: 2px; min-width: 0; border-top: 1px solid var(--line); padding-top: 6px; font-size: 10px; }
.sync-preview-group li span, .sync-preview-group li small { overflow-wrap: anywhere; }
.sync-preview-group li small, .sync-preview-group > p { color: var(--muted); font-size: 8px; }
.sync-unrelated { border-radius: 10px; padding: 10px; background: var(--surface-muted); font-size: 10px; }
.sync-unrelated summary { cursor: pointer; font-weight: 750; }
.sync-unrelated p { margin: 7px 0 0; color: var(--muted); line-height: 1.5; }
.sync-history-list { display: grid; gap: 10px; }
.sync-history-run { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--surface); }
.sync-history-run header { display: grid; gap: 4px; }
.sync-history-run header span { color: var(--muted); font-size: 10px; line-height: 1.45; }
.sync-history-run ul { display: grid; gap: 7px; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid var(--line); list-style: none; }
.sync-history-run li { display: grid; gap: 2px; }
.sync-history-run li small { color: var(--muted); overflow-wrap: anywhere; }
.sync-warning { display: flex; align-items: center; gap: 7px; margin: 0; color: #995800; font-size: 10px; }
.sync-pending { position: relative; }
.sync-pending-dot { width: 7px; height: 7px; border-radius: 50%; background: #f19a2a; box-shadow: 0 0 0 3px #fff0d8; }

.token-section h3,
.content-model-visual h3 {
  margin: 0 0 12px;
  font-size: 13px;
}

.empty-token p {
  margin: 0;
  color: var(--faint);
  font-size: 11px;
}

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

.color-token {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.color-swatch {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid rgb(20 25 35 / 9%);
  border-radius: 9px;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 35%);
}

.color-token strong,
.color-token small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.color-token strong {
  font-size: 10px;
}

.color-token small {
  margin-top: 3px;
  color: var(--muted);
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: 9px;
}

.scale-list {
  display: grid;
  gap: 9px;
}

.scale-row {
  display: grid;
  grid-template-columns: 85px minmax(20px, 1fr) auto;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 10px;
}

.scale-demo {
  justify-self: start;
  height: 9px;
  border-radius: 2px;
  background: var(--accent);
}

.scale-demo.radius-demo {
  height: 26px;
  background: #ffe1e3;
  outline: 1px solid #ffb8bd;
}

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

.kv-grid > div,
.breakpoint-grid > div {
  display: grid;
  gap: 4px;
  border-radius: 9px;
  padding: 10px;
  background: var(--surface-muted);
}

.kv-grid small,
.breakpoint-grid small {
  color: var(--muted);
  font-size: 9px;
}

.kv-grid strong,
.breakpoint-grid strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
}

.breakpoint-grid i {
  color: var(--accent);
  font-size: 20px;
}

.sitemap-flow {
  position: relative;
  display: grid;
  gap: 7px;
  padding-left: 5px;
}

.sitemap-node {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 8px 11px;
  background: var(--surface);
  font-size: 11px;
}

.sitemap-node.depth-1 { margin-left: 22px; }
.sitemap-node.depth-2 { margin-left: 44px; }
.sitemap-node.depth-3 { margin-left: 66px; }
.sitemap-node.depth-4 { margin-left: 88px; }

.node-dot {
  width: 8px;
  height: 8px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: #fff;
}

.page-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.page-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 13px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
}

.page-card-body {
  padding: 10px 13px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.page-card-body h3,
.page-card-body h4,
.page-card-body p {
  margin: 6px 0;
}

.content-model-visual section {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
}

.content-model-visual h3 span {
  color: var(--faint);
}

.model-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.model-chip-list span {
  border-radius: 7px;
  padding: 6px 8px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 10px;
}

.visual-empty {
  display: grid;
  justify-items: center;
  padding: 36px 18px;
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  text-align: center;
}

.visual-empty i {
  color: var(--accent);
  font-size: 34px;
}

.visual-empty h3 {
  margin: 10px 0 4px;
}

.visual-empty p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.layout-workspace {
  display: grid;
  grid-template-columns: 245px minmax(390px, 1fr) minmax(300px, 0.8fr);
  height: 100%;
}

.layout-mode-card {
  display: block;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 13px;
  background: var(--surface);
  text-align: left;
  cursor: pointer;
}

.layout-mode-card.active {
  border-color: #ffc8cb;
  background: var(--accent-soft);
}

.layout-item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 10px;
  background: var(--surface);
}

.layout-number {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 7px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.layout-item-controls {
  display: flex;
  gap: 2px;
}

.layout-summary {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.summary-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  background: var(--surface-muted);
}

.summary-card h3 {
  margin: 0 0 8px;
  font-size: 14px;
}

.summary-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.shortcut-bar {
  display: none;
  align-items: center;
  gap: 0;
  min-width: 0;
  padding: 0 18px;
  border-top: 1px solid var(--line);
  background: #fcfcfd;
  overflow: hidden;
}

.compact .shortcut-bar {
  display: flex;
}

.shortcut-item {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 0 16px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
  cursor: pointer;
}

.shortcut-item:hover {
  background: var(--surface-hover);
  color: var(--ink);
}

.shortcut-item:first-child {
  padding-left: 0;
}

.shortcut-item:last-child {
  border-right: 0;
}

kbd {
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: 3px 6px;
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 10px;
  font-weight: 750;
}

.shortcut-item.prompt-shortcut,
.shortcut-item.prompt-shortcut kbd {
  color: var(--accent);
}

.shortcut-edit {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  border: 0;
  padding: 6px 8px;
  background: transparent;
  color: var(--accent);
  font-size: 10px;
  font-weight: 750;
  cursor: pointer;
}

.editor-dialog {
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100vh - 44px);
  border: 0;
  border-radius: 14px;
  padding: 0;
  box-shadow: var(--shadow-dialog);
}

.editor-dialog::backdrop {
  background: rgb(24 27 35 / 38%);
  backdrop-filter: blur(2px);
}

.editor-dialog form {
  display: flex;
  max-height: calc(100vh - 44px);
  flex-direction: column;
}

.dialog-header,
.dialog-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 19px 22px;
}

.dialog-header {
  border-bottom: 1px solid var(--line);
}

.dialog-header h2 {
  margin: 0;
  font-size: 20px;
}

.dialog-actions {
  justify-content: flex-end;
  border-top: 1px solid var(--line);
}

.dialog-fields {
  display: grid;
  gap: 15px;
  overflow: auto;
  padding: 20px 22px;
}

.field,
.field-row {
  display: grid;
  gap: 7px;
}

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

.field label {
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  padding: 10px 11px;
  outline: none;
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
}

.field textarea {
  min-height: 220px;
  resize: vertical;
  font-family: "Cascadia Code", Consolas, monospace;
  line-height: 1.55;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.toast {
  position: fixed;
  right: 18px;
  bottom: 56px;
  z-index: 10;
  max-width: 360px;
  transform: translateY(12px);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 11px 14px;
  background: #20242d;
  color: #fff;
  box-shadow: 0 12px 30px rgb(20 25 35 / 18%);
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease, transform 150ms ease;
}

.toast.visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.toast button { border: 0; border-radius: 6px; margin-left: 10px; padding: 4px 7px; background: #fff; color: #20242d; cursor: pointer; font: inherit; font-weight: 700; }

.toast.error {
  background: #8e1e25;
}

.home-view {
  height: 100%;
  overflow: auto;
  padding: 34px clamp(24px, 4vw, 64px) 70px;
  background: var(--bg);
}

.home-hero,
.home-project-head,
.home-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.home-hero {
  max-width: 1200px;
  margin: 0 auto 26px;
}

.home-hero h1 {
  margin: 5px 0 8px;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.04;
  letter-spacing: -0.024em;
}

.home-hero > div > p:last-child,
.home-project-head p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.home-project-card,
.home-panel,
.home-projects {
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}

.home-project-card {
  padding: 24px;
  box-shadow: 0 10px 32px rgb(26 30 38 / 5%);
}

.home-project-label {
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.home-project-head h2,
.home-panel h2,
.home-projects h2 {
  margin: 5px 0;
  letter-spacing: -0.015em;
}

.home-progress {
  height: 7px;
  margin: 23px 0 18px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--surface-muted);
}

.home-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #ff765f);
}

.home-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.home-metrics div {
  display: grid;
  gap: 3px;
  border-right: 1px solid var(--line);
}

.home-metrics div:last-child { border-right: 0; }
.home-metrics strong { font-size: 21px; }
.home-metrics span { color: var(--muted); font-size: 11px; }

.home-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  max-width: 1200px;
  margin: 18px auto;
}

.home-panel,
.home-projects { padding: 21px; }
.home-panel-head { margin-bottom: 15px; }
.home-panel-head h2 { font-size: 19px; }
.home-panel-head > span { color: var(--muted); font-size: 12px; }

.home-next-list,
.home-workflow-list,
.home-project-list { display: grid; gap: 7px; }

.home-next-list button,
.home-workflow-list button,
.home-project-list button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 11px;
  background: var(--surface-muted);
  text-align: left;
  cursor: pointer;
}

.home-next-list button:hover,
.home-workflow-list button:hover,
.home-project-list button:hover { border-color: var(--line-strong); background: var(--surface-hover); }

.home-next-list button > span,
.project-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
}

.home-next-list button div,
.home-workflow-list button span,
.home-project-list button > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.home-next-list small,
.home-workflow-list small,
.home-project-list small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.home-workflow-list button > i:first-child { color: var(--accent); font-size: 20px; }
.home-project-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-projects { margin-top: 18px; }

.home-complete {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px;
  border-radius: 12px;
  background: #effaf5;
}

.home-complete > i { color: var(--success); font-size: 25px; }
.home-complete > div { display: grid; gap: 3px; }
.home-complete span { color: var(--muted); font-size: 11px; }

.home-backup {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 1200px;
  margin: 18px auto 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 21px;
  background: var(--surface);
}

.home-backup > div:first-child {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.home-backup > div:first-child > i {
  color: var(--success);
  font-size: 25px;
}

.home-backup span { display: grid; gap: 3px; min-width: 0; }
.home-backup small { color: var(--muted); line-height: 1.4; }
.home-backup .storage-usage { align-items: center; display: flex; font-variant-numeric: tabular-nums; gap: 6px; margin-top: 4px; }
.home-backup-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.home-backup button:disabled { cursor: not-allowed; opacity: .45; }

@media (max-width: 980px) {
  .app-shell {
    grid-template-rows: 112px minmax(0, 1fr);
  }

  .compact .app-shell {
    grid-template-rows: 112px minmax(0, 1fr) 42px;
  }

  .topbar {
    grid-template-columns: auto minmax(180px, 1fr) auto auto;
    grid-template-rows: 64px 48px;
    gap: 12px;
  }

  .primary-nav {
    order: 4;
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
  }

  .global-search {
    justify-self: stretch;
    width: 100%;
  }

  .chatgpt-status {
    display: none;
  }

  .three-column,
  .prompt-layout,
  .layout-workspace {
    grid-template-columns: 180px minmax(320px, 1fr) 300px;
  }

  .shortcut-item {
    padding: 0 8px;
  }

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

}

/* PromptDock 8.3 · guided AI handoff */
.handoff-tray {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1200;
  width: min(430px, calc(100vw - 32px));
  max-height: min(620px, calc(100vh - 36px));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 22px 70px rgba(22, 27, 39, .2);
  backdrop-filter: blur(18px);
}
.handoff-tray:empty { display: none; }
.handoff-tray > header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 52px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, #fff7f6, #fff);
}
.handoff-tray.collapsed { width: 280px; }
.handoff-tray.collapsed > header { border-bottom: 0; }
.handoff-tray header div { display: grid; min-width: 0; }
.handoff-tray header strong { font-family: "Plus Jakarta Sans", sans-serif; font-size: 13px; }
.handoff-tray header small { color: var(--muted); font-size: 10px; }
.handoff-grip { border: 0; background: transparent; color: var(--muted); cursor: grab; font-size: 20px; padding: 7px 4px; }
.handoff-grip:active { cursor: grabbing; }
.handoff-items { max-height: 450px; overflow: auto; padding: 9px; display: grid; gap: 7px; }
.handoff-item {
  display: grid;
  grid-template-columns: 22px 22px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.handoff-item.done { opacity: .58; }
.handoff-index { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 10px; font-weight: 800; }
.handoff-item > i { margin-top: 2px; color: var(--accent); font-size: 18px; }
.handoff-item > div { min-width: 0; display: grid; gap: 3px; }
.handoff-item strong, .handoff-item small { overflow-wrap: anywhere; }
.handoff-item strong { font-size: 12px; }
.handoff-item small { color: var(--muted); font-size: 10px; line-height: 1.45; }
.handoff-actions { grid-column: 3; display: flex !important; flex-wrap: wrap; align-items: center; gap: 5px !important; margin-top: 4px; }
.handoff-actions .quiet-button { min-height: 28px; padding: 5px 8px; font-size: 10px; }
.handoff-actions .icon-button { width: 28px; height: 28px; }
.handoff-empty { display: grid; place-items: center; gap: 7px; min-height: 110px; color: var(--muted); font-size: 12px; }
.handoff-empty i { font-size: 27px; }
.handoff-tray > footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 11px; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; }

/* Portfolio production and website states */
.portfolio-asset-guide { margin: 12px 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); color: var(--muted); line-height: 1.55; }
.portfolio-ai-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.portfolio-rules-editor { display: grid; gap: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); }
.portfolio-design-rules { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.portfolio-design-rules > header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 11px; }
.portfolio-design-rules h3 { margin: 2px 0 0; font-size: 15px; }
.portfolio-rule-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 9px; }
.portfolio-rule-grid article { padding: 11px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.portfolio-rule-grid article.customized { border-color: rgba(255, 69, 78, .34); background: #fff9f8; }
.portfolio-rule-grid article > span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.portfolio-rule-grid article.customized > span { color: var(--accent); }
.portfolio-rule-grid strong { font-size: 11px; }
.portfolio-rule-grid p { margin: 4px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; overflow-wrap: anywhere; }
.portfolio-rules-editor .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.portfolio-markdown-preview { max-height: 50vh; overflow: auto; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; white-space: pre-wrap; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; line-height: 1.55; }
.snapshot-groups { display: grid; gap: 18px; padding: 16px; }
.snapshot-drop-surface { min-height: 100%; border: 2px dashed transparent; transition: border-color .16s ease, background .16s ease; }
.snapshot-drop-surface.drag-active { border-color: var(--accent); background: var(--accent-soft); }
.snapshot-groups > section > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.snapshot-groups > section > header span { min-width: 24px; padding: 3px 7px; border-radius: 999px; background: var(--surface-soft); text-align: center; color: var(--muted); font-size: 10px; }
.snapshot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.snapshot-card { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 9px; align-items: center; min-width: 0; padding: 7px; border: 1px solid var(--line); border-radius: 12px; background: #fff; text-align: left; }
.snapshot-card.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.snapshot-card .asset-image { width: 62px; height: 54px; border-radius: 8px; overflow: hidden; background: var(--surface-soft); }
.snapshot-card .asset-image img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.snapshot-card > span:nth-child(2) { display: grid; min-width: 0; gap: 3px; }
.snapshot-card strong, .snapshot-card small { overflow-wrap: anywhere; }
.snapshot-card small { color: var(--muted); font-size: 9px; }
.page-snapshot-preview { min-height: 420px; max-height: 72vh; overflow: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); }
.page-snapshot-preview img { display: block; width: 100%; height: auto; object-fit: contain; object-position: top center; }
.workflow-variable .field-help, .workflow-variable .field-example { display: block; color: var(--muted); font-size: 10px; line-height: 1.45; }
.workflow-variable .field-example { color: #5e6472; }
.variable-research { justify-self: start; margin-top: 2px; }

/* PromptDock 8.4 · return jobs, portfolio production and project evidence */
.handoff-item { position: relative; }
.handoff-copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; align-items: start; }
.handoff-thumb { display: block; width: 22px; height: 22px; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-soft); }
.handoff-thumb img { width: 100%; height: 100%; object-fit: cover; }
.handoff-audio { width: 100%; height: 30px; margin-top: 4px; }
.handoff-tray footer .recording { color: #fff; background: var(--accent); animation: recordingPulse 1.25s ease-in-out infinite; }
@keyframes recordingPulse { 50% { box-shadow: 0 0 0 5px rgba(255,69,78,.14); } }
.handoff-return-zone { margin-top: 8px; padding: 10px; border: 1.5px dashed #cbd1dc; border-radius: 10px; background: #fafbfc; color: var(--muted); text-align: center; transition: .16s ease; }
.handoff-return-zone.drag-active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); transform: translateY(-1px); }
.handoff-item.completed .handoff-return-zone { border-style: solid; border-color: #7dcf9b; background: #effaf2; color: #137a3b; }
.handoff-item.waiting-result { box-shadow: inset 3px 0 0 #f2a33b; }
.return-image-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.return-image-grid figure { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); }
.return-image-grid img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #eef0f3; }
.return-image-grid figcaption { padding: 9px 11px; color: var(--muted); font-size: 11px; }
.review-import-preview { display: grid; gap: 10px; }
.review-import-preview article { padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.review-import-preview article small { display: block; margin-top: 3px; color: var(--muted); }

.portfolio-stage-switch { position: sticky; top: 0; z-index: 4; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0 0 14px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.94); backdrop-filter: blur(12px); }
.portfolio-stage-switch button { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-weight: 700; }
.portfolio-stage-switch button.active { background: var(--accent); color: #fff; }
.portfolio-stage-switch span { min-width: 20px; padding: 1px 6px; border-radius: 999px; background: rgba(0,0,0,.08); }
.portfolio-client-logo { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 10px; align-items: center; margin-bottom: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.portfolio-client-logo > .asset-image { width: 46px; height: 46px; border-radius: 8px; background: var(--surface-soft) center / contain no-repeat; }
.portfolio-client-logo > i { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); font-size: 22px; }
.portfolio-client-logo strong, .portfolio-client-logo small { display: block; }
.portfolio-client-logo small { color: var(--muted); }
.portfolio-asset-guide, .portfolio-convert-nudge { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; padding: 12px; border-radius: 12px; background: var(--surface-soft); }
.portfolio-convert-nudge { border: 1px solid #f2cc67; background: #fff9e7; color: #72530b; }
.portfolio-convert-nudge span { display: block; }
.portfolio-lightbox { min-height: 320px; max-height: 66vh; display: grid; place-items: center; overflow: hidden; border-radius: 14px; background: #111; }
.portfolio-lightbox img { max-width: 100%; max-height: 66vh; object-fit: contain; }
.lightbox-actions, .preview-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.project-review-strip { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(0, 1.8fr); gap: 20px; width: 100%; margin: 16px 0; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-sizing: border-box; }
.project-review-strip > div:last-child { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.review-chip { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-soft); text-align: left; }
.review-chip span { min-width: 0; }
.review-chip strong, .review-chip small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-chip small { color: var(--muted); }
.review-task-group { border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; }
.review-task-group > summary { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(90px, 150px) auto; gap: 12px; align-items: center; padding: 14px; cursor: pointer; list-style: none; background: linear-gradient(90deg, #fff9f8, #fff); }
.review-task-group > summary::-webkit-details-marker { display: none; }
.review-task-group summary small { display: block; color: var(--muted); }
.review-task-group progress { width: 100%; accent-color: var(--accent); }
.review-task-children { display: grid; gap: 9px; padding: 10px; background: var(--surface-soft); }
.review-group-icon, .review-caret { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #fff; color: var(--accent); border: 1px solid var(--line); }
.review-caret { width: 26px; height: 26px; color: var(--muted); transition: transform .18s ease; }
.review-task-group[open] .review-caret { transform: rotate(180deg); }
.review-group-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.review-group-badges b { padding: 3px 7px; border-radius: 999px; background: var(--surface-soft); color: var(--muted); font-size: 9px; }
.definition-of-done { padding: 7px 9px; border-radius: 8px; background: var(--surface-soft); }

.supporting-files-intro { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 14px; }
.supporting-files-intro p { color: var(--muted); }
.supporting-file-list { display: grid; gap: 7px; }
.supporting-file-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px; border: 1px solid var(--line); border-radius: 12px; background: #fff; text-align: left; }
.supporting-file-row.active { border-color: var(--accent); background: var(--accent-soft); }
.supporting-file-row span, .supporting-file-row strong, .supporting-file-row small { min-width: 0; }
.supporting-file-row strong, .supporting-file-row small { display: block; overflow-wrap: anywhere; }
.supporting-file-row small, .supporting-preview-meta { color: var(--muted); }
.supporting-preview-meta { display: flex; flex-wrap: wrap; gap: 12px; padding: 12px 0; }
.supporting-preview-meta span { display: inline-flex; gap: 5px; align-items: center; }
.task-attachments { display: grid; gap: 8px; }
.task-attachments small { display: block; color: var(--muted); }
.portfolio-board-list { display: grid; gap: 14px; }
.portfolio-board { padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.portfolio-board > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.board-contact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; padding: 10px; border-radius: 12px; background: var(--surface-soft); }
.board-contact-grid .asset-image { display: block; min-height: 110px; border-radius: 9px; background: #fff center / contain no-repeat; }
.promptdock-tooltip { position: fixed; z-index: 10000; max-width: 280px; padding: 7px 9px; border-radius: 8px; background: #141820; color: #fff; box-shadow: 0 8px 24px rgba(16,24,40,.24); font-size: 11px; line-height: 1.35; pointer-events: none; opacity: 0; transform: translateY(2px); transition: opacity .12s ease, transform .12s ease; }
.promptdock-tooltip.visible { opacity: 1; transform: translateY(0); }
.generic-lightbox { display: grid; place-items: center; min-height: 260px; max-height: 72vh; overflow: auto; border-radius: 14px; background: #111; }
.generic-lightbox img { display: block; width: auto; height: auto; max-width: 100%; max-height: 72vh; object-fit: contain; }
.voice-transcript { margin-top: 6px; padding: 6px 8px; border-radius: 8px; background: var(--surface-soft); }
.voice-transcript summary { cursor: pointer; color: var(--muted); font-size: 9px; font-weight: 700; }
.voice-transcript p { max-width: 48ch; margin: 6px 0 0; font-size: 10px; line-height: 1.45; }
.field-dictation-button { position: relative; justify-self: end; width: 27px; height: 27px; margin: -35px 7px 8px 0; border: 0; border-radius: 7px; background: var(--surface-soft); color: var(--muted); cursor: pointer; z-index: 2; }
.field-dictation-button.recording { background: var(--accent); color: #fff; animation: recordingPulse 1.25s ease-in-out infinite; }
.markdown-body p, .markdown-body li, .visual-document p, .visual-document li, .view-guide-copy > p, .review-import-preview p { max-width: 70ch; }

/* PromptDock 8.5 · sync receipts, task work files and website structure */
.sync-receipt { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; margin: 10px 0 12px; padding: 10px 12px; border: 1px solid #7dcf9b; border-radius: 12px; background: #effaf4; color: #17603f; text-align: left; cursor: pointer; }
.sync-receipt.partial { border-color: #efc45d; background: #fff9e8; color: #6c4a00; }
.sync-receipt.error { border-color: #e89ca1; background: #fff2f2; color: #9d202a; }
.sync-receipt > i:first-child { font-size: 21px; }
.sync-receipt span { min-width: 0; }
.sync-receipt strong, .sync-receipt small { display: block; }
.sync-receipt small { margin-top: 2px; overflow: hidden; text-overflow: ellipsis; color: currentColor; opacity: .78; white-space: nowrap; }
.sync-progress { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; min-height: 150px; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-soft); }
.sync-progress progress { grid-column: 1 / -1; width: 100%; }
.sync-progress-spinner { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 23px; }
.sync-progress-spinner i { animation: syncSpin 1s linear infinite; }
@keyframes syncSpin { to { transform: rotate(360deg); } }
.sync-result-hero { display: flex; gap: 13px; align-items: center; padding: 16px; border: 1px solid #7dcf9b; border-radius: 14px; background: #effaf4; color: #17603f; }
.sync-result-hero.error, .sync-result-hero.partial { border-color: #e89ca1; background: #fff2f2; color: #9d202a; }
.sync-result-hero > i { font-size: 30px; }
.sync-result-hero strong, .sync-result-hero span { display: block; }
.sync-result-hero span { margin-top: 4px; opacity: .75; }
.sync-result-list { display: grid; gap: 7px; margin-top: 14px; }
.sync-result-list article { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; }
.sync-result-list article > i { margin-top: 2px; color: var(--success); }
.sync-result-list article.error > i { color: var(--danger); }
.sync-result-list strong, .sync-result-list small { display: block; overflow-wrap: anywhere; }
.sync-result-list small { margin-top: 2px; color: var(--muted); }
.sync-result-errors { margin-top: 12px; padding: 12px; border-radius: 10px; background: #fff2f2; color: #9d202a; }

.task-work-files, .task-content-blocks { display: grid; gap: 8px; max-width: min(100%, 900px); margin-top: 12px; }
.task-work-files > header { display: flex; align-items: center; gap: 7px; }
.task-work-files > header span { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--surface-soft); color: var(--muted); font-size: 9px; }
.task-attachment-preview { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.attachment-loading, .attachment-error, .attachment-empty { display: grid; place-items: center; gap: 8px; min-height: 140px; padding: 22px; color: var(--muted); text-align: center; }
.attachment-preview-header { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface-soft); }
.attachment-preview-header > span { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 7px; align-items: center; min-width: 0; }
.attachment-preview-header > span > i { grid-row: 1 / 3; color: var(--accent); font-size: 19px; }
.attachment-preview-header strong, .attachment-preview-header small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-preview-header small { color: var(--muted); }
.task-markdown-preview { max-height: 520px; overflow: auto; padding: clamp(16px, 3vw, 30px); }
.task-markdown-preview table, .task-table-scroll table { width: 100%; border-collapse: collapse; font-size: 11px; }
.task-markdown-preview th, .task-markdown-preview td, .task-table-scroll th, .task-table-scroll td { padding: 8px 9px; border: 1px solid var(--line); vertical-align: top; text-align: left; }
.task-markdown-preview th, .task-table-scroll th { background: var(--surface-soft); font-weight: 800; }
.task-table-scroll { max-width: 100%; overflow: auto; }
.attachment-source { max-height: 480px; margin: 0; overflow: auto; padding: 18px; white-space: pre-wrap; overflow-wrap: anywhere; font: 11px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; }
.attachment-pdf, .attachment-html { display: block; width: 100%; height: min(62vh, 640px); border: 0; background: #fff; }
.attachment-image { display: grid; place-items: center; max-height: 620px; overflow: auto; padding: 14px; background: #111; }
.attachment-image img { display: block; width: auto; height: auto; max-width: 100%; max-height: 580px; object-fit: contain; }
.task-table-block { overflow: hidden; border: 1px solid var(--line); border-radius: 11px; }
.task-table-block > header { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; background: var(--surface-soft); }

.sitemap-studio { display: grid; gap: 14px; min-width: 0; }
.sitemap-studio-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.sitemap-studio-head h2, .sitemap-studio-head p { margin: 0; }
.sitemap-studio-head > div > p:last-child { max-width: 70ch; margin-top: 5px; color: var(--muted); line-height: 1.5; }
.sitemap-template-menu { position: relative; flex: none; }
.sitemap-template-menu > summary { display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-weight: 700; cursor: pointer; list-style: none; }
.sitemap-template-menu > div { position: absolute; z-index: 20; top: calc(100% + 7px); right: 0; display: grid; width: 280px; max-height: 420px; overflow: auto; padding: 7px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 18px 50px rgba(20,24,32,.16); }
.sitemap-template-menu button { display: grid; gap: 2px; padding: 9px; border: 0; border-radius: 8px; background: transparent; text-align: left; }
.sitemap-template-menu button:hover { background: var(--surface-soft); }
.sitemap-template-menu small { color: var(--muted); }
.sitemap-warning { display: flex; gap: 8px; padding: 10px 12px; border: 1px solid #efc45d; border-radius: 10px; background: #fff9e8; color: #6c4a00; }
.sitemap-workspace { display: grid; grid-template-columns: minmax(165px, .38fr) minmax(360px, 1fr); min-height: 560px; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: var(--surface-soft); }
.sitemap-page-tree { display: grid; align-content: start; gap: 5px; padding: 10px; border-right: 1px solid var(--line); background: #fff; }
.sitemap-page-tree > header { display: flex; justify-content: space-between; padding: 7px 6px 10px; }
.sitemap-page-tree button { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 9px; border: 1px solid transparent; border-radius: 9px; background: transparent; text-align: left; }
.sitemap-page-tree button.active { border-color: rgba(255,69,78,.28); background: var(--accent-soft); color: var(--accent); }
.sitemap-page-tree button span, .sitemap-page-tree strong, .sitemap-page-tree small { min-width: 0; }
.sitemap-page-tree strong, .sitemap-page-tree small { display: block; overflow-wrap: anywhere; }
.sitemap-page-tree small { margin-top: 2px; color: var(--muted); }
.sitemap-canvas { min-width: 0; padding: 15px; }
.sitemap-canvas > header { display: flex; justify-content: space-between; gap: 12px; align-items: flex-end; margin-bottom: 14px; }
.sitemap-canvas h3 { margin: 2px 0 0; font-size: 20px; }
.sitemap-section-count { color: var(--muted); font-size: 10px; }
.sitemap-flow-canvas { display: grid; justify-items: stretch; width: 100%; min-width: 0; margin: 0; }
.sitemap-flow-arrow { justify-self: center; padding: 5px; color: #b9bec8; }
.sitemap-section-card { display: grid; grid-template-columns: 34px 62px minmax(0, 1fr) auto; gap: 11px; align-items: center; width: 100%; padding: 11px; border: 1px solid var(--line); border-radius: 12px; background: #fff; text-align: left; box-shadow: 0 4px 12px rgba(22,28,40,.035); }
.sitemap-section-card:hover, .sitemap-section-card.active { border-color: var(--accent); box-shadow: 0 7px 22px rgba(255,69,78,.10); }
.sitemap-order { color: var(--muted); font: 700 10px ui-monospace, monospace; }
.sitemap-layout-mini { display: grid; place-items: center; width: 62px; height: 46px; border-radius: 8px; background: linear-gradient(145deg,#fff0ee,#f5f6f8); color: var(--accent); font-size: 22px; }
.sitemap-section-copy { min-width: 0; }
.sitemap-section-copy strong, .sitemap-section-copy small, .sitemap-section-copy > span { display: block; }
.sitemap-section-copy small { margin-top: 2px; color: var(--accent); font-size: 9px; font-weight: 700; }
.sitemap-section-copy > span { margin-top: 5px; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.sitemap-section-signals { display: flex; gap: 4px; }
.sitemap-section-signals b { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 6px; background: #eff9f3; color: #248052; }
.sitemap-empty, .sitemap-empty-small { display: grid; place-items: center; align-content: center; min-height: 420px; padding: 30px; color: var(--muted); text-align: center; }
.sitemap-empty > i { color: var(--accent); font-size: 42px; }
.sitemap-empty p { max-width: 60ch; line-height: 1.55; }
.sitemap-inspector { display: grid; gap: 18px; padding: 0 16px 24px; }
.sitemap-inspector h3 { margin: 0; }
.sitemap-inspector section > p { color: var(--muted); line-height: 1.5; }
.layout-type-grid { display: grid; gap: 6px; }
.sitemap-layout-select { display: grid; gap: 5px; margin: 10px 0; }
.sitemap-layout-select span { color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.sitemap-layout-select select { width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink); }
.layout-type-grid button { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 9px; align-items: center; padding: 9px; border: 1px solid var(--line); border-radius: 10px; background: #fff; text-align: left; }
.layout-type-grid button.active { border-color: var(--accent); background: var(--accent-soft); }
.layout-type-grid button > i { color: var(--accent); font-size: 20px; }
.layout-type-grid strong, .layout-type-grid small { display: block; }
.layout-type-grid small { margin-top: 2px; color: var(--muted); line-height: 1.35; }
.sitemap-facts dl { display: grid; gap: 7px; }
.sitemap-facts dl > div { padding: 9px; border-radius: 9px; background: var(--surface-soft); }
.sitemap-facts dt { color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.sitemap-facts dd { margin: 4px 0 0; line-height: 1.45; overflow-wrap: anywhere; }
.sitemap-template-preview { display: grid; gap: 7px; margin-top: 12px; }
.sitemap-template-preview > div { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 9px; align-items: center; padding: 9px; border: 1px solid var(--line); border-radius: 9px; }
.sitemap-template-preview b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--accent-soft); color: var(--accent); }
.sitemap-template-preview strong, .sitemap-template-preview small { display: block; }
.sitemap-template-preview small { color: var(--muted); }

@media (max-width: 1100px) { .sitemap-workspace { grid-template-columns: 150px minmax(330px, 1fr); } }
@media (max-width: 760px) { .sitemap-workspace { grid-template-columns: 1fr; } .sitemap-page-tree { border-right: 0; border-bottom: 1px solid var(--line); } .sitemap-section-card { grid-template-columns: 28px 50px minmax(0, 1fr); } .sitemap-section-signals { grid-column: 3; } }

@media (max-width: 900px) {
  .project-review-strip { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .handoff-tray { right: 10px; bottom: 10px; width: calc(100vw - 20px); max-height: calc(100vh - 20px); }
  .portfolio-rules-editor .form-grid { grid-template-columns: 1fr; }
  .snapshot-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .home-view { padding: 22px 16px 64px; }
  .home-hero, .home-project-head { align-items: flex-start; flex-direction: column; }
  .home-new-project { width: 100%; }
  .home-metrics { grid-template-columns: 1fr 1fr; }
  .home-metrics div { border-right: 0; }
  .home-project-list { grid-template-columns: 1fr; }
  .home-backup { align-items: flex-start; flex-direction: column; }
  .home-backup-actions { width: 100%; justify-content: flex-start; }

  .three-column,
  .prompt-layout,
  .layout-workspace {
    grid-template-columns: 180px minmax(0, 1fr);
  }
  .three-column.resizable-panes { grid-template-columns: 180px minmax(0, 1fr); }
  .pane-splitter { display: none; }

  .three-column > :last-child,
  .prompt-layout > :last-child,
  .layout-workspace > :last-child {
    display: none;
  }

  .shortcut-bar {
    overflow-x: auto;
  }

  .shortcut-item span {
    display: none;
  }
}

/* Small extension windows need one clear work surface instead of squeezed
   desktop columns. Navigation and tabs remain horizontally reachable. */
@media (max-width: 600px) {
  .app-shell,
  .compact .app-shell {
    grid-template-rows: 108px minmax(0, 1fr) 42px;
  }

  .topbar {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: 58px 50px;
    gap: 8px;
    padding: 0 12px;
  }

  .brand { font-size: 20px; line-height: .95; }
  .global-search { display: none; }
  .language-control { margin-left: auto; }
  .primary-nav {
    grid-column: 1 / -1;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .primary-nav::-webkit-scrollbar { display: none; }
  .nav-item { padding-inline: 11px; font-size: 12px; }
  .nav-item.active::after { right: 10px; left: 10px; }

  .three-column,
  .prompt-layout,
  .layout-workspace {
    grid-template-columns: minmax(0, 1fr);
  }
  .three-column.resizable-panes { grid-template-columns: minmax(0, 1fr); }
  .three-column > :first-child,
  .prompt-layout > :first-child,
  .layout-workspace > :first-child,
  .three-column > :last-child,
  .prompt-layout > :last-child,
  .layout-workspace > :last-child {
    display: none;
  }

  .column,
  .column-inner,
  .main-content { min-width: 0; }
  .column-inner { padding: 16px; }
  .content-heading { align-items: flex-start; gap: 12px; }
  .content-heading h1 { font-size: 25px; }
  .heading-actions { flex-wrap: wrap; justify-content: flex-start; }
  .heading-actions button { padding-inline: 10px; }
  .section-tabs {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .section-tabs::-webkit-scrollbar { display: none; }
  .section-tab { flex: 0 0 auto; padding-inline: 10px; }
  .readiness-strip { grid-template-columns: 1fr; }
  .brand-toolbar { align-items: flex-start; flex-direction: column; }
  .sync-hint { max-width: none; text-align: left; }
  .file-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .prompt-grid { grid-template-columns: 1fr; }
}
/* PromptDock 9.0 navigation and result-oriented workspaces */
.project-context-control{display:flex;align-items:center;gap:7px;min-width:150px;max-width:210px;padding:7px 9px;border:1px solid #dde1e8;border-radius:10px;background:#fff;color:#647084}
.project-context-control select{min-width:0;width:100%;border:0;background:transparent;font:600 12px Inter,sans-serif;color:#141924;outline:0;text-overflow:ellipsis}
.more-menu{position:relative}.more-menu>summary{display:grid;place-items:center;width:36px;height:36px;border:1px solid #dde1e8;border-radius:10px;cursor:pointer;list-style:none;background:#fff}.more-menu>summary::-webkit-details-marker{display:none}
.more-menu-popover{position:absolute;right:0;top:44px;z-index:100;width:230px;padding:8px;background:#fff;border:1px solid #e0e4eb;border-radius:14px;box-shadow:0 16px 50px rgba(21,27,38,.14)}
.more-menu-popover button{width:100%;display:flex;align-items:center;gap:10px;padding:10px;border:0;border-radius:9px;background:transparent;text-align:left;font:600 12px Inter,sans-serif;color:#252b36}.more-menu-popover button:hover{background:#f5f6f8}
.standalone-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:0;min-height:calc(100vh - 220px);border-top:1px solid #e7e9ee}.standalone-workspace>main,.standalone-workspace>.sitemap-studio{min-width:0;padding:20px}.standalone-inspector{border-left:1px solid #e7e9ee;min-width:0;background:#fbfbfc;overflow:auto}.sitemap-page>.sitemap-studio{grid-column:1}.sitemap-page>.standalone-inspector{grid-column:2}.sitemap-page .sitemap-workspace{min-height:560px}
.design-system-page{padding:24px 30px 80px;max-width:1500px;margin:auto}.design-system-summary{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;margin-bottom:24px;padding:22px;border:1px solid #e4e6ec;border-radius:16px;background:linear-gradient(130deg,#fff,#fff8f7)}.design-system-summary h2{font-size:26px;margin:4px 0 6px}.design-reference-section,.design-brand-core{margin-top:28px;padding:22px;border:1px solid #e4e6ec;border-radius:16px;background:#fff}.design-brand-core{max-width:78ch}.section-title{display:flex;justify-content:space-between;margin-bottom:16px}
.focus-page{max-width:1180px;margin:0 auto;padding:28px 28px 90px}.focus-timer-card{display:grid;grid-template-columns:220px 1fr;gap:34px;align-items:center;padding:32px;border:1px solid #e2e5eb;border-radius:22px;background:linear-gradient(135deg,#fff 10%,#fff3f1)}.focus-timer-card.active{border-color:#ffb4ad;box-shadow:0 18px 50px rgba(255,58,66,.09)}.focus-ring{width:190px;height:190px;border-radius:50%;display:grid;place-content:center;text-align:center;border:12px solid #ff4a52;box-shadow:inset 0 0 0 1px #ffd2cf}.focus-ring strong{font:800 44px 'Plus Jakarta Sans',sans-serif;letter-spacing:-.05em}.focus-ring span{text-transform:uppercase;letter-spacing:.12em;font-size:10px;color:#697183}.focus-config h2{font-size:30px;letter-spacing:-.04em}.focus-config label{display:grid;gap:7px;max-width:520px;margin:15px 0}.focus-config select,.focus-config input{padding:11px;border:1px solid #dfe3ea;border-radius:10px;background:#fff}.focus-presets{display:flex;gap:8px;margin:14px 0}.focus-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}.focus-grid>section,.focus-history{padding:22px;border:1px solid #e2e5eb;border-radius:16px;background:#fff}.audio-source-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:15px 0}.audio-source-grid input{position:absolute;opacity:0}.audio-source-grid span{display:flex;gap:8px;align-items:center;padding:11px;border:1px solid #e0e3e9;border-radius:10px}.audio-source-grid input:checked+span{border-color:#ff4a52;background:#fff3f2;color:#e52c38}.focus-checklist{display:grid;gap:12px;padding:0;list-style:none}.focus-checklist li{display:flex;gap:9px;align-items:flex-start}.focus-checklist i{color:#2ca574}.focus-history{margin-top:18px}.focus-history>div{display:flex;justify-content:space-between;padding:10px 0;border-top:1px solid #eceef2}
.prompt-source-switcher{display:flex;gap:8px;margin:0 0 14px}.prompt-source-switcher>button{display:flex;align-items:center;gap:10px;min-width:210px;padding:10px 12px;border:1px solid #e0e3e8;border-radius:12px;background:#fff;text-align:left}.prompt-source-switcher>button.active{border-color:#ff7b7f;background:#fff4f3}.prompt-source-switcher span{display:grid}.prompt-source-switcher small{color:#7a8290;font-size:10px}.external-library{padding:4px}.external-library>header{display:flex;justify-content:space-between;gap:20px;padding:18px;border:1px solid #e4e6ec;border-radius:14px;background:#fbfbfc}.external-library>header h3{margin:4px 0}.external-library>header p{max-width:70ch}.external-library-meta{display:flex;gap:8px;margin:12px 0}.external-library-meta span,.source-pill{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:999px;background:#f2f4f7;color:#606879;font-size:10px;font-weight:700}.external-prompt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.external-prompt-grid article{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;padding:16px;border:1px solid #e2e5ea;border-radius:14px;background:#fff}.external-prompt-grid h4{margin:7px 0 5px}.external-prompt-grid p{font-size:12px;line-height:1.5;color:#656d7b}.external-prompt-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:#fff0ef;color:#ff3e49;font-size:18px}
@media(max-width:1180px){.project-context-control{max-width:135px}.global-search,.chatgpt-status,.language-control{display:none}.topbar{gap:8px;padding-inline:14px}.topbar .primary-nav{flex:1}.topbar #newContentButton{width:38px;padding:0;justify-content:center}.topbar #newContentButton span{display:none}.nav-item{padding-inline:7px;font-size:10px}.prompt-layout{grid-template-columns:210px minmax(0,1fr)}.prompt-layout>.preview-pane{display:none}.standalone-workspace{grid-template-columns:1fr}.standalone-inspector{border-left:0;border-top:1px solid #e7e9ee}.focus-grid,.external-prompt-grid{grid-template-columns:1fr}}
@media(max-width:760px){.project-context-control{display:none}.focus-timer-card{grid-template-columns:1fr}.focus-ring{margin:auto}.design-system-summary{display:block}.standalone-workspace{display:block}}
.focus-audio-toggle{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center;gap:8px}.focus-youtube-player{width:100%;aspect-ratio:16/9;margin-top:12px;border:0;border-radius:12px;background:#111}

/* PromptDock 9.1 focus, project theming and stronger information hierarchy */
.nav-item i{font-size:20px;line-height:1;flex:0 0 auto}.nav-item{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding-inline:13px;letter-spacing:-.012em}.primary-nav{gap:5px}.project-context-control{border:2px solid color-mix(in srgb,var(--accent) 48%,#d9dee8);background:color-mix(in srgb,var(--accent) 7%,#fff);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 7%,transparent)}
.project-context-control>i{color:var(--accent);font-size:17px}.project-context-control select{font-weight:800}.primary-button{background:var(--accent)}.nav-item.active{color:var(--accent)}
.app-shell:has(.focus-strip.active){grid-template-rows:72px auto minmax(0,1fr) 42px}.focus-strip{display:none}.focus-strip.active{display:flex;align-items:center;gap:20px;padding:9px 18px;background:linear-gradient(90deg,#e94d18,#ff742c);color:#fff;box-shadow:0 5px 18px rgba(155,52,13,.2);z-index:30}.focus-strip-main{display:flex;align-items:center;gap:9px;min-width:220px}.focus-strip-main>i{font-size:25px}.focus-strip-main span{display:grid}.focus-strip-main small{font-size:8px;font-weight:900;letter-spacing:.12em}.focus-strip-steps{display:flex;gap:7px;min-width:0;flex:1}.focus-strip-steps button{display:flex;align-items:center;gap:7px;min-width:0;max-width:270px;padding:6px 9px;border:1px solid #ffffff55;border-radius:9px;background:#ffffff15;color:#fff;text-align:left}.focus-strip-steps button.current{background:#fff;color:#b5390e}.focus-strip-steps span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.focus-strip-steps small{display:block;opacity:.75}.focus-strip-score{display:flex;align-items:center;gap:4px;padding:6px 10px;border-radius:10px;background:#24100738}.focus-strip-score strong{font-size:18px}
.focus-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:620px}.focus-task-preview{display:grid;gap:5px;max-width:620px;padding:10px;border-radius:10px;background:var(--surface-muted)}.focus-task-preview span{display:grid;grid-template-columns:auto 1fr auto;gap:7px;align-items:center;font-size:11px}.focus-task-preview small{color:var(--muted)}.custom-youtube-grid{display:grid;grid-template-columns:1fr 120px;gap:8px}.custom-youtube-grid input[type=url]{grid-column:1/3}.custom-youtube-grid button{grid-column:1/3}.focus-grid select,.focus-grid input{width:100%;padding:10px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink)}
.global-youtube-audio{position:fixed;right:16px;bottom:54px;width:260px;height:146px;z-index:160;border:1px solid #333;border-radius:12px;background:#111;box-shadow:0 12px 40px #0005}.shortcut-audio-divider{width:1px;height:20px;background:var(--line-strong);margin:0 3px}.shortcut-sound{display:flex;align-items:center;gap:5px;height:30px;padding:0 8px;border:0;border-radius:7px;background:transparent;font-size:10px}.shortcut-sound:hover,.shortcut-sound.active{background:color-mix(in srgb,var(--accent) 12%,var(--surface));color:var(--accent)}.shortcut-sound kbd{font-size:8px}
.shortcut-volume{display:flex;align-items:center;gap:6px;height:30px;padding:0 8px;border-radius:7px;background:color-mix(in srgb,var(--accent) 5%,var(--surface));color:var(--muted);white-space:nowrap}.shortcut-volume>i{font-size:15px;color:var(--accent)}.shortcut-volume input[type="range"]{width:76px;min-width:58px;height:3px;margin:0;accent-color:var(--accent);cursor:pointer}.shortcut-volume output{min-width:27px;font-size:9px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink)}
.prompt-hub-links{position:sticky;bottom:0;display:grid;gap:3px;margin-top:18px;padding:12px 0 4px;background:linear-gradient(transparent,var(--surface) 12%)}.prompt-hub-links>small{padding:0 8px 5px;color:var(--muted);font-size:9px;font-weight:800;text-transform:uppercase}.prompt-hub-links a{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;padding:8px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:11px}.prompt-hub-links a:hover{background:var(--surface-hover);color:var(--accent)}
.sitemap-ai-variant{display:flex;align-items:center;gap:10px;margin:12px 0;padding:12px;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:11px;background:color-mix(in srgb,var(--accent) 7%,var(--surface))}.sitemap-ai-variant>i{color:var(--accent);font-size:21px}.sitemap-ai-variant span{display:grid}.sitemap-ai-variant small{color:var(--muted)}
.task-row.priority-high{border-left:4px solid #e4353f}.task-row.priority-medium{border-left:4px solid #e99b20}.task-row.priority-low{border-left:4px solid #4a98d6}.task-row.priority-high::before,.task-row.priority-medium::before,.task-row.priority-low::before{align-self:start;display:grid;place-items:center;width:22px;height:22px;border-radius:6px;color:#fff;font:800 10px 'Plus Jakarta Sans',sans-serif}.task-row.priority-high::before{content:"H";background:#e4353f}.task-row.priority-medium::before{content:"M";background:#e99b20}.task-row.priority-low::before{content:"L";background:#4a98d6}.task-meta .priority-high,.task-meta .priority-medium,.task-meta .priority-low{padding:3px 7px;border-radius:999px;font-weight:850}.task-meta .priority-high{background:#ffe9ea;color:#b71924}.task-meta .priority-medium{background:#fff1d7;color:#945d00}.task-meta .priority-low{background:#e7f3ff;color:#176395}
:root[data-theme="dark"]{color-scheme:dark;--bg:#111318;--surface:#171a21;--surface-muted:#20242c;--surface-hover:#292e38;--ink:#f4f5f7;--muted:#aab1be;--faint:#7d8593;--line:#343946;--line-strong:#444b59;--accent-soft:#332225}
@media(prefers-color-scheme:dark){:root[data-theme="system"]{color-scheme:dark;--bg:#111318;--surface:#171a21;--surface-muted:#20242c;--surface-hover:#292e38;--ink:#f4f5f7;--muted:#aab1be;--faint:#7d8593;--line:#343946;--line-strong:#444b59;--accent-soft:#332225}}
:root[data-theme="dark"] .topbar,:root[data-theme="dark"] .project-context-control,:root[data-theme="dark"] .more-menu-popover,:root[data-theme="dark"] .focus-grid>section,:root[data-theme="dark"] .focus-history,:root[data-theme="dark"] .focus-timer-card{background:var(--surface);color:var(--ink)}
@media(prefers-color-scheme:dark){:root[data-theme="system"] .topbar,:root[data-theme="system"] .project-context-control,:root[data-theme="system"] .more-menu-popover,:root[data-theme="system"] .focus-grid>section,:root[data-theme="system"] .focus-history,:root[data-theme="system"] .focus-timer-card{background:var(--surface);color:var(--ink)}}
@media(max-width:1100px){.nav-item span{display:none}.focus-strip-steps button:nth-child(n+3){display:none}.shortcut-sound span{display:none}}
@media(max-width:760px){.shortcut-volume{padding-inline:6px}.shortcut-volume input[type="range"]{width:58px}.shortcut-volume output{display:none}}
.folder-structure-tree{display:grid;gap:4px;max-height:50vh;margin:14px 0;padding:0;overflow:auto;list-style:none}.folder-structure-tree li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:var(--surface)}.folder-structure-tree span{font:650 11px ui-monospace,SFMono-Regular,Consolas,monospace;overflow-wrap:anywhere}.folder-structure-tree small{font-size:9px;color:var(--muted)}.folder-plan-new i{color:#24966b}.folder-plan-existing{opacity:.68}.folder-plan-conflict{border-color:#e45c63!important;background:#fff3f3!important}.folder-plan-conflict i{color:#d8323c}
@media (min-width:1101px) and (max-width:1180px){.topbar{gap:13px;padding-inline:14px}.primary-nav{gap:4px}.nav-item{gap:7px;padding-inline:10px;font-size:12px}.nav-item i{font-size:20px}.brand{font-size:23px}}